/* ========================================================= FOOTER.CSS Site footer — rebuilt to the approved footer mock-up. The earlier version was a single slim 50px row (logo+tagline, email, copyright all on one line). It is now a stacked closing block, in four parts top to bottom: 1. the SILANDE lockup — wordmark with the tagline BELOW it (it used to sit beside it), at the physical left 2. a hairline rule across the full container width, whose last 170px are the brand line: blue, then red at the very end 3. a meta row — email at the physical left, copyright at the physical right 4. a full-bleed closing photograph Background stays #F9F8F6 — a direct inspection of the real Figma layer (Rectangle 133 in the Home Page frame) confirmed #F9F8F6 as its fill, distinct from Projects' own #F6F5F3 (Rectangle 138) that sits above it. Unchanged by this rebuild. Full-bleed background (like About/Solutions — see layout.css's .content-grid comment) so the surface color extends into the growing side margins on wide viewports instead of leaving a white gap; .content-grid caps the actual content at --page-max-width (1140), same vertical edges as every other section on the page. The photograph deliberately sits OUTSIDE that wrapper so it bleeds the full viewport width. Measurements below were taken off the approved mock-up and scaled to the site's own 1140 container (the mock-up is an export at a wider frame, so its raw pixel values are not used directly — only its proportions and its exact colors). ========================================================= */ .site-footer { background-color: #F9F8F6; } /* Was a flex row; now a plain block stack — the three parts (lockup, rule, meta row) each sit on their own line and handle their own horizontal placement. max-width:none deliberately overrides .content-grid's own --page-max-width (1140) cap, which this element still carries in the markup. Per direct correction, the footer is the one block on the page that is NOT held to the 1140 column: the lockup sits close to the physical left edge of the window and the copyright close to the right, with the rule spanning nearly the whole width between them — as in the approved footer mock-up, where the side margins are ~4.2% of the viewport rather than a fixed inset. footer.css loads after layout.css and both selectors are a single class, so this wins on source order; nothing else that uses .content-grid is affected. padding-inline is viewport-proportional so those margins hold their ratio as the window grows, clamped at both ends: never tighter than 24px on a small window, never looser than 100px on a very wide one (past that the rule would start to look detached from the content rather than framing it). */ .site-footer__inner { max-width: none; padding-inline: clamp(24px, 4.2vw, 100px); padding-block-start: 36px; /* Small, per direct correction: the rule and the two text lines sit close above the roofline in the mock-up. The photo block that follows opens on pale sky in the footer's own tone, so this padding is not read as empty space — it is simply where the roof's apex lands (see the aspect-ratio crop at the bottom of this file, which is calibrated together with this value). Zero, not a small positive value: the meta row's own line box already carries ~5px of descender space below the ink, which is the whole of the gap the mock-up shows between the last line of text and the apex of the roof. */ padding-block-end: 0; } /* --------------------------------------------------------- 1. LOCKUP — wordmark with the tagline stacked beneath it --------------------------------------------------------- */ /* direction:ltr is deliberate and safe here: this box holds only Latin content (the wordmark image and the English tagline), and it makes flex-start resolve to the physical LEFT, which is where the mock-up puts both lines. Without it, the document's RTL would align them to the physical right. margin-right is PHYSICAL, not the logical margin-inline-end, on purpose: logical margins resolve against the ELEMENT'S OWN direction, and this element has just been set to ltr — so margin-inline-end here would resolve to the physical right and push the lockup the wrong way. A physical margin-right:auto on a fit-content block box parks it at the physical left whatever the direction around it. */ .site-footer__logo-link { display: flex; flex-direction: column; align-items: flex-start; direction: ltr; width: fit-content; margin-right: auto; /* Vertical gap between the wordmark and the tagline below it. Same value as the header's lockup (header.css), so the two are identical. It is a flex gap between boxes, not between ink: the tagline's 10px line box carries 2.75px of leading above its cap height, which brings the measured ink-to-ink distance to the 9px the supplied brand lockup shows (verified in the browser, not estimated). */ gap: 7.3px; /* 6.25 scaled with the wordmark, 124 -> 145 */ } /* 124px — the wordmark's own Figma size (124x21), confirmed again against the supplied brand lockup. Was 110px here, which left the footer's wordmark visibly smaller than the header's. Both are now 124px, so the lockup reads identically top and bottom of the page. height:auto keeps the exact aspect. */ .site-footer__logo { width: 145px; /* was 124 */ height: auto; object-fit: contain; } /* Same spec as the header's tagline, so the lockup reads identically top and bottom of the page. */ .site-footer__tagline { /* THE LOCKUP, RESIZED The tagline was unreadable, and two separate things were making it so. The obvious one is size: 6.7px is smaller than anything else on the site. The hidden one is weight -- this line asks for Regular (400), but only Blinker Light (300) was wired as a font file, so the browser had nothing but the Light face to serve it. It was rendering a weight lighter than its own CSS asked for, on every page. Both are fixed here. The family below names "Blinker Regular" first, which is the real 400 file (declared in variables.css), and the size goes to 8.2px. THE TRACKING IS NOT A GUESS. The tagline is meant to span the wordmark's own width exactly -- that is the whole shape of the lockup, and it is what went wrong the last time this was touched, when the line overhung the mark by 15px. At 8.2px in the real Regular face the line measures 135.7px of natural width; the wordmark is now 145px; the difference spread over its 37 characters is 0.031em. Measured in the browser afterwards: wordmark 145.0px, tagline 145.1px. If the size, the weight or the wordmark's width changes again, this number has to be recalculated -- it is derived from all three. */ font-family: "Blinker Regular", var(--font-english), Arial, sans-serif; font-weight: var(--font-weight-regular); font-size: 8.2px; /* was 6.7 */ line-height: 12px; /* was 10, scaled with the size */ letter-spacing: 0.031em; /* recalculated -- see above */ /* Ink, not muted grey: in the supplied brand lockup the tagline is set in solid black under the wordmark, where this had been rendering at --color-text-muted (#747474) and read noticeably lighter than the artwork. --color-text (#262626) is the site's own standard ink and resolves to black at 6.7px; swap it for --color-text-strong (#000000) if a harder black is wanted. */ color: var(--color-text); white-space: nowrap; } /* --------------------------------------------------------- 2. RULE — hairline with the brand line at its right end --------------------------------------------------------- */ /* The grey hairline is this element's own background; the two coloured segments are laid over its right end as flex items. No direction override: in this dir="rtl" document a normal flex row packs its items from the physical RIGHT, so the first DOM child (red) lands at the very right edge and blue follows to its left — exactly the mock-up's order. The remaining space to the left simply shows the grey background. #A7A7A7 is measured off the mock-up (de-antialiased from the export, which renders this line at ~1.5 device px). It is deliberately darker than --color-line (#ddddda, used for the row borders inside page content) — the mock-up's footer rule reads as a real closing line, not a content separator. */ .site-footer__rule { display: flex; height: 1px; margin-block-start: 18px; background-color: #A7A7A7; } .site-footer__rule-segment { height: 100%; } /* 51 + 119 = 170px total — the same brand-line proportions and the same two colors as the page-transition line (red is the short leading segment, blue the long trailing one). These are #CC2F3A / #005E8E, measured exactly off the mock-up — NOT --color-brand-red/blue (#bc3e40 / #275d8a), which the Hero divider uses. The mock-up's footer uses the stronger pair, so the footer rule and the page transition now match each other. */ .site-footer__rule-segment--red { width: 51px; background-color: #CC2F3A; } .site-footer__rule-segment--blue { width: 119px; background-color: #005E8E; } /* --------------------------------------------------------- 3. META ROW — email left, copyright right --------------------------------------------------------- */ /* row-reverse (same technique the previous footer used, and .about__inner): natural DOM order (email, then copyright) reads correctly in markup and for screen readers, while row-reverse flips the visual order so the email lands at the physical LEFT and the copyright at the physical RIGHT. */ .site-footer__meta { display: flex; flex-direction: row-reverse; align-items: baseline; justify-content: space-between; margin-block-start: 20px; } /* --font-size-nav (15px), not --font-size-label (12px): at label size these two lines render visibly smaller than the mock-up, which sets them at roughly the width of the wordmark above. */ /* --------------------------------------------------------- THE LINKS GROUP The meta row is a two-sided bar: something on one edge, something on the other. The accessibility statement had to join it without turning it into a three-way split, which would have pulled the copyright off the edge it sits on. Grouping the statement WITH the e-mail keeps the row two-sided and leaves the copyright exactly where it was. The two are separated by a hairline rather than by space alone, so the pair reads as one block and not as two things that happened to drift together. --------------------------------------------------------- */ .site-footer__links { display: flex; align-items: baseline; gap: 14px; } /* EMPHASIS, BY WEIGHT AND INK -- NOT BY A FAKE BOLD. There is no bold Hebrew font file on this site. Open Sans Hebrew is wired at Light (300) and Regular (400) and nothing else -- Bold, SemiBold, Medium and ExtraBold were all checked for and are not in fonts/. Asking for 600 or 700 here would not load a heavier face; the browser would SYNTHESISE one by smearing the Regular outline, which at 15px reads as a blur rather than as weight. So the emphasis is built from the two things that are real: the step from Light to Regular, which is an actual second font file, and the step from the muted grey to the site's body ink. Beside the e-mail next to it -- still Light, still grey -- the difference is unmistakable, and every pixel of it is drawn from a font that exists. Two classes in the selector on purpose: a lower-specificity rule elsewhere in the cascade sets the colour of links inside the footer, and a single class lost to it. Verified in the browser: this resolves to #262626 at weight 400. If a real bold Hebrew file is ever added to fonts/, this is the place to reconsider -- wire it as its own family, the way "Blinker Regular" is wired in variables.css. */ .site-footer__links .site-footer__a11y { position: relative; padding-inline-start: 15px; font-size: var(--font-size-nav); font-weight: var(--font-weight-regular); color: var(--color-text); text-decoration: none; transition: color 200ms ease; } /* The divider. inset-inline-start is the physical RIGHT in this RTL row -- the side the e-mail sits on. */ .site-footer__links .site-footer__a11y::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.15em; width: 1px; height: 1em; background-color: var(--color-line); } .site-footer__links .site-footer__a11y:hover { color: var(--color-brand-blue, #005E8E); } .site-footer__links .site-footer__a11y:focus-visible { outline: 1px solid var(--color-brand-blue, #005E8E); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { .site-footer__links .site-footer__a11y { transition: none; } } .site-footer__email { font-size: var(--font-size-nav); color: var(--color-text-muted); } /* No dir override, by design. "© SILANDE Israel 2026" is written with the © first in the markup (correct reading order), and in this RTL paragraph the © — a directionally neutral character — resolves to the visual END of the line, rendering as "SILANDE Israel 2026 ©". That is exactly what the mock-up shows. */ .site-footer__copyright { margin: 0; max-width: none; font-size: var(--font-size-nav); color: var(--color-text-muted); white-space: nowrap; } /* --------------------------------------------------------- 4. CLOSING PHOTOGRAPH — full bleed, cropped sky --------------------------------------------------------- */ /* The photograph is a 3:1 frame that is almost all pale sky, with the roofline low in it. The mock-up shows the roofline starting just below the meta row — so the sky above it is cropped away rather than printed, which would otherwise add ~300px of empty grey to the bottom of every page. The crop is done with aspect-ratio + object-position:center bottom, NOT a fixed pixel height: the band's height tracks the viewport, so the roofline keeps the same small distance below the meta row at every window width instead of drifting as the image scales. Only sky is removed — the composition itself, the roof, is never cut. 1440/190 is calibrated so that at a 1440px window the apex of the roof sits ~13px below the footer's last line of text, as in the mock-up — tightened from an earlier 1440/190 (which left ~47px) per direct correction. Calibrated together with .site-footer__inner's padding-block-end above: the apex lands ~5px inside this box's top edge, and that padding supplies the rest of the gap. */ .site-footer__photo { position: relative; aspect-ratio: 1440 / 169; overflow: hidden; } .site-footer__photo-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; } /* The photo's own sky at the crop line is #FAF9F9 and the footer's surface is #F9F8F6 — about 1% apart, which is invisible on most screens but can read as a faint horizontal seam on a wide-gamut display. This short gradient dissolves the join completely, so the content block and the sky read as one continuous surface, exactly as in the mock-up. */ .site-footer__photo::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 28px; background: linear-gradient(to bottom, #F9F8F6, rgba(249, 248, 246, 0)); pointer-events: none; } /* Escape hatch, currently unused: add site-footer--no-photo to a page's