elements between sections carry the connecting trace strip (::before). 3 exit positions (L/C/R) x 3 entry positions = 9 combos. 7 unique SVGs + CSS scaleX(-1) mirrors produce all 15 variants. ========================================================================== */ /* -------------------------------------------------------------------------- Section footer exit edges (::after) Positioned at bottom of each section, 30px tall. -------------------------------------------------------------------------- */ [data-board-zone][data-edge-out]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; z-index: 0; pointer-events: none; background-repeat: no-repeat; background-position: center bottom; background-size: 100% 100%; opacity: 0; transition: opacity 0.4s ease; } [data-motherboard="on"] [data-board-zone][data-edge-out]::after { opacity: 1; } /* Exit edge SVG assignment (L = direct, C = direct, R = mirror of L) */ [data-edge-out="l"]::after { background-image: url('/assets/traces/mb-edge-exit-left.svg'); } [data-edge-out="c"]::after { background-image: url('/assets/traces/mb-edge-exit-center.svg'); } [data-edge-out="r"]::after { background-image: url('/assets/traces/mb-edge-exit-left.svg'); transform: scaleX(-1); } /* -------------------------------------------------------------------------- Transition strips — connecting trace between two sections -------------------------------------------------------------------------- */ .mb-transition { position: relative; height: 60px; overflow: hidden; display: none; } [data-motherboard="on"] .mb-transition { display: block; } .mb-transition::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; opacity: 0; transition: opacity 0.4s ease; } [data-motherboard="on"] .mb-transition::before { opacity: 1; } /* --- 5 unique transition SVGs --- */ .mb-transition[data-tx="ll"]::before { background-image: url('/assets/traces/mb-tx-ll.svg'); } .mb-transition[data-tx="lc"]::before { background-image: url('/assets/traces/mb-tx-lc.svg'); } .mb-transition[data-tx="lr"]::before { background-image: url('/assets/traces/mb-tx-lr.svg'); } .mb-transition[data-tx="cl"]::before { background-image: url('/assets/traces/mb-tx-cl.svg'); } .mb-transition[data-tx="cc"]::before { background-image: url('/assets/traces/mb-tx-cc.svg'); } /* --- 4 mirrored variants (scaleX flips left↔right) --- */ .mb-transition[data-tx="rr"]::before { background-image: url('/assets/traces/mb-tx-ll.svg'); } .mb-transition[data-tx="rc"]::before { background-image: url('/assets/traces/mb-tx-lc.svg'); } .mb-transition[data-tx="rl"]::before { background-image: url('/assets/traces/mb-tx-lr.svg'); } .mb-transition[data-tx="cr"]::before { background-image: url('/assets/traces/mb-tx-cl.svg'); } .mb-transition[data-tx="rr"]::before, .mb-transition[data-tx="rc"]::before, .mb-transition[data-tx="rl"]::before, .mb-transition[data-tx="cr"]::before { transform: scaleX(-1); } /* -------------------------------------------------------------------------- Theme-aware opacity for edges + transitions -------------------------------------------------------------------------- */ [data-theme="light"][data-motherboard="on"] .mb-transition::before, [data-theme="light"][data-motherboard="on"] [data-board-zone][data-edge-out]::after { opacity: 1.2; } [data-theme="dark"][data-motherboard="on"] .mb-transition::before, [data-theme="dark"][data-motherboard="on"] [data-board-zone][data-edge-out]::after { opacity: 1; } @media (prefers-color-scheme: light) { [data-theme="auto"][data-motherboard="on"] .mb-transition::before, [data-theme="auto"][data-motherboard="on"] [data-board-zone][data-edge-out]::after { opacity: 1.2; } } @media (prefers-color-scheme: dark) { [data-theme="auto"][data-motherboard="on"] .mb-transition::before, [data-theme="auto"][data-motherboard="on"] [data-board-zone][data-edge-out]::after { opacity: 1; } } /* -------------------------------------------------------------------------- Responsive edges + transitions -------------------------------------------------------------------------- */ /* Edge exits and transitions always use 100% 100% to prevent cropping. The zone traces (::before on bg-* sections) still use responsive scaling. */ /* -------------------------------------------------------------------------- Accessibility -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .bg-drolosoft::before, .bg-slogan::before, .bg-tools::before, .bg-apps::before, .bg-web::before, .bg-buzz::before, .bg-blog::before, .mb-transition::before, [data-board-zone][data-edge-out]::after { transition: none !important; } } @media (forced-colors: active) { [class*="bg-"]::before, .mb-transition::before, [data-board-zone][data-edge-out]::after { display: none !important; } .mb-transition { display: none !important; } } /* -------------------------------------------------------------------------- Production gate: hide all motherboard UI unless data-mb-dev is set. The FOUC script in head.html sets data-mb-dev only on localhost. -------------------------------------------------------------------------- */ html:not([data-mb-dev]) .motherboard-toggle, html:not([data-mb-dev]) .edge-mode-toggle, html:not([data-mb-dev]) .dev-manifesto-reload, html:not([data-mb-dev]) .dev-spec-btn, html:not([data-mb-dev]) .dev-home-btn, html:not([data-mb-dev]) .dev-prod-btn { display: none !important; } /* -------------------------------------------------------------------------- Manifesto Reload Button (dev only) Sits above the edge-mode toggle in the left dev panel stack. -------------------------------------------------------------------------- */ .dev-manifesto-reload { position: fixed; bottom: 128px; left: var(--spacing-md, 16px); z-index: 1001; width: 44px; height: 44px; border-radius: 4px; border: 2px solid rgba(220, 80, 120, 0.5); background: rgba(255, 200, 210, 0.35); color: rgb(200, 60, 100); cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: -3px -3px 0px rgba(200, 60, 100, 0.15); transition: transform 0.1s ease, box-shadow 0.1s ease; } .dev-manifesto-reload:hover { transform: translate(1px, 1px); border-color: rgb(220, 80, 120); box-shadow: -4px -4px 0px rgba(200, 60, 100, 0.3); } .dev-manifesto-reload:hover iconify-icon { transform: rotate(15deg); transition: transform 0.2s ease; } .dev-manifesto-reload:active iconify-icon { animation: spin-once 0.4s ease; } .motherboard-toggle:hover svg { transform: rotate(15deg); transition: transform 0.2s ease; } @keyframes spin-once { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- Motherboard Toggle Button -------------------------------------------------------------------------- */ .motherboard-toggle { position: fixed; bottom: var(--spacing-md, 16px); left: var(--spacing-md, 16px); z-index: 1000; width: 44px; height: 44px; border-radius: 4px; border: 2px solid var(--border-accent, rgba(100, 203, 20, 0.3)); background: var(--toggle-bg, rgba(255, 255, 255, 0.9)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.1s ease; box-shadow: -3px -3px 0px var(--btn-secondary-3d-shadow, rgba(5, 150, 105, 0.35)); padding: 0; } .motherboard-toggle:hover { transform: translate(1px, 1px); border-color: var(--accent-primary, #64cb14); box-shadow: -4px -4px 0px var(--btn-secondary-3d-shadow, rgba(5, 150, 105, 0.35)); } .motherboard-toggle:focus { outline: 2px solid var(--accent-primary, #64cb14); outline-offset: 2px; } .motherboard-toggle svg { width: 22px; height: 22px; color: var(--toggle-icon, #666); transition: color 0.3s ease; } /* Active state — solid copper background when motherboard is ON */ [data-motherboard="on"] .motherboard-toggle { background: rgb(184, 134, 58); border-color: rgb(200, 155, 80); box-shadow: -3px -3px 0px rgba(140, 100, 40, 0.5); } [data-motherboard="on"] .motherboard-toggle svg { color: #fff; } [data-motherboard="on"] .motherboard-toggle:hover { border-color: rgb(200, 155, 80); box-shadow: 0 0 18px rgba(184, 134, 58, 0.6); } /* Icon states */ .motherboard-toggle .icon-mb-off, .motherboard-toggle .icon-mb-on { position: absolute; } .motherboard-toggle .icon-mb-on { display: none; } [data-motherboard="on"] .motherboard-toggle .icon-mb-off { display: none; } [data-motherboard="on"] .motherboard-toggle .icon-mb-on { display: block; } /* -------------------------------------------------------------------------- Edge Mode Toggle — L / C / R / Random selector Appears above the motherboard toggle when traces are ON -------------------------------------------------------------------------- */ .edge-mode-toggle { position: fixed; bottom: 76px; left: var(--spacing-md, 16px); z-index: 1000; display: none; } [data-motherboard="on"] .edge-mode-toggle, [data-motherboard="on"] .dev-manifesto-reload, [data-motherboard="on"] .dev-spec-btn, [data-motherboard="on"] .dev-home-btn, [data-motherboard="on"] .dev-prod-btn { display: flex; } .edge-mode-current { width: 44px; height: 44px; border-radius: 4px; border: 2px solid rgb(200, 155, 80); background: rgb(184, 134, 58); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.1s ease; box-shadow: -3px -3px 0px rgba(140, 100, 40, 0.5); padding: 0; color: #fff; font-weight: 700; font-size: 1.1rem; font-family: inherit; letter-spacing: -0.02em; } /* Main button color follows active mode */ .edge-mode-current[data-active-mode="l"] { background: rgb(50, 110, 190); border-color: rgb(70, 130, 210); box-shadow: -3px -3px 0px rgba(30, 70, 130, 0.5); } .edge-mode-current[data-active-mode="c"] { background: rgb(55, 185, 65); border-color: rgb(75, 200, 85); box-shadow: -3px -3px 0px rgba(35, 120, 40, 0.5); } .edge-mode-current[data-active-mode="r"] { background: rgb(200, 50, 80); border-color: rgb(220, 70, 100); box-shadow: -3px -3px 0px rgba(130, 30, 50, 0.5); } .edge-mode-current[data-active-mode="random"] { background: rgb(140, 80, 200); border-color: rgb(160, 100, 220); box-shadow: -3px -3px 0px rgba(90, 50, 130, 0.5); } .edge-mode-current:hover { transform: translate(1px, 1px); letter-spacing: 0.15em; transition: transform 0.1s ease, letter-spacing 0.2s ease; } .edge-mode-current:focus { outline: 2px solid currentColor; outline-offset: 2px; } /* Panel — hidden by default, slides out to the right on hover. padding-left bridges the gap to .edge-mode-current so the hover zone is continuous and the panel stays open while moving the mouse between options. */ .edge-mode-panel { position: absolute; bottom: 0; left: 48px; display: flex; flex-direction: row; gap: 8px; padding-left: 8px; opacity: 0; transform: translateX(-8px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .edge-mode-toggle:hover .edge-mode-panel { opacity: 1; transform: translateX(0); pointer-events: auto; } .edge-mode-opt { width: 44px; height: 44px; border-radius: 4px; border: 2px solid rgba(120, 120, 120, 0.3); background: var(--toggle-bg, rgba(255, 255, 255, 0.9)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; color: #666; font-weight: 700; font-size: 1.05rem; font-family: inherit; transition: all 0.1s ease; box-shadow: -2px -2px 0px rgba(0, 0, 0, 0.1); } .edge-mode-opt:hover { transform: translate(1px, 1px); box-shadow: -3px -3px 0px rgba(0, 0, 0, 0.15); } /* Per-mode colors */ .edge-mode-opt[data-mode="l"] { border-color: rgba(50, 110, 190, 0.4); color: rgb(50, 110, 190); } .edge-mode-opt[data-mode="l"]:hover { border-color: rgb(50, 110, 190); box-shadow: -3px -3px 0px rgba(30, 70, 130, 0.4); } .edge-mode-opt[data-mode="l"].active { background: rgb(50, 110, 190); border-color: rgb(70, 130, 210); color: #fff; box-shadow: -2px -2px 0px rgba(30, 70, 130, 0.5); } .edge-mode-opt[data-mode="c"] { border-color: rgba(55, 185, 65, 0.4); color: rgb(45, 155, 55); } .edge-mode-opt[data-mode="c"]:hover { border-color: rgb(55, 185, 65); box-shadow: -3px -3px 0px rgba(35, 120, 40, 0.4); } .edge-mode-opt[data-mode="c"].active { background: rgb(55, 185, 65); border-color: rgb(75, 200, 85); color: #fff; box-shadow: -2px -2px 0px rgba(35, 120, 40, 0.5); } .edge-mode-opt[data-mode="r"] { border-color: rgba(200, 50, 80, 0.4); color: rgb(200, 50, 80); } .edge-mode-opt[data-mode="r"]:hover { border-color: rgb(200, 50, 80); box-shadow: -3px -3px 0px rgba(130, 30, 50, 0.4); } .edge-mode-opt[data-mode="r"].active { background: rgb(200, 50, 80); border-color: rgb(220, 70, 100); color: #fff; box-shadow: -2px -2px 0px rgba(130, 30, 50, 0.5); } .edge-mode-opt[data-mode="random"] { border-color: rgba(140, 80, 200, 0.4); color: rgb(140, 80, 200); } .edge-mode-opt[data-mode="random"]:hover { border-color: rgb(140, 80, 200); box-shadow: -3px -3px 0px rgba(90, 50, 130, 0.4); } .edge-mode-opt[data-mode="random"].active { background: rgb(140, 80, 200); border-color: rgb(160, 100, 220); color: #fff; box-shadow: -2px -2px 0px rgba(90, 50, 130, 0.5); }