/* ══ מדריך הגלים בלגונה — /our_menu/ ════════════════════════════════════════ Figma file 8t6wJ0KZvG50zO5aDDnoqT: mobile 2580:16997 (card 2580:17006), desktop level card 2744:21356. Desktop puts the clip in its own 790 column beside a 771 card; mobile stacks header, clip and body into one full-bleed white card. Same markup both times -- .wg-card collapses with `display: contents` on mobile so its children join the stack. The Figma export is Tailwind authored left-to-right, so its first child is the LEFT one: reading order is mirrored here. Sizes are cap-trimmed in Figma, so a measured text height is the cap, not the line box. ────────────────────────────────────────────────────────────────────────── */ /* xcssOldSite.css:9 puts `overflow-x: hidden` on the body, which makes it a scroll container and kills `position: sticky` inside it -- the level headers would only catch on the way back up. `clip` hides the same overflow without creating a container, and `overflow-y` stays visible. Scoped to this page so nothing else on the site changes. */ body:has(#wave_guide_page) {overflow-x: clip;} /* Two bare element rules in app.css reach in here: :4130 ends a selector list with `button`, handing every button `padding: 0 50px; margin: 5px auto`, and :3302 gives every `header` a 72px height below 768px. */ .wg-page button, .wg-header button {margin: 0;} .wg-page header {height: auto;} /* ── Page header ──────────────────────────────────────────────────────────── */ .wg-header {padding: 20px 20px 0;} .wg-header__inner {max-width: 1600px; margin: 0 auto;} .wg-back {display: inline-flex; align-items: center; gap: 5px; margin-bottom: 10px; color: #243D44; font-family: 'Almoni Medium', sans-serif; font-size: 14px; line-height: 18px;} /* Points right, sitting right of the label -- the design's chevron asset with its -90 turn. 5px square: rotated, its diagonal is the glyph's 7.5 width. */ .wg-back__chevron {display: block; flex-shrink: 0; width: 5px; height: 5px; border-top: 2px solid #243D44; border-right: 2px solid #243D44; transform: rotate(45deg);} .wg-title {margin: 0 0 15px; color: #243D44; font-family: 'Almoni Bold', sans-serif; font-size: 24px; line-height: 28px; text-align: center;} .wg-intro {color: #243D44; font-family: 'Almoni Medium', sans-serif; font-size: 16px; line-height: 20px; text-align: center;} /* 1640 = the design's 1601 content row plus the desktop rule's 2x20 padding. Mobile cards run edge to edge, so their gutter lives inside them. */ .wg-page {max-width: 1640px; margin: 0 auto; padding: 30px 0 60px;} .wg-levels {display: flex; flex-direction: column;} /* ── One level ────────────────────────────────────────────────────────────── */ /* Mobile stacks the cards flush: the dark header of the next one separates them. */ .wg-level {display: flex; flex-direction: column; background: #FFF; scroll-margin-top: var(--wg-header-h, 108px);} /* a deep-linked level lands below the site header */ .wg-card {display: contents;} .wg-head {order: 1;} .wg-types-row {order: 2;} .wg-video {order: 3;} .wg-body {order: 4;} /* Header: the name, the divider, then the level number -- centred. Mobile only, it stays put while its own card scrolls past, parked under the site menu. .wrap_header is sticky at the top of every page, but its height depends on the mobile header option in the site settings, so guide.jsx measures it into --wg-header-h. 108 is header A's height, used until the script runs. */ .wg-head {display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px; background: #243D44; position: sticky; top: var(--wg-header-h, 108px); z-index: 2; box-shadow: 0 0 7px rgba(0, 0, 0, 0.10);} .wg-head__level {display: flex; align-items: center; gap: 10px; color: #FFF;} .wg-head__name {font-family: 'Almoni Medium', sans-serif; font-size: 16px; line-height: 20px;} .wg-head__sep {width: 1px; height: 12px; background: rgba(255, 255, 255, 0.4);} .wg-head__number {font-family: 'Almoni Medium', sans-serif; font-size: 16px; line-height: 20px;} /* Wave types: label on the right, chips on the left, one row. Mobile keeps them above the clip; desktop moves them into the dark header. */ .wg-types-row {padding: 20px 20px 10px;} .wg-types {display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;} .wg-types__label {color: #545F64; font-family: 'Almoni Medium', sans-serif; font-size: 14px; line-height: 18px; white-space: nowrap;} .wg-chips {display: flex; align-items: center; gap: 10px;} .wg-chip {display: flex; align-items: center; justify-content: center; height: 27px; padding: 0 10px; color: #243D44; font-family: 'Almoni Bold', sans-serif; font-size: 12px; line-height: 12px; white-space: nowrap; background: #FFF; border: 1px solid #243D44; border-radius: 999px; cursor: pointer;} .wg-chip.is-active {color: #FFF; background: #243D44;} /* ── Clip ─────────────────────────────────────────────────────────────────── */ /* No fixed height and no declared ratio: the clip is as tall as its own proportions make it, so it is always shown whole. The grey is what shows while it loads. */ .wg-video {padding: 0 20px;} .wg-video__media {display: block; width: 100%; height: auto; background: #F4F5F4; border-radius: 12px;} /* ── Body ─────────────────────────────────────────────────────────────────── */ .wg-body {display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 20px;} .wg-body__desc {width: 100%; color: #243D44; font-family: 'Almoni Bold', sans-serif; font-size: 14px; line-height: 18px; text-align: start;} .wg-body__desc p {margin: 0 0 8px;} .wg-body__desc p:last-child {margin-bottom: 0;} .wg-specs {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; width: 100%;} .wg-spec {display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding-inline-start: 10px; border-inline-start: 1px solid #D3D8DA; text-align: start;} .wg-spec__label {color: #545F64; font-family: 'Almoni Bold', sans-serif; font-size: 12px; line-height: 12px;} .wg-spec__value {width: 90%; color: #243D44; font-family: 'Almoni Medium', sans-serif; font-size: 14px; line-height: 18px;} /* The two mobile columns pair the cells differently from the three desktop ones, so each cell is placed by name -- a cell left out for want of a value cannot shift the others. */ .wg-spec[data-spec="level_need"] {order: 1;} .wg-spec[data-spec="instructor"] {order: 2;} .wg-spec[data-spec="control"] {order: 3;} .wg-spec[data-spec="board"] {order: 4;} .wg-spec[data-spec="height"] {order: 5;} .wg-spec[data-spec="suited"] {order: 6;} .wg-spec[data-spec="round"] {order: 7;} /* Desktop only: mobile closes the page with one button instead. */ .wg-body__cta {display: flex; align-items: center; justify-content: center; padding: 15px 20px; color: #FFF; font-family: 'Almoni Medium', sans-serif; font-size: 16px; line-height: 20px; background: #243D44; border-radius: 100px;} .wg-body__cta:hover {color: #FFF;} .wg-cta {display: flex; justify-content: center; margin-top: 54px; padding: 0 20px;} /* ══ Mobile: a sticky CTA bar instead of the site footer ════════════════════ As the design has it (mobile 2580:16997), the one "לצפייה במוצרים" button rides a white bar pinned to the bottom of the screen, and the page has no footer -- the same close as the multipacks pages it leads to. Only the