:root { --blue-primary: #0a4f7f; /* Deep Trust Blue */ --cyan-accent: #4DD0E1; /* Cyan Accent */ --teal-secondary: #80CBC4; /* Warm Soft Teal */ --charcoal-text: #333333; /* High-Contrast Text Dark Charcoal */ --grey-bg: #f5f5f5; /* Light Muted Grey background */ --card-bg: #ffffff; --border-color: #ddd; /* Homepage solution-tile palette, one pair per category (new skin) */ --card-work-bg: #f0fdf4; --card-work-border: #bbf7d0; --card-work-text: #166534; --card-edu-bg: #f0f9ff; --card-edu-border: #bae6fd; --card-edu-text: #075985; --card-leisure-bg: #fefce8; --card-leisure-border: #fef08a; --card-leisure-text: #854d0e; --card-community-bg: #faf5ff; --card-community-border: #e9d5ff; --card-community-text: #6b21a8; } /* Real, recurring bug class (found live at least 5 times separately - header-notif-bell/count, session-nav, admin-preview-toolbar, region-picker, and now contact-supplier-categories-group/ contact-subject-group, explicit ask 2026-09-23: "why regular user show supply name field why supplier shows subject" - each one its own per-selector [hidden] override below, never fixed at the root): ANY class rule setting its own `display` has the exact same specificity as the browser's default `[hidden] { display: none }` UA rule, and wins by later-in-cascade order - so `element.hidden = true` silently does nothing visible for every element whose class sets `display`. One real fix, permanently, instead of a 6th one-off patch the next time this bites a new element. */ [hidden] { display: none !important; } /* Israeli accessibility compliance (IS 5568 / WCAG2.0 AA) - a "skip to main content" link (WCAG 2.4.1 Bypass Blocks): visually hidden until focused, so keyboard/screen-reader users can jump past the header + nav on every page instead of tabbing through it every time. */ .skip-link { position: absolute; top: -999px; right: 1rem; z-index: 2147483000; /* above the accessibility widget, which covered Cancel on phones */ background: var(--blue-primary); color: white; padding: 0.75rem 1.25rem; border-radius: 0 0 6px 6px; text-decoration: none; font-weight: bold; } .skip-link:focus { top: 0; } /* Screen-reader-only text: visually hidden but still announced (used to give icon-only / symbol-only content, like the star-rating glyphs, a real text alternative instead of relying on the glyphs alone). */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Visible keyboard-focus outline on every interactive element (none of the existing rules removed the browser default, but this makes it consistent and clearly visible against both the light page background and the dark header - WCAG 2.4.7 Focus Visible). */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--cyan-accent); outline-offset: 2px; } /* #main-content is focused programmatically on every route change (see app.js) purely so assistive tech announces the new page - it is not a real control, so it gets no visible ring of its own (which would otherwise draw a box around the entire page on every navigation). */ #main-content:focus-visible { outline: none; } /* overflow-x lives on , not - real bug found while chasing a sticky-title report: setting only overflow-x (not -y) on an element forces the browser to compute its overflow-y as "auto" too (a CSS overflow-spec quirk), which turned into its own independent scroll container fighting the real viewport/document scroller. That desynced window.scrollY from the actual scroll position and made position:sticky (header, page titles) stick at the wrong offset or not at all depending on how far you'd scrolled. IS the viewport's own scrolling box in standards mode, so the same rule there just clips horizontal overflow with no separate scroll context created. */ html { overflow-x: hidden; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; background-color: var(--grey-bg); color: var(--charcoal-text); } /* Sticky (explicit ask) - stays pinned to the top of the viewport on scroll instead of scrolling away with the page. z-index keeps it above the page content flowing underneath it; the hamburger dropdown (z-index 10, below) still layers correctly since it's a child of this same header, not a sibling competing for this stacking context. */ header { background-color: var(--blue-primary); color: white; padding: 1rem; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 0.25rem; position: sticky; top: 0; z-index: 20; } header h1 { margin: 0; font-size: clamp(1.3rem, 1rem + 3vw, 1.8rem); display: flex; align-items: center; position: relative; } .app-title-text { position: relative; z-index: 1; } /* "enlarge the logo w/o changing the title font size/pos" (explicit ask, 2026-09-23) - already decoupled by construction: position: absolute takes this fully out of the title text's own layout flow, so its size can change freely with zero effect on the text's own font-size or position (still driven entirely by header h1's own font-size, untouched here). */ .app-logo { position: absolute; right: 0; top: 50%; /* "there are top and bottom margins, enlarge it by 12% more" (explicit ask, 2026-09-23) - 2.6em * 1.12. */ width: 2.912em; height: 2.912em; transform: translateY(-50%); opacity: 0.55; z-index: 0; } /* Always-visible primary actions (explicit ask: "only some buttons should migrate" into the hamburger) - home + job search stay right next to the title; everything else collapses behind the menu. */ .primary-nav-link { color: var(--blue-primary); text-decoration: none; background: white; padding: 0.4rem 0.9rem; border-radius: 999px; font-weight: bold; font-size: 0.9rem; } .primary-nav-link:hover { background: var(--grey-bg); } /* Icon-only header buttons (explicit ask: monochrome icon, not text/emoji) - square instead of a wide text pill, icon centered. Shared by the home, jobs (briefcase) and education (grad cap) shortcuts next to the logo - room left for a 4th (leisure/trips) once that area has a real screen. */ .icon-nav-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.3rem; width: clamp(1.6rem, 1.2rem + 2vw, 2.1rem); height: clamp(1.6rem, 1.2rem + 2vw, 2.1rem); box-sizing: border-box; } /* Jobs/education header shortcuts: icon + real text label on desktop (explicit ask: a bare icon there duplicated the old "משרות" pill) - collapses to the same icon-only square as the home button once mobile width makes room tight (see the max-width:640px block below). */ .nav-link-with-label { display: inline-flex; align-items: center; gap: 0.35rem; } /* "Shade" for whichever of these header shortcuts matches the current route (explicit ask) - toggled by updateActiveIconNav() in app-nav.js on every route change. */ .primary-nav-link.active { background: var(--cyan-accent); color: var(--blue-primary); } nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } /* .build-info's own #595959 (below) is tuned for a light footer background - inside the dark blue nav dropdown that same dark grey text was nearly invisible against the dark background (real bug report). Both classes sit on the same element (class="build-info nav-build-info"), and single-class selectors tie on specificity, so a plain `.nav-build-info { color }` here lost to `.build-info`'s own rule (later in this file) instead of overriding it - qualified with both classes to actually win. */ .nav-build-info { flex-basis: 100%; opacity: 0.85; font-size: 0.85rem; } .build-info.nav-build-info { color: white; } /* "all those 4 zones should be under 1 sub menu - איזור ספקים" (explicit ask, 2026-09-22) - real nav-button links (unlike .legal-links below, these stay the normal white-pill look, they're real primary actions), just visually grouped under one small heading instead of run loose among every other menu item. */ .supplier-zone-links { flex-basis: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; } .supplier-zone-heading { font-size: 0.75rem; font-weight: 600; color: white; opacity: 0.75; padding: 0.2rem 0; } /* Legal links (privacy / terms / accessibility) inside the main menu - explicit ask: reachable from the main menu, not just the footer. Left as plain `nav a` links (same white-pill/blue-text style as every other main-nav link) rather than overriding color - an override here previously left white text on the same links' own white background. Explicit follow-up ask: each of the 3 links should be its own row, not run inline in a single row. */ .legal-links { flex-basis: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; padding-top: 0.25rem; border-top: 1px solid rgba(255, 255, 255, 0.25); } /* Plain, muted text links (not the white-pill nav-button look every other main-nav link uses) - explicit follow-up ask: the pill buttons made this row look like a broken/foreign chunk of the menu. */ .legal-links a { background: none; color: white; opacity: 0.85; text-decoration: underline; font-weight: normal; font-size: 0.8rem; padding: 0.2rem 0; border-radius: 0; } .legal-links a:hover { opacity: 1; background: none; } .statement-placeholder { background: #fff3cd; color: #664d03; padding: 0.1rem 0.4rem; border-radius: 4px; font-weight: bold; } /* Hamburger menu button (explicit ask) - hidden on wide screens where the nav already fits in one row; shown only at the mobile breakpoint below, where it collapses the whole nav (including login/session) into a toggleable dropdown instead of an overflowing row of buttons. */ .hamburger-btn { order: -1; flex-shrink: 0; margin-right: -1rem; display: inline-flex; align-items: center; background: none; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 6px; color: white; font-size: 1.3rem; line-height: 1; padding: 0.35rem 0.6rem; cursor: pointer; } /* Nav is always menu-driven behind the hamburger now, at every width - not just mobile (explicit bug report: on a wider screen the full nav row still showed inline next to the hamburger button). Explicit follow-up: it must look like a real dropdown rectangle anchored on the left, not a full-width strip stacked under the title. */ #main-nav { display: none; } #main-nav.open { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; position: absolute; top: 100%; right: 1rem; width: 320px; max-width: calc(100vw - 2rem); max-height: calc(100vh - 5rem); overflow-y: auto; margin-top: 0.5rem; background: var(--blue-primary); border-radius: 10px; padding: 0.75rem; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); z-index: 10; box-sizing: border-box; } .notif-banner { display: flex; align-items: center; gap: 0.4rem; } .notif-banner:hover { background: var(--grey-bg); } .notif-bell { font-size: 1.1rem; } /* "new alerts conter yellow bell + counter in main app title" (2026-09- 20) - the always-visible header bell (index.html), separate from the older .notif-banner text link still inside the hamburger menu. A real icon (not the 🔔 emoji, whose own color can't be reliably overridden) tinted yellow via currentColor, same pattern the header's other icon links already use. */ .header-notif-bell { display: inline-flex; align-items: center; gap: 0.3rem; color: #ffd54f; padding: 0.4rem; border-radius: 999px; } .header-notif-bell:hover { background: rgba(255, 255, 255, 0.15); } .header-notif-count { background: #e53935; color: white; font-size: 0.7rem; font-weight: bold; min-width: 1.1rem; height: 1.1rem; line-height: 1.1rem; border-radius: 999px; display: inline-block; text-align: center; padding: 0 0.25rem; box-sizing: border-box; } nav { gap: 0.5rem; align-items: center; } nav a { color: white; text-decoration: none; padding: 0.4rem 0.9rem; font-weight: bold; font-size: 0.9rem; } nav a:hover { background: rgba(255, 255, 255, 0.15); border-radius: 6px; } /* Admin role/QA preview toolbar (explicit ask, corrected placement 2026-09-20: "In menu, not anywhere else's" -- lives inside #main-nav now, like every other menu item; #main-nav.open is a column flex layout so this already gets its own full-width row for free, no flex-wrap trick needed here (unlike .nav-build-info's own, which is about THAT element's sizing, not positioning it within the column). Its own inner row (select + checkbox) still lays out horizontally. */ .admin-preview-toolbar { display: flex; align-items: center; gap: 0.75rem; font-size: 0.8rem; background: rgba(255, 255, 255, 0.15); border-radius: 8px; padding: 0.35rem 0.6rem; } .admin-preview-field { display: flex; align-items: center; gap: 0.3rem; color: white; font-weight: normal; } .admin-preview-field select { font-size: 0.8rem; padding: 0.15rem 0.4rem; } #session-nav { color: white; display: flex; align-items: center; gap: 0.4rem; } /* #999 was below the 4.5:1 contrast ratio required text needs against --grey-bg at this size (WCAG 1.4.3 / IS 5568) - darkened to a shade that clears it while staying visually "muted". */ .build-info { text-align: center; padding: 0.75rem; font-size: 0.75rem; color: #595959; } .site-footer { text-align: center; padding: 0.5rem 0.75rem 0.75rem; } .accessibility-link { display: inline-block; color: var(--blue-primary); font-size: 0.85rem; text-decoration: underline; } main { padding: 1rem; max-width: 1100px; margin: 0 auto; } .page { display: none; } /* Basic styles for buttons and forms */ button, input, select, textarea { font-size: 1rem; padding: 0.5rem; border-radius: 4px; border: 1px solid #ccc; font-family: inherit; } button { cursor: pointer; } .primary-button { background-color: var(--cyan-accent); color: var(--charcoal-text); border: none; font-weight: bold; padding: 0.65rem 1.25rem; } .secondary-button { background-color: var(--card-bg); color: var(--blue-primary); border: 1px solid var(--blue-primary); } /* Landing page */ .hero { text-align: center; padding: 1rem 0 2rem; } /* Match the new skin's hero typography: a bold dark title with a smaller, muted, width-capped subtitle right under it - shared by every .hero section (landing + education) for consistency. */ .hero h2 { font-size: 1.75rem; color: #0f172a; margin: 0 0 0.5rem; } .hero > p { color: #64748b; font-size: 0.95rem; max-width: 600px; margin: 0 auto; line-height: 1.5; } .region-picker { margin-top: 1rem; display: inline-flex; gap: 0.5rem; align-items: center; } .solutions-hub { text-align: center; margin: 0 0 2rem; } .solutions-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 680px; margin: 0 auto; } /* Colorful category cards (new skin, 4 tiles) - each .solution-tile-* modifier below sets the background/border/text triple; the base rule just handles shape, spacing and the hover lift shared by all four. A fixed (not min-) height keeps all 4 tiles the same size regardless of how much text each one has (explicit ask: "equal rectangles") - justify-content:center then centers whatever content a given tile has within that same-size box, both on the 2-col desktop grid and the single-column mobile stack. */ .solution-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 210px; box-sizing: border-box; background: var(--card-bg); border: 2px solid var(--border-color); border-radius: 16px; padding: 1.5rem 1rem; text-decoration: none; color: var(--charcoal-text); position: relative; text-align: center; transition: transform 0.2s, box-shadow 0.2s; } .solution-tile:hover { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08); } .solution-tile-icon { width: 40px; height: 40px; margin-bottom: 0.6rem; flex-shrink: 0; } .solution-tile h3 { color: inherit; margin: 0; font-size: 1.1rem; } .solution-tile-link { display: flex; flex-direction: column; align-items: center; width: 100%; text-decoration: none; color: inherit; } /* "icrease font to links in main page and make it even in all cubes" / "better, a bit larger" (owner, PR157, 2026-09-29) - ONE shared size and weight for every link inside a cube (the search CTA line, "ℹ מידע נוסף", and the work cube's "ℹ מפת דרכים להכוונה" in guidance-roadmap.css), so no cube's links are smaller than another's. Change the size here only. */ .solution-tile { --cube-link-font-size: 1rem; --cube-link-font-weight: 600; } .solution-tile-cta { display: block; margin-top: 0.5rem; font-size: var(--cube-link-font-size); font-weight: var(--cube-link-font-weight); } .solution-tile-work { background: var(--card-work-bg); border-color: var(--card-work-border); color: var(--card-work-text); } .solution-tile-edu { background: var(--card-edu-bg); border-color: var(--card-edu-border); color: var(--card-edu-text); } .solution-tile-leisure { background: var(--card-leisure-bg); border-color: var(--card-leisure-border); color: var(--card-leisure-text); } .solution-tile-community { background: var(--card-community-bg); border-color: var(--card-community-border); color: var(--card-community-text); } /* Small, subtle \"tell me more\" hint next to the Job/Education tiles and on the job results list - explicit ask: visible and clear, but not competing with the main action for attention. */ .tile-info-link { display: inline-block; margin-top: 0.5rem; font-size: 0.75rem; color: var(--blue-primary); text-decoration: none; } .solution-tile .tile-info-link { color: inherit; opacity: 0.8; font-size: var(--cube-link-font-size); font-weight: var(--cube-link-font-weight); } .tile-info-link:hover, .tile-info-link:focus { text-decoration: underline; } /* Suggestion-box / contact-us button, below the 4 solution tiles (explicit ask: "icon of mail"). Plain outlined pill, not a colored card like the tiles above it - it isn't one of the 4 main solutions. */ .suggestion-box-link { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem; padding: 0.6rem 1.25rem; border: 1px solid var(--border-color); border-radius: 999px; background: var(--card-bg); color: var(--blue-primary); text-decoration: none; font-weight: 600; font-size: 0.9rem; } .suggestion-box-link:hover, .suggestion-box-link:focus { text-decoration: underline; } .suggestion-box-icon { width: 20px; height: 20px; flex-shrink: 0; } /* Same real pill look as .suggestion-box-link above (explicit ask, 2026-09-23: newsletter/monthly-updates link) - a distinct "already subscribed" state (checkmark label, see newsletter.js) gets its own modifier instead of a second near-duplicate pill class. */ .newsletter-signup-link-active { color: var(--cyan-accent, #0aa); border-color: currentColor; } /* The same real flag's menu-checkbox entry point (newsletter.js) - own full-width row like .supplier-zone-links/.legal-links above, plain white text (a checkbox + label, not a nav-button link). */ .newsletter-menu-toggle { flex-basis: 100%; display: flex; align-items: center; gap: 0.4rem; color: white; font-weight: normal; font-size: 0.85rem; padding: 0.2rem 0; } .solution-tile-soon { opacity: 0.85; } .soon-badge { position: absolute; top: 12px; right: 12px; display: inline-block; font-size: 0.7rem; background: rgba(255, 255, 255, 0.6); color: inherit; border-radius: 999px; padding: 0.15rem 0.6rem; } /* Generic two-column screen layout (Employer Directory, Wizard, Employer Profile) */ .screen-content { display: flex; gap: 1.5rem; align-items: flex-start; } /* Info page (job placement types + higher-education blurb) - a plain, readable one-pager, not a two-column layout. */ .info-content { display: block; max-width: 640px; margin: 0 auto; } .info-section { margin-top: 1.5rem; line-height: 1.6; } .info-section h2 { color: var(--blue-primary); font-size: 1.1rem; } .info-section ul { padding-inline-start: 1.25rem; } .info-section li { margin-bottom: 0.6rem; } /* Real provider profile blurb on an info page (explicit ask, 2026-09-22: "to info page of חוויות [as] one of our providers") - one real organization's own description, separated visually as this grows beyond a single provider. */ .provider-profile { padding-top: 1rem; border-top: 1px solid var(--border-color, #ddd); } .provider-profile:first-of-type { border-top: none; padding-top: 0; } .provider-profile h4 { margin-bottom: 0.4rem; } .filters-panel, .side-panel { flex: 0 0 260px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; } /* "wht's the top filter button, semms redundant with search" (2026-09-20) -- real bug: the collapsed-state summary bar (tap-to-re-expand, see the @media (max-width: 640px) block below) only ever got a `display: none` default INSIDE that mobile query, so on any wider viewport it fell back to a plain visible