/* Import Monospace Editorial Font */
@import url(‘https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap’);
/* FORCE HIDE ALL THEME SITE TITLES & OLD TEXT WRAPPERS */
.site-title,
.site-title a,
.wp-block-site-title,
.wp-block-site-title a,
header h1,
header h2,
.site-branding,
.entry-title,
.wp-block-post-title,
.navbar-brand,
#site-title,
.brand-name {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
/* Dark Editorial Base */
.editorial-wrapper {
position: relative;
width: 100vw;
height: 100vh;
background-color: #0a0a0a;
overflow: hidden;
font-family: ‘Space Mono’, monospace, -apple-system, sans-serif;
}
/* Top-Left Header */
.site-header {
position: fixed !important;
top: 36px;
left: 40px;
z-index: 1000;
display: block !important;
}
.nav-container {
position: relative;
display: inline-block;
}
/* Logo Link & Image Sizing */
.brand-logo-link {
display: block;
padding-bottom: 12px; /* Smooth hover zone for dropdown */
text-decoration: none;
}
.brand-logo {
height: 28px; /* Adjust height if you want your logo bigger or smaller */
width: auto;
display: block;
opacity: 0.95;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.brand-logo-link:hover .brand-logo {
opacity: 1;
transform: scale(1.02);
}
/* Dropdown Navigation Menu */
.dropdown-menu {
opacity: 0;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
background: rgba(14, 14, 14, 0.9);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 14px 22px;
border: 1px solid #1a1a1a;
display: flex;
flex-direction: column;
gap: 12px;
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
transform: translateY(-5px);
}
.nav-container:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-menu a {
color: #888888;
text-decoration: none;
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: color 0.3s ease;
}
.dropdown-menu a:hover {
color: #ffffff;
}
/* Floating Canvas & Image Overlaps */
.floating-canvas {
position: relative;
width: 100%;
height: 100%;
}
.float-item {
position: absolute;
display: block;
text-decoration: none;
transition: filter 0.4s ease, transform 0.4s ease;
}
.float-item img {
width: 320px;
height: auto;
display: block;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85);
border: 1px solid #161616;
}
/* Interactive Hover State: Bring to top & slightly scale */
.float-item:hover {
z-index: 999 !important;
animation-play-state: paused;
filter: brightness(1.1);
}
/* Drifting Physics (Continuous Smooth Loops) */
@keyframes driftA {
0% { transform: translate(0, 0) rotate(0deg); }
33% { transform: translate(45px, -55px) rotate(1.5deg); }
66% { transform: translate(-30px, -20px) rotate(-1deg); }
100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes driftB {
0% { transform: translate(0, 0) rotate(0deg); }
33% { transform: translate(-60px, 40px) rotate(-2deg); }
66% { transform: translate(35px, 60px) rotate(1deg); }
100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes driftC {
0% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(50px, 50px) rotate(2deg); }
100% { transform: translate(0, 0) rotate(0deg); }
}
/* Item Positioning & Layering (z-index) */
.item-1 { top: 12%; left: 16%; animation: driftA 18s infinite ease-in-out; z-index: 2; }
.item-2 { top: 22%; left: 48%; animation: driftB 22s infinite ease-in-out; z-index: 5; }
.item-3 { top: 58%; left: 14%; animation: driftC 20s infinite ease-in-out; z-index: 1; }
.item-4 { top: 18%; left: 70%; animation: driftA 24s infinite ease-in-out; z-index: 4; }
.item-5 { top: 54%; left: 44%; animation: driftB 19s infinite ease-in-out; z-index: 3; }
.item-6 { top: 62%; left: 68%; animation: driftC 21s infinite ease-in-out; z-index: 6; }
/* Mobile Responsive Adjustment */
@media (max-width: 768px) {
.float-item img { width: 220px; }
.site-header { top: 24px; left: 24px; }
}
