/** * Team77 — component layer. * * Tokens come from theme.json (--wp--preset--*). This file only styles the * composed components that global styles cannot express. Motion lives in * motion.css so it can be dropped wholesale for prefers-reduced-motion. */ /* ========================================================================= 0. Primitives ========================================================================= */ :root { --t77-line: var(--wp--preset--color--line); --t77-ink: var(--wp--preset--color--contrast); --t77-muted: var(--wp--preset--color--muted); --t77-navy: var(--wp--preset--color--primary); --t77-navy-deep: var(--wp--preset--color--primary-deep); --t77-navy-soft: var(--wp--preset--color--primary-soft); --t77-brick: var(--wp--preset--color--accent); --t77-base: var(--wp--preset--color--base); --t77-oat: var(--wp--preset--color--surface-warm); --t77-gut: clamp(1.25rem, 5vw, 3.5rem); --t77-ease: cubic-bezier(.22, .61, .36, 1); --t77-head-h: 5.25rem; } /* Anchor jumps and skip-link targets must clear the sticky bar. */ html { scroll-padding-top: calc(var(--t77-head-h) + 1rem); } html.t77-locked, html.t77-locked body { overflow: hidden; } /* While the mobile drawer locks the page, `overflow: hidden` on removes the scrolling box that `position: sticky` resolves against — the bar would drop back to its static position at the top of the document, i.e. off-screen. Pinning it to the viewport for the duration keeps the logo and the close button where the user just tapped them. */ html.t77-locked .t77-header-slot, html.t77-locked .wp-block-template-part:has(> .t77-header) { position: fixed; top: 0; left: 0; right: 0; } /* Source Serif 4 ships here with its optical-size axis pinned at 44 and only the weight axis left variable. 44 is the crossover that still holds up at 4.4rem display size without going spindly at the 1.25rem headings — and pinning it cuts the font from 120 KB to 27 KB. Weight does the rest of the work, which is why headings sit at 600 rather than 500. */ h1, h2, h3, h4, .t77-display { font-synthesis-weight: none; font-optical-sizing: none; } /* ========================================================================= 1. Type helpers ========================================================================= */ .t77-eyebrow, .is-style-eyebrow { display: block; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--micro); font-weight: 700; letter-spacing: .18em; line-height: 1.4; text-transform: uppercase; color: var(--t77-brick); margin: 0 0 .75rem; } .t77-eyebrow--navy, .t77-eyebrow.is-navy { color: var(--t77-navy-soft); } .t77-on-dark .t77-eyebrow { color: #E9C4BE; } .is-style-lede, .t77-lede { font-size: var(--wp--preset--font-size--large); line-height: 1.5; color: var(--t77-ink); max-width: 34ch; } p.is-style-lede, p.t77-lede { max-width: 56ch; } .is-style-note { font-size: var(--wp--preset--font-size--small); color: var(--t77-muted); line-height: 1.55; } .t77-prose p { max-width: var(--wp--custom--measure--prose); } /* Rule that sits under a section heading — quieter than a separator block. */ .t77-rule { border: 0; border-top: 1px solid var(--t77-line); margin: 0 0 var(--wp--preset--spacing--40); } /* ========================================================================= 2. Buttons ========================================================================= */ .t77-btn { --t77-btn-bg: var(--t77-navy-deep); --t77-btn-fg: var(--t77-base); --t77-btn-bd: var(--t77-navy-deep); display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.7rem; border: 1px solid var(--t77-btn-bd); border-radius: 2px; background: var(--t77-btn-bg); color: var(--t77-btn-fg); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small); font-weight: 700; letter-spacing: .06em; line-height: 1; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .22s var(--t77-ease), border-color .22s var(--t77-ease), color .22s var(--t77-ease), transform .12s var(--t77-ease); } .t77-btn:hover, .t77-btn:focus-visible { --t77-btn-bg: var(--t77-brick); --t77-btn-bd: var(--t77-brick); --t77-btn-fg: var(--t77-base); color: var(--t77-base); text-decoration: none; } .t77-btn:active { transform: translateY(1px); } .t77-btn--ghost { --t77-btn-bg: transparent; --t77-btn-fg: var(--t77-navy-deep); --t77-btn-bd: var(--t77-line); } .t77-btn--ghost:hover, .t77-btn--ghost:focus-visible { --t77-btn-bg: transparent; --t77-btn-fg: var(--t77-brick); --t77-btn-bd: var(--t77-brick); color: var(--t77-brick); } .t77-on-dark .t77-btn--ghost { --t77-btn-fg: #fff; --t77-btn-bd: rgba(255, 255, 255, .38); } .t77-on-dark .t77-btn--ghost:hover, .t77-on-dark .t77-btn--ghost:focus-visible { --t77-btn-bd: #fff; --t77-btn-bg: rgba(255, 255, 255, .1); color: #fff; } /* Text link that behaves like a directional affordance. */ .t77-arrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: var(--wp--preset--font-size--small); letter-spacing: .02em; color: var(--t77-navy); text-decoration: none; } .t77-arrow svg { transition: transform .28s var(--t77-ease); } .t77-arrow:hover, .t77-arrow:focus-visible { color: var(--t77-brick); text-decoration: none; } .t77-arrow:hover svg { transform: translateX(4px); } /* ========================================================================= 3. Media ========================================================================= */ .t77-pic { display: block; overflow: hidden; background: var(--t77-oat); } .t77-pic img { display: block; width: 100%; height: 100%; object-fit: cover; } .t77-pic[style*="--t77-ratio"] img { aspect-ratio: var(--t77-ratio); } /* ========================================================================= 4. Header shell ========================================================================= */ /* Sticky sits on the template-part WRAPPER, not on

itself. A sticky element only travels inside its own parent's box, and the wrapper WordPress emits around a template part is exactly as tall as the header — so sticking the header to the wrapper makes it scroll away immediately. Sticking the wrapper instead resolves against , which is the full document height. The :has() rule is a fallback for a header part re-inserted in the Site Editor without the class. */ .t77-header-slot, .wp-block-template-part:has(> .t77-header) { position: sticky; top: 0; z-index: 60; } /* The frosted backing lives on a pseudo-element, not on the header itself. `backdrop-filter` on an element makes it the containing block for every position:fixed descendant — which would trap the mobile drawer inside an 84px-tall header instead of the viewport. `position: sticky` above does not create such a containing block, so the drawer stays viewport-anchored. */ .t77-header { position: relative; z-index: 1; background: transparent; border-bottom: 1px solid transparent; transition: border-color .3s var(--t77-ease); } .t77-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--t77-base) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); transition: background-color .3s var(--t77-ease), box-shadow .3s var(--t77-ease); } /* Once the bar is actually overlapping content, it needs to read as a surface rather than a veil — more opacity and a hairline lift, not a heavy shadow. */ .t77-header:has(.is-compact)::before { background: color-mix(in srgb, var(--t77-base) 95%, transparent); box-shadow: 0 1px 0 var(--t77-line), 0 10px 24px -18px rgba(13, 47, 76, .5); } @supports not (backdrop-filter: blur(1px)) { .t77-header::before { background: var(--t77-base); } .t77-header:has(.is-compact)::before { background: var(--t77-base); } } /* Whenever the navigation itself becomes the surface — a mega-menu panel or the mobile drawer — the bar stops being a veil and goes fully opaque. At 95% a bold headline scrolling underneath still ghosts through the frosting. */ .t77-header:has(.has-panel-open)::before, .t77-header:has(.is-drawer-open)::before { background: var(--t77-base); backdrop-filter: none; } .t77-header:has(.is-compact), .t77-header.is-compact { border-bottom-color: var(--t77-line); } /* ========================================================================= 5. Hero — split, asymmetric, never centred ========================================================================= */ .t77-hero { position: relative; display: grid; grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); align-items: stretch; min-height: clamp(30rem, 76svh, 46rem); background: linear-gradient(160deg, var(--t77-oat) 0%, var(--t77-base) 64%); border-bottom: 1px solid var(--t77-line); } .t77-hero__copy { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 4vw, 4.5rem) clamp(3rem, 7vw, 6rem) max(var(--t77-gut), calc((100vw - 82rem) / 2 + var(--t77-gut))); } .t77-hero__title { margin: 0; /* Upper bound comes from theme.json so a style variation can trim it for a wider display face without needing custom CSS. */ font-size: clamp(2.4rem, 4.9vw, var(--wp--custom--font--display-max, 4.15rem)); font-weight: 600; line-height: 1.05; letter-spacing: -.022em; color: var(--t77-navy-deep); text-wrap: balance; } .t77-hero__title em { font-style: normal; color: var(--t77-brick); } .t77-hero__lead { margin: 0; max-width: 42ch; font-size: var(--wp--preset--font-size--large); line-height: 1.55; color: var(--t77-ink); } .t77-hero__actions.wp-block-buttons, .t77-hero__actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .85rem 1rem; margin-top: .5rem; } .t77-hero__actions .wp-block-button { margin: 0; flex: 0 1 auto; } /* The hero pair has to stay on one line inside a ~470-500px column, so the chrome tightens rather than the labels getting vaguer. */ .t77-hero__actions .wp-block-button__link { padding: .9rem 1.35rem; font-size: .75rem; letter-spacing: .045em; white-space: nowrap; } @media (min-width: 64.0625rem) and (max-width: 84rem) { .t77-hero__actions { gap: .7rem; } .t77-hero__actions .wp-block-button__link { padding: .85rem 1.05rem; font-size: .6875rem; letter-spacing: .035em; } } /* Since-1977 marker: the heritage cue the original site carried in its slider. */ .t77-hero__since { display: flex; align-items: baseline; gap: .9rem; margin-top: auto; padding-top: clamp(1.75rem, 4vw, 3rem); border-top: 1px solid var(--t77-line); font-size: var(--wp--preset--font-size--small); color: var(--t77-muted); /* Stops short of the overlapping plate on wide screens. */ max-width: 21rem; } .t77-hero__since b { font-family: var(--wp--custom--font--display); font-size: 1.75rem; font-weight: 600; color: var(--t77-navy); letter-spacing: -.02em; } .t77-hero__media { position: relative; /* Must not clip: the overlapping plate deliberately breaks this edge. */ overflow: visible; } .t77-hero__media > .wp-block-image, .t77-hero__media > figure { overflow: hidden; } /* Core's image block wraps in a

; the whole chain has to stretch or the plate stops short of the copy column. */ .t77-hero__media > .wp-block-image, .t77-hero__media > figure, .t77-hero__media .t77-pic, .t77-hero__media .wp-block-image figure { height: 100%; margin: 0; } .t77-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; } /* A single warm plate that overlaps the image edge — the one asymmetric move. */ .t77-hero__plate { position: absolute; left: 0; bottom: clamp(1.5rem, 4vw, 2.75rem); transform: translateX(-34%); max-width: min(20rem, 68vw); padding: 1.35rem 1.6rem; background: var(--t77-base); border-left: 2px solid var(--t77-brick); box-shadow: var(--wp--preset--shadow--plate); } .t77-hero__plate p { margin: 0; font-size: var(--wp--preset--font-size--small); line-height: 1.5; color: var(--t77-ink); } .t77-hero__plate strong { display: block; margin-bottom: .35rem; font-family: var(--wp--custom--font--display); font-size: 1.0625rem; font-weight: 600; color: var(--t77-navy-deep); } @media (max-width: 64rem) { .t77-hero { grid-template-columns: 1fr; min-height: 0; } .t77-hero__copy { padding: clamp(2.5rem, 8vw, 4rem) var(--t77-gut); order: 2; } .t77-hero__media { order: 1; aspect-ratio: 16 / 10; } /* On a phone the plate stops being an overlapping object and becomes a caption band, so it never hides the subject of the photograph. */ .t77-hero__plate { transform: none; left: 0; right: 0; bottom: 0; max-width: none; padding: .9rem var(--t77-gut) 1rem; border-left: 0; border-top: 2px solid var(--t77-brick); background: color-mix(in srgb, var(--t77-base) 94%, transparent); backdrop-filter: blur(6px); box-shadow: none; } .t77-hero__plate strong { margin-bottom: .15rem; } .t77-hero__plate p { font-size: var(--wp--preset--font-size--micro); } .t77-hero__since { max-width: none; } .t77-hero__since { margin-top: 0; } } /* Inner-page header plate — quieter sibling of the hero. */ .t77-plate { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; min-height: clamp(19rem, 42svh, 30rem); overflow: hidden; background: var(--t77-navy-deep); isolation: isolate; } .t77-plate > .t77-pic { position: absolute; inset: 0; z-index: -2; } .t77-plate::after { content: ""; position: absolute; inset: 0; z-index: -1; /* Two layers: a vertical veil for the whole plate and a shorter horizontal one so the headline keeps its contrast even over a bright photograph. */ background: linear-gradient(100deg, rgba(13, 47, 76, .62) 0%, rgba(13, 47, 76, .18) 46%, rgba(13, 47, 76, 0) 74%), linear-gradient(180deg, rgba(13, 47, 76, .06) 0%, rgba(13, 47, 76, .2) 34%, rgba(13, 47, 76, .8) 100%); } .t77-plate__inner { width: 100%; max-width: 82rem; margin-inline: auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--t77-gut) clamp(2rem, 4vw, 3rem); color: #fff; } /* On a photographic plate the brick eyebrow loses too much contrast; it warms up instead of going pure white so it still reads as the accent. */ .t77-plate .t77-eyebrow { color: #F0CFC9; } .t77-plate__title { margin: 0; max-width: 22ch; color: #fff; font-size: clamp(1.95rem, 3.7vw, 3.05rem); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; } .t77-plate__claim { margin: .9rem 0 0; max-width: 46ch; color: rgba(255, 255, 255, .82); font-size: var(--wp--preset--font-size--large); line-height: 1.5; } /* ========================================================================= 6. Section grammar ========================================================================= */ .t77-section { padding-block: var(--wp--preset--spacing--70); } .t77-section--tight { padding-block: var(--wp--preset--spacing--60); } .t77-section--warm { background: var(--t77-oat); } .t77-section--paper { background: var(--t77-base); } .t77-section--navy { background: var(--t77-navy-deep); color: rgba(255, 255, 255, .84); } .t77-section--navy :is(h2, h3, h4) { color: #fff; } .t77-wrap { width: 100%; max-width: 82rem; margin-inline: auto; padding-inline: var(--t77-gut); } /* Narrow measure, but the left edge stays on the same optical line as the full wrap — centring it would make every section start somewhere different. */ .t77-wrap--narrow > * { max-width: 52rem; } .t77-wrap--narrow { max-width: 82rem; } /* Section head: eyebrow + heading left, optional aside right. */ .t77-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.5rem 3rem; margin-bottom: var(--wp--preset--spacing--50); padding-bottom: 1.5rem; border-bottom: 1px solid var(--t77-line); } .t77-section--navy .t77-head { border-bottom-color: rgba(255, 255, 255, .18); } .t77-head h2 { margin: 0; /* Source Serif runs wider than the face this was measured against, so the measure is set in ch and re-tuned rather than left at a pixel value. */ max-width: 24ch; text-wrap: balance; } .t77-head p { margin: 0; max-width: 40ch; font-size: var(--wp--preset--font-size--medium); color: var(--t77-muted); } .t77-section--navy .t77-head p { color: rgba(255, 255, 255, .7); } @media (max-width: 64rem) { .t77-head { grid-template-columns: 1fr; align-items: start; } } /* ========================================================================= 7. Editorial split — prose plus a sticky side panel ========================================================================= */ .t77-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; } .t77-split__prose > * + * { margin-top: 1.35rem; } .t77-split__prose p { max-width: var(--wp--custom--measure--prose); font-size: 1.0625rem; line-height: 1.72; } /* The opening paragraph carries the lede weight — unless it is the eyebrow, which is a label, not prose. */ .t77-split__prose > p:first-of-type { font-size: var(--wp--preset--font-size--large); line-height: 1.56; color: var(--t77-navy-deep); } .t77-split__prose > p.t77-eyebrow, .t77-split__prose > p.is-style-eyebrow { font-size: var(--wp--preset--font-size--micro); line-height: 1.4; color: var(--t77-brick); } .t77-split__prose > p.t77-eyebrow + h2 + p { font-size: var(--wp--preset--font-size--large); line-height: 1.56; color: var(--t77-navy-deep); } .t77-split__aside { position: sticky; top: calc(var(--t77-head-h) + 1.5rem); } @media (max-width: 64rem) { .t77-split { grid-template-columns: 1fr; } .t77-split__aside { position: static; } } /* Interest panel — replaces the original "Interesse geweckt?" sidebar. */ .t77-interest { padding: 1.75rem; background: var(--t77-base); border: 1px solid var(--t77-line); border-top: 2px solid var(--t77-brick); } .t77-section--warm .t77-interest { background: #fff; } /* Heading level follows the document outline (h2); the size is set here so the panel still reads as a sidebar rather than a section head. */ .t77-interest :is(h2, h3), .t77-interest__title { margin: 0 0 .6rem; font-size: 1.25rem; line-height: 1.25; } .t77-interest p { margin: 0 0 1.35rem; font-size: var(--wp--preset--font-size--small); line-height: 1.6; color: var(--t77-muted); } .t77-interest__icon { display: block; margin-bottom: 1rem; color: var(--t77-navy-soft); } .t77-interest .t77-btn { width: 100%; justify-content: center; } .t77-interest__tel { display: flex; align-items: center; gap: .55rem; margin-top: 1rem; font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--t77-navy); text-decoration: none; } .t77-interest__tel:hover { color: var(--t77-brick); } /* ========================================================================= 8. Process rail — the "how it runs" band, not three equal cards ========================================================================= */ .t77-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--t77-line); } .t77-rail__step { position: relative; padding: var(--wp--preset--spacing--40) clamp(1rem, 2vw, 1.75rem) var(--wp--preset--spacing--40) 0; border-right: 1px solid var(--t77-line); } .t77-rail__step:last-child { border-right: 0; } .t77-rail__step + .t77-rail__step { padding-left: clamp(1rem, 2vw, 1.75rem); } .t77-rail__step::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: var(--t77-brick); transition: width .45s var(--t77-ease); } .t77-rail__step:hover::before, .t77-rail__step:focus-within::before { width: 100%; } .t77-rail__num { display: block; margin-bottom: .9rem; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--micro); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .16em; color: var(--t77-brick); } .t77-rail__step :is(h2, h3) { margin: 0 0 .6rem; font-size: 1.3125rem; line-height: 1.2; } .t77-rail__step :is(h2, h3) a { color: inherit; text-decoration: none; } .t77-rail__step :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; } .t77-rail__step :is(h2, h3) a:hover { color: var(--t77-brick); } .t77-rail__step p { margin: 0; font-size: var(--wp--preset--font-size--small); line-height: 1.6; color: var(--t77-muted); } @media (max-width: 64rem) { .t77-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t77-rail__step:nth-child(2n) { border-right: 0; } .t77-rail__step:nth-child(n + 3) { border-top: 1px solid var(--t77-line); } } @media (max-width: 40rem) { .t77-rail { grid-template-columns: 1fr; } .t77-rail__step { border-right: 0; padding-left: 0 !important; } .t77-rail__step + .t77-rail__step { border-top: 1px solid var(--t77-line); } } /* ========================================================================= 9. Facts slab — numeric typography, deliberately not carded ========================================================================= */ .t77-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); } .t77-fact dt { font-family: var(--wp--custom--font--display); font-size: clamp(2.15rem, 4vw, 3.3rem); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.03em; line-height: 1; color: #fff; } .t77-fact dd { margin: .75rem 0 0; font-size: var(--wp--preset--font-size--small); line-height: 1.5; color: rgba(255, 255, 255, .68); max-width: 24ch; } @media (max-width: 64rem) { .t77-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 30rem) { .t77-facts { grid-template-columns: 1fr; gap: 1.75rem; } } /* ========================================================================= 10. Room shelf — object shelf, not a card grid ========================================================================= */ .t77-shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1px; background: var(--t77-line); border: 1px solid var(--t77-line); } .t77-shelf__item { position: relative; display: flex; flex-direction: column; background: var(--t77-base); text-decoration: none; overflow: hidden; } .t77-shelf__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--t77-oat); } .t77-shelf__media img { transition: transform .7s var(--t77-ease); } .t77-shelf__item:hover .t77-shelf__media img { transform: scale(1.045); } .t77-shelf__body { display: flex; flex-direction: column; gap: .35rem; padding: 1.15rem 1.25rem 1.4rem; flex: 1; } .t77-shelf__name { font-family: var(--wp--custom--font--display); font-size: 1.1875rem; font-weight: 600; line-height: 1.2; color: var(--t77-navy-deep); } .t77-shelf__item:hover .t77-shelf__name { color: var(--t77-brick); } .t77-shelf__claim { font-size: var(--wp--preset--font-size--small); line-height: 1.5; color: var(--t77-muted); } /* ========================================================================= 11. Showroom split ========================================================================= */ .t77-showroom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: var(--wp--preset--spacing--50); border-top: 1px solid var(--t77-line); } .t77-showroom:nth-of-type(even) .t77-showroom__media { order: -1; } .t77-showroom__media { aspect-ratio: 3 / 2; overflow: hidden; } .t77-showroom h2 { margin: 0 0 1rem; } .t77-showroom p { margin: 0 0 1.25rem; max-width: 46ch; line-height: 1.65; } .t77-address { display: grid; gap: .5rem; margin: 0 0 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--t77-line); font-size: var(--wp--preset--font-size--small); line-height: 1.55; font-style: normal; color: var(--t77-ink); } .t77-address__row { display: flex; align-items: flex-start; gap: .6rem; } .t77-address__row svg { flex: none; margin-top: .1rem; color: var(--t77-navy-soft); } .t77-address a { color: inherit; text-decoration: none; } .t77-address a:hover { color: var(--t77-brick); text-decoration: underline; } @media (max-width: 64rem) { .t77-showroom { grid-template-columns: 1fr; } .t77-showroom:nth-of-type(even) .t77-showroom__media { order: 0; } } /* ========================================================================= 12. Gallery strip (room pages) ========================================================================= */ .t77-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1.25rem); } .t77-strip figure, .t77-strip .wp-block-image { margin: 0; overflow: hidden; } .t77-strip .wp-block-image img, .t77-strip img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .t77-strip .t77-pic { aspect-ratio: 3 / 2; } .t77-strip figcaption { margin-top: .6rem; font-size: var(--wp--preset--font-size--micro); color: var(--t77-muted); } @media (max-width: 40rem) { .t77-strip { grid-template-columns: 1fr; } } /* ========================================================================= 13. FAQ — quiet typography, no loud accordion chrome ========================================================================= */ .t77-faq { border-top: 1px solid var(--t77-line); } .t77-faq details { border-bottom: 1px solid var(--t77-line); } .t77-faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; padding: 1.35rem 0; cursor: pointer; list-style: none; font-family: var(--wp--custom--font--display); font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); font-weight: 600; line-height: 1.32; color: var(--t77-navy-deep); transition: color .2s var(--t77-ease); } .t77-faq summary::-webkit-details-marker { display: none; } .t77-faq summary:hover { color: var(--t77-brick); } .t77-faq summary::after { content: ""; flex: none; width: 1rem; height: 1rem; margin-top: .32rem; background: currentColor; clip-path: polygon(46% 0, 54% 0, 54% 46%, 100% 46%, 100% 54%, 54% 54%, 54% 100%, 46% 100%, 46% 54%, 0 54%, 0 46%, 46% 46%); transition: transform .3s var(--t77-ease); } .t77-faq details[open] summary::after { transform: rotate(135deg); } .t77-faq__answer { padding: 0 0 1.6rem; max-width: var(--wp--custom--measure--prose); font-size: var(--wp--preset--font-size--medium); line-height: 1.7; color: var(--t77-ink); } .t77-faq__answer p { margin: 0; } /* ========================================================================= 14. Forms ========================================================================= */ .t77-form { max-width: 44rem; } .t77-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; } .t77-field { margin: 0; display: flex; flex-direction: column; gap: .45rem; } .t77-field--full { grid-column: 1 / -1; } .t77-field label { font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--t77-navy-deep); } .t77-req { color: var(--t77-brick); } .t77-field :is(input, textarea, select) { width: 100%; padding: .8rem .9rem; font-family: inherit; font-size: 1rem; color: var(--t77-ink); background: #fff; border: 1px solid var(--t77-line); border-radius: 2px; transition: border-color .2s var(--t77-ease), box-shadow .2s var(--t77-ease); } .t77-field :is(input, textarea):hover { border-color: #C9BCAB; } .t77-field :is(input, textarea):focus-visible { outline: none; border-color: var(--t77-navy-soft); box-shadow: 0 0 0 3px rgba(35, 98, 142, .16); } .t77-field :is(input, textarea):user-invalid { border-color: var(--t77-brick); box-shadow: 0 0 0 3px rgba(142, 58, 52, .12); } .t77-field textarea { resize: vertical; min-height: 9rem; } .t77-help { font-size: var(--wp--preset--font-size--micro); color: var(--t77-muted); } .t77-field--consent { margin-top: 1.5rem; } .t77-field--consent label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: start; font-weight: 400; font-size: var(--wp--preset--font-size--small); line-height: 1.55; color: var(--t77-muted); } .t77-field--consent input { width: 1.1rem; height: 1.1rem; margin-top: .18rem; accent-color: var(--t77-navy); } .t77-field--consent a, .t77-consent__text a, .t77-form__note a { color: var(--t77-navy); text-decoration: underline; text-underline-offset: .18em; } .t77-field--consent a:hover { color: var(--t77-brick); } .t77-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; } .t77-form__legal { font-size: var(--wp--preset--font-size--micro); color: var(--t77-muted); } .t77-form__note { margin: 0 0 1.75rem; padding: 1rem 1.15rem; border-left: 2px solid; font-size: var(--wp--preset--font-size--small); line-height: 1.55; } .t77-form__note.is-success { border-color: #3F7A54; background: #EFF5F0; color: #24502F; } .t77-form__note.is-error { border-color: var(--t77-brick); background: var(--wp--preset--color--accent-pale); color: #6E2B26; } .t77-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 40rem) { .t77-form__grid { grid-template-columns: 1fr; } } /* ========================================================================= 15. Consent banner and embed gates ========================================================================= */ .t77-consent { position: fixed; left: 50%; bottom: 1rem; z-index: 90; width: min(46rem, calc(100vw - 2rem)); transform: translateX(-50%); background: var(--t77-base); border: 1px solid var(--t77-line); border-top: 2px solid var(--t77-navy); box-shadow: var(--wp--preset--shadow--lifted); } .t77-consent[hidden] { display: none; } .t77-consent__inner { padding: clamp(1.25rem, 3vw, 2rem); } .t77-consent__title { margin: 0 0 .6rem; font-size: 1.25rem; } .t77-consent__text { margin: 0 0 1.15rem; font-size: var(--wp--preset--font-size--small); line-height: 1.6; color: var(--t77-muted); } .t77-consent__list { margin: 0 0 1.35rem; padding: 0; list-style: none; display: grid; gap: .75rem; } .t77-consent__list label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; font-size: var(--wp--preset--font-size--small); } .t77-consent__list input { margin-top: .22rem; accent-color: var(--t77-navy); } .t77-consent__desc { display: block; color: var(--t77-muted); line-height: 1.5; } .t77-consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; } .t77-consent__link { font-size: var(--wp--preset--font-size--small); color: var(--t77-muted); } .t77-embed-gate { display: grid; place-content: center; gap: .75rem; justify-items: center; text-align: center; min-height: 18rem; padding: 2rem; background: var(--t77-oat); border: 1px dashed var(--t77-line); } .t77-embed-gate__title { margin: 0; font-family: var(--wp--custom--font--display); font-size: 1.1875rem; color: var(--t77-navy-deep); } .t77-embed-gate__text { margin: 0; max-width: 42ch; font-size: var(--wp--preset--font-size--small); line-height: 1.55; color: var(--t77-muted); } /* Definition list used by the project sidebar. */ .t77-datalist { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: .5rem 1rem; margin: 0 0 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--t77-line); font-size: var(--wp--preset--font-size--small); } .t77-datalist dt { font-weight: 600; color: var(--t77-muted); } .t77-datalist dd { margin: 0; color: var(--t77-ink); } /* ========================================================================= 16. Breadcrumbs ========================================================================= */ .t77-crumbs { padding-block: 1rem; border-bottom: 1px solid var(--t77-line); font-size: var(--wp--preset--font-size--micro); color: var(--t77-muted); } .t77-crumbs ol { display: flex; flex-wrap: wrap; gap: .3rem .55rem; margin: 0; padding: 0; list-style: none; max-width: 82rem; margin-inline: auto; padding-inline: var(--t77-gut); } .t77-crumbs li + li::before { content: "/"; margin-right: .55rem; color: var(--t77-line); } .t77-crumbs a { color: var(--t77-muted); text-decoration: none; } .t77-crumbs a:hover { color: var(--t77-brick); text-decoration: underline; } .t77-crumbs [aria-current] { color: var(--t77-ink); } /* ========================================================================= 17. CTA band ========================================================================= */ .t77-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem 4rem; } .t77-cta h2 { margin: 0; max-width: 25ch; color: #fff; font-size: clamp(1.75rem, 3.2vw, 2.75rem); text-wrap: balance; } .t77-cta p { margin: 1rem 0 0; max-width: 48ch; color: rgba(255, 255, 255, .74); line-height: 1.6; } .t77-cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; } .t77-cta .t77-btn--solid { --t77-btn-bg: #fff; --t77-btn-fg: var(--t77-navy-deep); --t77-btn-bd: #fff; } .t77-cta .t77-btn--solid:hover, .t77-cta .t77-btn--solid:focus-visible { --t77-btn-bg: var(--wp--preset--color--accent-soft); --t77-btn-bd: var(--wp--preset--color--accent-soft); --t77-btn-fg: #fff; color: #fff; } @media (max-width: 64rem) { .t77-cta { grid-template-columns: 1fr; } } /* ========================================================================= 18. Footer ========================================================================= */ .t77-footer { background: var(--t77-navy-deep); color: rgba(255, 255, 255, .68); font-size: var(--wp--preset--font-size--small); } .t77-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; } .t77-footer a:hover { color: #fff; text-decoration: underline; } .t77-footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50); } .t77-footer__logo { display: block; width: 11.5rem; color: #fff; margin-bottom: 1.25rem; } .t77-footer__logo svg, .t77-footer__logo img { width: 100%; height: auto; } .t77-footer__blurb { margin: 0 0 1.5rem; max-width: 34ch; line-height: 1.6; } .t77-footer h2 { margin: 0 0 1rem; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--micro); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .5); } .t77-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; } .t77-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .14); font-size: var(--wp--preset--font-size--micro); color: rgba(255, 255, 255, .52); } .t77-footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; } .t77-footer__consent-btn { background: none; border: 0; padding: 0; font: inherit; color: rgba(255, 255, 255, .82); cursor: pointer; text-decoration: underline; text-underline-offset: .2em; } @media (max-width: 64rem) { .t77-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 40rem) { .t77-footer__top { grid-template-columns: 1fr; } } /* ========================================================================= 19. Utility / states ========================================================================= */ .t77-empty { display: grid; justify-items: start; gap: .5rem; padding: clamp(2rem, 5vw, 3.5rem); background: var(--t77-oat); border: 1px dashed var(--t77-line); } .t77-empty__title { margin: 0; font-family: var(--wp--custom--font--display); font-size: 1.1875rem; color: var(--t77-navy-deep); } .t77-empty__text { margin: 0 0 .75rem; max-width: 52ch; font-size: var(--wp--preset--font-size--small); color: var(--t77-muted); line-height: 1.6; } .t77-icon { display: inline-block; vertical-align: middle; } /* Print: the client's team prints reference sheets for site meetings. */ @media print { .t77-nav, .t77-footer, .t77-cta, .t77-consent, .skip-link { display: none !important; } .t77-plate { min-height: 0; background: none; color: #000; } .t77-plate__title, .t77-plate__claim { color: #000; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; } } /* ========================================================================= 20. Registered block styles Every variation offered in the editor needs a visual, or it is a dead option. ========================================================================= */ /* core/list — is-style-ticks */ .wp-block-list.is-style-ticks { list-style: none; padding-left: 0; } .wp-block-list.is-style-ticks li { position: relative; padding-left: 1.85rem; line-height: 1.6; } .wp-block-list.is-style-ticks li::before { content: ""; position: absolute; left: 0; top: .5em; width: .8rem; height: .45rem; border-left: 1.8px solid var(--t77-brick); border-bottom: 1.8px solid var(--t77-brick); transform: translateY(-50%) rotate(-45deg); } /* core/list — is-style-facts */ .wp-block-list.is-style-facts { list-style: none; padding-left: 0; border-top: 1px solid var(--t77-line); } .wp-block-list.is-style-facts li { padding: .7rem 0; border-bottom: 1px solid var(--t77-line); font-size: var(--wp--preset--font-size--small); font-variant-numeric: tabular-nums; } /* core/separator — is-style-hair */ .wp-block-separator.is-style-hair { border: 0; border-top: 1px solid var(--t77-line); opacity: 1; margin-block: var(--wp--preset--spacing--40); max-width: none; } /* core/group — is-style-plate / rail / inset */ .wp-block-group.is-style-plate { position: relative; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--t77-oat); border-left: 2px solid var(--t77-brick); } .wp-block-group.is-style-rail { padding-block: var(--wp--preset--spacing--40); border-top: 1px solid var(--t77-line); border-bottom: 1px solid var(--t77-line); } .wp-block-group.is-style-inset { padding-left: clamp(1rem, 3vw, 2.5rem); border-left: 1px solid var(--t77-line); } /* core/columns — is-style-offset */ @media (min-width: 64rem) { .wp-block-columns.is-style-offset > .wp-block-column:nth-child(even) { margin-top: var(--wp--preset--spacing--50); } } /* core/image — is-style-bleed */ .wp-block-image.is-style-bleed img { width: 100%; border-radius: 0; } .wp-block-image.is-style-bleed figcaption { margin-top: .65rem; text-align: left; } /* core/details — is-style-faq */ .wp-block-details.is-style-faq { border-top: 1px solid var(--t77-line); border-bottom: 1px solid var(--t77-line); padding-block: 1.25rem; } .wp-block-details.is-style-faq summary { font-family: var(--wp--custom--font--display); font-size: 1.1875rem; font-weight: 500; color: var(--t77-navy-deep); cursor: pointer; } /* core/table — is-style-data */ .wp-block-table.is-style-data table { border-collapse: collapse; width: 100%; } .wp-block-table.is-style-data :is(th, td) { padding: .7rem .9rem .7rem 0; border: 0; border-bottom: 1px solid var(--t77-line); text-align: left; font-variant-numeric: tabular-nums; } .wp-block-table.is-style-data th { font-size: var(--wp--preset--font-size--micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t77-muted); } /* Buttons inside narrow sidebars read better full-width. */ .t77-interest .t77-btn, .t77-split__aside .wp-block-button__link { width: 100%; justify-content: center; text-align: center; }