.elementor-kit-6{--e-global-color-primary:#2563EB;--e-global-color-secondary:#0F172A;--e-global-color-text:#334155;--e-global-color-accent:#C8A24A;--e-global-color-3b79f42:#F8FBFF;--e-global-color-cb6cb51:#FFFFFF;--e-global-color-8324ad9:#E2E8F0;--e-global-color-35d2a6c:#64748B;--e-global-color-8cc9f84:#16A34A;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-weight:600;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ========================================================= XPERIENCE FINDER MALTA GLOBAL HOMEPAGE FOUNDATION ========================================================= */ /* ========================================================= DESIGN TOKENS ========================================================= */ :root { --xfm-primary: #2563EB; --xfm-heading: #0F172A; --xfm-text: #334155; --xfm-muted: #64748B; --xfm-accent: #C8A24A; --xfm-accent-dark: #B08A2E; --xfm-success: #16A34A; --xfm-bg: #F8FBFF; --xfm-surface: #FFFFFF; --xfm-border: #E2E8F0; --xfm-shell: 1380px; --xfm-radius-sm: 12px; --xfm-radius-md: 16px; --xfm-radius-lg: 18px; --xfm-radius-xl: 22px; --xfm-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.04); --xfm-shadow-md: 0 6px 18px rgba(15, 23, 42, 0.06); --xfm-shadow-lg: 0 10px 24px rgba(15, 23, 42, 0.08); } /* ========================================================= GLOBAL BOX SIZING ========================================================= */ .xfm-page, .xfm-page *, .xfm-page *::before, .xfm-page *::after { box-sizing: border-box; } /* ========================================================= PAGE FOUNDATION ========================================================= */ .xfm-page { width: 100%; margin: 0; padding: 0; color: var(--xfm-text); background: #FFFFFF; font-family: "Poppins", sans-serif; overflow-x: hidden; } /* ========================================================= SHARED PAGE WIDTH ========================================================= */ .xfm-shell { width: 100%; max-width: var(--xfm-shell); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } /* ========================================================= SHARED SECTION ========================================================= */ .xfm-section { width: 100%; } /* ========================================================= SHARED SECTION HEADING ========================================================= */ .xfm-section-heading { margin: 0 0 18px; } .xfm-kicker { margin: 0 0 8px; color: var(--xfm-accent-dark); font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; } .xfm-section-title { margin: 0; color: var(--xfm-heading); font-size: 22px; line-height: 1.08; font-weight: 650; letter-spacing: -0.035em; } /* ========================================================= SHARED TEXT ========================================================= */ .xfm-page h1, .xfm-page h2, .xfm-page h3, .xfm-page h4, .xfm-page p { margin-top: 0; } .xfm-page a { color: inherit; } .xfm-page img { max-width: 100%; } /* ========================================================= SHARED CARD STYLE ========================================================= */ .xfm-card { background: var(--xfm-surface); border: 1px solid rgba(15, 23, 42, 0.08); border-radius: var(--xfm-radius-lg); box-shadow: var(--xfm-shadow-md); } /* ========================================================= SHARED LINK / INTERACTION ========================================================= */ .xfm-link { color: var(--xfm-primary); font-weight: 700; text-decoration: none; } .xfm-link:hover { text-decoration: underline; } /* ========================================================= ACCESSIBILITY ========================================================= */ .xfm-page a:focus-visible, .xfm-page button:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.20); outline-offset: 2px; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .xfm-shell { padding-left: 16px; padding-right: 16px; } .xfm-section-heading { margin-bottom: 16px; } .xfm-section-title { font-size: 20px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .xfm-page *, .xfm-page *::before, .xfm-page *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================= XPERIENCEFINDER MALTA — GLOBAL HEADER WORDPRESS MENU + POLYLANG FINAL VERSION ========================================================= */ /* ========================================================= OUTER HEADER ========================================================= */ #xfm-header { width: 100% !important; max-width: none !important; min-height: 64px !important; height: 64px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient( 180deg, rgba(255,255,255,0.99) 0%, rgba(248,251,255,0.98) 100% ) !important; border: 0 !important; border-bottom: 1px solid rgba(15,23,42,0.07) !important; box-shadow: 0 4px 14px rgba(15,23,42,0.035) !important; box-sizing: border-box !important; position: relative !important; z-index: 9999 !important; } /* ========================================================= STICKY HEADER ========================================================= */ header.elementor-location-header { position: sticky !important; top: 0 !important; width: 100% !important; z-index: 9999 !important; } /* ========================================================= INNER HEADER LOGO | MENU | LANGUAGE ========================================================= */ #xfm-header-inner { width: 100% !important; max-width: 1380px !important; min-height: 64px !important; height: 64px !important; margin: 0 auto !important; padding: 0 24px !important; display: grid !important; grid-template-columns: minmax(220px, 1fr) auto minmax(90px, 1fr) !important; align-items: center !important; column-gap: 32px !important; box-sizing: border-box !important; position: relative !important; } /* ========================================================= LOGO ========================================================= */ #xfm-header-logo { width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; justify-self: start !important; } #xfm-header-logo-image { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } #xfm-header-logo-image .elementor-widget-container { margin: 0 !important; padding: 0 !important; } #xfm-header-logo-image img { display: block !important; width: 230px !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; } /* ========================================================= MAIN WORDPRESS MENU — DESKTOP ========================================================= */ .xfm-header-menu { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; justify-self: center !important; position: relative !important; } .xfm-header-menu > .elementor-widget-container { margin: 0 !important; padding: 0 !important; } /* Desktop menu list */ .xfm-header-menu .elementor-nav-menu--main, .xfm-header-menu .elementor-nav-menu--main > ul, .xfm-header-menu .elementor-nav-menu { margin: 0 !important; padding: 0 !important; } .xfm-header-menu .elementor-nav-menu--main .elementor-nav-menu { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 4px !important; } /* Main links */ .xfm-header-menu .elementor-nav-menu--main a { min-height: 40px !important; padding: 0 16px !important; display: flex !important; align-items: center !important; color: #0F172A !important; background: transparent !important; font-family: Poppins, sans-serif !important; font-size: 14px !important; line-height: 1.2 !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap !important; border: 0 !important; transition: color 160ms ease, background 160ms ease !important; } .xfm-header-menu .elementor-nav-menu--main a:hover, .xfm-header-menu .elementor-nav-menu--main a:focus { color: #315D82 !important; background: rgba(49,93,130,0.045) !important; } /* Remove Elementor pointer */ .xfm-header-menu .elementor-item::before, .xfm-header-menu .elementor-item::after { display: none !important; } /* ========================================================= DESKTOP SUBMENUS ========================================================= */ .xfm-header-menu .elementor-nav-menu--main .sub-menu { min-width: 190px !important; margin: 6px 0 0 !important; padding: 7px !important; background: rgba(255,255,255,0.99) !important; border: 1px solid rgba(15,23,42,0.08) !important; border-radius: 13px !important; box-shadow: 0 14px 32px rgba(15,23,42,0.12), 0 3px 8px rgba(15,23,42,0.04) !important; box-sizing: border-box !important; z-index: 10020 !important; } .xfm-header-menu .elementor-nav-menu--main .sub-menu a { width: 100% !important; min-height: 38px !important; padding: 0 11px !important; color: #17324D !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 600 !important; } .xfm-header-menu .elementor-nav-menu--main .sub-menu a:hover { background: #F3F7FA !important; } /* ========================================================= LANGUAGE — POLYLANG WORDPRESS MENU ========================================================= */ #xfm-header-language { width: auto !important; min-width: 64px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; justify-self: end !important; position: relative !important; } #xfm-header-language .elementor-widget-container { margin: 0 !important; padding: 0 !important; } #xfm-header-language nav { margin: 0 !important; padding: 0 !important; position: relative !important; } #xfm-header-language ul { list-style: none !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= CURRENT LANGUAGE BUTTON ========================================================= */ #xfm-header-language nav > ul > li { position: relative !important; margin: 0 !important; padding: 0 !important; } #xfm-header-language nav > ul > li > a { min-width: 64px !important; height: 40px !important; margin: 0 !important; padding: 0 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; color: #0F172A !important; background: #FFFFFF !important; border: 1px solid #DCE4EC !important; border-radius: 10px !important; box-shadow: none !important; font-family: Poppins, sans-serif !important; font-size: 13px !important; line-height: 1 !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap !important; box-sizing: border-box !important; } #xfm-header-language nav > ul > li > a:hover, #xfm-header-language nav > ul > li > a:focus { color: #17324D !important; background: #F4F8FB !important; border-color: rgba(49,93,130,0.20) !important; } /* ========================================================= LANGUAGE DROPDOWN ========================================================= */ #xfm-header-language .sub-menu { min-width: 104px !important; margin: 8px 0 0 !important; padding: 7px !important; position: absolute !important; top: 100% !important; right: 0 !important; left: auto !important; background: rgba(255,255,255,0.99) !important; border: 1px solid rgba(15,23,42,0.08) !important; border-radius: 13px !important; box-shadow: 0 14px 32px rgba(15,23,42,0.12), 0 3px 8px rgba(15,23,42,0.04) !important; box-sizing: border-box !important; z-index: 10050 !important; } #xfm-header-language .sub-menu li { width: 100% !important; margin: 0 !important; padding: 0 !important; } #xfm-header-language .sub-menu a { width: 100% !important; min-height: 36px !important; margin: 0 !important; padding: 0 10px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; color: #17324D !important; background: transparent !important; border: 0 !important; border-radius: 8px !important; font-family: Poppins, sans-serif !important; font-size: 12px !important; line-height: 1 !important; font-weight: 600 !important; text-decoration: none !important; } #xfm-header-language .sub-menu a:hover, #xfm-header-language .sub-menu a:focus { background: #F3F7FA !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { #xfm-header-inner { padding: 0 20px !important; grid-template-columns: minmax(190px, 1fr) auto minmax(70px, 1fr) !important; column-gap: 20px !important; } #xfm-header-logo-image img { width: 210px !important; } .xfm-header-menu .elementor-nav-menu--main a { padding: 0 11px !important; font-size: 13px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { /* ======================================================= HEADER ======================================================= */ #xfm-header { min-height: 64px !important; height: 64px !important; } #xfm-header-inner { min-height: 64px !important; height: 64px !important; padding: 0 16px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 40px auto !important; align-items: center !important; column-gap: 8px !important; position: relative !important; } /* ======================================================= LOGO ======================================================= */ #xfm-header-logo { min-width: 0 !important; justify-self: start !important; } #xfm-header-logo-image img { width: 205px !important; max-width: 100% !important; height: auto !important; } /* ======================================================= MAIN MENU WIDGET ======================================================= */ .xfm-header-menu { width: 40px !important; min-width: 40px !important; margin: 0 !important; padding: 0 !important; justify-self: end !important; position: static !important; } .xfm-header-menu > .elementor-widget-container { position: static !important; } /* Hide desktop menu */ .xfm-header-menu .elementor-nav-menu--main { display: none !important; } /* ======================================================= HAMBURGER ======================================================= */ .xfm-header-menu .elementor-menu-toggle { width: 40px !important; height: 40px !important; min-width: 40px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #17324D !important; background: #FFFFFF !important; border: 1px solid #DCE4EC !important; border-radius: 11px !important; box-shadow: 0 2px 6px rgba(15,23,42,0.035) !important; box-sizing: border-box !important; } .xfm-header-menu .elementor-menu-toggle svg { width: 18px !important; height: 18px !important; fill: currentColor !important; stroke: currentColor !important; } .xfm-header-menu .elementor-menu-toggle.elementor-active { color: #17324D !important; background: #F4F8FB !important; border-color: rgba(49,93,130,0.22) !important; } /* ======================================================= MOBILE DROPDOWN PANEL ======================================================= */ .xfm-header-menu .elementor-nav-menu--dropdown { position: absolute !important; top: calc(100% + 8px) !important; left: 16px !important; right: 16px !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 8px !important; background: rgba(255,255,255,0.99) !important; border: 1px solid rgba(15,23,42,0.08) !important; border-radius: 16px !important; box-shadow: 0 16px 36px rgba(15,23,42,0.12), 0 3px 8px rgba(15,23,42,0.035) !important; box-sizing: border-box !important; z-index: 10020 !important; overflow: visible !important; } /* ONLY the main mobile menu list */ .xfm-header-menu .elementor-nav-menu--dropdown > ul { width: 100% !important; margin: 0 !important; padding: 0 !important; display: block !important; } /* ======================================================= MOBILE MENU ITEMS ======================================================= */ .xfm-header-menu .elementor-nav-menu--dropdown > ul > li { width: 100% !important; margin: 0 !important; padding: 0 !important; display: block !important; } .xfm-header-menu .elementor-nav-menu--dropdown > ul > li > a { width: 100% !important; min-height: 46px !important; margin: 0 !important; padding: 0 14px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; color: #0F172A !important; background: transparent !important; border: 0 !important; border-radius: 10px !important; box-sizing: border-box !important; font-family: Poppins, sans-serif !important; font-size: 14px !important; line-height: 1.2 !important; font-weight: 600 !important; text-decoration: none !important; white-space: normal !important; transition: background 150ms ease, color 150ms ease !important; } .xfm-header-menu .elementor-nav-menu--dropdown > ul > li > a:hover, .xfm-header-menu .elementor-nav-menu--dropdown > ul > li > a:focus { color: #17324D !important; background: #F4F7FA !important; } .xfm-header-menu .elementor-nav-menu--dropdown > ul > li:not(:last-child) > a { border-bottom: 1px solid rgba(15,23,42,0.055) !important; } /* ======================================================= MOBILE SUBMENU CLOSED BY DEFAULT ======================================================= */ .xfm-header-menu .elementor-nav-menu--dropdown .sub-menu { position: static !important; width: 100% !important; min-width: 0 !important; margin: 2px 0 5px !important; padding: 4px 0 4px 12px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* Submenu links */ .xfm-header-menu .elementor-nav-menu--dropdown .sub-menu a { min-height: 40px !important; padding: 0 12px !important; display: flex !important; align-items: center !important; color: #526270 !important; background: transparent !important; font-family: Poppins, sans-serif !important; font-size: 13px !important; line-height: 1.2 !important; font-weight: 500 !important; border: 0 !important; border-radius: 8px !important; } /* Submenu hover */ .xfm-header-menu .elementor-nav-menu--dropdown .sub-menu a:hover, .xfm-header-menu .elementor-nav-menu--dropdown .sub-menu a:focus { color: #17324D !important; background: #F4F7FA !important; } /* ======================================================= LANGUAGE ======================================================= */ #xfm-header-language { width: auto !important; min-width: 58px !important; margin: 0 !important; padding: 0 !important; justify-self: end !important; position: relative !important; z-index: 10040 !important; } #xfm-header-language nav > ul > li > a { min-width: 58px !important; height: 40px !important; padding: 0 9px !important; font-size: 12px !important; border-radius: 10px !important; } #xfm-header-language .sub-menu { min-width: 92px !important; right: 0 !important; left: auto !important; z-index: 10050 !important; } } /* ========================================================= XPERIENCE FINDER MALTA HOME — HERO ========================================================= */ /* GLOBAL — shared hero structure */ .xfm-home-hero { width: 100%; min-height: 320px; display: flex; align-items: stretch; background-color: #FFFFFF; background-position: center, center center; background-size: cover, cover; background-repeat: no-repeat, no-repeat; box-sizing: border-box; } /* --------------------------------------------------------- INNER --------------------------------------------------------- */ .xfm-home-hero-inner { width: 100%; display: flex; align-items: center; padding-top: 30px; padding-bottom: 30px; box-sizing: border-box; } /* --------------------------------------------------------- TITLE GROUP --------------------------------------------------------- */ .xfm-home-title { max-width: 610px; margin: 0; color: var(--xfm-heading); font-family: "Poppins", sans-serif; font-size: clamp(42px, 4.4vw, 56px); line-height: 0.98; font-weight: 700; letter-spacing: -0.045em; text-shadow: none; } /* --------------------------------------------------------- EYEBROW --------------------------------------------------------- */ .xfm-home-eyebrow { display: block; margin: 0 0 10px; color: #9A7622; font-size: 13px; line-height: 1.1; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; } /* --------------------------------------------------------- GOLD ACCENT --------------------------------------------------------- */ .xfm-title-accent { display: block; width: 52px; height: 4px; margin: 0 0 18px; background: linear-gradient( 90deg, var(--xfm-accent-dark) 0%, #D4B458 100% ); border-radius: 999px; } /* --------------------------------------------------------- MAIN H1 --------------------------------------------------------- */ .xfm-home-main-title { display: block; color: #0B1328; font-weight: 700; letter-spacing: -0.045em; } /* Keep strong visually identical */ .xfm-home-main-title strong { display: inline; color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; } /* --------------------------------------------------------- SUBTITLE --------------------------------------------------------- */ .xfm-home-subtitle { display: block; max-width: 46ch; margin-top: 16px; color: #334155; font-size: 15px; line-height: 1.45; font-weight: 500; letter-spacing: -0.01em; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .xfm-home-hero { min-height: 290px; } .xfm-home-title { max-width: 560px; font-size: clamp(38px, 5vw, 50px); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .xfm-home-hero { min-height: 0; background-position: center, 64% center; } .xfm-home-hero-inner { padding-top: 22px; padding-bottom: 22px; } .xfm-home-title { font-size: clamp(33px, 9vw, 42px); line-height: 0.98; font-weight: 650; letter-spacing: -0.04em; } .xfm-home-eyebrow { margin-bottom: 9px; font-size: 12px; letter-spacing: 0.12em; } .xfm-title-accent { width: 48px; height: 3px; margin-bottom: 14px; } .xfm-home-main-title, .xfm-home-main-title strong { font-weight: 650; letter-spacing: -0.04em; } .xfm-home-subtitle { max-width: 31ch; margin-top: 10px; font-size: 14px; line-height: 1.35; } } /* ========================================================= XPERIENCE FINDER MALTA MOBILE — STICKY BROWSE CTA ========================================================= */ /* Hidden everywhere by default */ .xfm-sticky-browse { display: none; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .xfm-sticky-browse { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9000; display: block; padding: 7px; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 20px; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* * Hidden until JS activates it */ opacity: 0; visibility: hidden; transform: translateY(18px); pointer-events: none; transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease; } /* Visible state */ .xfm-sticky-browse.is-visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* Yellow CTA — same visual proportions as original */ .xfm-sticky-browse .xfm-hero-cta--search { width: 100%; min-height: 46px; margin: 0; font-size: 13px; } .xfm-sticky-browse .xfm-hero-cta-icon, .xfm-sticky-browse .xfm-hero-cta-icon svg { width: 16px; height: 16px; flex-basis: 16px; } } /* ========================================================= XPERIENCE FINDER MALTA HOME — HERO CTA ========================================================= */ .xfm-hero-cta-section { width: 100%; padding: 16px 0 32px; background: var(--xfm-surface); } .xfm-hero-cta-wrap { width: 100%; max-width: 660px; } .xfm-hero-cta-panel { width: 100%; padding: 7px; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(15, 23, 42, 0.055); border-radius: 20px; box-shadow: 0 8px 22px rgba(15, 23, 42, 0.055), 0 1px 3px rgba(15, 23, 42, 0.03); box-sizing: border-box; } /* --------------------------------------------------------- ROWS --------------------------------------------------------- */ .xfm-hero-cta-row { display: grid; gap: 7px; } .xfm-hero-cta-row--top { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 7px; } .xfm-hero-cta-row--bottom { grid-template-columns: 1fr; } /* --------------------------------------------------------- BUTTON BASE --------------------------------------------------------- */ .xfm-hero-cta { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border-radius: 999px; font-family: "Poppins", sans-serif; font-size: 13.5px; line-height: 1; font-weight: 650; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; cursor: pointer; box-sizing: border-box; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease; } button.xfm-hero-cta { width: 100%; appearance: none; -webkit-appearance: none; } /* --------------------------------------------------------- ICONS --------------------------------------------------------- */ .xfm-hero-cta-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: 0 0 16px; } .xfm-hero-cta-icon svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .xfm-hero-cta--ai .xfm-hero-cta-icon svg { fill: currentColor; stroke: none; } /* --------------------------------------------------------- WHATSAPP --------------------------------------------------------- */ .xfm-hero-cta--wa { color: #166534; background: linear-gradient( 135deg, #F4FBF6 0%, #E9F6ED 100% ); border: 1px solid rgba(22, 101, 52, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 2px 6px rgba(22, 101, 52, 0.055); } .xfm-hero-cta--wa:hover { color: #14532D; background: linear-gradient( 135deg, #EDF9F0 0%, #DEF1E4 100% ); border-color: rgba(22, 101, 52, 0.32); transform: translateY(-1px); } /* --------------------------------------------------------- ASK AI --------------------------------------------------------- */ .xfm-hero-cta--ai { color: #29445F; background: linear-gradient( 135deg, #F5F8FB 0%, #EAF0F6 100% ); border: 1px solid rgba(30, 58, 95, 0.09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 2px 6px rgba(15, 23, 42, 0.045); } .xfm-hero-cta--ai:hover { color: #1E3A5F; background: linear-gradient( 135deg, #EFF5FA 0%, #DFE9F2 100% ); border-color: rgba(30, 58, 95, 0.15); transform: translateY(-1px); } /* --------------------------------------------------------- BROWSE --------------------------------------------------------- */ .xfm-hero-cta--search { color: #49370D; background: linear-gradient( 180deg, #F9E9AC 0%, #EDCD67 100% ); border: 1px solid rgba(176, 138, 46, 0.26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56), 0 4px 12px rgba(176, 138, 46, 0.12); } .xfm-hero-cta--search:hover { background: linear-gradient( 180deg, #FAEAAF 0%, #E8C653 100% ); border-color: rgba(176, 138, 46, 0.36); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.60), 0 6px 16px rgba(176, 138, 46, 0.16); transform: translateY(-1px); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .xfm-hero-cta-section { padding: 14px 0 30px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .xfm-hero-cta-section { padding: 12px 0 28px; } .xfm-hero-cta-wrap { max-width: 100%; } .xfm-hero-cta-panel { padding: 7px; border-radius: 18px; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.025); } .xfm-hero-cta { min-height: 42px; padding: 0 12px; gap: 6px; font-size: 13px; font-weight: 650; } .xfm-hero-cta-icon, .xfm-hero-cta-icon svg { width: 15px; height: 15px; flex-basis: 15px; } } /* ========================================================= XPERIENCE FINDER MALTA HOME — CATEGORIES ========================================================= */ .xfm-categories { width: 100%; padding: 28px 0 34px; background: #FFFDF9; border-top: 1px solid rgba(200, 162, 74, 0.18); } /* ========================================================= GRID ========================================================= */ .xfm-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; } /* ========================================================= CARD ========================================================= */ .xfm-category-card { position: relative; min-width: 0; min-height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 9px 28px 9px 8px; color: var(--xfm-heading); background: linear-gradient( 180deg, #FFFFFF 0%, #FCFDFE 100% ); border: 1px solid rgba(15, 23, 42, 0.075); border-radius: 16px; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.035), 0 1px 2px rgba(15, 23, 42, 0.025); font-family: "Poppins", sans-serif; font-size: 13px; line-height: 1.12; font-weight: 650; letter-spacing: -0.018em; text-align: center; text-decoration: none; cursor: pointer; box-sizing: border-box; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease; } button.xfm-category-card { width: 100%; appearance: none; -webkit-appearance: none; } /* ========================================================= NORMAL HOVER ========================================================= */ .xfm-category-card:hover { transform: translateY(-1px); color: #17324D; border-color: rgba(49, 93, 130, 0.16); background: linear-gradient( 180deg, #FFFFFF 0%, #F6FAFD 100% ); box-shadow: 0 7px 17px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.025); } .xfm-category-card:active { transform: scale(0.985); } /* Remove browser / theme red focus states */ .xfm-category-card:focus, .xfm-category-card:focus-visible { color: #17324D !important; outline: none !important; border-color: rgba(49, 93, 130, 0.24) !important; box-shadow: 0 0 0 3px rgba(49, 93, 130, 0.08) !important; } /* ========================================================= EXPANDABLE CARD — OPEN STATE Departure / Destinations ========================================================= */ .xfm-category-expand[aria-expanded="true"] { color: #17324D !important; background: linear-gradient( 180deg, #F4F9FD 0%, #E9F2FA 100% ) !important; border-color: rgba(49, 93, 130, 0.22) !important; box-shadow: 0 6px 16px rgba(30, 73, 110, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.75) !important; transform: none !important; } .xfm-category-expand[aria-expanded="true"] .xfm-category-icon, .xfm-category-expand[aria-expanded="true"] .xfm-category-chevron { color: #315D82 !important; } /* ========================================================= ICON ========================================================= */ .xfm-category-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px; color: #315D82; } .xfm-category-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= BEST SELLERS ========================================================= */ .xfm-category-card--best { color: #166534; background: linear-gradient( 180deg, #F6FCF8 0%, #EBF8EF 100% ); border-color: rgba(22, 163, 74, 0.18); } .xfm-category-card--best .xfm-category-icon { color: var(--xfm-success); } .xfm-category-card--best .xfm-category-icon svg { fill: currentColor; stroke: none; } /* ========================================================= 10% OFF ========================================================= */ .xfm-category-card--offer { color: #8B470B; background: linear-gradient( 110deg, #FFF9EC 0%, #FFF1C8 55%, #FFE8B4 100% ); border-color: rgba(200, 138, 25, 0.26); } .xfm-category-card--offer .xfm-category-icon { color: #F04438; } .xfm-category-card--offer .xfm-category-icon svg { fill: currentColor; stroke: none; } /* Offer text */ .xfm-category-offer-copy strong { display: block; color: #91450A; line-height: 1.1; } .xfm-category-offer-copy small { display: block; margin-top: 3px; color: #9A6700; font-size: 10px; line-height: 1.1; font-weight: 600; letter-spacing: -0.01em; } /* ========================================================= ALL TOURS ========================================================= */ .xfm-category-card--all { color: #17324D; background: linear-gradient( 180deg, #F5F9FF 0%, #E8F1FB 100% ); border-color: rgba(31, 95, 153, 0.18); } /* ========================================================= CHEVRON ========================================================= */ .xfm-category-chevron { position: absolute; top: 50%; right: 9px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: #315D82; transform: translateY(-50%); transition: transform 160ms ease; } .xfm-category-chevron svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .xfm-category-expand[aria-expanded="true"] .xfm-category-chevron { transform: translateY(-50%) rotate(180deg); } /* ========================================================= EXPANDED PANEL ========================================================= */ .xfm-category-panel { grid-column: 1 / -1; width: 100%; padding: 14px; background: linear-gradient( 180deg, #FFFFFF 0%, #F7FAFD 100% ); border: 1px solid rgba(49, 93, 130, 0.14); border-radius: 16px; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.045); box-sizing: border-box; } .xfm-category-panel[hidden] { display: none; } .xfm-category-panel-title { margin: 0 0 11px; color: #475569; font-size: 11px; line-height: 1.2; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; } /* ========================================================= PANEL OPTIONS ========================================================= */ .xfm-category-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .xfm-category-options a { min-height: 40px; display: flex; align-items: center; justify-content: center; padding: 7px 8px; color: #1E3A5F; background: #FFFFFF; border: 1px solid rgba(30, 87, 146, 0.13); border-radius: 11px; font-size: 12px; line-height: 1.15; font-weight: 650; text-align: center; text-decoration: none; transition: background 160ms ease, border-color 160ms ease; } .xfm-category-options a:hover { background: #F4F8FC; border-color: rgba(30, 87, 146, 0.22); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .xfm-categories { padding: 24px 0 28px; } .xfm-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; } .xfm-category-card { min-height: 66px; padding: 9px 20px 9px 6px; font-size: 12px; } /* ------------------------------------------------------- 10% OFF — FEATURE CARD ------------------------------------------------------- */ .xfm-category-card--offer { grid-column: span 2; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 9px 14px; text-align: left; } .xfm-category-card--offer .xfm-category-icon { width: 34px; height: 34px; flex: 0 0 34px; margin: 0; background: rgba(255, 255, 255, 0.66); border-radius: 50%; } .xfm-category-offer-copy strong { font-size: 14px; } .xfm-category-offer-copy small { display: block; margin-top: 3px; font-size: 10px; } /* ------------------------------------------------------- DEPARTURE LOCATIONS — FORCE TWO LINES Add this class to that card if not already present ------------------------------------------------------- */ .xfm-category-card--departure { line-height: 1.08; } .xfm-category-card--departure .xfm-category-label { display: block; max-width: 72px; white-space: normal; text-align: center; } /* ------------------------------------------------------- HIDE SUNSET ON MOBILE ------------------------------------------------------- */ .xfm-category-card--sunset { display: none !important; } /* ------------------------------------------------------- PANELS ------------------------------------------------------- */ .xfm-category-panel { padding: 12px; } .xfm-category-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .xfm-category-options a { min-height: 38px; padding: 7px 5px; font-size: 11px; } } /* ========================================================= XPERIENCE FINDER MALTA HOME — FEATURED EXPERIENCES ========================================================= */ .xfm-featured { width: 100%; padding: 30px 0 28px; background: #FFFFFF; } /* --------------------------------------------------------- HEADING --------------------------------------------------------- */ .xfm-featured-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 16px; } .xfm-featured-head .xfm-section-heading { margin-bottom: 0; } /* --------------------------------------------------------- CONTROLS --------------------------------------------------------- */ .xfm-featured-controls { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; } .xfm-featured-arrow { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; color: #315D82; background: linear-gradient( 180deg, #FFFFFF 0%, #F8FAFC 100% ); border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 999px; box-shadow: 0 3px 8px rgba(15, 23, 42, 0.035); cursor: pointer; transition: transform 160ms ease, opacity 160ms ease, border-color 160ms ease, background 160ms ease; } .xfm-featured-arrow:hover:not(:disabled) { transform: translateY(-1px); background: #F5F8FB; border-color: rgba(49, 93, 130, 0.20); } .xfm-featured-arrow:disabled { opacity: 0.28; cursor: default; } .xfm-featured-arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* --------------------------------------------------------- RAIL --------------------------------------------------------- */ .xfm-featured-rail { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 16px; width: 100%; padding: 2px 0 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-inline: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .xfm-featured-rail::-webkit-scrollbar { display: none; } /* --------------------------------------------------------- CARD --------------------------------------------------------- */ .xfm-tour-card { position: relative; flex: 0 0 320px; min-width: 320px; background: #FFFFFF; border: 1px solid rgba(15, 23, 42, 0.065); border-radius: 20px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025), 0 6px 16px rgba(15, 23, 42, 0.03); overflow: hidden; scroll-snap-align: start; transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease; } .xfm-tour-card:hover { transform: translateY(-2px); border-color: rgba(49, 93, 130, 0.12); box-shadow: 0 2px 4px rgba(15, 23, 42, 0.03), 0 10px 22px rgba(15, 23, 42, 0.045); } /* --------------------------------------------------------- FULL CARD LINK --------------------------------------------------------- */ .xfm-tour-card-link, .xfm-tour-card-link:hover, .xfm-tour-card-link:visited, .xfm-tour-card-link:active { display: block; width: 100%; height: 100%; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; } /* --------------------------------------------------------- IMAGE --------------------------------------------------------- */ .xfm-tour-media { position: relative; padding: 11px 11px 0; } .xfm-tour-media img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 15px; transition: transform 200ms ease; } .xfm-tour-card:hover .xfm-tour-media img { transform: scale(1.015); } /* --------------------------------------------------------- BADGES --------------------------------------------------------- */ .xfm-tour-badges { position: absolute; top: 19px; left: 19px; display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none; } .xfm-badge { min-height: 23px; display: inline-flex; align-items: center; padding: 0 8px; color: #FFFFFF; border-radius: 999px; font-size: 10px; line-height: 1; font-weight: 700; } .xfm-badge--green { background: rgba(57, 157, 91, 0.94); } .xfm-badge--offer { background: rgba(204, 107, 69, 0.94); } .xfm-badge--gold { background: rgba(176, 138, 46, 0.94); } .xfm-badge--purple { background: rgba(119, 74, 136, 0.94); } /* --------------------------------------------------------- BODY --------------------------------------------------------- */ .xfm-tour-body { padding: 14px 16px 16px; } .xfm-tour-body h3 { margin: 0 0 8px; color: var(--xfm-heading); font-size: 16px; line-height: 1.18; font-weight: 650; letter-spacing: -0.028em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color 170ms ease; } .xfm-tour-card:hover .xfm-tour-body h3 { color: #1F5F99; } /* --------------------------------------------------------- META --------------------------------------------------------- */ .xfm-tour-meta { margin: 0 0 10px; color: #5B6475; font-size: 12px; line-height: 1.35; font-weight: 500; } /* --------------------------------------------------------- RATING --------------------------------------------------------- */ .xfm-tour-rating { margin: 0 0 8px; color: var(--xfm-heading); font-size: 13px; line-height: 1.2; font-weight: 650; } .xfm-tour-rating span { color: #5B6475; font-weight: 500; } /* --------------------------------------------------------- TRUST --------------------------------------------------------- */ .xfm-tour-trust { margin: 0 0 14px; color: #1E8E5A; font-size: 12px; line-height: 1.2; font-weight: 650; } /* --------------------------------------------------------- FOOTER --------------------------------------------------------- */ .xfm-tour-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; } .xfm-tour-price { display: flex; flex-direction: column; gap: 3px; } .xfm-tour-price > span { color: #8A94A6; font-size: 10px; line-height: 1; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; } .xfm-tour-price-line { display: flex; align-items: baseline; gap: 6px; } .xfm-tour-price-old { color: #8A94A6; font-size: 12px; font-weight: 500; text-decoration: line-through; } .xfm-tour-price strong { color: #C58C00; font-size: 16px; line-height: 1; font-weight: 700; } .xfm-tour-link { display: inline-flex; align-items: center; gap: 5px; color: #1F5F99; font-size: 12px; line-height: 1; font-weight: 650; white-space: nowrap; } /* --------------------------------------------------------- PROGRESS --------------------------------------------------------- */ .xfm-featured-progress { width: 100%; height: 3px; margin-top: 2px; background: rgba(49, 93, 130, 0.08); border-radius: 999px; overflow: hidden; } .xfm-featured-progress span { display: block; width: 25%; height: 100%; background: rgba(49, 93, 130, 0.42); border-radius: inherit; transform: translateX(0); transform-origin: left center; transition: width 160ms ease, transform 160ms ease; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .xfm-featured { padding: 26px 0 24px; } .xfm-featured-head { gap: 10px; margin-bottom: 12px; } .xfm-featured-controls { gap: 6px; } .xfm-featured-arrow { width: 34px; height: 34px; } .xfm-featured-arrow svg { width: 16px; height: 16px; } .xfm-featured-rail { width: calc(100% + 16px); gap: 12px; padding: 2px 16px 14px 0; } .xfm-tour-card { flex: 0 0 calc(100% - 72px); min-width: calc(100% - 72px); border-radius: 18px; } .xfm-tour-media { padding: 10px 10px 0; } .xfm-tour-media img { border-radius: 14px; } .xfm-tour-body { padding: 12px 14px 14px; } .xfm-tour-body h3 { font-size: 15px; font-weight: 650; } .xfm-featured-progress { width: calc(100% - 4px); } } /* ========================================================= XPERIENCE FINDER MALTA HOME — TRUST ========================================================= */ .xfm-trust { width: 100%; padding: 28px 0 30px; background: #FFFFFF; } /* --------------------------------------------------------- CARD --------------------------------------------------------- */ .xfm-trust-card { padding: 18px 20px; background: linear-gradient( 180deg, #FAFCFF 0%, #F6F9FC 100% ); border: 1px solid rgba(148, 163, 184, 0.14); border-radius: 18px; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.045); } /* --------------------------------------------------------- GRID --------------------------------------------------------- */ .xfm-trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } /* --------------------------------------------------------- ITEM --------------------------------------------------------- */ .xfm-trust-item { display: flex; align-items: flex-start; gap: 12px; min-width: 0; } /* --------------------------------------------------------- ICON --------------------------------------------------------- */ .xfm-trust-icon { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; color: #FFFFFF; background: linear-gradient( 180deg, #3A678B 0%, #294F70 100% ); border-radius: 999px; box-shadow: 0 5px 12px rgba(49, 93, 130, 0.14); } .xfm-trust-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* --------------------------------------------------------- COPY --------------------------------------------------------- */ .xfm-trust-copy { min-width: 0; } .xfm-trust-copy h3 { margin: 0 0 4px; color: var(--xfm-heading); font-size: 15px; line-height: 1.22; font-weight: 650; letter-spacing: -0.02em; } .xfm-trust-copy p { margin: 0; color: var(--xfm-muted); font-size: 13px; line-height: 1.4; font-weight: 400; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .xfm-trust { padding: 26px 0 28px; } .xfm-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .xfm-trust { padding: 22px 0 22px; } .xfm-trust-card { padding: 15px; border-radius: 16px; } .xfm-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; } .xfm-trust-item { gap: 9px; } .xfm-trust-icon { flex-basis: 31px; width: 31px; height: 31px; } .xfm-trust-icon svg { width: 15px; height: 15px; } .xfm-trust-copy h3 { margin: 1px 0 3px; font-size: 13.5px; line-height: 1.16; font-weight: 650; } .xfm-trust-copy p { font-size: 11.5px; line-height: 1.32; } } /* ========================================================= XPERIENCE FINDER MALTA HOME — GUIDE ========================================================= */ .xfm-guide { width: 100%; padding: 32px 0 38px; background: #FFFFFF; } /* --------------------------------------------------------- GRID --------------------------------------------------------- */ .xfm-guide-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } /* --------------------------------------------------------- CARD --------------------------------------------------------- */ .xfm-guide-card { padding: 21px; background: linear-gradient( 180deg, #FAFCFF 0%, #F7FAFD 100% ); border: 1px solid rgba(148, 163, 184, 0.14); border-radius: 16px; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.045); } /* --------------------------------------------------------- TITLE --------------------------------------------------------- */ .xfm-guide-card h3 { margin: 0 0 11px; color: var(--xfm-heading); font-size: 17px; line-height: 1.22; font-weight: 650; letter-spacing: -0.022em; } /* --------------------------------------------------------- TEXT --------------------------------------------------------- */ .xfm-guide-card p { margin: 0 0 11px; color: #475569; font-size: 14px; line-height: 1.52; font-weight: 400; } .xfm-guide-card p:last-child { margin-bottom: 0; } /* --------------------------------------------------------- LIST --------------------------------------------------------- */ .xfm-guide-card ul { margin: 9px 0 0; padding-left: 18px; } .xfm-guide-card li { margin-bottom: 7px; color: #475569; font-size: 14px; line-height: 1.45; } /* --------------------------------------------------------- LINKS --------------------------------------------------------- */ .xfm-guide-card a { color: #1F5F99; font-weight: 650; text-decoration: none; transition: color 160ms ease; } .xfm-guide-card a:hover { color: #174C7B; text-decoration: underline; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .xfm-guide { padding: 28px 0 34px; } .xfm-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .xfm-guide { padding: 24px 0 30px; } .xfm-guide-grid { grid-template-columns: 1fr; gap: 14px; } .xfm-guide-card { padding: 19px 17px; border-radius: 15px; } .xfm-guide-card h3 { font-size: 17px; line-height: 1.2; } .xfm-guide-card p, .xfm-guide-card li { font-size: 13.5px; } } /* ========================================================= XPERIENCE FINDER MALTA HOME — FAQ ========================================================= */ .xfm-faq { width: 100%; padding: 10px 0 48px; background: #FFFFFF; } /* --------------------------------------------------------- CARD --------------------------------------------------------- */ .xfm-faq-card { padding: 26px; background: linear-gradient( 180deg, #FFFFFF 0%, #FCFDFE 100% ); border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 18px; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.045); } /* --------------------------------------------------------- TITLE --------------------------------------------------------- */ .xfm-faq-card h2 { margin: 0 0 11px; color: var(--xfm-heading); font-size: 20px; line-height: 1.12; font-weight: 650; letter-spacing: -0.025em; } /* --------------------------------------------------------- TEXT --------------------------------------------------------- */ .xfm-faq-text { max-width: 760px; margin: 0 0 17px; color: var(--xfm-muted); font-size: 15px; line-height: 1.5; font-weight: 400; } /* --------------------------------------------------------- LINK --------------------------------------------------------- */ .xfm-faq-button { display: inline-flex; align-items: center; gap: 6px; color: #1F5F99; font-size: 14px; line-height: 1; font-weight: 650; text-decoration: none; transition: gap 160ms ease, color 160ms ease; } .xfm-faq-button:hover { gap: 8px; color: #174C7B; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .xfm-faq { padding: 8px 0 36px; } .xfm-faq-card { padding: 22px 18px; border-radius: 16px; } .xfm-faq-card h2 { font-size: 19px; } .xfm-faq-text { margin-bottom: 16px; font-size: 14px; line-height: 1.45; } .xfm-faq-button { font-size: 14px; } } /* ========================================================= XPERIENCE FINDER — GLOBAL FOOTER ========================================================= */ /* ========================================================= OUTER ========================================================= */ #xfm-footer { width: 100% !important; margin: 0 !important; padding: 0 !important; background: linear-gradient( 180deg, #132A3D 0%, #0D2031 100% ) !important; color: #E5EDF5 !important; border-top: 1px solid rgba(176, 138, 46, 0.22) !important; box-sizing: border-box !important; } /* ========================================================= INNER ========================================================= */ #xfm-footer-inner { width: 100% !important; max-width: 1380px !important; margin: 0 auto !important; padding: 44px 24px 20px !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; box-sizing: border-box !important; } /* ========================================================= MAIN AREA — DESKTOP HORIZONTAL ========================================================= */ #xfm-footer-main { width: 100% !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: space-between !important; gap: 42px !important; box-sizing: border-box !important; } /* ========================================================= COLUMNS ========================================================= */ #xfm-footer-brand { flex: 1.55 1 0 !important; min-width: 260px !important; } #xfm-footer-explore, #xfm-footer-discover, #xfm-footer-help { flex: 1 1 0 !important; min-width: 150px !important; } #xfm-footer-brand, #xfm-footer-explore, #xfm-footer-discover, #xfm-footer-help { width: auto !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 0 !important; } /* ========================================================= LOGO ========================================================= */ #xfm-footer-logo { width: auto !important; margin: 0 0 18px !important; padding: 0 !important; } #xfm-footer-logo img { display: block !important; width: 250px !important; max-width: 100% !important; height: auto !important; } /* ========================================================= BRAND COPY ========================================================= */ #xfm-footer-description { max-width: 350px !important; margin: 0 0 15px !important; padding: 0 !important; color: rgba(235, 242, 248, 0.76) !important; font-family: Poppins, sans-serif !important; font-size: 13px !important; line-height: 1.55 !important; font-weight: 400 !important; } #xfm-footer-tagline { margin: 0 !important; padding: 0 !important; color: #D3AE4E !important; font-family: Poppins, sans-serif !important; font-size: 10.5px !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } /* ========================================================= COLUMN HEADINGS ========================================================= */ #xfm-footer-explore-title, #xfm-footer-discover-title, #xfm-footer-help-title { width: 100% !important; margin: 0 0 16px !important; padding: 0 !important; } #xfm-footer-explore-title .elementor-heading-title, #xfm-footer-discover-title .elementor-heading-title, #xfm-footer-help-title .elementor-heading-title { margin: 0 !important; color: #FFFFFF !important; font-family: Poppins, sans-serif !important; font-size: 14px !important; line-height: 1.2 !important; font-weight: 650 !important; letter-spacing: -0.01em !important; } /* ========================================================= LINKS ========================================================= */ #xfm-footer-explore p, #xfm-footer-discover p, #xfm-footer-help p { width: 100% !important; margin: 0 0 10px !important; padding: 0 !important; } #xfm-footer-explore a, #xfm-footer-discover a, #xfm-footer-help a { color: rgba(235, 242, 248, 0.74) !important; font-family: Poppins, sans-serif !important; font-size: 13px !important; line-height: 1.4 !important; font-weight: 450 !important; text-decoration: none !important; white-space: normal !important; transition: color 150ms ease !important; } #xfm-footer-explore a:hover, #xfm-footer-discover a:hover, #xfm-footer-help a:hover { color: #FFFFFF !important; } /* ========================================================= BOTTOM ROW ========================================================= */ #xfm-footer-bottom { width: 100% !important; margin: 36px 0 0 !important; padding: 18px 0 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 24px !important; border-top: 1px solid rgba(226, 232, 240, 0.10) !important; box-sizing: border-box !important; } #xfm-footer-bottom-left, #xfm-footer-bottom-right { width: auto !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; flex: none !important; } #xfm-footer-bottom-right { justify-content: flex-end !important; } /* Copyright */ #xfm-footer-copyright { margin: 0 !important; padding: 0 !important; color: rgba(226, 232, 240, 0.52) !important; font-family: Poppins, sans-serif !important; font-size: 11px !important; line-height: 1.4 !important; } /* Terms */ #xfm-footer-bottom-terms { margin: 0 !important; padding: 0 !important; } #xfm-footer-bottom-terms a { color: rgba(235, 242, 248, 0.68) !important; font-family: Poppins, sans-serif !important; font-size: 11px !important; line-height: 1.4 !important; font-weight: 500 !important; text-decoration: none !important; } #xfm-footer-bottom-terms a:hover { color: #FFFFFF !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { #xfm-footer-inner { padding: 38px 20px 20px !important; } #xfm-footer-main { flex-wrap: wrap !important; gap: 30px 26px !important; } #xfm-footer-brand { flex: 0 0 100% !important; } #xfm-footer-explore, #xfm-footer-discover, #xfm-footer-help { flex: 1 1 calc(33.333% - 18px) !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { #xfm-footer-inner { padding: 32px 20px 18px !important; } #xfm-footer-main { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 22px !important; } /* ------------------------------------------------------- BRAND — FULL WIDTH ------------------------------------------------------- */ #xfm-footer-brand { grid-column: 1 / -1 !important; width: 100% !important; min-width: 0 !important; margin-bottom: 2px !important; } #xfm-footer-logo { margin-bottom: 18px !important; } #xfm-footer-logo img { width: 225px !important; } #xfm-footer-description { max-width: 330px !important; margin-bottom: 14px !important; font-size: 12.5px !important; line-height: 1.5 !important; } #xfm-footer-tagline { font-size: 10px !important; } /* ------------------------------------------------------- EXPLORE / DISCOVER ------------------------------------------------------- */ #xfm-footer-explore, #xfm-footer-discover { width: 100% !important; min-width: 0 !important; align-self: start !important; } /* ------------------------------------------------------- HELP — FULL WIDTH ------------------------------------------------------- */ #xfm-footer-help { grid-column: 1 / -1 !important; width: 100% !important; min-width: 0 !important; margin-top: 2px !important; } /* ------------------------------------------------------- MOBILE GROUP HEADINGS More space ABOVE than below ------------------------------------------------------- */ #xfm-footer-explore-title, #xfm-footer-discover-title, #xfm-footer-help-title { margin: 0 0 14px !important; } #xfm-footer-explore-title .elementor-heading-title, #xfm-footer-discover-title .elementor-heading-title, #xfm-footer-help-title .elementor-heading-title { font-size: 14px !important; } /* ------------------------------------------------------- MOBILE LINKS ------------------------------------------------------- */ #xfm-footer-explore p, #xfm-footer-discover p, #xfm-footer-help p { margin-bottom: 9px !important; } #xfm-footer-explore a, #xfm-footer-discover a, #xfm-footer-help a { font-size: 12.5px !important; line-height: 1.35 !important; } /* ------------------------------------------------------- BOTTOM ------------------------------------------------------- */ #xfm-footer-bottom { margin-top: 30px !important; padding-top: 16px !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 8px !important; } #xfm-footer-bottom-left, #xfm-footer-bottom-right { width: 100% !important; justify-content: flex-start !important; } #xfm-footer-copyright, #xfm-footer-bottom-terms a { font-size: 10.5px !important; } } /* ========================================================= XPERIENCE FINDER — ABOUT PAGE COMPACT / PREMIUM VERSION ========================================================= */ /* --------------------------------------------------------- PAGE BASE --------------------------------------------------------- */ .xfm-about-page { width: 100%; background: #F8FBFF; color: #0F172A; } .xfm-about-page * { box-sizing: border-box; } .xfm-about-page .xfm-shell { width: 100%; max-width: 1380px; margin: 0 auto; padding: 0 24px; } /* --------------------------------------------------------- HERO --------------------------------------------------------- */ .xfm-about-hero { padding: 44px 0 48px; background: linear-gradient( 135deg, #FFFFFF 0%, #F8FBFF 56%, #EEF6FC 100% ); border-bottom: 1px solid rgba(15, 23, 42, 0.07); } .xfm-about-hero-inner { max-width: 860px; } .xfm-about-page .xfm-kicker { margin: 0 0 10px; color: #B08A2E; font-size: 12px; line-height: 1.2; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .xfm-about-title { margin: 0 0 18px; max-width: 760px; color: #0F172A; font-size: clamp(40px, 4.5vw, 64px); line-height: 0.98; font-weight: 800; letter-spacing: -0.045em; } .xfm-about-intro { max-width: 820px; margin: 0; color: #57646F; font-size: 17px; line-height: 1.58; } /* --------------------------------------------------------- GENERAL SECTIONS --------------------------------------------------------- */ .xfm-about-section, .xfm-about-values, .xfm-about-explore { padding: 52px 0; } .xfm-about-section { background: #FFFFFF; } .xfm-about-values { background: #F8FBFF; } .xfm-about-explore { background: #FFFFFF; } .xfm-about-page .xfm-section-heading { max-width: 820px; margin-bottom: 24px; } .xfm-about-page .xfm-section-title { margin: 0; color: #0F172A; font-size: clamp(28px, 3vw, 40px); line-height: 1.08; font-weight: 800; letter-spacing: -0.035em; } .xfm-about-copy { max-width: 900px; } .xfm-about-copy p { margin: 0 0 14px; color: #57646F; font-size: 16px; line-height: 1.65; } .xfm-about-copy p:last-child { margin-bottom: 0; } /* --------------------------------------------------------- VALUE CARDS --------------------------------------------------------- */ .xfm-about-values-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .xfm-about-value-card { min-width: 0; padding: 24px; background: #FFFFFF; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 18px; box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06); } .xfm-about-value-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 16px; color: #2563EB; background: #EEF4FF; border-radius: 12px; } .xfm-about-value-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .xfm-about-value-card h3 { margin: 0 0 9px; color: #0F172A; font-size: 19px; line-height: 1.25; font-weight: 800; } .xfm-about-value-card p { margin: 0; color: #57646F; font-size: 14px; line-height: 1.62; } /* --------------------------------------------------------- HOW IT WORKS --------------------------------------------------------- */ .xfm-about-how { background: #FFFFFF; } .xfm-about-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .xfm-about-step { display: flex; gap: 15px; min-width: 0; padding: 22px; background: #F8FBFF; border: 1px solid rgba(15, 23, 42, 0.07); border-radius: 16px; } .xfm-about-step-number { flex: 0 0 auto; color: #B08A2E; font-size: 13px; line-height: 1; font-weight: 800; letter-spacing: 0.08em; } .xfm-about-step h3 { margin: 0 0 6px; color: #0F172A; font-size: 18px; line-height: 1.25; font-weight: 800; } .xfm-about-step p { margin: 0; color: #57646F; font-size: 14px; line-height: 1.58; } /* --------------------------------------------------------- CATEGORY LINKS --------------------------------------------------------- */ .xfm-about-links-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .xfm-about-category { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; padding: 16px 20px; color: #0F172A !important; text-decoration: none !important; font-size: 15px; line-height: 1.3; font-weight: 800; background: #F8FBFF; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 14px; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .xfm-about-category:hover { transform: translateY(-2px); border-color: rgba(37, 99, 235, 0.20); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07); } .xfm-about-category span:last-child { color: #2563EB; font-size: 18px; } /* --------------------------------------------------------- FINAL CTA --------------------------------------------------------- */ .xfm-about-final { padding: 10px 0 58px; background: #FFFFFF; } .xfm-about-final-card { display: flex; align-items: center; justify-content: space-between; gap: 34px; padding: 30px 32px; background: linear-gradient( 135deg, #F7FBFF 0%, #EEF6FD 100% ); border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 20px; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06); } .xfm-about-final-card > div { max-width: 700px; } .xfm-about-final-card h2 { margin: 0 0 8px; color: #0F172A; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; } .xfm-about-final-card p:not(.xfm-kicker) { margin: 0; color: #57646F; font-size: 15px; line-height: 1.58; } .xfm-about-final-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; flex: 0 0 auto; min-height: 48px; padding: 0 20px; color: #FFFFFF !important; text-decoration: none !important; font-size: 14px; line-height: 1; font-weight: 800; background: #2563EB; border: 1px solid #2563EB; border-radius: 13px; box-shadow: 0 7px 16px rgba(37, 99, 235, 0.16); } .xfm-about-final-button:hover { transform: translateY(-1px); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .xfm-about-values-grid, .xfm-about-steps { grid-template-columns: 1fr; } .xfm-about-final-card { align-items: flex-start; flex-direction: column; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .xfm-about-page .xfm-shell { padding: 0 16px; } .xfm-about-hero { padding: 32px 0 34px; } .xfm-about-title { margin-bottom: 14px; font-size: 38px; line-height: 0.99; } .xfm-about-intro { font-size: 15px; line-height: 1.55; } .xfm-about-section, .xfm-about-values, .xfm-about-explore { padding: 38px 0; } .xfm-about-page .xfm-section-heading { margin-bottom: 20px; } .xfm-about-page .xfm-section-title { font-size: 27px; line-height: 1.08; } .xfm-about-copy p { font-size: 15px; line-height: 1.62; } .xfm-about-values-grid, .xfm-about-steps { gap: 14px; } .xfm-about-value-card { padding: 22px; border-radius: 16px; } .xfm-about-value-icon { width: 40px; height: 40px; margin-bottom: 14px; } .xfm-about-value-card h3 { font-size: 18px; } .xfm-about-value-card p { font-size: 14px; } .xfm-about-step { padding: 20px; } .xfm-about-links-grid { grid-template-columns: 1fr; gap: 12px; } .xfm-about-category { min-height: 58px; padding: 15px 18px; } .xfm-about-final { padding: 4px 0 44px; } .xfm-about-final-card { gap: 22px; padding: 24px 22px; border-radius: 18px; } .xfm-about-final-button { width: 100%; } .xfm-about-value-icon { margin-bottom: 10px; } .xfm-about-value-card h3 { margin-top: 0; } } /* closes @media (max-width: 767px) */ /* ========================================================= ABOUT PAGE — ELEMENTOR WIDTH SAFETY ========================================================= */ .xfm-about-page { width: 100% !important; max-width: none !important; } .xfm-about-page > section { width: 100% !important; } /* ========================================================= XPERIENCE FINDER MALTA — CONTACT PAGE Fully scoped to Contact sections only ========================================================= */ /* ========================================================= PAGE BASICS ========================================================= */ .xfm-contact-hero, .xfm-contact-section, .xfm-contact-help, .xfm-contact-faq { width: 100%; box-sizing: border-box; } .xfm-contact-hero *, .xfm-contact-section *, .xfm-contact-help *, .xfm-contact-faq * { box-sizing: border-box; } /* ========================================================= CONTACT PAGE SHELL ONLY ========================================================= */ .xfm-contact-hero .xfm-shell, .xfm-contact-section .xfm-shell, .xfm-contact-help .xfm-shell, .xfm-contact-faq .xfm-shell { width: 100%; max-width: 1380px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } /* ========================================================= CONTACT PAGE KICKERS ONLY ========================================================= */ .xfm-contact-hero .xfm-kicker, .xfm-contact-section .xfm-kicker, .xfm-contact-help .xfm-kicker, .xfm-contact-faq .xfm-kicker { margin: 0 0 14px; color: #B08A2E; font-family: Poppins, sans-serif; font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; } /* ========================================================= HERO ========================================================= */ .xfm-contact-hero { padding: 82px 0 72px; background: linear-gradient( 180deg, #F7FAFC 0%, #FFFFFF 100% ); } .xfm-contact-hero-inner { max-width: 850px; } .xfm-contact-hero h1 { margin: 0; color: #132A3D; font-family: Poppins, sans-serif; font-size: clamp(42px, 5vw, 68px); line-height: 1.06; font-weight: 700; letter-spacing: -0.04em; } .xfm-contact-hero-text { max-width: 720px; margin: 22px 0 0; color: #647483; font-family: Poppins, sans-serif; font-size: 17px; line-height: 1.7; font-weight: 400; } /* ========================================================= MAIN CONTACT SECTION ========================================================= */ .xfm-contact-section { padding: 74px 0 82px; background: #FFFFFF; } .xfm-contact-section .xfm-section-heading { max-width: 760px; margin: 0 0 36px; } .xfm-contact-section .xfm-section-title { margin: 0; color: #132A3D; font-family: Poppins, sans-serif; font-size: clamp(30px, 3vw, 42px); line-height: 1.15; font-weight: 700; letter-spacing: -0.03em; } .xfm-contact-section .xfm-section-intro { margin: 16px 0 0; color: #647483; font-family: Poppins, sans-serif; font-size: 15px; line-height: 1.7; } /* ========================================================= CONTACT CARDS ========================================================= */ .xfm-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .xfm-contact-card { min-height: 315px; padding: 30px; display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF; border: 1px solid rgba(19, 42, 61, 0.10); border-radius: 22px; box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06); } .xfm-contact-card--primary { background: linear-gradient( 180deg, #FFFFFF 0%, #F8FBFA 100% ); border-color: rgba(40, 130, 90, 0.18); } .xfm-contact-icon { width: 46px; height: 46px; margin-bottom: 22px; display: flex; align-items: center; justify-content: center; background: #F3F6F8; border-radius: 14px; } .xfm-contact-icon svg { width: 23px; height: 23px; fill: none; stroke: #245E82; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .xfm-contact-card--primary .xfm-contact-icon { background: #F0F8F4; } .xfm-contact-card--primary .xfm-contact-icon svg { stroke: #287D59; } .xfm-contact-card h3 { margin: 0 0 10px; color: #132A3D; font-family: Poppins, sans-serif; font-size: 20px; line-height: 1.3; font-weight: 650; } .xfm-contact-card p { max-width: 470px; margin: 0 0 26px; color: #687785; font-family: Poppins, sans-serif; font-size: 14px; line-height: 1.65; } .xfm-contact-button { margin-top: auto; min-height: 44px; padding: 11px 18px; display: inline-flex; align-items: center; justify-content: center; color: #245E82; background: #F3F7FA; border: 1px solid rgba(36, 94, 130, 0.18); border-radius: 12px; font-family: Poppins, sans-serif; font-size: 13px; line-height: 1.2; font-weight: 600; text-decoration: none !important; transition: transform 150ms ease, background 150ms ease, border-color 150ms ease; } .xfm-contact-button--wa { color: #226846; background: #F0F8F4; border-color: rgba(40, 125, 89, 0.22); } .xfm-contact-button:hover { transform: translateY(-1px); background: #EEF4F8; } .xfm-contact-button--wa:hover { background: #E9F5EF; } /* ========================================================= HELP SECTION ========================================================= */ .xfm-contact-help { padding: 0 0 82px; background: #FFFFFF; } .xfm-contact-help-card { padding: 42px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 58px; background: #F7F9FB; border: 1px solid rgba(19, 42, 61, 0.08); border-radius: 24px; } .xfm-contact-help-content h2 { max-width: 500px; margin: 0; color: #132A3D; font-family: Poppins, sans-serif; font-size: clamp(28px, 3vw, 38px); line-height: 1.15; font-weight: 700; letter-spacing: -0.03em; } .xfm-contact-help-content > p:last-child { max-width: 500px; margin: 18px 0 0; color: #687785; font-family: Poppins, sans-serif; font-size: 14px; line-height: 1.7; } .xfm-contact-help-items { display: flex; flex-direction: column; gap: 0; } .xfm-contact-help-item { padding: 21px 0; display: flex; gap: 18px; border-bottom: 1px solid rgba(19, 42, 61, 0.09); } .xfm-contact-help-item:first-child { padding-top: 0; } .xfm-contact-help-item:last-child { padding-bottom: 0; border-bottom: 0; } .xfm-contact-help-item > span { flex: 0 0 auto; color: #B08A2E; font-family: Poppins, sans-serif; font-size: 11px; line-height: 1.5; font-weight: 700; letter-spacing: 0.08em; } .xfm-contact-help-item h3 { margin: 0 0 6px; color: #132A3D; font-family: Poppins, sans-serif; font-size: 16px; line-height: 1.35; font-weight: 650; } .xfm-contact-help-item p { margin: 0; color: #687785; font-family: Poppins, sans-serif; font-size: 13px; line-height: 1.6; } /* ========================================================= FAQ CTA ========================================================= */ .xfm-contact-faq { padding: 0 0 90px; background: #FFFFFF; } .xfm-contact-faq-card { padding: 42px; text-align: center; background: linear-gradient( 180deg, #142D40 0%, #0E2232 100% ); border: 1px solid rgba(176, 138, 46, 0.20); border-radius: 24px; box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10); } .xfm-contact-faq-card .xfm-kicker { color: #D3AE4E; } .xfm-contact-faq-card h2 { margin: 0; color: #FFFFFF; font-family: Poppins, sans-serif; font-size: clamp(28px, 3vw, 38px); line-height: 1.2; font-weight: 700; letter-spacing: -0.025em; } .xfm-contact-faq-card > p:not(.xfm-kicker) { max-width: 650px; margin: 16px auto 0; color: rgba(235, 242, 248, 0.76); font-family: Poppins, sans-serif; font-size: 14px; line-height: 1.7; } .xfm-contact-faq-button { margin-top: 26px; min-height: 46px; padding: 12px 20px; display: inline-flex; align-items: center; justify-content: center; color: #132A3D; background: #FFFFFF; border-radius: 12px; font-family: Poppins, sans-serif; font-size: 13px; line-height: 1.2; font-weight: 650; text-decoration: none !important; transition: transform 150ms ease, background 150ms ease; } .xfm-contact-faq-button:hover { transform: translateY(-1px); background: #F6F8FA; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .xfm-contact-hero { padding: 66px 0 60px; } .xfm-contact-help-card { grid-template-columns: 1fr; gap: 36px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .xfm-contact-hero .xfm-shell, .xfm-contact-section .xfm-shell, .xfm-contact-help .xfm-shell, .xfm-contact-faq .xfm-shell { padding-left: 18px; padding-right: 18px; } .xfm-contact-hero { padding: 48px 0 44px; } .xfm-contact-hero h1 { font-size: 38px; line-height: 1.08; } .xfm-contact-hero-text { margin-top: 16px; font-size: 14px; line-height: 1.65; } .xfm-contact-section { padding: 52px 0 58px; } .xfm-contact-section .xfm-section-heading { margin-bottom: 26px; } .xfm-contact-grid { grid-template-columns: 1fr; gap: 16px; } .xfm-contact-card { min-height: 0; padding: 24px; border-radius: 18px; } .xfm-contact-help { padding-bottom: 58px; } .xfm-contact-help-card { padding: 26px 22px; gap: 30px; border-radius: 20px; } .xfm-contact-faq { padding-bottom: 64px; } .xfm-contact-faq-card { padding: 30px 22px; border-radius: 20px; } } /* ========================================================= XPERIENCE FINDER MALTA — LEGAL / PRIVACY PAGE Fully scoped ========================================================= */ /* ========================================================= BASICS ========================================================= */ .xfm-legal-hero, .xfm-legal-content { width: 100%; box-sizing: border-box; } .xfm-legal-hero *, .xfm-legal-content * { box-sizing: border-box; } .xfm-legal-shell { width: 100%; max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } /* ========================================================= HERO ========================================================= */ .xfm-legal-hero { padding: 76px 0 66px; background: linear-gradient( 180deg, #F7FAFC 0%, #FFFFFF 100% ); } .xfm-legal-hero .xfm-legal-shell { max-width: 1180px; } .xfm-legal-kicker { margin: 0 0 13px; color: #B08A2E; font-family: Poppins, sans-serif; font-size: 11px; line-height: 1.3; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; } .xfm-legal-hero h1 { margin: 0; color: #132A3D; font-family: Poppins, sans-serif; font-size: clamp(42px, 5vw, 64px); line-height: 1.06; font-weight: 700; letter-spacing: -0.04em; } .xfm-legal-intro { max-width: 720px; margin: 20px 0 0; color: #647483; font-family: Poppins, sans-serif; font-size: 16px; line-height: 1.7; font-weight: 400; } .xfm-legal-updated { margin: 22px 0 0; color: #8A97A3; font-family: Poppins, sans-serif; font-size: 12px; line-height: 1.5; font-weight: 500; } /* ========================================================= CONTENT AREA ========================================================= */ .xfm-legal-content { padding: 18px 0 90px; background: #FFFFFF; } .xfm-legal-layout { width: 100%; max-width: 920px; margin: 0; display: flex; flex-direction: column; gap: 18px; } /* ========================================================= LEGAL CARDS ========================================================= */ .xfm-legal-card { padding: 32px 34px; background: #FFFFFF; border: 1px solid rgba(19, 42, 61, 0.09); border-radius: 20px; box-shadow: 0 8px 28px rgba(15, 23, 42, 0.045); } .xfm-legal-card h2 { margin: 0 0 18px; color: #132A3D; font-family: Poppins, sans-serif; font-size: 23px; line-height: 1.3; font-weight: 700; letter-spacing: -0.025em; } .xfm-legal-card h3 { margin: 28px 0 9px; color: #19384F; font-family: Poppins, sans-serif; font-size: 16px; line-height: 1.4; font-weight: 650; } .xfm-legal-card h3:first-child { margin-top: 0; } .xfm-legal-card p { margin: 0 0 15px; color: #61717F; font-family: Poppins, sans-serif; font-size: 13.5px; line-height: 1.75; font-weight: 400; } .xfm-legal-card p:last-child { margin-bottom: 0; } .xfm-legal-card ul { margin: 4px 0 18px; padding-left: 20px; color: #61717F; font-family: Poppins, sans-serif; font-size: 13.5px; line-height: 1.75; } .xfm-legal-card li { margin: 5px 0; } .xfm-legal-card a { color: #1F6697; font-weight: 600; text-decoration: none; } .xfm-legal-card a:hover { text-decoration: underline; } /* ========================================================= COMPANY DETAILS ========================================================= */ .xfm-legal-company { margin: 18px 0 22px; padding: 18px 20px; color: #526472; background: #F7F9FB; border: 1px solid rgba(19, 42, 61, 0.08); border-radius: 14px; font-family: Poppins, sans-serif; font-size: 13px; line-height: 1.7; } .xfm-legal-company strong { color: #132A3D; } /* ========================================================= RIGHTS ========================================================= */ .xfm-legal-rights h3 { padding-top: 4px; border-top: 1px solid transparent; } /* ========================================================= CONTACT CARD ========================================================= */ .xfm-legal-contact { background: linear-gradient( 180deg, #F8FAFC 0%, #F5F8FA 100% ); } .xfm-legal-contact .xfm-legal-kicker { margin-bottom: 11px; } .xfm-legal-contact-box { margin-top: 22px; padding: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: #FFFFFF; border: 1px solid rgba(19, 42, 61, 0.09); border-radius: 15px; font-family: Poppins, sans-serif; font-size: 13px; line-height: 1.65; } .xfm-legal-contact-box strong { color: #132A3D; font-size: 15px; } .xfm-legal-contact-box span { color: #657582; } .xfm-legal-contact-box a { color: #1F6697; font-size: 13px; font-weight: 650; text-decoration: none; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .xfm-legal-shell { padding-left: 18px; padding-right: 18px; } .xfm-legal-hero { padding: 48px 0 44px; } .xfm-legal-hero h1 { font-size: 38px; line-height: 1.08; } .xfm-legal-intro { margin-top: 16px; font-size: 14px; line-height: 1.65; } .xfm-legal-updated { margin-top: 18px; } .xfm-legal-content { padding: 8px 0 60px; } .xfm-legal-layout { gap: 14px; } .xfm-legal-card { padding: 24px 21px; border-radius: 17px; } .xfm-legal-card h2 { margin-bottom: 15px; font-size: 20px; } .xfm-legal-card h3 { margin-top: 24px; font-size: 15px; } .xfm-legal-card p, .xfm-legal-card ul { font-size: 13px; line-height: 1.7; } .xfm-legal-company, .xfm-legal-contact-box { padding: 17px; } } /* ========================================================= XPERIENCE FINDER MALTA — COOKIE POLICY Fully scoped ========================================================= */ /* ========================================================= BASICS ========================================================= */ .xfm-cookie-hero, .xfm-cookie-content { width: 100%; box-sizing: border-box; } .xfm-cookie-hero *, .xfm-cookie-content * { box-sizing: border-box; } .xfm-cookie-shell { width: 100%; max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } /* ========================================================= HERO ========================================================= */ .xfm-cookie-hero { padding: 76px 0 66px; background: linear-gradient( 180deg, #F7FAFC 0%, #FFFFFF 100% ); } .xfm-cookie-kicker { margin: 0 0 13px; color: #B08A2E; font-family: Poppins, sans-serif; font-size: 11px; line-height: 1.3; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; } .xfm-cookie-hero h1 { margin: 0; color: #132A3D; font-family: Poppins, sans-serif; font-size: clamp(42px, 5vw, 64px); line-height: 1.06; font-weight: 700; letter-spacing: -0.04em; } .xfm-cookie-intro { max-width: 720px; margin: 20px 0 0; color: #647483; font-family: Poppins, sans-serif; font-size: 16px; line-height: 1.7; font-weight: 400; } .xfm-cookie-updated { margin: 22px 0 0; color: #8A97A3; font-family: Poppins, sans-serif; font-size: 12px; line-height: 1.5; font-weight: 500; } /* ========================================================= CONTENT ========================================================= */ .xfm-cookie-content { padding: 18px 0 90px; background: #FFFFFF; } .xfm-cookie-layout { width: 100%; max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; } /* ========================================================= CARDS ========================================================= */ .xfm-cookie-card { padding: 32px 34px; background: #FFFFFF; border: 1px solid rgba(19, 42, 61, 0.09); border-radius: 20px; box-shadow: 0 8px 28px rgba(15, 23, 42, 0.045); } .xfm-cookie-card h2 { margin: 0 0 18px; color: #132A3D; font-family: Poppins, sans-serif; font-size: 23px; line-height: 1.3; font-weight: 700; letter-spacing: -0.025em; } .xfm-cookie-card p { margin: 0 0 15px; color: #61717F; font-family: Poppins, sans-serif; font-size: 13.5px; line-height: 1.75; font-weight: 400; } .xfm-cookie-card p:last-child { margin-bottom: 0; } .xfm-cookie-card a { color: #1F6697; font-weight: 600; text-decoration: none; } .xfm-cookie-card a:hover { text-decoration: underline; } /* ========================================================= TABLES ========================================================= */ .xfm-cookie-table-wrap { width: 100%; margin-top: 22px; overflow-x: auto; border: 1px solid rgba(19, 42, 61, 0.09); border-radius: 14px; } .xfm-cookie-table { width: 100%; min-width: 680px; border-collapse: collapse; font-family: Poppins, sans-serif; } .xfm-cookie-table th { padding: 13px 15px; color: #132A3D; background: #F5F8FA; border-bottom: 1px solid rgba(19, 42, 61, 0.10); font-size: 11px; line-height: 1.4; font-weight: 700; text-align: left; text-transform: uppercase; letter-spacing: 0.04em; } .xfm-cookie-table td { padding: 14px 15px; color: #61717F; border-bottom: 1px solid rgba(19, 42, 61, 0.07); font-size: 12px; line-height: 1.55; vertical-align: top; } .xfm-cookie-table tbody tr:last-child td { border-bottom: 0; } .xfm-cookie-table td:first-child { width: 25%; color: #19384F; font-weight: 600; overflow-wrap: anywhere; } .xfm-cookie-table td:nth-child(2) { width: 20%; white-space: normal; } /* ========================================================= NOTES ========================================================= */ .xfm-cookie-note { margin-top: 16px !important; color: #87939E !important; font-size: 11.5px !important; } /* ========================================================= MANAGE PREFERENCES ========================================================= */ .xfm-cookie-manage { background: linear-gradient( 180deg, #F8FAFC 0%, #F5F8FA 100% ); } .xfm-cookie-manage .xfm-cookie-kicker { margin-bottom: 11px; } .xfm-cookie-settings-button { margin: 8px 0 24px; min-height: 44px; padding: 11px 18px; display: inline-flex; align-items: center; justify-content: center; color: #173B55; background: #FFFFFF; border: 1px solid rgba(31, 102, 151, 0.20); border-radius: 12px; font-family: Poppins, sans-serif; font-size: 13px; line-height: 1.2; font-weight: 650; cursor: pointer; } .xfm-cookie-settings-button:hover { background: #F3F7FA; } .xfm-cookie-browser-links { margin: 10px 0 18px; padding-left: 20px; color: #61717F; font-family: Poppins, sans-serif; font-size: 13px; line-height: 1.75; } /* ========================================================= PRIVACY LINK ========================================================= */ .xfm-cookie-privacy { background: linear-gradient( 180deg, #FFFFFF 0%, #FAFBFC 100% ); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .xfm-cookie-shell { padding-left: 18px; padding-right: 18px; } .xfm-cookie-hero { padding: 48px 0 44px; } .xfm-cookie-hero h1 { font-size: 38px; line-height: 1.08; } .xfm-cookie-intro { margin-top: 16px; font-size: 14px; line-height: 1.65; } .xfm-cookie-updated { margin-top: 18px; } .xfm-cookie-content { padding: 8px 0 60px; } .xfm-cookie-layout { gap: 14px; } .xfm-cookie-card { padding: 24px 21px; border-radius: 17px; } .xfm-cookie-card h2 { margin-bottom: 15px; font-size: 20px; } .xfm-cookie-card p { font-size: 13px; line-height: 1.7; } .xfm-cookie-table-wrap { margin-top: 18px; } .xfm-cookie-table { min-width: 620px; } .xfm-cookie-table th, .xfm-cookie-table td { padding: 12px; } } /* ========================================================= XPERIENCE FINDER MALTA — FAQ PAGE ========================================================= */ /* ========================================================= BASICS ========================================================= */ .xfm-faq-hero, .xfm-faq-page { width: 100%; box-sizing: border-box; } .xfm-faq-hero *, .xfm-faq-page * { box-sizing: border-box; } .xfm-faq-shell { width: 100%; max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } /* ========================================================= HERO ========================================================= */ .xfm-faq-hero { padding: 76px 0 66px; background: linear-gradient( 180deg, #F7FAFC 0%, #FFFFFF 100% ); } .xfm-faq-kicker { margin: 0 0 13px; color: #B08A2E; font-family: Poppins, sans-serif; font-size: 11px; line-height: 1.3; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; } .xfm-faq-hero h1 { margin: 0; color: #132A3D; font-family: Poppins, sans-serif; font-size: clamp(42px, 5vw, 64px); line-height: 1.06; font-weight: 700; letter-spacing: -0.04em; } .xfm-faq-intro { max-width: 720px; margin: 20px 0 0; color: #647483; font-family: Poppins, sans-serif; font-size: 16px; line-height: 1.7; } /* ========================================================= PAGE ========================================================= */ .xfm-faq-page { padding: 18px 0 90px; background: #FFFFFF; } .xfm-faq-layout { width: 100%; max-width: 920px; margin: 0 auto; } /* ========================================================= GROUP ========================================================= */ .xfm-faq-group { margin-bottom: 34px; } .xfm-faq-group h2 { margin: 0 0 12px; color: #132A3D; font-family: Poppins, sans-serif; font-size: 20px; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em; } /* ========================================================= ACCORDION ========================================================= */ .xfm-faq-list { overflow: hidden; background: #FFFFFF; border: 1px solid rgba(19, 42, 61, 0.11); border-radius: 16px; } .xfm-faq-list details { margin: 0; border-bottom: 1px solid rgba(19, 42, 61, 0.09); } .xfm-faq-list details:last-child { border-bottom: 0; } .xfm-faq-list summary { position: relative; padding: 16px 48px 16px 18px; color: #132A3D; font-family: Poppins, sans-serif; font-size: 14px; line-height: 1.45; font-weight: 600; cursor: pointer; list-style: none; } .xfm-faq-list summary::-webkit-details-marker { display: none; } .xfm-faq-list summary::after { content: "+"; position: absolute; top: 50%; right: 18px; transform: translateY(-50%); color: #557081; font-family: Arial, sans-serif; font-size: 20px; line-height: 1; font-weight: 400; } .xfm-faq-list details[open] summary::after { content: "−"; } .xfm-faq-list details[open] summary { color: #173B55; } .xfm-faq-answer { padding: 0 48px 16px 18px; } .xfm-faq-answer p { margin: 0; color: #61717F; font-family: Poppins, sans-serif; font-size: 12.5px; line-height: 1.7; } .xfm-faq-answer a { color: #1F6697; font-weight: 600; text-decoration: none; } .xfm-faq-answer a:hover { text-decoration: underline; } /* ========================================================= CONTACT CTA ========================================================= */ .xfm-faq-contact-card { margin-top: 42px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #F5F7F8; border-radius: 14px; } .xfm-faq-contact-card strong { display: block; margin-bottom: 3px; color: #132A3D; font-family: Poppins, sans-serif; font-size: 13px; font-weight: 700; } .xfm-faq-contact-card p { margin: 0; color: #687785; font-family: Poppins, sans-serif; font-size: 11px; line-height: 1.5; } .xfm-faq-contact-card > a { flex: 0 0 auto; min-height: 38px; padding: 9px 16px; display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; background: #245E82; border-radius: 10px; font-family: Poppins, sans-serif; font-size: 11px; line-height: 1.2; font-weight: 650; text-decoration: none; } /* ========================================================= EXPLORE CTA ========================================================= */ .xfm-faq-explore { margin-top: 26px; text-align: center; } .xfm-faq-explore a { min-height: 42px; padding: 10px 20px; display: inline-flex; align-items: center; justify-content: center; color: #132A3D; background: linear-gradient( 180deg, #F7D978 0%, #EEC452 100% ); border: 1px solid rgba(176, 138, 46, 0.35); border-radius: 10px; font-family: Poppins, sans-serif; font-size: 12px; line-height: 1.2; font-weight: 650; text-decoration: none; box-shadow: 0 5px 14px rgba(176, 138, 46, 0.12); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .xfm-faq-shell { padding-left: 18px; padding-right: 18px; } .xfm-faq-hero { padding: 48px 0 44px; } .xfm-faq-hero h1 { font-size: 38px; line-height: 1.08; } .xfm-faq-intro { margin-top: 16px; font-size: 14px; line-height: 1.65; } .xfm-faq-page { padding: 8px 0 60px; } .xfm-faq-group { margin-bottom: 28px; } .xfm-faq-group h2 { font-size: 18px; } .xfm-faq-list { border-radius: 14px; } .xfm-faq-list summary { padding: 15px 42px 15px 15px; font-size: 13px; } .xfm-faq-list summary::after { right: 15px; } .xfm-faq-answer { padding: 0 42px 15px 15px; } .xfm-faq-answer p { font-size: 12px; } .xfm-faq-contact-card { margin-top: 34px; padding: 18px; flex-direction: column; align-items: flex-start; gap: 14px; } .xfm-faq-contact-card > a { width: 100%; } } /* ========================================================= XPERIENCE FINDER MALTA — TERMS & CONDITIONS Fully scoped ========================================================= */ /* ========================================================= BASICS ========================================================= */ .xfm-terms-hero, .xfm-terms-content { width: 100%; box-sizing: border-box; } .xfm-terms-hero *, .xfm-terms-content * { box-sizing: border-box; } .xfm-terms-shell { width: 100%; max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } /* ========================================================= HERO ========================================================= */ .xfm-terms-hero { padding: 76px 0 66px; background: linear-gradient( 180deg, #F7FAFC 0%, #FFFFFF 100% ); } .xfm-terms-kicker { margin: 0 0 13px; color: #B08A2E; font-family: Poppins, sans-serif; font-size: 11px; line-height: 1.3; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; } .xfm-terms-hero h1 { margin: 0; color: #132A3D; font-family: Poppins, sans-serif; font-size: clamp(42px, 5vw, 64px); line-height: 1.06; font-weight: 700; letter-spacing: -0.04em; } .xfm-terms-intro { max-width: 720px; margin: 20px 0 0; color: #647483; font-family: Poppins, sans-serif; font-size: 16px; line-height: 1.7; } .xfm-terms-updated { margin: 22px 0 0; color: #8A97A3; font-family: Poppins, sans-serif; font-size: 12px; line-height: 1.5; font-weight: 500; } /* ========================================================= CONTENT ========================================================= */ .xfm-terms-content { padding: 18px 0 90px; background: #FFFFFF; } .xfm-terms-layout { width: 100%; max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; } /* ========================================================= CARDS ========================================================= */ .xfm-terms-card { padding: 32px 34px; background: #FFFFFF; border: 1px solid rgba(19, 42, 61, 0.09); border-radius: 20px; box-shadow: 0 8px 28px rgba(15, 23, 42, 0.045); } .xfm-terms-card h2 { margin: 0 0 18px; color: #132A3D; font-family: Poppins, sans-serif; font-size: 23px; line-height: 1.3; font-weight: 700; letter-spacing: -0.025em; } .xfm-terms-card h3 { margin: 28px 0 9px; color: #19384F; font-family: Poppins, sans-serif; font-size: 16px; line-height: 1.4; font-weight: 650; } .xfm-terms-card p { margin: 0 0 15px; color: #61717F; font-family: Poppins, sans-serif; font-size: 13.5px; line-height: 1.75; font-weight: 400; } .xfm-terms-card p:last-child { margin-bottom: 0; } .xfm-terms-card ul { margin: 4px 0 18px; padding-left: 20px; color: #61717F; font-family: Poppins, sans-serif; font-size: 13.5px; line-height: 1.75; } .xfm-terms-card li { margin: 5px 0; } .xfm-terms-card a { color: #1F6697; font-weight: 600; text-decoration: none; } .xfm-terms-card a:hover { text-decoration: underline; } /* ========================================================= COMPANY INFORMATION ========================================================= */ .xfm-terms-company { margin: 18px 0 22px; padding: 18px 20px; color: #526472; background: #F7F9FB; border: 1px solid rgba(19, 42, 61, 0.08); border-radius: 14px; font-family: Poppins, sans-serif; font-size: 13px; line-height: 1.7; } .xfm-terms-company strong { color: #132A3D; } /* ========================================================= CONTACT ========================================================= */ .xfm-terms-contact { background: linear-gradient( 180deg, #F8FAFC 0%, #F5F8FA 100% ); } .xfm-terms-contact .xfm-terms-kicker { margin-bottom: 11px; } .xfm-terms-contact-box { margin-top: 22px; padding: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: #FFFFFF; border: 1px solid rgba(19, 42, 61, 0.09); border-radius: 15px; font-family: Poppins, sans-serif; font-size: 13px; line-height: 1.65; } .xfm-terms-contact-box strong { color: #132A3D; font-size: 15px; } .xfm-terms-contact-box span { color: #657582; } .xfm-terms-contact-box a { color: #1F6697; font-size: 13px; font-weight: 650; text-decoration: none; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .xfm-terms-shell { padding-left: 18px; padding-right: 18px; } .xfm-terms-hero { padding: 48px 0 44px; } .xfm-terms-hero h1 { font-size: 38px; line-height: 1.08; } .xfm-terms-intro { margin-top: 16px; font-size: 14px; line-height: 1.65; } .xfm-terms-updated { margin-top: 18px; } .xfm-terms-content { padding: 8px 0 60px; } .xfm-terms-layout { gap: 14px; } .xfm-terms-card { padding: 24px 21px; border-radius: 17px; } .xfm-terms-card h2 { margin-bottom: 15px; font-size: 20px; } .xfm-terms-card h3 { margin-top: 24px; font-size: 15px; } .xfm-terms-card p, .xfm-terms-card ul { font-size: 13px; line-height: 1.7; } .xfm-terms-company, .xfm-terms-contact-box { padding: 17px; } } /* ========================================================= XPERIENCE FINDER MALTA — GLOBAL FILTER TABS Shared styling for all pages using .xfm-tabs-* ========================================================= */ /* ========================================================= TABS AREA ========================================================= */ .xfm-tabs-area { width: 100%; max-width: 1380px; margin: 0 auto; padding: 24px 18px 20px; background: #FFFFFF; box-sizing: border-box; } /* ========================================================= TABS WRAPPER ========================================================= */ .xfm-tabs-wrapper { position: relative; width: 100%; margin: 0 0 16px; padding: 0; overflow: visible !important; } /* ========================================================= HORIZONTAL TABS ROW ========================================================= */ .xfm-custom-tabs { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 12px; width: 100%; padding: 6px 44px 12px 2px; overflow-x: auto; overflow-y: visible; scroll-padding-left: 2px; scroll-padding-right: 44px; -webkit-overflow-scrolling: touch; scrollbar-width: none; box-sizing: border-box; } .xfm-custom-tabs::-webkit-scrollbar { display: none; } /* ========================================================= TAB CARD ========================================================= */ .xfm-tab { position: relative; flex: 0 0 132px; width: 132px; min-height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px; background: #FCFCFD; border: 1px solid rgba(15, 23, 42, 0.10); border-radius: 18px; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08); color: #0F172A !important; font-size: 13px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; text-align: center; text-decoration: none !important; white-space: normal; overflow-wrap: break-word; box-sizing: border-box; -webkit-tap-highlight-color: transparent; transition: background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } /* Hover only on devices that actually support hover */ @media (hover: hover) { .xfm-tab:not(.active):not(.xfm-pending):hover { transform: translateY(-1px); border-color: rgba(49, 93, 130, 0.20); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10); } } /* Keyboard accessibility */ .xfm-tab:focus-visible { outline: 2px solid #315D82; outline-offset: 3px; } /* ========================================================= TAB ICON ========================================================= */ .xfm-tab .xfm-tab-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #315D82; line-height: 1; } .xfm-tab .xfm-tab-icon svg { display: block; width: 22px; height: 22px; } /* ========================================================= BEST SELLERS ========================================================= */ .xfm-tab.xfm-best-tab { background: linear-gradient( 180deg, #F1FBF4 0%, #E3F7E8 100% ); border-color: rgba(70, 185, 106, 0.30); color: #2F9E55 !important; } .xfm-tab.xfm-best-tab .xfm-tab-icon { color: #2F9E55; } /* ========================================================= 10% OFF DEALS ========================================================= */ .xfm-tab.xfm-hot-tab { background: linear-gradient( 180deg, #FFF8DB 0%, #FFF3BE 100% ); border-color: rgba(226, 163, 0, 0.24); color: #B7791F !important; } .xfm-tab.xfm-hot-tab .xfm-tab-icon { color: #D69E2E; } /* ========================================================= ACTIVE / PENDING STATE ========================================================= */ .xfm-tab.active, .xfm-tab.xfm-pending { background: #E9F0F7 !important; border-color: #B9C9DA !important; color: #17324D !important; box-shadow: 0 4px 10px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.65); transform: translateY(-1px); } .xfm-tab.active *, .xfm-tab.xfm-pending * { color: #17324D !important; } .xfm-tab.active .xfm-tab-icon, .xfm-tab.xfm-pending .xfm-tab-icon { color: #1F5F99 !important; } /* ========================================================= RIGHT SCROLL ARROW ========================================================= */ .xfm-tabs-arrow { position: absolute; top: 50%; right: -2px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; transform: translateY(-50%); background: rgba(255, 255, 255, 0.97); border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 999px; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14); color: #315D82; font-size: 22px; line-height: 1; font-weight: 800; cursor: pointer; z-index: 20; transition: opacity 180ms ease, visibility 180ms ease, box-shadow 180ms ease, transform 180ms ease; } @media (hover: hover) { .xfm-tabs-arrow:hover { box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18); } } .xfm-tabs-arrow:focus-visible { outline: 2px solid #315D82; outline-offset: 3px; } .xfm-tabs-arrow.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* ========================================================= SCROLL PROGRESS Hidden on desktop ========================================================= */ .xfm-tabs-progress { display: none; } /* ========================================================= AVAILABLE EXPERIENCES KICKER ========================================================= */ .xfm-tabs-kicker { margin: 14px 2px 20px; color: #B08A2E; font-size: 12px; line-height: 1.1; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; } /* ========================================================= EXPERIENCE WIDGET LOADING ========================================================= */ .experience-main-container { position: relative; } .experience-main-container.xfm-widget-loading::before { content: ""; position: absolute; inset: 0; z-index: 50; background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .experience-main-container.xfm-widget-loading::after { content: ""; position: absolute; top: 80px; left: 50%; width: 38px; height: 38px; margin-left: -19px; border: 4px solid rgba(49, 93, 130, 0.18); border-top-color: #315D82; border-radius: 50%; animation: xfSpin 0.7s linear infinite; z-index: 51; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .xfm-tabs-area { max-width: none; padding: 10px max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)); } /* Tabs row */ .xfm-custom-tabs { gap: 10px; padding: 4px 44px 6px 2px; } /* Compact horizontal tab */ .xfm-tab { flex: 0 0 auto; width: auto; min-width: max-content; min-height: 52px; flex-direction: row; gap: 8px; padding: 0 14px; border-radius: 14px; font-size: 14px; line-height: 1; white-space: nowrap; overflow-wrap: normal; word-break: keep-all; } /* Mobile icon */ .xfm-tab .xfm-tab-icon svg { width: 18px; height: 18px; } /* Arrow */ .xfm-tabs-arrow { right: -4px; width: 38px; height: 38px; font-size: 21px; } /* Mobile scroll progress */ .xfm-tabs-progress { position: relative; display: block; width: calc(100% - 16px); height: 2px; margin: 2px 8px 14px; overflow: hidden; background: rgba(15, 23, 42, 0.06); border-radius: 999px; } .xfm-tabs-progress span { position: absolute; top: 0; left: 0; display: block; width: 25%; height: 100%; background: rgba(49, 93, 130, 0.42); border-radius: inherit; transition: left 80ms linear, width 180ms ease; } /* Mobile kicker */ .xfm-tabs-kicker { margin: 0 8px; color: #B08A2E; font-size: 12px; line-height: 1.2; } } /* END MOBILE */ /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .xfm-tab, .xfm-tabs-arrow, .xfm-tabs-progress span { transition: none !important; } .experience-main-container.xfm-widget-loading::after { animation: none !important; } } /* ========================================================= LOADING ANIMATION ========================================================= */ @keyframes xfSpin { to { transform: rotate(360deg); } } /* ========================================================= XPERIENCEFINDER MALTA — BOTTOM BREADCRUMB ========================================================= */ .xfm-bottom-breadcrumb { width: 100%; margin: 0; padding: 0; background: #FFFFFF; } .xfm-bottom-breadcrumb .aioseo-breadcrumbs { width: 100%; max-width: 1380px; margin: 0 auto; padding: 18px 24px 20px; color: #7A8792; font-family: Poppins, sans-serif; font-size: 11.5px; line-height: 1.5; font-weight: 500; border-top: 1px solid rgba(15, 23, 42, 0.07); box-sizing: border-box; } .xfm-bottom-breadcrumb .aioseo-breadcrumbs a { color: #526B7C; text-decoration: none; } .xfm-bottom-breadcrumb .aioseo-breadcrumbs a:hover { color: #2563EB; } /* MOBILE */ @media (max-width: 767px) { .xfm-bottom-breadcrumb .aioseo-breadcrumbs { padding: 15px 16px 17px; font-size: 10.5px; } } /* ========================================================= XPERIENCEFINDER MALTA — LANGUAGE SWITCHER FINAL CLEAN VERSION ========================================================= */ .xfm-language-switcher { width: auto !important; flex: 0 0 auto !important; } /* Main menu wrapper */ .xfm-language-switcher .elementor-nav-menu { margin: 0 !important; } /* Current language button */ .xfm-language-switcher .elementor-nav-menu > li > a { min-height: 38px !important; padding: 0 13px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; background: #FFFFFF !important; border: 1px solid rgba(15, 23, 42, 0.10) !important; border-radius: 10px !important; box-shadow: none !important; color: #0F172A !important; font-size: 12px !important; line-height: 1 !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap !important; transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important; } /* Hover */ .xfm-language-switcher .elementor-nav-menu > li > a:hover, .xfm-language-switcher .elementor-nav-menu > li:hover > a { background: #F8FAFC !important; border-color: rgba(49, 93, 130, 0.22) !important; color: #0F172A !important; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.07) !important; } /* Remove Elementor underline / pointer */ .xfm-language-switcher .elementor-item::after, .xfm-language-switcher .elementor-item::before { display: none !important; } /* ========================================================= DROPDOWN ========================================================= */ .xfm-language-switcher .sub-menu { min-width: 120px !important; margin-top: 8px !important; padding: 6px !important; background: #FFFFFF !important; border: 1px solid rgba(15, 23, 42, 0.09) !important; border-radius: 12px !important; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12) !important; overflow: hidden !important; } /* Dropdown items */ .xfm-language-switcher .sub-menu li a { min-height: 34px !important; padding: 0 12px !important; display: flex !important; align-items: center !important; background: transparent !important; border-radius: 8px !important; color: #334155 !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 500 !important; text-decoration: none !important; white-space: nowrap !important; } /* Dropdown hover */ .xfm-language-switcher .sub-menu li a:hover { background: #F3F6F9 !important; color: #315D82 !important; } /* Current language in dropdown */ .xfm-language-switcher .sub-menu .current-lang > a, .xfm-language-switcher .sub-menu .current-menu-item > a { background: rgba(49, 93, 130, 0.08) !important; color: #315D82 !important; font-weight: 600 !important; } /* ========================================================= DROPDOWN ARROW ========================================================= */ .xfm-language-switcher .sub-arrow { display: inline-flex !important; margin-left: 5px !important; color: #64748B !important; font-size: 9px !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .xfm-language-switcher .elementor-nav-menu > li > a { min-height: 36px !important; padding: 0 11px !important; font-size: 11.5px !important; } .xfm-language-switcher .sub-menu { min-width: 118px !important; } }/* End custom CSS */