/* ========================================================================== Krakow Insiders — visual system replicated from the Tourvia Webflow template (palette, typography, components, section patterns). ========================================================================== */ /* Logo serif — used only for the "KRAKOW" wordmark in the header brand. */ @font-face { font-family: "Cinzel"; src: url("../fonts/cinzel.ttf") format("truetype"); font-weight: 400 700; font-style: normal; font-display: swap; } :root { /* Krakow Insiders brand palette — espresso on a warm canvas */ --brand: #1e1711; /* espresso accent */ --brand-strong: #3a2c1d; /* warm espresso — hover / pressed */ --gold: #d19b2f; /* logo gold — mark + "INSIDERS" wordmark */ --ink: #1e1711; /* espresso (matches brand) */ --canvas: #f8f8f8; /* page background */ --bg-01: #efe7df; /* warm beige card tint */ --bg-02: #ffffff0d; --bg-03: #ffffff1a; --bg-04: #1e17111a; --white: #ffffff; --text-01: #070707; --text-02: #4d4d4d; --text-03: #fffc; --border-01: #ffffff40; --border-02: #07070740; --border-03: #67676726; --border-04: #1e171133; /* Typography */ --font-primary: "Inter", Arial, sans-serif; --font-secondary: "Inter Tight", "Inter", Arial, sans-serif; --h1-size: clamp(2.5rem, 5vw, 4.5rem); --h3-size: clamp(1.75rem, 3.4vw, 3rem); --h4-size: clamp(1.5rem, 2.8vw, 2.5rem); --h5-size: clamp(1.25rem, 1.8vw, 1.5rem); --h6-size: 1.125rem; --p1-size: 1rem; --p2-size: 0.875rem; --p3-size: 0.8125rem; --radius-card: 16px; --radius-inner: 8px; --radius-pill: 100px; --ease-premium: cubic-bezier(0.16, 1, 0.3, 1); --header-h: 5.5rem; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; } body { margin: 0; font-family: var(--font-primary); font-weight: 400; font-size: var(--p1-size); line-height: 1.55; color: var(--text-01); background: var(--canvas); /* clip (not hidden) contains horizontal overflow without turning into a scroll container — the latter would break position:sticky (mobile card decks) */ overflow-x: clip; -webkit-font-smoothing: antialiased; } img, video, iframe { max-width: 100%; display: block; } img { height: auto; } a { color: inherit; } button { font: inherit; cursor: pointer; } h1, h2, h3, h4, p, figure, blockquote { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; } /* ---------- Layout primitives (Tourvia container system) ---------- */ /* Full-width sections: the visible side gutter is exactly the 90px padding */ .container { width: 100%; margin-inline: auto; } .page-vertical-padding { padding: 50px 90px; } .main-wrapper { position: relative; } /* ---------- Typography helpers ---------- */ .heading-style-h1 { font-family: var(--font-secondary); font-size: var(--h1-size); line-height: 1.1; font-weight: 600; } .heading-style-h3 { font-family: var(--font-secondary); font-size: var(--h3-size); line-height: 1.14; font-weight: 500; } .heading-style-h4 { font-family: var(--font-secondary); font-size: var(--h4-size); line-height: 1.25; font-weight: 500; } .heading-style-h5 { font-family: var(--font-secondary); font-size: var(--h5-size); line-height: 1.25; font-weight: 500; } .heading-style-h6 { font-family: var(--font-secondary); font-size: var(--h6-size); line-height: 1.35; font-weight: 500; } .paragraph-p2 { font-size: var(--p2-size); line-height: 1.5; } .paragraph-p3 { font-size: var(--p3-size); line-height: 1.5; } .icon-24px { width: 24px; height: 24px; flex: none; } .icon-32px { width: 32px; height: 32px; flex: none; } /* ---------- Section caption (Tourvia signature: line + label pill) ---------- */ .section-caption { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--border-02); border-radius: var(--radius-pill); font-size: var(--p2-size); line-height: 1.5; text-transform: capitalize; } .section-caption h2 { font-size: var(--p2-size); font-weight: 400; line-height: 1.5; font-family: var(--font-primary); } .section-caption-line { display: inline-block; width: 18px; height: 1px; background: var(--text-01); } .section-top-block { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(2.5rem, 4.5vw, 4rem); } .section-title-wrapper { max-width: 46rem; } .section-title-block { margin-top: 18px; } .section-intro { margin-top: 18px; color: var(--text-02); max-width: 60ch; } .section-cta-block { flex: none; max-width: 37rem; } .section-lead { color: var(--text-02); font-size: var(--p1-size); line-height: 1.6; max-width: 36rem; } /* ---------- Buttons (Tourvia system) ---------- */ .button-primary, .button-secondary { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 6px 6px 20px; border-radius: var(--radius-pill); font-family: var(--font-primary); text-decoration: none; transition: background-color 0.35s var(--ease-premium), border-color 0.35s var(--ease-premium), color 0.35s var(--ease-premium), transform 0.25s var(--ease-premium); } /* Standalone (auto-width) buttons: reserve room so the arrow circle rides the right edge with an intentional gap, matching the header button treatment */ .button-primary:not(.button-block):not(.button-compact), .button-secondary:not(.button-block):not(.button-compact) { min-width: 15rem; } .button-primary { border: 1px solid var(--border-02); background: var(--white); color: var(--text-01); } .button-secondary { border: 1px solid var(--ink); background: var(--ink); color: var(--white); } .button-primary:active, .button-secondary:active, .button-tertiary:active { transform: scale(0.98); } .button-text { font-size: 1rem; line-height: 1.5; text-transform: capitalize; font-weight: 400; } .primary-button-icon-block, .secondary-button-icon-block { display: flex; justify-content: center; align-items: center; width: 46px; height: 46px; border-radius: var(--radius-pill); flex: none; transition: background-color 0.35s var(--ease-premium); } .primary-button-icon-block { background: var(--brand); } .secondary-button-icon-block { background: var(--white); } .button-icon-wrapper { display: flex; justify-content: flex-end; align-items: center; width: 16px; height: 16px; overflow: hidden; transform: rotate(-45deg); } .button-icon { flex: none; width: 16px; height: 13px; transition: transform 0.45s var(--ease-premium); } /* Hover: circle inverts, arrows slide diagonally to reveal the paired color */ .button-primary:hover .primary-button-icon-block { background: var(--white); box-shadow: inset 0 0 0 1px var(--border-04); } .button-primary:hover .button-icon { transform: translateX(16px); } .button-primary:hover { border-color: var(--brand); } .button-secondary:hover .secondary-button-icon-block { background: var(--brand); } .button-secondary:hover .button-icon { transform: translateX(16px); } .button-secondary:hover { background: #33291f; border-color: #33291f; } /* Outline (hero secondary CTA over imagery) */ .button-outline { display: inline-flex; align-items: center; padding: 15px 28px; border: 1px solid var(--border-01); border-radius: var(--radius-pill); background: var(--bg-02); color: var(--white); text-decoration: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color 0.35s var(--ease-premium), border-color 0.35s var(--ease-premium); } .button-outline:hover { background: var(--bg-03); border-color: var(--white); } /* Tertiary (double-text roll on hover) */ .button-tertiary { display: inline-flex; justify-content: center; padding: 16px 20px; border: none; border-radius: var(--radius-pill); background: var(--bg-04); color: var(--brand-strong); font-size: 1rem; font-weight: 500; text-transform: capitalize; } .button-tertiary-text-wrapper { display: flex; flex-direction: column; height: 24px; overflow: hidden; } .button-tertiary-text { display: block; line-height: 24px; transition: transform 0.45s var(--ease-premium); } .button-tertiary:hover .button-tertiary-text { transform: translateY(-24px); } /* Push the icon circle hard to the right edge (text left, arrow-circle right) */ .button-arrow-right { justify-content: space-between; min-width: 15rem; } .button-compact { padding: 4px 4px 4px 16px; } .button-compact .button-text { font-size: var(--p2-size); } .button-compact .primary-button-icon-block, .button-compact .secondary-button-icon-block { width: 38px; height: 38px; } .button-block { width: 100%; justify-content: space-between; } .button-block.button-compact { justify-content: center; } /* ---------- Header / Navigation ---------- */ .navbar { position: fixed; inset: 0 0 auto; z-index: 100; padding-block: 20px; transition: transform 0.45s var(--ease-premium), background-color 0.35s var(--ease-premium), padding 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium); } .navbar.is-hidden { transform: translateY(-100%); } .navbar.is-scrolled { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding-block: 12px; box-shadow: 0 10px 30px -18px rgba(7, 7, 7, 0.28); } .nav-container { margin-inline: auto; padding-inline: 90px; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; } .nav-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-secondary); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; color: var(--white); transition: color 0.35s var(--ease-premium); } /* Full brand lockup (K mark + KRAKOW / INSIDERS wordmark + tagline) as one asset. Two variants are stacked and cross-faded: a light lockup for the transparent hero header, a dark lockup once the header turns solid white on scroll. */ .nav-brand__logo-wrap { position: relative; display: inline-flex; flex: none; } .nav-brand__logo { display: block; height: 76px; width: auto; transition: opacity 0.3s var(--ease-premium), filter 0.3s var(--ease-premium); } /* Light lockup: soft lift so the gold mark reads over the bright hero imagery */ .nav-brand__logo--light { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.28)); } /* Dark lockup: stacked over the light one, revealed once the header is solid */ .nav-brand__logo--dark { position: absolute; inset: 0; opacity: 0; } .navbar.is-scrolled .nav-brand__logo--light { opacity: 0; } .navbar.is-scrolled .nav-brand__logo--dark { opacity: 1; } /* Burger menu open: the white overlay sits under the header, so switch the lockup to the dark variant (white KRAKOW / tagline recoloured to graphite) so it stays readable over the light menu */ body.menu-open .navbar .nav-brand__logo--light { opacity: 0; } body.menu-open .navbar .nav-brand__logo--dark { opacity: 1; } .navbar.is-scrolled .nav-brand { color: var(--text-01); } /* Template pattern: links live inside a translucent bordered pill */ .nav-menu { display: flex; align-items: center; gap: 2px; padding: 8px; border: 1px solid var(--border-01); border-radius: var(--radius-pill); transition: border-color 0.35s var(--ease-premium); } .nav-link { padding: 10px 16px; border-radius: var(--radius-pill); font-size: var(--p2-size); line-height: 1.5; text-decoration: none; color: var(--white); transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; } .nav-link:hover { background: var(--white); color: var(--brand); } .navbar.is-scrolled .nav-menu { border-color: var(--border-02); } .navbar.is-scrolled .nav-link { color: var(--text-01); } .navbar.is-scrolled .nav-link:hover { background: var(--bg-01); color: var(--brand); } .nav-actions { display: flex; align-items: center; gap: 0.9rem; } /* Language switcher */ .lang-switch { display: inline-flex; border: 1px solid var(--border-01); border-radius: var(--radius-pill); padding: 3px; transition: border-color 0.35s var(--ease-premium); } .navbar.is-scrolled .lang-switch { border-color: var(--border-03); } .lang-switch__btn { border: none; background: none; color: var(--text-03); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; padding: 5px 11px; border-radius: var(--radius-pill); transition: background-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium); } .navbar.is-scrolled .lang-switch__btn { color: var(--text-02); } .lang-switch__btn.is-active { background: var(--brand); color: var(--white); } .navbar.is-scrolled .lang-switch__btn.is-active { color: var(--white); } /* Burger */ .burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: none; border: none; } .burger span { display: block; height: 2px; width: 100%; border-radius: 2px; background: var(--white); transition: transform 0.4s var(--ease-premium), opacity 0.3s var(--ease-premium), background-color 0.35s var(--ease-premium); } .navbar.is-scrolled .burger span, .burger.is-open span { background: var(--text-01); } .burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger.is-open span:nth-child(2) { opacity: 0; } .burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- Mobile menu ---------- */ .mobile-menu { position: fixed; inset: 0; z-index: 90; background: var(--white); padding: calc(var(--header-h) + 1rem) clamp(1.25rem, 6vw, 2.5rem) 2.5rem; display: flex; flex-direction: column; gap: 1.75rem; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-1.5rem); transition: opacity 0.45s var(--ease-premium), transform 0.45s var(--ease-premium), visibility 0s linear 0.45s; } .mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; } .mobile-menu__nav { display: flex; flex-direction: column; } .mobile-menu__nav a { font-family: var(--font-secondary); font-size: 1.625rem; font-weight: 500; text-decoration: none; padding: 0.7rem 0; border-bottom: 1px solid var(--border-03); opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease-premium), transform 0.5s var(--ease-premium); transition-delay: calc(var(--index, 0) * 55ms); } .mobile-menu.is-open .mobile-menu__nav a { opacity: 1; transform: translateY(0); } .mobile-menu__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .mobile-menu .lang-switch { border-color: var(--border-03); } .mobile-menu .lang-switch__btn { color: var(--text-02); } .mobile-menu .lang-switch__btn.is-active { color: var(--white); } .mobile-menu__social { display: flex; gap: 1.1rem; } .mobile-menu__social a { font-size: var(--p2-size); font-weight: 600; color: var(--brand); text-decoration: none; } .mobile-menu__contacts { display: flex; flex-direction: column; gap: 0.4rem; margin-top: auto; } .mobile-menu__contacts a { text-decoration: none; color: var(--text-02); font-size: 0.9375rem; } /* ---------- Hero (Tourvia layered composition) ---------- */ .hero { position: relative; } .hero-content-wrapper { display: flex; flex-flow: column; justify-content: flex-end; width: 100%; min-height: 100dvh; position: relative; overflow: hidden; } .hero-bg-sky-image-block { z-index: 1; position: absolute; inset: 0; background-image: linear-gradient(0deg, #0000 71%, #00000073), url("../images/hero-krakow.jpg"); background-position: 0 0, 50% 30%; background-repeat: repeat, no-repeat; background-size: auto, cover; } .hero-title-block { z-index: 2; position: absolute; inset: 11vh 0 auto; display: flex; justify-content: center; align-items: center; text-transform: uppercase; transform-origin: 50% 100%; } .hero-giant-title { font-family: var(--font-secondary); font-weight: 600; font-size: clamp(2.75rem, 10.3vw, 9.75rem); line-height: 1.1; letter-spacing: 0.02em; color: var(--text-03); white-space: nowrap; } .hero-giant-title .hero-title-char { display: inline-block; } /* Foreground castle cutout — identical geometry to the sky layer, so it overlays it pixel-perfectly; the giant title (z2) hides behind it (z3) */ .hero-castle-image { z-index: 3; position: absolute; inset: 0; background-image: url("../images/hero-castle.webp"); background-position: 50% 30%; background-repeat: no-repeat; background-size: cover; } .hero-mountain-image-gradient { z-index: 4; position: absolute; inset: auto 0 0; height: 60%; background-image: linear-gradient(#0000 10%, #000000bf 72.68%), linear-gradient(#0000 27%, #000000d9 78%); } .hero-content-block { z-index: 5; position: relative; width: 100%; margin-inline: auto; padding: 0 90px clamp(2.5rem, 5vh, 3.75rem); display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; } .hero-content-left-block { display: flex; flex-flow: column; align-items: flex-start; max-width: 900px; } .hero-caption-block { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--border-01); border-radius: var(--radius-pill); color: var(--white); font-size: var(--p2-size); } .hero-caption-line { display: inline-block; width: 18px; height: 1px; background: var(--white); flex: none; } .hero-description-block { margin-top: 18px; color: var(--white); text-transform: capitalize; } .hero-description-block h1 { font-family: var(--font-secondary); font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.12; font-weight: 500; } /* The Polish headline is short enough to sit on a single line from tablet up */ @media (min-width: 768px) { html[lang="pl"] .hero-description-block h1 { white-space: nowrap; font-size: clamp(2rem, 3.4vw, 3.25rem); } } .hero-subtitle { margin-top: 16px; max-width: 860px; color: var(--text-03); font-size: 0.9375rem; font-weight: 300; text-transform: none; } /* Two equal-width CTAs: the grid shrinks to content, both tracks share the width of the larger button */ .hero-cta-block { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; margin-top: 40px; } .hero-cta-block .button-primary { justify-content: space-between; } .hero-cta-block .button-outline { justify-content: center; } /* Hero video card (Tourvia hero-video-wrapper) */ .hero-video-wrapper { width: 100%; max-width: 346px; padding: 10px 10px 12px; /* Glassmorphism instead of a solid white card */ background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: 0 24px 48px -22px rgba(4, 16, 34, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35); border-radius: var(--radius-card); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); flex: none; } .hero-video-block { border-radius: var(--radius-inner); overflow: hidden; aspect-ratio: 16 / 9; background: var(--text-01); } .hero-video-block video { width: 100%; height: 100%; object-fit: cover; } .hero-video-text { padding: 10px 4px 4px; color: var(--white); font-size: var(--p2-size); font-weight: 500; } .hero-video-play { display: inline-flex; align-items: center; gap: 8px; border: none; background: none; padding: 2px 4px; color: #e6dcc4; font-size: var(--p2-size); font-weight: 500; } .hero-video-play img { filter: brightness(0) invert(1); } .hero-video-play:hover { text-decoration: underline; text-underline-offset: 3px; } /* ---------- About (asymmetric Tourvia-style split) ---------- */ .home-about { background: var(--white); } .about-split { display: grid; grid-template-columns: 0.82fr 1fr; grid-template-rows: auto 1fr; grid-template-areas: "media content" "media bottom"; column-gap: clamp(2.5rem, 5vw, 5rem); row-gap: clamp(2rem, 3.5vw, 3rem); } .about-split-media { grid-area: media; border-radius: 24px; overflow: hidden; min-height: 600px; } .about-split-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-premium); } .about-split-media:hover img { transform: scale(1.04); } .about-split-content { grid-area: content; display: flex; flex-flow: column; align-items: flex-start; } .about-split-title { margin-top: 26px; font-family: var(--font-secondary); /* Sized + width-capped so the heading settles into three balanced lines */ font-size: clamp(1.5rem, 1.8vw, 1.625rem); line-height: 1.25; font-weight: 500; letter-spacing: -0.02em; color: var(--text-01); max-width: 48ch; text-wrap: balance; } .about-split-text { display: flex; flex-flow: column; gap: 20px; margin-top: 28px; max-width: none; } .about-split-text p { color: #5f6368; font-size: 1.0625rem; line-height: 1.6; } .about-split-facts { margin-top: 24px; color: var(--text-02); font-size: var(--p2-size); letter-spacing: 0.01em; } .about-split-bottom { grid-area: bottom; display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; } .about-split-photo { width: clamp(260px, 26vw, 360px); aspect-ratio: 8 / 5; flex: none; border-radius: 22px; overflow: hidden; } .about-split-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-premium); } .about-split-photo:hover img { transform: scale(1.05); } /* ---------- Transfers (destination cards) ---------- */ .destination-cards-block { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .destination-card { position: relative; height: 460px; color: var(--white); border-radius: var(--radius-card); overflow: hidden; } .destination-card-gradient-block { z-index: 1; position: absolute; inset: 0; /* Stronger, taller scrim: the text block sits mid-card, so darken the whole lower half for reliable contrast on busy/bright images */ background-image: linear-gradient( to top, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.88) 26%, rgba(0, 0, 0, 0.6) 48%, rgba(0, 0, 0, 0.22) 68%, rgba(0, 0, 0, 0) 86% ); } .destination-card-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-premium); } .destination-card:hover .destination-card-image { transform: scale(1.06); } .destination-card-description { z-index: 2; position: absolute; inset: 0; padding: 24px; display: flex; flex-flow: column; justify-content: space-between; align-items: flex-start; } .destination-card-country-block { display: inline-flex; padding: 6px 12px; border: 1px solid var(--border-01); background: var(--bg-02); backdrop-filter: blur(22.5px); -webkit-backdrop-filter: blur(22.5px); border-radius: var(--radius-pill); } .designation-card-bottom-block { display: flex; flex-flow: column; gap: 10px; } .destination-name { font-family: var(--font-secondary); font-size: var(--h5-size); line-height: 1.2; font-weight: 500; } .destination-card-text { color: var(--text-03); font-size: var(--p2-size); max-width: 40ch; } .destination-card-price { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.22); } .destination-card-price__from { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.8); } .destination-card-price__amount { font-family: var(--font-secondary); font-size: 1.375rem; font-weight: 600; color: var(--white); letter-spacing: -0.01em; } .destination-card-price__unit { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.8); } .destination-card .button-primary { margin-top: 4px; width: 100%; } .destination-card--custom { background: var(--brand) url("../images/custom-tour-skyline.png") center bottom / cover no-repeat; } .destination-card--custom .destination-card-description { position: relative; height: 100%; justify-content: flex-start; gap: 16px; } .destination-card--custom .designation-card-bottom-block { flex: 1 1 auto; } .destination-card--custom .designation-card-bottom-block .button-primary { margin-top: auto; } .destination-card--custom .destination-card-country-block { background: var(--bg-03); } .destination-card--custom .destination-card-text { color: #ffffffd9; } /* ---------- Private Transfers (image left, icon-card grid right) ---------- */ .transfer-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(1.75rem, 3vw, 3rem); align-items: stretch; } .transfer-media { position: relative; min-height: 620px; background: var(--bg-01); border-radius: var(--radius-card); overflow: hidden; } .transfer-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-premium); } .transfer-media:hover img { transform: scale(1.05); } .transfer-review { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 20px; background: rgba(7, 7, 7, 0.35); backdrop-filter: blur(22.5px); -webkit-backdrop-filter: blur(22.5px); color: var(--white); border-radius: var(--radius-inner); display: flex; flex-flow: column; gap: 10px; } .transfer-content { display: flex; flex-flow: column; align-items: flex-start; min-width: 0; } .transfer-content .section-title-block { margin-top: 18px; } .transfer-content .section-intro { margin-top: 18px; } .transfer-carousel { margin-top: clamp(2rem, 3vw, 2.75rem); width: 100%; min-width: 0; } .transfer-carousel__viewport { overflow: hidden; max-width: 100%; } .transfer-carousel__track { display: flex; gap: 20px; will-change: transform; transition: transform 0.6s var(--ease-premium); } .transfer-carousel .transfer-item { flex: 0 0 clamp(280px, 46%, 360px); min-width: 0; } .transfer-carousel__controls { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); } .transfer-carousel__controls .reviews-progress { max-width: none; } .transfer-carousel__controls .reviews-arrow { width: 52px; height: 52px; } .transfer-item { display: flex; flex-flow: column; align-items: flex-start; gap: 10px; padding: 28px; background: var(--bg-01); border-radius: var(--radius-card); } .transfer-item__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 12px; border-radius: var(--radius-pill); background: var(--brand); } .transfer-item__icon img { width: 26px; height: 26px; } .transfer-item__title { font-family: var(--font-secondary); font-size: var(--h5-size); font-weight: 600; line-height: 1.2; } .transfer-item__tag { color: var(--brand-strong); font-size: var(--p2-size); font-weight: 500; } .transfer-item__text { margin-top: 4px; color: var(--text-02); font-size: var(--p2-size); line-height: 1.55; } .transfer-item__price-amount { font-family: var(--font-secondary); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; } .transfer-item__link { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; padding: 0; background: none; border: none; color: var(--brand-strong); font-family: var(--font-primary); font-size: var(--p2-size); font-weight: 600; text-decoration: none; transition: gap 0.3s var(--ease-premium); } .transfer-item__link span { text-decoration: underline; text-underline-offset: 3px; } .transfer-item__link:hover { gap: 12px; } .transfer-item__link img { width: 15px; height: 12px; } /* ---------- Services (Tourvia package cards) ---------- */ .package-cards-block { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .package-card { display: flex; flex-flow: column; gap: 20px; padding: 24px; border: 1px solid var(--border-04); border-radius: var(--radius-card); background: var(--white); } .package-card-image-block { border-radius: var(--radius-inner); height: 340px; overflow: hidden; } .package-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-premium); } .package-card:hover .package-image { transform: scale(1.05); } .package-card-bottom-block { display: flex; flex-flow: column; gap: 28px; flex: 1; } .package-card-info-block { display: flex; flex-flow: column; gap: 14px; flex: 1; } .package-card-name { font-family: var(--font-secondary); font-size: var(--h5-size); line-height: 1.25; font-weight: 500; } .package-card-info-item-block { display: flex; flex-wrap: wrap; gap: 12px 20px; } .package-card-info-item { display: flex; align-items: center; gap: 8px; color: var(--text-02); } .package-card-description { color: var(--text-02); font-size: 0.9375rem; } .package-card-price { display: flex; align-items: baseline; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-01, rgba(0, 0, 0, 0.1)); } .package-card-price__amount { font-family: var(--font-secondary); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; } .package-card-price__unit { font-size: 0.8125rem; color: var(--text-02); } .package-card-cta-block { display: flex; flex-flow: column; } .button-tertiary.button-block { width: 100%; } /* Service card CTA — full-width, sentence case, arrow circle on the right edge */ .button-service { width: 100%; justify-content: space-between; padding: 6px 6px 6px 20px; } .button-service .button-text { text-transform: none; } /* ---------- How It Works (Tourvia why section, scroll-scrubbed steps) ---------- */ .why-content-wrapper { display: flex; border-radius: var(--radius-card); overflow: hidden; } .why-content-image-block { position: relative; width: 100%; max-width: 500px; flex: 1 1 38%; min-height: 540px; } .why-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .why-review-block { z-index: 1; position: absolute; left: 16px; right: auto; bottom: 16px; top: auto; width: calc(100% - 32px); max-width: 368px; margin-inline: 0; padding: 20px; background: rgba(7, 7, 7, 0.35); backdrop-filter: blur(22.5px); -webkit-backdrop-filter: blur(22.5px); color: var(--white); border-radius: var(--radius-inner); display: flex; flex-flow: column; gap: 10px; } .review-card__tag { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.11em; color: #d8c79a; } .why-review-card-text-block { font-size: var(--p2-size); line-height: 1.55; } .why-review-card-reviewer-info { color: var(--text-03); } .why-contect-block { flex: 1; display: flex; flex-flow: column; align-items: flex-start; gap: clamp(2.5rem, 4vw, 4rem); background: var(--bg-01); padding: clamp(2rem, 4.5vw, 4rem); } .why-card-bottom-block { width: 100%; } /* Vertical step list: number circles linked by a track that fills on scroll */ .why-choose-cards-block { --step-size: 52px; --step-gap: clamp(30px, 3vw, 44px); position: relative; display: flex; flex-flow: column; gap: var(--step-gap); min-width: 0; } /* Track = grey rail running through the circle centres */ .why-steps-track, .why-steps-fill { position: absolute; left: calc(var(--step-size) / 2 - 1px); top: calc(var(--step-size) / 2); width: 2px; /* Rail spans exactly first-circle-centre → last-circle-centre so it never trails past the final step. JS sets --steps-rail; the calc is a fallback. */ height: var(--steps-rail, calc(100% - var(--step-size))); border-radius: var(--radius-pill); pointer-events: none; } .why-steps-track { background: var(--border-04); } /* Fill = brand rail scaled from the top as the section scrolls into view */ .why-steps-fill { background: var(--brand); transform: scaleY(var(--steps-fill, 0)); transform-origin: top; transition: transform 0.15s linear; } .why-choose-card { position: relative; display: grid; grid-template-columns: var(--step-size) 1fr; gap: clamp(18px, 1.8vw, 26px); align-items: start; } .why-choose-card-icon-block { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; width: var(--step-size); height: var(--step-size); background: var(--white); border: 2px solid var(--border-04); border-radius: var(--radius-pill); transition: background-color 0.45s var(--ease-premium), border-color 0.45s var(--ease-premium), box-shadow 0.45s var(--ease-premium); } .activity-step-number { font-family: var(--font-secondary); font-size: 1.25rem; font-weight: 600; color: var(--text-02); transition: color 0.45s var(--ease-premium); } /* Filled state — set by the scroll observer as the rail reaches each circle */ .why-choose-card.is-filled .why-choose-card-icon-block { background: var(--brand); border-color: var(--brand); box-shadow: 0 14px 26px -14px rgba(26, 119, 237, 0.6); } .why-choose-card.is-filled .activity-step-number { color: var(--white); } .why-choose-card-body { padding-top: 6px; } .why-choose-card .heading-style-h5 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); margin-bottom: 10px; } .why-choose-card-description-block { color: var(--text-02); font-size: 1.0625rem; line-height: 1.65; max-width: 48ch; } .why-cta-block { display: flex; } /* ---------- Reviews carousel ---------- */ .reviews-head { display: flex; flex-flow: column; align-items: center; text-align: center; gap: 12px; margin-bottom: clamp(2.5rem, 5vw, 4rem); } /* Tighten the caption-to-title distance (removes the extra title margin so the flex gap alone controls the spacing) */ .reviews-head .section-title-block { margin-top: 0; } .reviews-toggle { display: inline-flex; gap: 6px; padding: 6px; background: var(--bg-01); border-radius: var(--radius-pill); margin-top: 8px; } .reviews-toggle__btn { padding: 11px 24px; border: none; background: transparent; border-radius: var(--radius-pill); color: var(--text-02); font-family: var(--font-primary); font-size: var(--p2-size); font-weight: 500; transition: background-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium); } .reviews-toggle__btn:hover { color: var(--text-01); } .reviews-toggle__btn.is-active { background: var(--brand); color: var(--white); } .reviews-viewport { overflow: hidden; } .reviews-track { display: flex; gap: 24px; will-change: transform; transition: transform 0.6s var(--ease-premium); } .reviews-track[hidden] { display: none; } /* Video review tile */ .review-tile { flex: 0 0 auto; width: clamp(260px, 27vw, 344px); } .review-tile__media { position: relative; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; background: var(--bg-01); } .review-tile__photo { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-premium); } .review-tile:hover .review-tile__photo { transform: scale(1.04); } .review-tile__foot { position: absolute; inset: auto 14px 14px; z-index: 3; /* stays above the injected video so the control never moves */ display: flex; align-items: stretch; /* play button matches the person plaque height */ gap: 10px; } .review-tile__person { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 14px; /* Glassmorphism instead of a solid white pill */ background: rgba(12, 14, 20, 0.32); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); border-radius: 14px; } .review-tile__person .review-tile__name { color: var(--white); } .review-tile__person .review-tile__date { color: rgba(255, 255, 255, 0.82); } .review-tile__avatar { flex: none; width: 44px; height: 44px; border-radius: 11px; object-fit: cover; } .review-tile__meta { display: flex; flex-flow: column; min-width: 0; } .review-tile__name { font-family: var(--font-secondary); font-weight: 600; font-size: 0.9375rem; color: var(--text-01); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .review-tile__date { color: var(--text-02); font-size: var(--p3-size); } /* Inline play button (glassmorphism) — plays the review video in place */ .review-tile__play { flex: none; display: grid; place-items: center; width: 52px; min-height: 52px; /* height driven by the plaque via align-items: stretch */ border-radius: 14px; background: rgba(12, 14, 20, 0.32); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); color: var(--white); transition: background-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium), transform 0.3s var(--ease-premium); } .review-tile__play:hover { background: var(--brand); border-color: var(--brand); transform: scale(1.05); } /* Inline video, injected on play — covers the photo within the tile */ .review-tile__video { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; background: #000; border-radius: inherit; } .review-tile__media.is-playing .review-tile__photo { opacity: 0; visibility: hidden; } /* Text review card — image on top, quote, author + quote mark (template) */ .reviews-track--text { align-items: stretch; } /* Google-style text review card */ .review-card { flex: 0 0 auto; width: calc((100% - 24px) / 2); display: flex; flex-flow: column; gap: 14px; padding: 28px; background: var(--white); border: 1px solid var(--border-03); border-radius: var(--radius-card); box-shadow: 0 18px 40px -28px rgba(7, 30, 60, 0.18); } .review-card__head { display: flex; align-items: center; gap: 12px; } .review-card__avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .review-card__who { display: flex; flex-flow: column; gap: 2px; min-width: 0; } .review-card__name { font-family: var(--font-secondary); font-weight: 600; font-size: 1rem; color: var(--text-01); } .review-card__date { color: var(--text-02); font-size: var(--p3-size); } .review-card__stars { display: inline-flex; color: var(--brand); font-size: 1.05rem; letter-spacing: 3px; line-height: 1; } .review-card__text { color: var(--text-02); font-size: 0.9375rem; line-height: 1.6; margin: 0; } /* Controls: progress bar + arrows */ .reviews-controls { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: clamp(2rem, 4vw, 3.25rem); } .reviews-progress { position: relative; flex: 1; max-width: 620px; height: 3px; border-radius: var(--radius-pill); background: var(--border-03); overflow: hidden; } .reviews-progress__fill { position: absolute; inset: 0 auto 0 0; width: 20%; background: var(--brand); border-radius: inherit; transition: width 0.6s var(--ease-premium); } .reviews-nav { display: flex; gap: 14px; flex: none; } .reviews-arrow { display: grid; place-items: center; width: 58px; height: 58px; border: none; border-radius: 16px; background: var(--brand); color: var(--white); transition: background-color 0.3s var(--ease-premium), transform 0.25s var(--ease-premium), opacity 0.3s var(--ease-premium); } .reviews-arrow img { filter: brightness(0) invert(1); } .reviews-arrow:hover { background: var(--brand-strong); } .reviews-arrow:active { transform: scale(0.95); } .reviews-arrow[disabled] { opacity: 0.4; pointer-events: none; } .review-arrow-flip { transform: rotate(180deg); } /* ---------- FAQ ---------- */ .faq-content-wrapper { width: 100%; } .faq-layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } .faq-aside { position: sticky; top: 7rem; display: flex; flex-flow: column; align-items: flex-start; gap: 1.5rem; } .faq-aside__lead { margin-top: -0.25rem; color: var(--text-02); font-size: var(--p1-size); line-height: 1.6; max-width: 34ch; } .faq-aside__cta { margin-top: 0.75rem; } .faq__list { border-top: 1px solid var(--border-03); } .faq-item { border-bottom: 1px solid var(--border-03); } .faq-item__question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 22px 4px; background: none; border: none; text-align: left; font-family: var(--font-secondary); font-size: clamp(1.0625rem, 1.6vw, 1.25rem); font-weight: 500; color: var(--text-01); transition: color 0.3s var(--ease-premium); } .faq-item__question:hover { color: var(--brand); } .faq-item__icon { position: relative; flex: none; width: 22px; height: 22px; transition: transform 0.45s var(--ease-premium); } /* Plus mark built from two bars; rotates into an × when the item opens */ .faq-item__icon::before, .faq-item__icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--brand); border-radius: 2px; transform: translate(-50%, -50%); } .faq-item__icon::before { width: 22px; height: 2px; } .faq-item__icon::after { width: 2px; height: 22px; } .faq-item.is-open .faq-item__icon { transform: rotate(135deg); } .faq-item__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease-premium); } .faq-item__answer p { min-height: 0; overflow: hidden; color: var(--text-02); font-size: 0.9375rem; max-width: 65ch; } .faq-item.is-open .faq-item__answer { grid-template-rows: 1fr; } .faq-item.is-open .faq-item__answer p { padding-bottom: 22px; } /* ---------- Contacts ---------- */ .contacts { background: var(--bg-01); } .contacts__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; } .contacts__info { display: flex; flex-flow: column; align-items: flex-start; } /* Keep the heading to two tidy lines */ .contacts__info .heading-style-h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); text-wrap: balance; max-width: 27rem; } .contacts__intro { margin-top: 16px; max-width: 56ch; text-wrap: balance; } .contacts__list { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 32px; margin-bottom: 28px; } /* Each contact detail sits in its own bordered card */ .contacts__list li { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: var(--white); border: 1px solid var(--border-04); border-radius: var(--radius-card); transition: border-color 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium); } .contacts__list li:hover { border-color: var(--brand); box-shadow: 0 18px 36px -24px rgba(7, 7, 7, 0.32); } .contacts__icon { flex: none; display: grid; place-items: center; width: 26px; height: 26px; color: var(--brand); } .contacts__icon svg { width: 24px; height: 24px; } .contacts__card-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .contacts__label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-02); } .contacts__card-text a, .contacts__card-text > span:not(.contacts__label) { font-family: var(--font-secondary); font-size: 1.125rem; font-weight: 500; color: var(--text-01); text-decoration: none; word-break: break-word; transition: color 0.3s var(--ease-premium); } .contacts__list a:hover { color: var(--brand); } /* ---------- Forms ---------- */ .lead-form { background: var(--white); border: 1px solid var(--border-04); border-radius: var(--radius-card); padding: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: 18px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .form-field { display: flex; flex-direction: column; gap: 7px; } .form-field label { font-size: var(--p2-size); font-weight: 500; color: var(--text-01); } .form-field input, .form-field select, .form-field textarea { font: inherit; font-size: 0.9375rem; color: var(--text-01); background: var(--white); border: 1px solid var(--border-03); border-radius: var(--radius-inner); padding: 13px 16px; width: 100%; transition: border-color 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium); } .form-field textarea { resize: vertical; min-height: 88px; } /* Custom, consistently-aligned dropdown chevron on selects */ .form-field select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%234d4d4d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px 16px; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--bg-04); } .form-field__error { display: none; font-size: var(--p3-size); color: #c03428; } .form-field.has-error .form-field__error { display: block; } .form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea { border-color: #c03428; } /* Checkbox */ .form-field--checkbox { gap: 6px; } .checkbox { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; font-size: var(--p2-size); color: var(--text-02); } .checkbox input { position: absolute; opacity: 0; width: 1px; height: 1px; } .checkbox__box { flex: none; width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid var(--border-02); border-radius: 5px; position: relative; transition: background-color 0.25s var(--ease-premium), border-color 0.25s var(--ease-premium); } .checkbox__box::after { content: ""; position: absolute; inset: 3px 3px 5px 3px; border: solid var(--white); border-width: 0 0 2px 2px; transform: rotate(-45deg) scale(0); transition: transform 0.25s var(--ease-premium); } .checkbox input:checked + .checkbox__box { background: var(--brand); border-color: var(--brand); } .checkbox input:checked + .checkbox__box::after { transform: rotate(-45deg) scale(1); } .checkbox input:focus-visible + .checkbox__box { outline: 2px solid var(--brand); outline-offset: 2px; } .checkbox__text a { color: var(--brand-strong); font-weight: 500; } /* Form status */ .lead-form__status { display: none; padding: 14px 18px; border-radius: var(--radius-inner); font-size: 0.9063rem; font-weight: 500; } .lead-form__status--success { background: #e7f5ec; color: #226b3c; } .lead-form__status--error { background: #fbeae8; color: #c03428; } .lead-form__status--error a { color: inherit; font-weight: 700; margin-left: 4px; } .lead-form.is-success .lead-form__status--success, .lead-form.is-error .lead-form__status--error { display: block; } .lead-form.is-sending button[type="submit"] { opacity: 0.65; pointer-events: none; } /* WhatsApp booking button inside the lead form — matched to the submit button's height (46px icon circle + 6px top/bottom padding = 58px) */ .lead-form__whatsapp { margin-top: 10px; gap: 10px; padding: 6px 20px; min-height: 60px; justify-content: center; background: #25d366; border-color: #25d366; color: #06341c; } .lead-form__whatsapp:hover { background: #1ebe5d; border-color: #1ebe5d; color: #06341c; } .lead-form__whatsapp .lead-form__whatsapp-icon { display: inline-flex; color: #06341c; } .lead-form__whatsapp .button-text { color: inherit; } /* ---------- Footer (Tourvia bg-image footer) ---------- */ .footer { background-image: linear-gradient(#efe7df, #2a2018cc 26%, #070707 62%), url("../images/footer-bg-krakow.png"); background-position: 0 0, 50% 80%; background-repeat: repeat, no-repeat; background-size: auto, cover; color: var(--white); } .footer-content-wrapper { display: flex; flex-flow: column; gap: clamp(3rem, 8vw, 7rem); min-height: 88vh; padding-top: 12vh; justify-content: space-between; width: 100%; } .footer .page-vertical-padding { padding-bottom: clamp(1.5rem, 3vw, 2.75rem); } .footer-links-block { display: grid; grid-template-columns: 1fr minmax(360px, 1.2fr) 1fr; gap: 42px; align-items: start; justify-items: center; width: 100%; max-width: 1200px; margin-inline: auto; } .footer-nav-link-wrapper { display: flex; flex-flow: column; align-items: center; text-align: center; gap: 10px; } .footer-nav-link-title { font-family: var(--font-secondary); font-size: var(--h6-size); font-weight: 500; color: #e6dcc4; text-transform: capitalize; margin-bottom: 4px; } .footer-nav-link-block { display: flex; flex-flow: column; align-items: center; gap: 10px; } /* Double-text roll-up hover (Tourvia footer links) */ .footer-nav-link { display: flex; flex-flow: column; height: 24px; overflow: hidden; color: var(--white); font-size: var(--p2-size); text-decoration: none; } .footer-nav-link-text { display: inline-flex; align-items: center; line-height: 24px; white-space: nowrap; transition: transform 0.45s var(--ease-premium); } .footer-nav-link:hover .footer-nav-link-text { transform: translateY(-24px); } .footer-location { color: var(--text-03); font-size: var(--p2-size); } .footer-cta-block { display: flex; flex-flow: column; align-items: center; gap: 20px; max-width: 520px; margin-inline: auto; text-align: center; } .footer-cta-title-block { color: var(--white); } .footer-description { color: var(--text-03); font-size: var(--p2-size); max-width: 44ch; } .footer-cta-button-block { display: flex; justify-content: center; } .footer-right-col { display: flex; flex-flow: column; align-items: center; gap: 32px; } .footer-bottom { display: flex; flex-flow: column; align-items: center; gap: 0.25rem; } .footer-marquee { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .footer-marquee__track { display: flex; align-items: center; gap: 0.35em; width: max-content; animation: footer-marquee 30s linear infinite; } .footer-marquee:hover .footer-marquee__track { animation-play-state: paused; } @keyframes footer-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .footer-marquee__track { animation: none; } } .footer-wordmark { font-family: var(--font-secondary); font-weight: 600; font-size: clamp(3rem, 10.5vw, 10rem); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; color: rgba(255, 255, 255, 0.13); white-space: nowrap; } .footer-wordmark--dot { color: rgba(255, 255, 255, 0.18); } .footer-copyright-block { display: flex; flex-flow: row; justify-content: space-between; align-items: center; gap: 16px 40px; flex-wrap: wrap; border-top: 1px solid var(--bg-03); padding-top: 20px; width: 100%; } .footer-copyright-text { color: var(--text-03); font-size: var(--p2-size); } .footer-copyright-link-block { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px 30px; } /* ---------- Modal ---------- */ .modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; visibility: hidden; } .modal.is-open { visibility: visible; } .modal__overlay { position: absolute; inset: 0; background: rgba(7, 7, 7, 0.55); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.4s var(--ease-premium); } .modal.is-open .modal__overlay { opacity: 1; } .modal__panel { position: relative; width: 100%; max-width: 34rem; max-height: calc(100dvh - 2rem); overflow-y: auto; background: var(--white); border-radius: var(--radius-card); padding: clamp(1.75rem, 4vw, 2.5rem); opacity: 0; transform: translateY(24px) scale(0.98); transition: opacity 0.45s var(--ease-premium), transform 0.45s var(--ease-premium); } .modal.is-open .modal__panel { opacity: 1; transform: translateY(0) scale(1); } .modal__panel--video { max-width: 56rem; background: var(--text-01); padding: clamp(1rem, 2.5vw, 1.75rem); } .modal__panel--video video { width: 100%; border-radius: var(--radius-inner); aspect-ratio: 16 / 9; background: #000c1f; } .modal__caption { margin-top: 14px; font-size: var(--p3-size); color: var(--text-03); text-align: center; } .modal__close { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border: none; border-radius: 50%; background: var(--bg-01); color: var(--text-01); transition: background-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium), transform 0.3s var(--ease-premium); } .modal__panel--video .modal__close { background: var(--bg-03); color: var(--white); } .modal__close:hover { background: var(--brand); color: var(--white); transform: rotate(90deg); } .modal__close svg { width: 18px; height: 18px; } .modal__title { font-family: var(--font-secondary); font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 500; margin-bottom: 10px; padding-right: 2.5rem; } .modal__text { color: var(--text-02); font-size: 0.9375rem; margin-bottom: 24px; } .modal .lead-form { border: none; padding: 0; } .modal .form-field input, .modal .form-field select, .modal .form-field textarea { background: var(--white); } body.modal-open { overflow: hidden; } /* ---------- Intro video widget ---------- */ .intro-widget { position: fixed; right: 1.5rem; bottom: 6.25rem; z-index: 80; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 0.5s var(--ease-premium), transform 0.5s var(--ease-premium); } /* Hidden over the hero; revealed by JS after scrolling past it */ .intro-widget.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .intro-widget__card { width: 240px; background: var(--white); border: 1px solid var(--border-04); border-radius: var(--radius-card); box-shadow: 0 24px 48px -20px rgba(7, 30, 60, 0.35); padding: 10px; display: flex; flex-direction: column; gap: 10px; transform-origin: bottom right; transition: opacity 0.4s var(--ease-premium), transform 0.4s var(--ease-premium); } .intro-widget.is-minimized .intro-widget__card, .intro-widget.is-closed .intro-widget__card { opacity: 0; transform: scale(0.6); pointer-events: none; position: absolute; right: 0; bottom: 0; } .intro-widget__preview { position: relative; border: none; padding: 0; border-radius: var(--radius-inner); overflow: hidden; background: var(--text-01); } .intro-widget__preview img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; opacity: 0.92; transition: transform 0.6s var(--ease-premium); } .intro-widget__preview:hover img { transform: scale(1.05); } .intro-widget__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: var(--white); display: grid; place-items: center; box-shadow: 0 6px 16px -6px rgba(7, 30, 60, 0.4); } /* Optical centering: a triangle looks off-centre when mathematically centred */ .intro-widget__play img { width: 14px; height: 16px; margin-left: 3px; } .intro-widget__title { font-family: var(--font-secondary); font-size: 0.9375rem; font-weight: 500; text-align: center; } .intro-widget__minimize, .intro-widget__close { position: absolute; top: -10px; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--border-03); border-radius: 50%; background: var(--white); color: var(--text-02); z-index: 2; box-shadow: 0 6px 14px -6px rgba(7, 30, 60, 0.35); transition: color 0.3s var(--ease-premium), background-color 0.3s var(--ease-premium); } .intro-widget__minimize { right: 26px; } .intro-widget__close { right: -10px; } .intro-widget__minimize:hover, .intro-widget__close:hover { background: var(--brand); color: var(--white); } .intro-widget__minimize svg, .intro-widget__close svg { width: 13px; height: 13px; } .intro-widget__bubble { position: absolute; right: 0; bottom: 0; width: 52px; height: 52px; border: none; border-radius: 50%; background: var(--brand); display: grid; place-items: center; box-shadow: 0 24px 48px -20px rgba(7, 30, 60, 0.45); opacity: 0; transform: scale(0.5); pointer-events: none; transition: opacity 0.4s var(--ease-premium), transform 0.4s var(--ease-premium), background-color 0.3s var(--ease-premium); } .intro-widget__bubble img { filter: brightness(0) invert(1); } .intro-widget__bubble:hover { background: var(--brand-strong); } .intro-widget.is-minimized .intro-widget__bubble { opacity: 1; transform: scale(1); pointer-events: auto; } .intro-widget.is-closed { display: none; } /* ---------- Desktop floating booking widget (bottom-right) ---------- */ .float-booking { position: fixed; right: 1.5rem; bottom: 2.75rem; z-index: 81; display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border: none; border-radius: var(--radius-pill); background: var(--brand); color: var(--white); font-weight: 500; font-size: 0.9063rem; box-shadow: 0 24px 48px -20px rgba(7, 30, 60, 0.45); opacity: 0; transform: translateY(16px); pointer-events: none; transition: background-color 0.3s var(--ease-premium), opacity 0.5s var(--ease-premium), transform 0.5s var(--ease-premium); } /* Hidden on the first (hero) block; revealed by JS from the second block on */ .float-booking.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .float-booking:hover { background: var(--brand-strong); } .float-booking svg { width: 20px; height: 20px; } /* ---------- Sticky mobile CTA ---------- */ .mobile-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; padding: 9px 16px calc(9px + env(safe-area-inset-bottom)); /* Frosted glass: translucent surface + heavy blur so the content scrolls through it, with a top highlight edge for the liquid-glass feel */ background: rgba(248, 248, 248, 0.55); -webkit-backdrop-filter: blur(24px) saturate(165%); backdrop-filter: blur(24px) saturate(165%); border-top: 1px solid rgba(255, 255, 255, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 -14px 34px -18px rgba(7, 7, 7, 0.26); } /* ---------- Scroll reveal (base state; enhanced by GSAP) ---------- */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.85s var(--ease-premium), transform 0.85s var(--ease-premium); transition-delay: calc(var(--index, 0) * 90ms); } [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } /* SplitText line masks */ .section-title-animation .split-line-mask { display: block; overflow: hidden; } /* ---------- Legal page ---------- */ .legal-page { padding-top: calc(var(--header-h) + 2rem); padding-bottom: clamp(4rem, 8vw, 6rem); padding-inline: clamp(1rem, 3vw, 2.5rem); max-width: 60rem; margin-inline: auto; } .legal-page h1 { font-family: var(--font-secondary); font-weight: 500; font-size: clamp(2.125rem, 4vw, 3rem); margin-bottom: 2.5rem; } .legal-doc { margin-bottom: clamp(3rem, 6vw, 4.5rem); } .legal-doc h2 { font-family: var(--font-secondary); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 1.25rem; padding-top: 1rem; } .legal-doc h3 { font-family: var(--font-secondary); font-size: 1.0625rem; font-weight: 600; margin: 1.5rem 0 0.5rem; } .legal-doc p, .legal-doc li { color: var(--text-02); font-size: 0.9688rem; max-width: 70ch; } .legal-doc ul { list-style: disc; padding-left: 1.25rem; margin: 0.5rem 0 1rem; } .legal-doc p { margin-bottom: 0.9rem; } .legal-page .back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--brand); font-weight: 500; text-decoration: none; margin-bottom: 2rem; } .legal-page .back-link:hover { text-decoration: underline; text-underline-offset: 4px; } /* Legal page header (solid) */ .navbar.navbar--solid { position: static; background: var(--white); border-bottom: 1px solid var(--border-03); } .navbar.navbar--solid .nav-brand { color: var(--text-01); } /* Solid header always shows the dark lockup */ .navbar.navbar--solid .nav-brand__logo--light { opacity: 0; } .navbar.navbar--solid .nav-brand__logo--dark { opacity: 1; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1280px) { .nav-link { padding: 10px 10px; } } @media (max-width: 1100px) { .page-vertical-padding { padding-inline: 40px; } .nav-container { padding-inline: 40px; } .hero-content-block { padding-inline: 40px; } .nav-menu { display: none; } .burger { display: flex; } .nav-actions .lang-switch { display: none; } .about-split { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "content" "media" "bottom"; row-gap: 2rem; } .about-split-media { min-height: 0; height: 460px; } .about-split-title { max-width: 34ch; } .about-split-text { max-width: 65ch; } .destination-cards-block { grid-template-columns: 1fr 1fr; } .transfer-split { grid-template-columns: minmax(0, 1fr); } .transfer-media { min-height: 380px; } .why-content-wrapper { flex-flow: column; } .why-content-image-block { max-width: none; min-height: 0; height: 460px; } .footer-links-block { grid-template-columns: 1fr 1fr; } .footer-cta-block { grid-column: 1 / -1; order: -1; } } @media (max-width: 900px) { .hero-content-block { flex-direction: column; align-items: flex-start; gap: 1.75rem; } .hero-video-wrapper { max-width: 100%; } .section-top-block { flex-direction: column; align-items: flex-start; gap: 1.25rem; } .package-cards-block { grid-template-columns: 1fr; } .package-card-image-block { height: 300px; } .faq-layout { grid-template-columns: 1fr; gap: 2.5rem; } .faq-aside { position: static; } .faq-aside__cta { max-width: none; } .contacts__grid { grid-template-columns: 1fr; } /* Compact video widget stays in the bottom-right corner on tablet/mobile */ .intro-widget { display: block; right: 12px; bottom: 1.25rem; } .intro-widget__card { width: 150px; padding: 6px; gap: 6px; } .intro-widget__title, .intro-widget__card > .button-secondary { display: none; } .intro-widget__play { width: 38px; height: 38px; } .intro-widget__minimize, .intro-widget__close { width: 26px; height: 26px; } .float-booking { display: none; } } @media (max-width: 767px) { body { padding-bottom: 68px; } /* Lift the video widget above the sticky bottom CTA bar */ .intro-widget { bottom: calc(72px + env(safe-area-inset-bottom)); } .intro-widget.is-minimized .intro-widget__bubble { bottom: 0; } .page-vertical-padding { padding-inline: 16px; } .nav-container { padding-inline: 16px; } .hero-content-block { padding-inline: 16px; } /* Slightly larger than before (was 58px) but kept in check so the header bar stays compact on phones */ .nav-brand__logo { height: 62px; } /* Sticky bottom bar: phone-call button + full-width booking CTA */ .mobile-cta { display: flex; align-items: stretch; gap: 12px; } .mobile-cta .button-block { flex: 1 1 auto; min-height: 50px; justify-content: center; } .mobile-cta__call { flex: 0 0 auto; width: 50px; min-height: 50px; display: grid; place-items: center; border-radius: 16px; background: rgba(30, 23, 17, 0.08); border: 1px solid var(--border-04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55); color: var(--text-01); text-decoration: none; transition: background-color 0.3s var(--ease-premium), border-color 0.3s var(--ease-premium), transform 0.25s var(--ease-premium); } .mobile-cta__call:hover { background: rgba(30, 23, 17, 0.14); border-color: var(--brand); } .mobile-cta__call svg { width: 23px; height: 23px; } .mobile-cta__call:active { transform: scale(0.96); } .nav-actions .button-primary { display: none; } /* Hero — the overlaid copy sits over a bright sky, so lay a full-height scrim over the imagery (top + mid darkening for the heading/subtitle, strong at the base for the video card) and lift the decorative wordmark off the H1 so the two no longer collide */ .hero-mountain-image-gradient { inset: 0; height: 100%; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.34) 30%, rgba(0, 0, 0, 0.44) 54%, rgba(0, 0, 0, 0.86) 86%); } /* Drop the faded background wordmark on phones — it competed with the K lockup in the hero image and cluttered the top of the screen */ .hero-title-block { display: none; } /* Anchor the hero copy near the top instead of the bottom, ~50px below the fixed header, so it fills the space the wordmark used to occupy */ .hero-content-wrapper { justify-content: flex-start; overflow: visible; } .hero-content-block { padding-top: calc(var(--header-h) + 50px); padding-bottom: 2.5rem; align-items: stretch; } /* In the column flex the copy block must fill the width so the heading wraps inside the viewport instead of overflowing to the right */ .hero-content-left-block { width: 100%; max-width: 100%; } .hero-subtitle { color: var(--white); } .hero-cta-block { width: 100%; grid-auto-flow: row; } /* Reorder to: caption, heading, large photo, body text, CTA. display:contents flattens the content wrapper so the media image can be ordered between the heading and the paragraphs; the small photo is dropped */ .about-split { display: flex; flex-direction: column; gap: 1.25rem; } .about-split-content { display: contents; } .about-split .section-caption { order: 1; align-self: flex-start; } .about-split-title { order: 2; margin-top: 0; } .about-split-media { order: 3; min-height: 0; height: 340px; border-radius: 20px; } .about-split-text { order: 4; margin-top: 0; } .about-split-bottom { order: 5; flex-direction: column; align-items: stretch; gap: 1.25rem; } .about-split-photo { display: none; } .about-split-bottom .button-primary { justify-content: space-between; } /* Tours — cards stack over one another on scroll (sticky deck) */ .destination-cards-block { display: block; } .destination-card { position: sticky; top: 72px; height: 420px; margin-bottom: 20px; box-shadow: 0 -14px 34px -14px rgba(0, 0, 0, 0.4); } .destination-cards-block .destination-card:last-child { margin-bottom: 0; } /* Transfers — reorder to caption, heading, image, intro, carousel; the review overlay is removed and the image drops below the heading */ .transfer-split { display: flex; flex-direction: column; gap: 1.25rem; } .transfer-content { display: contents; } .transfer-split .section-caption { order: 1; align-self: flex-start; } .transfer-content .section-title-block { order: 2; margin-top: 0; } .transfer-media { order: 3; min-height: 300px; } .transfer-content .section-intro { order: 4; margin-top: 0; } .transfer-carousel { order: 5; margin-top: 0; } .transfer-review { display: none; } .transfer-carousel .transfer-item { flex-basis: 86%; } /* Services — cards stack over one another on scroll (sticky deck) */ .package-cards-block { display: block; } .package-card { position: sticky; top: 72px; margin-bottom: 20px; box-shadow: 0 -14px 34px -16px rgba(0, 0, 0, 0.22); } .package-cards-block .package-card:last-child { margin-bottom: 0; } .package-card-image-block { height: 240px; } .why-content-image-block { height: 380px; } .why-contect-block { padding: 24px 20px 28px; } .form-row { grid-template-columns: 1fr; } .footer-links-block { grid-template-columns: 1fr; } .footer-content-wrapper { min-height: 0; padding-top: 6vh; } .footer-marquee__track { animation-duration: 20s; } /* Bigger closing headline, and swap the legal links above the copyright line */ .footer-cta-title-block .heading-style-h3 { font-size: clamp(2rem, 8.5vw, 2.5rem); } .footer-copyright-block { flex-direction: column-reverse; align-items: center; text-align: center; } .footer-copyright-link-block { flex-wrap: wrap; justify-content: center; gap: 14px 24px; } /* Reviews — left-align the caption and title */ .reviews-head { align-items: flex-start; text-align: left; } .reviews-toggle { width: 100%; } .reviews-toggle__btn { flex: 1; padding: 11px 12px; } .reviews-arrow { width: 50px; height: 50px; } .review-card { width: 82%; } /* FAQ — tighten caption-to-title distance and stretch the CTA full width. The negative offset pulls the title up against the flex gap so only the caption-to-title spacing shrinks, leaving the lead/button rhythm intact */ .faq-aside .section-title-block { margin-top: -8px; } .faq-aside__cta { width: 100%; justify-content: space-between; } /* Contacts — WhatsApp button spans the full width */ .contacts__info .button-secondary { width: 100%; justify-content: space-between; } } @media (max-width: 420px) { .hero-video-wrapper { padding: 8px 8px 10px; } .nav-brand__logo { height: 58px; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } [data-reveal] { opacity: 1; transform: none; } .cta-marquee-track { animation: none; } }