*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}html{scroll-behavior:smooth}body{--tw-bg-opacity:1;background-color:rgb(251 245 234/var(--tw-bg-opacity,1));font-family:Jost,sans-serif;--tw-text-opacity:1;color:rgb(43 26 19/var(--tw-text-opacity,1));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3{font-family:Cinzel,serif}.ornament-divider{margin-top:1rem;margin-bottom:1rem;display:flex;align-items:center;gap:.75rem}.ornament-divider .line{height:1px;width:3.5rem;background-color:rgba(201,162,39,.7)}.ornament-divider.center{justify-content:center}.gold-frame{border-radius:1.25rem;border-width:1px;border-color:rgba(201,162,39,.4)}.btn-primary{display:inline-flex;align-items:center;gap:.5rem;border-radius:.375rem;border-width:1px;border-color:rgba(201,162,39,.6);--tw-bg-opacity:1;background-color:rgb(59 10 16/var(--tw-bg-opacity,1));padding:.75rem 1.5rem;font-family:Jost,sans-serif;font-size:.875rem;line-height:1.25rem;letter-spacing:.025em;--tw-text-opacity:1;color:rgb(228 196 104/var(--tw-text-opacity,1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.btn-primary:hover{--tw-bg-opacity:1;background-color:rgb(74 15 22/var(--tw-bg-opacity,1))}.btn-gold{display:inline-flex;align-items:center;gap:.5rem;border-radius:.375rem;--tw-bg-opacity:1;background-color:rgb(201 162 39/var(--tw-bg-opacity,1));padding:.75rem 1.5rem;font-family:Jost,sans-serif;font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity:1;color:rgb(43 6 11/var(--tw-text-opacity,1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.btn-gold:hover{--tw-bg-opacity:1;background-color:rgb(228 196 104/var(--tw-bg-opacity,1))}.info-card{border-radius:1.25rem;border-width:1px;border-color:rgba(201,162,39,.4);display:flex;flex-direction:column;gap:.75rem;background-color:hsla(39,59%,91%,.6);padding:1.5rem}.form-input{width:100%;border-radius:.375rem;border-width:1px;border-color:rgba(201,162,39,.4);background-color:transparent;padding:.75rem 1rem;font-family:Jost,sans-serif;font-size:.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(43 26 19/var(--tw-text-opacity,1))}.form-input::-moz-placeholder{color:rgba(74,46,34,.5)}.form-input::placeholder{color:rgba(74,46,34,.5)}.form-input:focus{--tw-border-opacity:1;border-color:rgb(201 162 39/var(--tw-border-opacity,1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:rgba(201,162,39,.6)}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.-bottom-0\.5{bottom:-.125rem}.-bottom-10{bottom:-2.5rem}.-bottom-\[5px\]{bottom:-5px}.-left-6{left:-1.5rem}.left-0{left:0}.left-1\/2{left:50%}.right-0{right:0}.top-0{top:0}.z-10{z-index:10}.z-30{z-index:30}.mx-auto{margin-left:auto;margin-right:auto}.-mt-0\.5{margin-top:-.125rem}.-mt-1{margin-top:-.25rem}.-mt-10{margin-top:-2.5rem}.-mt-px{margin-top:-1px}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-14{margin-top:3.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-11{height:2.75rem}.h-16{height:4rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-4{height:1rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[380px\]{height:380px}.h-\[7px\]{height:7px}.h-full{height:100%}.h-px{height:1px}.min-h-\[280px\]{min-height:280px}.w-10{width:2.5rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-4{width:1rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[7px\]{width:7px}.w-auto{width:auto}.w-full{width:100%}.min-w-0{min-width:0}.max-w-\[1400px\]{max-width:1400px}.max-w-md{max-width:28rem}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-45{--tw-rotate:45deg}.resize-none{resize:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-10{gap:2.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-gold-500\/15>:not([hidden])~:not([hidden]){border-color:rgba(201,162,39,.15)}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.break-all{word-break:break-all}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-0{border-width:0}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-gold-500\/20{border-color:rgba(201,162,39,.2)}.border-gold-500\/30{border-color:rgba(201,162,39,.3)}.border-gold-500\/50{border-color:rgba(201,162,39,.5)}.border-green-600\/40{border-color:rgba(22,163,74,.4)}.border-red-600\/40{border-color:rgba(220,38,38,.4)}.bg-cream-100\/60{background-color:hsla(39,59%,91%,.6)}.bg-cream-50{--tw-bg-opacity:1;background-color:rgb(251 245 234/var(--tw-bg-opacity,1))}.bg-gold-500\/60{background-color:rgba(201,162,39,.6)}.bg-green-600\/10{background-color:rgba(22,163,74,.1)}.bg-maroon-800{--tw-bg-opacity:1;background-color:rgb(74 15 22/var(--tw-bg-opacity,1))}.bg-maroon-900{--tw-bg-opacity:1;background-color:rgb(59 10 16/var(--tw-bg-opacity,1))}.bg-maroon-950{--tw-bg-opacity:1;background-color:rgb(43 6 11/var(--tw-bg-opacity,1))}.bg-red-600\/10{background-color:rgba(220,38,38,.1)}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-1{padding:.25rem}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-14{padding-top:3.5rem;padding-bottom:3.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-3{padding-bottom:.75rem}.pb-6{padding-bottom:1.5rem}.pt-1{padding-top:.25rem}.text-center{text-align:center}.font-display{font-family:Cinzel,serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[15px\]{font-size:15px}.text-\[9px\]{font-size:9px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-\[0\.06em\]{letter-spacing:.06em}.tracking-\[0\.1em\]{letter-spacing:.1em}.tracking-\[0\.25em\]{letter-spacing:.25em}.tracking-\[0\.28em\]{letter-spacing:.28em}.tracking-wide{letter-spacing:.025em}.text-cream-100{--tw-text-opacity:1;color:rgb(246 237 220/var(--tw-text-opacity,1))}.text-cream-100\/50{color:hsla(39,59%,91%,.5)}.text-cream-100\/70{color:hsla(39,59%,91%,.7)}.text-cream-100\/80{color:hsla(39,59%,91%,.8)}.text-cream-100\/85{color:hsla(39,59%,91%,.85)}.text-cream-50{--tw-text-opacity:1;color:rgb(251 245 234/var(--tw-text-opacity,1))}.text-gold-400{--tw-text-opacity:1;color:rgb(228 196 104/var(--tw-text-opacity,1))}.text-gold-500{--tw-text-opacity:1;color:rgb(201 162 39/var(--tw-text-opacity,1))}.text-gold-500\/10{color:rgba(201,162,39,.1)}.text-green-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity,1))}.text-ink-700{--tw-text-opacity:1;color:rgb(74 46 34/var(--tw-text-opacity,1))}.text-ink-700\/80{color:rgba(74,46,34,.8)}.text-ink-900{--tw-text-opacity:1;color:rgb(43 26 19/var(--tw-text-opacity,1))}.text-maroon-800{--tw-text-opacity:1;color:rgb(74 15 22/var(--tw-text-opacity,1))}.text-maroon-900{--tw-text-opacity:1;color:rgb(59 10 16/var(--tw-text-opacity,1))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.opacity-90{opacity:.9}.brightness-0{--tw-brightness:brightness(0)}.brightness-0,.grayscale-\[15\%\]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale-\[15\%\]{--tw-grayscale:grayscale(15%)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\:bg-gold-500:hover{--tw-bg-opacity:1;background-color:rgb(201 162 39/var(--tw-bg-opacity,1))}.hover\:text-gold-400:hover{--tw-text-opacity:1;color:rgb(228 196 104/var(--tw-text-opacity,1))}.hover\:text-maroon-800:hover{--tw-text-opacity:1;color:rgb(74 15 22/var(--tw-text-opacity,1))}.hover\:text-maroon-950:hover{--tw-text-opacity:1;color:rgb(43 6 11/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:block{display:block}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}}@media (min-width:768px){.md\:-mt-14{margin-top:-3.5rem}.md\:mt-20{margin-top:5rem}.md\:h-14{height:3.5rem}.md\:h-72{height:18rem}.md\:h-80{height:20rem}.md\:h-\[440px\]{height:440px}.md\:min-h-\[420px\]{min-height:420px}.md\:w-80{width:20rem}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-\[44\%_56\%\]{grid-template-columns:44% 56%}.md\:flex-row{flex-direction:row}.md\:gap-3{gap:.75rem}.md\:bg-transparent{background-color:transparent}.md\:p-10{padding:2.5rem}.md\:p-8{padding:2rem}.md\:px-10{padding-left:2.5rem;padding-right:2.5rem}.md\:px-14{padding-left:3.5rem;padding-right:3.5rem}.md\:py-20{padding-top:5rem;padding-bottom:5rem}.md\:py-4{padding-top:1rem;padding-bottom:1rem}.md\:text-left{text-align:left}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-\[11px\]{font-size:11px}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:flex{display:flex}.lg\:inline-flex{display:inline-flex}.lg\:hidden{display:none}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Compact view — makes the whole site render ~80% scale, like browser zoomed to 80%.
Using the `zoom` property (not font-size) so images, fixed-px sizes and borders
scale down too, matching an actual Chrome zoom-out instead of just shrinking text. */
html{zoom:0.8}
/* Height utilities used by the updated logo lockups (not present in the original purged build) */
.h-12{height:3rem}
.h-14{height:3.5rem}
.h-28{height:7rem}
.h-32{height:8rem}
@media (min-width:768px){
.md\:h-14{height:3.5rem}
.md\:h-16{height:4rem}
.md\:h-20{height:5rem}
}
/* --- Header: top info bar + navbar layout (added for header.php edit) --- */
.hdr-topbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:1.5rem;padding-top:.5rem;padding-bottom:.5rem}
.hdr-nav-grid{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:1rem}
.hdr-social-icon{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:9999px;border:1px solid rgba(228,196,104,.35);color:#e4c468;transition:background-color .2s,color .2s}
.hdr-social-icon:hover{background-color:rgba(228,196,104,.15)}
.justify-self-end{justify-self:end}
@media (max-width:1023px){.hdr-nav-grid{grid-template-columns:auto 1fr}}
/* --- Contact page: hero corner ornaments + info-card spacing (added for contact.php edit) --- */
.w-28{width:7rem}
.text-gold-500\/70{color:rgba(201,162,39,.7)}
.mt-8{margin-top:2rem}
@media (min-width:768px){
.md\:block{display:block}
.md\:mt-12{margin-top:3rem}
}
/* Gradient overlay utilities used by the hero sections (pre-existing
classes in the templates that were missing from this compiled build) */
.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}
.from-cream-50\/15{--tw-gradient-from:rgba(251,245,234,.15) var(--tw-gradient-from-position);--tw-gradient-to:rgba(251,245,234,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.via-transparent{--tw-gradient-to:rgba(0,0,0,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),transparent var(--tw-gradient-via-position),var(--tw-gradient-to)}
.to-cream-50\/25{--tw-gradient-to:rgba(251,245,234,.25) var(--tw-gradient-to-position)}
/* --- Contact page hero height (arbitrary values missing from purged build) --- */
.h-\[400px\]{height:400px}
@media (min-width:768px){
.md\:h-\[500px\]{height:500px}
}
/* --- Contact hero: subtle vignette so heading/paragraph stay readable
over busy parts of the photo (added for contact.php edit) --- */
.hero-text-scrim{background:radial-gradient(ellipse 70% 80% at center, rgba(15,6,6,.55) 0%, rgba(15,6,6,.15) 55%, rgba(15,6,6,0) 80%)}
.hero-text-shadow{text-shadow:0 2px 10px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.5)}
/* --- inset-0 utility (missing from purged build; needed by the hero
overlay layers in header.php/contact.php) --- */
.inset-0{top:0;right:0;bottom:0;left:0}
/* --- Mobile menu: lock background scroll while the panel is open --- */
html.menu-open-lock,body.menu-open-lock{overflow:hidden}
/* --- Hero: min-height (grows with content instead of clipping/cramming),
generous vertical padding, and white heading/paragraph text --- */
.min-h-\[420px\]{min-height:420px}
.py-16{padding-top:4rem;padding-bottom:4rem}
.text-white{color:#fff}
.text-white\/90{color:rgba(255,255,255,.9)}
@media (min-width:768px){
.md\:min-h-\[520px\]{min-height:520px}
}
/* --- Mobile menu: overlay panel, not part of the sticky header's normal
flow (prevents the "opening the menu scrolls the page down" bug that
happens when a sticky element's own box height suddenly grows) --- */
.mobile-menu-fullscreen{position:fixed;inset:0;z-index:100;background:#FBF5EA;display:flex;flex-direction:column}
.mobile-menu-fullscreen.hidden{display:none}
.mobile-menu-scroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* --- Hero: ornamental wave divider with animated gold glow --- */
.hero-wave-divider{bottom:-1px}
@keyframes heroGoldGlow{
0%,100%{filter:drop-shadow(0 0 2px rgba(201,162,39,.5)) drop-shadow(0 0 0 rgba(228,196,104,0))}
50%{filter:drop-shadow(0 0 6px rgba(201,162,39,.95)) drop-shadow(0 0 12px rgba(228,196,104,.55))}
}
.hero-wave-line,.hero-wave-ornament{animation:heroGoldGlow 3s ease-in-out infinite}
.hero-wave-ornament{animation-delay:.4s}
/* --- md:h-24 (missing from purged build; used by the hero wave divider) --- */
@media (min-width:768px){.md\:h-24{height:6rem}}
/* --- Mobile menu links: text nudged down ~6px for better optical
centering within each row (was perfectly symmetric py-3.5) --- */
.mobile-menu-link-pad{padding-top:1.25rem;padding-bottom:.5rem}
/* --- Facade photo: top padding + golden border with bottom-rounded
corners (added per client request) --- */
.facade-img-wrap{padding-top:0}
.facade-img{border:2px solid #C9A227;border-radius:1.25rem 1.25rem 1rem 1rem}
/* --- Map section: same gold-frame card feel as "Send Us a Message",
padding on left/right/bottom only (map sits flush at the top) --- */
.map-frame-pad{padding-left:1rem;padding-right:1rem;padding-bottom:1rem}
@media (min-width:768px){.map-frame-pad{padding-left:1.25rem;padding-right:1.25rem;padding-bottom:1.25rem}}
.map-frame-radius{border-radius:1.25rem}
/* --- WhatsApp link in the Phone card (missing utilities) --- */
.inline-flex{display:inline-flex}
.gap-1\.5{gap:.375rem}
/* --- Hero height, reduced 40px both breakpoints --- */
.min-h-\[380px\]{min-height:380px}
@media (min-width:768px){.md\:min-h-\[480px\]{min-height:480px}}
/* --- Gallery page: grid utilities + tile/lightbox styling --- */
.aspect-\[4\/3\]{aspect-ratio:4/3}
.border-dashed{border-style:dashed}
.mb-8{margin-bottom:2rem}
.pb-16{padding-bottom:4rem}
.max-w-2xl{max-width:42rem}
.rounded-2xl{border-radius:1rem}
.inset-x-0{left:0;right:0}
@media (min-width:768px){
.md\:gap-6{gap:1.5rem}
.md\:mb-12{margin-bottom:3rem}
.md\:pb-24{padding-bottom:6rem}
}
@media (min-width:1024px){
.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.gallery-tile{cursor:pointer;display:block;width:100%;text-align:left;background:#000}
.gallery-tile-img{transition:transform .5s ease}
.gallery-tile:hover .gallery-tile-img{transform:scale(1.06)}
.gallery-tile-caption{background:linear-gradient(to top,rgba(20,8,8,.75),rgba(20,8,8,0))}
.gallery-lightbox{position:fixed;inset:0;z-index:200;background:rgba(10,4,4,.97);display:flex;align-items:center;justify-content:center;padding:0}
.gallery-lightbox.hidden{display:none}
.gallery-lightbox-figure{width:100vw;height:100vh;max-width:100vw;max-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;margin:0}
.gallery-lightbox-figure img{max-width:98vw;max-height:90vh;width:auto;height:auto;border-radius:.5rem;border:1px solid #C9A227;object-fit:contain}
.gallery-lightbox-figure figcaption{font-size:1.05rem}
.gallery-lightbox-close{position:absolute;top:1.25rem;right:1.25rem;color:#F6EDDC;width:2.75rem;height:2.75rem;border-radius:9999px;border:1px solid rgba(228,196,104,.4);display:flex;align-items:center;justify-content:center;transition:background-color .2s}
.gallery-lightbox-close:hover{background-color:rgba(228,196,104,.15)}
/* --- Gallery: thicker borders (thumbnail + lightbox), slide nav arrows --- */
.gallery-tile-border{border:1px solid #C9A227}
.gallery-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);color:#F6EDDC;width:3rem;height:3rem;border-radius:9999px;border:1px solid rgba(228,196,104,.4);display:flex;align-items:center;justify-content:center;background-color:rgba(20,8,8,.35);transition:background-color .2s}
.gallery-lightbox-nav:hover{background-color:rgba(228,196,104,.2)}
.gallery-lightbox-prev{left:1rem}
.gallery-lightbox-next{right:1rem}
@media (min-width:768px){
.gallery-lightbox-prev{left:1.5rem}
.gallery-lightbox-next{right:1.5rem}
}
/* --- Gallery: category filter tab bar (matches reference: pill "All"
+ plain-text tabs) --- */
.gallery-filter-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.75rem;padding-bottom:1.25rem;border-bottom:1px solid rgba(201,162,39,.25)}
.gallery-filter-btn{font-family:'Jost',sans-serif;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:#4A2E22;padding:.55rem 1rem;border-radius:9999px;transition:background-color .2s,color .2s}
.gallery-filter-btn:hover{color:#2b060b}
.gallery-filter-btn.active{background-color:#2b060b;color:#fff}
/* --- Fix: .gallery-tile's own display:block was overriding .hidden
(same specificity, later in source order) — this wins reliably --- */
.gallery-tile.hidden{display:none}
/* --- Fix: grid-cols-2 (mobile default) was missing entirely — this is
why the gallery never actually showed 2 photos per row on mobile --- */
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* --- Gallery grid: 4-per-row on desktop --- */
@media (min-width:768px){.md\:gap-5{gap:1.25rem}}
/* --- Gallery grid columns: authoritative rule (ID specificity) to avoid
any conflict with other grid-cols-* utility class ordering elsewhere
in this stylesheet — 2 per row on mobile, 4 per row on desktop --- */
#gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1024px){#gallery-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* --- Utilities for new pages (coming soon sections) --- */
.max-w-xl{max-width:36rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
@media (min-width:768px){.md\:py-28{padding-top:7rem;padding-bottom:7rem}}
/* --- Coming-soon pages: spacing/sizing utilities --- */
.py-24{padding-top:6rem;padding-bottom:6rem}
.w-11{width:2.75rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
@media (min-width:768px){
.md\:py-32{padding-top:8rem;padding-bottom:8rem}
.md\:w-14{width:3.5rem}
}
/* --- Header fine-tune: shorter header, smaller/lower menu text, logo
nudged up slightly (client-requested micro adjustments) --- */
.hdr-nav-row{padding-top:9.5px;padding-bottom:9.5px}
@media (min-width:768px){.hdr-nav-row{padding-top:13.5px;padding-bottom:13.5px}}
.hdr-logo-shift{transform:translateY(-5px)}
.hdr-menu-shift-down{padding-top:10px}
.hdr-book-btn{padding:9.5px 22px}
/* ================= Rooms page: carousel, featured room, amenities ================= */
/* --- Room type carousel (horizontal scroll, 1 / 2 / 4 cards visible) --- */
.room-carousel{display:flex;gap:1.25rem;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:.25rem .25rem 1rem}
.room-carousel::-webkit-scrollbar{display:none}
.room-carousel-card{flex:0 0 auto;width:78vw}
.aspect-room-card{aspect-ratio:4/3}
.room-carousel-nav{position:absolute;top:38%;transform:translateY(-50%);z-index:10;width:2.5rem;height:2.5rem;border-radius:9999px;background:#FBF5EA;border:1px solid rgba(201,162,39,.4);color:#7A2E1F;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(43,6,11,.12);transition:background-color .2s}
.room-carousel-nav:hover{background-color:#F3E7C9}
.room-carousel-prev{left:-.5rem}
.room-carousel-next{right:-.5rem}
@media (min-width:640px){
.room-carousel-card{width:calc(50% - .625rem)}
.room-carousel-prev{left:-1.25rem}
.room-carousel-next{right:-1.25rem}
}
@media (min-width:1024px){
.room-carousel-card{width:calc(33.333% - 1rem)}
}
/* --- Featured room: decorative side panel + vertical text --- */
.room-side-panel{width:3.25rem}
.room-side-text{writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.15em}
/* --- Room amenities icon badge --- */
.room-amenity-icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;color:#C9A227}
/* --- Featured room thumbnail nav buttons --- */
.featured-thumb-nav{flex:0 0 auto;width:2rem;height:2rem;border-radius:9999px;border:1px solid rgba(201,162,39,.4);display:flex;align-items:center;justify-content:center;color:#7A2E1F;transition:background-color .2s}
.featured-thumb-nav:hover{background-color:rgba(201,162,39,.12)}
.featured-thumb-btn{transition:border-color .2s;cursor:pointer}
/* --- A few utility classes this page needed that weren't in the purged build --- */
.pt-12{padding-top:3rem}
.pb-4{padding-bottom:1rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-14{padding-top:3.5rem;padding-bottom:3.5rem}
.mb-10{margin-bottom:2.5rem}
.mt-10{margin-top:2.5rem}
.mt-6{margin-top:1.5rem}
.mt-7{margin-top:1.75rem}
.p-5{padding:1.25rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.gap-1{gap:.25rem}
.gap-x-6{column-gap:1.5rem}
.gap-y-3{row-gap:.75rem}
.flex-1{flex:1 1 0%}
.border-2{border-width:2px}
.border-y{border-top-width:1px;border-bottom-width:1px}
.rounded-lg{border-radius:.5rem}
.italic{font-style:italic}
.leading-snug{line-height:1.375}
.text-left{text-align:left}
.w-16{width:4rem}
.w-20{width:5rem}
.h-14{height:3.5rem}
.h-16{height:4rem}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (min-width:768px){
.md\:pt-16{padding-top:4rem}
.md\:py-20{padding-top:5rem;padding-bottom:5rem}
.md\:gap-4{gap:1rem}
.md\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}
.md\:w-20{width:5rem}
.md\:h-16{height:4rem}
.md\:grid-cols-\[44\%_56\%\]{grid-template-columns:44% 56%}
}
@media (min-width:640px){
.sm\:grid-cols-\[1fr_auto\]{grid-template-columns:1fr auto}
}
@media (min-width:640px){.sm\:flex{display:flex}}
/* --- Amenity list: real flex-sibling divider between the two icon
columns (columns stay equal flex-1 boxes — text position never
moves). The line itself is nudged left purely visually via
`transform`, which repaints it without affecting layout/siblings.
Mobile columns are much narrower, so the shift amount is smaller
there (measured safe against the longest label, "Modern Bathroom")
and larger on desktop (md+) where there's more room. --- */
.amenity-vline{position:relative;width:1px;align-self:stretch;background-image:linear-gradient(to bottom, rgba(201,162,39,0) 0%, rgba(201,162,39,.55) 15%, rgba(201,162,39,.55) 85%, rgba(201,162,39,0) 100%);transform:translateX(-30px);}
.amenity-vline:after{content:"";position:absolute;top:50%;left:50%;width:7px;height:7px;background:#C9A227;border:2px solid #FBF5EA;transform:translate(-50%,-50%) rotate(45deg);}
@media (min-width:768px){
.amenity-vline{transform:translateX(-130px);}
}
/* --- w-5/h-5 (missing from purged build, needed for room feat_list icons) --- */
.w-5{width:1.25rem}
.h-5{height:1.25rem}
/* --- w-[29px]/h-[29px] (missing from purged build, needed for the
Room Amenities section icons below) --- */
.w-\[29px\]{width:29px}
.h-\[29px\]{height:29px}
/* --- pb-[5px] (missing from purged build, needed for the map section
on contact.php to have breathing room before the footer) --- */
.pb-\[5px\]{padding-bottom:5px}
/* --- Page-wide subtle velvet/wall-grain texture behind the flat
cream background. Pure SVG noise (no image file), very low alpha,
warm gold/brown tint so it reads as fine plaster grain, not static. --- */
body{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.49 0 0 0 0 0.36 0 0 0 0 0.16 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat:repeat;
background-size:180px 180px;
}
/* --- Same grain technique, recoloured for the maroon-950 footer. A
pure-black fleck barely showed up on an already near-black maroon
(no contrast) — switched to a warm gold-bronze fleck (matches the
site's gold accent) at a higher alpha so it actually reads as rich
velvet grain against the dark background. Scoped to the footer
only, does not touch other bg-maroon-900/950 elements (header, CTA
band) elsewhere on the site. --- */
.footer-velvet{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='fn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.62 0 0 0 0 0.46 0 0 0 0 0.18 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fn)'/%3E%3C/svg%3E");
background-repeat:repeat;
background-size:180px 180px;
}
/* ===== "Make Your Stay More Special" booking CTA banner (rooms.php) ===== */
.cta-book-banner{
position:relative;
background:linear-gradient(100deg,#2b060b 0%,#4a0f16 20%,#6e1f26 42%,#8a4034 60%,#5c2418 78%,#3b0a10 100%);
min-height:210px;
}
.cta-book-banner__palace{
position:absolute;
right:0;
bottom:0;
width:70%;
height:auto;
opacity:.55;
pointer-events:none;
z-index:1;
}
/* Color overlay blended 50/50 on top of the photo so it tones into the
maroon/gold background instead of sitting as a flat cutout */
.cta-book-banner__palace-tint{
position:absolute;
inset:0;
background:linear-gradient(100deg,rgba(43,6,11,.9) 0%,rgba(74,15,22,.5) 35%,rgba(138,64,52,.15) 60%,rgba(59,10,16,.35) 100%);
z-index:2;
pointer-events:none;
}
.cta-book-banner__mandala{
position:absolute;
z-index:1;
pointer-events:none;
width:220px;
height:auto;
opacity:.8;
}
.cta-book-banner__mandala--left{
left:0;
bottom:0;
transform:translate(-42%,32%);
}
.cta-book-banner__mandala--right{
right:0;
top:0;
transform:scaleX(-1) translate(-42%,-32%);
opacity:.45;
}
.cta-book-banner__heading{
position:relative;
z-index:3;
font-family:'Alex Brush',cursive;
color:#e4c468;
font-size:1.9rem;
line-height:1.2;
}
.cta-book-banner__btn{
position:relative;
z-index:3;
display:inline-flex;
align-items:center;
gap:.5rem;
border-radius:9999px;
border:1px solid rgba(201,162,39,.6);
background-color:rgb(59 10 16);
color:#f6edda;
padding:.7rem 1.5rem;
font-family:'Jost',sans-serif;
font-size:.8rem;
font-weight:600;
letter-spacing:.08em;
text-transform:uppercase;
transition:background-color .2s ease;
white-space:nowrap;
}
.cta-book-banner__btn:hover{
background-color:rgb(74 15 22);
}
.cta-book-banner .relative{ z-index:3; }
@media (min-width:768px){
.cta-book-banner{ min-height:280px; }
.cta-book-banner__palace{ width:54%; max-width:820px; }
.cta-book-banner__mandala{ width:280px; }
.cta-book-banner__heading{ font-size:2.5rem; }
.cta-book-banner__btn{ font-size:.875rem; padding:.85rem 1.75rem; }
}
/* ===== Booking popup modal (rooms.php) ===== */
.booking-modal{
position:fixed;
inset:0;
z-index:100;
display:none;
align-items:center;
justify-content:center;
padding:.75rem;
}
.booking-modal.is-open{ display:flex; }
.booking-modal__backdrop{
position:absolute;
inset:0;
background:rgba(43,6,11,.72);
backdrop-filter:blur(2px);
}
.booking-modal__panel{
position:relative;
background:#fbf5ea;
border:1px solid rgba(201,162,39,.4);
border-radius:1rem;
width:100%;
max-width:600px;
max-height:94vh;
box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.booking-modal__scroll{
max-height:94vh;
overflow-y:auto;
padding:1.5rem 1.25rem 1.25rem;
scrollbar-width:none;
}
.booking-modal__scroll::-webkit-scrollbar{ display:none; }
.booking-modal__close{
position:absolute;
top:.6rem;
right:.6rem;
z-index:1;
color:#4a2e22;
background:rgba(201,162,39,.12);
border-radius:9999px;
padding:.35rem;
line-height:0;
transition:background-color .2s ease;
}
.booking-modal__close:hover{ background:rgba(201,162,39,.25); }
.booking-modal__close svg{ width:16px; height:16px; }
.booking-modal__logo{
display:block;
width:36px;
height:36px;
object-fit:contain;
margin:0 auto .5rem;
}
.booking-modal__title{
font-family:Cinzel,serif;
text-align:center;
font-size:1.15rem;
color:#3b0a10;
}
.booking-modal__subtitle{
text-align:center;
font-size:.7rem;
color:rgba(74,46,34,.8);
margin-top:.3rem;
margin-bottom:.9rem;
line-height:1.4;
}
.booking-modal__form{
display:flex;
flex-direction:column;
gap:.65rem;
}
.booking-modal__row{
display:grid;
grid-template-columns:1fr 1fr;
gap:.6rem;
}
.booking-modal__field label{
display:block;
font-size:.68rem;
font-weight:500;
color:#4a2e22;
margin-bottom:.25rem;
}
.booking-modal__field label span{
color:#8a2a2a;
margin-left:.15rem;
}
.booking-modal__field .form-input{
padding:.5rem .65rem;
font-size:.78rem;
}
.booking-modal__optional{
color:rgba(74,46,34,.55);
font-weight:400;
}
.booking-modal__honeypot{
position:absolute;
left:-9999px;
top:-9999px;
width:1px;
height:1px;
overflow:hidden;
}
.booking-modal__submit{
justify-content:center;
margin-top:.15rem;
padding-top:.65rem;
padding-bottom:.65rem;
font-size:.8rem;
}
/* ===== Footer layout (hand-written — not dependent on the Tailwind
build's purged utility set, so spacing always applies reliably) ===== */
.footer-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:2rem;
padding-top:2rem;
padding-bottom:2rem;
}
@media (min-width:768px){
.footer-grid{
grid-template-columns:repeat(4,minmax(0,1fr));
gap:2.5rem;
padding-top:3.5rem;
padding-bottom:3.5rem;
}
}
.footer-logo{
height:3.5rem;
width:auto;
margin-bottom:.85rem;
object-fit:contain;
}
@media (min-width:768px){
.footer-logo{ height:8rem; margin-bottom:1rem; }
}
.footer-desc{
font-size:.75rem;
line-height:1.6;
color:rgba(246,237,220,.7);
}
@media (min-width:768px){
.footer-desc{ font-size:.875rem; }
}
.footer-socials{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:.5rem;
margin-top:1rem;
}
@media (min-width:768px){
.footer-socials{ gap:.75rem; margin-top:1.25rem; }
}
.footer-social-btn{
width:2rem;
height:2rem;
display:flex;
align-items:center;
justify-content:center;
border-radius:9999px;
border:1px solid rgba(201,162,39,.5);
color:#C9A227;
transition:background-color .2s ease,color .2s ease;
}
.footer-social-btn:hover{
background-color:#C9A227;
color:#2b060b;
}
@media (min-width:768px){
.footer-social-btn{ width:2.25rem; height:2.25rem; }
}
.footer-heading{
font-family:Cinzel,serif;
font-size:1rem;
color:#C9A227;
margin-bottom:.75rem;
}
@media (min-width:768px){
.footer-heading{ font-size:1.125rem; margin-bottom:1rem; }
}
.footer-list{
display:flex;
flex-direction:column;
gap:.55rem;
font-size:.75rem;
}
@media (min-width:768px){
.footer-list{ gap:.625rem; font-size:.875rem; }
}
.footer-list--contact{ gap:.7rem; }
@media (min-width:768px){
.footer-list--contact{ gap:.75rem; }
}
.footer-bottom{
text-align:center;
font-size:.75rem;
color:rgba(246,237,220,.5);
padding-top:1.25rem;
padding-bottom:1.25rem;
}
/* ===== Booking success toast (rooms.php) ===== */
.booking-toast{
position:fixed;
top:1.25rem;
left:50%;
z-index:200;
display:none;
align-items:flex-start;
gap:.75rem;
width:calc(100% - 2rem);
max-width:380px;
background:rgba(255,255,255,.72);
backdrop-filter:blur(14px) saturate(160%);
-webkit-backdrop-filter:blur(14px) saturate(160%);
border:1px solid rgba(34,197,94,.35);
border-radius:1rem;
box-shadow:0 12px 32px rgba(43,6,11,.18);
padding:1rem 1.1rem;
transform:translate(-50%,-14px);
opacity:0;
}
.booking-toast.is-visible{
display:flex;
animation:bookingToastIn .35s ease forwards;
}
.booking-toast.is-hiding{
display:flex;
animation:bookingToastOut .3s ease forwards;
}
@keyframes bookingToastIn{
from{ opacity:0; transform:translate(-50%,-14px); }
to{ opacity:1; transform:translate(-50%,0); }
}
@keyframes bookingToastOut{
from{ opacity:1; transform:translate(-50%,0); }
to{ opacity:0; transform:translate(-50%,-14px); }
}
.booking-toast__icon{
flex-shrink:0;
width:26px;
height:26px;
border-radius:9999px;
background:rgba(34,197,94,.18);
color:#16a34a;
display:flex;
align-items:center;
justify-content:center;
}
.booking-toast__icon svg{ width:15px; height:15px; }
.booking-toast__title{
margin:0;
font-family:Jost,sans-serif;
font-size:.85rem;
font-weight:600;
color:#1f4d2e;
}
.booking-toast__msg{
margin:.15rem 0 0 0;
font-family:Jost,sans-serif;
font-size:.75rem;
color:rgba(31,77,46,.8);
}
@media (min-width:768px){
.booking-toast{ top:1.75rem; }
}
/* ===== Utility patch (index.php) — these standard Tailwind utilities
weren't in the original purged build, so they're added here in the
exact same format Tailwind itself generates, using the project's
existing color values. Safe to reuse anywhere else too. ===== */
.aspect-square{aspect-ratio:1/1}
.block{display:block}
.flex-wrap{flex-wrap:wrap}
.uppercase{text-transform:uppercase}
.order-1{order:1}
.order-2{order:2}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.-bottom-px{bottom:-1px}
.duration-500{transition-duration:.5s}
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0/.05);box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}
.hover\:shadow-md:hover{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.group:hover .group-hover\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.tracking-\[0\.2em\]{letter-spacing:.2em}
.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}
.bg-cream-100\/40{background-color:hsla(39,59%,91%,.4)}
.border-gold-500\/15{border-color:rgba(201,162,39,.15)}
.text-gold-600{color:rgb(166,129,31)}
.hover\:text-gold-600:hover{color:rgb(166,129,31)}
@media (min-width:640px){
.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:768px){
.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.md\:gap-8{gap:2rem}
.md\:gap-10{gap:2.5rem}
.md\:gap-14{gap:3.5rem}
.md\:order-1{order:1}
.md\:order-2{order:2}
.md\:mt-3{margin-top:.75rem}
.md\:p-6{padding:1.5rem}
.md\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}
.md\:py-16{padding-top:4rem;padding-bottom:4rem}
.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}
.md\:text-sm{font-size:.875rem;line-height:1.25rem}
}
/* ===== Homepage hero slider =====
Hero photos are 1983x793 (~2.5:1 panoramas). On desktop the section height
is derived from that ratio, so the WHOLE photo stays visible at every
laptop resolution (1280x720, 1366x768, 1440x900, 1536x864, 1920x1080...)
instead of being side-cropped by a fixed min-height. --hero-min/--hero-max
keep it sane on very narrow or very large screens, --hero-focus retunes the
crop, --hero-ar retunes the ratio if the photos are ever swapped. */
.home-hero{
--hero-ar: 2.5; /* 1983 / 793 — retune if you swap the photos */
--hero-min: 440px; /* never shorter than this (real screen px) */
--hero-max: 900px; /* never taller than this on big monitors */
--hero-focus: 50% 50%; /* object-position, e.g. "50% 40%" for more sky */
--hero-fade: 1200ms; /* must match FADE_MS in the slider JS */
/* IMPORTANT: this site runs `html{zoom:.8}` (see top of file). Under zoom,
vw/svh still report REAL screen pixels while the element's own box is in
zoomed CSS pixels, so any vw/svh maths must be divided by the zoom or the
hero comes out 20% short — which is exactly why the slider looked
cropped on some laptops. Keep --hero-zoom in sync with html{zoom}. */
--hero-zoom: 0.8;
position:relative;
/* mobile: photo strip (100vw / ratio) + space for the copy block */
height:var(--hero-m-h, 480px);
overflow:hidden;
background-color:#0a0a0a;
}
.home-hero__slide{
position:absolute;
inset:0;
height:100%;
opacity:0;
transition:opacity var(--hero-fade) ease-in-out;
z-index:0;
pointer-events:none;
}
.home-hero__slide.is-active{
opacity:1;
z-index:1;
pointer-events:auto;
}
/* Slide on its way out: stays fully painted and KEEPS its finished
transform/copy position while it fades. Without this the outgoing slide
snapped back to its start state the instant .is-active was removed —
that snap is the "jump". */
.home-hero__slide.is-leaving{
opacity:0;
z-index:2;
pointer-events:none;
}
.home-hero__img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:var(--hero-focus);
transform-origin:center center;
transform:scale(1);
backface-visibility:hidden;
will-change:transform;
}
/* Ken Burns now zooms OUT (1.045 -> 1). End state == resting state, so
nothing can snap when the class is removed, and the slide settles showing
the full frame instead of a cropped-in one. */
.home-hero__slide.is-active .home-hero__img{
animation:homeHeroKenBurns 7s ease-out both; /* == AUTOPLAY_MS */
}
.home-hero__slide.is-leaving .home-hero__img{
animation:none;
transform:scale(1);
}
@keyframes homeHeroKenBurns{
from{ transform:scale(1.045); }
to{ transform:scale(1); }
}
.home-hero__tint{
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.4) 30%,rgba(0,0,0,.12) 55%,rgba(0,0,0,0) 75%);
}
.home-hero__grid{
display:flex;
flex-direction:column;
gap:1rem;
padding-top:3rem;
padding-bottom:2.5rem;
justify-content:center;
height:100%;
}
.home-hero__script{
font-family:'Alex Brush',cursive;
color:#e4c468;
font-size:1.9rem;
margin:0 0 .25rem;
}
.home-hero__heading{
font-family:Cinzel,serif;
color:#fff;
font-size:2.1rem;
line-height:1.2;
text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.home-hero__subtext{
color:rgba(255,255,255,.88);
font-size:.9rem;
line-height:1.6;
margin-top:1rem;
max-width:32rem;
}
.home-hero__cta{
margin-top:1.75rem;
}
.home-hero__eyebrow{
display:flex;
align-items:center;
gap:.6rem;
color:#fff;
font-family:Cinzel,serif;
font-size:.78rem;
font-weight:600;
letter-spacing:.15em;
text-transform:uppercase;
margin:0 0 .6rem;
}
.home-hero__eyebrow-icon{ width:34px; height:14px; flex-shrink:0; }
.home-hero__eyebrow-icon--end{ transform:scaleX(-1); margin-left:-.15em; } /* cancels the letter-spacing's trailing gap so both ornaments sit symmetrically */
.home-hero__heading{
font-family:Cinzel,serif;
color:#fff;
font-weight:700;
font-size:2rem;
line-height:1.15;
text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.home-hero__script{
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-weight:600;
color:#e4c468;
font-size:1.3rem;
margin-top:.6rem;
}
.home-hero__subtext{
color:rgba(255,255,255,.88);
font-size:.85rem;
line-height:1.6;
margin-top:.85rem;
max-width:30rem;
}
.home-hero__ctas{
display:flex;
flex-wrap:wrap;
gap:.85rem;
margin-top:1.5rem;
}
.home-hero__btn{
display:inline-flex;
align-items:center;
gap:.5rem;
padding:.75rem 1.4rem;
border-radius:.4rem;
font-family:Jost,sans-serif;
font-size:.75rem;
font-weight:600;
letter-spacing:.05em;
transition:background-color .2s ease,color .2s ease;
}
.home-hero__btn--solid{
background-color:#5c0f16;
color:#f6edda;
border:1px solid #5c0f16;
}
.home-hero__btn--solid:hover{ background-color:#7a141c; }
.home-hero__btn--outline{
background-color:rgba(0,0,0,.25);
color:#fff;
border:1px solid rgba(255,255,255,.55);
}
.home-hero__btn--outline:hover{ background-color:rgba(0,0,0,.4); }
.home-hero__copy{ max-width:560px; margin-top:1.5rem; }
.home-hero__slide .home-hero__copy{
opacity:0;
transform:translateY(18px);
}
.home-hero__slide.is-active .home-hero__copy{
animation:homeHeroCopyIn .9s ease .25s forwards;
}
/* Hold the text where it landed while the slide fades out (no snap-back). */
.home-hero__slide.is-leaving .home-hero__copy{
animation:none;
opacity:1;
transform:translateY(0);
}
@keyframes homeHeroCopyIn{
to{ opacity:1; transform:translateY(0); }
}
/* Booking search widget — floats over the hero's bottom edge */
.home-search-wrap{
display:none;
}
@media (min-width:768px){
.home-search-wrap{
display:block;
position:relative;
z-index:10;
margin-top:-2.5rem;
padding-bottom:0;
}
/* Pull the About section up under the search widget, and tuck the
mandala further up behind it, ONLY once that widget is actually
visible (it's display:none below 768px). Doing this unconditionally
made the section climb under the HERO on mobile instead — killing
the top spacing and hiding the mandala behind the hero photo. */
.home-about{ margin-top:-3.5rem; }
.home-about__mandala--tr{ top:-4.5rem; right:.5rem; }
}
/* Simple frame — plain rounded card, back to the original design. */
.home-search-frame{
background:none;
padding:0;
}
.home-search{
background:#fbf5ea;
border:1px solid rgba(201,162,39,.35);
border-radius:1rem;
box-shadow:0 16px 40px rgba(43,6,11,.18);
padding:1.25rem 1.5rem;
display:flex;
flex-direction:column;
gap:1rem;
}
.home-search__field{
display:flex;
align-items:center;
gap:.65rem;
flex:1;
position:relative;
}
.home-search__icon{
color:#8a2a2a;
flex-shrink:0;
}
.home-search__field label{
display:block;
font-size:.65rem;
text-transform:uppercase;
letter-spacing:.08em;
color:rgba(74,46,34,.7);
margin-bottom:.15rem;
}
.home-search__input{
border:none;
background:transparent;
padding:0;
font-family:Jost,sans-serif;
font-size:.85rem;
color:#3b0a10;
font-weight:500;
width:100%;
}
.home-search__input:focus{ outline:none; }
.home-search__input[type="date"]::-webkit-calendar-picker-indicator{
opacity:0;
position:absolute;
right:0;
width:100%;
height:100%;
cursor:pointer;
}
.home-search__select{ appearance:auto; }
.home-search__divider{
display:none;
}
.home-search__btn{
justify-content:center;
white-space:nowrap;
}
@media (min-width:900px){
.home-search{
flex-direction:row;
align-items:center;
padding:1.1rem 1.75rem;
}
.home-search__divider{
display:block;
width:1px;
align-self:stretch;
background:rgba(201,162,39,.3);
}
}
/* Prev/next arrows */
.home-hero__arrow{
display:none;
}
@media (min-width:640px){
.home-hero__arrow{
display:flex;
position:absolute;
bottom:1.75rem;
z-index:5;
width:38px;
height:38px;
border-radius:9999px;
background:rgba(255,255,255,.14);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,.4);
color:#fff;
align-items:center;
justify-content:center;
transition:background-color .2s ease;
}
.home-hero__arrow:hover{ background:rgba(255,255,255,.3); }
.home-hero__arrow--prev{ right:4.5rem; left:auto; }
.home-hero__arrow--next{ right:1rem; }
}
/* Dots */
.home-hero__dots{
position:absolute;
bottom:2.25rem;
left:50%;
transform:translateX(-50%);
z-index:5;
display:flex;
align-items:center;
gap:.5rem;
}
.home-hero__dot{
width:9px;
height:9px;
border-radius:9999px;
background:rgba(255,255,255,.45);
transition:background-color .2s ease,width .2s ease;
}
.home-hero__dot.is-active{
background:#C9A227;
width:24px;
}
@media (min-width:768px){
/* Height is derived from the photo's own ratio, so the full frame fits
edge-to-edge at ANY laptop width / resolution / OS scaling.
Deliberately NOT `aspect-ratio` + `min-height` — that combo makes
Chromium widen the box to keep the ratio and you get a phantom
horizontal scrollbar. */
.home-hero{
height:calc(
clamp(
var(--hero-min),
100vw / var(--hero-ar),
min(var(--hero-max), 100svh - 120px)
) / var(--hero-zoom)
);
}
.home-hero__grid{
padding-top:2rem;
padding-bottom:6.5rem;
}
.home-hero__heading{ font-size:3.4rem; }
.home-hero__subtext{ font-size:1rem; }
/* Lift the controls clear of the booking card, which overlaps the hero's
bottom edge by 2.5rem from 768px up. */
.home-hero__arrow{ width:48px; height:48px; bottom:4.25rem; }
.home-hero__arrow--prev{ right:5.5rem; left:auto; }
.home-hero__arrow--next{ right:1.75rem; }
.home-hero__dots{ bottom:4.75rem; }
}
/* --- Short laptop screens (1366x768, 1280x800, 150% scaled displays):
the hero is only ~520-560px tall there, so shrink the copy block so
nothing collides with the dots/arrows or the booking widget. --- */
@media (min-width:768px) and (max-height:820px){
.home-hero__heading{ font-size:2.9rem; }
.home-hero__script{ font-size:1.45rem; }
.home-hero__subtext{ font-size:.92rem; margin-top:.7rem; }
.home-hero__copy{ margin-top:.75rem; }
.home-hero__ctas{ margin-top:1.15rem; }
.home-hero__grid{ padding-top:1.25rem; padding-bottom:5.75rem; }
}
@media (min-width:768px) and (max-height:700px){
.home-hero__heading{ font-size:2.45rem; }
.home-hero__script{ font-size:1.25rem; }
.home-hero__subtext{ font-size:.88rem; }
.home-hero__grid{ padding-top:1rem; padding-bottom:5.25rem; }
}
/* --- Ultra-wide (21:9 / 32:9): aspect-ratio would make the hero enormous,
max-height already caps it; just keep the copy readable. --- */
@media (min-width:1800px){
.home-hero__heading{ font-size:3.8rem; }
.home-hero__copy{ max-width:640px; }
}
/* ---- Mobile / narrow screens ----------------------------------------
Text sits directly ON the photo (one image, gradient scrim, copy
overlaid at the bottom) — same idea as desktop, just re-sized. Earlier
version split this into a photo strip + a separate black panel below
it, which read as two stacked sections; that's gone now. --hero-m-h
controls how tall the hero is; --hero-m-ar is the crop ratio (lower =
taller/more of the building, higher = shorter). */
@media (max-width:767.98px){
.home-hero{
--hero-m-ar: 1.22; /* higher = shorter/smaller hero photo */
--hero-m-h: calc(100vw / var(--hero-m-ar) / var(--hero-zoom));
}
.home-hero__img{
object-fit:cover;
object-position:center 30%; /* keep the building's facade in frame */
}
.home-hero__tint{
/* Text now sits vertically centered on the photo, so the whole frame
needs an even scrim (not just top/bottom) for it to stay readable
against busy facade detail. */
background:
linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.38) 35%, rgba(0,0,0,.42) 65%, rgba(0,0,0,.72) 100%),
radial-gradient(ellipse 90% 65% at 50% 50%, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 70%);
}
/* --- copy block: one centred column, overlaid on the photo, with
EQUAL breathing room top and bottom so it sits dead-center --- */
.home-hero__grid{
justify-content:center;
gap:0;
padding-top:1.75rem;
padding-bottom:1.75rem;
}
.home-hero__copy{
margin:0 auto;
max-width:26rem;
width:100%;
text-align:center;
}
.home-hero__eyebrow{
justify-content:center;
font-size:.68rem;
margin-bottom:.45rem;
}
.home-hero__heading{ font-size:1.65rem; }
.home-hero__script{ font-size:1.05rem; margin-top:.35rem; }
.home-hero__subtext{
margin:.6rem auto 0;
max-width:23rem;
font-size:.78rem;
line-height:1.5;
}
.home-hero__ctas{
justify-content:center;
gap:.6rem;
margin-top:1.1rem;
}
.home-hero__btn{
flex:1 1 0;
min-width:0;
max-width:10.5rem;
justify-content:center;
padding:.7rem .9rem;
font-size:.7rem;
}
.home-hero__dots{ bottom:1.1rem; }
}
/* Very short phones: trim further so the CTAs never crowd the dots. */
@media (max-width:420px) and (max-height:700px){
.home-hero{ --hero-m-ar: 0.95; }
.home-hero__heading{ font-size:1.5rem; }
.home-hero__subtext{ display:none; }
.home-hero__ctas{ margin-top:.9rem; }
}
/* --- Accessibility: no zoom/slide motion if the user asked for less. --- */
@media (prefers-reduced-motion:reduce){
.home-hero__slide.is-active .home-hero__img,
.home-hero__slide.is-active .home-hero__copy{
animation:none;
}
.home-hero__slide.is-active .home-hero__copy{
opacity:1;
transform:none;
}
.home-hero{ --hero-fade:300ms; }
}
/* ===== Feature strip ===== */
.home-eyebrow{
font-family:'Alex Brush',cursive;
color:#C9A227;
font-size:1.4rem;
}
.home-eyebrow--light{ color:#e4c468; }
.home-feature-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:2rem 1rem;
text-align:center;
}
.home-feature-item__icon{
width:56px;
height:56px;
border-radius:9999px;
border:1px solid rgba(201,162,39,.4);
display:flex;
align-items:center;
justify-content:center;
margin:0 auto .85rem;
color:#8a2a2a;
}
.home-feature-item__title{
font-family:Cinzel,serif;
font-size:.8rem;
letter-spacing:.02em;
color:#3b0a10;
}
.home-feature-item__desc{
font-size:.75rem;
color:rgba(74,46,34,.75);
margin-top:.35rem;
line-height:1.5;
}
@media (min-width:768px){
.home-feature-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:1.5rem; }
}
/* ===== Rooms carousel ===== */
.home-rooms-carousel-wrap{
position:relative;
display:flex;
align-items:center;
gap:.75rem;
}
.home-rooms-carousel{
flex:1;
display:flex;
gap:1.5rem;
overflow-x:auto;
scroll-snap-type:x mandatory;
scrollbar-width:none;
padding-bottom:.25rem;
}
.home-rooms-carousel::-webkit-scrollbar{ display:none; }
.home-room-card{
flex:0 0 260px;
scroll-snap-align:start;
}
@media (min-width:768px){
.home-room-card{ flex-basis:calc(33.333% - 1rem); }
}
.home-carousel-arrow{
flex-shrink:0;
width:38px;
height:38px;
border-radius:9999px;
border:1px solid rgba(201,162,39,.5);
color:#8a2a2a;
display:flex;
align-items:center;
justify-content:center;
background:#fff;
transition:background-color .2s ease,color .2s ease;
}
.home-carousel-arrow:hover{ background:#C9A227; color:#2b060b; }
/* ===== Amenities split panel ===== */
.home-amenities-split{
display:grid;
grid-template-columns:1fr;
}
.home-amenities-split__panel{
background:#3b0a10;
padding:2.5rem 1.75rem;
}
.home-amenities-split__grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:1.25rem 1rem;
margin:1.75rem 0 2rem;
}
.home-amenities-split__item{
display:flex;
align-items:center;
gap:.6rem;
color:rgba(246,237,220,.9);
font-size:.8rem;
}
.home-amenities-split__icon{
width:34px;
height:34px;
border-radius:9999px;
border:1px solid rgba(201,162,39,.4);
color:#e4c468;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.home-amenities-split__photo{
position:relative;
min-height:280px;
}
.home-amenities-split__photo img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}
.home-amenities-split__badge{
position:absolute;
bottom:1.5rem;
right:1.5rem;
background:rgba(59,10,16,.88);
border:1px solid rgba(201,162,39,.5);
color:#f6edda;
padding:.9rem 1.4rem;
border-radius:.5rem;
text-align:center;
}
.home-amenities-split__badge span{
display:block;
font-size:.65rem;
text-transform:uppercase;
letter-spacing:.1em;
color:#e4c468;
}
.home-amenities-split__badge strong{
display:block;
font-family:Cinzel,serif;
font-size:.9rem;
margin-top:.25rem;
}
@media (min-width:768px){
.home-amenities-split{ grid-template-columns:1fr 1fr; }
.home-amenities-split__panel{ padding:3.5rem; }
.home-amenities-split__photo{ min-height:100%; }
}
/* ===== Attractions ===== */
.home-attractions-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:1rem;
}
.home-attraction-tile{
background:#fbf5ea;
border:1px solid rgba(201,162,39,.3);
border-radius:.75rem;
padding:1.75rem 1rem;
text-align:center;
color:#8a2a2a;
}
.home-attraction-tile__name{
font-family:Cinzel,serif;
font-size:.78rem;
color:#3b0a10;
margin-top:.6rem;
}
.home-attraction-tile__distance{
font-size:.7rem;
color:rgba(74,46,34,.65);
margin-top:.2rem;
}
@media (min-width:768px){
.home-attractions-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem; }
}
/* ===== Back to top button =====
Fixed gold circular button, bottom-right, with a soft breathing glow so
it reads as an inviting call-to-action rather than a plain utility icon.
Hidden (and non-interactive) until the page has scrolled a bit. */
.back-to-top{
position:fixed;
right:1.25rem;
bottom:1.25rem;
z-index:40;
width:48px;
height:48px;
border-radius:9999px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(155deg,#e4c468 0%,#C9A227 55%,#a5811d 100%);
color:#3b0a10;
border:1px solid rgba(255,244,214,.7);
cursor:pointer;
box-shadow:
0 4px 14px rgba(43,6,11,.35),
0 0 0 0 rgba(201,162,39,.55);
opacity:0;
transform:translateY(14px) scale(.9);
pointer-events:none;
transition:opacity .35s ease, transform .35s ease, box-shadow .25s ease;
animation:backToTopGlow 2.6s ease-in-out infinite;
}
.back-to-top.is-visible{
opacity:1;
transform:translateY(0) scale(1);
pointer-events:auto;
}
.back-to-top:hover,
.back-to-top:focus-visible{
transform:translateY(-3px) scale(1.05);
box-shadow:
0 8px 22px rgba(43,6,11,.4),
0 0 22px 4px rgba(228,196,104,.65);
}
.back-to-top:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.back-to-top:active{ transform:translateY(-1px) scale(.97); }
/* Soft ring that pulses outward behind the button — the "light glow". */
.back-to-top__ring{
position:absolute;
inset:-6px;
border-radius:9999px;
border:1px solid rgba(228,196,104,.55);
opacity:0;
animation:backToTopRing 2.6s ease-out infinite;
pointer-events:none;
}
.back-to-top__arrow{
width:20px;
height:20px;
transition:transform .25s ease;
}
.back-to-top:hover .back-to-top__arrow,
.back-to-top:focus-visible .back-to-top__arrow{
transform:translateY(-2px);
}
@keyframes backToTopGlow{
0%, 100%{ box-shadow:0 4px 14px rgba(43,6,11,.35), 0 0 0 0 rgba(201,162,39,.5); }
50%{ box-shadow:0 4px 14px rgba(43,6,11,.35), 0 0 16px 3px rgba(228,196,104,.55); }
}
@keyframes backToTopRing{
0%{ transform:scale(.85); opacity:.55; }
100%{ transform:scale(1.35); opacity:0; }
}
@media (max-width:639.98px){
.back-to-top{ right:1rem; bottom:1rem; width:44px; height:44px; }
}
@media (prefers-reduced-motion:reduce){
.back-to-top{ animation:none; transition:opacity .2s ease; }
.back-to-top__ring{ animation:none; display:none; }
.back-to-top:hover, .back-to-top:focus-visible{ transform:none; }
}
/* ===== About / regal intro section =====
Uses the hand-supplied gold line-art set (arch frame, corner mandalas,
gazebo, divider) cropped from the reference sheet — not hand-drawn SVG.
The photo is clipped to the EXACT interior silhouette of the frame
artwork (traced from the PNG's own alpha channel, not eyeballed), so the
photo edge and the drawn border line up pixel-for-pixel at every size. */
.home-about{
position:relative;
overflow:hidden;
background-color:#fbf5ea;
/* same fine-grain noise film the body uses, so the seam between the
hero-overlap strip above and this section disappears completely */
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.49 0 0 0 0 0.36 0 0 0 0 0.16 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat:repeat;
background-size:180px 180px;
padding:2.75rem 0;
}
.home-about__mandala{
position:absolute;
width:180px;
height:auto;
opacity:.4;
pointer-events:none;
z-index:0;
}
.home-about__mandala--tr{ top:-1rem; right:-1rem; }
.home-about__art{
position:absolute;
left:0;
bottom:-2%;
width:300px;
max-width:34%;
height:auto;
opacity:.4;
pointer-events:none;
z-index:0;
transform:scaleX(-1); /* mirror so the gazebo faces into the section on the left */
}
@media (max-width:899.98px){
.home-about__art{ width:96px; opacity:.32; bottom:-1%; }
}
@media (min-width:480px) and (max-width:899.98px){
.home-about__mandala{ width:240px; }
.home-about__art{ width:150px; }
}
/* Row layout is the default at EVERY width now (phone included) — a
compact "one line" card: small arch frame on the left, text on the
right, matching the desktop composition just scaled down, rather than
stacking image-above-text on narrow screens. */
.home-about__inner{
position:relative;
z-index:1;
display:flex;
flex-direction:row;
align-items:flex-start;
gap:1rem;
max-width:900px;
margin:0 auto;
}
@media (max-width:899.98px){
.home-about__inner{ align-items:center; }
}
.home-about__media{
display:flex;
justify-content:center;
flex:0 0 auto;
width:auto;
}
/* Frame: the photo is masked with a raster mask generated directly
from about-arch-frame.png's own interior pixels (flood-filled), not
a hand-traced polygon — so the masked edge is pixel-exact against
the artwork's real curve, no approximation, no mismatch. */
.home-about__frame{
position:relative;
width:200px;
flex:0 0 auto;
aspect-ratio: 515 / 717;
}
@media (min-width:400px) and (max-width:479.98px){
.home-about__frame{ width:230px; }
}
@media (min-width:480px) and (max-width:899.98px){
.home-about__frame{ width:280px; }
}
.home-about__frame-mask{
position:absolute;
inset:0;
width:100%;
height:100%;
-webkit-mask-image: url("../img/about-arch-mask.png");
mask-image: url("../img/about-arch-mask.png");
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
overflow:hidden;
background:#f4ead6; /* thin parchment mat between photo and gold border */
}
.home-about__frame-img{
position:absolute;
inset:5%;
width:90%;
height:90%;
object-fit:cover;
object-position:center center;
}
/* Light inner-shadow — a soft vignette, sits inside the same mask as
the photo so it always stays within the arch outline. */
.home-about__frame-shadow{
position:absolute;
inset:0;
width:100%;
height:100%;
background:radial-gradient(ellipse at 50% 45%, rgba(59,10,16,0) 55%, rgba(59,10,16,.14) 88%, rgba(59,10,16,.22) 100%);
pointer-events:none;
}
.home-about__frame-art{
position:absolute;
inset:0;
width:100%;
height:100%;
pointer-events:none;
}
.home-about__content{
flex:1 1 auto;
min-width:0;
text-align:left;
}
.home-about__eyebrow{
font-family:Jost,sans-serif;
font-size:.5rem;
font-weight:600;
letter-spacing:.12em;
text-transform:uppercase;
color:#8a2a2a;
margin:0;
}
.home-about__heading{
font-family:Cinzel,serif;
font-weight:600;
color:#3b0a10;
font-size:.96rem;
line-height:1.22;
margin-top:.25rem;
}
.home-about__divider{
display:block;
width:64px;
height:auto;
margin:.4rem 0 0;
}
.home-about__text{
font-family:Jost,sans-serif;
font-weight:400;
margin-top:.35rem;
color:rgba(74,46,34,.85);
font-size:.64rem;
line-height:1.45;
max-width:none;
margin-left:0;
margin-right:0;
}
.home-about__text strong{
font-weight:600;
color:#8a1f26;
text-decoration-color:rgba(201,162,39,.75);
text-underline-offset:2px;
}
.home-about__cta{
margin-top:.55rem;
font-family:Jost,sans-serif;
font-size:.56rem;
padding:.36rem .7rem;
gap:.3rem;
}
.home-about__cta svg{ width:.7rem; height:.7rem; }
@media (min-width:400px) and (max-width:479.98px){
.home-about__eyebrow{ font-size:.54rem; letter-spacing:.14em; }
.home-about__heading{ font-size:1.1rem; }
.home-about__divider{ width:76px; }
.home-about__text{ font-size:.7rem; }
}
@media (min-width:480px) and (max-width:899.98px){
.home-about{ padding:3.25rem 0; }
.home-about__inner{ gap:1.75rem; }
.home-about__eyebrow{ font-size:.66rem; letter-spacing:.18em; }
.home-about__heading{ font-size:1.7rem; }
.home-about__divider{ width:130px; margin-top:.75rem; }
.home-about__text{ font-size:.92rem; margin-top:.75rem; }
.home-about__cta{ font-size:.7rem; padding:.55rem 1.05rem; margin-top:1rem; }
.home-about__cta svg{ width:.95rem; height:.95rem; }
}
@media (min-width:900px){
.home-about{ padding:5rem 0; }
.home-about__inner{
align-items:center;
gap:4.5rem;
max-width:1080px;
}
.home-about__frame{ width:380px; }
.home-about__content{
max-width:34rem;
}
.home-about__divider{ width:170px; margin:1.1rem 0 0; }
.home-about__text{ font-size:1rem; line-height:1.78; margin-top:1.15rem; }
.home-about__cta{ font-size:.78rem; padding:.62rem 1.3rem; margin-top:1.6rem; }
.home-about__cta svg{ width:1rem; height:1rem; }
.home-about__heading{ font-size:2.7rem; }
.home-about__mandala{ width:280px; }
}
@media (min-width:1100px){
.home-about__frame{ width:420px; }
.home-about__heading{ font-size:2.75rem; }
.home-about__inner{ gap:5.5rem; }
.home-about__mandala{ width:320px; }
.home-about__art{ width:360px; }
}
/* ============================================================
Home — Amenities section
Icons + corner flourish are raster art cropped from the
provided sprite sheet (assets/img/amenities-*.png), not SVG,
so they keep the hand-painted gold/maroon look as-is.
============================================================ */
.home-amenities{
position:relative;
overflow:hidden;
padding:2.75rem 0;
}
.home-amenities__inner{ position:relative; z-index:1; }
.home-amenities__head{
max-width:38rem;
margin:0 auto;
text-align:center;
}
.home-amenities__eyebrow{
display:flex;
align-items:center;
justify-content:center;
gap:.5rem;
margin:0;
font-family:Jost,sans-serif;
font-size:.62rem;
font-weight:600;
letter-spacing:.22em;
text-transform:uppercase;
color:#c9a227;
}
.home-amenities__eyebrow-line{
height:1px;
width:20px;
background-color:rgba(201,162,39,.7);
flex-shrink:0;
}
.home-amenities__heading{
margin-top:.6rem;
font-family:Cinzel,serif;
font-size:1.4rem;
line-height:1.25;
color:#3b0a10;
}
.home-amenities__subtext{
margin-top:.6rem;
font-family:Jost,sans-serif;
font-style:italic;
font-size:.72rem;
color:rgba(74,46,34,.8);
}
.home-amenities__row{
display:flex;
align-items:flex-start;
justify-content:center;
margin-top:1.75rem;
}
.home-amenities__item{
flex:1 1 0;
min-width:0;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
padding:0 .3rem;
}
.home-amenities__item + .home-amenities__item{
border-left:1px solid rgba(201,162,39,.32);
}
.home-amenities__icon{
width:34px;
height:auto;
flex-shrink:0;
}
.home-amenities__label{
margin-top:.35rem;
font-family:Jost,sans-serif;
font-size:.55rem;
line-height:1.35;
color:#2b1a13;
white-space:normal;
}
@media (min-width:400px) and (max-width:479.98px){
.home-amenities__icon{ width:40px; }
.home-amenities__label{ font-size:.6rem; }
.home-amenities__heading{ font-size:1.55rem; }
}
@media (min-width:480px) and (max-width:899.98px){
.home-amenities{ padding:3.25rem 0; }
.home-amenities__icon{ width:52px; }
.home-amenities__label{ font-size:.72rem; }
.home-amenities__item{ padding:0 .5rem; }
.home-amenities__heading{ font-size:1.9rem; }
.home-amenities__subtext{ font-size:.8rem; }
.home-amenities__eyebrow-line{ width:28px; }
.home-amenities__row{ margin-top:2.1rem; }
}
@media (min-width:900px){
.home-amenities{ padding:5rem 0; }
.home-amenities__head{ max-width:44rem; }
.home-amenities__eyebrow{ font-size:.75rem; letter-spacing:.28em; }
.home-amenities__eyebrow-line{ width:36px; }
.home-amenities__heading{ font-size:2.5rem; margin-top:.85rem; }
.home-amenities__subtext{ font-size:.95rem; margin-top:.85rem; }
.home-amenities__row{ margin-top:3rem; }
.home-amenities__item{ padding:0 1.5rem; }
.home-amenities__icon{ width:68px; }
.home-amenities__label{ font-size:.9rem; margin-top:.65rem; }
}
/* ==========================================================================
AMENITIES PAGE (amenities.php)
--------------------------------------------------------------------------
Written as self-contained BEM-ish classes (NOT Tailwind utilities), because
this stylesheet is a purged Tailwind build — any utility class that wasn't
used at build time simply doesn't exist here. Everything below is plain CSS
so the page renders identically without rebuilding Tailwind.
Colour tokens reused from the rest of the site:
maroon-950 #2b060b | maroon-900 #3b0a10 | maroon-800 #4a0f16
gold-500 #C9A227 | gold-400 #e4c468 | cream-50 #FBF5EA
cream-100 #F6EDDC | ink-900 #2B1A13 | ink-700 #4A2E22
========================================================================== */
/* ---------- Shared section scaffolding ---------- */
.amen-section{ position:relative; padding:3rem 0; overflow:hidden; }
.amen-section--tight{ padding:2rem 0 3rem; }
.amen-inner{ position:relative; z-index:1; max-width:1400px; margin:0 auto; padding:0 1.5rem; }
@media (min-width:768px){
.amen-section{ padding:4.5rem 0; }
.amen-inner{ padding:0 2.5rem; }
/* Re-assert the tight variant here too — same specificity as the rule
above, but later in source order, so it wins on desktop instead of
silently falling back to the full 4.5rem padding. That fallback was
the bug: it left a large blank gap between the hero and the intro
content (arch photo + mandala art) that was never intended. */
.amen-section--tight{ padding-top:2rem; padding-bottom:3.5rem; }
}
/* Alternating warm band so consecutive sections separate visually */
.amen-band{ background-color:#F7EEDC; border-top:1px solid rgba(201,162,39,.18); border-bottom:1px solid rgba(201,162,39,.18); }
/* ---------- Section headings ---------- */
.amen-eyebrow{
display:flex; align-items:center; justify-content:center; gap:.7rem;
font-family:'Jost',sans-serif; font-size:.62rem; font-weight:600;
letter-spacing:.22em; text-transform:uppercase; color:#C9A227; margin:0;
}
.amen-eyebrow::before,.amen-eyebrow::after{ content:""; width:34px; height:1px; background:rgba(201,162,39,.7); }
.amen-eyebrow--left{ justify-content:flex-start; }
.amen-eyebrow--left::before{ display:none; }
.amen-eyebrow--plain{ display:block; text-align:left; color:#8a2a2a; letter-spacing:.16em; }
.amen-eyebrow--plain::before,.amen-eyebrow--plain::after{ display:none; }
.amen-heading{
font-family:Cinzel,serif; font-weight:600; color:#3b0a10;
font-size:1.5rem; line-height:1.25; margin-top:.5rem; text-align:center;
}
.amen-heading--left{ text-align:left; }
.amen-heading em{ font-style:normal; color:#8a2a2a; }
.amen-subheading{
font-family:'Jost',sans-serif; font-size:.85rem; line-height:1.7;
color:rgba(74,46,34,.85); text-align:center; margin:.6rem auto 0; max-width:42rem;
}
.amen-subheading--left{ text-align:left; margin-left:0; }
.amen-divider{ margin:.7rem auto 0; display:flex; align-items:center; justify-content:center; gap:.4rem; width:6rem; }
.amen-divider--left{ margin-left:0; justify-content:flex-start; }
.amen-divider-line{ height:1px; flex:1 1 auto; background:rgba(201,162,39,.7); }
.amen-divider-dot{ width:5px; height:5px; border-radius:50%; background:#c9a227; flex-shrink:0; transform:rotate(45deg); }
.amen-head-block{ margin-bottom:2rem; }
@media (min-width:768px){
.amen-heading{ font-size:2.1rem; }
.amen-subheading{ font-size:.92rem; }
.amen-divider{ width:8rem; }
.amen-head-block{ margin-bottom:2.75rem; }
}
/* ---------- Image placeholder (swap for a real ![]()
later) ----------
Usage: Label
*/
.amen-ph{
position:relative; display:flex; flex-direction:column; align-items:center;
justify-content:center; gap:.5rem; width:100%; aspect-ratio:4/3;
background:
repeating-linear-gradient(45deg, rgba(201,162,39,.05) 0 10px, rgba(201,162,39,0) 10px 20px),
#F3E7CE;
border:1px dashed rgba(201,162,39,.65); border-radius:.75rem;
color:#8a2a2a; text-align:center; overflow:hidden;
}
.amen-ph__icon{ width:30px; height:30px; opacity:.55; }
.amen-ph__label{
font-family:'Jost',sans-serif; font-size:.62rem; font-weight:500;
letter-spacing:.14em; text-transform:uppercase; color:rgba(74,46,34,.7);
padding:0 .75rem;
}
.amen-ph--wide{ aspect-ratio:16/10; }
.amen-ph--tall{ aspect-ratio:3/4; }
.amen-ph--square{ aspect-ratio:1/1; }
.amen-ph--fill{ aspect-ratio:auto; height:100%; border-radius:0; }
/* ---------- 1. Intro: arch-framed visual + copy ---------- */
.amen-intro__grid{ display:flex; flex-direction:row; align-items:flex-start; gap:1.25rem; max-width:980px; margin:0 auto; }
.amen-intro__frame{ position:relative; flex:0 0 auto; width:200px; aspect-ratio:515/717; }
.amen-intro__frame-mask{
position:absolute; inset:0;
-webkit-mask-image:url("../img/about-arch-mask.png"); mask-image:url("../img/about-arch-mask.png");
-webkit-mask-size:100% 100%; mask-size:100% 100%;
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:center; mask-position:center;
overflow:hidden; background:#f4ead6;
}
/* The placeholder (or, later, the photo) sits inset inside the arch */
.amen-intro__frame-inner{ position:absolute; inset:5%; }
.amen-intro__frame-inner .amen-ph{ height:100%; aspect-ratio:auto; border-radius:0; border-style:dashed; }
.amen-intro__frame-art{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.amen-intro__copy{ flex:1 1 auto; min-width:0; }
@media (min-width:400px) and (max-width:479.98px){ .amen-intro__frame{ width:230px; } }
@media (min-width:480px){ .amen-intro__frame{ width:280px; } .amen-intro__grid{ gap:1.75rem; } }
@media (min-width:900px){
.amen-intro__grid{ align-items:center; gap:4rem; max-width:1080px; }
.amen-intro__frame{ width:380px; }
}
@media (min-width:1100px){ .amen-intro__frame{ width:420px; } }
/* Mandala corner art — one consistent pair (top-right + bottom-left,
same file and size scale as about.php's Our Story section) reused on
every .amen-section, instead of the old mix of floral/corner-flourish/
watermark art (all of which pointed at a non-existent assets/img/art/
folder and rendered as broken images) and the wave-chasing intro-only
mandala. Simple, uniform, and every image reference actually exists. */
.amen-section__mandala{
position:absolute;
width:180px;
height:auto;
opacity:.4;
pointer-events:none;
z-index:0;
}
.amen-section__mandala--tr{ top:-1rem; right:-1rem; }
.amen-section__mandala--bl{ bottom:-1rem; left:-1rem; transform:rotate(180deg); }
@media (min-width:480px) and (max-width:899.98px){
.amen-section__mandala{ width:240px; }
}
@media (min-width:900px){
.amen-section__mandala{ width:280px; }
}
@media (min-width:1100px){
.amen-section__mandala{ width:320px; }
}
/* ---------- 2. Facilities at a glance (icon tile grid) ---------- */
.amen-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
@media (min-width:560px){ .amen-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; } }
@media (min-width:900px){ .amen-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:1150px){
.amen-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); }
/* If the final row ends up with a single lone tile, centre it instead of
leaving it stranded on the left (the list is 26 items -> 5x5 + 1). */
.amen-tile:last-child:nth-child(5n+1){ grid-column:3; }
}
.amen-tile{
display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
text-align:center; gap:.5rem; padding:1.25rem .85rem;
background:rgba(251,245,234,.75); border:1px solid rgba(201,162,39,.32);
border-radius:.65rem; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease, background-color .25s ease;
}
.amen-tile:hover{
border-color:rgba(201,162,39,.75); background:#FDF8EE;
box-shadow:0 8px 20px rgba(59,10,16,.08); transform:translateY(-3px);
}
.amen-tile__icon{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; color:#8a2a2a; }
.amen-tile__icon svg{ width:100%; height:100%; }
.amen-tile__title{ font-family:Cinzel,serif; font-size:.74rem; line-height:1.3; color:#3b0a10; }
.amen-tile__desc{ font-family:'Jost',sans-serif; font-size:.66rem; line-height:1.5; color:rgba(74,46,34,.7); }
@media (min-width:768px){
.amen-tile{ padding:1.5rem 1rem; }
.amen-tile__icon{ width:38px; height:38px; }
.amen-tile__title{ font-size:.8rem; }
.amen-tile__desc{ font-size:.7rem; }
}
/* ---------- 3. Split feature (pool / events): media + copy ---------- */
.amen-split{ display:grid; grid-template-columns:1fr; gap:1.75rem; align-items:center; }
@media (min-width:900px){
.amen-split{ grid-template-columns:1.05fr .95fr; gap:3rem; }
.amen-split--reverse .amen-split__media{ order:2; }
}
.amen-split__media{ position:relative; }
.amen-split__media .amen-ph{ border-radius:.9rem; }
.amen-check-list{ margin-top:1.25rem; display:flex; flex-direction:column; gap:.6rem; }
.amen-check{ display:flex; align-items:center; gap:.65rem; font-family:'Jost',sans-serif; font-size:.82rem; color:rgba(74,46,34,.9); }
.amen-check__mark{
flex:0 0 auto; width:20px; height:20px; border-radius:9999px;
background:rgba(201,162,39,.16); border:1px solid rgba(201,162,39,.55);
color:#C9A227; display:flex; align-items:center; justify-content:center;
}
.amen-check__mark svg{ width:11px; height:11px; }
/* ---------- 4. Dining cards (photo + maroon caption panel) ---------- */
.amen-card-grid{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media (min-width:640px){ .amen-card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .amen-card-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; } }
.amen-card{
position:relative; border:1px solid rgba(201,162,39,.4); border-radius:.9rem;
overflow:hidden; background:#FBF5EA; display:flex; flex-direction:column;
transition:box-shadow .25s ease, transform .25s ease;
}
.amen-card:hover{ box-shadow:0 12px 26px rgba(59,10,16,.14); transform:translateY(-3px); }
.amen-card__media{ position:relative; }
.amen-card__media .amen-ph{ border-radius:0; border-width:0 0 1px 0; aspect-ratio:16/11; }
.amen-card__body{
display:flex; align-items:flex-start; gap:.85rem;
background:#4a0f16; color:#F6EDDC; padding:1.1rem 1.15rem;
}
.amen-card__icon{
flex:0 0 auto; width:38px; height:38px; border-radius:9999px;
border:1px solid rgba(228,196,104,.45); color:#e4c468;
display:flex; align-items:center; justify-content:center;
}
.amen-card__icon svg{ width:19px; height:19px; }
.amen-card__title{ font-family:Cinzel,serif; font-size:.9rem; color:#F6EDDC; }
.amen-card__text{ font-family:'Jost',sans-serif; font-size:.72rem; line-height:1.55; color:rgba(246,237,220,.8); margin-top:.3rem; }
/* ---------- 5. Mini feature chips (events / safety rows) ---------- */
.amen-mini-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin-top:1.4rem; }
@media (min-width:900px){ .amen-mini-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.amen-mini{
display:flex; flex-direction:column; align-items:center; text-align:center; gap:.4rem;
padding:.95rem .7rem; border:1px solid rgba(201,162,39,.3);
border-radius:.55rem; background:rgba(251,245,234,.7);
}
.amen-mini__icon{ width:26px; height:26px; color:#8a2a2a; }
.amen-mini__icon svg{ width:100%; height:100%; }
.amen-mini__title{ font-family:Cinzel,serif; font-size:.68rem; color:#3b0a10; line-height:1.3; }
.amen-mini__text{ font-family:'Jost',sans-serif; font-size:.62rem; color:rgba(74,46,34,.7); line-height:1.45; }
/* ---------- 6. Safety & convenience: horizontal rows ---------- */
.amen-row-grid{ display:grid; grid-template-columns:1fr; gap:.7rem; }
@media (min-width:640px){ .amen-row-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; } }
@media (min-width:1024px){ .amen-row-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.amen-row{
display:flex; align-items:center; gap:.75rem; padding:.85rem 1rem;
border:1px solid rgba(201,162,39,.3); border-radius:.55rem;
background:rgba(251,245,234,.7); transition:border-color .25s ease, background-color .25s ease;
}
.amen-row:hover{ border-color:rgba(201,162,39,.7); background:#FDF8EE; }
.amen-row__icon{
flex:0 0 auto; width:34px; height:34px; border-radius:.45rem;
border:1px solid rgba(201,162,39,.35); color:#8a2a2a;
display:flex; align-items:center; justify-content:center;
}
.amen-row__icon svg{ width:17px; height:17px; }
.amen-row__title{ font-family:Cinzel,serif; font-size:.72rem; color:#3b0a10; }
.amen-row__text{ font-family:'Jost',sans-serif; font-size:.64rem; color:rgba(74,46,34,.7); margin-top:.15rem; }
/* Last section sits directly above the footer's own CTA band */
.amen-section--last{ border-bottom:0; }
/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion:reduce){
.amen-tile,.amen-card{ transition:none; }
.amen-tile:hover,.amen-card:hover{ transform:none; }
}
/* ============================================================
Home — Rooms & Suites section
Photos reused as-is from rooms.php's own $room_types data
(same image per room name), so it always stays in sync with
the real rooms listing instead of duplicating separate art.
============================================================ */
.home-rooms{
position:relative;
padding:2.75rem 0;
}
.home-rooms__head{
text-align:center;
max-width:34rem;
margin:0 auto;
}
.home-rooms__script{
font-family:'Alex Brush',cursive;
color:#c9a227;
font-size:1.7rem;
line-height:1;
margin:0;
}
.home-rooms__heading{
margin-top:.2rem;
font-family:Cinzel,serif;
font-weight:700;
color:#3b0a10;
font-size:1.55rem;
letter-spacing:.02em;
}
.home-rooms__divider{
margin:.6rem auto 0;
display:flex;
align-items:center;
justify-content:center;
gap:.4rem;
width:6rem;
}
.home-rooms__divider-line{
height:1px;
flex:1 1 auto;
background:rgba(201,162,39,.7);
}
.home-rooms__divider-dot{
width:5px;
height:5px;
border-radius:50%;
background:#c9a227;
flex-shrink:0;
transform:rotate(45deg);
}
.home-rooms__grid{
margin-top:1.5rem;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:.55rem;
}
.home-rooms__card{
background:#fdf8ee;
border:1px solid rgba(201,162,39,.25);
border-radius:.5rem;
overflow:hidden;
box-shadow:0 6px 14px rgba(59,10,16,.06);
display:flex;
flex-direction:column;
}
.home-rooms__card-img{
aspect-ratio:4/3;
overflow:hidden;
}
.home-rooms__card-img img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.home-rooms__card-body{
padding:.45rem .4rem .55rem;
text-align:center;
}
.home-rooms__card-title{
font-family:Cinzel,serif;
font-weight:600;
color:#3b0a10;
font-size:.56rem;
letter-spacing:.01em;
text-transform:uppercase;
line-height:1.25;
}
.home-rooms__card-text{
margin-top:.25rem;
font-family:Jost,sans-serif;
font-size:.46rem;
line-height:1.35;
color:rgba(74,46,34,.85);
}
.home-rooms__card-link{
margin-top:.35rem;
display:inline-flex;
align-items:center;
gap:.25rem;
font-family:Jost,sans-serif;
font-size:.44rem;
font-weight:600;
letter-spacing:.05em;
text-transform:uppercase;
color:#3b0a10;
text-decoration:none;
transition:color .2s, gap .2s;
}
.home-rooms__card-link:hover{
color:#c9a227;
gap:.55rem;
}
@media (min-width:400px) and (max-width:479.98px){
.home-rooms{ padding:2.5rem 0; }
.home-rooms__heading{ font-size:1.6rem; }
.home-rooms__grid{ gap:.65rem; }
.home-rooms__card-body{ padding:.5rem .45rem .6rem; }
.home-rooms__card-title{ font-size:.6rem; }
.home-rooms__card-text{ font-size:.5rem; }
.home-rooms__card-link{ font-size:.46rem; }
}
@media (min-width:480px) and (max-width:899.98px){
.home-rooms{ padding:3.25rem 0; }
.home-rooms__script{ font-size:1.85rem; }
.home-rooms__heading{ font-size:1.9rem; }
.home-rooms__grid{ grid-template-columns:repeat(3,1fr); gap:.9rem; margin-top:2rem; }
.home-rooms__card-img{ aspect-ratio:4/3; }
.home-rooms__card-title{ font-size:.72rem; }
.home-rooms__card-text{ font-size:.62rem; line-height:1.4; }
.home-rooms__card-body{ padding:.75rem .65rem .9rem; }
.home-rooms__card-link{ font-size:.56rem; margin-top:.45rem; }
}
@media (min-width:900px){
.home-rooms{ padding:5rem 0; }
.home-rooms__head{ max-width:40rem; }
.home-rooms__script{ font-size:2.5rem; }
.home-rooms__heading{ font-size:2.75rem; margin-top:.3rem; }
.home-rooms__divider{ margin-top:1rem; width:8rem; }
.home-rooms__grid{ grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3rem; }
.home-rooms__card{ border-radius:1.1rem; }
.home-rooms__card-body{ padding:1.6rem 1.5rem 1.8rem; }
.home-rooms__card-title{ font-size:1.05rem; }
.home-rooms__card-text{ font-size:.85rem; margin-top:.65rem; }
.home-rooms__card-link{ font-size:.78rem; margin-top:1.1rem; }
.home-rooms__card:hover{ box-shadow:0 16px 34px rgba(59,10,16,.12); transform:translateY(-3px); transition:transform .25s, box-shadow .25s; }
}
/* ============================================================
Home — Around Attractions section
Real attraction photos, cropped from the provided collage.
Vertical padding matches home-about / home-rooms / home-amenities
exactly at every breakpoint, so spacing stays even down the page.
============================================================ */
.home-attractions{
position:relative;
padding:2.75rem 0;
}
.home-attractions__head{
text-align:center;
max-width:34rem;
margin:0 auto;
}
.home-attractions__script{
font-family:'Alex Brush',cursive;
color:#c9a227;
font-size:1.7rem;
line-height:1;
margin:0;
}
.home-attractions__heading{
margin-top:.2rem;
font-family:Cinzel,serif;
font-weight:700;
color:#3b0a10;
font-size:1.55rem;
letter-spacing:.02em;
}
.home-attractions__divider{
margin:.6rem auto 0;
display:flex;
align-items:center;
justify-content:center;
gap:.4rem;
width:6rem;
}
.home-attractions__divider-line{
height:1px;
flex:1 1 auto;
background:rgba(201,162,39,.7);
}
.home-attractions__divider-dot{
width:5px;
height:5px;
border-radius:50%;
background:#c9a227;
flex-shrink:0;
transform:rotate(45deg);
}
.home-attractions__grid{
margin-top:1.5rem;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:.55rem;
}
.home-attractions__card{ min-width:0; }
.home-attractions__img{
position:relative;
width:100%;
aspect-ratio:4/3;
border-radius:.5rem;
overflow:hidden;
border:1px solid rgba(201,162,39,.35);
}
.home-attractions__img img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .35s;
}
.home-attractions__name{
margin-top:.35rem;
font-family:Cinzel,serif;
font-weight:600;
color:#3b0a10;
font-size:.6rem;
letter-spacing:.02em;
text-transform:uppercase;
text-align:center;
}
.home-attractions__distance{
margin-top:.15rem;
font-family:Jost,sans-serif;
font-size:.56rem;
color:rgba(74,46,34,.75);
text-align:center;
}
.home-attractions__cta-wrap{
margin-top:1.6rem;
text-align:center;
}
.home-attractions__cta{
display:inline-flex;
align-items:center;
gap:.5rem;
background:#3b0a10;
color:#fdf8ee;
padding:.42rem .8rem;
border-radius:.4rem;
font-family:Jost,sans-serif;
font-size:.62rem;
font-weight:600;
letter-spacing:.08em;
text-transform:uppercase;
text-decoration:none;
transition:background-color .2s, gap .2s;
}
.home-attractions__cta:hover{
background:#4a0f16;
gap:.7rem;
}
@media (min-width:400px) and (max-width:479.98px){
.home-attractions__heading{ font-size:1.7rem; }
.home-attractions__name{ font-size:.64rem; }
.home-attractions__distance{ font-size:.58rem; }
.home-attractions__cta{ font-size:.66rem; padding:.48rem .9rem; }
}
@media (min-width:480px) and (max-width:899.98px){
.home-attractions{ padding:3.25rem 0; }
.home-attractions__script{ font-size:2rem; }
.home-attractions__heading{ font-size:2rem; }
.home-attractions__grid{ grid-template-columns:repeat(4,1fr); gap:.8rem; margin-top:2.25rem; }
.home-attractions__img{ border-radius:.65rem; }
.home-attractions__name{ font-size:.68rem; }
.home-attractions__distance{ font-size:.62rem; }
.home-attractions__cta{ font-size:.7rem; padding:.55rem 1.05rem; }
.home-attractions__cta-wrap{ margin-top:2rem; }
}
@media (min-width:900px){
.home-attractions{ padding:5rem 0; }
.home-attractions__head{ max-width:40rem; }
.home-attractions__script{ font-size:2.5rem; }
.home-attractions__heading{ font-size:2.75rem; margin-top:.3rem; }
.home-attractions__divider{ margin-top:1rem; width:8rem; }
.home-attractions__grid{ grid-template-columns:repeat(6,1fr); gap:1.4rem; margin-top:3rem; max-width:1320px; margin-left:auto; margin-right:auto; }
.home-attractions__img{ border-radius:.85rem; }
.home-attractions__name{ font-size:.85rem; margin-top:.65rem; }
.home-attractions__distance{ font-size:.75rem; }
.home-attractions__cta-wrap{ margin-top:2.75rem; }
.home-attractions__cta{ font-size:.78rem; padding:.62rem 1.3rem; }
.home-attractions__card:hover .home-attractions__img{ border-color:rgba(201,162,39,.95); }
.home-attractions__card:hover .home-attractions__img img{ transform:scale(1.06); }
}
/* ============================================================
Home — Guest Testimonials section
Mobile/tablet: a single-card swipeable track (JS translateX).
Desktop (900px+): the same 3 slides laid out as a static
grid — transform is overridden and the arrows/dots hidden,
since there's nothing left to page through once all 3 show
at once.
============================================================ */
.home-testimonials{
position:relative;
padding:2.75rem 0;
overflow:hidden;
}
.home-testimonials__head{
text-align:center;
max-width:34rem;
margin:0 auto;
}
.home-testimonials__script{
font-family:'Alex Brush',cursive;
color:#c9a227;
font-size:1.7rem;
line-height:1;
margin:0;
}
.home-testimonials__heading{
margin-top:.2rem;
font-family:Cinzel,serif;
font-weight:700;
color:#3b0a10;
font-size:1.5rem;
letter-spacing:.02em;
}
.home-testimonials__divider{
margin:.6rem auto 0;
display:flex;
align-items:center;
justify-content:center;
gap:.4rem;
width:6rem;
}
.home-testimonials__divider-line{
height:1px;
flex:1 1 auto;
background:rgba(201,162,39,.7);
}
.home-testimonials__divider-dot{
width:5px;
height:5px;
border-radius:50%;
background:#c9a227;
flex-shrink:0;
transform:rotate(45deg);
}
.home-testimonials__carousel{
margin-top:1.5rem;
display:flex;
align-items:center;
gap:.5rem;
}
.home-testimonials__arrow{ display:none; }
.home-testimonials__arrow svg{ width:1rem; height:1rem; }
.home-testimonials__arrow:hover{ background:#c9a227; border-color:#c9a227; color:#fff; }
.home-testimonials__track-wrap{
flex:1 1 auto;
min-width:0;
}
.home-testimonials__track{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:.5rem;
}
.home-testimonials__slide{
min-width:0;
padding:0;
}
.home-testimonials__card{
position:relative;
background:#fdf8ee;
border:1px solid rgba(201,162,39,.3);
border-radius:.55rem;
padding:.6rem .55rem .65rem;
height:100%;
}
.home-testimonials__quote-mark{
display:block;
font-family:Georgia,serif;
font-size:1.3rem;
line-height:1;
color:#c9a227;
opacity:.7;
}
.home-testimonials__quote{
margin-top:.2rem;
font-family:Jost,sans-serif;
font-size:.52rem;
line-height:1.4;
color:rgba(43,26,19,.9);
min-height:0;
}
.home-testimonials__stars{
margin-top:.35rem;
color:#c9a227;
font-size:.5rem;
letter-spacing:.1em;
}
.home-testimonials__person{
margin-top:.5rem;
display:flex;
align-items:center;
gap:.35rem;
}
.home-testimonials__avatar{
flex-shrink:0;
width:1.5rem;
height:1.5rem;
border-radius:50%;
background:#3b0a10;
color:#e4c468;
font-family:Cinzel,serif;
font-size:.44rem;
font-weight:600;
display:flex;
align-items:center;
justify-content:center;
}
.home-testimonials__person-text{ display:flex; flex-direction:column; min-width:0; }
.home-testimonials__name{
font-family:Cinzel,serif;
font-weight:600;
font-size:.46rem;
color:#3b0a10;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.home-testimonials__location{
margin-top:.05rem;
font-family:Jost,sans-serif;
font-size:.42rem;
color:rgba(74,46,34,.7);
}
.home-testimonials__dots{ display:none; }
.home-testimonials__dot{
width:6px;
height:6px;
border-radius:50%;
background:rgba(201,162,39,.35);
border:none;
padding:0;
cursor:pointer;
transition:background-color .2s, transform .2s;
}
.home-testimonials__dot.is-active{
background:#c9a227;
transform:scale(1.3);
}
@media (min-width:400px) and (max-width:479.98px){
.home-testimonials__heading{ font-size:1.65rem; }
.home-testimonials__card{ padding:.7rem .65rem .75rem; }
.home-testimonials__quote{ font-size:.56rem; }
.home-testimonials__quote-mark{ font-size:1.5rem; }
.home-testimonials__avatar{ width:1.7rem; height:1.7rem; font-size:.48rem; }
.home-testimonials__name{ font-size:.5rem; }
.home-testimonials__location{ font-size:.45rem; }
}
@media (min-width:480px) and (max-width:899.98px){
.home-testimonials{ padding:3.25rem 0; }
.home-testimonials__script{ font-size:2rem; }
.home-testimonials__heading{ font-size:1.95rem; }
.home-testimonials__track{ gap:.8rem; }
.home-testimonials__card{ padding:1rem .9rem 1.05rem; }
.home-testimonials__quote-mark{ font-size:1.8rem; }
.home-testimonials__quote{ font-size:.66rem; }
.home-testimonials__stars{ font-size:.62rem; }
.home-testimonials__avatar{ width:2rem; height:2rem; font-size:.56rem; }
.home-testimonials__name{ font-size:.6rem; }
.home-testimonials__location{ font-size:.54rem; }
}
@media (min-width:900px){
.home-testimonials{ padding:5rem 0; }
.home-testimonials__head{ max-width:40rem; }
.home-testimonials__script{ font-size:2.5rem; }
.home-testimonials__heading{ font-size:2.6rem; margin-top:.3rem; }
.home-testimonials__divider{ margin-top:1rem; width:8rem; }
.home-testimonials__carousel{ margin-top:3rem; gap:1.25rem; }
.home-testimonials__arrow{ display:none; }
.home-testimonials__dots{ display:none; }
.home-testimonials__track{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1.75rem;
transform:none !important;
}
.home-testimonials__slide{ flex:none; padding:0; }
.home-testimonials__card{ padding:2rem 1.75rem 1.6rem; }
.home-testimonials__quote{ font-size:.88rem; }
.home-testimonials__name{ font-size:.8rem; }
.home-testimonials__location{ font-size:.7rem; }
}
/* ============================================================
Unified button size — header "Book Now" (desktop + mobile menu)
uses the shared Tailwind .btn-primary class with no size classes
of its own, so it's resized here to match the same scale as the
home page's own CTA buttons (.home-about__cta, .home-attractions__cta)
at every breakpoint — one consistent button size site-wide.
============================================================ */
.btn-primary{
font-size:.62rem;
padding:.42rem .8rem;
}
@media (min-width:400px) and (max-width:479.98px){
.btn-primary{ font-size:.66rem; padding:.48rem .9rem; }
}
@media (min-width:480px) and (max-width:899.98px){
.btn-primary{ font-size:.7rem; padding:.55rem 1.05rem; }
}
@media (min-width:900px){
.btn-primary{ font-size:.78rem; padding:.62rem 1.3rem; }
}
/* ============================================================
About page — "Our Story" section
Same arch-mask technique as home-about (pixel-exact mask
generated from about-arch-frame.png's own interior), plus a
second "polaroid" photo overlapping it, and the mandala corner
art reused from the same file already used on the homepage
About section and the CTA banner.
============================================================ */
.about-story{
position:relative;
overflow:hidden;
background-color:#fbf5ea;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.49 0 0 0 0 0.36 0 0 0 0 0.16 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat:repeat;
background-size:180px 180px;
padding:2.75rem 0;
}
.about-story__mandala{
position:absolute;
width:180px;
height:auto;
opacity:.4;
pointer-events:none;
z-index:0;
}
.about-story__mandala--tr{ top:-1rem; right:-1rem; }
.about-story__mandala--bl{ bottom:-1rem; left:-1rem; transform:rotate(180deg); }
.about-story__inner{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
align-items:center;
gap:2rem;
}
.about-story__visual{
position:relative;
flex:0 0 auto;
}
.about-story__frame{
position:relative;
width:200px;
aspect-ratio:515/717;
}
.about-story__frame-mask{
position:absolute;
inset:0;
width:100%;
height:100%;
-webkit-mask-image: url("../img/about-arch-mask.png");
mask-image: url("../img/about-arch-mask.png");
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
overflow:hidden;
background:#f4ead6;
}
.about-story__ph{
position:absolute;
inset:5%;
width:90%;
height:90%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:.4rem;
background:
repeating-linear-gradient(45deg, rgba(201,162,39,.06) 0 10px, rgba(201,162,39,0) 10px 20px),
#efe1c4;
color:rgba(74,46,34,.7);
text-align:center;
font-family:'Jost',sans-serif;
font-size:.56rem;
font-weight:500;
letter-spacing:.06em;
text-transform:uppercase;
}
.about-story__ph-icon{ width:22px; height:22px; opacity:.55; }
.about-story__frame-shadow{
position:absolute;
inset:0;
width:100%;
height:100%;
background:radial-gradient(ellipse at 50% 45%, rgba(59,10,16,0) 55%, rgba(59,10,16,.14) 88%, rgba(59,10,16,.22) 100%);
pointer-events:none;
}
.about-story__frame-art{
position:absolute;
inset:0;
width:100%;
height:100%;
pointer-events:none;
}
.about-story__polaroid{
position:absolute;
right:-1.75rem;
bottom:-1.5rem;
width:44%;
aspect-ratio:1/1;
background:#fff;
padding:.35rem .35rem 1rem;
border-radius:.2rem;
box-shadow:0 10px 24px rgba(59,10,16,.22);
transform:rotate(-6deg);
}
.about-story__polaroid-ph{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
background:
repeating-linear-gradient(45deg, rgba(201,162,39,.06) 0 8px, rgba(201,162,39,0) 8px 16px),
#efe1c4;
color:rgba(74,46,34,.55);
}
.about-story__polaroid-ph .about-story__ph-icon{ width:18px; height:18px; }
.about-story__copy{
flex:1 1 auto;
min-width:0;
text-align:center;
}
.about-story__eyebrow{
display:flex;
align-items:center;
justify-content:center;
gap:.45rem;
margin:0;
font-family:Jost,sans-serif;
font-size:.62rem;
font-weight:600;
letter-spacing:.2em;
text-transform:uppercase;
color:#c9a227;
}
.about-story__eyebrow-line{
height:1px;
width:18px;
background-color:rgba(201,162,39,.7);
flex-shrink:0;
}
.about-story__heading{
margin-top:.5rem;
font-family:Cinzel,serif;
font-weight:600;
color:#3b0a10;
font-size:1.3rem;
line-height:1.3;
}
.about-story__text{
margin-top:.85rem;
font-family:Jost,sans-serif;
font-weight:400;
color:rgba(74,46,34,.85);
font-size:.78rem;
line-height:1.65;
text-align:left;
}
.about-story__text + .about-story__text{ margin-top:.75rem; }
.about-story__text strong{
font-weight:600;
color:#8a1f26;
text-decoration-color:rgba(201,162,39,.75);
text-underline-offset:2px;
}
.about-story__tagline{
margin-top:1.1rem;
font-family:'Alex Brush',cursive;
color:#8a1f26;
font-size:1.15rem;
line-height:1.4;
text-align:left;
}
@media (min-width:400px) and (max-width:479.98px){
.about-story__frame{ width:230px; }
.about-story__heading{ font-size:1.45rem; }
.about-story__text{ font-size:.82rem; }
.about-story__tagline{ font-size:1.3rem; }
}
@media (min-width:480px) and (max-width:899.98px){
.about-story{ padding:3.25rem 0; }
.about-story__frame{ width:280px; }
.about-story__eyebrow{ font-size:.68rem; letter-spacing:.22em; }
.about-story__heading{ font-size:1.85rem; }
.about-story__text{ font-size:.9rem; margin-top:1rem; }
.about-story__tagline{ font-size:1.5rem; margin-top:1.3rem; }
.about-story__mandala{ width:240px; }
}
@media (min-width:900px){
.about-story{ padding:5.5rem 0; }
.about-story__inner{
flex-direction:row;
align-items:center;
gap:4.5rem;
max-width:1200px;
}
.about-story__visual{ width:380px; flex-shrink:0; }
.about-story__frame{ width:380px; }
.about-story__polaroid{ right:-2.25rem; bottom:-2rem; }
.about-story__copy{ text-align:left; }
.about-story__eyebrow{ justify-content:flex-start; font-size:.72rem; letter-spacing:.24em; }
.about-story__eyebrow-line{ width:32px; }
.about-story__heading{ font-size:2.4rem; margin-top:.6rem; }
.about-story__text{ font-size:.95rem; line-height:1.75; margin-top:1.15rem; }
.about-story__tagline{ font-size:1.6rem; margin-top:1.5rem; }
.about-story__mandala{ width:280px; }
}
@media (min-width:1100px){
.about-story__visual{ width:420px; }
.about-story__frame{ width:420px; }
.about-story__heading{ font-size:2.7rem; }
.about-story__inner{ gap:5.5rem; }
.about-story__mandala{ width:320px; }
}
/* ============================================================
About page — "Why Choose Us" section
Icons are inline SVG via room_icon() (shared dictionary in
config.php), not raster art, so nothing here can ever break
like the old assets/img/art/ references did on amenities.php.
============================================================ */
.about-why{
position:relative;
padding:2.75rem 0;
}
.about-why__grid{
display:flex;
flex-direction:column;
gap:1.75rem;
}
.about-why__eyebrow{
display:flex;
align-items:center;
gap:.45rem;
margin:0;
font-family:Jost,sans-serif;
font-size:.56rem;
font-weight:600;
letter-spacing:.14em;
text-transform:uppercase;
color:#c9a227;
}
.about-why__eyebrow-line{
height:1px;
width:18px;
background-color:rgba(201,162,39,.7);
flex-shrink:0;
}
.about-why__heading{
margin-top:.4rem;
font-family:Cinzel,serif;
font-weight:700;
color:#3b0a10;
font-size:1.35rem;
line-height:1.28;
}
.about-why__text{
margin-top:.6rem;
font-family:Jost,sans-serif;
font-size:.74rem;
line-height:1.6;
color:rgba(74,46,34,.85);
max-width:32rem;
}
.about-why__cards{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:.6rem;
}
.about-why__card{
background:#fdf8ee;
border:1px solid rgba(201,162,39,.28);
border-radius:.6rem;
padding:.85rem .6rem;
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
}
.about-why__icon{
width:22px;
height:22px;
color:#8a1f26;
}
.about-why__card-title{
margin-top:.45rem;
font-family:Cinzel,serif;
font-weight:600;
font-size:.66rem;
color:#3b0a10;
line-height:1.3;
}
.about-why__card-sub{
margin-top:.2rem;
font-family:Jost,sans-serif;
font-size:.56rem;
color:rgba(74,46,34,.7);
line-height:1.35;
}
@media (min-width:400px) and (max-width:479.98px){
.about-why__heading{ font-size:1.5rem; }
.about-why__text{ font-size:.8rem; }
.about-why__icon{ width:24px; height:24px; }
.about-why__card-title{ font-size:.72rem; }
.about-why__card-sub{ font-size:.6rem; }
}
@media (min-width:480px) and (max-width:899.98px){
.about-why{ padding:3.25rem 0; }
.about-why__eyebrow{ font-size:.66rem; letter-spacing:.18em; }
.about-why__heading{ font-size:1.9rem; }
.about-why__text{ font-size:.9rem; margin-top:.8rem; }
.about-why__cards{ gap:.9rem; }
.about-why__card{ padding:1.1rem .8rem; }
.about-why__icon{ width:28px; height:28px; }
.about-why__card-title{ font-size:.8rem; margin-top:.55rem; }
.about-why__card-sub{ font-size:.68rem; }
}
@media (min-width:900px){
.about-why{ padding:5rem 0; }
.about-why__grid{
flex-direction:row;
align-items:center;
gap:4rem;
max-width:1200px;
margin:0 auto;
}
.about-why__copy{ flex:0 0 auto; width:30%; }
.about-why__eyebrow{ font-size:.72rem; letter-spacing:.2em; }
.about-why__heading{ font-size:2.2rem; margin-top:.6rem; }
.about-why__text{ font-size:.9rem; margin-top:.9rem; }
.about-why__cards{
flex:1 1 auto;
grid-template-columns:repeat(3,1fr);
gap:1.25rem;
}
.about-why__card{ padding:1.5rem 1.1rem; border-radius:.75rem; transition:box-shadow .25s, transform .25s; }
.about-why__card:hover{ box-shadow:0 12px 26px rgba(59,10,16,.1); transform:translateY(-3px); }
.about-why__icon{ width:32px; height:32px; }
.about-why__card-title{ font-size:.85rem; margin-top:.65rem; }
.about-why__card-sub{ font-size:.72rem; margin-top:.3rem; }
}
/* ============================================================
About page — "Perfect for Every Traveller" section
Photo placeholder with a simple CSS-only corner accent (no
image asset), list icons are inline SVG via room_icon() —
nothing here can ever 404.
============================================================ */
.about-traveller{
position:relative;
padding:2.75rem 0;
}
.about-traveller__grid{
display:flex;
flex-direction:column;
gap:2rem;
}
.about-traveller__visual{
position:relative;
}
.about-traveller__ph{
position:relative;
z-index:1;
aspect-ratio:4/3;
border-radius:1.1rem;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:.5rem;
background:#efe1c4;
color:rgba(74,46,34,.7);
text-align:center;
font-family:'Jost',sans-serif;
font-size:.62rem;
font-weight:500;
letter-spacing:.06em;
text-transform:uppercase;
}
.about-traveller__ph-icon{ width:26px; height:26px; opacity:.55; }
.about-traveller__eyebrow{
display:flex;
align-items:center;
gap:.45rem;
margin:0;
font-family:Jost,sans-serif;
font-size:.56rem;
font-weight:600;
letter-spacing:.1em;
text-transform:uppercase;
color:#c9a227;
}
.about-traveller__eyebrow-line{
height:1px;
width:18px;
background-color:rgba(201,162,39,.7);
flex-shrink:0;
}
.about-traveller__heading{
margin-top:.4rem;
font-family:Cinzel,serif;
font-weight:700;
color:#3b0a10;
font-size:1.35rem;
line-height:1.28;
}
.about-traveller__text{
margin-top:.6rem;
font-family:Jost,sans-serif;
font-size:.74rem;
line-height:1.6;
color:rgba(74,46,34,.85);
}
.about-traveller__list{
margin-top:1.4rem;
display:flex;
flex-direction:column;
gap:1.1rem;
}
.about-traveller__item{
display:flex;
align-items:flex-start;
gap:.7rem;
}
.about-traveller__icon{
flex-shrink:0;
width:20px;
height:20px;
color:#8a1f26;
margin-top:.15rem;
}
.about-traveller__item-title{
font-family:Cinzel,serif;
font-weight:600;
font-size:.78rem;
color:#3b0a10;
}
.about-traveller__item-text{
margin-top:.25rem;
font-family:Jost,sans-serif;
font-size:.66rem;
line-height:1.55;
color:rgba(74,46,34,.8);
}
@media (min-width:400px) and (max-width:479.98px){
.about-traveller__heading{ font-size:1.5rem; }
.about-traveller__text{ font-size:.8rem; }
.about-traveller__item-title{ font-size:.84rem; }
.about-traveller__item-text{ font-size:.72rem; }
}
@media (min-width:480px) and (max-width:899.98px){
.about-traveller{ padding:3.25rem 0; }
.about-traveller__eyebrow{ font-size:.66rem; letter-spacing:.14em; }
.about-traveller__heading{ font-size:1.9rem; }
.about-traveller__text{ font-size:.9rem; margin-top:.8rem; }
.about-traveller__list{ margin-top:1.75rem; gap:1.3rem; }
.about-traveller__icon{ width:24px; height:24px; }
.about-traveller__item-title{ font-size:.92rem; }
.about-traveller__item-text{ font-size:.78rem; }
}
@media (min-width:900px){
.about-traveller{ padding:5rem 0; }
.about-traveller__grid{
flex-direction:row;
align-items:stretch;
gap:4.5rem;
max-width:1200px;
margin:0 auto;
}
.about-traveller__visual{ flex:0 0 auto; width:44%; }
.about-traveller__ph{ height:100%; aspect-ratio:auto; }
.about-traveller__copy{ flex:1 1 auto; min-width:0; }
.about-traveller__eyebrow{ font-size:.7rem; letter-spacing:.16em; }
.about-traveller__heading{ font-size:2.2rem; margin-top:.6rem; }
.about-traveller__text{ font-size:.92rem; margin-top:.9rem; }
.about-traveller__list{ margin-top:1.75rem; gap:1.4rem; }
.about-traveller__icon{ width:26px; height:26px; }
.about-traveller__item-title{ font-size:.9rem; }
.about-traveller__item-text{ font-size:.78rem; }
}
/* ============================================================
Shared corner mandala — same asset/size scale as home-about,
amen-section and about-story's mandala corners (180/240/280/320),
generalized here so any other page's first section can reuse it
without duplicating the block again.
============================================================ */
.mandala-corner{
position:absolute;
width:180px;
height:auto;
opacity:.4;
pointer-events:none;
z-index:0;
}
.mandala-corner--tr{ top:-1rem; right:-1rem; }
.mandala-corner--bl{ bottom:-1rem; left:-1rem; transform:rotate(180deg); }
@media (min-width:480px) and (max-width:899.98px){
.mandala-corner{ width:240px; }
}
@media (min-width:900px){
.mandala-corner{ width:280px; }
}
@media (min-width:1100px){
.mandala-corner{ width:320px; }
}
/* ============================================================
Dining page — "Our Restaurant" intro section (dining.php).
Three-column layout on desktop: framed photo | copy + pull-quote |
vertical feature list. Stacks to a single column on mobile.
============================================================ */
.dine-intro{ position:relative; padding:3rem 0; background:#FBF5EA; overflow:hidden; }
/* ---------- Layout grid ---------- */
.dine-intro__grid{
display:grid;
grid-template-columns:1fr;
gap:2.5rem;
}
/* ---------- Photo: pure-CSS corner-bracket frame, no extra image
asset needed — two opposite L-shaped gold brackets offset outside
a cream placeholder block, exactly like the reference. ---------- */
.dine-intro__photo{
position:relative;
margin:14px 14px 22px 0;
height:100%;
}
.dine-intro__photo::before,
.dine-intro__photo::after{
content:"";
position:absolute;
width:56px;
height:56px;
pointer-events:none;
}
.dine-intro__photo::before{
top:-14px; left:-14px;
border-top:1.5px solid #C9A227;
border-left:1.5px solid #C9A227;
}
.dine-intro__photo::after{
bottom:-14px; right:-14px;
border-bottom:1.5px solid #C9A227;
border-right:1.5px solid #C9A227;
}
.dine-intro__ph{
position:relative;
width:100%;
height:100%;
min-height:280px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:.6rem;
background:
repeating-linear-gradient(45deg, rgba(201,162,39,.06) 0 10px, rgba(201,162,39,0) 10px 20px),
#F3E7CE;
border:1px solid rgba(201,162,39,.4);
color:#8a2a2a;
text-align:center;
}
.dine-intro__ph-icon{ width:34px; height:34px; opacity:.55; }
.dine-intro__ph span{
font-family:'Jost',sans-serif; font-size:.68rem; font-weight:500;
letter-spacing:.14em; text-transform:uppercase; color:rgba(74,46,34,.7);
}
.dine-intro__ph-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* ---------- Eyebrow: arrow-line on the left, short dash on the right
— distinct from the symmetric "— TEXT —" eyebrow used elsewhere,
matching this page's own reference exactly. ---------- */
.dine-eyebrow{
display:flex; align-items:center; gap:.6rem;
font-family:'Jost',sans-serif; font-size:.68rem; font-weight:600;
letter-spacing:.18em; text-transform:uppercase; color:#C9A227;
}
.dine-eyebrow__arrow{ width:26px; height:11px; flex:0 0 auto; }
.dine-eyebrow__line{ width:28px; height:1px; background:rgba(201,162,39,.7); flex:0 0 auto; }
.dine-intro__heading{
font-family:Cinzel,serif; font-weight:600; color:#8a2a2a;
font-size:1.65rem; line-height:1.28; margin-top:.6rem;
}
.dine-intro__text{
font-family:'Jost',sans-serif; font-size:.9rem; line-height:1.8;
color:rgba(74,46,34,.85); margin-top:1.1rem;
}
/* ---------- Pull-quote box ---------- */
.dine-quote{
position:relative;
margin-top:1.15rem;
padding:.95rem 1.1rem .9rem 2.1rem;
background:#F3EBDD;
border-radius:.35rem;
}
.dine-quote__mark{
position:absolute; top:.3rem; left:.55rem;
font-family:Georgia,'Times New Roman',serif;
font-size:1.9rem; line-height:1; color:#D9A87A; opacity:.85;
pointer-events:none;
}
.dine-quote__text{
font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:700;
font-size:.85rem; line-height:1.45; color:#8a2a2a;
}
.dine-quote__mark-sm{ font-size:.8em; opacity:.6; font-style:normal; }
.dine-quote__cite{
display:block; margin-top:.5rem;
font-family:'Jost',sans-serif; font-style:normal; font-size:.62rem;
font-weight:600; letter-spacing:.12em; text-transform:uppercase;
color:rgba(74,46,34,.65);
}
/* ---------- Feature list ---------- */
.dine-features{
display:flex; flex-direction:column;
border-top:1px solid rgba(201,162,39,.28);
}
.dine-features__item{
display:flex; align-items:center; gap:1rem;
padding:1.15rem 0;
border-bottom:1px solid rgba(201,162,39,.28);
}
/* Circular icon badge — same hover treatment (lift + deepen) as the
"Flavors for Every Mood" badges below, so both sections feel like
one consistent system. */
.dine-features__icon-wrap{
display:flex; align-items:center; justify-content:center;
flex:0 0 auto; width:56px; height:56px;
border-radius:50%;
border:1px solid rgba(201,162,39,.45);
background:#FBF5EA;
transition:border-color .25s ease, transform .25s ease, background-color .25s ease;
}
.dine-features__item:hover .dine-features__icon-wrap{
border-color:#C9A227;
background:#F3E7CE;
transform:translateY(-3px);
}
.dine-features__icon{
flex:0 0 auto; width:28px; height:28px;
display:block; object-fit:contain;
}
.dine-features__title{
font-family:'Jost',sans-serif; font-weight:600; font-size:.85rem;
color:#2B1A13;
}
.dine-features__text{
font-family:'Jost',sans-serif; font-size:.76rem; line-height:1.5;
color:rgba(74,46,34,.65); margin-top:.2rem;
}
/* ================= Responsive ================= */
@media (min-width:640px){
.dine-intro{ padding:3.5rem 0; }
.dine-intro__heading{ font-size:1.9rem; }
.dine-intro__ph{ min-height:360px; }
}
@media (min-width:1024px){
.dine-intro{ padding:4.5rem 0; }
.dine-intro__grid{
/* Photo trimmed down a step, feature list given the extra room so
its now-circular icons have proper breathing space. */
grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) minmax(0,.8fr);
gap:3rem;
/* stretch (not start): the photo column is sized to match the
tallest column instead of a guessed fixed height, so it always
lines up evenly with the copy column's bottom edge — whatever
that column's actual content height turns out to be. */
align-items:stretch;
}
.dine-intro__photo{ margin:16px 0 0 0; }
.dine-intro__ph{ min-height:0; }
.dine-intro__heading{ font-size:2.1rem; }
.dine-intro__text{ font-size:.92rem; }
/* Vertical divider between copy and the feature list, echoing the
reference's right-hand rule line. */
.dine-features{
border-top:0;
padding-left:2.25rem;
border-left:1px solid rgba(201,162,39,.28);
}
.dine-features__item:last-child{ border-bottom:0; padding-bottom:0; }
.dine-features__item:first-child{ padding-top:0; }
}
@media (min-width:1280px){
.dine-intro__heading{ font-size:2.3rem; }
.dine-intro__text{ font-size:.95rem; }
}
/* ============================================================
Dining page — "Flavors for Every Mood" specialties section
(dining.php). Copy + a row of circular cuisine badges on the
left, a single corner-bracket-framed photo on the right.
Stacks to one column on mobile, badges wrap into rows.
============================================================ */
.dine-flavors{
position:relative;
padding:3.5rem 0;
background:#FBF5EA;
border-top:1px solid rgba(201,162,39,.18);
overflow:hidden;
}
.dine-flavors__grid{
display:grid;
grid-template-columns:1fr;
gap:2.5rem;
align-items:center;
}
/* ---------- Badges ---------- */
.dine-flavors__badges{
display:flex;
flex-wrap:wrap;
gap:1.5rem 1.1rem;
margin-top:2rem;
}
.dine-flavors__badge{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
width:92px;
}
.dine-flavors__circle{
display:flex;
align-items:center;
justify-content:center;
width:74px;
height:74px;
border-radius:50%;
border:1px solid rgba(201,162,39,.45);
background:#FBF5EA;
transition:border-color .25s ease, transform .25s ease, background-color .25s ease;
}
.dine-flavors__badge:hover .dine-flavors__circle{
border-color:#C9A227;
background:#F3E7CE;
transform:translateY(-3px);
}
.dine-flavors__icon{ width:32px; height:32px; display:block; object-fit:contain; flex:0 0 auto; }
.dine-flavors__label{
margin-top:.65rem;
font-family:'Jost',sans-serif; font-weight:500; font-size:.72rem;
line-height:1.35; color:#2B1A13;
}
/* ---------- Photo: same pure-CSS corner-bracket frame as the
intro section above, sized for a wide landscape food shot. ---------- */
.dine-flavors__photo{
position:relative;
margin:14px 14px 14px 0;
}
.dine-flavors__photo::before,
.dine-flavors__photo::after{
content:"";
position:absolute;
width:56px;
height:56px;
pointer-events:none;
}
.dine-flavors__photo::before{
top:-14px; left:-14px;
border-top:1.5px solid #C9A227;
border-left:1.5px solid #C9A227;
}
.dine-flavors__photo::after{
bottom:-14px; right:-14px;
border-bottom:1.5px solid #C9A227;
border-right:1.5px solid #C9A227;
}
.dine-flavors__photo-img{
position:relative;
width:100%;
aspect-ratio:16/9.2;
object-fit:cover;
border:1px solid rgba(201,162,39,.4);
display:block;
}
/* ================= Responsive ================= */
@media (min-width:640px){
.dine-flavors{ padding:4rem 0; }
}
@media (min-width:1024px){
.dine-flavors__grid{
grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
gap:3.5rem;
}
.dine-flavors__photo{ margin:14px 0 14px 0; }
}