/* simov.co - styles Theme system: 4 styles (candy / matrix / amber / ink) × dark/light. theme.js sets data-style + data-mode on ; every combination below defines the full variable set. Without JS the page falls back to candy, following the visitor's prefers-color-scheme. */ /* == IBM Plex Mono (self-hosted, SIL OFL 1.1 - see fonts/LICENSE.md) == */ /* 400 */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-400-cyrillic-ext.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-400-cyrillic.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-400-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-400-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-400-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* 500 */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-500-cyrillic-ext.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-500-cyrillic.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-500-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-500-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-500-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* 600 */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-mono-600-cyrillic-ext.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-mono-600-cyrillic.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-mono-600-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-mono-600-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-mono-600-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* == Theme variables == */ /* candy dark - the default (also the no-JS fallback) */ :root { --bg: #141021; --dot: oklch(0.35 0.06 300 / 0.5); --text: #d9d3e6; --head: #f2eefa; --muted: #8f86a3; --a1: oklch(0.82 0.13 340); --a2: oklch(0.85 0.1 200); --g1: 0 0 18px oklch(0.7 0.18 340 / 0.6); --g2: 0 0 18px oklch(0.75 0.12 200 / 0.6); --c1bg: oklch(0.2 0.04 320 / 0.7); --c1bd: oklch(0.5 0.12 340); --c1gl: 0 0 32px oklch(0.7 0.18 340 / 0.35); --c2bg: oklch(0.2 0.04 220 / 0.7); --c2bd: oklch(0.55 0.1 200); --c2gl: 0 0 32px oklch(0.75 0.12 200 / 0.35); --pbg: oklch(0.17 0.03 300 / 0.8); --pbd: oklch(0.4 0.08 300); --btnbg: oklch(0.82 0.13 340); --btnfg: #141021; --btngl: 0 0 24px oklch(0.7 0.18 340 / 0.45); --ghost: oklch(0.5 0.08 300); --foot: #6b6280; --avbd: oklch(0.75 0.15 340); --avgl: 0 0 24px oklch(0.7 0.18 340 / 0.5); } /* candy light */ :root[data-style="candy"][data-mode="light"] { --bg: oklch(0.975 0.012 320); --dot: oklch(0.88 0.04 320 / 0.8); --text: #4a4356; --head: #292235; --muted: #6f6879; --a1: oklch(0.58 0.2 340); --a2: oklch(0.52 0.13 210); --g1: 0 0 16px oklch(0.8 0.12 340 / 0.5); --g2: 0 0 16px oklch(0.8 0.1 210 / 0.5); --c1bg: #ffffff; --c1bd: oklch(0.86 0.07 350); --c1gl: 0 14px 36px oklch(0.8 0.1 340 / 0.4); --c2bg: #ffffff; --c2bd: oklch(0.86 0.06 210); --c2gl: 0 14px 36px oklch(0.82 0.08 210 / 0.45); --pbg: rgba(255,255,255,0.75); --pbd: oklch(0.88 0.04 320); --btnbg: oklch(0.58 0.2 340); --btnfg: #ffffff; --btngl: 0 8px 24px oklch(0.72 0.15 340 / 0.45); --ghost: oklch(0.82 0.04 320); --foot: #a49cb0; --avbd: oklch(0.82 0.1 340); --avgl: 0 8px 22px oklch(0.82 0.1 340 / 0.55); } /* matrix dark */ :root[data-style="matrix"][data-mode="dark"] { --bg: #0d120e; --dot: oklch(0.33 0.05 150 / 0.5); --text: #c6d2c4; --head: #ecf3ea; --muted: #7e8d7b; --a1: oklch(0.84 0.16 150); --a2: oklch(0.88 0.1 125); --g1: 0 0 18px oklch(0.76 0.17 150 / 0.55); --g2: 0 0 18px oklch(0.8 0.12 125 / 0.5); --c1bg: oklch(0.19 0.03 150 / 0.7); --c1bd: oklch(0.45 0.09 150); --c1gl: 0 0 32px oklch(0.76 0.17 150 / 0.3); --c2bg: oklch(0.19 0.03 130 / 0.7); --c2bd: oklch(0.48 0.08 130); --c2gl: 0 0 32px oklch(0.8 0.12 125 / 0.3); --pbg: oklch(0.16 0.02 150 / 0.8); --pbd: oklch(0.35 0.06 150); --btnbg: oklch(0.84 0.16 150); --btnfg: #0d120e; --btngl: 0 0 24px oklch(0.76 0.17 150 / 0.4); --ghost: oklch(0.42 0.06 150); --foot: #5f6e5c; --avbd: oklch(0.7 0.13 150); --avgl: 0 0 24px oklch(0.76 0.17 150 / 0.45); } /* matrix light */ :root[data-style="matrix"][data-mode="light"] { --bg: oklch(0.975 0.012 150); --dot: oklch(0.87 0.04 150 / 0.8); --text: #3e483c; --head: #1c261a; --muted: #6b7a68; --a1: oklch(0.5 0.15 150); --a2: oklch(0.52 0.11 130); --g1: 0 0 14px oklch(0.78 0.12 150 / 0.5); --g2: 0 0 14px oklch(0.8 0.1 130 / 0.5); --c1bg: #ffffff; --c1bd: oklch(0.85 0.07 150); --c1gl: 0 14px 36px oklch(0.82 0.09 150 / 0.4); --c2bg: #ffffff; --c2bd: oklch(0.86 0.06 130); --c2gl: 0 14px 36px oklch(0.84 0.08 130 / 0.4); --pbg: rgba(255,255,255,0.75); --pbd: oklch(0.88 0.04 150); --btnbg: oklch(0.5 0.15 150); --btnfg: #ffffff; --btngl: 0 8px 24px oklch(0.7 0.13 150 / 0.45); --ghost: oklch(0.82 0.04 150); --foot: #9aa896; --avbd: oklch(0.8 0.1 150); --avgl: 0 8px 22px oklch(0.8 0.1 150 / 0.55); } /* amber dark */ :root[data-style="amber"][data-mode="dark"] { --bg: #161107; --dot: oklch(0.36 0.05 80 / 0.5); --text: #e0d4bc; --head: #f7efdd; --muted: #9a8d72; --a1: oklch(0.82 0.14 80); --a2: oklch(0.76 0.15 50); --g1: 0 0 18px oklch(0.75 0.14 80 / 0.55); --g2: 0 0 18px oklch(0.7 0.15 50 / 0.55); --c1bg: oklch(0.2 0.03 80 / 0.7); --c1bd: oklch(0.5 0.09 80); --c1gl: 0 0 32px oklch(0.75 0.14 80 / 0.3); --c2bg: oklch(0.2 0.03 55 / 0.7); --c2bd: oklch(0.5 0.1 50); --c2gl: 0 0 32px oklch(0.7 0.15 50 / 0.3); --pbg: oklch(0.17 0.02 80 / 0.8); --pbd: oklch(0.37 0.05 80); --btnbg: oklch(0.82 0.14 80); --btnfg: #161107; --btngl: 0 0 24px oklch(0.75 0.14 80 / 0.4); --ghost: oklch(0.44 0.05 80); --foot: #75674c; --avbd: oklch(0.72 0.12 80); --avgl: 0 0 24px oklch(0.75 0.14 80 / 0.45); } /* amber light */ :root[data-style="amber"][data-mode="light"] { --bg: oklch(0.975 0.015 85); --dot: oklch(0.87 0.05 85 / 0.8); --text: #4a4130; --head: #2a2415; --muted: #7d715a; --a1: oklch(0.6 0.13 70); --a2: oklch(0.58 0.15 45); --g1: 0 0 14px oklch(0.8 0.11 75 / 0.5); --g2: 0 0 14px oklch(0.78 0.12 50 / 0.5); --c1bg: #ffffff; --c1bd: oklch(0.86 0.07 80); --c1gl: 0 14px 36px oklch(0.83 0.09 80 / 0.4); --c2bg: #ffffff; --c2bd: oklch(0.86 0.07 55); --c2gl: 0 14px 36px oklch(0.83 0.09 55 / 0.4); --pbg: rgba(255,255,255,0.75); --pbd: oklch(0.88 0.04 85); --btnbg: oklch(0.6 0.13 70); --btnfg: #ffffff; --btngl: 0 8px 24px oklch(0.75 0.12 75 / 0.45); --ghost: oklch(0.82 0.05 85); --foot: #a89a7e; --avbd: oklch(0.8 0.1 80); --avgl: 0 8px 22px oklch(0.8 0.1 80 / 0.55); } /* ink dark */ :root[data-style="ink"][data-mode="dark"] { --bg: #111214; --dot: oklch(0.35 0.005 260 / 0.5); --text: #d3d5d9; --head: #f4f5f7; --muted: #8b8e95; --a1: #f4f5f7; --a2: #b9bdc6; --g1: none; --g2: none; --c1bg: rgba(255,255,255,0.04); --c1bd: #3a3d43; --c1gl: 0 0 0 1px #565a62; --c2bg: rgba(255,255,255,0.04); --c2bd: #3a3d43; --c2gl: 0 0 0 1px #565a62; --pbg: rgba(17,18,20,0.85); --pbd: #3a3d43; --btnbg: #f4f5f7; --btnfg: #111214; --btngl: none; --ghost: #4a4d54; --foot: #6d7077; --avbd: #565a62; --avgl: none; } /* ink light */ :root[data-style="ink"][data-mode="light"] { --bg: #f6f6f4; --dot: oklch(0.85 0.004 260 / 0.9); --text: #43443f; --head: #131410; --muted: #75766f; --a1: #131410; --a2: #5c5e58; --g1: none; --g2: none; --c1bg: #ffffff; --c1bd: #dddcd4; --c1gl: 0 10px 28px rgba(0,0,0,0.08); --c2bg: #ffffff; --c2bd: #dddcd4; --c2gl: 0 10px 28px rgba(0,0,0,0.08); --pbg: rgba(255,255,255,0.8); --pbd: #dddcd4; --btnbg: #131410; --btnfg: #f6f6f4; --btngl: none; --ghost: #c9c8bf; --foot: #a3a49b; --avbd: #dddcd4; --avgl: 0 10px 24px rgba(0,0,0,0.1); } /* No JS: candy still follows the system color scheme (theme.js always sets data-mode, so this only applies before/without it). */ @media (prefers-color-scheme: light) { :root:not([data-mode]) { --bg: oklch(0.975 0.012 320); --dot: oklch(0.88 0.04 320 / 0.8); --text: #4a4356; --head: #292235; --muted: #6f6879; --a1: oklch(0.58 0.2 340); --a2: oklch(0.52 0.13 210); --g1: 0 0 16px oklch(0.8 0.12 340 / 0.5); --g2: 0 0 16px oklch(0.8 0.1 210 / 0.5); --c1bg: #ffffff; --c1bd: oklch(0.86 0.07 350); --c1gl: 0 14px 36px oklch(0.8 0.1 340 / 0.4); --c2bg: #ffffff; --c2bd: oklch(0.86 0.06 210); --c2gl: 0 14px 36px oklch(0.82 0.08 210 / 0.45); --pbg: rgba(255,255,255,0.75); --pbd: oklch(0.88 0.04 320); --btnbg: oklch(0.58 0.2 340); --btnfg: #ffffff; --btngl: 0 8px 24px oklch(0.72 0.15 340 / 0.45); --ghost: oklch(0.82 0.04 320); --foot: #a49cb0; --avbd: oklch(0.82 0.1 340); --avgl: 0 8px 22px oklch(0.82 0.1 340 / 0.55); } } /* == Base == */ /* Native UI (scrollbars, form controls, selection) follows the active mode */ :root { color-scheme: dark; } :root[data-mode="light"] { color-scheme: light; } @media (prefers-color-scheme: light) { :root:not([data-mode]) { color-scheme: light; } } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background-color: var(--bg); background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 28px 28px; color: var(--text); font-family: 'IBM Plex Mono', monospace; transition: background-color 0.35s, color 0.35s; } a { color: inherit; text-decoration: none; } a:hover { opacity: 0.9; } @keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } } /* == Theme switcher panel == */ .theme-panel { position: fixed; top: 24px; right: 24px; z-index: 10; display: flex; align-items: center; gap: 10px; background: var(--pbg); border: 1px solid var(--pbd); border-radius: 999px; padding: 9px 14px; backdrop-filter: blur(10px); transition: background-color 0.35s, border-color 0.35s; } .swatch { width: 20px; height: 20px; border-radius: 50%; cursor: pointer; padding: 0; border: 1px solid rgba(128,128,128,0.35); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color 0.25s; } .swatch[aria-pressed="true"] { outline-color: var(--head); } .swatch-candy { background: linear-gradient(135deg, oklch(0.78 0.15 340) 50%, oklch(0.82 0.11 200) 50%); } .swatch-matrix { background: oklch(0.72 0.15 150); } .swatch-amber { background: oklch(0.75 0.13 75); } .swatch-ink { background: linear-gradient(135deg, #f4f5f7 50%, #26272b 50%); } .theme-divider { width: 1px; height: 18px; background: var(--pbd); } .mode-toggle { background: none; border: none; cursor: pointer; padding: 0; font: 500 16px/1 'IBM Plex Mono', monospace; color: var(--head); width: 20px; height: 20px; } /* == Content == */ main { width: 100%; max-width: 960px; margin: 0 auto; box-sizing: border-box; padding: clamp(88px, 12vw, 104px) clamp(20px, 5vw, 32px) 0; flex: 1; } .intro { display: flex; align-items: center; gap: 18px; } .avatar { width: 72px; height: 72px; border-radius: 16px; border: 1px solid var(--avbd); box-shadow: var(--avgl); transition: border-color 0.35s, box-shadow 0.35s; } .badge { font: 500 15px/1.4 'IBM Plex Mono', monospace; border: 1px solid var(--c1bd); border-radius: 12px; padding: 11px 18px; color: var(--a1); text-shadow: var(--g1); transition: border-color 0.35s, color 0.35s; } h1 { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: clamp(29px, 6.2vw, 50px); line-height: 1.22; letter-spacing: -0.03em; margin: 40px 0 0; color: var(--head); transition: color 0.35s; } .hl-1 { color: var(--a1); text-shadow: var(--g1); } .hl-2 { color: var(--a2); text-shadow: var(--g2); } .cursor { color: var(--a1); animation: blink 1.3s step-end infinite; } .lede { font-family: 'IBM Plex Mono', monospace; font-weight: 400; font-size: clamp(15px, 4vw, 17px); line-height: 1.75; color: var(--muted); margin: 28px 0 0; max-width: 720px; transition: color 0.35s; } .lede a { color: var(--a2); } /* == Project cards == */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; margin-top: clamp(48px, 9vw, 64px); } .card { border-radius: 16px; padding: 30px; display: block; transition: background-color 0.35s, border-color 0.35s, box-shadow 0.25s; } .card-1 { background: var(--c1bg); border: 1px solid var(--c1bd); } .card-1:hover { box-shadow: var(--c1gl); } .card-2 { background: var(--c2bg); border: 1px solid var(--c2bd); } .card-2:hover { box-shadow: var(--c2gl); } .card-tag { font: 500 12px/1 'IBM Plex Mono', monospace; letter-spacing: 0.16em; text-transform: uppercase; } .card-title { font: 600 22px/1.3 'IBM Plex Mono', monospace; color: var(--head); margin-top: 16px; } .card-desc { font: 400 14.5px/1.7 'IBM Plex Mono', monospace; color: var(--muted); margin-top: 12px; } .card-link { font: 500 14.5px/1 'IBM Plex Mono', monospace; margin-top: 22px; } .card-1 .card-tag, .card-1 .card-link { color: var(--a1); } .card-2 .card-tag, .card-2 .card-link { color: var(--a2); } /* == Contact == */ .contact-panel { border: 1px solid var(--pbd); background: var(--pbg); border-radius: 16px; margin-top: clamp(40px, 8vw, 56px); padding: clamp(26px, 5vw, 36px) clamp(24px, 5vw, 40px); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; transition: background-color 0.35s, border-color 0.35s; } .contact-title { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: clamp(20px, 5vw, 23px); line-height: 1.35; color: var(--head); } .contact-links { display: flex; gap: 12px; flex-wrap: wrap; } .btn-primary { font: 500 15px/1 'IBM Plex Mono', monospace; background: var(--btnbg); color: var(--btnfg); border-radius: 12px; padding: 15px 22px; box-shadow: var(--btngl); transition: background-color 0.35s, color 0.35s, box-shadow 0.35s; } .btn-ghost { font: 500 15px/1 'IBM Plex Mono', monospace; border: 1px solid var(--ghost); color: var(--text); border-radius: 12px; padding: 14px 22px; transition: border-color 0.35s, color 0.35s; } /* == Footer == */ .site-footer { text-align: center; padding: 56px 24px 30px; font: 400 13px/1.6 'IBM Plex Mono', monospace; color: var(--foot); transition: color 0.35s; } /* == No-signal overlay (auto style cycling, driven by theme.js) == */ .static-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(8, 8, 12, 0.3); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0s linear 0.25s; } .static-overlay.is-active { opacity: 1; visibility: visible; transition: opacity 0.2s ease; } #static-noise { width: 100%; height: 100%; display: block; image-rendering: pixelated; opacity: 0.45; } /* scanlines */ .static-overlay::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0 2px, transparent 2px 4px); } .static-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font: 600 clamp(12px, 2.2vw, 15px)/1 'IBM Plex Mono', monospace; letter-spacing: 0.35em; padding-left: 0.35em; color: rgba(255,255,255,0.5); text-shadow: 0 0 8px rgba(255,255,255,0.3); animation: signal-jitter 0.14s steps(2) infinite; } @keyframes signal-jitter { 0% { transform: translate(-50%, -50%); } 100% { transform: translate(calc(-50% + 2px), calc(-50% - 1px)); } } @media (prefers-reduced-motion: reduce) { .static-overlay { display: none; } } /* == Mobile == */ @media (max-width: 640px) { .theme-panel { top: auto; bottom: 18px; right: 50%; transform: translateX(50%); box-shadow: 0 10px 30px rgba(0,0,0,0.25); } .contact-panel { align-items: stretch; } .contact-title { text-align: center; } /* width:100% so the buttons actually span the panel (the source design's content-sized column left them as narrow pills) */ .contact-links { flex-direction: column; width: 100%; } .contact-links a { text-align: center; } .site-footer { padding-bottom: 100px; } }