/* Y2K MODE: 2003 GeoCities / Windows XP skin. Everything is scoped to [data-skin="y2k"] on , so this file does nothing in normal mode. The .y2k-* chrome is injected by js/y2k.js while the mode is on; leaving it tears down with a reload. */ /* Comic Sans, Impact and Brush Script only exist on Windows and macOS. On Android there is no fallback worth having, so ship Comic Neue and Anton as stand-ins. */ /* latin-ext */ @font-face { font-family: 'Comic Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/comic-neue-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; } @font-face { font-family: 'Comic Neue'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/comic-neue-700-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; } /* latin-ext */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/anton-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; } /* latin */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/anton-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; } /* Token remap: lurid palette outside, XP beige inside the windows */ [data-skin="y2k"] { --acid: #00ff00; --hot: #ff00de; --cyan: #00ffff; --line: #ff00de; --ok: #00ff00; } [data-skin="y2k"] .card, [data-skin="y2k"] .pl-modal { color: #000; /* text that inherits, e.g. the discord status line */ --fg: #000; --dim: #555; --line: #aca899; --card: #ece9d8; --paper: #fffdf5; --acid: #008000; --ok: #008000; } /* ---- desktop: starfield, comic sans, real cursors ---- */ [data-skin="y2k"] body { font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive; background-color: #0b0033; cursor: default; } @keyframes y2k-stars { to { background-position: -260px 260px } } /* ::after is the scrolling starfield, kept off itself so right-clicking empty space can't offer "view background image" on the svg. ::before is a lurid nebula glow cycling through every hue. */ [data-skin="y2k"] body::after { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='18' cy='42' r='1.5'/%3E%3Ccircle cx='92' cy='15' r='1'/%3E%3Ccircle cx='146' cy='88' r='1.8'/%3E%3Ccircle cx='220' cy='40' r='1.2'/%3E%3Ccircle cx='60' cy='130' r='1'/%3E%3Ccircle cx='200' cy='150' r='1.5'/%3E%3Ccircle cx='30' cy='210' r='1.2'/%3E%3Ccircle cx='120' cy='235' r='1'/%3E%3Ccircle cx='245' cy='220' r='1.6'/%3E%3C/g%3E%3Cpath fill='%23fff7ae' d='M70 60l2.2 5.8 5.8 2.2-5.8 2.2-2.2 5.8-2.2-5.8-5.8-2.2 5.8-2.2z'/%3E%3Cpath fill='%237ad7ff' d='M180 190l2.2 5.8 5.8 2.2-5.8 2.2-2.2 5.8-2.2-5.8-5.8-2.2 5.8-2.2z'/%3E%3Cpath fill='%23ff8ad8' d='M230 110l2.2 5.8 5.8 2.2-5.8 2.2-2.2 5.8-2.2-5.8-5.8-2.2 5.8-2.2z'/%3E%3C/svg%3E"); animation: y2k-stars 60s linear infinite; } [data-skin="y2k"] body::before { content: ""; display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 1; background: radial-gradient(circle at 12% 8%, rgba(255, 0, 222, .30), transparent 45%), radial-gradient(circle at 88% 18%, rgba(0, 255, 255, .22), transparent 40%), radial-gradient(circle at 50% 100%, rgba(127, 255, 0, .18), transparent 45%); animation: y2k-hue 14s linear infinite; } [data-skin="y2k"] a, [data-skin="y2k"] button, [data-skin="y2k"] .pl-tile { cursor: pointer } [data-skin="y2k"] ::selection { background: #000080; color: #fff } /* chunky XP scrollbars */ [data-skin="y2k"] ::-webkit-scrollbar { width: 16px; height: 16px; background: #d6d2c2 } [data-skin="y2k"] ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #cfe0fb, #88aeee); border: 1px solid #4d6185; } [data-skin="y2k"] .pl-grid { scrollbar-width: auto; scrollbar-color: #88aeee #d6d2c2 } /* ---- top bar ---- */ [data-skin="y2k"] .top, [data-skin="y2k"] .top .live { color: #00ff90; font-family: "Courier New", monospace; text-shadow: 0 0 5px rgba(0, 255, 144, .7); } /* classic 3D bevel buttons */ [data-skin="y2k"] .lang-btn, [data-skin="y2k"] .pl-open-btn, [data-skin="y2k"] .pl-close-btn { background: #ece9d8; border: 2px outset #fff; border-radius: 0; color: #000; font-family: Tahoma, Verdana, sans-serif; letter-spacing: 0; text-transform: none; text-shadow: none; } [data-skin="y2k"] .lang-btn:hover, [data-skin="y2k"] .pl-close-btn:hover { color: #000; border-color: #fff } [data-skin="y2k"] .lang-btn:active, [data-skin="y2k"] .pl-open-btn:active, [data-skin="y2k"] .pl-close-btn:active { border-style: inset } /* hide the light/dark toggle, but with visibility rather than display, and keep its normal box metrics so the EXIT Y2K button doesn't shift sideways when the skin turns on */ [data-skin="y2k"] #theme-toggle { visibility: hidden; font-family: inherit; letter-spacing: .18em; border-width: 1px; } [data-skin="y2k"] #y2k-toggle { color: #c00000; font-weight: bold; animation: y2k-flashred 1s steps(2, start) infinite; } @keyframes y2k-flashred { 50% { background: #ffd900 } } /* ---- hero: pure WordArt ---- */ [data-skin="y2k"] .hero h1 { font-family: "Anton", Impact, Haettenschweiler, "Arial Black", sans-serif; font-weight: 400; letter-spacing: .01em; text-transform: uppercase; background: linear-gradient(90deg, #f00, #ff8000, #ff0, #0f0, #0ff, #00f, #f0f, #f00); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(4px 4px 0 #ff00de) drop-shadow(8px 8px 0 rgba(0, 0, 0, .55)); animation: y2k-rainbow 3s linear infinite, y2k-bob 2.2s ease-in-out infinite alternate; } @keyframes y2k-rainbow { to { background-position: 200% 0 } } @keyframes y2k-bob { from { transform: rotate(-1.2deg) } to { transform: rotate(1.2deg) } } [data-skin="y2k"] .hero .tag { color: #ffe34d; font-size: 16px; text-shadow: 2px 2px 0 #b8008a; } [data-skin="y2k"] .hero .tag b { font-family: "Brush Script MT", "Comic Sans MS", "Comic Neue", cursive; font-size: 24px; font-style: normal; color: #7fff00; text-shadow: 0 0 10px #7fff00; animation: y2k-glow 1.6s ease-in-out infinite alternate; } @keyframes y2k-glow { from { text-shadow: 0 0 4px #7fff00 } to { text-shadow: 0 0 16px #7fff00, 0 0 30px #00ffea } } [data-skin="y2k"] .hero-socials a { font-family: "Comic Sans MS", "Comic Sans", "Comic Neue", cursive; font-size: 14px; color: #00ffff; border-bottom: 2px dotted #ff00de; } [data-skin="y2k"] .hero-socials a:hover { color: #ff0; border-color: #ff0; animation: y2k-flash .4s steps(2, start) infinite; } @keyframes y2k-flash { 50% { color: #f0f } } /* ---- cards become XP Luna windows (decorative titlebar, no buttons) ---- */ [data-skin="y2k"] .card { font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive; background: #ece9d8; border: 3px solid #0855dd; border-top: 0; border-radius: 0 0 4px 4px; padding: 14px; overflow: visible; box-shadow: 5px 6px 0 rgba(0, 0, 0, .5); transform: rotate(var(--y2k-tilt, 0deg)); } /* windows pasted on slightly crooked, collage style */ [data-skin="y2k"] .grid .card:nth-child(odd) { --y2k-tilt: -.6deg } [data-skin="y2k"] .grid .card:nth-child(even) { --y2k-tilt: .45deg } /* the windows stay flat and static, no hover lift */ [data-skin="y2k"] .card:hover { transform: rotate(var(--y2k-tilt, 0deg)); border-color: #0855dd } /* the right-hand label extras blink. obviously */ [data-skin="y2k"] .card .lbl > :last-child { animation: y2k-blink 1s steps(1) infinite } /* the XP titlebar: gradient bar with the window title, no min/close buttons */ [data-skin="y2k"] .y2k-titlebar { display: flex; align-items: center; gap: 7px; margin: -14px -17px 12px; padding: 4px 11px; background: linear-gradient(180deg, #388eef 0%, #0a5bdd 8%, #0353cf 40%, #0a5bdd 88%, #063e9e 100%); border-radius: 8px 8px 0 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); color: #fff; font-family: "Trebuchet MS", Tahoma, Verdana, sans-serif; font-size: 13px; font-weight: 700; text-shadow: 1px 1px 1px rgba(0, 0, 0, .6); user-select: none; -webkit-user-select: none; } [data-skin="y2k"] .y2k-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* titlebar took the label's left text, keep the right-hand extras */ [data-skin="y2k"] .card .lbl { justify-content: flex-end; font-family: Tahoma, Verdana, sans-serif; letter-spacing: 0; color: #003399; } /* ---- widgets inside the windows ---- */ /* album art becomes a spinning CD */ [data-skin="y2k"] .np .art { border-radius: 50%; box-shadow: inset 0 0 0 7px rgba(255, 255, 255, .3), inset 0 0 0 14px rgba(0, 0, 0, .25); animation: y2k-spin 10s linear infinite; } @keyframes y2k-spin { to { transform: rotate(360deg) } } [data-skin="y2k"] .np .track { color: #000080 } /* classic blue/purple links inside windows */ [data-skin="y2k"] .card a:not(.card), [data-skin="y2k"] .lbl a { color: #0000ee; text-decoration: underline } [data-skin="y2k"] .card a:not(.card):visited { color: #551a8b } [data-skin="y2k"] .pl-tile-name { color: #0000ee; text-decoration: underline } /* ---- playlist modal = Windows Media Player ---- */ [data-skin="y2k"] .pl-overlay { background: rgba(0, 0, 64, .8) } [data-skin="y2k"] .pl-modal { position: relative; background: #ece9d8; border: 3px solid #0855dd; border-radius: 6px 6px 4px 4px; padding: 46px 16px 16px; } [data-skin="y2k"] .pl-modal::before { content: "♫ Windows Media Player — playlist.pls"; position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; height: 30px; padding: 0 11px; background: linear-gradient(180deg, #388eef 0%, #0a5bdd 8%, #0353cf 40%, #0a5bdd 88%, #063e9e 100%); border-radius: 3px 3px 0 0; color: #fff; font: bold 13px "Trebuchet MS", Tahoma, sans-serif; text-shadow: 1px 1px 1px rgba(0, 0, 0, .6); } [data-skin="y2k"] .pl-iframe { border: 2px inset #fff; border-radius: 0 } [data-skin="y2k"] .pl-open-btn { font-weight: bold } /* ---- footer ---- */ [data-skin="y2k"] footer { font-family: "Courier New", monospace; color: #ffe34d; border-top: 4px ridge #ff00de; } [data-skin="y2k"] .wrap { padding-bottom: 60px } /* ---- chrome injected by js/y2k.js ---- */ /* scrolling banner above everything */ [data-skin="y2k"] .y2k-banner { background: #000; color: #00ff00; font: 13px "Courier New", monospace; border-bottom: 4px ridge #ff00de; padding: 4px 0; } [data-skin="y2k"] .y2k-banner marquee { width: 100% } [data-skin="y2k"] .y2k-blink { color: #ff0; animation: y2k-blink 1s steps(1) infinite } @keyframes y2k-blink { 50% { opacity: 0 } } /* footer junk: construction tape, hit counter, badges, webring */ [data-skin="y2k"] .y2k-junk { margin-top: 40px; display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; font-family: "Comic Sans MS", "Comic Sans", "Comic Neue", cursive; } [data-skin="y2k"] .y2k-construction { width: 100%; padding: 9px 0; /* tiled (not repeating-gradient) so one tile-width = one full period: scrolling by exactly 40px loops seamlessly with no sub-pixel drift */ background-color: #111; background-image: linear-gradient(45deg, #ffd900 25%, transparent 25%, transparent 50%, #ffd900 50%, #ffd900 75%, transparent 75%, transparent); background-size: 40px 40px; animation: y2k-stripes 1s linear infinite; } @keyframes y2k-stripes { from { background-position: 0 0 } to { background-position: 40px 0 } } [data-skin="y2k"] .y2k-construction span { background: #ffd900; border: 2px dashed #000; padding: 2px 10px; color: #000; font: bold 14px Arial, sans-serif; letter-spacing: .08em; } [data-skin="y2k"] .y2k-counter { color: #ffe34d; font: 13px "Courier New", monospace } [data-skin="y2k"] .y2k-digit { display: inline-block; background: #000; color: #39ff14; border: 1px solid #444; box-shadow: inset 0 0 4px #39ff14; padding: 1px 4px; margin: 0 1px; font: bold 16px "Courier New", monospace; } [data-skin="y2k"] .y2k-badges { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } [data-skin="y2k"] .y2k-badge { width: 88px; height: 31px; display: flex; align-items: center; justify-content: center; border: 1px solid #888; font: bold 8px/1.2 Verdana, sans-serif; text-transform: uppercase; text-align: center; } [data-skin="y2k"] .y2k-badge:nth-child(1) { background: #000; color: #0f0 } [data-skin="y2k"] .y2k-badge:nth-child(2) { background: linear-gradient(#00c, #006); color: #fff } [data-skin="y2k"] .y2k-badge:nth-child(3) { background: #ffd900; color: #000 } [data-skin="y2k"] .y2k-badge:nth-child(4) { background: linear-gradient(90deg, #f0f, #00f); color: #fff; animation: y2k-hue 3s linear infinite; } @keyframes y2k-hue { to { filter: hue-rotate(360deg) } } [data-skin="y2k"] .y2k-webring { color: #fff; font-size: 12px } [data-skin="y2k"] .y2k-webring a { color: #00ffff } /* clicking the webring does a barrel roll, obviously */ [data-skin="y2k"] .wrap.y2k-barrel { animation: y2k-roll 1.2s ease-in-out } @keyframes y2k-roll { to { transform: rotate(360deg) } } /* mouse sparkle trail */ [data-skin="y2k"] .y2k-spark { position: fixed; z-index: 9999; pointer-events: none; transform: translate(-50%, -50%); font-size: 14px; text-shadow: 0 0 6px currentColor; animation: y2k-spark .7s ease-out forwards; } @keyframes y2k-spark { to { transform: translate(-50%, -50%) translateY(26px) scale(.2) rotate(180deg); opacity: 0; } } /* ---- skeletons ---- */ [data-skin="y2k"] .skel { background: repeating-linear-gradient(45deg, var(--hot) 0 6px, var(--cyan) 6px 12px); border: 1px solid #000; border-radius: 0; animation: y2k-pole .6s linear infinite; } @keyframes y2k-pole { to { background-position: 16.971px 0 } } @media (prefers-reduced-motion: reduce) { [data-skin="y2k"] .skel { animation: none } } /* ---- gif clutter (assets/y2k/, via GifCities). Skipped under prefers-reduced-motion, animated gifs can't be paused. ---- */ /* centered row of gifs (guestbook/email row) */ [data-skin="y2k"] .y2k-gifrow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; } [data-skin="y2k"] .y2k-gifrow img { max-width: 100% } /* full-width tiled gif divider (rainbow) */ [data-skin="y2k"] .y2k-divider { width: 100%; margin: 18px 0; background-repeat: repeat-x; background-position: center; } /* dancing baby, pinned to the corner like it owns the place */ [data-skin="y2k"] .y2k-corner { position: fixed; bottom: 0; z-index: 50; pointer-events: none; display: none; } [data-skin="y2k"] .y2k-corner.right { right: 10px } [data-skin="y2k"] .y2k-corner.left { left: 10px } @media (min-width: 1100px) { [data-skin="y2k"] .y2k-corner { display: block } } /* real 88x31 buttons instead of the CSS fakes (reduced-motion keeps the fakes) */ [data-skin="y2k"] .y2k-badges a:has(img), [data-skin="y2k"] .y2k-badges > img { line-height: 0; border: 0; width: auto; height: auto } [data-skin="y2k"] .y2k-badges img { border: 1px solid #888 }