/* ============================================================ BeanSprout AI — site.css Global design system: tokens, reset, nav (incl. dropdown/mega), buttons-in-nav fixes, footer. Single source of truth — extracted verbatim from the per-page inline blocks (2026-07-11). Page-specific styles remain inline on each page and load AFTER this file, so pages keep their overrides by cascade order. ============================================================ */ :root { --bg: #07090E; --bg-soft: #0E1521; --panel: #141C2A; --panel-2: #1A2233; --line: rgba(255,255,255,0.12); --line-strong: rgba(255,255,255,0.22); --ink: #F4F6F8; --body: #AAB4C0; --muted: #808A98; --teal: #25C2AE; --teal-soft: #1B998B; --orange: #F2A65A; --claude-orange: #CC785C; --glow-teal: rgba(37,194,174,0.5); --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Source Serif 4', 'Iowan Old Style', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg); color: var(--body); line-height: 1.6; font-size:19px; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .container { max-width: 1280px; margin: 0 auto; padding: 0 48px; } section { padding: clamp(104px, 11vw, 176px) 0; position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 -16px 34px -26px rgba(0,0,0,0.65); } .eyebrow { font-family: var(--font-mono); font-size:14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); font-weight: 500; margin-bottom: 28px; display: inline-block; } .eyebrow::before { content: '◢ '; opacity: 0.6; } h2.section-h2 { font-family: var(--font-display); font-size: clamp(38px, 4.4vw, 62px); line-height: 1.06; letter-spacing: -0.02em; color: var(--ink); font-weight: 600; max-width: 20ch; margin-bottom: 28px; } h2.section-h2 .accent { color: var(--teal); } .section-lead { font-size:22px; line-height: 1.55; color: var(--body); max-width: 58ch; } .section-lead strong { color: var(--ink); font-weight: 600; } /* NAV */ nav.top { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(7,9,14,0.72); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); height: 70px; display: flex; align-items: center; } nav.top .container { display: flex; align-items: center; justify-content: space-between; width: 100%; } nav.top .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size:20px; color: var(--ink); letter-spacing: -0.01em; text-decoration: none; } nav.top .brand svg { width: 23px; height: 23px; filter: drop-shadow(0 0 6px rgba(37,194,174,0.5)); } nav.top .brand .suffix { color: var(--teal); } nav.top ul { list-style: none; display: flex; gap: 32px; align-items: center; } nav.top ul a { font-size:14px; color: var(--body); text-decoration: none; font-weight: 500; transition: color 0.2s; } nav.top ul a:hover { color: var(--ink); } nav.top ul a.cta { background: var(--teal); color: #04110E; padding: 10px 18px; border-radius: 6px; font-weight: 700; box-shadow: 0 0 24px rgba(37,194,174,0.28); } nav.top ul a.cta:hover { background: #2ed7c0; color: #04110E; } /* FOOTER LOCATIONS */ .foot-locations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 0 0 60px 0; border-bottom: 1px solid var(--line); } .floc { display: flex; flex-direction: column; } .floc.center { align-items: center; text-align: center; } .floc.right { align-items: flex-end; text-align: right; } .floc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .floc-name { font-family: var(--font-display); font-size:22px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; } .floc-hq { font-family: var(--font-mono); font-size:14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); padding: 4px 9px; border: 1px solid rgba(242,166,90,0.45); border-radius: 4px; background: rgba(242,166,90,0.10); font-weight: 600; } .floc-addr { font-family: var(--font-mono); font-size:16.5px; line-height: 1.72; color: var(--body); margin: 0; } .floc-phone { font-family: var(--font-mono); font-size:15px; color: var(--ink); margin-top: 14px; } .floc-phone a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; } .floc-phone a:hover { border-bottom-color: var(--teal); } /* FOOTER */ .site-footer { background: var(--bg); border-top: 1px solid var(--line); padding: 78px 0 40px; } .foot-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; padding: 64px 0 50px 0; border-bottom: 1px solid var(--line); } .foot-brand .fb-mark { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size:22px; color: var(--ink); margin-bottom: 16px; } .foot-brand .fb-mark svg { width: 24px; height: 24px; } .foot-brand .fb-mark .suffix { color: var(--teal); } .foot-brand p { font-size:16.5px; color: var(--body); line-height: 1.55; max-width: 36ch; } .foot-col h4 { font-family: var(--font-mono); font-size:14.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; } .foot-col a { display: block; font-size:16.5px; color: var(--body); text-decoration: none; margin-bottom: 11px; transition: color 0.2s; } .foot-col a:hover { color: var(--ink); } .foot-col .addr { font-family: var(--font-mono); font-size:15px; color: var(--body); line-height: 1.7; } .foot-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 26px; font-family: var(--font-mono); font-size:14.5px; color: var(--muted); letter-spacing: 0.05em; } .foot-bottom .links { display: flex; gap: 22px; } .foot-bottom .links a { color: var(--body); text-decoration: none; } .foot-bottom .links a:hover { color: var(--ink); } /* ===== DROPDOWN NAV (added) ===== */ nav.top ul.nav-menu { list-style: none; display: flex; gap: 30px; align-items: center; } nav.top .nav-menu > li { position: relative; } nav.top .nav-menu > li > a { font-size:14px; color: var(--body); text-decoration: none; font-weight: 500; transition: color 0.2s; display: inline-flex; align-items: center; gap: 5px; } nav.top .nav-menu > li > a:hover { color: var(--ink); } nav.top .has-dropdown > a::after { content: '▾'; font-size:12px; opacity: 0.55; } nav.top .has-dropdown::after { content: ''; position: absolute; top: 100%; left: -20px; right: -20px; height: 16px; } nav.top .dropdown { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px); min-width: 340px; background: rgba(11,15,22,0.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line-strong); border-radius: 13px; padding: 12px; box-shadow: 0 26px 64px rgba(0,0,0,0.62); opacity: 0; visibility: hidden; transition: opacity 0.18s ease, transform 0.18s ease; z-index: 60; } nav.top .has-dropdown:hover .dropdown, nav.top .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } nav.top .dropdown a { display: block; padding: 11px 14px; border-radius: 9px; text-decoration: none; transition: background 0.15s; } nav.top .dropdown a:hover { background: rgba(37,194,174,0.09); } nav.top .dropdown .dd-name { display: block; font-family: var(--font-display); font-size:16px; color: var(--ink); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 3px; } nav.top .dropdown .dd-desc { display: block; font-size:14.5px; color: var(--muted); line-height: 1.42; } nav.top .dropdown .dd-all { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); } nav.top .dropdown .dd-all .dd-name { font-family: var(--font-mono); font-size:14.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); margin: 0; } .nav-toggle { display: none; background: none; border: none; color: var(--ink); cursor: pointer; padding: 6px; } @media (max-width: 860px) { .nav-toggle { display: inline-flex; } nav.top ul.nav-menu { display: none; position: absolute; top: 70px; left: 0; right: 0; flex-direction: column; gap: 0; align-items: stretch; background: rgba(7,9,14,0.985); border-bottom: 1px solid var(--line); padding: 10px 0 16px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } nav.top ul.nav-menu.open { display: flex; } nav.top .nav-menu > li { padding: 0 24px; } nav.top .nav-menu > li > a { padding: 14px 0; font-size:16px; } nav.top .has-dropdown::after { display: none; } nav.top .dropdown { display: none; } nav.top ul.nav-menu li:last-child { padding: 14px 24px 0; } nav.top ul.nav-menu a.cta { display: inline-block; text-align: center; } } /* ===== MEGA NAV (enterprise dropdown) ===== */ nav.top .has-mega { position: static; } nav.top .has-mega > a::after { content:'▾'; font-size:12px; opacity:.55; margin-left:5px; } nav.top .mega { position: fixed; left:0; right:0; top:70px; background: rgba(8,11,16,0.985); border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:0 34px 70px rgba(0,0,0,0.55); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); opacity:0; visibility:hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease; z-index:45; } nav.top .has-mega:hover > .mega, nav.top .has-mega:focus-within > .mega { opacity:1; visibility:visible; transform:none; } .mega-inner { max-width:1280px; margin:0 auto; padding:44px 48px 48px; display:grid; grid-template-columns:1.55fr 1fr; gap:56px; } .mega-label { font-family:var(--font-mono); font-size:14px; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); margin-bottom:26px; } .mega-grid { display:grid; gap:6px 28px; } .mega-grid.cols-2 { grid-template-columns:1fr 1fr; } .mega-item { display:flex; gap:15px; padding:13px 14px; border-radius:11px; text-decoration:none; transition: background .15s; } .mega-item:hover { background: rgba(37,194,174,0.07); } .mega-item .mi-ico { flex:0 0 auto; width:38px; height:38px; border-radius:9px; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--teal); background:rgba(37,194,174,0.05); } .mega-item .mi-ico svg { width:19px; height:19px; } .mega-item:hover .mi-ico { border-color: rgba(37,194,174,0.5); } .mega-item .mi-tx { display:flex; flex-direction:column; } .mega-item .mi-name { font-family:var(--font-display); font-size:17px; color:var(--ink); font-weight:600; letter-spacing:-0.01em; margin-bottom:3px; } .mega-item .mi-desc { font-size:15px; color:var(--muted); line-height:1.45; } .mega-right { border-left:1px solid var(--line); padding-left:56px; display:flex; flex-direction:column; } .mega-right p { font-family:var(--font-display); font-size:22px; line-height:1.42; color:var(--ink); font-weight:500; letter-spacing:-0.012em; } .mega-right .mr-link { margin-top:22px; font-family:var(--font-mono); font-size:14.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--teal); text-decoration:none; } .mega-right .mr-link:hover { color:#2ed7c0; } @media (max-width: 860px) { nav.top .has-mega > a::after { display:none; } nav.top .mega { display:none; } } /* ===== MEGA FEATURE (Knowledge) ===== */ .mega-feature { display:block; text-decoration:none; border:1px solid var(--line); border-radius:13px; overflow:hidden; background:var(--panel); transition:border-color .2s, transform .2s; } .mega-feature:hover { border-color: rgba(37,194,174,0.45); transform:translateY(-2px); } .mega-feature .mf-media { display:block; height:104px; background: radial-gradient(ellipse at 72% 18%, rgba(37,194,174,0.30), transparent 62%), linear-gradient(135deg, var(--panel-2), var(--bg-soft)); border-bottom:1px solid var(--line); } .mega-feature .mf-body { display:block; padding:18px 20px 20px; } .mega-feature .mf-tag { display:inline-block; font-family:var(--font-mono); font-size:14px; letter-spacing:0.16em; text-transform:uppercase; color:var(--teal); margin-bottom:10px; } .mega-feature .mf-title { display:block; font-family:var(--font-display); font-size:19px; line-height:1.25; color:var(--ink); font-weight:600; letter-spacing:-0.012em; margin-bottom:12px; } /* ===== NAV HOVER FIX + CTA FIX ===== */ nav.top .has-mega { height:70px; display:flex; align-items:center; } nav.top .has-mega > a { height:70px; display:inline-flex; align-items:center; } nav.top .mega { top:70px; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .2s; } nav.top .has-mega:hover > .mega, nav.top .has-mega:focus-within > .mega { transition: opacity .18s ease, transform .18s ease, visibility 0s; } /* Talk to an expert CTA: was overridden to pale --body text -> restore dark ink on teal */ nav.top .nav-menu > li > a.cta { background: var(--teal); color:#04110E; padding:11px 20px; border-radius:7px; font-weight:700; box-shadow:0 0 22px rgba(37,194,174,0.25); transition: background .2s, box-shadow .2s; } nav.top .nav-menu > li > a.cta:hover { background:#2ed7c0; color:#04110E; box-shadow:0 0 30px rgba(37,194,174,0.4); } nav.top .nav-menu > li > a.cta::after { display:none; } @media (max-width:860px){ nav.top .has-mega { height:auto; display:block; } nav.top .has-mega > a { height:auto; } } /* ===== NAV ALIGN FIX (one level line) ===== */ nav.top .nav-menu { align-items:center; } nav.top .nav-menu > li { display:flex; align-items:center; height:70px; margin:0; padding:0; } nav.top .nav-menu > li > a:not(.cta) { height:70px; display:inline-flex; align-items:center; line-height:1; padding:0; } nav.top .nav-menu > li > a.cta { display:inline-flex; align-items:center; line-height:1; } nav.top .nav-menu > li > a::after { line-height:1; } @media (max-width:860px){ nav.top .nav-menu > li { height:auto; display:block; } nav.top .nav-menu > li > a:not(.cta) { height:auto; } } /* ===== NAV PRODUCTS STATIC ===== */ nav.top .nav-menu > li.nav-static-li { display:flex; align-items:center; height:70px; } nav.top .nav-menu > li > .nav-static:hover { color:var(--ink); } .nav-static { height:70px; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--muted); cursor:pointer; text-decoration:none; transition:color .18s; line-height:1; user-select:none; -webkit-user-select:none; } nav.top .nav-menu > li > .nav-static .soon { font-family:var(--font-mono); font-size:12px; font-style:normal; letter-spacing:0.14em; text-transform:uppercase; color:var(--teal); border:1px solid rgba(37,194,174,0.38); border-radius:4px; padding:2px 5px 1px; line-height:1; } @media (max-width:860px){ nav.top .nav-menu > li.nav-static-li { height:auto; display:block; padding:0 24px; } nav.top .nav-menu > li > .nav-static { height:auto; padding:14px 0; font-size:16px; } } /* nav-fx — dropdown caret treatment (kept verbatim, incl. its !important layer) */ nav.top .has-mega>a::after,nav.top .has-dropdown>a::after{font-size:19px!important;line-height:1;opacity:1!important;margin-left:8px;color:var(--teal);display:inline-block;vertical-align:middle;transition:transform .28s cubic-bezier(.2,.7,.3,1),color .2s,text-shadow .2s;transform-origin:50% 50%}nav.top .has-mega:hover>a::after,nav.top .has-mega:focus-within>a::after,nav.top .has-dropdown:hover>a::after,nav.top .has-dropdown:focus-within>a::after{transform:rotate(180deg) scale(1.25);text-shadow:0 0 12px rgba(37,194,174,.65)}nav.top .has-mega>a[href="/services"]::after{color:var(--orange)!important}nav.top .has-mega>a[href="/services"]:hover::after{text-shadow:0 0 12px rgba(242,166,90,.65)}.has-mega>a[href="/products"]::after{color:var(--orange)!important}.has-mega>a[href="/products"]:hover::after{text-shadow:0 0 12px rgba(242,166,90,.65)} /* ftr-v3 — footer (moved from in-body