/* Shared styles for websbizkaia.es — loaded on every page. * Bump ?v=N in the whenever this file changes. */ /* ===== RESET ===== */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{overflow-x:clip} /* clip horizontal overflow at the body edge (safety net for the FAB fix; overflow-wrap:anywhere on code/pre is the real fix). NOT on html: overflow-x on can move the scroll container off the viewport and kill iOS momentum scrolling. */ [id]{scroll-margin-top:80px} img{max-width:100%;display:block} code,pre{overflow-wrap:anywhere;word-break:break-word} /* long URLs / unbreakable strings wrap instead of blowing out the viewport */ pre{white-space:pre-wrap} /* ===== DESIGN TOKENS ===== */ :root{ --ink:#0B1120; --ink-light:#1e293b; --slate:#475569; --cloud:#f8fafc; --white:#ffffff; --accent:#0066FF; --accent-dark:#0044cc; --accent-soft:rgba(0,102,255,0.08); --accent-glow:rgba(0,102,255,0.15); --warn:#FF3333; --warn-soft:rgba(255,51,51,0.06); --gold:#FFCC00; --shadow:0 4px 24px rgba(11,17,32,0.06); --shadow-lg:0 12px 40px rgba(11,17,32,0.12); --shadow-xl:0 20px 60px rgba(11,17,32,0.18); --radius:14px; --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-spring:cubic-bezier(0.34,1.56,0.64,1); /* Typography scale */ --text-xs:.7rem; --text-sm:.78rem; --text-base:.82rem; --text-md:.9rem; --text-lg:.95rem; --text-xl:1.05rem; --text-2xl:1.2rem; --text-3xl:clamp(1.5rem, 0.5rem + 3.857vw, 2rem); --text-hero:clamp(1.7rem, 0.5rem + 5.362vw, 3rem); } /* ===== CANONICAL HEADER ===== */ .wb-nav{ position:sticky;top:0;z-index:100; display:flex;align-items:center;justify-content:space-between; padding:0 5%;height:68px; background:rgba(255,255,255,0.96);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2); border-bottom:1px solid rgba(11,17,32,0.06); } .wb-nav .nav-logo{display:flex;align-items:center;text-decoration:none} .wb-nav .nav-logo .lg{width:36px;height:36px;flex:0 0 36px} .wb-nav .nav-actions{display:flex;align-items:center;gap:.6rem} .wb-nav .nav-actions a:not(.nav-cta):not(.nav-icon){font-size:var(--text-base);font-weight:600;color:var(--slate);text-decoration:none} .wb-nav .nav-cta{ display:inline-flex;align-items:center;gap:.5rem; background:var(--accent);color:#fff;font-size:var(--text-base);font-weight:700; padding:.65rem 1.3rem;border-radius:50px; text-decoration:none;box-shadow:0 4px 14px rgba(0,102,255,0.25); transition:all .25s var(--ease-out); } .wb-nav .nav-cta:hover{background:var(--accent-dark);transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,102,255,0.35)} .wb-nav .nav-icon{ width:38px;height:38px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:1rem; color:var(--slate);background:var(--cloud);border:1px solid rgba(11,17,32,0.06); text-decoration:none;transition:all .25s var(--ease-out); } .wb-nav .nav-icon:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-1px)} .wb-ico{width:1em;height:1em;fill:currentColor;display:inline-block;vertical-align:middle} .wb-nav .nav-icon .wb-ico,.wb-nav .nav-cta .wb-ico{width:var(--text-md);height:var(--text-md)} /* ===== FLOATING WHATSAPP ===== */ .wb-fab{ position:fixed;bottom:1.5rem;right:1.5rem;z-index:99; width:56px;height:56px;border-radius:50%; background:#25D366;color:#fff; display:flex;align-items:center;justify-content:center; font-size:1.5rem; text-decoration:none;box-shadow:0 6px 20px rgba(37,211,102,0.35); transition:all .3s var(--ease-spring),opacity .25s ease,transform .25s ease; } .wb-fab:hover{transform:scale(1.1) translateY(-2px);box-shadow:0 10px 30px rgba(37,211,102,0.45)} .wb-fab .wb-ico{width:1em;height:1em} /* ===== MOBILE SCROLL PERF ===== */ /* backdrop-filter on a sticky nav repaints every scroll frame -> jank on phones. Disable it on small screens; the rgba(255,255,255,.96) bg is near-opaque so a solid #fff looks clean without the blur. !important beats the per-page inline .wb-nav rule. Desktop keeps the frosted-glass blur. */ @media(max-width:768px){ .wb-nav{ -webkit-backdrop-filter:none!important; backdrop-filter:none!important; background:#fff!important } } /* ===== RESPONSIVE ===== */ @media(max-width:600px){ .wb-nav{padding:0 4%;height:62px} .wb-nav .nav-logo .lg{width:30px;height:30px;flex:0 0 30px} .wb-nav .nav-actions{gap:.4rem} .wb-nav .nav-cta{padding:.5rem .9rem} .wb-nav .nav-icon{width:34px;height:34px} .wb-fab{width:50px;height:50px;font-size:1.3rem;bottom:1rem;right:1rem} } @media(max-width:480px){ .wb-nav .nav-cta span{display:none} .wb-nav .nav-cta{padding:.55rem .7rem} .wb-nav .nav-actions a:not(.nav-cta):not(.nav-icon){font-size:.72rem} } @media print{ .wb-nav,.wb-fab{display:none!important} }