/* paws.zip — Ultraviolet */ :root { --ink: #07030d; --bg: #120720; --slab: #24104a; --slab-2: #1d0b3b; --violet: #7c3aed; --deep: #4c1d95; --lilac: #c4b5fd; --pale: #e9e2ff; --ok: #86efac; --err: #fda4af; --display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif; --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif; --body: 'Barlow', 'Noto Sans', system-ui, sans-serif; --scripts: 'Noto Sans', 'Noto Sans Thai', 'Noto Sans Bengali', 'Noto Sans Devanagari', 'Noto Sans JP', sans-serif; --jag: polygon(8% 0, 100% 5%, 93% 100%, 0 93%); --phone: polygon(4% 0, 100% 2%, 97% 100%, 0 98%); } *, *::before, *::after { box-sizing: border-box; } html.motion { scroll-behavior: smooth; } html { scroll-padding-top: 90px; overflow-x: hidden; overflow-x: clip; } body { margin: 0; position: relative; overflow-x: hidden; overflow-x: clip; background: var(--bg); color: #fff; font-family: var(--body); font-size: 18px; line-height: 1.55; } img { max-width: 100%; display: block; } a { color: inherit; } button, input, textarea { font: inherit; color: inherit; } button { cursor: pointer; } :focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; background: #fff; color: var(--ink); padding: 8px 16px; font: 700 18px var(--cond); text-decoration: none; } .skip-link:focus { top: 12px; } /* Skew helpers: skew the box, straighten the text */ .sk { display: inline-block; transform: skewX(-14deg); } .sk > .unsk { display: inline-block; transform: skewX(14deg); } /* ── Motion ───────────────────────────────────────────────────── * html.motion is set by the inline script in : on by default, * off for visitors with "reduce motion" unless they flip the switch. * Keyframes use the individual translate / rotate / scale properties, * so they stack on top of each element's own skew or rotation. */ @keyframes uvSpin { to { rotate: 360deg; } } @keyframes uvStripe { to { background-position: 240px 0; } } @keyframes uvThrob { 0%, 100% { scale: 1; } 50% { scale: 1.07; } } @keyframes uvJitter { 0%, 100% { rotate: 0deg; translate: 0 0; } 25% { rotate: -1.4deg; translate: -3px 1px; } 50% { rotate: 1deg; translate: 2px -1px; } 75% { rotate: -.5deg; translate: 3px 0; } } @keyframes uvSlam { 0% { opacity: 0; translate: -110px 0; scale: 1.3 .75; } 55% { opacity: 1; translate: 14px 0; scale: .96 1.05; } 78% { translate: -5px 0; scale: 1.01 .99; } 100% { opacity: 1; translate: 0 0; scale: 1; } } @keyframes uvDrop { 0% { opacity: 0; translate: 0 -80px; rotate: -14deg; scale: .7; } 60% { opacity: 1; translate: 0 8px; rotate: 5deg; scale: 1.06; } 100% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; } } @keyframes uvSlide { from { translate: -70px 0; opacity: 0; } to { translate: 0 0; opacity: 1; } } @keyframes uvPop { 0%, 100% { scale: 1; } 50% { scale: 1.14; } } @keyframes uvFloat { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -26px; rotate: 22deg; } } @keyframes uvTwirl { to { rotate: 360deg; } } @keyframes uvSway { 0%, 100% { rotate: 0deg; } 50% { rotate: 2.5deg; } } @keyframes uvTilt { 0%, 100% { rotate: 0deg; } 50% { rotate: -2.5deg; } } @keyframes uvDrift { to { background-position: 32px 32px; } } @keyframes uvEq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } } @keyframes uvSweep { 0% { transform: translateX(-160%) skewX(-20deg); } 55%, 100% { transform: translateX(420%) skewX(-20deg); } } @keyframes uvShake { 0%, 100% { translate: 0 0; } 33% { translate: -4px 2px; } 66% { translate: 4px -2px; } } @keyframes uvFlash { 0% { background-color: #fff; } 50% { background-color: var(--violet); } 100% { background-color: #000; } } @keyframes uvShadow { 0%, 100% { text-shadow: 12px 12px 0 var(--violet), 24px 24px 0 #000; } 50% { text-shadow: 18px 8px 0 var(--violet), 30px 18px 0 #000; } } @keyframes gbIn { from { opacity: 0; transform: translateY(40px) rotate(8deg) scale(.9); } to { opacity: 1; transform: rotate(-3deg); } } .uv-jitter { animation: uvJitter 2.2s steps(1) infinite; } .uv-pop { animation: uvPop 1.2s steps(2) infinite; } .uv-eq { transform-origin: bottom; animation: uvEq .9s ease-in-out infinite; } .uv-sweep { animation: uvSweep 3.4s cubic-bezier(.7, 0, .3, 1) infinite; } .uv-tilt { animation: uvTilt 1.8s steps(1) infinite; } /* Page-load entrance, staggered with --d */ .uv-in { animation: uvSlam .65s cubic-bezier(.2, .9, .2, 1) both; animation-delay: var(--d, 0s); } .uv-in.drop { animation-name: uvDrop; } /* Scroll reveal: script adds .is-in when the element enters the viewport */ html.motion [data-reveal]:not(.is-in) { opacity: 0; } [data-reveal].is-in { animation: uvSlam .6s cubic-bezier(.2, .9, .2, 1) both; animation-delay: var(--d, 0s); } [data-reveal="drop"].is-in { animation-name: uvDrop; } html.motion #visitors:not(.is-in) .map-meta-cell { opacity: 0; } #visitors.is-in .map-meta-cell { animation: uvDrop .6s cubic-bezier(.2, .9, .2, 1) both; } #visitors.is-in .map-meta-cell:nth-child(2) { animation-delay: .12s; } #visitors.is-in .map-meta-cell:nth-child(3) { animation-delay: .24s; } /* Hover: a short shake on anything clickable */ .social:hover, .btn-slab:hover:not(:disabled), .gb-tab:hover, .nav-btn:hover:not(:disabled), .hint-reveal:hover, .gb-send:hover, .gchal-zoom:hover, .motion-toggle:hover { animation: uvShake .25s steps(3); } /* Everything off when motion is off */ html:not(.motion) *, html:not(.motion) *::before, html:not(.motion) *::after { animation: none !important; transition: none !important; } html:not(.motion) { scroll-behavior: auto; } /* Motion switch */ .motion-toggle { background: #000; border: 2px solid #fff; padding: 6px 14px; color: #fff; display:none} .motion-toggle > .unsk { font: 700 16px var(--cond); letter-spacing: 1px; text-transform: uppercase; } .motion-toggle[aria-pressed="true"] { background: #fff; color: var(--ink); } .topbar-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: flex-end; } /* ── Background shapes ──────────────────────────────────────────── */ .decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .decor .slab { position: absolute; left: -420px; top: -380px; width: 1200px; height: 1500px; background: var(--slab); transform: rotate(-18deg); animation: uvSway 9s ease-in-out infinite; } .decor .slab-2 { position: absolute; right: -520px; top: 62%; width: 900px; height: 1600px; background: var(--slab-2); transform: rotate(14deg); animation: uvSway 11s ease-in-out -4s infinite reverse; } /* ── Page frame ─────────────────────────────────────────────────── */ .page { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 40px 72px 64px; display: flex; flex-direction: column; gap: 96px; } main { display: flex; flex-direction: column; gap: 110px; } /* Top bar */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo { background: var(--violet); padding: 6px 24px; box-shadow: 7px 7px 0 #000; text-decoration: none; } .logo > .unsk { font: 400 36px/1.2 var(--display); letter-spacing: 1px; text-transform: uppercase; } .presence { display: flex; align-items: center; gap: 10px; transform: rotate(-3deg); background: #000; padding: 8px 16px; border: 2px solid var(--lilac); font: 700 18px var(--cond); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; } .presence-dot, #sticky-indicator { width: 12px; height: 12px; background: #6b6480; transform: rotate(45deg); flex-shrink: 0; } .presence-dot.online, #sticky-indicator.online { background: var(--ok); box-shadow: 0 0 10px rgba(134, 239, 172, .7); } /* Sticky status bar */ #sticky-bar { position: fixed; top: 12px; left: 12px; z-index: 250; display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 8px; background: #000; border: 2px solid #fff; box-shadow: 5px 5px 0 var(--violet); transform: translateY(-160%) skewX(-10deg); transition: transform .25s cubic-bezier(.2, .9, .2, 1.2); } #sticky-bar.visible { transform: translateY(0) skewX(-10deg); } #sticky-bar > * { transform: skewX(10deg); } #sticky-avatar { width: 30px; height: 30px; object-fit: cover; border: 2px solid var(--lilac); } #sticky-name { font: 400 22px/1 var(--display); text-transform: uppercase; letter-spacing: 1px; } #sticky-status { font: 700 16px var(--cond); letter-spacing: 1px; text-transform: uppercase; color: var(--lilac); } /* Section heads */ .section-head { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 34px; } .tag-num { display: inline-block; margin-bottom: 12px; } .tag-num > span { display: inline-block; transform: skewX(-14deg); background: var(--violet); padding: 4px 14px; } .tag-num > span > span { display: inline-block; transform: skewX(14deg); font: italic 800 24px/1.2 var(--cond); } .h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(48px, 5.6vw, 76px); line-height: 1; letter-spacing: 1px; text-transform: uppercase; } .aside { margin-bottom: 12px; font: italic 700 22px var(--cond); letter-spacing: 2px; color: var(--lilac); text-transform: uppercase; } .geo-hint { font-style: normal; font-weight: 600; font-size: 16px; letter-spacing: 1px; opacity: .8; margin-left: 6px; } /* ── Hero ───────────────────────────────────────────────────────── */ /* Slanted sections: every section sits on a full-width band whose top and bottom * edges follow the same 7° slant as the divider bars. Only the bands are skewed; * the content inside stays upright and is padded to fit between the lines. */ :root { --slant-pad: calc(min(80px, 6.1vw) + 46px); } main { gap: 0; } .hero { padding-bottom: var(--slant-pad); } .section { position: relative; padding-block: var(--slant-pad); } .section::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; transform: skewY(-7deg); z-index: -2; pointer-events: none; background: rgba(36, 16, 74, .6); } .section:nth-of-type(odd)::before { background: rgba(7, 3, 13, .5); } /* Full-width dot pattern per section, under the bars and every other shape. * Same slant as the bands; each section uses a different dot shape. */ :root { --dots-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='%23c4b5fd' fill-opacity='.38'%3E%3Ccircle cx='8' cy='8' r='2.3'/%3E%3C/g%3E%3C/svg%3E"); --dots-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='%23c4b5fd' fill-opacity='.38'%3E%3Cpath d='M8 4.4 11.6 8 8 11.6 4.4 8z'/%3E%3C/g%3E%3C/svg%3E"); --dots-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='%23c4b5fd' fill-opacity='.38'%3E%3Cpath d='M7 4h2v3h3v2H9v3H7V9H4V7h3z'/%3E%3C/g%3E%3C/svg%3E"); --dots-tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='%23c4b5fd' fill-opacity='.38'%3E%3Cpath d='M8 4.3 11.8 11.2H4.2z'/%3E%3C/g%3E%3C/svg%3E"); --dots-square: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='%23c4b5fd' fill-opacity='.38'%3E%3Crect x='5.4' y='5.4' width='5.2' height='5.2'/%3E%3C/g%3E%3C/svg%3E"); } .hero::before, .section::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; transform: skewY(-7deg); z-index: -2; pointer-events: none; background-image: var(--dots); background-size: 16px 16px; -webkit-mask-image: linear-gradient(var(--fade, 100deg), #000 0%, rgba(0, 0, 0, .18) 55%, #000 100%); mask-image: linear-gradient(var(--fade, 100deg), #000 0%, rgba(0, 0, 0, .18) 55%, #000 100%); animation: uvDrift 4s linear infinite; } .hero::before { top: -420px; --dots: var(--dots-circle); --fade: 110deg; } #geoguessr::after { --dots: var(--dots-diamond); --fade: 80deg; } #challenges::after { --dots: var(--dots-cross); --fade: 115deg; } #languages::after { --dots: var(--dots-tri); --fade: 70deg; } #visitors::after { --dots: var(--dots-square); --fade: 100deg; } #visitors::before, #visitors::after { bottom: calc(-160px - 8vw); } .page { overflow-y: clip; } /* Tilted content: blocks inside each band run parallel to the slant. * The visitor map tilts too; home.js corrects Highcharts' mouse position for it. */ :root { --tilt: -7deg; } #geoguessr .section-head, #geoguessr .stats, #geoguessr .gg-links, #challenges .section-head, #challenges .gchal-bar, .langs > *, .scripts > *, #visitors .section-head, #visitors .map-frame, #visitors .map-meta, #visitor-rank { rotate: var(--tilt); } @media (min-width: 1181px) { #challenges .gchal-card { rotate: var(--tilt); } } @media (max-width: 1180px) { #challenges .gchal-photo { transform: rotate(-9deg); } #challenges .gchal-body > * { rotate: var(--tilt); } } /* Divider bar on each seam: fixed slant, only the stripes move */ .split-bar { position: absolute; left: calc(50% - 50vw); width: 100vw; bottom: 0; z-index: -1; pointer-events: none; transform: translateY(50%) skewY(-7deg); } .split-bar .bar { height: 26px; background-image: repeating-linear-gradient(90deg, var(--violet) 0 60px, var(--deep) 60px 120px); animation: uvStripe 2.2s linear infinite; } .split-bar .bar-thin { height: 6px; margin-top: 18px; background: var(--lilac); } .hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: start; } .hero-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; } .kicker { margin: 0; background: #000; padding: 6px 18px; transform: skewX(-14deg) rotate(-2deg); } .kicker > .unsk { font: 700 22px var(--cond); letter-spacing: 3px; color: var(--lilac); text-transform: uppercase; } .hero-name-wrap { transform-origin: left center; } .hero-name { margin: 0 0 0 -8px; font: 400 clamp(150px, 21vw, 300px)/.86 var(--display); letter-spacing: 4px; text-transform: uppercase; transform: rotate(-5deg); transform-origin: left center; text-shadow: 12px 12px 0 var(--violet), 24px 24px 0 #000; animation: uvShadow 1.6s steps(1) infinite; } .roles { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .roles li:nth-child(2) { margin-left: 40px; } .roles li:nth-child(3) { margin-left: 80px; } .role { display: inline-block; transform: skewX(-14deg); padding: 8px 26px; box-shadow: 6px 6px 0 #000; } .role > span { display: inline-block; transform: skewX(14deg); font: 400 34px/1.2 var(--display); letter-spacing: 1px; text-transform: uppercase; } .role--white { background: #fff; color: var(--ink); } .role--violet { background: var(--violet); } .role--outline { background: #000; border: 3px solid var(--lilac); color: var(--lilac); box-shadow: none; padding: 6px 24px; } .bio { max-width: 640px; margin-top: 10px; background: #000; border: 3px solid #fff; padding: 22px 26px; box-shadow: 10px 10px 0 var(--violet); } .bio p { margin: 0; font-size: 19px; line-height: 1.6; } .hero-side { position: relative; display: flex; flex-direction: column; gap: 40px; align-items: center; padding-top: 20px; } .burst { position: absolute; left: 50%; top: -40px; width: 640px; height: 640px; margin-left: -320px; background: rgba(124, 58, 237, .32); clip-path: polygon(100% 50%, 82.8% 58.8%, 93.3% 75%, 74% 74%, 75% 93.3%, 58.8% 82.8%, 50% 100%, 41.2% 82.8%, 25% 93.3%, 26% 74%, 6.7% 75%, 17.2% 58.8%, 0% 50%, 17.2% 41.2%, 6.7% 25%, 26% 26%, 25% 6.7%, 41.2% 17.2%, 50% 0%, 58.8% 17.2%, 75% 6.7%, 74% 26%, 93.3% 25%, 82.8% 41.2%); z-index: 0; animation: uvSpin 20s linear infinite, uvThrob 1.2s steps(2) infinite; } .avatar-wrap { position: relative; z-index: 1; width: 400px; max-width: 100%; } .avatar { position: relative; z-index: 1; width: 400px; max-width: 100%; aspect-ratio: 1; margin: 0; transform: rotate(4deg); } .avatar-shadow { position: absolute; top: 14px; left: 14px; right: -14px; bottom: -14px; background: var(--violet); clip-path: var(--jag); } .avatar-frame { position: absolute; inset: 0; background: #fff; clip-path: var(--jag); } .avatar-img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: cover; clip-path: var(--jag); background: #2e1560; } /* Now playing */ .np { position: relative; z-index: 1; width: 460px; max-width: 100%; animation: uvSlam .6s cubic-bezier(.2, .9, .2, 1) both; } .np-card { transform: rotate(-2deg); display: flex; gap: 18px; align-items: center; background: var(--ink); border: 3px solid #fff; box-shadow: 10px 10px 0 var(--violet); padding: 16px 20px 16px 16px; } .np-art { flex-shrink: 0; width: 108px; height: 108px; transform: rotate(4deg); border: 3px solid #fff; overflow: hidden; background-color: #2e1560; background-image: radial-gradient(rgba(196, 181, 253, .4) 2px, transparent 2.6px); background-size: 10px 10px; } .np-art img { width: 100%; height: 100%; object-fit: cover; } .np-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .np-head { display: flex; align-items: center; gap: 12px; } .np-label { background: #fff; padding: 2px 10px; } .np-label > .unsk { font: italic 800 16px var(--cond); letter-spacing: 2px; color: var(--ink); text-transform: uppercase; } .np-eq { display: flex; align-items: flex-end; gap: 3px; height: 20px; } .np-eq i { display: block; width: 5px; height: 20px; background: var(--violet); } .np-eq i:nth-child(even) { background: var(--lilac); } .np-title { font: 400 30px/1.05 var(--display); letter-spacing: .5px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .np-artist { font-size: 17px; color: var(--lilac); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .np-progress { display: flex; align-items: center; gap: 10px; margin-top: 4px; font: 700 15px var(--cond); font-variant-numeric: tabular-nums; } .np-track { flex: 1; height: 8px; transform: skewX(-20deg); background: rgba(196, 181, 253, .25); } .np-fill { height: 100%; width: 0; background: #fff; transition: width 1s linear; } /* Socials */ .socials { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 440px; max-width: 100%; } .social { display: block; transform: skewX(-12deg); background: #fff; padding: 12px 18px; text-decoration: none; box-shadow: 5px 5px 0 var(--violet); transition: transform .15s, box-shadow .15s; } .social > span { display: block; transform: skewX(12deg); font: italic 800 22px var(--cond); letter-spacing: 1px; color: var(--ink); text-transform: uppercase; } .social:hover { transform: skewX(-12deg) translate(-3px, -3px); box-shadow: 8px 8px 0 var(--violet); } /* ── GeoGuessr ──────────────────────────────────────────────────── */ .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; padding-right: 14px; margin: 0; } .stat { position: relative; overflow: hidden; transform: skewX(-10deg); background: var(--ink); border: 3px solid #fff; box-shadow: 9px 9px 0 var(--violet); padding: 18px 28px; } .stat-sweep { position: absolute; left: 0; top: 0; width: 34%; height: 100%; background: rgba(196, 181, 253, .16); } .stat-in { position: relative; transform: skewX(10deg); display: flex; flex-direction: column; } .stat dt { font: italic 700 20px var(--cond); letter-spacing: 2px; color: var(--lilac); text-transform: uppercase; } .stat dd { margin: 0; font: 400 clamp(46px, 4.8vw, 72px)/1.1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; } .stat dd.dim { opacity: .45; } .gg-links { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 40px; padding-right: 14px; } .gg-links .btn-slab { width: auto; margin-top: 0; } .btn-slab--dark { background: #000; box-shadow: 9px 9px 0 var(--violet), inset 0 0 0 3px #fff; } .btn-slab--dark > span { color: #fff; } /* ── Challenges ─────────────────────────────────────────────────── */ .gchal-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: -10px 0 34px; min-height: 44px; } .gchal-user { display: flex; align-items: center; gap: 12px; font: 700 20px var(--cond); letter-spacing: 1px; } .gchal-user img { width: 38px; height: 38px; border: 2px solid #fff; transform: rotate(-4deg); } .gchal-counter { font: italic 800 22px var(--cond); letter-spacing: 2px; color: var(--lilac); } .btn-ghost { display: inline-block; transform: skewX(-10deg); background: transparent; border: 2px solid var(--lilac); color: var(--lilac); padding: 6px 16px; text-decoration: none; font: italic 800 17px var(--cond); letter-spacing: 1px; text-transform: uppercase; } .btn-ghost:hover { background: var(--lilac); color: var(--ink); } .gchal-card { display: none; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 60px; align-items: start; } .gchal-card.active { display: grid; } .gchal-photo { position: relative; height: 560px; transform: rotate(-2deg); border: 10px solid #fff; box-shadow: 18px 18px 0 var(--violet); background-color: #3a2466; } .gchal-img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; } .gchal-sticker { position: absolute; left: -26px; top: -24px; z-index: 3; } .gchal-sticker .sk { transform: skewX(-14deg) rotate(-6deg); background: #000; padding: 6px 18px; border: 3px solid var(--lilac); } .gchal-sticker .unsk { font: 400 30px/1.2 var(--display); color: var(--lilac); text-transform: uppercase; } .gchal-nav { position: absolute; right: 18px; bottom: 18px; z-index: 2; display: flex; gap: 10px; } .nav-btn { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: #000; border: 3px solid #fff; color: #fff; transform: skewX(-10deg); } .nav-btn.next { background: #fff; color: var(--ink); } .nav-btn:disabled { opacity: .35; cursor: default; } .gchal-zoom { position: absolute; left: 18px; bottom: 18px; background: #000; border: 3px solid #fff; padding: 8px 16px; transform: skewX(-10deg); } .gchal-zoom > span { display: inline-block; transform: skewX(10deg); font: italic 800 18px var(--cond); letter-spacing: 1px; text-transform: uppercase; } .gchal-stamp { position: absolute; right: 24px; top: 24px; z-index: 2; transform: rotate(8deg); background: var(--violet); border: 4px solid #fff; padding: 4px 20px; font: 400 40px/1.2 var(--display); text-transform: uppercase; letter-spacing: 1px; box-shadow: 6px 6px 0 #000; } .gchal-login { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(7, 3, 13, .72); backdrop-filter: blur(8px); } .gchal-login .btn-slab { width: auto; } .gchal-body { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .gchal-title { margin: 0; font: 400 50px/1 var(--display); letter-spacing: 1px; text-transform: uppercase; overflow-wrap: anywhere; } .gchal-solves { display: flex; flex-direction: column; gap: 6px; font-size: 16px; color: var(--lilac); } .first-solver { display: flex; align-items: center; gap: 8px; color: #fff; } .first-solver img { width: 24px; height: 24px; border: 2px solid var(--lilac); } .gchal-note { margin: 0; font-size: 17px; color: var(--pale); } .hints { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .hint { display: flex; align-items: center; gap: 18px; transform: skewX(-8deg); background: rgba(0, 0, 0, .4); border: 2px solid rgba(196, 181, 253, .6); padding: 12px 20px; } .hint > * { transform: skewX(8deg); } .hint.is-open { background: #000; border-color: #fff; animation: uvFlash .35s steps(2); } .hint-num { font: 400 44px/1 var(--display); color: var(--lilac); flex-shrink: 0; } .hint-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .hint-label { font: 700 20px var(--cond); letter-spacing: 2px; text-transform: uppercase; color: var(--lilac); } .hint.is-open .hint-label { color: #fff; } .hint-text { font-size: 17px; color: var(--pale); overflow-wrap: anywhere; } .hint:not(.is-open) .hint-text { color: var(--lilac); opacity: .7; font-style: italic; } .hint-reveal { flex-shrink: 0; background: #fff; border: 0; padding: 8px 16px; font: italic 800 18px var(--cond); color: var(--ink); text-transform: uppercase; letter-spacing: 1px; } .hint-reveal:hover { background: var(--lilac); } .coords { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } .field-label { font: 700 20px var(--cond); letter-spacing: 3px; color: var(--lilac); text-transform: uppercase; } .field-help { margin: 0; font-size: 15px; color: var(--lilac); } .coords-input { width: 100%; height: 64px; padding: 0 20px; background: var(--ink); border: 3px solid #fff; box-shadow: 7px 7px 0 var(--violet); color: #fff; font: 600 26px var(--cond); letter-spacing: 1px; } .coords-input::placeholder { color: rgba(196, 181, 253, .6); } .coords-input:focus-visible { outline-offset: 5px; } .check { display: flex; align-items: center; gap: 10px; font: 700 17px var(--cond); letter-spacing: 1px; color: var(--lilac); text-transform: uppercase; cursor: pointer; align-self: flex-start; } .check input { width: 20px; height: 20px; accent-color: var(--violet); margin: 0; } .btn-slab { display: block; width: 100%; margin-top: 6px; transform: skewX(-12deg); background: #fff; border: 0; padding: 14px 24px; box-shadow: 9px 9px 0 var(--violet); text-decoration: none; text-align: center; transition: transform .12s, box-shadow .12s; } .btn-slab > span { display: inline-block; transform: skewX(12deg); font: 400 36px/1.2 var(--display); letter-spacing: 2px; color: var(--ink); text-transform: uppercase; } .btn-slab:hover:not(:disabled) { transform: skewX(-12deg) translate(-3px, -3px); box-shadow: 12px 12px 0 var(--violet); } .btn-slab:active:not(:disabled) { transform: skewX(-12deg) translate(4px, 4px); box-shadow: 4px 4px 0 var(--violet); } .btn-slab:disabled { opacity: .5; cursor: default; } .btn-slab--sm > span { font-size: 24px; } .feedback { margin: 0; min-height: 1.5em; font: 700 20px var(--cond); letter-spacing: 1px; } .feedback.ok { color: var(--ok); } .feedback.err { color: var(--err); } /* ── Languages & scripts ────────────────────────────────────────── */ .skills { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; } .lang-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; row-gap: 20px; column-gap: 24px; } .lang { display: contents; } .lang-name { font: 400 42px/1 var(--display); text-transform: uppercase; } .meter { display: flex; gap: 8px; } .meter i { width: 32px; height: 20px; transform: skewX(-20deg); border: 2px solid rgba(196, 181, 253, .45); } .meter i.on { background: var(--lilac); border-color: var(--lilac); } .lang.is-native .meter i.on { background: #fff; border-color: #fff; } .lang-level { font: italic 800 24px var(--cond); color: var(--lilac); text-transform: uppercase; } .lang.is-native .lang-level { color: #fff; } .scripts { display: flex; flex-direction: column; gap: 26px; } .scripts .h2 { margin-bottom: 8px; } .script-group { margin: 0; align-self: flex-start; background: #fff; padding: 4px 16px; } .script-group > .unsk { font: italic 800 22px var(--cond); letter-spacing: 2px; color: var(--ink); text-transform: uppercase; } .script-group.is-partial { margin-top: 10px; background: #000; border: 3px dashed var(--lilac); padding: 2px 14px; } .script-group.is-partial > .unsk { color: var(--lilac); } .script-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .script { display: flex; flex-direction: column; background: #fff; color: var(--ink); padding: 16px 20px; box-shadow: 7px 7px 0 var(--violet); } .script:nth-child(4n+1) { transform: rotate(-2deg); } .script:nth-child(4n+2) { transform: rotate(2deg); } .script:nth-child(4n+3) { transform: rotate(1deg); } .script:nth-child(4n+4) { transform: rotate(-1.5deg); } .script-glyph { font: 600 30px/1.35 var(--scripts); } .script-name { font: 700 18px var(--cond); letter-spacing: 2px; text-transform: uppercase; } .script-grid.is-partial .script { background: #000; color: #fff; border: 3px dashed var(--lilac); box-shadow: none; padding: 13px 17px; } .script-grid.is-partial .script-name { color: var(--lilac); } /* ── Visitors ───────────────────────────────────────────────────── */ .map-frame { margin-right: 14px; padding: 18px; background: #0a0a0a; border: 4px solid #fff; box-shadow: 14px 14px 0 var(--violet); } #visitor-map { width: 100%; height: 460px; } .highcharts-button-symbol { stroke: #8b5cf6 !important; } .highcharts-button-box { fill: #0a0a0a !important; stroke: rgb(76,0,255) !important; } #visitor-map .highcharts-map-series { filter: drop-shadow(3px 3px 0 #303) } .map-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin: 44px 14px 0 0; } .map-meta-cell { transform: skewX(-10deg); background: var(--ink); border: 3px solid #fff; box-shadow: 8px 8px 0 var(--violet); padding: 14px 24px; } .map-meta-cell > * { transform: skewX(10deg); } .map-meta-cell:first-child { background: #fff; color: var(--ink); } .map-meta-label { font: 700 20px var(--cond); letter-spacing: 2px; text-transform: uppercase; color: var(--lilac); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .map-meta-cell:first-child .map-meta-label { color: var(--deep); } .map-meta-value { display: flex; align-items: center; gap: 10px; font: 400 34px/1.2 var(--display); text-transform: uppercase; } .podium-flagimg { height: 24px; width: auto; border: 2px solid currentColor; } #visitor-rank:not(:empty) { display: table; margin: 76px auto 0; text-align: center; transform: rotate(-1.5deg); background: var(--violet); padding: 14px 34px 14px 28px; clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%); font: 700 24px var(--cond); letter-spacing: 1px; } #visitor-rank img { display: inline-block; height: 18px; width: auto; margin-right: 6px; vertical-align: middle; } #visitor-rank strong { font: 400 32px/1 var(--display); letter-spacing: 1px; } /* Footer */ .footer { display: flex; justify-content: space-between; gap: 16px; font: 700 18px var(--cond); letter-spacing: 3px; color: var(--lilac); text-transform: uppercase; } /* ── Guestbook phone ────────────────────────────────────────────── */ .gb { position: fixed; right: 20px; bottom: 20px; z-index: 300; } .gb-tab { position: relative; width: 118px; height: 118px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transform: rotate(-8deg); background: #fff; border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--violet); color: var(--ink); transition: transform .15s; } .gb-tab:hover { transform: rotate(-4deg) scale(1.05); } .gb-tab-label { font: italic 800 18px var(--cond); letter-spacing: 1px; text-transform: uppercase; } .gb-dot { position: absolute; right: -12px; top: -12px; width: 22px; height: 22px; background: var(--violet); border: 3px solid #fff; } .gb.is-open .gb-tab { display: none; } .gb-phone { position: relative; width: 330px; height: min(600px, calc(100vh - 60px)); transform: rotate(-3deg); animation: gbIn .35s cubic-bezier(.2, .9, .2, 1.2) both; } .gb-layer { position: absolute; clip-path: var(--phone); } .gb-shadow { inset: 0; transform: translate(14px, 14px); background: var(--violet); } .gb-frame { inset: 0; background: #fff; } .gb-shell { inset: 7px; background: var(--ink); padding: 16px 20px 20px 22px; display: flex; flex-direction: column; gap: 12px; } .gb-speaker { align-self: center; flex-shrink: 0; width: 64px; height: 6px; background: #2a1a44; border-radius: 3px; } .gb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; } .gb-title { margin: 0; background: var(--violet); padding: 2px 14px; } .gb-title > .unsk { font: 400 30px/1.2 var(--display); letter-spacing: 1px; text-transform: uppercase; } .gb-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: #fff; border: 0; color: var(--ink); transform: skewX(-10deg); } .gb-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 4px 6px 4px 0; scrollbar-width: thin; scrollbar-color: var(--violet) transparent; } .gb-msg { display: flex; gap: 10px; align-items: flex-start; } .gb-msg.is-lua { flex-direction: row-reverse; } .gb-av { flex-shrink: 0; width: 30px; height: 30px; object-fit: cover; background: var(--lilac); border: 3px solid #fff; transform: rotate(-6deg); } .gb-msg:nth-child(even) .gb-av { background: #fff; border-color: var(--lilac); transform: rotate(5deg); } .gb-msg.is-lua .gb-av { background: var(--violet); border-color: #fff; } .gb-msg-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: flex-start; } .gb-msg.is-lua .gb-msg-body { align-items: flex-end; } .gb-meta-line { font: 700 14px var(--cond); letter-spacing: 1.5px; color: var(--lilac); text-transform: uppercase; } .gb-meta-line b { color: #fff; font-weight: 700; } .gb-bubble { background: #fff; color: var(--ink); padding: 10px 20px 12px 14px; clip-path: polygon(0 0, 100% 6%, 97% 100%, 2% 90%); font-size: 16px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; } .gb-msg:nth-child(even) .gb-bubble { clip-path: polygon(2% 4%, 100% 0, 98% 94%, 0 100%); } .gb-msg.is-lua .gb-bubble { background: var(--violet); color: #fff; padding: 10px 14px 12px 20px; } .gb-bubble.collapsed { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .gb-more { background: none; border: 0; padding: 0; color: var(--lilac); font: 700 14px var(--cond); letter-spacing: 1.5px; text-transform: uppercase; } .gb-reply { align-self: flex-end; margin-top: 6px; max-width: 92%; background: var(--violet); color: #fff; padding: 8px 14px 10px 18px; clip-path: polygon(3% 0, 100% 5%, 98% 100%, 0 92%); font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; } .gb-reply b { font: 700 15px var(--cond); letter-spacing: 1px; text-transform: uppercase; margin-right: 6px; } .gb-empty { margin: auto; text-align: center; color: var(--lilac); font: 700 16px var(--cond); letter-spacing: 1.5px; text-transform: uppercase; } .gb-form { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; } .gb-mode { display: flex; flex-wrap: wrap; gap: 5px 10px; margin: 0; padding: 0 4px 0 0; border: 0; min-width: 0; } .gb-mode legend { float: left; width: 100%; margin: 0; padding: 0; } .gb-mode-opt { position: relative; flex: 1; cursor: pointer; } .gb-mode-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .gb-mode-opt span { display: block; text-align: center; padding: 6px 8px; transform: skewX(-12deg); border: 2px solid #fff; font: italic 800 15px var(--cond); letter-spacing: 1px; text-transform: uppercase; } .gb-mode-opt input:checked + span { background: #fff; color: var(--ink); } .gb-mode-opt input:focus-visible + span { outline: 3px solid var(--lilac); outline-offset: 2px; } .gb-who { display: flex; align-items: center; gap: 8px; min-height: 34px; font: 700 14px var(--cond); letter-spacing: 1px; color: var(--lilac); text-transform: uppercase; } .gb-who img { width: 28px; height: 28px; object-fit: cover; border: 2px solid #fff; transform: rotate(-5deg); } .gb-who b { color: #fff; font-weight: 700; } .gb-who .gb-login { display: inline-block; transform: skewX(-12deg); background: #5865f2; color: #fff; padding: 5px 12px; text-decoration: none; } .gb-who .gb-login > span { display: inline-block; transform: skewX(12deg); } .gb-compose textarea:disabled, .gb-send:disabled { opacity: .45; cursor: not-allowed; } .gb-label { font: 700 14px var(--cond); letter-spacing: 2.5px; color: var(--lilac); text-transform: uppercase; } .gb-name, .gb-compose textarea { background: var(--bg); border: 2px solid #fff; color: #fff; font-size: 15px; } .gb-name { height: 38px; padding: 0 10px; margin-bottom: 4px; } .gb-name::placeholder, .gb-compose textarea::placeholder { color: rgba(196, 181, 253, .6); } .gb-compose { display: flex; gap: 10px; align-items: stretch; } .gb-compose textarea { flex: 1; min-width: 0; min-height: 46px; max-height: 110px; resize: none; padding: 9px 10px; line-height: 1.35; } .gb-send { flex-shrink: 0; transform: skewX(-12deg); background: var(--violet); border: 2px solid #fff; padding: 0 16px; } .gb-send > span { display: inline-block; transform: skewX(12deg); font: 400 18px var(--display); letter-spacing: 1px; text-transform: uppercase; } .gb-send:disabled { opacity: .5; } .gb-foot { display: flex; justify-content: space-between; gap: 8px; font: 700 14px var(--cond); letter-spacing: 1.5px; color: var(--lilac); } .gb-error { color: var(--err); } /* ── Lightbox & confetti ────────────────────────────────────────── */ .lightbox { position: fixed; inset: 0; z-index: 500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px; background: rgba(7, 3, 13, .95); } .lightbox img { max-width: 94vw; max-height: 68vh; object-fit: contain; border: 6px solid #fff; box-shadow: 14px 14px 0 var(--violet); } .lb-form { width: min(760px, 94vw); display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; } .lb-form .btn-slab { margin-top: 0; width: auto; } .lb-form .feedback { grid-column: 1 / -1; } .lb-close { position: absolute; top: 18px; right: 18px; background: #fff; border: 0; color: var(--ink); padding: 8px 18px; transform: skewX(-10deg); font: italic 800 18px var(--cond); letter-spacing: 1px; text-transform: uppercase; } #gchal-confetti { position: fixed; inset: 0; z-index: 600; pointer-events: none; display: none; } /* ── Admin ──────────────────────────────────────────────────────── */ #admin-btn { display: none; position: fixed; left: 20px; bottom: 20px; z-index: 290; background: #000; border: 2px solid var(--lilac); color: var(--lilac); padding: 6px 14px; font: 700 16px var(--cond); letter-spacing: 1px; text-transform: uppercase; } #admin-btn:hover { background: var(--lilac); color: var(--ink); } #admin-panel { display: none; position: fixed; inset: 0; z-index: 700; background: rgba(7, 3, 13, .85); align-items: center; justify-content: center; padding: 20px; } #admin-panel.open { display: flex; } #admin-inner { width: min(580px, 100%); height: min(760px, 100%); display: flex; flex-direction: column; background: var(--ink); border: 3px solid #fff; box-shadow: 12px 12px 0 var(--violet); font-size: 15px; } #admin-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 2px solid var(--deep); font: 400 26px var(--display); text-transform: uppercase; letter-spacing: 1px; } #admin-close { background: none; border: 0; color: var(--lilac); font: 700 16px var(--cond); text-transform: uppercase; letter-spacing: 1px; } #admin-close:hover { color: var(--err); } .admin-tabs { display: flex; border-bottom: 2px solid var(--deep); } .admin-tab { flex: 1; background: none; border: 0; border-right: 2px solid var(--deep); padding: 10px; color: var(--lilac); font: 700 16px var(--cond); letter-spacing: 1.5px; text-transform: uppercase; } .admin-tab:last-child { border-right: 0; } .admin-tab.active { background: var(--violet); color: #fff; } .admin-pane { display: none; padding: 18px; overflow-y: auto; flex: 1; } .admin-pane.active { display: block; } .admin-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; } .admin-row > * { flex: 1; } .admin-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .admin-label { font: 700 13px var(--cond); color: var(--lilac); letter-spacing: 1.5px; text-transform: uppercase; } .admin-input { width: 100%; background: var(--bg); border: 2px solid var(--deep); color: #fff; padding: 8px 10px; font-size: 15px; } .admin-input:focus { border-color: var(--lilac); outline: none; } .admin-textarea { resize: vertical; min-height: 80px; } .admin-btn { background: #fff; border: 0; color: var(--ink); padding: 8px 14px; font: 700 15px var(--cond); letter-spacing: 1px; text-transform: uppercase; } .admin-btn:hover { background: var(--lilac); } .admin-btn.is-off { opacity: .45; } .admin-btn.danger { background: transparent; border: 2px solid var(--err); color: var(--err); } .admin-btn.danger:hover { background: var(--err); color: var(--ink); } .admin-filename { font-size: 13px; color: var(--lilac); margin-top: 4px; } .admin-status { font: 700 15px var(--cond); letter-spacing: .5px; margin-top: 8px; min-height: 18px; } .admin-status.ok { color: var(--ok); } .admin-status.err { color: var(--err); } .admin-challenge-list { display: flex; flex-direction: column; gap: 2px; background: var(--deep); border: 2px solid var(--deep); margin-bottom: 14px; } .admin-challenge-item { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; background: var(--ink); cursor: pointer; } .admin-challenge-item:hover, .admin-challenge-item.selected { background: #1f0f3d; } .admin-challenge-item.selected { box-shadow: inset 4px 0 0 var(--lilac); } .admin-chal-meta { font-size: 13px; color: var(--lilac); white-space: nowrap; } .admin-solver-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--deep); } .admin-solver-row:last-child { border-bottom: 0; } .admin-solver-avatar { width: 22px; height: 22px; border: 1px solid var(--lilac); } .admin-solver-rank { width: 30px; flex-shrink: 0; font-size: 13px; color: var(--lilac); } .admin-solver-ts { margin-left: auto; font-size: 12px; color: var(--lilac); } .admin-section-title { font: 700 14px var(--cond); color: var(--lilac); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; } .admin-empty { padding: 10px; font-size: 13px; color: var(--lilac); } .admin-empty.err { color: var(--err); } #admin-edit-form { display: none; } #admin-edit-form.open { display: block; } /* ── More motion: idle life on shapes, parts and buttons ────────── */ @keyframes uvOffset { 0%, 100% { translate: 0 0; } 33% { translate: 7px -5px; } 66% { translate: -5px 6px; } } @keyframes uvTwitch { 0%, 86%, 100% { translate: 0 0; scale: 1; } 89% { translate: -5px 1px; scale: 1.04 .97; } 93% { translate: 4px -1px; scale: .98 1.02; } 96% { translate: 1px 0; scale: 1; } } @keyframes uvWobble { 0%, 100% { rotate: 0deg; } 50% { rotate: 1.8deg; } } @keyframes uvBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } } @keyframes uvRing { 0%, 78%, 100% { rotate: 0deg; } 82% { rotate: -9deg; } 86% { rotate: 9deg; } 90% { rotate: -6deg; } 94% { rotate: 4deg; } } @keyframes uvNudgeR { 0%, 100% { translate: 0 0; } 50% { translate: 4px 0; } } @keyframes uvNudgeL { 0%, 100% { translate: 0 0; } 50% { translate: -4px 0; } } @keyframes uvShine { 0% { translate: -160% 0; } 45%, 100% { translate: 480% 0; } } @keyframes uvFill { from { scale: 0 1; opacity: 0; } to { scale: 1 1; opacity: 1; } } @keyframes uvStampIn { 0% { opacity: 0; scale: 2.4; rotate: -18deg; } 60% { opacity: 1; scale: .9; rotate: 4deg; } 100% { opacity: 1; scale: 1; rotate: 0deg; } } @keyframes uvCardNext { from { opacity: 0; translate: 140px 0; scale: .96; } 70% { translate: -10px 0; } to { opacity: 1; translate: 0 0; scale: 1; } } @keyframes uvCardPrev { from { opacity: 0; translate: -140px 0; scale: .96; } 70% { translate: 10px 0; } to { opacity: 1; translate: 0 0; scale: 1; } } @keyframes uvMsgIn { from { opacity: 0; translate: -46px 0; scale: .85; } 70% { translate: 6px 0; scale: 1.03; } to { opacity: 1; translate: 0 0; scale: 1; } } @keyframes uvMsgInR { from { opacity: 0; translate: 46px 0; scale: .85; } 70% { translate: -6px 0; scale: 1.03; } to { opacity: 1; translate: 0 0; scale: 1; } } @keyframes uvBorderFlick { 0%, 100% { border-color: var(--lilac); } 50% { border-color: #fff; } } @keyframes uvShadowV { 0%, 100% { box-shadow: 9px 9px 0 var(--violet); } 50% { box-shadow: 15px 5px 0 var(--violet); } } @keyframes uvShadowBig { 0%, 100% { box-shadow: 18px 18px 0 var(--violet); } 50% { box-shadow: 26px 12px 0 var(--violet); } } @keyframes uvShadowMap { 0%, 100% { box-shadow: 14px 14px 0 var(--violet); } 50% { box-shadow: 20px 9px 0 var(--violet); } } @keyframes uvShadowBio { 0%, 100% { box-shadow: 10px 10px 0 var(--violet); } 50% { box-shadow: 16px 6px 0 var(--violet); } } @keyframes uvShadowK { 0%, 100% { box-shadow: 6px 6px 0 #000; } 50% { box-shadow: 11px 3px 0 #000; } } @keyframes uvShadowLogo { 0%, 100% { box-shadow: 7px 7px 0 #000; } 50% { box-shadow: 12px 3px 0 #000; } } @keyframes uvShadowSoc { 0%, 100% { box-shadow: 5px 5px 0 var(--violet); } 50% { box-shadow: 9px 2px 0 var(--violet); } } @keyframes uvPing { 0% { box-shadow: 0 0 0 0 rgba(134, 239, 172, .75); scale: 1; } 50% { scale: 1.25; } 100% { box-shadow: 0 0 0 11px rgba(134, 239, 172, 0); scale: 1; } } @keyframes uvPillPulse { 0%, 100% { border-color: var(--lilac); } 50% { border-color: var(--ok); box-shadow: 0 0 16px rgba(134, 239, 172, .4); } } @keyframes gbOut { to { opacity: 0; transform: translateY(40px) rotate(8deg) scale(.9); } } /* Shapes */ .burst-2 { width: 460px; height: 460px; margin-left: -230px; top: 50px; background: rgba(196, 181, 253, .14); animation: uvSpin 13s linear infinite reverse, uvThrob 1.2s steps(2) -.6s infinite; } .avatar-shadow { animation: uvOffset 1.4s steps(1) infinite; } /* Parts */ .logo { animation: uvShadowLogo 1.8s steps(1) infinite; } .kicker { animation: uvJitter 2.6s steps(1) -1s infinite; } .role { animation: uvShadowK 1.4s steps(1) infinite; } .roles li:nth-child(2) .role { animation-delay: -.45s; } .role--outline { animation: uvBorderFlick 1.4s steps(1) -.9s infinite; } .bio { animation: uvShadowBio 1.8s steps(1) -.3s infinite; } .bio.uv-in { animation: uvSlam .65s cubic-bezier(.2, .9, .2, 1) var(--d, 0s) both, uvShadowBio 1.8s steps(1) 1.4s infinite; } .presence { animation: uvTwitch 5s steps(1) -2s infinite; } .presence-dot.online, #sticky-indicator.online { animation: uvPing 1.4s ease-out infinite; } .presence.is-online { animation: uvTwitch 5s steps(1) -2s infinite, uvPillPulse 1.4s ease-in-out infinite; } #sticky-bar.is-online { animation: uvPillPulse 1.4s ease-in-out infinite; } .section-head .h2 { animation: uvTwitch 4.5s steps(1) infinite; } #challenges .section-head .h2 { animation-delay: -1.5s; } #languages .section-head .h2, .scripts .h2 { animation-delay: -3s; } #visitors .section-head .h2 { animation-delay: -.7s; } .scripts .h2 { animation: uvTwitch 4.5s steps(1) -2.2s infinite; } .np-card { animation: uvShadowBio 1.6s steps(1) infinite; } .np-art { animation: uvWobble 1.2s steps(1) infinite; } .stat[data-reveal].is-in { animation: uvSlam .6s cubic-bezier(.2, .9, .2, 1) var(--d, 0s) both, uvShadowV 1.6s steps(1) var(--d, 0s) infinite; } .gchal-photo { animation: uvShadowBig 1.6s steps(1) infinite, uvWobble 2.4s steps(1) -1.2s infinite; } .gchal-stamp { animation: uvStampIn .5s cubic-bezier(.2, .9, .2, 1) both; } .gchal-card.active.enter-next { animation: uvCardNext .45s cubic-bezier(.2, .9, .2, 1) both; } .gchal-card.active.enter-prev { animation: uvCardPrev .45s cubic-bezier(.2, .9, .2, 1) both; } .coords-input.is-wrong { animation: uvShake .28s steps(3) 2; } .lang-list.is-in .meter i.on { animation: uvFill .22s cubic-bezier(.2, .9, .2, 1.3) both; } .lang-list.is-in .meter i.on:nth-child(1) { animation-delay: .25s; } .lang-list.is-in .meter i.on:nth-child(2) { animation-delay: .32s; } .lang-list.is-in .meter i.on:nth-child(3) { animation-delay: .39s; } .lang-list.is-in .meter i.on:nth-child(4) { animation-delay: .46s; } .lang-list.is-in .meter i.on:nth-child(5) { animation-delay: .53s; } .lang-list.is-in .meter i.on:nth-child(6) { animation-delay: .6s; } .script[data-reveal].is-in { animation: uvDrop .6s cubic-bezier(.2, .9, .2, 1) var(--d, 0s) both, uvWobble 2.2s steps(1) calc(var(--d, 0s) + .6s) infinite; } .script[data-reveal].is-in:nth-child(even) { animation-direction: normal, reverse; } .script-group { animation: uvTwitch 3.8s steps(1) -1s infinite; } .script-group[data-reveal].is-in { animation: uvSlam .6s cubic-bezier(.2, .9, .2, 1) both, uvTwitch 3.8s steps(1) .6s infinite; } .map-frame[data-reveal].is-in { animation: uvSlam .6s cubic-bezier(.2, .9, .2, 1) both, uvShadowMap 1.8s steps(1) .6s infinite; } #visitors.is-in .map-meta-cell:first-child { animation: uvDrop .6s cubic-bezier(.2, .9, .2, 1) both, uvBob 1.2s steps(2) .6s infinite; } #visitor-rank:not(:empty) { animation: uvTwitch 3.6s steps(1) infinite; } .gb-msg.is-new { animation: uvMsgIn .38s cubic-bezier(.2, .9, .2, 1) var(--d, 0s) both; } .gb-msg.is-lua.is-new { animation-name: uvMsgInR; } .gb-phone.is-closing { animation: gbOut .18s ease-in both; } /* Buttons */ .btn-slab, .gb-send { position: relative; overflow: hidden; } .btn-slab > span, .gb-send > span { position: relative; z-index: 1; } .btn-slab::after, .gb-send::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 28%; background: rgba(124, 58, 237, .22); pointer-events: none; translate: -160% 0; animation: uvShine 2.6s cubic-bezier(.7, 0, .3, 1) infinite; } .gb-send::after { background: rgba(255, 255, 255, .3); animation-delay: -1.2s; } .social { animation: uvShadowSoc 1.5s steps(1) infinite; } .socials li:nth-child(2) .social { animation-delay: -.4s; } .socials li:nth-child(3) .social { animation-delay: -.8s; } .socials li:nth-child(4) .social { animation-delay: -1.2s; } .nav-btn.next:not(:disabled) svg { animation: uvNudgeR .8s steps(2) infinite; } .nav-btn.prev:not(:disabled) svg { animation: uvNudgeL .8s steps(2) infinite; } .hint-reveal { animation: uvPop 1s steps(2) infinite; } .gb-tab { animation: uvRing 3.2s steps(1) infinite, uvBob 1.6s steps(2) infinite; } .gchal-zoom { animation: uvTwitch 4s steps(1) -1s infinite; } .btn-ghost:hover { animation: uvShake .25s steps(3); } .social:active, .nav-btn:active, .gb-send:active, .hint-reveal:active, .gb-tab:active, .gchal-zoom:active, .motion-toggle:active { translate: 3px 3px; } /* ── Responsive ─────────────────────────────────────────────────── */ @media (max-width: 1180px) { .page { padding: 32px 36px 64px; gap: 80px; } .topbar { flex-wrap: wrap; } .hero { grid-template-columns: minmax(0, 1fr); } .hero-side { padding-top: 40px; } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gchal-card.active { grid-template-columns: minmax(0, 1fr); gap: 56px; } .skills { grid-template-columns: minmax(0, 1fr); gap: 80px; } } @media (max-width: 640px) { body { font-size: 17px; } .page { padding: 20px 18px 150px; gap: 64px; } .logo > .unsk { font-size: 28px; } .presence { font-size: 15px; padding: 6px 12px; } .kicker > .unsk { font-size: 17px; letter-spacing: 2px; } .hero-name { font-size: clamp(120px, 40vw, 200px); text-shadow: 8px 8px 0 var(--violet), 16px 16px 0 #000; } .roles li:nth-child(n) { margin-left: 0; } .role > span { font-size: 26px; } .bio p { font-size: 17px; } .burst { width: 440px; height: 440px; margin-left: -220px; } .burst-2 { width: 320px; height: 320px; margin-left: -160px; top: 20px; } .avatar-wrap, .avatar { width: min(320px, 80vw); } .np-card { gap: 14px; padding: 12px 14px 12px 12px; } .np-art { width: 80px; height: 80px; } .np-title { font-size: 24px; } .social > span { font-size: 18px; } .section-head { gap: 12px; margin-bottom: 26px; } .stats { gap: 22px; padding-right: 10px; } .stat { padding: 14px 18px; } .stat dt { font-size: 16px; letter-spacing: 1px; } .stat dd { font-size: 40px; } .gchal-photo { height: 320px; border-width: 6px; box-shadow: 10px 10px 0 var(--violet); } .gchal-sticker { left: -10px; top: -18px; } .gchal-sticker .unsk { font-size: 22px; } .gchal-title { font-size: 36px; } .hint { gap: 12px; padding: 10px 14px; } .hint-num { font-size: 32px; } .hint-label { font-size: 17px; } .coords-input { font-size: 21px; height: 56px; } .btn-slab > span { font-size: 28px; } .lang-list { column-gap: 14px; row-gap: 16px; } .lang-name { font-size: 28px; } .meter { gap: 4px; } .meter i { width: 16px; height: 14px; } .lang-level { font-size: 19px; } .script-grid { gap: 16px; } .script { padding: 12px 14px; } .script-glyph { font-size: 23px; } .script-name { font-size: 15px; letter-spacing: 1px; } #visitor-map { height: 300px; } .map-frame { padding: 10px; } .map-meta { grid-template-columns: 1fr; gap: 18px; } #visitor-rank:not(:empty) { font-size: 19px; } .footer { font-size: 15px; letter-spacing: 2px; } .gb { right: 12px; bottom: 12px; } .gb-tab { width: 90px; height: 90px; } .gb-tab svg { width: 26px; height: 26px; } .gb-tab-label { font-size: 15px; } .gb-phone { width: min(330px, calc(100vw - 40px)); height: min(560px, calc(100dvh - 40px)); } .lb-form { grid-template-columns: 1fr; } }