/* ============================================================ Holiday Lets London — main.css Single source of truth for the brand. Change a value here and it updates everywhere. ============================================================ */ /* ---------- BRAND TOKENS ---------- */ :root { /* Purples (the brand) */ --purple: #6D4AA6; /* primary */ --purple-d: #57388C; /* darker — hovers, headings accent */ --purple-deep: #4B3B6B; /* deep band (reviews) */ --purple-tint: #EDE7F6; /* light lilac fill */ --purple-line: #EAE3F4; /* borders / hairlines */ /* Ink & text */ --ink: #2A2040; /* darkest headings */ --ink-2: #33274A; /* body-dark */ --muted: #6E6488; /* secondary text */ --muted-2: #948AAA; /* labels */ /* Surfaces */ --bg: #F6F3FB; /* page background */ --card: #FFFFFF; --card-soft: #FCFBFE; --footer-bg: #241A38; /* Accents */ --gold: #F1D9A0; /* review stars */ /* Shape & motion */ --radius: 20px; --radius-sm: 14px; --pill: 999px; --shadow-card: 0 14px 40px rgba(42,30,66,0.07); --shadow-lift: 0 30px 70px rgba(30,18,55,0.40); --shadow-btn: 0 8px 20px rgba(109,74,166,0.30); --maxw: 1200px; --gutter: clamp(20px, 5vw, 56px); --font-serif: 'Cormorant Garamond', Georgia, serif; --font-sans: 'Mulish', system-ui, -apple-system, Segoe UI, sans-serif; } /* ---------- RESET / BASE ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } #book { scroll-margin-top: clamp(84px, 12vh, 110px); } body { background: var(--bg); color: var(--ink-2); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.5; } img { max-width: 100%; display: block; } a { color: var(--purple); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--purple-d); } h1, h2, h3, h4, h5 { margin: 0; } .wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .serif { font-family: var(--font-serif); } .eyebrow { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--purple); font-weight: 700; } @keyframes hll-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* Scroll reveal — progressive enhancement: content is fully visible without JS. Only when is set do elements start hidden and ease in. */ .js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 70ms); } .js .reveal.is-visible { opacity: 1; transform: none; } /* ---------- BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 700; cursor: pointer; border: none; border-radius: var(--pill); padding: 11px 22px; font-size: 14px; transition: background .15s ease, color .15s ease, transform .15s ease; } .btn-primary { background: var(--purple); color: #fff; box-shadow: var(--shadow-btn); } .btn-primary:hover { background: var(--purple-d); color: #fff; } .btn-ghost { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.4); color: #fff; } .btn-ghost:hover { background: rgba(255,255,255,0.24); color: #fff; } .btn-white { background: #fff; color: var(--purple-d); } .btn-white:hover { color: var(--purple-d); transform: translateY(-1px); } /* ---------- HEADER ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.88); backdrop-filter: blur(14px); border-bottom: 1px solid var(--purple-line); } .site-header .wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; } .brand { display: flex; align-items: center; gap: 12px; margin-right: auto; } .brand-mark { width: 30px; height: 30px; border-radius: 8px; flex: none; background: var(--purple); transform: rotate(45deg); box-shadow: 0 6px 16px rgba(109,74,166,0.35); } .brand-name { font-family: var(--font-serif); font-weight: 700; font-size: 22px; color: var(--ink); letter-spacing: .2px; line-height: 1; } .brand-sub { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--purple); margin-top: 3px; font-weight: 700; } .nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .nav a { font-size: 14px; font-weight: 600; color: #4A4160; } .nav a:hover { color: var(--purple); } /* ---------- HERO + FADING SLIDESHOW ---------- */ .hero { position: relative; overflow: hidden; min-height: clamp(580px, 90vh, 840px); display: flex; align-items: center; } .hero-slides { position: absolute; inset: 0; z-index: 0; background: #1a1422; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; animation: hll-hero-fade var(--hero-duration, 24s) infinite; } @keyframes hll-hero-fade { 0% { opacity: 0; } 8% { opacity: 1; } 33% { opacity: 1; } 41% { opacity: 0; } 100% { opacity: 0; } } .hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(130% 100% at 50% 30%, rgba(16,12,20,0) 38%, rgba(16,12,20,0.30) 100%), linear-gradient(180deg, rgba(16,12,20,0.42) 0%, rgba(16,12,20,0.16) 42%, rgba(16,12,20,0.20) 60%, rgba(16,12,20,0.52) 100%); } .hero-inner { position: relative; z-index: 2; width: 100%; pointer-events: none; padding-top: clamp(72px, 9vw, 104px); padding-bottom: clamp(56px, 8vw, 88px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(30px, 4vw, 44px); } .hero-copy { position: relative; max-width: 660px; animation: hll-fade .7s ease both; } .hero-copy::before { content: ""; position: absolute; z-index: -1; inset: -32% -22%; pointer-events: none; background: radial-gradient(62% 68% at 50% 46%, rgba(16,10,26,0.5) 0%, rgba(16,10,26,0.22) 46%, rgba(16,10,26,0) 72%); } .hero h1 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(38px, 5.6vw, 66px); line-height: 1.03; color: #fff; margin: 0 0 16px; letter-spacing: -.5px; text-wrap: balance; text-shadow: 0 1px 2px rgba(18,11,30,0.5), 0 4px 30px rgba(18,11,30,0.55); } .hero p { font-size: clamp(16px, 2vw, 19px); line-height: 1.6; color: #F2ECFA; margin: 0 auto; max-width: 460px; text-wrap: pretty; text-shadow: 0 1px 12px rgba(18,11,30,0.5); } /* Trust badges under the search */ .hero-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; animation: hll-fade 1s ease both; animation-delay: .18s; } .hero-trust li { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: #F0E9FA; text-shadow: 0 1px 10px rgba(24,14,42,0.4); } .hero-trust svg { width: 18px; height: 18px; flex: none; } .hero-trust .star { color: var(--gold); } .hero-trust strong { font-weight: 800; color: #fff; } /* ---------- SEARCH BAR (fallback + widget host) ---------- */ .searchbar { pointer-events: auto; max-width: 900px; background: rgba(255,255,255,0.97); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-lift); display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; animation: hll-fade .9s ease both; } .searchbar-field { flex: 1 1 210px; min-width: 190px; padding: 10px 16px; } .searchbar-label { display: block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted-2); font-weight: 700; margin-bottom: 6px; } .searchbar-field select { width: 100%; border: none; outline: none; background: transparent; font-family: inherit; font-size: 16px; font-weight: 700; color: var(--ink-2); cursor: pointer; } .searchbar-divider { width: 1px; background: #EFE9F7; align-self: stretch; } .stepper { display: flex; align-items: center; gap: 14px; } .stepper button { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #DCD2ED; background: #fff; color: var(--purple); font-size: 18px; font-weight: 700; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; } .stepper span { font-size: 16px; font-weight: 700; color: var(--ink-2); min-width: 66px; text-align: center; } .searchbar-submit { flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; justify-content: center; background: var(--purple); color: #fff; padding: 0 34px; border-radius: var(--radius-sm); font-weight: 700; font-size: 16px; min-height: 62px; box-shadow: 0 10px 24px rgba(109,74,166,0.35); } .searchbar-submit:hover { background: var(--purple-d); color: #fff; } /* Host container for the real Hostaway widget */ .hostaway-search { pointer-events: auto; max-width: 900px; animation: hll-fade .9s ease both; } .hostaway-listings { margin-top: 8px; } /* ---------- SECTIONS ---------- */ .section { padding-top: clamp(64px, 9vw, 110px); padding-bottom: clamp(64px, 9vw, 110px); } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; } .section-head h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(32px, 4.5vw, 50px); line-height: 1.05; color: var(--ink); margin: 12px 0 0; letter-spacing: -.4px; } .section-head p { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 340px; margin: 0; } /* ---------- PARTNER LOGOS ---------- */ .partners { background: #fff; border-bottom: 1px solid #EEE8F6; } .partners .wrap { padding-top: 40px; padding-bottom: 40px; } .partners-title { text-align: center; font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: #9B92B0; font-weight: 700; margin: 0 0 28px; } .partners-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .partners-track { display: flex; width: max-content; gap: 16px; padding-right: 16px; animation: hll-marquee 40s linear infinite; } .partners-marquee:hover .partners-track { animation-play-state: paused; } @keyframes hll-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .partner-tile { flex: 0 0 auto; width: 160px; height: 78px; border: 1px solid #EDE7F5; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; padding: 14px; background: var(--card-soft); overflow: hidden; } .partner-tile img { max-height: 44px; max-width: 100%; width: auto; object-fit: contain; } /* ---------- APARTMENT CARDS ---------- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 26px; } .card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--purple-line); display: flex; flex-direction: column; } .card-media { position: relative; aspect-ratio: 4 / 3; background: var(--purple-tint); overflow: hidden; } .card-media img { width: 100%; height: 100%; object-fit: cover; } .card-badge { position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,0.95); color: var(--purple-d); font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: var(--pill); } .card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; } .card-body h3 { font-family: var(--font-serif); font-size: 25px; font-weight: 700; color: var(--ink); margin: 0 0 4px; } .card-meta { font-size: 14px; color: #7E7498; margin: 0 0 16px; } .card-foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid #F0EBF8; padding-top: 16px; } .card-price { font-size: 22px; font-weight: 800; color: var(--ink); } .card-price small { font-size: 14px; color: #8B82A2; font-weight: 400; } .card-link { font-size: 14px; font-weight: 700; color: var(--purple); } /* ---------- WHY US / VIDEO ---------- */ .why { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; align-items: center; } .video { position: relative; aspect-ratio: 16 / 11; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(42,30,66,0.14); background: var(--purple-deep); cursor: pointer; } .video img, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; } .video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(0deg, rgba(42,30,66,0.15), rgba(42,30,66,0.15)); } .video-play span { width: 78px; height: 78px; border-radius: 50%; background: rgba(255,255,255,0.92); box-shadow: 0 12px 30px rgba(42,30,66,0.3); display: flex; align-items: center; justify-content: center; } .video-play span::after { content: ""; width: 0; height: 0; margin-left: 6px; border-left: 20px solid var(--purple); border-top: 13px solid transparent; border-bottom: 13px solid transparent; } .why h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(30px, 4vw, 46px); line-height: 1.06; color: var(--ink); margin: 12px 0 22px; letter-spacing: -.4px; } .why-intro { font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 0 0 28px; max-width: 60ch; text-wrap: pretty; } .features { display: flex; flex-direction: column; gap: 22px; } .feature { display: flex; gap: 16px; } .feature .dot { width: 12px; height: 12px; border-radius: 4px; background: var(--purple); transform: rotate(45deg); margin-top: 6px; flex: none; } .feature h4 { font-size: 17px; font-weight: 800; color: var(--ink); margin: 0 0 4px; } .feature p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; } /* ---------- GALLERY (mosaic + lightbox) ---------- */ .gallery { display: grid; gap: 14px; grid-auto-flow: dense; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(120px, 18vw, 190px); } .gallery-item--xl { grid-column: span 3; grid-row: span 2; } .gallery-item--wide { grid-column: span 3; } .gallery-item--third { grid-column: span 2; } .gallery-item { position: relative; margin: 0; padding: 0; border: none; cursor: pointer; background: var(--purple-tint); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22,1,.36,1); } .gallery-item::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20,14,26,0) 62%, rgba(20,14,26,0.28) 100%); opacity: 0; transition: opacity .3s ease; } .gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.05); } .gallery-item:hover::after { opacity: 1; } .gallery-item:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; } @media (max-width: 900px) { .gallery { grid-template-columns: repeat(4, 1fr); } .gallery-item--xl { grid-column: span 4; grid-row: span 2; } .gallery-item--wide { grid-column: span 4; } } @media (max-width: 560px) { .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 46vw; gap: 10px; } .gallery-item--xl { grid-column: span 2; grid-row: span 2; } .gallery-item--wide { grid-column: span 2; } .gallery-item--third { grid-column: span 1; } } .lightbox { border: none; padding: 0; background: transparent; max-width: min(1100px, 92vw); max-height: 92vh; color: #fff; overflow: visible; } .lightbox::backdrop { background: rgba(16,12,20,0.82); backdrop-filter: blur(3px); } .lightbox[open] { animation: hll-fade .25s ease both; } .lightbox-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; } .lightbox-img { max-width: 100%; max-height: 82vh; width: auto; height: auto; border-radius: var(--radius); object-fit: contain; box-shadow: var(--shadow-lift); } .lightbox-caption { font-size: 14px; color: #E7DEF5; text-align: center; margin: 0; } .lightbox-close, .lightbox-nav { position: fixed; z-index: 1; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.12); color: #fff; cursor: pointer; border-radius: var(--pill); backdrop-filter: blur(6px); transition: background .15s ease, transform .15s ease; } .lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,0.24); } .lightbox-close { top: 4vh; right: 4vw; width: 46px; height: 46px; font-size: 26px; line-height: 1; } .lightbox-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 30px; line-height: 1; } .lightbox-nav:hover { transform: translateY(-50%) scale(1.06); } .lightbox-prev { left: 3vw; } .lightbox-next { right: 3vw; } @media (max-width: 560px) { .lightbox-nav { width: 44px; height: 44px; font-size: 24px; } .lightbox-prev { left: 12px; } .lightbox-next { right: 12px; } .lightbox-close { top: 12px; right: 12px; } } /* ---------- REVIEWS ---------- */ .reviews { background: var(--purple-deep); color: #fff; } .reviews .wrap { padding-top: clamp(64px, 9vw, 110px); padding-bottom: clamp(64px, 9vw, 110px); } .reviews-head { text-align: center; margin-bottom: 52px; } .reviews-stars { font-size: 26px; color: var(--gold); letter-spacing: 4px; margin-bottom: 14px; } .reviews-head h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(32px, 4.5vw, 52px); margin: 0 0 8px; letter-spacing: -.4px; } .reviews-head p { font-size: 17px; color: #D9CEEC; margin: 0; } .reviews-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .reviews-track { display: flex; align-items: stretch; gap: 24px; width: max-content; padding-right: 24px; animation: hll-marquee 46s linear infinite; } .reviews-marquee:hover .reviews-track, .reviews-marquee:focus-within .reviews-track { animation-play-state: paused; } .review { flex: 0 0 clamp(300px, 40vw, 440px); box-sizing: border-box; display: flex; flex-direction: column; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius); padding: 30px; margin: 0; } .review .stars { color: var(--gold); letter-spacing: 3px; margin-bottom: 14px; font-size: 16px; } .review p { font-size: 18px; line-height: 1.55; color: #F4EFFB; margin: 0 0 18px; font-family: var(--font-serif); font-style: italic; text-wrap: pretty; } .review cite { font-size: 14px; font-weight: 700; color: #C9BBE4; font-style: normal; margin-top: auto; } /* ---------- CTA BAND ---------- */ .cta { background: var(--purple); } .cta .wrap { padding-top: clamp(48px, 7vw, 84px); padding-bottom: clamp(48px, 7vw, 84px); display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; } .cta h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(28px, 4vw, 44px); color: #fff; margin: 0; max-width: 620px; letter-spacing: -.3px; } .cta-actions { display: flex; gap: 14px; flex-wrap: wrap; } .cta .btn { padding: 15px 30px; font-size: 15px; font-weight: 800; } /* ---------- FOOTER ---------- */ .site-footer { background: var(--footer-bg); color: #C9BEDD; } .site-footer .wrap { padding-top: clamp(56px, 8vw, 90px); padding-bottom: clamp(56px, 8vw, 90px); } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; } .footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .footer-brand .brand-mark { width: 26px; height: 26px; border-radius: 7px; box-shadow: none; } .footer-brand span { font-family: var(--font-serif); font-weight: 700; font-size: 20px; color: #fff; } .site-footer p { font-size: 14px; line-height: 1.7; color: #9F94B8; margin: 0; max-width: 260px; } .footer-col h5 { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #7E7398; font-weight: 700; margin: 0 0 16px; } .footer-links { display: flex; flex-direction: column; gap: 11px; } .footer-links a, .footer-col address a { font-size: 15px; color: #C9BEDD; font-style: normal; } .footer-links a:hover, .footer-col address a:hover { color: #fff; } .footer-col address { display: flex; flex-direction: column; gap: 11px; font-style: normal; } .footer-visit p { margin: 0 0 12px; font-size: 15px; color: #C9BEDD; } .footer-visit .hours { font-size: 13px; line-height: 1.6; color: #9F94B8; } .footer-bar { border-top: 1px solid rgba(255,255,255,0.09); margin-top: 48px; padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .footer-bar span { font-size: 13px; color: #7E7398; } /* ---------- RESPONSIVE ---------- */ @media (max-width: 720px) { .nav { display: none; } .searchbar-divider { display: none; } .cta .wrap { flex-direction: column; align-items: flex-start; } } /* Respect users who prefer no motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero-slide { animation: none; } .hero-slide:first-child { opacity: 1; } .hero-copy, .searchbar, .hostaway-search, .hero-trust { animation: none; } .partners-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .partners-track .partner-tile[aria-hidden="true"] { display: none; } .gallery-item img { transition: none; } .gallery-item:hover img, .gallery-item:focus-visible img { transform: none; } .lightbox[open] { animation: none; } .reviews-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; padding-right: 0; } .reviews-track .review[aria-hidden="true"] { display: none; } .js .reveal { opacity: 1; transform: none; transition: none; } }