/* ============================================================ LiteSource — Site styles (built on assets/colors_and_type.css) Shared across all pages of the rebuilt litesourcenc.com ============================================================ */ :root{ --btn-radius: 6px; --card-radius: 12px; --maxw: 1180px; --pad-x: 32px; --ls-gold-100: #FCEFC0; /* gold tint between -50 and -200 (badge fills) */ } *{ box-sizing:border-box; }html,body{ margin:0; padding:0; } body{ font-family:var(--font-sans); color:var(--fg1); background:#fff; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ max-width:100%; display:block; } a{ color:inherit; } .ls-ico{ display:inline-flex; } .ls-ico svg{ display:block; } .container{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x); } .eyebrow,.kicker{ font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.15em; color:var(--ls-gold-600); } .kicker-teal{ color:var(--ls-teal); } .kicker-on-dark{ color:var(--ls-gold); } section{ scroll-margin-top:96px; } /* density */ body[data-density="compact"]{ --sec-pad:60px; } body{ --sec-pad:84px; } body[data-density="comfy"]{ --sec-pad:108px; } /* ---------- Buttons ---------- */ .btn{ font-family:inherit; font-weight:800; font-size:15px; cursor:pointer; border:2px solid transparent; border-radius:var(--btn-radius); padding:13px 24px; display:inline-flex; align-items:center; gap:8px; transition:all .16s ease; letter-spacing:.01em; line-height:1; text-decoration:none; white-space:nowrap; } .btn-sm{ padding:9px 16px; font-size:13px; } .btn-lg{ padding:16px 30px; font-size:16px; } .btn-block{ width:100%; justify-content:center; } .btn-primary{ background:var(--ls-gold); color:#27251F; } .btn-primary:hover{ background:var(--ls-gold-600); transform:translateY(-1px); box-shadow:var(--shadow-gold); } .btn-primary:active{ transform:translateY(0); box-shadow:none; } .btn-secondary{ background:var(--ls-teal); color:#fff; } .btn-secondary:hover{ background:var(--ls-teal-700); transform:translateY(-1px); } .btn-ghost{ background:#fff; color:var(--fg1); border-color:var(--border-strong); } .btn-ghost:hover{ border-color:var(--ls-gray-600); } .btn-ghost-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3); } .btn-ghost-light:hover{ background:rgba(255,255,255,.08); } .btn-dark{ background:#27251F; color:#fff; } .btn-dark:hover{ background:#000; } /* accent intensity: data-accent on */ html[data-accent="subtle"]{ --ls-gold:#EDB400; } html[data-accent="bold"] .btn-primary{ box-shadow:var(--shadow-gold); } html[data-accent="bold"]{ --gold-wash:var(--ls-gold-50); } html{ --gold-wash:#fff; } /* ---------- Top utility bar ---------- */ .topbar{ background:var(--ls-gray-900); color:#cfd0d2; font-size:12.5px; } .topbar-inner{ max-width:var(--maxw); margin:0 auto; padding:8px var(--pad-x); display:flex; justify-content:space-between; align-items:center; } .topbar-left{ display:flex; gap:22px; } .topbar-left span,.topbar-right a{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:inherit; } .topbar-right{ display:flex; gap:20px; align-items:center; } .topbar-right a:hover{ color:#fff; } .topbar-right .portal{ color:var(--ls-gold); font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:11px; } /* ---------- Header ---------- */ .site-header{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); transition:box-shadow .2s; } .site-header.is-scrolled{ box-shadow:0 2px 12px rgba(39,37,31,.07); } .header-inner{ max-width:var(--maxw); margin:0 auto; padding:14px var(--pad-x); display:flex; align-items:center; justify-content:space-between; gap:24px; } .brand img{ height:34px; width:auto; } .nav-desktop{ display:flex; gap:18px; margin-left:auto; margin-right:8px; } .nav-desktop a{ font-size:15px; font-weight:600; color:var(--ls-gray-700); text-decoration:none; padding:6px 0; position:relative; } .nav-desktop a:hover{ color:var(--fg1); } .nav-desktop a.active{ color:var(--fg1); } .nav-desktop a.active::after{ content:''; position:absolute; left:0; right:0; bottom:-2px; height:3px; background:var(--ls-gold); border-radius:2px; } .header-cta{ display:flex; align-items:center; gap:12px; } .hamburger{ display:none; background:none; border:0; cursor:pointer; color:var(--fg1); padding:4px; } .nav-mobile{ display:none; flex-direction:column; gap:4px; padding:12px var(--pad-x) 20px; border-top:1px solid var(--border); background:#fff; } .nav-mobile a{ padding:12px 0; font-weight:700; color:var(--ls-gray-800); text-decoration:none; border-bottom:1px solid var(--border); } .nav-mobile .btn{ margin-top:12px; justify-content:center; } .skip-link{ position:absolute; left:-9999px; top:0; z-index:500; background:var(--ls-teal); color:#fff; font-weight:700; font-size:14px; padding:10px 16px; border-radius:0 0 8px 0; text-decoration:none; } .skip-link:focus{ left:0; } #main-content:focus{ outline:none; } .nav-item.has-dd{ position:relative; } .nav-item.has-dd::after{ content:''; position:absolute; top:100%; left:0; right:0; height:10px; } .nav-dd-toggle{ font-family:inherit; font-size:15px; font-weight:600; color:var(--ls-gray-700); background:none; border:0; cursor:pointer; padding:6px 0; display:inline-flex; align-items:center; gap:4px; position:relative; } .nav-dd-toggle:hover, .nav-dd-toggle.active{ color:var(--fg1); } .nav-dd-toggle.active::after{ content:''; position:absolute; left:0; right:0; bottom:-2px; height:3px; background:var(--ls-gold); border-radius:2px; } .nav-dd-menu{ position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); min-width:172px; background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-lg); padding:8px; display:none; flex-direction:column; gap:2px; z-index:120; } .nav-item.has-dd:hover .nav-dd-menu, .nav-item.has-dd:focus-within .nav-dd-menu{ display:flex; } .nav-dd-menu a{ font-size:14.5px; font-weight:600; color:var(--ls-gray-700); text-decoration:none; padding:9px 12px; border-radius:7px; } .nav-dd-menu a:hover{ background:var(--ls-gray-50); color:var(--fg1); } .nav-dd-menu a.active{ color:var(--ls-teal-700); } .nav-mobile-group{ padding:14px 0 4px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--fg3); } .nav-mobile a.nav-mobile-sub{ padding-left:14px; } /* ---------- Page header (interior pages) ---------- */ .page-head{ position:relative; overflow:hidden; background:var(--ls-gray-50); border-bottom:1px solid var(--border); } .page-head .grid-bg{ position:absolute; inset:0; background-image: linear-gradient(rgba(99,102,106,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(99,102,106,.06) 1px,transparent 1px); background-size:40px 40px; } .page-head-inner{ position:relative; max-width:var(--maxw); margin:0 auto; padding:56px var(--pad-x) 52px; } .page-head h1{ font-size:48px; font-weight:900; letter-spacing:-.02em; line-height:1; margin:14px 0 0; } .page-head .lead{ font-size:19px; font-weight:300; color:var(--fg2); line-height:1.5; margin:18px 0 0; max-width:620px; } .crumbs{ display:flex; gap:8px; align-items:center; font-size:13px; font-weight:600; color:var(--fg3); } .crumbs a{ text-decoration:none; color:var(--fg2); } .crumbs a:hover{ color:var(--ls-gold-600); } /* ---------- Home hero (Direction A) ---------- */ .hero{ background:#fff; } .hero[data-hero="dark"]{ background:#1c1a16; } .hero-body{ position:relative; overflow:hidden; background:var(--ls-gray-50); } .hero[data-hero="dark"] .hero-body{ background:#1c1a16; } .hero-grid{ position:absolute; inset:0; background-image: linear-gradient(rgba(99,102,106,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(99,102,106,.06) 1px,transparent 1px); background-size:40px 40px; } .hero[data-hero="dark"] .hero-grid{ background-image: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:46px 46px; } .hero-beam{ position:absolute; top:-30%; left:46%; width:240px; height:160%; background:linear-gradient(180deg,rgba(246,190,0,.18),transparent 70%); transform:rotate(18deg); filter:blur(14px); pointer-events:none; } .hero-inner{ position:relative; max-width:var(--maxw); margin:0 auto; padding:72px var(--pad-x) 76px; display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; } .hero-title{ font-size:64px; font-weight:900; line-height:.98; letter-spacing:-.025em; margin:14px 0 0; color:var(--fg1); } .hero[data-hero="dark"] .hero-title{ color:#fff; } .hero-title .u{ color:var(--ls-gold-600); } .hero[data-hero="dark"] .hero-title .u{ color:var(--ls-gold); } .hero-lead{ font-size:19px; font-weight:300; line-height:1.5; color:var(--fg2); margin:22px 0 0; max-width:440px; } .hero[data-hero="dark"] .hero-lead{ color:rgba(255,255,255,.72); } .hero-actions{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; } .hero[data-hero="dark"] .hero-actions .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.28); } .hero-media{ position:relative; } .hero-badge{ position:absolute; left:-20px; bottom:-20px; background:var(--ls-gold); color:#27251F; border-radius:var(--card-radius); padding:16px 20px; box-shadow:var(--shadow-lg); } .hero-badge b{ font-size:38px; font-weight:900; line-height:1; display:block; } .hero-badge small{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; max-width:120px; display:block; margin-top:3px; } /* photo placeholder slots */ .photo-slot{ border-radius:var(--card-radius); overflow:hidden; position:relative; background:linear-gradient(150deg,var(--ls-gray-700),var(--ls-gray-900)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:rgba(255,255,255,.5); box-shadow:var(--shadow-lg); } .photo-slot::after{ content:''; position:absolute; inset:0; background-image: linear-gradient(rgba(246,190,0,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(246,190,0,.10) 1px,transparent 1px); background-size:32px 32px; } .photo-slot span{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; position:relative; z-index:1; text-align:center; padding:0 16px; } .photo-slot.ratio-hero{ aspect-ratio:4/3.5; } .photo-slot.ratio-wide{ aspect-ratio:16/9; } .photo-slot.ratio-card{ aspect-ratio:3/2; } .photo-slot.ratio-tall{ aspect-ratio:4/5; } /* ---------- Stat strip ---------- */ .stat-strip{ display:flex; border-top:1px solid var(--border); background:#fff; } .stat-strip .s{ flex:1; padding:20px var(--pad-x); border-left:1px solid var(--border); } .stat-strip .s:first-child{ border-left:0; } .stat-strip b{ font-size:24px; font-weight:900; } .stat-strip span{ display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--fg2); margin-top:3px; } .stat-strip .container{ display:flex; padding:0; } /* ---------- Generic section ---------- */ .section{ padding:var(--sec-pad) 0; } .section-muted{ background:var(--ls-gray-50); } .section-head{ max-width:680px; margin-bottom:44px; } .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; } .section-title{ font-size:38px; font-weight:800; letter-spacing:-.01em; margin:12px 0 0; line-height:1.1; } .section-sub{ font-size:18px; color:var(--fg2); font-weight:300; margin:14px 0 0; line-height:1.5; } /* ---------- Service cards ---------- */ .services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .service-card{ background:#fff; border:1px solid var(--border); border-radius:var(--card-radius); padding:26px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s; text-decoration:none; color:inherit; display:block; } .service-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--ls-gold-200); } .service-ico{ width:46px; height:46px; border-radius:10px; background:var(--ls-gold-50); color:var(--ls-gold-600); display:flex; align-items:center; justify-content:center; margin-bottom:16px; } .service-card h3{ font-size:18px; font-weight:800; margin:0 0 8px; } .service-card p{ font-size:14.5px; color:var(--fg2); line-height:1.55; margin:0; } .service-card .more{ margin-top:14px; font-size:13px; font-weight:800; color:var(--ls-teal); display:inline-flex; align-items:center; gap:6px; } /* ---------- Values ---------- */ .values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .value-card{ background:#fff; border:1px solid var(--border); border-radius:var(--card-radius); padding:24px; border-top:4px solid var(--ls-gold); } .value-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; } .value-ico{ width:44px; height:44px; border-radius:10px; background:var(--ls-teal-100); color:var(--ls-teal-700); display:flex; align-items:center; justify-content:center; } .value-num{ font-size:22px; font-weight:900; color:var(--ls-gray-200); } .value-card h3{ font-size:19px; font-weight:800; margin:0 0 8px; } .value-card p{ font-size:14px; color:var(--fg2); line-height:1.55; margin:0; } /* ---------- Dark feature band (B treatment) ---------- */ .band-dark{ position:relative; overflow:hidden; background:#1c1a16; color:#fff; } .band-dark .grid-bg{ position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:46px 46px; } .band-dark .beam{ position:absolute; top:-25%; right:14%; width:300px; height:150%; background:linear-gradient(180deg,rgba(246,190,0,.26),rgba(246,190,0,.02) 72%); transform:rotate(16deg); filter:blur(20px); } .band-dark .container{ position:relative; } /* process steps */ .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:42px; } .step{ position:relative; } .step .n{ font-size:13px; font-weight:900; letter-spacing:.1em; color:var(--ls-gold); margin-bottom:14px; } .step h4{ font-size:18px; font-weight:800; margin:0 0 8px; } .step p{ font-size:14px; color:rgba(255,255,255,.66); line-height:1.55; margin:0; } .step::before{ content:''; position:absolute; top:6px; left:0; width:30px; height:3px; background:var(--ls-gold); border-radius:2px; } .step .n{ padding-top:14px; } /* ---------- Teal mission band (C treatment) ---------- */ .mission{ position:relative; overflow:hidden; background:var(--ls-teal); color:#fff; } .mission .grid-bg{ position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:40px 40px; } .mission .cone{ position:absolute; top:-10%; left:50%; width:0; height:0; transform:translateX(-50%) rotate(0deg); border-left:240px solid transparent; border-right:240px solid transparent; border-top:520px solid rgba(246,190,0,.14); filter:blur(30px); } .mission-inner{ position:relative; text-align:center; padding:var(--sec-pad) var(--pad-x); max-width:960px; margin:0 auto; } .mission-quote{ font-size:34px; font-weight:300; line-height:1.34; max-width:880px; margin:20px auto 0; color:#fff; } .mission-quote em{ font-style:normal; color:var(--ls-gold); font-weight:600; } .mission-tag{ margin-top:30px; font-size:22px; font-weight:900; letter-spacing:.01em; } /* ---------- Project cards ---------- */ .proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .proj-card{ display:block; text-decoration:none; color:inherit; border-radius:var(--card-radius); overflow:hidden; border:1px solid var(--border); background:#fff; transition:transform .18s ease, box-shadow .18s ease; } .proj-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); } .proj-card .pc-body{ padding:20px 22px 24px; } .proj-tag{ display:inline-block; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--ls-teal-700); background:var(--ls-teal-100); padding:5px 10px; border-radius:999px; } .proj-card h3{ font-size:20px; font-weight:800; margin:14px 0 6px; letter-spacing:-.01em; } .proj-card .meta{ font-size:13.5px; color:var(--fg2); display:flex; align-items:center; gap:7px; } .proj-card .scope{ font-size:14px; color:var(--fg2); line-height:1.5; margin:12px 0 0; } .proj-card .more{ margin-top:14px; font-size:13px; font-weight:800; color:var(--ls-gold-600); display:inline-flex; gap:6px; align-items:center; } /* ---------- Filter chips / toolbar ---------- */ .filter-bar{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:30px; } .search-box{ position:relative; flex:1; min-width:240px; } .search-box input{ width:100%; font-family:inherit; font-size:15px; padding:13px 16px 13px 44px; border:1px solid var(--border-strong); border-radius:var(--btn-radius); background:#fff; color:var(--fg1); } .search-box .ls-ico{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--fg3); } .search-box input:focus{ outline:2px solid var(--ls-teal); outline-offset:1px; border-color:var(--ls-teal); } .chips{ display:flex; gap:8px; flex-wrap:wrap; } .chip{ font-family:inherit; font-size:13.5px; font-weight:700; padding:9px 15px; border-radius:999px; cursor:pointer; white-space:nowrap; border:1px solid var(--border-strong); background:#fff; color:var(--ls-gray-700); transition:all .14s; display:inline-flex; align-items:center; gap:7px; } .chip:hover{ border-color:var(--ls-gray-500); } .chip.active{ background:var(--ls-gray-900); color:#fff; border-color:var(--ls-gray-900); } .chip .cnt{ font-size:11px; opacity:.65; font-weight:800; } .result-count{ font-size:13.5px; color:var(--fg2); font-weight:600; margin-bottom:18px; } /* ============================================================ LINE CARD & PRODUCT FINDER ============================================================ */ /* dark header band */ .finder-head{ position:relative; overflow:hidden; color:#fff; background:linear-gradient(135deg, var(--hdr-1,#00677F) 0%, var(--hdr-1,#00677F) 22%, var(--hdr-2,#013a47) 100%); } .finder-head .grid-bg{ position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:46px 46px; } .finder-beam{ position:absolute; top:-30%; right:8%; width:340px; height:160%; background:linear-gradient(180deg,rgba(246,190,0,.30),rgba(246,190,0,.02) 70%); transform:rotate(16deg); filter:blur(22px); pointer-events:none; } .finder-head-inner{ position:relative; padding:46px var(--pad-x) 40px; } .crumbs-light a{ color:rgba(255,255,255,.7); } .crumbs-light{ color:rgba(255,255,255,.5); } .crumbs-light a:hover{ color:var(--ls-gold); } .finder-title{ font-size:54px; font-weight:900; letter-spacing:-.025em; line-height:.98; margin:12px 0 0; color:#fff; } .finder-lead{ font-size:18px; font-weight:300; color:rgba(255,255,255,.74); line-height:1.5; margin:16px 0 0; max-width:640px; } /* search bar */ .finder-search{ display:flex; gap:12px; align-items:stretch; margin-top:28px; background:#fff; border-radius:12px; padding:10px; box-shadow:var(--shadow-lg); flex-wrap:wrap; } .fs-input{ position:relative; flex:1; min-width:260px; display:flex; align-items:center; } .fs-input .ls-ico{ position:absolute; left:16px; color:var(--fg3); } .fs-input input{ width:100%; font-family:inherit; font-size:16px; padding:14px 16px 14px 46px; border:0; background:transparent; color:var(--fg1); } .fs-input input:focus{ outline:none; } .fs-filters{ font-family:inherit; font-weight:800; font-size:14.5px; cursor:pointer; border:1px solid var(--border-strong); background:#fff; color:var(--fg1); border-radius:8px; padding:0 18px; display:inline-flex; align-items:center; gap:8px; } .fs-filters:hover{ border-color:var(--ls-gray-500); } .fs-filters.has{ border-color:var(--ls-gold); background:var(--ls-gold-50); } .fs-count{ background:var(--ls-gold); color:#27251F; font-size:12px; font-weight:900; border-radius:999px; min-width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; padding:0 6px; } .fs-clear{ font-family:inherit; font-weight:800; font-size:14px; cursor:pointer; border:0; background:transparent; color:var(--fg2); padding:0 14px; border-radius:8px; } .fs-clear:hover:not(:disabled){ color:var(--ls-teal); } .fs-clear:disabled{ opacity:.4; cursor:not-allowed; } .finder-stats{ display:flex; align-items:center; gap:14px; margin-top:18px; font-size:14px; color:rgba(255,255,255,.7); flex-wrap:wrap; } .finder-stats b{ color:#fff; font-weight:900; } .finder-stats .dot{ width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.35); } /* toolbar */ .finder-toolbar{ display:flex; align-items:center; justify-content:space-between; padding-top:26px; padding-bottom:0; gap:16px; flex-wrap:wrap; } .toolbar-right{ display:flex; align-items:center; gap:14px; } .sort-ctl{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--fg2); } .sort-ctl select{ font-family:inherit; font-size:14px; font-weight:700; padding:8px 12px; border-radius:var(--btn-radius); border:1px solid var(--border-strong); background:#fff; color:var(--fg1); cursor:pointer; text-transform:none; letter-spacing:0; } /* active chips */ .active-chips{ display:flex; flex-wrap:wrap; gap:8px; padding-top:18px; align-items:center; } .active-chip{ font-family:inherit; font-size:13px; font-weight:700; padding:7px 10px 7px 13px; border-radius:999px; cursor:pointer; border:1px solid var(--ls-gold-200); background:var(--ls-gold-50); color:var(--ls-gray-800); display:inline-flex; align-items:center; gap:6px; } .active-chip:hover{ background:var(--ls-gold-100); } .active-clear{ font-family:inherit; font-size:13px; font-weight:800; color:var(--ls-teal); background:none; border:0; cursor:pointer; } /* tile grid */ .tile-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; } @media (max-width:1200px){ .tile-grid{ grid-template-columns:repeat(4,1fr); } } .tile{ border:1px solid var(--border); border-radius:var(--card-radius); background:#fff; padding:22px; display:flex; flex-direction:column; min-height:200px; box-shadow:0 2px 4px rgba(39,37,31,.07), 0 12px 26px -8px rgba(39,37,31,.24); cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, border-color .16s; } .tile:hover{ transform:translateY(-3px); box-shadow:0 2px 4px rgba(39,37,31,.06), 0 18px 36px -18px rgba(39,37,31,.32); border-color:var(--ls-gold-200); } /* logo-forward card: just the logo at rest, details reveal on hover */ .tile{ position:relative; overflow:hidden; padding:0 !important; min-height:0 !important; height:200px; display:block; } .tile:hover{ box-shadow:0 4px 10px rgba(39,37,31,.10), 0 20px 38px -18px rgba(39,37,31,.36); border-color:var(--ls-gold); overflow:visible; z-index:20; } .tile-stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:13px 15px; background:#fff; transition:filter .2s ease, opacity .2s ease; } .tile-stage img.tile-logo{ height:auto; max-height:152px; max-width:96%; width:auto; object-fit:contain; object-position:center; display:block; } .tile-wordmark{ font-size:23px; font-weight:900; letter-spacing:-.015em; color:var(--fg1); text-align:center; line-height:1.1; max-width:90%; } .tile-matchpill{ position:absolute; top:12px; right:12px; display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:800; color:#fff; background:var(--ls-teal); padding:5px 10px; border-radius:999px; box-shadow:0 2px 8px rgba(0,103,127,.35); } .tile:hover .tile-stage{ opacity:.07; } .tile-reveal{ position:absolute; top:0; left:0; right:0; min-height:100%; display:flex; flex-direction:column; padding:15px; background:#fff; border:2px solid var(--ls-gold); border-radius:12px; opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .16s ease, transform .16s ease; box-shadow:0 22px 50px -14px rgba(39,37,31,.46), 0 0 0 4px rgba(246,190,0,.14); } .tile:hover .tile-reveal{ opacity:1; transform:translateY(0); pointer-events:auto; } .prog-badge-more{ background:var(--ls-gray-100); color:var(--ls-gray-700); } .tile-reveal-name{ font-size:16px; font-weight:900; letter-spacing:-.01em; color:var(--fg1); line-height:1.2; padding-bottom:9px; position:relative; } .tile-reveal-name::after{ content:''; position:absolute; left:0; bottom:0; width:42px; height:3px; background:var(--ls-gold); border-radius:2px; } .tile-reveal .tile-desc{ font-size:12px; color:var(--fg2); line-height:1.45; margin:5px 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .prog-row{ display:flex; flex-wrap:wrap; gap:6px; } .prog-badge{ display:inline-flex; align-items:center; gap:5px; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:#5c4900; background:var(--ls-gold-100); padding:4px 8px; border-radius:5px; white-space:nowrap; line-height:1.2; } .tile-reveal .prog-row{ margin:9px 0 0; gap:6px 7px; } .tile-reveal .tile-tags{ margin:9px 0 0; gap:5px; } .tile-reveal .tg{ font-size:10px; padding:4px 8px; } .tile-reveal-cta{ margin-top:auto; font-size:12px; font-weight:800; letter-spacing:.01em; color:var(--ls-gold-600); display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--ls-gold-50); border:1px solid var(--ls-gold-200); border-radius:7px; padding:9px 12px; margin-top:10px; } .tile:hover .tile-reveal-cta{ margin-top:auto; } .rc-note{ color:var(--ls-teal); font-weight:700; } .tile-desc{ font-size:14px; color:var(--fg2); line-height:1.55; } .tile-tags{ display:flex; flex-wrap:wrap; gap:6px; } .tg{ font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--ls-gray-700); background:var(--ls-gray-100); padding:5px 9px; border-radius:999px; border:0; } .tg.on{ background:var(--ls-gold-50); color:var(--ls-gold-600); box-shadow:inset 0 0 0 1px var(--ls-gold-200); } .tg-more{ color:var(--ls-teal); background:transparent; box-shadow:inset 0 0 0 1px var(--border-strong); } .tg-prog{ display:inline-flex; align-items:center; gap:5px; color:#5c4900; background:var(--ls-gold-100); font-weight:800; text-transform:uppercase; letter-spacing:.03em; } .tile-actions{ display:flex; gap:8px; align-items:center; } .tile-quote{ font-family:inherit; font-size:13px; font-weight:800; border:0; background:none; cursor:pointer; color:var(--ls-gold-600); display:inline-flex; align-items:center; gap:6px; padding:0; } .tile-quote:hover{ color:var(--ls-gold); } .tile-visit{ font-family:inherit; font-size:13px; font-weight:800; border:0; background:none; cursor:pointer; color:var(--ls-teal); margin-left:auto; padding:0; } .tile-visit:hover{ color:var(--ls-teal-700); } /* filters drawer */ .drawer-overlay{ position:fixed; inset:0; background:rgba(39,37,31,.22); z-index:120; display:flex; justify-content:flex-end; animation:fade .18s ease; } .drawer{ width:380px; max-width:90vw; background:#fff; height:100%; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); animation:slideIn .22s ease; } @keyframes slideIn{ from{ transform:translateX(30px); opacity:.6; } } .drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--border); } .drawer-head h3{ margin:0; font-size:20px; font-weight:800; } .drawer-clear{ font-family:inherit; font-size:13px; font-weight:800; color:var(--ls-teal); background:none; border:0; cursor:pointer; } .drawer-close{ background:var(--ls-gray-100); border:0; border-radius:8px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ls-gray-700); } .drawer-close:hover{ background:var(--ls-gray-200); } .drawer-body{ flex:1; overflow-y:auto; padding:8px 22px 22px; } .facet-group{ margin-top:20px; } .facet-title{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--ls-gold-600); margin-bottom:8px; display:flex; align-items:center; gap:7px; position:sticky; top:0; background:#fff; padding:6px 0; z-index:1; } .facet-list{ display:flex; flex-direction:column; gap:1px; } .facet{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; font-size:14px; font-weight:600; color:var(--ls-gray-800); } .facet:hover{ background:var(--ls-gray-50); } .facet.on{ background:var(--ls-gold-50); color:var(--ls-gold-600); } .facet input{ width:16px; height:16px; accent-color:var(--ls-gold-600); cursor:pointer; } .facet-label{ flex:1; display:inline-flex; align-items:center; gap:7px; } .facet-count{ font-size:12px; font-weight:800; color:var(--fg3); } .facet.on .facet-count{ color:var(--ls-gold-600); } .drawer-foot{ display:flex; gap:10px; padding:16px 22px; border-top:1px solid var(--border); } @media print{ .finder-head .finder-search, .finder-toolbar .toolbar-right, .tile-actions, .site-header, .topbar, .cta-band, .site-footer, .drawer-overlay, .twk-panel{ display:none !important; } .tile-grid{ grid-template-columns:repeat(2,1fr); } .finder-head{ background:#fff !important; color:#000 !important; } .finder-title, .finder-lead{ color:#000 !important; } } /* ---------- Manufacturer profile modal ("shadow box") ---------- */ .pm-overlay{ position:fixed; inset:0; background:rgba(39,37,31,.5); backdrop-filter:blur(3px); z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; animation:fade .18s ease; } .pm{ background:#fff; border-radius:16px; width:100%; max-width:680px; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow-lg); animation:pop .2s ease; } .pm-head{ position:relative; color:#fff; padding:26px 28px 22px; } .pm-x{ position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:8px; border:0; cursor:pointer; background:rgba(255,255,255,.16); color:#fff; display:flex; align-items:center; justify-content:center; } .pm-x:hover{ background:rgba(255,255,255,.28); } .pm-name{ font-size:28px; font-weight:900; letter-spacing:-.02em; } .pm-logo{ display:inline-flex; align-items:center; justify-content:center; background:#fff; border-radius:10px; padding:14px 20px; margin-bottom:14px; box-shadow:0 3px 14px rgba(0,0,0,.2); max-width:280px; } .pm-logo img{ height:48px; max-width:240px; width:auto; object-fit:contain; display:block; } .pm-tag{ font-size:15px; font-weight:300; color:rgba(255,255,255,.85); margin-top:6px; max-width:90%; line-height:1.45; } .pm-progrow{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; } .pm-prog{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; background:rgba(255,255,255,.16); color:#fff; padding:5px 10px; border-radius:999px; } .pm-body{ padding:24px 28px; overflow-y:auto; } .pm-loc{ display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--fg2); margin-bottom:6px; } .pm-loc b{ color:var(--fg1); font-weight:700; } .pm-sec{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--ls-gold-600); margin:20px 0 10px; } .pm-secnote{ font-weight:500; text-transform:none; letter-spacing:0; color:var(--fg3); } .pm-story{ font-size:15.5px; line-height:1.6; color:var(--ls-gray-800); margin:0; } .pm-chips{ display:flex; flex-wrap:wrap; gap:7px; } .pm-chip{ font-size:12.5px; font-weight:700; color:var(--ls-gray-700); background:var(--ls-gray-100); padding:6px 11px; border-radius:999px; } .pm-cats{ display:flex; flex-wrap:wrap; gap:8px; } .pm-cat{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:800; text-decoration:none; color:var(--ls-teal); border:1px solid var(--border-strong); padding:7px 12px; border-radius:999px; } .pm-cat:hover{ border-color:var(--ls-teal); background:var(--ls-teal-100); } .pm-search{ position:relative; display:flex; align-items:center; margin-top:18px; } .pm-search .ls-ico{ position:absolute; left:14px; color:var(--fg3); } .pm-search input{ width:100%; font-family:inherit; font-size:14.5px; padding:11px 14px 11px 40px; border:1px solid var(--border-strong); border-radius:8px; background:var(--ls-gray-50); } .pm-search input:focus{ outline:2px solid var(--ls-teal); outline-offset:1px; border-color:var(--ls-teal); background:#fff; } .pm-prods{ display:flex; flex-direction:column; gap:8px; } .pm-pcard{ border:1px solid var(--border); border-radius:10px; padding:12px 14px; background:#fff; } .pm-phdr{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; } .pm-pmfg{ font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ls-gray-500); } .pm-pfam{ font-size:12px; font-weight:800; color:var(--fg1); background:var(--ls-gold-50); padding:2px 7px; border-radius:5px; } .pm-pctg{ font-size:11px; font-weight:700; color:var(--ls-teal-700); background:var(--ls-teal-100); padding:2px 8px; border-radius:999px; margin-left:auto; } .pm-pnm{ font-size:13.5px; line-height:1.5; color:var(--fg2); } .pm-specs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; } .pm-spec{ font-size:11px; color:var(--ls-gray-700); background:var(--ls-gray-100); padding:3px 8px; border-radius:5px; line-height:1.4; } .pm-spec b{ color:var(--ls-gray-500); font-weight:800; text-transform:uppercase; letter-spacing:.03em; margin-right:3px; } .pm-plinks{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-top:11px; padding-top:10px; border-top:1px solid var(--border); } .pm-plinks a{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:800; color:var(--ls-teal); text-decoration:none; } .pm-plinks a:hover{ color:var(--ls-teal-700); } .pm-pmodels{ font-size:11.5px; font-weight:700; color:var(--fg3); margin-left:auto; } /* Product Card List item (KB families inside the shadow box) */ .pcard{ border:1px solid var(--border); border-radius:10px; padding:14px 15px; background:#fff; } .pcard-hdr{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .pcard-mfg{ font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ls-gray-500); } .pcard-fam{ font-size:12px; font-weight:800; color:var(--fg1); background:var(--ls-gold-50); padding:2px 7px; border-radius:5px; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pcard-cat{ font-size:11px; font-weight:700; color:var(--ls-teal-700); background:var(--ls-teal-100); padding:2px 8px; border-radius:999px; margin-left:auto; } .pcard-nm{ font-size:13.5px; line-height:1.5; color:var(--fg1); font-weight:600; margin-top:8px; } .pcard-attrs{ display:grid; grid-template-columns:1fr; gap:1px; margin-top:11px; border:1px solid var(--border); border-radius:8px; overflow:hidden; } .pcard-attr{ display:grid; grid-template-columns:120px 1fr; gap:10px; padding:8px 11px; background:var(--ls-gray-50); font-size:12.5px; line-height:1.45; } .pcard-attr:nth-child(even){ background:#fff; } .pcard-k{ font-weight:800; color:var(--ls-gray-600); text-transform:uppercase; letter-spacing:.02em; font-size:10.5px; align-self:start; padding-top:1px; } .pcard-v{ color:var(--ls-gray-800); word-break:break-word; } .pcard-more{ font-family:inherit; font-size:12px; font-weight:800; color:var(--ls-teal); background:none; border:0; cursor:pointer; padding:9px 2px 2px; display:inline-flex; align-items:center; gap:5px; } .pcard-more:hover{ color:var(--ls-teal-700); } .pcard-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-top:11px; padding-top:10px; border-top:1px solid var(--border); } .pcard-foot a{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:800; color:var(--ls-teal); text-decoration:none; } .pcard-foot a:hover{ color:var(--ls-teal-700); } .pcard-models{ font-size:11.5px; font-weight:700; color:var(--fg3); margin-left:auto; } .pm-empty,.pm-noprod{ font-size:14px; color:var(--fg2); line-height:1.55; padding:14px 0; } .pm-more-note{ font-size:12.5px; color:var(--fg3); margin-top:12px; line-height:1.5; font-style:italic; } .pm-foot{ display:flex; gap:10px; padding:16px 28px; border-top:1px solid var(--border); background:var(--ls-gray-50); } .pm-foot .btn{ flex:1; justify-content:center; } /* ---------- Competitor cross-reference (surfaced inside a manufacturer card) ---------- */ .tile-crosspill{ position:absolute; top:12px; right:12px; display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:800; color:var(--ls-black,#27251F); background:var(--ls-gold); padding:5px 10px; border-radius:999px; box-shadow:0 2px 8px rgba(246,190,0,.4); } .xref-note{ display:flex; align-items:center; gap:9px; margin-top:18px; padding:11px 15px; font-size:13px; line-height:1.45; color:var(--fg1); background:var(--ls-gold-50); border:1px solid var(--border); border-left:3px solid var(--ls-gold); border-radius:8px; } .xref-note > svg{ flex:none; color:var(--ls-gold-600,#caa000); } .pm-xref{ border:1px solid var(--border); border-left:3px solid var(--ls-gold); border-radius:10px; background:var(--ls-gold-50); padding:14px 16px; margin-bottom:18px; } .pm-xref-hd{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:800; color:var(--fg1); } .pm-xref-q{ font-weight:700; color:var(--fg2); } .pm-xref-sub{ font-size:12px; color:var(--fg2); line-height:1.5; margin:5px 0 12px; } .pm-xref-list{ display:flex; flex-direction:column; gap:8px; } .pm-xref-row{ display:grid; grid-template-columns:1fr 20px 1fr; gap:10px; align-items:center; } .pm-xref-from{ display:flex; flex-direction:column; gap:1px; min-width:0; } .pm-xref-fromtag{ font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ls-gray-500); } .pm-xref-frompart{ font-size:12.5px; font-weight:700; color:var(--fg1); word-break:break-all; } .pm-xref-fromspec{ display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:800; color:var(--ls-teal); text-decoration:none; margin-top:2px; } .pm-xref-fromspec:hover{ color:var(--ls-teal-700); } .pm-xref-arr{ display:flex; align-items:center; justify-content:center; color:var(--ls-gold-600,#caa000); } .pm-xref-to{ display:flex; flex-direction:column; gap:3px; align-items:flex-start; text-align:left; font-family:inherit; cursor:pointer; border:1px solid var(--border); border-radius:8px; background:#fff; padding:8px 11px; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .pm-xref-to:hover{ border-color:var(--ls-teal); box-shadow:var(--shadow-sm); transform:translateY(-1px); } .pm-xref-tofam{ font-size:13.5px; font-weight:800; color:var(--fg1); } .pm-xref-tospec{ font-size:11px; font-weight:600; color:var(--fg2); } .xref-tier{ font-size:9px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; padding:2px 6px; border-radius:999px; white-space:nowrap; } .xref-tier.r4{ color:var(--ls-teal-700); background:var(--ls-teal-100); } .xref-tier.r3{ color:#2f6b4f; background:rgba(47,107,79,.13); } .xref-tier.r2{ color:var(--ls-gray-600); background:var(--ls-gray-100,#ececed); } .xref-tier.r1{ color:var(--ls-orange,#D45D00); background:rgba(212,93,0,.12); } @media (max-width:560px){ .pm-xref-row{ grid-template-columns:1fr; gap:6px; } .pm-xref-arr{ transform:rotate(90deg); justify-content:flex-start; } } /* ---------- Interior page headers — secondary-palette themed (applied site-wide) ---------- */ .page-head{ border-bottom:0; color:#fff; background:linear-gradient(135deg, var(--hdr-1,#00677F) 0%, var(--hdr-1,#00677F) 22%, var(--hdr-2,#013a47) 100%); } .page-head .grid-bg{ background-image: linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:46px 46px; } .page-head::after{ content:''; position:absolute; top:-30%; right:8%; width:340px; height:160%; background:linear-gradient(180deg,rgba(246,190,0,.26),rgba(246,190,0,.02) 70%); transform:rotate(16deg); filter:blur(22px); pointer-events:none; } .page-head h1{ color:#fff; } .page-head .lead{ color:rgba(255,255,255,.8); } .page-head .crumbs{ color:rgba(255,255,255,.55); } .page-head .crumbs a{ color:rgba(255,255,255,.78); } .page-head .crumbs a:hover{ color:var(--ls-gold); } .page-head .kicker{ color:var(--ls-gold); } .page-head .kicker-teal{ color:var(--ls-gold); } .page-head .proj-tag{ background:rgba(255,255,255,.16); color:#fff; } /* per-page palette assignments (brand secondary colors) */ .page-head[data-hdr="teal"], .finder-head[data-hdr="teal"]{ --hdr-1:#00677F; --hdr-2:#013a47; } .page-head[data-hdr="slate"], .finder-head[data-hdr="slate"]{ --hdr-1:#274a5c; --hdr-2:#14222b; } .page-head[data-hdr="spruce"], .finder-head[data-hdr="spruce"]{ --hdr-1:#0c5258; --hdr-2:#06272b; } .page-head[data-hdr="charcoal"], .finder-head[data-hdr="charcoal"]{ --hdr-1:#3c3630; --hdr-2:#1c1a16; } .page-head[data-hdr="ember"], .finder-head[data-hdr="ember"]{ --hdr-1:#7a3a1d; --hdr-2:#2a160c; } .page-head[data-hdr="harbor"], .finder-head[data-hdr="harbor"]{ --hdr-1:#155e63; --hdr-2:#0a2e30; } .page-head[data-hdr="plum"], .finder-head[data-hdr="plum"]{ --hdr-1:#5b4a6e; --hdr-2:#241c2e; } /* charcoal/ember keep a warm beam; teal/slate/spruce a gold beam (default) */ .page-head[data-hdr="charcoal"]::after, .finder-head[data-hdr="charcoal"] .finder-beam{ background:linear-gradient(180deg,rgba(0,168,200,.22),rgba(0,168,200,.02) 70%); } /* Tweak override — forces one palette site-wide (placed after, wins on equal specificity) */ html[data-hdr-force="teal"] .page-head, html[data-hdr-force="teal"] .finder-head{ --hdr-1:#00677F; --hdr-2:#013a47; } html[data-hdr-force="slate"] .page-head, html[data-hdr-force="slate"] .finder-head{ --hdr-1:#274a5c; --hdr-2:#14222b; } html[data-hdr-force="spruce"] .page-head, html[data-hdr-force="spruce"] .finder-head{ --hdr-1:#0c5258; --hdr-2:#06272b; } html[data-hdr-force="charcoal"] .page-head, html[data-hdr-force="charcoal"] .finder-head{ --hdr-1:#3c3630; --hdr-2:#1c1a16; } @media (max-width:600px){ .pm-foot{ flex-direction:column; } .pm-head{ padding:22px 20px 18px; } .pm-body{ padding:20px; } .pm-name{ font-size:23px; } } /* ---------- CTA gold band ---------- */ .cta-band{ background:var(--ls-gold); } .cta-inner{ padding:52px var(--pad-x); display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; } .cta-title{ font-size:32px; font-weight:900; color:#27251F; margin:0; letter-spacing:-.01em; } .cta-sub{ font-size:16px; color:#5c4900; margin:8px 0 0; font-weight:500; max-width:520px; } .cta-band .btn-primary{ background:#27251F; color:#fff; } .cta-band .btn-primary:hover{ background:#000; box-shadow:0 8px 22px rgba(39,37,31,.3); } /* ---------- Insights teaser ---------- */ .insight-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .insight-card{ text-decoration:none; color:inherit; display:block; } .insight-card .photo-slot{ box-shadow:var(--shadow-sm); } .insight-card .topic{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--ls-gold-600); margin:16px 0 0; } .insight-card h3{ font-size:18px; font-weight:800; margin:8px 0 0; line-height:1.3; } .insight-card p{ font-size:14px; color:var(--fg2); margin:8px 0 0; line-height:1.5; } .insight-card .date{ font-size:12.5px; color:var(--fg3); margin-top:10px; } /* ---------- Footer ---------- */ .site-footer{ background:var(--ls-gray-900); color:#c8c9cb; } .footer-inner{ display:grid; grid-template-columns:1.4fr 2fr; gap:48px; padding:60px var(--pad-x) 40px; } .footer-brand img{ height:30px; margin-bottom:18px; } .footer-tag{ color:var(--ls-gold); font-weight:800; font-size:17px; margin:0 0 18px; } .footer-contact{ display:flex; flex-direction:column; gap:10px; font-size:14px; } .footer-contact span{ display:inline-flex; align-items:center; gap:9px; } .footer-contact .ls-ico{ color:var(--ls-gold); } .footer-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } .footer-col h4{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:#fff; margin:0 0 16px; } .footer-col a{ display:block; color:#c8c9cb; text-decoration:none; font-size:14.5px; margin-bottom:10px; } .footer-col a:hover{ color:var(--ls-gold); } .footer-bottom{ border-top:1px solid rgba(255,255,255,.1); } .footer-bottom-inner{ display:flex; justify-content:space-between; padding:18px var(--pad-x); font-size:12.5px; color:#8a8c8f; } /* ---------- Modal ---------- */ .modal-overlay{ position:fixed; inset:0; background:rgba(39,37,31,.55); backdrop-filter:blur(3px); z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; animation:fade .18s ease; } .modal{ background:#fff; border-radius:14px; max-width:560px; width:100%; padding:34px; position:relative; box-shadow:var(--shadow-lg); max-height:90vh; overflow-y:auto; animation:pop .2s ease; } @keyframes fade{ from{ opacity:0; } } @keyframes pop{ from{ opacity:0; transform:translateY(10px); } } .modal-close{ position:absolute; top:18px; right:18px; background:var(--ls-gray-100); border:0; border-radius:8px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ls-gray-700); } .modal-close:hover{ background:var(--ls-gray-200); } .modal-title{ font-size:24px; font-weight:800; margin:10px 0 22px; } .modal-regarding{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--ls-gray-800); background:var(--ls-gold-50); border:1px solid var(--ls-gold-200); border-radius:8px; padding:10px 14px; margin:-10px 0 20px; } .modal-regarding span{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ls-gold-600); } .btn[disabled]{ opacity:.45; cursor:not-allowed; box-shadow:none; transform:none; } .fs-terms{ background:var(--ls-gray-50); border:1px solid var(--border); border-radius:var(--btn-radius); padding:14px 16px; margin:4px 0 14px; } .layout-switch{ display:flex; gap:6px; background:var(--ls-gray-50); border:1px solid var(--border); border-radius:var(--btn-radius); padding:4px; margin:0 0 16px; } .ls-seg{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px; font-family:inherit; font-size:13.5px; font-weight:800; letter-spacing:.02em; color:var(--fg2); background:transparent; border:0; border-radius:calc(var(--btn-radius) - 3px); padding:9px 10px; cursor:pointer; transition:background .15s, color .15s, box-shadow .15s; } .ls-seg:hover{ color:var(--fg1); } .ls-seg.active{ background:#fff; color:var(--ls-teal-700); box-shadow:var(--shadow-sm); } .ls-seg.active svg{ color:var(--ls-teal); } .fs-terms-head{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ls-gold-600); } .fs-terms p{ font-size:12.5px; color:var(--fg2); line-height:1.5; margin:8px 0 8px; } .fs-terms a{ font-size:12.5px; font-weight:800; color:var(--ls-teal); text-decoration:none; display:inline-flex; align-items:center; gap:4px; } .fs-agree{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--ls-gray-800); margin-bottom:16px; cursor:pointer; } .fs-agree input{ width:18px; height:18px; accent-color:var(--ls-gold-600); cursor:pointer; } .fs-facts{ display:flex; flex-wrap:wrap; gap:14px 26px; margin-top:34px; } .fs-facts span{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:rgba(255,255,255,.88); } .fs-facts .ls-ico{ color:var(--ls-gold); } .controls-more{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:nowrap; margin-top:44px; background:var(--ls-teal-100); border:1px solid var(--ls-teal); border-radius:var(--card-radius); padding:18px 22px; text-align:center; } .controls-more span{ font-size:15.5px; font-weight:800; color:var(--ls-teal-700); } .controls-more .ls-ico{ color:var(--ls-teal); flex:0 0 auto; } .kv-strong{ border-color:var(--ls-gold-200); } .kv-strong .kv{ border-top:4px solid var(--ls-gold); } .kv-strong .kv b{ font-size:34px; font-weight:900; letter-spacing:-.02em; color:var(--ls-teal); } .kv-strong .kv span{ font-size:13px; font-weight:800; color:var(--fg1); text-transform:none; letter-spacing:0; margin-top:6px; } /* Startups — "what it means" stat callouts */ .su-stats{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-self:center; } .su-stat{ background:#fff; border:1px solid var(--border); border-top:4px solid var(--ls-gold); border-radius:var(--card-radius); padding:28px 26px; box-shadow:0 1px 2px rgba(39,37,31,.05), 0 10px 26px -18px rgba(39,37,31,.22); display:flex; flex-direction:column; align-items:flex-start; gap:12px; } .su-ico{ width:50px; height:50px; border-radius:11px; background:var(--ls-teal-100); color:var(--ls-teal-700); display:flex; align-items:center; justify-content:center; margin-bottom:6px; flex:0 0 auto; } .su-stat b{ display:block; width:100%; font-size:48px; font-weight:900; letter-spacing:-.02em; line-height:1; color:var(--ls-teal); } .su-stat span{ display:block; width:100%; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--fg2); line-height:1.5; } @media (max-width:600px){ .su-stats{ grid-template-columns:1fr 1fr; } } /* ---------- Forms ---------- */ .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px; } .field{ display:flex; flex-direction:column; gap:6px; } .field-full{ grid-column:1 / -1; } .field span{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--fg2); } .field input,.field select,.field textarea{ font-family:inherit; font-size:15px; padding:11px 13px; border:1px solid var(--border-strong); border-radius:var(--btn-radius); background:#fff; color:var(--fg1); width:100%; resize:vertical; } .field input:focus,.field select:focus,.field textarea:focus{ outline:2px solid var(--ls-teal); outline-offset:1px; border-color:var(--ls-teal); } .form-note{ font-size:12px; color:var(--fg3); margin:12px 0 0; } .modal-success,.form-success{ text-align:center; padding:18px 0; } .success-ico{ width:64px; height:64px; border-radius:50%; background:var(--ls-teal-100); color:var(--ls-teal); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; } .form-success p{ color:var(--fg2); line-height:1.55; max-width:420px; margin:0 auto 24px; } .upload{ border:2px dashed var(--border-strong); border-radius:var(--btn-radius); padding:22px; text-align:center; color:var(--fg2); font-size:14px; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; } .upload:hover{ border-color:var(--ls-teal); color:var(--ls-teal); } .upload-max{ font-size:12px; font-weight:600; color:var(--fg3); text-transform:none; letter-spacing:0; } .upload:focus-visible{ outline:none; border-color:var(--ls-teal); box-shadow:var(--focus-ring); } .upload.has-files{ padding:14px; } .upload-list{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; } .upload-list li{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--fg1); background:var(--ls-gray-50); border:1px solid var(--border); border-radius:7px; padding:7px 9px; } .upload-list .uf-name{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .upload-list em{ margin-left:auto; font-style:normal; color:var(--fg3); font-size:12px; white-space:nowrap; } .uf-x{ background:none; border:0; cursor:pointer; color:var(--fg3); display:inline-flex; padding:2px; border-radius:4px; } .uf-x:hover{ color:var(--ls-orange); background:#fff; } /* ---------- Tabs (contact intents) ---------- */ .tabs{ display:flex; gap:6px; flex-wrap:wrap; background:var(--ls-gray-100); padding:6px; border-radius:10px; margin-bottom:28px; } .tab{ font-family:inherit; font-size:14px; font-weight:800; padding:11px 18px; border-radius:7px; border:0; cursor:pointer; background:transparent; color:var(--ls-gray-700); display:inline-flex; align-items:center; gap:8px; } .tab.active{ background:#fff; color:var(--fg1); box-shadow:var(--shadow-sm); } /* ---------- Detail / case study ---------- */ .prose{ max-width:720px; } .prose h2{ font-size:28px; font-weight:800; margin:40px 0 12px; } .prose p{ font-size:17px; line-height:1.65; color:var(--ls-gray-800); margin:0 0 16px; } .kv-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--card-radius); overflow:hidden; } .kv{ background:#fff; padding:22px; } .kv b{ display:block; font-size:28px; font-weight:900; letter-spacing:-.01em; } .kv span{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--fg2); margin-top:4px; display:block; } .gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } /* locations */ .loc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; } .loc-card{ border:1px solid var(--border); border-radius:var(--card-radius); overflow:hidden; background:#fff; } .loc-card .loc-body{ padding:22px 24px; } .loc-card h3{ font-size:20px; font-weight:800; margin:0 0 4px; } .loc-card .addr{ font-size:14.5px; color:var(--fg2); line-height:1.6; } .loc-card .map{ aspect-ratio:16/7; } .loc-map{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:16/7; overflow:hidden; text-decoration:none; background:linear-gradient(135deg, #3c3630, #1c1a16); } .loc-map-grid{ position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:26px 26px; } .loc-map-pin{ position:relative; width:52px; height:52px; border-radius:50%; background:var(--ls-gold); color:#27251F; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); } .loc-map-cta{ position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:800; color:var(--ls-teal-700); background:rgba(255,255,255,.92); padding:6px 11px; border-radius:999px; } .loc-map:hover .loc-map-cta{ background:#fff; color:var(--ls-teal); } /* generic two-col */ .split{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; } /* ---------- Responsive ---------- */ @media (max-width:980px){ .nav-desktop{ display:none; } .hamburger{ display:inline-flex; } .nav-mobile.open{ display:flex; } .header-cta .btn-primary{ display:none; } .hero-inner{ grid-template-columns:1fr; gap:40px; padding:52px var(--pad-x) 60px; } .hero-title{ font-size:50px; } .services-grid,.values-grid,.proj-grid,.insight-grid,.gallery{ grid-template-columns:1fr 1fr; } .brand-grid{ grid-template-columns:1fr 1fr; } .tile-grid{ grid-template-columns:repeat(3,1fr); } .finder-title{ font-size:42px; } .steps{ grid-template-columns:1fr 1fr; } .kv-grid{ grid-template-columns:1fr 1fr; } .footer-inner,.split,.loc-grid{ grid-template-columns:1fr; gap:32px; } .stat-strip .container{ flex-wrap:wrap; } .stat-strip .s{ flex:1 0 50%; } } @media (max-width:600px){ :root{ --pad-x:20px; } .services-grid,.values-grid,.proj-grid,.insight-grid,.brand-grid,.footer-cols,.gallery,.kv-grid{ grid-template-columns:1fr; } .tile-grid{ grid-template-columns:repeat(2,1fr); } .steps{ grid-template-columns:1fr; } .hero-title{ font-size:40px; } .page-head h1{ font-size:34px; } .section-title{ font-size:30px; } .form-grid{ grid-template-columns:1fr; } .cta-inner{ flex-direction:column; align-items:flex-start; } } /* ---------- Education — course cards + featured article ---------- */ .course-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .course-card{ background:#fff; border:1px solid var(--border); border-radius:var(--card-radius); padding:24px; display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(39,37,31,.05), 0 8px 24px -16px rgba(39,37,31,.16); transition:transform .16s ease, box-shadow .16s ease, border-color .16s; } .course-card:hover{ transform:translateY(-3px); box-shadow:0 2px 4px rgba(39,37,31,.06), 0 18px 36px -18px rgba(39,37,31,.3); border-color:var(--ls-gold-200); } .course-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; } .credit{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ls-gray-700); background:var(--ls-gray-100); padding:5px 10px; border-radius:999px; } .credit.hsw{ color:#5c4900; background:var(--ls-gold-100); } .course-dur{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--fg3); white-space:nowrap; } .course-topic{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--ls-teal-700); margin-bottom:6px; } .course-card h3{ font-size:18px; font-weight:800; margin:0 0 8px; line-height:1.25; } .course-card p{ font-size:14px; color:var(--fg2); line-height:1.55; margin:0 0 18px; flex:1; } .course-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--border); padding-top:14px; } .course-code{ font-size:12px; font-weight:700; color:var(--fg3); letter-spacing:.02em; } .course-book{ font-family:inherit; font-size:13px; font-weight:800; border:0; background:none; cursor:pointer; color:var(--ls-gold-600); display:inline-flex; align-items:center; gap:6px; padding:0; } .course-book:hover{ color:var(--ls-gold); } .edu-featured{ display:grid; grid-template-columns:1.1fr 1fr; gap:0; border:1px solid var(--border); border-radius:var(--card-radius); overflow:hidden; text-decoration:none; color:inherit; background:#fff; box-shadow:0 1px 2px rgba(39,37,31,.05), 0 12px 30px -20px rgba(39,37,31,.25); transition:transform .16s ease, box-shadow .16s ease; } .edu-featured:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(39,37,31,.06), 0 22px 44px -22px rgba(39,37,31,.32); } .edu-featured .photo-slot{ border-radius:0; } .edu-featured-body{ padding:32px 34px; display:flex; flex-direction:column; justify-content:center; } .edu-featured-body .topic{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--ls-gold-600); } .edu-featured-body h3{ font-size:26px; font-weight:800; letter-spacing:-.01em; line-height:1.18; margin:10px 0 0; } .edu-featured-body p{ font-size:15.5px; color:var(--fg2); line-height:1.55; margin:12px 0 0; } .edu-meta{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--fg3); font-weight:600; margin:16px 0 0; } .edu-dot{ width:4px; height:4px; border-radius:50%; background:var(--border-strong); } .edu-featured-body .more{ margin-top:18px; font-size:13px; font-weight:800; color:var(--ls-teal); display:inline-flex; align-items:center; gap:6px; } @media (max-width:980px){ .course-grid{ grid-template-columns:1fr 1fr; } .edu-featured{ grid-template-columns:1fr; } } @media (max-width:600px){ .course-grid{ grid-template-columns:1fr; } } .sol-svc{ padding-top:46px; padding-bottom:46px; } /* ---------- Article (single insight) ---------- */ .art-meta{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:rgba(255,255,255,.8); margin-top:22px; } .page-head h1{ line-height:1.05; } .art-hero{ aspect-ratio:16/9; max-width:760px; margin:0 auto 36px; } .art-prose{ max-width:760px; margin:0 auto; } .art-lead{ font-size:20px; line-height:1.6; font-weight:400; color:var(--fg1); margin:0 0 24px; } .art-prose h2{ font-size:25px; font-weight:800; letter-spacing:-.01em; margin:36px 0 12px; } .art-prose p{ font-size:17px; line-height:1.7; color:var(--ls-gray-800); margin:0 0 18px; } .art-ul{ margin:0 0 18px; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:10px; } .art-ul li{ position:relative; padding-left:26px; font-size:16.5px; line-height:1.6; color:var(--ls-gray-800); } .art-ul li::before{ content:''; position:absolute; left:6px; top:11px; width:7px; height:7px; border-radius:2px; background:var(--ls-gold); } .art-continue{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:var(--ls-gray-50); border:1px solid var(--border); border-left:4px solid var(--ls-gold); border-radius:var(--card-radius); padding:22px 24px; margin:8px 0; } .art-continue .ls-ico{ color:var(--ls-gold-600); flex:0 0 auto; } .art-continue b{ font-size:15px; } .art-continue p{ margin:4px 0 0; font-size:14px; color:var(--fg2); } .art-continue .btn{ margin-left:auto; } .art-footer{ max-width:760px; margin:36px auto 60px; padding-top:24px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; } @media (max-width:600px){ .art-continue .btn{ margin-left:0; } .art-footer{ flex-direction:column; } .art-footer .btn{ width:100%; justify-content:center; } } /* ---------- Partner Portal ---------- */ .portal-split{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; } .pv-list{ display:flex; flex-direction:column; gap:22px; } .pv-item{ display:flex; gap:16px; } .pv-ico{ width:48px; height:48px; flex:0 0 48px; border-radius:11px; background:var(--ls-teal-100); color:var(--ls-teal-700); display:flex; align-items:center; justify-content:center; } .pv-item h3{ font-size:18px; font-weight:800; margin:2px 0 5px; } .pv-item p{ font-size:14.5px; color:var(--fg2); line-height:1.55; margin:0; } .login-card{ background:#fff; border:1px solid var(--border); border-radius:var(--card-radius); padding:32px 30px; box-shadow:0 1px 2px rgba(39,37,31,.05), 0 18px 44px -22px rgba(39,37,31,.3); } .login-mark img{ height:26px; margin-bottom:20px; } .login-card h3{ font-size:22px; font-weight:800; margin:0 0 4px; } .login-sub{ font-size:14px; color:var(--fg2); margin:0 0 22px; } .login-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; } .login-field span{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--fg2); } .login-field input{ font-family:inherit; font-size:15px; padding:12px 14px; border:1px solid var(--border-strong); border-radius:var(--btn-radius); background:#fff; } .login-field input:focus{ outline:2px solid var(--ls-teal); outline-offset:1px; border-color:var(--ls-teal); } .login-row{ display:flex; align-items:center; justify-content:space-between; margin:4px 0 20px; font-size:13.5px; } .login-check{ display:inline-flex; align-items:center; gap:7px; color:var(--fg2); font-weight:600; } .login-row a{ color:var(--ls-teal); font-weight:700; text-decoration:none; } .login-foot{ text-align:center; font-size:13.5px; color:var(--fg2); margin-top:18px; } .login-foot a{ color:var(--ls-gold-600); font-weight:800; text-decoration:none; } .login-demo{ display:flex; align-items:center; gap:7px; justify-content:center; font-size:12px; color:var(--fg3); margin-top:16px; padding-top:14px; border-top:1px dashed var(--border-strong); } /* dashboard */ .portal-app{ padding:40px 0 var(--sec-pad); background:var(--ls-gray-50); min-height:60vh; } .portal-welcome{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:26px; } .pw-eyebrow{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--ls-gold-600); } .pw-name{ font-size:30px; font-weight:900; letter-spacing:-.02em; margin:6px 0 0; } .pw-name span{ font-size:15px; font-weight:500; color:var(--fg2); letter-spacing:0; } .pw-actions{ display:flex; align-items:center; gap:12px; } .pw-period{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--fg2); background:#fff; border:1px solid var(--border); padding:8px 13px; border-radius:999px; } .kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:18px; } .kpi{ background:#fff; border:1px solid var(--border); border-radius:var(--card-radius); padding:20px 22px; border-top:3px solid var(--ls-gold); } .kpi-label{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--fg2); } .kpi-value{ font-size:30px; font-weight:900; letter-spacing:-.02em; margin:8px 0 6px; } .kpi-foot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .kpi-trend{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:800; color:var(--ls-gray-600); } .kpi-trend.up{ color:var(--ls-teal-700); } .kpi-sub{ font-size:12px; color:var(--fg3); } .portal-cols{ display:grid; grid-template-columns:1.25fr 1fr; gap:18px; margin-bottom:18px; } .panel{ background:#fff; border:1px solid var(--border); border-radius:var(--card-radius); padding:22px 24px; } .panel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; } .panel-head h3{ font-size:17px; font-weight:800; margin:0; } .panel-note{ font-size:12.5px; font-weight:700; color:var(--fg3); } .panel-link{ font-size:13px; font-weight:800; color:var(--ls-teal); text-decoration:none; display:inline-flex; align-items:center; gap:5px; } .chart{ height:200px; display:flex; align-items:flex-end; } .chart-bars{ display:flex; align-items:flex-end; gap:8px; width:100%; height:100%; } .cbar-wrap{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:8px; } .cbar{ width:100%; max-width:34px; background:linear-gradient(180deg, var(--ls-gold), var(--ls-gold-600)); border-radius:5px 5px 0 0; min-height:4px; transition:height .3s ease; } .cbar-x{ font-size:10.5px; font-weight:700; color:var(--fg3); } .pipe{ display:flex; flex-direction:column; gap:16px; } .pipe-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; } .pipe-stage{ font-size:13.5px; font-weight:700; color:var(--ls-gray-800); } .pipe-val{ font-size:13.5px; font-weight:800; } .pipe-val em{ font-style:normal; font-weight:600; color:var(--fg3); } .pipe-track{ height:9px; background:var(--ls-gray-100); border-radius:999px; overflow:hidden; } .pipe-bar{ height:100%; border-radius:999px; transition:width .3s ease; } .ptable-wrap{ overflow-x:auto; } .ptable{ width:100%; border-collapse:collapse; font-size:14px; } .ptable th{ text-align:left; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--fg3); padding:0 14px 12px; border-bottom:1px solid var(--border); } .ptable td{ padding:14px; border-bottom:1px solid var(--border); color:var(--fg2); } .ptable tr:last-child td{ border-bottom:0; } .pt-proj{ font-weight:700; color:var(--fg1); } .pt-val{ font-weight:800; color:var(--fg1); } .pt-when{ color:var(--fg3); font-size:13px; } .pstage{ display:inline-block; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:4px 9px; border-radius:999px; } .pstage.q{ background:var(--ls-gold-100); color:#5c4900; } .pstage.s{ background:var(--ls-teal-100); color:var(--ls-teal-700); } .pstage.v{ background:#fde8cf; color:#8a4422; } .pstage.b{ background:#d6efe2; color:#1f7a52; } .pstage.d{ background:var(--ls-gray-100); color:var(--ls-gray-700); } .res-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px; } .res-card{ background:#fff; border:1px solid var(--border); border-radius:var(--card-radius); padding:22px; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform .16s ease, box-shadow .16s ease, border-color .16s; } .res-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--ls-gold-200); } .res-ico{ width:44px; height:44px; border-radius:10px; background:var(--ls-gold-50); color:var(--ls-gold-600); display:flex; align-items:center; justify-content:center; margin-bottom:14px; } .res-card h4{ font-size:16px; font-weight:800; margin:0 0 6px; } .res-card p{ font-size:13.5px; color:var(--fg2); line-height:1.5; margin:0 0 14px; flex:1; } .res-more{ font-size:12.5px; font-weight:800; color:var(--ls-teal); display:inline-flex; align-items:center; gap:5px; } .portal-help{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:24px; background:var(--ls-gray-900); color:#fff; border-radius:var(--card-radius); padding:26px 30px; } .portal-help h3{ font-size:19px; font-weight:800; margin:0 0 4px; } .portal-help p{ font-size:14px; color:rgba(255,255,255,.72); margin:0; } @media (max-width:980px){ .portal-split{ grid-template-columns:1fr; gap:36px; } .portal-cols{ grid-template-columns:1fr; } .kpi-grid{ grid-template-columns:1fr 1fr; } .res-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ .kpi-grid,.res-grid{ grid-template-columns:1fr; } } /* ---------- Careers ---------- */ .role-list{ display:flex; flex-direction:column; gap:14px; } .role-row{ display:flex; align-items:center; gap:24px; background:#fff; border:1px solid var(--border); border-radius:var(--card-radius); padding:24px 26px; box-shadow:0 1px 2px rgba(39,37,31,.05), 0 8px 24px -18px rgba(39,37,31,.18); transition:transform .16s ease, box-shadow .16s ease, border-color .16s; } .role-row:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(39,37,31,.06), 0 16px 34px -20px rgba(39,37,31,.3); border-color:var(--ls-gold-200); } .role-main{ flex:1; } .role-dept{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--ls-teal-700); margin-bottom:5px; } .role-row h3{ font-size:20px; font-weight:800; margin:0 0 6px; letter-spacing:-.01em; } .role-row p{ font-size:14.5px; color:var(--fg2); line-height:1.55; margin:0 0 12px; max-width:660px; } .role-meta{ display:flex; gap:18px; flex-wrap:wrap; font-size:13px; font-weight:600; color:var(--fg2); } .role-meta span{ display:inline-flex; align-items:center; gap:6px; } .role-actions{ flex:0 0 auto; } .careers-general{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:24px; background:var(--ls-gray-50); border:1px solid var(--border); border-radius:var(--card-radius); padding:28px 30px; } .careers-general h3{ margin:0; font-size:20px; font-weight:800; } .careers-general p{ margin:6px 0 0; color:var(--fg2); } .gusto-note{ display:flex; align-items:center; gap:7px; justify-content:center; font-size:13px; color:var(--fg3); margin-top:22px; } @media (max-width:600px){ .role-row{ flex-direction:column; align-items:flex-start; gap:16px; } .role-actions{ width:100%; } .role-actions .btn{ width:100%; justify-content:center; } } /* ---------- Team ---------- */ .team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .team-card{ background:#fff; border:1px solid var(--border); border-radius:var(--card-radius); overflow:hidden; outline:none; box-shadow:0 1px 2px rgba(39,37,31,.05), 0 8px 24px -18px rgba(39,37,31,.18); transition:transform .16s ease, box-shadow .16s ease, border-color .16s; } .team-card:hover, .team-card:focus-within{ transform:translateY(-3px); box-shadow:0 2px 4px rgba(39,37,31,.06), 0 18px 36px -18px rgba(39,37,31,.32); border-color:var(--ls-gold-200); } .team-photo{ position:relative; aspect-ratio:1/1; overflow:hidden; background:linear-gradient(150deg,var(--ls-gray-700),var(--ls-gray-900)); } .team-ph-fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:42px; font-weight:900; color:rgba(255,255,255,.18); letter-spacing:.02em; } .team-photo .photo-slot{ border-radius:0; } .team-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block; z-index:1; } .team-syn{ position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, rgba(20,18,15,.82) 0%, rgba(20,18,15,.95) 100%); color:#fff; display:flex; flex-direction:column; justify-content:center; gap:16px; padding:22px 20px; opacity:0; transition:opacity .2s ease; } .team-card:hover .team-syn, .team-card:focus-within .team-syn{ opacity:1; } .team-syn p{ margin:0; font-size:15px; line-height:1.55; font-weight:400; color:#fff; } .team-syn-contacts{ display:flex; gap:8px; } .team-syn-contacts a{ width:36px; height:36px; border-radius:8px; background:rgba(255,255,255,.16); color:#fff; display:flex; align-items:center; justify-content:center; text-decoration:none; transition:background .15s; } .team-syn-contacts a:hover{ background:var(--ls-gold); color:#27251F; } .team-body{ padding:16px 18px 18px; } .team-body h3{ font-size:17px; font-weight:800; margin:0; letter-spacing:-.01em; } .team-title{ font-size:13px; font-weight:700; color:var(--ls-gold-600); margin:3px 0 0; } .team-contacts{ display:flex; gap:8px; margin-top:12px; } .team-contacts a{ width:32px; height:32px; border-radius:7px; background:var(--ls-gray-100); color:var(--ls-gray-700); display:flex; align-items:center; justify-content:center; text-decoration:none; transition:all .15s; } .team-contacts a:hover{ background:var(--ls-teal-100); color:var(--ls-teal-700); } @media (max-width:980px){ .team-grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width:680px){ .team-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:420px){ .team-grid{ grid-template-columns:1fr; } } .team-group-head{ display:flex; align-items:center; gap:10px; margin-bottom:18px; } .team-group-count{ font-size:12px; font-weight:800; color:var(--fg3); background:var(--ls-gray-100); border-radius:999px; padding:2px 9px; } /* ---------- Real photo media (case studies, project cards) ---------- */ .media{ position:relative; border-radius:var(--card-radius); overflow:hidden; background:var(--ls-gray-100); box-shadow:var(--shadow-md); } .real-photo{ width:100%; height:100%; object-fit:cover; display:block; } .gal-fig{ margin:0; } .gal-fig img{ aspect-ratio:3/2; } .gal-fig figcaption{ position:absolute; left:0; right:0; bottom:0; padding:18px 14px 10px; font-size:12px; font-weight:700; color:#fff; background:linear-gradient(180deg, transparent, rgba(39,37,31,.75)); } .proj-card .proj-photo{ aspect-ratio:3/2; overflow:hidden; background:var(--ls-gray-100); position:relative; } .proj-count{ position:absolute; right:10px; bottom:10px; display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:800; color:#fff; background:rgba(39,37,31,.72); padding:5px 9px; border-radius:999px; } button.proj-card{ font-family:inherit; text-align:left; cursor:pointer; padding:0; } .proj-card{ display:flex; flex-direction:column; height:100%; } .proj-card .pc-body{ display:flex; flex-direction:column; flex:1; } .proj-card h3{ min-height:0; } .proj-card .scope{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .proj-card .more{ margin-top:auto; padding-top:14px; } .proj-card .proj-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; } .proj-card:hover .proj-photo img{ transform:scale(1.04); } /* ---------- Inspiration gallery ---------- */ .gal-grid{ columns:4; column-gap:14px; } @media (max-width:1100px){ .gal-grid{ columns:3; } } @media (max-width:760px){ .gal-grid{ columns:2; } } @media (max-width:460px){ .gal-grid{ columns:1; } } .gal-item{ display:block; width:100%; border:0; padding:0; margin:0 0 14px; background:none; cursor:pointer; position:relative; border-radius:var(--card-radius); overflow:hidden; break-inside:avoid; box-shadow:0 1px 2px rgba(39,37,31,.06), 0 8px 20px -12px rgba(39,37,31,.22); } .gal-item img{ width:100%; display:block; transition:transform .3s ease; } .gal-item:hover img{ transform:scale(1.04); } .gal-meta{ position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; gap:2px; text-align:left; padding:26px 14px 12px; color:#fff; background:linear-gradient(180deg, transparent, rgba(39,37,31,.82)); opacity:0; transition:opacity .2s ease; } .gal-item:hover .gal-meta{ opacity:1; } .gal-meta b{ font-size:13px; font-weight:800; } .gal-meta em{ font-size:11.5px; font-style:normal; color:rgba(255,255,255,.82); } .lb-overlay{ position:fixed; inset:0; z-index:300; background:rgba(20,18,15,.94); display:flex; align-items:center; justify-content:center; padding:40px; animation:fade .18s ease; } .lb-fig{ margin:0; max-width:min(1100px,92vw); max-height:88vh; display:flex; flex-direction:column; } .lb-fig img{ max-width:100%; max-height:80vh; object-fit:contain; border-radius:6px; box-shadow:0 20px 60px rgba(0,0,0,.5); } .lb-fig figcaption{ color:#fff; font-size:14px; margin-top:14px; text-align:center; } .lb-fig figcaption b{ color:var(--ls-gold); } .lb-count{ color:rgba(255,255,255,.55); margin-left:10px; font-weight:700; } .lb-x{ position:absolute; top:20px; right:24px; background:rgba(255,255,255,.12); border:0; color:#fff; width:46px; height:46px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; } .lb-x:hover{ background:rgba(255,255,255,.22); } .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.1); border:0; color:#fff; width:54px; height:54px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; } .lb-nav:hover{ background:rgba(255,255,255,.22); } .lb-prev{ left:24px; } .lb-next{ right:24px; } @media (max-width:600px){ .lb-nav{ width:42px; height:42px; } .lb-prev{ left:8px; } .lb-next{ right:8px; } .lb-overlay{ padding:16px; } }