/* 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(0, 0, 0, 1), /* fully opaque black at top */
rgba(0, 0, 0, 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(0, 0, 0, 1),
rgba(0, 0, 0, 0.0)
);
}
/* 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: "Ballet", 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;
}
body {
margin: 0;
padding: 0;
background: #000;
color: white;
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 */
}
/* 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;
}
.layout {
width: 100%;
display: grid;
grid:
"header" auto
"main" 1fr
"footer" auto
/ 1fr;
}
.pageWrapper {
padding: 5px;
background-color: black;
}
.page-container {
display: grid;
grid-template-rows: auto 1fr;
}
.main {
grid-area: main;
background-color: black;
}
.footer {
grid-area: footer;
background-color: black;
}
.block,
.block1 {
padding: 20%;
background-color: black;
text-align: center;
}
/* ---------- Gallery ---------- */
.content {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 images per row */
}
.gallery {
background-color: black;
}
.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: black;
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 ---------- */
img {
width: 100%;
aspect-ratio: 1 / 1;
display: block;
object-fit: cover;
object-position: center;
}
.blur-load {
position: relative;
background-size: cover;
background-position: center;
}
.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); }
}
.blur-load > img {
opacity: 0;
width: 100%;
height: 100%;
transition: opacity 200ms ease-in-out;
}
.blur-load.loaded > img {
opacity: 1;
}
.name {
max-width: 5vh;
}
.img-container {
position: relative;
overflow: hidden;
cursor: pointer;
}
.img-container img {
width: 100%;
height: auto;
display: block;
transition: filter 0.4s ease;
}
.img-container h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) translateY(20px);
opacity: 0;
color: white;
font-size: 1.5rem;
font-weight: bold;
text-align: center;
pointer-events: none;
transition: opacity 0.4s ease, transform 0.4s ease;
}
.img-container p {
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%) translateY(20px);
opacity: 0;
color: white;
font-size: small;
font-weight: thin;
text-align: center;
pointer-events: none;
transition: opacity 0.4s ease, transform 0.4s ease;
}
.img-container:hover p {
opacity: 1;
transform: translate(-50%, -50%) translateY(0);
}
/* Hover effect */
.img-container:hover img {
filter: blur(5px) brightness(60%);
}
.img-container:hover h2 {
opacity: 1;
transform: translate(-50%, -50%) translateY(0);
}
.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;
}
/* ---------- Responsive for Mobile ---------- */
/* ---------- 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;
}
/* Gallery: switch to 1 item per row */
.content {
grid-template-columns: 1fr; /* instead of repeat(2, 1fr) */
}
/* Split layout collapses into one column */
.main2 {
grid-template-columns: 1fr;
}
.right-side {
padding: 1rem;
}
/* Block spacing reduced */
.block,
.block1 {
padding: 10%;
}
/* Text size adjustments */
body {
font-size: medium;
}
.img-container h2 {
font-size: 1.2rem;
padding: 5px;
}
}