/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #110b06 #2b2420 #faf6f0 #7c4f2c #8f6543 #ffffff * * Every value below is either one of those five or derived from them, and each * one is contrast-corrected against this palette's own background. Consume * them with var(--token); never write a colour value in app code. */ :root { --canvas: #faf6f0; --surface: #fdfbf8; --surface-2: #eeeae4; --border: #d9d5cf; --border-strong: #b4b0aa; --ink: #2b2420; --muted: #746e6a; --accent: #7c4f2c; --accent-hover: #694325; --accent-ink: #ffffff; --accent-text: #8f6543; --accent-strong: #7c4f2c; --accent-soft: #e8dfd5; --accent-border: #c1ab98; --success: #15803d; --success-ink: #ffffff; --success-soft: #dfe8db; --success-strong: #137638; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #f2e2d4; --warning-strong: #a64c08; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #f2dcd7; --danger-strong: #b91c1c;} /* The same palette on a dark page — written here, never by the app. It applies while carries data-theme="dark", which the platform's own toggle sets and remembers; an app that never renders that toggle is exactly as it was. Do not repoint any of these from app code: a token that references another token here is a cycle, and CSS makes every property in a cycle invalid. */ html[data-theme="dark"] { --canvas: #110b06; --surface: #29231f; --surface-2: #1d1712; --border: #322d29; --border-strong: #585451; --ink: #faf6f0; --muted: #9d9892; --accent: #7c4f2c; --accent-hover: #90694c; --accent-ink: #ffffff; --accent-text: #99765b; --accent-strong: #a18168; --accent-soft: #291a0e; --accent-border: #412a17; --success: #15803d; --success-ink: #ffffff; --success-soft: #122512; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #351b07; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #360f0b; --danger-strong: #d16969; } /* app.css — Aurelia House. Warm luxury: soft rounded surfaces, generous air, the gold accent used once per screen, real photography carrying the rest. */ :root { --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 10px 30px color-mix(in srgb, var(--ink) 7%, transparent); --shadow-raised: 0 20px 50px color-mix(in srgb, var(--ink) 14%, transparent); } /* ---------------------------------------------------------------------- */ /* Topbar / brand touches */ /* ---------------------------------------------------------------------- */ .brand-mark { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: var(--accent-ink); font-family: var(--font-sans); font-weight: 700; letter-spacing: 0.02em; } /* ---------------------------------------------------------------------- */ /* Hero */ /* ---------------------------------------------------------------------- */ .hero { position: relative; margin: calc(var(--s-6) * -1) calc(var(--s-6) * -1) 0; min-height: 640px; display: flex; flex-direction: column; justify-content: center; border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: hidden; padding: var(--s-10) var(--s-6) calc(var(--s-10) + 96px); } .hero-media { position: absolute; inset: 0; z-index: 0; } .hero-media img { width: 100%; height: 100%; object-fit: cover; } .hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 55%, transparent) 0%, color-mix(in srgb, var(--ink) 35%, transparent) 55%, color-mix(in srgb, var(--ink) 78%, transparent) 100%); } .hero-content { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; text-align: center; color: var(--canvas); } .hero-eyebrow { background: color-mix(in srgb, var(--canvas) 16%, transparent); color: var(--canvas); border: 1px solid color-mix(in srgb, var(--canvas) 30%, transparent); } .hero-ghost-btn { background: color-mix(in srgb, var(--canvas) 14%, transparent); color: var(--canvas); border: 1px solid color-mix(in srgb, var(--canvas) 35%, transparent); } .hero-title { font-size: 3rem; font-weight: 700; letter-spacing: -0.02em; margin-top: var(--s-4); line-height: 1.05; } .hero-sub { font-size: var(--t-lg); opacity: 0.92; margin-top: var(--s-4); max-width: 56ch; margin-inline: auto; } .hero-widget-wrap { position: relative; z-index: 1; max-width: 980px; margin: var(--s-8) auto 0; scroll-margin-top: 90px; } .booking-widget { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-3); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); padding: var(--s-5); } .booking-widget-field { flex: 1 1 150px; display: flex; flex-direction: column; } .booking-widget-field > * + * { margin-top: var(--s-2); } .booking-widget-submit { flex: 0 0 auto; height: 44px; } .booking-widget-flat { box-shadow: var(--shadow); } .search-bar-card { padding: var(--s-5); margin-top: var(--s-6); } @media (max-width: 720px) { .hero { margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) 0; min-height: 560px; padding: var(--s-8) var(--s-4) calc(var(--s-8) + 140px); } .hero-title { font-size: 2.25rem; } .booking-widget { flex-direction: column; align-items: stretch; } .booking-widget-submit { width: 100%; } } /* ---------------------------------------------------------------------- */ /* Section rhythm */ /* ---------------------------------------------------------------------- */ .section { padding: var(--s-12) 0; } .section-tinted { background: var(--surface-2); border-radius: var(--radius-lg); margin: 0 calc(var(--s-6) * -1); padding: var(--s-12) var(--s-6); } @media (max-width: 720px) { .section-tinted { margin: 0 calc(var(--s-4) * -1); padding: var(--s-10) var(--s-4); } } .section-head { margin-bottom: var(--s-2); } .section-eyebrow { display: inline-block; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-text); font-weight: 600; } .section-title { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; margin-top: var(--s-2); } .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-10); align-items: center; } .split.reverse { direction: rtl; } .split.reverse > * { direction: ltr; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: var(--s-6); } .split.reverse { direction: ltr; } } .about-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } .about-fact { display: flex; align-items: flex-start; gap: var(--s-3); } .about-fact .icon { flex-shrink: 0; margin-top: 2px; } /* ---------------------------------------------------------------------- */ /* Highlights */ /* ---------------------------------------------------------------------- */ .highlight-card { padding: var(--s-5); text-align: center; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .highlight-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); } .highlight-icon { width: 48px; height: 48px; margin: 0 auto; border-radius: var(--radius); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); } /* ---------------------------------------------------------------------- */ /* Room cards */ /* ---------------------------------------------------------------------- */ .room-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .room-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); } .room-card .media { position: relative; } .room-card-discount { position: absolute; top: var(--s-3); left: var(--s-3); } .room-card-body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; } .room-card-title { font-size: var(--t-xl); font-weight: 700; } .room-card-facts .chip { pointer-events: none; cursor: default; } .room-card-foot { align-items: flex-end; margin-top: auto; } .room-card-price { font-size: 1.5rem; font-weight: 700; color: var(--ink); } /* ---------------------------------------------------------------------- */ /* Offers */ /* ---------------------------------------------------------------------- */ .offer-card { position: relative; padding: var(--s-6); } .offer-card-badge { display: inline-block; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: var(--t-sm); padding: var(--s-1) var(--s-3); border-radius: var(--radius-pill); } /* ---------------------------------------------------------------------- */ /* Reviews */ /* ---------------------------------------------------------------------- */ .review-summary { display: grid; grid-template-columns: 200px 1fr; gap: var(--s-8); align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s-6); } @media (max-width: 640px) { .review-summary { grid-template-columns: 1fr; text-align: center; } } .review-summary-score { text-align: center; } .review-summary-number { font-size: 3rem; font-weight: 700; line-height: 1; } .review-summary-bars { display: flex; flex-direction: column; } .review-summary-bars > * + * { margin-top: var(--s-3); } .review-bar-row { display: grid; grid-template-columns: 120px 1fr 36px; align-items: center; gap: var(--s-3); } .review-card { padding: var(--s-5); } /* ---------------------------------------------------------------------- */ /* Gallery */ /* ---------------------------------------------------------------------- */ .gallery-masonry { columns: 3 220px; column-gap: var(--s-4); } .gallery-masonry .gallery-tile { display: block; break-inside: avoid; margin-bottom: var(--s-4); } .gallery-tile { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .gallery-tile img { width: 100%; display: block; } .gallery-tile-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-2) var(--s-3); background: linear-gradient(0deg, color-mix(in srgb, var(--ink) 65%, transparent), transparent); color: var(--canvas); font-size: var(--t-xs); font-weight: 600; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-4); } .gallery-grid-tile { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 0; padding: 0; cursor: pointer; aspect-ratio: 4/3; } .gallery-grid-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-2) var(--ease); } .gallery-grid-tile:hover img { transform: scale(1.06); } .gallery-grid-tile .gallery-tile-cap { text-align: left; } .lightbox-frame { position: relative; background: var(--canvas); display: flex; align-items: center; justify-content: center; min-height: 320px; } .lightbox-frame img { width: 100%; max-height: 72vh; object-fit: contain; } .lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: color-mix(in srgb, var(--surface) 88%, transparent); } .lightbox-prev { left: var(--s-3); } .lightbox-next { right: var(--s-3); } /* ---------------------------------------------------------------------- */ /* Location */ /* ---------------------------------------------------------------------- */ .location-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: stretch; } @media (max-width: 860px) { .location-split { grid-template-columns: 1fr; } } .map-embed { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); min-height: 320px; } .map-embed iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; } /* ---------------------------------------------------------------------- */ /* Closing CTA */ /* ---------------------------------------------------------------------- */ .closing-cta { text-align: center; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); border-radius: var(--radius-lg); padding: var(--s-12) var(--s-6); } /* ---------------------------------------------------------------------- */ /* Footer */ /* ---------------------------------------------------------------------- */ .site-footer { margin: var(--s-12) calc(var(--s-6) * -1) calc(var(--s-6) * -1); background: var(--surface-2); border-top: 1px solid var(--border); padding: var(--s-10) var(--s-6) var(--s-6); } @media (max-width: 720px) { .site-footer { margin: var(--s-10) calc(var(--s-4) * -1) calc(var(--s-4) * -1); padding: var(--s-8) var(--s-4) var(--s-5); } } .site-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr 1.4fr; gap: var(--s-8); } @media (max-width: 960px) { .site-footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .site-footer-grid { grid-template-columns: 1fr; } } .footer-heading { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 600; } .footer-link { display: flex; align-items: center; gap: var(--s-2); color: var(--muted); font-size: var(--t-sm); text-decoration: none; } .footer-link:hover { color: var(--accent-text); } .newsletter-form { display: flex; gap: var(--s-2); } .newsletter-form .input { flex: 1; } .site-footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-10); padding-top: var(--s-5); border-top: 1px solid var(--border); font-size: var(--t-sm); color: var(--muted); } /* ---------------------------------------------------------------------- */ /* WhatsApp floating button */ /* ---------------------------------------------------------------------- */ .whatsapp-float { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: var(--success); color: var(--success-ink); display: grid; place-items: center; box-shadow: var(--shadow-raised); transition: transform var(--dur-2) var(--ease); } .whatsapp-float:hover { transform: scale(1.08); } .whatsapp-float .icon { width: 26px; height: 26px; } /* ---------------------------------------------------------------------- */ /* Room detail: gallery, facts, availability strip, booking box */ /* ---------------------------------------------------------------------- */ .room-detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s-8); align-items: start; } @media (max-width: 960px) { .room-detail-grid { grid-template-columns: 1fr; } } .room-gallery-main { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16/9; } .room-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; } .room-gallery-expand { position: absolute; right: var(--s-3); bottom: var(--s-3); background: color-mix(in srgb, var(--surface) 88%, transparent); } .room-gallery-thumbs { display: flex; gap: var(--s-2); margin-top: var(--s-3); overflow-x: auto; padding-bottom: 2px; } .room-gallery-thumb { flex: 0 0 84px; width: 84px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; } .room-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .room-gallery-thumb.is-active { border-color: var(--accent); } .room-facts-row .chip { pointer-events: none; cursor: default; } .avail-strip { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-2); } .avail-day { flex: 0 0 56px; display: flex; flex-direction: column; align-items: center; padding: var(--s-2) 0; border-radius: var(--radius-sm); border: 1px solid var(--border); } .avail-day > * + * { margin-top: 4px; } .avail-day .avail-dot { width: 8px; height: 8px; border-radius: 50%; } .avail-day.is-open .avail-dot { background: var(--success); } .avail-day.is-open { border-color: var(--success-soft); } .avail-day.is-full .avail-dot { background: var(--danger); } .avail-day.is-full { border-color: var(--danger-soft); opacity: 0.7; } .booking-box { position: sticky; top: var(--s-6); } .booking-box-card { padding: var(--s-6); } .booking-summary { background: var(--surface-2); border-radius: var(--radius); padding: var(--s-4); } .booking-total { font-size: var(--t-lg); border-top: 1px solid var(--border); padding-top: var(--s-2); } @media (max-width: 960px) { .booking-box { position: static; } } /* ---------------------------------------------------------------------- */ /* Confirmation page + print */ /* ---------------------------------------------------------------------- */ .confirmation-check { width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; background: var(--success-soft); color: var(--success-strong); display: grid; place-items: center; } @media print { .no-print, .sidebar, .topbar, .site-footer, .whatsapp-float, .navopen { display: none; } .print-page { max-width: none; } body { background: var(--canvas); } } /* ---------------------------------------------------------------------- */ /* Contact page */ /* ---------------------------------------------------------------------- */ .contact-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s-8); align-items: start; } @media (max-width: 860px) { .contact-split { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------------- */ /* Admin: photo managers, login */ /* ---------------------------------------------------------------------- */ .room-image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-3); } .room-image-tile { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; border: 1px solid var(--border); } .room-image-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .room-image-primary-tag { position: absolute; top: var(--s-2); left: var(--s-2); } .room-image-actions { position: absolute; top: var(--s-2); right: var(--s-2); display: flex; gap: 4px; } .room-image-actions .btn { background: color-mix(in srgb, var(--surface) 90%, transparent); } .admin-login-wrap { min-height: calc(100vh - 64px); display: grid; place-items: center; padding: var(--s-6); } .admin-login-card { width: 100%; max-width: 400px; padding: var(--s-8); } /* ---------------------------------------------------------------------- */ /* Small utility additions this app needed beyond the design system */ /* ---------------------------------------------------------------------- */ .text-accent { color: var(--accent-text); }