/* ========================================================= VARIABLES.CSS Design-system tokens: color, type, layout, spacing. Change the design here — not by hard-coding values elsewhere. ========================================================= */ /* --------------------------------------------------------- @FONT-FACE — REAL FONT FILES Open Sans Hebrew and Blinker: both placed at the project-root fonts/ folder. Only declaring the weights we actually have files for. --------------------------------------------------------- */ @font-face { font-family: "Open Sans Hebrew"; src: url("../fonts/OpenSansHebrew-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans Hebrew"; src: url("../fonts/OpenSansHebrew-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /* SEMIBOLD (600) -- the weight --font-weight-emphasis asks for. The old "Open Sans Hebrew" release that the two files above come from was never cut at 600: it shipped Light, Regular, Bold and ExtraBold only. So until this rule existed, every element set to --font-weight-emphasis was served the Regular file and SMEARED thicker by the browser -- eight places: .hero__cta, .hero-cta, .dl-list__label, .dl-cta__link, .contact-form__submit, .tech-service__cta, .tech-process__step-title, .tech-consult__cta. In March 2021 Google folded Hebrew into the main Open Sans family, which IS cut at 600. OpenSans-SemiBold.ttf (v3.003) carries all 27 Hebrew letters plus 18 nikud marks and declares usWeightClass 600 -- verified in the file itself. The family name below is what the SITE calls this font, not what the file calls itself: that is why the new file joins "Open Sans Hebrew" and nothing else in the site has to change. Every one of those eight places is a standalone button, label or step title -- never a bold word inside a Light paragraph -- so the 2011 and 2021 drawings never sit letter-to-letter. */ @font-face { font-family: "Open Sans Hebrew"; src: url("../fonts/OpenSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } /* Blinker: full family now present in fonts/. Only Light (300) is used anywhere on the site (the eyebrow); add more @font-face rules here if a heavier weight is used later. */ /* EXTRALIGHT (200) -- the weight four elements were already asking for. .pr-hero__code, .pr-hero__title, .pr-related-card__name and .product-card__name have always been set to font-weight: 200. No file was ever declared at 200, so the browser handed all four the Light face below -- a weight heavier than the CSS asked for, on every product and category page since the site was built. This adds the file. Nothing else changes: a request for 400 still resolves down to 300, because CSS font matching looks for heavier faces first and finds none, then walks down. The fourteen other elements that use Blinker are untouched. Chosen by eye against Thin (stem 21), ExtraLight (37), Light (64) and Regular (85) at the sizes the site actually uses. */ @font-face { font-family: "Blinker"; src: url("../fonts/Blinker-ExtraLight.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "Blinker"; src: url("../fonts/Blinker-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } /* --------------------------------------------------------- BLINKER REGULAR, UNDER ITS OWN FAMILY NAME Only Blinker Light (300) is wired above, so ANY element that asks for Blinker at weight 400 is served the Light file -- the browser has nothing else to give it. That is why SILANDE, set in Latin inside the Hebrew About passage, kept reading thinner than the Hebrew around it even after that paragraph went to Regular: the Hebrew had a real 400 file to switch to and the Latin did not. This is declared as a SEPARATE family rather than as `font-family: "Blinker"; font-weight: 400`, and that is deliberate. A @font-face cannot be scoped to a selector, so adding 400 to the "Blinker" family would re-render every element on the site that asks for Blinker at 400 -- about ten of them, including the 6.7px tagline under the logo in both the header and the footer. That tagline's tracking was tuned so the line measures exactly the logo's own 124px; a heavier file makes it wider and it overhangs the mark again, which is a problem that was already found and fixed once. Under its own name the Regular file reaches only what asks for it by name. Measured after the change: SILANDE re-renders (61.6px -> 61.0px, the Regular face being slightly narrower than the Light at the same size) while the header tagline stays at exactly 124.5px. If the whole family is ever wired properly -- which is the better long-term answer -- the two taglines need pinning to var(--font-weight-light) in the same change. */ @font-face { font-family: "Blinker Regular"; src: url("../fonts/Blinker-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* --------------------------------------------------------- COLOR Restrained palette. Do not add colors without approval. --------------------------------------------------------- */ --color-background: #ffffff; --color-surface: #f7f7f5; --color-text: #262626; /* #5A5A5A, raised from #747474. The old value scored 3.96:1 against the About band's #ECECEC and 4.36:1 on the hero wash -- both under the 4.5:1 WCAG AA needs for normal text, and it fell apart on a 1x office monitor where a 300-weight stroke has no pixel to sit on. #5A5A5A clears AA on every surface the site uses: 5.84 on #ECECEC, 6.12 on #F2F1F1, 6.33 on #F6F5F3, 6.43 on #F7F7F5, 6.61 on #FAFAFA, 6.90 on white. It still reads as secondary grey, not as body ink (#262626) and not as strong ink (#000). Twenty rules across the site read this token, which is why one value closes most of the audit. */ --color-text-muted: #5A5A5A; --color-line: #ddddda; --color-accent-blue: #6faec7; --color-accent-red: #cc6b62; /* Hero-only, approved during the Hero build: --color-text-strong is a confirmed-distinct near-black (verified against --color-text via real-browser render comparison, not just screenshot pixel-picking — see hero.css). --color-brand-blue/red match the logo's own ink color and are used for the Hero divider graphic. */ --color-text-strong: #000000; --color-brand-blue: #275d8a; --color-brand-red: #bc3e40; /* --------------------------------------------------------- TYPOGRAPHY — FONT FAMILIES Both Open Sans Hebrew and Blinker are now real, loaded @font-face fonts (see above) — neither renders from a system fallback anymore. --------------------------------------------------------- */ --font-hebrew: "Open Sans Hebrew", Arial, sans-serif; --font-english: "Blinker", Arial, sans-serif; /* --------------------------------------------------------- TYPOGRAPHY — WEIGHTS Do not use 600/700/800/900 unless explicitly requested. --------------------------------------------------------- */ --font-weight-light: 300; --font-weight-regular: 400; /* Hero-only, approved during the Hero build: the eyebrow and headline need a visibly lighter weight than the sitewide default light (300) without changing size. Used ONLY on .hero__eyebrow and .hero__headline. */ --font-weight-extralight: 200; /* Hero-only, approved during the Hero build: the CTA is visibly emphasized versus the paragraph in the approved screenshot. Used ONLY on .hero__cta — not on paragraph, headline, or navigation, which stay at font-weight-light. */ --font-weight-emphasis: 600; /* --------------------------------------------------------- TYPOGRAPHY — SIZE SCALE Restrained fluid scale via clamp(). Values grow gently between mobile and large-desktop viewports. --------------------------------------------------------- */ --font-size-label: 0.75rem; /* small labels / eyebrow */ --font-size-nav: 0.9375rem; /* navigation */ --font-size-body: 1rem; /* body text */ --font-size-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); --font-size-h2: clamp(1.75rem, 1.35rem + 1.2vw, 2.5rem); --font-size-h1: clamp(2.25rem, 1.5rem + 2.6vw, 4rem); /* --------------------------------------------------------- TYPOGRAPHY — LINE HEIGHT & TRACKING --------------------------------------------------------- */ --line-height-body: 1.6; --line-height-heading: 1.15; --letter-spacing-label: 0.08em; --letter-spacing-heading: 0; /* --------------------------------------------------------- LAYOUT 1140px is the approved Figma desktop frame. --------------------------------------------------------- */ --page-max-width: 1140px; --content-max-width: 1000px; --text-max-width: 520px; /* Horizontal page padding — default (desktop). Overridden per breakpoint in responsive.css. */ --page-padding-inline: 32px; /* --------------------------------------------------------- SPACING SCALE Restrained 4/8px rhythm. --------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Section-level vertical rhythm, expressed through the scale rather than one-off values. Adjusted per breakpoint in responsive.css. */ --space-section: var(--space-9); } /* ========================================================= BREAKPOINT REFERENCE CSS custom properties cannot be used inside @media conditions, so the values are documented here and used literally in responsive.css. Large desktop : > 1440px Desktop : 1024px – 1439px Tablet : 768px – 1023px Mobile : < 768px Small mobile : < 480px ========================================================= */