/* ========================================================================= Linchpin SE — main.css Foundation: tokens, reset, typography, header (top-nav), footer, buttons, shared cards + project filter. Section-specific styles are split into per-area files / block stylesheets. ========================================================================= */ /* --- Design tokens ------------------------------------------------------ */ :root { --lp-orange: #e97e20; --lp-orange-dark: #c24026; --lp-grey: #848486; --lp-grey-light: #9a999a; --lp-grey-bg: #f5f5f5; --lp-white: #ffffff; --lp-black: #000000; --lp-dark: #201f1f; --lp-slate: #425462; --lp-blue: #139edb; --lp-text: #444444; --lp-text-muted: #5a5a5c; /* darker muted grey for eyebrows + section intros (a11y) */ --lp-heading: #201f1f; --lp-font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --lp-font-head: 'Montserrat', 'Poppins', sans-serif; --lp-font-alt: 'Titillium Web', 'Poppins', sans-serif; --lp-container: 1200px; --lp-container-wide: 1340px; --lp-gutter: clamp(1.25rem, 4vw, 3rem); --lp-header-h: 84px; --lp-radius: 4px; --lp-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); --lp-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.15); --lp-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* --- Reset / base ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--lp-header-h); -webkit-text-size-adjust: 100%; /* iOS rubber-band overscroll past the footer reveals the root bg — make it match the dark footer instead of flashing white below the page. NOTE: do NOT set overflow on — it breaks the sticky header. */ background-color: #2A2A2E; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--lp-font-body); font-size: 1rem; line-height: 1.7; color: var(--lp-text); background: var(--lp-white); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--lp-orange); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--lp-orange-dark); } h1, h2, h3, h4, h5, h6 { font-family: var(--lp-font-head); color: var(--lp-heading); line-height: 1.2; margin: 0 0 0.5em; font-weight: 700; } h1 { font-weight: 800; line-height: 1.1; } p { margin: 0 0 1.25rem; } /* Accessibility helpers */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .lp-skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--lp-orange); color: #fff; padding: 0.75rem 1.25rem; } .lp-skip-link:focus { left: 1rem; top: 1rem; color: #fff; } :focus-visible { outline: 3px solid var(--lp-orange); outline-offset: 2px; } /* --- Layout helpers ----------------------------------------------------- */ .lp-container { max-width: var(--lp-container); margin-inline: auto; padding-inline: var(--lp-gutter); } .lp-container--wide { max-width: var(--lp-container-wide); margin-inline: auto; padding-inline: var(--lp-gutter); } /* Page content: constrain bare core blocks (paragraphs/headings the client adds) to a readable column, while full-width section blocks still break out. */ .lp-page-content > * { max-width: var(--lp-container); margin-inline: auto; padding-inline: var(--lp-gutter); } .lp-page-content > .alignwide { max-width: var(--lp-container-wide); } .lp-page-content > .alignfull { max-width: none; padding-inline: 0; } .lp-page-content > p, .lp-page-content > h1, .lp-page-content > h2, .lp-page-content > h3, .lp-page-content > h4, .lp-page-content > ul, .lp-page-content > ol, .lp-page-content > blockquote, .lp-page-content > figure { margin-block: 1.25rem; } .lp-section { padding-block: clamp(3.5rem, 8vw, 7rem); } .lp-section--dark { background: var(--lp-dark); color: #cfcfcf; } .lp-section--dark h1, .lp-section--dark h2, .lp-section--dark h3 { color: #fff; } .lp-section--grey { background: var(--lp-grey-bg); } /* Eyebrow + section title pattern (matches Solonick .section-title / h3 eyebrow) */ .lp-eyebrow { display: inline-block; font-family: var(--lp-font-head); text-transform: uppercase; letter-spacing: 2px; font-size: 13px; font-weight: 600; color: var(--lp-text-muted); margin: 0 0 1.5rem; padding-bottom: 14px; position: relative; } .lp-eyebrow::after { content: ""; position: absolute; left: 0; bottom: 6px; width: 50px; height: 1px; border-bottom: 1px dotted #999; } .lp-section-title { font-family: var(--lp-font-head); font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; text-transform: uppercase; color: #323a45; line-height: 1.15; margin: 0 0 1rem; } .lp-section-title span, .lp-section-title .lp-accent, .lp-section-title em { color: var(--lp-orange); } /* Left accent bar shared by section heads (Solonick .section-title:before) */ .lp-stats__head, .lp-process__head, .lp-testimonials__head, .lp-highlights__head, .lp-affiliations__head, .lp-why__head { padding-left: 26px; border-left: 4px solid var(--lp-orange); text-align: left; } /* --- Buttons ------------------------------------------------------------ */ /* Hover = a line slides in before the label and the button lengthens (keeps the bright brand orange; no darker-orange swap). */ .lp-btn { display: inline-flex; align-items: center; gap: 0; font-family: var(--lp-font-head); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.9rem 1.75rem; border-radius: var(--lp-radius); background: var(--lp-orange); color: #fff !important; border: 2px solid var(--lp-orange); transition: padding 0.3s var(--lp-ease), background 0.2s ease, color 0.2s ease; cursor: pointer; } .lp-btn::before { content: ""; width: 0; height: 2px; background: currentColor; flex: 0 0 auto; margin-right: 0; opacity: 0; transition: width 0.3s var(--lp-ease), margin-right 0.3s var(--lp-ease), opacity 0.3s ease; } .lp-btn:hover::before { width: 24px; margin-right: 12px; opacity: 1; } .lp-btn--outline { background: transparent; color: var(--lp-orange) !important; } .lp-btn--outline:hover { background: var(--lp-orange); color: #fff !important; } .lp-btn--text { background: none; border: none; color: var(--lp-orange) !important; padding: 0; text-transform: uppercase; } .lp-btn--text::before { display: none; } .lp-btn--text:hover { color: var(--lp-orange-dark); } /* ========================================================================= HEADER — DARK top navigation, left-aligned, full-height Contact button. Logo links home (no Home item). Menu: Who We Are / What We Do / Contact. ========================================================================= */ .lp-header { position: sticky; top: 0; z-index: 100; background: #fff; transition: box-shadow 0.3s ease, background 0.3s ease; } /* No bottom border (it showed as a white sliver under the orange Contact button); separation comes from the shadow once scrolled. */ .lp-header.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); } .lp-header__inner { width: 100%; padding-left: var(--lp-gutter); /* no right padding: Contact sits flush to the far-right edge */ min-height: var(--lp-header-h); display: flex; align-items: stretch; gap: 0; /* stretch so Contact is full height */ } /* Logo far-left, menu items spread across the open width, Contact block flush to the far-right edge */ .lp-header__brand { display: flex; align-items: center; margin-right: 2.5rem; flex: 0 0 auto; } .lp-nav { flex: 1 1 auto; } .lp-header__brand img, .lp-header .custom-logo, .lp-header .custom-logo-link img { max-height: 52px; width: auto; } .lp-logo { display: inline-flex; align-items: center; } .lp-logo-img { height: 52px; width: auto; display: block; } .lp-logo__mark { width: 42px; height: 42px; object-fit: contain; } .lp-logo-text { font-family: var(--lp-font-head); line-height: 1; } .lp-logo-text strong { display: block; font-size: 1.3rem; font-weight: 800; letter-spacing: 0.04em; color: #fff; } .lp-logo-text span { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--lp-grey-light); } /* Nav — left aligned right after the logo */ .lp-nav { display: flex; align-items: stretch; flex: 1 1 auto; } .lp-nav .lp-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; width: 100%; column-gap: clamp(1.5rem, 3.5vw, 3.5rem); } /* Text items sit to the RIGHT (the first item soaks up the slack), Contact flush far-right */ .lp-menu > li:first-child { margin-left: auto; } /* Bright-orange back link pinned to the left of the nav (CPT singles only) */ .lp-nav-back { display: inline-flex; align-items: center; align-self: center; flex: 0 0 auto; margin-right: 1.25rem; font-family: var(--lp-font-head); font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lp-orange); transition: color 0.2s ease, transform 0.2s ease; } .lp-nav-back:hover, .lp-nav-back:focus { color: var(--lp-dark); transform: translateX(-2px); } /* Text items sit left-aligned right after the logo and spread out with wide gaps + letter-spacing (horizontal echo of the old vertical menu); Contact is pushed to the far-right edge by its own auto-margin. */ .lp-menu > li { position: relative; display: flex; align-items: stretch; } .lp-menu > li > a { display: flex; align-items: center; padding: 0 0.5rem; font-family: var(--lp-font-head); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.26em; color: #2b2b2d; border-bottom: 3px solid transparent; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .lp-menu > li > a:hover, .lp-menu .current-menu-item > a, .lp-menu .current_page_item > a, .lp-menu .current-menu-parent > a, .lp-menu .current-menu-ancestor > a { color: var(--lp-dark); border-bottom-color: var(--lp-orange); } .lp-menu .menu-item-has-children > a::after { content: "\25BE"; font-size: 0.7em; margin-left: 0.45em; opacity: 0.7; } /* Dropdowns */ .lp-menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 230px; list-style: none; margin: 0; padding: 0.4rem 0; background: var(--lp-dark); box-shadow: var(--lp-shadow-lg); border-top: 3px solid var(--lp-orange); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 10; } .lp-menu > li:hover > .sub-menu, .lp-menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .lp-menu .sub-menu a { display: block; padding: 0.65rem 1.4rem; font-family: var(--lp-font-head); font-weight: 500; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.72); } .lp-menu .sub-menu a:hover { color: #fff; background: rgba(255, 255, 255, 0.05); } /* Contact = full-height flush orange button at the far-right edge (follows the right-aligned group) */ .lp-menu > li.menu-contact { margin-left: 0; } .lp-menu > li.menu-contact > a { background: var(--lp-orange); color: #fff; border-bottom: 0; padding: 0 2.25rem; font-weight: 700; gap: 0; transition: background 0.2s ease; } .lp-menu > li.menu-contact > a::before { content: ""; width: 0; height: 2px; background: #fff; align-self: center; margin-right: 0; opacity: 0; transition: width 0.3s var(--lp-ease), margin-right 0.3s var(--lp-ease), opacity 0.3s ease; } .lp-menu > li.menu-contact > a:hover { background: var(--lp-orange); color: #fff; } /* stays bright */ .lp-menu > li.menu-contact > a:hover::before { width: 20px; margin-right: 10px; opacity: 1; } /* Mobile toggle (icon only — no MENU text); large tap target */ .lp-nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 7px; align-self: center; margin-left: auto; width: 56px; height: 56px; padding: 14px; border: 0; background: none; cursor: pointer; } .lp-nav-toggle__bar { display: block; height: 3px; width: 100%; border-radius: 2px; background: #2b2b2d; transition: transform 0.3s var(--lp-ease), opacity 0.3s; } .lp-nav-toggle[aria-expanded="true"] .lp-nav-toggle__bar:nth-child(1) { transform: translateY(10px) rotate(45deg); } .lp-nav-toggle[aria-expanded="true"] .lp-nav-toggle__bar:nth-child(2) { opacity: 0; } .lp-nav-toggle[aria-expanded="true"] .lp-nav-toggle__bar:nth-child(3) { transform: translateY(-10px) rotate(-45deg); } @media (max-width: 980px) { .lp-header__inner { padding-right: var(--lp-gutter); } .lp-nav-toggle { display: flex; } .lp-nav { position: fixed; inset: var(--lp-header-h) 0 auto auto; width: min(340px, 88vw); max-height: calc(100vh - var(--lp-header-h)); overflow-y: auto; background: #fff; box-shadow: var(--lp-shadow-lg); border-left: 1px solid rgba(0,0,0,0.08); transform: translateX(100%); transition: transform 0.35s var(--lp-ease); padding: 0; /* menu only as tall as its items */ } .lp-nav.is-open { transform: translateX(0); } .lp-nav .lp-menu { flex-direction: column; align-items: stretch; } .lp-menu > li:first-child, .lp-menu > li.menu-contact { margin-left: 0; } /* reset desktop spread on mobile */ .lp-menu > li { display: block; } .lp-menu > li > a { padding: 1.05rem 1.5rem; border-bottom: 1px solid rgba(0,0,0,0.08); } .lp-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border-top: 0; padding: 0 0 0.5rem 1rem; } /* Contact = full-width row, same height as the other items, orange */ .lp-menu > li.menu-contact > a { margin: 0; justify-content: center; padding: 1.15rem 1.5rem; } } /* ========================================================================= SHARED COMPONENTS — project + team cards, filter bar ========================================================================= */ .lp-grid { display: grid; gap: 1.5rem; align-items: start; } /* Fix: WordPress flow-layout adds margin-block-start to all children except the first, which makes the first grid column sit higher than the rest. Neutralize. */ .lp-grid > * { margin-block: 0 !important; margin-top: 0 !important; align-self: start; } .lp-grid--3 { grid-template-columns: repeat(3, 1fr); } .lp-grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .lp-grid--3, .lp-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .lp-grid--3, .lp-grid--4 { grid-template-columns: 1fr; } } /* Project card */ .lp-project-card { position: relative; overflow: hidden; border-radius: var(--lp-radius); background: #000; } .lp-project-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .lp-project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--lp-ease), opacity 0.4s ease; } .lp-project-card:hover .lp-project-card__media img { transform: scale(1.07); } /* Elite touch: an orange line sweeps across the bottom on hover */ .lp-project-card::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--lp-orange); transform: scaleX(0); transform-origin: left center; transition: transform 0.45s var(--lp-ease); z-index: 3; pointer-events: none; } .lp-project-card:hover::after { transform: scaleX(1); } .lp-project-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem; background: linear-gradient(transparent 0%, rgba(17,16,15,0.45) 38%, rgba(17,16,15,0.96)); transform: translateY(16px); transition: transform 0.45s var(--lp-ease); } .lp-project-card:hover .lp-project-card__body { transform: translateY(0); } .lp-project-card__cat { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: #ffa64d; margin-bottom: 0.3rem; text-shadow: 0 1px 6px rgba(0,0,0,0.7); } .lp-project-card__title { font-size: 1rem; color: #fff; margin: 0; letter-spacing: 0; transition: letter-spacing 0.45s var(--lp-ease); text-shadow: 0 1px 8px rgba(0,0,0,0.55); } .lp-project-card:hover .lp-project-card__title { letter-spacing: 0.05em; } .lp-project-card__title::after { content: "\2192"; color: var(--lp-orange); display: inline-block; margin-left: 0.45rem; opacity: 0; transform: translateX(-6px); transition: opacity 0.3s ease, transform 0.3s var(--lp-ease); } .lp-project-card:hover .lp-project-card__title::after { opacity: 1; transform: translateX(0); } .lp-project-card.is-hidden { display: none; } /* Team card — refined hover: subtle zoom, bottom gradient + "View Profile", orange underline grows, name turns orange. No marker over the face. */ .lp-team-card { text-align: center; } .lp-team-card__media { position: relative; aspect-ratio: 5 / 6; overflow: hidden; border-radius: var(--lp-radius); background: var(--lp-grey-bg); } .lp-team-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--lp-ease); } .lp-team-card:hover .lp-team-card__media img { transform: scale(1.05); } .lp-team-card__media::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--lp-orange); transform: scaleX(0); transform-origin: left center; transition: transform 0.4s var(--lp-ease); z-index: 3; } .lp-team-card:hover .lp-team-card__media::after { transform: scaleX(1); } .lp-team-card__overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1.15rem; opacity: 0; transition: opacity 0.35s var(--lp-ease); background: linear-gradient(to top, rgba(20,19,19,0.66) 0%, rgba(20,19,19,0.12) 38%, transparent 62%); } .lp-team-card:hover .lp-team-card__overlay { opacity: 1; } .lp-team-card__view { display: inline-flex; align-items: center; gap: 0.4rem; color: #fff; font-family: var(--lp-font-head); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; transform: translateY(8px); transition: transform 0.35s var(--lp-ease); } .lp-team-card:hover .lp-team-card__view { transform: translateY(0); } .lp-team-card__view::after { content: "\2192"; color: var(--lp-orange); } .lp-team-card__name { font-size: 1.05rem; margin: 0.85rem 0 0.15rem; transition: color 0.25s var(--lp-ease); } .lp-team-card:hover .lp-team-card__name { color: var(--lp-orange); } .lp-team-card__role { font-size: 0.8rem; color: var(--lp-grey); margin: 0; text-transform: uppercase; letter-spacing: 0.08em; } /* Filter bar */ .lp-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 2.5rem; } .lp-filter__btn { font-family: var(--lp-font-head); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.55rem 1.15rem; border: 1px solid rgba(0,0,0,0.12); border-radius: 999px; background: #fff; color: var(--lp-heading); cursor: pointer; transition: 0.2s ease; } .lp-filter__btn:hover { border-color: var(--lp-orange); color: var(--lp-orange); } .lp-filter__btn.is-active { background: var(--lp-orange); border-color: var(--lp-orange); color: #fff; } /* ========================================================================= FOOTER — dark, geometric constellation bg, single contact column, back-to-top ========================================================================= */ .lp-footer { position: relative; overflow: hidden; background-color: #ffffff; color: #4a4a4e; font-size: 0.92rem; border-top: 14px solid var(--lp-orange); } /* Animated particle canvas host (faithful port of the original jParticle footer) */ .lp-footer__particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .lp-footer__particles canvas { display: block; width: 100%; height: 100%; } .lp-footer__watermark { position: absolute; left: clamp(1.25rem, 3vw, 2.5rem); top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-family: var(--lp-font-head); font-weight: 800; font-size: clamp(1.6rem, 3.5vw, 2.75rem); letter-spacing: 0.18em; color: rgba(20,19,19,0.11); pointer-events: none; user-select: none; line-height: 1; z-index: 0; } @media (max-width: 860px) { .lp-footer__watermark { display: none; } } .lp-footer__inner { position: relative; z-index: 1; max-width: var(--lp-container-wide); margin-inline: auto; padding-inline: var(--lp-gutter); } .lp-footer__main { position: relative; padding-block: clamp(3rem, 6vw, 5rem); } .lp-footer__main .lp-footer__inner { display: grid; grid-template-columns: 1.3fr 1.4fr 1fr; gap: 2.5rem; } @media (max-width: 860px) { .lp-footer__main .lp-footer__inner { grid-template-columns: 1fr; gap: 2.25rem; } } .lp-footer a { color: #333336; } .lp-footer a:hover { color: var(--lp-orange); } .lp-footer__heading { color: var(--lp-heading); font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 1.5rem; padding-bottom: 12px; position: relative; } .lp-footer__heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38px; height: 2px; background: var(--lp-orange); } .lp-footer__brandcol .lp-logo--footer { display: inline-block; } .lp-footer__brandcol .lp-logo-img { height: 104px; width: auto; display: block; margin-bottom: 1.75rem; } /* Contact column — grouped, no per-row lines; section dividers between offices */ .lp-footer__contactlist { list-style: none; margin: 0; padding: 0; } .lp-footer__contactlist li { display: flex; gap: 0.75rem; padding: 7px 0; align-items: flex-start; } .lp-footer__cval { display: block; line-height: 1.6; color: #3a3a3c; font-size: 13px; letter-spacing: 0.4px; } .lp-footer__label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #2c2c2e; font-weight: 600; } .lp-footer__label::after { content: ": "; } .lp-footer__cval a { color: var(--lp-heading); } .lp-footer__cval a:hover { color: var(--lp-orange); } .lp-footer__ico { color: var(--lp-orange); flex: 0 0 auto; font-size: 1rem; line-height: 1.5; display: inline-flex; align-items: center; } .lp-footer__ico svg { display: block; width: 16px; height: 16px; } .lp-footer__subhead { color: var(--lp-heading); font-family: var(--lp-font-head); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; margin: 1.5rem 0 0.6rem; padding-top: 1.25rem; border-top: 1px solid rgba(0,0,0,0.1); } .lp-footer__menu, .lp-footer__menu .sub-menu { list-style: none; margin: 0; padding: 0; } .lp-footer__menu > li { padding: 6px 0; } .lp-footer__menu a { font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: #333336; } .lp-footer__menu a:hover { color: var(--lp-orange); } .lp-footer__menu-contact > a { color: var(--lp-orange); font-weight: 700; letter-spacing: 2px; } .lp-footer__menu-contact > a:hover { color: var(--lp-dark); } /* Office name = orange map-pin link (replaces the written address; one line) */ .lp-footer a.lp-footer__officelink { display: inline-flex; align-items: center; gap: 0.45rem; margin: 1.1rem 0 0.5rem; color: var(--lp-orange); font-family: var(--lp-font-head); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; } .lp-footer a.lp-footer__officelink:hover { color: var(--lp-dark); } .lp-footer__pin { flex: 0 0 auto; } .lp-footer__menu .sub-menu { margin: 6px 0 8px 1.1rem; } .lp-footer__menu .sub-menu li { padding: 4px 0; } .lp-footer__menu .sub-menu a { font-size: 12px; letter-spacing: 1px; color: #6a6a6e; } /* Social — square, hover to circle (Solonick behavior) */ .lp-footer__social { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; align-items: center; gap: 18px; } .lp-footer__social a { display: inline-flex; align-items: center; justify-content: center; color: var(--lp-orange); background: none; border: 0; padding: 0; transition: color 200ms linear, transform 200ms linear; } .lp-footer__social a:hover { color: var(--lp-dark); transform: translateY(-2px); background: none; } .lp-footer__social svg { width: 22px; height: 22px; display: block; } /* Subfooter bar */ .lp-footer__bar { position: relative; z-index: 1; background: #2D2D32; padding-block: 28px; } .lp-footer__copy { margin: 0; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; font-weight: 500; color: rgba(255,255,255,0.71); } /* Back-to-top: vertical orange rectangle flush to the bottom-right corner (matches the Contact block style, rotated vertical). */ .lp-to-top { position: fixed; right: 0; bottom: 0; z-index: 90; width: 46px; height: 96px; border: none; border-radius: 0; cursor: pointer; background: var(--lp-orange); color: #fff; font-size: 1.4rem; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: -2px -2px 18px rgba(0,0,0,0.25); opacity: 0; visibility: hidden; transform: translateY(100%); transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease; } .lp-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .lp-to-top:hover { background: var(--lp-orange); box-shadow: -2px -2px 22px rgba(0,0,0,0.4); } /* stays bright orange */ @media (prefers-reduced-motion: reduce) { .lp-to-top { transition: opacity 0.2s ease; } } /* Mobile: compact square, inset from the corner so it's never clipped */ @media (max-width: 760px) { .lp-to-top { width: 46px; height: 46px; right: 14px; bottom: 14px; border-radius: 6px; } } /* ========================================================================= CORE BLOCK BRAND STYLING (so core buttons/blocks match the design system) ========================================================================= */ .wp-block-button__link { display: inline-flex; align-items: center; gap: 0; background: var(--lp-orange); color: #fff; font-family: var(--lp-font-head); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.9rem 1.75rem; border-radius: var(--lp-radius); border: 2px solid var(--lp-orange); transition: background 0.2s ease, color 0.2s ease; } .wp-block-button__link::before { content: ""; width: 0; height: 2px; background: currentColor; flex: 0 0 auto; margin-right: 0; opacity: 0; transition: width 0.3s var(--lp-ease), margin-right 0.3s var(--lp-ease), opacity 0.3s ease; } .wp-block-button__link:hover, .wp-block-button__link:focus { color: #fff; } .wp-block-button__link:hover::before { width: 24px; margin-right: 12px; opacity: 1; } .is-style-outline .wp-block-button__link, .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--lp-orange); border-color: var(--lp-orange); } .is-style-outline .wp-block-button__link:hover { background: var(--lp-orange); color: #fff; } /* ========================================================================= HOMEPAGE SECTIONS ========================================================================= */ /* Hero — full-bleed image, LEFT-aligned content, dimensional */ .lp-hero { color: #fff; text-align: left; display: flex; align-items: center; position: relative; overflow: hidden; } .lp-hero.wp-block-cover { min-height: clamp(480px, 80vh, 680px); } .lp-hero .wp-block-cover__inner-container { max-width: var(--lp-container-wide); margin-inline: auto; width: 100%; padding-inline: var(--lp-gutter); } .lp-hero .lp-eyebrow { color: var(--lp-orange); } .lp-hero__title { font-size: clamp(2.25rem, 5.5vw, 4rem); color: #fff; margin: 0 0 0.75rem; max-width: 14ch; } .lp-hero__title .lp-accent, .lp-hero__title strong { color: var(--lp-orange); font-weight: 800; } .lp-hero__tagline { font-family: var(--lp-font-head); font-size: clamp(1rem, 2vw, 1.35rem); color: #e7e7e7; margin: 0 0 2rem; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; } .lp-hero__cta { margin: 0; } /* Custom hero block — moderate height (client prefers it not full-screen) */ .lp-hero--block { min-height: var(--hero-min, 540px); background: var(--lp-dark); background-size: cover; background-position: center; } .lp-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* Diagonal fade for readability + dimension: darkest on the left, fading to fully transparent by ~75% across. The 75deg angle tilts the fade to follow the text — lighter sooner at the top, darkness reaching farther right at the bottom. Darkness is driven by the block's "overlay" control (--lp-hero-ov). */ .lp-hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(75deg, rgba(20,19,19, calc(var(--lp-hero-ov, 0.55) + 0.35)) 0%, rgba(20,19,19, calc(var(--lp-hero-ov, 0.55) + 0.10)) 28%, rgba(20,19,19, calc(var(--lp-hero-ov, 0.55) * 0.35)) 52%, rgba(20,19,19, 0) 75%); } @media (max-width: 760px) { .lp-hero__overlay { background: linear-gradient(180deg, rgba(20,19,19,0.45), rgba(20,19,19,0.7)); } } .lp-hero__inner { position: relative; z-index: 2; max-width: var(--lp-container-wide); margin-inline: auto; width: 100%; } .lp-hero--editor { display: flex; align-items: center; } .lp-hero--editor .lp-hero__title { color: #fff; } /* Hero on-page anchor bar (sits at the bottom of the hero) */ .lp-anchor-nav { background: rgba(20,19,19,0.92); border-top: 2px solid var(--lp-orange); position: relative; z-index: 5; } .lp-anchor-nav__inner { max-width: var(--lp-container-wide); margin-inline: auto; padding: 0 var(--lp-gutter); display: flex; gap: 2rem; flex-wrap: wrap; } .lp-anchor-nav a { display: inline-block; padding: 1.1rem 0; color: #cfcfcf; font-family: var(--lp-font-head); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; border-bottom: 3px solid transparent; } .lp-anchor-nav a:hover, .lp-anchor-nav a.is-active { color: #fff; border-bottom-color: var(--lp-orange); } /* Intro + layered image + expertise grid */ .lp-intro { padding-top: clamp(0.75rem, 2vw, 1.5rem); padding-bottom: clamp(0.5rem, 1.5vw, 1rem); } .lp-highlights--hero { padding-bottom: clamp(0.75rem, 2vw, 1.5rem); } .lp-expertise-band { padding-top: clamp(0.75rem, 2vw, 1.5rem); padding-bottom: clamp(1.75rem, 4vw, 3rem); } .lp-expertise-band__cta { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; } .lp-expertise-band__cta > * { margin: 0 !important; } .lp-intro__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; } @media (max-width: 820px) { .lp-intro__grid { grid-template-columns: 1fr; gap: 1.5rem; } } .lp-intro__media { position: relative; } .lp-intro__media::before { content: ""; position: absolute; left: -18px; top: -18px; width: 45%; height: 60%; background: var(--lp-orange); z-index: 0; } .lp-intro__media img { position: relative; z-index: 1; width: 100%; height: auto; box-shadow: var(--lp-shadow-lg); display: block; } .lp-intro__head .lp-section-title { font-size: clamp(1.6rem, 3.5vw, 2.15rem); text-transform: none; font-weight: 700; color: #292929; } .lp-intro__head .lp-section-title em, .lp-intro__head .lp-section-title .lp-accent { color: var(--lp-orange); font-style: italic; font-family: Georgia, "Times New Roman", Times, serif; } .lp-intro__body p:last-child { margin-bottom: 0; } /* Dark-section eyebrows */ .lp-stats .lp-eyebrow, .lp-section--dark .lp-eyebrow, .lp-hero .lp-eyebrow, .lp-why .lp-eyebrow { color: rgba(255,255,255,0.6); } .lp-stats .lp-eyebrow::after, .lp-section--dark .lp-eyebrow::after, .lp-hero .lp-eyebrow::after, .lp-why .lp-eyebrow::after { border-bottom-color: rgba(255,255,255,0.4); } /* Why Choose Us — dark feature band (replaces stats + expertise) */ /* Skinny dark banner: heading + a single row of compact items, tight padding. */ .lp-why { position: relative; background: var(--lp-dark); overflow: hidden; color: #fff; padding-block: clamp(2.75rem, 5.5vw, 4.5rem); } /* Mobile: solid dark (no split). */ .lp-why__bg { display: none; } .lp-why__inner { position: relative; z-index: 1; max-width: var(--lp-container-wide); margin-inline: auto; padding-inline: var(--lp-gutter); } /* Desktop: solid grey box left (full height) + image right (shorter) so the grey extends past the image — dynamic split like the old stats row. */ @media (min-width: 860px) { /* Desktop base = the section BELOW this one, so the uncovered bottom-right strip blends into it. Default white; add lp-why--base-grey when the next section is grey (e.g., before the Process row). */ .lp-why { background: #fff; } .lp-why.lp-why--base-grey { background: var(--lp-grey-bg); } .lp-why__bg { display: block; position: absolute; inset: 0; z-index: 0; } /* Grey box: small, left, full height (extends past the image). */ .lp-why__bg-color { position: absolute; left: 0; top: 0; bottom: 0; width: 15%; background: #2b2b2f; } /* Image: right, tall enough to cover the widgets; short enough that the box extends past it at the bottom. */ .lp-why__bg-img { position: absolute; right: 0; top: 0; width: 85%; height: calc(100% - 44px); background-size: cover; background-position: center; } .lp-why__bg-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,19,19,0.94) 0%, rgba(20,19,19,0.62) 55%, rgba(20,19,19,0.45) 100%); } /* Small nudge so the widgets clear the (now small) grey box. */ .lp-why__grid { padding-left: clamp(1rem, 12%, 9rem); } } .lp-why__head { margin-bottom: clamp(1.25rem, 3vw, 2rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.75rem; flex-wrap: wrap; } .lp-why__headmain { min-width: 0; } .lp-why__headcta { flex: 0 0 auto; } .lp-why__head .lp-section-title { color: #fff; text-transform: uppercase; font-size: clamp(1.5rem, 3vw, 2rem); } .lp-why__head .lp-section-title .lp-accent { color: var(--lp-orange); } /* Auto one row, equal widths for ANY number of cards (4/5/6…) on desktop. */ .lp-why__grid { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: clamp(0.75rem, 1.5vw, 1.25rem); } .lp-why__grid > * { margin: 0 !important; } @media (max-width: 1100px) { .lp-why__grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, 1fr); } } @media (max-width: 620px) { .lp-why__grid { grid-template-columns: repeat(2, 1fr); } } /* CTA lives in the header on desktop; on mobile it drops into the grid as the final tile so an odd card count (e.g. 5) fills out to an even 2-col layout and the button no longer dangles awkwardly under the heading. */ .lp-why__gridcta { display: none; } @media (max-width: 620px) { .lp-why__headcta { display: none; } .lp-why__gridcta { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 100%; line-height: 1.2; border-radius: var(--lp-radius); padding: clamp(0.85rem, 1.3vw, 1.05rem); } } .lp-why__card { background: rgba(18,17,17,0.55); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--lp-radius); padding: clamp(0.85rem, 1.3vw, 1.05rem); transition: border-color 0.25s ease, transform 0.25s ease; } .lp-why__card:hover { border-color: rgba(233,126,32,0.55); transform: translateY(-3px); } .lp-why__mark { color: var(--lp-orange); margin-bottom: 0.5rem; min-height: 32px; display: flex; align-items: center; } .lp-why__num { font-family: var(--lp-font-head); font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 800; line-height: 1; } .lp-why__icon svg { width: 28px; height: 28px; } .lp-why__title { color: #fff; font-size: 0.95rem; font-weight: 700; margin: 0 0 0.3rem; } .lp-why__text { color: rgba(255,255,255,0.88); font-size: 0.84rem; margin: 0; line-height: 1.5; } /* CTA rendered as a card in the same row — equal cell (1fr width, stretched height) but a solid orange button. */ .lp-why__cta-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; text-align: center; background: var(--lp-orange); color: #fff; border-radius: var(--lp-radius); padding: clamp(0.85rem, 1.3vw, 1.05rem); font-family: var(--lp-font-head); font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.2; transition: background 0.2s ease, transform 0.2s ease; } .lp-why__cta-plus { font-size: 1.9rem; font-weight: 300; line-height: 0.8; } .lp-why__cta-card:hover, .lp-why__cta-card:focus { color: #fff; transform: translateY(-3px); } /* Editor-only per-card controls */ .lp-why--editor .lp-why__editrow { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed rgba(255,255,255,0.2); } /* Expertise row (under the intro) — clean, no icons; title above an orange rule */ .lp-expertise { margin-top: clamp(2.5rem, 6vw, 4rem); } .lp-expertise__grid { display: grid; grid-template-columns: 1fr; gap: 2.25rem; align-items: start; } .lp-expertise__grid > * { margin: 0 !important; align-self: start; } @media (min-width: 760px) { .lp-expertise__grid { grid-template-columns: repeat(2, 1fr); column-gap: clamp(3rem, 7vw, 6rem); row-gap: 2.5rem; } } .lp-expertise__item h3 { font-size: 1.1rem; font-weight: 600; color: #292929; margin: 0 0 1rem; padding-bottom: 0.85rem; border-bottom: 2px solid var(--lp-orange); display: block; } .lp-expertise__item p { font-size: 0.95rem; margin: 0; } .lp-expertise__item--wide { grid-column: 1 / -1; } .lp-expertise__item--wide p + p { margin-top: 0.75rem; } .lp-expertise__cta { margin-top: 2.5rem; display: flex; gap: 1rem; flex-wrap: wrap; } .lp-intro__cta { margin-top: 1.75rem; display: flex; gap: 1rem; flex-wrap: wrap; } .lp-intro__cta > * { margin: 0 !important; } .lp-intro__media figure { margin: 0; } .lp-intro__media .wp-block-image { margin: 0; } .lp-highlights--empty { padding-block: clamp(3rem, 6vw, 5rem); text-align: center; } .lp-highlights--empty .lp-section-title, .lp-highlights--empty p { color: #cfcfcf; } /* Stats — dark, solid color left third + image right two-thirds, numbers overlap full width */ /* Mobile-first: solid dark band, 2-col stats */ .lp-stats { position: relative; background: var(--lp-dark); overflow: hidden; } .lp-stats__bg { display: none; } .lp-stats__inner { position: relative; z-index: 1; max-width: var(--lp-container-wide); margin-inline: auto; padding: clamp(3rem, 7vw, 5.5rem) var(--lp-gutter); } .lp-stats__head { margin-bottom: clamp(2rem, 5vw, 3.5rem); } .lp-stats__head .lp-section-title { color: #fff; text-transform: uppercase; } .lp-stats__head .lp-section-title .lp-accent { color: var(--lp-orange); } .lp-stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.25rem 1.5rem; } .lp-stats__grid > * { margin: 0 !important; align-self: start; } /* Desktop: white section; dark grey box (left, full height) + image (right, shorter) so the grey box extends past the image at the bottom. */ @media (min-width: 860px) { .lp-stats { background: var(--lp-grey-bg); } .lp-stats__bg { display: block; position: absolute; inset: 0; z-index: 0; } .lp-stats__bg-color { position: absolute; left: 0; top: 0; bottom: 0; width: 42%; background: var(--lp-dark); } .lp-stats__bg-img { position: absolute; right: 0; top: 0; width: 58%; height: calc(100% - 72px); background-size: cover; background-position: center; } .lp-stats__bg-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,19,19,0.94) 0%, rgba(20,19,19,0.55) 60%, rgba(20,19,19,0.35) 100%); } .lp-stats__inner { padding-bottom: clamp(5.5rem, 9vw, 7.5rem); } .lp-stats__grid { grid-template-columns: repeat(4, 1fr); } } .lp-stat { text-align: left; } .lp-stat__num { font-family: var(--lp-font-head); font-size: 44px; font-weight: 700; color: #fff; line-height: 1; margin: 0; } .lp-stat__label { position: relative; display: inline-block; margin: 14px 0 0 40px; font-family: var(--lp-font-head); text-transform: uppercase; letter-spacing: 2px; font-size: 10px; font-weight: 500; color: rgba(255,255,255,0.55); padding: 12px 24px; background: rgba(51,51,51,0.31); } .lp-stat__label::before { content: ""; position: absolute; top: 50%; left: -40px; width: 24px; height: 2px; margin-top: -1px; background: var(--lp-orange); } @media (max-width: 700px) { .lp-stat__label { margin-left: 0; } .lp-stat__label::before { display: none; } } /* Process — icons + dashed connectors + cards + faint numbers + section CTA */ .lp-process { position: relative; } .lp-process__head { margin-bottom: 2.5rem; max-width: 720px; } .lp-process__head .lp-section-title .lp-accent { color: var(--lp-orange); } .lp-process__intro { color: var(--lp-text-muted); max-width: 60ch; } .lp-process__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; align-items: stretch; } .lp-process__grid > * { margin: 0 !important; } @media (max-width: 820px) { .lp-process__grid { grid-template-columns: 1fr; } } .lp-process__step { position: relative; display: flex; flex-direction: column; background: #f9f9f9; border: 1px solid #eee; padding: 40px 40px 40px; height: 100%; overflow: hidden; } /* Step number: large italic orange design element, top-right, behind the text */ .lp-process__num { position: absolute; top: 2px; right: 18px; bottom: auto; z-index: 0; font-family: var(--lp-font-head); font-size: clamp(58px, 6vw, 88px); font-style: italic; font-weight: 800; color: rgba(233,126,32,0.55); line-height: 1; margin: 0; pointer-events: none; } .lp-process__step-title, .lp-process__sub, .lp-process__step p, .lp-process__link { position: relative; z-index: 1; } .lp-process__step-title { font-size: 18px; font-weight: 600; color: #292929; margin: 0 0 0.75rem; padding-right: 48px; min-height: 1.4em; } .lp-process__sub { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; color: #999; font-size: 0.92rem; margin: 0 0 1rem; min-height: 2.6em; } .lp-process__step p { font-size: 0.95rem; color: var(--lp-text); } /* CTA link: arrow makes it clearly a link; sits flush at the card bottom (aligned across cards) */ .lp-process__link { display: inline-flex; align-items: center; margin-top: auto; padding-top: 0.75rem; font-family: var(--lp-font-head); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 3px; color: var(--lp-orange); } .lp-process__link::after { content: "\2192"; margin-left: 0.6rem; transition: transform 0.2s ease; } .lp-process__link:hover::after { transform: translateX(5px); } .lp-process__cta { text-align: right; margin-top: 2.5rem; } .lp-process__intro { margin-top: 1rem; } /* Project highlights + slider */ .lp-highlights__head { max-width: 480px; margin: 0 0 2.5rem; } .lp-highlights__head .lp-btn { margin-top: 1.5rem; } .lp-highlights__cta { text-align: center; margin-top: 2.5rem; } .lp-highlights .lp-fpc__dots { display: none; } /* arrows only */ /* Trim the bottom padding — the next section already has top padding */ .lp-highlights { padding-top: clamp(0.5rem, 1.5vw, 1.25rem); padding-bottom: clamp(1.25rem, 2.5vw, 2rem); } /* Desktop: the heading sits at the TOP-left over white (eyebrow + title fully legible); the slider is pulled up so only the CTA button overlaps the left (inactive) image. The active image leans right (data-lp-fpc-center). */ @media (min-width: 980px) { .lp-highlights__head { max-width: none; margin: 0; position: relative; z-index: 4; } .lp-highlights__head .lp-section-title { white-space: nowrap; } /* keep "Project Highlights" on one line */ .lp-highlights .lp-fpc { margin-top: -4.5rem; } } .lp-highlights__sub { color: var(--lp-text-muted); font-size: clamp(1rem, 2vw, 1.3rem); font-weight: 500; margin: 0.75rem 0 0; max-width: 34ch; } /* Hero mode — the gallery acts as the homepage header */ .lp-highlights--hero { padding-top: clamp(1.25rem, 3.5vw, 2.5rem); } .lp-highlights--hero .lp-section-title { white-space: normal; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.08; text-transform: none; font-weight: 800; letter-spacing: 0.01em; } /* Larger hero images on desktop so the gallery fills the screen; keep a mobile-friendly height so portraits don't look stretched. */ .lp-highlights--hero .lp-fpc__media img { aspect-ratio: auto; height: clamp(400px, 60vh, 680px); } @media (max-width: 760px) { .lp-highlights--hero .lp-fpc__media img { height: clamp(260px, 42vh, 400px); } } @media (min-width: 980px) { .lp-highlights--hero .lp-fpc { margin-top: -5.5rem; } } /* (Nav is static at all sizes — no scroll-resize. The light global header above handles the styling.) */ /* Featured Projects center-mode carousel (clone of .fet_pr-carousel) */ .lp-fpc { position: relative; } .lp-fpc__viewport { overflow: hidden; } .lp-fpc__track { display: flex; align-items: center; transition: transform 0.55s var(--lp-ease); will-change: transform; } .lp-fpc__slide { flex: 0 0 auto; padding: 0; opacity: 0.8; transform: scale(0.84); transform-origin: center center; z-index: 1; transition: opacity 0.5s var(--lp-ease), transform 0.5s var(--lp-ease); cursor: pointer; } .lp-fpc__slide.is-current { opacity: 1; transform: scale(1.05); z-index: 2; cursor: default; } .lp-fpc__slide.is-current .lp-fpc__media { box-shadow: 0 24px 60px rgba(0,0,0,0.28); } /* Immediate neighbours scale TOWARD the active slide so their inner edges meet it — eliminates the gap left by centre-origin scaling. */ .lp-fpc__slide.is-current + .lp-fpc__slide { transform-origin: left center; } .lp-fpc__slide:has(+ .lp-fpc__slide.is-current) { transform-origin: right center; } /* Clickable affordance: pointer + image lift on hover, orange arrow on the title */ .lp-fpc__media { cursor: pointer; } .lp-fpc__slide:hover .lp-fpc__media img { transform: scale(1.05); } .lp-fpc__title a::after { content: " \2192"; color: var(--lp-orange); } .lp-fpc__media { position: relative; display: block; overflow: hidden; } .lp-fpc__media img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: transform 0.6s var(--lp-ease); } .lp-fpc__slide.is-current .lp-fpc__media:hover img { transform: scale(1.05); } .lp-fpc__zoom { position: absolute; top: 0; right: -70px; width: 70px; height: 60px; display: grid; place-items: center; color: #fff; background: #35353A; z-index: 5; transition: right 0.4s var(--lp-ease) 0.2s; } .lp-fpc__zoom svg { width: 22px; height: 22px; } .lp-fpc__slide.is-current .lp-fpc__zoom { right: 0; } .lp-fpc__text { background: #35353A; padding: 24px 30px; opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s; } /* Title shows on hover only (per design) */ .lp-fpc__slide:hover .lp-fpc__text { opacity: 1; transform: translateY(0); } .lp-fpc__cat { display: block; color: var(--lp-orange); text-transform: uppercase; letter-spacing: 2px; font-size: 11px; font-weight: 600; margin-bottom: 0.4rem; } .lp-fpc__title { font-size: 18px; margin: 0; font-weight: 600; } .lp-fpc__title a { color: #fff; } .lp-fpc__title a:hover { color: var(--lp-orange); } .lp-fpc__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 50px; height: 50px; border: none; border-radius: 50%; cursor: pointer; background: rgba(20,19,19,0.55); color: #fff; font-size: 1.6rem; line-height: 1; display: grid; place-items: center; transition: background 0.2s ease, opacity 0.2s ease; } /* Magnifier removed per design — title shows on hover instead */ .lp-fpc__zoom { display: none; } .lp-fpc__arrow:hover { background: var(--lp-orange); } .lp-fpc__arrow:disabled { opacity: 0.3; cursor: default; } .lp-fpc__arrow--prev { left: 12px; } .lp-fpc__arrow--next { right: 12px; } .lp-fpc__dots { display: flex; gap: 0.5rem; justify-content: center; margin-top: 2rem; } .lp-fpc__dot { width: 10px; height: 10px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: rgba(255,255,255,0.25); transition: background 0.2s ease, transform 0.2s ease; } .lp-fpc__dot.is-active { background: var(--lp-orange); transform: scale(1.25); } /* Editor: no JS, show first few side by side */ .editor-styles-wrapper .lp-fpc__slide { opacity: 1; transform: none; } .lp-slider { position: relative; } .lp-slider__viewport { overflow: hidden; } .lp-slider__track { display: flex; gap: 1.5rem; transition: transform 0.5s var(--lp-ease); will-change: transform; } .lp-slider__track > * { flex: 0 0 auto; } /* width set by JS; sensible fallback below */ .lp-slider:not(.is-static) .lp-slider__track > * { min-width: 240px; } /* When everything fits, center the row and drop slider chrome */ .lp-slider.is-static .lp-slider__track { justify-content: center; flex-wrap: wrap; transform: none !important; } .lp-slider.is-static .lp-slider__dots { display: none; } .lp-slider__arrow { position: absolute; top: calc(50% - 22px); transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; background: #fff; color: var(--lp-heading); box-shadow: var(--lp-shadow); font-size: 1.5rem; line-height: 1; display: grid; place-items: center; z-index: 3; transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease; } .lp-slider__arrow:hover { background: var(--lp-orange); color: #fff; } .lp-slider__arrow:disabled { opacity: 0.35; cursor: default; } .lp-slider__arrow--prev { left: -10px; } .lp-slider__arrow--next { right: -10px; } @media (max-width: 1200px) { .lp-slider__arrow--prev { left: 6px; } .lp-slider__arrow--next { right: 6px; } } .lp-slider__dots { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1.75rem; } .lp-slider__dot { width: 10px; height: 10px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: rgba(0,0,0,0.18); transition: background 0.2s ease, transform 0.2s ease; } .lp-slider__dot.is-active { background: var(--lp-orange); transform: scale(1.25); } /* In the editor (no JS layout), let the track wrap so it isn't clipped */ .editor-styles-wrapper .lp-slider__track { flex-wrap: wrap; } .editor-styles-wrapper .lp-slider__arrow, .editor-styles-wrapper .lp-slider__dots { display: none; } /* Dark variant for Project Highlights on dark bg */ .lp-section--dark .lp-highlights__head .lp-section-title, .lp-highlights.lp-section--dark .lp-section-title { color: #fff; } .lp-section--dark .lp-slider__arrow { background: rgba(255,255,255,0.12); color: #fff; } .lp-section--dark .lp-slider__arrow:hover { background: var(--lp-orange); } .lp-section--dark .lp-slider__dot { background: rgba(255,255,255,0.25); } /* Testimonials — full-width columns (less center-blocked) */ .lp-section.lp-testimonials .lp-container { max-width: var(--lp-container-wide); } /* Homepage sections share the same left edge (stats width) so heads line up */ .lp-process .lp-container { max-width: var(--lp-container-wide); } .lp-testimonials__head { margin-bottom: 2.5rem; } .lp-testimonials__head .lp-testimonials__intro { max-width: 70ch; } .lp-testimonials__intro { color: var(--lp-text-muted); margin: 0; max-width: 70ch; } /* Mobile: one review at a time, swipe + arrows */ .lp-testimonials__nav { display: none; } @media (max-width: 760px) { .lp-section.lp-testimonials .lp-testimonials__grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 1rem; } .lp-testimonials__grid::-webkit-scrollbar { display: none; } .lp-testimonials__grid > .lp-testimonial { flex: 0 0 100%; scroll-snap-align: center; } .lp-testimonials__nav { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; } .lp-testimonials__arrow { width: 48px; height: 48px; border: none; border-radius: 50%; cursor: pointer; background: var(--lp-dark); color: #fff; font-size: 1.5rem; line-height: 1; display: grid; place-items: center; } .lp-testimonials__arrow:hover { background: var(--lp-orange); } } .lp-testimonials__grid { gap: 1.5rem; align-items: start; } .lp-testimonial { position: relative; background: var(--lp-grey-bg); padding: 2.25rem 2rem 2rem; border-radius: var(--lp-radius); border-top: 3px solid var(--lp-orange); height: 100%; overflow: hidden; } .lp-testimonial__mark { position: absolute; right: 1.25rem; bottom: 0.5rem; font-family: Georgia, serif; font-size: 5rem; line-height: 1; color: var(--lp-orange); opacity: 0.18; pointer-events: none; } .lp-testimonial__stars { color: var(--lp-orange); letter-spacing: 2px; font-size: 1.05rem; margin-bottom: 0.75rem; } .lp-testimonial__quote { font-size: 1.02rem; font-style: italic; color: var(--lp-heading); margin: 0 0 1.25rem; position: relative; z-index: 1; } .lp-testimonial__cite { font-size: 0.9rem; color: var(--lp-grey); margin: 0 0 0.5rem; } .lp-testimonial__cite strong { color: var(--lp-heading); font-family: var(--lp-font-head); display: block; } .lp-testimonial__link { font-family: var(--lp-font-head); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lp-orange); } /* Affiliations / credentials — full-color dynamic matrix (flex-wrap, full width) */ .lp-affiliations { background: #fff; padding-top: clamp(0.5rem, 1.5vw, 1.25rem); padding-bottom: clamp(2rem, 4vw, 3rem); } .lp-section.lp-testimonials { padding-bottom: clamp(2rem, 4vw, 3rem); } .lp-affiliations__inner { max-width: var(--lp-container-wide); margin-inline: auto; padding-inline: var(--lp-gutter); } .lp-affiliations__head { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); } .lp-affiliations__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.75rem, 4vw, 3.5rem) clamp(2.25rem, 6vw, 5rem); } .lp-affiliations__item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; } .lp-affiliations__logo { max-height: 84px; max-width: 190px; width: auto; height: auto; object-fit: contain; transition: transform 0.3s ease; } .lp-affiliations__item:hover .lp-affiliations__logo { transform: scale(1.06); } @media (max-width: 560px) { .lp-affiliations__logo { max-height: 58px; max-width: 130px; } } /* --- Scroll reveal (subtle; respects reduced motion) -------------------- */ .lp-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--lp-ease), transform 0.7s var(--lp-ease); } .lp-reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .lp-reveal { opacity: 1; transform: none; transition: none; } } /* ========================================================================= PHASE 4 — interior + single pages (mobile-first) ========================================================================= */ /* Prose / content typography */ .lp-prose { max-width: 70ch; } .lp-prose p { margin: 0 0 1.25rem; } .lp-prose h2, .lp-prose h3, .lp-prose h4 { margin: 1.75rem 0 0.75rem; } .lp-prose ol { margin: 0 0 1.25rem 1.25rem; } .lp-prose li { margin-bottom: 0.4rem; } /* Orange-arrow bullets (global) */ .lp-prose ul { list-style: none; margin: 0 0 1.25rem; padding-left: 0; } .lp-prose ul > li { position: relative; padding-left: 1.7em; margin-bottom: 0.5rem; } .lp-prose ul > li::before { content: "\27A4"; position: absolute; left: 0; top: 0.05em; color: var(--lp-orange); font-size: 0.85em; line-height: inherit; } .lp-prose a { color: var(--lp-orange); text-decoration: underline; text-underline-offset: 2px; } .lp-empty { color: var(--lp-grey); padding: 2rem 0; } /* Grid-2 */ .lp-grid--2 { grid-template-columns: 1fr; } @media (min-width: 760px) { .lp-grid--2 { grid-template-columns: repeat(2, 1fr); } } /* Interior page banner */ .lp-page-banner { position: relative; background: var(--lp-dark); color: #fff; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: center; } .lp-page-banner__overlay { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(20,19,19,0.9) 0%, rgba(20,19,19,0.6) 60%, rgba(20,19,19,0.4) 100%); } .lp-page-banner.has-image .lp-page-banner__overlay { backdrop-filter: none; } .lp-page-banner:not(.has-image) { background: var(--lp-dark); } .lp-page-banner__inner { position: relative; z-index: 1; width: 100%; margin-inline: auto; padding: clamp(3rem, 9vw, 5.5rem) var(--lp-gutter); } .lp-page-banner .lp-eyebrow { color: var(--lp-orange); } .lp-page-banner .lp-eyebrow::after { border-bottom-color: rgba(255,255,255,0.4); } .lp-page-banner__title { font-size: clamp(2rem, 6vw, 3.25rem); color: #fff; margin: 0; text-transform: uppercase; font-weight: 800; line-height: 1.1; } .lp-page-banner__title .lp-accent { color: var(--lp-orange); } .lp-page-banner__subtitle { color: #d7d7d9; margin: 1rem 0 0; max-width: 60ch; font-size: 1.05rem; } .lp-page-banner__cta { margin: 1.6rem 0 0; } /* Page header — light "split" layout: corner-bracket title + office image */ .lp-page-header--split { background: #fff; padding-top: clamp(1.75rem, 4.5vw, 3rem); padding-bottom: clamp(1rem, 2.5vw, 1.75rem); } .lp-page-header__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } @media (max-width: 860px) { .lp-page-header__grid { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); } } .lp-page-header__col { min-width: 0; } .lp-page-header--split .lp-eyebrow { color: var(--lp-orange); } .lp-page-header__title { margin: 0.6rem 0 0; } .lp-page-header__titletext { position: relative; display: inline-block; font-family: var(--lp-font-head); font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 800; text-transform: uppercase; line-height: 1.05; color: var(--lp-heading); padding: 0.3em 0.4em; } .lp-page-header__titletext .lp-accent { color: var(--lp-orange); } .lp-page-header__titletext::before, .lp-page-header__titletext::after { content: ""; position: absolute; width: 26px; height: 26px; } .lp-page-header__titletext::before { top: 0; left: 0; border-top: 4px solid var(--lp-orange); border-left: 4px solid var(--lp-orange); } .lp-page-header__titletext::after { bottom: 0; right: 0; border-bottom: 4px solid var(--lp-orange); border-right: 4px solid var(--lp-orange); } .lp-page-header--split .lp-page-header__subtitle { color: var(--lp-text); margin: 1.4rem 0 0; max-width: 52ch; font-size: 1.08rem; line-height: 1.65; } .lp-page-header__cta { margin: 1.75rem 0 0; } .lp-page-header__media { position: relative; } .lp-page-header__media::before { content: ""; position: absolute; right: -18px; top: -18px; width: 55%; height: 62%; background: var(--lp-orange); z-index: 0; border-radius: 4px; } .lp-page-header__media img { position: relative; z-index: 1; width: 100%; height: auto; max-height: 470px; object-fit: cover; display: block; box-shadow: var(--lp-shadow-lg); border-radius: 3px; } @media (max-width: 860px) { .lp-page-header__media::before { right: -12px; top: -12px; } } /* --- Block editor helpers (repeaters) — editor screen only --- */ .lp-repeater-add { margin-top: 1rem; } .lp-highlights__btnwrap { margin-top: 1.5rem; } .lp-highlights__editnote { margin-top: 1.5rem; padding: 1.75rem; border: 1px dashed rgba(0,0,0,0.22); border-radius: var(--lp-radius); color: var(--lp-grey); font-style: italic; text-align: center; } .lp-repeater-remove { display: inline-block; margin-top: 0.25rem; } .lp-stats--editor .lp-stat, .lp-process--editor .lp-process__step, .lp-testimonials--editor .lp-testimonial, .lp-firmbio--editor .lp-timeline__card, .lp-values--editor .lp-value, .lp-contact--editor .lp-office { outline: 1px dashed rgba(0,0,0,0.12); outline-offset: 4px; } .editor-styles-wrapper .lp-repeater-remove { color: #b32d2e; } /* Projects page */ .lp-projects__intro { margin: 0 auto 2.5rem; } /* Projects = full-bleed, tight grid that fills the page (clone of live) */ .lp-projects { background: #fff; } .lp-projects__bar { position: sticky; top: var(--lp-header-h); z-index: 20; display: flex; align-items: center; gap: 0.75rem 1.25rem; flex-wrap: wrap; background: #fff; border-top: 6px solid var(--lp-orange); border-bottom: 1px solid rgba(0,0,0,0.1); padding: 0.7rem var(--lp-gutter); } /* "PROJECTS" — large, orange, left-aligned, indented with the orange accent bar */ .lp-projects__barlabel { display: inline-flex; align-items: center; margin-left: clamp(0.5rem, 2vw, 1.5rem); padding-left: 18px; border-left: 4px solid var(--lp-orange); font-family: var(--lp-font-head); font-weight: 800; font-size: clamp(1.3rem, 2.6vw, 1.9rem); text-transform: uppercase; letter-spacing: 0.04em; color: var(--lp-orange); } .lp-projects__count { font-family: var(--lp-font-head); font-size: 0.9rem; color: var(--lp-grey); } .lp-projects__filter-ico { display: inline-flex; align-items: center; color: var(--lp-orange); } /* Filters: text links, pushed to the right */ .lp-projects__filters { margin-left: auto; display: flex; } .lp-projects__bar .lp-filter { margin: 0; gap: 0.1rem; justify-content: flex-end; flex-wrap: wrap; } .lp-projects__bar .lp-filter__btn { background: none; border: 0; border-radius: 0; color: #555; padding: 0.4rem 0.75rem; letter-spacing: 0.08em; } .lp-projects__bar .lp-filter__btn:hover { color: var(--lp-orange); } .lp-projects__bar .lp-filter__btn.is-active { background: none; color: var(--lp-orange); } .lp-projects__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } @media (max-width: 1100px) { .lp-projects__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .lp-projects__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .lp-projects__grid { grid-template-columns: 1fr; } } .lp-projects__grid .lp-project-card { border-radius: 0; } /* Desktop: filters sit to the right; the mobile toggle is hidden */ .lp-projects__filters { display: flex; } .lp-projects__filter-toggle { display: none; } /* Mobile: "PROJECTS" banner + a filter button that expands the list */ @media (max-width: 760px) { .lp-projects__bar { flex-wrap: wrap; gap: 0.5rem 1rem; padding-block: 0.85rem; } .lp-projects__count, .lp-projects__filter-ico { display: none; } .lp-projects__filter-toggle { display: inline-flex; align-items: center; gap: 0.45rem; margin-left: auto; background: none; border: 1px solid rgba(0,0,0,0.25); color: #444; border-radius: 4px; padding: 0.45rem 0.9rem; font-family: var(--lp-font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; cursor: pointer; } .lp-projects__filter-toggle:hover { border-color: var(--lp-orange); color: var(--lp-orange); } .lp-projects__filters { flex-basis: 100%; margin-left: 0; display: none; } .lp-projects__bar.is-filters-open .lp-projects__filters { display: block; } .lp-projects__bar .lp-filter { flex-direction: column; gap: 0; } .lp-projects__bar .lp-filter__btn { width: 100%; text-align: left; padding: 0.7rem 0; border-bottom: 1px solid rgba(0,0,0,0.08); } } /* Contact page */ .lp-contact { padding-top: clamp(1.25rem, 3vw, 2.25rem); } /* General contact — two cards, aligned to the office columns below */ .lp-contact__general { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem); } @media (min-width: 760px) { .lp-contact__general { grid-template-columns: repeat(2, 1fr); } } .lp-contact__gcard { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; background: var(--lp-grey-bg); border-left: 4px solid var(--lp-orange); border-radius: 0 var(--lp-radius) var(--lp-radius) 0; } .lp-contact__gico { flex: 0 0 auto; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; background: var(--lp-orange); color: #fff; border-radius: 50%; } .lp-contact__gbody { display: flex; flex-direction: column; min-width: 0; } .lp-contact__glabel { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--lp-grey); font-weight: 700; } .lp-contact__gval { font-size: 1.1rem; font-weight: 600; color: var(--lp-heading); text-decoration: none; word-break: break-word; } a.lp-contact__gval:hover { color: var(--lp-orange); } /* Physical offices */ .lp-contact__offices { margin-bottom: clamp(2.5rem, 6vw, 4rem); } .lp-office { background: var(--lp-grey-bg); border-top: 3px solid var(--lp-orange); padding: 1.75rem; } .lp-office__name { font-size: 1.25rem; margin: 0 0 0.6rem; } .lp-office__addr { font-style: normal; color: var(--lp-text); margin: 0 0 0.85rem; display: inline-flex; align-items: flex-start; gap: 0.5rem; text-decoration: none; line-height: 1.4; } a.lp-office__addr { color: var(--lp-text); } a.lp-office__addr:hover { color: var(--lp-orange); } .lp-office__pin { color: var(--lp-orange); flex: 0 0 auto; display: inline-flex; margin-top: 0.15em; } .lp-office__label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--lp-grey); font-weight: 700; } .lp-office__phone { margin: 0; } .lp-office__phone a { font-weight: 600; font-size: 1.1rem; } .lp-office__map { margin-top: 1.25rem; } .lp-office__map iframe { display: block; border-radius: var(--lp-radius); } /* On-page social row (top of the contact info) */ .lp-contact__follow { display: flex; align-items: center; gap: 1rem; margin: 0 0 clamp(1.5rem, 3.5vw, 2.25rem); } .lp-contact__follow .lp-footer__social { margin: 0; } .lp-contact__follow .lp-footer__social a:hover { color: var(--lp-dark); transform: translateY(-2px); } /* Team CTA — full-width dark band (matches the project/team single CTA band) */ .lp-cta-band--team .lp-cta-band__text { align-items: center; } .lp-team-cta__copy { display: flex; flex-direction: column; gap: 0.3rem; } .lp-team-cta__lead { font-family: var(--lp-font-head); font-weight: 800; text-transform: uppercase; font-size: clamp(1.1rem, 2.5vw, 1.5rem); line-height: 1.18; color: #fff; } .lp-team-cta__sub { font-family: var(--lp-font-body); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.95rem; line-height: 1.45; color: #cfcfcf; } @media (max-width: 760px) { .lp-cta-band--team .lp-cta-band__text { display: flex; } .lp-cta-band--team .lp-cta-band__dash { display: none; } .lp-cta-band--team .lp-cta-band__inner { gap: 1.25rem; } } /* Careers — two columns: copy under "Careers" (left), apply CTA (right) */ .lp-careers { border-top: 1px solid rgba(0,0,0,0.1); padding-top: clamp(2.25rem, 5vw, 3.25rem); } .lp-careers__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } @media (max-width: 760px) { .lp-careers__grid { grid-template-columns: 1fr; gap: 1.75rem; } } /* Shared heading style for both "Careers" and "Send Us A Resume" */ .lp-careers__title, .lp-careers__heading { font-family: var(--lp-font-head); font-weight: 800; text-transform: uppercase; color: #323a45; line-height: 1.15; } .lp-careers__title { font-size: clamp(1.5rem, 3vw, 2rem); padding-left: 18px; border-left: 4px solid var(--lp-orange); margin: 0 0 1.25rem; } .lp-careers__main p { margin: 0 0 1rem; color: var(--lp-text); } .lp-careers__main p:last-child { margin-bottom: 0; } .lp-careers__heading { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0 0 1.1rem; } .lp-careers__heading::after { content: ""; display: block; width: 50px; height: 3px; background: var(--lp-orange); margin-top: 0.85rem; } .lp-careers__apply { background: var(--lp-grey-bg); border-top: 3px solid var(--lp-orange); padding: clamp(1.5rem, 3vw, 2rem); } /* Services / "What We Do" — light alternating rows + mini project galleries */ .lp-services-page { background: #fff; color: var(--lp-text); } .lp-services-page__head { padding-left: 22px; border-left: 5px solid var(--lp-orange); margin: 0 0 clamp(3rem, 6vw, 4.5rem); } .lp-services-page__title { font-size: clamp(2.2rem, 7vw, 4rem); color: var(--lp-heading); text-transform: uppercase; font-weight: 800; letter-spacing: 0.01em; margin: 0; line-height: 1.05; } .lp-services-page__title .lp-accent { color: var(--lp-orange); margin-left: 0.05em; } .lp-services-list { display: flex; flex-direction: column; gap: clamp(3rem, 7vw, 5.5rem); } @media (max-width: 859px) { .lp-services-list { gap: clamp(4.5rem, 13vw, 6rem); } } /* more breathing room between stacked rows on mobile */ /* Mobile (default): always image → title+text → gallery (no alternating) */ .lp-service-row { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 3.5vw, 2rem); grid-template-areas: "img" "text" "gallery"; } .lp-service-row__media { grid-area: img; position: relative; display: flex; flex-direction: column; } /* Standardized main image (~500x300) — fixed height + cover = uniform crops */ .lp-service-row__img { position: relative; } .lp-service-row__img::before { content: ""; position: absolute; left: -14px; top: -14px; width: 42%; height: 48%; background: var(--lp-orange); z-index: 0; border-radius: 4px; } .lp-service-row__img img { position: relative; z-index: 1; width: 100%; height: clamp(230px, 24vw, 300px); object-fit: cover; display: block; box-shadow: var(--lp-shadow-lg); border-radius: 3px; } .lp-service-row__text { grid-area: text; position: relative; min-width: 0; } .lp-service-row__title { font-family: var(--lp-font-head); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem); text-transform: uppercase; margin: 0 0 1.1rem; padding-bottom: 0.7rem; border-bottom: 3px solid var(--lp-orange); display: inline-block; } .lp-service-row__titlelink { color: var(--lp-heading); text-decoration: none; } /* subtly clickable, looks like plain text */ .lp-service-row__titlelink:hover, .lp-service-row__titlelink:focus { color: var(--lp-heading); } .lp-service-row__desc { color: var(--lp-text); } .lp-service-row__desc p { margin: 0 0 1rem; } .lp-service-row__desc p:last-child { margin-bottom: 0; } .lp-service-row__desc a { color: var(--lp-orange); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .lp-service-row__desc a:hover { text-decoration-thickness: 2px; } /* "Services Include" — slim dark bar tucked UNDER the image's rounded bottom (image overlaps the box top; box shows rounded bottom corners) */ .lp-service-includes { position: relative; z-index: 0; background: #2a2a2e; margin-top: -11px; padding: calc(0.55rem + 12px) 1rem 0.6rem; border-radius: 0 0 4px 4px; } .lp-service-includes__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 0.75rem; } .lp-service-includes__list li { font-family: var(--lp-font-head); font-weight: 700; font-size: clamp(0.65rem, 1.1vw, 0.74rem); text-transform: uppercase; letter-spacing: 0.02em; color: var(--lp-orange); } /* Mini project gallery → filtered projects grid */ .lp-service-projects { grid-area: gallery; } .lp-service-projects__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .lp-service-projects__thumb { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 3px; background: var(--lp-grey-bg); } .lp-service-projects__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--lp-ease); } .lp-service-projects__thumb::after { content: ""; position: absolute; inset: 0; background: rgba(20,19,19,0); transition: background 0.3s ease; } .lp-service-projects__thumb:hover img { transform: scale(1.08); } .lp-service-projects__thumb:hover::after { background: rgba(20,19,19,0.45); } .lp-service-projects__ico { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transform: scale(0.8); transition: opacity 0.25s var(--lp-ease), transform 0.25s var(--lp-ease); } .lp-service-projects__thumb:hover .lp-service-projects__ico { opacity: 1; transform: scale(1); } .lp-service-projects__all { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.4rem; font-family: var(--lp-font-head); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lp-orange); text-decoration: none; transition: gap 0.2s ease; } .lp-service-projects__all:hover { gap: 0.7rem; } /* Single service page (reuses the row layout) */ .lp-service-single__back { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--lp-font-head); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lp-orange); text-decoration: none; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); transition: gap 0.2s ease; } .lp-service-single__back:hover { gap: 0.6rem; } .lp-service-single .lp-service-row__title { font-size: clamp(1.9rem, 4.5vw, 2.9rem); } /* Desktop: alternate image left/right; gallery under image; CTA under text */ @media (min-width: 860px) { .lp-service-row { grid-template-columns: 0.85fr 1.15fr; column-gap: clamp(2.5rem, 5vw, 4rem); row-gap: 1.5rem; grid-template-areas: "img text" "gallery text"; align-items: start; } .lp-service-row--reverse { grid-template-columns: 1.15fr 0.85fr; grid-template-areas: "text img" "text gallery"; } .lp-service-row--reverse .lp-service-row__img::before { left: auto; right: -14px; } /* image on the right → text hugs toward it (right-aligned), but keep bullet lists left-aligned so the arrow bullets read correctly */ .lp-service-row--reverse .lp-service-row__text { text-align: right; } .lp-service-row--reverse .lp-service-row__desc ul, .lp-service-row--reverse .lp-service-row__desc ol { text-align: left; } } /* Single templates */ /* Blog single — clean wide heading with a single bottom underline bar */ .lp-post__head { max-width: 1100px; margin: 0 auto clamp(2rem, 4vw, 3rem); padding-bottom: clamp(1rem, 2.5vw, 1.5rem); border-bottom: 3px solid var(--lp-orange); } .lp-post__title { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; text-transform: uppercase; font-weight: 800; color: var(--lp-heading); margin: 0; } .lp-single--post .lp-prose { max-width: 1100px; margin-inline: auto; } /* In-content subheadings (e.g. "SE 2050 Signatory Firm…") — match the home "Affiliations" section heading: uppercase, left orange bar, no fill. */ .lp-single--post .lp-prose h2, .lp-single--post .lp-prose h3 { font-family: var(--lp-font-head); font-size: clamp(1.8rem, 4vw, 2.5rem); padding-left: 26px; border-left: 4px solid var(--lp-orange); text-transform: uppercase; font-weight: 800; color: #323a45; line-height: 1.15; margin-top: clamp(2.5rem, 5vw, 4rem); margin-bottom: 1.25rem; } /* Orange divider line above the interview subheading (section separator) */ .lp-single--post .lp-prose h2::before { content: ""; display: block; width: 90px; height: 3px; background: var(--lp-orange); margin: 0 0 clamp(1.5rem, 3vw, 2rem) -26px; } /* Q&A questions (bold paragraphs) in orange */ .lp-single--post .lp-prose p strong, .lp-single--post .lp-prose p b { color: var(--lp-orange); } /* Plain white page (images often have white backgrounds — no frame/shadow). */ .lp-single--post { background: #fff; } .lp-single--post .lp-prose img { border-radius: 0; box-shadow: none; } .lp-single--post .lp-prose a { color: var(--lp-orange); font-weight: 600; text-decoration: none; background-image: linear-gradient(var(--lp-orange), var(--lp-orange)); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.3s var(--lp-ease); padding-bottom: 1px; } .lp-single--post .lp-prose a:hover { background-size: 100% 2px; } .lp-single--post .lp-prose blockquote { margin: clamp(2rem, 4vw, 3rem) 0 clamp(2rem, 4vw, 3rem) clamp(1.25rem, 5vw, 3rem); padding: 1.25rem 1.75rem 1.25rem 1.85rem; border-left: 6px solid var(--lp-orange); background: rgba(233,126,32,0.055); border-radius: 0 var(--lp-radius) var(--lp-radius) 0; font-family: var(--lp-font-head); font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 600; line-height: 1.4; color: var(--lp-heading); } .lp-single--post .lp-prose blockquote p:last-child { margin-bottom: 0; } .lp-single--post .lp-prose blockquote cite { display: block; margin-top: 0.85rem; font-family: var(--lp-font-body); font-size: 0.9rem; font-weight: 600; font-style: normal; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lp-orange); } /* Soft separator between long sections */ .lp-single--post .lp-prose hr { border: 0; height: 2px; width: 90px; background: var(--lp-orange); margin: clamp(2.5rem, 5vw, 3.5rem) auto; } /* Keep doc-link rows/cover free of the prose link-underline + force their colors */ .lp-single--post .lp-prose a.lp-doclink, .lp-single--post .lp-prose a.lp-doccover { background-image: none; padding-bottom: 0; color: #323a45; } /* ========================================================================= DOCUMENT LINKS (ECAP) block — two columns: list (left) + cover panel (right) ========================================================================= */ .lp-doclinks { margin: clamp(0.75rem, 2.5vw, 1.5rem) 0 clamp(2.25rem, 5vw, 3.5rem); } .lp-doclinks__grid { display: block; } @media (min-width: 760px) { .lp-doclinks__grid { display: grid; grid-template-columns: 1fr minmax(260px, 0.82fr); column-gap: clamp(1.75rem, 4vw, 3.25rem); align-items: start; } .lp-doclinks__main { order: 1; min-width: 0; } .lp-doccover { order: 2; } } .lp-doclinks__main { min-width: 0; } .lp-doclinks__heading { font-family: var(--lp-font-head); font-weight: 800; text-transform: uppercase; color: #323a45; font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 0.85rem; } .lp-doclinks__intro { margin: 0 0 1rem; } /* Cover with an offset orange panel (bottom-LEFT) */ .lp-doccover { position: relative; display: block; width: 100%; max-width: 440px; margin: 0 0 1.85rem; isolation: isolate; text-decoration: none; } @media (min-width: 760px) { .lp-doccover { margin-bottom: 0; margin-left: auto; } } .lp-doccover__panel { position: absolute; left: -16px; bottom: -16px; width: 100%; height: 100%; background: var(--lp-orange); border-radius: 6px; z-index: 0; } .lp-doccover__img { position: relative; z-index: 1; display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 18px 40px rgba(17,16,15,0.2); transition: transform 0.35s var(--lp-ease); } a.lp-doccover:hover .lp-doccover__img { transform: translate(4px, -4px); } .lp-doccover__badge { position: absolute; top: 14px; right: 14px; z-index: 2; background: var(--lp-orange); color: #fff; font-family: var(--lp-font-head); font-weight: 800; font-size: 14px; letter-spacing: 0.04em; padding: 5px 12px; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); } .lp-doccover__view { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: linear-gradient(transparent, rgba(17,16,15,0.82)); color: #fff; font-family: var(--lp-font-head); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; padding: 2.4rem 0.9rem 0.8rem; opacity: 0; transition: opacity 0.3s var(--lp-ease); border-radius: 0 0 3px 3px; } a.lp-doccover:hover .lp-doccover__view { opacity: 1; } /* Stacked list links (Option A) */ .lp-doclinks__list { border-top: 1px solid rgba(0,0,0,0.12); } .lp-doclink { display: flex; align-items: center; gap: 14px; padding: 15px 12px; border-bottom: 1px solid rgba(0,0,0,0.12); text-decoration: none; color: #323a45; transition: background 0.25s var(--lp-ease), padding 0.25s var(--lp-ease); } .lp-doclink:hover { background: #faf5ef; padding-left: 20px; } .lp-doclink__ico { flex: 0 0 auto; color: var(--lp-orange); display: inline-flex; } .lp-doclink__ico svg { display: block; } .lp-doclink__label { flex: 1 1 auto; font-family: var(--lp-font-head); font-weight: 800; font-size: clamp(15px, 2vw, 18px); color: #323a45; } .lp-doclink__arrow { flex: 0 0 auto; color: var(--lp-grey); display: inline-flex; transition: color 0.25s var(--lp-ease), transform 0.25s var(--lp-ease); } .lp-doclink:hover .lp-doclink__arrow { color: var(--lp-orange); transform: translateY(2px); } .lp-doclinks--editor .lp-doclink { cursor: default; } .lp-doclinks--editor .lp-doclinks__heading:empty::before { content: attr(data-rich-text-placeholder); opacity: 0.5; } /* Mobile: collapse ANY image-beside-text layout (float, Gutenberg columns, legacy WPBakery flex/table, inline-styled divs) so the image sits at a legible width with the text below it. */ @media (max-width: 760px) { .lp-single--post .lp-prose img, .lp-single--post .lp-prose figure, .lp-single--post .lp-prose .alignleft, .lp-single--post .lp-prose .alignright, .lp-single--post .lp-prose .wp-block-image { float: none !important; display: block; width: auto !important; max-width: 100% !important; height: auto; margin: 1.25rem auto !important; } /* Gutenberg columns → stack */ .lp-single--post .lp-prose .wp-block-columns { display: block !important; } .lp-single--post .lp-prose .wp-block-column { width: 100% !important; flex-basis: 100% !important; margin-left: 0 !important; } /* Legacy two-col tables → stack */ .lp-single--post .lp-prose table, .lp-single--post .lp-prose tbody, .lp-single--post .lp-prose tr { display: block !important; width: 100% !important; } .lp-single--post .lp-prose td, .lp-single--post .lp-prose th { display: block !important; width: 100% !important; float: none !important; } /* Inline-styled float / flex wrappers from the old builder → stack */ .lp-single--post .lp-prose [style*="float"] { float: none !important; width: auto !important; max-width: 100% !important; } .lp-single--post .lp-prose [style*="display: flex"], .lp-single--post .lp-prose [style*="display:flex"] { display: block !important; } } .lp-single__feature { margin: 0 0 2.5rem; } .lp-single__feature-img { width: 100%; height: auto; border-radius: var(--lp-radius); display: block; } .lp-single__layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 860px) { .lp-single__layout { grid-template-columns: 2fr 1fr; } } .lp-single__meta { align-self: start; } .lp-single__meta-row { padding: 0.75rem 0; border-bottom: 1px solid rgba(0,0,0,0.08); margin-bottom: 1.25rem; } .lp-single__meta-label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--lp-grey); } .lp-single__meta-value { font-weight: 600; } .lp-single__nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(0,0,0,0.08); flex-wrap: wrap; } .lp-single__nav-link { font-family: var(--lp-font-head); font-weight: 600; font-size: 0.85rem; } .lp-single__foot { margin-top: 2.5rem; } /* Team bio */ /* Mobile order: name/role → photo + info → bio */ .lp-team-bio { display: grid; grid-template-columns: 1fr; gap: 1.5rem; grid-template-areas: "head" "aside" "body"; } .lp-team-bio__head { grid-area: head; } .lp-team-bio__aside { grid-area: aside; } .lp-team-bio__body { grid-area: body; } .lp-team-bio__head .lp-team-bio__name { margin-bottom: 0.25rem; } /* Mobile: don't double-pad below the title (grid gap already spaces it to the image) */ @media (max-width: 760px) { .lp-team-bio__head .lp-team-bio__role { margin-bottom: 0; } .lp-team-bio { gap: clamp(1.25rem, 4vw, 1.75rem); } } /* Desktop: photo (left) spans both rows; name/role top-right, bio below */ @media (min-width: 760px) { .lp-team-bio { grid-template-columns: 0.8fr 1.2fr; grid-template-rows: auto 1fr; column-gap: clamp(2rem, 5vw, 3.5rem); row-gap: 0.75rem; align-items: start; align-content: start; grid-template-areas: "aside head" "aside body"; } } .lp-team-bio__photo { width: 100%; height: auto; border-radius: var(--lp-radius); display: block; } .lp-team-bio__name { font-size: clamp(1.6rem, 4vw, 2.25rem); margin: 0 0 0.25rem; } .lp-team-bio__role { color: var(--lp-orange); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; font-size: 1.1rem; margin: 0 0 1.1rem; } .lp-team-bio__links { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; gap: 1.5rem; flex-wrap: wrap; } .lp-team-bio__links a { font-weight: 600; } .lp-back-link { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); padding: 0.7rem 1.4rem; background: var(--lp-orange); color: #fff; font-family: var(--lp-font-head); font-size: 0.92rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; border-radius: var(--lp-radius); transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .lp-back-link:hover, .lp-back-link:focus { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(233,126,32,0.32); } /* Trim the gap between the nav and the back button on single pages */ .lp-single--team { padding-top: clamp(1.5rem, 3vw, 2.25rem); } .lp-team-bio__aside { display: flex; flex-direction: column; gap: 1.5rem; } /* Team Featured Info card */ .lp-team-info { background: var(--lp-grey-bg, #f6f6f7); border: 1px solid #ececed; border-top: 3px solid var(--lp-orange); border-radius: var(--lp-radius); padding: 1.5rem 1.6rem; } .lp-team-info__grid { margin: 0; display: grid; grid-template-columns: 1fr; gap: 1.05rem; } .lp-team-info__cell { margin: 0; min-width: 0; } .lp-team-info__label { font-family: var(--lp-font-head); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--lp-grey); margin: 0 0 0.3rem; } .lp-team-info__value { margin: 0; font-size: 0.95rem; color: var(--lp-dark); word-break: break-word; line-height: 1.45; } .lp-team-info__value a { color: var(--lp-orange); font-weight: 600; } .lp-team-info__follow { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid #e4e4e5; } .lp-team-info__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 4px; background: var(--lp-orange); color: #fff; transition: transform 0.2s ease, box-shadow 0.2s ease; } .lp-team-info__icon:hover, .lp-team-info__icon:focus { background: var(--lp-orange); color: #fff; transform: translateY(-3px); box-shadow: 0 6px 14px rgba(233,126,32,0.35); } /* Firm Bio timeline */ .lp-firmbio { padding-block: clamp(1.75rem, 4vw, 3rem) clamp(0.75rem, 2vw, 1.25rem); } .lp-firmbio__head { margin-bottom: clamp(1.25rem, 3vw, 2rem); padding-left: 22px; border-left: 5px solid var(--lp-orange); } .lp-htimeline__logo { display: inline-flex; align-items: center; margin-bottom: 0.75rem; } .lp-htimeline__logo img { max-height: 42px; width: auto; display: block; } /* Who We Are intro — plain paragraph blocks (constrained group) */ .lp-firmbio-intro { padding-block: clamp(2rem, 5vw, 3.25rem); } .lp-firmbio-intro .lp-eyebrow { padding-left: 18px; margin-bottom: 0.5rem; } .lp-firmbio-intro .lp-section-title { margin: 0 0 0.85rem; padding-left: 18px; border-left: 4px solid var(--lp-orange); } .lp-firmbio-intro p { color: var(--lp-text); margin: 0 0 0.9rem; } .lp-firmbio-intro p:last-child { margin-bottom: 0; } /* Intro — text + image (innovative-solutions style) */ .lp-firmbio__intro { margin-bottom: clamp(2.75rem, 6vw, 4.5rem); } .lp-firmbio__intro p { margin: 0 0 1rem; color: var(--lp-text); } .lp-firmbio__intro p:last-child { margin-bottom: 0; } @media (min-width: 860px) { .lp-firmbio__intro.has-image { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } } .lp-firmbio__intromedia { position: relative; } .lp-firmbio__intromedia::before { content: ""; position: absolute; right: -16px; top: -16px; width: 55%; height: 60%; background: var(--lp-orange); z-index: 0; border-radius: 4px; } .lp-firmbio__intromedia img { position: relative; z-index: 1; width: 100%; height: auto; display: block; box-shadow: var(--lp-shadow-lg); border-radius: 3px; } /* Compact horizontal timeline (vertical on mobile) */ .lp-htimeline { margin: 0 0 clamp(2.75rem, 6vw, 4.5rem); } .lp-htimeline__track { display: grid; grid-template-columns: 1fr; gap: 1.75rem; position: relative; } .lp-htimeline__track::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; background: rgba(233,126,32,0.3); } .lp-htimeline__step { position: relative; padding-left: 2rem; } .lp-htimeline__step::before { content: ""; position: absolute; left: 1px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--lp-orange); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(233,126,32,0.35); } .lp-htimeline__date { position: relative; z-index: 1; display: inline-block; background: var(--lp-orange); color: #fff; font-family: var(--lp-font-head); font-weight: 800; font-size: 1.02rem; letter-spacing: 0.02em; padding: 0.35rem 1.05rem; border-radius: 20px; white-space: nowrap; } .lp-htimeline__body { padding-top: 0.85rem; } .lp-htimeline__label { display: block; font-family: var(--lp-font-head); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--lp-grey); margin-bottom: 0.3rem; } .lp-htimeline__title { font-family: var(--lp-font-head); font-weight: 800; font-size: 1.15rem; color: var(--lp-heading); margin: 0 0 0.6rem; } .lp-htimeline__body p { margin: 0; color: var(--lp-text); font-size: 0.95rem; line-height: 1.6; } @media (min-width: 760px) { .lp-htimeline__track { grid-template-columns: repeat(3, 1fr); column-gap: clamp(1.5rem, 4vw, 3rem); } .lp-htimeline__track::before { left: 9%; right: 9%; top: 16px; bottom: auto; width: auto; height: 2px; } .lp-htimeline__step { padding-left: 0; } .lp-htimeline__step::before { display: none; } .lp-htimeline__pin { display: flex; justify-content: center; align-items: center; height: 34px; } .lp-htimeline__body { text-align: center; padding-top: 1.25rem; } } /* Our Founders */ .lp-founders__grid { margin-top: 0.5rem; } .lp-founder { background: var(--lp-grey-bg); border-top: 3px solid var(--lp-orange); padding: clamp(1.5rem, 3vw, 2rem); } .lp-founder__name { font-family: var(--lp-font-head); font-weight: 800; font-size: 1.1rem; text-transform: uppercase; color: var(--lp-heading); margin: 0 0 0.6rem; } .lp-founder__text { margin: 0; color: var(--lp-text); font-size: 0.95rem; line-height: 1.6; } /* Team section + values */ .lp-team-section { padding-block: clamp(0.75rem, 2vw, 1.25rem) clamp(1.5rem, 3vw, 2.5rem); } .lp-team-section__head, .lp-values__head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } /* Team grid — denser: 2 (mobile) → 3 → 4 → 5 per row */ .lp-team-grid { gap: 1.5rem 1.25rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 560px) { .lp-team-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .lp-team-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1200px) { .lp-team-grid { grid-template-columns: repeat(6, 1fr); gap: 1.75rem 1.1rem; } } @media (max-width: 559px) { .lp-team-card__name { font-size: 0.92rem; } .lp-team-card__role { font-size: 0.68rem; } } /* Core Values — compact dark band, one row, sustainability CTA on its card */ .lp-values { padding-block: clamp(2rem, 4vw, 3rem); } .lp-values .lp-section-title { color: #fff; } .lp-values__grid { gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); } .lp-value { display: flex; flex-direction: column; background: rgba(255,255,255,0.05); border-top: 3px solid var(--lp-orange); padding: 1.1rem 1.25rem; } .lp-value__title { font-size: 1rem; margin: 0 0 0.4rem; color: #fff; } .lp-value p { color: #cfcfcf; font-size: 0.9rem; line-height: 1.5; margin: 0 0 1rem; } .lp-value p:last-child { margin-bottom: 0; } .lp-value__btn { margin: auto -1.25rem -1.1rem; display: block; background: var(--lp-orange); color: #fff; text-align: center; font-family: var(--lp-font-head); font-weight: 700; text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.05em; text-decoration: none; padding: 0.75rem 1rem; transition: filter 0.2s ease; } .lp-value__btn:hover { background: var(--lp-orange); color: #fff; filter: brightness(1.08); } /* Sustainability link (under Core Values) — small, right-aligned */ .lp-values__ecap { margin-top: clamp(1rem, 2.5vw, 1.5rem); text-align: right; } .lp-values__ecap-label { color: #cfcfcf; margin: 0 0 1rem; } .lp-values--editor .lp-values__ecap-label { color: var(--lp-grey); } .lp-values__ecap-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; } .lp-ecap-pill { display: inline-flex; align-items: center; gap: 6px; padding: 0.4rem 1rem; border: 2px solid var(--lp-orange); border-radius: 30px; color: var(--lp-orange); font-family: var(--lp-font-head); font-weight: 700; font-size: 0.82rem; text-decoration: none; transition: background 0.25s var(--lp-ease), color 0.25s var(--lp-ease), transform 0.2s var(--lp-ease); } .lp-ecap-pill:hover { background: var(--lp-orange); color: #fff; transform: translateY(-2px); } .lp-ecap-pill__ico { font-size: 0.65em; } /* Office team group photos (Reno / Truckee) under the team grid */ .lp-team-photos { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 3vw, 2rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); } @media (min-width: 760px) { .lp-team-photos { grid-template-columns: 1fr 1fr; } } .lp-team-photo { position: relative; margin: 0; border-radius: var(--lp-radius); overflow: hidden; box-shadow: var(--lp-shadow); } .lp-team-photo img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .lp-team-photo__label { position: absolute; left: 0; bottom: 0; background: var(--lp-orange); color: #fff; font-family: var(--lp-font-head); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; padding: 0.5rem 1.1rem; } /* Affiliations marquee (logos scroll across, pause on hover) */ .lp-affiliations__marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .lp-affiliations__track { display: flex; align-items: center; width: max-content; animation: lp-affmarquee 55s linear infinite; } .lp-affiliations__track .lp-affiliations__item { flex: 0 0 auto; margin-right: clamp(2.5rem, 5vw, 4.5rem); } .lp-affiliations__marquee:hover .lp-affiliations__track { animation-play-state: paused; } @media (max-width: 760px) { .lp-affiliations__track { animation-duration: 26s; } } @keyframes lp-affmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .lp-affiliations__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } .lp-affiliations__track .lp-affiliations__item { margin: 0; } } /* --- Single Portfolio (dark gallery carousel + content + CTA) ------------ */ .lp-portfolio-gallery { position: relative; overflow: hidden; background: #fff; padding: clamp(1.25rem, 2.5vw, 2rem) 0 clamp(1rem, 2.5vw, 1.75rem); } /* Dark, visible arrows on the white background */ .lp-portfolio-fpc .lp-fpc__arrow { background: rgba(20,19,19,0.55); color: #fff; top: 50%; } .lp-portfolio-fpc .lp-fpc__arrow:hover { background: var(--lp-orange); } .lp-portfolio-fpc .lp-fpc__arrow--prev { left: clamp(0.5rem, 2vw, 1.5rem); } .lp-portfolio-fpc .lp-fpc__arrow--next { right: clamp(0.5rem, 2vw, 1.5rem); } .lp-portfolio-gallery__back { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1.5rem var(--lp-gutter); padding: 0.7rem 1.4rem; background: var(--lp-orange); color: #fff; font-family: var(--lp-font-head); font-weight: 700; font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.12em; border-radius: var(--lp-radius); transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .lp-portfolio-gallery__back:hover, .lp-portfolio-gallery__back:focus { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(233,126,32,0.32); } /* Single-image projects: noticeably smaller, centred, with an orange offset shadow for dimension (keeps the description layout standardized with galleries). */ .lp-portfolio-gallery__single { max-width: 760px; margin-inline: auto; padding-inline: var(--lp-gutter); } .lp-portfolio-gallery__single .lp-portfolio-gallery__img, .lp-portfolio-gallery__single img { width: 100%; height: auto; display: block; max-height: 54vh; object-fit: cover; border-radius: var(--lp-radius); box-shadow: 18px 18px 0 0 var(--lp-orange); } /* Carousel sits in the content column (no awkward edge gap) */ .lp-portfolio-fpc { max-width: var(--lp-container-wide); margin-inline: auto; padding-inline: var(--lp-gutter); } /* Centered slideshow: active image larger + on top, neighbours smaller behind (overlap handled by the shared .lp-fpc__slide rules). */ .lp-portfolio-fpc .lp-fpc__slide--img img { width: 100%; height: clamp(340px, 58vh, 640px); object-fit: cover; display: block; border-radius: var(--lp-radius); } .lp-portfolio-fpc .lp-fpc__slide--img.is-current img { box-shadow: 0 24px 60px rgba(0,0,0,0.3); } @media (max-width: 700px) { .lp-portfolio-fpc .lp-fpc__slide--img img { height: clamp(240px, 46vh, 380px); } } /* Gallery footer: counter + dots */ .lp-fpc__foot { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 1.5rem; padding-inline: var(--lp-gutter); } .lp-fpc__foot .lp-fpc__dots { margin-top: 0; } .lp-fpc__counter { font-family: var(--lp-font-head); font-size: 0.85rem; letter-spacing: 0.15em; color: rgba(255,255,255,0.55); display: inline-flex; align-items: center; gap: 0.6rem; } .lp-fpc__counter::after { content: ""; width: 34px; height: 1px; background: var(--lp-orange); } .lp-fpc__counter span { color: var(--lp-orange); font-size: 1.05rem; } .lp-portfolio-content { padding-block: clamp(1.25rem, 3vw, 2.5rem) clamp(2.5rem, 6vw, 4.5rem); } .lp-portfolio-content .lp-eyebrow { color: var(--lp-orange); } .lp-portfolio-content__title { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 0 0 1.5rem; display: flex; align-items: center; gap: 1.1rem; } .lp-portfolio-content__title::before { content: ""; width: 40px; height: 3px; background: var(--lp-orange); flex: 0 0 auto; } .lp-portfolio-content__body { max-width: none; } .lp-portfolio-content__details { margin-top: clamp(2rem, 5vw, 3rem); } /* Editable details list (Client / Year / Sq Ft / etc.) — values align in a column */ .lp-details { margin: 0; max-width: 640px; } .lp-details__row { display: grid; grid-template-columns: 190px 1fr; gap: 1rem; padding: 0.55rem 0; } .lp-details__label { margin: 0; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lp-grey); font-weight: 600; align-self: center; } .lp-details__label::after { content: ":"; } .lp-details__value { margin: 0; font-weight: 600; color: var(--lp-heading); text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.85rem; } @media (max-width: 480px) { .lp-details__row { grid-template-columns: 1fr; gap: 0.1rem; } } /* Prev / All / Next bar */ .lp-portfolio-nav { display: grid; grid-template-columns: 1fr auto 1fr; background: var(--lp-dark); } .lp-portfolio-nav > div { display: flex; align-items: center; min-height: 70px; } .lp-portfolio-nav__prev { justify-content: flex-start; padding-left: var(--lp-gutter); } .lp-portfolio-nav__next { justify-content: flex-end; padding-right: var(--lp-gutter); } .lp-portfolio-nav__all { justify-content: center; } .lp-portfolio-nav a { font-family: var(--lp-font-head); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.7); display: inline-flex; gap: 0.5rem; align-items: center; } .lp-portfolio-nav__all a { color: #fff; padding: 0 clamp(1.5rem, 4vw, 3rem); } .lp-portfolio-nav a:hover { color: var(--lp-orange); } .lp-portfolio-nav a span { display: none; } @media (min-width: 760px) { .lp-portfolio-nav a span { display: inline; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* Reusable dark CTA band — distinct from the footer (#2A2A2E) */ .lp-cta-band { background: var(--lp-dark); border-top: 3px solid var(--lp-orange); padding-block: clamp(2.5rem, 5vw, 3.5rem); } .lp-cta-band__inner { display: flex; flex-direction: column; gap: 1.25rem; align-items: center; text-align: center; max-width: var(--lp-container-wide); margin-inline: auto; padding-inline: var(--lp-gutter); } .lp-cta-band__text { justify-content: center; } @media (min-width: 760px) { .lp-cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; } .lp-cta-band__text { justify-content: flex-start; } } .lp-cta-band__text { margin: 0; color: #fff; font-family: var(--lp-font-head); font-weight: 600; font-size: clamp(1.1rem, 2.5vw, 1.5rem); text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; gap: 1rem; } .lp-cta-band__dash { width: 40px; height: 2px; background: var(--lp-orange); display: inline-block; } /* Mobile: drop the "Ready to start your project?" line, keep just the button */ @media (max-width: 760px) { .lp-cta-band__text { display: none; } .lp-cta-band__inner { justify-content: center; } } /* --- 404 --- */ .lp-404 { text-align: center; padding-block: clamp(4rem, 10vw, 7rem); } .lp-404 .lp-eyebrow { display: inline-block; } .lp-404 .lp-eyebrow::after { left: 50%; transform: translateX(-50%); } .lp-404__title { font-size: clamp(2rem, 6vw, 3.5rem); margin: 0 0 1rem; text-transform: uppercase; } .lp-404__text { color: var(--lp-grey); max-width: 50ch; margin: 0 auto 2rem; } .lp-404__links { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }