/* Room detail styles, extends tokens.css */ body { background: var(--ivory); } /* Per-room accent applied via inline style on */ :root { --room-accent: var(--coral-deep); --room-accent-light: var(--coral); --room-accent-ink: var(--coral-ink); } .subhead { background: var(--ivory); border-bottom: 1px solid var(--silver); } .crumb { padding: var(--sp-5) 0 var(--sp-3); font-size: 12px; color: var(--umber); letter-spacing: 0.08em; } .crumb a { color: var(--umber); } .crumb a:hover { color: var(--char); } .crumb .sep { margin: 0 10px; color: var(--silver); } /* Detail header */ .detail-head { padding-bottom: var(--sp-5); } .detail-head__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: var(--sp-3); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--room-accent-ink); font-weight: 500; } .detail-head__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--room-accent); } .detail-head h1 { font-size: 68px; line-height: 1.02; letter-spacing: var(--ls-display); } .detail-head h1 em { font-style: italic; color: var(--room-accent-ink); } .detail-head__meta { margin-top: var(--sp-4); display: flex; align-items: center; gap: var(--sp-5); font-size: 14px; color: var(--char-soft); flex-wrap: wrap; } .detail-head__meta .divider { width: 1px; height: 14px; background: var(--silver); } .detail-head__actions { display: flex; gap: var(--sp-4); align-items: center; } .detail-head__actions button { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--char); padding: 8px 14px; border: 1px solid var(--silver); border-radius: var(--r-md); background: var(--white); cursor: pointer; transition: border-color var(--dur-1) var(--ease); } .detail-head__actions button:hover { border-color: var(--char); } .detail-head__row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-6); } /* Photo grid */ .photos { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; gap: var(--sp-3); margin-top: var(--sp-4); border-radius: var(--r-photo); overflow: hidden; position: relative; } .photos > :nth-child(1) { grid-row: span 2; grid-column: 1; } .photos > * { overflow: hidden; position: relative; background: #E9DCC9; } .photos img { width: 100%; height: 100%; object-fit: cover; } .photos__all { position: absolute; bottom: 14px; right: 14px; padding: 10px 16px; background: rgba(250,246,240,0.94); color: var(--char); font-size: 12px; letter-spacing: 0.08em; border-radius: var(--r-md); display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--silver); cursor: pointer; z-index: 2; } .photos__all:hover { background: var(--white); } .body-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-8); padding: var(--sp-8) 0 var(--sp-9); align-items: start; } .col-left { min-width: 0; } .col-right { position: sticky; top: 32px; } .block { padding-bottom: var(--sp-7); margin-bottom: var(--sp-7); border-bottom: 1px solid var(--silver); } .block:last-child { border-bottom: 0; margin-bottom: 0; } .block__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: var(--sp-4); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--room-accent-ink); font-weight: 500; } .block__eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--room-accent); } .block h2 { font-size: 40px; margin-bottom: var(--sp-4); line-height: 1.1; } .block h2 em { font-style: italic; color: var(--room-accent-ink); } .block p { color: var(--char-soft); font-size: 16px; line-height: 1.65; max-width: 62ch; } .block p + p { margin-top: var(--sp-4); } /* Palette callout */ .palette-callout { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6); background: var(--white); border: 1px solid var(--silver); border-radius: var(--r-md); align-items: center; margin-bottom: var(--sp-6); } .palette-callout__chips { display: flex; gap: 6px; } .palette-callout__chips span { width: 42px; height: 42px; border-radius: 4px; border: 1px solid rgba(42,38,34,0.14); } .palette-callout__label { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--room-accent-ink); font-weight: 500; margin-bottom: 4px; } .palette-callout__name { font-family: var(--font-display); font-size: 24px; color: var(--char); font-style: italic; } /* Amenities grid */ .amenities { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-6); } .amenity { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--silver-soft); } .amenity__icon { width: 32px; height: 32px; border-radius: var(--r-md); background: color-mix(in oklab, var(--room-accent-light) 40%, var(--oak)); display: grid; place-items: center; color: var(--room-accent-ink); flex-shrink: 0; font-family: var(--font-display); font-style: italic; font-size: 15px; } .amenity__label { font-size: 14px; color: var(--char); font-weight: 500; } .amenity__note { font-size: 12px; color: var(--umber); margin-top: 2px; } /* Perfect For callout */ .perfect-for { display: flex; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); background: color-mix(in oklab, var(--room-accent-light) 20%, var(--ivory)); border-radius: var(--r-md); align-items: flex-start; margin-top: var(--sp-5); } .perfect-for__label { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--room-accent-ink); white-space: nowrap; flex-shrink: 0; } .perfect-for__body { font-size: 15px; line-height: 1.55; color: var(--char-soft); } /* Location */ .location-map { aspect-ratio: 16/9; border-radius: var(--r-photo); background: radial-gradient(ellipse at 40% 30%, #F0EBDF 0%, transparent 50%), radial-gradient(ellipse at 70% 70%, #C5CFB2 0%, transparent 45%), linear-gradient(180deg, #E4EDD8 0%, #CBDCC0 100%); position: relative; overflow: hidden; margin-top: var(--sp-4); } .location-map svg { position: absolute; inset: 0; width: 100%; height: 100%; } .location-map .pin-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 2; } .location-map .pin-center span:first-child { padding: 8px 16px; background: var(--room-accent); color: var(--white); border-radius: 999px; font-family: var(--font-display); font-style: italic; font-size: 14px; box-shadow: var(--shadow-md); } .location-map .pin-center span:last-child { width: 1px; height: 12px; background: var(--room-accent); } /* Sister rooms */ .sisters { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-5); } .sister { display: flex; flex-direction: column; gap: var(--sp-3); } .sister__media { aspect-ratio: 4/3; border-radius: var(--r-photo); overflow: hidden; background: #E9DCC9; } .sister__media img { width: 100%; height: 100%; object-fit: cover; } .sister__name { font-family: var(--font-display); font-size: 18px; color: var(--char); } .sister__meta { font-size: 12px; color: var(--umber); letter-spacing: 0.04em; } /* Booking widget */ .booking { background: var(--white); border: 1px solid var(--silver); border-radius: var(--r-md); padding: var(--sp-5); box-shadow: var(--shadow-md); } .booking__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--silver-soft); margin-bottom: var(--sp-4); } .booking__price { font-family: var(--font-display); font-size: 32px; color: var(--char); line-height: 1; } .booking__price small { display: block; font-family: var(--font-sans); font-size: 12px; color: var(--umber); font-weight: 400; margin-top: 6px; letter-spacing: 0.02em; } .booking__note { font-size: 12px; color: var(--room-accent-ink); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; text-align: right; } .booking__dates { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--silver); border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--sp-3); } .booking__field { padding: 12px 14px; border-right: 1px solid var(--silver); display: flex; flex-direction: column; gap: 3px; text-align: left; background: transparent; cursor: pointer; transition: background var(--dur-1) var(--ease); } .booking__field:last-child { border-right: 0; } .booking__field:hover { background: color-mix(in oklab, var(--room-accent-light) 8%, var(--white)); } .booking__field-label { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--umber); font-weight: 500; } .booking__field-value { font-size: 14px; color: var(--char); } .booking__field-value--placeholder { color: var(--umber); } .booking__guests { border: 1px solid var(--silver); border-radius: var(--r-md); margin-bottom: var(--sp-4); } .booking__cta { width: 100%; padding: 16px; background: var(--room-accent); color: var(--white); font-weight: 500; letter-spacing: 0.02em; font-size: 15px; border-radius: var(--r-md); border: 0; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: filter var(--dur-2) var(--ease); font-family: var(--font-sans); } .booking__cta:hover { filter: brightness(0.92); } .booking__notice { text-align: center; margin-top: var(--sp-3); font-size: 12px; color: var(--umber); } .booking__breakdown { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--silver-soft); display: flex; flex-direction: column; gap: 10px; } .booking__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--char-soft); } .booking__row--total { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--silver); color: var(--char); font-size: 16px; font-weight: 500; } .booking__row--total b { font-family: var(--font-display); font-size: 20px; font-weight: 400; } .booking__contact { margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--silver); border-radius: var(--r-md); background: var(--oak); font-size: 13px; line-height: 1.55; } .booking__contact strong { color: var(--char); font-weight: 500; } .booking__contact a { color: var(--room-accent-ink); border-bottom: 1px solid currentColor; }