/* ═══════════════════════════════════════════════════════════════════ Subject search widget — SHARED, not page-specific. The search card, its pill/button, the autocomplete dropdown rendered by limudnaim_search/js/subject_autocomplete.js, and the phone-only full-screen panel. Loaded by the front page and by the intl teacher-search page, so both get one search interaction. Depends on the design tokens in tokens.css (--orange, --card, --line, --ink, --muted, --shadow-*), which must be loaded first. ═══════════════════════════════════════════════════════════════════ */ /* One search instrument: tinted bordered card = white search pill on top, subject-glyph carousel below. */ .ln-search-card { background: var(--orange-soft); border: 2px solid var(--orange); border-radius: 22px; box-shadow: var(--glow-orange); /* vertical air (the hero's focal point) via mt-5/mb-4 helpers in the tpl */ /* no overflow:hidden — the autocomplete dropdown must escape the card */ } .ln-search { position: relative; /* anchors the full-width autocomplete dropdown */ gap: 6px; background: var(--card); border-radius: 18px; } .ln-search:focus-within { box-shadow: 0 0 0 3px rgba(255, 156, 1, .25); } .ln-search-input { flex: 1; min-width: 0; } .ln-search input { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: transparent; border: none; padding: 12px 14px; outline: none; } .ln-search-btn { border: none; cursor: pointer; color: #fff; background: var(--orange); padding: 13px 15px; border-radius: 14px; flex-shrink: 0; } .ln-search-btn:hover { background: var(--orange-d); } /* Autocomplete dropdown (injected by limudnaim_front/js/front_search.js). */ .ln-ac-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; margin: 8px 0 0; /* anchored to the pill: top:100% is its bottom edge */ padding: 5px 0; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow-md); max-height: 240px; overflow-y: auto; } .ln-ac-item { padding: 9px 13px; cursor: pointer; font-size: .9rem; color: var(--ink); } .ln-ac-item:hover, .ln-ac-item.is-active { background: var(--orange-soft); color: var(--orange-d); } .ln-ac-ctx { color: var(--muted); font-size: .78rem; } /* ── Mobile full-screen search ─────────────────────────────────── On phones the hero search takes over the viewport while it has focus, so the suggestion list gets the whole screen instead of a 240px window that showed 5 of 12 rows. front_search.js toggles .ln-search-open on and moves the list to be a direct child of the card, so the flex column below can stretch it; it puts the list back on close. Two things are load-bearing: - height:100%, NOT 100vh. iOS keeps 100vh at the pre-keyboard height, so the list would run under the keyboard and the last rows be unreachable. - transform:none. The card also carries .ln-fade, whose transform would make it the containing block for its own position:fixed. */ /* front_search.js injects this into the card on every viewport, so it has to be hidden by default and not only inside the phone media query below. */ .ln-search-close { display: none; } @media (max-width: 768px) { html.ln-search-open, html.ln-search-open body { overflow: hidden; } html.ln-search-open .ln-search-card { position: fixed; inset: 0; z-index: 60; height: 100%; display: flex; flex-direction: column; /* Nothing in the panel should scroll except the suggestion list itself. */ overflow: hidden; max-width: none; padding: 8px 12px 0; border: 0; border-radius: 0; box-shadow: none; background: var(--card); /* Both !important for real reasons, not laziness: - the card carries Bulma's .my-5, whose spacing helpers are themselves !important, so a plain margin:0 loses and the panel sits 24px down; - .ln-fade's translateY(14px) both offsets it another 14px AND would make the card the containing block for its own position:fixed. Together they were pushing the panel 38px below the top of the screen. */ margin: 0 !important; transform: none !important; } /* Normally the CARD is the orange-bordered tinted frame and .ln-search is the white pill inside it. The panel turns the card into a plain white sheet, so without this the field is white-on-white with no edge at all. */ html.ln-search-open .ln-search { border: 2px solid var(--orange); box-shadow: var(--glow-orange); } html.ln-search-open .ln-search-close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; align-self: flex-start; width: 40px; height: 40px; margin-bottom: 6px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; } /* The carousel sits after the suggestion list. With an empty query the list is hidden, so popular subjects show directly under the field and the panel is never a blank white sheet. Once suggestions appear the carousel is just clutter at the bottom, so hide it: the widget clears the list's inline display when it opens, which is what this selector keys off. */ html.ln-search-open .ln-ac-list:not([style*="display: none"]) ~ nav { display: none; } html.ln-search-open .ln-ac-list { position: static; flex: 1 1 auto; max-height: none; margin: 10px -12px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; } /* Comfortable tap targets now that there is room for them. */ html.ln-search-open .ln-ac-item { padding: 13px 16px; font-size: .95rem; } } /* ── Teacher-search page ───────────────────────────────────────── The engine renders "related subjects / cities" blocks inside its fixed #search-page-top bar, where they are display:none until the bar is expanded. The intl page renders the search field in normal flow and has no expand interaction, so these would show as raw text ("Back to main search: , More subjects..."). Keep them in the markup — they are server-rendered crawlable links — but out of the layout until they get proper chip styling. Same visible result as before; not a content regression. */ .ln-search-bar #related-teaching-fields, .ln-search-bar #related-cities { display: none; } /* Anchor for layouts that place the field outside the homepage pill (the teacher-search bar puts it in a Bulma column). The dropdown is absolutely positioned, so its anchor has to establish a containing block. */ .ln-ac-anchor { position: relative; } /* Search-page variant of the card: same pill and orange button as the homepage hero, but it sits inside the engine's own white bar, so it drops the hero's outer glow and tightens the radius. */ .ln-search-card--bar { box-shadow: none; border-radius: 14px; } .ln-search-card--bar .ln-search { border-radius: 12px; }