/* ISIMET Build-It — header & footer chrome (2026 refresh) Drop-in replacement for the .bi-header / .bi-footer rules. Pair with bi-chrome.js, which injects the markup. Load AFTER buildit-theme.css / buildit.css so it wins. */ :root{ --bic-ink:#14181c; --bic-paper:#fbfbfa; --bic-line:#d8dcd8; --bic-rail:#f4f5f3; --bic-muted:#4a545c; --bic-dim:#6b7680; --bic-navy:#25408F; /* ISIMET brand blue */ --bic-ok:#3fa46a; --bic-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --bic-sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif; } /* ---------- gated pages: hide until the auth gate decides ---------- Set by the inline snippet in each gated page's and cleared by revealGated() in bi-chrome.js. Whether someone is signed in is a question only the server can answer, so the gate cannot run before first paint — without this, My Builds renders in full, build list and all, and only then redirects to the login screen. visibility, not display: the layout is already computed, so revealing costs no reflow and the page does not jump. */ html.bi-auth-pending body{visibility:hidden;} /* ---------- header ---------- */ .bi-header{ background:var(--bic-ink); font-family:var(--bic-sans); position:sticky; top:0; z-index:900; } /* Shield the chrome from a host `body *{font-family}` over-reach (legacy bipub.css is still loaded on the configurator). Sans everywhere, then restore the mono accents. */ .bi-header *,.bi-footer *{font-family:var(--bic-sans);} .bi-header .bic-wordmark,.bi-header .bic-label,.bi-header .bic-change,.bi-header .bic-status,.bi-header .bic-sent .bic-msg,.bi-footer .bic-eyebrow,.bi-footer .bic-col h4,.bi-footer .bic-since,.bi-footer .bic-badge{font-family:var(--bic-mono);} .bic-bar{ max-width:1440px; margin:0 auto; height:64px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .bic-brand{display:flex; align-items:center; gap:22px; min-width:0;} .bic-brand img{height:24px; width:auto; display:block;} .bic-rule{width:1px; height:26px; background:rgba(255,255,255,.18); flex:none;} .bic-wordmark{ font-family:var(--bic-mono); font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:#f4f5f3; white-space:nowrap; } .bic-nav{display:flex; align-items:center; gap:6px;} .bic-nav a,.bic-nav button{ font-family:inherit; font-size:13.5px; font-weight:500; line-height:1; color:rgba(244,245,243,.72); background:none; border:0; cursor:pointer; padding:11px 12px; text-decoration:none; border-radius:0; } .bic-nav a:hover,.bic-nav button:hover{color:#fff; background:rgba(255,255,255,.08); text-decoration:none;} .bic-nav a[aria-current="page"]{color:#fff; font-weight:600; box-shadow:inset 0 -2px 0 var(--bic-navy);} .bic-cta{ font-size:13.5px !important; font-weight:600 !important; color:var(--bic-ink) !important; background:#f4f5f3 !important; padding:11px 18px !important; margin-left:8px; } .bic-cta:hover{background:#fff !important; color:var(--bic-ink) !important;} /* account menu */ .bic-user{position:relative;} .bic-user > button{color:#fff !important; font-weight:600 !important; background:rgba(255,255,255,.1) !important;} .bic-caret{margin-left:8px; font-size:10px; color:rgba(255,255,255,.6);} .bic-menu{ position:absolute; right:0; top:calc(100% + 6px); min-width:190px; background:#fff; border:1px solid var(--bic-line); box-shadow:0 18px 40px -20px rgba(20,24,28,.5); padding:6px 0; z-index:1000; } .bic-menu[hidden]{display:none;} .bic-menu a{display:block; padding:10px 16px; font-size:14px; color:var(--bic-ink); text-decoration:none;} .bic-menu a:hover{background:var(--bic-rail); text-decoration:none;} .bic-menu hr{border:0; border-top:1px solid #e7e9e6; margin:6px 0;} /* mobile nav */ .bic-burger{display:none;} @media (max-width:860px){ .bic-bar{height:56px; padding:0 16px;} .bic-nav{ display:none; position:absolute; left:0; right:0; top:100%; background:var(--bic-ink); flex-direction:column; align-items:stretch; gap:0; padding:8px 8px 14px; border-top:1px solid rgba(255,255,255,.12); } .bi-header.bic-open .bic-nav{display:flex;} .bic-nav a,.bic-nav button{padding:14px 12px; text-align:left; font-size:15px;} .bic-cta{margin:8px 4px 0;} .bic-burger{display:block;} .bic-user{position:static;} .bic-menu{position:static; box-shadow:none; border:0; background:transparent; padding:0 0 0 12px;} .bic-menu a{color:rgba(244,245,243,.8);} .bic-menu a:hover{background:rgba(255,255,255,.08); color:#fff;} } /* The wordmark stops fitting before the logo does. "BUILD IT CONFIGURATOR" is letter-spaced mono set to nowrap — 202px of it — and next to the logo and the burger it overran .bic-brand by ~53px on a 375px screen, so it rendered clipped mid-word as "BUILD IT CONFIGURA". Drop the text and its divider on a phone: the logo is the brand, and the page still names itself in the document title and the

. */ @media (max-width:560px){ .bic-brand{gap:12px;} .bic-wordmark,.bic-rule{display:none;} } /* ---------- context rail (only rendered when a build has context) ---------- */ .bic-railbar{ background:var(--bic-rail); border-bottom:1px solid var(--bic-line); font-family:var(--bic-sans); } .bic-railbar .bic-inner{ max-width:1440px; margin:0 auto; min-height:58px; padding:9px 28px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .bic-label{font-family:var(--bic-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--bic-dim);} .bic-proj{display:flex; align-items:center; gap:14px; min-width:0;} .bic-proj-name{font-size:15px; font-weight:600; color:var(--bic-ink); white-space:nowrap;} .bic-proj-loc{font-size:13.5px; color:var(--bic-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .bic-change{ font-family:var(--bic-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--bic-navy); background:none; border:0; border-bottom:1px solid rgba(37,64,143,.4); padding:0; cursor:pointer; flex:none; } .bic-change:hover{color:var(--bic-ink); border-color:var(--bic-ink);} .bic-railactions{display:flex; align-items:center; gap:16px;} .bic-status{display:flex; align-items:center; gap:8px; font-family:var(--bic-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#4a7a5c;} .bic-dot{width:6px; height:6px; border-radius:50%; background:var(--bic-ok); display:block; flex:none;} .bic-ghost{ font-family:var(--bic-sans); font-size:13.5px; font-weight:600; color:var(--bic-ink); background:#fff; border:1px solid #c6ccc6; padding:9px 16px; cursor:pointer; text-decoration:none; } .bic-ghost:hover{border-color:var(--bic-ink); text-decoration:none; color:var(--bic-ink);} /* rail variants */ .bic-railbar.bic-warn{background:#fff8e1; border-bottom-color:#f0dfa8;} .bic-railbar.bic-warn .bic-label{color:#8a6a12;} .bic-railbar.bic-warn .bic-msg{font-size:14px; color:#6b5518;} .bic-railbar.bic-sent{background:var(--bic-ink); border-bottom-color:rgba(255,255,255,.12);} .bic-railbar.bic-sent .bic-label{color:#7fd3a3;} .bic-railbar.bic-sent .bic-msg{font-family:var(--bic-mono); font-size:11px; letter-spacing:.06em; color:rgba(244,245,243,.7);} @media (max-width:860px){ .bic-railbar .bic-inner{padding:10px 16px; min-height:0;} .bic-proj{flex:1 1 100%; flex-wrap:wrap; gap:6px 12px;} .bic-railactions{flex:1 1 100%;} } /* ---------- footers ---------- */ .bi-footer{background:var(--bic-ink); color:#f4f5f3; font-family:var(--bic-sans); margin-top:auto;} .bi-footer a{text-decoration:none;} .bi-footer a:hover{text-decoration:none; color:#fff;} /* compact (app pages) */ .bic-foot-compact{ max-width:1440px; margin:0 auto; padding:22px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; color:rgba(244,245,243,.6); font-size:13px; } .bic-foot-compact img{height:18px; width:auto; opacity:.85;} .bic-foot-compact .bic-l,.bic-foot-compact .bic-r{display:flex; align-items:center; gap:18px; flex-wrap:wrap;} .bic-foot-compact a{color:rgba(244,245,243,.6);} .bic-foot-compact .bic-tel{color:rgba(244,245,243,.85); font-weight:600;} .bic-foot-compact .bic-eyebrow{font-family:var(--bic-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(244,245,243,.4);} /* full (welcome / marketing) */ .bic-foot-full{max-width:1440px; margin:0 auto; padding:56px 28px 0;} .bic-cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:48px; padding-bottom:48px;} .bic-col{display:flex; flex-direction:column; gap:12px;} .bic-col img{height:26px; width:auto; align-self:flex-start; margin-bottom:6px;} .bic-col h4{ margin:0; font-family:var(--bic-mono); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,245,243,.45); } .bic-col a{font-size:14px; color:rgba(244,245,243,.78);} .bic-col p{margin:0; font-size:14px; line-height:1.6; color:rgba(244,245,243,.72);} .bic-since{font-family:var(--bic-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,245,243,.55);} .bic-bigtel{font-size:20px; font-weight:600; color:#fff !important; letter-spacing:-.01em;} .bic-bigtel:hover{color:#9db4e0 !important;} .bic-hours{font-size:13px; line-height:1.6; color:rgba(244,245,243,.55);} .bic-legal{ border-top:1px solid rgba(255,255,255,.12); padding:20px 0 26px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .bic-badges{display:flex; align-items:center; gap:14px; flex-wrap:wrap;} .bic-badge{ font-family:var(--bic-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(244,245,243,.65); border:1px solid rgba(255,255,255,.2); padding:6px 10px; } .bic-legal .bic-r{display:flex; align-items:center; gap:22px;} .bic-legal a{font-size:13px; color:rgba(244,245,243,.6);} .bic-copy{font-size:13px; color:rgba(244,245,243,.45);} /* Build stamp — painted in the footer's own background colour, so it is there for support/deploy checks but invisible to customers. Drag-select (or triple-click) the footer's bottom-right corner to read it; ::selection forces it legible while highlighted. `user-select:all` selects the whole stamp from a single click. Also available as BIChrome.version in the console. */ .bic-build{ font-family:var(--bic-mono); font-size:11px; letter-spacing:.06em; color:var(--bic-ink); user-select:all; -webkit-user-select:all; cursor:default; } .bic-build::selection{color:#fff; background:#416180;} .bic-build::-moz-selection{color:#fff; background:#416180;} @media (max-width:860px){ .bic-foot-full{padding:40px 16px 0;} .bic-cols{grid-template-columns:1fr 1fr; gap:32px;} .bic-foot-compact{padding:20px 16px;} } @media (max-width:560px){ .bic-cols{grid-template-columns:1fr;} /* The legal strip has to stop being a row. .bic-legal is space-between, so on a phone the four compliance badges take the full width and leave .bic-r a sliver — and .bic-r is itself a rigid flex row, so "Privacy policy" and "©2026 ISIMET, LLC" got squeezed into two narrow columns and broke mid-phrase, one word per line. Stack the strip, let the pair wrap as a pair, and keep each phrase whole. */ .bic-legal{flex-direction:column; align-items:flex-start; gap:16px;} .bic-legal .bic-r{flex-wrap:wrap; gap:8px 18px;} .bic-legal .bic-r > *{white-space:nowrap;} } /* ---------- scroll targets clear the sticky header ---------- Every scrollIntoView in the app uses block:'start', which aligns an element's top with the top of the VIEWPORT. The header is sticky and covers that band, so without this each guided step scrolled its own question out of sight behind the chrome — answer, glide, and the thing you are meant to read next is under the header. --bi-sticky-top is measured and published by syncStickyOffset() in bi-chrome.js, because the right number is not a constant: 123px on a desktop, ~182px on a phone, and taller again when a long project name wraps the rail. The fallback only applies if that script has not run. One property, seven call sites — the guided step container, the question panel, expert-form sections, review items. No JavaScript changed. */ #bi-question-panel, #bi-qpanel-content, #bi-category-section, .bi-guided-step, .bi-flow-item, .bi-section-item, [data-bi-section]{ scroll-margin-top:var(--bi-sticky-top,140px); } /* page shell: keeps the footer at the bottom of short pages */ body.bi{min-height:100vh; display:flex; flex-direction:column;} body.bi .bi-main{flex:1 0 auto;} /* ---------- vendored fonts (self-hosted; CSP-safe) ---------- */ @font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/archivo-3.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/archivo-2.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/archivo-1.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400.woff2) format('woff2');} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500.woff2) format('woff2');} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-600.woff2) format('woff2');}