/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #130d05 #2b2118 #faf5ec #8a5a22 #8f693a #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: #faf5ec; --surface: #fdfbf6; --surface-2: #eee9e0; --border: #dad5cc; --border-strong: #b5afa7; --ink: #2b2118; --muted: #746d64; --accent: #8a5a22; --accent-hover: #754d1d; --accent-ink: #ffffff; --accent-text: #8f693a; --accent-strong: #7f531f; --accent-soft: #eadfd0; --accent-border: #c8af91; --success: #15803d; --success-ink: #ffffff; --success-soft: #dfe7d7; --success-strong: #137638; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #f2e2d1; --warning-strong: #a64c08; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #f2dbd3; --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: #130d05; --surface: #2b251e; --surface-2: #1f1912; --border: #342f28; --border-strong: #5a5650; --ink: #faf5ec; --muted: #9e9890; --accent: #8a5a22; --accent-hover: #9c7343; --accent-ink: #ffffff; --accent-text: #9c7344; --accent-strong: #ab8861; --accent-soft: #2d1e0b; --accent-border: #493012; --success: #15803d; --success-ink: #ffffff; --success-soft: #132611; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #361c06; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #38100a; --danger-strong: #d16969; } /* ==================================================================== * app.css — Aurelia's own stylesheet. * * Character: opulent, editorial, photo-led. Tight-tracked display headlines * over the system's sans body, generous whitespace, soft rounded cards, and * the owner's gold accent used sparingly — on ratings, prices and one hero band. * ==================================================================== */ :root { /* Soft, rounded, lifted — a resort brochure, not a spreadsheet. */ --radius-sm: 10px; --radius: 16px; --radius-lg: 26px; --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 8px 24px color-mix(in srgb, var(--ink) 6%, transparent); --shadow-raised: 0 20px 50px color-mix(in srgb, var(--ink) 16%, transparent); --content-max: 1240px; } .font-display { letter-spacing: -0.01em; } /* content-narrow is normally applied to
; a few pages here (booking, confirmation, auth) apply it to an inner wrapper instead, so it needs its own centring. */ .content-narrow { margin-inline: auto; } .brand { text-decoration: none; } .brand:hover .brand-name { color: var(--accent); } /* ---------------------------------------------------------------- hero */ .hero-luxury { position: relative; min-height: 620px; display: flex; align-items: flex-end; border-radius: var(--radius-lg); overflow: hidden; margin: 0 0 var(--s-10); box-shadow: var(--shadow-raised); } .hero-luxury-media { position: absolute; inset: 0; border-radius: 0; } .hero-luxury-media img { width: 100%; height: 100%; object-fit: cover; } .hero-luxury-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 10%, transparent) 0%, color-mix(in srgb, var(--ink) 78%, transparent) 100%); } .hero-luxury-content { position: relative; padding: var(--s-10) var(--s-8) var(--s-9); max-width: 720px; color: var(--accent-ink); } .hero-luxury-title { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.05; margin: var(--s-4) 0 var(--s-3); color: var(--accent-ink); } .hero-luxury-sub { font-size: var(--t-lg); opacity: 0.92; max-width: 56ch; margin-bottom: var(--s-6); } .search-bar { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: end; background: color-mix(in srgb, var(--surface) 96%, transparent); border-radius: var(--radius); padding: var(--s-4); box-shadow: var(--shadow-raised); } .search-field { flex: 1 1 180px; text-align: left; } .search-field-wide { flex: 2 1 260px; } .search-field-narrow { flex: 0 1 100px; } .search-field .label { color: var(--muted); } .search-btn { flex: 0 0 auto; height: 46px; } @media (max-width: 640px) { .hero-luxury { min-height: 520px; } .hero-luxury-content { padding: var(--s-6) var(--s-4) var(--s-6); } .search-bar { flex-direction: column; align-items: stretch; } .search-field-narrow { flex-basis: auto; } .search-btn { width: 100%; } } /* ------------------------------------------------------------- sections */ .section { margin-top: var(--s-11); } .section-title { font-size: var(--t-2xl); margin: 0; } /* --------------------------------------------------------- hotel cards */ .hotel-grid { margin-top: var(--s-6); } .hotel-card { padding: 0; overflow: hidden; text-decoration: none; color: inherit; display: block; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .hotel-card > * + * { margin-top: 0; } .hotel-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); } .hotel-card-media { position: relative; aspect-ratio: 4 / 3; } .hotel-card-media .media { height: 100%; border-radius: 0; } .hotel-card-media .badge { position: absolute; top: var(--s-3); left: var(--s-3); } .hotel-card-body { padding: var(--s-5); } .hotel-card-name { font-size: var(--t-lg); margin: 0; } .hotel-card-amenities { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); } .hotel-card-foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--border); } .hotel-card-price { font-family: var(--font-sans); font-size: var(--t-xl); font-weight: 600; color: var(--ink); line-height: 1; } .star-rating { display: inline-flex; gap: 2px; } .review-score-badge { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; } .review-score-num { font-weight: 700; font-size: var(--t-lg); } /* --------------------------------------------------------- destinations */ .destination-grid { margin-top: var(--s-6); } .destination-card { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; box-shadow: var(--shadow); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .destination-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); } .destination-card-media { position: absolute; inset: 0; border-radius: 0; } .destination-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease); } .destination-card:hover .destination-card-media img { transform: scale(1.06); } .destination-card-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--ink) 85%, transparent) 100%); } .destination-card-label { position: absolute; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); color: var(--accent-ink); display: flex; flex-direction: column; } .destination-card-label > * + * { margin-top: 2px; } .destination-card-label span:first-child { font-size: var(--t-xl); } .destination-card-label span:last-child { opacity: 0.88; } /* -------------------------------------------------------- testimonials */ .testimonial-card { display: flex; flex-direction: column; } .testimonial-card > * + * { margin-top: var(--s-2); } .testimonial-quote { font-style: italic; color: var(--ink); font-size: var(--t-base); line-height: var(--lh-tight, 1.5); } .testimonial-attrib { align-items: center; margin-top: auto; padding-top: var(--s-3); } /* -------------------------------------------------------------- filters */ .hotels-layout { display: grid; grid-template-columns: 280px 1fr; gap: var(--s-6); align-items: start; margin-top: var(--s-6); } .filters-panel { position: sticky; top: var(--s-4); display: flex; flex-direction: column; } .filters-panel > * + * { margin-top: var(--s-5); } @media (max-width: 900px) { .hotels-layout { grid-template-columns: 1fr; } .filters-panel { position: static; } } .amenity-chip { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--radius-pill); background: var(--surface-2, color-mix(in srgb, var(--ink) 4%, var(--surface))); border: 1px solid var(--border); font-size: var(--t-sm); } .amenities-grid { display: flex; flex-wrap: wrap; gap: var(--s-2); } /* ---------------------------------------------------------- hotel detail */ .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 160px); gap: var(--s-2); border-radius: var(--radius-lg); overflow: hidden; } .gallery-main { grid-column: 1 / 3; grid-row: 1 / 3; border-radius: 0; } .gallery-thumb { border-radius: 0; grid-row: span 1; } .gallery-grid .media img { height: 100%; } @media (max-width: 720px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 120px); } .gallery-main { grid-column: 1 / 3; grid-row: 1 / 3; } } .hotel-detail-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: var(--s-8); align-items: start; } .hotel-detail-aside { position: sticky; top: var(--s-4); } @media (max-width: 900px) { .hotel-detail-layout { grid-template-columns: 1fr; } .hotel-detail-aside { position: static; } } .hotel-detail-rating { display: flex; flex-direction: column; align-items: flex-end; } .hotel-detail-rating > * + * { margin-top: 6px; } .map-embed { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } .map-embed iframe { width: 100%; height: 280px; border: 0; display: block; } .date-picker-bar { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: end; } .room-row { display: grid; grid-template-columns: 180px 1fr auto; gap: var(--s-5); align-items: center; } .room-row-media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; } .room-row-foot { display: flex; flex-direction: column; align-items: flex-end; } .room-row-foot > * + * { margin-top: var(--s-2); } @media (max-width: 640px) { .room-row { grid-template-columns: 1fr; } .room-row-foot { flex-direction: row; justify-content: space-between; align-items: center; width: 100%; } .room-row-foot > * + * { margin-top: 0; } } .review-card { } /* Standalone room card (used on hotel detail alternates / not currently placed in a grid, kept for consistency with room-row's visual language). */ .room-card { padding: 0; overflow: hidden; } .room-card > * + * { margin-top: 0; } .room-card-media .media { border-radius: 0; } .room-card-body { padding: var(--s-4); } .room-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-3); } /* --------------------------------------------------------------- booking */ .booking-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: var(--s-6); align-items: start; } .booking-summary { position: sticky; top: var(--s-4); } @media (max-width: 900px) { .booking-layout { grid-template-columns: 1fr; } .booking-summary { position: static; } } .confirmation-hero { text-align: center; padding: var(--s-8) var(--s-4); } .confirmation-icon { width: 72px; height: 72px; margin: 0 auto var(--s-4); border-radius: 999px; display: grid; place-items: center; background: var(--success-soft); color: var(--success-strong); } .confirmation-ref { font-family: var(--font-mono); font-size: var(--t-2xl); letter-spacing: 0.06em; background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent-border); border-radius: var(--radius); padding: var(--s-3) var(--s-5); display: inline-block; margin-top: var(--s-3); } /* ------------------------------------------------------------------ admin */ .admin-auth { min-height: 70vh; display: grid; place-items: center; padding: var(--s-6); } .admin-auth-card { width: 100%; max-width: 420px; } .admin-edit-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); gap: var(--s-6); align-items: start; margin-top: var(--s-6); } @media (max-width: 900px) { .admin-edit-layout { grid-template-columns: 1fr; } } .room-thumb { width: 56px; height: 56px; border-radius: var(--radius-sm); overflow: hidden; flex: none; display: block; } .room-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }