/* mobile.css — mobile refinements for Elinale Travel Load this AFTER style.css in : */ @media (max-width: 800px) { html, body { overflow-x: hidden; } body { line-height: 1.65; background: #f6f5f2; } section { padding: 56px 22px; } /* HERO */ header { min-height: 86vh; padding: 28px 22px 46px; align-items: flex-end; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.34) 38%, rgba(0, 0, 0, 0.66) 100% ), url(images/hotram-hero.webp) center 52% / cover; } .site-logo { top: 16px; } .header-logo { width: 178px; max-width: 58vw; } .lang-switch { top: 18px; right: 22px; font-size: 0.78rem; gap: 6px; } .hero { width: 100%; max-width: 100%; margin-top: 0; padding-bottom: 12px; } .hero-title-desktop { display: none; } .hero-title-mobile { display: block; line-height: 1.02; text-wrap: balance; } .badge { font-size: 12px; letter-spacing: 0.11em; padding: 6px 11px; margin-bottom: 16px; } h1 { font-size: clamp(39px, 11.4vw, 48px); line-height: 1.02; letter-spacing: -0.045em; margin-bottom: 18px; max-width: 92%; } .hero p { font-size: 18px; line-height: 1.65; max-width: 94%; margin-bottom: 28px; } .hero .btn { display: none; } .fi-language .hero-title { max-width: 82%; } .btn { width: auto; min-height: 48px; padding: 13px 27px; font-size: 15px; } /* SECTION TYPOGRAPHY */ .section-title { font-size: 34px; line-height: 1.05; margin-bottom: 12px; } .section-divider { margin-bottom: 26px; } .section-intro, .centered-section .section-intro, .location-secondary, .about-content p, .itinerary .section-intro { font-size: 17.2px; line-height: 1.88; margin-bottom: 24px; text-wrap: balance; } .location-section { padding-top: 50px; padding-bottom: 44px; } .location-secondary { margin-top: 0; } /* GETTING HERE */ .getting-here { padding: 50px 22px 44px; } .getting-grid { grid-template-columns: 1fr; gap: 0; margin-top: 18px; } .getting-item { padding: 26px 0; border-right: 0 !important; border-bottom: 1px solid rgba(207, 169, 106, 0.34); } .getting-item:last-child { border-bottom: 0; padding-bottom: 0; } .getting-item h3 { font-size: 28px; margin-bottom: 10px; } .getting-item p { font-size: 16.5px; line-height: 1.75; max-width: 96%; } /* WHY / CARDS */ .why-section { padding-top: 50px; } .why-section .section-intro { margin-bottom: 34px; } .grid { grid-template-columns: 1fr; gap: 20px; } .card { border-radius: 12px; } .card-image { height: 218px; object-position: center 68%; } .card-content { padding: 22px 22px 24px; font-size: 17px; line-height: 1.72; } .card h3, .itinerary .card h3 { font-size: 25px; line-height: 1.1; margin-bottom: 10px; } .card:hover, .card:hover img { transform: none; } /* ITINERARY */ .itinerary { padding: 50px 22px 44px; } .itinerary .grid { margin-top: 30px; } .itinerary .card { padding: 25px 22px; } .itinerary .card p { font-size: 16.8px; line-height: 1.88; text-wrap: balance; } /* ABOUT */ .about-section { padding: 50px 22px 44px; } .about-content { max-width: 100%; } /* CONTACT */ .contact-section { padding: 34px 22px 66px; } .contact-content { grid-template-columns: 1fr; gap: 34px; } form { max-width: 100%; gap: 13px; } .small-note { font-size: 12px; line-height: 1.6; letter-spacing: 0.11em; } .policy-note { max-width: 100%; margin-top: 18px; } .policy-note p { font-size: 17px; line-height: 1.8; } .policy-page-content p + p { margin-top: 18px; } .right-side { margin-top: 0; gap: 20px; } .price-box { padding: 12px 18px; border-radius: 12px; } .price-box p { font-size: 16.5px; line-height: 1.75; } .price { font-size: 52px; font-weight: 500; color: #cfa96a; letter-spacing: -0.01em; } .price-person { font-family: "Manrope", sans-serif; font-size: 17px; font-weight: 500; letter-spacing: 0.04em; color: rgba(255,255,255,0.62); display: inline-block; margin-top: 0; } .price-line { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; } .resort-image { height: 260px; border-radius: 12px; margin-top: 0; object-position: center 58%; } /* MODALS */ .modal { padding: 16px; overflow-y: auto; } .modal-content { width: 100%; max-width: 100%; margin: 20px auto; padding: 18px 18px 24px; border-radius: 12px; } .modal-image { height: min(54vh, 330px); border-radius: 12px; margin-bottom: 18px; object-position: center 40%; } .modal-content h2 { font-size: 31px; line-height: 1.06; margin-bottom: 12px; } .modal-content p { max-width: 100%; font-size: 16.6px; line-height: 1.75; } .close { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 27px; } .city-slider { margin-top: 0; } .slider-btn { width: 40px; height: 40px; font-size: 19px; background: rgba(255,255,255,0.82); box-shadow: 0 4px 10px rgba(0,0,0,0.10); } .slider-btn.prev { left: 10px; } .slider-btn.next { right: 10px; } .city-note { font-size: 12.5px; line-height: 1.65; margin-top: 16px; } /* FOOTER */ footer { padding: 34px 0 78px; } .footer-inner { padding: 0 22px; } .footer-logo { width: 148px; opacity: 0.98; margin-bottom: 14px; } .footer-links { gap: 14px 20px; } .footer-copy { margin-top: 16px; } } @media (max-width: 480px) { header { min-height: 84vh; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.36) 42%, rgba(0, 0, 0, 0.68) 100% ), url(images/hotram-hero.webp) center 50% / cover; } h1 { font-size: clamp(34px, 11vw, 42px); max-width: 88%; } .hero p { font-size: 17.2px; max-width: 98%; } .section-title { font-size: 32px; } .card-image { height: 205px; } .modal { padding: 12px; } .modal-content { margin: 14px auto; } .modal-image { height: 260px; } .luxury-image { object-position: center 30%; } }@media (max-width: 800px) { .desktop-label { display: none; } .mobile-label { display: inline; } .lang-switch { top: 22px; right: 22px; gap: 7px; } .lang-switch a, .lang-switch span { font-size: 0.78rem; letter-spacing: 0.08em; font-weight: 550; color: rgba(31, 27, 22, 0.72); } } @media (max-width: 800px) { .mobile-sticky-cta { display: flex; position: fixed; left: 18px; right: 18px; bottom: 14px; z-index: 999; justify-content: center; align-items: center; height: 54px; background: #cfad72; color: #173f35; border-radius: 8px; text-decoration: none; font-family: "Manrope", sans-serif; font-size: 15px; font-weight: 550; letter-spacing: 0.015em; box-shadow: 0 8px 22px rgba(0,0,0,0.12); } #cookie-banner { bottom: 16px; left: 14px; right: 14px; } #cookie-banner.cookie-banner-fi { width: auto; max-width: none; } #cookie-banner.cookie-banner-fi p { font-size: 1rem; line-height: 1.7; margin-bottom: 14px; } #cookie-banner.cookie-banner-fi .cookie-actions { justify-content: flex-start; } } @media (max-width: 800px) { .site-header { height: 58px; padding: 0 14px; } .nav-logo img { width: 136px; } .nav-actions { gap: 16px; } .site-header .lang-switch { gap: 8px; } .site-header .lang-switch a, .site-header .lang-switch span { font-size: 12px; } .nav-cta { padding: 10px 17px; font-size: 9.5px; line-height: 1.1; border-radius: 4px; max-width: 120px; text-align: center; text-transform: uppercase; letter-spacing: 0.13em; font-weight: 650; } .lang-switch a { opacity: 0.6; transition: opacity 0.25s ease; } .lang-switch a.active { opacity: 1; } .faq-inline-link { font-size: 17px; line-height: 1.6; } } @media (max-width: 800px) { .faq-inline-link, .payment-note { font-size: 17px; line-height: 1.8; color: #3f4b47; } .faq-inline-link a, .payment-note a { color: #173f35; font-weight: 500; text-decoration-thickness: 1px; text-underline-offset: 3px; } .footer-links a { font-size: 13px; line-height: 1.6; text-decoration-thickness: 1px; text-underline-offset: 0.12em; } .footer-copy { font-size: 14px; opacity: 0.72; } footer p { font-size: 14px; line-height: 1.7; letter-spacing: 0.01em; } .footer-tagline { font-size: 13px; line-height: 1.7; letter-spacing: 0.01em; opacity: 0.72; } .footer-contact { font-size: 14px; line-height: 1.7; letter-spacing: 0.01em; } } @media (max-width: 800px) { html[lang="fi"] .price-line { align-items: center; gap: 10px; } html[lang="fi"] .price { font-size: 60px; line-height: 1; white-space: nowrap; } html[lang="fi"] .price-person { font-size: 15px; line-height: 1.25; max-width: 58px; } html[lang="fi"] .price-box { padding: 18px 20px; } }