/* ============================================================ ISLAND LOCKERS — B2B Partner Site Civic-engineering / blueprint system (from the Partnership deck) Palettes switch via [data-palette] on . ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&display=swap'); :root{ /* Palette A — Civic Blueprint (default, matches the deck) */ --paper:#F4F2EC; --paper2:#EAE6DA; --ink:#0F1418; --ink-soft:#2C353D; --stone:#6A6F75; --rule:rgba(15,20,24,.14); --rule-strong:#1F2A33; --accent:#C44820; --accent-soft:rgba(196,72,32,.10); --blue:#1B4A6B; --gold:#E8A04A; --hero:#0E1E2D; --maxw:1240px; --pad:40px; --sans:"Geist","Helvetica Neue",Arial,sans-serif; --mono:"Geist Mono",ui-monospace,monospace; --serif:"Fraunces",Georgia,serif; } /* Palettes B (Adriatic) and C (Signal) were parked in palettes-alt.css. */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background-color:var(--paper); background-image: linear-gradient(to right,rgba(15,20,24,.045) 1px,transparent 1px), linear-gradient(to bottom,rgba(15,20,24,.045) 1px,transparent 1px); background-size:64px 64px; color:var(--ink); font-family:var(--sans); font-size:18px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{color:inherit;text-decoration:none} img{display:block;max-width:100%} ::selection{background:var(--accent);color:#fff} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)} .section{position:relative;padding:120px 0} .section + .section{border-top:1px solid var(--rule)} .eyebrow{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.22em; text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:12px} .eyebrow::before{content:"";width:22px;height:1px;background:var(--accent)} .kicker{font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone)} .lead{font-size:21px;line-height:1.55;color:var(--ink-soft);max-width:60ch} .lead strong{color:var(--ink);font-weight:600} h1,h2,h3,h4{font-family:var(--sans);font-weight:500;letter-spacing:-.035em;margin:0;color:var(--ink)} .serif-em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em} .accent{color:var(--accent)} .sec-tag{display:flex;justify-content:space-between;align-items:baseline; border-top:1px solid var(--rule-strong);padding-top:16px;margin-bottom:48px; font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)} .sec-tag .r{color:var(--stone)} /* ---------- NAV ---------- */ .nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 82%,transparent); backdrop-filter:blur(14px) saturate(1.1);border-bottom:1px solid var(--rule)} .nav-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);height:66px; display:flex;align-items:center;justify-content:space-between;gap:24px} .brand{font-weight:600;font-size:16px;letter-spacing:.26em;text-transform:uppercase; display:inline-flex;align-items:center;gap:11px} .brand .dot{width:9px;height:9px;background:var(--accent)} .nav-links{display:flex;gap:28px;align-items:center} .nav-links a{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-soft);padding:4px 0;border-bottom:1px solid transparent;transition:.2s} .nav-links a:hover{color:var(--ink);border-color:var(--accent)} /* About dropdown */ .nav-drop{position:relative;display:flex;align-items:center} .nav-drop-trigger::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px; border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.65} .nav-menu{position:absolute;top:100%;left:-16px;min-width:184px;background:var(--paper); border:1px solid var(--rule-strong);padding:8px 0;opacity:0;visibility:hidden;transform:translateY(6px); transition:.18s;box-shadow:0 18px 40px -22px rgba(15,20,24,.5);z-index:70} .nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{opacity:1;visibility:visible;transform:none} .nav-menu a{display:block;padding:10px 18px;border:0;border-left:2px solid transparent; font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)} .nav-menu a:hover{color:var(--ink);border-left-color:var(--accent);background:var(--accent-soft)} .nav-tools{display:flex;align-items:center;gap:14px} .btn{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase; display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border:1px solid var(--ink); background:var(--ink);color:var(--paper);cursor:pointer;transition:.2s} .btn:hover{background:var(--accent);border-color:var(--accent);color:#fff} .btn .arr{transition:transform .2s}.btn:hover .arr{transform:translateX(4px)} .btn.ghost{background:transparent;color:var(--ink)} .btn.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)} .btn.gold{background:var(--gold);border-color:var(--gold);color:#1a1407} .btn.gold:hover{background:#fff;border-color:#fff;color:var(--ink)} /* toggle groups (lang + palette) */ .seg{display:inline-flex;border:1px solid var(--rule-strong)} .seg button{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase; background:transparent;border:0;color:var(--stone);padding:7px 11px;cursor:pointer;transition:.18s} .seg button + button{border-left:1px solid var(--rule-strong)} .seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)} .swatch{display:inline-flex;align-items:center;gap:7px} .swatch i{width:11px;height:11px;border-radius:50%;display:inline-block} /* ---------- HERO ---------- */ .hero{position:relative;min-height:90vh;display:flex;background:var(--hero);color:#fff;overflow:hidden} .hero-photo{position:absolute;inset:0;background-size:cover;background-position:center 42%} .hero-ov{position:absolute;inset:0;background:linear-gradient(180deg, color-mix(in srgb,var(--hero) 55%,transparent) 0%, color-mix(in srgb,var(--hero) 12%,transparent) 26%, color-mix(in srgb,var(--hero) 30%,transparent) 60%, color-mix(in srgb,var(--hero) 88%,transparent) 100%)} .hero-grid{position:absolute;inset:0;pointer-events:none;opacity:.5;background-image: linear-gradient(to right,rgba(255,255,255,.06) 1px,transparent 1px), linear-gradient(to bottom,rgba(255,255,255,.06) 1px,transparent 1px);background-size:64px 64px} .hero-in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto; padding:var(--pad) var(--pad) 52px;display:flex;align-items:flex-end} .hero-ct,.hero-cb{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px; font-family:var(--mono);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.92)} .hero-ct{border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:20px} .hero-cb{border-top:1px solid rgba(255,255,255,.28);padding-top:22px} .hero-cb .g{color:var(--gold)} .hero-body{width:100%;display:flex;flex-direction:column;gap:26px;padding-top:80px} .hero-eyebrow{font-family:var(--mono);font-size:13.5px;letter-spacing:.22em;text-transform:uppercase; color:var(--gold);display:inline-flex;align-items:center;gap:12px} .hero-eyebrow::before{content:"";width:8px;height:8px;background:var(--gold)} .hero h1{font-size:clamp(44px,7.4vw,116px);line-height:.97;letter-spacing:-.04em;color:#fff;font-weight:500;max-width:17ch} .hero h1 .serif-em{color:var(--gold)} .hero-sub{font-family:var(--serif);font-style:italic;font-size:clamp(21px,2.4vw,32px);line-height:1.25; color:rgba(255,255,255,.95);max-width:34ch;margin:0} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px} .hero .btn{border-color:rgba(255,255,255,.4)} .chips{display:flex;gap:10px;flex-wrap:wrap} .chip{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase; border:1px solid rgba(255,255,255,.42);padding:8px 13px;color:#fff} /* ---------- generic blocks ---------- */ .two{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center} .stat-row{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:40px;border-top:1px solid var(--ink);padding-top:26px} .stat .l{font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)} .stat .v{font-size:clamp(52px,6.4vw,84px);line-height:1;letter-spacing:-.045em;margin:12px 0 10px;font-weight:500} .stat .p{font-size:15px;color:var(--ink-soft);margin:0} .title-xl{font-size:clamp(38px,5.6vw,72px);line-height:1.0;letter-spacing:-.035em} .title-lg{font-size:clamp(32px,4.6vw,56px);line-height:1.02;letter-spacing:-.03em} /* offer band */ .offer{background:var(--ink);color:var(--paper);background-image:none} .offer .sec-tag{border-color:rgba(255,255,255,.3);color:var(--paper)} .offer .sec-tag .r{color:rgba(255,255,255,.55)} .offer .eyebrow{color:var(--gold)} .offer .eyebrow::before{background:var(--gold)} .offer h2{color:#fff} .offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:56px} .ostat{border-top:1px solid rgba(255,255,255,.45);padding-top:22px} .ostat .l{font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)} .ostat .v{font-size:clamp(60px,8vw,104px);line-height:1;letter-spacing:-.05em;margin:14px 0 14px;color:#fff;font-weight:500} .ostat .p{font-size:16px;line-height:1.5;color:rgba(244,242,236,.78);margin:0} .ostat .p strong{color:#fff;font-weight:600} /* products */ .lockers{display:grid;grid-template-columns:repeat(3,1fr);gap:30px} .locker{border:1px solid var(--rule-strong);background:color-mix(in srgb,#fff 45%,transparent);display:flex;flex-direction:column} .locker .ph{aspect-ratio:4/3;position:relative;border-bottom:1px solid var(--rule-strong);overflow:hidden;background:var(--paper2)} .locker .ph img{width:100%;height:100%;object-fit:cover} .locker .ph .tag{position:absolute;left:14px;bottom:14px;font-family:var(--mono);font-size:11px;letter-spacing:.16em; text-transform:uppercase;background:var(--paper);border:1px solid var(--rule-strong);padding:7px 11px} .locker .bd{padding:24px 24px 0} .locker .ix{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)} .locker h4{font-size:30px;letter-spacing:-.03em;margin:10px 0 10px} .locker p{font-size:15.5px;line-height:1.45;color:var(--ink-soft);margin:0 0 22px} .locker .where{border-top:1px solid var(--rule-strong);padding:15px 24px;font-family:var(--mono);font-size:11.5px; letter-spacing:.1em;text-transform:uppercase;color:var(--stone);margin-top:auto} /* sectors */ .sectors{display:grid;grid-template-columns:repeat(2,1fr);gap:28px} .sector{border:1px solid var(--rule-strong);background:color-mix(in srgb,#fff 42%,transparent);padding:36px; display:flex;flex-direction:column;gap:16px;transition:.2s} .sector:hover{background:var(--accent-soft)} .sector .ix{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)} .sector h4{font-size:32px;letter-spacing:-.03em} .sector p{font-size:16px;line-height:1.5;color:var(--ink-soft);margin:0} .sector .fmt{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone); border-top:1px solid var(--rule);padding-top:14px;margin-top:6px} /* model split */ .split{display:grid;grid-template-columns:1fr 1fr;gap:30px} .side{border:1px solid var(--rule-strong);background:color-mix(in srgb,#fff 42%,transparent);padding:40px; display:flex;flex-direction:column;gap:20px} .side .role{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)} .side h3{font-size:36px;letter-spacing:-.03em} .side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px} .side li{font-size:16.5px;line-height:1.45;color:var(--ink-soft);padding-left:22px;position:relative} .side li::before{content:"";position:absolute;left:0;top:12px;width:12px;height:1px;background:var(--accent)} .side li strong{color:var(--ink);font-weight:600} .side .foot{margin-top:auto;border-top:1px solid var(--rule-strong);padding-top:16px;font-family:var(--mono); font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)} /* economics */ .eco{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center} .eco-rows{display:flex;flex-direction:column} .eco-row{display:grid;grid-template-columns:1fr auto;gap:24px;border-top:1px solid var(--rule-strong);padding:18px 0;align-items:baseline} .eco-row:last-child{border-bottom:1px solid var(--rule-strong)} .eco-row .k{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone)} .eco-row .v{font-size:28px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .eco-row .v .accent{font-weight:500} .bar{display:grid;grid-template-columns:85fr 15fr;height:74px;border:1px solid var(--ink)} .bar .o{background:var(--paper);border-right:1px solid var(--ink);display:flex;align-items:center;padding:0 20px; font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase} .bar .y{background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:24px} .bar-axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:var(--stone);margin-top:10px} /* roadmap */ .road{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:34px;padding-top:52px} .road::before{content:"";position:absolute;top:18px;left:6px;right:6px;height:1px;background:var(--ink)} .rstep{position:relative;padding-top:36px} .rstep::before{content:"";position:absolute;top:12px;left:0;width:13px;height:13px;background:var(--accent); outline:1px solid var(--accent);outline-offset:3px} .rstep .yr{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px} .rstep h4{font-size:27px;letter-spacing:-.03em;margin-bottom:12px} .rstep p{font-size:15.5px;line-height:1.45;color:var(--ink-soft);margin:0} /* partners */ .logos{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .logo{border:1px solid var(--rule-strong);background:color-mix(in srgb,#fff 42%,transparent);padding:28px; display:flex;flex-direction:column;gap:10px;min-height:188px} .logo .r{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)} .logo .n{font-size:26px;letter-spacing:-.02em;font-weight:500;margin-top:2px} .logo .d{font-size:13.5px;line-height:1.4;color:var(--ink-soft);margin-top:auto} /* CTA / contact */ .cta{position:relative;background:var(--hero);color:#fff;overflow:hidden;background-image:none} .cta-photo{position:absolute;inset:0;background-size:cover;background-position:center 38%} .cta-ov{position:absolute;inset:0;background:linear-gradient(180deg, color-mix(in srgb,var(--hero) 62%,transparent),color-mix(in srgb,var(--hero) 90%,transparent))} .cta-in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:110px var(--pad)} .cta .eyebrow{color:var(--gold)} .cta .eyebrow::before{background:var(--gold)} .cta h2{color:#fff;font-size:clamp(40px,6.4vw,92px);line-height:.99;letter-spacing:-.04em;margin:20px 0 16px} .cta h2 .serif-em{color:var(--gold)} .cta .sub{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.2vw,28px);color:rgba(255,255,255,.92);max-width:38ch;margin:0 0 38px} .cta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;border-top:1px solid rgba(255,255,255,.3);padding-top:32px} .cta-grid .l{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:9px} .cta-grid .v{font-family:var(--serif);font-style:italic;font-size:23px;line-height:1.3} .cta-btns{margin-top:42px;display:flex;gap:14px;flex-wrap:wrap} .cta .btn{border-color:rgba(255,255,255,.4)} /* footer */ .foot{background:var(--ink);color:rgba(244,242,236,.7);background-image:none;padding:36px 0} .foot-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:flex;justify-content:space-between; gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase} .foot-in .g{color:var(--gold)} /* reveal */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* responsive */ @media (max-width:1024px){ .two,.eco{grid-template-columns:1fr;gap:44px} .offer-grid{gap:32px} } @media (max-width:860px){ :root{--pad:22px} .section{padding:80px 0} .nav-links{display:none} .nav-tools .btn{display:none} .nav-burger{display:flex} .lockers,.sectors,.offer-grid,.road,.split,.cta-grid,.logos{grid-template-columns:1fr} .road::before{display:none} .hero{min-height:86vh} .hero-body{padding-top:48px} .hero-in{padding-bottom:40px} .nav-tools .seg.palettes{display:none} } @media (max-width:520px){ body{font-size:16px} .stat-row{grid-template-columns:1fr} } /* ---------- HAMBURGER ---------- */ .nav-burger{display:none;flex-direction:column;justify-content:center;gap:5.5px; background:none;border:none;cursor:pointer;padding:8px;width:38px;height:38px;margin-left:4px} .nav-burger span{display:block;width:22px;height:1.5px;background:var(--ink);transition:.25s} /* ---------- MOBILE NAV PANEL ---------- */ .nav-mobile{position:fixed;inset:0;z-index:100;background:var(--paper); display:flex;flex-direction:column;padding:0 var(--pad) 40px; transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)} .nav-mobile.open{transform:translateX(0)} .nav-mobile-top{display:flex;justify-content:space-between;align-items:center; height:66px;border-bottom:1px solid var(--rule);flex-shrink:0} .nav-mobile-logo{font-weight:600;font-size:14px;letter-spacing:.22em;text-transform:uppercase; display:inline-flex;align-items:center;gap:10px;color:var(--ink)} .nav-mobile-logo .dot{width:9px;height:9px;background:var(--accent);flex-shrink:0} .nav-mobile-close{background:none;border:1px solid var(--rule-strong);cursor:pointer; width:36px;height:36px;display:flex;align-items:center;justify-content:center; font-size:16px;color:var(--ink)} .nav-mobile-links{display:flex;flex-direction:column;flex:1;overflow-y:auto;padding-top:4px} .nav-mobile-links a{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-soft);padding:20px 0;border-bottom:1px solid var(--rule);transition:.15s} .nav-mobile-links a:hover{color:var(--ink)} .nav-mobile-bottom{display:flex;flex-direction:column;gap:14px;padding-top:24px;flex-shrink:0} .nav-mobile-bottom .btn{width:100%;justify-content:center}