/* ============================================================================ COFFEE FESTIVAL EUROPE — die Landauswahl und ihre Liste ---------------------------------------------------------------------------- Herausgeloest aus partner.css, weil dieselbe Auswahl inzwischen an zwei Stellen steht: im Bewerbungsformular und im Anmeldeblock der Startseite. Ein Bauteil an zwei Orten braucht eine Datei, sonst wird aus einer Fassung irgendwann zwei — das ist in diesem Projekt schon zweimal passiert. ========================================================================= */ /* ---------- SHARED AUTOCOMPLETE DROPDOWN --------------------------------- */ .field--search,.field--combo{position:relative} /* the list is portalled to while open, so it is positioned, not laid out — `.is-portal` switches it to fixed and JS writes left/top/width */ .ac{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40; max-height:min(46vh,320px);overflow:auto;margin:0;padding:6px;list-style:none; border-radius:14px;background:rgba(20,18,16,.97); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border:1px solid rgba(244,238,228,.14); box-shadow:0 24px 60px rgba(0,0,0,.55); animation:acIn .28s var(--e-out-expo)} @keyframes acIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .ac.is-portal{position:fixed;right:auto;z-index:260} .ac__row{display:flex;align-items:center;gap:.7rem;padding:.62rem .7rem;border-radius:10px; cursor:pointer;font-size:.9rem;color:var(--bone); transition:background-color .18s,color .18s} .ac__row::before{content:none} .ac__row:hover,.ac__row.is-at{background:rgba(226,85,30,.16);color:var(--ivory)} .ac__flag{flex:none;font-size:1.1rem;line-height:1} .ac__t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ac__sub{flex:none;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-size:.78rem;color:var(--muted)} .ac__meta{flex:none;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em; color:var(--muted)} .ac--combo .ac__row{gap:.6rem} /* the search field's own spinner while Google is answering */ .field__spin{position:absolute;right:.6rem;top:50%;translate:0 -50%; width:15px;height:15px;border-radius:50%; border:1.6px solid rgba(244,238,228,.2);border-top-color:var(--ember); animation:acSpin .7s linear infinite} @keyframes acSpin{to{transform:rotate(360deg)}} /* ---------- COUNTRY COMBOBOX -------------------------------------------- */ /* an underline field, like every other one: the browser's focus box around a borderless input read as a broken second field */ .field--combo input:focus,.field--combo input:focus-visible{outline:none} /* The flag was pinned to the top of the input's box (top:1.35rem), which is the box edge, not the text line — it floated above the country name with a wide gap beside it. Anchoring it to the bottom rule instead puts it on the same optical line as the text, at every field size, and the indent now matches the flag's real width rather than guessing at it. */ .field--combo .combo__flag{position:absolute;left:0;bottom:.74rem; display:block;width:1.35rem;font-size:1.12rem;line-height:1.15;text-align:left; opacity:0;transform:translateX(-5px);pointer-events:none; transition:opacity .35s var(--e-out-cubic),transform .5s var(--e-out-expo)} .field--combo.is-picked .combo__flag{opacity:1;transform:none} .field--combo.is-picked input{padding-left:1.75rem} /* the caption keeps its own indent only while it is still sitting on the line; once it has floated up it goes back to the left edge with every other label */ .field--combo.is-picked label{padding-left:1.75rem} .field--combo.is-picked input:focus + label, .field--combo.is-picked input:not(:placeholder-shown) + label{padding-left:0} .combo__caret{position:absolute;right:0;top:1.2rem;display:grid;place-items:center; width:22px;height:22px;color:var(--muted);background:none;border:0;cursor:pointer; transition:color .3s,transform .45s var(--e-out-expo)} .combo__caret svg{width:11px;height:11px} .field--combo input[aria-expanded="true"] ~ .combo__caret{transform:rotate(180deg);color:var(--ember)} /* a field the lookup just filled flashes once, so nobody has to re-read four boxes to see what changed */ .field.is-filled .field__line{animation:fieldFlash 1.1s var(--e-out-cubic)} @keyframes fieldFlash{ 0%{background:var(--ember);transform:scaleX(0);transform-origin:left} 40%{background:var(--ember);transform:scaleX(1)} 100%{background:rgba(244,238,228,.18);transform:scaleX(1)}}