/* ========================================================================== Paralela45 — Temă nouă / Componente -------------------------------------------------------------------------- style.css — stiluri proprii peste Bootstrap 5. Variabile prefixate cu --p45- ca să nu intre în conflict cu proiectul mamă sau cu Bootstrap. Tokenele de mai jos sunt extrase din Figma „Design Library → Design Tokens” (fileKey DYipdbqknoXCmqqlGrJDGh, node 547-30348). Font: Mukta. Heading line-height 110%, body/caption 120%, letter-spacing ~-1.5%. ========================================================================== */ :root { /* ====================================================================== CULORI ====================================================================== */ /* --- Primitive (paletă brută — a se folosi prin tokenele semantice) ---- */ --p45-c-0a0e29: #0a0e29; /* near-black blue */ --p45-c-001d70: #001d70; /* strong blue */ --p45-c-0054e2: #0054e2; /* brand blue */ --p45-c-ccddf9: #ccddf9; --p45-c-d7f2fd: #d7f2fd; --p45-c-ebf1fd: #ebf1fd; --p45-c-e2ebfa: #e2ebfa; --p45-c-f5f8fd: #f5f8fd; --p45-c-f1f6f8: #f1f6f8; --p45-c-f9fbff: #f9fbff; --p45-c-ffffff: #ffffff; --p45-c-f1f1f2: #f1f1f2; --p45-c-e2e3e5: #e2e3e5; --p45-c-616671: #616671; --p45-c-6c7c93: #6c7c93; --p45-c-404040: #404040; --p45-c-101010: #101010; --p45-c-febe00: #febe00; /* yellow */ --p45-c-e01717: #e01717; /* red */ /* --- Surface (fundaluri pagini, secțiuni, carduri) --------------------- */ --p45-surface-white: var(--p45-c-ffffff); --p45-surface-dark: var(--p45-c-0a0e29); --p45-surface-strong-blue: var(--p45-c-001d70); --p45-surface-brand-blue: var(--p45-c-0054e2); --p45-surface-baby-blue: var(--p45-c-d7f2fd); --p45-surface-block-blue: var(--p45-c-f1f6f8); --p45-surface-light-blue: var(--p45-c-f9fbff); --p45-surface-gray: var(--p45-c-f1f1f2); /* --- Text (Fonts/*) ---------------------------------------------------- */ --p45-text-main: var(--p45-c-101010); --p45-text-secondary: var(--p45-c-404040); --p45-text-grey: var(--p45-c-6c7c93); --p45-text-strong-blue: var(--p45-c-001d70); --p45-text-blue: var(--p45-c-0054e2); --p45-text-white: var(--p45-c-ffffff); /* --- Border ------------------------------------------------------------ */ --p45-border-input: var(--p45-c-e2e3e5); --p45-border-blue: var(--p45-c-0054e2); --p45-border-grey: var(--p45-c-616671); --p45-border-blue-card: var(--p45-c-e2ebfa); --p45-border-icon-button: var(--p45-c-e2ebfa); --p45-border-white: var(--p45-c-ffffff); --p45-border-red: var(--p45-c-e01717); /* --- Icon -------------------------------------------------------------- */ --p45-icon-dark: var(--p45-c-101010); --p45-icon-strong-blue: var(--p45-c-001d70); --p45-icon-blue: var(--p45-c-0054e2); --p45-icon-secondary: var(--p45-c-6c7c93); --p45-icon-grey: var(--p45-c-616671); --p45-icon-white: var(--p45-c-ffffff); --p45-icon-bg: var(--p45-c-f5f8fd); /* --- Elemente (accente) ------------------------------------------------ */ --p45-yellow: var(--p45-c-febe00); --p45-red: var(--p45-c-e01717); --p45-element-blue: var(--p45-c-ccddf9); /* --- Aliasuri brand (comode pentru componente) ------------------------- */ --p45-primary: var(--p45-surface-brand-blue); /* #0054e2 */ --p45-primary-dark: var(--p45-surface-strong-blue); /* #001d70 */ --p45-bg: var(--p45-surface-white); --p45-bg-alt: var(--p45-surface-block-blue); --p45-text: var(--p45-text-main); --p45-text-muted: var(--p45-text-grey); --p45-border: var(--p45-border-input); /* ====================================================================== TIPOGRAFIE (font Mukta) ====================================================================== */ --p45-font: "Mukta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --p45-fw-regular: 400; --p45-fw-medium: 500; --p45-fw-semibold: 600; --p45-fw-bold: 700; --p45-fw-extrabold: 800; --p45-lh-heading: 1.1; /* 110% */ --p45-lh-body: 1.2; /* 120% */ --p45-ls: -0.015em; /* -1.5% implicit */ --p45-ls-loose: -0.01em; /* -1.0% */ --p45-ls-tight: -0.02em; /* -2.0% */ --p45-ls-zero: 0; /* Scală mărimi (px → rem, bază 16px) */ --p45-fs-hero: 3rem; /* 48px — Headline/Hero */ --p45-fs-h1: 2.625rem; /* 42px — Headline/H1 */ --p45-fs-h2: 2.375rem; /* 38px — Headline/H2 */ --p45-fs-h3: 2rem; /* 32px — Headline/H3 */ --p45-fs-h4: 1.75rem; /* 28px — Headline/H4 */ --p45-fs-h5: 1.5rem; /* 24px — Headline/H5 */ --p45-fs-h6: 1.3125rem; /* 21px — Headline/H6 */ --p45-fs-p1: 1.125rem; /* 18px — Body/P1 */ --p45-fs-p2: 1rem; /* 16px — Body/P2 (bază)*/ --p45-fs-p3: 0.875rem; /* 14px — Body/P3 */ --p45-fs-caption: 0.75rem; /* 12px — Caption/C1 */ /* ====================================================================== RADIUS / UMBRE / SPAȚIERI / LAYOUT (8/12/24 confirmate din Figma; restul scalei 8pt — inferat) ====================================================================== */ --p45-radius-sm: 8px; --p45-radius: 12px; --p45-radius-lg: 16px; /* butoane lg, imagine card, text buttons */ --p45-radius-xl: 24px; /* secțiuni mari (din Design Tokens) */ --p45-radius-pill: 999px; --p45-shadow: 0 2px 8px rgba(10, 14, 41, 0.08); --p45-shadow-lg: 0 6px 24px rgba(10, 14, 41, 0.12); --p45-transition: 0.2s ease-in-out; --p45-space-1: 4px; --p45-space-2: 8px; --p45-space-3: 12px; --p45-space-4: 16px; --p45-space-5: 20px; --p45-space-6: 24px; --p45-space-8: 32px; --p45-space-12: 48px; --p45-container-max: 1320px; } /* -------------------------------------------------------------------------- Bază -------------------------------------------------------------------------- */ body { font-family: var(--p45-font); font-size: var(--p45-fs-p2); line-height: var(--p45-lh-body); letter-spacing: var(--p45-ls); color: var(--p45-text-main); background-color: var(--p45-bg); } /* ========================================================================== UTILITARE TIPOGRAFICE (oglindesc stilurile de text din Figma) Folosește-le pe orice element:

,

========================================================================== */ /* --- Headline (line-height 110%) --------------------------------------- */ .p45-hero { font: var(--p45-fw-semibold) var(--p45-fs-hero)/var(--p45-lh-heading) var(--p45-font); letter-spacing: var(--p45-ls-loose); } .p45-h1 { font: var(--p45-fw-bold) var(--p45-fs-h1)/var(--p45-lh-heading) var(--p45-font); letter-spacing: var(--p45-ls-tight); } .p45-h2 { font: var(--p45-fw-bold) var(--p45-fs-h2)/var(--p45-lh-heading) var(--p45-font); letter-spacing: var(--p45-ls); } .p45-h3 { font: var(--p45-fw-extrabold) var(--p45-fs-h3)/var(--p45-lh-heading) var(--p45-font); letter-spacing: var(--p45-ls); } /* Accented H3 */ .p45-h3--bold { font-weight: var(--p45-fw-bold); letter-spacing: var(--p45-ls-loose); } /* Standard H3 */ .p45-h4 { font: var(--p45-fw-bold) var(--p45-fs-h4)/var(--p45-lh-heading) var(--p45-font); letter-spacing: var(--p45-ls); } .p45-h5 { font: var(--p45-fw-bold) var(--p45-fs-h5)/var(--p45-lh-heading) var(--p45-font); letter-spacing: var(--p45-ls); } .p45-h5--semibold{ font-weight: var(--p45-fw-semibold); } .p45-h6 { font: var(--p45-fw-medium) var(--p45-fs-h6)/var(--p45-lh-heading) var(--p45-font); letter-spacing: var(--p45-ls); } /* --- Body (line-height 120%) ------------------------------------------- */ .p45-body-lg { font: var(--p45-fw-semibold) var(--p45-fs-p1)/var(--p45-lh-body) var(--p45-font); letter-spacing: var(--p45-ls); } /* P1 */ .p45-body-lg--bold { font-weight: var(--p45-fw-bold); } .p45-body { font: var(--p45-fw-regular) var(--p45-fs-p2)/var(--p45-lh-body) var(--p45-font); letter-spacing: var(--p45-ls); } /* P2 bază */ .p45-body--medium { font-weight: var(--p45-fw-medium); } .p45-body--semibold { font-weight: var(--p45-fw-semibold); } .p45-body--bold { font-weight: var(--p45-fw-bold); } .p45-body-sm { font: var(--p45-fw-regular) var(--p45-fs-p3)/var(--p45-lh-body) var(--p45-font); letter-spacing: var(--p45-ls); } /* P3 */ .p45-body-sm--medium { font-weight: var(--p45-fw-medium); } .p45-body-sm--semibold { font-weight: var(--p45-fw-semibold); } .p45-body-sm--bold { font-weight: var(--p45-fw-bold); line-height: var(--p45-lh-heading); letter-spacing: var(--p45-ls-zero); } /* butoane/etichete */ .p45-body-sm--extrabold{ font-weight: var(--p45-fw-extrabold); } /* --- Caption (line-height 120%) ---------------------------------------- */ .p45-caption { font: var(--p45-fw-regular) var(--p45-fs-caption)/var(--p45-lh-body) var(--p45-font); letter-spacing: var(--p45-ls); } .p45-caption--semibold { font-weight: var(--p45-fw-semibold); } .p45-caption--bold { font-weight: var(--p45-fw-bold); } .p45-caption--extrabold{ font-weight: var(--p45-fw-extrabold); } /* ========================================================================== ICONIȚE (din Figma „Foundations → Icons") -------------------------------------------------------------------------- SVG-uri în /assets/icons, desenate cu currentColor → moștenesc `color`. Tehnica: CSS mask, deci iconița se recolorează din `color` și se redimensionează din `font-size`/width. Exemplu: Alternativ (recolorare nedorită): pune SVG-ul inline direct în HTML. NOTĂ: calea „../assets/icons" e relativă la acest fișier CSS; ajusteaz-o în proiectul mamă dacă structura diferă. ========================================================================== */ .p45-icon { display: inline-block; width: 1.25rem; /* 20px */ height: 1.25rem; flex: 0 0 auto; background-color: currentColor; -webkit-mask: var(--p45-icon) center / contain no-repeat; mask: var(--p45-icon) center / contain no-repeat; } .p45-icon--sm { width: 1rem; height: 1rem; } /* 16px */ .p45-icon--lg { width: 1.5rem; height: 1.5rem; } /* 24px — potrivit social */ .p45-icon--xl { width: 2rem; height: 2rem; } /* 32px */ /* Sursele (un modifier per iconiță) */ .p45-icon--airplane { --p45-icon: url("/frontend/theme2/icons/airplane.svg"); } .p45-icon--airplane-tilt { --p45-icon: url("/frontend/theme2/icons/airplane-tilt.svg"); } .p45-icon--airplane-send { --p45-icon: url("/frontend/theme2/icons/airplane-send.svg"); } /* Iconițe secțiune „De ce să ne alegi" (Figma 400-9986) */ .p45-icon--world-ai { --p45-icon: url("/frontend/theme2/icons/world-ai.svg"); } .p45-icon--travel { --p45-icon: url("/frontend/theme2/icons/travel.svg"); } .p45-icon--travel-guide { --p45-icon: url("/frontend/theme2/icons/travel-guide.svg"); } .p45-icon--card-pos { --p45-icon: url("/frontend/theme2/icons/card-pos.svg"); } .p45-icon--arrow-down { --p45-icon: url("/frontend/theme2/icons/arrow-down.svg"); } .p45-icon--arrow-circle-left { --p45-icon: url("/frontend/theme2/icons/arrow-circle-left.svg"); } .p45-icon--arrow-left { --p45-icon: url("/frontend/theme2/icons/arrow-left.svg"); } .p45-icon--arrow-right { --p45-icon: url("/frontend/theme2/icons/arrow-right.svg"); } .p45-icon--arrow-up { --p45-icon: url("/frontend/theme2/icons/arrow-up.svg"); } .p45-icon--briefcase { --p45-icon: url("/frontend/theme2/icons/briefcase.svg"); } .p45-icon--bus { --p45-icon: url("/frontend/theme2/icons/bus.svg"); } .p45-icon--calendar { --p45-icon: url("/frontend/theme2/icons/calendar.svg"); } .p45-icon--calendar-outline { --p45-icon: url("/frontend/theme2/icons/calendar-outline.svg"); } .p45-icon--calendar-search { --p45-icon: url("/frontend/theme2/icons/calendar-search.svg"); } .p45-icon--profile-2user { --p45-icon: url("/frontend/theme2/icons/profile-2user.svg"); } .p45-icon--info-rounded { --p45-icon: url("/frontend/theme2/icons/info-rounded.svg"); } .p45-icon--check { --p45-icon: url("/frontend/theme2/icons/check.svg"); } .p45-icon--chevron-down { --p45-icon: url("/frontend/theme2/icons/chevron-down.svg"); } .p45-icon--chevron-left { --p45-icon: url("/frontend/theme2/icons/chevron-left.svg"); } .p45-icon--chevron-right { --p45-icon: url("/frontend/theme2/icons/chevron-right.svg"); } .p45-icon--chevron-up { --p45-icon: url("/frontend/theme2/icons/chevron-up.svg"); } .p45-icon--close { --p45-icon: url("/frontend/theme2/icons/close.svg"); } .p45-icon--close-circle { --p45-icon: url("/frontend/theme2/icons/close-circle.svg"); } .p45-icon--compass { --p45-icon: url("/frontend/theme2/icons/compass.svg"); } .p45-icon--facebook { --p45-icon: url("/frontend/theme2/icons/facebook.svg"); } .p45-icon--family-home { --p45-icon: url("/frontend/theme2/icons/family-home.svg"); } .p45-icon--food { --p45-icon: url("/frontend/theme2/icons/food.svg"); } .p45-icon--global { --p45-icon: url("/frontend/theme2/icons/global.svg"); } .p45-icon--heart { --p45-icon: url("/frontend/theme2/icons/heart.svg"); } .p45-icon--heart-fill { --p45-icon: url("/frontend/theme2/icons/heart-fill.svg"); } .p45-icon--holiday { --p45-icon: url("/frontend/theme2/icons/holiday.svg"); } .p45-icon--home { --p45-icon: url("/frontend/theme2/icons/home.svg"); } .p45-icon--house-outline { --p45-icon: url("/frontend/theme2/icons/house-outline.svg"); } .p45-icon--people-outline { --p45-icon: url("/frontend/theme2/icons/people-outline.svg"); } .p45-icon--bed-double { --p45-icon: url("/frontend/theme2/icons/bed-double.svg"); } .p45-icon--meal-cloche { --p45-icon: url("/frontend/theme2/icons/meal-cloche.svg"); } .p45-icon--star-fill { --p45-icon: url("/frontend/theme2/icons/star-fill.svg"); } .p45-icon--trash-fill { --p45-icon: url("/frontend/theme2/icons/trash-fill.svg"); } .p45-icon--info-circle { --p45-icon: url("/frontend/theme2/icons/info-circle.svg"); } .p45-icon--information-fill { --p45-icon: url("/frontend/theme2/icons/information-fill.svg"); } .p45-icon--instagram { --p45-icon: url("/frontend/theme2/icons/instagram.svg"); } .p45-icon--luggage { --p45-icon: url("/frontend/theme2/icons/luggage.svg"); } .p45-icon--map { --p45-icon: url("/frontend/theme2/icons/map.svg"); } .p45-icon--map-pin { --p45-icon: url("/frontend/theme2/icons/map-pin.svg"); } .p45-icon--location { --p45-icon: url("/frontend/theme2/icons/location.svg"); } .p45-icon--trash { --p45-icon: url("/frontend/theme2/icons/trash.svg"); } .p45-icon--save { --p45-icon: url("/frontend/theme2/icons/save.svg"); } .p45-icon--save-outline { --p45-icon: url("/frontend/theme2/icons/save-outline.svg"); } .p45-icon--bed { --p45-icon: url("/frontend/theme2/icons/bed.svg"); } .p45-icon--clipboard { --p45-icon: url("/frontend/theme2/icons/clipboard.svg"); } .p45-icon--people { --p45-icon: url("/frontend/theme2/icons/people.svg"); } .p45-icon--payment { --p45-icon: url("/frontend/theme2/icons/payment.svg"); } .p45-icon--maximize { --p45-icon: url("/frontend/theme2/icons/maximize.svg"); } .p45-icon--meal { --p45-icon: url("/frontend/theme2/icons/meal.svg"); } .p45-icon--menu { --p45-icon: url("/frontend/theme2/icons/menu.svg"); } .p45-icon--minimize { --p45-icon: url("/frontend/theme2/icons/minimize.svg"); } .p45-icon--minus { --p45-icon: url("/frontend/theme2/icons/minus.svg"); } .p45-icon--minus-circle { --p45-icon: url("/frontend/theme2/icons/minus-circle.svg"); } .p45-icon--moon { --p45-icon: url("/frontend/theme2/icons/moon.svg"); } .p45-icon--moon-line { --p45-icon: url("/frontend/theme2/icons/moon-line.svg"); } .p45-icon--phone-call { --p45-icon: url("/frontend/theme2/icons/phone-call.svg"); } .p45-icon--plane { --p45-icon: url("/frontend/theme2/icons/plane.svg"); } .p45-icon--plus { --p45-icon: url("/frontend/theme2/icons/plus.svg"); } .p45-icon--add-circle { --p45-icon: url("/frontend/theme2/icons/add-circle.svg"); } .p45-icon--romania { --p45-icon: url("/frontend/theme2/icons/romania.svg"); } .p45-icon--routing { --p45-icon: url("/frontend/theme2/icons/routing.svg"); } .p45-icon--search { --p45-icon: url("/frontend/theme2/icons/search.svg"); } .p45-icon--share { --p45-icon: url("/frontend/theme2/icons/share.svg"); } .p45-icon--star { --p45-icon: url("/frontend/theme2/icons/star.svg"); } .p45-icon--ticket { --p45-icon: url("/frontend/theme2/icons/ticket.svg"); } .p45-icon--tiktok { --p45-icon: url("/frontend/theme2/icons/tiktok.svg"); } .p45-icon--user { --p45-icon: url("/frontend/theme2/icons/user.svg"); } .p45-icon--user-ai { --p45-icon: url("/frontend/theme2/icons/user-ai.svg"); } .p45-icon--users { --p45-icon: url("/frontend/theme2/icons/users.svg"); } .p45-icon--wifi { --p45-icon: url("/frontend/theme2/icons/wifi.svg"); } .p45-icon--youtube { --p45-icon: url("/frontend/theme2/icons/youtube.svg"); } /* ========================================================================== COMPONENTE -------------------------------------------------------------------------- Stilurile fiecărei componente stau acum în folderul ei, lângă HTML: components/navbar/navbar.css components/buttons/buttons.css components/cards/cards.css components/accordion/accordion.css components/logos/logos.css components/icons/icons.css (grila de showcase; sistemul .p45-icon rămâne mai sus, e foundation) Sunt linkate în index.html, după acest fișier. Acest style.css conține doar fundațiile partajate (tokens, bază, tipografie, sistemul de iconițe). ========================================================================== */ /* ========================================================================== LABELS PDP (Figma: 168-1654) -------------------------------------------------------------------------- Etichete pill pentru pagina de produs. Bază comună: înălțime 22px, radius 10px, padding 0 15px, text Mukta SemiBold 14px, conținut centrat. Variante (fundal + text): .p45-label--info → baby-blue (#9adefa) / strong-blue — Hotel/Avion/Autocar .p45-label--last → roșu (#e01717) / alb — Ultimele locuri .p45-label--best → brand-blue (#0054e2)/ alb — Bestseller .p45-label--promo → galben (#febe00) / strong-blue — 7+7 / stele albe Notă: baby-blue-ul din Figma (#9adefa) e mai saturat decât tokenul --p45-surface-baby-blue (#d7f2fd); folosim valoarea din design pentru fidelitate vizuală. Stelele refolosesc .p45-icon--star (currentColor). Depinde de: css/style.css (tokens, .p45-icon). Încarcă-l după style.css. ========================================================================== */ .p45-label { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 15px; border-radius: 10px; font: var(--p45-fw-semibold) var(--p45-fs-p3) / var(--p45-lh-body) var(--p45-font); /* 14 SemiBold */ letter-spacing: var(--p45-ls); white-space: nowrap; text-align: center; } .p45-label--info { background: #9adefa; color: var(--p45-text-strong-blue); } .p45-label--last { background: var(--p45-red); color: var(--p45-text-white); } .p45-label--best { background: var(--p45-surface-brand-blue); color: var(--p45-text-white); } .p45-label--promo { background: var(--p45-yellow); color: var(--p45-text-strong-blue); } /* Rând de stele (varianta cu rating). 15px, albe pe galben. */ .p45-label__stars { display: inline-flex; align-items: center; color: var(--p45-text-white); } .p45-label__stars .p45-icon { width: 15px; height: 15px; } /* ========================================================================== TOP-INFO (Figma: 400-9750) — antet PDP / Sejur -------------------------------------------------------------------------- Breadcrumb + rând (etichete + titlu | acțiuni Distribuie/Salveaza). Etichetele refolosesc atomul .p45-label (components/labels) — încarcă labels.css înainte. Iconurile prin .p45-icon. Depinde de: css/style.css (tokens, .p45-icon), components/labels/labels.css. ========================================================================== */ .p45-top-info { padding: 16px 0; } /* --- Grid antet --------------------------------------------------------- */ /* Desktop: breadcrumb pe tot rândul de sus, apoi etichete+titlu (stânga) și acțiuni (dreapta). Reordonăm zonele pe mobil fără a schimba HTML-ul. */ .p45-top-info__grid { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "breadcrumb breadcrumb" "head actions"; align-items: center; gap: 15px 24px; } /* --- Breadcrumb --------------------------------------------------------- */ .p45-top-info__breadcrumb { grid-area: breadcrumb; display: flex; align-items: center; gap: 8px; } .p45-top-info__breadcrumb .p45-icon { color: var(--p45-text-grey); } .p45-top-info__crumbs { font: var(--p45-fw-medium) var(--p45-fs-p3) / 16px var(--p45-font); /* 14 Medium */ letter-spacing: var(--p45-ls); color: var(--p45-text-grey); white-space: nowrap; } .p45-top-info__crumb-current { color: var(--p45-text-grey); } /* --- Etichete + titlu --------------------------------------------------- */ .p45-top-info__head { grid-area: head; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .p45-top-info__labels { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; } .p45-top-info__title { margin: 0; font: var(--p45-fw-bold) var(--p45-fs-h3) / var(--p45-lh-heading) var(--p45-font); /* 32 Bold */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); } /* --- Acțiuni (Distribuie / Salveaza) ------------------------------------ */ .p45-top-info__actions { grid-area: actions; align-self: center; justify-self: end; display: flex; align-items: center; gap: 5px; } .p45-top-info__action { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 150px; height: 48px; padding: 10px; background: var(--p45-surface-white); border: 1px solid var(--p45-text-strong-blue); /* #001d70 */ border-radius: 10px; /* din Figma (nu token-ul de 12) */ color: var(--p45-text-strong-blue); font: var(--p45-fw-semibold) var(--p45-fs-p2) / var(--p45-lh-body) var(--p45-font); /* 16 SemiBold */ letter-spacing: var(--p45-ls); white-space: nowrap; cursor: pointer; transition: background var(--p45-transition), color var(--p45-transition); } .p45-top-info__action .p45-icon { width: 24px; height: 24px; } @media (hover: hover) { .p45-top-info__action:hover { background: var(--p45-surface-strong-blue); color: var(--p45-text-white); } } /* --- Responsive: pe mobil acțiunile urcă lângă breadcrumb (doar iconițe) - Figma (364-12978): breadcrumb stânga + share/heart dreapta pe același rând, apoi etichete + titlu dedesubt pe toată lățimea. */ @media (max-width: 767.98px) { .p45-top-info__grid { grid-template-areas: "breadcrumb actions" "head head"; align-items: start; } .p45-top-info__actions { align-self: start; gap: 15px; } /* Figma: 15px între share/heart */ /* Breadcrumb: 12px, „Sejur > Egipt >" Regular + „HURGHADA" SemiBold (Figma 364-12981) */ .p45-top-info__crumbs { font-size: var(--p45-fs-caption); font-weight: var(--p45-fw-regular); } .p45-top-info__crumb-current { font-weight: var(--p45-fw-semibold); } /* Butoanele devin doar iconițe (fără chenar/text), ca în Figma. */ .p45-top-info__action { width: auto; height: auto; padding: 0; border: 0; background: none; } .p45-top-info__action-text { display: none; } @media (hover: hover) { .p45-top-info__action:hover { background: none; color: var(--p45-text-blue); } } .p45-top-info__head { gap: 15px; } /* Figma 364-12999: 15px între etichete și titlu */ .p45-top-info__title { font-size: 1.625rem; line-height: 26px; } /* 26px Bold pe mobil (Figma 364-12999) */ } /* ========================================================================== SEJUR-PHOTO (Figma: 192-926) — galerie foto PDP / Sejur -------------------------------------------------------------------------- Imagine mare (412px) + rând de 5 thumbnail-uri (107px), toate radius 10px, object-fit cover. Ultimul thumbnail: overlay navy 60% + „+10". Depinde de: css/style.css (tokens). Încarcă-l după style.css. ========================================================================== */ .p45-sejur-photo { display: flex; flex-direction: column; gap: 15px; width: 100%; } .p45-sejur-photo__hero { width: 100%; height: 412px; border-radius: 10px; overflow: hidden; cursor: pointer; } .p45-sejur-photo__hero img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Overlay carusel mobil (săgeți + contor) — ascuns pe desktop, activat <768px */ .p45-sejur-photo__hero-controls { display: none; } .p45-sejur-photo__thumbs { display: flex; gap: 15px; width: 100%; } .p45-sejur-photo__thumb { position: relative; flex: 1 1 0; min-width: 0; height: 107px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: none; } .p45-sejur-photo__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Ultimul thumbnail: overlay navy + „+10" */ .p45-sejur-photo__thumb--more::after { content: ""; position: absolute; inset: 0; background: rgba(0, 29, 112, 0.6); /* strong-blue 60% */ } .p45-sejur-photo__more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; font: var(--p45-fw-bold) var(--p45-fs-h3) / 1 var(--p45-font); /* 32 Bold */ letter-spacing: var(--p45-ls); color: var(--p45-text-white); } /* ========================================================================== GALERIE MODAL (lightbox) — Figma 400-11939 Scrim full-screen + panou alb: header (titlu + X), scenă (imagine mare + săgeți navy circulare), footer (bandă thumbnail-uri derulabilă + săgeți). Note: #dee2e6 (separatoare) — valoare din design, fără token. ========================================================================== */ .p45-gallery { position: fixed; inset: 0; z-index: 1050; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 29, 112, 0.7); /* strong-blue 70% (din design) */ } .p45-gallery.is-open { display: flex; } .p45-gallery__panel { display: flex; flex-direction: column; width: 100%; max-width: 1350px; /* Înălțime FIXĂ (nu doar max) — panoul nu se redimensionează după proporțiile imaginii curente; imaginea se încadrează în scenă. */ height: 92vh; max-height: 92vh; background: var(--p45-surface-white); border-radius: 10px; overflow: hidden; } /* Header */ .p45-gallery__header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 30px; border-bottom: 1px solid #dee2e6; } .p45-gallery__title { margin: 0; font: var(--p45-fw-extrabold) var(--p45-fs-h5) / 1.2 var(--p45-font); /* 24 ExtraBold */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); } .p45-gallery__close { flex: 0 0 auto; display: inline-flex; padding: 0; border: 0; background: none; cursor: pointer; color: var(--p45-text-main); } .p45-gallery__close .p45-icon { width: 24px; height: 24px; } /* Scenă (imaginea mare + săgeți pe lateral, NU peste imagine) */ .p45-gallery__stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 20px; padding: 28px 30px; } /* Viewport-ul ține imaginea centrată și o constrânge să nu iasă din panou: se întinde pe toată înălțimea scenei (align-self), iar imaginea se limitează la 100% din el — orice proporție ar avea poza, panoul rămâne fix. */ .p45-gallery__viewport { flex: 1 1 auto; align-self: stretch; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; } .p45-gallery__image { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; } .p45-gallery__nav { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--p45-surface-strong-blue); /* navy #001d70 */ color: var(--p45-text-white); cursor: pointer; transition: background var(--p45-transition); } .p45-gallery__nav .p45-icon { width: 20px; height: 20px; } @media (hover: hover) { .p45-gallery__nav:hover { background: var(--p45-surface-brand-blue); } } /* Footer (thumbnail-uri) */ .p45-gallery__footer { flex: 0 0 auto; padding: 20px 30px 30px; border-top: 1px solid #dee2e6; } .p45-gallery__thumbs-wrap { position: relative; } .p45-gallery__thumbs { display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; } .p45-gallery__thumbs::-webkit-scrollbar { display: none; } .p45-gallery__thumb { flex: 0 0 auto; width: 151px; height: 79px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: none; cursor: pointer; } .p45-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .p45-gallery__thumb.is-active { border-color: var(--p45-border-blue); } .p45-gallery__scroll { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #a4a4a4; /* cerc gri (din design) */ color: var(--p45-text-white); /* săgeata albă */ cursor: pointer; } .p45-gallery__scroll--prev { left: 0; } .p45-gallery__scroll--next { right: 0; } .p45-gallery__scroll .p45-icon { width: 18px; height: 18px; } /* --- Responsive --------------------------------------------------------- */ @media (max-width: 767.98px) { /* Galerie mobil (Figma 364-13005): o singură imagine 286px cu săgeți + contor, fără banda de thumbnail-uri. */ .p45-sejur-photo__hero { position: relative; height: 286px; } .p45-sejur-photo__thumbs { display: none; } .p45-sejur-photo__hero-controls { display: block; position: absolute; inset: 10px; /* padding 10px ca în Figma */ pointer-events: none; /* doar săgețile primesc click */ } .p45-sejur-photo__hero-arrow { pointer-events: auto; position: absolute; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--p45-text-white); cursor: pointer; } .p45-sejur-photo__hero-arrow .p45-icon { width: 24px; height: 24px; } .p45-sejur-photo__hero-arrow--prev { left: 0; } .p45-sejur-photo__hero-arrow--next { right: 0; } .p45-sejur-photo__hero-arrow--next .p45-icon { transform: rotate(180deg); } /* dreapta */ .p45-sejur-photo__hero-counter { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); padding: 5px 10px; background: rgba(0, 29, 112, 0.6); /* strong-blue 60% */ border-radius: 26px; font: var(--p45-fw-bold) var(--p45-fs-caption) / 1 var(--p45-font); /* 12 Bold */ letter-spacing: var(--p45-ls); color: var(--p45-text-white); white-space: nowrap; } /* --- Galerie modal pe mobil (Figma 364-14025) ------------------------- */ .p45-gallery { padding: 0; } /* iOS Chrome/Safari: 100vh = viewport-ul MARE (cu toolbar-ele ascunse), deci panoul iesea mai inalt decat zona vizibila → header-ul (titlu + X) si footer-ul ramaneau sub bara de URL / bara de jos, fara sa poti inchide. 100% din overlay-ul fixed (inset:0) urmareste zona vizibila; 100dvh ca intarire pe browsere moderne. */ .p45-gallery__panel { max-width: none; height: 100%; height: 100dvh; max-height: 100%; max-height: 100dvh; border-radius: 0; } /* Header: 66px, padding 20, separator #a4a4a4, titlu 18 Bold */ .p45-gallery__header { padding: calc(20px + env(safe-area-inset-top)) 20px 20px; border-bottom-color: #a4a4a4; } .p45-gallery__title { font-size: var(--p45-fs-p1); font-weight: var(--p45-fw-bold); } /* 18 Bold */ /* Scenă: imagine full-bleed + săgeți circulare suprapuse pe margini */ .p45-gallery__stage { position: relative; gap: 0; padding: 0; } .p45-gallery__viewport { width: 100%; } .p45-gallery__image { width: 100%; height: 251px; max-height: 55vh; object-fit: cover; border-radius: 0; } .p45-gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background: none; color: var(--p45-text-white); /* arrow-circle albe peste imagine (Figma 364-14037) */ } .p45-gallery__nav--prev { left: 10px; } .p45-gallery__nav--next { right: 10px; } .p45-gallery__nav .p45-icon { width: 24px; height: 24px; } /* chevron → arrow-circle (doar pe mobil, prin variabila --p45-icon) */ .p45-gallery__nav--prev .p45-icon { --p45-icon: url("/frontend/theme2/icons/arrow-circle-left.svg"); } .p45-gallery__nav--next .p45-icon { --p45-icon: url("/frontend/theme2/icons/arrow-circle-left.svg"); transform: rotate(180deg); } /* Footer: separator inset 20px (335px, NU full-bleed) + bandă thumbnail-uri full-bleed care derulează până la marginea ecranului (Figma 364-14042). Footer fără padding orizontal → banda atinge marginile; separatorul devine pseudo-element ca să fie tras la 20px de fiecare margine. */ .p45-gallery__footer { position: relative; padding: 22px 0 calc(30px + env(safe-area-inset-bottom)); border-top: 0; } .p45-gallery__footer::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: #a4a4a4; } /* Banda derulabilă: padding la stânga 20px → prima poză stă la 20px în repaus, dar pozele trec pe sub margine și ies din ecran la derulare. Marginea din dreapta vine din margin-right pe ultimul thumb (padding-right pe un container flex cu scroll nu e respectat la capătul derulării). */ .p45-gallery__thumbs { padding: 0 0 0 20px; scroll-padding-inline: 20px; } .p45-gallery__thumb { width: 115px; height: 61px; border-radius: 5px; } .p45-gallery__thumb:last-child { margin-right: 20px; } .p45-gallery__scroll { display: none; } } /* ========================================================================== REZERVARE (Figma: 364-20969) — bară laterală PDP / Sejur -------------------------------------------------------------------------- Două carduri pe fundal #ebf3ff (radius 10px, padding 20px): 1. Detalii vacanță (selectoare + servicii incluse + „Vezi mai multe") 2. Tarif (preț + cameră + REZERVĂ / PĂSTREAZĂ OFERTA 48H) Lățime fixă 358px pe desktop (sidebar); full-width pe mobil. Depinde de: css/style.css (tokens, .p45-icon). Încarcă-l după style.css. Notă: #ebf3ff nu are token (e mai saturat decât --p45-surface-light-blue); folosim valoarea din design. ========================================================================== */ .p45-rezervare { display: flex; flex-direction: column; gap: 15px; width: 358px; max-width: 100%; color: var(--p45-text-main); font-family: var(--p45-font); letter-spacing: var(--p45-ls); } .p45-rezervare__card { display: flex; flex-direction: column; gap: 30px; width: 100%; padding: 20px; background: #ebf3ff; border-radius: 10px; } /* --- Responsive: reordonare pe mobil/tabletă (<992px) ------------------- Figma (364-12978): panoul devine full-width, iar ordinea verticală este Tarif (preț) → Detalii vacanță → butoane CTA (jos, pe fundal alb). „display:contents" pe cardul Tarif îi scoate copiii (preț + CTA) ca itemi direcți ai panoului, ca să-i putem reordona cu `order`. Blocul de preț își recapătă cardul albastru; butoanele rămân pe fundalul paginii. */ @media (max-width: 991.98px) { .p45-rezervare__card--tarif { display: contents; } .p45-rezervare__price-block { order: -1; padding: 20px; background: #ebf3ff; border-radius: 10px; } .p45-rezervare__cta { order: 1; } } /* --- Grupuri (Detalii / Servicii) --------------------------------------- */ .p45-rezervare__group { display: flex; flex-direction: column; gap: 15px; width: 100%; } .p45-rezervare__title { margin: 0; font: var(--p45-fw-medium) var(--p45-fs-p1) / var(--p45-lh-body) var(--p45-font); /* 18 Medium */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); } /* --- Selectoare (persoane / date / plecare / nopți) --------------------- */ .p45-rezervare__selectors { display: flex; flex-direction: column; gap: 10px; } .p45-rezervare__select { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px; background: var(--p45-surface-white); border: 1px solid var(--p45-text-strong-blue); /* #001d70 */ border-radius: 6px; cursor: pointer; text-align: left; } .p45-rezervare__select-main { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .p45-rezervare__select-main .p45-icon { width: 20px; height: 20px; color: var(--p45-text-strong-blue); } .p45-rezervare__select-text { font: var(--p45-fw-medium) var(--p45-fs-p2) / var(--p45-lh-body) var(--p45-font); /* 16 Medium */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); } .p45-rezervare__select-caret { width: 18px; height: 18px; color: var(--p45-text-strong-blue); } /* --- Servicii incluse --------------------------------------------------- */ .p45-rezervare__services { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } .p45-rezervare__service { display: flex; align-items: center; gap: 5px; } .p45-rezervare__service-icon { flex: 0 0 auto; width: 15px; height: 15px; color: var(--p45-text-strong-blue); } .p45-rezervare__service-text { font: var(--p45-fw-regular) var(--p45-fs-p3) / var(--p45-lh-body) var(--p45-font); /* 14 Regular */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); } .p45-rezervare__service-info { flex: 0 0 auto; width: 20px; height: 20px; color: var(--p45-text-grey); } /* --- Buton „Vezi mai multe" --------------------------------------------- */ .p45-rezervare__more { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; /* + line-height 1 → înălțime ~30px ca în Figma */ background: transparent; border: 1px solid var(--p45-border-blue); /* #0054e2 */ border-radius: 6px; color: var(--p45-text-blue); font: var(--p45-fw-bold) var(--p45-fs-p2) / 1 var(--p45-font); /* 16 Bold */ letter-spacing: var(--p45-ls); white-space: nowrap; cursor: pointer; transition: background var(--p45-transition), color var(--p45-transition); } @media (hover: hover) { .p45-rezervare__more:hover { background: var(--p45-surface-brand-blue); color: var(--p45-text-white); } } /* --- Card Tarif --------------------------------------------------------- */ .p45-rezervare__price-block { display: flex; flex-direction: column; gap: 15px; width: 100%; } /* Grupul de preț e transparent pe desktop (rămâne gap-ul de 15px al cardului). Pe mobil devine grup propriu cu gap 10px (vezi media query de la final). */ .p45-rezervare__price-group { display: contents; } /* La fel, grupul „Servicii incluse" (titlu + listă) e transparent pe desktop și devine grup cu gap 10px pe mobil (Figma 364-17323). */ .p45-rezervare__services-group { display: contents; } .p45-rezervare__price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; } .p45-rezervare__price-label { margin: 0; font: var(--p45-fw-semibold) var(--p45-fs-p2) / var(--p45-lh-body) var(--p45-font); /* 16 SemiBold */ letter-spacing: var(--p45-ls); } .p45-rezervare__price { margin: 0; font: var(--p45-fw-bold) 1.875rem / var(--p45-lh-body) var(--p45-font); /* 30 Bold */ letter-spacing: var(--p45-ls); color: var(--p45-text-blue); text-align: right; white-space: nowrap; } .p45-rezervare__price-unit { margin: 0; font: var(--p45-fw-regular) var(--p45-fs-p2) / var(--p45-lh-body) var(--p45-font); /* 16 Regular */ letter-spacing: var(--p45-ls); text-align: right; } .p45-rezervare__divider { height: 1px; margin: 0; border: 0; background: #d9d9d9; opacity: 1; } .p45-rezervare__room-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; } .p45-rezervare__room { display: flex; flex-direction: column; gap: 9px; min-width: 0; } .p45-rezervare__room-count { margin: 0; font: var(--p45-fw-semibold) var(--p45-fs-p2) / var(--p45-lh-body) var(--p45-font); /* 16 SemiBold */ letter-spacing: var(--p45-ls); } .p45-rezervare__room-name { margin: 0; font: var(--p45-fw-regular) var(--p45-fs-p2) / var(--p45-lh-body) var(--p45-font); /* 16 Regular */ letter-spacing: var(--p45-ls); } .p45-rezervare__change { flex: 0 0 auto; font: var(--p45-fw-regular) var(--p45-fs-p3) / var(--p45-lh-body) var(--p45-font); /* 14 Regular */ letter-spacing: var(--p45-ls); color: var(--p45-text-strong-blue); text-decoration: underline; white-space: nowrap; } /* --- CTA (REZERVĂ / PĂSTREAZĂ OFERTA) ----------------------------------- */ .p45-rezervare__cta { display: flex; flex-direction: column; gap: 10px; width: 100%; } .p45-rezervare__btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 15px; border: 1px solid transparent; border-radius: 5px; font: var(--p45-fw-extrabold) var(--p45-fs-p1) / var(--p45-lh-body) var(--p45-font); /* 18 ExtraBold */ letter-spacing: var(--p45-ls); cursor: pointer; white-space: nowrap; transition: background var(--p45-transition), color var(--p45-transition); } .p45-rezervare__btn--primary { background: var(--p45-surface-brand-blue); color: var(--p45-text-white); text-transform: uppercase; } .p45-rezervare__btn--outline { background: var(--p45-surface-white); border-color: var(--p45-border-blue); color: var(--p45-text-blue); } @media (hover: hover) { .p45-rezervare__btn--primary:hover { background: var(--p45-text-strong-blue); } .p45-rezervare__btn--outline:hover { background: var(--p45-surface-brand-blue); color: var(--p45-text-white); } } /* --- flexiGO: card upsell protecție/reprogramare (Figma 400-17410) ------ Card alb în interiorul cardului de tarif: checkbox + logo flexiGO + preț, titlu, două beneficii cu bifă albastră și link „Afla mai multe". Note: #dee2e6 (border checkbox) — valoare din design, fără token. */ .p45-flexigo { display: flex; align-items: flex-start; gap: 10px; /* grupul dă deja 15px gap → +15px = 30px față de „Vezi mai multe" */ margin-top: 15px; padding: 10px; background: var(--p45-surface-white); border-radius: 10px; } .p45-flexigo__check { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 20px; height: 20px; margin: 8px 0 0; /* aliniat cu rândul logo/preț */ background: var(--p45-surface-white); border: 1px solid #dee2e6; border-radius: 3px; cursor: pointer; transition: background var(--p45-transition), border-color var(--p45-transition); } .p45-flexigo__check:checked { background: var(--p45-surface-brand-blue); border-color: var(--p45-surface-brand-blue); } .p45-flexigo__check:checked::after { content: ""; display: block; width: 100%; height: 100%; background: var(--p45-text-white); -webkit-mask: url("/frontend/theme2/icons/check.svg") center / 12px no-repeat; mask: url("/frontend/theme2/icons/check.svg") center / 12px no-repeat; } .p45-flexigo__content { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; } .p45-flexigo__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .p45-flexigo__logo { height: 20px; width: auto; } .p45-flexigo__price { margin: 0; white-space: nowrap; color: var(--p45-text-main); } .p45-flexigo__price-val { font: var(--p45-fw-extrabold) var(--p45-fs-p2) / 1 var(--p45-font); /* 16 ExtraBold */ letter-spacing: var(--p45-ls); } .p45-flexigo__price-unit { font: var(--p45-fw-regular) var(--p45-fs-p3) / 1 var(--p45-font); /* 14 Regular */ letter-spacing: var(--p45-ls); } .p45-flexigo__list { display: flex; flex-direction: column; gap: 5px; } .p45-flexigo__title { margin: 0; font: var(--p45-fw-semibold) var(--p45-fs-p3) / 16px var(--p45-font); /* 14 SemiBold */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); } .p45-flexigo__item { display: flex; align-items: center; gap: 10px; font: var(--p45-fw-regular) var(--p45-fs-p3) / 16px var(--p45-font); /* 14 Regular */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); } .p45-flexigo__tick { flex: 0 0 auto; width: 14px; height: 14px; color: var(--p45-text-blue); } .p45-flexigo__more { font: var(--p45-fw-regular) var(--p45-fs-p3) / 16px var(--p45-font); /* 14 Regular */ letter-spacing: var(--p45-ls); color: var(--p45-text-blue); text-decoration: underline; } /* ========================================================================== RESPONSIVE — cardul Tarif pe mobil (Figma 364-17311) La final de fișier ca să suprascrie regulile de bază de mai sus (aceeași specificitate → câștigă ordinea din sursă). Preț 22px, restul textelor 14px, iar „/persoană" la 10px de rândul „Tarif" (gap-ul de bloc e 15px → −5px). ========================================================================== */ @media (max-width: 767.98px) { /* Cardul Detalii: 20px între grupul „Detalii vacanță" și „Servicii incluse" (Figma „Frame 35170"); cardul de bază are 30px. */ .p45-rezervare__card--details { gap: 20px; } /* Titluri (Detalii vacanță / Servicii incluse): 16px SemiBold (era 18px Medium). */ .p45-rezervare__title { font-size: var(--p45-fs-p2); font-weight: var(--p45-fw-semibold); } /* Textul selectoarelor: 14px (era 16px). */ .p45-rezervare__select-text { font-size: var(--p45-fs-p3); } /* „Detalii vacanță" → selectoare: 20px (Figma); grupul de bază are 15px. */ .p45-rezervare__group--detalii { gap: 20px; } /* „Servicii incluse" + listă devin grup cu gap 10px; restul grupului (→ „Vezi mai multe") rămâne la 15px. */ .p45-rezervare__services-group { display: flex; flex-direction: column; gap: 10px; } /* Grupul de preț devine cutie proprie cu gap 10px (Figma „Frame 466"), în timp ce cardul păstrează gap-ul de 15px între grup, separator și cameră. */ .p45-rezervare__price-group { display: flex; flex-direction: column; gap: 10px; } .p45-rezervare__price { font-size: 1.375rem; } /* 22px (era 30px) */ .p45-rezervare__price-unit { font-size: var(--p45-fs-p3); } /* 14px (era 16px) */ .p45-rezervare__room-count { font-size: var(--p45-fs-p3); } /* 14px */ .p45-rezervare__room-name { font-size: var(--p45-fs-p3); } /* 14px */ /* Butoane CTA (Figma 364-17464): înălțime fixă 40px, text 16px ExtraBold (desktop e 18px cu padding 15px). gap/radius/culori sunt deja corecte. */ .p45-rezervare__btn { height: 40px; padding-block: 0; font-size: var(--p45-fs-p2); /* 16px (era 18px) */ } } /* ========================================================================== rezervare-circuit — ajustări specifice variantei Circuit Se încarcă DUPĂ rezervare.css. Necesită clasa .p45-rezervare--circuit pe rădăcina componentei (rezervare-circuit.html). Mobil/tabletă (<992px): spre deosebire de Sejur (care dizolvă cardul Tarif și mută butoanele CTA jos, pe fundal alb), Circuit-ul păstrează cardul Tarif intact — preț + butonul REZERVĂ împreună — sus, urmat de cardul Detalii vacanță (Figma 477-2279). ========================================================================== */ @media (max-width: 991.98px) { /* Restaurează cardul Tarif (rezervare.css îl face display:contents pe mobil) și îl mută deasupra cardului Detalii vacanță. */ .p45-rezervare--circuit .p45-rezervare__card--tarif { display: flex; flex-direction: column; order: -1; } /* Anulează stilizarea de „card albastru" aplicată pe mobil blocului de preț în Sejur — aici fundalul/paddingul vin deja de la cardul Tarif părinte. */ .p45-rezervare--circuit .p45-rezervare__price-block { padding: 0; background: transparent; border-radius: 0; } } /* ========================================================================== CAMERE DISPONIBILE (Figma: 400-8069) -------------------------------------------------------------------------- Titlu + carduri de cameră. Card: info (nume/tip/masă/status) | separator vertical | preț (vechi tăiat + curent) + buton. Cardul selectat: border 2px #0054e2 + buton plin. Statusuri: Disponibil (verde 30%), La cerere (galben 30%). Depinde de: css/style.css (tokens, .p45-icon). Încarcă-l după style.css. Note: #d9d9d9 (border), #a4a4a4 (preț vechi), #d4e4ff (buton select) — valori din design, fără token. Statusurile folosesc galben/verde la 30% opacitate. ========================================================================== */ .p45-camere { display: flex; flex-direction: column; gap: 30px; width: 100%; color: var(--p45-text-main); font-family: var(--p45-font); letter-spacing: var(--p45-ls); } .p45-camere__title { margin: 0; font-size: var(--p45-fs-h4); /* 28px */ font-weight: var(--p45-fw-extrabold); line-height: var(--p45-lh-heading); } .p45-camere__list { display: flex; flex-direction: column; gap: 15px; } /* --- Card cameră -------------------------------------------------------- */ .p45-room { display: flex; align-items: stretch; gap: 40px; min-height: 133px; padding: 20px; background: var(--p45-surface-white); border: 1px solid #d9d9d9; border-radius: 10px; } .p45-room.is-selected { border: 2px solid var(--p45-border-blue); } @media (hover: hover) { .p45-room:not(.is-selected):hover { border: 2px solid var(--p45-border-blue); } } /* Info (stânga) */ .p45-room__info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 15px; } .p45-room__head { display: flex; flex-direction: column; gap: 4px; } .p45-room__name { margin: 0; font: var(--p45-fw-bold) var(--p45-fs-p1) / 20px var(--p45-font); /* 18 Bold */ letter-spacing: var(--p45-ls); } .p45-room__type { margin: 0; display: flex; align-items: center; gap: 5px; font: var(--p45-fw-regular) var(--p45-fs-p2) / 1.2 var(--p45-font); /* 16 Regular */ letter-spacing: var(--p45-ls); } .p45-room__type .p45-icon { width: 14px; height: 14px; color: var(--p45-text-main); } .p45-room__meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .p45-room__meal { display: flex; flex-direction: column; gap: 6px; } .p45-room__meal-label { margin: 0; font: var(--p45-fw-regular) var(--p45-fs-p3) / 1.2 var(--p45-font); /* 14 Regular */ letter-spacing: var(--p45-ls); } .p45-room__meal-value { margin: 0; font: var(--p45-fw-bold) var(--p45-fs-p1) / 20px var(--p45-font); /* 18 Bold */ letter-spacing: var(--p45-ls); } /* Status (pill) */ .p45-room__status { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 10px 20px; border-radius: 10px; font: var(--p45-fw-regular) var(--p45-fs-p3) / 20px var(--p45-font); /* 14 Regular */ letter-spacing: var(--p45-ls); white-space: nowrap; } .p45-room__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; } .p45-room__status--available { background: rgba(0, 182, 121, 0.3); } .p45-room__status--available .p45-room__dot { background: #00b679; } .p45-room__status--request { background: rgba(254, 190, 0, 0.3); } .p45-room__status--request .p45-room__dot { background: var(--p45-yellow); } /* Separator vertical */ .p45-room__divider { flex: 0 0 1px; align-self: stretch; background: #d9d9d9; } /* Preț + buton (dreapta) */ .p45-room__price-col { flex: 0 0 188px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; } .p45-room__prices { display: flex; flex-direction: column; gap: 5px; } .p45-room__old { margin: 0; font: var(--p45-fw-semibold) var(--p45-fs-p3) / 1.2 var(--p45-font); /* 14 SemiBold */ letter-spacing: var(--p45-ls); color: #a4a4a4; text-decoration: line-through; } .p45-room__price { margin: 0; display: flex; align-items: flex-end; gap: 5px; font: var(--p45-fw-bold) var(--p45-fs-h4) / 1 var(--p45-font); /* 28 Bold */ letter-spacing: var(--p45-ls); color: var(--p45-text-blue); } .p45-room__unit { font: var(--p45-fw-regular) var(--p45-fs-p3) / 1.4 var(--p45-font); /* 14 Regular */ color: var(--p45-text-main); } /* Buton */ .p45-room__btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 15px; border: 0; border-radius: 10px; font: var(--p45-fw-bold) var(--p45-fs-p1) / 20px var(--p45-font); /* 18 Bold */ letter-spacing: var(--p45-ls); cursor: pointer; white-space: nowrap; transition: background var(--p45-transition), color var(--p45-transition); } .p45-room__btn--selected { background: var(--p45-surface-brand-blue); color: var(--p45-text-white); } .p45-room__btn--select { background: #d4e4ff; color: var(--p45-text-blue); } @media (hover: hover) { .p45-room__btn--select:hover { background: var(--p45-surface-brand-blue); color: var(--p45-text-white); } } /* --- Responsive: card pe coloană pe mobil (Figma 477-9659) -------------- Ordinea din Figma: nume/tip → preț → separator → masă/status → buton. „display:contents" pe .info și .price-col le scoate copiii ca itemi direcți ai cardului, ca să-i putem reordona cu `order` (desktop neschimbat). */ @media (max-width: 767.98px) { .p45-camere { gap: 20px; } /* titlu → listă: 20px (era 30px) */ .p45-camere__title { font-size: 1.25rem; } /* 20px pe mobil */ .p45-room { flex-direction: column; gap: 15px; /* Figma: 15px între blocuri (era 20px) */ min-height: 0; border-color: #a4a4a4; /* Figma (era #d9d9d9) */ } .p45-room__info, .p45-room__price-col { display: contents; } /* aplatizăm pentru reordonare */ .p45-room__head { order: 1; gap: 10px; } /* nume → tip: 10px (era 4px) */ .p45-room__prices { order: 2; } .p45-room__divider { order: 3; align-self: auto; width: 100%; height: 1px; } .p45-room__meta { order: 4; } .p45-room__btn { order: 5; } /* Dimensiuni text scalate pentru mobil */ .p45-room__name { font-size: var(--p45-fs-p2); } /* 16px (era 18px) */ .p45-room__type { font-size: var(--p45-fs-p3); } /* 14px (era 16px) */ .p45-room__price { font-size: 1.25rem; } /* 20px (era 28px) */ .p45-room__meal { gap: 10px; } /* 10px (era 6px) */ .p45-room__meal-value { font-size: var(--p45-fs-p2); } /* 16px (era 18px) */ /* Status pill: 12px, padding 5px 10px (Figma) */ .p45-room__status { height: auto; padding: 5px 10px; font-size: var(--p45-fs-caption); /* 12px (era 14px) */ } /* Buton „Selectează": înălțime 39px, radius 6px, text 16px */ .p45-room__btn { height: 39px; padding: 0 20px; border-radius: 6px; font-size: var(--p45-fs-p2); /* 16px (era 18px) */ } } /* ========================================================================== camere-disponibile-circuit — ajustări specifice variantei Circuit Se încarcă DUPĂ camere-disponibile.css. Necesită clasa .p45-camere--circuit pe rădăcina componentei (camere-disponibile-circuit.html). Mobil (<768px, Figma 477-9914): cardul de cameră e mai compact decât la Sejur — iconița stă lângă nume, prețul și statusul sunt pe același rând, „Tip masa" nu se afișează, iar separatorul e chiar înainte de buton. ========================================================================== */ @media (max-width: 767.98px) { .p45-camere--circuit .p45-room { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "head head" "prices status" "divider divider" "btn btn"; align-items: center; column-gap: 10px; row-gap: 15px; } /* Nume + iconița ocupanți pe același rând */ .p45-camere--circuit .p45-room__head { grid-area: head; flex-direction: row; align-items: center; gap: 8px; } .p45-camere--circuit .p45-room__prices { grid-area: prices; } .p45-camere--circuit .p45-room__meta { grid-area: status; justify-self: end; } .p45-camere--circuit .p45-room__divider { grid-area: divider; } .p45-camere--circuit .p45-room__btn { grid-area: btn; } /* „Tip masa: Conform programului" nu apare pe mobil în varianta Circuit */ .p45-camere--circuit .p45-room__meal { display: none; } } /* ========================================================================== DESCRIERE HOTEL (Figma: 168-2470) -------------------------------------------------------------------------- Descriere lungă PDP cu „read more". Stări: - collapsed (implicit): .p45-descriere-hotel__content clampat la 427px, gradient alb de fade jos + buton „Arată-mi mai multe". - expanded (.is-expanded): tot conținutul, fără clamp/fade. Responsive: max-width 869px pe desktop, full-width pe mobil. Titlu 30px ExtraBold, subtitlu 18px SemiBold, headinguri secțiune 16px SemiBold, corp 16px Regular (lh 21px). Separatoare 2px #d9d9d9. Toggle în js/main.js (initDescriereHotel). Depinde de: css/style.css (tokens). Încarcă-l după style.css. ========================================================================== */ .p45-descriere-hotel { max-width: 869px; color: var(--p45-text-main); font-family: var(--p45-font); letter-spacing: var(--p45-ls); } /* --- Regiunea collapsible ---------------------------------------------- */ .p45-descriere-hotel__content { position: relative; display: flex; flex-direction: column; gap: 5px; max-height: 427px; overflow: hidden; } /* Cu max-height pe un container flex, copiii s-ar micșora (flex-shrink:1) ca să încapă — iar liniile de 2px ar dispărea. Le fixăm dimensiunea. */ .p45-descriere-hotel__content > * { flex-shrink: 0; } /* Gradient de fade (doar în starea collapsed) */ .p45-descriere-hotel__content::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 120px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--p45-surface-white)); pointer-events: none; } .p45-descriere-hotel.is-expanded .p45-descriere-hotel__content { max-height: none; overflow: visible; } .p45-descriere-hotel.is-expanded .p45-descriere-hotel__content::after { content: none; } /* Conținut care încape deja în clamp (ex. circuitele au descriere scurtă în această zonă) → fără clamp/fade și fără butonul „read more" (altfel butonul e vizibil dar „nu face nimic"). Clasa e pusă de JS (initDescriereHotel). */ .p45-descriere-hotel.is-static .p45-descriere-hotel__content { max-height: none; overflow: visible; } .p45-descriere-hotel.is-static .p45-descriere-hotel__content::after { content: none; } .p45-descriere-hotel.is-static .p45-descriere-hotel__more { display: none; } /* --- Titlu / subtitlu --------------------------------------------------- */ .p45-descriere-hotel__subtitle { margin: 0; font-size: var(--p45-fs-p1); /* 18px */ font-weight: var(--p45-fw-semibold); line-height: 26px; } /* --- Separator ---------------------------------------------------------- */ .p45-descriere-hotel__divider { height: 2px; margin: 0; border: 0; background: #d9d9d9; opacity: 1; } /* --- Bloc (secțiune) ---------------------------------------------------- */ .p45-descriere-hotel__heading { margin: 0; font-size: var(--p45-fs-p2); /* 16px */ font-weight: var(--p45-fw-semibold); line-height: 21px; } .p45-descriere-hotel__inline { margin: 0; font-size: var(--p45-fs-p2); /* 16px */ font-weight: var(--p45-fw-regular); line-height: 21px; } /* Liste cu buline */ .p45-descriere-hotel__list { margin: 0; padding-inline-start: 24px; list-style: disc; } .p45-descriere-hotel__list li { font-size: var(--p45-fs-p2); /* 16px */ font-weight: var(--p45-fw-regular); line-height: 21px; } .p45-descriere-hotel__list ul { margin: 0; padding-inline-start: 24px; /* nivel 2 → 48px efectiv */ list-style: disc; } /* --- Buton „read more" -------------------------------------------------- */ .p45-descriere-hotel__more { align-self: flex-start; margin-top: 16px; display: inline-flex; align-items: center; justify-content: center; height: 39px; padding: 10px 20px; background: var(--p45-surface-white); border: 1px solid var(--p45-border-blue); /* #0054e2 */ border-radius: 6px; color: var(--p45-text-blue); font: var(--p45-fw-bold) var(--p45-fs-p2) / var(--p45-lh-body) var(--p45-font); /* 16 Bold */ letter-spacing: var(--p45-ls); cursor: pointer; white-space: nowrap; transition: background var(--p45-transition), color var(--p45-transition); } /* Hover doar pe dispozitive cu mouse — pe touch, :hover „se lipește" după tap și ar lăsa butonul albastru. */ @media (hover: hover) { .p45-descriere-hotel__more:hover { background: var(--p45-surface-brand-blue); color: var(--p45-text-white); } } /* --- Responsive: titlu mai mic pe mobil --------------------------------- */ @media (max-width: 575.98px) { .p45-descriere-hotel__title { font-size: 1.5rem; } /* 24px */ } /* --- Mobil (Figma 364-13169): subtitlu 16px, buton 30px / 14px ---------- */ @media (max-width: 767.98px) { .p45-descriere-hotel__subtitle { font-size: var(--p45-fs-p2); } /* 16px (era 18px) */ .p45-descriere-hotel__more { height: 30px; /* era 39px */ padding-block: 0; font-size: var(--p45-fs-p3); /* 14px Bold (era 16px) */ } } /* ========================================================================== descriere-circuit (Figma desktop 513-23099 / mobil 477-12563) Grid pe arii: desktop = o coloană (descrierea pe toată lățimea, harta ascunsă — rămâne doar în modalul de itinerariu). Mobil = o coloană cu harta vizibilă, în ordinea din Figma: text → hartă → buton. Necesită css/style.css (tokens + .p45-icon). ========================================================================== */ .p45-descriere-circuit { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; grid-template-areas: "text" "cta"; gap: 15px 16px; align-items: stretch; } /* Desktop: harta de lângă descriere e ascunsă (rămâne accesibilă din modalul „Vezi itinerariul pe zile"); descrierea ocupă toată lățimea. */ .p45-descriere-circuit__map { display: none; } .p45-descriere-circuit__text { grid-area: text; display: flex; flex-direction: column; gap: 5px; min-width: 0; } .p45-descriere-circuit__title { margin: 0; font-weight: 600; /* Mukta SemiBold */ font-size: 18px; line-height: 26px; color: #000; } .p45-descriere-circuit__divider { margin: 0; border: 0; height: 2px; background: #d9d9d9; opacity: 1; } .p45-descriere-circuit__body { margin: 0; font-weight: 400; /* Mukta Regular */ font-size: 16px; line-height: 21px; color: #000; } /* Buton contur „Vezi itinerariul pe zile". Desktop: lățime pe conținut, aliniat la stânga (nu se întinde pe toată lățimea descrierii). Mobil: full-width. */ .p45-descriere-circuit__cta { grid-area: cta; align-self: end; justify-self: start; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 10px 20px; border: 1px solid var(--p45-border-blue); /* #0054e2 */ border-radius: 6px; text-decoration: none; background: transparent; transition: background-color .15s ease, color .15s ease; } .p45-descriere-circuit__cta-text { font-weight: 700; /* Mukta Bold */ font-size: 16px; line-height: 1; color: var(--p45-text-blue); /* #0054e2 */ } .p45-descriere-circuit__cta-icon { width: 24px; height: 24px; color: var(--p45-text-blue); } .p45-descriere-circuit__cta:hover { background: var(--p45-surface-brand-blue); } .p45-descriere-circuit__cta:hover .p45-descriere-circuit__cta-text, .p45-descriere-circuit__cta:hover .p45-descriere-circuit__cta-icon { color: #fff; } /* Coloana dreaptă: harta traseului (se întinde pe toată înălțimea) */ .p45-descriere-circuit__map { grid-area: map; min-width: 0; border-radius: 10px; overflow: hidden; } .p45-descriere-circuit__map img { display: block; width: 100%; height: 100%; min-height: 354px; object-fit: cover; } /* Mobil: o coloană, ordinea text → hartă → buton (Figma 477-12563). Aici harta REVINE (pe desktop e ascunsă) și butonul e full-width. */ @media (max-width: 767.98px) { .p45-descriere-circuit { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "text" "map" "cta"; } .p45-descriere-circuit__map { display: block; } .p45-descriere-circuit__map img { height: 133px; min-height: 0; } .p45-descriere-circuit__cta { justify-self: stretch; width: 100%; } } /* ========================================================================== Modal „Itinerariu pe zile" (Figma 519-28719) Overlay întunecat full-screen + panou alb centrat. Corp pe 2 coloane: hartă traseu (stânga, 455px) + listă zile derulabilă (dreapta). Deschidere/ închidere din js/main.js (initItinerar). Necesită css/style.css (.p45-icon, token-uri) + body.p45-no-scroll (overlay.css). ========================================================================== */ .p45-itinerar { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 29, 112, 0.70); } .p45-itinerar.is-open { display: flex; } .p45-itinerar__panel { display: flex; flex-direction: column; width: min(1350px, 96vw); max-height: min(770px, 92vh); background: #fff; border-radius: 10px; overflow: hidden; } /* Header: titlu + X, separator jos */ .p45-itinerar__header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 30px; border-bottom: 1px solid #e2ebfa; } .p45-itinerar__title { margin: 0; font-weight: 700; /* Mukta Bold */ font-size: 20px; line-height: 26px; color: #000; } .p45-itinerar__close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: #000; cursor: pointer; } .p45-itinerar__close .p45-icon { width: 24px; height: 24px; } /* Titlu: complet pe desktop, „Detalii Circuit" pe mobil */ .p45-itinerar__title-short { display: none; } /* Tab-uri Itinerariu / Harta — doar pe mobil (ascunse pe desktop) */ .p45-itinerar__tabs { display: none; } .p45-itinerar__tab { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0; border: 0; border-bottom: 2px solid transparent; background: transparent; font-weight: 600; /* Mukta SemiBold */ font-size: 16px; line-height: 1; color: var(--p45-text-main); cursor: pointer; } .p45-itinerar__tab .p45-icon { width: 22px; height: 22px; } .p45-itinerar__tab.is-active { color: var(--p45-text-blue); border-bottom-color: var(--p45-border-blue); } .p45-itinerar__tab.is-active .p45-icon { color: var(--p45-text-blue); } /* Corp: hartă stânga + zile dreapta */ .p45-itinerar__body { flex: 1 1 auto; min-height: 0; display: flex; gap: 20px; padding: 20px; } .p45-itinerar__map { flex: 0 0 455px; align-self: stretch; border-radius: 10px; overflow: hidden; } .p45-itinerar__map img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Lista de zile — derulabilă, cu scrollbar custom albastru */ .p45-itinerar__days { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding-right: 13px; } .p45-itinerar__days::-webkit-scrollbar { width: 7px; } .p45-itinerar__days::-webkit-scrollbar-track { background: #e2ebfa; border-radius: 10px; } .p45-itinerar__days::-webkit-scrollbar-thumb { background: var(--p45-surface-brand-blue); border-radius: 10px; } .p45-itinerar__days { scrollbar-width: thin; scrollbar-color: var(--p45-surface-brand-blue) #e2ebfa; } /* O zi: cap (pin + titlu) + corp (linie verticală + descriere) */ .p45-itinerar__day { display: flex; flex-direction: column; gap: 10px; padding: 0 20px; } .p45-itinerar__day-head { display: flex; align-items: center; gap: 10px; } .p45-itinerar__pin { flex: 0 0 auto; width: 24px; height: 24px; color: var(--p45-icon-blue, #0054e2); } .p45-itinerar__day-titles { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .p45-itinerar__day-num { margin: 0; font-weight: 700; /* Mukta Bold */ font-size: 14px; line-height: 26px; color: var(--p45-text-blue); /* #0054e2 */ } .p45-itinerar__day-route { margin: 0; font-weight: 600; /* Mukta SemiBold */ font-size: 16px; line-height: 22px; color: #000; } .p45-itinerar__day-body { display: flex; align-items: stretch; gap: 25px; } /* Linia verticală conectoare (sub pin) */ .p45-itinerar__line { flex: 0 0 auto; width: 2px; margin-left: 11px; /* aliniată sub centrul pin-ului (24/2 - 1) */ background: #0054e2; border-radius: 2px; } .p45-itinerar__day-text { margin: 0; flex: 1 1 auto; min-width: 0; font-weight: 400; /* Mukta Regular */ font-size: 16px; line-height: 21px; color: #000; } /* Mobil: modal full-screen cu tab-uri Itinerariu / Harta (Figma 477-13218). Header „Detalii Circuit" + X, tab-uri, apoi panoul activ (implicit lista de zile; tab-ul Harta afișează harta pe tot ecranul). */ @media (max-width: 767.98px) { .p45-itinerar { padding: 0; } .p45-itinerar__panel { width: 100%; height: 100%; max-height: none; border-radius: 0; } .p45-itinerar__title-full { display: none; } .p45-itinerar__title-short { display: inline; } .p45-itinerar__header { padding: 20px; } .p45-itinerar__tabs { display: flex; border-bottom: 1px solid #e2ebfa; } /* Corp: un singur panou activ (implicit „Itinerariu" — lista de zile) */ .p45-itinerar__body { flex-direction: column; gap: 0; padding: 20px 0; } .p45-itinerar__days { padding: 0; } .p45-itinerar__map { display: none; flex: 1 1 auto; width: 100%; height: 100%; border-radius: 0; } /* Tab „Harta" activ → arată harta lipită de tab-uri (fără padding), ascunde zilele */ .p45-itinerar.is-tab-map .p45-itinerar__body { padding: 0; } .p45-itinerar.is-tab-map .p45-itinerar__map { display: block; } .p45-itinerar.is-tab-map .p45-itinerar__days { display: none; } } /* ========================================================================== DESCRIERE PDP (Figma: 204-2105) -------------------------------------------------------------------------- Acordeon pentru pagina de produs. Fiecare secțiune: cap cu titlu (20px ExtraBold) + săgeată (24px, se rotește la deschidere), separator 2px #d9d9d9 sub titlu, corp collapsible (text 14/16 Regular, lh 18px). Prima secțiune are conținut bogat: subtitlu „Servicii incluse" (20px ExtraBold, strong-blue) + listă cu iconuri 32px, și „Ce nu este inclus". Toggle în js/main.js (initDescriere). Notă: 20px nu are token (h6=21, p1=18) → literal 1.25rem. Separatorul #d9d9d9 e valoarea din design (divider neutru). Depinde de: css/style.css (tokens, .p45-icon). Încarcă-l după style.css. ========================================================================== */ .p45-descriere { display: flex; flex-direction: column; gap: 30px; width: 100%; } /* --- Secțiune (item) ---------------------------------------------------- */ .p45-descriere__head { display: flex; align-items: center; justify-content: space-between; gap: var(--p45-space-2); /* 8px */ width: 100%; padding: 0 0 4px; background: none; border: 0; border-bottom: 2px solid #d9d9d9; cursor: pointer; text-align: left; } .p45-descriere__title { font: var(--p45-fw-extrabold) 1.25rem / var(--p45-lh-body) var(--p45-font); /* 20 ExtraBold */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); } /* Varianta PDP desktop (Figma 400-9688): titlu 24px */ .p45-descriere--lg .p45-descriere__title { font-size: 1.5rem; } /* 24 ExtraBold */ /* Pe mobil titlurile acordeonului revin la 20px */ @media (max-width: 767.98px) { .p45-descriere--lg .p45-descriere__title { font-size: 1.25rem; } /* 20px */ } .p45-descriere__caret { flex: 0 0 auto; width: 24px; height: 24px; color: var(--p45-icon-blue); /* #0054e2 */ transition: transform var(--p45-transition); } .p45-descriere__item.is-open .p45-descriere__caret { transform: rotate(180deg); } /* --- Corp collapsible --------------------------------------------------- */ .p45-descriere__body { display: none; flex-direction: column; gap: 15px; padding-top: 5px; } .p45-descriere__item.is-open .p45-descriere__body { display: flex; } .p45-descriere__text { margin: 0; font: var(--p45-fw-regular) var(--p45-fs-p3) / 18px var(--p45-font); /* 14 Regular */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); } /* --- Sub-bloc (Servicii incluse / Ce nu este inclus) -------------------- */ .p45-descriere__group { display: flex; flex-direction: column; gap: 5px; } .p45-descriere__subtitle { margin: 0; font: var(--p45-fw-extrabold) 1.25rem / 18px var(--p45-font); /* 20 ExtraBold */ letter-spacing: var(--p45-ls); color: var(--p45-text-strong-blue); /* #001d70 */ } /* Listă servicii incluse: rând cu iconiță 32px + text 16px */ .p45-descriere__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; } .p45-descriere__feature { display: flex; align-items: center; gap: 15px; } .p45-descriere__feature-icon { flex: 0 0 auto; width: 32px; height: 32px; color: var(--p45-text-strong-blue); /* #001d70 */ } .p45-descriere__feature-text { flex: 1 1 0; min-width: 0; font: var(--p45-fw-regular) var(--p45-fs-p2) / 18px var(--p45-font); /* 16 Regular */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); } /* ========================================================================== HARTA (Figma: 400-8114) -------------------------------------------------------------------------- Bandă preview hartă: imagine blurată (blur 2px) + voal albastru ușor rgba(0,29,112,0.10) = strong-blue 10% peste imagine, cu un buton pill „Vezi pe hartă" centrat. Înălțime 181px, full width, colțuri 10px, decupat. Depinde de: css/style.css (tokens). Încarcă-l după style.css. ========================================================================== */ .p45-harta { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 181px; border-radius: 10px; overflow: hidden; isolation: isolate; } /* Fundal: imaginea hărții, blurată. Inset negativ ca marginile blurate să fie decupate de container (altfel ar lăsa o ramă transparentă). */ .p45-harta__bg { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); object-fit: cover; object-position: center; filter: blur(2px); z-index: -2; } /* Voal albastru ușor peste hartă (din Figma: strong-blue 10%) */ .p45-harta::after { content: ""; position: absolute; inset: 0; background: rgba(0, 29, 112, 0.1); z-index: -1; } /* Buton pill „Vezi pe hartă" */ .p45-harta__btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: var(--p45-radius-pill); background: var(--p45-surface-brand-blue); color: var(--p45-text-white); font: var(--p45-fw-bold) var(--p45-fs-p1) / 1.2 var(--p45-font); /* 18 Bold */ letter-spacing: var(--p45-ls); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background var(--p45-transition); } @media (hover: hover) { .p45-harta__btn:hover { background: var(--p45-primary-dark); } } /* ========================================================================== BILETE DE AVION (Figma: 400-8256) -------------------------------------------------------------------------- Titlu + card alb cu două zboruri (dus / întors) separate de o linie verticală. Zbor: durata, logo companie, rută (cod — linie punctată cu avion — cod) cu orașe/aeroporturi sub coduri, apoi Decolare / Aterizare. Depinde de: css/style.css (tokens, .p45-icon--plane). Încarcă-l după style.css. Note: #6b7280 (label gri), #a4a4a4 (border/linie), rgba(0,0,0,.6) (orașe), 25px (cod aeroport) — valori din design, fără token. ========================================================================== */ .p45-bilete { display: flex; flex-direction: column; gap: 30px; width: 100%; color: var(--p45-text-main); font-family: var(--p45-font); letter-spacing: var(--p45-ls); } .p45-bilete__title { margin: 0; font: var(--p45-fw-extrabold) var(--p45-fs-h4) / var(--p45-lh-heading) var(--p45-font); /* 28 ExtraBold */ letter-spacing: var(--p45-ls); } /* --- Card cu cele două zboruri ----------------------------------------- */ .p45-bilete__card { display: flex; align-items: stretch; gap: 30px; padding: 20px; background: var(--p45-surface-white); border: 1px solid #a4a4a4; border-radius: 10px; } .p45-bilete__divider { flex: 0 0 1px; align-self: stretch; background: #a4a4a4; } /* --- Un zbor ----------------------------------------------------------- */ .p45-flight { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 20px; } /* Grupul durata+logo+rută e transparent pe desktop (gap-ul de 20px al zborului guvernează tot); pe mobil devine grup cu gap 10px (Figma 364-13316). */ .p45-flight__head { display: contents; } /* Durata zbor */ .p45-flight__duration { margin: 0; display: flex; align-items: center; gap: 5px; white-space: nowrap; } .p45-flight__duration-label { font: var(--p45-fw-medium) var(--p45-fs-p3) / 1.2 var(--p45-font); /* 14 Medium */ color: #6b7280; } .p45-flight__duration-value { font: var(--p45-fw-medium) var(--p45-fs-p1) / 1.2 var(--p45-font); /* 18 Medium */ color: var(--p45-text-blue); } /* Logo companie */ .p45-flight__airline { height: 25px; width: auto; object-fit: contain; } /* Rută */ .p45-flight__route { width: 100%; } .p45-flight__codes { display: flex; align-items: center; gap: 10px; } .p45-flight__code { flex: 0 0 auto; font: var(--p45-fw-extrabold) 25px / 1 var(--p45-font); /* 25 ExtraBold — din design */ color: var(--p45-text-blue); } .p45-flight__code:last-child { text-align: right; } /* Linia punctată cu avionul în mijloc */ .p45-flight__line { flex: 1 1 auto; position: relative; display: flex; align-items: center; justify-content: center; min-width: 40px; } .p45-flight__line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed var(--p45-border-blue); /* linie punctată albastră (din design) */ } .p45-flight__plane { position: relative; /* peste linie */ display: inline-flex; padding: 0 6px; /* mască albă ca linia să nu treacă prin avion */ background: var(--p45-surface-white); } .p45-flight__plane .p45-icon { width: 28px; height: 28px; color: var(--p45-text-blue); /* avionul iconsax, deja orientat spre dreapta */ } /* Orașe / aeroporturi (sub coduri) */ .p45-flight__places { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; } .p45-flight__place { flex: 0 1 47%; font: var(--p45-fw-regular) var(--p45-fs-p3) / 1.3 var(--p45-font); /* 14 */ color: rgba(0, 0, 0, 0.6); } .p45-flight__place--end { text-align: right; } /* Decolare / Aterizare */ .p45-flight__times { width: 100%; display: flex; justify-content: space-between; gap: 20px; } .p45-flight__time { display: flex; flex-direction: column; gap: 10px; } .p45-flight__time--end { align-items: flex-end; text-align: right; } .p45-flight__time-label { margin: 0; font: var(--p45-fw-medium) var(--p45-fs-p3) / 1.2 var(--p45-font); /* 14 Medium */ color: #6b7280; } .p45-flight__time-value { margin: 0; font: var(--p45-fw-medium) var(--p45-fs-p1) / 18px var(--p45-font); /* 18 Medium */ color: var(--p45-text-main); } /* --- Responsive: zborurile pe coloană pe mobil (Figma 364-13315) -------- */ @media (max-width: 767.98px) { .p45-bilete__title { font-size: 1.25rem; } /* 20px pe mobil */ .p45-bilete__card { flex-direction: column; gap: 20px; } .p45-bilete__divider { flex: 0 0 1px; align-self: auto; width: 100%; height: 1px; } /* Zbor: durata+logo+rută grupate la 10px, apoi 15px până la ore. */ .p45-flight { gap: 15px; } .p45-flight__head { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; } /* Durata: stivuită și centrată (Figma), nu pe un rând. */ .p45-flight__duration { flex-direction: column; gap: 10px; } .p45-flight__duration-label { font-size: var(--p45-fs-caption); } /* 12px (era 14px) */ .p45-flight__duration-value { font-size: var(--p45-fs-p2); } /* 16px (era 18px) */ .p45-flight__airline { height: 15px; } /* logo mai mic (era 25px) */ .p45-flight__code { font-size: 23px; } /* era 25px */ .p45-flight__plane .p45-icon { width: 20px; height: 20px; } /* era 28px */ .p45-flight__time-label { font-size: var(--p45-fs-caption); } /* 12px (era 14px) */ .p45-flight__time-value { font-size: var(--p45-fs-p2); } /* 16px (era 18px) */ } /* ========================================================================== INFORMATII IMPORTANTE (Figma: 400-9112) -------------------------------------------------------------------------- Titlu + paragraf intro, apoi listă de întrebări expandabile (accordion). Item: card #ebf3ff, întrebare (18 SemiBold) + icon cerc navy (add-circle închis / minus-circle deschis). La deschidere apare textul răspunsului. Depinde de: css/style.css (tokens, .p45-icon--add-circle/minus-circle). Toggle: js/main.js (initInfoImportante). Încarcă-l după style.css. Note: #ebf3ff (fundal card) — valoare din design, fără token. ========================================================================== */ .p45-info { display: flex; flex-direction: column; gap: 30px; width: 100%; color: var(--p45-text-main); font-family: var(--p45-font); letter-spacing: var(--p45-ls); } /* Intro (titlu + paragraf) */ .p45-info__intro { display: flex; flex-direction: column; gap: 15px; } /* Eyebrow „Pentru tine" — ascuns pe desktop (apare doar pe mobil). */ .p45-info__eyebrow { display: none; margin: 0; font: var(--p45-fw-semibold) var(--p45-fs-p2) / var(--p45-lh-body) var(--p45-font); /* 16 SemiBold */ letter-spacing: var(--p45-ls); color: var(--p45-text-blue); /* #0054e2 */ } /* Grup titlu+lead: transparent pe desktop (gap-ul de 15px al intro guvernează), devine grup cu gap 10px pe mobil (Figma 364-13371). */ .p45-info__heading-group { display: contents; } .p45-info__title { margin: 0; font: var(--p45-fw-extrabold) var(--p45-fs-h4) / var(--p45-lh-heading) var(--p45-font); /* 28 ExtraBold */ letter-spacing: var(--p45-ls); } .p45-info__lead { margin: 0; font: var(--p45-fw-regular) var(--p45-fs-p2) / 18px var(--p45-font); /* 16 Regular */ letter-spacing: var(--p45-ls); } /* Lista de întrebări */ .p45-info__list { display: flex; flex-direction: column; gap: 10px; } /* Un item (card) */ .p45-info__item { background: #ebf3ff; border-radius: 10px; padding: 20px; } /* Capul (întrebare + icon) */ .p45-info__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font-family: inherit; } .p45-info__q { font: var(--p45-fw-semibold) var(--p45-fs-p1) / 1.2 var(--p45-font); /* 18 SemiBold */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); } .p45-info__icon { flex: 0 0 auto; width: 24px; height: 24px; color: var(--p45-text-strong-blue); /* navy #001d70 */ } /* Corpul răspunsului (ascuns când e închis) */ .p45-info__body { display: none; } .p45-info__item.is-open .p45-info__body { display: block; margin-top: 15px; } .p45-info__text { margin: 0; font: var(--p45-fw-regular) var(--p45-fs-p2) / 19px var(--p45-font); /* 16 Regular */ letter-spacing: var(--p45-ls); } /* corp gol (răspuns încă necompletat) → nu lăsa spațiu la deschidere */ .p45-info__body:empty, .p45-info__text:empty { margin-top: 0; } /* --- Responsive (Figma 364-13371) -------------------------------------- */ @media (max-width: 767.98px) { .p45-info { gap: 20px; } /* era 30px */ .p45-info__eyebrow { display: block; } /* arătăm „Pentru tine" */ .p45-info__heading-group { display: flex; flex-direction: column; gap: 10px; } .p45-info__title { font-size: 1.25rem; } /* 20px */ .p45-info__lead { font-size: var(--p45-fs-p3); } /* 14px (era 16px) */ .p45-info__item { padding: 15px 10px; } /* era 20px */ .p45-info__q { font-size: var(--p45-fs-p2); } /* 16px (era 18px) */ .p45-info__text { font-size: var(--p45-fs-p3); } /* 14px (era 16px) */ } /* ========================================================================== DE CE SĂ NE ALEGI (Figma: 400-9986) -------------------------------------------------------------------------- Bandă full-width fundal #ebf3ff: titlu + intro și 3 carduri albe egale. Card: icon 50px (navy) + titlu (20 ExtraBold navy) pe un rând, descriere (16 Regular, lh 23px) și buton pill navy „Citeste mai multe". Depinde de: css/style.css (tokens, .p45-icon--world-ai/travel/card-pos). Bootstrap .container pentru alinierea cu restul paginii. Încarcă după style.css. Note: #ebf3ff (fundal bandă) — valoare din design, fără token. ========================================================================== */ .p45-why { width: 100%; padding: 60px 0; background: #ebf3ff; color: var(--p45-text-main); font-family: var(--p45-font); letter-spacing: var(--p45-ls); } .p45-why__inner { display: flex; flex-direction: column; gap: 30px; } /* Intro */ .p45-why__intro { display: flex; flex-direction: column; gap: 15px; } /* Eyebrow „Avantaje Paralela 45" — ascuns pe desktop (apare doar pe mobil). */ .p45-why__eyebrow { display: none; margin: 0; font: var(--p45-fw-semibold) var(--p45-fs-p2) / var(--p45-lh-body) var(--p45-font); /* 16 SemiBold */ letter-spacing: var(--p45-ls); color: var(--p45-text-blue); /* #0054e2 */ } /* Grup titlu+lead: transparent pe desktop (gap-ul de 15px al intro guvernează), devine grup cu gap 10px pe mobil (Figma 364-13413). */ .p45-why__heading-group { display: contents; } .p45-why__title { margin: 0; font: var(--p45-fw-extrabold) var(--p45-fs-h4) / var(--p45-lh-heading) var(--p45-font); /* 28 ExtraBold */ letter-spacing: var(--p45-ls); } .p45-why__lead { margin: 0; max-width: 925px; font: var(--p45-fw-regular) var(--p45-fs-p2) / 18px var(--p45-font); /* 16 Regular */ letter-spacing: var(--p45-ls); } /* Rândul de carduri */ .p45-why__cards { display: flex; align-items: stretch; gap: 15px; } /* Card */ .p45-why-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; padding: 15px; background: var(--p45-surface-white); border-radius: 10px; } .p45-why-card__top { display: flex; flex-direction: column; gap: 15px; } .p45-why-card__head { display: flex; align-items: center; gap: 15px; } .p45-why-card__icon { flex: 0 0 auto; width: 50px; height: 50px; color: var(--p45-text-strong-blue); /* navy #001d70 */ } .p45-why-card__title { margin: 0; font: var(--p45-fw-extrabold) 20px / 23px var(--p45-font); /* 20 ExtraBold — fără token */ letter-spacing: var(--p45-ls); color: var(--p45-text-strong-blue); /* navy #001d70 */ } .p45-why-card__text { margin: 0; font: var(--p45-fw-regular) var(--p45-fs-p2) / 23px var(--p45-font); /* 16 Regular */ letter-spacing: var(--p45-ls); } /* Buton pill navy */ .p45-why-card__btn { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: var(--p45-radius-pill); background: var(--p45-surface-strong-blue); /* navy #001d70 */ color: var(--p45-text-white); font: var(--p45-fw-bold) var(--p45-fs-p2) / 1.2 var(--p45-font); /* 16 Bold */ letter-spacing: var(--p45-ls); white-space: nowrap; text-decoration: none; cursor: pointer; transition: opacity var(--p45-transition); } @media (hover: hover) { .p45-why-card__btn:hover { opacity: 0.9; } } /* --- Responsive (Figma 364-13413): scroll orizontal de carduri --------- */ @media (max-width: 767.98px) { .p45-why { padding: 30px 0; } /* py-30 (era 40px) */ /* Container full-bleed ca rândul de carduri să poată derula pe toată lățimea */ .p45-why .container { max-width: 100%; padding-left: 0; padding-right: 0; } .p45-why__inner { gap: 15px; } /* intro → carduri: 15px (era 30px) */ .p45-why__intro { padding: 0 20px; } /* aliniat la 20px ca în Figma */ /* Eyebrow + grup titlu/lead */ .p45-why__eyebrow { display: block; } .p45-why__heading-group { display: flex; flex-direction: column; gap: 10px; } .p45-why__title { font-size: 1.25rem; } /* 20px (era 28px) */ .p45-why__lead { font-size: var(--p45-fs-p3); } /* 14px (era 16px) */ /* Rând de carduri: scroll orizontal, gap 20, padding 20 */ .p45-why__cards { flex-direction: row; gap: 20px; padding: 0 20px; overflow-x: auto; overflow-y: clip; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .p45-why__cards::-webkit-scrollbar { display: none; } .p45-why-card { flex: 0 0 258px; width: 258px; } /* lățime fixă, nu se micșorează */ /* Card: iconița deasupra titlului; titlu→descriere 20px */ .p45-why-card__head { flex-direction: column; align-items: flex-start; } .p45-why-card__top { gap: 20px; } .p45-why-card__text { font-size: var(--p45-fs-p3); } /* 14px (era 16px) */ .p45-why-card__btn { height: 39px; font-size: var(--p45-fs-p3); } /* 14px (era 16px) */ } /* ========================================================================== STICKY-CTA (Figma: 364-14011) — bară fixă jos pe mobil -------------------------------------------------------------------------- Card alb (border #707070, colțuri sus 10px) lipit de marginea de jos a ecranului. Apare (slide-up) când se ajunge la secțiunea descriere-hotel. Vizibilă doar <992px (unde panoul .p45-rezervare nu mai e sidebar fix). Depinde de: css/style.css (tokens). Toggle clasa .is-visible din main.js. Notă: #707070 (border) — valoare din design, fără token. ========================================================================== */ .p45-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: none; /* ascuns pe desktop (vezi media query) */ flex-direction: column; gap: 20px; padding: 20px; background: var(--p45-surface-white); border: 1px solid #707070; border-top-left-radius: 10px; border-top-right-radius: 10px; font-family: var(--p45-font); letter-spacing: var(--p45-ls); /* stare ascunsă: coborâtă sub ecran; .is-visible o aduce la 0 */ transform: translateY(100%); transition: transform var(--p45-transition); } @media (max-width: 991.98px) { .p45-sticky-cta { display: flex; } } .p45-sticky-cta.is-visible { transform: translateY(0); } /* Rând „Total plată" + preț */ .p45-sticky-cta__total { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; } .p45-sticky-cta__label { font: var(--p45-fw-semibold) var(--p45-fs-p2) / var(--p45-lh-body) var(--p45-font); /* 16 SemiBold */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); } .p45-sticky-cta__price { font: var(--p45-fw-bold) 1.375rem / var(--p45-lh-body) var(--p45-font); /* 22 Bold */ letter-spacing: var(--p45-ls); color: var(--p45-text-blue); text-align: right; white-space: nowrap; } /* Rând butoane */ .p45-sticky-cta__actions { display: flex; align-items: center; gap: 10px; width: 100%; } .p45-sticky-cta__btn { display: flex; align-items: center; justify-content: center; height: 40px; border: 1px solid transparent; border-radius: 5px; font: var(--p45-fw-extrabold) var(--p45-fs-p2) / 1 var(--p45-font); /* 16 ExtraBold */ letter-spacing: var(--p45-ls); white-space: nowrap; cursor: pointer; transition: background var(--p45-transition), color var(--p45-transition); } .p45-sticky-cta__btn--outline { flex: 1 1 0; /* crește și umple spațiul rămas */ min-width: 0; background: var(--p45-surface-white); border-color: var(--p45-border-blue); /* #0054e2 */ color: var(--p45-text-blue); } .p45-sticky-cta__btn--primary { flex: 0 0 165.5px; /* lățime fixă (din Figma) */ background: var(--p45-surface-brand-blue); color: var(--p45-text-white); } @media (hover: hover) { .p45-sticky-cta__btn--outline:hover { background: var(--p45-surface-brand-blue); color: var(--p45-text-white); } .p45-sticky-cta__btn--primary:hover { background: var(--p45-text-strong-blue); } } /* Varianta Cazare (Figma 513-12919): un singur buton REZERVĂ, pe toată lățimea (anulează lățimea fixă de 165.5px a butonului primar din varianta Sejur). */ .p45-sticky-cta--cazare .p45-sticky-cta__btn--primary { flex: 1 1 auto; } /* ========================================================================== sticky-cta-circuit — ajustări specifice variantei Circuit Se încarcă DUPĂ sticky-cta.css. Necesită clasa .p45-sticky-cta--circuit pe rădăcina componentei (sticky-cta-circuit.html). Circuit are un singur buton (REZERVĂ) care ocupă toată lățimea barei — spre deosebire de Sejur, unde butonul primar are lățime fixă lângă „PĂSTREAZĂ 48H". ========================================================================== */ .p45-sticky-cta--circuit .p45-sticky-cta__btn--primary { flex: 1 1 auto; width: 100%; } /* ========================================================================== Layout pagină PDP (template-4, DEV-325) -------------------------------------------------------------------------- Adaptare a grid-ului din documentations/theme 2/sejur.html la arhitectura de widget-uri CMS: copiii grid-ului sunt direct secțiunile emise de block-uri (nu există wrapper-e pe poziții). Ordinea vizuală e dată de `order` (auto-placement urmează ordinea modificată), iar sidebar-ul de rezervare e plasat explicit pe coloana 2, începând de pe rândul galeriei. ========================================================================== */ .p45-sejur__body { margin-top: 1.5rem; margin-bottom: 1.5rem; } /* Spațierea verticală se face prin margin-bottom pe items (NU row-gap): sidebar-ul ocupă explicit „2 / span 40" iar rândurile goale rămase ar aduna row-gap fantomă (~30px × rând gol) înaintea benzii finale. */ .p45-sejur__layout { display: grid; grid-template-columns: minmax(0, 1fr) 358px; column-gap: 30px; align-items: start; } .p45-sejur__layout > * { grid-column: 1; min-width: 0; margin-bottom: 30px; } /* Antet (breadcrumb + titlu) — TREBUIE să fie primul item auto-plasat (order cel mai mic dintre toate), altfel span-ul 1/-1 nu mai încape pe rândul 1 (singurul cu coloana 2 liberă) și cade sub tot conținutul. */ .p45-sejur__layout > .p45-top-info { grid-column: 1 / -1; order: -100; } /* Galeria — rândul 2, coloana stângă */ .p45-sejur__layout > .p45-sejur__gallery { order: -20; } /* Sidebar rezervare — coloana dreaptă, lipicios sub navbar; pornește de pe rândul galeriei și se întinde peste rândurile conținutului. */ .p45-sejur__layout > .p45-sejur__aside { grid-column: 2; grid-row: 2 / span 40; align-self: start; } /* Mobil/tabletă (<992px): o singură coloană, ordinea din Figma — antet, galerie, panou rezervare, apoi restul conținutului. */ @media (max-width: 991.98px) { .p45-sejur__layout { grid-template-columns: minmax(0, 1fr); } .p45-sejur__layout > .p45-sejur__aside { grid-column: 1; grid-row: auto; order: -10; position: static; } .p45-sejur__aside .p45-rezervare { width: 100%; } } @media (max-width: 767.98px) { .p45-top-info { padding-bottom: 0; } .p45-sejur__body { margin-top: 20px; } } /* Ordinea secțiunilor din coloana principală (auto-placement urmează ordinea modificată de `order`; DOM-ul vine din pozițiile de widget). */ .p45-sejur__layout > .p45-descriere-hotel { order: -5; } /* descriere după galerie/rezervare, înainte de camere */ .p45-sejur__layout > .p45-bilete { order: 5; } /* bilete de avion după hartă */ .p45-sejur__layout > .p45-descriere { order: 10; } /* acordeon condiții ÎNAINTEA FAQ-ului (DEV-346 #1) */ .p45-sejur__layout > .p45-info { order: 20; } /* FAQ (Informații importante) după condiții */ /* Banda „De ce să ne alegi" — ultimul rând, full-bleed peste container */ .p45-sejur__layout > .p45-why { grid-column: 1 / -1; order: 50; width: 100vw; margin-left: calc(50% - 50vw); } /* ========================================================================== sejur-photo-exotice — ajustări specifice galeriei Exotice 7+7 Se încarcă DUPĂ sejur-photo.css. Necesită clasa .p45-sejur-photo__hero--split pe hero (sejur-photo-exotice.html). Hero-ul (Figma 519-29829): două imagini egale (circuit | sejur) despărțite de o bandă galbenă #febe00 de 12px, cu insigna „7+7" — cerc galben 114px cu text albastru — centrată pe mijlocul benzii. Note: #febe00 (banda/insigna) — valoare din design, fără token. ========================================================================== */ .p45-sejur-photo__hero--split { position: relative; display: flex; gap: 12px; /* banda galbenă = fundalul vizibil în gap */ background: #febe00; } .p45-sejur-photo__hero--split img:not(.p45-sejur-photo__hero-current) { flex: 1 1 0; min-width: 0; width: 50%; border-radius: 10px; } /* Insigna „7+7" — cerc galben 114px, text albastru, centrat pe bandă */ .p45-sejur-photo__badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 114px; height: 114px; border-radius: 50%; background: #febe00; display: flex; align-items: center; justify-content: center; font: var(--p45-fw-bold) 42px / 1 var(--p45-font); letter-spacing: var(--p45-ls); color: var(--p45-text-blue); /* #0054e2 */ pointer-events: none; } /* Slide-ul curent al caruselului mobil (vezi initSejurHeroCarousel): acoperă hero-ul împărțit când utilizatorul trece de primul slide. */ .p45-sejur-photo__hero-current { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; } .p45-sejur-photo__hero-current[hidden] { display: none; } /* Mobil (Figma 519-36061): imaginile se așază vertical (circuit sus, sejur jos), banda galbenă devine orizontală, insigna scade, iar săgețile de carusel + contorul reapar — compoziția 7+7 e primul slide al caruselului. */ @media (max-width: 767.98px) { .p45-sejur-photo__hero--split { flex-direction: column; } .p45-sejur-photo__hero--split img:not(.p45-sejur-photo__hero-current) { width: 100%; height: 50%; min-height: 0; } .p45-sejur-photo__badge { width: 52px; height: 52px; font-size: 20px; } /* Controalele stau peste slide-ul curent (care are z-index: 1) */ .p45-sejur-photo__hero--split .p45-sejur-photo__hero-controls { z-index: 2; } } /* Containerul biletelor de avion (populat AJAX cu p45-bilete) — după hartă */ .p45-sejur__layout > .p45-sejur__charters { order: 5; } .p45-sejur__layout > .p45-sejur__charters:empty { display: none; } /* Status suplimentar cameră: indisponibil (roșu) — vechiul badge "danger" */ .p45-room__status--unavailable { color: #b42318; } .p45-room__status--unavailable .p45-room__dot { background: #d92d20; } .p45-room.is-disabled { opacity: .6; pointer-events: auto; } .p45-room.is-disabled .p45-room__btn { pointer-events: none; opacity: .5; } /* Antetul "Recomandarea noastră" de deasupra listei de camere (AJAX) */ .p45-camere__reco { margin: 0 0 4px; } .p45-camere__reco-title { font-weight: var(--p45-fw-semibold); font-size: var(--p45-fs-h6); margin: 0; color: var(--p45-text-primary, #101828); } .p45-camere__reco-sub { margin: 0; color: var(--p45-text-grey, #667085); font-size: var(--p45-fs-body-sm, .875rem); } /* Butonul "Vezi toate camerele" + cardurile de switch pack/individual */ .p45-camere__more-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--p45-border, #d0d5dd); background: #fff; border-radius: var(--p45-radius-sm, 8px); padding: 8px 16px; font-weight: var(--p45-fw-semibold); cursor: pointer; } .p45-camere__switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--p45-border, #d0d5dd); border-radius: var(--p45-radius, 12px); padding: 16px; background: #f9fafb; } /* Circuit: descrierea traseului — prima secțiune din coloana principală */ .p45-sejur__layout > .p45-descriere-circuit { order: -6; } /* Selectoarele din "Detalii vacanță" păstrează clasa .search-bar doar ca hook JS (devteam-searchbox / update rooms); anulăm stilul global de searchbox din devteam.css (card alb rotunjit cu umbră) — în design selectoarele sunt pastile individuale cu bordură, direct pe fundalul bleu al cardului. */ .p45-rezervare .p45-rezervare__selectors.search-bar { border-radius: 0; padding: 0; background-color: transparent; box-shadow: none; } /* Banda full-bleed (.p45-why) folosește 100vw, care include lățimea scrollbar-ului vertical → ~15px de overflow orizontal. clip (nu hidden) taie surplusul fără să creeze un container de scroll. */ main.p45-sejur { overflow-x: clip; } /* Banda "De ce să ne alegi" e ultima secțiune — fără margini reziduale între ea și footer. */ .p45-sejur__layout > .p45-why { margin-bottom: 0; } .p45-sejur__body { margin-bottom: 0; } /* Leaflet Routing Machine: ascundem panourile de instrucțiuni (căsuțele albe suprapuse pe hartă) — pe PDP arătăm doar traseul desenat. */ .p45-descriere-circuit__map .leaflet-routing-container, .p45-itinerar__map .leaflet-routing-container { display: none; } /* ========================================================================== DEV-346 (feedback #2) — corecții vizuale + comportamente ========================================================================== */ /* Scroll lock pentru modalele p45 (lightbox/itinerar) — era în overlay.css, care nu a fost portat. Fără el, fundalul se derulează sub modal pe mobil. */ body.p45-no-scroll { overflow: hidden; } /* (3) Breadcrumb-ul fără aspect de link (site-ul pune albastru + underline) */ .p45-top-info__breadcrumb a, .p45-top-info__crumbs a { color: inherit; text-decoration: none; } .p45-top-info__crumbs a:hover { color: var(--p45-primary); text-decoration: none; } /* (4+5) Acțiunile Distribuie/Salvează: fără underline, conținut aliniat stânga, spațiu mai mare icon–text; pe hover text + icon albe (a:hover global din devteam.css altfel câștigă cu albastru + underline). */ .p45-top-info__action { justify-content: flex-start; gap: 10px; text-decoration: none !important; } @media (hover: hover) { .p45-top-info__action:hover, .p45-top-info__action:hover * { color: var(--p45-text-white) !important; text-decoration: none !important; } } /* (16b mobil) Breadcrumb lung: o singură linie cu elipsă, ca iconițele Distribuie/Salvează să rămână mereu vizibile în dreapta. */ @media (max-width: 767.98px) { .p45-top-info__breadcrumb { min-width: 0; overflow: hidden; } .p45-top-info__crumbs { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .p45-top-info__actions { flex-shrink: 0; } @media (hover: hover) { .p45-top-info__action:hover, .p45-top-info__action:hover * { color: var(--p45-text-blue) !important; } } } /* (7+8) Spații mai compacte în sidebar: titlu → selectoare, titlu → servicii, tarif → unitate. */ .p45-rezervare__group { gap: 10px; } .p45-rezervare__card { gap: 15px; } .p45-rezervare__price-row { gap: 4px; } .p45-rezervare__price-unit { margin-top: -6px; } /* (10) „Păstrează oferta 48h" în culoarea box-ului (mai discret) */ .p45-rezervare__btn--outline { background: transparent; } /* (9) Rândul camerei: numele + „Schimbă>>" pe aceeași linie */ .p45-rezervare__room-row { align-items: center; } .p45-rezervare__room { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; } .p45-rezervare__room-name { min-width: 0; overflow-wrap: anywhere; } /* (13) Selectarea camerei nu mai mișcă layout-ul: border rămâne 1px, accentul vine din box-shadow (înlocuiește border-ul de 2px al temei). */ .p45-room.is-selected { border-width: 1px; border-color: var(--p45-primary); box-shadow: 0 0 0 1px var(--p45-primary); } /* (14a) Iconul +/− al FAQ-ului e derivat din STAREA itemului (nu din swap-ul de clase din JS) — nu mai poate dispărea. */ .p45-info__item.is-open .p45-info__icon { --p45-icon: url("/frontend/theme2/icons/minus-circle.svg"); } /* (14b) Tranziții la deschiderea/închiderea acordeoanelor (FAQ + condiții). Trecem de la display:none la grid-rows 0fr→1fr (animabil). */ .p45-info__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease, margin-top 0.25s ease; margin-top: 0; } .p45-info__item.is-open .p45-info__body { grid-template-rows: 1fr; margin-top: 15px; } .p45-info__body > * { overflow: hidden; min-height: 0; } .p45-descriere__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease, padding-top 0.25s ease; padding-top: 0; } .p45-descriere__item.is-open .p45-descriere__body { display: grid; grid-template-rows: 1fr; padding-top: 5px; } .p45-descriere__body > * { overflow: hidden; min-height: 0; } /* (15) Hover pe „Citește mai multe": textul rămâne alb, butonul se deschide */ .p45-why-card__btn:hover { background: #1540ba; color: var(--p45-text-white); } /* (17 mobil) Lightbox: butonul de închidere mereu vizibil */ .p45-gallery__close { display: inline-flex !important; z-index: 5; } /* (17b mobil) Panourile din offcanvas: radius 10px, fără umbră, fără bara dintre iconiță și text la input-uri. */ #hotelSearchMobile .calendar-container, #hotelSearchMobile .travellers-section, #tourSearchMobile .travellers-section { border-radius: 10px !important; box-shadow: none !important; border: 1px solid var(--p45-border, #d0d5dd); } #hotelSearchMobile .input-group-text, #tourSearchMobile .input-group-text { background: #fff; border-right: 0; } #hotelSearchMobile .input-group .form-control, #tourSearchMobile .input-group .form-control { border-left: 0; }