/* ════════════════════════════════════════════════════════════════ THEME: kaiunta update august 7 0241 Quiet editorial look, ported from kaiunta.com: warm paper, single italic monospace voice, hairline rules instead of thick borders, pill buttons instead of hard drop shadows. Two parts: 1. Palette + font tokens (these alone are enough for basic reskin). 2. Shape overrides for the highest-impact components — header, hero, buttons, cards, tabs, modals — so the comic "sticker" shape language (thick borders, hard offset shadows, ALL CAPS) is replaced with kaiunta's flat/hairline/italic language too. This section doesn't touch every selector in index.php, just the ones that define most of what a person actually sees. ════════════════════════════════════════════════════════════════ */ /* ── 1. Palette + fonts ── */ html[data-theme="kaiunta"] { --paper: #f7f4ee; --ink: #1a1a1a; --ink-mid: #444; --ink-faint: #888; --rule: #e0ddd6; --red: #c0392b; /* kaiunta's one accent — used sparingly */ --yellow: #eee8dc; /* no bright yellow in kaiunta; soft warm wash instead */ --black: #1a1a1a; /* "ink" instead of true black */ --surface: #f7f4ee; /* flat — cards sit on the same paper, no white panels */ --on-accent: #f7f4ee; /* paper-colored text on ink-filled buttons */ --icon-fill: rgba(26,26,26,.07); /* header/footer icon-button fill (bell, burger, theme toggle, footer nav icons) — replaces the old 1px hairline-border look */ --notif-unread-bg: #fdf6f5; /* faint red-tinted wash for unread notification cards, see html[data-theme="kaiunta"] .notif-item.unread far below */ /* kaiunta only ever uses one family (Courier Prime, italic for display) — point all three theme fonts at it. Italic/weight is applied per component below since font-family alone can't carry font-style. */ --font-display: 'Courier Prime', monospace; --font-mono: 'Courier Prime', monospace; --font-accent: 'Courier Prime', monospace; /* kaiunta.com's header is 64px tall vs this app's 56px default */ --hdr-h: 64px; } /* ── 1b. Dark variant ── Opt-in via data-kai-dark="1" on (footer toggle next to the theme selector — see #footerKaiDarkToggle in theme.js, same pattern as terminal's data-term-invert toggle). This is NOT a literal color invert: kaiunta's palette has more going on than a flat two-tone terminal screen (a dedicated accent red, several ink tints, a soft warm wash), so flipping RGB values would muddy the red toward cyan and throw off contrast everywhere. Instead every token below is a hand-picked dark counterpart that keeps the same warm, paper-like feel — just a dark sheet of paper with light ink instead of a light sheet with dark ink. Every rule elsewhere in this file reads these tokens via var(...), so this block is the only place dark mode needs to be defined; nothing below needs a [data-kai-dark] variant of its own — except the one hardcoded hex this file has (.notif-item.unread's background), which is why that got pulled into --notif-unread-bg above instead of staying inline. */ html[data-theme="kaiunta"][data-kai-dark="1"] { --paper: #18140f; --ink: #ece6d8; --ink-mid: #b6ad9c; --ink-faint: #7d7566; --rule: #332d24; --red: #e2604f; /* brightened from the light-mode #c0392b so it still hits AA contrast on a dark paper */ --yellow: #2a2318; /* the "soft warm wash" becomes a dark warm wash instead of a light one */ --black: #ece6d8; /* kaiunta uses --black to mean "ink", i.e. the highest-contrast tone — that's now the light one */ --surface: #18140f; /* stays flat with --paper, same as light mode */ --on-accent: #18140f; /* text sitting on ink-filled buttons — ink-filled now means light-filled, so this needs to be dark */ --icon-fill: rgba(236,230,216,.08); --notif-unread-bg: rgba(226,96,79,.14); } /* Mobile drag/bounce: the base stylesheet already sets overscroll-behavior-y: none on html/body site-wide, which is what actually suppresses iOS Safari's rubber-band bounce (not just scroll-chaining to a parent). This kaiunta-only rule used to override that with the weaker "contain" value — which stops chaining but leaves the bounce/drag itself in place — so it was silently undoing the fix for this theme only. Match "none" here instead so kaiunta gets the same non-draggy behavior as the rest of the site. */ html[data-theme="kaiunta"], html[data-theme="kaiunta"] body { overscroll-behavior-y: none; } /* ── 2. Shape overrides ── */ /* Header: thick red bar → thin hairline on paper */ html[data-theme="kaiunta"] .hdr { background: var(--paper); border-bottom: 1px solid var(--rule); padding: 0 2rem; } html[data-theme="kaiunta"] .hdr-logo { color: var(--ink); font-style: normal; letter-spacing: -0.02em; font-size: .95rem; text-transform: lowercase; } /* kaiunta's only "mark" — no illustrated logo (see conversation: the justwitter mascot's thick-outline comic style doesn't belong in this theme's flat/hairline language, and a bare wordmark reads confident on its own). This one red slash before the wordmark is the sole exception — styled as a tuning notch, not punctuation, so it carries a little of the station/tuning idea without becoming an icon. */ html[data-theme="kaiunta"] .hdr-logo::before { content: "/"; display: inline-block; color: var(--red); margin-right: .3em; font-style: normal; } html[data-theme="kaiunta"] .hdr-user { color: var(--ink-mid); } /* Was a transparent, hairline-bordered pill (border:1px solid var(--rule), background:none) — kaiunta's own version of the thin "outline" look every theme used for these buttons. Now a soft filled circle instead (--icon-fill, an ink-tinted translucent wash defined in this theme's root block below), matching justwitter's equivalent restyle and the rest of kaiunta's own header/footer icon buttons. */ html[data-theme="kaiunta"] .hdr-btn { height: 34px; padding: 0 1rem; border: none; border-radius: 999px; background: var(--icon-fill); color: var(--ink-mid); letter-spacing: .12em; text-transform: lowercase; font-size: .72rem; transition: background .15s, color .15s; } html[data-theme="kaiunta"] .hdr-btn:hover { background: var(--ink); color: var(--paper); } html[data-theme="kaiunta"] .hdr-btn-primary { height: 36px; padding: 0 1.25rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); } html[data-theme="kaiunta"] .hdr-btn-primary:hover { background: var(--ink); color: var(--paper); opacity: .8; } /* The header's search icon just opens #viewSearch and focuses its input — but kaiunta's own Voices/Stations/Following layout already puts a "search voices..." box front-and-center in the main content, so this is a straight duplicate once that view is showing (same reasoning as #menuGuestCtas being hidden here once the header already covers login/ signup — see renderHeader()'s comment on that). */ html[data-theme="kaiunta"] #btnSearchHeader { display: none; } /* The markup hardcodes an arrow into the button label ("START WITTERING→"). kaiunta's quieter voice drops it — swap in a text override rather than editing the shared HTML, so other themes keep the arrow untouched. */ html[data-theme="kaiunta"] #btnHdrSignup { font-size: 0; } html[data-theme="kaiunta"] #btnHdrSignup::before { content: "start wittering"; font-size: .72rem; } /* Mobile: kaiunta's lowercase Courier Prime runs noticeably wider per character than justwitter's condensed all-caps Bangers, so at phone widths "log in" / "start wittering" wrap to two lines inside their pills and the logo — squeezed for space by the now-taller buttons — overflows underneath them. Nothing here changes layout structure, just tightens sizing enough for everything to fit on one line. */ @media (max-width: 480px) { html[data-theme="kaiunta"] .hdr, html[data-theme="kaiunta"] .hdr * { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html[data-theme="kaiunta"] .hdr { padding: 0 .75rem; } html[data-theme="kaiunta"] .hdr-actions { gap: .3rem; } /* Matches kaiunta.com's .hdr-brand, which stays .95rem at every width — no mobile-specific shrink there. This used to drop to .7rem and cap at 26vw to make room for text CTA pills at phone widths, but the header buttons are icon-only 34px circles at all sizes now (see #btnHdrLogin/#btnHdrSignup below), so there's real room next to them — the fixed 26vw cap was truncating "just.witter" even when it fit. overflow/ellipsis stay on as a genuine safety net for very long future site names on very narrow screens, without an arbitrary cap. */ html[data-theme="kaiunta"] .hdr-logo { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; } /* NOTE: previously this block forced min-height:0 on #viewAuth at mobile widths, reasoning that the base .view rule's min-height:100dvh left a "shorter login card centered in a mostly-empty screen-height box." But that centering (align-items/justify-content:center, set on #viewAuth itself) is the intended behavior — a full-height box with the card centered, extra space split evenly above/below, is the normal clean pattern for a login screen. Killing the height instead left the card pinned right under the header with all that same leftover space now dumped entirely below it as one lopsided gap before the fixed footer bar — worse, not better. Reverted; #viewAuth is left to the base centered behavior on kaiunta at every width. */ } /* Header always shows icon-only log in / start wittering — desktop and mobile alike, not gated behind the ?hdrmode dev toggle or a max-width breakpoint. The burger used to be footer-only by design here ("no burger anywhere in the header; the footer's hamburger is the only entry point to #viewMenu") — that's since been swapped: the burger now lives in the header (#btnHdrBurger, styled by the base .hdr-burger rule in index.php) and the theme toggle took its old spot in the footer instead (#footerThemeToggle). No override needed here anymore; kaiunta's header burger just uses the shared base style. */ html[data-theme="kaiunta"] #btnHdrLogin, html[data-theme="kaiunta"] #btnHdrSignup { width: 34px; height: 34px; padding: 0; font-size: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } html[data-theme="kaiunta"] #btnHdrLogin::before, html[data-theme="kaiunta"] #btnHdrSignup::before { content: ""; display: block; width: 15px; height: 15px; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } html[data-theme="kaiunta"] #btnHdrLogin::before { background-color: var(--ink-mid); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); } html[data-theme="kaiunta"] #btnHdrSignup::before { background-color: var(--paper); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); } html[data-theme="kaiunta"] .hdr-bell { background: var(--icon-fill); color: var(--ink-mid); font-size: 0; /* hide the color emoji glyph — a flat mask icon replaces it below */ } html[data-theme="kaiunta"] .hdr-bell:hover { background: var(--ink); } /* The bell is a literal 🔔 emoji character, not an SVG/icon-font glyph, so it renders with the OS's built-in color emoji font and ignores CSS `color` entirely — no property on the glyph itself can flatten it to kaiunta's ink palette (a grayscale filter only dims the gold, it never reads as a real ink/paper icon). Hiding the glyph and drawing the bell as a CSS mask instead gives a flat silhouette that colors — and inverts on hover — like every other icon in this theme. */ html[data-theme="kaiunta"] .hdr-bell::before { content: ""; display: block; width: 15px; height: 15px; background-color: var(--ink-mid); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center / contain no-repeat; transition: background-color .15s; } html[data-theme="kaiunta"] .hdr-bell:hover::before { background-color: var(--paper); } /* Feed/Stations/Search page titles: visually redundant in kaiunta — Feed's duplicates the active tab label right above it, and Stations'/Search's are already covered by their search input's placeholder ("search stations...", "search voices..."). Hidden visually only (not display:none) so they stay in the accessibility tree as the page's heading for screen reader users, who don't have the placeholder-as-context shortcut. Profile isn't included — it has no equivalent placeholder doing that job. */ html[data-theme="kaiunta"] #feedTitle, html[data-theme="kaiunta"] #stationsTitle, html[data-theme="kaiunta"] #searchTitle { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Stations subtitle ("every station that's posted a voice, most recently active first") explains the list's sort order — unlike the redundant titles above, sighted users have no other visual cue for this, so hiding it is a real (if minor) omission for them. It stays in the a11y tree because screen reader users, who can't glance at the list to infer sort order the way sighted users can, benefit from it more, not less. */ html[data-theme="kaiunta"] #stationsSubtitle { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Profile page's "PROFILE" heading, same redundant story as feed/stations/ search above (duplicates the avatar+handle right below it) — hidden the same way. Scoped to #viewProfile specifically since .feed-title is shared with THREAD/NOTIFICATIONS, which haven't been asked about. */ html[data-theme="kaiunta"] #viewProfile .feed-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } html[data-theme="kaiunta"] .hdr-bell:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } /* Hero: bangers' animated ambient slogan → kaiunta's quiet editorial hero (eyebrow, headline, one line of copy, CTAs baked into the hero itself — the only theme where the hero is actionable). */ html[data-theme="kaiunta"] .hero { background: var(--paper); align-items: flex-start; justify-content: center; text-align: left; padding: calc(var(--hdr-h) + 2rem) clamp(1.5rem, 8vw, 6rem) 5rem; } html[data-theme="kaiunta"] .hero::before { display: none; } html[data-theme="kaiunta"] .hero-bangers { display: none; } html[data-theme="kaiunta"] .hero-kaiunta { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 1.5rem; max-width: 820px; margin: 0; } html[data-theme="kaiunta"] .hero-eyebrow { font-family: var(--font-mono); font-style: normal; font-size: .72rem; letter-spacing: .18em; text-transform: lowercase; color: var(--ink-faint); margin: 0; } html[data-theme="kaiunta"] .hero-kai-title { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: -.03em; line-height: 1.15; font-size: clamp(1.9rem, 4.2vw, 3.4rem); color: var(--ink); margin: 0; } html[data-theme="kaiunta"] .hero-kai-copy { font-family: var(--font-mono); font-style: italic; color: var(--ink-mid); font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.8; max-width: 58ch; margin: 0; } html[data-theme="kaiunta"] .hero-kai-ctas { display: flex; align-items: center; gap: 1.5rem; margin-top: .25rem; } html[data-theme="kaiunta"] .hero-kai-ctas .btn-primary { width: auto; height: 48px; padding: 0 1.75rem; font-size: .78rem; display: inline-flex; align-items: center; justify-content: center; gap: .5em; } html[data-theme="kaiunta"] .hero-kai-login { background: none; border: none; padding: 0; font-family: var(--font-mono); font-style: italic; font-size: .9rem; color: var(--ink-mid); cursor: pointer; transition: color .15s; display: inline-flex; align-items: center; gap: .4em; } html[data-theme="kaiunta"] .hero-kai-login:hover { color: var(--ink); } /* Icons inherit each button's own text color via currentColor, so they track hover/mobile-restyle states for free instead of needing separate color rules per state. */ html[data-theme="kaiunta"] .hero-kai-cta-icon { flex-shrink: 0; } /* Large/5K displays (27"+ iMac range and similar): every hero measurement above is a clamp() that tops out around normal-desktop widths — title caps at 3.4rem, copy at 1.15rem, the whole column at 820px — because vw-based clamps are anchored to typical laptop/desktop viewports, not a 2560px-plus logical viewport (5K's actual CSS pixel width once you account for the display's 2x pixel density). Below that ceiling the hero was designed to feel quiet and editorial; above it, the exact same numbers just read as small text stranded in empty paper. This tier only raises the ceilings — same font, same weights, same left-aligned layout, same animation — it doesn't restructure anything, so every rule above still applies unchanged below 1800px. */ @media (min-width: 1800px) { html[data-theme="kaiunta"] .hero-kaiunta { max-width: 1180px; gap: 2rem; } html[data-theme="kaiunta"] .hero-eyebrow { font-size: .85rem; } html[data-theme="kaiunta"] .hero-kai-title { font-size: clamp(3.4rem, 4.8vw, 5.6rem); } html[data-theme="kaiunta"] .hero-kai-copy { font-size: 1.35rem; max-width: 62ch; } html[data-theme="kaiunta"] .hero-kai-ctas .btn-primary { height: 56px; padding: 0 2.25rem; font-size: .88rem; } html[data-theme="kaiunta"] .hero-kai-login { font-size: 1.02rem; } /* Giant background watermark, X-style, but built from the site's own mark — the same red "/" + lowercase wordmark pairing used in .hdr-logo — instead of a generic logo, so it reads as "this brand, scaled up." (A first pass used just the bare "/" blown up to 48vw; at that size an italic slash stops reading as a character and just becomes an abstract diagonal band, which is why this version is smaller and paired with the "j.v.i" abbreviation for legibility.) Two pseudo-elements, not one string, so the slash can carry the header's --red while "j.v.i" stays --ink, matching .hdr-logo::before exactly. They're aligned using ch units rather than two independent vw offsets: Courier Prime is a monospace face (see --font-display above), so 1ch reliably equals the width of any glyph at a given font-size, including "/" — that's what lets the slash sit locked directly against the "j" at every viewport width instead of the gap between them drifting as vw changes. Sits on #viewHero (already position:relative — .hero-kai-media is absolutely positioned inside it a few rules up), at z-index:0, so both sit behind .hero-kaiunta's z-index:1 text stack automatically. Only shown when the hero isn't already displaying an actual video/image backdrop — those are real media and don't need a decorative mark competing with them; this is purely for the plain "none"/"wave"/"mark" modes, the ones that read as empty on very wide screens. #viewHero's ID gives both pseudo- elements enough specificity to beat the earlier ".hero::before { display:none }" rule near the top of this file without needing !important. */ html[data-theme="kaiunta"] #viewHero:not([data-hero-media="video"]):not([data-hero-media="image"])::after { content: "j.v.i"; position: absolute; top: 50%; right: 3vw; transform: translateY(-50%); font-family: var(--font-display); font-style: italic; font-size: 11vw; line-height: 1; color: var(--ink); opacity: .05; z-index: 0; pointer-events: none; user-select: none; white-space: nowrap; } html[data-theme="kaiunta"] #viewHero:not([data-hero-media="video"]):not([data-hero-media="image"])::before { content: "/"; position: absolute; top: 50%; /* "j.v.i" is 5 characters; this locks the slash directly against the "j" regardless of the 3vw right-offset above. */ right: calc(3vw + 5ch); transform: translateY(-50%); font-family: var(--font-display); font-style: italic; font-size: 11vw; line-height: 1; color: var(--red); opacity: .16; z-index: 0; pointer-events: none; user-select: none; } } /* Hero CTAs: primary pill + two text links sit side by side on desktop, but once there are three of them (start wittering / log in / go to feed) that row wraps awkwardly well before phone width — anywhere from small laptops down to phones. Stack them at a wider breakpoint than the header's own 480px cutoff above, same left edge as the copy. Placed after the desktop .hero-kai-ctas .btn-primary rule above (not up near the header's 480px block) so these overrides actually win the cascade — same selector + equal specificity means source order decides, and the desktop padding/pill rule would otherwise clobber this. */ @media (max-width: 640px) { html[data-theme="kaiunta"] .hero-kai-ctas { flex-direction: column; align-items: flex-start; gap: 1rem; } /* start wittering drops the pill treatment here too, matching log in / go to feed's plain-text style rather than standing out as a filled button once everything's stacked — same left edge, same voice. letter-spacing and box-shadow also need resetting here: the base .btn-primary rule sets letter-spacing:.15em and a 6px hard drop- shadow, and neither was in this override list — both were still leaking through even with background/border stripped, making "start wittering" render visibly larger/heavier than the plain "log in →" / "go to feed →" links beside it. */ html[data-theme="kaiunta"] .hero-kai-ctas .btn-primary { width: auto; height: auto; background: none; border: none; border-radius: 0; box-shadow: none; padding: 0; margin: 0; align-self: flex-start; text-align: left; color: var(--ink); font-family: var(--font-mono); font-style: italic; font-weight: 400; font-size: .9rem; letter-spacing: normal; display: inline-flex; align-items: center; gap: .4em; } html[data-theme="kaiunta"] .hero-kai-ctas .btn-primary::after { content: "→"; margin-left: .35em; } /* .hero-kai-login buttons pick up base button UA/shared styles (centered text, possible min-width) that read fine inline on desktop but leave "log in →" / "go to feed →" visually indented once stacked — force them flush to the same left edge as the copy and pill above. */ html[data-theme="kaiunta"] .hero-kai-login { display: inline-flex; align-items: center; gap: .4em; width: auto; min-width: 0; text-align: left; align-self: flex-start; margin: 0; } } /* Quiet fade-up entrance, staggered eyebrow → title → copy, in keeping with kaiunta's understated editorial pacing (vs. justwitter's animated ambient hero, which is untouched — this only targets .hero-kaiunta's children). */ html[data-theme="kaiunta"] .hero-eyebrow, html[data-theme="kaiunta"] .hero-kai-title, html[data-theme="kaiunta"] .hero-kai-copy, html[data-theme="kaiunta"] .hero-kai-ctas { opacity: 0; transform: translateY(.6em); animation: kaiuntaHeroIn .8s ease forwards; } html[data-theme="kaiunta"] .hero-eyebrow { animation-delay: .1s; } html[data-theme="kaiunta"] .hero-kai-title { animation-delay: .25s; } html[data-theme="kaiunta"] .hero-kai-copy { animation-delay: .45s; } html[data-theme="kaiunta"] .hero-kai-ctas { animation-delay: .65s; } @keyframes kaiuntaHeroIn { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { html[data-theme="kaiunta"] .hero-eyebrow, html[data-theme="kaiunta"] .hero-kai-title, html[data-theme="kaiunta"] .hero-kai-copy, html[data-theme="kaiunta"] .hero-kai-ctas { animation: none; opacity: 1; transform: none; } } /* Hero waveform: the "alive" element in place of an image/video, per the ink-on-paper constraint. A thin equalizer strip pinned to the very bottom edge of the hero — pure CSS, low-opacity --ink, never touching the copy above it. Leans into the voices/radio idea as motion, not decoration. */ html[data-theme="kaiunta"] #viewHero[data-hero-media="wave"] .hero-kai-wave { display: flex; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; align-items: flex-end; justify-content: space-between; gap: 2px; padding: 0 clamp(1.5rem, 8vw, 6rem) .5rem; pointer-events: none; z-index: 0; } html[data-theme="kaiunta"] .hero-kai-wave span { flex: 1 1 0; max-width: 3px; min-height: 4px; height: 4px; border-radius: 1px; background: var(--ink); opacity: .1; animation: kaiuntaWave 2.2s ease-in-out infinite; animation-delay: calc(var(--i) * -0.09s); } /* Slight duration variance per bar so the strip pulses organically instead of scrolling as one uniform sine wave. */ html[data-theme="kaiunta"] .hero-kai-wave span:nth-child(3n) { animation-duration: 1.7s; } html[data-theme="kaiunta"] .hero-kai-wave span:nth-child(5n) { animation-duration: 2.6s; } html[data-theme="kaiunta"] .hero-kai-wave span:nth-child(7n) { animation-duration: 1.4s; } @keyframes kaiuntaWave { 0%, 100% { height: 4px; opacity: .08; } 50% { height: 34px; opacity: .16; } } @media (prefers-reduced-motion: reduce) { html[data-theme="kaiunta"] .hero-kai-wave span { animation: none; height: 12px; opacity: .1; } } /* Keep the strip clear of the CTAs on short/mobile viewports rather than letting it run underneath them. */ @media (max-width: 480px) { html[data-theme="kaiunta"] .hero-kai-wave { height: 32px; } } /* ── Hero background media (video / image options) ── Both share one layer, absolutely filling .hero behind the copy. Only the option selected by #viewHero's data-hero-media attribute actually renders — see the base .hero-kai-media{display:none} rule and the video/image {display:none} rules below, each flipped on by its own attribute selector. Legibility approach: rather than a flat dark scrim across the whole thing (which would fight kaiunta's light-paper voice everywhere, not just where the text sits), the scrim is a left-to-right gradient — solid paper behind the eyebrow/title/copy block, fading to fully transparent past it so the media actually reads as media on the right/lower part of the hero. .hero-kaiunta gets z-index:1 so the text stack sits above the media+scrim regardless of DOM order. */ html[data-theme="kaiunta"] #viewHero[data-hero-media="video"] .hero-kai-media, html[data-theme="kaiunta"] #viewHero[data-hero-media="image"] .hero-kai-media { display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; } html[data-theme="kaiunta"] .hero-kai-media-video, html[data-theme="kaiunta"] .hero-kai-media-image { display: none; /* only the matching option below turns its element on */ width: 100%; height: 100%; object-fit: cover; object-position: center; } html[data-theme="kaiunta"] #viewHero[data-hero-media="video"] .hero-kai-media-video { display: block; } html[data-theme="kaiunta"] #viewHero[data-hero-media="image"] .hero-kai-media-image { display: block; } html[data-theme="kaiunta"] .hero-kai-media-scrim { position: absolute; inset: 0; background: linear-gradient( 90deg, var(--paper) 0%, var(--paper) 34%, rgba(247, 244, 238, .82) 50%, rgba(247, 244, 238, .35) 68%, rgba(247, 244, 238, 0) 85% ); } /* Sound toggle: hidden by default, only shown for the "video" option — there's nothing to mute/unmute on image, mark, or wave. Sits over the visible (unscrimmed) part of the video, bottom-right, with its own solid-ish paper background since it needs to stay legible over whatever's actually playing behind it. */ html[data-theme="kaiunta"] .hero-kai-mute { display: none; } html[data-theme="kaiunta"] #viewHero[data-hero-media="video"] .hero-kai-mute { display: inline-flex; align-items: center; gap: .5rem; position: absolute; right: clamp(1rem, 3vw, 2rem); /* .hero is min-height:100vh, so a small bottom offset here lands right underneath the fixed, opaque .site-footer (z-index:99) — same issue as the waveform earlier. Clear the footer's own height first, then add breathing room on top of that. */ bottom: calc(var(--ftr-h) + clamp(1rem, 3vw, 2rem)); z-index: 2; height: 38px; padding: 0 1rem; border: 1px solid var(--rule); border-radius: 999px; background: rgba(247, 244, 238, .88); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: var(--ink-mid); font-family: var(--font-mono); font-style: italic; font-size: .72rem; letter-spacing: .04em; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } html[data-theme="kaiunta"] #viewHero[data-hero-media="video"] .hero-kai-mute:hover { border-color: var(--ink); color: var(--ink); } html[data-theme="kaiunta"] .hero-kai-mute-icon { width: 14px; height: 14px; flex-shrink: 0; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; /* Muted (default) glyph: speaker with an X. */ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E"); } /* Unmuted glyph: speaker with sound waves. Swaps in via aria-pressed, which the JS toggle sets to match the video's actual muted state. */ html[data-theme="kaiunta"] .hero-kai-mute[aria-pressed="true"] .hero-kai-mute-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3Cpath d='M18.36 5.64a9 9 0 0 1 0 12.73'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3Cpath d='M18.36 5.64a9 9 0 0 1 0 12.73'/%3E%3C/svg%3E"); } /* Mobile: the media's scrim already flips to top-to-bottom so the video only shows through low in the hero — keep the button in that same visible band rather than crowding it against the very bottom edge. */ @media (max-width: 640px) { html[data-theme="kaiunta"] #viewHero[data-hero-media="video"] .hero-kai-mute { right: 1rem; bottom: calc(var(--ftr-h) + 1rem); font-size: .68rem; padding: 0 .85rem; } } /* Portrait phones only: .hero itself is now position:fixed and already clipped to bottom:var(--ftr-h) (see the shared mobile-portrait fix in index.php's base