/* ========================================================================== Y2K Classic skin — activated by The original take: a navy starfield, Comic Sans, magenta drop shadows and silver panels — the personal homepage as it actually looked in 1999, before the Windows 98 skin reworked the same idea around window chrome. Ornaments (88x31 badges, the hit counter, the marquee, sparkles) are defined globally in y2k.css and reused here rather than redeclared, so this file only carries what is genuinely different. ========================================================================== */ [data-theme="retro"] { --bg: #000033; --bg-sunk: #000022; --surface: #c0c0c0; --ink: #e8e8ff; --ink-soft: #c8c8e8; --ink-faint: #9a9ac8; --rule: #5a5a9a; --accent: #00ffff; --accent-ink: #000033; --accent-wash: #001a4d; --marker: #ffff00; --panel: #c0c0c0; --panel-ink: #000000; --bevel-light: #ffffff; --bevel-dark: #404040; --titlebar: linear-gradient(90deg, #000080, #1084d0); --font-display: "Comic Sans MS", "Chalkboard SE", "Segoe Print", cursive; --font-body: Verdana, Geneva, Tahoma, sans-serif; --font-mono: "Courier New", Courier, monospace; --radius: 0; --shadow: 3px 3px 0 rgb(0 0 0 / 0.6); } /* Starfield: three sizes of dot on a tiling grid, no image needed. */ [data-theme="retro"] body { background-color: #000033; background-image: radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent), radial-gradient(1.5px 1.5px at 130px 80px, #a8d8ff, transparent), radial-gradient(1px 1px at 70px 150px, #fff, transparent), radial-gradient(1px 1px at 180px 40px, #ffe9a8, transparent), radial-gradient(2px 2px at 100px 200px, #fff, transparent); background-size: 220px 240px; background-attachment: fixed; font-size: 0.95rem; } [data-theme="retro"] h1, [data-theme="retro"] h2, [data-theme="retro"] h3 { letter-spacing: 0; text-shadow: 2px 2px 0 #ff00ff; } [data-theme="retro"] h1 { color: #ffff00; } [data-theme="retro"] a { color: #66ccff; } [data-theme="retro"] a:visited { color: #cc99ff; } [data-theme="retro"] a:hover { color: #ffff00; background: #000080; } /* --- bevelled panels ------------------------------------------------------ */ [data-theme="retro"] .card, [data-theme="retro"] .callout, [data-theme="retro"] .shot { background: var(--panel); color: var(--panel-ink); border: 2px outset var(--bevel-light); border-radius: 0; box-shadow: var(--shadow); } [data-theme="retro"] .card:hover { transform: none; border-style: outset; box-shadow: 5px 5px 0 rgb(0 0 0 / 0.7); } [data-theme="retro"] .card__desc, [data-theme="retro"] .card__tag, [data-theme="retro"] .callout p, [data-theme="retro"] .shot figcaption { color: #202020; } [data-theme="retro"] .card__title a, [data-theme="retro"] .callout__title { color: #000080; text-shadow: none; } [data-theme="retro"] .card__links { border-top: 1px solid var(--bevel-dark); } [data-theme="retro"] .card__links a { color: #0000ee; text-decoration: underline; } [data-theme="retro"] .shot figcaption { background: var(--panel); border-top: 1px solid var(--bevel-dark); } /* --- header as a title bar ------------------------------------------------ */ [data-theme="retro"] .site-header { background: var(--panel); border-bottom: 2px outset var(--bevel-light); backdrop-filter: none; } [data-theme="retro"] .brand { background: var(--titlebar); color: #fff; padding: 0.2rem 0.7rem; font-family: var(--font-body); font-weight: 700; font-size: 0.9rem; border: 1px solid var(--bevel-dark); } [data-theme="retro"] .brand__dot { background: #ff0000; border-radius: 0; width: 9px; height: 9px; border: 1px solid #fff; } [data-theme="retro"] .nav__link { color: #000080; font-weight: 700; text-decoration: underline; border-bottom: 0; } [data-theme="retro"] .nav__link:hover, [data-theme="retro"] .nav__link.is-active { color: #ff00ff; background: none; } [data-theme="retro"] .nav__link.is-active::before { content: "▸ "; } /* --- controls ------------------------------------------------------------- */ [data-theme="retro"] .lang, [data-theme="retro"] .theme-toggle, [data-theme="retro"] .chip, [data-theme="retro"] .copy-btn, [data-theme="retro"] .nav-toggle { background: var(--panel); color: #000; border: 2px outset var(--bevel-light); border-radius: 0; } [data-theme="retro"] .lang__btn { color: #000; } [data-theme="retro"] .lang__btn + .lang__btn { border-left: 1px solid var(--bevel-dark); } [data-theme="retro"] .lang__btn:hover { background: #000080; color: #fff; } [data-theme="retro"] .lang__btn.is-active { background: #000080; color: #ffff00; font-weight: 700; } [data-theme="retro"] .theme-toggle:active, [data-theme="retro"] .chip:active { border-style: inset; } [data-theme="retro"] .theme-toggle__face { color: #ff0000; } [data-theme="retro"] .chip { color: #000; font-size: 0.78rem; } [data-theme="retro"] .chip.is-active { background: #000080; color: #ffff00; border-style: inset; } [data-theme="retro"] .btn { background: var(--panel); color: #000; border: 2px outset var(--bevel-light); border-radius: 0; font-weight: 700; } [data-theme="retro"] .btn:hover { background: #d4d4d4; color: #000080; transform: none; } [data-theme="retro"] .btn:active { border-style: inset; } /* --- structure ------------------------------------------------------------ */ [data-theme="retro"] .hero, [data-theme="retro"] .section, [data-theme="retro"] .site-footer { border-color: #4040a0; } [data-theme="retro"] .hero__eyebrow { color: #00ff00; } [data-theme="retro"] .hero__role { color: #ff66ff; text-shadow: none; } [data-theme="retro"] .cv-toolbar { background: var(--bg-sunk); border-block: 2px ridge #4040a0; backdrop-filter: none; } [data-theme="retro"] .cv-section__title, [data-theme="retro"] .entry, [data-theme="retro"] .skill-row, [data-theme="retro"] .contact-row, [data-theme="retro"] .now__item { border-color: #4040a0; } [data-theme="retro"] .entry__role { color: #ffff66; text-shadow: none; } [data-theme="retro"] .entry__marker { color: #00ff00; } [data-theme="retro"] .entry__list li::before { content: "►"; background: none; width: auto; height: auto; color: #00ff00; font-size: 0.7em; top: 0.25em; } [data-theme="retro"] .tag, [data-theme="retro"] .pill { border-radius: 0; border: 1px solid #6060c0; background: #000055; color: #a8e8ff; } [data-theme="retro"] .tag.is-match, [data-theme="retro"] .pill--beta { background: #ffff00; color: #000080; border-color: #808000; font-weight: 700; } [data-theme="retro"] .feature__icon { color: #ffff00; } [data-theme="retro"] .shot__placeholder { background-color: #000044; color: #66ccff; } /* --- ornaments (hidden in the clean skin) --------------------------------- */ [data-theme="retro"] .y2k-only { display: block; } [data-theme="retro"] .webring { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed #4040a0; } /* The shared ornaments live in y2k.css; this skin just opts into them. */ [data-theme="retro"] .y2k-only { display: block; } [data-theme="retro"] .webring { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed #4040a0; box-shadow: none; } [data-theme="retro"] .hit-counter__label, [data-theme="retro"] .webring__text { color: #9a9ac8; } [data-theme="retro"] .y2k-marquee { box-shadow: none; border-block: 2px ridge #4040a0; background: #000022; margin-top: 0; margin-bottom: 2rem; } [data-theme="retro"] .y2k-marquee__track { color: #00ff00; font-weight: 400; } [data-theme="retro"] .sparkle { color: #ffff66; text-shadow: none; } /* This skin keeps the flat card, so the cover leads as it does in clean mode. */ [data-theme="retro"] .card__cover { order: -1; border-bottom: 2px ridge #4040a0; border-radius: 0; }