/* ============ Design tokens ============ */ /* Colorway matches deron-sylvester.vercel.app (verified via live computed styles): white base, deep navy text, slate-blue muted text, blue gradient accent, light-blue tinted alternating sections. Red added sparingly per request — badges, eyebrow dots, and small accent details only. */ :root { --color-bg: #ffffff; --color-bg-alt: #eff5fd; --color-bg-alt-2: #e9f1fb; --color-bg-navy: #050e1c; --color-bg-navy-2: #0a162a; /* Dark navy behind every hero section — matches the Join Centric look (deep blue-black page, slightly lighter card, blue gradient accents). */ --color-hero-dark: #0a0f1c; --color-text: #081a30; --color-text-muted: #425572; --color-text-on-navy: #f3f7fd; --color-text-muted-on-navy: #b7c6e0; --color-border: rgba(8, 26, 48, 0.1); --color-border-on-navy: rgba(255, 255, 255, 0.14); --color-accent-1: #6fb1ff; --color-accent-2: #1f6fe8; --color-accent-gradient: linear-gradient(120deg, var(--color-accent-1), var(--color-accent-2) 65%); --color-red: #d6483f; --color-red-bg: #fdecea; --color-card-bg: #ffffff; --font-display: 'Inter', -apple-system, sans-serif; --font-body: 'Inter', -apple-system, sans-serif; --container-max: 1280px; --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6rem; --radius: 14px; --radius-pill: 100px; } /* Dark theme — toggled via the sun/moon button (adds data-theme="dark" to , persisted in localStorage). Only page-surface tokens flip; the hero/showcase/ family-cta sections are already dark navy in both themes. */ html[data-theme='dark'] { --color-bg: #0a0f18; --color-bg-alt: #111824; --color-bg-alt-2: #141d2c; --color-text: #f3f7fd; --color-text-muted: #93a3bd; --color-border: rgba(255, 255, 255, 0.12); --color-card-bg: #131b28; --color-red-bg: rgba(214, 72, 63, 0.16); } html[data-theme='dark'] .site-footer { background: var(--color-bg); } html[data-theme='dark'] .search-bar { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); } html[data-theme='dark'] .listing-card:hover, html[data-theme='dark'] .team-card:hover, html[data-theme='dark'] .icon-card:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45); } /* ============ Icon system (clean stroke-based SVGs, no emoji) ============ */ .icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color 0.3s ease, color 0.3s ease; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 var(--space-2); color: var(--color-text); } h1 { font-size: clamp(2.5rem, 5vw, 4rem); } h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); } h3 { font-size: 1.25rem; font-weight: 600; } /* Gradient headline treatment — wrap any word/phrase in a heading with for the same blue gradient used on CTAs. */ .gradient-text { background-image: var(--color-accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } p { margin: 0 0 var(--space-2); color: var(--color-text-muted); } a { color: inherit; text-decoration: none; } .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-3); } /* ============ Buttons ============ */ .btn { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.75rem; border-radius: var(--radius-pill); font-weight: 700; font-size: 0.9375rem; border: 1px solid transparent; cursor: pointer; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } /* Light-streak shine — sweeps across the button only on hover. */ .btn::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.55) 50%, transparent 58%); background-repeat: no-repeat; background-size: 260% 160%; background-position: -60% 50%; } .btn:hover::before { animation: btn-shine 0.9s ease-in-out; } @keyframes btn-shine { 0% { background-position: -60% 50%; } 100% { background-position: 160% 50%; } } .btn > * { position: relative; z-index: 2; } .btn-primary { background-image: var(--color-accent-gradient); border: none; color: #ffffff; box-shadow: 0 8px 20px rgba(31, 111, 232, 0.28); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(31, 111, 232, 0.36); } .btn-outline { background: rgba(255, 255, 255, 0.06); color: var(--color-text-on-navy); border-color: var(--color-border-on-navy); } .btn-outline:hover { border-color: var(--color-accent-1); color: var(--color-accent-1); } .btn-red { background: var(--color-red); border: none; color: #fff; box-shadow: 0 8px 20px rgba(214, 72, 63, 0.32); } .btn-red:hover { background: #c03c33; transform: translateY(-1px); box-shadow: 0 12px 24px rgba(214, 72, 63, 0.4); } .btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); } .btn-ghost:hover { border-color: var(--color-accent-2); color: var(--color-accent-2); } /* ============ Eyebrow badge pill ============ */ .badge { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--color-bg-alt); color: var(--color-accent-2); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.5rem 1rem; border-radius: var(--radius-pill); margin-bottom: var(--space-3); } /* On a blue-tinted section, a badge in the same blue would disappear — give it a white chip so it reads as a distinct pill against the section. */ .section--alt .badge { background: var(--color-card-bg); box-shadow: 0 1px 2px rgba(8, 26, 48, 0.06); } .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-red); } .badge--on-navy { background: rgba(255, 255, 255, 0.1); color: var(--color-text-on-navy); } .badge--red { background: var(--color-red-bg); color: var(--color-red); } /* ============ Founder photo (red accent glow) ============ */ .founder-photo { position: relative; border-radius: 14px; padding: 4px; background: linear-gradient(135deg, var(--color-red), transparent 60%); } .founder-photo::before { content: ''; position: absolute; inset: -18px; z-index: -1; background: radial-gradient(circle at 30% 20%, rgba(214, 72, 63, 0.35), transparent 65%); filter: blur(20px); } .founder-photo img { width: 100%; display: block; border-radius: 11px; object-fit: cover; aspect-ratio: 4 / 5; } /* ============ Mission section ============ */ .mission-section { background: var(--color-bg-navy); color: var(--color-text-on-navy); } /* ============ Reusable 3D tilt ============ Any element with .tilt-3d gets a pointer-tracked rotateX/Y tilt (JS sets the transform on move, resets on leave). Used on photos and cards site-wide — the mission photo uses the exact same class, no wrapper, no glare, identical to the founder ("Abdias's Journey") photo. */ .tilt-3d { position: relative; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.55); transform: perspective(1000px); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease; will-change: transform; } .tilt-3d:hover { box-shadow: 0 44px 90px -28px rgba(0, 0, 0, 0.65); } @media (prefers-reduced-motion: reduce) { .tilt-3d { transition: none; transform: none !important; } } .mission-section h2 { color: var(--color-text-on-navy); } .mission-section p { color: var(--color-text-muted-on-navy); } .mission-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-4); align-items: center; } @media (max-width: 860px) { .mission-grid { grid-template-columns: 1fr; } } /* ============ Split grid (image + copy sections) ============ Generic two-column layout used for any section pairing a photo with text. Collapses to one column on mobile with the image forced to the top via .split-grid__media, regardless of source order. */ .split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: center; } @media (max-width: 860px) { .split-grid { grid-template-columns: 1fr; gap: var(--space-3); } .split-grid__media { order: -1; } } /* ============ Nav (dark pill-nav, matches Acree Brothers reference) ============ */ /* Always position:fixed — this is what stops it from ever disappearing on scroll (the earlier bug was position:absolute at rest, which scrolls away with the page). The background itself starts transparent over the first section's photo and switches to translucent/blurred once JS adds .is-scrolled after the user passes that first section — same toggle on every page (home hero or inner-page .page-hero), never a hard jump since position never changes, only background/backdrop-filter. */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; backdrop-filter: none; transition: background-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease; } .site-nav.is-scrolled { background: rgba(5, 14, 28, 0.78); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); } .site-nav__inner { max-width: var(--container-max); margin: 0 auto; padding: var(--space-2) var(--space-3); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); } .site-nav__logo { grid-column: 1; justify-self: start; } .site-nav__pill { grid-column: 2; justify-self: center; } .site-nav__actions { grid-column: 3; justify-self: end; } .site-nav__logo { display: flex; align-items: center; } .site-nav__logo img { display: block; height: 44px; width: auto; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45)); } .site-nav__pill { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-pill); padding: 0.25rem 0.5rem; } .site-nav__links { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; font-weight: 600; color: var(--color-text-muted-on-navy); } .site-nav__links > li { position: relative; } .site-nav__links > li > a, .site-nav__links > li > button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; padding: 0.5rem 0.75rem; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 0.25rem; transition: background 0.2s ease, color 0.2s ease; } .site-nav__links a:hover, .site-nav__links button:hover { color: #fff; background: rgba(255, 255, 255, 0.1); } .site-nav__chevron { width: 13px; height: 13px; opacity: 0.7; } .site-nav__cta { background: #fff; color: #081a30; font-weight: 700; font-size: 0.8125rem; padding: 0.625rem 1.25rem; border-radius: var(--radius-pill); white-space: nowrap; transition: transform 0.2s ease, box-shadow 0.2s ease; } .site-nav__cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); } .site-nav__links { display: none; } @media (min-width: 900px) { .site-nav__links { display: flex; } } .site-nav__toggle { display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--color-text-on-navy); cursor: pointer; padding: 0.25rem; } .site-nav__toggle .icon { width: 22px; height: 22px; } @media (min-width: 900px) { .site-nav__toggle { display: none; } } /* ============ Nav actions: language + theme toggle ============ */ .site-nav__actions { display: flex; align-items: center; gap: 0.5rem; } .site-nav__icon-btn { display: flex; align-items: center; gap: 0.3rem; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--color-text-on-navy); border-radius: var(--radius-pill); width: 38px; height: 38px; justify-content: center; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .site-nav__icon-btn:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-1px); } .site-nav__icon-btn .icon { width: 17px; height: 17px; } .site-nav__lang { position: relative; } .site-nav__lang .site-nav__icon-btn { width: auto; padding: 0 0.75rem; font-size: 0.75rem; font-weight: 700; } .lang-menu { display: none; position: absolute; top: calc(100% + 10px); right: 0; min-width: 180px; background: var(--color-bg-navy-2); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4); padding: 0.375rem; } .lang-menu.is-open { display: block; } .lang-menu button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--color-text-on-navy); font-size: 0.875rem; font-weight: 600; padding: 0.625rem 0.75rem; border-radius: 8px; cursor: pointer; } .lang-menu button:hover { background: rgba(255, 255, 255, 0.08); } /* ============ Mega menu — dark 2-column grid, matches reference ============ */ .mega-menu { display: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: 460px; background: var(--color-bg-navy-2); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4); padding: var(--space-2); grid-template-columns: 1fr 1fr; gap: 0.25rem; } .site-nav__item.is-open .mega-menu { display: grid; } .mega-menu a { display: block; padding: 0.75rem 0.875rem; border-radius: 10px; transition: background 0.2s ease; } .mega-menu a:hover { background: rgba(255, 255, 255, 0.07); } .mega-menu a strong { display: block; font-size: 0.875rem; font-weight: 700; color: var(--color-text-on-navy); margin-bottom: 0.15rem; } .mega-menu a span { display: block; font-size: 0.75rem; font-weight: 400; color: var(--color-text-muted-on-navy); } /* ============ Mobile nav dropdown ============ Below 900px, JS toggles .is-mobile-open on .site-nav__pill. Must be declared after the base .mega-menu rules above (same specificity, CSS resolves ties by source order — declaring this earlier let the later base rule win even inside the media query). Uses position:fixed rather than absolute so left/right resolve against the real viewport regardless of the grid-item containing-block quirks that made an earlier absolute-positioned attempt render at ~160px wide instead of full width — verified via computed getBoundingClientRect after the fix. */ @media (max-width: 899px) { .site-nav__links { display: flex; } .site-nav__pill { max-width: 0; max-height: 0; overflow: hidden; padding: 0; border: none; background: transparent; } .site-nav__pill.is-mobile-open { position: fixed; justify-self: stretch; top: 68px; left: 0; right: 0; max-width: none; background: var(--color-bg-navy); border: none; border-top: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0; padding: var(--space-2) var(--space-3) var(--space-3); max-height: calc(100vh - 68px); overflow-y: auto; } .site-nav__links { flex-direction: column; align-items: stretch; gap: 0.125rem; font-size: 0.9375rem; } .site-nav__links > li > a, .site-nav__links > li > button { width: 100%; justify-content: space-between; padding: 0.875rem 0.75rem; } .mega-menu { display: none; position: static; transform: none; width: 100%; grid-template-columns: 1fr; box-shadow: none; border: none; background: rgba(255, 255, 255, 0.03); margin-bottom: 0.25rem; } .site-nav__item.is-open .mega-menu { display: grid; } } /* ============ Hero (dark navy overlay — the one dark section on an otherwise light page) ============ */ .hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; padding: 6rem 0; background: var(--color-hero-dark); color: var(--color-text-on-navy); } .hero__content-centered { position: relative; z-index: 1; max-width: 800px; text-align: center; padding: 0 var(--space-3); } .hero__content-centered .badge { justify-content: center; } .hero__title-centered { color: var(--color-text-on-navy); font-size: clamp(2.5rem, 5.5vw, 4.25rem); line-height: 1.1; margin: var(--space-2) 0; } .hero__content-centered .hero__lede { max-width: 56ch; margin: 0 auto var(--space-3); font-size: 1.125rem; color: var(--color-text-muted-on-navy); } .hero__content-centered .hero__cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* Fades to the next section's actual background color (light or dark theme) so the hero blends into it instead of cutting off hard. */ .hero__fade { position: absolute; left: 0; right: 0; bottom: -1px; height: 120px; background: linear-gradient(0deg, var(--color-bg) 0%, transparent 100%); pointer-events: none; } .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; } /* Single seamless dark wash — no gray/blotchy radial patch, just one even tone that reads as pure dark at the edges and eases up in the middle so the photo still comes through behind the headline. */ .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,5,10,0.82) 0%, rgba(3,5,10,0.4) 32%, rgba(3,5,10,0.5) 65%, rgba(3,5,10,0.92) 100%); } /* Soft pulsing glow behind the giant headline — a little energy/motion without disrupting the Acree-matching layout underneath it. */ .hero__glow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; border-radius: 50%; background: radial-gradient(circle, rgba(31, 111, 232, 0.18), transparent 68%); filter: blur(60px); z-index: 0; pointer-events: none; animation: heroGlowPulse 6s ease-in-out infinite; } @keyframes heroGlowPulse { 0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } } /* Giant headline block — eyebrow top-left, headline bleeding off both edges, tuck line bottom-right, exactly matching the Acree Brothers reference. */ .hero__headline-block { position: relative; z-index: 1; width: 100%; overflow: hidden; padding-left: var(--space-3); } .hero__eyebrow-top { text-transform: uppercase; letter-spacing: 0.12em; font-size: clamp(0.75rem, 1vw, 0.9375rem); font-weight: 700; color: var(--color-text-on-navy); margin-bottom: 0.2rem; } /* Shrink-wraps to the headline's own rendered width (not the full section width), so the tuck line below can right-align to exactly where the headline text ends instead of the far edge of the page. */ .hero__title-wrap { display: inline-block; max-width: 100%; } [data-hero-reveal] { opacity: 0; transform: translateY(14px); animation: heroRevealUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards; } @keyframes heroRevealUp { to { opacity: 1; transform: translateY(0); } } .hero__title--bleed { font-family: var(--font-display); font-weight: 800; color: var(--color-text-on-navy); font-size: clamp(3.5rem, 17vw, 20rem); line-height: 0.85; white-space: nowrap; margin: 0 0 0.2rem 0; } .hero__tuck { text-align: right; text-transform: uppercase; letter-spacing: 0.1em; font-size: clamp(0.8125rem, 1.1vw, 1rem); font-weight: 700; color: var(--color-text-on-navy); } .hero__lede { max-width: 46ch; font-size: 1.0625rem; color: var(--color-text-muted-on-navy); margin: var(--space-3) auto 1rem; } .hero__cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: var(--space-2); } /* ============ Inner-page hero (photo bg, semi-bold heading, blur-fade bottom) — same treatment as the home hero, reused on every other page matching how Acree Brothers' own inner pages work. ============ */ .page-hero { position: relative; min-height: 75vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--color-hero-dark); color: var(--color-text-on-navy); padding: 8rem 0 5rem; } .page-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; } .page-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(8,13,26,0.4) 0%, rgba(7,11,22,0.62) 75%, rgba(7,11,22,0.78) 100%), linear-gradient(0deg, rgba(7,11,22,0.55) 0%, rgba(7,11,22,0.12) 55%, rgba(7,11,22,0.2) 100%); } .page-hero__content { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; text-align: center; } .page-hero__content .badge { justify-content: center; } .page-hero__content h1 { color: var(--color-text-on-navy); } .page-hero__content p { color: var(--color-text-muted-on-navy); } .page-hero__fade { position: absolute; left: 0; right: 0; bottom: -1px; height: 220px; background: linear-gradient(0deg, var(--color-bg) 0%, transparent 100%); pointer-events: none; } /* ============ Section spacing ============ */ .section { padding: var(--space-6) 0; } .section--alt { background: var(--color-bg-alt); } .section-heading { text-align: center; max-width: 640px; margin: 0 auto var(--space-4); } /* ============ Prospect funnel (careers.html "Join Centric") ============ Multi-step qualifying quiz replacing a static application form — one question per screen, single-select auto-advances, progress bar, ends on a contact-capture step then a Calendly booking CTA. */ .funnel-hero { position: relative; background: var(--color-bg-navy); color: var(--color-text-on-navy); padding: 7rem 0 5rem; overflow: hidden; } .prospect-funnel { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 20px; padding: 2.5rem; backdrop-filter: blur(12px); text-align: center; } @media (max-width: 640px) { .prospect-funnel { padding: 1.75rem 1.25rem; border-radius: 16px; } } .funnel-progress { margin-bottom: 1.75rem; } .funnel-progress__bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; } .funnel-progress__fill { height: 100%; background: var(--color-accent-gradient); border-radius: 4px; width: 0%; transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .funnel-progress__label { display: block; margin-top: 0.625rem; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted-on-navy); } .funnel-step { display: none; } .funnel-step.is-active { display: block; animation: funnel-step-in 0.35s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes funnel-step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .funnel-step.is-active { animation: none; } } .funnel-step h1 { color: var(--color-text-on-navy); font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 1rem 0 0.75rem; } .funnel-step h2 { color: var(--color-text-on-navy); font-size: 1.375rem; margin-bottom: 1.5rem; } .funnel-step__sub { color: var(--color-text-muted-on-navy); margin-bottom: 1.75rem; } .funnel-options { display: flex; flex-direction: column; gap: 0.75rem; } .funnel-option { display: block; width: 100%; text-align: left; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--color-text-on-navy); font: inherit; font-weight: 600; padding: 0.9rem 1.25rem; border-radius: 12px; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .funnel-option:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); transform: translateY(-1px); } .funnel-option.is-selected { background: var(--color-accent-gradient); border-color: transparent; color: #fff; } .funnel-contact-form { text-align: left; } .funnel-contact-form .field { margin-bottom: 1.1rem; } .funnel-contact-form label { display: block; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted-on-navy); margin-bottom: 0.4rem; } .funnel-contact-form input { width: 100%; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px; padding: 0.75rem 0.9rem; color: var(--color-text-on-navy); font: inherit; } .funnel-contact-form .btn { width: 100%; justify-content: center; margin-top: 0.5rem; } .funnel-final__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--color-accent-gradient); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: #fff; } .funnel-final__icon .icon { width: 28px; height: 28px; } .funnel-back { display: inline-flex; align-items: center; gap: 0.375rem; background: none; border: none; color: var(--color-text-muted-on-navy); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; margin-top: 1.5rem; } .funnel-back:hover { color: var(--color-text-on-navy); } .funnel-back[hidden] { display: none; } /* ============ Booking page (book-a-call.html) ============ Landing spot after the prospect funnel's contact step — dark hero intro with a staggered load-in, then a real Calendly embed inside a white card so it reads as a deliberate "next step" screen, not a dead end. */ /* One screen, no double scroll: nav + a compact intro strip + the Calendly embed filling every remaining pixel of the viewport. The embed's own internal time-slot scrolling is the only scroll on this page. */ .book-hero { position: relative; background: var(--color-bg-navy); color: var(--color-text-on-navy); padding: 5rem 0 0.75rem; overflow: hidden; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } .book-hero .container { display: flex; flex-direction: column; flex: 1; min-height: 0; } .book-hero__intro { position: relative; z-index: 1; max-width: 640px; margin: 0 auto 0.6rem; text-align: center; flex: none; } .book-hero__intro .funnel-final__icon { width: 36px; height: 36px; margin-bottom: 0.6rem; animation: book-icon-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both; } .book-hero__intro .funnel-final__icon .icon { width: 18px; height: 18px; } @keyframes book-icon-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } .book-hero__intro .badge { justify-content: center; margin-bottom: 0.4rem; } .book-hero__intro h1 { color: var(--color-text-on-navy); font-size: clamp(1.3rem, 2.4vw, 1.75rem); margin-bottom: 0.25rem; } .book-hero__sub { color: var(--color-text-muted-on-navy); font-size: 0.9rem; max-width: 52ch; margin: 0 auto; } .book-embed-card { position: relative; z-index: 1; max-width: 820px; width: 100%; margin: 0 auto; background: #fff; border-radius: 20px; padding: 0.5rem; box-shadow: 0 32px 64px rgba(0, 0, 0, 0.35); flex: 1; min-height: 420px; display: flex; } .book-embed-card .calendly-inline-widget { border-radius: 16px; overflow: hidden; width: 100%; flex: 1; } @media (prefers-reduced-motion: reduce) { .book-hero__intro .funnel-final__icon { animation: none; } } @media (max-width: 640px) { .book-hero { padding: 4.5rem 0 1rem; } .book-embed-card { padding: 0.25rem; border-radius: 14px; min-height: 520px; } } /* ============ FAQ card (community pages) ============ Lives inside the same sticky-sidebar column as .quick-facts (see .community-layout on the community pages) instead of its own full-width section, so the Quick Facts card stays in view next to the FAQ as the page scrolls, matching the reference layout. */ .faq-card { background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); } .faq-card h2 { margin: 0.5rem 0 0.25rem; } .faq-card .faq-item:last-child { border-bottom: none; padding-bottom: 0; } .faq-card .faq-item:first-of-type { padding-top: 0.25rem; } /* ============ Icon specialty cards ============ */ .icon-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-3); } /* ============ Card carousel — 3-per-view, translucent glass cards. Same scroll-snap mechanics as .team-carousel, sized for text-heavy content instead of photo cards. ============ */ .card-carousel { position: relative; } .card-carousel__track { display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0.25rem 0.25rem 0.75rem; -ms-overflow-style: none; scrollbar-width: none; } .card-carousel__track::-webkit-scrollbar { display: none; } .card-carousel__item { flex: 0 0 calc(33.333% - (var(--space-3) * 2 / 3)); scroll-snap-align: start; min-width: 260px; } @media (max-width: 900px) { .card-carousel__item { flex-basis: calc(50% - (var(--space-3) / 2)); } } @media (max-width: 560px) { .card-carousel__item { flex-basis: 84%; } } .card-carousel__nav { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-2); } .card-carousel__nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-card-bg); color: var(--color-text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s ease, transform 0.2s ease; } .card-carousel__nav button:hover { border-color: var(--color-accent-2); color: var(--color-accent-2); transform: translateY(-2px); } /* Translucent glass variant of .icon-card */ .icon-card--glass { background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 8px 32px rgba(8, 26, 48, 0.08); height: 100%; } html[data-theme='dark'] .icon-card--glass { background: rgba(20, 30, 48, 0.45); border-color: rgba(255, 255, 255, 0.12); } .icon-card--glass:hover { box-shadow: 0 28px 48px rgba(8, 26, 48, 0.18); } /* ============ Move cards (Buyer/Seller consultation, "Ready to Make Your Move") — translucent glass cards with a topical photo tucked into the bottom corner, bleeding past the edge. ============ */ .move-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .move-card { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius); padding: var(--space-3); background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 8px 32px rgba(8, 26, 48, 0.08); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease; } html[data-theme='dark'] .move-card { background: rgba(20, 30, 48, 0.45); border-color: rgba(255, 255, 255, 0.12); } .move-card:hover { transform: translateY(-8px); box-shadow: 0 28px 48px rgba(8, 26, 48, 0.18); } .move-card__content { position: relative; z-index: 2; max-width: 68%; } .move-card__content h3 { margin-bottom: 0.5rem; } .move-card__content p { margin-bottom: 1.25rem; } .move-card__art { position: absolute; right: -18px; bottom: -18px; width: 42%; max-width: 160px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 18px; z-index: 1; opacity: 0.92; box-shadow: 0 24px 44px -14px rgba(8, 26, 48, 0.45); transform: rotate(-4deg); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; } .move-card:hover .move-card__art { transform: rotate(0deg) scale(1.06); } @media (max-width: 520px) { .move-card__content { max-width: 100%; } .move-card__art { position: static; width: 100%; max-width: none; aspect-ratio: 16 / 9; margin-top: 1.25rem; transform: none; box-shadow: none; } .move-card:hover .move-card__art { transform: none; } } .icon-card { background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); text-align: center; display: flex; flex-direction: column; align-items: center; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease; } .icon-card:hover { transform: translateY(-8px); box-shadow: 0 28px 48px rgba(8, 26, 48, 0.16); border-color: transparent; } .icon-card__icon { width: 48px; height: 48px; border-radius: 12px; background-image: var(--color-accent-gradient); display: flex; align-items: center; justify-content: center; color: #fff; margin: 0 auto var(--space-2); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .icon-card:hover .icon-card__icon { transform: scale(1.12) rotate(-6deg); } .icon-card__icon--red { background-image: linear-gradient(135deg, var(--color-red), #e8756c); } .icon-card h3 { margin-bottom: 0.5rem; } .icon-card p { text-align: center; } /* ============ Search bar ============ */ .search-bar { display: flex; flex-wrap: wrap; gap: var(--space-1); background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: var(--space-1); box-shadow: 0 12px 32px rgba(8, 26, 48, 0.08); } .search-bar input { flex: 1; min-width: 200px; background: transparent; border: none; color: var(--color-text); font-size: 1rem; padding: 0.75rem 1.25rem; } .search-bar input:focus { outline: none; } /* ============ Listing cards ============ */ .listings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-3); } .listing-card { background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease; } .listing-card:hover { box-shadow: 0 20px 40px rgba(8, 26, 48, 0.12); transform: translateY(-2px); } .listing-card__media { position: relative; aspect-ratio: 4 / 3; } .listing-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .listing-card__badge { position: absolute; top: var(--space-1); left: var(--space-1); background: var(--color-red); color: #fff; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.25rem 0.625rem; border-radius: 6px; } .listing-card__body { padding: var(--space-2); } .listing-card__price { font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; color: var(--color-text); margin-bottom: 0.25rem; } .listing-card__address { font-size: 0.9375rem; color: var(--color-text); margin-bottom: 0.375rem; } .listing-card__meta { font-size: 0.8125rem; color: var(--color-text-muted); } /* ============ Showcase (single listing, full-bleed, dark like hero) ============ */ .showcase { position: relative; min-height: 70vh; display: flex; align-items: flex-end; overflow: hidden; } .showcase__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .showcase::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,14,28,0.9) 0%, rgba(5,14,28,0.05) 55%); } .showcase__content { position: relative; z-index: 1; width: 100%; padding: var(--space-4) var(--space-3); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; color: var(--color-text-on-navy); } .showcase__address { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.9375rem; margin-bottom: 0.25rem; } .showcase__price { font-family: var(--font-display); font-weight: 800; font-size: 2rem; background-image: var(--color-accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .showcase__controls { display: flex; align-items: center; gap: var(--space-2); } .showcase__controls button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border-on-navy); background: rgba(255,255,255,0.06); color: var(--color-text-on-navy); cursor: pointer; font-size: 1rem; } .showcase__controls button:hover { border-color: var(--color-accent-1); } .showcase__counter { font-size: 0.8125rem; color: var(--color-text-muted-on-navy); } /* ============ Testimonial carousel ============ */ .testimonial { max-width: 760px; margin: 0 auto; text-align: center; } .testimonial__quote { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.75rem); color: var(--color-text); line-height: 1.4; margin-bottom: var(--space-3); } .testimonial__author { display: flex; align-items: center; justify-content: center; gap: 0.75rem; font-size: 0.875rem; color: var(--color-text-muted); } .testimonial__author strong { color: var(--color-text); } .testimonial__nav { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); } .testimonial__nav button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-border); background: transparent; color: var(--color-text); cursor: pointer; } .testimonial__nav button:hover { border-color: var(--color-accent-2); color: var(--color-accent-2); } .testimonial__count { font-size: 0.8125rem; color: var(--color-text-muted); } /* ============ Tag pills (about section) ============ */ .tag-pill { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--color-bg-alt); color: var(--color-text); font-size: 0.8125rem; font-weight: 600; padding: 0.5rem 0.875rem; border-radius: var(--radius-pill); border: 1px solid var(--color-border); } .tag-pill--red { background: var(--color-red-bg); color: var(--color-red); } .tag-pill--on-navy { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); color: var(--color-text-on-navy); } .tag-pill--on-navy.tag-pill--red { background: rgba(214, 72, 63, 0.18); border-color: rgba(214, 72, 63, 0.35); color: #ff8f85; } .tag-pill .icon { width: 14px; height: 14px; } /* ============ Join Centric Family — dark banner CTA ============ */ .family-cta { position: relative; overflow: hidden; background: var(--color-bg-navy); color: var(--color-text-on-navy); padding: var(--space-6) 0; text-align: center; } .family-cta__glow { position: absolute; top: 50%; left: 50%; width: 900px; height: 900px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(31, 111, 232, 0.28) 0%, rgba(31, 111, 232, 0) 65%); pointer-events: none; } .family-cta__inner { position: relative; z-index: 1; max-width: 760px; } .family-cta__heading { color: var(--color-text-on-navy); margin-top: var(--space-2); } .family-cta__stat { display: flex; flex-direction: column; align-items: center; margin: var(--space-3) 0; } .family-cta__stat .stat-value { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1; background-image: var(--color-accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .family-cta__stat span:last-child { font-size: 0.875rem; font-weight: 600; color: var(--color-text-muted-on-navy); margin-top: 0.375rem; } .family-cta__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; } /* ============ Footer ============ */ .site-footer { border-top: 1px solid var(--color-border); padding: var(--space-5) 0 var(--space-3); font-size: 0.875rem; background: var(--color-bg); } .site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); } .site-footer__logo { height: 40px; width: auto; display: block; margin-bottom: 0.75rem; } .site-footer__grid h4 { font-family: var(--font-body); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); } .site-footer__grid ul { list-style: none; padding: 0; margin: 0; } .site-footer__grid li { margin-bottom: 0.5rem; } .site-footer__grid a:hover { color: var(--color-accent-2); } .site-footer__bottom { border-top: 1px solid var(--color-border); padding-top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; color: var(--color-text-muted); font-size: 0.8125rem; } /* ============ Lead-magnet popup (Six Figure Agent Guide) ============ */ .lead-popup { position: fixed; left: var(--space-2); bottom: var(--space-2); z-index: 55; width: 320px; max-width: calc(100vw - 2rem); display: flex; gap: 0.875rem; padding: 0.875rem; background: rgba(10, 15, 24, 0.72); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35); color: var(--color-text-on-navy); transform: translateY(24px); opacity: 0; pointer-events: none; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease; } .lead-popup.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; } .lead-popup__thumb { flex: none; width: 56px; height: 56px; border-radius: 10px; background-image: var(--color-accent-gradient); display: flex; align-items: center; justify-content: center; } .lead-popup__thumb .icon { width: 26px; height: 26px; color: #fff; } .lead-popup__label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.625rem; font-weight: 700; color: var(--color-accent-1); margin-bottom: 0.125rem; } .lead-popup__title { font-family: var(--font-display); font-weight: 800; font-size: 0.9375rem; margin-bottom: 0.2rem; } .lead-popup__desc { font-size: 0.75rem; color: var(--color-text-muted-on-navy); line-height: 1.4; margin-bottom: 0.375rem; } .lead-popup__cta { font-size: 0.8125rem; font-weight: 700; color: var(--color-accent-1); } .lead-popup__cta:hover { color: var(--color-accent-2); } .lead-popup__close { position: absolute; top: 0.5rem; right: 0.5rem; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.1); color: var(--color-text-on-navy); display: flex; align-items: center; justify-content: center; cursor: pointer; } .lead-popup__close .icon { width: 11px; height: 11px; } .lead-popup__close:hover { background: rgba(255, 255, 255, 0.2); } @media (max-width: 480px) { .lead-popup { left: var(--space-1); bottom: var(--space-1); width: calc(100vw - 1.5rem); } } /* ============ Chat widget ============ */ /* ============ Social links ============ */ .social-links { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } .social-links a { width: 52px; height: 52px; border-radius: 50%; background: var(--color-card-bg); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; color: var(--color-text); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .social-links a:hover { background-image: var(--color-accent-gradient); border-color: transparent; color: #fff; transform: translateY(-4px) scale(1.08); } .social-links .icon { width: 20px; height: 20px; } .chat-widget { position: fixed; bottom: var(--space-2); right: var(--space-2); z-index: 60; } .chat-widget__bubble { width: 60px; height: 60px; border-radius: 50%; background-image: var(--color-accent-gradient); border: none; cursor: pointer; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(31, 111, 232, 0.4); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .chat-widget__bubble:hover { transform: scale(1.08); } .chat-widget__bubble .icon { width: 24px; height: 24px; } .chat-widget__panel { display: none; position: absolute; bottom: 72px; right: 0; width: 300px; background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-2); box-shadow: 0 20px 48px rgba(8, 26, 48, 0.18); } .chat-widget__panel.is-open { display: block; } .chat-widget__panel h4 { margin-bottom: var(--space-1); font-size: 1rem; } .chat-widget__options { display: flex; flex-direction: column; gap: 0.5rem; } .chat-widget__options button { text-align: left; background: var(--color-bg-alt); border: 1px solid var(--color-border); color: var(--color-text); padding: 0.625rem 0.875rem; border-radius: 10px; font-size: 0.875rem; cursor: pointer; } .chat-widget__options button:hover { border-color: var(--color-accent-2); } /* ============ Placeholder visual (used where no real photography exists yet) ============ */ .visual-placeholder { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius); background: linear-gradient(135deg, var(--color-bg-navy-2), var(--color-accent-2) 150%); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.5rem; color: #fff; position: relative; overflow: hidden; } .visual-placeholder::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.14), transparent 42%); } .visual-placeholder__icon { font-size: 3rem; opacity: 0.85; position: relative; } .visual-placeholder__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.75; position: relative; text-align: center; padding: 0 1.5rem; } /* ============ Let's Talk contact panel (dark gradient card w/ glass form) ============ */ .talk-panel { background: linear-gradient(135deg, var(--color-bg-navy), var(--color-bg-navy-2)); border-radius: 24px; padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); color: var(--color-text-on-navy); position: relative; overflow: hidden; } .talk-panel::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(ellipse 520px 320px at 90% -10%, rgba(111, 177, 255, 0.22), transparent 60%); pointer-events: none; } .talk-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); position: relative; } @media (min-width: 940px) { .talk-grid { grid-template-columns: 0.9fr 1.1fr; } } .talk-info h2 { color: #fff; margin: 0.75rem 0 1rem; } .talk-info > p { color: var(--color-text-muted-on-navy); margin-bottom: 1.75rem; } .talk-methods { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; } .talk-method { display: flex; align-items: center; gap: 0.875rem; } .talk-method .icon-wrap { width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-accent-1); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .talk-method .icon-wrap .icon { width: 19px; height: 19px; } .talk-method:hover .icon-wrap { transform: scale(1.12) rotate(-6deg); } .talk-method span { display: block; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted-on-navy); margin-bottom: 0.125rem; } .talk-method strong { font-size: 0.9375rem; font-weight: 600; } .talk-form { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 18px; padding: 1.75rem; backdrop-filter: blur(6px); } .talk-form .form-row { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; } @media (min-width: 560px) { .talk-form .form-row.two { grid-template-columns: 1fr 1fr; } } .talk-form .field label { display: block; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted-on-navy); margin-bottom: 0.5rem; font-weight: 600; } .talk-form .field input, .talk-form .field select, .talk-form .field textarea { width: 100%; padding: 0.8rem 0.9rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); color: #fff; font-family: var(--font-body); font-size: 0.9375rem; } .talk-form .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7c6e0' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 2.25rem; cursor: pointer; } .talk-form .field select option { color: #081a30; } .talk-form .field input::placeholder, .talk-form .field textarea::placeholder { color: rgba(255, 255, 255, 0.4); } .talk-form .field input:focus, .talk-form .field select:focus, .talk-form .field textarea:focus { outline: none; border-color: var(--color-accent-1); background: rgba(255, 255, 255, 0.1); } .talk-form .field textarea { resize: vertical; min-height: 100px; } .talk-form .form-note { font-size: 0.75rem; color: var(--color-text-muted-on-navy); margin-top: 0.875rem; text-align: center; } /* ============ Calendly section (contact.html) ============ */ .calendly-embed { border-radius: 20px; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-bg-alt); } .calendly-placeholder { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.9rem; padding: 3.5rem 2rem; border: 1.5px dashed rgba(31, 111, 232, 0.35); border-radius: 20px; background: rgba(31, 111, 232, 0.05); } .calendly-placeholder .icon-wrap { width: 56px; height: 56px; border-radius: 14px; background: var(--color-card-bg); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; color: var(--color-accent-2); box-shadow: 0 8px 20px rgba(11, 25, 48, 0.08); } .calendly-placeholder .icon-wrap .icon { width: 26px; height: 26px; } .calendly-placeholder h3 { margin-bottom: 0; } .calendly-placeholder p { max-width: 42ch; margin-bottom: 0; } /* ============ Scroll reveal (subtle — short travel, gentle easing, staggered) ============ */ [data-reveal] { opacity: 0; transform: translateY(14px); } [data-reveal].is-revealed { opacity: 1; transform: translateY(0); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0s); } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ============ Careers page: mobile full-screen funnel ============ The qualifying form is the entire point of the page on a phone — let it own the viewport instead of competing with scroll-cut hero chrome. */ @media (max-width: 640px) { .funnel-hero { min-height: 100dvh; display: flex; align-items: center; padding: 5.5rem 0 2rem; } .prospect-funnel { width: 100%; } } /* ============ Careers page: perks + testimonials — richer color, depth, and motion than the rest of the site's subtle default. Scoped to these two sections via .careers-vivid so nothing elsewhere shifts. ============ */ .careers-vivid { position: relative; overflow: hidden; } .careers-vivid__blob { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; animation: careersBlobDrift 22s ease-in-out infinite alternate; } .careers-vivid__blob--blue { width: 34vw; height: 34vw; top: -10vw; left: -8vw; background: radial-gradient(circle, rgba(31,111,232,0.5), transparent 70%); opacity: 0.55; } .careers-vivid__blob--red { width: 26vw; height: 26vw; bottom: -8vw; right: -6vw; background: radial-gradient(circle, rgba(214,72,63,0.45), transparent 70%); opacity: 0.5; animation-delay: -9s; } html[data-theme='dark'] .careers-vivid__blob { opacity: 0.35; } @keyframes careersBlobDrift { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(5%, 4%) scale(1.1); } 100% { transform: translate(-4%, -3%) scale(0.96); } } @media (prefers-reduced-motion: reduce) { .careers-vivid__blob { animation: none; } } .careers-vivid > .container { position: relative; z-index: 1; } /* Punchier perk-card entrance: pop + slight rotate instead of a flat fade, still driven by the existing --reveal-delay stagger var. */ .icon-card--vivid[data-reveal] { transform: translateY(28px) scale(0.88) rotate(-2deg); } .icon-card--vivid[data-reveal].is-revealed { transform: none; } .icon-card--vivid { border-width: 1px; background: linear-gradient(160deg, var(--color-card-bg), var(--color-card-bg)) padding-box, linear-gradient(135deg, rgba(31,111,232,0.5), rgba(214,72,63,0.4)) border-box; border: 1px solid transparent; } .icon-card--vivid:hover { transform: translateY(-10px) scale(1.02); } .icon-card--vivid .icon-card__icon { box-shadow: 0 10px 26px -8px rgba(31,111,232,0.55); } .icon-card--vivid .icon-card__icon--red { box-shadow: 0 10px 26px -8px rgba(214,72,63,0.5); } /* ============ Join Centric — full-screen hero ============ */ .join-hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: 7rem 0 5rem; background: var(--color-hero-dark); color: var(--color-text-on-navy); } .join-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 38%, rgba(31,111,232,0.12), transparent 62%); } .join-hero__glow { position: absolute; left: 50%; top: 46%; width: 52vw; height: 52vw; max-width: 720px; max-height: 720px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(31,111,232,0.2), transparent 68%); filter: blur(60px); animation: heroGlowPulse 6s ease-in-out infinite; pointer-events: none; z-index: 0; } /* Simple grayish glass card holding the intro — no photo behind the hero. */ .join-hero__content.join-hero__card { position: relative; z-index: 1; width: min(520px, 100%); margin: 0 auto; padding: 2.75rem 2.5rem; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 22px; backdrop-filter: blur(8px); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.6); } @media (max-width: 560px) { .join-hero__content.join-hero__card { padding: 2.25rem 1.5rem; } } .join-hero__content .badge { justify-content: center; } .join-hero__content h1 { color: var(--color-text-on-navy); font-size: clamp(1.75rem, 3.5vw, 2.25rem); line-height: 1.15; margin: 1.1rem 0 0.6rem; } .join-hero__content p { color: var(--color-text-muted-on-navy); font-size: 1rem; line-height: 1.55; max-width: 42ch; margin: 0 auto 1.75rem; } .join-hero__cta { font-size: 1rem; padding: 0.85rem 1.9rem; } /* ============ Join Centric — full-screen overlay funnel (Alexandra pattern) ============ */ .join-funnel { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; background: var(--color-hero-dark); color: var(--color-text-on-navy); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .join-funnel.is-open { opacity: 1; pointer-events: auto; } .join-funnel__bar { height: 4px; background: rgba(255,255,255,0.1); flex: none; } .join-funnel__bar-fill { height: 100%; width: 0; background: var(--color-accent-gradient); border-radius: 0 4px 4px 0; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .join-funnel__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.1); flex: none; } .join-funnel__brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; } .join-funnel__brand img { height: 26px; width: auto; display: block; } .join-funnel__close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: var(--color-text-on-navy); font-size: 1.1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.2s ease, border-color 0.2s ease; } .join-funnel__close:hover { transform: rotate(90deg); border-color: var(--color-red); } .join-funnel__scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 2rem 1.5rem; } /* The active question sits in the exact same grayish glass card as the Join Centric hero — same background, border, radius, padding, width. */ .join-funnel__stage { position: relative; width: min(520px, 100%); margin: auto; padding: 2.75rem 2.5rem; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 22px; backdrop-filter: blur(8px); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.6); } @media (max-width: 560px) { .join-funnel__stage { padding: 2.25rem 1.5rem; } } /* Wide calendar step needs room to breathe. */ .join-funnel__stage:has(.join-step[data-step="calendar"].is-active) { width: min(760px, 100%); } .join-step { position: absolute; inset: 2.75rem 2.5rem; height: 0; overflow: hidden; opacity: 0; transform: translateX(24px); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; } .join-step.is-active { position: relative; inset: auto; height: auto; overflow: visible; opacity: 1; transform: none; pointer-events: auto; } .join-step.is-past { opacity: 0; transform: translateX(-24px); } .join-step__eyebrow { display: block; text-align: center; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--color-text-muted-on-navy); margin-bottom: 0.65rem; } .join-step h1, .join-step h2 { color: var(--color-text-on-navy); text-align: center; font-size: clamp(1.4rem, 3vw, 1.75rem); line-height: 1.2; margin-bottom: 1.25rem; } .join-step__sub { text-align: center; color: var(--color-text-muted-on-navy); font-size: 0.95rem; max-width: 44ch; margin: -0.5rem auto 1.5rem; } .join-step__options { display: flex; flex-direction: column; gap: 0.75rem; } .join-opt { display: block; width: 100%; text-align: left; padding: 0.9rem 1.25rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: var(--color-text-on-navy); font: inherit; font-weight: 600; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .join-opt__dot { display: none; } .join-opt:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); transform: translateY(-1px); } .join-opt.is-selected { border-color: transparent; background: var(--color-accent-gradient); color: #fff; } .join-funnel__fields { display: flex; flex-direction: column; gap: 1rem; text-align: left; } .join-funnel__field-row { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 520px) { .join-funnel__field-row { grid-template-columns: 1fr 1fr; } } .join-funnel__fields label { display: block; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted-on-navy); margin-bottom: 0.4rem; } .join-funnel__fields input { width: 100%; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); border-radius: 10px; padding: 0.8rem 0.95rem; color: var(--color-text-on-navy); font: inherit; } .join-funnel__fields input:focus { outline: none; border-color: var(--color-accent-1); } .join-funnel__fields .btn { width: 100%; justify-content: center; margin-top: 0.4rem; } .join-funnel__err { display: none; color: #ff8f85; font-size: 0.85rem; margin-top: -0.2rem; } .join-funnel__err.is-shown { display: block; } .join-funnel__cal { border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; overflow: hidden; background: #fff; height: min(64vh, 620px); } .join-funnel__cal iframe { width: 100%; height: 100%; border: 0; display: block; } .join-funnel__foot { flex: none; border-top: 1px solid rgba(255,255,255,0.1); padding: 0.9rem 1.5rem; } .join-funnel__foot-inner { width: min(520px, 100%); margin: 0 auto; } .join-funnel__back { background: none; border: none; color: var(--color-text-muted-on-navy); font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0; } .join-funnel__back:hover { color: var(--color-text-on-navy); } .join-funnel__back[hidden] { visibility: hidden; } .join-step.is-active .join-stagger > * { opacity: 0; transform: translateY(14px); animation: joinUp 0.5s ease forwards; } .join-step.is-active .join-stagger > *:nth-child(1) { animation-delay: 0.08s; } .join-step.is-active .join-stagger > *:nth-child(2) { animation-delay: 0.14s; } .join-step.is-active .join-stagger > *:nth-child(3) { animation-delay: 0.20s; } .join-step.is-active .join-stagger > *:nth-child(4) { animation-delay: 0.26s; } .join-step.is-active .join-stagger > *:nth-child(5) { animation-delay: 0.32s; } .join-step.is-active .join-stagger > *:nth-child(6) { animation-delay: 0.38s; } @keyframes joinUp { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .join-funnel, .join-step { transition: opacity 0.2s ease; } .join-step, .join-step.is-past { transform: none; } .join-step.is-active .join-stagger > * { animation: none; opacity: 1; transform: none; } } /* ============ Why Agents Choose Centric — coverflow carousel ============ Apple-Music-style: the centre card is large and detailed, the flanking cards shrink, rotate away, and dim. Click any side card to bring it to the centre. Every card animates with the exact same transition, so the motion is identical whichever one you pick. */ .perk-flow { position: relative; margin-top: var(--space-4); height: 500px; perspective: 1600px; } @media (max-width: 720px) { .perk-flow { height: 440px; } } .perk-flow__stage { position: absolute; inset: 0; transform-style: preserve-3d; } .perk-card { position: absolute; top: 50%; left: 50%; width: 340px; height: 460px; margin: -230px 0 0 -170px; border-radius: 22px; overflow: hidden; isolation: isolate; color: #fff; cursor: pointer; box-shadow: 0 30px 60px -30px rgba(8, 26, 48, 0.55); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease, box-shadow 0.6s ease, filter 0.6s ease; will-change: transform, opacity; } @media (max-width: 720px) { .perk-card { width: 280px; height: 400px; margin: -200px 0 0 -140px; } } /* Position slots — set by JS via data-pos = signed offset from centre */ .perk-card[data-pos="0"] { transform: translateX(0) scale(1) rotateY(0deg); opacity: 1; z-index: 5; } .perk-card[data-pos="1"] { transform: translateX(56%) scale(0.8) rotateY(-24deg); opacity: 0.7; z-index: 4; filter: brightness(0.7); } .perk-card[data-pos="-1"] { transform: translateX(-56%) scale(0.8) rotateY(24deg); opacity: 0.7; z-index: 4; filter: brightness(0.7); } .perk-card[data-pos="2"] { transform: translateX(104%) scale(0.62) rotateY(-30deg); opacity: 0.35; z-index: 3; filter: brightness(0.5); } .perk-card[data-pos="-2"] { transform: translateX(-104%) scale(0.62) rotateY(30deg); opacity: 0.35; z-index: 3; filter: brightness(0.5); } .perk-card[data-pos="hidden"] { transform: translateX(0) scale(0.4); opacity: 0; z-index: 1; pointer-events: none; } .perk-card[data-pos="0"] { cursor: default; } @media (prefers-reduced-motion: reduce) { .perk-card { transition: opacity 0.3s ease; } } .perk-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .perk-card[data-pos="0"] .perk-card__img { transform: scale(1.05); } .perk-card__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14,14,15,0.15) 0%, rgba(14,14,15,0.55) 50%, rgba(14,14,15,0.94) 100%); transition: background 0.6s ease; } .perk-card[data-pos="0"] .perk-card__scrim { background: linear-gradient(180deg, rgba(191,0,178,0.14) 0%, rgba(14,14,15,0.5) 45%, rgba(14,14,15,0.96) 100%); } .perk-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 1.5rem 1.7rem; } .perk-card__tag { display: inline-block; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--color-accent-1); margin-bottom: 0.5rem; } .perk-card__body h3 { color: #fff; font-size: 1.25rem; margin-bottom: 0.4rem; } .perk-card__body p { color: rgba(255, 255, 255, 0.85); font-size: 0.92rem; line-height: 1.55; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(8px); transition: max-height 0.6s ease, opacity 0.45s ease, transform 0.45s ease; } .perk-card[data-pos="0"] .perk-card__body p { max-height: 9rem; opacity: 1; transform: translateY(0); } .perk-flow__nav { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); } .perk-flow__nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-card-bg); color: var(--color-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .perk-flow__nav button:hover { border-color: var(--color-accent-2); color: var(--color-accent-2); transform: translateY(-2px); } .perk-flow__dots { display: flex; align-items: center; gap: 0.45rem; } .perk-flow__dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--color-border); transition: background 0.3s ease, transform 0.3s ease; } .perk-flow__dots span.is-active { background-image: var(--color-accent-gradient); transform: scale(1.4); } /* Testimonial: quote-glyph backdrop + avatar + crossfade between entries */ .testimonial-vivid { max-width: 720px; margin: 0 auto; position: relative; text-align: center; } .testimonial-vivid__card { position: relative; padding: 3rem 2.5rem 2.25rem; border-radius: 22px; background: var(--color-card-bg); border: 1px solid var(--color-border); box-shadow: 0 30px 60px -30px rgba(8,26,48,0.25); transition: opacity 0.35s ease, transform 0.35s ease; } .testimonial-vivid__card::before { content: '\201C'; position: absolute; top: -0.3em; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: 6rem; line-height: 1; font-weight: 800; background-image: var(--color-accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0.85; } .testimonial-vivid__card.is-switching { opacity: 0; transform: translateY(10px) scale(0.98); } .testimonial-vivid__avatar { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; background-image: var(--color-accent-gradient); color: #fff; font-weight: 700; font-size: 1.05rem; } .testimonial-vivid__nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-card-bg); color: var(--color-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .testimonial-vivid__nav button:hover { border-color: var(--color-accent-2); color: var(--color-accent-2); transform: translateY(-2px); } .testimonial-vivid__dots { display: flex; gap: 0.4rem; justify-content: center; } .testimonial-vivid__dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--color-border); transition: background 0.3s ease, transform 0.3s ease; } .testimonial-vivid__dots span.is-active { background-image: var(--color-accent-gradient); transform: scale(1.35); } /* ============ Subtle hover lift (shared by cards/links) ============ */ .icon-card, .listing-card, .tag-pill { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease; } .icon-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(8, 26, 48, 0.08); } .icon-card:hover .icon-card__icon .icon { transform: scale(1.15) rotate(-6deg); } .icon-card__icon .icon { width: 22px; height: 22px; } /* ============ Count-up stat ============ */ .stat-value { font-variant-numeric: tabular-nums; } /* ============ Team grid — fixed 3 columns x 2 rows ============ */ /* ============ Team carousel — 4 cards per view, matches Diana Luu's photo-fill hero-card style (photo fills the card, bottom gradient, name/role overlaid, not a separate body section below). ============ */ .team-carousel { position: relative; } .team-carousel__track { display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 0.5rem; -ms-overflow-style: none; scrollbar-width: none; } .team-carousel__track::-webkit-scrollbar { display: none; } .team-carousel__item { flex: 0 0 calc(25% - (var(--space-3) * 3 / 4)); scroll-snap-align: start; min-width: 220px; } @media (max-width: 1000px) { .team-carousel__item { flex-basis: calc(50% - (var(--space-3) / 2)); } } @media (max-width: 560px) { .team-carousel__item { flex-basis: 82%; } } .team-carousel__nav { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); } .team-carousel__nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-card-bg); color: var(--color-text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s ease, transform 0.2s ease; } .team-carousel__nav button:hover { border-color: var(--color-accent-2); color: var(--color-accent-2); transform: translateY(-2px); } /* ============ Team card (photo-fill, matches Diana's hero-card) ============ */ .team-card { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--color-bg-navy); box-shadow: 0 1px 2px rgba(8, 26, 48, 0.05); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease; } .team-card:hover { transform: translateY(-6px); box-shadow: 0 28px 48px rgba(8, 26, 48, 0.24); } .team-card__photo { position: absolute; inset: 0; } .team-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .team-card:hover .team-card__photo img { transform: scale(1.08); } .team-card__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,14,28,0.92) 0%, rgba(5,14,28,0.55) 35%, rgba(5,14,28,0.05) 65%); } .team-card__contact { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; display: flex; gap: 0.5rem; } .team-card__contact a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.32); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; color: #fff; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, border-color 0.2s ease; } .team-card__contact a .icon { width: 16px; height: 16px; } .team-card__contact a:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); transform: scale(1.12) rotate(-6deg); } .team-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.25rem; } .team-card__divider { width: 32px; height: 3px; border-radius: 2px; background-image: var(--color-accent-gradient); margin-bottom: 0.625rem; } .team-card__name { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: #fff; margin-bottom: 0.125rem; } .team-card__role { font-size: 0.6875rem; font-weight: 700; color: rgba(255,255,255,0.72); text-transform: uppercase; letter-spacing: 0.08em; }