/* Theme Name: Hemmo 2026 Theme URI: https://hemmodevries.nl Author: Hemmo de Vries Author URI: https://hemmodevries.nl Description: A cheerful, wavy weblog theme for stories, photos, audio and video. Every post gets its own (stable-random) color, every media type its own look — and straight lines are optional. Based on the "weblog-layout" concept. Version: 1.0.0 Requires at least: 6.2 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: hemmo-2026 Tags: blog, one-column, custom-colors, custom-menu, featured-images, post-formats, translation-ready */ /* ========================================================= 1. TOKENS Base carried over from weblog-layout.html; extended with organic shapes. Components read variables; dark "scenes" (audio/video) remap them at the level. ========================================================= */ :root{ --bg: #FFFDF7; --paper: #FFFFFF; --ink: #26201B; --ink-soft: #6F6258; --line: #EFE6DA; /* Media-type identity (from the concept) */ --audio: #F26A1F; --video: #E5399B; --photo: #0FA3B1; --yellow: #FFC53D; --yellow-deep: #DE9B00; /* Per-post accent — overridden by PHP for each post */ --accent: var(--audio); --accent-soft: color-mix(in oklab, var(--accent) 13%, var(--paper)); --accent-cloud: color-mix(in oklab, var(--accent) 8%, var(--bg)); --accent-text: color-mix(in oklab, var(--accent) 80%, var(--ink)); --accent-line: color-mix(in oklab, var(--accent) 45%, var(--line)); --tilt: 0deg; --shadow: 0 10px 30px rgba(38,32,27,.08); --shadow-heavy: 0 18px 50px rgba(38,32,27,.14); --font-display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif; --font-body: "Instrument Sans", system-ui, "Segoe UI", sans-serif; /* Fixed border radius */ --blob-1: 16px; --blob-2: 16px; --blob-3: 16px; --blob-4: 16px; --pebble: 16px; --pebble-small: 12px; /* Photo border radius */ --photo-radius: 16px; --squiggle-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cpath d='M0 6q5-6 10 0t10 0t10 0t10 0' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); --level: 0; /* audio-volume pulse 0..1, set by JS */ } /* Dark scenes: audio = warm dusky dark, video = cinema. All components follow automatically because they read variables. */ body.single-format-audio, body.single-format-video{ --bg: color-mix(in oklab, var(--accent) 13%, #17100A); --paper: color-mix(in oklab, var(--accent) 9%, #231910); --ink: #FFF7EA; --ink-soft: #CDBBA7; --line: color-mix(in oklab, var(--accent) 22%, #372A1E); --shadow: 0 10px 34px rgba(0,0,0,.45); --shadow-heavy: 0 22px 60px rgba(0,0,0,.55); --accent-text: color-mix(in oklab, var(--accent) 62%, var(--ink)); } body.single-format-video{ --bg: color-mix(in oklab, var(--accent) 7%, #120D0F); --paper: color-mix(in oklab, var(--accent) 6%, #1D1518); } /* Gallery scene: photo posts get their own neutral "gallery wall" — a soft, tinted grey backdrop that makes prints pop — darkened to a dim gallery/darkroom instead of the site's usual warm cream, same neutral-grey hue as the light version, just at the dark end. */ body.single-format-image, body.single-format-gallery{ --bg: color-mix(in oklab, var(--accent) 10%, #1C1B19); --paper: color-mix(in oklab, var(--accent) 7%, #262421); --ink: #F3F1EC; --ink-soft: #B9B4AC; --line: color-mix(in oklab, var(--accent) 20%, #3A3733); --shadow: 0 10px 32px rgba(0,0,0,.4); --shadow-heavy: 0 20px 56px rgba(0,0,0,.5); --accent-text: color-mix(in oklab, var(--accent) 65%, var(--ink)); } /* ========================================================= 2. BASIS ========================================================= */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.65; overflow-x: hidden; transition: background-color .4s ease; } img{ max-width: 100%; height: auto; display: block; } a{ color: inherit; text-decoration: none; } p a, li a:not([class]), .prose a{ text-decoration: underline wavy var(--accent) 1.5px; text-underline-offset: 4px; } p a:hover, .prose a:hover{ color: var(--accent); } :focus-visible{ outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 6px; } ::selection{ background: var(--yellow); color: var(--ink); } body.single-format-audio ::selection, body.single-format-video ::selection{ background: var(--accent); color: #fff; } h1,h2,h3,h4,h5,h6{ font-family: var(--font-display); line-height: 1.12; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } mark{ background: linear-gradient(transparent 60%, var(--yellow) 60%, var(--yellow) 92%, transparent 92%); color: inherit; padding: 0 .08em; } .wrap{ max-width: 1180px; margin: 0 auto; padding: 0 24px; } .wrap--narrow{ max-width: 760px; } .screen-reader-text{ position: absolute !important; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; word-wrap: normal !important; } .skip-link{ position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 18px; border-radius: var(--pebble-small); font-weight: 600; transition: top .2s ease; } .skip-link:focus{ top: 12px; } /* ========================================================= 3. TOOLKIT: squiggles, waves, stickers, badges, buttons ========================================================= */ .squiggle{ height: 10px; border: 0; margin: 0; background: var(--accent); -webkit-mask: var(--squiggle-mask) repeat-x left center / 40px 12px; mask: var(--squiggle-mask) repeat-x left center / 40px 12px; } .squiggle--rainbow{ background: linear-gradient(90deg, var(--audio) 0 25%, var(--yellow) 25% 50%, var(--video) 50% 75%, var(--photo) 75% 100%); } .squiggle--short{ width: 110px; } .squiggle--center{ margin-inline: auto; } .squiggle-strip{ height: 9px; background: linear-gradient(90deg, var(--audio) 0 25%, var(--yellow) 25% 50%, var(--video) 50% 75%, var(--photo) 75% 100%); -webkit-mask: var(--squiggle-mask) repeat-x left center / 34px 10px; mask: var(--squiggle-mask) repeat-x left center / 34px 10px; } .wave{ display: block; width: 100%; height: 26px; color: var(--paper); } .wave svg{ display: block; width: 100%; height: 100%; } .badge{ display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 5px 13px; border-radius: var(--blob-2); background: var(--accent-soft); color: var(--accent-text); width: max-content; transform: rotate(-1.2deg); } .badge svg{ width: 14px; height: 14px; flex: 0 0 auto; } .sticker{ display: inline-block; background: var(--paper); color: var(--accent-text); font-size: 12.5px; font-weight: 700; padding: 4px 11px; border-radius: var(--blob-3); box-shadow: 0 3px 10px rgba(38,32,27,.16); transform: rotate(2deg); } .sticker--yellow{ background: var(--yellow); color: #5C4300; } .sticker--dark{ background: rgba(20,14,8,.72); color: #fff; } .btn{ display: inline-flex; align-items: center; gap: 9px; font: inherit; font-weight: 700; font-size: 15px; background: var(--accent); color: #fff; border: 0; cursor: pointer; padding: 12px 24px; border-radius: var(--blob-1); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); transition: transform .2s ease, background .2s ease; } .btn:hover, .btn:focus-visible{ transform: rotate(-1deg) scale(1.03); } .meta{ display: flex; align-items: center; gap: 11px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-soft); } .meta strong{ color: var(--ink); } .avatar, .meta img.avatar{ width: 34px; height: 34px; border-radius: var(--blob-1); background: linear-gradient(135deg, var(--photo), var(--yellow)); border: 2px solid var(--paper); box-shadow: 0 0 0 1.5px var(--line); object-fit: cover; } @keyframes float-bob{ 0%,100%{ transform: translateY(0) rotate(var(--tilt, 0deg)); } 50% { transform: translateY(-9px) rotate(var(--tilt, 0deg)); } } /* ========================================================= 4. HEADER ========================================================= */ .site-header{ position: relative; z-index: 10; background: var(--paper); filter: drop-shadow(0 4px 14px rgba(38,32,27,.07)); } .header-inner{ display: flex; align-items: center; justify-content: space-between; gap: 18px 26px; flex-wrap: wrap; padding: 14px 0; } .header-wave{ position: absolute; top: 100%; left: 0; right: 0; height: 18px; color: var(--paper); pointer-events: none; } .header-wave svg{ display: block; width: 100%; height: 100%; } .logo{ display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 800; font-size: 25px; letter-spacing: -0.02em; color: var(--ink); } .logo-sub{ font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink-soft); display: block; margin-top: -3px; } .main-nav ul{ display: flex; gap: 4px 22px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .main-nav a{ display: inline-block; font-weight: 600; font-size: 15px; padding: 6px 2px; transform: rotate(0deg); transition: color .15s ease, transform .15s ease; } .main-nav a:hover, .main-nav a:focus-visible{ color: var(--accent-text); transform: rotate(-1.5deg); text-decoration: underline wavy var(--accent) 2px; text-underline-offset: 6px; } .main-nav a.active, .main-nav .current-menu-item > a{ color: var(--accent-text); text-decoration: underline wavy var(--accent) 2px; text-underline-offset: 6px; } .search-form{ display: flex; } .search-field{ border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); border-radius: var(--pebble-small); padding: 8px 15px; font: inherit; font-size: 14px; width: 175px; transform: rotate(-1deg); transition: transform .2s ease, border-color .2s ease, width .25s ease; } .search-field:focus{ transform: rotate(0); border-color: var(--accent); outline: none; width: 210px; } .search-field::placeholder{ color: var(--ink-soft); } /* ========================================================= 5. FOOTER ========================================================= */ .site-footer{ margin-top: 90px; color: var(--ink-soft); font-size: 14.5px; } .footer-wave{ display: block; height: 30px; color: var(--paper); } .footer-wave svg{ display: block; width: 100%; height: 100%; } .footer-plate{ background: var(--paper); padding: 34px 0 40px; } .footer-inner{ display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; flex-wrap: wrap; } .footer-inner .logo{ font-size: 20px; } .footer-blurb{ margin: 10px 0 0; max-width: 320px; } .footer-inner nav ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .footer-inner nav a:hover{ text-decoration: underline wavy var(--accent) 1.5px; text-underline-offset: 4px; } .footer-note{ margin: 0; } .footer-note .heart{ color: var(--video); } /* ========================================================= 6. FRONT PAGE: hero + guide ========================================================= */ .front-hero{ position: relative; padding: 74px 0 40px; text-align: center; } .hero-title{ font-size: clamp(38px, 6.2vw, 74px); font-weight: 800; max-width: 22ch; margin: 0 auto; display: flex; flex-direction: column; } .hero-title-lead{ font-size: clamp(16px, 2.2vw, 24px); font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; } .hero-title-name{ font-size: clamp(38px, 6.2vw, 74px); font-weight: 800; } .hero-intro{ max-width: 52ch; margin: 22px auto 0; font-size: 18.5px; color: var(--ink-soft); } /* The guide: a tour through the four kinds of posts */ .guide{ margin: 34px 0 72px; } .guide-intro{ text-align: center; color: var(--ink-soft); max-width: 46ch; margin: 10px auto 30px; } .guide-grid{ display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } .guide-card{ --accent: var(--yellow-deep); position: relative; flex: 1 1 240px; max-width: 280px; background: var(--paper); border: 1.5px solid var(--accent-line); border-radius: var(--pebble); padding: 26px 24px 22px; box-shadow: var(--shadow); transform: rotate(var(--tilt)); transition: transform .25s ease, box-shadow .25s ease; display: flex; flex-direction: column; gap: 10px; } .guide-card:nth-child(1){ --tilt: -1.1deg; } .guide-card:nth-child(2){ --tilt: .9deg; } .guide-card:nth-child(3){ --tilt: -0.7deg; } .guide-card:nth-child(4){ --tilt: 1.2deg; } .guide-card:hover{ transform: rotate(0) translateY(-6px); } .guide-card.kind-story{ --accent: var(--yellow-deep); } .guide-card.kind-photo{ --accent: var(--photo); } .guide-card.kind-audio{ --accent: var(--audio); } .guide-card.kind-video{ --accent: var(--video); } .guide-card h3{ font-size: 21px; font-weight: 700; padding-top: 12px; border-top: 4px solid var(--accent); } .guide-card p{ margin: 0; color: var(--ink-soft); font-size: 14.5px; flex: 1; } .guide-footer{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; } .guide-footer .view-all{ font-size: 14px; } .guide-card .sticker{ font-size: 12px; } .guide-card > a::after{ content:""; position: absolute; inset: 0; border-radius: inherit; } /* The "this isn't my business site" card between the guide and the post streams. */ .business-card{ margin: 0 0 60px; } .business-card-inner{ display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 760px; margin: 0 auto; text-align: center; background: var(--accent-cloud); border: 1.5px solid var(--line); border-radius: var(--pebble); padding: 28px 32px; } .business-card-logo{ max-height: 80px; width: auto; height: auto; object-fit: contain; } .business-card-logo--placeholder{ display: grid; place-items: center; height: 80px; font-family: var(--font-display); font-weight: 800; font-size: 38px; color: var(--accent-text); } .business-card-text{ margin: 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; } .business-card-link{ font-weight: 700; color: var(--accent-text); text-decoration: underline wavy var(--accent) 1.5px; text-underline-offset: 4px; white-space: nowrap; } @media (max-width: 680px){ .business-card-inner{ padding: 24px 20px; } } .section-head{ display: flex; align-items: baseline; justify-content: center; gap: 16px; margin: 8px 0 26px; } .section-title, .section-head h2{ font-size: clamp(24px, 3vw, 30px); font-weight: 800; } .section-head h2 span, .section-title span{ color: var(--accent-text, var(--audio)); } .view-all{ font-weight: 700; font-size: 14.5px; color: var(--accent-text); white-space: nowrap; } .view-all:hover{ text-decoration: underline wavy currentColor 1.5px; text-underline-offset: 4px; } .section-foot{ display: flex; justify-content: center; margin: 30px 0 10px; } .section-foot + .section-head{ margin-top: 64px; } /* ========================================================= 7. THE STREAM: post grid + cards per kind ========================================================= */ .stream{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 26px; margin-bottom: 60px; align-items: stretch; } .card{ position: relative; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--pebble); box-shadow: 0 5px 16px rgba(38,32,27,.06); overflow: hidden; display: flex; flex-direction: column; transform: none; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .card:hover, .card:focus-within{ transform: translateY(-5px); border-color: var(--accent-line); } .card-body{ padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 11px; flex: 1; } .card-title{ font-size: 20px; font-weight: 650; line-height: 1.2; margin: 0; } .card-title a{ transition: color .15s ease; } .card:hover .card-title a{ color: var(--accent); } .card-text{ margin: 0; color: var(--ink-soft); font-size: 14.5px; flex: 1; } .card .meta{ font-size: 12.5px; position: relative; z-index: 2; } .card .badge{ align-self: flex-start; position: relative; z-index: 2; } .card .pinned-sticker{ position: absolute; top: 14px; right: -6px; z-index: 3; transform: rotate(6deg); } /* Whole-card click target: an invisible stretched link, so the real title link stays available (and singular) for keyboard/AT users. */ .card-cover-link{ position: absolute; inset: 0; z-index: 1; } /* The image sits at the top of every card, with the title directly overlapping it rather than sitting in a separate pill. */ .card-top{ position: relative; margin: 0; } .card-top .card-media{ margin: 0; display: block; } .card-top .card-media img{ width: 100%; object-fit: cover; display: block; border-radius: 0 0 var(--pebble) var(--pebble); } .card-top .card-media--empty{ width: 100%; border-radius: 0 0 var(--pebble) var(--pebble); } .card-top{ position: relative; margin: 0; overflow: hidden; } .card-titlebar{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: linear-gradient(180deg, rgba(20,14,8,0) 0%, rgba(20,14,8,.58) 45%, rgba(20,14,8,.92) 100%); padding: 20px 22px 18px; border-radius: 0 0 var(--pebble) var(--pebble); box-shadow: none; } .card-titlebar .card-title{ margin: 0; position: relative; z-index: 2; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.05; } .card-titlebar .card-title a{ color: #fff; text-shadow: 0 6px 22px rgba(0,0,0,.45); } .card-titlebar .card-date{ display: block; margin-top: 10px; font-size: 0.95rem; color: rgba(255,255,255,0.92); } .card-titlebar .card-date::before{ content: ""; } .card-media{ position: relative; display: block; } .card-media img{ width: 100%; object-fit: cover; border-radius: 0 0 var(--pebble) var(--pebble); } .card-media--empty{ border-radius: 0 0 var(--pebble) var(--pebble); } /* — Story card: paper, ink blot, lots of text — */ .card--story{ border-radius: 26px 34px 24px 36px / 34px 24px 36px 26px; background: radial-gradient(140px 90px at 108% -8%, var(--accent-soft), transparent 70%), var(--paper); } .card--story .card-body{ gap: 12px; } .card--story .card-titlebar .card-title{ font-size: 23px; font-weight: 700; } .card--story .card-text{ font-size: 15px; } .card--story .card-text::first-letter{ font-family: var(--font-display); font-weight: 800; color: var(--accent); font-size: 1.5em; } .card--story .card-squiggle{ height: 8px; margin-top: 2px; width: 90px; opacity: .9; } .card--story .card-media img, .card--story .card-media--empty{ aspect-ratio: 4/3; border-radius: 0 0 var(--pebble) var(--pebble); box-shadow: var(--shadow); } .card--story .card-media--empty{ background: radial-gradient(circle at 25% 25%, rgba(255,255,255,.35), transparent 45%), linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 40%, var(--yellow))); } /* — Photo card: the image is the boss, framed like a little print with a matting border, and a peek of the photos stacked behind it — */ .card--photo{ border-radius: 30px 26px 34px 24px / 26px 34px 24px 34px; } .card--photo .card-top{ padding: 12px 12px 0; background: var(--accent-soft); } .card--photo .card-media{ display: block; } .card--photo .card-media img, .card--photo .card-media--empty{ aspect-ratio: 4/3; border-radius: var(--photo-radius); } .card--photo .card-media--empty{ background: radial-gradient(circle at 25% 25%, rgba(255,255,255,.4), transparent 45%), linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 40%, var(--yellow))); } .card--photo .photo-stack{ position: relative; isolation: isolate; } .card--photo .photo-stack.has-stack::before, .card--photo .photo-stack.has-stack::after{ content: ""; position: absolute; inset: 0; background: var(--paper); border: 1.5px solid var(--accent-line); border-radius: var(--photo-radius); z-index: -1; } .card--photo .photo-stack.has-stack::before{ transform: rotate(-5deg) translate(-6px, 5px); } .card--photo .photo-stack.has-stack::after{ transform: rotate(5deg) translate(7px, -4px); } .card--photo .photo-stack .sticker{ position: absolute; right: 10px; bottom: 10px; z-index: 2; } .card--photo .card-titlebar{ position: relative; z-index: 2; background: none; padding: 14px 4px 12px; border-radius: 0; box-shadow: none; } .card--photo .card-titlebar .card-title{ margin: 0; position: relative; z-index: 2; font-size: clamp(20px, 2vw, 25px); line-height: 1.1; } .card--photo .card-titlebar .card-title a{ color: var(--ink); text-shadow: none; } .card--photo .card-titlebar .card-date{ margin-top: 6px; color: var(--ink-soft); } /* — Audio card: a miniature player, title bar sits on the accent wash — */ .card--audio{ border-radius: 34px 28px 30px 26px / 30px 34px 26px 32px; background: radial-gradient(190px 130px at -10% -14%, var(--accent-soft), transparent 70%), var(--paper); } .card--audio .card-top{ min-height: 64px; } .card--audio .card-player{ margin: 18px 18px 0; position: relative; z-index: 2; } .card--audio .card-body .card-player{ margin: 0; } .card--audio .card-waves{ height: 12px; margin: 14px 22px 0; background: var(--accent); opacity: .28; -webkit-mask: var(--squiggle-mask) repeat-x left center / 26px 12px; mask: var(--squiggle-mask) repeat-x left center / 26px 12px; } /* — Video card: a curved screen — */ .card--video{ border-radius: 28px 28px 30px 30px / 34px 34px 26px 26px; } .card--video .card-media img, .card--video .card-media--empty{ aspect-ratio: 16/11; border-radius: 0 0 var(--pebble) var(--pebble); } .card--video .card-media--empty{ background: radial-gradient(circle at 75% 20%, rgba(255,255,255,.35), transparent 45%), linear-gradient(135deg, color-mix(in oklab, var(--accent) 70%, #3B0B28), var(--accent) 60%, color-mix(in oklab, var(--accent) 45%, #fff)); } .card--video .duration-sticker{ position: absolute; right: 12px; bottom: 12px; z-index: 2; } /* ========================================================= 8. ARCHIVE & PAGINATION ========================================================= */ .archive-head{ padding: 52px 0 8px; text-align: center; } .archive-head .badge{ margin-bottom: 14px; transform: rotate(-2deg); } .archive-title{ font-size: clamp(30px, 4.6vw, 52px); font-weight: 800; } .archive-count{ color: var(--ink-soft); margin: 12px 0 0; } .archive-head .squiggle{ width: 130px; margin: 22px auto 0; } .pagination{ margin: -18px 0 70px; } .pagination .nav-links{ display: flex; justify-content: center; align-items: center; gap: 9px; flex-wrap: wrap; } .pagination .page-numbers{ min-width: 46px; height: 46px; display: inline-grid; place-items: center; padding: 0 14px; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--blob-2); font-weight: 700; font-size: 15px; transition: transform .2s ease, border-radius .3s ease, background .2s ease; } .pagination .page-numbers:nth-child(even){ border-radius: var(--blob-4); transform: rotate(1.5deg); } .pagination .page-numbers:nth-child(odd){ transform: rotate(-1deg); } .pagination a.page-numbers:hover{ background: var(--accent-soft); border-color: var(--accent-line); transform: rotate(0) scale(1.08); } .pagination .page-numbers.current{ background: var(--accent); border-color: var(--accent); color: #fff; } .pagination .page-numbers.dots{ border: 0; background: none; } /* ========================================================= 9. ARTICLE — shared ========================================================= */ .article-head{ padding: 58px 0 34px; text-align: center; position: relative; } .article-head .badge{ margin-bottom: 18px; transform: rotate(-2deg); font-size: 13px; } .article-title{ font-size: clamp(32px, 5vw, 56px); font-weight: 800; max-width: 20ch; margin-inline: auto; } .article-title--overlay{ margin: 0; color: #fff; text-align: left; text-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); } .article-head .meta{ justify-content: center; margin-top: 22px; font-size: 14px; } .article-head .squiggle{ width: 120px; margin: 26px auto 0; } .article-intro{ max-width: 56ch; margin: 18px auto 0; font-size: 19px; color: var(--ink-soft); } .article-hero-image{ position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-bottom: 36px; overflow: hidden; height: min(75vh, 700px); } .article-hero-image img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .article-hero-overlay{ position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 0 0 34px; background: linear-gradient(180deg, rgba(20,14,8,0.08) 0%, rgba(20,14,8,0.48) 60%, rgba(20,14,8,0.74) 100%); } .article-hero-overlay__content{ width: 100%; color: #fff; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .article-hero-overlay__content .badge, .article-hero-overlay__content .meta, .article-hero-overlay__content .meta strong{ color: #fff; } .article-hero-overlay__content .badge{ margin-bottom: 0; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.3); box-shadow: none; } .article-hero-overlay__content .meta{ justify-content: flex-start; margin-top: 0; font-size: 15px; color: rgba(255,255,255,0.92); } .article-hero-overlay__content .meta strong{ color: #fff; } .article-intro--overlay{ margin: 0; max-width: 46ch; color: rgba(255,255,255,0.94); font-size: 18px; text-shadow: 0 4px 18px rgba(0, 0, 0, 0.3); } /* Readable column with text formatting */ .prose{ max-width: 700px; margin: 0 auto; font-size: 18px; line-height: 1.75; } .prose > *{ margin: 0 0 1.35em; } .prose h2, .prose h3, .prose h4{ margin: 1.7em 0 .6em; } .prose h2{ font-size: 30px; } .prose h3{ font-size: 24px; } .prose h2::after{ content: ""; display: block; width: 76px; height: 8px; margin-top: 8px; background: var(--accent); -webkit-mask: var(--squiggle-mask) repeat-x left center / 30px 9px; mask: var(--squiggle-mask) repeat-x left center / 30px 9px; } .prose hr{ border: 0; height: 10px; margin: 2.4em auto; width: 150px; background: var(--accent-line); -webkit-mask: var(--squiggle-mask) repeat-x left center / 34px 10px; mask: var(--squiggle-mask) repeat-x left center / 34px 10px; } .prose blockquote, .prose .wp-block-pullquote { margin: 2.4em 0; padding: 0; background: transparent; border: 0; border-radius: 0; transform: none; font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; } .prose .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; background: transparent; transform: none; } .prose .wp-block-pullquote p { margin: 0; } .prose .wp-block-pullquote cite { display: block; margin-top: 14px; font: 600 14px var(--font-body); color: var(--ink-soft); } .prose img{ display: block; margin-inline: auto; border-radius: var(--photo-radius); box-shadow: var(--shadow); } .prose figure{ margin: 2.2em 0; text-align: center; } .prose figure:nth-of-type(odd){ transform: rotate(-.9deg); } .prose figure:nth-of-type(even){ transform: rotate(.8deg); } .prose figcaption, .prose .wp-caption-text{ text-align: center; font-size: 14px; font-style: italic; color: var(--ink-soft); margin-top: 12px; } .prose .wp-caption{ margin-inline: auto; } .prose .alignwide{ margin-left: -110px; margin-right: -110px; max-width: none; } .prose .alignfull{ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: none; } .prose .alignfull img{ border-radius: 0 0 var(--photo-radius) var(--photo-radius); } /* Explicit alignment (classic-editor images included) overrides the center-by-default rule above. */ .prose .alignleft{ float: left; margin: 6px 26px 14px 0; max-width: 46%; } .prose .alignright{ float: right; margin: 6px 0 14px 26px; max-width: 46%; } .prose .wp-block-gallery, .prose .gallery{ transform: none; } .prose .wp-block-gallery img{ border-radius: var(--photo-radius); } .prose ul, .prose ol{ padding-left: 1.3em; } .prose li{ margin-bottom: .4em; } .prose ul li::marker{ content: "✿ "; color: var(--accent); font-size: .85em; } .prose code{ background: var(--accent-cloud); border-radius: 7px; padding: 2px 7px; font-size: .88em; } .prose pre{ background: var(--ink); color: #FFF3E4; padding: 22px 26px; border-radius: var(--pebble); overflow-x: auto; font-size: 15px; line-height: 1.6; } .prose pre code{ background: none; padding: 0; } .prose .wp-block-embed iframe{ max-width: 100%; } .prose table{ border-collapse: collapse; width: 100%; } .prose td, .prose th{ padding: 10px 14px; border-bottom: 1.5px dashed var(--line); text-align: left; } .prose th{ font-family: var(--font-display); } /* Signature at the bottom of every post */ .signature{ max-width: 700px; margin: 44px auto 0; display: flex; align-items: center; gap: 18px; } .signature .squiggle{ flex: 1; opacity: .6; height: 9px; } .article-footer{ max-width: 700px; margin: 26px auto 0; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .article-footer .tag-ribbon{ font-size: 13px; font-weight: 600; background: var(--paper); border: 1.5px solid var(--line); padding: 5px 13px; border-radius: var(--blob-3); transform: rotate(-1deg); } .article-footer .tag-ribbon:nth-child(even){ transform: rotate(1.2deg); } .article-footer .tag-ribbon:hover{ border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-text); } /* Navigation between posts */ .post-navigation{ max-width: 860px; margin: 60px auto 0; padding: 0 24px; } .post-navigation .nav-links{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .post-navigation .nav-previous a, .post-navigation .nav-next a{ display: block; height: 100%; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--pebble); padding: 18px 22px; font-family: var(--font-display); font-weight: 650; font-size: 17px; line-height: 1.3; transform: rotate(-.6deg); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .post-navigation .nav-next a{ transform: rotate(.6deg); text-align: right; } .post-navigation a:hover{ transform: rotate(0) translateY(-3px); border-color: var(--accent-line); } .post-navigation .nav-direction{ display: block; font: 700 12px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 6px; } /* ========================================================= 10. SINGLE: PHOTOS — the image gets all the space ========================================================= */ .single-format-image .prose, .single-format-gallery .prose{ max-width: 860px; } .single-format-image .article-head .sticker{ margin-top: 16px; } /* A fanned, overlapping hero strip of every photo in the gallery. Scrolls horizontally — trackpad/wheel and the two arrow buttons are wired up in assets/js/main.js. */ .photo-hero{ position: relative; isolation: isolate; width: 100vw; margin-left: calc(50% - 50vw); margin-bottom: 40px; padding: 10px 0; } /* When the post has a featured image, it sits full-bleed behind the gallery strip — same idea as every other kind's hero image, except the photos themselves are layered on top of it instead of a title. */ .photo-hero.has-bg-photo{ padding: 40px 0; } .photo-hero-bg{ position: absolute; inset: 0; z-index: 0; overflow: hidden; } .photo-hero-bg img{ width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .photo-hero-bg::after{ content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 55%, transparent); } .photo-hero-track{ position: relative; z-index: 1; display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; /* Generous vertical padding so the hover zoom/lift on .photo-frame has room to grow inside this scroll box without being clipped by overflow-y. */ padding: 110px max(24px, calc((100% - 1180px) / 2 + 90px)) 90px; } .photo-hero-track::-webkit-scrollbar{ display: none; } /* 8 or fewer photos: everything fits, so don't allow scrolling — just center the fan of prints. */ .photo-hero-track--static{ overflow-x: visible; scroll-snap-type: none; justify-content: center; padding-left: 24px; padding-right: 24px; } .photo-frame{ flex: 0 0 auto; width: min(230px, 42vw); margin-left: -90px; /* A real polaroid border is always white paper, regardless of the page's light/dark scene. */ background: #FDFDFB; padding: 8px 8px 10px; border-radius: var(--pebble); box-shadow: var(--shadow-heavy); scroll-snap-align: center; transform: rotate(var(--tilt2, 0deg)); transition: transform .25s ease; } .photo-hero-track .photo-frame:first-child{ margin-left: 0; } /* Lift on genuine mouse hover ONLY — tying this to :focus-within or :focus-visible also fired on the programmatic focus() the lightbox restores when closing (incl. via Escape, where :focus-visible is legitimately true per the browser's own keyboard-interaction heuristic — there's no reliable way to tell that apart from real keyboard navigation), leaving the card stuck looking "hovered" with no pointer anywhere near it. Keyboard focus gets its own plain ring below instead. The lift values are mirrored in main.js (HOVER_LIFT / HOVER_SCALE) so the lightbox can fly from/to the hovered geometry. */ .photo-hero-track .photo-frame:hover{ transform: translateY(-22px) rotate(0deg) scale(1.35); z-index: 50 !important; } /* A clean ring around just the photo itself for keyboard focus — not the generic site-wide outline, which would sit awkwardly across the white polaroid mat around it. */ .photo-frame img:focus-visible{ outline: 3px solid var(--yellow); outline-offset: -3px; border-radius: var(--photo-radius); } .photo-frame img{ display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--photo-radius); box-shadow: none; cursor: zoom-in; } .photo-frame figcaption{ font-family: var(--font-display); font-style: normal; font-weight: 600; color: #3A342C; font-size: 14px; text-align: center; margin-top: 10px; } .photo-hero-arrow{ position: absolute; top: 50%; translate: 0 -50%; z-index: 60; width: 48px; height: 48px; display: grid; place-items: center; border: 1.5px solid var(--accent-line); border-radius: 999px; background: var(--paper); color: var(--accent-text); box-shadow: var(--shadow); cursor: pointer; transition: transform .2s ease, opacity .2s ease; } .photo-hero-arrow svg{ width: 22px; height: 22px; } .photo-hero-arrow--prev{ left: 14px; } .photo-hero-arrow--next{ right: 14px; } .photo-hero-arrow[disabled]{ opacity: 0; pointer-events: none; } @media (max-width: 680px){ .photo-frame{ width: min(190px, 62vw); margin-left: -60px; } .photo-hero-arrow{ width: 40px; height: 40px; } .photo-hero-arrow svg{ width: 18px; height: 18px; } } /* Lightbox: click a gallery photo to see it full-size, scaled to fit the screen at its own aspect ratio. Appended to by JS. */ .photo-lightbox{ position: fixed; inset: 0; z-index: 1000; background: rgba(10, 8, 6, .88); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; } .photo-lightbox.is-open{ opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s linear 0s; } .photo-lightbox-stage{ position: absolute; inset: 0; } /* The flying polaroid: a full clone of the clicked .photo-frame — paper border, photo and caption together, one rigid object. It keeps its .photo-frame class, so it looks pixel-identical to the card it lifted off of; JS pins its layout box over the original and animates ONLY transform (translate + rotate + scale). The border therefore scales in perfect proportion with the photo, and no layout or paint work happens mid-flight. */ .photo-lightbox-clone{ position: fixed; z-index: 1001; overflow: hidden; will-change: transform; } .photo-lightbox-clone img{ cursor: default; } .photo-lightbox-close{ position: absolute; top: 20px; right: 20px; z-index: 1002; width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; transition: background .2s ease, transform .2s ease; } .photo-lightbox-close:hover{ background: rgba(255,255,255,.26); transform: scale(1.06); } .photo-lightbox-close svg{ width: 20px; height: 20px; } .photo-lightbox-nav{ position: absolute; top: 50%; translate: 0 -50%; z-index: 1002; width: 52px; height: 52px; display: grid; place-items: center; border: 0; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; transition: background .2s ease, transform .2s ease; } .photo-lightbox-nav svg{ width: 24px; height: 24px; } .photo-lightbox-nav--prev{ left: 20px; } .photo-lightbox-nav--next{ right: 20px; } .photo-lightbox-nav[hidden]{ display: none; } body.has-lightbox-open{ overflow: hidden; } @media (max-width: 680px){ .photo-lightbox{ padding: 40px 16px; } .photo-lightbox-nav{ width: 42px; height: 42px; } .photo-lightbox-nav svg{ width: 20px; height: 20px; } .photo-lightbox-nav--prev{ left: 8px; } .photo-lightbox-nav--next{ right: 8px; } } /* ========================================================= 11. DARK SCENES — shared (audio & video) ========================================================= */ body.single-format-audio .site-header, body.single-format-video .site-header, body.single-format-image .site-header, body.single-format-gallery .site-header{ background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); } body.single-format-audio .prose, body.single-format-video .prose{ background: var(--paper); padding: 40px 48px; border-radius: var(--pebble); border: 1.5px solid var(--line); max-width: 760px; } body.single-format-audio .prose .alignfull, body.single-format-audio .prose .alignwide, body.single-format-video .prose .alignfull, body.single-format-video .prose .alignwide{ margin-left: 0; margin-right: 0; } /* ========================================================= 12. SINGLE: AUDIO — the experience ========================================================= */ .experience{ padding: 46px 0 56px; text-align: center; position: relative; } .experience.experience--compact{ padding: 22px 0 28px; } .experience .article-head{ padding: 16px 0 8px; } .experience-stage{ position: relative; width: min(430px, 86vw); height: min(430px, 86vw); margin: 4px auto 10px; display: grid; place-items: center; } .experience--compact .experience-stage{ width: min(150px, 40vw); height: min(150px, 40vw); margin: 0 auto 6px; } .experience--compact .player-button{ width: 76px; height: 76px; } .experience--compact .player-button svg{ width: 28px; height: 28px; } .experience--compact .player-title{ font-size: 17px !important; margin-top: 10px !important; } .experience--compact .player-list{ margin-top: 14px; max-height: 160px; overflow-y: auto; } .player-canvas{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .player-button{ position: relative; z-index: 2; width: 132px; height: 132px; border: 0; cursor: pointer; background: var(--accent); color: #fff; border-radius: var(--blob-1); display: grid; place-items: center; box-shadow: 0 0 0 calc(6px + var(--level) * 10px) color-mix(in srgb, var(--accent) 22%, transparent), 0 0 calc(50px + var(--level) * 110px) calc(6px + var(--level) * 26px) color-mix(in srgb, var(--accent) 42%, transparent); transition: transform .2s ease; } .player-button:hover{ transform: scale(1.06); } .player-button:active{ transform: scale(.96); } .player-button svg{ width: 44px; height: 44px; } .player-button .icon-play{ margin-left: 6px; } .player-button[aria-pressed="true"]{ animation-duration: 2.6s; } .player-button[aria-pressed="true"] .icon-play{ display: none; } .player-button[aria-pressed="false"] .icon-pause{ display: none; } .hemmo-player--full{ max-width: 640px; margin: 0 auto; } .hemmo-player--full .player-wave{ margin: 8px auto 0; } .player-wave{ display: block; width: 100%; height: 52px; touch-action: none; cursor: pointer; overflow: visible; } .player-wave .wave-track{ stroke: var(--line); } .player-wave .wave-fill{ stroke: var(--accent); } .player-wave .wave-dot{ fill: var(--accent); stroke: var(--paper); stroke-width: 3; } .player-time{ display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); margin-top: 2px; } .player-list{ list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .player-list button{ width: 100%; display: flex; align-items: center; gap: 14px; font: inherit; font-size: 15.5px; font-weight: 600; text-align: left; background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); border-radius: var(--blob-2); padding: 13px 20px; cursor: pointer; transform: rotate(-.4deg); transition: transform .2s ease, border-color .2s ease, background .2s ease; } .player-list li:nth-child(even) button{ transform: rotate(.5deg); border-radius: var(--blob-4); } .player-list button:hover{ transform: rotate(0) scale(1.015); border-color: var(--accent-line); } .player-list button .track-number{ font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--accent-text); min-width: 22px; } .player-list button .track-duration{ margin-left: auto; color: var(--ink-soft); font-variant-numeric: tabular-nums; font-size: 13px; } .player-list li.active button{ background: var(--accent); border-color: var(--accent); color: #fff; } .player-list li.active button .track-number, .player-list li.active button .track-duration{ color: rgba(255,255,255,.85); } .experience-content{ margin-top: 54px; text-align: left; } .audio-hero{ height: min(75vh); margin-bottom: 0; } /* ========================================================= 13. SINGLE: VIDEO — the cinema ========================================================= */ .cinema{ padding: 40px 0 0; } .cinema .article-head{ padding: 8px 0 30px; } .cinema-screen{ position: relative; max-width: 980px; margin: 0 auto; border-radius: 30px 34px 32px 36px / 38px 32px 40px 34px; overflow: hidden; background: #000; box-shadow: 0 0 90px color-mix(in srgb, var(--accent) 34%, transparent), 0 30px 70px rgba(0,0,0,.5); transform: rotate(-.5deg); } .cinema-screen :is(iframe, video){ display: block; width: 100%; aspect-ratio: 16/9; height: auto; border: 0; } .cinema-screen .wp-block-embed, .cinema-screen figure{ margin: 0; } .cinema-screen .wp-block-embed__wrapper{ line-height: 0; } .cinema-glow{ height: 60px; max-width: 700px; margin: 0 auto; background: radial-gradient(50% 100% at 50% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 75%); } .cinema-content{ margin-top: 20px; } .cinema-empty{ max-width: 760px; margin: 0 auto; text-align: center; color: var(--ink-soft); padding: 40px 0; } /* ========================================================= 14. MINI PLAYER (cards & inline) ========================================================= */ .hemmo-player--mini{ background: var(--paper); border: 1.5px solid var(--accent-line); border-radius: var(--blob-2); padding: 12px 16px 10px; box-shadow: 0 4px 14px rgba(38,32,27,.07); } .hemmo-player--mini .player-row{ display: flex; align-items: center; gap: 14px; } .hemmo-player--mini .player-button{ width: 52px; height: 52px; flex: 0 0 auto; animation-duration: 9s; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); } .hemmo-player--mini .player-button svg{ width: 19px; height: 19px; } .hemmo-player--mini .player-button .icon-play{ margin-left: 2px; } .hemmo-player--mini .player-middle{ flex: 1; min-width: 0; } .hemmo-player--mini .player-wave{ height: 34px; } .hemmo-player--mini .player-time{ font-size: 12px; margin-top: 0; } .hemmo-player--mini .player-title{ font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .hemmo-player--mini .player-list{ margin-top: 10px; gap: 6px; } .hemmo-player--mini .player-list button{ padding: 8px 14px; font-size: 13.5px; } .prose .hemmo-player--mini{ margin: 2em 0; transform: rotate(-.5deg); } .player-fallback audio{ width: 100%; margin-top: 8px; } .hemmo-player.is-ready .player-fallback{ display: none; } /* ========================================================= 15. COMMENTS ========================================================= */ .comments-wrap{ max-width: 760px; margin: 70px auto 0; padding: 0 24px; } .comments-title{ font-size: 26px; margin-bottom: 26px; } .comments-title span{ color: var(--accent-text); } .comment-list{ list-style: none; margin: 0; padding: 0; } .comment-list .comment{ margin-bottom: 18px; } .comment-body{ background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--blob-2); padding: 18px 22px; transform: rotate(-.4deg); } .comment-list .comment:nth-child(even) > .comment-body{ transform: rotate(.4deg); border-radius: var(--blob-4); } .comment-list .children{ list-style: none; padding-left: 34px; margin-top: 14px; } .comment-meta{ display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .comment-meta .avatar{ width: 40px; height: 40px; border-radius: var(--blob-3); } .comment-metadata{ font-size: 12.5px; color: var(--ink-soft); } .comment-author .fn{ font-weight: 700; font-style: normal; } .bypostauthor > .comment-body{ border-color: var(--accent-line); background: var(--accent-cloud); } .comment-content p{ margin: 0 0 .8em; } .comment-content p:last-child{ margin: 0; } .reply a{ font-size: 13px; font-weight: 700; color: var(--accent-text); } .comment-respond{ margin-top: 34px; } .comment-respond .comment-reply-title{ font-size: 22px; margin-bottom: 14px; } .comment-form{ display: grid; gap: 14px; } .comment-form label{ display: block; font-weight: 600; font-size: 14px; margin-bottom: 5px; } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea{ width: 100%; font: inherit; font-size: 15px; background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); border-radius: var(--pebble-small); padding: 11px 15px; } .comment-form textarea{ border-radius: var(--pebble); min-height: 130px; } .comment-form :is(input, textarea):focus{ border-color: var(--accent); outline: none; } .comment-form .form-submit{ margin: 4px 0 0; } .comment-form input[type="submit"]{ font: inherit; font-weight: 700; font-size: 15px; background: var(--accent); color: #fff; border: 0; cursor: pointer; padding: 12px 26px; border-radius: var(--blob-1); transition: transform .2s ease; } .comment-form input[type="submit"]:hover{ transform: rotate(-1deg) scale(1.03); } /* ========================================================= 16. SEARCH, PAGES, 404 ========================================================= */ .page-head{ padding: 52px 0 30px; text-align: center; } .page-title{ font-size: clamp(30px, 4.5vw, 48px); font-weight: 800; } .search-form--large{ display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 26px auto 50px; } .search-form--large .search-field{ width: min(420px, 80vw); font-size: 16px; padding: 13px 20px; } .error404{ text-align: center; padding: 70px 0 30px; position: relative; } .error404 .error-blob{ width: 210px; height: 210px; margin: 0 auto 20px; background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 45%, var(--yellow))); border-radius: var(--blob-1); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 64px; color: #fff; transform: rotate(-3deg); } .error404 h1{ font-size: clamp(28px, 4vw, 42px); } .error404 p{ color: var(--ink-soft); max-width: 46ch; margin: 14px auto 0; } .no-content{ text-align: center; padding: 30px 0 70px; color: var(--ink-soft); } /* ========================================================= 17. REVEAL-ON-ENTRY MOTION ========================================================= */ .reveal{ opacity: 0; transform: translateY(22px) rotate(var(--tilt, 0deg)); } .reveal.visible{ opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); transition: opacity .5s ease, transform .55s cubic-bezier(.2,.8,.3,1.1); } /* ========================================================= 18. RESPONSIVE ========================================================= */ @media (max-width: 1020px){ .stream{ grid-template-columns: repeat(2, 1fr); } .stream > *{ margin-top: 0 !important; } .stream > *:nth-child(even){ margin-top: 18px !important; } .prose .alignwide{ margin-left: -20px; margin-right: -20px; } } @media (max-width: 680px){ body{ font-size: 16px; } .stream{ grid-template-columns: 1fr; gap: 26px; } .stream > *{ margin-top: 0 !important; } .guide-grid{ gap: 18px; } .guide-card{ flex-basis: 100%; max-width: 380px; } .header-inner{ justify-content: center; text-align: center; } .search-form{ display: none; } .front-hero{ padding-top: 48px; } .hero-blobs span{ opacity: .3; } .prose{ font-size: 17px; } body.single-format-audio .prose, body.single-format-video .prose{ padding: 26px 22px; } .post-navigation .nav-links{ grid-template-columns: 1fr; } .post-navigation .nav-next a{ text-align: left; } .experience-stage{ margin-top: 0; } .cinema-screen{ border-radius: 18px 22px 20px 24px / 24px 20px 26px 22px; } .section-head{ flex-direction: column; align-items: flex-start; gap: 4px; } } /* ========================================================= 19. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal{ opacity: 1; transform: none; } .card, .guide-card{ transform: none; } }