.home header,
.home footer.site-footer,
.home #masthead,
.home #colophon,
.home .site-header,
.home .site-footer,
.home nav.navbar {
display: none !important;
}
/* Remove default page padding/margin */
.home .site-main,
.home main,
.home .entry-content,
.home .page-content,
.home article,
.home .wp-block-group {
margin: 0 !important;
padding: 0 !important;
max-width: 100% !important;
}
.home body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* ── Main wrapper ── */
.otf-wrap {
background: #f1ec98;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 3rem;
font-family: ‘DM Sans’, sans-serif;
box-sizing: border-box;
}
/* ── Hero section ── */
.otf-hero {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
/* ── Logo ── */
.otf-logo {
margin-bottom: 3.5rem;
}
.otf-logo-img {
height: 80px;
width: auto;
display: block;
}
.otf-logo-text {
font-family: ‘Space Mono’, monospace;
font-size: clamp(42px, 7vw, 100px);
font-weight: 700;
color: #092286;
line-height: 1;
letter-spacing: -0.03em;
}
.otf-logo-text sup {
font-size: 0.28em;
vertical-align: super;
}
/* ── Services label ── */
.otf-services-label {
font-family: ‘DM Sans’, sans-serif;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #092286;
opacity: 0.45;
margin-bottom: 1.2rem;
}
/* ── Services list ── */
.otf-services-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.otf-service-item {
font-family: ‘Space Mono’, monospace;
font-size: clamp(22px, 3.8vw, 52px);
font-weight: 400;
color: #092286;
line-height: 1.15;
letter-spacing: -0.02em;
border-top: 1px solid rgba(9, 34, 134, 0.15);
padding: 0.55rem 0;
position: relative;
overflow: hidden;
display: flex;
justify-content: space-between;
align-items: center;
transition: color 0.35s;
cursor: default;
}
.otf-service-item:last-child {
border-bottom: 1px solid rgba(9, 34, 134, 0.15);
}
.otf-num {
font-size: 11px;
letter-spacing: 0.1em;
opacity: 0.35;
font-family: ‘DM Sans’, sans-serif;
transition: color 0.35s, opacity 0.35s;
}
.otf-service-item::after {
content: ”;
position: absolute;
left: -100%;
top: 0;
width: 100%;
height: 100%;
background: #092286;
transition: left 0.4s cubic-bezier(0.77, 0, 0.175, 1);
z-index: 0;
}
.otf-service-item span,
.otf-service-item .otf-num {
position: relative;
z-index: 1;
}
.otf-service-item:hover {
color: #f1ec98;
}
.otf-service-item:hover::after {
left: 0;
}
.otf-service-item:hover .otf-num {
color: #f1ec98;
opacity: 0.6;
}
/* ── Footer ── */
.otf-footer {
padding-top: 3rem;
display: flex;
justify-content: center;
gap: 2rem;
align-items: center;
}
.otf-footer a {
color: #092286;
opacity: 0.5;
text-decoration: none;
transition: opacity 0.2s;
display: flex;
align-items: center;
}
.otf-footer a:hover {
opacity: 1;
}
.otf-footer a i {
font-size: 22px;
}
/* ── Fade-in animations ── */
.otf-logo,
.otf-services-label,
.otf-service-item,
.otf-footer {
opacity: 0;
animation: otfFadeUp 0.6s forwards;
}
.otf-logo { animation-delay: 0.1s; }
.otf-services-label { animation-delay: 0.25s; }
.otf-service-item:nth-child(1) { animation-delay: 0.32s; }
.otf-service-item:nth-child(2) { animation-delay: 0.38s; }
.otf-service-item:nth-child(3) { animation-delay: 0.44s; }
.otf-service-item:nth-child(4) { animation-delay: 0.50s; }
.otf-service-item:nth-child(5) { animation-delay: 0.56s; }
.otf-service-item:nth-child(6) { animation-delay: 0.62s; }
.otf-footer { animation-delay: 0.7s; }
@keyframes otfFadeUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Mobile ── */
@media (max-width: 600px) {
.otf-wrap {
padding: 2rem 1.5rem;
}
.otf-logo-img {
height: 50px;
}
}
