/* Developed by KKN (Sept2026)! */ /* ========================================================= Summit Parkview Hotel Yangon — main stylesheet Bootstrap 5.3 + AOS + Swiper ========================================================= */ :root { --green: #1f3b33; --green-deep: #132620; --green-ink: #0d1b17; --gold: #c9a45c; --gold-soft: #e6d3a3; --cream: #f6f0e4; --paper: #fffdf8; --ink-rgb: 13 27 23; /* = --green-ink as R G B, used for overlays */ --gold-rgb: 201 164 92; /* = --gold as R G B, used for glows */ --paper-rgb: 255 253 248; /* = --paper as R G B, used for sticky header */ --ink: #22221e; --muted: #6b6960; --line: rgba(34, 34, 30, .12); --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Jost', system-ui, sans-serif; --ease: cubic-bezier(.22, .8, .26, 1); --bs-body-font-family: var(--sans); --bs-body-color: var(--ink); --bs-body-bg: var(--paper); } /* ========================================================= COLOUR THEMES Switch by changing data-theme on in index.html: "green" | "maroon" | "navy" | "teak" (variable names stay the same; only values change) ========================================================= */ [data-theme="green"] { --green: #1f3b33; --green-deep: #132620; --green-ink: #0d1b17; --gold: #c9a45c; --gold-soft: #e6d3a3; --cream: #f6f0e4; --paper: #fffdf8; --ink-rgb: 13 27 23; --gold-rgb: 201 164 92; --paper-rgb: 255 253 248; } [data-theme="maroon"] { --green: #6b1f2a; --green-deep: #4a141c; --green-ink: #2a0b10; --gold: #d4a857; --gold-soft: #f0dcae; --cream: #f8efe6; --paper: #fffaf5; --ink-rgb: 42 11 16; --gold-rgb: 212 168 87; --paper-rgb: 255 250 245; } [data-theme="navy"] { --green: #1c2e4a; --green-deep: #121f35; --green-ink: #0a1322; --gold: #c8ad7f; --gold-soft: #eadcc0; --cream: #f3f1ec; --paper: #fdfcfa; --ink-rgb: 10 19 34; --gold-rgb: 200 173 127; --paper-rgb: 253 252 250; } [data-theme="teak"] { --green: #4a2e1f; --green-deep: #331e13; --green-ink: #1f120b; --gold: #b8894a; --gold-soft: #e3c99a; --cream: #f5ece0; --paper: #fdf9f3; --ink-rgb: 31 18 11; --gold-rgb: 184 137 74; --paper-rgb: 253 249 243; } html { scroll-behavior: smooth; scroll-padding-top: 76px; } body { font-family: var(--sans); font-weight: 300; line-height: 1.75; overflow-x: hidden; } body.is-loading { overflow: hidden; } a { color: inherit; text-decoration: none; } img { max-width: 100%; } ::selection { background: var(--gold); color: var(--green-ink); } /* ---------- Utilities ---------- */ .bg-cream { background: var(--cream); } .bg-green-deep { background: var(--green-deep); } .text-gold-soft { color: var(--gold-soft) !important; } .text-white-75 { color: rgba(255,255,255,.78); } .text-muted-custom { color: var(--muted); } .section { padding: clamp(80px, 11vw, 140px) 0; position: relative; } @media (min-width: 1200px) { .g-xl-6 { --bs-gutter-x: 5rem; --bs-gutter-y: 5rem; } } /* ---------- Type ---------- */ .eyebrow { display: flex; align-items: center; gap: 14px; font-size: .76rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; } .eyebrow .line { width: 42px; height: 1px; background: currentColor; display: inline-block; } .section-title { font-family: var(--serif); font-weight: 500; line-height: 1.08; font-size: clamp(2.3rem, 4.6vw, 3.8rem); color: var(--green); margin-bottom: 24px; } .section-title em { font-style: italic; color: var(--gold); } /* ---------- Buttons ---------- */ .btn { --bs-btn-border-radius: 2px; } .btn-gold, .btn-green, .btn-outline-light-custom { position: relative; overflow: hidden; isolation: isolate; padding: 15px 32px; font-size: .78rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; border-radius: 2px; transition: color .45s var(--ease), border-color .45s, transform .3s var(--ease); } .btn-lg.btn-gold { padding: 18px 40px; } .btn-gold::before, .btn-green::before, .btn-outline-light-custom::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: right; transition: transform .55s var(--ease); } .btn-gold:hover::before, .btn-green:hover::before, .btn-outline-light-custom:hover::before { transform: scaleX(1); transform-origin: left; } .btn-gold { background: var(--gold); color: var(--green-ink); border: 1px solid var(--gold); } .btn-gold::before { background: var(--green-ink); } .btn-gold:hover, .btn-gold:focus { color: var(--gold-soft); background: var(--gold); border-color: var(--green-ink); } .btn-green { background: var(--green); color: #fff; border: 1px solid var(--green); } .btn-green::before { background: var(--gold); } .btn-green:hover { color: var(--green-ink); border-color: var(--gold); } .btn-outline-light-custom { color: #fff; border: 1px solid rgba(255,255,255,.7); background: transparent; } .btn-outline-light-custom::before { background: #fff; } .btn-outline-light-custom:hover { color: var(--green); border-color: #fff; } .link-arrow { display: inline-flex; align-items: center; gap: 10px; font-size: .76rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--green); position: relative; padding-bottom: 4px; } .link-arrow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold); transform: scaleX(.3); transform-origin: left; transition: transform .5s var(--ease); } .link-arrow:hover::after { transform: scaleX(1); } .link-arrow i { transition: transform .4s var(--ease); } .link-arrow:hover i { transform: translateX(6px); } /* ---------- Scroll progress ---------- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; z-index: 1100; } /* ---------- Preloader ---------- */ .preloader { position: fixed; inset: 0; z-index: 2000; background: var(--green-deep); display: grid; place-items: center; transition: clip-path 1.1s var(--ease); clip-path: inset(0 0 0 0); } .preloader.is-done { clip-path: inset(0 0 100% 0); } .preloader__logo { width: 200px; height: auto; } .preloader__bar { width: 200px; height: 1px; background: rgba(255,255,255,.15); margin: 24px auto 0; overflow: hidden; } .preloader__bar span { display: block; height: 100%; width: 40%; background: var(--gold); animation: load 1.2s var(--ease) infinite; } @keyframes load { from { transform: translateX(-100%); } to { transform: translateX(260%); } } @keyframes breathe { 50% { opacity: .5; transform: scale(.97); } } /* ---------- Header ---------- */ .site-header { position: fixed; inset: 0 0 auto; z-index: 1030; transition: background .5s, box-shadow .5s, transform .6s var(--ease); } .site-header .navbar { padding: 22px 0; transition: padding .5s var(--ease); } .brand-logo { height: 58px; width: auto; object-fit: contain; transition: height .5s var(--ease); } .site-header .nav-link { color: #fff; font-size: .76rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; position: relative; padding: 6px 0 !important; } .site-header .nav-link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); } .site-header .nav-link:hover::after, .site-header .nav-link.active::after { transform: scaleX(1); transform-origin: left; } .site-header .nav-link:hover, .site-header .nav-link.active { color: var(--gold-soft); } .site-header .btn-gold { padding: 12px 24px; } .site-header.is-scrolled { background: rgb(var(--paper-rgb) / .92); backdrop-filter: blur(14px); box-shadow: 0 8px 30px rgba(0,0,0,.06); } .site-header.is-scrolled .navbar { padding: 12px 0; } .site-header.is-scrolled .brand-logo { height: 46px; } .site-header.is-scrolled .nav-link { color: var(--ink); } .site-header.is-scrolled .nav-link:hover, .site-header.is-scrolled .nav-link.active { color: var(--gold); } .site-header.is-hidden { transform: translateY(-100%); } .menu-toggle { width: 46px; height: 46px; border: 0; background: transparent; position: relative; } .menu-toggle span { position: absolute; right: 10px; height: 1.5px; background: #fff; transition: width .4s var(--ease), background .3s; } .menu-toggle span:nth-child(1) { top: 18px; width: 26px; } .menu-toggle span:nth-child(2) { top: 27px; width: 16px; } .menu-toggle:hover span:nth-child(2) { width: 26px; } .site-header.is-scrolled .menu-toggle span { background: var(--ink); } /* Mobile offcanvas */ .mobile-menu { --bs-offcanvas-width: min(420px, 100vw); background: var(--green-deep); color: #fff; } .mobile-menu .offcanvas-header { padding: 22px 24px; } .mobile-menu .brand-logo { height: 46px; } .mobile-menu .offcanvas-body { padding: 10px 24px 32px; } .mobile-nav a { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; font-family: var(--serif); font-size: 2rem; line-height: 1.2; border-bottom: 1px solid rgba(255,255,255,.08); opacity: 0; transform: translateX(40px); transition: opacity .5s, transform .6s var(--ease), color .3s; } .mobile-nav a span { font-family: var(--sans); font-size: .72rem; color: var(--gold); letter-spacing: .1em; } .mobile-nav a:hover { color: var(--gold-soft); } .mobile-menu.show .mobile-nav a { opacity: 1; transform: none; } .mobile-menu.show .mobile-nav a:nth-child(1) { transition-delay: .10s; } .mobile-menu.show .mobile-nav a:nth-child(2) { transition-delay: .15s; } .mobile-menu.show .mobile-nav a:nth-child(3) { transition-delay: .20s; } .mobile-menu.show .mobile-nav a:nth-child(4) { transition-delay: .25s; } .mobile-menu.show .mobile-nav a:nth-child(5) { transition-delay: .30s; } .mobile-menu.show .mobile-nav a:nth-child(6) { transition-delay: .35s; } .mobile-menu.show .mobile-nav a:nth-child(7) { transition-delay: .40s; } .mobile-menu__foot { font-size: .92rem; color: rgba(255,255,255,.75); } /* ---------- Hero ---------- */ .hero { position: relative; height: 100svh; min-height: 640px; color: #fff; overflow: hidden; display: flex; align-items: center; } .hero-swiper { position: absolute; inset: 0; } .hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.18); } .hero-swiper .swiper-slide-active .hero__bg { animation: kenburns 8s linear forwards; } @keyframes kenburns { from { transform: scale(1.18); } to { transform: scale(1); } } .hero__overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(100deg, rgb(var(--ink-rgb) / .88) 0%, rgb(var(--ink-rgb) / .5) 50%, rgb(var(--ink-rgb) / .15) 100%); } .hero__content { position: relative; z-index: 3; } .hero__title { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 8vw, 6.4rem); line-height: 1; margin-bottom: 26px; } .hero__title em { color: var(--gold-soft); } .hero__title .mask { display: block; overflow: hidden; padding-bottom: .06em; } .hero__title .mask > span { display: inline-block; transform: translateY(110%) rotate(3deg); transform-origin: left; transition: transform 1.3s var(--ease) var(--d); } .hero-anim { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease) var(--d), transform 1.1s var(--ease) var(--d); } .is-ready .hero__title .mask > span, .is-ready .hero-anim { transform: none; opacity: 1; } .hero__sub { max-width: 480px; font-size: 1.1rem; color: rgba(255,255,255,.88); margin-bottom: 38px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; } .hero__actions .btn { min-width: 210px; height: 54px; display: inline-flex; align-items: center; justify-content: center; } .hero__controls { display: flex; align-items: center; gap: 24px; margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.18); max-width: 480px; } .hero__counter { font-family: var(--serif); font-size: 1.1rem; display: flex; align-items: center; gap: 10px; } .hero__counter #heroCur { font-size: 1.6rem; color: var(--gold-soft); } .hero__counter i { width: 24px; height: 1px; background: rgba(255,255,255,.5); } .hero__progress { flex: 1; max-width: 240px; height: 1px; background: rgba(255,255,255,.25); overflow: hidden; } .hero__progress span { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; } .hero__progress span.run { animation: heroBar 6s linear forwards; } @keyframes heroBar { to { transform: scaleX(1); } } .hero__arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; transition: all .4s var(--ease); } .hero__arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--green-ink); } .hero__scroll { position: absolute; z-index: 4; right: 40px; bottom: 40px; width: 26px; height: 42px; border: 1px solid rgba(255,255,255,.6); border-radius: 20px; justify-content: center; } .hero__scroll span { margin-top: 8px; width: 3px; height: 8px; background: #fff; border-radius: 2px; animation: scrollDot 1.8s var(--ease) infinite; } @keyframes scrollDot { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } } /* ---------- Booking ---------- */ .booking { position: relative; z-index: 10; margin-top: -72px; } .booking__card { background: var(--paper); border-top: 3px solid var(--gold); padding: 28px; box-shadow: 0 35px 70px -25px rgb(var(--ink-rgb) / .35); } .booking .form-label { font-size: .66rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .booking .form-control, .booking .form-select { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background-color: transparent; padding: 10px 2px; font-weight: 400; color: var(--ink); box-shadow: none !important; transition: border-color .3s; } .booking .form-select { padding-right: 28px; background-position: right 2px center; min-width: 76px; } .booking .form-control:focus, .booking .form-select:focus { border-color: var(--gold); } .booking__btn { height: 52px; white-space: nowrap; } /* ---------- About ---------- */ .about-media { position: relative; padding: 0 70px 70px 0; } .about-media__main { overflow: hidden; } .about-media__main img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transform: scale(1.12); } .about-media__float { position: absolute; right: 0; bottom: 0; width: 50%; border: 10px solid var(--paper); box-shadow: 0 25px 50px -20px rgba(0,0,0,.35); animation: floaty 6s ease-in-out infinite; } .about-media__float img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; } @keyframes floaty { 50% { transform: translateY(-14px); } } .about-badge { position: absolute; left: -24px; top: 36px; width: 140px; height: 140px; border-radius: 50%; background: var(--green); color: var(--gold-soft); display: grid; place-items: center; box-shadow: 0 0 0 8px rgb(var(--gold-rgb) / .2); } .about-badge__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; } .about-badge__ring text { fill: var(--gold-soft); font-family: var(--sans); font-size: 15.5px; letter-spacing: 3px; font-weight: 500; } .about-badge i { font-size: 1.8rem; color: var(--gold); animation: bob 2.4s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes bob { 50% { transform: translateY(-5px); } } .stats { border-top: 1px solid var(--line); padding-top: 12px; } .stat__num { display: block; font-family: var(--serif); font-size: 3rem; line-height: 1; color: var(--green); } .stat__lbl { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } /* Image reveal curtain */ .img-reveal { position: relative; } .img-reveal::after { content: ''; position: absolute; inset: 0; background: var(--gold); transform-origin: right; transform: scaleX(1); transition: transform 1.3s var(--ease) .2s; } .aos-animate .img-reveal::after, .img-reveal.aos-animate::after { transform: scaleX(0); } /* ---------- Marquee ---------- */ .marquee { background: var(--green); color: var(--gold-soft); padding: 24px 0; overflow: hidden; white-space: nowrap; } .marquee__track { display: inline-flex; align-items: center; gap: 40px; animation: marquee 38s linear infinite; font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.3rem); } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__track i { font-size: .7rem; color: var(--gold); } @keyframes marquee { to { transform: translateX(-50%); } } /* ---------- Rooms ---------- */ .room-filter { display: flex; flex-wrap: wrap; gap: 10px; } .chip { border: 1px solid var(--line); background: transparent; border-radius: 40px; padding: 10px 22px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; transition: all .4s var(--ease); } .chip:hover { border-color: var(--gold); color: var(--green); } .chip.active { background: var(--green); border-color: var(--green); color: #fff; } .room-col { transition: opacity .45s var(--ease), transform .45s var(--ease); } .room-col.is-out { opacity: 0; transform: scale(.94); } .room-col.d-none-anim { display: none; } .room-card { background: var(--paper); height: 100%; overflow: hidden; transition: transform .6s var(--ease), box-shadow .6s var(--ease); transform-style: preserve-3d; will-change: transform; } .room-card:hover { box-shadow: 0 35px 60px -30px rgb(var(--ink-rgb) / .45); } .room-card__img { position: relative; aspect-ratio: 4/3; overflow: hidden; } .room-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); } .room-card:hover .room-card__img img { transform: scale(1.08); } .room-card__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--ink-rgb) / .55), transparent 55%); } .room-card__img::before { content: ''; position: absolute; z-index: 2; inset: 14px; border: 1px solid rgba(255,255,255,.6); opacity: 0; transform: scale(1.06); transition: all .6s var(--ease); pointer-events: none; } .room-card:hover .room-card__img::before { opacity: 1; transform: scale(1); } .room-card__tag { position: absolute; z-index: 3; left: 22px; bottom: 18px; color: #fff; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; } .room-card__body { padding: 28px 28px 32px; } .room-card__body h3 { font-family: var(--serif); font-weight: 500; font-size: 1.75rem; color: var(--green); line-height: 1.15; margin-bottom: 10px; } .room-card__body h3 small { display: block; font-size: .95rem; color: var(--gold); font-style: italic; } .room-card__body p { color: var(--muted); font-size: .95rem; margin-bottom: 20px; } .amenities .accordion-item { border: 0; background: var(--paper); border-radius: 0 !important; } .amenities .accordion-button { font-family: var(--serif); font-size: 1.6rem; color: var(--green); background: var(--paper); box-shadow: none !important; padding: 24px 28px; } .amenities .accordion-button::after { background-image: none; content: '+'; font-family: var(--sans); font-size: 1.6rem; font-weight: 300; color: var(--gold); width: auto; height: auto; transition: transform .45s var(--ease); } .amenities .accordion-button:not(.collapsed)::after { transform: rotate(45deg); } .amenities .accordion-body { padding: 0 28px 30px; } .amenity-list .col { font-size: .93rem; color: var(--muted); display: flex; align-items: center; gap: 12px; } .amenity-list i { color: var(--gold); font-size: 1rem; } .amenities .collapse.show .amenity-list .col { animation: fadeUp .5s var(--ease) both; } .amenities .collapse.show .amenity-list .col:nth-child(4n+2) { animation-delay: .05s; } .amenities .collapse.show .amenity-list .col:nth-child(4n+3) { animation-delay: .1s; } .amenities .collapse.show .amenity-list .col:nth-child(4n+4) { animation-delay: .15s; } @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } } /* ---------- Dining banner ---------- */ .banner { position: relative; min-height: 85vh; display: flex; align-items: center; overflow: hidden; } .banner__bg { position: absolute; inset: -25% 0; background-size: cover; background-position: center; will-change: transform; } .banner__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--ink-rgb) / .9) 0%, rgb(var(--ink-rgb) / .35) 100%); } /* ---------- Meetings ---------- */ .check-list { list-style: none; padding: 0; } .check-list li { position: relative; padding-left: 30px; margin-bottom: 10px; color: var(--muted); } .check-list li::before { content: '\F26E'; font-family: 'bootstrap-icons'; position: absolute; left: 0; top: 0; color: var(--gold); } .wipe-img { overflow: hidden; } .wipe-img img { width: 100%; aspect-ratio: 5/4; object-fit: cover; display: block; transform: scale(1.2); transition: transform 1.8s var(--ease); } [data-aos="wipe"] { clip-path: inset(0 0 0 100%); transition-property: clip-path; } [data-aos="wipe"].aos-animate { clip-path: inset(0 0 0 0); } [data-aos="wipe"].aos-animate img { transform: scale(1); } /* ---------- Facilities ---------- */ .fac-grid { border-top: 1px solid rgba(255,255,255,.1); border-left: 1px solid rgba(255,255,255,.1); } .fac { height: 100%; padding: 42px 34px; border-right: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); position: relative; overflow: hidden; transition: background .5s; } .fac::before { content: ''; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); } .fac::after { content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%; right: -110px; top: -110px; background: radial-gradient(circle, rgb(var(--gold-rgb) / .18), transparent 70%); opacity: 0; transition: opacity .6s; } .fac:hover { background: rgba(255,255,255,.025); } .fac:hover::before { transform: scaleX(1); } .fac:hover::after { opacity: 1; } .fac__ic { width: 58px; height: 58px; border: 1px solid var(--gold); border-radius: 50%; display: grid; place-items: center; font-size: 1.35rem; color: var(--gold); margin-bottom: 22px; transition: transform .8s var(--ease), background .4s, color .4s; } .fac:hover .fac__ic { transform: rotateY(360deg); background: var(--gold); color: var(--green-ink); } .fac h4 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; margin-bottom: 6px; } .fac p { font-size: .92rem; color: rgba(255,255,255,.62); margin: 0; } /* ---------- Gallery ---------- */ .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; gap: 14px; } .g-item { position: relative; overflow: hidden; cursor: zoom-in; display: block; } .g-tall { grid-row: span 2; } .g-wide { grid-column: span 2; } .g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); } .g-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--ink-rgb) / .75), transparent 60%); opacity: 0; transition: opacity .5s; } .g-cap { position: absolute; z-index: 2; left: 20px; bottom: 16px; color: #fff; font-family: var(--serif); font-size: 1.35rem; font-style: italic; transform: translateY(20px); opacity: 0; transition: all .5s var(--ease); } .g-item:hover img { transform: scale(1.1); } .g-item:hover::after, .g-item:hover .g-cap { opacity: 1; } .g-item:hover .g-cap { transform: none; } /* ---------- Lightbox ---------- */ .lightbox .modal-content { background: rgb(var(--ink-rgb) / .97); border: 0; border-radius: 0; } .lightbox__close { position: absolute; top: 22px; right: 26px; z-index: 10; } .lightbox-swiper { width: 100%; height: 100%; } .lightbox-swiper .swiper-slide { display: grid; place-items: center; padding: 60px 16px; } .lightbox-swiper img { max-width: 100%; max-height: 82vh; object-fit: contain; } .lightbox-swiper .swiper-button-prev, .lightbox-swiper .swiper-button-next { color: var(--gold); } .lightbox-swiper .swiper-pagination { color: #fff; font-family: var(--serif); font-size: 1.1rem; } /* ---------- CTA ---------- */ .cta { position: relative; overflow: hidden; padding: 100px 0; background: linear-gradient(120deg, var(--green) 0%, var(--green-ink) 100%); } .cta__ring { position: absolute; width: 560px; height: 560px; right: -140px; top: -240px; border-radius: 50%; border: 1px dashed rgb(var(--gold-rgb) / .35); animation: spin 50s linear infinite; } .cta__ring::after { content: ''; position: absolute; inset: 60px; border-radius: 50%; border: 1px solid rgb(var(--gold-rgb) / .15); } /* ---------- Footer ---------- */ .footer { background: var(--green-ink); color: rgba(255,255,255,.7); padding-top: 90px; font-size: .94rem; } .footer__logo { width: 180px; height: auto; } .footer h5 { font-family: var(--serif); font-size: 1.45rem; font-weight: 500; color: #fff; margin-bottom: 20px; } .footer__list, .footer__links { list-style: none; padding: 0; margin: 0; } .footer__list li { display: flex; gap: 12px; margin-bottom: 14px; } .footer__list i { color: var(--gold); } .footer a:hover { color: var(--gold); } .footer__links li { margin-bottom: 10px; } .footer__links a { display: inline-block; transition: transform .35s var(--ease), color .3s; } .footer__links a:hover { transform: translateX(6px); } .socials { display: flex; gap: 10px; margin-top: 22px; } .socials a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; transition: all .45s var(--ease); } .socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--green-ink); transform: translateY(-5px); } .footer__map iframe { display: block; width: 100%; height: 320px; border: 0; filter: grayscale(.7) contrast(1.05); transition: filter .6s; } .footer__map iframe:hover { filter: none; } .footer__bottom { padding: 26px 12px; text-align: center; font-size: .8rem; } /* ---------- Floating ---------- */ .to-top { position: fixed; right: 24px; bottom: 24px; z-index: 1020; width: 50px; height: 50px; border-radius: 50%; background: var(--gold); color: var(--green-ink); display: grid; place-items: center; font-size: 1.1rem; opacity: 0; transform: translateY(20px) scale(.8); transition: all .5s var(--ease); } .to-top.show { opacity: 1; transform: none; } .to-top:hover { background: var(--green); color: #fff; } .mobile-book { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1025; height: 58px; display: flex; align-items: center; justify-content: center; background: var(--gold); color: var(--green-ink); font-size: .8rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; transform: translateY(100%); transition: transform .55s var(--ease); } .mobile-book.show { transform: none; } /* ---------- Logo glow + shine ---------- */ .logo-glow { position: relative; display: inline-block; line-height: 0; padding: 0; margin: 0; } .logo-glow img { position: relative; z-index: 1; animation: logoGlow 3.2s ease-in-out infinite; transition: transform .5s var(--ease), filter .5s; } /* light sweep clipped to the logo shape */ .logo-glow::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%); background-size: 250% 100%; background-position: 150% 0; -webkit-mask: url('../images/logo.png') center / contain no-repeat; mask: url('../images/logo.png') center / contain no-repeat; animation: logoShine 5s ease-in-out infinite 1.2s; } /* soft halo behind the logo */ .logo-glow::before { content: ''; position: absolute; inset: -18% -10%; z-index: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgb(var(--gold-rgb) / .35), transparent 75%); opacity: .5; animation: haloPulse 3.2s ease-in-out infinite; } .logo-glow:hover img { transform: scale(1.05); animation-play-state: paused; filter: drop-shadow(0 0 14px rgb(var(--gold-rgb) / .95)); } .logo-glow:hover::after { animation-duration: 1.2s; } @keyframes logoGlow { 0%, 100% { filter: drop-shadow(0 0 3px rgb(var(--gold-rgb) / .35)); } 50% { filter: drop-shadow(0 0 12px rgb(var(--gold-rgb) / .85)) drop-shadow(0 0 22px rgb(var(--gold-rgb) / .35)); } } @keyframes logoShine { 0%, 60% { background-position: 150% 0; } 100% { background-position: -50% 0; } } @keyframes haloPulse { 0%, 100% { opacity: .25; transform: scale(.92); } 50% { opacity: .7; transform: scale(1.05); } } /* calmer glow once header turns light */ .site-header.is-scrolled .logo-glow::before { opacity: 0; animation: none; } .site-header.is-scrolled .logo-glow img { animation-name: logoGlowSoft; } @keyframes logoGlowSoft { 0%, 100% { filter: drop-shadow(0 0 0 rgb(var(--gold-rgb) / 0)); } 50% { filter: drop-shadow(0 0 6px rgb(var(--gold-rgb) / .6)); } } /* preloader: logo draws in, then keeps breathing */ .logo-glow--preloader img { animation: logoIn 1.2s var(--ease) both, logoGlow 2.4s ease-in-out 1.2s infinite; } .logo-glow--preloader::after { animation-duration: 2.4s; animation-delay: .6s; } @keyframes logoIn { from { opacity: 0; transform: scale(.85); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } } .logo-glow--footer::before { inset: -25% -15%; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } } /* =================== Responsive =================== */ @media (max-width: 1199.98px) { .gallery-grid { grid-auto-rows: 210px; } } @media (max-width: 991.98px) { .about-media { padding: 0 50px 50px 0; max-width: 560px; margin: 0 auto; } .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; } .footer { padding-bottom: 58px; } .to-top { bottom: 76px; right: 16px; width: 44px; height: 44px; } .hero__scroll { right: 16px; } } @media (max-width: 767.98px) { .site-header .navbar { padding: 14px 0; } .brand-logo { height: 46px; } .hero { min-height: 640px; align-items: flex-end; padding-bottom: 96px; } .hero__overlay { background: linear-gradient(to top, rgb(var(--ink-rgb) / .92) 10%, rgb(var(--ink-rgb) / .35) 100%); } .hero__controls { gap: 16px; margin-top: 36px; padding-top: 22px; max-width: none; } .hero__progress { max-width: none; } .hero__arrow { width: 40px; height: 40px; } .hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .hero__actions .btn { min-width: 0; height: 50px; padding: 0 12px; font-size: .7rem; letter-spacing: .14em; } .booking { margin-top: -50px; } .booking__card { padding: 22px 18px; } .about-media { padding: 0 30px 40px 0; } .about-media__float { border-width: 6px; } .about-badge { width: 104px; height: 104px; left: -8px; top: 18px; } .about-badge__ring text { font-size: 17px; } .stat__num { font-size: 2.2rem; } .room-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin: 0 -12px; padding-inline: 12px; } .room-filter::-webkit-scrollbar { display: none; } .chip { flex-shrink: 0; } .amenities .accordion-button { font-size: 1.35rem; padding: 20px; } .amenities .accordion-body { padding: 0 20px 24px; } .banner { min-height: 75vh; } .fac { padding: 32px 24px; } .gallery-grid { grid-auto-rows: 150px; gap: 8px; } .g-cap { font-size: 1.05rem; left: 12px; bottom: 10px; opacity: 1; transform: none; } .g-item::after { opacity: .8; } .cta { padding: 80px 0; } .cta__ring { width: 360px; height: 360px; right: -160px; top: -160px; } }