/*! site footer (Figma component set `footer` 6100:60159) — copied verbatim from the demo's app.css lines 2627–2760 (commit 7df0d35). Phase 1 of demo-port: do not retype values here. */ .site-footer{/* breathing room from whatever the page ends with — 60 in every brand */margin-block-start:var(--sp-x-spacious);background:var(--bg-basic-brand-inverse);/* the top rule is a border-width/thick band carrying the three-stop brand gradient, left to right (Figma stops 0-33.34 / 33.35-67.68 / 67.68-100). In eye all three resolve to white-0, so the band is simply invisible. */border-block-start:var(--bw-thick) solid transparent;border-image:linear-gradient(to right, var(--border-gradient-1) 0 33.34%, var(--border-gradient-2) 33.34% 67.68%, var(--border-gradient-3) 67.68% 100%) 1;padding:var(--sp-loose) var(--sp-normal) var(--sp-snug);display:flex;justify-content:center;} /* ham is the exception: its footer surface is bg/surface/1, not the brand inverse (Figma 6100:62994 / 62996 / 62998) */ [data-brand="ham"] .site-footer{background:var(--bg-surface-1);} @media (min-width:768px){ .site-footer{padding-inline:var(--sp-loose);} } @media (min-width:1024px){ .site-footer{padding-inline:var(--sp-x-loose);} } .site-footer__main{width:100%;max-width:var(--maxw-salamandra);display:flex;flex-direction:column;gap:var(--sp-loose);}/* basic-line (Figma `basic-line`, Property 1=dotted) — hairline, no height */ .site-footer__rule{border-block-start:var(--bw-thin) dotted var(--border-hairline);}/* --- footer-top: the brand mark, its own height per brand --------------- */ .site-footer__top{display:flex;} .site-footer__logo{display:flex;align-items:center;--fill-0:var(--bg-basic-brand);color:var(--bg-basic-brand);}/* the mark sits inside an , and a bare link takes the browser's own blue — which every currentColor path then inherits. Hand the colour back. */ /* one logo per brand: all of them are in the markup, and the brand switch picks one */ .site-footer__logo svg{display:none;width:auto;} [data-brand="eye"] .site-footer__logo .logo-eye{display:block;width:158px;height:40px;} [data-brand="shakuf"] .site-footer__logo .logo-shakuf-mono{display:block;width:110px;height:40px;} [data-brand="ham"] .site-footer__logo .logo-ham-stamp{display:block;height:60px;} [data-brand="boker"] .site-footer__logo .logo-boker{display:block;width:65px;height:80px;}/* the locality name: live text on display/lg, 15 to the left of the bubble */ .site-footer__locality{display:none;} [data-brand="boker"] .site-footer__locality{display:block;color:var(--content-primary);} .site-footer__logo .site-footer__lockup{display:flex;align-items:center;gap:var(--sp-snug);text-decoration:none;}/* shakuf's footer mark is the mono drawing — it takes the row's colour, not the brand fill */ [data-brand="shakuf"] .site-footer__logo{color:var(--bg-basic-black);}/* --- the four columns --------------------------------------------------- desktop: one row of four (1280 - 3×40 gap = 4×290) tablet: the first three in a row, the forms column full width under them mobile: מדורים is hidden, two columns, forms full width */ .site-footer__content{display:flex;flex-wrap:wrap;gap:var(--sp-loose) var(--sp-x-loose);} .site-footer__column{display:flex;flex-direction:column;gap:var(--sp-normal);flex:1 1 0;min-width:0;} @media (max-width:1023px){ .site-footer__column{flex-basis:calc((100% - 2 * var(--sp-x-loose)) / 3);} .site-footer__column--forms{flex-basis:100%;} } @media (max-width:767px){ .site-footer__column--sections{display:none;} .site-footer__column{flex-basis:calc((100% - var(--sp-x-loose)) / 2);} .site-footer__column--forms{flex-basis:100%;} } .site-footer__column-title{color:var(--content-label);margin:0;} /* the system column carries the brand's own name in boker */ .footer-title--boker{display:none;} [data-brand="boker"] .footer-title--base{display:none;} [data-brand="boker"] .footer-title--boker{display:inline;} .site-footer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-snug);} .site-footer__item{color:var(--content-primary);text-decoration:none;} .site-footer__item:hover{text-decoration:underline;} /* both nav lists render; the active brand's shows (PROCEDURES §8) */ .footer-list--ham, .footer-list--boker{display:none;} [data-brand="ham"] .footer-list--base{display:none;} [data-brand="ham"] .footer-list--ham{display:flex;} [data-brand="boker"] .footer-list--base{display:none;} [data-brand="boker"] .footer-list--boker{display:flex;}/* the social rows are the shared .share-line component; only the label style and the link reset are footer business */ .site-footer__social{text-decoration:none;} .site-footer__social:hover .lbl{text-decoration:underline;}/* --- forms column: news tips over the newsletter promo ------------------ */ .site-footer__column--forms .site-footer__tips{display:flex;flex-direction:column;align-items:center;gap:var(--sp-tight);} .site-footer__form-title{color:var(--content-tertiary);text-align:center;margin:0;} .footer-newsletter .submit-field{width:100%;} .footer-newsletter .newsletter-terms{width:100%;}/* --- the group marks --------------------------------------------------- */ .site-footer__bottom{display:flex;justify-content:center;} .site-footer__sisters{display:flex;align-items:center;justify-content:center;gap:var(--sp-x-loose);--fill-0:var(--bg-basic-black);color:var(--bg-basic-black);} .site-footer__mark{display:flex;align-items:center;} .site-footer__sisters-row{display:flex;align-items:center;gap:var(--sp-x-loose);} .site-footer__mark svg{display:block;width:auto;} .site-footer__mark .logo-independent-press{width:114px;height:30px;} .site-footer__mark .logo-eye-mono{width:87px;height:22px;} .site-footer__mark .logo-ham-mono{width:30px;height:34px;} .site-footer__mark .logo-shakuf-mono{width:49px;height:18px;} .site-footer__mark .logo-boker-mono{width:29px;height:36px;} /* all five marks, in every brand and at every width (Ronen 2026-08-16). The shakuf / ham / boker desktop frames are missing their own mark in Figma; that is not the intent, so nothing is dropped here. */ @media (max-width:767px){/* the column variant stacks the group mark over the four sisters, and their reading order changes: ham, eye, shakuf, boker (Figma 6101:65218) */ .site-footer__sisters{flex-direction:column;gap:var(--sp-tight);} .site-footer__sisters-row .site-footer__mark--ham{order:-1;} }/* --- the legal line ---------------------------------------------------- */ .site-footer__legal{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-loose);} .site-footer__legal p{margin:0;color:var(--content-secondary);} .site-footer__credit{direction:ltr;unicode-bidi:isolate;} @media (max-width:767px){ .site-footer__legal{flex-direction:column;align-items:center;gap:var(--sp-tight);} }/*! the port's own one declaration, and the last sheet is where it goes because it names controls from three of them. The demo draws exactly three of the design's controls as a `