/* * Balloon Head Fred — styling * VERSION: 2026.07.06+00.00.00 * * Owns the comic-book visual identity: the masthead lettering, the inked * panel, halftone shading, speech balloons, filmstrip and controls — plus * Fred's internal life (limb poses, expressions, ambient float, the pop). * Theme-aware via data-theme on ; safe-area aware; 44px touch targets. */ /* ── palette ─────────────────────────────────────────────────────────── */ :root { /* Comic scene defaults — episodes override via --bhf-* palette. */ --bhf-sky: #bfe3ff; --bhf-ground: #e6d6a8; --bhf-hill: #bcd98f; --bhf-grass: #6fae4e; --bhf-cloud: #ffffff; --bhf-sun: #ffd85e; --bhf-stem: #4f8f3d; --bhf-leaf: #62a84a; --bhf-petal: #ff5d73; --bhf-petal-dk: #d33b52; --bhf-heart: #ff5a7a; --bhf-spark: #fff2a8; --bhf-star: #ffd24a; /* Fred */ --fred-ink: #14110d; --fred-balloon: #ff4d4d; --fred-balloon-dk: #c9302c; /* Comic chrome (light) */ --bhf-page: #f3ead4; --bhf-page-2: #e7d9b8; --bhf-ink: #17130d; --bhf-panel-bg: #eef4ff; --bhf-caption-bg: #fff2c2; --bhf-caption-ink: #2a2010; --bhf-bubble-bg: #ffffff; --bhf-bubble-ink: #14110d; --bhf-accent: #ff4d4d; --bhf-ctrl-bg: #fffdf5; } [data-theme="dark"] { --bhf-page: #14120c; --bhf-page-2: #1d1a12; --bhf-ink: #f0e9d6; --bhf-panel-bg: #0d1622; --bhf-caption-bg: #3a3320; --bhf-caption-ink: #ffe9a8; --bhf-bubble-bg: #f4efe2; --bhf-bubble-ink: #14110d; --bhf-ctrl-bg: #241f16; } /* ── reset / page ────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: 'Comic Neue', 'Comic Sans MS', system-ui, sans-serif; color: var(--bhf-ink); background-color: var(--bhf-page); background-image: radial-gradient(var(--bhf-page-2) 1.4px, transparent 1.5px); background-size: 14px 14px; -webkit-text-size-adjust: 100%; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; min-height: 100svh; } button { font-family: inherit; -webkit-tap-highlight-color: transparent; } /* ── app layout ──────────────────────────────────────────────────────── */ .bhf-app { min-height: 100svh; display: flex; flex-direction: column; align-items: center; padding: calc(var(--fyi-banner-h, 48px) + max(env(safe-area-inset-top, 0px), 8px) + 6px) max(env(safe-area-inset-right, 0px), 12px) max(env(safe-area-inset-bottom, 0px), 12px) max(env(safe-area-inset-left, 0px), 12px); } .bhf-stageroot { width: 100%; max-width: 980px; display: flex; flex-direction: column; gap: clamp(10px, 2vh, 18px); } /* ── masthead ────────────────────────────────────────────────────────── */ .bhf-masthead { text-align: center; user-select: none; } .bhf-series { font-family: 'Bangers', 'Comic Sans MS', cursive; line-height: 0.86; letter-spacing: 0.02em; display: inline-flex; flex-direction: column; transform: rotate(-2deg); } .bhf-series-a { font-size: clamp(1.7rem, 7vw, 3rem); color: var(--bhf-ink); -webkit-text-stroke: 1px var(--bhf-ink); } .bhf-series-b { font-size: clamp(2.9rem, 13vw, 5.4rem); color: var(--bhf-accent); -webkit-text-stroke: 2px var(--bhf-ink); text-shadow: 4px 4px 0 var(--bhf-ink); margin-top: -0.12em; } .bhf-epline { margin-top: 0.35rem; font-weight: 700; font-size: clamp(0.85rem, 3.4vw, 1.1rem); display: flex; gap: 0.5ch; justify-content: center; flex-wrap: wrap; color: var(--bhf-ink); } .bhf-ep-date { opacity: 0.6; } /* ── comic page (grid of panels) ─────────────────────────────────────── */ .bhf-page { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 2.2vw, 20px); width: 100%; } /* Single-column read on narrow screens (a webcomic strip). */ @media (max-width: 560px) { .bhf-page { grid-template-columns: 1fr; } } .bhf-page[data-count="1"] { grid-template-columns: 1fr; } .bhf-panel.is-full { grid-column: 1 / -1; } .bhf-panel { position: relative; margin: 0; width: 100%; aspect-ratio: 10 / 7; border: 5px solid var(--bhf-ink); border-radius: 6px; background: var(--bhf-panel-bg); overflow: hidden; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.26); transition: box-shadow 0.25s ease, transform 0.25s ease, opacity 0.4s ease; } .bhf-stage { display: block; width: 100%; height: 100%; } /* Halftone + vignette give each panel its printed-comic feel. */ .bhf-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 42%, transparent 58%, rgba(0, 0, 0, 0.16) 100%), radial-gradient(rgba(0, 0, 0, 0.10) 22%, transparent 23%); background-size: 100% 100%, 6px 6px; mix-blend-mode: multiply; opacity: 0.5; } /* Panel playback states: the active panel is spotlit; the rest of the page stays fully visible so it always reads as a comic page. */ .bhf-panel.is-waiting { opacity: 0.82; } .bhf-panel.is-playing { box-shadow: 0 0 0 3px var(--bhf-accent), 8px 8px 0 rgba(0, 0, 0, 0.28); transform: translateY(-2px); z-index: 2; } .bhf-panel.is-done { opacity: 1; } /* the comic panel number, tucked in a corner */ .bhf-panel-num { position: absolute; top: 0; left: 0; min-width: 22px; height: 22px; padding: 0 5px; display: flex; align-items: center; justify-content: center; font-family: 'Bangers', cursive; font-size: 0.85rem; line-height: 1; color: var(--bhf-ink); background: var(--bhf-caption-bg); border-right: 3px solid var(--bhf-ink); border-bottom: 3px solid var(--bhf-ink); border-bottom-right-radius: 8px; z-index: 3; } /* a slim progress line along the bottom of the active panel */ .bhf-playhead { position: absolute; left: 0; bottom: 0; height: 5px; width: 0%; background: var(--bhf-accent); opacity: 0; transition: opacity 0.2s ease; z-index: 3; } .bhf-panel.is-playing .bhf-playhead { opacity: 0.9; } .bhf-flash { position: absolute; inset: 0; pointer-events: none; background: #fff; opacity: 0; mix-blend-mode: screen; z-index: 4; } .bhf-panel.bhf-cut .bhf-flash { animation: bhf-cutflash 0.32s ease-out; } .bhf-panel.bhf-cut .bhf-stage { animation: bhf-cutzoom 0.36s ease-out; transform-origin: center; } @keyframes bhf-cutflash { 0% { opacity: 0; } 20% { opacity: 0.45; } 100% { opacity: 0; } } @keyframes bhf-cutzoom { 0% { transform: scale(1.04); } 100% { transform: scale(1); } } /* ── overlay: captions & speech balloons ─────────────────────────────── */ .bhf-overlay { position: absolute; inset: 0; pointer-events: none; } .bhf-caption { position: absolute; left: 3.5%; right: 3.5%; max-width: 74%; padding: 0.42em 0.7em; background: var(--bhf-caption-bg); color: var(--bhf-caption-ink); border: 3px solid var(--bhf-ink); border-radius: 3px; font-weight: 700; font-size: clamp(0.72rem, 2.9vw, 1.02rem); line-height: 1.15; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25); opacity: 0; transform: translateY(-6px); transition: opacity 0.25s ease, transform 0.25s ease; } .bhf-caption.is-top { top: 3.5%; } .bhf-caption.is-bottom { bottom: 3.5%; top: auto; } .bhf-caption.show { opacity: 1; transform: translateY(0); } .bhf-bubble { position: absolute; max-width: 46%; padding: 0.5em 0.72em; background: var(--bhf-bubble-bg); color: var(--bhf-bubble-ink); border: 3px solid var(--fred-ink, #14110d); border-radius: 18px; font-weight: 700; font-size: clamp(0.72rem, 2.9vw, 1.02rem); line-height: 1.12; text-align: center; opacity: 0; transform: scale(0.55); transition: opacity 0.16s ease, transform 0.26s cubic-bezier(0.2, 1.5, 0.4, 1); } .bhf-bubble.show { opacity: 1; transform: scale(1); } .bhf-bubble::after, .bhf-bubble::before { content: ""; position: absolute; width: 0; height: 0; } /* tails — a triangle pointing back at the speaker */ .bhf-bubble.tail-down { translate: -50% calc(-100% - 16px); transform-origin: bottom center; } .bhf-bubble.tail-down::after { bottom: -15px; left: 46%; border-left: 12px solid transparent; border-right: 0 solid transparent; border-top: 16px solid var(--fred-ink, #14110d); } .bhf-bubble.tail-down::before { bottom: -10px; left: 48%; border-left: 8px solid transparent; border-right: 0 solid transparent; border-top: 11px solid var(--bhf-bubble-bg); z-index: 1; } .bhf-bubble.tail-up { translate: -50% 16px; transform-origin: top center; } .bhf-bubble.tail-up::after { top: -15px; left: 46%; border-left: 12px solid transparent; border-bottom: 16px solid var(--fred-ink, #14110d); } .bhf-bubble.tail-left { translate: 16px -50%; transform-origin: left center; } .bhf-bubble.tail-left::after { left: -15px; top: 46%; border-top: 12px solid transparent; border-right: 16px solid var(--fred-ink, #14110d); } .bhf-bubble.tail-right { translate: calc(-100% - 16px) -50%; transform-origin: right center; } .bhf-bubble.tail-right::after { right: -15px; top: 46%; border-top: 12px solid transparent; border-left: 16px solid var(--fred-ink, #14110d); } .bhf-bubble.tail-none { translate: -50% -50%; transform-origin: center; } /* thought balloon */ .bhf-bubble-think { border-style: dashed; border-radius: 50% / 40%; } /* shout balloon */ .bhf-bubble-shout { border-radius: 4px; font-family: 'Bangers', 'Comic Sans MS', cursive; letter-spacing: 0.03em; clip-path: polygon(0 12%, 8% 0, 22% 10%, 38% 0, 54% 9%, 70% 0, 86% 11%, 100% 3%, 94% 24%, 100% 44%, 92% 60%, 100% 80%, 86% 90%, 70% 100%, 54% 90%, 40% 100%, 24% 90%, 8% 100%, 2% 78%, 8% 58%, 0 40%, 6% 24%); background: var(--bhf-accent); color: #fff; -webkit-text-stroke: 0.5px var(--fred-ink); } /* ── controls ────────────────────────────────────────────────────────── */ .bhf-controls { display: flex; gap: 10px; justify-content: center; } .bhf-btn { min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; background: var(--bhf-ctrl-bg); color: var(--bhf-ink); border: 3px solid var(--bhf-ink); border-radius: 50%; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25); cursor: pointer; } .bhf-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25); } .bhf-play { background: var(--bhf-accent); color: #fff; } /* ── archive drawer ──────────────────────────────────────────────────── */ .bhf-archive { position: fixed; z-index: 9500; inset: auto 0 0 0; max-height: 78svh; background: var(--bhf-page); border-top: 5px solid var(--bhf-ink); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3); padding: 14px max(env(safe-area-inset-right, 0px), 16px) max(env(safe-area-inset-bottom, 0px), 16px) max(env(safe-area-inset-left, 0px), 16px); overflow: auto; animation: bhf-sheet 0.3s cubic-bezier(0.2, 0.9, 0.3, 1); } .bhf-archive[hidden] { display: none; } @keyframes bhf-sheet { from { transform: translateY(100%); } to { transform: translateY(0); } } .bhf-archive-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .bhf-archive-head h2 { font-family: 'Bangers', cursive; font-size: 1.6rem; letter-spacing: 0.03em; } .bhf-archive-list { display: grid; grid-template-columns: 1fr; gap: 10px; } @media (min-width: 520px) { .bhf-archive-list { grid-template-columns: 1fr 1fr; } } .bhf-archive-item { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 12px 14px; min-height: 56px; background: var(--bhf-ctrl-bg); border: 3px solid var(--bhf-ink); border-radius: 8px; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2); cursor: pointer; color: var(--bhf-ink); } .bhf-archive-item:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); } .bhf-archive-title { font-weight: 700; font-size: 1.05rem; } .bhf-archive-date { opacity: 0.6; font-size: 0.85rem; } /* ═══════════════════════════════════════════════════════════════════════ * FRED — internals (poses, faces, ambient life, the pop) * ═════════════════════════════════════════════════════════════════════ */ .bhf-fred { --fred-balloon-dk: color-mix(in srgb, var(--fred-balloon) 72%, #000 28%); } .bhf-limb { transform-box: fill-box; transition: transform 0.34s ease; } .bhf-arm-l { transform-origin: 100% 0%; } .bhf-arm-r { transform-origin: 0% 0%; } .bhf-leg-l { transform-origin: 100% 0%; } .bhf-leg-r { transform-origin: 0% 0%; } .bhf-torso { transform-origin: 50% 100%; } .bhf-fred-head { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 0.34s ease; } /* ambient float */ .bhf-fred-bob { transform-box: fill-box; animation: bhf-bob 3.4s ease-in-out infinite; } @keyframes bhf-bob { 0%, 100% { transform: translateY(0) rotate(-1.6deg); } 50% { transform: translateY(-7px) rotate(1.6deg); } } .bhf-shine { animation: bhf-shine 3.4s ease-in-out infinite; } @keyframes bhf-shine { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.75; } } /* faces — show the one matching data-face (default happy) */ .bhf-fred-face .face-var { display: none; } .bhf-fred[data-face="happy"] .face-happy, .bhf-fred:not([data-face]) .face-happy { display: block; } .bhf-fred[data-face="surprise"] .face-surprise { display: block; } .bhf-fred[data-face="scared"] .face-scared { display: block; } .bhf-fred[data-face="oblivious"] .face-oblivious { display: block; } .bhf-fred[data-face="curious"] .face-curious { display: block; } /* poses */ .bhf-fred[data-pose="walk"] .bhf-leg-l { animation: bhf-swingA 0.62s ease-in-out infinite; } .bhf-fred[data-pose="walk"] .bhf-leg-r { animation: bhf-swingB 0.62s ease-in-out infinite; } .bhf-fred[data-pose="walk"] .bhf-arm-l { animation: bhf-swingB 0.62s ease-in-out infinite; } .bhf-fred[data-pose="walk"] .bhf-arm-r { animation: bhf-swingA 0.62s ease-in-out infinite; } @keyframes bhf-swingA { 0%, 100% { transform: rotate(-15deg); } 50% { transform: rotate(15deg); } } @keyframes bhf-swingB { 0%, 100% { transform: rotate(15deg); } 50% { transform: rotate(-15deg); } } .bhf-fred[data-pose="lean"] .bhf-torso { transform: rotate(15deg); } .bhf-fred[data-pose="lean"] .bhf-fred-head { transform: rotate(15deg); } .bhf-fred[data-pose="lean"] .bhf-arm-l { transform: rotate(42deg); } .bhf-fred[data-pose="lean"] .bhf-arm-r { transform: rotate(48deg); } .bhf-fred[data-pose="reach"] .bhf-arm-r { transform: rotate(-128deg); } .bhf-fred[data-pose="reach"] .bhf-arm-l { transform: rotate(-18deg); } .bhf-fred[data-pose="reach"] .bhf-fred-head { transform: rotate(-6deg); } .bhf-fred[data-pose="shock"] .bhf-arm-l { transform: rotate(-58deg); } .bhf-fred[data-pose="shock"] .bhf-arm-r { transform: rotate(58deg); } .bhf-fred[data-pose="shock"] .bhf-leg-l { transform: rotate(-14deg); } .bhf-fred[data-pose="shock"] .bhf-leg-r { transform: rotate(14deg); } .bhf-fred[data-pose="shock"] .bhf-fred-head { transform: rotate(-10deg) translateY(-4px); } .bhf-fred[data-pose="limp"] .bhf-torso { transform: rotate(8deg); } .bhf-fred[data-pose="limp"] .bhf-arm-l { transform: rotate(12deg); } .bhf-fred[data-pose="limp"] .bhf-arm-r { transform: rotate(-6deg); } /* the POP: balloon vanishes, a frayed string is left dangling */ .bhf-fred-limp { display: none; } .bhf-fred[data-pop="1"] .bhf-fred-head { display: none; } .bhf-fred[data-pop="1"] .bhf-fred-limp { display: block; animation: bhf-dangle 1.1s ease-out; transform-box: fill-box; transform-origin: 50% 0%; } @keyframes bhf-dangle { 0% { transform: rotate(-26deg); } 30% { transform: rotate(20deg); } 60% { transform: rotate(-10deg); } 100% { transform: rotate(0deg); } } /* bee wings */ .bhf-wing { transform-box: fill-box; transform-origin: 50% 100%; animation: bhf-flap 0.11s linear infinite; } @keyframes bhf-flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.35); } } /* ── reduced motion ──────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .bhf-fred-bob, .bhf-shine, .bhf-wing, .bhf-fred[data-pose="walk"] .bhf-limb, .bhf-panel.bhf-cut .bhf-flash, .bhf-panel.bhf-cut .bhf-stage, .bhf-archive { animation: none !important; } .bhf-limb, .bhf-fred-head, .bhf-caption, .bhf-bubble, .bhf-panel { transition: none !important; } .bhf-panel.is-waiting { opacity: 1; } }