" heading above the gallery. Matches the default heading style (Flavium 20px); uppercased and centered per the design. */ .single-project__title { margin: 16px 0 24px; text-align: center; text-transform: uppercase; font-family: var(--font-flavium-serif); font-size: 20px; font-weight: normal; letter-spacing: 1.2px; }

/* Theme Name: Richard Keith Langham Theme URI: https://blogcto.com/projects/richard-keith-langham Author: Richard Seabrook (BlogCTO) Author URI: https://blogcto.com Description: A custom-built theme for Richard Keith Langham Requires at least: 6.1 Tested up to: 6.2 Requires PHP: 5.6 Version: 1.0 Text Domain: richard_keith_langham */ /*---------------------------------------------------------------------------- Fonts ----------------------------------------------------------------------------*/ @font-face { font-family: 'Cormorant Garamond'; font-weight: 300; src: url('assets/fonts/cormorant-garamond-light.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-weight: 300; font-style: italic; src: url('assets/fonts/cormorant-garamond-light-italic.woff2') format('woff2'); } @font-face { font-family: 'Engravers Gothic'; src: url('assets/fonts/engravers-gothic-regular.woff2') format('woff2'); } @font-face { font-family: 'Flavium Serif'; src: url('assets/fonts/flavium-serif-regular.woff2') format('woff2'); } /* TODO: Add theme fonts here */ @font-face { font-family: 'gadabout-icons'; src: url('assets/fonts/gadabout-icons.woff2?73546164') format('woff2'); } /*---------------------------------------------------------------------------- Variables ----------------------------------------------------------------------------*/ :root { --font-cormorant-garamond: 'Cormorant Garamond'; --font-engravers-gothic: 'Engravers Gothic'; --font-flavium-serif: 'Flavium Serif'; /* TODO: Add theme font variables here */ --font-icons: 'gadabout-icons'; --theme-color-off-white: #FFFBF5; --theme-color-cream: #FAF7EF; --theme-color-brown: #4B4530; --theme-color-forest-green: #4D5539; /* TODO: Add theme colors here */ } /*---------------------------------------------------------------------------- General ----------------------------------------------------------------------------*/ body { /* Grayscale antialiasing for the site chrome and display type. Cormorant body copy opts back out below — see the .entry-content rule. macOS only: both properties are no-ops on Windows/Linux/Android. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: var(--theme-color-cream); color: var(--theme-color-brown); } /* Cormorant Garamond is a Light (300) face — grayscale antialiasing thins it out until it looks washed at reading sizes, so the body copy takes the browser's default subpixel rendering instead. Covers the default paragraph (which theme.json sets in Cormorant) plus the two Cormorant block styles; paragraphs in Flavium or Engravers keep the inherited antialiasing. `auto` is load-bearing: font-smoothing INHERITS, so `unset`/`revert` would compute to `inherit` and pull `antialiased` straight back down from . */ .entry-content p:not([class*="is-style-"]), .entry-content p.is-style-cormorant-garamond-12, .entry-content p.is-style-cormorant-garamond-16 { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } body.active { overflow: hidden; } .aligncenter { margin-left: auto; margin-right: auto; } /* Content links: no underline, fade on hover. Deliberately lives in style.css (front end only) rather than blocks.css (both contexts) so the editor keeps core's default underline — that's what shows the client which text is linked. The `.entry-content` wrapper doesn't exist in the editor canvas either, so this is front-end-only twice over. */ .entry-content a { text-decoration: none; transition: opacity 0.3s ease; } .entry-content a:hover, .entry-content a:focus-visible { opacity: 0.65; } /*---------------------------------------------------------------------------- Animations ----------------------------------------------------------------------------*/ .page-transition-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; visibility: hidden; background: var(--theme-color-cream); } .page-transition-overlay__inner { pointer-events: none; } /*---------------------------------------------------------------------------- Template Parts ----------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------- Header ----------------------------------------------------------------------------*/ .header { position: relative; z-index: 10; } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 24px; } .header__wordmark { display: block; width: 100%; max-width: 550px; min-width: 0; /* allow it to shrink below the SVG's intrinsic width */ color: inherit; } .header__wordmark svg { display: block; width: 100%; height: auto; } .header__nav { display: none; flex: 0 0 auto; /* take the space the menu needs; never shrink */ } .header__menu { display: flex; flex-wrap: nowrap; align-items: center; gap: 32px; margin: 0; padding: 0; list-style: none; font-family: var(--font-flavium-serif); font-size: 16px; letter-spacing: 1.2px; text-transform: uppercase; } .header__menu a { color: inherit; text-decoration: none; white-space: nowrap; transition: opacity 0.3s ease; } .header__menu a:hover { opacity: 0.65; } .header__toggler { display: flex; flex-direction: column; justify-content: center; gap: 6px; flex: none; padding: 6px 0; background: none; border: 0; cursor: pointer; color: inherit; } .header__toggler span { display: block; width: 28px; height: 1px; background-color: currentColor; transition: transform 0.3s ease; } .header__toggler.active span:first-child { transform: translateY(3.5px) rotate(45deg); } .header__toggler.active span:last-child { transform: translateY(-3.5px) rotate(-45deg); } @media screen and (min-width: 992px) { .header__inner { padding: 40px 48px; } .header__nav { display: block; } .header__toggler { display: none; } } /*---------------------------------------------------------------------------- Drawer ----------------------------------------------------------------------------*/ .drawer { position: fixed; inset: 0; z-index: 1000; overflow-y: auto; background-color: var(--theme-color-forest-green); color: var(--theme-color-off-white); /* Entrance cascade (see .drawer__wordmark / .drawer__menu a): base delay before the first element moves, and the fallback stagger index. Links get their real index inline from richard_keith_langham_drawer_animation_index(); the wordmark keeps this inherited 1, so it always leads. */ --drawer-animation-speed: 0.2s; --menu-drawer-animation-index: 1; } .drawer__close { position: fixed; top: 24px; right: 24px; z-index: 2; display: flex; padding: 6px; background: none; border: 0; cursor: pointer; color: inherit; transition: opacity 0.3s ease; } .drawer__close:hover { opacity: 0.65; } .drawer__close svg { display: block; } .drawer__inner { display: flex; flex-direction: column; min-height: 100%; padding: 96px 32px 48px; text-align: left; } .drawer__wordmark { display: block; max-width: 100%; /* Vertical padding enlarges the tap target on this link. The bottom padding is subtracted from the margin (48 - 12) so the gap to the menu below is unchanged at 48px. */ padding: 12px 0; margin-bottom: 36px; color: inherit; } .drawer__wordmark svg { display: block; width: 100%; height: auto; } .drawer__menu { display: flex; flex-direction: column; gap: 48px; margin: 0; padding: 0; list-style: none; font-family: var(--font-flavium-serif); font-size: 15px; letter-spacing: 1.2px; text-transform: uppercase; } .drawer__menu a { /* inline-block so the entrance transform applies — transforms are ignored on inline boxes. Keeps the hit area to the text, as before. */ display: inline-block; color: inherit; text-decoration: none; transition: opacity 0.3s ease; } .drawer__menu a:hover { opacity: 0.65; } /* Entrance cascade: each element fades in while sliding 8px to the right, one 0.1s behind the last. The wordmark inherits index 1 from .drawer; each link carries its own inline (2, 3, 4...), so the delay grows down the list. Replays on every open: the drawer is display:none while closed, which cancels these animations and restarts them when jQuery reveals it. fill-mode is `backwards`, not `forwards`, on purpose. Backwards holds the opening keyframe through the delay (no flash of un-animated text) but stops applying once the animation ends, letting the element fall back to its normal style. A forwards fill would keep asserting opacity: 1 and beat the :hover rule above, since animations outrank normal declarations. */ .drawer__wordmark, .drawer__menu a { animation: drawerItemFadeIn 0.5s ease backwards; animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s); } @keyframes drawerItemFadeIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } /*---------------------------------------------------------------------------- Footer ----------------------------------------------------------------------------*/ .footer__inner { display: flex; align-items: center; padding: 32px 28px; } .footer__wordmark { display: none; /* hidden on mobile; shown on desktop */ } .footer__credits { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: 24px; margin: 0; } .footer__copyright { font-family: var(--font-flavium-serif); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; } .footer__site-credits { font-family: var(--font-flavium-serif); font-size: 8px; letter-spacing: 1.2px; text-transform: uppercase; color: inherit; text-decoration: none; white-space: nowrap; transition: opacity 0.3s ease; } .footer__site-credits:hover { opacity: 0.65; } @media screen and (min-width: 992px) { .footer { margin-top: 100px; } /* No top margin on the front page — the slideshow runs full-bleed to the footer. */ .home .footer { margin-top: 0; } .footer__inner { gap: 32px; padding: 40px 48px; } .footer__wordmark { display: block; flex: 1 1 0; color: inherit; } .footer__wordmark svg { display: block; width: 100%; max-width: 300px; height: auto; } .footer__credits { flex: 1 1 0; justify-content: flex-end; gap: 28px; } } /* The Green Background page-template color flip lives in blocks.css so a single definition covers both the front end and the editor (that file is enqueued in both). Front-end chrome that should recolor with it — header/footer wordmark, menu, toggler — uses `color: inherit` (see the Header/Footer sections), so it follows the body color automatically; no green-specific rules needed here. */ /*---------------------------------------------------------------------------- Slideshow (front page) ----------------------------------------------------------------------------*/ .slideshow__slide { height: 100vh; /* svh (not dvh) so the height stays fixed as mobile browser chrome expands and collapses on scroll — dvh tracks the chrome and made the slide zoom. */ height: 100svh; } .slideshow__slide img { display: block; width: 100%; height: 100%; object-fit: cover; } /*---------------------------------------------------------------------------- Floating header (front page + ACF-opted pages) ----------------------------------------------------------------------------*/ /* Header overlays the hero (slideshow) instead of sitting above it. */ .floating-header .header { position: absolute; top: 0; left: 0; width: 100%; } /* Dark scrim between the hero and the header so the white chrome stays legible over a light photo. Sits above the image (z-index auto) but below the header (z-index 10). */ .floating-header #page { position: relative; } .floating-header #page::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 400px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)); z-index: 5; pointer-events: none; } /* Recolor the chrome white over the hero. */ .floating-header .header__wordmark, .floating-header .header__menu a, .floating-header .header__toggler { color: var(--theme-color-off-white); } /* The default nav hover fades to 65%, which looks muddy against the hero — keep the links fully off-white instead. */ .floating-header .header__menu a:hover { opacity: 1; } /*---------------------------------------------------------------------------- Loading screen (front page, first load only) ----------------------------------------------------------------------------*/ /* Forest-green full-viewport cover shown on the initial homepage load. The off-white wordmark fades in, then the whole screen fades out, revealing the slideshow. Pure CSS keyframes; scripts.js removes the node once it has faded out. Sits outside the Barba container so it only appears on the first server render, not on subsequent in-site navigations. */ .loading-screen { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 0 32px; background-color: var(--theme-color-forest-green); color: var(--theme-color-off-white); animation: loadingScreenFadeOut 1.5s ease 2.5s forwards; } .loading-screen__icon { width: min(80vw, 520px); opacity: 0; animation: loadingIconFadeIn 1.5s ease 0.5s forwards; } .loading-screen__icon svg { display: block; width: 100%; height: auto; } @keyframes loadingIconFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes loadingScreenFadeOut { from { opacity: 1; } to { opacity: 0; visibility: hidden; pointer-events: none; } } /* Header entrance, initial front-page load only. The loading screen covers the header while opaque, so without this the header would be revealed mid-fade as the screen dissolves. Hidden from first paint via the sibling selector — .loading-screen is server-rendered only on the first front-page render, so Barba navigations back to the homepage never match it and the header shows normally. scripts.js then adds .header--intro once the screen has finished fading; that class carries its own opacity: 0, so the fade survives the loading-screen node being removed in the same tick. The fade starts immediately on that event — no delay. */ .loading-screen ~ #page .header { opacity: 0; } .header--intro { opacity: 0; animation: headerFadeIn 1s ease forwards; } @keyframes headerFadeIn { from { opacity: 0; } to { opacity: 1; } } /*---------------------------------------------------------------------------- Single project (detail page) ----------------------------------------------------------------------------*/ /* "PROJECT: " heading above the gallery. Matches the default heading style (Flavium 20px); uppercased and centered per the design. */ .single-project__title { margin: 16px 0 24px; text-align: center; text-transform: uppercase; font-family: var(--font-flavium-serif); font-size: 20px; font-weight: normal; letter-spacing: 1.2px; }