:root { /* Brand Colors */ --primary: #0054E2; --bs-btn-bg: #0054E2; --bs-btn-border-color: #0054E2; --bs-primary-rgb: 0, 84, 226; --secondary: #9ADEFA; --bs-secondary-rgb: 154, 222, 250; --bs-link-color-rgb: 0, 84, 226; --bs-btn-hover-bg: transparent; --cyan: #00B1FF; --cyan-30: #00B1FF4D; --turqoise: #00CECE; --t100: #C5EEF0; --b600: #085EB4; --dark: #707070; /* Gradient */ --gradient0deg: linear-gradient(0deg, var(--cyan), var(--turqoise)); --gradient45deg: linear-gradient(45deg, var(--cyan), var(--turqoise)); /* Primary */ --primary-25: #FBFCFE; --primary-50: #F1F6FD; --primary-100: #E0EBF9; --primary-200: #C9DDF4; --primary-300: #A3C7ED; --primary-400: #77A8E3; --primary-500: #578BDA; --primary-600: #4370CD; --primary-700: #3a5ebb; --primary-800: #30478D; --primary-900: #2E437A; /* Gray */ --gray-25: #FCFCFD; --gray-50: #F9FAFB; --gray-100: #F2F4F7; --gray-200: #EAECF0; --gray-300: #D0D5DD; --gray-400: #98A2B3; --gray-500: #667085; --gray-600: #475467; --gray-700: #344054; --gray-800: #1D2939; --gray-900: #101828; /* Green */ --success-25: #F6FEF9; --success-50: #ECFDF3; --success-100: #D1FADF; --success-200: #A6F4C5; --success-300: #6CE9A6; --success-400: #32D583; --success-500: #12B76A; --success-600: #039855; --success-700: #027A48; --success-800: #05603A; --success-900: #054F31; /* Warning */ --warning-25: #FFFCF5; --warning-50: #FFFAEB; --warning-100: #FEF0C7; --warning-200: #FEDF89; --warning-300: #FEC84B; --warning-400: #FDB022; --warning-500: #F79009; --warning-600: #DC6803; --warning-700: #B54708; --warning-800: #93370D; --warning-900: #7A2E0E; /* Danger */ --danger-25: #FFFBFA; --danger-50: #FEF3F2; --danger-100: #FEE4E2; --danger-200: #FECDCA; --danger-300: #FDA29B; --danger-400: #F97066; --danger-500: #F04438; --danger-600: #D92D20; --danger-700: #B42318; --danger-800: #912018; --danger-900: #7A271A; --base-white: #F9FAFB; --white: #fff; --translucent-white-65: #FFFFFFA6; --radius-16: 16px; --bs-box-shadow: 0 1.1rem 1rem rgba(0, 0, 0, 0.15); --font: "Mukta", sans-serif; ; --font-highlight: "Allison", cursive; --dev-form-check-icon: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='19' height='19' rx='9.5' fill='%234370CD'/%3E%3Crect x='0.5' y='0.5' width='19' height='19' rx='9.5' stroke='%234370CD'/%3E%3Cpath d='M14.6673 6.5L8.25065 12.9167L5.33398 10' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); --dev-bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash-lg'%3E%3Cpath fill-rule='evenodd' d='M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8Z'/%3E%3C/svg%3E"); --dev-bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus-lg'%3E%3Cpath fill-rule='evenodd' d='M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z'/%3E%3C/svg%3E"); --dev-breadcrumb-icon: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.850098 0.5L7.0001 6.65C7.04792 6.69489 7.08602 6.74911 7.11212 6.80931C7.13812 6.8695 7.15162 6.9344 7.15162 7C7.15162 7.0656 7.13812 7.1305 7.11212 7.19069C7.08602 7.25089 7.04792 7.30511 7.0001 7.35L0.850098 13.5' stroke='%23101828' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") } .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .gallery img { width: 100%; height: auto; display: block; border-radius: 8px; } body { font-family: var(--font); font-optical-sizing: auto; } a:hover { color: var(--primary-600) !important; } .btn { /* padding: .6rem 2rem; */ /* border: none; */ } .btn-hover { background-color: var(--bs-btn-hover-bg) !important; } .btn-primary { --bs-btn-bg: #0054E2; --bs-btn-border-color: #0054E2; color: var(--white); font-weight: 600; } .btn-primary:hover { background-color: var(--primary-700) !important; color: #fff !important; } .btn-secondary { background-color: var(--primary-50) !important; border: 1px solid var(--primary-200); color: var(--primary-500); font-weight: 600; } .btn-secondary:hover { background-color: var(--primary-100) !important; color: var(--primary-500); } .btn-ghost:hover { background-color: var(--gray-100) !important; } .border-dark { border-color: var(--dark) !important; } .bg-base-white { background-color: var(--base-white) !important; } .bg-primary-100 { background-color: var(--primary-100) !important; } .bg-primary-200 { background-color: var(--primary-200) !important; } .bg-primary-300 { background-color: var(--primary-300) !important; } .bg-primary-400 { background-color: var(--primary-400) !important; } .bg-primary-500 { background-color: var(--primary-500) !important; } .bg-primary-600 { background-color: var(--primary-600) !important; } .bg-primary-700 { background-color: var(--primary-700) !important; } .bg-primary-800 { background-color: var(--primary-800) !important; } .bg-primary-900 { background-color: var(--primary-900) !important; } .bg-block-blue { background-color: var(--p45-surface-block-blue) !important; /* #f1f6f8 — ca .p45-top-section (searchbox) */ } .bg-gray-50 { background-color: var(--gray-50) !important; } .bg-gray-100 { background-color: var(--gray-100) !important; } .bg-gray-200 { background-color: var(--gray-200) !important; } .bg-gray-300 { background-color: var(--gray-300) !important; } .bg-gray-400 { background-color: var(--gray-400) !important; } .bg-gray-500 { background-color: var(--gray-500) !important; } .bg-gray-600 { background-color: var(--gray-600) !important; } .bg-gray-700 { background-color: var(--gray-700) !important; } .bg-gray-800 { background-color: var(--gray-800) !important; } .bg-gray-900 { background-color: var(--gray-900) !important; } .bg-success-25 { background-color: var(--success-25) !important; } .bg-success-50 { background-color: var(--success-50) !important; } .bg-success-100 { background-color: var(--success-100) !important; } .bg-success-200 { background-color: var(--success-200) !important; } .bg-success-300 { background-color: var(--success-300) !important; } .bg-success-400 { background-color: var(--success-400) !important; } .bg-success-500 { background-color: var(--success-500) !important; } .bg-success-600 { background-color: var(--success-600) !important; } .bg-success-700 { background-color: var(--success-700) !important; } .bg-success-800 { background-color: var(--success-800) !important; } .bg-success-900 { background-color: var(--success-900) !important; } .bg-warning-25 { background-color: var(--warning-25) !important; } .bg-warning-50 { background-color: var(--warning-50) !important; } .bg-warning-100 { background-color: var(--warning-100) !important; } .bg-warning-200 { background-color: var(--warning-200) !important; } .bg-warning-300 { background-color: var(--warning-300) !important; } .bg-warning-400 { background-color: var(--warning-400) !important; } .bg-warning-500 { background-color: var(--warning-500) !important; } .bg-warning-600 { background-color: var(--warning-600) !important; } .bg-warning-700 { background-color: var(--warning-700) !important; } .bg-warning-800 { background-color: var(--warning-800) !important; } .bg-warning-900 { background-color: var(--warning-900) !important; } .bg-danger-25 { background-color: var(--danger-25) !important; } .bg-danger-50 { background-color: var(--danger-50) !important; } .bg-danger-100 { background-color: var(--danger-100) !important; } .bg-danger-200 { background-color: var(--danger-200) !important; } .bg-danger-300 { background-color: var(--danger-300) !important; } .bg-danger-400 { background-color: var(--danger-400) !important; } .bg-danger-500 { background-color: var(--danger-500) !important; } .bg-danger-600 { background-color: var(--danger-600) !important; } .bg-danger-700 { background-color: var(--danger-700) !important; } .bg-danger-800 { background-color: var(--danger-800) !important; } .bg-danger-900 { background-color: var(--danger-900) !important; } .bg-white-65 { background-color: var(--translucent-white-65) !important; } .text-white-65 { color: var(--translucent-white-65) !important; } .text-primary-100 { color: var(--primary-100); } .text-primary-200 { color: var(--primary-200); } .text-primary-300 { color: var(--primary-300); } .text-primary-400 { color: var(--primary-400); } .text-primary-500 { color: var(--primary-500); } .text-primary-600 { color: var(--primary-600); } .text-primary-700 { color: var(--primary-700); } .text-primary-800 { color: var(--primary-800); } .text-primary-900 { color: var(--primary-900); } .text-white-65 { color: var(--translucent-white-65) !important; } .text-gray-100 { color: var(--gray-100); } .text-gray-200 { color: var(--gray-200); } .text-gray-300 { color: var(--gray-300); } .text-gray-400 { color: var(--gray-400); } .text-gray-500 { color: var(--gray-500); } .text-gray-600 { color: var(--gray-600); } .text-gray-700 { color: var(--gray-700); } .text-gray-800 { color: var(--gray-800); } .text-gray-900 { color: var(--gray-900); } .text-success-25 { color: var(--success-25) !important; } .text-success-50 { color: var(--success-50) !important; } .text-success-100 { color: var(--success-100) !important; } .text-success-200 { color: var(--success-200) !important; } .text-success-300 { color: var(--success-300) !important; } .text-success-400 { color: var(--success-400) !important; } .text-success-500 { color: var(--success-500) !important; } .text-success-600 { color: var(--success-600) !important; } .text-success-700 { color: var(--success-700) !important; } .text-success-800 { color: var(--success-800) !important; } .text-success-900 { color: var(--success-900) !important; } .text-warning-100 { color: var(--warning-100) !important; } .text-warning-200 { color: var(--warning-200) !important; } .text-warning-300 { color: var(--warning-300) !important; } .text-warning-400 { color: var(--warning-400) !important; } .text-warning-500 { color: var(--warning-500) !important; } .text-warning-600 { color: var(--warning-600) !important; } .text-warning-700 { color: var(--warning-700) !important; } .text-warning-800 { color: var(--warning-800) !important; } .text-warning-900 { color: var(--warning-900) !important; } .text-danger-100 { color: var(--danger-100) !important; } .text-danger-200 { color: var(--danger-200) !important; } .text-danger-300 { color: var(--danger-300) !important; } .text-danger-400 { color: var(--danger-400) !important; } .text-danger-500 { color: var(--danger-500) !important; } .text-danger-600 { color: var(--danger-600) !important; } .text-danger-700 { color: var(--danger-700) !important; } .text-danger-800 { color: var(--danger-800) !important; } .text-danger-900 { color: var(--danger-900) !important; } .border-primary-100 { border-color: var(--primary-100) !important; } .border-primary-200 { border-color: var(--primary-200) !important; } .border-primary-300 { border-color: var(--primary-300) !important; } .border-primary-400 { border-color: var(--primary-400) !important; } .border-primary-500 { border-color: var(--primary-500) !important; } .border-primary-600 { border-color: var(--primary-600) !important; } .border-primary-700 { border-color: var(--primary-700) !important; } .border-primary-800 { border-color: var(--primary-800) !important; } .border-primary-900 { border-color: var(--primary-900) !important; } .border-gray-100 { border-color: var(--gray-100) !important; } .border-gray-200 { border-color: var(--gray-200) !important; } .border-gray-300 { border-color: var(--gray-300) !important; } .border-gray-400 { border-color: var(--gray-400) !important; } .border-gray-500 { border-color: var(--gray-500) !important; } .border-gray-600 { border-color: var(--gray-600) !important; } .border-gray-700 { border-color: var(--gray-700) !important; } .border-gray-800 { border-color: var(--gray-800) !important; } .border-gray-900 { border-color: var(--gray-900) !important; } .border-success-25 { border-color: var(--success-25) !important; } .border-success-50 { border-color: var(--success-50) !important; } .border-success-100 { border-color: var(--success-100) !important; } .border-success-200 { border-color: var(--success-200) !important; } .border-success-300 { border-color: var(--success-300) !important; } .border-success-400 { border-color: var(--success-400) !important; } .border-success-500 { border-color: var(--success-500) !important; } .border-success-600 { border-color: var(--success-600) !important; } .border-success-700 { border-color: var(--success-700) !important; } .border-success-800 { border-color: var(--success-800) !important; } .border-success-900 { border-color: var(--success-900) !important; } .border-warning-100 { border-color: var(--warning-100) !important; } .border-warning-200 { border-color: var(--warning-200) !important; } .border-warning-300 { border-color: var(--warning-300) !important; } .border-warning-400 { border-color: var(--warning-400) !important; } .border-warning-500 { border-color: var(--warning-500) !important; } .border-warning-600 { border-color: var(--warning-600) !important; } .border-warning-700 { border-color: var(--warning-700) !important; } .border-warning-800 { border-color: var(--warning-800) !important; } .border-warning-900 { border-color: var(--warning-900) !important; } .border-danger-100 { border-color: var(--danger-100) !important; } .border-danger-200 { border-color: var(--danger-200) !important; } .border-danger-300 { border-color: var(--danger-300) !important; } .border-danger-400 { border-color: var(--danger-400) !important; } .border-danger-500 { border-color: var(--danger-500) !important; } .border-danger-600 { border-color: var(--danger-600) !important; } .border-danger-700 { border-color: var(--danger-700) !important; } .border-danger-800 { border-color: var(--danger-800) !important; } .border-danger-900 { border-color: var(--danger-900) !important; } .bg-gradient-0deg { background: var(--gradient0deg); } .bg-gradient-45deg { background: var(--gradient45deg); } .rounded { border-radius: var(--radius-16); } label { font-size: .9rem; font-weight: 500; color: var(--gray-600); } .dropdown-item { margin: 5px auto; /* padding: 10px 15px!important; */ padding: 6px 8px; white-space: normal; font-weight: medium; border-radius: 6px; } @media (min-width: 576px) { .dropdown-menu { width: 350px; } } .dropdown-menu li { margin: 10px; padding: 0 auto; } footer .nav-item .nav-link { color: #fff; font-weight: 600; } /* .navbar-nav.nav-item .nav-link { color: #000; font-weight: 600; } */ .navbar-white-header .nav-item .nav-link { color: #000; font-weight: 600; } @media (min-width: 992px) { .navbar-transparent-header .nav-item .nav-link { color: #fff; font-weight: 600; } } @media (min-width: 992px) { .navbar-expand-lg .navbar-nav .nav-link { padding: 10px 14px !important; } } .card-img-top { border-top-left-radius: 16px; border-top-right-radius: 16px; } #header { transition: top .3s ease; } #header.navbar-white-header { transition: all .3s ease; /* background-color: var(--bs-body-bg); */ background-color: rgba(255, 255, 255); /* backdrop-filter: saturate(180%) blur(10px); */ } #header.navbar-transparent-header { background-color: transparent; transition: all .3s ease; } #header.navbar-white-header .bi, #header.navbar-white-header .dropdown button, #header.navbar-white-header .main-menu-item { /* color: #000 !important; */ } #header.navbar-white-header .bi-list { color: #000 !important; } #header.navbar-white-header .logo-brand { color: #000 !important; } .card-img-scale .card-img-scale-wrapper { -webkit-transform: translateZ(0); transform: translateZ(0); position: relative; overflow: hidden; height: 100%; width: 100%; } .card-img-scale:hover img { -webkit-transform: scale(1.01); transform: scale(1.01); } .card-img-scale img { will-change: transform; -webkit-transition: all .5s ease; transition: all .5s ease; -webkit-transform: scale(11); transform: scale(1); } #main-search .nav-pills .nav-link.active, .nav-pills .show>.nav-link { background-color: var(--white) !important; color: var(--primary-700) !important; } #main-search .fade { transition: none; } #main-search .dropdown input[aria-expanded="true"]>.search-bar { border-bottom-left-radius: 0px; } .form-check-input:checked { background-color: var(--primary-600) !important; border-color: var(--primary-600); } .form-switch .form-check-input { height: 1.2em; background-color: var(--gray-100); border-color: transparent; --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255%29'/%3e%3c/svg%3e"); } .form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255%29'/%3e%3c/svg%3e"); } .form-check-input:checked[type=radio] { --bs-form-check-bg-image: var(--dev-form-check-icon); } .form-check-input { width: 1.2em; height: 1.2em; background-size: inherit; } .list-group-item:hover:not(disabled) { cursor: pointer; } .highlight { font-family: var(--font-highlight); color: var(--warning-200); font-weight: 400; font-style: normal; } .highlight-info { font-family: var(--font-highlight); color: var(--primary-200); font-weight: 400; font-style: normal; } .highlight-success { font-family: var(--font-highlight); color: var(--success-100); font-weight: 400; font-style: normal; } .highlight-danger { font-family: var(--font-highlight); color: var(--danger-100); font-weight: 400; font-style: normal; } @media (min-width: 992px) { .highlight, .highlight-info, .highlight-success, .highlight-danger { font-size: 10rem; } } @media (min-width: 992px) { .rounded-bg { background-position: 100% 100%; background-size: cover; background-repeat: no-repeat; min-height: 20px; } } @media (max-width: 992px) { .rounded-bg { min-height: 200px; } } .square-corner-start { border-bottom-left-radius: 0px !important; } .square-corner-end { border-bottom-right-radius: 0px !important; } .nav-pills .nav-link { color: var(--gray-500); font-weight: 600; padding: 7px 12px; } .nav-pills .nav-link.active, .nav-pills .show>.nav-link { color: var(--primary-700); font-weight: 600; background-color: var(--primary-50); } .btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active { background-color: var(--gray-100); border-color: var(--gray-200); } .dropdown-item.active, .dropdown-item:active { color: var(--gray-900); text-decoration: none; background-color: var(--gray-200); } @media only screen and (min-width: 768px) { .owl-prev { width: 20px; height: auto; position: absolute; bottom: 15px; right: 70px; display: block !important; font-family: var(--font); font-size: 30px !important; } } @media only screen and (max-width: 768px) { .owl-prev { width: 20px; height: auto; position: absolute; bottom: 15px; right: 70px; display: block !important; font-family: var(--font); font-size: 30px !important; } } @media only screen and (min-width: 768px) { .owl-next { width: 20px; height: auto; position: absolute; bottom: 15px; right: 35px; display: block !important; font-family: var(--font); font-size: 30px !important; } } @media only screen and (maX-width: 768px) { .owl-next { width: 20px; height: auto; position: absolute; bottom: 15px; right: 35px; display: block !important; font-family: var(--font); font-size: 30px !important; } } .owl-prev i, .owl-next i { transform: scale(1, 6); color: #fff; } .owl-theme .owl-nav [class*=owl-]:hover { background: transparent; color: #FFF; text-decoration: none; } span.fa.fa-chevron-right.hidden-md-down:hover { color: var(--secondary) !important; font-size: 25px !important; } span.fa.fa-chevron-left.hidden-md-down:hover { color: var(--secondary-text) !important; font-size: 25px !important; } .owl-theme .owl-dots .owl-dot span { width: 25px; height: 3px; margin: 5px 10px; background: #c7c7c7; display: block; -webkit-backface-visibility: visible; transition: opacity .2s ease; border-radius: 0px; } .owl-theme .owl-nav [class*=owl-] { color: #FFF; font-size: 14px; margin: 0px; padding: 0px; background: transparent; display: inline-block; cursor: pointer; border-radius: 3px; } .owl-stage { display: flex; align-items: center; } .searchbox-container { min-height: 60dvh; padding-top: 50px; background-position: center; background-size: cover; background-repeat: no-repeat; } @media screen and (max-width: 768px) { .searchbox-container { min-height: 40dvh; } } .bg { background-position: center; background-size: cover; background-repeat: no-repeat; } .bg-blur-dark { background-color: rgba(0, 0, 0, 0.2); } .bg-blur-light { background-color: rgba(255, 255, 255, 0.4); } .bg-1 { background-image: url('/dir/fundal/1.jpg?v=2'); } .bg-2 { background-image: url('/dir/fundal/2.jpg?v=2'); } .bg-3 { background-image: url('/dir/fundal/3.jpg?v=2'); } .bg-4 { background-image: url('/dir/fundal/4.jpg?v=2'); } .bg-5 { background-image: url('/dir/fundal/5.jpg?v=2'); } .bg-6 { background-image: url('/dir/fundal/6.jpg?v=2'); } .bg-7 { background-image: url('/dir/fundal/7.jpg?v=2'); } .bg-8 { background-image: url('/dir/fundal/8.jpg?v=2'); } .bg-9 { background-image: url('/dir/fundal/9.jpg?v=2'); } .bg-10 { background-image: url('/dir/fundal/10.jpg?v=2'); } .selectable { cursor: pointer; } .selectable:hover { background-color: var(--gray-200); border-radius: var(--bs-border-radius); } .jcalendar .jcalendar-content { top: 12px !important; left: -13px !important; border-bottom-left-radius: var(--bs-border-radius-xxl); border-bottom-right-radius: var(--bs-border-radius-xxl); box-shadow: var(--bs-box-shadow) !important; } .jcalendar .jcalendar-container { top: 0px !important; } .jcalendar-table>table>tbody td.jcalendar-set-month { padding: 25px 30px; margin: 3px; border-radius: 5px; color: #084298; } .jcalendar-table>table>tbody td.jcalendar-set-month:hover { background-color: #eee; } .jcalendar-table>table>tbody td.jcalendar-set-month.jcalendar-disabled:hover { background-color: #fff; } .jcalendar-table>table>tbody td.jcalendar-set-month.jcalendar-disabled { color: #ccc; } .jcalendar-table>table>tbody td.jcalendar-set-month::before { content: ''; display: block; color: #084298; width: 24px; height: 24px; margin-bottom: 8px; background-image: url('data:image/svg+xml,'); background-size: contain; background-repeat: no-repeat; text-align: center; } .jcalendar-table>table>tbody td.jcalendar-set-month.jcalendar-disabled::before { color: #ccc; background-image: url('data:image/svg+xml,'); } .jcalendar-controls { display: none; } .offcanvas.offcanvas-bottom.mobileOffcanvas { height: 100svh !important; } .submenu-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: white; transform: translateX(-100%); transition: transform 0.4s ease; z-index: 100; } .submenu-container.active { transform: translateX(0); } #mainMenu { position: relative; z-index: 10; } .hidden { transform: translateX(100%); } .summary-dropdown-travellers { width: 20rem !important; top: 100% !important; right: auto !important; left: 50% !important; } .summary-dropdown-calendar { top: 100% !important; right: auto !important; /* left: 50%!important; */ } @media screen and (max-width: 768px) { .dropdown-menu.shadow { box-shadow: none !important; } } .bg-main-menu { background-color: rgba(0, 0, 0, 0.5) !important; } .secondary-search .scrollable-tabs { overflow-x: auto; white-space: nowrap; } .secondary-search .tab-btn { flex: 1 1 auto; display: inline-block; text-align: center; } .secondary-search .search-bar { border-radius: 50px; padding: 15px; background-color: #fff; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); } .secondary-search .search-input { border: none; outline: none; width: 100%; } .secondary-search .search-input:focus { box-shadow: none; } .secondary-search .search-bar input { padding: 0px; } .upperBorder { background: var(--gray-200) !important; } .active .upperBorder { background: var(--primary-600) !important; } .active .upperBorder~div { color: var(--primary-600); } #facturareTab .nav-item .active { color: var(--gray-700); background: var(--white); } .scrollable-tabs { overflow-x: auto; white-space: nowrap; } .tab-btn { flex: 1 1 auto; display: inline-block; text-align: center; } .search-bar { border-radius: 50px; padding: 15px; background-color: #fff; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); } .search-input { border: none; outline: none; width: 100%; } .search-input:focus { box-shadow: none; } .search-bar input { padding: 0px; } .p45-popular-img { height: 100px; } .border-md-end { border-right: none; } @media (min-width: 768px) { .p45-popular-img { height: 150px; } .border-md-end { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .border-md-top-0 { border-top: none !important; } } .text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .text-truncate-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } #custom-pagination .page-link { position: relative; display: block; padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x); font-size: var(--bs-pagination-font-size); color: var(--gray-500); text-decoration: none; background-color: var(--bs-pagination-bg); border: none; border-radius: 50%; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; } #custom-pagination .active>.page-link, .page-link.active { z-index: 3; color: var(--gray-900); padding: 5px 14px; background-color: var(--gray-50); border: none; } .alert { padding: 10px; font-weight: 500; font-size: 14px; } .alert.alert-success { border-color: var(--success-500); background-color: var(--success-500); color: var(--white); } .alert .bi { font-size: 20px; margin-right: 5px; } .card-charter-acasa { min-height: 450px; } .main-menu .navbar-nav .nav-link { font-size: 0.9rem; } @media (max-width: 992px) { .main-menu .navbar-nav .nav-link { font-size: 1.3rem; } .main-menu .navbar-nav { background-color: #F7FAFE; } .main-menu .navbar-nav .nav-link.show { color: #fff; background-color: var(--primary); } .main-menu .navbar-nav .nav-link.show:hover { color: #fff !important; background-color: var(--primary); } .main-menu .navbar-nav .nav-link.dropdown-toggle.show:hover:after { border-color: #fff; } .main-menu .navbar-nav .dropdown-toggle::after { right: 40%; } } .search-type-content { height: 100%; overflow-x: hidden; overflow-y: auto; } /* Desktop Megamenu */ @media (min-width: 992px) { .navbar .dropdown:has(.megamenu) { position: static; } .navbar .dropdown-menu.megamenu { position: fixed; left: 50%; transform: translateX(-50%); width: 80vw; max-width: 1400px; margin: 0; top: 100%; margin-top: 0.65rem; } /* Arrow styles - megamenu */ .dropdown-menu.megamenu::before { content: ''; position: absolute; top: -10px; left: var(--arrow-left, 50%); transform: translateX(-50%); border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #ffffff; z-index: 1; } /* Shadow behind arrow to match dropdown shadow */ .dropdown-menu.megamenu::after { content: ''; position: absolute; top: -11px; left: var(--arrow-left, 50%); transform: translateX(-50%); border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 11px solid rgba(0, 0, 0, 0.1); z-index: 0; } /* Arrow styles - dropdown normal */ .navbar .dropdown-menu:not(.megamenu) { margin-top: 19px; overflow: visible; } .navbar .dropdown-menu:not(.megamenu)::before { content: ''; position: absolute; top: -10px; right: 5%; transform: translateX(-50%); border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #ffffff; z-index: 1; } } /* Mobile Menu Styles - remains the same */ @media (max-width: 991.98px) { .navbar .dropdown-menu { position: static !important; float: none; width: 100%; margin-top: 0; background-color: transparent; border: 0; box-shadow: none; } .navbar .dropdown-menu .dropdown-item { padding: 0.75rem 1.5rem; color: #000; } .navbar .dropdown-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; } .navbar .dropdown-toggle::after { margin-left: auto; } .navbar .nav-item { border-bottom: 1px solid #eee; } .offcanvas .navbar-nav { width: 100%; } } .card h3 { font-size: 1.25rem; } .list-group-item+.list-group-item.active { background-color: #0054E2 !important; color: #fff; } .blog-nav { border-bottom: 1px solid #e9ecef; margin-bottom: 2rem; display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Internet Explorer 10+ */ } .blog-nav::-webkit-scrollbar { display: none; /* Safari and Chrome */ } .blog-nav .nav-link { border: none !important; border-radius: 0 !important; padding: 1rem 1.5rem; font-weight: 500; color: #6c757d !important; background: transparent !important; position: relative; transition: all 0.3s ease; white-space: nowrap; flex-shrink: 0; min-width: max-content; } .blog-nav .nav-link:hover { color: #495057 !important; background: transparent !important; } .blog-nav .nav-link.active { color: #007bff !important; background: transparent !important; border-bottom: 3px solid #007bff !important; } .blog-nav .nav-link.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background: #007bff; } /* Asigură-te că tab-urile nu au border implicit */ .nav-tabs .nav-link { border: none; } .nav-tabs { border-bottom: 1px solid #dee2e6; } .p45-special-offers-nav { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Internet Explorer 10+ */ border-top: 1px solid #e9ecef; padding-top: 0; margin-top: 1rem; border-bottom: none; } .p45-special-offers-nav::-webkit-scrollbar { display: none; /* Safari and Chrome */ } .p45-special-offers-nav .nav-item { flex-shrink: 0; } .p45-special-offers-nav .nav-link { border: none !important; border-radius: 0 !important; padding: 1rem 1.5rem; font-weight: 500; color: #6c757d !important; background: transparent !important; position: relative; transition: all 0.3s ease; white-space: nowrap; margin-right: 0; margin-bottom: 0; } .p45-special-offers-nav .nav-link:hover { color: #495057 !important; background: transparent !important; } .p45-special-offers-nav .nav-link.active { color: #007bff !important; background: transparent !important; border-top: 3px solid #007bff !important; } /* Override Bootstrap pills default styling */ .nav-pills .nav-link { background-color: transparent !important; } .nav-pills .nav-link.active { background-color: transparent !important; color: #007bff !important; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: #f8f9fa; border-radius: 6px; } ::-webkit-scrollbar-thumb { background: #0054E2; border-radius: 6px; border: 2px solid #f8f9fa; } ::-webkit-scrollbar-thumb:hover { background: #003bb3; /* Nuanță mai închisă la hover */ } /* Pentru Firefox */ * { scrollbar-width: thin; scrollbar-color: #0054E2 #f8f9fa; } /* ===== SCROLLBAR PENTRU NAVIGAREA TA ORIZONTALĂ ===== */ .nav-scroll-wrapper::-webkit-scrollbar { height: 8px; /* Mai subțire pentru navigare orizontală */ } .nav-scroll-wrapper::-webkit-scrollbar-track { background: rgba(248, 249, 250, 0.8); border-radius: 4px; } .nav-scroll-wrapper::-webkit-scrollbar-thumb { background: #0054E2; border-radius: 4px; border: 1px solid rgba(248, 249, 250, 0.8); } .nav-scroll-wrapper::-webkit-scrollbar-thumb:hover { background: #003bb3; } /* Pentru Firefox */ .nav-scroll-wrapper { scrollbar-width: thin; scrollbar-color: #0054E2 rgba(248, 249, 250, 0.8); } /* ===== SCROLLBAR PENTRU SWIPER (dacă folosești) ===== */ .swiper-scrollbar { background: rgba(248, 249, 250, 0.8) !important; border-radius: 4px !important; } .swiper-scrollbar-drag { background: #0054E2 !important; border-radius: 4px !important; } /* ===== RESPONSIVE - MAI SUBȚIRE PE MOBIL ===== */ @media (max-width: 768px) { ::-webkit-scrollbar { width: 8px; height: 8px; } .nav-scroll-wrapper::-webkit-scrollbar { height: 6px; } } /* Stiluri pentru dropdown toggle arrow */ .dropdown-toggle::after { display: inline-block; margin-left: auto; vertical-align: middle; content: ""; width: 8px; height: 8px; border: none; background: none; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(45deg); transition: none; } /* Săgeata când dropdown-ul este deschis */ .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(45deg); } /* Pentru navbar pe mobil */ @media (max-width: 991.98px) { .navbar .dropdown-toggle::after { margin-left: auto; } /* Asigură-te că săgeata este vizibilă pe mobil */ .navbar-nav .nav-link.dropdown-toggle { display: flex; justify-content: space-between; align-items: center; } } /* Stiluri suplimentare pentru o experiență mai bună */ .dropdown-toggle { display: flex; justify-content: space-between; align-items: center; } /* Hover effect pentru săgeată */ .dropdown-toggle:hover::after { border-right-color: #0054E2; border-bottom-color: #0054E2; } /* Pentru compatibilitate cu Bootstrap */ .nav-link.dropdown-toggle::after { margin-left: auto; } /* Variante de culori pentru săgeți */ .dropdown-toggle.text-primary::after { border-right-color: #0054E2; border-bottom-color: #0054E2; } .dropdown-toggle.text-dark::after { border-right-color: #212529; border-bottom-color: #212529; } .dropdown-toggle.text-white::after { border-right-color: #ffffff; border-bottom-color: #ffffff; } /* Animație smoothă pentru toate elementele dropdown */ .dropdown-menu { transition: all 0.3s ease; } /* Fixează poziția săgeții în dreapta pentru nav-items */ .navbar-nav .dropdown-toggle { position: relative; } .navbar-nav .dropdown-toggle::after { position: absolute; right: 3px; top: 47%; transform: translateY(-50%) rotate(45deg); margin-left: 0; } .navbar-nav .dropdown-toggle[aria-expanded="true"]::after { transform: translateY(-50%) rotate(45deg); } /* Chevron style - definit mai sus */ /* Variante de culori pentru săgeți - definite mai sus */ /* Animație smoothă pentru toate elementele dropdown */ .dropdown-menu { transition: all 0.3s ease; } /* Fixează poziția săgeții în dreapta pentru nav-items */ .navbar-nav .dropdown-toggle { position: relative; } .navbar-nav .dropdown-toggle::after { position: absolute; right: 3px; top: 47%; transform: translateY(-50%) rotate(45deg); margin-left: 0; } .navbar-nav .plus7-toggle::after { right: 8px; } .navbar-nav .dropdown-toggle[aria-expanded="true"]::after { transform: translateY(-50%) rotate(45deg); } /* Stiluri alternative cu Bootstrap Icons (opțional) */ .dropdown-toggle.use-icon::after { content: none; /* Elimină chevron-ul CSS */ } .dropdown-toggle.use-icon::before { content: "\F285"; /* Bootstrap icon chevron-right */ font-family: "bootstrap-icons"; margin-left: auto; transition: transform 0.3s ease; } .dropdown-toggle.use-icon[aria-expanded="true"]::before { transform: rotate(90deg); /* Rotește iconul */ } /* col-image ascuns implicit pe toate device-urile */ .col-image { display: none !important; } /* Modul listă pe desktop */ @media (min-width: 768px) { .hotel-list-mode .hotel-top-img-wrapper { display: none !important; } .hotel-list-mode .card-body { border-top: 1px solid #000 !important; border-radius: 1rem !important; padding: 0 !important; } .hotel-list-mode .row { height: 100%; } .hotel-list-mode .col-image { display: block !important; flex: 0 0 auto; width: 33.333333%; } .hotel-list-mode .col-content { flex: 0 0 auto; width: 31.666667%; } .hotel-list-mode .col-content .hstack .ms-auto { display: none !important; } .hotel-list-mode .col-content .text-primary.fs-7 { margin-top: 0.5rem; } .hotel-list-mode .col-price { flex: 0 0 auto; width: 35%; text-align: right; position: relative; margin-top: 0 !important; } .hotel-list-mode .col-price .price-arrow { display: block !important; } .hotel-list-mode .col-price .price-content { position: absolute; bottom: 0; right: 0; padding: 1rem; } } /* ── Sub-footer (p45-footer) layout & responsive ── */ .p45-footer { overflow-x: hidden; max-width: 100vw; } /* Band: 3-column equal grid (payments | company | disputes) */ .p45-footer .p45-footer__band { display: flex !important; flex-wrap: wrap !important; gap: 20px !important; justify-content: space-between !important; } .p45-footer .p45-footer__band>div { flex: 1 1 0 !important; min-width: 0 !important; max-width: 100% !important; } /* Nav columns: equal 3-col layout */ .p45-footer .p45-footer__nav-cols { display: flex !important; flex-wrap: wrap !important; gap: 24px !important; } .p45-footer .p45-footer__nav-cols>.p45-footer__nav { flex: 1 1 0 !important; min-width: 150px !important; } /* Dispute resolution: always stack images vertically */ .p45-footer .p45-footer__band>div:last-child { align-items: center !important; } .p45-footer .p45-footer__band>div:last-child>div { flex-direction: column !important; align-items: center !important; } /* Company info: centered */ .p45-footer .p45-footer__band>div:nth-child(2) { text-align: center !important; align-self: center !important; } /* ── Tablet: stack band into rows ── */ @media (max-width: 991px) { .p45-footer .p45-footer__top { flex-direction: column !important; } .p45-footer .p45-footer__left { max-width: 100% !important; flex: unset !important; } } /* ── Mobile ── */ @media (max-width: 768px) { .p45-footer .p45-footer__band { flex-direction: column !important; align-items: stretch !important; } .p45-footer .p45-footer__band>div { flex: unset !important; } .p45-footer .p45-footer__nav-cols { justify-content: flex-start !important; } .p45-footer .p45-footer__bottom { flex-direction: column !important; text-align: center !important; gap: 12px !important; } .p45-footer .p45-footer__bottom>div { justify-content: center !important; } .p45-footer .container>div { max-width: 100%; overflow-x: hidden; } } @media (max-width: 480px) { .p45-footer .p45-footer__badge-card>div, .p45-footer .p45-footer__rates-box>div { gap: 4px !important; } .p45-footer .p45-footer__bank-pill { font-size: 9px !important; padding: 2px 6px !important; height: 24px !important; } } /* Hotel card images - tablet fix */ @media (min-width: 768px) and (max-width: 991px) { .hotel-card-mode .hotel-top-img-wrapper .h-250px, .hotel-top-img-wrapper .h-250px { height: 200px !important; } } @media (min-width: 992px) { .hotel-card-mode .hotel-top-img-wrapper .h-250px, .hotel-top-img-wrapper .h-250px { height: 220px !important; } } /* Breadcrumb */ .breadcrumb-area { padding: 12px 0; } .breadcrumb-area .breadcrumb { margin: 0; padding: 0; background: transparent; display: flex; align-items: center; flex-wrap: wrap; gap: 0; list-style: none; } .breadcrumb-area .breadcrumb li { display: inline-flex; align-items: center; font-size: .85rem; color: #6c757d; } .breadcrumb-area .breadcrumb li a { color: #6c757d; text-decoration: none; transition: color 0.2s ease; } .breadcrumb-area .breadcrumb li a:hover { color: var(--primary); } .breadcrumb-area .breadcrumb-separator { display: inline-flex; align-items: center; margin: 0 8px; color: #adb5bd; } .breadcrumb-area .breadcrumb li:last-child span[itemprop="name"] { color: #212529; font-weight: 600; } /* ============================================================ Tour & Hotel summary (mobile offcanvas) — travellers panel ============================================================ */ #tourSearchMobile .travellers-section:not(.d-none), #hotelSearchMobile .travellers-section:not(.d-none) { border: 1px solid #0054E2; border-radius: 0.5rem; padding: 1rem; background-color: rgba(0, 84, 226, 0.04); } /* Layout side-by-side pe mobil: label + controale pe acelasi rand (partial-ul foloseste col-md-* care altfel s-ar stivui vertical). */ #tourSearchMobile .travellers-section .travellers-wrap > .row, #hotelSearchMobile .travellers-section .travellers-wrap > .row { margin-left: 0; margin-right: 0; flex-wrap: nowrap; align-items: center; } #tourSearchMobile .travellers-section .travellers-wrap > .row > .col-md-8, #hotelSearchMobile .travellers-section .travellers-wrap > .row > .col-md-8 { flex: 1 1 auto; width: auto; max-width: none; margin-top: 0 !important; padding-left: 0; } #tourSearchMobile .travellers-section .travellers-wrap > .row > .col-md-4, #hotelSearchMobile .travellers-section .travellers-wrap > .row > .col-md-4 { flex: 0 0 auto; width: auto; max-width: none; margin-top: 0 !important; padding-right: 0; } #tourSearchMobile .travellers-section .travellers-control, #hotelSearchMobile .travellers-section .travellers-control { margin: 0; justify-content: flex-end; flex-wrap: nowrap; gap: 0.25rem; } #tourSearchMobile .travellers-section .travellers-control .col-4, #hotelSearchMobile .travellers-section .travellers-control .col-4 { flex: 0 0 auto; width: auto; padding: 0; } #tourSearchMobile .travellers-section .travellers-control h4, #hotelSearchMobile .travellers-section .travellers-control h4 { margin: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; } #tourSearchMobile .travellers-section .travellers-control .number, #hotelSearchMobile .travellers-section .travellers-control .number { min-width: 28px; display: inline-block; text-align: center; font-size: 1.25rem; } #tourSearchMobile .travellers-section .travellers-control-wrap, #hotelSearchMobile .travellers-section .travellers-control-wrap { display: flex; justify-content: flex-end; } #tourSearchMobile .travellers-section .kids-section, #hotelSearchMobile .travellers-section .kids-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(0, 84, 226, 0.15); } #tourSearchMobile .travellers-section .kids-section .kids-details select, #hotelSearchMobile .travellers-section .kids-section .kids-details select { font-size: 0.95rem; } #tourSearchMobile .travellers-section .row.mt-3, #hotelSearchMobile .travellers-section .row.mt-3 { margin-top: 0.75rem !important; } /* Forteaza vizibil butonul "Aplica" si pe mobil (partial-ul are d-none d-md-block). */ #tourSearchMobile .travellers-section .dropdown-close, #hotelSearchMobile .travellers-section .dropdown-close { display: inline-block !important; width: 100%; text-align: center; padding: 0.5rem 1rem !important; font-size: 1rem !important; } /* Pe mobil dropdown-urile din formularul rezumatului (calendar + travellers) trebuie sa fie full-width si bine pozitionate (altfel se taie / ies din card). */ @media (max-width: 991px) { .p45-tour-rezumat-card .search-bar .dropdown-menu, .p45-hotel-rezumat-card .search-bar .dropdown-menu { position: fixed !important; top: 50% !important; left: 1rem !important; right: 1rem !important; bottom: auto !important; max-width: none !important; width: auto !important; transform: translateY(-50%) !important; max-height: 80vh; overflow-y: auto; margin: 0 !important; z-index: 1080 !important; } /* Forteaza vizibil butonul "Aplica" si in dropdown-ul desktop pe mobil. */ .p45-tour-rezumat-card .search-bar .dropdown-menu .dropdown-close, .p45-hotel-rezumat-card .search-bar .dropdown-menu .dropdown-close { display: inline-block !important; width: 100%; text-align: center; padding: 0.5rem 1rem !important; font-size: 1rem !important; } /* Layout side-by-side in interiorul dropdown-ului (la fel ca pe offcanvas). */ .p45-tour-rezumat-card .search-bar .dropdown-menu .travellers-wrap > .row, .p45-hotel-rezumat-card .search-bar .dropdown-menu .travellers-wrap > .row { margin-left: 0; margin-right: 0; flex-wrap: nowrap; align-items: center; } .p45-tour-rezumat-card .search-bar .dropdown-menu .travellers-wrap > .row > .col-md-8, .p45-tour-rezumat-card .search-bar .dropdown-menu .travellers-wrap > .row > .col-md-4, .p45-hotel-rezumat-card .search-bar .dropdown-menu .travellers-wrap > .row > .col-md-8, .p45-hotel-rezumat-card .search-bar .dropdown-menu .travellers-wrap > .row > .col-md-4 { width: auto; max-width: none; margin-top: 0 !important; } .p45-tour-rezumat-card .search-bar .dropdown-menu .travellers-wrap > .row > .col-md-8, .p45-hotel-rezumat-card .search-bar .dropdown-menu .travellers-wrap > .row > .col-md-8 { flex: 1 1 auto; padding-left: 0; } .p45-tour-rezumat-card .search-bar .dropdown-menu .travellers-wrap > .row > .col-md-4, .p45-hotel-rezumat-card .search-bar .dropdown-menu .travellers-wrap > .row > .col-md-4 { flex: 0 0 auto; padding-right: 0; } .p45-tour-rezumat-card .search-bar .dropdown-menu .travellers-control, .p45-hotel-rezumat-card .search-bar .dropdown-menu .travellers-control { margin: 0; justify-content: flex-end; flex-wrap: nowrap; gap: 0.25rem; } .p45-tour-rezumat-card .search-bar .dropdown-menu .travellers-control .col-4, .p45-hotel-rezumat-card .search-bar .dropdown-menu .travellers-control .col-4 { flex: 0 0 auto; width: auto; padding: 0; } .p45-tour-rezumat-card .search-bar .dropdown-menu .travellers-control h4, .p45-hotel-rezumat-card .search-bar .dropdown-menu .travellers-control h4 { margin: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; } .p45-tour-rezumat-card .search-bar .dropdown-menu .travellers-control .number, .p45-hotel-rezumat-card .search-bar .dropdown-menu .travellers-control .number { min-width: 28px; display: inline-block; text-align: center; font-size: 1.25rem; } /* Calendar dropdown — pe mobil se incadreaza in viewport (era width: 930px). */ .p45-hotel-rezumat-card .search-bar .calendar-section .dropdown-menu { width: auto !important; } } /* ========================================================================== ████ TEMĂ NOUĂ P45 — adăugată 2026-06-21 ████ -------------------------------------------------------------------------- Fundații (tokens --p45-*, bază, tipografie, sistem iconițe) + toate componentele (clase prefixate .p45-*). Sursă: documentations/theme. Căile iconițelor normalizate la /frontend/assets/icons/ la import. Pentru a dezactiva tema: șterge tot ce e între acest marcaj și „SFÂRȘIT TEMĂ NOUĂ P45”. ========================================================================== */ /* ============ component: css/style.css ============ */ /* ========================================================================== 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--arrow-down { --p45-icon: url("/frontend/assets/icons/arrow-down.svg"); } .p45-icon--arrow-left { --p45-icon: url("/frontend/assets/icons/arrow-left.svg"); } .p45-icon--arrow-right { --p45-icon: url("/frontend/assets/icons/arrow-right.svg"); } .p45-icon--arrow-up { --p45-icon: url("/frontend/assets/icons/arrow-up.svg"); } .p45-icon--briefcase { --p45-icon: url("/frontend/assets/icons/briefcase.svg"); } .p45-icon--calendar { --p45-icon: url("/frontend/assets/icons/calendar.svg"); } .p45-icon--check { --p45-icon: url("/frontend/assets/icons/check.svg"); } .p45-icon--chevron-down { --p45-icon: url("/frontend/assets/icons/chevron-down.svg"); } .p45-icon--chevron-left { --p45-icon: url("/frontend/assets/icons/chevron-left.svg"); } .p45-icon--chevron-right { --p45-icon: url("/frontend/assets/icons/chevron-right.svg"); } .p45-icon--chevron-up { --p45-icon: url("/frontend/assets/icons/chevron-up.svg"); } .p45-icon--close { --p45-icon: url("/frontend/assets/icons/close.svg"); } .p45-icon--compass { --p45-icon: url("/frontend/assets/icons/compass.svg"); } .p45-icon--facebook { --p45-icon: url("/frontend/assets/icons/facebook.svg"); } .p45-icon--global { --p45-icon: url("/frontend/assets/icons/global.svg"); } .p45-icon--heart { --p45-icon: url("/frontend/assets/icons/heart.svg"); } .p45-icon--heart-fill { --p45-icon: url("/frontend/assets/icons/heart-fill.svg"); } .p45-icon--holiday { --p45-icon: url("/frontend/assets/icons/holiday.svg"); } .p45-icon--home { --p45-icon: url("/frontend/assets/icons/home.svg"); } .p45-icon--instagram { --p45-icon: url("/frontend/assets/icons/instagram.svg"); } .p45-icon--map { --p45-icon: url("/frontend/assets/icons/map.svg"); } .p45-icon--map-pin { --p45-icon: url("/frontend/assets/icons/map-pin.svg"); } .p45-icon--maximize { --p45-icon: url("/frontend/assets/icons/maximize.svg"); } .p45-icon--meal { --p45-icon: url("/frontend/assets/icons/meal.svg"); } .p45-icon--menu { --p45-icon: url("/frontend/assets/icons/menu.svg"); } .p45-icon--minimize { --p45-icon: url("/frontend/assets/icons/minimize.svg"); } .p45-icon--minus { --p45-icon: url("/frontend/assets/icons/minus.svg"); } .p45-icon--moon { --p45-icon: url("/frontend/assets/icons/moon.svg"); } .p45-icon--phone-call { --p45-icon: url("/frontend/assets/icons/phone-call.svg"); } .p45-icon--plane { --p45-icon: url("/frontend/assets/icons/plane.svg"); } .p45-icon--plus { --p45-icon: url("/frontend/assets/icons/plus.svg"); } .p45-icon--romania { --p45-icon: url("/frontend/assets/icons/romania.svg"); } .p45-icon--routing { --p45-icon: url("/frontend/assets/icons/routing.svg"); } .p45-icon--search { --p45-icon: url("/frontend/assets/icons/search.svg"); } .p45-icon--star { --p45-icon: url("/frontend/assets/icons/star.svg"); } .p45-icon--ticket { --p45-icon: url("/frontend/assets/icons/ticket.svg"); } .p45-icon--tiktok { --p45-icon: url("/frontend/assets/icons/tiktok.svg"); } .p45-icon--user { --p45-icon: url("/frontend/assets/icons/user.svg"); } .p45-icon--users { --p45-icon: url("/frontend/assets/icons/users.svg"); } .p45-icon--wifi { --p45-icon: url("/frontend/assets/icons/wifi.svg"); } .p45-icon--youtube { --p45-icon: url("/frontend/assets/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). ========================================================================== */ /* ============ component: components/navbar/navbar.css ============ */ /* ========================================================================== NAVBAR / HEADER (Figma: Menu, 1440×68) -------------------------------------------------------------------------- Depinde de: css/style.css (tokens, .p45-icon). Încarcă-l după style.css. Desktop (lg+): logo stânga, meniu centrat în viewport, acțiuni dreapta. Mobil ( .p45-navbar__link { color: var(--p45-primary); } .p45-navbar__caret { width: 1rem; height: 1rem; color: var(--p45-icon-blue); transition: transform var(--p45-transition); } .p45-navbar__item.is-open > .p45-navbar__link .p45-navbar__caret { transform: rotate(180deg); } /* acțiuni dreapta */ .p45-navbar__actions { display: flex; align-items: center; gap: var(--p45-space-4); /* 16px */ flex: 0 0 auto; color: var(--p45-primary); } .p45-navbar__phone { display: inline-flex; align-items: center; gap: var(--p45-space-1); color: inherit; text-decoration: none; } .p45-navbar__phone-num { font: var(--p45-fw-bold) var(--p45-fs-p3) / var(--p45-lh-heading) var(--p45-font); letter-spacing: var(--p45-ls-zero); color: var(--p45-text-strong-blue); white-space: nowrap; } .p45-navbar__action { display: inline-flex; color: inherit; transition: color var(--p45-transition); } .p45-navbar__action:hover { color: var(--p45-primary-dark); } /* buton hamburger (mobil) */ .p45-navbar__toggler { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; color: var(--p45-text-main); background: transparent; border: 0; cursor: pointer; } /* dropdown (conținut din Figma — momentan placeholder) */ .p45-navbar__dropdown { display: none; min-width: 220px; padding: var(--p45-space-3); color: var(--p45-text-grey); font: var(--p45-fw-regular) var(--p45-fs-p3) / var(--p45-lh-body) var(--p45-font); letter-spacing: var(--p45-ls); } /* --- Desktop (≥992px) --------------------------------------------------- */ @media (min-width: 992px) { /* Gutieră 80px ca în Figma (frame 1440) + plafon pe lățimea totală, centrat. ATENȚIE: Bootstrap pune box-sizing: border-box global, deci max-width include padding-ul → 1440 aici = 1280 conținut + 2×80 gutieră (NU 1280). Peste 1440 bara nu se mai întinde, ci se centrează — așa rămâne aliniată cu searchbar-ul din hero (max-width 1280 + margin-inline auto, acolo pe un element FĂRĂ padding, deci 1280 e chiar conținutul). */ .p45-navbar__bar { padding: 0 80px; max-width: 1440px; margin-inline: auto; } .p45-navbar__nav { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .p45-navbar__dropdown { position: absolute; top: calc(100% + 12px); left: 0; background: var(--p45-surface-white); border: 1px solid var(--p45-border-input); border-radius: var(--p45-radius); box-shadow: var(--p45-shadow-lg); z-index: 1000; } .p45-has-dropdown:hover > .p45-navbar__dropdown, .p45-has-dropdown:focus-within > .p45-navbar__dropdown { display: block; } } /* --- Mobil (<992px) ----------------------------------------------------- */ @media (max-width: 991.98px) { .p45-navbar__toggler { display: inline-flex; } .p45-navbar__phone-num { display: none; } /* doar iconița pe mobil */ .p45-navbar__nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: var(--p45-space-3) var(--p45-space-4) var(--p45-space-4); background: var(--p45-surface-white); border-bottom: 1px solid var(--p45-border-input); box-shadow: var(--p45-shadow-lg); z-index: 1000; } .p45-navbar.is-open .p45-navbar__nav { display: block; } .p45-navbar__menu { flex-direction: column; align-items: stretch; gap: 0; } .p45-navbar__link { justify-content: space-between; padding: var(--p45-space-3) 0; } .p45-navbar__item { border-bottom: 1px solid var(--p45-border-input); } .p45-navbar__item:last-child { border-bottom: 0; } .p45-has-dropdown.is-open > .p45-navbar__dropdown { display: block; } } /* ============ component: components/buttons/buttons.css ============ */ /* ========================================================================== BUTTONS (Figma: Button — type × size × disabled) -------------------------------------------------------------------------- Depinde de: css/style.css (tokens, .p45-icon). Încarcă-l după style.css. Tipuri: main / secondary / tertiary (Figma: „tetriary") / text. Mărimi: lg / md. Stare: disabled (atribut [disabled] sau clasa .is-disabled). Iconițe opționale stânga/dreapta — moștenesc culoarea textului (currentColor). ========================================================================== */ .p45-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-family: var(--p45-font); font-weight: var(--p45-fw-medium); line-height: var(--p45-lh-body); letter-spacing: var(--p45-ls); white-space: nowrap; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background var(--p45-transition), border-color var(--p45-transition), color var(--p45-transition); } .p45-btn:focus-visible { outline: 2px solid var(--p45-primary); outline-offset: 2px; } /* mărimi */ .p45-btn--lg { font-size: var(--p45-fs-p2); padding: 14px; border-radius: var(--p45-radius-lg); } /* 16/14/24 */ .p45-btn--md { font-size: var(--p45-fs-p3); padding: 8px 12px; border-radius: var(--p45-radius); } /* 14/8-12/12 */ .p45-btn--lg .p45-icon { width: 20px; height: 20px; } .p45-btn--md .p45-icon { width: 16px; height: 16px; } /* tipuri (culori — enabled) */ .p45-btn--main { background: var(--p45-surface-brand-blue); color: var(--p45-text-white); } .p45-btn--secondary { background: transparent; border-color: var(--p45-border-blue); color: var(--p45-text-blue); } .p45-btn--tertiary { background: transparent; color: var(--p45-text-blue); } .p45-btn--text { background: transparent; border: 0; padding: 0; color: var(--p45-text-blue); border-radius: var(--p45-radius-lg); } /* hover (doar enabled — nu apare în Figma, adăugat sensibil) */ .p45-btn--main:not(:disabled):not(.is-disabled):hover { background: var(--p45-primary-dark); } .p45-btn--secondary:not(:disabled):not(.is-disabled):hover, .p45-btn--tertiary:not(:disabled):not(.is-disabled):hover { background: var(--p45-surface-light-blue); } .p45-btn--text:not(:disabled):not(.is-disabled):hover { color: var(--p45-primary-dark); } /* disabled (toate tipurile) */ .p45-btn:disabled, .p45-btn.is-disabled { cursor: not-allowed; color: var(--p45-text-grey); } .p45-btn--main:disabled, .p45-btn--main.is-disabled { background: var(--p45-surface-gray); border-color: transparent; } .p45-btn--secondary:disabled, .p45-btn--secondary.is-disabled { background: transparent; border-color: var(--p45-border-grey); } .p45-btn--tertiary:disabled, .p45-btn--tertiary.is-disabled, .p45-btn--text:disabled, .p45-btn--text.is-disabled { background: transparent; } /* --- Icon button (Figma: Icon button) ----------------------------------- */ .p45-icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px; background: var(--p45-surface-light-blue); border: 1px solid rgba(0, 84, 226, 0.1); /* brand blue 10% */ border-radius: var(--p45-radius-pill); color: var(--p45-icon-blue); cursor: pointer; } .p45-icon-btn .p45-icon { width: 24px; height: 24px; } /* variante icon button */ .p45-icon-btn--white { background: var(--p45-surface-white); } /* fundal alb (ex. săgeți carusel) */ .p45-icon-btn--glass { /* peste imagine/video: translucid, iconiță albă */ background: rgba(255, 255, 255, 0.2); border-color: transparent; color: var(--p45-icon-white); } /* ============ component: components/badge/badge.css ============ */ /* ========================================================================== BADGE (Figma: 44-32281 — text / discount) -------------------------------------------------------------------------- Etichetă mică, pill (radius 60px). Două variante: .p45-badge → text (fundal alb, text blue, 14 Medium) .p45-badge--discount → reducere (fundal roșu, text alb, 12 ExtraBold) Atom partajat: folosit de sine stătător și în carduri (_atom image block). Depinde de: css/style.css (tokens). Încarcă-l înainte de cards. ========================================================================== */ .p45-badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 60px; background: var(--p45-surface-white); color: var(--p45-text-blue); font: var(--p45-fw-medium) var(--p45-fs-p3) / var(--p45-lh-body) var(--p45-font); /* 14 Medium */ letter-spacing: var(--p45-ls); white-space: nowrap; } .p45-badge--discount { padding: 2px 4px; background: var(--p45-red); color: var(--p45-text-white); font-weight: var(--p45-fw-extrabold); font-size: var(--p45-fs-caption); /* 12 ExtraBold */ } /* ============ component: components/cards/atoms.css ============ */ /* ========================================================================== CARDS / ATOMI (Figma: _atom cards) -------------------------------------------------------------------------- Depinde de: css/style.css (tokens, .p45-icon). Încarcă-l după style.css. Piesele de construcție ale cardurilor: heart, service, badge, image block, destination+options, stars, content, description, price, rating. Cardurile întregi asamblate din ele sunt în cards.css (încarcă-l după acesta). ========================================================================== */ /* --- _atom heart: buton favorite (gol roșu / plin roșu) ----------------- */ .p45-heart { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: var(--p45-surface-white); border: 0; border-radius: var(--p45-radius-pill); color: var(--p45-red); cursor: pointer; } .p45-heart__icon { width: 16px; height: 16px; } /* gol */ .p45-heart.is-selected .p45-heart__icon { width: 20px; height: 20px; } /* selectat */ /* --- _atom service: badge iconiță (+ text opțional) --------------------- */ .p45-service { display: inline-flex; align-items: center; gap: 4px; } .p45-service__icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: var(--p45-surface-baby-blue); /* #d7f2fd */ border-radius: 4px; color: var(--p45-icon-blue); } .p45-service__icon .p45-icon { width: 12px; height: 12px; } .p45-service__label { font: var(--p45-fw-regular) var(--p45-fs-p3) / var(--p45-lh-heading) var(--p45-font); letter-spacing: var(--p45-ls); color: var(--p45-text-secondary); /* #404040 */ white-space: nowrap; } /* --- Badge (text / discount) ------------------------------------------- Mutat în componenta proprie: components/badge/badge.css (.p45-badge, .p45-badge--discount). Linkează badge.css înainte de cards în index.html. ----------------------------------------------------------------------- */ /* --- _atom image block: imagine + badge-uri + favorite + pagination ------ */ .p45-image-block { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--p45-radius-lg); /* 16px */ overflow: hidden; background: var(--p45-surface-gray); } .p45-image-block__img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Slideshow: când blocul are mai multe imagini (slides), le suprapunem și comutăm cea activă din dots (vezi initImageBlock în main.js). Cu o singură imagine selectorul :has nu se aplică → rămâne statică (compatibil înapoi). */ .p45-image-block:has(.p45-image-block__img ~ .p45-image-block__img) .p45-image-block__img { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s ease; } .p45-image-block:has(.p45-image-block__img ~ .p45-image-block__img) .p45-image-block__img.is-active { opacity: 1; } .p45-image-block__badges { position: absolute; left: 14px; top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .p45-image-block__fav { position: absolute; right: 14px; top: 14px; } .p45-image-block__dots { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; } .p45-image-block__dot { position: relative; width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.5); /* inactiv (interpretat) */ } .p45-image-block__dot.is-active { background: var(--p45-surface-white); } /* când slideshow-ul e activ (mai multe imagini), dot-urile devin clicabile + primesc o zonă de atingere mai mare (pseudo invizibil) fără a le mări vizual */ .p45-image-block:has(.p45-image-block__img ~ .p45-image-block__img) .p45-image-block__dot { cursor: pointer; } .p45-image-block:has(.p45-image-block__img ~ .p45-image-block__img) .p45-image-block__dot::before { content: ""; position: absolute; inset: -7px; /* hit area ~20px */ } /* rating-ul (4.2/5) poziționat în colțul din dreapta-jos al imaginii */ .p45-image-block__rating { position: absolute; right: 14px; bottom: 14px; } /* --- _atom destination+options: rând info (blue/white × holiday/circuit) -- */ .p45-destopt { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 12px 20px; } .p45-destopt--blue { background: var(--p45-surface-baby-blue); } .p45-destopt--white { background: var(--p45-surface-white); } /* Figma dă benzii înălțime fixă 68px, ca toate cardurile dintr-un rând să iasă egale. Cu ambele rânduri (titlu 18/1.2 + info 14/1.1 + gap 8 + padding 2×12) banda iese natural la ~69px, deci regula nu schimbă nimic acolo; ridică doar cardurile cărora le lipsește rândul de info — oferte fără context de căutare, deci fără nopți/dată/transport. `min-height`, nu `height`: un titlu care trece pe două rânduri are voie să crească, în loc să fie tăiat. Scopat la rândul de carusel: în listinguri banda poate fi intenționat pe un singur rând și n-are de ce să ocupe 68px. */ .p45-carousel__row .p45-destopt { min-height: 68px; } .p45-destopt__title { display: flex; align-items: center; gap: 6px; width: 100%; font: var(--p45-fw-bold) var(--p45-fs-p1) / var(--p45-lh-body) var(--p45-font); /* 18 Bold */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); } .p45-destopt__title .p45-icon { width: 18px; height: 18px; color: var(--p45-icon-blue); } /* routing */ /* Steagul din titlul cardului de destinație — corecție OPTICĂ de 1px. Rândul e deja `align-items: center`, deci cutiile sunt centrate geometric corect; dar textul (lh 1.2 × 18px = 21.6) lasă gol spațiul pentru descendente, iar steagul (lh 1em = 18px) părea cu ~1px mai jos decât majusculele. `top` funcționează direct: flag-icons pune deja position: relative pe .fi. flex: 0 0 auto — fără el, la nume lungi de localitate steagul s-ar turti. Scopat aici: steagurile rotunde din dropdown nu se ating. */ .p45-destopt__title .fi { flex: 0 0 auto; top: -1px; } .p45-destopt__info { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; width: 100%; } .p45-destopt__group { display: flex; align-items: center; gap: 2px; } .p45-destopt--white .p45-destopt__group { gap: 4px; } .p45-destopt__group .p45-icon { width: 12px; height: 12px; color: var(--p45-text-main); } .p45-destopt__group > span { font: var(--p45-fw-regular) var(--p45-fs-p3) / var(--p45-lh-heading) var(--p45-font); /* 14 Regular, lh 1.1 */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); white-space: nowrap; } .p45-destopt__divider { width: 1px; height: 13px; background: var(--p45-border-grey); border-radius: 9px; } /* --- Star rating (Figma: StarRait) -------------------------------------- */ .p45-stars { display: inline-flex; align-items: center; } .p45-stars .p45-icon { width: 14px; height: 14px; color: var(--p45-yellow); } .p45-stars--lg .p45-icon { width: 20px; height: 20px; } /* StarRait size=lg */ /* --- _atom content: stele + titlu + servicii / locație ------------------ */ .p45-card-content { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .p45-card-content__title { font: var(--p45-fw-semibold) var(--p45-fs-p1) / var(--p45-lh-body) var(--p45-font); /* 18 SemiBold */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); } .p45-card-content__services { display: flex; align-items: center; gap: 4px; } .p45-card-content__location { font: var(--p45-fw-regular) var(--p45-fs-p2) / var(--p45-lh-body) var(--p45-font); /* 16 Regular */ letter-spacing: var(--p45-ls); color: var(--p45-text-secondary); /* #404040 */ } /* --- _atom Description: titlu + paragraf (folosit de Card Circuit) ------- */ /* Înălțime fixă 86px (Figma) → toate Card Circuit-urile ies egale, indiferent de lungimea descrierii; textul ce depășește e tăiat (overflow). */ .p45-card-desc { display: flex; flex-direction: column; gap: 8px; width: 100%; height: 86px; overflow: hidden; } .p45-card-desc__title { font: var(--p45-fw-semibold) var(--p45-fs-p1) / var(--p45-lh-body) var(--p45-font); /* 18 SemiBold */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); } .p45-card-desc__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-secondary); /* #404040 */ } /* --- _atom price cross / old price / Price card ------------------------- */ .p45-price-cross { position: relative; display: inline-block; font: var(--p45-fw-bold) var(--p45-fs-p2) / var(--p45-lh-body) var(--p45-font); /* 16 Bold */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); } .p45-price-cross::after { content: ""; position: absolute; left: -1px; right: -1px; top: 50%; height: 1px; background: var(--p45-red); border-radius: 8px; transform: translateY(-50%) rotate(-9.22deg); } .p45-old-price { display: inline-flex; align-items: baseline; gap: 2px; } .p45-old-price__from { font: var(--p45-fw-regular) var(--p45-fs-p3) / var(--p45-lh-heading) var(--p45-font); /* 14 Regular */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); } .p45-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .p45-price__row { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; } .p45-price__current { font: var(--p45-fw-extrabold) var(--p45-fs-h3) / var(--p45-lh-heading) var(--p45-font); /* 32 ExtraBold */ letter-spacing: var(--p45-ls); color: var(--p45-text-blue); white-space: nowrap; } .p45-price__info { font: var(--p45-fw-semibold) var(--p45-fs-caption) / var(--p45-lh-body) var(--p45-font); /* 12 SemiBold */ letter-spacing: var(--p45-ls); color: var(--p45-text-blue); text-align: right; } /* --- _atom raiting: badge scor + reviews -------------------------------- */ .p45-rating { display: inline-flex; align-items: center; gap: 2px; padding: 4px 8px; border-radius: 4px; background: var(--p45-surface-brand-blue); color: var(--p45-text-white); font-size: var(--p45-fs-caption); /* 12 */ letter-spacing: var(--p45-ls); white-space: nowrap; } .p45-rating__score { font-weight: var(--p45-fw-bold); } .p45-rating__reviews { font-weight: var(--p45-fw-regular); } /* ============ component: components/cards/cards.css ============ */ /* ========================================================================== CARDS — carduri întregi (Figma: Card Holiday / Circuit / Hotel / Banner / Blog) -------------------------------------------------------------------------- Depinde de: css/style.css (tokens, .p45-icon) ȘI components/cards/atoms.css (heart, image block, destopt, content, price, rating ...). Încarcă-l DUPĂ atoms.css — aici sunt doar wrapper-ele care asamblează atomii. ========================================================================== */ /* --- Card Holiday / Circuit / Hotel: schelet comun ---------------------- */ .p45-card { display: flex; flex-direction: column; align-items: stretch; width: 335px; max-width: 100%; border: 1px solid var(--p45-border-blue-card); /* #e2ebfa */ border-radius: var(--p45-radius-xl); /* 24px */ overflow: hidden; background: var(--p45-surface-white); } /* imaginea umple lățimea cardului — colțurile le dă cardul (overflow:hidden) */ .p45-card .p45-image-block { border-radius: 0; aspect-ratio: 335 / 210; } /* partea de conținut (stele + titlu + servicii/descriere/locație + preț) */ .p45-card__content { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; padding: 12px 20px 20px; /* pt 12 / px 20 / pb 20 (din Figma) */ } /* fiecare bloc ocupă toată lățimea: conținutul rămâne stânga, prețul se aliniază dreapta */ .p45-card__content > * { width: 100%; } /* ============================================================================ LISTING pachete/sejururi — cardul de ofertă (.hotels .hotel.hotel-list-mode). Reutilizează cardul p45 (Card Holiday) ca rând de listing. Aici tratăm explicit clasele care intră în conflict cu stilurile vechi (.hotel-list-mode) și cu cele de slideshow (:has) — fără hack-uri de poziție / !important inutile. ========================================================================== */ /* --- Imaginea + straturile peste ea -------------------------------------- Template-ul are ȘI , ambele cu clasa .p45-image-block__img → declanșează FALS selectorul :has de slideshow, care suprapune imaginile (position:absolute) și le pune opacity:0, bazându-se pe JS-ul initImageBlock să marcheze una .is-active. JS-ul NU rulează pe cardurile clonate din listing, deci forțăm imaginea vizibilă și o lăsăm strat de fundal (z-index:0); badge-urile și inima rămân deasupra (z-index:2). */ /* (Valabil pt. ambele listinguri: hoteluri/pachete .hotels .hotel ȘI circuite .tours .tour — cardurile clonate au aceeași structură p45-image-block.) */ .hotels .hotel .p45-image-block .p45-image-block__img.hotel-img, .tours .tour .p45-image-block .p45-image-block__img { opacity: 1; z-index: 0; } .hotels .hotel .p45-image-block__badges, .hotels .hotel .p45-image-block__fav, .hotels .hotel .p45-heart, .tours .tour .p45-image-block__badges, .tours .tour .p45-image-block__fav, .tours .tour .p45-heart { z-index: 2; } /* Skeleton-ul lazy-load (overlay #e2ebfa) rămâne blocat pe clone (initLazyImg nu mai trece pe ele ca să-i scoată clasa) → ar acoperi imaginea. Îl dezactivăm în listinguri. Cardurile de listing n-au gradient propriu pe `::after`, deci aici e sigur să-l stingem de tot. */ .hotels .hotel .p45-img-skeleton::after, .tours .tour .p45-img-skeleton::after { display: none; } /* Card circuit în listing: .p45-card-desc are înălțime fixă (86px, tile-ul de homepage) și TAIE rândul cu orașele („Viena, Bratislava…") când titlul are 2 rânduri. În listinguri lăsăm conținutul să respire. */ .tours .tour .p45-card-desc { height: auto; min-height: 86px; } /* Wishlist: butonul de scoatere (inimă plină, link real — NU .p45-heart, ca să nu-l intercepteze handler-ul global al inimilor de pe carduri). */ .p45-wish-remove { position: absolute; right: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--p45-surface-white); border-radius: var(--p45-radius-pill); color: var(--p45-red); text-decoration: none; } .p45-wish-remove .p45-icon { width: 18px; height: 18px; } .p45-wish-remove:hover { color: var(--p45-red); transform: scale(1.08); } /* Badge 7+7 pe cardul de wishlist (galben, ca divider-ul split din listing) */ .p45-wish-77 { position: absolute; left: 14px; bottom: 14px; z-index: 2; background: var(--p45-yellow); color: var(--p45-text-strong-blue); font-size: 11px; font-weight: 800; line-height: 1; padding: 4px 10px; border-radius: 999px; } /* --- DEV-273: alte date de plecare (pills pe cardul de sejur) ------------- */ .p45-card-dates { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; } .p45-date-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--p45-surface-baby-blue); font-size: var(--p45-fs-caption); color: var(--p45-text-strong-blue); white-space: nowrap; } .p45-date-pill__price { font-weight: var(--p45-fw-bold); } /* --- DEV-273 (7+7): buton „+ N hoteluri" + lista din overlay -------------- */ .p45-alt-hotels-btn { align-self: flex-start; padding: 6px 12px; border: 1px solid var(--p45-border-blue); border-radius: 999px; background: var(--p45-surface-white); color: var(--p45-text-blue); font-size: var(--p45-fs-caption); font-weight: var(--p45-fw-semibold); cursor: pointer; transition: background var(--p45-transition); } .p45-alt-hotels-btn:hover { background: var(--p45-surface-baby-blue); } .p45-alt-hotels { display: flex; flex-direction: column; gap: 8px; } .p45-alt-hotel-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--p45-border-blue-card); border-radius: 12px; text-decoration: none; color: inherit; } a.p45-alt-hotel-row:hover { background: var(--p45-surface-baby-blue); } .p45-alt-hotel-row__name { font-weight: var(--p45-fw-semibold); } .p45-alt-hotel-row__price { color: var(--p45-text-blue); font-weight: var(--p45-fw-bold); white-space: nowrap; } /* --- DEV-273: buton „Încarcă mai multe oferte" (paginare listing) --------- */ #p45-load-more.is-loading { position: relative; color: transparent !important; pointer-events: none; } #p45-load-more.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: var(--p45-surface-white); border-radius: 50%; animation: p45-btn-spin .7s linear infinite; } /* 7+7 (Pachet Circuit + Sejur): imaginea SPLIT (tur sus + hotel jos, despărțite de o linie galbenă cu badge „7+7"). Nu exista CSS pentru ea → randa la dimensiune naturală (uriaș). O constrângem să umple blocul ca imaginea simplă. */ .hotels .hotel .p45-image-block .hotel-img-split:not(.d-none), .tours .tour .p45-image-block .hotel-img-split:not(.d-none) { position: absolute; inset: 0; z-index: 1; /* peste imaginea simplă (0), sub badge-uri/inimă (2) */ display: flex; flex-direction: column; } .hotels .hotel .hotel-img-split .hotel-img-part, .tours .tour .hotel-img-split .hotel-img-part { display: block; width: 100%; height: 50%; object-fit: cover; } .hotels .hotel .hotel-img-split .hotel-img-divider, .tours .tour .hotel-img-split .hotel-img-divider { position: absolute; left: 0; right: 0; top: 50%; height: 3px; background: var(--p45-yellow); transform: translateY(-50%); } .hotels .hotel .hotel-img-split .hotel-img-divider-badge, .tours .tour .hotel-img-split .hotel-img-divider-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--p45-yellow); color: var(--p45-text-strong-blue); font-size: 11px; font-weight: 800; line-height: 1; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } /* --- Layout card ---------------------------------------------------------- Mobil: tile vertical, full-width. Desktop (≥768px): rând orizontal — imagine în stânga pe toată înălțimea, banda albastră sus-dreapta, conținut + preț jos. */ .hotels .hotel.hotel-list-mode { max-width: 100%; } .hotels .hotel-list-mode .p45-card { width: 100%; } @media (min-width: 768px) { .hotels .hotel-list-mode .p45-card { display: grid; grid-template-columns: 300px 1fr; grid-template-rows: auto 1fr; grid-template-areas: "img band" "img body"; } /* display:block !important anulează regula veche `.hotel-list-mode .hotel-top-img-wrapper { display:none }` (cardul vechi ascundea imaginea de grid în list-mode; acum image-block-ul ESTE wrapper-ul). aspect-ratio:auto anulează 16/10 — înălțimea vine din grid (stretch), cu un minim de 200px. */ .hotels .hotel-list-mode .p45-image-block.hotel-top-img-wrapper { display: block !important; grid-area: img; aspect-ratio: auto; min-height: 200px; border-radius: 0; } .hotels .hotel-list-mode .p45-destopt { grid-area: band; } /* Conținut (stele/titlu/locație) stânga + preț în coloană separată dreapta. */ .hotels .hotel-list-mode .p45-card__content { grid-area: body; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; } .hotels .hotel-list-mode .p45-card__content > * { width: auto; } .hotels .hotel-list-mode .p45-card-content { flex: 1 1 auto; min-width: 0; } .hotels .hotel-list-mode .p45-price { flex: 0 0 auto; align-items: flex-end; padding-left: 24px; border-left: 1px solid var(--p45-border-blue-card); min-width: 160px; white-space: nowrap; } } /* --- Card Banner: imagine promo verticală cu colțuri rotunjite ---------- */ .p45-card-banner { width: 274px; max-width: 100%; aspect-ratio: 274 / 454; border-radius: var(--p45-radius-xl); /* 24px */ overflow: hidden; } .p45-card-banner__img { display: block; width: 100%; height: 100%; object-fit: cover; } /* --- Blog Card / Charter card: imagine + titlu navy (+ subtitlu opțional) - Colțuri 26px, umbră (fără border), lățime 240px. Charter card = aceeași carcasă + linia de subtitlu (.p45-blog-card__subtitle). --------------- */ .p45-blog-card { display: flex; flex-direction: column; align-items: stretch; width: 240px; max-width: 100%; border-radius: 26px; overflow: hidden; background: var(--p45-surface-white); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); /* din Figma */ } .p45-blog-card .p45-image-block { border-radius: 0; aspect-ratio: 335 / 210; } .p45-blog-card__body { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 12px 20px 20px; } .p45-blog-card__title { font: var(--p45-fw-bold) var(--p45-fs-p2) / var(--p45-lh-body) var(--p45-font); /* 16 Bold */ letter-spacing: var(--p45-ls); color: var(--p45-text-strong-blue); /* #001d70 */ } .p45-blog-card__subtitle { font: var(--p45-fw-regular) var(--p45-fs-caption) / var(--p45-lh-body) var(--p45-font); /* 12 Regular */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); /* #101010 */ } /* --- Promo Card: imagine + bară info baby-blue (titlu navy + buton) ------ Butonul reutilizează .p45-btn--main (necesită components/buttons/buttons.css). Două variante: --lg (Figma Mobile/Tablet=yes): 550×384, colțuri 33px, bară OVERLAY jos --sm (Figma Mobile/Tablet=no): 242px, colțuri 22px, bară STIVUITĂ sub imagine ----------------------------------------------------------------------- */ .p45-promo { position: relative; overflow: hidden; background: var(--p45-surface-white); } .p45-promo__info { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--p45-surface-baby-blue); /* #d7f2fd */ } .p45-promo__title { flex: 1 1 0; min-width: 0; letter-spacing: var(--p45-ls); color: var(--p45-text-strong-blue); /* #001d70 */ } /* variant mare — bara info stă peste imagine, lipită de jos */ .p45-promo--lg { width: 550px; max-width: 100%; aspect-ratio: 550 / 384; border-radius: 33px; } .p45-promo--lg .p45-image-block { position: absolute; inset: 0; border-radius: 0; } .p45-promo--lg .p45-promo__info { position: absolute; left: 0; bottom: 0; padding: 24px 32px; } .p45-promo--lg .p45-promo__title { font: var(--p45-fw-bold) var(--p45-fs-h4) / var(--p45-lh-heading) var(--p45-font); /* 28 Bold */ } /* variant mic — imagine + bară info stivuite */ .p45-promo--sm { display: flex; flex-direction: column; align-items: stretch; width: 242px; max-width: 100%; border-radius: 22px; } .p45-promo--sm .p45-image-block { border-radius: 0; aspect-ratio: 335 / 210; } .p45-promo--sm .p45-promo__info { padding: 16px; } .p45-promo--sm .p45-promo__title { font: var(--p45-fw-bold) var(--p45-fs-p1) / var(--p45-lh-body) var(--p45-font); /* 18 Bold */ } /* --- Place Card: thumbnail destinație — imagine pătrată + etichetă albastră (Figma: Card 206-52019). 210px, colțuri 24px, imagine pătrată cu inset 6px și colțuri proprii 18px. ---------------------------------------------- */ .p45-place-card { display: flex; flex-direction: column; width: 210px; max-width: 100%; padding: 6px; border-radius: var(--p45-radius-xl); /* 24px */ overflow: hidden; background: var(--p45-surface-white); } .p45-place-card__img-wrap { aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden; isolation: isolate; /* fix Chrome/Safari: aspect-ratio + overflow:hidden nu taie colțurile unui copil */ background: var(--p45-surface-gray); /* placeholder cât se încarcă */ } .p45-place-card__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 18px; } .p45-place-card__label { padding: 10px 10px 14px; font: var(--p45-fw-bold) var(--p45-fs-p1) / var(--p45-lh-body) var(--p45-font); /* 18 Bold */ letter-spacing: var(--p45-ls); color: var(--p45-text-blue); /* #0054e2 */ } /* --- Recent search Card: rând istoric căutări (titlu + meta + chevron) --- (Figma: 261-123267). 335px, colțuri 16px, umbră, fără border. -------- */ .p45-recent { display: flex; align-items: center; gap: 4px; width: 335px; max-width: 100%; padding: 12px 16px; border-radius: var(--p45-radius-lg); /* 16px */ background: var(--p45-surface-white); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); /* din Figma */ } .p45-recent__content { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-width: 0; } .p45-recent__title { font: var(--p45-fw-bold) var(--p45-fs-p1) / var(--p45-lh-body) var(--p45-font); /* 18 Bold */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); /* Un rând, cu „…". Titlul e deja scurtat la salvare („Albania +34"), dar asta e plasa de siguranță pentru o singură destinație cu nume lung: designul are cardul pe un rând, iar un titlu care curge pe mai multe împinge descrierea și dezaliniază cele trei carduri între ele. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; } .p45-recent__desc { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .p45-recent__group { display: flex; align-items: center; gap: 2px; } .p45-recent__group .p45-icon { width: 12px; height: 12px; color: var(--p45-icon-blue); } /* iconițe albastre */ .p45-recent__group > span { font: var(--p45-fw-regular) var(--p45-fs-caption) / var(--p45-lh-body) var(--p45-font); /* 12 Regular */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); /* textul rămâne negru */ white-space: nowrap; } /* tipul ofertei — și textul e bold albastru (iconița e deja albastră) */ .p45-recent__group--type > span { font-weight: var(--p45-fw-bold); color: var(--p45-text-blue); } .p45-recent__divider { width: 1px; height: 13px; background: var(--p45-border-grey); opacity: 0.2; /* Figma: linie grey 20% */ border-radius: 9px; } .p45-recent__chevron { width: 20px; height: 20px; flex: 0 0 auto; color: var(--p45-icon-blue); } /* ========================================================================== TESTIMONIALS (Figma: 73-32974) — card de recenzie Avatar suprapus sus + stele + nume/dată + text + _atom hotel name. Folosește .p45-stars / .p45-stars--lg (atoms.css) și flag-icons (steag). ========================================================================== */ .p45-testimonial { position: relative; display: flex; flex-direction: column; gap: 12px; width: 240px; max-width: 100%; padding: 64px 20px 20px; /* pt 64 lasă loc avatarului suprapus */ border: 1px solid var(--p45-border-blue-card); /* #e2ebfa */ border-radius: 26px; background: var(--p45-surface-white); } /* Avatarul (Figma Ellipse8) e exportat deja ca cerc cu inel bleu inclus în imagine. Doar îl poziționăm; border-radius taie colțurile albe ale JPG-ului ca să rămână curat pe orice fundal. Fără border propriu (ar dubla inelul). */ .p45-testimonial__avatar { position: absolute; left: 19px; top: -25px; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; } /* Name + date */ .p45-testimonial__head { display: flex; flex-direction: column; gap: 2px; width: 100%; } .p45-testimonial__name { font: var(--p45-fw-semibold) var(--p45-fs-p1) / var(--p45-lh-body) var(--p45-font); /* 18 SemiBold */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); } .p45-testimonial__date { font: var(--p45-fw-semibold) var(--p45-fs-caption) / var(--p45-lh-body) var(--p45-font); /* 12 SemiBold */ letter-spacing: var(--p45-ls); color: var(--p45-text-blue); } .p45-testimonial__text { font: var(--p45-fw-regular) var(--p45-fs-caption) / var(--p45-lh-body) var(--p45-font); /* 12 Regular */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); } /* --- _atom hotel name: regiune + nume hotel + săgeată -------------------- */ .p45-hotel-name { display: flex; align-items: flex-end; gap: 8px; width: 100%; } .p45-hotel-name__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 0; } .p45-hotel-name__region { display: flex; align-items: center; gap: 6px; font: var(--p45-fw-regular) var(--p45-fs-caption) / var(--p45-lh-body) var(--p45-font); /* 12 Regular */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); } .p45-hotel-name__hotel { font: var(--p45-fw-semibold) var(--p45-fs-p3) / var(--p45-lh-body) var(--p45-font); /* 14 SemiBold */ letter-spacing: var(--p45-ls); color: var(--p45-text-blue); } .p45-hotel-name__arrow { width: 16px; height: 16px; flex: 0 0 auto; color: var(--p45-icon-blue); } /* ========================================================================== TILES (Figma: 170-40153 mobile / 170-40154 tablet-desktop) Scurtătură vizuală: imagine pătrată (border alb + umbră) + etichetă navy. Două dimensiuni: --mobile (80px) și --desktop (120px). ========================================================================== */ .p45-tile { display: flex; flex-direction: column; align-items: center; } .p45-tile__img-wrap { width: 100%; aspect-ratio: 1 / 1; border: 2px solid var(--p45-border-white); overflow: hidden; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2); } .p45-tile__img { display: block; width: 100%; height: 100%; object-fit: cover; } .p45-tile__label { width: 100%; text-align: center; font-weight: var(--p45-fw-bold); color: var(--p45-text-strong-blue); /* #001d70 */ } /* --- mobile: 80px, colțuri 24px, label 14px ----------------------------- */ .p45-tile--mobile { width: 80px; gap: 8px; } .p45-tile--mobile .p45-tile__img-wrap { border-radius: 24px; } .p45-tile--mobile .p45-tile__label { font-size: var(--p45-fs-p3); /* 14 */ line-height: var(--p45-lh-heading); /* 1.1 */ letter-spacing: var(--p45-ls-zero); /* Figma: 0 */ } /* --- tablet/desktop: 120px, colțuri 32px, label 16px -------------------- */ .p45-tile--desktop { width: 120px; gap: 12px; } .p45-tile--desktop .p45-tile__img-wrap { border-radius: 32px; } .p45-tile--desktop .p45-tile__label { font-size: var(--p45-fs-p2); /* 16 */ line-height: var(--p45-lh-body); /* 1.2 */ letter-spacing: var(--p45-ls); } /* ============ component: components/checkbox/checkbox.css ============ */ /* ========================================================================== COMPONENTĂ: checkbox (Figma: _atom checkbox + Checkbox) -------------------------------------------------------------------------- Depinde de: css/style.css (tokens, .p45-icon). Încarcă-l după style.css. ACESTA e locul canonic al atomului .p45-checkbox — e refolosit și de componenta Accordeon (rândurile listei + „select tot"). Încarcă checkbox.css ÎNAINTEA accordion.css. Atomul e chiar (appearance:none), deci nu are nevoie de wrapper. Pentru varianta cu text folosește .p45-checkbox-field (un

========================================================================== */ .p45-tab { display: inline-flex; align-items: center; justify-content: center; /* Distanța dintre iconiță și etichetă (Best Offers: „🔥 Discounturi mari"). E obligatorie: elementul fiind flex, spațiul scris în markup între și text NU se vede — whitespace-ul de la începutul unui item anonim de flex e eliminat. Pe tab-urile fără iconiță `gap` n-are efect (un singur item). */ gap: 6px; padding: 12px 14px; border: 2px solid transparent; /* rezervă spațiul borderului → fără salt la selectare */ border-radius: 45px; background: var(--p45-surface-baby-blue); /* #d7f2fd */ color: var(--p45-text-strong-blue); /* #001d70 — neselectat */ font: var(--p45-fw-medium) var(--p45-fs-p3) / var(--p45-lh-body) var(--p45-font); /* 14 Medium */ letter-spacing: var(--p45-ls); white-space: nowrap; cursor: pointer; transition: border-color var(--p45-transition), color var(--p45-transition); } .p45-tab.is-selected { border-color: var(--p45-border-blue); /* #0054e2 */ color: var(--p45-text-blue); /* #0054e2 */ font-weight: var(--p45-fw-semibold); /* SemiBold */ } .p45-tab:focus-visible { outline: 2px solid var(--p45-primary); outline-offset: 2px; } /* ============ component: components/switcher/switcher.css ============ */ /* ========================================================================== SWITCHER (Figma: 339-204663 — segmented control) -------------------------------------------------------------------------- Două (sau mai multe) opțiuni lipite într-un pill. Cea selectată primește fundal strong-blue (#001d70) + text alb; restul, fundal gray + text grey. Starea selectată prin clasa .is-selected. Selecție unică în grup (.p45-switcher) din js/main.js → initSwitcher. Depinde de: css/style.css (tokens). Încarcă-l după style.css. ========================================================================== */ .p45-switcher { display: flex; align-items: center; width: 335px; max-width: 100%; height: 32px; border-radius: var(--p45-radius); /* 12px */ overflow: hidden; } .p45-switcher__option { flex: 1 0 0; display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 10px; border: 0; background: var(--p45-surface-gray); /* #f1f1f2 — neselectat */ color: var(--p45-text-grey); /* #6c7c93 */ 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; cursor: pointer; transition: background var(--p45-transition), color var(--p45-transition); } .p45-switcher__option.is-selected { background: var(--p45-surface-strong-blue); /* #001d70 */ color: var(--p45-text-white); } .p45-switcher__option:focus-visible { outline: 2px solid var(--p45-primary); outline-offset: -2px; } /* ============ component: components/skeleton/skeleton.css ============ */ /* ========================================================================== SKELETON (Figma: 452-44882 — placeholder „loading") -------------------------------------------------------------------------- .p45-skeleton = atom shimmer. Pune-l pe orice cutie dimensionată de tine (lățime/înălțime din layout). Gradientul diagonal e2ebfa→alb→e2ebfa baleiază ca să dea senzația de încărcare. Modificatorii de radius oglindesc tokenele. Cele două .p45-skeleton-card reproduc fidel cardurile din design. Depinde de: css/style.css (tokens). Încarcă-l după style.css. ========================================================================== */ .p45-skeleton { background-color: var(--p45-c-e2ebfa); background-image: linear-gradient( 110deg, var(--p45-c-e2ebfa) 25%, var(--p45-surface-white) 50%, var(--p45-c-e2ebfa) 75% ); background-size: 200% 100%; background-repeat: no-repeat; animation: p45-skeleton-shimmer 1.4s ease-in-out infinite; } @keyframes p45-skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* Respectă preferința de mișcare redusă: rămâne plăcuța statică. */ @media (prefers-reduced-motion: reduce) { .p45-skeleton { animation: none; } } /* Modificatori de radius (reutilizabili pe atom) */ .p45-skeleton--text { border-radius: 4px; } .p45-skeleton--sm { border-radius: var(--p45-radius-sm); } /* 8px */ .p45-skeleton--md { border-radius: var(--p45-radius); } /* 12px */ .p45-skeleton--lg { border-radius: var(--p45-radius-lg); } /* 16px */ .p45-skeleton--pill { border-radius: var(--p45-radius-pill); } .p45-skeleton--circle { border-radius: 50%; } /* -------------------------------------------------------------------------- Lazy-load: skeleton shimmer peste wrapper-ul imaginii până se încarcă. -------------------------------------------------------------------------- Aplicat de JS (initLazyImg) ca progressive enhancement → fără JS imaginile apar normal, fără placeholder. Wrapper-ul trebuie să fie poziționat; cele statice primesc `position: relative` mai jos (cele deja relative/absolute din componentă rămân neatinse, ca să nu le stricăm layout-ul). `::after` acoperă exact zona imaginii. ATENȚIE — shimmer-ul ocupă `::after`-ul wrapper-ului, care NU e al lui. Două wrappere din lista albă din initLazyImg îl folosesc deja pentru gradientele de lizibilitate: `.p45-vcard__media` (gradientul de jos) și `.p45-bento-card__media`. De aceea JS-ul ȘTERGE clasa `p45-img-skeleton` la `load`/`error`, în loc să adauge o clasă de stare care ar ascunde `::after`-ul: ascunderea ar fi anulat și gradientele componentelor, iar textul alb de pe carduri ar fi rămas peste poză, fără fundal. Dacă adaugi un wrapper nou în lista albă, verifică întâi că nu-și folosește deja `::after`. */ .p45-img-skeleton::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background-color: var(--p45-c-e2ebfa); background-image: linear-gradient( 110deg, var(--p45-c-e2ebfa) 25%, var(--p45-surface-white) 50%, var(--p45-c-e2ebfa) 75% ); background-size: 200% 100%; background-repeat: no-repeat; animation: p45-skeleton-shimmer 1.4s ease-in-out infinite; } /* wrappere statice care au nevoie de containing block pentru ::after */ .p45-place-card__img-wrap.p45-img-skeleton, .p45-tile__img-wrap.p45-img-skeleton, .p45-card-banner.p45-img-skeleton { position: relative; } @media (prefers-reduced-motion: reduce) { .p45-img-skeleton::after { animation: none; } } /* -------------------------------------------------------------------------- Carduri compuse — geometrie absolută, fidelă coordonatelor din Figma. -------------------------------------------------------------------------- */ .p45-skeleton-card { position: relative; overflow: hidden; background: var(--p45-surface-white); border: 1px solid var(--p45-border-blue-card); /* #e2ebfa */ max-width: 100%; } .p45-skeleton-card .p45-skeleton { position: absolute; } /* --- Orizontal: rând de listă (930×214, radius 24) --------------------- */ .p45-skeleton-card--horizontal { width: 930px; height: 214px; border-radius: var(--p45-radius-xl); } .p45-skeleton-card--horizontal .p45-skeleton-card__img { left: -1px; top: -1px; width: 296px; height: 214px; } .p45-skeleton-card--horizontal .p45-skeleton-card__title { left: 315px; top: 19px; width: 594px; height: 104px; border-radius: var(--p45-radius-lg); } .p45-skeleton-card--horizontal .p45-skeleton-card__line { left: 315px; top: 143px; width: 229px; height: 28px; border-radius: var(--p45-radius-sm); } .p45-skeleton-card--horizontal .p45-skeleton-card__subline { left: 315px; top: 179px; width: 312px; height: 14px; border-radius: var(--p45-radius-sm); } .p45-skeleton-card--horizontal .p45-skeleton-card__btn { left: 749px; top: 143px; width: 160px; height: 50px; border-radius: var(--p45-radius-sm); } /* --- Vertical: card (335×454, radius 16) ------------------------------- */ .p45-skeleton-card--vertical { width: 335px; height: 454px; border-radius: var(--p45-radius-lg); } .p45-skeleton-card--vertical .p45-skeleton-card__img { left: -1px; top: -1px; width: 335px; height: 210px; } .p45-skeleton-card--vertical .p45-skeleton-card__band { left: -1px; top: 213px; width: 335px; height: 65px; } .p45-skeleton-card--vertical .p45-skeleton-card__line { left: 19px; top: 290px; width: 106px; height: 20px; border-radius: 4px; } .p45-skeleton-card--vertical .p45-skeleton-card__subline { left: 19px; top: 318px; width: 237px; height: 32px; border-radius: 4px; } .p45-skeleton-card--vertical .p45-skeleton-card__btn { left: 134px; top: 383px; width: 180px; height: 50px; border-radius: 6px; } /* ============ component: components/overlay/overlay.css ============ */ /* ========================================================================== OVERLAY (Figma: 266-163755 — scrim full-screen) -------------------------------------------------------------------------- Strat semi-transparent peste tot viewport-ul, pentru fundalul modalelor / drawerelor / meniurilor. Ascuns implicit; se arată prin clasa .is-open. Culoarea scrim-ului (#353535 @ 60%) nu e în tokenele Figma → o ținem ca proprietate locală, ușor de suprascris pe instanță. Depinde de: css/style.css (tokens). Încarcă-l după style.css. ========================================================================== */ .p45-overlay { --p45-overlay-bg: rgba(53, 53, 53, 0.6); position: fixed; inset: 0; z-index: 1040; /* sub modal (1050), peste conținut */ background: var(--p45-overlay-bg); opacity: 0; visibility: hidden; transition: opacity var(--p45-transition), visibility var(--p45-transition); } .p45-overlay.is-open { opacity: 1; visibility: visible; } /* Blochează scroll-ul paginii cât e overlay-ul deschis (pus de JS pe ). */ body.p45-no-scroll { overflow: hidden; } /* ============ component: components/chip/chip.css ============ */ /* ========================================================================== CHIP (Figma: 266-170964 — etichetă filtru eliminabilă) -------------------------------------------------------------------------- Pill baby-blue cu text strong-blue (14 SemiBold) și buton „close" (16px). Click pe X elimină chip-ul (js/main.js → initChip). Iconița X moștenește culoarea din `color` prin sistemul .p45-icon. Depinde de: css/style.css (tokens). Încarcă-l după style.css. ========================================================================== */ .p45-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px; border-radius: 4px; /* din design (fără token dedicat în scală) */ background: var(--p45-surface-baby-blue); /* #d7f2fd */ color: var(--p45-text-strong-blue); /* #001d70 */ 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; } .p45-chip__close { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: inherit; /* X moștenește strong-blue */ cursor: pointer; } .p45-chip__close:focus-visible { outline: 2px solid var(--p45-primary); outline-offset: 2px; } /* ============ component: components/tooltip/tooltip.css ============ */ /* ========================================================================== TOOLTIP (Figma: 333-202383 — bulă cu săgeată) -------------------------------------------------------------------------- Bulă albă cu umbră fină, text 12px SemiBold (#101010), radius 4px și o săgeată de 13×5px desenată cu border (fără SVG). Săgeata moștenește umbra din `filter: drop-shadow` aplicat pe bulă (acoperă și pseudo-elementul). Variante: implicit săgeată jos; .p45-tooltip--top o mută sus. Depinde de: css/style.css (tokens). Încarcă-l după style.css. ========================================================================== */ .p45-tooltip { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 1px 6px 2px; border-radius: 4px; /* din design (fără token dedicat în scală) */ background: var(--p45-surface-white); color: var(--p45-text-main); font: var(--p45-fw-semibold) var(--p45-fs-caption) / var(--p45-lh-body) var(--p45-font); /* 12 SemiBold */ letter-spacing: var(--p45-ls); white-space: nowrap; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.08)); } /* Săgeata: triunghi 13×5, vârful spre țintă. */ .p45-tooltip::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 6.5px solid transparent; border-right: 6.5px solid transparent; } /* Implicit: săgeată jos (bula stă deasupra țintei). */ .p45-tooltip::after { top: 100%; border-top: 5px solid var(--p45-surface-white); } /* Variantă: săgeată sus (bula stă sub țintă). */ .p45-tooltip--top::after { top: auto; bottom: 100%; border-top: 0; border-bottom: 5px solid var(--p45-surface-white); } /* ============ component: components/navigation/atoms.css ============ */ /* ========================================================================== NAVIGATION / atomi (Figma: 512-11199) -------------------------------------------------------------------------- Piese de construcție pentru navigație. Componentele întregi (header, meniu mobil) se asamblează din ele în navigation.css. Depinde de: css/style.css (tokens, .p45-icon) și buttons.css (.p45-icon-btn). Încarcă-l după acestea. ========================================================================== */ /* --- _atom menu item: text + chevron opțional -------------------------- */ .p45-nav-item { display: inline-flex; align-items: center; gap: 4px; color: var(--p45-text-main); 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-decoration: none; } .p45-nav-item .p45-icon { width: 16px; height: 16px; } /* --- _atom status bar iPhone: mock device chrome (375×50) -------------- */ .p45-statusbar { display: flex; align-items: center; justify-content: space-between; width: 375px; max-width: 100%; height: 50px; padding: 21px 16px 0; /* notch/dynamic island sus */ background: var(--p45-surface-white); color: #000; } .p45-statusbar__time { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* aproximează SF Pro */ font-size: 17px; font-weight: 600; line-height: 22px; letter-spacing: 0; } .p45-statusbar__levels { display: inline-flex; align-items: center; gap: 7px; } .p45-statusbar__icon { display: block; } /* --- _atom top navigation: bară de sus (logotype / title) ------------- */ .p45-topnav { display: flex; align-items: center; gap: 8px; padding: 12px 20px; background: var(--p45-surface-white); } .p45-topnav--logotype { justify-content: space-between; } .p45-topnav .p45-logo { height: 18px; } /* din design (nu cei 32px impliciți) */ .p45-topnav__title { flex: 1 0 0; min-width: 0; color: var(--p45-text-main); } /* --- _atom accordeon: meniu mobil pe fundal închis -------------------- */ .p45-nav-accordion { width: 279px; max-width: 100%; } .p45-nav-accordion__item { border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding: 16px 0; } .p45-nav-accordion__head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; border: 0; background: transparent; color: var(--p45-text-white); font: var(--p45-fw-medium) var(--p45-fs-p2) / var(--p45-lh-body) var(--p45-font); /* 16 Medium */ letter-spacing: var(--p45-ls); text-align: left; cursor: pointer; } .p45-nav-accordion__chevron { width: 20px; height: 20px; transition: transform var(--p45-transition); } .p45-nav-accordion__item.is-open .p45-nav-accordion__chevron { transform: rotate(180deg); } /* chevron-down → up */ .p45-nav-accordion__list { display: none; flex-direction: column; gap: 16px; padding-top: 20px; } .p45-nav-accordion__item.is-open .p45-nav-accordion__list { display: flex; } .p45-nav-accordion__subitem { color: var(--p45-text-white); font: var(--p45-fw-medium) var(--p45-fs-p3) / var(--p45-lh-body) var(--p45-font); /* 14 Medium */ letter-spacing: var(--p45-ls); text-decoration: none; } /* ============ component: components/navigation/footer.css ============ */ /* ========================================================================== NAVIGATION / Footer (mobil) (Figma: 184-40624) -------------------------------------------------------------------------- Footer pe fundal închis (#0a0e29). Rândurile de meniu refolosesc atomul .p45-nav-accordion (navigation/atoms.css). Butoanele social sunt „glass" (translucide pe fundal închis, iconiță albă). Depinde de: css/style.css (tokens, .p45-icon), navigation/atoms.css. ========================================================================== */ .p45-footer { display: flex; flex-direction: column; align-items: center; gap: 36px; padding: 32px 20px 16px; background: var(--p45-surface-dark); color: var(--p45-text-white); } /* --- Brand + tagline --------------------------------------------------- */ .p45-footer__brand { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 276px; } .p45-footer__brand .p45-logo { height: 18px; } .p45-footer__tagline { text-align: center; color: var(--p45-text-white); font: var(--p45-fw-regular) var(--p45-fs-p3) / var(--p45-lh-heading) var(--p45-font); /* 14 Regular, lh 1.1 */ letter-spacing: var(--p45-ls); } /* --- Meniu: stivă de rânduri accordeon (gap din design) ---------------- */ .p45-footer__menu { display: flex; flex-direction: column; gap: 12px; width: 279px; max-width: 100%; } /* --- Iconițe social: butoane rotunde „glass" pe fundal închis ---------- */ .p45-footer__socials { display: flex; align-items: center; gap: 20px; } .p45-footer__social { display: inline-flex; align-items: center; justify-content: center; padding: 10px; background: rgba(245, 248, 253, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--p45-radius-pill); color: var(--p45-icon-white); } .p45-footer__social .p45-icon { width: 24px; height: 24px; } /* --- Copyright --------------------------------------------------------- */ .p45-footer__copyright { display: flex; flex-direction: column; gap: 16px; width: 100%; } .p45-footer__divider { height: 1px; width: 100%; background: rgba(255, 255, 255, 0.2); border-radius: 5px; } .p45-footer__copy { text-align: center; color: var(--p45-text-white); font: var(--p45-fw-regular) var(--p45-fs-caption) / var(--p45-lh-body) var(--p45-font); /* 12 Regular */ letter-spacing: var(--p45-ls); } /* ========================================================================== FOOTER — desktop, RESPONSIVE (Figma: 184-40727 desktop / 184-40624 mobil) -------------------------------------------------------------------------- Mobile-first: pe ecrane mici arată ca footer-ul mobil (coloană centrată, logo 18px, listele de meniu devin accordeoane colapsabile). De la 992px trece la layout-ul desktop pe coloane (logo 32px, newsletter pe rând, listele desfășurate). Reutilizează .p45-footer__social / __divider / __copy și butonul .p45-btn--main --lg. Toggle accordeon: js/main.js → initFooterMenu. ========================================================================== */ .p45-footer--desktop { gap: 36px; padding: 32px 20px 16px; } .p45-footer--desktop .p45-logo { height: 18px; } /* Conținut: stivuit & centrat pe mobil */ .p45-footer__content { display: flex; flex-direction: column; align-items: center; gap: 36px; width: 100%; } /* --- Stânga: logo + newsletter (centrat pe mobil) ---------------------- */ .p45-footer__left { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; width: 100%; max-width: 335px; } .p45-footer__newsletter { display: none; flex-direction: column; gap: 16px; width: 100%; } /* doar desktop */ .p45-footer__newsletter-title { color: var(--p45-text-white); font: var(--p45-fw-semibold) var(--p45-fs-p1) / var(--p45-lh-body) var(--p45-font); /* 18 SemiBold */ letter-spacing: var(--p45-ls); } .p45-footer__input-row { display: flex; flex-direction: column; gap: 8px; width: 100%; } .p45-footer__input-row .p45-btn { height: 54px; width: 100%; } /* aliniat cu input-ul */ .p45-footer__email { flex: 1 0 0; min-width: 0; height: 54px; padding: 16px; border-radius: var(--p45-radius-lg); /* 16px */ background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(226, 227, 229, 0.2); color: var(--p45-text-white); font: var(--p45-fw-regular) var(--p45-fs-p2) / var(--p45-lh-body) var(--p45-font); /* 16 Regular */ letter-spacing: var(--p45-ls); } .p45-footer__email::placeholder { color: rgba(255, 255, 255, 0.8); } .p45-footer__email:focus-visible { outline: 2px solid var(--p45-border-white); outline-offset: 1px; } .p45-footer__fineprint { width: 290px; max-width: 100%; color: var(--p45-text-white); font: var(--p45-fw-regular) var(--p45-fs-caption) / var(--p45-lh-body) var(--p45-font); /* 12 Regular */ letter-spacing: var(--p45-ls); } .p45-footer__fineprint b { font-weight: var(--p45-fw-bold); } /* --- Dreapta: liste de meniu — accordeoane pe mobil ------------------- */ .p45-footer__menus { display: flex; flex-direction: column; gap: 12px; /* spațiu între rândurile accordeon (ca în Figma) */ width: 100%; max-width: 279px; /* bloc meniu mai îngust decât divider-ul copyright (inset) */ } .p45-footer__section { display: flex; flex-direction: column; gap: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .p45-footer__section-title { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 0; border: 0; background: transparent; color: var(--p45-text-white); font: var(--p45-fw-semibold) var(--p45-fs-p1) / var(--p45-lh-body) var(--p45-font); /* 18 SemiBold */ letter-spacing: var(--p45-ls); text-align: left; cursor: pointer; } .p45-footer__section-chevron { width: 20px; height: 20px; flex: 0 0 auto; transition: transform var(--p45-transition); } .p45-footer__section.is-open .p45-footer__section-chevron { transform: rotate(180deg); } .p45-footer__links { display: none; flex-direction: column; gap: 14px; padding-bottom: 16px; } .p45-footer__section.is-open .p45-footer__links { display: flex; } .p45-footer__link { color: var(--p45-text-white); opacity: 0.8; font: var(--p45-fw-medium) var(--p45-fs-p2) / var(--p45-lh-body) var(--p45-font); /* 16 Medium */ letter-spacing: var(--p45-ls); text-decoration: none; } .p45-footer__link:hover { opacity: 1; } /* --- Desktop (≥992px): layout pe coloane ------------------------------- */ @media (min-width: 992px) { .p45-footer--desktop { gap: 42px; padding: 60px 80px 16px; } .p45-footer--desktop .p45-logo { height: 32px; } .p45-footer__content { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 40px; } .p45-footer__left { align-items: flex-start; text-align: left; gap: 48px; width: 308px; max-width: none; flex: 0 0 auto; } .p45-footer__brand { align-items: flex-start; max-width: none; } .p45-footer__tagline { display: none; } /* pe desktop: newsletter, nu tagline */ .p45-footer__newsletter { display: flex; } .p45-footer__input-row { flex-direction: row; align-items: center; } .p45-footer__input-row .p45-btn { width: auto; } .p45-footer__menus { flex-direction: row; gap: 40px; width: auto; max-width: none; flex: 1 1 auto; align-items: flex-start; } .p45-footer__section { gap: 20px; flex: 1 0 0; min-width: 0; border-bottom: 0; } .p45-footer__section-title { padding: 0; cursor: default; } .p45-footer__section-chevron { display: none; } /* fără accordeon pe desktop */ .p45-footer__links { display: flex; padding-bottom: 0; } /* mereu desfășurate */ } /* ============ component: components/dropdown/atoms.css ============ */ /* ========================================================================== DROPDOWN / atomi (Figma: 266-169692) -------------------------------------------------------------------------- Atom 1 — _atom dropdown list: un rând de rezultat (icon + text). Porțiunea care se potrivește cu căutarea e evidențiată albastru SemiBold (.p45-dropdown-item__match); restul rămâne negru Regular. Iconița variază după tip: country (flag), region (map-pin), hotel (home), circuit (routing), continent (global). Refolosește sistemul .p45-icon și flag-icons (deja în proiect). Depinde de: css/style.css (tokens, .p45-icon). Încarcă-l după style.css. ========================================================================== */ .p45-dropdown-item { display: flex; align-items: center; gap: 4px; width: 292px; max-width: 100%; padding: 16px 20px; border-bottom: 1px solid var(--p45-border-icon-button); /* #e2ebfa */ background: var(--p45-surface-white); color: var(--p45-text-main); font: var(--p45-fw-regular) var(--p45-fs-p2) / var(--p45-lh-body) var(--p45-font); /* 16 Regular */ letter-spacing: var(--p45-ls); text-decoration: none; cursor: pointer; } .p45-dropdown-item:hover { background: var(--p45-surface-light-blue); } .p45-dropdown-item .p45-icon { width: 20px; height: 20px; flex: 0 0 auto; color: var(--p45-icon-dark); } /* steag rotund 20px (flag-icons) */ .p45-dropdown-item__flag.fi { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; background-size: cover; background-position: center; } .p45-dropdown-item__label { flex: 1 0 0; min-width: 0; } /* porțiunea potrivită cu căutarea */ .p45-dropdown-item__match { color: var(--p45-text-blue); /* #0054e2 */ font-weight: var(--p45-fw-semibold); } /* ========================================================================== Atom 2 — _atom list items: titlu de grupă + listă de rânduri (atom 1) Un grup de un singur tip (Country / Regions / Hotels / Circuits / Continent). ========================================================================== */ .p45-dropdown-list { display: flex; flex-direction: column; width: 302px; max-width: 100%; } .p45-dropdown-list__title { padding: 0 20px 16px; color: var(--p45-text-main); font: var(--p45-fw-semibold) var(--p45-fs-p1) / var(--p45-lh-body) var(--p45-font); /* 18 SemiBold */ letter-spacing: var(--p45-ls); } /* în interiorul grupei rândurile sunt pe toată lățimea */ .p45-dropdown-list .p45-dropdown-item { width: 100%; } /* ============ component: components/dropdown/dropdown.css ============ */ /* ========================================================================== DROPDOWN (Figma: 266-170345) -------------------------------------------------------------------------- Panou de rezultate: card alb cu colțuri rotunjite + umbră, care conține una sau mai multe grupe .p45-dropdown-list (atomul 2), stivuite cu gap 40. Poziționarea sub câmpul-trigger rămâne în seama integratorului. Depinde de: css/style.css (tokens) și dropdown/atoms.css. Încarcă-l după ele. ========================================================================== */ .p45-dropdown { display: flex; flex-direction: column; gap: 40px; width: 335px; max-width: 100%; padding: 20px 0; background: var(--p45-surface-white); border-radius: var(--p45-radius-lg); /* 16px */ filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2)); } /* grupele umplu lățimea panoului */ .p45-dropdown .p45-dropdown-list { width: 100%; } /* ============ component: components/star-rating/star-rating.css ============ */ /* ========================================================================== STAR RATING (Figma: 50-31416) -------------------------------------------------------------------------- Rând de stele galbene umplute. Numărul de stele e dat de markup (1–5). Mărimi: md (14px, implicit) / lg (20px, .p45-star-rating--lg). Refolosește iconița .p45-icon--star (currentColor → galben). Depinde de: css/style.css (tokens, .p45-icon). Încarcă-l după style.css. ========================================================================== */ .p45-star-rating { display: inline-flex; align-items: center; color: var(--p45-yellow); /* #febe00 — stelele moștenesc culoarea */ } .p45-star-rating .p45-icon { width: 14px; height: 14px; } /* md */ .p45-star-rating--lg .p45-icon { width: 20px; height: 20px; } /* ============ component: components/modal/atoms.css ============ */ /* ========================================================================== MODAL / atomi (Figma: 513-1310 „_atoms modal") -------------------------------------------------------------------------- Piese de construcție pentru modalul drawer: _atom numbers → .p45-stepper (− valoare +) _atom button -+ → .p45-stepper__btn (rotund gri, plus/minus/disabled) _atom list item → .p45-list-item (text + descriere + stepper) _atom select block → .p45-select-block (default / .is-selected) _atom type transport→ .p45-select-group (stivă de select-block-uri) _atom buttons → .p45-button-stack (butoane secondary full-width) Refolosește: .p45-btn (buttons.css), sistemul .p45-icon. Modalul întreg se asamblează din ele în modal.css/html. Depinde de: css/style.css (tokens, .p45-icon) și buttons.css. După ele. ========================================================================== */ /* --- _atom numbers / button -+ : stepper -------------------------------- */ .p45-stepper { display: inline-flex; align-items: center; gap: 2px; } .p45-stepper__btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px; border: 0; background: var(--p45-surface-gray); /* #f1f1f2 */ border-radius: var(--p45-radius-pill); color: var(--p45-icon-dark); cursor: pointer; } .p45-stepper__btn .p45-icon { width: 16px; height: 16px; } .p45-stepper__btn:disabled { color: var(--p45-icon-secondary); cursor: not-allowed; } /* minus disabled = gri */ .p45-stepper__value { width: 30px; text-align: center; color: var(--p45-text-main); font: var(--p45-fw-semibold) var(--p45-fs-p2) / var(--p45-lh-body) var(--p45-font); /* 16 SemiBold */ letter-spacing: var(--p45-ls); } /* --- _atom list item: text + descriere + stepper ----------------------- */ .p45-list-item { display: flex; align-items: center; gap: 8px; width: 100%; } .p45-list-item__text { display: flex; flex-direction: column; flex: 1 0 0; min-width: 0; } .p45-list-item__label { color: var(--p45-text-main); font: var(--p45-fw-semibold) var(--p45-fs-p2) / var(--p45-lh-body) var(--p45-font); /* 16 SemiBold */ letter-spacing: var(--p45-ls); } .p45-list-item__sub { color: var(--p45-text-grey); font: var(--p45-fw-regular) var(--p45-fs-caption) / var(--p45-lh-body) var(--p45-font); /* 12 Regular */ letter-spacing: var(--p45-ls); } /* --- _atom select block (+ type transport = stivă) --------------------- */ .p45-select-group { display: flex; flex-direction: column; gap: 10px; } .p45-select-block { display: flex; align-items: center; width: 100%; padding: 14px 18px; border: 1px solid var(--p45-border-icon-button); /* #e2ebfa */ border-radius: var(--p45-radius); /* 12px */ background: var(--p45-surface-white); color: var(--p45-text-main); 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: left; cursor: pointer; } .p45-select-block.is-selected { background: var(--p45-surface-light-blue); /* #f9fbff */ border: 2px solid var(--p45-border-blue); /* #0054e2 */ padding: 13px 17px; /* −1px ca să compensez borderul de 2px → fără salt */ } /* --- _atom buttons: stivă de butoane secondary ------------------------- */ .p45-button-stack { display: flex; flex-direction: column; gap: 10px; } .p45-button-stack .p45-btn { width: 100%; } /* ============ component: components/modal/modal.css ============ */ /* ========================================================================== MODAL (drawer / bottom sheet) (Figma: 266-163932) -------------------------------------------------------------------------- Foaie ancorată jos, peste overlay. Panou alb cu colțuri sus rotunjite, handle de swipe, titlu, conținut (liste / transport / butoane — atomii din atoms.css) și un buton principal fix jos. Glisează în sus la deschidere. Deschidere: [data-modal-open="#id"]. Închidere: tap pe overlay/handle, [data-modal-close], Escape. Comportament în js/main.js → initModal. Depinde de: css/style.css, buttons.css, modal/atoms.css, overlay.css. ========================================================================== */ .p45-modal { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050; /* peste overlay (1040) */ width: 100%; max-width: 375px; margin-inline: auto; max-height: 90vh; display: flex; flex-direction: column; background: var(--p45-surface-white); border-radius: 24px 24px 0 0; transform: translateY(100%); visibility: hidden; transition: transform var(--p45-transition), visibility var(--p45-transition); } .p45-modal.is-open { transform: translateY(0); visibility: visible; } /* Cap (titlu + conținut), derulabil dacă depășește înălțimea */ .p45-modal__head { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 8px 20px 32px; overflow-y: auto; } .p45-modal__swipe { width: 51px; height: 5px; flex: 0 0 auto; border-radius: var(--p45-radius-sm); /* 8px */ background: var(--p45-surface-gray); border: 0; cursor: pointer; } .p45-modal__title { width: 100%; color: var(--p45-text-main); font: var(--p45-fw-semibold) var(--p45-fs-p1) / var(--p45-lh-body) var(--p45-font); /* 18 SemiBold */ letter-spacing: var(--p45-ls); } .p45-modal__lists { display: flex; flex-direction: column; gap: 18px; width: 100%; } /* Buton principal, fix jos */ .p45-modal__foot { display: flex; flex-direction: column; padding: 8px 20px 16px; background: var(--p45-surface-white); } .p45-modal__foot .p45-btn { width: 100%; } /* ============ component: components/form/form.css ============ */ /* ========================================================================== FORM (newsletter) RESPONSIVE (Figma: desktop 261-141774 / mobil 79-32231) -------------------------------------------------------------------------- Card cu imagine + formular de abonare. Mobile-first: imagine sus, câmpuri jos. De la 992px: imagine în stânga, câmpuri în dreapta. Imaginea-subiect (flamingo/femeie) depășește marginea de sus (clip-path lasă doar sus liber). Refolosește: .p45-checkbox (checkbox.css) și .p45-btn--main --lg (buttons.css). Depinde de: css/style.css (tokens). Încarcă-l după acestea. ========================================================================== */ .p45-form { display: flex; flex-direction: column; width: 100%; max-width: 335px; margin-inline: auto; background: var(--p45-surface-white); border-radius: 32px; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.08)); } /* --- Imagine + subiect care depășește marginea de sus ------------------ Fundalul (plaja) e clipat la cadru de .p45-form__bg-wrap (overflow hidden + colțuri rotunjite). Subiectul (femeia+flamingo) e copil direct al media și NU e clipat → depășește marginea de sus (cardul nu are overflow hidden). */ .p45-form__media { position: relative; height: 199px; /* mobil */ flex: 0 0 auto; } .p45-form__bg-wrap { position: absolute; inset: 0; overflow: hidden; border-radius: 32px 32px 0 0; /* mobil: doar colțurile de sus */ } /* Fundalul = plaja cu figura întreagă, poziționat exact ca în Figma (același crop pe mobil și desktop: lat 298.85% ≈1001px, decalat la stânga/sus). */ .p45-form__bg { position: absolute; width: 298.85%; height: auto; /* ≈500px, raport natural păstrat (fără distorsiune) */ left: -94.43%; top: -117px; max-width: none; } /* Subiectul (close-up femeie+flamingo) = accent care iese 63px peste marginea de sus; aceleași valori pe mobil și desktop (ca în Figma). */ .p45-form__subject { position: absolute; left: 28px; right: auto; top: -63px; bottom: auto; width: calc(100% - 43.42px); /* 335 - 28 - 15.42 (img înlocuit → lățime explicită) */ height: auto; /* înălțime din raportul natural (≈497/347) */ max-width: none; pointer-events: none; } /* --- Corpul cu titlu + câmpuri ----------------------------------------- */ .p45-form__body { display: flex; flex-direction: column; gap: 24px; padding: 16px 22px 22px; } /* .p45-form__group = wrapper-ul intermediar din platformă (#newsletter-form-fields), pe care JS-ul îl ascunde după trimitere ca să afișeze mesajul de răspuns. În machetă nu există: acolo inputurile, consimțământul și butonul sunt copii DIRECȚI ai formularului, deci primesc gap-ul de mai jos. Wrapper-ul rupea lanțul de flex, iar cele trei se lipeau unul de altul (gap 0). Poartă aceleași declarații ca .p45-form__fields, ca spațierea să rămână una singură. */ .p45-form__fields, .p45-form__group { display: flex; flex-direction: column; gap: 16px; } .p45-form__head { display: flex; flex-direction: column; gap: 8px; } .p45-form__title { color: var(--p45-text-strong-blue); font: var(--p45-fw-bold) var(--p45-fs-p1) / var(--p45-lh-body) var(--p45-font); /* 18 Bold (mobil) */ letter-spacing: var(--p45-ls); } .p45-form__subtitle { color: var(--p45-text-secondary); font: var(--p45-fw-regular) var(--p45-fs-p3) / var(--p45-lh-heading) var(--p45-font); /* 14 Regular lh1.1 (mobil) */ letter-spacing: var(--p45-ls); } /* --- Câmpuri text ------------------------------------------------------- */ .p45-form__inputs { display: flex; flex-direction: column; gap: 12px; } .p45-form__row { display: flex; gap: 12px; } .p45-form__input { flex: 1 0 0; min-width: 0; width: 100%; height: 54px; padding: 16px; border: 1px solid var(--p45-border-input); /* #e2e3e5 */ border-radius: var(--p45-radius-lg); /* 16px */ background: var(--p45-surface-white); color: var(--p45-text-main); font: var(--p45-fw-regular) var(--p45-fs-p2) / var(--p45-lh-body) var(--p45-font); /* 16 Regular */ letter-spacing: var(--p45-ls); } .p45-form__input::placeholder { color: var(--p45-text-grey); } .p45-form__input:focus-visible { outline: none; border: 2px solid var(--p45-border-blue); padding: 15px; } /* --- Consimțământ (checkbox + text) ------------------------------------ */ .p45-form__consent { display: flex; align-items: flex-start; gap: 6px; } .p45-form__consent .p45-checkbox { flex: 0 0 auto; } .p45-form__consent-text { padding: 5px 0; color: var(--p45-text-main); font: var(--p45-fw-regular) var(--p45-fs-caption) / var(--p45-lh-body) var(--p45-font); /* 12 Regular */ letter-spacing: var(--p45-ls); } .p45-form__consent-text a { color: var(--p45-text-blue); text-decoration: none; } .p45-form__submit { width: 100%; } /* ========================================================================== Desktop (≥992px): imagine în stânga, câmpuri în dreapta ========================================================================== */ @media (min-width: 992px) { .p45-form { flex-direction: row; max-width: 800px; padding: 12px; gap: 46px; align-items: stretch; } /* Imagine: cadru fix 335×383 (ca în Figma). Fundalul și subiectul folosesc același crop ca pe mobil (definit în baza componentei) → figura întreagă + accentul care iese peste marginea de sus. */ .p45-form__media { flex: 0 0 335px; width: 335px; height: 383px; } .p45-form__bg-wrap { border-radius: 20px; } .p45-form__body { gap: 20px; padding: 28px 28px 28px 0; justify-content: center; } .p45-form__fields, .p45-form__group { gap: 20px; } .p45-form__title { font-size: var(--p45-fs-h5); line-height: var(--p45-lh-heading); } /* 24 Bold lh1.1 */ .p45-form__subtitle { font-size: var(--p45-fs-p2); line-height: var(--p45-lh-body); } /* 16 Regular lh1.2 */ } /* ============ component: components/partners/partners.css ============ */ /* ========================================================================== PARTNERS RESPONSIVE (Figma: desktop 261-141557 / mobil 261-123427) -------------------------------------------------------------------------- Strip cu logo-uri de parteneri (companii aeriene) pe fundal alb, ca un carusel infinit (marquee): rândul 1 derulează spre stânga, rândul 2 spre dreapta. Fiecare track conține logo-urile de 2 ori (set + duplicat) ca bucla translateX(-50%) să fie continuă. Spațiul dintre logo-uri vine din margin-right (constant), ca -50% să cadă exact pe un set → fără salt. Pauză la hover; respectă prefers-reduced-motion. Depinde de: css/style.css (tokens). Încarcă-l după style.css. ========================================================================== */ .p45-partners { background: var(--p45-surface-white); padding: 20px 0; overflow: hidden; } .p45-partners__row { overflow: hidden; } .p45-partners__row + .p45-partners__row { margin-top: 16px; } .p45-partners__track { display: flex; align-items: center; width: max-content; animation: p45-marquee-left 28s linear infinite; } .p45-partners__row--rtl .p45-partners__track { animation-name: p45-marquee-right; } .p45-partners__track:hover { animation-play-state: paused; } .p45-partners__logo { display: inline-flex; align-items: center; justify-content: center; height: 32px; /* mobil */ margin-right: 24px; /* spațiu constant (parte din bucla seamless) */ flex: 0 0 auto; } .p45-partners__logo img { max-height: 100%; max-width: 132px; /* cea mai lată celulă mobilă */ width: auto; object-fit: contain; } /* 3 copii per rând → mutăm cu exact un set (-33.333%); celelalte 2 seturi acoperă mereu viewport-ul, deci bucla e fără gol pe ecrane până la ~2500px. */ @keyframes p45-marquee-left { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } } @keyframes p45-marquee-right { from { transform: translateX(-33.3333%); } to { transform: translateX(0); } } /* Desktop: logo-uri mai mari, derulare mai lentă */ @media (min-width: 992px) { /* Strip-ul rămâne la 20px sus/jos pe ambele breakpoint-uri (cerință directă) — override-ul de 40px a fost eliminat. Cei 40px de mai jos sunt distanța DINTRE cele două rânduri de logo-uri, nu padding-ul strip-ului. */ .p45-partners__row + .p45-partners__row { margin-top: 40px; } .p45-partners__track { animation-duration: 45s; } .p45-partners__logo { height: 100px; margin-right: 72px; } .p45-partners__logo img { max-height: 66px; max-width: 175px; } } @media (prefers-reduced-motion: reduce) { .p45-partners__track { animation: none; } } /* ============ component: components/about-us/atoms.css ============ */ /* ========================================================================== ABOUT US / atomi (Figma: 80-33125 „_atom about us in numbers") -------------------------------------------------------------------------- Card de statistică: număr mare (42 Bold blue) + titlu (16 Bold strong-blue) + descriere (12 Regular grey). Pe fundal alb. Componenta About us întreagă se asamblează din mai mulți astfel de atomi. Depinde de: css/style.css (tokens). Încarcă-l după style.css. ========================================================================== */ .p45-stat { display: flex; flex-direction: column; gap: 8px; padding: 16px; width: 188px; max-width: 100%; background: var(--p45-surface-white); } .p45-stat__number { color: var(--p45-text-blue); /* #0054e2 */ font: var(--p45-fw-bold) var(--p45-fs-h1) / var(--p45-lh-heading) var(--p45-font); /* 42 Bold lh1.1 */ letter-spacing: var(--p45-ls-tight); /* -2% */ } .p45-stat__title { color: var(--p45-text-strong-blue); /* #001d70 */ font: var(--p45-fw-bold) var(--p45-fs-p2) / var(--p45-lh-body) var(--p45-font); /* 16 Bold */ letter-spacing: var(--p45-ls); } .p45-stat__desc { color: var(--p45-text-grey); /* #6c7c93 */ font: var(--p45-fw-regular) var(--p45-fs-caption) / var(--p45-lh-body) var(--p45-font); /* 12 Regular */ letter-spacing: var(--p45-ls); } /* ============ component: components/about-us/about-us.css ============ */ /* ========================================================================== ABOUT US RESPONSIVE (Figma: mobil 82-33145 / desktop 517-22797) -------------------------------------------------------------------------- Grilă de carduri „in numbers" (atom .p45-stat) pe fundal gri; gap-ul de 1px lasă fundalul gri să apară ca separatoare subțiri între celulele albe. Container rotunjit cu colțurile tăiate. Mobil: 2×2; desktop: 4 pe un rând. Depinde de: css/style.css (tokens) și about-us/atoms.css (.p45-stat). ========================================================================== */ .p45-about { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* mobil: 2 coloane (minmax 0 → nu depășește containerul) */ gap: 1px; width: 100%; max-width: 1280px; margin-inline: auto; background: var(--p45-surface-gray); /* #f1f1f2 — apare în gap ca separator */ border-radius: var(--p45-radius-lg); /* 16px */ overflow: hidden; } /* atomul umple celula */ .p45-about .p45-stat { width: auto; min-height: 174px; } @media (min-width: 992px) { .p45-about { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* desktop: 4 pe un rând */ } /* ============ component: components/price-badge/price-badge.css ============ */ /* ========================================================================== COMPONENTĂ: price-badge (Figma: Amount/Price) -------------------------------------------------------------------------- Depinde de: css/style.css (tokens, sistemul .p45-icon). Linkează-l în index.html , după style.css. Axe de variație: - dimensiune: implicit md; .p45-price-badge--lg → preț 38px - culoare: .p45-price-badge--blue (fundal albastru, text alb) .p45-price-badge--white (fundal alb, preț albastru) - info: .p45-price-badge__info (blue: persoane + nopți, cu divider) .p45-price-badge__nights (white: nopți „/ per person") - bento: .p45-price-badge--bento (stivuit vertical, pill translucid; peste imaginile cardurilor Bento — vezi components/bento) ========================================================================== */ .p45-price-badge { display: inline-flex; align-items: center; gap: 6px; /* md: între amount și info */ padding: 2px var(--p45-space-2); /* 2px 8px */ border-radius: 4px; font-family: var(--p45-font); letter-spacing: var(--p45-ls); white-space: nowrap; } /* --- Amount: „from" + preț --------------------------------------------- */ .p45-price-badge__amount { display: inline-flex; align-items: baseline; gap: 2px; } .p45-price-badge__from { font-weight: var(--p45-fw-regular); font-size: var(--p45-fs-caption); /* 12px */ line-height: var(--p45-lh-body); /* 1.2 */ } .p45-price-badge__price { font-weight: var(--p45-fw-bold); font-size: var(--p45-fs-p1); /* 18px */ line-height: var(--p45-lh-body); } /* --- Stil: Blue -------------------------------------------------------- */ .p45-price-badge--blue { background: var(--p45-surface-brand-blue); color: var(--p45-text-white); /* moștenit de „from", preț, info, iconițe */ } /* --- Stil: White ------------------------------------------------------- */ .p45-price-badge--white { background: var(--p45-surface-white); } .p45-price-badge--white .p45-price-badge__from { color: var(--p45-text-main); } .p45-price-badge--white .p45-price-badge__price { color: var(--p45-text-blue); } /* --- Info (blue): divider + persoane + nopți --------------------------- */ .p45-price-badge__info { display: inline-flex; align-items: center; gap: 6px; } .p45-price-badge__divider { width: 1px; height: 14px; background: var(--p45-border-white); opacity: .32; border-radius: 9px; } .p45-price-badge__group { display: inline-flex; align-items: center; gap: 4px; } .p45-price-badge__group--nights { gap: 2px; } .p45-price-badge__value { font-weight: var(--p45-fw-regular); font-size: var(--p45-fs-p3); /* 14px */ line-height: var(--p45-lh-heading); /* 1.1 */ } /* --- Nights (white): moon + „/ per person" ----------------------------- */ .p45-price-badge__nights { display: inline-flex; align-items: center; gap: 2px; color: var(--p45-text-blue); /* dă culoare iconiței moon (currentColor) */ } .p45-price-badge__pernight { font-weight: var(--p45-fw-semibold); font-size: var(--p45-fs-caption); /* 12px */ line-height: var(--p45-lh-body); color: var(--p45-text-blue); } /* --- Iconițe (suprascriu dimensiunea implicită 20px a .p45-icon) ------- */ .p45-price-badge__icon { width: 12px; height: 12px; } /* --- Variantă peste imagine/video: fundal transparent, tot textul alb --- */ /* Folosită în card-urile video (Cards stack), unde badge-ul stă pe foto. */ .p45-price-badge--on-dark { background: transparent; } .p45-price-badge--on-dark .p45-price-badge__from, .p45-price-badge--on-dark .p45-price-badge__price, .p45-price-badge--on-dark .p45-price-badge__nights, .p45-price-badge--on-dark .p45-price-badge__pernight { color: var(--p45-text-white); } /* ====================================================================== Dimensiune: LG ====================================================================== */ .p45-price-badge--lg { gap: 10px; border-radius: 6px; } .p45-price-badge--lg .p45-price-badge__from { font-size: var(--p45-fs-p3); /* 14px */ line-height: var(--p45-lh-heading); } .p45-price-badge--lg .p45-price-badge__price { font-size: var(--p45-fs-h2); /* 38px */ line-height: var(--p45-lh-heading); } .p45-price-badge--lg .p45-price-badge__info { gap: 8px; } .p45-price-badge--lg .p45-price-badge__divider { height: 18px; } .p45-price-badge--lg .p45-price-badge__value { font-size: var(--p45-fs-p2); /* 16px */ line-height: var(--p45-lh-body); } .p45-price-badge--lg .p45-price-badge__icon { width: 16px; height: 16px; } /* lg cu info: padding dreapta mai mare (din design: pl 8 / pr 12) */ .p45-price-badge--lg:has(.p45-price-badge__info, .p45-price-badge__nights) { padding-right: var(--p45-space-3); /* 12px */ } /* md · white · cu info: radius 8px (specific din design) */ .p45-price-badge--white:not(.p45-price-badge--lg):has(.p45-price-badge__nights) { border-radius: 8px; } /* ====================================================================== Variantă BENTO (Figma: _atom bento card → PriceBadge) Badge albastru STIVUIT pe verticală: „from " deasupra, iar info-ul într-un pill translucid alb dedesubt (lună + nopți + „/ per person"). Folosit doar peste imaginile cardurilor Bento. Combină cu --lg pentru prețul mare (38px) de pe tabletă/desktop. ====================================================================== */ .p45-price-badge--bento { flex-direction: column; align-items: flex-start; gap: 2px; padding: 2px 4px 4px; /* sm: 2px sus, 4px restul */ border-radius: var(--p45-radius); /* 12px */ } .p45-price-badge--bento.p45-price-badge--lg { gap: 2px; padding: 2px 6px 6px; /* lg: 6px lateral/jos */ border-radius: var(--p45-radius); /* 12px (nu 6px ca lg-ul implicit) */ } /* sm: amount-ul mai are 2px lateral (în Figma „from" stă la 6px de margine în ambele mărimi — la lg compensează padding-ul mai mare al badge-ului) */ .p45-price-badge--bento .p45-price-badge__amount { padding: 0 2px; } .p45-price-badge--bento.p45-price-badge--lg .p45-price-badge__amount { padding: 0; } /* Pill translucid cu info-ul (lună + nopți + „/ per person") */ .p45-price-badge__pill { display: inline-flex; align-items: center; gap: 2px; padding: 1px 5px; border-radius: var(--p45-radius-pill); background: rgba(255, 255, 255, 0.2); } .p45-price-badge__nights-count { font-weight: var(--p45-fw-semibold); font-size: var(--p45-fs-caption); /* 12px */ line-height: var(--p45-lh-body); /* 1.2 */ } .p45-price-badge__per { font-weight: var(--p45-fw-regular); font-size: var(--p45-fs-caption); /* 12px */ line-height: var(--p45-lh-body); } /* lună mereu 12px în pill (chiar și pe badge-ul --lg) */ .p45-price-badge__pill .p45-price-badge__icon { width: 12px; height: 12px; } /* ============ component: components/price-card/price-card.css ============ */ /* ========================================================================== COMPONENTĂ: price-card (Figma: Amount/Price — variantă „stacked") -------------------------------------------------------------------------- Depinde de: css/style.css (tokens, sistemul .p45-icon). Linkează-l în index.html , după style.css. Card vertical albastru cu amount („from ") și pastilă translucidă (nopți „/ per person") dedesubt. - dimensiune: lg (implicit, preț 38px) | .p45-price-card--sm (preț 18px) ========================================================================== */ .p45-price-card { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 2px 6px 6px; /* pt 2 · px 6 · pb 6 */ border-radius: var(--p45-radius); /* 12px */ background: var(--p45-surface-brand-blue); color: var(--p45-text-white); /* moștenit de text și iconiță */ font-family: var(--p45-font); letter-spacing: var(--p45-ls); } /* --- Amount: „from" + preț --------------------------------------------- */ .p45-price-card__amount { display: inline-flex; align-items: baseline; gap: 2px; white-space: nowrap; } .p45-price-card__from { font-weight: var(--p45-fw-regular); font-size: var(--p45-fs-p3); /* 14px */ line-height: var(--p45-lh-heading); /* 1.1 */ } .p45-price-card__price { font-weight: var(--p45-fw-bold); font-size: var(--p45-fs-h2); /* 38px */ line-height: var(--p45-lh-heading); } /* --- Info: pastilă translucidă cu nopți „/ per person" ----------------- */ .p45-price-card__info { display: inline-flex; align-items: center; gap: 2px; padding: 1px 5px; border-radius: 29px; background: rgba(255, 255, 255, .2); white-space: nowrap; } .p45-price-card__nights { display: inline-flex; align-items: center; gap: 4px; } .p45-price-card__icon { width: 12px; height: 12px; } .p45-price-card__nights-val { font-weight: var(--p45-fw-semibold); font-size: var(--p45-fs-caption); /* 12px */ line-height: var(--p45-lh-body); /* 1.2 */ } .p45-price-card__per { font-weight: var(--p45-fw-regular); font-size: var(--p45-fs-caption); /* 12px */ line-height: var(--p45-lh-body); } /* ====================================================================== Dimensiune: SM ====================================================================== */ .p45-price-card--sm { padding: 2px 4px 4px; /* pt 2 · px 4 · pb 4 */ } .p45-price-card--sm .p45-price-card__amount { padding: 0 2px; } .p45-price-card--sm .p45-price-card__from { font-size: var(--p45-fs-caption); /* 12px */ line-height: var(--p45-lh-body); } .p45-price-card--sm .p45-price-card__price { font-size: var(--p45-fs-p1); /* 18px */ line-height: var(--p45-lh-body); } /* ============ component: components/calendar/atoms.css ============ */ /* ========================================================================== COMPONENTĂ: calendar / atomi (Figma: _atom calendar) -------------------------------------------------------------------------- Depinde de: css/style.css (tokens, sistemul .p45-icon). Linkează-l în index.html , după style.css. Atomii: _atom month (header), _atom days (zile), _atom numbers (celulă cu stări). Calendarul asamblat (grile date/luni) e în calendar.css. ========================================================================== */ /* ===== _atom month — header lună + navigare =========================== */ .p45-cal-month { display: flex; align-items: center; justify-content: space-between; gap: var(--p45-space-3); /* 12px */ font-family: var(--p45-font); } .p45-cal-month__label { font-weight: var(--p45-fw-semibold); font-size: var(--p45-fs-p1); /* 18px */ line-height: var(--p45-lh-body); /* 1.2 */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); } .p45-cal-month__nav { display: inline-flex; align-items: center; gap: var(--p45-space-5); /* 20px */ } .p45-cal-month__btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--p45-icon-blue); } .p45-cal-month__btn .p45-icon { width: 20px; height: 20px; } /* ===== _atom days — rând zile săptămână ================================ */ .p45-cal-days { display: flex; align-items: center; gap: 2px; border-top: 1px solid var(--p45-border-input); border-bottom: 1px solid var(--p45-border-input); } .p45-cal-days__day { flex: 1 0 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; padding: 10px; font-family: var(--p45-font); font-weight: var(--p45-fw-semibold); font-size: var(--p45-fs-caption); /* 12px */ line-height: var(--p45-lh-body); letter-spacing: var(--p45-ls); color: var(--p45-text-main); } /* ===== _atom numbers — celulă zi/lună cu stări ======================== */ .p45-cal-num { display: inline-flex; align-items: center; justify-content: center; width: 42px; padding: 10px; border-radius: 6px; font-family: var(--p45-font); font-weight: var(--p45-fw-semibold); font-size: var(--p45-fs-p2); /* 16px */ line-height: var(--p45-lh-body); letter-spacing: var(--p45-ls); text-align: center; color: var(--p45-text-main); /* default */ } .p45-cal-num--disabled { color: var(--p45-text-grey); } .p45-cal-num--available { background: var(--p45-surface-baby-blue); color: var(--p45-text-strong-blue); } /* dată disponibilă — albastru deschis (design) */ .p45-cal-num--selected { background: var(--p45-surface-brand-blue); color: var(--p45-text-white); } .p45-cal-num--recommended { background: var(--p45-surface-baby-blue); color: var(--p45-text-strong-blue); } .p45-cal-num--range { background: var(--p45-element-blue); color: var(--p45-text-blue); } .p45-cal-num--unavailable { background: var(--p45-surface-gray); color: var(--p45-text-grey); } .p45-cal-num--empty { opacity: 0; } /* „no date" — celulă goală, păstrează gridul */ /* Zilele din lunile vecine (Windows-style): SELECTABILE, cu aceeași logică de stare ca zilele lunii afișate (trecut/indisponibil primesc --disabled și rămân blocate). Retragerea vizuală o face `opacity`, nu o culoare fixă: așa compune cu orice stare — o zi vecină fără stare se citește gri deschis, iar una selectată sau din interval își păstrează fundalul, ca selecția să se vadă. */ .p45-cal-num--adjacent { font-weight: var(--p45-fw-regular); opacity: .45; } /* ============ component: components/calendar/calendar.css ============ */ /* ========================================================================== COMPONENTĂ: calendar (Figma: Calendar — type dates / month) -------------------------------------------------------------------------- Depinde de: css/style.css (tokens) + components/calendar/atoms.css (atomii _atom month / _atom days / _atom numbers). Linkează ambele înainte, în index.html . Asamblarea: header (16px) + corp [zile + grilă, gap 2px]. Celulele sunt atomii .p45-cal-num, întinse pe coloană. ========================================================================== */ .p45-calendar { display: inline-flex; flex-direction: column; gap: var(--p45-space-4); /* 16px între header și corp */ width: 291px; font-family: var(--p45-font); } /* Corpul: rândul de zile + grila, lipite la 2px ------------------------ */ .p45-calendar__body { display: flex; flex-direction: column; gap: 2px; width: 100%; } /* Grila de celule — gap 2px ca în design ------------------------------- */ .p45-calendar__grid { display: grid; gap: 2px; width: 100%; } .p45-calendar__grid--dates { grid-template-columns: repeat(7, 1fr); } .p45-calendar__grid--months { grid-template-columns: repeat(4, 1fr); } /* În grilă, celula nu mai are lățime fixă (42px din demo-ul de stări): se întinde pe coloana 1fr. */ .p45-calendar__grid .p45-cal-num { width: auto; display: flex; } /* ============ component: components/cards-stack/atoms.css ============ */ /* ========================================================================== COMPONENTĂ: cards-stack / atomi (Figma: _atom arrows + _atom video card) -------------------------------------------------------------------------- Depinde de: css/style.css (tokens, .p45-icon) + atomii refolosiți: - buttons.css → .p45-btn (buton „Explore"), .p45-icon-btn (+ --white/--glass) - price-badge.css → .p45-price-badge (+ --on-dark) pentru prețul de pe card Încarcă-le pe toate înaintea acestui fișier. Stackul complet (carusel cu săgeți) vine în cards-stack.html. ========================================================================== */ /* ===== _atom arrows — navigare carusel ================================ */ .p45-arrows { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--p45-space-3); /* 12px */ width: 100px; } /* ===== _atom video card =============================================== */ .p45-vcard { position: relative; width: 335px; height: 494px; border-radius: 32px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.24); font-family: var(--p45-font); color: var(--p45-text-white); } /* --- Media (imagine/video) + gradiente sus/jos ------------------------ */ .p45-vcard__media { position: absolute; inset: 0; } .p45-vcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .p45-vcard__media::before { /* gradient sus */ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 30%, rgba(29, 29, 29, 0.3) 50%, rgba(102, 102, 102, 0) 100%); } .p45-vcard__media::after { /* gradient jos */ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 412px; background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 23%, rgba(29, 29, 29, 0.45) 41%, rgba(102, 102, 102, 0) 51%); } /* --- Bara de sus: progres + butoane maximize -------------------------- */ .p45-vcard__top { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; align-items: flex-start; gap: 24px; } .p45-vcard__progress { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--p45-space-2); /* 8px */ } .p45-vcard__bar { position: relative; flex: 1 1 0; min-width: 0; height: 2px; border-radius: 8px; background: rgba(255, 255, 255, 0.2); overflow: hidden; } .p45-vcard__bar-fill { position: absolute; left: 0; top: 0; height: 2px; border-radius: 9px; background: var(--p45-c-ffffff); } /* butonul-iconiță „fantomă" (spacer simetric, invizibil) */ .p45-vcard__icon-btn--ghost { opacity: 0; } /* --- Conținut jos (mobile/tabletă — implicit) ------------------------- */ .p45-vcard__content { position: absolute; bottom: 16px; left: 16px; right: 16px; display: flex; flex-direction: column; gap: var(--p45-space-2); /* 8px */ } .p45-vcard__region { display: flex; align-items: center; gap: 6px; font-weight: var(--p45-fw-bold); font-size: var(--p45-fs-h5); /* 24px */ line-height: 1; letter-spacing: var(--p45-ls); } .p45-vcard__body { display: flex; flex-direction: column; gap: var(--p45-space-4); /* 16px */ } .p45-vcard__desc { margin: 0; font-weight: var(--p45-fw-regular); font-size: var(--p45-fs-caption); /* 12px */ line-height: var(--p45-lh-body); /* 1.2 */ letter-spacing: var(--p45-ls); } .p45-vcard__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--p45-space-3); } .p45-vcard__actions .p45-btn { width: 124px; } /* ===== Variantă DESKTOP (card lat, layout pe orizontală) ============== */ .p45-vcard--desktop { width: 1120px; height: 620px; } .p45-vcard--desktop .p45-vcard__top { top: 24px; left: 24px; right: 24px; justify-content: space-between; } .p45-vcard--desktop .p45-vcard__progress { flex: 0 0 240px; width: 240px; } .p45-vcard--desktop .p45-vcard__content { bottom: 40px; left: 40px; right: 40px; flex-direction: row; align-items: flex-end; gap: 24px; } .p45-vcard--desktop .p45-vcard__label { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--p45-space-2); /* 8px */ } .p45-vcard--desktop .p45-vcard__region { font-size: var(--p45-fs-h4); /* 28px */ line-height: var(--p45-lh-heading); /* 1.1 */ } .p45-vcard--desktop .p45-vcard__desc { font-size: var(--p45-fs-p3); /* 14px */ line-height: var(--p45-lh-heading); /* 1.1 */ } .p45-vcard--desktop .p45-vcard__actions { flex: 0 0 auto; align-items: flex-end; gap: var(--p45-space-5); /* 20px */ } .p45-vcard--desktop .p45-vcard__actions .p45-btn { width: 140px; } /* ============ component: components/cards-stack/cards-stack.css ============ */ /* ========================================================================== COMPONENTĂ: cards-stack (Figma: Cards stack — mobile/tabletă & desktop) -------------------------------------------------------------------------- Depinde de: css/style.css + atoms.css (.p45-vcard, .p45-arrows) + buttons.css (.p45-icon-btn) + price-badge.css. Încarcă-le înainte. Carusel „teanc": cardul activ (.p45-vcard) în față, restul în spate (scalate/întunecate). Poziția fiecărui card vine din atributul data-pos (0=față, 1/2=spate, „hidden"=ascuns). main.js rotește data-active la click pe săgeți (desktop) sau la swipe (mobil + desktop). - mobile/tabletă: container 335×524, fără săgeți (swipe) - desktop: container 1240×650, săgeți pe margini ========================================================================== */ .p45-cards-stack { position: relative; width: 335px; height: 524px; } .p45-cards-stack--desktop { width: 1240px; height: 650px; } /* Carusel funcțional — glisare orizontală fără a bloca scroll-ul vertical */ .p45-cards-stack--carousel { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; } .p45-cards-stack--carousel:active { cursor: grabbing; } /* Pozițiile cardurilor (tranziție lină între stări) -------------------- */ .p45-cards-stack--carousel > .p45-vcard { position: absolute; top: 0; left: 50%; transform-origin: top center; transition: transform .45s cubic-bezier(.4, 0, .2, 1), opacity .45s ease, filter .45s ease; will-change: transform, opacity; } .p45-cards-stack--carousel > .p45-vcard[data-pos="0"] { transform: translateX(-50%) translateY(30px) scale(1); z-index: 5; opacity: 1; filter: none; } .p45-cards-stack--carousel > .p45-vcard[data-pos="1"] { transform: translateX(-50%) translateY(12px) scale(.95); z-index: 4; opacity: 1; filter: brightness(.6); } .p45-cards-stack--carousel > .p45-vcard[data-pos="2"] { transform: translateX(-50%) translateY(0) scale(.9); z-index: 3; opacity: 1; filter: brightness(.42); } .p45-cards-stack--carousel > .p45-vcard[data-pos="hidden"] { transform: translateX(-50%) translateY(0) scale(.9); z-index: 2; opacity: 0; filter: brightness(.4); pointer-events: none; } /* Conținutul cardurilor din spate nu trebuie să prindă click-uri ------- */ .p45-cards-stack--carousel > .p45-vcard[data-pos="1"], .p45-cards-stack--carousel > .p45-vcard[data-pos="2"] { pointer-events: none; } /* --- Progres = indicator de poziție în teanc (un segment / card) ------ */ /* Poziția vine din data-index (identitatea cardului, fixă). Segmentele dinaintea celui curent sunt pline; cel curent e umplut parțial (ca în Figma); cele viitoare rămân translucide. Se schimbă la navigare pentru că se vede mereu cardul din față. */ .p45-cards-stack--carousel .p45-vcard[data-index="1"] .p45-vcard__bar:nth-child(1), .p45-cards-stack--carousel .p45-vcard[data-index="2"] .p45-vcard__bar:nth-child(-n+2), .p45-cards-stack--carousel .p45-vcard[data-index="3"] .p45-vcard__bar:nth-child(-n+3) { background: var(--p45-c-ffffff); } .p45-cards-stack--carousel .p45-vcard[data-index="0"] .p45-vcard__bar:nth-child(1)::after, .p45-cards-stack--carousel .p45-vcard[data-index="1"] .p45-vcard__bar:nth-child(2)::after, .p45-cards-stack--carousel .p45-vcard[data-index="2"] .p45-vcard__bar:nth-child(3)::after, .p45-cards-stack--carousel .p45-vcard[data-index="3"] .p45-vcard__bar:nth-child(4)::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 64.44%; border-radius: 9px; background: var(--p45-c-ffffff); } /* --- Săgeți pe marginile stânga/dreapta (desktop) --------------------- */ .p45-cards-stack__arrow { position: absolute; top: 340px; /* centrul cardului activ (30 + 620/2) */ transform: translateY(-50%); z-index: 10; /* peste carduri, ca să fie clicabile */ } .p45-cards-stack__arrow--prev { left: 0; } .p45-cards-stack__arrow--next { right: 0; } /* ============ component: components/bento/atoms.css ============ */ /* ========================================================================== COMPONENTĂ: bento / atomi (Figma: _atom bento card) -------------------------------------------------------------------------- Cardul-tilă din grila Bento: imagine pe tot fundalul + gradient întunecat sus + titlu și preț în stânga-sus. Cardul este FLUID — umple celula în care e pus (grila Bento îi dă lățimea/înălțimea prin span-uri); aici doar forma internă se schimbă. Două „scale" de UI (corespund celor două frame-uri din Figma), exprimate prin variabilele --p45-bento-* (cu default-urile MOBILE): - implicit → look MOBILE (radius 12, titlu 24, padding 12, badge md) - --desktop → look TABLET/DESKTOP (radius 20, titlu 28, padding 24, badge lg) Variabilele pot fi setate și de un strămoș (grila .p45-bento le comută responsive — vezi bento.css), clasa --desktop rămâne pentru demo static. Depinde de: css/style.css (tokens, .p45-icon) + price-badge.css (.p45-price-badge--bento pentru preț). Încarcă-le înaintea acestui fișier. Grila completă vine în components/bento/bento.css. ========================================================================== */ .p45-bento-card { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: var(--p45-bento-radius, var(--p45-radius)); /* 12px (mobile) */ font-family: var(--p45-font); color: var(--p45-text-white); } /* --- Media: imaginea de fundal ---------------------------------------- */ .p45-bento-card__media { position: absolute; inset: 0; } .p45-bento-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Gradient întunecat sus (lizibilitate titlu + preț) */ .p45-bento-card__media::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--p45-bento-grad-h, 62%); /* grila dă înălțimea exactă pe formă */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 30%, rgba(29, 29, 29, 0.3) 50%, rgba(102, 102, 102, 0) 100%); pointer-events: none; } /* --- Conținut: titlu + preț (stânga-sus) ------------------------------ */ .p45-bento-card__content { position: absolute; top: var(--p45-bento-pad, var(--p45-space-3)); /* 12px */ left: var(--p45-bento-pad, var(--p45-space-3)); right: var(--p45-bento-pad, var(--p45-space-3)); display: flex; flex-direction: column; align-items: flex-start; gap: var(--p45-bento-gap, 6px); } .p45-bento-card__title { margin: 0; font-weight: var(--p45-fw-bold); font-size: var(--p45-bento-title-fs, var(--p45-fs-h5)); /* 24px */ line-height: var(--p45-lh-heading); /* 1.1 */ letter-spacing: var(--p45-ls); } /* ====================================================================== Scale UI: TABLET / DESKTOP (--desktop) ====================================================================== */ .p45-bento-card--desktop { --p45-bento-radius: 20px; /* între radius-lg 16 și xl 24 — specific design */ --p45-bento-grad-h: 170px; /* gradient fix din design */ --p45-bento-pad: var(--p45-space-6); /* 24px */ --p45-bento-gap: var(--p45-space-2); /* 8px */ --p45-bento-title-fs: var(--p45-fs-h4); /* 28px */ } /* ============ component: components/bento/bento.css ============ */ /* ========================================================================== COMPONENTĂ: bento (Figma: Bento — mobile & tabletă/desktop) -------------------------------------------------------------------------- Grila Bento cu 6 sloturi (5 vizibile pe mobil). Depinde de: css/style.css (tokens) + components/bento/atoms.css (.p45-bento-card) + price-badge.css (.p45-price-badge--bento). Linkează-le în index.html înaintea acestui fișier. Layout din Figma: - mobil (<768): 2 coloane decalate — col 1: portret + pătrat, col 2: pătrat + portret — apoi un card landscape pe toată lățimea. Slotul 5 (Exotic) nu există în frame-ul mobil. Rânduri fixe 168/158/168/168 (portret = 334, pătrat = 168), gap 8×7 — ca în frame-ul de 335px. - tabletă/desktop (≥768): 2 rânduri a câte 3 carduri — 370|240|630, apoi oglindit 630|240|370 — mapate pe un grid de 4 coloane 37fr/24fr/24fr/37fr cu gap 20. Grila păstrează proporțiile frame-ului (1280×804) la orice lățime de container (aspect-ratio). Scala cardului și a badge-ului se comută responsive prin variabilele --p45-bento-* din atoms.css — fără clasa --desktop pe carduri. ========================================================================== */ .p45-bento { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 168px 158px 168px 168px; /* portret 168+8+158 = 334 */ gap: 8px 7px; } /* --- Sloturi (ordinea DOM = ordinea de pe desktop, rând cu rând) -------- Gradientul (--p45-bento-grad-h) are pe mobil înălțimea exactă din design, diferită pe formă: portret 230, pătrat 112, landscape 132. */ /* 1 · portret stânga-sus (Family tour) */ .p45-bento__item--1 { grid-area: 1 / 1 / 3 / 2; --p45-bento-grad-h: 230px; } /* 2 · pătrat stânga-jos (For children) */ .p45-bento__item--2 { grid-area: 3 / 1 / 4 / 2; --p45-bento-grad-h: 112px; } /* 3 · pătrat dreapta-sus (Adults Only) */ .p45-bento__item--3 { grid-area: 1 / 2 / 2 / 3; --p45-bento-grad-h: 112px; } /* 4 · landscape pe toată lățimea, jos (Peace and tranquility) */ .p45-bento__item--4 { grid-area: 4 / 1 / 5 / 3; --p45-bento-grad-h: 132px; } /* 5 · doar pe tabletă/desktop (Exotic) */ .p45-bento__item--5 { display: none; } /* 6 · portret dreapta, decalat (Honeymoon) */ .p45-bento__item--6 { grid-area: 2 / 2 / 4 / 3; --p45-bento-grad-h: 230px; } /* ====================================================================== Tabletă / Desktop (≥768) — frame 1280×804, scalat proporțional ====================================================================== */ @media (min-width: 768px) { .p45-bento { grid-template-columns: 37fr 24fr 24fr 37fr; /* 370|240…240|370 din 1280 */ grid-template-rows: 1fr 1fr; gap: var(--p45-space-5); /* 20px */ aspect-ratio: 1280 / 804; /* înălțimea urmează lățimea */ /* scala tabletă/desktop a cardurilor (vezi atoms.css) */ --p45-bento-radius: 20px; --p45-bento-pad: var(--p45-space-6); /* 24px */ --p45-bento-gap: var(--p45-space-2); /* 8px */ --p45-bento-title-fs: var(--p45-fs-h4); /* 28px */ } /* gradient fix 170px pe toate formele (suprascrie valorile per slot) */ .p45-bento > .p45-bento-card { --p45-bento-grad-h: 170px; } .p45-bento__item--1 { grid-area: 1 / 1 / 2 / 2; } /* 370 */ .p45-bento__item--2 { grid-area: 1 / 2 / 2 / 3; } /* 240 */ .p45-bento__item--3 { grid-area: 1 / 3 / 2 / 5; } /* 630 */ .p45-bento__item--4 { grid-area: 2 / 1 / 3 / 3; } /* 630 */ .p45-bento__item--5 { display: block; grid-area: 2 / 3 / 3 / 4; } /* 240 */ .p45-bento__item--6 { grid-area: 2 / 4 / 3 / 5; } /* 370 */ /* Badge-ul de preț trece pe scara LG (= .p45-price-badge--lg) */ .p45-bento .p45-price-badge--bento { padding: 2px 6px 6px; } .p45-bento .p45-price-badge--bento .p45-price-badge__amount { padding: 0; } .p45-bento .p45-price-badge--bento .p45-price-badge__from { font-size: var(--p45-fs-p3); /* 14px */ line-height: var(--p45-lh-heading); } .p45-bento .p45-price-badge--bento .p45-price-badge__price { font-size: var(--p45-fs-h2); /* 38px */ line-height: var(--p45-lh-heading); } } /* ============ component: components/input-fields/atoms.css ============ */ /* ========================================================================== COMPONENTĂ: input-fields / atomi (Figma: _atom date range) -------------------------------------------------------------------------- Jumătatea unui „range date input" (From / To): fundal light-blue, label gri și — la focus/completat — valoarea sub el; X de ștergere în dreapta. Atomul e FLUID pe lățime (în Figma 167 = jumătate din 335); înălțimea e fixă 67. Demo-ul îi dă lățimea prin wrappere, ansamblul vine în input-fields.html. Stări (ca în Figma: empty / focus l / focus r / filled): - implicit (empty) → doar labelul, 16px, centrat vertical - cu __value → labelul scade la 14px (detectat cu :has) - __value--placeholder → „Select date" gri (în loc de dată) - --focus-l / --focus-r → border 2px albastru + colțuri 16 rotunjite DOAR pe partea respectivă (stânga = From, dreapta = To) X-ul (__clear) e opțional — omite butonul pentru varianta fără iconiță. Depinde de: css/style.css (tokens, .p45-icon). Încarcă-l înainte. ========================================================================== */ .p45-date-range { display: flex; align-items: center; gap: var(--p45-space-2); /* 8px */ height: 67px; padding: var(--p45-space-3) var(--p45-space-4); /* 12px 16px */ background: var(--p45-surface-light-blue); font-family: var(--p45-font); letter-spacing: var(--p45-ls); } /* --- Labels: label + (opțional) valoarea ------------------------------- */ .p45-date-range__labels { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 1 0 0; min-width: 1px; } .p45-date-range__label { font-weight: var(--p45-fw-regular); font-size: var(--p45-fs-p2); /* 16px (empty) */ line-height: var(--p45-lh-body); /* 1.2 */ color: var(--p45-text-grey); } /* când sub label există o valoare, labelul scade la P3 (14px, lh 1.1) */ .p45-date-range__labels:has(.p45-date-range__value) .p45-date-range__label { font-size: var(--p45-fs-p3); line-height: var(--p45-lh-heading); } .p45-date-range__value { font-weight: var(--p45-fw-semibold); font-size: var(--p45-fs-p1); /* 18px */ line-height: var(--p45-lh-body); color: var(--p45-text-main); } /* „Select date" — încă fără dată aleasă */ .p45-date-range__value--placeholder { color: var(--p45-text-grey); } /* --- Focus: border albastru, rotunjit doar pe partea activă ------------ */ /* padding-ul scade cu 2px ca să compenseze borderul (stroke inside în Figma) */ .p45-date-range--focus-l, .p45-date-range--focus-r { border: 2px solid var(--p45-border-blue); padding: 10px 14px; } .p45-date-range--focus-l { border-radius: var(--p45-radius-lg) 0 0 var(--p45-radius-lg); } /* 16px stânga */ .p45-date-range--focus-r { border-radius: 0 var(--p45-radius-lg) var(--p45-radius-lg) 0; } /* 16px dreapta */ /* --- X de ștergere ------------------------------------------------------ */ .p45-date-range__clear { display: inline-flex; padding: 0; border: 0; background: none; color: var(--p45-icon-secondary); cursor: pointer; } /* ============ component: components/input-fields/input-fields.css ============ */ /* ========================================================================== COMPONENTĂ: input-fields (Figma: Input field) -------------------------------------------------------------------------- Câmp-trigger (252×54 în Figma, FLUID aici): iconiță în stânga (map), label sau top-label+valoare la mijloc, iconiță în dreapta (chevron). Iconițele sunt .p45-icon și moștenesc culoarea containerului (--p45-icon-secondary); ambele sunt opționale, ca în Figma. Stări (pe modelul buttons: pseudo-clase reale + clase .is-*): - implicit → alb, border 1px --p45-border-input, radius 16 - :hover / .is-hover → fundal light-blue - .is-focused → border 2px albastru (padding-ul compensează) - .is-error → borderul devine roșu (păstrează 1px/2px) - .is-disabled → fundal gri, border gri, textele gri „Filled" e structural: __labels (top-label 12 + value 16 semibold) în loc de __label (16). Înălțimea e fixă 54 — conținutul se centrează vertical. Depinde de: css/style.css (tokens, .p45-icon). Atomul date range e în atoms.css. Încarcă-le înaintea acestui fișier. ========================================================================== */ .p45-input { display: flex; align-items: center; gap: 10px; /* din design (între spațierile 8/12) */ height: 54px; padding: 0 15px; /* 16px din Figma − 1px border */ background: var(--p45-surface-white); border: 1px solid var(--p45-border-input); border-radius: var(--p45-radius-lg); /* 16px */ font-family: var(--p45-font); letter-spacing: var(--p45-ls); color: var(--p45-icon-secondary); /* iconițele (mask) moștenesc */ } /* --- Label simplu (gol / placeholder) ----------------------------------- */ .p45-input__label { flex: 1 0 0; min-width: 1px; font-weight: var(--p45-fw-regular); font-size: var(--p45-fs-p2); /* 16px */ line-height: var(--p45-lh-body); /* 1.2 */ color: var(--p45-text-grey); } /* --- Filled: top-label mic + valoarea ----------------------------------- */ .p45-input__labels { flex: 1 0 0; min-width: 1px; display: flex; flex-direction: column; justify-content: center; gap: 2px; } .p45-input__top-label { font-weight: var(--p45-fw-regular); font-size: var(--p45-fs-caption); /* 12px */ line-height: var(--p45-lh-body); color: var(--p45-text-grey); } .p45-input__value { font-weight: var(--p45-fw-semibold); font-size: var(--p45-fs-p2); /* 16px */ line-height: var(--p45-lh-body); color: var(--p45-text-main); } /* --- Variantă INTERACTIVĂ: real + label flotant ----------------- Un singur câmp care trece prin stări la interacțiune: gol → label centrat (16px), focus/completat → label urcă mic (12px) și valoarea apare dedesubt (16px semibold). Empty↔filled se detectează cu :placeholder-shown (de aceea input-ul are placeholder=" "). Alternativă la structura statică __label/ __labels de mai sus (folosită ca trigger în search bar). */ .p45-input__field { position: relative; flex: 1 0 0; min-width: 1px; align-self: stretch; } .p45-input__control { width: 100%; height: 100%; margin: 0; padding: 0; /* fără label flotant → valoarea centrată */ border: 0; background: transparent; font-family: inherit; font-weight: var(--p45-fw-semibold); /* valoarea: semibold */ font-size: var(--p45-fs-p2); /* 16px */ line-height: var(--p45-lh-body); letter-spacing: inherit; color: var(--p45-text-main); } .p45-input__control:focus { outline: none; } /* placeholder-ul (prompt) = regular gri — ex. „Destination" în search bar */ .p45-input__control::placeholder { font-weight: var(--p45-fw-regular); color: var(--p45-text-grey); opacity: 1; } /* DOAR varianta cu label flotant împinge valoarea în jos, ca să-i facă loc sus */ .p45-input__field:has(.p45-input__floating) .p45-input__control { padding-top: 19px; } .p45-input__floating { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-weight: var(--p45-fw-regular); font-size: var(--p45-fs-p2); /* 16px — centrat când e gol */ line-height: var(--p45-lh-body); color: var(--p45-text-grey); pointer-events: none; transition: top .15s ease, font-size .15s ease, transform .15s ease; } .p45-input__control:focus ~ .p45-input__floating, .p45-input__control:not(:placeholder-shown) ~ .p45-input__floating { top: 8px; transform: none; font-size: var(--p45-fs-caption); /* 12px — urcat sus */ } /* --- Stări -------------------------------------------------------------- Focus prin :focus-within real (input interactiv) SAU clasa .is-focused (stări statice). A doua „linie" albastră vine din inset shadow → aspect de border 2px FĂRĂ salt de padding. error suprascrie culoarea; disabled le suprascrie pe toate (ca în Figma). */ .p45-input:not(.is-disabled):not(.is-focused):not(:focus-within):hover, .p45-input.is-hover { background: var(--p45-surface-light-blue); } .p45-input:not(.is-disabled):focus-within, .p45-input.is-focused { border-color: var(--p45-border-blue); box-shadow: inset 0 0 0 1px var(--p45-border-blue); } .p45-input.is-error { border-color: var(--p45-border-red); } .p45-input.is-error:focus-within, .p45-input.is-error.is-focused { border-color: var(--p45-border-red); box-shadow: inset 0 0 0 1px var(--p45-border-red); } .p45-input.is-disabled { background: var(--p45-surface-gray); border-color: var(--p45-border-input); } .p45-input.is-disabled .p45-input__value, .p45-input.is-disabled .p45-input__control, .p45-input.is-disabled .p45-input__floating { color: var(--p45-text-grey); } /* ====================================================================== RANGE DATE INPUT (Figma: Range date input) Doi atomi date range (From | To, fără X — vezi atoms.css) lipiți, cu divider de 1px între ei; colțurile (16px) le rotunjește containerul prin overflow hidden. La focus, atomul își aduce singur borderul albastru cu colțurile rotunjite pe partea lui (--focus-l / --focus-r). ====================================================================== */ .p45-range-date-input { display: flex; align-items: center; border-radius: var(--p45-radius-lg); /* 16px */ overflow: hidden; } .p45-range-date-input > .p45-date-range { flex: 1 0 0; min-width: 1px; } .p45-range-date-input__divider { flex: 0 0 auto; align-self: stretch; width: 1px; background: var(--p45-border-input); } /* ============ component: components/pagination/pagination.css ============ */ /* ========================================================================== COMPONENTĂ: pagination (Figma: Pagination) -------------------------------------------------------------------------- Buline de paginare pentru carusele (pe imagini/fundal închis): cercuri albe de 6px cu gap 6 — cea activă plină, restul la 50% opacitate. Numărul de buline (3/4/5 în Figma) = câte __dot-uri pui în markup; starea o mută JS-ul caruselului prin clasa --active. Depinde de: css/style.css (tokens). Încarcă-l înaintea acestui fișier. ========================================================================== */ .p45-pagination { display: flex; align-items: center; gap: 6px; } .p45-pagination__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--p45-surface-white); opacity: .5; } .p45-pagination__dot--active { opacity: 1; } /* ============ component: components/image/image.css ============ */ /* ========================================================================== COMPONENTĂ: image (Figma: Image) -------------------------------------------------------------------------- Primitiv de imagine cu raport fix 16:10 (FLUID pe lățime; demo-ul îi dă lățimea prin wrappere). Imaginea umple caseta cu object-fit: cover. Opțional: o etichetă „16:10" suprapusă în centru (prop-ul `ratio` din Figma) — ajutor de design care arată raportul slotului; omite-o în uz real. FĂRĂ border-radius — varianta rotunjită + decorată (badge-uri, favorite, buline) e .p45-image-block din components/cards. Depinde de: css/style.css (tokens). Încarcă-l înaintea acestui fișier. ========================================================================== */ .p45-image { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--p45-surface-gray); /* fundal cât timp imaginea încarcă */ } .p45-image__img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Eticheta de raport (suprapusă, centrată) — ajutor de design */ .p45-image__ratio { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--p45-font); font-weight: var(--p45-fw-bold); font-size: 64px; line-height: 1.4; text-align: center; color: rgba(30, 32, 40, 0.8); pointer-events: none; } /* ============ component: components/search/search.css ============ */ /* ========================================================================== COMPONENTĂ: search (Figma: Search — 4 stări) -------------------------------------------------------------------------- UN SINGUR câmp de căutare funcțional care trece prin cele 4 stări din Figma în funcție de interacțiune (nu 4 variante separate): 1. default → gol, neatins: border 1px input, placeholder ALBASTRU, fără X 2. active → focus, gol: border 2px albastru, placeholder GRI, caret, X 3. typed → focus + text: border 2px albastru, text (main), caret, X 4. filled → finalizat: border 1px input, text (main), X (blur/Enter) Stările vin din CSS pe un real: :focus-within (border + caret nativ), ::placeholder (albastru→gri la focus), :has(:not(:placeholder-shown)) (X la text). JS-ul (js/main.js) face doar golirea cu X și finalizarea pe Enter. Particularitate de design: placeholder-ul e albastru cât e gol și neatins, devine gri abia la focus. Refolosește: .p45-icon (--search, --close), tokenii din css/style.css. Înrudit cu .p45-input (components/input-fields) — aceeași familie de câmpuri. ========================================================================== */ .p45-search { display: flex; align-items: center; gap: 6px; margin: 0; padding: 15px; /* 16 − 1px border = aliniere Figma */ background: var(--p45-surface-white); border: 1px solid var(--p45-border-input); border-radius: var(--p45-radius-lg); /* 16px */ font-family: var(--p45-font); letter-spacing: var(--p45-ls); } /* Focus (active/typed): a doua „linie" albastră prin inset shadow — dă aspectul de border 2px FĂRĂ să schimbe padding-ul (fără salt de text). */ .p45-search:focus-within { border-color: var(--p45-border-blue); box-shadow: inset 0 0 0 1px var(--p45-border-blue); } /* Lupa — albastră (Icon/blue) în toate stările */ .p45-search__icon { color: var(--p45-text-blue); } /* Input-ul propriu-zis (fără chrome de browser) */ .p45-search__input { flex: 1 0 0; min-width: 1px; margin: 0; padding: 0; border: 0; background: transparent; font-family: inherit; font-weight: var(--p45-fw-regular); font-size: var(--p45-fs-p2); /* 16px */ line-height: var(--p45-lh-body); /* 1.2 */ letter-spacing: inherit; color: var(--p45-text-main); /* textul tastat (typed/filled) */ caret-color: var(--p45-text-main); /* cursorul „|" */ } .p45-search__input:focus { outline: none; } /* default: placeholder albastru → active: gri la focus */ .p45-search__input::placeholder { color: var(--p45-text-blue); opacity: 1; } .p45-search__input:focus::placeholder { color: var(--p45-text-grey); } /* X de ștergere — gri (Icon/secondary); apare la focus SAU când există text */ .p45-search__clear { display: none; padding: 0; border: 0; background: none; color: var(--p45-icon-secondary); cursor: pointer; } .p45-search:focus-within .p45-search__clear, .p45-search:has(.p45-search__input:not(:placeholder-shown)) .p45-search__clear { display: inline-flex; } /* ============ component: components/search/sticky.css ============ */ /* ========================================================================== COMPONENTĂ: search / sticky elements (Figma: Sticky elements) -------------------------------------------------------------------------- Cluster plutitor (de obicei fix, jos pe ecran) cu 3 elemente: - buton Accesibilitate (stânga, cerc 48 albastru) - pastilă de Search (centru, alb cu border albastru + „Find your perfect holiday") - buton Chat (dreapta, cerc 48 bleu) Două variante (ca în Figma): - implicit → MOBIL/TABLETĂ: padding lateral 20, border pastilă 2px, lățime pastilă = hug (se întinde între butoane) - --desktop → DESKTOP: fără padding lateral, border pastilă 4px, lățime pastilă fixă 242 Butoanele Accesibilitate/Chat sunt opționale (omite elementul). NOTĂ: avatarurile (sticky-accessibility/​chat.png) sunt screenshot-urile din Figma — cerc + grafică + fundal alb; le clipuim circular (border-radius+ overflow) și le mărim ușor ca să tăiem marginea anti-aliased. Albastrul lor diferă ușor de --p45-surface-brand-blue (provin din sursa Figma). Refolosește: .p45-icon (--search), tokenii din css/style.css. ========================================================================== */ .p45-sticky { display: flex; align-items: center; justify-content: space-between; width: 375px; max-width: 100%; padding: 0 20px; /* mobil/tabletă */ } /* --- Pastila de search ------------------------------------------------- */ .p45-sticky__search { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 14px 16px; background: var(--p45-surface-white); border: 2px solid var(--p45-border-blue); border-radius: 52px; box-shadow: 0 2px 7.5px rgba(0, 0, 0, 0.2); font-family: var(--p45-font); cursor: pointer; } .p45-sticky__search-icon { color: var(--p45-text-blue); } .p45-sticky__search-text { font-weight: var(--p45-fw-medium); font-size: var(--p45-fs-p2); /* 16px */ line-height: var(--p45-lh-body); /* 1.2 */ letter-spacing: var(--p45-ls); color: var(--p45-text-blue); white-space: nowrap; } /* --- Butoane circulare (Accesibilitate / Chat) ------------------------- */ .p45-sticky__btn { flex: 0 0 auto; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2); cursor: pointer; } .p45-sticky__btn--accessibility { background: var(--p45-surface-brand-blue); } .p45-sticky__btn--chat { background: var(--p45-surface-baby-blue); } .p45-sticky__btn img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); /* taie marginea albă anti-aliased */ } /* ====================================================================== Variantă DESKTOP (--desktop) — se aplică doar de la ≥992px, ca același element să fie mobil/tabletă sub prag (Figma 42-8918) și desktop peste (Figma 42-9178). Sub 992px rămân stilurile de bază (mobil). ====================================================================== */ @media (min-width: 992px) { .p45-sticky--desktop { width: 100%; padding: 0; } /* full-width: butoanele la margini, pastila centrată */ .p45-sticky--desktop .p45-sticky__search { width: 242px; /* lățime fixă din design */ border-width: 4px; } } /* ============ component: components/search/searchbar.css ============ */ /* ========================================================================== COMPONENTĂ: search / search bar (Figma: Search 408:2311) -------------------------------------------------------------------------- Bara de căutare desktop „tabbed" (1280 în Figma, FLUID aici): un strip de tab-uri sus-stânga (Holidays / Circuits / Packages) peste un panou cu 4 câmpuri (Destination / Departure / Travel time / 2 Person) + butonul Search. REFOLOSEȘTE: - .p45-input (components/input-fields) pentru cele 4 câmpuri - .p45-btn--main --lg (components/buttons) pentru butonul Search - .p45-icon (--map/--plane/--calendar/--users) pentru iconițe Construit nou aici: containerul, strip-ul de tab-uri și atomul .p45-search-tab (alt stil decât .p45-tab: selectat = fundal strong-blue + text alb; neselectat = alb + border + text albastru). Depinde de: css/style.css + input-fields.css + buttons.css. Încarcă-le înainte. ========================================================================== */ .p45-searchbar { display: flex; flex-direction: column; align-items: flex-start; /* strip-ul de tab-uri „hug", panoul 100% */ width: 1280px; max-width: 100%; /* umbra urmează forma reală (strip + panou), nu bounding box-ul */ filter: drop-shadow(0 2px 7.5px rgba(0, 0, 0, 0.2)); font-family: var(--p45-font); } /* --- Strip de tab-uri (Figma: _atom Search tabs) ----------------------- */ .p45-searchbar__tabs { display: flex; gap: 4px; /* Figma: strip-ul e 335 FIX (nu hug), ca cele 3 pastile să iasă egale la 102.33 fiecare. Cei 335 includ padding-ul; Bootstrap pune deja border-box global, îl repetăm doar ca regula să nu depindă de el. */ box-sizing: border-box; width: 335px; max-width: 100%; padding: 8px 10px; background: var(--p45-surface-baby-blue); /* #d7f2fd */ border-radius: var(--p45-radius-xl) var(--p45-radius-xl) 0 0; /* sus 24, jos 0 */ } /* --- Atom: search tab (Figma: _atom Search tab) ------------------------ */ .p45-search-tab { display: inline-flex; align-items: center; justify-content: center; /* egale ca în Figma (flex 1 0 0); min-width 1px anulează floor-ul min-content, altfel „Pachete 7+7" ar ieși mai lat decât celelalte. Ca în design, textul poate intra ușor în padding pe tab-ul cel mai lung. */ flex: 1 0 0; min-width: 1px; padding: 12px 14px; background: var(--p45-surface-white); border: 1px solid var(--p45-border-blue); /* neselectat: border albastru */ border-radius: 45px; color: var(--p45-text-blue); font: var(--p45-fw-bold) var(--p45-fs-p3) / var(--p45-lh-heading) var(--p45-font); /* 14 Bold, lh 1.1 */ letter-spacing: var(--p45-ls-zero); /* P3 Bold: ls 0 */ white-space: nowrap; cursor: pointer; } .p45-search-tab.is-selected { background: var(--p45-surface-strong-blue); /* #001d70 */ border-color: transparent; /* fundalul umple tot (fără salt) */ color: var(--p45-text-white); } .p45-search-tab:focus-visible { outline: 2px solid var(--p45-primary); outline-offset: 2px; } /* --- Panoul cu câmpuri (Figma: _atom Type of fields) ------------------- */ .p45-searchbar__panel { display: flex; align-items: stretch; /* butonul se întinde la 54 ca și câmpurile */ gap: var(--p45-space-4); /* 16px */ width: 100%; padding: var(--p45-space-6); /* 24px */ background: var(--p45-surface-light-blue); /* tl pătrat (acolo stă strip-ul), restul rotunjite 24 */ border-radius: 0 var(--p45-radius-xl) var(--p45-radius-xl) var(--p45-radius-xl); } /* Modurile fără taburi (Cazare/România/Bilete — data-p45-tab): fără strip deasupra, deci și colțul stânga-sus e rotunjit. */ .p45-searchbar[data-p45-tab] .p45-searchbar__panel { border-radius: var(--p45-radius-xl); } /* cele 4 câmpuri împart egal lățimea */ .p45-searchbar__panel > .p45-input { flex: 1 0 0; min-width: 1px; } /* butonul Search: lățime fixă din design */ .p45-searchbar__submit { flex: 0 0 auto; width: 135px; } /* ====================================================================== Variantă STIVUITĂ / MOBIL (Figma: Search — Full fields no/yes, 335px) Aceleași atomi (tab-uri, input-uri, buton), dar pe coloană: strip de tab-uri full-width, câmpuri stivuite, buton full-width. Cardul e rotunjit 24 pe toate colțurile (overflow clip). „Full fields no/yes" = 2 vs 4 câmpuri (doar conținut, fără CSS separat). ====================================================================== */ .p45-searchbar--stacked { width: 335px; align-items: stretch; /* tab-uri + panou full-width */ overflow: hidden; /* clipează colțurile la 24 */ border-radius: var(--p45-radius-xl); /* 24px, toate colțurile */ } .p45-searchbar--stacked .p45-searchbar__tabs { width: 100%; border-radius: 0; /* le rotunjește părintele (overflow) */ } .p45-searchbar--stacked .p45-searchbar__panel { flex-direction: column; align-items: stretch; gap: var(--p45-space-6); /* 24px — între grupul de câmpuri și buton */ padding: 22px; border-radius: 0; } /* grupul de câmpuri stivuite */ .p45-searchbar__fields { display: flex; flex-direction: column; gap: var(--p45-space-3); /* 12px */ } .p45-searchbar--stacked .p45-searchbar__submit { width: 100%; } /* Forma compactă vs. extinsă: Departure + Persons apar doar după ce s-a ales destinația (searchbar-ul primește .is-expanded din js/main.js → Figma 42-6498). */ /* Disclosure progresiv DOAR pe mobil (<992px): pe desktop e spațiu → afișăm toate câmpurile (Destinație, Plecare din, Perioadă, Persoane) de la început. La prima selecție searchbar-ul mobil primește .is-expanded (din JS). */ @media (max-width: 991.98px) { .p45-searchbar .p45-search-expandable { display: none; } .p45-searchbar.is-expanded .p45-search-expandable { display: flex; } } /* departure ascuns pe taburile fără plecare (tours) — clasă din p45-search.js (applyTabUI), !important ca să bată display:flex de la .is-expanded. */ .p45-searchbar .p45-input.p45-tab-hidden { display: none !important; } /* ====================================================================== MENIURI DROPDOWN DIN SEARCHBAR (desktop) — Destination / Departure Card 459×560 care se deschide la 24px SUB panou, aliniat la stânga. Partea comună (card + header search 90px + listă scrollabilă cu bară albastră) e în clasele .p45-searchbar__menu*. Fiecare meniu adaugă doar conținutul lui. REFOLOSEȘTE .p45-input/.p45-search/.p45-checkbox/ .p45-accordion/.p45-select-block/.p45-chip/.p45-btn. JS în main.js. ====================================================================== */ /* Ancoră pentru meniuri (dropdown-urile sunt position:absolute față de el). E și stacking context (din cauza filter:drop-shadow pe .p45-searchbar). ATENȚIE: 1000 de aici NU e o valoare globală — părintele `.p45-hero-search` are el însuși z-index, deci creează un stacking context care plafonează tot ce e aici. Ce decide raportul cu restul paginii e z-index-ul PĂRINTELUI (vezi `.p45-hero-search`, mai jos în fișier). Valoarea de aici ordonează doar straturile din interiorul searchbox-ului. */ .p45-hero-search__desktop { position: relative; z-index: 1000; } /* câmpurile searchbar-ului sunt needitabile (readonly): se completează doar din meniuri. Le dăm aspect de „trigger" (cursor pointer, fără caret). */ .p45-searchbar__panel .p45-input:has(.p45-input__control[readonly]), .p45-searchbar__panel .p45-input__control[readonly] { cursor: pointer; } .p45-searchbar__panel .p45-input__control[readonly] { caret-color: transparent; } /* --- Card comun ------------------------------------------------------- */ .p45-searchbar__menu { position: absolute; top: calc(100% + 24px); /* 24px sub panou (cerut) */ left: 0; /* aliniat cu marginea stângă a searchbar-ului */ z-index: 5; display: flex; flex-direction: column; width: 459px; max-width: 100%; height: 560px; background: #fcfcfc; /* Figma surface (fără token dedicat) */ border-radius: 14px; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.12); overflow: hidden; } .p45-searchbar__menu[hidden] { display: none; } /* Header: câmp de căutare „lipit" sus (Figma „Top search" 90px) */ .p45-searchbar__menu-header { flex: 0 0 auto; padding: 24px 23px 14px; /* search la top 24 / left 23 / h 52 */ background: #fcfcfc; } /* Zonă scrollabilă cu bară albastră subțire (comună listelor) */ .p45-searchbar__menu-list { flex: 1 1 auto; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--p45-primary) transparent; } .p45-searchbar__menu-list::-webkit-scrollbar { width: 12px; } .p45-searchbar__menu-list::-webkit-scrollbar-thumb { background: var(--p45-primary); border-radius: var(--p45-radius-pill); border: 4px solid transparent; /* bară vizibilă de 4px, centrată în 12px */ background-clip: padding-box; } /* --- Destination: chips + listă de țări (accordion) + footer Continue -- */ .p45-destination-menu__chips { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 20px 8px; /* aliniat cu rândurile (px 20) */ } .p45-destination-menu__chips:empty { display: none; } /* fără rând cât nu e nimic selectat */ .p45-destination-menu__list { padding-left: 6px; } /* Figma: lista la x=6, bara la dreapta */ .p45-destination-menu__footer { flex: 0 0 auto; padding: 12px 24px 24px; /* Figma: pt 12 / pb 24 / px 24 */ background: var(--p45-surface-light-blue); /* #f9fbff */ } .p45-destination-menu__continue { width: 100%; border-radius: 18px; /* Figma: 18 (peste --lg 16) */ } /* --- Departure: listă de orașe (atom .p45-select-block într-un .p45-select-group → flex column, gap 10, selecție unică din JS) -------- */ .p45-departure-menu__list { padding: 0 23px 16px; } /* Figma: lista la x=23 */ /* footer Continue — identic cu cel de la Destination */ .p45-departure-menu__footer { flex: 0 0 auto; padding: 12px 24px 24px; background: var(--p45-surface-light-blue); } .p45-departure-menu__continue { width: 100%; border-radius: 18px; } /* --- Travel time: tabs + range date input + calendar + Continue ------- Card mai îngust (399px), alb, conținut în coloană (Figma 42-7724). --- */ .p45-travel-menu { width: 399px; height: auto; /* conținut fix (~593 în Figma) */ padding: 20px 32px; /* Figma: gutiere 32, sus/jos 20 */ gap: 24px; /* tabs → range → calendar */ background: var(--p45-surface-white); } .p45-travel-menu .p45-calendar { width: 100%; } /* Figma: calendar 335 = lățimea conținutului */ .p45-travel-menu__continue { width: 100%; margin-top: 8px; /* 24 + 8 = 32px deasupra (Figma) */ } /* --- Persons: titlu + liste cu stepper + inputuri Age + Save ----------- */ .p45-persons-menu { width: 399px; height: auto; padding: 24px 32px; /* Figma: gutiere 32, sus/jos 24 */ gap: 24px; /* titlu → liste → Save */ } .p45-persons-menu__title { margin: 0; font-family: var(--p45-font); font-weight: var(--p45-fw-semibold); font-size: var(--p45-fs-p1); /* 18px */ line-height: 1.4; letter-spacing: var(--p45-ls); color: var(--p45-text-main); } .p45-persons-menu__lists { display: flex; flex-direction: column; gap: 18px; } .p45-persons-menu__ages { display: flex; flex-direction: column; gap: 8px; } .p45-persons-menu__ages:empty { display: none; } /* fără copii → fără rând */ .p45-persons-menu__save { width: 100%; border-radius: 18px; } /* Figma: 18 */ /* zilele/lunile selectabile (nu goale / nu trecute) — cursor pointer */ .p45-travel-menu .p45-calendar__grid--dates .p45-cal-num:not(.p45-cal-num--empty):not(.p45-cal-num--disabled), .p45-travel-menu .p45-calendar__grid--months .p45-cal-num:not(.p45-cal-num--empty):not(.p45-cal-num--disabled) { cursor: pointer; } /* ========================================================================== MOBIL: foaie full-screen pentru meniurile search-ului din hero (Figma „Search 1.0" 42-6712). Overlay fix, coloană: header (titlu + buton close) / câmp search / listă scrollabilă / footer (Continue lipit jos). REFOLOSEȘTE: .p45-search, .p45-accordion, .p45-icon-btn, .p45-btn. Deschis/închis din js/main.js (initMobileSearch); lista de țări e clonată din meniul desktop ca sursă unică. ========================================================================== */ .p45-search-sheet { position: fixed; inset: 0; z-index: 1100; /* peste tot (navbar, floating search) */ display: flex; flex-direction: column; background: var(--p45-surface-white); } .p45-search-sheet[hidden] { display: none; } /* display:flex ar suprascrie [hidden] implicit */ .p45-search-sheet__head { display: flex; align-items: center; gap: var(--p45-space-2); padding: var(--p45-space-3) var(--p45-space-5); /* 12 / 20 (Figma) */ } .p45-search-sheet__title { flex: 1 0 0; min-width: 0; margin: 0; font: var(--p45-fw-semibold) var(--p45-fs-h5) / var(--p45-lh-heading) var(--p45-font); /* 24 SemiBold */ letter-spacing: var(--p45-ls); color: var(--p45-text-main); } .p45-search-sheet__search { padding: 0 var(--p45-space-5); margin-top: var(--p45-space-4); } /* 16 sub header */ /* Chips selecții (ca pe desktop) — apar între câmpul de search și listă */ .p45-search-sheet__chips { display: flex; flex-wrap: wrap; gap: var(--p45-space-2); padding: var(--p45-space-4) var(--p45-space-5) 0; /* 16 sus, 20 lateral */ } .p45-search-sheet__chips:empty { display: none; } /* fără rând cât nu e nimic selectat */ .p45-search-sheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: var(--p45-space-4); /* 16 sub câmpul de search */ } /* Meniurile clonate (Perioadă/Persoane) în foaia mobilă full-screen — refacem layout-ul flex (pierdut la scoaterea clasei .p45-searchbar__menu), dar full-width, fără card/poziționare de dropdown; butonul Continuă/Save lipit jos. */ .p45-search-sheet .p45-travel-menu, .p45-search-sheet .p45-persons-menu { display: flex; flex-direction: column; width: 100%; min-height: 100%; padding: var(--p45-space-2) var(--p45-space-5) var(--p45-space-5); /* gutiere */ background: transparent; box-shadow: none; border-radius: 0; position: static; } .p45-search-sheet .p45-travel-menu__continue, .p45-search-sheet .p45-persons-menu__save { margin-top: auto; } .p45-search-sheet__footer { padding: var(--p45-space-2) var(--p45-space-5) var(--p45-space-4); } /* 8 / 20 / 16 */ .p45-search-sheet__footer .p45-btn { width: 100%; } /* Departure: lista de orașe (.p45-select-group clonată din meniul desktop) — gutieră 20px; anulăm overflow/padding-ul moștenit din clasele desktop. */ .p45-search-sheet .p45-select-group { padding: 0 var(--p45-space-5); } .p45-search-sheet .p45-searchbar__menu-list { overflow: visible; } /* ============ component: components/banner/banner.css ============ */ /* ========================================================================== BANNER PROMO (Figma: Text promo 42-8054, 1440×48) -------------------------------------------------------------------------- Bandă promoțională full-bleed, lipită sub top navigation (NU sticky — se derulează odată cu pagina, spre deosebire de navbar/topnav care rămân sus). Depinde de: css/style.css (tokens, .p45-icon). Încarcă-l după style.css.
…
========================================================================== */ .p45-banner { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--p45-space-4); /* 16px */ padding: var(--p45-space-2) 40px; /* 8px / 40px (Figma px-40) */ background: var(--p45-surface-brand-blue); /* #0054e2 */ color: var(--p45-text-white); } /* Textul promo (20px, lh 110%, ls -0.3px). Două „rânduri" logice (.p45-banner__line) care pe desktop curg pe o linie, iar pe mobil se stivuiesc: „7 night in Greece" / „from 499€". */ .p45-banner__text { margin: 0; /* anulează margin-block implicit de la

*/ display: flex; align-items: center; gap: var(--p45-space-1); /* 4px între cele două grupuri (Greece↔from) */ font-family: var(--p45-font); font-size: 1.25rem; /* 20px */ font-weight: var(--p45-fw-bold); line-height: var(--p45-lh-heading); /* 1.1 */ letter-spacing: var(--p45-ls); /* -0.015em ≈ -0.3px @20px */ white-space: nowrap; } .p45-banner__line { display: inline-flex; align-items: center; gap: 6px; } .p45-banner__from { font-weight: var(--p45-fw-regular); } /* „from" e Regular în Figma */ /* Grup acțiuni (buton + x). Pe desktop x e scos din flux (absolut), deci aici rămâne doar butonul; pe mobil x revine în flux lângă buton. */ .p45-banner__actions { display: flex; align-items: center; } /* Buton „Check offer" — outline alb pe fundal albastru (Figma I42:8064) */ .p45-banner__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--p45-space-1); height: 32px; padding: var(--p45-space-2) var(--p45-space-3); /* 8px 12px */ font-family: var(--p45-font); font-size: var(--p45-fs-p3); /* 14px */ font-weight: var(--p45-fw-medium); line-height: var(--p45-lh-body); letter-spacing: var(--p45-ls); white-space: nowrap; color: var(--p45-text-white); background: transparent; border: 2px solid var(--p45-text-white); border-radius: var(--p45-radius); /* 12px */ cursor: pointer; transition: background var(--p45-transition), color var(--p45-transition); } .p45-banner__btn:hover { background: var(--p45-text-white); color: var(--p45-surface-brand-blue); } .p45-banner__btn:focus-visible { outline: 2px solid var(--p45-text-white); outline-offset: 2px; } /* Închidere (x) — colț dreapta, aliniat cu padding-ul desktop al navbar-ului (80px) */ .p45-banner__close { position: absolute; top: 50%; right: 80px; transform: translateY(-50%); display: inline-flex; padding: 0; color: var(--p45-text-white); background: transparent; border: 0; cursor: pointer; } .p45-banner__close .p45-icon { width: 20px; height: 20px; } /* Ascuns după închidere (toggle din JS) */ .p45-banner.is-dismissed { display: none; } /* --- Banner slider (news) — Swiper 11 + offcanvas detalii reutilizabil --- */ .p45-banner-slider { width: 100%; position: relative; } .p45-banner-slider .swiper-slide { height: auto; } /* Bara de progres autoplay — bandă albă jos care se umple stânga→dreapta (ca un border); când e plină, Swiper schimbă slide-ul. Lățimea o dă scaleX din JS. */ .p45-banner-slider__progress { position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; height: 4px; background: var(--p45-text-white, #fff); transform: scaleX(0); transform-origin: left center; pointer-events: none; } /* News: nume pot fi lungi → text la stânga care se wrap-uiește, buton fix dreapta (NU centrat/nowrap ca promo-ul scurt din home.html). */ .p45-banner-slider .p45-banner { width: 100%; justify-content: space-between; text-align: left; } .p45-banner-slider .p45-banner__text { white-space: normal; /* se wrap-uiește, nu iese din ecran */ min-width: 0; /* permite shrink în flex */ display: -webkit-box; -webkit-line-clamp: 2; /* max 2 rânduri + … */ -webkit-box-orient: vertical; overflow: hidden; } .p45-banner-slider .p45-banner__text.is-clamped { cursor: pointer; } /* trunchiat → click pt. tooltip */ .p45-banner-slider .p45-banner__actions { flex: 0 0 auto; } /* butonul nu se micșorează */ /* Buton X (close) — elegant, neinvaziv, colț dreapta-sus al slideshow-ului. */ .p45-banner-slider__close { position: absolute; top: 6px; right: 6px; z-index: 3; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .7); cursor: pointer; transition: background .2s ease, color .2s ease; } .p45-banner-slider__close:hover, .p45-banner-slider__close:focus-visible { background: rgba(255, 255, 255, .18); color: #fff; } .p45-banner-slider__close svg { width: 14px; height: 14px; display: block; } /* Mobil: padding-ul bannerului e mic (20px) → lăsăm loc în dreapta pentru X ca să nu intre peste „Vezi detalii". */ @media (max-width: 991.98px) { .p45-banner-slider .p45-banner { padding-right: 40px; } } .p45-detail-offcanvas__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--p45-radius, 12px); display: block; margin-bottom: var(--p45-space-4, 16px); } .p45-detail-offcanvas__body { font-family: var(--p45-font, "Mukta", system-ui, sans-serif); color: var(--p45-text-strong-blue, #001d70); line-height: 1.6; } /* --- Mobil (<992px) — Figma „Promo" 42-8344 ---------------------------- Text pe 2 rânduri, aliniat stânga; buton + x grupate în dreapta. */ @media (max-width: 991.98px) { .p45-banner { justify-content: space-between; gap: var(--p45-space-4); padding: var(--p45-space-2) var(--p45-space-5); /* 8px / 20px (Figma left 20) */ } .p45-banner__text { flex-direction: column; align-items: flex-start; gap: 2px; /* 2px între rânduri (Figma) */ } /* x revine în flux, lângă buton (gap 16px → grup de 140px ca în Figma) */ .p45-banner__close { position: static; transform: none; margin-left: var(--p45-space-4); /* 16px între buton și x */ } } /* ========================================================================== ████ SFÂRȘIT TEMĂ NOUĂ P45 ████ ========================================================================== */ /* ============ p45-search: rezultate autocomplete (p45-search.js) ============ */ .p45-suggest__list { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; } .p45-suggest .p45-suggest__row { width: 100%; justify-content: flex-start; text-align: left; } .p45-suggest__sub { color: var(--p45-text-grey); font-weight: var(--p45-fw-regular); } .p45-suggest__msg { padding: 16px; text-align: center; color: var(--p45-text-grey); font-size: var(--p45-fs-p3); } /* Sugestii HOTELURI după nume (design: „Țară, regiune, hotel"; click = PDP) */ .p45-suggest__hotels { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 4px; } .p45-suggest__hotels-title { padding: 8px 12px 2px; font-size: var(--p45-fs-caption); font-weight: var(--p45-fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--p45-text-grey); } .p45-suggest__hotel-row { width: 100%; justify-content: flex-start; text-align: left; } /* Buton Caută în stare de încărcare (submit-ul durează câteva secunde) */ .p45-searchbar__submit.is-loading { position: relative; color: transparent !important; pointer-events: none; } .p45-searchbar__submit.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: var(--p45-surface-white); border-radius: 50%; animation: p45-btn-spin .7s linear infinite; } @keyframes p45-btn-spin { to { transform: rotate(360deg); } } /* ========================================================================== ████ HOMEPAGE P45 — layout secțiuni + hero + sticky (din home.css) ████ -------------------------------------------------------------------------- Clase la nivel de pagină/secțiune (.p45-carousel-section, .p45-hero-rect, .p45-hero-search, .p45-floating-search, .p45-tiles-section, .p45-numbers etc.) Scoped pe .p45-* → inerte pe paginile fără acest markup. Sursă: theme/home.css. ========================================================================== */ /* ========================================================================== Paralela45 — HOME PAGE (layout de pagină) -------------------------------------------------------------------------- Stiluri proprii ale paginii Home (compoziție peste componente). Componentele își păstrează stilurile din folderele lor. Necesită: css/style.css + CSS-urile componentelor folosite. ========================================================================== */ /* ========================================================================== HEADER — comutare navbar (desktop) ↔ top navigation (mobil) Pragul 992px e același folosit de componenta navbar. ========================================================================== */ .p45-home__mobile-nav { display: none; } /* ascuns pe desktop */ @media (max-width: 991.98px) { .p45-navbar { display: none; } /* ascundem navbar-ul desktop */ .p45-home__mobile-nav { /* afișăm top navigation mobilă, sticky sus */ display: flex; position: sticky; top: 0; z-index: 100; background: var(--p45-surface-white); } } /* ========================================================================== FUNDALUL PAGINII HOME De sub .p45-top-section în jos, toată pagina stă pe Surface/light-blue (#F9FBFF). Îl declarăm O SINGURĂ DATĂ pe , nu secțiune cu secțiune: - .p45-top-section (hero + search + tiles) pictează block-blue peste el; - navbar/topnav/banner au fundalurile lor albe/albastre, deci partea de deasupra nu e afectată; - secțiunile cu fundal propriu intenționat (.p45-numbers = brand-blue, .p45-footer = dark) rămân neschimbate. Clasa .p45-home vine din layout.blade.php, doar pe homepage (Page::homepage()), ca să nu afecteze restul site-ului. !important e necesar: poartă utilitarul Bootstrap .bg-white, care e el însuși !important. La ambele !important câștigă specificitatea: (0,1,1) > (0,1,0). ========================================================================== */ body.p45-home { background-color: var(--p45-surface-light-blue) !important; } /* ========================================================================== BLOC DE SUS — hero + search + tiles pe fundal block-blue Figma: Background 1440×672, var(--Surface-block-blue, #F1F6F8). Full-bleed; imaginea hero acoperă partea de sus, restul (search overlap + tiles) stă pe fundalul block-blue. ========================================================================== */ .p45-top-section { background: var(--p45-surface-block-blue); } /* ========================================================================== HERO — Rectangle 284 (imagine full-bleed sub navbar) Figma desktop: 1440×305 (object-fit cover). Pe mobil scădem înălțimea. ========================================================================== */ .p45-hero-rect { position: relative; width: 100%; height: 305px; overflow: hidden; } .p45-hero-rect__img { display: block; width: 100%; height: 100%; object-fit: cover; } /* gradient lizibilitate (Figma 510:26568 — light sus → navy jos) */ .p45-hero-rect::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(241, 246, 248, 0.18) -73.7%, rgba(0, 17, 45, 0.44) 70.05%); } /* Bloc de text (Figma 510:26569) — titlu + subtitlu, centrate orizontal, sus în bandă */ .p45-hero-rect__content { position: absolute; top: 64px; /* Figma: 132px din frame − 68px navbar */ left: 50%; transform: translateX(-50%); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; width: calc(100% - 64px); max-width: 636px; text-align: center; } .p45-hero-rect__title { margin: 0; color: var(--p45-text-white); font-family: var(--p45-font); font-weight: var(--p45-fw-semibold); font-size: var(--p45-fs-hero); /* 48px */ line-height: var(--p45-lh-heading); letter-spacing: var(--p45-ls-loose); } .p45-hero-rect__subtitle { margin: 0; color: var(--p45-text-white); font-family: var(--p45-font); font-weight: var(--p45-fw-medium); font-size: var(--p45-fs-h6); /* 21px */ line-height: var(--p45-lh-heading); letter-spacing: var(--p45-ls); } /* --- Mobil/tabletă (<992px): „Top visual" (Figma 510-26448) ------------- Imagine mai înaltă, colțuri jos rotunjite 32px, doar titlul centrat sus. aspect-ratio 375/461 (ca în Figma), plafonat la 461px pe ecrane mai late. */ @media (max-width: 991.98px) { /* Blocul turcoaz rotunjit: conține titlul + cardul de search. Înălțimea o dau conținutul (padding-top pentru titlu + search + padding-bottom), iar imaginea hero (absolută) îl umple → crește pe verticală odată cu search-ul. */ .p45-hero-block { position: relative; padding-top: 80px; /* loc pentru titlu deasupra cardului */ } .p45-hero-rect { position: absolute; top: 0; left: 0; right: 0; bottom: 46px; /* se oprește la mijlocul butonului Search: 22px padding-panou + ~24px (½ buton lg). Offset constant → identic compact/extins. */ height: auto; max-height: none; aspect-ratio: auto; border-radius: 0 0 32px 32px; /* colțul rotunjit al imaginii (la ½ buton) */ overflow: hidden; } .p45-hero-rect::after { /* doar un voal sus pentru lizibilitatea titlului; restul rămâne turcoaz natural */ background: linear-gradient(180deg, rgba(0, 17, 45, 0.32) 0, rgba(0, 17, 45, 0) 120px); border-radius: 0 0 32px 32px; } .p45-hero-rect__content { top: 24px; gap: 8px; width: calc(100% - 40px); /* gutieră Figma 20px */ max-width: 335px; /* lățime conținut mobil din Figma */ } .p45-hero-rect__title { font-size: var(--p45-fs-h3); /* 32px */ letter-spacing: var(--p45-ls-tight); white-space: normal; /* dacă depășește (<360px), trece pe rând nou */ } /* Pe „Top visual" mobil nu există subtitlu */ .p45-hero-rect__subtitle { display: none; } } /* Pe telefoane (≤576px) Mukta web e mai lat → 26px ca titlul să stea pe un rând. */ @media (max-width: 575.98px) { .p45-hero-rect__title { font-size: 1.625rem; } /* 26px */ } /* ========================================================================== SEARCH BAR — desktop, suprapus peste marginea de jos a hero-ului Figma „Search 3": lat 1280, aliniat la gutiera de 80px, tras peste imagine. Pe mobil îl ascundem (varianta mobilă de search se tratează separat). ========================================================================== */ /* ATENȚIE — valoarea de aici PLAFONEAZĂ tot searchbox-ul. `.p45-hero-search` e `position: relative` cu z-index, deci creează stacking context: orice z-index de dedesubt (inclusiv 1000 pe .p45-hero-search__desktop) se aplică DOAR în interiorul lui. Cât timp era 2, meniurile searchbox-ului (perioadă, persoane, destinație) rămâneau sub badge-urile/inimile cardurilor de mai jos în pagină, deși __desktop cerea explicit 1000 „peste conținutul paginii". 50 = peste tot conținutul (cardurile și capetele sticky de carusel urcă până la 20), dar SUB navbar-ul sticky (100) — peste 100 searchbar-ul ar acoperi navbar-ul la scroll. */ .p45-hero-search { position: relative; z-index: 50; } .p45-hero-search__inner { padding: 0 20px; } /* gutieră mobilă Figma 20px (desktop o suprascrie la 80px) */ .p45-hero-search__mobile { display: none; } /* implicit ascuns (apare <992) */ /* --- Desktop (≥992px): bara orizontală suprapusă peste banda de 305 ------ */ @media (min-width: 992px) { .p45-hero-search { margin-top: -118px; /* suprapune ~ ca în Figma (top 187px în banda de 305) */ margin-bottom: 0; } .p45-hero-search__inner { padding: 0 80px; } /* aliniat cu navbar-ul */ /* bara umple lățimea de conținut, plafonată la 1280 (ca în Figma) și CENTRATĂ pe pagină (margin auto) — altfel s-ar lipi la stânga pe >1440 */ .p45-hero-search__desktop { width: 100%; max-width: 1280px; margin-inline: auto; } } /* --- Mobil/tabletă (<992px): bara stivuită „Full fields = yes" ---------- Suprapusă peste hero-ul mobil („Top visual"), centrată, ca în print. */ @media (max-width: 991.98px) { .p45-hero-search__desktop { display: none; } .p45-hero-search__mobile { display: flex; } /* flex column din componentă */ .p45-hero-search { margin-top: 0; } /* offset-ul vine din padding-top-ul .p45-hero-block */ .p45-hero-search__mobile { width: 100%; /* umple gutierele (16px din __inner) */ max-width: 480px; margin: 0 auto; /* centrată */ } } /* ========================================================================== TILES — rând de categorii (Figma 510-26575) Desktop: rând centrat de 8 tile-uri, gap 24px (total 1128, centrat). Mobil: scroll orizontal (până la design-ul mobil dedicat). ========================================================================== */ .p45-tiles-section { padding: 40px 0 42px; } /* jos 42px (cerință directă) */ /* Desktop: rând centrat de tile-uri 120px (--desktop) */ .p45-tiles { display: flex; justify-content: center; align-items: flex-start; /* imaginile aliniate sus; etichetele curg dedesubt */ gap: 24px; } /* Mobil: redimensionăm aceleași tile-uri la specul --mobile (80px, colțuri 24, etichetă 14px) + scroll orizontal. Un singur markup, fără duplicare. */ @media (max-width: 991.98px) { /* sus: Figma 24px între search (483) și tiles (507); jos: 24px (cerut) */ .p45-tiles-section { padding-top: 24px; padding-bottom: 24px; } .p45-tiles-section > .container { padding-left: 20px; padding-right: 20px; } /* gutieră Figma 20px */ .p45-tiles { justify-content: flex-start; gap: 16px; /* ca --mobile */ overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; } .p45-tiles::-webkit-scrollbar { display: none; } .p45-tiles .p45-tile { flex: 0 0 auto; width: 80px; gap: 8px; } .p45-tiles .p45-tile__img-wrap { border-radius: 24px; } .p45-tiles .p45-tile__label { font-size: var(--p45-fs-p3); /* 14px */ line-height: var(--p45-lh-heading); /* 1.1 */ letter-spacing: var(--p45-ls-zero); } } /* ========================================================================== PROMO CARDS (Figma 510-26584) 2 carduri 550×384, gap 20px → rând 1120 centrat (gutiere 160px la 1440). ========================================================================== */ .p45-promo-section { padding: 24px 0 18px; } /* mobil: 24 sus (cerut) / 18 jos; desktop suprascrie: 42 sus / 30 jos */ .p45-promo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1160px; /* 1120 carduri + 2×20 gutieră */ margin: 0 auto; padding: 0 20px; } .p45-promo-grid .p45-promo { width: 100%; } /* umple coloana (max 550) */ .p45-promo-row { display: none; } /* rândul mobil — doar <768 */ /* Mobil (<768px): carduri --sm (242px, stivuite), scroll orizontal, gap 8px */ @media (max-width: 767.98px) { .p45-promo-grid { display: none; } .p45-promo-row { display: flex; gap: 8px; /* Figma mobil */ overflow-x: auto; padding: 0 20px; /* gutieră Figma 20px */ scrollbar-width: none; } .p45-promo-row::-webkit-scrollbar { display: none; } .p45-promo-row .p45-promo--sm { flex: 0 0 242px; } /* lățime fixă din Figma + scroll */ } /* ========================================================================== CAROUSEL — rând de carduri cu fade pe margini + săgeți (REUTILIZABIL) -------------------------------------------------------------------------- Pattern comun din Figma (titlu + rând carduri + „bg gradients" + _atom arrows). Folosit de: • „Discover your next stay" (42-8623/8517) cu .p45-place-card • „Charter tours" (42-8637/8523) cu .p45-blog-card Cardurile își păstrează lățimea proprie (210 / 240). Pe mobil: scroll orizontal, fără săgeți/fade. Desktop (≥992px): titlu 32px, fade + săgeți. Reutilizează: .p45-icon-btn--white (buttons.css). ========================================================================== */ .p45-carousel-section { padding: 18px 0; background: var(--p45-surface-light-blue); } /* mobil: 18+18 = 36px (desktop o suprascrie la 30) */ .p45-carousel { display: flex; flex-direction: column; gap: 16px; /* Figma mobil: titlu→carusel 16px */ width: 100%; max-width: 1320px; /* 1280 conținut + 2×20 gutieră */ margin: 0 auto; padding: 0 20px; /* gutieră Figma mobil 20px */ } .p45-carousel__title { margin: 0; font: var(--p45-fw-bold) var(--p45-fs-h5) / var(--p45-lh-heading) var(--p45-font); /* mobil: 24 Bold */ letter-spacing: var(--p45-ls); color: var(--p45-text-strong-blue); /* #001d70 */ } /* Bară de titlu cu acțiune dreapta (ex. „Circuits" + „View all") */ .p45-carousel__titlebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; } /* Bloc titlu + subtitlu (ex. „Our customers' favorite hotels") — gap 12px (Figma) */ .p45-carousel__head { display: flex; flex-direction: column; gap: 12px; width: 100%; } .p45-carousel__subtitle { 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); color: var(--p45-text-secondary); /* #404040 */ } .p45-carousel__body { display: flex; flex-direction: column; align-items: center; gap: 36px; /* Figma desktop: carusel→săgeți 36px */ width: 100%; } /* Rând de tab-uri (Not to be missed) — pill-uri (.p45-tab), gap 8px (Figma). Un singur rând scrollabil orizontal (ca în Figma mobil); pe desktop încap. */ .p45-carousel__tabs { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; } .p45-carousel__tabs::-webkit-scrollbar { display: none; } .p45-carousel__tabs > * { flex: 0 0 auto; } /* Viewport = zona de scroll + fade-urile de pe margini */ .p45-carousel__viewport { position: relative; width: 100%; } .p45-carousel__row { display: flex; align-items: stretch; /* carduri de aceeași înălțime în rând (egalizate) */ gap: 8px; /* Figma mobil */ overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .p45-carousel__row::-webkit-scrollbar { display: none; } .p45-carousel__row > * { flex: 0 0 auto; } /* cardurile își păstrează lățimea proprie + scroll */ /* Discover: Place Card-urile primesc umbra din Figma (atomul nu o are) */ .p45-carousel__row .p45-place-card { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } /* ── Carduri de aceeași înălțime (offers / blog / circuite) ──────────────── Rândul le egalizează (align-items: stretch). În interior, conținutul umple cardul și împinge prețul/categoria jos, iar titlul e limitat la 2 rânduri ca niciun card să nu iasă mult mai înalt. Se aplică în rând ȘI în grila Best Offers (.p45-offers-grid). */ .p45-carousel__row > .p45-card, .p45-carousel__row > .p45-blog-card, .p45-offers-grid > .p45-card { height: auto; } .p45-card__content, .p45-blog-card__body { flex: 1 1 auto; justify-content: space-between; } .p45-card-content__title, .p45-blog-card__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* Fade pe margini (Figma „bg gradients", 80px în fiecare gutieră → spre #f9fbff). Ascuns pe mobil. Stau peste gutierele de 80px; rândul derulează edge-to-edge pe sub ele (vezi media query desktop), deci primul card e vizibil la start și cardurile se estompează doar când intră în gutiere la derulare. */ .p45-carousel__fade { position: absolute; top: 0; bottom: 0; width: 80px; pointer-events: none; display: none; z-index: 1; transition: opacity 0.2s ease; } .p45-carousel__fade--left { left: 0; background: linear-gradient(to right, var(--p45-surface-light-blue), rgba(249, 251, 255, 0)); } .p45-carousel__fade--right { right: 0; background: linear-gradient(to left, var(--p45-surface-light-blue), rgba(249, 251, 255, 0)); } /* la capete gradientul dispare (ca în Figma primul/ultimul card e complet vizibil): stânga ascuns la început, dreapta ascuns la final. JS comută clasele. */ .p45-carousel.is-at-start .p45-carousel__fade--left { opacity: 0; } .p45-carousel.is-at-end .p45-carousel__fade--right { opacity: 0; } /* Săgeți (_atom arrows): 2 butoane în 100px, space-between. Ascuns pe mobil. */ .p45-carousel__arrows { display: none; align-items: center; justify-content: space-between; width: 100px; } /* Butonul-săgeată (Figma „_atom arrows" 42:8636 → „Icon button" 44×44). Cele două umplu exact containerul de 100px: 44 + 12 + 44 = 100. Butoanele sunt injectate din JS cu clasele .p45-icon-btn .p45-icon-btn--white, de unde iau deja tot ce cere Figma: fundal alb, border brand-blue 10%, radius pill, iconiță 24px. Singura diferență: .p45-icon-btn hug-uiește la 46×46 (24 iconiță + 2×10 padding + 2×1 border), iar designul cere 44×44. Fixăm cutia și scădem padding-ul cu 1, ca iconița să rămână exact 24. */ .p45-carousel__arrow { width: 44px; height: 44px; padding: 9px; } /* la capătul derulării — săgeata se estompează și nu mai e activă */ .p45-carousel__arrow:disabled { opacity: 0.35; cursor: default; } /* Dots de paginare (Figma: doar pe mobil, sub carusel — ex. „Circuits"). Activ = navy (#001d70), inactiv = gri. Pe desktop sunt ascunse (sunt săgeți). */ .p45-carousel__dots { display: flex; align-items: center; justify-content: center; gap: 8px; } .p45-carousel__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #d9d9d9; cursor: pointer; } .p45-carousel__dot.is-active { background: var(--p45-text-strong-blue); } /* #001d70 */ /* Popular destinations — scenă care centrează teancul (.p45-cards-stack, lățime fixă 335 mobil / 1240 desktop). Vizibilitatea mobil↔desktop o dau utilitarele Bootstrap (d-lg-none / d-none d-lg-flex) pe wrapper. */ .p45-pd__stage { display: flex; justify-content: center; width: 100%; } /* Best Offers — grid de Card Holiday (.p45-card). Figma mobil: 1 coloană, gutieră 16px; Figma desktop: 3 coloane, gutieră 24px (cardurile umplu coloana — 411px). Responsive: 1 col mobil, 2 col tabletă, 3 col desktop. */ .p45-offers-grid { display: grid; grid-template-columns: 1fr; gap: 16px; /* Figma mobil */ width: 100%; } .p45-offers-grid .p45-card { width: 100%; } @media (min-width: 576px) { .p45-offers-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .p45-offers-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } } /* Figma desktop */ /* SLOTURI REZERVATE — cardul își păstrează înălțimea chiar dacă un element lipsește. Fără asta, un card fără stele urcă titlul, serviciile și prețul cu 22px față de vecini, iar rândul din grilă se strânge. Aceeași idee ca .p45-card-desc (înălțime fixă → carduri egale). Acoperim ambele situații: 1. elementul EXISTĂ dar e gol → min-height îl ține deschis; 2. elementul LIPSEȘTE din markup → :has() rezervă locul cu un pseudo-element (intră și el în flex-ul containerului, deci primește și gap-ul de 8px). Înălțimile vin din atomi: stelele = iconița de 14px, serviciile = pastila de 20px. Prețul vechi NU are nevoie de slot: rândul de preț e aliniat pe baseline și înălțimea o dă .p45-price__current (32px), mult mai înalt. Relevant în platformă: cardurile vin din date reale, deci absența stelelor sau a serviciilor chiar se întâmplă, spre deosebire de macheta statică. */ .p45-offers-grid .p45-stars { min-height: 14px; } .p45-offers-grid .p45-card-content__services { min-height: 20px; } .p45-offers-grid .p45-card-content:not(:has(.p45-stars))::before { content: ""; height: 14px; } .p45-offers-grid .p45-card-content:not(:has(.p45-card-content__services))::after { content: ""; height: 20px; } /* Best Offers — titlu + tab-uri lipite sus cât timp grila se derulează. Sticky în interiorul .p45-carousel (containerul secțiunii): rămâne lipit la 68px (sub navbar/topnav sticky) și se desprinde când secțiunea iese din ecran. Fundalul secțiunii acoperă cardurile care alunecă pe dedesubt. */ .p45-offers-stickyhead { position: sticky; top: 68px; /* înălțimea navbar/topnav sticky */ z-index: 20; /* peste carduri, sub navbar (100) */ display: flex; flex-direction: column; gap: 16px; /* titlu → tab-uri (ca spațierea din .p45-carousel) */ /* Spațierea din jurul titlului/tab-urilor e mutată din flex-gap (jos) și din padding-ul secțiunii (sus) în padding-ul (fundalul) head-ului, ca să fie păstrată și când e lipit — banda de fundal maschează cardurile sus (sub navbar) și jos la aceeași distanță: 18/16px mobil, 30/24px desktop. */ padding-top: 18px; padding-bottom: 16px; background: var(--p45-surface-light-blue); /* fundalul secțiunii — acoperă cardurile care alunecă pe dedesubt */ } /* Anulăm flex-gap-ul dintre head și grilă (spațiul îl dă padding-bottom-ul). Specificitate dublă ca să bată regula desktop .p45-carousel { gap: 24px }. */ .p45-carousel.p45-carousel--sticky { gap: 0; } /* Sus: mutăm padding-ul secțiunii în head (altfel s-ar dubla spațiul). Jos: 0 la cerere — distanța până la secțiunea următoare o dă padding-top-ul acesteia. Specificitate dublă ca să bată regula desktop de 30px de mai jos. */ .p45-carousel-section.p45-carousel-section--stickyhead { padding-top: 0; padding-bottom: 0; } @media (min-width: 992px) { /* 40 sus (cerut) — padding-ul stă pe head, nu pe secțiune, fiindcă head-ul e position: sticky și spațiul trebuie să călătorească cu el. Jos 24 din Figma. */ .p45-offers-stickyhead { padding-top: 40px; padding-bottom: 24px; } } /* My Recent Searches — rând de Recent search Card (.p45-recent). Figma mobil: stivuite, gutieră 12px, full width; desktop: 3 în rând, egale, gutieră 24px. */ .p45-recent-grid { display: flex; flex-direction: column; gap: 12px; width: 100%; } .p45-recent-grid .p45-recent { width: 100%; } @media (min-width: 992px) { .p45-recent-grid { flex-direction: row; gap: 24px; } .p45-recent-grid .p45-recent { flex: 1 1 0; min-width: 0; } } /* Paralela45 in numbers — bandă brand-blue cu titlu alb + panoul .p45-about. Conținutul (max 1280) se aliniază cu restul paginii: pe 1440 → gutiere 80px, exact ca în Figma. Vertical: 28px mobil / 40px desktop. */ .p45-numbers { background: var(--p45-surface-brand-blue); padding: 32px 0; } /* #0054e2; mobil py 32 */ /* Banda albastră n-are spațiere EXTERIOARĂ (cei 32/40px sunt padding interior), deci se bazează pe secțiunea de deasupra. În machetă deasupra ei stă mereu „Căutările tale recente" (--pad80), care dă 36/80px jos. Dar „Cele mai bune oferte" (--stickyhead) are intenționat padding-bottom 0 — iar când blocul de căutări recente lipsește (neatașat în CMS) sau se scoate singur (fără istoric), cele două ajung lipite: cardurile ating banda albastră. Selectorul de vecin DIRECT prinde exact acest caz și nu se aplică atunci când între ele există secțiunea de căutări recente, ca să nu se adune 80+80. */ .p45-carousel-section--stickyhead + .p45-numbers { margin-top: 36px; } @media (min-width: 992px) { .p45-carousel-section--stickyhead + .p45-numbers { margin-top: 80px; } } .p45-numbers__inner { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 1320px; /* 1280 conținut + 2×20 gutieră */ margin: 0 auto; padding: 0 20px; } .p45-numbers__head { display: flex; flex-direction: column; gap: 8px; width: 100%; color: var(--p45-text-white); } .p45-numbers__title { margin: 0; font: var(--p45-fw-bold) var(--p45-fs-h5) / var(--p45-lh-heading) var(--p45-font); /* mobil: 24 Bold */ letter-spacing: var(--p45-ls); } .p45-numbers__subtitle { margin: 0; font: var(--p45-fw-regular) var(--p45-fs-p3) / var(--p45-lh-heading) var(--p45-font); /* mobil: 14 Regular */ letter-spacing: var(--p45-ls); } .p45-numbers__subtitle strong { font-weight: var(--p45-fw-semibold); } /* „No hidden fees." */ @media (min-width: 992px) { .p45-numbers { padding: 40px 0; } .p45-numbers__inner { gap: 24px; } .p45-numbers__head { gap: 12px; } .p45-numbers__title { font-size: var(--p45-fs-h3); letter-spacing: var(--p45-ls-loose); } /* 32 Bold */ .p45-numbers__subtitle { font-size: var(--p45-fs-p2); line-height: var(--p45-lh-body); font-weight: var(--p45-fw-regular); } /* 16 Regular */ .p45-numbers__subtitle strong { font-weight: var(--p45-fw-bold); } } /* --- Desktop (≥992px): titlu 32px, gap 24px, fade + săgeți vizibile -------- */ @media (min-width: 992px) { .p45-carousel { gap: 24px; } .p45-carousel__title { font-size: var(--p45-fs-h3); /* 32 Bold */ letter-spacing: var(--p45-ls-loose); /* -0.32px / 32px = -1% */ } .p45-carousel__row { gap: 12px; } /* Figma desktop */ .p45-carousel__fade { display: block; } .p45-carousel__arrows { display: flex; } .p45-carousel__dots { display: none; } /* pe desktop sunt săgețile, nu dots */ } /* ========================================================================== SPAȚIERE ÎNTRE SECȚIUNI — desktop Pe desktop, distanța totală dintre două secțiuni adiacente = 60px (30px padding-jos + 30px padding-sus). Mobilul rămâne la 36px (18+18). ========================================================================== */ @media (min-width: 992px) { .p45-promo-section, .p45-carousel-section { padding-top: 30px; padding-bottom: 30px; } /* Excepție de la ritmul de 30: promo cere 42px sus (cerință directă). Declarat separat ca să NU se mute și carusel-ul din regula de mai sus. */ .p45-promo-section { padding-top: 42px; } /* --- Excepții de ritm pe HOME, prin clase modificator --------------------- Clasele stau pe

în blocurile de home. Sunt scopate sub body.p45-home pentru că, spre deosebire de macheta statică (unde regulile trăiau în home.css, încărcat doar de home.html), aici devteam-p45.css se încarcă pe TOATE paginile — iar aceleași blocuri pot fi atașate și altor pagini din CMS. Fără scop, ritmul lor s-ar schimba și acolo. Doar desktop: pe mobil rămân cei 18px din regula de bază. */ /* „Croit pe nevoile tale" (bento) — 40px jos. */ body.p45-home .p45-carousel-section--bento { padding-bottom: 40px; } /* „Circuite", „Blog Paralela 45", „Destinații populare" — 40px sus ȘI jos. */ body.p45-home .p45-carousel-section--circuits, body.p45-home .p45-carousel-section--blog, body.p45-home .p45-carousel-section--popular { padding-top: 40px; padding-bottom: 40px; } /* „Recenzii" — ultima secțiune înainte de footer, deci 80px jos. Regulă separată: valoarea de jos diferă de cele de mai sus. */ body.p45-home .p45-carousel-section--reviews { padding-top: 40px; padding-bottom: 80px; } } /* Excepție: „My Recent Searches" — padding sus/jos 36px pe mobil, 80px pe desktop. Plasat după media query-ul de spațiere ca să-l suprascrie la egalitate de specificitate. */ .p45-carousel-section--pad80 { padding-top: 36px; padding-bottom: 36px; } @media (min-width: 992px) { .p45-carousel-section--pad80 { padding-top: 80px; padding-bottom: 80px; } } /* Our partners — titlu (pe fundalul paginii) + strip alb full-bleed cu logo-uri (componentă: components/partners → .p45-partners). Titlul stă în coloana centrată; strip-ul alb se întinde edge-to-edge ca în Figma. */ .p45-partners-section { background: var(--p45-surface-light-blue); padding-top: 36px; padding-bottom: 36px; } /* mobil 36 */ .p45-partners-section__head { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 20px; } .p45-partners-section__head .p45-carousel__title { margin: 0; } .p45-partners-section .p45-partners { margin-top: 16px; } @media (min-width: 992px) { .p45-partners-section { padding-top: 80px; padding-bottom: 80px; } /* desktop 80 */ .p45-partners-section .p45-partners { margin-top: 24px; } } /* Newsletter — padding-top 66px pe mobil (spațiu pentru flamingo-ul care iese peste marginea de sus a cardului; NU-l reduce fără să verifici că nu se taie). Desktop: 51px sus / 40px jos (cerință directă), peste ritmul de 30 al secțiunilor. Ambele reguli bat .p45-carousel-section prin ORDINE, la specificitate egală — dacă cineva reordonează fișierul, revin la 30px fără niciun semn. */ .p45-form-section { padding-top: 66px; } @media (min-width: 992px) { .p45-form-section { padding-top: 51px; padding-bottom: 40px; } } /* Tour reviews — carusel cu carduri Testimonial (.p45-testimonial). Avatarul iese 25px peste marginea de sus a cardului → rândul primește padding-top 30px ca să nu fie tăiat de scroll. ATENȚIE la gap-ul de pe .p45-reviews: el NU e distanța vizibilă până la carduri, pentru că se adună cu cei 30px de padding ai rândului. desktop: 18 gap + 30 padding = 48px titlu→card (cerut); mobil: 40 gap + 30 padding = 70px (nemodificat). Dots pe mobil, săgeți pe desktop (ca la Circuits). */ .p45-reviews { gap: 40px; } .p45-reviews .p45-carousel__body { gap: 16px; } .p45-reviews .p45-carousel__row { padding-top: 30px; } /* Carduri egale ca înălțime. Rândul e deja `align-items: stretch` în platformă (regula generică de mai sus, pentru carduri din date reale), deci aici mai lipsea doar împingerea blocului de hotel la bază — altfel ar rămâne suspendat sub text, cu gol dedesubt, în cardurile mai scurte. */ .p45-reviews .p45-hotel-name { margin-top: auto; } @media (min-width: 992px) { .p45-reviews { gap: 18px; } /* 18 + 30 padding = 48px până la card */ .p45-reviews .p45-carousel__body { gap: 36px; } } /* Footer — distanță față de secțiunea de deasupra. Mobil: 36px, din margin-ul de aici. Desktop: 80px în general, dar 0 pe HOME — acolo distanța o dă padding-bottom-ul de 80px al ultimei secțiuni („Recenzii", .p45-carousel-section--reviews). Fără excepție s-ar aduna: 80 padding + 80 margin = 160px. Scopat pe .p45-home ca restul paginilor (care n-au secțiunea de recenzii) să-și păstreze cei 80px. */ .p45-footer { margin-top: 36px; } @media (min-width: 992px) { .p45-footer { margin-top: 80px; } body.p45-home .p45-footer { margin-top: 0; } } /* ========================================================================== FLOATING STICKY SEARCH (componentă: components/search → .p45-sticky--desktop) Plutește fix jos: 48px de marginea de jos, 24px margini laterale (Figma 42-9178: cadru 1392 la x=24, înălțime 48). Doar desktop (≥992px); sub overlay/modal (1040+), peste conținut. ========================================================================== */ .p45-floating-search { position: fixed; bottom: var(--p45-space-8); /* 32px de marginea de jos */ z-index: 1030; /* peste conținut, sub overlay/modal */ pointer-events: none; /* zona dintre elemente lasă click-ul să treacă */ /* Stare ascunsă: apare doar după ce search-ul din hero iese din ecran (clasa .is-visible adăugată din js/main.js → initStickySearch). */ opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity var(--p45-transition), transform var(--p45-transition), visibility var(--p45-transition); } .p45-floating-search.is-visible { opacity: 1; visibility: visible; transform: none; } .p45-floating-search.is-visible .p45-sticky > * { pointer-events: auto; } /* doar butoanele sunt interactive */ /* Mobil/tabletă (<992px): full-bleed — componenta are deja padding 20px intern (Figma 42-8918, cadru full-width). */ @media (max-width: 991.98px) { .p45-floating-search { left: 0; right: 0; } .p45-floating-search .p45-sticky { width: 100%; } } /* Desktop (≥992px): 24px margini laterale (Figma 42-9178, cadru 1392 la x=24). */ @media (min-width: 992px) { .p45-floating-search { left: var(--p45-space-6); right: var(--p45-space-6); } } /* ████ SFÂRȘIT HOMEPAGE P45 layout ████ */ /* ============ searchbox standalone (non-homepage) — neutralizează poziționarea hero ============ */ .p45-top-section--bare { background: transparent; padding: 24px 0; min-height: 0; } .p45-top-section--bare .p45-hero-block { min-height: 0; padding: 0; background: transparent; } .p45-top-section--bare .p45-hero-search { margin: 0; position: static; transform: none; } .p45-top-section--bare .p45-hero-search__inner { padding: 0; max-width: 1100px; margin: 0 auto; } /* ============ buton sortare rezultate (stil p45) — folosit si pe circuite, unde nu exista