/* ========================================================================== bob-fx.css — visual quirks layer -------------------------------------------------------------------------- Layers cleanly on top of css/main.css. Class prefix: .bob-* (or .bob-fx-on on when JS is loaded). All effects respect prefers-reduced-motion. ========================================================================== */ /* ── Paper grain overlay (item #9) ──────────────────────────────────────── */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9988; opacity: .055; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); background-size: 180px 180px; } /* Moving roadmap details should not re-blend the full viewport on every tick. */ body.page-roadmap::before { mix-blend-mode: normal; } /* Hover discipline (item #8): no rotate/translate on cards anymore. The bob-bbox L-corners (below) ARE the single hover signal — calmer + more "premium". */ /* ── Bounding-box L-corners on hover (item #6) ──────────────────────────── */ .bob-fx-on :is(.feature-card, .tc) { position: relative; } .bob-fx-on :is(.feature-card, .tc) .bob-bbox { position: absolute; inset: -7px; pointer-events: none; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out-quart); z-index: 3; --c: var(--teal, #4F8C7E); --L: 14px; background: linear-gradient(var(--c), var(--c)) top left / var(--L) 1px no-repeat, linear-gradient(var(--c), var(--c)) top left / 1px var(--L) no-repeat, linear-gradient(var(--c), var(--c)) top right / var(--L) 1px no-repeat, linear-gradient(var(--c), var(--c)) top right / 1px var(--L) no-repeat, linear-gradient(var(--c), var(--c)) bottom left / var(--L) 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 1px var(--L) no-repeat, linear-gradient(var(--c), var(--c)) bottom right / var(--L) 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 1px var(--L) no-repeat; } .bob-fx-on :is(.feature-card, .tc):hover .bob-bbox { opacity: .9; } /* Tiny corner tag */ .bob-bbox-tag { position: absolute; top: -7px; left: 14px; font-family: var(--mono-font); font-size: .58rem; letter-spacing: .14em; color: var(--teal, #4F8C7E); background: var(--paper-bg, #ECE8DE); padding: 0 4px; text-transform: uppercase; pointer-events: none; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out-quart) 50ms; } .bob-fx-on :is(.feature-card, .tc):hover .bob-bbox-tag { opacity: 1; } /* ── Active-section blinking caret on H2 (item #13) ─────────────────────── */ .bob-section-caret { display: inline-block; width: .55em; height: 1em; margin-left: .4em; background: var(--accent, #E25A1C); vertical-align: text-bottom; opacity: 0; transition: opacity .2s ease; } h2.bob-section-active .bob-section-caret { opacity: 1; animation: bob-blink 1s steps(2, start) infinite; } @keyframes bob-blink { 50% { opacity: 0; } } /* ── Compile overlay (item #12) ─────────────────────────────────────────── */ .bob-compile-overlay { position: fixed; inset: 0; z-index: 9999; background: var(--paper-bg, #ECE8DE); display: flex; align-items: center; justify-content: center; font-family: var(--mono-font); color: var(--ink, #2A2A28); transition: opacity .2s ease-out; } .bob-compile-overlay.is-fading { opacity: 0; pointer-events: none; } .bob-compile-box { min-width: min(520px, 92vw); max-width: 92vw; border: 1px solid var(--ink, #2A2A28); background: var(--paper-bg-2, #E3DED1); padding: 1.1rem 1.25rem; box-shadow: var(--elev-window, 0 2px 0 var(--paper-edge, #D4CDBB)); } .bob-compile-title { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent, #E25A1C); margin-bottom: .65rem; } .bob-compile-title::before { content: '$ '; color: var(--ink-muted, #8A8780); } .bob-compile-row { display: grid; grid-template-columns: 7rem 1fr 6rem; align-items: center; gap: .65rem; font-size: .78rem; line-height: 1.45; color: var(--ink-soft, #4B4B47); } .bob-compile-row .bar { font-family: var(--mono-font); letter-spacing: -.04em; color: var(--accent, #E25A1C); white-space: pre; overflow: hidden; } .bob-compile-row .val { text-align: right; font-size: .7rem; color: var(--ink-muted, #8A8780); letter-spacing: .06em; } .bob-compile-foot { margin-top: .65rem; font-size: .68rem; letter-spacing: .12em; color: var(--ink-muted, #8A8780); text-transform: uppercase; } .bob-compile-foot .ok { color: var(--teal, #4F8C7E); font-weight: 700; } /* ── Receipt (item #4) ──────────────────────────────────────────────────── */ .bob-receipt { max-width: 360px; margin: 2.5rem auto 0; padding: 1rem 1.1rem 1.25rem; background: var(--paper-bg, #ECE8DE); color: var(--ink, #2A2A28); font-family: var(--mono-font); font-size: .78rem; line-height: 1.55; border-top: 2px dashed var(--ink-faint, #B8B3A4); border-bottom: 2px dashed var(--ink-faint, #B8B3A4); position: relative; box-shadow: var(--elev-window, 0 1px 0 var(--paper-edge, #D4CDBB)); } /* perforation feel — small notches on the sides */ .bob-receipt::before, .bob-receipt::after { content: ''; position: absolute; left: -6px; right: -6px; height: 12px; background: radial-gradient(circle at 6px 6px, var(--paper-bg, #ECE8DE) 5px, transparent 5px) repeat-x; background-size: 12px 12px; } .bob-receipt::before { top: -8px; filter: drop-shadow(0 -1px 0 var(--paper-edge, #D4CDBB)); } .bob-receipt::after { bottom: -8px; filter: drop-shadow(0 1px 0 var(--paper-edge, #D4CDBB)); } .bob-receipt h3 { text-align: center; font-family: var(--mono-font); font-size: .82rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 .15rem; color: var(--ink-black, #15140F); } .bob-receipt-sub { text-align: center; font-size: .68rem; letter-spacing: .14em; color: var(--ink-muted, #8A8780); text-transform: uppercase; margin-bottom: .9rem; } .bob-receipt hr { border: none; border-top: 1px dashed var(--ink-faint, #B8B3A4); margin: .55rem 0; } .bob-receipt-row { display: flex; justify-content: space-between; align-items: baseline; } .bob-receipt-row .k { color: var(--ink-soft, #4B4B47); letter-spacing: .04em; } .bob-receipt-row .k::after { content: ' ' attr(data-dots); color: var(--ink-faint, #B8B3A4); white-space: pre; } .bob-receipt-row .v { color: var(--ink, #2A2A28); font-weight: 700; } .bob-receipt-foot { text-align: center; font-size: .68rem; letter-spacing: .18em; color: var(--ink-muted, #8A8780); text-transform: uppercase; margin-top: .8rem; } .bob-receipt-foot .stars { color: var(--accent, #E25A1C); } .bob-receipt-cache.HIT { color: var(--teal, #4F8C7E); font-weight: 700; } .bob-receipt-cache.MISS { color: var(--accent, #E25A1C); font-weight: 700; } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .bob-fx-on :is(.feature-card, .form-card):hover { transform: none; } h2.bob-section-active .bob-section-caret { animation: none; } .bob-compile-overlay { display: none; } }