/* AFB. Tokens come from theme.json; this file only aliases and composes them. */ :root { --ink: var(--wp--preset--color--ink); --ink-soft: var(--wp--preset--color--ink-soft); --muted: var(--wp--preset--color--muted); --paper: var(--wp--preset--color--paper); --blush: var(--wp--preset--color--blush); --hairline: var(--wp--preset--color--hairline); --deep: var(--wp--preset--color--deep); --hairline-dark: var(--wp--preset--color--hairline-dark); --primary: var(--wp--preset--color--primary); --primary-light: var(--wp--preset--color--primary-light); --accent-warm: var(--wp--preset--color--accent-warm); --on-dark: var(--wp--preset--color--on-dark); --on-primary: var(--wp--preset--color--on-primary); --font-display: var(--wp--preset--font-family--display); --font-body: var(--wp--preset--font-family--body); --radius: 13px; --radius-pill: 999px; --stroke: 1.5px; --focus: 2px; /* Lets height animate to and from auto, which the FAQ needs. */ interpolate-size: allow-keywords; --gutter: 96px; --content: 1248px; --prose: 680px; --section: 96px; } *, *::before, *::after { box-sizing: border-box; } /* scroll-padding keeps anchors clear of the sticky header. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } html { scroll-padding-top: calc(var(--header-h, 73px) + 24px); } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } :focus-visible { outline: var(--focus) solid var(--deep); outline-offset: 2px; border-radius: 4px; } /* One ring, two colours. The base ring is --deep, which is invisible on the header, the footer, the deep bands, the red CTA and both photographic heroes, because those surfaces are that colour. Keyboard focus disappeared exactly where the main navigation lives. Same list as the dark-surface block below. */ .site-header :focus-visible, .site-footer :focus-visible, .section--cta :focus-visible, .section--deep :focus-visible, .case-hero :focus-visible, .next-case:focus-visible { outline-color: var(--paper); } /* .screen-reader-response is CF7's, and it only had hiding styles in CF7's own stylesheet, which this theme dequeues. Left alone it renders an empty 24px line box above every form. It has to stay in the DOM to announce errors. */ .screen-reader-text, .wpcf7 .screen-reader-response { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: var(--gutter); top: 8px; z-index: 100; background: var(--paper); padding: 12px 24px; border-radius: var(--radius); } /* Layout ------------------------------------------------------------------ */ /* The cap includes the padding, or the column is 2 x gutter too narrow. */ .wrap { width: 100%; max-width: calc(var(--content) + (var(--gutter) * 2)); margin-inline: auto; padding-inline: var(--gutter); } .wrap--prose > * { max-width: var(--prose); } .section { padding-block: var(--section); } /* From the design system. 96 is the default and needs no class. */ .section--pad-sm { --section: 40px; } .section--pad-md { --section: 64px; } .section--pad-lg { --section: 80px; } @media (max-width: 1199px) { .section--pad-sm { --section: 32px; } .section--pad-md { --section: 56px; } .section--pad-lg { --section: 64px; } } @media (max-width: 767px) { .section--pad-sm { --section: 24px; } .section--pad-md { --section: 40px; } .section--pad-lg { --section: 48px; } } .section--blush, .section--header { background: var(--blush); } .section--cta { background: var(--primary); color: var(--paper); text-align: center; } /* margin-block, not margin: the shorthand would cancel the margin-inline that centres it. Without the reset the paragraph kept the UA bottom margin, which the `* + *` rule above never touches because that only sets margin-top, and every closing CTA on the site stood 17px taller than its band in Figma. */ /* Paper, not on-primary: the tinted cream measured 4.28 on the red, under the 4.5 that 18px body copy needs. White on the same red is 4.92. */ .section--cta__text { color: var(--paper); font-size: 18px; line-height: 1.7; max-width: 720px; margin-block: 0; margin-inline: auto; } /* Head stacks at 16 and sits 48 above its content, both from the Figma band. */ .section__head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; } .section__intro { font-size: 20px; line-height: 1.6; color: var(--ink-soft); max-width: 720px; margin: 0; } /* Body M in a 680 measure. Only the hero deck is Body L at 20. */ .section__head .section__intro { font-size: 18px; line-height: 1.7; max-width: 680px; } .section__meta { font-size: 15px; font-weight: 600; color: var(--ink-soft); } /* Every page header heading in the Figma file that runs long is drawn in a 900 box so it breaks; only the short ones are given the full 1248, where the box makes no difference. Without the cap a long one ran the whole measure on one line and the band came up 67px short of its design. Portfolio and Contact are 458 and 878 wide, so both stay on one line either side of this. */ .page-header h1 { max-width: 900px; } .section > .wrap > * + * { margin-top: 16px; } /* The closing CTA used to override this to 24. Five of the eight frames that carry a CTA stack it at 16, which is simply the site rhythm above, so the override was the anomaly rather than the rule and it is gone. */ /* These rows are the wrap rather than sitting inside one, so the stacking rhythm above would land on their cells and push the grid out of line. */ .section > .stats__row > * + *, .section > .glance__row > * + *, .section > .rail__inner > * + *, .section > .hero__inner > * + *, .section > .text-media__inner > * + * { margin-top: 0; } /* Type -------------------------------------------------------------------- */ .display-xl, .display-l, .display-m, .display-s, h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; margin: 0; } .display-xl, h1 { font-size: 64px; line-height: 1.05; } .display-l, h2 { font-size: 40px; line-height: 1.12; } .display-m, h3 { font-size: 30px; line-height: 1.35; } .display-s, h4 { font-size: 22px; line-height: 1.28; } .label { font-size: 12px; font-weight: 800; line-height: 1.3; letter-spacing: 1.9px; text-transform: uppercase; color: var(--primary); margin: 0; } .label--on-dark { color: var(--accent-warm); } .prose { font-size: 20px; line-height: 1.6; color: var(--ink-soft); } /* WordPress's own global stylesheet emits `:root :where(p) { font-size: body-m }` from the theme.json preset. Zero specificity, but it is a rule ON the paragraph, and a direct rule always beats a value inherited from an ancestor however specific that ancestor is. So .prose has never once sized its own paragraphs: the legal page ran at 18 on both breakpoints against a design that says 20 and 15. Anything that styles prose has to reach the child. */ .prose p, .prose li { font-size: inherit; } .prose > * + * { margin-top: 24px; } /* h2 was 24 and h3 inherited the global 30, so a subheading came out larger than the heading above it. Both on the scale now, and in the right order. There is no 24 in this system; the legal frame draws one, and per the type rule a 24 in a Figma node is Display/M at 30. */ .prose h2 { font-size: 30px; line-height: 1.35; color: var(--ink); margin-top: 48px; } .prose h3 { font-size: 22px; line-height: 1.28; color: var(--ink); margin-top: 32px; } .prose a { color: var(--primary); text-decoration: underline; } /* The arrow is CSS so it can move, and is never read out as link text. */ .link-arrow { display: inline; font-size: 15px; font-weight: 600; color: var(--primary); text-decoration: none; } /* inline-block: an underline does not cross an atomic inline, and transform does not apply to a plain one. */ .link-arrow::after { content: "\2192"; display: inline-block; margin-left: 6px; transition: transform .2s cubic-bezier(.2, .6, .2, 1); } .link-arrow:hover { text-decoration: underline; } .link-arrow:hover::after { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .link-arrow::after { transition: none; } } /* Buttons ----------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 32px; border: 0; border-radius: var(--radius); font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1.5; text-decoration: none; white-space: nowrap; transition: background-color .15s ease; } /* Three styles, matching the Button component set exactly. */ .btn--primary { background: var(--primary); color: var(--paper); } .btn--primary:hover { background: var(--primary-light); } .btn--secondary { background: transparent; color: var(--ink); border: var(--stroke) solid var(--ink); } .btn--secondary:hover { background: var(--ink); color: var(--paper); } .btn--on-dark { background: var(--paper); color: var(--primary); } .btn--on-dark:hover { background: var(--on-primary); } .btn[disabled], .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; } /* Hero -------------------------------------------------------------------- */ .hero__inner { display: grid; gap: 48px; } /* The copy column gives ground before the picture does. */ .hero__inner--split { grid-template-columns: minmax(0, 1fr) clamp(320px, 32%, 380px); align-items: start; } .hero__copy { display: flex; flex-direction: column; gap: 24px; } .hero__copy .display-xl { max-width: 15ch; } .hero__actions { display: flex; flex-wrap: wrap; gap: 16px; } /* Breadcrumb. Caption size, so it sits under everything else in the hero and reads as orientation rather than as content. */ .breadcrumb { margin: 0; } .breadcrumb__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.55; color: var(--muted); } .breadcrumb__item + .breadcrumb__item::before { content: "/"; margin-right: 8px; color: var(--muted); } .breadcrumb__item a { color: inherit; text-decoration: none; } .breadcrumb__item a:hover { text-decoration: underline; } /* Muted disappears against the case hero photograph. */ /* On the case hero this is the smallest type on the band and it sits over a photograph, so on-dark left it unreadable against anything bright. The title above it is white and the deck is on-dark at 20px; 13px over an image needs more contrast than either, not less. The separators stay dimmer so the trail still reads as a trail. */ .case-hero .breadcrumb__list { color: var(--paper); } .case-hero .breadcrumb__item::before { color: var(--on-dark); } .case-hero .breadcrumb__item a { opacity: .85; } .case-hero .breadcrumb__item a:hover { opacity: 1; } /* Quick facts, the service page's alternative to the proof card. Rows are a description list because each is a label and the figure against it, and the rule sits on the row so the card reads as a table rather than a list. */ .facts-card { background: var(--paper); border-radius: var(--radius); padding: 32px; align-self: start; } /* 12 under the title. Figma butts the first rule straight against the title box, which reads as cramped once it is set in a real browser. Aaron's call, 2026-08-15, so it is a deliberate departure from the frame, not drift. */ .facts-card__title { font-family: var(--font-display); font-size: 22px; font-weight: 800; line-height: 1.28; margin: 0 0 12px; } .facts-card__list { margin: 0; } .facts-card__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; border-top: 1px solid var(--hairline); } /* The bottom padding is there to hold the text off the next hairline. The last row has no next hairline, so it was only ever adding to the card's own 32 and made the bottom read 48 against 32 on the other three sides. */ .facts-card__row:last-child { padding-bottom: 0; } .facts-card__row dt { flex: 1 0 0; min-width: 0; font-size: 15px; line-height: 1.7; color: var(--muted); } .facts-card__row dd { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink); text-align: right; } .proof-card { background: var(--paper); border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; gap: 12px; } .proof-card__figure { font-family: var(--font-display); font-size: 64px; line-height: 1.05; font-weight: 800; color: var(--primary); margin: 0; font-variant-numeric: tabular-nums; } .proof-card__text { font-size: 18px; line-height: 1.7; color: var(--ink-soft); margin: 0; } /* Logo strip --------------------------------------------------------------- */ .logo-strip { overflow: hidden; } .logo-strip__label { font-size: 12px; font-weight: 800; line-height: 1.3; letter-spacing: 1.9px; text-transform: uppercase; color: var(--muted); margin: 0 0 20px; } .logo-strip__track { display: flex; width: max-content; } /* Trailing padding equals the gap, or the loop seam spacing goes odd. */ .logo-strip__list { display: flex; align-items: center; gap: var(--logo-gap, 64px); list-style: none; margin: 0; padding: 0 var(--logo-gap, 64px) 0 0; } .logo-strip__item { flex: none; } /* Each logo carries its own inline width: a shared cap would flatten them. */ .logo-strip__img { filter: grayscale(1); opacity: .55; transition: opacity .2s ease, filter .2s ease; } .logo-strip__item:hover .logo-strip__img { opacity: 1; filter: grayscale(0); } /* Wraps when not scrolling, and starts at the gutter rather than centring, so it lines up with its own label and with the scrolling strip above it. */ .logo-strip:not(.logo-strip--scroll) .logo-strip__track { width: 100%; } .logo-strip:not(.logo-strip--scroll) .logo-strip__list { flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 32px 64px; padding: 0 var(--gutter); width: 100%; } /* Fade the edges so logos enter and leave. */ .logo-strip--scroll { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } /* Speed is a distance over a time, and the distance here is the width of the logo set. A fixed duration therefore means the strip runs faster every time a logo is added: six logos took 60s to cover 1113px, or 19px/s, and ten took the same 60s to cover 1903px, or 32px/s. app.js sets the duration from the measured width so the pixels per second stay put whatever is in it. The durations below are the no-script fallback, tuned for the six it started with. */ @media (prefers-reduced-motion: no-preference) { .logo-strip--scroll .logo-strip__list { animation: afb-marquee linear infinite; animation-duration: var(--afb-marquee-duration, 60s); } .logo-strip--slow { --afb-marquee-duration: 60s; } .logo-strip--medium { --afb-marquee-duration: 40s; } .logo-strip--fast { --afb-marquee-duration: 25s; } .logo-strip--scroll:hover .logo-strip__list { animation-play-state: paused; } } /* Reduced motion: fall back to the still layout rather than a frozen marquee. */ @media (prefers-reduced-motion: reduce) { .logo-strip--scroll { -webkit-mask-image: none; mask-image: none; } .logo-strip--scroll .logo-strip__track { width: 100%; } .logo-strip--scroll .logo-strip__list { flex-wrap: wrap; justify-content: center; gap: 40px 64px; padding: 0 var(--gutter); width: 100%; } .logo-strip--scroll .logo-strip__list[aria-hidden="true"] { display: none; } } @keyframes afb-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } } /* Cards ------------------------------------------------------------------- */ /* Columns 24, rows 32. Every card row in the file resolves on 24: four cards land on 294 and three on 400, both of which make 1248 exactly. Steps are the other system and take 48, below. Row gap is left at 32 because no frame in the file has a second row of cards to measure. */ .card-grid { display: grid; column-gap: 24px; row-gap: 32px; } .card-grid--2 { grid-template-columns: repeat(2, 1fr); } .card-grid--3 { grid-template-columns: repeat(3, 1fr); } .card-grid--4 { grid-template-columns: repeat(4, 1fr); } .card { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 32px; border-radius: var(--radius); overflow: hidden; } .card--blush { background: var(--blush); } .card--paper { background: var(--paper); } .card__body { display: flex; flex-direction: column; gap: 12px; } .card__media img { border-radius: var(--radius); } .card__title { font-family: var(--font-display); font-size: 22px; line-height: 1.28; font-weight: 800; margin: 0; } .card__text { font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin: 0; } /* A separate child, so space-between keeps the links level across a row. */ .card__foot { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--hairline); } .card--paper .card__foot { border-top-color: var(--hairline); } .card__meta { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0; } /* Slider dots. Hidden on desktop, and left aligned to the gutter like Figma. */ .card-dots { display: none; gap: 8px; align-items: center; justify-content: flex-start; margin-top: 32px; padding-inline: var(--gutter); } /* Spelled out against .wrap to beat the section's 16px rhythm rule. */ .section > .wrap > .card-dots { margin-top: 32px; } .card-dots__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: var(--hairline); cursor: pointer; transition: background-color .2s ease, width .2s ease; } .card-dots__dot.is-active { background: var(--primary); width: 24px; } /* A linked card is a real anchor, so every part of it behaves the same. A stretched overlay was tried first and was worse: above the copy it killed text selection, below it left dead patches wherever there was text, so the hover flickered on and off as the pointer crossed the card. Hover is only the link and the arrow. A background tint muddies the colour, and darkening the foot rule drags the eye to a divider rather than to the thing you are about to click. */ .card { position: relative; } .card--link { text-decoration: none; color: inherit; display: flex; } .card--link:hover .link-arrow { text-decoration: underline; } .card--link:hover .link-arrow::after { transform: translateX(4px); } .wpcf7 .afb-pills input[type="radio"]:focus-visible + .wpcf7-list-item-label { outline: var(--focus) solid var(--deep); outline-offset: 2px; border-radius: 4px; } /* FAQ ---------------------------------------------------------------------- A rule under each question, a round toggle on the right, the answer under. The toggle is drawn rather than shipped as an asset, so it takes its colour from the state and costs no request. */ .faq__item { border-bottom: 1px solid var(--hairline); } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px; cursor: pointer; list-style: none; } /* Safari still paints its own triangle without this. */ .faq__q::-webkit-details-marker { display: none; } .faq__q-text { font-family: var(--font-display); font-size: 22px; line-height: 1.28; font-weight: 800; } .faq__toggle { position: relative; flex-shrink: 0; width: 40px; height: 40px; border: 1px solid var(--hairline); border-radius: 999px; transition: background-color .2s ease, border-color .2s ease; } .faq__toggle::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border: 2px solid var(--ink); border-width: 0 0 2px 2px; transform: translate(-50%, -75%) rotate(-45deg); transition: transform .25s cubic-bezier(.2, .6, .2, 1), border-color .2s ease; } .faq__item[open] .faq__toggle { background: var(--primary); border-color: var(--primary); } .faq__item[open] .faq__toggle::before { border-color: var(--on-primary); transform: translate(-50%, -25%) rotate(135deg); } .faq__q:hover .faq__toggle { border-color: var(--ink); } .faq__item[open] .faq__q:hover .faq__toggle { background: var(--primary-light); border-color: var(--primary-light); } .faq__a { padding-bottom: 24px; } .faq__a p { margin: 0; font-size: 18px; line-height: 1.7; color: var(--ink-soft); max-width: 860px; } /* Answers can run to more than one paragraph now that wpautop is applied. */ .faq__a p + p { margin-top: 16px; } /* Eases where the browser supports it, snaps everywhere else. */ @supports selector(details::details-content) { .faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size .28s ease, content-visibility .28s allow-discrete; } .faq__item[open]::details-content { block-size: auto; } } /* Points list -------------------------------------------------------------- Heading held on the left, points stacked down the right with a rule between each. Figma's split is a fixed 440 head against a flexible column at 96. */ .points__inner { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 96px; align-items: start; } .points__head { display: flex; flex-direction: column; gap: 16px; } .points__list { margin: 0; display: flex; flex-direction: column; } /* Head on top, points two across. Four points beside a heading make a long thin column on a full width dark band; the About template puts the heading over the top and reads them as a grid instead. */ .points--stacked .points__inner { display: block; } .points--stacked .points__head { margin-bottom: 48px; } .points--stacked .points__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; /* Side by side, the rule under a point sits right on top of the next one's rule with only their paddings between, which is not enough to read as two rows. Grid row-gap rather than more padding, so the single column layout below 768 keeps the tight stack it already has. */ row-gap: 24px; } /* The rule belongs to the row, not the cell: in two columns the first item of each row is the one that starts level with the heading above it. */ .points--stacked .point:nth-child(-n + 2) { padding-top: 0; border-top: 0; } /* First point has no rule, so the stack starts level with the heading. */ .point { padding-block: 24px; border-top: 1px solid var(--hairline); } .point:first-child { padding-top: 0; border-top: 0; } .point__title { font-family: var(--font-display); font-size: 22px; line-height: 1.28; font-weight: 800; margin: 0; } .point__text { font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin: 8px 0 0; } /* Dark band. Its own background, so a row can be dark without the CTA's red. */ .section--deep { background: var(--deep); color: var(--paper); } .section--deep .point { border-top-color: var(--hairline-dark); } .section--deep .point__text { color: var(--on-dark); } .section--deep .section__intro, .section--deep .card__text { color: var(--on-dark); } /* The arrow link is red by default, which vanishes on the deep band. */ .section--deep .link-arrow { color: var(--accent-warm); } /* List items carry their own ink-soft, which does not inherit the band's paper and would sit almost invisible on the deep. Same treatment as .point__text. */ .section--deep .list-columns__list li, .section--deep .list-columns__list li::before, .section--deep .list-columns__prose > * { color: var(--on-dark); } /* List columns ------------------------------------------------------------ A heading and two or three lists that answer each other. Generic on purpose: good fit against bad, included against not, before against after. */ .list-columns__row { display: grid; gap: 64px; margin-top: 48px; } .list-columns__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .list-columns__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .section > .wrap > .list-columns__row { margin-top: 48px; } /* The column is the same object as a process step: a 3px primary rule, 24 of padding under it, then a Display/S title. Styled off the step rather than from scratch so the two never drift apart. */ .list-columns__col { border-top: 3px solid var(--primary); padding-top: 24px; display: flex; flex-direction: column; gap: 16px; } .list-columns__title { margin: 0; } .list-columns__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; } .list-columns__list li { position: relative; padding-left: 24px; font-size: 18px; line-height: 1.7; color: var(--ink-soft); } .list-columns__list li::before { content: "\00B7"; position: absolute; left: 0; color: var(--ink-soft); } /* Proof callout ----------------------------------------------------------- */ .proof-callout__inner { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 64px; align-items: start; } .proof-callout__figure-col { display: flex; flex-direction: column; gap: 8px; } .proof-callout__figure { font-family: var(--font-display); font-size: 64px; line-height: 1.05; font-weight: 800; color: var(--paper); margin: 0; } .proof-callout__detail { display: flex; flex-direction: column; gap: 16px; } /* Type comes from the scale, not from this file: the heading is Display/M via the shared class, the text is the same 18px body every other band uses. */ .proof-callout__heading { margin: 0; } .proof-callout__text { font-size: 18px; line-height: 1.7; color: var(--on-dark); margin: 0; } .proof-callout__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 8px; } .section > .wrap.proof-callout__inner > * + * { margin-top: 0; } @media (max-width: 1023px) { .proof-callout__inner { grid-template-columns: 1fr; gap: 32px; } .list-columns__row { gap: 40px; } } @media (max-width: 767px) { .list-columns__row--2, .list-columns__row--3 { grid-template-columns: 1fr; } /* Display/XL and, unusually, Display/S: the mobile frame drops this heading two steps from the 30 it sets on desktop, not one. 48 and 24 were my own numbers and 48 was not on the scale at all. */ .proof-callout__figure { font-size: 38px; } .proof-callout__heading { font-size: 20px; } } /* Legal ------------------------------------------------------------------ A 320 contents rail against a 720 article, which is wider than the 680 prose measure everywhere else on purpose: a policy is scanned for the clause that applies to you rather than read start to finish, and the rail is what makes that possible. Sticky, because the article runs to two thousand pixels and a contents list you have to scroll back up to reach is decoration. */ .legal__inner { display: grid; grid-template-columns: 320px minmax(0, 720px); gap: 208px; align-items: start; } .section > .wrap.legal__inner > * + * { margin-top: 0; } /* The contents rail, shared by the legal pages and blog posts via parts/contents-rail.php. Styled on .contents, not on either page's own class, because the first version lived on .legal__contents and the blog rail built later silently got none of it. */ .contents { position: sticky; top: calc(var(--header-h, 73px) + 24px); } /* A rule down the left the marker rides, so "where am I" is one glance rather than reading eighteen labels. It is the same 3px primary rule the rest of the site uses to mark a thing, turned vertical. */ .contents ul { list-style: none; margin: 16px 0 0; padding: 0 0 0 16px; display: flex; flex-direction: column; gap: 16px; border-left: 1px solid var(--hairline); } .contents li { position: relative; } .contents li::before { content: ""; position: absolute; left: -17px; top: 2px; bottom: 2px; width: 3px; background: var(--primary); opacity: 0; transition: opacity .2s ease; } .contents a { font-size: 15px; line-height: 1.7; color: var(--ink-soft); text-decoration: none; transition: color .2s ease; } .contents a:hover { color: var(--primary); text-decoration: underline; } .contents .is-current::before { opacity: 1; } .contents .is-current > a { color: var(--ink); font-weight: 600; } /* The summary is the label on a wide screen and a real control below it, so it is styled as the label and only becomes obviously tappable where it does something. */ .contents__toggle { list-style: none; cursor: default; } .contents__toggle::-webkit-details-marker { display: none; } @media (prefers-reduced-motion: reduce) { .contents li::before, .contents a { transition: none; } } /* No scroll-margin-top here. `html` already carries scroll-padding-top for the sticky header, and the two ADD: a clicked heading landed at 256 instead of 128, which put it below the scrollspy's reading line, so every click marked the section above the one you asked for. */ /* A part divider, not a section. Kept out of the contents list by the class, because a contents entry that is not a place is noise. */ .legal__article .legal__part { margin-top: 64px; padding-top: 32px; border-top: 3px solid var(--primary); font-size: 22px; line-height: 1.28; color: var(--ink); } .legal__article > *:first-child { margin-top: 0; } /* 320 + 208 + 720 is exactly 1248, so it only fits at full width. The gap is the part to give up first: the rail and the measure both have to hold. */ @media (max-width: 1279px) { .legal__inner { gap: 64px; } } /* Blog ------------------------------------------------------------------- The featured card is the Work card turned on its side: picture left at 560, copy right at 688, one radius around both. */ .feature-card--post { background: var(--paper); border: 1px solid var(--hairline); } .feature-card--post .feature-card__title { color: var(--ink); } .feature-card__text { font-size: 15px; line-height: 1.7; color: var(--ink-soft); } /* A row, not a card: no tile, a rule between each, and the picture is a fixed 240 so the titles all start on the same line however tall the images are. */ .post-list { display: flex; flex-direction: column; } .post-row { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: center; padding-block: 32px; border-top: 1px solid var(--hairline); text-decoration: none; color: inherit; } .post-row:first-child { border-top: 0; } .post-row__media { display: block; border-radius: var(--radius); overflow: hidden; } .post-row__media img { width: 100%; height: 160px; object-fit: cover; display: block; } /* No picture, and the row would collapse its first column and shunt the copy left, out of line with every other row. */ .post-row:not(:has(.post-row__media)) { grid-template-columns: 1fr; } .post-row__body { display: flex; flex-direction: column; gap: 8px; } .post-row__title { display: block; color: var(--ink); } .post-row__excerpt { font-size: 18px; line-height: 1.7; color: var(--ink-soft); } .post-row:hover .post-row__title { text-decoration: underline; } .section > .wrap > .post-list { margin-top: 0; } /* Article ------------------------------------------------------------------ 680 of prose against a 320 rail, which is the Figma column pair. The rail sticks under the header so the contents stay reachable in a long post. */ .post-article__inner { display: grid; grid-template-columns: minmax(0, var(--prose)) 320px; gap: 64px; align-items: start; } .section > .wrap.post-article__inner > * + * { margin-top: 0; } .prose--article h2 { font-size: 30px; line-height: 1.35; margin-top: 48px; } .prose--article > p:first-child { font-size: 22px; line-height: 1.5; color: var(--ink); } .prose--article blockquote { margin: 32px 0; padding-left: 24px; border-left: 3px solid var(--primary); font-family: var(--font-display); font-size: 22px; line-height: 1.28; font-weight: 800; color: var(--ink); } .post-rail__contents { position: static; } .post-rail { position: sticky; top: calc(var(--header-h, 73px) + 24px); display: flex; flex-direction: column; gap: 32px; } /* The rail itself is .contents now, styled once above for both templates. */ .post-rail__offer { background: var(--blush); border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .post-rail__title { margin: 0; } .post-rail__text { font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin: 0; } .post-header__byline { font-size: 15px; line-height: 1.5; color: var(--muted); margin: 0; } .post-hero img { width: 100%; height: 480px; object-fit: cover; display: block; } /* Figma 39:402 draws this as a row on the prose column: a 96 round photograph, 32, then the name and bio left aligned against it. It was built centred with no photograph at all, which is the only band on a post with nothing in it but type. The `.section > .wrap > * + *` 16 lands on the text column here, because this inner IS the wrap, so it is reset like the other flex wraps. */ /* `.wrap` puts the gutter inside its own max-width, so a bare `--prose` cap left a 488 column, not the 680 the design draws. */ .post-author__inner { max-width: calc(var(--prose) + (var(--gutter) * 2)); margin-inline: auto; display: flex; align-items: center; gap: 32px; } .section > .post-author__inner > * + * { margin-top: 0; } .post-author__avatar { width: 96px; height: 96px; flex-shrink: 0; border-radius: 50%; object-fit: cover; } .post-author__text { flex: 1 1 auto; min-width: 0; } .post-author__name { margin: 0; } .post-author__bio { font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin: 8px 0 0; } /* Two columns of prose rather than two lists. No rule, no title, no bullets: the location band is one piece of writing continued across two columns, not two lists answering each other, which is what the rule and the bullets are there to signal. */ .list-columns__row--prose .list-columns__col { border-top: 0; padding-top: 0; } .list-columns__prose > * { margin: 0; font-size: 18px; line-height: 1.7; color: var(--ink-soft); } .list-columns__prose > * + * { margin-top: 24px; } /* The line under a card row, for the things that did not earn a card. */ .card-grid__footnote { font-size: 18px; line-height: 1.7; color: var(--ink-soft); margin: 32px 0 0; } /* Not found --------------------------------------------------------------- Centred, and stacked at 24 rather than the site's 16: it is four short things on an otherwise empty band, and at 16 they read as one paragraph. The links band under it uses 32, which is its own figure again. */ .not-found__inner { text-align: center; } .section > .wrap.not-found__inner > * + * { margin-top: 24px; } .not-found__code { color: var(--primary); } .not-found__text { max-width: 600px; margin-inline: auto; margin-block: 0; font-size: 20px; line-height: 1.6; color: var(--ink-soft); } .not-found__action { margin-block: 0; } .section > .wrap > .not-found__label + .card-grid { margin-top: 32px; } /* Margin and size kept apart on purpose: at three classes the size would out-rank the single class mobile rule and stay at 18 on a phone, which is the bug this whole sweep was about. */ .section > .wrap > .not-found__footnote { margin-top: 32px; } .not-found__footnote { font-size: 18px; } /* Text and image ----------------------------------------------------------- Copy at a fixed 560 so the measure stays readable, picture takes what is left. Figma's band is 560 against a flexible image with 80 between them. */ /* The copy column gives ground before the picture does. A flat 560 held its width all the way down and the image took the whole squeeze: at 1200 the portrait was crushed to 353 wide against 440 tall. This lands on Figma's 560 wherever there is room for it and shrinks first below that. */ .text-media__inner { display: grid; grid-template-columns: clamp(380px, 46%, 560px) minmax(0, 1fr); gap: 80px; align-items: center; } .text-media__copy { display: flex; flex-direction: column; gap: 24px; } /* Copy with no picture: one column at the prose measure, not half a band with an empty half beside it. */ .text-media--solo .text-media__inner { grid-template-columns: minmax(0, var(--prose)); } .text-media__head { display: flex; flex-direction: column; gap: 16px; } /* The site's reading measure. */ .text-media__copy { max-width: var(--prose); } .text-media__body > * { margin: 0; font-size: 18px; line-height: 1.7; color: var(--ink-soft); } .text-media__body > * + * { margin-top: 24px; } .text-media__action { margin: 0; } .text-media__image { width: 100%; height: 440px; object-fit: cover; border-radius: var(--radius); } /* Ordered, not reversed, so the copy is read first either way round. */ .text-media--flip .text-media__inner { grid-template-columns: minmax(0, 1fr) clamp(380px, 46%, 560px); } .text-media--flip .text-media__copy { order: 2; } .text-media--flip .text-media__image { order: 1; } /* Numbered steps ----------------------------------------------------------- A rule across the top and copy under it. No tile, so no padding and no background, which is what separates a step from a card. */ .card-grid--steps { gap: 48px; list-style: none; margin: 0; padding: 0; counter-reset: afb-step; } /* Steps keep 48 at every count. This block used to tighten four across to 32 on the reasoning that 276 wraps the copy an extra line, but the design does not: Home draws four steps at 276 with a 48 gap and takes the extra line. */ /* The rule is a positioned pseudo, not a border: a border cannot be scaled on its own. 28 is the 4px rule plus 24px of padding. */ .step { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; position: relative; counter-increment: afb-step; } .step::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--primary); transform-origin: 0 50%; } /* Generated, so reordering renumbers. Decorative: the list carries the order. */ .step::before { content: counter(afb-step, decimal-leading-zero); font-family: var(--font-display); font-size: 40px; line-height: 1.12; font-weight: 800; color: var(--primary); } .step__title { font-family: var(--font-display); font-size: 22px; line-height: 1.28; font-weight: 800; margin: 0; } .step__text { font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin: 0; } /* A row with nothing to scroll hides its arrows. The dots on a slider row stay, because Figma draws them on every template whether the row scrolls or not. */ .section.is-static .carousel__controls, .section.is-static > .wrap > .card-dots { display: none; } /* Testimonials ------------------------------------------------------------- A quote card on the shared carousel track. 16 between its parts rather than Figma's raw 14, which is not on the spacing scale. */ .quote { flex: 0 0 612px; display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 40px; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius); } /* Drawn by CSS so it is never selected, searched or read as part of the quote. */ .quote__text::before { content: "\201C"; display: block; font-family: var(--font-display); font-size: 40px; line-height: 1.12; font-weight: 800; color: var(--primary); margin-bottom: 16px; } .quote__text { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.28; font-weight: 800; color: var(--ink); } /* Editors only, so it can be loud. */ .quote--unapproved { border-color: var(--primary); } .quote__flag { margin: 0; font-size: 12px; font-weight: 800; line-height: 1.3; letter-spacing: 1.9px; text-transform: uppercase; color: var(--primary); } .quote__by { display: flex; flex-direction: column; gap: 4px; } .quote__name { font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink); } .quote__role { font-size: 15px; line-height: 1.7; color: var(--muted); } /* Pricing tiers ------------------------------------------------------------ Everything else about a tier is already .card. Only the price is new. */ .tier { justify-content: flex-start; } .tier__price { font-family: var(--font-display); font-size: 40px; line-height: 1.12; font-weight: 800; color: var(--primary); margin: 0; } .tier__from { font-family: var(--font-body); font-size: 20px; font-weight: 600; } .tier__note { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0; } .pricing__link { margin: 48px 0 0; } /* Case study -------------------------------------------------------------- A full bleed image with the title over it, then the story in sections. */ /* The three dark bands each carry their own gradient from the design, so a case study still reads as designed before its photography arrives. */ /* The three full bleed panels below clip their own picture, so the parallax in the motion block can oversize it without exposing the gradient at an edge. Clipping makes each one a scroll container, which is why anything inside them reads a NAMED timeline rather than view(). */ .case-hero { position: relative; display: grid; align-items: end; min-height: 600px; overflow: hidden; background: linear-gradient(180deg, #4a2f27 0%, #2e1b16 55%, #160d0b 100%); color: var(--paper); } .case-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* A scrim, or white type over a photograph is a coin toss. * * The bottom stop is .90, not the .85 the frame shows. Measured against the * real rendered pixels behind the text rather than against a flat colour, the * deck came out at 4.48 on the brightest image on the site, just under the 4.5 * that 20px body copy needs. The scrim is what guarantees this for any image * anybody adds later, so it is the scrim that had to move, not the photograph. */ .case-hero--image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 16, 13, .30) 0%, rgba(28, 16, 13, .90) 100%); } .case-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; padding-block: 96px; } .case-hero__inner .display-xl { max-width: 900px; } /* Separated by a rule rather than a middot so the credit reads as its own statement and not as a continuation of the words "Case study". */ .case-hero__credit::before { content: ""; display: inline-block; width: 1px; height: 10px; margin: 0 10px -1px; background: currentColor; opacity: .5; } .case-hero__deck { font-size: 20px; line-height: 1.6; color: var(--on-dark); max-width: 720px; margin: 0; } /* The one action in the hero, so it reads as a button rather than joining the deck as another line of prose. Arrow and nudge follow .link-arrow, since a second arrow behaviour on the same site reads as a mistake. */ .case-hero__visit { margin: 8px 0 0; } .case-hero__visit a { display: inline-flex; align-items: center; padding: 12px 24px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; font-size: 15px; font-weight: 700; color: var(--paper); text-decoration: none; transition: background .2s ease, border-color .2s ease, color .2s ease; } .case-hero__visit a::after { content: "\2192"; display: inline-block; margin-left: 8px; transition: transform .2s cubic-bezier(.2, .6, .2, 1); } .case-hero__visit a:hover { background: var(--paper); border-color: var(--paper); color: var(--deep); } .case-hero__visit a:hover::after { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .case-hero__visit a, .case-hero__visit a::after { transition: none; } } /* Tracks follow the number of figures. Hardcoded to four, a three figure row left a dead column on the right and the row read as though something had failed to load. */ .stats__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; } /* auto-fit gives every track an equal share, which is right for three or four and wrong for one or two: a single figure stretched over 1248px leaves its label stranded under a very large number. Cap the track and group them left instead, so a short row reads as deliberate rather than broken. */ .stats__row:has(> .stat:only-child), .stats__row:has(> .stat:nth-child(2):last-child) { grid-template-columns: repeat(auto-fit, minmax(200px, 340px)); justify-content: start; gap: 64px; } .stat { display: flex; flex-direction: column; gap: 8px; } .stat__value { font-family: var(--font-display); font-size: 40px; line-height: 1.12; font-weight: 800; color: var(--primary); margin: 0; } .stat__label { font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink); margin: 0; } .stat__note { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0; } .section.glance { border-bottom: 1px solid var(--hairline); } /* margin-block, not margin: a bare margin:0 would cancel the auto side margins .wrap uses to centre itself, and this row is the wrap. */ .glance__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px; margin-block: 0; } .glance__item { display: flex; flex-direction: column; gap: 8px; } .glance__label { font-size: 12px; font-weight: 800; line-height: 1.3; letter-spacing: 1.9px; text-transform: uppercase; color: var(--primary); } .glance__value { font-size: 15px; line-height: 1.7; color: var(--ink); margin: 0; } .glance__link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--primary); } .glance__link:hover { color: var(--primary); } .rail__inner { display: grid; grid-template-columns: 260px minmax(0, 680px); gap: 64px; align-items: start; } .rail__heading { font-family: var(--font-display); font-size: 30px; line-height: 1.35; font-weight: 800; margin: 0; } .rail__body { font-size: 20px; line-height: 1.7; color: var(--ink); } .rail__body > * { margin: 0; } .rail__body > * + * { margin-top: 24px; } .rail__footnote { font-size: 13px; line-height: 1.55; color: var(--muted); } .compare { width: 100%; border-collapse: collapse; text-align: left; } .compare th, .compare td { padding: 16px 0 16px 24px; border-bottom: 1px solid var(--hairline); } .compare th:first-child, .compare td:first-child { padding-left: 0; } .compare thead th { font-size: 12px; font-weight: 800; line-height: 1.3; letter-spacing: 1.9px; text-transform: uppercase; color: var(--primary); } .compare tbody th { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--ink); } .compare td { width: 174px; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink); } .compare td.compare__after { color: var(--primary); } .image-band { position: relative; margin: 0; display: grid; place-items: center; overflow: hidden; background: linear-gradient(180deg, #4d3933 0%, #3e2d28 50%, #2b1e1b 100%); } .image-band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .image-band__hint { font-size: 12px; font-weight: 800; letter-spacing: 1.9px; text-transform: uppercase; color: var(--on-dark); } .image-band--sm { min-height: 280px; } .image-band--md { min-height: 420px; } .image-band--lg { min-height: 560px; } .next-case { position: relative; display: grid; align-items: end; min-height: 340px; overflow: hidden; background: linear-gradient(180deg, #3e2923 0%, #261713 60%, #140c0a 100%); color: var(--paper); text-decoration: none; } /* Held below centre because the band is a wide letterbox and the subject of a photograph almost always sits under the horizon, so a centred crop lands on empty sky. */ .next-case__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; } .next-case--image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 16, 13, .3) 0%, rgba(28, 16, 13, .85) 100%); } .next-case__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; padding-block: 96px; } .next-case__title { display: flex; align-items: center; gap: 24px; } /* The whole band is the link, so this is decoration, not a second control: no tab stop, no separate hover target. It is a ring rather than a bare arrow because a bare arrow on a photograph does not read as somewhere to click. Sized and shaped off .carousel-btn so the site has one circular control. Figma colours the arrow accent-warm and the build was rendering it white. */ .next-case__arrow { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 1px solid var(--paper); border-radius: 999px; color: var(--paper); font-size: 24px; line-height: 1; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; } .next-case:hover .next-case__arrow, .next-case:focus-visible .next-case__arrow { background: var(--paper); border-color: var(--paper); color: var(--deep); transform: translateX(4px); } .next-case__deck { font-size: 18px; line-height: 1.7; color: var(--on-dark); max-width: 680px; margin: 0; } /* Work grid --------------------------------------------------------------- The portfolio listing. A featured project full width, the rest three across. */ .filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 48px; } @media (max-width: 767px) { .filters { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); margin-bottom: 32px; } .filters::-webkit-scrollbar { display: none; } .pill { flex: none; } } .pill { padding: 12px 24px; border: 1px solid var(--hairline); border-radius: 999px; background: transparent; font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink); cursor: pointer; /* theme.json underlines every link on hover, which is right for prose and wrong for a control. The portfolio pills are