html {
font-size: 13px; /* Very small screens */
}
@media (min-width: 400px) {
html {
font-size: 14px;
}
}
@media (min-width: 576px) {
html {
font-size: 15px;
}
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
@media (min-width: 992px) {
html {
font-size: 17px;
}
}
@media (min-width: 1200px) {
html {
font-size: 18px;
}
}
@media (min-width: 1400px) {
html {
font-size: 19px;
}
}
@media (min-width: 2100px) {
html {
font-size: 19px;
}
}
*, *::before, *::after {
box-sizing: border-box;
}
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh;
width: min(100vw, 1920px);
overflow-x: hidden;
font-family: 'Roboto', 'Sans-Serif';
color: #3a3a3a;
color: white;
font-size: 1rem; /* Tied to html font-size */
line-height: 1.6;
color: #222;
margin: 0;
padding: 0;
line-height: 150%;
letter-spacing: +0.005em;
}
.body-lg {
line-height: 150%;
letter-spacing: +0.005em;
}
main {
flex-grow: 1;
display: flex;
flex-direction: column;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Jost', 'Sans-Serif';
color: black;
margin-top: 1rem;
margin-bottom: 1rem;
text-transform: uppercase;
}
h1 {
font-size: 2.5rem; /* ~32px to 47px depending on screen */
font-weight: 700;
color: #D4AF37; /* Metallic Gold */
line-height: 110%;
letter-spacing: -0.02em;
}
h2 {
font-size: 2rem;
font-weight: 600;
color: #B8860B; /* Dark Goldenrod */
line-height: 110%;
letter-spacing: -0.02em;
/* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
}
h3 {
font-size: 1.75rem;
font-weight: 600;
color: #B08D57; /* Bronze Gold */
line-height: 130%;
letter-spacing: -0.015em;
/* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
}
h4 {
font-size: 1.5rem;
font-weight: 600;
color: #B08D57; /* Bronze Gold */
line-height: 130%;
letter-spacing: -0.015em;
/* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
}
h5 {
font-size: 1.25rem;
font-weight: 500;
color: #B08D57; /* Bronze Gold */
line-height: 150%;
letter-spacing: -0.005em;
/* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
}
h6 {
font-size: 1rem;
font-weight: 500;
color: #B08D57; /* Bronze Gold */
line-height: 150%;
letter-spacing: 0em;
/* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
}
p {
font-size: 1rem;
margin-bottom: 1rem;
margin-bottom: 0.5em;
line-height: 150%;
}
p.long::first-line{
text-transform: uppercase;
font-weight: 500;
}
caption{
line-height: 160%;
letter-spacing: +0.005em;
}
li{
font-size: 1rem; /* Tied to html font-size */
line-height: 1.6;
color: #222;
}
/* =======================
Utility Spacing
======================= */
/* Use these classes for spacing between sections */
.section {
margin-top: 4rem;
margin-bottom: 4rem;
}
.section-small {
margin-top: 2rem;
margin-bottom: 2rem;
}
a {
color: #827020;
text-decoration: none;
font-weight: 500;
line-height: 150%;
letter-spacing: +0.5%;
transition: all 0.2s ease-in-out;
}
a:visited {
color: #B8860B;
color: #827020;
}
a:hover {
background-color: #d4af37;
background-color: #827020;
color: white;
font-weight: 900;
text-decoration: none;
}
a:active {
color: #b08d57;
}
a.button-link {
background-color: #827020;
color: white; /* White text */
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.2s ease;
}
a.button-link:hover {
background-color: #D4AF37;
}
/*-----------------------------------------------------------------*/
a.btn-nav,
a.btn-nav-sm {
font-family: 'Roboto', sans-serif;
font-size: 0.8em;
letter-spacing: .25em;
padding: 0.5em 1.5625em;
white-space: nowrap;
border-radius: 0;
border: rgba(0, 0, 0, 0);
background-color: black;
color: white;
color: #f5d481; /* #444;*/
color: rgba(229, 213, 162, 0.947);
margin-top: 5em;
/* transform: translate(-50%, -50%);*/
transition: all 0.3s ease-in-out;
font-size: 1em;
letter-spacing: calc(0.1em + 0.1vw); /* subtle, readable, energetic */
text-transform: uppercase;
/* font-weight: bold; */
}
a.btn-nav-sm {
font-size: 0.8em;
letter-spacing: calc(0.1em + 0.1vw); /* subtle, readable, energetic */
padding: 0.5em 0.5em;
margin-top: 5em;
}
a.btn-nav:visited,
a.btn-nav-sm:visited {
color: rgba(229, 213, 162, 0.947);
}
/* --- Hover styles ONLY for devices that can truly hover --- */
@media (hover: hover) {
a.btn-nav:hover,
a.btn-nav-sm:hover {
background-color: #827020;
color: white;
opacity: 1;
transform: translateY(-3px); /* Move the button up slightly */
box-shadow: 0 4px 8px rgba(0,0,0,0.4); /* Add a subtle shadow */
}
}
a.btn-nav:hover,
a.btn-nav-sm:hover {
background-color: #827020;
color: white;
opacity: 1;
transform: translateY(-3px); /* Move the button up slightly */
box-shadow: 0 4px 8px rgba(0,0,0,0.4); /* Add a subtle shadow */
}
a.btn-nav:active,
a.btn-nav-sm:active {
background-color: #827020; /* #4f4f4f; */
opacity: 1;
transform: translateY(-3px); /* Move the button up slightly */
box-shadow: 0 4px 8px rgba(0,0,0,0.4); /* Add a subtle shadow */
}
@keyframes pulse-cont {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.15);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/*-----------------------------------------------------------------*/
#btn-back-to-top {
position: fixed !important;
/* bottom: 20px !important; */
bottom: calc(20px + env(safe-area-inset-bottom)) !important;
right: 20px;
display: none; /* Hidden by default */
width: 40px;
height: 40px;
font-size: 1rem;
font-weight: 900;
z-index: 1099;
background-image: url('/images/book-ad-bg.jpg') no-repeat center center / cover;
/* background-size: cover;
background-position: center; */
box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
border: none;
border-radius: 25%;
transition: all 0.2s ease-in-out;
}
#btn-back-to-top:hover {
transform: scale(1.1) translateY(-5px);
color: green;
}
/*-----------------------------------------------------------------*/
/*--------------------------------------------------------*/
/* footer styles */
footer {
/* position: fixed;
bottom: 0; */
display: flex;
flex-direction: column;
width: 100%;
justify-items: flex-end;
align-items: center;
text-align: center;
padding-bottom: 5px;
margin: 0;
padding-top: 0px;
}
.footer-custom-bg {
/* Add these lines for the SVG background */
background-image: url('../images/hero/hero.webp');
background-size: cover; /* Or 'contain', '100%', etc. */
background-repeat: no-repeat;
/* ...other navbar styles... */
background-position: center center;
background-color: transparent;
}
#footer-logo {
margin-top: 0;
padding-top: 0;
margin-bottom: 15px;
}
@media (orientation: portrait) {
#footer-logo {
width: max(40px, 7vw);
height: auto;
}
}
@media (orientation: landscape) {
#footer-logo {
height: max(40px, 7vh);
width: auto;
}
}
footer p {
font-size: 0.6rem;
font-family: 'Roboto', sans-serif;
margin-bottom: 0;
}
/* footer a {
background-color: transparent;
}
footer a:visited {
background-color: transparent;
}
footer a:hover {
background-color: transparent;
}
footer a:active {
background-color: transparent;
} */
.footer-divider{
overflow: visible;
position: relative;
background-color: transparent;
padding-top: 30px;
}
/* .footer-divider::before{
content:'';
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
top: -1px;
z-index: 3;
pointer-events: none;
background-color: transparent;
background-repeat: no-repeat;
background-size: 100% 47px;
background-position: 50% 0%;
background-image: url('data:image/svg+xml;charset=utf8, ');
} */
/* @media (min-width:768px){
.shapedividers_com-7085::before{
background-size: 100% 94px;
background-position: 50% 100%;
transform: rotateY(180deg);
background-image: url('data:image/svg+xml;charset=utf8, ');
}
}
@media (min-width:1025px){
.shapedividers_com-7085::before{
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw;
background-size: 100% 48px;
background-position: 50% 0%;
background-image: url('data:image/svg+xml;charset=utf8, ');
}
}
@media (min-width:2100px){
.shapedividers_com-7085::before{
background-size: 100% calc(2vw + 48px);
}
}
*/
/* .footer-divider::before{
content:'';
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
top: -1px;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat;
background-size: 100% 139px;
background-position: 50% 0%;
background-image: url('data:image/svg+xml;charset=utf8, ');
} */
/* @media (min-width:1025px){
.footer-divider::before{
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw;
background-size: 100% 80px;
background-position: 50% 0%;
background-image: url('data:image/svg+xml;charset=utf8, ');
}
} */
.footer-divider::before{
content:'';
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
top: -1px;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat;
background-size: 100% 22px;
background-position: 50% 100%;
background-image: url('data:image/svg+xml;charset=utf8, ');
/* }
.footer-divider::before{ */
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw;
background-size: 116% 31px;
background-position: 50% 0%;
transform: rotateY(180deg);
background-image: url('data:image/svg+xml;charset=utf8, ');
}
@media (min-width:2100px){
.footer-divider::before{
background-size: 116% calc(2vw + 31px);
}
}
/*--------------------------------------------------------*/
@media (min-width: 360px) {
.page-wrapper {
padding-left: 5px;
padding-right: 5px;
}
footer p {
font-size: 0.6rem;
}
}
@media (min-width: 480px) {
.page-wrapper {
padding-left: 10px;
padding-right: 10px;
}
footer p {
font-size: 0.6rem;
}
}
/* --- SM: 576px to 767.98px --- */
@media (min-width: 576px) {
/* SM portrait styles */
.page-wrapper {
padding-left: 20px;
padding-right: 20px;
}
footer p {
font-size: 0.6em;
}
.footer-divider{
padding-top: 40px;
}
}
/* --- MD: 768px to 991.98px --- */
@media (min-width: 768px) {
.page-wrapper {
/* Limit the content width for better readability on wide screens */
max-width: 90%;
padding-left: auto; /* Center the wrapper */
padding-right: auto;
}
footer p {
font-size: 0.7rem;
}
}
/* --- LG: 992px to 1199.98px --- */
@media (min-width: 992px) {
/* LG portrait styles */
}
/* --- Styles for Tablets (Landscape) & Desktops --- */
@media (min-width: 1024px) {
.page-wrapper {
/* Limit the content width for better readability on wide screens */
max-width: 1200px;
margin-left: auto; /* Center the wrapper */
margin-right: auto;
}
footer p {
font-size: 0.7rem;
}
.footer-divider{
padding-top: 40px;
}
}
/* --- XL: 1200px to 1399.98px --- */
@media (min-width: 1200px) {
footer p {
font-size: 0.7rem;
}
}
/* --- XXL: 1400px and up --- */
@media (min-width: 1400px) {
footer p {
font-size: 0.8rem;
}
}
@media (min-width: 2100px) {
/* XXL portrait styles */
footer p {
font-size: 0.8rem;
}
}
/* --- FOR PRINT --- */
@media print {
body {
background-color: #fff;
color: #000;
font-size: 12pt;
}
.container {
box-shadow: none;
border: 1px solid #ccc;
}
/* Hide elements not relevant for printing */
nav, footer, .no-print {
display: none;
}
}