:root, html, body {color-scheme: light !important;}:root {--bs-primary: rgb(67, 30, 117);--bs-secondary: rgb(67, 30, 117);--bs-tertiary: rgb(16, 16, 16);--bs-success: rgb(140, 125, 174);--bs-info: rgb(23, 162, 184);--bs-warning: rgb(255, 193, 7);--bs-danger: rgb(220, 53, 69);--bs-light: rgb(190, 180, 213);--bs-dark: rgb(17, 17, 17);--bs-white: rgb(255, 255, 255);--bs-black: rgb(14, 14, 14);--bs-emphasis-color: rgb(18, 18, 18);--bs-emphasis-color-rgb: 18, 18, 18;--bs-border-color: rgba(217, 217, 217, 1);--bs-primary-rgb: 67, 30, 117;--bs-secondary-rgb: 67, 30, 117;--bs-tertiary-rgb: 16, 16, 16;--bs-success-rgb: 140, 125, 174;--bs-info-rgb: 23, 162, 184;--bs-warning-rgb: 255, 193, 7;;--bs-danger-rgb: 220, 53, 69;--bs-light-rgb: 190, 180, 213;--bs-dark-rgb: 17, 17, 17;--bs-white-rgb: 255, 255, 255;--bs-black-rgb: 14, 14, 14;--bs-primary-bg: rgb(224, 217, 236);--bs-secondary-bg: rgb(238, 242, 255);--bs-tertiary-bg: rgba(222, 226, 230, 0.5);--bs-primary-bg-rgb: 224, 217, 236;--bs-secondary-bg-rgb: 238, 242, 255;--bs-tertiary-bg-rgb: 222, 226, 230;--bs-primary-color: rgba(67, 30, 117, .75);--bs-secondary-color: rgba(67, 30, 117, .75);--bs-tertiary-color: rgba(16, 16, 16, .75);--bs-link-color: rgb(67, 30, 117);--bs-link-color-rgb: 67, 30, 117;--bs-link-hover-color-rgb: 57, 25, 99;--bs-link-hover-color: rgba(57, 25, 99, 1);--bs-body-color: rgb(18, 18, 18);--bs-body-color-rgb: 18, 18, 18;--bs-body-bg: rgb(255, 255, 255);--bs-body-bg-rgb: 255, 255, 255;--bs-primary-text-emphasis: rgba(40, 18, 70, 1);--bs-secondary-text-emphasis: rgba(40, 18, 70, 1);--bs-tertiary-text-emphasis: rgba(10, 10, 10, 1);--bs-success-text-emphasis: rgba(84, 75, 104, 1);--bs-info-text-emphasis: rgba(14, 97, 110, 1);--bs-warning-text-emphasis: rgba(153, 116, 4, 1);--bs-danger-text-emphasis: rgba(132, 32, 41, 1);--bs-primary-bg-subtle: rgb(224, 217, 236);--bs-secondary-bg-subtle: rgb(238, 242, 255);--bs-tertiary-bg-subtle: rgba(222, 226, 230, 0.5);--bs-success-bg-subtle: rgba(249, 249, 251, 1);--bs-info-bg-subtle: rgba(243, 250, 251, 1);--bs-warning-bg-subtle: rgba(255, 252, 243, 1);--bs-danger-bg-subtle: rgba(253, 245, 246, 1);--bs-primary-border-subtle: rgba(179, 174, 189, 1);--bs-secondary-border-subtle: rgba(190, 194, 204, 1);--bs-tertiary-border-subtle: rgba(178, 181, 184, 0.5);--bs-success-border-subtle: rgba(232, 229, 239, 1);--bs-info-border-subtle: rgba(209, 236, 241, 1);--bs-warning-border-subtle: rgba(255, 243, 205, 1);--bs-danger-border-subtle: rgba(248, 215, 218, 1);--bs-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);--bs-box-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, 0.15);--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.15);--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.15);--bs-body-font-family: "Quicksand Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--bs-heading-font-family: "MuseoModerno Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--bs-header-menu-breakpoint: 1200px;--bs-header-logo-height: 50%;--bs-on-primary-text: rgb(255, 255, 255);--bs-on-secondary-text: rgb(255, 255, 255);--bs-on-tertiary-text: rgb(222, 226, 230);--bs-header-additional-menu-bg: var(--bs-primary);--bs-header-main-menu-bg: var(--bs-white);--bs-footer-bg: var(--bs-dark);--bs-footer-cta-bg: var(--bs-primary);--bs-container-max: 1320px;--bs-container-narrow-max: 960px;--bs-shadow-color: rgba(0, 0, 0, 0.15);--bs-shadow-rgb: 0, 0, 0;}html {background-color: var(--bs-primary);}h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {font-family: var(--bs-heading-font-family);}.swiper, .swiper-button-prev, .swiper-button-next {--swiper-navigation-color: rgb(67, 30, 117);}.swiper-pagination, .swiper-pagination-bullet {--swiper-pagination-color: rgb(67, 30, 117);}.btn-close {--bs-btn-close-focus-shadow: 0 0 0 .25rem rgba(0, 0, 0, 0.15);}.btn-primary {--bs-btn-color: rgb(255, 255, 255);--bs-btn-bg: rgb(67, 30, 117);--bs-btn-border-color: rgb(67, 30, 117);--bs-btn-hover-color: rgb(255, 255, 255);--bs-btn-hover-bg: rgba(95, 64, 138, 1);--bs-btn-hover-border-color: rgb(67, 30, 117);--bs-btn-focus-shadow-rgb: 0, 0, 0;--bs-btn-active-color: rgb(255, 255, 255);--bs-btn-active-bg: rgba(105, 75, 145, 1);--bs-btn-active-border-color: rgba(105, 75, 145, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);--bs-btn-disabled-color: rgb(255, 255, 255);--bs-btn-disabled-bg: rgba(123, 98, 158, 1);--bs-btn-disabled-border-color: rgba(123, 98, 158, 1);}.btn-primary-subtle {--bs-btn-color: rgb(255, 255, 255);--bs-btn-bg: rgb(224, 217, 236);--bs-btn-border-color: rgb(67, 30, 117);--bs-btn-hover-color: rgb(255, 255, 255);--bs-btn-hover-bg: rgba(95, 64, 138, 1);--bs-btn-hover-border-color: rgb(67, 30, 117);--bs-btn-focus-shadow-rgb: 0, 0, 0;--bs-btn-active-color: rgb(255, 255, 255);--bs-btn-active-bg: rgba(105, 75, 145, 1);--bs-btn-active-border-color: rgba(105, 75, 145, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);--bs-btn-disabled-color: rgb(255, 255, 255);--bs-btn-disabled-bg: rgba(123, 98, 158, 1);--bs-btn-disabled-border-color: rgba(123, 98, 158, 1);}.btn-outline-primary-subtle {--bs-btn-color: rgb(224, 217, 236);--bs-btn-border-color: rgb(224, 217, 236);--bs-btn-hover-color: rgb(255, 255, 255);--bs-btn-hover-bg: rgba(229, 223, 239, 1);--bs-btn-hover-border-color: rgb(224, 217, 236);--bs-btn-focus-shadow-rgb: 0, 0, 0;--bs-btn-active-color: rgb(255, 255, 255);--bs-btn-active-bg: rgba(105, 75, 145, 1);--bs-btn-active-border-color: rgba(105, 75, 145, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);--bs-btn-disabled-color: rgb(255, 255, 255);--bs-btn-disabled-bg: rgba(123, 98, 158, 1);--bs-btn-disabled-border-color: rgba(123, 98, 158, 1);}.btn-secondary {--bs-btn-color: rgb(255, 255, 255);--bs-btn-bg: rgb(67, 30, 117);--bs-btn-border-color: rgb(67, 30, 117);--bs-btn-hover-color: rgb(255, 255, 255);--bs-btn-hover-bg: rgba(95, 64, 138, 1);--bs-btn-hover-border-color: rgb(67, 30, 117);--bs-btn-focus-shadow-rgb: 0, 0, 0;--bs-btn-active-color: rgb(255, 255, 255);--bs-btn-active-bg: rgba(105, 75, 145, 1);--bs-btn-active-border-color: rgba(105, 75, 145, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);--bs-btn-disabled-color: rgb(255, 255, 255);--bs-btn-disabled-bg: rgba(123, 98, 158, 1);--bs-btn-disabled-border-color: rgba(123, 98, 158, 1);}.btn-tertiary {--bs-btn-color: rgb(222, 226, 230);--bs-btn-bg: rgb(16, 16, 16);--bs-btn-border-color: rgb(16, 16, 16);--bs-btn-hover-color: rgb(222, 226, 230);--bs-btn-hover-bg: rgba(52, 52, 52, 1);--bs-btn-hover-border-color: rgb(16, 16, 16);--bs-btn-focus-shadow-rgb: 0, 0, 0;--bs-btn-active-color: rgb(222, 226, 230);--bs-btn-active-bg: rgba(64, 64, 64, 1);--bs-btn-active-border-color: rgba(64, 64, 64, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);--bs-btn-disabled-color: rgb(222, 226, 230);--bs-btn-disabled-bg: rgba(88, 88, 88, 1);--bs-btn-disabled-border-color: rgba(88, 88, 88, 1);}.btn-secondary-subtle {--bs-btn-color: rgb(255, 255, 255);--bs-btn-bg: rgb(238, 242, 255);--bs-btn-border-color: rgb(67, 30, 117);--bs-btn-hover-color: rgb(255, 255, 255);--bs-btn-hover-bg: rgba(95, 64, 138, 1);--bs-btn-hover-border-color: rgb(67, 30, 117);--bs-btn-focus-shadow-rgb: 0, 0, 0;--bs-btn-active-color: rgb(255, 255, 255);--bs-btn-active-bg: rgba(105, 75, 145, 1);--bs-btn-active-border-color: rgba(105, 75, 145, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);--bs-btn-disabled-color: rgb(255, 255, 255);--bs-btn-disabled-bg: rgba(123, 98, 158, 1);--bs-btn-disabled-border-color: rgba(123, 98, 158, 1);}.btn-tertiary-subtle {--bs-btn-color: rgb(222, 226, 230);--bs-btn-bg: rgba(222, 226, 230, 0.5);--bs-btn-border-color: rgb(16, 16, 16);--bs-btn-hover-color: rgb(222, 226, 230);--bs-btn-hover-bg: rgba(52, 52, 52, 1);--bs-btn-hover-border-color: rgb(16, 16, 16);--bs-btn-focus-shadow-rgb: 0, 0, 0;--bs-btn-active-color: rgb(222, 226, 230);--bs-btn-active-bg: rgba(64, 64, 64, 1);--bs-btn-active-border-color: rgba(64, 64, 64, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);--bs-btn-disabled-color: rgb(222, 226, 230);--bs-btn-disabled-bg: rgba(88, 88, 88, 1);--bs-btn-disabled-border-color: rgba(88, 88, 88, 1);}.btn-outline-secondary-subtle {--bs-btn-color: rgb(238, 242, 255);--bs-btn-border-color: rgb(238, 242, 255);--bs-btn-hover-color: rgb(255, 255, 255);--bs-btn-hover-bg: rgba(241, 244, 255, 1);--bs-btn-hover-border-color: rgb(238, 242, 255);--bs-btn-focus-shadow-rgb: 0, 0, 0;--bs-btn-active-color: rgb(255, 255, 255);--bs-btn-active-bg: rgba(105, 75, 145, 1);--bs-btn-active-border-color: rgba(105, 75, 145, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);--bs-btn-disabled-color: rgb(255, 255, 255);--bs-btn-disabled-bg: rgba(123, 98, 158, 1);--bs-btn-disabled-border-color: rgba(123, 98, 158, 1);}.btn-outline-tertiary-subtle {--bs-btn-color: rgba(222, 226, 230, 0.5);--bs-btn-border-color: rgba(222, 226, 230, 0.5);--bs-btn-hover-color: rgb(222, 226, 230);--bs-btn-hover-bg: rgba(227, 230, 234, 0.5);--bs-btn-hover-border-color: rgba(222, 226, 230, 0.5);--bs-btn-focus-shadow-rgb: 0, 0, 0;--bs-btn-active-color: rgb(222, 226, 230);--bs-btn-active-bg: rgba(64, 64, 64, 1);--bs-btn-active-border-color: rgba(64, 64, 64, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);--bs-btn-disabled-color: rgb(222, 226, 230);--bs-btn-disabled-bg: rgba(88, 88, 88, 1);--bs-btn-disabled-border-color: rgba(88, 88, 88, 1);}.btn-light {--bs-btn-color: rgb(17, 17, 17);--bs-btn-bg: rgb(190, 180, 213);--bs-btn-border-color: rgb(190, 180, 213);--bs-btn-hover-color: rgba(53, 53, 53, 1);--bs-btn-hover-bg: rgba(180, 171, 202, 1);--bs-btn-hover-border-color: rgba(180, 171, 202, 1);--bs-btn-focus-shadow-rgb: 0, 0, 0;--bs-btn-active-color: rgba(53, 53, 53, 1);--bs-btn-active-bg: rgba(171, 162, 192, 1);--bs-btn-active-border-color: rgba(171, 162, 192, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);--bs-btn-disabled-color: rgba(53, 53, 53, 1);--bs-btn-disabled-bg: rgba(152, 144, 170, 1);--bs-btn-disabled-border-color: rgba(152, 144, 170, 1);}.btn-dark {--bs-btn-color: rgb(190, 180, 213);--bs-btn-bg: rgb(17, 17, 17);--bs-btn-border-color: rgb(17, 17, 17);--bs-btn-hover-color: rgba(200, 191, 219, 1);--bs-btn-hover-bg: rgba(53, 53, 53, 1);--bs-btn-hover-border-color: rgba(53, 53, 53, 1);--bs-btn-focus-shadow-rgb: 0, 0, 0;--bs-btn-active-color: rgba(206, 199, 224, 1);--bs-btn-active-bg: rgba(77, 77, 77, 1);--bs-btn-active-border-color: rgba(77, 77, 77, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);--bs-btn-disabled-color: rgba(152, 144, 170, 1);--bs-btn-disabled-bg: rgb(17, 17, 17);--bs-btn-disabled-border-color: rgb(17, 17, 17);}.text-bg-primary {color: rgb(255, 255, 255) !important;}.text-primary-subtle {color: rgb(224, 217, 236);}.text-bg-secondary {color: rgb(255, 255, 255) !important;}.text-secondary-subtle {color: rgb(238, 242, 255);}.bg-tertiary {background-color: rgb(16, 16, 16) !important;}.text-bg-tertiary {background-color: rgb(16, 16, 16) !important;color: rgb(222, 226, 230) !important;}.text-tertiary {color: rgb(16, 16, 16) !important;}.text-tertiary-subtle {color: rgba(222, 226, 230, 0.5);}.dropdown-menu {--bs-dropdown-bg: rgb(255, 255, 255);--bs-dropdown-link-active-color: rgb(67, 30, 117);--bs-dropdown-link-hover-color: rgba(95, 64, 138, 1);--bs-dropdown-link-hover-bg: rgb(224, 217, 236);--bs-dropdown-link-color: rgb(18, 18, 18);}.pagination {--bs-pagination-active-bg: rgb(67, 30, 117);--bs-pagination-disabled-bg: inherit;--bs-pagination-disabled-color: inherit;--bs-pagination-active-border-color: rgb(67, 30, 117);--bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(0, 0, 0, 0.15);}.navbar {--bs-navbar-active-color: var(--bs-primary) ;--bs-navbar-color: inherit;}.navbar .nav-link.static-active { color: var(--bs-navbar-active-color);}.navbar-nav {--bs-nav-link-hover-color: rgba(95, 64, 138, 1); --bs-nav-link-font-weight: 600;}.nav-pills {--bs-nav-pills-link-active-color: rgb(18, 18, 18);--bs-nav-pills-link-active-bg: rgb(238, 242, 255);}.progress {--bs-progress-bar-bg: rgb(67, 30, 117);}.accordion {--bs-accordion-active-color: rgb(67, 30, 117);}.btn-outline-primary {--bs-btn-color: rgb(67, 30, 117);--bs-btn-border-color: rgb(67, 30, 117);--bs-btn-hover-color: rgb(255, 255, 255);--bs-btn-hover-bg: rgb(67, 30, 117);--bs-btn-hover-border-color: rgb(67, 30, 117);--bs-btn-focus-shadow-rgb: 67, 30, 117;--bs-btn-active-color: rgb(255, 255, 255);--bs-btn-active-bg: rgb(67, 30, 117);--bs-btn-active-border-color: rgb(67, 30, 117);--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);--bs-btn-disabled-color: rgb(67, 30, 117);--bs-btn-disabled-border-color: rgb(67, 30, 117);}.btn-outline-secondary {--bs-btn-color: rgb(67, 30, 117);--bs-btn-border-color: rgb(67, 30, 117);--bs-btn-hover-color: rgb(255, 255, 255);--bs-btn-hover-bg: rgb(67, 30, 117);--bs-btn-hover-border-color: rgb(67, 30, 117);--bs-btn-focus-shadow-rgb: 67, 30, 117;--bs-btn-active-color: rgb(255, 255, 255);--bs-btn-active-bg: rgb(67, 30, 117);--bs-btn-active-border-color: rgb(67, 30, 117);--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);--bs-btn-disabled-color: rgb(67, 30, 117);--bs-btn-disabled-border-color: rgb(67, 30, 117);}.btn-outline-tertiary {--bs-btn-color: rgb(16, 16, 16);--bs-btn-border-color: rgb(16, 16, 16);--bs-btn-hover-color: rgb(255, 255, 255);--bs-btn-hover-bg: rgb(16, 16, 16);--bs-btn-hover-border-color: rgb(16, 16, 16);--bs-btn-focus-shadow-rgb: 16, 16, 16;--bs-btn-active-color: rgb(255, 255, 255);--bs-btn-active-bg: rgb(16, 16, 16);--bs-btn-active-border-color: rgb(16, 16, 16);--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);--bs-btn-disabled-color: rgb(16, 16, 16);--bs-btn-disabled-border-color: rgb(16, 16, 16);}.table-primary {--bs-table-bg:rgb(67, 30, 117);--bs-table-color:rgb(255, 255, 255);}.table-secondary {--bs-table-bg:rgb(67, 30, 117);--bs-table-color:rgb(255, 255, 255);}.table-tertiary {--bs-table-bg:rgb(16, 16, 16);--bs-table-color:rgb(222, 226, 230);}.form-check-input:checked {background-color: rgb(67, 30, 117) ;border-color: rgb(67, 30, 117) ;}.form-control:focus, .form-select:focus {border-color: rgba(161, 143, 186, 1);}.list-group {--bs-list-group-active-bg: rgb(67, 30, 117);--bs-list-group-active-border-color: rgb(67, 30, 117);--bs-list-group-active-color: rgb(255, 255, 255);}.text-bg-success { color: rgb(18, 18, 18) !important; background-color: rgb(140, 125, 174) !important;}.text-bg-warning { color: rgb(255, 255, 255) !important; background-color: rgb(255, 193, 7) !important;}.text-bg-danger { color: rgb(18, 18, 18) !important; background-color: rgb(220, 53, 69) !important;}.text-bg-info { color: rgb(255, 255, 255) !important; background-color: rgb(23, 162, 184) !important;}.text-bg-light { color: rgb(18, 18, 18) !important; background-color: rgb(190, 180, 213) !important;}.text-bg-dark { color: rgb(255, 255, 255) !important; background-color: rgb(17, 17, 17) !important;}.text-bg-primary-subtle { background-color: rgb(224, 217, 236) !important; color: rgb(18, 18, 18) !important;}.text-bg-secondary-subtle { background-color: rgb(238, 242, 255) !important; color: rgb(18, 18, 18) }.text-bg-tertiary-subtle { background-color: rgba(222, 226, 230, 0.5) !important; color: rgb(18, 18, 18) }.text-bg-body { background-color: rgb(255, 255, 255) !important; color: rgb(18, 18, 18) !important;}.text-bg-white { background-color: rgb(255, 255, 255) !important; color: rgb(14, 14, 14) !important;}.text-body-bg { color: var(--bs-body-bg);}.btn-body { --bs-btn-color: var(--bs-body-color); --bs-btn-bg: var(--bs-body-bg);}.btn-outline-body { --bs-btn-color: var(--bs-body-bg); --bs-btn-border-color: var(--bs-body-bg);}.offcanvas, .offcanvas-sm, .offcanvas-md, .offcanvas-lg, .offcanvas-xl, .offcanvas-xxl { --bs-offcanvas-bg: var(--bs-white) !important;}.card {--bs-card-box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.15);--bs-card-title-color: rgb(18, 18, 18);--bs-card-color: rgb(18, 18, 18);--bs-card-border-color: rgba(217, 217, 217, 1);} .card {--bs-card-border-radius: 1rem !important;--bs-card-inner-border-radius: 1rem !important;}:root { --bs-border-radius: 1rem !important; --bs-border-radius-sm: 1rem !important; --bs-border-radius-lg: 1rem !important; --bs-border-radius-xl: 1rem !important; --bs-border-radius-xxl: 1rem !important; --bs-border-radius-2xl: 1rem !important;} .btn, .btn-sm, .btn-lg { --bs-btn-border-radius: 1rem !important; } .dropdown-menu { --bs-dropdown-border-radius: 1rem !important; --bs-dropdown-inner-border-radius: 1rem !important; } .dropdown { --bs-dropdown-item-border-radius: 1rem !important; } .badge { --bs-badge-border-radius: 1rem !important; } .img-rounded, .form-check-input[type=checkbox] { border-radius: 1rem !important; } .card_kite { --kite-clip-radius: 1rem !important; --bs-card-border-radius: 1rem !important; } .form-control { border-radius: 1rem; } .border-body { border-color: var(--bs-body-bg) !important; }/* ========================================================= HABA Juice Bar – Egyedi CSS (javított, teljes) Fokozatos címsor-skála mobilon és tableten is. ========================================================= */:root { /* Színek */ --haba-primary: #431e75; --haba-lilac: #e0d9ec; --haba-dark: #111; --haba-muted: #868686; --haba-white: #fff; /* Tipográfia */ --haba-font-display: "MuseoModerno", sans-serif; --haba-font-body: "Quicksand", sans-serif; /* Méretek / rádiuszok */ --haba-radius-banner: 3rem; --haba-radius-card: 1.2rem; /* Navigáció */ --haba-nav-padding-x: 1.1rem; --haba-header-h: 110px; --haba-header-h-sm: 70px; /* Ferde szekciók */ --haba-skew-bg: var(--haba-dark); --haba-skew-overlap: 50px; /* Címsorok – xl alapméret */ --haba-title-xxl: 9rem; --haba-title-xl: 5rem; /* Animáció */ --haba-scroll-speed: 12s; /* .minustop érték változóból (könnyebb breakpointonként állítani) */ --haba-minustop: -6.4rem; --haba-outline-stroke: 2px;}/* ---------- Globális tipográfia ---------- */body { font-size: 1.2rem; }h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,.nav-link { text-transform: uppercase; font-weight: 700;}.btn-lg { --bs-btn-padding-y: 0.75rem; --bs-btn-padding-x: 1.25rem; --bs-btn-font-size: 1rem;}/* -------- formázások ----------- */.lilac h1, .lilac h2, h1.lilac, h2.lilac { color: var(--haba-lilac);}.purple h1, .purple h2, h1.purple, h2.purple { color: var(--haba-primary)}.outline-text h1, .outline-text h2, h1.outline-text, h2.outline-text { color: rgba(0,0,0,0); -webkit-text-stroke: var(--haba-outline-stroke) var(--haba-muted);}.title-xxl h1, .title-xxl h2, h1.xxl-title, h2.xxl-title { font-size: 9rem;}.title-xl h1, .title-xl h2, h1.xl-title, h2.xl-title { font-size: 7rem;}.title-lg h1, .title-lg h2 { font-size: 5rem;}.mt-minus150 { margin-top: -150px !important;}.mt-minus100 { margin-top: -95px !important;}.mt-minus50 { margin-top: -60px !important;}/* ---------- Banner ---------- */.section_banner { border-radius: var(--haba-radius-banner); }.header_banner.hero_slide.swiper-slide { border-radius: var(--haba-radius-banner);}.header_banner.hero_slide.swiper-slide .header_banner_background { border-radius: var(--haba-radius-banner); overflow: hidden;}/* ====== Banner címsorral ======= */.titlebanner { .hero_slide { justify-content: flex-end !important; } .header_banner > div:nth-child(2) { padding: 0 !important; margin-bottom: -70px; } .header_banner_background { border-radius: var(--haba-radius-banner); } .header_banner_background img { border-radius: var(--haba-radius-banner); } .col-lg-9, .col-xl-7, .col-xxl-6 { width: 100%; } }.swiper.titlebanner { overflow: visible;}/* ---------- Navigáció ---------- */.nav-link { font-size: 1rem; font-family: var(--haba-font-display) !important;}footer .nav-link { font-size: 1rem; font-family: var(--haba-font-body) !important;}.navbar .btn-light { background-color: transparent; border: none;}@media (min-width: 1200px) { .navbar-expand-xl .navbar-nav .nav-link { padding-inline: var(--haba-nav-padding-x); }}#menu_container_level_1 .item-level-1:first-child .nav-link { padding-inline-start: var(--haba-nav-padding-x) !important;}#menu_container_level_1 .item-level-1:last-child .nav-link { padding-inline-end: var(--haba-nav-padding-x) !important;}/* ---------- Header scroll-ra ---------- */#header .scroll_sensitive-all:not(.scrolled) { height: var(--haba-header-h) !important; }#header .scroll_sensitive-all.scrolled { height: var(--haba-header-h-sm) !important; }/* ---------- FERDE SZEKCIÓK ---------- *//*#fogaleria,#foods,#last,*/ .ferde1 { margin-top: calc(-1 * var(--haba-skew-overlap)); position: relative; color: white;}/*.ferde1 strong { color: white;}*/.ferde1.text-bg-secondary,.ferde1.text-bg-secondary { background: transparent !important; }.ferde1::before { content: ""; position: absolute; inset: 0; background: var(--haba-skew-bg); clip-path: var(--haba-skew-clip);}.ferde1 { --haba-skew-clip: polygon(0 10%, 100% 0, 100% 100%, 0 90%); }.alsoegyenes { --haba-skew-clip: polygon(0 18%, 100% 0, 100% 100%, 0 100%); }.alsoegyenes::before { margin-top: 100px; }#last { --haba-skew-bg: var(--haba-white); --haba-skew-clip: polygon(0 0, 100% 40%, 100% 100%, 0 100%);}#last::after { margin-top: 100px; }/* ---------- Szlogen végtelen futószalag ---------- */#szlogen .px-5 { padding-inline: 0 !important; }.scroll-wrapper { inline-size: 100%; overflow: hidden; }.scroll-track { display: flex; inline-size: max-content; animation: haba-scroll var(--haba-scroll-speed) linear infinite;}.scroll-track img { block-size: 200px; margin-inline: 40px; }.item { padding-inline: 40px; font-size: 20px; white-space: nowrap; }@keyframes haba-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); }}#fogaleria .swiper-slide { z-index: 10; }/* ---------- Parallax kép scroll animáció ---------- */.scroll-section { block-size: 400px; display: flex; align-items: center; justify-content: center;}/*.scroll-img { inline-size: 450px; filter: grayscale(100%); }*/.grayscale img { filter: grayscale(100%);}@supports (animation-timeline: view()) { .scroll-img { animation: haba-parallax linear; animation-timeline: view(); animation-range: entry 0% cover 100%; }}@keyframes haba-parallax { from { transform: translateY(100px) rotate(-10deg); } to { transform: translateY(-10px) rotate(10deg); }}/* ---------- Foods & Beverages – címsor vonallal ---------- */.section_columns.text-bg-tertiary h3 { margin-top: 0; display: flex; align-items: flex-end; gap: 10px; font-size: 2rem;}.section-builder-component:nth-child(even) .section_columns.text-bg-tertiary h3::after,.section-builder-component:nth-child(odd) .section_columns.text-bg-tertiary h3::before { content: ""; flex: 1; height: 2px; background: #fff; margin-bottom: 0.5rem;}/* ---------- Foods & Beverages – service box kártyák ---------- */.text-bg-tertiary .service_box .card { --bs-card-box-shadow: none; --bs-card-title-color: #fff; --bs-card-color: #fff; --bs-card-border-color: rgba(217, 217, 217, 0); --bs-card-spacer-y: 2rem; --bs-card-title-spacer-y: 1.5rem; background-color: var(--bs-tertiary); box-shadow: none; color: #fff;}.text-bg-tertiary .service_box .card-title,.text-bg-tertiary .service_box .card-body { color: #fff; }.text-bg-tertiary .service_box h3 { padding-bottom: 1rem; }/* ---------- Étlap / Itallap ---------- */.menuanchors { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}.menuanchors li { list-style-type: none; }#menulinks .menuanchors li a { padding: 5px 14px; text-transform: uppercase; font-size: 1.1rem; border: 1px solid var(--haba-dark); margin-inline: 2px; border-radius: 50px; text-decoration: none !important; font-weight: 400; color: var(--haba-dark); transition: color .3s ease, background-color .3s ease, border-color .3s ease;}#menulinks .menuanchors li a:hover { color: var(--haba-white); border-color: var(--haba-primary); background-color: var(--haba-primary);}.block_price-list_name { font-size: large; color: var(--haba-primary);}.block_price-list-category:target { scroll-margin-top: 100px; }/* ---------- Árlista ---------- */.block_price-list-category th { font-family: var(--haba-font-display) !important; font-size: 1.25rem;}.block_price-list-category span { font-weight: 700; }/*.block_price-list-category img { width: 150px; transform: rotate(-3deg); }*//* ---------- Webshop ---------- */#webshop [title="article_number"],#cart-recommendations [title="article_number"] { display: none; }#webshop .card,#cart-recommendations .card { box-shadow: none; border-radius: var(--haba-radius-card) !important;}#webshop .card-body,#cart-recommendations .card-body { gap: 0 !important; }#webshop .card-body.gap-3,#cart-recommendations .card-body.gap-3 { padding: 15px 15px 5px; }#webshop .card-title,#cart-recommendations .card-title { font-size: 22px; }#webshop .card-footer,#cart-recommendations .card-footer { padding: 1rem 15px 15px; }#webshop h1.mb-5 { margin-bottom: 2rem !important; }/* ---------- Főoldali menü dobozok – overlay le ---------- */.card_kite.card_kite_variant-roll_up_gradient .card_kite_overlay { display: none; }/* ---------- Instagram címsor ---------- */#i-classfa-brands-fa-instagrami-habajuicebar h2 { -webkit-text-stroke: 1px var(--haba-primary); font-size: var(--haba-title-xl); color: var(--haba-lilac);}/* ---------- Űrlapok ---------- */.btn-lg { padding: 0.75rem 1.75rem; font-size: 1.125rem; border-radius: 2rem;}.form-label, .form-control { font-size: 1.125rem;}.form-control, .form-select { padding: 0.75rem 1rem; border-radius: 2rem;}.darkform { padding: 35px !important; margin-top: -60px; border: 1px solid white; border-radius: 20px;}.darkform a { color: var(--bs-light);}.darkform .form-control, .darkform .form-select { \tbackground-color: transparent; border: 1px solid white;}.darkform .form-control:focus, .darkform .form-select:focus { \tbackground-color: transparent; border: 1px solid var(--bs-light); color: white;}.darkform input::placeholder,.darkform textarea::placeholder { color: white; opacity: 1;}.darkform .btn-primary { background: var(--bs-light); color: var(--bs-primary);}.darkform .btn-primary:hover { background: var(--bs-primary); color: white; border-color: var(--bs-light);}.purpleform { background: var(--bs-primary); padding: 35px !important; border-radius: 20px; color: white;}.purpleform .btn-primary { background-color: var(--haba-lilac); color: var(--bs-primary);}.purpleform a { color: white !important;}/* ==== Eventy Gallery ===== */.eventsgallery { padding-top:160px !important; margin-top: -70px;}.eventsgallery { .h6 { font-size: 2rem; opacity: 0.8;} .card_kite_text, span.fw-bold { display: none; }}.fa-circle-play { color: #1ed760;}i.content-icon[aria-label] { position: relative; cursor: help; margin-right:10px;}/* ==== Menülap allergén ikonok ===== */i.content-icon[aria-label]:hover::after,i.content-icon[aria-label]:focus-visible::after { content: attr(aria-label); position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 6px; padding: 4px 8px; border-radius: 4px; background: #111; color: #fff; font-size: 12px; line-height: 1.3; white-space: nowrap; z-index: 1000; text-transform: none; font-variant: normal; letter-spacing: normal; font-family: system-ui, sans-serif;font-style: normal;}/* ==== To Top gomb ===== */.btn-lg.btn-floating { padding: 1rem;}/* ==== Ászf / Privacy Policy táblázat fejsor ===== */.thead-dark { background-color: var(--bs-primary-bg-subtle);}#footer-menu .social { font-size: xx-large;}.mt-m1 { margin-top: -1px;}/* ========================================================= Akadálymentesség: mozgás csökkentése ========================================================= */@media (prefers-reduced-motion: reduce) { .scroll-track, .scroll-img { animation: none !important; } .scroll-img { transform: none; filter: none; } *, *::before, *::after { transition-duration: .01ms !important; }}/* ========================================================= RESPONSIVE – NAGY========================================================= */@media (min-width: 1200px) { .section_gallery_detail h2 { font-size: 4rem; }}/* ========================================================= RESPONSIVE – LG (nagy tablet / kis desktop, < 1200px) ========================================================= */@media (max-width: 1199.98px) { :root { --haba-title-xxl: 7rem; --haba-title-xl: 4.5rem; --haba-minustop: -6.4rem; } #about-haba h2 { font-size: 7rem; }}/* ========================================================= RESPONSIVE – MD (tablet álló, < 992px) ========================================================= */@media (max-width: 991.98px) { :root { --haba-title-xxl: 5.5rem; --haba-title-xl: 4rem; --haba-minustop: -4rem; --haba-outline-stroke: 1.75px; } #about-haba h2 { font-size: 5.5rem; line-height: 1.05; } #about-haba article { margin-top: -72px; } /* Tableten már kicsit enyhébb ferdeség */ #fogaleria { --haba-skew-clip: polygon(0 35px, 100% 0, 100% 100%, 0 99%); } #foods::before { margin-top: 60px; }}/* ========================================================= RESPONSIVE – SM (fekvő mobil / kis tablet, < 768px) Az eredeti max-width:768px beállításait itt egyesítem ========================================================= */@media (max-width: 767.98px) { :root { --haba-title-xxl: 4.5rem; --haba-title-xl: 3rem; --haba-minustop: -3rem; --haba-outline-stroke: 1.5px; } /* --- alap formázások ---- */ .mt-minus150, .mt-minus100, .mt-minus50 { margin-top: 20px !important; } .title-xxl h1, .title-xxl h2, h1.xxl-title, h2.xxl-title { font-size: 3.5rem; line-height: 1; } .title-xl h1, .title-xl h2, h1.xl-title, h2.xl-title { font-size: 3rem; line-height: 1; } .title-lg h1, .title-lg h2 { font-size: 2rem; line-height: 1; } .ferde1 { --haba-skew-clip: polygon(0 2%, 100% 0, 100% 100%, 0 98%); } .ferde1.alacsony { --haba-skew-clip: polygon(0 10%, 100% 0, 100% 100%, 0 90%); } /******/ @keyframes haba-parallax { from { transform: translateY(0px) rotate(-5deg); } to { transform: translateY(-10px) rotate(10deg); } } .section_banner { border-radius: 2rem; height: 350px; } .ps-5 { padding-left: 10px !important;} /*#fogaleria { --haba-skew-clip: polygon(0 50px, 100% 0, 100% 100%, 0 98.5%); }*/ .scroll-track img { max-width: 1500px; height: auto; } .scroll-section { height: 285px; } /*#about-haba h2 { font-size: 4.5rem; line-height: 1; } #about-haba article { margin-top: -66px; }*/ #foods { margin-bottom: -45px; } #i-classfa-brands-fa-instagrami-habajuicebar h2 { font-size: 2.6rem; } .block_price-list-category img { width: 50px; border-radius: 5px !important; } .block_price-list-category .table > :not(caption) > * > * { padding: 5px; } #menulinks .menuanchors li a { font-size: 0.9rem; } .menuanchors { padding-inline-start: 0; }}/* ========================================================= RESPONSIVE – XS (telefon, < 576px) ========================================================= */@media (max-width: 575.98px) { :root { --haba-title-xxl: 3.4rem; /* az eredeti mobil érték */ --haba-title-xl: 2.6rem; --haba-minustop: -2rem; /* eredeti mobil */ --haba-outline-stroke: 1.25px; } #about-haba h2 { font-size: 3.4rem; }}