/* Redesign option A — portrait as the full-page background. Loaded AFTER main.css and contains overrides ONLY. Nothing in the original template (main.css / the assets/sass sources) is modified, so this design reverts completely by deleting this file and its tag. */ /* 1. The portrait becomes the background plate. Positioned at 15% from the top so the face lands in the upper half of the viewport rather than behind the name and nav. */ #bg:after { background-image: url("../../images/hero-portrait.webp"); background-position: center center; background-size: cover; /* The template zooms the backdrop to 1.125. With the full-resolution 3:2 original that zoom clipped the crown and threw away the headroom the crop deliberately kept, so pin it to 1 and let the whole plate show. */ -moz-transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } body.is-article-visible #bg:after { -moz-transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /* 2. Legibility scrim. Near-clear across the top so the face reads at full strength, deepening through the middle so the white name/nav type keeps a comfortable contrast ratio over the shirt and shoulders. */ #bg:before { background-image: linear-gradient(to bottom, rgba(12, 14, 17, 0.1) 0%, rgba(12, 14, 17, 0.08) 34%, rgba(12, 14, 17, 0.58) 62%, rgba(12, 14, 17, 0.9) 100%), url("../../images/overlay.png"); background-size: cover, 256px 256px; background-position: center, center; background-repeat: no-repeat, repeat; } /* 3. Move the name + nav down into the lower third, clear of the face. The template's own radial shadow behind #header stays, which keeps the type anchored without a hard-edged box. */ #header { padding-top: 50vh; } /* 4. Once an article is open the template already blurs and dims the background; deepen the scrim a little more so long-form text on the panel stays comfortable to read over a face. */ body.is-article-visible #bg:before { background-image: linear-gradient(to bottom, rgba(12, 14, 17, 0.62) 0%, rgba(12, 14, 17, 0.72) 100%), url("../../images/overlay.png"); } /* 5. Narrow screens: a square source at `cover` crops hard horizontally, so pull the focal point up and reduce the offset to keep the face in frame. */ @media screen and (max-width: 736px) { /* A phone viewport is roughly 1:2. `cover` on the 16:9 plate therefore keeps only its middle ~26% of width, which blew the face up to fill the screen and dropped the name across his mouth. Serve a dedicated 9:16 plate instead: the photo occupies the top 60% and each column then continues down into near-black, so the name and nav sit on a clean field with no seam and his whole head and shoulders stay in frame. */ #bg:after { background-image: url("../../images/hero-portrait-tall.webp"); background-position: top center; } #header { padding-top: 48vh; } } @media screen and (max-width: 480px) { /* SE-class screens (375x667) cannot fit a large portrait AND all five nav items inside 100vh. Reclaim the template's 4rem wrapper gutter — worth ~64px — and sit the name lower on the shirt rather than pushing "Contact" below the fold. */ #wrapper { padding: 2rem 1.5rem; } #header { padding-top: 32vh; } } /* 7. Short landscape — a rotated phone is roughly 2.16:1 and only ~390px tall. Two separate things broke there: `cover` on the 16:9 plate filled the width and cropped the CROWN OFF, and the 50vh header offset pushed the nav clean off the bottom edge. At that height a face cannot be stacked above a name, so the layout goes side-by-side instead: a 21:9 plate (whole face intact, biased left) with the name and nav moved into the right half over a left-to-right scrim. */ @media screen and (orientation: landscape) and (max-height: 560px) { #bg:after { background-image: url("../../images/hero-portrait-wide.webp"); background-position: left center; } /* The plate already fades to near-black on its right, so the scrim only needs a light, even touch here. */ #bg:before { background-image: linear-gradient(to right, rgba(12, 14, 17, 0.1) 0%, rgba(12, 14, 17, 0.16) 55%, rgba(12, 14, 17, 0.3) 100%), url("../../images/overlay.png"); } #wrapper { padding: 1.25rem 1.75rem; } #header { -ms-flex-item-align: end; align-self: flex-end; width: 56%; max-width: 32rem; padding-top: 3vh; } /* The horizontal nav has a 7.5rem min-width per item — 5 items = 600px minimum, which overflowed the right-hand column, spilling back across the face and clipping "Contact" off the right edge. Compact it so the whole row fits inside the column. */ #header nav ul li a { min-width: 0; padding: 0 0.7rem; line-height: 2.1rem; letter-spacing: 0.1rem; font-size: 0.6rem; } } /* 8. Slow Ken Burns drift. A 48s ease-in-out alternate cycle is slow enough to read as the page breathing rather than as motion — you notice it only if you sit still. Deliberately gated three ways: - prefers-reduced-motion : respect the OS accessibility setting - min-width 737px : phones skip it (a fixed animated backdrop composites every frame = battery) - min-height 561px : short landscape skips it, because the extra 5.5% zoom would re-crop the face that rule 7 exists to protect This supersedes the base scale(1); the article-open blur is a `filter`, so it still applies independently. */ @media screen and (prefers-reduced-motion: no-preference) and (min-width: 737px) and (min-height: 561px) { @-webkit-keyframes heroDrift { from { -webkit-transform: scale(1) translate3d(0, 0, 0); } to { -webkit-transform: scale(1.055) translate3d(-1.1%, -0.7%, 0); } } @keyframes heroDrift { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.055) translate3d(-1.1%, -0.7%, 0); } } #bg:after { -webkit-animation: heroDrift 48s ease-in-out infinite alternate; animation: heroDrift 48s ease-in-out infinite alternate; will-change: transform; } }