/* ========================================================================== Aurora Commissions — the Fog World, the Otherworld, and everything weird. Colours and fonts come from theme.json (Appearance → Editor → Styles), so everything below reads CSS variables instead of hard-coded values. Rules that Global Styles should be able to override are wrapped in :where(). ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { --void: var(--wp--preset--color--void, #0d0007); --panel: var(--wp--preset--color--panel, #170a1a); --panel-2: var(--wp--preset--color--panel-raised, #1e0f22); --border: var(--wp--preset--color--border, #3d2a3d); --fog: var(--wp--preset--color--fog, #5c4657); --ash: var(--wp--preset--color--ash, #8a7580); --bone: var(--wp--preset--color--bone, #ac9998); --rust: var(--wp--preset--color--rust, #4a0f1f); --rust-bright: var(--wp--preset--color--blood, #9c2340); --siren: var(--wp--preset--color--siren, #c2395a); --steel: var(--wp--preset--color--steel, #16283b); --steel-bright: var(--wp--preset--color--steel-glint, #4f83b5); --paper: var(--wp--preset--color--paper, #cdbfa6); --ink: var(--wp--preset--color--ink, #2a0d12); --metal-hi: var(--wp--custom--metal--hi, #171410); --metal-lo: var(--wp--custom--metal--lo, #100e0a); --metal-hover-hi: var(--wp--custom--metal--hover-hi, #241511); --metal-hover-lo: var(--wp--custom--metal--hover-lo, #150c0a); --eye-white: var(--wp--custom--eye--white, #d9cfbf); --eye-iris: var(--wp--custom--eye--iris, #4f83b5); --chain-rust: color-mix(in srgb, var(--rust-bright) 72%, #000); --font-body: var(--wp--preset--font-family--special-elite, 'Special Elite', 'Courier New', monospace); --font-display: var(--wp--preset--font-family--pirata-one, 'Pirata One', serif); --font-hand: var(--wp--preset--font-family--rock-salt, 'Rock Salt', cursive); /* Semantic accents the Otherworld reskins wholesale */ --accent: var(--steel-bright); --accent-dim: var(--steel); --card-filter: none; --fog-opacity: 0.58; --fence-opacity: 0; --rust-opacity: 0; --grain-opacity: 0.15; --card-max: var(--wp--custom--card-max, 900px); --card-tilt: -0.35deg; --glow-blood: color-mix(in srgb, var(--rust-bright) 50%, transparent); --glow-siren: color-mix(in srgb, var(--siren) 55%, transparent); --glow-accent: color-mix(in srgb, var(--accent) 40%, transparent); --admin-bar: var(--wp-admin--admin-bar--height, 0px); --au-fence: url("data:image/svg+xml;utf8,"); --au-drop-mask: url("data:image/svg+xml;utf8,"); --au-chain-mask: url("data:image/svg+xml;utf8,"); } /* The Otherworld: the siren peeled reality back to rust and blood. */ body.au-otherworld { --fog: var(--wp--preset--color--ow-fog, #6b3238); --ash: var(--wp--preset--color--ow-ash, #b08a86); --bone: var(--wp--preset--color--ow-bone, #d8bdb4); --accent: var(--rust-bright); --accent-dim: var(--rust); --eye-iris: var(--rust-bright); --card-filter: saturate(1.5) contrast(1.14) brightness(0.86) hue-rotate(-10deg); --fog-opacity: 0.28; --fence-opacity: 1; --rust-opacity: 1; --grain-opacity: 0.26; color: var(--bone); } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--panel-2) var(--void); scrollbar-width: thin; } body { margin: 0; padding: 54px 16px 40px; min-height: 100vh; position: relative; overflow-x: hidden; transition: background-color 1.1s ease, color 1.1s ease; background-attachment: fixed; cursor: url("data:image/svg+xml;utf8,") 13 13, crosshair; } /* Low specificity so a background picked in Global Styles wins. */ :where(body) { color: var(--bone); background-color: var(--void); background-image: radial-gradient(circle 620px at 14% 10%, color-mix(in srgb, var(--fog) 55%, transparent) 0%, transparent 68%), radial-gradient(circle 380px at 88% 22%, color-mix(in srgb, var(--steel) 60%, transparent) 0%, transparent 62%), radial-gradient(circle 780px at 72% 96%, color-mix(in srgb, var(--rust) 55%, transparent) 0%, transparent 65%), radial-gradient(circle 260px at 6% 78%, color-mix(in srgb, var(--panel-2) 80%, transparent) 0%, transparent 60%), linear-gradient(148deg, var(--panel-2) 0%, var(--panel) 38%, color-mix(in srgb, var(--void) 70%, var(--panel)) 72%, var(--void) 100%); } body.au-otherworld { background-color: #0b0304; background-image: radial-gradient(circle 640px at 20% 8%, rgba(120, 26, 40, 0.45) 0%, transparent 66%), radial-gradient(circle 520px at 84% 30%, rgba(70, 15, 25, 0.5) 0%, transparent 62%), radial-gradient(circle 820px at 60% 98%, rgba(150, 35, 50, 0.32) 0%, transparent 66%), linear-gradient(150deg, #1a0708 0%, #140506 42%, #0b0304 78%, #070202 100%); } img { max-width: 100%; height: auto; } ::selection { background: var(--rust-bright); color: #100e0a; } :focus-visible { outline: 2px solid var(--siren); outline-offset: 2px; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--void); } ::-webkit-scrollbar-thumb { background: var(--panel-2); border: 1px solid var(--border); } ::-webkit-scrollbar-thumb:hover { background: var(--rust); } /* Block-theme wrappers: spacing is designed here, not by the generic block gap. */ .wp-site-blocks > * { margin-block: 0; } .wp-site-blocks { position: relative; } .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .skip-link.screen-reader-text:focus { clip-path: none; height: auto; width: auto; margin: 0; padding: 12px 18px; left: 12px; top: calc(12px + var(--admin-bar)); z-index: 100000; background: var(--panel); color: var(--bone); border: 1px solid var(--siren); } /* -------------------------------------------------------------------------- 3. Zombie-hand cursor (js/cursor.js) Only hides the real cursor while JS says the hand is live (fine pointer). -------------------------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) { html.au-zombie-active, html.au-zombie-active * { cursor: none !important; } } .au-zombie-cursor { position: fixed; top: 0; left: 0; width: 28px; height: 32px; z-index: 10010; pointer-events: none; transform-origin: 6px 3px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.75)); transition: opacity 0.15s ease, filter 0.2s ease; will-change: transform; } .au-zombie-cursor.au-hidden { opacity: 0; } .au-zombie-cursor-inner { width: 100%; height: 100%; transition: transform 0.12s ease; } .au-zombie-cursor-inner svg { width: 100%; height: 100%; overflow: visible; filter: url(#au-rough); } .au-zombie-cursor.au-pointing { filter: drop-shadow(0 6px 14px var(--glow-blood)) brightness(1.15); } .au-zombie-cursor-inner.au-grabbing { transform: scale(0.85); } .au-zombie-cursor.au-twitch { animation: au-cursor-twitch 0.35s ease-in-out; } @keyframes au-cursor-twitch { 0%, 100% { rotate: 0deg; } 25% { rotate: -6deg; } 50% { rotate: 5deg; } 75% { rotate: -3deg; } } /* -------------------------------------------------------------------------- 4. Atmosphere layers (blocks/atmosphere) -------------------------------------------------------------------------- */ .au-atmosphere { position: static; } .au-ash { position: fixed; inset: 0; z-index: 9995; pointer-events: none; opacity: 0.7; mix-blend-mode: screen; } .au-grain { position: fixed; inset: -20%; z-index: 9999; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); background-size: 260px 260px, 347px 347px; background-position: 0 0, 61px 133px; animation: au-grain-shift 1s steps(6) infinite; transition: opacity 0.8s ease; } .au-grain.au-flash { opacity: 0.44 !important; } @keyframes au-grain-shift { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); } 60% { transform: translate(-4%, -2%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } } .au-vignette { position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: radial-gradient(ellipse at center, transparent 28%, rgba(0, 0, 0, 0.68) 78%, rgba(0, 0, 0, 0.96) 100%); } /* Hanging chains */ .au-chains { position: fixed; inset: 0; z-index: 2; pointer-events: none; transition: transform 0.2s ease-out; } .au-chain { position: absolute; top: -12px; transform-origin: 50% 0%; filter: drop-shadow(3px 6px 8px rgba(0, 0, 0, 0.65)); } .au-chain svg { display: block; width: 42px; height: auto; } .au-chain--a { left: 2.5%; animation: au-chain-sway-a 19s ease-in-out infinite; } .au-chain--b { left: 8.5%; animation: au-chain-sway-b 24s ease-in-out infinite; } .au-chain--c { right: 3%; animation: au-chain-sway-a 21s ease-in-out infinite reverse; } .au-chain--d { right: 10%; animation: au-chain-sway-b 27s ease-in-out infinite reverse; } @keyframes au-chain-sway-a { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.8deg); } } @keyframes au-chain-sway-b { 0%, 100% { transform: rotate(1.1deg); } 50% { transform: rotate(-1.4deg); } } /* A chain gets yanked when you click near it (js/atmosphere.js). */ .au-chain.au-yank { animation: au-chain-yank 1.4s cubic-bezier(.3, 1.8, .5, 1); } @keyframes au-chain-yank { 0% { transform: rotate(0); } 15% { transform: rotate(9deg); } 35% { transform: rotate(-7deg); } 55% { transform: rotate(4deg); } 75% { transform: rotate(-2deg); } 100% { transform: rotate(0); } } /* Drifting fog */ .au-fog { position: fixed; inset: -20%; z-index: 3; pointer-events: none; filter: blur(50px); mix-blend-mode: screen; opacity: var(--fog-opacity); transition: opacity 1.1s ease; } .au-fog span { position: absolute; display: block; background: radial-gradient(circle, color-mix(in srgb, var(--fog) 70%, transparent) 0%, transparent 70%); } .au-fog span:nth-child(1) { width: 60vw; height: 40vw; top: 5%; left: -10%; border-radius: 42% 58% 63% 37% / 47% 45% 55% 53%; animation: au-fog-a 90s ease-in-out infinite; } .au-fog span:nth-child(2) { width: 50vw; height: 46vw; top: 40%; right: -15%; background: radial-gradient(circle, color-mix(in srgb, var(--steel) 70%, transparent) 0%, transparent 70%); border-radius: 63% 37% 41% 59% / 55% 62% 38% 45%; animation: au-fog-b 110s ease-in-out infinite; } .au-fog span:nth-child(3) { width: 45vw; height: 38vw; bottom: -10%; left: 20%; background: radial-gradient(circle, color-mix(in srgb, var(--rust) 60%, transparent) 0%, transparent 70%); border-radius: 50% 50% 38% 62% / 62% 40% 60% 38%; animation: au-fog-c 130s ease-in-out infinite; } .au-fog span:nth-child(4) { width: 70vw; height: 50vw; top: 25%; left: 30%; background: radial-gradient(circle, color-mix(in srgb, var(--ash) 35%, transparent) 0%, transparent 72%); border-radius: 55% 45% 48% 52% / 40% 55% 45% 60%; animation: au-fog-d 150s ease-in-out infinite; } @keyframes au-fog-a { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(6vw, 4vh) scale(1.08); } 66% { transform: translate(-4vw, 6vh) scale(0.96); } } @keyframes au-fog-b { 0%, 100% { transform: translate(0, 0) scale(1); } 40% { transform: translate(-7vw, -5vh) scale(1.05); } 70% { transform: translate(3vw, 5vh) scale(0.94); } } @keyframes au-fog-c { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(5vw, -6vh) scale(1.1); } } @keyframes au-fog-d { 0%, 100% { transform: translate(0, 0) scale(1); } 45% { transform: translate(-5vw, 4vh) scale(1.06); } 75% { transform: translate(4vw, -3vh) scale(0.97); } } /* Otherworld: chain-link fence + rust wash */ .au-fence { position: fixed; inset: -4%; z-index: 4; pointer-events: none; background-image: var(--au-fence); background-size: 46px 46px; opacity: var(--fence-opacity); filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.6)); transition: opacity 1.1s ease, transform 1.1s ease; transform: scale(1.04); } body.au-otherworld .au-fence { transform: scale(1); animation: au-fence-breathe 14s ease-in-out infinite; } @keyframes au-fence-breathe { 0%, 100% { background-position: 0 0; } 50% { background-position: 3px 4px; } } .au-rust { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: var(--rust-opacity); mix-blend-mode: multiply; background: radial-gradient(circle 40vw at 12% 18%, rgba(90, 18, 26, 0.55) 0%, transparent 60%), radial-gradient(circle 34vw at 88% 40%, rgba(60, 12, 18, 0.6) 0%, transparent 58%), radial-gradient(circle 50vw at 50% 100%, rgba(110, 30, 40, 0.5) 0%, transparent 62%); transition: opacity 1.1s ease; } /* Flashlight */ .au-spotlight { position: fixed; inset: 0; z-index: 9997; pointer-events: none; --au-spot-intensity: 1; opacity: var(--au-spot-intensity); background: radial-gradient(circle 85px at var(--mx, 50%) var(--my, 40%), rgba(255, 247, 222, 0.65) 0%, rgba(255, 247, 222, 0.3) 45%, transparent 68%), radial-gradient(circle 320px at var(--mx, 50%) var(--my, 40%), rgba(255, 238, 205, 0.1) 0%, transparent 72%); mix-blend-mode: screen; transition: opacity 0.09s linear; } @media (hover: none), (pointer: coarse) { .au-spotlight { display: none; } } /* Halo of the Sun sigil */ .au-sigil { position: fixed; top: 50%; left: 50%; width: 760px; height: 760px; margin: -380px 0 0 -380px; color: var(--accent); opacity: 0.06; z-index: 1; pointer-events: none; animation: au-sigil-spin 160s linear infinite; transition: color 1.1s ease, opacity 1.1s ease, filter 1.1s ease; } .au-sigil svg { width: 100%; height: 100%; } body.au-otherworld .au-sigil { opacity: 0.12; animation-duration: 60s; filter: drop-shadow(0 0 30px var(--glow-blood)); } @keyframes au-sigil-spin { to { transform: rotate(360deg); } } /* Dread event overlays (js/dread.js) */ .au-alarm-overlay { position: fixed; inset: 0; z-index: 9996; pointer-events: none; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--rust-bright) 40%, transparent) 0%, transparent 70%); opacity: 0; } .au-alarm-overlay.au-active { animation: au-alarm-pulse 4.5s ease-in-out; } @keyframes au-alarm-pulse { 0% { opacity: 0; } 30% { opacity: 0.85; } 55% { opacity: 0.25; } 75% { opacity: 0.7; } 100% { opacity: 0; } } .au-tracking { position: fixed; left: 0; right: 0; top: -6vh; height: 3vh; z-index: 10000; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02)); mix-blend-mode: overlay; opacity: 0; } .au-tracking.au-active { animation: au-tracking-sweep 1.1s linear; } @keyframes au-tracking-sweep { 0% { top: -6vh; opacity: 0.9; } 100% { top: 106vh; opacity: 0; } } .au-subliminal { position: fixed; z-index: 10001; pointer-events: none; font-family: var(--font-hand); color: rgba(232, 227, 216, 0.9); text-shadow: 0 0 14px var(--glow-blood), 0 0 3px #000; font-size: 1.15rem; max-width: 60vw; opacity: 0; } .au-subliminal.au-active { animation: au-subliminal-flash 0.32s steps(1, jump-end); } @keyframes au-subliminal-flash { 0% { opacity: 0; } 30% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 0; } } .au-shadow-figure { position: fixed; z-index: 5; width: 70px; height: 160px; pointer-events: none; filter: blur(3px); opacity: 0; } .au-shadow-figure::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, 0.75); } .au-shadow-figure::after { content: ''; position: absolute; top: 28px; left: 50%; transform: translateX(-50%); width: 60px; height: 130px; border-radius: 40% 40% 20% 20%; background: rgba(0, 0, 0, 0.7); } .au-shadow-figure.au-active { animation: au-shadow-blip 0.7s ease-in-out; } @keyframes au-shadow-blip { 0% { opacity: 0; } 40% { opacity: 0.5; } 60% { opacity: 0.35; } 100% { opacity: 0; } } .au-blackout-overlay { position: fixed; inset: 0; z-index: 10002; pointer-events: none; background: #000; opacity: 0; } .au-blackout-overlay.au-active { animation: au-blackout-flash 0.9s steps(2, jump-end); } @keyframes au-blackout-flash { 0% { opacity: 0; } 15% { opacity: 1; } 35% { opacity: 0.85; } 50% { opacity: 1; } 70% { opacity: 0.15; } 100% { opacity: 0; } } /* Siren transition flash + label */ .au-worldflash { position: fixed; inset: 0; z-index: 10004; pointer-events: none; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--rust-bright) 50%, transparent) 0%, rgba(11, 3, 4, 0.9) 75%); opacity: 0; } .au-worldflash span { font-family: var(--font-hand); font-size: clamp(1.2rem, 4vw, 2.6rem); color: #f2d9cf; letter-spacing: 2px; text-align: center; padding: 0 16px; text-shadow: 0 0 18px var(--rust-bright), 0 2px 0 #000; transform: scale(0.9); } .au-worldflash.au-active { animation: au-worldflash-in 2.2s ease-out; } .au-worldflash.au-active span { animation: au-worldflash-text 2.2s ease-out; } @keyframes au-worldflash-in { 0% { opacity: 0; } 12% { opacity: 1; } 55% { opacity: 0.8; } 100% { opacity: 0; } } @keyframes au-worldflash-text { 0% { opacity: 0; transform: scale(1.25) rotate(-2deg); } 20% { opacity: 1; transform: scale(1) rotate(-1deg); } 80% { opacity: 0.9; } 100% { opacity: 0; transform: scale(0.96); } } /* The memo scrap — only legible in the Otherworld */ .au-memo { position: fixed; right: 3vw; bottom: 12vh; z-index: 6; max-width: 220px; padding: 16px 18px; font-family: var(--font-hand); font-size: 0.82rem; line-height: 1.6; color: var(--ink); text-align: center; background: linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 82%, #5a4020) 100%); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6), inset 0 0 22px rgba(120, 90, 60, 0.5); transform: rotate(-4deg) scale(0.9); opacity: 0; pointer-events: none; transition: opacity 1.2s ease, transform 1.2s ease; clip-path: polygon(2% 4%, 40% 0, 62% 5%, 98% 2%, 96% 46%, 100% 92%, 55% 98%, 8% 96%, 3% 52%); } body.au-otherworld .au-memo { opacity: 0.92; transform: rotate(-4deg) scale(1); } /* The secret-word message */ .au-secret-msg { position: fixed; left: 50%; top: 42%; z-index: 10007; pointer-events: none; transform: translate(-50%, -50%) rotate(-3deg) scale(0.8); font-family: var(--font-hand); font-size: clamp(1.1rem, 3.4vw, 2rem); color: #ffd9e4; text-align: center; max-width: 86vw; text-shadow: 0 0 18px #e0567a, 0 0 4px #000; opacity: 0; } .au-secret-msg.au-active { animation: au-secret-msg 5s ease both; } @keyframes au-secret-msg { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-3deg) scale(0.6); } 12% { opacity: 1; transform: translate(-50%, -50%) rotate(-2deg) scale(1.05); } 20% { transform: translate(-50%, -50%) rotate(-3deg) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) rotate(-4deg) scale(1); } } /* -------------------------------------------------------------------------- 5. VHS on-screen display (js/quirks.js) -------------------------------------------------------------------------- */ .au-osd { position: fixed; top: calc(14px + var(--admin-bar)); right: 18px; z-index: 10001; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 2px; color: rgba(236, 232, 222, 0.78); pointer-events: none; text-shadow: 1px 0 rgba(255, 30, 70, 0.55), -1px 0 rgba(40, 200, 255, 0.45), 0 0 6px rgba(0, 0, 0, 0.9); } .au-osd-mode { font-size: 0.95rem; } body.au-otherworld .au-osd-mode { color: #ff5a6e; animation: au-rec-blink 1s steps(1) infinite; } @keyframes au-rec-blink { 50% { opacity: 0.25; } } .au-osd.au-glitch { animation: au-osd-glitch 0.5s steps(3); } @keyframes au-osd-glitch { 0% { transform: translate(0); } 33% { transform: translate(-4px, 2px) skewX(-8deg); } 66% { transform: translate(3px, -1px) skewX(6deg); } 100% { transform: translate(0); } } /* -------------------------------------------------------------------------- 6. Pocket console: radio / siren / save / don't -------------------------------------------------------------------------- */ .au-console { position: fixed; left: 18px; bottom: 18px; z-index: 10005; display: flex; flex-direction: column; gap: 10px; } .au-console-btn { display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px 8px 10px; background: linear-gradient(180deg, #1b1510 0%, #0f0b08 100%); border: 1px solid var(--border); color: var(--ash); font-family: var(--font-body); font-size: 0.66rem; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6), inset 0 0 12px rgba(0, 0, 0, 0.5); transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.12s ease; } .au-console-btn svg { width: 20px; height: 20px; flex-shrink: 0; } .au-console-btn:hover { color: var(--bone); border-color: var(--accent); } .au-console-btn:active { transform: translateY(1px); } .au-console-label { white-space: nowrap; } .au-radio-freq { font-size: 0.6rem; letter-spacing: 1px; color: var(--fog); padding: 1px 4px; border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); background: #07060a; min-width: 3.4em; text-align: center; font-variant-numeric: tabular-nums; } .au-radio-btn[aria-pressed="true"] { color: var(--steel-bright); border-color: var(--steel-bright); box-shadow: 0 0 16px color-mix(in srgb, var(--steel-bright) 40%, transparent), inset 0 0 12px color-mix(in srgb, var(--steel) 40%, transparent); } .au-radio-btn[aria-pressed="true"] .au-radio-freq { color: #9fe8b0; text-shadow: 0 0 6px rgba(120, 255, 160, 0.6); } .au-radio-btn[aria-pressed="true"] svg { animation: au-radio-jitter 0.16s steps(2) infinite; } .au-radio-btn.au-whispering .au-radio-freq { color: #ff7a8c; text-shadow: 0 0 8px rgba(255, 60, 90, 0.8); } @keyframes au-radio-jitter { 0% { transform: translate(0, 0); } 50% { transform: translate(0.6px, -0.6px); } 100% { transform: translate(-0.5px, 0.5px); } } .au-siren-btn { color: var(--siren); } .au-siren-btn svg { color: var(--rust-bright); } .au-siren-btn:hover { border-color: var(--rust-bright); box-shadow: 0 0 16px var(--glow-blood); } body.au-otherworld .au-siren-btn { color: #f2d9cf; border-color: var(--rust-bright); box-shadow: 0 0 18px var(--glow-blood); } body.au-otherworld .au-siren-btn svg { animation: au-radio-jitter 0.12s steps(2) infinite; } .au-save-btn svg { color: var(--rust-bright); } .au-save-btn:hover svg { filter: drop-shadow(0 0 8px var(--glow-blood)); } .au-save-btn.au-saving svg { animation: au-save-spin 0.9s ease; } @keyframes au-save-spin { from { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.35); } to { transform: rotate(360deg) scale(1); } } .au-dont-btn svg { color: #c21b2c; filter: drop-shadow(0 0 4px rgba(194, 27, 44, 0.5)); transition: transform 0.15s ease; } .au-dont-btn:hover svg { transform: scale(1.12); animation: au-radio-jitter 0.1s steps(2) infinite; } .au-dont-btn:active svg { transform: scale(0.85); } .au-dont-btn.au-sulking { opacity: 0.55; } /* Save toast */ .au-savetoast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); z-index: 10006; pointer-events: none; opacity: 0; padding: 16px 30px; max-width: 86vw; text-align: center; background: rgba(11, 3, 4, 0.85); border: 1px solid var(--rust-bright); color: #f2d9cf; font-family: var(--font-hand); font-size: 1rem; letter-spacing: 1px; box-shadow: 0 0 40px var(--glow-blood), inset 0 0 20px color-mix(in srgb, var(--rust-bright) 25%, transparent); } .au-savetoast.au-active { animation: au-savetoast 1.8s ease; } @keyframes au-savetoast { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.02); } } /* -------------------------------------------------------------------------- 7. The card (blocks/card) -------------------------------------------------------------------------- */ .au-card { max-width: var(--card-max); margin: 0 auto; background-color: var(--panel); border: 1px solid var(--border); position: relative; z-index: 10; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.65), 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 80px color-mix(in srgb, var(--rust-bright) 5%, transparent); filter: var(--card-filter); transform: rotate(var(--card-tilt)); animation: au-card-breathe 9s ease-in-out infinite; transition: filter 1.1s ease, box-shadow 1.1s ease; } body.au-otherworld .au-card { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7), 0 0 70px color-mix(in srgb, var(--rust-bright) 28%, transparent); } @keyframes au-card-breathe { 0%, 100% { transform: rotate(var(--card-tilt)) scale(1); } 50% { transform: rotate(var(--card-tilt)) scale(1.004); } } /* Rust drips down from the top edge */ .au-card::before { content: ''; position: absolute; top: -2px; left: 0; right: 0; height: 50px; pointer-events: none; z-index: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--rust) 55%, transparent) 0%, transparent 85%) no-repeat, linear-gradient(180deg, color-mix(in srgb, var(--rust) 45%, transparent) 0%, transparent 70%) no-repeat, linear-gradient(180deg, color-mix(in srgb, var(--rust) 50%, transparent) 0%, transparent 90%) no-repeat, linear-gradient(180deg, color-mix(in srgb, var(--rust) 40%, transparent) 0%, transparent 75%) no-repeat; background-size: 3px 40px, 4px 28px, 2px 46px, 3px 32px; background-position: 6% 0, 11% 0, 88% 0, 93% 0; } /* Coffee ring + a dried thumbprint, because someone put their mug down on it */ .au-card.has-stains { background-image: radial-gradient(circle at 91% 16%, transparent 37px, rgba(120, 72, 40, 0.16) 38px, rgba(120, 72, 40, 0.07) 42px, transparent 45px), radial-gradient(circle at 89.4% 17.5%, transparent 33px, rgba(120, 72, 40, 0.08) 34px, transparent 36px), radial-gradient(ellipse 13px 17px at 6% 92%, color-mix(in srgb, var(--rust-bright) 16%, transparent) 0%, color-mix(in srgb, var(--rust) 10%, transparent) 60%, transparent 72%); } /* The dog-eared corner */ .au-card.has-dog-ear::after { content: ''; position: absolute; right: -1px; bottom: -1px; z-index: 4; width: 34px; height: 34px; pointer-events: none; background: linear-gradient(315deg, var(--void) 0 50%, color-mix(in srgb, var(--panel-2) 70%, #fff 6%) 50%, var(--panel) 100%); box-shadow: -3px -3px 6px rgba(0, 0, 0, 0.45); transition: width 0.3s ease, height 0.3s ease; } .au-card.has-dog-ear:hover::after { width: 40px; height: 40px; } .au-crt-intro { animation: au-crt-on 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; transform-origin: center; } @keyframes au-crt-on { 0% { transform: rotate(var(--card-tilt)) scaleY(0.02) scaleX(1.06); opacity: 0; filter: brightness(3.5); } 28% { transform: rotate(var(--card-tilt)) scaleY(1.03) scaleX(0.98); opacity: 1; filter: brightness(2.2); } 45% { transform: rotate(var(--card-tilt)) scaleY(0.88) scaleX(1); } 62% { transform: rotate(var(--card-tilt)) scaleY(1.02) scaleX(1); filter: brightness(1.4); } 80% { transform: rotate(var(--card-tilt)) scaleY(0.98) scaleX(1); filter: brightness(1.1); } 100% { transform: rotate(var(--card-tilt)) scaleY(1) scaleX(1); opacity: 1; filter: brightness(1); } } .au-card.au-glitch-burst { animation: au-glitch-burst 0.5s steps(1, jump-end); } @keyframes au-glitch-burst { 0% { transform: rotate(var(--card-tilt)) translate(0, 0); filter: var(--card-filter); } 10% { transform: rotate(var(--card-tilt)) translate(-3px, 1px); filter: hue-rotate(-8deg) saturate(1.4); } 20% { transform: rotate(var(--card-tilt)) translate(3px, -1px); filter: hue-rotate(8deg) saturate(1.6); } 30% { transform: rotate(var(--card-tilt)) translate(-2px, 0); filter: var(--card-filter); } 40% { transform: rotate(var(--card-tilt)) translate(2px, 1px); filter: hue-rotate(-6deg); } 50%, 100% { transform: rotate(var(--card-tilt)) translate(0, 0); filter: var(--card-filter); } } /* Water leaks (js/leak.js adds the drops) */ .au-leaks { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .au-leak { position: absolute; top: 0; } .au-leak-stain { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 64px; height: 38px; background: radial-gradient(ellipse at 50% 25%, rgba(13, 4, 9, 0.6) 0%, rgba(13, 4, 9, 0.28) 55%, transparent 78%); border-radius: 43% 57% 61% 39% / 51% 48% 59% 41%; filter: blur(2px); } .au-leak--b .au-leak-stain { width: 46px; height: 28px; border-radius: 58% 42% 39% 61% / 44% 56% 41% 63%; } .au-leak--c .au-leak-stain { width: 78px; height: 44px; border-radius: 39% 61% 52% 48% / 60% 41% 57% 40%; } .au-leak-trail { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 3px; background: linear-gradient(180deg, rgba(13, 4, 9, 0.55) 0%, rgba(13, 4, 9, 0.18) 65%, transparent 100%); border-radius: 2px; } .au-leak-drop { position: absolute; left: 50%; width: 4px; height: 8px; transform: translateX(-50%); background: linear-gradient(180deg, rgba(20, 7, 14, 0.75), rgba(20, 7, 14, 0.35)); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; opacity: 0.85; } /* -------------------------------------------------------------------------- 8. Masthead (blocks/masthead) -------------------------------------------------------------------------- */ .au-masthead { text-align: center; padding: 20px 10px 12px; border-bottom: 1px solid var(--border); position: relative; z-index: 2; } :where(.au-masthead-name) { font-family: var(--font-display); font-size: 3.3rem; line-height: 1.12; } .au-masthead-name { display: block; margin: 0; font-weight: 400; color: var(--bone); text-shadow: 0 0 20px var(--glow-accent), 0 2px 0 #000; transition: text-shadow 1.1s ease; } body.au-otherworld .au-masthead-name { text-shadow: 0 0 22px color-mix(in srgb, var(--rust-bright) 60%, transparent), 0 2px 0 #000; } /* Hand-set letters (js/atmosphere.js splits the name) */ .au-letters { display: inline-block; } .au-letter { display: inline-block; white-space: pre; transform: translate(0, var(--ly, 0)) rotate(var(--lr, 0deg)); animation: au-letter-jitter var(--ld, 6s) ease-in-out var(--ldelay, 0s) infinite; transition: transform 0.45s cubic-bezier(0.3, 1.7, 0.5, 1), color 0.3s ease; } @keyframes au-letter-jitter { 0%, 100% { transform: translate(0, var(--ly, 0)) rotate(var(--lr, 0deg)); } 50% { transform: translate(0, calc(var(--ly, 0px) * -1)) rotate(calc(var(--lr, 0deg) * -1)); } } .au-masthead-name:hover .au-letter { animation-play-state: paused; transform: translate(var(--sx, 0), var(--sy, 0)) rotate(var(--sr, 0deg)); } .au-letter.au-fallen { animation: au-letter-fall 2.4s cubic-bezier(0.5, 0, 0.6, 1) both; } @keyframes au-letter-fall { 0% { transform: translate(0, 0) rotate(0); } 18% { transform: translate(0, 0) rotate(22deg); } 28% { transform: translate(2px, 0.55em) rotate(78deg); } 34% { transform: translate(3px, 0.45em) rotate(70deg); } 80% { transform: translate(3px, 0.5em) rotate(74deg); } 100% { transform: translate(0, 0) rotate(0); } } .au-masthead-sub { display: block; margin-top: 8px; font-size: 0.7rem; letter-spacing: 3px; text-transform: uppercase; color: var(--fog); } .au-masthead-loc { display: block; margin-top: 5px; font-size: 0.62rem; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-dim); opacity: 0.85; } body.au-otherworld .au-masthead-loc { color: var(--rust-bright); opacity: 1; } .au-tear { height: 9px; background: linear-gradient(135deg, var(--panel) 50%, transparent 50%) 0 0 / 14px 18px repeat-x, linear-gradient(-135deg, var(--panel) 50%, transparent 50%) 0 0 / 14px 18px repeat-x, linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--rust) 30%, transparent) 18%, transparent 30%, transparent 70%, color-mix(in srgb, var(--rust) 25%, transparent) 84%, transparent 100%); background-color: #0b0a08; } /* -------------------------------------------------------------------------- 9. Nav: core Navigation block, "Rusted 2×2 grid" style -------------------------------------------------------------------------- */ nav.wp-block-navigation.is-style-aurora-grid { display: block; position: relative; z-index: 2; border-bottom: 1px solid var(--border); font-size: 0.95rem; } .is-style-aurora-grid .wp-block-navigation__container, .is-style-aurora-grid .wp-block-page-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 !important; width: 100%; margin: 0; padding: 0; } .is-style-aurora-grid .wp-block-navigation-item { display: block; margin: 0; } /* The automatic "list all pages" fallback nests its own list inside the grid. */ .is-style-aurora-grid .wp-block-navigation__container > .wp-block-page-list { grid-column: 1 / -1; } /* An odd one out spans the whole row instead of leaving a hole. */ .is-style-aurora-grid .wp-block-navigation__container > .wp-block-navigation-item:last-child:nth-child(odd), .is-style-aurora-grid .wp-block-page-list > .wp-block-navigation-item:last-child:nth-child(odd) { grid-column: 1 / -1; } .is-style-aurora-grid .wp-block-navigation-item__content { display: block; width: 100%; text-align: center; padding: 16px 10px !important; background: radial-gradient(circle at 7px 7px, #3a2e25 1.6px, transparent 2.4px), radial-gradient(circle at calc(100% - 7px) 7px, #3a2e25 1.6px, transparent 2.4px), radial-gradient(circle at 7px calc(100% - 7px), #3a2e25 1.6px, transparent 2.4px), radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #3a2e25 1.6px, transparent 2.4px), linear-gradient(180deg, var(--metal-hi) 0%, var(--metal-lo) 100%); color: var(--ash) !important; letter-spacing: 1px; text-decoration: none !important; border: 1px solid #000; text-shadow: 0 1px 0 #000, 0 0 12px rgba(0, 0, 0, 0.6); transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.15s ease, box-shadow 0.3s ease; } .is-style-aurora-grid .wp-block-navigation-item__content:hover { background: radial-gradient(circle at 7px 7px, #4a3326 1.6px, transparent 2.4px), radial-gradient(circle at calc(100% - 7px) 7px, #4a3326 1.6px, transparent 2.4px), radial-gradient(circle at 7px calc(100% - 7px), #4a3326 1.6px, transparent 2.4px), radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #4a3326 1.6px, transparent 2.4px), linear-gradient(180deg, var(--metal-hover-hi) 0%, var(--metal-hover-lo) 100%); color: var(--siren) !important; text-shadow: 0 0 8px var(--glow-siren), 0 1px 0 #000; transform: translateY(1px) rotate(var(--nav-tilt, -0.4deg)); } .is-style-aurora-grid .wp-block-navigation-item:nth-child(even) .wp-block-navigation-item__content:hover { --nav-tilt: 0.5deg; } .is-style-aurora-grid .current-menu-item > .wp-block-navigation-item__content, .is-style-aurora-grid .wp-block-navigation-item__content[aria-current="page"] { background: linear-gradient(180deg, var(--metal-hover-hi) 0%, var(--metal-hover-lo) 100%); color: var(--bone) !important; box-shadow: inset 0 0 20px color-mix(in srgb, var(--rust-bright) 15%, transparent); } body.au-otherworld .is-style-aurora-grid .wp-block-navigation-item__content { background: linear-gradient(180deg, #24100f 0%, #16090a 100%); } body.au-otherworld .is-style-aurora-grid .current-menu-item > .wp-block-navigation-item__content, body.au-otherworld .is-style-aurora-grid .wp-block-navigation-item__content[aria-current="page"] { background: linear-gradient(180deg, #4a1419 0%, #2a0a0e 100%); box-shadow: inset 0 0 22px color-mix(in srgb, var(--rust-bright) 45%, transparent); } /* -------------------------------------------------------------------------- 10. Content frame + outlet + page-tear canvas -------------------------------------------------------------------------- */ .au-content { margin: 24px; border: 1px dashed var(--border); padding: 28px; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 32px; position: relative; z-index: 2; } .au-content.au-content > * { margin-block: 0; } .au-content.is-wide { grid-template-columns: minmax(0, 1fr); } .au-outlet { min-width: 0; transition: opacity 0.18s ease, filter 0.18s ease; } .au-outlet:focus { outline: none; } .au-outlet-leaving { opacity: 0; filter: blur(3px); } .au-outlet-entering { animation: au-outlet-in 0.28s ease; } @keyframes au-outlet-in { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: none; } } .au-tear-canvas { position: fixed; z-index: 400; pointer-events: none; display: none; opacity: 0; transform-origin: 50% 50%; will-change: opacity, transform; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55)) contrast(1.05); } .au-tear-canvas.au-tear-active { display: block; opacity: 1; transition: opacity 0.12s ease; } .au-tear-canvas.au-tear-out { opacity: 0; transition: opacity 0.16s ease; } /* -------------------------------------------------------------------------- 11. Profile & polaroid (blocks/profile) -------------------------------------------------------------------------- */ .au-profile { position: relative; } .au-profile-image-btn { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; position: relative; text-align: inherit; } .au-profile-image-wrap { position: relative; } .au-profile-image-btn::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: -14px; height: 22px; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, transparent 75%); filter: blur(2px); pointer-events: none; } .au-profile-frame { display: block; position: relative; } .au-profile-image { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; overflow: hidden; width: 100%; border: 1px solid var(--border); background: #0c0b09; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(0, 0, 0, 0.5); transition: box-shadow 0.3s ease; } .au-profile-image img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35) sepia(0.12) contrast(1.12) brightness(0.9); transition: filter 1.1s ease, transform 0.8s ease; } body.au-otherworld .au-profile-image img { filter: grayscale(0.15) sepia(0.35) contrast(1.25) brightness(0.82) hue-rotate(-8deg); } .au-profile-image-btn:hover .au-profile-image img { filter: grayscale(0) sepia(0) contrast(1.05) brightness(1); transform: scale(1.03); } .au-profile-image-btn:hover .au-profile-image { box-shadow: 0 0 0 1px var(--rust-bright), 0 0 24px color-mix(in srgb, var(--rust-bright) 35%, transparent); } .au-profile-image-btn:focus-visible { outline: none; } .au-profile-image-btn:focus-visible .au-profile-frame { outline: 2px solid var(--siren); outline-offset: 4px; } .au-profile-image.au-glitching img { animation: au-photo-glitch 0.6s steps(4); } @keyframes au-photo-glitch { 0%, 100% { transform: none; filter: grayscale(0.35) contrast(1.12); } 25% { transform: translate(-3px, 1px); filter: hue-rotate(90deg) saturate(3) contrast(1.6); } 50% { transform: translate(3px, -2px) scaleX(-1); filter: invert(1) contrast(1.4); } 75% { transform: translate(-1px, 2px); filter: hue-rotate(-60deg) saturate(2); } } .au-placeholder { color: var(--fog); font-size: 0.8rem; text-align: center; padding: 20px; font-family: var(--font-hand); } /* Polaroid */ .au-profile.is-polaroid .au-profile-frame { padding: 11px 11px 42px; background: linear-gradient(172deg, #e4d8c2 0%, #cfc0a2 62%, #b9a787 100%); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.65), inset 0 0 30px rgba(120, 90, 60, 0.35); transform: rotate(-2.2deg); transition: transform 0.55s cubic-bezier(0.3, 1.6, 0.5, 1); } .au-profile.is-polaroid .au-profile-image { border: 0; box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.7); } .au-profile.is-polaroid .au-profile-image-btn:hover .au-profile-frame { transform: rotate(0.8deg) scale(1.02); } .au-profile.is-polaroid .au-profile-image-btn::after { bottom: -18px; } .au-tape { position: absolute; top: -13px; left: 50%; z-index: 3; width: 96px; height: 28px; transform: translateX(-50%) rotate(3.5deg); background: linear-gradient(90deg, rgba(214, 204, 172, 0.62), rgba(236, 228, 202, 0.46) 50%, rgba(214, 204, 172, 0.6)); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); clip-path: polygon(3% 0, 97% 5%, 100% 48%, 96% 100%, 2% 95%, 0 46%); } .au-polaroid-caption { position: absolute; left: 8px; right: 8px; bottom: 9px; font-family: var(--font-hand); font-size: 0.8rem; line-height: 1.3; color: var(--ink); text-align: center; transform: rotate(-1.5deg); } .au-gallery-hint { display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; font-size: 0.68rem; color: var(--fog); margin: 18px 0 0; letter-spacing: 0.5px; transition: color 0.3s ease; } .au-gallery-hint svg { width: 15px; height: 15px; flex-shrink: 0; } .au-gallery-hint .au-hint-pupil { transition: transform 0.2s ease; transform-origin: center; transform-box: fill-box; } .au-profile-image-btn:hover ~ .au-gallery-hint { color: var(--accent); } .au-profile-image-btn:hover ~ .au-gallery-hint svg { animation: au-hint-blink 0.4s ease; } @keyframes au-hint-blink { 50% { transform: scaleY(0.1); } } .au-profile-meta { text-align: center; margin: 22px 0 12px; font-size: 0.9rem; color: var(--ash); } .au-profile-bio { font-size: 0.85rem; line-height: 1.7; margin: 0 0 14px; color: var(--bone); } .au-haggle-note { font-size: 0.75rem; color: var(--fog); font-style: italic; margin: 0; } /* -------------------------------------------------------------------------- 12. Commission status (blocks/status) -------------------------------------------------------------------------- */ .au-panel { text-align: center; } .au-panel.au-panel > * + * { margin-block-start: 1.3rem; } .au-status-panel { text-align: center; } .au-drop-row { color: var(--rust); margin-bottom: 8px; height: 22px; filter: drop-shadow(0 0 6px var(--glow-blood)); } .au-drop-row svg { width: 18px; height: 18px; animation: au-drip 7s ease-in infinite; } @keyframes au-drip { 0%, 70% { transform: translateY(0) scale(1); opacity: 1; } 76% { transform: translateY(-1px) scaleY(1.15); } 88% { transform: translateY(34px) scaleY(1.25); opacity: 0.9; } 89% { opacity: 0; transform: translateY(40px); } 90% { transform: translateY(-6px) scale(0.4); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } :where(.au-status) { font-family: var(--font-hand); font-size: 1.5rem; line-height: 1.7; } .au-status { margin: 0 0 12px; color: var(--bone); letter-spacing: 0.5px; display: inline-block; text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0, 0, 0, 0.8), 3px 3px 0 rgba(0, 0, 0, 0.6), 4px 4px 6px rgba(0, 0, 0, 0.5); animation: au-scribble-a 6.5s ease-in-out infinite; } @keyframes au-scribble-a { 0%, 100% { transform: rotate(-1.1deg); } 30% { transform: rotate(-0.3deg); } 60% { transform: rotate(-1.7deg); } 80% { transform: rotate(-0.8deg); } } .au-status-word { color: var(--siren); text-decoration: underline; text-underline-offset: 3px; display: inline-block; animation: au-flicker 4.5s infinite; } .au-status.is-closed .au-status-word { color: var(--fog); animation: none; text-decoration: none; position: relative; } .au-status.is-closed .au-status-word::after { content: ''; position: absolute; left: -6%; right: -6%; top: 52%; height: 3px; background: var(--rust-bright); transform: rotate(-6deg); border-radius: 2px; box-shadow: 0 5px 0 -1px color-mix(in srgb, var(--rust-bright) 70%, transparent); } @keyframes au-flicker { 0%, 92%, 100% { opacity: 1; text-shadow: 0 0 10px var(--glow-siren); transform: translateX(0); } 93% { opacity: 0.5; text-shadow: -2px 0 rgba(255, 20, 80, 0.65), 2px 0 rgba(0, 220, 255, 0.5); transform: translateX(-1px); } 94% { opacity: 1; text-shadow: 0 0 10px var(--glow-siren); transform: translateX(0); } 95% { opacity: 0.45; text-shadow: 2px 0 rgba(255, 20, 80, 0.65), -2px 0 rgba(0, 220, 255, 0.5); transform: translateX(1px); } 96% { opacity: 1; text-shadow: 0 0 10px var(--glow-siren); transform: translateX(0); } } .au-subtext { font-style: italic; margin: 0 0 14px; color: var(--ash); font-size: 0.9rem; } .au-meta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 16px; } .au-chip { font-size: 0.66rem; letter-spacing: 1px; text-transform: uppercase; color: var(--ash); background: #12100c; border: 1px solid var(--border); padding: 5px 11px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7); transform: rotate(1.2deg); } .au-chip:first-child { transform: rotate(-1.6deg); } .au-chip--queue { color: var(--siren); border-color: var(--rust); text-shadow: 0 0 8px color-mix(in srgb, var(--siren) 40%, transparent); } .au-decoration-row { color: var(--accent); letter-spacing: 8px; margin: 0; text-shadow: 0 0 10px var(--glow-accent); transition: color 1.1s ease; } /* -------------------------------------------------------------------------- 13. Price list with toe tags (blocks/price-list) -------------------------------------------------------------------------- */ .au-menu { text-align: left; border: 1px solid var(--border); background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 60%, transparent) 0%, rgba(12, 8, 12, 0.6) 100%); padding: 16px 18px 18px; box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.55); position: relative; } .au-menu::before { content: ''; position: absolute; top: -1px; left: 14px; right: 14px; height: 2px; background: repeating-linear-gradient(90deg, var(--rust) 0 6px, transparent 6px 12px); opacity: 0.5; } .au-menu-title { font-family: var(--font-hand); font-size: 0.82rem; color: var(--bone); text-align: center; margin: 2px 0 14px; letter-spacing: 1px; text-shadow: 0 0 10px color-mix(in srgb, var(--rust-bright) 30%, transparent); } .au-menu-list { list-style: none; margin: 0; padding: 0; } .au-tier { padding: 10px 0; border-bottom: 1px dashed color-mix(in srgb, var(--border) 50%, transparent); margin: 0; transition: background-color 0.3s ease; } .au-tier:last-child { border-bottom: none; padding-bottom: 0; } .au-tier-head { display: flex; align-items: baseline; gap: 6px; } .au-tier-name { color: var(--bone); font-size: 0.9rem; letter-spacing: 0.4px; min-width: 0; transition: transform 0.25s ease; } .au-tier:hover .au-tier-name { transform: translateX(3px); } .au-tier-dots { flex: 1; min-width: 12px; border-bottom: 1px dotted var(--fog); transform: translateY(-3px); opacity: 0.6; } .au-tier-price { color: var(--siren); font-size: 0.9rem; white-space: nowrap; text-shadow: 0 0 8px color-mix(in srgb, var(--siren) 35%, transparent); } .au-tier-desc { margin: 3px 0 0; font-size: 0.74rem; line-height: 1.55; color: var(--ash); } /* Toe tags: the price hangs off the dotted "string" on a manila tag */ .au-menu.has-toe-tags .au-tier-head { align-items: center; } .au-menu.has-toe-tags .au-tier-dots { transform: none; opacity: 0.8; border-bottom-style: solid; border-bottom-color: color-mix(in srgb, var(--ash) 45%, transparent); } .au-menu.has-toe-tags .au-tier-price { position: relative; display: inline-block; padding: 3px 10px 3px 17px; font-size: 0.8rem; line-height: 1.3; color: var(--ink); text-shadow: none; letter-spacing: 0.5px; background: linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 84%, #6a4a26) 100%); clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55)); transform: rotate(-3deg); transform-origin: 0 50%; } .au-menu.has-toe-tags .au-tier-price::before { content: ''; position: absolute; left: 7px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--panel); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); } .au-menu.has-toe-tags .au-tier:nth-child(even) .au-tier-price { transform: rotate(2.5deg); } .au-menu.has-toe-tags .au-tier:hover .au-tier-price { animation: au-tag-swing 1.3s ease-in-out; } @keyframes au-tag-swing { 0%, 100% { transform: rotate(-3deg); } 25% { transform: rotate(9deg); } 50% { transform: rotate(-7deg); } 75% { transform: rotate(3deg); } } /* -------------------------------------------------------------------------- 14. Social icons, Discord, support buttons -------------------------------------------------------------------------- */ .wp-block-social-links.is-style-aurora { gap: 20px !important; padding: 0; margin-left: 0; margin-right: 0; } .wp-block-social-links.is-style-aurora .wp-social-link { background: none !important; color: var(--ash) !important; border-radius: 0; margin: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); transition: color 0.3s ease, filter 0.3s ease, transform 0.3s cubic-bezier(0.3, 1.8, 0.5, 1); } .wp-block-social-links.is-style-aurora .wp-social-link a { padding: 0 !important; color: inherit !important; } .wp-block-social-links.is-style-aurora .wp-social-link svg { width: 24px; height: 24px; fill: currentColor; } .wp-block-social-links.is-style-aurora .wp-social-link:hover { color: var(--siren) !important; transform: rotate(-9deg) scale(1.15); filter: drop-shadow(0 0 8px var(--glow-siren)); } .au-discord { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--rust-bright); letter-spacing: 1px; font-size: 0.82rem; text-shadow: 0 0 10px color-mix(in srgb, var(--rust-bright) 40%, transparent); margin-left: auto; margin-right: auto; } .au-discord a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .au-discord a:hover { color: var(--siren); } .au-discord svg { width: 18px; height: 18px; flex-shrink: 0; } .au-support { display: flex; flex-direction: column; gap: 10px; align-items: center; } .au-support-btn { display: inline-flex; align-items: center; gap: 10px; justify-content: center; width: 100%; max-width: 340px; padding: 11px 18px; border: 1px solid var(--border); background: linear-gradient(135deg, #14110d 0%, #1c1712 100%); color: var(--bone); font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 1px; text-decoration: none; position: relative; overflow: hidden; isolation: isolate; transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .au-support-btn svg { width: 20px; height: 20px; flex-shrink: 0; position: relative; z-index: 1; } .au-support-btn span { position: relative; z-index: 1; } .au-support-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.14) 50%, transparent 80%); transform: translateX(-130%); transition: transform 0.6s ease; } .au-support-btn:hover::before { transform: translateX(130%); } .au-support-btn:hover { color: #fff; box-shadow: 0 0 18px rgba(0, 0, 0, 0.4); } .au-support-btn--patreon svg { color: #e0567a; } .au-support-btn--patreon:hover { border-color: #e0567a; box-shadow: 0 0 18px rgba(224, 86, 122, 0.4); } .au-support-btn--kofi svg, .au-support-btn--paypal svg, .au-support-btn--link svg { color: var(--steel-bright); } .au-support-btn--kofi:hover { border-color: var(--steel-bright); box-shadow: 0 0 18px color-mix(in srgb, var(--steel-bright) 40%, transparent); } .au-support-btn--paypal:hover, .au-support-btn--link:hover { border-color: var(--rust-bright); color: var(--siren); box-shadow: 0 0 18px color-mix(in srgb, var(--rust-bright) 35%, transparent); } /* -------------------------------------------------------------------------- 15. Pages & posts -------------------------------------------------------------------------- */ .au-page-title { margin: 0 0 18px; display: inline-block; text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0, 0, 0, 0.7), 3px 3px 4px rgba(0, 0, 0, 0.5); animation: au-scribble-b 7.5s ease-in-out infinite; transform-origin: 0 50%; } .au-page-title:empty { display: none; } @keyframes au-scribble-b { 0%, 100% { transform: rotate(0.6deg); } 35% { transform: rotate(1.4deg); } 65% { transform: rotate(0deg); } } .au-page-title.au-typing::after { content: '▌'; margin-left: 2px; animation: au-caret 0.6s steps(1) infinite; color: var(--siren); } @keyframes au-caret { 50% { opacity: 0; } } .au-page-content { font-size: 0.85rem; line-height: 1.8; color: var(--ash); } .au-page-content > * + * { margin-block-start: 1em; } .au-page-content :where(h2, h3, h4, h5, h6) { margin-block: 1.6em 0.5em; } .au-page-content :where(ul, ol) { padding-left: 1.3em; } .au-page-content :where(strong, b) { color: var(--bone); } .au-page-content .has-drop-cap:not(:focus)::first-letter { font-family: var(--font-display); color: var(--siren); font-size: 3.6em; line-height: 0.85; margin: 0.05em 0.12em 0 0; text-shadow: 0 0 14px var(--glow-blood); } .au-post-date { font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--fog); margin-bottom: 1em; } .au-query .wp-block-post { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px dashed var(--border); } .au-query .wp-block-post-title a { text-decoration: none; color: var(--bone); } .au-query .wp-block-post-title a:hover { color: var(--siren); } /* -------------------------------------------------------------------------- 16. Block styles — the quirky toolkit for content -------------------------------------------------------------------------- */ /* Group → Taped note */ .wp-block-group.is-style-aurora-note { position: relative; padding: 26px 24px 20px; margin-block: 2rem; background: linear-gradient(176deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 85%, #6a4a26) 100%); color: var(--ink); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.55), inset 0 0 30px rgba(120, 90, 60, 0.45); transform: rotate(-1deg); clip-path: polygon(0 1%, 22% 0, 51% 1.5%, 78% 0, 100% 1%, 99% 52%, 100% 99%, 70% 100%, 38% 98.5%, 1% 100%, 0.5% 50%); } .wp-block-group.is-style-aurora-note::before { content: ''; position: absolute; top: 0; left: 50%; width: 110px; height: 24px; transform: translateX(-50%) rotate(-2deg); background: rgba(236, 228, 202, 0.55); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } .wp-block-group.is-style-aurora-note :where(h1, h2, h3, h4, h5, h6, strong, b) { color: var(--ink); } .wp-block-group.is-style-aurora-note a { color: var(--rust-bright); } /* Group → Rusted plate */ .wp-block-group.is-style-aurora-plate { position: relative; padding: 24px 26px; margin-block: 2rem; border: 1px solid #000; background: radial-gradient(circle at 10px 10px, #4a3326 2px, transparent 3px), radial-gradient(circle at calc(100% - 10px) 10px, #4a3326 2px, transparent 3px), radial-gradient(circle at 10px calc(100% - 10px), #4a3326 2px, transparent 3px), radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #4a3326 2px, transparent 3px), radial-gradient(ellipse at 80% 20%, color-mix(in srgb, var(--rust) 45%, transparent), transparent 60%), linear-gradient(180deg, var(--metal-hover-hi) 0%, var(--metal-lo) 100%); box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7), 0 10px 22px rgba(0, 0, 0, 0.5); } /* Group → Missing poster (the 404) */ .wp-block-group.is-style-aurora-missing { position: relative; margin: 10px auto 20px; padding: 34px 30px 30px; max-width: 460px; background: radial-gradient(ellipse at 20% 80%, rgba(120, 72, 40, 0.18), transparent 50%), linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 80%, #6a4a26) 100%); color: var(--ink); text-align: center; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(110, 80, 50, 0.5); transform: rotate(1.4deg); clip-path: polygon(0 2%, 30% 0, 60% 1.2%, 100% 0, 98.5% 40%, 100% 100%, 64% 98%, 32% 100%, 0 98.6%, 1.5% 60%); } .wp-block-group.is-style-aurora-missing::before, .wp-block-group.is-style-aurora-missing::after { content: ''; position: absolute; top: 6px; width: 70px; height: 22px; background: rgba(236, 228, 202, 0.5); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } .wp-block-group.is-style-aurora-missing::before { left: -8px; transform: rotate(-32deg); } .wp-block-group.is-style-aurora-missing::after { right: -8px; transform: rotate(30deg); } .wp-block-group.is-style-aurora-missing :where(h1, h2, h3, strong) { color: var(--ink); } .au-missing-kicker { font-family: var(--font-hand); font-size: 0.8rem; margin: 0; } .au-missing-title { font-family: var(--font-display) !important; font-size: clamp(3rem, 12vw, 4.6rem) !important; letter-spacing: 6px; line-height: 1 !important; margin: 6px 0 10px !important; color: #5e0f1c !important; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15); } .au-missing-meta { font-size: 0.72rem; opacity: 0.8; border-top: 1px dashed rgba(42, 13, 18, 0.4); padding-top: 12px; } /* Image → Polaroid */ .wp-block-image.is-style-aurora-polaroid { display: table; margin-inline: auto; } .wp-block-image.is-style-aurora-polaroid img, .wp-block-image.is-style-aurora-polaroid > a > img { display: block; padding: 10px 10px 40px; border-radius: 0 !important; background: linear-gradient(172deg, #e4d8c2 0%, #cfc0a2 62%, #b9a787 100%); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6); transform: rotate(-1.8deg); transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); } .wp-block-image.is-style-aurora-polaroid:nth-of-type(even) img { transform: rotate(1.6deg); } .wp-block-image.is-style-aurora-polaroid:hover img { transform: rotate(0) scale(1.02); } .wp-block-image.is-style-aurora-polaroid figcaption, .wp-block-image.is-style-aurora-polaroid .wp-element-caption { margin: -34px 0 0; position: relative; font-family: var(--font-hand); font-size: 0.78rem; color: var(--ink); text-align: center; transform: rotate(-1.8deg); pointer-events: none; } /* Separator → Chain / Stitches */ .wp-block-separator.is-style-aurora-chain { border: 0 !important; height: 14px; max-width: none; opacity: 0.85 !important; background: var(--ash) !important; -webkit-mask: var(--au-chain-mask) repeat-x center / 36px 14px; mask: var(--au-chain-mask) repeat-x center / 36px 14px; margin-block: 2rem; } .wp-block-separator.is-style-aurora-stitch { border: 0 !important; height: 10px; max-width: none; opacity: 1 !important; background: repeating-linear-gradient(60deg, transparent 0 7px, var(--rust-bright) 7px 9px, transparent 9px 16px) 0 0 / 100% 100%, linear-gradient(transparent 4px, color-mix(in srgb, var(--rust-bright) 45%, transparent) 4px 6px, transparent 6px); margin-block: 2rem; } /* Heading → Scrawled */ .wp-block-heading.is-style-aurora-scrawl, .is-style-aurora-scrawl { font-family: var(--font-hand); font-weight: 400; letter-spacing: 0.5px; transform: rotate(-1.2deg); transform-origin: 0 50%; text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0, 0, 0, 0.6); } /* Post title → Plain typewriter */ .wp-block-post-title.is-style-aurora-plain { font-family: var(--font-body) !important; animation: none; transform: none; } /* List → Blood drops */ .wp-block-list.is-style-aurora-drops { list-style: none; padding-left: 1.6em; } .wp-block-list.is-style-aurora-drops > li { position: relative; } .wp-block-list.is-style-aurora-drops > li::before { content: ''; position: absolute; left: -1.35em; top: 0.35em; width: 0.7em; height: 0.9em; background: var(--rust-bright); -webkit-mask: var(--au-drop-mask) no-repeat center / contain; mask: var(--au-drop-mask) no-repeat center / contain; filter: drop-shadow(0 0 3px var(--glow-blood)); } .wp-block-list.is-style-aurora-drops > li:hover::before { animation: au-drip-small 0.9s ease-in; } @keyframes au-drip-small { 60% { transform: translateY(5px) scaleY(1.2); opacity: 0.4; } 61% { transform: translateY(-4px); opacity: 0; } 100% { transform: none; opacity: 1; } } /* Quote → Memo scrap */ .wp-block-quote.is-style-aurora-memo { border: 0 !important; padding: 22px 24px !important; margin: 2rem auto; max-width: 420px; font-family: var(--font-hand); font-style: normal; font-size: 0.85rem; line-height: 1.7; color: var(--ink); text-align: center; background: linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 82%, #5a4020) 100%); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6), inset 0 0 22px rgba(120, 90, 60, 0.5); transform: rotate(-2.5deg); clip-path: polygon(2% 4%, 40% 0, 62% 5%, 98% 2%, 96% 46%, 100% 92%, 55% 98%, 8% 96%, 3% 52%); } .wp-block-quote.is-style-aurora-memo cite { color: var(--ink); opacity: 0.75; font-size: 0.7rem; } /* Paragraph → Whisper (sharpens when you lean in) */ p.is-style-aurora-whisper { color: var(--fog); letter-spacing: 1.5px; filter: blur(1.4px); transition: filter 0.6s ease, color 0.6s ease, letter-spacing 0.6s ease; } p.is-style-aurora-whisper:hover { filter: none; color: var(--bone); letter-spacing: 0.4px; } @media (hover: none) { p.is-style-aurora-whisper { filter: none; } } /* Button → Toe tag */ .wp-block-button.is-style-aurora-tag .wp-block-button__link { position: relative; display: inline-block; padding: 9px 20px 9px 30px !important; background: linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 84%, #6a4a26) 100%) !important; color: var(--ink) !important; border: 0 !important; border-radius: 0 !important; font-family: var(--font-hand); font-size: 0.85rem; letter-spacing: 0.5px; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); transform: rotate(-3deg); transform-origin: 0 50%; transition: transform 0.3s cubic-bezier(0.3, 1.8, 0.5, 1); } .wp-block-button.is-style-aurora-tag .wp-block-button__link::before { content: ''; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--panel); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4); } .wp-block-button.is-style-aurora-tag .wp-block-button__link:hover { transform: rotate(4deg); color: var(--rust-bright) !important; } /* -------------------------------------------------------------------------- 17. Bottom bar, footer, soul counter -------------------------------------------------------------------------- */ .au-bottom-bar { background: #0d0c09; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 18px; color: var(--fog); font-size: 0.85rem; letter-spacing: 4px; position: relative; z-index: 2; } .au-bottom-drops { display: inline-flex; gap: 6px; color: var(--rust); min-width: 15px; } .au-bottom-drops svg { width: 15px; height: 15px; } .au-bottom-static { font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 3px; color: var(--fog); opacity: 0.6; background: none; border: 0; padding: 2px 4px; cursor: pointer; text-align: center; transition: opacity 0.3s ease, color 0.3s ease; } button.au-bottom-static:hover, button.au-bottom-static.au-playing { opacity: 1; color: var(--bone); } button.au-bottom-static.au-playing { color: #9fe8b0; text-shadow: 0 0 6px rgba(120, 255, 160, 0.5); } body.au-otherworld .au-bottom-static { color: var(--rust-bright); opacity: 0.9; } .au-footer { text-align: center; margin-top: 22px; position: relative; z-index: 10; } .au-footer.au-footer > * + * { margin-block-start: 10px; } .au-footer-credit { color: var(--fog); font-size: 0.8rem; letter-spacing: 1px; margin: 0; } .au-footer-credit::after { /* a very small mushroom, wiggling */ content: ''; display: inline-block; width: 16px; height: 16px; margin-left: 6px; vertical-align: -2px; background: radial-gradient(circle at 36% 32%, #f2e6d8 1.2px, transparent 1.6px), radial-gradient(circle at 64% 26%, #f2e6d8 1px, transparent 1.4px), radial-gradient(ellipse 8px 5.5px at 50% 36%, var(--siren) 98%, transparent 100%), linear-gradient(90deg, transparent 6px, #d9ccb4 6px 10px, transparent 10px) 0 9px / 16px 7px no-repeat; transform-origin: 50% 100%; animation: au-shroom 3.4s ease-in-out infinite; } .au-footer-credit:hover::after { animation-duration: 0.5s; } @keyframes au-shroom { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } } .au-souls { display: flex; flex-direction: column; align-items: center; gap: 6px; } .au-souls-label { font-size: 0.66rem; letter-spacing: 3px; text-transform: uppercase; color: var(--fog); } .au-odometer { display: inline-flex; gap: 2px; padding: 4px; background: #050405; border: 1px solid var(--border); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.9), 0 4px 12px rgba(0, 0, 0, 0.5); } .au-digit { display: inline-block; width: 1.05em; height: 1.4em; overflow: hidden; position: relative; font-family: var(--font-body); font-size: 1rem; line-height: 1.4em; text-align: center; color: #e9dcc6; background: linear-gradient(180deg, #0c0a0b 0%, #231a1d 50%, #0c0a0b 100%); box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.9), inset 0 -3px 4px rgba(0, 0, 0, 0.9); } .au-digit:last-child { color: var(--siren); } .au-digit-reel { display: flex; flex-direction: column; transform: translateY(calc(var(--d, 0) * -1.4em)); transition: transform 1.2s cubic-bezier(0.25, 1.4, 0.5, 1); } .au-digit-reel.is-static { transform: none; } .au-digit-reel > span { height: 1.4em; flex-shrink: 0; } /* -------------------------------------------------------------------------- 18. Gallery lightbox -------------------------------------------------------------------------- */ html.au-locked { overflow: hidden; } .au-lightbox { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; } .au-lightbox[hidden] { display: none; } .au-lightbox-backdrop { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(42, 14, 26, 0.55) 0%, rgba(5, 4, 4, 0.92) 72%); backdrop-filter: blur(2px); } .au-lightbox-inner { position: relative; z-index: 1; max-width: min(90vw, 900px); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; } .au-lightbox-frame { position: relative; padding: 16px; background: linear-gradient(155deg, #221c26 0%, #14110d 60%, #0c0a08 100%); border: 1px solid color-mix(in srgb, var(--steel-bright) 40%, transparent); box-shadow: 0 0 0 1px #000, 0 0 0 7px #0c0a08, 0 0 0 8px var(--rust-bright), 0 25px 70px rgba(0, 0, 0, 0.85); transform: rotate(var(--au-tilt, -1deg)); transition: transform 0.3s ease; animation: au-frame-flicker 5s ease-in-out infinite; touch-action: pan-y; } .au-lightbox-frame::before { content: ''; position: absolute; top: -20px; left: 50%; transform: translateX(-50%) rotate(-3deg); width: 64px; height: 22px; background: color-mix(in srgb, var(--steel-bright) 28%, transparent); border: 1px solid rgba(205, 198, 182, 0.25); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); z-index: 1; } @keyframes au-frame-flicker { 0%, 100% { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--steel) 45%, transparent)); } 45% { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--steel) 25%, transparent)); } 50% { filter: drop-shadow(0 0 28px var(--glow-blood)); } 55% { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--steel) 25%, transparent)); } } .au-corner { position: absolute; width: 30px; height: 30px; color: var(--rust-bright); opacity: 0.95; pointer-events: none; z-index: 2; filter: url(#au-rough) drop-shadow(0 0 5px var(--glow-blood)); } .au-corner svg { width: 100%; height: 100%; } .au-corner--tl { top: 2px; left: 2px; } .au-corner--tr { top: 2px; right: 2px; transform: scaleX(-1); } .au-corner--bl { bottom: 2px; left: 2px; transform: scaleY(-1); } .au-corner--br { bottom: 2px; right: 2px; transform: scale(-1, -1); } .au-lightbox-image { display: block; max-width: 100%; max-height: 62vh; width: auto; height: auto; object-fit: contain; border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 50px color-mix(in srgb, var(--steel) 15%, transparent); filter: grayscale(0.3) sepia(0.12) contrast(1.15) brightness(0.88); background: #0a0908; clip-path: polygon(0 6px, 4px 6px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 6px), calc(100% - 4px) calc(100% - 6px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px)); transition: filter 0.6s ease; } .au-lightbox-frame:hover .au-lightbox-image { filter: none; } .au-lightbox.au-glitching .au-lightbox-image { filter: grayscale(0.3) sepia(0.12) contrast(1.3) brightness(1.4); } .au-lightbox-placard { margin: 0; max-width: min(80vw, 420px); padding: 6px 18px 7px; font-family: var(--font-hand); font-size: 0.8rem; line-height: 1.5; text-align: center; color: var(--ink); background: linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 82%, #6a4a26) 100%); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6); transform: rotate(-1.4deg); } .au-lightbox-placard[hidden] { display: none; } .au-lightbox-placard small { display: block; font-family: var(--font-body); font-size: 0.68rem; opacity: 0.8; } .au-lightbox-count { font-family: var(--font-hand); color: var(--bone); font-size: 0.7rem; letter-spacing: 2px; background: #0d0b09; border: 1px solid var(--border); padding: 5px 16px; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(205, 198, 182, 0.06); } .au-lightbox-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 100%; max-height: 18vh; overflow-y: auto; padding: 6px; } .au-strip-thumb { width: 46px; height: 46px; padding: 0; border: 1px solid var(--border); background: #0a0908; cursor: pointer; overflow: hidden; transform: rotate(var(--au-tilt, 0deg)); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, opacity 0.25s ease; opacity: 0.6; } .au-strip-thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4) sepia(0.1) contrast(1.1) brightness(0.85); } .au-strip-thumb:hover { opacity: 0.9; border-color: var(--accent); } .au-strip-thumb.au-current { opacity: 1; border-color: var(--rust-bright); box-shadow: 0 0 12px var(--glow-blood); transform: rotate(0deg) scale(1.08); } .au-lightbox-close, .au-lightbox-prev, .au-lightbox-next { background: linear-gradient(180deg, #1c1712 0%, #100e0a 100%); border: 1px solid var(--border); color: var(--ash); cursor: pointer; z-index: 3; clip-path: polygon(50% 0%, 100% 22%, 100% 78%, 50% 100%, 0% 78%, 0% 22%); transition: color 0.3s ease, filter 0.3s ease; } .au-lightbox-close:hover, .au-lightbox-prev:hover, .au-lightbox-next:hover { color: var(--siren); filter: drop-shadow(0 0 10px var(--glow-blood)); } .au-lightbox-close { position: absolute; top: -6px; right: -52px; font-size: 1.3rem; line-height: 1; width: 38px; height: 42px; } .au-lightbox-prev, .au-lightbox-next { position: absolute; top: 34%; width: 46px; height: 52px; font-size: 1.1rem; } .au-lightbox-prev { left: -58px; } .au-lightbox-next { right: -58px; } /* -------------------------------------------------------------------------- 19. Quirks: eyes, moth, handprints, the "don't" button, secrets -------------------------------------------------------------------------- */ /* Watching eyes (js/eyes.js) */ .au-eyes { position: fixed; inset: 0; z-index: 5; pointer-events: none; } .au-eye { position: absolute; width: 46px; height: 26px; margin: -13px 0 0 -23px; transform: scale(var(--s, 1)) rotate(var(--r, 0deg)); filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.9)); opacity: 0.85; pointer-events: auto; cursor: pointer; } .au-eye svg { width: 100%; height: 100%; overflow: visible; display: block; } .au-eye .au-lid { transform-box: fill-box; transform-origin: center; transform: scaleY(0.03); transition: transform 0.38s cubic-bezier(0.5, 0, 0.3, 1.35); } .au-eye.is-open .au-lid { transform: scaleY(1); } .au-eye.is-blink .au-lid { transform: scaleY(0.06); transition-duration: 0.08s; } .au-eye .au-sclera { fill: var(--eye-white); } .au-eye .au-iris { fill: var(--eye-iris); transition: fill 1.1s ease; } .au-eye .au-rim { fill: none; stroke: #140a0d; stroke-width: 1.8; } .au-eye .au-vein { fill: none; stroke: var(--rust-bright); stroke-width: 0.5; opacity: 0.55; } .au-eye-ow { position: absolute; font-family: var(--font-hand); font-size: 0.8rem; color: #f2d9cf; text-shadow: 0 0 6px var(--rust-bright); pointer-events: none; animation: au-ow 1s ease-out forwards; } @keyframes au-ow { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -30px) rotate(-8deg); } } /* The moth (js/moth.js) */ .au-moth { position: fixed; top: 0; left: 0; z-index: 9994; pointer-events: none; width: 30px; height: 22px; margin: -11px 0 0 -15px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); will-change: transform; } .au-moth svg { width: 100%; height: 100%; overflow: visible; } .au-moth .au-wing { transform-box: view-box; transform-origin: 50% 50%; animation: au-flap 0.09s ease-in-out infinite alternate; } .au-moth .au-wing-r { animation-delay: 0.01s; } @keyframes au-flap { from { transform: scaleX(1); } to { transform: scaleX(0.28); } } .au-moth.is-resting .au-wing { animation-duration: 1.4s; } /* Handprints (js/quirks.js) */ .au-mark { position: absolute; z-index: 1; width: 58px; height: 74px; pointer-events: none; color: color-mix(in srgb, var(--rust-bright) 75%, #000); transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(var(--s, 1)); opacity: 0; filter: url(#au-rough) blur(0.4px); animation: au-mark 14s ease-out forwards; } .au-mark svg { width: 100%; height: 100%; } @keyframes au-mark { 0% { opacity: 0; } 4% { opacity: 0.62; } 60% { opacity: 0.4; } 100% { opacity: 0; } } /* The "don't" button's repertoire (js/weird.js) */ body.au-weird-flip .au-card { animation: au-weird-flip 3.2s cubic-bezier(0.6, -0.25, 0.3, 1.3) both !important; } @keyframes au-weird-flip { 0% { transform: rotate(var(--card-tilt)); } 25%, 72% { transform: rotate(180deg); } 100% { transform: rotate(var(--card-tilt)); } } body.au-weird-mirror .au-card { animation: au-weird-mirror 3s ease-in-out both !important; } @keyframes au-weird-mirror { 0% { transform: rotate(var(--card-tilt)); } 20%, 80% { transform: rotate(var(--card-tilt)) scaleX(-1); } 100% { transform: rotate(var(--card-tilt)); } } body.au-weird-tiny .au-card { animation: au-weird-tiny 3.4s cubic-bezier(0.5, 0, 0.3, 1.4) both !important; } @keyframes au-weird-tiny { 0% { transform: rotate(var(--card-tilt)) scale(1); } 30% { transform: rotate(-200deg) scale(0.18); } 70% { transform: rotate(-160deg) scale(0.2); } 100% { transform: rotate(var(--card-tilt)) scale(1); } } /* (Not "url(#au-melt) var(--card-filter)": in the Fog World that's "... none", which is invalid.) */ body.au-weird-melt .au-card { filter: url(#au-melt); } body.au-otherworld.au-weird-melt .au-card { filter: url(#au-melt) saturate(1.5) contrast(1.14) brightness(0.86) hue-rotate(-10deg); } body.au-weird-gravity .au-fall { animation: au-fall 3.2s cubic-bezier(0.55, 0, 0.7, 0.4) var(--fall-delay, 0s) both; } @keyframes au-fall { 0% { transform: none; } 35% { transform: translate(var(--fall-x, 0), var(--fall-y, 120px)) rotate(var(--fall-r, 20deg)); } 40% { transform: translate(var(--fall-x, 0), calc(var(--fall-y, 120px) - 12px)) rotate(var(--fall-r, 20deg)); } 45%, 70% { transform: translate(var(--fall-x, 0), var(--fall-y, 120px)) rotate(var(--fall-r, 20deg)); } 100% { transform: none; } } body.au-weird-comic .au-card, body.au-weird-comic .au-card * { font-family: 'Comic Sans MS', 'Comic Neue', 'Chalkboard SE', 'Comic Relief', cursive !important; } html.au-weird-negative { filter: invert(1) hue-rotate(180deg); } /* The secret word */ body.au-secret .au-sigil { color: #e0567a; opacity: 0.22; animation-duration: 8s; filter: drop-shadow(0 0 30px #e0567a); } body.au-secret .au-eye .au-iris { fill: #e0567a; } body.au-secret .au-masthead-name { text-shadow: 0 0 22px #e0567a, 0 2px 0 #000; } /* Witching hour: 3 a.m. */ body.au-witching .au-osd-date::after { content: ' ☾'; } /* -------------------------------------------------------------------------- 20. Responsive -------------------------------------------------------------------------- */ @media (max-width: 900px) { .au-chain--b, .au-chain--d { display: none; } } @media (max-width: 760px) { .au-content { grid-template-columns: minmax(0, 1fr); margin: 14px; padding: 20px 16px; gap: 28px; } .au-sidebar { max-width: 320px; width: 100%; margin-inline: auto; } .au-memo { display: none; } .au-lightbox-prev, .au-lightbox-next { top: auto; bottom: -62px; } .au-lightbox-prev { left: calc(50% - 60px); } .au-lightbox-next { right: calc(50% - 60px); } .au-lightbox-close { top: -54px; right: 0; } .au-lightbox-inner { padding-top: 30px; } .au-lightbox-strip { display: none; } .au-lightbox-image { max-height: 56vh; } } @media (max-width: 700px) { .au-sigil { display: none; } .au-osd { font-size: 0.66rem; letter-spacing: 1px; } .au-osd-date { display: none; } } @media (max-width: 560px) { body { padding-top: 46px; padding-bottom: 88px; } .au-console { flex-direction: row; left: 50%; transform: translateX(-50%); bottom: 12px; gap: 8px; } .au-console-label, .au-radio-freq { display: none; } .au-console-btn { padding: 9px; } .au-content { margin: 10px; padding: 18px 12px; } .au-bottom-bar { letter-spacing: 2px; padding: 10px 12px; } .au-bottom-static { letter-spacing: 1px; font-size: 0.62rem; } .au-tier-head { flex-wrap: wrap; } } /* -------------------------------------------------------------------------- 21. Motion safety: everything that moves stands still. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .au-grain, .au-sigil, .au-fog span, .au-crt-intro, .au-status, .au-page-title, .au-lightbox-frame, .au-card, .au-card.au-glitch-burst, .au-alarm-overlay.au-active, .au-tracking.au-active, .au-subliminal.au-active, .au-shadow-figure.au-active, .au-blackout-overlay.au-active, .au-zombie-cursor.au-twitch, .au-worldflash.au-active, .au-worldflash.au-active span, .au-fence, .au-radio-btn[aria-pressed="true"] svg, .au-chain, .au-status-word, .au-drop-row svg, .au-letter, .au-footer-credit::after, .au-osd-mode, .au-secret-msg.au-active, .au-mark, .au-moth .au-wing, body.au-otherworld .au-siren-btn svg, .au-dont-btn:hover svg { animation: none !important; } .au-outlet, .au-outlet-leaving, .au-outlet-entering, .au-chains, .au-support-btn::before, .au-profile-frame, .au-digit-reel, .wp-block-image.is-style-aurora-polaroid img { transition: none !important; } .au-secret-msg.au-active { opacity: 1; } .au-mark { opacity: 0.4; } } /* A portfolio / examples link carried over from v1 (a paragraph with class au-cta). */ .au-cta a { color: var(--ash); text-decoration: underline; text-underline-offset: 3px; font-size: 0.85rem; } .au-cta a:hover { color: var(--siren); }