/* Theme: Black / Red / White */
:root{
--ink:#0a0a0a; --sub:#454545;
--bg:#ffffff; --bg-soft:#f4f5f6;
--card:#ffffff; --stroke:rgba(0,0,0,.10);
--brand:#d61f2c; --brand-dark:#b71a24;
}
/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial;
color:var(--ink);
background:linear-gradient(180deg,var(--bg) 0%, var(--bg-soft) 100%);
}
img{display:block;max-width:100%;height:auto;border-radius:14px}
a{text-decoration:none;color:var(--brand)}
.wrap{width:min(1120px,100% - 32px);margin:0 auto}
/* Buttons */
.btn{
appearance:none;
border:0;
border-radius:999px;
padding:10px 14px;
font-weight:700;
font-size:14px;
cursor:pointer;
display:inline-block;
text-align:center;
}
.btn.primary{
background:var(--brand);
color:#fff;
box-shadow:0 8px 18px rgba(214,31,44,.25);
}
.btn.primary:hover{background:var(--brand-dark)}
.btn.outline{
background:#fff;
color:var(--ink);
border:1px solid var(--stroke);
}
.btn.outline:hover{filter:brightness(.98)}
/* Header */
.site-header{
position:sticky;
top:0;
z-index:40;
background:#0b0b0b;
color:#fff;
border-bottom:1px solid #000;
}
.site-header .wrap{
display:flex;
align-items:center;
gap:16px;
padding:10px 0;
}
.brand{
display:flex;
align-items:center;
gap:10px;
min-width:220px;
}
.brand-logo{
width:48px;
height:48px;
object-fit:contain;
border-radius:6px;
flex-shrink:0;
}
.name{
font-weight:800;
color:#fff;
}
.primary-nav{
display:flex;
gap:14px;
flex:1;
justify-content:center;
}
.nav-link{
color:#fff;
font-weight:700;
padding:8px 10px;
border-radius:10px;
}
.nav-link:hover{background:rgba(255,255,255,.08)}
.nav-link.active{
outline:2px solid var(--brand);
outline-offset:2px;
}
.contact{
display:flex;
gap:12px;
flex-wrap:wrap;
}
.contact a{
font-weight:700;
color:#fff;
}
/* Hero */
.hero-media img{
width:100%;
height:64vh;
object-fit:cover;
object-position:30% center;
}
.hero-copy{
padding:16px 0 8px;
}
.hero-copy h1{
margin:6px 0 8px;
font-size:clamp(26px,4.6vw,44px);
line-height:1.15;
}
.hero-copy p{
margin:0;
color:var(--sub);
font-size:clamp(16px,2vw,19px);
}
/* Rates */
.rates{
padding:18px 0;
}
.rates h2{
margin:6px 0 10px;
}
.rate-cards{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.card{
background:var(--card);
border:1px solid var(--stroke);
border-radius:14px;
padding:14px;
box-shadow:0 8px 24px rgba(0,0,0,.05);
}
.card h3{margin:0 0 6px}
.card p{margin:2px 0;color:var(--sub)}
/* spacing between combined rate sections */
.rate-item + .rate-item{
margin-top:8px;
}
/* Gallery on home */
.gallery{
padding:10px 0 6px;
}
.row{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:12px;
margin:12px 0;
}
.row.alt{
grid-template-columns:1fr 1fr 1fr;
}
.copy{
background:var(--card);
border:1px solid var(--stroke);
border-radius:14px;
padding:14px;
display:flex;
flex-direction:column;
justify-content:center;
}
.copy h3{margin:0 0 6px}
.copy p{
margin:0;
color:var(--sub);
}
figure{margin:0}
figcaption{
margin-top:6px;
color:#5b5b5b;
font-size:14px;
}
/* Info */
.info{
padding:18px 0 24px;
}
.info h2{
margin:6px 0 10px;
}
.cols{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:12px;
}
.cols .card{
background:var(--card);
border:1px solid var(--stroke);
border-radius:14px;
padding:14px;
box-shadow:0 8px 24px rgba(0,0,0,.05);
}
.cols h3{margin:0 0 6px}
.cols p,
.cols li{color:var(--sub)}
.cols .book{
grid-column:1 / -1;
}
.cols .book .cta{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:8px;
}
/* Page heroes */
.page-hero{
background:var(--bg-soft);
border-bottom:1px solid var(--stroke);
padding:18px 0;
}
.page-hero h1{
margin:0 0 6px;
}
/* Gallery page grid */
.gallery-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
}
.gallery-grid.figure{
background:var(--card);
border:1px solid var(--stroke);
border-radius:14px;
padding:8px;
}
.gallery-grid figcaption{
margin-top:6px;
color:#5b5b5b;
font-size:14px;
}
/* Calendar table */
.season-table{
width:100%;
border-collapse:separate;
border-spacing:0;
}
.season-table th,
.season-table td{
padding:10px;
border-bottom:1px solid var(--stroke);
text-align:left;
}
.season-table thead th{
background:var(--bg-soft);
}
/* Footer */
.site-footer{
background:#0b0b0b;
color:#fff;
border-top:1px solid #000;
}
.footer-bar{
width:100%;
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
padding:12px 16px;
gap:12px;
}
.site-footer .copyright{
margin:0;
font-weight:800;
font-size:20px;
color:#fff;
grid-column:2;
justify-self:center;
}
/* tiny credit */
.site-footer .credit{
margin:0;
font-weight:400;
font-size:8px;
opacity:0.35;
color:#ccc;
grid-column:3;
justify-self:end;
}
.site-footer .credit a{
color:#ccc;
font-weight:400;
text-decoration:none;
opacity:0.35;
}
.site-footer .credit:hover,
.site-footer .credit a:hover{
opacity:0.7;
}
/* Desktop → Tablet */
@media (max-width:1100px){
.gallery-grid{grid-template-columns:repeat(3,1fr);}
}
/* MOBILE LAYOUT FIX - STACK IMAGES THEN TEXT */
@media (max-width:900px){
/* Header */
.site-header .wrap{
flex-direction:column;
align-items:flex-start;
gap:8px;
padding:10px 0 12px;
}
.brand{min-width:auto;}
.primary-nav{
order:2;
width:100%;
display:flex;
flex-wrap:wrap;
justify-content:flex-start;
gap:10px;
}
.nav-link{
font-size:14px;
padding:6px 8px;
}
.contact{
order:3;
width:100%;
display:flex;
flex-wrap:wrap;
justify-content:flex-start;
gap:8px;
font-size:14px;
}
/* Rates */
.rate-cards{grid-template-columns:1fr;}
/* Mobile gallery stacking (image, image, text) */
.row,
.row.alt{
display:flex;
flex-direction:column;
gap:10px;
}
/* Push text block to bottom for rows where text is first in HTML */
.row.alt .copy{
order:3;
}
/* Info cards */
.cols{grid-template-columns:1fr;}
/* Hero */
.hero-media img{
height:48vh;
object-position:40% center;
}
/* Gallery page */
.gallery-grid{
grid-template-columns:repeat(2,1fr);
}
/* Footer */
.footer-bar{
grid-template-columns:1fr;
text-align:center;
}
.site-footer .credit{
justify-self:center;
font-size:7px;
}
}
@media (max-width:520px){
.gallery-grid{grid-template-columns:1fr;}
}
/* Contact page */
.split{
display:grid;
grid-template-columns:2fr 1fr;
gap:12px;
}
.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.field{
display:flex;
flex-direction:column;
gap:6px;
}
.field label{font-weight:700;}
.field .check{
display:flex;
align-items:flex-start;
gap:8px;
font-weight:600;
}
.field .check input{margin-top:3px;}
.field.full{grid-column:1 / -1;}
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
input[type="number"],
select,
textarea{
appearance:none;
border:1px solid var(--stroke);
border-radius:12px;
background:#fff;
padding:10px 12px;
font:inherit;
}
input:focus,
select:focus,
textarea:focus{
outline:2px solid var(--brand);
outline-offset:2px;
}
textarea{
min-height:120px;
resize:vertical;
}
.form-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:8px;
}
.form-status{
margin:10px 0 0;
font-weight:700;
}
.form-help{
margin:6px 0 0;
color:var(--sub);
font-size:14px;
}
@media (max-width:900px){
.split{grid-template-columns:1fr;}
.form-grid{grid-template-columns:1fr;}
}