/* ===================== DESIGN TOKENS (mobile-first) ===================== */ :root { /* Brand & surfaces */ --color-bg: #161819; --color-surface: #2a2a2a; --color-placeholder: #717171; --color-card-media: #9c9c9c; --color-accent: #ef5a44; --color-accent-alt: #ff553c; --color-error: #ff6b6b; /* Text */ --color-white: #ffffff; --color-muted: #969696; --color-muted-2: #9ca3af; --color-dark-373: #373737; --color-icon-dark: #2d2d2d; --color-gray-374: #374151; --color-dark-1a: #1a1a1a; /* Inputs / borders */ --color-input-border: #e5e5e5; --color-icon-bg: #f7f7f8; --border-icon: #f3f4f6; --border-footer: #6e6e6e; /* Alpha layers */ --border-glass: rgba(255, 255, 255, 0.15); --border-white-30: rgba(255, 255, 255, 0.3); --text-95: rgba(255, 255, 255, 0.95); --text-80: rgba(255, 255, 255, 0.8); --glass-bg: rgba(255, 255, 255, 0.1); --color-overlay: rgba(0, 0, 0, 0.5); /* Shadows */ --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-focus: 0 0 0 3px rgba(239, 90, 68, 0.45); /* Typography — mobile base */ --font-heading: 'Inter Tight', sans-serif; --font-body: 'Inter', sans-serif; --fs-hero: 2.25rem; /* 36px */ --fs-h2: 1.75rem; /* 28px */ --fs-h3: 1.125rem; /* 18px */ --fs-body: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-label: 0.75rem; /* 12px */ --fs-cta: 2.125rem; /* 34px */ --lh-tight: 1.15; --lh-body: 1.5; /* Heading rhythm — font-size tetap per class (hero__heading, section-title, dll) */ --heading-weight: 700; --heading-weight-sub: 600; --heading-weight-emphasis: 800; --heading-tracking: -0.02em; --heading-tracking-sub: -0.01em; --heading-lh: var(--lh-tight); /* Spacing scale (4px base) */ --space-4: 0.25rem; --space-8: 0.5rem; --space-12: 0.75rem; --space-16: 1rem; --space-20: 1.25rem; --space-24: 1.5rem; --space-32: 2rem; --space-40: 2.5rem; --space-48: 3rem; --space-64: 4rem; --space-80: 5rem; /* Layout rhythm --gutter = jarak tepi page → tepi card/shell --card-pad = padding dalam card --content-x = gutter + card-pad → teks “telanjang” sejajar teks dalam card */ --gutter: var(--space-12); --section-y: var(--space-48); --section-gap: var(--space-32); --section-flow: var(--section-gap); --section-vh: 100dvh; --section-pad-y: clamp(var(--space-24), 6dvh, var(--section-y)); --shell-card-h: calc(var(--section-vh) - 2 * var(--section-pad-y)); --card-pad: var(--space-24); --content-x: calc(var(--gutter) + var(--card-pad)); --stack-gap: var(--space-16); /* Radius */ --radius-sm: 0.75rem; --radius-md: 1.25rem; --radius-card: 1.5rem; --radius-pill: 999px; --container-max: 90rem; --nav-offset: 4.5rem; /* nav-offset for sticky elements only; collapses when the navbar hides */ --sticky-offset: var(--nav-offset); --touch-min: 2.75rem; --frame-pad: var(--space-8); --border-thick: 0.1875rem; --accent-bar-w: 12rem; --accent-bar-h: 0.1875rem; --philosophy-media-max: 9rem; --fs-display: clamp(2.5rem, 8vw, 6.25rem); --fs-about-hero: clamp(1.875rem, 11cqi, 9.5rem); --about-hero-overlay: radial-gradient( ellipse 85% 70% at 50% 50%, rgba(22, 24, 25, 0.78) 0%, rgba(22, 24, 25, 0.48) 42%, rgba(22, 24, 25, 0.18) 100% ); --fs-quote: clamp(1.5rem, 3vw, 2.5rem); --fs-nav: 0.8125rem; --icon-size: 1.5rem; --icon-size-sm: 1rem; --icon-size-lg: 2rem; --hero-card-media-h: 10.3125rem; --bento-ratio: 16 / 10; --bento-max-h: 13.5rem; --final-cta-h: clamp(12rem, 40vw, 25rem); } @media (min-width: 768px) { :root { --gutter: var(--space-16); --section-y: var(--space-64); --section-gap: var(--space-48); --stack-gap: var(--space-24); --card-pad: var(--space-40); --fs-hero: 3.25rem; --fs-h2: 2rem; --fs-h3: 1.5rem; --fs-cta: 4rem; --fs-display: clamp(3rem, 7vw, 6.25rem); --nav-offset: 5.5rem; --philosophy-media-max: 11rem; --bento-ratio: 4 / 3; --bento-max-h: 15.5rem; } } @media (min-width: 1024px) { :root { --gutter: var(--space-20); --section-y: var(--space-80); --fs-hero: 4rem; --fs-h2: 2rem; --fs-cta: 5.75rem; --philosophy-media-max: 13.3125rem; /* 213px — Figma our-philosophy */ --bento-max-h: 17.5rem; } } @media (min-width: 1024px) { .hero__heading { font-size: clamp(5.5rem, 7vw, 7.5rem); max-width: 56rem; } .hero__content { max-width: 48rem; } } /* ===================== RESET ===================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: auto; } body { font-family: var(--font-body); background-color: var(--color-bg); color: var(--color-white); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display: block; max-width: 100%; } a { text-decoration: none; color: inherit; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } svg { display: block; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); } :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: 6px; } .container { width: 100%; max-width: none; margin: 0 auto; /* default = konten telanjang, sejajar teks dalam card */ padding-left: var(--content-x); padding-right: var(--content-x); } /* tepi shell / card luar (jarang dipakai langsung) */ .container--shell { padding-left: var(--gutter); padding-right: var(--gutter); } /* Section vertical rhythm — base content-driven; --screen / --compact per kebutuhan */ .section { padding-block: var(--section-y); box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; } .section--screen { min-height: var(--section-vh); padding-block: var(--section-pad-y); justify-content: center; } .section--compact { padding-block: var(--section-gap); } .section[id] { scroll-margin-top: var(--nav-offset); } .section:last-child { padding-bottom: var(--section-y); } .section > * { width: 100%; } .section--shell { padding-inline: var(--gutter); } .section--screen.section--shell > .philosophy__card, .section--screen.section--shell > .difference__card, .section--screen.section--shell > .award__card { min-height: var(--shell-card-h); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; } /* Shared icon sizing helpers */ .icon { width: var(--icon-size); height: var(--icon-size); stroke: currentColor; fill: none; } .icon--sm { width: var(--icon-size-sm); height: var(--icon-size-sm); } .icon--md { width: 1.875rem; height: 1.875rem; } /* brand marks are filled glyphs, not line icons */ .icon--solid { fill: currentColor; stroke: none; } /* ===================== NAVBAR ===================== */ .nav { position: fixed; top: var(--space-16); left: 50%; transform: translate3d(-50%, 0, 0); width: calc(100% - (var(--gutter) * 2)); max-width: none; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: var(--space-12) var(--space-20); background-color: var(--color-bg); border: 1px solid var(--border-glass); border-radius: var(--radius-pill); backdrop-filter: blur(8px); opacity: 1; visibility: visible; } .nav.nav--ready { transition: transform 0.35s ease, opacity 0.3s ease, visibility 0.3s ease; } .nav.nav--hidden { transform: translate3d(-50%, calc(-100% - var(--space-24)), 0); opacity: 0; visibility: hidden; pointer-events: none; } /* class is mirrored on by main.js — sticky elements ride up with the nav */ :root.nav--hidden { --sticky-offset: 0rem; } .nav__logo { width: 8.5rem; height: auto; object-fit: contain; } .nav__menu { display: none; align-items: center; gap: var(--space-32); } .nav__link { font-family: var(--font-body); font-weight: 400; font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--text-95); white-space: nowrap; transition: color 0.2s ease; } .nav__link:hover { color: var(--color-white); } .nav__cta { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-min); padding: var(--space-12) var(--space-24); background-color: var(--color-accent-alt); color: var(--color-white); font-family: var(--font-body); font-weight: 700; font-size: var(--fs-nav); border-radius: var(--radius-pill); white-space: nowrap; transition: opacity 0.2s ease, transform 0.2s ease; } .nav__cta:hover { opacity: 0.92; transform: translateY(-1px); } /* The CTA inside the collapsible menu is only for the hamburger view */ .nav__menu .nav__cta { display: none; } .nav__toggle { display: none; width: var(--touch-min); height: var(--touch-min); flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-4); color: var(--color-white); } .nav__toggle span { display: block; width: 22px; height: 2px; background-color: var(--color-white); border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; } .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Language — floating bottom-left, vertical stack (grows up) */ .lang-fab { position: fixed; z-index: 90; left: max(var(--gutter), env(safe-area-inset-left, 0px)); bottom: max(var(--space-16), env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-4); background-color: var(--color-bg); border: 1px solid var(--border-glass); border-radius: var(--radius-pill); backdrop-filter: blur(8px); } .lang-fab__link { display: inline-flex; align-items: center; justify-content: center; width: var(--touch-min); height: var(--touch-min); min-width: var(--touch-min); min-height: var(--touch-min); padding: 0; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--color-muted); text-decoration: none; border-radius: 50%; background: transparent; } .lang-fab__link:hover { color: var(--color-white); } .lang-fab__link.is-active, .lang-fab__link[aria-current="page"] { color: var(--color-white); background-color: var(--color-accent); } .lang-fab__link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Tours mega menu — base (mobile accordion first) */ .nav__item--mega { position: relative; display: flex; flex-direction: column; align-items: stretch; width: 100%; } .nav__link--mega { display: inline-flex; align-items: center; gap: var(--space-8); width: 100%; background: none; border: none; cursor: pointer; text-align: left; padding: 0; } .nav__chevron { display: inline-block; width: 0.4rem; height: 0.4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; margin-top: -0.15rem; opacity: 0.7; } .nav__item--mega-open > .nav__link--mega .nav__chevron { transform: rotate(-135deg); margin-top: 0.15rem; } .nav__mega { display: none; } .nav__mega-mobile { display: none; flex-direction: column; gap: 0; padding: 0 0 var(--space-8); } .nav__item--mega-open > .nav__mega-mobile { display: flex; } .nav__mega-acc { border: none; border-bottom: 1px solid var(--border-glass); } .nav__mega-acc-summary { list-style: none; cursor: pointer; padding: var(--space-8) 0; min-height: var(--touch-min); display: flex; align-items: center; justify-content: space-between; font-size: 0.8125rem; color: var(--text-80); } .nav__mega-acc-summary::-webkit-details-marker { display: none; } .nav__mega-acc-summary::after { content: ""; width: 0.35rem; height: 0.35rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.6; flex-shrink: 0; } .nav__mega-acc[open] > .nav__mega-acc-summary { color: var(--color-accent); } .nav__mega-acc[open] > .nav__mega-acc-summary::after { transform: rotate(-135deg); } .nav__mega-acc-body { display: flex; flex-direction: column; padding: 0 0 var(--space-8) var(--space-12); gap: 0; } .nav__mega-acc-link { display: flex; align-items: center; min-height: 2.5rem; font-size: 0.8125rem; color: var(--text-80); } .nav__mega-acc-link:hover, .nav__mega-acc-link--all { color: var(--color-accent); } .nav__mega-acc-summary::after { margin-left: auto; } /* "Soon" badge for empty regions (desktop tab + mobile summary) */ .nav__mega-soon { margin-left: var(--space-8); padding: 0.1rem var(--space-8); border-radius: var(--radius-pill); background-color: rgba(239, 90, 68, 0.14); color: var(--color-accent); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; } .nav__mega-acc-soon { display: inline-flex; align-self: flex-start; padding: var(--space-4) var(--space-12); border-radius: var(--radius-pill); background-color: rgba(239, 90, 68, 0.12); color: var(--color-accent); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } /* ===================== HERO ===================== */ .hero { position: relative; min-height: var(--section-vh); display: flex; flex-direction: column; align-items: stretch; justify-content: center; overflow: hidden; padding: var(--frame-pad); box-sizing: border-box; } .hero[id] { scroll-margin-top: var(--nav-offset); } .hero__media { position: relative; flex: 1; width: 100%; height: auto; min-height: calc(var(--section-vh) - 2 * var(--frame-pad)); background-color: var(--color-placeholder); border-radius: var(--radius-card); overflow: hidden; } .hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero__image--poster-blur { filter: blur(14px) brightness(0.45); transform: scale(1.08); } .hero__video { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .hero__video iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 56.25vw; /* 16:9 */ min-height: 100%; min-width: 177.78vh; /* 16:9 */ } .hero__bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-16); padding: var(--space-16) calc(var(--content-x) - var(--frame-pad)); box-sizing: border-box; } .hero__content { position: static; padding: 0; z-index: auto; } .hero__heading { max-width: 42rem; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-hero); line-height: var(--heading-lh); letter-spacing: var(--heading-tracking); color: var(--color-white); } .hero__card { position: static; transform: none; width: 100%; max-width: none; margin: 0; display: none; /* hidden on mobile; shown from 768px+ */ flex-direction: column; align-items: stretch; gap: var(--space-12); padding: var(--space-12); background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: var(--radius-card); box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.16), 0 4px 12px -2px rgba(0, 0, 0, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: auto; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease; } .hero__card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -6px rgba(0, 0, 0, 0.22), 0 8px 16px -4px rgba(0, 0, 0, 0.12); border-color: rgba(255, 255, 255, 0.95); } .hero__card-media { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 7.5rem; background-color: var(--color-card-media); border-radius: var(--radius-md); overflow: hidden; } .hero__card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .hero__card:hover .hero__card-media img { transform: scale(1.06); } .hero__card-row { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-12); width: 100%; padding: 0 var(--space-4); } .hero__card-info { display: flex; flex-direction: column; gap: var(--space-4); flex: 1 1 0%; min-width: 0; overflow: hidden; } .hero__card-label { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-label); line-height: var(--lh-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hero__card-title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.02em; color: var(--color-dark-373); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; overflow-wrap: anywhere; } .hero__card-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: var(--space-12) var(--space-16); min-height: var(--touch-min); background-color: var(--color-accent-alt); color: var(--color-white); border-radius: var(--radius-pill); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } .hero__card-btn:hover { opacity: 0.95; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(239, 90, 68, 0.35); } /* ===================== SHARED HEADINGS ===================== */ .eyebrow { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-label); line-height: var(--lh-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-white); } .eyebrow--accent { color: var(--color-accent); } .section-title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-h2); line-height: var(--heading-lh); letter-spacing: var(--heading-tracking); color: var(--color-white); } .lede { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); } /* Internal content rhythm — eyebrow → title → body stacks */ .content-stack { display: flex; flex-direction: column; gap: var(--stack-gap); } .prose-stack { display: flex; flex-direction: column; gap: var(--stack-gap); } .prose-stack p { margin: 0; } .btn-pill { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-min); padding: var(--space-12) var(--space-24); background-color: var(--color-accent); color: var(--color-white); border-radius: var(--radius-pill); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; transition: opacity 0.2s ease, transform 0.2s ease; } .btn-pill:hover { opacity: 0.92; transform: translateY(-1px); } .btn-pill--ghost { background-color: transparent; border: 1px solid var(--border-glass); color: var(--color-white); width: 100%; } .btn-pill--ghost:hover { opacity: 1; background-color: var(--glass-bg); } /* ===================== ABOUT ===================== */ .about__inner { display: flex; flex-direction: column; gap: var(--section-gap); align-items: stretch; } .about__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--stack-gap); } .about__heading { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-h2); line-height: var(--heading-lh); letter-spacing: var(--heading-tracking); color: var(--color-white); } .about__body { display: flex; flex-direction: column; gap: var(--stack-gap); } .about__body p { margin: 0; } .about__media { width: 100%; aspect-ratio: 4/3; border-radius: var(--radius-card); overflow: hidden; } .about__media img { width: 100%; height: 100%; object-fit: cover; } /* ===================== PHILOSOPHY (Signature Experience) ===================== */ .philosophy__card { width: 100%; max-width: none; margin: 0; background-color: var(--color-surface); border-radius: var(--radius-card); padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--section-gap); } .philosophy__header { display: grid; grid-template-columns: 1fr; gap: var(--stack-gap); align-items: start; } .philosophy__intro { display: flex; flex-direction: column; gap: var(--stack-gap); } .philosophy__eyebrow { font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted-2); } .philosophy__title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-h2); line-height: var(--heading-lh); letter-spacing: var(--heading-tracking); color: var(--color-white); } .philosophy__desc { max-width: 22rem; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); margin: 0; } .philosophy__features { display: grid; grid-template-columns: 1fr; gap: var(--section-gap); width: 100%; } .feature { display: flex; gap: var(--space-16); align-items: flex-start; min-width: 0; } .feature__body { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; } .feature__icon { flex-shrink: 0; width: 3rem; height: 3rem; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; background-color: var(--color-white); border: 1px solid var(--border-icon); box-shadow: var(--shadow-xs); color: var(--color-icon-dark); } .feature__icon--accent { background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); } .feature__icon .icon { width: var(--icon-size); height: var(--icon-size); } .feature__title { font-family: var(--font-heading); font-weight: var(--heading-weight-sub); font-size: var(--fs-base); line-height: var(--heading-lh); letter-spacing: var(--heading-tracking-sub); color: var(--color-white); margin: 0 0 var(--space-4); } .feature__desc { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); } /* ===================== JOURNEY HIGHLIGHTS (Bento) ===================== */ .journey__inner { display: flex; flex-direction: column; gap: var(--section-gap); } .journey__header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--section-gap); } .journey__header-text { display: flex; flex-direction: column; gap: var(--stack-gap); } .journey__link { padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-accent); font-family: var(--font-body); font-weight: 600; font-size: var(--fs-label); line-height: var(--lh-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); white-space: nowrap; transition: opacity 0.2s ease; } .journey__link:hover { opacity: 0.8; } .journey__grid { display: grid; grid-template-columns: 1fr; gap: var(--section-gap); } .bento-card { position: relative; display: block; width: 100%; max-height: var(--bento-max-h); aspect-ratio: var(--bento-ratio); background-color: var(--color-placeholder); border-radius: var(--radius-card); overflow: hidden; text-decoration: none; color: inherit; } .bento-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } .bento-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .bento-card:hover .bento-card__img { transform: scale(1.04); } .bento-card__body { position: absolute; left: var(--space-16); right: var(--space-16); bottom: var(--space-16); display: flex; flex-direction: column; gap: var(--space-8); z-index: 2; } .badge { align-self: flex-start; padding: var(--space-4) var(--space-12); background-color: var(--color-white); border-radius: var(--radius-card); font-family: var(--font-body); font-weight: 700; font-size: 0.625rem; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-surface); } .bento-card__title { font-family: var(--font-heading); font-weight: var(--heading-weight-sub); font-size: var(--fs-h3); line-height: var(--heading-lh); letter-spacing: var(--heading-tracking-sub); color: var(--color-white); } /* ===================== DIFFERENCE (Philosophy 2) ===================== */ .difference__card { width: 100%; max-width: none; margin: 0; padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--section-gap); justify-content: center; } .difference__layout { display: grid; grid-template-columns: 1fr; gap: var(--section-gap); align-items: start; } .difference__header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--stack-gap); } .difference__eyebrow { font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted-2); margin: 0; } .difference__title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-h2); line-height: var(--heading-lh); letter-spacing: var(--heading-tracking); color: var(--color-white); } .difference__note { max-width: 24rem; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); margin: 0; } .difference__list { display: flex; flex-direction: column; } .diff-row { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: var(--space-16); padding: var(--space-20) var(--space-8); border-top: 1px solid var(--border-glass); transition: padding-inline 0.25s ease, background-color 0.25s ease; } .diff-row:last-child { border-bottom: 1px solid var(--border-glass); } .diff-row:hover { background-color: rgba(255, 255, 255, 0.03); padding-inline: var(--space-16); border-radius: var(--radius-md); } .diff-row__index { font-family: var(--font-heading); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.04em; color: var(--color-muted-2); transition: color 0.25s ease; } .diff-row:hover .diff-row__index { color: var(--color-accent); } .diff-row__icon { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-pill); background-color: var(--color-icon-bg); border: 1px solid var(--border-icon); display: flex; align-items: center; justify-content: center; color: var(--color-icon-dark); transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } .diff-row:hover .diff-row__icon { transform: scale(1.06); background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); } .diff-row__icon .icon { width: var(--icon-size); height: var(--icon-size); } .diff-row__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); } .diff-row__title { font-family: var(--font-heading); font-weight: var(--heading-weight-sub); font-size: var(--fs-base); line-height: var(--heading-lh); letter-spacing: var(--heading-tracking-sub); color: var(--color-white); margin: 0; } .diff-row__desc { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); margin: 0; } /* ===================== FLEET ===================== */ .fleet__inner { width: 100%; max-width: none; margin: 0; display: flex; flex-direction: column; gap: var(--section-gap); align-items: center; } .fleet__head { max-width: 41rem; display: flex; flex-direction: column; gap: var(--stack-gap); align-items: center; text-align: center; padding-inline: var(--card-pad); /* head teks = content-x */ } .fleet__eyebrow { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-white); } .fleet__title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-h2); line-height: var(--heading-lh); letter-spacing: var(--heading-tracking); color: var(--color-white); } .fleet__sub { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--color-muted); } .fleet__grid { display: grid; grid-template-columns: 1fr; gap: var(--section-gap); width: 100%; } .bike { width: 100%; display: flex; flex-direction: column; gap: var(--stack-gap); align-items: center; text-decoration: none; color: inherit; } .bike:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: var(--radius-card); } .bike__media { width: 100%; aspect-ratio: 16/11; background-color: var(--color-placeholder); border-radius: var(--radius-card); overflow: hidden; } .bike__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .bike:hover .bike__media img { transform: scale(1.04); } .bike__name { padding-top: 0; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-tight); color: var(--color-white); text-align: center; } .bike__tag { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); text-align: center; } .fleet__link { align-self: center; display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-12) var(--space-24); border: 1px solid var(--color-accent); border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 600; font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--color-accent); transition: background-color 0.2s ease, color 0.2s ease; } .fleet__link:hover { background-color: var(--color-accent); color: var(--color-white); } .fleet__link .icon { transition: transform 0.2s ease; } .fleet__link:hover .icon { transform: translateX(0.2rem); } /* ===================== GALLERY (Masonry) ===================== */ .gallery { width: 100%; background-color: var(--color-surface); border-radius: var(--radius-card); padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--section-gap); } .gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 8rem; gap: var(--space-12); } .gallery__item { overflow: hidden; border-radius: var(--radius-card); background-color: var(--color-placeholder); } .gallery__link { display: block; width: 100%; height: 100%; position: relative; cursor: pointer; } .gallery__link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; } .gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .gallery__link:hover img { transform: scale(1.05); } .gallery__zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--color-white); background-color: var(--color-overlay); opacity: 0; transition: opacity 0.25s ease; } .gallery__link:hover .gallery__zoom, .gallery__link:focus-visible .gallery__zoom { opacity: 1; } /* mobile 2-col mosaic — show a few (hide 6th onward) */ .gallery__item--a { grid-column: 1 / span 2; grid-row: span 2; } .gallery__item--b, .gallery__item--c, .gallery__item--d, .gallery__item--e, .gallery__item--f, .gallery__item--g { grid-column: span 1; grid-row: span 1; } .gallery__item:nth-child(n + 6) { display: none; } /* Lightbox — CSS-only :target popup */ .lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: var(--space-24); background-color: rgba(0, 0, 0, 0.9); backdrop-filter: blur(4px); } .lightbox:target, .lightbox.is-open { display: flex; } .lightbox__img { max-width: 100%; max-height: 88dvh; border-radius: var(--radius-md); object-fit: contain; box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.5); } .lightbox__close { position: absolute; top: var(--space-16); right: var(--space-20); width: var(--touch-min); height: var(--touch-min); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); border: 1px solid var(--border-white-30); background-color: var(--glass-bg); color: var(--color-white); font-size: var(--fs-h2); line-height: 1; } .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: var(--touch-min); height: var(--touch-min); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); border: 1px solid var(--border-white-30); background-color: var(--glass-bg); color: var(--color-white); } .lightbox__nav:focus-visible, .lightbox__close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .lightbox__nav--prev { left: var(--space-16); } .lightbox__nav--next { right: var(--space-16); } /* ===================== BOOKING PROCESS ===================== */ .process { border-bottom: 1px solid var(--border-footer); } .process__inner { width: 100%; max-width: none; margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--section-gap); } .step { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-12); } .step__num { position: relative; z-index: 1; width: 3rem; height: 3rem; border-radius: var(--radius-pill); border: 1px solid var(--color-accent); background-color: var(--color-bg); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-base); line-height: 1; color: var(--color-accent); transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease; } .step:hover .step__num { background-color: var(--color-accent); color: var(--color-white); transform: translateY(-0.2rem); } .step__title { font-family: var(--font-heading); font-weight: var(--heading-weight-sub); font-size: var(--fs-base); line-height: var(--heading-lh); letter-spacing: var(--heading-tracking-sub); color: var(--color-white); margin: 0; } .step__desc { max-width: 18rem; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); margin: 0; } /* ===================== FAQ ===================== */ .faq__inner { display: grid; grid-template-columns: 1fr; gap: var(--section-gap); align-items: start; } .faq__head { display: flex; flex-direction: column; gap: var(--space-12); } .faq__eyebrow { font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); } .faq__title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-h2); line-height: var(--heading-lh); letter-spacing: var(--heading-tracking); color: var(--color-white); margin: 0; } .faq__note { max-width: 26rem; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); margin: 0; } .faq__list { display: flex; flex-direction: column; gap: var(--space-12); width: 100%; min-width: 0; } .faq__item { background-color: var(--glass-bg); border: 1px solid var(--border-glass); border-radius: var(--radius-md); backdrop-filter: blur(5px); overflow: hidden; transition: border-color 0.25s ease, background-color 0.25s ease; } .faq__item:hover { border-color: var(--border-white-30); } .faq__item[open] { border-color: var(--border-white-30); background-color: rgba(255, 255, 255, 0.08); } .faq__summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); min-height: var(--touch-min); padding: var(--space-20) var(--space-24); cursor: pointer; -webkit-tap-highlight-color: transparent; } .faq__summary::-webkit-details-marker { display: none; } .faq__question { font-family: var(--font-heading); font-weight: var(--heading-weight-sub); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--color-white); text-align: left; } .faq__chevron { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-pill); border: 1px solid var(--border-white-30); color: var(--color-white); transition: transform 0.3s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .faq__chevron .icon { width: var(--icon-size-sm); height: var(--icon-size-sm); } .faq__item[open] .faq__chevron { transform: rotate(180deg); background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); } /* Mobile: show 4, rest behind the toggle. Checkbox holds the state — no JS. */ .faq__item:nth-of-type(n+5) { display: none; } .faq__more-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; } .faq__more-toggle:checked ~ .faq__list .faq__item { display: block; } .faq__more { justify-self: center; display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--space-24); border: 1px solid var(--border-white-30); border-radius: var(--radius-pill); font-size: var(--fs-body); color: var(--color-white); cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; } .faq__more:hover { border-color: var(--color-white); background-color: var(--glass-bg); } .faq__more-close { display: none; } .faq__more-toggle:checked ~ .faq__more .faq__more-open { display: none; } .faq__more-toggle:checked ~ .faq__more .faq__more-close { display: inline; } .faq__more-toggle:focus-visible ~ .faq__more { outline: 2px solid var(--color-accent); outline-offset: 3px; } .faq__answer { padding: var(--space-16) var(--space-24) var(--space-24); margin: 0; max-width: 46rem; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); } /* ===================== CONTACT ===================== */ .contact__card { width: 100%; max-width: none; margin: 0; background-color: var(--color-surface); border-radius: var(--radius-card); padding: var(--card-pad); display: flex; flex-direction: column; align-items: center; gap: var(--section-gap); } .contact__eyebrow { font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted-2); text-align: center; margin: 0; } .contact__title { max-width: 50rem; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-h2); line-height: var(--heading-lh); letter-spacing: var(--heading-tracking); color: var(--color-white); text-align: center; margin: 0; } .contact__steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-8); text-align: center; color: var(--color-muted-2); font-size: var(--fs-base); } .contact__form { width: 100%; max-width: 25rem; display: flex; flex-direction: column; gap: var(--stack-gap); } .contact__input { width: 100%; min-height: var(--touch-min); height: 3.3125rem; padding: var(--space-16) var(--space-24); background-color: var(--color-white); border: 1px solid var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); font-family: var(--font-body); font-size: 0.875rem; color: var(--color-gray-374); } .contact__input::placeholder { color: var(--color-muted-2); } .contact__date { display: flex; flex-direction: column; gap: var(--space-8); width: 100%; } .contact__date > span { font-size: var(--fs-label); letter-spacing: 0.04em; color: var(--color-muted-2); } .contact__input[type="date"] { color-scheme: light; } .contact__textarea { height: auto; min-height: 6rem; resize: vertical; border-radius: var(--radius-md); line-height: var(--lh-body); } .contact__route { display: flex; flex-direction: column; gap: 0; width: 100%; } .contact__route:has(.contact__select-wrap--tour.is-open) { gap: var(--stack-gap); } .contact__select-wrap { position: relative; width: 100%; } .contact__select-wrap--tour { max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; transition: max-height 0.28s ease, opacity 0.22s ease; } .contact__select-wrap--tour.is-open { max-height: 5rem; opacity: 1; pointer-events: auto; } .contact__select { width: 100%; min-height: var(--touch-min); height: 3.3125rem; padding: var(--space-16) var(--space-24); padding-right: var(--space-48); background-color: var(--color-white); border: 1px solid var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-xs); font-family: var(--font-body); font-size: 0.875rem; color: var(--color-gray-374); appearance: none; -webkit-appearance: none; cursor: pointer; } .contact__select-arrow { position: absolute; right: var(--space-24); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--color-muted-2); display: flex; } .contact__submit { margin-top: 0; width: 100%; max-width: 25rem; min-height: var(--touch-min); display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding: var(--space-16) var(--space-24); border: 0; background-color: var(--color-accent); border-radius: var(--radius-pill); color: var(--color-white); font-family: inherit; font-size: var(--fs-body); text-align: left; text-decoration: none; cursor: pointer; transition: opacity 0.2s ease, transform 0.2s ease; } .contact__submit:hover { opacity: 0.92; transform: translateY(-1px); } .contact__submit:disabled { opacity: 0.45; transform: none; cursor: not-allowed; } .contact__form .btn-pill { width: 100%; justify-content: center; } .contact__date .book-card__picked { text-align: left; } .contact__submit-icon { width: 1.8125rem; height: 1.8125rem; display: flex; align-items: center; justify-content: center; background-color: var(--color-white); border-radius: var(--radius-pill); color: var(--color-dark-1a); flex-shrink: 0; } .contact__note { margin-top: var(--space-4); display: flex; align-items: flex-start; gap: var(--space-4); font-size: 0.625rem; line-height: var(--lh-body); color: var(--color-muted-2); } .contact__note .icon { width: var(--icon-size-sm); height: var(--icon-size-sm); flex-shrink: 0; margin-top: var(--space-4); } .contact__status { margin-top: var(--space-4); font-size: var(--fs-label); color: var(--color-accent); min-height: 1rem; text-align: center; width: 100%; } /* ===================== FOOTER ===================== */ /* Mobile: brand centered, then label-left / content-right rows split by hairlines. */ .footer { width: 100%; max-width: none; margin: 0 auto; display: flex; flex-direction: column; gap: 0; padding: var(--space-64) var(--content-x) var(--section-y); } .footer__col { min-width: 0; display: flex; flex-direction: column; gap: var(--space-24); } .footer__col + .footer__col { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: var(--space-16) var(--space-24); align-items: start; padding: var(--space-32) 0; border-top: 1px solid var(--border-glass); } /* heading keeps column 1; everything else stacks in column 2 — except the map, too cramped there */ .footer__col + .footer__col > :not(.footer__heading) { grid-column: 2; } .footer__col + .footer__col > .footer__map { grid-column: 1 / -1; max-width: none; } /* the socials row needs the full width — 4 tap targets don't fit in the narrow column */ .footer__col + .footer__col:has(.footer__socials) { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .footer__col + .footer__col:has(.footer__socials) > * { grid-column: 1; } .footer__col + .footer__col:has(.footer__socials) .footer__socials { justify-content: center; } .footer__col:first-child { align-items: center; text-align: center; padding-bottom: var(--space-32); } .footer__logo { width: 8.375rem; height: 1.75rem; object-fit: contain; } .footer__about p { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--color-muted); } .footer__heading { font-family: var(--font-heading); font-weight: var(--heading-weight-sub); font-size: var(--fs-base); line-height: var(--lh-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-white); } .footer__list { display: flex; flex-direction: column; gap: var(--space-16); } .footer__list a { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--color-muted); transition: color 0.2s ease; } .footer__list a:hover { color: var(--color-white); } .footer__socials { display: flex; flex-wrap: wrap; gap: var(--space-12); } .footer__address { display: flex; align-items: flex-start; gap: var(--space-8); margin-top: var(--space-24); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--color-muted); transition: color 0.2s ease; } .footer__address:hover { color: var(--color-white); } .footer__address .icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.15em; } .footer__map { display: block; width: 100%; max-width: 22rem; height: 11rem; margin-top: var(--space-16); border: 0; border-radius: var(--radius-md); filter: grayscale(1) invert(0.92) hue-rotate(180deg); } .footer__social { width: var(--touch-min); height: var(--touch-min); border-radius: var(--radius-pill); border: 1px solid var(--color-muted); display: flex; align-items: center; justify-content: center; color: var(--color-muted); transition: border-color 0.2s ease, color 0.2s ease; } .footer__social:hover { border-color: var(--color-white); color: var(--color-white); } .footer__social .icon { width: 1.125rem; height: 1.125rem; } .footer-bar { border-top: 1px solid var(--border-glass); padding: var(--space-32) var(--content-x); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; gap: var(--space-16) var(--space-24); } .footer-bar__copy { width: 100%; font-size: var(--fs-body); line-height: var(--lh-body); text-transform: uppercase; color: var(--text-80); } .footer-bar__link { font-size: var(--fs-body); line-height: var(--lh-body); text-transform: uppercase; color: var(--color-muted); transition: color 0.2s ease; } .footer-bar__link:hover { color: var(--color-white); } /* ===================== FINAL CTA ===================== */ .final-cta { position: relative; width: calc(100% - (var(--gutter) * 2)); max-width: none; margin: 0 auto; min-height: 12rem; height: var(--final-cta-h); border-top-left-radius: var(--radius-card); border-top-right-radius: var(--radius-card); overflow: hidden; display: flex; align-items: flex-start; justify-content: center; padding-top: clamp(0.75rem, 3%, 1.25rem); } .final-cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .final-cta__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.62) 100%); } .final-cta__title { position: relative; z-index: 2; font-family: var(--font-heading); font-weight: var(--heading-weight-emphasis); font-size: clamp(2.75rem, 11vw, 5.5rem); line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase; color: var(--color-white); text-align: center; text-shadow: 0 0.125rem 1.5rem rgba(0, 0, 0, 0.55); white-space: normal; padding: 0 var(--gutter); margin: 0; max-width: 14ch; } /* ===================== ERROR PAGE (404) ===================== */ .errorpage { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-16); padding: var(--section-y) var(--content-x); } .errorpage__logo { width: 9rem; height: auto; object-fit: contain; margin-bottom: var(--space-16); } .errorpage__code { font-family: var(--font-heading); font-weight: var(--heading-weight-emphasis); font-size: clamp(4rem, 22vw, 8rem); line-height: 1; color: var(--color-accent); margin: 0; } .errorpage__title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-h2); line-height: var(--heading-lh); color: var(--color-white); margin: 0; } .errorpage__text { max-width: 34rem; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); margin: 0; } .errorpage__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-16) var(--space-24); margin-top: var(--space-16); } .errorpage__link { min-height: var(--touch-min); display: inline-flex; align-items: center; font-size: var(--fs-body); color: var(--color-muted); text-decoration: underline; text-underline-offset: 0.25em; } .errorpage__link:hover { color: var(--color-white); } /* ===================== TABLET+ ===================== */ @media (min-width: 768px) { .nav { top: var(--space-24); padding: var(--space-16) var(--space-24); overflow: visible; } .nav__toggle { display: none; } .nav__menu { display: flex !important; max-height: none !important; opacity: 1 !important; overflow: visible !important; flex-direction: row; width: auto; margin-top: 0 !important; gap: var(--space-32); align-items: center; } .nav > .nav__cta { display: inline-flex; } .nav__menu .nav__cta { display: none; } .lang-fab { left: max(var(--space-24), env(safe-area-inset-left, 0px)); bottom: max(var(--space-24), env(safe-area-inset-bottom, 0px)); } .nav__item--mega { position: static; width: auto; flex-direction: row; align-items: center; } .nav__link--mega { width: auto; white-space: nowrap; } .nav__mega-mobile { display: none !important; } .nav__mega { display: none; position: absolute; top: calc(100% + var(--space-12)); left: 0; right: 0; z-index: 110; grid-template-columns: minmax(10rem, 0.9fr) minmax(0, 1.4fr) minmax(10rem, 0.95fr); gap: var(--space-24); padding: var(--card-pad); background-color: var(--color-surface); border: 1px solid var(--border-glass); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); box-sizing: border-box; } /* transparent bridge over the gap so hover doesn't drop between button and panel */ .nav__mega::before { content: ""; position: absolute; top: calc(-1 * var(--space-12)); left: 0; right: 0; height: var(--space-12); } .nav__item--mega-open > .nav__mega, .nav__mega:not([hidden]) { display: grid; } .nav__mega[hidden] { display: none !important; } .nav__mega-regions { display: flex; flex-direction: column; gap: var(--space-4); padding-right: var(--space-16); border-right: 1px solid var(--border-glass); } .nav__mega-label { margin: 0 0 var(--space-8); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); } .nav__mega-region { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); width: 100%; padding: var(--space-8) var(--space-12); border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-95); font: inherit; font-size: var(--fs-body); text-align: left; cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease; } .nav__mega-region:hover, .nav__mega-region.is-active { color: var(--color-accent); background-color: var(--glass-bg); } .nav__mega-region-chevron { width: 0.35rem; height: 0.35rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); opacity: 0.5; flex-shrink: 0; } .nav__mega-regions > .nav__mega-all { margin-top: var(--space-12); align-self: flex-start; } .nav__mega-panels { min-width: 0; } .nav__mega-panel { display: none; flex-direction: column; gap: var(--stack-gap); min-height: 100%; } .nav__mega-panel.is-active { display: flex; } .nav__mega-panel[hidden] { display: none !important; } .nav__mega-eyebrow { margin: 0; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); } .nav__mega-trips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-16); margin: 0; padding: 0; list-style: none; } .nav__mega-trip { display: block; padding: var(--space-8) 0; font-size: var(--fs-body); color: var(--color-white); transition: color 0.15s ease; } .nav__mega-trip:hover { color: var(--color-accent); } .nav__mega-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); } .nav__mega-empty-tag { padding: var(--space-4) var(--space-12); border-radius: var(--radius-pill); background-color: rgba(239, 90, 68, 0.12); color: var(--color-accent); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .nav__mega-empty-text { margin: 0; font-size: var(--fs-body); color: var(--color-muted); line-height: var(--lh-body); } .nav__mega-region-chevron { margin-left: auto; } .nav__mega-all { font-size: var(--fs-body); font-weight: 600; color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.2em; } .nav__mega-promo { position: relative; min-height: 14rem; border-radius: var(--radius-md); overflow: hidden; background-color: var(--color-placeholder); } .nav__mega-promo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .nav__mega-promo-body { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-8); height: 100%; min-height: 14rem; padding: var(--space-20); box-sizing: border-box; background: linear-gradient(180deg, transparent 20%, rgba(22, 24, 25, 0.85) 100%); } .nav__mega-promo-title { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-tight); color: var(--color-white); } .nav__mega-promo-text { margin: 0; font-size: var(--fs-body); color: var(--text-80); line-height: var(--lh-body); } .nav__mega-promo-cta { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; margin-top: var(--space-8); min-height: 2.5rem; padding: var(--space-8) var(--space-20); background-color: var(--color-accent-alt); color: var(--color-white); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--radius-pill); } .nav__mega-promo-cta:hover { opacity: 0.92; } .hero { padding: var(--frame-pad); } .hero__bottom { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--section-gap); padding: var(--space-24) calc(var(--content-x) - var(--frame-pad)); } .hero__content { flex: 1 1 0; min-width: 0; max-width: 36rem; } .hero__card { display: flex; flex: 0 0 auto; width: min(23.5rem, 38vw); max-width: 23.5rem; gap: var(--space-16); padding: var(--space-16); } .hero__card-media { aspect-ratio: auto; max-height: none; height: var(--hero-card-media-h); } .hero__card-row { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-12); padding: 0 var(--space-4); } .hero__card-info { flex: 1 1 0%; min-width: 0; overflow: hidden; } .hero__card-title { font-size: 1.1875rem; line-height: 1.25; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-word; overflow-wrap: anywhere; } .hero__card-btn { width: auto; flex-shrink: 0; padding: var(--space-12) var(--space-20); } .about__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--section-gap); } .about__media { width: 100%; min-width: 0; aspect-ratio: 4 / 3; } .philosophy__header { grid-template-columns: 1fr 1fr; gap: var(--section-gap); align-items: end; } .philosophy__desc { justify-self: end; max-width: 20rem; } .philosophy__features { grid-template-columns: repeat(2, 1fr); gap: var(--section-gap); } .journey__header { flex-direction: row; align-items: flex-end; justify-content: space-between; } .journey__grid { grid-template-columns: repeat(2, 1fr); } .bento-card__body { left: var(--space-24); right: var(--space-24); bottom: var(--space-24); } .difference__layout { grid-template-columns: minmax(0, 0.9fr) 1fr; gap: var(--space-64); align-items: center; } .fleet__grid { grid-template-columns: repeat(2, 1fr); } .gallery__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 12.5rem; gap: var(--space-16); } .gallery__item:nth-child(n + 6) { display: block; } .gallery__item--a { grid-column: 1 / span 2; grid-row: 1 / span 2; } .gallery__item--b { grid-column: 3; grid-row: 1; } .gallery__item--c { grid-column: 4; grid-row: 1 / span 2; } .gallery__item--d { grid-column: 3; grid-row: 2; } .gallery__item--e { grid-column: 1 / span 2; grid-row: 3; } .gallery__item--f { grid-column: 3; grid-row: 3; } .gallery__item--g { grid-column: 4; grid-row: 3; } .process__inner { grid-template-columns: repeat(2, 1fr); } .faq__inner { grid-template-columns: minmax(0, 0.6fr) 1fr; gap: var(--space-64); } .faq__head { position: sticky; transition: top 0.35s ease; top: calc(var(--sticky-offset) + var(--space-16)); } .faq__summary { min-height: 3.75rem; } /* enough room from tablet up — show every question, drop the toggle */ .faq__item:nth-of-type(n+5) { display: block; } .faq__more, .faq__more-toggle { display: none; } .footer { flex-direction: row; flex-wrap: wrap; gap: var(--section-gap); } .footer__col { flex: 1 1 40%; } /* drop the mobile row/hairline treatment */ .footer__col + .footer__col { display: flex; padding: 0; border-top: 0; gap: var(--space-24); } .footer__col + .footer__col > :not(.footer__heading) { grid-column: auto; } .footer__col:first-child { align-items: stretch; text-align: left; padding-bottom: 0; } .footer-bar { flex-direction: row; align-items: flex-start; text-align: left; justify-content: space-between; } .footer-bar__copy { width: auto; flex: 1 1 auto; text-align: left; } .footer-bar__link { flex: 1 0 0; text-align: center; } .final-cta__title { font-size: clamp(4.5rem, 9vw, 6.5rem); letter-spacing: -0.04em; max-width: none; } .final-cta { padding-top: clamp(1rem, 3.5%, 1.5rem); } } @media (min-width: 1024px) { .final-cta { padding-top: clamp(1.25rem, 4%, 2rem); } .final-cta__title { font-size: clamp(6rem, 8.5vw, 9rem); white-space: nowrap; } .philosophy__title { font-size: clamp(2rem, 4vw, 2.6875rem); line-height: 1.15; } .philosophy__desc { max-width: 22rem; } .journey__grid { grid-template-columns: repeat(3, 1fr); } /* lg = 3 cols: drop the 4th so the row stays full (no empty slots) */ .journey__grid .bento-card:nth-child(n+4) { display: none; } .difference__layout { grid-template-columns: minmax(0, 0.8fr) 1fr; } .difference__title { font-size: 2.5rem; } .fleet__grid { grid-template-columns: repeat(3, 1fr); } .process__inner { grid-template-columns: repeat(3, 1fr); } /* connector line linking the step numbers */ .step:not(:last-child)::after { content: ""; position: absolute; top: 1.5rem; left: calc(50% + 1.5rem); width: calc(100% - 3rem); height: 1px; background-color: var(--border-white-30); } .footer__col { flex: 1 1 0; } } /* hamburger (mobile only) */ @media (max-width: 767px) { :root { --nav-offset: 3.75rem; } .nav { top: var(--space-12); padding: var(--space-8) var(--space-12); gap: var(--space-8); border-radius: var(--radius-md); flex-wrap: nowrap; align-items: center; } .nav:has(.nav__menu--open) { flex-wrap: wrap; border-radius: var(--radius-card); padding-bottom: var(--space-12); } .nav__logo-link { flex: 1 1 auto; min-width: 0; max-height: 2rem; } .nav__logo { width: auto; max-width: 7.5rem; max-height: 1.5rem; object-fit: contain; object-position: left center; } .nav__logo-text { font-size: 0.8125rem; letter-spacing: -0.03em; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 9.5rem; } .nav__toggle { display: flex; order: 2; margin-left: auto; width: 2.5rem; height: 2.5rem; margin-right: 0; z-index: 2; } .nav__toggle span { width: 1.125rem; height: 1.5px; } .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .nav > .nav__cta { display: none; } .nav__menu { display: flex; order: 3; flex: 0 0 0; width: 0; min-width: 0; flex-direction: column; align-items: stretch; gap: 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s ease, opacity 0.35s ease, margin-top 0.35s ease; margin-top: 0; padding-top: 0; border-top: 1px solid transparent; } .nav__menu.nav__menu--open { flex: 1 1 100%; width: 100%; max-height: min(70vh, 36rem); overflow-y: auto; opacity: 1; margin-top: var(--space-12); padding-top: var(--space-12); border-top-color: var(--border-glass); } .nav__link { padding: var(--space-8) 0; min-height: 2.75rem; display: flex; align-items: center; font-size: 0.875rem; } .nav__menu .nav__cta { display: inline-flex; width: 100%; margin-top: var(--space-8); min-height: 2.75rem; padding: var(--space-8) var(--space-16); font-size: 0.75rem; justify-content: center; } } /* ===================== ABOUT PAGE ===================== */ .about-hero { min-height: var(--section-vh); display: flex; flex-direction: column; padding: var(--frame-pad); box-sizing: border-box; } .about-hero__media { position: relative; flex: 1; width: 100%; height: auto; min-height: calc(var(--section-vh) - 2 * var(--frame-pad)); border-radius: var(--radius-card); overflow: hidden; background-color: var(--color-placeholder); display: flex; align-items: center; justify-content: center; padding: var(--content-x); box-sizing: border-box; container-type: inline-size; } .about-hero__image { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; } .about-hero__overlay { position: absolute; inset: 0; z-index: 1; background: var(--about-hero-overlay); pointer-events: none; } .about-hero__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(0.75rem, 2cqi, 1.75rem); max-width: 90%; } .about-hero__kicker { font-family: var(--font-sans); font-size: clamp(0.7rem, 1.4cqi, 0.875rem); font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); padding: 0.45rem 0.9rem 0.45rem calc(0.9rem + 0.32em); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; backdrop-filter: blur(4px); background: rgba(0, 0, 0, 0.08); } .about-hero__title { position: relative; z-index: 2; font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-about-hero); line-height: 0.92; letter-spacing: -0.03em; text-transform: uppercase; color: var(--color-white); text-align: center; max-width: 18ch; text-shadow: 0 2px 1.5rem rgba(0, 0, 0, 0.45), 0 1px 0 rgba(0, 0, 0, 0.25); margin: 0; overflow-wrap: anywhere; hyphens: auto; } /* ======================================================= ABOUT HERO — TYPOGRAPHY VARIANTS (pilih 1 saja) Cara ganti: di file about-hero.php, tambahkan salah satu class variant di tag h1, contoh:

======================================================= */ /* VARIAN 1 — EDITORIAL LUXURY Tujuan: terasa "curated & discerning", bukan cuma motoran. Cocok buat positioning "luxury overland curator". Drop caps-style: baris pertama accent orange tipis di samping. */ .about-hero__title--editorial { font-family: var(--font-heading); font-weight: 600; text-transform: none; letter-spacing: -0.04em; line-height: 0.88; font-size: clamp(2.2rem, 9cqi, 7.5rem); } .about-hero__title--editorial::before { content: ''; display: block; width: 4.5ch; height: 2px; margin: 0 auto 1.2rem; background: var(--color-accent); } /* VARIAN 2 — MOTO DISPLAY Tujuan: aggressive, "addict", nyambung ke karakter motor. Stretched condensed, tracked-out besar, berat 900. Cocok buat hero title "Overland Addict" saat ini. */ .about-hero__title--moto-display { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; font-stretch: condensed; line-height: 0.85; font-size: clamp(2.4rem, 11.5cqi, 10rem); color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.95); background-image: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.82) 55%, rgba(255,255,255,0) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.5)); } /* VARIAN 3 — NOMAD HAND-PAINTED FEEL Tujuan: perjalanan, storytelling, intimate, bukan racing. Italic heavy, sedikit condong, baris kedua lebih kecil accent warna. */ .about-hero__title--nomad { font-family: var(--font-heading); font-weight: 700; font-style: italic; text-transform: none; letter-spacing: -0.02em; line-height: 1; font-size: clamp(2rem, 8.5cqi, 7rem); } .about-hero__title--nomad .about-hero__accent { display: block; font-weight: 800; font-style: normal; font-size: 58%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); margin-top: 0.6rem; } .about-intro .container { display: flex; flex-direction: column; gap: var(--stack-gap); } .about-intro .eyebrow { display: block; margin: 0; } .about-intro__grid { display: grid; grid-template-columns: 1fr; gap: var(--section-flow); align-items: start; } .about-intro__heading { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--color-white); } .about-intro__body { display: flex; flex-direction: column; gap: var(--stack-gap); } .our-philosophy__inner { display: grid; grid-template-columns: 1fr; gap: var(--section-gap); align-items: center; } .our-philosophy__media { position: relative; width: 100%; max-width: 26rem; margin-inline: auto; aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; background-color: var(--color-placeholder); } .our-philosophy__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.35)); } .our-philosophy__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .our-philosophy__media:hover img { transform: scale(1.04); } .our-philosophy__text { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; } .our-philosophy__eyebrow { display: inline-flex; align-items: center; gap: var(--space-12); color: var(--color-accent); } .our-philosophy__eyebrow::after { content: ""; width: var(--space-40); height: 1px; background-color: var(--color-accent); opacity: 0.6; } .our-philosophy__quote { position: relative; margin: 0; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-quote); line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--color-white); } .our-philosophy__quote::before { content: "\201C"; position: absolute; left: -0.15em; top: -0.5em; font-family: var(--font-heading); font-size: 3em; line-height: 1; color: var(--color-accent); opacity: 0.18; pointer-events: none; } .vision__inner { display: grid; grid-template-columns: 1fr; gap: var(--section-flow); align-items: stretch; } .vision__lead { display: flex; flex-direction: column; gap: var(--stack-gap); } .vision__card { height: 100%; background-color: transparent; border: 1px solid var(--border-glass); border-radius: var(--radius-card); padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--space-16); transition: transform 0.25s ease, border-color 0.25s ease; } .vision__card:hover { transform: translateY(-0.25rem); border-color: var(--border-white-30); } .vision__card--filled { background-color: var(--color-surface); border-color: var(--color-surface); } .vision__accent { display: block; width: var(--accent-bar-w); max-width: 50%; height: var(--accent-bar-h); border-radius: var(--radius-pill); background-color: var(--color-accent-alt); } .vision__card-title { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-h3); letter-spacing: -0.01em; color: var(--color-white); } .vision__list { display: flex; flex-direction: column; gap: var(--space-12); } .vision__list li { position: relative; padding-left: var(--space-32); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); } .vision__list li::before { content: ''; position: absolute; left: 0; top: 0.15em; width: var(--space-20); height: var(--space-20); border-radius: var(--radius-pill); background-color: rgba(239, 90, 68, 0.15); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ef5a44' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } @media (min-width: 768px) { .about-intro__grid { grid-template-columns: 1fr 1fr; } .our-philosophy__inner { grid-template-columns: minmax(0, 0.55fr) 1fr; gap: var(--space-48); } .our-philosophy__media { aspect-ratio: 1 / 1; } .vision__inner { grid-template-columns: 1fr 1fr; gap: var(--section-flow); } .vision__lead { grid-column: 1 / -1; } } @media (min-width: 1024px) { .vision__inner { grid-template-columns: minmax(12rem, 20rem) 1fr 1fr; } .vision__lead { grid-column: auto; } } /* ===================== CONTACT FEEDBACK (server-side) ===================== */ .contact__status--error { color: var(--color-error); } .contact__errors { width: 100%; margin-top: var(--space-4); padding: 0; list-style: none; text-align: center; } .contact__errors li { font-size: var(--fs-label); color: var(--color-error); line-height: var(--lh-body); } /* ===================== LOGO (with text fallback) ===================== */ .nav__logo-link { display: inline-flex; align-items: center; } .nav__logo-text, .footer__logo-text { font-family: var(--font-heading); font-weight: 800; font-size: 1.125rem; letter-spacing: -0.02em; color: var(--color-white); white-space: nowrap; } /* ===================== AWARD (Why Choose Us — About) ===================== */ .award__card { width: 100%; background-color: var(--color-surface); border-radius: var(--radius-card); padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--section-gap); } .award__eyebrow { margin: 0; font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted-2); } .award__grid { display: grid; grid-template-columns: 1fr; gap: var(--stack-gap); align-items: start; } .award__grid > * { min-width: 0; } .award__panel { order: -1; display: flex; flex-direction: column; gap: var(--stack-gap); } .award__heading { margin: 0; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: clamp(1.5rem, 5vw, 2.25rem); line-height: var(--heading-lh); letter-spacing: var(--heading-tracking); color: var(--color-muted); } .award__heading strong { font-weight: var(--heading-weight-emphasis); color: var(--color-white); } /* List — native
accordion */ .award__list { display: flex; flex-direction: column; } .award-item { border-radius: var(--radius-md); border-bottom: 1px solid var(--border-glass); transition: background-color 0.2s ease; } .award-item:last-child { border-bottom: 0; } .award-item[open] { background-color: var(--color-dark-373); border-bottom-color: transparent; } .award-item__summary { display: grid; grid-template-columns: 3.5rem 1fr auto; align-items: center; gap: var(--space-16); padding: var(--space-20) var(--space-16); cursor: pointer; list-style: none; } .award-item__summary::-webkit-details-marker { display: none; } .award-item:not([open]) .award-item__summary:hover { background-color: rgba(255, 255, 255, 0.04); border-radius: var(--radius-md); } .award-item__summary:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-md); } .award-item__no { font-size: var(--fs-base); color: var(--color-muted); } .award-item__title { font-family: var(--font-heading); font-weight: var(--heading-weight-sub); font-size: var(--fs-base); line-height: var(--heading-lh); letter-spacing: var(--heading-tracking-sub); color: var(--color-white); } .award-item[open] .award-item__no { color: var(--color-white); } .award-item__arrow { display: flex; align-items: center; justify-content: center; width: var(--touch-min); height: var(--touch-min); border-radius: var(--radius-pill); border: 1px solid var(--border-white-30); color: var(--color-white); transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease; } .award-item[open] .award-item__arrow { transform: rotate(-45deg); background-color: var(--color-white); color: var(--color-icon-dark); border-color: var(--color-white); } .award-item__desc { margin: 0; padding: 0 var(--space-16) var(--space-20) calc(3.5rem + var(--space-16)); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); } /* Media */ .award__media { margin: 0; display: flex; flex-direction: column; gap: var(--space-12); } .award__image { width: 100%; max-height: clamp(9rem, 24dvh, 15rem); border-radius: var(--radius-md); object-fit: cover; aspect-ratio: 16 / 10; } .award__caption { display: flex; flex-direction: column; gap: var(--space-4); } .award__caption-title { margin: 0; font-size: var(--fs-body); color: var(--color-white); } .award__caption-desc { margin: 0; font-size: var(--fs-label); line-height: var(--lh-body); color: var(--color-muted); } @media (min-width: 768px) { .award__card { gap: var(--section-gap); } .award__grid { grid-template-columns: 1fr 1fr; gap: var(--section-gap); align-items: center; } .award__panel { order: 0; gap: var(--section-gap); } .award__heading { text-align: right; } .award__image { max-height: clamp(11rem, 30dvh, 17rem); } } @media (min-width: 1024px) { .award__grid { grid-template-columns: 1.1fr 1fr; gap: var(--space-64); } .award__heading { font-size: clamp(2rem, 3vw, 2.75rem); } } /* ===================== TOUR PARTNERS (About) — bordered logo grid ===================== */ .partners__header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); margin-bottom: var(--section-gap); } .partners__intro { display: flex; flex-direction: column; gap: var(--space-12); max-width: 28rem; } .partners__title { margin: 0; font-family: var(--font-heading); font-size: clamp(1.75rem, 5vw, 3rem); font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); line-height: var(--heading-lh); color: var(--color-white); } .partners__lead { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); } .partners__cta { display: inline-flex; align-items: center; gap: var(--space-8); padding-bottom: var(--space-8); border-bottom: 1px solid var(--color-white); color: var(--color-white); font-size: var(--fs-body); font-weight: 500; text-decoration: none; line-height: 1.3; } .partners__cta:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); } .partners__cta-arrow { line-height: 1; } .partners__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--border-glass); border-radius: var(--radius-md); overflow: hidden; background: transparent; } .partners__cell { min-height: 7rem; border-right: 1px solid var(--border-glass); border-bottom: 1px solid var(--border-glass); } /* hapus border luar ganda di tepi kanan / bawah tiap baris */ .partners__cell:nth-child(2n) { border-right: 0; } .partners__cell:nth-last-child(-n+2) { border-bottom: 0; } .partners__card { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 7rem; padding: var(--space-16); text-decoration: none; color: var(--color-white); text-align: center; transition: background-color 0.15s ease, color 0.15s ease; } a.partners__card:hover { background: var(--glass-bg); color: var(--color-accent); } /* Stamp bundar: slot kotak sama, warna asli, tanpa filter/blend */ .partners__logo { display: block; width: 4.75rem; height: 4.75rem; object-fit: contain; object-position: center; } .partners__name { font-family: var(--font-heading); font-size: clamp(0.8rem, 2.2vw, 1rem); font-weight: var(--heading-weight-sub); letter-spacing: var(--heading-tracking-sub); line-height: 1.25; } .partners__card--more { font-size: var(--fs-body); font-weight: 500; color: var(--color-white); } @media (min-width: 768px) { .partners__header { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-32); } .partners__cta { flex-shrink: 0; } .partners__grid { grid-template-columns: repeat(4, 1fr); } .partners__cell { min-height: 9rem; border-right: 1px solid var(--border-glass); border-bottom: 1px solid var(--border-glass); } .partners__cell:nth-child(2n) { border-right: 1px solid var(--border-glass); } .partners__cell:nth-child(4n) { border-right: 0; } .partners__cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--border-glass); } .partners__cell:nth-last-child(-n+4) { border-bottom: 0; } .partners__card { min-height: 9rem; padding: var(--space-24); } .partners__logo { width: 6rem; height: 6rem; } } /* ===================== TEAM (About) ===================== */ .team__header { display: flex; flex-direction: column; gap: var(--space-8); margin-bottom: var(--section-gap); } .team__eyebrow { font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted-2); } .team__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-16); } .team-card { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; border-radius: var(--radius-card); overflow: hidden; background-color: var(--color-placeholder); border: 1px solid var(--border-glass); transition: transform 0.25s ease, box-shadow 0.25s ease; } .team-card:hover { transform: translateY(-0.375rem); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.35); } .team-card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .team-card:hover .team-card__photo { transform: scale(1.05); } .team-card__photo--fallback { display: flex; align-items: center; justify-content: center; background-image: linear-gradient(135deg, var(--color-accent), var(--color-accent-alt)); color: var(--color-white); font-family: var(--font-heading); font-weight: var(--heading-weight-emphasis); font-size: clamp(2rem, 8vw, var(--fs-hero)); line-height: 1; letter-spacing: 0.02em; text-align: center; } .team-card__pill { position: absolute; z-index: 1; left: var(--space-12); right: var(--space-12); bottom: var(--space-12); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: var(--space-8) var(--space-16); border-radius: var(--radius-pill); background: var(--glass-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--border-glass); } .team-card__name { font-family: var(--font-heading); font-weight: var(--heading-weight-sub); font-size: var(--fs-base); line-height: var(--heading-lh); color: var(--color-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .team-card__role { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-80); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } @media (min-width: 768px) { .team__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-24); } } @media (min-width: 1024px) { .team__grid { grid-template-columns: repeat(5, 1fr); } } /* ===================== MOTOR CENTER ===================== */ .motor-hero { padding-top: calc(var(--nav-offset) + var(--section-y)); padding-bottom: var(--section-gap); } .motor-units { padding-top: 0; padding-bottom: var(--section-gap); scroll-margin-top: calc(var(--nav-offset) + var(--space-16)); } .motor-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); } .motor-hero__title { font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--color-white); margin: 0; } .motor-hero__sub { max-width: 44rem; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); margin: 0; } .motor-jump { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-4); } .motor-jump__link { display: inline-flex; align-items: center; min-height: var(--touch-min); padding: var(--space-8) var(--space-16); border-radius: var(--radius-pill); border: 1px solid var(--border-glass); background-color: var(--glass-bg); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.04em; color: var(--color-muted); text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease; } .motor-jump__link:hover { color: var(--color-white); border-color: var(--color-accent); } .motor-units__list { display: flex; flex-direction: column; gap: var(--section-gap); } .unit { display: flex; flex-direction: column; gap: var(--section-gap); padding: var(--card-pad); background-color: var(--color-surface); border: 1px solid var(--border-glass); border-radius: var(--radius-card); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .unit:hover { transform: translateY(-0.25rem); border-color: var(--border-white-30); } .unit--featured { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent), 0 1.5rem 3rem rgba(239, 90, 68, 0.12); } .unit--featured:hover { border-color: var(--color-accent); } .unit__media { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background-color: var(--color-placeholder); } .unit__img { width: 100%; height: 100%; object-fit: cover; } .unit__role { position: absolute; top: var(--space-12); left: var(--space-12); padding: var(--space-4) var(--space-12); border-radius: var(--radius-pill); background-color: var(--color-overlay); backdrop-filter: blur(4px); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-white); } .unit--featured .unit__role { background-color: var(--color-accent); } .unit__body { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; } .unit__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-8) var(--space-16); } .unit__name { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--color-white); margin: 0; } .unit__tagline { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); margin: 0; } .unit__specs { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; } .unit__spec { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-16); padding: var(--space-12) 0; border-top: 1px solid var(--border-glass); } .unit__spec-label { font-size: var(--fs-body); color: var(--color-muted); margin: 0; } .unit__spec-value { font-size: var(--fs-body); font-weight: 600; color: var(--color-white); margin: 0; text-align: right; } .unit__setup { display: flex; flex-direction: column; gap: var(--space-12); } .unit__setup-label { font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); } .unit__setup-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-8); } .unit__chip { padding: var(--space-8) var(--space-12); border-radius: var(--radius-pill); border: 1px solid var(--border-glass); background-color: rgba(255, 255, 255, 0.03); font-size: var(--fs-label); color: var(--text-80); transition: border-color 0.2s ease, color 0.2s ease; } .unit__chip:hover { border-color: var(--color-accent); color: var(--color-white); } .motor-note { display: flex; align-items: flex-start; gap: var(--space-12); padding: var(--space-16) var(--space-20); border: 1px solid var(--border-glass); border-left: var(--border-thick) solid var(--color-accent); border-radius: var(--radius-md); background-color: rgba(239, 90, 68, 0.06); } .motor-note__icon { flex-shrink: 0; display: flex; color: var(--color-accent); margin-top: 0.1rem; } .motor-note__text { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-80); } @media (min-width: 768px) { .motor-hero__title { font-size: clamp(2.5rem, 5vw, 3.5rem); } .unit { flex-direction: row; align-items: stretch; gap: var(--section-gap); } .unit__media { flex: 0 0 42%; aspect-ratio: auto; align-self: stretch; } .unit__body { flex: 1 1 0; } .unit__specs { grid-template-columns: 1fr 1fr; column-gap: var(--space-32); } } /* Support — crew / vehicle / mechanic */ .motor-support { padding-top: var(--section-gap); padding-bottom: var(--section-gap); scroll-margin-top: calc(var(--nav-offset) + var(--space-16)); } .motor-support__inner { display: flex; flex-direction: column; gap: var(--section-gap); } .motor-support__head { max-width: 44rem; } .motor-support__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-16); } .support-card { display: flex; flex-direction: column; gap: var(--space-12); min-width: 0; padding: var(--card-pad); background-color: var(--color-surface); border: 1px solid var(--border-glass); border-radius: var(--radius-card); } .support-card__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-8); } .support-card__label { font-family: var(--font-heading); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; color: var(--color-accent); } .support-card__role { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted-2); } .support-card__title { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-tight); color: var(--color-white); } .support-card__text { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); } .support-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); } .support-card__list li { position: relative; padding-left: var(--space-20); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-80); } .support-card__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-pill); background-color: var(--color-accent); } .support-card__quote { margin: var(--space-4) 0 0; padding-top: var(--space-12); border-top: 1px solid var(--border-glass); font-size: var(--fs-body); line-height: var(--lh-body); font-style: italic; color: var(--color-muted-2); } @media (min-width: 768px) { .motor-support__grid { grid-template-columns: repeat(3, 1fr); } } /* ===================== LEGAL PAGE (Terms / Privacy) ===================== */ .legal { padding-top: calc(var(--nav-offset) + var(--section-y)); } .legal__inner { display: flex; flex-direction: column; gap: var(--section-gap); } .legal__head { display: flex; flex-direction: column; gap: var(--space-12); max-width: 48rem; } .legal__title { font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--color-white); margin: 0; } .legal__updated { font-size: var(--fs-label); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted-2); margin: 0; } .legal__intro { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--color-muted); margin: 0; } .legal__layout { display: grid; grid-template-columns: 1fr; gap: var(--section-gap); align-items: start; } /* TOC — chips on mobile, sidebar on desktop */ .legal__toc { display: flex; flex-direction: column; gap: var(--space-12); } .legal__toc-label { font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); } .legal__toc-list { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: flex; flex-direction: column; gap: var(--space-4); } .legal__toc-list a { display: block; padding: var(--space-8) var(--space-12); border-radius: var(--radius-sm); font-size: var(--fs-body); color: var(--color-muted); text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease; } .legal__toc-list a:hover { color: var(--color-white); background-color: rgba(255, 255, 255, 0.04); } .legal__content { display: flex; flex-direction: column; gap: var(--section-gap); min-width: 0; } .legal-section { display: flex; flex-direction: column; gap: var(--space-12); scroll-margin-top: calc(var(--nav-offset) + var(--space-16)); } .legal-section__title { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-tight); color: var(--color-white); margin: 0; } .legal-section__body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); margin: 0; max-width: 52rem; } .legal-section__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-12); max-width: 52rem; } .legal-section__list li { position: relative; padding-left: var(--space-24); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); } .legal-section__list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-pill); background-color: var(--color-accent); } @media (min-width: 768px) { .legal__title { font-size: clamp(2.5rem, 5vw, 3.25rem); } } @media (min-width: 1024px) { .legal__layout { grid-template-columns: minmax(0, 16rem) 1fr; gap: var(--space-64); } .legal__toc { position: sticky; transition: top 0.35s ease; top: calc(var(--sticky-offset) + var(--space-16)); } } /* ===================== TRIP DETAIL (/tours/{slug}) ===================== */ /* Mobile-first: media on top, text below. Desktop: text | media. Tokens only. */ .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); font-size: var(--fs-label); color: var(--color-muted-2); } .breadcrumb__link { color: var(--color-muted); text-decoration: none; transition: color 0.2s ease; } .breadcrumb__link:hover { color: var(--color-white); } .breadcrumb__sep { color: var(--color-muted-2); } .breadcrumb__current { color: var(--color-white); } .trip-related__head { max-width: 44rem; margin-bottom: var(--section-gap); } .trip-related__head .lede { margin: 0; } .trip-cta__banner { position: relative; overflow: hidden; border-radius: var(--radius-card); padding: var(--space-48) var(--card-pad); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-16); min-height: 16rem; justify-content: center; } .trip-cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .trip-cta__banner::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.7)); } .trip-cta__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--space-16); max-width: 40rem; } .trip-cta__title { margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.75rem, 5vw, 3rem); line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--color-white); } .trip-cta__text { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-80); } .trip-hero { padding-top: calc(var(--nav-offset) + var(--section-pad-y)); padding-bottom: var(--section-gap); } .trip-hero__inner { display: flex; flex-direction: column; gap: var(--stack-gap); } .trip-hero__back { align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--touch-min); padding-block: var(--space-8); font-size: var(--fs-body); color: var(--color-muted); transition: color 0.2s ease; } .trip-hero__back:hover { color: var(--color-white); } .trip-hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--section-gap); align-items: start; } .trip-hero__media { order: -1; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; background-color: var(--color-placeholder); } .trip-hero__media img { width: 100%; height: 100%; object-fit: cover; } .trip-hero__text { align-items: flex-start; min-width: 0; } .trip-hero__title { margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--color-white); overflow-wrap: anywhere; } .trip-hero__character { max-width: 40rem; } /* Meta as editorial line (not pill cluster) */ .trip-hero__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); width: 100%; } .trip-hero__meta-item { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-80); padding-left: var(--space-12); border-left: var(--border-thick) solid var(--color-accent); } .trip-hero__cta { margin-top: var(--space-4); } .trip-section { display: flex; flex-direction: column; gap: var(--stack-gap); } .trip-section__head { max-width: 44rem; } /* Short sections side-by-side on md+ (Overview|Character, Highlights|Notes) */ .trip-split { display: grid; grid-template-columns: 1fr; gap: var(--section-gap); align-items: start; } .trip-split__col { display: flex; flex-direction: column; gap: var(--stack-gap); min-width: 0; } .trip-split .factlist, .trip-split .highlight-list, .trip-split .trip-note { max-width: none; } .trip-note--flush { width: 100%; } /* facts — stack on narrow; side-by-side from sm */ .factlist { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; max-width: 44rem; } .factlist__row { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-12) 0; border-top: 1px solid var(--border-glass); } .factlist__row:last-child { border-bottom: 1px solid var(--border-glass); } .factlist__label { margin: 0; font-size: var(--fs-label); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); } .factlist__value { margin: 0; font-size: var(--fs-body); font-weight: 600; line-height: var(--lh-body); color: var(--color-white); overflow-wrap: anywhere; } .highlight-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-12); max-width: 52rem; } .highlight-list__item { position: relative; padding-left: var(--space-24); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); } .highlight-list__item::before { content: ""; position: absolute; left: 0; top: 0.55em; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-pill); background-color: var(--color-accent); } .itinerary { display: flex; flex-direction: column; gap: var(--space-12); } .itin-day { border: 1px solid var(--border-glass); border-radius: var(--radius-md); background-color: var(--color-surface); overflow: hidden; } .itin-day__summary { list-style: none; display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: var(--space-12); min-height: var(--touch-min); padding: var(--space-16); cursor: pointer; } .itin-day__summary::-webkit-details-marker { display: none; } .itin-day__num { padding-top: var(--space-4); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); white-space: nowrap; } .itin-day__title { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-base); line-height: var(--lh-body); color: var(--color-white); overflow-wrap: anywhere; } .itin-day__chevron { margin-top: var(--space-8); width: var(--space-8); height: var(--space-8); border-right: var(--border-thick) solid var(--color-white); border-bottom: var(--border-thick) solid var(--color-white); transform: rotate(45deg); transition: transform 0.25s ease; } .itin-day[open] .itin-day__chevron { transform: rotate(-135deg); } .itin-day__body { padding: 0 var(--space-16) var(--space-16); display: flex; flex-direction: column; gap: var(--space-12); } .itin-day__stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); } .itin-day__stops li { position: relative; padding-left: var(--space-20); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); } .itin-day__stops li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: var(--space-4); height: var(--space-4); border-radius: var(--radius-pill); background-color: var(--border-white-30); } .itin-day__loc { margin: 0; font-size: var(--fs-label); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted-2); } .inex { display: grid; grid-template-columns: 1fr; gap: var(--section-gap); } .inex__head { margin: 0 0 var(--space-12); font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-h3); color: var(--color-white); } .inex__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); } .inex__list li { position: relative; padding-left: var(--space-24); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); } .inex__list li::before { position: absolute; left: 0; top: 0; font-weight: 700; } .inex__list--in li::before { content: "+"; color: var(--color-accent); } .inex__list--ex li::before { content: "–"; color: var(--color-muted-2); } .cost-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-16); } .cost { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); padding: var(--card-pad); background-color: var(--color-surface); border: 1px solid var(--border-glass); border-radius: var(--radius-card); } .cost__type { font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); } .cost__name { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-tight); color: var(--color-white); } .cost__price { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-tight); color: var(--color-white); } .cost__unit { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-label); color: var(--color-muted); } .cost__cta { margin-top: var(--space-4); background-color: transparent; border: 1px solid var(--color-accent); color: var(--color-accent); } .cost__cta:hover { background-color: var(--color-accent); color: var(--color-white); } .trip-fineprint { margin: 0; max-width: 52rem; font-size: var(--fs-label); line-height: var(--lh-body); color: var(--color-muted-2); } .trip-fineprint a { color: var(--color-accent); } .trip-terms__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-12); max-width: 52rem; } .trip-terms__list li { position: relative; padding-left: var(--space-24); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); } .trip-terms__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-pill); background-color: var(--color-accent); } .trip-note { display: flex; align-items: flex-start; gap: var(--space-12); width: 100%; max-width: 52rem; padding: var(--space-16) var(--space-20); border: 1px solid var(--border-glass); border-left: var(--border-thick) solid var(--color-accent); border-radius: var(--radius-md); background-color: color-mix(in srgb, var(--color-accent) 8%, transparent); } .trip-note__icon { flex-shrink: 0; display: flex; color: var(--color-accent); margin-top: var(--space-4); } .trip-note__body { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; } .trip-note__label { font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); } .trip-note__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); } .trip-note__list li { position: relative; padding-left: var(--space-16); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-80); } .trip-note__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: var(--space-4); height: var(--space-4); border-radius: var(--radius-pill); background-color: var(--color-accent); } @media (min-width: 576px) { .factlist__row { flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--space-16); } .factlist__label { font-size: var(--fs-body); letter-spacing: normal; text-transform: none; } .factlist__value { text-align: right; } .trip-hero__meta { flex-direction: row; flex-wrap: wrap; gap: var(--space-16); } .trip-hero__meta-item { padding-left: var(--space-12); } } @media (min-width: 768px) { .trip-hero { padding-top: calc(var(--nav-offset) + var(--section-y)); } .trip-hero__inner { gap: var(--space-24); } .trip-hero__title { font-size: clamp(2.5rem, 5vw, 3.25rem); } .trip-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--section-gap); align-items: center; } .trip-hero__media { order: 0; aspect-ratio: 5 / 4; } .trip-hero__text { order: -1; } .trip-section { gap: var(--section-gap); } .trip-split:not(.trip-split--solo) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-48); } .itin-day__summary { align-items: center; gap: var(--space-16); padding: var(--space-16) var(--space-20); } .itin-day__body { padding: 0 var(--space-20) var(--space-20); } .itin-day__chevron { margin-top: 0; } .inex { grid-template-columns: 1fr 1fr; gap: var(--space-48); } .cost-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .trip-hero__grid { gap: var(--space-64); } .trip-hero__media { aspect-ratio: 4 / 3; } } /* ===================== TOURS LISTING (/tours) ===================== */ .tours-hero { padding-top: calc(var(--nav-offset) + var(--section-pad-y)); padding-bottom: var(--space-24); } .tours-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); width: 100%; min-width: 0; } .tours-hero__title { margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--color-white); } .tours-hero__sub { margin: 0; max-width: 46rem; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); } .tours-hero__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-16) var(--space-24); } .tours-hero__meta-item { font-size: var(--fs-body); color: var(--color-muted); } .tours-hero__meta-item strong { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h3); color: var(--color-white); margin-right: var(--space-4); } .tours-hero__empty { margin: 0; font-size: var(--fs-body); color: var(--color-muted); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .tours-search { width: 100%; } .tours-search__box { position: relative; display: flex; flex-direction: row; align-items: center; width: 100%; min-width: 0; min-height: 3.25rem; padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16); gap: var(--space-12); background-color: var(--color-surface); border: 1px solid var(--border-glass); border-radius: var(--radius-pill); } .tours-search__box:focus-within { border-color: color-mix(in srgb, var(--color-accent) 55%, var(--border-glass)); } .tours-search__icon { flex-shrink: 0; color: var(--color-muted); } .tours-search__pills { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; gap: var(--space-8); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tours-search__pills::-webkit-scrollbar { display: none; } .tours-search__input { flex: 1 1 6rem; min-width: 5rem; border: 0; background: transparent; color: var(--color-white); font-family: var(--font-body); font-size: 1rem; line-height: var(--lh-body); } .tours-search__input::placeholder { color: var(--color-muted); } .tours-search__input:focus { outline: none; } .tours-search__pill { display: inline-flex; align-items: center; flex-shrink: 0; gap: var(--space-4); max-width: 12rem; min-height: 2rem; padding: 0 var(--space-4) 0 var(--space-12); border-radius: var(--radius-pill); background-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-surface)); color: var(--color-white); font-size: var(--fs-label); font-weight: 600; white-space: nowrap; } .tours-search__pill > span { overflow: hidden; text-overflow: ellipsis; } .tours-search__pill[hidden] { display: none !important; } .tours-search__pill-x { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; border: 0; border-radius: 50%; background: transparent; color: var(--color-white); font-size: 1rem; line-height: 1; cursor: pointer; } .tours-search__actions { display: flex; flex-shrink: 0; align-items: center; gap: var(--space-4); } .tours-search__reset { padding: var(--space-8); font-size: var(--fs-label); font-weight: 700; color: var(--color-accent-alt); text-decoration: none; white-space: nowrap; } .tours-search__reset.is-empty { display: none; } .tours-search__reset:hover, .tours-search__reset:focus-visible { color: var(--color-white); } .tours-search__go { display: inline-flex; align-items: center; justify-content: center; width: var(--touch-min); height: var(--touch-min); min-width: var(--touch-min); min-height: var(--touch-min); border: 0; border-radius: 50%; background-color: var(--color-accent-alt); color: var(--color-white); } .tours-search__go:hover { opacity: 0.92; } .tours-search__go:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; } .tours-search__list { position: absolute; z-index: 6; top: calc(100% + var(--space-8)); left: 0; right: 0; width: auto; margin: 0; padding: var(--space-8); max-height: min(22rem, 70vh); overflow-y: auto; background-color: var(--color-surface); border: 1px solid var(--border-glass); border-radius: var(--radius-md); } .tours-search__acc-btn { display: flex; align-items: center; gap: var(--space-8); width: 100%; min-height: var(--touch-min); padding: var(--space-8) var(--space-12); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-white); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 700; text-align: left; cursor: pointer; } .tours-search__acc-btn:hover, .tours-search__acc-btn:focus-visible { background-color: color-mix(in srgb, var(--color-accent) 14%, transparent); } .tours-search__acc-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .tours-search__acc[hidden] { display: none !important; } .tours-search__acc-n { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 var(--space-4); border-radius: var(--radius-pill); background-color: var(--color-accent); color: var(--color-white); font-size: var(--fs-label); font-weight: 700; } .tours-search__acc-chev { flex-shrink: 0; color: var(--color-muted); transition: transform 0.2s ease; } .tours-search__acc.is-open .tours-search__acc-chev { transform: rotate(180deg); } .tours-search__acc-body { display: flex; flex-direction: column; padding: 0 var(--space-12) var(--space-8) var(--space-20); } .tours-search__acc-body[hidden] { display: none !important; } .tours-search__check { display: flex; align-items: center; gap: var(--space-12); min-height: var(--touch-min); color: var(--color-white); font-size: var(--fs-body); cursor: pointer; } .tours-search__check input { width: 1.125rem; height: 1.125rem; flex-shrink: 0; accent-color: var(--color-accent); } /* region jump — mobile: horizontal scroll; md+: wrap */ .tours-jump { width: 100%; max-width: 100%; margin-top: var(--space-8); min-width: 0; } .tours-jump__inner { display: flex; flex-wrap: nowrap; gap: var(--space-8); width: 100%; overflow-x: auto; overflow-y: hidden; padding-block: var(--space-4); padding-inline: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; } .tours-jump__inner::-webkit-scrollbar { display: none; } .tours-jump__link { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-min); padding: var(--space-8) var(--space-16); border-radius: var(--radius-pill); border: 1px solid var(--border-glass); background-color: var(--glass-bg); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.04em; color: var(--color-muted); text-decoration: none; white-space: nowrap; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .tours-jump__link:hover, .tours-jump__link:focus-visible { color: var(--color-white); border-color: var(--color-accent); background-color: color-mix(in srgb, var(--color-accent) 12%, transparent); } .tours-regions { padding-top: var(--section-gap); } .tours-regions__list { display: flex; flex-direction: column; gap: var(--section-y); } .tours-region { display: flex; flex-direction: column; gap: var(--stack-gap); scroll-margin-top: calc(var(--nav-offset) + var(--space-16)); } .tours-region__head { display: flex; flex-direction: column; gap: var(--space-12); width: 100%; max-width: none; padding-bottom: var(--space-16); border-bottom: 1px solid var(--border-glass); } .tours-region__heading { display: flex; flex-direction: column; gap: var(--space-8); width: 100%; min-width: 0; } .tours-region__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-12); width: 100%; } .tours-region__title-row .section-title { margin: 0; min-width: 0; flex: 1 1 auto; font-size: clamp(1.25rem, 5vw, var(--fs-h2)); overflow-wrap: anywhere; } .tours-region__count { flex-shrink: 0; margin-top: var(--space-4); padding: var(--space-4) var(--space-12); border-radius: var(--radius-pill); border: 1px solid var(--border-glass); background-color: var(--glass-bg); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted-2); white-space: nowrap; } .tours-region__desc { margin: 0; max-width: 46rem; } .tours-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-12); } .tour-card { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background-color: var(--color-placeholder); text-decoration: none; color: inherit; } .tour-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } .tour-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .tour-card:hover .tour-card__img { transform: scale(1.05); } .tour-card__body { position: absolute; inset: auto 0 0 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-20) var(--space-16) var(--space-16); background: linear-gradient( 180deg, transparent 0%, rgba(0, 0, 0, 0.55) 40%, rgba(0, 0, 0, 0.88) 100% ); } .tour-card__terrain { display: inline-flex; align-items: center; max-width: 100%; padding: var(--space-4) var(--space-8); border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent); background-color: color-mix(in srgb, var(--color-accent) 14%, transparent); font-family: var(--font-body); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; color: var(--color-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tour-card__title { margin: 0; max-width: 100%; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--color-white); overflow-wrap: anywhere; } .tour-card__route { margin: 0; font-size: var(--fs-label); line-height: var(--lh-body); color: var(--text-80); } .tours-region__soon { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); padding: var(--card-pad); border: 1px dashed var(--border-white-30); border-radius: var(--radius-card); } .tours-region__soon-tag { padding: var(--space-4) var(--space-12); border-radius: var(--radius-pill); background-color: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .tours-region__soon-text { margin: 0; font-size: var(--fs-body); color: var(--color-muted); } .tours-cta { border-top: 0; } .tours-cta__banner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-20); padding: var(--space-24) var(--card-pad); background-color: var(--color-surface); border: 1px solid var(--border-glass); border-radius: var(--radius-card); } .tours-cta__text-wrap { display: flex; flex-direction: column; gap: var(--space-12); max-width: 40rem; } .tours-cta__title { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--color-white); } .tours-cta__text { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); } @media (min-width: 576px) { .tours-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-16); } .tours-jump__inner { flex-wrap: wrap; overflow-x: visible; } .tours-search__box { padding: var(--space-4) var(--space-4) var(--space-4) var(--space-20); min-height: 3.5rem; } .tours-search__pills { flex-wrap: wrap; overflow-x: visible; } .tours-search__pill { max-width: 16rem; } } @media (min-width: 768px) { .tours-hero { padding-top: calc(var(--nav-offset) + var(--section-y)); padding-bottom: var(--section-gap); } .tours-hero__title { font-size: clamp(2.5rem, 5vw, 3.5rem); } .tours-region { gap: var(--section-gap); } .tours-region__head { gap: var(--space-16); padding-bottom: var(--space-20); } .tours-region__title-row { align-items: center; } .tours-region__title-row .section-title { font-size: var(--fs-h2); } .tours-region__count { font-size: var(--fs-label); margin-top: 0; } .tours-grid { grid-template-columns: repeat(3, 1fr); } .tour-card:hover { transform: translateY(-0.25rem); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.35); } .tour-card { transition: transform 0.25s ease, box-shadow 0.25s ease; } .tours-cta__banner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--section-gap); padding: var(--section-gap); } .tours-cta__btn { flex-shrink: 0; } } @media (min-width: 1024px) { .tours-grid { grid-template-columns: repeat(4, 1fr); } } /* ===================== TRIP DETAIL — Scapia-style layout ===================== */ .trip-head { padding-top: calc(var(--nav-offset) + var(--section-y)); padding-bottom: 0; } .trip-head__row { display: flex; flex-direction: column; gap: var(--space-16); margin: var(--space-16) 0 var(--section-gap); } .trip-head__title-wrap { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; } .trip-head__title { margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: clamp(2rem, 5vw, 3.25rem); line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--color-white); } .trip-head__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-8); } .trip-head__meta-item { padding: var(--space-8) var(--space-16); border: 1px solid var(--border-glass); border-radius: var(--radius-pill); font-size: var(--fs-label); color: var(--text-80); } /* single hero shot (full width) */ .trip-hero-shot { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-card); overflow: hidden; background-color: var(--color-placeholder); } .trip-hero-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } /* two-column body: content + sticky booking card */ .trip-body { padding-top: var(--section-gap); } .trip-body__grid { display: grid; grid-template-columns: 1fr; gap: var(--section-gap); align-items: start; } .trip-body__main { min-width: 0; display: flex; flex-direction: column; gap: var(--section-y); } .trip-block { display: flex; flex-direction: column; gap: var(--space-16); } .trip-block__title { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--color-white); } .trip-block__text { margin: 0; max-width: 46rem; font-size: var(--fs-base); line-height: var(--lh-body); color: var(--color-muted); } /* ===================== NEWS ARTICLE DETAIL (ANTI-SLOP LUXURY EDITORIAL) ===================== */ .news-detail-head { padding-top: calc(var(--nav-offset) + var(--space-32)); padding-bottom: var(--space-24); } .news-detail__container { max-width: 52rem; margin-inline: auto; } .news-breadcrumb { display: flex; align-items: center; gap: var(--space-8); font-size: 0.8125rem; color: var(--color-muted); margin-bottom: var(--space-24); } .news-breadcrumb__back { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--color-accent); font-weight: 600; text-decoration: none; padding: var(--space-4) var(--space-12); background: rgba(239, 90, 68, 0.08); border: 1px solid rgba(239, 90, 68, 0.2); border-radius: var(--radius-pill); transition: all 0.2s ease; } .news-breadcrumb__back:hover { background: rgba(239, 90, 68, 0.18); transform: translateX(-2px); color: var(--color-white); } .news-breadcrumb__sep { color: var(--border-glass); } .news-breadcrumb__current { color: var(--text-80); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18rem; } .news-header { display: flex; flex-direction: column; gap: var(--space-16); margin-bottom: var(--space-32); } .news-header__tag { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); flex-wrap: wrap; } .news-header__read-time { display: inline-flex; align-items: center; gap: var(--space-8); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; color: var(--color-muted-2); text-transform: uppercase; } .news-header__title { margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: clamp(2.125rem, 5vw, 3.25rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--color-white); } .news-header__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding-top: var(--space-16); border-top: 1px solid var(--border-glass); flex-wrap: wrap; } .news-meta__author { display: flex; align-items: center; gap: var(--space-12); } .news-meta__avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: linear-gradient(135deg, var(--color-accent) 0%, #d14128 100%); color: var(--color-white); font-weight: 800; font-size: 0.8125rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(239, 90, 68, 0.3); } .news-meta__info { display: flex; flex-direction: column; gap: 0.125rem; } .news-meta__name { font-weight: 700; font-size: 0.9375rem; color: var(--color-white); } .news-meta__role { font-size: 0.75rem; color: var(--color-muted); } .news-meta__date { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-4) var(--space-16); background: var(--color-surface); border: 1px solid var(--border-glass); border-radius: var(--radius-pill); font-size: 0.8125rem; color: var(--text-80); } .news-hero-shot__wrap { width: 100%; border-radius: 1.25rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 24px 48px -8px rgba(0, 0, 0, 0.4); } .news-hero-shot { aspect-ratio: 16 / 9; max-height: 28rem; } .news-article-body { padding-top: var(--space-32); padding-bottom: var(--section-gap); } .news-content-body { max-width: 48rem; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-24); } .news-paragraph { margin: 0; font-size: 1.0625rem; line-height: 1.85; color: rgba(255, 255, 255, 0.82); letter-spacing: 0.005em; } .news-paragraph--lead { font-size: 1.21875rem; line-height: 1.75; color: var(--color-white); font-weight: 400; padding-left: var(--space-20); border-left: 3px solid var(--color-accent); margin-bottom: var(--space-8); } .news-subheading { position: relative; font-family: var(--font-heading); font-weight: 800; font-size: 1.5625rem; line-height: 1.3; color: var(--color-white); margin: var(--space-24) 0 var(--space-4); letter-spacing: -0.015em; display: flex; align-items: center; gap: var(--space-12); } .news-subheading::before { content: ""; display: inline-block; width: 0.35rem; height: 1.35rem; background-color: var(--color-accent); border-radius: var(--radius-pill); flex-shrink: 0; } .news-card-block { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-glass); border-radius: var(--radius-card); padding: var(--space-24); margin: var(--space-8) 0; backdrop-filter: blur(8px); box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.15); } .news-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-16); } .news-bullet-item { display: flex; align-items: flex-start; gap: var(--space-12); } .news-bullet-dot { flex-shrink: 0; width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: var(--color-accent); margin-top: 0.6rem; box-shadow: 0 0 10px rgba(239, 90, 68, 0.6); } .news-bullet-text { font-size: 1.03125rem; line-height: 1.7; color: rgba(255, 255, 255, 0.85); } .news-bullet-text strong { color: var(--color-white); font-weight: 700; } .news-num-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-16); } .news-num-item { display: flex; align-items: flex-start; gap: var(--space-16); } .news-num-badge { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(239, 90, 68, 0.14); border: 1px solid rgba(239, 90, 68, 0.3); color: var(--color-accent); font-weight: 800; font-size: 0.8125rem; font-family: var(--font-heading); } .news-num-text { font-size: 1.03125rem; line-height: 1.7; color: rgba(255, 255, 255, 0.85); padding-top: 0.15rem; } .news-num-text strong { color: var(--color-white); font-weight: 700; } .news-bullets__heading { list-style: none; margin: 0 0 var(--space-12); padding: 0; font-family: var(--font-heading); font-size: 1.1875rem; font-weight: 700; color: var(--color-white); } .news-footer-callout { display: flex; align-items: center; justify-content: space-between; gap: var(--space-20); padding: var(--space-24); margin-top: var(--space-32); background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(239, 90, 68, 0.08) 100%); border: 1px solid rgba(239, 90, 68, 0.25); border-radius: var(--radius-card); backdrop-filter: blur(12px); box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.2); flex-wrap: wrap; } .news-footer-callout__icon { flex-shrink: 0; width: 3rem; height: 3rem; border-radius: 50%; background: rgba(239, 90, 68, 0.15); border: 1px solid rgba(239, 90, 68, 0.3); display: flex; align-items: center; justify-content: center; color: var(--color-accent); } .news-footer-callout__text { flex: 1 1 0%; min-width: 15rem; display: flex; flex-direction: column; gap: var(--space-4); } .news-footer-callout__text h3 { margin: 0; font-family: var(--font-heading); font-size: 1.1875rem; font-weight: 700; color: var(--color-white); } .news-footer-callout__text p { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-muted); } /* activities — bullet list with connecting line */ .activities { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: var(--space-24); } .activities::before { content: ""; position: absolute; left: 0.3125rem; top: 0.4rem; bottom: 0.4rem; width: 1px; background-color: var(--border-glass); } .activities__item { position: relative; display: flex; gap: var(--space-16); padding-left: var(--space-24); } .activities__dot { position: absolute; left: 0; top: 0.35rem; width: 0.7rem; height: 0.7rem; border-radius: var(--radius-pill); background-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-bg); } .activities__body { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; } .activities__name { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-base); color: var(--color-white); } .activities__day { color: var(--color-accent); margin-right: var(--space-8); } .activities__desc { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); } /* customer photos — horizontal carousel */ .trip-photos { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-24) var(--space-16); margin-inline: calc(-1 * var(--space-16)); background-color: var(--color-surface); border-radius: var(--radius-md); } .trip-photos__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); } .trip-photos__nav { display: flex; flex-shrink: 0; gap: var(--space-16); } .trip-photos__btn { position: relative; width: var(--space-32); height: var(--space-32); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background-color: var(--color-white); color: var(--color-icon-dark); } .trip-photos__btn::after { content: ""; position: absolute; inset: calc((var(--touch-min) - var(--space-32)) / -2); } .trip-photos__btn:hover:not(:disabled) { background-color: var(--color-icon-bg); } .trip-photos__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .trip-photos__btn:disabled { opacity: 0.4; cursor: default; } .trip-gallery { display: flex; gap: var(--space-16); min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .trip-gallery:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .trip-gallery::-webkit-scrollbar { display: none; } .trip-gallery__item { flex: 0 0 auto; width: clamp(12.5rem, 78%, 20.625rem); aspect-ratio: 1; border-radius: var(--space-16); overflow: hidden; background-color: var(--color-placeholder); scroll-snap-align: start; } .trip-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (min-width: 1024px) { .trip-photos { display: grid; grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); align-items: stretch; gap: var(--space-24); } .trip-photos__head { flex-direction: column; align-items: flex-start; justify-content: space-between; align-self: stretch; min-height: 0; } } /* booking card */ .book-card { display: flex; flex-direction: column; gap: var(--space-20); padding: var(--card-pad); background-color: var(--color-surface); border: 1px solid var(--border-glass); border-radius: var(--radius-card); } .book-card__label { font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted-2); } .book-card__price { margin: var(--space-4) 0 0; font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.75rem, 4vw, 2.25rem); color: var(--color-white); } .book-card__unit { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-label); color: var(--color-muted); } .book-card__block { display: flex; flex-direction: column; gap: var(--space-12); padding-top: var(--space-20); border-top: 1px solid var(--border-glass); } .book-card__heading { font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); } .book-card__pkgs { list-style: none; margin: var(--space-12) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); } .book-card__pkgs li { display: flex; justify-content: space-between; gap: var(--space-16); font-size: var(--fs-body); color: var(--color-muted); } .book-card__pkg-price { color: var(--color-white); font-weight: 600; } .book-card__facts { margin: 0; display: flex; flex-direction: column; gap: 0; } .book-card__fact { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-16); padding: var(--space-16) 0; border-bottom: 1px dashed var(--border-glass); } .book-card__fact:last-child { border-bottom: none; padding-bottom: 0; } .book-card__fact dt { margin: 0; flex: 0 0 42%; min-width: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); } .book-card__fact dd { margin: 0; flex: 1 1 auto; font-size: var(--fs-body); line-height: 1.45; font-weight: 600; color: var(--color-white); text-align: right; } .book-card__facilities { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); } .book-card__facilities li { position: relative; padding-left: var(--space-20); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); } .book-card__facilities li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-pill); background-color: var(--color-accent); } .book-card__cta { justify-content: center; width: 100%; } @media (min-width: 768px) { .trip-head__row { flex-direction: row; align-items: flex-end; justify-content: space-between; } .trip-head__meta { justify-content: flex-end; } .trip-hero-shot { aspect-ratio: 21 / 9; max-height: 28rem; } } @media (min-width: 1024px) { .trip-body__grid { grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem); gap: var(--space-40); } .trip-body__aside { position: sticky; top: calc(var(--sticky-offset) + var(--space-24)); align-self: start; max-height: calc(100dvh - var(--sticky-offset) - var(--space-24) * 2); overflow-y: auto; transition: top 0.35s ease; } } /* ===================== TRIP DETAIL — refinements (sizing, zoom, mobile) ===================== */ /* zoomable image links */ .img-zoom { position: relative; display: block; overflow: hidden; text-decoration: none; cursor: zoom-in; } .img-zoom img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .img-zoom:hover img { transform: scale(1.04); } .img-zoom__icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--color-white); background-color: var(--color-overlay); opacity: 0; transition: opacity 0.25s ease; } .img-zoom:hover .img-zoom__icon, .img-zoom:focus-visible .img-zoom__icon { opacity: 1; } .img-zoom:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* hero shot — single full-width image */ .trip-hero-shot { aspect-ratio: 16 / 9; border-radius: var(--radius-card); max-height: clamp(16rem, 55vw, 24rem); } .trip-hero-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } @media (min-width: 768px) { .trip-hero-shot { aspect-ratio: 16 / 9; max-height: clamp(20rem, 40vw, 34rem); } } /* book card — tidy spacing */ .book-card { gap: var(--space-16); } .book-card__price { margin-top: 0; } /* mobile-first responsive polish */ @media (max-width: 767px) { .trip-head { padding-top: calc(var(--nav-offset) + var(--space-24)); } .trip-head__title { font-size: clamp(1.75rem, 8vw, 2.25rem); } .trip-head__row { gap: var(--space-12); margin-bottom: var(--space-24); } .trip-block__title { font-size: var(--fs-h3); } .inex { grid-template-columns: 1fr; gap: var(--section-gap); } .activities { gap: var(--space-20); } .book-card { padding: var(--space-20); } } /* ===================== TRIP DETAIL — book card tidy ===================== */ /* book card: wider column + clean price */ .book-card__price { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.1; word-break: keep-all; } .book-card__unit { display: inline-block; } .book-card__cta { margin-top: var(--space-4); } /* sticky book card: equal top/bottom inset, no inner scrollbar — short viewports tighten card spacing so the full card still fits */ @media (min-width: 1024px) { .trip-body__aside { top: calc(var(--sticky-offset) + var(--space-24)); margin-bottom: var(--space-24); } } @media (min-width: 1024px) and (max-height: 52rem) { .book-card { gap: var(--space-12); padding: var(--space-16); } .book-card__block { gap: var(--space-8); padding-top: var(--space-12); } .book-card__fact { padding: var(--space-8) 0; } .book-card__price { font-size: clamp(1.35rem, 2.5vw, 1.75rem); } } .btn-pill.is-disabled, .btn-pill[aria-disabled="true"] { opacity: 0.45; pointer-events: none; transform: none; } .gallery__more { display: inline-flex; align-items: center; gap: var(--space-8); align-self: flex-start; min-height: var(--touch-min); padding: var(--space-12) var(--space-20); border: 1px solid var(--color-accent); border-radius: var(--radius-pill); font-weight: 600; font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--color-accent); transition: background-color 0.2s ease, color 0.2s ease; } .gallery__more:hover { background-color: var(--color-accent); color: var(--color-white); } .dep-picker { display: flex; flex-direction: column; gap: var(--space-16); position: relative; padding-top: 0; } .dep-modal { position: fixed; inset: 0; margin: auto; width: min(46rem, calc(100% - 1.5rem)); max-height: min(90dvh, 52rem); overflow: auto; padding: var(--space-20); border: 1px solid var(--border-glass); border-radius: var(--radius-card); background-color: var(--color-surface); color: var(--color-white); z-index: 200; } .dep-modal::backdrop { background: rgba(0, 0, 0, 0.72); } .dep-modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); margin-bottom: var(--space-16); } .dep-modal__title { margin: 0; font-weight: 600; } .dep-modal__close { min-width: var(--touch-min); min-height: var(--touch-min); border: 0; background: transparent; color: var(--color-white); font-size: 1.5rem; line-height: 1; cursor: pointer; } .dep-picker__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); } .dep-picker__select { flex: 1; min-width: 0; min-height: var(--touch-min); padding: var(--space-8) var(--space-12); border: 1px solid var(--border-glass); border-radius: var(--radius-md); background-color: var(--color-surface); color: var(--color-white); font-family: var(--font-body); font-size: var(--fs-body); cursor: pointer; } .dep-picker__select--year { flex: 0 0 auto; width: 6.5rem; } .dep-picker__arrow { min-width: var(--touch-min); min-height: var(--touch-min); display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--color-white); cursor: pointer; } .dep-picker__arrow:disabled { opacity: 0.35; cursor: default; } .dep-picker__months { display: grid; grid-template-columns: 1fr; gap: var(--space-20); } @media (min-width: 640px) { .dep-picker__months { grid-template-columns: 1fr 1fr; } } .dep-picker__month-label { margin: 0 0 var(--space-8); font-weight: 600; font-size: var(--fs-body); color: var(--color-white); } .dep-picker__weekdays, .dep-picker__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; text-align: center; } .dep-picker__weekdays { font-size: 0.625rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-4); } .dep-picker__pad { min-height: 2.5rem; } .dep-picker__day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05rem; min-height: 2.6rem; width: 100%; padding: var(--space-4) 0; border: 0; border-radius: 0; background: transparent; color: var(--color-muted); } .dep-picker__n { font-size: var(--fs-label); font-weight: 600; line-height: 1.2; } .dep-picker__sub { font-size: 0.5625rem; line-height: 1; color: var(--color-muted-2); } .dep-picker__day.is-open { color: var(--color-white); cursor: pointer; border-radius: var(--radius-md); } .dep-picker__day.is-open .dep-picker__sub { color: var(--color-accent); } .dep-picker__day.is-open:hover, .dep-picker__day.is-selected { background-color: var(--color-accent); color: var(--color-white); } .dep-picker__day.is-selected .dep-picker__sub, .dep-picker__day.is-open:hover .dep-picker__sub { color: var(--color-white); } .dep-picker__day.is-full { opacity: 0.4; text-decoration: line-through; } .dep-picker__day.is-range { background: color-mix(in srgb, var(--color-accent) 22%, transparent); color: var(--color-white); border-radius: 0; } .dep-picker__day.is-range-start { border-radius: var(--radius-md) 0 0 var(--radius-md); } .dep-picker__day.is-range-end { border-radius: 0 var(--radius-md) var(--radius-md) 0; } [data-date-root] { display: flex; flex-direction: column; gap: var(--space-12); } .trip-block .dep-list { margin-top: var(--space-16); max-height: none; overflow: visible; } .dep-list { list-style: none; margin: 0; padding: 0; max-height: 16rem; overflow: auto; border-top: 1px solid var(--border-glass); } .dep-list__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding: var(--space-12) 0; border-bottom: 1px solid var(--border-glass); } .dep-list__row.is-full { opacity: 0.55; } .dep-list__info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .dep-list__range { font-size: var(--fs-label); font-weight: 600; color: var(--color-white); } .dep-list__meta { font-size: 0.6875rem; color: var(--color-muted); } .dep-list__full { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); } .dep-list__radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .dep-list__select { flex-shrink: 0; cursor: pointer; } .dep-list__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.25rem; min-width: 5.5rem; padding: 0 var(--space-12); border: 1px solid var(--border-glass); border-radius: var(--radius-pill); font-size: var(--fs-label); letter-spacing: 0.04em; color: var(--color-white); } .dep-list__row.is-on .dep-list__btn { background-color: var(--color-accent); border-color: var(--color-accent); } .dep-modal .dep-picker__nav { justify-content: space-between; } .dep-modal .dep-picker__month-label { flex: 1; margin: 0; text-align: center; } .dep-picker__legend { display: flex; flex-wrap: wrap; gap: var(--space-12) var(--space-16); list-style: none; margin: 0; padding: 0; font-size: 0.75rem; color: var(--color-muted); } .dep-picker__legend li { display: inline-flex; align-items: center; gap: var(--space-8); } .dep-picker__legend-dot { width: 0.4rem; height: 0.4rem; border-radius: var(--radius-pill); background-color: var(--color-accent); } .dep-picker__legend-full { text-decoration: line-through; opacity: 0.7; } .dep-picker__legend-ask { color: var(--color-muted-2); } .dep-picker__clear { align-self: flex-start; min-height: var(--touch-min); padding: 0 var(--space-8); border: 0; background: transparent; color: var(--color-accent); font-size: var(--fs-label); cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; } .dates-cal { display: flex; flex-direction: column; gap: var(--space-12); margin: 0 0 var(--space-20); } .dates-cal__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); } .dates-cal__caption { margin: 0; font-weight: 600; color: var(--color-white); } .dates-cal__arrow { min-width: var(--touch-min); min-height: var(--touch-min); border: 1px solid var(--border-glass); border-radius: var(--radius-pill); background: transparent; color: var(--color-white); font-size: 1.25rem; cursor: pointer; } .dates-cal__weekdays, .dates-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-4); text-align: center; } .dates-cal__weekdays { font-size: var(--fs-label); color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.04em; } .dates-cal__day, .dates-cal__pad { min-height: 2.75rem; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-muted); } .dates-cal__day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; padding: var(--space-4); position: relative; } .dates-cal__day.is-open { background: var(--glass-bg); color: var(--color-white); cursor: pointer; } .dates-cal__day.is-open:hover, .dates-cal__day.is-selected { background-color: var(--color-accent); color: var(--color-white); } .dates-cal__day.is-full { opacity: 0.45; text-decoration: line-through; } .dates-cal__day.is-range { background: color-mix(in srgb, var(--color-accent) 28%, transparent); color: var(--color-white); } .dates-cal__n { font-weight: 600; font-size: var(--fs-body); } .dates-cal__req { font-size: 0.625rem; letter-spacing: 0.02em; color: var(--color-accent); } .dates-cal__day.is-selected .dates-cal__req, .dates-cal__day.is-open:hover .dates-cal__req { color: var(--color-white); } .dates-list__demand { font-size: var(--fs-label); color: var(--color-muted); } .book-card__form { display: flex; flex-direction: column; gap: var(--space-16); } .book-card__field { display: flex; flex-direction: column; gap: var(--space-8); } .book-card__field span { font-size: var(--fs-label); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted-2); } .book-card__input { min-height: var(--touch-min); width: 100%; padding: var(--space-8) var(--space-12); border: 1px solid var(--border-glass); border-radius: var(--radius-md); background: transparent; color: var(--color-white); font-size: 1rem; } .book-card__demand { margin: 0; font-size: var(--fs-label); color: var(--color-accent); } .dates-months { display: flex; flex-wrap: wrap; gap: var(--space-8); margin: 0 0 var(--space-16); } .dates-months__btn { min-height: var(--touch-min); padding: var(--space-8) var(--space-16); border: 1px solid var(--border-glass); border-radius: var(--radius-pill); background: transparent; color: var(--color-muted); font-size: var(--fs-label); letter-spacing: 0.04em; cursor: pointer; } .dates-months__btn.is-active { background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); } .dates-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border-glass); } .dates-list__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); min-height: var(--touch-min); padding: var(--space-16) 0; border-bottom: 1px solid var(--border-glass); } .dates-list__row.is-full { opacity: 0.7; } .dates-list__pick { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; cursor: pointer; } .dates-list__pick input { width: 1.15rem; height: 1.15rem; flex-shrink: 0; accent-color: var(--color-accent); } .dates-list__body { display: flex; flex-direction: column; gap: var(--space-4); flex: 1; min-width: 0; } .dates-list__date { font-weight: 600; color: var(--color-white); } .dates-list__end { font-size: var(--fs-label); color: var(--color-muted); } .dates-list__status { flex-shrink: 0; font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); font-weight: 600; } .dates-list__status--full { color: var(--color-muted); } .book-card__picked { margin: 0; font-weight: 600; color: var(--color-white); } .book-card__dates-link { font-size: var(--fs-label); color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.2em; } .book-card__hint { margin: 0; font-size: var(--fs-label); color: var(--color-muted); } .gallery-page { padding-top: calc(var(--nav-offset) + var(--section-y)); } .gallery-page__head { display: flex; flex-direction: column; gap: var(--space-12); margin-bottom: var(--section-gap); max-width: 36rem; } .gallery-page .gallery-page__head { max-width: none; gap: var(--space-16); } .gallery-page__lead { display: grid; gap: var(--space-16); align-items: end; } .gallery-page__title { margin: 0; font-family: var(--font-heading); font-size: var(--fs-h1); } .gallery-page__head .gallery-page__title { font-size: clamp(2.5rem, 8vw, 5.5rem); font-weight: var(--heading-weight-emphasis); letter-spacing: -0.04em; line-height: 0.95; } .gallery-page__sub { margin: 0; color: var(--color-muted); font-size: var(--fs-base); line-height: var(--lh-body); } .gallery-page__head .gallery-page__sub { max-width: 22rem; } @media (min-width: 768px) { .gallery-page__lead { grid-template-columns: minmax(0, 1.15fr) minmax(12rem, 0.7fr); gap: var(--section-gap); } } .gallery-page__grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 8rem; grid-auto-flow: dense; gap: var(--space-12); } .gallery-page__item { position: relative; margin: 0; min-width: 0; min-height: 0; overflow: hidden; border-radius: var(--radius-card); background-color: var(--color-placeholder); } .gallery-page__item .gallery__link { position: absolute; inset: 0; height: auto; } .gallery-page__item img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .gallery-page__item--portrait { grid-column: span 1; grid-row: span 2; } .gallery-page__item--landscape { grid-column: span 2; grid-row: span 2; } @media (min-width: 768px) { .gallery-page__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 11rem; gap: var(--space-16); } .gallery-page__item--landscape:last-child { grid-column: 2 / span 2; } } .news-related .tour-card { aspect-ratio: 16 / 9; } .news-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-12); } .news-list .tour-card__route { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (min-width: 768px) { .news-list { grid-template-columns: repeat(2, 1fr); gap: var(--space-16); } .news-related .news-list { grid-template-columns: repeat(3, 1fr); } }