/* Import these in your HTML :
*/
/* Header */
.header {
grid-area: header;
position: fixed;
width: 100%;
padding: 1rem 2rem;
display: flex;
align-items: center;
z-index: 1000;
/* Dark top-to-bottom gradient */
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 1), /* fully opaque white at top */
rgba(255, 255, 255, 0.0) /* fully transparent at bottom */
);
}
/* Header links */
.header a {
position: relative;
display: inline-block;
margin-left: 3vw;
text-decoration: none;
color: inherit;
overflow: hidden;
}
/* Normal/default text (Montserrat) */
.header a .normal {
font-family: "Montserrat", sans-serif;
font-weight: 400;
position: relative;
z-index: 1;
transition: opacity 0.4s ease;
}
/* Script overlay for header links (Ballet) */
.header a .script {
font-family: "Ballet", cursive;
font-weight: 400;
font-style: normal;
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
width: 0; /* hidden at start */
overflow: hidden;
transition: width 0.6s ease;
z-index: 2;
}
/* Hover state for header links */
.header a:hover .normal {
opacity: 0;
}
.header a:hover .script {
width: 100%;
}
/* Dropdown wrapper */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown menu */
.dropdown-content {
opacity: 0;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
min-width: 160px;
padding: 0.5rem 0;
z-index: 1001;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: opacity 0.4s ease, visibility 0.4s ease;
pointer-events: none;
display: flex;
flex-direction: column;
gap: 0.25rem;
align-items: flex-start;
/* Gradient background */
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 1), /* fully opaque white at top */
rgba(255, 255, 255, 0.0) /* fully transparent at bottom */
);
}
/* Show dropdown on hover */
.dropdown:hover > .dropdown-content {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Dropdown links */
.dropdown-content a {
display: block;
padding: 0.5rem 1rem;
white-space: nowrap;
margin-left: 0;
position: relative;
color: inherit;
overflow: hidden;
}
/* Normal text in dropdown (Montserrat) */
.dropdown-content .normal {
font-family: "Montserrat", sans-serif;
transition: opacity 0.3s ease;
}
/* Script overlay in dropdown (Pacifico) */
.dropdown-content .script {
font-family: 'Pacifico', cursive;
position: absolute;
left: 0;
top: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
/* Hover effect in dropdown: fade Montserrat out, Pacifico in */
.dropdown-content a:hover .normal {
opacity: 0;
}
.dropdown-content a:hover .script {
opacity: 1;
}
.dropdown-content {
opacity: 0;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
min-width: 160px;
padding: 0.5rem 0;
z-index: 1001;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: opacity 0.4s ease, visibility 0.4s ease;
pointer-events: none;
display: flex;
flex-direction: column;
gap: 0.25rem;
align-items: flex-start;
/* Darker gradient for dropdown */
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 1), /* fully opaque white at top */
rgba(255, 255, 255, 0.0) /* fully transparent at bottom */
);
}
body {
margin: 0;
padding: 0;
background: #000;
color: black;
font-family: "Montserrat", sans-serif;
font-size: x-large;
}
#center {
position: fixed; /* stays in place on scroll */
top: 10px; /* adjust to where you want it */
right: 20px;
font-family: "Ballet", cursive;
margin: 0;
z-index: 9999; /* make sure it sits above everything */
pointer-events: none; /* optional: prevents blocking clicks */
}
.overlay {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.8);
justify-content: center;
align-items: center;
z-index: 2000;
}
/* Content area */
.overlay-content {
position: relative;
max-width: 90%;
max-height: 90%;
text-align: center;
}
/* Image inside overlay */
.overlay-content img {
max-width: 100%;
max-height: 80vh;
}
/* Video inside overlay */
.overlay-content video {
max-width: 100%;
max-height: 80vh;
}
/* Caption */
.overlay-content p {
color: #fff;
margin-top: 10px;
font-size: 1rem;
}
/* Optional: different weights or styles */
.montserrat-regular {
font-weight: 400;
font-style: normal;
}
.montserrat-bold {
font-weight: 700;
font-style: normal;
}
.montserrat-italic {
font-weight: 400;
font-style: italic;
}
.block2 {
margin: 0 auto; /* centers it */
text-align: center;
}
.img2 img {
width: auto; /* allow natural or scaled width */
max-width: 100%; /* scale down inside parent */
height: auto; /* keep proportions */
object-fit: contain; /* stop cropping */
aspect-ratio: auto; /* cancel the square constraint */
}
.layout {
width: 100%;
display: grid;
grid:
"header" auto
"main" 1fr
"footer" auto
/ 1fr;
}
.pageWrapper {
padding: 5px;
background-color: white;
margin-bottom: 5%;
}
.page-container {
display: grid;
grid-template-rows: auto 1fr;
}
.main {
grid-area: main;
background-color: white;
}
.footer {
grid-area: footer;
background-color: white;
}
.block,
.block1 {
padding: 20%;
background-color: white;
text-align: center;
}
.content {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.gallery {
background-color: white;
}
.img-container {
position: relative;
display: inline-block;
width: 100%;
}
.img-container img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
}
.img-container h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 24px;
padding: 10px;
border-radius: 8px;
}
/* ---------- Split Layout (Main2) ---------- */
.main2 {
background-color: white;
display: grid;
grid-template-columns: 1fr 1fr;
height: 100%;
}
.left-side img {
width: 100%;
height: 100%;
object-fit: cover;
}
.right-side {
display: flex;
flex-direction: column;
justify-content: center;
padding: 2rem;
}
/* ---------- Video Embed ---------- */
.video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* ---------- Blur-Load Image ---------- */
/* ---------- General Images (default) ---------- */
img {
width: auto;
max-width: 100%;
height: auto;
display: block;
}
/* ---------- Blur-Load Container ---------- */
.blur-load {
position: relative;
background-size: cover;
background-position: center;
overflow: hidden;
}
.blur-load2 {
position: relative;
background-size: cover;
background-position: center;
overflow: hidden;
}
.blur-load {
position: relative;
background-size: cover;
background-position: center;
overflow: hidden;
}
.video2 {
width: 100%;
height: 100vh;
object-fit: cover;
display: block;
}
.blur-load img,
.blur-load video {
width: 100%;
aspect-ratio: 1 / 1;
display: block;
object-fit: cover;
object-position: center;
opacity: 0;
transition: opacity 0.5s ease;
}
.blur-load.loaded img,
.blur-load.loaded video {
opacity: 1;
}
.blur-load::before {
content: "";
position: absolute;
inset: 0;
animation: pulse 2.5s infinite;
background-color: rgba(255, 255, 255, 0.1);
}
.blur-load.loaded::before {
content: none;
}
@keyframes pulse {
0% { background-color: rgba(255, 255, 255, 0); }
50% { background-color: rgba(255, 255, 255, 0.1); }
100% { background-color: rgba(255, 255, 255, 0); }
}
.mp4 {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.mp4 video {
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel {
position: relative;
width: 100vw;
overflow: hidden;
}
.carousel-track {
display: flex;
transition: transform 0.5s ease-in-out;
}
.carousel img {
width: 100%;
flex-shrink: 0;
object-fit: cover;
}
.carousel button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: black;
cursor: pointer;
}
.carousel button:hover {
color: white;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
.footer {
margin-top: 5%;
font-size: medium;
margin-left: 5px;
display: flex; /* put links side by side */
gap: 2rem; /* space between them */
}
.footer a {
color: white;
transition: color 0.3s ease;
}
.footer a:hover {
color: #aaa; /* subtle hover effect */
}
.pageWrapper {
font-size: medium;
}
.mp5 video {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ---------- Responsive for Mobile ---------- */
@media (max-width: 768px) {
/* Header: simplify navigation */
.header {
flex-direction: column;
align-items: flex-start;
padding: 0.5rem 1rem;
}
.header a {
margin: 0.5rem 0;
display: inline-block;
}
/* Disable dropdowns */
.dropdown-content {
display: none !important;
}
/* Content grid: switch from 3 to 2 per row */
.content {
grid-template-columns: repeat(2, 1fr);
}
/* Split layout collapses into one column */
.main2 {
grid-template-columns: 1fr;
}
.right-side {
padding: 1rem;
}
/* Block spacing reduced */
.block,
.block1,
.block2 {
padding: 10%;
}
/* Video scaling */
.video2,
.mp4 video {
height: auto;
max-height: 70vh;
}
/* Text adjustments */
body {
font-size: medium;
}
.img-container h2 {
font-size: 18px;
padding: 5px;
}
}