/* ============================================================ ECHOSHAPE — SITE FOOTER (markup injected by components/footer.js) A full-screen (100vh) snap frame at the end of every page. Product pages only: a file-download banner on top, driven by data attributes on : data-file-title="Frame product file" data-file-url="/assets/frame.pdf" data-file-date="2026-05-16" (rendered as "16 MAY 2026") No data-file-url → no banner (all other pages). Include (before frame.js so its frame-name observer sees us): ============================================================ */ .es-footer{ --cream:#efeae5; /* site dash language: 16px dash / 14px gap */ --fdash-x:repeating-linear-gradient(to right, var(--cream) 0 16px, transparent 16px 30px); --fdash-y:repeating-linear-gradient(to bottom, var(--cream) 0 16px, transparent 16px 30px); --fpad:clamp(28px,5.2vw,76px); /* content inset from the side rails */ width:100%;min-height:100svh; scroll-snap-align:start; display:flex;flex-direction:column; padding:var(--nav) 0 var(--pb); /* full-bleed sides; fixed chrome overlays */ background:var(--prime); /* orange bleeds to the edges — the banner sits inset between the rails */ font-family:'Welcome web',sans-serif; position:relative; } /* the footer carries its own frame lines — always cream, part of its design, they never swap with the scroll state (the fixed orange rails simply disappear against the orange background) */ .es-footer::before,.es-footer::after{content:"";position:absolute;top:0;bottom:0; width:var(--line);background:#efeae5;z-index:102;pointer-events:none} /* above the fixed rails (z-101), else they paint over us */ .es-footer::before{left:var(--m)} .es-footer::after{right:var(--m)} /* ---- product file banner (product pages only) ---- inset to the side rails (orange shows in the margins, per Figma), with a cream perforation-dash under its bottom edge */ .esf-file{ flex:none;display:flex;align-items:center;justify-content:space-between; gap:24px;background:var(--cream); margin:0 var(--m); padding:clamp(24px,5.5vh,56px) var(--fpad); } .esf-file-txt{display:flex;flex-direction:column;gap:10px} .esf-file-txt b{font-size:clamp(17px,1.7vw,24px);font-weight:700;color:var(--prime);text-transform:uppercase;line-height:1.05} .esf-file-txt span{font-size:clamp(11px,1vw,14px);font-weight:400;color:var(--dark);text-transform:lowercase} .esf-pdf{ flex:none;display:flex;align-items:center;justify-content:center; min-width:76px;padding:10px 22px;border:1px solid var(--prime); font-size:clamp(12px,1.1vw,16px);font-weight:700;color:var(--prime); text-transform:uppercase;text-decoration:none;background:transparent; transition:background-color var(--hover-time,.25s) var(--hover-ease,ease), color var(--hover-time,.25s) var(--hover-ease,ease), border-color var(--hover-time,.25s) var(--hover-ease,ease); } .esf-pdf:hover{background:var(--prime);color:var(--cream)} /* ---- orange block ---- */ .esf-main{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--prime)} /* no download banner (all non-product pages) → keep the same vertical rhythm: top padding stands in for the banner's footprint so the logo, columns and bottom row sit where they do on product pages */ .es-footer--nobanner .esf-main{padding-top:clamp(100px,16vh,170px)} .esf-logo{ flex:none;align-self:flex-start; width:clamp(280px,42vw,620px);height:auto; margin:clamp(28px,7vh,72px) calc(var(--m) + var(--fpad)) clamp(24px,6vh,64px); } /* ---- page links — ONE ROW PER PAGE ---- Only 4 pages exist, so the Figma 4-column grid read as four empty columns. Instead: one full-width row per page (rail to rail), rows divide the footer height, a dashed rule between them plus dashed rules top and bottom, cream fill + orange text on hover. To go back to grouped columns when the site grows: see git history (.esf-col / .esf-h and a COLS list in footer.js). */ .esf-cols{ flex:1;min-height:0;display:flex;flex-direction:column; margin:0 var(--m); /* rail to rail */ background-image:var(--fdash-x),var(--fdash-x); background-size:100% 1px,100% 1px;background-position:left top,left bottom;background-repeat:no-repeat; } .esf-row{ flex:1;min-height:0;display:flex;align-items:center; padding:0 var(--fpad);text-decoration:none;color:var(--cream); background-image:var(--fdash-x); background-size:100% 1px;background-position:left bottom;background-repeat:no-repeat; transition:background-color var(--hover-time,.25s) var(--hover-ease,ease), color var(--hover-time,.25s) var(--hover-ease,ease); } .esf-row:last-child{background-image:none} /* the wrapper already draws the bottom rule */ /* page name — the row's only content (no index, no category label, no arrow) */ .esf-t{ font-size:clamp(16px,1.7vw,26px);font-weight:500;line-height:1; } /* hover: cream fill, orange text — same language as the PDF button */ .esf-row:hover{background-color:var(--cream);color:var(--prime)} /* hover on the bottom row: colour only — the email and the social icons darken in place, no fill and no box (unlike the link rows above) */ .esf-mail,.esf-socials a{transition:color var(--hover-time,.25s) var(--hover-ease,ease)} .esf-mail:hover,.esf-socials a:hover{color:var(--dark)} /* ---- bottom row: email + socials ---- */ .esf-bottom{ flex:none;display:flex;align-items:center;justify-content:space-between;gap:24px; padding:clamp(22px,5vh,52px) calc(var(--m) + var(--fpad)); } .esf-mail{font-size:clamp(14px,1.4vw,20px);font-weight:500;color:var(--cream);text-decoration:none} .esf-socials{display:flex;align-items:center;gap:clamp(14px,1.7vw,24px)} .esf-socials a{display:block;line-height:0;color:var(--cream)} .esf-socials svg{width:clamp(28px,2.8vw,40px);height:clamp(28px,2.8vw,40px);display:block} /* ---- footer view (Figma 1:1): while the footer fills the screen the whole fixed chrome inverts — navbar turns orange with cream text/lines/hatches, rails + bottom line turn cream. Class toggled on by footer.js via IntersectionObserver; the navbar logo img is swapped there too. ---- */ .rail-fixed,.bottomline-fixed,.topbar,.navdiv,.ruler,.nav-mid a,.nav-right .pagename{ transition:background-color .25s ease,border-color .25s ease,color .25s ease} /* the footer frame color is #EFEAE5 — the bottom strip flips to orange with an #EFEAE5 line as soon as the footer TOUCHES it (es-footer-touch) */ body.es-footer-touch .bottomline-fixed{background:var(--prime);border-top-color:#efeae5} /* in-page bottom bars (filter bars, pagination, contact email bar) never follow into the footer view — they fade out smoothly as the footer arrives, and on the way back up they fade in while RISING (the height transition eases the 40→80 jump that frame.js sets inline after a snap), leaving only the plain 40px bottom strip (orange + cream line) during the footer view. */ .bottombar{transition:opacity .25s ease,visibility .25s,height .25s ease} body.es-footer-touch .bottombar{opacity:0;visibility:hidden;height:40px !important} /* embedded hosts (e.g. the catalog stage) clip the footer's own frame lines below the fixed rails — there the rails go cream as soon as the footer shows up, so within the footer the lines are always #EFEAE5 like on every other page (over the remaining white content cream is near-invisible, and the snap makes that in-between state momentary) */ body.es-footer-embedded-host.es-footer-touch .rail-fixed{background:#efeae5} body.es-footer-inview .topbar{background:var(--prime)} body.es-footer-inview .nav-mid a, body.es-footer-inview .nav-mid a.active, body.es-footer-inview .nav-right .pagename{color:#efeae5} body.es-footer-inview .navdiv{background:#efeae5} body.es-footer-inview .ruler{border-top-color:#efeae5;border-bottom-color:#efeae5} body.es-footer-inview .hatch{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3.65686' height='5.65685' viewBox='0 0 3.65686 5.65685'%3E%3Cg stroke='%23EFEAE5' stroke-width='0.5'%3E%3Cline x1='0' y1='0' x2='-5.65685' y2='5.65685'/%3E%3Cline x1='3.65686' y1='0' x2='-1.99999' y2='5.65685'/%3E%3Cline x1='7.31372' y1='0' x2='1.65687' y2='5.65685'/%3E%3C/g%3E%3C/svg%3E")} body.es-footer-inview .hatch-nav{ border-left-color:#efeae5;border-right-color:#efeae5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='6' viewBox='0 0 4 6'%3E%3Cg stroke='%23EFEAE5' stroke-width='0.5'%3E%3Cline x1='0' y1='0' x2='-6.505' y2='6'/%3E%3Cline x1='4' y1='0' x2='-2.505' y2='6'/%3E%3Cline x1='8' y1='0' x2='1.495' y2='6'/%3E%3C/g%3E%3C/svg%3E")} /* embedded in an internal scroll container (e.g. catalog stage): the container sits below the navbar and above the filter bar and is inset by the side margins — cancel those and size to the gap */ .es-footer--embedded{ padding:0; /* sized to the plain 40px bottom strip (the host scroll container reaches down to it; the filter bar overlays and hides on footer view) */ min-height:calc(100svh - var(--nav) - var(--pb)); } @media (max-width:760px){ .esf-file,.esf-bottom{padding-left:calc(var(--m) + 16px);padding-right:calc(var(--m) + 16px)} .esf-logo{margin-left:calc(var(--m) + 16px)} .esf-row{padding:0 16px} .esf-t{font-size:clamp(15px,4vw,20px)} /* The bottom row cannot hold the mail and the four socials on one line at phone widths: mail 161 + gap 24 + four 28px icons (154) + 2x32 padding = 403px. It overflowed the document by 8px at 363 and 51px at 320, and sat exactly on the rail at 390 — and no amount of shrinking clears 320, so it stacks instead: mail first, icons under it, both on the left inset (noa, 30.7.26). */ .esf-bottom{flex-direction:column;align-items:flex-start;justify-content:flex-start; gap:clamp(14px,3vh,22px)} }