/* * Name: Style.css * Author: NetThemes * Author Url: https://www.netthemes.ir * Description: Parnet HTML Template styles * https://www.rtl-theme.com/parent-html-template/ * Structure: #Variables #Fonts #Base #Utilities |---- #flex #Components |---- #stars |---- #badge |---- #modal |---- #swiper |---- #PathVisualizer |---- #jalaliDatePicker #Layouts |---- #wrapper |---- #header |---- #footer #DarkTheme #Pages |---- #index |---- #search |---- #404 |---- #profile |---- #orders |---- #contact |---- #detail |---- #blog */ /* -------------------------------------------------------------------------- */ /* #Variables */ /* -------------------------------------------------------------------------- */ :root { --font-size-mobile: 14px; --font-size: 15px; --header-height: 85px; } /* -------------------------------------------------------------------------- */ /* #Fonts */ /* -------------------------------------------------------------------------- */ /* ================================ Variable Font Definition -------------------------------- - Defines a variable font with weight range from 100 to 900. - `font-display: swap;` ensures better performance and avoids invisible text issues. - `src` provides multiple formats for better browser compatibility. ================================ */ /* @font-face { font-family: "Kalameh"; font-stretch: normal; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../vendor/fonts/vazir/Vazirmatn-VariableFont_wght.ttf") format("truetype"); } */ /* ================================ Static Font Definitions (Fallback) -------------------------------- - These are used when the variable font is not supported. - Includes Regular and Bold weights. - `woff2` is the most optimized, followed by `woff` and `truetype`. ================================ */ /* Regular weight */ @font-face { font-family: "Kalameh"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/fonts/kalameh/KalamehWebFaNum-Regular.woff2") format("woff2"), url("../vendor/fonts/kalameh/KalamehWebFaNum-Regular.woff") format("woff"), url("../vendor/fonts/kalameh/KalamehWebFaNum-Regular.ttf") format("truetype"); } /* Bold weight */ @font-face { font-family: "Kalameh"; font-style: normal; font-weight: 700; font-display: swap; src: url("../vendor/fonts/kalameh/KalamehWebFaNum-Bold.woff2") format("woff2"), url("../vendor/fonts/kalameh/KalamehWebFaNum-Bold.woff") format("woff"), url("../vendor/fonts/kalameh/KalamehWebFaNum-Bold.ttf") format("truetype"); } /* ================================ Default Font on -------------------------------- - Uses "Kalameh" as the default static font. - Falls back to `sans-serif` if custom fonts fail to load. ================================ */ body { font-family: "Kalameh", sans-serif; } /* ================================ Use Variable Font If Supported -------------------------------- - If the browser supports font variations, switch to `KalamehVar`. - `font-optical-sizing: auto;` improves rendering for variable fonts. ================================ */ @supports (font-variation-settings: normal) { body { font-family: "Kalameh", sans-serif; font-optical-sizing: auto; } } /* -------------------------------------------------------------------------- */ /* #Base */ /* -------------------------------------------------------------------------- */ /* ================================ Reset Basic Styling for HTML and Body -------------------------------- - Removes default margins and padding for consistency. - Sets the default font size using CSS variables. ================================ */ html, body { margin: 0; padding: 0; font-size: var(--font-size-mobile); } /* ================================ Adjust Font Size for Larger Screens -------------------------------- - Uses `--font-size` for larger screens (≥ 576px). ================================ */ @media screen and (min-width: 576px) { html, body { font-size: var(--font-size); } } /* ================================ Ensure Consistent Font for Tooltips -------------------------------- - Inherits the font from the body to maintain uniformity. ================================ */ .tooltip { font: inherit; } /* ================================ Basic Layout for Body -------------------------------- - Uses flexbox for a vertical content container. - Ensures the body takes up full viewport height. ================================ */ body { height: 100%; display: flex; flex-direction: column; } /* ================================ Prevent Images from Exceeding Container Width -------------------------------- - Ensures images remain responsive. ================================ */ img { max-width: 100%; height: auto; } /* -------------------------------------------------------------------------- */ /* #Utilities */ /* -------------------------------------------------------------------------- */ /* ---------------------------------- #flex --------------------------------- */ /* flex row */ .nt-flex, .nt-flex-start-start { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-start; align-items: start; } .nt-flex-start-center { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-start; align-items: center; } .nt-flex-start-end { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-start; align-items: end; } .nt-flex-center-start { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; align-items: start; } .nt-flex-center-center { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; align-items: center; } .nt-flex-center-end { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; align-items: end; } .nt-flex-end-start { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; align-items: start; } .nt-flex-end-center { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; align-items: center; } .nt-flex-end-end { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; align-items: end; } .nt-flex-around-start { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-around; align-items: start; } .nt-flex-around-center { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-around; align-items: center; } .nt-flex-around-end { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-around; align-items: end; } .nt-flex-between-start { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; align-items: start; } .nt-flex-between-center { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; align-items: center; } .nt-flex-between-end { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; align-items: end; } /* flex column */ .nt-flex-column, .nt-flex-column-start-start { display: flex; flex-wrap: wrap; flex-direction: column; gap: 0.5rem; justify-content: flex-start; align-items: start; } .nt-flex-column-start-center { display: flex; flex-wrap: wrap; flex-direction: column; gap: 0.5rem; justify-content: flex-start; align-items: center; } .nt-fl-columnex-start-end { display: flex; flex-wrap: wrap; flex-direction: column; gap: 0.5rem; justify-content: flex-start; align-items: end; } .nt-flex-column-center-start { display: flex; flex-wrap: wrap; flex-direction: column; gap: 0.5rem; justify-content: center; align-items: start; } .nt-flex-column-center-center { display: flex; flex-wrap: wrap; flex-direction: column; gap: 0.5rem; justify-content: center; align-items: center; } .nt-fle-columnx-center-end { display: flex; flex-wrap: wrap; flex-direction: column; gap: 0.5rem; justify-content: center; align-items: end; } .nt-flex-column-end-start { display: flex; flex-wrap: wrap; flex-direction: column; gap: 0.5rem; justify-content: flex-end; align-items: start; } .nt-flex-column-end-center { display: flex; flex-wrap: wrap; flex-direction: column; gap: 0.5rem; justify-content: flex-end; align-items: center; } .nt-flex-column-end-end { display: flex; flex-wrap: wrap; flex-direction: column; gap: 0.5rem; justify-content: flex-end; align-items: end; } .nt-flex-column-around-start { display: flex; flex-wrap: wrap; flex-direction: column; gap: 0.5rem; justify-content: space-around; align-items: start; } .nt-flex-column-around-center { display: flex; flex-wrap: wrap; flex-direction: column; gap: 0.5rem; justify-content: space-around; align-items: center; } .nt-flex-column-around-end { display: flex; flex-wrap: wrap; flex-direction: column; gap: 0.5rem; justify-content: space-around; align-items: end; } .nt-flex-column-between-start { display: flex; flex-wrap: wrap; flex-direction: column; gap: 0.5rem; justify-content: space-between; align-items: start; } .nt-flex-column-between-center { display: flex; flex-wrap: wrap; flex-direction: column; gap: 0.5rem; justify-content: space-between; align-items: center; } .nt-flex-column-between-end { display: flex; flex-wrap: wrap; flex-direction: column; gap: 0.5rem; justify-content: space-between; align-items: end; } /* ------------------------------- fontWeight ------------------------------- */ .nt-fw-100 { font-family: "Kalameh", sans-serif; font-optical-sizing: auto; font-weight: 100; font-style: normal; } .nt-fw-200 { font-family: "Kalameh", sans-serif; font-optical-sizing: auto; font-weight: 200; font-style: normal; } .nt-fw-300 { font-family: "Kalameh", sans-serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; } .nt-fw-400 { font-family: "Kalameh", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } .nt-fw-500 { font-family: "Kalameh", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; } .nt-fw-600 { font-family: "Kalameh", sans-serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; } .nt-fw-700 { font-family: "Kalameh", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; } .nt-fw-800 { font-family: "Kalameh", sans-serif; font-optical-sizing: auto; font-weight: 800; font-style: normal; } .nt-fw-900 { font-family: "Kalameh", sans-serif; font-optical-sizing: auto; font-weight: 900; font-style: normal; } /* -------------------------------------------------------------------------- */ /* #Components */ /* -------------------------------------------------------------------------- */ /* ----------------------------- commonQuestions ---------------------------- */ .commonQuestions { background-color: var(--bs-light-bg-subtle); } .commonQuestions .accordion-button { --bs-accordion-btn-padding-y: 1.5rem; --bs-accordion-active-color: var(--bs-dark); --bs-accordion-active-bg: var(--bs-gray-100); } [data-bs-theme=dark] .commonQuestions .accordion-button { --bs-accordion-active-color: var(--bs-light); --bs-accordion-active-bg: var(--bs-gray-800); } .commonQuestions .commonQuestions-icon { width: 2rem; height: 2rem; border-radius: var(--bs-border-radius-pill); border: 1px solid transparent; display: flex; justify-content: center; align-items: center; transition: border-color 0.15s ease-in-out; } .commonQuestions .accordion-button:hover .commonQuestions-icon, .accordion-button:not(.collapsed) .commonQuestions-icon { border-color: var(--bs-secondary); } .commonQuestions-icon i { transition: transform 1s ease-in-out; } .accordion-button:not(.collapsed) .commonQuestions-icon i { transform: rotateY(360deg); } .commonQuestions .accordion-body { --bs-accordion-body-padding-x: 1.5rem; --bs-accordion-body-padding-y: 1.5rem; } /* --------------------------------- #stars --------------------------------- */ /* https://www.putzisan.com/articles/accessible-star-rating-radio-input-html-css */ .nt-stars label { position: relative; color: grey; padding: 0 0.25rem; transition: color 0.15s; } /* Position the invisible input on top of the label */ .nt-stars input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; /* CSS reset */ margin: 0; } /* Add an outline when the input is focused via the keyboard */ .nt-stars label:has(input:focus-visible) { outline-offset: 1px; outline: black solid 2px; } /* Color Adjustments when the input is checked, hovered, or active */ /* checked */ .nt-stars label:is(:has(> input:checked), :has(~ label > input:checked)) { color: gold; } /* hover */ .nt-stars label:is(:has(> input:hover), :has(~ label > input:hover)) { color: goldenrod; } /* we need to duplicate the :active identifier, so that the specificity of the selector is higher than the ones from before */ .nt-stars label:has(input:active):has(input:active) { color: darkgoldenrod; } /* --------------------------------- #badge --------------------------------- */ .nt-badge { --bs-bg-opacity: .05; padding: 0.2rem 1rem; border-radius: var(--bs-border-radius); position: relative; display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; } /* --------------------------------- #modal --------------------------------- */ .modal-body { max-height: calc(80vh); overflow-y: auto; } .modal-header { border-bottom: 0; } .nt-modal-wrapper { text-align: center; padding: 1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.5rem; } #signModal { --bs-modal-header-border-color: transparent; } /* --------------------------------- #swiper -------------------------------- */ .swiper { /* swiper theme */ --swiper-theme-color: var(--bs-primary); } .swiper .swiper-button-prev, .swiper .swiper-button-next { color: var(--bs-dark); top: auto; bottom: 0; --swiper-navigation-size: 1.5rem; } /* ----------------------------- #PathVisualizer ---------------------------- */ .nt-PathVisualizer { position: relative; height: 1rem; display: flex; justify-content: center; align-items: center; } .nt-PathVisualizer::before, .nt-PathVisualizer::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 0.5rem; height: 0.5rem; border-radius: 100%; border: 1px solid var(--bs-gray); background-color: var(--bs-light); } .nt-PathVisualizer::before { left: 0; } .nt-PathVisualizer::after { right: 0; } .nt-PathVisualizer.reversed-icon i { transform: rotate(180deg); margin-bottom: 3px; } .nt-PathVisualizer .nt-PathVisualizer-line { width: 100%; height: 1px; border-top: 1px dashed var(--bs-gray); position: absolute; top: 50%; right: 0; transform: translateY(-50%); } /* ---------------------------- #jalaliDatePicker --------------------------- */ /* change color of buttons */ jdp-container .jdp-btn-close, jdp-container .jdp-btn-empty, jdp-container .jdp-btn-today { background: var(--bs-info) !important; } /* change red colors of holidays ... */ jdp-container .jdp-day-name.holly-day, jdp-container .jdp-day-name.last-week, jdp-container .jdp-day.holly-day, jdp-container .jdp-day.last-week { color: var(--bs-danger) !important; } /* -------------------------------------------------------------------------- */ /* #Layouts */ /* -------------------------------------------------------------------------- */ /* -------------------------------- #wrapper -------------------------------- */ .main { position: relative; flex-grow: 1; } .wrapper { width: 100%; max-width: 400px; position: relative; margin-left: auto; margin-right: auto; } @media screen and (min-width: 576px) { .wrapper { max-width: 600px; } } @media screen and (min-width: 768px) { .wrapper { max-width: 800px; } } @media screen and (min-width: 992px) { .wrapper { max-width: 1000px; } } @media screen and (min-width: 1200px) { .wrapper { max-width: 1400px; } } @media screen and (min-width: 1600px) { .wrapper { max-width: 1680px; } } .wrapper-xs { width: 100%; max-width: 380px; position: relative; margin: 0 auto; } .wrapper-sm { width: 100%; max-width: 576px; position: relative; margin: 0 auto; } .wrapper-md { width: 100%; max-width: 768px; position: relative; margin: 0 auto; } .wrapper-lg { width: 100%; max-width: 992px; position: relative; margin: 0 auto; } .wrapper-xl { width: 100%; max-width: 1200px; position: relative; margin: 0 auto; } /* --------------------------------- #header -------------------------------- */ .header { width: 100%; height: var(--header-height); background-color: var(--bs-light); border-top: 2px solid var(--bs-body-bg); display: flex; justify-content: center; align-items: center; } [data-bs-theme=dark] .header { background-color: var(--bs-dark); } .header, .header .link { color: var(--bs-dark) !important; } [data-bs-theme=dark] .header, [data-bs-theme=dark] .header .link { color: var(--bs-light) !important; } /* dynamic */ .header.dynamic { height: var(--header-height); border-bottom: 1px solid transparent; background-color: transparent; position: fixed; top: 0; left: 0; z-index: 1000; transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out; } /* dynamic scrolled */ .header.dynamic.scrolled { border-bottom-color: var(--bs-gray-100); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(1rem); } [data-bs-theme=dark] .header.dynamic.scrolled { border-bottom-color: var(--bs-gray-900); background: rgba(17, 24, 39, 0.9); } .header.dynamic, .header.dynamic .link { color: var(--bs-white) !important; } .header.dynamic.scrolled, .header.dynamic.scrolled .link { color: var(--bs-dark) !important; } [data-bs-theme=dark] .header.dynamic.scrolled, [data-bs-theme=dark] .header.dynamic.scrolled .link { color: var(--bs-light) !important; } /* header logo */ .header-logo { display: flex; align-items: center; gap: 0.5rem; } .header-logo h1 { margin-bottom: 0; } /* header nav */ .header-nav { display: flex; gap: 1rem; padding: 0 3rem; } .header-nav .btn { font-weight: bold; } .header-nav .dropdown-menu { --bs-dropdown-min-width: 13rem; --bs-dropdown-padding-y: 0.75rem; } .header-nav .dropdown-item { --bs-dropdown-item-padding-y: 0.75rem; --bs-dropdown-item-padding-x: 1rem; font-weight: bold; display: flex; align-items: center; gap: 0.5rem; } /* header user */ .header-user { font-weight: bold; } [data-bs-theme=dark] .header-user { color: var(--bs-gray-200); background-color: var(--bs-gray-800); border-color: var(--bs-gray-500); } [data-bs-theme=dark] .header-user:hover { background-color: var(--bs-gray-700); border-color: var(--bs-gray-400); } /* --------------------------------- #footer -------------------------------- */ .footer { margin-top: var(--bs-gutter-x); position: relative; } .footer .link { color: var(--bs-dark); } [data-bs-theme=dark] .footer .link { color: var(--bs-white); } .footer::before { content: ""; width: 100%; height: 3px; background: linear-gradient(to left, var(--bs-primary), var(--bs-secondary)); background-size: 200% 200%; position: absolute; top: 0; left: 0; z-index: 1; animation: Animation 20s ease infinite; } @keyframes Animation { 0% { background-position: 10% 0% } 50% { background-position: 91% 100% } 100% { background-position: 10% 0% } } .footer svg { width: 100%; position: absolute; bottom: 0; left: 0; z-index: -1; } /* content */ .footer-badge { min-width: 7rem; padding: 1rem 0.5rem; background-color: var(--bs-white); border: 1px solid var(--bs-gray-200); border-radius: var(--bs-border-radius); display: flex; justify-content: center; align-items: center; } .footer-badge img { max-height: 80px; } .footer-gr-icon { background-image: linear-gradient(to bottom right, var(--bs-primary), var(--bs-primary-bg-subtle)); color: transparent; background-clip: text; } /* copyright */ .footer-copyright .footer-copyright a { transition: color 0.15s ease-in-out; } .footer-copyright .footer-copyright a:hover { background-image: linear-gradient(to bottom right, var(--bs-primary), var(--bs-primary-bg-subtle)) !important; color: transparent !important; background-clip: text !important; } /* svg */ .footer svg .path-first { fill: var(--bs-gray-100); } [data-bs-theme=dark] .footer svg .path-first { fill: var(--bs-gray-800); } .footer svg .path-second { fill: var(--bs-gray-200); } [data-bs-theme=dark] .footer svg .path-second { fill: var(--bs-gray-700); } /* -------------------------------------------------------------------------- */ /* #DarkTheme */ /* -------------------------------------------------------------------------- */ [data-bs-theme=dark] .bg-light { --bs-light-rgb: var(--bs-dark-rgb) } [data-bs-theme=dark] .bg-white { --bs-white-rgb: var(--bs-dark-rgb); } [data-bs-theme=dark] .link-dark { --bs-dark-rgb: #fff; } [data-bs-theme=dark] .link-dark:hover { color: var(--bs-gray-200) !important; } [data-bs-theme=dark] .btn-light { color: var(--bs-gray-300); background-color: var(--bs-gray-800); border-color: var(--bs-gray-600); } [data-bs-theme=dark] .btn-light:hover { background-color: var(--bs-gray-700); border-color: var(--bs-gray-300); } [data-bs-theme=dark] .btn-outline-dark { color: var(--bs-gray-300); border-color: var(--bs-gray-400); } [data-bs-theme=dark] .btn-outline-dark:hover { background-color: var(--bs-gray-800); border-color: var(--bs-gray-300); } [data-bs-theme=dark] .table-light { --bs-table-color: var(--bs-light); --bs-table-bg: var(--bs-gray-800); } /* jalali date picker */ [data-bs-theme=dark] jdp-container, [data-bs-theme=dark] jdp-container .jdp-month, [data-bs-theme=dark] jdp-container .jdp-month input, [data-bs-theme=dark] jdp-container .jdp-month select, [data-bs-theme=dark] jdp-container .jdp-time, [data-bs-theme=dark] jdp-container .jdp-time input, [data-bs-theme=dark] jdp-container .jdp-time select, [data-bs-theme=dark] jdp-container .jdp-year, [data-bs-theme=dark] jdp-container .jdp-year input, [data-bs-theme=dark] jdp-container .jdp-year select { background-color: var(--bs-gray-800) !important; color: var(--bs-gray-100) !important; } [data-bs-theme=dark] jdp-container .jdp-icon-minus, [data-bs-theme=dark] jdp-container .jdp-icon-plus { border-color: var(--bs-gray-500); } [data-bs-theme=dark] jdp-container .jdp-months, [data-bs-theme=dark] jdp-container .jdp-years { fill: rgba(255, 255, 255, 0.95) !important; color: rgba(255, 255, 255, 0.95) !important; } [data-bs-theme=dark] jdp-container .jdp-day, [data-bs-theme=dark] jdp-container .jdp-day-name { color: rgba(255, 255, 255, 0.95) !important; } [data-bs-theme=dark] jdp-container .jdp-day-name.holly-day, [data-bs-theme=dark] jdp-container .jdp-day-name.last-week, [data-bs-theme=dark] jdp-container .jdp-day.holly-day, [data-bs-theme=dark] jdp-container .jdp-day.last-week { color: var(--bs-danger) !important; } /* swiper */ [data-bs-theme=dark] .swiper .swiper-button-prev, [data-bs-theme=dark] .swiper .swiper-button-next { color: var(--bs-light); } /* -------------------------------------------------------------------------- */ /* #pages */ /* -------------------------------------------------------------------------- */ /* --------------------------------- #index --------------------------------- */ /* booking -------------------------------- */ .booking-wrapper { max-height: 37rem; margin-bottom: 8rem; padding-top: 15rem; position: relative; z-index: 100; background: linear-gradient(to top right, var(--bs-primary), var(--bs-secondary)); background-repeat: no-repeat !important; background-size: cover !important; background-position: center; border-bottom-left-radius: 3rem; border-bottom-right-radius: 3rem; display: flex; flex-direction: column; justify-content: end; align-items: center; } .booking-inner { margin-bottom: -5rem; border-radius: var(--bs-border-radius); } .booking-form { --booking-form-item-height: 4.2rem; --booking-form-border-width: 2px; --booking-form-border-color: var(--bs-gray-300); --booking-form-font-size: 1.15rem; background-color: var(--bs-body-bg); padding: 4rem 2rem; margin-top: 0; border-radius: var(--bs-border-radius); border-top-left-radius: 0; border-top-right-radius: 0; } .booking-wrapper .form-control { height: var(--booking-form-item-height); font-size: var(--booking-form-font-size); } .booking-select .form-select { height: var(--booking-form-item-height); display: flex; align-items: center; /* remove bootstrap arrow from select */ --bs-form-select-bg-img: ""; } .booking-travelers .btn.dropdown-toggle, .booking-form .form-select, .booking-form .form-control { border-width: var(--booking-form-border-width); border-color: var(--booking-form-border-color); } /* booking nav */ .booking-nav { padding: 0.75rem 0.75rem 0 0.75rem; background-color: rgba(255, 255, 255, 0.3); backdrop-filter: blur(1rem); border-radius: var(--bs-border-radius); border-bottom-right-radius: 0; border-bottom-left-radius: 0; overflow-x: auto; overflow-y: hidden; white-space: nowrap; display: flex; align-items: center; gap: 1rem; } [data-bs-theme=dark] .booking-nav { background-color: rgba(17, 24, 39, 0.9); } .booking-nav .btn { border: 0; font-weight: bold; font-size: 1.1rem; color: var(--bs-gray-600); background-color: var(--bs-light); padding: 0.75rem 1.5rem; margin-bottom: 0.75rem; } [data-bs-theme=dark] .booking-nav .btn { color: var(--bs-gray-300); background-color: var(--bs-gray-800); } .booking-nav .btn:hover { background-color: var(--bs-body-bg); } [data-bs-theme=dark] .booking-nav .btn:hover { background-color: var(--bs-gray-900); } .booking-nav .btn i { font-size: 2.5rem; color: var(--bs-gray-600); } [data-bs-theme=dark] .booking-nav .btn i { color: var(--bs-gray-300); } .booking-nav .btn.active { padding-bottom: calc(0.75rem * 2); margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; color: var(--bs-dark); background-color: var(--bs-body-bg); } [data-bs-theme=dark] .booking-nav .btn.active { color: var(--bs-gray-100); } .booking-nav .btn.active i { color: var(--bs-primary); } /* pill */ .booking-nav.booking-navPill { margin-bottom: 1rem; border-radius: var(--bs-border-radius-pill); } .booking-nav.booking-navPill .btn { border-radius: var(--bs-border-radius-pill); } .booking-nav.booking-navPill .btn.active { padding: 0.75rem 1.5rem; margin-bottom: 0.75rem; border-radius: var(--bs-border-radius-pill); } /* compact */ .booking-nav.booking-navCompact { gap: 0.25rem; } .booking-nav.booking-navCompact .btn { margin: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .booking-nav.booking-navCompact .btn.active { padding: 0.75rem 1.5rem; } /* booking fromTo */ .booking-fromTo { display: flex; } .booking-fromTo .form-select { height: var(--booking-form-item-height); /* remove bootstrap arrow from select */ --bs-form-select-bg-img: ""; display: flex; align-items: center; border-radius: 0 !important; } .booking-fromTo .form-select:first-of-type { border-top-right-radius: var(--bs-border-radius) !important; border-bottom-right-radius: var(--bs-border-radius) !important; border-left: 0 !important; } .booking-fromTo .form-select:last-of-type { border-top-left-radius: var(--bs-border-radius) !important; border-bottom-left-radius: var(--bs-border-radius) !important; } /* bookingDepartureReturn */ .booking-departureReturn { display: flex; } .booking-departureReturn .form-control { border-radius: 0 !important; } .booking-departureReturn .form-control:first-of-type { border-top-right-radius: var(--bs-border-radius) !important; border-bottom-right-radius: var(--bs-border-radius) !important; border-left: 0 !important; } .booking-departureReturn .form-control:last-of-type { border-top-left-radius: var(--bs-border-radius) !important; border-bottom-left-radius: var(--bs-border-radius) !important; } /* booking travelers */ .booking-travelers .btn.dropdown-toggle { min-width: 11rem; height: var(--booking-form-item-height); justify-content: start; background-color: var(--bs-body-bg); font-size: var(--booking-form-font-size); } .booking-travelers .btn.dropdown-toggle::after { display: none !important; } /* dropdown */ .booking-travelers .dropdown-menu { --bs-dropdown-min-width: 21rem; } .booking-travelers .dropdown-item { --bs-dropdown-item-padding-y: var(--bs-gutter-y); --bs-dropdown-item-padding-x: var(--bs-gutter-x); --bs-dropdown-link-hover-color: var(--bs-body-color); --bs-dropdown-link-hover-bg: transparent; --bs-dropdown-link-active-color: var(--bs-body-color); --bs-dropdown-link-active-bg: transparent; } /* bookingsubmit */ .booking-submit { width: 100%; height: var(--booking-form-item-height); font-size: var(--booking-form-font-size); justify-content: center; gap: var(--bs-gutter-x); } /* tom select */ .ts-dropdown { background-color: var(--bs-body-bg) !important; border: 1px solid var(--bs-border-color) !important; border-radius: var(--bs-border-radius) !important; } .ts-control, .ts-control input, .ts-dropdown, .ts-control, .ts-control input, .ts-dropdownlaceholder { color: var(--black) !important; opacity: 1 !important; } .ts-wrapper .dropdown-header-close { left: 8px; right: auto !important; color: var(--bs-gray) !important; line-height: 28px !important; } .ts-wrapper .dropdown-header { background-color: var(--bs-gray-100); border-bottom: 1px solid var(--bs-gray-100); border-radius: var(--bs-border-radius) !important; } [data-bs-theme=dark] .ts-wrapper .dropdown-header { background-color: var(--bs-gray-800); border-bottom: 1px solid var(--bs-gray-700); } .ts-control { background-color: var(--bs-body-bg); border: 0 !important; border-radius: 0 !important; } .ts-control, .ts-wrapper.single.input-active .ts-control { background-color: var(--bs-body-bg) !important; } .ts-control, .ts-control input, .ts-dropdown { font-size: var(--booking-form-font-size) !important; } .ts-dropdown .create, .ts-dropdown .no-results, .ts-dropdown .optgroup-header, .ts-dropdown .option { padding: 0.75rem !important; } .ts-dropdown .active { background-color: var(--bs-gray-100) !important; color: var(--bs-gray) !important; } [data-bs-theme=dark] .ts-dropdown .active { background-color: var(--bs-dark) !important; color: var(--bs-gray-100) !important; } /* formSeparate */ .booking-formSeparate {} .booking-formSeparate .booking-fromTo { gap: 0.25rem; } .booking-formSeparate .booking-fromTo .form-select { border-radius: var(--bs-border-radius-pill) !important; border: var(--booking-form-border-width) solid var(--booking-form-border-color) !important; } .booking-formSeparate .booking-departureReturn { gap: 0.25rem; } .booking-formSeparate .booking-departureReturn .form-control { border-radius: var(--bs-border-radius-pill) !important; border: var(--booking-form-border-width) solid var(--booking-form-border-color) !important; } .booking-formSeparate .booking-travelers .btn.dropdown-toggle { border-radius: var(--bs-border-radius-pill) !important; } .booking-formSeparate .booking-submit { border-radius: var(--bs-border-radius-pill) !important; } /* topOffersSlider ---------------------------- */ .topOffersSlider .topOffersSlider-slide { width: 100%; height: 100%; min-height: 15rem; color: var(--bs-white); border-radius: var(--bs-border-radius); display: flex; flex-direction: column; justify-content: end; gap: 0.5rem; position: relative; z-index: 1; background-image: var(--bg); background-size: cover; background-position: center; background-repeat: no-repeat; transition: background-position 0.3s ease; } .topOffersSlider .topOffersSlider-slide:hover { background-position: center 60%; } .topOffersSlider .topOffersSlider-slide-content { padding: 1rem 1.25rem; border-radius: var(--bs-border-radius); background-color: rgba(0,0,0,0.85); backdrop-filter: blur(0.25rem); } .topOffersSlider .topOffersSlider-slide-content .small { color: var(--bs-gray-200); } .topOffersSlider .topOffersSlider-slide-content .btn { color: var(--bs-gray-300); border-radius: var(--bs-border-radius-pill); border: 1px solid var(--bs-gray-600); width: 3rem; height: 3rem; } .topOffersSlider .topOffersSlider-slide:hover .topOffersSlider-slide-content .btn { color: var(--bs-gray-100); border-color: var(--bs-gray-500); } /* popularRoutes ----------------------------- */ .popularRoutes { position: relative; } .popularRoutes::before { content: "\f6d7"; /*sparkles*/ font-family: tabler-icons; font-size: 5rem; color: var(--bs-primary-bg-subtle); position: absolute; top: 0; left: 0; z-index: -1; } .popularRoutes .swiper { position: relative; --swiper-theme-color: var(--bs-secondary); } .popularRoutes .swiper::before { content: ""; width: 94%; margin: 0 3%; align-items: center; text-align: center; height: 3rem; background: linear-gradient(1.35turn, var(--bs-primary), #127474, var(--bs-primary)); border-radius: var(--bs-border-radius-pill); position: absolute; bottom: 9%; z-index: -1; } .popularRoutes .swiper-slide .link { color: var(--bs-dark); background-color: var(--bs-light); background: linear-gradient(to bottom right, var(--bs-gray-100), var(--bs-gray-200)); border-radius: var(--bs-border-radius); border-bottom: 2px solid transparent; display: flex; flex-direction: column; gap: 1rem; transition: border-color 0.15s ease-in-out; } [data-bs-theme=dark] .popularRoutes .swiper-slide .link { color: var(--bs-white); background-color: var(--bs-gray-800); background: linear-gradient(to bottom right, var(--bs-gray-800), var(--bs-gray-700)); border-bottom: 2px solid transparent; } .popularRoutes .swiper-slide .link:hover { border-bottom: 2px solid var(--bs-border-color); } .popularRoutes .swiper-slide .link .popularRoutes-image { width: 100%; height: 200px; background-repeat: no-repeat; background-size: cover; background-position: center; } .popularRoutes .popularRoutes-price { width: 100%; position: relative; border-top: 2px dashed var(--bs-body-bg); display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; } .popularRoutes .popularRoutes-price::before, .popularRoutes .popularRoutes-price::after { content: ""; width: 1rem; height: 1rem; border-radius: 100%; background-color: var(--bs-body-bg); position: absolute; top: -0.5rem; } .popularRoutes .popularRoutes-price::before { left: -0.5rem; } .popularRoutes .popularRoutes-price::after { right: -0.5rem; } /* keyHighlights ----------------------------- */ .keyHighlights { height: 100%; border-radius: var(--bs-border-radius); background: linear-gradient(to bottom left, var(--bs-gray-100), var(--bs-body-bg) 50%); border-bottom: 1px solid var(--bs-secondary-bg-subtle); display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; } .keyHighlights-icon { position: relative; width: 3.5rem; height: 3.5rem; background-color: var(--bs-secondary-bg-subtle); border-radius: var(--bs-border-radius); display: flex; justify-content: center; align-items: center; } [data-bs-theme=dark] .keyHighlights-icon { background-color: var(--bs-secondary); } [data-bs-theme=dark] .keyHighlights { background: linear-gradient(to bottom left, var(--bs-gray-800), var(--bs-body-bg) 50%); border-bottom-color: var(--bs-secondary); } /* imageCaption ------------------------------ */ .imageCaption { background: linear-gradient(55deg, var(--bs-secondary) 0%,#f1ce5e 50%, var(--bs-secondary) 100%); } /* imageCaption 2 ----------------------------- */ .imageCaption2 { background: var(--bs-secondary-gradient); } .imageCaption2-image { width: 100%; height: 100%; min-height: 250px; background-image: var(--image); background-size: cover; border-radius: var(--bs-border-radius); position: relative; } .imageCaption2-image::before { content: ""; width: 100%; height: 100%; background-color: var(--bs-secondary); opacity: 0.1; position: absolute; top: 0; left: 0; } /* imageCols ------------------------------- */ .imageCols-item { position: relative; transition: border-color 0.3s ease; border: 1px solid transparent; border-radius: var(--bs-border-radius); } .imageCols-item:hover { border-color: var(--bs-border-color); } .imageCols-item::before { content: ""; width: 5rem; height: 100%; background-color: var(--bs-primary); opacity: 0.9; transition: width 0.3s ease; border-top-left-radius: var(--bs-border-radius); border-bottom-left-radius: var(--bs-border-radius); position: absolute; top: 0; left: 0; } .imageCols-item:hover.imageCols-item::before { width: 6rem; } .imageCols-content { width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; z-index: 1; display: flex; justify-content: end; align-items: end; } .imageCols-content { width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; z-index: 1; display: flex; justify-content: end; align-items: end; } /* featuredBrands ----------------------------- */ .featuredBrands .link { width: 100%; height: 5rem; background-color: var(--bs-gray-800); color: var(--bs-light); border-radius: var(--bs-border-radius-pill); padding: 0.25rem 1rem; margin: 0.5rem 0; align-items: center; } [data-bs-theme=dark] .featuredBrands .link { color: var(--bs-light); } .featuredBrands .featuredBrands-image { width: 5rem; height: 5rem; flex-shrink: 0; margin-right: -1rem; margin-left: 1rem; background-color: var(--bs-body-bg); border-radius: var(--bs-border-radius-pill); border: 5px solid var(--bs-gray-800); display: flex; justify-content: center; align-items: center; } .featuredBrands .featuredBrands-content { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; } .featuredBrands .featuredBrands-content .btn { background-color: var(--bs-gray-800); color: var(--bs-gray-300); border-radius: var(--bs-border-radius-pill); border: 1px solid var(--bs-gray-600); width: 3rem; height: 3rem; } .featuredBrands .link:hover .btn { color: var(--bs-gray-100); border-color: var(--bs-gray-300); } /* extras ----------------------------- */ .nt-flex-column-center-center .nt-flex-start-center { color: var(--bs-primary); } /* index-2 */ /* topOffersCol ------------------------------ */ .topOffersCol { background-color: var(--bs-body-bg); border-radius: var(--bs-border-radius); } .topOffersCol-item { width: 100%; height: 100%; min-height: 15rem; color: var(--bs-white); border-radius: var(--bs-border-radius); display: flex; flex-direction: column; justify-content: end; gap: 0.5rem; position: relative; z-index: 1; background-image: var(--bg); background-size: cover; background-position: center; background-repeat: no-repeat; transition: background-position 0.3s ease; } .topOffersCol-item:hover { background-position: center 55%; } .topOffersCol-item .topOffersCol-animate { position: relative; z-index: 1; overflow: hidden; } .topOffersCol-item .topOffersCol-moveUp { transform: translateY(1.5rem); transition: transform 0.4s ease; } .topOffersCol-item .topOffersCol-popUp { overflow-y: auto; white-space: nowrap; transform: translateY(5rem); transition: transform 0.4s ease; } .topOffersCol-item .topOffersCol-popUp > div { flex-wrap: nowrap; } .topOffersCol-item:hover .topOffersCol-moveUp, .topOffersCol-item:hover .topOffersCol-popUp { transform: translateY(0); } .topOffersCol-item .topOffersCol-animate::before { content: ""; width: 2rem; height: 2rem; border-radius: var(--bs-border-radius-pill); background: var(--bs-body-bg); background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(1rem); position: absolute; bottom: -1rem; right: -1rem; z-index: -1; transition: transform 0.4s ease; } .topOffersCol-item:focus .topOffersCol-animate::before, .topOffersCol-item:hover .topOffersCol-animate::before { transform-origin: 50% 50%; transform: scale(35); } .topOffersCol-item:focus .topOffersCol-animate, .topOffersCol-item:hover .topOffersCol-animate { color: var(--bs-dark); } .topOffersCol-item::before { content: ""; width: 100%; height: 100%; background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent); border-radius: var(--bs-border-radius); position: absolute; top: 0; right: 0; z-index: -1; } /* busiestRoutes ----------------------------- */ .busiestRoutes .swiper-slide { width: 250px; } .busiestRoutes .link { width: 100%; position: relative; z-index: 1; border-radius: var(--bs-border-radius); border-bottom: 2px solid transparent; background-color: var(--bs-light); background: linear-gradient(to right, var(--bs-gray-100), var(--bs-body-bg)); flex-direction: column; transition: border-color 0.15s ease-in-out; } [data-bs-theme=dark] .busiestRoutes .link { background: linear-gradient(to right, var(--bs-gray-800), var(--bs-body-bg)); } .busiestRoutes .link:hover { border-bottom-color: var(--bs-border-color); } .busiestRoutes .link:hover i.ti-arrow-left { transition: color 0.15s ease-in-out; } .busiestRoutes .link:hover i.ti-arrow-left { color: var(--bs-secondary); } .busiestRoutes .link::before { content: ""; width: 0.375rem; height: 0.375rem; background-color: var(--bs-body-bg); /* background-color: lime; */ border-radius: var(--bs-border-radius-pill); position: absolute; top: 2%; left: 3%; z-index: -1; } /* index-3 */ /* top Suggestions slider ------------------------- */ .topSuggestionsSlider { background-color: var(--bs-body-bg); border-radius: var(--bs-border-radius); } .topSuggestionsSlider-slide { width: 100%; height: 100%; min-height: 18rem; background: var(--bs-gray-800); color: var(--bs-white); border-radius: var(--bs-border-radius); overflow: hidden; display: flex; flex-direction: column; gap: 0.5rem; position: relative; z-index: 1; } /* share */ .topSuggestionsSlider-slide .topSuggestionsSlider-slide-share { padding: 1.5rem; position: absolute; top: 0; right: 0; z-index: 1; transform: translateX(100%); transition: transform 0.3s ease-in-out; } .topSuggestionsSlider-slide:hover .topSuggestionsSlider-slide-share { transform: translateX(0); } .topSuggestionsSlider-slide-rating { padding: 1rem; display: flex; align-items: center; gap: 0.5rem; position: absolute; top: 0; left: 0; z-index: 1; } /* front */ .topSuggestionsSlider-slide .topSuggestionsSlider-slide-front { width: 100%; height: 100%; border-radius: var(--bs-border-radius); background-image: var(--bg); background-size: cover; background-position: center; background-repeat: no-repeat; position: absolute; top: 0; left: 0; display: flex; align-items: end; gap: 0.5rem; transform-origin: top; transition: transform 0.3s ease-in-out; } .topSuggestionsSlider-slide:hover .topSuggestionsSlider-slide-front { transform: translateY(-25%); } /* back */ .topSuggestionsSlider-slide .topSuggestionsSlider-slide-back { flex-grow: 1; border-radius: var(--bs-border-radius); padding: 1rem; display: flex; justify-content: space-between; align-items: end; gap: 0.5rem; } /* title */ .topSuggestionsSlider-slide-title { width: 100%; padding: 1.5rem; position: relative; z-index: 1; } .topSuggestionsSlider-slide-title::before { content: ""; width: 100%; height: 100%; background: linear-gradient(to top, var(--bs-gray-800), transparent); border-radius: var(--bs-border-radius); position: absolute; top: 0; left: 0; z-index: -1; } /* lastTickets ------------------------------ */ .lastTickets { position: relative; z-index: 1; overflow: hidden; } .lastTickets svg { position: absolute; top: 0; left: 0; } .lastTickets .lastTickets-slide.swiper-slide-next .lastTickets-slideWrapper { background-color: var(--bs-secondary); color: var(--bs-light); } .lastTickets .lastTickets-slide.swiper-slide-next .lastTickets-slideWrapper .btn-secondary { background-color: var(--bs-light); color: var(--bs-secondary); } .lastTickets .lastTickets-slideWrapper { width: 100%; background-color: var(--bs-light); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } /* --------------------------------- #search -------------------------------- */ .search-header .search-header-content { background-color: var(--bs-body-bg); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } /* sidebar -------------------------------- */ .search-sidebar { width: 100%; background-color: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); } .search-sidebar .accordion { --bs-accordion-active-bg: transparent !important; } .search-sidebar .accordion-button { box-shadow: 0 0 0 !important; } .search-sidebar .accordion-item { border-left: 0; border-right: 0; } .search-sidebar .accordion-item:last-of-type { border-bottom: 0; } .search-sidebar .noUi-connect { background-color: var(--bs-primary) !important; } .search-sidebar .noUi-handle { box-shadow: 0 0 0 !important; } .search-sidebar .accordion-body .form-check { margin-bottom: 1rem; } .search-sidebar .accordion-body .form-check:last-child { margin-bottom: 0; } /* content -------------------------------- */ /* swiper */ .search-content-swiper { background-color: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); display: flex !important; } .search-content .swiper-slide { height: auto !important; } .search-content .swiper-slide a { height: 100% !important; color: var(--bs-muted); border-left: 1px solid var(--bs-border-color) !important; border-radius: 0; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } .search-content .swiper-slide:last-child a { border-left: 0 !important; } .search-content .swiper-slide a.active { border: 2px solid var(--bs-info) !important; } .search-content-filter { width: 100%; border-bottom: 1px solid var(--bs-border-color); display: flex; align-items: center; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; } .search-content-lists { list-style-type: none; margin: 0; padding: 0; } .search-content-lists .search-content-item { border-radius: var(--bs-border-radius); border-right: 2px solid transparent; margin-bottom: 1rem; transition: border-color 0.15s ease-in-out; } .search-content-lists .search-content-item:last-child { margin-bottom: 0; } .search-content-dividerY { border-right: 2px dashed var(--bs-gray-200); position: relative; } [data-bs-theme=dark] .search-content-dividerY { border-color: var(--bs-gray-700); } .search-content-dividerY::before, .search-content-dividerY::after { content: ""; width: 2rem; height: 2rem; position: absolute; right: -1rem; border-radius: 100%; background-color: var(--bs-light-bg-subtle); } .search-content-dividerY::before { top: -1rem; } .search-content-dividerY::after { bottom: -1rem; } .search-content-dividerX { border-top: 2px dashed var(--bs-gray-200); position: relative; } .search-content-dividerX::before, .search-content-dividerX::after { content: ""; width: 2rem; height: 2rem; position: absolute; top: -1rem; border-radius: 100%; background-color: var(--bs-light-bg-subtle); } .search-content-dividerX::before { left: -1rem; } .search-content-dividerX::after { right: -1rem; } .search-content-lists .search-content-item.active { border-right-color: var(--bs-primary); } .search-content-lists .search-content-item:not(.active) .search-content-total { display: none !important; } .search-content-lists .search-content-item:not(.active) .nav-pills .nav-link { --bs-nav-link-color: var(--bs-dark) !important; --bs-nav-link-hover-color: var(--bs-muted) !important; --bs-nav-pills-link-active-color: var(--bs-dark) !important; --bs-nav-pills-link-active-bg: transparent !important; } .search-content-lists .search-content-item:not(.active) .tab-content { display: none !important; } /* ---------------------------------- #404 ---------------------------------- */ .error404 { min-height: 80vh; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; } .error404 .error404-wrapper { width: 100%; max-width: 712px; margin: 1rem auto; padding: 3rem; text-align: center; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--bs-border-radius); background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(1rem); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; } .error404 .error404-item { width: 100%; height: 100%; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); transition: border-color 0.15s ease-in-out; } .error404 .error404-item:hover { border-color: var(--bs-dark); } .error404 .error404-item .error404-item-bg { width: 100%; height: 100px; border-top-left-radius: var(--bs-border-radius); border-top-right-radius: var(--bs-border-radius); background-repeat: no-repeat; background-size: cover; background-position: center; } .error404 svg { width: 100%; position: absolute; top: 0; left: 0; z-index: -1; } .error404 svg .path-first { fill: var(--bs-gray-100); } .error404 svg .path-second { fill: var(--bs-gray-200); } [data-bs-theme=dark] .error404 svg .path-first { fill: var(--bs-gray-800); } [data-bs-theme=dark] .error404 svg .path-second { fill: var(--bs-gray-700); } /* -------------------------------- #profile -------------------------------- */ .profile { background-color: var(--bs-light); min-height: 70vh; } [data-bs-theme=dark] .profile { background-color: var(--bs-gray-800); } .profile-row { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); padding: 2rem; margin-bottom: 1.5rem; background-color: var(--bs-body-bg); } .profile-row:last-child { margin-bottom: 0; } .profile-title { font-size: 1.25rem; font-weight: bold; display: flex; align-items: center; gap: 0.5rem; } .profile-menu { display: flex; flex-direction: column; gap: 0.5rem; } .profile-menu a { padding: 1rem 1rem; border-color: var(--bs-gray-200); justify-content: start; color: var(--bs-gray-500); } .profile-menu a.active { border-color: var(--bs-border-color); } .profile-menu a.active i { color: var(--bs-primary); } /* --------------------------------- #orders -------------------------------- */ .order { background-color: var(--bs-light); } [data-bs-theme=dark] .order { background-color: var(--bs-gray-800); } .order-row { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background-color: var(--bs-body-bg); margin-bottom: 1.5rem; } .order-row:last-child { margin-bottom: 0; } .order-title { font-size: 1.25rem; font-weight: bold; display: flex; align-items: center; gap: 0.5rem; } /* breadcrumb */ .order-breadcrumb { --bs-breadcrumb-divider: "❯"; display: flex; justify-content: center; align-items: center; gap: 1rem; } .order-breadcrumb .breadcrumb { --bs-breadcrumb-item-active-color: var(--bs-success); --bs-breadcrumb-item-padding-x: 0rem; padding: 1rem; margin-bottom: 0; align-items: center; gap: 1rem; flex-wrap: nowrap; overflow-y: auto; } .order-breadcrumb .breadcrumb-item { line-height: 1rem; font-weight: bold; padding-right: 2rem; white-space: nowrap; position: relative; color: var(--bs-gray-400); display: flex; align-items: center; gap: 0.5rem; } .order-breadcrumb .breadcrumb-item.active { color: var(--bs-breadcrumb-item-active-color) !important; } .order-breadcrumb .breadcrumb-item.done { color: var(--bs-dark); } .order-breadcrumb .breadcrumb-item.done i { color: var(--bs-success); } .order-breadcrumb .breadcrumb-item:first-child { padding-right: 0; } .order-breadcrumb .breadcrumb-item.done::before, .order-breadcrumb .breadcrumb-item.active::before { color: var(--bs-dark); } .order-breadcrumb .breadcrumb-item::before { color: var(--bs-gray-400); float: none; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } /* -------------------------------- #contact -------------------------------- */ .contact-info .contact-bg { position: relative; height: 100%; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ccc' fill-opacity='0.3'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .contact-info .contact-bg::before { content: ""; width: 100%; height: 100%; background: radial-gradient(transparent, var(--bs-body-bg)); position: absolute; top: 0; left: 0; } .contact-info .contact-info-col { position: relative; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); } .contact-info .contact-info-col::before { content: ""; width: 1px; height: 8rem; background-color: red; background: linear-gradient(to bottom, var(--bs-border-color), var(--bs-gray-400), var(--bs-border-color)); position: absolute; bottom: 5%; left: -1px; } .contact-info .contact-icon { width: 3rem; height: 3rem; background-color: white; background: linear-gradient(to top right, var(--bs-gray-100), var(--bs-body-bg)); position: relative; display: flex; justify-content: center; align-items: center; } [data-bs-theme=dark] .contact-info .contact-icon { background: linear-gradient(to top right, var(--bs-gray-800), var(--bs-body-bg)); } .contact-info .contact-icon, .contact-info .contact-icon::before { border-radius: var(--bs-border-radius); } .contact-info .contact-icon::before { content: ""; background-image: linear-gradient(to top right, var(--bs-body-bg) 50%, var(--bs-primary)); position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; z-index: -1; } /* --------------------------------- #detail -------------------------------- */ .detail { background-color: var(--bs-light); min-height: 100vh; } [data-bs-theme=dark] .detail { background-color: var(--bs-dark); } .detail .swiper .swiper-slide img { max-height: var(--max-height-image); } .detail .detail-sidebar { position: sticky; top: 2rem; z-index: 1020; } .detail .detail-icon { width: 3rem; height: 3rem; background-color: white; background: linear-gradient(to top right, var(--bs-gray-100), var(--bs-body-bg)); border-radius: var(--bs-border-radius); position: relative; display: flex; justify-content: center; align-items: center; } [data-bs-theme=dark] .detail .detail-icon { background: linear-gradient(to top right, var(--bs-gray-800), var(--bs-body-bg)); } /* ---------------------------------- #blog --------------------------------- */ .blog { background-color: var(--bs-light); min-height: 100vh; } [data-bs-theme=dark] .blog { background-color: var(--bs-dark); } .blog .blog-card-item { width: 100%; height: 100%; color: var(--bs-dark); background-color: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); flex-direction: column; } [data-bs-theme=dark] .blog .blog-card-item { color: var(--bs-light); } .blog .blog-card-image { width: 100%; height: 300px; position: relative; background-repeat: no-repeat; background-size: cover; border-top-left-radius: var(--bs-border-radius); border-top-right-radius: var(--bs-border-radius); } .blog .blog-card-image.sm { height: 200px; } .blog .blog-card-image .nt-badge { --bs-bg-opacity: 0.9; position: absolute; bottom: 5%; left: 5%; } /* colors .....................*/ .white{ color: var(--bs-white) !important; }