/* The site's light and dark switch. Two states, no brand swatches, no Sys. Self-contained: it reads only data-bs-theme on , so it sits the same on the Bootstrap pages under /portfolio/ and on the token pages (root, resume, design-engineer). */ .tswitch { --ts-track: #eceef2; --ts-line: #a9b0bc; --ts-thumb: #0b0d11; --ts-dim: #545b68; --ts-on: #f6f7f9; --ts-ring: #09b850; position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; flex: none; box-sizing: border-box; width: 76px; height: 38px; padding: 3px; margin: 0; border-radius: 999px; border: 1px solid var(--ts-line); background: var(--ts-track); } :root[data-bs-theme="dark"] .tswitch { --ts-track: #222427; --ts-line: #5a616b; --ts-thumb: #f1f2f3; --ts-dim: #d3d6d8; --ts-on: #111417; } .tswitch .thumb { position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); height: calc(100% - 6px); border-radius: 999px; background: var(--ts-thumb); transition: transform .45s cubic-bezier(.2, .8, .2, 1); } :root[data-bs-theme="dark"] .tswitch .thumb { transform: translateX(100%); } .tswitch button { position: relative; z-index: 1; display: grid; place-items: center; width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer; color: var(--ts-dim); box-shadow: none; transition: color .3s; } .tswitch button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .tswitch button[aria-checked="true"] { color: var(--ts-on); } .tswitch button:focus-visible { outline: 2px solid var(--ts-ring); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .tswitch .thumb { transition: none; } } @media print { .tswitch { display: none !important; } }