/* search-bar.css * --------------------------------------------------------------------------- * The manual stay bar (Onde / Datas / Quem) shared by search.html and the * Explorar globe (index.html, "Usar filtros manuais"). Moved out of search.css * verbatim and in its original order, so both pages draw the same bar from one * source. Load it BEFORE search.css: the search page's own overrides live there. * The phone expandable bar is scoped to the stays tab of the search page and to * the index page (same specificity as before, via :is()). * ------------------------------------------------------------------------- */ .search-page__bar:before,.search-page__bar:after{content:"";position:absolute;pointer-events:none}.search-page__bar:before{inset:0;border-radius:inherit;background:var(--liquid-glass-top-sheen)}.search-page__bar:after{inset:1px;border:1px solid var(--liquid-glass-inner-border);border-radius:inherit}.search-page__bar{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(180px,1.1fr) minmax(140px,.76fr) minmax(160px,.86fr) 50px;align-items:center;width:min(860px,100%);margin-top:18px;min-height:56px;padding:5px 6px;border:1px solid var(--liquid-glass-border);border-radius:999px;background:var(--liquid-glass-surface-strong);box-shadow:var(--liquid-glass-shadow);backdrop-filter:blur(26px) saturate(1.28);-webkit-backdrop-filter:blur(26px) saturate(1.28);isolation:isolate;overflow:hidden;will-change:width,min-height,padding,transform;transition:width .38s cubic-bezier(.18,.9,.2,1),min-height .38s cubic-bezier(.18,.9,.2,1),padding .38s cubic-bezier(.18,.9,.2,1),box-shadow .38s ease}.search-page__sector-highlight{position:absolute;top:0;left:0;z-index:0;width:var(--search-sector-w, 0px);height:var(--search-sector-h, 0px);border-radius:999px;pointer-events:none;opacity:0;transform:translate3d(var(--search-sector-x, 0px),var(--search-sector-y, 0px),0);transition:transform .34s cubic-bezier(.2,.86,.2,1),width .34s cubic-bezier(.2,.86,.2,1),height .34s cubic-bezier(.2,.86,.2,1),opacity .2s ease,background .2s ease,box-shadow .2s ease}.search-page__bar.has-sector-highlight .search-page__sector-highlight{opacity:1}.search-page__bar.is-sector-hover .search-page__sector-highlight{background:var(--liquid-glass-item-active-bg)}.search-page__bar.is-sector-active .search-page__sector-highlight{background:var(--liquid-glass-surface);box-shadow:var(--liquid-glass-shadow-reactive)}body.search-page--users .search-page__sector-highlight{display:none}.search-page__field{position:relative;z-index:1;display:grid;align-self:stretch;align-content:center;gap:2px;min-width:0;padding-right:44px;border-radius:999px;transition:color .2s ease}.search-page__field-label,.search-page__filter span{color:var(--theme-text);font-size:.76rem;font-weight:800;max-height:20px;opacity:1;overflow:hidden;transform:translateY(0);transition:max-height .22s ease,opacity .18s ease,transform .22s ease}.search-page__field input,.search-page__filter strong{width:100%;min-width:0;border:0;outline:none;background:transparent;color:var(--theme-text);font:inherit;font-size:.98rem;font-weight:560}.search-page__field input::-webkit-search-decoration,.search-page__field input::-webkit-search-cancel-button,.search-page__field input::-webkit-search-results-button,.search-page__field input::-webkit-search-results-decoration{display:none;-webkit-appearance:none}.search-page__field input::placeholder,.search-page__filter strong{color:var(--theme-text-muted)}.search-page__filter{position:relative;z-index:1;display:grid;align-self:stretch;align-content:center;gap:2px;min-width:0;padding:0 44px 0 26px;border:0;border-left:1px solid var(--theme-border);background:transparent;color:var(--theme-text);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:999px;transition:color .2s ease}.search-page__field:hover .search-page__field-label,.search-page__filter:hover span{color:var(--theme-text)}.search-page__clear{position:absolute;right:14px;top:50%;z-index:2;width:24px;height:24px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--theme-text);cursor:pointer;opacity:.82;transform:translateY(-50%)}.search-page__clear[hidden]{display:none}.search-page__clear:before,.search-page__clear:after{content:"";position:absolute;top:50%;left:50%;width:13px;height:2px;border-radius:999px;background:currentColor}.search-page__clear:before{transform:translate(-50%,-50%) rotate(45deg)}.search-page__clear:after{transform:translate(-50%,-50%) rotate(-45deg)}.search-page__clear:hover,.search-page__clear:focus-visible{opacity:1;background:var(--liquid-glass-item-active-bg);outline:none}.search-page__filter strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}body.search-page--users .search-page__bar{grid-template-columns:minmax(0,1fr) 50px;width:min(680px,100%);padding-left:26px}body.search-page--users .search-page__field{padding-right:44px}body.search-page--users .search-page__filter{display:none}@media(min-width:901px){body.search-page--idle .search-page__bar{grid-template-columns:auto minmax(0,1.05fr) minmax(0,.9fr) minmax(0,1.08fr) 44px;width:min(600px,calc(100% - 32px));min-height:50px;margin-top:0;padding:4px 5px;box-shadow:var(--liquid-glass-shadow)}body.search-page--idle.search-page--users .search-page__bar{grid-template-columns:minmax(0,1fr) 44px;width:min(540px,calc(100% - 32px));padding-left:20px}body.search-page--idle .search-page__field{gap:0;padding-right:32px}body.search-page--idle .search-page__field-label,body.search-page--idle .search-page__filter span{max-height:0;opacity:0;transform:translateY(-4px)}body.search-page--idle .search-page__field input,body.search-page--idle .search-page__filter strong{font-size:.86rem;font-weight:760}body.search-page--idle .search-page__filter{padding:0 32px 0 18px}body.search-page--idle .search-page__clear{right:8px}body.search-page--idle .search-page__submit{width:40px;height:40px}body.search-page--idle .search-page__submit span{width:18px;height:18px}}.search-page__submit{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--liquid-glass-border);border-radius:999px;background:var(--liquid-glass-surface);box-shadow:var(--liquid-glass-shadow-soft);color:var(--theme-text);cursor:pointer;backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);transition:background .32s ease,color .32s ease,box-shadow .32s ease,border-color .32s ease}.search-page__bar.has-query .search-page__submit{background:linear-gradient(to right,#e61e4d 0%,#e31c5f 50%,#d70466 100%);color:#fff;border-color:transparent;box-shadow:0 8px 22px rgba(214,4,102,.32)}.search-page__submit span{position:relative;display:block;width:22px;height:22px}.search-page__submit span:before,.search-page__submit span:after{content:"";position:absolute;display:block;transform-origin:center;transition:top .18s ease,left .18s ease,width .18s ease,height .18s ease,border-width .18s ease,background-color .18s ease,transform .18s ease}.search-page__submit span:before{top:1px;left:1px;width:12px;height:12px;border:2.4px solid currentColor;border-radius:50%;background:transparent;transform:translate(0)}.search-page__submit span:after{top:14px;left:14px;width:8px;height:3px;border-radius:999px;background:currentColor;transform:rotate(45deg)}@media(max-width:900px){.search-page__bar{grid-template-columns:minmax(0,1fr) 46px;width:100%;margin-top:14px;min-height:54px;padding:8px 6px 8px 18px;border-radius:24px}body.search-page--idle .search-page__bar{margin-top:0;min-height:48px;padding:4px 5px 4px 16px;border-radius:999px;box-shadow:var(--liquid-glass-shadow)}body.search-page--idle .search-page__field{gap:0}body.search-page--idle .search-page__field-label{max-height:0;opacity:0;transform:translateY(-4px)}body.search-page--idle .search-page__field input{font-size:.86rem;font-weight:760}.search-page__field-label{font-size:.68rem}.search-page__field input{font-size:.9rem}.search-page__field{padding-right:8px}.search-page__filter{display:none}body.search-page--users .search-page__bar{grid-template-columns:minmax(0,1fr) 46px}.search-page__submit{width:44px;height:44px}.search-page__submit span{width:19px;height:19px}} /* Desktop: the right padding each sector keeps for its clear button (44px) is only reserved while that button shows, so labels like "Selecionar datas" and "Adicionar viajantes" are not cut short by room for a button that is hidden. */ @media (min-width: 901px) { .search-page__bar :is(.search-page__field, .search-page__filter):not(:has(> .search-page__clear:not([hidden]))) { padding-right: 14px; } /* The "Pesquisar com IA" sparkle leads the bar, so the bar keeps no left padding of its own and "Onde" carries the indent (the Utilizadores tab has no sparkle and keeps the bar's 26px). */ :is(body.search-page:not(.search-page--users), body.index-page) .search-page__field--where { padding-left: 18px; } body.search-page--idle:not(.search-page--users) .search-page__field--where { padding-left: 12px; } } /* === Mobile expandable search bar (Where / When / Who) ============================ The active sector (data-active-sector on the .search-page__bar form) expands to fill the row; the other two collapse to round icon pills. The row is a FLEX row and the split is carried by flex-grow (on the active sector, 0 elsewhere): a number, so it interpolates, and the outgoing and incoming sectors share one curve. The active grow is 100, not 1: when taps interrupt each other the grows in flight can sum below 1, and flex then leaves part of the row empty (the search button backed off by a few px); above 1 the room is always shared out in full. (It used to be grid-template-columns, which cannot interpolate 1fr <-> 40px: the widths snapped half-way through, with the text fading around the jump.) The highlight is painted by the sector itself here, so it grows with it instead of chasing it from a measurement. Scoped away from the Utilizadores tab (which is search-only). ======= */ @media (max-width: 900px) { :is(body.search-page:not(.search-page--users), body.index-page) { --ic-where: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2711%27 cy=%2711%27 r=%277%27/%3E%3Cline x1=%2716.5%27 y1=%2716.5%27 x2=%2721%27 y2=%2721%27/%3E%3C/svg%3E"); --ic-dates: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273.5%27 y=%275%27 width=%2717%27 height=%2716%27 rx=%272.5%27/%3E%3Cline x1=%273.5%27 y1=%279.5%27 x2=%2720.5%27 y2=%279.5%27/%3E%3Cline x1=%278%27 y1=%272.5%27 x2=%278%27 y2=%276%27/%3E%3Cline x1=%2716%27 y1=%272.5%27 x2=%2716%27 y2=%276%27/%3E%3C/svg%3E"); --ic-guests: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%278%27 r=%274%27/%3E%3Cpath d=%27M4 20c0-4 4-6.2 8-6.2s8 2.2 8 6.2%27/%3E%3C/svg%3E"); } :is(body.search-page:not(.search-page--users), body.index-page) .search-page__bar { /* The "Pesquisar com IA" sparkle leads the row (a 36px slot), then 40px segments: the bar comes out 50px tall, the same as the AI box it swaps with. */ --seg: 40px; --seg-toggle: 36px; --seg-ease: cubic-bezier(.32,.72,0,1); --seg-pad: 4px; display: flex; column-gap: 4px; padding: var(--seg-pad); min-height: 50px; align-items: center; transition: width .38s cubic-bezier(.2,.86,.2,1), min-height .3s ease, padding .3s ease; } :is(body.search-page:not(.search-page--users), body.index-page) .search-page__bar > .search-mode-toggle { flex: 0 0 var(--seg-toggle); } :is(body.search-page:not(.search-page--users), body.index-page) .search-page__bar > .search-page__submit { flex: 0 0 var(--seg); } /* The moving highlight measured the sector on the old split and then again 460 ms later: two slides in a row. On the phone the sector paints it. */ :is(body.search-page:not(.search-page--users), body.index-page) .search-page__sector-highlight { display: none; } /* Every sector is a rounded pill that clips its content while it grows or shrinks: the text is wiped in from the left instead of spilling over the neighbouring pills. */ :is(body.search-page:not(.search-page--users), body.index-page) .search-page__field--where, :is(body.search-page:not(.search-page--users), body.index-page) .search-page__filter { position: relative; flex: 0 0 var(--seg); min-width: 0; height: var(--seg); align-self: center; align-content: center; border: 0; border-radius: 999px; overflow: hidden; transition: flex-grow .46s var(--seg-ease), height .46s var(--seg-ease), margin .46s var(--seg-ease), background-color .28s ease, box-shadow .28s ease, padding .46s var(--seg-ease); } :is(body.search-page:not(.search-page--users), body.index-page) .search-page__bar[data-active-sector="where"] > [data-search-sector="where"], :is(body.search-page:not(.search-page--users), body.index-page) .search-page__bar[data-active-sector="dates"] > [data-search-sector="dates"], :is(body.search-page:not(.search-page--users), body.index-page) .search-page__bar[data-active-sector="guests"] > [data-search-sector="guests"] { flex-grow: 100; } /* Focused / panel open: the sector lifts, as the desktop highlight does. */ :is(body.search-page:not(.search-page--users), body.index-page) .search-page__bar.is-sector-active[data-active-sector="where"] > [data-search-sector="where"], :is(body.search-page:not(.search-page--users), body.index-page) .search-page__bar.is-sector-active[data-active-sector="dates"] > [data-search-sector="dates"], :is(body.search-page:not(.search-page--users), body.index-page) .search-page__bar.is-sector-active[data-active-sector="guests"] > [data-search-sector="guests"] { background-color: var(--liquid-glass-surface); box-shadow: var(--liquid-glass-shadow-reactive); } /* Collapsed filters carry a soft chip background; where stays flush. */ :is(body.search-page:not(.search-page--users), body.index-page) .search-page__filter { background: var(--liquid-glass-item-active-bg); padding: 0; } :is(body.search-page:not(.search-page--users), body.index-page) .search-page__field--where { padding: 0; } /* Icon centred in the collapsed pill (masked so it takes the text colour). It is pinned to the pill's first 40px, not to its middle, so it fades where it stands while the pill grows instead of sliding along with it. */ :is(body.search-page:not(.search-page--users), body.index-page) .search-page__field--where::before, :is(body.search-page:not(.search-page--users), body.index-page) .search-page__filter::before { content: ""; position: absolute; top: 50%; left: calc(var(--seg) / 2); width: 20px; height: 20px; transform: translate(-50%, -50%) scale(1); background: var(--theme-text); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; opacity: .82; /* Back in only once the text that shared its spot has gone. */ transition: opacity .2s ease .1s, transform .3s cubic-bezier(.2,.86,.2,1) .1s; pointer-events: none; } :is(body.search-page:not(.search-page--users), body.index-page) .search-page__field--where::before { -webkit-mask-image: var(--ic-where); mask-image: var(--ic-where); } :is(body.search-page:not(.search-page--users), body.index-page) [data-search-sector="dates"]::before { -webkit-mask-image: var(--ic-dates); mask-image: var(--ic-dates); } :is(body.search-page:not(.search-page--users), body.index-page) [data-search-sector="guests"]::before { -webkit-mask-image: var(--ic-guests); mask-image: var(--ic-guests); } /* Collapsed content is hidden (icon only). */ :is(body.search-page:not(.search-page--users), body.index-page) .search-page__field-label, :is(body.search-page:not(.search-page--users), body.index-page) .search-page__filter span, :is(body.search-page:not(.search-page--users), body.index-page) .search-page__field input, :is(body.search-page:not(.search-page--users), body.index-page) .search-page__filter strong { opacity: 0; pointer-events: none; transition: opacity .12s ease; } :is(body.search-page:not(.search-page--users), body.index-page) .search-page__bar:not([data-active-sector="where"]) .search-page__field--where .search-page__clear, :is(body.search-page:not(.search-page--users), body.index-page) .search-page__bar:not([data-active-sector="dates"]) [data-search-sector="dates"] .search-page__clear, :is(body.search-page:not(.search-page--users), body.index-page) .search-page__bar:not([data-active-sector="guests"]) [data-search-sector="guests"] .search-page__clear { display: none !important; } :is(body.search-page:not(.search-page--users), body.index-page) .search-page__clear { right: 4px; } /* Room for the clear button only while it shows, so "Pesquisar destinos" fits. */ :is(body.search-page:not(.search-page--users), body.index-page) .search-page__bar :is(.search-page__field--where, .search-page__filter):has(> .search-page__clear:not([hidden])) { padding-right: 30px; } :is(body.search-page:not(.search-page--users), body.index-page) .search-page__submit { width: var(--seg); height: var(--seg); } /* Expanded (active) sector: reveal content, retract the icon, indent text. */ :is(body.search-page:not(.search-page--users), body.index-page) .search-page__bar[data-active-sector="where"] .search-page__field--where, :is(body.search-page:not(.search-page--users), body.index-page) .search-page__bar[data-active-sector="dates"] [data-search-sector="dates"], :is(body.search-page:not(.search-page--users), body.index-page) .search-page__bar[data-active-sector="guests"] [data-search-sector="guests"] { background: transparent; /* Full bar height, as the desktop highlight: it eats the bar's padding above and below, so the lifted pill meets the bar's edges instead of floating inside it. The collapsed pills keep their inset circles. */ height: calc(var(--seg) + 2 * var(--seg-pad)); margin-block: calc(-1 * var(--seg-pad)); /* "Pesquisar destinos" whole in a 351px dock: the text may run to the pill's edge (the curve only starts eating into it above and below the glyphs), and a narrower phone gets an ellipsis, not a hard cut. */ padding: 0 0 0 10px; } :is(body.search-page:not(.search-page--users), body.index-page) .search-page__field--where input { text-overflow: ellipsis; } :is(body.search-page:not(.search-page--users), body.index-page) .search-page__bar[data-active-sector="where"] .search-page__field--where::before, :is(body.search-page:not(.search-page--users), body.index-page) .search-page__bar[data-active-sector="dates"] [data-search-sector="dates"]::before, :is(body.search-page:not(.search-page--users), body.index-page) .search-page__bar[data-active-sector="guests"] [data-search-sector="guests"]::before { opacity: 0; transform: translate(-50%, -50%) scale(.5); transition: opacity .12s ease, transform .2s ease; } :is(body.search-page:not(.search-page--users), body.index-page) .search-page__bar[data-active-sector="where"] .search-page__field--where .search-page__field-label, :is(body.search-page:not(.search-page--users), body.index-page) .search-page__bar[data-active-sector="where"] .search-page__field--where input, :is(body.search-page:not(.search-page--users), body.index-page) .search-page__bar[data-active-sector="dates"] [data-search-sector="dates"] span, :is(body.search-page:not(.search-page--users), body.index-page) .search-page__bar[data-active-sector="dates"] [data-search-sector="dates"] strong, :is(body.search-page:not(.search-page--users), body.index-page) .search-page__bar[data-active-sector="guests"] [data-search-sector="guests"] span, :is(body.search-page:not(.search-page--users), body.index-page) .search-page__bar[data-active-sector="guests"] [data-search-sector="guests"] strong { opacity: 1; pointer-events: auto; /* In once the pill is most of the way open, so the ellipsis is not seen re-cutting the text at every width on the way. */ transition: opacity .24s ease .14s; } } @media (max-width: 900px) { :is(body.search-page:not(.search-page--users), body.index-page) .search-page__filter { display: grid !important; } } @media (max-width: 900px) { /* collapsed "where" gets the same chip background as the other pills; the higher-specificity active rule keeps it transparent when expanded. */ :is(body.search-page:not(.search-page--users), body.index-page) .search-page__field--where { background: var(--liquid-glass-item-active-bg); } } /* Focused: the bar glows in the brand pink (the reactive shadow) while a sector * is active or a field holds the caret. At rest it keeps the neutral glass. */ body .search-page__bar.search-page__bar:is(.is-sector-active, :has(input:focus)) { box-shadow: var(--liquid-glass-shadow-reactive); } /* Hover: the glass shadow turns brand pink (--liquid-glass-shadow-reactive, * style.css). Each selector is its resting rule plus :hover, so it always wins. */ @media (any-hover: hover) { .search-page__submit:hover, .search-page__bar:hover, body.search-page--idle .search-page__bar:hover { box-shadow: var(--liquid-glass-shadow-reactive); } } .search-page__submit:focus-visible { box-shadow: var(--liquid-glass-shadow-reactive); }