/* Acadiana Floor & Shower Co. LLC One light sans at large sizes, cream ground, full-bleed photography, everything drifts in on scroll. Gold is sampled from the client's flyer. */ :root { --ink: #181410; --ink-2: rgba(24, 20, 16, 0.66); --ink-3: rgba(24, 20, 16, 0.46); --line: rgba(24, 20, 16, 0.16); --cream: #f5eee5; --cream-2: #ede4d8; --paper: #ffffff; --gold: #b08e68; --gold-deep: #8a6b47; /* His gold sampled off the flyer is #b08e68 on paper. On a near-black ground that reads muddy, so the dark bands use the lifted value the dark flyer itself uses, #c8a56c. Same hue, same brand, enough luminance to hold. */ --gold-lift: #c8a56c; --on-dark: #ffffff; --on-dark-2: rgba(255, 255, 255, 0.72); --on-dark-3: rgba(255, 255, 255, 0.5); --rule-dark: rgba(255, 255, 255, 0.2); --sans: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --serif: 'Playfair Display', 'Times New Roman', Georgia, serif; /* Playfair ships old-style figures: 9, 5, 7 and 3 hang below the baseline while 6 and 8 stand tall. Right in running prose, wrong on a phone number, where it reads as a typo rather than a typeface. Mike caught it on the old design, where the number was set in Playfair at 56px. The redesign moved the number to Urbanist so it cannot happen today; this keeps it that way if a digit ever lands in the serif again. */ --gut: clamp(20px, 3.8vw, 54px); --band: clamp(72px, 11vw, 110px); --wrap: 1320px; --drift: cubic-bezier(0.17, 0.55, 0.55, 1); --swift: cubic-bezier(0.4, 0, 0.2, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 17px; font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3 { margin: 0; font-weight: 300; line-height: 1.05; letter-spacing: -0.01em; } .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--on-dark); padding: 14px 20px; z-index: 200; font-size: 15px; } .skip:focus { left: 0; } :where(a, button, input, textarea, select):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); } /* --------------------------------------------------------------- reveal */ /* Slow on purpose. 1.2s and 30px of travel is what makes it read as drifting rather than popping. app.js adds .revealed on intersection. */ /* Content is visible by default. The hidden state applies only while .js-reveal is on , which the head script adds and then takes back off if app.js never checks in. Hiding content in plain CSS and relying on a script to un-hide it means one failed request blanks the whole page, which is exactly what happened on a phone on 2026-09-24. */ .reveal { transition: opacity 1.2s var(--drift), transform 1.2s var(--drift); will-change: opacity, transform; } .js-reveal .reveal { opacity: 0; } .js-reveal .reveal-up { transform: translateY(30px); } .js-reveal .reveal-right { transform: translateX(-30px); } .js-reveal .reveal-scale { transform: scale(1.06); } .js-reveal .revealed { opacity: 1; transform: none; } .delay-100 { transition-delay: 0.1s; } .delay-200 { transition-delay: 0.2s; } .delay-300 { transition-delay: 0.3s; } .delay-400 { transition-delay: 0.4s; } .delay-500 { transition-delay: 0.5s; } @media (prefers-reduced-motion: reduce) { .js-reveal .reveal, .js-reveal .reveal-up, .js-reveal .reveal-right, .js-reveal .reveal-scale { opacity: 1; transform: none; transition: none; } } /* --------------------------------------------------------------- header */ /* A wash under the header, full width, so the nav always sits on the same ground. Without it the word HOME straddled the seam where the hero's dark panel meets the photograph, half on black and half on bright marble, and read as a word cut in two. It also keeps white nav legible over any photo. The solid stuck background replaces it on scroll. */ .hdr::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(24, 20, 16, 0.66) 0%, rgba(24, 20, 16, 0.34) 58%, rgba(24, 20, 16, 0) 100%); transition: opacity 0.3s var(--swift); } .hdr.is-stuck::before { opacity: 0; } .hdr-in { position: relative; } /* The home page opens with the full lockup in the hero, so the small one in the corner is the same mark twice on one screen. It fades in once the header goes solid and the hero is behind you. */ .lockup { transition: opacity 0.3s var(--swift), visibility 0.3s var(--swift); } @media (min-width: 881px) { .home .hdr .lockup { display: none; } } .hdr { position: fixed; top: 0; left: 0; width: 100%; z-index: 50; padding: 23px var(--gut); color: var(--on-dark); transition: background 0.3s var(--swift), padding 0.3s var(--swift), backdrop-filter 0.3s var(--swift); } .hdr.is-stuck { background: rgba(24, 20, 16, 0.82); backdrop-filter: saturate(140%) blur(12px); padding-block: 15px; } .hdr-in { display: flex; align-items: center; gap: 24px; } .lockup { display: flex; align-items: center; gap: 14px; text-decoration: none; } .lockup svg { width: 41px; height: auto; flex: none; transition: width 0.3s var(--swift); } .hdr.is-stuck .lockup svg { width: 36px; } .lockup-txt { display: grid; gap: 4px; } .lockup-name { font-family: var(--serif); font-weight: 500; font-size: 24px; letter-spacing: 0.15em; line-height: 1; } .lockup-sub { font-size: 14px; font-weight: 400; letter-spacing: 0.2em; line-height: 1; color: var(--on-dark-2); white-space: nowrap; } .nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); } .hdr-phone { margin-left: clamp(10px, 1.6vw, 26px); } .nav a { text-decoration: none; font-size: 16px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark); padding-bottom: 3px; border-bottom: 1px solid transparent; transition: border-color 0.25s var(--swift), color 0.25s var(--swift); } .nav a:hover { border-bottom-color: var(--on-dark); } .nav a[aria-current='page'] { border-bottom-color: var(--gold); } .hdr-phone { text-decoration: none; font-size: 16px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark); border-bottom: 1px solid var(--on-dark); padding-bottom: 3px; white-space: nowrap; transition: color 0.25s var(--swift), border-color 0.25s var(--swift); } .hdr-phone:hover { color: var(--gold); border-bottom-color: var(--gold); } .burger { display: none; background: none; border: 1px solid var(--rule-dark); width: 44px; height: 44px; cursor: pointer; color: var(--on-dark); align-items: center; justify-content: center; } .burger svg { width: 20px; height: 20px; } @media (max-width: 1000px) { .nav { position: fixed; inset: 0 0 auto 0; padding: 96px var(--gut) 34px; background: rgba(24, 20, 16, 0.97); backdrop-filter: blur(14px); flex-direction: column; align-items: stretch; gap: 0; z-index: -1; } .nav[hidden] { display: none; } .nav a { padding: 18px 0; font-size: 19px; border-bottom: 1px solid var(--rule-dark); } .nav a:hover, .nav a[aria-current='page'] { border-bottom-color: var(--rule-dark); } .burger { display: inline-flex; } .hdr-phone { font-size: 16px; } } /* The subline is half the company's name. Hiding it on a phone left the header reading just "ACADIANA", which is what Mike was looking at. It stays; the mark and the wordmark give up the room instead. */ @media (max-width: 560px) { .lockup svg { width: 36px; } .hdr.is-stuck .lockup svg { width: 32px; } .lockup-name { font-size: 21px; } .lockup-sub { font-size: 14px; letter-spacing: 0.14em; } .hdr-phone { display: none; } } /* Below about 360px there is genuinely no room for it beside the burger, and 14px is the floor. It is the one width where the subline goes. */ @media (max-width: 360px) { .lockup-sub { display: none; } } /* ----------------------------------------------------------------- hero */ .hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: flex-end; color: var(--on-dark); overflow: clip; } .hero-sm { min-height: 64vh; min-height: 64dvh; } .hero-pic { position: absolute; inset: 0; } .hero-pic img { width: 100%; height: 100%; object-fit: cover; } .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24, 20, 16, 0.52) 0%, rgba(24, 20, 16, 0.14) 32%, rgba(24, 20, 16, 0.78) 100%); } /* Full bleed to the gutter, not to the content wrap. The headline sitting hard against the left edge is most of what makes the reference feel big. */ .hero-in { position: relative; z-index: 2; padding: 140px var(--gut) clamp(44px, 6.5vw, 86px); width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .hero h1 { font-size: clamp(40px, 6.6vw, 80px); max-width: 15ch; } .hero-sm h1 { font-size: clamp(36px, 5.2vw, 62px); } .hero-link { text-decoration: none; font-size: clamp(17px, 1.5vw, 20px); font-weight: 400; color: var(--on-dark); border-bottom: 1px solid var(--on-dark-3); padding-bottom: 6px; white-space: nowrap; transition: border-color 0.25s var(--swift), color 0.25s var(--swift); } .hero-link:hover { color: var(--gold); border-bottom-color: var(--gold); } /* dark hero with no photograph, for pages that have no image worth the space */ .hero-dark { background: var(--ink); min-height: 58vh; min-height: 58dvh; } .hero-dark::after { display: none; } /* Two-column hero: type on solid ink at the left, a tall photograph holding the right edge. Every finished photo in this set is portrait, and a portrait photo stretched across a full-bleed hero has to be cropped to a letterbox that throws away the part worth looking at. This keeps the whole frame. */ .hero-2col { display: grid; grid-template-columns: 1fr minmax(300px, 46%); background: var(--ink); } .hero-2col::after { display: none; } /* The photo stays first in the source so it is the LCP candidate and can carry fetchpriority, but it sits in the right-hand column. Type on the left. */ .hero-2col .hero-pic { grid-column: 2; grid-row: 1; position: relative; inset: auto; } .hero-2col .hero-in { grid-column: 1; grid-row: 1; } .hero-2col .hero-pic img { width: 100%; height: 100%; object-fit: cover; } /* The fixed header runs over the photo, and these photos are bright white at the top. Without this the white nav disappears into the marble. */ .hero-2col .hero-pic::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(24, 20, 16, 0.58) 0%, rgba(24, 20, 16, 0.16) 24%, rgba(24, 20, 16, 0) 44%); } .hero-2col .hero-in { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: clamp(22px, 3vw, 34px); padding-right: clamp(28px, 4vw, 64px); } /* Narrower measure than the full-bleed hero, so the tagline breaks after each sentence instead of stranding a word on its own line. */ .hero-2col h1 { max-width: 11ch; } /* The home hero's left panel carries the full lockup instead of a headline. Sizes are smaller than the closer band's because this is a column at roughly half the viewport, not a full-width band: the closer's 7vw wordmark overruns the column at about 1100px. */ .hero-2col .hero-lockup { align-items: center; justify-content: center; text-align: center; gap: 0; padding: clamp(104px, 13vw, 150px) clamp(24px, 3vw, 48px) clamp(48px, 7vw, 86px); } .hero-2col .hero-lockup .brand-mark { width: clamp(54px, 5.6vw, 80px); margin: 0; } .hero-2col .hero-lockup h1 { max-width: none; margin-top: clamp(18px, 2.6vw, 28px); font-weight: 500; } .hero-2col .hero-lockup .brand-name { display: block; font-size: clamp(32px, 5vw, 68px); margin-top: 0; } .hero-2col .hero-lockup .brand-sub { display: block; font-size: clamp(14px, 1.5vw, 19px); margin-top: clamp(10px, 1.4vw, 16px); } .hero-2col .hero-lockup .brand-rule { width: 100%; max-width: 380px; margin-top: clamp(20px, 2.6vw, 30px); } .hero-2col .hero-lockup .brand-tag { font-size: clamp(14px, 1.5vw, 18px); margin-top: clamp(18px, 2.2vw, 26px); } .hero-2col .hero-lockup .hero-link { margin-top: clamp(28px, 3.6vw, 44px); } @media (max-width: 880px) { .hero-2col .hero-lockup { padding-block: clamp(44px, 8vw, 64px) clamp(52px, 9vw, 76px); } } @media (max-width: 880px) { .hero-2col { grid-template-columns: 1fr; min-height: 0; } .hero-2col .hero-pic { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 5; } /* The header sits over this photo again and these photos are bright at the top, so the white mark and burger need something to sit on. */ .hero-2col .hero-pic::after { background: linear-gradient(180deg, rgba(24, 20, 16, 0.74) 0%, rgba(24, 20, 16, 0.34) 16%, rgba(24, 20, 16, 0) 36%); } .hero-2col .hero-in { grid-column: 1; grid-row: 2; padding: clamp(40px, 7vw, 64px) var(--gut) clamp(48px, 8vw, 72px); } .hero-2col h1 { max-width: 14ch; } /* A phone stacks, so the full lockup would be a second logo sitting directly under the header. The mark and rule go, and the name stays only for screen readers; the header shows the logo instead. */ .hero-2col .hero-lockup .brand-mark, .hero-2col .hero-lockup .brand-rule { display: none; } .hero-2col .hero-lockup h1 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .hero-2col .hero-lockup .brand-tag { margin-top: 0; } } /* A single tall photograph on the ink ground, standing in for the full-bleed band on pages where no landscape source is good enough to fill one. */ .plate { background: var(--ink); padding-block: clamp(56px, 8vw, 96px); } .plate-in { display: flex; justify-content: center; } .plate img { width: auto; height: auto; max-height: 72vh; max-height: 72dvh; max-width: min(100%, 620px); object-fit: contain; } /* --------------------------------------------------------------- bands */ .band { padding-block: var(--band); background: var(--cream); } .band-dark { background: var(--ink); color: var(--on-dark); } .band-tight { padding-block: clamp(48px, 7vw, 76px); } /* two column: statement left, prose right. The reference's core rhythm. */ .duo { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(28px, 5vw, 72px); align-items: start; } @media (max-width: 880px) { .duo { grid-template-columns: 1fr; } } .duo h2 { font-size: clamp(32px, 4.4vw, 60px); } .lede { font-size: clamp(20px, 2.3vw, 30px); font-weight: 300; line-height: 1.28; color: var(--ink); margin: 0; max-width: 30ch; } .duo .lede { max-width: 38ch; } .lede + .lede { margin-top: 1em; } /* ------------------------------------------------------- full-bleed shot */ .shot { position: relative; height: 100vh; height: 100dvh; overflow: clip; } .shot picture { display: block; width: 100%; height: 100%; } .shot img { width: 100%; height: 100%; object-fit: cover; } .shot-sm { height: 62vh; height: 62dvh; } /* three portrait panels reading as one band. Suits a portrait-heavy set better than one wide photo, and each panel only needs 1/3 the pixels. */ .triptych { display: grid; grid-template-columns: repeat(3, 1fr); height: 88vh; height: 88dvh; overflow: clip; } .triptych > * { position: relative; overflow: clip; } .triptych img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 760px) { .triptych { grid-template-columns: 1fr; height: auto; } .triptych > * { aspect-ratio: 4 / 5; } .triptych > *:nth-child(3) { display: none; } } /* ------------------------------------------------------------- services */ .svc { border-top: 1px solid var(--line); margin-top: clamp(40px, 6vw, 72px); } .svc a { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: clamp(24px, 3.4vw, 40px) 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: padding-left 0.35s var(--drift), color 0.25s var(--swift); } .svc a:hover { padding-left: 16px; color: var(--gold-deep); } .svc-name { font-size: clamp(26px, 3.6vw, 46px); font-weight: 300; line-height: 1.1; } .svc-n { font-size: 14px; font-weight: 500; letter-spacing: 0.2em; color: var(--ink-3); } /* ---------------------------------------------------------------- strip */ .strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 18px); } .strip a { display: block; overflow: clip; background: var(--cream-2); } .strip img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; transition: transform 0.9s var(--drift); } .strip a:hover img { transform: scale(1.05); } @media (max-width: 720px) { .strip { grid-template-columns: repeat(2, 1fr); } } .sec-foot { margin-top: clamp(32px, 5vw, 54px); } /* ---------------------------------------------------------------- links */ .ulink { display: inline-block; text-decoration: none; font-size: 17px; border-bottom: 1px solid var(--line); padding-bottom: 6px; transition: border-color 0.25s var(--swift), color 0.25s var(--swift); } .ulink:hover { color: var(--gold-deep); border-bottom-color: var(--gold); } .band-dark .ulink { border-bottom-color: var(--on-dark-3); } .band-dark .ulink:hover { color: var(--gold); border-bottom-color: var(--gold); } .label { font-size: 14px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); } .band-dark .label { color: var(--on-dark-3); } /* --------------------------------------------------- services, flyer style */ /* The four marks off Brandon's flyer, rebuilt: gold line icons, hairline gold dividers, tracked caps underneath. Each one is a link into the gallery. */ .svc-head { font-size: clamp(32px, 4.4vw, 60px); color: var(--on-dark); } /* Two up on a phone, so the heading reads better over the middle of them. */ @media (max-width: 720px) { .svc-head { text-align: center; } } .svc-row { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(40px, 6vw, 68px); } .svc-row a { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: clamp(24px, 3vw, 38px) 14px; text-decoration: none; color: var(--on-dark); border-left: 1px solid rgba(200, 165, 108, 0.34); transition: background 0.3s var(--swift); } .svc-row a:first-child { border-left: 0; } .svc-row a:hover { background: rgba(200, 165, 108, 0.09); } .svc-row svg { width: clamp(56px, 6vw, 68px); height: auto; color: var(--gold-lift); } .svc-row span { font-size: 15px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.55; text-align: center; max-width: 11ch; } @media (max-width: 720px) { .svc-row { grid-template-columns: repeat(2, 1fr); } .svc-row a:nth-child(3) { border-left: 0; } .svc-row a:nth-child(-n + 2) { border-bottom: 1px solid rgba(200, 165, 108, 0.34); } } /* -------------------------------------------------------------- banner */ /* Gallery pages led with a two column hero carrying nothing but a title and a phone link, which left half the screen as an empty black panel. This is a short full-bleed photograph with the title sitting on it instead: the work starts at the top of the page and the grid is a scroll closer. */ .banner { position: relative; min-height: 52vh; min-height: 52dvh; display: flex; align-items: flex-end; overflow: clip; color: var(--on-dark); } .banner-pic { position: absolute; inset: 0; } .banner-pic img { width: 100%; height: 100%; object-fit: cover; } .banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24, 20, 16, 0.64) 0%, rgba(24, 20, 16, 0.26) 42%, rgba(24, 20, 16, 0.82) 100%); } .banner-in { position: relative; z-index: 2; width: 100%; padding: 150px var(--gut) clamp(34px, 5vw, 56px); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .banner h1 { font-size: clamp(38px, 6vw, 74px); max-width: 16ch; } @media (max-width: 700px) { .banner { min-height: 46vh; min-height: 46dvh; } .banner-in { padding-top: 120px; } } /* --------------------------------------------------- the brand closer band */ /* The bottom half of the flyer, rebuilt in markup. Nothing here is an image. */ .brand { text-align: center; } .brand-mark { width: clamp(64px, 8vw, 92px); height: auto; margin-inline: auto; } .brand-name { font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 7vw, 76px); letter-spacing: 0.16em; line-height: 1; margin-top: clamp(20px, 3vw, 30px); padding-left: 0.16em; font-variant-numeric: lining-nums tabular-nums; } .brand-sub { font-family: var(--serif); font-weight: 500; font-size: clamp(15px, 1.9vw, 22px); letter-spacing: 0.26em; color: var(--gold-lift); margin-top: clamp(12px, 1.6vw, 18px); padding-left: 0.26em; } /* the gold rule with a diamond set into the middle of it */ .brand-rule { display: flex; align-items: center; justify-content: center; gap: 14px; margin: clamp(22px, 3vw, 34px) auto 0; max-width: 620px; } .brand-rule::before, .brand-rule::after { content: ''; flex: 1; height: 1px; background: rgba(200, 165, 108, 0.55); } .brand-rule i { width: 9px; height: 9px; background: var(--gold-lift); transform: rotate(45deg); } .brand-tag { font-size: clamp(15px, 2vw, 21px); font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-dark-2); margin-top: clamp(20px, 2.6vw, 28px); padding-left: 0.24em; } .brand-eyebrow { display: block; font-size: 15px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-lift); padding-left: 0.22em; } .brand-script { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(28px, 4.4vw, 52px); line-height: 1.15; color: var(--gold-lift); margin-top: clamp(34px, 5vw, 56px); } .brand-script em { display: block; font-style: normal; font-family: var(--sans); font-weight: 400; font-size: clamp(14px, 1.7vw, 19px); letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-dark-2); margin-top: clamp(12px, 1.6vw, 18px); padding-left: 0.24em; } .brand-marks { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px clamp(24px, 4vw, 56px); margin-top: clamp(34px, 5vw, 54px); padding-top: clamp(28px, 4vw, 42px); border-top: 1px solid rgba(200, 165, 108, 0.34); } .brand-marks span { font-size: 15px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark); padding-left: 0.2em; } /* ------------------------------------------------------------- call band */ .call { text-align: center; } .call h2 { font-size: clamp(30px, 4.4vw, 58px); color: var(--on-dark); } .call-num { display: inline-block; margin-top: clamp(24px, 4vw, 44px); font-size: clamp(38px, 7.4vw, 92px); font-weight: 300; line-height: 1; color: var(--on-dark); text-decoration: none; border-bottom: 1px solid var(--rule-dark); padding-bottom: 12px; transition: color 0.3s var(--swift), border-color 0.3s var(--swift); } .call-num:hover { color: var(--gold); border-bottom-color: var(--gold); } .call-sub { margin: clamp(26px, 4vw, 40px) 0 0; color: var(--on-dark-2); font-size: 17px; } /* --------------------------------------------------------------- footer */ .ftr { background: var(--cream); border-top: 1px solid var(--line); padding-block: clamp(48px, 7vw, 76px) 34px; } .ftr-in { display: flex; flex-wrap: wrap; gap: 40px 64px; justify-content: space-between; } .lockup-name, .ftr-name { font-variant-numeric: lining-nums tabular-nums; } .ftr-name { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: 0.15em; } .ftr-sub { font-size: 14px; letter-spacing: 0.2em; color: var(--gold-deep); margin-top: 8px; } .ftr-meta { display: grid; gap: 8px; margin-top: 24px; font-style: normal; font-size: 17px; color: var(--ink-2); } .ftr-meta a { text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 3px; } .ftr-meta a:hover { color: var(--gold-deep); border-bottom-color: var(--gold); } .ftr-nav { display: flex; flex-direction: column; gap: 14px; } .ftr-nav a { font-size: 17px; text-decoration: none; color: var(--ink-2); } .ftr-nav a:hover { color: var(--gold-deep); } .ftr-bottom { margin-top: clamp(40px, 6vw, 64px); padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 15px; color: var(--ink-3); } .ftr-bottom a { color: var(--ink-3); } /* ------------------------------------------------------------- work page */ .filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(32px, 5vw, 54px); } .filters button { font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 13px 24px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); cursor: pointer; transition: background 0.25s var(--swift), color 0.25s var(--swift), border-color 0.25s var(--swift); } .filters button:hover { border-color: var(--ink); color: var(--ink); } .filters button[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--on-dark); } .grid { columns: 3 300px; column-gap: clamp(10px, 1.4vw, 18px); margin-top: clamp(28px, 4vw, 44px); } .grid figure { margin: 0 0 clamp(10px, 1.4vw, 18px); break-inside: avoid; background: var(--cream-2); } .grid button.tile { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: clip; } .grid img { width: 100%; height: auto; transition: transform 0.9s var(--drift); } .grid button.tile:hover img { transform: scale(1.04); } .grid figure[hidden] { display: none; } /* Announced, never shown. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* lightbox */ .lb { position: fixed; inset: 0; z-index: 300; background: rgba(15, 12, 9, 0.97); display: grid; place-items: center; padding: clamp(16px, 4vw, 56px); } .lb[hidden] { display: none; } .lb img { max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; } .lb-btn { position: absolute; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--rule-dark); color: #fff; width: 54px; height: 54px; display: grid; place-items: center; cursor: pointer; transition: background 0.25s var(--swift); } .lb-btn:hover { background: rgba(255, 255, 255, 0.22); } .lb-btn svg { width: 22px; height: 22px; } .lb-close { top: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px); } .lb-prev { left: clamp(10px, 2vw, 28px); top: 50%; transform: translateY(-50%); } .lb-next { right: clamp(10px, 2vw, 28px); top: 50%; transform: translateY(-50%); } @media (max-width: 560px) { .lb-btn { width: 46px; height: 46px; } } /* ---------------------------------------------------------- contact page */ .reach { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: clamp(40px, 6vw, 72px); } .reach a, .reach .reach-static { background: var(--cream); padding: clamp(30px, 4vw, 44px) clamp(22px, 2.6vw, 34px); text-decoration: none; display: flex; flex-direction: column; gap: 14px; transition: background 0.3s var(--swift); } .reach a:hover { background: var(--paper); } .reach svg { width: 26px; height: 26px; color: var(--gold); } .reach-label { font-size: 14px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); } .reach-val { font-size: clamp(22px, 2.8vw, 30px); font-weight: 300; line-height: 1.2; overflow-wrap: anywhere; } .reach-val-sm { font-size: 17px; font-weight: 400; } /* Long enough to wrap badly at the full card size, short enough that it should not drop all the way to body copy. */ .reach-val-md { font-size: clamp(19px, 1.9vw, 23px); } .marks { display: flex; flex-wrap: wrap; gap: 18px 44px; margin-top: clamp(32px, 5vw, 48px); } .mark-item { display: flex; gap: 13px; align-items: center; } .mark-item svg { width: 24px; height: 24px; color: var(--gold); flex: none; } .mark-item span { font-size: 19px; font-weight: 300; white-space: nowrap; } .mark-item a { text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; } .mark-item a:hover { border-bottom-color: var(--gold); } /* -------------------------------------------------------------- 404 page */ .nf { text-align: center; } .nf h1 { font-size: clamp(34px, 5.2vw, 62px); color: var(--on-dark); } .nf p { color: var(--on-dark-2); font-size: clamp(19px, 2vw, 24px); font-weight: 300; margin: 24px auto 0; max-width: 40ch; } .nf .hero-acts { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }