/* enhance.css — best-in-class upgrade pack v2 Per-site theming via data-enhance-theme on */ :root { --enh-accent: #d4af37; --enh-accent-2: #f5e9c4; --enh-text: #f5e9c4; --enh-dim: rgba(245,233,196,.45); --enh-border: rgba(212,175,55,.22); --enh-hero-bg: rgba(0,0,0,.35); --enh-panel: rgba(0,0,0,.55); } /* ===== AMBIENT CANVAS ===== */ .enh-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .7; mix-blend-mode: screen; } @media (prefers-reduced-motion: reduce) { .enh-canvas { display: none; } } /* ===== CUSTOM CURSOR ===== */ .enh-cursor, .enh-cursor-dot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99999; transform: translate(-50%, -50%); will-change: transform; } .enh-cursor { width: 32px; height: 32px; border: 1.5px solid var(--enh-accent); border-radius: 50%; transition: width .22s cubic-bezier(.16,1,.3,1), height .22s cubic-bezier(.16,1,.3,1), background .22s, border-color .22s, opacity .22s; background: transparent; opacity: .82; backdrop-filter: invert(4%); } .enh-cursor-dot { width: 5px; height: 5px; background: var(--enh-accent); border-radius: 50%; opacity: .95; } .enh-cursor.is-hover { width: 54px; height: 54px; background: color-mix(in srgb, var(--enh-accent) 15%, transparent); border-color: var(--enh-accent-2); } .enh-cursor.is-click { width: 22px; height: 22px; } .enh-cursor.is-text { width: 4px; height: 26px; border-radius: 1px; background: var(--enh-accent); border-color: transparent; } @media (hover: none), (max-width: 800px), (prefers-reduced-motion: reduce) { .enh-cursor, .enh-cursor-dot { display: none !important; } body.enh-cursor-active, body.enh-cursor-active * { cursor: auto !important; } } body.enh-cursor-active, body.enh-cursor-active a, body.enh-cursor-active button, body.enh-cursor-active [role="button"], body.enh-cursor-active input, body.enh-cursor-active textarea, body.enh-cursor-active select, body.enh-cursor-active label { cursor: none; } /* ===== SCROLL REVEAL (CLS-safe) ===== */ .enh-reveal { opacity: 1; } @supports (animation-timeline: view()) { .enh-reveal { opacity: 0; animation: enh-reveal-fade linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; } } @keyframes enh-reveal-fade { to { opacity: 1; } } /* ===== MARQUEE TICKER ===== */ .enh-ticker { position: relative; z-index: 2; overflow: hidden; border-top: 1px solid var(--enh-border); border-bottom: 1px solid var(--enh-border); background: var(--enh-panel); backdrop-filter: blur(6px); padding: 10px 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .18em; color: var(--enh-text); } .enh-ticker-track { display: inline-flex; gap: 40px; white-space: nowrap; animation: enh-scroll 55s linear infinite; padding-left: 40px; } .enh-ticker span { display: inline-flex; align-items: center; gap: 10px; } .enh-ticker .dot { width: 5px; height: 5px; background: var(--enh-accent); border-radius: 50%; display: inline-block; } @keyframes enh-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ===== MEME WALL ===== */ .enh-meme-sec { position: relative; z-index: 2; padding: clamp(60px, 8vw, 110px) 0; background: var(--enh-hero-bg); border-top: 1px solid var(--enh-border); border-bottom: 1px solid var(--enh-border); } .enh-meme-sec .enh-wrap { max-width: 1400px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); } .enh-meme-sec .enh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--enh-border); padding-bottom: 20px; } .enh-meme-sec h2.enh-h2 { font-size: clamp(30px, 5vw, 56px); color: var(--enh-text); margin: 0; letter-spacing: -.02em; line-height: 1; font-weight: 700; } .enh-meme-sec .enh-sub { font-family: "JetBrains Mono", ui-monospace, monospace; color: var(--enh-dim); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; } .enh-meme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .enh-meme-card { position: relative; aspect-ratio: 1/1; background: #000; border: 1px solid var(--enh-border); overflow: hidden; cursor: pointer; transform-style: preserve-3d; transition: border-color .25s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1), box-shadow .3s; } .enh-meme-card:hover { border-color: var(--enh-accent); transform: translateY(-4px) scale(1.01); box-shadow: 0 20px 60px color-mix(in srgb, var(--enh-accent) 25%, transparent); } .enh-meme-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.16,1,.3,1), filter .3s; filter: contrast(1.03) saturate(1.08); } .enh-meme-card:hover img { transform: scale(1.05); } .enh-meme-card .enh-badge { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,.78); border: 1px solid var(--enh-border); color: var(--enh-accent); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .16em; padding: 4px 8px; z-index: 3; } .enh-meme-card .enh-dl { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,.85); border: 1px solid var(--enh-accent); color: var(--enh-accent); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .12em; padding: 5px 9px; text-decoration: none; opacity: 0; transform: translateY(4px); transition: opacity .22s, transform .22s cubic-bezier(.16,1,.3,1); z-index: 3; } .enh-meme-card:hover .enh-dl { opacity: 1; transform: translateY(0); } @media (max-width: 640px) { .enh-meme-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .enh-meme-sec { padding: 60px 0; } } /* ===== SIGNATURE PANEL (per-site interactive module) ===== */ .enh-sig-sec { position: relative; z-index: 2; padding: clamp(60px, 8vw, 110px) 0; background: var(--enh-hero-bg); border-top: 1px solid var(--enh-border); border-bottom: 1px solid var(--enh-border); } .enh-sig-sec .enh-wrap { max-width: 1400px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); } .enh-sig-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--enh-border); padding-bottom: 20px; } .enh-sig-head h2 { font-size: clamp(30px, 5vw, 56px); color: var(--enh-text); margin: 0; letter-spacing: -.02em; line-height: 1; } .enh-sig-stage { position: relative; min-height: 380px; background: rgba(0,0,0,.4); border: 1px solid var(--enh-border); overflow: hidden; display: grid; place-items: center; } .enh-sig-stage canvas { display: block; width: 100%; height: 380px; } /* ===== KEYCAP / SMALL LABELS ===== */ .enh-kbd { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; color: var(--enh-accent); border: 1px solid var(--enh-border); padding: 3px 7px; letter-spacing: .1em; } /* Ensure our stuff is above background canvas */ header, main, footer, nav, .site-header, .site-footer { position: relative; z-index: 2; }