/* ===== Page surface ===== Pinned with background-attachment:fixed so it stays put while content scrolls over it. The header bar is 85% opaque, so with no surface behind it the bar composites over the browser's white default and renders #35303c instead of #191123. Every band on every page is transparent so this shows through. */ body, #preview-container{ background-color:#120c1a; background-image: radial-gradient(1200px 520px at 50% -8%, rgba(134,102,156,.32), transparent 92%), linear-gradient(160deg, #4b3560 0%, #2b1f36 62%, #171021 100%); background-attachment:fixed; background-repeat:no-repeat; background-size:cover; } .fb-blk, .fb-blk *{ margin:0; padding:0; box-sizing:border-box } .fb-blk{ font-family:'Geist',system-ui,-apple-system,sans-serif; color:#f4f0f8; line-height:1.6; -webkit-font-smoothing:antialiased; font-synthesis-weight:none; text-rendering:optimizeLegibility; } .fb-blk h1,.fb-blk h2,.fb-blk h3{font-weight:600;line-height:1.15;letter-spacing:-.02em;text-wrap:balance;color:#f4f0f8} .fb-blk img{ max-width:100%; height:auto; display:block } .fb-blk a{ color:inherit } .fb-blk .wrap{ max-width:1152px; margin:0 auto; padding:0 20px } .fb-blk .section{ padding:48px 0 } @media (min-width:640px){ .fb-blk .section{padding:64px 0} } .fb-blk h2.sec{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:28px} /* Full-bleed. The block lands inside a section > row > column capped at 1170px, so every band has to break out to reach the page edge. Once the script has flattened those wrappers (.fb-flat) the parent is already the full content width, so a band only needs width:100% — that is scrollbar-proof by construction and is the path taken in practice. The viewport trick below is the fallback for when the script has not run: --fb-vw comes from documentElement.clientWidth, which EXCLUDES the scrollbar, and 100vw backs that up in turn. Measured widths go stale when late content introduces a scrollbar, which is exactly why they are the fallback and not the default. */ .fb-blk .bleed{ position:relative; left:50%; width:var(--fb-vw,100vw); margin-left:calc(var(--fb-vw,100vw) / -2); } .fb-blk.fb-flat .bleed{ left:0; width:100%; margin-left:0 } /* ===== Cards ===== */ .fb-blk .card{background:#1e1727;border:1px solid #4a3d57;border-radius:14px;overflow:hidden;text-decoration:none;display:block;transition:border-color .2s, background .2s} .fb-blk .card:hover{border-color:#5a4a68;background:#221a2c} .fb-blk .label{background:#1e1727;border:1px solid #4a3d57;border-radius:14px;padding:22px 20px} .fb-blk .label h3{font-size:.98rem;font-weight:500} /* ===== Motion ===== */ @keyframes fbFadeInDown{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:translateZ(0)}} .fb-blk .fade-down{animation:fbFadeInDown 1s linear 0s forwards} .fb-blk .fade-down.d1{animation-delay:.12s;opacity:0} .fb-blk .fade-down.d2{animation-delay:.24s;opacity:0} .fb-blk .fade-down.d3{animation-delay:.36s;opacity:0} .fb-blk .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease} .fb-blk .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){ .fb-blk .reveal{opacity:1;transform:none;transition:none} .fb-blk .fade-down,.fb-blk .fade-down.d1,.fb-blk .fade-down.d2,.fb-blk .fade-down.d3{animation:none;opacity:1} .fb-blk .marquee-track{animation:none} } /* ===== Header ===== */ .fb-blk .site-head{position:fixed;top:0;left:0;right:0;z-index:9999;background:rgba(18,12,26,.85);backdrop-filter:blur(12px);border-bottom:1px solid rgba(74,61,87,.6)} .fb-blk .head-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--fb-head-h);max-width:1152px;margin:0 auto;padding:0 20px} .fb-blk .mark-lockup{display:inline-flex;align-items:center;gap:8px;text-decoration:none} .fb-blk .mark-lockup img{width:32px;height:35px;display:block} .fb-blk .mark-type{font-weight:700;font-size:20.8px;white-space:nowrap} .fb-blk .mark-type .fb{color:#ee7916} .fb-blk .mark-type .mt{color:#86669c;margin-left:.25em} /* The footer lockup is the smaller of the two, as on the apex. */ .fb-blk footer .mark-lockup img{width:30px;height:32px} .fb-blk footer .mark-type{font-weight:600;font-size:18px} .fb-blk .nav-links{display:flex;gap:16px;align-items:center} .fb-blk .nav-links a{text-decoration:none;font-size:14px;color:#b6a1c9;transition:color .2s} .fb-blk .nav-links a:hover,.fb-blk .nav-links a:focus-visible{color:#f4f0f8} .fb-blk .btn{display:inline-block;background:#ee7916;color:#fff;text-decoration:none;font-weight:500;font-size:16px;padding:10px 20px;border-radius:999px;border:none;cursor:pointer;transition:opacity .2s;font-family:inherit} .fb-blk .btn:hover,.fb-blk .btn:focus-visible{opacity:.9} .fb-blk .btn.ghost{background:#1e1727;color:#f4f0f8;border:1px solid #4a3d57} .fb-blk .btn.ghost:hover{background:#2d2437;opacity:1} .fb-blk .btn.big{padding:14px 28px} .fb-blk .nav-cta{color:#fff !important;white-space:nowrap} .fb-blk .cart-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:#b6a1c9;text-decoration:none;transition:color .2s} .fb-blk .cart-link:hover{color:#f4f0f8} .fb-blk .cart-count{background:#ee7916;color:#fff;font-size:11px;font-weight:600;min-width:18px;height:18px;border-radius:999px;display:none;align-items:center;justify-content:center;padding:0 5px} .fb-blk .cart-count.on{display:inline-flex} /* ===== Search ===== Products only, matched on name. The field is the ONLY shrinkable item in the nav — everything else is flex-shrink:0 — so when the bar tightens the squeeze lands here and the Free consult pill keeps its single line. Measured on the live header: lockup 219px + nav 486px with the cart badge showing + a 100px floor for the field needs ~880px of viewport, so below the collapse point the field gives way to the magnifier, which costs 44px rather than 186px. */ .fb-blk .nav-links > *{flex-shrink:0} .fb-blk .nav-search{position:relative;display:flex;align-items:center;flex:0 1 170px;min-width:100px} .fb-blk .nav-search input{width:100%;font-family:inherit;font-size:14px;color:#f4f0f8;background:#1e1727;border:1px solid #4a3d57;border-radius:999px;padding:8px 14px 8px 34px;outline:none;transition:border-color .2s;-webkit-appearance:none;appearance:none} .fb-blk .nav-search input::placeholder{color:#b6a1c9} .fb-blk .nav-search input:focus{border-color:#ee7916} .fb-blk .nav-search .ico{position:absolute;left:12px;width:14px;height:14px;stroke:#b6a1c9;fill:none;stroke-width:2;stroke-linecap:round;pointer-events:none} /* The magnifier and the hamburger travel as a pair, so they need a wrapper — as loose children of head-inner its space-between would push them apart. */ .fb-blk .head-actions{display:none;align-items:center;gap:4px} .fb-blk .search-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;color:#f4f0f8;cursor:pointer;width:40px;height:40px;border-radius:999px;padding:0} .fb-blk .search-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round} /* The cart sits between the magnifier and the hamburger so the three read as one control group. Same 40px box as its neighbours. The badge is the nav badge's rule pinned to the corner and scaled down — an icon has no label for it to sit beside. */ .fb-blk .head-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;color:#f4f0f8;text-decoration:none;width:40px;height:40px;border-radius:999px} .fb-blk .head-cart svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round} .fb-blk .head-cart .cart-count{position:absolute;top:2px;right:0;min-width:16px;height:16px;font-size:10px;padding:0 4px} .fb-blk .search-bar{display:none;position:relative;border-top:1px solid rgba(74,61,87,.6);background:#120c1a} .fb-blk .search-bar.open{display:block} .fb-blk .search-bar .row{display:flex;gap:8px;max-width:1152px;margin:0 auto;padding:14px 20px} /* 16px, not 14 — anything smaller makes iOS Safari zoom the page on focus. */ .fb-blk .search-bar input{flex:1 1 auto;min-width:0;font-family:inherit;font-size:16px;color:#f4f0f8;background:#1e1727;border:1px solid #4a3d57;border-radius:10px;padding:11px 14px;outline:none;-webkit-appearance:none;appearance:none} .fb-blk .search-bar input::placeholder{color:#b6a1c9} .fb-blk .search-bar input:focus{border-color:#ee7916} .fb-blk .search-bar .btn{flex:0 0 auto;padding:11px 20px;font-size:15px} /* ---- typeahead panel ---- Anchored to the field's right edge and given its own width, because the field itself is only 170px at rest and narrower once the bar tightens. */ .fb-blk .ta-panel{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;background:#1e1727;border:1px solid #4a3d57;border-radius:12px;padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.5);max-height:min(70vh,420px);overflow-y:auto;z-index:10} .fb-blk .ta-panel.open{display:block} .fb-blk .nav-search .ta-panel{width:340px;left:auto;right:0} .fb-blk .search-bar .ta-panel{left:20px;right:20px;top:calc(100% - 4px)} .fb-blk .ta-row{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;text-decoration:none;color:#f4f0f8} .fb-blk .ta-row img{width:40px;height:40px;flex:0 0 40px;object-fit:cover;border-radius:8px;background:#120c1a} .fb-blk .ta-row .ta-nm{flex:1 1 auto;min-width:0;font-size:14px;line-height:1.35} .fb-blk .ta-row .ta-pr{flex:0 0 auto;font-size:13px;color:#b6a1c9} .fb-blk .ta-row mark{background:none;color:#ee7916;font-weight:600} .fb-blk .ta-row:hover,.fb-blk .ta-row.on{background:#2d2437} .fb-blk .ta-empty{padding:14px 10px;font-size:14px;color:#b6a1c9} .fb-blk .ta-all{display:block;text-align:center;padding:10px;margin-top:4px;border-top:1px solid #4a3d57;font-size:13px;color:#b6a1c9;text-decoration:none} .fb-blk .ta-all:hover{color:#f4f0f8} /* WebKit draws its own clear affordance on type=search, in system blue. */ .fb-blk .nav-search input::-webkit-search-decoration, .fb-blk .nav-search input::-webkit-search-cancel-button, .fb-blk .search-bar input::-webkit-search-decoration, .fb-blk .search-bar input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none} /* Visibility is the wrapper's job, so this rule is width-independent. */ .fb-blk .menu-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;color:#f4f0f8;cursor:pointer;width:40px;height:40px;border-radius:999px;font-size:22px;line-height:1} .fb-blk .mobile-nav{display:none;border-top:1px solid rgba(74,61,87,.6);background:#120c1a} .fb-blk .mobile-nav.open{display:block} .fb-blk .mobile-nav nav{display:flex;flex-direction:column;gap:4px;max-width:1152px;margin:0 auto;padding:16px 20px;text-align:center} .fb-blk .mobile-nav a{border-radius:10px;padding:10px 8px;font-size:16px;color:#f4f0f8;text-decoration:none} .fb-blk .mobile-nav .btn{margin-top:8px;padding:12px 20px} /* Header collapse point. Two rules, one number — 900 is the width at which the lockup, the full nav with the cart badge showing, and the search field at its 100px floor stop fitting together. Change both together. */ @media (max-width:900px){ .fb-blk .nav-links{display:none} .fb-blk .head-actions{display:flex} /* Three 40px targets where there were two. The lockup is the only shrinkable item in the bar and its wordmark is nowrap, so without this the type is squeezed past its own box and runs under the icons rather than the bar reflowing. Measured against "FIREBIRDMethod", the widest thing here; scoped to .site-head so the footer lockup is untouched. */ .fb-blk .site-head .head-inner{gap:10px} .fb-blk .site-head .head-actions{gap:2px} .fb-blk .site-head .mark-type{font-size:16px} } /* The set above clears a 360px phone with 18px to spare. Below that the bar goes to a 12px gutter and 36px targets, which carries it to 320 with 21px. The gutter moves on the dropdown and the search row too, so all three keep one left edge. */ @media (max-width:359px){ .fb-blk .site-head .head-inner{padding:0 12px;gap:8px} .fb-blk .site-head .mark-lockup{gap:6px} .fb-blk .site-head .mark-lockup img{width:28px;height:31px} .fb-blk .site-head .mark-type{font-size:15px} .fb-blk .site-head .search-btn, .fb-blk .site-head .head-cart, .fb-blk .site-head .menu-btn{width:36px;height:36px} .fb-blk .site-head .search-bar .row{padding:14px 12px} .fb-blk .site-head .mobile-nav nav{padding:16px 12px} } @media (min-width:901px){ .fb-blk .mobile-nav{display:none !important} .fb-blk .search-bar{display:none !important} } /* ===== Catalogue ===== */ .fb-blk .intro{text-align:center;padding-bottom:0} .fb-blk .intro h1{font-size:clamp(2rem,4.4vw,3rem);margin:0 auto 14px} .fb-blk .tools{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px} .fb-blk .search{flex:1 1 320px;max-width:420px;position:relative} .fb-blk .search input{width:100%;font-family:inherit;font-size:1rem;color:#f4f0f8;background:#1e1727;border:1px solid #4a3d57;border-radius:10px;padding:11px 16px;outline:none;transition:border-color .2s} .fb-blk .search input::placeholder{color:#b6a1c9} .fb-blk .search input:focus{border-color:#ee7916} .fb-blk .count{font-size:.9rem;color:#b6a1c9} .fb-blk .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px} .fb-blk .pcard{display:block;text-decoration:none} /* 20% radius, on the clipping wrapper as well as the so the hover scale-up stays inside the curve. */ .fb-blk .pcard .image-wrapper{aspect-ratio:1/1;overflow:hidden;position:relative;width:100%;border-radius:20%;background:#1e1727;border:1px solid #4a3d57} .fb-blk .pcard img{width:100%;height:100%;object-fit:cover;border-radius:20%;transition:transform .3s ease-in-out} .fb-blk .pcard:hover img{transform:scale(1.06)} .fb-blk .pcard .nm{font-size:1rem;font-weight:500;line-height:1.35;margin:14px 0 6px;color:#f4f0f8;transition:color .2s} .fb-blk .pcard:hover .nm{color:#ee7916} .fb-blk .pcard .pr{font-size:.95rem;color:#b6a1c9} .fb-blk .msg{font-size:1rem;color:#b6a1c9;text-align:center;padding:48px 0} .fb-blk .sk{border-radius:20%;background:#1e1727;border:1px solid #4a3d57;aspect-ratio:1/1;animation:fbPulse 1.4s ease-in-out infinite} @keyframes fbPulse{0%,100%{opacity:1}50%{opacity:.55}} @media (max-width:900px){ .fb-blk .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} } @media (max-width:520px){ .fb-blk .pcard .nm{font-size:.92rem} } @media (prefers-reduced-motion: reduce){ .fb-blk .pcard img{transition:none} .fb-blk .pcard:hover img{transform:none} .fb-blk .sk{animation:none} } /* ===== Footer — transparent, so the page gradient runs to the bottom ===== */ .fb-blk footer{background:transparent;color:#b6a1c9;padding:48px 0 28px;border-top:1px solid #4a3d57} .fb-blk .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px} .fb-blk .foot-grid h4{color:#f4f0f8;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px} .fb-blk .foot-grid ul{list-style:none} .fb-blk .foot-grid li{margin-bottom:8px} .fb-blk .foot-grid a{text-decoration:none;font-size:14px;transition:color .2s} .fb-blk .foot-grid a:hover{color:#f4f0f8} .fb-blk .foot-bottom{border-top:1px solid #4a3d57;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px} .fb-blk .foot-bottom a{text-decoration:none} .fb-blk .foot-bottom a:hover{color:#f4f0f8} .fb-blk .socials{display:flex;gap:10px;margin-top:16px} .fb-blk .socials a{width:36px;height:36px;border-radius:999px;background:#1e1727;border:1px solid #4a3d57;display:grid;place-items:center;text-decoration:none;font-size:13px;font-weight:500;color:#f4f0f8;transition:background .2s} .fb-blk .socials a:hover{background:#2d2437} @media (max-width:900px){ .fb-blk .foot-grid{grid-template-columns:1fr 1fr} } @media (max-width:640px){ .fb-blk .foot-grid{grid-template-columns:1fr} }