/* Dedicated highlight project page. */ .single-highlight { max-width: 1100px; margin: 0 auto; padding: 80px 24px 0; } /* A full-width wrapper around the 1100px column. Full-aligned blocks break out to 100vw, which is wider than the page whenever a vertical scrollbar is taking up room; clipping here swallows that overhang. It has to be this wrapper and not — body is the sticky header's containing block, and clipping there would drop the header out of its sticky position. */ .single-highlight-bleed { overflow-x: clip; } /* The three lines are deliberately far apart in weight and presence: the title carries the header on its own, and the client label and credit sit back from it. Spacing is set per element rather than with a flex gap, because each gap here is a different size. */ .single-highlight-header { display: flex; flex-direction: column; margin-bottom: 48px; } .single-highlight-client { font-size: var(--fs-eyebrow); /* 500 is the weight the brand system reserves for uppercase labels. */ font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; opacity: 0.5; margin-bottom: 0; } /* Both header gaps live on the title, in em of its own size, so the cluster keeps its proportions as the clamp resizes it — the label and credit are fixed-size satellites and can't carry a gap that scales. The two values differ because the optical gap is not the box gap: line-height 0.95 crops this box tight to the ink, while the credit's 1.6 line-height adds ~8px of half-leading above its ink. Matched by measured ink, not by number. */ .single-highlight-title { margin: 0.19em 0 0.2em; font-size: clamp(2.5rem, 6vw, 4.25rem); font-weight: var(--fw-semibold); line-height: 0.95; letter-spacing: -0.03em; /* No optical left correction here. Mona Sans' left side bearings at display size measure 0.3-2px depending on the first glyph, so a blanket negative margin over-corrects most titles and pulls them left of the body copy. */ } .single-highlight-contributions { margin: 0; font-size: 0.95rem; font-weight: var(--fw-regular); letter-spacing: 0.01em; opacity: 0.6; } /* The rich text body. Everything below the header is authored in the editor, so these rules have to hold for whatever order the blocks arrive in. There is no reading measure: copy, video and images all run the full width of the 1100px column, so the whole page shares one left and one right edge with the title above it. */ .single-highlight-content { font-size: 1.05rem; line-height: 1.65; margin-bottom: 80px; } .single-highlight-content > p { margin: 0 0 1.4em; } .single-highlight-content > h2, .single-highlight-content > h3, .single-highlight-content > h4 { font-weight: var(--fw-semibold); letter-spacing: -0.02em; line-height: 1.15; /* Generous above, tight below: a heading belongs to the copy under it. */ margin: 2.4em 0 0.6em; } .single-highlight-content > *:first-child { margin-top: 0; } .single-highlight-content > h2 { font-size: clamp(1.5rem, 3vw, 2rem); } .single-highlight-content > h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); } .single-highlight-content > h4 { font-size: 1.1rem; } .single-highlight-content > ul, .single-highlight-content > ol { margin: 0 0 1.4em; padding-left: 1.2em; } .single-highlight-content li { margin-bottom: 0.4em; } .single-highlight-content a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; opacity: 0.85; transition: opacity 0.2s ease; } .single-highlight-content a:hover { opacity: 1; } .single-highlight-content blockquote { margin: 2.4em 0; padding-left: 1.2em; border-left: 2px solid currentColor; font-size: 1.25rem; line-height: 1.45; opacity: 0.85; } /* Media and structural blocks run the full column rather than the reading measure. The list is explicit rather than "anything that isn't a p" because the default has to stay text: an unknown block is far more likely to be copy than a picture. Legacy classic-editor content is covered too — an autoembed there arrives as a bare iframe inside a paragraph of its own. */ .single-highlight-content > figure, .single-highlight-content > iframe, .single-highlight-content > .wp-block-image, .single-highlight-content > .wp-block-embed, .single-highlight-content > .wp-block-video, .single-highlight-content > .wp-block-cover, .single-highlight-content > .wp-block-gallery, .single-highlight-content > .wp-block-columns, .single-highlight-content > .wp-block-group, .single-highlight-content > .wp-block-media-text, .single-highlight-content > .wp-block-table, .single-highlight-content > .wp-block-buttons, .single-highlight-content > .wp-block-separator, .single-highlight-content > .wp-block-spacer, .single-highlight-content > .wp-video, .single-highlight-content > p:has(> iframe), .single-highlight-content > p:has(> video), .single-highlight-content > p:has(> img) { max-width: 100%; /* Block-direction only. The inline margins are core's to set: "centre" alignment on an image is margin-left/right: auto, and a shorthand here would quietly reset it to 0 and leave the image sitting left. */ margin-block: 2.8em; } /* Left / centre / right, from the block toolbar. A classic theme has to supply these itself — core ships the shrink-to-fit (display: table on a resized image) but leaves the placement to the theme. */ .single-highlight-content > .aligncenter { margin-left: auto; margin-right: auto; } .single-highlight-content > .alignleft { margin-left: 0; margin-right: auto; } .single-highlight-content > .alignright { margin-left: auto; margin-right: 0; } /* An embed block defaults to "center", which core renders as display: table with auto margins — the player shrinks to fit and sits inset from the copy. Video is the medium this site is built around; it fills its column. Images keep core's centering, where centre alignment means something. */ .single-highlight-content > .wp-block-embed.aligncenter { display: block; width: 100%; margin-left: 0; margin-right: 0; } /* Full, from the block toolbar's alignment control. ("Wide" needs no rule: everything here is already the column's full width.) Full breaks out of the 1100px column to the viewport edges — the overflow-x: clip on .single-highlight-bleed is what keeps that from producing a horizontal scrollbar. */ .single-highlight-content > .alignfull { max-width: none; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .single-highlight-content > .alignfull > img, .single-highlight-content > .alignfull > .wp-block-embed__wrapper { border-radius: 0; } .single-highlight-content .wp-block-spacer { margin: 0; } .single-highlight-content img, .single-highlight-content video { display: block; height: auto; } /* Fill the column by default, but never fight an explicit size: the editor's resize handle writes width straight onto the img, and :not() keeps this off those. */ .single-highlight-content figure:not(.is-resized) > img, .single-highlight-content > video { width: 100%; } /* Gallery and columns lay their own children out; a blanket width: 100% on the image is right inside a single figure and wrong inside those. */ .single-highlight-content .wp-block-gallery img, .single-highlight-content .wp-block-columns img { width: 100%; } .single-highlight-content figcaption, .single-highlight-content .wp-element-caption { margin-top: 0.8em; font-size: 0.85rem; opacity: 0.6; text-align: left; } /* An oEmbed arrives as an iframe carrying hard width and height attributes at whatever size the provider reports. A 16:9 box keeps every video on the page the same shape as the video everywhere else on the site; the player letterboxes anything that isn't. This is the rule for a bare iframe — legacy classic-editor autoembeds, and providers that report no ratio. */ .single-highlight-content iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; } /* An embed block that knows its ratio brings its own box: responsive-embeds gives the wrapper a percentage padding and absolutely positions the iframe inside it. Leave that alone — an aspect-ratio on an absolutely positioned, height: 100% iframe collapses it to nothing. */ .single-highlight-content .wp-has-aspect-ratio iframe { aspect-ratio: auto; height: 100%; } .single-highlight-content .wp-block-separator { border: 0; border-top: 1px solid currentColor; opacity: 0.2; } /* The meta video, always shown when set, ahead of any editor content below it. */ /* Video: a 16:9 box that holds either the poster button or the player. */ .single-highlight-video { position: relative; aspect-ratio: 16 / 9; margin-bottom: 56px; background: #000; overflow: hidden; } .single-highlight-video-poster { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; } .single-highlight-video-poster img { width: 100%; height: 100%; object-fit: cover; } .single-highlight-play { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform: translate(-40%, -50%); border-top: 22px solid transparent; border-bottom: 22px solid transparent; border-left: 36px solid #fff; pointer-events: none; transition: opacity 0.2s ease; } .single-highlight-video-poster:hover .single-highlight-play { opacity: 0.75; } .single-highlight-player { display: block; width: 100%; height: 100%; border: 0; } @media (max-width: 768px) { .single-highlight { padding-top: 48px; } }