/* Layout for the data-driven sections. * * Everything is prefixed ab- and every rule is nested under .ab, because this file loads on * pages that already carry sixteen of the theme's stylesheets. Nesting stops these rules * leaking outwards; it does not stop the theme leaking in, so anything the theme sets loudly * (font-family, letter-spacing on headings) is restated here rather than inherited and hoped for. */ /* Saira, self-hosted. The concept is set in a square grotesque - superelliptical bowls, a clipped apex on the A, a double-storey a with a squared bowl - which is Eurostile or a relative of it, and not licensable to ship. Saira is the closest open equivalent, and being variable it has a width axis, so the width can be matched to the drawing rather than accepted as whatever the family happens to be. Three subsets rather than one file: the Vietnamese subset is needed for the Vietnamese-language documents, and splitting keeps the latin request at 97 KB instead of 193 KB. */ @font-face { font-family: 'Saira'; font-style: normal; font-weight: 100 900; font-stretch: 62.5% 125%; font-display: swap; src: url('fonts/saira-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Saira'; font-style: normal; font-weight: 100 900; font-stretch: 62.5% 125%; font-display: swap; src: url('fonts/saira-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Saira'; font-style: normal; font-weight: 100 900; font-stretch: 62.5% 125%; font-display: swap; src: url('fonts/saira-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* The theme reserves a permanent 15px scrollbar gutter on . Where the scrollbar floats over the page - macOS, and every phone - nothing ever fills that strip, so every full-bleed section stopped 15px short of the right edge. Released here; the one place that relied on it, the gallery viewer locking the page, compensates for the scrollbar itself. */ html { scrollbar-gutter: auto; } :root { --ab-font: 'Saira', 'Helvetica Neue', Helvetica, Arial, sans-serif; --abh-h: clamp(56px, 4.7vw, 88px); } /* The theme's own faces are gone - Gotham and Diagramm were never in the capture, so the header had been falling back to Roboto. Nothing in the chrome uses an icon font (checked: only Roboto and Diagramm appear anywhere in the header or footer), so this can be set broadly without turning a glyph into a letter. */ header, header *, footer, footer * { font-family: var(--ab-font) !important; } header a, header button, .menu-btn, .action-btn { font-stretch: 125%; } /* ============================ header ============================ Replaces the theme's mega-menu outright rather than editing it. That header was 26 KB of frozen dropdown panels per page, pointing at sections this site no longer has; the concept's header is a wordmark, seven links and a locale switch. */ /* Fixed rather than sticky: in the concept the photograph runs to the very top of the screen and the navigation floats on it. Sticky occupies a strip in the flow, which would push the hero down and leave a white band the concept does not have. Pages without a hero get that strip back as padding on the body instead. */ .abh { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: #fff; border-bottom: 1px solid #e4e1dc; transition: background .3s, border-color .3s; } .abh.is-over { background: transparent; border-bottom-color: transparent; } html:not([data-ab-hero]) body { padding-top: var(--abh-h); } .abh-bar { max-width: 1920px; margin: 0 auto; padding: 0 2.5vw; height: var(--abh-h); display: flex; align-items: center; gap: 30px; } .abh a, .abh button { color: #1d1d1b; text-decoration: none; } .abh-mark { font-family: var(--ab-font); font-weight: 800; font-stretch: 125%; font-size: clamp(18px, 1.82vw, 34px); letter-spacing: -0.02em; white-space: nowrap; flex: none; } .abh-mark span { font-weight: 600; } .abh-nav { display: flex; gap: 1.5vw; margin-left: auto; } .abh-nav a { font-family: var(--ab-font); font-weight: 700; font-stretch: 125%; font-size: clamp(13px, 1.43vw, 26px); letter-spacing: -0.012em; white-space: nowrap; padding: 24px 0; border-bottom: 2px solid transparent; margin-bottom: -1px; } .abh-nav a:hover { border-bottom-color: #cdc9c3; } .abh-nav a.is-on { border-bottom-color: #1d1d1b; } .abh-locale { display: flex; align-items: center; gap: 7px; margin-left: auto; flex: none; } .abh-locale button { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; font-family: var(--ab-font); font-weight: 700; font-stretch: 125%; font-size: 13px; color: #8d8880; padding: 6px 2px; } .abh-locale button.is-on { color: #1d1d1b; } .abh-locale span { color: #cdc9c3; font-size: 13px; } .abh-locale svg { display: block; } .abh-burger { display: none; background: none; border: 0; cursor: pointer; padding: 10px 4px; margin-left: auto; } .abh-burger span { display: block; width: 22px; height: 2px; background: #1d1d1b; margin: 4px 0; transition: transform .2s, opacity .2s; } .abh-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .abh-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .abh-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .abh-note { position: absolute; right: 28px; top: 100%; margin-top: 8px; background: #1d1d1b; color: #fff; font-family: var(--ab-font); font-size: 13px; padding: 10px 14px; z-index: 5; } @media (max-width: 1080px) { .abh-bar { height: 60px; padding: 0 18px; gap: 14px; } .abh-burger { display: block; } .abh-locale { margin-left: 0; } .abh-nav { position: absolute; left: 0; right: 0; top: 100%; margin: 0; background: #fff; box-shadow: 0 12px 24px rgba(0,0,0,.10); flex-direction: column; gap: 0; padding: 6px 18px 18px; border-bottom: 1px solid #e4e1dc; display: none; } .abh-nav.is-open { display: flex; } .abh-nav a { padding: 15px 0; font-size: 17px; border-bottom: 1px solid #efedea; margin: 0; } .abh-nav a.is-on { border-bottom-color: #1d1d1b; } } /* Off-screen but readable by assistive technology and by search. */ .ab-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ============================ homepage hero ============================ The concept's opening screen: the photograph, the claim, and the six product families. Full bleed at the shape of the screen, not the shape of the photograph. Cropping is then unavoidable, and the two things worth keeping sit at opposite ends of a 2.06:1 picture: the pale wall the words rest on, and the BossGroup logo. A 1.6:1 screen shows about 78% of the width, so one of them goes. The logo is the one that stays - the picture is anchored right, and a fade along the left carries the words instead of the wall. Type is measured from the concept drawing, which is 1920 wide: cap heights of 34px for the families, 17px for the claim. Saira's cap height is 0.69em, so those are 49px and 25px at 1920, expressed here in vw so the proportions hold at any width. */ .abhero { position: relative; height: 100vh; height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: #cfcbc4; } .abhero-bg { position: absolute; inset: 0; background-size: cover; background-position: 100% center; } /* A fade down the left, under the words only. It stops well before the logo wall, so the half of the picture that carries the product and the brand is untouched. */ .abhero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.76) 15%, rgba(255,255,255,.30) 31%, rgba(255,255,255,0) 45%); } /* Sitting the block low rather than centred. Anchoring the photograph right to keep the logo puts the window where the words used to be, and dark type on a dark mullion is unreadable. The floor and the rug along the bottom are the palest part of what is now on screen. */ .abhero-inner { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 2.5vw 4.5vh; } /* Everything the hero paints except the photograph. header.js drives --abhero-fade from the scroll position so this text is gone by the time it would reach the header. Defaulting to 1 means a page with the script blocked shows the hero exactly as before. */ .abhero-inner, .abhero-caption, .abhero-scroll { opacity: var(--abhero-fade, 1); } .abhero-claim { font-family: var(--ab-font); font-weight: 700; font-stretch: 125%; letter-spacing: -0.012em; font-size: clamp(13px, 1.28vw, 27px); line-height: 1.06; color: #1d1d1b; margin: 0 0 1.05em; } .abhero-words { display: flex; flex-direction: column; align-items: flex-start; } /* All six in solid black, with the selected one marked by a rule under it rather than by being the only one dark. Measured behind each line, the photograph averages 158-195 in luminance but dips to nearly 0 where a window mullion crosses; type at 42% grey disappeared into those bars, while black holds at both. */ .abhero-words a { font-family: var(--ab-font); font-weight: 800; font-stretch: 125%; letter-spacing: -0.02em; font-size: clamp(21px, 2.57vw, 54px); line-height: 1.34; text-decoration: none; color: #1d1d1b; align-self: flex-start; border-bottom: 0.09em solid transparent; transition: border-color .18s; margin-bottom: 0.1em; } .abhero-words a:hover { border-bottom-color: rgba(29,29,27,.35); } .abhero-words a.is-on { border-bottom-color: #1d1d1b; } .abhero-words a:focus-visible { outline: 2px solid #1d1d1b; outline-offset: 3px; } /* Bottom left, under the words and aligned with them, where the floor is pale. It began on the right and wrapped over the sofa, which is both busy and dark. */ .abhero-caption { position: absolute; right: 2.5vw; bottom: 4.5%; margin: 0; max-width: 40ch; text-align: right; font-family: var(--ab-font); font-size: clamp(11px, .78vw, 16px); line-height: 1.5; color: rgba(29,29,27,.78); } .abhero-caption strong { font-stretch: 125%; font-weight: 700; } .abhero-scroll { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); } .abhero-scroll span { display: block; width: 20px; height: 32px; border: 1.5px solid rgba(29,29,27,.55); border-radius: 11px; position: relative; } .abhero-scroll span::after { content: ''; position: absolute; left: 50%; top: 7px; width: 2px; height: 6px; margin-left: -1px; background: rgba(29,29,27,.7); animation: abhero-wheel 1.6s ease-in-out infinite; } @keyframes abhero-wheel { 0%,100% { transform: translateY(0); opacity: 1 } 60% { transform: translateY(9px); opacity: 0 } } @media (prefers-reduced-motion: reduce) { .abhero-scroll span::after { animation: none } } /* On a phone the picture and the words are stacked rather than layered. A tall narrow frame shows only a slice of a 2.06:1 photograph, and putting six lines of display type on that slice needs either a heavy wash or luck with what the slice contains. Stacked, the picture is shown at a sensible shape and the type sits on plain white, which reads at any size. The slice is anchored right so the logo is the part that survives. */ @media (max-width: 860px) { /* Stacked, the photograph is a band rather than a backdrop, so the bar has nothing to float on: transparent, it left the wordmark tangled in the palm leaves and the locale flags on top of the shield. It keeps its background here, and the page keeps the strip for it. */ .abh.is-over { background: #fff; border-bottom-color: #e4e1dc; } html[data-ab-hero] body { padding-top: var(--abh-h); } .abhero { display: block; height: auto; background: #fff; } .abhero-bg { position: relative; inset: auto; width: 100%; aspect-ratio: 3 / 2; background-position: 100% center; } .abhero-bg::after { display: none; } /* nothing to fade: the type is not on the photo */ .abhero-inner { padding: 26px 18px 0; } .abhero-claim { margin-bottom: 18px; } .abhero-words a { font-size: clamp(21px, 6.2vw, 34px); line-height: 1.22; } .abhero-caption { position: static; text-align: left; max-width: none; padding: 18px 18px 26px; font-size: 13px; border-top: 1px solid var(--ab-line); margin: 18px 18px 0; } .abhero-scroll { display: none; } } .ab { --ab-ink: #1d1d1b; --ab-mute: #6f6a62; --ab-line: #d8d5d0; --ab-wash: #f4f2ef; --ab-accent: #1d1d1b; /* Body copy sits at the normal width; the concept only shows display and navigation, and a paragraph set at 125% is wearing to read. Display type takes the wider setting below. */ font-family: var(--ab-font); font-stretch: 100%; color: var(--ab-ink); } /* Display and navigation: matched to the width in the concept drawing. The family is repeated here, not inherited: the theme sets font-family on h1 directly, so .ab's declaration never reaches a heading and every title was still rendering in Diagramm. */ .ab h1, .ab h2, .ab h3, .ab h4, .ab .ab-chap, .ab .ab-fig-v, .ab .ab-year-head h2, .ab .ab-doc-title, .ab .ab-swatch-name, .ab .ab-route-cta, .ab .ab-doc-dl, .ab .ab-submit, .ab .ab-more, .ab .ab-count, .ab .ab-post-tags, .ab .ab-filter-label, .ab .ab-spec dt { font-family: var(--ab-font); font-stretch: 125%; letter-spacing: -0.012em; /* the drawing sets it tighter than Saira's default fit */ } .ab a { color: inherit; text-decoration: none; } .ab img { max-width: 100%; height: auto; display: block; } .ab-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; } /* ---- section opener ---- */ .ab-lede { padding: 62px 0 40px; } .ab-lede h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.04; margin: 0 0 18px; font-weight: 400; } .ab-lede p { font-size: 17px; line-height: 1.6; max-width: 62ch; color: var(--ab-mute); margin: 0; } /* ---- category band: a heading, then one scrollable row of tiles ---- */ .ab-band { padding: 30px 0 44px; border-top: 1px solid var(--ab-line); } .ab-band:first-of-type { border-top: 0; } .ab-band-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 6px; } .ab-band-head h2 { font-size: 26px; margin: 0; font-weight: 500; letter-spacing: 0.01em; } .ab-band-head .ab-more { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 2px; white-space: nowrap; } .ab-band-sub { font-size: 15px; color: var(--ab-mute); margin: 0 0 22px; max-width: 70ch; } /* A scroll-snapped row rather than a carousel library: it keeps working with the keyboard, with a trackpad, and on a phone, and there is no frozen slider state to re-initialise. */ .ab-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; } .ab-row > * { scroll-snap-align: start; } .ab-tile { display: block; } .ab-tile .ab-thumb { background: var(--ab-wash); overflow: hidden; } /* A real photograph and a placeholder have different shapes; without a fixed ratio the tile carrying the photograph sat shorter than the rest of the row. */ .ab-tile img { width: 100%; aspect-ratio: 17 / 15; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); } .ab-tile:hover img { transform: scale(1.04); } .ab-tile h3 { font-size: 16px; font-weight: 500; margin: 14px 0 4px; } .ab-tile p { font-size: 13px; line-height: 1.45; color: var(--ab-mute); margin: 0; } /* ---- detail page ---- */ .ab-hero { position: relative; background: var(--ab-wash); margin-top: 40px; } .ab-hero img { width: 100%; } .ab-crumb { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ab-mute); padding: 40px 0 0; } .ab-crumb a:hover { border-bottom: 1px solid currentColor; } .ab-title { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.06; font-weight: 400; margin: 14px 0 0; } .ab-tagline { font-size: 18px; color: var(--ab-mute); margin: 12px 0 0; max-width: 62ch; } .ab-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px 40px; padding: 44px 0; margin: 44px 0 0; border-top: 1px solid var(--ab-line); border-bottom: 1px solid var(--ab-line); } .ab-spec dt { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ab-mute); margin: 0 0 6px; } .ab-spec dd { font-size: 16px; margin: 0; line-height: 1.4; } .ab-body { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 56px 0; align-items: start; } .ab-body p { font-size: 16px; line-height: 1.65; margin: 0 0 16px; } .ab-items { padding: 8px 0 80px; } .ab-items h2 { font-size: 26px; font-weight: 500; margin: 0 0 24px; } .ab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 34px 24px; } .ab-card h3 { font-size: 17px; font-weight: 500; margin: 14px 0 6px; } .ab-card .ab-card-spec { font-size: 13px; color: var(--ab-mute); line-height: 1.5; margin: 0 0 8px; } .ab-card p { font-size: 14px; line-height: 1.55; margin: 0; } /* ---- filters ---- */ .ab-filters { display: flex; flex-wrap: wrap; gap: 12px 44px; padding: 4px 0 26px; border-bottom: 1px solid var(--ab-line); } .ab-filter-label { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ab-mute); margin-bottom: 8px; } .ab-filter-opts { display: flex; flex-wrap: wrap; gap: 6px; } .ab-filter-opts button { font: inherit; font-size: 13px; line-height: 1; padding: 8px 13px; cursor: pointer; background: transparent; color: var(--ab-mute); border: 1px solid var(--ab-line); border-radius: 999px; } .ab-filter-opts button:hover { border-color: var(--ab-ink); color: var(--ab-ink); } .ab-filter-opts button.is-on { background: var(--ab-ink); border-color: var(--ab-ink); color: #fff; } .ab-count { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ab-mute); padding: 22px 0 4px; margin: 0; } .ab-empty { grid-column: 1 / -1; color: var(--ab-mute); font-size: 15px; padding: 40px 0; } /* ---- colour swatches ---- */ .ab-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 30px 20px; padding: 18px 0 80px; } .ab-swatch { display: block; } .ab-chip { display: block; aspect-ratio: 4 / 3; border: 1px solid rgba(0,0,0,.09); transition: transform .35s cubic-bezier(.2,.7,.3,1); } .ab-swatch:hover .ab-chip { transform: scale(1.03); } .ab-swatch-name { display: block; font-size: 15px; font-weight: 500; margin-top: 12px; } .ab-swatch-meta { display: block; font-size: 12px; color: var(--ab-mute); margin-top: 3px; } .ab-colour-head { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 48px; align-items: center; margin: 18px 0 0; } .ab-colour-block { aspect-ratio: 4 / 3; border: 1px solid rgba(0,0,0,.09); } .ab-note { font-size: 16px; line-height: 1.6; margin: 22px 0 0; max-width: 56ch; } /* ---- news listing: two columns, the newest story across both ---- */ .ab-news { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 40px; padding: 12px 0 88px; } .ab-post { display: block; } .ab-post.is-lead { grid-column: 1 / -1; } .ab-post-img { display: block; background: var(--ab-wash); overflow: hidden; } .ab-post img { width: 100%; transition: transform .5s cubic-bezier(.2,.7,.3,1); } .ab-post:hover img { transform: scale(1.03); } .ab-post-tags { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ab-mute); margin: 18px 0 8px; } .ab-post h2 { font-size: 22px; line-height: 1.25; font-weight: 500; margin: 0 0 10px; } .ab-post.is-lead h2 { font-size: 32px; max-width: 22ch; } .ab-post-excerpt { font-size: 15px; line-height: 1.6; color: var(--ab-mute); margin: 0 0 12px; max-width: 60ch; } .ab-post-meta { font-size: 13px; color: var(--ab-mute); margin: 0; } /* ---- article ---- */ .ab-article-title { max-width: 20ch; } .ab-article { max-width: 68ch; margin: 0 auto; padding: 56px 0 8px; } .ab-article p { font-size: 17px; line-height: 1.72; margin: 0 0 22px; } .ab-standfirst { font-size: 21px !important; line-height: 1.5 !important; margin-bottom: 32px !important; } /* ---- numbered chapter bar ---- */ /* The theme's header takes up no height in normal flow - it measures zero and its visible bar floats over the top of the document - so whatever comes first on a page has to clear it by itself. Every other block here does that through .ab-lede's top padding; the chapter bar needs its own, and the block after it then needs less. Not sticky either: the header is already sticky, and the two would stack. */ .ab-chapternav { border-bottom: 1px solid var(--ab-line); background: #fff; } .ab-chapternav + .ab-wrap .ab-lede { padding-top: 46px; } .ab-chapternav ~ div .ab-crumb { padding-top: 34px; } .ab-chapbar { display: flex; gap: 34px; overflow-x: auto; scrollbar-width: none; } .ab-chapbar::-webkit-scrollbar { display: none; } .ab-chap { display: inline-flex; gap: 6px; white-space: nowrap; padding: 18px 0 15px; font-size: 14px; color: var(--ab-mute); border-bottom: 2px solid transparent; margin-bottom: -1px; } .ab-chap:hover { color: var(--ab-ink); } .ab-chap.is-on { color: var(--ab-ink); border-bottom-color: var(--ab-ink); } .ab-chap-n { color: var(--ab-mute); } /* ---- key figures ---- */ .ab-figures { background: var(--ab-wash); padding: 62px 0 68px; margin-bottom: 8px; } .ab-fig-title { font-size: 28px; font-weight: 500; margin: 0 0 20px; } .ab-fig-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--ab-line); margin-bottom: 34px; } .ab-fig-tabs button { font: inherit; font-size: 14px; background: none; border: 0; padding: 0 0 12px; cursor: pointer; color: var(--ab-mute); border-bottom: 2px solid transparent; margin-bottom: -1px; } .ab-fig-tabs button.is-on { color: var(--ab-ink); border-bottom-color: var(--ab-ink); } .ab-fig-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 34px 40px; } .ab-fig-k { display: block; font-size: 13px; color: var(--ab-mute); margin-bottom: 8px; } .ab-fig-v { display: block; font-size: clamp(28px, 3.4vw, 44px); line-height: 1; font-weight: 300; } /* ---- chapter cards ---- */ .ab-chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 46px 32px; padding: 62px 0 88px; } .ab-chapcard .ab-chap-n { display: block; font-size: 13px; margin: 16px 0 6px; } .ab-chapcard h3 { font-size: 20px; font-weight: 500; line-height: 1.3; margin: 0 0 8px; } .ab-chapcard p { font-size: 14px; line-height: 1.6; color: var(--ab-mute); margin: 0; } /* ---- previous / next ---- */ .ab-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 48px 0 88px; border-top: 1px solid var(--ab-line); margin-top: 48px; } .ab-step { font-size: 17px; line-height: 1.35; } .ab-step span { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ab-mute); margin-bottom: 8px; } .ab-step.is-next { text-align: right; } .ab-step:hover { text-decoration: underline; text-underline-offset: 4px; } /* ---- contact ---- */ .ab-offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; padding: 8px 0 52px; border-bottom: 1px solid var(--ab-line); } .ab-office h2 { font-size: 15px; font-weight: 500; margin: 0 0 12px; } .ab-office p { font-size: 15px; line-height: 1.6; color: var(--ab-mute); margin: 0 0 12px; } .ab-office a:hover { color: var(--ab-ink); border-bottom: 1px solid currentColor; } .ab-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; padding: 52px 0 88px; } .ab-route { display: flex; flex-direction: column; background: var(--ab-wash); padding: 34px 30px 30px; transition: background .25s; } .ab-route:hover { background: #ece9e4; } .ab-route h3 { font-size: 21px; font-weight: 500; line-height: 1.25; margin: 0 0 12px; } .ab-route p { font-size: 14px; line-height: 1.6; color: var(--ab-mute); margin: 0 0 26px; flex: 1; } .ab-route-cta { align-self: flex-start; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--ab-ink); padding: 11px 26px; } .ab-route:hover .ab-route-cta { background: var(--ab-ink); color: #fff; } /* ---- form ---- */ .ab-form { max-width: 860px; padding: 44px 0 0; } .ab-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; } .ab-field.is-wide { grid-column: 1 / -1; } .ab-field label { display: block; font-size: 13px; color: var(--ab-mute); margin-bottom: 7px; } .ab-field abbr { color: #a33; text-decoration: none; margin-left: 3px; } .ab-field input, .ab-field select, .ab-field textarea { font: inherit; font-size: 15px; width: 100%; padding: 12px 14px; border: 1px solid var(--ab-line); background: #fff; color: var(--ab-ink); border-radius: 0; } .ab-field input[type="file"] { padding: 10px 12px; background: var(--ab-wash); } .ab-field textarea { resize: vertical; } .ab-field input:focus, .ab-field select:focus, .ab-field textarea:focus { outline: 2px solid var(--ab-ink); outline-offset: -2px; } .ab-field.is-bad input, .ab-field.is-bad select, .ab-field.is-bad textarea { border-color: #a33; } .ab-hint { display: block; font-size: 12px; color: var(--ab-mute); margin-top: 6px; } .ab-consent { padding: 30px 0 8px; display: grid; gap: 12px; } .ab-consent label { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--ab-mute); } .ab-consent input { margin-top: 2px; } .ab-submit { font: inherit; font-size: 14px; letter-spacing: .06em; padding: 14px 40px; margin-top: 22px; cursor: pointer; background: var(--ab-ink); color: #fff; border: 1px solid var(--ab-ink); } .ab-submit:hover { background: #000; } .ab-form-note { font-size: 14px; line-height: 1.55; margin: 20px 0 0; max-width: 62ch; } .ab-form-note.is-bad { color: #a33; } .ab-form-note.is-ok { color: var(--ab-mute); } @media (max-width: 700px) { .ab-fields { grid-template-columns: 1fr; } } /* ---- projects: albums by year ---- */ .ab-year { padding: 30px 0 52px; border-top: 1px solid var(--ab-line); } .ab-year:first-of-type { border-top: 0; } .ab-year-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 26px; } .ab-year-head h2 { font-size: 40px; font-weight: 300; margin: 0; letter-spacing: -0.01em; } .ab-year-head span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ab-mute); } .ab-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 40px 28px; } .ab-album-cover { display: block; position: relative; background: var(--ab-wash); overflow: hidden; } .ab-album-cover img { width: 100%; transition: transform .55s cubic-bezier(.2,.7,.3,1); } .ab-album:hover .ab-album-cover img { transform: scale(1.04); } .ab-album-count { position: absolute; left: 14px; bottom: 14px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: rgba(255,255,255,.94); color: var(--ab-ink); padding: 7px 12px; } .ab-album h3 { font-size: 19px; font-weight: 500; margin: 16px 0 5px; } .ab-album-where { font-size: 14px; color: var(--ab-mute); margin: 0 0 3px; } .ab-album-scope { font-size: 13px; color: var(--ab-mute); margin: 0; } /* ---- contact sheet ---- A uniform three-column grid with the opening frame across the top. An earlier version mixed two- and three-column spans for rhythm; the spans did not tile into the row and left a dead column down the right of every album. Rhythm is not worth a hole in the page. */ .ab-sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 14px 0 80px; } .ab-shot { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; font: inherit; } .ab-shot:first-child { grid-column: 1 / -1; } .ab-shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--ab-wash); transition: opacity .3s; } .ab-shot:first-child img { aspect-ratio: 21 / 9; } .ab-shot:hover img { opacity: .86; } .ab-shot:focus-visible { outline: 2px solid var(--ab-ink); outline-offset: 3px; } .ab-shot-cap { display: block; font-size: 12px; line-height: 1.45; color: var(--ab-mute); margin-top: 9px; } /* ---- gallery viewer ---- */ .ab-viewer { position: fixed; inset: 0; z-index: 2000; background: rgba(18,17,16,.96); display: grid; place-items: center; padding: 56px 76px; } .ab-viewer[hidden] { display: none; } .ab-v-stage { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; gap: 16px; } .ab-v-stage img { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; margin: 0 auto; } .ab-v-stage figcaption { display: flex; justify-content: space-between; gap: 24px; color: #cfcbc4; font-size: 14px; } .ab-v-count { color: #8d8880; white-space: nowrap; } .ab-viewer button { position: absolute; background: none; border: 0; color: #cfcbc4; cursor: pointer; font-size: 28px; line-height: 1; padding: 14px 18px; } .ab-viewer button:hover { color: #fff; } .ab-viewer button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .ab-v-close { top: 10px; right: 14px; font-size: 40px !important; } .ab-v-prev { left: 8px; top: 50%; transform: translateY(-50%); } .ab-v-next { right: 8px; top: 50%; transform: translateY(-50%); } @media (max-width: 900px) { .ab-sheet { grid-template-columns: repeat(2, 1fr); gap: 12px; } .ab-shot, .ab-shot.is-wide { grid-column: span 1; } .ab-viewer { padding: 52px 12px 20px; } .ab-v-prev { left: 0; } .ab-v-next { right: 0; } } /* ---- documents ---- */ .ab-doccat { padding: 34px 0 12px; border-top: 1px solid var(--ab-line); } .ab-doccat:first-of-type { border-top: 0; } .ab-doccat-head { margin-bottom: 20px; } .ab-doccat-head h2 { font-size: 24px; font-weight: 500; margin: 0 0 6px; } .ab-doccat-head p { font-size: 14px; color: var(--ab-mute); margin: 0; max-width: 66ch; } .ab-doc { display: flex; align-items: center; gap: 20px; border-top: 1px solid var(--ab-line); } .ab-doc:last-child { border-bottom: 1px solid var(--ab-line); } .ab-doc-main { display: flex; gap: 20px; align-items: flex-start; flex: 1; padding: 20px 0; min-width: 0; } .ab-doc:hover { background: var(--ab-wash); } .ab-doc-icon { flex: none; width: 44px; height: 54px; display: grid; place-items: center; font-size: 10px; letter-spacing: .08em; color: #fff; background: #b4302a; clip-path: polygon(0 0, 74% 0, 100% 22%, 100% 100%, 0 100%); } .ab-doc-text { min-width: 0; } .ab-doc-title { display: block; font-size: 16px; font-weight: 500; } .ab-doc-blurb { display: block; font-size: 14px; line-height: 1.55; color: var(--ab-mute); margin: 5px 0 6px; max-width: 76ch; } .ab-doc-meta { display: block; font-size: 12px; letter-spacing: .04em; color: var(--ab-mute); } .ab-doc-dl { flex: none; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--ab-ink); padding: 10px 22px; margin-right: 4px; } .ab-doc-dl:hover { background: var(--ab-ink); color: #fff; } .ab-docnote { font-size: 14px; color: var(--ab-mute); padding: 34px 0 88px; margin: 0; } .ab-docactions { display: flex; align-items: center; gap: 26px; margin: 30px 0 0; } /* .ab a { color: inherit } is two classes deep and wins over .ab-submit's white, which left this button as a black rectangle with invisible text. Match the specificity rather than reaching for !important. */ .ab .ab-docactions a.ab-submit { margin: 0; display: inline-block; color: #fff; } .ab-plain { font-size: 14px; color: var(--ab-mute); border-bottom: 1px solid currentColor; } .ab-plain:hover { color: var(--ab-ink); } .ab-preview { margin: 8px 0 0; background: var(--ab-wash); border: 1px solid var(--ab-line); } .ab-preview object { display: block; width: 100%; height: 720px; } .ab-preview-fallback { padding: 48px 24px; text-align: center; font-size: 15px; color: var(--ab-mute); } .ab-preview-fallback a { border-bottom: 1px solid currentColor; } .ab-docminis { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px 24px; } .ab-doc-mini { display: flex; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--ab-line); } .ab-doc-mini:hover .ab-doc-title { text-decoration: underline; text-underline-offset: 3px; } .ab-doc-mini .ab-doc-icon { width: 34px; height: 42px; font-size: 9px; } @media (max-width: 700px) { .ab-doc { flex-wrap: wrap; gap: 0; padding-bottom: 16px; } .ab-doc-dl { margin: 0 0 4px 64px; } .ab-preview object { height: 460px; } } .ab-fail { padding: 80px 0; color: #8a2020; font-size: 15px; } @media (max-width: 900px) { .ab-body { grid-template-columns: 1fr; gap: 0; } .ab-lede { padding: 64px 0 28px; } } @media (max-width: 640px) { .ab-wrap { padding: 0 18px; } .ab-row { grid-auto-columns: minmax(190px, 1fr); gap: 14px; } .ab-specs { padding: 32px 0; gap: 22px; } } /* ============================ footer ============================ Replaces the theme's footer, which carried five columns of links to a different company: product warranties, city showrooms, a press room. Eighty-four of the hundred-odd visible mentions of the old brand were in this block, repeated on every page. */ .abf { background: #1d1d1b; color: #cfcbc4; margin-top: 0; font-family: var(--ab-font); padding: 0; } .abf a { color: inherit; text-decoration: none; } .abf-inner { max-width: 1920px; margin: 0 auto; padding: 5vw 2.5vw 2.6vw; } .abf-top { display: flex; flex-wrap: wrap; gap: 24px 56px; align-items: baseline; padding-bottom: 42px; border-bottom: 1px solid rgba(255,255,255,.14); } .abf-mark { font-weight: 800; font-stretch: 125%; font-size: clamp(20px, 1.82vw, 34px); letter-spacing: -0.02em; color: #fff; white-space: nowrap; } .abf-mark span { font-weight: 600; } .abf-line { margin: 0; font-size: 14px; line-height: 1.6; color: #918b82; max-width: 46ch; } .abf-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 40px 32px; padding: 42px 0 46px; } .abf-col h2 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #7e7871; margin: 0 0 16px; font-weight: 700; font-stretch: 125%; } .abf-col a { display: block; font-size: 14px; line-height: 1.5; padding: 5px 0; } .abf-col a:hover { color: #fff; } .abf-contact p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: #918b82; } .abf-contact a:hover { color: #fff; } .abf-legal { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; margin: 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); font-size: 12px; color: #7e7871; } .abf-note { color: #6b665f; } @media (max-width: 700px) { .abf-inner { padding: 44px 18px 26px; } .abf-cols { gap: 30px 20px; padding: 32px 0 34px; } } /* ============================ homepage sections ============================ What replaced the old homepage below the factory map. Each band is drawn from the same JSON as the section it points at, so the homepage cannot advertise something the site no longer has. */ .abhb-band { padding: clamp(48px, 5vw, 92px) 0; } .abhb-band--wash { background: var(--ab-wash); } .abhb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 26px; } .abhb-head h2 { font-family: var(--ab-font); font-stretch: 125%; letter-spacing: -0.012em; font-size: clamp(24px, 2.2vw, 40px); font-weight: 600; margin: 0; } .abhb .ab-swatches { padding-bottom: 0; } .abhb .ab-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .abhb .ab-card p { margin-top: 6px; } .abhb-cta { background: #1d1d1b; color: #fff; padding: clamp(52px, 5.5vw, 104px) 0; } .abhb-cta h2 { font-family: var(--ab-font); font-stretch: 125%; letter-spacing: -0.02em; color: #fff; font-size: clamp(28px, 3.4vw, 60px); font-weight: 700; margin: 0 0 14px; } .abhb-cta p { font-size: 17px; line-height: 1.6; color: #b6b0a8; margin: 0 0 30px; max-width: 52ch; } .ab .abhb-cta a.ab-submit { display: inline-block; background: #fff; color: #1d1d1b; border-color: #fff; } .ab .abhb-cta a.ab-submit:hover { background: #e9e5df; }