/* ─── Design tokens ────────────────────────────────────────────────────────── Colors/fonts/spacing live in theme.css, NOT here. theme.css is loaded as its own , right before this file, in every page's — no @import (avoids the extra blocking request and any relative-path surprises when Expresia serves/bundles the CSS on export). CSS custom properties declared in one stylesheet's :root are visible to every other stylesheet loaded on the same page regardless of load order via separate tags, so var(--SAND) etc. below resolve fine as long as theme.css's is present — it doesn't need to be @imported into this file. */ /* Everything below sits in Tailwind's own "base" layer (declared by tailwind-generated.css as theme < base < components < utilities) instead of as unlayered CSS. Cascade layers give ANY layered rule — even a lone utility class — priority over ANY unlayered rule regardless of specificity or source order; left unlayered, this reset and every component rule below would silently beat every Tailwind class applied in the HTML (this is what broke the nav padding/logo sizing earlier — the fix isn't a specificity bump, it's putting this file in a layer so Tailwind's own layer order applies). */ @layer base { /* ─── Reset & Base ───────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: #fff; color: var(--DARK); line-height: 1.5; overflow-x: hidden; } img { display: block; max-width: 100%; } a { text-decoration: none; color: inherit; } button { border: none; background: none; cursor: pointer; font-family: inherit; } ul { list-style: none; } /* ─── Reveal Animation ───────────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); } .reveal.in-view { opacity: 1; transform: translateY(0); } .reveal[data-delay="1"] { transition-delay: 0.07s; } .reveal[data-delay="2"] { transition-delay: 0.14s; } .reveal[data-delay="3"] { transition-delay: 0.21s; } .reveal[data-delay="4"] { transition-delay: 0.28s; } .reveal[data-delay="5"] { transition-delay: 0.35s; } .reveal[data-delay="6"] { transition-delay: 0.42s; } /* ─── Site Header ────────────────────────────────────────────────────────── */ #site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; } /* Announcement Bar */ #announcement-bar { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-8) var(--space-64); background: var(--DARK); } @media (max-width: 767px) { #announcement-bar { display: none; } } #announcement-bar .left { font-family: var(--font-body); font-size: 12px; color: var(--on-dark-45); letter-spacing: 1px; } #announcement-bar .right { display: flex; align-items: center; gap: var(--space-8); } .pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--SAND); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(.85); } } #announcement-bar .right span { font-family: var(--font-body); font-size: 12px; color: var(--SAND); } /* Nav */ #main-nav { position: relative; z-index: 60; width: 100%; background: rgba(10,11,20,0.97); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.06); transition: background .3s, backdrop-filter .3s, border-color .3s; } #main-nav.transparent { background: rgba(10,11,20,0); backdrop-filter: none; border-bottom: 1px solid transparent; } /* .nav-inner/.nav-links/.nav-actions/.nav-hamburger layout (flex/gap/padding/ responsive show-hide) comes from Tailwind classes on the elements themselves, copied 1:1 from SharedNavBar.tsx's className strings — only non-layout properties stay here. */ .nav-logo { flex-shrink: 0; cursor: pointer; border: none; background: none; padding: 0; } .nav-logo img { height: 100%; width: auto; } .nav-links button, .nav-links a { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--on-dark-75); letter-spacing: .3px; display: flex; align-items: center; gap: var(--space-4); padding-bottom: 2px; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; white-space: nowrap; background: none; } .nav-links button:hover, .nav-links a:hover { color: #fff; } .nav-links button.active, .nav-links a.active { color: #fff; border-bottom-color: var(--SAND); } .nav-links .chevron { transition: transform .2s; flex-shrink: 0; } .nav-item:hover .chevron, .nav-item:focus-within .chevron { transform: rotate(180deg); } /* Nav bar goes solid the moment any dropdown is open, even before scrolling — a see-through bar over an opaque panel reads as disconnected. */ #main-nav.transparent:has(.nav-item:hover), #main-nav.transparent:has(.nav-item:focus-within) { background: rgba(10,11,20,0.97); backdrop-filter: blur(20px); border-bottom: 1px solid var(--on-dark-hairline); } .nav-phone { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-55); white-space: nowrap; } .btn-inspection { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: #fff; background: var(--B); padding: 10px var(--space-16); border: none; cursor: pointer; letter-spacing: .4px; white-space: nowrap; transition: opacity .2s; } .btn-inspection:hover { opacity: .85; } /* Hamburger */ .nav-hamburger { background: none; border: none; cursor: pointer; padding: 6px; } /* ─── Mobile menu — full-screen drill-in overlay, pure CSS ────────────────── Mirrors SharedNavBar.tsx's mobile panel system exactly: one radio group picks which top-level panel shows (root/services/problem-signs/our- difference/resources/about), a second radio group picks the Problem Signs category drill (list vs one category's signs), and a checkbox expands Careers inline. All hidden inputs live inside #main-nav; :has() lets any label/panel react to their state regardless of DOM nesting, so none of this needs JS — clicking a label just changes which input is checked. */ .nav-toggle-input, .mobile-panel-input, .ps-cat-input, .careers-expand-input, .mobile-expand-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* While the mobile menu is open, force the nav solid and drop its backdrop-filter — backdrop-filter on an ancestor makes it the containing block for position:fixed descendants, which would pin #mobile-menu/the backdrop to the (short) nav bar instead of the viewport. React sidesteps this the same way: isTransparent is forced false while mobileOpen. */ #main-nav:has(.nav-toggle-input:checked) { background: rgba(10,11,20,0.97); backdrop-filter: none; border-bottom: 1px solid var(--on-dark-hairline); } .mobile-backdrop { display: none; position: fixed; inset: 0; z-index: 240; background: rgba(0,0,0,.5); cursor: pointer; } #main-nav:has(.nav-toggle-input:checked) .mobile-backdrop { display: block; } #mobile-menu { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 250; flex-direction: column; max-height: 85dvh; overflow-y: auto; background: var(--DARK); } #main-nav:has(.nav-toggle-input:checked) #mobile-menu { display: flex; } .nav-hamburger .icon-close { display: none; } #main-nav:has(.nav-toggle-input:checked) .nav-hamburger .icon-open { display: none; } #main-nav:has(.nav-toggle-input:checked) .nav-hamburger .icon-close { display: block; } .mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-12) var(--space-32); border-bottom: 1px solid var(--on-dark-hairline); flex-shrink: 0; } .mobile-menu-logo { height: 56px; } .mobile-menu-logo img { height: 100%; width: auto; } .mobile-menu-close { display: flex; align-items: center; justify-content: center; padding: 6px; cursor: pointer; } .mobile-menu-body { flex: 1; display: flex; flex-direction: column; padding: var(--space-20) var(--space-32) var(--space-32); } .mobile-panel { display: none; flex-direction: column; flex: 1; } #main-nav:has(#panel-root:checked) .mobile-panel.root { display: flex; } #main-nav:has(#panel-services:checked) .mobile-panel.services { display: flex; } #main-nav:has(#panel-problem-signs:checked) .mobile-panel.problem-signs { display: flex; } #main-nav:has(#panel-our-difference:checked) .mobile-panel.our-difference { display: flex; } #main-nav:has(#panel-resources:checked) .mobile-panel.resources { display: flex; } #main-nav:has(#panel-about:checked) .mobile-panel.about { display: flex; } .mobile-menu-eyebrow { font-family: var(--font-heading); font-weight: 700; font-size: 11px; color: var(--SAND); letter-spacing: 4px; text-transform: uppercase; margin-bottom: 14px; } .mobile-root-list { display: flex; flex-direction: column; gap: var(--space-8); } .mobile-root-item { display: flex; align-items: center; justify-content: space-between; width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--on-dark-85); background: var(--on-dark-04); border: 1px solid var(--on-dark-hairline); border-radius: 4px; padding: 14px 18px; cursor: pointer; transition: background .15s; } .mobile-root-item:hover { background: var(--on-dark-06); } .mobile-root-item svg { flex-shrink: 0; } .mobile-root-footer { margin-top: auto; padding-top: var(--space-24); display: flex; flex-direction: column; align-items: center; gap: var(--space-12); } .mobile-phone { font-family: var(--font-body); font-size: 14px; color: var(--on-dark-60); } /* Back header + title (every drill-in sub-panel) */ .mobile-back { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-12) 0; cursor: pointer; align-self: flex-start; } .mobile-back span { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--on-dark-60); letter-spacing: .5px; text-transform: uppercase; } .mobile-panel-title { font-family: var(--font-heading); font-weight: 800; font-size: 24px; color: #fff; margin: 4px 0 20px; } .mobile-drill-list { display: flex; flex-direction: column; gap: var(--space-4); } .mobile-drill-item { display: flex; align-items: center; gap: var(--space-12); width: 100%; text-align: left; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: #fff; border-left: 2px solid var(--on-dark-10); padding: 12px; cursor: pointer; } .mobile-drill-item.indent { font-size: 13.5px; font-weight: 400; color: var(--on-dark-60); padding: 10px 12px 10px 30px; } .mobile-drill-item svg:last-child { margin-left: auto; flex-shrink: 0; } .mobile-drill-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; } .mobile-drill-icon img, .mobile-drill-icon svg { width: 100%; height: 100%; object-fit: contain; } .mobile-drill-icon img { filter: brightness(0) invert(1); } .mobile-goto { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--SAND); padding: 12px 0 0 12px; margin-top: 4px; display: inline-block; } /* Problem Signs — category list vs one category's symptom list */ .ps-cat-list { display: flex; flex-direction: column; flex: 1; } .ps-cat-detail { display: none; flex-direction: column; } #main-nav:has(.ps-cat-input:not(#ps-cat-none):checked) .ps-cat-list { display: none; } #main-nav:has(#ps-cat-structural:checked) .ps-cat-detail.structural { display: flex; } #main-nav:has(#ps-cat-crawl:checked) .ps-cat-detail.crawl { display: flex; } #main-nav:has(#ps-cat-waterproofing:checked) .ps-cat-detail.waterproofing { display: flex; } #main-nav:has(#ps-cat-concrete:checked) .ps-cat-detail.concrete { display: flex; } /* Careers expand/collapse inside the About panel */ .mobile-careers-row { display: flex; align-items: stretch; border-left: 2px solid var(--on-dark-10); } .mobile-careers-row .mobile-drill-item { border-left: none; flex: 1; } .mobile-careers-toggle { display: flex; align-items: center; justify-content: center; width: 40px; flex-shrink: 0; cursor: pointer; } .careers-chevron { transition: transform .2s ease; } #main-nav:has(.careers-expand-input:checked) .careers-chevron { transform: rotate(90deg); } .careers-sections { display: none; flex-direction: column; } #main-nav:has(.careers-expand-input:checked) .careers-sections { display: flex; } /* ─── CMS-driven mobile panels (ExpresiaCore/Menu/menuElement.hbs) ────────── menuSSJS.js returns a generic N-deep section tree, so the mobile drill-in can't use one named class/id per nav item the way the static WEBSITE markup above does (.mobile-panel.services, #panel-services, ...). It uses plain data-panel="root"/"{{@index}}" instead — the root-panel rule below is fixed, but which #mp-N radio maps to which data-panel is count- dependent, so those rules are generated inline in menuElement.hbs. The 3rd-level expand/collapse (any dropdown child with its own children) is fully generic — no per-item id needed — because :has() is scoped to each item's own .mobile-expand-group wrapper rather than to #main-nav. */ #main-nav:has(#mp-root:checked) .mobile-panel[data-panel="root"] { display: flex; } .mobile-expand-group { display: flex; flex-direction: column; } .mobile-expand-row { display: flex; align-items: stretch; border-left: 2px solid var(--on-dark-10); } .mobile-expand-row .mobile-drill-item { border-left: none; flex: 1; } .mobile-expand-toggle { display: flex; align-items: center; justify-content: center; width: 40px; flex-shrink: 0; cursor: pointer; } .mobile-expand-chevron { transition: transform .2s ease; } .mobile-expand-group:has(.mobile-expand-input:checked) .mobile-expand-chevron { transform: rotate(90deg); } .mobile-expand-sub { display: none; flex-direction: column; } .mobile-expand-group:has(.mobile-expand-input:checked) .mobile-expand-sub { display: flex; } .btn-mobile-inspection { margin-top: var(--space-8); padding: var(--space-12); text-align: center; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: #fff; background: var(--B); border: none; cursor: pointer; width: 100%; } /* ─── Nav dropdown (single list + one-level flyout) ───────────────────────── Mirrors SharedNavBar.tsx's SimpleDropdown/SimpleDropdownItem/FlyoutItem — client explicitly rejected the old 3-column mega-menu for a plain vertical list. Open state is pure CSS (:hover/:focus-within), no JS needed. */ .nav-item { position: relative; } .simple-dropdown { position: absolute; left: 0; top: 100%; padding-top: var(--space-8); z-index: 200; display: none; } .nav-item:hover .simple-dropdown, .nav-item:focus-within .simple-dropdown { display: block; } .simple-dropdown-inner { display: flex; flex-direction: column; padding: var(--space-8) 0; background: rgba(10,11,20,.98); backdrop-filter: blur(24px); border: 1px solid var(--on-dark-hairline); box-shadow: 0 24px 60px rgba(0,0,0,.5); } .simple-dropdown .dd-item, .simple-dropdown .dd-flyout-trigger { display: block; width: 100%; text-align: left; font-family: var(--font-body); font-size: 13.5px; color: var(--on-dark-75); background: none; border: none; cursor: pointer; padding: 10px var(--space-16); transition: background .15s, color .15s; white-space: normal; line-height: 1.4; } .simple-dropdown .dd-item:hover, .simple-dropdown .dd-flyout:hover > .dd-flyout-trigger, .simple-dropdown .dd-flyout:focus-within > .dd-flyout-trigger { color: #fff; background: var(--on-dark-06); } .simple-dropdown .dd-item.indent { font-size: 12.5px; padding: var(--space-8) var(--space-16) var(--space-8) 30px; } .simple-dropdown .dd-divider { height: 1px; margin: var(--space-8) var(--space-16); background: var(--on-dark-hairline); } /* Flyout — one category with a nested sign list, opens to the right on hover */ .dd-flyout { position: relative; } .dd-flyout-trigger { display: flex !important; align-items: center; justify-content: space-between; gap: var(--space-12); } .dd-flyout-trigger svg { flex-shrink: 0; stroke: var(--on-dark-35); transition: stroke .15s; } .dd-flyout:hover > .dd-flyout-trigger svg, .dd-flyout:focus-within > .dd-flyout-trigger svg { stroke: var(--SAND); } .dd-flyout-panel { position: absolute; left: 100%; top: 0; padding-left: var(--space-4); display: none; } .dd-flyout:hover .dd-flyout-panel, .dd-flyout:focus-within .dd-flyout-panel { display: block; } .dd-flyout-panel-inner { width: 280px; display: flex; flex-direction: column; padding: var(--space-8) 0; background: rgba(10,11,20,.98); backdrop-filter: blur(24px); border: 1px solid var(--on-dark-hairline); box-shadow: 0 24px 60px rgba(0,0,0,.5); } /* .dd-sign-btn is also used standalone on news-blog-inner.html's "related symptoms" rail — keep it independent of the nav dropdown rules above. */ .dd-sign-btn { display: flex; align-items: center; justify-content: space-between; padding: var(--space-8) var(--space-12); background: var(--on-dark-04); border: none; cursor: pointer; margin-bottom: var(--space-4); transition: background .15s; } .dd-sign-btn:hover { background: var(--on-dark-08); } .dd-sign-btn span { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-65); } .dd-sign-btn svg { opacity: .4; flex-shrink: 0; } .dd-sign-btn:hover svg { opacity: 1; } /* ─── Hero Slider ────────────────────────────────────────────────────────── */ .hero-track { display: flex; height: 100%; transition: transform 0.7s cubic-bezier(0.77,0,0.175,1); } .hero-slide { position: relative; flex-shrink: 0; width: 100%; height: 100%; } .hero-slide img.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-slide .overlay { position: absolute; inset: 0; } .hero-noise { position: absolute; inset: 0; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 256px; pointer-events: none; } /* Layout (position/padding/max-width/flex/gap) for .hero-content, .hero-text and .hero-ctas comes from Tailwind utility classes on the elements themselves, matching HeroSlider's className strings 1:1 — only the reveal animation and typography stay here. */ .hero-headline-line { display: block; font-family: var(--font-heading); font-weight: 800; font-size: clamp(36px, 6vw, 80px); color: #fff; line-height: 1.04; letter-spacing: -1.5px; opacity: 0; transform: translateY(60px); transition: opacity .8s cubic-bezier(0.22,1,0.36,1), transform .8s cubic-bezier(0.22,1,0.36,1); } .hero-headline-line .gold { color: var(--SAND); } /* Generic hook for a gold-highlighted word inside an inline-styled hero H1 sourced from CMS rich text (e.g. Careers/HeroSkin.hbs's SecondaryTitle) — an editor wraps the word in in the WYSIWYG's HTML source, same "gold" class name convention .hero-headline-line/.stat-num/ .ov-stat-num/.trust-stat-num already use, just not tied to one of those specific components. Add this class to any other raw-HTML hero H1 that needs the same treatment instead of inventing a new one-off rule. */ .hero-h1-gold .gold { color: var(--SAND); } .hero-sub { font-family: var(--font-body); font-weight: 400; font-size: clamp(14px, 1.6vw, 17px); color: var(--on-dark-body); line-height: 1.65; max-width: 820px; margin-bottom: clamp(18px, 2.5vw, 28px); opacity: 0; transform: translateY(24px); transition: opacity .7s .45s, transform .7s .45s; } .hero-ctas { opacity: 0; transform: translateY(20px); transition: opacity .6s .6s, transform .6s .6s; } .btn-hero-primary { display: inline-flex; align-items: center; gap: var(--space-12); background: var(--B); font-family: var(--font-body); font-weight: 600; font-size: clamp(13px, 1.4vw, 15px); color: #fff; padding: 13px 22px; border: none; cursor: pointer; position: relative; overflow: hidden; transition: opacity .2s; } .btn-hero-primary:hover { opacity: .9; } .hero-call-link { font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--on-dark-65); border-bottom: 1px solid var(--on-dark-25); padding-bottom: 2px; } @media (max-width: 639px) { .hero-call-link { display: none; } } /* Mobile credibility strip */ .hero-cred { display: none; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-8); opacity: 0; transition: opacity .6s .8s, transform .6s .8s; transform: translateY(12px); } @media (max-width: 639px) { .hero-cred { display: flex; } } .hero-cred-badge { display: flex; align-items: center; gap: 6px; padding: 6px var(--space-12); background: rgba(10,11,20,.65); backdrop-filter: blur(8px); border: 1px solid rgba(196,171,108,.35); } .hero-cred-badge .icon { font-family: var(--font-heading); font-weight: 800; font-size: 11px; color: var(--SAND); } .hero-cred-badge .text { font-family: var(--font-body); font-size: 11px; color: #fff; font-weight: 500; letter-spacing: .3px; } /* Hero active state (animate in) */ #hero.active .hero-headline-line { opacity: 1; transform: translateY(0); } #hero.active .hero-headline-line:nth-child(2) { transition-delay: .28s; } #hero.active .hero-headline-line:nth-child(3) { transition-delay: .36s; } #hero.active .hero-sub { opacity: 1; transform: translateY(0); } #hero.active .hero-ctas { opacity: 1; transform: translateY(0); } #hero.active .hero-cred { opacity: 1; transform: translateY(0); } /* Stats bar — position/display come from Tailwind classes on the element */ .hero-stats { bottom: 24px; background: rgba(10,11,20,.72); backdrop-filter: blur(18px); border-left: 1px solid var(--on-dark-hairline); border-top: 1px solid var(--on-dark-hairline); opacity: 0; transform: translateY(16px); transition: opacity .6s .85s, transform .6s .85s; } #hero.active .hero-stats { opacity: 1; transform: translateY(0); } .stat-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: 10px var(--space-20); border-left: 1px solid var(--on-dark-hairline); } .stat-item:first-child { border-left: none; } .stat-num { font-family: var(--font-heading); font-weight: 800; font-size: clamp(22px, 2.8vw, 38px); color: #fff; line-height: 1; letter-spacing: -.5px; } .stat-num .gold { color: var(--SAND); } .stat-label { font-family: var(--font-body); font-size: 9px; color: var(--on-dark-40); letter-spacing: 1.5px; text-transform: uppercase; } /* Glass card — display/flex/gap come from Tailwind classes on the element; top/right/width stay here since React sets them as inline style too (see HeroSlider's code comment on why the card is vertically centered via top/margin-top rather than a transform, which motion owns for the slide-in). */ .hero-glass-card { top: 50%; margin-top: -150px; right: 5%; width: clamp(300px, 26vw, 400px); background: var(--on-dark-18); backdrop-filter: blur(20px); border: 1px solid rgba(198,198,198,.35); padding: 29px; opacity: 0; transform: translateX(20px); transition: opacity .7s .3s, transform .7s .3s; } #hero.active .hero-glass-card { opacity: 1; transform: translateX(0); } .glass-eyebrow { font-family: var(--font-heading); font-weight: 700; font-size: 10px; color: rgba(61,61,72,.9); letter-spacing: 2px; text-transform: uppercase; } .glass-title { font-family: var(--font-heading); font-weight: 700; font-size: 20px; color: #fff; line-height: 1.5; } .glass-body { font-family: var(--font-body); font-size: 15px; color: var(--on-dark-85); line-height: 1.65; } .glass-explore { display: flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: 600; font-size: 13px; color: rgba(61,61,72,.8); background: none; border: none; cursor: pointer; padding: 0; align-self: flex-start; } .glass-controls { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-4); } .glass-dots { display: flex; align-items: center; gap: var(--space-8); } .glass-dot { width: 2px; height: 16px; background: var(--on-dark-30); border: none; border-radius: 2px; cursor: pointer; transition: height .3s, background .3s; } .glass-dot.active { height: 32px; background: rgba(61,61,72,.9); } .glass-arrows { display: flex; gap: var(--space-12); } .glass-arrow { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--on-dark-25); background: none; cursor: pointer; transition: background .2s; } .glass-arrow:hover { background: var(--on-dark-20); } /* Mobile slider controls */ .hero-mobile-controls { position: absolute; bottom: 28px; left: 32px; display: none; align-items: center; gap: var(--space-20); } @media (max-width: 1279px) { .hero-mobile-controls { display: flex; } } .mobile-dots { display: flex; align-items: center; gap: var(--space-8); } .mobile-dot { width: 8px; height: 4px; background: var(--on-dark-30); border: none; border-radius: 2px; cursor: pointer; transition: width .3s, background .3s; } .mobile-dot.active { width: 26px; background: var(--SAND); } .mobile-arrows { display: flex; gap: 10px; } .mobile-arrow { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--on-dark-25); background: var(--on-light-40); cursor: pointer; } /* Progress bar */ .hero-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--on-dark-10); } .hero-progress-fill { height: 100%; background: var(--SAND); width: 0%; } /* ─── Signs Section ──────────────────────────────────────────────────────── */ #signs { padding: var(--space-48) var(--space-56); background: var(--DARK); } @media (max-width: 767px) { #signs { padding: var(--space-48) var(--space-32); } } .signs-inner { max-width: 1440px; margin: 0 auto; } .signs-header { margin-bottom: var(--space-48); } .section-eyebrow { font-family: var(--font-heading); font-weight: 700; font-size: 11px; color: var(--SAND); letter-spacing: 4px; text-transform: uppercase; margin-bottom: var(--space-12); } .section-eyebrow.blue { color: var(--B); } .section-h2-dark { font-family: var(--font-heading); font-weight: 800; font-size: clamp(36px, 4.8vw, 62px); color: #fff; line-height: 1.0; letter-spacing: -1px; } .signs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-24); } @media (max-width: 1023px) { .signs-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 639px) { .signs-grid { grid-template-columns: 1fr; } } .sign-card { display: flex; flex-direction: column; background: var(--CHAR); border: 1px solid var(--on-dark-hairline); cursor: pointer; overflow: hidden; transition: border-color .2s; } .sign-card:hover { border-color: rgba(196,171,108,.3); } .sign-img-wrap { position: relative; overflow: hidden; flex-shrink: 0; height: 150px; } .sign-img-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .sign-card:hover .sign-img-wrap img { transform: scale(1.05); } .sign-img-ov { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(30,34,53,.85) 0%, rgba(30,34,53,0) 60%); } .sign-body { display: flex; flex-direction: column; gap: var(--space-8); padding: 28px; } .sign-cat { font-family: var(--font-heading); font-weight: 700; font-size: 10px; color: var(--SAND); letter-spacing: 2px; text-transform: uppercase; } .sign-content { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); } .sign-label { font-family: var(--font-body); font-weight: 700; font-size: 18px; color: #fff; line-height: 1.3; white-space: pre-line; } .sign-arrow { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--on-dark-25); transition: background .2s; } .sign-card:hover .sign-arrow { background: var(--on-dark-10); } /* ─── Services Section ───────────────────────────────────────────────────── */ /* Layout/spacing/responsive handled by Tailwind utilities in the markup (mirrors ServicesSection in src/app/App.tsx); rules below are colors and per-component typography only. */ #services-section { background: var(--CREAM); } .section-h2-light { font-family: var(--font-heading); font-weight: 800; font-size: clamp(40px, 4.5vw, 64px); color: var(--CHAR); line-height: 1.0; letter-spacing: -1px; } .btn-outline-dark { border: 1.5px solid var(--CHAR); font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--CHAR); background: none; cursor: pointer; } /* Same color-via-class/layout-via-Tailwind split as .btn-outline-dark — used by OurDifference/CaseStudiesSkin.hbs's "View all case stories". */ .btn-outline-blue { border: 1.5px solid var(--B); font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--B); background: none; cursor: pointer; transition: background-color .2s; } .btn-outline-blue:hover { background: var(--on-light-03); } .svc-crawl, .svc-vertical { background: var(--CHAR); } .svc-eyebrow .line { background: var(--SAND); } .svc-eyebrow span { font-family: var(--font-heading); font-weight: 600; font-size: 10px; color: var(--SAND); letter-spacing: 3.5px; text-transform: uppercase; } .svc-h3 { font-family: var(--font-heading); font-weight: 800; font-size: 34px; color: #fff; line-height: 1.08; margin-bottom: 14px; } .svc-desc { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,.52); line-height: 1.7; } .svc-tag { background: rgba(196,171,108,.07); border: 1px solid rgba(196,171,108,.22); } .svc-tag .dot { background: var(--SAND); } .svc-tag span { font-family: var(--font-body); font-size: 11px; color: rgba(196,171,108,.8); letter-spacing: 1px; } .svc-explore { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--SAND); background: none; border: none; cursor: pointer; padding: 0; transition: opacity .2s; } .svc-explore:hover { opacity: .8; } .svc-vertical .svc-h3 { font-size: 27px; margin-bottom: 10px; } .svc-vertical .svc-desc { font-size: 13px; color: rgba(255,255,255,.48); } /* ─── Why Section ────────────────────────────────────────────────────────── */ #why { position: relative; overflow: hidden; padding: var(--space-96) var(--space-56); background: var(--surface-panel); } @media (max-width: 767px) { #why { padding: var(--space-64) var(--space-32); } } #why::after { content: ''; position: absolute; right: -96px; top: 0; height: 100%; width: 55%; background: rgba(255,255,255,.02); transform: skewX(-8deg); transform-origin: top right; pointer-events: none; } @media (max-width: 1023px) { #why::after { display: none; } } .why-inner { max-width: 1440px; margin: 0 auto; position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-64); } @media (max-width: 1023px) { .why-inner { flex-direction: column; } } .why-left { flex-shrink: 0; width: 46%; display: flex; flex-direction: column; gap: var(--space-24); } @media (max-width: 1023px) { .why-left { width: 100%; } } .why-eyebrow { font-family: var(--font-heading); font-size: 11px; font-weight: 700; color: var(--SAND); letter-spacing: 4px; text-transform: uppercase; } .why-h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(40px, 4.8vw, 62px); color: #fff; line-height: 1.05; letter-spacing: -1px; } .why-body { font-family: var(--font-body); font-size: 17px; color: var(--on-dark-55); line-height: 1.75; } .btn-primary { display: inline-flex; align-items: center; gap: var(--space-12); background: var(--B); font-family: var(--font-body); font-weight: 600; font-size: 14px; color: #fff; padding: var(--space-16) 28px; border: none; cursor: pointer; align-self: flex-start; transition: opacity .2s; } .btn-primary:hover { opacity: .85; } .why-right { width: 46%; } @media (max-width: 1023px) { .why-right { width: 100%; } } .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); } .why-card { display: flex; flex-direction: column; justify-content: center; padding: 28px; min-height: 205px; background: var(--on-dark-04); border: 1px solid var(--on-dark-hairline); } .why-card.highlight { background: var(--CHAR); } .why-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: rgba(196,171,108,.1); border: 1px solid rgba(196,171,108,.25); margin-bottom: var(--space-24); flex-shrink: 0; } .why-card.highlight .why-icon { background: var(--on-dark-15); border-color: var(--on-dark-25); } .why-card-title { font-family: var(--font-heading); font-weight: 700; font-size: 20px; color: #fff; margin-bottom: var(--space-8); line-height: 1.3; } .why-card-desc { font-family: var(--font-body); font-size: 14px; color: rgba(255,255,255,.8); line-height: 1.6; } /* ─── Testimonials ───────────────────────────────────────────────────────── */ #testimonials { background: var(--CREAM); padding: var(--space-96) 0; overflow: hidden; } .testimonials-header { max-width: 1440px; margin: 0 auto; padding: 0 var(--space-56); display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--space-64); gap: var(--space-16); flex-wrap: wrap; } @media (max-width: 767px) { .testimonials-header { padding: 0 var(--space-32); } } .testimonials-header-left {} .section-h2-cream { font-family: var(--font-heading); font-weight: 800; font-size: clamp(36px, 4vw, 56px); color: var(--CHAR); line-height: 1.05; letter-spacing: -1px; } .testimonials-read-all { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-16); font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--B); background: none; border: none; cursor: pointer; padding: 0; } .testimonials-arrows { display: flex; gap: var(--space-12); } .carousel-arrow { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1.5px solid var(--CHAR); background: none; cursor: pointer; transition: background .2s; } .carousel-arrow:hover { background: rgba(0,0,0,.1); } .testimonials-track-wrap { padding: 0 var(--space-56); overflow: hidden; } @media (max-width: 767px) { .testimonials-track-wrap { padding: 0 var(--space-32); } } .testimonials-track { display: flex; gap: var(--space-20); transition: transform .6s cubic-bezier(0.77,0,0.175,1); } .testimonial-card { flex-shrink: 0; width: min(85vw, 520px); background: #fff; border: 1px solid rgba(0,0,0,.07); display: flex; flex-direction: column; } .testimonial-thumb { position: relative; padding-bottom: 52%; overflow: hidden; } .testimonial-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .testimonial-thumb .play-overlay { position: absolute; inset: 0; background: var(--on-light-45); display: flex; align-items: center; justify-content: center; } .play-btn { width: 56px; height: 56px; border-radius: 50%; background: var(--B); display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; transition: transform .2s; } .play-btn:hover { transform: scale(1.1); } .testimonial-body { padding: var(--space-32); display: flex; flex-direction: column; flex: 1; } .testimonial-stars { display: flex; gap: var(--space-4); margin-bottom: var(--space-20); } .quote-mark { font-family: Georgia, serif; font-size: 48px; color: rgba(26,82,168,.15); line-height: .7; margin-bottom: var(--space-8); } .testimonial-text { font-family: var(--font-body); font-size: 16px; color: #444; line-height: 1.75; flex: 1; margin-bottom: var(--space-24); } .testimonial-author { display: flex; align-items: center; gap: var(--space-12); padding-top: var(--space-20); border-top: 1px solid rgba(0,0,0,.07); } .author-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: #eee; flex-shrink: 0; } .author-avatar img { width: 100%; height: 100%; object-fit: cover; } .author-name { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--CHAR); } .author-loc { font-family: var(--font-body); font-size: 12px; color: var(--MUTED); } .testimonials-dots { display: flex; justify-content: center; gap: var(--space-8); margin-top: var(--space-40); } .testimonial-dot { height: 8px; border-radius: 4px; background: rgba(0,0,0,.15); border: none; cursor: pointer; transition: all .3s; } .testimonial-dot.active { background: var(--B); width: 24px; } /* ─── Case Studies ───────────────────────────────────────────────────────── */ /* Layout/spacing/responsive handled by Tailwind utilities in the markup (mirrors CaseStudiesSection/CaseStudiesShowcase.tsx in src/app); rules below are colors and per-component typography only. */ #case-studies { background: var(--WHITE); } .btn-text-blue { color: var(--B); border-bottom: 1px solid var(--B); padding-bottom: 2px; background: none; border-top: none; border-left: none; border-right: none; font-family: var(--font-body); font-weight: 600; font-size: 14px; cursor: pointer; transition: opacity .2s; } .btn-text-blue:hover { opacity: .75; } .case-hero-img img { transition: transform .7s; } .case-hero:hover .case-hero-img img { transform: scale(1.05); } .case-hero-panel { background: var(--surface-panel); } .case-gold-rule { background: linear-gradient(to bottom, transparent 5%, var(--SAND) 40%, var(--SAND) 60%, transparent 95%); opacity: .5; } .case-tag-gold { background: rgba(196,171,108,.18); border: 1px solid rgba(196,171,108,.4); font-family: var(--font-heading); font-weight: 600; font-size: 10px; color: var(--SAND); letter-spacing: 2.5px; text-transform: uppercase; } .case-loc { font-family: var(--font-body); font-size: 11px; color: var(--on-dark-45); } .case-num { font-family: var(--font-heading); font-weight: 900; font-size: 13px; color: var(--on-dark-10); letter-spacing: 2px; } .case-h3-hero { font-family: var(--font-heading); font-weight: 900; font-size: clamp(32px, 5vw, 72px); color: #fff; line-height: 0.93; letter-spacing: -1px; text-transform: uppercase; } .case-desc { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-55); line-height: 1.7; } .case-stats { border-top: 1px solid var(--on-dark-10); } .case-stat-val { font-family: var(--font-heading); font-weight: 900; font-size: clamp(22px, 3vw, 34px); color: var(--SAND); line-height: 1; } .case-stat-lbl { font-family: var(--font-body); font-size: 10px; color: var(--on-dark-40); line-height: 1.4; white-space: pre-line; } .btn-read-story { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--SAND); background: none; border: none; cursor: pointer; padding: 0; transition: opacity .2s; } .btn-read-story:hover { opacity: .75; } .btn-read-story svg { transition: transform .3s; } .btn-read-story:hover svg { transform: translateX(4px); } .case-card-2-img img, .case-card-3-img img { transition: transform .7s; } .case-card-2:hover .case-card-2-img img, .case-card-3:hover .case-card-3-img img { transform: scale(1.05); } .case-tag-white { background: var(--on-dark-18); border: 1px solid var(--on-dark-35); font-family: var(--font-heading); font-weight: 600; font-size: 10px; color: #fff; letter-spacing: 2px; text-transform: uppercase; } .case-card-2-panel { background: var(--surface-panel); } .case-h3-small { font-family: var(--font-heading); font-weight: 900; font-size: clamp(24px, 3vw, 42px); color: #fff; line-height: 0.95; text-transform: uppercase; letter-spacing: -.5px; } .case-card-3 { background: var(--surface-panel); } .btn-primary-large { background: var(--B); font-family: var(--font-body); font-weight: 600; font-size: 15px; color: #fff; border: none; cursor: pointer; transition: opacity .2s; } .btn-primary-large:hover { opacity: .85; } /* ─── Service Area ───────────────────────────────────────────────────────── */ #service-area-section { background: var(--CREAM); overflow: hidden; } .service-area-inner { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; min-height: 720px; } @media (max-width: 1023px) { .service-area-inner { grid-template-columns: 1fr; } } .service-area-left { display: flex; flex-direction: column; justify-content: center; padding: var(--space-80) var(--space-56); } @media (max-width: 767px) { .service-area-left { padding: var(--space-64) var(--space-32); } } .area-eyebrow { display: flex; align-items: center; gap: var(--space-12); margin-bottom: var(--space-20); } .area-eyebrow .line { width: 24px; height: 2px; background: var(--B); } .area-eyebrow span { font-family: var(--font-heading); font-size: 10px; font-weight: 700; color: var(--B); letter-spacing: 4px; text-transform: uppercase; } .area-h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(38px, 4.5vw, 60px); color: var(--CHAR); line-height: 1.0; letter-spacing: -1.5px; margin-bottom: var(--space-8); } .area-sub { font-family: var(--font-body); font-size: 15px; color: var(--MUTED); line-height: 1.65; margin-bottom: 36px; max-width: 380px; } .area-accordion { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-32); } .area-item { background: transparent; border-left: 3px solid rgba(0,0,0,.1); cursor: pointer; transition: background .2s, border-color .2s, box-shadow .2s; } .area-item.active { background: #fff; border-left-color: var(--B); box-shadow: 0 4px 20px rgba(0,0,0,.08); } .area-item-header { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--space-20); } .area-item-left { display: flex; align-items: center; gap: var(--space-12); } .area-abbr { font-family: var(--font-heading); font-weight: 900; font-size: 11px; color: rgba(0,0,0,.25); letter-spacing: 2px; } .area-item.active .area-abbr { color: var(--B); } .area-state-name { font-family: var(--font-heading); font-weight: 700; font-size: 17px; color: var(--MUTED); } .area-item.active .area-state-name { color: var(--CHAR); } .area-badge { font-family: var(--font-heading); font-weight: 700; font-size: 9px; color: var(--B); letter-spacing: 1.5px; text-transform: uppercase; background: rgba(26,82,168,.1); padding: 2px 7px; margin-left: var(--space-8); } .area-item:not(.active) .area-badge { display: none; } .area-item-arrow svg { transition: transform .25s; } .area-item.active .area-item-arrow svg { transform: rotate(90deg); } .area-item-body { overflow: hidden; max-height: 0; transition: max-height .3s cubic-bezier(0.22,1,0.36,1); border-top: 1px solid rgba(0,0,0,.06); } .area-item.active .area-item-body { max-height: 300px; } .area-item-body-inner { padding: var(--space-12) var(--space-20) var(--space-20); } .area-tagline { font-family: var(--font-body); font-size: 12px; color: var(--MUTED); margin-bottom: 10px; } .area-cities { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-16); } .area-city { font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--CHAR); background: rgba(26,82,168,.07); border: 1px solid rgba(26,82,168,.15); padding: 3px 10px; } .area-item-foot { display: flex; align-items: center; justify-content: space-between; } .area-projects { font-family: var(--font-heading); font-weight: 800; font-size: 22px; color: var(--CHAR); line-height: 1; } .area-projects-sub { font-family: var(--font-body); font-size: 11px; color: var(--MUTED); } .btn-book { display: inline-flex; align-items: center; gap: var(--space-8); padding: 10px var(--space-20); background: var(--B); font-family: var(--font-body); font-weight: 600; font-size: 13px; color: #fff; border: none; cursor: pointer; transition: opacity .2s; } .btn-book:hover { opacity: .85; } .area-footer-note { font-family: var(--font-body); font-size: 12px; color: var(--MUTED); } .area-footer-note button { color: var(--B); font-weight: 600; font-size: 12px; font-family: var(--font-body); } .service-area-right { position: relative; display: none; } @media (min-width: 1024px) { .service-area-right { display: block; } } .service-area-right img.map-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .area-map-card { position: absolute; top: 28%; left: 48px; width: 270px; background: var(--DARK); overflow: hidden; transition: opacity .3s, transform .3s; } .area-map-card .top-bar { height: 3px; background: var(--B); } .area-map-card-body { padding: var(--space-20) var(--space-24) var(--space-24); } .area-card-state { font-family: var(--font-heading); font-weight: 900; font-size: 48px; color: #fff; line-height: .95; letter-spacing: -2px; } .area-card-sub { font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: var(--SAND); margin-top: var(--space-4); letter-spacing: 1px; } .area-card-sep { height: 1px; background: var(--on-dark-08); margin: var(--space-16) 0; } .area-card-cities-label { font-family: var(--font-heading); font-weight: 700; font-size: 9px; color: var(--on-dark-40); letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: var(--space-8); } .area-card-cities { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-16); } .area-card-city { font-family: var(--font-body); font-size: 11px; color: var(--on-dark-60); background: var(--on-dark-06); padding: 2px var(--space-8); } .area-card-tagline { font-family: var(--font-body); font-size: 12px; color: var(--on-dark-40); line-height: 1.5; margin-bottom: var(--space-16); } .area-trust-pills { position: absolute; bottom: 40px; right: 32px; display: flex; flex-direction: column; gap: 10px; } .trust-pill { display: flex; align-items: center; gap: 10px; padding: 10px var(--space-16); background: var(--on-light-82); border: 1px solid var(--on-dark-10); backdrop-filter: blur(6px); } .trust-pill span { font-family: var(--font-body); font-size: 12px; color: #fff; font-weight: 500; } /* ─── CTA Section ────────────────────────────────────────────────────────── */ #cta-section { position: relative; overflow: hidden; padding: 128px var(--space-56); background: var(--surface-cta); } @media (max-width: 767px) { #cta-section { padding: var(--space-80) var(--space-32); } } .cta-ghost { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: clamp(160px, 25vw, 340px); font-weight: 800; color: var(--on-dark-03); line-height: 1; user-select: none; white-space: nowrap; pointer-events: none; overflow: hidden; } .cta-inner { max-width: 1440px; margin: 0 auto; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } .cta-eyebrow { font-family: var(--font-heading); font-size: 11px; font-weight: 600; color: var(--SAND); letter-spacing: 4px; text-transform: uppercase; margin-bottom: var(--space-20); } .cta-h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(36px, 5vw, 72px); color: #fff; line-height: 1.0; letter-spacing: -1px; margin-bottom: var(--space-20); } .cta-sub { font-family: var(--font-body); font-size: 18px; color: var(--on-dark-muted); line-height: 1.65; max-width: 480px; margin-bottom: 44px; } .cta-buttons { display: flex; align-items: center; gap: var(--space-16); flex-wrap: wrap; justify-content: center; } .btn-cta-primary { display: inline-flex; align-items: center; gap: var(--space-12); padding: var(--space-16) 36px; background: #fff; font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--NAVY); border: none; cursor: pointer; transition: opacity .2s; } .btn-cta-primary:hover { opacity: .9; } .cta-call { font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--on-dark-55); border-bottom: 1px solid var(--on-dark-20); padding-bottom: 2px; } /* ─── Footer ─────────────────────────────────────────────────────────────── */ footer { background: #060710; } .footer-inner { max-width: 1440px; margin: 0 auto; padding: var(--space-64) var(--space-56) var(--space-40); } @media (max-width: 767px) { .footer-inner { padding: var(--space-48) var(--space-32) var(--space-32); } } .footer-top { display: flex; gap: var(--space-48); padding-bottom: var(--space-48); border-bottom: 1px solid var(--on-dark-06); flex-wrap: wrap; } .footer-brand { width: 288px; flex-shrink: 0; } .footer-logo { height: 80px; margin-bottom: var(--space-20); } .footer-logo img { height: 100%; width: auto; } .footer-tagline { font-family: var(--font-body); font-size: 14px; color: var(--on-dark-35); line-height: 1.7; margin-bottom: var(--space-20); } .btn-footer-inspection { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-12) var(--space-20); background: var(--B); font-family: var(--font-body); font-weight: 600; font-size: 13px; color: #fff; border: none; cursor: pointer; transition: opacity .2s; } .btn-footer-inspection:hover { opacity: .85; } .footer-cols { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-32); } @media (max-width: 767px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } } .footer-col-h { font-family: var(--font-heading); font-weight: 700; font-size: 11px; color: rgba(255,255,255,.9); letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: var(--space-16); } .footer-col ul { display: flex; flex-direction: column; gap: var(--space-8); } .footer-col a { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-35); transition: color .2s; } .footer-col a:hover { color: var(--on-dark-70); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); padding-top: var(--space-32); flex-wrap: wrap; } .footer-copy { font-family: var(--font-body); font-size: 12px; color: var(--on-dark-20); } .footer-legal { display: flex; gap: var(--space-20); } .footer-legal a { font-family: var(--font-body); font-size: 12px; color: var(--on-dark-20); transition: color .2s; } .footer-legal a:hover { color: var(--on-dark-40); } /* ─── Inspection Modal ───────────────────────────────────────────────────── */ #modal-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.82); backdrop-filter: blur(8px); align-items: center; justify-content: center; padding: var(--space-16); } #modal-overlay.open { display: flex; } .modal-box { width: 100%; max-width: 900px; max-height: calc(100vh - 32px); background: var(--DARK); border: 1px solid var(--on-dark-08); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; animation: modalIn .35s cubic-bezier(0.22,1,0.36,1); } @keyframes modalIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-content { display: flex; flex: 1; overflow: hidden; min-height: 0; } .modal-form-panel { flex: 1; overflow-y: auto; display: flex; flex-direction: column; } .modal-header { padding: 28px var(--space-32) 0; display: flex; align-items: flex-start; justify-content: space-between; flex-shrink: 0; } .modal-header-left {} .modal-header-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-12); } .modal-header-eyebrow .line { width: 24px; height: 2px; background: var(--SAND); } .modal-header-eyebrow span { font-family: var(--font-heading); font-weight: 700; font-size: 10px; color: var(--SAND); letter-spacing: 3px; text-transform: uppercase; } .modal-title { font-family: var(--font-heading); font-weight: 800; font-size: 24px; color: #fff; line-height: 1.2; margin-bottom: 6px; } .modal-subtitle { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-45); } .modal-close { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: var(--on-dark-06); border: none; border-radius: 6px; cursor: pointer; flex-shrink: 0; margin-left: var(--space-16); transition: background .15s; } .modal-close:hover { background: var(--on-dark-border); } .modal-progress { padding: var(--space-16) var(--space-32) 0; display: flex; align-items: center; gap: var(--space-8); flex-shrink: 0; } .step-dot { height: 8px; border-radius: 4px; background: var(--on-dark-border); transition: all .25s; } .step-dot.active { background: var(--SAND); width: 24px; } .step-label { font-family: var(--font-body); font-size: 11px; color: var(--on-dark-40); margin-left: var(--space-4); } .modal-body { padding: var(--space-24) var(--space-32) var(--space-32); flex: 1; } .form-step { display: none; flex-direction: column; gap: 18px; } .form-step.active { display: flex; } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); } .form-grid-5 { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: var(--space-12); } .field { display: flex; flex-direction: column; gap: 6px; } .field-label { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--on-dark-45); } .field-label .required { color: var(--SAND); } .field-error { font-family: var(--font-body); font-size: 11px; color: #e05858; } .form-input, .form-select, .form-textarea { background: var(--on-dark-wash); border: 1px solid rgba(255,255,255,.10); border-radius: 4px; padding: 10px var(--space-12); font-family: var(--font-body); font-size: 14px; color: #fff; outline: none; width: 100%; transition: border-color .15s; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--SAND); } .form-input::placeholder, .form-textarea::placeholder { color: var(--on-dark-25); } .form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='var(--on-dark-40)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; background-color: var(--on-dark-wash); } .form-select option { background: var(--DARK); color: #fff; } .form-select:invalid, .form-select option[value=""] { color: var(--on-dark-25); } .form-textarea { resize: vertical; min-height: 80px; } .phone-wrap { position: relative; display: flex; align-items: center; } .phone-prefix { position: absolute; left: 12px; font-family: var(--font-body); font-size: 14px; color: var(--on-dark-35); pointer-events: none; z-index: 1; } .phone-wrap .form-input { padding-left: 36px; } .contact-method-group { display: flex; flex-direction: column; gap: var(--space-8); } .contact-method-row { display: flex; gap: var(--space-12); } .contact-btn { display: flex; align-items: center; gap: var(--space-8); flex: 1; padding: 10px 14px; background: var(--on-dark-04); border: 1px solid var(--on-dark-08); border-radius: 6px; cursor: pointer; transition: all .15s; font-family: var(--font-body); font-size: 13px; color: var(--on-dark-45); } .contact-btn.active { background: rgba(196,171,108,.12); border-color: rgba(196,171,108,.5); color: var(--SAND); font-weight: 600; } .time-row { display: flex; gap: var(--space-12); } .time-btn { display: flex; flex-direction: column; align-items: center; flex: 1; padding: 10px var(--space-8); background: var(--on-dark-04); border: 1px solid var(--on-dark-08); border-radius: 6px; cursor: pointer; transition: all .15s; } .time-btn.active { background: rgba(196,171,108,.12); border-color: rgba(196,171,108,.5); } .time-btn .time-label { font-family: var(--font-heading); font-weight: 700; font-size: 12px; color: var(--on-dark-60); } .time-btn.active .time-label { color: var(--SAND); } .time-btn .time-sub { font-family: var(--font-body); font-size: 10px; color: var(--on-dark-35); margin-top: 2px; } .btn-modal-continue, .btn-modal-submit { display: flex; align-items: center; justify-content: center; gap: var(--space-8); width: 100%; padding: 14px var(--space-24); background: var(--SAND); border: none; border-radius: 6px; cursor: pointer; font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--DARK); letter-spacing: .5px; transition: opacity .2s; margin-top: var(--space-8); } .btn-modal-continue:hover, .btn-modal-submit:hover { opacity: .85; } .modal-privacy { text-align: center; font-family: var(--font-body); font-size: 11px; color: var(--on-dark-25); margin-top: -8px; } .step2-actions { display: flex; gap: var(--space-12); margin-top: var(--space-8); } .btn-modal-back { display: flex; align-items: center; gap: var(--space-8); padding: 14px var(--space-20); background: var(--on-dark-wash); border: 1px solid rgba(255,255,255,.10); border-radius: 6px; cursor: pointer; font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--on-dark-55); flex-shrink: 0; } /* Modal trust panel */ .modal-trust-panel { width: 300px; flex-shrink: 0; background: rgba(196,171,108,.06); border-left: 1px solid rgba(196,171,108,.12); padding: var(--space-40) 36px; display: flex; flex-direction: column; justify-content: space-between; } @media (max-width: 767px) { .modal-trust-panel { display: none; } } .trust-header-rule { width: 32px; height: 2px; background: var(--SAND); margin-bottom: 28px; } .trust-headline { font-family: var(--font-heading); font-weight: 800; font-size: 22px; color: #fff; line-height: 1.25; margin-bottom: var(--space-8); } .trust-sub { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-muted); line-height: 1.6; } .trust-features { display: flex; flex-direction: column; gap: var(--space-24); margin-top: 36px; } .trust-feature { display: flex; align-items: flex-start; gap: var(--space-12); } .trust-feature-icon { color: var(--SAND); margin-top: 2px; flex-shrink: 0; } .trust-feature-title { font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: #fff; margin-bottom: 2px; } .trust-feature-body { font-family: var(--font-body); font-size: 12px; color: var(--on-dark-45); line-height: 1.55; } .trust-review-sep { height: 1px; background: var(--on-dark-hairline); margin-top: var(--space-32); padding-top: var(--space-24); border-top: 1px solid var(--on-dark-hairline); } .trust-stars { display: flex; gap: var(--space-4); margin-bottom: 6px; } .trust-quote { font-family: var(--font-body); font-size: 12px; color: var(--on-dark-35); font-style: italic; line-height: 1.6; } .trust-reviewer { font-family: var(--font-body); font-size: 11px; color: var(--SAND); margin-top: 6px; font-weight: 600; } /* Modal success */ .modal-success { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px var(--space-40); } .modal-success.active { display: flex; } .success-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(196,171,108,.12); border: 1px solid rgba(196,171,108,.3); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-24); } .success-title { font-family: var(--font-heading); font-weight: 800; font-size: 26px; color: #fff; margin-bottom: 10px; line-height: 1.2; } .success-body { font-family: var(--font-body); font-size: 14px; color: var(--on-dark-muted); line-height: 1.7; max-width: 380px; margin-bottom: 36px; } .success-steps { background: var(--on-dark-03); border: 1px solid var(--on-dark-hairline); border-radius: 8px; padding: var(--space-20) 28px; width: 100%; max-width: 380px; margin-bottom: var(--space-32); text-align: left; } .success-steps-label { font-family: var(--font-heading); font-weight: 700; font-size: 11px; color: var(--SAND); letter-spacing: 2px; text-transform: uppercase; margin-bottom: var(--space-16); } .success-step { display: flex; align-items: flex-start; gap: var(--space-12); margin-bottom: var(--space-12); } .success-step:last-child { margin-bottom: 0; } .success-step-num { font-family: var(--font-heading); font-weight: 800; font-size: 11px; color: var(--SAND); min-width: 20px; margin-top: 1px; } .success-step-text { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-65); line-height: 1.5; } .btn-close-modal { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--on-dark-45); background: none; border: none; cursor: pointer; letter-spacing: .5px; } /* ─── Page Hero (inner pages) ────────────────────────────────────────────── */ .page-hero { position: relative; overflow: hidden; min-height: 480px; display: flex; flex-direction: column; } .page-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(120deg, var(--on-light-90) 30%, var(--on-light-50) 70%); } .page-hero-content { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 180px var(--space-56) var(--space-80); width: 100%; } @media (max-width: 767px) { .page-hero-content { padding: 140px var(--space-32) 60px; } } .page-breadcrumb { display: flex; align-items: center; gap: var(--space-8); margin-bottom: var(--space-20); font-family: var(--font-body); font-size: 12px; color: var(--on-dark-45); } .page-breadcrumb a { color: var(--on-dark-45); } .page-breadcrumb a:hover { color: var(--on-dark-70); } .page-breadcrumb span { color: var(--on-dark-25); } .page-h1 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(36px, 5vw, 72px); color: #fff; line-height: 1.0; letter-spacing: -1px; margin-bottom: var(--space-20); max-width: 700px; } .page-hero-sub { font-family: var(--font-body); font-size: 17px; color: var(--on-dark-65); line-height: 1.65; max-width: 560px; margin-bottom: var(--space-32); } /* ─── Sticky anchor bar ──────────────────────────────────────────────────── */ .sticky-anchor { position: sticky; top: 0; z-index: 50; background: var(--on-light-95); backdrop-filter: blur(16px); border-bottom: 1px solid var(--on-dark-hairline); overflow-x: auto; scrollbar-width: none; } .sticky-anchor::-webkit-scrollbar { display: none; } .sticky-anchor-inner { max-width: 1440px; margin: 0 auto; padding: 0 var(--space-56); display: flex; align-items: center; gap: 0; } @media (max-width: 767px) { .sticky-anchor-inner { padding: 0 var(--space-32); } } .anchor-link { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--on-dark-55); padding: var(--space-16) var(--space-20); border-bottom: 2px solid transparent; white-space: nowrap; cursor: pointer; transition: color .15s, border-color .15s; background: none; border-top: none; border-left: none; border-right: none; display: block; } .anchor-link:hover { color: var(--on-dark-85); } .anchor-link.active { color: #fff; border-bottom-color: var(--SAND); } /* ─── Accordion (FAQ / Symptoms) ─────────────────────────────────────────── */ .accordion { display: flex; flex-direction: column; gap: var(--space-8); } .accordion-item {} .accordion-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 var(--space-16); height: 45px; background: #fff; border: none; border-radius: 4px; cursor: pointer; text-align: left; transition: background .15s; } .accordion-trigger.open { background: var(--B); border-radius: 4px 4px 0 0; } .accordion-trigger-text { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--CHAR); } .accordion-trigger.open .accordion-trigger-text { color: #fff; } .accordion-chevron { flex-shrink: 0; transition: transform .2s; } .accordion-trigger.open .accordion-chevron { transform: rotate(180deg); } .accordion-body { overflow: hidden; max-height: 0; transition: max-height .3s ease; background: rgba(26,82,168,.25); border: 1px solid var(--B); border-top: none; border-radius: 0 0 4px 4px; } .accordion-body.open { max-height: 200px; } .accordion-body-inner { padding: var(--space-12) var(--space-16); font-family: var(--font-body); font-size: 14px; color: #fff; line-height: 1.7; } /* ─── Content sections (inner pages) ────────────────────────────────────── */ .content-section { padding: var(--space-80) var(--space-56); } @media (max-width: 767px) { .content-section { padding: 60px var(--space-32); } } .content-inner { max-width: 1440px; margin: 0 auto; } /* ─── Team Grid ──────────────────────────────────────────────────────────── */ .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); } @media (max-width: 1023px) { .team-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 639px) { .team-grid { grid-template-columns: 1fr; } } .team-card { display: flex; flex-direction: column; cursor: pointer; overflow: hidden; background: var(--CHAR); transition: opacity .2s; } .team-card:hover { opacity: .9; } .team-card-img { aspect-ratio: 3/4; overflow: hidden; position: relative; } .team-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; } .team-card:hover .team-card-img img { transform: scale(1.04); } .team-card-body { padding: var(--space-20); } .team-card-name { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: #fff; margin-bottom: var(--space-4); } .team-card-title { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-muted); } /* ─── Dept Tabs ──────────────────────────────────────────────────────────── */ .dept-tabs { display: flex; gap: var(--space-8); flex-wrap: wrap; margin-bottom: var(--space-32); } .dept-tab { padding: var(--space-8) var(--space-20); font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--on-dark-55); background: var(--on-dark-06); border: 1px solid var(--on-dark-10); cursor: pointer; transition: all .15s; } .dept-tab.active { background: var(--B); border-color: var(--B); color: #fff; font-weight: 600; } /* ─── Pricing ────────────────────────────────────────────────────────────── */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); } @media (max-width: 1023px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 639px) { .pricing-grid { grid-template-columns: 1fr; } } .pricing-card { display: flex; flex-direction: column; padding: var(--space-32); background: var(--CHAR); border: 1px solid var(--on-dark-hairline); position: relative; } .pricing-card.featured { border-color: var(--SAND); } .pricing-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--SAND); padding: var(--space-4) var(--space-16); font-family: var(--font-heading); font-weight: 700; font-size: 11px; color: var(--DARK); letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; } .pricing-label { font-family: var(--font-heading); font-weight: 700; font-size: 11px; color: var(--SAND); letter-spacing: 3px; text-transform: uppercase; margin-bottom: var(--space-12); } .pricing-h3 { font-family: var(--font-heading); font-weight: 800; font-size: 28px; color: #fff; margin-bottom: var(--space-8); line-height: 1.2; } .pricing-range { font-family: var(--font-heading); font-weight: 900; font-size: 36px; color: #fff; margin-bottom: var(--space-4); } .pricing-range .price-from { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--on-dark-45); margin-right: var(--space-8); } .pricing-note { font-family: var(--font-body); font-size: 12px; color: var(--on-dark-40); margin-bottom: var(--space-24); } .pricing-features { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; flex: 1; } .pricing-feature { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-body); font-size: 14px; color: var(--on-dark-70); } /* ─── Utilities ──────────────────────────────────────────────────────────── */ .text-sand { color: var(--SAND); } .text-blue { color: var(--B); } .text-white { color: #fff; } .text-white-55 { color: var(--on-dark-55); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ─── Page transitions ───────────────────────────────────────────────────── */ .page { animation: pageIn .4s ease; } @keyframes pageIn { from { opacity: 0; } to { opacity: 1; } } /* ─── Hero page offset ───────────────────────────────────────────────────── */ .page-offset { padding-top: 0; /* Hero slides under header */ } /* ═══════════════════════════════════════════════════════════════════════════ INNER PAGE STYLES ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Page Hero (inner pages with background-image) ─────────────────────── */ .page-hero { position: relative; overflow: hidden; min-height: 520px; display: flex; align-items: flex-end; background-size: cover; background-position: center; } .page-hero-short { min-height: 380px; } .page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(120deg, var(--on-light-90) 30%, var(--on-light-50) 80%); } .page-hero-inner { position: relative; z-index: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: 180px var(--space-56) 72px; } @media (max-width: 767px) { .page-hero-inner { padding: 140px var(--space-32) var(--space-56); } } .hero-eyebrow-text { display: flex; align-items: center; gap: var(--space-8); font-family: var(--font-heading); font-weight: 700; font-size: 11px; color: rgba(196,171,108,.7); letter-spacing: 3px; text-transform: uppercase; margin-bottom: var(--space-16); } .page-hero-h1 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(40px, 5.5vw, 76px); color: #fff; line-height: 1.0; letter-spacing: -1.5px; margin-bottom: var(--space-20); } .page-hero-sub { font-family: var(--font-body); font-size: 17px; color: var(--on-dark-65); line-height: 1.65; max-width: 580px; margin-bottom: var(--space-32); } .page-hero-ctas { display: flex; align-items: center; gap: var(--space-20); flex-wrap: wrap; margin-bottom: var(--space-24); } .page-hero-badges { display: flex; gap: var(--space-12); flex-wrap: wrap; } .page-hero-stats { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; margin-top: 8px; } .page-hero-stat { display: flex; align-items: center; gap: 12px; } .page-hero-stat-val { font-family: 'Articulat CF', sans-serif; font-weight: 700; font-size: 22px; color: var(--SAND); } .page-hero-stat-lbl { font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(255,255,255,.4); letter-spacing: 1px; text-transform: uppercase; } @media (max-width: 640px) { .page-hero-stats { gap: 20px; } } /* ─── Sticky Tab Bar ─────────────────────────────────────────────────────── */ .sticky-anchor { position: sticky; top: 0; z-index: 50; background: rgba(10,11,20,.97); backdrop-filter: blur(16px); border-bottom: 1px solid var(--on-dark-hairline); opacity: 0; pointer-events: none; transition: opacity .25s; } .sticky-anchor.visible { opacity: 1; pointer-events: all; } .sticky-inner { max-width: 1440px; margin: 0 auto; padding: 0 var(--space-56); display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); overflow-x: auto; scrollbar-width: none; } .sticky-inner::-webkit-scrollbar { display: none; } @media (max-width: 767px) { .sticky-inner { padding: 0 var(--space-24); } } .sticky-tabs { display: flex; gap: 0; } .sticky-tab { padding: var(--space-16) 18px; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--on-dark-muted); border-bottom: 2px solid transparent; white-space: nowrap; cursor: pointer; transition: color .15s, border-color .15s; background: none; } .sticky-tab:hover { color: var(--on-dark-85); } .sticky-tab.active { color: #fff; border-bottom-color: var(--SAND); } .sticky-cta { flex-shrink: 0; padding: 9px var(--space-20); background: var(--B); color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity .15s; white-space: nowrap; border: none; } .sticky-cta:hover { opacity: .85; } /* ─── Background utilities ───────────────────────────────────────────────── */ .bg-cream { background: var(--CREAM); } .bg-dark { background: var(--DARK); } /* ─── Section header utilities ───────────────────────────────────────────── */ .section-header-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); margin-bottom: var(--space-48); flex-wrap: wrap; } .section-header-center { text-align: center; margin-bottom: var(--space-48); } /* Section h2 for cream/white backgrounds */ .section-h2-cream { font-family: var(--font-heading); font-weight: 800; font-size: clamp(36px, 4.5vw, 58px); color: var(--CHAR); line-height: 1.0; letter-spacing: -1px; } /* Fix section-h2-dark color on light backgrounds */ .content-section:not(.bg-dark) .section-h2-dark { color: var(--CHAR); } .content-section:not(.bg-dark) .section-eyebrow { color: var(--SAND); } .content-section:not(.bg-dark) .section-eyebrow.blue { color: var(--B); } /* ─── Body text ──────────────────────────────────────────────────────────── */ .body-text { font-family: var(--font-body); font-size: 16px; line-height: 1.75; margin-bottom: var(--space-20); max-width: 560px; color: var(--MUTED); } .bg-dark .body-text { color: var(--on-dark-60); } /* ─── Small primary button ───────────────────────────────────────────────── */ .btn-primary-small { display: inline-flex; align-items: center; gap: var(--space-8); padding: 10px 22px; background: var(--B); color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity .15s; border: none; flex-shrink: 0; } .btn-primary-small:hover { opacity: .85; } /* ─── Full-width button ──────────────────────────────────────────────────── */ .btn-primary-full { width: 100%; padding: 14px var(--space-24); background: var(--B); color: #fff; font-family: var(--font-body); font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity .15s; border: none; } .btn-primary-full:hover { opacity: .85; } /* ─── Overview two-column layout ─────────────────────────────────────────── */ .overview-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-80); align-items: start; } @media (max-width: 1023px) { .overview-layout { grid-template-columns: 1fr; gap: var(--space-48); } } .overview-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); margin-top: 36px; padding-top: var(--space-32); border-top: 1px solid rgba(0,0,0,.08); } .ov-stat-num { font-family: var(--font-heading); font-weight: 900; font-size: 30px; color: var(--CHAR); line-height: 1; margin-bottom: var(--space-4); } .ov-stat-num .gold { color: var(--SAND); } .ov-stat-lbl { font-family: var(--font-body); font-size: 12px; color: var(--MUTED); line-height: 1.4; } .overview-img-wrap { aspect-ratio: 4/3; overflow: hidden; } .overview-img-wrap img { width: 100%; height: 100%; object-fit: cover; } .trust-card-small { margin-top: var(--space-16); padding: var(--space-20) var(--space-24); background: var(--CHAR); } .trust-card-inner { display: flex; align-items: flex-start; gap: var(--space-16); } .trust-icon { flex-shrink: 0; padding-top: 2px; } .trust-card-title { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: #fff; margin-bottom: var(--space-4); } .trust-card-sub { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-muted); line-height: 1.5; } /* ─── Symptoms / FAQ Accordion ───────────────────────────────────────────── */ .symptoms-accordion, .faq-accordion { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-40); } .acc-item, .faq-item { background: #fff; border: 1px solid rgba(0,0,0,.08); overflow: hidden; transition: border-color .2s; } .acc-item:hover, .faq-item:hover { border-color: rgba(26,82,168,.2); } .acc-item.active, .faq-item.active { border-color: var(--B); } .acc-header, .faq-q { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--space-24); cursor: pointer; gap: var(--space-16); user-select: none; } .acc-left { display: flex; align-items: center; gap: var(--space-12); flex: 1; } .acc-icon { font-size: 18px; flex-shrink: 0; } .acc-title { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--CHAR); } .acc-right { display: flex; align-items: center; gap: var(--space-12); flex-shrink: 0; } .acc-severity { font-family: var(--font-body); font-size: 10px; font-weight: 700; padding: 3px 10px; text-transform: uppercase; letter-spacing: 1px; } .acc-severity.sev-high { background: rgba(220,38,38,.1); color: #dc2626; } .acc-severity.sev-medium { background: rgba(217,119,6,.1); color: #d97706; } .acc-severity.sev-low { background: rgba(26,82,168,.1); color: var(--B); } .acc-chevron, .faq-chevron { flex-shrink: 0; transition: transform .25s; color: var(--MUTED); } .acc-item.active .acc-chevron, .faq-item.active .faq-chevron { transform: rotate(180deg); } .faq-q span:first-child { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--CHAR); flex: 1; } .acc-body, .faq-a { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(0.22,1,0.36,1); } .acc-item.active .acc-body, .faq-item.active .faq-a { max-height: 500px; } .acc-body-inner, .faq-a-inner { padding: 0 var(--space-24) var(--space-20); } .acc-desc { font-family: var(--font-body); font-size: 14px; color: var(--MUTED); line-height: 1.7; margin-bottom: var(--space-12); } .acc-solution { display: flex; align-items: flex-start; gap: var(--space-8); padding: var(--space-12) var(--space-16); background: rgba(26,82,168,.06); border-left: 3px solid var(--B); font-family: var(--font-body); font-size: 13px; color: var(--CHAR); line-height: 1.5; } .acc-solution svg { flex-shrink: 0; margin-top: 2px; } .faq-a-inner { font-family: var(--font-body); font-size: 14px; color: var(--MUTED); line-height: 1.75; } /* ─── Solutions grid (service page) ─────────────────────────────────────── */ .solutions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-24); margin-top: var(--space-40); } @media (max-width: 1199px) { .solutions-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 639px) { .solutions-grid { grid-template-columns: 1fr; } } .solution-card { background: var(--CHAR); overflow: hidden; border: 1px solid var(--on-dark-06); transition: border-color .2s; } .solution-card:hover { border-color: rgba(196,171,108,.25); } .solution-img { aspect-ratio: 16/9; overflow: hidden; } .solution-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; } .solution-card:hover .solution-img img { transform: scale(1.05); } .solution-body { padding: var(--space-24); } .solution-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(196,171,108,.1); margin-bottom: 14px; } .solution-h3 { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: #fff; margin-bottom: var(--space-8); line-height: 1.25; } .solution-desc { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-muted); line-height: 1.65; } /* ─── Cost disclaimer ────────────────────────────────────────────────────── */ .cost-disclaimer { display: flex; align-items: center; gap: 10px; padding: 14px var(--space-20); background: rgba(26,82,168,.06); border: 1px solid rgba(26,82,168,.2); font-family: var(--font-body); font-size: 13px; color: var(--MUTED); margin-bottom: var(--space-40); } /* ─── Pricing card overrides (inner pages) ───────────────────────────────── */ .pricing-card-header { margin-bottom: var(--space-20); } .pricing-level { font-family: var(--font-heading); font-weight: 700; font-size: 11px; color: var(--on-dark-45); letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 6px; } .pricing-range { font-family: var(--font-heading); font-weight: 900; font-size: 28px; color: #fff; line-height: 1.1; } .pricing-card-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--SAND); padding: var(--space-4) 14px; font-family: var(--font-heading); font-weight: 700; font-size: 10px; color: var(--DARK); letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; } .pricing-includes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; flex: 1; } .pricing-includes li { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 13px; color: var(--on-dark-65); } .btn-pricing { width: 100%; padding: var(--space-12) var(--space-20); background: var(--on-dark-08); border: 1px solid var(--on-dark-border); color: var(--on-dark-70); font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; margin-top: auto; } .btn-pricing:hover { background: var(--on-dark-15); color: #fff; } .btn-pricing.featured { background: var(--B); border-color: var(--B); color: #fff; } .btn-pricing.featured:hover { opacity: .85; } /* ─── Financing banner ───────────────────────────────────────────────────── */ .financing-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); padding: 28px var(--space-32); background: var(--CHAR); border: 1px solid rgba(196,171,108,.2); margin-top: var(--space-40); flex-wrap: wrap; } .financing-left { display: flex; align-items: flex-start; gap: var(--space-20); flex: 1; } .financing-left svg { flex-shrink: 0; margin-top: var(--space-4); } .financing-title { font-family: var(--font-heading); font-weight: 700; font-size: 20px; color: #fff; margin-bottom: var(--space-4); } .financing-sub { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-muted); line-height: 1.5; } /* ─── Partners ───────────────────────────────────────────────────────────── */ .partners-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-20); margin-top: var(--space-40); } @media (max-width: 1023px) { .partners-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 639px) { .partners-row { grid-template-columns: 1fr; } } .partner-chip { display: flex; align-items: flex-start; gap: var(--space-16); padding: var(--space-24); background: #fff; border: 1px solid rgba(0,0,0,.07); } .partner-name { font-family: var(--font-heading); font-weight: 700; font-size: 17px; color: var(--CHAR); margin-bottom: var(--space-4); } .partner-sub { font-family: var(--font-body); font-size: 12px; color: var(--MUTED); line-height: 1.4; } /* ─── Story layout ───────────────────────────────────────────────────────── */ .story-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-80); align-items: start; } @media (max-width: 1023px) { .story-layout { grid-template-columns: 1fr; gap: var(--space-48); } } .story-milestones { display: flex; flex-direction: column; margin-top: 36px; padding-top: var(--space-32); border-top: 1px solid rgba(0,0,0,.08); } .milestone { display: flex; gap: var(--space-24); padding: var(--space-20) 0; border-bottom: 1px solid rgba(0,0,0,.06); } .milestone:last-child { border-bottom: none; } .milestone-year { font-family: var(--font-heading); font-weight: 900; font-size: 20px; color: var(--B); min-width: 52px; padding-top: 2px; } .milestone-title { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--CHAR); margin-bottom: 2px; } .milestone-desc { font-family: var(--font-body); font-size: 13px; color: var(--MUTED); } .story-img img { width: 100%; object-fit: cover; } .story-img-caption { font-family: var(--font-body); font-size: 12px; color: var(--MUTED); margin-top: 10px; } /* ─── Team card (about.html) ─────────────────────────────────────────────── */ .team-card { background: #fff; border: 1px solid rgba(0,0,0,.07); overflow: hidden; transition: box-shadow .2s; } .team-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.1); } .team-photo { aspect-ratio: 1; overflow: hidden; } .team-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; } .team-card:hover .team-photo img { transform: scale(1.04); } .team-info { padding: var(--space-16) var(--space-20); } .team-name { font-family: var(--font-heading); font-weight: 700; font-size: 17px; color: var(--CHAR); margin-bottom: 3px; } .team-role { font-family: var(--font-body); font-size: 13px; color: var(--MUTED); margin-bottom: 10px; } .team-dept-badge { display: inline-block; padding: 3px 10px; background: rgba(26,82,168,.08); font-family: var(--font-body); font-size: 10px; font-weight: 700; color: var(--B); letter-spacing: 1.5px; text-transform: uppercase; } /* ─── Initiatives grid ───────────────────────────────────────────────────── */ .initiatives-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: var(--space-40); } @media (max-width: 1023px) { .initiatives-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 639px) { .initiatives-grid { grid-template-columns: 1fr; } } .initiative-card { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-32); background: var(--CHAR); border: 1px solid var(--on-dark-06); } .initiative-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: rgba(196,171,108,.08); } .initiative-h3 { font-family: var(--font-heading); font-weight: 700; font-size: 21px; color: #fff; line-height: 1.2; } .initiative-desc { font-family: var(--font-body); font-size: 14px; color: var(--on-dark-55); line-height: 1.7; flex: 1; } .initiative-footer { margin-top: auto; } /* ─── Contact layout ─────────────────────────────────────────────────────── */ .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-80); align-items: start; } @media (max-width: 1023px) { .contact-layout { grid-template-columns: 1fr; gap: var(--space-48); } } .contact-items { display: flex; flex-direction: column; gap: var(--space-24); margin-top: var(--space-32); } .contact-item { display: flex; gap: var(--space-16); align-items: flex-start; } .contact-icon { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(26,82,168,.08); } .contact-label { font-family: var(--font-body); font-size: 11px; font-weight: 700; color: var(--MUTED); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 3px; } .contact-value { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--CHAR); } a.contact-value:hover { color: var(--B); } .contact-form-card { padding: 36px; background: #fff; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 4px 32px rgba(0,0,0,.06); } .contact-form-title { font-family: var(--font-heading); font-weight: 700; font-size: 20px; color: var(--CHAR); margin-bottom: var(--space-24); } .contact-form { display: flex; flex-direction: column; gap: var(--space-16); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); } @media (max-width: 639px) { .form-row { grid-template-columns: 1fr; } } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--CHAR); text-transform: uppercase; letter-spacing: 1px; } .form-group input, .form-group textarea { width: 100%; padding: var(--space-12) var(--space-16); border: 1px solid rgba(0,0,0,.12); font-family: var(--font-body); font-size: 14px; color: var(--CHAR); transition: border-color .15s; resize: vertical; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--B); box-shadow: 0 0 0 3px rgba(26,82,168,.1); } /* ─── Services full grid ─────────────────────────────────────────────────── */ .services-full-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: var(--space-40); } @media (max-width: 1023px) { .services-full-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 639px) { .services-full-grid { grid-template-columns: 1fr; } } .svc-full-card { display: flex; flex-direction: column; background: var(--CHAR); border: 1px solid var(--on-dark-06); overflow: hidden; transition: border-color .2s; } .svc-full-card:hover { border-color: rgba(196,171,108,.25); } .svc-full-img { aspect-ratio: 4/3; overflow: hidden; } .svc-full-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; } .svc-full-card:hover .svc-full-img img { transform: scale(1.04); } .svc-full-body { padding: var(--space-24); display: flex; flex-direction: column; flex: 1; gap: 10px; } .svc-full-cat { font-family: var(--font-heading); font-weight: 700; font-size: 10px; color: var(--SAND); letter-spacing: 2.5px; text-transform: uppercase; } .svc-full-h3 { font-family: var(--font-heading); font-weight: 700; font-size: 20px; color: #fff; line-height: 1.2; } .svc-full-desc { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-muted); line-height: 1.65; flex: 1; } .svc-full-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-4); } .svc-full-tags span { padding: var(--space-4) 10px; background: var(--on-dark-06); border: 1px solid var(--on-dark-08); font-family: var(--font-body); font-size: 11px; color: var(--on-dark-45); } /* ─── Problem Signs category blocks ──────────────────────────────────────── */ .signs-category-list { display: flex; flex-direction: column; gap: var(--space-48); } .signs-cat-block { padding: var(--space-40); background: #fff; border: 1px solid rgba(0,0,0,.07); } .signs-cat-header { display: flex; align-items: flex-start; gap: var(--space-20); margin-bottom: 28px; } .signs-cat-icon { width: 56px; height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(26,82,168,.06); } .signs-cat-label { font-family: var(--font-heading); font-weight: 700; font-size: 10px; color: var(--SAND); letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: var(--space-4); } .signs-cat-h3 { font-family: var(--font-heading); font-weight: 800; font-size: 24px; color: var(--CHAR); line-height: 1.1; } .signs-list { display: flex; flex-direction: column; margin-bottom: 28px; } .sign-row { display: flex; align-items: flex-start; gap: var(--space-16); padding: var(--space-16) 0; border-bottom: 1px solid rgba(0,0,0,.06); } .sign-row:last-child { border-bottom: none; } .sign-row-icon { font-size: 20px; flex-shrink: 0; line-height: 1.4; } .sign-row-title { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--CHAR); margin-bottom: 3px; } .sign-row-desc { font-family: var(--font-body); font-size: 13px; color: var(--MUTED); line-height: 1.6; } .sign-row-desc a { color: var(--B); text-decoration: underline; } /* ─── Urgency callout ────────────────────────────────────────────────────── */ .urgency-callout { display: flex; align-items: flex-start; gap: var(--space-24); padding: var(--space-32) 36px; background: rgba(196,171,108,.06); border: 1px solid rgba(196,171,108,.3); flex-wrap: wrap; } .urgency-callout > div { flex: 1; min-width: 240px; } .urgency-title { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--CHAR); margin-bottom: 6px; line-height: 1.3; } .urgency-sub { font-family: var(--font-body); font-size: 14px; color: var(--MUTED); line-height: 1.6; } /* ─── Pricing service blocks ─────────────────────────────────────────────── */ .pricing-service-block { margin-bottom: var(--space-64); } .pricing-service-block:last-of-type { margin-bottom: 0; } .pricing-service-header { margin-bottom: 28px; } .pricing-service-h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(28px, 3.5vw, 42px); color: var(--CHAR); margin-bottom: var(--space-4); line-height: 1.1; } .pricing-service-sub { font-family: var(--font-body); font-size: 14px; color: var(--MUTED); } /* ─── Comparison table ───────────────────────────────────────────────────── */ .comparison-table { border: 1px solid rgba(0,0,0,.08); overflow: hidden; margin-bottom: var(--space-80); } .comp-table-head, .comp-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; } @media (max-width: 767px) { .comp-table-head, .comp-row { grid-template-columns: 1.5fr 1fr 1fr; } .comp-col-head:last-child, .comp-val:last-child { display: none; } } .comp-table-head { background: var(--CHAR); } .comp-col-blank { padding: var(--space-16) var(--space-20); } .comp-col-head { padding: var(--space-16) var(--space-20); font-family: var(--font-heading); font-weight: 700; font-size: 12px; color: var(--on-dark-55); letter-spacing: 1.5px; text-transform: uppercase; text-align: center; } .comp-col-head.us { color: var(--SAND); } .comp-row { border-top: 1px solid rgba(0,0,0,.06); } .comp-row.alt { background: rgba(0,0,0,.02); } .comp-label { padding: 14px var(--space-20); font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--CHAR); } .comp-val { padding: 14px var(--space-20); font-family: var(--font-body); font-size: 13px; color: var(--MUTED); text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; } .comp-val.us { color: var(--B); font-weight: 600; background: rgba(26,82,168,.04); } .comp-val.no { color: rgba(0,0,0,.3); } .comp-val.maybe { color: #d97706; } /* ─── Why Difference grid ────────────────────────────────────────────────── */ .why-grid-diff { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); margin-top: var(--space-40); } @media (max-width: 1023px) { .why-grid-diff { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 639px) { .why-grid-diff { grid-template-columns: 1fr; } } .why-diff-card { padding: var(--space-32); background: #fff; border: 1px solid rgba(0,0,0,.07); transition: border-color .2s, box-shadow .2s; } .why-diff-card:hover { border-color: rgba(26,82,168,.2); box-shadow: 0 4px 24px rgba(0,0,0,.07); } .why-diff-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: rgba(26,82,168,.07); margin-bottom: var(--space-20); } .why-diff-h3 { font-family: var(--font-heading); font-weight: 700; font-size: 20px; color: var(--CHAR); margin-bottom: 10px; line-height: 1.2; } .why-diff-desc { font-family: var(--font-body); font-size: 14px; color: var(--MUTED); line-height: 1.7; } /* ─── Service area state cards ───────────────────────────────────────────── */ .area-states-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: var(--space-40); } @media (max-width: 767px) { .area-states-grid { grid-template-columns: 1fr; } } .area-state-card { padding: 36px; background: #fff; border: 1px solid rgba(0,0,0,.08); } .area-state-header { display: flex; align-items: center; gap: var(--space-20); margin-bottom: var(--space-16); } .area-state-abbr { font-family: var(--font-heading); font-weight: 900; font-size: 48px; color: rgba(26,82,168,.12); line-height: 1; min-width: 64px; } .area-state-h2 { font-family: var(--font-heading); font-weight: 800; font-size: 28px; color: var(--CHAR); margin-bottom: 2px; } .area-state-projects { font-family: var(--font-body); font-size: 12px; color: var(--B); font-weight: 600; } .area-state-desc { font-family: var(--font-body); font-size: 14px; color: var(--MUTED); line-height: 1.65; margin-bottom: var(--space-20); } .area-cities-full { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-24); } .area-cities-full span { padding: var(--space-4) var(--space-12); background: rgba(26,82,168,.07); font-family: var(--font-body); font-size: 12px; color: var(--B); font-weight: 500; } /* ─── Trust stats row ────────────────────────────────────────────────────── */ .trust-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--on-dark-hairline); } @media (max-width: 767px) { .trust-stats-row { grid-template-columns: repeat(2, 1fr); } } .trust-stat { padding: var(--space-40) var(--space-32); text-align: center; border-right: 1px solid var(--on-dark-hairline); } .trust-stat:last-child { border-right: none; } .trust-stat-num { font-family: var(--font-heading); font-weight: 900; font-size: clamp(36px, 4vw, 54px); color: #fff; line-height: 1; margin-bottom: var(--space-8); } .trust-stat-num .gold { color: var(--SAND); } .trust-stat-lbl { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-45); line-height: 1.4; } /* ─── Blog grid ──────────────────────────────────────────────────────────── */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: var(--space-40); } @media (max-width: 1023px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 639px) { .blog-grid { grid-template-columns: 1fr; } } .blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(0,0,0,.07); overflow: hidden; transition: box-shadow .2s; } .blog-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.1); } .blog-img { aspect-ratio: 16/9; overflow: hidden; } .blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; } .blog-card:hover .blog-img img { transform: scale(1.04); } .blog-body { padding: var(--space-24); flex: 1; display: flex; flex-direction: column; gap: var(--space-8); } .blog-cat { font-family: var(--font-heading); font-weight: 700; font-size: 10px; color: var(--B); letter-spacing: 2px; text-transform: uppercase; } .blog-h3 { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--CHAR); line-height: 1.25; } .blog-excerpt { font-family: var(--font-body); font-size: 13px; color: var(--MUTED); line-height: 1.65; flex: 1; } .blog-meta { display: flex; gap: var(--space-8); font-family: var(--font-body); font-size: 12px; color: rgba(0,0,0,.3); padding-top: var(--space-12); border-top: 1px solid rgba(0,0,0,.06); margin-top: auto; } /* ─── Guides grid ────────────────────────────────────────────────────────── */ .guides-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: var(--space-40); } @media (max-width: 1023px) { .guides-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 639px) { .guides-grid { grid-template-columns: 1fr; } } .guide-card { padding: var(--space-32); background: #fff; border: 1px solid rgba(0,0,0,.07); display: flex; flex-direction: column; gap: var(--space-12); } .guide-h3 { font-family: var(--font-heading); font-weight: 700; font-size: 19px; color: var(--CHAR); line-height: 1.25; flex: 1; } .guide-desc { font-family: var(--font-body); font-size: 13px; color: var(--MUTED); line-height: 1.65; } /* ─── Gallery grid ───────────────────────────────────────────────────────── */ .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-40); } @media (max-width: 767px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } } .gallery-item { position: relative; aspect-ratio: 4/3; overflow: hidden; cursor: pointer; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; } .gallery-item:hover img { transform: scale(1.06); } .gallery-overlay { position: absolute; inset: 0; background: var(--on-light-55); display: flex; align-items: flex-end; padding: var(--space-16); opacity: 0; transition: opacity .25s; } .gallery-item:hover .gallery-overlay { opacity: 1; } .gallery-overlay p { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: #fff; } /* ─── Videos grid ────────────────────────────────────────────────────────── */ .videos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: var(--space-40); } @media (max-width: 1023px) { .videos-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 639px) { .videos-grid { grid-template-columns: 1fr; } } .video-card { display: flex; flex-direction: column; gap: var(--space-12); } .video-h3 { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--CHAR); line-height: 1.25; } .video-desc { font-family: var(--font-body); font-size: 13px; color: var(--MUTED); line-height: 1.6; } .video-meta { font-family: var(--font-body); font-size: 12px; color: rgba(0,0,0,.3); } .review-card { padding: 28px; background: #fff; border: 1px solid rgba(0,0,0,.07); display: flex; flex-direction: column; gap: var(--space-12); } .review-text { font-family: var(--font-body); font-size: 14px; color: var(--CHAR); line-height: 1.7; flex: 1; } .review-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-12); padding-top: var(--space-16); border-top: 1px solid rgba(0,0,0,.06); margin-top: auto; } .review-name { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--CHAR); margin-bottom: 2px; } .review-meta { font-family: var(--font-body); font-size: 12px; color: var(--MUTED); } .review-google-badge { display: flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 11px; color: var(--MUTED); flex-shrink: 0; } /* ─── Pagination (generic — reusable on any dark-bg listing page) ────────── */ .pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-8); margin-top: var(--space-56); } .pagination-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--on-dark-muted); background: transparent; border: 1.5px solid var(--on-dark-15); cursor: pointer; transition: background .2s, border-color .2s, color .2s, opacity .2s; } .pagination-btn:hover:not(.active):not(:disabled) { border-color: var(--on-dark-35); color: #fff; } .pagination-btn.active { background: var(--SAND); color: var(--DARK); border-color: var(--SAND); } .pagination-arrow { color: #fff; border-color: var(--on-dark-20); } .pagination-btn:disabled { opacity: .3; cursor: not-allowed; } /* Light variant — #blog-pagination sits on #more-articles' cream background */ #blog-pagination .pagination-btn { color: var(--MUTED); border-color: var(--on-light-border); } #blog-pagination .pagination-btn:hover:not(.active):not(:disabled) { border-color: rgba(10,11,20,.35); color: var(--CHAR); } #blog-pagination .pagination-btn.active { color: var(--DARK); } #blog-pagination .pagination-arrow { color: var(--CHAR); border-color: var(--on-light-border); } /* ─── Reviews page — light surface ─────────────────────────────────────────── src/app/ReviewsPage.tsx moved this page off the dark surface: hero, grid and closing CTA all sit on --WHITE now, and the page builds its own layout with Tailwind utility classes directly in the markup (mirroring the .tsx) instead of bespoke section/container CSS. The shared .vreview-* / .gallery-filter / .pagination-btn rules stay dark by default because the review carousels on resources.html and news-blog.html still use them, so the color overrides below are scoped under .reviews-light (applied only to the grid
) instead of being edited in place. */ .reviews-light .gallery-filter { color: var(--MUTED); border-color: var(--on-light-border); border-radius: 0; } .reviews-light .gallery-filter.active { background: var(--B); color: #fff; border-color: var(--B); } .reviews-light .gallery-filter:hover:not(.active) { color: var(--CHAR); border-color: var(--on-light-35); } /* Cards — white, clickable, open the review lightbox */ .reviews-light .vreview-card { flex: initial; background: var(--WHITE); border-color: var(--on-light-border); cursor: pointer; transition: border-color .2s, transform .2s; } .reviews-light .vreview-card:hover { border-color: var(--B-35); transform: translateY(-4px); } .reviews-light .vreview-thumb { overflow: hidden; } .reviews-light .vreview-thumb-img { transition: transform .5s; } .reviews-light .vreview-card:hover .vreview-thumb-img { transform: scale(1.03); } .reviews-light .vreview-play { width: 48px; height: 48px; } .reviews-light .vreview-play svg { width: 16px; height: 16px; } .reviews-light .vreview-card:hover .vreview-play { transform: scale(1.1); } .reviews-light .vreview-stars { gap: 2px; margin-bottom: var(--space-16); } .reviews-light .vreview-quote-mark { font-size: 40px; color: var(--B-25); line-height: .6; margin-bottom: 10px; } .reviews-light .vreview-text { font-size: 14px; color: var(--on-light-60); margin-bottom: var(--space-20); } .reviews-light .vreview-footer { padding-top: var(--space-16); border-top-color: var(--on-light-07); } .reviews-light .author-avatar { background: var(--on-light-10); } .reviews-light .vreview-name { color: var(--CHAR); } .reviews-light .vreview-loc { color: var(--on-light-35); } .reviews-light .vreview-date { font-family: var(--font-body); font-size: 11px; color: var(--on-light-20); flex-shrink: 0; align-self: flex-start; } /* Category badge — smaller and tighter than the dark-surface .proc-badge */ .reviews-light .proc-badge { top: 12px; left: 12px; padding: 3px var(--space-8); background: var(--B-85); } .reviews-light .proc-badge span { font-weight: 700; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; } /* Light variant — #reviews-pagination sits on the review grid's white background, same pattern as #blog-pagination below for the blog. */ #reviews-pagination .pagination-btn { color: var(--on-light-50); border-color: var(--on-light-15); } #reviews-pagination .pagination-btn:hover:not(.active):not(:disabled) { border-color: var(--on-light-35); color: var(--CHAR); } #reviews-pagination .pagination-btn.active { background: var(--B); color: #fff; border-color: var(--B); } #reviews-pagination .pagination-arrow { color: var(--CHAR); border-color: var(--on-light-border); } /* Light variant — #case-studies-pagination sits on #case-studies' white background (ExpresiaCore/CaseStudies/GridSkin.hbs), same pattern as #reviews-pagination above. Links, not buttons — this pager is plain server-rendered `?page=N` navigation, not a client re-fetch. */ #case-studies-pagination .pagination-btn { color: var(--on-light-50); border-color: var(--on-light-15); } #case-studies-pagination .pagination-btn:hover:not(.active) { border-color: var(--on-light-35); color: var(--CHAR); } #case-studies-pagination .pagination-btn.active { background: var(--B); color: #fff; border-color: var(--B); } #case-studies-pagination .pagination-arrow { color: var(--CHAR); border-color: var(--on-light-border); } /* ─── Review lightbox ──────────────────────────────────────────────────────── Port of components/ReviewModal.tsx — the canonical review lightbox. Clicking any card opens the full quote plus a CTA instead of a bare video player. */ #review-lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: var(--space-16); background: rgba(0,0,0,.85); backdrop-filter: blur(8px); } @media (min-width: 768px) { #review-lightbox { padding: var(--space-24); } } #review-lightbox.open { display: flex; } .rlb-panel { position: relative; width: 100%; max-width: 960px; height: min(82vh, 560px); display: flex; overflow: hidden; background: var(--CHAR); } @media (max-width: 1023px) { .rlb-panel { flex-direction: column; height: min(88vh, 720px); } } .rlb-media { position: relative; width: 52%; flex-shrink: 0; } @media (max-width: 1023px) { .rlb-media { width: 100%; height: 45%; } } .rlb-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .rlb-scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.1) 40%, rgba(0,0,0,.7) 100%); } .rlb-play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--B); border: 3px solid var(--on-dark-25); box-shadow: 0 8px 32px rgba(0,0,0,.5); cursor: pointer; transition: transform .2s; } .rlb-play:hover { transform: scale(1.1); } /* Real playback (ExpresiaCore only — WEBSITE's static mock data has no YoutubeId, so these classes are inert there). Same .playing / :not(:empty) convention as .story-modal-video in SkinJobStories, so a YoutubeId embeds a real iframe on top of the darkened scrim, falling back to the "Video playing…" placeholder when absent. */ .rlb-media.playing .rlb-scrim { background: rgba(0,0,0,.85); } .rlb-media.playing .rlb-play { display: none; } .rlb-playing-text { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 13px; color: var(--on-dark-40); } .rlb-media.playing .rlb-playing-text { display: flex; } .rlb-video { display: none; position: absolute; inset: 0; z-index: 1; } .rlb-video iframe { width: 100%; height: 100%; border: none; } .rlb-media.playing .rlb-video:not(:empty) { display: block; } /* #rlb-video must come before .rlb-playing-text in the markup for this to apply */ .rlb-video:not(:empty) ~ .rlb-playing-text { display: none; } .rlb-media-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: var(--space-16) var(--space-20); } .rlb-badge { font-family: var(--font-heading); font-weight: 700; font-size: 9px; color: #fff; letter-spacing: 2.5px; text-transform: uppercase; background: var(--B-85); padding: var(--space-4) 10px; backdrop-filter: blur(4px); } .rlb-nav { display: flex; align-items: center; gap: var(--space-8); } .rlb-nav button { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); border: 1px solid var(--on-dark-20); backdrop-filter: blur(4px); cursor: pointer; transition: background .2s; } .rlb-nav button:hover { background: var(--on-dark-20); } .rlb-content { flex: 1; display: flex; flex-direction: column; overflow-y: auto; border-left: 1px solid var(--on-dark-hairline); } @media (max-width: 1023px) { .rlb-content { border-left: none; border-top: 1px solid var(--on-dark-hairline); } } .rlb-close-row { display: flex; justify-content: flex-end; padding: 28px var(--space-32) var(--space-16); flex-shrink: 0; } .rlb-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--on-dark-06); border: 1px solid var(--on-dark-10); cursor: pointer; transition: background .2s; } .rlb-close:hover { background: var(--on-dark-10); } .rlb-body { display: flex; flex-direction: column; flex: 1; padding: 0 var(--space-32) var(--space-32); } .rlb-stars { display: flex; gap: var(--space-4); margin-bottom: var(--space-20); } .rlb-quote-mark { font-family: Georgia, serif; font-size: 48px; color: rgba(196,171,108,.2); line-height: .55; margin-bottom: 14px; } .rlb-text { font-family: var(--font-body); font-size: 16px; color: var(--on-dark-75); line-height: 1.8; flex: 1; } .rlb-rule { height: 1px; background: var(--on-dark-hairline); margin: var(--space-24) 0; } .rlb-author { display: flex; align-items: center; gap: var(--space-12); margin-bottom: var(--space-24); } .rlb-author .author-avatar { width: 44px; height: 44px; background: var(--on-dark-08); border: 1.5px solid var(--on-dark-border); } .rlb-author-name { font-family: var(--font-body); font-weight: 700; font-size: 14px; color: #fff; line-height: 1.3; } .rlb-author-meta { font-family: var(--font-body); font-size: 12px; color: var(--on-dark-40); margin-top: 2px; } .rlb-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); width: 100%; padding: var(--space-12) var(--space-24); background: var(--B); font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: #fff; letter-spacing: .3px; border: none; cursor: pointer; transition: opacity .2s; } .rlb-cta:hover { opacity: .9; } /* ─── Shared breadcrumb bar (used by all dark-bg pages) ─────────────────── */ .breadcrumb { background: var(--DARK); border-bottom: 1px solid var(--on-dark-06); } .breadcrumb-inner { max-width: 1440px; margin: 0 auto; padding: var(--space-12) var(--space-56); display: flex; align-items: center; gap: var(--space-8); } .breadcrumb a { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-45); text-decoration: none; transition: color .15s; } .breadcrumb a:hover { color: var(--on-dark-85); } .breadcrumb-sep { color: var(--on-dark-25); font-size: 12px; } .breadcrumb-cur { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-85); font-weight: 600; } @media (max-width: 767px) { .breadcrumb-inner { padding: var(--space-12) var(--space-20); } } /* ─── Shared dark image-hero (used by our-difference, psi pages, etc.) ───── */ .img-hero { position: relative; width: 100%; overflow: hidden; min-height: 560px; } .img-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .img-hero-overlay { position: absolute; inset: 0; background: linear-gradient(110deg, var(--on-light-92) 0%, rgba(10,11,20,.68) 55%, rgba(10,11,20,.40) 100%); } .img-hero-noise { position: absolute; inset: 0; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 256px; } .img-hero-inner { position: relative; z-index: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: var(--space-96) var(--space-56) var(--space-80); } @media (max-width: 767px) { .img-hero-inner { padding: var(--space-64) var(--space-32) var(--space-64); } } .img-hero-h1 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(36px, 5vw, 64px); color: #fff; line-height: 1.0; letter-spacing: -1.5px; margin-bottom: var(--space-24); } .img-hero-sub { font-family: var(--font-body); font-size: 18px; color: rgba(255,255,255,.62); line-height: 1.75; margin-bottom: var(--space-40); } /* Eyebrow — inline line + label (use .img-hero-eyebrow-line for the gold bar) */ .img-hero-eyebrow { display: flex; align-items: center; gap: var(--space-8); margin-bottom: var(--space-20); font-family: var(--font-heading); font-weight: 600; font-size: 11px; color: var(--SAND); letter-spacing: 4px; text-transform: uppercase; } .img-hero-eyebrow-line { width: 20px; height: 2px; background: var(--SAND); flex-shrink: 0; } /* Button group */ .img-hero-btns { display: flex; align-items: center; gap: var(--space-16); flex-wrap: wrap; } /* Primary button — default: white bg / dark text */ .img-hero-btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: var(--space-16) 28px; background: #fff; font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--NAVY); border: none; cursor: pointer; text-decoration: none; transition: background .2s, color .2s; } .img-hero-btn-primary:hover { background: var(--SAND); } /* Modifier: blue brand CTA */ .img-hero-btn-primary.blue { background: var(--B); color: #fff; gap: var(--space-12); } .img-hero-btn-primary.blue:hover { background: var(--SAND); } /* Outline button (secondary) */ .img-hero-btn-outline { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-16) 28px; font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--on-dark-85); border: 1px solid var(--on-dark-35); text-decoration: none; transition: background .2s; } .img-hero-btn-outline:hover { background: var(--on-dark-08); } /* Text call link */ .img-hero-call { font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--on-dark-muted); border-bottom: 1px solid var(--on-dark-20); padding-bottom: 2px; } /* ════════════════════════════════════════════════════════════════════════════ REUSABLE SECTION UTILITIES ════════════════════════════════════════════════════════════════════════════ */ /* ─── Container ──────────────────────────────────────────────────────────── */ .section-container { max-width: 1440px; margin: 0 auto; padding: 0 var(--space-56); } @media (max-width: 767px) { .section-container { padding: 0 var(--space-32); } } /* ─── Section Padding ────────────────────────────────────────────────────── */ .section-py { padding-top: var(--space-80); padding-bottom: var(--space-80); } .section-py-lg { padding-top: 112px; padding-bottom: 112px; } /* ─── Background Utilities ───────────────────────────────────────────────── */ .bg-dark { background: var(--DARK); } .bg-char { background: var(--CHAR); } .bg-cream { background: var(--CREAM); } .bg-navy { background: var(--NAVY); } .bg-panel { background: var(--surface-panel); } .border-top-subtle { border-top: 1px solid var(--on-light-07); } /* ─── Eyebrow Patterns ───────────────────────────────────────────────────── */ .eyebrow-left { display: flex; align-items: center; gap: var(--space-8); margin-bottom: var(--space-16); } .eyebrow-left .line { width: 20px; height: 2px; background: var(--SAND); flex-shrink: 0; } .eyebrow-left .line.blue { background: var(--B); } .eyebrow-left span { font-family: var(--font-heading); font-weight: 600; font-size: 11px; color: var(--SAND); letter-spacing: 4px; text-transform: uppercase; } .eyebrow-left span.blue { color: var(--B); } .eyebrow-center { display: flex; align-items: center; justify-content: center; gap: var(--space-12); margin-bottom: var(--space-16); } .eyebrow-center .line { width: 20px; height: 2px; } .eyebrow-center .line-sand { background: var(--SAND); } .eyebrow-center .line-blue { background: var(--B); } .eyebrow-center span { font-family: var(--font-heading); font-weight: 600; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; } .eyebrow-center span.sand { color: var(--SAND); } .eyebrow-center span.blue { color: var(--B); } /* ─── Section Headers ────────────────────────────────────────────────────── */ .section-hd-center { text-align: center; margin-bottom: var(--space-64); } .section-h2-white { font-family: var(--font-heading); font-weight: 800; font-size: clamp(36px, 4.5vw, 56px); color: #fff; line-height: 1.05; letter-spacing: -1px; } .section-sub-white { font-family: var(--font-body); font-size: 17px; color: var(--on-dark-55); } .section-sub-light { font-family: var(--font-body); font-size: 17px; color: var(--on-light-55); } .section-sub-muted { font-family: var(--font-body); font-size: 17px; color: var(--MUTED); } /* ─── Button Center ──────────────────────────────────────────────────────── */ .btn-center { display: flex; justify-content: center; } /* ─── Spacing Utilities ──────────────────────────────────────────────────── */ .mt-4 { margin-top: var(--space-16); } .mt-12 { margin-top: var(--space-48); } .mb-4 { margin-bottom: var(--space-16); } .mb-5 { margin-bottom: var(--space-20); } .mb-16 { margin-bottom: var(--space-64); } /* ════════════════════════════════════════════════════════════════════════════ SHARED COMPONENTS ════════════════════════════════════════════════════════════════════════════ */ /* ─── Trust Bar ──────────────────────────────────────────────────────────── */ /* WHITE — matches OurDifferencePage.tsx's current TrustBar (SURFACE.base); replaces an earlier --CHAR treatment. */ .trust-bar { background: var(--WHITE); border-bottom: 1px solid var(--on-light-06); } .trust-bar-grid { max-width: 1440px; margin: 0 auto; padding: var(--space-56); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-32); } @media (max-width: 767px) { .trust-bar-grid { grid-template-columns: repeat(2, 1fr); padding: var(--space-40) var(--space-32); } } .trust-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-8); } .trust-val { font-family: var(--font-heading); font-weight: 800; font-size: clamp(28px, 3vw, 40px); color: var(--B); line-height: 1; } .trust-lbl { font-family: var(--font-body); font-size: 11px; color: var(--on-light-40); letter-spacing: 1.5px; text-transform: uppercase; } /* ─── Process Section (WHITE — matches OurDifferencePage.tsx's ProcessSection, see ExpresiaCore/OurDifference/README.md's "React vs. WEBSITE" note) ───── Grid/card layout/spacing live as Tailwind utility classes directly in the markup (grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5, group flex flex-col h-full overflow-hidden, relative aspect-[3/2], absolute inset-0, flex-1 p-6, top-4 left-4 px-2.5 py-1) per this file's Tailwind convention — only color/typography stay as classes here. */ .proc-card { background: var(--WHITE); border: 1px solid var(--on-light-border); } .proc-img-ov { position: absolute; inset: 0; background: linear-gradient(0deg, var(--on-light-60) 0%, transparent 65%); } .proc-badge { background: var(--B); } .proc-badge span { font-family: var(--font-heading); font-weight: 800; font-size: 12px; color: #fff; letter-spacing: 1px; } .proc-h3 { font-family: var(--font-heading); font-weight: 800; font-size: 18px; color: var(--CHAR); line-height: 1.2; margin-bottom: var(--space-8); } .proc-desc { font-family: var(--font-body); font-size: 14px; color: var(--on-light-50); line-height: 1.7; } /* ─── Story Two-Col ──────────────────────────────────────────────────────── */ .story-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-96); align-items: center; } @media (max-width: 1023px) { .story-two-col { grid-template-columns: 1fr; gap: var(--space-48); } } .story-h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px, 4vw, 52px); color: var(--CHAR); line-height: 1.05; letter-spacing: -1px; margin-bottom: var(--space-24); } .story-p { font-family: var(--font-body); font-size: 17px; color: var(--on-light-60); line-height: 1.8; margin-bottom: 18px; } .btn-outline-wht { display: inline-flex; align-items: center; gap: var(--space-8); padding: 14px 28px; border: 1.5px solid var(--on-dark-20); font-family: var(--font-body); font-weight: 600; font-size: 14px; color: #fff; background: none; cursor: pointer; margin-top: var(--space-32); transition: border-color .2s; } .btn-outline-wht:hover { border-color: var(--on-dark-40); } .story-right { display: flex; flex-direction: column; gap: var(--space-24); } .story-img-box { position: relative; overflow: hidden; border-radius: 2px; } .story-img-box img { width: 100%; height: 340px; object-fit: cover; display: block; } .story-img-grad { position: absolute; inset: 0; background: linear-gradient(0deg, var(--on-light-55) 0%, transparent 55%); } .story-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); } .story-stat-box { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-32) var(--space-16); text-align: center; background: var(--WHITE); border: 1px solid var(--on-light-border); } .story-stat-n { font-family: var(--font-heading); font-weight: 800; font-size: clamp(32px, 3.5vw, 48px); color: var(--B); line-height: 1; margin-bottom: 6px; } .story-stat-l { font-family: var(--font-body); font-size: 13px; color: var(--on-light-40); } /* ─── Before & After Section (WHITE — matches OurDifferencePage.tsx's BeforeAfterSection/BeforeAfterSlider) ──────────────────────────────────── */ .ba-eyebrow { display: flex; align-items: center; gap: var(--space-12); margin-bottom: var(--space-16); } .ba-eyebrow .line { width: 24px; height: 2px; background: var(--B); } .ba-eyebrow span { font-family: var(--font-heading); font-weight: 700; font-size: 11px; color: var(--B); letter-spacing: 4px; text-transform: uppercase; } .ba-h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px, 4.5vw, 56px); color: var(--CHAR); line-height: 1.05; letter-spacing: -1px; } .ba-see-all { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--B); background: none; border: none; cursor: pointer; } .ba-see-all:hover { opacity: .8; } /* Missing this was the whole "choppy" bug — JS sets #ba-track's transform on every prev/next click, but with no CSS transition it jumped instantly instead of sliding. Same easing .testimonials-track already uses, for the same "large card slides across" visual weight. */ #ba-track { transition: transform .6s cubic-bezier(0.77,0,0.175,1); } .ba-card { background: var(--WHITE); border: 1px solid var(--on-light-border); } /* Drag-to-compare slider — .ba-slider-before is the clipped "before" layer on top of the full-size "after" image underneath; JS only ever updates its inline width + the divider/handle's left offset. */ .ba-slider { position: relative; width: 100%; overflow: hidden; aspect-ratio: 4/3; cursor: ew-resize; touch-action: none; user-select: none; } .ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .ba-slider-before { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .ba-slider-label { position: absolute; top: var(--space-16); padding: var(--space-4) 10px; background: rgba(10,11,20,.65); font-family: var(--font-heading); font-weight: 700; font-size: 10px; color: #fff; letter-spacing: 2px; text-transform: uppercase; pointer-events: none; } .ba-slider-label-before { left: var(--space-16); } .ba-slider-label-after { right: var(--space-16); } .ba-slider-divider { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 10px rgba(10,11,20,.35); pointer-events: none; } .ba-slider-handle { position: absolute; top: 50%; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 4px 16px rgba(10,11,20,.35); display: flex; align-items: center; justify-content: center; pointer-events: none; transform: translate(-50%,-50%); } .ba-content { display: flex; flex-direction: column; justify-content: center; padding: var(--space-32) var(--space-40); } .ba-tag { display: inline-flex; align-items: center; padding: var(--space-4) 10px; margin-bottom: var(--space-16); width: fit-content; background: var(--B-25); border: 1px solid var(--B-35); } .ba-tag span { font-family: var(--font-heading); font-weight: 600; font-size: 10px; color: var(--B); letter-spacing: 2px; text-transform: uppercase; } .ba-title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(20px, 2vw, 26px); color: var(--CHAR); line-height: 1.25; margin-bottom: var(--space-8); } .ba-loc { font-family: var(--font-body); font-size: 13px; color: var(--MUTED); margin-bottom: var(--space-16); } .ba-desc { font-family: var(--font-body); font-size: 14px; color: var(--on-light-body); line-height: 1.7; margin-bottom: var(--space-20); } .ba-worklist { display: flex; flex-direction: column; gap: var(--space-8); } .ba-work-item { display: flex; align-items: flex-start; gap: 10px; } .ba-work-item svg { flex-shrink: 0; margin-top: 2px; } .ba-work-item span { font-family: var(--font-body); font-size: 13.5px; color: var(--on-light-body); line-height: 1.5; } .ba-dots { display: flex; justify-content: center; gap: var(--space-8); margin-top: var(--space-40); } .ba-dot { height: 8px; border-radius: 4px; background: var(--on-light-15); border: none; cursor: pointer; padding: 0; transition: width .25s, background .25s; } .ba-dot.active { background: var(--B); } /* ─── Referral Program Section (CREAM — matches OurDifferencePage.tsx's ReferralProgramSection) ────────────────────────────────────────────────── */ .rp-eyebrow { display: flex; align-items: center; gap: var(--space-8); margin-bottom: var(--space-16); } .rp-eyebrow .line { width: 20px; height: 2px; background: var(--B); } .rp-eyebrow span { font-family: var(--font-heading); font-weight: 600; font-size: 11px; color: var(--B); letter-spacing: 4px; text-transform: uppercase; } .rp-h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px, 4vw, 52px); color: var(--CHAR); line-height: 1.05; letter-spacing: -1px; margin-bottom: var(--space-20); max-width: 480px; } .rp-desc { font-family: var(--font-body); font-size: 16px; color: var(--MUTED); line-height: 1.75; max-width: 460px; margin-bottom: var(--space-32); } .rp-tagline { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--CHAR); margin-bottom: var(--space-32); } .rp-cta { background: var(--B); font-family: var(--font-body); font-weight: 700; font-size: 14px; color: #fff; transition: opacity .2s; } .rp-cta:hover { opacity: .9; } .rp-step { background: var(--WHITE); border: 1.5px solid var(--NAVY-14); } .rp-step-n { font-family: var(--font-heading); font-weight: 800; font-size: 13px; color: var(--SAND); letter-spacing: 1.5px; padding-top: 2px; } .rp-step-title { font-family: var(--font-heading); font-weight: 800; font-size: 17px; color: var(--CHAR); margin-bottom: 6px; } .rp-step-desc { font-family: var(--font-body); font-size: 14px; color: var(--MUTED); line-height: 1.65; } /* ─── Love Well Initiative Section (WHITE — matches OurDifferencePage.tsx's LoveWellInitiativeSection) ────────────────────────────────────────────── */ .lw-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-64); align-items: stretch; } @media (min-width: 1024px) { .lw-grid { grid-template-columns: 1fr 1fr; gap: var(--space-96); } } .lw-media { position: relative; width: 100%; height: 100%; min-height: 380px; border-radius: 2px; overflow: hidden; } .lw-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .lw-media-grad { position: absolute; inset: 0; background: linear-gradient(0deg, var(--on-light-55) 0%, transparent 55%), var(--on-light-20); } .lw-media-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .lw-media .play-btn { width: 64px; height: 64px; } .lw-h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px, 4vw, 52px); color: var(--CHAR); line-height: 1.05; letter-spacing: -1px; margin-bottom: var(--space-12); max-width: 500px; } .lw-see-full { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--B); margin-bottom: var(--space-32); } .lw-see-full svg { transition: transform .2s; } .lw-see-full:hover svg { transform: translateX(2px); } .lw-desc { font-family: var(--font-body); font-size: 16px; color: var(--on-light-60); line-height: 1.8; max-width: 480px; margin-bottom: var(--space-32); } .lw-tags { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); max-width: 420px; margin-bottom: var(--space-32); } .lw-tag { padding: var(--space-12) var(--space-16); background: var(--on-light-wash); border: 1px solid var(--on-light-border); } .lw-tag span { font-family: var(--font-body); font-size: 13px; color: var(--on-light-65); font-weight: 500; } .lw-ctas { display: flex; flex-wrap: wrap; gap: var(--space-12); } .lw-outline-btn { border: 1.5px solid var(--on-light-border); font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--CHAR); background: none; cursor: pointer; transition: border-color .2s; } .lw-outline-btn:hover { border-color: var(--on-light-30); } /* ─── Love Well Initiative — dedicated page (love-well-initiative.html), ported from LoveWellPage.tsx. `lwp-` prefix (Love Well Page) keeps these separate from the `.lw-*` teaser block above (our-difference.html) — same initiative, two different pieces of markup. ──────────────────────────── */ .lwp-stat-n { font-family: var(--font-heading); font-weight: 800; font-size: 30px; color: var(--CHAR); letter-spacing: -1px; line-height: 1; } .lwp-stat-l { font-family: var(--font-body); font-size: 13px; color: var(--MUTED); margin-top: var(--space-4); } .lwp-feat-eyebrow { font-family: var(--font-heading); font-weight: 700; font-size: 10.5px; color: var(--B); letter-spacing: 3px; text-transform: uppercase; } .lwp-feat-media { position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; background: var(--CREAM); border: 1px solid var(--on-light-border); cursor: pointer; } .lwp-feat-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .lwp-feat-media:hover img { transform: scale(1.04); } .lwp-feat-media-scrim { position: absolute; inset: 0; background: var(--on-dark-25); } .lwp-feat-media .play-btn { width: 64px; height: 64px; } .lwp-feat-tag { display: inline-block; padding: var(--space-4) var(--space-12); margin-bottom: var(--space-16); background: var(--SAND-18); border: 1px solid var(--SAND-40); } .lwp-feat-tag span { font-family: var(--font-heading); font-weight: 700; font-size: 10px; color: var(--SAND-DARK); letter-spacing: 1.5px; } .lwp-feat-h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(24px,2.6vw,36px); color: var(--CHAR); line-height: 1.1; letter-spacing: -1px; margin-bottom: var(--space-16); } .lwp-feat-desc { font-family: var(--font-body); font-size: 16px; color: var(--on-light-60); line-height: 1.8; margin-bottom: var(--space-24); max-width: 480px; } .lwp-year-chip { padding: var(--space-8) var(--space-16); font-family: var(--font-body); font-size: 13px; font-weight: 500; background: transparent; color: var(--MUTED); border: 1.5px solid var(--on-light-border); cursor: pointer; transition: all .15s; } .lwp-year-chip:hover { border-color: var(--on-light-30); } .lwp-year-chip.active { background: var(--B); color: #fff; border-color: var(--B); } .lwp-grid { display: grid; grid-template-columns: 1fr; column-gap: var(--space-24); row-gap: var(--space-40); } @media (min-width: 640px) { .lwp-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .lwp-grid { grid-template-columns: 1fr 1fr 1fr; } } .lwp-card { display: flex; flex-direction: column; gap: var(--space-12); cursor: pointer; } .lwp-card-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--CREAM); border: 1px solid var(--on-light-border); } .lwp-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .lwp-card:hover .lwp-card-media img { transform: scale(1.05); } .lwp-card-year { position: absolute; top: 8px; left: 8px; padding: 2px 8px; background: var(--on-dark-70); } .lwp-card-year span { font-family: var(--font-heading); font-weight: 700; font-size: 9px; color: #fff; letter-spacing: 1px; } .lwp-card-media .lw-media-overlay { background: var(--on-dark-20); } .lwp-card-media .play-btn { width: 44px; height: 44px; } .lwp-card-title { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--CHAR); line-height: 1.4; margin-bottom: var(--space-4); } .lwp-card-desc { font-family: var(--font-body); font-size: 12px; color: var(--MUTED); line-height: 1.5; } .lwp-empty { padding: var(--space-56) var(--space-32); text-align: center; background: var(--CREAM); border: 1px solid var(--on-light-border); } .lwp-empty p { font-family: var(--font-body); font-size: 15px; color: var(--MUTED); margin-bottom: var(--space-16); } .lwp-empty button { background: none; border: none; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--B); padding: 0; display: inline-flex; align-items: center; gap: var(--space-8); } /* ─── Before & After — dedicated page (before-and-after.html), ported from BeforeAfterPage.tsx. `bap-` prefix (Before After Page) — deliberately NOT `ba-`, which OurDifference/BeforeAfterSkin.hbs's teaser carousel already owns (`.ba-card`/`.ba-slider`/`.ba-tag`/etc., styled a few hundred lines above). Some of this page's own values genuinely differ from the teaser's — e.g. this page's `.bap-tag` background is rgba(26,82,168,.1) per BeforeAfterPage.tsx's own inline style, not the teaser's var(--B-25) — so reusing the `.ba-` names here would have silently redefined those shared selectors out from under the teaser (last rule in the cascade wins on every page that loads main.css, teaser included). ── */ .bap-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-16) var(--space-12); text-align: center; cursor: pointer; border: none; transition: background .15s; background: var(--WHITE); } .bap-stat.active { background: var(--B); } .bap-stat-label { font-family: var(--font-heading); font-weight: 800; font-size: clamp(13px,1.15vw,15px); color: var(--B); line-height: 1.25; margin-bottom: 3px; } .bap-stat.active .bap-stat-label { color: #fff; } .bap-stat-val { font-family: var(--font-body); font-size: 11px; color: rgba(10,11,20,.45); letter-spacing: .5px; } .bap-stat.active .bap-stat-val { color: rgba(255,255,255,.75); } .bap-slider { position: relative; width: 100%; overflow: hidden; aspect-ratio: 4/3; cursor: ew-resize; touch-action: none; user-select: none; } .bap-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .bap-slider-before-wrap { position: absolute; inset: 0; pointer-events: none; } .bap-slider-label { position: absolute; top: var(--space-16); padding: var(--space-4) 10px; background: rgba(10,11,20,.65); font-family: var(--font-heading); font-weight: 700; font-size: 10px; color: #fff; letter-spacing: 2px; text-transform: uppercase; pointer-events: none; } .bap-slider-label-before { left: var(--space-16); } .bap-slider-label-after { right: var(--space-16); } .bap-slider-line { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; transform: translateX(-1px); box-shadow: 0 0 10px rgba(0,0,0,.35); pointer-events: none; } .bap-slider-handle { position: absolute; top: 50%; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: translate(-50%,-50%); background: #fff; box-shadow: 0 4px 16px rgba(10,11,20,.35); pointer-events: none; } .bap-tag { display: inline-flex; align-items: center; padding: var(--space-4) 10px; margin-bottom: var(--space-16); background: rgba(26,82,168,.1); border: 1px solid rgba(26,82,168,.2); width: fit-content; } .bap-tag span { font-family: var(--font-heading); font-weight: 600; font-size: 10px; color: var(--B); letter-spacing: 2px; text-transform: uppercase; } .bap-title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(20px,2vw,26px); color: var(--CHAR); line-height: 1.25; margin-bottom: var(--space-8); } .bap-loc { font-family: var(--font-body); font-size: 13px; color: var(--MUTED); margin-bottom: var(--space-16); } .bap-desc { font-family: var(--font-body); font-size: 14px; color: #3D4152; line-height: 1.7; margin-bottom: var(--space-20); } .bap-work-item { display: flex; align-items: flex-start; gap: 10px; } .bap-work-item span { font-family: var(--font-body); font-size: 13.5px; color: #3D4152; line-height: 1.5; } .bap-page-arrow { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--CHAR); background: none; cursor: pointer; transition: opacity .15s; } .bap-page-arrow:disabled { opacity: .3; cursor: default; } .bap-page-num { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 600; font-size: 13px; cursor: pointer; background: none; color: var(--CHAR); border: 1.5px solid var(--on-light-border); transition: all .15s; } .bap-page-num.active { background: var(--B); color: #fff; border-color: var(--B); } .bap-page-ellipsis { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--MUTED); } /* ─── Pledge Section (PANEL — single ledger + wax-seal badge, matches OurDifferencePage.tsx's current PledgeSection; see ExpresiaCore/OurDifference/README.md's "React vs. WEBSITE" note. Replaces the earlier two-color-coded-boxes layout.) ────────────────────────────── */ .pledge-hd { margin-bottom: var(--space-56); } .pledge-hd-row { display: flex; flex-direction: column; gap: var(--space-24); } @media (min-width: 1024px) { .pledge-hd-row { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .pledge-h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(36px, 4.5vw, 56px); color: #fff; line-height: 1.0; letter-spacing: -1px; max-width: 600px; } .pledge-sub { font-family: var(--font-body); font-size: 16px; color: var(--on-dark-body); line-height: 1.7; max-width: 420px; } /* One sheet split by a hairline divider, not two boxes. */ .pledge-ledger { position: relative; background: var(--WHITE); border: 1px solid var(--on-light-10); } .pledge-two-col { display: grid; grid-template-columns: 1fr 1fr; } @media (max-width: 1023px) { .pledge-two-col { grid-template-columns: 1fr; } } .pledge-col { padding: var(--space-40) var(--space-48); } @media (max-width: 767px) { .pledge-col { padding: var(--space-32) var(--space-24); } } .pledge-col-never { border-right: 1px solid var(--on-light-10); } @media (max-width: 1023px) { .pledge-col-never { border-right: none; border-bottom: 1px solid var(--on-light-10); } } .pledge-col-hd { display: flex; align-items: center; gap: var(--space-12); margin-bottom: var(--space-28); } .pledge-icon-n, .pledge-icon-a { display: flex; flex-shrink: 0; } .pledge-col-title { font-family: var(--font-heading); font-weight: 800; font-size: 24px; color: var(--CHAR); letter-spacing: -0.5px; } .pledge-col-body { display: flex; flex-direction: column; } .pledge-item { display: flex; gap: var(--space-16); padding: var(--space-16) 0; } .pledge-item:not(:first-child) { border-top: 1px solid var(--on-light-07); } .pledge-bar, .pledge-check { flex-shrink: 0; margin-top: 3px; } .pledge-item-title { font-family: var(--font-body); font-weight: 700; font-size: 14.5px; color: var(--CHAR); margin-bottom: 3px; } .pledge-item-desc { font-family: var(--font-body); font-size: 14px; color: var(--MUTED); line-height: 1.7; } /* Wax-seal badge straddling the divider — desktop/tablet only, where the divider it straddles actually exists (grid-cols-2). */ .pledge-badge { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 88px; height: 88px; border-radius: 50%; flex-direction: column; align-items: center; justify-content: center; background: var(--NAVY); border: 4px solid var(--WHITE); box-shadow: 0 10px 28px rgba(10,11,20,.18); } @media (min-width: 1024px) { .pledge-badge { display: flex; } } .pledge-badge span { font-family: var(--font-heading); font-weight: 700; font-size: 8.5px; color: var(--SAND); letter-spacing: 2px; text-transform: uppercase; margin-top: 3px; } /* ─── Bento Grid ─────────────────────────────────────────────────────────── */ .bento-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-48); align-items: start; } @media (max-width: 1023px) { .bento-two-col { grid-template-columns: 1fr; gap: var(--space-32); } } .bento-col { display: flex; flex-direction: column; gap: var(--space-48); } .bento-col-offset { margin-top: var(--space-64); } @media (max-width: 1023px) { .bento-col-offset { margin-top: 0; } } #case-studies-load-more-wrap { margin-top: var(--space-48); } @media (max-width: 1023px) { #case-studies-load-more-wrap { margin-top: var(--space-32); } } .bento-card { position: relative; overflow: hidden; cursor: pointer; border: 1px solid rgba(0,0,0,.09); } .bento-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; } .bento-card:hover img { transform: scale(1.05); } .bento-169 { aspect-ratio: 16/9; min-height: 260px; } .bento-11 { aspect-ratio: 1/1; min-height: 260px; } .bento-fill { min-height: 380px; } .bento-ov-perm { position: absolute; inset: 0; background: linear-gradient(0deg, var(--on-light-92) 0%, var(--on-light-border) 60%); } .bento-ov-hover { position: absolute; inset: 0; background: rgba(10,11,20,.58); opacity: 0; transition: opacity .4s; } .bento-card:hover .bento-ov-hover { opacity: 1; } .bento-chip-b { position: absolute; top: 16px; left: 16px; padding: var(--space-4) var(--space-12); background: rgba(196,171,108,.18); border: 1px solid rgba(196,171,108,.4); } .bento-chip-b span { font-family: var(--font-heading); font-weight: 600; font-size: 10px; color: var(--SAND); letter-spacing: 2px; text-transform: uppercase; } .bento-default { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px; transition: opacity .2s; } .bento-card:hover .bento-default { opacity: 0; } .bento-hov { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; opacity: 0; transform: translateY(14px); transition: opacity .42s, transform .42s cubic-bezier(0.22,1,0.36,1); } .bento-card:hover .bento-hov { opacity: 1; transform: translateY(0); } .bento-h3 { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: #fff; line-height: 1.15; letter-spacing: -0.3px; } .bento-h3-hov { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: #fff; line-height: 1.15; letter-spacing: -0.3px; margin-bottom: var(--space-12); } .bento-list { display: flex; flex-direction: column; gap: var(--space-8); margin-bottom: var(--space-20); } .bento-li { display: flex; align-items: flex-start; gap: 10px; } .bento-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--SAND); flex-shrink: 0; margin-top: 7px; } .bento-li-txt { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-75); line-height: 1.6; } .btn-bento { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--SAND); background: none; border: none; cursor: pointer; padding: 0; } /* ─── Project Cards ──────────────────────────────────────────────────────── */ .proj-hd { display: flex; flex-direction: column; gap: var(--space-24); margin-bottom: var(--space-48); } @media (min-width: 768px) { .proj-hd { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .proj-h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(36px, 4.5vw, 56px); color: #fff; line-height: 1.05; letter-spacing: -1px; } .btn-see-all { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--SAND); background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; } .proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-20); } @media (max-width: 1023px) { .proj-grid { grid-template-columns: 1fr; } } .proj-card { display: flex; flex-direction: column; background: var(--CHAR); border: 1px solid var(--on-dark-hairline); } .proj-card-img { position: relative; aspect-ratio: 3/2; overflow: hidden; } .proj-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; } .proj-card:hover .proj-card-img img { transform: scale(1.04); } .proj-card-img-ov { position: absolute; inset: 0; background: linear-gradient(0deg, var(--on-light-50) 0%, transparent 60%); } .proj-tag { position: absolute; top: 16px; left: 16px; padding: var(--space-4) var(--space-12); background: rgba(196,171,108,.15); border: 1px solid rgba(196,171,108,.35); } .proj-tag span { font-family: var(--font-heading); font-weight: 600; font-size: 10px; color: var(--SAND); letter-spacing: 2px; text-transform: uppercase; } .proj-body { padding: 28px; display: flex; flex-direction: column; flex: 1; } .proj-h3 { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: #fff; line-height: 1.2; margin-bottom: 10px; } .proj-desc { font-family: var(--font-body); font-size: 14px; color: var(--on-dark-55); line-height: 1.7; flex: 1; margin-bottom: var(--space-16); } .btn-story { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--SAND); background: none; border: none; cursor: pointer; padding: 0; } /* ─── Certifications ─────────────────────────────────────────────────────── */ /* CREAM — matches OurDifferencePage.tsx's current CertificationsSection (SURFACE.alt). The right column's "Industry affiliations" logo grid was replaced with React's own "Awards" teaser grid (3 real award cards + "See all (N)" link to a dedicated Awards page) — the affiliations grid this used to hold (`.affil-*`, deleted below, confirmed page-exclusive before removal) has no React counterpart at all anymore. See ExpresiaCore/OurDifference/README.md's "React vs. WEBSITE" note. */ .cert-ey { display: flex; align-items: center; gap: var(--space-12); margin-bottom: var(--space-16); } .cert-ey .line { width: 32px; height: 2px; background: var(--B); } .cert-ey span { font-family: var(--font-heading); font-weight: 600; font-size: 11px; color: var(--B); letter-spacing: 3.5px; text-transform: uppercase; } .cert-hd-row { display: flex; flex-direction: column; gap: var(--space-24); } @media (min-width: 1024px) { .cert-hd-row { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .cert-h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px, 4vw, 52px); color: var(--CHAR); line-height: 1.05; letter-spacing: -1px; } .cert-sub { font-family: var(--font-body); font-size: 16px; color: var(--on-light-50); line-height: 1.7; max-width: 420px; } .cert-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--on-light-06); border: 1px solid var(--on-light-border); margin-bottom: var(--space-64); } @media (max-width: 767px) { .cert-stats-grid { grid-template-columns: repeat(2, 1fr); } } .cert-stat-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-40) var(--space-24); text-align: center; background: var(--WHITE); } .cert-stat-n { font-family: var(--font-heading); font-weight: 800; font-size: clamp(36px, 4vw, 52px); color: var(--B); line-height: 1; margin-bottom: var(--space-8); } .cert-stat-l { font-family: var(--font-body); font-size: 13px; color: var(--on-light-45); } .cert-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-80); } @media (max-width: 1023px) { .cert-two-col { grid-template-columns: 1fr; gap: var(--space-48); } } .cert-col-lbl { font-family: var(--font-heading); font-weight: 600; font-size: 11px; color: var(--B); letter-spacing: 3.5px; text-transform: uppercase; margin-bottom: var(--space-16); } .cert-chips { display: flex; flex-direction: column; gap: var(--space-12); } .cert-chip { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-16) var(--space-20); background: var(--WHITE); border: 1px solid var(--on-light-border); } .cert-chip-icon { font-family: var(--font-heading); font-weight: 800; font-size: 16px; color: var(--B); } .cert-chip-lbl { font-family: var(--font-body); font-size: 14px; color: var(--CHAR); font-weight: 500; } .award-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-12); } .award-tile { display: flex; flex-direction: column; gap: var(--space-8); background: none; border: none; padding: 0; text-align: left; cursor: pointer; } .award-thumb { position: relative; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--WHITE); border: 1px solid var(--on-light-border); } .award-thumb img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-12); transition: transform .3s; } .award-tile:hover .award-thumb img { transform: scale(1.05); } .award-badge { position: absolute; top: var(--space-8); left: var(--space-8); padding: 2px var(--space-8); background: var(--SAND-18); border: 1px solid var(--SAND-40); } .award-badge span { font-family: var(--font-heading); font-weight: 700; font-size: 9px; color: var(--SAND-DARK); letter-spacing: 1px; } .award-title { font-family: var(--font-body); font-weight: 600; font-size: 11px; color: var(--CHAR); line-height: 1.4; } /* Extensions for the standalone Awards page's grid cards (ExpresiaCore/Awards/ GridSkin.hbs) — same .award-tile/.award-thumb/.award-badge/.award-title base as the Certifications teaser above, plus the gold hover-rule, lift, org line and no-image fallback AwardsPage.tsx's own AwardCard has that the smaller teaser card doesn't. */ .award-thumb { transition: transform .3s, box-shadow .3s; } .award-tile:hover .award-thumb { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(10,11,20,.12); } .award-thumb-rule { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--SAND); transform: scaleX(0); transform-origin: left; transition: transform .3s; } .award-tile:hover .award-thumb-rule { transform: scaleX(1); } .award-thumb-fallback { font-family: var(--font-heading); font-weight: 800; font-size: 11px; color: var(--B); letter-spacing: .5px; text-align: center; padding: var(--space-12); line-height: 1.3; } .award-org { font-family: var(--font-body); font-size: 11px; color: var(--MUTED); } /* ─── Awards page (Featured strip + year filter/ledger + detail modal) ───── */ .awd-featured-h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(28px, 3.2vw, 42px); color: var(--WHITE); letter-spacing: -1px; line-height: 1.05; } .awd-stat-n { font-family: var(--font-heading); font-weight: 800; font-size: 30px; color: var(--WHITE); line-height: 1; } .awd-stat-l { font-family: var(--font-body); font-size: 11px; color: var(--on-dark-muted); letter-spacing: .5px; } .awd-feat-card { background: var(--on-dark-03); border: 1px solid var(--on-dark-border); cursor: pointer; transition: border-color .2s; padding: 0; } .awd-feat-card:hover { border-color: var(--on-dark-20); } .awd-feat-thumb { aspect-ratio: 16/10; background: var(--on-dark-04); } .awd-feat-thumb img { transition: transform .3s; } .awd-feat-card:hover .awd-feat-thumb img { transform: scale(1.05); } .awd-feat-year { font-family: var(--font-heading); font-weight: 700; font-size: 10px; color: var(--SAND); letter-spacing: 1.5px; } .awd-feat-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--on-dark-25); } .awd-feat-org { font-family: var(--font-body); font-size: 11px; color: var(--on-dark-muted); } .awd-feat-title { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--WHITE); line-height: 1.3; } .awd-feat-link { font-family: var(--font-body); font-weight: 600; font-size: 12px; color: var(--SAND); } .awd-feat-link svg { transition: transform .2s; } .awd-feat-card:hover .awd-feat-link svg { transform: translate(2px,-2px); } .awd-year-pill { font-family: var(--font-body); font-size: 13px; font-weight: 500; background: transparent; color: var(--MUTED); border: 1.5px solid var(--on-light-border); cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; } .awd-year-pill span { font-size: 11px; opacity: .6; margin-left: 2px; } .awd-year-pill.active { background: var(--B); color: var(--WHITE); border-color: var(--B); } .awd-year-num { font-family: var(--font-heading); font-weight: 800; font-size: clamp(28px, 3vw, 40px); color: var(--CHAR); letter-spacing: -1px; } .awd-year-divider { height: 1px; background: var(--on-light-border); } .awd-year-count { font-family: var(--font-body); font-size: 12px; color: var(--MUTED); white-space: nowrap; } .awd-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 9000; align-items: center; justify-content: center; padding: var(--space-16); } .awd-modal-overlay.open { display: flex; } .awd-modal-box { position: relative; width: 100%; max-width: 960px; height: min(85vh, 580px); display: flex; flex-direction: column; background: var(--CHAR); overflow: hidden; } @media (min-width: 1024px) { .awd-modal-box { flex-direction: row; } } .awd-modal-img { flex-shrink: 0; background: var(--DARK); position: relative; } @media (min-width: 1024px) { .awd-modal-img { width: 52%; } } .awd-modal-img-fallback { font-family: var(--font-heading); font-weight: 800; font-size: 22px; color: var(--SAND); text-align: center; padding: var(--space-40); } .awd-modal-badge-wrap { position: absolute; bottom: 0; left: 0; right: 0; display: flex; padding: var(--space-20); } .awd-modal-badge { font-family: var(--font-heading); font-weight: 700; font-size: 9px; color: var(--WHITE); letter-spacing: 2.5px; text-transform: uppercase; background: var(--B); padding: 3px 8px; } .awd-modal-content { flex: 1; display: flex; flex-direction: column; overflow-y: auto; border-top: 1px solid var(--on-dark-hairline); } @media (min-width: 1024px) { .awd-modal-content { border-top: none; border-left: 1px solid var(--on-dark-hairline); } } .awd-modal-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--on-dark-06); border: 1px solid var(--on-dark-10); cursor: pointer; transition: background-color .2s; } .awd-modal-close:hover { background: var(--on-dark-10); } .awd-modal-date { font-family: var(--font-body); font-size: 11px; color: var(--on-dark-30); margin-bottom: var(--space-20); } .awd-modal-title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(20px,2vw,26px); color: var(--WHITE); line-height: 1.15; letter-spacing: -.5px; margin-bottom: 6px; } .awd-modal-org { font-family: var(--font-body); font-size: 13px; color: var(--SAND); margin-bottom: var(--space-20); } .awd-modal-blurb { background: var(--B-12); border: 1px solid var(--B-25); padding: var(--space-16); margin-bottom: var(--space-20); } .awd-modal-blurb-lbl { font-family: var(--font-heading); font-weight: 700; font-size: 10px; color: var(--B); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; } .awd-modal-blurb-txt { font-family: var(--font-body); font-size: 14px; color: var(--on-dark-70); line-height: 1.6; } .awd-modal-divider { height: 1px; background: var(--on-dark-hairline); margin: auto 0 var(--space-20); } .awd-cta-btn { background: var(--B); font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: var(--WHITE); letter-spacing: .3px; border: none; cursor: pointer; transition: opacity .2s; } .awd-cta-btn:hover { opacity: .9; } /* ─── Dark CTA (navy + image background) ────────────────────────────────── */ .cta-dark { position: relative; overflow: hidden; background: var(--NAVY); } .cta-dark-bg { position: absolute; inset: 0; } .cta-dark-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cta-dark-ov { position: absolute; inset: 0; background: rgba(11,28,74,.86); } .cta-dark-noise { position: absolute; inset: 0; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 256px; } .cta-dark-inner { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 112px var(--space-56); text-align: center; } @media (max-width: 767px) { .cta-dark-inner { padding: var(--space-80) var(--space-32); } } .cta-dark-ey { display: flex; align-items: center; justify-content: center; gap: var(--space-12); margin-bottom: var(--space-24); } .cta-dark-ey .line { width: 32px; height: 1px; background: var(--SAND); } .cta-dark-ey span { font-family: var(--font-heading); font-weight: 600; font-size: 11px; color: var(--SAND); letter-spacing: 4px; text-transform: uppercase; } .cta-dark-h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(36px, 5vw, 72px); color: #fff; line-height: 1.0; letter-spacing: -1px; margin-bottom: var(--space-16); } .cta-dark-sub { font-family: var(--font-body); font-size: 18px; color: var(--on-dark-55); max-width: 480px; margin: 0 auto 44px; } .cta-dark-btns { display: flex; align-items: center; justify-content: center; gap: var(--space-16); flex-wrap: wrap; } .btn-cta-wht { position: relative; overflow: hidden; padding: var(--space-16) 36px; display: inline-flex; align-items: center; gap: var(--space-12); background: #fff; font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--NAVY); border: none; cursor: pointer; transition: opacity .2s; } .btn-cta-wht:hover { opacity: .9; } .cta-dark-call { font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--on-dark-55); border-bottom: 1px solid var(--on-dark-20); padding-bottom: 2px; transition: color .2s, border-color .2s; } /* ═══════════════════════════════════════════════════════════════════════════ RESOURCES PAGE ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Page wrapper ───────────────────────────────────────────────────────── */ #anchor-bar .sticky-inner { justify-content: center; } .page-wrap { padding-top: 178px; background: var(--DARK); min-height: 100vh; } /* ─── Hero ───────────────────────────────────────────────────────────────── */ .section-hero { padding: var(--space-80) var(--space-56); border-bottom: 1px solid var(--on-dark-06); background: var(--DARK); } @media (max-width: 767px) { .section-hero { padding: 60px var(--space-24); } } .section-hero-inner { max-width: 1440px; margin: 0 auto; } .eyebrow { display: flex; align-items: center; gap: var(--space-8); margin-bottom: var(--space-20); } .eyebrow-line { width: 20px; height: 2px; background: var(--SAND); flex-shrink: 0; } .eyebrow span { font-family: var(--font-heading); font-weight: 600; font-size: 11px; color: var(--SAND); letter-spacing: 3.5px; text-transform: uppercase; } .hero-h1 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(40px, 5.5vw, 80px); color: #fff; line-height: 1.0; letter-spacing: -2px; margin-bottom: var(--space-20); max-width: 800px; } .hero-desc { font-family: var(--font-body); font-size: 18px; color: var(--on-dark-muted); line-height: 1.75; max-width: 560px; } /* ─── Shared section base ────────────────────────────────────────────────── */ .page-section { padding: var(--space-80) var(--space-56); background: var(--DARK); } @media (max-width: 767px) { .page-section { padding: 60px var(--space-24); } } .section-char { background: var(--CHAR); } .section-inner { max-width: 1440px; margin: 0 auto; } .section-label { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-16); } .section-label span { font-family: var(--font-heading); font-weight: 700; font-size: 10px; color: var(--SAND); letter-spacing: 4px; text-transform: uppercase; } .section-h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px, 4.5vw, 58px); color: #fff; line-height: 1.0; letter-spacing: -1.5px; } /* ─── Gallery ────────────────────────────────────────────────────────────── */ .gallery-header { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-32); margin-bottom: var(--space-40); flex-wrap: wrap; } .gallery-header-left { flex: 1; } .gallery-stats { display: flex; gap: var(--space-32); flex-shrink: 0; } .gallery-stat { text-align: right; } .stat-val { font-family: var(--font-heading); font-weight: 800; font-size: 28px; color: var(--SAND); line-height: 1; letter-spacing: -1px; } .stat-lbl { font-family: var(--font-body); font-size: 12px; color: var(--on-dark-35); margin-top: 2px; } .gallery-filters { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-40); } .gallery-filter { padding: var(--space-8) var(--space-16); font-family: var(--font-body); font-size: 13px; font-weight: 500; background: transparent; color: var(--on-dark-45); border: 1.5px solid rgba(255,255,255,.14); border-radius: 4px; cursor: pointer; transition: all .2s; } .gallery-filter.active { background: var(--SAND); color: var(--DARK); border-color: var(--SAND); } .gallery-filter:hover:not(.active) { color: var(--on-dark-75); border-color: var(--on-dark-30); } .masonry-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 280px; gap: var(--space-12); } @media (max-width: 1023px) { .masonry-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; } } @media (max-width: 639px) { .masonry-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; } } .masonry-featured { grid-column: span 2; grid-row: span 2; } @media (max-width: 639px) { .masonry-featured { grid-column: span 1; grid-row: span 1; } } .masonry-card { position: relative; overflow: hidden; cursor: pointer; background: var(--CHAR); } .masonry-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; } .masonry-card:hover img { transform: scale(1.04); } .masonry-card-gradient { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.2) 0%, transparent 35%, rgba(0,0,0,.65) 100%); } .masonry-card-hover { position: absolute; inset: 0; background: rgba(26,82,168,.18); opacity: 0; transition: opacity .3s; } .masonry-card:hover .masonry-card-hover { opacity: 1; } .masonry-card-top { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; align-items: flex-start; justify-content: space-between; } .masonry-card-num { font-family: var(--font-heading); font-weight: 900; font-size: 11px; color: var(--on-dark-40); letter-spacing: 2px; } .masonry-card-cat { font-family: var(--font-heading); font-weight: 700; font-size: 9px; color: #fff; letter-spacing: 2.5px; text-transform: uppercase; background: var(--B); padding: 3px 9px; opacity: 0; transition: opacity .2s; } .masonry-card:hover .masonry-card-cat { opacity: 1; } .masonry-card-bottom { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-20); } .masonry-card-label { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: #fff; line-height: 1.2; margin-bottom: 3px; } .masonry-featured .masonry-card-label { font-size: 22px; } .masonry-card-loc { font-family: var(--font-body); font-size: 12px; color: var(--on-dark-muted); } .gallery-footer { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-40); padding-top: var(--space-32); border-top: 1px solid var(--on-dark-hairline); flex-wrap: wrap; gap: var(--space-24); } .gallery-footer-stats { display: flex; gap: var(--space-32); } .gallery-footer-stats .gallery-stat { text-align: left; } .gallery-footer-count { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-muted); } .gallery-view-all { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-12) var(--space-24); background: var(--B); font-family: var(--font-body); font-weight: 600; font-size: 13px; color: #fff; border: none; cursor: pointer; transition: opacity .2s; } .gallery-view-all:hover { opacity: .85; } .gallery-view-all:disabled { opacity: .5; cursor: not-allowed; } /* ─── Cost Guide ─────────────────────────────────────────────────────────── */ .cost-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-56); flex-wrap: wrap; gap: var(--space-24); } .cost-header-right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-12); } .cost-header-sub { font-family: var(--font-body); font-size: 14px; color: var(--on-dark-40); max-width: 260px; text-align: right; line-height: 1.6; } .cost-view-all { display: inline-flex; align-items: center; gap: var(--space-8); padding: 10px var(--space-24); border: 1px solid rgba(196,171,108,.4); font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--SAND); background: none; cursor: pointer; transition: background .2s; } .cost-view-all:hover { background: rgba(196,171,108,.08); } .cost-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); } @media (max-width: 1023px) { .cost-grid { grid-template-columns: 1fr; } } .cost-card { position: relative; display: flex; flex-direction: column; overflow: hidden; cursor: pointer; background: var(--CHAR); border: 1px solid var(--on-dark-06); transition: border-color .25s; } .cost-card:hover { border-color: rgba(196,171,108,.4); } .cost-top-bar { height: 2px; background: var(--SAND); transform: scaleX(0); transform-origin: left; transition: transform .3s ease-out; } .cost-card:hover .cost-top-bar { transform: scaleX(1); } .cost-body { padding: 28px; display: flex; flex-direction: column; flex: 1; } .cost-meta-row { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-24); } .cost-num { font-family: var(--font-heading); font-weight: 900; font-size: 13px; color: rgba(196,171,108,.5); letter-spacing: 2px; } .cost-tag { font-family: var(--font-heading); font-weight: 700; font-size: 9px; color: var(--SAND); letter-spacing: 2px; text-transform: uppercase; border: 1px solid rgba(196,171,108,.3); padding: 3px var(--space-8); } .cost-h3 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(18px, 1.6vw, 22px); color: #fff; line-height: 1.2; margin-bottom: 6px; } .cost-sub { font-family: var(--font-body); font-weight: 500; font-size: 13px; color: rgba(196,171,108,.8); margin-bottom: 10px; } .cost-desc { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-45); line-height: 1.7; flex: 1; margin-bottom: 22px; } .cost-range { font-family: var(--font-heading); font-weight: 800; font-size: 18px; color: #fff; letter-spacing: -0.5px; margin-bottom: var(--space-8); } .cost-bar-bg { height: 3px; background: var(--on-dark-08); border-radius: 2px; overflow: hidden; margin-bottom: var(--space-4); } .cost-bar-fill { height: 100%; background: linear-gradient(90deg, rgba(196,171,108,.53), var(--SAND)); border-radius: 2px; transform-origin: left; transform: scaleX(0); transition: transform 1.1s cubic-bezier(0.22,1,0.36,1); } .cost-card.in-view .cost-bar-fill { transform: scaleX(1); } .cost-bar-labels { display: flex; justify-content: space-between; margin-top: var(--space-4); } .cost-bar-label { font-family: var(--font-body); font-size: 10px; color: var(--on-dark-25); } .cost-cta { display: flex; align-items: center; gap: var(--space-8); margin-top: 18px; transition: transform .2s; } .cost-card:hover .cost-cta { transform: translateX(4px); } .cost-cta-text { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--SAND); } /* ─── Resources Download ─────────────────────────────────────────────────── */ .dl-intro { font-family: var(--font-body); font-size: 17px; color: var(--on-dark-muted); line-height: 1.7; } .dl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-20); } @media (max-width: 1279px) { .dl-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 639px) { .dl-grid { grid-template-columns: 1fr; } } .dl-card { display: flex; flex-direction: column; height: 100%; padding: 28px; /* ResourcesDownloadSection uses SURFACE.panel here, not CHAR — this card sits on a WHITE section (SURFACE.base), same "dark module on a light surface" idea as .dl-card's siblings, just the deep-blue panel tone React actually uses instead of the generic charcoal card background. */ background: var(--surface-panel); border: 1px solid var(--on-dark-hairline); } .dl-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; /* White-tinted icon well, matching the card's own deep-blue background — the blue-tinted (rgba(26,82,168,...)) version only reads as an accent against CHAR/DARK; on --surface-panel it's nearly invisible. */ background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); flex-shrink: 0; } .dl-pages { font-family: var(--font-body); font-weight: 500; font-size: 12px; color: var(--on-dark-30); letter-spacing: .5px; } .dl-tag { display: inline-flex; align-items: center; padding: 2px var(--space-8); background: rgba(196,171,108,.12); border: 1px solid rgba(196,171,108,.2); width: fit-content; margin-bottom: var(--space-16); } .dl-tag span { font-family: var(--font-heading); font-weight: 600; font-size: 10px; color: var(--SAND); letter-spacing: 2px; text-transform: uppercase; } .dl-h3 { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: #fff; line-height: 1.2; margin-bottom: 10px; } .dl-desc { font-family: var(--font-body); font-size: 14px; color: var(--on-dark-45); line-height: 1.7; flex: 1; margin-bottom: var(--space-20); } .dl-btn { display: inline-flex; align-items: center; gap: var(--space-8); padding: 10px var(--space-20); background: var(--B); font-family: var(--font-body); font-weight: 600; font-size: 13px; color: #fff; border: none; cursor: pointer; transition: opacity .2s; width: fit-content; text-decoration: none; } .dl-btn:hover { opacity: .85; } /* Modifier: white bg / blue text — ResourcesDownloadSection's own Download button (on the deep-blue .dl-card). Layout/CtaFaqSkin.hbs also reuses the base .dl-btn on a CHAR/DARK panel, where the default blue-bg/white-text is correct — this variant is scoped to Download Resources only, not a change to the shared default. */ .dl-btn.light { background: #fff; color: var(--B); } /* ─── Buyer & Seller ─────────────────────────────────────────────────────── */ .persona-title-row { display: flex; flex-direction: row; align-items: flex-end; gap: var(--space-24); flex-wrap: wrap; } .persona-sub { font-family: var(--font-body); font-size: 16px; color: var(--on-dark-40); line-height: 1.7; max-width: 380px; } .persona-tabs { display: flex; gap: var(--space-12); margin-bottom: var(--space-40); flex-wrap: wrap; } .persona-tab { position: relative; padding: var(--space-12) var(--space-24); display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 700; font-size: 14px; cursor: pointer; border: 1.5px solid var(--on-dark-15); background: transparent; color: var(--on-dark-45); letter-spacing: .3px; transition: all .2s; } .persona-tab.active { background: #fff; color: var(--DARK); border-color: #fff; } .persona-tab-indicator { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--B); display: none; } .persona-tab.active .persona-tab-indicator { display: block; } .persona-context { display: flex; flex-direction: row; align-items: center; gap: var(--space-16); padding: var(--space-20); background: var(--on-dark-04); border: 1px solid var(--on-dark-hairline); margin-bottom: var(--space-48); flex-wrap: wrap; } .persona-context-body { flex: 1; } .persona-context-h { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: #fff; margin-bottom: 6px; } .persona-context-sub { font-family: var(--font-body); font-size: 14px; color: var(--on-dark-45); line-height: 1.6; } .persona-grid { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-20); } @media (max-width: 1023px) { .persona-grid { grid-template-columns: 1fr; } } .persona-featured { display: flex; flex-direction: column; background: var(--DARK); border: 1px solid var(--on-dark-08); } .persona-featured-visual { height: 200px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--on-dark-06); position: relative; background: linear-gradient(135deg, rgba(26,82,168,.13) 0%, rgba(196,171,108,.1) 100%); } .persona-doc-mock { position: relative; width: 120px; height: 155px; } .persona-doc-bg { position: absolute; inset: 0; background: #fff; border-radius: 4px; box-shadow: 0 8px 40px rgba(0,0,0,.4); } .persona-doc-body { padding: var(--space-16) 14px; position: relative; } .persona-doc-line-title { height: 6px; background: var(--B); border-radius: 2px; margin-bottom: 10px; width: 70%; } .persona-doc-line { height: 4px; border-radius: 2px; margin-bottom: 6px; } .persona-badge { position: absolute; top: 16px; right: 16px; font-family: var(--font-heading); font-weight: 700; font-size: 9px; color: var(--DARK); letter-spacing: 2px; text-transform: uppercase; background: var(--SAND); padding: var(--space-4) 10px; } .persona-featured-body { padding: var(--space-32); display: flex; flex-direction: column; flex: 1; } .persona-featured-tag { display: flex; align-items: center; gap: var(--space-12); margin-bottom: var(--space-16); } .persona-pdf-tag { font-family: var(--font-heading); font-weight: 700; font-size: 9px; color: var(--SAND); letter-spacing: 2.5px; text-transform: uppercase; border: 1px solid rgba(196,171,108,.3); padding: 3px var(--space-8); } .persona-pages { font-family: var(--font-body); font-size: 12px; color: var(--on-dark-30); } .persona-featured-h { font-family: var(--font-heading); font-weight: 800; font-size: clamp(20px, 2vw, 26px); color: #fff; line-height: 1.2; margin-bottom: var(--space-12); } .persona-featured-desc { font-family: var(--font-body); font-size: 15px; color: var(--on-dark-muted); line-height: 1.7; margin-bottom: var(--space-20); } .persona-topics { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--space-32); flex: 1; } .persona-topic { display: flex; align-items: flex-start; gap: 10px; } .persona-topic-text { font-family: var(--font-body); font-size: 14px; color: var(--on-dark-65); line-height: 1.5; } .persona-dl-btn { display: inline-flex; align-items: center; gap: var(--space-8); padding: 14px var(--space-24); background: var(--B); font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: #fff; border: none; cursor: pointer; letter-spacing: .3px; transition: opacity .2s; align-self: flex-start; } .persona-dl-btn:hover { opacity: .9; } .persona-side { display: flex; flex-direction: column; gap: var(--space-16); } .persona-side-card { display: flex; flex-direction: column; flex: 1; padding: var(--space-24); background: var(--DARK); border: 1px solid var(--on-dark-hairline); cursor: pointer; transition: border-color .2s; } .persona-side-card:hover { border-color: rgba(196,171,108,.25); } .persona-side-h { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: #fff; line-height: 1.3; margin-bottom: var(--space-8); } .persona-side-desc { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-40); line-height: 1.6; flex: 1; margin-bottom: var(--space-16); } .persona-side-dl { display: flex; align-items: center; gap: 6px; } .persona-side-dl span { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--SAND); } /* ─── Job Stories ────────────────────────────────────────────────────────── */ .job-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-56); flex-wrap: wrap; gap: var(--space-16); } .job-all-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--SAND); background: none; border: none; cursor: pointer; padding: 0; transition: opacity .2s; } .job-all-link:hover { opacity: .8; } .job-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); } @media (max-width: 1023px) { .job-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 639px) { .job-grid { grid-template-columns: 1fr; } } .job-card { display: flex; flex-direction: column; background: var(--CHAR); border: 1px solid var(--on-dark-hairline); } .job-thumb { position: relative; aspect-ratio: 3/2; overflow: hidden; } .job-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; } .job-card:hover .job-thumb img { transform: scale(1.04); } .job-overlay { position: absolute; inset: 0; background: var(--on-light-40); } .job-play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: none; } .job-play-circle { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--B); transition: transform .2s, background .2s; } .job-play-btn:hover .job-play-circle { transform: scale(1.1); } .job-play-btn.playing .job-play-circle { background: var(--SAND); } .job-meta { padding: var(--space-24); } .job-tags { display: flex; gap: var(--space-8); margin-bottom: var(--space-12); flex-wrap: wrap; } .job-tag { padding: var(--space-4) 10px; background: var(--on-dark-hairline); font-family: var(--font-body); font-weight: 500; font-size: 12px; color: var(--on-dark-60); } .job-name { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: #fff; } /* ─── Job Stories: video modal ──────────────────────────────────────────── */ #js-vid-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .88); z-index: 9000; align-items: center; justify-content: center; padding: var(--space-24); } #js-vid-overlay.open { display: flex; } #js-vid-box { position: relative; width: 100%; max-width: 900px; } #js-vid-frame-wrap { position: relative; padding-bottom: 56.25%; height: 0; background: #000; border-radius: 8px; overflow: hidden; } #js-vid-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } #js-vid-close { position: absolute; top: -40px; right: 0; background: none; border: none; cursor: pointer; padding: 6px; line-height: 0; } /* ─── FAQ ────────────────────────────────────────────────────────────────── */ .faq-title-wrap { text-align: center; margin-bottom: var(--space-48); } .faq-intro { font-family: var(--font-body); font-size: 17px; color: var(--on-dark-muted); margin-top: var(--space-12); } .faq-filters { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; justify-content: center; margin-bottom: var(--space-48); } .faq-pill { padding: var(--space-8) var(--space-20); font-family: var(--font-body); font-weight: 400; font-size: 14px; color: var(--on-dark-60); background: transparent; border: 1.5px solid var(--on-dark-15); cursor: pointer; transition: all .2s; } .faq-pill.active { font-weight: 600; color: var(--DARK); background: var(--SAND); border-color: var(--SAND); } .faq-list { max-width: 768px; margin: 0 auto; } .faq-entry { background: var(--CHAR); border: 1px solid var(--on-dark-hairline); overflow: hidden; margin-bottom: var(--space-12); } .faq-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--space-20) var(--space-24); text-align: left; background: none; border: none; cursor: pointer; } .faq-question { font-family: var(--font-body); font-weight: 600; font-size: 16px; color: #fff; flex: 1; padding-right: var(--space-16); line-height: 1.4; } .faq-icon { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--on-dark-20); color: var(--on-dark-40); transition: border-color .2s, color .2s, transform .2s; } .faq-entry.open .faq-icon { border-color: var(--SAND); color: var(--SAND); transform: rotate(45deg); } .faq-body { max-height: 0; overflow: hidden; transition: max-height .28s ease-out; } .faq-entry.open .faq-body { max-height: 300px; } .faq-body-inner { padding: 0 var(--space-24) var(--space-24); } .faq-separator { height: 1px; background: var(--on-dark-06); margin-bottom: var(--space-16); } .faq-answer { font-family: var(--font-body); font-size: 15px; color: var(--on-dark-55); line-height: 1.8; } /* Closing CTA panel. Sizes mirror NewsBlogPage.tsx's CtaSection — stacks on narrow viewports and goes side-by-side from lg up (React: `flex-col lg:flex-row … gap-10 p-10 lg:p-14`). Also used by resources.html's FAQ CTA. */ .faq-cta { margin-top: var(--space-40); padding: var(--space-40); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--space-40); background: var(--CHAR); border: 1px solid var(--on-dark-hairline); } @media (min-width: 1024px) { .faq-cta { flex-direction: row; padding: var(--space-56); } } .faq-cta-title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(28px, 3.5vw, 46px); color: #fff; line-height: 1.1; letter-spacing: -1px; margin-bottom: 10px; } .faq-cta-sub { font-family: var(--font-body); font-size: 15px; color: var(--on-dark-45); line-height: 1.65; max-width: 460px; } /* ─── Reviews Carousel ───────────────────────────────────────────────────── */ .reviews-overflow { overflow: hidden; } .reviews-eyebrow { font-family: var(--font-heading); font-size: 11px; font-weight: 600; color: var(--SAND); letter-spacing: 4px; text-transform: uppercase; margin-bottom: var(--space-12); } .reviews-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--space-64); gap: var(--space-16); flex-wrap: wrap; } .reviews-arrows { display: flex; gap: var(--space-12); flex-shrink: 0; } .carousel-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--on-dark-20); background: transparent; cursor: pointer; transition: background .2s; } .carousel-btn:hover { background: var(--on-dark-08); } .carousel-wrap { overflow: hidden; } .carousel-track { display: flex; gap: var(--space-20); transition: transform .45s cubic-bezier(0.22,1,0.36,1); } .vreview-card { flex: 0 0 min(85vw, 520px); display: flex; flex-direction: column; background: var(--DARK); border: 1px solid var(--on-dark-hairline); } .vreview-thumb { position: relative; padding-bottom: 52%; } .vreview-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .vreview-thumb-overlay { position: absolute; inset: 0; background: var(--on-light-45); display: flex; align-items: center; justify-content: center; } .vreview-play { width: 56px; height: 56px; border-radius: 50%; background: var(--B); display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; transition: transform .2s; } .vreview-play:hover { transform: scale(1.1); } .vreview-body { padding: var(--space-32); display: flex; flex-direction: column; flex: 1; } .vreview-stars { display: flex; gap: var(--space-4); margin-bottom: var(--space-20); } .vreview-quote-mark { font-family: Georgia, serif; font-size: 48px; color: rgba(196,171,108,.25); line-height: .7; margin-bottom: var(--space-8); } .vreview-text { font-family: var(--font-body); font-size: 16px; color: var(--on-dark-70); line-height: 1.75; flex: 1; margin-bottom: var(--space-24); } .vreview-footer { display: flex; align-items: center; gap: var(--space-12); padding-top: var(--space-20); border-top: 1px solid var(--on-dark-hairline); } .vreview-avatar { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--B); flex-shrink: 0; } .vreview-avatar span { font-family: var(--font-heading); font-weight: 800; font-size: 13px; color: #fff; } .vreview-name { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: #fff; } .vreview-loc { font-family: var(--font-body); font-size: 12px; color: var(--MUTED); } .carousel-dots { display: flex; justify-content: center; gap: var(--space-8); margin-top: var(--space-40); padding: 0 var(--space-56); } .carousel-dot { height: 8px; border-radius: 4px; background: var(--on-dark-20); border: none; cursor: pointer; transition: width .3s, background .3s; width: 8px; } .carousel-dot.active { width: 24px; background: var(--SAND); } .cta-dark-call:hover { color: var(--on-dark-85); border-color: var(--on-dark-muted); } [id^="skin-"] { scroll-margin-top: 178px; } /* ─── Video Modal ─────────────────────────────────────────────────────────── */ #video-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 0; pointer-events: none; transition: opacity .25s; } #video-modal-overlay.open { opacity: 1; pointer-events: auto; } .video-modal-box { position: relative; width: min(900px, 94vw); aspect-ratio: 16 / 9; } .video-modal-close { position: absolute; top: -40px; right: 0; background: none; border: none; cursor: pointer; padding: var(--space-4); line-height: 1; } .video-modal-frame, .video-modal-frame iframe { width: 100%; height: 100%; border-radius: 8px; } /* ═══════════════════════════════════════════════════════════════════════════ ABOUT PAGE ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Hero (dark, no photo) ──────────────────────────────────────────────── */ .about-hero { position: relative; overflow: hidden; } .about-hero-grid { position: absolute; inset: 0; pointer-events: none; opacity: .03; background-image: linear-gradient(var(--on-dark-muted) 1px, transparent 1px), linear-gradient(90deg, var(--on-dark-muted) 1px, transparent 1px); background-size: 80px 80px; } .about-hero-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(to bottom, transparent 10%, var(--SAND) 40%, var(--SAND) 60%, transparent 90%); opacity: .5; } .about-hero-inner { position: relative; z-index: 1; padding-top: 144px; padding-bottom: 144px; } @media (max-width: 1023px) { .about-hero-inner { padding-top: var(--space-96); padding-bottom: var(--space-96); } } /* ─── Stat row (bordered dividers, static — variant of .stat-item) ───────── */ .stats-row { display: flex; flex-wrap: wrap; margin-top: var(--space-8); } .stats-row .stat-item:first-child { border-left: 2px solid var(--SAND); } .stats-row .stat-item:last-child { border-right: 1px solid var(--on-dark-hairline); } /* ─── People: department filter ──────────────────────────────────────────── */ .people-filter { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); margin-bottom: var(--space-56); } .people-filter-labels { position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: var(--space-40); overflow-x: auto; scrollbar-width: none; } .people-filter-labels::-webkit-scrollbar { display: none; } .people-filter-item { position: relative; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-8); cursor: pointer; user-select: none; } .people-filter-name { font-family: var(--font-heading); font-weight: 800; font-size: clamp(14px, 2vw, 30px); line-height: 1.1; letter-spacing: -0.5px; white-space: nowrap; display: block; color: var(--on-dark-18); transform: scale(.92); transform-origin: center bottom; transition: color .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1); } .people-filter-item.active .people-filter-name { color: #fff; transform: scale(1); } .people-filter-underline { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--SAND); border-radius: 1px; transition: transform .4s cubic-bezier(.22,1,.36,1), width .4s cubic-bezier(.22,1,.36,1); } /* ─── People: team grid ──────────────────────────────────────────────────── */ .people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-40); margin-bottom: var(--space-48); } @media (max-width: 1023px) { .people-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 639px) { .people-grid { grid-template-columns: 1fr; } } .people-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-20); cursor: pointer; } .people-card-img { position: relative; width: 100%; overflow: hidden; aspect-ratio: 1/1; } .people-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; } .people-card:hover .people-card-img img { transform: scale(1.06); } .people-card-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-24); background: linear-gradient(0deg, var(--on-light-85) 0%, rgba(26,82,168,.35) 100%); opacity: 0; transition: opacity .25s; } .people-card:hover .people-card-overlay { opacity: 1; } .people-card-cta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--SAND); } .people-card-id { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; } .people-card-name { font-family: var(--font-heading); font-weight: 700; font-size: 17px; color: #fff; line-height: 1.3; } .people-card-title { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-40); } .people-empty { grid-column: 1/-1; padding: var(--space-64) 0; text-align: center; font-family: var(--font-body); font-size: 14px; color: var(--on-dark-35); } /* ─── Team member modal ──────────────────────────────────────────────────── */ #member-modal-overlay { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: center; overflow-y: auto; padding: var(--space-48) var(--space-24); background: rgba(0,0,0,.78); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .2s; } #member-modal-overlay.open { opacity: 1; pointer-events: auto; } .member-modal-close { position: fixed; top: 20px; right: 20px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--CHAR); border: 1px solid var(--on-dark-15); cursor: pointer; transition: background .2s; z-index: 201; } .member-modal-close:hover { background: var(--on-dark-10); } .member-modal { position: relative; width: 100%; max-width: 920px; margin: auto; display: flex; flex-direction: column; gap: 36px; background: var(--DARK); border-left: 2px solid var(--SAND); border-top: 1px solid var(--on-dark-hairline); border-right: 1px solid var(--on-dark-hairline); border-bottom: 1px solid var(--on-dark-hairline); padding: var(--space-48); } @media (max-width: 639px) { .member-modal { padding: 28px; } } .member-modal-header { display: flex; align-items: center; gap: var(--space-24); flex-wrap: wrap; } .member-modal-photo { flex-shrink: 0; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; border: 2px solid var(--SAND); box-sizing: border-box; } .member-modal-photo img { width: 100%; height: 100%; object-fit: cover; } .member-modal-id { display: flex; flex-direction: column; gap: var(--space-8); } .member-modal-name { font-family: var(--font-heading); font-weight: 800; font-size: clamp(24px,3vw,36px); color: #fff; line-height: 1.1; letter-spacing: -0.5px; } .member-modal-title { font-family: var(--font-body); font-size: 15px; color: var(--on-dark-muted); line-height: 1.5; } .member-modal-divider { height: 1px; background: var(--on-dark-hairline); } .member-modal-bio { display: flex; flex-direction: column; gap: var(--space-12); } .member-modal-bio p { font-family: var(--font-body); font-size: 15px; color: var(--on-dark-60); line-height: 1.75; } .member-section-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-12); margin-bottom: var(--space-20); flex-wrap: wrap; } .member-section-title { font-family: var(--font-heading); font-weight: 700; font-size: 22px; color: #fff; line-height: 1.2; letter-spacing: -0.3px; } .member-review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); } @media (max-width: 767px) { .member-review-grid { grid-template-columns: 1fr; } } .member-review-card { display: flex; flex-direction: column; gap: 14px; padding: var(--space-24); background: var(--CHAR); border: 1px solid var(--on-dark-hairline); } .member-review-stars { display: flex; gap: var(--space-4); } .member-review-quote-mark { font-family: Georgia, serif; font-size: 40px; color: rgba(196,171,108,.2); line-height: .7; margin-bottom: var(--space-4); } .member-review-text { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-65); line-height: 1.7; flex: 1; } .member-review-footer { display: flex; align-items: center; gap: var(--space-12); padding-top: var(--space-12); border-top: 1px solid var(--on-dark-hairline); } .member-review-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(196,171,108,.1); border: 1px solid rgba(196,171,108,.2); font-family: var(--font-heading); font-weight: 700; font-size: 11px; color: var(--SAND); } .member-review-name { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: #fff; } .member-review-loc { font-family: var(--font-body); font-size: 11px; color: var(--on-dark-35); } .member-gallery { position: relative; } .member-gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--CHAR); border: 1px solid var(--on-dark-15); cursor: pointer; transition: background .2s; } .member-gallery-arrow:hover { background: var(--on-dark-10); } .member-gallery-arrow.prev { left: -18px; } .member-gallery-arrow.next { right: -18px; } .member-gallery-track-wrap { overflow: hidden; } .member-gallery-track { display: flex; gap: var(--space-12); transition: transform .4s cubic-bezier(.22,1,.36,1); } .member-gallery-item { flex-shrink: 0; width: calc((100% - 24px) / 3); aspect-ratio: 1/1; overflow: hidden; } .member-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .member-gallery-item:hover img { transform: scale(1.05); } .member-gallery-dots { display: flex; justify-content: center; gap: var(--space-8); margin-top: var(--space-16); } .member-gallery-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--on-dark-20); border: none; cursor: pointer; padding: 0; transition: all .3s; } .member-gallery-dot.active { width: 24px; background: var(--SAND); } /* ─── Benefits: partnerships over photo + carousel ───────────────────────── */ .benefits-partners { position: relative; overflow: hidden; } .benefits-partners-bg { position: absolute; inset: 0; pointer-events: none; } .benefits-partners-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .benefits-partners-ov { position: absolute; inset: 0; background: rgba(0,0,0,.65); } .benefits-layout { position: relative; z-index: 1; display: flex; gap: var(--space-64); flex-wrap: wrap; } .benefits-layout-left { flex: 1 1 380px; max-width: 460px; } .benefits-layout-right { flex: 2 1 460px; min-width: 0; display: flex; flex-direction: column; } .benefit-track-wrap { overflow: hidden; } .benefit-track { display: flex; gap: var(--space-16); transition: transform .45s cubic-bezier(.22,1,.36,1); } .benefit-card { flex-shrink: 0; width: min(calc(100% - 32px), 320px); display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-24); background: var(--on-light-55); backdrop-filter: blur(16px); border: 1px solid var(--on-dark-10); } .benefit-icon-box { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(196,171,108,.12); border: 1px solid rgba(196,171,108,.25); font-family: var(--font-heading); font-weight: 800; font-size: 10px; color: var(--SAND); letter-spacing: 1px; } .benefit-name { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: #fff; line-height: 1.3; } .benefit-desc { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-55); line-height: 1.65; } .benefit-nav { display: flex; align-items: center; gap: var(--space-16); margin-top: var(--space-20); } .benefit-dots { display: flex; align-items: center; gap: var(--space-8); } .benefit-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--on-dark-25); border: none; cursor: pointer; padding: 0; transition: all .3s; } .benefit-dot.active { width: 24px; background: var(--SAND); } .benefit-arrows { display: flex; gap: var(--space-8); margin-left: auto; } .benefit-arrow { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--on-dark-20); background: none; cursor: pointer; transition: background .2s; } .benefit-arrow:hover { background: var(--on-dark-10); } /* ─── Benefits: manufacturer strip ───────────────────────────────────────── */ .brand-strip { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-24); } .brand-chip { display: flex; align-items: center; justify-content: center; padding: var(--space-16) var(--space-24); min-width: 140px; background: var(--CHAR); border: 1px solid var(--on-dark-hairline); } .brand-chip span { font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: var(--on-dark-40); letter-spacing: 1px; } /* ─── Contact (dark form variant) ────────────────────────────────────────── */ .about-contact-layout { display: flex; gap: var(--space-64); flex-wrap: wrap; } .about-contact-left { flex: 1 1 320px; max-width: 380px; } .about-contact-right { flex: 2 1 480px; min-width: 0; } .contact-panel-dark { padding: var(--space-32); background: var(--CHAR); border: 1px solid var(--on-dark-hairline); } @media (min-width: 1024px) { .contact-panel-dark { padding: var(--space-40); } } .trust-check-list { display: flex; flex-direction: column; gap: var(--space-12); margin-top: 28px; } .trust-check-item { display: flex; align-items: center; gap: var(--space-12); } .trust-check-item span { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-60); } .chk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); } @media (min-width: 640px) { .chk-grid { grid-template-columns: repeat(3, 1fr); } } .chk-item { display: flex; align-items: center; gap: 10px; cursor: pointer; } .chk-box { width: 16px; height: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--on-dark-20); background: transparent; cursor: pointer; transition: all .15s; } .chk-box.active { background: var(--B); border-color: var(--B); } .chk-label { font-family: var(--font-body); font-size: 12px; color: var(--on-dark-60); } .agree-row { display: flex; align-items: center; gap: 10px; cursor: pointer; margin: var(--space-20) 0; } .agree-row span { font-family: var(--font-body); font-size: 12px; color: var(--on-dark-45); } /* ═══════════════════════════════════════════════════════════════════════════ JOB STORIES PAGE (full listing — reuses .job-* card classes from resources.html) ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Hero: text + stat row side by side (generic, reusable on any hero) ─── */ .hero-split { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--space-40); } .hero-split > .hero-split-text { flex: 1; min-width: 260px; } .hero-split-stats { display: flex; gap: var(--space-40); flex-shrink: 0; flex-wrap: wrap; } .hero-split-stats .stat-item { border-left: none; padding: 0; align-items: flex-start; } /* ─── Card: clickable variant of .job-card (opens the story modal) ──────── */ .job-card-clickable { cursor: pointer; transition: border-color .2s, transform .2s; } .job-card-clickable:hover { border-color: rgba(196,171,108,.35); transform: translateY(-4px); } .job-view-hint { position: absolute; bottom: 12px; right: 12px; display: flex; align-items: center; gap: var(--space-4); font-family: var(--font-body); font-weight: 600; font-size: 11px; color: var(--SAND); letter-spacing: 1px; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; } .job-card-clickable:hover .job-view-hint { opacity: 1; transform: translateY(0); } .job-result-preview { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-40); line-height: 1.6; margin-top: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ─── CTA: flat dark variant (left-aligned, no photo) — job-stories only, distinct from the blue #cta-section used on other pages ──────────────── */ .cta-flat-inner { max-width: 600px; } .cta-flat-sub { font-family: var(--font-body); font-size: 16px; color: var(--on-dark-40); line-height: 1.7; max-width: 480px; margin: var(--space-20) 0 var(--space-32); } .btn-cta-flat { display: inline-flex; align-items: center; gap: var(--space-12); padding: var(--space-16) var(--space-32); background: var(--B); border: none; cursor: pointer; font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: #fff; letter-spacing: .3px; transition: opacity .2s; } .btn-cta-flat:hover { opacity: .9; } /* ─── Story modal: video/photo panel + scrolling content panel ──────────── */ .story-modal-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--space-16); background: rgba(0,0,0,.88); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .22s; } .story-modal-overlay.open { opacity: 1; pointer-events: auto; } .story-modal-box { position: relative; width: 100%; max-width: 960px; height: min(85vh, 580px); background: var(--CHAR); display: flex; overflow: hidden; } @media (max-width: 1023px) { .story-modal-box { flex-direction: column; height: auto; max-height: 92vh; overflow-y: auto; } } .story-modal-media { position: relative; flex-shrink: 0; width: 52%; } @media (max-width: 1023px) { .story-modal-media { width: 100%; height: 260px; } } .story-modal-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .story-modal-gradient { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.1) 0%, rgba(0,0,0,.6) 100%); transition: background .2s; } .story-modal-media.playing .story-modal-gradient { background: rgba(0,0,0,.85); } .story-modal-media.playing .story-modal-playwrap { display: none; } .story-modal-playing-text { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 13px; color: var(--on-dark-40); } /* Shown only as a fallback when a story has no YoutubeId — JS sets display directly, see playStoryVideo() in job-stories-data.js. */ .story-modal-playwrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .story-modal-video { display: none; position: absolute; inset: 0; z-index: 1; } .story-modal-video iframe { width: 100%; height: 100%; border: none; } .story-modal-media.playing .story-modal-video:not(:empty) { display: block; } /* #story-modal-video must come before .story-modal-playing-text in the markup for this to apply */ .story-modal-video:not(:empty) ~ .story-modal-playing-text { display: none; } .story-modal-playbtn { width: 72px; height: 72px; border-radius: 50%; background: var(--B); border: 3px solid var(--on-dark-25); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 32px rgba(0,0,0,.5); transition: transform .2s; } .story-modal-playbtn:hover { transform: scale(1.08); } .story-modal-playbtn svg { margin-left: var(--space-4); } .story-modal-bar { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: var(--space-16) var(--space-20); } .story-modal-tags { display: flex; gap: var(--space-8); } .story-modal-tag { display: inline-block; font-family: var(--font-heading); font-weight: 800; font-size: 9px; color: #fff; letter-spacing: 2.5px; text-transform: uppercase; padding: 3px var(--space-8); background: var(--B); } .story-modal-loctag { font-family: var(--font-body); font-size: 11px; color: var(--on-dark-65); background: rgba(0,0,0,.45); padding: 3px var(--space-8); backdrop-filter: blur(4px); } .story-modal-navbtns { display: flex; gap: var(--space-8); } .story-modal-navbtn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); border: 1px solid var(--on-dark-20); cursor: pointer; transition: background .2s; } .story-modal-navbtn:hover { background: var(--on-dark-20); } .story-modal-content { flex: 1; display: flex; flex-direction: column; overflow-y: auto; border-left: 1px solid var(--on-dark-hairline); } @media (max-width: 1023px) { .story-modal-content { border-left: none; border-top: 1px solid var(--on-dark-hairline); } } .story-modal-closerow { display: flex; justify-content: flex-end; padding: var(--space-24) 28px var(--space-12); flex-shrink: 0; } .story-modal-body { display: flex; flex-direction: column; flex: 1; padding: 0 28px 28px; } .story-modal-meta { display: flex; align-items: center; gap: var(--space-12); margin-bottom: var(--space-20); } .story-modal-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--on-dark-20); } .story-modal-name { font-family: var(--font-heading); font-weight: 800; font-size: clamp(20px,2vw,26px); color: #fff; line-height: 1.15; letter-spacing: -.5px; margin-bottom: 6px; } .story-modal-loc { font-family: var(--font-body); font-size: 13px; color: var(--SAND); margin-bottom: var(--space-20); } .story-modal-result { margin-bottom: var(--space-20); padding: var(--space-16); background: rgba(26,82,168,.12); border: 1px solid rgba(26,82,168,.25); } .story-modal-result-label { font-family: var(--font-heading); font-weight: 700; font-size: 10px; color: var(--B); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; } .story-modal-result-text { font-family: var(--font-body); font-size: 14px; color: var(--on-dark-70); line-height: 1.6; } .story-modal-quotemark { font-family: Georgia, serif; font-size: 44px; color: rgba(196,171,108,.2); line-height: .55; margin-bottom: 10px; } .story-modal-quote { font-family: var(--font-body); font-size: 15px; color: var(--on-dark-body); line-height: 1.8; flex: 1; } .story-modal-divider { height: 1px; background: var(--on-dark-hairline); margin: var(--space-20) 0; } .story-modal-cta { display: flex; align-items: center; justify-content: center; gap: var(--space-8); width: 100%; padding: 14px var(--space-24); background: var(--B); border: none; cursor: pointer; font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: #fff; letter-spacing: .3px; transition: opacity .2s; } .story-modal-cta:hover { opacity: .9; } /* 1. Inicializamos el contador en el contenedor principal de la cuadrícula */ #gallery-grid { counter-reset: masonry-counter 0; /* Empieza en 0, para que el primer elemento sume 1 */ } /* 2. Incrementamos el contador en cada tarjeta */ #gallery-grid .masonry-card { counter-increment: masonry-counter; } /* 3. Ocultamos el texto original (el 0, 1, 2...) y mostramos el nuevo número formateado */ #gallery-grid .masonry-card-num { visibility: hidden; /* Oculta el texto interno original sin romper el espacio del contenedor */ position: relative; } #gallery-grid .masonry-card-num::before { content: counter(masonry-counter, decimal-leading-zero); /* Genera: 01, 02, 03... */ visibility: visible; /* Hace visible el contador de CSS */ position: absolute; left: 0; top: 0; } /* ─── Gallery modal — captioned image carousel (RelatedGallery) + project narrative (Description as "what we did", Html as story) below. Project-level prev/next (outside the box) cycles all visible cards; image-level prev/next (inside the carousel) cycles that project's RelatedGallery. Cards with no RelatedGallery still open the modal, just without the carousel — see .gallery-modal-box--no-gallery. ── */ .gallery-modal-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--space-16); background: rgba(0,0,0,.92); backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity .22s; } .gallery-modal-overlay.open { opacity: 1; pointer-events: auto; } .gallery-modal-box { position: relative; width: 100%; max-width: 880px; max-height: 92vh; overflow-y: auto; background: var(--CHAR); } .gallery-modal-close { position: absolute; top: 16px; right: 16px; z-index: 10; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--on-light-55); border: none; cursor: pointer; transition: background .2s; } .gallery-modal-close:hover { background: var(--on-light-80); } /* Image carousel */ .gallery-modal-box--no-gallery .gallery-modal-carousel { display: none; } .gallery-modal-carousel { position: relative; overflow: hidden; background: var(--DARK); } .gallery-modal-track { display: flex; transition: transform .35s ease; } .gallery-modal-slide { position: relative; flex: 0 0 100%; width: 100%; aspect-ratio: 21 / 9; } .gallery-modal-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gallery-modal-slide-gradient { position: absolute; inset: 0; background: linear-gradient(0deg, var(--on-light-85) 0%, rgba(10,11,20,0) 100%); } .gallery-modal-caption { position: absolute; left: 24px; right: 24px; bottom: 16px; font-family: var(--font-body); font-size: 13px; color: var(--on-dark-85); } .gallery-modal-cat { position: absolute; top: 16px; left: 16px; font-family: var(--font-heading); font-weight: 700; font-size: 9px; color: #fff; letter-spacing: 2.5px; text-transform: uppercase; background: var(--B); padding: var(--space-4) 10px; } .gallery-modal-imgnav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--on-light-55); border: none; cursor: pointer; transition: background .2s; } .gallery-modal-imgnav:hover { background: var(--on-light-80); } .gallery-modal-imgprev { left: 12px; } .gallery-modal-imgnext { right: 12px; } .gallery-modal-imgbar { position: absolute; bottom: 12px; right: 16px; display: flex; align-items: center; gap: var(--space-12); } .gallery-modal-imgcount { font-family: var(--font-heading); font-weight: 700; font-size: 11px; color: var(--on-dark-60); } .gallery-modal-dots { display: flex; gap: 6px; } .gallery-modal-dot { width: 6px; height: 6px; border-radius: 50%; padding: 0; border: none; cursor: pointer; background: var(--on-dark-40); transition: width .3s, background .3s; } .gallery-modal-dot.active { width: 18px; background: var(--SAND); } /* Content below the carousel */ .gallery-modal-content { padding: var(--space-40); } @media (max-width: 639px) { .gallery-modal-content { padding: 28px var(--space-20); } } .gallery-modal-title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(24px,3vw,32px); color: #fff; line-height: 1.15; letter-spacing: -.5px; margin-bottom: 6px; } .gallery-modal-loc { font-family: var(--font-body); font-size: 14px; color: var(--SAND); margin-bottom: var(--space-24); } .gallery-modal-whatwedid { margin-bottom: var(--space-24); padding: var(--space-16); background: rgba(26,82,168,.12); border: 1px solid rgba(26,82,168,.25); } .gallery-modal-whatwedid-label { font-family: var(--font-heading); font-weight: 700; font-size: 10px; color: var(--B); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; } .gallery-modal-whatwedid-text { font-family: var(--font-body); font-size: 14px; color: var(--on-dark-75); line-height: 1.6; } .gallery-modal-story { display: flex; flex-direction: column; gap: var(--space-16); margin-bottom: var(--space-32); } .gallery-modal-story p { font-family: var(--font-body); font-size: 15px; color: var(--on-dark-65); line-height: 1.8; } .gallery-modal-cta { display: inline-flex; align-items: center; gap: var(--space-8); padding: 14px 28px; background: var(--B); border: none; cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 14px; color: #fff; transition: opacity .2s; } .gallery-modal-cta:hover { opacity: .9; } /* Project-level prev/next — outside the box, over the backdrop */ .gallery-modal-projnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; border-radius: 50%; display: none; align-items: center; justify-content: center; background: var(--on-dark-08); border: 1px solid var(--on-dark-15); cursor: pointer; transition: background .2s; } .gallery-modal-projnav:hover { background: rgba(255,255,255,.16); } .gallery-modal-projprev { left: 16px; } .gallery-modal-projnext { right: 16px; } @media (min-width: 1024px) { .gallery-modal-projnav { display: flex; } } /* ─── Case study modal — image carousel (RelatedGallery) + light content panel (Html/Description as story, Item1-3 as bullets) below. Light/white theme to match the CREAM bento section, unlike the dark Gallery modal. Project-level prev/next (outside the box) cycles all loaded cards; image-level prev/next (inside the carousel) cycles that case's RelatedGallery. Cards with no RelatedGallery still open the modal, just without the carousel — see .case-modal-box--no-gallery. ── */ .case-modal-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--space-16); background: var(--on-light-82); backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity .22s; } .case-modal-overlay.open { opacity: 1; pointer-events: auto; } .case-modal-box { position: relative; width: 100%; max-width: 980px; max-height: 92vh; overflow-y: auto; background: #fff; } .case-modal-close { position: absolute; top: 16px; right: 16px; z-index: 10; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--on-light-55); border: none; cursor: pointer; transition: background .2s; } .case-modal-close:hover { background: var(--on-light-80); } /* Image carousel */ .case-modal-box--no-gallery .case-modal-carousel { display: none; } .case-modal-carousel { position: relative; overflow: hidden; background: var(--DARK); } .case-modal-track { display: flex; transition: transform .35s ease; } .case-modal-slide { position: relative; flex: 0 0 100%; width: 100%; aspect-ratio: 16 / 9; } .case-modal-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .case-modal-slide-gradient { position: absolute; inset: 0; background: linear-gradient(0deg, var(--on-light-85) 0%, rgba(10,11,20,0) 100%); } .case-modal-caption { position: absolute; left: 24px; right: 24px; bottom: 16px; font-family: var(--font-body); font-size: 13px; color: var(--on-dark-85); } .case-modal-cat { position: absolute; top: 16px; left: 16px; font-family: var(--font-heading); font-weight: 700; font-size: 9px; color: #fff; letter-spacing: 2.5px; text-transform: uppercase; background: var(--B); padding: var(--space-4) 10px; } .case-modal-imgnav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--on-light-55); border: none; cursor: pointer; transition: background .2s; } .case-modal-imgnav:hover { background: var(--on-light-80); } .case-modal-imgprev { left: 12px; } .case-modal-imgnext { right: 12px; } .case-modal-imgbar { position: absolute; bottom: 12px; right: 16px; display: flex; align-items: center; gap: var(--space-12); } .case-modal-imgcount { font-family: var(--font-heading); font-weight: 700; font-size: 11px; color: var(--on-dark-60); } .case-modal-dots { display: flex; gap: 6px; } .case-modal-dot { width: 6px; height: 6px; border-radius: 50%; padding: 0; border: none; cursor: pointer; background: var(--on-dark-40); transition: width .3s, background .3s; } .case-modal-dot.active { width: 18px; background: var(--SAND); } /* Content below the carousel — light theme, matches the CREAM section */ .case-modal-content { padding: var(--space-40); } @media (max-width: 639px) { .case-modal-content { padding: 28px var(--space-20); } } .case-modal-title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(24px,3vw,32px); color: var(--CHAR); letter-spacing: -.5px; margin-bottom: var(--space-20); } #case-modal-loc { color: var(--MUTED); } .case-modal-story { display: flex; flex-direction: column; gap: var(--space-16); margin-bottom: var(--space-32); } .case-modal-story p { font-family: var(--font-body); font-size: 16px; color: #444; line-height: 1.75; } .case-modal-items { display: flex; flex-direction: column; gap: var(--space-8); margin-bottom: var(--space-32); } .case-modal-item { display: flex; align-items: flex-start; gap: 10px; list-style: none; } .case-modal-bullet { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 7px; background: var(--B); } .case-modal-item span { font-family: var(--font-body); font-size: 14px; color: var(--MUTED); line-height: 1.6; } .case-modal-stats { border-top: 1px solid var(--on-light-border); } .case-modal-stat-val { font-family: var(--font-heading); font-weight: 800; font-size: 26px; color: var(--B); line-height: 1; } .case-modal-stat-lbl { font-family: var(--font-body); font-size: 11px; color: var(--MUTED); margin-top: var(--space-4); line-height: 1.4; white-space: pre-line; } .case-modal-cta { display: inline-flex; align-items: center; gap: var(--space-8); padding: 14px 28px; background: var(--B); border: none; cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 14px; color: #fff; transition: opacity .2s; } .case-modal-cta:hover { opacity: .9; } /* Project-level prev/next — outside the box, over the backdrop */ .case-modal-projnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; border-radius: 50%; display: none; align-items: center; justify-content: center; background: var(--on-dark-08); border: 1px solid var(--on-dark-15); cursor: pointer; transition: background .2s; } .case-modal-projnav:hover { background: rgba(255,255,255,.16); } .case-modal-projprev { left: 16px; } .case-modal-projnext { right: 16px; } @media (min-width: 1024px) { .case-modal-projnav { display: flex; } } /* ══════════════════════════════════════════════════════════════════════════ Blog page (News & Blog) — styles specific to news-blog.html. Layout/tokens above (page-section, section-h2, eyebrow, gallery-filter, pagination, carousel-*, vreview-*, faq-cta, dl-btn, job-all-link, stat-val/ stat-lbl, hero-noise, breadcrumb) are reused as-is; only the blog article card system and hero media treatment are new. ══════════════════════════════════════════════════════════════════════════ */ /* ─── Hero (image background variant of .section-hero) ──────────────────── */ .blog-hero-scrim { background: linear-gradient(100deg, rgba(10,11,20,.97) 0%, rgba(10,11,20,.88) 50%, var(--on-light-45) 100%); } .blog-hero-preview { display: flex; flex-direction: column; max-width: 520px; background: rgba(30,34,53,.85); backdrop-filter: blur(16px); border: 1px solid var(--on-dark-10); cursor: pointer; margin: var(--space-32) 0 var(--space-40); transition: border-color .2s; } .blog-hero-preview:hover { border-color: rgba(196,171,108,.4); } .blog-hero-preview-body { padding: var(--space-20); } .blog-hero-preview-meta { display: flex; align-items: center; gap: var(--space-8); margin-bottom: var(--space-12); } .blog-hero-preview-cat { font-family: var(--font-heading); font-weight: 600; font-size: 9px; color: var(--SAND); letter-spacing: 2.5px; text-transform: uppercase; } .blog-hero-preview-dot { width: 2px; height: 2px; border-radius: 50%; background: var(--on-dark-30); flex-shrink: 0; } .blog-hero-preview-time { font-family: var(--font-body); font-size: 11px; color: var(--on-dark-40); } .blog-hero-preview-title { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: #fff; line-height: 1.3; margin-bottom: var(--space-12); } .blog-hero-preview-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: 600; font-size: 12px; color: var(--SAND); } /* ─── Category filter bar ──────────────────────────────────────────────── Lives INSIDE the "More from our blog" section, between that section's header and its grid — not a standalone full-bleed band, and deliberately NOT sticky (it reads as a filter toolbar for the grid right below it). Scrolls horizontally on narrow viewports; the bottom rule separates it from the grid. */ .blog-cat-bar { border-bottom: 1px solid var(--on-light-hairline); overflow-x: auto; scrollbar-width: none; } .blog-cat-bar::-webkit-scrollbar { display: none; } /* Light variant of the shared .gallery-filter pill — scoped to this bar only. .gallery-filter's base styling assumes a dark surface and is used that way on reviews.html, resources.html, job stories and the project gallery. */ #blog-cat-tabs .gallery-filter { color: var(--MUTED); border-color: var(--on-light-border); } #blog-cat-tabs .gallery-filter.active { background: var(--B); color: #fff; border-color: var(--B); } #blog-cat-tabs .gallery-filter:hover:not(.active) { color: var(--CHAR); border-color: rgba(10,11,20,.35); } .blog-filter-empty { display: none; text-align: center; padding: var(--space-40) 0; } .blog-filter-empty.visible { display: block; } /* ─── Featured layout: big card + stacked side cards ─────────────────────── */ .blog-feature-card { background: var(--WHITE); cursor: pointer; } .blog-feature-media { position: relative; overflow: hidden; flex: 1; min-height: 320px; } @media (max-width: 1023px) { .blog-feature-media { min-height: 260px; } } .blog-feature-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; } .blog-feature-card:hover .blog-feature-media img { transform: scale(1.05); } .blog-feature-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, var(--on-light-92) 0%, rgba(10,11,20,.1) 60%, transparent 100%); } .blog-feature-text { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px; } .blog-feature-title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(24px, 3vw, 36px); color: #fff; line-height: 1.1; letter-spacing: -.5px; margin: 10px 0; } .blog-feature-desc { font-family: var(--font-body); font-size: 14px; color: var(--on-dark-55); line-height: 1.65; } .blog-feature-footer { display: flex; align-items: center; padding: var(--space-20) 28px; border-top: 1px solid var(--on-light-hairline); } .blog-side-card { display: flex; background: var(--WHITE); border: 1px solid var(--on-light-border); cursor: pointer; transition: border-color .2s; } .blog-side-card:hover { border-color: rgba(196,171,108,.3); } .blog-side-thumb { position: relative; width: 140px; flex-shrink: 0; overflow: hidden; } .blog-side-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .blog-side-card:hover .blog-side-thumb img { transform: scale(1.06); } .blog-side-body { display: flex; flex-direction: column; justify-content: center; padding: 18px var(--space-20); min-width: 0; } .blog-side-title { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--CHAR); line-height: 1.3; margin: var(--space-8) 0 10px; } /* ─── Meta row + category badge + "read more" link — shared by all cards ── */ .blog-card-meta { display: flex; align-items: center; gap: var(--space-8); } .blog-card-meta span:not(.blog-card-dot) { font-family: var(--font-body); font-size: 11px; color: var(--on-dark-40); } .blog-card-dot { width: 2px; height: 2px; border-radius: 50%; background: var(--on-dark-25); flex-shrink: 0; } .blog-card-badge { display: inline-block; padding: 3px 10px; background: rgba(196,171,108,.18); border: 1px solid rgba(196,171,108,.4); font-family: var(--font-heading); font-weight: 600; font-size: 9px; color: var(--SAND); letter-spacing: 2px; text-transform: uppercase; } .blog-side-card .blog-card-badge, .blog-card .blog-card-badge { margin-bottom: var(--space-8); width: fit-content; } .blog-feature-media .blog-card-badge { position: absolute; top: 20px; left: 20px; padding: var(--space-4) var(--space-12); font-size: 9px; letter-spacing: 2.5px; background: rgba(26,82,168,.18); border-color: rgba(26,82,168,.4); color: var(--B); } .blog-card-more { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: 600; font-size: 12px; color: var(--SAND); } /* ─── Light-card variant: featured side list + "more from our blog" grid ── Scoped to these two page-exclusive ids only — .blog-card-badge/-meta/-dot stay dark/gold everywhere else (e.g. news-blog-inner.html's related-posts grid, which shares the plain .blog-card/.blog-card-badge classes). ── */ #featured-side-list .blog-card-badge, #blog-grid .blog-card-badge { background: rgba(26,82,168,.18); border-color: rgba(26,82,168,.4); color: var(--B); } #featured-side-list .blog-card-meta span:not(.blog-card-dot), #blog-grid .blog-card-meta span:not(.blog-card-dot) { color: var(--on-light-35); } #featured-side-list .blog-card-dot, #blog-grid .blog-card-dot { background: rgba(10,11,20,.2); } #blog-grid .blog-card-title { color: var(--CHAR); } #blog-grid .blog-card-desc { color: var(--MUTED); } /* ─── "More from our blog" grid ──────────────────────────────────────────── */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-20); margin-bottom: var(--space-48); } @media (max-width: 1023px) { .blog-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 639px) { .blog-grid { grid-template-columns: 1fr; } } .blog-card { display: flex; flex-direction: column; background: var(--CHAR); border: 1px solid var(--on-dark-hairline); cursor: pointer; transition: border-color .2s; } .blog-card:hover { border-color: rgba(196,171,108,.3); } .blog-card-thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; } .blog-card-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; } .blog-card:hover .blog-card-thumb img { transform: scale(1.05); } .blog-card-thumb-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, var(--on-light-50) 0%, transparent 60%); } .blog-card-thumb .blog-card-badge { position: absolute; top: 16px; left: 16px; margin-bottom: 0; } .blog-card-body { display: flex; flex-direction: column; flex: 1; padding: var(--space-24); } .blog-card-title { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: #fff; line-height: 1.25; margin: var(--space-12) 0 10px; flex: 1; } .blog-card-desc { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-45); line-height: 1.65; margin-bottom: 18px; } #blog-grid .blog-card { background: var(--WHITE); border-color: var(--on-light-border); } /* ══════════════════════════════════════════════════════════════════════════ Blog Inner (Article) page — styles specific to news-blog-inner.html. Reused as-is from elsewhere in this file: .breadcrumb, the .blog-card family, .guides-grid/.guide-card/.guide-h3/.guide-desc, .job-thumb/.job-overlay/ .job-play-btn/.job-play-circle/.job-tag, .carousel-wrap/.carousel-track, .carousel-btn, .carousel-arrow, .vreview-thumb/.vreview-stars, .review-text/ .review-name/.review-meta/.review-footer, .dd-sign-btn, .job-all-link, .section-label, footer. Only the article hero/body/callout/author-card and a few thin sizing/color variants below are new. ══════════════════════════════════════════════════════════════════════════ */ /* ─── Article hero (dark editorial) ──────────────────────────────────────── */ .article-hero { position: relative; overflow: hidden; background: var(--DARK); min-height: 480px; } .article-hero-media { position: absolute; inset: 0; } .article-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .article-hero-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,11,20,1) 0%, var(--on-light-85) 45%, var(--on-light-55) 100%); } .article-hero-inner { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: var(--space-56) var(--space-56) 0; } @media (max-width: 767px) { .article-hero-inner { padding: var(--space-56) var(--space-24) 0; } } .article-meta { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; margin-bottom: var(--space-24); } .article-meta span:not(.article-dot) { font-family: var(--font-body); font-size: 12px; color: var(--on-dark-45); } .article-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--on-dark-30); flex-shrink: 0; } .article-h1 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(30px, 4.5vw, 62px); color: #fff; line-height: 1.08; letter-spacing: -1.5px; margin-bottom: var(--space-16); max-width: 800px; } .article-subtitle { font-family: var(--font-body); font-size: 17px; color: var(--on-dark-55); line-height: 1.7; max-width: 580px; margin-bottom: 28px; } .article-byline-row { display: flex; flex-direction: column; gap: var(--space-20); padding: var(--space-20) 0; border-top: 1px solid var(--on-dark-10); } @media (min-width: 640px) { .article-byline-row { flex-direction: row; align-items: center; justify-content: space-between; } } .article-byline { display: flex; align-items: center; gap: var(--space-12); } .article-byline-icon { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(26,82,168,.25); border: 1px solid rgba(26,82,168,.4); } .article-byline-name { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: #fff; } .article-byline-title { font-family: var(--font-body); font-size: 11px; color: var(--on-dark-40); } .article-share { display: flex; align-items: center; gap: var(--space-8); } .article-share-label { font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--on-dark-30); letter-spacing: 1px; text-transform: uppercase; margin-right: 2px; } .share-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--on-dark-15); background: none; color: var(--on-dark-muted); cursor: pointer; transition: background .2s; } .share-btn:hover { background: var(--on-dark-10); } .share-btn-light { border-color: rgba(0,0,0,.12); color: var(--MUTED); } .share-btn-light:hover { background: rgba(0,0,0,.06); } /* ─── Article body (prose) ───────────────────────────────────────────────── */ .article-body { background: #fff; padding: var(--space-64) var(--space-56); } @media (max-width: 767px) { .article-body { padding: var(--space-48) var(--space-24); } } .article-content { max-width: 768px; margin: 0 auto; } .article-h2 { font-family: var(--font-heading); font-weight: 700; font-size: 26px; color: var(--CHAR); line-height: 1.2; margin-bottom: var(--space-20); } .article-p { font-family: var(--font-body); font-size: 16px; color: #444; line-height: 1.8; margin-bottom: var(--space-20); } .article-inline-media { position: relative; overflow: hidden; width: 100%; aspect-ratio: 768/400; margin-bottom: var(--space-12); } .article-inline-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .article-caption { font-family: var(--font-body); font-size: 12px; color: var(--MUTED); line-height: 1.6; border-left: 2px solid var(--SAND); padding-left: var(--space-12); margin-bottom: 36px; } .article-callout { margin: var(--space-32) 0; padding: var(--space-24); background: var(--CREAM); border-left: 3px solid var(--SAND); } .article-callout-label { font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: var(--SAND); letter-spacing: 2px; text-transform: uppercase; margin-bottom: var(--space-8); } .article-quote { font-family: var(--font-body); font-size: 15px; color: var(--CHAR); line-height: 1.65; font-style: italic; } .article-tags-row { display: flex; flex-direction: column; gap: var(--space-16); padding-top: var(--space-24); margin-bottom: var(--space-40); border-top: 1px solid rgba(0,0,0,.08); } @media (min-width: 640px) { .article-tags-row { flex-direction: row; align-items: center; justify-content: space-between; } } .article-tags { display: flex; flex-wrap: wrap; gap: var(--space-8); } .tag-chip { padding: 6px var(--space-12); background: rgba(0,0,0,.05); font-family: var(--font-body); font-size: 12px; color: var(--CHAR); font-weight: 500; } .article-author-card { display: flex; align-items: flex-start; gap: var(--space-20); padding: var(--space-24); background: var(--CREAM); border: 1px solid rgba(0,0,0,.07); } .article-author-icon { width: 56px; height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(26,82,168,.1); border: 1px solid rgba(26,82,168,.2); } .article-author-name { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--CHAR); margin-bottom: 3px; } .article-author-title { font-family: var(--font-body); font-size: 12px; color: var(--MUTED); margin-bottom: var(--space-8); } .article-author-bio { font-family: var(--font-body); font-size: 13px; color: #555; line-height: 1.65; } /* ─── Related symptoms ───────────────────────────────────────────────────── */ .symptom-card { display: flex; flex-direction: column; padding: 28px; background: var(--CHAR); border: 1px solid var(--on-dark-hairline); } .symptom-title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(24px, 2.5vw, 38px); color: #fff; line-height: 1.05; letter-spacing: -.5px; margin-bottom: var(--space-20); } .symptom-list { display: flex; flex-direction: column; gap: var(--space-8); } /* ─── Job stories carousel card (reuses .job-thumb/.job-overlay/.job-play-*) ── */ .job-story-card { flex-shrink: 0; width: min(80vw, 440px); background: var(--DARK); border: 1px solid var(--on-dark-hairline); cursor: pointer; } .job-story-body { padding: var(--space-20); } .job-story-title { font-family: var(--font-heading); font-weight: 700; font-size: 17px; color: #fff; margin-bottom: var(--space-4); } /* ─── Related reviews carousel (light / blue-accent variant) ─────────────── */ .section-label-blue span { color: var(--B); } .section-label-blue .eyebrow-line { background: var(--B); } .link-arrow-blue { display: inline-flex; align-items: center; gap: var(--space-8); font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--B); background: none; border: none; cursor: pointer; padding: 0; transition: opacity .2s; } .link-arrow-blue:hover { opacity: .75; } .review-cream-card { flex-shrink: 0; width: min(85vw, 500px); display: flex; flex-direction: column; background: var(--CREAM); border: 1px solid rgba(0,0,0,.07); } .review-cream-body { padding: var(--space-32); display: flex; flex-direction: column; flex: 1; } .review-cream-quote { font-family: Georgia, serif; font-size: 36px; color: rgba(26,82,168,.12); line-height: .7; margin-bottom: var(--space-8); } .review-cream-avatar { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(26,82,168,.1); border: 1px solid rgba(26,82,168,.2); } .tag-gold-light { display: inline-block; padding: var(--space-4) 10px; background: rgba(196,171,108,.12); border: 1px solid rgba(196,171,108,.25); font-family: var(--font-heading); font-weight: 600; font-size: 9px; color: var(--SAND); letter-spacing: 1.5px; text-transform: uppercase; } /* Extend the shared thumb/badge components to the job-story carousel context */ .job-thumb .blog-card-badge { position: absolute; top: 16px; left: 16px; margin-bottom: 0; } /* ═══════════════════════════════════════════════════════════════════════════ PRICING PAGE (New Design) ═══════════════════════════════════════════════════════════════════════════ */ .dl-icon-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-24); } /* ─── Hero ───────────────────────────────────────────────────────────────── */ .pr-hero { position: relative; overflow: hidden; padding: var(--space-80) 0 88px; background: var(--DARK); } .pr-hero-bg { position: absolute; inset: 0; pointer-events: none; } .pr-hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .1; } .pr-hero-grad { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,11,20,0) 0%, var(--on-light-95) 100%); } .pr-hero-inner { position: relative; max-width: 1440px; margin: 0 auto; padding: 0 var(--space-56); } @media (max-width: 767px) { .pr-hero-inner { padding: 0 var(--space-32); } } .pr-hero-ctas { display: flex; align-items: center; gap: var(--space-16); flex-wrap: wrap; margin-top: var(--space-40); } .pr-btn-primary { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: var(--space-12); padding: var(--space-16) var(--space-32); background: var(--B); font-family: var(--font-body); font-weight: 700; font-size: 15px; color: #fff; border: none; cursor: pointer; transition: opacity .2s; } .pr-btn-primary:hover { opacity: .9; } .pr-btn-primary svg { transition: transform .2s; } .pr-btn-primary:hover svg { transform: translateX(4px); } .pr-link-muted { display: inline-flex; align-items: center; gap: var(--space-8); font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--on-dark-muted); border-bottom: 1px solid var(--on-dark-20); padding-bottom: 2px; } .pr-stats-wrap { margin-top: var(--space-64); } .pr-stat-n { font-family: var(--font-heading); font-weight: 800; font-size: clamp(28px, 3vw, 44px); color: #fff; line-height: 1; letter-spacing: -1px; } .pr-stat-l { font-family: var(--font-body); font-size: 13px; color: var(--on-dark-40); margin-top: 6px; } /* ─── Section header (shared: Buyer&Seller / Cost by Service / Cost by City) ── */ .pr-section-sub { font-family: var(--font-body); font-size: 16px; color: var(--on-dark-45); line-height: 1.7; margin-top: var(--space-12); max-width: 520px; } .pr-sub-wide { max-width: 540px; } .pr-grid-spaced { margin-top: var(--space-56); } .pr-quote-link { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-12) var(--space-24); border: 1.5px solid var(--on-dark-20); font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--on-dark-70); flex-shrink: 0; transition: transform .2s; } .pr-quote-link:hover svg { transform: translateX(4px); } .pr-quote-link svg { transition: transform .2s; } /* ─── Cost by City cards ─────────────────────────────────────────────────── */ .pr-city-card { display: flex; flex-direction: column; overflow: hidden; background: var(--CHAR); border: 1px solid var(--on-dark-hairline); } .pr-city-img { position: relative; overflow: hidden; flex-shrink: 0; height: 160px; } .pr-city-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pr-city-img-ov { position: absolute; inset: 0; background: var(--on-light-45); } .pr-city-tag { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-16) var(--space-20); display: flex; align-items: center; gap: var(--space-8); } .pr-city-tag span { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: #fff; } .pr-city-body { display: flex; flex-direction: column; flex: 1; padding: var(--space-24); } .pr-city-range { font-family: var(--font-heading); font-weight: 800; font-size: clamp(22px, 2vw, 30px); color: var(--SAND); line-height: 1.1; letter-spacing: -0.5px; margin-bottom: var(--space-8); } .pr-city-note { font-family: var(--font-body); font-size: 14px; color: var(--on-dark-45); line-height: 1.7; flex: 1; margin-bottom: var(--space-20); } .pr-city-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--SAND); background: none; border: none; cursor: pointer; padding: 0; transition: transform .2s; } .pr-city-card:hover .pr-city-link { transform: translateX(4px); } /* ─── Cost by Service card overrides (matches React exactly; .cost-card is shared with resources.html's compact cost cards, so scope by section id instead of editing the shared rule) ────────────────────────────────────── */ #cost-by-service .cost-card { background: var(--DARK); border-color: var(--on-dark-hairline); } #cost-by-service .cost-card:hover { border-color: var(--on-dark-hairline); } #cost-by-service .cost-body { padding: var(--space-32); } #cost-by-service .cost-tag { display: inline-flex; background: rgba(196,171,108,.1); border-color: rgba(196,171,108,.18); font-weight: 600; font-size: 10px; padding: 2px var(--space-8); margin-bottom: var(--space-20); width: fit-content; } #cost-by-service .cost-h3 { font-size: 22px; } #cost-by-service .cost-range { font-size: clamp(24px, 2.5vw, 32px); color: var(--SAND); margin-bottom: var(--space-8); } #cost-by-service .cost-sub { color: var(--on-dark-40); font-size: 13px; margin-bottom: var(--space-12); } #cost-by-service .cost-desc { font-size: 14px; margin-bottom: var(--space-20); } /* ─── Intro section (generic — light two-column intro, any page) ─────────── */ .eyebrow-label { font-family: var(--font-heading); font-weight: 700; font-size: 11px; color: var(--B); letter-spacing: 4px; text-transform: uppercase; margin: 0 0 16px; } .intro-h1 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(32px, 4vw, 56px); color: var(--CHAR); line-height: 1.05; letter-spacing: -1px; margin: 0; } .intro-body { font-family: var(--font-body); font-size: 18px; color: var(--on-light-60); line-height: 1.7; margin: 0; } .intro-chip { padding: 6px 14px; background: rgba(26,82,168,.12); border: 1px solid rgba(26,82,168,.3); font-family: var(--font-heading); font-weight: 700; font-size: 10px; color: var(--B); letter-spacing: 2.5px; text-transform: uppercase; } /* ─── Trust bar (generic — light stat row, any page) ────────────────────── Distinct from .trust-bar/.trust-val/.trust-lbl and .trust-stats-row/ .trust-stat-num/.trust-stat-lbl above, which are both dark-surface (CHAR bg, SAND/on-dark text) — this variant sits on a light surface. */ .light-stat-num { font-family: var(--font-heading); font-weight: 800; font-size: clamp(22px,2.5vw,34px); color: var(--B); line-height: 1; margin: 0 0 6px; } .light-stat-lbl { font-family: var(--font-body); font-size: 10px; color: var(--MUTED); letter-spacing: 1.5px; text-transform: uppercase; margin: 0; } /* ─── What we handle — scan tiles (generic, reused by ExpresiaCore/ServicesPage) ── */ .scan-tile-h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(28px,3.4vw,46px); color: var(--CHAR); line-height: 1.05; letter-spacing: -1px; margin: 0 0 12px; } .scan-tile-sub { font-family: var(--font-body); font-size: 16px; color: var(--MUTED); line-height: 1.6; margin: 0; } .scan-tile { display: flex; flex-direction: column; height: 100%; text-align: left; padding: 22px 22px 20px; min-height: 210px; border: 1px solid var(--on-light-border); background: var(--WHITE); cursor: pointer; transition: background-color .2s; } .scan-tile.active, .scan-tile:hover, .scan-tile:focus { background: var(--on-light-wash); } .scan-tile-badge { display: inline-block; align-self: flex-start; margin-bottom: 10px; padding: 5px 14px; background: rgba(26,82,168,.08); border: 1px solid rgba(26,82,168,.25); font-family: var(--font-heading); font-weight: 700; font-size: 10px; color: var(--B); letter-spacing: 2.5px; text-transform: uppercase; } .scan-tile-h3 { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: var(--CHAR); line-height: 1.2; letter-spacing: -0.3px; margin: 0 0 8px; } .scan-tile-body { font-family: var(--font-body); font-size: 14px; color: var(--MUTED); line-height: 1.55; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .scan-tile-body.no-chips { margin-bottom: 0; } .scan-tile-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 16px; } .scan-tile-chip { padding: 3px 10px; background: var(--on-light-wash); border: 1px solid var(--on-light-border); font-family: var(--font-body); font-size: 11px; color: var(--on-light-body); } .scan-tile-ctas { margin-top: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .scan-tile-inspect, .scan-tile-more { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--B); background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .scan-tile-more svg { transition: transform .2s; } .scan-tile-more:hover svg { transform: translateX(2px); } .scan-tile-panel { position: relative; overflow: hidden; } .scan-tile-panel-img { position: absolute; inset: 0; opacity: 0; transition: opacity .25s ease; } .scan-tile-panel-img.active { opacity: 1; } .scan-tile-panel-img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ─── Diagnosis guide (generic — dark quick-jump hero + category cards + quick-answer banner; not tied to Problem Signs, reusable by any page that needs a "browse by category" symptom/topic picker) ── */ .blueprint-grid { position: absolute; inset: 0; pointer-events: none; opacity: .05; background-image: linear-gradient(rgba(255,255,255,1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px); background-size: 40px 40px; } .eyebrow-gold { font-family: var(--font-heading); font-weight: 600; font-size: 11px; color: var(--SAND); letter-spacing: 4px; text-transform: uppercase; margin: 0 0 10px; } .diag-h1 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(26px,3.4vw,40px); color: #fff; line-height: 1.05; letter-spacing: -1px; margin: 0 0 36px; max-width: 720px; } .diag-tile { display: flex; align-items: center; gap: var(--space-12); padding: 16px 20px; background: var(--on-dark-03); text-decoration: none; transition: background-color .2s, border-color .2s; } .diag-tile:hover { background: var(--on-dark-hairline); border-color: rgba(196,171,108,.4); } .diag-tile-icon { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; filter: brightness(0) invert(1); opacity: .85; transition: transform .2s; } .diag-tile-icon img { width: 100%; height: 100%; object-fit: contain; } .diag-tile:hover .diag-tile-icon { transform: scale(1.1); } .diag-tile-label { font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--on-dark-85); line-height: 1.2; } .diag-card { background: var(--WHITE); border: 1px solid var(--on-light-border); transition: border-color .2s; scroll-margin-top: 160px; } .diag-card:hover { border-color: var(--B); } .diag-card-photo { position: relative; display: block; height: 260px; overflow: hidden; } .diag-card-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .diag-card-photo:hover > img { transform: scale(1.04); } .diag-card-photo-ov { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,11,20,.86) 0%, rgba(10,11,20,.12) 65%); } .diag-card-icon { background: var(--on-dark-border); } .diag-card-icon img { width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); } .diag-card-title { font-family: var(--font-heading); font-weight: 800; font-size: 26px; color: #fff; line-height: 1.1; letter-spacing: -.5px; text-transform: uppercase; margin: 0; } .diag-symptom-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; padding: 12px 0; border: none; border-bottom: 1px solid var(--on-light-hairline); background: none; text-align: left; cursor: pointer; transition: color .2s; } .diag-card-body > .diag-symptom-row:last-child { border-bottom: none; } .diag-symptom-row span { font-family: var(--font-body); font-size: 15px; color: var(--on-light-body); line-height: 1.5; transition: color .2s, font-weight .2s; } .diag-symptom-row svg { flex-shrink: 0; color: var(--MUTED); transition: color .2s, transform .2s; } .diag-symptom-row:hover span { color: var(--B); font-weight: 600; } .diag-symptom-row:hover svg { color: var(--B); transform: translateX(2px); } .diag-card-foot { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--B); text-decoration: none; } .diag-card-foot svg { transition: transform .3s; } .diag-card-foot:hover svg { transform: translateX(3px); } .diag-cant-find { font-family: var(--font-body); font-size: 15px; color: var(--MUTED); } .diag-cant-find a { color: var(--B); font-weight: 600; text-decoration: none; } .diag-cant-find a:hover { text-decoration: underline; } .diag-banner-item { border-top: 1px solid var(--on-dark-hairline); } @media (min-width: 768px) { .diag-banner-item { border-top: none; border-left: 1px solid var(--on-dark-hairline); } .diag-banner-item:first-child { border-left: none; } } .diag-banner-item:first-child { border-top: none; } .diag-banner-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--SAND); flex-shrink: 0; } .diag-banner-q { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: #fff; margin: 0; } .diag-banner-a { font-family: var(--font-body); font-size: 14px; color: var(--on-dark-muted); line-height: 1.7; margin: 0; } /* ─── Category Hero (problemsignCategory.html / ExpresiaCore/ProblemSignCategory) ─── Extends the .diag-* family above rather than a new prefix — same Expresia page, just landed on a specific category instead of the 4-tile picker. */ .diag-cat-hero-icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .diag-cat-hero-icon img { width: 22px; height: 22px; object-fit: contain; filter: brightness(0) invert(1); } .diag-cat-h1 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(30px, 3.6vw, 46px); color: #fff; line-height: 1.02; letter-spacing: -1.2px; margin: 0 0 14px; } .diag-cat-p { font-family: var(--font-body); font-size: 15.5px; color: var(--on-dark-65); line-height: 1.65; max-width: 380px; margin: 0 0 22px; } .diag-cat-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1.5px solid var(--SAND); background: transparent; text-decoration: none; font-family: var(--font-body); font-weight: 600; font-size: 13.5px; color: #fff; cursor: pointer; transition: background-color .2s; } .diag-cat-btn:hover { background: var(--on-dark-wash); } .diag-cat-btn svg { transition: transform .2s; } .diag-cat-btn:hover svg { transform: translateX(2px); } .diag-cat-symptom { display: flex; flex-direction: column; text-align: left; text-decoration: none; background: var(--CHAR); border: 1.5px solid var(--on-dark-hairline); transition: border-color .2s; } .diag-cat-symptom:hover { border-color: var(--SAND); } .diag-cat-symptom-photo { position: relative; height: 130px; overflow: hidden; flex-shrink: 0; } .diag-cat-symptom-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .diag-cat-symptom:hover .diag-cat-symptom-photo img { transform: scale(1.08); } .diag-cat-symptom-photo-ov { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,11,20,.55) 0%, transparent 55%); } .diag-cat-symptom-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding: 14px 16px; } .diag-cat-symptom-row span { font-family: var(--font-body); font-size: 13.5px; line-height: 1.35; color: var(--on-dark-75); transition: color .2s; } .diag-cat-symptom:hover .diag-cat-symptom-row span { color: #fff; font-weight: 500; } .diag-cat-symptom-row svg { flex-shrink: 0; color: var(--on-dark-30); transition: color .2s, transform .2s; } .diag-cat-symptom:hover .diag-cat-symptom-row svg { color: var(--SAND); transform: translateX(2px); } .diag-other-label { font-family: var(--font-heading); font-weight: 700; font-size: 11px; color: var(--MUTED); letter-spacing: 3px; text-transform: uppercase; text-align: center; margin: 0 0 40px; } /* ─── ProblemSignInner: Explainer (problemsignInner.html / ExpresiaCore/ProblemSignInner) ─── Moved here from the page's own