/* Better LBC — shared site styles. Used by index.html, news.html, and all pillar pages. Typography: an editorial/data-desk pairing instead of the generic "chunky slab + rounded sans" template look — Newsreader (a clean, conventional serif built for reading; does double duty as display face and pull-quote face — swapped in for Fraunces, whose swashy "f" read as broken at display sizes) + IBM Plex Sans (body — has more institutional/ civic personality than a default geometric sans) + IBM Plex Mono (kickers, labels, source citations — reads as "data annotation," reinforcing that this is a data-driven site). Brand colors below are unchanged from the logo — only the type system, layout rhythm, and copy density are new. */ :root{ --sky1:#4FE0D3; --sky2:#1C7FD6; --sky3:#0E3E8C; --wave1:#2C86CF; --wave2:#145FBD; --wave3:#0B3D82; --gold:#FFC155; --orange:#F0924A; --ink:#0A2A57; --paper:#F5FAFC; --white:#FFFFFF; --font-display:'Newsreader', Georgia, serif; --font-body:'IBM Plex Sans', Arial, sans-serif; --font-mono:'IBM Plex Mono', 'Courier New', monospace; /* Reserved for actual instances of the "BETTER LBC" / "BETTER LONG BEACH" wordmark (nav logo, footer, homepage hero) — matches the logo graphic. Everything else (page titles, section headings) uses --font-display. */ --font-logo:'Alfa Slab One', cursive; } *{box-sizing:border-box;margin:0;padding:0;} html{ scroll-behavior:smooth; /* overflow-x:hidden on body alone doesn't stop the outer viewport from panning on mobile — the element is the one that actually scrolls, so it needs the same clip, or a sideways swipe can drag the whole page off-screen and rubber-band back. overscroll-behavior-x stops that same swipe from triggering the browser's native bounce/back-navigation gesture. */ overflow-x:hidden; overscroll-behavior-x:none; width:100%; } body{ font-family:var(--font-body); color:var(--ink); background:var(--paper); line-height:1.65; overflow-x:hidden; overscroll-behavior-x:none; width:100%; position:relative; } a{color:inherit;text-decoration:none;} .wrap{max-width:1120px;margin:0 auto;padding:0 24px;} img,svg{display:block;max-width:100%;} .display{font-family:var(--font-display);font-weight:600;} /* reveal-on-scroll — reserved for hero/stat moments now, not applied to every paragraph on the page (that uniform fade-up-on-everything is one of the things that makes a site read as templated). */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease;} .reveal.in{opacity:1;transform:translateY(0);} .reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;} .reveal.d4{transition-delay:.32s;} /* Kicker — small mono uppercase label, used in place of the old rounded-pill "eyebrow" for a data-annotation/masthead feel rather than a SaaS-badge feel. */ .kicker{ font-family:var(--font-mono);font-weight:600; text-transform:uppercase;letter-spacing:1.5px;font-size:12.5px; } /* Lede — a short, larger-than-body opening line. Meant to carry the whole point of a section in one sentence; anything longer belongs in a .disclosure below it, not stacked on top of it. */ .lede{ font-family:var(--font-display);font-weight:500;font-style:italic; font-size:clamp(19px,2.4vw,24px);line-height:1.45; } /* Disclosure — native
/, zero JS. Used to move "why this matters" / methodology-level context out of the main reading path so a page can be skimmed in seconds and read in full only on request — the opposite of the wall-of-paragraphs pattern. */ details.disclosure{ max-width:640px;margin:18px auto 0; background:rgba(10,42,87,0.04);border-radius:2px; padding:4px 22px; } details.disclosure summary{ cursor:pointer;list-style:none;padding:14px 0; font-family:var(--font-body);font-weight:700;font-size:13.5px; display:flex;align-items:center;gap:8px; } details.disclosure summary::-webkit-details-marker{display:none;} details.disclosure summary::before{ content:'+';display:inline-flex;align-items:center;justify-content:center; width:18px;height:18px;border-radius:50%;background:var(--wave2);color:var(--white); font-size:13px;font-weight:800;flex-shrink:0;transition:transform .2s ease; } details.disclosure[open] summary::before{content:'\2212';} details.disclosure .disclosure-body{ padding:0 0 20px;font-size:14px;line-height:1.6;color:rgba(10,42,87,0.78); } .section-dark details.disclosure{background:rgba(255,255,255,0.08);} .section-dark details.disclosure .disclosure-body{color:rgba(255,255,255,0.82);} /* Header */ header{ position:fixed;top:0;left:0;right:0;z-index:100; padding:18px 0; transition:background .3s ease, padding .3s ease, box-shadow .3s ease; } header.scrolled{ background:rgba(245,250,252,0.92); backdrop-filter:blur(10px); padding:10px 0; box-shadow:0 4px 24px rgba(10,42,87,0.08); } .nav{ display:flex;align-items:center;justify-content:space-between; max-width:1120px;margin:0 auto;padding:0 24px; } .logo{font-family:var(--font-logo);font-size:19px;color:var(--white);letter-spacing:.3px;transition:color .3s ease;} .logo .lbc{color:var(--gold);} header.scrolled .logo{color:var(--ink);} header.scrolled .logo .lbc{color:var(--gold);} nav.links{display:flex;align-items:center;gap:28px;font-weight:600;font-size:14px;} nav.links a.navlink{color:var(--white);opacity:.9;transition:opacity .2s ease,color .3s ease;} header.scrolled nav.links a.navlink{color:var(--ink);} nav.links a.navlink:hover{opacity:1;} .nav-cta{ background:var(--gold);color:var(--ink)!important; padding:10px 20px;border-radius:3px;font-weight:700;font-size:13.5px; transition:background .15s ease, color .15s ease; } .nav-cta:hover{background:var(--ink);color:var(--gold)!important;} .nav-toggle{display:none;background:none;border:none;font-size:24px;cursor:pointer;color:var(--white);} header.scrolled .nav-toggle{color:var(--ink);} /* Mobile nav backdrop — dims the page and gives a click-outside-to-close target */ .nav-backdrop{ position:fixed;inset:0; background:rgba(6,18,38,0.55); opacity:0;visibility:hidden; transition:opacity .3s ease, visibility .3s ease; z-index:5; } .nav-backdrop.open{opacity:1;visibility:visible;} body.nav-open{overflow:hidden;} /* Pillars dropdown nav */ .navdrop{position:relative;} /* Invisible hover bridge: fills the gap between the trigger and the floating panel below it (top:calc(100% + 20px)) so moving the mouse straight down doesn't leave .navdrop and cancel the hover-open state before it reaches the panel. Always present (not tied to the panel's own visibility), so hover works without needing a click first. */ .navdrop::after{ content:'';position:absolute;top:100%;left:50%; transform:translateX(-50%); width:260px;height:20px; } .navdrop-trigger{ background:none;border:none;cursor:pointer; font:inherit;color:var(--white);opacity:.9; display:flex;align-items:center;gap:5px;padding:0; transition:opacity .2s ease,color .3s ease; } header.scrolled .navdrop-trigger{color:var(--ink);} .navdrop-trigger:hover{opacity:1;} .navdrop-trigger .caret{font-size:10px;transition:transform .2s ease;} .navdrop.open .navdrop-trigger .caret{transform:rotate(180deg);} .navdrop-panel{ position:absolute;top:calc(100% + 20px);left:50%; transform:translateX(-50%) translateY(8px); background:var(--white);border-radius:6px; border:1px solid rgba(10,42,87,0.1); box-shadow:0 12px 28px rgba(10,42,87,0.14); padding:10px;min-width:230px; display:grid;gap:2px; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .18s ease, transform .18s ease, visibility .18s ease; z-index:200; } .navdrop.open .navdrop-panel, .navdrop:hover .navdrop-panel{ opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0); } .navdrop-link{ display:flex;align-items:center;gap:11px; padding:10px 14px;border-radius:10px; font-size:14px;font-weight:600;color:var(--ink)!important; transition:background .15s ease; } .navdrop-link:hover{background:var(--paper);} .navdrop-link .ndi{font-size:17px;width:20px;text-align:center;} .navdrop-link .ndsoon{margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:rgba(10,42,87,0.4);} @media (max-width:800px){ nav.links{ position:fixed;top:0;right:0;height:100vh;width:78vw;max-width:320px;box-sizing:border-box; background:var(--sky3);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch; flex-direction:column;align-items:flex-start;justify-content:flex-start; gap:22px;padding:110px 32px 40px; transform:translateX(100%);transition:transform .3s ease; z-index:10; } nav.links.open{transform:translateX(0);} nav.links a.navlink{color:var(--white)!important;font-size:18px;} .nav-toggle{display:block;position:relative;z-index:20;} .navdrop{position:static;width:100%;} .navdrop::after{content:none;} .navdrop-trigger{width:100%;justify-content:space-between;color:var(--white)!important;font-size:18px;opacity:1;} .navdrop-panel{ position:static;left:auto;top:auto;transform:none;opacity:1;visibility:visible;pointer-events:auto; width:100%;box-sizing:border-box;box-shadow:none;background:rgba(255,255,255,0.08); max-height:0;overflow:hidden;padding:0 0 0 8px;margin-top:0;min-width:0;display:block; transition:max-height .25s ease, padding .25s ease, margin .25s ease; } .navdrop.open .navdrop-panel{max-height:320px;padding:8px 0 0 8px;margin-top:12px;transform:none;} .navdrop-link{color:var(--white)!important;font-size:15px;padding:9px 8px;display:flex;width:100%;box-sizing:border-box;} .navdrop-link:hover{background:rgba(255,255,255,0.1);} .navdrop-link .ndsoon{color:rgba(255,255,255,0.5);} } /* Hero */ .hero{ position:relative; background:linear-gradient(135deg, var(--sky1) 0%, var(--sky2) 55%, var(--sky3) 100%); color:var(--white); padding:170px 0 40px; text-align:left; overflow:hidden; } /* Hero mark — a flat sun disc with a ring, not a blurred gradient glow orb (that soft-glow-behind-a-circle trick is one of the most recognizable generic "AI hero decoration" moves). */ .sun-cluster{position:absolute;top:95px;right:8%;width:230px;height:230px;} .sun{ position:absolute;top:30px;left:30px;width:190px;height:190px;border-radius:50%; background:var(--gold); } .sun::after{ content:'';position:absolute;inset:-18px;border-radius:50%; border:1.5px solid rgba(255,255,255,0.4); } .dot-cluster{position:absolute;top:130px;left:9%;width:110px;height:110px;} .dot{position:absolute;border-radius:50%;background:var(--orange);} .dot-big{width:58px;height:58px;top:40px;left:0;} .dot-small{width:34px;height:34px;top:0;left:44px;} .hero-inner{position:relative;z-index:2;max-width:1120px;margin:0 auto;padding:0 24px;} .hero-inner .hero-copy{max-width:660px;} .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-family:var(--font-mono);font-weight:600; font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase; margin-bottom:26px; } .eyebrow::before{content:'';width:26px;height:2px;background:var(--gold);flex-shrink:0;} .hero h1{ font-family:var(--font-logo); font-size:clamp(42px,8vw,84px); line-height:1.05; margin-bottom:22px; } .hero p.tagline{font-size:clamp(18px,2.4vw,25px);font-weight:600;max-width:560px;margin:0 0 14px;} .hero p.sub{font-size:clamp(18px,2.4vw,25px);font-weight:600;opacity:.96;max-width:560px;margin:0 0 34px;} .cta-row{display:flex;gap:16px;justify-content:flex-start;flex-wrap:wrap;margin-bottom:70px;} /* Buttons — a sharp-cornered rectangle with a hard color-invert on hover, not the generic pill-that-floats-up-with-a-shadow every template uses. */ .btn{ display:inline-block;padding:14px 28px;border-radius:3px; font-weight:700;font-size:15px;transition:background .15s ease, color .15s ease, border-color .15s ease; border:2px solid transparent;cursor:pointer; } .btn-primary{background:var(--gold);color:var(--ink);border-color:var(--gold);} .btn-primary:hover{background:var(--ink);color:var(--gold);border-color:var(--ink);} .btn-outline{border:2px solid rgba(255,255,255,0.85);color:var(--white);} .btn-outline:hover{background:var(--white);color:var(--sky3);} .scroll-cue{display:inline-block;margin-bottom:10px;animation:bounce 2s infinite;font-size:22px;opacity:.85;position:relative;z-index:2;} @keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(10px);}} .wave-divider{position:relative;line-height:0;width:100%;margin-top:-2px;} .wave-divider svg{width:100%;height:auto;display:block;} /* Stats */ .stats{background:var(--wave3);color:var(--white);padding:70px 24px 84px;} .stats-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:36px;max-width:1000px;margin:0 auto;text-align:center; } .stat-num{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,4.5vw,50px);color:var(--gold);} .stat-label{font-size:14px;font-weight:500;opacity:.88;margin-top:6px;max-width:220px;margin-left:auto;margin-right:auto;} .stats-note{text-align:center;font-size:12.5px;opacity:.65;max-width:560px;margin:36px auto 0;} /* Stat ledger — a left-aligned, tabular "spec sheet" list instead of a grid of identical rounded cards. Reads as a data annotation, not a SaaS feature grid; the index numbers do the job the icon usually does. */ .stat-ledger{max-width:900px;margin:0 auto;} .stat-row{ display:grid;grid-template-columns:44px minmax(120px,auto) 1fr; align-items:baseline;gap:20px; padding:22px 0;border-bottom:1px solid rgba(255,255,255,0.14); } .stat-row:first-child{border-top:1px solid rgba(255,255,255,0.14);} .stat-row-index{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--gold);opacity:.8;} .stat-row-num{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,4vw,42px);color:var(--gold);line-height:1;} .stat-row-label{font-size:14.5px;font-weight:500;opacity:.85;max-width:440px;} @media (max-width:640px){ .stat-row{grid-template-columns:1fr;gap:6px;padding:20px 0;} .stat-row-index{display:none;} } /* Section headings */ .section{padding:100px 24px;position:relative;} .section-label{ font-family:var(--font-mono); text-transform:uppercase;letter-spacing:1.5px;font-size:12.5px;font-weight:600; color:var(--wave2);margin-bottom:12px;text-align:center; } .section-title{ font-family:var(--font-display);font-weight:600; font-size:clamp(28px,4.5vw,44px); text-align:center;max-width:760px;margin:0 auto 18px;line-height:1.15; } .section-sub{text-align:center;max-width:600px;margin:0 auto 60px;color:rgba(10,42,87,0.7);font-size:16px;} /* Pillars */ .pillars-section{background:var(--paper);} .pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;} .pillar-card{ background:var(--white);border-radius:22px;padding:34px 26px; box-shadow:0 10px 30px rgba(10,42,87,0.08); border-top:6px solid var(--wave2); transition:transform .25s ease, box-shadow .25s ease; display:block; } .pillar-card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(10,42,87,0.14);} .pillar-card:nth-child(1){border-top-color:var(--orange);} .pillar-card:nth-child(2){border-top-color:var(--gold);} .pillar-card:nth-child(3){border-top-color:var(--sky3);} .pillar-card:nth-child(4){border-top-color:var(--wave2);} .pillar-icon{ font-size:30px;margin-bottom:16px;width:58px;height:58px;border-radius:16px; display:flex;align-items:center;justify-content:center;background:var(--paper); } .pillar-card h3{font-size:19px;font-weight:800;margin-bottom:10px;} .pillar-card p{font-size:14.5px;color:rgba(10,42,87,0.72);} .pillar-card .pillar-link{ display:inline-flex;align-items:center;gap:5px;margin-top:14px; font-size:13px;font-weight:800;color:var(--wave2); } .pillar-card .pillar-soon{ display:inline-block;margin-top:14px;font-size:11px;font-weight:800; letter-spacing:.4px;text-transform:uppercase;color:rgba(10,42,87,0.4); } /* Pillar directory — a table-of-contents-style list instead of a grid of identical rounded cards with colored top-borders (the single most recognizable "AI landing page" component). Index numbers replace icons. */ .pillar-list{max-width:860px;margin:0 auto;border-top:1px solid rgba(10,42,87,0.12);} .pillar-row{ display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:24px; padding:30px 10px;border-bottom:1px solid rgba(10,42,87,0.12); transition:background .2s ease; } a.pillar-row{color:inherit;} a.pillar-row:hover{background:rgba(10,42,87,0.035);} .pillar-row-index{font-family:var(--font-mono);font-weight:700;font-size:14px;color:var(--wave2);} .pillar-row h3{font-family:var(--font-display);font-weight:600;font-size:21px;margin-bottom:5px;} .pillar-row p{font-size:14px;color:rgba(10,42,87,0.68);} .pillar-row-status{font-size:12.5px;font-weight:800;letter-spacing:.3px;white-space:nowrap;} .pillar-row-status.live{color:var(--wave2);} .pillar-row-status.soon{color:rgba(10,42,87,0.4);text-transform:uppercase;letter-spacing:.5px;font-size:11px;} @media (max-width:640px){ .pillar-row{grid-template-columns:32px 1fr;} .pillar-row-status{grid-column:2;margin-top:2px;} } /* Report card */ .reportcard{background:linear-gradient(135deg, var(--sky3) 0%, var(--wave3) 100%);color:var(--white);} .reportcard .section-label{color:var(--gold);} .reportcard .section-title{color:var(--white);} .reportcard .section-sub{color:rgba(255,255,255,0.75);} .rc-inner{ max-width:740px;margin:0 auto;background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.18);border-radius:26px; padding:50px 42px;text-align:center; } .rc-badge{ display:inline-block;background:var(--gold);color:var(--ink); font-weight:800;font-size:13px;letter-spacing:1px;text-transform:uppercase; padding:9px 20px;border-radius:999px;margin-bottom:24px; } .rc-grades{display:flex;justify-content:center;gap:14px;margin-top:32px;flex-wrap:wrap;} .grade-chip{ width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-size:20px; background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.22); transition:transform .2s ease, background .2s ease; } .grade-chip:hover{transform:translateY(-4px) scale(1.05);background:rgba(255,193,85,0.25);} /* Generic loading/status placeholder — reused across map fallbacks, breakdown lists, etc. (not specific to any one feature) */ .news-status{text-align:center;font-size:14px;color:rgba(10,42,87,0.6);padding:30px 0;grid-column:1/-1;} /* Founder story */ .story-section{background:var(--paper);} .story-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:56px;align-items:center;max-width:1000px;margin:0 auto;} @media (max-width:800px){.story-grid{grid-template-columns:1fr;}} .avatar{ width:180px;height:180px;border-radius:50%;margin:0 auto; background:linear-gradient(135deg, var(--sky1), var(--sky3)); display:flex;align-items:center;justify-content:center;overflow:hidden; font-family:var(--font-display);font-size:56px;color:var(--white); border:3px solid var(--white);box-shadow:0 0 0 1.5px rgba(10,42,87,0.14); } .avatar img{width:100%;height:100%;object-fit:cover;} .story-name{text-align:center;margin-top:18px;font-weight:800;font-size:15px;} .story-role{text-align:center;font-size:13px;color:rgba(10,42,87,0.6);} blockquote{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:clamp(20px,2.6vw,27px);line-height:1.45;position:relative;padding-left:34px;} blockquote::before{ content:"\201C";font-family:var(--font-display);font-size:70px;color:var(--gold); position:absolute;left:-14px;top:-24px; } blockquote .edit-note{display:block;margin-top:22px;font-size:13px;font-weight:500;color:rgba(10,42,87,0.55);font-style:italic;} /* Values strip */ .values-strip{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;max-width:900px;margin:70px auto 0;} .value-pill{ background:var(--white);padding:14px 22px;border-radius:14px; box-shadow:0 6px 18px rgba(10,42,87,0.07); font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:8px; } .value-pill .dot-sm{width:9px;height:9px;border-radius:50%;background:var(--wave2);} /* Contact */ .contact{background:linear-gradient(135deg, var(--gold) 0%, var(--orange) 100%);text-align:center;color:var(--ink);} .contact .section-title{color:var(--ink);} .contact-email{display:inline-block;font-size:22px;font-weight:800;margin-bottom:30px;border-bottom:3px solid var(--ink);} .social-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;} .social-row a{ background:var(--ink);color:var(--white);border:2px solid var(--ink); padding:11px 22px;border-radius:3px;font-weight:700;font-size:14px; transition:background .15s ease, color .15s ease; } .social-row a:hover{background:transparent;color:var(--ink);} footer{background:var(--sky3);color:var(--white);text-align:center;padding:40px 24px 30px;} footer .flogo{font-family:var(--font-logo);font-size:18px;margin-bottom:8px;} footer .flogo .lbc{color:var(--gold);} footer .fmeta{font-size:13px;opacity:.75;} /* ---- Subpage (pillar deep-dive) styles ---- */ .page-hero{ position:relative;overflow:hidden; background:linear-gradient(135deg, var(--sky1) 0%, var(--sky2) 55%, var(--sky3) 100%); color:var(--white);padding:150px 0 90px;text-align:left; } .page-hero-copy{position:relative;z-index:2;max-width:640px;} .page-hero .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-family:var(--font-mono);font-weight:600; font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase; margin-bottom:22px; } .page-hero .eyebrow::before{content:'';width:26px;height:2px;background:var(--gold);flex-shrink:0;} .page-hero h1{ font-family:var(--font-display);font-weight:700; font-size:clamp(34px,6vw,58px);letter-spacing:-0.01em; line-height:1.08; margin-bottom:16px; } .page-hero p{font-size:clamp(16px,2vw,19px);font-weight:500;opacity:.95;max-width:560px;margin:0;} .back-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--wave2);margin-bottom:36px;} /* pillar quick-switch strip */ .pillar-switch{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start;margin-top:30px;position:relative;z-index:2;} .pillar-switch a, .pillar-switch span{ display:inline-flex;align-items:center;gap:7px; background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.3); padding:8px 16px;border-radius:999px;font-size:13px;font-weight:700;color:var(--white); } .pillar-switch a:hover{background:rgba(255,255,255,0.26);} .pillar-switch .active{background:var(--gold);color:var(--ink);border-color:var(--gold);} .pillar-switch span.disabled{opacity:.55;} /* live stat block — sharp corner, hairline border, small hard offset shadow instead of a big soft blurred one. This is the "featured number" treatment, reserved for the single headline stat per page. */ .stat-block{ background:var(--white);border-radius:3px;padding:44px; border:1.5px solid rgba(10,42,87,0.14); box-shadow:6px 6px 0 rgba(10,42,87,0.08); text-align:center;max-width:520px;margin:0 auto; } .stat-block .stat-num{color:var(--sky3);font-size:clamp(48px,7vw,72px);} .stat-block .stat-label{color:rgba(10,42,87,0.68);font-size:15px;margin-top:8px;max-width:100%;} .stat-block .stat-tag{ display:inline-block;margin-bottom:16px;background:var(--paper);color:var(--wave2); font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase; padding:6px 14px;border-radius:999px; } /* breakdown bars */ .breakdown-list{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:16px;} .breakdown-row{display:grid;grid-template-columns:170px 1fr auto;align-items:center;gap:14px;} @media (max-width:640px){.breakdown-row{grid-template-columns:1fr;gap:6px;}} .breakdown-name{font-size:14px;font-weight:700;} .breakdown-track{background:rgba(10,42,87,0.08);border-radius:999px;height:14px;overflow:hidden;} .breakdown-fill{ height:100%;border-radius:999px; background:linear-gradient(90deg, var(--wave2), var(--sky1)); width:0%;transition:width 1.1s cubic-bezier(.22,.9,.3,1); } .breakdown-meta{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap;} @media (max-width:640px){.breakdown-meta{justify-content:flex-start;}} .breakdown-count{font-size:14px;font-weight:800;text-align:right;color:var(--wave2);white-space:nowrap;} /* year-over-year delta badges */ .delta-badge{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap;} .delta-up{background:rgba(196,61,31,0.12);color:#C43D1F;} .delta-down{background:rgba(30,158,107,0.12);color:#1E9E6B;} .delta-flat{background:rgba(10,42,87,0.08);color:rgba(10,42,87,0.55);} /* multi-series year trend bars */ .trend-chart{display:flex;align-items:flex-end;gap:20px;max-width:560px;margin:0 auto;height:210px;padding-top:28px;overflow-x:auto;} .trend-year-group{flex:1;min-width:74px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;} .trend-bars-row{display:flex;align-items:flex-end;gap:7px;height:170px;} .trend-bar-mini{ width:22px;border-radius:5px 5px 2px 2px;height:0%;position:relative;overflow:hidden; transition:height 1.1s cubic-bezier(.22,.9,.3,1), transform .15s ease, box-shadow .15s ease; cursor:pointer; } .trend-bar-mini:hover{transform:scaleX(1.12);} .trend-bar-mini.selected{box-shadow:0 0 0 2px var(--white);transform:scaleX(1.12);} .trend-bar-mini .tbs-forecast{ position:absolute;top:0;left:0;right:0;height:0%; background:rgba(255,255,255,0.32);border-bottom:1px dashed rgba(255,255,255,0.65); transition:height 1.1s cubic-bezier(.22,.9,.3,1); } .trend-bar-mini .tbm-value{ position:absolute;top:-17px;left:50%;transform:translateX(-50%); font-size:8.5px;font-weight:800;white-space:nowrap;color:rgba(255,255,255,0.85); } .trend-year{font-size:12.5px;font-weight:700;color:rgba(10,42,87,0.6);} .trend-detail{ text-align:center;font-size:13.5px;font-weight:700;color:rgba(255,255,255,0.92); min-height:1.4em;margin-top:20px; } .trend-legend{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:14px;font-size:12.5px;font-weight:700;color:rgba(255,255,255,0.85);} .trend-legend .tl-item{display:flex;align-items:center;gap:7px;} .trend-legend .tl-swatch{width:12px;height:12px;border-radius:4px;flex-shrink:0;} .trend-legend .tl-swatch-forecast{background:rgba(255,255,255,0.32);border:1px dashed rgba(255,255,255,0.6);} .trend-note{text-align:center;font-size:12.5px;color:rgba(10,42,87,0.55);max-width:520px;margin:22px auto 0;} /* callout box — flat, left-accent bar, no shadow. This one was already right (a flat note, not a floating card); just sharpened the corner. */ .callout-box{ max-width:720px;margin:0 auto;background:var(--paper); border-left:5px solid var(--wave2);border-radius:2px; padding:26px 30px;font-size:14.5px;color:rgba(10,42,87,0.85); } .callout-box strong{color:var(--ink);} /* watch-list cards — flat, hairline border, no shadow */ .watch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;max-width:920px;margin:0 auto;} .watch-card{background:var(--white);border-radius:3px;border:1.5px solid rgba(10,42,87,0.12);padding:26px 24px;} .watch-card h4{font-size:15.5px;font-weight:800;margin-bottom:8px;} .watch-card p{font-size:13.5px;color:rgba(10,42,87,0.68);} /* source list — flat rows, hairline border, no shadow; hover shifts the arrow instead of lifting the whole row */ .source-list{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:8px;} .source-list a{ display:flex;align-items:center;justify-content:space-between;gap:10px; background:var(--white);border:1.5px solid rgba(10,42,87,0.12); padding:14px 20px;border-radius:2px;font-size:14px;font-weight:700;color:var(--wave2); transition:border-color .15s ease; } .source-list a:hover{border-color:var(--wave2);} .source-list a span.arrow{opacity:.6;transition:transform .15s ease;} .source-list a:hover span.arrow{transform:translate(2px,-2px);} /* Interactive crime map */ /* position+z-index here (rather than just a high z-index on the dropdown) forces this into its own, lower stacking context than .map-toolbar below, so nothing inside Leaflet's own internal panes can ever paint over the search suggestions, regardless of Leaflet's internal z-index values. */ .map-wrap{position:relative;z-index:1;max-width:900px;margin:0 auto;border-radius:3px;overflow:hidden;border:1.5px solid rgba(10,42,87,0.14);} #crimeMap{height:480px;width:100%;background:var(--paper);} .map-legend{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px;font-size:12.5px;font-weight:700;color:rgba(10,42,87,0.6);flex-wrap:wrap;} .map-legend-scale{display:flex;height:14px;width:180px;border-radius:999px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(10,42,87,0.1);} .map-legend-scale span{flex:1;} #mapLegendFilterNote{color:var(--wave2);font-weight:800;} .leaflet-popup-content{font-family:var(--font-body);font-size:13px;color:var(--ink);} /* Map toolbar: filters + search */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} .map-toolbar{ position:relative;z-index:10; /* sits in its own stacking context, above .map-wrap (z-index:1) */ max-width:900px;margin:0 auto 8px;display:flex;flex-wrap:wrap; align-items:flex-end;justify-content:space-between;gap:18px 24px; } .map-filters{display:flex;flex-wrap:wrap;gap:16px;} .filter-group{display:flex;flex-direction:column;gap:6px;} .filter-group label{font-size:11.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:rgba(10,42,87,0.55);} .filter-group select{ font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--ink); background:var(--white);border:1.5px solid rgba(10,42,87,0.15);border-radius:3px; padding:10px 14px;min-width:190px;cursor:pointer; } .filter-group select:disabled{opacity:.5;cursor:not-allowed;} .map-search{position:relative;display:flex;gap:8px;flex:1;min-width:260px;max-width:420px;} .map-search-input-wrap{position:relative;flex:1;display:flex;} .map-search input{ flex:1;font-family:var(--font-body);font-size:13.5px; border:1.5px solid rgba(10,42,87,0.15);border-radius:3px; padding:10px 34px 10px 14px;color:var(--ink); } .map-search input:focus{outline:2px solid var(--wave2);outline-offset:1px;} .map-search-clear{ display:none;position:absolute;right:7px;top:50%;transform:translateY(-50%); width:22px;height:22px;border:none;border-radius:50%;background:rgba(10,42,87,0.12); color:var(--ink);font-size:14px;line-height:1;cursor:pointer;align-items:center;justify-content:center;padding:0; } .map-search-clear.visible{display:flex;} .map-search-clear:hover{background:rgba(10,42,87,0.22);} .map-search .btn{padding:10px 20px;font-size:13.5px;white-space:nowrap;} .map-suggestions{ display:none;position:absolute;top:calc(100% + 6px);left:0;right:0; background:var(--white);border-radius:6px;border:1px solid rgba(10,42,87,0.1); box-shadow:0 10px 24px rgba(10,42,87,0.14); overflow:hidden;z-index:5000; /* must clear Leaflet's internal panes (tiles/markers/popups run up to ~700) */ } .map-suggestion{ display:block;width:100%;text-align:left;background:none;border:none; padding:11px 16px;font-size:13px;font-family:var(--font-body);color:var(--ink); cursor:pointer;border-bottom:1px solid rgba(10,42,87,0.07); } .map-suggestion:last-child{border-bottom:none;} .map-suggestion:hover,.map-suggestion:focus{background:var(--paper);} .map-search-status{ max-width:900px;margin:10px auto 0;text-align:center;font-size:13px;font-weight:600; color:var(--wave2);min-height:1.4em; } .map-search-status.error{color:#C43D1F;} .year-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:640px;margin:0 auto 22px;} .year-chip{ font-family:var(--font-body);font-size:13.5px;font-weight:600; padding:8px 18px;border-radius:999px;border:1.5px solid rgba(10,42,87,0.15); background:var(--white);color:var(--ink);cursor:pointer;transition:all .15s ease; } .year-chip:hover{border-color:var(--wave2);color:var(--wave2);} .year-chip.active{background:var(--ink);color:var(--white);border-color:var(--ink);} .year-chip:disabled{opacity:.4;cursor:not-allowed;} /* Popup district breakdown */ .popup-district{font-size:13px;min-width:190px;} .popup-district .pd-title{font-weight:800;font-size:14px;margin-bottom:2px;} .popup-district .pd-sub{color:rgba(10,42,87,0.55);font-size:11.5px;margin-bottom:10px;} .popup-district .pd-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0;} .popup-district .pd-row .pd-label{display:flex;align-items:center;gap:7px;font-weight:600;} .popup-district .pd-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;} .popup-district .pd-count{font-weight:800;} .popup-district .pd-filtered{ margin-top:8px;padding-top:8px;border-top:1px solid rgba(10,42,87,0.1); font-size:12px;color:var(--wave2);font-weight:700; } .section-dark{background:linear-gradient(135deg, var(--sky3) 0%, var(--wave3) 100%);color:var(--white);} .section-dark .section-label{color:var(--gold);} .section-dark .section-title{color:var(--white);} .section-dark .section-sub{color:rgba(255,255,255,0.75);} .section-dark .trend-year{color:rgba(255,255,255,0.72);} .section-dark .trend-note{color:rgba(255,255,255,0.72);} .section-dark .callout-box{background:rgba(255,255,255,0.1);border-left-color:var(--gold);color:rgba(255,255,255,0.92);} .section-dark .callout-box strong{color:var(--white);} .section-dark .breakdown-name{color:var(--white);} .section-dark .breakdown-count{color:var(--gold);} .section-dark .breakdown-track{background:rgba(255,255,255,0.16);} /* Citywide crime mix — flat, hairline border, no shadow */ .mix-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;max-width:640px;margin:0 auto;} .mix-card{background:var(--white);border-radius:3px;padding:26px 18px;text-align:center;border:1.5px solid rgba(10,42,87,0.12);} .mix-card .mix-num{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,4vw,34px);color:var(--sky3);} .mix-card .mix-label{font-size:12px;font-weight:800;color:rgba(10,42,87,0.55);margin-top:8px;text-transform:uppercase;letter-spacing:.4px;} .mix-card .mix-pct{font-size:12px;color:rgba(10,42,87,0.45);margin-top:2px;} .mix-card.highlight{border-color:var(--gold);} .mix-card.highlight .mix-num{color:var(--orange);} /* Plain-language definitions — flat, hairline border, no shadow */ .def-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;max-width:920px;margin:38px auto 0;} .def-card{background:var(--white);border-radius:3px;padding:22px 22px;border:1.5px solid rgba(10,42,87,0.12);} .def-title{display:flex;align-items:center;gap:9px;font-weight:800;font-size:14.5px;margin-bottom:8px;} .def-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;} .def-card p{font-size:13px;color:rgba(10,42,87,0.68);line-height:1.55;} /* Severity mix (traffic safety) — red emphasis for the most serious card, instead of the gold "highlight" used elsewhere, since red already reads as "serious/negative" via the delta-badge convention on this site. */ .mix-card.severe{border-color:#C43D1F;} .mix-card.severe .mix-num{color:#C43D1F;} /* Callout stat — sharp corner, hairline border, small hard offset shadow (same "featured" treatment as .stat-block) */ .callout-stat{ max-width:640px;margin:0 auto 34px;background:var(--white); border-radius:3px;padding:26px 30px;text-align:center; border:1.5px solid rgba(10,42,87,0.14); box-shadow:5px 5px 0 rgba(10,42,87,0.08); font-size:15.5px;color:rgba(10,42,87,0.85); } .callout-stat strong{font-family:var(--font-display);font-weight:700;font-size:22px;color:#C43D1F;display:inline;} /* Light-background legend (used by the traffic map; .trend-legend is dark-bg only) */ .marker-legend{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:18px;font-size:12.5px;font-weight:700;color:rgba(10,42,87,0.6);} .marker-legend .ml-item{display:flex;align-items:center;gap:7px;} .marker-legend .ml-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;} /* Resources page — official directory cards. Compact horizontal cards (small circular photo + name/role/contact), same flat hairline-border tier as .watch-card/.def-card — no shadow, since these are a browsable grid, not featured stats. */ .official-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;max-width:920px;margin:0 auto;} .official-card{ background:var(--white);border-radius:3px;border:1.5px solid rgba(10,42,87,0.12); padding:18px;display:flex;align-items:center;gap:14px; } .official-photo{ width:64px;height:64px;border-radius:50%;flex-shrink:0;overflow:hidden; background:linear-gradient(135deg, var(--sky1), var(--sky3)); border:2px solid var(--white);box-shadow:0 0 0 1.5px rgba(10,42,87,0.14); } .official-photo img{width:100%;height:100%;object-fit:cover;display:block;} .official-body{min-width:0;} .official-name{font-weight:800;font-size:14.5px;line-height:1.3;} .official-role{font-size:12px;color:rgba(10,42,87,0.55);font-weight:700;text-transform:uppercase;letter-spacing:.3px;margin-top:2px;} .official-contact{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;} .official-contact a{font-size:12px;font-weight:700;color:var(--wave2);white-space:nowrap;} .official-contact a:hover{text-decoration:underline;} .official-duty{font-size:12px;color:rgba(10,42,87,0.68);line-height:1.5;margin-top:6px;} .official-tenure{font-size:11.5px;font-weight:700;color:var(--wave2);margin-top:3px;line-height:1.45;} .rep-result .official-tenure{color:rgba(10,42,87,0.6);} /* District-picker map (Resources page) — same wrapper as the crime/collision maps, sized a bit shorter since it's a simple 9-polygon click target. */ #districtPickerMap{height:440px;width:100%;background:var(--paper);} .district-label{ font-family:var(--font-mono);font-weight:800;font-size:11px;color:var(--ink); background:rgba(255,255,255,0.92);border:none;box-shadow:0 1px 4px rgba(10,42,87,0.3); padding:2px 6px; } .district-label::before{display:none;} /* Address-lookup result — featured tier (hard offset shadow), same treatment as .stat-block, since this is the page's primary payoff. */ .rep-result{ background:var(--white);border-radius:3px;border:1.5px solid rgba(10,42,87,0.14); box-shadow:6px 6px 0 rgba(10,42,87,0.08); padding:32px;max-width:520px;margin:26px auto 0; display:flex;align-items:center;gap:20px;text-align:left; } .rep-result .official-photo{width:88px;height:88px;} .rep-result .rep-kicker{font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--wave2);} .rep-result .official-name{font-family:var(--font-display);font-size:20px;font-weight:700;margin-top:4px;} .rep-result .official-contact{margin-top:10px;} .rep-result .official-contact a{ font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:3px; background:var(--paper);color:var(--ink);white-space:nowrap; } .rep-result .official-contact a:hover{background:var(--gold);text-decoration:none;} /* Compact reference list of all 9 districts (no photos — this is the scan-everything fallback for people who don't want to type an address) */ .district-list{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:1px;background:rgba(10,42,87,0.1);border-radius:3px;overflow:hidden;border:1.5px solid rgba(10,42,87,0.12);} .district-row{display:flex;align-items:center;gap:14px;background:var(--white);padding:12px 18px;} .district-row .dr-num{font-family:var(--font-mono);font-weight:800;font-size:13px;color:var(--wave2);width:26px;flex-shrink:0;} .district-row .dr-name{font-weight:700;font-size:14px;flex:1;} .district-row a{font-size:12.5px;font-weight:700;color:var(--wave2);white-space:nowrap;} .district-row a:hover{text-decoration:underline;} /* Leaflet.markercluster color overrides, matched to the site's low/mid/high heat ramp (sky -> gold -> red) used elsewhere for severity/intensity. */ .marker-cluster-small{background-color:rgba(79,224,211,0.45);} .marker-cluster-small div{background-color:rgba(20,95,189,0.75);color:#fff;} .marker-cluster-medium{background-color:rgba(255,193,85,0.45);} .marker-cluster-medium div{background-color:rgba(240,146,74,0.85);color:#fff;} .marker-cluster-large{background-color:rgba(196,61,31,0.35);} .marker-cluster-large div{background-color:rgba(196,61,31,0.8);color:#fff;} .marker-cluster span{font-family:var(--font-body);font-weight:800;} #trafficMap{height:480px;width:100%;background:var(--paper);}