/* ========================================================================= WinBiz — site design layer ------------------------------------------------------------------------- FOUR colours, nothing else: #ffffff white backgrounds, text on dark #f3f4f6 near-white the only "grey" — section separation #000000 black dark backgrounds, all body text #07835f dark green headings, links, every button Why #07835f and not the old #08b07e: the old green scored 2.79:1 against white — below the 4.5:1 readable threshold — so headings and white button labels were washed out. #07835f is the same green, deepened until it clears the bar in BOTH directions: 4.75:1 on white, 4.42:1 on black. The brand colours are CSS variables in the compiled stylesheet, so the six lines under :root re-skin the whole site. Everything after them is damage control: places where two different variables collapsed onto the same colour and something would otherwise vanish. ========================================================================= */ /* ------------------------------------------------------------------------- ONE TYPEFACE — Heebo, in whatever weight the element asked for. The site shipped three (Heebo for body, Karantina for display headings, a stray Open Sans Hebrew on the hero sub-line). Both font variables now point at Heebo, and the sweep below catches the inline `font-family` declarations the variables can't reach. Scoped to main/header/footer so the accessibility widget keeps its own icon font. ------------------------------------------------------------------------- */ :root { --font-sans: "Heebo", Arial, sans-serif; --font-display: "Heebo", Arial, sans-serif; } main, main *, header, header *, footer, footer * { font-family: "Heebo", Arial, sans-serif !important; } /* ------------------------------------------------------------------------- HEADINGS — smaller and heavier across the board. Every section heading rendered at 56px/700. Dropping to 40px/800 buys back vertical space on every screen and reads as more deliberate, not shouted. ------------------------------------------------------------------------- */ main h2 { font-size: clamp(1.55rem, 3.15vw, 2.5rem) !important; font-weight: 800 !important; letter-spacing: -0.015em; } main h3 { font-weight: 800 !important; } :root { --color-brand-cream: #ffffff; /* was #e1e4d8 pale sage */ --color-brand-forest: #ffffff; /* was #0f4c4c deep green */ --color-brand-soft: #f3f4f6; /* was #f5f6f1 warm off-white */ --color-brand-navy: #000000; /* was #0f172a */ --color-brand-mint: #07835f; /* was #37d9a8 bright mint */ --color-brand-mint-dark: #07835f; /* was #08b07e */ } /* ========================================================================= 1. TEXT THAT USED TO SIT ON DEEP GREEN Those sections are white now, and they carried white text. ========================================================================= */ section.bg-brand-forest { color: #000; } /* Attribute selectors match the literal class string — no CSS escaping here. `:not([class*="bg-"])` keeps buttons (white text on a green fill) untouched. */ section.bg-brand-forest .text-white:not([class*="bg-"]) { color: #000 !important; } section.bg-brand-forest [class*="text-white/"]:not([class*="bg-"]) { color: rgba(0,0,0,.72) !important; } section.bg-brand-forest [class*="border-white"] { border-color: rgba(0,0,0,.14) !important; } /* ========================================================================= 1b. HERO HEADLINE — one line at every width Measured, not guessed: "אל תוותרו על החיים שלכם," renders 11.35em wide in this face. The container is roughly (viewport − 40px) on phones and caps at 1272px, so 7.6vw keeps the line inside the column all the way down to a 320px phone, and the 4.42rem ceiling takes over above ~930px. ========================================================================= */ .vm-hero-title { /* the floor has to stay below the vw term at 320px, or the floor wins and the line touches the screen edge on the smallest phones */ font-size: clamp(1.35rem, 4.6vw, 2.9rem) !important; font-weight: 800 !important; white-space: nowrap; min-height: 1.15em; letter-spacing: -0.015em; } /* the two spans are `block`, which forced a line break between them. Inline puts "אל תוותרו על" and the green "החיים שלכם," on one line. */ #hero-line-1, #hero-line-2 { display: inline !important; } /* a quarter off the hero — 560/680/760 → 420/510/570 */ .vm-hero-box { height: 420px; } @media (min-width: 768px) { .vm-hero-box { height: 510px; } } @media (min-width: 1024px) { .vm-hero-box { height: 570px; } } /* ------------------------------------------------------------------------- ליווי עסקים קטנים — hero headline Same scale as the home page: the name of the programme carries the weight and the promise underneath drops to sub-line size (it was competing at the full 5.5rem). em, not rem, so the second line always tracks the first. ------------------------------------------------------------------------- */ .vm-coaching-title { font-size: clamp(1.6rem, 4.6vw, 2.9rem) !important; font-weight: 800 !important; letter-spacing: -0.015em; } .vm-coaching-title > span + span { /* the floor stops it collapsing to 12px on a phone, where 0.46em of a 26px headline is smaller than the body copy underneath it */ font-size: max(16px, 0.46em) !important; /* 700, not 600: green on the dark hero measures 4.42:1. At 21px semibold that misses the 4.5 threshold, but at 21px BOLD it counts as large text and only needs 3.0. Same colour, legitimately readable. */ font-weight: 700 !important; line-height: 1.35 !important; margin-top: 0.55em !important; letter-spacing: 0; } /* The photo is 16:9 but the hero band is much wider than it is tall, so a centred crop sliced the tops of both heads off. 30% pulls the window up to where the faces actually are. And the hero collapsed to 364px once the headline shrank — the floor keeps it reading as a hero, not a banner. */ .vm-coaching-hero { min-height: 480px; display: flex; align-items: center; } @media (max-width: 767px) { .vm-coaching-hero { min-height: 380px; } } img[src*="coaching-hero"] { object-position: center 30%; } /* "איך זה עובד" step circles. `w-28 h-28` existed in the compiled CSS but `w-16` does not, so swapping the class left them 23px wide and 64px tall. Sized here instead, where nothing can silently drop it. */ #process ol > li > span[class*="rounded-full"] { width: 64px !important; height: 64px !important; font-size: 20px !important; } /* ========================================================================= 1c. HEADER The bar is `justify-between` over three items — logo, nav, CTA — so the free space split evenly and left a 295px hole between the nav and the logo. Handing all of it to the nav's far side pulls the links back beside the logo and sends the CTA to the opposite end. Logical properties, so it stays correct in RTL. ========================================================================= */ header nav[class*="md:flex"] { margin-inline-end: auto !important; /* 69px, not 10: "בית" used to end at 1135px and should now end where "תוכניות" sat, at 1076 — exactly 59px further from the logo. */ margin-inline-start: 69px !important; } /* ========================================================================= 2. BUTTONS Every primary button is `bg-brand-mint-dark … hover:bg-brand-forest`. forest is white now, so hovering turned a green button into a white button with white text — it disappeared under the cursor. Hover goes to black instead: still inside the palette, and unmistakable. ========================================================================= */ [class*="bg-brand-mint-dark"][class*="hover:bg-brand-forest"]:hover, [class*="bg-brand-mint-dark"][class*="hover:bg-brand-mint"]:hover, button[class*="bg-brand-mint-dark"]:hover, a[class*="bg-brand-mint-dark"]:hover { background-color: #000 !important; color: #fff !important; } [class*="bg-brand-mint-dark"]:hover svg { color: #fff !important; } /* the outline button (green border, green label) inverts to a solid green fill */ a[class*="border-brand-mint-dark"][class*="hover:bg-brand-mint-dark"]:hover { background-color: #07835f !important; color: #fff !important; } /* green-tinted glows are a fifth colour — neutralise to a plain black shadow */ [class*="shadow-brand-mint"] { box-shadow: 0 10px 26px -14px rgba(0,0,0,.38) !important; } /* ========================================================================= 3. HOVER TINTS THAT LANDED ON WHITE The nav links tint with `hover:bg-brand-cream/40`. cream is white now, so white-on-white = no feedback at all. Send them to the grey. ========================================================================= */ [class*="hover:bg-brand-cream"]:hover { background-color: #f3f4f6 !important; } /* the round icon badges were `bg-brand-cream` — invisible on a white card */ .rounded-full.bg-brand-cream { background-color: #f3f4f6 !important; } .group:hover .rounded-full.bg-brand-cream { background-color: #07835f !important; } .group:hover .rounded-full.bg-brand-cream svg, .group:hover .rounded-full.bg-brand-cream * { color: #fff !important; } /* ========================================================================= 4. EDGES — cards and their section are both white now ========================================================================= */ section.bg-brand-forest article, section.bg-brand-soft article, section.bg-white article { border-color: rgba(0,0,0,.12) !important; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 28px -18px rgba(0,0,0,.22); } section.bg-brand-forest ul li { border-color: rgba(7,131,95,.35) !important; } section.bg-brand-forest ul li span { color: #000 !important; } /* ========================================================================= 4d. HOME PAGE — sections alternate white / grey, in the groups Evyatar defined. A group is one subject, so it keeps one background even when it spans two
elements: 1 hero black 2–3 logos + המסע שלי white 4 על עסק מנצח (cards + button) grey 5–6 מה אומרים עליי + the video testimonials white 7 רגעים מהאינסטגרם (+ follow button) grey 8–9 השירותים שלי + לקחת אחריות (+ button) white 10–11 שאלות ששואלים + בואו נדבר grey nth-of-type, and scoped to body.vm-home, because the grouping is specific to this page — the inner pages keep their own section colours. The grey is #f6f7f9: lighter than the #f3f4f6 it replaces, per "שיהיה קצת פחות אפור", but still separable from white. ========================================================================= */ body.vm-home > main > section:nth-of-type(2), body.vm-home > main > section:nth-of-type(3), body.vm-home > main > section:nth-of-type(5), body.vm-home > main > section:nth-of-type(6), body.vm-home > main > section:nth-of-type(8), body.vm-home > main > section:nth-of-type(9) { background-color: #ffffff !important; } body.vm-home > main > section:nth-of-type(4), body.vm-home > main > section:nth-of-type(7), body.vm-home > main > section:nth-of-type(10), body.vm-home > main > section:nth-of-type(11) { background-color: #f6f7f9 !important; } /* Panels sitting on a grey section would disappear into it, so cards and the contact form go white and lean on their border. The small round icon badges keep the grey — they are inside the cards, not on the section. */ article[class*="bg-brand-cream"], form[class*="bg-brand-cream"], div[class*="bg-brand-cream"]:not([class*="rounded-full"]) { background-color: #ffffff !important; } /* No seam lines any more: the alternating colour is the separation, and a hairline would have cut straight through the two-section groups. */ /* ========================================================================= 4b. WHERE TWO VARIABLES COLLAPSED ONTO WHITE `cream` and `forest` both became white. Anything that used one of them as a fill, a border or a ring against a white parent lost its edge entirely. Attribute selectors throughout — class names here contain `/` and `[`, which attribute selectors match literally and need no escaping. ========================================================================= */ /* `bg-brand-forest` was a deep-green FILL carrying white text. On sections we want it white (that is the whole point of the new look), but on anything smaller — the flagship plan card, and the "ימים 1-10" chips on the h6 page — white-on-white erases it. Those take the brand green instead. The :not() keeps buttons out: they declare `hover:bg-brand-forest` and are already green at rest. */ :not(section)[class*="bg-brand-forest"]:not([class*="hover:bg-brand-forest"]) { background-color: #07835f !important; border-color: #07835f !important; } /* dimmed white (text-white/70 and friends) only reaches 3.1:1 on that green fill. Full white clears the bar. The `:not(section)` ancestor keeps this away from the white sections, where dimmed text must go DARK, not lighter. */ :not(section)[class*="bg-brand-forest"] [class*="text-white/"] { color: #ffffff !important; } /* forest also served as a text colour: the animated stat numbers and 2 icons */ [class*="text-brand-forest"]:not([class*="text-brand-forest/"]) { color: #07835f !important; } /* The giant 01–06 numerals behind each card — green, smaller, fainter. They were positioned at -24px/-8px to bleed off the corner, but the card clips (overflow:hidden), so 23px of the top and 7px of the side were being sliced off. Nudged inside the card so each numeral is whole. They sit on the LEFT while the Hebrew text runs from the right, so they read as a watermark rather than colliding with the heading. */ [class*="text-brand-forest/"] { color: rgba(7,131,95,.13) !important; font-size: clamp(3.4rem, 6vw, 5.5rem) !important; top: 6px !important; left: 14px !important; } .group:hover [class*="text-brand-forest/"] { color: rgba(7,131,95,.20) !important; } /* hairline rules beside the section headings — symmetric so the side the element sits on doesn't matter */ [class*="to-brand-forest"] { background-image: linear-gradient(to right, transparent, rgba(0,0,0,.18), transparent) !important; } /* EVERY form field, card and divider outlined in cream lost its border. Inputs get the strongest edge — an invisible input is unusable. */ [class*="border-brand-cream"] { border-color: rgba(0,0,0,.14) !important; } input[class*="border-brand-cream"], textarea[class*="border-brand-cream"], select[class*="border-brand-cream"] { border-color: rgba(0,0,0,.26) !important; } input[class*="border-brand-cream"]:focus, textarea[class*="border-brand-cream"]:focus { border-color: #07835f !important; } /* review avatars were ringed in cream */ img[class*="ring-brand-cream"] { --tw-ring-color: rgba(0,0,0,.10) !important; } /* (cream-filled panels are handled in 4d — they go white so they stay visible on the grey sections as well as the white ones.) */ /* the two dark plan cards carry a green accent line. On the green card that is green-on-green — gone; on the black card it lands at 4.4:1. White works on both and stays inside the palette. */ article[class*="bg-brand-forest"] [class*="text-brand-mint"], article[class*="bg-brand-navy"] [class*="text-brand-mint"] { color: #fff !important; } /* the disabled "בקרוב" button shipped with Tailwind's grey — a fifth colour */ [class*="bg-gray-"] { background-color: rgba(0,0,0,.10) !important; } [class*="text-gray-"] { color: rgba(0,0,0,.55) !important; } article[class*="bg-brand-forest"] [class*="bg-gray-"], article[class*="bg-brand-navy"] [class*="bg-gray-"] { background-color: rgba(255,255,255,.20) !important; } article[class*="bg-brand-forest"] [class*="text-gray-"], article[class*="bg-brand-navy"] [class*="text-gray-"] { color: rgba(255,255,255,.88) !important; } /* 12px labels at 50% black sit at 4.0:1 — under the line */ [class*="text-brand-navy/50"] { color: rgba(0,0,0,.68) !important; } /* the last two green-on-something cases that landed at 4.3–4.4 instead of 4.5: the footer column headings (green on black) and the required-field asterisks (green on the grey form panel) */ footer [class*="text-brand-mint"][class*="uppercase"] { color: #ffffff !important; } label [class*="text-brand-mint"] { color: #000000 !important; } /* ========================================================================= 4c. VERTICAL RHYTHM Measured before touching anything: every content section ran 112px of padding top AND bottom, so the gap between two sections was 224–249px — nearly a full screen of nothing between the "עוד עליי" button and the next heading. 112 → 62 brings that down to ~124 while keeping sections distinct. The hero and the logo strip set their own heights and are left alone. ========================================================================= */ main > section[class*="py-20"] { padding-top: 62px !important; padding-bottom: 62px !important; } main > section[class*="py-16"] { padding-top: 56px !important; padding-bottom: 56px !important; } /* the two sections that pad from the inside instead of the section box */ main > section > div[class*="py-20"], main > section > div[class*="py-24"], main > section > div[class*="py-28"] { padding-top: 62px !important; padding-bottom: 62px !important; } @media (max-width: 767px) { main > section[class*="py-20"] { padding-top: 52px !important; padding-bottom: 52px !important; } main > section[class*="py-16"] { padding-top: 40px !important; padding-bottom: 40px !important; } main > section > div[class*="py-2"] { padding-top: 52px !important; padding-bottom: 52px !important; } } /* headings sat 24px off their body copy at the old size; at 40px that reads loose. The block that follows a heading gets a tighter, even lead-in. */ main h2 { margin-bottom: 18px !important; } main section > div > div[class*="mb-1"], main section [class*="text-center"][class*="mb-1"] { margin-bottom: 34px !important; } /* ========================================================================= 5. LOGO MARQUEE No tile, no scaling, one size. Every logo file is now pre-normalised to a 264×88 canvas with its artwork centred at a constant optical area, so a fixed box here renders all 61 at identical weight. ========================================================================= */ .vm-tile { background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; width: 132px !important; height: 44px !important; transform: none !important; /* the centre-focus script is gone; belt and braces */ filter: none !important; opacity: .8 !important; } .vm-tile img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: contain !important; } #vm-marquee-track { gap: 34px !important; } /* the strip fades out at both edges — those gradients are inline and still held the old pale sage, which read as a green smudge on white */ #vm-marquee-container > .pointer-events-none:first-of-type { background: linear-gradient(to left, #ffffff, transparent) !important; } #vm-marquee-container > .pointer-events-none:nth-of-type(2) { background: linear-gradient(to right, #ffffff, transparent) !important; } /* ========================================================================= 6. THE LAST TWO OFF-PALETTE SPOTS ========================================================================= */ /* "עקבו אחריי באינסטגרם" carried Instagram's own five-colour brand gradient (#f09433 → #bc1888) as an inline style. Every button is green. Scoped to Instagram links — this sheet now loads on every page, and a bare `[style*="linear-gradient(45deg"]` would repaint anything that happens to use a 45° gradient elsewhere on the site. */ a[href*="instagram"][style*="linear-gradient"] { background: #07835f !important; } /* two gradients had the old greens written into them as literal hex rather than as variables, so the :root swap could not reach them: the course video placeholder, and a faint glow behind that section */ [style*="0F4C4C"], [style*="0f4c4c"] { background: linear-gradient(135deg, #07835f 0%, #000000 100%) !important; } /* The "על עסק מנצח" section and the closing CTA each carried decorative green washes — two radial gradients plus a pair of 384px blurred green circles. They were tuned for the old deep-green background and are a colour nobody asked for on white. Removed outright. */ [class*="radial-gradient"] { background-image: none !important; } [class*="rounded-full"][class*="blur-"] { background-color: transparent !important; } /* on black, hovering a link from white to green LOWERS contrast. Brighten to pure white instead — same palette, clearer feedback. */ footer [class*="hover:text-brand-mint"]:hover, section.bg-brand-navy [class*="hover:text-brand-mint"]:hover { color: #ffffff !important; } @media (max-width: 640px) { .vm-tile { width: 104px !important; height: 35px !important; } #vm-marquee-track { gap: 22px !important; } }