/* Site footer v2. Dark, small, with sitemap, agent entry point and fine print. Loaded just before

on every page but short.html. Everything is scoped to .sf; the :where() resets at the top keep the site's global footer / p / li / h2 rules out without raising specificity, so the component rules below win by order. */ @font-face{font-family:"Departure Mono";src:url("../fonts/departure-mono/DepartureMono-Regular.woff2") format("woff2"),url("../fonts/departure-mono/DepartureMono-Regular.woff") format("woff");font-weight:100 900;font-style:normal;font-display:swap} .sf{ --sf-font-body:Inter, "Inter Fallback", "Inter Fallback R", Arial, Helvetica, sans-serif; --sf-font-display:"Bricolage Grotesque", "Bricolage Grotesque Fallback", Inter, Arial, sans-serif; --sf-font-meta:"Departure Mono", ui-monospace, monospace; display:block; box-sizing:border-box; width:auto; max-width:none; margin:0; padding:0; justify-content:normal; align-content:normal; /* full bleed: the canvas pages pad sideways */ margin-inline:calc(50% - 50vw); } .sf :where(*){box-sizing:border-box} .sf :where(p, li, ul, ol, dl, dd, dt, h2, h3){margin:0; padding:0; text-align:left; hyphens:manual; font-size:inherit; line-height:inherit; letter-spacing:normal; text-shadow:none} .sf :where(ul, ol){list-style:none} .sf :where(span){color:inherit; margin:0; font-family:inherit} .sf :where(h2, h3){position:static; z-index:auto; font-weight:inherit; background:none; box-shadow:none} .sf :where(h2, h3)::before{content:none} .sf :where(img, svg){vertical-align:middle} .sf :where(a):active{box-shadow:none !important} .sf [hidden]{display:none !important} .sf{ --sf-bg:#050039; --sf-surface:#0f0b52; --sf-line:rgba(255,236,170,.14); --sf-ink:#fff5d1; --sf-muted:#e3d08c; --sf-faint:#a9995f; --sf-accent:var(--sf-yellow); --sf-yellow:var(--yellow-strong, #ffd02f); --sf-pink:#ff7574; /* fixed palette: the accent picker retints --border / --action, and the footer needs its contrast on dark whatever the page accent is */ position:relative; overflow:hidden; isolation:isolate; background:var(--sf-bg); color:var(--sf-ink); border-radius:28px 28px 0 0; font:400 14px/1.55 var(--sf-font-body); text-align:left; -webkit-font-smoothing:antialiased; } /* faint dot grid, echoes the page canvas */ .sf::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:radial-gradient(circle, rgba(255,208,47,.09) .9px, transparent 1.3px); background-size:24px 24px; background-position:12px 12px; mask-image:linear-gradient(to bottom, #000 0%, transparent 70%); } .sf a{color:inherit; text-decoration:none} .sf a:focus-visible,.sf button:focus-visible,.sf summary:focus-visible{outline:2px solid var(--sf-accent); outline-offset:3px; border-radius:4px} .sf__inner{max-width:1120px; margin:0 auto; padding:72px 24px 0} .sf__label{ font:11px/1 var(--sf-font-meta); letter-spacing:.02em; text-transform:uppercase; color:var(--sf-faint); margin:0 0 16px; display:flex; align-items:center; gap:8px; } .sf__label::before{content:""; width:6px; height:6px; background:currentColor; border-radius:1px} /* ---- Top: sign-off + agent card ---- */ .sf__top{display:grid; grid-template-columns:1.35fr 1fr; gap:40px; align-items:start; padding-bottom:56px; border-bottom:1px solid var(--sf-line)} .sf__top--solo{grid-template-columns:1fr} .sf__signoff h2{ font:600 clamp(28px,4vw,42px)/1.08 var(--sf-font-display); letter-spacing:-.02em; margin:0 0 24px; max-width:18ch; } .sf__signoff h2 em{font-style:normal; color:var(--sf-accent)} .sf__actions{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px} .sf__btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; font:500 14px/1 var(--sf-font-body); border:1px solid var(--sf-line); color:var(--sf-ink); transition:background .15s, border-color .15s, transform .15s; } .sf__btn:hover{border-color:rgba(255,236,170,.35); background:rgba(255,236,170,.05)} .sf .sf__btn--primary{background:var(--sf-yellow); color:#050039; border-color:var(--sf-yellow)} .sf .sf__btn--primary:hover{background:#ffdc5c; border-color:#ffdc5c; transform:translateY(-1px)} /* Icons trail the label, the same as the body buttons. */ .sf__btn svg{width:16px; height:16px; fill:currentColor; flex:none; order:1} .sf__status{display:flex; flex-wrap:wrap; gap:8px 24px; margin:0; font:11px/1.5 var(--sf-font-meta); color:var(--sf-muted)} .sf__status div{display:flex; gap:8px} .sf__status dt{color:var(--sf-faint)} .sf__status dd{margin:0; color:var(--sf-ink)} .sf__pulse{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--sf-accent); margin-right:6px; vertical-align:1px; box-shadow:0 0 0 0 rgba(255,208,47,.6); animation:sf-pulse 2.4s ease-out infinite} @keyframes sf-pulse{0%{box-shadow:0 0 0 0 rgba(255,208,47,.55)}70%,100%{box-shadow:0 0 0 7px rgba(255,208,47,0)}} /* Agent card, a small terminal */ .sf__agent{ background:var(--sf-surface); border:1px solid var(--sf-line); border-radius:14px; overflow:hidden; font:11px/1.6 var(--sf-font-meta); } .sf__agentBar{display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid var(--sf-line); color:var(--sf-faint); font-size:11px} .sf__agentBar i{width:9px; height:9px; border-radius:50%; background:rgba(255,236,170,.14)} .sf__agentBar span{margin-left:auto} .sf__agentBody{padding:16px 16px 18px} .sf__agentBody p{margin:0 0 10px; color:var(--sf-muted)} .sf__agentBody .cmd{color:var(--sf-ink)} .sf__agentBody .cmd::before{content:"$ "; color:var(--sf-accent)} /* style.css gives every h3 margin-top:-8px !important */ .sf .sf__agentBody h3{margin:14px 0 6px !important} .sf__agentBody .out{font-family:var(--sf-font-body); font-size:13px; line-height:1.5} .sf__cursor{display:inline-block; width:.6em; height:1.05em; background:var(--sf-accent); vertical-align:-.15em; margin-left:2px; animation:sf-blink 1.1s steps(1) infinite} @keyframes sf-blink{50%{opacity:0}} .sf__agentLinks{display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0; padding:0; list-style:none} .sf__agentLinks a{ display:inline-block; padding:5px 10px; border-radius:6px; font-size:11px; border:1px solid rgba(255,208,47,.28); color:var(--sf-accent); transition:background .15s, color .15s; } .sf__agentLinks a:hover{background:var(--sf-accent); color:#050039} .sf__agentLinks li:first-child a{background:var(--sf-accent); color:#050039} .sf__agentLinks li:first-child a:hover{background:#ffdc5c} /* ---- Sitemap ---- */ .sf__map{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:32px 24px; padding:48px 0; border-bottom:1px solid var(--sf-line)} .sf__map ul{list-style:none; margin:0; padding:0; display:grid; gap:9px} .sf__map li{margin:0; font-size:14px; line-height:1.35} .sf__map a{ color:var(--sf-muted); display:inline-flex; align-items:baseline; gap:6px; font-weight:var(--link-weight-inline, 500); /* the underline grows in on hover; the yellow wash sits behind the text, its padding taken back by the margin so nothing moves */ padding:1px 5px; margin:-1px -5px; border-radius:5px; background:linear-gradient(currentColor,currentColor) 5px calc(100% - 1px)/0 1.5px no-repeat; transition:color .15s, background-size .2s, background-color .15s; } .sf__map a:hover, .sf__map a:focus-visible{color:var(--sf-ink); background-color:rgba(255,208,47,.12); background-size:calc(100% - 10px) 1.5px} .sf__map a:active{background-color:rgba(255,208,47,.2)} .sf__map small{font:11px/1 var(--sf-font-meta); color:var(--sf-faint)} .sf__ext::after{content:"↗"; font-size:11px; color:var(--sf-faint)} /* Elsewhere: social icons in small tiles */ .sf__social{gap:8px} .sf__social a{align-items:center; gap:10px; background:none} .sf__social a:hover{background:none; background-color:rgba(255,208,47,.08)} .sf__icon{ display:inline-grid; place-items:center; flex:none; width:28px; height:28px; border-radius:7px; border:1px solid var(--sf-line); background:rgba(255,236,170,.03); color:var(--sf-muted); transition:background .15s, border-color .15s, color .15s, transform .15s; } .sf__icon svg{width:13px; height:13px; fill:currentColor} .sf__icon img{width:18px; height:18px; filter:grayscale(1) brightness(1.5); opacity:.8; transition:filter .15s, opacity .15s} .sf__social a:hover .sf__icon{background:var(--sf-accent); border-color:var(--sf-accent); color:#050039; transform:translateY(-1px) rotate(-4deg)} .sf__social a:hover .sf__icon--img{background:rgba(255,236,170,.1); border-color:rgba(255,236,170,.3)} .sf__social a:hover .sf__icon img{filter:none; opacity:1} /* the FAQ marquee, kept as a nod to the current footer */ .sf__faq{ display:inline-block; width:108px; overflow:hidden; vertical-align:middle; border-radius:5px; background:var(--sf-pink); color:#050039; font:11px/1 var(--sf-font-meta); padding:4px 0; margin-left:2px; /* short-themes.js cycles this chip through the short-version themes */ transition:background-color .7s ease, color .7s ease; } .sf__faq span{display:inline-block; white-space:pre; animation:sf-marquee 9s linear infinite} /* two identical runs; sliding by half loops without a gap */ @keyframes sf-marquee{to{transform:translateX(-50%)}} .sf__map a:hover .sf__faq{background:#ff9796} /* ---- Credentials + fine print ---- */ .sf__fine{display:grid; grid-template-columns:1fr 2fr; gap:40px; padding:40px 0 32px} .sf__certs{display:flex; flex-direction:column; gap:10px} .sf__cert{ display:flex; align-items:center; gap:12px; padding:10px 12px; background:#fff; color:#050039; border:1px solid #fff; border-radius:10px; transition:transform .15s, box-shadow .15s; } .sf__cert:hover{transform:translateY(-1px); box-shadow:0 0 0 2px var(--sf-accent)} .sf__cert img{width:40px; height:auto; flex:none} .sf__cert b{display:block; font-weight:600; font-size:13px; color:#050039} .sf__cert span{font:11px/1.3 var(--sf-font-meta); color:#4d4878} .sf__legal{columns:2; column-gap:32px; margin:0; padding:0; list-style:none} .sf__legal li{break-inside:avoid; margin:0 0 14px; font-size:12px; line-height:1.55; color:var(--sf-faint)} .sf__legal b{display:block; font:11px/1.4 var(--sf-font-meta); text-transform:uppercase; color:var(--sf-muted); margin-bottom:2px} .sf__legal a{color:var(--sf-muted); text-decoration:underline; text-decoration-color:rgba(255,236,170,.25); text-underline-offset:2px} .sf__legal a:hover{color:var(--sf-ink); text-decoration-color:currentColor} /* ---- Acknowledgement of Country ---- */ .sf__ack{ margin:0; padding:22px 0; border-top:1px solid var(--sf-line); font-size:12px; line-height:1.6; color:var(--sf-muted); text-wrap:pretty; } .sf__ack{display:flex; gap:16px; align-items:flex-start} .sf__flags{display:inline-flex; gap:6px; flex:none; margin-top:2px} .sf__flag{display:block; width:30px; height:20px; border-radius:2px; box-shadow:0 0 0 1px var(--sf-line)} /* ---- Bottom bar ---- */ .sf__bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; padding:18px 0 28px; border-top:1px solid var(--sf-line); /* muted, not faint: at 11px the faint is lower contrast on the footer navy */ font:11px/1.5 var(--sf-font-meta); color:var(--sf-muted); } .sf__bar nav{display:flex; gap:18px} .sf__bar a{color:var(--sf-muted); text-decoration:underline; text-decoration-color:rgba(255,236,170,.25); text-underline-offset:3px; transition:color .15s, text-decoration-color .15s} .sf__bar a:hover{color:var(--sf-ink); text-decoration-color:currentColor} /* ---- Responsive ---- */ @media (width <= 900px){ .sf__top{grid-template-columns:1fr; gap:32px} .sf__map{grid-template-columns:repeat(2, minmax(0,1fr))} .sf__fine{grid-template-columns:1fr; gap:28px} } /* Phones get the short footer: page links, case studies and certifications. Sign-off, agent card, Elsewhere, Files & machines, disclaimers and the acknowledgement stay on desktop. */ @media (width <= 560px){ .sf{border-radius:20px 20px 0 0} .sf__inner{padding:36px 16px 0} .sf__top, .sf__map > div:nth-child(n+3), .sf__fine > div:nth-child(2), .sf__ack{display:none} .sf__map{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:24px 16px; padding:0 0 28px} .sf__map a{flex-wrap:wrap; row-gap:6px} .sf__fine{padding:28px 0 24px} .sf__bar{flex-direction:column; align-items:flex-start; text-wrap:balance} } @media (prefers-reduced-motion: reduce){ .sf__cursor,.sf__pulse{animation:none} .sf__faq span{animation:none; padding-left:6px} .sf *{transition:none !important} } /* Error pages reuse the short layout (body#short), which forces Inter on every element with !important and restyles h2. Win those back here. */ body#short footer.sf{padding:0} body#short .sf h2{font-size:clamp(28px,4vw,42px); letter-spacing:-.02em; font-weight:600; padding:0; margin:0 0 24px} body#short .sf h2, body#short .sf h2 *{font-family:var(--sf-font-display) !important} body#short .sf :is(.sf__label, .sf__status, .sf__agent, .sf__faq, .sf__map small, .sf__cert span, .sf__legal b, .sf__bar), body#short .sf :is(.sf__label, .sf__status, .sf__agent, .sf__faq, .sf__map small, .sf__cert span, .sf__legal b, .sf__bar) *{font-family:var(--sf-font-meta) !important} body#short .sf .sf__agentBody .out{font-family:var(--sf-font-body) !important} body#short .sf p{padding-bottom:0; max-width:none} body#short .sf p.sf__label{font-size:11px; line-height:1} body#short .sf .sf__agentBody p{font-size:11px; line-height:1.6} body#short .sf .sf__agentBody p.out{font-size:13px; line-height:1.5} body#short .sf p.sf__ack{font-size:12px; line-height:1.6; padding-bottom:22px}