:root{
--primary-colour: #960000;
--colour-white: #fff;
--colour-black: #000;
}
@font-face {
font-family: "Society Page NF W01 Regular";
src: url(https://db.onlinewebfonts.com/t/51eab992a8b6cf5094d8aada3ee52856.eot);
src: url(https://db.onlinewebfonts.com/t/51eab992a8b6cf5094d8aada3ee52856.eot?#iefix)format("embedded-opentype"),
url(https://db.onlinewebfonts.com/t/51eab992a8b6cf5094d8aada3ee52856.woff2)format("woff2"),
url(https://db.onlinewebfonts.com/t/51eab992a8b6cf5094d8aada3ee52856.woff)format("woff"),
url(https://db.onlinewebfonts.com/t/51eab992a8b6cf5094d8aada3ee52856.ttf)format("truetype"),
url(https://db.onlinewebfonts.com/t/51eab992a8b6cf5094d8aada3ee52856.svg#Society Page NF W01 Regular)format("svg");
}
img, video, audio{
vertical-align: bottom;
}
body{
font-family: 'Open Sans', sans-serif;
font-weight: 300;
overflow-x: hidden;
background-color: var(--colour-white);
&.body-lock{
overflow: hidden;
}
}
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
a:not([class]){
text-decoration: none;
font-weight: bold;
text-decoration: none;
&:hover{
text-decoration: underline;
}
}
h1, h2, h3, h4, h5, h6{
font-family: "Society Page NF W01 Regular";
color: var(--primary-colour);
}
h1 { font-size: 2.5rem; line-height: 1.2; }
h2 { font-size: 2rem; line-height: 1.3; }
h3 { font-size: 1.75rem; line-height: 1.35; }
h4 { font-size: 1.5rem; line-height: 1.4; }
h5 { font-size: 1.25rem; line-height: 1.45; }
h6 { font-size: 1rem; line-height: 1.5; }  .site-container{
width: 100%;
float: left;
} .full-width{
width: 100%;
float: left;
} .max-width{
width: 100%;
max-width: 1200px;
margin: 0 auto;
} .row{
width: 100%;
min-height: 1px;
float: left;
} .col{
min-height: 1px;
display: inline-block;
float: left;
} .col.col-1{width: 8.33%;}
.col.col-2{width: 16.66%;}
.col.col-3{width: 24.99%;}
.col.col-4{width: 33.32%;}
.col.col-5{width: 41.65%;}
.col.col-6{width: 49.98%;}
.col.col-7{width: 58.31%;}
.col.col-8{width: 66.64%;}
.col.col-9{width: 74.97%;}
.col.col-10{width: 83.3%;}
.col.col-11{width: 91.63%;}
.col.col-12{width: 100%;} @media (max-width: 768px){
.col{
width: 100% !important;
}
} img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }  header.site-header{
background-size: cover;
background-repeat: no-repeat;
background-position: center;
} .header-top{
background-color: rgba(255, 255, 255, 0.5);
text-align: center;
padding: 40px 50px 0;
position: relative;
}
.mobile-menu-button{
position: absolute;
top: 0;
right: 0;
color: var(--colour-white);
text-transform: uppercase;
background-color: var(--primary-colour);
border: none;
padding: 0.5rem 1rem;
font-size: 16px;
cursor: pointer;
font-weight: 300;
display: none;
border-radius: 0 0 0 4px;
}
.mobile-menu-button .menu-icon{
display: flex;
align-items: center;
gap: 0.5rem;
}
.mobile-menu-button .menu-opened{
display: none;
}
.mobile-menu-button.active .menu-closed{
display: none;
}
.mobile-menu-button.active .menu-opened{
display: flex;
}
.bar-container{
display: inline-block;
margin-right: 10px;
}
.bar{
width: 30px;
height: 2px;
margin-bottom: 7px;
background-color: var(--colour-white);
}
.bar-container .bar:last-child{
margin-bottom: 0;
}
.header-top .custom-logo{
margin-bottom: 20px;
width: 100%;
max-width: 540px;
height: auto;
}
.site-nav ul{
font-size: 0;
display: flex;
justify-content: center;
gap: 0.25rem;
}
.site-nav ul li{
display: inline-block;
}
.site-nav ul li a{
font-size: 1rem;
display: block;
color: var(--colour-black);
padding: 10px 20px;
}
.current-menu-item a,
.site-nav ul li a:hover{
color: var(--colour-white) !important;
background-color: var(--primary-colour);
border-radius: 4px 4px 0 0;
text-decoration: none;
} .header-bottom{
position: relative;
border-bottom: 4px solid var(--primary-colour);
min-height: 241px;
display: flex;
align-items: center;
justify-content: center;
}
.book-now-button{
background-color: var(--primary-colour);
color: var(--colour-white);
font-size: 2rem;
padding: 1rem 2rem;
border-radius: 8px;
text-decoration: none;
font-weight: bold;
&:hover{
background-color: var(--colour-black);
text-decoration: none !important;
}
}
.book-now-button:hover{
text-decoration: underline;
}
.header-bottom h1{
font-size: 36px;
color: var(--colour-white);
display: inline-block;
text-align: left
margin-top: 75px;
}
.header-bottom h1 span{
display: block;
padding: 0 10px;
padding-left: 80px;
background-color: rgba(150, 0, 0, 0.7);
}
.header-bottom h1 span:last-child{
margin-right: 10px;
} .home-content{
padding: 0 20px 60px 20px;
display: flex;
}
.home-content .col:first-child{
display: flex;
align-items: center;
padding: 40px 0;
}
.home-content p, .home-content h2{
padding: 0 40px 0 0;
margin-bottom: 1rem;
}
.home-content h2{
font-size: 2rem;
color: var(--primary-colour);
}
.home-content .col:last-child img{
width: 100%;
height: auto;
margin: 0 auto;
display: block;
} .click-more{
font-size: 12px;
text-transform: none;
}
.guestbook{
background-color: #fafafa;
}
.guestbook .guest-square{
background-color: var(--primary-colour);
color: var(--colour-white);
width: 240px;
height: 240px;
display: flex;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 24px;
text-transform: uppercase;
}
.guest-square a{
color: var(--colour-white);
}
.guest-square a:hover{
text-decoration: underline;
}
.guestbook .col-4{
width: calc(33.32% - 80px);
}
.guestbook .guest-square span{
line-height: 1px;
font-size: 60px;
}
.guestbook .guest-info{
padding: 20px;
}
.guest-message{
font-weight: 600;
word-wrap: break-word;
}
.guest-message span{
font-weight: 300;
} #map{
height: 400px;
}
.map-container{
position: relative;
color: var(--colour-white);
}
.map-dir{
background-color: var(--primary-colour);
width: 240px;
height: 240px;
position: absolute;
top: 0;
right: 0;
z-index: 1000;
display: flex;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 24px;
text-transform: uppercase;
}
.map-dir a{
color: var(--colour-white);
}
.map-dir a:hover{
text-decoration: underline;
} .site-footer{
background-color: var(--primary-colour);
color: var(--colour-white);
float: left;
width: 100%;
padding: 40px 20px;
}
.site-footer a{
color: var(--colour-white);
font-weight: 600;
}
.site-footer a:hover{
text-decoration: underline;
}
.site-footer p{
line-height: 1.6;
}
.site-footer .col:last-child{
text-align: right;
position: relative;
height: 100px;
}
.site-footer .col:last-child a{
position: absolute;
bottom: 0;
right: 0;
} .contact-container{
max-width: 800px;
margin: 40px auto;
padding: 0 10px;
}
.contact-container input, textarea{
width: 100%;
background-color: #f8f8f8;
border: 1px solid #bdbdbd;
padding: 5px;
margin: 10px 0 10px 0;
resize: vertical;
}
.contact-container input[type="submit"]{
background-color: var(--primary-colour);
color: var(--colour-white);
border: none;
padding: 14px;
font-size: 16px;
} .foin-page{
padding: 40px 20px;
}
.page-header{
text-align: left;
margin-bottom: 20px;
font-size: 60px;
color: var(--primary-colour);
}
.foin-page h2{
color: var(--primary-colour);
font-size: 30px;
margin-bottom: 10px;
}
.foin-page p{
margin-bottom: 20px;
line-height: 1.6;
}
.foin-page ul{
margin-left: 20px;
margin-bottom: 20px;
}
.foin-page ul li{
list-style: disc;
line-height: 1.6;
} .booking-col{
padding: 20px;
position: relative;
}
.booking-col img{
width: 100%;
height: auto;
transition: all .3s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
cursor: pointer;
}
.booking-col img:hover{
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
} .booking-col h2{
margin-bottom: 0;
}
.booking-link{
position: absolute;
bottom: 25px;
left: 30px;
color: var(--colour-white);
font-size: 32px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.booking-arrow{
opacity: 0;
}
.booking-bot-row{
margin-bottom: 60px;
} .guest-image{
width: 100%;
height: auto;
max-width: 600px;
margin: 0 auto 2rem;
display: block;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.guest-info-list{
background-color: #fafafa;
padding: 20px;
margin-bottom: 40px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.guest-info-list .guest-message{
margin-bottom: 20px;
} .paginate-links{
padding: 20px;
}
.page-numbers{
background-color: var(--primary-colour);
color: var(--colour-white);
display: inline-block;
padding: 10px;
}
.current{
background-color: var(--colour-white);
color: var(--primary-colour);
border: 1px solid var(--primary-colour);
}
a.page-numbers:hover{
text-decoration: underline;
}
@media (max-width: 1000px){
.foin-page .gallery dl.gallery-item{
width: 100% !important;
}
.foin-page .gallery dl img{
width: 100% !important;
height: auto !important;
}
}
@media (max-width: 960px){
.guestbook .col{
width: 100%;
}
.guestbook .col:nth-child(2){
padding-top: 40px;
}
.guestbook .col:last-child{
padding-bottom: 60px;
}
.guestbook .guest-square, .map-dir{
width: 100%;
height: 40px;
flex-direction: row;
font-size: 20px;
}
.guestbook .guest-square span{
line-height: 1;
margin: 25px 10px 0 0;
}
.map-dir img{
margin-right: 10px;
}
.click-more{
margin-left: 10px;
}
}
@media (max-width: 768px){
.header-top{
background-color: var(--colour-white);
padding-top: 46px;
}
.mobile-menu-button{
display: flex;
z-index: 9999;
}
.site-nav{
position: fixed;
display: none;
top: calc(46px + var(--wp-admin--admin-bar--height, 0));
left: 0;
z-index: 9998;
width: 100%;
height: calc(100% - 46px - var(--wp-admin--admin-bar--height, 0));
background-color: var(--colour-white);
padding: 1rem;
}
.site-nav ul{
flex-direction: column;
}
.site-nav ul li{
display: block;
}
.site-nav ul li a{
display: block;
width: 100%;
background-color: var(--colour-black);
color: var(--colour-white) !important;
padding: 20px;
border-bottom: 3px solid var(--colour-white);
}
.site-nav ul li.current-menu-item a,
.site-nav ul li a:hover{
background-color: var(--primary-colour);
}
.site-nav ul li.current-menu-item a{
border-radius: 4px;
}
.book-now-button{
font-size: 20px;
}
.header-bottom h1{
font-size: 30px;
}
.home-content{
padding: 20px;
flex-direction: column-reverse;
}
.home-content p{
padding: 0;
margin-top: 20px;
}
.site-footer{
text-align: center;
}
.site-footer .col:last-child{
text-align: center;
margin-top: 20px;
height: 50px;
}
.site-footer .col:last-child a{
position: relative;
}
.booking-col{
padding: 10px;
}
}