/* ========================================================================== Dusty Broadfoot, Rockwall & DFW Real Estate Warm Local Editorial + Confident Pink ========================================================================== */ @font-face { font-family: "Karrik"; src: url("../fonts/Karrik-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Karrik"; src: url("../fonts/Karrik-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } /* Beau Rivage - a genuine connected script, used ONLY as a sparing flourish on single emphasis words (see the TERRACOTTA reference's "cotta" under its bold headline). Never body text, never more than a word or two at a time - that restraint is what keeps it feeling like a deliberate accent instead of a second competing "elegant font" pairing. */ @font-face { font-family: "Beau Rivage"; src: url("../fonts/BeauRivage-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* ---------------------------------- Tokens ---------------------------------- */ :root{ --cream: #F7F2E9; --cream-deep: #EFE7D8; --paper: #FFFDF9; --ink: #1B1712; --ink-70: rgba(27,23,18,0.7); --ink-50: rgba(27,23,18,0.5); --taupe: #665C50; /* darkened from #877A6C to clear 4.5:1 on cream/paper at small UI-label sizes */ --line: rgba(27,23,18,0.12); --line-strong: rgba(27,23,18,0.22); --pink: #FF62BE; --pink-deep: #E23F98; --pink-ink: #7A1454; --pink-wash: #FFE7F4; --green: #17332C; --green-wash: #E6ECE7; /* One confident vernacular grotesque (Karrik, Velvetyne) carries the whole site - display and body alike. It has no weight axis, so hierarchy comes from scale, negative tracking, and case, not a bolted-on "elegant serif for headlines" pairing - that formula is exactly what makes template sites look machine-picked. */ --font-display: "Karrik", ui-sans-serif, -apple-system, "Segoe UI", sans-serif; --font-body: "Karrik", ui-sans-serif, -apple-system, "Segoe UI", sans-serif; --font-script: "Beau Rivage", cursive; --container: 1360px; --pad: clamp(1.25rem, 4vw, 4rem); --radius-arch: 600px 600px 12px 12px; --ease: cubic-bezier(.16,.84,.44,1); --ease-soft: cubic-bezier(.22,.61,.36,1); } /* ---------------------------------- Reset ---------------------------------- */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* The root scrolling box belongs to in standards mode, not - without this too, an overflowing descendant (the marquee track's full unrolled width, clipped only by its own ancestor) still inflates the document's horizontal extent, which in turn widens the containing block every position:fixed element (loader, mobile nav, call bar) sizes against - producing a page-wide horizontal scroll on mobile. */ overflow-x: clip; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body{ margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-body); font-size: 16.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; } img{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } ul{ margin: 0; padding: 0; list-style: none; } button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, textarea, select{ font: inherit; color: inherit; } h1,h2,h3,h4,p,figure{ margin: 0; } svg{ display: block; } /* Karrik ships Regular + Italic only, no bold cut anywhere on the site. Never let / trigger the browser's synthetic bold (it smears/ghosts these glyphs) - emphasis is carried by color, size, and letter-spacing instead of weight throughout. */ strong, b{ font-weight: 400; } ::selection{ background: var(--pink); color: var(--paper); } :focus-visible{ outline: 2.5px solid var(--pink-deep); outline-offset: 3px; border-radius: 2px; } .container{ max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); } /* ---------------------------------- Type ---------------------------------- */ .h-display{ font-family: var(--font-display); font-weight: 400; line-height: 0.92; letter-spacing: -0.035em; color: var(--ink); } .h1{ font-size: clamp(3.1rem, 2.2rem + 5.6vw, 7.8rem); } .h2{ font-size: clamp(2.15rem, 1.5rem + 3.6vw, 4.6rem); } .h3{ font-size: clamp(1.5rem, 1.3rem + 1.2vw, 2.15rem); } .h4{ font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); font-weight: 400; letter-spacing: -0.02em; } /* Deliberate accent for short, punchy headline moments (hero, section labels) - not applied blanket, since forcing long sentence-length headlines to uppercase hurts readability instead of adding punch. */ .h-caps{ text-transform: uppercase; letter-spacing: -0.02em; } .accent-italic{ font-family: var(--font-script); font-style: normal; font-weight: 400; text-transform: none; color: var(--pink-deep); font-size: 1.28em; line-height: 1.15; display: inline-block; transition: transform .35s var(--ease); } .accent-italic:hover{ transform: rotate(-3deg) scale(1.05); } /* pink-deep is tuned for legibility on cream/paper - on a dark section it needs the lighter hero pink instead or it nearly disappears. */ .on-ink .accent-italic{ color: var(--pink); } .eyebrow{ font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.74rem; font-weight: 400; color: var(--pink-ink); display: inline-flex; align-items: center; gap: 0.6em; } .eyebrow::before{ content: ""; width: 22px; height: 1.5px; background: var(--pink-deep); display: inline-block; } .eyebrow.on-dark{ color: var(--pink); } .eyebrow.on-dark::before{ background: var(--pink); } .lede{ font-size: clamp(1.05rem, 1rem + .4vw, 1.28rem); color: var(--ink-70); line-height: 1.65; max-width: 46ch; } .small-caps-link{ text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: border-color .25s var(--ease), color .25s var(--ease); } .small-caps-link:hover{ border-color: var(--pink-deep); color: var(--pink-deep); } /* For links embedded inline within flowing paragraph copy - keeps the surrounding font size/case so it doesn't shrink or shout mid-sentence. */ .text-link{ color: var(--pink-ink); border-bottom: 1px solid var(--line-strong); transition: border-color .25s var(--ease), color .25s var(--ease); } .text-link:hover{ border-color: var(--pink-deep); color: var(--pink-deep); } /* ---------------------------------- Buttons ---------------------------------- */ /* .hero-actions wraps every button pair site-wide (heroes, final-ctas, content sections) but never had a base layout rule - it fell back to plain block flow, so two adjacent .btn elements sat only a few px apart (the collapsed whitespace between the tags), not an actual gap. */ .hero-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; } .btn{ position: relative; display: inline-flex; align-items: center; gap: 0.6em; padding: 1.05em 1.9em; border-radius: 100px; font-family: var(--font-body); font-size: 0.92rem; letter-spacing: 0.02em; white-space: nowrap; transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); will-change: transform; } .btn-primary{ background: var(--ink); color: var(--paper); } .btn-primary:hover{ background: var(--pink-deep); color: var(--ink); } .btn-pink{ background: var(--pink); color: var(--ink); } .btn-pink:hover{ background: var(--ink); color: var(--pink); } .btn-outline{ border: 1.5px solid var(--line-strong); color: var(--ink); } .btn-outline:hover{ border-color: var(--ink); background: var(--ink); color: var(--paper); } .btn-outline.on-dark{ border-color: rgba(255,255,255,.35); color: var(--paper); } .btn-outline.on-dark:hover{ background: var(--paper); color: var(--ink); border-color: var(--paper); } .btn-arrow{ transition: transform .35s var(--ease); } .btn:hover .btn-arrow{ transform: translateX(4px); } .btn-sm{ padding: 0.85em 1.4em; font-size: 0.82rem; } /* ---------------------------------- Custom cursor ---------------------------------- */ .cursor-dot, .cursor-ring{ position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 50%; transform: translate(-50%,-50%); will-change: transform; } .cursor-dot{ width: 7px; height: 7px; background: var(--pink-deep); transition: opacity .2s ease, background .2s ease; } .cursor-ring{ width: 0; height: 0; transition: opacity .2s ease; } /* The ring's own transform is set from JS every animation frame for position-tracking, so the grow/shrink effect lives on this separate inner element instead - its transform is only ever touched by CSS (via class toggles), so `transition: transform` behaves as a normal, uninterrupted compositor-only animation instead of racing the per-frame JS writes. */ .cursor-ring-inner{ position: absolute; top: 0; left: 0; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; border: 1.3px solid var(--ink); mix-blend-mode: difference; background: transparent; transform: scale(0.4524); /* 38/84 default size */ transition: transform .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease); display: flex; align-items: center; justify-content: center; } .cursor-ring.is-mid .cursor-ring-inner{ transform: scale(0.667); } /* 56/84 */ .cursor-ring-inner .cursor-label{ font-family: var(--font-body); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--paper); opacity: 0; transition: opacity .2s ease; white-space: nowrap; } .cursor-ring.is-grown .cursor-ring-inner{ transform: scale(1); border-color: transparent; background: var(--ink); mix-blend-mode: normal; } .cursor-ring.is-grown .cursor-label{ opacity: 1; } .cursor-ring.is-hidden, .cursor-dot.is-hidden{ opacity: 0; } html.has-custom-cursor, html.has-custom-cursor a, html.has-custom-cursor button{ cursor: none; } @media (hover: none), (pointer: coarse){ .cursor-dot, .cursor-ring{ display: none !important; } html.has-custom-cursor{ cursor: auto; } } /* ---------------------------------- Loader ---------------------------------- */ .loader{ position: fixed; inset: 0; z-index: 10000; background: var(--cream); display: flex; align-items: center; justify-content: center; flex-direction: column; } .loader-mark{ font-family: var(--font-display); font-style: italic; letter-spacing: -0.02em; font-size: clamp(2.2rem, 5vw + 1rem, 4.5rem); color: var(--ink); overflow: hidden; } .loader-mark span{ display: inline-block; transform: translateY(110%); animation: loaderWord 0.9s var(--ease) forwards; } .loader-mark span:nth-child(2){ animation-delay: .08s; color: var(--pink-deep); font-family: var(--font-script); font-style: normal; font-size: 1.15em; } @keyframes loaderWord{ to{ transform: translateY(0); } } .loader-line{ width: 0; height: 2px; background: var(--pink); margin-top: 1.4rem; animation: loaderLine 0.7s var(--ease-soft) forwards; animation-delay: .55s; } @keyframes loaderLine{ to{ width: 140px; } } .loader-tag{ margin-top: 1rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--taupe); opacity: 0; animation: fadeUp .6s var(--ease) forwards; animation-delay: .7s; } @keyframes fadeUp{ from{opacity:0; transform: translateY(6px);} to{opacity:1; transform: translateY(0);} } .loader.is-leaving{ animation: loaderLeave .7s var(--ease) forwards; animation-delay: .95s; pointer-events: none; } @keyframes loaderLeave{ to{ transform: translateY(-100%); border-radius: 0 0 40% 40%; } } body.loading{ overflow: hidden; height: 100vh; } @media (prefers-reduced-motion: reduce){ .loader{ display: none; } } /* ---------------------------------- Header ---------------------------------- */ .top-strip{ background: var(--ink); color: rgba(255,255,255,.72); font-size: 0.72rem; letter-spacing: 0.03em; } .top-strip .container{ display: flex; justify-content: space-between; align-items: center; padding-block: 0.55rem; gap: 1rem; flex-wrap: wrap; } .top-strip a{ color: rgba(255,255,255,.92); transition: color .2s; } .top-strip a:hover{ color: var(--pink); } .top-strip .strip-left{ display:flex; gap: 1.4rem; flex-wrap: wrap;} .top-strip .strip-right{ opacity: .7; } .site-header{ position: sticky; top: 0; z-index: 500; background: rgba(247,242,233,0.88); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; } .site-header.is-scrolled{ border-bottom-color: var(--line); } /* Header rides transparent directly over a full-bleed hero photo (matching the overlaid-nav reference), then swaps to the solid cream bar the moment the visitor scrolls past it - two very different jobs for one component, so the on-hero state gets its own explicit color set rather than relying on inherited defaults. */ .site-header.on-hero:not(.is-scrolled){ background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } .site-header.on-hero:not(.is-scrolled) .logo, .site-header.on-hero:not(.is-scrolled) .main-nav a, .site-header.on-hero:not(.is-scrolled) .logo-sub{ color: var(--paper); } .site-header.on-hero:not(.is-scrolled) .logo em{ color: var(--pink); } .site-header.on-hero:not(.is-scrolled) .main-nav a.is-active{ color: var(--pink); } .site-header.on-hero:not(.is-scrolled) .btn-outline{ border-color: rgba(255,255,255,.5); color: var(--paper); } .site-header.on-hero:not(.is-scrolled) .btn-outline:hover{ background: var(--paper); color: var(--ink); } .site-header.on-hero:not(.is-scrolled) .nav-toggle{ border-color: rgba(255,255,255,.5); } .site-header.on-hero:not(.is-scrolled) .nav-toggle span, .site-header.on-hero:not(.is-scrolled) .nav-toggle::before, .site-header.on-hero:not(.is-scrolled) .nav-toggle::after{ background: var(--paper); } .site-header .container{ display: flex; align-items: center; justify-content: space-between; padding-block: 1.1rem; } /* The mega-hero's content runs full-bleed with direct edge padding, not the centered 1360px .container the header normally shares with every other page's (also-centered) hero content - match that same edge inset here so the logo lines up with the badge directly beneath it instead of sitting ~250px further in. */ .site-header.on-mega-hero .container, .top-strip.on-mega-hero .container{ max-width: none; padding-inline: clamp(1.5rem, 5vw, 6.5rem); } .logo{ font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; letter-spacing: -0.03em; display: flex; flex-direction: column; line-height: 1; } .logo .logo-sub{ font-family: var(--font-body); font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--taupe); margin-top: 0.35rem; font-style: normal; } .logo em{ color: var(--pink-deep); font-style: normal; font-family: var(--font-script); font-size: 1.2em; display: inline-block; transition: transform .3s var(--ease); } .logo:hover em{ transform: rotate(-4deg) scale(1.06); } .main-nav{ display: flex; align-items: center; gap: clamp(1.2rem, 2vw, 2.4rem); } .main-nav a{ position: relative; font-size: 0.9rem; padding: 0.3rem 0; } .main-nav a::after{ content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1.5px; background: var(--pink-deep); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .main-nav a:hover::after, .main-nav a.is-active::after{ transform: scaleX(1); } .main-nav a.is-active{ color: var(--pink-ink); } /* Same quiet variety as the mobile menu - italic on the two informational links. 0.9rem is too small for the cursive script to stay legible, so Home/Contact don't get it here the way they do in the mobile menu. */ .main-nav a.mn-italic{ font-style: italic; } .nav-cta{ display:flex; align-items:center; gap: 0.9rem; } .nav-toggle{ display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: 50%; } .nav-toggle span, .nav-toggle::before, .nav-toggle::after{ content: ""; display:block; width: 16px; height: 1.4px; background: var(--ink); position: relative; } .nav-toggle{ flex-direction: column; gap: 4px; } .mobile-nav{ position: fixed; inset: 0; background: var(--cream); z-index: 900; display: flex; flex-direction: column; padding: 6.5rem var(--pad) 3rem; transform: translateY(-101%); visibility: hidden; transition: transform .5s var(--ease), visibility 0s linear .5s; overflow-y: auto; } .mobile-nav.is-open{ transform: translateY(0); visibility: visible; transition: transform .5s var(--ease), visibility 0s linear 0s; } .mobile-nav > a{ font-family: var(--font-display); font-size: 2.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); transition: color .25s, transform .25s var(--ease); } /* A little of the same typographic variety used everywhere else on the site - Home and Contact (the two "come talk to a person" links) in cursive, Communities/About in italic, so the list doesn't read as one flat uniform block. */ .mobile-nav > a.mn-script{ font-family: var(--font-script); font-weight: 400; font-size: 3.1rem; color: var(--pink-deep); } .mobile-nav > a.mn-italic{ font-style: italic; } .mobile-nav > a.mn-script:active, .mobile-nav > a:active{ transform: translateX(4px); } .mobile-nav .mn-cta{ margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.9rem; } .mobile-nav .mn-cta a{ font-family: var(--font-body); font-size: 0.9rem; padding: 0; border-bottom: none; } /* Call and Email now read as a matched pair - one filled, one outlined - instead of a confident pink pill next to a tiny uppercase text link. */ .mobile-nav .mn-cta .btn-pink{ font-size: 0.98rem; padding: 1.1em 1.6em; justify-content: center; } .mobile-nav .mn-cta .mn-email{ display: flex; align-items: center; justify-content: center; gap: 0.6em; font-size: 0.94rem; padding: 1.05em 1.6em; border: 1.5px solid var(--line-strong); border-radius: 100px; color: var(--ink); transition: border-color .2s, background .2s, color .2s; } .mobile-nav .mn-cta .mn-email:hover{ border-color: var(--ink); background: var(--ink); color: var(--paper); } .mobile-nav .mn-cta .cb-icon{ width: 17px; height: 17px; flex-shrink: 0; } @media (max-width: 900px){ .main-nav{ display: none; } .nav-cta .btn-outline{ display:none; } .nav-toggle{ display: flex; } } /* sticky mobile call bar */ .call-bar{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 400; display: none; background: rgba(20,16,12,.92); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); color: var(--paper); box-shadow: 0 -10px 28px rgba(0,0,0,.22); border-top: 1px solid rgba(247,242,233,.1); } .call-bar .container{ display:flex; padding: 0; } .call-bar a{ flex: 1; display:flex; align-items:center; justify-content:center; gap: .5rem; padding: 1rem 0.5rem; font-size: 0.8rem; font-weight: 400; letter-spacing: .02em; border-right: 1px solid rgba(255,255,255,.12); transition: background .2s; } .call-bar .cb-icon{ width: 16px; height: 16px; flex-shrink: 0; } .call-bar a.cb-primary{ background: var(--pink); color: var(--ink); } .call-bar a:last-child{ border-right: none; } @media (max-width: 720px){ .call-bar{ display: block; } body{ padding-bottom: 58px; } } /* ---------------------------------- Marquee ---------------------------------- */ .marquee{ background: var(--ink); color: var(--cream); overflow: hidden; padding-block: 0.85rem; white-space: nowrap; } .marquee-track{ display: inline-flex; animation: marquee 32s linear infinite; } .marquee:hover .marquee-track{ animation-play-state: paused; } .marquee span{ font-family: var(--font-display); font-style: italic; font-size: 1.1rem; padding-inline: 1.6rem; display: inline-flex; align-items: center; gap: 1.6rem; } .marquee span::after{ content: "\2726"; font-style: normal; color: var(--pink); font-size: 0.7rem; } @keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } } /* ---------------------------------- Reveal / scroll ---------------------------------- Hidden state only applies once html.js confirms JS is running (see inline head script). No-JS visitors always see full content; this is a progressive enhancement, never a hard requirement for visibility. */ html.js [data-reveal]{ opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft); } html.js [data-reveal].in{ opacity: 1; transform: translateY(0); } [data-reveal-delay="1"]{ transition-delay: .08s; } [data-reveal-delay="2"]{ transition-delay: .16s; } [data-reveal-delay="3"]{ transition-delay: .24s; } [data-reveal-delay="4"]{ transition-delay: .32s; } /* ---------------------------------- Hero (full-bleed) ---------------------------------- The house/place IS the hero - one full-width photo or video, edge to edge, with the sticky header riding transparent over it and the headline breaking directly across the image. No cropped card, no arch mask, no cream column beside it. */ .hero-full{ position: relative; min-height: 78vh; display: flex; align-items: flex-end; overflow: hidden; margin-top: calc(-1 * var(--header-h, 0px)); } .hero-full-media{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero-full-overlay{ position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,16,12,.42) 0%, rgba(20,16,12,0) 28%, rgba(20,16,12,.18) 55%, rgba(15,12,9,.88) 100%), linear-gradient(90deg, rgba(15,12,9,.35) 0%, rgba(15,12,9,0) 45%); } .hero-full-content{ position: relative; z-index: 2; width: 100%; /* Tied to the JS-measured real header height (see initHeader), not a viewport-width guess - the header's own content (phone/email strip, two-line logo lockup) reflows independently of vw, so a clamp() here drifts out of sync with it at exactly the widths where the header wraps to more lines, cramming the breadcrumb into the tagline above. */ padding-top: calc(var(--header-h, 130px) + clamp(1.5rem, 4vw, 3rem)); padding-bottom: clamp(3.2rem, 6vw, 5.5rem); color: var(--paper); } /* Deliberately smaller than the homepage mega-hero (up to 11.5rem) - these interior heroes are the second-loudest moment on the site, not a repeat of the loudest one. Every page maxing out the same huge scale is what reads as templated rather than art-directed. */ .hero-full-content .h1{ color: var(--paper); max-width: 15ch; font-size: clamp(2.8rem, 2.1rem + 4.4vw, 5.6rem); } .hero-full-content .lede{ color: rgba(247,242,233,.85); margin-top: 1.4rem; } /* Same script-flourish treatment as the mega-hero, used on select interior headlines only (not every single one) - the restraint is what reads as a deliberate accent rather than a font applied by rote. */ .hero-full-content .h1 em, .page-hero .h1 em{ font-family: var(--font-script); font-style: normal; font-weight: 400; color: var(--pink); font-size: 1.3em; display: inline-block; transition: transform .35s var(--ease); } .page-hero .h1 em{ color: var(--pink-deep); } .hero-full-content .h1 em:hover, .page-hero .h1 em:hover{ transform: rotate(-3deg) scale(1.06); } .hero-full-badge{ position: absolute; top: calc(var(--header-h, 130px) + 1.2rem); right: var(--pad); z-index: 2; background: var(--pink); color: var(--ink); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.6em 1.1em; border-radius: 100px; } .hero-full-signature{ position: absolute; left: var(--pad); bottom: clamp(1.6rem, 3vw, 2.4rem); z-index: 2; color: var(--paper); display: flex; align-items: center; gap: .7rem; font-size: 0.78rem; letter-spacing: .03em; } .hero-full-signature::before{ content:""; width: 26px; height: 1px; background: rgba(247,242,233,.6); } /* Shorter cut for interior pages - same full-bleed idea, less real estate since these aren't the primary landing moment. */ .hero-full.hero-full-short{ min-height: 62vh; } .hero-full-short .hero-full-content{ padding-top: calc(var(--header-h, 130px) + clamp(1.2rem, 3vw, 2.2rem)); } @media (max-width: 720px){ .hero-full{ min-height: 88vh; } .hero-full.hero-full-short{ min-height: 76vh; } .hero-full-content .h1{ max-width: 12ch; } /* Signature line is absolutely positioned at a fixed distance from the bottom, but the stacked mobile CTA buttons push real content past that point - it's redundant with the top-strip contact line anyway at this width, so just drop it rather than have it overlap the buttons. */ .hero-full-signature{ display: none; } } /* ---------------------------------- Mega hero (rebuild v2) ---------------------------------- Leans directly on the client's four hero references: oversized display type breaking straight across a full-bleed photo/video (TERRACOTTA, STATE) and a glass-morphism info card floating over the image (TERRACOTTA). The headline anchors top-left, like the small brand mark + big type stacking in the TERRACOTTA/STATE references, rather than sitting bottom-anchored. */ .mega-hero{ position: relative; min-height: 100vh; overflow: hidden; margin-top: calc(-1 * var(--header-h, 0px)); background: var(--ink); } .mega-hero-media{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .mega-hero-overlay{ position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,16,12,.55) 0%, rgba(20,16,12,.18) 40%, rgba(20,16,12,.22) 58%, rgba(15,12,9,.93) 100%), linear-gradient(90deg, rgba(15,12,9,.4) 0%, rgba(15,12,9,0) 55%); } .mega-hero-content{ position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; /* Full viewport width, not the 1360px .container - on wide screens a centered container leaves the headline and card stranded in a narrow island with dead space on both sides. Edge-inset padding only, so the badge/logo and headline/card actually reach toward the far sides of the screen the way the photo already does. */ padding-inline: clamp(1.5rem, 5vw, 6.5rem); padding-top: calc(var(--header-h, 130px) + clamp(1.4rem, 3vw, 2.4rem)); padding-bottom: clamp(3rem, 6vw, 5rem); } .mega-hero-top{ width: 100%; } /* Pinned near the top-right corner, a touch higher than the headline's own top offset so it reads as sitting above everything else. */ .mega-hero-logo-link{ position: absolute; top: calc(var(--header-h, 130px) + clamp(0.5rem, 1.4vw, 1.1rem)); right: clamp(1.5rem, 5vw, 6.5rem); z-index: 3; } .mega-hero-logo{ height: 190px; width: auto; opacity: 0.98; flex-shrink: 0; transition: opacity .25s; } .mega-hero-logo-link:hover .mega-hero-logo{ opacity: 0.75; } .mega-hero-headline{ font-family: var(--font-display); font-weight: 400; color: var(--paper); line-height: 0.86; letter-spacing: -0.045em; font-size: clamp(4rem, 2.3rem + 8.1vw, 10.4rem); margin-top: 0.9rem; max-width: 17ch; } .mega-hero-headline i.mhh-alt{ font-style: italic; } .mega-hero-headline em{ font-family: var(--font-script); font-style: normal; font-weight: 400; color: var(--pink); font-size: 1.35em; letter-spacing: 0; display: inline-block; transform: translateY(0.06em); transition: transform .35s var(--ease); } .mega-hero-headline em:hover{ transform: translateY(0.06em) rotate(-3deg) scale(1.06); } .mega-hero-bottom{ max-width: 44ch; } .mega-hero-lede{ color: rgba(247,242,233,.82); font-size: clamp(1.05rem, 1rem + .4vw, 1.28rem); line-height: 1.6; max-width: 36ch; } .mega-hero-lede + .hero-actions{ margin-top: 1.6rem; } /* Pinned to the literal bottom-right corner of the hero, independent of the lede column - a floating signature card (TERRACOTTA reference), not just another item sharing the row with the body copy. */ .mega-hero-card{ position: absolute; right: clamp(1.5rem, 5vw, 6.5rem); bottom: clamp(1.6rem, 4vw, 3.2rem); z-index: 2; background: rgba(247,242,233,.08); border: 1px solid rgba(247,242,233,.22); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-radius: 20px; padding: 1.6rem 1.9rem; min-width: 270px; display: flex; flex-direction: column; gap: 1rem; } .mega-hero-card-row{ display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem; font-size: 0.76rem; letter-spacing: .02em; color: rgba(247,242,233,.55); } .mega-hero-card-row b{ color: var(--paper); font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; font-size: 1rem; text-align: right; } /* Her name in cursive keeps the card from reading as pure paperwork; the service area picks up the same pink as a second, quieter highlight - license and brokerage stay plain, factual. */ .mega-hero-card-row b.mhc-script{ font-family: var(--font-script); font-weight: 400; font-size: 1.5em; color: var(--pink); } .mega-hero-card-row b.mhc-pink{ color: var(--pink); } @media (max-width: 900px){ /* The card's corner pin collides with real content once the layout stacks single-column, so it drops back into normal flow after the buttons instead. */ .mega-hero-card{ position: static; width: 100%; margin-top: 2rem; } } /* Wider tier declared first, narrower tier second - both match at phone widths, so source order (not just the media condition) decides which .mega-hero-logo height wins. Narrower needs to win, so it has to come last: previously 900px was declared after 720px and silently overrode the smaller 56px phone size back up to 76px, which combined with the logo's fixed top offset was enough to overlap the headline text below it (visible as the logo sitting on top of "clearer"). */ @media (max-width: 900px){ .mega-hero-logo{ height: 76px; } /* Reserve real clearance below the logo instead of letting the headline start at its usual (much smaller) top offset. */ .mega-hero-top{ margin-top: 96px; } } @media (max-width: 720px){ .mega-hero{ min-height: 100svh; } .mega-hero-content{ min-height: 100svh; } .mega-hero-headline{ font-size: clamp(3.3rem, 2rem + 13vw, 6rem); max-width: 11ch; } .mega-hero-logo{ height: 56px; } .mega-hero-top{ margin-top: 76px; } } /* ---------------------------------- Angled feature banner (STATE reference) ---------------------------------- A single striking full-bleed photograph with the headline bleeding off one edge behind an angled clip, used once, sparingly, for a section that needs to feel like a magazine spread rather than another card grid. */ .angled-feature{ position: relative; background: var(--paper); overflow: hidden; min-height: 62vh; padding-block: clamp(2rem, 5vw, 3.5rem); display: flex; align-items: center; } .angled-feature-media{ position: absolute; top: 0; right: 0; height: 100%; width: 62%; /* Inset is smallest at the top (cuts close behind the big headline) and widest at the bottom (clears well away from the longer lede/button line) - a constant inset would either crowd the headline or, worse, let the paragraph text run under the photo. */ clip-path: polygon(10% 0, 100% 0, 100% 100%, 34% 100%); } .angled-feature-media img{ width: 100%; height: 100%; object-fit: cover; } /* Photo and text converge from opposite sides instead of the site-wide fade-up - the section is full-bleed with overflow hidden, so both slides stay clipped cleanly within it rather than peeking off the page edge. */ html.js .angled-feature-media[data-reveal]{ transform: translateX(9%); } html.js .angled-feature-media[data-reveal].in{ transform: translateX(0); } html.js .angled-feature-content[data-reveal]{ transform: translateX(-64px); } html.js .angled-feature-content[data-reveal].in{ transform: translateX(0); } /* Direct edge padding instead of the 1360px .container - on wide screens a centered container leaves this text stranded well short of the actual left edge of the browser. */ .angled-feature-content{ position: relative; z-index: 2; max-width: 36%; padding-left: var(--pad); } .angled-feature-content .eyebrow{ margin-bottom: 0; } .angled-feature-content .h2{ max-width: 13ch; margin-top: 1.1rem; } .angled-feature-content .lede{ max-width: 30ch; margin-top: 1.5rem; } .angled-feature-content .hero-actions{ margin-top: 2.2rem; } @media (max-width: 900px){ .angled-feature{ min-height: auto; padding-block: clamp(3rem, 8vw, 5rem) 0; flex-direction: column; align-items: stretch; } .angled-feature-media{ position: relative; width: 100%; height: 46vh; clip-path: none; order: 2; margin-top: clamp(2rem, 6vw, 3rem); } .angled-feature-content{ max-width: 100%; padding-inline: var(--pad); order: 1; } .angled-feature-content .h2{ max-width: 16ch; } } /* Oversized outline type bleeding behind a section - the single most "designed, not generated" move in the reference moodboards (see the TERRACOTTA hero). Used sparingly, never as a repeating pattern. */ .ghost-type{ position: absolute; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.03em; font-size: clamp(6rem, 18vw, 17rem); color: transparent; -webkit-text-stroke: 1.5px var(--line-strong); line-height: 1; white-space: nowrap; z-index: 0; pointer-events: none; user-select: none; } /* ---------------------------------- Sections generic ---------------------------------- */ section{ position: relative; } .section{ padding-block: clamp(4rem, 8vw, 7.5rem); } .section-tight{ padding-block: clamp(3rem, 6vw, 5rem); } .section-head{ display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(2.4rem, 5vw, 4rem); flex-wrap: wrap; } .section-head .h2{ margin-top: 0.9rem; max-width: 18ch; } .section-head .lede{ padding-bottom: 0.4rem; } .on-cream{ background: var(--cream); } .on-paper{ background: var(--paper); } .on-ink{ background: var(--ink); color: var(--cream); } .on-ink .eyebrow{ color: var(--pink); } .on-ink .eyebrow::before{ background: var(--pink); } .on-ink .h-display{ color: var(--paper); } .on-green{ background: var(--green); color: var(--green-wash); } /* ---------------------------------- Service index (editorial list, not a feature-card grid) ---------------------------------- */ .index-list{ border-top: 1px solid var(--line-strong); } .index-row{ display: grid; grid-template-columns: 64px 1fr 34ch 96px 48px; align-items: center; column-gap: clamp(1rem, 2.5vw, 2.2rem); padding-block: clamp(1.4rem, 3vw, 2.1rem); border-bottom: 1px solid var(--line-strong); position: relative; } .index-row:hover{ background: var(--paper); } .index-num{ font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--pink-ink); } .index-title{ font-family: var(--font-display); font-size: clamp(1.7rem, 1.3rem + 2vw, 3.1rem); letter-spacing: -0.03em; line-height: 1; transition: color .35s var(--ease), transform .35s var(--ease); } .index-row:hover .index-title{ color: var(--pink-deep); transform: translateX(10px); } .index-desc{ font-size: 0.92rem; color: var(--ink-70); line-height: 1.55; } .index-thumb{ width: 96px; height: 72px; border-radius: 10px; overflow: hidden; opacity: 0; transform: scale(.82) translateX(-8px); transition: opacity .4s var(--ease), transform .4s var(--ease); } .index-row:hover .index-thumb{ opacity: 1; transform: scale(1) translateX(0); } .index-thumb img{ width: 100%; height: 100%; object-fit: cover; } .index-arrow{ justify-self: end; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease); } .index-row:hover .index-arrow{ background: var(--ink); border-color: var(--ink); color: var(--cream); transform: translate(4px,-4px); } @media (max-width: 900px){ .index-row{ grid-template-columns: 44px 1fr 44px; row-gap: .6rem; } .index-desc{ grid-column: 2 / 3; max-width: 52ch; } .index-thumb{ display: none; } } @media (max-width: 560px){ .index-title{ font-size: clamp(1.6rem, 1.3rem + 4vw, 2.2rem); } } /* ---------------------------------- Service paths (legacy card grid - retained for other pages) ---------------------------------- */ .paths-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; } /* Column-count modifiers - kept as real classes (not inline styles) so the existing mobile breakpoints below still win the cascade at narrow viewports. An inline style="grid-template-columns:..." would out-rank those media queries and lock the desktop column count on phones. */ .paths-grid-2{ grid-template-columns: repeat(2, 1fr); } .paths-grid-3{ grid-template-columns: repeat(3, 1fr); } .path-card{ background: var(--paper); padding: clamp(1.8rem, 2.6vw, 2.6rem) clamp(1.5rem, 2vw, 2rem); display: flex; flex-direction: column; min-height: 340px; transition: background .4s var(--ease); position: relative; overflow: hidden; } .path-card:hover{ background: var(--ink); color: var(--cream); } .path-card:hover .path-num, .path-card:hover .path-arrow{ color: var(--pink); } .path-num{ font-family: var(--font-display); font-style: italic; color: var(--pink-ink); font-size: 1rem; transition: color .4s var(--ease); } .path-card .h4{ margin-top: 1.6rem; font-family: var(--font-display); letter-spacing: -0.02em; } .path-card p{ margin-top: 0.8rem; color: var(--ink-70); font-size: 0.92rem; flex: 1; } .path-card:hover p{ color: rgba(247,242,233,.72); } .path-arrow{ margin-top: 1.4rem; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; transition: transform .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease); } .path-card:hover .path-arrow{ border-color: rgba(255,98,190,.5); transform: translate(4px,-4px); } @media (max-width: 980px){ .paths-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 620px){ .paths-grid{ grid-template-columns: 1fr; } } /* ---------------------------------- Local / value split ---------------------------------- */ .split{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .split.reverse{ direction: rtl; } .split.reverse > *{ direction: ltr; } .split-media{ position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 5/4.2; } .split-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-soft); } .split-media:hover img{ transform: scale(1.045); } @media (max-width: 900px){ .split{ grid-template-columns: 1fr; } .split.reverse{ direction: ltr; } } .stat-row{ display: flex; gap: clamp(1.6rem, 4vw, 3.2rem); margin-top: 2.4rem; flex-wrap: wrap; } .stat{ } .stat b{ display:block; font-family: var(--font-display); font-size: 2.1rem; letter-spacing: -0.03em; } .stat span{ font-size: 0.78rem; color: var(--taupe); letter-spacing: .02em; } .principle-list{ margin-top: 1.8rem; display: flex; flex-direction: column; gap: 1.1rem; } .principle-list li{ display: flex; gap: 1rem; align-items: flex-start; font-size: 1rem; color: var(--ink-70); padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); } .principle-list li:last-child{ border-bottom: none; } .principle-list b{ color: var(--ink); font-family: var(--font-display); letter-spacing: -0.02em; font-size: 1.1rem; } /* Larger cut for when the list carries a whole section on its own, rather than sitting beside an image as a secondary column. */ .principle-list-lg{ max-width: 900px; } .principle-list-lg li{ font-size: 1.05rem; padding-block: 1.6rem; gap: 1.6rem; } .principle-list-lg b{ font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); display: block; margin-bottom: .4rem; } .principle-list-lg .principle-num{ font-size: 1.3rem; } .principle-num{ font-family: var(--font-display); font-style: italic; color: var(--pink-ink); flex-shrink: 0; width: 1.6em; } /* ---------------------------------- Community cards ---------------------------------- */ .community-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.1rem, 2vw, 1.8rem); } .community-card{ position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4/5; isolation: isolate; } .community-card img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-soft); } .community-card:hover img{ transform: scale(1.08); } .community-card::before{ content:""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,23,18,0) 30%, rgba(27,23,18,.82) 100%); z-index: 1; } .community-card .cc-body{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.4rem; color: var(--paper); } .community-card .cc-name{ font-family: var(--font-display); font-size: 1.5rem; } .community-card .cc-tag{ font-size: 0.76rem; color: var(--pink); margin-top: .3rem; letter-spacing: .02em; } .community-card.large{ grid-column: span 2; aspect-ratio: 8/5; } @media (max-width: 900px){ .community-grid{ grid-template-columns: 1fr 1fr; } .community-card.large{ grid-column: span 2; } } @media (max-width: 620px){ .community-grid{ grid-template-columns: 1fr; } .community-card.large{ grid-column: span 1; aspect-ratio: 4/5; } } /* ---------------------------------- Testimonial / proof ---------------------------------- */ .proof-card{ background: var(--paper); border: 1px solid var(--line); border-radius: 26px; padding: clamp(2rem, 4vw, 3.2rem); } .proof-quote{ font-family: var(--font-display); font-style: italic; letter-spacing: -0.01em; font-size: clamp(1.35rem, 1.1rem + 1.3vw, 2rem); line-height: 1.35; color: var(--ink); } .proof-by{ margin-top: 1.6rem; font-size: 0.85rem; color: var(--taupe); } .proof-by b{ color: var(--ink); } /* ---------------------------------- Social showcase ---------------------------------- */ .social-strip{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .social-card{ position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4/5; } .social-card img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .social-card:hover img{ transform: scale(1.06); } .social-card .sc-overlay{ position: absolute; inset: 0; background: rgba(27,23,18,0); transition: background .3s; display: flex; align-items: flex-end; padding: 1rem; opacity: 0; } .social-card:hover .sc-overlay{ background: rgba(27,23,18,.35); opacity: 1; } .social-card .sc-icon{ color: var(--paper); font-size: 1.3rem; } @media (max-width: 900px){ .social-strip{ grid-template-columns: repeat(2,1fr);} } /* ---------------------------------- Video coverflow (Trinity Sites layout + glammedspaskin.com scale) ---------------------------------- A center-active card at full size/opacity, with neighbors fanned out in perspective - scaled down, rotated, dimmed - so the whole shelf reads as a single 3D object instead of a flat row. Cards are large - the shelf is the visual anchor of the section, not a strip of thumbnails. Clicking the active card doesn't play inline; it opens the lightbox below so the real video plays large, not cramped into a ~300px card. */ .video-coverflow{ position: relative; } .coverflow-track{ position: relative; display: flex; align-items: center; justify-content: center; height: clamp(480px, 56vw, 680px); perspective: 2000px; /* The fanned side cards translate well past their own box (up to 128% of their own width) - on desktop that's still well inside the container, but on mobile it overshoots the viewport and silently widens the whole page's horizontal scroll region. Contain it here instead. */ overflow: hidden; } .coverflow-card{ position: absolute; top: 50%; left: 50%; width: clamp(270px, 27vw, 380px); aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden; background: #000; cursor: pointer; opacity: 0; box-shadow: 0 30px 70px rgba(0,0,0,.45); transition: transform .7s var(--ease-soft), opacity .7s var(--ease-soft), filter .7s var(--ease-soft); will-change: transform; } .coverflow-card video{ width: 100%; height: 100%; object-fit: cover; display: block; } .coverflow-card[data-pos="0"]{ transform: translate(-50%,-50%) translateZ(0) rotateY(0deg) scale(1); opacity: 1; z-index: 5; filter: none; } .coverflow-card[data-pos="-1"]{ transform: translate(-50%,-50%) translateX(-72%) translateZ(-160px) rotateY(30deg) scale(.8); opacity: .55; z-index: 4; filter: brightness(.55); } .coverflow-card[data-pos="1"]{ transform: translate(-50%,-50%) translateX(72%) translateZ(-160px) rotateY(-30deg) scale(.8); opacity: .55; z-index: 4; filter: brightness(.55); } /* Only three cards on screen at once (prev/active/next) - anything beyond that stays parked here, fully hidden, until it cycles into view. */ .coverflow-card[data-pos="-2"]{ transform: translate(-50%,-50%) translateX(128%) translateZ(-320px) rotateY(36deg) scale(.64); opacity: 0; z-index: 3; filter: brightness(.4); pointer-events: none; } .coverflow-card[data-pos="2"]{ transform: translate(-50%,-50%) translateX(-128%) translateZ(-320px) rotateY(-36deg) scale(.64); opacity: 0; z-index: 3; filter: brightness(.4); pointer-events: none; } .coverflow-card[data-pos="0"]:hover{ transform: translate(-50%,-50%) translateZ(0) rotateY(0deg) scale(1.015); } .coverflow-play{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; width: 68px; height: 68px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; transition: transform .3s var(--ease), background .3s var(--ease); } .coverflow-play svg{ width: 24px; height: 24px; margin-left: 3px; color: var(--ink); } .coverflow-card[data-pos="0"]:hover .coverflow-play{ transform: translate(-50%,-50%) scale(1.08); background: var(--pink); } .coverflow-card::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,12,9,0) 45%, rgba(15,12,9,.88) 100%); z-index: 1; } .coverflow-caption{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.3rem 1.4rem; color: var(--paper); } .coverflow-caption .cc-name{ font-family: var(--font-display); font-size: 1.4rem; } .coverflow-caption .cc-tag{ font-size: .78rem; color: var(--pink); margin-top: .3rem; letter-spacing: .02em; } .coverflow-arrow{ position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(247,242,233,.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(247,242,233,.28); color: var(--paper); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); z-index: 6; } .coverflow-arrow svg{ width: 20px; height: 20px; } .coverflow-arrow:hover{ background: var(--pink); border-color: var(--pink); color: var(--ink); } .coverflow-arrow-prev{ left: clamp(0px, 2vw, 24px); } .coverflow-arrow-next{ right: clamp(0px, 2vw, 24px); } .coverflow-hint{ text-align: center; margin-top: 1.4rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(247,242,233,.4); } @media (max-width: 720px){ .coverflow-arrow{ width: 42px; height: 42px; } } /* ---------------------------------- Video lightbox ---------------------------------- Clicking the active coverflow card doesn't play the clip inline in a ~300px card - it opens this large centered overlay instead, matching how the reference site's cards expand rather than staying thumbnail-sized. */ .video-lightbox{ position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s linear .35s; } .video-lightbox.is-open{ opacity: 1; visibility: visible; transition: opacity .35s var(--ease); } .video-lightbox-backdrop{ position: absolute; inset: 0; background: rgba(10,8,6,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .video-lightbox-inner{ position: relative; z-index: 1; height: min(86vh, 820px); max-width: 92vw; aspect-ratio: 9 / 16; transform: scale(.94); transition: transform .35s var(--ease); } .video-lightbox.is-open .video-lightbox-inner{ transform: scale(1); } .video-lightbox-inner video{ width: 100%; height: 100%; border-radius: 20px; box-shadow: 0 40px 100px rgba(0,0,0,.6); background: #000; display: block; object-fit: contain; } .video-lightbox-close{ position: absolute; top: -56px; right: 0; width: 44px; height: 44px; border-radius: 50%; background: rgba(247,242,233,.1); border: 1px solid rgba(247,242,233,.28); color: var(--paper); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); } .video-lightbox-close:hover{ background: var(--pink); border-color: var(--pink); color: var(--ink); } .video-lightbox-close svg{ width: 18px; height: 18px; } @media (max-width: 720px){ .video-lightbox-close{ top: -46px; width: 38px; height: 38px; } } .social-follow{ margin-top: clamp(2rem, 4vw, 3rem); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 1.6rem 2rem; } /* Two brand-colored emblem links (Facebook, Instagram) rather than text buttons - immediately recognizable, quiet until hovered. */ .social-emblems{ display: flex; gap: .9rem; } .social-emblem{ width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--paper); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .social-emblem svg{ width: 24px; height: 24px; } .social-emblem.is-facebook{ background: #1877F2; } .social-emblem.is-instagram{ background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); } .social-emblem:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(27,23,18,.18); } /* ---------------------------------- Footer ---------------------------------- */ .site-footer{ background: var(--ink); color: rgba(247,242,233,.72); padding-top: clamp(3.5rem, 7vw, 6rem); } .footer-top{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(247,242,233,.14); } .footer-brand .logo{ color: var(--cream); } .footer-brand p{ margin-top: 1rem; max-width: 34ch; font-size: 0.9rem; } /* Real Bradford Elite brokerage mark - kept small and secondary to Dusty's own wordmark above it, per the brokerage's brand usage guidance. */ .footer-brokerage-mark{ height: 52px; width: auto; margin-top: 1.6rem; opacity: 0.92; } .footer-col h5{ font-size: 0.72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--pink); margin-bottom: 1.1rem; } .footer-col a, .footer-col li{ display:block; font-size: 0.88rem; margin-bottom: 0.7rem; color: rgba(247,242,233,.72); } .footer-col a:hover{ color: var(--pink); } .footer-legal{ padding-block: 1.8rem; display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: space-between; align-items: center; font-size: 0.74rem; color: rgba(247,242,233,.6); } .footer-legal-links{ display: flex; gap: 1.2rem; flex-wrap: wrap; } .footer-legal-links a:hover{ color: var(--pink); } .footer-compliance{ font-size: 0.72rem; color: rgba(247,242,233,.6); line-height: 1.7; padding-bottom: 1.8rem; max-width: 90ch; } .footer-compliance strong{ color: rgba(247,242,233,.78); } @media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } } /* ---------------------------------- Page hero (interior pages) ---------------------------------- */ .page-hero{ padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); position: relative; overflow: hidden; } .page-hero .h1{ margin-top: 1rem; max-width: 16ch; font-size: clamp(2.6rem, 2rem + 3.8vw, 5rem); } .page-hero .lede{ margin-top: 1.4rem; } .breadcrumb{ font-size: 0.78rem; color: var(--taupe); margin-bottom: 1.4rem; } .breadcrumb a:hover{ color: var(--pink-deep); } .breadcrumb.on-dark{ color: rgba(247,242,233,.65); } .breadcrumb.on-dark a:hover{ color: var(--pink); } /* ---------------------------------- Process steps ---------------------------------- */ .steps{ counter-reset: step; display: flex; flex-direction: column; } .step{ counter-increment: step; display: grid; grid-template-columns: 90px 1fr; column-gap: 1.6rem; row-gap: 0; padding-block: clamp(1.8rem, 3vw, 2.6rem); border-top: 1px solid var(--line); align-items: start; } .steps .step:last-child{ border-bottom: 1px solid var(--line); } .step::before{ content: counter(step, decimal-leading-zero); grid-column: 1; grid-row: 1; font-family: var(--font-display); font-style: italic; font-size: 1.6rem; color: var(--pink-deep); } .step h4{ grid-column: 2; grid-row: 1; font-family: var(--font-display); letter-spacing: -0.02em; font-size: 1.3rem; } .step p{ grid-column: 2; grid-row: 2; margin-top: .6rem; color: var(--ink-70); max-width: 60ch; } @media (max-width: 620px){ .step{ grid-template-columns: 1fr; row-gap: .4rem; } .step::before{ grid-column: 1; grid-row: 1; } .step h4{ grid-column: 1; grid-row: 2; } .step p{ grid-column: 1; grid-row: 3; } } /* ---------------------------------- FAQ / accordion ---------------------------------- */ .faq-item{ border-top: 1px solid var(--line); } .faq-list{ border-bottom: 1px solid var(--line); } .faq-q{ width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.5rem; text-align: left; font-family: var(--font-display); letter-spacing: -0.02em; font-size: clamp(1.05rem, .9rem + .5vw, 1.4rem); } .faq-plus{ flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); position: relative; transition: transform .4s var(--ease), background .3s; } .faq-plus::before, .faq-plus::after{ content:""; position:absolute; background: var(--ink); top: 50%; left: 50%; transform: translate(-50%,-50%); } .faq-plus::before{ width: 11px; height: 1.3px; } .faq-plus::after{ width: 1.3px; height: 11px; transition: opacity .3s; } .faq-item.is-open .faq-plus{ transform: rotate(135deg); background: var(--pink); border-color: var(--pink); } .faq-a{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-soft); } .faq-a p{ overflow: hidden; min-height: 0; padding-bottom: 1.6rem; color: var(--ink-70); max-width: 68ch; font-size: 0.96rem; line-height: 1.7; } .faq-item.is-open .faq-a{ grid-template-rows: 1fr; } /* ---------------------------------- Forms ---------------------------------- */ .form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } .field{ display: flex; flex-direction: column; gap: .5rem; } .field.full{ grid-column: 1 / -1; } .field label{ font-size: 0.76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--taupe); } .field input, .field select, .field textarea{ background: var(--paper); border: 1px solid var(--line-strong); border-radius: 12px; padding: 0.95em 1.1em; font-size: 0.98rem; transition: border-color .25s; } .field textarea{ resize: vertical; min-height: 120px; } .field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--pink-deep); outline: none; } .radio-row{ display: flex; gap: .7rem; flex-wrap: wrap; } .radio-chip{ border: 1px solid var(--line-strong); border-radius: 100px; padding: 0.6em 1.2em; font-size: 0.85rem; cursor: pointer; transition: all .25s; } .radio-chip input{ display: none; } .radio-chip.is-checked{ background: var(--ink); color: var(--cream); border-color: var(--ink); } @media (max-width: 620px){ .form-grid{ grid-template-columns: 1fr; } } .contact-card{ background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 1.8rem; display: flex; gap: 1.1rem; align-items: flex-start; } .contact-card .ci{ width: 44px; height: 44px; border-radius: 50%; background: var(--pink-wash); color: var(--pink-ink); display:flex; align-items:center; justify-content:center; flex-shrink: 0; } /* 1.1rem/0.92rem (a 1.2x step) read as flat - too close to carry a label vs. value distinction on their own. Widen the step past the 1.25x threshold that actually reads as a hierarchy jump. */ .contact-card .cc-label{ display: block; font-family: var(--font-display); letter-spacing: -0.01em; font-size: 1.2rem; } .contact-card .cc-value{ color: var(--ink-70); font-size: 0.85rem; } /* ---------------------------------- Final CTA ---------------------------------- */ .final-cta{ position: relative; background: var(--ink); color: var(--cream); border-radius: 32px; padding: clamp(3rem, 7vw, 6rem) clamp(1.6rem, 5vw, 5rem); overflow: hidden; text-align: center; } .final-cta .h1{ color: var(--paper); max-width: 20ch; margin-inline: auto; } .final-cta .h1 em{ font-family: var(--font-script); font-style: normal; font-weight: 400; color: var(--pink); font-size: 1.3em; display: inline-block; transition: transform .35s var(--ease); } .final-cta .h1 em:hover{ transform: rotate(-3deg) scale(1.06); } .final-cta .lede{ color: rgba(247,242,233,.65); margin-inline: auto; margin-top: 1.2rem; } .final-cta .hero-actions{ justify-content: center; margin-top: 2.4rem; } .final-cta-arch{ position: absolute; bottom: -40%; left: 50%; transform: translateX(-50%); width: 140%; aspect-ratio: 2/1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,98,190,.28), transparent 70%); pointer-events: none; } /* ---------------------------------- Utility ---------------------------------- */ .mt-0{ margin-top: 0 !important; } .center{ text-align: center; } .pink-dot{ color: var(--pink-deep); } .divider{ height: 1px; background: var(--line); width: 100%; } .tag-row{ display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; } .tag{ border: 1px solid var(--line-strong); border-radius: 100px; padding: .5em 1.1em; font-size: .8rem; } .badge-license{ display: inline-flex; align-items: center; gap: .6rem; border: 1px solid var(--line-strong); border-radius: 100px; padding: .5em 1.1em .5em .6em; font-size: .78rem; color: var(--ink-70); } .badge-license .dotpulse{ width: 8px; height: 8px; border-radius: 50%; background: #2E7D53; position: relative; } .badge-license .dotpulse::after{ content:""; position:absolute; inset:-4px; border-radius: 50%; border: 1px solid #2E7D53; animation: pulse 2.2s ease-out infinite; } @keyframes pulse{ 0%{ transform: scale(.6); opacity: .8;} 100%{ transform: scale(1.8); opacity: 0;} } /* Official HUD Equal Housing Opportunity mark, paired with its required text. */ .fair-housing-mark{ display: inline-flex; align-items: center; gap: .8rem; margin-top: 1.4rem; font-size: .85rem; color: var(--ink-70); } .fair-housing-mark img{ width: 34px; height: 34px; flex-shrink: 0; }