a left rule and tint, * both reset here. */ margin-bottom: 0px; border-width: 0px; background-color: transparent; padding: 0px; font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 1.0625rem; font-weight: 400; font-style: italic; line-height: 1.55; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); text-shadow: 0 4px 24.5px rgba(0,0,0,0.12); } @media (min-width: 992px) { .quote-card-text { font-size: 1.125rem; } } @media (min-width: 1440px) { .quote-card-text { font-size: 1.25rem; } } /* * ── STATEMENT VARIANT ─────────────────────────────────────────────── * * Figma 34046:2789 (Who We Serve). This card is NOT a testimonial — its copy * is "Behind every short-sale file is a person trying to move forward…", a * first-person brand statement — and the comp accordingly hides both the * quote glyph and the attribution and sets the text in the SERIF. * * ✓ Playfair Display Italic 30px / lh 1.55 / capitalize / white * + text-shadow 0 4px 24.5px rgba(0,0,0,.12), measure 492 (34046:2789). * * ⚠ THIS IS THE FIRST DESIGN'S QUOTE TREATMENT, DELIBERATELY BACK. The * homepage comp (34035:1449) moved the testimonial quote to the body face * at 20px sentence-case, which is what `.quote-card-text` now carries. Both * are live: the sans one for real quotations, this one for statements. Do * not "unify" them — see the module header. * * ⚠ `capitalize` IS INTENTIONAL HERE and is the reason the comp reads * "Behind Every Short-Sale File". It was WRONG on a real person's quote, * which is why the base class dropped it; on a brand line it is a styling * choice the design makes. Store the copy in sentence case. * * ⚠ A Customizer "Additional CSS" rule once carried * `.quote-card-author { text-transform: none !important }`, which silently * beat this stylesheet. It has been cleared. If capitalisation ever looks * wrong again, check Appearance → Customize → Additional CSS BEFORE * editing here — an isolated probe page will render correctly and hide it. */ /* * ✓ 360 tall, not 420, and the copy starts 88 from the top (34046:2783 / * 34046:2784). The 420 min-height is the HOMEPAGE card's (34035:1443) and it * left 189px of dead space under a statement that only needs 186 for its * four lines. * * ⚠ `pt` AFTER `p-*` IS SAFE HERE, unlike inside one @apply list. These are * two separate rules of equal specificity, so CSS source order decides and * this block is emitted after `.quote-card` — and `padding-top` is a * longhand overriding a shorthand, which is exactly what is wanted. Do NOT * collapse this into `.quote-card`'s own @apply, where `p-9` and `pt-22` * would tie and Tailwind's sort order would pick the winner. */ @media (min-width: 992px) { .quote-card--statement { min-height: 22.5rem; padding-top: 3.5rem; } } @media (min-width: 1440px) { .quote-card--statement { padding-top: 5.5rem; } } .quote-card-text--statement { font-family: "Playfair Display", Georgia, Cambria, serif; font-size: 1.375rem; font-weight: 400; text-transform: capitalize; font-style: italic; line-height: 1.55; } @media (min-width: 992px) { .quote-card-text--statement { font-size: 1.625rem; } } @media (min-width: 1440px) { .quote-card-text--statement { font-size: 1.875rem; } } .quote-card-attribution { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.25rem; } @media (min-width: 992px) { .quote-card-attribution { margin-top: 2rem; } } .quote-card-author { /* ✓ Inter SemiBold 18px / +1.2px / uppercase / #C5973A */ font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 1rem; font-weight: 600; text-transform: uppercase; line-height: 1; letter-spacing: 0.067em; --tw-text-opacity: 1; color: rgb(197 151 58 / var(--tw-text-opacity, 1)); } @media (min-width: 1440px) { .quote-card-author { font-size: 1.125rem; } } .quote-card-location { /* * ✓ Inter 14px / lh 28px (= leading-[2], which is also what supplies the * space under the attribution). #C6C6CE read as mss-gray-100 (#C0CCCC), * 6 apart per channel — see the module. * * ⚠ NO `pl-5`. It indented the location ~20px past the attribution above * it; 34035:1451 sits at ml-0, flush with both the name and the quote. */ font-size: 0.875rem; line-height: 2; --tw-text-opacity: 1; color: rgb(192 204 204 / var(--tw-text-opacity, 1)); } /* ═══════════════════════════════════════════════════════════════════════ * MISSION CARDS — the veil over the band's photograph. * * Figma 34046:1105. The plate carries FIVE stacked gradients, and they are * here rather than inline because a multi-layer `background-image` has no * utility form — the same reason quote-band and feature_tiles keep theirs in * CSS. * * ⚠ THE FLAT LAYER IS THE ONE THAT MATTERS. Shipped without it the card copy * measured 2.0–2.9:1 against #C0CCCC — the light shaft came straight through * behind the two left-hand cards. Cropping alone only reached 3.7:1. Do not * prune these layers without re-measuring contrast. * * ⚠ .52, NOT THE COMP'S .4 — and the reason is height, not taste. Figma draws * this plate over a 1289px band; ours runs ~1360 once both bands carry the * theme's own vertical rhythm, so cover crops less and shows more of the * bright centre. At .4 every card sample sat BELOW the comp's; at .52 the * build equals or beats it at all six (worst 3.53 against the comp's 3.00). * * ⚠ Neither clears 4.5:1 at the two left-hand cards. That is inherent to the * design — 14px #C0CCCC over a bubbly photograph — and is raised with the * designer rather than fixed by darkening further, which would stop * matching the comp. The steps copy below sits at 8:1 and is fine. * * flat rgba(4,10,16,.52) across the whole plate (comp: .4) * top fade to #040A10 over the last 16.7% * bottom fade to #040A10 over the last 15.4% * left #091219 at .6 over the last 11.6% * right #091219 .6 at the edge, out by 69.8% * * The bottom fade is the comp's own. It was briefly an adaptation — while the * steps quadrant was a separate row, this section ended mid-plate and the fade * only existed to stop our edge cutting dead. Now that the module carries both * bands its bottom edge IS the plate's bottom edge, which is exactly where * Figma puts that layer. * ═══════════════════════════════════════════════════════════════════════ */ .mission-veil { background-image: linear-gradient(to top, rgba(4, 10, 16, 0) 83.284%, #040A10 100%), linear-gradient(to bottom, rgba(4, 10, 16, 0) 84.572%, #040A10 100%), linear-gradient(rgba(4, 10, 16, .52), rgba(4, 10, 16, .52)), linear-gradient(to left, rgba(9, 18, 25, 0) 88.406%, rgba(9, 18, 25, .6) 100%), linear-gradient(to left, rgba(9, 18, 25, .6) 0%, rgba(9, 18, 25, .361) 38.037%, rgba(9, 18, 25, 0) 69.775%); } /* ═══════════════════════════════════════════════════════════════════════ * FAQ ACCORDION — CONVERTED TO INLINE UTILITIES. * Styles live on the markup in template-parts/modules/. The class names * remain there as unstyled QA/JS hooks. * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ * FOUNDER TABS — segmented pill switches founder profile + headshot. * Figma 30471:117. Behaviour comes from mss.tabs() — see the module. * ═══════════════════════════════════════════════════════════════════════ */ .founders { position: relative; z-index: 1; overflow: hidden; --tw-bg-opacity: 1; background-color: rgb(4 10 16 / var(--tw-bg-opacity, 1)); padding-top: 3rem; padding-bottom: 3rem; --tw-text-opacity: 1; color: rgb(192 204 204 / var(--tw-text-opacity, 1)); } .founders :is(h1,h2,h3,h4,h5,h6) { color: #ffffff; } @media (min-width: 992px) { .founders { padding-top: 4rem; padding-bottom: 4rem; } } @media (min-width: 1200px) { .founders { padding-top: 5rem; padding-bottom: 5rem; } } @media (min-width: 1440px) { .founders { padding-top: 6rem; padding-bottom: 6rem; } } /* * Section background — the seabed photograph, full-bleed (30471:117). * * Sits at z-0, BELOW the headshot's z-[1] and the copy's z-[2], so the stacking * order is background → cut-out → text. * * ⚠ The overlay is LIGHT on purpose. Measured against the comp, the background * runs 24–47 luminance while the raw source runs 17–47 in the same band — the * design barely darkens it, and the caustic patterns are meant to read. A heavy * veil (the reflex for a dark theme) would flatten the band back to the plain * `bg-secondary` it looked like before this field existed. * * The gradient is weighted left because that is where the copy sits; the middle * and right, where the design is brightest, stay open. */ .founders-bg { pointer-events: none; position: absolute; inset: 0px; z-index: 0; } .founders-bg::after { position: absolute; inset: 0px; background-image: linear-gradient(to right, var(--tw-gradient-stops)); --tw-gradient-from: rgb(4 10 16 / 0.82) var(--tw-gradient-from-position); --tw-gradient-to: rgb(4 10 16 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); --tw-gradient-to: rgb(4 10 16 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(4 10 16 / 0.54) var(--tw-gradient-via-position), var(--tw-gradient-to); --tw-gradient-to: rgb(4 10 16 / 0.66) var(--tw-gradient-to-position); --tw-content: ''; content: var(--tw-content); } .founders-bg img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /* * Top and bottom fades so the photo never meets the neighbouring sections on a * hard line — the same device the testimonials band and the headshot both use. * * Three edges now: LEFT, TOP and BOTTOM fade to black, so the seabed reads mainly * in the centre-right around the headshot and the copy sits on near-flat colour * rather than on texture. * * ⚠ The left stop is a PERCENTAGE because it has to track the copy column, which * is itself a percentage. The top and bottom are FIXED distances because a * percentage there scales with band height — an earlier 18% swallowed the top * 156px of this 868px band. 150px reads as a deliberate vignette rather than a * seam-hider, and behaves the same whether the band is 700px tall or 900. * * Layer order matters: within one `background` shorthand the FIRST layer paints on * top. The left gradient goes first so it wins in the two left-hand corners, where * all three overlap. */ .founders-bg::before { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to right, #040A10, transparent 42%), linear-gradient(to bottom, #040A10, transparent 220px), linear-gradient(to top, #040A10, transparent 400px); } /* * The headshot's own bottom fade, so she dissolves into the section floor rather * than ending on the crop line baked into the artwork (the cut-out has ZERO clear * rows below her — see the note on .founders-media). * * ⚠ This has to live on the HEADSHOT, not on the vignette above. The vignette is * a child of .founders-bg at z-0 and the headshot is z-[1], so the vignette paints * UNDER her and could never reach her — which is why the section's bottom gradient * appeared to stop at her silhouette. * * A mask, not an overlay gradient: it fades HER pixels out, so there is no * rectangle drawn across the background. Overlay gradients on this element are * what produced the visible box the media fades were removed for. * * 400px matches the section's BOTTOM vignette exactly — keep the two in step, or * the fade over her and the fade over the background meet at her silhouette and * the difference shows as an outline. * * ⚠ 400px is over half her rendered height (693px at 1440, and only 556px at * 992 — where it is nearly three quarters). That is a deliberately heavy * dissolve; if she starts disappearing at narrow widths this is the number to * revisit, not the section vignette. */ .founders-media img { mask-image: linear-gradient(to top, transparent, #000 400px); -webkit-mask-image: linear-gradient(to top, transparent, #000 400px); } .founders-row { margin-left: -1rem; margin-right: -1rem; display: flex; flex-wrap: wrap; } /* * ⚠ NO `relative` HERE, and the z-index still works. * * The headshot lives inside .tabPane (it changes with the founder), which is * inside this column. `relative` made THIS the containing block, so the * photo's `absolute right-0 w-[52%]` resolved against the 56% text column * instead of the section — it rendered ~400px wide, in the middle of the * page, directly on top of the bio copy. * * The note further down warns that .founders-pane must not be positioned for * exactly this reason; the pane was innocent and this rule was the culprit. * * Dropping `relative` is safe: per the Flexbox spec a flex item with a * z-index other than auto creates a stacking context even while * `position: static`, so the copy still paints above the photo. */ .founders-text-col { z-index: 2; width: 100%; padding-left: 1rem; padding-right: 1rem; } @media (min-width: 992px) { .founders-text-col { width: 44%; } } /* * ✓ 400×400 headshot on the right, bleeding 40px above the section. Sits * BEHIND the text column so the copy stays readable where they meet, with * the design's three edge fades to #121414 layered on top of it. * * Hidden below lg: at those widths the photo would sit under the bio with * nowhere to go, and no mobile frame exists to say otherwise. */ /* * ⚠ Sized to the COMP's absolute size, not to the section height. * * It used to stretch the full band (`-top-10` + `h-[calc(100%+2.5rem)]`) with * `object-cover`, which scaled the 800×800 source up to 868 and cropped ~60px * off each side. Measured by her lit face's column extent, that put her 312px * across against the comp's 249 — 25% too large. * * The cause is not the CSS being wrong about the design; it is that OUR band is * 166px taller than the comp's, because the bio copy wraps to more lines. The * design has her at ~693px square, essentially the full height of its 702px * section — so "fill the height" and "match the comp" stop being the same * instruction the moment the copy grows. * * 48.1% of 1440 = 693, and `aspect-square` keeps the source's 1:1 so * `object-contain` neither crops nor upscales. Bottom-aligned: she stands on the * section floor and the extra height above her is background, which is what the * seabed is now there for. `right-[2.78%]` = the comp's 40px right margin. * * ⚠ `max-h` IS LOAD-BEARING — it is what stops her head being clipped. * * Width alone was not safe. Her size tracks the VIEWPORT while the band's height * is set by how many lines the bio wraps to, and the two stop moving together * outside 1440: * · above 1440 the container stops re-wrapping, so the band's height holds at * ~868 while 48.1% keeps growing — at 1920 that is 924 into an 868 box, and * `overflow-hidden` took the top off her head * · below 1440 the copy wraps to more lines, so the band grows TALLER while she * shrinks — at 1024 she was only 57% of the band, small and adrift in it * * Capping height at 88% of the band guarantees clear space above her at any * width, and the wider percentages below 2xl give back the size that was lost. * With `aspect-square` the box may end up non-square once the cap bites, but * `object-contain` keeps the IMAGE square inside it — so it is sized by * whichever of the two constraints is tighter, which is exactly what we want. */ .founders-media { pointer-events: none; position: absolute; bottom: 0px; right: 0px; z-index: 1; display: none; aspect-ratio: 1 / 1; width: 52%; } @media (min-width: 992px) { .founders-media { right: 2.78%; display: block; max-height: 88%; width: 56%; } } @media (min-width: 1200px) { .founders-media { width: 52%; } } @media (min-width: 1440px) { .founders-media { width: 48.1%; } } .founders-media img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; -o-object-position: bottom; object-position: bottom; } /* * ✓ Three edge fades (30471:524/526/527). All are hung off .founders-media * so they track the photo box — the top and bottom share one pseudo-element * with two stacked gradients, written as plain CSS because @apply cannot * express a multi-value background. * * NOTE .founders-pane must NOT be positioned. The headshot is absolute and * has to resolve against .founders (the section) so it can bleed above the * top edge and sit in the right-hand half; making the pane relative would * trap it inside the 56% text column. */ /* * ⚠ THE HEADSHOT HAS NO EDGE FADES, deliberately — do not add them back. * * There were three (30471:524/526/527), written when this band had no background * image and a full-bleed rectangular photo genuinely needed blending into flat * colour. Both premises are now false, and each fade caused a visible artefact: * * · the left fade began at full opacity on the media's own left edge and drew * a hard vertical seam down the section — caustics one side, flat dark the * other * · once the box was sized to the comp (693² rather than the full band) the * top/bottom fades outlined the box itself, a lighter rectangle floating on * the seabed * * The headshot is a transparent CUT-OUT over a photographic background, which is * exactly what the comp shows. It blends because it has no edges, not because * something is fading them. */ .founders-name { /* ✓ Inter SemiBold 28px / lh 1.2 / capitalize — NOT the display serif */ margin-bottom: 0.25rem; font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 1.375rem; font-weight: 600; text-transform: capitalize; line-height: 1.2; letter-spacing: 0em; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } @media (min-width: 992px) { .founders-name { font-size: 1.5rem; } } @media (min-width: 1440px) { .founders-name { font-size: 1.75rem; } } .founders-role { /* ✓ Inter SemiBold 16px / lh 1.2 / capitalize / #E8C96A */ margin-bottom: 1.25rem; font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 0.9375rem; font-weight: 600; text-transform: capitalize; line-height: 1.2; --tw-text-opacity: 1; color: rgb(232 201 106 / var(--tw-text-opacity, 1)); } @media (min-width: 1440px) { .founders-role { font-size: 1rem; } } .founders-bio { /* ✓ Inter Regular 15px / lh 24px / #9AB0B4, max 541px */ max-width: 33.8125rem; font-size: 0.9375rem; line-height: 1.6; --tw-text-opacity: 1; color: rgb(154 176 180 / var(--tw-text-opacity, 1)); } .founders-bio p:last-child { margin-bottom: 0px; } /* * ✓ The segmented pill: outer border #C9922E at radius 500px, the active * segment filled. Inline-flex so the pill hugs its tabs rather than * stretching, and p-0 because the fill must reach the outer edge. */ .founders .tabNav { margin-top: 2rem; display: inline-flex; flex-wrap: wrap; align-items: center; border-radius: 9999px; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(201 146 46 / var(--tw-border-opacity, 1)); padding: 0px; } @media (min-width: 992px) { .founders .tabNav { margin-top: 2.25rem; } } .founders .tabNav .nav-item { display: inline-flex; min-height: 3rem; cursor: pointer; align-items: center; justify-content: center; border-radius: 9999px; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; text-align: center; font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 0.9375rem; font-weight: 600; text-transform: uppercase; line-height: 1; --tw-text-opacity: 1; color: rgb(201 146 46 / var(--tw-text-opacity, 1)); text-decoration-line: none; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } .founders .tabNav .nav-item:hover { --tw-text-opacity: 1; color: rgb(232 201 106 / var(--tw-text-opacity, 1)); } @media (min-width: 992px) { .founders .tabNav .nav-item { padding-left: 2rem; padding-right: 2rem; font-size: 1rem; } } /* ✓ Active segment: filled #C9922E, black label. */ .founders .tabNav .nav-item.active { --tw-bg-opacity: 1; background-color: rgb(201 146 46 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); } .founders .tabNav .nav-item.active:hover { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); } /* ═══════════════════════════════════════════════════════════════════════ * TEXT + MEDIA + CALLOUT — CONVERTED TO INLINE UTILITIES. * Styles live on the markup in template-parts/modules/. The class names * remain there as unstyled QA/JS hooks. * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ * VALUE CARDS — CONVERTED TO INLINE UTILITIES. * Styles live on the markup in template-parts/modules/. The class names * remain there as unstyled QA/JS hooks. * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ * STEPS GRID — CONVERTED TO INLINE UTILITIES. * Styles live on the markup in template-parts/modules/. The class names * remain there as unstyled QA/JS hooks. * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ * STATS GRID — CONVERTED TO INLINE UTILITIES. * Styles live on the markup in template-parts/modules/. The class names * remain there as unstyled QA/JS hooks. * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ * TEXT INTRO — CONVERTED TO INLINE UTILITIES. * Styles live on the markup in template-parts/modules/. The class names * remain there as unstyled QA/JS hooks. * * EXCEPT the background veil below, which is RESIDUAL: three stacked * gradients in one `background` shorthand, which has no utility form. Same * category as `.tiles-bg::before` and `.quote-band::after` in §5.9's list. * ═══════════════════════════════════════════════════════════════════════ */ .text-intro-bg { pointer-events: none; position: absolute; inset: 0px; z-index: 0; } .text-intro-bg img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /* * ✓ Measured off the comp, not guessed. A row profile down a clean column at * x1200 runs 9.4 at the band's top edge → 105 at y1280 → 9.3 at the bottom, * so the photo fades in over ~200px and out over ~170px. Across the band the * left sits at ~12 under the copy and the right reaches ~119, so the * horizontal ramp is near-opaque under the text and clear by ~78%. * * ⚠ Unlike value_cards, this one is NOT a flat tint and its edges are NOT * hard — the two modules look similar and want opposite treatments. Check the * profile before copying one onto the other. */ .text-intro-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, #040A10, transparent 200px), linear-gradient(to top, #040A10, transparent 170px), linear-gradient(to right, #040A10 25%, rgb(4 10 16 / 0.6) 48%, rgb(4 10 16 / 0) 78%); } /* ═══════════════════════════════════════════════════════════════════════ * AUDIENCE CARDS — CONVERTED TO INLINE UTILITIES. * Styles live on the markup in template-parts/modules/. The class names * remain there as unstyled QA/JS hooks. * * EXCEPT the background veil below, which is RESIDUAL: three stacked * gradients in one `background` shorthand, which has no utility form. * ═══════════════════════════════════════════════════════════════════════ */ .audience-bg { pointer-events: none; position: absolute; inset: 0px; z-index: 0; } .audience-bg img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /* * ✓ REDESIGNED to 34046:2540 — Rectangle 40267, the ONE plate that runs * behind both the cards and the steps quadrant. Its fill spec is exactly * two layers and nothing else: * * linear-gradient(90deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.2) 100%) * linear-gradient(269.74deg, rgba(9,18,25,0) 29.106%, * rgba(9,18,25,.602) 61.263%, * rgb(9,18,25) 99.761%) * * 269.74deg is `to left` to within a quarter of a degree, so the stops read * from the RIGHT edge inward: clear for the first 29%, .602 at 61%, solid * by the left edge. That is what keeps the copy column dark enough for * 58px type while the `white/10` cards on the right still sit over a * visible photograph. * * ⚠ NO VERTICAL EDGE FADES, and that is deliberate — the previous veil had * two (160px in, 60px out) from the OLD comp (32236:1877), which is a * different band on a different photo. 34046:2540 specifies none, and the * plate is already dark at both ends by its own vignette (row luma 17.6 at * the top, 14.1 at the bottom). Adding fades back would flatten the light * shaft the whole section is built around. * * ⚠ #091219 IS NOT A TOKEN and is not being made one. It appears in this one * fill; §8's rule is that a token has to earn itself across several uses. * It sits between `secondary` (#040A10) and `secondary-700` (#0C1C24) — * possibly a drifted duplicate, worth a designer question. */ .audience-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.2)), linear-gradient(to right, rgb(9 18 25 / 0) 29.106%, rgb(9 18 25 / 0.602) 61.263%, rgb(9 18 25) 99.761%); } /* * Mirrored: the copy moves left, so the solid end of the ramp moves with it. * This is the variant Who We Serve actually ships — the comp IS cards-right. */ .audience--cards-right .audience-bg::after { background: linear-gradient(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.2)), linear-gradient(to left, rgb(9 18 25 / 0) 29.106%, rgb(9 18 25 / 0.602) 61.263%, rgb(9 18 25) 99.761%); } /* ═══════════════════════════════════════════════════════════════════════ * BLOG CATEGORY FILTER — Figma 34046:1432 "Toggle". * * A SEGMENTED CONTROL, not a row of separate pills: one gold hairline pill * containing the whole row, whose active item is a filled pill and whose * inactive items are bare text. * * frame 649×63, border #C9922E, radius 500, row inset 7 (34046:1441) * row gap 40, items-center (34046:1433) * active bg #C9922E, px 40, radius 24, BLACK label, and a 48.411 BOX * — the node reads `py-[10px]` but measures 48.411 tall, so the * real vertical padding is ~14, not 10 (34046:1434) * inactive Inter SemiBold 16 / lh 20 / uppercase / #C9922E (34046:1437) * rules 1280 wide at y1339 and y1467 — the container width, while the * toggle is LEFT-ALIGNED at x80 (34046:1429 / 34046:1430) * * ⚠ BLACK ON GOLD IS THE COMP'S OWN CHOICE HERE (34046:1436), and it is also * the accessible one: white on this fill measures 2.75:1, black 7.63:1. The * founder switcher sets white on the same gold and had to be overridden; * this node needs no deviation. * * ⚠ THE OUTER PILL IS DROPPED BELOW lg, ON PURPOSE. Five 16px labels with * 40px gaps need ~623px of row; inside a fully-rounded border on a 390px * screen that wraps to two lines and the pill turns into a lozenge with a * ragged second row. Below lg the border goes and the labels wrap as a * plain group — the active pill still reads as active, which is the part * that carries meaning. The comp's single-pill form returns at lg. * * ⚠ `space-y-0` is load-bearing: base.css gives every `ul` a `space-y-3 * lg:space-y-4`, and `m-0 list-none p-0` does NOT cancel it — the same * defect already recorded on the footer's social row and intro_steps_band. * ═══════════════════════════════════════════════════════════════════════ */ /* ✓ The two rules span the column; 32px above the toggle and 33 below. */ .blog-filter-bar { border-top-width: 1px; border-bottom-width: 1px; border-color: rgb(255 255 255 / 0.13); padding-top: 1.5rem; padding-bottom: 1.5rem; } @media (min-width: 992px) { .blog-filter-bar { padding-top: 2rem; padding-bottom: 2rem; } .blog-filter { display: inline-block; border-radius: 9999px; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(201 146 46 / var(--tw-border-opacity, 1)); padding: 0.4375rem; } } .blog-filter-list { margin: 0px; display: flex; list-style-type: none; flex-wrap: wrap; align-items: center; -moz-column-gap: 1.5rem; column-gap: 1.5rem; row-gap: 0.75rem; } .blog-filter-list > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0px * var(--tw-space-y-reverse)); } .blog-filter-list { padding: 0px; } @media (min-width: 992px) { .blog-filter-list { flex-wrap: nowrap; -moz-column-gap: 2.5rem; column-gap: 2.5rem; row-gap: 0px; } } .blog-filter-list > li { margin-bottom: 0px; } /* * The inactive item is BARE — no border, no fill. Only the active one gets * chrome, which is what makes this a segmented control rather than five pills. */ .blog-filter-pill { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; border-radius: 1.5rem; padding-left: 0px; padding-right: 0px; padding-top: 0.625rem; padding-bottom: 0.625rem; font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; line-height: 1.25; letter-spacing: 0.02em; --tw-text-opacity: 1; color: rgb(201 146 46 / var(--tw-text-opacity, 1)); text-decoration-line: none; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 200ms; } .blog-filter-pill:hover { --tw-text-opacity: 1; color: rgb(232 201 106 / var(--tw-text-opacity, 1)); } @media (min-width: 992px) { .blog-filter-pill { padding-top: 0.875rem; padding-bottom: 0.875rem; font-size: 1rem; } } /* * ✓ The filled segment: #C9922E at radius 24 with a black label. * * ⚠ THE HORIZONTAL PADDING BELONGS TO THE ACTIVE ITEM ALONE. In the comp the * four inactive labels are bare text (34046:1437–1440) and only the active * one is a padded pill (34046:1434). Putting px on the base class instead * gave all five 80px of it and blew the frame out to 970 against the comp's * 649 — 4 × 80 = the exact 320 difference. * * Two separate rules of equal specificity, so source order decides and this * one is later; it is not an emit-order coin toss. */ .blog-filter-pill--active { --tw-bg-opacity: 1; background-color: rgb(201 146 46 / var(--tw-bg-opacity, 1)); padding-left: 1.5rem; padding-right: 1.5rem; --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); } .blog-filter-pill--active:hover { --tw-bg-opacity: 1; background-color: rgb(201 146 46 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); } @media (min-width: 992px) { .blog-filter-pill--active { padding-left: 2.5rem; padding-right: 2.5rem; } } /* * While a swap is in flight the list dims slightly rather than emptying — * `aria-busy` is set by mss.blogFilter() on the results wrapper, so screen * readers are told too. Nothing moves, so there is no layout jump. */ [data-blog-results][aria-busy='true'] { pointer-events: none; opacity: 0.6; transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } /* ═══════════════════════════════════════════════════════════════════════ * SHARED PLATE VEIL — Homeowners. * * Figma 34046:3185 (Why Homeowners Trust Us) and 34046:3102 (Foreclosure vs. * Short Sale) specify BYTE-IDENTICAL fills, so one class serves both rather * than two copies drifting apart. Only the photograph's placement differs, * and the module classes below handle that. * * 1 to bottom rgba(18,20,20,0) 78.194% -> #121414 100% bottom fade * 2 flat rgba(0,0,0,.2) overall wash * 3 to left #091219 0% -> .602 25.717% -> 0 52.185% RIGHT ramp * * ⚠ LAYER 3 IS OPAQUE AT THE RIGHT and clears by the middle — the opposite * of audience_cards'. Both comps bury the side their subject is NOT on: * here the lit doorway sits centre-left, so the right goes dark and the * cards over it get a ground to sit on. * * ⚠ #091219 is not a token; see the note on `.audience-bg::after`. */ .plate-veil::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgb(18 20 20 / 0) 78.194%, rgb(18 20 20) 100%), linear-gradient(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.2)), linear-gradient(to left, rgb(9 18 25) 0%, rgb(9 18 25 / 0.602) 25.717%, rgb(9 18 25 / 0) 52.185%); } /* * ✓ The photograph is NOT full-bleed here: 34046:3185 masks it to the right * 66.81% of the band, starting at 32.91%. The shipped file is already the * exact aspect of that window (1.241), so it fits without cropping. * * Below lg the copy stacks over the picture, so it runs full width — the same * call `.quote-band-media` makes for the same reason. */ .values-bg--plate { pointer-events: none; position: absolute; inset: 0px; z-index: 0; } @media (min-width: 992px) { .values-bg--plate { left: 32.91%; right: 0px; width: 66.81%; } } .values-bg--plate img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /* * ── FULL-BLEED PLATE ──────────────────────────────────────────────── * * Figma 34046:3619 (Realtor Training Course, "Course Overview"). Same card * treatment as `.values-bg--plate`, different ground: the photograph runs * FULL WIDTH, anchored to its bottom edge, and the veil is heavier. * * 1 to bottom rgba(18,20,20,0) 78.194% -> #121414 100% bottom fade * 2 flat rgba(0,0,0,.4) overall wash * 3 to left #091219 0% -> 0 40.392% RIGHT edge * 4 to left 0 32.968% -> .602 64.174% -> #091219 94.435% LEFT side * * ⚠ IT BURIES BOTH EDGES, not one. Layer 3 kills the right edge, layer 4 the * left, leaving the picture clearest around 35–40% in from the right. That * is deliberate: on this page the copy is on the LEFT and the cards on the * RIGHT, so BOTH sides need a ground and only the gap between them shows * the photograph. Homeowners' `.plate-veil` clears one side because its * picture is masked to the other. * * ⚠ The flat wash is .4 here against .2 on Homeowners. Do not unify them. * * ⚠ #091219 is not a token; see the note on `.audience-bg::after`. */ .plate-veil--full::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgb(18 20 20 / 0) 78.194%, rgb(18 20 20) 100%), linear-gradient(rgb(0 0 0 / 0.4), rgb(0 0 0 / 0.4)), linear-gradient(to left, rgb(9 18 25) 0%, rgb(9 18 25 / 0) 40.392%), linear-gradient(to left, rgb(9 18 25 / 0) 32.968%, rgb(9 18 25 / 0.602) 64.174%, rgb(9 18 25) 94.435%); } /* * ── FULL-BLEED PLATE, BOTH EDGES FADED ────────────────────────────── * * Figma 34046:1078 (Join our Team, "What It Takes to Thrive Here"). The same * ground as `.plate-veil--full` with a TOP fade added, because this band sits * between two dark sections rather than under the trust bar. * * 1 to bottom #121414 0% -> transparent 24.935% TOP fade * 2 to bottom transparent 74.738% -> #121414 100% bottom fade * 3 flat rgba(0,0,0,.4) overall wash * 4 to left #091219 0% -> 0 40.392% RIGHT edge * 5 to left 0 32.968% -> .602 64.174% -> #091219 94.435% LEFT side * * ⚠ LAYERS 3–5 ARE BYTE-IDENTICAL TO `.plate-veil--full`. They are written out * again rather than composed, because a multi-layer `background` cannot be * extended — declaring it twice replaces the list rather than appending to * it. If one of those three changes, change it in BOTH places. * * ⚠ The bottom fade starts at 74.738% here against 78.194% on `--full`. A 3.5% * difference nobody will see, kept because it is what the node says and * guessing which of two near-identical values is "the real one" is how a * spec stops being a reference. */ .plate-veil--full-fade::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgb(18 20 20) 0%, rgb(18 20 20 / 0) 24.935%), linear-gradient(to bottom, rgb(18 20 20 / 0) 74.738%, rgb(18 20 20) 100%), linear-gradient(rgb(0 0 0 / 0.4), rgb(0 0 0 / 0.4)), linear-gradient(to left, rgb(9 18 25) 0%, rgb(9 18 25 / 0) 40.392%), linear-gradient(to left, rgb(9 18 25 / 0) 32.968%, rgb(9 18 25 / 0.602) 64.174%, rgb(9 18 25) 94.435%); } /* ✓ Full width, bottom-anchored (34046:3619's `object-bottom size-full`). */ .values-bg--full { pointer-events: none; position: absolute; inset: 0px; z-index: 0; } .values-bg--full img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: bottom; object-position: bottom; } /* ═══════════════════════════════════════════════════════════════════════ * COMPARISON TABLE — optional plate behind the band. * Figma 34046:3102. Full-bleed; the shipped file is pre-cropped to 1.773 so * object-cover neither stretches nor crops it. * ═══════════════════════════════════════════════════════════════════════ */ .compare-bg { pointer-events: none; position: absolute; inset: 0px; z-index: 0; } .compare-bg img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /* ═══════════════════════════════════════════════════════════════════════ * PLAN CARD — the plate behind the Academy band. * * Figma 34046:2974 (Rectangle 40289), 1440×950. FIVE stacked gradients over * the photograph, here rather than inline because a multi-layer * `background-image` has no utility form — same call as mission_cards and * quote-band. * * Read off the comp's own fill spec, in paint order (first listed paints on * top, so this list is the reverse of how Figma names them): * 1 to top rgba(4,10,16,0) 86.783% → #040A10 100% top fade * 2 to bottom rgba(18,20,20,0) 83.211% → #121414 100% bottom fade * 3 to left rgba(9,18,25,0) 90.694% → .6 at 100% left edge * 4 to left #091219 0% → .602 28.812% → 0 52.845% RIGHT ramp * 5 flat rgba(9,18,25,.3) overall wash * * ⚠ LAYER 4 IS THE ONE THAT MATTERS and it is the counter-intuitive one: it * is opaque at the RIGHT edge and clears by the middle, because the comp's * photograph puts its subject (a hand reaching up through water) on the * LEFT. Flip it and the hand disappears while empty water gets revealed. * * ⚠ The top and bottom fades run to DIFFERENT colours — #040A10 (secondary) * above, #121414 (secondary-600) below. That is what the comp specifies; * it is not a typo to tidy. The band above is the ocean strip and the one * below is the FAQ panel, and they do not share a ground. * * ⚠ #091219 IS NOT A TOKEN — see the same note on `.audience-bg::after`. */ .plan-bg { pointer-events: none; position: absolute; inset: 0px; z-index: 0; } .plan-bg img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .plan-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgb(4 10 16 / 0) 86.783%, rgb(4 10 16) 100%), linear-gradient(to bottom, rgb(18 20 20 / 0) 83.211%, rgb(18 20 20) 100%), linear-gradient(to left, rgb(9 18 25 / 0) 90.694%, rgb(9 18 25 / 0.6) 100%), linear-gradient(to left, rgb(9 18 25) 0%, rgb(9 18 25 / 0.602) 28.812%, rgb(9 18 25 / 0) 52.845%), linear-gradient(rgb(9 18 25 / 0.3), rgb(9 18 25 / 0.3)); } /* ═══════════════════════════════════════════════════════════════════════ * PRICING TIERS — CONVERTED TO INLINE UTILITIES. * Styles live on the markup in template-parts/modules/. The class names * remain there as unstyled QA/JS hooks. * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ * GUARANTEE BANNER — CONVERTED TO INLINE UTILITIES. * Styles live on the markup in template-parts/modules/. The class names * remain there as unstyled QA/JS hooks. * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ * COMPARISON TABLE — CONVERTED TO INLINE UTILITIES. * Styles live on the markup in template-parts/modules/. The class names * remain there as unstyled QA/JS hooks. * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ * FORM SECTION — CONVERTED TO INLINE UTILITIES. * Styles live on the markup in template-parts/modules/. The class names * remain there as unstyled QA/JS hooks. * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ * TESTIMONIAL GRID — the `grid` display of the testimonials module. * Figma 32236:3670. Cards are .quote-card, shared with the featured layout. * ═══════════════════════════════════════════════════════════════════════ */ .quote-grid-sec { position: relative; z-index: 1; overflow: hidden; --tw-bg-opacity: 1; background-color: rgb(4 10 16 / var(--tw-bg-opacity, 1)); padding-top: 3rem; padding-bottom: 3rem; } @media (min-width: 992px) { .quote-grid-sec { padding-top: 4rem; padding-bottom: 4rem; } } @media (min-width: 1200px) { .quote-grid-sec { padding-top: 5rem; padding-bottom: 5rem; } } @media (min-width: 1440px) { .quote-grid-sec { padding-top: 6rem; padding-bottom: 6rem; } } /* * Photograph behind the whole grid — Figma 34046:2366, the archive's * "Section - NEGOTIATE BANNER" plate, 1442×1471. * * ⚠ THE GRID BRANCH USED TO IGNORE `ss_background` ENTIRELY. The field was * stored on the archive page and only the FEATURED branch ever read it, so * the section rendered flat and the image was dead data. * * ✓ REPLACES A PROVISIONAL VEIL. This shipped first as a guess borrowed from * `.values-bg` (a flat .62 wash) because the Figma connector was down. These * are the node's own four layers, and the side ramp turns out to be the * house "negotiate banner" profile — .92 → .72 → .08 — the same one * `.split::after` documents: * * 1 to bottom rgba(4,10,16,.92) 7.559% → .72 27.837% → .08 48.412%, * 402px tall, TOP-anchored (34046:2368/2369) * 2 to bottom #121414 0 → .07 at 60% → opaque, 925px, BOTTOM-anchored * (34046:2370) * 3 to left rgba(4,10,16,.92) 34.135% → .72 44.231% → .08 76.923% * full height (34046:2367, x-flipped) * * ⚠ LAYER 1 IS IN THE FILE TWICE (34046:2368 and 34046:2369 are byte-identical * and stacked). Applied once here: two 92% blacks compound to 99.4%, which * would make the top edge effectively opaque, and a duplicated node reads as * a copy-paste rather than an intent. * * ⚠ LAYER 3 IS X-FLIPPED IN FIGMA (`-scale-x-100` on 34046:2367), which is why * it is `to left` here and its stops read from the RIGHT edge. Port it as * `to right` and the dark end lands on the wrong side. * * Written with background-position/size rather than as three full-bleed * gradients because two of the three are fixed-height and edge-anchored — the * same idiom `.inner-banner::after` uses for the banner scrims. */ .quote-grid-media { pointer-events: none; position: absolute; inset: 0px; z-index: 0; } .quote-grid-media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /* * ── THE "NEGOTIATE BANNER" PLATE ──────────────────────────── * * ONE class for every instance of Figma's "Section - NEGOTIATE BANNER" * component. It appears at least three times in the file — the testimonials * archive (34046:2366), the Join our Team form band (34046:863) and the band * `text_image_split` was built from (30471:333) — and every instance carries * the SAME three layers over the SAME photograph. * * ⚠ THE PHOTOGRAPH IS SHARED TOO. `negotiate-banner-bg.png` (attachment 558) * is byte-identical to the fill Figma serves for these nodes — verified, * zero difference across all three channels. Do not import a second copy. * * 1 to bottom rgba(4,10,16,.92) 7.559% → .72 27.837% → .08 48.412%, * 402px, TOP-anchored * 2 to bottom #121414 0 → .07 at 60% → opaque, 925px, BOTTOM-anchored * 3 to left rgba(4,10,16,.92) 34.135% → .72 44.231% → .08 76.923% * * ⚠ LAYER 3 IS X-FLIPPED IN FIGMA, which is why it is `to left` and its stops * read from the RIGHT edge. `text_image_split`'s header records the same * profile (.92 → .72 at 48% → .08) and the same flip. Port it as `to right` * and the dark end lands on the wrong side. * * ⚠ LAYER 1 IS IN THE FILE TWICE on the archive instance (34046:2368 and * 34046:2369, byte-identical and stacked). Applied once: two 92% blacks * compound to 99.4%, and a duplicated node reads as a copy-paste. * * ⚠ THE TWO EDGE FADES ARE ABSOLUTE PIXELS, not percentages, so they do not * rescale with the band. Measured on the 1471-tall archive instance; the * 1324-tall form band inherits them. If a future instance is much shorter * the 925px bottom fade will dominate it — check before reusing. */ .negotiate-plate::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to bottom, rgb(4 10 16 / 0.92) 7.559%, rgb(4 10 16 / 0.72) 27.837%, rgb(4 10 16 / 0.08) 48.412%), linear-gradient(to bottom, rgb(18 20 20 / 0), rgb(18 20 20 / 0.07) 60%, rgb(18 20 20)), linear-gradient(to left, rgb(4 10 16 / 0.92) 34.135%, rgb(4 10 16 / 0.72) 44.231%, rgb(4 10 16 / 0.08) 76.923%); background-repeat: no-repeat, no-repeat, no-repeat; background-position: top center, bottom center, center; background-size: 100% 402px, 100% 925px, 100% 100%; } /* ═══════════════════════════════════════════════════════════════════════ * FORM SECTION — optional "negotiate banner" plate behind the band. * Figma 34046:863. Shares `.negotiate-plate` above; only the box differs. * ═══════════════════════════════════════════════════════════════════════ */ .form-sec-bg { pointer-events: none; position: absolute; inset: 0px; z-index: 0; } .form-sec-bg img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .quote-grid-inner { position: relative; z-index: 1; } .quote-grid-heading { margin-left: auto; margin-right: auto; margin-bottom: 2.5rem; max-width: 42rem; } @media (min-width: 992px) { .quote-grid-heading { margin-bottom: 3rem; } } /* * ✓ Two 614px cards across the 1280 column, 52px apart. * * ⚠ `items-start`, NOT the default stretch. Once the quotes are clamped the * cards are naturally equal, so stretch buys nothing — and on hover it would * grow the WHOLE ROW, so the card you are not reading gains a block of empty * space alongside the one that expanded. Sizing each card to its own content * means only the hovered one moves. */ .quote-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); align-items: flex-start; gap: 1.5rem; } @media (min-width: 992px) { .quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.25rem; } } /* * ✓ 360 IN THE GRID, not 420 and not a hug — Figma 34046:2372, six 614×360 * cards, two per row, 52 apart. `.quote-card`'s own `lg:min-h-[26.25rem]` * is the FEATURED card's height (34035:1443): one card, one long quote. * * ⚠ THIS CORRECTS AN OVER-CORRECTION. The 420 floor was reported as leaving * the archive cards far taller than their content — true: six cards at 420 * holding 62–93px of clamped text. The first fix released the floor * entirely, which made them hug at 286–317. The comp's answer is neither: * a fixed 360, with the attribution deliberately sitting low (quote text * ends at y191, attribution starts at y266). Hugging removed that space. * * Scoped to `.quote-grid` rather than edited on `.quote-card`, so the * featured card and `.quote-card--statement` (its own 360) are untouched — * both live in `.quote-band`, never here. */ @media (min-width: 992px) { .quote-grid .quote-card { min-height: 22.5rem; } } /* * Quote clamped to three lines, expanding on hover. * * ⚠ SCOPED TO `.quote-grid` — `.quote-card` is SHARED with the featured * layout, where the quote is the whole point of the section and runs four * lines by design (30471:186). Clamping there would truncate the homepage, * About Us, Course, Investors and Bankruptcy heroes. * * ⚠ WRAPPED IN `@media (hover: hover)` so touch devices never see it. There * is no hover on a phone, so a clamp there is permanent truncation with no * way to read the rest. * * The full text stays in the DOM — the clamp is purely visual, so screen * readers still get the whole quote. `focus-within` is included so the * expansion also fires if a focusable element is ever added to the card; * as it stands the card has none, so sighted keyboard-only users cannot * trigger it. A "read more" toggle would be the fix if that matters. * * -webkit-line-clamp supplies the ellipsis itself; it is not animatable, so * the expansion is deliberately instant rather than half-transitioned. */ @media (hover: hover) { .quote-grid .quote-card-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .quote-grid .quote-card:hover .quote-card-text, .quote-grid .quote-card:focus-within .quote-card-text { -webkit-line-clamp: unset; overflow: visible; } } .quote-grid-actions { margin-top: 2.5rem; display: flex; justify-content: center; } @media (min-width: 992px) { .quote-grid-actions { margin-top: 3rem; } } /* ═══════════════════════════════════════════════════════════════════════ * POST CARDS — CONVERTED TO INLINE UTILITIES. * Styles live on the markup in template-parts/modules/. The class names * remain there as unstyled QA/JS hooks. * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ * FEATURED POST — CONVERTED TO INLINE UTILITIES. * Styles live on the markup in template-parts/modules/. The class names * remain there as unstyled QA/JS hooks. * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ * PAGINATION — Figma 32236:774. * * Output comes from paginate_links(), so the selectors have to match what * WordPress emits: a.page-numbers / span.current / span.dots. * ═══════════════════════════════════════════════════════════════════════ */ .pagination { margin-top: 3rem; } @media (min-width: 992px) { .pagination { margin-top: 3.5rem; } } .pagination ul { margin: 0px; display: flex; list-style-type: none; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; } .pagination ul > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0px * var(--tw-space-y-reverse)); } .pagination ul { padding: 0px; } @media (min-width: 992px) { .pagination ul { gap: 1.5rem; } } .pagination li { margin: 0px; display: flex; } .pagination .page-numbers { display: flex; min-width: 1.25rem; align-items: center; justify-content: center; font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 0.875rem; font-weight: 600; line-height: 1; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); text-decoration-line: none; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 200ms; } .pagination .page-numbers:hover { --tw-text-opacity: 1; color: rgb(232 201 106 / var(--tw-text-opacity, 1)); } /* ✓ Current page: 40×40 gold box at radius 8px, Inter Bold, #121414 text. */ .pagination .page-numbers.current { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; --tw-bg-opacity: 1; background-color: rgb(201 146 46 / var(--tw-bg-opacity, 1)); font-weight: 700; --tw-text-opacity: 1; color: rgb(18 20 20 / var(--tw-text-opacity, 1)); } .pagination .page-numbers.dots { --tw-text-opacity: 1; color: rgb(143 160 168 / var(--tw-text-opacity, 1)); } .pagination .page-numbers.dots:hover { --tw-text-opacity: 1; color: rgb(143 160 168 / var(--tw-text-opacity, 1)); } /* ✓ 20px gold chevron. `prev` is mirrored — see mss_pagination(). */ .pagination-arrow { display: inline-flex; width: 1.25rem; height: 1.25rem; align-items: center; justify-content: center; } .pagination-arrow--prev { --tw-scale-x: -1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } /* ═══════════════════════════════════════════════════════════════════════ * SINGLE POST — CONVERTED TO INLINE UTILITIES. * Styles live on the markup in template-parts/modules/. The class names * remain there as unstyled QA/JS hooks. * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ * CHECKLIST COLUMNS — CONVERTED TO INLINE UTILITIES. * Its gradient divider CANNOT be — see the residual rule below. * ═══════════════════════════════════════════════════════════════════════ */ /* * ⚠ RESIDUAL — cannot be an inline utility. * * ✓ A 1px GRADIENT divider: #E8C96A fading to transparent at both ends, full * at 53% (32225:3866) — not the white/20 border used elsewhere. Two reasons it * has to stay CSS: a `+` sibling selector has no utility equivalent, and a * gradient background on a pseudo-element cannot be expressed with @apply. */ .checklist-col + .checklist-col::before { content: ''; position: absolute; top: 0; bottom: 0; /* * ⚠ HALF THE COLUMN GAP, NEGATED — keep the two in step. The gap is * `lg:gap-x-[6.25rem]` (100px) on .checklist-grid, so the rule sits 50px * left of the column to land dead centre of the gutter, which is where * 34046:962 and 34046:972 put it (x410 and x870, against columns ending * at 360 and 820). It was -1.5625rem for the old 50px gap; changing one * without the other slides every divider off centre. */ left: -3.125rem; width: 1px; display: none; background: linear-gradient( to bottom, transparent, #E8C96A 53%, transparent ); } @media (min-width: 992px) { .checklist-col + .checklist-col::before { display: block; } } /* ═══════════════════════════════════════════════════════════════════════ * VIDEO EMBED — CONVERTED TO INLINE UTILITIES. * Styles live on the markup in template-parts/modules/. The class names * remain there as unstyled QA/JS hooks. * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ * 404 — full-bleed photo + a 250px gradient numeral. Figma 31889:147. * ═══════════════════════════════════════════════════════════════════════ */ .error-404 { position: relative; z-index: 1; overflow: hidden; --tw-bg-opacity: 1; background-color: rgb(18 20 20 / var(--tw-bg-opacity, 1)); padding-top: 5rem; padding-bottom: 5rem; text-align: center; } @media (min-width: 992px) { .error-404 { padding-top: 7rem; padding-bottom: 7rem; } } @media (min-width: 1440px) { .error-404 { padding-top: 8rem; padding-bottom: 8rem; } } .error-404-media { position: absolute; inset: 0px; z-index: 1; } .error-404-media::after { position: absolute; inset: 0px; background-color: rgb(4 10 16 / 0.5); --tw-content: ''; content: var(--tw-content); } .error-404-media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .error-404-inner { position: relative; z-index: 2; margin-left: auto; margin-right: auto; max-width: 36rem; } /* * Playfair Black 250px, filled with a gradient — white through to #163944. * `background-clip: text` needs a transparent text colour, so this cannot be * expressed with @apply alone. */ .error-404-code { margin-bottom: 0px; font-family: "Playfair Display", Georgia, Cambria, serif; font-size: 6rem; font-weight: 900; line-height: 1; letter-spacing: -0.04em; } @media (min-width: 576px) { .error-404-code { font-size: 9rem; } } @media (min-width: 992px) { .error-404-code { font-size: 13rem; } } @media (min-width: 1440px) { .error-404-code { font-size: 15.625rem; } } .error-404-code { background-image: linear-gradient(to bottom, #ffffff 48%, #163944 96%); -webkit-background-clip: text; background-clip: text; color: transparent; } .error-404-title { /* ✓ Inter SemiBold 32px / +2.52px / uppercase — Inter, not the serif */ margin-bottom: 1rem; font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 1.25rem; font-weight: 600; text-transform: uppercase; line-height: 1.25; letter-spacing: 0.079em; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } @media (min-width: 992px) { .error-404-title { font-size: 1.625rem; } } @media (min-width: 1440px) { .error-404-title { font-size: 2rem; } } .error-404-text { /* ✓ Inter Regular 17px / lh 28.05 / #D0DADC → mss-gray-100 */ margin-left: auto; margin-right: auto; margin-bottom: 2rem; max-width: 30rem; font-size: 1rem; line-height: 1.65; --tw-text-opacity: 1; color: rgb(192 204 204 / var(--tw-text-opacity, 1)); } @media (min-width: 1440px) { .error-404-text { font-size: 1.0625rem; } } .error-404-actions { display: flex; justify-content: center; } /* Not in the design — a search form is a genuinely useful escape hatch on a * dead end, and the theme already styles it. Kept visually quiet. */ .error-404 .search-form { margin-left: auto; margin-right: auto; margin-top: 2.5rem; max-width: 24rem; } /* ═══════════════════════════════════════════════════════════════════════ * CTA BANNER — CONVERTED TO INLINE UTILITIES. * Styles live on the markup in template-parts/modules/. The class names * remain there as unstyled QA/JS hooks. * ═══════════════════════════════════════════════════════════════════════ */ /** * Hero and inner banner. * * Figma 30471:98 + 289/290/291. The z-index ladder matters: * media z-[-1] → dim z-[1] → gradient tint z-[2] → content z-[3] * * The gradient runs left-to-right from near-opaque to transparent, so the * left-aligned content stays legible over any photograph. */ /** * Buttons. * * Figma: Component 19 / 30471:85 * fill #C9922E · h 48px · rounded 24px (= pill) · Inter Semi Bold 16px * uppercase · BLACK label · w 198px (fixed in Figma → fluid here) * * Gravity Forms submit/next/previous are filtered to use .btn, so changes here * apply to every form button on the site. */ .btn { display: inline-flex; min-height: 3rem; cursor: pointer; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 9999px; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(201 146 46 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(201 146 46 / var(--tw-bg-opacity, 1)); padding-top: 0.75rem; padding-bottom: 0.75rem; padding-left: 2rem; padding-right: 2rem; text-align: center; font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 1rem; font-weight: 600; text-transform: uppercase; line-height: 1.5; --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); text-decoration-line: none; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } .btn:focus-visible { outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: #E8C96A; } .btn:not(.btn-disabled):hover { --tw-border-opacity: 1; border-color: rgb(232 201 106 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(232 201 106 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); } .btn i { font-size: 80%; } /* * Outline variant — for a secondary action on a dark band. The homepage CTA * pairs the gold button with a bordered phone pill (30471:412/419). */ .btn-outline { border-color: rgb(255 255 255 / 0.4); background-color: transparent; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .btn-outline:not(.btn-disabled):hover { --tw-border-opacity: 1; border-color: rgb(255 255 255 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(4 10 16 / var(--tw-text-opacity, 1)); } /* * Phone pill — the CTA banner's outlined button with the handset glyph ahead of * the number (30471:412/419, and 32236:361/362/366 on the sub-pages). * * ⚠ A LEADING MASK, NOT `mss_link()`'s $icon. That parameter appends the icon * AFTER the label; the design puts the glyph before the number. * * ⚠ A MASK, NOT AN. `.btn-outline` is white text that inverts to * `text-secondary` on hover — an
would stay white and vanish against the * white hover fill. `before:bg-current` + mask-image inherits the colour change. * Identical reasoning to `.header-phone`, which carries the same glyph. * * ✓ Geometry off the design: the icon FRAME is 20×20 with 16.64 × 18.04 of * artwork inside, so mask-size is stated rather than left to `contain` — contain * against a 20×20 box renders it ~11% oversized. Gap is 10px (frame ends x249, * number starts x259), which overrides `.btn`'s own 8px. * * ⚠ The url() resolves against the COMPILED theme/style.css, so `images/…` with * no `../`. The wrong form compiles silently and 404s at runtime. */ .btn-phone { gap: 0.625rem; } .btn-phone::before { display: block; width: 1.25rem; height: 1.25rem; flex-shrink: 0; background-color: currentColor; --tw-content: ''; -webkit-mask-image: url('images/ui/phone.svg'); mask-image: url('images/ui/phone.svg'); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; content: var(--tw-content); -webkit-mask-size: 16.64px 18.04px; mask-size: 16.64px 18.04px; } /* Applied by JS while a request is in flight, and to "no more results" pills. */ .btn-disabled { pointer-events: none; cursor: default; opacity: 0.6; } .btn-sm { min-height: 2.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1.25rem; padding-right: 1.25rem; font-size: 0.875rem; } /* * TEXT LINK WITH TRAILING ARROW — Figma Component 17 / 30471:512 * Inter Semi Bold 16px · uppercase · #C5973A · 8px gap · 22px arrow * * #C5973A is within ~5% of the button gold #C9922E, so it is DEDUPED to * `primary`. Flagged for the designer — almost certainly a duplicate swatch. * * The arrow is an exported SVG in Figma, not a font glyph. Using an icomoon * class here pending the icon export; swap `icon-arrow-long-right` for the real * glyph name once the set lands. */ .link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; --tw-text-opacity: 1; color: rgb(201 146 46 / var(--tw-text-opacity, 1)); text-decoration-line: none; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } .link-arrow:hover { gap: 0.75rem; --tw-text-opacity: 1; color: rgb(232 201 106 / var(--tw-text-opacity, 1)); } .link-arrow i { font-size: 1.25em; line-height: 1; } /* * The arrow returned by mss_arrow() — real geometry from Figma 30471:514, * 22.5 × 7.364. `shrink-0` keeps it from squashing when the label wraps; * `fill: currentColor` on the path means the hover colour shift is inherited * from .link-arrow rather than restated here. */ .link-arrow-glyph { display: inline-block; height: 0.4602rem; width: 1.40625rem; flex-shrink: 0; } /* * White pill — the 404's "Return to the Homepage" (31889:157). The design uses * white rather than the gold fill everywhere else, so it is a variant of .btn * rather than a new button. */ .btn-white { --tw-bg-opacity: 1 !important; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important; --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); } .btn-white:hover { --tw-bg-opacity: 1 !important; background-color: rgb(232 201 106 / var(--tw-bg-opacity, 1)) !important; --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); } /** * Footer. * * Figma 34035:1630 — REDESIGNED. Supersedes 30471:233. * * Crest left, FOUR columns right (two menus, contact, and Opening Hours carrying * the social row), then a full-bleed band one shade lighter holding the * copyright, the legal links and the domain disclaimer. * * Menu column headings double as .toggleBtn so the columns collapse below md, * driven by javascript/script.js → mss.toggle(). They are inert above md — the * Opening Hours column uses the same pair so it collapses with the others. */ /** * Forms — Gravity Forms, search form, comment form. * * PHASE 8. Built from Figma 32236:919 (Contact Us consultation form). The * placeholder that used to live here predicted the values correctly — inputs * are indeed white/10 on white/30 with mss-gray-300 placeholders — so the only * surprises were the label face and the radii. * * `functions.php` filters `gform_disable_css` to true, so this file owns 100% * of form styling; there is no Gravity Forms CSS to override or fight. * * Exact values from design context: * label Playfair Display SEMIBOLD 14px / uppercase / white * — the display serif on form labels, which is unusual and very * much intentional in this design (32236:922) * input h56, radius 8px, p16, bg rgba(217,217,217,.1) → white/10, * border rgba(251,251,251,.3) → white/30 (32236:923) * placeholder Inter Regular 16px / #9AB0B4 (= mss-gray-300) * textarea h120, top-aligned (32236:948) * submit full-width gold pill → the existing .btn (32236:951) * row gap 24px between fields, 20px between columns * * The form CARD itself (border, radius, padding) belongs to the form_section * module, not here — a form embedded anywhere else should not inherit it. */ /* Search form — minimal, so /?s= is not unstyled before Phase 8. */ form[role='search'] { position: relative; display: flex; } .search-form > label { flex-shrink: 0; flex-grow: 1; flex-basis: 0px; } .search-form input[type='search'], .search-form input[type='text'] { height: 3rem; width: 100%; border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; border-width: 1px; border-right-width: 0px; border-color: rgb(255 255 255 / 0.3); background-color: rgb(255 255 255 / 0.1); padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 0.5rem; padding-bottom: 0.5rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); outline: 2px solid transparent; outline-offset: 2px; } .search-form input[type='search']::-moz-placeholder, .search-form input[type='text']::-moz-placeholder { --tw-text-opacity: 1; color: rgb(154 176 180 / var(--tw-text-opacity, 1)); } .search-form input[type='search']::placeholder, .search-form input[type='text']::placeholder { --tw-text-opacity: 1; color: rgb(154 176 180 / var(--tw-text-opacity, 1)); } .search-form input[type='search']:focus, .search-form input[type='text']:focus { --tw-border-opacity: 1; border-color: rgb(201 146 46 / var(--tw-border-opacity, 1)); } @media (min-width: 992px) { .search-form input[type='search'], .search-form input[type='text'] { height: 3.5rem; } } .search-form input[type='submit'] { border-top-left-radius: 0px !important; border-bottom-left-radius: 0px !important; display: inline-flex; min-height: 3rem; cursor: pointer; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 9999px; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(201 146 46 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(201 146 46 / var(--tw-bg-opacity, 1)); padding-top: 0.75rem; padding-bottom: 0.75rem; padding-left: 2rem; padding-right: 2rem; text-align: center; font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 1rem; font-weight: 600; text-transform: uppercase; line-height: 1.5; --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); text-decoration-line: none; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } .search-form input[type='submit']:focus-visible { outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: #E8C96A; } .search-form input[type='submit']:not(.btn-disabled):hover { --tw-border-opacity: 1; border-color: rgb(232 201 106 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(232 201 106 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); } .search-form input[type='submit'] i { font-size: 80%; } /* ═══════════════════════════════════════════════════════════════════════════ * COMMENTS * * No design exists for these (see theme/comments.php). Styled from the same * values as the Gravity Forms layer below so the site's two form treatments do * not diverge. * ═══════════════════════════════════════════════════════════════════════════ */ .comments-area { position: relative; z-index: 1; border-top-width: 1px; border-color: rgb(255 255 255 / 0.13); --tw-bg-opacity: 1; background-color: rgb(4 10 16 / var(--tw-bg-opacity, 1)); padding-top: 3rem; padding-bottom: 3rem; } @media (min-width: 992px) { .comments-area { padding-top: 4rem; padding-bottom: 4rem; } } .comments-inner { margin-left: auto; margin-right: auto; max-width: 48rem; } .comments-title { margin-bottom: 2rem; font-family: "Playfair Display", Georgia, Cambria, serif; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.04em; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } @media (min-width: 1440px) { .comments-title { font-size: 1.75rem; } } .comment-list { margin: 0px; margin-bottom: 2.5rem; list-style-type: none; } .comment-list > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } .comment-list { padding: 0px; } .comment-list .children { margin-top: 1.5rem; list-style-type: none; } .comment-list .children > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } .comment-list .children { border-left-width: 1px; border-color: rgb(255 255 255 / 0.2); padding-left: 1.5rem; } .comment-body { border-radius: 1rem; border-width: 1px; border-color: rgb(255 255 255 / 0.3); background-color: rgb(255 255 255 / 0.1); padding: 1.25rem; } @media (min-width: 992px) { .comment-body { padding: 1.5rem; } } .comment-author { display: flex; align-items: center; gap: 0.75rem; font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 0.9375rem; font-weight: 600; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .comment-author img { width: 2.875rem; height: 2.875rem; border-radius: 9999px; } .comment-metadata { margin-top: 0.25rem; font-size: 0.8125rem; --tw-text-opacity: 1; color: rgb(143 160 168 / var(--tw-text-opacity, 1)); } .comment-metadata a { --tw-text-opacity: 1; color: rgb(143 160 168 / var(--tw-text-opacity, 1)); text-decoration-line: none; } .comment-content { margin-top: 1rem; font-size: 0.9375rem; line-height: 1.6; } .comment-content p:last-child { margin-bottom: 0px; } .reply { margin-top: 1rem; font-size: 0.8125rem; } .comments-closed { --tw-text-opacity: 1; color: rgb(154 176 180 / var(--tw-text-opacity, 1)); } /* Comment form — same label and input treatment as Gravity Forms. */ .comment-form label { margin-bottom: 0.5rem; display: block; font-family: "Playfair Display", Georgia, Cambria, serif; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; line-height: 1.5; letter-spacing: 0em; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .comment-form input[type='text'], .comment-form input[type='email'], .comment-form input[type='url'], .comment-form textarea { display: block; width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0.5rem; border-width: 1px; border-color: rgb(255 255 255 / 0.3); background-color: rgb(255 255 255 / 0.1); padding-left: 1rem; padding-right: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 1rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); outline: 2px solid transparent; outline-offset: 2px; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 200ms; } .comment-form input[type='text']::-moz-placeholder, .comment-form input[type='email']::-moz-placeholder, .comment-form input[type='url']::-moz-placeholder, .comment-form textarea::-moz-placeholder { --tw-text-opacity: 1; color: rgb(154 176 180 / var(--tw-text-opacity, 1)); } .comment-form input[type='text']::placeholder, .comment-form input[type='email']::placeholder, .comment-form input[type='url']::placeholder, .comment-form textarea::placeholder { --tw-text-opacity: 1; color: rgb(154 176 180 / var(--tw-text-opacity, 1)); } .comment-form input[type='text']:focus, .comment-form input[type='email']:focus, .comment-form input[type='url']:focus, .comment-form textarea:focus { --tw-border-opacity: 1; border-color: rgb(201 146 46 / var(--tw-border-opacity, 1)); } .comment-form input[type='text'], .comment-form input[type='email'], .comment-form input[type='url'] { height: 3.5rem; } .comment-form textarea { height: 7.5rem; resize: vertical; padding-top: 1rem; padding-bottom: 1rem; vertical-align: top; } .comment-form p { margin-bottom: 1.25rem; } .comment-form .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 0.625rem; } .comment-form .comment-form-cookies-consent label { margin-bottom: 0px; font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 0.875rem; font-weight: 400; text-transform: none; letter-spacing: 0em; --tw-text-opacity: 1; color: rgb(192 204 204 / var(--tw-text-opacity, 1)); } .comment-form input[type='checkbox'] { margin-top: 0.25rem; width: 1rem; height: 1rem; flex-shrink: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0.125rem; border-width: 1px; border-color: rgb(255 255 255 / 0.3); background-color: rgb(255 255 255 / 0.1); } .comment-form input[type='checkbox']:checked { --tw-border-opacity: 1; border-color: rgb(201 146 46 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(201 146 46 / var(--tw-bg-opacity, 1)); } /* ═══════════════════════════════════════════════════════════════════════════ * GRAVITY FORMS * * Selectors target GF 2.5+ markup (`.gform_wrapper`, `.gfield`, `.ginput_*`). * Kept flat and specific rather than nested, because GF injects its own * wrappers and a deep descendant chain breaks whenever that markup shifts. * ═══════════════════════════════════════════════════════════════════════════ */ .gform_wrapper form { margin: 0px; } /* GF's own grid is replaced with a flex row: ✓ 24px between fields. */ .gform_wrapper .gform_fields { margin: 0px; margin-left: -0.625rem; margin-right: -0.625rem; display: flex; list-style-type: none; flex-wrap: wrap; row-gap: 1.5rem; } .gform_wrapper .gform_fields > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0px * var(--tw-space-y-reverse)); } .gform_wrapper .gform_fields { padding: 0px; } .gform_wrapper .gfield { width: 100%; padding-left: 0.625rem; padding-right: 0.625rem; } /* ✓ 20px column gap on the paired rows (first/last name, phone/email). */ @media (min-width: 576px) { .gform_wrapper .gfield.gf_left_half, .gform_wrapper .gfield.gf_right_half { width: 50%; } } /* ── Labels ───────────────────────────────────────────────────────────────── * ✓ Playfair SemiBold 14px uppercase white. `tracking-normal` cancels the * display tracking base.css puts on the serif at heading sizes. * ─────────────────────────────────────────────────────────────────────────── */ .gform_wrapper .gfield_label { margin-bottom: 0.5rem; display: block; font-family: "Playfair Display", Georgia, Cambria, serif; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; line-height: 1.5; letter-spacing: 0em; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .gform_wrapper .gfield_required { margin-left: 0.125rem; --tw-text-opacity: 1; color: rgb(232 201 106 / var(--tw-text-opacity, 1)); text-decoration-line: none; } /* GF sub-labels (e.g. on name/address complex fields). */ .gform_wrapper .ginput_complex label, .gform_wrapper .gform_fileupload_rules, .gform_wrapper .gfield_description { margin-top: 0.375rem; display: block; font-size: 0.8125rem; line-height: 1.5; --tw-text-opacity: 1; color: rgb(154 176 180 / var(--tw-text-opacity, 1)); } /* ── Inputs ───────────────────────────────────────────────────────────────── * ✓ h56, radius 8px, p16, white/10 on white/30, mss-gray-300 placeholder. * `appearance-none` because iOS otherwise imposes its own chrome on selects * and date inputs, which would break the 8px radius. * ─────────────────────────────────────────────────────────────────────────── */ .gform_wrapper input[type='text'], .gform_wrapper input[type='email'], .gform_wrapper input[type='tel'], .gform_wrapper input[type='url'], .gform_wrapper input[type='number'], .gform_wrapper input[type='password'], .gform_wrapper input[type='date'], .gform_wrapper select, .gform_wrapper textarea { display: block; width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0.5rem; border-width: 1px; border-color: rgb(255 255 255 / 0.3); background-color: rgb(255 255 255 / 0.1); padding-left: 1rem; padding-right: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 1rem; line-height: 1.5; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); outline: 2px solid transparent; outline-offset: 2px; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 200ms; } .gform_wrapper input[type='text']::-moz-placeholder, .gform_wrapper input[type='email']::-moz-placeholder, .gform_wrapper input[type='tel']::-moz-placeholder, .gform_wrapper input[type='url']::-moz-placeholder, .gform_wrapper input[type='number']::-moz-placeholder, .gform_wrapper input[type='password']::-moz-placeholder, .gform_wrapper input[type='date']::-moz-placeholder, .gform_wrapper select::-moz-placeholder, .gform_wrapper textarea::-moz-placeholder { --tw-text-opacity: 1; color: rgb(154 176 180 / var(--tw-text-opacity, 1)); } .gform_wrapper input[type='text']::placeholder, .gform_wrapper input[type='email']::placeholder, .gform_wrapper input[type='tel']::placeholder, .gform_wrapper input[type='url']::placeholder, .gform_wrapper input[type='number']::placeholder, .gform_wrapper input[type='password']::placeholder, .gform_wrapper input[type='date']::placeholder, .gform_wrapper select::placeholder, .gform_wrapper textarea::placeholder { --tw-text-opacity: 1; color: rgb(154 176 180 / var(--tw-text-opacity, 1)); } .gform_wrapper input[type='text']:focus, .gform_wrapper input[type='email']:focus, .gform_wrapper input[type='tel']:focus, .gform_wrapper input[type='url']:focus, .gform_wrapper input[type='number']:focus, .gform_wrapper input[type='password']:focus, .gform_wrapper input[type='date']:focus, .gform_wrapper select:focus, .gform_wrapper textarea:focus { --tw-border-opacity: 1; border-color: rgb(201 146 46 / var(--tw-border-opacity, 1)); } .gform_wrapper input[type='text'], .gform_wrapper input[type='email'], .gform_wrapper input[type='tel'], .gform_wrapper input[type='url'], .gform_wrapper input[type='number'], .gform_wrapper input[type='password'], .gform_wrapper input[type='date'], .gform_wrapper select { height: 3.5rem; } /* ✓ 120px, and text starts at the top rather than centred. */ .gform_wrapper textarea { height: 7.5rem; resize: vertical; padding-top: 1rem; padding-bottom: 1rem; vertical-align: top; } /* * A caret for the select, drawn in CSS. The design shows one but exports no * asset for it, and `appearance-none` removes the native arrow — so without * this the select would look like a text input. */ .gform_wrapper select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201l5%205%205-5'%20stroke='%239AB0B4'%20stroke-width='1.5'%20fill='none'%20stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 0.7rem; background-position: right 1rem center; background-repeat: no-repeat; padding-right: 2.75rem; } /* The dropdown list itself is OS-rendered, so give it a readable dark fill. */ .gform_wrapper select option { --tw-bg-opacity: 1; background-color: rgb(4 10 16 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } /* ── Choices ───────────────────────────────────────────────────────────────── */ .gform_wrapper .gfield_checkbox, .gform_wrapper .gfield_radio { margin: 0px; list-style-type: none; } .gform_wrapper .gfield_checkbox > :not([hidden]) ~ :not([hidden]), .gform_wrapper .gfield_radio > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } .gform_wrapper .gfield_checkbox, .gform_wrapper .gfield_radio { padding: 0px; } .gform_wrapper .gchoice { display: flex; align-items: flex-start; gap: 0.625rem; } .gform_wrapper input[type='checkbox'], .gform_wrapper input[type='radio'] { margin-top: 0.25rem; width: 1rem; height: 1rem; flex-shrink: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-width: 1px; border-color: rgb(255 255 255 / 0.3); background-color: rgb(255 255 255 / 0.1); outline: 2px solid transparent; outline-offset: 2px; } .gform_wrapper input[type='checkbox']:checked, .gform_wrapper input[type='radio']:checked { --tw-border-opacity: 1; border-color: rgb(201 146 46 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(201 146 46 / var(--tw-bg-opacity, 1)); } .gform_wrapper input[type='checkbox']:focus-visible, .gform_wrapper input[type='radio']:focus-visible { --tw-border-opacity: 1; border-color: rgb(201 146 46 / var(--tw-border-opacity, 1)); } .gform_wrapper input[type='radio'] { border-radius: 9999px; } .gform_wrapper input[type='checkbox'] { border-radius: 0.125rem; } .gform_wrapper .gchoice label { margin-bottom: 0px; font-size: 0.9375rem; line-height: 1.375; --tw-text-opacity: 1; color: rgb(192 204 204 / var(--tw-text-opacity, 1)); } /* ── Submit ───────────────────────────────────────────────────────────────── * ✓ Full-width gold pill. functions.php filters gform_submit_button to add * `.btn`, so the pill itself is inherited — only the width is set here. * ─────────────────────────────────────────────────────────────────────────── */ .gform_wrapper .gform_footer { margin-top: 1.5rem; padding: 0px; } .gform_wrapper .gform_footer input[type='submit'], .gform_wrapper .gform_footer button { width: 100%; display: inline-flex; min-height: 3rem; cursor: pointer; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 9999px; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(201 146 46 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(201 146 46 / var(--tw-bg-opacity, 1)); padding-top: 0.75rem; padding-bottom: 0.75rem; padding-left: 2rem; padding-right: 2rem; text-align: center; font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 1rem; font-weight: 600; text-transform: uppercase; line-height: 1.5; --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); text-decoration-line: none; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } .gform_wrapper .gform_footer input[type='submit']:focus-visible, .gform_wrapper .gform_footer button:focus-visible { outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: #E8C96A; } .gform_wrapper .gform_footer input[type='submit']:not(.btn-disabled):hover, .gform_wrapper .gform_footer button:not(.btn-disabled):hover { --tw-border-opacity: 1; border-color: rgb(232 201 106 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(232 201 106 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); } .gform_wrapper .gform_footer input[type='submit'] i, .gform_wrapper .gform_footer button i { font-size: 80%; } /* ── Validation ───────────────────────────────────────────────────────────── * The design shows no error state, so these are the theme's own — built from * the `danger` token so they read as errors rather than as brand gold. * * ⚠ TEXT uses `danger-300`, not `danger`. At 13px the base red measures * 4.29:1 on the page background — just under the 4.5 AA floor — so the * lightened step (5.44:1) carries the message while the base red stays on * borders and fills, where contrast minimums do not apply. * ─────────────────────────────────────────────────────────────────────────── */ .gform_wrapper .gfield_error input, .gform_wrapper .gfield_error select, .gform_wrapper .gfield_error textarea { --tw-border-opacity: 1; border-color: rgb(226 35 54 / var(--tw-border-opacity, 1)); } .gform_wrapper .gfield_validation_message, .gform_wrapper .validation_message { margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.375; --tw-text-opacity: 1; color: rgb(232 80 95 / var(--tw-text-opacity, 1)); } .gform_wrapper .gform_validation_errors { margin-bottom: 1.5rem; border-radius: 0.5rem; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(226 35 54 / var(--tw-border-opacity, 1)); background-color: rgb(226 35 54 / 0.1); padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 1rem; padding-bottom: 1rem; } .gform_wrapper .gform_validation_errors h2, .gform_wrapper .gform_validation_errors .gform_submission_error { margin-bottom: 0px; font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 1rem; font-weight: 600; letter-spacing: 0em; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } /* Confirmation after a successful submit. */ .gform_confirmation_wrapper, .gform_wrapper .gform_confirmation_message { border-radius: 0.5rem; border-width: 1px; border-color: rgb(201 146 46 / 0.5); background-color: rgb(232 201 106 / 0.08); padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 1.25rem; padding-bottom: 1.25rem; font-size: 1rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } /* GF's honeypot and screen-reader-only bits must stay invisible. */ .gform_wrapper .gform_validation_container, .gform_wrapper .gfield_visibility_hidden { position: absolute !important; left: -9999px !important; height: 1px !important; width: 1px !important; overflow: hidden !important; } /** * Header and navigation. * * Written against WP_Bootstrap_Navwalker's output — .nav-item / .nav-link / * .dropdown-menu / .dropdown-item / .menu-item-has-children / .caret. The walker * and this file travel together: restyle here, don't swap the walker. * * JS classes (javascript/script.js → mss.nav()): * .stickyHeader added past 60px scroll * .navbar-collapse.show off-canvas panel open * .navbar-toggler.collapsed hamburger → X * --header-h published on :root, consumed by .site-content * * DESIGN: the header sits OVER the hero, transparent, and gains a solid dark * background once scrolled. xl (1200px) is the mobile↔desktop switch. * * OUTSTANDING: dropdown styling is a reasonable default — the "Dropdown" design * (file kIqe8WZycj5jMc7Tgfjmiw, node 31880:256) has not been read yet. */ /** * Module-level components. * * Only patterns that repeat across modules, or that are too complex to read * inline, live here. Single-section layout stays as inline utilities. */ /** * Editor output, pagination, search results. * * `.default-block` wraps WYSIWYG and Gutenberg content in modules and pages. * DISTINCT from Tailwind Typography's `prose` — never both on one element. * * Dark theme: headings go white, body stays the blue-grey, links are gold. */ .default-block { --tw-text-opacity: 1; color: rgb(192 204 204 / var(--tw-text-opacity, 1)); } @media (min-width: 1440px) { .default-block p + p { margin-top: 1.25rem; } } .default-block :is(h1, h2, h3, h4, h5, h6) { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .default-block p + :is(h1, h2, h3, h4, h5, h6), .default-block blockquote + :is(h1, h2, h3, h4, h5, h6) { margin-top: 1.5rem; } @media (min-width: 992px) { .default-block p + :is(h1, h2, h3, h4, h5, h6), .default-block blockquote + :is(h1, h2, h3, h4, h5, h6) { margin-top: 2rem; } } .default-block ul > :not([hidden]) ~ :not([hidden]), .default-block ol > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } @media (min-width: 992px) { .default-block ul > :not([hidden]) ~ :not([hidden]), .default-block ol > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } } /* Links underlined as well as coloured — not colour alone. */ .default-block ul a, .default-block ol a, .default-block p a { --tw-text-opacity: 1; color: rgb(201 146 46 / var(--tw-text-opacity, 1)); text-decoration-line: underline; } .default-block ul a:hover, .default-block ol a:hover, .default-block p a:hover { --tw-text-opacity: 1; color: rgb(232 201 106 / var(--tw-text-opacity, 1)); } .default-block .wp-block-quote { margin-top: 1.5rem; margin-bottom: 1.5rem; } @media (min-width: 992px) { .default-block .wp-block-quote { margin-top: 2rem; margin-bottom: 2rem; } } @media (min-width: 1440px) { .default-block .wp-block-quote { margin-top: 2.5rem; margin-bottom: 2.5rem; } } .default-block .wp-block-quote p:last-of-type { margin-bottom: 0px; } .default-block p + .wp-block-buttons, .default-block .wp-block-buttons + p { margin-top: 1.5rem; } @media (min-width: 992px) { .default-block p + .wp-block-buttons, .default-block .wp-block-buttons + p { margin-top: 2rem; } } @media (min-width: 1440px) { .default-block p + .wp-block-buttons, .default-block .wp-block-buttons + p { margin-top: 2.5rem; } } /* ── Images ─────────────────────────────────────────────────────────────── */ .default-block .wp-block-image { margin-top: 1.5rem; margin-bottom: 1.5rem; text-align: center; } @media (min-width: 576px) { .default-block .wp-block-image { margin-top: 2rem; margin-bottom: 2rem; } } @media (min-width: 992px) { .default-block .wp-block-image { margin-top: 2.5rem; margin-bottom: 2.5rem; } } .default-block .wp-block-image img { margin-left: auto; margin-right: auto; } .default-block img { border-radius: 1.25rem; } /* ── Columns / media-text — force the theme's gutter system ─────────────── */ .default-block .wp-block-columns { display: flex !important; } .default-block .wp-block-media-text { display: grid !important; } .default-block .wp-block-columns, .default-block .wp-block-media-text { margin-left: -1rem; margin-right: -1rem; align-items: center !important; row-gap: 1.5rem; } @media not all and (min-width: 576px) { .default-block .wp-block-columns, .default-block .wp-block-media-text { display: block; } } @media (min-width: 768px) { .default-block .wp-block-columns, .default-block .wp-block-media-text { margin-top: 1.5rem; margin-bottom: 1.5rem; } } @media (min-width: 992px) { .default-block .wp-block-columns, .default-block .wp-block-media-text { margin-top: 2.25rem; margin-bottom: 2.25rem; } } .default-block .wp-block-column, .default-block .wp-block-media-text__media, .default-block .wp-block-media-text__content { padding-left: 1rem; padding-right: 1rem; } .default-block .wp-block-column:nth-child(2n), .default-block .wp-block-media-text__media:nth-child(2n), .default-block .wp-block-media-text__content:nth-child(2n) { margin-left: 0px; } .default-block .wp-block-columns .wp-block-image { margin-top: 0px; margin-bottom: 0px; } @media not all and (min-width: 576px) { .default-block .wp-block-columns .wp-block-image { margin-top: 0.5rem; } } @media (min-width: 768px) { .default-block .wp-block-columns .wp-block-image { margin-bottom: 1.5rem; } } .default-block .wp-block-columns .wp-block-gallery, .default-block .wp-block-columns .blocks-gallery-item { margin: 0px; padding: 0px; } .default-block .wp-block-columns .wp-block-gallery { list-style-type: none; } .default-block .wp-block-columns .blocks-gallery-item::before { content: var(--tw-content); display: none; } /* ── Two-column list utility (class added in the editor) ────────────────── */ @media (min-width: 992px) { .default-block .list-columns-2 ul, .default-block ul.list-columns-2 { -moz-columns: 2; columns: 2; } } .default-block .list-columns-2 ul li, .default-block ul.list-columns-2 li { -moz-column-break-inside: avoid; break-inside: avoid; } .default-block .list-columns-2 ul li>strong, .default-block ul.list-columns-2 li>strong { font-weight: 600; } /* ── Search results ────────────────────────────────────────────────────── */ .search-result-article { margin-bottom: 1rem; border-radius: 1.25rem; border-width: 1px; border-color: rgb(255 255 255 / 0.2); background-color: rgb(255 255 255 / 0.05); padding-top: 1.5rem; padding-bottom: 1.5rem; padding-left: 1rem; padding-right: 1rem; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .search-result-article:hover { border-color: rgb(201 146 46 / 0.6); } @media (min-width: 576px) { .search-result-article { margin-bottom: 2rem; padding: 1.5rem; padding-top: 2rem; padding-bottom: 2rem; } } .search-result-article>*:empty { display: none; } .entry-footer > *, .entry-meta > * { margin-right: 0.5rem; border-right-width: 1px; border-right-color: rgb(255 255 255 / 0.2); padding-right: 0.5rem; } .entry-footer > *:last-child, .entry-meta > *:last-child { margin-right: 0px; border-width: 0px; padding-right: 0px; } .entry-footer > * time+time, .entry-meta > * time+time { margin-left: 0.5rem; } /* ── Pagination ────────────────────────────────────────────────────────── */ .pagination { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 0.75rem; -moz-column-gap: 0.5rem; column-gap: 0.5rem; } .pagination .page-numbers { display: flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border-radius: 9999px; border-width: 1px; border-color: rgb(255 255 255 / 0.3); font-size: 0.875rem; line-height: 1; --tw-text-opacity: 1; color: rgb(192 204 204 / var(--tw-text-opacity, 1)); text-decoration-line: none; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .pagination .page-numbers:hover { text-decoration-line: none; } .pagination .page-numbers:focus-visible { outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: #E8C96A; } .pagination .page-numbers.current { pointer-events: none; --tw-border-opacity: 1; border-color: rgb(201 146 46 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(201 146 46 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); } .pagination .page-numbers.disabled { opacity: 0.5; } .pagination .page-numbers:not(.disabled):hover { --tw-border-opacity: 1; border-color: rgb(201 146 46 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(201 146 46 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); } /** * Carousel overrides. * * PLACEHOLDER — no carousel library is installed yet. * * DECISION PENDING (raise at Phase 0 sign-off): the Premix theme uses slick + * jQuery (~40KB for the slider alone). The only carousel-ish sections in this * design so far are the "As Seen On" logo strip (30471:122) and the testimonial * block (30471:186), both of which CSS scroll-snap or a marquee animation would * handle with no library. * * If slick IS adopted, port the Premix rules here — including the CLS fix that * lays slides out flex and hides them until slick adds `.slick-slider`, so an * un-initialised carousel never flashes as a vertical stack: * * [class^='slider-col-'], .ss-logo-slider { @apply flex invisible; } * [class^='slider-col-'].slick-slider, * .ss-logo-slider.slick-slider { @apply block visible; } */ /* Logo marquee — library-free, using the `animate-marquee` keyframes from the * Tailwind config, which translate by -50%. * * ⚠ THE ANIMATION IS GATED ON `data-marquee-ready`, which `mss.marquee()` sets * after it has cloned the authored pass enough times to keep the strip covered. * A -50% translate is only seamless when the first half of the track is at least * as wide as the visible window; the template used to hard-code two passes, * which with three logos left a 550px hole scrolling through. The pass count has * to be measured, so the animation cannot start until JS has done it. * * Gating it also gives the right no-JS state: a static row of logos, rather than * a loop that visibly jumps. `animation-duration` is written by the same JS to * hold a constant px/s regardless of how many logos the client adds. */ .marquee-track { display: flex; width: -moz-max-content; width: max-content; align-items: center; } @keyframes marquee { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } } .marquee-track[data-marquee-ready] { animation: marquee 15s linear infinite; } @media (prefers-reduced-motion: reduce) { .marquee-track[data-marquee-ready] { animation: none; } } /** * Named components. Imported LAST in the components layer, so anything here * overrides the other component files without !important. * * Only add a class once a pattern has appeared THREE times inline. */ .page-title, .entry-title { margin-bottom: 1.5rem; font-family: "Playfair Display", Georgia, Cambria, serif; font-weight: 700; letter-spacing: -0.04em; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } /* Gutenberg alignment — widths come from theme.json via @_tw/themejson. */ .entry-content > .alignwide { max-width: 1440px; } .entry-content > .alignfull { max-width: none; } .entry-content > .alignleft { float: left; margin-right: 2rem; } .entry-content > .alignright { float: right; margin-left: 2rem; } /* ═══════════════════════════════════════════════════════════════════════════ * SECTION HEADING BLOCK * *
* Specialists in difficult situations * * * Figma eyebrow: 30471:338 — Inter Semi Bold 11px, +2.42px tracking (0.22em), * uppercase, #E8C96A, 17.6px line-height. * Also seen at 13px / +2.34px on card titles (30471:133) — same 0.22em ratio, * so `tracking-eyebrow` covers both. * * NOTE: unlike the Premix theme, this design's eyebrow has NO decorative rule * flanks — so there are no has-lines-* modifiers. Plain gold uppercase label. * ═══════════════════════════════════════════════════════════════════════════ */ .block-title .title-small { margin-bottom: 0.75rem; display: block; font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; line-height: 1.6; letter-spacing: 0.22em; --tw-text-opacity: 1; color: rgb(232 201 106 / var(--tw-text-opacity, 1)); } @media (min-width: 992px) { .block-title .title-small { margin-bottom: 1rem; } } @media (min-width: 1440px) { .block-title .title-small { font-size: 0.75rem; } } /* * Accent words inside a section heading. The designer marks them by switching * to Playfair Display Black ITALIC in the light gold — see the hero * "Pulls You Under," (30471:289). * * Editors produce this by wrapping words in , which is why headings are * echoed with wp_kses_post() rather than esc_html(). */ .block-title h2 em, .block-title h1 em { font-weight: 900; font-style: italic; --tw-text-opacity: 1; color: rgb(232 201 106 / var(--tw-text-opacity, 1)); } .block-title h2 span, .block-title h1 span { font-weight: 900; font-style: italic; --tw-text-opacity: 1; color: rgb(232 201 106 / var(--tw-text-opacity, 1)); } /* * Oversized section heading — one section in the homepage design uses 66px * rather than the 58px h2 token (30471:164). Opt in per section rather than * bending the scale. */ @media (min-width: 1440px) { .block-title--lg h2 { font-size: 4.125rem; } } .block-title--lg h2 { /* 66px */ } /* * On a GOLD background (the brand-overlay panels), the default gold eyebrow and * gold accent words drop to near-zero contrast. This variant takes both to * white. Headings are already white via base.css / .title-white. */ .block-title--white .title-small { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .block-title--white h1 span, .block-title--white h2 span, .block-title--white h1 em, .block-title--white h2 em { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } /* ═══════════════════════════════════════════════════════════════════════════ * SURFACE CARD — the 6 "What we help with" tiles (30471:131) * bg rgba(217,217,217,.1) → white/10 · border rgba(251,251,251,.3) → white/30 * radius 20px · 271×185 * * Both fills are near-white at low alpha, so they are expressed as opacity * modifiers rather than new palette entries. * ═══════════════════════════════════════════════════════════════════════════ */ .surface-card { height: 100%; border-radius: 1.25rem; border-width: 1px; border-color: rgb(255 255 255 / 0.3); background-color: rgb(255 255 255 / 0.1); padding: 1.25rem; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } .surface-card:hover { border-color: rgb(201 146 46 / 0.6); background-color: rgb(255 255 255 / 0.14); } @media (min-width: 992px) { .surface-card { padding: 1.5rem; } } /* * Card title. Visually an eyebrow (uppercase, tracked, gold) but semantically a * heading — Figma 30471:133: Inter BOLD 13px, +2.34px, #E8C96A. * Use on a realWe negotiate with lenders so you can focus…
*, not a
. */ .surface-card-title { margin-bottom: 0.625rem; font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; line-height: 1.6; letter-spacing: 0.22em; --tw-text-opacity: 1; color: rgb(232 201 106 / var(--tw-text-opacity, 1)); } /* ═══════════════════════════════════════════════════════════════════════════ * ICON LIST — wrap a WYSIWYGto swap bullets for an icon. * TODO: `\e932` is a placeholder codepoint — set it once the icomoon set lands. * ═══════════════════════════════════════════════════════════════════════════ */ .list-icon ul, ul.list-icon { margin-left: 0px; list-style-type: none; } .list-icon ul li, ul.list-icon li { position: relative; padding-left: 2rem; } .list-icon ul li::before, ul.list-icon li::before { position: absolute; top: 0.15em; left: 0px; font-family: icomoon; font-size: 1.2em; font-weight: 400; line-height: 1; content: var(--tw-content); --tw-text-opacity: 1; color: rgb(201 146 46 / var(--tw-text-opacity, 1)); } @media (min-width: 992px) { .list-icon ul li, ul.list-icon li { padding-left: 2.25rem; } } .list-icon ul li strong, ul.list-icon li strong { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } /* ═══════════════════════════════════════════════════════════════════════════ * Skip link — first child of .site-wrapper. * ═══════════════════════════════════════════════════════════════════════════ */ .skip-link { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .skip-link:focus { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; position: fixed; left: 1rem; top: 1rem; z-index: 100000; border-radius: 0.25rem; --tw-bg-opacity: 1; background-color: rgb(201 146 46 / var(--tw-bg-opacity, 1)); padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } /* ═══════════════════════════════════════════════════════════════════════════ * WYSIWYG PAGE BODIES — the legal pages. * * Figma 32236:1330 (Terms) sets section headings as Playfair Display SemiBold * 24px in #E8C96A, UPPERCASE, +2.42px — not the plain prose heading. Privacy * (32236:1183) has identically-sized heading nodes, so it gets the same * treatment; only Terms' values were actually sampled. * * Scoped to `--page` so blog posts (single.php) keep the default prose headings. * ═══════════════════════════════════════════════════════════════════════════ */ .entry-content--page :is(h2, h3) { margin-bottom: 1.5rem; margin-top: 3rem; font-family: "Playfair Display", Georgia, Cambria, serif; font-size: 1.25rem; font-weight: 600; text-transform: uppercase; line-height: 1.25; letter-spacing: 0.22em; --tw-text-opacity: 1; color: rgb(232 201 106 / var(--tw-text-opacity, 1)); } .entry-content--page :is(h2, h3):first-child { margin-top: 0px; } @media (min-width: 1440px) { .entry-content--page :is(h2, h3) { font-size: 1.5rem; } } /* ✓ Inter Regular 16px / lh 26px / #C0CCCC (32236:1438). */ .entry-content--page p { margin-bottom: 1rem; font-size: 0.9375rem; line-height: 1.625; --tw-text-opacity: 1; color: rgb(192 204 204 / var(--tw-text-opacity, 1)); } @media (min-width: 1440px) { .entry-content--page p { font-size: 1rem; } } .entry-content--page a { --tw-text-opacity: 1; color: rgb(201 146 46 / var(--tw-text-opacity, 1)); text-decoration-line: underline; } .entry-content--page a:hover { --tw-text-opacity: 1; color: rgb(232 201 106 / var(--tw-text-opacity, 1)); } .entry-content--page hr { margin-top: 2.5rem; margin-bottom: 2.5rem; border-color: rgb(255 255 255 / 0.2); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .pointer-events-none { pointer-events: none; } .visible { visibility: visible; } .invisible { visibility: hidden; } .collapse { visibility: collapse; } .static { position: static; } .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .inset-0 { inset: 0px; } .inset-x-0 { left: 0px; right: 0px; } .inset-y-0 { top: 0px; bottom: 0px; } .-top-\[0\.6875rem\] { top: -0.6875rem; } .bottom-0 { bottom: 0px; } .left-0 { left: 0px; } .left-1\/2 { left: 50%; } .right-0 { right: 0px; } .top-0 { top: 0px; } .top-1\/2 { top: 50%; } .top-\[38\.6\%\] { top: 38.6%; } .z-0 { z-index: 0; } .z-\[1\] { z-index: 1; } .z-\[2\] { z-index: 2; } .z-\[3\] { z-index: 3; } .order-1 { order: 1; } .order-2 { order: 2; } .m-0 { margin: 0px; } .-mx-3 { margin-left: -0.75rem; margin-right: -0.75rem; } .-mx-4 { margin-left: -1rem; margin-right: -1rem; } .mx-auto { margin-left: auto; margin-right: auto; } .my-12 { margin-top: 3rem; margin-bottom: 3rem; } .\!mt-0 { margin-top: 0px !important; } .mb-0 { margin-bottom: 0px; } .mb-0\.5 { margin-bottom: 0.125rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-1\.5 { margin-bottom: 0.375rem; } .mb-10 { margin-bottom: 2.5rem; } .mb-12 { margin-bottom: 3rem; } .mb-16 { margin-bottom: 4rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-2\.5 { margin-bottom: 0.625rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-\[1\.75rem\] { margin-bottom: 1.75rem; } .ml-0 { margin-left: 0px; } .ml-2 { margin-left: 0.5rem; } .mt-0 { margin-top: 0px; } .mt-0\.5 { margin-top: 0.125rem; } .mt-1 { margin-top: 0.25rem; } .mt-10 { margin-top: 2.5rem; } .mt-14 { margin-top: 3.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mt-7 { margin-top: 1.75rem; } .mt-8 { margin-top: 2rem; } .mt-\[1\.875rem\] { margin-top: 1.875rem; } .mt-auto { margin-top: auto; } .mt-px { margin-top: 1px; } .block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; } .flex { display: flex; } .inline-flex { display: inline-flex; } .table { display: table; } .grid { display: grid; } .contents { display: contents; } .hidden { display: none; } .aspect-\[4\/3\] { aspect-ratio: 4/3; } .aspect-\[408\/226\] { aspect-ratio: 408/226; } .aspect-\[580\/304\] { aspect-ratio: 580/304; } .aspect-\[605\/574\] { aspect-ratio: 605/574; } .aspect-\[874\/520\] { aspect-ratio: 874/520; } .size-16 { width: 4rem; height: 4rem; } .size-4 { width: 1rem; height: 1rem; } .size-5 { width: 1.25rem; height: 1.25rem; } .size-\[1\.125rem\] { width: 1.125rem; height: 1.125rem; } .size-\[2\.65rem\] { width: 2.65rem; height: 2.65rem; } .size-\[2\.875rem\] { width: 2.875rem; height: 2.875rem; } .size-\[3\.1625rem\] { width: 3.1625rem; height: 3.1625rem; } .size-auto { width: auto; height: auto; } .size-full { width: 100%; height: 100%; } .h-24 { height: 6rem; } .h-6 { height: 1.5rem; } .h-\[1\.625rem\] { height: 1.625rem; } .h-\[20\.3\%\] { height: 20.3%; } .h-\[25\.125rem\] { height: 25.125rem; } .h-\[27\.8\%\] { height: 27.8%; } .h-\[79\.5\%\] { height: 79.5%; } .h-auto { height: auto; } .h-full { height: 100%; } .w-5 { width: 1.25rem; } .w-\[1\.75rem\] { width: 1.75rem; } .w-\[14\.25rem\] { width: 14.25rem; } .w-\[24\%\] { width: 24%; } .w-\[7\.5rem\] { width: 7.5rem; } .w-\[72\%\] { width: 72%; } .w-fit { width: -moz-fit-content; width: fit-content; } .w-full { width: 100%; } .max-w-\[20\.0625rem\] { max-width: 20.0625rem; } .max-w-\[22\.25rem\] { max-width: 22.25rem; } .max-w-\[22rem\] { max-width: 22rem; } .max-w-\[32\.375rem\] { max-width: 32.375rem; } .max-w-\[32rem\] { max-width: 32rem; } .max-w-\[33\.8125rem\] { max-width: 33.8125rem; } .max-w-\[34\.375rem\] { max-width: 34.375rem; } .max-w-\[34rem\] { max-width: 34rem; } .max-w-\[35\.125rem\] { max-width: 35.125rem; } .max-w-\[35rem\] { max-width: 35rem; } .max-w-\[36\.25rem\] { max-width: 36.25rem; } .max-w-\[37\.875rem\] { max-width: 37.875rem; } .max-w-\[38\.375rem\] { max-width: 38.375rem; } .max-w-\[44rem\] { max-width: 44rem; } .max-w-\[46rem\] { max-width: 46rem; } .max-w-\[48rem\] { max-width: 48rem; } .max-w-\[50rem\] { max-width: 50rem; } .max-w-\[51\.125rem\] { max-width: 51.125rem; } .max-w-\[54\.625rem\] { max-width: 54.625rem; } .max-w-\[54rem\] { max-width: 54rem; } .max-w-\[60rem\] { max-width: 60rem; } .max-w-\[67\.875rem\] { max-width: 67.875rem; } .max-w-\[71\.625rem\] { max-width: 71.625rem; } .max-w-\[73\.4375rem\] { max-width: 73.4375rem; } .max-w-\[73\.5rem\] { max-width: 73.5rem; } .max-w-none { max-width: none; } .flex-1 { flex: 1 1 0%; } .shrink-0 { flex-shrink: 0; } .grow { flex-grow: 1; } .-translate-x-1\/2 { --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-y-1\/2 { --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .rotate-180 { --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-scale-x-100 { --tw-scale-x: -1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @keyframes marquee { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } } .animate-marquee { animation: marquee 15s linear infinite; } .cursor-pointer { cursor: pointer; } .list-none { list-style-type: none; } .appearance-none { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .grid-flow-col { grid-auto-flow: column; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .items-start { align-items: flex-start; } .items-center { align-items: center; } .items-baseline { align-items: baseline; } .items-stretch { align-items: stretch; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-0\.5 { gap: 0.125rem; } .gap-1\.5 { gap: 0.375rem; } .gap-2 { gap: 0.5rem; } .gap-2\.5 { gap: 0.625rem; } .gap-24 { gap: 6rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; } .gap-7 { gap: 1.75rem; } .gap-\[1\.125rem\] { gap: 1.125rem; } .gap-\[1\.875rem\] { gap: 1.875rem; } .gap-\[10px\] { gap: 10px; } .gap-x-14 { -moz-column-gap: 3.5rem; column-gap: 3.5rem; } .gap-x-3\.5 { -moz-column-gap: 0.875rem; column-gap: 0.875rem; } .gap-x-4 { -moz-column-gap: 1rem; column-gap: 1rem; } .gap-y-10 { row-gap: 2.5rem; } .gap-y-4 { row-gap: 1rem; } .gap-y-6 { row-gap: 1.5rem; } .gap-y-8 { row-gap: 2rem; } .gap-y-9 { row-gap: 2.25rem; } .space-y-0 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0px * var(--tw-space-y-reverse)); } .space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } .space-y-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } .space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } .space-y-6 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } .self-stretch { align-self: stretch; } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .whitespace-nowrap { white-space: nowrap; } .rounded { border-radius: 0.25rem; } .rounded-\[0\.538rem\] { border-radius: 0.538rem; } .rounded-\[1\.075rem\] { border-radius: 1.075rem; } .rounded-\[1\.25rem\] { border-radius: 1.25rem; } .rounded-\[1\.5rem\] { border-radius: 1.5rem; } .rounded-\[1\.75rem\] { border-radius: 1.75rem; } .rounded-\[1rem\] { border-radius: 1rem; } .rounded-full { border-radius: 9999px; } .rounded-lg { border-radius: 0.5rem; } .rounded-md { border-radius: 0.375rem; } .border { border-width: 1px; } .border-0 { border-width: 0px; } .border-y { border-top-width: 1px; border-bottom-width: 1px; } .border-b { border-bottom-width: 1px; } .border-b-2 { border-bottom-width: 2px; } .border-l { border-left-width: 1px; } .border-l-4 { border-left-width: 4px; } .border-t { border-top-width: 1px; } .border-t-0 { border-top-width: 0px; } .border-\[\#C7C7C7\]\/30 { border-color: rgb(199 199 199 / 0.3); } .border-black\/10 { border-color: rgb(0 0 0 / 0.1); } .border-primary { --tw-border-opacity: 1; border-color: rgb(201 146 46 / var(--tw-border-opacity, 1)); } .border-primary-300 { --tw-border-opacity: 1; border-color: rgb(232 201 106 / var(--tw-border-opacity, 1)); } .border-primary-400\/50 { border-color: rgb(197 151 58 / 0.5); } .border-transparent { border-color: transparent; } .border-white\/10 { border-color: rgb(255 255 255 / 0.1); } .border-white\/20 { border-color: rgb(255 255 255 / 0.2); } .border-white\/30 { border-color: rgb(255 255 255 / 0.3); } .border-white\/\[0\.13\] { border-color: rgb(255 255 255 / 0.13); } .bg-black\/10 { background-color: rgb(0 0 0 / 0.1); } .bg-black\/60 { background-color: rgb(0 0 0 / 0.6); } .bg-mss-gray-100 { --tw-bg-opacity: 1; background-color: rgb(192 204 204 / var(--tw-bg-opacity, 1)); } .bg-mss-gray-300 { --tw-bg-opacity: 1; background-color: rgb(154 176 180 / var(--tw-bg-opacity, 1)); } .bg-primary { --tw-bg-opacity: 1; background-color: rgb(201 146 46 / var(--tw-bg-opacity, 1)); } .bg-primary-300 { --tw-bg-opacity: 1; background-color: rgb(232 201 106 / var(--tw-bg-opacity, 1)); } .bg-primary-300\/\[0\.08\] { background-color: rgb(232 201 106 / 0.08); } .bg-primary\/10 { background-color: rgb(201 146 46 / 0.1); } .bg-primary\/\[0\.08\] { background-color: rgb(201 146 46 / 0.08); } .bg-secondary { --tw-bg-opacity: 1; background-color: rgb(4 10 16 / var(--tw-bg-opacity, 1)); } .bg-secondary-50 { --tw-bg-opacity: 1; background-color: rgb(237 237 237 / var(--tw-bg-opacity, 1)); } .bg-secondary-600 { --tw-bg-opacity: 1; background-color: rgb(18 20 20 / var(--tw-bg-opacity, 1)); } .bg-secondary-800\/\[0\.88\] { background-color: rgb(8 18 26 / 0.88); } .bg-secondary\/70 { background-color: rgb(4 10 16 / 0.7); } .bg-secondary\/\[0\.62\] { background-color: rgb(4 10 16 / 0.62); } .bg-transparent { background-color: transparent; } .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .bg-white\/10 { background-color: rgb(255 255 255 / 0.1); } .bg-white\/20 { background-color: rgb(255 255 255 / 0.2); } .bg-white\/5 { background-color: rgb(255 255 255 / 0.05); } .bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); } .bg-gradient-to-l { background-image: linear-gradient(to left, var(--tw-gradient-stops)); } .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); } .bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); } .from-secondary { --tw-gradient-from: #040A10 var(--tw-gradient-from-position); --tw-gradient-to: rgb(4 10 16 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-secondary-600 { --tw-gradient-from: #121414 var(--tw-gradient-from-position); --tw-gradient-to: rgb(18 20 20 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-secondary-600\/0 { --tw-gradient-from: rgb(18 20 20 / 0) var(--tw-gradient-from-position); --tw-gradient-to: rgb(18 20 20 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-secondary-600\/\[0\.92\] { --tw-gradient-from: rgb(18 20 20 / 0.92) var(--tw-gradient-from-position); --tw-gradient-to: rgb(18 20 20 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-secondary\/0 { --tw-gradient-from: rgb(4 10 16 / 0) var(--tw-gradient-from-position); --tw-gradient-to: rgb(4 10 16 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-secondary\/\[0\.92\] { --tw-gradient-from: rgb(4 10 16 / 0.92) var(--tw-gradient-from-position); --tw-gradient-to: rgb(4 10 16 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-secondary\/\[0\.9936\] { --tw-gradient-from: rgb(4 10 16 / 0.9936) var(--tw-gradient-from-position); --tw-gradient-to: rgb(4 10 16 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-\[0\.529\%\] { --tw-gradient-from-position: 0.529%; } .from-\[2\.956\%\] { --tw-gradient-from-position: 2.956%; } .from-\[34\.135\%\] { --tw-gradient-from-position: 34.135%; } .from-\[7\.559\%\] { --tw-gradient-from-position: 7.559%; } .via-secondary-600\/\[0\.72\] { --tw-gradient-to: rgb(18 20 20 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(18 20 20 / 0.72) var(--tw-gradient-via-position), var(--tw-gradient-to); } .via-secondary\/\[0\.07\] { --tw-gradient-to: rgb(4 10 16 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(4 10 16 / 0.07) var(--tw-gradient-via-position), var(--tw-gradient-to); } .via-secondary\/\[0\.72\] { --tw-gradient-to: rgb(4 10 16 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(4 10 16 / 0.72) var(--tw-gradient-via-position), var(--tw-gradient-to); } .via-secondary\/\[0\.9216\] { --tw-gradient-to: rgb(4 10 16 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(4 10 16 / 0.9216) var(--tw-gradient-via-position), var(--tw-gradient-to); } .via-\[27\.837\%\] { --tw-gradient-via-position: 27.837%; } .via-\[44\.231\%\] { --tw-gradient-via-position: 44.231%; } .via-\[65\.1\%\] { --tw-gradient-via-position: 65.1%; } .to-secondary { --tw-gradient-to: #040A10 var(--tw-gradient-to-position); } .to-secondary-600 { --tw-gradient-to: #121414 var(--tw-gradient-to-position); } .to-secondary-600\/0 { --tw-gradient-to: rgb(18 20 20 / 0) var(--tw-gradient-to-position); } .to-secondary-600\/\[0\.08\] { --tw-gradient-to: rgb(18 20 20 / 0.08) var(--tw-gradient-to-position); } .to-secondary\/0 { --tw-gradient-to: rgb(4 10 16 / 0) var(--tw-gradient-to-position); } .to-secondary\/\[0\.08\] { --tw-gradient-to: rgb(4 10 16 / 0.08) var(--tw-gradient-to-position); } .to-secondary\/\[0\.1536\] { --tw-gradient-to: rgb(4 10 16 / 0.1536) var(--tw-gradient-to-position); } .to-transparent { --tw-gradient-to: transparent var(--tw-gradient-to-position); } .to-\[28\.529\%\] { --tw-gradient-to-position: 28.529%; } .to-\[48\.412\%\] { --tw-gradient-to-position: 48.412%; } .to-\[74\.2\%\] { --tw-gradient-to-position: 74.2%; } .to-\[76\.923\%\] { --tw-gradient-to-position: 76.923%; } .to-\[78\.9\%\] { --tw-gradient-to-position: 78.9%; } .object-cover { -o-object-fit: cover; object-fit: cover; } .object-\[center_32\%\] { -o-object-position: center 32%; object-position: center 32%; } .p-0 { padding: 0px; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .px-0 { padding-left: 0px; padding-right: 0px; } .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; } .px-14 { padding-left: 3.5rem; padding-right: 3.5rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .px-8 { padding-left: 2rem; padding-right: 2rem; } .px-9 { padding-left: 2.25rem; padding-right: 2.25rem; } .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; } .py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .py-9 { padding-top: 2.25rem; padding-bottom: 2.25rem; } .pb-1\.5 { padding-bottom: 0.375rem; } .pb-12 { padding-bottom: 3rem; } .pb-2 { padding-bottom: 0.5rem; } .pb-4 { padding-bottom: 1rem; } .pb-8 { padding-bottom: 2rem; } .pl-1 { padding-left: 0.25rem; } .pl-5 { padding-left: 1.25rem; } .pt-0 { padding-top: 0px; } .pt-10 { padding-top: 2.5rem; } .pt-12 { padding-top: 3rem; } .pt-5 { padding-top: 1.25rem; } .pt-6 { padding-top: 1.5rem; } .pt-8 { padding-top: 2rem; } .text-left { text-align: left; } .text-center { text-align: center; } .font-primary { font-family: "Playfair Display", Georgia, Cambria, serif; } .font-secondary { font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; } .text-\[0\.625rem\] { font-size: 0.625rem; } .text-\[0\.6875rem\] { font-size: 0.6875rem; } .text-\[0\.75rem\] { font-size: 0.75rem; } .text-\[0\.8125rem\] { font-size: 0.8125rem; } .text-\[0\.875rem\] { font-size: 0.875rem; } .text-\[0\.9375rem\] { font-size: 0.9375rem; } .text-\[1\.0625rem\] { font-size: 1.0625rem; } .text-\[1\.125rem\] { font-size: 1.125rem; } .text-\[1\.25rem\] { font-size: 1.25rem; } .text-\[1\.375rem\] { font-size: 1.375rem; } .text-\[1\.5rem\] { font-size: 1.5rem; } .text-\[1\.75rem\] { font-size: 1.75rem; } .text-\[1rem\] { font-size: 1rem; } .text-\[2\.25rem\] { font-size: 2.25rem; } .text-\[2\.625rem\] { font-size: 2.625rem; } .text-\[2\.75rem\] { font-size: 2.75rem; } .text-\[2rem\] { font-size: 2rem; } .font-bold { font-weight: 700; } .font-medium { font-weight: 500; } .font-normal { font-weight: 400; } .font-semibold { font-weight: 600; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } .italic { font-style: italic; } .tabular-nums { --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .leading-\[0\.8\] { line-height: 0.8; } .leading-\[1\.116\] { line-height: 1.116; } .leading-\[1\.12\] { line-height: 1.12; } .leading-\[1\.2\] { line-height: 1.2; } .leading-\[1\.4\] { line-height: 1.4; } .leading-\[1\.571\] { line-height: 1.571; } .leading-\[1\.5\] { line-height: 1.5; } .leading-\[1\.667\] { line-height: 1.667; } .leading-\[1\.6\] { line-height: 1.6; } .leading-\[1\.714\] { line-height: 1.714; } .leading-\[1\.78\] { line-height: 1.78; } .leading-none { line-height: 1; } .leading-normal { line-height: 1.5; } .leading-snug { line-height: 1.375; } .leading-tight { line-height: 1.25; } .tracking-\[0\.14em\] { letter-spacing: 0.14em; } .tracking-\[0\.18em\] { letter-spacing: 0.18em; } .tracking-\[0\.1em\] { letter-spacing: 0.1em; } .tracking-display { letter-spacing: -0.04em; } .tracking-eyebrow { letter-spacing: 0.22em; } .tracking-normal { letter-spacing: 0em; } .text-\[\#7E5B1C\] { --tw-text-opacity: 1; color: rgb(126 91 28 / var(--tw-text-opacity, 1)); } .text-mss-gray-100 { --tw-text-opacity: 1; color: rgb(192 204 204 / var(--tw-text-opacity, 1)); } .text-mss-gray-300 { --tw-text-opacity: 1; color: rgb(154 176 180 / var(--tw-text-opacity, 1)); } .text-mss-gray-400 { --tw-text-opacity: 1; color: rgb(143 160 168 / var(--tw-text-opacity, 1)); } .text-mss-gray-900 { --tw-text-opacity: 1; color: rgb(29 29 29 / var(--tw-text-opacity, 1)); } .text-primary-300 { --tw-text-opacity: 1; color: rgb(232 201 106 / var(--tw-text-opacity, 1)); } .text-primary-400 { --tw-text-opacity: 1; color: rgb(197 151 58 / var(--tw-text-opacity, 1)); } .text-secondary-600 { --tw-text-opacity: 1; color: rgb(18 20 20 / var(--tw-text-opacity, 1)); } .text-secondary-700 { --tw-text-opacity: 1; color: rgb(12 28 36 / var(--tw-text-opacity, 1)); } .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .text-white\/70 { color: rgb(255 255 255 / 0.7); } .underline { text-decoration-line: underline; } .no-underline { text-decoration-line: none; } .opacity-80 { opacity: 0.8; } .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .outline { outline-style: solid; } .ring { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .blur { --tw-blur: blur(8px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .drop-shadow { --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .backdrop-blur { --tw-backdrop-blur: blur(8px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-blur-\[5px\] { --tw-backdrop-blur: blur(5px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-blur-\[8px\] { --tw-backdrop-blur: blur(8px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .duration-200 { transition-duration: 200ms; } .duration-300 { transition-duration: 300ms; } .stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 10; } .title-white :is(h1,h2,h3,h4,h5,h6) { color: #ffffff; } .\[filter\:drop-shadow\(0_8px_12px_rgba\(0\2c 0\2c 0\2c 0\.25\)\)\] { filter: drop-shadow(0 8px 12px rgba(0,0,0,0.25)); } .\[text-shadow\:0_4px_24\.5px_rgba\(0\2c 0\2c 0\2c 0\.12\)\] { text-shadow: 0 4px 24.5px rgba(0,0,0,0.12); } /** * Custom styles to immediately follow Tailwind's `utilities` layer. * * For PLAIN utility classes only. Anything needing a variant (hover:, lg:, * group-hover:) belongs in tailwind.config.js → plugins → addUtilities(). */ .before\:pointer-events-none::before { content: var(--tw-content); pointer-events: none; } .before\:absolute::before { content: var(--tw-content); position: absolute; } .before\:inset-x-0::before { content: var(--tw-content); left: 0px; right: 0px; } .before\:inset-y-0::before { content: var(--tw-content); top: 0px; bottom: 0px; } .before\:left-0::before { content: var(--tw-content); left: 0px; } .before\:left-1\/2::before { content: var(--tw-content); left: 50%; } .before\:top-0::before { content: var(--tw-content); top: 0px; } .before\:z-\[2\]::before { content: var(--tw-content); z-index: 2; } .before\:hidden::before { content: var(--tw-content); display: none; } .before\:h-\[1\.3125rem\]::before { content: var(--tw-content); height: 1.3125rem; } .before\:w-16::before { content: var(--tw-content); width: 4rem; } .before\:w-px::before { content: var(--tw-content); width: 1px; } .before\:rounded-t-\[1\.25rem\]::before { content: var(--tw-content); border-top-left-radius: 1.25rem; border-top-right-radius: 1.25rem; } .before\:bg-primary::before { content: var(--tw-content); --tw-bg-opacity: 1; background-color: rgb(201 146 46 / var(--tw-bg-opacity, 1)); } .before\:bg-white\/20::before { content: var(--tw-content); background-color: rgb(255 255 255 / 0.2); } .before\:bg-gradient-to-r::before { content: var(--tw-content); background-image: linear-gradient(to right, var(--tw-gradient-stops)); } .before\:from-secondary-50::before { content: var(--tw-content); --tw-gradient-from: #EDEDED var(--tw-gradient-from-position); --tw-gradient-to: rgb(237 237 237 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .before\:content-\[\'\'\]::before { --tw-content: ''; content: var(--tw-content); } .after\:absolute::after { content: var(--tw-content); position: absolute; } .after\:inset-0::after { content: var(--tw-content); inset: 0px; } .after\:top-1\/2::after { content: var(--tw-content); top: 50%; } .after\:z-\[-1\]::after { content: var(--tw-content); z-index: -1; } .after\:z-\[2\]::after { content: var(--tw-content); z-index: 2; } .after\:bg-\[rgba\(4\2c 11\2c 18\2c 0\.6\)\]::after { content: var(--tw-content); background-color: rgba(4,11,18,0.6); } .after\:bg-black\/\[0\.78\]::after { content: var(--tw-content); background-color: rgb(0 0 0 / 0.78); } .after\:bg-primary\/95::after { content: var(--tw-content); background-color: rgb(201 146 46 / 0.95); } .after\:bg-secondary\/\[0\.62\]::after { content: var(--tw-content); background-color: rgb(4 10 16 / 0.62); } .after\:bg-gradient-to-t::after { content: var(--tw-content); background-image: linear-gradient(to top, var(--tw-gradient-stops)); } .after\:from-transparent::after { content: var(--tw-content); --tw-gradient-from: transparent var(--tw-gradient-from-position); --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .after\:from-\[77\.447\%\]::after { content: var(--tw-content); --tw-gradient-from-position: 77.447%; } .after\:to-secondary-600::after { content: var(--tw-content); --tw-gradient-to: #121414 var(--tw-gradient-to-position); } .after\:content-\[\'\'\]::after { --tw-content: ''; content: var(--tw-content); } .first\:border-t-0:first-child { border-top-width: 0px; } .first\:pt-0:first-child { padding-top: 0px; } .last\:border-0:last-child { border-width: 0px; } .last\:border-b-0:last-child { border-bottom-width: 0px; } .hover\:scale-105:hover { --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hover\:border-primary\/60:hover { border-color: rgb(201 146 46 / 0.6); } .hover\:bg-white\/\[0\.14\]:hover { background-color: rgb(255 255 255 / 0.14); } .hover\:bg-white\/\[0\.24\]:hover { background-color: rgb(255 255 255 / 0.24); } .hover\:text-primary-300:hover { --tw-text-opacity: 1; color: rgb(232 201 106 / var(--tw-text-opacity, 1)); } .group:hover .group-hover\:translate-x-1\.5 { --tw-translate-x: 0.375rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .group.active .group-\[\.active\]\:block { display: block; } .group.active .group-\[\.active\]\:hidden { display: none; } @media (prefers-reduced-motion: reduce) { .motion-reduce\:hidden { display: none; } } @media not all and (min-width: 1200px) { .max-xl\:w-full { width: 100%; } } @media (min-width: 576px) { .sm\:ml-auto { margin-left: auto; } .sm\:aspect-\[3\/2\] { aspect-ratio: 3/2; } .sm\:h-32 { height: 8rem; } .sm\:w-1\/2 { width: 50%; } .sm\:w-\[9\.5rem\] { width: 9.5rem; } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:flex-row { flex-direction: row; } .sm\:items-start { align-items: flex-start; } .sm\:justify-between { justify-content: space-between; } .sm\:gap-6 { gap: 1.5rem; } .sm\:border-b-0 { border-bottom-width: 0px; } .sm\:border-l { border-left-width: 1px; } .sm\:border-l-0 { border-left-width: 0px; } .sm\:border-t-0 { border-top-width: 0px; } .sm\:p-8 { padding: 2rem; } .sm\:px-8 { padding-left: 2rem; padding-right: 2rem; } .sm\:px-\[1\.875rem\] { padding-left: 1.875rem; padding-right: 1.875rem; } .sm\:text-right { text-align: right; } .sm\:odd\:pr-8:nth-child(odd) { padding-right: 2rem; } .sm\:even\:border-l:nth-child(even) { border-left-width: 1px; } .sm\:even\:pl-10:nth-child(even) { padding-left: 2.5rem; } .sm\:even\:pl-8:nth-child(even) { padding-left: 2rem; } @media not all and (min-width: 992px) { .sm\:max-lg\:even\:border-l:nth-child(even) { border-left-width: 1px; } .sm\:max-lg\:even\:pl-6:nth-child(even) { padding-left: 1.5rem; } } } @media (min-width: 992px) { .lg\:order-1 { order: 1; } .lg\:order-2 { order: 2; } .lg\:my-16 { margin-top: 4rem; margin-bottom: 4rem; } .lg\:-mb-\[2\.8125rem\] { margin-bottom: -2.8125rem; } .lg\:-mt-\[3\.3125rem\] { margin-top: -3.3125rem; } .lg\:mb-10 { margin-bottom: 2.5rem; } .lg\:mb-12 { margin-bottom: 3rem; } .lg\:mb-14 { margin-bottom: 3.5rem; } .lg\:mb-24 { margin-bottom: 6rem; } .lg\:mb-\[3\.75rem\] { margin-bottom: 3.75rem; } .lg\:ml-\[1\.22\%\] { margin-left: 1.22%; } .lg\:ml-\[2\.58\%\] { margin-left: 2.58%; } .lg\:ml-\[4\.42\%\] { margin-left: 4.42%; } .lg\:ml-auto { margin-left: auto; } .lg\:mr-\[1\.22\%\] { margin-right: 1.22%; } .lg\:mr-\[2\.58\%\] { margin-right: 2.58%; } .lg\:mr-\[4\.42\%\] { margin-right: 4.42%; } .lg\:mr-auto { margin-right: auto; } .lg\:mt-10 { margin-top: 2.5rem; } .lg\:mt-12 { margin-top: 3rem; } .lg\:mt-14 { margin-top: 3.5rem; } .lg\:mt-20 { margin-top: 5rem; } .lg\:mt-7 { margin-top: 1.75rem; } .lg\:mt-8 { margin-top: 2rem; } .lg\:mt-9 { margin-top: 2.25rem; } .lg\:mt-\[1\.625rem\] { margin-top: 1.625rem; } .lg\:mt-\[4\.5rem\] { margin-top: 4.5rem; } .lg\:block { display: block; } .lg\:hidden { display: none; } .lg\:aspect-\[1440\/850\] { aspect-ratio: 1440/850; } .lg\:size-20 { width: 5rem; height: 5rem; } .lg\:h-7 { height: 1.75rem; } .lg\:h-\[12\.3125rem\] { height: 12.3125rem; } .lg\:min-h-\[9\.4375rem\] { min-height: 9.4375rem; } .lg\:w-1\/2 { width: 50%; } .lg\:w-1\/3 { width: 33.333333%; } .lg\:w-1\/4 { width: 25%; } .lg\:w-6 { width: 1.5rem; } .lg\:w-\[10rem\] { width: 10rem; } .lg\:w-\[30\.49\%\] { width: 30.49%; } .lg\:w-\[41\.6\%\] { width: 41.6%; } .lg\:w-\[44\.97\%\] { width: 44.97%; } .lg\:w-\[46\%\] { width: 46%; } .lg\:w-\[46\.65\%\] { width: 46.65%; } .lg\:w-\[47\%\] { width: 47%; } .lg\:w-\[48\.55\%\] { width: 48.55%; } .lg\:w-\[49\%\] { width: 49%; } .lg\:w-\[49\.54\%\] { width: 49.54%; } .lg\:w-\[49\.7\%\] { width: 49.7%; } .lg\:w-\[50\.23\%\] { width: 50.23%; } .lg\:w-\[50\.46\%\] { width: 50.46%; } .lg\:w-\[51\%\] { width: 51%; } .lg\:w-\[52\.59\%\] { width: 52.59%; } .lg\:w-\[53\%\] { width: 53%; } .lg\:w-\[59\.07\%\] { width: 59.07%; } .lg\:w-auto { width: auto; } .lg\:min-w-0 { min-width: 0px; } .lg\:max-w-\[27\.1875rem\] { max-width: 27.1875rem; } .lg\:max-w-\[38\.25rem\] { max-width: 38.25rem; } .lg\:max-w-\[80rem\] { max-width: 80rem; } .lg\:flex-1 { flex: 1 1 0%; } .lg\:grow { flex-grow: 1; } .lg\:basis-1\/4 { flex-basis: 25%; } .lg\:grid-flow-col { grid-auto-flow: column; } .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } .lg\:flex-row { flex-direction: row; } .lg\:flex-wrap { flex-wrap: wrap; } .lg\:flex-nowrap { flex-wrap: nowrap; } .lg\:items-center { align-items: center; } .lg\:justify-center { justify-content: center; } .lg\:justify-between { justify-content: space-between; } .lg\:gap-10 { gap: 2.5rem; } .lg\:gap-4 { gap: 1rem; } .lg\:gap-5 { gap: 1.25rem; } .lg\:gap-6 { gap: 1.5rem; } .lg\:gap-8 { gap: 2rem; } .lg\:gap-\[1\.875rem\] { gap: 1.875rem; } .lg\:gap-x-10 { -moz-column-gap: 2.5rem; column-gap: 2.5rem; } .lg\:gap-x-\[6\.25rem\] { -moz-column-gap: 6.25rem; column-gap: 6.25rem; } .lg\:gap-y-0 { row-gap: 0px; } .lg\:gap-y-5 { row-gap: 1.25rem; } .lg\:gap-y-\[3\.75rem\] { row-gap: 3.75rem; } .lg\:space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } .lg\:space-y-8 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2rem * var(--tw-space-y-reverse)); } .lg\:overflow-visible { overflow: visible; } .lg\:rounded-\[2\.5rem\] { border-radius: 2.5rem; } .lg\:rounded-\[2\.625rem\] { border-radius: 2.625rem; } .lg\:border-l { border-left-width: 1px; } .lg\:border-white\/20 { border-color: rgb(255 255 255 / 0.2); } .lg\:p-10 { padding: 2.5rem; } .lg\:p-7 { padding: 1.75rem; } .lg\:p-8 { padding: 2rem; } .lg\:px-12 { padding-left: 3rem; padding-right: 3rem; } .lg\:px-14 { padding-left: 3.5rem; padding-right: 3.5rem; } .lg\:px-7 { padding-left: 1.75rem; padding-right: 1.75rem; } .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; } .lg\:py-0 { padding-top: 0px; padding-bottom: 0px; } .lg\:py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } .lg\:py-12 { padding-top: 3rem; padding-bottom: 3rem; } .lg\:py-16 { padding-top: 4rem; padding-bottom: 4rem; } .lg\:py-20 { padding-top: 5rem; padding-bottom: 5rem; } .lg\:py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .lg\:py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem; } .lg\:py-8 { padding-top: 2rem; padding-bottom: 2rem; } .lg\:pb-0 { padding-bottom: 0px; } .lg\:pb-16 { padding-bottom: 4rem; } .lg\:pl-10 { padding-left: 2.5rem; } .lg\:pl-7 { padding-left: 1.75rem; } .lg\:pl-8 { padding-left: 2rem; } .lg\:pr-7 { padding-right: 1.75rem; } .lg\:pr-\[3\.25rem\] { padding-right: 3.25rem; } .lg\:pt-12 { padding-top: 3rem; } .lg\:pt-16 { padding-top: 4rem; } .lg\:pt-4 { padding-top: 1rem; } .lg\:text-\[1\.125rem\] { font-size: 1.125rem; } .lg\:text-\[1\.375rem\] { font-size: 1.375rem; } .lg\:text-\[1\.5rem\] { font-size: 1.5rem; } .lg\:text-\[1\.875rem\] { font-size: 1.875rem; } .lg\:text-\[1rem\] { font-size: 1rem; } .lg\:text-\[2\.25rem\] { font-size: 2.25rem; } .lg\:text-\[2\.75rem\] { font-size: 2.75rem; } .lg\:text-\[2rem\] { font-size: 2rem; } .lg\:text-\[3\.25rem\] { font-size: 3.25rem; } .lg\:text-\[3rem\] { font-size: 3rem; } .lg\:before\:block::before { content: var(--tw-content); display: block; } .lg\:before\:w-24::before { content: var(--tw-content); width: 6rem; } .lg\:after\:absolute::after { content: var(--tw-content); position: absolute; } .lg\:after\:inset-x-0::after { content: var(--tw-content); left: 0px; right: 0px; } .lg\:after\:top-1\/2::after { content: var(--tw-content); top: 50%; } .lg\:after\:h-px::after { content: var(--tw-content); height: 1px; } .lg\:after\:bg-\[rgba\(4\2c 11\2c 18\2c 0\.37\)\]::after { content: var(--tw-content); background-color: rgba(4,11,18,0.37); } .lg\:after\:bg-white\/20::after { content: var(--tw-content); background-color: rgb(255 255 255 / 0.2); } .lg\:after\:content-\[\'\'\]::after { --tw-content: ''; content: var(--tw-content); } .lg\:odd\:pr-11:nth-child(odd) { padding-right: 2.75rem; } .lg\:even\:pl-11:nth-child(even) { padding-left: 2.75rem; } } @media (min-width: 1200px) { .xl\:-mx-4 { margin-left: -1rem; margin-right: -1rem; } .xl\:my-20 { margin-top: 5rem; margin-bottom: 5rem; } .xl\:gap-x-20 { -moz-column-gap: 5rem; column-gap: 5rem; } .xl\:px-4 { padding-left: 1rem; padding-right: 1rem; } .xl\:py-20 { padding-top: 5rem; padding-bottom: 5rem; } .xl\:py-24 { padding-top: 6rem; padding-bottom: 6rem; } .xl\:pb-20 { padding-bottom: 5rem; } .xl\:pt-20 { padding-top: 5rem; } } @media (min-width: 1440px) { .\32xl\:my-24 { margin-top: 6rem; margin-bottom: 6rem; } .\32xl\:mt-\[6\.25rem\] { margin-top: 6.25rem; } .\32xl\:size-6 { width: 1.5rem; height: 1.5rem; } .\32xl\:w-\[12\.5rem\] { width: 12.5rem; } .\32xl\:w-\[12\.6625rem\] { width: 12.6625rem; } .\32xl\:gap-x-\[13\.75rem\] { -moz-column-gap: 13.75rem; column-gap: 13.75rem; } .\32xl\:space-y-\[2\.9375rem\] > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(2.9375rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2.9375rem * var(--tw-space-y-reverse)); } .\32xl\:p-12 { padding: 3rem; } .\32xl\:px-\[4\.5625rem\] { padding-left: 4.5625rem; padding-right: 4.5625rem; } .\32xl\:py-24 { padding-top: 6rem; padding-bottom: 6rem; } .\32xl\:py-28 { padding-top: 7rem; padding-bottom: 7rem; } .\32xl\:py-32 { padding-top: 8rem; padding-bottom: 8rem; } .\32xl\:pb-24 { padding-bottom: 6rem; } .\32xl\:pl-10 { padding-left: 2.5rem; } .\32xl\:pl-12 { padding-left: 3rem; } .\32xl\:pl-14 { padding-left: 3.5rem; } .\32xl\:pl-16 { padding-left: 4rem; } .\32xl\:pl-8 { padding-left: 2rem; } .\32xl\:pl-\[3rem\] { padding-left: 3rem; } .\32xl\:pr-10 { padding-right: 2.5rem; } .\32xl\:pr-16 { padding-right: 4rem; } .\32xl\:pr-4 { padding-right: 1rem; } .\32xl\:pr-8 { padding-right: 2rem; } .\32xl\:pt-24 { padding-top: 6rem; } .\32xl\:text-\[0\.75rem\] { font-size: 0.75rem; } .\32xl\:text-\[0\.8125rem\] { font-size: 0.8125rem; } .\32xl\:text-\[1\.0625rem\] { font-size: 1.0625rem; } .\32xl\:text-\[1\.125rem\] { font-size: 1.125rem; } .\32xl\:text-\[1\.25rem\] { font-size: 1.25rem; } .\32xl\:text-\[1\.5rem\] { font-size: 1.5rem; } .\32xl\:text-\[1\.75rem\] { font-size: 1.75rem; } .\32xl\:text-\[1rem\] { font-size: 1rem; } .\32xl\:text-\[2\.25rem\] { font-size: 2.25rem; } .\32xl\:text-\[2\.5rem\] { font-size: 2.5rem; } .\32xl\:text-\[3\.3125rem\] { font-size: 3.3125rem; } .\32xl\:text-\[3\.375rem\] { font-size: 3.375rem; } .\32xl\:text-\[3\.6875rem\] { font-size: 3.6875rem; } .\32xl\:text-\[3\.75rem\] { font-size: 3.75rem; } .\32xl\:leading-\[1\.133\] { line-height: 1.133; } } .\[\&\.active\]\:border-primary.active { --tw-border-opacity: 1; border-color: rgb(201 146 46 / var(--tw-border-opacity, 1)); } .\[\&\.active\]\:text-primary-300.active { --tw-text-opacity: 1; color: rgb(232 201 106 / var(--tw-text-opacity, 1)); } .\[\&\.itemActive\]\:border-\[\#4B4B4B\].itemActive { --tw-border-opacity: 1; border-color: rgb(75 75 75 / var(--tw-border-opacity, 1)); } .\[\&\:hover_\.single-post-nav-title\]\:text-primary-300:hover .single-post-nav-title { --tw-text-opacity: 1; color: rgb(232 201 106 / var(--tw-text-opacity, 1)); } @media not all and (min-width: 992px) { .max-lg\:\[\&\:not\(\:first-child\)\]\:border-t:not(:first-child) { border-top-width: 1px; } } @media not all and (min-width: 576px) { .max-sm\:\[\&\:not\(\:first-child\)\]\:border-t:not(:first-child) { border-top-width: 1px; } .max-sm\:\[\&\:not\(\:first-child\)\]\:pt-8:not(:first-child) { padding-top: 2rem; } } @media (min-width: 576px) { .sm\:\[\&\:not\(\:first-child\)\]\:border-t-0:not(:first-child) { border-top-width: 0px; } } @media (min-width: 992px) { .lg\:\[\&\:not\(\:first-child\)\]\:border-l:not(:first-child) { border-left-width: 1px; } .lg\:\[\&\:not\(\:first-child\)\]\:pl-10:not(:first-child) { padding-left: 2.5rem; } .lg\:\[\&\:not\(\:first-child\)\]\:pl-7:not(:first-child) { padding-left: 1.75rem; } } @media (min-width: 1440px) { .\32xl\:\[\&\:not\(\:first-child\)\]\:pl-8:not(:first-child) { padding-left: 2rem; } } @media (min-width: 576px) { .sm\:\[\&\:nth-child\(2\)\]\:pt-0:nth-child(2) { padding-top: 0px; } } @media (min-width: 992px) { .lg\:\[\&\:nth-child\(even\)\]\:border-t:nth-child(even) { border-top-width: 1px; } } @media (min-width: 576px) { .sm\:\[\&\:nth-child\(n\+3\)\]\:border-t:nth-child(n+3) { border-top-width: 1px; } @media not all and (min-width: 992px) { .sm\:max-lg\:\[\&\:nth-child\(n\+3\)\]\:border-t:nth-child(n+3) { border-top-width: 1px; } .sm\:max-lg\:\[\&\:nth-child\(n\+3\)\]\:pt-8:nth-child(n+3) { padding-top: 2rem; } } } @media (min-width: 992px) { .lg\:\[\&\:nth-child\(n\+3\)\]\:border-l:nth-child(n+3) { border-left-width: 1px; } .lg\:\[\&\:nth-child\(n\+3\)\]\:pl-12:nth-child(n+3) { padding-left: 3rem; } } .\[\&\>img\]\:size-full>img { width: 100%; height: 100%; } .\[\&\>img\]\:object-cover>img { -o-object-fit: cover; object-fit: cover; } .\[\&\>p\]\:mx-auto>p { margin-left: auto; margin-right: auto; } .\[\&\>p\]\:max-w-\[34\.375rem\]>p { max-width: 34.375rem; } .\[\&\>p\]\:max-w-\[36\.9375rem\]>p { max-width: 36.9375rem; } .\[\&_a\:hover\]\:border-primary\/60 a:hover { border-color: rgb(201 146 46 / 0.6); } .\[\&_a\]\:rounded-full a { border-radius: 9999px; } .\[\&_a\]\:border a { border-width: 1px; } .\[\&_a\]\:border-white\/30 a { border-color: rgb(255 255 255 / 0.3); } .\[\&_a\]\:bg-white\/10 a { background-color: rgb(255 255 255 / 0.1); } .\[\&_a\]\:px-4 a { padding-left: 1rem; padding-right: 1rem; } .\[\&_a\]\:py-1\.5 a { padding-top: 0.375rem; padding-bottom: 0.375rem; } .\[\&_a\]\:text-\[0\.8125rem\] a { font-size: 0.8125rem; } .\[\&_a\]\:text-mss-gray-100 a { --tw-text-opacity: 1; color: rgb(192 204 204 / var(--tw-text-opacity, 1)); } .\[\&_a\]\:no-underline a { text-decoration-line: none; } .\[\&_em\]\:font-black em { font-weight: 900; } .\[\&_em\]\:italic em { font-style: italic; } .\[\&_em\]\:text-primary-300 em { --tw-text-opacity: 1; color: rgb(232 201 106 / var(--tw-text-opacity, 1)); } .\[\&_h2\]\:uppercase h2 { text-transform: uppercase; } .\[\&_img\]\:mt-1 img { margin-top: 0.25rem; } .\[\&_img\]\:mt-1\.5 img { margin-top: 0.375rem; } .\[\&_img\]\:inline-block img { display: inline-block; } .\[\&_img\]\:aspect-\[16\/9\] img { aspect-ratio: 16/9; } .\[\&_img\]\:aspect-\[599\/489\] img { aspect-ratio: 599/489; } .\[\&_img\]\:aspect-square img { aspect-ratio: 1 / 1; } .\[\&_img\]\:size-\[1\.0417rem\] img { width: 1.0417rem; height: 1.0417rem; } .\[\&_img\]\:size-full img { width: 100%; height: 100%; } .\[\&_img\]\:h-\[0\.8125rem\] img { height: 0.8125rem; } .\[\&_img\]\:h-auto img { height: auto; } .\[\&_img\]\:max-h-\[3\.25rem\] img { max-height: 3.25rem; } .\[\&_img\]\:w-\[1\.125rem\] img { width: 1.125rem; } .\[\&_img\]\:w-auto img { width: auto; } .\[\&_img\]\:shrink-0 img { flex-shrink: 0; } .\[\&_img\]\:object-cover img { -o-object-fit: cover; object-fit: cover; } .\[\&_img\]\:object-top img { -o-object-position: top; object-position: top; } .\[\&_img\]\:grayscale img { --tw-grayscale: grayscale(100%); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @media (min-width: 1440px) { .\32xl\:\[\&_img\]\:max-h-\[4rem\] img { max-height: 4rem; } } .\[\&_p\:last-child\]\:mb-0 p:last-child { margin-bottom: 0px; } .\[\&_p\]\:mb-2\.5 p { margin-bottom: 0.625rem; } .\[\&_span\]\:text-\[0\.8135em\] span { font-size: 0.8135em; } .\[\&_span\]\:font-black span { font-weight: 900; } .\[\&_span\]\:italic span { font-style: italic; } .\[\&_span\]\:text-primary-300 span { --tw-text-opacity: 1; color: rgb(232 201 106 / var(--tw-text-opacity, 1)); }