/* ==========================================================================
Kathryn Ferreira landing page | Mixfolio theme, WordPress.com
Paste the whole file into Appearance -> Additional CSS.
Every rule is scoped to body.home (the static front page).
Old posts and pages are untouched.
Editor setup this CSS expects:
- Landscape Cover block -> Additional CSS class: landing-landscape
- Portrait Cover block -> Additional CSS class: landing-portrait
- Custom HTML block below the Covers (full snippet in section 6):
![]()
ferreira.png
![]()
tagline.png
![]()
kat.png
![]()
kathy.png
![]()
kathryn.png
![]()
is hidden
because Mixfolio caps it at 637px; section 5 paints the full file.
-------------------------------------------------------------------------- */
body.home .wp-block-cover {
min-height: 100vh !important;
min-height: 100dvh !important;
height: 100vh;
height: 100dvh;
margin: 0 !important;
padding: 0 !important;
}
body.home .wp-block-cover img.wp-block-cover__image-background {
display: none !important;
}
/* --------------------------------------------------------------------------
4. Which photo shows.
Landscape by default; portrait once the window is taller than wide.
The fraction is the switch point (width divided by height):
1/1 = switch at square (same as orientation: portrait)
9/8 = switch slightly before square
4/3 = switch at iPad-landscape shape
-------------------------------------------------------------------------- */
body.home .landing-portrait {
display: none !important;
}
@media (max-aspect-ratio: 1/1) {
body.home .landing-landscape { display: none !important; }
body.home .landing-portrait { display: flex !important; }
}
/* --------------------------------------------------------------------------
5. The photos at full resolution, with framing.
URLs assume racoon-landscape.jpg and racoon-portrait.jpg are uploaded in
September 2026 with no rename. Check them against the Media Library.
The two numbers after the URL set the crop:
first = left/right 0% keeps the left edge, 100% the right
second = up/down 0% keeps the top, 100% the bottom
Stay between 0% and 100%. Larger values push the photo out of view.
-------------------------------------------------------------------------- */
body.home .landing-landscape {
background: #000 url("https://i0.wp.com/kathrynferreira.com/wp-content/uploads/2026/09/racoon-landscape.jpg?w=2560&ssl=1")
50% 100% / cover no-repeat !important;
}
body.home .landing-portrait {
background: #000 url("https://i0.wp.com/kathrynferreira.com/wp-content/uploads/2026/09/racoon-portrait.jpg?w=1440&ssl=1")
60% 100% / cover no-repeat !important; /* 60%: favour the right side on narrow phones */
}
/* --------------------------------------------------------------------------
6. Text lockup: five trimmed layers, positioned by CSS.
Desktop and portrait each get their own layout, measured from the
two original designs. All positions are percentages of the lockup box.
Cycle: Kat -> Kathy -> Kathryn, about four seconds each.
Custom HTML block:
-------------------------------------------------------------------------- */
/* The box: where the whole lockup sits on screen (desktop values) */
body.home .landing-text {
position: fixed;
z-index: 5;
pointer-events: none;
left: 14vw;
bottom: 10dvh;
width: 76vw;
max-width: 1700px;
}
/* Gives the box its height in proportion to its width (2057 x 545 design) */
body.home .landing-text .lockup {
position: relative;
height: 0;
padding-bottom: 26.49%;
}
body.home .landing-text img {
position: absolute;
display: block;
height: auto !important;
max-width: none !important;
margin: 0 !important;
}
/* Desktop layout. All three names start at left 0 so the K stays put. */
body.home .landing-text .ferreira { left: 26.45%; top: 41.83%; width: 52.16%; }
body.home .landing-text .tagline { left: 59.31%; top: 94.14%; width: 40.98%; }
body.home .landing-text .name-1 { left: 0; top: 0; width: 23.04%; }
body.home .landing-text .name-2 { left: 0; top: 0; width: 38.21%; }
body.home .landing-text .name-3 { left: 0; top: 0; width: 52.41%; }
/* The cycle */
body.home .landing-text .name-1,
body.home .landing-text .name-2,
body.home .landing-text .name-3 {
opacity: 0;
animation: nameCycle 12s ease-in-out infinite;
}
body.home .landing-text .name-2 { animation-delay: 4s; }
body.home .landing-text .name-3 { animation-delay: 8s; }
/* To change the speed, edit 12s above and keep the delays at
one third and two thirds of it. */
@keyframes nameCycle {
0% { opacity: 0; }
6% { opacity: 1; } /* fade in, about 0.7 s */
30% { opacity: 1; } /* hold */
36% { opacity: 0; } /* fade out, overlapping the next fade in */
100% { opacity: 0; }
}
/* Portrait layout (1263 x 582 design): looser line gap, tagline centred and larger */
@media (max-aspect-ratio: 1/1) {
body.home .landing-text {
left: 50%;
transform: translateX(-50%);
bottom: 12dvh;
width: 88vw;
max-width: none;
}
body.home .landing-text .lockup { padding-bottom: 46.13%; }
body.home .landing-text .ferreira { left: 27.72%; top: 37.60%; width: 72.28%; }
body.home .landing-text .tagline { left: 13.87%; top: 93.78%; width: 75.67%; }
body.home .landing-text .name-1 { left: 0; width: 31.93%; }
body.home .landing-text .name-2 { left: 0; width: 52.95%; }
body.home .landing-text .name-3 { left: 0; width: 72.62%; }
}
/* The cycle runs regardless of the device's reduce-motion setting. To honour
that setting instead (Kathryn shown static), restore this block:
@media (prefers-reduced-motion: reduce) {
body.home .landing-text .name-1,
body.home .landing-text .name-2,
body.home .landing-text .name-3 { animation: none; }
body.home .landing-text .name-3 { opacity: 1; }
} */