/* * Shared floating header (#r1fh) — identical (byte-for-byte, verified across * index.html, blog.html, contact.html, checkpoint.html and diffed against the * remaining pages) on all 9 source pages. Enqueued globally in functions.php * so every template gets the same floating-on-scroll header, per Paso 4 of * documentacion.md (never inline in header.php). */ #r1fh{position:fixed;top:0;left:0;right:0;z-index:1000;background:#fff;border-bottom:1px solid #e2e8f0;box-shadow:0 6px 24px rgba(2,6,23,.07);transform:translateY(-100%);transition:transform .28s ease;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} #r1fh.is-visible{transform:translateY(0)} #r1fh *{box-sizing:border-box} #r1fh .r1fh-inner{width:min(100% - 3rem,80rem);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;padding:12px 0} #r1fh .r1fh-brand{display:flex;align-items:center} #r1fh .r1fh-brand img{height:40px;width:auto;display:block;max-width:none} #r1fh .r1fh-menu{display:flex;align-items:center;gap:4px;margin:0 24px} #r1fh .r1fh-menu>a{padding:10px 14px;border-radius:10px;font-size:14.5px;font-weight:600;color:#0f172a;text-decoration:none;opacity:.82;transition:.15s} #r1fh .r1fh-menu>a:hover{opacity:1;background:rgba(4,120,87,.08)} #r1fh .r1fh-drop{position:relative} #r1fh .r1fh-drop-btn{display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:10px;font-size:14.5px;font-weight:600;color:#0f172a;background:none;border:0;cursor:pointer;font-family:inherit;opacity:.82} #r1fh .r1fh-drop-btn:hover{opacity:1;background:rgba(4,120,87,.08)} #r1fh .r1fh-drop-btn svg{width:13px;height:13px;transition:.2s} #r1fh .r1fh-drop:hover .r1fh-drop-btn svg,#r1fh .r1fh-drop.open .r1fh-drop-btn svg{transform:rotate(180deg)} #r1fh .r1fh-drop-panel{position:absolute;top:calc(100% + 12px);left:0;min-width:280px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 18px 45px rgba(15,23,42,.18);padding:10px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s} #r1fh .r1fh-drop:hover .r1fh-drop-panel,#r1fh .r1fh-drop.open .r1fh-drop-panel{opacity:1;visibility:visible;transform:translateY(0)} #r1fh .r1fh-drop-panel a{display:block;padding:11px 14px;border-radius:10px;color:#0f172a;font-size:14px;font-weight:600;text-decoration:none} #r1fh .r1fh-drop-panel a:hover{background:#ecfdf5;color:#183c28} #r1fh .r1fh-cta{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:12px;padding:11px 20px;font-size:14.5px;font-weight:700;background:#183c28;color:#fff;text-decoration:none;transition:background .2s ease} #r1fh .r1fh-cta:hover{background:#133020} #r1fh .r1fh-toggle{display:none} #r1fh .r1fh-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:26px;height:26px;cursor:pointer;color:#0f172a} #r1fh .r1fh-burger span{display:block;height:2px;background:currentColor;border-radius:2px} #r1fh .r1fh-backdrop{display:none} @media(max-width:900px){ #r1fh .r1fh-burger{display:flex} #r1fh .r1fh-cta{display:none} #r1fh .r1fh-menu{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:#fff;flex-direction:column;align-items:stretch;gap:2px;padding:90px 24px 24px;box-shadow:-20px 0 50px rgba(15,23,42,.25);transform:translateX(100%);transition:.25s ease;overflow-y:auto;z-index:1002;margin:0} #r1fh .r1fh-toggle:checked ~ .r1fh-menu{transform:translateX(0)} #r1fh .r1fh-menu>a{opacity:1} #r1fh .r1fh-drop-btn{width:100%;justify-content:space-between;opacity:1} #r1fh .r1fh-drop-panel{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:#f8fafc;display:none;margin-top:2px} #r1fh .r1fh-drop.open .r1fh-drop-panel{display:block} #r1fh .r1fh-backdrop{display:block;position:fixed;inset:0;background:rgba(2,6,23,.5);opacity:0;pointer-events:none;transition:.25s;z-index:1001} #r1fh .r1fh-toggle:checked ~ .r1fh-backdrop{opacity:1;pointer-events:auto} } /* * Shared in-hero "pill nav" base classes (.r1-pillnav / .r1-nav-menu / .r1-drop). * The wrapping markup differs slightly page to page (see each page-*.css for * page-specific pill-nav tweaks such as padding/background overrides), but * this shared rule set matches the nav link/dropdown behaviour used on every * page and lives here once instead of being repeated in 9 files. */ .r1-nav-menu{display:flex;align-items:center;gap:4px;margin:0 24px} .r1-nav-menu>a{padding:10px 14px;border-radius:10px;font-size:14.5px;font-weight:600;color:inherit;text-decoration:none;opacity:.82;transition:.15s} .r1-nav-menu>a:hover{opacity:1;background:rgba(4,120,87,.08)} .r1-drop{position:relative} .r1-drop-btn{display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:10px;font-size:14.5px;font-weight:600;color:inherit;background:none;border:0;cursor:pointer;font-family:inherit;opacity:.82} .r1-drop-btn:hover{opacity:1;background:rgba(4,120,87,.08)} .r1-drop-btn svg{width:13px;height:13px;transition:.2s} .r1-drop:hover .r1-drop-btn svg,.r1-drop:focus-within .r1-drop-btn svg,.r1-drop.open .r1-drop-btn svg{transform:rotate(180deg)} .r1-drop-panel{position:absolute;top:calc(100% + 12px);left:0;min-width:280px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 18px 45px rgba(15,23,42,.18);padding:10px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s;z-index:60} .r1-drop:hover .r1-drop-panel,.r1-drop:focus-within .r1-drop-panel,.r1-drop.open .r1-drop-panel{opacity:1;visibility:visible;transform:translateY(0)} .r1-drop-panel a{display:block;padding:11px 14px;border-radius:10px;color:#0f172a;font-size:14px;font-weight:600;text-decoration:none} .r1-drop-panel a:hover{background:#ecfdf5;color:#183c28} .r1-toggle{display:none} .r1-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:26px;height:26px;cursor:pointer} .r1-burger span{display:block;height:2px;background:currentColor;border-radius:2px} .r1-backdrop{display:none} @media(max-width:900px){ .r1-burger{display:flex;flex-shrink:0} .r1-pillnav > a:last-child{display:none} .r1-nav-menu{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:#fff;flex-direction:column;align-items:stretch;gap:2px;padding:90px 24px 24px;box-shadow:-20px 0 50px rgba(15,23,42,.25);transform:translateX(100%);transition:.25s ease;overflow-y:auto;z-index:100;margin:0} .r1-toggle:checked ~ .r1-nav-menu{transform:translateX(0)} .r1-nav-menu>a{opacity:1;color:#0f172a} .r1-nav-menu>a:hover{background:#ecfdf5} .r1-drop-btn{color:#0f172a;opacity:1;width:100%;justify-content:space-between} .r1-drop-panel{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:#f8fafc;display:none;margin-top:2px} .r1-drop:focus-within .r1-drop-panel,.r1-drop.open .r1-drop-panel{display:block} .r1-backdrop{display:block;position:fixed;inset:0;background:rgba(2,6,23,.5);opacity:0;pointer-events:none;transition:.25s;z-index:90} .r1-toggle:checked ~ .r1-backdrop{opacity:1;pointer-events:auto} } /* Base pill-nav shell shared by every page (index.html variant with solid background; some pages use a translucent rgba(255,255,255,.8) background — those overrides live in the page's own page-*.css, loaded after this file). */ .r1-pillnav{height:69px;position:relative;z-index:200;display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(100% - 3rem,80rem);margin:18px auto 30px;padding:16px 20px;color:#0f172a} .r1-pillnav::before{content:"";position:absolute;inset:0;z-index:-1;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.8);border-radius:32px;box-shadow:0 1px 4px rgba(15,23,42,.08);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} .r1-pillnav .r1-nav-menu>a,.r1-pillnav .r1-drop-btn{color:#0f172a} @media(max-width:640px){.r1-pillnav{padding:12px 14px}.r1-pillnav::before{border-radius:24px}} /* * Shared header "brand" block (the logo link inside the in-hero pill nav) * and the .site-header wrapper used by templates that place that pill nav * inside an absolutely-positioned transparent header sitting over a hero * image/gradient (front-page.php, page-staffing.php — harmless unused CSS * on templates that don't use this wrapper). * * IMPORTANT: do not add a horizontal `padding`/`margin` shorthand to `.nav` * or `.brand` here (or in any page-*.css) — `.r1-pillnav` above already * owns the pill's padding. A page-level `.nav { padding: Npx 0; }` rule * loaded after this file previously overrode `.r1-pillnav`'s horizontal * padding to 0, which is what caused the "no side padding" header bug. */ .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 60; background: transparent; border-bottom: 0; } .site-header > .container { width: 100%; max-width: none; margin: 0; padding: 0; } .brand { display: flex; align-items: center; gap: 12px; } .brand-logo { height: 45px; width: auto; display: block; } /* * Shared site footer (footer.php). DECISION: only index.html and blog.html * had a real