/* Tailored Ideas — reset.css: the website reset (28 Oct 2026). Loaded last. The site is the mark, opened up: one geometry (four arms cut on one circle around a dot) at three scales. The system figure explains the offer; the page mark in every head lights the page's arm; the system marker tags answers with the part of the system that delivers them. Colour means one thing everywhere: jacaranda the organisation's own (what it knows, the person who decides) and the brand's lead; azure workflow automation; sunshine training and the button; lawn research and evaluation. Sections: 1 the reveal rule · 2 house rules · 3 the bar · 4 the page head and page mark · 5 the system marker · 6 the closing band · 7 the footer · 8 figure conventions · 9 the system figure · 10 the method strip · 11 the depth expander · 12 phone. See docs/design-system.md. */ .page-jacaranda { --page: var(--jacaranda); } .field-white { background: var(--white); color: var(--on-light); } .field-white .lead, .field-white .section-lead { color: var(--slate); } .page-azure { --page: var(--azure); } .page-sunshine { --page: var(--sunshine); } .page-lawn { --page: var(--lawn); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* ------------------------------------------------------------------ 1. The reveal rule (W-08): nothing rests hidden waiting for a scroll. Text never animates in. Only figures assemble, and only from a state that is safe if motion never runs (see 9). ------------------------------------------------------------------ */ .js [data-reveal], .js .hero [data-load], .js .nfp-band [data-load], [data-load] { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } /* ------------------------------------------------------------------ 2. House rules (guide p36), site-wide. ------------------------------------------------------------------ */ /* Rule 1: no small tracked labels. Where a label stays, it is plain text in sentence case, at a readable size. */ .eyebrow, .addon-note__label, .bignum__label, .bignum__unit, .bio__role, .buyers__label, .cred-strip, .demo__label, .direct__label, .direct__row dt, .discipline__outcome-label, .footer__heading, .foundation__kicker, .foundation__within, .human__role, .ladder__label, .ledger__effect-label, .logo-chip, .logo-type, .offer-block__tag, .offer-card__eyebrow, .person__role, .placeholder, .proof-item__tag, .pullquote cite, .read-next__kicker, .science-card__kicker, .science-card__meta, .service-tag, .spec__label, .stage__outcome-label, .system__joint-label, .tabs__prompt, .timeline__node-label, .timeline__gap-label, .tools__label, .umbrella__kicker, .who-links__label { text-transform: none !important; letter-spacing: 0.005em !important; font-variant-caps: normal !important; } .eyebrow, .addon-note__label, .buyers__label, .discipline__outcome-label, .ledger__effect-label, .spec__label, .stage__outcome-label, .system__joint-label, .tabs__prompt, .tools__label, .who-links__label, .timeline__node-label, .timeline__gap-label, .bio__role, .person__role, .offer-block__tag, .offer-card__eyebrow, .ladder__label, .read-next__kicker, .foundation__kicker, .foundation__within, .umbrella__kicker, .direct__label, .direct__row dt, .science-card__meta, .science-card__kicker, .bignum__label, .bignum__unit, .human__role, .proof-item__tag, .service-tag { font-size: var(--step--1) !important; font-weight: 600; } /* The eyebrow is a plain lead-in line now: no arm rule before it. */ .eyebrow::before { content: none !important; } .eyebrow { display: block; font-size: var(--step-0) !important; color: var(--charcoal); } .field-navy .eyebrow, .field-deep .eyebrow { color: var(--on-charcoal); } /* Rule 3: no bordered cards. Group with grounds and space. */ .card, .field-light .card { border-color: transparent; } /* Rule 4: no shadows or glows. */ .nav__submenu, .cite__bubble, .piece-card, .press__piece, .science-card { box-shadow: none !important; filter: none !important; } .gb__glow, .growth-band [filter] { filter: none !important; } /* Rule 5: no icon rows. The tool marks and the contrast panel's ticks stay. */ .stage__icon, .spec__icon, .discipline__icon, .ledger__icon { display: none !important; } /* Rule 9: no dashed or dotted lines. */ .timeline__after { border-top-style: solid !important; } .cite__link, .cite-link, .entry a[href^="#"], .entry .cite a { border-bottom-style: solid !important; } /* Rule 2: no vertical bar beside any quote; the marker sits above. */ .pullquote, .quote, blockquote { border-left: 0 !important; } /* Relics: the comet and the small signature mark are gone. */ .comet, .hero__comet, .ct-far, .ct-mid, .ct-near, .ct-head, .tabs__signature { display: none !important; } /* No accent grounds (V-05, W-07): offer cards carry their name alone, on white. */ .offer-card, .page-training .ladder .offer-card, .page-home--reversed .offer-card { background: var(--white) !important; color: var(--on-light) !important; --bite-dot: var(--page, var(--jacaranda)); } .page-training .ladder .offer-card::before, .offer-card::before { content: none !important; } .offer-card .offer-card__title, .offer-card .offer-card__summary, .offer-card .arrow-link { color: var(--on-light) !important; } .field-white .offer-card { background: var(--mist) !important; } /* V-13 (chunk 1 addendum): azure means automation only. Links are underlined: white on charcoal, deep jacaranda on light. Numerals on charcoal are white. */ .arrow-link { border-bottom: 1.5px solid currentColor; padding-bottom: 1px; } .arrow-link:hover { border-bottom-width: 2.5px; } .field-light .arrow-link, .field-white .arrow-link, .phead .arrow-link { color: var(--deep-jacaranda); } :is(.field-navy, .field-deep) .arrow-link, :is(.field-navy, .field-deep) .prose a, :is(.field-navy, .field-deep) .link { color: var(--on-charcoal); text-decoration-color: currentColor; } .prose a, .link { text-decoration-color: currentColor; } :is(.field-navy, .field-deep) .index, :is(.field-navy, .field-deep) .stage__num, :is(.field-navy, .field-deep) .ladder__num { color: var(--on-charcoal); } /* V-13: the Science cards lose their accent grounds, as the offer cards do. */ .science-card, .science-grid > :nth-child(n) { background-color: var(--white); color: var(--on-light); --bite-dot: var(--jacaranda); } .field-white .science-card, .field-white .science-grid > :nth-child(n) { background-color: var(--mist); } .science-card::before { content: none; } .science-card__kicker { background: transparent; color: var(--on-light); padding: 0; border-radius: 0; } /* V-13: italic phrases in headings: deep jacaranda on light, white on charcoal. */ :is(h1, h2, h3, .display-m, .display-l, .display-s) em, :is(h1, h2, h3, .display-m, .display-l, .display-s) i { color: var(--deep-jacaranda); font-family: var(--font-sans); font-style: italic; } :is(.field-navy, .field-deep, .sysfig) :is(h1, h2, h3, .display-m, .display-l, .display-s) :is(em, i) { color: var(--on-charcoal); } /* The 404 (WX): the seam kept; the bar and footer as every page has them. */ .error-page { min-height: 62vh; display: flex; align-items: center; } .error-page__inner { display: grid; justify-items: start; gap: var(--space-s); } .error-page__lead-in { font-size: var(--step-0); font-weight: 600; color: var(--on-charcoal); } .error-page__title { max-width: 16ch; } .error-page__lead { color: var(--on-charcoal-soft); max-width: 44ch; } .error-page__routes { list-style: none; display: grid; gap: 0.7rem; margin-top: var(--space-s); } .error-page__routes .arrow-link { display: inline; font-size: var(--step-0); line-height: 1.6; } .error-page__home { margin-top: var(--space-m); } /* ------------------------------------------------------------------ 3. The bar (SITE-N1 to N8). Charcoal, the reversed lockup, five items, the sunshine button. The current item carries a short bar in the page's colour. ------------------------------------------------------------------ */ .site-header { background: var(--charcoal); backdrop-filter: none; -webkit-backdrop-filter: none; } .site-header.is-scrolled { background: var(--charcoal); border-bottom-color: var(--rule-on-charcoal); } .nav__menu { gap: clamp(1.25rem, 2.4vw, 2.5rem); } .nav__link, .nav__parent.nav__link { font-size: var(--step-0); font-weight: 500; letter-spacing: 0.005em; color: var(--on-charcoal); } .nav__link::after { height: 3px; width: 1.4rem; bottom: -0.35rem; background: var(--page, var(--jacaranda)); transform: scaleX(0); border-radius: 0; } .nav__link:hover::after { transform: scaleX(1); background: var(--on-charcoal-soft); } .nav__link[aria-current="page"]::after, .nav__link.is-section-active::after { transform: scaleX(1); background: var(--page, var(--jacaranda)); } .nav__book { font-size: var(--step--1); letter-spacing: 0.01em; } /* Dropdown panels: charcoal, flat (no shadow, no border box). */ .nav__submenu { background: var(--charcoal); border: 0; border-radius: 0 0 var(--radius) var(--radius); padding: 0.75rem; margin-top: 1.05rem; } .nav__sublink { font-size: var(--step-0); font-weight: 500; letter-spacing: 0.005em; padding: 0.5em 0.75em; } .nav__sublink:hover, .nav__sublink[aria-current="page"] { background: var(--charcoal-raised); } /* The What we do menu teaches the system: the whole first, set apart, then the three offers, each with its marker; Training's children indented, a step smaller, no markers. */ .sysmenu { min-width: 20rem; left: 0; transform: none; gap: 0.1rem; } .sysmenu > li { list-style: none; } .sysmenu__link { display: flex; align-items: center; gap: 0.75rem; } .sysmenu__link .smark { --m-quiet: var(--charcoal-raised); width: 1.6rem; height: 1.6rem; flex: none; } .sysmenu__link:hover .smark, .sysmenu__link[aria-current="page"] .smark { --m-quiet: #3A424E; } .sysmenu__whole { padding-bottom: 0.4rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--rule-on-charcoal); } .sysmenu__children { list-style: none; display: grid; gap: 0.05rem; margin: 0.1rem 0 0.35rem; padding-left: calc(0.75em + 1.6rem + 0.75rem - 0.75em); } .sysmenu__children .nav__sublink { font-size: var(--step--1); color: var(--on-charcoal-soft); padding-block: 0.35em; } .sysmenu__children .nav__sublink:hover, .sysmenu__children .nav__sublink[aria-current="page"] { color: var(--on-charcoal); } #who-submenu { left: 0; transform: none; } #about-submenu { left: auto; right: 0; transform: none; min-width: 10rem; } /* ------------------------------------------------------------------ 4. The page head and the page mark (W-01, W-02, W-11, W-13). One head for every inner page, on Mist. The big mark sits in the head's right third, cropped by the band's top and bottom edges, with the page's own arm lit. ------------------------------------------------------------------ */ .phead { --pm-x: clamp(17rem, 27vw, 26rem); /* the dot's offset right of the page's centre */ position: relative; overflow: hidden; background: var(--mist); color: var(--on-light); padding-block: clamp(2.75rem, 4.6vw, 4rem) clamp(2.75rem, 4.6vw, 4rem); min-height: clamp(15rem, 21vw, 19rem); display: flex; align-items: center; } .phead > .container { width: 100%; } .phead__inner { position: relative; z-index: 1; } .phead__text { max-width: min(46rem, 58%); display: grid; gap: var(--space-s); justify-items: start; } .phead__lead-in { font-size: var(--step-0); font-weight: 600; color: var(--charcoal); margin: 0; } .phead__title { font-size: clamp(2.2rem, 1.05rem + 3.1vw, 3.6rem); line-height: 1.08; max-width: 20ch; color: var(--on-light); } .phead__title .brush { color: inherit; } .phead__promise { font-size: var(--step-1); line-height: 1.5; color: var(--slate); max-width: 48ch; margin-top: 0.25rem; } /* Slot 1: the system line (a marker, one line, an arrow link to WW). */ .phead__system { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; margin-top: 0.5rem; font-size: var(--step-0); color: var(--on-light); max-width: 60ch; } .phead__system .smark { width: 1.75rem; height: 1.75rem; flex: none; } .phead__system .arrow-link { color: var(--deep-jacaranda); font-size: var(--step-0); } /* Slot 2: quick links or an in-page index, plain text links in one wrapping line. */ .phead__links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1.25rem; margin-top: 0.25rem; font-size: var(--step-0); max-width: 64ch; } .phead__links-label { font-weight: 600; color: var(--on-light); margin-right: 0.25rem; } .phead__links a { color: var(--deep-jacaranda); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--rule-jacaranda); } .phead__links a:hover { text-decoration-color: currentColor; } /* The page mark: the kit's proportions, quiet arms in Mist-deep, the jacaranda arm and dot always lit, the page's arm lit in its colour. */ .pmark { position: absolute; z-index: 0; /* Sized from the band's own height, so every head crops the arms the same way: about half of each arm shows, whatever the head's length. */ height: 165%; width: auto; aspect-ratio: 1; left: calc(50% + var(--pm-x)); top: 50%; transform: translate(-50%, -50%); overflow: visible; pointer-events: none; } .pmark__arm path { fill: var(--mist-deep); } .pmark__arm--ja path, .pmark__dot { fill: var(--jacaranda); } .phead--az .pmark__arm--az path, .phead--all .pmark__arm--az path { fill: var(--azure); } .phead--su .pmark__arm--su path, .phead--all .pmark__arm--su path { fill: var(--sunshine); } .phead--la .pmark__arm--la path, .phead--all .pmark__arm--la path { fill: var(--lawn); } /* On white grounds a sunshine arm would wash out; heads are always Mist. */ @media (prefers-reduced-motion: no-preference) { .pmark__arm { animation: pm-arm-in 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .pmark__arm--la { --mx: -160px; --my: -160px; animation-delay: 0.05s; } .pmark__arm--su { --mx: 160px; --my: -160px; animation-delay: 0.2s; } .pmark__arm--az { --mx: -160px; --my: 160px; animation-delay: 0.35s; } .pmark__arm--ja { --mx: 160px; --my: 160px; animation-delay: 0.5s; } .pmark__dot { transform-box: fill-box; transform-origin: center; animation: pm-dot-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.05s both; } } @keyframes pm-arm-in { from { transform: translate(var(--mx), var(--my)); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes pm-dot-in { from { transform: scale(0); } to { transform: scale(1); } } /* The band after the head is white (grounds alternate). */ .phead + .section:not(.field-navy):not(.field-deep) { background: var(--white); } /* ------------------------------------------------------------------ 5. The system marker: the mark at text size, the relevant arm lit, always beside its word label. Canonical on charcoal; on white and Mist never below 24px. ------------------------------------------------------------------ */ .smark { display: inline-block; width: 1.5rem; height: 1.5rem; min-width: 24px; min-height: 24px; vertical-align: middle; flex: none; --m-quiet: var(--mist-deep); } :is(.field-navy, .field-deep, .site-header, .sysfig) .smark { --m-quiet: var(--charcoal-raised); min-width: 0; min-height: 0; } .smark--az { --m-az: var(--azure); } .smark--su { --m-su: var(--sunshine); } .smark--la { --m-la: var(--lawn); } .smark--all { --m-az: var(--azure); --m-su: var(--sunshine); --m-la: var(--lawn); } /* ------------------------------------------------------------------ 6. The closing band (SITE-B10): the stitched field, a clearing, the heading and line, one sunshine button, at most one arrow link. ------------------------------------------------------------------ */ .cta-band { padding-block: clamp(4.5rem, 9vw, 7.5rem); } .cta-band__title { font-size: clamp(2.2rem, 1.2rem + 3vw, 3.6rem); max-width: 18ch; color: var(--on-charcoal); } .cta-band__sub { font-size: var(--step-1); line-height: 1.5; max-width: 42ch; } .cta-band__actions { margin-top: var(--space-l); align-items: center; gap: var(--space-s) var(--space-l); } .cta-band__link { color: var(--on-charcoal); font-size: var(--step-0); } .cta-band .btn { font-size: var(--step-0); padding: 0.9em 1.6em; } /* ------------------------------------------------------------------ 7. The footer (SITE-B1 to B6): the lattice selvedge, the brand block, four columns that mirror the bar, Connect last. ------------------------------------------------------------------ */ .footer__top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 3fr) minmax(0, 0.9fr); gap: var(--space-xl) clamp(2rem, 3.5vw, 3.5rem); } .footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-l) clamp(1.5rem, 3vw, 3rem); } .footer__brand { display: grid; gap: var(--space-s); align-content: start; } .footer__tagline { margin-top: var(--space-xs); color: var(--on-charcoal); font-size: var(--step-0); max-width: 28ch; } .footer__second { color: var(--on-charcoal-soft); font-size: var(--step--1); line-height: 1.55; max-width: 34ch; } .footer__heading { font-size: var(--step-0) !important; font-weight: 600; color: var(--on-charcoal); margin-bottom: var(--space-s); } .footer__heading a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--rule-on-charcoal); } .footer__heading a:hover { text-decoration-color: currentColor; } .footer__list { font-size: var(--step--1); gap: 0.65em; } .footer__list a { color: var(--on-charcoal-soft); line-height: 1.45; } .footer__list a:hover { color: var(--on-charcoal); } .footer__sublist { border-left: 0; padding-left: 1rem; gap: 0.45em; } .footer__sublist a { color: var(--on-charcoal-soft); } .footer__bottom { font-size: var(--step--1); } /* ------------------------------------------------------------------ 8. Figure conventions (F1 to F9). Flat fills; three line weights by role in one ratio (ground 1, structure 1.5, flow 3); colour only where it means something; live-text labels; the caption directly under the figure, "illustrative" in its first words where the content is made up. ------------------------------------------------------------------ */ :root { --line-ground: 1.5px; --line-structure: 2.25px; --line-flow: 4.5px; } .fig { margin: 0; } .fig__caption { margin-top: var(--space-s); font-size: var(--step--1); line-height: 1.55; color: var(--slate); max-width: 62ch; } :is(.field-navy, .field-deep) .fig__caption { color: var(--on-charcoal-soft); } /* A figure set in a charcoal panel with the corner bite (the bite's dot jacaranda). */ .fig__panel { --bite-r: clamp(30px, 3.4vw, 50px); --bite-cut: calc(var(--bite-r) * 1.45); position: relative; overflow: clip; background: var(--charcoal); color: var(--on-charcoal); padding: clamp(1.75rem, 3.4vw, 3rem); -webkit-mask: radial-gradient(circle at 100% 100%, #000 var(--bite-r), transparent calc(var(--bite-r) + 0.5px), transparent var(--bite-cut), #000 calc(var(--bite-cut) + 0.5px)); mask: radial-gradient(circle at 100% 100%, #000 var(--bite-r), transparent calc(var(--bite-r) + 0.5px), transparent var(--bite-cut), #000 calc(var(--bite-cut) + 0.5px)); } .fig__panel::after { content: ""; position: absolute; right: calc(var(--bite-r) * -1); bottom: calc(var(--bite-r) * -1); width: calc(var(--bite-r) * 2); height: calc(var(--bite-r) * 2); border-radius: 50%; background: var(--jacaranda); } .fig-intro { display: grid; gap: var(--space-s); margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); } .fig-intro .display-m { max-width: 24ch; } .fig-intro .section-lead { font-size: var(--step-1); line-height: 1.5; max-width: 60ch; } .section--figure { padding-block: clamp(3rem, 6vw, 5rem); } /* ------------------------------------------------------------------ 9. The system figure (F1): one drawing, two forms; always on charcoal; static. The drawing is SVG; every label is live text laid over it, sized with the drawing (container units), so it reads as a diagram before a logo. Below 78rem it becomes a labelled list (12). ------------------------------------------------------------------ */ .sysfig { color: var(--on-charcoal); } .sysfig__draw { position: relative; container-type: inline-size; aspect-ratio: var(--vw) / var(--vh); width: 100%; } .sysfig__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .sysfig__ring { fill: none; stroke: var(--on-charcoal-soft); stroke-width: 3; } .sysfig__leader { stroke: var(--on-charcoal-soft); stroke-width: 3; } .sysfig__flow-line { fill: none; stroke-width: 6; stroke-linecap: butt; } .sysfig__labels { position: absolute; inset: 0; } /* One viewBox unit, in container units, so labels scale with the drawing. */ .sysfig--full .sysfig__draw { --u: calc(100cqi / 1320); } .sysfig--brief .sysfig__draw { --u: calc(100cqi / 960); } .sysfig__label { position: absolute; margin: 0; line-height: 1.35; } .sysfig__label.is-xc { transform: translateX(-50%); text-align: center; } .sysfig__label.is-xr { transform: translateX(-100%); text-align: right; } .sysfig__label.is-yb { translate: 0 -100%; } .sysfig__label.is-ym { translate: 0 -50%; } .sysfig__label p { margin: 0; max-width: none; } .sysfig__org { font-family: var(--font-display); font-size: calc(var(--u) * 30); line-height: 1.15; color: var(--jacaranda); margin-bottom: calc(var(--u) * 8) !important; } .sysfig__name { font-family: var(--font-display); font-size: calc(var(--u) * 26); line-height: 1.2; color: var(--on-charcoal); } .sysfig__job { font-size: calc(var(--u) * 18); line-height: 1.45; color: var(--on-charcoal-soft); margin-top: calc(var(--u) * 6) !important; } .sysfig__flowlabel { font-size: calc(var(--u) * 18); font-weight: 600; line-height: 1.3; color: var(--on-charcoal); } .sysfig__flowlabel--in { font-size: calc(var(--u) * 17); } .sysfig__ringlabel { font-size: calc(var(--u) * 17); line-height: 1.3; color: var(--on-charcoal-soft); } .sysfig--brief .sysfig__org { font-size: calc(var(--u) * 32); } .sysfig--brief .sysfig__name { font-size: calc(var(--u) * 28); } .sysfig--brief .sysfig__job { font-size: calc(var(--u) * 21); } .sysfig--brief .sysfig__flowlabel { font-size: calc(var(--u) * 21); } .sysfig--brief .sysfig__flowlabel--in { font-size: calc(var(--u) * 20); } /* The jacaranda pair's keys: a dot for what you know, an arm for the person. */ .sysfig__glyph { display: inline-block; vertical-align: middle; background: var(--jacaranda); margin-right: 0.45em; } .sysfig__glyph--dot { width: 0.55em; height: 0.55em; border-radius: 50%; translate: 0 -0.08em; } .sysfig__glyph--arm { width: 0.95em; height: 0.36em; rotate: 45deg; translate: 0 -0.08em; margin-right: 0.55em; } .sysfig__list { display: none; } /* Assembly, once, on first view: the arms in along their lines, the dot last, then the flows draw in reading order. The class is only added by JavaScript when the figure is seen, so without it the figure is whole. */ @media (prefers-reduced-motion: no-preference) { .sysfig.is-assembling .sysfig__arm { animation: sf-arm 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both; animation-delay: calc(var(--d) * 0.07s); } .sysfig.is-assembling .sysfig__dot { transform-box: fill-box; transform-origin: center; animation: pm-dot-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both; } .sysfig.is-assembling .sysfig__flow-line { stroke-dasharray: 1; animation: sf-draw 0.35s ease-out both; animation-delay: calc(0.55s + var(--n) * 0.12s); } .sysfig.is-assembling .sysfig__flow-head { animation: sf-fade 0.15s linear both; animation-delay: calc(0.85s + var(--n) * 0.12s); } } @keyframes sf-arm { from { opacity: 0; transform: scale(0.94); transform-origin: center; } to { opacity: 1; transform: none; } } @keyframes sf-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes sf-fade { from { opacity: 0; } to { opacity: 1; } } /* ------------------------------------------------------------------ 10. The method strip (F9): four arms in a row with cut ends; position means the stage. The current stage in the page's offer colour, the others quiet. Names live text under their arms. Vertical at 390 where the names would run past two lines. Markup:
  1. …
    2. …
------------------------------------------------------------------ */ .mstrip { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin: 0; padding: 0; } .mstrip__stage { display: grid; gap: 0.6rem; align-content: start; } .mstrip__arm { display: block; height: 0.9rem; background: var(--mist-deep); /* the cut: each arm's left end is cut on a circle, as the mark's arms are */ -webkit-mask: radial-gradient(circle 0.95rem at -0.35rem 50%, transparent 98%, #000 100%); mask: radial-gradient(circle 0.95rem at -0.35rem 50%, transparent 98%, #000 100%); } :is(.field-navy, .field-deep) .mstrip__arm { background: var(--charcoal-raised); } .mstrip__stage.is-current .mstrip__arm { background: var(--page, var(--jacaranda)); } .mstrip__name { font-size: var(--step-0); font-weight: 600; line-height: 1.3; } .mstrip__stage:not(.is-current) .mstrip__name { color: var(--slate); } :is(.field-navy, .field-deep) .mstrip__stage:not(.is-current) .mstrip__name { color: var(--on-charcoal-soft); } /* ------------------------------------------------------------------ 11. The depth expander (W-10): depth on demand for the copy's -D blocks. A ruled summary line with an arm-and-dot marker that turns when open; the depth opens in place, at the text column's measure. ------------------------------------------------------------------ */ .depth { margin-top: clamp(1.5rem, 3vw, 2.25rem); max-width: var(--container-text); border-top: 1px solid var(--rule-on-light); border-bottom: 1px solid var(--rule-on-light); } :is(.field-navy, .field-deep) .depth { border-color: var(--rule-on-charcoal); } .depth + .depth { margin-top: 0; border-top: 0; } .depth__summary { display: flex; align-items: center; gap: 0.9rem; padding-block: 1.05rem; cursor: pointer; list-style: none; font-size: var(--step-1); font-weight: 500; line-height: 1.35; color: var(--on-light); } .depth__summary::-webkit-details-marker { display: none; } :is(.field-navy, .field-deep) .depth__summary { color: var(--on-charcoal); } /* The marker: a dot, the cut, a short arm. Charcoal on light, jacaranda on charcoal. */ .depth__marker { --c: var(--charcoal); flex: none; position: relative; width: 1.5rem; height: 1.5rem; transition: transform 0.3s var(--ease); } .depth__marker::before, .depth__marker::after { content: ""; position: absolute; background: var(--c); } .depth__marker::before { width: 0.5rem; height: 0.5rem; border-radius: 50%; left: 0; top: calc(50% - 0.25rem); } .depth__marker::after { height: 0.32rem; left: 0.5rem; right: 0; top: calc(50% - 0.16rem); -webkit-mask: radial-gradient(circle 0.42rem at -0.25rem 50%, transparent 98%, #000 100%); mask: radial-gradient(circle 0.42rem at -0.25rem 50%, transparent 98%, #000 100%); } :is(.field-navy, .field-deep) .depth__marker { --c: var(--jacaranda); } .depth[open] .depth__marker { transform: rotate(90deg); } .depth__summary:hover .depth__prompt { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } .depth__body { padding: 0 0 1.4rem calc(1.5rem + 0.9rem); display: grid; gap: var(--space-s); justify-items: start; } .depth__body p { color: var(--on-light); font-size: var(--step-0); max-width: 62ch; } :is(.field-navy, .field-deep) .depth__body p { color: var(--on-charcoal); } @media (prefers-reduced-motion: reduce) { .depth__marker { transition: none; } } /* ------------------------------------------------------------------ 12. Phone and narrow widths. ------------------------------------------------------------------ */ @media (max-width: 78rem) { /* The system figure opens on its labels: a list in the loop's order on charcoal. Columns: the research return, the daily return, the forward spine, the words. The forward flows run down the spine; the two returns run back up the gutter and join in one arrow into what you know. */ .sysfig__draw { display: none; } .sysfig__list { display: grid; grid-template-columns: 1.2rem 1.2rem 1.7rem minmax(0, 1fr); column-gap: 0.25rem; align-items: start; } .sysfig__list > :not(.sysfig__ret) { grid-column: 4; position: relative; } .sysfig__step { padding-block: 0.1rem 0.3rem; } .sysfig__step .sysfig__name { display: flex; align-items: center; gap: 0.55rem; font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem); } .sysfig__step .sysfig__job { font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem); margin-top: 0.3rem !important; max-width: 46ch; } .sysfig__list .sysfig__org { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); margin-bottom: 0.2rem !important; line-height: 1.2; } .sysfig__list .smark { width: 1.6rem; height: 1.6rem; } .sysfig__list .sysfig__glyph--dot { width: 0.7em; height: 0.7em; margin-right: 0.15rem; translate: 0; } .sysfig__list .sysfig__glyph--arm { width: 1.1em; height: 0.42em; margin: 0 0.25rem 0 0.1rem; translate: 0; } /* Forward flows: a run down the spine with an arrowhead, words beside it. */ .sysfig__link { --c: var(--jacaranda); position: relative; --x: calc(-0.25rem - 0.85rem - 2px); /* the spine, measured from the words' column */ padding: 0.8rem 0 1.1rem; font-size: 0.95rem; font-weight: 600; line-height: 1.3; color: var(--on-charcoal); } .sysfig__link::before { content: ""; position: absolute; left: var(--x); top: 0.3rem; bottom: 0.55rem; width: 4px; background: var(--c); } .sysfig__link::after { content: ""; position: absolute; left: calc(var(--x) - 6px); bottom: 0.1rem; border: 8px solid transparent; border-top: 10px solid var(--c); border-bottom: 0; } .sysfig__link--az { --c: var(--azure); } .sysfig__link--su { --c: var(--sunshine); } /* The drafts' run passes Training (a branch from the side) to reach the person. */ .sysfig__link--long::before { bottom: -0.1rem; } .sysfig__link--long::after { display: none; } .sysfig__branch { padding: 0.35rem 0 0 1.4rem; } .sysfig__branch::before { content: ""; position: absolute; left: calc(-0.25rem - 0.85rem - 2px); top: 0; bottom: 0.55rem; width: 4px; background: var(--azure); } .sysfig__branch::after { content: ""; position: absolute; left: calc(-0.25rem - 0.85rem - 8px); bottom: 0.1rem; border: 8px solid transparent; border-top: 10px solid var(--azure); border-bottom: 0; } .sysfig__branch .sysfig__link { --x: 0.55rem; padding-left: 1.6rem; } .sysfig__step--person { padding-block: 0.25rem 0.5rem; } .sysfig__step--person .sysfig__name { font-size: clamp(1.45rem, 1.2rem + 1.2vw, 1.8rem); } .sysfig__step--la { margin-top: 1.5rem; } /* The returns. Each is a gutter line from its part up to the top, where they join in one arrow into what you know; each carries its words. */ .sysfig__returns { display: contents; } .sysfig__ret, .sysfig__ret-ring { display: none; } .sysfig__list .sysfig__ret { --c: var(--jacaranda); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.5rem; position: relative; grid-row: 1 / 6; grid-column: 2; align-self: stretch; margin-top: 0.85rem; margin-bottom: -1.3rem; /* down to the person's name */ padding-left: 0.45rem; font-size: 0.875rem; font-weight: 600; line-height: 1.15; color: var(--on-charcoal); white-space: nowrap; } .sysfig__list .sysfig__ret::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); } .sysfig__list .sysfig__ret--la { --c: var(--lawn); grid-row: 1 / 7; grid-column: 1; margin-bottom: -2.4rem; } .sysfig__ret-text { writing-mode: vertical-rl; text-orientation: sideways; rotate: 180deg; } .sysfig__ret-ringtext { color: var(--on-charcoal-soft); font-weight: 500; } /* The join: one arrow from the gutter into what you know. */ .sysfig__step--know::before { content: ""; position: absolute; left: calc(-3 * 0.25rem - 1.7rem - 2.4rem); right: calc(100% + 0.6rem); top: calc(0.85rem - 2px); height: 4px; background: var(--jacaranda); } .sysfig__step--know::after { content: ""; position: absolute; right: calc(100% + 0.05rem); top: calc(0.85rem - 8px); border: 8px solid transparent; border-left: 10px solid var(--jacaranda); border-right: 0; } /* Where each return leaves its part. */ .sysfig__step--person::before { content: ""; position: absolute; left: calc(-2 * 0.25rem - 1.7rem - 1.2rem); width: calc(2 * 0.25rem + 1.7rem + 1.2rem - 0.35rem); top: calc(0.25rem + 1.05rem - 2px); height: 4px; background: var(--jacaranda); } .sysfig__step--la::before { content: ""; position: absolute; left: calc(-3 * 0.25rem - 1.7rem - 2.4rem); width: calc(3 * 0.25rem + 1.7rem + 2.4rem - 0.35rem); top: calc(0.1rem + 0.9rem - 2px); height: 4px; background: var(--lawn); } } @media (max-width: 78rem) and (min-width: 48.0625rem) { .sysfig__list { max-width: 40rem; } } @media (max-width: 60rem) { .footer__top { grid-template-columns: 1fr; } .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 48rem) { /* The page mark sits whole and small at the head's top right, beside the first line; the H1 begins beneath it. */ .phead { padding-block: 1.75rem 2.25rem; } .phead__text { max-width: none; gap: 0.75rem; } .phead__text > :first-child { padding-right: 4.75rem; min-height: 3.6rem; display: flex; align-items: center; } .phead__text > h1:first-child { display: block; min-height: 0; padding-right: 0; text-wrap: wrap; } .phead__text > h1:first-child::before { content: ""; float: right; width: 4.5rem; height: 3.4rem; } .phead { min-height: 0; display: block; } .phead--long .phead__text { max-width: none; } .phead .pmark, .phead--long .pmark { width: 3.75rem; height: 3.75rem; aspect-ratio: auto; left: auto; right: clamp(1.25rem, 5vw, 3rem); top: 1.75rem; transform: none; } .phead__title { font-size: clamp(2rem, 1.4rem + 3vw, 2.6rem); max-width: none; } .phead__promise { font-size: var(--step-0); } .cta-band__actions { flex-direction: column; align-items: center; } .mstrip--auto { grid-template-columns: 1fr; } } @media (max-width: 30rem) { .footer__cols { grid-template-columns: 1fr; } } /* In the drawer (section 16 of brand.css), the What we do group opens by default; its markers sit on the drawer's charcoal. The bar needs about 1,210px on one line (measured), so the drawer takes over at 76rem. */ @media (max-width: 76rem) { .nav__link, .nav__parent.nav__link { font-size: var(--step-1); } .nav__link::after { bottom: -0.2rem; } .sysmenu { min-width: 0; padding: 0 0 0 0.25rem; margin-top: var(--space-s); } .sysmenu__link { gap: 0.7rem; } .sysmenu__whole { border-bottom-color: var(--rule-on-charcoal); padding-bottom: var(--space-s); margin-bottom: 0.15rem; } .sysmenu__children { margin: var(--space-s) 0 0; gap: var(--space-s); } .nav__sublink { padding: 0; font-size: var(--step-0); } .nav__submenu, .nav__submenu.sysmenu { background: transparent; padding-top: 0; padding-bottom: 0; } .nav__submenu.sysmenu { gap: 0.95rem; } .sysmenu__link { padding-block: 0.1rem; } .nav__sublink:hover, .nav__sublink[aria-current="page"] { background: transparent; } .nav__sublink[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--page, var(--jacaranda)); text-decoration-thickness: 3px; text-underline-offset: 0.35em; } } /* ------------------------------------------------------------------ 13. Every corner-bite dot is jacaranda, site-wide (V-15). ------------------------------------------------------------------ */ .offer-card, .science-card, .science-grid > *, .system__base, .ledger__effect, .ledger__row .ledger__effect, .contrast__col--work, .booking__panel, .tabs, .tabs__panel, .tabs__cta, .panel-card, .aud-card, .fig__panel, body :is(.system__base, .ledger__effect, .contrast__col--work) { --bite-dot: var(--jacaranda) !important; } /* ------------------------------------------------------------------ 14. Section rhythm: a compact band for figure-led pages, so no band shows an empty run of more than about 200px at 1440. ------------------------------------------------------------------ */ .section--compact { padding-block: clamp(3rem, 5.5vw, 5rem); } @media (min-width: 48.0625rem) { .phead--long { --pm-x: clamp(19rem, 33vw, 31rem); } .phead--long .pmark { height: 140%; } .phead--long .phead__text { max-width: min(50rem, 60%); } .phead--long .phead__promise { max-width: 56ch; } } /* ------------------------------------------------------------------ 15. Problems and answers (F2). One component, two lengths: WN full and grouped (with "What this looks like" expanders), WH short. Three aligned columns at 1440: the group, the problem, the answer. The markers sit at the top of the answer column on one vertical edge, so the answers read as a column of colour. ------------------------------------------------------------------ */ .pa { --pa-group: 11rem; --pa-gap: clamp(1.5rem, 3vw, 3rem); } .pa__rows { list-style: none; margin: 0; padding: 0; } .pa__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); column-gap: var(--pa-gap); padding-block: 1.1rem 1.15rem; border-top: var(--line-ground) solid var(--mist-deep); } .field-light:not(.field-white) .pa__row { border-top-color: #DADEE3; } .pa__row:first-child { border-top: 0; } .pa__q { font-family: var(--font-display); font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.75rem); line-height: 1.22; color: var(--on-light); max-width: 24ch; text-wrap: balance; } .pa__tag { display: flex; align-items: center; gap: 0.6rem; font-size: var(--step-0); font-weight: 600; color: var(--on-light); line-height: 1.3; min-height: 1.75rem; } .pa__tag .smark { width: 1.75rem; height: 1.75rem; } .pa__a { margin-top: 0.45rem; font-size: var(--step-0); line-height: 1.55; color: var(--on-light); max-width: 56ch; } .pa__link { margin-top: 0.55rem; font-size: var(--step--1); } /* The row's own expander: no rules of its own; an open one draws a lower rule. */ .depth--row { margin-top: 0.35rem; border: 0; max-width: none; } .depth--row .depth__summary { padding-block: 0.4rem; font-size: var(--step--1); font-weight: 600; gap: 0.6rem; } .depth--row .depth__marker { width: 1.1rem; height: 1.1rem; } .depth--row .depth__marker::before { width: 0.38rem; height: 0.38rem; top: calc(50% - 0.19rem); } .depth--row .depth__marker::after { left: 0.38rem; height: 0.24rem; top: calc(50% - 0.12rem); } .depth--row .depth__body { padding: 0.15rem 0 0.85rem calc(1.1rem + 0.6rem); border-bottom: var(--line-ground) solid var(--mist-deep); } .depth--row .depth__body p { font-size: var(--step-0); color: var(--slate); max-width: 46ch; } /* The close, aligned to the answer column. */ .pa__close { margin-left: calc(var(--pa-group) + var(--pa-gap) + (100% - var(--pa-group) - var(--pa-gap) - var(--pa-gap)) * (1 / 2.12) + var(--pa-gap)); display: grid; justify-items: start; gap: var(--space-s); padding-top: var(--space-m); border-top: var(--line-structure) solid var(--slate); } .pa__close .fig__caption { margin-top: 0; } .pa__close-body { font-size: var(--step-0); line-height: 1.6; color: var(--on-light); max-width: 52ch; } .pa__close-link { display: flex; align-items: center; gap: 0.6rem; } .pa__close-link .smark { width: 1.75rem; height: 1.75rem; } .payoff-line--roman { font-style: normal !important; } .payoff-line--roman em { font-style: italic; font-family: inherit; color: inherit; } @media (max-width: 60rem) { /* The group's label is a slim sticky line under the bar while its rows are on screen. */ .pa__row { grid-template-columns: 1fr; row-gap: 0.4rem; } .pa__answer { display: flex; flex-direction: column; align-items: flex-start; } .pa__a { order: 1; margin-top: 0.1rem; } .pa__tag { order: 2; margin-top: 0.55rem; } .pa__link { order: 3; margin-top: 0.4rem; } .pa__tag .smark { width: 2rem; height: 2rem; } .pa__close { margin-left: 0; } } /* ------------------------------------------------------------------ 16. The day's key: the four parts of Your day, twice (R3.8). desk: Mist-deep · sys: azure · review: the lighter jacaranda · people: jacaranda. ------------------------------------------------------------------ */ .wk-swatch { flex: none; display: inline-block; width: 1.6rem; height: 1rem; border-radius: 2px; } .wk-swatch--desk { background: var(--mist-deep); } .wk-swatch--sys { background: var(--azure); } .wk-swatch--people { background: var(--jacaranda); } .wk-swatch--review { background: var(--jacaranda-soft); } /* ------------------------------------------------------------------ 17. The hinge split (WN band 2): heading left, the argument right, its middle sentence set at display size as the band's star. ------------------------------------------------------------------ */ .hinge { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-l) clamp(2rem, 5vw, 5rem); align-items: center; } .hinge__title { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.2rem); line-height: 1.05; max-width: 9ch; align-self: start; } .hinge__prose { display: grid; gap: var(--space-s); } .hinge__prose p { font-size: var(--step-0); line-height: 1.65; color: var(--on-light); max-width: 58ch; } .hinge__prose .hinge__line { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.18; max-width: 22ch; margin-block: 0.35rem 0.4rem; } @media (max-width: 52rem) { .hinge { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ 18. Proof beside the claim (WN band 5): the claim block, then panel cards sized to their content. The QAMH card is gated by one switch on its section: data-gate-qamh="on" | "off". ------------------------------------------------------------------ */ .proof { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-l) clamp(2rem, 4vw, 4rem); align-items: start; } .proof__claim { display: grid; gap: var(--space-s); justify-items: start; } .proof__line { font-size: var(--step-0); line-height: 1.6; color: var(--on-light); max-width: 46ch; } .proof__cards { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(1rem, 2vw, 1.5rem); align-items: start; } .proof__card p { font-size: var(--step-0); color: var(--on-light); } .proof__card .arrow-link { margin-top: auto; } .proof__card { align-self: stretch; } .proof__cards { align-items: stretch; } .proof__logo { width: auto; height: 2.75rem; mix-blend-mode: multiply; align-self: flex-start; } [data-gate-qamh="off"] [data-gate="qamh"] { display: none; } [data-gate-qamh="off"] .proof__cards { grid-template-columns: minmax(0, 1fr); max-width: 26rem; } @media (max-width: 60rem) { .proof, .proof__cards { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ 19. The board's checklist (WN band 6): four ruled rows, two by two, each opening on the dot-and-arm bullet. ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ 20. The closing band opening on the motive (WN): the quote inside the band's clearing, above the heading; the button is the destination. ------------------------------------------------------------------ */ .cta-band--motive.field-deep { background: radial-gradient(ellipse 52% 88% at 50% 50%, var(--charcoal-deep) 62%, color-mix(in srgb, var(--charcoal-deep) 0%, transparent) 100%), url("/assets/img/brand/field-stitched-dark.svg") 0 0 / 420px 480px repeat, var(--charcoal-deep); } .cta-band__clearing { display: grid; justify-items: center; } .motive { display: grid; justify-items: center; gap: 0.75rem; max-width: 40rem; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); padding-bottom: clamp(2.25rem, 4.5vw, 3rem); border-bottom: 1px solid var(--charcoal-raised); } .motive__lead-in { font-size: var(--step-0); font-weight: 600; color: var(--on-charcoal-soft); } .motive__lead { font-size: var(--step-1); line-height: 1.45; color: var(--on-charcoal); max-width: 34ch; } .motive__quote { margin: 0.5rem 0 0; display: grid; justify-items: center; gap: 0.9rem; } .motive__marker { width: 1.5rem; height: 1.5rem; background: url("/assets/img/brand/marker-on-dark.svg") center / contain no-repeat; } .motive__quote p { font-family: var(--font-display); font-size: clamp(1.45rem, 1.05rem + 1.5vw, 2.3rem); line-height: 1.25; color: var(--on-charcoal); max-width: 26ch; margin-inline: auto; text-wrap: balance; } .motive__by { display: flex; align-items: center; gap: 0.85rem; margin-top: 0.4rem; } .motive__by p { font-size: var(--step-0); color: var(--on-charcoal); } .motive__photo { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: 0 1rem 0 1rem; } .motive__link { font-size: var(--step-0); } /* ================================================================== Workflow automation (WA, chunk 3) ================================================================== */ .page-azure .payoff-line { background: var(--azure); } /* The in-page index: in the head; sticky under the bar on desktop once the head has gone. */ .pindex a { white-space: nowrap; } .pindex-sticky { position: sticky; top: 4.5rem; z-index: 50; background: var(--white); border-bottom: var(--line-ground) solid var(--mist-deep); } .pindex-sticky[hidden] { display: none; } .pindex-sticky .container { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.4rem; padding-block: 0.6rem; font-size: var(--step--1); } .pindex-sticky a { position: relative; color: var(--on-light); text-decoration: none; } .pindex-sticky a:hover { text-decoration: underline; text-underline-offset: 0.2em; } .pindex-sticky a.is-current::after { content: ""; position: absolute; left: 0; bottom: -0.32rem; width: 1.4rem; height: 3px; background: var(--page); } @media (max-width: 64rem) { .pindex-sticky { display: none !important; } } html { scroll-padding-top: 7.5rem; } /* Ryan's voice: one credit treatment, under the passage. */ .credit { font-size: var(--step--1); color: var(--slate); margin-top: 0.4rem; } .credit a { color: inherit; } :is(.field-navy, .field-deep) .credit { color: var(--on-charcoal-soft); } .voice { display: grid; gap: var(--space-s); } .voice p { font-size: var(--step-0); line-height: 1.65; max-width: 62ch; } .voice .credit { margin-top: -0.4rem; } /* A display statement: a section's one highlight (WA-B9, WA-B18). */ .statement { font-family: var(--font-display); font-size: clamp(1.45rem, 1.05rem + 1.4vw, 2.2rem); line-height: 1.25; max-width: 34ch; margin-top: clamp(2rem, 4vw, 3rem); color: var(--on-light); } .statement em { font-family: var(--font-sans); font-style: italic; color: var(--deep-jacaranda); } .statement--dark em { color: var(--on-charcoal); } .statement--dark { color: var(--on-charcoal); } /* 2. The work that comes round: the list as a loop, back to the top. */ .problem-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-m) var(--space-xl); align-items: end; margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); } .problem { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-l) clamp(2rem, 5vw, 5rem); align-items: start; } .loop { position: relative; padding-left: 3.25rem; } .loop__list { list-style: none; margin: 0; padding: 0; } .loop__list li { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.3; padding-block: 0.7rem; border-top: var(--line-ground) solid var(--mist-deep); color: var(--on-light); } .loop__list li:last-child { border-bottom: var(--line-ground) solid var(--mist-deep); } .loop::before { /* the week, down the gutter and back up to the top */ content: ""; position: absolute; left: 0.6rem; top: 1.3rem; bottom: 1.3rem; width: 1.6rem; border: var(--line-flow) solid var(--charcoal); border-right: 0; border-radius: 1.2rem 0 0 1.2rem; } .loop::after { content: ""; position: absolute; left: 2.1rem; top: calc(1.3rem - 7px); border: 7px solid transparent; border-left: 10px solid var(--charcoal); border-right: 0; } .loop__back { position: absolute; left: -0.1rem; top: 50%; writing-mode: vertical-rl; rotate: 180deg; translate: 0 -50%; font-size: var(--step--1); font-weight: 600; color: var(--on-light); background: var(--white); padding-block: 0.4rem; white-space: nowrap; } .problem__prose { display: grid; gap: var(--space-s); } .problem__prose p { font-size: var(--step-0); line-height: 1.65; color: var(--on-light); } /* 3. WA-F1: the system figure, closer, lighter. */ .sysfig--auto .sysfig__draw { --u: calc(100cqi / 1320); } .sysfig__art { position: absolute; inset: 0; } .fig__panel--quiet { padding-block: clamp(1.25rem, 2.6vw, 2.25rem); } .sysfig__hotspot { position: absolute; width: 22%; height: 15%; font-size: 0; color: transparent; border-radius: 0 0.8rem 0 0.8rem; } .sysfig__hotspot:hover { background: rgba(255,255,255,.05); } .sysfig__hotspot:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; } .bridge { display: flex; align-items: flex-start; gap: 0.75rem; margin-top: var(--space-m); max-width: var(--container-text); font-size: var(--step-0); color: var(--on-light); } .bridge .smark { margin-top: 0.1rem; } .bridge .arrow-link { margin-left: 0.25rem; } #system .depth { margin-top: var(--space-m); } /* 4. The brain (the two rows are R3.12). */ .brain__row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-l) clamp(2rem, 5vw, 5rem); align-items: start; } .brain__disc { width: 100%; height: auto; } .b-ground { fill: var(--white); } .b-links line { stroke: var(--slate); stroke-width: 1.6; } .b-cells rect { fill: var(--jacaranda); } .b-flow { stroke: var(--jacaranda); stroke-width: 4; } .b-head { fill: var(--jacaranda); } .brain__name { font-family: var(--font-display); font-size: var(--step-1); color: var(--on-light); } .brain__line { font-size: var(--step--1); color: var(--slate); max-width: 22ch; } .brain .fig__caption { margin-top: var(--space-m); } .pair__item { display: grid; gap: 0.5rem; align-content: start; padding-top: 1rem; border-top: var(--line-ground) solid var(--mist-deep); } .pair__item p { font-size: var(--step-0); line-height: 1.6; color: var(--on-light); } .pair__item .depth { margin-top: 0.5rem; } /* 5. The agents: the news desk lane, then how a job runs. */ .agents__title { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); max-width: 30ch; } .desk { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-l) clamp(2rem, 4vw, 4rem); align-items: center; } /* One document form: a white sheet, the corner bite, charcoal text. */ .doc { --bite-r: 18px; --bite-cut: calc(var(--bite-r) * 1.45); position: relative; background: var(--white); color: var(--charcoal); padding: 1.1rem 1.25rem 1.5rem; border-radius: 0 0.9rem 0 0; -webkit-mask: radial-gradient(circle at 100% 100%, #000 var(--bite-r), transparent calc(var(--bite-r) + 0.5px), transparent var(--bite-cut), #000 calc(var(--bite-cut) + 0.5px)); mask: radial-gradient(circle at 100% 100%, #000 var(--bite-r), transparent calc(var(--bite-r) + 0.5px), transparent var(--bite-cut), #000 calc(var(--bite-cut) + 0.5px)); } .doc::after { content: ""; position: absolute; right: calc(var(--bite-r) * -1); bottom: calc(var(--bite-r) * -1); width: calc(var(--bite-r) * 2); height: calc(var(--bite-r) * 2); border-radius: 50%; background: var(--jacaranda); } .field-light .doc { box-shadow: none; outline: 0; background: var(--white); } .field-light:not(.field-white) .desk .doc { background: var(--white); } .job__lane { margin-top: clamp(2rem, 4vw, 3rem); } .job__heading { font-family: var(--font-display); font-size: var(--step-1); color: var(--on-light); margin-top: var(--space-m); } .job__steps { --label-h: 4.6rem; --node-h: 2.8rem; list-style: none; margin: var(--space-m) 0 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: var(--label-h) var(--node-h) auto 5.5rem; column-gap: 1rem; } .job__steps::before { content: ""; position: absolute; left: calc(100% / 14); right: calc(100% / 14); top: calc(var(--label-h) + var(--node-h) / 2 - 1px); height: var(--line-structure); background: var(--slate); } .job__step { display: grid; grid-template-rows: subgrid; grid-row: 1 / span 3; justify-items: center; text-align: center; position: relative; z-index: 1; } .job__num { display: none; } .job__label { grid-row: 1; align-self: end; font-family: var(--font-display); font-size: var(--step-0); line-height: 1.25; color: var(--on-light); padding-bottom: 0.5rem; text-decoration: none; } .job__second { display: block; font-family: var(--font-sans); font-size: var(--step--1); color: var(--slate); margin-top: 0.2rem; } .job__node { grid-row: 2; align-self: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--azure); box-shadow: 0 0 0 0.35rem var(--white); } .job__step--ja .job__node { background: var(--jacaranda); } .job__step--big .job__node { width: 2.7rem; height: 2.7rem; } .job__step--big .job__label { font-size: var(--step-1); } .job__below { grid-row: 3; display: grid; gap: 0.5rem; justify-items: center; padding-top: 0.6rem; } .job__cap { font-size: var(--step--1); line-height: 1.45; color: var(--slate); max-width: 22ch; } .job__step--big .job__cap { color: var(--on-light); } /* The fan: four specialists under the lead, one lit. */ .fan { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; justify-items: start; text-align: left; } .fan__item { position: relative; padding-left: 1.6rem; font-size: 0.875rem; color: var(--slate); } .fan__item::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 1.2rem; height: var(--line-structure); background: var(--mist-deep); } .fan__item.is-lit { color: var(--on-light); font-weight: 600; } .fan__item.is-lit::before { background: var(--azure); height: var(--line-flow); top: 0.45em; } /* The brain beneath the flow: read into step 2, learned from step 6. */ .job__brain { grid-row: 4; grid-column: 2 / 8; position: relative; } .job__loop { position: absolute; bottom: 1.6rem; border: 0 solid var(--jacaranda); } .job__loop--read { left: calc(100% / 12); right: 50%; top: -0.5rem; border-left-width: var(--line-flow); border-bottom-width: var(--line-flow); } .job__loop--read::after { content: ""; position: absolute; left: calc(var(--line-flow) * -1 - 5px); top: -10px; border: 7px solid transparent; border-bottom: 10px solid var(--jacaranda); border-top: 0; } .job__loop--learn { left: 50%; right: calc(100% / 12); top: -0.5rem; border-right-width: var(--line-flow); border-bottom-width: var(--line-flow); } .job__loop--learn::after { content: ""; position: absolute; left: 0.55rem; bottom: calc(var(--line-flow) * -1 - 5px); border: 7px solid transparent; border-right: 10px solid var(--jacaranda); border-left: 0; } .job__brain-dot { position: absolute; left: 50%; bottom: calc(1.6rem - 0.85rem + 2px); translate: -50% 0; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--jacaranda); box-shadow: 0 0 0 0.3rem var(--mist); } .job__brain-name { position: absolute; left: 50%; bottom: 0; translate: -50% 0; font-size: var(--step--1); font-weight: 600; color: var(--on-light); white-space: nowrap; } /* Before and after, in the week's meanings. */ /* 6. The review: two documents on charcoal; the arrow reverses. */ .doc__title { font-weight: 700; font-size: var(--step-0); line-height: 1.3; margin-bottom: 0.5rem; } .doc__line { font-size: var(--step--1); line-height: 1.55; margin-top: 0.4rem; } .doc__flag { background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--azure); text-decoration-thickness: 3px; text-underline-offset: 0.18em; } .doc--prompt { display: grid; gap: 0.85rem; } .prompt__part { position: relative; padding: 0.7rem 0 0 2rem; border-top: var(--line-ground) solid var(--mist-deep); } .prompt__part:first-child { border-top: 0; padding-top: 0; } .prompt__part::before { content: ""; position: absolute; left: 0; top: calc(0.7rem + 0.45em); width: 1.35rem; height: 0.4rem; background: var(--c); -webkit-mask: radial-gradient(circle 0.42rem at -0.22rem 50%, transparent 98%, #000 100%); mask: radial-gradient(circle 0.42rem at -0.22rem 50%, transparent 98%, #000 100%); } .prompt__part:first-child::before { top: 0.45em; } .prompt__part--ja { --c: var(--jacaranda); } .prompt__part--az { --c: var(--azure); } .prompt__name { font-weight: 700; font-size: var(--step--1); margin-bottom: 0.25rem; } .prompt__part p, .prompt__part li { font-size: var(--step--1); line-height: 1.5; } .prompt__part ul { margin: 0; padding-left: 1rem; display: grid; gap: 0.3rem; } .prompt__controls { font-size: var(--step--1); font-weight: 600; color: var(--slate); padding-top: 0.6rem; border-top: var(--line-structure) solid var(--charcoal); } .prompt__rule { font-size: 0.875rem; color: var(--slate); margin-top: -0.5rem; } #review .depth { margin-top: var(--space-m); } #review .statement { margin-top: var(--space-l); } .ownproof__quote { display: grid; gap: var(--space-s); } /* 9. Stages and the two blocks. */ .stages--wa { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--stages, 5), minmax(0, 1fr)); gap: 1.25rem; position: relative; } .stages--wa::before { content: ""; position: absolute; left: 0.9rem; right: 0; top: 0.9rem; height: var(--line-flow); background: var(--azure); } .stages--wa .stage { position: relative; display: grid; gap: 0.4rem; align-content: start; } .stages--wa .stage__num { position: relative; z-index: 1; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--white); border: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: var(--step-0); color: var(--charcoal); box-shadow: 0 0 0 0.3rem var(--white); } .stages--wa .stage:not(:last-child)::after { content: ""; position: absolute; right: -0.65rem; top: calc(0.9rem - 5px); border: 7px solid transparent; border-left: 10px solid var(--azure); border-right: 0; } .stages--wa .stage__title { font-size: var(--step-1); margin-top: 0.6rem; } .stages--wa .stage__body { font-size: var(--step--1); line-height: 1.5; color: var(--slate); max-width: 26ch; } .stages--wa::after { content: none !important; } .blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l) clamp(2rem, 4vw, 4rem); margin-top: clamp(2rem, 4vw, 3rem); } .blocks__item { display: grid; gap: 0.5rem; align-content: start; padding-top: 1rem; border-top: var(--line-structure) solid var(--slate); } .blocks__item p { font-size: var(--step-0); line-height: 1.6; color: var(--on-light); max-width: 56ch; } .blocks__label { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; } .depth__list { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; font-size: var(--step-0); color: var(--on-light); } /* 10. Value: three panels, the headlines doing the work; the cost as a ruled note. */ .value { list-style: none; margin: 0; padding: 0; } .value .panel-card { gap: 0.6rem; } .value__label { font-size: var(--step-0) !important; color: var(--slate) !important; } .value__head { font-size: clamp(1.4rem, 1.05rem + 1.1vw, 2rem); line-height: 1.18; color: var(--on-light); } .value .panel-card p:not(.value__label) { font-size: var(--step-0); color: var(--on-light); } .note { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-m) clamp(2rem, 4vw, 4rem); margin-top: clamp(1.75rem, 3.5vw, 2.5rem); padding-top: 1rem; border-top: var(--line-structure) solid var(--slate); } .note__label { font-family: var(--font-display); font-size: var(--step-1); color: var(--on-light); } .note__body { font-size: var(--step-0); line-height: 1.6; color: var(--on-light); max-width: 64ch; } /* 11. Route cards, the first featured by size. */ @media (max-width: 64rem) { .problem-head, .problem, .brain__row, .desk, .blocks, .note{ grid-template-columns: 1fr; } /* How a job runs, vertical: the thread on the left, the brain's loop up the gutter. */ .job__steps { grid-template-columns: 2.2rem minmax(0, 1fr); grid-template-rows: none; row-gap: 1.1rem; padding-left: 0; } .job__steps::before { left: 0.75rem; right: auto; top: 0.6rem; bottom: 3rem; width: var(--line-structure); height: auto; } .job__step { grid-column: 2; grid-row: auto; display: grid; grid-template-rows: none; justify-items: start; text-align: left; padding-left: 0.2rem; } .job__label, .job__node, .job__below { grid-row: auto; } .job__below { justify-items: start; padding-top: 0.2rem; } .job__node { position: absolute; left: -1.85rem; top: 0.15rem; width: 1.2rem; height: 1.2rem; } .job__step--big .job__node { width: 1.8rem; height: 1.8rem; left: -2.15rem; } .job__label { padding-bottom: 0; } .job__cap { padding-top: 0.2rem; max-width: none; } .job__step:has(.fan) .job__cap { margin-top: 0.3rem; } .fan { margin: 0.4rem 0 0 0.4rem; } .job__step--big { padding: 0.8rem 0.9rem 1rem 0.9rem; background: var(--mist); border-radius: 0 0.9rem 0 0.9rem; } .job__step--big .job__node { left: -3.05rem; top: 0.95rem; } .job__brain { grid-column: 1 / -1; grid-row: auto; height: 3rem; } .job__loop { display: none; } .job__brain-dot { left: 0.85rem; bottom: auto; top: 0.3rem; } .job__brain-name { left: 2.8rem; translate: 0 0; top: 0.4rem; bottom: auto; } .stages--wa { grid-template-columns: 1fr; gap: 1rem; padding-left: 0; } .stages--wa::before { left: 0.9rem; right: auto; top: 0.9rem; bottom: 0.9rem; width: var(--line-flow); height: auto; } .stages--wa .stage { grid-template-columns: 1.9rem minmax(0, 1fr); column-gap: 1rem; } .stages--wa .stage__num { grid-row: span 2; } .stages--wa .stage__title { margin-top: 0; } .stages--wa .stage:not(:last-child)::after { display: none; } } /* WA-F1's phone form: the gutter carries the website's return to the brain (neutral, outer), the workspace's return to the brain (jacaranda) and training's branch up into the workspace (sunshine, below it). */ .sysfig__glyph--web { width: 0.9em; height: 0.62em; border-radius: 2px; background: var(--on-charcoal-soft); } @media (max-width: 78rem) { .sysfig__list--auto .sysfig__ret { grid-row: 1 / 6; grid-column: 2; margin-top: 0.85rem; margin-bottom: -1.3rem; } .sysfig__list--auto .sysfig__ret--web { --c: var(--on-charcoal-soft); grid-row: 1 / 8; grid-column: 1; margin-bottom: -1.3rem; } .sysfig__list--auto .sysfig__ret--su { --c: var(--sunshine); grid-row: 6 / 9; grid-column: 2; margin-top: 0.35rem; margin-bottom: -1.3rem; } .sysfig__list--auto .sysfig__ret--su::after { content: ""; position: absolute; left: -6px; top: -10px; border: 8px solid transparent; border-bottom: 10px solid var(--sunshine); border-top: 0; } .sysfig__list--auto .sysfig__step--web { margin-top: 0.2rem; } .sysfig__list--auto .sysfig__step--tr { margin-top: 1.4rem; } .sysfig__link--soft { --c: var(--on-charcoal-soft); } .sysfig__link--up::after { bottom: auto; top: 0; border-top: 0; border-bottom: 10px solid var(--c); } .sysfig__link--up::before { top: 0.6rem; bottom: 0.3rem; } .sysfig__list--auto .sysfig__step--web::before { content: ""; position: absolute; left: calc(-3 * 0.25rem - 1.7rem - 2.4rem); width: calc(3 * 0.25rem + 1.7rem + 2.4rem - 0.35rem); top: calc(0.1rem + 0.9rem - 2px); height: 4px; background: var(--on-charcoal-soft); } .sysfig__list--auto .sysfig__step--tr::before { content: ""; position: absolute; left: calc(-2 * 0.25rem - 1.7rem - 1.2rem); width: calc(2 * 0.25rem + 1.7rem + 1.2rem - 0.35rem); top: calc(1rem - 2px); height: 4px; background: var(--sunshine); } } .job__steps { margin-top: 0.6rem; } .brain__line { min-height: 2.9em; } .job__return { display: none; } @media (max-width: 64rem) { .job__return { display: block; grid-column: 1; grid-row: 2 / 9; position: relative; margin: 0.55rem 0 1.4rem; } .job__return::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--line-flow); background: var(--jacaranda); } .job__return::after { content: ""; position: absolute; left: 0; top: -6px; border: 7px solid transparent; border-left: 10px solid var(--jacaranda); border-right: 0; translate: 6px 0; } .job__brain-dot { left: 0.1rem; } } /* ================================================================== Home (WH, chunk 4) ================================================================== */ .minor-title { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25; color: var(--on-light); } [data-gate-d12="off"] [data-gate="d12"], [data-gate-qamh="off"] [data-gate="qamh"], [data-gate-david="off"] [data-gate="david"] { display: none; } /* 1. The hero: superseded by R2.1 (round 2). */ /* 2. Problems and answers, short form: five rows, tags last, markers on one edge. */ .pa--short .pa__rows { border-top: var(--line-structure) solid var(--slate); } .pa--short .pa__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-block: 1.2rem 1.25rem; } .pa--short .pa__row:first-child { border-top: 0; } .pa--short .pa__q { font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 0.85vw, 1.65rem); line-height: 1.25; color: var(--on-light); max-width: 30ch; } .pa--short .pa__a { margin-top: 0; } .pa--short .pa__tag { margin-top: 0.6rem; } .pa__more { margin-top: var(--space-m); padding-left: calc(50% + var(--pa-gap) / 2); } @media (max-width: 60rem) { .pa__more { padding-left: 0; } } /* 3. One system: the figure takes three-fifths, the text beside it. */ .wsys { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-l) clamp(2rem, 4vw, 4rem); align-items: center; } .wsys__text { display: grid; gap: var(--space-s); } .wsys__text p { font-size: var(--step-0); line-height: 1.65; color: var(--on-charcoal); max-width: 46ch; } .wsys__links { display: grid; gap: 0.6rem; justify-items: start; margin-top: var(--space-xs); } @media (max-width: 78rem) { .wsys { grid-template-columns: minmax(0, 1fr); } .wsys__fig { min-width: 0; } .wsys__fig { order: 2; } .wsys__text { order: 1; } .wsys__links { order: 3; } } /* 5. Why us: three claims, the two people beside them. */ .field-light .person__role { color: var(--slate); } .field-light .person__name { color: var(--on-light); } .field-light .person__cred { color: var(--slate); } .person { text-decoration: none; color: inherit; } /* 6. Why we care: the quote as the turn, the payoff closing beneath. */ .care { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-l) clamp(2rem, 5vw, 5rem); align-items: start; } .care__text { display: grid; gap: var(--space-s); } .care__text p { font-size: var(--step-0); line-height: 1.65; color: var(--on-light); max-width: 46ch; } .care__quote { margin: 0; display: grid; gap: 0.9rem; } .care__marker { display: block; width: 1.5rem; height: 1.5rem; background: url("/assets/img/brand/marker-on-light.svg") center / contain no-repeat; } .care__quote p { font-family: var(--font-display); font-size: clamp(1.5rem, 1.05rem + 1.6vw, 2.4rem); line-height: 1.25; color: var(--on-light); max-width: 28ch; } .care__quote footer { font-size: var(--step-0); color: var(--slate); } .care__close { display: grid; gap: var(--space-s); justify-items: start; margin-top: clamp(2rem, 4vw, 3rem); } .payoff-line a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } @media (max-width: 60rem) { .care { grid-template-columns: 1fr; } } /* 7. Everyone else: four routes, the whole row the link, no markers. */ .elsewhere { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-l) clamp(2rem, 4vw, 4rem); align-items: start; } .elsewhere__head { display: grid; gap: var(--space-s); } .elsewhere__head .section-lead { font-size: var(--step-1); line-height: 1.45; color: var(--slate); } .elsewhere__routes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); } .elsewhere__routes a { display: grid; gap: 0.3rem; padding-block: 1rem 1.15rem; border-top: var(--line-ground) solid var(--mist-deep); color: var(--on-light); text-decoration: none; height: 100%; } .elsewhere__name { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25; } .elsewhere__line { font-size: var(--step--1); line-height: 1.5; color: var(--slate); } .elsewhere__routes a:hover .elsewhere__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } @media (max-width: 60rem) { .elsewhere, .elsewhere__routes { grid-template-columns: 1fr; } } /* 8. Proof: the voices' quotes (the record itself is R2.6). */ .voices3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); } .voices3 li { display: grid; gap: 0.75rem; align-content: start; } .voices3 p { font-style: italic; font-size: var(--step-1); line-height: 1.45; color: var(--on-light); } @media (max-width: 60rem) { .voices3 { grid-template-columns: 1fr; } } .sysfig--brief .sysfig__flowlabel--in { font-size: calc(var(--u) * 18); } .sysfig--brief .sysfig__flowlabel { font-size: calc(var(--u) * 19); } .wsys { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .pa__more { max-width: none; } /* "The work only people can do", by hand: a thin sliver, its label on the ground beneath. */ @media (max-width: 78rem) { .wsys { grid-template-columns: minmax(0, 1fr); } .wsys > * { min-width: 0; } } @media (max-width: 60rem) { .pa--short .pa__row { grid-template-columns: 1fr; row-gap: 0.5rem; } .pa--short .pa__tag { order: 2; } } /* ================================================================== What we do (WW, chunk 5) ================================================================== */ .section--figure .fig__panel { padding: clamp(1.25rem, 2.2vw, 2rem); } /* WW-F2: three offers read across like with like; "the one thing we never cut" is one Mist strip running under all three. Each column is a link. */ .cmp { display: grid; grid-template-columns: 10rem repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; column-gap: clamp(1.25rem, 2.5vw, 2.25rem); position: relative; } .cmp__strip { grid-column: 1 / -1; grid-row: 3; background: var(--mist); margin-inline: -1.25rem; border-radius: 0 1.2rem 0 1.2rem; } .cmp__strip-label { grid-column: 1; grid-row: 3; align-self: start; padding: 1.1rem 0 1.2rem; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25; color: var(--on-light); z-index: 1; } .cmp__col { grid-column: var(--c); grid-row: 1 / span 4; display: grid; grid-template-rows: subgrid; position: relative; padding-inline: 0.25rem; } .cmp__col + .cmp__col::before { content: ""; position: absolute; left: calc(clamp(1.25rem, 2.5vw, 2.25rem) / -2); top: 0; height: calc(100% - 0.2rem); width: var(--line-ground); background: var(--mist-deep); } .cmp__name { display: flex; align-items: center; gap: 0.6rem; font-size: var(--step-2); line-height: 1.15; padding-bottom: 0.75rem; } .cmp__name .smark { width: 1.9rem; height: 1.9rem; } .cmp__link { color: var(--on-light); text-decoration: none; } .cmp__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .cmp__col:hover .cmp__link, .cmp__link:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } .cmp__role { font-size: var(--step-1); line-height: 1.45; color: var(--on-light); padding-bottom: 1.1rem; } .cmp__inline { position: relative; z-index: 2; font-size: var(--step-0); } .cmp__keep { position: relative; z-index: 1; padding: 1.1rem 0 1.2rem; font-size: var(--step-0); line-height: 1.55; color: var(--on-light); } .cmp__go { padding-top: 0.9rem; font-weight: 700; font-size: var(--step--1); color: var(--deep-jacaranda); } /* Where to start, and what you can count on. */ .start { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-l) clamp(2rem, 5vw, 5rem); align-items: start; } .start__text { display: grid; gap: var(--space-s); } .start__text p { font-size: var(--step-0); line-height: 1.65; color: var(--on-light); max-width: 56ch; } .start__lead-in { font-family: var(--font-display); font-size: var(--step-1); color: var(--on-light); margin-bottom: 0.4rem; } .start__list { grid-template-columns: 1fr; } .count { margin-top: clamp(2.25rem, 4.5vw, 3.25rem); padding-top: var(--space-m); border-top: var(--line-ground) solid #DADEE3; } .count__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l) clamp(2rem, 4vw, 4rem); margin-top: var(--space-s); } .count__row { display: grid; gap: 0.35rem; padding-top: 0.9rem; border-top: var(--line-ground) solid #DADEE3; } .count__lead { font-family: var(--font-display); font-size: var(--step-1); color: var(--on-light); } .count__row p:not(.count__lead) { font-size: var(--step-0); line-height: 1.6; color: var(--on-light); max-width: 52ch; } @media (max-width: 60rem) { .cmp { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 2rem; } .cmp__strip, .cmp__strip-label { display: none; } .cmp__col { grid-column: 1; grid-row: auto; display: grid; grid-template-rows: none; } .cmp__col + .cmp__col::before { left: 0; right: 0; top: -1rem; height: var(--line-ground); width: auto; } .cmp__keep { background: var(--mist); padding: 0.9rem 1rem 1rem; border-radius: 0 1rem 0 1rem; } .cmp__keep .visually-hidden { position: static !important; width: auto; height: auto; margin: 0 0 0.3rem; clip: auto; white-space: normal; display: block; font-family: var(--font-display); font-size: var(--step-0); } .start, .count__rows { grid-template-columns: 1fr; } } .count__row { align-content: start; } /* ================================================================== Philosophy (WP, chunk 6) ================================================================== */ .lead-in { font-size: var(--step-0); font-weight: 600; color: var(--on-light); margin-bottom: 0.35rem; } :is(.field-navy, .field-deep) .lead-in { color: var(--on-charcoal-soft); } .display-line { font-family: var(--font-display); font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.7rem); line-height: 1.18; color: var(--on-light); margin-top: var(--space-s); max-width: 26ch; } .display-line em { font-family: var(--font-sans); font-style: italic; color: var(--deep-jacaranda); } /* Head: three zones — title and lead, the contents path, the mark. */ .phead--contents .phead__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-l) clamp(2rem, 4vw, 3.5rem); align-items: center; } @media (min-width: 48.0625rem) { .phead--contents { --pm-x: clamp(20rem, 42vw, 38rem); } .phead--contents .pmark { height: 130%; } .phead--contents .phead__text { max-width: none; } } .contents { position: relative; z-index: 1; max-width: 18.5rem; } .contents__label { font-size: var(--step--1); font-weight: 600; color: var(--slate); margin-bottom: 0.6rem; } .contents__path, .contents__path ol { list-style: none; margin: 0; padding: 0; } .contents__path { position: relative; display: grid; gap: 0.5rem; } .contents__path::before { content: ""; position: absolute; left: 0.27rem; top: 0.6rem; bottom: 0.6rem; width: var(--line-ground); background: var(--slate); } .contents__path > li { position: relative; padding-left: 1.4rem; } .contents__path > li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--charcoal); box-shadow: 0 0 0 0.2rem var(--mist); } .contents__path ol { display: grid; gap: 0.3rem; margin-top: 0.35rem; padding-left: 0.9rem; } .contents a { color: var(--on-light); font-size: var(--step--1); line-height: 1.35; text-decoration: none; } .contents ol ol a { color: var(--slate); } .contents a:hover { text-decoration: underline; text-underline-offset: 0.18em; } @media (max-width: 48rem) { .phead--contents .phead__inner { grid-template-columns: 1fr; } } /* 2. The climb: rings rising from the dot, cut around it. */ .climb { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-l) clamp(2rem, 4vw, 4rem); align-items: center; } .climb__text { display: grid; gap: var(--space-s); } .climb__text p:not(.lead-in) { font-size: var(--step-0); line-height: 1.65; color: var(--on-charcoal); max-width: 52ch; } .climb__draw { position: relative; aspect-ratio: 700 / 560; container-type: inline-size; --u: calc(100cqi / 700); } .climb__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .ring { fill: none; stroke: var(--on-charcoal-soft); } .ring--reach { stroke: #4A5361; } .ring-dot { fill: var(--jacaranda); } .climb__flow { stroke: var(--jacaranda); stroke-width: 5; fill: none; } .climb__head { fill: var(--jacaranda); } .climb__bracket { stroke: var(--on-charcoal-soft); stroke-width: 2.5; fill: none; } .climb__labels { position: absolute; inset: 0; } .climb__label, .climb__flowword, .climb__mark { position: absolute; margin: 0; translate: 0 -50%; } .climb__label { width: 34%; } .climb__name { font-family: var(--font-display); font-size: calc(var(--u) * 24); line-height: 1.2; color: var(--on-charcoal); } .climb__line { font-size: calc(var(--u) * 18); line-height: 1.35; color: var(--on-charcoal-soft); } .climb__label--3 .climb__name { color: var(--on-charcoal); } .climb__flowword { font-size: calc(var(--u) * 18); font-weight: 600; color: var(--on-charcoal); width: 26%; } .climb__mark { font-size: calc(var(--u) * 18); font-weight: 600; color: var(--on-charcoal); writing-mode: vertical-rl; rotate: 180deg; translate: -50% -50%; white-space: nowrap; } .climb__mark--reach { color: var(--on-charcoal-soft); } .climb__list { display: none; } @media (max-width: 60rem) { .climb { grid-template-columns: 1fr; } .climb__labels { display: none; } .climb__list { display: grid; list-style: none; margin: 1rem 0 0; padding: 0; gap: 0.6rem; } .climb__list li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.7rem; font-size: 0.9375rem; line-height: 1.4; color: var(--on-charcoal-soft); } .climb__list strong { color: var(--on-charcoal); font-weight: 600; } .climb__glyph { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid var(--on-charcoal-soft); margin-top: 0.1rem; } .climb__glyph--0 { border: 0; background: var(--jacaranda); width: 0.8rem; height: 0.8rem; margin: 0.3rem 0 0 0.3rem; } .climb__glyph--3 { border-color: #4A5361; } .climb__list li:first-child::after { content: "Where it reaches"; grid-column: 2; font-size: 0.875rem; font-weight: 600; color: var(--on-charcoal-soft); } .climb__list li:nth-child(2)::after { content: "Where we work"; grid-column: 2; font-size: 0.875rem; font-weight: 600; color: var(--on-charcoal); } } /* 4. The story. */ /* 5. The two halves, joined to one top. */ .halves__lead { font-size: var(--step-1); color: var(--on-light); margin-top: var(--space-s); } .halves__top { background: var(--mist); padding: 1rem 1.4rem; border-radius: 0 1.2rem 0 0; } .halves__top p { font-size: var(--step-0); color: var(--on-light); max-width: none; } .halves__top strong { font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); } .halves__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 4px; } .halves__half { --bite-r: 22px; --bite-cut: calc(var(--bite-r) * 1.45); position: relative; display: grid; gap: 0.4rem; align-content: start; background: var(--mist); padding: 1.4rem 1.4rem 1.8rem; -webkit-mask: radial-gradient(circle at 100% 100%, #000 var(--bite-r), transparent calc(var(--bite-r) + 0.5px), transparent var(--bite-cut), #000 calc(var(--bite-cut) + 0.5px)); mask: radial-gradient(circle at 100% 100%, #000 var(--bite-r), transparent calc(var(--bite-r) + 0.5px), transparent var(--bite-cut), #000 calc(var(--bite-cut) + 0.5px)); } .halves__half::after { content: ""; position: absolute; right: calc(var(--bite-r) * -1); bottom: calc(var(--bite-r) * -1); width: calc(var(--bite-r) * 2); height: calc(var(--bite-r) * 2); border-radius: 50%; background: var(--jacaranda); } .halves__half p { font-size: var(--step-0); line-height: 1.5; color: var(--on-light); } .halves__half em { color: var(--slate); } .halves__glyphwrap { display: flex; align-items: flex-end; gap: 0.75rem; } .halves__glyph { width: 4.5rem; height: 4.5rem; overflow: visible; } .halves__glyph .ring { stroke: var(--slate); } .halves__glyph .ring--lit { stroke: var(--jacaranda); } .halves__glyph .ring-dot { fill: var(--jacaranda); } .halves__glyph--dot .ring { stroke: var(--slate); } .halves__climbs { font-size: var(--step--1) !important; padding-bottom: 0.3rem; } .halves__name { font-size: var(--step-2); margin-top: 0.3rem; } .halves__link { color: var(--on-light); text-decoration: none; } .halves__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .halves__half:hover .halves__link, .halves__link:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } .halves__go { margin-top: 0.4rem; font-weight: 700; font-size: var(--step--1) !important; color: var(--deep-jacaranda) !important; } @media (max-width: 48rem) { .halves__pair { grid-template-columns: 1fr; } } /* 6 and 7: a figure beside text, mirrored. */ .pairfig { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-l) clamp(2rem, 4vw, 4rem); align-items: start; margin-top: var(--space-l); } .pairfig--mirror { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .pairfig__text { display: grid; gap: var(--space-s); align-content: start; } .pairfig__text > p { font-size: var(--step-0); line-height: 1.65; color: var(--on-light); max-width: 58ch; } .pairfig__text .depth { margin-top: 0.4rem; } .pairfig .display-s em, .imagination .display-s em { font-family: var(--font-sans); font-style: italic; color: var(--deep-jacaranda); } @media (max-width: 60rem) { .pairfig, .pairfig--mirror { grid-template-columns: 1fr; } .pairfig--mirror .pairfig__fig { order: 2; } } /* The judgement grid, the growth band's companion: same panel, axes and label type. */ .judge { display: grid; grid-template-columns: 2.2rem 2.2rem minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto auto; column-gap: 0.4rem; min-height: 26rem; } .judge__axis--y { grid-column: 1; grid-row: 1 / 3; writing-mode: vertical-rl; rotate: 180deg; align-self: center; justify-self: center; font-size: var(--step-0); color: var(--on-charcoal-soft); } .judge__end { font-size: var(--step--1); color: var(--on-charcoal-soft); margin: 0; } .judge__end--yt { grid-column: 2; grid-row: 1; align-self: start; padding-top: 0.6rem; } .judge__end--yb { grid-column: 2; grid-row: 2; align-self: end; padding-bottom: 0.6rem; } .judge__grid { grid-column: 3; grid-row: 1 / 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); border-left: var(--line-structure) solid var(--on-charcoal-soft); border-bottom: var(--line-structure) solid var(--on-charcoal-soft); } .judge__cell { padding: 1rem; display: flex; align-items: flex-start; } .judge__cell:nth-child(1), .judge__cell:nth-child(3) { border-right: var(--line-ground) solid var(--charcoal-raised); } .judge__cell:nth-child(1), .judge__cell:nth-child(2) { border-bottom: var(--line-ground) solid var(--charcoal-raised); } .judge__cell p { display: grid; gap: 0.25rem; margin: 0; } .judge__name { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; color: var(--on-charcoal); } .judge__line { font-size: var(--step--1); line-height: 1.4; color: var(--on-charcoal-soft); } .judge__cell--lit { background: var(--jacaranda); padding: 0.8rem; } .judge__clear { background: var(--white); padding: 0.6rem 0.75rem; border-radius: 0 0.6rem 0 0.6rem; } .judge__clear .judge__name { color: var(--charcoal); } .judge__clear .judge__line { color: var(--slate); } .judge__end--xl { grid-column: 3; grid-row: 3; justify-self: start; padding: 0.3rem 0 0 0.6rem; } .judge__end--xr { grid-column: 3; grid-row: 3; justify-self: end; padding: 0.3rem 0.6rem 0 0; } .judge__axis--x { grid-column: 3; grid-row: 4; justify-self: center; font-size: var(--step-0); color: var(--on-charcoal-soft); } .shows { margin-top: var(--space-l); } .shows__lead { font-family: var(--font-display); font-size: var(--step-1); color: var(--on-light); margin-bottom: 0.5rem; } .shows__rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); } .shows__rows li { display: grid; gap: 0.5rem; align-content: start; padding-top: 0.9rem; border-top: var(--line-ground) solid #DADEE3; } .shows__rows p { font-size: var(--step-0); line-height: 1.55; color: var(--on-light); } .shows__rows strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); margin-bottom: 0.2rem; } @media (max-width: 60rem) { .shows__rows { grid-template-columns: 1fr; } } /* 7. Expansion: the line beside the 80,000 hours; the growth band on its panel. */ .hours { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-l) clamp(2rem, 4vw, 4rem); align-items: center; } .hours .bignum__value { font-family: var(--font-display); font-size: clamp(3.5rem, 2rem + 6vw, 7rem); line-height: 1; color: var(--on-light); } .hours .bignum__label, .hours .bignum__unit { font-size: var(--step-0) !important; font-weight: 500; color: var(--slate); } .hours .bignum__note { color: var(--slate); } @media (max-width: 60rem) { .hours { grid-template-columns: 1fr; } } .gbpanel { padding: clamp(1rem, 2vw, 1.75rem); } .gbpanel .gb { margin: 0; } .gbpanel .fig__caption { color: var(--on-charcoal-soft); } .gb__axis-labels text { text-transform: none !important; letter-spacing: 0 !important; font-weight: 600; } .imagination { margin-top: clamp(2.25rem, 4.5vw, 3.25rem); padding-top: var(--space-m); border-top: var(--line-ground) solid var(--mist-deep); display: grid; gap: var(--space-s); justify-items: start; } .imagination > p { font-size: var(--step-0); line-height: 1.65; color: var(--on-light); max-width: 62ch; } .imagination .depth { justify-self: stretch; margin-top: 0; } .imagination .depth:first-of-type { margin-top: 0.6rem; } .depth__h { font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); color: var(--on-light); margin-top: 0.5rem; } /* Inside the expanders: the study's three findings; the gap. */ .findings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } .findings li { position: relative; display: grid; gap: 0.3rem; align-content: start; } .findings li:not(:last-child)::after { content: "→"; position: absolute; right: -1.4rem; top: 0; color: var(--slate); font-size: 1.1rem; } .findings__name { font-family: var(--font-display); font-size: var(--step-1); color: var(--on-light); } .findings p:not(.findings__name) { font-size: var(--step-0) !important; } @media (max-width: 48rem) { .findings { grid-template-columns: 1fr; } .findings li:not(:last-child)::after { content: "↓"; right: auto; left: 0; top: auto; bottom: -1.6rem; } } .gap { display: grid; gap: 0.7rem; } .gap__row { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 0.2rem 0.9rem; align-items: center; } .gap__num { font-family: var(--font-display); font-size: var(--step-1); color: var(--on-light); } .gap__bar { height: 1rem; background: var(--mist-deep); } .gap__bar i { display: block; height: 100%; background: var(--charcoal); } .gap__line { grid-column: 2; font-size: var(--step--1); color: var(--slate); } /* 8. The umbrella with four lenses. */ .umbrella--4 .umbrella__lenses { --lens-gap: clamp(1rem, 3vw, var(--space-xl)); gap: var(--lens-gap); grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 60rem) { .umbrella--4 .umbrella__lenses { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 30rem) { .umbrella--4 .umbrella__lenses { grid-template-columns: 1fr; } } @media (max-width: 48rem) { .judge { grid-template-columns: 1.3rem 1.7rem minmax(0, 1fr); min-height: 22rem; column-gap: 0.2rem; } .judge__cell { padding: 0.55rem; } .judge__cell--lit { padding: 0.35rem; } .judge__clear { padding: 0.4rem 0.45rem; } .judge__name { font-size: 0.95rem; } .judge__line { font-size: 0.875rem; } .judge__axis--y, .judge__axis--x { font-size: var(--step--1); } } .halves__half { overflow: clip; } /* ================================================================== Team, The Science, Contact, Not found (chunk 7) ================================================================== */ /* Team: the image hub, the site's one photograph inside the mark. */ .pmark--hub image { pointer-events: none; } .phead--hub { min-height: clamp(18rem, 26vw, 24rem); } @media (max-width: 48rem) { .phead--hub { padding-top: 9.25rem; } .phead--hub .pmark { width: 16rem; height: 16rem; right: -3.5rem; top: -2.6rem; left: auto; aspect-ratio: auto; } .phead--hub .phead__text > :first-child { padding-right: 0; min-height: 0; } .phead--hub .phead__text > h1:first-child::before { content: none; } } .bio__role, .person__role.bio__role { font-size: var(--step-0) !important; font-weight: 500; color: var(--slate); } .field-navy .bio__role { color: var(--on-charcoal-soft) !important; } .cred-strip, .cred-strip__item { font-size: var(--step--1) !important; color: var(--slate); } .field-navy .cred-strip, .field-navy .cred-strip__item { color: var(--on-charcoal-soft); } .voices__quote p { color: var(--deep-jacaranda); font-style: italic; } .worked { list-style: none; margin: var(--space-m) 0 0; padding: 0; } .worked li > a, .worked li > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) 1.5rem; gap: 0.3rem clamp(1.5rem, 3vw, 3rem); align-items: baseline; padding-block: 1rem 1.05rem; border-top: var(--line-ground) solid #DADEE3; color: var(--on-light); text-decoration: none; } .worked__name { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25; } .worked__line { font-size: var(--step-0); line-height: 1.5; color: var(--on-light); } .worked a:hover .worked__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } @media (max-width: 48rem) { .worked li > a, .worked li > div { grid-template-columns: minmax(0, 1fr) 1.5rem; } .worked__name { grid-column: 1 / -1; } } /* Contact: the conversation's three steps on one rule. */ .steps3 { list-style: none; margin: var(--space-l) 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); position: relative; border-top: var(--line-structure) solid var(--slate); } .steps3 li { position: relative; padding-top: 1.5rem; display: grid; gap: 0.3rem; align-content: start; } .steps3 li::before { content: ""; position: absolute; left: 0; top: calc(-0.3rem - 1px); width: 1.4rem; height: 0.6rem; background: radial-gradient(circle at 0.3rem 50%, var(--charcoal) 0.29rem, transparent 0.3rem), linear-gradient(var(--charcoal), var(--charcoal)) right center / 0.62rem 0.2rem no-repeat; box-shadow: none; } .steps3__term { font-size: var(--step-0); color: var(--slate); } .steps3__value { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.2; color: var(--on-light); } .steps3__note { font-size: var(--step-0); line-height: 1.55; color: var(--on-light); max-width: 40ch; } @media (max-width: 48rem) { .steps3 { grid-template-columns: 1fr; border-top: 0; padding-left: 1.6rem; } .steps3::before { content: ""; position: absolute; left: 0.28rem; top: 0.5rem; bottom: 0.5rem; width: var(--line-structure); background: var(--slate); } .steps3 li { padding-top: 0; } .steps3 li::before { left: -1.6rem; top: 0.45rem; } } .direct__row dt { font-size: var(--step-0) !important; font-weight: 400; color: var(--slate); } .direct__row dd { font-family: var(--font-display); } .direct__label { font-size: var(--step-0) !important; color: var(--on-light); } /* The 404: the stack centred on the charcoal side; left-aligned on a phone. */ .error-page { min-height: calc(100vh - 4.5rem); } .error-page.field-navy { background: linear-gradient(135deg, var(--charcoal) 0 76%, var(--jacaranda) 76% 100%); } .error-page__inner { justify-items: center; text-align: center; } .error-page__routes { justify-items: center; } .error-page__routes .arrow-link { font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; } @media (max-width: 48rem) { .error-page__inner { justify-items: start; text-align: left; padding-bottom: 7rem; } .error-page__routes { justify-items: start; } .error-page.field-navy { background: linear-gradient(135deg, var(--charcoal) 0 84%, var(--jacaranda) 84% 100%); } } /* The Science: where the science shows up (WSI-F1), three ruled rows. */ .map { list-style: none; margin: 0; padding: 0; } .map__row { display: grid; grid-template-columns: minmax(0, 3.5fr) minmax(0, 5fr) minmax(0, 4fr); gap: 0.6rem clamp(1.5rem, 3vw, 3rem); align-items: start; padding-block: 1.25rem; border-top: var(--line-ground) solid var(--mist-deep); } .map__row:last-child { border-bottom: var(--line-ground) solid var(--mist-deep); } .map__label { display: flex; align-items: center; gap: 0.7rem; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25; color: var(--on-light); } .map__label .smark { width: 1.75rem; height: 1.75rem; } .map__line { font-size: var(--step-0); line-height: 1.6; color: var(--on-light); max-width: 52ch; } .map__entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; } .map__entries a { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: 0.8rem; align-items: center; color: var(--on-light); text-decoration: none; font-size: var(--step-0); font-weight: 600; } .map__entries img { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: 0 0.8rem 0 0.8rem; } .map__entries a:hover span:first-of-type { text-decoration: underline; text-underline-offset: 0.18em; } @media (max-width: 60rem) { .map__row { grid-template-columns: 1fr; } } /* ================================================================== The audience pages (WC, WCO, WCP, WCS; chunk 8) ================================================================== */ /* Offer rows: the F2 component with two kinds of left column (a problem, or a title). */ .pa-title { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); max-width: 30ch; } .pa--rows .pa__rows { border-top: var(--line-structure) solid var(--slate); } .pa--rows .pa__row { padding-block: 1.3rem 1.4rem; } .pa--rows .pa__row:first-child { border-top: 0; } .pa--rows .pa__q { font-size: clamp(1.35rem, 1.05rem + 1vw, 1.85rem); max-width: 22ch; } .pa__qbody { margin-top: 0.55rem; font-size: var(--step-0); line-height: 1.6; color: var(--on-light); max-width: 46ch; } .pa__ah { font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); line-height: 1.25; color: var(--on-light); margin-top: 0.55rem; } .pa__ah em { font-family: var(--font-sans); font-style: italic; color: var(--deep-jacaranda); } .pa--rows .pa__answer .depth--row { margin-top: 0.4rem; } .pa__row:target { border-top-color: var(--jacaranda) !important; } .pa__close--rows { margin-left: calc((100% - var(--pa-gap)) * (1 / 2.12) + var(--pa-gap)); } .pa__close-lead { font-family: var(--font-display); font-size: var(--step-1); } @media (max-width: 60rem) { .pa--rows .pa__answer .pa__ah { order: 0; } .pa--rows .pa__answer .depth--row { order: 4; } .pa__close--rows { margin-left: 0; } } /* In practice: panel cards sized to their content. */ .practice { display: grid; gap: clamp(1rem, 2vw, 1.5rem); align-items: start; } .practice .panel-card p { font-size: var(--step-0); color: var(--on-light); } .practice__quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; } .practice__quotes li { font-style: italic; font-size: var(--step-1); line-height: 1.45; color: var(--on-light); } .practice .practice__small { font-size: var(--step-0) !important; color: var(--on-light); } .practice .practice__frame { font-size: var(--step-0) !important; color: var(--slate) !important; } /* The people band: the site's person cards beside the copy's Why us. */ .peopleband { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-l) clamp(2rem, 4vw, 4rem); align-items: center; } .peopleband__cards { display: flex; gap: 1.25rem; } .peopleband .person { width: clamp(8rem, 11vw, 10rem); display: grid; gap: 0.5rem; } .peopleband__text { display: grid; gap: var(--space-s); } .peopleband__text p { font-size: var(--step-0); line-height: 1.65; color: var(--on-light); max-width: 60ch; } @media (max-width: 48rem) { .peopleband { grid-template-columns: 1fr; } } /* WCP: the clinicians split. */ .hinge__title--long { max-width: 14ch; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); } /* WCS: the turn on charcoal, the old questions underneath a rule. */ .tiers { display: grid; gap: var(--space-m); } .tiers .display-m em { font-family: var(--font-display); color: var(--on-charcoal); } .tiers__upper { font-size: var(--step-1); line-height: 1.5; color: var(--on-charcoal-soft); max-width: 52ch; } .tiers__lower { display: grid; gap: 0.6rem; padding-top: var(--space-m); border-top: var(--line-structure) solid var(--on-charcoal-soft); } .tiers__q { font-family: var(--font-display); font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.7rem); line-height: 1.2; color: var(--on-charcoal); max-width: 32ch; } .tiers__answer { font-size: var(--step-1); line-height: 1.5; color: var(--on-charcoal); max-width: 56ch; } .combo { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; } .combo--nfp { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } .combo__name { display: flex; align-items: center; gap: 0.55rem; font-weight: 600; font-size: var(--step-0); line-height: 1.25; } .combo__lead { font-weight: 400; color: var(--slate); } .pcard--charcoal .combo__lead { color: var(--on-charcoal-soft); } .combo__item:not(.combo__item--lead) .smark { width: 24px; height: 24px; } .smark--lead { width: 28px !important; height: 28px !important; } .combo__line { margin-top: 0.3rem; font-size: var(--step-0); line-height: 1.5; } .pcard--charcoal .combo__line { font-size: var(--step-0); color: var(--on-charcoal); } .pcard--charcoal .smark { --m-quiet: var(--charcoal-raised); } @media (max-width: 64rem) { .combo--nfp{ grid-template-columns: 1fr; } } .peopleband .person { grid-template-columns: 1fr !important; align-items: start; } .peopleband .person__fig { width: 100%; } .peopleband .person__name { font-size: var(--step-0); } /* ================================================================== The training family and Research (chunk 9) ================================================================== */ .phead--system .phead__text { max-width: min(54rem, 64%); } .phead--system .phead__system { font-size: var(--step-0); color: var(--slate); max-width: 75ch; } .phead--system .phead__system .smark { align-self: flex-start; margin-top: 0.1rem; } .phead--system .phead__system em { font-style: italic; } @media (max-width: 48rem) { .phead--system .phead__text { max-width: none; } } .hinge__left { display: grid; gap: var(--space-m); align-content: start; justify-items: start; } /* WT band 2: the problem, then the line. */ .stalled { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-l) clamp(2rem, 5vw, 5rem); align-items: start; } .stalled__text { display: grid; gap: var(--space-s); } .stalled__text p { font-size: var(--step-0); line-height: 1.65; color: var(--on-light); max-width: 46ch; } .stalled__list li { font-size: var(--step-1); } .theline { margin-top: clamp(2.5rem, 5vw, 3.75rem); display: grid; gap: 0.9rem; } .theline__q { margin: 0; } .theline__q p { font-family: var(--font-display); font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); line-height: 1.12; color: var(--on-light); max-width: 26ch; } .theline__foot { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-m) clamp(2rem, 5vw, 5rem); align-items: start; } .theline__by { font-size: var(--step-0); color: var(--slate); } .theline__body { font-size: var(--step-0); line-height: 1.65; color: var(--on-light); max-width: 62ch; } @media (max-width: 60rem) { .stalled, .theline__foot { grid-template-columns: 1fr; } } /* WT band 3: the three skills, the base island dark; a full Mist padding below before the charcoal band. */ .skills-band { padding-bottom: clamp(3.5rem, 7vw, 5.5rem); } .skills-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-m) var(--space-xl); align-items: end; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .skills-key { font-style: italic; font-size: var(--step-1); line-height: 1.4; color: var(--on-light); } .skills-band .system__base { background: var(--white) !important; color: var(--on-light); } .skills-band .system__base :is(.system__num, .system__title, .system__body) { color: var(--on-light) !important; } .skills-band .system__cell :is(.system__num) { color: var(--charcoal); } .skills-band .tools__label { color: var(--on-light); } @media (max-width: 60rem) { .skills-head { grid-template-columns: 1fr; } } /* The method strip with a return line (WT-F2, WTO, WR-F2): arms with cut ends, position the stage; the lit stage in the page's colour; the return neutral. */ .shape { position: relative; } .shape__stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1rem; } .shape__st { position: relative; display: grid; gap: 0.35rem; align-content: start; } .shape__arm { display: block; height: 1.1rem; margin-bottom: 0.7rem; background: var(--slate); -webkit-mask: radial-gradient(circle 0.75rem at -0.3rem 50%, transparent 98%, #000 100%); mask: radial-gradient(circle 0.75rem at -0.3rem 50%, transparent 98%, #000 100%); } .field-light .shape__arm { background: var(--mist-deep); } .shape__st.is-lit .shape__arm { background: var(--page); height: 1.4rem; margin-top: -0.15rem; } .shape__mark { position: absolute; top: -1.9rem; left: 0; font-size: var(--step--1); font-weight: 600; color: var(--on-charcoal); } .field-light .shape__mark { color: var(--on-light); } .shape__name { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; color: var(--on-charcoal); } .field-light .shape__name { color: var(--on-light); } .shape__n { font-family: var(--font-sans); font-size: var(--step--1); color: var(--on-charcoal-soft); margin-right: 0.2rem; } .field-light .shape__n { color: var(--slate); } .shape__line { font-size: var(--step--1); line-height: 1.5; color: var(--on-charcoal-soft); max-width: 30ch; } .field-light .shape__line { color: var(--on-light); } .shape { padding-top: 1.9rem; } .shape__return { position: relative; margin: 1.6rem calc(12.5% + 0.1rem) 0 calc(12.5% - 0.4rem); width: calc(50% + 0.5rem); height: 2.4rem; border: var(--line-flow) solid var(--on-charcoal); border-top: 0; } .field-light .shape__return { border-color: var(--charcoal); } .shape__return::after { content: ""; position: absolute; left: calc(var(--line-flow) / -2 - 7px); top: -10px; border: 7px solid transparent; border-bottom: 10px solid var(--on-charcoal); border-top: 0; } .field-light .shape__return::after { border-bottom-color: var(--charcoal); } .shape__return span { position: absolute; left: 50%; bottom: -0.75rem; translate: -50% 0; padding: 0 0.6rem; background: var(--charcoal); font-size: var(--step--1); font-weight: 600; color: var(--on-charcoal); white-space: nowrap; } .field-light .shape__return span { background: var(--mist); color: var(--on-light); } .field-white .shape__return span { background: var(--white); } .shape__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-m) 1rem; margin-top: var(--space-l); align-items: start; } .shape__foot-left { display: grid; gap: var(--space-s); justify-items: start; } .shape__foot .depth { margin-top: 0; } @media (max-width: 60rem) { .shape { padding-top: 0; } .shape__stages { grid-template-columns: 1fr; gap: 1.2rem; padding-left: 3.4rem; } .shape__arm { position: absolute; left: -2.2rem; top: 0.15rem; width: 1.1rem; height: calc(100% - 0.3rem); margin: 0; -webkit-mask: radial-gradient(circle 0.75rem at 50% -0.3rem, transparent 98%, #000 100%); mask: radial-gradient(circle 0.75rem at 50% -0.3rem, transparent 98%, #000 100%); } .shape__st.is-lit .shape__arm { width: 1.4rem; left: -2.35rem; height: calc(100% - 0.3rem); margin: 0; } .shape__mark { position: static; } .shape__return { position: absolute; left: 0.1rem; top: 0.4rem; margin: 0; width: 0.9rem; height: var(--ret-h, 60%); border: var(--line-flow) solid var(--on-charcoal); border-right: 0; } .field-light .shape__return { border-color: var(--charcoal); border-right: 0; } .shape__return::after { left: auto; right: -10px; top: calc(var(--line-flow) / -2 - 7px); border: 7px solid transparent; border-left: 10px solid var(--on-charcoal); border-right: 0; } .field-light .shape__return::after { border-left-color: var(--charcoal); border-bottom: 7px solid transparent; } .shape__return span { display: none; } .shape__foot { grid-template-columns: 1fr; } .shape__retnote { display: block !important; } } .shape__retnote { display: none; font-size: var(--step--1); font-weight: 600; color: var(--on-charcoal); margin-top: 0.8rem; padding-left: 3.4rem; } .field-light .shape__retnote { color: var(--on-light); } /* WT band 5: the story in one line. */ .story1 { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 0.75rem; justify-items: start; max-width: 54rem; } .story1 p { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.3; color: var(--on-light); } /* Weighted format cards: the flagship sunshine-filled. */ .formats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: clamp(1rem, 2vw, 1.5rem); } .fcard { --bite-r: 22px; --bite-cut: calc(var(--bite-r) * 1.45); position: relative; overflow: clip; display: grid; gap: 0.5rem; align-content: start; background: var(--white); color: var(--on-light); text-decoration: none; padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.4rem, 2.4vw, 2rem) clamp(2rem, 3vw, 2.4rem); -webkit-mask: radial-gradient(circle at 100% 100%, #000 var(--bite-r), transparent calc(var(--bite-r) + 0.5px), transparent var(--bite-cut), #000 calc(var(--bite-cut) + 0.5px)); mask: radial-gradient(circle at 100% 100%, #000 var(--bite-r), transparent calc(var(--bite-r) + 0.5px), transparent var(--bite-cut), #000 calc(var(--bite-cut) + 0.5px)); } .fcard::after { content: ""; position: absolute; right: calc(var(--bite-r) * -1); bottom: calc(var(--bite-r) * -1); width: calc(var(--bite-r) * 2); height: calc(var(--bite-r) * 2); border-radius: 50%; background: var(--jacaranda); } .fcard--flag { grid-row: span 2; background: var(--sunshine); } .fcard__title { font-size: var(--step-2); line-height: 1.15; } .fcard--flag .fcard__title { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); } .fcard__body { font-size: var(--step-0); line-height: 1.55; } .fcard__more { font-weight: 700; font-size: var(--step--1); color: var(--deep-jacaranda); margin-top: 0.4rem; } .fcard--flag .fcard__more { color: var(--charcoal); } .fcard:hover .fcard__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; } @media (max-width: 60rem) { .formats { grid-template-columns: 1fr; } .fcard--flag { grid-row: auto; } } /* Organisation training. */ .who-head .display-m .brush { color: inherit; } .who-head__body { margin-top: var(--space-s); } .kcols { list-style: none; margin: var(--space-l) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); } .kcol { display: grid; gap: 0.45rem; align-content: start; } .kcol__arm { display: block; width: 3rem; height: 0.8rem; background: var(--page); margin-bottom: 0.4rem; -webkit-mask: radial-gradient(circle 0.55rem at -0.2rem 50%, transparent 98%, #000 100%); mask: radial-gradient(circle 0.55rem at -0.2rem 50%, transparent 98%, #000 100%); } .kcol__name { font-size: var(--step-1); line-height: 1.25; } .kcol p { font-size: var(--step-0); line-height: 1.55; color: var(--on-light); } .kcol__who em { color: var(--slate); } .buyers2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-m) clamp(2rem, 4vw, 4rem); margin-top: var(--space-l); padding-top: var(--space-s); border-top: var(--line-ground) solid var(--mist-deep); } .buyers2__label { font-size: var(--step-0); color: var(--slate); } .buyers2__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .buyers2__list li { position: relative; padding-left: 2rem; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.3; color: var(--on-light); } .buyers2__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 1.4rem; height: 0.6rem; background: radial-gradient(circle at 0.3rem 50%, var(--charcoal) 0.29rem, transparent 0.3rem), linear-gradient(var(--charcoal), var(--charcoal)) right center / 0.62rem 0.2rem no-repeat; } .learn { display: grid; gap: var(--space-s); justify-items: start; padding-bottom: var(--space-l); margin-bottom: var(--space-l); border-bottom: var(--line-ground) solid var(--charcoal-raised); } .learn p { font-size: var(--step-0); line-height: 1.65; color: var(--on-charcoal); max-width: 62ch; } .field-navy .ledger__num { color: var(--on-charcoal); } .ledger__flow { position: relative; align-self: center; width: clamp(2rem, 5vw, 4rem); height: var(--line-flow); background: var(--sunshine); } .ledger__flow::after { content: ""; position: absolute; right: -10px; top: 50%; translate: 0 -50%; border: 7px solid transparent; border-left: 10px solid var(--sunshine); border-right: 0; } .field-navy .ledger__effect { background: var(--mist); color: var(--on-light); } .field-navy .ledger__effect-text { color: var(--on-light); } .field-navy .ledger__effect-label { color: var(--slate) !important; } .field-navy .ledger__claim em { color: var(--on-charcoal-soft); } #why-it-sticks ~ .arrow-link { margin-top: var(--space-s); } @media (max-width: 64rem) { .ledger__flow { width: var(--line-flow); height: 2rem; margin: 0.5rem 0 0.9rem 1rem; } .ledger__flow::after { right: auto; left: 50%; top: auto; bottom: -10px; translate: -50% 0; border: 7px solid transparent; border-top: 10px solid var(--sunshine); border-bottom: 0; } } .said__head { display: grid; gap: var(--space-s); justify-items: start; margin-bottom: var(--space-l); } .said { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l) clamp(2rem, 4vw, 4rem); } .said__item { display: grid; gap: 0.6rem; align-content: start; } .said__tag { font-size: var(--step-0); color: var(--on-light); } .said__tag .ledger__num { font-family: var(--font-display); color: var(--charcoal); } .said__fig, .said__quote { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.25; color: var(--on-light); } .said__quote { font-size: var(--step-1); } .said__item p:not(.said__tag):not(.said__fig):not(.said__quote) { font-size: var(--step-0); line-height: 1.6; color: var(--on-light); } .said__src { color: var(--slate) !important; } .said__note { margin-top: var(--space-m); font-size: var(--step-0); color: var(--slate); max-width: 70ch; } .note--marker .note__label { display: flex; align-items: center; gap: 0.6rem; } .note__title { font-family: var(--font-display); font-size: var(--step-1); margin-bottom: 0.3rem; } .around { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-l) clamp(2rem, 4vw, 4rem); align-items: end; margin-bottom: var(--space-l); } .mstrip--all .mstrip__name { color: var(--on-light) !important; font-size: var(--step--1); } .spec__label { font-size: var(--step-0) !important; color: var(--slate); } @media (max-width: 60rem) { .kcols, .buyers2, .said, .around { grid-template-columns: 1fr; } } .phead:has(.phead__text > h1:only-child) { min-height: clamp(11rem, 15vw, 14rem); } /* One-to-one. */ .audiences--plain .segment__name { font-size: var(--step-2); color: var(--on-light); } .audiences--plain .segment__bullets li::before { background: radial-gradient(circle at 0.3em 50%, var(--charcoal) 0.29em, transparent 0.3em), linear-gradient(var(--charcoal), var(--charcoal)) right center / 0.62em 0.2em no-repeat !important; } .bookline { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-s) var(--space-l); margin-top: var(--space-m); padding-top: var(--space-m); border-top: var(--line-structure) solid var(--slate); } .bookline__text { font-family: var(--font-display); font-size: var(--step-2); color: var(--on-light); } .skills-key--dark { color: var(--on-charcoal); } .course-lead { margin-top: var(--space-s); color: var(--on-charcoal-soft) !important; } .field-navy .contrast__col--work { background: var(--mist); color: var(--on-light); } .field-navy .contrast__col--work .checklist li, .field-navy .contrast__col--work .contrast__title, .field-navy .contrast__col--work .contrast__note { color: var(--on-light); } .field-navy .contrast__list li, .field-navy .contrast__col--course .contrast__title { color: var(--on-charcoal); } .checklist__tick { background: radial-gradient(circle at 0.3em 50%, var(--charcoal) 0.29em, transparent 0.3em), linear-gradient(var(--charcoal), var(--charcoal)) right center / 0.62em 0.2em no-repeat !important; } .ruled-line { margin-top: var(--space-l); padding-top: var(--space-s); border-top: var(--line-ground) solid var(--charcoal-raised); font-size: var(--step-0); line-height: 1.6; color: var(--on-charcoal); max-width: 80ch; } .stages--wt1 .stage__num { font-family: var(--font-display); color: var(--charcoal); } .stages--wt1 .stage__outcome { background: var(--mist) !important; color: var(--on-light); } .stages--wt1 .stage__outcome-label { display: block; font-size: var(--step-0) !important; font-weight: 700; color: var(--on-light); margin-bottom: 0.25rem; } .stages--wt1 .stage:not(:last-child) .stage__marker::after { border-color: var(--charcoal) !important; } .stages--wt1::after { background: var(--charcoal) !important; box-shadow: 0 0 0 0.35rem var(--white) !important; } .flow-note { margin-top: var(--space-m); font-style: italic; font-size: var(--step-0); color: var(--on-light); max-width: 62ch; } /* Talks. */ .speaker { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: var(--space-l) clamp(2rem, 4vw, 4rem); align-items: start; } .speaker__fig { max-width: 20rem; } .speaker__text { display: grid; gap: var(--space-s); justify-items: start; } .speaker__text > p { font-size: var(--step-0); line-height: 1.65; color: var(--on-light); max-width: 60ch; } .speaker__name span { font-family: var(--font-display); font-size: var(--step-1); } .speaker__marks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; } .speaker__marks .press__mark { --h: 2.2; --ratio: 3; background: var(--on-light); width: 7rem; } .prog { list-style: none; margin: 0; padding: 0; } .prog__row { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 0.4rem clamp(1rem, 2.5vw, 2rem); align-items: baseline; padding-block: 1.2rem; border-top: var(--line-ground) solid var(--charcoal-raised); } .prog__num { font-family: var(--font-display); font-size: var(--step-1); color: var(--on-charcoal); } .prog__title { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem); line-height: 1.15; color: var(--on-charcoal); } .prog__line { margin-top: 0.35rem; font-size: var(--step-0); color: var(--on-charcoal-soft); max-width: 60ch; } .formats--two { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: auto; } .formats--two .fcard--flag { grid-row: auto; } .fcard--mist { background: var(--mist); } @media (max-width: 60rem) { .speaker, .formats--two { grid-template-columns: 1fr; } .prog__row { grid-template-columns: 2.4rem minmax(0, 1fr); } .prog__link { grid-column: 2; } .speaker__fig { max-width: 10rem; } } /* Research and evaluation. */ .pa--joined .pa__row--joined { grid-template-columns: minmax(0, 1fr) 4rem minmax(0, 1.05fr); } .pa__join { align-self: start; margin-top: 0.75rem; height: 0.8rem; background: var(--lawn); -webkit-mask: radial-gradient(circle 0.55rem at -0.2rem 50%, transparent 98%, #000 100%); mask: radial-gradient(circle 0.55rem at -0.2rem 50%, transparent 98%, #000 100%); } .pa--joined .pa__a { margin-top: 0.25rem; font-size: var(--step-1); line-height: 1.45; } @media (max-width: 60rem) { .pa--joined .pa__row--joined { grid-template-columns: 1fr; } .pa__join { width: 0.8rem; height: 1.8rem; margin: 0.2rem 0 0.2rem 0.2rem; -webkit-mask: radial-gradient(circle 0.55rem at 50% -0.2rem, transparent 98%, #000 100%); mask: radial-gradient(circle 0.55rem at 50% -0.2rem, transparent 98%, #000 100%); } } .shape--ret4 .shape__return { width: calc(75% + 0.75rem); margin-right: 0; } .charts { margin-top: var(--space-l); } .charts__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); } .charts__one { display: grid; gap: 0.5rem; align-content: start; } .charts__title { font-family: var(--font-display); font-size: var(--step-1); color: var(--on-charcoal); } .charts__note { font-size: var(--step-0); line-height: 1.5; color: var(--on-charcoal-soft); max-width: 46ch; } .ch { width: 100%; height: auto; overflow: visible; } .ch__axis { stroke: var(--on-charcoal-soft); stroke-width: 2.25; } .ch__line { stroke: var(--on-charcoal); stroke-width: 4.5; } .ch__line--soft { stroke: var(--on-charcoal-soft); } .ch__pt { fill: var(--on-charcoal); } .ch__pt--soft { fill: var(--on-charcoal-soft); } .ch__bracket { fill: none; stroke: var(--on-charcoal-soft); stroke-width: 2.25; } .ch__gap { fill: var(--lawn); } .ch__end, .ch__lab, .ch__gaplab { font-family: var(--font-sans); font-size: 15px; fill: var(--on-charcoal-soft); } .ch__lab { fill: var(--on-charcoal); font-weight: 600; } .ch__lab--soft { fill: var(--on-charcoal-soft); } .ch__gaplab { fill: var(--on-charcoal); font-weight: 600; } #cycle-title ~ * .depth, .field-navy .charts + .depth { margin-top: var(--space-m); } @media (max-width: 60rem) { .charts__pair { grid-template-columns: 1fr; } .ch__end, .ch__lab, .ch__gaplab { font-size: 17px; } } /* Instruments: a survey and its private dashboard, illustrative. */ .inst { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-l) clamp(2rem, 4vw, 4rem); align-items: start; } .inst__text { display: grid; gap: var(--space-s); } .inst__text > p { font-size: var(--step-0); line-height: 1.65; color: var(--on-light); max-width: 58ch; } .sv { display: grid; grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr); align-items: center; padding: 1.25rem; background: var(--mist); border-radius: 0 1.2rem 0 1.2rem; } .sv__sheet { background: var(--white); padding: 1rem 1.1rem; border-radius: 0 0.7rem 0 0; display: grid; gap: 0.7rem; } .sv__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; } .sv__rows li { display: grid; gap: 0.4rem; } .sv__q { display: block; height: 0.45rem; width: 80%; background: var(--mist-deep); border-radius: 2px; } .sv__scale { display: flex; gap: 0.45rem; } .sv__scale i { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--mist-deep); } .sv__scale i.on { background: var(--charcoal); } .sv__bars { display: grid; gap: 3px; } .sv__bars i { display: block; height: 0.5rem; } .sv__bars .last, .sv__key .last { background: var(--slate); } .sv__bars .this, .sv__key .this { background: var(--charcoal); } .sv__key { display: flex; gap: 1rem; font-size: 0.875rem; color: var(--on-light); } .sv__key span { display: inline-flex; align-items: center; gap: 0.35rem; } .sv__key i { display: inline-block; width: 1rem; height: 0.5rem; } .sv__arrow { position: relative; height: var(--line-structure); background: var(--slate); margin: 0 0.6rem 0 0.2rem; } .sv__arrow::after { content: ""; position: absolute; right: -8px; top: 50%; translate: 0 -50%; border: 6px solid transparent; border-left: 8px solid var(--slate); border-right: 0; } .inst__built { margin-top: var(--space-s); font-family: var(--font-display); font-size: var(--step-1); line-height: 1.35; color: var(--on-light); } .inst__built strong { font-weight: 400; } @media (max-width: 60rem) { .inst { grid-template-columns: 1fr; } .inst__fig { order: 2; } .sv { grid-template-columns: 1fr; } .sv__arrow { width: var(--line-structure); height: 1.8rem; margin: 0.4rem auto; } .sv__arrow::after { right: auto; left: 50%; top: auto; bottom: -8px; translate: -50% 0; border: 6px solid transparent; border-top: 8px solid var(--slate); border-bottom: 0; } } /* The science of judgement: the turn as a display line; the submission as a document. */ .subm { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-l) clamp(2rem, 4vw, 4rem); align-items: start; } .subm__text { display: grid; gap: var(--space-s); justify-items: start; } .subm__text > p { font-size: var(--step-0); line-height: 1.65; color: var(--on-light); max-width: 52ch; } .subm__text > .subm__turn { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.25; } .subm__doc { aspect-ratio: 1 / 1.25; display: grid; align-content: start; gap: 0.9rem; padding: clamp(1.6rem, 3vw, 2.6rem); } .subm__title { font-size: var(--step-2); line-height: 1.2; } .subm__rule { display: block; height: 0.4rem; background: linear-gradient(var(--charcoal), var(--charcoal)) 1.2rem 50% / calc(100% - 1.2rem) 0.16rem no-repeat, radial-gradient(circle at 0.35rem 50%, var(--charcoal) 0.34rem, transparent 0.35rem); } .subm__doc p { font-size: var(--step-0); line-height: 1.65; } .ruled-line--light { color: var(--on-light); border-top-color: #DADEE3; } @media (max-width: 60rem) { .subm { grid-template-columns: 1fr; } .subm__doc { aspect-ratio: auto; } } /* The skills that stay human: the story panel, gated as one switch. */ .human2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-l) clamp(2rem, 4vw, 4rem); align-items: start; } .human2__text { display: grid; gap: var(--space-s); } .human2__text > p:not(.skills-key) { font-size: var(--step-0); line-height: 1.65; color: var(--on-light); max-width: 58ch; } .human2__label { font-size: var(--step-0) !important; color: var(--slate) !important; } .human2__title { font-size: var(--step-3); line-height: 1.15; } .human2__story p:not(.human2__label) { font-size: var(--step-1) !important; line-height: 1.55; } [data-gate-shed="off"] [data-gate="shed"] { display: none; } [data-gate-shed="off"] .human2 { grid-template-columns: minmax(0, 1fr); } @media (max-width: 60rem) { .human2 { grid-template-columns: 1fr; } } /* WR-F4: who does what, a chain on charcoal. */ .chain { padding: clamp(1.75rem, 3vw, 2.75rem); } .chain__parties { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 6rem minmax(0, 1.15fr) 6rem minmax(0, 1.15fr) 6rem minmax(0, 1fr); align-items: start; } .chain__p { display: grid; gap: 0.4rem; justify-items: start; } .chain__shape { display: block; width: 2rem; height: 2rem; border-radius: 50%; background: var(--white); } .chain__p--peak .chain__shape { width: 3rem; height: 3rem; background: var(--jacaranda); } .chain__p--ti .chain__shape { background: var(--lawn); } .chain__p--members .chain__shape { width: auto; height: 1.2rem; background: none; display: flex; gap: 0.35rem; } .chain__p--members .chain__shape i { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--white); } .chain__name { font-family: var(--font-display); font-size: var(--step-1); color: var(--on-charcoal); } .chain__line { font-size: var(--step--1); line-height: 1.45; color: var(--on-charcoal-soft); } .chain__link { position: relative; height: 3rem; } .chain__link::before { content: ""; position: absolute; left: 0.3rem; right: 0.5rem; top: 1.25rem; height: var(--line-flow); background: var(--on-charcoal); } .chain__link--plain::before { height: var(--line-structure); background: var(--on-charcoal-soft); } .chain__link--lawn::before { background: var(--lawn); } .chain__link--flow::after, .chain__link--lawn::after { content: ""; position: absolute; right: 0.1rem; top: calc(1.25rem + 2.25px); translate: 0 -50%; border: 7px solid transparent; border-left: 10px solid var(--on-charcoal); border-right: 0; } .chain__link--lawn::after { border-left-color: var(--lawn); } .chain__link span { position: absolute; left: 0; right: 0; top: 1.7rem; text-align: center; font-size: var(--step--1); font-weight: 600; color: var(--on-charcoal); } .chain__evidence { position: relative; height: 2.6rem; margin: 1.2rem 0 0 0.9rem; border: var(--line-flow) solid var(--lawn); border-top: 0; width: calc(100% - 2.2rem); } .chain__evidence::before, .chain__evidence::after { content: ""; position: absolute; top: -10px; border: 7px solid transparent; border-bottom: 10px solid var(--lawn); border-top: 0; } .chain__evidence::before { left: calc(var(--line-flow) / -2 - 7px); } .chain__evidence::after { left: calc((100% - 18rem) * 1 / 4.3 + 6rem + 0.6rem); } .chain__evidence span { position: absolute; left: 50%; bottom: -0.75rem; translate: -50% 0; padding: 0 0.6rem; background: var(--charcoal); font-size: var(--step--1); font-weight: 600; color: var(--on-charcoal); } @media (max-width: 64rem) { .chain__parties { grid-template-columns: 1fr; gap: 0; padding-left: 2.6rem; } .chain__link { height: 2.6rem; } .chain__link::before { left: 0.9rem; right: auto; top: 0.2rem; bottom: 0.4rem; width: var(--line-flow); height: auto; } .chain__link--plain::before { width: var(--line-structure); } .chain__link--flow::after, .chain__link--lawn::after { right: auto; left: calc(0.9rem - 5px); top: auto; bottom: -0.35rem; translate: 0 0; border: 7px solid transparent; border-top: 10px solid var(--on-charcoal); border-bottom: 0; } .chain__link--lawn::after { border-top-color: var(--lawn); } .chain__link span { left: 2rem; top: 0.7rem; text-align: left; } .chain__evidence { position: absolute; left: 1.3rem; top: 2.6rem; bottom: 4.5rem; height: auto; width: 0.9rem; margin: 0; border: var(--line-flow) solid var(--lawn); border-right: 0; } .chain { position: relative; } .chain__evidence::before { left: auto; right: -12px; top: -9px; border: 7px solid transparent; border-left: 10px solid var(--lawn); border-right: 0; } .chain__evidence::after { display: none; } .chain__evidence span { left: -0.6rem; bottom: auto; top: 50%; translate: 0 -50%; writing-mode: vertical-rl; rotate: 180deg; padding: 0.4rem 0; } } @media (min-width: 48.0625rem) { .phead--system { --pm-x: clamp(19rem, 32vw, 31rem); } } .subm__doc { max-width: 30rem; aspect-ratio: 1 / 1.18; } .subm > div:last-child { display: grid; justify-items: start; } @media (min-width: 64.0625rem) { .chain__parties { grid-template-columns: minmax(0, 1fr) 7.5rem minmax(0, 1.15fr) 7.5rem minmax(0, 1.15fr) 7.5rem minmax(0, 1fr); } } .chain__link span { white-space: nowrap; } @media (max-width: 64rem) { .subm__doc { max-width: none; aspect-ratio: auto; } } /* The closing band at phone width: the field as two strips of whole marks (top and bottom), never behind type and never cut at the band's edge. */ @media (max-width: 48rem) { .cta-band.field-deep, .cta-band--motive.field-deep { background: url("/assets/img/brand/field-strip-dark.svg") top 0.75rem center / 135px 45px, url("/assets/img/brand/field-strip-dark.svg") bottom 0.75rem center / 135px 45px, var(--charcoal-deep); background-repeat: space no-repeat, space no-repeat, no-repeat; padding-block: 5rem; } } /* ================================================================== Build review r1 fixes (29 Oct) ================================================================== */ /* The system figure: one name over both parts of "Your organisation"; a fine jacaranda key line to the dot; the ring's label on the ring. */ .sysfig__leader { stroke: var(--jacaranda); stroke-width: 1.5; } .sysfig__name--sub { margin-top: calc(var(--u) * 10) !important; } .sysfig__dotsep, .sysfig__inlinejob { font-family: var(--font-sans); font-size: calc(var(--u) * 18); color: var(--on-charcoal-soft); } .sysfig--brief .sysfig__dotsep, .sysfig--brief .sysfig__inlinejob { font-size: calc(var(--u) * 21); } .sysfig__ringtext { font-family: var(--font-sans); font-size: 17px; fill: var(--on-charcoal-soft); } .sysfig__key { display: none; } @media (max-width: 78rem) { .sysfig__list .sysfig__key { display: grid; grid-column: 1 / -1; list-style: none; margin: 1.6rem 0 0; padding: 0.9rem 0 0; gap: 0.45rem; border-top: 1px solid var(--charcoal-raised); font-size: 0.9375rem; font-weight: 600; color: var(--on-charcoal); } .sysfig__key li { display: flex; align-items: center; gap: 0.7rem; } .sysfig__keyline { flex: none; width: 4px; height: 1.4rem; background: var(--jacaranda); } .sysfig__keyline--la { background: var(--lawn); } .sysfig__keyline--su { background: var(--sunshine); } .sysfig__keyline--web { background: var(--on-charcoal-soft); } .sysfig__keyline--ring { width: 1.4rem; height: 1.4rem; background: none; border: 2px solid var(--on-charcoal-soft); border-radius: 50%; } .sysfig__keyring { color: var(--on-charcoal-soft); font-weight: 500; } } /* The arm quote's dot is jacaranda on every slab colour (must fix 5). */ :is(.field-light, .field-navy, .field-deep) .payoff-line, :is(.field-light, .field-navy, .field-deep) .rail-quote { background: radial-gradient(circle var(--qd) at var(--qd) 50%, var(--jacaranda) 98%, transparent 100%), var(--page, var(--jacaranda)); } /* V-18: a heading's turn phrase on charcoal is jacaranda, not italic. */ :is(.field-navy, .field-deep) :is(h1, h2, h3, .display-m, .display-l, .display-s, .statement) :is(em, i), .statement--dark em, .tiers .display-m em { font-family: var(--font-display) !important; font-style: normal !important; color: var(--jacaranda) !important; } /* Research's method strip at 390 (must fix 6): the four-step return is desktop-only width. */ .shape--ret4 .shape__return { width: auto; } @media (min-width: 60.0625rem) { .shape--ret4 .shape__return { width: calc(75% + 0.75rem); } } @media (max-width: 60rem) { .shape--ret4 .shape__return { height: var(--ret-h4, 86%); } } /* Not-for-profits: the close of band 3 across the figure; proof cards to their content. */ .proof__cards { align-items: start !important; } .proof__card { align-self: start !important; } .proof__card .arrow-link { margin-top: 0.25rem; } /* Philosophy: the umbrella joined and in the structure tone. */ .umbrella__stem, .umbrella__lenses::before, .lens::before { background-color: var(--slate) !important; border-color: var(--slate) !important; } /* Two-sided headers top-aligned (WT1, Contact). */ .problem-head { align-items: start; } .contact .section-head, .booking-band .section-head { align-items: start; } /* Contact: a compact head; the booking panel on Mist. */ .page-head.page-head--creed { padding-block: clamp(2.25rem, 3.5vw, 3rem) clamp(2.25rem, 3.5vw, 3rem); } .creed--head { align-items: start; } .booking__panel { background: var(--mist) !important; } /* Schools: the two questions above the heading's size. */ .tiers .display-m { font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.6rem); } .tiers__q { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); } /* Training family details. */ .fcard--flag::after { background: var(--charcoal); } .fcard--flag { align-content: end; } .formats--two .fcard--flag { align-content: start; } .phead--system .phead__text { max-width: min(60rem, 68%); } .ledger__body, .spec__note, .stages--wt1 .stage__body { font-size: var(--step-0) !important; } .field-navy .contrast__list a { text-decoration-color: var(--on-charcoal) !important; color: var(--on-charcoal); } @media (max-width: 48rem) { .mstrip--all { grid-template-columns: 1fr; } .mstrip--all .mstrip__stage { grid-template-columns: 3rem 1fr; align-items: center; } .mstrip--all .mstrip__arm { height: 0.7rem; } } /* Organisations: the row expander one step below the standard, not caption size. */ .pa--rows .depth--row .depth__summary { font-size: var(--step-0); } .pa--rows .depth--row .depth__marker { width: 1.3rem; height: 1.3rem; } /* Team: the voices' marker above the quote; no orphan separator at 390. */ .voices__star { display: block !important; margin-bottom: 0.4rem; } @media (max-width: 48rem) { .cred-strip__item { display: block; } .cred-strip__item + .cred-strip__item::before { content: none !important; } } /* Footer: two columns to a row at phone width, then one. */ @media (max-width: 30rem) { .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 22rem) { .footer__cols { grid-template-columns: 1fr; } } /* Arrows stay with their last word. */ .nw { white-space: nowrap; } .umbrella--4 .umbrella__lenses::before { left: calc((100% - 3 * var(--lens-gap)) / 8 - 1.125px); right: calc((100% - 3 * var(--lens-gap)) / 8 - 1.125px); height: 2.25px; background: var(--slate) !important; } .umbrella--4 .umbrella__stem { margin-top: var(--space-s); background: var(--slate) !important; width: 2.25px; } .umbrella--4 .lens::before { top: calc(-1 * var(--space-l)); height: calc(2 * var(--space-l) - 0.6rem); width: 2.25px; background: var(--slate) !important; } @media (max-width: 60rem) { .umbrella--4 .umbrella__lenses::before, .umbrella--4 .lens::before { display: none; } } /* WA-F4 (must fix 2): the flip reads before a word. Left, a jacaranda flow up the sheet's margin from the sign-off into the draft; right, the prompt overlapping the draft, an azure flow leaving the draft and dropping into it. */ /* WA-F2's autonomy panel (must fix 3): about double the scale; labels at the floors. */ /* WP-F4 (must fix 4): the growth band's labels at the floors at both widths, set in the SVG's own units (it renders at about 0.65 scale at 1440, 0.33 at 390). */ .gb__axis-labels text { font-size: 26px !important; font-weight: 600; } .gb__axis-labels .gb__extent { font-size: 23px !important; font-weight: 500; } .gb__region text { font-family: var(--font-display); font-size: 36px !important; font-weight: 400 !important; } .gb__region .gb__region-sub { font-family: var(--font-sans); font-size: 23px !important; } .gb__label text { font-family: var(--font-display); font-size: 32px !important; font-weight: 400 !important; } .gb__label .gb__label-sub { font-family: var(--font-sans); font-size: 23px !important; } .gbpanel + .fig__caption, .pairfig__fig > .fig__caption { margin-top: var(--space-s); } @media (max-width: 60rem) { .gb__axis-labels text { font-size: 44px !important; } .gb__axis-labels .gb__extent { font-size: 40px !important; } .gb__region text { font-size: 54px !important; } .gb__region .gb__region-sub { font-size: 40px !important; } .gb__label text { font-size: 48px !important; } .gb__label .gb__label-sub { font-size: 40px !important; } .gb__svg { overflow: visible; } .gbpanel { padding: 1.25rem 1rem 1.75rem; } } /* The judgement grid: its vertical axis label set horizontally above the axis (V-18). */ .judge { grid-template-columns: 2.4rem minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto; } .judge__axis--y { grid-column: 1 / -1; grid-row: 1; writing-mode: horizontal-tb; rotate: none; justify-self: start; align-self: end; margin-bottom: 0.5rem; } .judge__end--yt { grid-column: 1; grid-row: 2; } .judge__end--yb { grid-column: 1; grid-row: 3; } .judge__grid { grid-column: 2; grid-row: 2 / 4; } .judge__end--xl, .judge__end--xr { grid-column: 2; grid-row: 4; } .judge__axis--x { grid-column: 2; grid-row: 5; } .judge__name { font-family: var(--font-display); } .judge__axis { font-size: var(--step-0); } @media (max-width: 48rem) { .judge { grid-template-columns: 1.9rem minmax(0, 1fr); } } /* The climb's two markers, horizontal (V-18). */ .climb__mark--flat { writing-mode: horizontal-tb; rotate: none; translate: -100% -50%; text-align: right; width: 18%; white-space: normal; } .climb__draw { aspect-ratio: 840 / 560; --u: calc(100cqi / 840); } .climb__label { width: 28%; } .climb__name { font-size: calc(var(--u) * 26); } .climb__line { font-size: calc(var(--u) * 19); } .climb__flowword, .climb__mark { font-size: calc(var(--u) * 19); } .climb__mark--flat { width: 15%; } .climb__label { width: 23%; } /* WC-F1 (must fix 7): labels within the card, at 16px or more; "Your organisation" under the ring, on its own key line, between the dot and the person's arm, crossing no line. */ /* The method strip's return at phone width: drawn per stage, from its last stage up to its first, its words at the arrow's turn above stage 01. */ .shape__inlinedepth, .shape__retarrow { display: none; } @media (max-width: 60rem) { .shape__return, .shape--ret4 .shape__return { display: none !important; } .shape__retnote { display: block !important; order: -1; margin: 0 0 0.6rem; padding-left: 3.4rem; font-size: 0.9375rem; font-weight: 600; color: var(--on-charcoal); } .field-light .shape__retnote { color: var(--on-light); } .shape__stages { gap: 1.2rem; } .shape__st.ret-start::after, .shape__st.ret-mid::after, .shape__st.ret-end::after { content: ""; position: absolute; left: -3.35rem; width: var(--line-flow); background: var(--on-charcoal); } .field-light .shape__st.ret-start::after, .field-light .shape__st.ret-mid::after, .field-light .shape__st.ret-end::after { background: var(--charcoal); } .shape__st.ret-start::after { top: 0.85rem; bottom: -1.2rem; } .shape__st.ret-mid::after { top: 0; bottom: -1.2rem; } .shape__st.ret-end::after { top: 0; height: 0.95rem; } .shape__st.ret-end::before { content: ""; position: absolute; left: -3.35rem; top: 0.85rem; width: 0.95rem; height: var(--line-flow); background: var(--on-charcoal); } .field-light .shape__st.ret-end::before { background: var(--charcoal); } .shape__retarrow { display: block; position: absolute; left: -3.35rem; top: 0.85rem; width: 0.95rem; height: var(--line-flow); background: var(--on-charcoal); } .shape__retarrow::after { content: ""; position: absolute; right: -10px; top: 50%; translate: 0 -50%; border: 7px solid transparent; border-left: 10px solid var(--on-charcoal); border-right: 0; } .field-light .shape__retarrow { background: var(--charcoal); } .field-light .shape__retarrow::after { border-left-color: var(--charcoal); } .shape__inlinedepth { display: block; margin-top: 0.6rem; } .shape__inlinedepth .depth { margin-top: 0; } .shape__footdepth { display: none; } } /* Training's format links: separators stay with the link before them. */ .lk { white-space: nowrap; } @media (max-width: 48rem) { .phead__links .lk { display: block; white-space: normal; } .lk__sep { display: none; } } .note--single { grid-template-columns: 1fr; } /* WR-F4: party names on one baseline; the evidence joined to the Peak body. */ .chain__shape { flex: none; } .chain__p { grid-template-rows: 3rem auto auto; align-items: center; } .chain__p > .chain__name, .chain__p > .chain__line { align-self: start; } .chain__evidence::after { display: none; } .chain__riser { position: absolute; left: -1rem; top: 3rem; bottom: -3.8rem; width: var(--line-flow); background: var(--lawn); } .chain__riser::after { content: ""; position: absolute; left: 50%; top: -10px; translate: -50% 0; border: 7px solid transparent; border-bottom: 10px solid var(--lawn); border-top: 0; } .chain__p { position: relative; } .chain__parties { align-items: stretch; } @media (max-width: 64rem) { .chain__p { grid-template-rows: auto; } .chain__riser { left: -2.6rem; top: 1.5rem; bottom: auto; width: 1.9rem; height: var(--line-flow); } .chain__riser::after { left: auto; right: -10px; top: 50%; translate: 0 -50%; border: 7px solid transparent; border-left: 10px solid var(--lawn); border-right: 0; } .chain__evidence span { writing-mode: horizontal-tb; rotate: none; left: 1.4rem; top: auto; bottom: -0.2rem; translate: 0 0; padding: 0; background: none; white-space: nowrap; } } /* WA band 2: "Back again next week" horizontal, at the loop's turn (V-18). */ .loop__back { writing-mode: horizontal-tb; rotate: none; translate: 0 0; position: static; margin-top: 0.6rem; padding: 0; font-size: var(--step--1); background: none; } .loop::before { bottom: 3.1rem; } /* WA-F3's fan: the quiet specialists in Slate, labels at 14px. */ .fan__item { font-size: 0.875rem; } .fan__item::before { background: var(--slate); } /* WT1's flow on the build-strip component: charcoal thread and solid heads, panels with the bite. */ .stages--wt1::before { background: var(--charcoal) !important; height: var(--line-structure); } .stages--wt1 .stage:not(:last-child)::after { border-left-color: var(--charcoal) !important; } .stages--wt1 .stage { grid-template-columns: none; } .stages--wt1 .stage__marker { position: relative; z-index: 1; } .stages--wt1 .stage__num { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 0.3rem var(--white); font-size: var(--step-1); } .stages--wt1 .stage__outcome { --bite-r: 18px; --bite-cut: calc(var(--bite-r) * 1.45); position: relative; overflow: clip; padding: 0.9rem 1rem 1.3rem; border-radius: 0 0.8rem 0 0; -webkit-mask: radial-gradient(circle at 100% 100%, #000 var(--bite-r), transparent calc(var(--bite-r) + 0.5px), transparent var(--bite-cut), #000 calc(var(--bite-cut) + 0.5px)); mask: radial-gradient(circle at 100% 100%, #000 var(--bite-r), transparent calc(var(--bite-r) + 0.5px), transparent var(--bite-cut), #000 calc(var(--bite-cut) + 0.5px)); } .stages--wt1 .stage__outcome::after { content: ""; position: absolute; right: calc(var(--bite-r) * -1); bottom: calc(var(--bite-r) * -1); width: calc(var(--bite-r) * 2); height: calc(var(--bite-r) * 2); border-radius: 50%; background: var(--jacaranda); } .stages--wt1 > .stage:last-child::before { content: ""; position: absolute; right: 0; top: 0.85rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--charcoal); } @media (max-width: 64rem) { .stages--wt1::before { background: var(--charcoal) !important; width: var(--line-structure); } .stages--wt1 .stage { grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: 1rem; } .stages--wt1 .stage > :not(.stage__marker) { grid-column: 2; } .stages--wt1 .stage__marker { grid-row: 1 / span 3; } .stages--wt1 > .stage:last-child::before { right: auto; left: 0.8rem; top: auto; bottom: -1.2rem; } } /* WA's build strip keeps its thread at 390. */ @media (max-width: 64rem) { .stages--wa::before { display: block !important; content: "" !important; } } /* Talks: the two press marks at one visual weight, in one row. */ .speaker__marks { flex-wrap: nowrap; gap: 1.5rem; } .speaker__marks .press__mark { --h: 2.4; width: 8.5rem; } /* Home: the first screen. The week panel aligns to the lead-in; the hero ends sooner. */ .nav__item--has-menu.is-dismissed:focus-within .nav__submenu { opacity: 0; visibility: hidden; } @media (max-width: 60rem) { .gb__label text:first-child { transform: translateY(-22px); } .gb__label .gb__label-sub { transform: translateY(26px); } .gb__region .gb__region-sub { transform: translateY(14px); } } /* Build review r2 fixes */ /* WP-F4 at phone and tablet widths (must fix 2): its own taller drawing, labels at 14 to 24 px. */ .gb__svg--phone { display: none; } @media (max-width: 64rem) { .gbpanel { padding: 0.5rem 0.25rem 0.75rem; } .gb__svg:not(.gb__svg--phone) { display: none; } .gb__svg--phone { display: block; max-width: 26rem; margin-inline: auto; } .gb__svg--phone text { transform: none !important; } .gb__svg--phone .gb__axis-labels text { font-size: 15px !important; } .gb__svg--phone .gb__axis-labels .gb__extent { font-size: 14px !important; } .gb__svg--phone .gb__region text { font-size: 24px !important; } .gb__svg--phone .gb__region .gb__region-sub { font-size: 15px !important; } .gb__svg--phone .gb__label text { font-size: 21px !important; } .gb__svg--phone .gb__label .gb__label-sub { font-size: 14px !important; } } /* WA-F2 at phone width (must fix 1): the panel stacks under the discs, full width; ChatGPT's mark stays inside the column. */ /* WR-F4 at phone width (must fix 3): the gutter's foot runs a step below the last party, and "the evidence" sits beside its turn, clear of every name. */ @media (max-width: 64rem) { .chain { padding-bottom: 4.25rem; } .chain__evidence { bottom: 2rem; } .chain__evidence span { left: 1.5rem; bottom: 0; translate: 0 calc(50% + var(--line-flow) / 2); line-height: 1; } } /* The build strips at phone width (WA band 9, WT1 band 4): one continuous gutter thread, drawn as a segment per stage from its number to the next, with a solid head turned down; each stage only as tall as its words. */ @media (max-width: 64rem) { .stages--wa { --num: 1.9rem; --gap: 1.75rem; --thread: var(--azure); --tw: var(--line-flow); row-gap: var(--gap); } .stages--wt1 { --num: 2.4rem; --thread: var(--charcoal); --tw: var(--line-structure); margin-bottom: 2.75rem; } .stages--wa::before { display: none !important; } .stages--wa .stage { grid-row: auto; grid-template-rows: none; grid-template-columns: var(--num) minmax(0, 1fr); column-gap: 1rem; row-gap: 0.4rem; padding-bottom: 0; position: relative; align-content: start; } .stages--wa .stage > * { grid-column: 2; } .stages--wa .stage > :first-child { grid-column: 1; grid-row: 1 / span 4; align-self: start; } .stages--wa .stage__marker { height: auto; padding: 0; border-bottom: 0; align-items: flex-start; } .stages--wa .stage__title { margin-top: 0.2rem; } .stages--wa .stage__body, .stages--wa .stage__outcome { margin-top: 0; } .stages--wa .stage:not(:last-child)::before { content: ""; position: absolute; left: calc(var(--num) / 2 - var(--tw) / 2); top: calc(var(--num) / 2); bottom: calc(var(--gap) * -1); width: var(--tw); background: var(--thread); } .stages--wa .stage:not(:last-child)::after { display: block; content: ""; position: absolute; left: calc(var(--num) / 2 - 7px); right: auto; top: auto; bottom: calc(var(--gap) * -1 + 0.2rem); border: 7px solid transparent; border-top: 10px solid var(--thread); border-bottom: 0; border-left-color: transparent !important; } .stages--wa .stage__marker::after { display: none !important; } .stages--wt1 > .stage:last-child .stage__marker { position: static; } .stages--wt1 > .stage:last-child::after { display: block; content: ""; position: absolute; left: calc(var(--num) / 2 - var(--tw) / 2); top: calc(var(--num) / 2); bottom: -1.4rem; width: var(--tw); background: var(--thread); border: 0; } .stages--wt1 > .stage:last-child::before { left: calc(var(--num) / 2 - 0.4rem); right: auto; top: auto; bottom: -1.8rem; } } /* WA-F1: the training flow's words sit beyond the website line, keyed to their line by a sunshine swatch. */ .sysfig__flowlabel--keyed { display: flex; align-items: center; gap: calc(var(--u) * 10); } .sysfig__flowkey { flex: none; width: calc(var(--u) * 26); height: calc(var(--u) * 5); background: var(--sunshine); } /* WA band 6 (should fix 5): the caption, then WA-D4, directly under the two sheets, across the left and middle columns, beside the hanging prompt. */ /* WA-F3 (should fix 11): "The brain" drops clear of its dot. */ @media (min-width: 64.0625rem) { .job__brain-name { bottom: -0.95rem; } } /* WA band 2 (consider 12): the loop's lower turn runs level with "Back again next week", which starts at the line. */ .loop::before { bottom: calc(0.66rem - var(--line-flow) / 2); } .loop__back { margin-left: -0.85rem; line-height: 1.3; } /* WA band 4 (consider 13): the inputs spread down the words, "Experiences" beside the paragraph on the everyday. */ @media (min-width: 64.0625rem) { .brain__row { align-items: stretch; } } /* Round 3 touches: WC-F1 drawn larger and centred against the left column; Research's chart labels at the 13 px floor at 390. */ @media (max-width: 40rem) { .ch__end, .ch__lab, .ch__gaplab { font-size: 18px; } } /* ================================================================== ROUND 2 (29 Oct 2026): Home in full, and what spreads from it. ================================================================== */ /* R2.1 The hero: type first (the umbrella H1, the doing statement, the specialism line), the services door at its foot. The big mark sits quiet behind it, cropped by the top and right edges; only the jacaranda arm and the dot are lit, and the arm leaves by the right edge above the door. */ .hero2 { --mk: clamp(30rem, 54vw, 50rem); /* the mark's size */ position: relative; overflow: hidden; background: var(--mist); color: var(--on-light); padding-block: clamp(2.5rem, 4.4vw, 4rem) clamp(2.5rem, 4vw, 3.5rem); } .hero2__mark.pmark { height: var(--mk); width: var(--mk); left: auto; top: auto; transform: none; right: calc(var(--mk) * -0.24); top: calc(var(--mk) * -0.37); } .hero2__inner { position: relative; z-index: 1; } @media (max-width: 48rem) { /* The mark whole and small at the hero's top right, beside the H1's first line (W-13). */ .hero2__mark.pmark { width: 2.6rem; height: 2.6rem; right: clamp(1.25rem, 5vw, 3rem); top: 2.2rem; } .hero2__title::before { content: ""; float: right; width: 3.4rem; height: 2.2rem; } .door__strip { font-size: 1.2rem; } } .hero2__text { display: grid; gap: clamp(1rem, 1.6vw, 1.4rem); justify-items: start; max-width: 62rem; } .hero2__title { font-size: clamp(2.4rem, 1.1rem + 3.6vw, 4.1rem); line-height: 1.08; max-width: 24ch; color: var(--on-light); text-wrap: balance; } .hero2__doing { font-family: var(--font-display); font-size: clamp(1.35rem, 0.95rem + 1.25vw, 2rem); line-height: 1.28; color: var(--on-light); max-width: 42ch; margin: 0; text-wrap: pretty; } .hero2__spec { font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3rem); line-height: 1.5; color: var(--charcoal); max-width: 58ch; margin: 0; } /* R2.2 The services door: one panel, one corner bite (its dot charcoal), a charcoal strip that leads, three abutting solid fields in nav order. */ .door { position: relative; margin-top: clamp(1.75rem, 3.2vw, 2.75rem); display: grid; } .door a { text-decoration: none; } .door a:focus-visible { outline: 3px solid var(--charcoal); outline-offset: -6px; } .door__strip { display: flex; align-items: center; gap: 0.85rem; padding: 0.95rem clamp(1.1rem, 2vw, 1.6rem); background: var(--charcoal); color: var(--on-charcoal); font-family: var(--font-display); font-size: clamp(1.3rem, 1.05rem + 0.75vw, 1.75rem); line-height: 1.2; border-radius: 0 1.2rem 0 0; } .door__strip .smark { --m-quiet: var(--charcoal-raised); width: 2rem; height: 2rem; min-width: 0; min-height: 0; } .door__strip:focus-visible { outline-color: var(--white); } .door__lead { flex: 1; text-wrap: balance; } .door__arrow { display: inline-block; transition: transform 0.3s var(--ease); } .door__strip .door__arrow { font-family: var(--font-sans); } .door__parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .door a:hover .door__lead { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } .door a:hover .door__arrow { transform: translateX(4px); } @media (max-width: 48rem) { .door__parts { grid-template-columns: 1fr; } } /* R2.3 Who we work with: the band's head and its link (the cards are R3.2). */ .spaces__head { display: grid; gap: var(--space-s); margin-bottom: clamp(2rem, 3.6vw, 3rem); } .spaces__head .section-lead { font-size: var(--step-1); line-height: 1.45; color: var(--slate); max-width: 46ch; } .spaces__more { margin-top: var(--space-m); } /* R2.4 The system band, text first: heading and body left, the figure right, the leap-off links under the text; one column below 78rem (heading, body, the figure's list, then the links). */ .wsys--r2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "text fig" "links fig"; align-items: center; row-gap: var(--space-m); } .wsys--r2 .wsys__text { grid-area: text; align-self: end; } .wsys--r2 .wsys__fig { grid-area: fig; } .wsys--r2 .wsys__links { grid-area: links; align-self: start; margin-top: 0; } @media (max-width: 78rem) { .wsys--r2 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "fig" "links"; } } .sysfig__name--ja { color: var(--jacaranda); } /* R2.5 Why us: the eyebrow is plain text at body size (house rule 1). */ /* R2.6 Proof: the organisations by logo, QAMH first, in their own colours and optically balanced (equal weight, not equal height), sharing one baseline; the voices apart on their own Mist panel, on an offset grid so no quote reads as the caption of a logo above it. */ .proof__title { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); } .orgs { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); } .orgs a { display: grid; grid-template-rows: auto 1fr; gap: 1.1rem; color: var(--on-light); text-decoration: none; height: 100%; } :root { --logo-qamh: 4.6rem; --logo-thiess: 2.15rem; --logo-uq: 3.8rem; } /* one optical size per logo, site-wide (V-23) */ @media (max-width: 60rem) { :root { --logo-thiess: 1.8rem; --logo-uq: 3.1rem; } } /* QAMH keeps its size, so its tagline stays legible */ .orgs__logo { display: flex; align-items: flex-end; height: var(--logo-qamh); } .orgs__logo img { width: auto; max-width: 100%; object-fit: contain; object-position: left bottom; } .orgs__logo--qamh img, .worked__logo.orgs__logo--qamh img, .proof__logo--qamh { height: var(--logo-qamh); } .orgs__logo--thiess img, .worked__logo.orgs__logo--thiess img, .proof__logo--thiess { height: var(--logo-thiess); } .orgs__logo--uq img, .worked__logo.orgs__logo--uq img { height: var(--logo-uq); } .orgs__logo--thiess img { margin-bottom: 0.3rem; } .orgs__line { font-size: var(--step--1); line-height: 1.5; padding-top: 0.9rem; border-top: var(--line-ground) solid var(--mist-deep); max-width: 40ch; } .orgs__line strong { font-size: var(--step-0); font-weight: 600; } .orgs a:hover strong { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; } .orgs .btn__arrow { display: inline-block; transition: transform 0.3s var(--ease); } .orgs a:hover .btn__arrow { transform: translateX(4px); } .voicespanel { --bite-r: 24px; --bite-cut: calc(var(--bite-r) * 1.45); position: relative; overflow: clip; margin-top: clamp(2.5rem, 4.5vw, 3.75rem); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-m) clamp(1.5rem, 3vw, 3rem); padding: clamp(1.5rem, 2.8vw, 2.4rem) clamp(1.5rem, 2.8vw, 2.4rem) clamp(2.2rem, 3.4vw, 2.8rem); background: var(--mist); -webkit-mask: radial-gradient(circle at 100% 100%, #000 var(--bite-r), transparent calc(var(--bite-r) + 0.5px), transparent var(--bite-cut), #000 calc(var(--bite-cut) + 0.5px)); mask: radial-gradient(circle at 100% 100%, #000 var(--bite-r), transparent calc(var(--bite-r) + 0.5px), transparent var(--bite-cut), #000 calc(var(--bite-cut) + 0.5px)); } .voicespanel::after { content: ""; position: absolute; right: calc(var(--bite-r) * -1); bottom: calc(var(--bite-r) * -1); width: calc(var(--bite-r) * 2); height: calc(var(--bite-r) * 2); border-radius: 50%; background: var(--jacaranda); } .voicespanel__head { display: grid; gap: 0.4rem; align-content: start; } .voicespanel__lead { font-size: var(--step--1); line-height: 1.5; color: var(--slate); margin: 0; } .voicespanel .voices3 p { font-size: var(--step-0); } @media (max-width: 60rem) { .orgs { grid-auto-flow: row; grid-auto-columns: auto; gap: 1.75rem; } .orgs__logo { height: auto; } .orgs__logo--thiess img { margin-bottom: 0; } .voicespanel { grid-template-columns: 1fr; } } /* The brief figure's labels at their shapes: jacaranda names at 24px or more at 1440 (jacaranda on charcoal is for large type only); every secondary label at 14px or more at 1440. */ .sysfig--brief .sysfig__name--ja { font-size: calc(var(--u) * 33.5); line-height: 1.12; } .sysfig--brief .sysfig__flowlabel--in { font-size: calc(var(--u) * 19.6); line-height: 1.28; } .sysfig--brief .sysfig__flowlabel { font-size: calc(var(--u) * 20); } .sysfig--brief .sysfig__label--knowjob .sysfig__job { font-size: calc(var(--u) * 20.5); line-height: 1.4; margin-top: 0 !important; } /* R2.7 Team's record (WM-B8): a logo slot at each row's left, one fixed width down the list, the logos balanced as on Home's proof band; the descriptive rows (no named organisation) leave the slot empty. */ .worked li > a, .worked li > div { grid-template-columns: clamp(8.5rem, 12vw, 10.5rem) minmax(0, 4fr) minmax(0, 7fr) 1.5rem; align-items: center; } .worked__logo { display: flex; align-items: center; min-height: 2.5rem; } .worked__logo img { width: auto; max-width: 100%; object-fit: contain; object-position: left center; } .worked li > div::after { content: ""; } /* the arrow column stays, so lines align */ @media (max-width: 48rem) { .worked li > a, .worked li > div { grid-template-columns: minmax(0, 1fr) 1.5rem; align-items: baseline; } .worked__logo { grid-column: 1 / -1; min-height: 0; margin-bottom: 0.4rem; } .worked__logo--none { display: none; } } /* R2.8 Not-for-profits, band 2 in two chunks: 2a for every reader; one fine rule; 2b labelled for peak bodies and advocacy organisations, its minor head smaller in the rail, its display line and quote both lighter than the band's heading and section 7's quote. */ .hinge--r2 { align-items: start; row-gap: 0; } .hinge--r2 > .hinge__title { grid-row: 1; } .hinge__sub{ grid-row: 3; padding-top: clamp(1.75rem, 3.2vw, 2.5rem); } .hinge__sub { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.45rem); line-height: 1.2; color: var(--on-light); max-width: 16ch; margin: 0; } .hinge__quote { margin: var(--space-xs) 0 0; display: grid; gap: 0.6rem; } .hinge__quote p { font-style: italic; font-size: var(--step-1); line-height: 1.45; max-width: 52ch; } .hinge__quote footer { font-size: var(--step--1); color: var(--slate); } @media (max-width: 52rem) { .hinge--r2 > .hinge__title, .hinge__sub{ grid-row: auto; } .hinge--r2 { row-gap: var(--space-s); } .hinge__sub { padding-top: var(--space-s); } } [data-gate-d19="off"] [data-gate="d19"] { display: none; } /* WN-F1's audience marker: who the row is for, quiet Slate text under the problem; never an offer colour, pill or marker. */ /* WN-B18: QAMH's logo at the shared optical size (Home's proof, Team). */ .proof__logo--qamh { mix-blend-mode: normal; } /* WW-F1 at its shapes (round 2): the same placement as Home's figure. */ .sysfig--full .sysfig__name--ja { font-size: calc(var(--u) * 28.5); line-height: 1.12; } .sysfig--full .sysfig__label--knowjob .sysfig__job { font-size: calc(var(--u) * 18); line-height: 1.4; margin-top: 0 !important; } /* R2.9 WA section 8 in its new order: the heading alone on the left, top- aligned with WA-B24 at lead size; Ryan's line below it, a step up. */ /* Thiess's logo at the shared optical size (Home's proof, Team), on WCO-B6 and WTO-B6. */ .proof__logo--thiess { mix-blend-mode: normal; } /* Review r1 (should-fixes): proof at phone width puts the rule above each logo and opens the space between items; with QAMH off at 1440 the pair sits centred. */ @media (max-width: 60rem) { .orgs { gap: 2.25rem; } .orgs a { padding-top: 1.1rem; border-top: var(--line-ground) solid var(--mist-deep); gap: 0.8rem; } .orgs__line { border-top: 0; padding-top: 0; } } @media (min-width: 60.0625rem) { [data-gate-qamh="off"] .orgs { max-width: 66%; margin-inline: auto; } } /* ================================================================== ROUND 3 (1 Nov 2026): the combined build. Round 2's words and structure, with brand-creative's photographic warmth. ================================================================== */ /* R3.1 The photo card: one component for Home's service doors, the audience cards and Training's formats. A monochrome photo carrying the card's tint, the body in the card's colour, the dark pill, a heading with one brushed word, the link, the corner bite. Set the ground with a modifier: --az, --su, --la (a service's own colour), --charcoal or --mist (neutral; no service colour reaches these). Real photographs from engagements replace /images/cards/ as they arrive. */ .pcard { --ground: var(--mist); --ink: var(--on-light); --tint: var(--slate); --tint-strength: 0.4; --dot: var(--jacaranda); --photo-h: clamp(10rem, 13vw, 11.5rem); --bite-r: 24px; --bite-cut: calc(var(--bite-r) * 1.45); position: relative; overflow: clip; height: 100%; display: flex; flex-direction: column; background: var(--ground); color: var(--ink); text-decoration: none; border-radius: 0 0 0 1.2rem; -webkit-mask: radial-gradient(circle at 100% 100%, #000 var(--bite-r), transparent calc(var(--bite-r) + 0.5px), transparent var(--bite-cut), #000 calc(var(--bite-cut) + 0.5px)); mask: radial-gradient(circle at 100% 100%, #000 var(--bite-r), transparent calc(var(--bite-r) + 0.5px), transparent var(--bite-cut), #000 calc(var(--bite-cut) + 0.5px)); } .pcard::after { content: ""; position: absolute; right: calc(var(--bite-r) * -1); bottom: calc(var(--bite-r) * -1); width: calc(var(--bite-r) * 2); height: calc(var(--bite-r) * 2); border-radius: 50%; background: var(--dot); z-index: 1; } .pcard--az { --ground: var(--azure); --ink: var(--charcoal); --tint: var(--azure); --dot: var(--charcoal); } .pcard--su { --ground: var(--sunshine); --ink: var(--charcoal); --tint: var(--sunshine); --dot: var(--charcoal); } .pcard--la { --ground: var(--lawn); --ink: var(--charcoal); --tint: var(--lawn); --dot: var(--charcoal); } .pcard--charcoal { --ground: var(--charcoal); --ink: var(--on-charcoal); --tint: var(--jacaranda); --tint-strength: 0.55; } .pcard__photo { position: relative; display: block; flex: none; height: var(--photo-h); background: var(--ground); } .pcard__photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); } .pcard__photo::after { content: ""; position: absolute; inset: 0; background: var(--tint); mix-blend-mode: multiply; opacity: var(--tint-strength); } .pcard__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 0 clamp(1.1rem, 1.8vw, 1.5rem) calc(var(--bite-r) + 0.9rem); } .pcard__pill { position: relative; z-index: 1; margin-top: -0.95rem; padding: 0.42em 0.8em 0.38em; border-radius: 0 0.5rem 0 0.5rem; background: var(--charcoal); color: var(--white); font-family: var(--font-sans); font-size: var(--step--2); font-weight: 700; letter-spacing: 0.14em; line-height: 1.2; text-transform: uppercase; } .pcard--charcoal .pcard__pill { background: var(--jacaranda); color: var(--charcoal); } .pcard--nopill .pcard__body { padding-top: clamp(1rem, 1.6vw, 1.35rem); } .pcard__title { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25; color: inherit; margin: 0; } .pcard__title a { color: inherit; text-decoration: none; } .pcard__sub { font-size: clamp(1.125rem, 1rem + 0.25vw, 1.25rem); line-height: 1.4; color: inherit; } .pcard__line { font-size: var(--step-0); line-height: 1.5; color: inherit; max-width: 44ch; margin: 0; } .pcard--charcoal .pcard__line { color: var(--on-charcoal-soft); } .pcard__more { margin-top: auto; padding-top: 0.35rem; font-weight: 700; font-size: var(--step--1); letter-spacing: 0.03em; } .pcard__more .btn__arrow { display: inline-block; transition: transform 0.3s var(--ease); } .pcard:hover .pcard__more .btn__arrow { transform: translateX(4px); } .pcard:hover .pcard__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } .pcard:focus-visible { outline: 3px solid var(--charcoal); outline-offset: -6px; } .pcard--charcoal:focus-visible { outline-color: var(--white); } .door__parts .pcard { --photo-h: clamp(9.5rem, 12vw, 11rem); border-radius: 0; } .door__parts li:first-child .pcard { border-bottom-left-radius: 1.2rem; } @media (max-width: 48rem) { .door__parts li:first-child .pcard { border-bottom-left-radius: 0; } .door__parts li:last-child .pcard { border-bottom-left-radius: 1.2rem; } } @media (prefers-reduced-motion: reduce) { .pcard__more .btn__arrow { transition: none; } } /* The lead card, wide: the photo beside the words, with an optional foot across the card (the index's service list). */ @media (min-width: 48.0625rem) { .pcard--wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } .pcard--wide .pcard__photo { height: auto; min-height: 100%; } .pcard--wide .pcard__photo img { position: absolute; inset: 0; } .pcard--wide .pcard__body { padding-block: clamp(1.4rem, 2.6vw, 2.2rem); padding-right: clamp(1.4rem, 3vw, 2.5rem); justify-content: center; } .pcard--wide .pcard__pill { margin-top: 0; } } .pcard--wide .pcard__title { font-size: clamp(1.8rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.12; } .pcard__foot { grid-column: 1 / -1; display: grid; gap: var(--space-m); padding: var(--space-m) clamp(1.1rem, 2.6vw, 2.2rem) calc(var(--bite-r) + 1.4rem); border-top: var(--line-ground) solid var(--charcoal-raised); } .pcard__join { font-size: var(--step-0); line-height: 1.5; color: var(--on-charcoal-soft); max-width: 62ch; margin: 0; } .pcard__links { display: grid; gap: 0.6rem; justify-items: start; margin: 0; } .pcard__more--strong { font-size: var(--step-0); } .pcard__combo { display: grid; gap: 0.9rem; margin-block: 0.4rem 0.6rem; } .pcard--charcoal .arrow-link { color: var(--on-charcoal); } /* R3.2 The audience cards: the lead across the band, three below. */ .acards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.4vw, 1.1rem); } .acards__lead { grid-column: 1 / -1; } .acards .pcard:not(.pcard--wide) .pcard__title { font-size: var(--step-2); line-height: 1.15; } .acards .pcard__line { max-width: 40ch; } @media (max-width: 64rem) { .acards { grid-template-columns: minmax(0, 1fr); } } /* The figure's flow labels hold the 14 px floor as the figure scales down. */ .sysfig--brief .sysfig__flowlabel { font-size: max(14px, calc(var(--u) * 20)); } .sysfig--brief .sysfig__flowlabel--in { font-size: max(14px, calc(var(--u) * 19.6)); } /* R3.3 Training's formats: the photo card, the flagship running larger. Sunshine for the flagship and white for the others: azure and lawn mean other services, so 8000's coloured formats don't carry over. */ .pformats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(0.75rem, 1.4vw, 1.1rem); } .pformats .pcard { --photo-h: clamp(10.5rem, 14vw, 13rem); } .pformats .pcard__title { font-size: var(--step-2); line-height: 1.15; } .pformats .pcard--flag .pcard__title { font-size: clamp(1.8rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.1; } .pcard--white { --ground: var(--white); } @media (max-width: 64rem) { .pformats { grid-template-columns: minmax(0, 1fr); } } /* R3.4 One charcoal block per page (test 6): where a page already has its charcoal band, its figure sits on white and the same figure's tokens turn over. */ .fig__panel--light { --on-charcoal: var(--on-light); --on-charcoal-soft: var(--slate); --charcoal-raised: var(--mist-deep); --link-on-charcoal: var(--deep-jacaranda); --charcoal: var(--white); /* the chips behind a figure's line labels */ background: var(--white); color: var(--on-light); } /* A lone card isn't a set: the panel-card reads as part of its band. */ .panel-card.panel-card--band { background: none; -webkit-mask: none; mask: none; padding: var(--space-s) 0 0; border-top: 2px solid var(--charcoal); border-radius: 0; } .panel-card.panel-card--band::after { display: none; } .panel-card--band p { color: var(--on-light); } /* One reading column on the page's left edge, as every other section starts. */ /* R3.5 Why us: one block everywhere. The words on the left, the people on the right; --claims is Home's fuller form, its people stacked beside two claims. */ .peopleband { grid-template-columns: minmax(0, 1fr) auto; } .peopleband__cards { order: 2; } .peopleband--claims { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } .peopleband--claims .peopleband__text { gap: 0; } .peopleband--claims .display-m { margin-bottom: var(--space-m); } .peopleband--claims .peopleband__cards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding-top: 0.5rem; } .peopleband--claims .person { width: auto; grid-template-columns: 8.5rem minmax(0, 1fr) !important; gap: 1.25rem; align-items: center; } .peopleband--claims .person__name { font-size: var(--step-1); } .peopleband__block { padding-block: 1rem 1.1rem; border-top: var(--line-ground) solid var(--mist-deep); } .peopleband__block strong { font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); display: block; margin-bottom: 0.3rem; } .peopleband__eyebrow { font-size: var(--step-0); color: var(--charcoal); margin: 0 0 0.5rem; } @media (max-width: 60rem) { .peopleband--claims { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 48rem) { .peopleband { grid-template-columns: minmax(0, 1fr); } .peopleband__cards { order: 0; } } /* Organisations' In practice: one engagement, in the band, its context beside its voices. */ .practice--1 .practice__card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-m) clamp(2rem, 4vw, 4rem); align-items: start; } .practice__intro, .practice__voices { display: grid; gap: var(--space-s); justify-items: start; } @media (max-width: 60rem) { .practice--1 .practice__card { grid-template-columns: minmax(0, 1fr); } } .fig__panel--light .judge__clear { background: var(--white); } .fig__panel--light .judge__clear .judge__name { color: var(--on-light); } /* The Science's images keep their entries, in the brand's treatment: never a raw colour photograph (test 5), neutral so no service colour leaks. */ img[src*="/images/science-"] { filter: grayscale(1) contrast(1.08); } /* The growth band's words and axes, on the light panel. */ .fig__panel--light .gb__axes { stroke: var(--on-light); } .fig__panel--light :is(.gb__region text, .gb__label text) { fill: var(--on-light); } .fig__panel--light .gb__mark path[fill="#FFFFFF"] { fill: var(--on-light); } /* A gate outranks every layout rule: .peopleband .person sets display after the gate's own rule did, so David's card stayed on with his gate off. */ [data-gate-david="off"] [data-gate="david"] { display: none !important; } /* The bar's dropdowns: the hover bridge belongs to the panel, so it spans the panel's full width and reaches up to the bar item, across the 1.05rem gap. */ @media (min-width: 76.0625rem) { .nav__submenu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 1.2rem; } } /* WP-F: the climb's labels. The drawing keeps its rings and takes a longer label column; below 76rem the figure takes the full width over the text, then the phone list. */ .climb { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } .climb__draw { aspect-ratio: 960 / 560; --u: calc(100cqi / 960); } .climb__label { width: 32%; } .climb__name { font-size: max(18px, calc(var(--u) * 26)); } .climb__line { font-size: max(14px, calc(var(--u) * 19)); } .climb__flowword, .climb__mark { font-size: max(14px, calc(var(--u) * 19)); } .climb__flowword { width: 12.5%; } /* three short lines, inside the outer ring */ .climb__mark--flat { width: 13.1%; } .climb__fig .fig__caption { margin-top: var(--space-m); } @media (max-width: 76rem) { .climb { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 60rem) { .climb__draw { overflow: clip; } .climb__svg { translate: 9.4% 0; } } /* the rings centred, with no label column beside them */ /* R3.6 Why you come first: one block. The general claim, then the peak-body specificity and the quote, in one text column beside the heading. */ .hinge__peak { display: grid; gap: var(--space-xs); justify-items: start; margin-top: var(--space-xs); } .hinge__peak .hinge__sub { grid-row: auto; padding-top: 0; max-width: none; font-size: var(--step-1); } .hinge__peak .hinge__quote { margin-top: 0; } .hinge__peak .hinge__quote p { font-size: var(--step-1); } /* R3.7 The problem grid: ten cards in two rows, chunked by their five groups with a label and a rule, neutral so the colour stays with the markers. The card opens its answer in a panel under its row. Without JavaScript the answers show in their cards. */ .qgrid { --qgap: clamp(0.5rem, 0.9vw, 0.75rem); display: grid; gap: clamp(1.5rem, 2.6vw, 2.25rem); } .qrow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1.5rem, 2.6vw, 2.25rem) var(--qgap); } .qgroup { grid-column: span var(--n); display: grid; grid-template-rows: auto 1fr; gap: 0.6rem; padding-top: 0.6rem; border-top: var(--line-structure) solid var(--slate); } .qgroup__label { font-family: var(--font-sans); font-size: var(--step-0); font-weight: 600; line-height: 1.3; color: var(--on-light); margin: 0; } .qgroup__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--qgap); } .qcard { display: flex; flex-direction: column; min-width: 0; scroll-margin-top: 5.5rem; } .qcard__q { flex: 1; margin: 0; font: inherit; } .qcard__btn { --bite-r: 13px; --bite-cut: calc(var(--bite-r) * 1.45); position: relative; overflow: clip; width: 100%; height: 100%; min-height: 13.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1rem 1rem calc(var(--bite-r) + 0.55rem); background: var(--white); color: var(--on-light); border: 0; border-radius: 0 0.9rem 0 0.9rem; font-family: var(--font-sans); text-align: left; cursor: pointer; -webkit-mask: radial-gradient(circle at 100% 100%, #000 var(--bite-r), transparent calc(var(--bite-r) + 0.5px), transparent var(--bite-cut), #000 calc(var(--bite-cut) + 0.5px)); mask: radial-gradient(circle at 100% 100%, #000 var(--bite-r), transparent calc(var(--bite-r) + 0.5px), transparent var(--bite-cut), #000 calc(var(--bite-cut) + 0.5px)); } .qcard__btn::after { content: ""; position: absolute; right: calc(var(--bite-r) * -1); bottom: calc(var(--bite-r) * -1); width: calc(var(--bite-r) * 2); height: calc(var(--bite-r) * 2); border-radius: 50%; background: var(--slate); } .qcard__text { font-family: var(--font-display); font-size: clamp(1.15rem, 0.95rem + 0.42vw, 1.3rem); line-height: 1.25; } .qcard__aud { font-size: var(--step--1); line-height: 1.3; color: var(--slate); } .qcard__cue { margin-top: auto; padding-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--step--1); font-weight: 600; } .qcard__cue .depth__marker { --c: currentColor; width: 1.1rem; height: 1.1rem; } .qcard__cue .depth__marker::before { width: 0.38rem; height: 0.38rem; top: calc(50% - 0.19rem); } .qcard__cue .depth__marker::after { left: 0.38rem; height: 0.24rem; top: calc(50% - 0.12rem); } .qcard__btn:hover .qcard__text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; } .qcard__btn:focus-visible { outline: 3px solid var(--deep-jacaranda); outline-offset: -3px; } .qcard__btn[aria-expanded="true"] { background: var(--charcoal); color: var(--on-charcoal); } .qcard__btn[aria-expanded="true"] .qcard__aud { color: var(--on-charcoal-soft); } .qcard__btn[aria-expanded="true"] .depth__marker { transform: rotate(90deg); } .qcard__btn[aria-expanded="true"]::after { background: var(--on-charcoal-soft); } .qcard__btn[aria-expanded="true"]:focus-visible { outline-color: var(--white); } .qrow__slot { grid-column: 1 / -1; } .qpanel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-s) clamp(2rem, 4vw, 3.5rem); padding: clamp(1.1rem, 2vw, 1.75rem) clamp(1.1rem, 2.4vw, 2rem); background: var(--white); border-top: var(--line-structure) solid var(--charcoal); } .js .qpanel { display: none; } .js .qpanel.is-open { display: grid; } .qpanel__label { font-size: var(--step--1); font-weight: 600; color: var(--slate); margin: 0 0 0.35rem; } .qpanel__looks p:not(.qpanel__label) { font-size: var(--step-0); line-height: 1.6; color: var(--on-light); max-width: 46ch; margin: 0; } .qpanel__answer { display: grid; justify-items: start; gap: 0.2rem; } .qpanel__answer .pa__a { max-width: 60ch; } @media (prefers-reduced-motion: reduce) { .qcard__cue .depth__marker { transition: none; } } /* The grid's close: the caption, then the payoff beside its paragraph. */ .qgrid + .pa__close { margin-left: 0; margin-top: var(--space-s); border-top: 0; padding-top: 0; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-s) clamp(2rem, 4vw, 3.5rem); align-items: start; } .qgrid + .pa__close .fig__caption, .qgrid + .pa__close .pa__close-link { grid-column: 1 / -1; } .qgrid + .pa__close .pa__close-link { grid-column: 2; } @media (max-width: 48rem) { .qgrid + .pa__close { grid-template-columns: minmax(0, 1fr); } .qgrid + .pa__close .pa__close-link { grid-column: auto; } } @media (max-width: 72rem) { /* The cards stack, two across, and open in place as an accordion. */ .qrow { grid-template-columns: minmax(0, 1fr); } .qgroup { grid-column: auto; } .qgroup__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qcard:last-child:nth-child(odd), .qcard.is-open { grid-column: 1 / -1; } .qcard__btn { min-height: 11rem; } .qcard .qpanel { margin-top: 0.1rem; } } @media (max-width: 48rem) { .qgroup__cards { grid-template-columns: minmax(0, 1fr); } .qcard__btn { min-height: 0; } .qpanel { grid-template-columns: minmax(0, 1fr); } } /* Without JavaScript: every problem with its answer, one card a row; the cards aren't controls, so they carry no cue. */ html:not(.js) .qrow { grid-template-columns: minmax(0, 1fr); } html:not(.js) .qgroup { grid-column: auto; } html:not(.js) .qgroup__cards { grid-template-columns: minmax(0, 1fr); } html:not(.js) .qcard__btn { min-height: 0; cursor: default; padding-bottom: 0.25rem; -webkit-mask: none; mask: none; pointer-events: none; } html:not(.js) .qcard__btn::after, html:not(.js) .qcard__cue { display: none; } /* R3.8 Your day, twice: two bars, each a day from 9 am to 5 pm, by hand above, with the system below. The system's work is the strip above its bar, outside the day. Below 64rem the titles sit above the bars; on a phone the labels move below them. */ .days-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-m) var(--space-xl); align-items: end; } .days__legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, auto); gap: 0.55rem 1.5rem; font-size: var(--step--1); color: var(--on-light); } .days__key { display: flex; align-items: center; gap: 0.55rem; } .days { display: grid; gap: 1rem; } .day p { max-width: none; } .day { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: 1.25rem; } .days__title { grid-column: 1; grid-row: 2; align-self: center; font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); line-height: 1.2; color: var(--on-light); margin: 0; } .day__strip { grid-column: 2; grid-row: 1; margin: 0 0 0.3rem; padding: 0.15rem 0.75rem; background: var(--azure); border-radius: 0 0.4rem 0 0.4rem; font-size: var(--step--1); line-height: 1.3; font-weight: 600; color: var(--charcoal); } .day__bar { grid-column: 2; grid-row: 2; list-style: none; margin: 0; padding: 0; height: 3.25rem; display: flex; gap: 3px; border-radius: 0 0.6rem 0 0.6rem; overflow: hidden; } .day__seg { flex: var(--g) 1 0; min-width: 0; display: flex; align-items: center; padding-inline: 0.75rem; font-size: var(--step--1); line-height: 1.25; color: var(--charcoal); } .day__seg--desk { background: var(--mist-deep); } .day__seg--review { background: var(--jacaranda-soft); padding: 0; } .day__seg--people { background: var(--jacaranda); color: var(--charcoal-deep); font-weight: 600; } .day__ticks, .day__note { grid-column: 2; grid-row: 3; margin: 0.3rem 0 0; font-size: var(--step--1); line-height: 1.3; } .day__ticks { display: flex; justify-content: space-between; color: var(--slate); } .day__note { justify-self: center; text-align: center; padding-inline: 3.5rem; color: var(--on-light); } .day__names { display: none; } #your-day-twice .fig__caption { margin-top: 0.75rem; } @media (max-width: 64rem) { .days-intro { grid-template-columns: minmax(0, 1fr); align-items: start; } .day { grid-template-columns: minmax(0, 1fr); } .days__title { grid-row: 1; margin-bottom: 0.4rem; } .day__strip, .day__bar, .day__ticks, .day__note { grid-column: 1; } .day__strip { grid-row: 2; } .day__bar { grid-row: 3; } .day__ticks, .day__note { grid-row: 4; } } @media (max-width: 48rem) { .days { gap: 1.5rem; } .day > * { grid-row: auto; } .day__bar { height: 2.5rem; } .day__seg { padding: 0; } .day__seg span { display: none; } .day__names { display: block; margin: 0.3rem 0 0; font-size: var(--step--1); line-height: 1.4; color: var(--on-light); } .day__note { justify-self: start; text-align: left; padding-inline: 0; color: var(--slate); } } /* R3.9 The imagination band: the seam, two grounds split at the arm's angle. A square anchored bottom right holds the jacaranda triangle, the dot on the seam's midpoint and the ripples, so a long open expander can't push the seam under the text. Below 64rem the seam goes level, text then image. */ .seamband { --seam: clamp(30rem, 46vw, 44rem); position: relative; overflow: hidden; min-height: var(--seam); display: flex; align-items: center; } .seamband > .container { position: relative; z-index: 1; width: 100%; } .seamband .imagination { margin-top: 0; padding-top: 0; border-top: 0; max-width: min(38rem, calc(100vw - var(--seam) - 7rem)); } .seamband .imagination > p { color: var(--on-charcoal); } .seamband .depth__h { color: var(--on-charcoal); } .seamband .gap__num { color: var(--on-charcoal); } .seamband .gap__bar { background: var(--charcoal-raised); } .seamband .gap__bar i { background: var(--on-charcoal); } .seamband .gap__line { color: var(--on-charcoal-soft); } .seamband .depth__body .fig__caption { font-size: var(--step--1); color: var(--on-charcoal-soft); } .seam { display: block; } .seam--wide { position: absolute; right: 0; bottom: 0; width: var(--seam); height: var(--seam); } .seam--phone { display: none; width: 100%; height: auto; margin-top: var(--space-m); } .seam__ground { fill: var(--jacaranda); } .seam__dot { fill: var(--white); } .seam__rip circle { fill: none; stroke: var(--mist); stroke-width: 2; vector-effect: non-scaling-stroke; } .seam__rip--dark { opacity: 0.42; } .seam__rip--lit { opacity: 0.5; } @media (max-width: 64rem) { .seamband { display: block; min-height: 0; padding-bottom: 0; } .seamband .imagination { max-width: none; } .seam--wide { display: none; } .seam--phone { display: block; } } /* R3.10 The connection nodes behind Philosophy's umbrella: what the tree can't show, faint and still. Written by tools/nodes.py; px from the umbrella's top centre, clear of the text blocks. Between the phone's stack and the four-across figure the lenses wrap two by two, and the drawing stays off. */ .umbrella { position: relative; } .umbrella > :not(.nodes) { position: relative; z-index: 1; } .nodes { position: absolute; left: 50%; translate: -50% 0; z-index: 0; pointer-events: none; overflow: visible; display: none; max-width: none; } .nodes--wide { top: -340px; width: 1800px; height: 1000px; } .nodes--phone { top: 130px; width: 430px; height: 590px; } .nodes__line { fill: none; stroke: var(--slate); stroke-width: 1; opacity: 0.16; } .nodes__line--near { stroke: var(--jacaranda); opacity: 0.28; } .nodes__line--web { stroke: var(--jacaranda); stroke-width: 1.25; opacity: 0.42; } .nodes__dot { fill: var(--slate); opacity: 0.26; } .nodes__dot--hub { fill: var(--jacaranda); opacity: 0.5; } @media (min-width: 60.0625rem) { .nodes--wide { display: block; } } @media (max-width: 30rem) { .nodes--phone { display: block; } } #the-science { overflow: hidden; } /* R3.11 Workflow automation's first section: the loop is the figure, its heading and prose one reading column beside it. The words come first in the source, so the phone reads heading, prose, figure. */ .problem--figure { align-items: center; } .problem--figure .problem__prose { max-width: 34rem; } @media (min-width: 64.0625rem) { .problem--figure .loop { order: -1; } } #build .stages--wa { --stages: 4; } .count__rows--one { grid-template-columns: minmax(0, 1fr); margin-top: 0; } .count__rows--one .count__row { border-top: 0; padding-top: 0; } /* R3.12 The brain, two rows. Row 1: the words beside the three circles, one scale for all three, the legend with them. Row 2: the tools figure beside the words that land it; each assistant on one connection of the same kind, one with its plug pulled. */ @media (min-width: 64.0625rem) { .brain__row { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } } .brain .fig__caption { margin-top: var(--space-s); } .brain__growth { display: grid; gap: var(--space-s); } .brain__legend { list-style: none; margin: 0; padding: 0 0 var(--space-xs); display: grid; gap: 0.55rem; border-bottom: var(--line-ground) solid var(--mist-deep); } .brain__legend li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.75rem; align-items: start; } .brain__legend svg { width: 2.5rem; height: auto; margin-top: 0.2rem; } .brain__legend p { font-size: var(--step--1); line-height: 1.45; color: var(--on-light); margin: 0; } .brain__legend strong { font-weight: 600; } .b-cell-key { fill: var(--jacaranda); } .brain__moments { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; } .brain__moment { display: grid; grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.75rem); align-items: center; } .brain__moment-text { display: grid; gap: 0.2rem; } .brain__disc { display: block; width: 100%; height: auto; } .brain__close { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-m) clamp(2rem, 4vw, 4rem); align-items: start; margin-top: clamp(1.75rem, 3.4vw, 2.75rem); } .brain__close .statement { margin-top: 0; } .brain__tools { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-l) clamp(2rem, 5vw, 5rem); align-items: center; margin-top: clamp(2.25rem, 4.5vw, 3.5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: var(--line-structure) solid var(--slate); } .brain__tools-text { display: grid; gap: var(--space-s); } .brain__tools-text p { font-size: var(--step-0); line-height: 1.65; color: var(--on-light); max-width: 56ch; margin: 0; } .brain__tools-text .brain__tools-lead { font-family: var(--font-display); font-size: clamp(1.45rem, 1.05rem + 1.1vw, 2rem); line-height: 1.25; max-width: 30ch; } .brain__tools-text .depth { justify-self: stretch; } .toolfig { margin: 0; } .toolfig__svg { display: block; width: 100%; height: auto; } .toolfig .fig__caption { margin-top: var(--space-xs); } .tf-wire line { stroke: var(--slate); stroke-width: 2.5; } .tf-plug { fill: var(--slate); } .tf-brain { fill: var(--jacaranda); } .tf-socket { fill: var(--white); stroke: var(--charcoal); stroke-width: 2.5; } .tf-files { font-family: var(--font-display); font-size: 25px; fill: var(--charcoal); text-anchor: middle; } .tf-name { font-family: var(--font-sans); font-size: 18px; font-weight: 600; fill: var(--on-light); text-anchor: middle; } .tf-off { font-family: var(--font-sans); font-size: 18px; font-weight: 600; font-style: italic; fill: var(--on-light); text-anchor: middle; } @media (min-width: 64.0625rem) { .toolfig { order: -1; } } @media (max-width: 64rem) { .brain__close, .brain__tools { grid-template-columns: minmax(0, 1fr); } .toolfig { max-width: 34rem; } } @media (max-width: 48rem) { .brain__moment { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; max-width: 17rem; margin-inline: auto; } .tf-name, .tf-off { font-size: 21px; } /* 14 px on the phone's scale */ .tf-files { font-size: 23px; } } /* R3.13 Home's system figure: the map and the loop. No flow labels; the ring carries the one label, over the top between the upper arms, in SVG type (21 units is 14 px at the smallest the drawing shows), and arrowheads that turn the way the flows turn. */ .sysfig__ringtext--loop { font-size: 21px; font-weight: 500; fill: var(--on-charcoal); } .sysfig__looparrow { fill: var(--on-charcoal-soft); } /* R3.14 How a build runs, compressed: the head on one row, the stages tight, the two lines beneath without rules. */ .build-head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-s) clamp(2rem, 4vw, 4rem); align-items: end; margin-bottom: var(--space-m); } .build-head .section-lead { margin: 0; } #build .stage { gap: 0.15rem; } #build .stage__title { margin-top: 0.3rem; } #build .stage__body { max-width: none; } .blocks--lines { margin-top: var(--space-m); gap: var(--space-s) clamp(2rem, 4vw, 4rem); } .blocks--lines .blocks__item { padding-top: 0; border-top: 0; gap: 0.2rem; } .blocks--lines .blocks__label { margin-top: 0; } @media (max-width: 64rem) { .build-head { grid-template-columns: minmax(0, 1fr); } } /* R3.15 The agents: the explainer, then the one figure. The prompted review opens under the steps, or in place once they stack; without JavaScript it shows under the figure. Charcoal, because its draft and prompt are sheets. */ .agents__explain { display: grid; gap: var(--space-s); max-width: 46rem; margin-top: var(--space-s); } .agents__explain > p { font-size: var(--step-0); line-height: 1.65; color: var(--on-light); margin: 0; } .job { margin-top: var(--space-l); } .agents__after { font-size: var(--step-0); line-height: 1.6; color: var(--on-light); margin: var(--space-m) 0 0; } .job__toggle { display: block; width: 100%; background: none; border: 0; padding: 0 0 0.5rem; cursor: pointer; text-align: center; color: var(--on-light); } .job__toggle .depth__marker { --c: var(--jacaranda); display: inline-block; vertical-align: middle; width: 1.1rem; height: 1.1rem; margin-right: 0.4rem; } .job__toggle .depth__marker::before { width: 0.38rem; height: 0.38rem; top: calc(50% - 0.19rem); } .job__toggle .depth__marker::after { left: 0.38rem; height: 0.24rem; top: calc(50% - 0.12rem); } .job__toggle[aria-expanded="true"] .depth__marker { transform: rotate(90deg); } .job__toggle:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } .job__toggle:focus-visible { outline: 3px solid var(--deep-jacaranda); outline-offset: 3px; } .job__panel { margin-top: var(--space-m); padding: clamp(1.25rem, 2.6vw, 2.25rem); background: var(--charcoal); color: var(--on-charcoal); border-radius: 0 1.2rem 0 1.2rem; text-align: left; } .js .job__panel { display: none; } .js .job__panel.is-open { display: block; } .job__panel-title { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; color: var(--on-charcoal); margin: 0 0 var(--space-s); } .job__review { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.25rem, 2.6vw, 2.25rem); align-items: start; } .job__review-draft { display: grid; gap: var(--space-s); align-content: start; } .job__review-draft .fig__caption { margin: 0; color: var(--on-charcoal-soft); } .job__review-prompt { display: grid; gap: var(--space-s); align-content: start; min-width: 0; } html:not(.js) .job__toggle { cursor: default; pointer-events: none; } html:not(.js) .job__toggle .depth__marker { display: none; } @media (prefers-reduced-motion: reduce) { .job__toggle .depth__marker { transition: none; } } @media (max-width: 64rem) { .job__toggle { text-align: left; padding-bottom: 0; } .job__step .job__panel { grid-row: auto; width: 100%; margin-top: 0.8rem; } .job__review { grid-template-columns: minmax(0, 1fr); } } .job__step--big .job__label { font-size: 1.2rem; line-height: 1.2; } .job__brain-dot { box-shadow: 0 0 0 0.3rem var(--white); } .job__loop--learn::after { left: 1.2rem; } #build { padding-block: clamp(2.25rem, 4vw, 3.5rem); } #build .stages--wa { margin-bottom: 0; padding-bottom: 0; } #build .blocks--lines { margin-top: var(--space-s); } .build-head { margin-bottom: var(--space-s); } #build { padding-block: clamp(2rem, 3.4vw, 3rem); } @media (max-width: 64rem) { .job__step .job__panel-title { display: none; } .job__step .job__panel { margin-inline: -0.5rem; padding: 0.75rem; } .job__step .job__panel .doc { padding-inline: 0.9rem; } .job__step .job__panel .prompt__part { padding-left: 1.6rem; } } /* The cue hangs left of the label, so the two words keep the column's width. */ @media (min-width: 64.0625rem) { .job__toggle { position: relative; } .job__toggle .depth__marker { position: absolute; left: -0.35rem; top: 0.2rem; margin: 0; display: block; } } /* R3.16 The small tag: the problem cards' audience line on a neutral ground. Credentials under Why us, an audience cue above a heading. No colour, no icon. */ .tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .tag { width: fit-content; margin: 0; padding: 0.3rem 0.65rem; font-size: var(--step--1); line-height: 1.3; color: var(--slate); background: var(--mist); border-radius: 0 0.5rem 0 0.5rem; } .field-light:not(.field-white) .tag { background: var(--white); } .field-light .subm__doc .tag { background: var(--mist); font-size: var(--step--1); line-height: 1.3; } /* Research's opening: the heading, then its lead beside it. */ .problem-head--lead .section-lead { max-width: 46ch; }