/* ======================================================================== 0-baza */ /* Tema „lux” (13.10.2026). Marius: „tot aspectul” după template-ul CozyStay + „să apară literele ca la transferbucuresti”. Fundal aproape negru, auriu #B99D75, titluri Marcellus, text Jost, butoane drepte, linii aurii de 1px. Se încarcă DUPĂ public.css; doar când . Variabilele: html[data-tema="lux"] (prioritate mai mare decât :root). Componentele: :where(html[data-tema="lux"]) .clasa (aceeași prioritate ca public.css, câștigă fiindcă vin după) — ce schimbă public.css în @media trebuie repetat în @media aici. sosire.css și leaflet.css vin DUPĂ: pentru ele, fără :where. */ /* ---------------------------------------------------------------- fonturi (locale, licență OFL) */ @font-face { font-family: 'Marcellus'; src: url('../vendor/fonts/marcellus-latin-ext.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Marcellus'; src: url('../vendor/fonts/marcellus-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Jost'; src: url('../vendor/fonts/jost-cyrillic.woff2') format('woff2'); font-weight: 300 700; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Jost'; src: url('../vendor/fonts/jost-latin-ext.woff2') format('woff2'); font-weight: 300 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Jost'; src: url('../vendor/fonts/jost-latin.woff2') format('woff2'); font-weight: 300 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------------------------------------------------------------- variabile */ html[data-tema="lux"] { color-scheme: dark; /* controalele native (select, bifă, bare de derulare) devin închise */ --bg: #151719; /* fundalul paginii (CozyStay) */ --bg-2: #1B1D20; /* secțiuni alternante, ușor mai deschise */ --bg-3: #24272B; /* câmpuri, elemente ridicate */ --negru: #0B0C0D; /* cutii negre (etichete, subsol) */ --ink: #FFFFFF; /* titluri */ --ink-2: #CFCFCF; /* text curent: 12.4:1 pe --bg */ --ink-3: #A3A3A3; /* text secundar: 7.3:1 pe --bg */ --line: rgba(255, 255, 255, .12); --line-2: rgba(255, 255, 255, .22); --accent: #B99D75; /* auriul CozyStay: 7.0:1 pe --bg (merge și ca text) */ --accent-2: #CDB38D; /* hover, mai deschis */ --accent-soft: rgba(185, 157, 117, .14); --aur: #B99D75; --aur-plin: #AB916C; --aur-deschis: #E6C79C; --pe-aur: #151719; /* text pe auriu plin: 6.9:1 */ --ok: #8FD3A8; /* „Liber”: lizibil pe închis */ --ok-soft: rgba(143, 211, 168, .12); --err: #F29B80; --umbra: 0 0 0 1px rgba(255, 255, 255, .06); --umbra-mare: 0 30px 70px -30px rgba(0, 0, 0, .85); --serif: 'Marcellus', Georgia, 'Times New Roman', serif; /* Marcellus n-are chirilic: /uk/ și /bg/ cad pe Georgia */ --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif; --ease-lux: cubic-bezier(.16, 1, .3, 1); } /* ---------------------------------------------------------------- bază */ html[data-tema="lux"] body { background: var(--bg); color: var(--ink-2); font: 400 16px/1.66 var(--sans); } html[data-tema="lux"] ::selection { background: rgba(185, 157, 117, .38); color: #fff; } html[data-tema="lux"] :focus-visible { outline: 1px solid var(--aur); outline-offset: 3px; border-radius: 0; } :where(html[data-tema="lux"]) h1, :where(html[data-tema="lux"]) h2, :where(html[data-tema="lux"]) h3 { font-family: var(--serif); font-weight: 400; letter-spacing: 0; color: var(--ink); line-height: 1.2; } :where(html[data-tema="lux"]) h4 { font-family: var(--serif); font-weight: 400; color: var(--ink); } :where(html[data-tema="lux"]) a { text-underline-offset: 4px; } :where(html[data-tema="lux"]) strong, :where(html[data-tema="lux"]) b { font-weight: 500; color: var(--ink); } /* butoane: drepte, Marcellus; „plin” = auriu cu text închis, „contur” = linie aurie care se umple la hover */ :where(html[data-tema="lux"]) .btn { border-radius: 0; height: 52px; padding: 0 36px; font-family: var(--serif); font-weight: 400; font-size: 16px; letter-spacing: .02em; transition: background .4s var(--ease-lux), color .4s var(--ease-lux), border-color .4s, transform .2s var(--ease-lux); } :where(html[data-tema="lux"]) .btn-plin { background: var(--aur); color: var(--pe-aur); border: 1px solid var(--aur); box-shadow: none; } :where(html[data-tema="lux"]) .btn-plin:hover { background: var(--aur-deschis); border-color: var(--aur-deschis); color: var(--pe-aur); } :where(html[data-tema="lux"]) .btn-contur { background: transparent; border: 1px solid var(--aur-plin); color: #fff; } :where(html[data-tema="lux"]) .btn-contur:hover { background: var(--aur); border-color: var(--aur); color: var(--pe-aur); } :where(html[data-tema="lux"]) .btn-mic { height: 44px; padding: 0 24px; font-size: 14px; } /* titlurile de secțiune: o linie aurie scurtă deasupra (locul „supratitlului” din CozyStay) */ :where(html[data-tema="lux"]) .sectiune-cap h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.18; } :where(html[data-tema="lux"]) .sectiune-cap h2::before { content: ""; display: block; width: 56px; height: 1px; background: var(--aur); margin: 0 0 22px; } :where(html[data-tema="lux"]) .sectiune-cap p { color: var(--ink-3); font-size: 18px; } /* antetul care se ascunde la derulare în jos și revine în sus (tema-lux.js pune .nav-ascuns) */ :where(html[data-tema="lux"]) .nav { transition: transform .4s var(--ease-lux), background .4s, border-color .4s; } :where(html[data-tema="lux"]) .nav.nav-ascuns { transform: translateY(-100%); } /* ---------------------------------------------------------------- literele care apar (ca pe transferbucuresti, dar literă cu literă) Fiecare literă urcă din ceață: invizibilă, încețoșată și puțin mai jos → clară, la locul ei. Titlul mare de pe erou pornește singur la încărcare; celelalte titluri pornesc când intră în ecran (tema-lux.js pune .vazut). Apoi un val auriu trece peste literele titlului mare la câteva secunde (pe fundal închis, dunga albă de pe transferbucuresti nu s-ar vedea). „Reduce motion”: fără animații. */ html[data-tema="lux"] .lit-cuv { display: inline-block; white-space: nowrap; } html[data-tema="lux"] .lit { display: inline-block; } @keyframes lux-litera { from { opacity: 0; filter: blur(10px); transform: translate3d(0, .42em, 0); } 55% { filter: blur(0); } to { opacity: 1; filter: none; transform: none; } } @keyframes lux-val { 0%, 7%, 100% { color: #fff; text-shadow: none; } 3% { color: #F2D9AE; text-shadow: 0 0 22px rgba(230, 199, 156, .55); } } @media (prefers-reduced-motion: no-preference) { html[data-tema="lux"] .erou-titlu .lit { animation: lux-litera 1.1s var(--ease-lux) both, lux-val 7.5s ease-in-out infinite; animation-delay: calc(.2s + var(--i, 0) * .034s), calc(2.6s + var(--i, 0) * .045s); } html[data-tema="lux"].lux-js :not(.erou-titlu) > .litere:not(.vazut) .lit { opacity: 0; } html[data-tema="lux"] :not(.erou-titlu) > .litere.vazut .lit { animation: lux-litera .95s var(--ease-lux) both; animation-delay: calc(var(--i, 0) * .028s); } } /* ======================================================================== 1-comune */ /* Tema „lux” — 1-comune: piesele de pe toate paginile (meniul de sus, sertarul de pe telefon, limba, subsolul, formularele, casetele de mesaj, încărcarea, comutatorul de aspect, barele de jos, butoanele plutitoare, secțiunile, containerul). Stilul CozyStay: bară dreaptă pe toată lățimea, transparentă peste eroul primei pagini și închisă (#151719, linie fină jos) în rest; linkuri Jost 13px MAJUSCULE rărite; butonul de rezervare mic, cu contur auriu; colțuri drepte, linii de 1px. Componentele: :where(html[data-tema="lux"]) .clasa (câștigă la egalitate fiindcă vin după public.css). Ce schimbă public.css în @media (1080 / 980 / 760) se repetă mai jos în @media-ul corespunzător. */ html[data-tema="lux"] { --nav-h: 84px; /* bara e acum lipită sus (top 0), deci un pic mai înaltă, ca la un hotel */ --lux-margine: clamp(20px, 6.25vw, 90px); /* marginea laterală CozyStay: 90px la 1440, ~24px pe telefon */ --lux-lat: 1260px; /* lățimea utilă a conținutului la 1440 */ --lux-linie: rgba(255, 255, 255, .12); /* linia fină a barei și a subsolului */ } /* ================================================================ containerul și secțiunile */ :where(html[data-tema="lux"]) .container { max-width: calc(var(--lux-lat) + 2 * var(--lux-margine)); padding-left: var(--lux-margine); padding-right: var(--lux-margine); } :where(html[data-tema="lux"]) .sectiune { padding: 120px 0; } /* ================================================================ meniul de sus */ :where(html[data-tema="lux"]) .nav { top: 0; padding: 0; } /* peste eroul primei pagini: un voal de sus ca literele albe să se citească pe orice poză */ :where(html[data-tema="lux"]) .nav::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 190px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(8, 9, 10, .66) 0%, rgba(8, 9, 10, .34) 48%, rgba(8, 9, 10, 0) 100%); opacity: 0; transition: opacity .5s var(--ease-lux); } :where(html[data-tema="lux"]) .nav-bara { --lux-pad: max(var(--lux-margine), calc((100% - var(--lux-lat)) / 2)); position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 32px; max-width: none; height: var(--nav-h); margin: 0; padding: 0 var(--lux-pad); border-radius: 0; border: 0; border-bottom: 1px solid var(--lux-linie); background: var(--bg); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background .5s var(--ease-lux), border-color .5s var(--ease-lux); } :where(html[data-tema="lux"]) .nav.derulat .nav-bara { box-shadow: none; } /* prima pagină, sus de tot: bara e transparentă peste poză (după 40px de derulare devine închisă) */ :where(html[data-tema="lux"]) body:has(.erou) .nav:not(.derulat) .nav-bara, :where(html[data-tema="lux"]) body.in-erou .nav:not(.derulat) .nav-bara { background: transparent; border-bottom-color: rgba(255, 255, 255, .16); } :where(html[data-tema="lux"]) body:has(.erou) .nav:not(.derulat)::before, :where(html[data-tema="lux"]) body.in-erou .nav:not(.derulat)::before { opacity: 1; } /* cu sertarul deschis bara se lipește de el (aceeași culoare) */ :where(html[data-tema="lux"]) body:has(.nav-sertar.deschis) .nav .nav-bara { background: var(--negru); border-bottom-color: rgba(255, 255, 255, .08); } :where(html[data-tema="lux"]) body:has(.nav-sertar.deschis) .nav::before { opacity: 0; } /* grila 1fr | siglă | 1fr: sigla stă la mijloc (ca numele hotelului la CozyStay); dacă linkurile într-o limbă lungă nu încap, coloana lor crește și sigla se mută puțin spre dreapta, dar nu se suprapune niciodată (32px între ele) */ :where(html[data-tema="lux"]) .nav-bara > .marca { grid-column: 2; grid-row: 1; justify-self: center; } :where(html[data-tema="lux"]) .nav-bara > .nav-linkuri { grid-column: 1; grid-row: 1; justify-self: start; } :where(html[data-tema="lux"]) .nav-bara > .nav-dreapta { grid-column: 3; grid-row: 1; justify-self: end; } :where(html[data-tema="lux"]) .marca-img { height: 38px; } /* linkurile: Jost 13px MAJUSCULE rărite, albe; la hover o linie aurie de 1px care se întinde */ :where(html[data-tema="lux"]) .nav-linkuri { margin-left: 0; gap: clamp(20px, 2.2vw, 34px); white-space: nowrap; } :where(html[data-tema="lux"]) .nav-linkuri a { position: relative; padding: 8px 0; border-radius: 0; background: none; color: #fff; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; } :where(html[data-tema="lux"]) .nav-linkuri a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: var(--aur); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-lux); } :where(html[data-tema="lux"]) .nav-linkuri a:hover { background: none; color: #fff; } :where(html[data-tema="lux"]) .nav-linkuri a:hover::after, :where(html[data-tema="lux"]) .nav-linkuri a:focus-visible::after { transform: scaleX(1); transform-origin: left; } /* dreapta: telefonul, limba și butonul mic cu contur */ :where(html[data-tema="lux"]) .nav-dreapta { margin-left: 0; gap: 22px; } :where(html[data-tema="lux"]) .nav-tel { height: 44px; padding: 0; gap: 9px; border-radius: 0; color: #fff; background: none; font-size: 13px; font-weight: 500; letter-spacing: .1em; } :where(html[data-tema="lux"]) .nav-tel .ph { color: var(--aur); font-size: 16px; } :where(html[data-tema="lux"]) .nav-tel:hover { background: none; color: var(--aur-deschis); } :where(html[data-tema="lux"]) .nav-dreapta .btn-plin { height: 44px; padding: 0 24px; background: transparent; color: #fff; border: 1px solid var(--aur-plin); font-family: var(--serif); font-size: 15px; letter-spacing: .02em; box-shadow: none; } :where(html[data-tema="lux"]) .nav-dreapta .btn-plin:hover { background: var(--aur); border-color: var(--aur); color: var(--pe-aur); } /* butonul de meniu: trei linii subțiri care devin un X (desenate, nu iconiță) */ :where(html[data-tema="lux"]) .nav-meniu { position: relative; width: 44px; height: 44px; border-radius: 0; color: #fff; } :where(html[data-tema="lux"]) .nav-meniu i { display: none; } :where(html[data-tema="lux"]) .nav-meniu::before, :where(html[data-tema="lux"]) .nav-meniu::after { content: ""; position: absolute; left: 6px; right: 6px; height: 1px; background: currentColor; transition: transform .45s var(--ease-lux), top .45s var(--ease-lux), box-shadow .25s; } :where(html[data-tema="lux"]) .nav-meniu::before { top: 14px; box-shadow: 0 8px 0 currentColor; } :where(html[data-tema="lux"]) .nav-meniu::after { top: 30px; } :where(html[data-tema="lux"]) body:has(.nav-sertar.deschis) .nav-meniu::before { top: 22px; transform: rotate(45deg); box-shadow: 0 0 0 transparent; } :where(html[data-tema="lux"]) body:has(.nav-sertar.deschis) .nav-meniu::after { top: 22px; transform: rotate(-45deg); } /* ================================================================ limba */ :where(html[data-tema="lux"]) .limba-alege summary { height: 44px; padding: 0; gap: 7px; border-radius: 0; background: none; color: #fff; font-size: 13px; font-weight: 500; letter-spacing: .1em; } :where(html[data-tema="lux"]) .limba-alege summary i { font-size: 17px; color: var(--aur); } :where(html[data-tema="lux"]) .limba-alege summary:hover, :where(html[data-tema="lux"]) .limba-alege[open] summary { background: none; color: var(--aur-deschis); } :where(html[data-tema="lux"]) .limba-lista { top: calc(100% + 20px); min-width: 230px; padding: 10px; gap: 0; border-radius: 0; background: var(--negru); border: 1px solid rgba(185, 157, 117, .35); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); } :where(html[data-tema="lux"]) .limba-lista a { gap: 14px; padding: 11px 12px; border-radius: 0; font-size: 15px; color: var(--ink-2); transition: background .25s, color .25s; } :where(html[data-tema="lux"]) .limba-lista a b { width: 26px; font-size: 11px; font-weight: 500; letter-spacing: .12em; color: var(--ink-3); } :where(html[data-tema="lux"]) .limba-lista a:hover { background: rgba(255, 255, 255, .05); color: #fff; } :where(html[data-tema="lux"]) .limba-lista a[aria-current] { background: rgba(185, 157, 117, .1); color: var(--aur-deschis); font-weight: 400; box-shadow: inset 1px 0 0 var(--aur); } :where(html[data-tema="lux"]) .limba-lista a[aria-current] b { color: var(--aur); } /* banda „site-ul e și în limba ta” */ :where(html[data-tema="lux"]) .bara-limba { gap: 14px; padding: 10px 10px 10px 18px; border-radius: 0; background: var(--negru); border: 1px solid rgba(185, 157, 117, .4); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .85); color: var(--ink-2); font-size: 14px; width: max-content; max-width: calc(100vw - 24px); } /* cu left:50% s-ar strânge la jumătate de ecran (pe tabletă textul ieșea pe 5 rânduri) */ :where(html[data-tema="lux"]) .bara-limba > i { color: var(--aur); } :where(html[data-tema="lux"]) .bara-limba a { color: var(--aur-deschis); font-weight: 500; letter-spacing: .02em; text-decoration: underline; text-decoration-color: rgba(185, 157, 117, .5); text-underline-offset: 4px; } :where(html[data-tema="lux"]) .bara-limba a:hover { color: #fff; text-decoration-color: var(--aur); } :where(html[data-tema="lux"]) .bara-limba button { border-radius: 0; color: var(--ink-3); } :where(html[data-tema="lux"]) .bara-limba button:hover { background: rgba(255, 255, 255, .06); color: #fff; } /* cu meniul deschis nu stă nimic peste el (banda de limbă e și în sertar, ca listă) */ :where(html[data-tema="lux"]) body:has(.nav-sertar.deschis) .bara-limba, :where(html[data-tema="lux"]) body:has(.nav-sertar.deschis) .plutitor, :where(html[data-tema="lux"]) body:has(.nav-sertar.deschis) .comutator-tema { visibility: hidden; } /* nici peste calendar / „Câți sunteți?” (pe telefon sunt foi de jos, iar banda de limbă le acoperea rândul de jos) */ :where(html[data-tema="lux"]) body:has(.pop.deschis) .bara-limba, :where(html[data-tema="lux"]) body:has(.pop.deschis) .plutitor, :where(html[data-tema="lux"]) body:has(.pop.deschis) .comutator-tema { visibility: hidden; } /* ================================================================ sertarul (tabletă / telefon) */ :where(html[data-tema="lux"]) .nav-sertar a { font-family: var(--serif); font-weight: 400; letter-spacing: 0; color: #fff; } /* ================================================================ subsolul */ :where(html[data-tema="lux"]) .subsol { margin-top: 110px; padding: 100px 0 44px; background: var(--negru); border-top: 1px solid var(--lux-linie); color: var(--ink-2); } :where(html[data-tema="lux"]) main:has(> .sectiune:last-child) + .subsol { margin-top: 0; } /* după o secțiune (are deja 120px jos) subsolul se lipește */ :where(html[data-tema="lux"]) .subsol-grila { gap: 48px; } :where(html[data-tema="lux"]) .subsol h5 { margin: 0 0 22px; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--aur); } :where(html[data-tema="lux"]) .subsol ul { gap: 12px; font-size: 15px; } :where(html[data-tema="lux"]) .subsol ul a { color: var(--ink-2); background: linear-gradient(var(--aur), var(--aur)) no-repeat 0 100% / 0 1px; padding-bottom: 2px; transition: color .3s, background-size .45s var(--ease-lux); } :where(html[data-tema="lux"]) .subsol ul a:hover { color: #fff; background-size: 100% 1px; } :where(html[data-tema="lux"]) .marca-subsol { width: 168px; } :where(html[data-tema="lux"]) .subsol-desc { margin-top: 24px; color: var(--ink-3); font-size: 15px; line-height: 1.7; } :where(html[data-tema="lux"]) .subsol-legal { margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--lux-linie); } :where(html[data-tema="lux"]) .clasificare h5 { margin-bottom: 16px; } :where(html[data-tema="lux"]) .certificat { gap: 14px; padding: 12px 16px; border: 1px solid rgba(185, 157, 117, .3); border-radius: 0; color: var(--ink-3); transition: border-color .3s; } :where(html[data-tema="lux"]) a.certificat[href]:hover { border-color: var(--aur); } :where(html[data-tema="lux"]) .certificat b { color: #fff; font-family: var(--serif); font-weight: 400; font-size: 15px; letter-spacing: .01em; margin-bottom: 2px; } :where(html[data-tema="lux"]) .stele-cert { color: #E6B673; } :where(html[data-tema="lux"]) .clasificare-nota { color: var(--ink-3); font-size: 12.5px; margin-top: 12px; } :where(html[data-tema="lux"]) .subsol-jos { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--lux-linie); font-size: 13px; letter-spacing: .02em; color: #9E9E9E; } :where(html[data-tema="lux"]) .subsol-jos a:hover { color: #fff; } /* ================================================================ formularele */ :where(html[data-tema="lux"]) .grup { gap: 10px; } :where(html[data-tema="lux"]) .grup label { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } /* câmpurile (nu bifele și butoanele radio, care au regulile lor mai jos) */ :where(html[data-tema="lux"]) .grup input:not([type="checkbox"]):not([type="radio"]), :where(html[data-tema="lux"]) .grup textarea, :where(html[data-tema="lux"]) .grup select { min-height: 52px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 0; background: rgba(255, 255, 255, .03); color: #fff; font-family: var(--sans); font-size: 16px; caret-color: var(--aur); transition: border-color .3s, background .3s, box-shadow .3s; } :where(html[data-tema="lux"]) .grup textarea { line-height: 1.6; resize: vertical; } :where(html[data-tema="lux"]) .grup select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; background: rgba(255, 255, 255, .03) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B99D75' stroke-width='1.6'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") no-repeat right 16px center; } :where(html[data-tema="lux"]) .grup select option { background: #151719; color: #fff; } :where(html[data-tema="lux"]) .grup input:not([type="checkbox"]):not([type="radio"]):hover, :where(html[data-tema="lux"]) .grup textarea:hover, :where(html[data-tema="lux"]) .grup select:hover { border-color: rgba(255, 255, 255, .34); } :where(html[data-tema="lux"]) .grup input:not([type="checkbox"]):not([type="radio"]):focus, :where(html[data-tema="lux"]) .grup textarea:focus, :where(html[data-tema="lux"]) .grup select:focus { outline: 0; border-color: var(--aur); background-color: rgba(185, 157, 117, .05); box-shadow: inset 0 -1px 0 var(--aur); } :where(html[data-tema="lux"]) .grup input::placeholder, :where(html[data-tema="lux"]) .grup textarea::placeholder { color: #8C8C8C; opacity: 1; } /* completarea automată a browserului (Chrome pune fond deschis): păstrăm fondul închis și textul alb */ :where(html[data-tema="lux"]) .grup input:-webkit-autofill { -webkit-text-fill-color: #fff; box-shadow: 0 0 0 1000px #1D1F22 inset; caret-color: var(--aur); } :where(html[data-tema="lux"]) .grup .ajutor { color: var(--ink-3); } :where(html[data-tema="lux"]) .grup .eroare, :where(html[data-tema="lux"]) .eroare-text { color: var(--err); font-weight: 400; } :where(html[data-tema="lux"]) .grup.are-eroare input:not([type="checkbox"]):not([type="radio"]), :where(html[data-tema="lux"]) .grup.are-eroare textarea, :where(html[data-tema="lux"]) .grup.are-eroare select { border-color: var(--err); } /* bifele: pătrate, aurii când sunt bifate */ :where(html[data-tema="lux"]) .bifa, :where(html[data-tema="lux"]) .grup label.bifa { gap: 14px; color: var(--ink-2); font-size: 15px; font-weight: 400; line-height: 1.55; letter-spacing: 0; text-transform: none; cursor: pointer; } :where(html[data-tema="lux"]) .bifa input { width: 18px; height: 18px; margin-top: 3px; } :where(html[data-tema="lux"]) .bifa input, :where(html[data-tema="lux"]) .alegere-tip input { accent-color: var(--aur); } /* bifa și butonul radio desenate de noi: pătrat drept cu linie de 1px, auriu plin când e ales (public.css: .grup input + .alegere-tip input cu !important) */ :where(html[data-tema="lux"]) .bifa input[type="checkbox"], :where(html[data-tema="lux"]) .alegere-tip input[type="radio"] { -webkit-appearance: none; appearance: none; flex: none; width: 18px !important; height: 18px; padding: 0 !important; border: 1px solid rgba(255, 255, 255, .38) !important; border-radius: 0; background: transparent no-repeat center / 16px 16px; box-shadow: none !important; cursor: pointer; transition: border-color .2s, background-color .2s; } :where(html[data-tema="lux"]) .alegere-tip input[type="radio"] { border-radius: 50%; margin: 0; background-size: 100% 100%; } :where(html[data-tema="lux"]) .bifa input[type="checkbox"]:hover, :where(html[data-tema="lux"]) .alegere-tip input[type="radio"]:hover { border-color: var(--aur) !important; } :where(html[data-tema="lux"]) .bifa input[type="checkbox"]:checked { border-color: var(--aur) !important; background-color: var(--aur); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 8.2l3.6 3.6L13.6 4.4' fill='none' stroke='%23151719' stroke-width='2'/%3E%3C/svg%3E"); } :where(html[data-tema="lux"]) .alegere-tip input[type="radio"]:checked { border-color: var(--aur) !important; background-image: radial-gradient(circle at center, var(--aur) 0, var(--aur) 4px, transparent 4.6px); } :where(html[data-tema="lux"]) .bifa input[type="checkbox"]:focus-visible, :where(html[data-tema="lux"]) .alegere-tip input[type="radio"]:focus-visible { outline: 1px solid var(--aur-deschis); outline-offset: 3px; } :where(html[data-tema="lux"]) .bifa a { color: var(--aur-deschis); text-decoration-color: rgba(185, 157, 117, .55); } :where(html[data-tema="lux"]) .bifa a:hover { color: #fff; text-decoration-color: var(--aur); } /* persoană fizică / firmă (cererea de factură): butoane drepte cu linie aurie la ales */ :where(html[data-tema="lux"]) .alegere-tip label, :where(html[data-tema="lux"]) .grup .alegere-tip label { gap: 10px; padding: 12px 18px; border-radius: 0; border-color: rgba(255, 255, 255, .2); color: var(--ink-2); font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; transition: border-color .3s, background .3s, color .3s; } :where(html[data-tema="lux"]) .alegere-tip label:hover { border-color: rgba(255, 255, 255, .34); } :where(html[data-tema="lux"]) .alegere-tip label:has(input:checked) { border-color: var(--aur); background: rgba(185, 157, 117, .1); color: #fff; } /* ================================================================ casetele de mesaj: fond închis nuanțat, linie de 1px, text deschis */ :where(html[data-tema="lux"]) .caseta { border-radius: 0; border: 1px solid; padding: 18px 22px; line-height: 1.6; } :where(html[data-tema="lux"]) .caseta-info { background: rgba(185, 157, 117, .08); border-color: rgba(185, 157, 117, .38); color: #EADFCB; } :where(html[data-tema="lux"]) .caseta-info .ph { color: var(--aur); } :where(html[data-tema="lux"]) .caseta-ok { background: rgba(143, 211, 168, .07); border-color: rgba(143, 211, 168, .36); color: #D3EEDD; } :where(html[data-tema="lux"]) .caseta-ok .ph { color: var(--ok); } :where(html[data-tema="lux"]) .caseta-atentie { background: rgba(230, 182, 115, .08); border-color: rgba(230, 182, 115, .42); color: #F3E0BF; } :where(html[data-tema="lux"]) .caseta-atentie .ph { color: #E6B673; } :where(html[data-tema="lux"]) .caseta-eroare { background: rgba(242, 155, 128, .08); border-color: rgba(242, 155, 128, .42); color: #F8D3C6; } :where(html[data-tema="lux"]) .caseta-eroare .ph { color: var(--err); } :where(html[data-tema="lux"]) .caseta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* ================================================================ încărcarea (schelet): sclipire discretă, fără alb */ :where(html[data-tema="lux"]) .schelet { border-radius: 0; border: 1px solid rgba(255, 255, 255, .05); background: linear-gradient(90deg, rgba(255, 255, 255, .025) 0%, rgba(185, 157, 117, .09) 50%, rgba(255, 255, 255, .025) 100%); background-size: 200% 100%; } /* ================================================================ comutatorul de aspect și bara de previzualizare */ :where(html[data-tema="lux"]) .comutator-tema { left: 16px; bottom: 16px; padding: 3px; gap: 1px; border-radius: 0; background: rgba(11, 12, 13, .92); border: 1px solid rgba(185, 157, 117, .32); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8); } :where(html[data-tema="lux"]) .comutator-tema a { height: 28px; padding: 0 12px; border-radius: 0; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); transition: color .25s, background .25s; } :where(html[data-tema="lux"]) .comutator-tema a:hover { color: #fff; } :where(html[data-tema="lux"]) .comutator-tema a[aria-current="true"] { background: var(--aur); color: var(--pe-aur); } /* pe calculator (public.css îl pune pe verticală peste 1080) stă lipit de margine și încape în --lux-margine (67px la 1081, 90px la 1440), ca să nu acopere începutul titlurilor */ @media (min-width: 1081px) { :where(html[data-tema="lux"]) .comutator-tema { left: 0; bottom: 16px; padding: 2px; gap: 0; border-left: 0; } :where(html[data-tema="lux"]) .comutator-tema a { height: 26px; padding: 0 7px; font-size: 9px; letter-spacing: .06em; } } @media (min-width: 1300px) { :where(html[data-tema="lux"]) .comutator-tema a { padding: 0 9px; font-size: 10px; letter-spacing: .1em; } } :where(html[data-tema="lux"]) .bara-previz { gap: 16px; padding: 12px 18px; border-radius: 0; background: var(--negru); border: 1px solid rgba(185, 157, 117, .4); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .85); color: var(--ink-2); font-size: 13.5px; } :where(html[data-tema="lux"]) .bara-previz b { color: #fff; } :where(html[data-tema="lux"]) .bara-previz a { color: var(--aur-deschis); font-weight: 500; text-decoration-color: rgba(185, 157, 117, .55); text-underline-offset: 4px; } :where(html[data-tema="lux"]) .bara-previz a:hover { color: #fff; } /* ================================================================ butoanele plutitoare: pătrat cu linie aurie (ca butonul „sus” de la CozyStay) */ :where(html[data-tema="lux"]) .plutitor { right: 22px; bottom: 22px; gap: 8px; } :where(html[data-tema="lux"]) .plutitor a { width: 50px; height: 50px; border-radius: 0; font-size: 23px; color: var(--aur); background: rgba(11, 12, 13, .88); border: 1px solid var(--aur-plin); box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .4s var(--ease-lux), color .4s var(--ease-lux), border-color .4s, transform .3s var(--ease-lux); } :where(html[data-tema="lux"]) .plutitor a:hover { background: var(--aur); border-color: var(--aur); color: var(--pe-aur); transform: translateY(-2px); } :where(html[data-tema="lux"]) .plutitor .wa, :where(html[data-tema="lux"]) .plutitor .tel { background: rgba(11, 12, 13, .88); } :where(html[data-tema="lux"]) .plutitor .wa:hover, :where(html[data-tema="lux"]) .plutitor .tel:hover { background: var(--aur); } /* ================================================================ calculator mic: telefonul doar ca iconiță, ca să nu se strângă meniul */ @media (max-width: 1279px) { :where(html[data-tema="lux"]) .nav-tel span { display: none; } } /* pe tabletă rămâne doar iconița: ținta de atingere tot 44px (pe telefon e 40px, mai jos) */ @media (min-width: 761px) and (max-width: 1279px) { :where(html[data-tema="lux"]) .nav-tel { min-width: 44px; justify-content: center; } } /* ================================================================ sub 1200px: meniul cu trei linii în stânga și sertarul (public.css trece pe sertar abia la 1080; în limbile lungi linkurile n-ar mai încăpea lângă sigla din mijloc) */ @media (max-width: 1199px) { :where(html[data-tema="lux"]) .nav-linkuri { display: none; } :where(html[data-tema="lux"]) .nav-meniu { display: grid; position: absolute; left: calc(var(--lux-pad) - 8px); top: 50%; margin-top: -22px; } :where(html[data-tema="lux"]) .nav-dreapta { margin-left: 0; gap: 18px; } /* sertarul: panou negru pe tot ecranul, meniul mare în Marcellus, apare în 0,4s cu rândurile urcând pe rând */ :where(html[data-tema="lux"]) .nav-sertar { display: flex; flex-direction: column; align-items: stretch; position: fixed; inset: 0; z-index: 49; overflow-y: auto; background: var(--negru); padding: calc(var(--nav-h) + 44px) var(--lux-margine) calc(36px + env(safe-area-inset-bottom)); opacity: 0; pointer-events: none; transition: opacity .4s var(--ease-lux); } :where(html[data-tema="lux"]) .nav-sertar.deschis { opacity: 1; pointer-events: auto; } :where(html[data-tema="lux"]) .nav-sertar > * { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease-lux), transform .7s var(--ease-lux); } :where(html[data-tema="lux"]) .nav-sertar.deschis > * { opacity: 1; transform: none; } :where(html[data-tema="lux"]) .nav-sertar.deschis > :nth-child(2) { transition-delay: .04s; } :where(html[data-tema="lux"]) .nav-sertar.deschis > :nth-child(3) { transition-delay: .08s; } :where(html[data-tema="lux"]) .nav-sertar.deschis > :nth-child(4) { transition-delay: .12s; } :where(html[data-tema="lux"]) .nav-sertar.deschis > :nth-child(5) { transition-delay: .16s; } :where(html[data-tema="lux"]) .nav-sertar.deschis > :nth-child(6) { transition-delay: .2s; } :where(html[data-tema="lux"]) .nav-sertar.deschis > :nth-child(7) { transition-delay: .24s; } :where(html[data-tema="lux"]) .nav-sertar.deschis > :nth-child(n+8) { transition-delay: .28s; } :where(html[data-tema="lux"]) .nav-sertar a { display: block; padding: 10px 0; border-bottom: 0; font-size: 30px; line-height: 1.2; color: #fff; transition: color .3s; } :where(html[data-tema="lux"]) .nav-sertar a:hover { color: var(--aur-deschis); } :where(html[data-tema="lux"]) .nav-sertar a.sub { display: flex; align-items: center; gap: 14px; padding: 7px 0 7px 2px; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } :where(html[data-tema="lux"]) .nav-sertar a.sub::before { content: ""; width: 22px; height: 1px; background: var(--aur); flex: none; } :where(html[data-tema="lux"]) .nav-sertar a.sub:hover { color: #fff; } :where(html[data-tema="lux"]) .nav-sertar a.sub + a:not(.sub) { margin-top: 6px; } :where(html[data-tema="lux"]) .nav-sertar a.tel { display: flex; align-items: center; justify-content: center; gap: 12px; height: 52px; margin-top: 30px; padding: 0 24px; border: 1px solid var(--aur-plin); border-radius: 0; background: transparent; color: #fff; font-family: var(--serif); font-size: 17px; font-weight: 400; letter-spacing: .02em; } :where(html[data-tema="lux"]) .nav-sertar a.tel .ph { color: var(--aur); font-size: 18px; } :where(html[data-tema="lux"]) .nav-sertar a.tel, :where(html[data-tema="lux"]) .nav-sertar .sertar-limbi { width: 100%; max-width: 560px; } :where(html[data-tema="lux"]) .nav-sertar a.tel:hover { background: var(--aur); border-color: var(--aur); color: var(--pe-aur); } :where(html[data-tema="lux"]) .nav-sertar a.tel:hover .ph { color: var(--pe-aur); } } /* ================================================================ tabletă (≤1080) */ @media (max-width: 1080px) { :where(html[data-tema="lux"]) .subsol-grila { grid-template-columns: 1fr 1fr; } } /* ================================================================ lista de limbi din sertar (public.css o arată abia la ≤980; aici de la 1199, cât e sertarul) */ @media (max-width: 1199px) { :where(html[data-tema="lux"]) .sertar-limbi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--lux-linie); } :where(html[data-tema="lux"]) .nav-sertar .sertar-limbi a { padding: 11px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 0; background: none; font-family: var(--sans); font-size: 14px; font-weight: 400; line-height: 1.3; letter-spacing: .02em; color: var(--ink-2); } :where(html[data-tema="lux"]) .nav-sertar .sertar-limbi a:hover { border-color: rgba(255, 255, 255, .3); color: #fff; } :where(html[data-tema="lux"]) .nav-sertar .sertar-limbi a[aria-current] { border-color: var(--aur); background: rgba(185, 157, 117, .1); color: var(--aur-deschis); font-weight: 400; } } /* ================================================================ telefon (≤760) */ @media (max-width: 760px) { html[data-tema="lux"] { --nav-h: 68px; } :where(html[data-tema="lux"]) .container { padding-left: var(--lux-margine); padding-right: var(--lux-margine); } :where(html[data-tema="lux"]) .sectiune { padding: 80px 0; } :where(html[data-tema="lux"]) .nav { top: 0; padding: 0; } :where(html[data-tema="lux"]) .nav-bara { padding: 0 var(--lux-pad); gap: 10px; } :where(html[data-tema="lux"]) .nav-dreapta { gap: 6px; margin-right: -8px; } :where(html[data-tema="lux"]) .marca-img { height: 30px; } :where(html[data-tema="lux"]) .nav-tel { width: 40px; justify-content: center; } :where(html[data-tema="lux"]) .nav-tel .ph { font-size: 19px; } :where(html[data-tema="lux"]) .limba-alege summary { height: 40px; padding: 0 8px; } :where(html[data-tema="lux"]) .limba-lista { position: fixed; left: 16px; right: 16px; top: calc(var(--nav-h) + 10px); grid-template-columns: repeat(2, 1fr); gap: 2px; min-width: 0; } :where(html[data-tema="lux"]) .nav-sertar { padding-top: calc(var(--nav-h) + 30px); } :where(html[data-tema="lux"]) .nav-sertar a { font-size: 27px; padding: 8px 0; } :where(html[data-tema="lux"]) .nav-sertar a.sub { font-size: 11.5px; padding: 6px 0 6px 2px; } :where(html[data-tema="lux"]) .subsol { margin-top: 64px; padding: 72px 0 32px; } :where(html[data-tema="lux"]) main:has(> .sectiune:last-child) + .subsol { margin-top: 0; } :where(html[data-tema="lux"]) .subsol-grila { grid-template-columns: 1fr 1fr; gap: 40px 24px; } :where(html[data-tema="lux"]) .subsol-grila > :first-child { grid-column: 1 / -1; } :where(html[data-tema="lux"]) .marca-subsol { width: 132px; } :where(html[data-tema="lux"]) .subsol-legal { flex-direction: column; align-items: flex-start; gap: 26px; margin-top: 48px; padding-top: 30px; } :where(html[data-tema="lux"]) .certificate { flex-direction: column; width: 100%; } :where(html[data-tema="lux"]) .subsol-jos { flex-direction: column; gap: 8px; margin-top: 36px; line-height: 1.6; } :where(html[data-tema="lux"]) .plutitor { right: 14px; bottom: 14px; } :where(html[data-tema="lux"]) .plutitor a { width: 46px; height: 46px; font-size: 21px; box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .9); } :where(html[data-tema="lux"]) .comutator-tema { left: 10px; bottom: 10px; } :where(html[data-tema="lux"]) .comutator-tema a { height: 36px; padding: 0 8px; font-size: 10px; letter-spacing: .06em; } /* 7 aspecte nu încap în 300px: cel ales vine primul, ca să se vadă mereu */ :where(html[data-tema="lux"]) .comutator-tema a[aria-current="true"] { order: -1; } /* unde stă la capătul paginii (formulare, pagina apartamentului) se rupe pe două rânduri, cu toate opțiunile la vedere */ :where(html[data-tema="lux"]) body:has(.pagina-simpla) .comutator-tema, :where(html[data-tema="lux"]) body:has(.bara-mobil) .comutator-tema { flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 2 * var(--lux-margine)); overflow: visible; } :where(html[data-tema="lux"]) .bara-previz { left: 12px; right: 12px; transform: none; bottom: 10px; font-size: 13px; text-align: center; } :where(html[data-tema="lux"]) .bara-limba { left: 12px; right: 12px; transform: none; bottom: 10px; flex-wrap: wrap; justify-content: center; font-size: 13.5px; padding: 12px 10px 10px 14px; width: auto; } } /* ======================================================================== 2-acasa */ /* 2-acasa: prima pagină în aspectul „Lux” (stilul CozyStay „apartment”). Eroul centrat cu voal negru ~0.59 și titlu MAJUSCULE, bara de rezervare cu RAMĂ DUBLĂ aurie, calendarul și oaspeții pe închis, cardurile de apartament cu eticheta de preț albă în colț, povestea, facilitățile, recenziile, harta închisă, „Rezervă direct”. Regula: :where(html[data-tema="lux"]) .clasa; ce schimbă public.css în @media (1080 / 760) se repetă jos, în @media-urile de aici. leaflet.css vine DUPĂ temă: regulile pentru hartă sunt fără :where. */ /* ================================================================ EROUL */ :where(html[data-tema="lux"]) .erou { background: #151719; justify-content: stretch; } :where(html[data-tema="lux"]) .erou-voal { background: linear-gradient(180deg, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .58) 30%, rgba(0, 0, 0, .62) 62%, rgba(0, 0, 0, .72) 100%); } :where(html[data-tema="lux"]) .erou-continut { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: calc(var(--nav-h) + 72px); padding-bottom: 96px; } :where(html[data-tema="lux"]) .erou-titlu { font-family: var(--serif); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; line-height: 1.32; font-size: clamp(40px, 5vw, 72px); max-width: 1120px; margin: 0 auto 54px; color: #fff; text-wrap: balance; text-shadow: 0 2px 40px rgba(0, 0, 0, .35); } /* linia aurie scurtă deasupra titlului (locul supratitlului din CozyStay) */ :where(html[data-tema="lux"]) .erou-titlu::before { content: ""; display: block; width: 56px; height: 1px; background: var(--aur); margin: 0 auto 30px; } /* supratitlul auriu (doar dacă șablonul îl pune: înainte de h1); atunci linia aurie de deasupra titlului dispare */ :where(html[data-tema="lux"]) .erou-sus { display: block; font: 500 12.5px/1.6 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--aur-deschis); margin-bottom: 24px; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); } :where(html[data-tema="lux"]) .erou-sus + .erou-titlu::before { display: none; } :where(html[data-tema="lux"]) .erou-jos { width: 100%; justify-content: center; align-items: center; } /* caruselul: eticheta și barele de progres, jos în dreapta, în auriu */ :where(html[data-tema="lux"]) .erou-indicator { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); min-width: 0; gap: 12px; align-items: center; } :where(html[data-tema="lux"]) .erou-eticheta { font: 500 11.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .82); text-shadow: 0 1px 10px rgba(0, 0, 0, .5); } :where(html[data-tema="lux"]) .erou-bare { gap: 8px; } :where(html[data-tema="lux"]) .erou-bara { width: 38px; height: 2px; border-radius: 0; background: rgba(255, 255, 255, .28); } :where(html[data-tema="lux"]) .erou-bara::after { background: var(--aur); } /* ================================================================ BARA DE REZERVARE */ :where(html[data-tema="lux"]) .cautare { background: transparent; border-radius: 0; box-shadow: none; padding: 0; max-width: 1040px; text-align: left; } /* alegerea apartamentului: file text (MAJUSCULE, linie aurie sub cea aleasă), ca filele din CozyStay */ :where(html[data-tema="lux"]) .cautare-ap { justify-content: center; gap: 6px 30px; margin-bottom: 26px; } :where(html[data-tema="lux"]) .chip { height: 34px; padding: 0 2px; gap: 8px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; font: 500 12.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .86); transition: color .3s, border-color .3s; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); } :where(html[data-tema="lux"]) .chip img, :where(html[data-tema="lux"]) .chip .ph { display: none; } :where(html[data-tema="lux"]) .chip small { color: var(--aur-deschis); font-weight: 500; letter-spacing: .06em; text-transform: none; font-size: 12.5px; } :where(html[data-tema="lux"]) .chip:hover { color: #fff; border-bottom-color: rgba(185, 157, 117, .5); } :where(html[data-tema="lux"]) .chip[aria-pressed="true"] { color: #fff; background: transparent; border-bottom-color: var(--aur); } :where(html[data-tema="lux"]) .chip[aria-pressed="true"] small { color: var(--aur-deschis); opacity: 1; } :where(html[data-tema="lux"]) .chip:focus-visible { outline-offset: 4px; } /* rama dublă: chenarul de 1px al câmpurilor + al doilea chenar mutat cu 5px (sus/jos în afară, stânga/dreapta înăuntru) */ :where(html[data-tema="lux"]) .cautare-rand { position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--aur); background: rgba(12, 13, 14, .28); } :where(html[data-tema="lux"]) .cautare-rand::before { content: ""; position: absolute; top: -5px; bottom: -5px; left: 5px; right: 5px; border: 1px solid var(--aur); pointer-events: none; z-index: 1; } :where(html[data-tema="lux"]) .camp { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; min-height: 60px; padding: 0 40px 0 20px; border: 0; border-right: 1px solid var(--aur); border-radius: 0; background: transparent; box-shadow: none; transition: background .3s; } :where(html[data-tema="lux"]) .camp::after { content: ""; position: absolute; right: 20px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1px solid rgba(255, 255, 255, .7); border-bottom: 1px solid rgba(255, 255, 255, .7); transform: rotate(45deg); transition: transform .3s var(--ease-lux); } :where(html[data-tema="lux"]) .camp:hover { background: rgba(185, 157, 117, .08); } :where(html[data-tema="lux"]) .camp.deschis, :where(html[data-tema="lux"]) .camp:focus-visible { background: rgba(185, 157, 117, .14); box-shadow: none; outline: 0; } :where(html[data-tema="lux"]) .camp.deschis::after { transform: rotate(225deg); margin-top: -1px; } :where(html[data-tema="lux"]) .camp-eticheta { font: 400 16px/1.2 var(--serif); color: #fff; letter-spacing: .01em; white-space: nowrap; } :where(html[data-tema="lux"]) .camp-eticheta .ph { display: none; } :where(html[data-tema="lux"]) .camp-valoare { margin: 0 0 0 auto; font: 400 14px/1.2 var(--sans); color: #fff; min-width: 0; } :where(html[data-tema="lux"]) .camp-valoare.gol { color: rgba(255, 255, 255, .74); font-weight: 400; } :where(html[data-tema="lux"]) .cautare-rand .btn-plin { height: auto; min-height: 60px; border-radius: 0; padding: 0 20px; border: 0; background: transparent; color: #fff; font: 400 16px/1.2 var(--serif); letter-spacing: .02em; box-shadow: none; white-space: normal; text-align: center; } :where(html[data-tema="lux"]) .cautare-rand .btn-plin .ph { color: var(--aur-deschis); font-size: 17px; transition: color .4s; } :where(html[data-tema="lux"]) .cautare-rand .btn-plin:hover { background: var(--aur); color: var(--pe-aur); } :where(html[data-tema="lux"]) .cautare-rand .btn-plin:hover .ph { color: var(--pe-aur); } :where(html[data-tema="lux"]) .cautare-rand .btn-plin:focus-visible { outline: 1px solid #fff; outline-offset: -6px; } :where(html[data-tema="lux"]) .cautare-subsol { justify-content: center; gap: 10px 26px; margin-top: 24px; font: 400 13px/1.4 var(--sans); color: rgba(255, 255, 255, .8); letter-spacing: .02em; } :where(html[data-tema="lux"]) .cautare-subsol b { color: #fff; font-weight: 500; } :where(html[data-tema="lux"]) .cautare-subsol .ph { color: var(--aur-deschis); } :where(html[data-tema="lux"]) .cautare-subsol .nota-pill { margin-right: -16px; } /* nota Booking: pătrat auriu cu cifra închisă (în erou și pe carduri) */ :where(html[data-tema="lux"]) .cautare-subsol .nota-pill, :where(html[data-tema="lux"]) .ap-insigna .nota-pill { border-radius: 0; background: var(--aur); color: var(--pe-aur); font: 600 12.5px/1 var(--sans); height: 24px; min-width: 32px; } /* rezultatele căutării: panou închis sub ramă */ :where(html[data-tema="lux"]) .cautare-rezultate { border-top: 0; } :where(html[data-tema="lux"]) .cautare-rezultate.vizibil { margin-top: 22px; padding: 6px 18px; background: rgba(16, 17, 19, .94); border: 1px solid rgba(185, 157, 117, .4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); gap: 0; } :where(html[data-tema="lux"]) .rezultat { background: transparent; border-radius: 0; padding: 14px 0; border-bottom: 1px solid var(--line); } :where(html[data-tema="lux"]) .rezultat:last-child { border-bottom: 0; } :where(html[data-tema="lux"]) .rezultat img { border-radius: 0; } :where(html[data-tema="lux"]) .rezultat h4 { font: 400 19px/1.25 var(--serif); color: #fff; } :where(html[data-tema="lux"]) .rezultat-info { color: var(--ink-3); } :where(html[data-tema="lux"]) .rezultat-pret strong { font: 400 20px/1.2 var(--serif); color: #fff; } :where(html[data-tema="lux"]) .rezultat-pret span { color: var(--ink-3); } :where(html[data-tema="lux"]) .rezultat .btn { height: 44px; min-height: 0; padding: 0 24px; border-radius: 0; font-size: 15px; } :where(html[data-tema="lux"]) .cautare-rezultate .eroare-text { padding: 14px 0; color: var(--err); } :where(html[data-tema="lux"]) .schelet { border-radius: 0; margin: 10px 0; height: 76px; background: linear-gradient(90deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .04) 100%); background-size: 200% 100%; } /* ================================================================ CALENDARUL ȘI OASPEȚII (ferestrele care se deschid) */ :where(html[data-tema="lux"]) .pop { background: #1B1D20; color: var(--ink-2); border: 1px solid rgba(185, 157, 117, .45); border-radius: 0; padding: 22px 24px; box-shadow: 0 34px 80px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .4); } :where(html[data-tema="lux"]) .cautare .pop-calendar:not(.pop-fix) { left: 0; } :where(html[data-tema="lux"]) .pop-subsol { border-top-color: var(--line); color: var(--ink-3); } :where(html[data-tema="lux"]) .pop-subsol .btn { height: 42px; } :where(html[data-tema="lux"]) .link-simplu { color: var(--ink-2); font-weight: 400; text-decoration-color: rgba(185, 157, 117, .7); } :where(html[data-tema="lux"]) .link-simplu:hover { color: #fff; } :where(html[data-tema="lux"]) .pop-cap b { font: 400 20px/1.2 var(--serif); color: #fff; } :where(html[data-tema="lux"]) .pop-cap button { border-radius: 0; background: transparent; border: 1px solid var(--line-2); color: #fff; } :where(html[data-tema="lux"]) .cal-nav button { border-radius: 0; color: #fff; border: 1px solid rgba(185, 157, 117, .45); width: 38px; height: 38px; } :where(html[data-tema="lux"]) .cal-nav button:hover:not([disabled]) { background: rgba(185, 157, 117, .16); border-color: var(--aur); } :where(html[data-tema="lux"]) .cal-luni { gap: 34px; } :where(html[data-tema="lux"]) .cal-luna h5 { font: 400 18px/38px var(--serif); color: #fff; letter-spacing: .02em; } :where(html[data-tema="lux"]) .cal-zs { font: 500 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 8px 0 10px; } :where(html[data-tema="lux"]) .zi { border-radius: 0; font: 400 15px/1.1 var(--sans); color: #EDEDED; } :where(html[data-tema="lux"]) .zi small { color: var(--ink-3); font-size: 10.5px; } :where(html[data-tema="lux"]) .zi:hover:not(.inactiv):not(.gol) { background: rgba(255, 255, 255, .07); } :where(html[data-tema="lux"]) .zi.trecut { color: #868A8F; } /* ~4.8:1 pe #151719, tot mai stinse decât zilele libere */ :where(html[data-tema="lux"]) .zi.ocupat { color: #8A8E94; text-decoration-color: rgba(242, 155, 128, .7); } :where(html[data-tema="lux"]) .zi.doar-plecare { color: var(--ink-2); } :where(html[data-tema="lux"]) .zi.interval { background: rgba(185, 157, 117, .17); border-radius: 0; color: #fff; } :where(html[data-tema="lux"]) .zi.interval small { color: #D9C6A8; } :where(html[data-tema="lux"]) .zi.previzualizare { background: rgba(185, 157, 117, .1); border-radius: 0; } :where(html[data-tema="lux"]) .zi.start, :where(html[data-tema="lux"]) .zi.final { background: var(--aur) !important; color: var(--pe-aur); border-radius: 0; } :where(html[data-tema="lux"]) .zi.start small, :where(html[data-tema="lux"]) .zi.final small { color: rgba(21, 23, 25, .78); } :where(html[data-tema="lux"]) .zi.start.cu-final, :where(html[data-tema="lux"]) .zi.final { border-radius: 0; } :where(html[data-tema="lux"]) .zi.azi::before { background: var(--aur); border-radius: 0; width: 4px; height: 4px; } :where(html[data-tema="lux"]) .zi.azi.start::before, :where(html[data-tema="lux"]) .zi.azi.final::before { background: var(--pe-aur); } :where(html[data-tema="lux"]) .cal-mesaj { color: var(--ink-3); } :where(html[data-tema="lux"]) .cal-mesaj.eroare { color: var(--err); } :where(html[data-tema="lux"]) .stepper + .stepper { border-top-color: var(--line); } :where(html[data-tema="lux"]) .stepper b { font: 400 17px/1.3 var(--serif); color: #fff; } :where(html[data-tema="lux"]) .stepper span { color: var(--ink-3); } :where(html[data-tema="lux"]) .stepper-ctrl button { border-radius: 0; border-color: rgba(185, 157, 117, .55); color: #fff; transition: background .3s, border-color .3s, color .3s; } :where(html[data-tema="lux"]) .stepper-ctrl button:hover:not([disabled]) { border-color: var(--aur); background: var(--aur); color: var(--pe-aur); } :where(html[data-tema="lux"]) .stepper-ctrl output { color: #fff; font-weight: 500; font-size: 16px; } /* vârstele copiilor: în calendar.js nu au stil deloc (select-uri native) */ :where(html[data-tema="lux"]) .varste-copii-pop { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 0 4px; border-top: 1px solid var(--line); } :where(html[data-tema="lux"]) .varste-copii-pop > span { grid-column: 1 / -1; font-size: 13px; color: var(--ink-3); } :where(html[data-tema="lux"]) .varste-copii-pop select { width: 100%; height: 42px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 0; color: #fff; font: 400 14px var(--sans); appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; background: var(--bg-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B99D75' stroke-width='1.6'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") no-repeat right 12px center; } :where(html[data-tema="lux"]) .varste-copii-pop select:focus { outline: 0; border-color: var(--aur); } :where(html[data-tema="lux"]) .varste-copii-pop option { background: #24272B; color: #fff; } /* ================================================================ APARIȚIA LA DERULARE (mai lungă și mai amplă, ca în CozyStay) */ @media (prefers-reduced-motion: no-preference) { :where(html[data-tema="lux"]) .apare-la-derulare { transform: translateY(50px); transition: opacity 1.25s var(--ease-lux), transform 1.25s var(--ease-lux); } :where(html[data-tema="lux"]) .apare-la-derulare.vazut { transform: none; } } /* titlurile centrate (ca „Choose Your Apartment Type”) */ :where(html[data-tema="lux"]) #apartamente .sectiune-cap, :where(html[data-tema="lux"]) #facilitati .sectiune-cap, :where(html[data-tema="lux"]) #locatie .sectiune-cap { max-width: 820px; margin-left: auto; margin-right: auto; margin-bottom: 64px; text-align: center; } :where(html[data-tema="lux"]) #apartamente .sectiune-cap h2::before, :where(html[data-tema="lux"]) #facilitati .sectiune-cap h2::before, :where(html[data-tema="lux"]) #locatie .sectiune-cap h2::before { margin-left: auto; margin-right: auto; } :where(html[data-tema="lux"]) #apartamente .sectiune-cap p, :where(html[data-tema="lux"]) #locatie .sectiune-cap p { margin-left: auto; margin-right: auto; } /* ================================================================ CARDURILE DE APARTAMENT */ :where(html[data-tema="lux"]) .apartamente-grila { grid-template-columns: 1fr 1fr; gap: 56px; } :where(html[data-tema="lux"]) .ap-card { position: relative; background: transparent; border-radius: 0; color: var(--ink-2); } :where(html[data-tema="lux"]) .ap-poze { border-radius: 0; box-shadow: none; background: #0E0F10; aspect-ratio: 4 / 3; } :where(html[data-tema="lux"]) .apartamente-grila > :nth-child(2) .ap-poze { aspect-ratio: 4 / 3; } :where(html[data-tema="lux"]) .ap-poze::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .38) 100%); } :where(html[data-tema="lux"]) .ap-poze img { transition: opacity .35s ease, transform .9s var(--ease-lux); } :where(html[data-tema="lux"]) .ap-card:hover .ap-poze img.activ { transform: scale(1.07); } /* segmentele (câte poze are cardul) coboară jos, ca eticheta de preț să stea în colțul de sus */ :where(html[data-tema="lux"]) .ap-segmente { top: auto; bottom: 18px; left: 20px; right: 20px; gap: 6px; } :where(html[data-tema="lux"]) .ap-segmente span { height: 2px; border-radius: 0; background: rgba(255, 255, 255, .38); } :where(html[data-tema="lux"]) .ap-segmente span.activ { background: var(--aur); } /* nota Booking: cutie neagră, sus în dreapta */ :where(html[data-tema="lux"]) .ap-insigna { left: auto; right: 20px; top: 20px; bottom: auto; border-radius: 0; background: rgba(11, 12, 13, .82); color: #fff; padding: 5px 12px 5px 5px; font: 500 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* prețul: eticheta albă cu text negru MAJUSCULE din colțul pozei („DE LA 380 LEI / NOAPTE”) */ :where(html[data-tema="lux"]) .ap-card .ap-pret { position: absolute; top: 20px; left: 20px; z-index: 3; margin: 0 !important; display: flex; align-items: baseline; gap: 5px; background: #fff; color: #151719; padding: 9px 13px; font: 500 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; } :where(html[data-tema="lux"]) .ap-card .ap-pret small { display: inline; font-size: 12px; color: #151719; } :where(html[data-tema="lux"]) .ap-card .ap-pret strong { font: 600 12px/1 var(--sans); letter-spacing: .08em; color: #000; } :where(html[data-tema="lux"]) .ap-card .ap-pret strong span { font: 500 12px/1 var(--sans); color: #4A4D52; } /* textul sub poză, centrat: titlu, linia aurie cu detaliile, descrierea, săgeata */ :where(html[data-tema="lux"]) .ap-corp { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; padding: 30px 12px 0; } :where(html[data-tema="lux"]) .ap-corp > div:first-child { display: contents; } :where(html[data-tema="lux"]) .ap-corp h3 { order: 1; font-size: 30px; line-height: 1.2; color: #fff; transition: color .4s; } :where(html[data-tema="lux"]) .ap-card:hover .ap-corp h3 { color: var(--aur-deschis); } :where(html[data-tema="lux"]) .ap-date { order: 2; justify-content: center; gap: 0; margin-top: 12px; } :where(html[data-tema="lux"]) .fapt { padding: 0; border-radius: 0; background: transparent; color: var(--aur); font: 400 15px/1.6 var(--sans); gap: 0; letter-spacing: .01em; } :where(html[data-tema="lux"]) .fapt .ph { display: none; } :where(html[data-tema="lux"]) .fapt:not(:last-child)::after { content: "/"; margin: 0 10px; color: rgba(185, 157, 117, .6); } :where(html[data-tema="lux"]) .ap-corp p { order: 3; margin-top: 12px; font-size: 16px; line-height: 1.66; color: var(--ink-2); max-width: 46ch; } :where(html[data-tema="lux"]) .ap-corp .sageata { order: 4; margin-top: 22px; width: 46px; height: 46px; border-radius: 0; background: transparent; color: var(--aur); border: 1px solid var(--aur-plin); font-size: 17px; transition: background .4s var(--ease-lux), color .4s var(--ease-lux), border-color .4s; } :where(html[data-tema="lux"]) .ap-card:hover .sageata { background: var(--aur); border-color: var(--aur); color: var(--pe-aur); transform: none; } /* ================================================================ „PRIN APARTAMENTE” (povestea cu poza lipită) */ :where(html[data-tema="lux"]) .poveste { background: var(--negru); } :where(html[data-tema="lux"]) .pas-nr { width: 50px; height: 50px; border-radius: 0; background: transparent; border: 1px solid rgba(185, 157, 117, .55); box-shadow: none; color: var(--aur); font-size: 22px; margin-bottom: 22px; } :where(html[data-tema="lux"]) .pas h3 { font-size: clamp(28px, 2.6vw, 38px); color: #fff; } :where(html[data-tema="lux"]) .pas p { color: var(--ink-2); font-size: 17px; margin-top: 14px; } /* legătura „Smart Modern →”: Marcellus, linie aurie dedesubt care se strânge la hover */ :where(html[data-tema="lux"]) .pas .ap-legatura { position: relative; align-self: flex-start; font: 400 15px/1.3 var(--serif); letter-spacing: .02em; color: #fff; padding: 6px 0; } :where(html[data-tema="lux"]) .pas .ap-legatura::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--aur); transform-origin: left; transition: transform .25s var(--ease-lux); } :where(html[data-tema="lux"]) .pas .ap-legatura:hover::after { transform: scaleX(0); } :where(html[data-tema="lux"]) .pas .ap-legatura .ph { color: var(--aur); } :where(html[data-tema="lux"]) .pas .ap-legatura { margin-top: 22px; } /* GSAP scrie colțurile direct pe element (de la 40px la 28px): aici rămân drepte */ :where(html[data-tema="lux"]) .poveste-scena { border-radius: 0 !important; background: #0E0F10; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9); } :where(html[data-tema="lux"]) .poveste-progres span { width: 2px; border-radius: 0; background: rgba(255, 255, 255, .4); } :where(html[data-tema="lux"]) .poveste-progres span.activ { background: var(--aur); } /* ================================================================ FACILITĂȚILE */ :where(html[data-tema="lux"]) .bento { gap: 18px; } :where(html[data-tema="lux"]) .dala { border-radius: 0; background: var(--bg-2); border: 1px solid var(--line); padding: 26px; transition: transform .5s var(--ease-lux), border-color .5s; } :where(html[data-tema="lux"]) .dala:hover { box-shadow: none; border-color: rgba(185, 157, 117, .55); } :where(html[data-tema="lux"]) .dala-ic { width: auto; height: auto; border-radius: 0; background: transparent; color: var(--aur); font-size: 38px; place-items: start; justify-content: start; } :where(html[data-tema="lux"]) .dala h4 { font: 400 19px/1.25 var(--serif); color: #fff; } :where(html[data-tema="lux"]) .dala small { font-size: 14px; color: var(--ink-3); margin-top: 6px; } :where(html[data-tema="lux"]) .dala-foto { padding: 0; border: 0; background: #0E0F10; } :where(html[data-tema="lux"]) .dala-foto::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .78) 100%); } :where(html[data-tema="lux"]) .dala-foto .dala-text { padding: 24px; } :where(html[data-tema="lux"]) .dala-foto h4 { font-size: 21px; } :where(html[data-tema="lux"]) .dala-foto small { color: rgba(255, 255, 255, .86); letter-spacing: .02em; } :where(html[data-tema="lux"]) .dala-foto:hover img { transform: scale(1.07); } /* dala cu cifra (Wi-Fi): cutie neagră cu chenar auriu, cifra mare în Marcellus auriu */ :where(html[data-tema="lux"]) .dala-albastra { background: var(--negru); border-color: rgba(185, 157, 117, .55); color: #fff; } :where(html[data-tema="lux"]) .dala-albastra .dala-ic { background: transparent; color: var(--aur); } :where(html[data-tema="lux"]) .dala-albastra small { color: var(--ink-3); } :where(html[data-tema="lux"]) .dala-cifra { font: 400 64px/1 var(--serif); letter-spacing: 0; color: var(--aur); } :where(html[data-tema="lux"]) .dala-cifra span { font: 400 16px var(--sans); letter-spacing: .04em; color: var(--ink-2); opacity: 1; margin-left: 8px; } :where(html[data-tema="lux"]) .dala-albastra h4 { margin-top: 14px !important; } /* ================================================================ SCORUL ȘI RECENZIILE */ :where(html[data-tema="lux"]) #recenzii { background: var(--bg-2); } :where(html[data-tema="lux"]) .recenzii-grila { grid-template-columns: 380px 1fr; gap: 64px; } :where(html[data-tema="lux"]) .scor { background: var(--bg); border: 1px solid rgba(185, 157, 117, .45); border-radius: 0; box-shadow: none; padding: 40px 34px 34px; } :where(html[data-tema="lux"]) .inel circle { stroke-width: 3; } :where(html[data-tema="lux"]) .inel .pista { stroke: rgba(255, 255, 255, .1); } :where(html[data-tema="lux"]) .inel .umplere { stroke: var(--aur); stroke-linecap: butt; } :where(html[data-tema="lux"]) .inel-text strong { font: 400 62px/1 var(--serif); letter-spacing: 0; color: #fff; } :where(html[data-tema="lux"]) .inel-text span { font: 500 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 10px; } :where(html[data-tema="lux"]) .scor h3 { font-size: 28px; color: #fff; } :where(html[data-tema="lux"]) .scor p { color: var(--ink-3); font-size: 15px; margin-top: 8px; } :where(html[data-tema="lux"]) .scor-ap { gap: 0 18px; margin-top: 26px; } :where(html[data-tema="lux"]) .scor-ap div { background: transparent; border-radius: 0; border-top: 1px solid var(--line-2); padding: 16px 0 0; } :where(html[data-tema="lux"]) .scor-ap b { font: 400 28px/1.1 var(--serif); color: var(--aur); } :where(html[data-tema="lux"]) .scor-ap span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--ink-3); } :where(html[data-tema="lux"]) .scor-site { color: var(--ink-2); } :where(html[data-tema="lux"]) .scor-site b { color: #fff; } :where(html[data-tema="lux"]) .stele-mici { color: #E6B673; letter-spacing: 4px; } :where(html[data-tema="lux"]) .banda { gap: 20px; } :where(html[data-tema="lux"]) .citat { flex-basis: 380px; background: var(--bg); border: 1px solid var(--line); border-radius: 0; padding: 32px 30px 28px; gap: 22px; min-height: 260px; transition: border-color .4s; } :where(html[data-tema="lux"]) .citat:hover { border-color: rgba(185, 157, 117, .5); } :where(html[data-tema="lux"]) .citat .stele-mici { margin-bottom: 14px; } :where(html[data-tema="lux"]) .citat blockquote { font: 400 18px/1.6 var(--serif); color: #F0F0F0; } :where(html[data-tema="lux"]) .avatar { border-radius: 0; background: transparent; border: 1px solid rgba(185, 157, 117, .6); color: var(--aur); font: 400 18px/1 var(--serif); } :where(html[data-tema="lux"]) .citat footer b { font: 400 16px/1.3 var(--serif); color: #fff; } :where(html[data-tema="lux"]) .citat footer span { font: 500 11.5px/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } :where(html[data-tema="lux"]) .citat .verificat { color: var(--aur); font-weight: 500; } :where(html[data-tema="lux"]) .banda-ctrl { gap: 10px; margin-top: 10px; } :where(html[data-tema="lux"]) .banda-ctrl button { width: 46px; height: 46px; border-radius: 0; background: transparent; border: 1px solid var(--aur-plin); color: var(--aur); transition: background .4s var(--ease-lux), color .4s var(--ease-lux); } :where(html[data-tema="lux"]) .banda-ctrl button:hover { background: var(--aur); border-color: var(--aur); color: var(--pe-aur); } /* ================================================================ LOCAȚIA ȘI HARTA */ /* isolation: harta (Leaflet 400/1000) și cardul (500) rămân în interiorul hărții, sub .nav, .bara-limba, .bara-mobil, .plutitor */ :where(html[data-tema="lux"]) .locatie { border-radius: 0; box-shadow: none; border: 1px solid rgba(185, 157, 117, .35); isolation: isolate; } :where(html[data-tema="lux"]) #harta { background: #131210; } :where(html[data-tema="lux"]) .locatie-card { border-radius: 0; background: rgba(14, 15, 16, .93); border: 1px solid rgba(185, 157, 117, .4); padding: 30px 26px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } :where(html[data-tema="lux"]) .locatie-card h3 { font-size: 28px; color: #fff; margin-bottom: 16px; } :where(html[data-tema="lux"]) .loc-ap { border-radius: 0; padding: 12px; margin: 0 -12px; } :where(html[data-tema="lux"]) .loc-ap:hover, :where(html[data-tema="lux"]) .loc-ap.activ { background: rgba(185, 157, 117, .1); } :where(html[data-tema="lux"]) .loc-ap .ph { border-radius: 0; background: transparent; border: 1px solid rgba(185, 157, 117, .55); color: var(--aur); } :where(html[data-tema="lux"]) .loc-ap b { font: 400 18px/1.3 var(--serif); color: #fff; } :where(html[data-tema="lux"]) .loc-ap span { display: block; margin-top: 2px; color: var(--ink-3); font-size: 14px; line-height: 1.5; } :where(html[data-tema="lux"]) .aproape { border-top-color: var(--line); gap: 8px; } :where(html[data-tema="lux"]) .aproape span { border-radius: 0; background: transparent; border: 1px solid var(--line-2); color: var(--ink-2); padding: 6px 10px; line-height: 1.3; } :where(html[data-tema="lux"]) .aproape span b { color: #fff; font-weight: 500; } /* leaflet.css vine după temă: fără :where */ html[data-tema="lux"] .leaflet-container { background: #131210; font-family: var(--sans); } /* cât mai aproape de dalele întoarse: nu se văd rosturile */ html[data-tema="lux"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) grayscale(1) brightness(.82) contrast(1.08) sepia(.18); } html[data-tema="lux"] .pin-harta { border-radius: 0; background: var(--aur); border: 2px solid #151719; box-shadow: 0 12px 26px -8px rgba(0, 0, 0, .85); } html[data-tema="lux"] .pin-harta i { color: #151719; } /* cercul din jurul pinului e desenat din site.js cu albastrul lui Modern */ html[data-tema="lux"] path.leaflet-interactive[stroke="#1B6BF0" i] { stroke: var(--aur); fill: var(--aur); } html[data-tema="lux"] .leaflet-bar { border: 1px solid rgba(185, 157, 117, .55); border-radius: 0; box-shadow: none; } html[data-tema="lux"] .leaflet-bar a, html[data-tema="lux"] .leaflet-bar a:first-child, html[data-tema="lux"] .leaflet-bar a:last-child { background: rgba(14, 15, 16, .92); color: #fff; border-bottom-color: rgba(185, 157, 117, .35); border-radius: 0; } html[data-tema="lux"] .leaflet-bar a:hover, html[data-tema="lux"] .leaflet-bar a:focus { background: var(--aur); color: var(--pe-aur); } html[data-tema="lux"] .leaflet-container .leaflet-control-attribution { background: rgba(14, 15, 16, .8); color: var(--ink-3); } html[data-tema="lux"] .leaflet-container .leaflet-control-attribution a { color: var(--aur); } html[data-tema="lux"] .leaflet-tooltip { background: #0E0F10; color: #fff; border: 1px solid var(--aur); border-radius: 0; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .8); font: 400 14px/1.3 var(--serif); padding: 7px 12px; } html[data-tema="lux"] .leaflet-tooltip-top::before { border-top-color: var(--aur); } html[data-tema="lux"] .leaflet-tooltip-bottom::before { border-bottom-color: var(--aur); } /* ================================================================ „REZERVĂ DIRECT” + întrebarea */ :where(html[data-tema="lux"]) .direct { background: var(--negru); border: 1px solid rgba(185, 157, 117, .35); border-radius: 0; padding: 76px 72px; gap: 64px; align-items: start; } :where(html[data-tema="lux"]) .direct h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.18; color: #fff; } :where(html[data-tema="lux"]) .direct h2::before { content: ""; display: block; width: 56px; height: 1px; background: var(--aur); margin: 0 0 22px; } :where(html[data-tema="lux"]) .direct p { color: var(--ink-2); font-size: 18px; margin-top: 16px; } :where(html[data-tema="lux"]) .avantaje { gap: 0; } :where(html[data-tema="lux"]) .avantaj { background: transparent; border-radius: 0; box-shadow: none; padding: 18px 0; border-top: 1px solid var(--line); gap: 18px; } :where(html[data-tema="lux"]) .avantaj:last-child { border-bottom: 1px solid var(--line); } :where(html[data-tema="lux"]) .avantaj .ph { border-radius: 0; background: transparent; border: 1px solid rgba(185, 157, 117, .55); color: var(--aur); } :where(html[data-tema="lux"]) .avantaj b { font: 400 18px/1.3 var(--serif); color: #fff; } :where(html[data-tema="lux"]) .avantaj span { color: var(--ink-3); font-size: 14.5px; } :where(html[data-tema="lux"]) .direct-butoane { gap: 14px; margin-top: 34px; } /* formularul de întrebare (are și clasa .scor): cutie închisă; câmpurile vin din 1-comune (.grup), ca pe tot site-ul */ :where(html[data-tema="lux"]) .direct .scor { background: var(--bg); border: 1px solid var(--line-2); padding: 40px 36px 34px; gap: 22px; } :where(html[data-tema="lux"]) .direct .scor h3 { font-size: 28px; } :where(html[data-tema="lux"]) .direct .scor .btn { justify-self: start; } :where(html[data-tema="lux"]) .direct .cal-mesaj { color: var(--ink-3); font-size: 14px; margin-top: 0; } :where(html[data-tema="lux"]) .direct .cal-mesaj.eroare { color: var(--err); } :where(html[data-tema="lux"]) .direct .cal-mesaj:empty { display: none; } /* ================================================================ CALCULATOR (pașii inactivi din „Prin apartamente”: public.css .28 = ~2:1, prea stins pe negru) */ @media (min-width: 761px) { :where(html[data-tema="lux"]) .pas { opacity: .62; } /* .62: textul estompat rămâne ≥ 4.5:1 pe negru */ } /* ================================================================ TABLETĂ (bara de rezervare: 3 câmpuri + butonul pe tot rândul, să nu se rupă „Vezi disponibilitatea”) */ @media (min-width: 761px) and (max-width: 1080px) { :where(html[data-tema="lux"]) .cautare-rand { grid-template-columns: repeat(3, minmax(0, 1fr)); } :where(html[data-tema="lux"]) .camp-oaspeti { border-right: 0; } :where(html[data-tema="lux"]) .cautare-rand .btn-plin { grid-column: 1 / -1; border-top: 1px solid var(--aur); white-space: nowrap; } } /* ================================================================ TABLETĂ */ @media (max-width: 1080px) { /* nota 9,9 centrată și mai lată (public.css o ține la 420px lipită în stânga); formularul din „Rezervă direct” pe toată lățimea */ :where(html[data-tema="lux"]) .recenzii-grila > .scor { max-width: 560px; width: 100%; justify-self: center; } :where(html[data-tema="lux"]) .direct .scor { max-width: none; } /* ținte de atingere de 44px */ :where(html[data-tema="lux"]) .stepper-ctrl button, :where(html[data-tema="lux"]) .cal-nav button { width: 44px; height: 44px; } :where(html[data-tema="lux"]) .chip { min-height: 44px; } html[data-tema="lux"] .erou-bare button { padding: 14px 0 !important; } /* padding-ul vine din style="" în acasa.html */ :where(html[data-tema="lux"]) .camp { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 8px 34px 8px 16px; } :where(html[data-tema="lux"]) .camp::after { right: 15px; } :where(html[data-tema="lux"]) .camp-valoare { margin: 0; max-width: 100%; } :where(html[data-tema="lux"]) .recenzii-grila { grid-template-columns: 1fr; } :where(html[data-tema="lux"]) .direct { grid-template-columns: 1fr; padding: 56px 44px; } :where(html[data-tema="lux"]) .apartamente-grila { gap: 32px; } /* cardurile se îngustează: nota Booking coboară jos în stânga, deasupra segmentelor, ca să nu calce pe preț */ :where(html[data-tema="lux"]) .ap-insigna { top: auto; right: auto; left: 20px; bottom: 34px; } } /* ================================================================ TELEFON */ @media (max-width: 760px) { :where(html[data-tema="lux"]) .erou-continut { padding-top: calc(var(--nav-h) + 56px); padding-bottom: 76px; } :where(html[data-tema="lux"]) .erou-titlu { font-size: 36px; line-height: 1.34; letter-spacing: .01em; margin-bottom: 36px; max-width: 12ch; } :where(html[data-tema="lux"]) .erou-titlu::before { margin-bottom: 22px; } :where(html[data-tema="lux"]) .erou-jos { flex-direction: column; align-items: stretch; } :where(html[data-tema="lux"]) .erou-indicator { order: 0; bottom: 22px; align-items: center; min-width: 0; } :where(html[data-tema="lux"]) .erou-eticheta { display: none; } :where(html[data-tema="lux"]) .erou-bara { width: 30px; } :where(html[data-tema="lux"]) .cautare { padding: 0 10px; border-radius: 0; } :where(html[data-tema="lux"]) .cautare-ap { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin: 0 0 22px; } :where(html[data-tema="lux"]) .chip { height: auto; min-height: 46px; padding: 4px 2px 8px; gap: 0; border-radius: 0; min-width: 0; justify-content: center; letter-spacing: .08em; } :where(html[data-tema="lux"]) .chip-text > span { font-size: 12px; font-weight: 500; } :where(html[data-tema="lux"]) .chip-text small { font-size: 11.5px; } /* bara pe verticală: 4 rânduri de 60px, rama dublă rămâne */ :where(html[data-tema="lux"]) .cautare-rand { grid-template-columns: 1fr; } :where(html[data-tema="lux"]) .camp { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 44px 0 22px; min-height: 60px; border-right: 0; border-bottom: 1px solid var(--aur); } :where(html[data-tema="lux"]) .camp::after { right: 22px; } :where(html[data-tema="lux"]) .camp-valoare { margin: 0 0 0 auto; } :where(html[data-tema="lux"]) .camp-eticheta { font-size: 17px; } :where(html[data-tema="lux"]) .camp-valoare { font-size: 15px; } :where(html[data-tema="lux"]) .camp-oaspeti { grid-column: auto; } :where(html[data-tema="lux"]) .cautare-rand .btn-plin { grid-column: auto; min-height: 60px; font-size: 17px; } :where(html[data-tema="lux"]) .cautare-rezultate.vizibil { padding: 4px 14px; } :where(html[data-tema="lux"]) .rezultat h4 { font-size: 17px; } :where(html[data-tema="lux"]) .pop { border-radius: 0; border-width: 1px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); } :where(html[data-tema="lux"]) .pop-cap { margin-bottom: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } :where(html[data-tema="lux"]) .pop-cap button { width: 40px; height: 40px; } :where(html[data-tema="lux"]) .zi { height: 48px; } :where(html[data-tema="lux"]) #apartamente .sectiune-cap, :where(html[data-tema="lux"]) #facilitati .sectiune-cap, :where(html[data-tema="lux"]) #locatie .sectiune-cap { margin-bottom: 40px; } :where(html[data-tema="lux"]) .apartamente-grila { grid-template-columns: 1fr; gap: 56px; } :where(html[data-tema="lux"]) .ap-corp { padding: 24px 4px 0; } :where(html[data-tema="lux"]) .ap-corp h3 { font-size: 28px; } :where(html[data-tema="lux"]) .ap-corp .sageata { display: none; } :where(html[data-tema="lux"]) .fapt { font-size: 14.5px; } :where(html[data-tema="lux"]) .fapt:not(:last-child)::after { margin: 0 7px; } :where(html[data-tema="lux"]) .ap-card .ap-pret { top: 14px; left: 14px; padding: 8px 11px; } :where(html[data-tema="lux"]) .ap-insigna { left: 14px; bottom: 30px; } :where(html[data-tema="lux"]) .ap-segmente { left: 14px; right: 14px; bottom: 14px; } :where(html[data-tema="lux"]) .pas { background: var(--bg-2); border-radius: 0; box-shadow: none; border: 1px solid var(--line); justify-content: flex-start; } :where(html[data-tema="lux"]) .pas h3 { font-size: 22px; padding: 18px 18px 0; } :where(html[data-tema="lux"]) .pas p { font-size: 15px; margin-top: 8px; padding: 0 18px; } :where(html[data-tema="lux"]) .pas .ap-legatura { margin: 14px 18px 20px; } /* banda de carduri aliniată la marginea lux (24px), nu la 16px din public.css */ :where(html[data-tema="lux"]) .pasi-banda { margin: 0 calc(-1 * var(--lux-margine)); padding: 0 var(--lux-margine) 8px; scroll-padding-inline: var(--lux-margine); } :where(html[data-tema="lux"]) .bento { gap: 10px; } /* facilitățile mici: câte două pe rând, iconița deasupra (ca grila de facilități din CozyStay), nu o listă lungă de rânduri */ :where(html[data-tema="lux"]) .dala { grid-column: span 1; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 18px 16px; border-radius: 0; gap: 14px; } :where(html[data-tema="lux"]) .dala-lata { grid-column: span 2; flex-direction: row; align-items: center; gap: 18px; } :where(html[data-tema="lux"]) .dala-ic { width: auto; height: auto; font-size: 30px; border-radius: 0; place-items: start; justify-content: start; } :where(html[data-tema="lux"]) .dala h4 { font-size: 17px; } :where(html[data-tema="lux"]) .dala small { font-size: 13px; margin-top: 3px; } :where(html[data-tema="lux"]) .dala-foto { padding: 0; flex-direction: column; justify-content: flex-end; align-items: stretch; } :where(html[data-tema="lux"]) .dala-foto .dala-text { padding: 14px; text-shadow: 0 1px 14px rgba(0, 0, 0, .65); } :where(html[data-tema="lux"]) .dala-foto::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, .88) 100%); } :where(html[data-tema="lux"]) .dala-foto h4 { font-size: 16px; } :where(html[data-tema="lux"]) .dala-cifra { font-size: 40px; } :where(html[data-tema="lux"]) .dala-albastra h4 { margin-top: 6px !important; } :where(html[data-tema="lux"]) .recenzii-grila { gap: 44px; } /* banda de recenzii până la muchia ecranului: estomparea cade în margine, nu peste litere */ :where(html[data-tema="lux"]) .banda { margin: 0 calc(-1 * var(--lux-margine)); padding-left: var(--lux-margine); padding-right: var(--lux-margine); } :where(html[data-tema="lux"]) .banda.curge { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 28px), transparent); } :where(html[data-tema="lux"]) .citat { flex-basis: 84%; padding: 26px 22px 22px; min-height: 240px; } :where(html[data-tema="lux"]) .citat blockquote { font-size: 17px; } :where(html[data-tema="lux"]) .locatie-card { box-shadow: none; border-radius: 0; border-width: 1px 0 0; background: var(--negru); padding: 26px 18px; } :where(html[data-tema="lux"]) .direct { padding: 40px 22px; border-radius: 0; gap: 40px; } :where(html[data-tema="lux"]) .direct p { font-size: 16.5px; } :where(html[data-tema="lux"]) .direct-butoane { flex-direction: column; } :where(html[data-tema="lux"]) .direct-butoane .btn, :where(html[data-tema="lux"]) .direct .scor .btn { width: 100%; justify-self: stretch; } /* pe telefon formularul nu mai stă în cutie în cutie: doar o linie deasupra */ :where(html[data-tema="lux"]) .direct .scor { background: transparent; border: 0; border-top: 1px solid var(--line); padding: 34px 0 0; } } @media (max-width: 380px) { :where(html[data-tema="lux"]) .erou-titlu { font-size: 32px; } :where(html[data-tema="lux"]) .chip { letter-spacing: .04em; } } /* ======================================================================== 3-pagini */ /* Tema „lux” — 3-pagini: paginile interioare (stilul CozyStay „apartment”, pagina unei camere). Pagina apartamentului: mozaicul de poze cu colțuri drepte, titlul animat pe litere, rândul de fapte cu linii aurii, facilitățile cu iconițe aurii fără cutie, calendarul deschis, „cutia de rezervare” (fond rgba(255,255,255,.02), câmpuri cu chenar auriu, totalul în Marcellus), bara de jos pe telefon, galeria pe negru. Apoi rezervarea (formular + rezumat), pagina rezervării (biletul), paginile legale și recenzia. Regula: :where(html[data-tema="lux"]) .clasa; ce schimbă public.css în @media (1080 / 760) se repetă jos, în @media-urile de aici. Excepție: unde public.css are !important (ex. .card-campuri .camp-oaspeti), și aici e nevoie de !important. */ /* ================================================================ PAGINA APARTAMENTULUI: mozaicul de poze */ :where(html[data-tema="lux"]) .ap-pagina { padding-top: calc(var(--nav-h) + 40px); } :where(html[data-tema="lux"]) .mozaic { grid-template-rows: 284px 284px; gap: 8px; border-radius: 0; } :where(html[data-tema="lux"]) .mozaic > button { background: #0E0F10; cursor: zoom-in; } :where(html[data-tema="lux"]) .mozaic > button::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(0, 0, 0, .1); transition: background .6s var(--ease-lux); } :where(html[data-tema="lux"]) .mozaic > button:hover::after { background: rgba(0, 0, 0, 0); } :where(html[data-tema="lux"]) .mozaic img { transition: transform 1.1s var(--ease-lux); } :where(html[data-tema="lux"]) .mozaic button:hover img { transform: scale(1.07); filter: none; } /* „Toate cele N fotografii”: buton cu contur auriu pe sticlă neagră (pe alb, cel din public.css avea textul invizibil) */ :where(html[data-tema="lux"]) .mozaic-toate { right: 20px; bottom: 20px; } :where(html[data-tema="lux"]) .mozaic-toate .btn { height: 46px; padding: 0 22px; gap: 10px; border: 1px solid var(--aur-plin); border-radius: 0; background: rgba(11, 12, 13, .74); color: #fff; box-shadow: none; font-size: 15px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } :where(html[data-tema="lux"]) .mozaic-toate .btn .ph { color: var(--aur); font-size: 17px; transition: color .4s; } :where(html[data-tema="lux"]) .mozaic-toate .btn:hover { background: var(--aur); border-color: var(--aur); color: var(--pe-aur); } :where(html[data-tema="lux"]) .mozaic-toate .btn:hover .ph { color: var(--pe-aur); } /* ================================================================ titlul, adresa (linia aurie de detalii), nota Booking */ :where(html[data-tema="lux"]) .ap-cap { margin: 60px 0 48px; gap: 28px; align-items: flex-end; } :where(html[data-tema="lux"]) .ap-cap h1 { font-size: clamp(40px, 4.2vw, 60px); line-height: 1.1; letter-spacing: 0; color: #fff; } :where(html[data-tema="lux"]) .ap-cap p { margin-top: 18px; gap: 10px; color: var(--aur); font-size: 16px; letter-spacing: .01em; } :where(html[data-tema="lux"]) .ap-cap p .ph { font-size: 18px; } :where(html[data-tema="lux"]) .clasificat { margin-top: 16px; gap: 10px; color: var(--ink-3); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; } :where(html[data-tema="lux"]) a.clasificat[href]:hover { color: #fff; text-decoration: none; } :where(html[data-tema="lux"]) .ap-scor { gap: 16px; padding: 12px 24px 12px 12px; border-radius: 0; background: transparent; border: 1px solid rgba(185, 157, 117, .4); } :where(html[data-tema="lux"]) .ap-scor .nota-pill { height: 52px; min-width: 56px; border-radius: 0; background: var(--aur); color: var(--pe-aur); font: 400 22px/1 var(--serif); } :where(html[data-tema="lux"]) .ap-scor b { font: 400 20px/1.25 var(--serif); color: #fff; } :where(html[data-tema="lux"]) .ap-scor > div span { display: block; margin-top: 5px; font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } /* ================================================================ cele două coloane: textul și cutia de rezervare (440px, ca la CozyStay) */ :where(html[data-tema="lux"]) .ap-layout { grid-template-columns: minmax(0, 1fr) 440px; gap: 80px; } :where(html[data-tema="lux"]) .ap-bloc { padding: 56px 0; border-top: 1px solid var(--line); } :where(html[data-tema="lux"]) .ap-bloc:first-child { padding-top: 0; border-top: 0; } :where(html[data-tema="lux"]) .ap-bloc h2 { font-size: clamp(26px, 2.3vw, 32px); line-height: 1.2; margin-bottom: 30px; color: #fff; } :where(html[data-tema="lux"]) .ap-descriere { color: var(--ink-2); font-size: 18px; line-height: 1.66; max-width: 64ch; } /* faptele mari (m², dormitoare, băi, oaspeți): un rând între două linii aurii, despărțit de linii fine; iconițe aurii, cifre în Marcellus */ :where(html[data-tema="lux"]) .fapte-mari { gap: 0; border-top: 1px solid rgba(185, 157, 117, .38); border-bottom: 1px solid rgba(185, 157, 117, .38); } :where(html[data-tema="lux"]) .fapte-mari div { background: transparent; border-radius: 0; padding: 26px 22px 24px; } :where(html[data-tema="lux"]) .fapte-mari div + div { border-left: 1px solid var(--line); } :where(html[data-tema="lux"]) .fapte-mari div:first-child { padding-left: 0; } :where(html[data-tema="lux"]) .fapte-mari .ph { display: block; font-size: 28px; color: var(--aur); } :where(html[data-tema="lux"]) .fapte-mari b { margin-top: 16px; font: 300 32px/1.1 var(--sans); letter-spacing: -.01em; color: #fff; } /* Jost subțire: în Marcellus „1” se citește „I” */ :where(html[data-tema="lux"]) .fapte-mari span { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } /* „Unde dormi”: cutii închise, iconiță aurie în stânga (ca „Family-friendly Amenities”); text Jost, fiindcă „Dormitor 1” în Marcellus se citește „Dormitor I” */ :where(html[data-tema="lux"]) .paturi { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; } :where(html[data-tema="lux"]) .paturi div { display: flex; align-items: center; gap: 16px; padding: 22px 20px; border: 1px solid transparent; border-radius: 0; background: rgba(255, 255, 255, .035); color: #F2F2F2; font: 400 16px/1.45 var(--sans); transition: border-color .4s, background .4s; } :where(html[data-tema="lux"]) .paturi div:hover { border-color: rgba(185, 157, 117, .4); background: rgba(185, 157, 117, .05); } :where(html[data-tema="lux"]) .paturi .ph { display: block; flex: none; margin: 0; font-size: 32px; color: var(--aur); } /* facilitățile și „Bine de știut”: iconiță aurie fără cutie, două coloane */ :where(html[data-tema="lux"]) .facilitati-lista { gap: 22px 40px; } :where(html[data-tema="lux"]) .facilitate { gap: 18px; font-size: 16px; line-height: 1.55; color: #E6E6E6; } :where(html[data-tema="lux"]) .facilitate .ph { width: 30px; height: auto; border-radius: 0; background: transparent; color: var(--aur); font-size: 27px; place-items: start center; } /* calendarul de pe pagină: deschis, fără cutie (ca „Availability”); săgețile stau pe rândul cu lunile */ :where(html[data-tema="lux"]) .cal-inline { border: 0; border-radius: 0; padding: 0; background: transparent; } /* derularea la calendar (bara de jos, „Rezervă” din meniu = #disponibilitate) se oprește sub meniul lipit sus */ :where(html[data-tema="lux"]) .cal-inline { scroll-margin-top: calc(var(--nav-h) + 20px); } :where(html[data-tema="lux"]) #disponibilitate { scroll-margin-top: var(--nav-h); } :where(html[data-tema="lux"]) .cal-inline .cal-mesaj { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; } /* „Și celălalt apartament”: poza mare în stânga, textul în dreapta (ca blocul „poză + text” de pe prima pagină CozyStay) */ :where(html[data-tema="lux"]) .alte-ap { grid-template-columns: 1fr; } :where(html[data-tema="lux"]) .alte-ap .ap-card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: center; } :where(html[data-tema="lux"]) .alte-ap .ap-poze { aspect-ratio: 4 / 3 !important; } /* șablonul pune 16/9 în style="" */ :where(html[data-tema="lux"]) .alte-ap .ap-corp { align-items: flex-start; text-align: left; padding: 0; } :where(html[data-tema="lux"]) .alte-ap .ap-corp h3 { font-size: clamp(34px, 3.4vw, 52px); line-height: 1.12; } :where(html[data-tema="lux"]) .alte-ap .ap-corp h3::before { content: ""; display: block; width: 56px; height: 1px; margin: 0 0 26px; background: var(--aur); } :where(html[data-tema="lux"]) .alte-ap .ap-corp p { margin-top: 18px; max-width: 40ch; font-size: 18px; } :where(html[data-tema="lux"]) .alte-ap .ap-corp .sageata { margin-top: 34px; width: 56px; height: 56px; } /* ================================================================ CUTIA DE REZERVARE (dreapta) */ :where(html[data-tema="lux"]) .card-rezervare { display: flex; flex-direction: column; top: calc(var(--nav-h) + 32px); padding: 46px 40px 40px; background: rgba(255, 255, 255, .02); border: 1px solid rgba(185, 157, 117, .28); border-radius: 0; box-shadow: none; } :where(html[data-tema="lux"]) .card-rezervare .pret-mare { order: 1; padding-bottom: 26px; border-bottom: 1px solid var(--line); font: 300 38px/1.1 var(--sans); letter-spacing: -.01em; color: #fff; } /* sumele în Jost subțire: în Marcellus „1” e „I” și „0” e „O” (1.170 lei ar ieși „I.I7O”) */ :where(html[data-tema="lux"]) .card-rezervare .pret-mare span { font: 400 15px/1 var(--sans); letter-spacing: .02em; color: var(--ink-3); } /* câmpurile: fiecare pe rândul lui, chenar auriu de 1px, eticheta în stânga (Marcellus), valoarea în dreapta, săgeată în jos */ :where(html[data-tema="lux"]) .card-campuri { order: 2; display: grid; grid-template-columns: 1fr; gap: 12px; margin: 28px 0 0; border: 0; border-radius: 0; overflow: visible; } :where(html[data-tema="lux"]) .card-rezervare .card-campuri .camp { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; min-height: 54px; padding: 0 44px 0 18px; border: 1px solid var(--aur-plin); border-radius: 0; background: transparent; box-shadow: none; transition: background .3s, border-color .3s; } :where(html[data-tema="lux"]) .card-rezervare .card-campuri .camp-oaspeti { border-left: 1px solid var(--aur-plin) !important; border-top: 1px solid var(--aur-plin); } :where(html[data-tema="lux"]) .card-rezervare .card-campuri .camp:hover { background: rgba(185, 157, 117, .07); border-color: var(--aur); } :where(html[data-tema="lux"]) .card-rezervare .card-campuri .camp.deschis { background: rgba(185, 157, 117, .13); border-color: var(--aur); box-shadow: none; } :where(html[data-tema="lux"]) .card-rezervare .card-campuri .camp::after { right: 18px; } :where(html[data-tema="lux"]) .card-rezervare .camp-eticheta { font: 400 16px/1.2 var(--serif); color: #fff; } :where(html[data-tema="lux"]) .card-rezervare .camp-valoare { margin: 0 0 0 auto; font: 400 14px/1.2 var(--sans); color: #fff; } :where(html[data-tema="lux"]) .card-rezervare .camp-valoare.gol { color: rgba(255, 255, 255, .72); } /* oferta (apare după ce alegi datele) stă înaintea butonului, ca „Total Cost” la CozyStay */ :where(html[data-tema="lux"]) .card-rezervare .oferta { order: 3; margin-top: 28px; } :where(html[data-tema="lux"]) .card-rezervare .oferta:empty { display: none; } :where(html[data-tema="lux"]) .card-rezervare [data-rezerva] { order: 4; margin-top: 28px; height: 56px; font-size: 18px; } /* fără date: buton negru cu linie aurie (ca „Book Your Stay Now”); cu date alese: auriu plin, se vede că e pasul următor */ :where(html[data-tema="lux"]) .card-rezervare [data-rezerva]:not([href]) { background: #000; border-color: var(--aur-plin); color: #fff; cursor: pointer; } :where(html[data-tema="lux"]) .card-rezervare [data-rezerva]:not([href]):hover { background: var(--aur); border-color: var(--aur); color: var(--pe-aur); } :where(html[data-tema="lux"]) .card-rezervare .oferta-nota { order: 5; margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--ink-3); } /* calendarul și oaspeții se deschid în stânga cutiei, peste coloana de text (nu acoperă câmpurile) */ :where(html[data-tema="lux"]) .card-rezervare .pop-calendar { top: 142px; right: calc(100% + 24px); left: auto; bottom: auto; width: 720px; } :where(html[data-tema="lux"]) .card-rezervare .pop-oaspeti { top: 274px; right: calc(100% + 24px); left: auto; bottom: auto; width: 340px; } /* oferta, oriunde apare (cutia de rezervare, rezumatul rezervării, biletul) */ :where(html[data-tema="lux"]) .oferta { gap: 12px; font-size: 15px; } :where(html[data-tema="lux"]) .oferta-linie { color: var(--ink-2); align-items: baseline; } :where(html[data-tema="lux"]) .oferta-total { align-items: baseline; padding-top: 20px; margin-top: 8px; border-top: 1px solid var(--line-2); font: 400 26px/1.2 var(--serif); color: #fff; } :where(html[data-tema="lux"]) .oferta-total span:last-child { font: 300 30px/1.1 var(--sans); letter-spacing: -.01em; } :where(html[data-tema="lux"]) .oferta-tva { margin-top: -2px; font-size: 12.5px; color: var(--ink-3); } :where(html[data-tema="lux"]) .oferta .eroare-text { color: var(--err); font-size: 14.5px; } /* ================================================================ GALERIA pe tot ecranul: negru, butoane pătrate cu linie aurie */ :where(html[data-tema="lux"]) .galerie { background: #08090A; } :where(html[data-tema="lux"]) .galerie-cap { padding: 16px var(--lux-margine, 24px); border-bottom: 1px solid var(--line); } :where(html[data-tema="lux"]) .galerie-cap span { font: 500 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); } :where(html[data-tema="lux"]) .galerie-cap button { width: 46px; height: 46px; border-radius: 0; border: 1px solid var(--aur-plin); background: transparent; color: #fff; box-shadow: none; font-size: 20px; transition: background .4s var(--ease-lux), color .4s, border-color .4s; } :where(html[data-tema="lux"]) .galerie-cap button:hover { background: var(--aur); border-color: var(--aur); color: var(--pe-aur); } :where(html[data-tema="lux"]) .galerie-scena { --pad-jos: 18px; margin-top: 18px; } :where(html[data-tema="lux"]) .galerie-scena img { border-radius: 0; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95); } :where(html[data-tema="lux"]) .galerie-sag { width: 58px; height: 58px; border-radius: 0; border: 1px solid var(--aur-plin); background: rgba(11, 12, 13, .55); color: #fff; box-shadow: none; font-size: 20px; transition: background .4s var(--ease-lux), color .4s, border-color .4s; } :where(html[data-tema="lux"]) .galerie-sag:hover { background: var(--aur); border-color: var(--aur); color: var(--pe-aur); } :where(html[data-tema="lux"]) .galerie-sag.st { left: 20px; } :where(html[data-tema="lux"]) .galerie-sag.dr { right: 20px; } :where(html[data-tema="lux"]) .galerie-mini { gap: 8px; padding: 14px var(--lux-margine, 24px) 22px; justify-content: safe center; } :where(html[data-tema="lux"]) .galerie-mini button { border-radius: 0; border: 1px solid transparent; opacity: .42; } :where(html[data-tema="lux"]) .galerie-mini button:hover { opacity: .8; } :where(html[data-tema="lux"]) .galerie-mini button.activ { opacity: 1; border-color: var(--aur); } /* ================================================================ PAGINILE SIMPLE (rezervare, bilet, legale, recenzie) */ :where(html[data-tema="lux"]) .pagina-simpla { padding-top: calc(var(--nav-h) + 72px); padding-bottom: 40px; } /* titlul cu linia aurie scurtă deasupra (locul supratitlului CozyStay) */ :where(html[data-tema="lux"]) .formular h1, :where(html[data-tema="lux"]) .text-legal h1 { font-size: clamp(38px, 3.8vw, 54px); line-height: 1.12; letter-spacing: 0; color: #fff; } :where(html[data-tema="lux"]) .formular h1::before, :where(html[data-tema="lux"]) .text-legal h1::before { content: ""; display: block; width: 56px; height: 1px; margin: 0 0 26px; background: var(--aur); } /* ---------------------------------------------------------------- rezervarea: formularul + rezumatul */ :where(html[data-tema="lux"]) .rezerva-grila { grid-template-columns: minmax(0, 1fr) 440px; gap: 80px; } :where(html[data-tema="lux"]) .formular { gap: 26px; } :where(html[data-tema="lux"]) .formular h1 { margin-bottom: 10px; } :where(html[data-tema="lux"]) .formular .btn-plin[type="submit"] { height: 56px; padding: 0 40px; font-size: 18px; margin-top: 6px; } :where(html[data-tema="lux"]) .formular .btn .ph { font-size: 18px; } :where(html[data-tema="lux"]) .doua { gap: 22px; } :where(html[data-tema="lux"]) .rezumat { top: calc(var(--nav-h) + 32px); background: rgba(255, 255, 255, .02); border: 1px solid rgba(185, 157, 117, .28); border-radius: 0; box-shadow: none; } :where(html[data-tema="lux"]) .rezumat img { height: 250px; } :where(html[data-tema="lux"]) .rezumat-corp { padding: 34px 36px 36px; gap: 16px; } :where(html[data-tema="lux"]) .rezumat-corp h3 { font-size: 32px; line-height: 1.15; margin-bottom: 8px; color: #fff; } :where(html[data-tema="lux"]) .rezumat-rand { align-items: flex-start; gap: 14px; font-size: 15px; line-height: 1.55; color: var(--ink-2); } :where(html[data-tema="lux"]) .rezumat-rand .ph { flex: none; width: 22px; height: auto; padding-top: 2px; border-radius: 0; background: transparent; color: var(--aur); font-size: 19px; } :where(html[data-tema="lux"]) .rezumat .oferta { margin-top: 8px !important; padding-top: 22px; border-top: 1px solid var(--line); } :where(html[data-tema="lux"]) .rezumat .link-simplu { justify-self: start; margin-top: 4px; color: var(--aur-deschis); font-weight: 400; text-decoration: none; background: linear-gradient(var(--aur), var(--aur)) no-repeat 0 100% / 100% 1px; padding-bottom: 3px; transition: color .3s, background-size .45s var(--ease-lux); } :where(html[data-tema="lux"]) .rezumat .link-simplu:hover { color: #fff; background-size: 0 1px; background-position: 100% 100%; } /* vârsta copiilor (select-uri fără stil în public.css): câmpuri drepte cu chenar auriu și săgeată aurie */ :where(html[data-tema="lux"]) .varste-copii { display: grid; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } :where(html[data-tema="lux"]) .varste-copii .slab { font-size: 14px; line-height: 1.5; color: var(--ink-2); } :where(html[data-tema="lux"]) .varste-randuri { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; } :where(html[data-tema="lux"]) .varste-copii select { width: 100%; height: 46px; padding: 0 36px 0 14px; border: 1px solid rgba(185, 157, 117, .6); border-radius: 0; -webkit-appearance: none; appearance: none; cursor: pointer; color: #fff; font: 400 15px/1.2 var(--sans); background: rgba(255, 255, 255, .03) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B99D75' stroke-width='1.6'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") no-repeat right 13px center; transition: border-color .3s, background-color .3s; } :where(html[data-tema="lux"]) .varste-copii select:hover { border-color: var(--aur); } :where(html[data-tema="lux"]) .varste-copii select:focus { outline: 0; border-color: var(--aur); background-color: rgba(185, 157, 117, .08); } :where(html[data-tema="lux"]) .varste-copii select:focus-visible { outline: 1px solid var(--aur); outline-offset: 2px; } :where(html[data-tema="lux"]) .varste-copii option { background: #1B1D20; color: #fff; } :where(html[data-tema="lux"]) .varste-copii .btn { justify-self: start; } /* ---------------------------------------------------------------- pagina rezervării: starea + biletul */ :where(html[data-tema="lux"]) .stare-mare { max-width: 760px; } /* iconița stării: pătrat cu RAMĂ DUBLĂ (al doilea chenar mutat cu 6px), ca bara de rezervare */ :where(html[data-tema="lux"]) .stare-ic { position: relative; width: 86px; height: 86px; margin: 6px auto 34px; border: 1px solid currentColor; border-radius: 0; background: transparent; font-size: 36px; } :where(html[data-tema="lux"]) .stare-ic::before { content: ""; position: absolute; top: -6px; bottom: -6px; left: 6px; right: 6px; border: 1px solid currentColor; opacity: .5; pointer-events: none; } :where(html[data-tema="lux"]) .stare-ic.ok, :where(html[data-tema="lux"]) .stare-ic.asteapta { background: transparent; color: var(--aur); } :where(html[data-tema="lux"]) .stare-ic.rau { background: transparent; color: var(--err); } :where(html[data-tema="lux"]) .stare-mare h1 { font-size: clamp(34px, 3.6vw, 50px); line-height: 1.15; letter-spacing: 0; color: #fff; } :where(html[data-tema="lux"]) .stare-mare > p { margin-top: 16px; color: var(--ink-2); font-size: 18px; line-height: 1.66; } :where(html[data-tema="lux"]) .stare-mare > .btn { margin-top: 30px !important; } :where(html[data-tema="lux"]) .bilet { margin-top: 52px; background: rgba(255, 255, 255, .02); border: 1px solid rgba(185, 157, 117, .35); border-radius: 0; box-shadow: none; } :where(html[data-tema="lux"]) .bilet-cap { gap: 22px; padding: 24px 28px; border-bottom: 1px dashed rgba(185, 157, 117, .45); } :where(html[data-tema="lux"]) .bilet-cap img { width: 96px; height: 96px; border-radius: 0; } :where(html[data-tema="lux"]) .bilet-cap h3 { font-size: 28px; line-height: 1.15; color: #fff; } :where(html[data-tema="lux"]) .bilet-cap span { display: block; margin-top: 8px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--aur); } :where(html[data-tema="lux"]) .bilet-grila div { padding: 22px 28px; border-right: 1px solid var(--line); } :where(html[data-tema="lux"]) .bilet-grila small { font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } :where(html[data-tema="lux"]) .bilet-grila b { display: block; margin: 6px 0 2px; font: 300 24px/1.25 var(--sans); letter-spacing: -.005em; color: #fff; } /* datele: Jost („11” în Marcellus = „II”) */ :where(html[data-tema="lux"]) .bilet-grila b + small { font-size: 13.5px; font-weight: 400; letter-spacing: .01em; text-transform: none; color: var(--ink-2); } :where(html[data-tema="lux"]) .bilet-corp { gap: 12px; padding: 22px 28px 26px; border-top: 1px solid var(--line); } :where(html[data-tema="lux"]) .bilet-corp .oferta-linie { font-size: 15px; } :where(html[data-tema="lux"]) .bilet-corp .oferta-linie:first-child { padding-bottom: 6px; font: 400 21px/1.3 var(--serif); color: #fff; } :where(html[data-tema="lux"]) .bilet-corp .oferta-linie:first-child b { font: 300 28px/1.2 var(--sans); letter-spacing: -.01em; color: #fff; } :where(html[data-tema="lux"]) .bilet-corp .oferta-tva { margin-top: -10px; } :where(html[data-tema="lux"]) .stare-mare .caseta { margin-top: 24px !important; } /* butoanele din casete: 1-comune pune „a { color: inherit; underline }” pe toate legăturile din casetă, și butonul auriu ieșea cu text deschis */ :where(html[data-tema="lux"]) .caseta a.btn { text-decoration: none; } :where(html[data-tema="lux"]) .caseta a.btn-plin { color: var(--pe-aur); } :where(html[data-tema="lux"]) .caseta a.btn-plin:hover { color: var(--pe-aur); } :where(html[data-tema="lux"]) .caseta .link-simplu { color: var(--aur-deschis); text-decoration-color: rgba(185, 157, 117, .55); } /* numărul de telefon pe buton: Jost (în Marcellus „0” și „1” se citesc „O” și „I”) */ :where(html[data-tema="lux"]) .btn[href^="tel:"] { font-family: var(--sans); letter-spacing: .04em; } /* la fel codul facturii de pe bilet („SMA 0001” ieșea „SMA OOOI”) */ :where(html[data-tema="lux"]) .bilet a.btn[href*="/factura/"], :where(html[data-tema="lux"]) a.btn[href^="tel:"] { font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .04em; } :where(html[data-tema="lux"]) .stare-mare .direct-butoane { margin-top: 36px; } /* ---------------------------------------------------------------- paginile legale (termeni, anulare, confidențialitate) */ :where(html[data-tema="lux"]) .text-legal { max-width: 820px; margin: 0 auto; } :where(html[data-tema="lux"]) .text-legal h1 { margin-bottom: 48px; padding-bottom: 40px; border-bottom: 1px solid var(--line); } :where(html[data-tema="lux"]) .text-legal div { color: var(--ink-2); font-size: 17px; line-height: 1.78; } :where(html[data-tema="lux"]) .text-legal-corp h2 { margin: 52px 0 16px; font-size: 27px; line-height: 1.25; letter-spacing: 0; color: #fff; } :where(html[data-tema="lux"]) .text-legal-corp h2:first-child { margin-top: 0; } :where(html[data-tema="lux"]) .text-legal-corp p { margin: 0 0 16px; } :where(html[data-tema="lux"]) .text-legal-corp ul { list-style: none; margin: 0 0 20px; padding-left: 0; gap: 10px; } :where(html[data-tema="lux"]) .text-legal-corp li { position: relative; padding-left: 26px; } :where(html[data-tema="lux"]) .text-legal-corp li::before { content: ""; position: absolute; left: 3px; top: .8em; width: 5px; height: 5px; border-radius: 50%; background: var(--aur); } :where(html[data-tema="lux"]) .text-legal-corp a { color: var(--aur-deschis); text-decoration-color: rgba(185, 157, 117, .55); text-underline-offset: 4px; } :where(html[data-tema="lux"]) .text-legal-corp a:hover { color: #fff; text-decoration-color: var(--aur); } /* ---------------------------------------------------------------- recenzia: stelele de ales */ :where(html[data-tema="lux"]) .stare-mare > img { border-radius: 0 !important; box-shadow: none !important; } /* șablonul pune colțuri rotunde în style="" */ :where(html[data-tema="lux"]) .stele-rand { gap: 10px; } :where(html[data-tema="lux"]) .stele-rand label { font-size: 44px; color: #6B6E72; } /* 3.2:1 pe fundal: se vede ce e de apăsat */ :where(html[data-tema="lux"]) .stele-rand label:hover, :where(html[data-tema="lux"]) .stele-rand label:hover ~ label, :where(html[data-tema="lux"]) .stele-rand input:checked ~ label { color: #E6B673; } :where(html[data-tema="lux"]) .stele-rand input:focus-visible + label { outline: 1px solid var(--aur); outline-offset: 4px; border-radius: 0; } /* ================================================================ MIȘCARE: intrări la încărcare + apariții la derulare (doar fără „reduce motion”) */ @keyframes lux-urca { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } } @keyframes lux-poza { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } } @keyframes lux-linie { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media screen and (prefers-reduced-motion: no-preference) { /* pozele mozaicului apar pe rând, cu un zoom care se așază */ html[data-tema="lux"] .mozaic > button img { animation: lux-poza 1.5s var(--ease-lux) both; } html[data-tema="lux"] .mozaic > button:nth-child(2) img { animation-delay: .08s; } html[data-tema="lux"] .mozaic > button:nth-child(3) img { animation-delay: .16s; } html[data-tema="lux"] .mozaic > button:nth-child(4) img { animation-delay: .24s; } html[data-tema="lux"] .mozaic > button:nth-child(5) img { animation-delay: .32s; } html[data-tema="lux"] .mozaic-toate { animation: lux-urca 1s var(--ease-lux) .5s both; } html[data-tema="lux"] .ap-cap p, html[data-tema="lux"] .ap-cap .clasificat, html[data-tema="lux"] .ap-scor { animation: lux-urca 1.1s var(--ease-lux) .45s both; } html[data-tema="lux"] .card-rezervare { animation: lux-urca 1.2s var(--ease-lux) .35s both; } /* paginile simple: titlul (fără litere sparte în șablon) urcă din ceață, linia aurie se întinde, apoi restul */ html[data-tema="lux"] .pagina-simpla h1 { animation: lux-urca 1.1s var(--ease-lux) .05s both; } html[data-tema="lux"] .formular h1::before, html[data-tema="lux"] .text-legal h1::before { transform-origin: left; animation: lux-linie 1.1s var(--ease-lux) .35s both; } html[data-tema="lux"] .stare-ic { animation: lux-urca 1s var(--ease-lux) both; } html[data-tema="lux"] .stare-mare > p, html[data-tema="lux"] .pagina-simpla .formular > :not(h1):not([type="hidden"]), html[data-tema="lux"] .text-legal > div { animation: lux-urca 1.1s var(--ease-lux) .2s both; } html[data-tema="lux"] .bilet, html[data-tema="lux"] .rezumat { animation: lux-urca 1.2s var(--ease-lux) .3s both; } } /* la derulare (CSS legat de derulare; unde browserul nu-l are, totul e pur și simplu vizibil) */ @keyframes lux-intra { from { opacity: 0; transform: translate3d(0, 46px, 0); } to { opacity: 1; transform: none; } } @keyframes lux-intra-poza { from { opacity: .2; clip-path: inset(16% 0 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } } @supports (animation-timeline: view()) { @media screen and (prefers-reduced-motion: no-preference) { html[data-tema="lux"] .ap-bloc h2, html[data-tema="lux"] .fapte-mari > div, html[data-tema="lux"] .paturi > div, html[data-tema="lux"] .facilitate, html[data-tema="lux"] .text-legal-corp h2 { animation: lux-intra linear both; animation-timeline: view(); animation-range: entry 0% cover 24%; } html[data-tema="lux"] .fapte-mari > div:nth-child(2), html[data-tema="lux"] .facilitate:nth-child(even), html[data-tema="lux"] .paturi > div:nth-child(2) { animation-range: entry 4% cover 27%; } html[data-tema="lux"] .fapte-mari > div:nth-child(3), html[data-tema="lux"] .paturi > div:nth-child(3) { animation-range: entry 8% cover 30%; } html[data-tema="lux"] .fapte-mari > div:nth-child(4) { animation-range: entry 12% cover 33%; } html[data-tema="lux"] .alte-ap .ap-poze { animation: lux-intra-poza linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; } html[data-tema="lux"] .alte-ap .ap-corp { animation: lux-intra linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; } } } /* ================================================================ calculator mic (1081–1280): cutia mai îngustă; ferestrele se deschid sub câmpuri */ @media (max-width: 1280px) { :where(html[data-tema="lux"]) .ap-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; } :where(html[data-tema="lux"]) .card-rezervare { padding: 38px 30px 32px; } :where(html[data-tema="lux"]) .card-rezervare .pop-calendar { top: 330px; right: 0; width: 720px; } :where(html[data-tema="lux"]) .card-rezervare .pop-oaspeti { top: 330px; right: 0; width: 340px; } :where(html[data-tema="lux"]) .rezerva-grila { grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; } } /* ================================================================ TABLETĂ (≤1080): o coloană; cutia de rezervare dispare, rămâne bara de jos */ @media (max-width: 1080px) { :where(html[data-tema="lux"]) .ap-layout { grid-template-columns: 1fr; gap: 0; } :where(html[data-tema="lux"]) .card-rezervare { display: none; } :where(html[data-tema="lux"]) .rezerva-grila { grid-template-columns: 1fr; gap: 48px; } :where(html[data-tema="lux"]) .rezumat { position: static; order: -1; } :where(html[data-tema="lux"]) .alte-ap .ap-card { grid-template-columns: 1fr; gap: 32px; } :where(html[data-tema="lux"]) .bara-mobil { left: 0; right: 0; bottom: 0; gap: 16px; padding: 12px var(--lux-margine, 24px) calc(12px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid rgba(185, 157, 117, .5); border-radius: 0; background: rgba(11, 12, 13, .96); box-shadow: 0 -24px 50px -24px rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } :where(html[data-tema="lux"]) .bara-mobil b { display: block; font: 300 24px/1.15 var(--sans); color: #fff; letter-spacing: -.01em; } :where(html[data-tema="lux"]) .bara-mobil span { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } :where(html[data-tema="lux"]) .bara-mobil .btn { flex: none; height: 50px; padding: 0 26px; font-size: 16px; } :where(html[data-tema="lux"]) .bara-mobil .btn:not([href]) { background: #000; border-color: var(--aur-plin); color: #fff; } :where(html[data-tema="lux"]) body:has(.bara-mobil) .plutitor { bottom: 92px; } } /* ================================================================ TELEFON (≤760) */ @media (max-width: 760px) { /* mozaicul: prima poză pe toată lățimea, lipită de meniu (ca galeria CozyStay pe telefon) */ :where(html[data-tema="lux"]) .ap-pagina { padding-top: var(--nav-h); } :where(html[data-tema="lux"]) .mozaic { grid-template-columns: 1fr; grid-template-rows: min(82vw, 440px); border-radius: 0; margin: 0 calc(-1 * var(--lux-margine, 16px)); gap: 0; } :where(html[data-tema="lux"]) .mozaic-toate { right: var(--lux-margine, 16px); bottom: 16px; } :where(html[data-tema="lux"]) .mozaic-toate .btn { height: 42px; padding: 0 16px; font-size: 14px; } :where(html[data-tema="lux"]) .ap-cap { margin: 38px 0 34px; gap: 22px; } :where(html[data-tema="lux"]) .ap-cap h1 { font-size: 40px; } :where(html[data-tema="lux"]) .ap-cap p { align-items: flex-start; font-size: 15.5px; line-height: 1.5; } :where(html[data-tema="lux"]) .ap-cap p .ph { margin-top: 2px; } :where(html[data-tema="lux"]) .ap-scor { width: 100%; } :where(html[data-tema="lux"]) .ap-bloc { padding: 46px 0; } :where(html[data-tema="lux"]) .ap-bloc h2 { font-size: 28px; margin-bottom: 24px; } :where(html[data-tema="lux"]) .ap-descriere { font-size: 17px; } :where(html[data-tema="lux"]) .fapte-mari { grid-template-columns: 1fr 1fr; } :where(html[data-tema="lux"]) .fapte-mari div { padding: 22px 0 20px 20px; } :where(html[data-tema="lux"]) .fapte-mari div + div { border-left: 0; } :where(html[data-tema="lux"]) .fapte-mari div:nth-child(odd) { padding-left: 0; } :where(html[data-tema="lux"]) .fapte-mari div:nth-child(even) { border-left: 1px solid var(--line); } :where(html[data-tema="lux"]) .fapte-mari div:nth-child(n+3) { border-top: 1px solid var(--line); } :where(html[data-tema="lux"]) .fapte-mari b { font-size: 27px; margin-top: 12px; } :where(html[data-tema="lux"]) .paturi { grid-template-columns: 1fr; gap: 10px; } :where(html[data-tema="lux"]) .paturi div { padding: 18px; font-size: 16px; } :where(html[data-tema="lux"]) .paturi .ph { font-size: 28px; margin: 0; } :where(html[data-tema="lux"]) .facilitati-lista { gap: 18px; } :where(html[data-tema="lux"]) .cal-inline { padding: 0; border-radius: 0; } /* „Alege datele” din bara de jos: site.js face scrollIntoView({block:'center'}), dar cele 2 luni (~800px) sunt mai înalte decât ecranul, și centrat ajungeau sub meniu titlul, luna și săgețile. Marginea de sus lasă loc meniului + titlului (h2 28px + 24px = 58px); cea de jos, negativă, scurtează cutia la cât încape pe ecran (calendar presupus de 850px, 6+6 săptămâni), deci centrarea pune calendarul sub titlu. La block:'start' contează doar marginea de sus. */ :where(html[data-tema="lux"]) .cal-inline { scroll-margin-top: calc(var(--nav-h) + 78px); scroll-margin-bottom: calc(100vh - var(--nav-h) - 78px - 850px); scroll-margin-bottom: calc(100dvh - var(--nav-h) - 78px - 850px); } /* harta: șablonul dă .locatie 380px în style="", public.css dă #harta 320px pe telefon: rămânea o fâșie goală jos */ :where(html[data-tema="lux"]) .ap-pagina .locatie #harta { height: 100%; } :where(html[data-tema="lux"]) .alte-ap { grid-template-columns: 1fr; } :where(html[data-tema="lux"]) .alte-ap .ap-corp h3 { font-size: 34px; } :where(html[data-tema="lux"]) .alte-ap .ap-corp h3::before { margin-bottom: 20px; } :where(html[data-tema="lux"]) .alte-ap .ap-corp p { font-size: 16.5px; } :where(html[data-tema="lux"]) .galerie-scena { --pad-x: 0px; --pad-jos: 10px; } :where(html[data-tema="lux"]) .galerie-sag { display: none; } :where(html[data-tema="lux"]) .galerie-mini { justify-content: flex-start; } :where(html[data-tema="lux"]) .bara-mobil { padding-left: 18px; padding-right: 14px; } :where(html[data-tema="lux"]) .bara-mobil b { font-size: 22px; } :where(html[data-tema="lux"]) .bara-mobil .btn { height: 48px; padding: 0 20px; font-size: 15px; } :where(html[data-tema="lux"]) .pagina-simpla { padding-top: calc(var(--nav-h) + 44px); } :where(html[data-tema="lux"]) .formular h1, :where(html[data-tema="lux"]) .text-legal h1 { font-size: 36px; } :where(html[data-tema="lux"]) .formular h1::before, :where(html[data-tema="lux"]) .text-legal h1::before { margin-bottom: 20px; } :where(html[data-tema="lux"]) .formular { gap: 22px; } :where(html[data-tema="lux"]) .formular .btn-plin[type="submit"] { width: 100%; justify-self: stretch !important; } :where(html[data-tema="lux"]) .doua { grid-template-columns: 1fr; gap: 22px; } :where(html[data-tema="lux"]) .rezumat img { height: 190px; } :where(html[data-tema="lux"]) .rezumat-corp { padding: 26px 22px 28px; } :where(html[data-tema="lux"]) .rezumat-corp h3 { font-size: 28px; } :where(html[data-tema="lux"]) .stare-ic { width: 76px; height: 76px; font-size: 32px; margin-bottom: 30px; } :where(html[data-tema="lux"]) .stare-mare h1 { font-size: 34px; } :where(html[data-tema="lux"]) .stare-mare > p { font-size: 17px; } :where(html[data-tema="lux"]) .bilet { margin-top: 40px; } :where(html[data-tema="lux"]) .bilet-cap { padding: 20px; gap: 16px; } :where(html[data-tema="lux"]) .bilet-cap img { width: 76px; height: 76px; } :where(html[data-tema="lux"]) .bilet-cap h3 { font-size: 24px; } :where(html[data-tema="lux"]) .bilet-grila { grid-template-columns: 1fr 1fr; } :where(html[data-tema="lux"]) .bilet-grila div { padding: 18px 20px; } :where(html[data-tema="lux"]) .bilet-grila div:nth-child(2) { border-right: 0; } :where(html[data-tema="lux"]) .bilet-grila div:nth-child(3) { grid-column: span 2; border-top: 1px solid var(--line); } :where(html[data-tema="lux"]) .bilet-grila b { font-size: 20px; } :where(html[data-tema="lux"]) .bilet-corp { padding: 20px 20px 22px; } :where(html[data-tema="lux"]) .stare-mare .direct-butoane { flex-direction: column; align-items: stretch; } :where(html[data-tema="lux"]) .text-legal h1 { margin-bottom: 36px; padding-bottom: 30px; } :where(html[data-tema="lux"]) .text-legal div { font-size: 16.5px; } :where(html[data-tema="lux"]) .text-legal-corp h2 { font-size: 24px; margin-top: 42px; } :where(html[data-tema="lux"]) .stele-rand label { font-size: 42px; } } /* ======================================================================== 4-sosire */ /* Tema „lux” — 4-sosire: check-in-ul oaspeților (sosire/: fișa, mulțumim, cum ajungi, expirat, inactiv). sosire.css se încarcă DUPĂ temă, deci aici regulile sunt FĂRĂ :where (html[data-tema="lux"] .clasa) și câștigă prin prioritate. Ce schimbă sosire.css în @media (max-width:640px) și atingem și noi se repetă mai jos în același @media. Stilul CozyStay: antet centrat (supratitlu auriu, titlu Marcellus), sejurul ca bara de rezervare cu RAMĂ DUBLĂ aurie, pașii ca „cutia de rezervare” (fond abia mai deschis, colțuri drepte, linii de 1px), butoane drepte. ⚠️ .semnatura-cadru rămâne ALB cu cerneala închisă (#0F1B2D din sosire.js): semnătura ajunge în PDF. Doar rama e aurie. */ /* ================================================================ pagina: coloană mai lată decât în sosire.css (760 cu tot cu margini) */ html[data-tema="lux"] .pagina-simpla.sosire { max-width: calc(840px + 2 * var(--lux-margine, 24px)); padding-top: calc(var(--nav-h) + 80px); padding-bottom: 40px; } /* ================================================================ antetul: centrat, ca titlurile de pagină CozyStay */ html[data-tema="lux"] .sosire-cap { position: relative; flex-direction: column; align-items: center; gap: 0; margin-bottom: 64px; text-align: center; } html[data-tema="lux"] .sosire-cap > div:not(.comutator) { display: grid; justify-items: center; } /* supratitlul: Jost 12px auriu, MAJUSCULE rărite, cu câte o linie fină de o parte și de alta */ html[data-tema="lux"] .sosire-supra { display: inline-flex; align-items: center; gap: 16px; margin: 0 0 22px; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--aur); } html[data-tema="lux"] .sosire-supra::before, html[data-tema="lux"] .sosire-supra::after { content: ""; width: 34px; height: 1px; background: var(--aur); opacity: .8; } html[data-tema="lux"] .sosire-cap h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4vw, 56px); line-height: 1.12; letter-spacing: .005em; color: #fff; text-wrap: balance; max-width: 18ch; } /* fără supratitlu (pagina „expirat”): linia aurie scurtă stă deasupra titlului */ html[data-tema="lux"] .sosire-cap > div:not(.comutator) > h1:first-child::before { content: ""; display: block; width: 56px; height: 1px; margin: 0 auto 26px; background: var(--aur); } html[data-tema="lux"] .sosire-intro { max-width: 560px; margin: 20px 0 0; font-size: 18px; line-height: 1.66; color: var(--ink-2); text-wrap: pretty; } /* RO / EN: două celule drepte cu linie aurie; cea aleasă e plină */ html[data-tema="lux"] .comutator { position: absolute; top: 0; right: 0; display: inline-flex; padding: 0; gap: 0; border: 1px solid rgba(185, 157, 117, .5); border-radius: 0; background: transparent; } html[data-tema="lux"] .comutator a { display: grid; place-items: center; min-width: 46px; height: 38px; padding: 0 12px; border-radius: 0; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--ink-3); transition: background .4s var(--ease-lux), color .4s var(--ease-lux); } html[data-tema="lux"] .comutator a:hover { color: #fff; } html[data-tema="lux"] .comutator a[aria-current="true"] { background: var(--aur); color: var(--pe-aur); } /* „Cum ajungi”: 8 limbi, sub titlu, pe un rând (pe telefon pe două) */ html[data-tema="lux"] .comutator-limbi { position: static; order: 2; flex-wrap: wrap; justify-content: center; max-width: none; margin-top: 30px; } html[data-tema="lux"] .comutator-limbi a { min-width: 48px; padding: 0 10px; } html[data-tema="lux"] .comutator-limbi a + a { box-shadow: inset 1px 0 0 rgba(185, 157, 117, .22); } html[data-tema="lux"] .eticheta-en { font-weight: 400; color: var(--ink-3); } html[data-tema="lux"] .optional { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } html[data-tema="lux"] .lbl { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } /* ================================================================ sejurul: bara de rezervare CozyStay — celule egale cu linie aurie între ele și RAMĂ DUBLĂ (al doilea chenar e mutat cu 5px: iese sus/jos, intră stânga/dreapta, colțurile se încrucișează) */ html[data-tema="lux"] .sosire-sejur { position: relative; gap: 0; max-width: 840px; margin: 0 auto 72px; border: 1px solid var(--aur); } html[data-tema="lux"] .sosire-sejur::before { content: ""; position: absolute; top: -6px; bottom: -6px; left: 6px; right: 6px; border: 1px solid var(--aur); pointer-events: none; } html[data-tema="lux"] .sosire-sejur > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 0 26px; border-radius: 0; background: transparent; } html[data-tema="lux"] .sosire-sejur > div + div { border-left: 1px solid var(--aur); } html[data-tema="lux"] .sosire-sejur small { font-family: var(--serif); font-size: 16px; color: #fff; } html[data-tema="lux"] .sosire-sejur b { font-family: var(--sans); font-size: 15px; font-weight: 400; letter-spacing: .04em; color: var(--ink-2); } /* ================================================================ pașii: cutii drepte, fond abia mai deschis (ca „Reserve” la CozyStay) */ html[data-tema="lux"] .sosire-form { gap: 40px; } html[data-tema="lux"] .sosire-pas { gap: 24px; padding: 46px 52px 52px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .032), rgba(255, 255, 255, .014)); transition: border-color .5s var(--ease-lux); } html[data-tema="lux"] .sosire-pas:focus-within { border-color: rgba(185, 157, 117, .42); } /* titlul pasului: „01 —— Datele tale”, cu o linie fină dedesubt */ html[data-tema="lux"] .sosire-pas h2 { align-items: center; gap: 20px; margin: 0 0 4px; padding-bottom: 26px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; color: #fff; } html[data-tema="lux"] .sosire-pas h2 .nr { display: inline-flex; align-items: center; width: auto; height: auto; border-radius: 0; background: none; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: .14em; font-variant-numeric: lining-nums tabular-nums; color: var(--aur); } html[data-tema="lux"] .sosire-pas h2 .nr::before { content: "0"; } html[data-tema="lux"] .sosire-pas h2 .nr::after { content: ""; width: 30px; height: 1px; background: var(--aur); margin-left: 14px; } html[data-tema="lux"] .sosire-pas h2 .optional { margin-left: 10px; vertical-align: middle; } html[data-tema="lux"] .sosire-pas .ajutor { font-size: 14.5px; line-height: 1.6; color: var(--ink-3); } html[data-tema="lux"] .sosire-pas p.ajutor .ph { color: var(--aur); font-size: 17px; vertical-align: -3px; } html[data-tema="lux"] .sosire .doua { gap: 26px 24px; } html[data-tema="lux"] .sosire .grup .ajutor { font-size: 13.5px; } /* toate câmpurile pe un rând au aceeași înălțime (cel de dată ieșea cu 2px mai înalt și strica alinierea cu butonul de ștergere) */ html[data-tema="lux"] .sosire .grup input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), html[data-tema="lux"] .sosire .grup select { height: 56px; } /* câmpurile de dată: iconița calendarului discretă */ html[data-tema="lux"] .sosire .grup input[type="date"]::-webkit-calendar-picker-indicator { opacity: .7; cursor: pointer; } html[data-tema="lux"] .sosire .grup input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; } /* „Actele însoțitorilor”: câmp de fișiere nativ, cu butonul în stilul temei */ html[data-tema="lux"] .sosire .grup input[type="file"] { min-height: 56px; padding: 9px 12px; color: var(--ink-3); font-size: 14px; cursor: pointer; } html[data-tema="lux"] .sosire .grup input[type="file"]::file-selector-button { height: 36px; margin-right: 16px; padding: 0 20px; border: 1px solid var(--aur-plin); border-radius: 0; background: transparent; color: #fff; font-family: var(--serif); font-size: 14px; cursor: pointer; transition: background .4s var(--ease-lux), color .4s var(--ease-lux); } html[data-tema="lux"] .sosire .grup input[type="file"]::file-selector-button:hover { background: var(--aur); color: var(--pe-aur); } /* ================================================================ poza actului */ html[data-tema="lux"] .poza-butoane { gap: 12px; } /* butoanele sunt