/* ========================================================================== Y2K skin — activated by The conceit: the page is a Windows 98 desktop. Every section is a window with a real title bar, the header is a taskbar, the footer is a status bar. That metaphor is what makes this read as 1999 rather than as the clean skin wearing loud colours — so the work happens in .section / .section__head and .card / .card__top, which already exist in the markup and need no new HTML. Bevels are drawn with four stacked inset shadows rather than `border-style: outset`, whose rendering varies between engines and never looks square. ========================================================================== */ [data-theme="y2k"] { --bg: #008080; /* the desktop teal everyone remembers */ --bg-sunk: #c0c0c0; --surface: #c0c0c0; --ink: #000000; --ink-soft: #1a1a1a; --ink-faint: #4a4a4a; --rule: #808080; --accent: #000080; --accent-ink: #ffffff; --accent-wash: #d8d8f0; --marker: #ffff00; --face: #c0c0c0; --hilite: #ffffff; --shadow-1: #808080; --shadow-2: #0a0a0a; --titlebar: linear-gradient(90deg, #000080 0%, #1084d0 100%); --titlebar-off: linear-gradient(90deg, #808080 0%, #b5b5b5 100%); /* Raised (a button, a window) and sunken (a well, a text field). */ --bevel-out: inset -1px -1px var(--shadow-2), inset 1px 1px var(--hilite), inset -2px -2px var(--shadow-1), inset 2px 2px #dfdfdf; --bevel-in: inset -1px -1px var(--hilite), inset 1px 1px var(--shadow-2), inset -2px -2px #dfdfdf, inset 2px 2px var(--shadow-1); --font-display: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif; --font-body: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif; --font-mono: "Courier New", Courier, monospace; --font-fun: "Comic Sans MS", "Chalkboard SE", "Segoe Print", cursive; --radius: 0; --shadow: none; --speed: 0ms; /* 1999 did not have transitions */ } [data-theme="y2k"] body { background-color: #008080; /* A faint dither over the flat teal, the way a tiled desktop pattern read. */ background-image: radial-gradient(#00707000 1px, #00666622 1px); background-size: 4px 4px; font-size: 0.82rem; line-height: 1.5; color: #000; } [data-theme="y2k"] ::selection { background: #000080; color: #fff; } [data-theme="y2k"] :focus-visible { outline: 1px dotted #000; outline-offset: -4px; } /* Chunky period scrollbars, where the engine still allows it. */ [data-theme="y2k"] * { scrollbar-color: #c0c0c0 #dfdfdf; } [data-theme="y2k"] ::-webkit-scrollbar { width: 16px; height: 16px; } [data-theme="y2k"] ::-webkit-scrollbar-track { background-color: #dfdfdf; background-image: radial-gradient(#c0c0c0 1px, transparent 1px); background-size: 2px 2px; } [data-theme="y2k"] ::-webkit-scrollbar-thumb { background: #c0c0c0; box-shadow: var(--bevel-out); } /* --- taskbar header ------------------------------------------------------- */ [data-theme="y2k"] .site-header { background: var(--face); box-shadow: var(--bevel-out); border: 0; backdrop-filter: none; } [data-theme="y2k"] .site-header__inner { min-height: 3.1rem; gap: 0.6rem; } /* The brand becomes a Start button. */ [data-theme="y2k"] .brand { background: var(--face); box-shadow: var(--bevel-out); padding: 0.28rem 0.7rem 0.28rem 0.55rem; font-family: var(--font-body); font-weight: 700; font-size: 0.82rem; color: #000; gap: 0.4rem; } [data-theme="y2k"] .brand:active { box-shadow: var(--bevel-in); } [data-theme="y2k"] .brand__dot { width: 14px; height: 14px; border-radius: 0; background: linear-gradient(135deg, #ff0000 0 50%, #00a800 50% 100%); box-shadow: 1px 1px 0 #00000060; } /* Nav links are taskbar buttons. */ [data-theme="y2k"] .nav { gap: 0.25rem; } [data-theme="y2k"] .nav__link { background: var(--face); box-shadow: var(--bevel-out); color: #000; font-size: 0.78rem; text-decoration: none; padding: 0.28rem 0.7rem; border-bottom: 0; } [data-theme="y2k"] .nav__link:hover { color: #000; background: #cdcdcd; } /* The current page reads as the pressed taskbar button. */ [data-theme="y2k"] .nav__link.is-active { box-shadow: var(--bevel-in); background-color: #c0c0c0; background-image: radial-gradient(#ffffff 1px, transparent 1px); background-size: 2px 2px; font-weight: 700; color: #000; } [data-theme="y2k"] .nav__link.is-active::before { content: none; } /* --- controls ------------------------------------------------------------- */ [data-theme="y2k"] .lang { border: 0; box-shadow: var(--bevel-in); padding: 1px; gap: 1px; background: #dfdfdf; } [data-theme="y2k"] .lang__btn { background: var(--face); box-shadow: var(--bevel-out); color: #000; font-size: 0.7rem; padding: 0.24rem 0.45rem; } [data-theme="y2k"] .lang__btn + .lang__btn { border-left: 0; } [data-theme="y2k"] .lang__btn:hover { background: #cdcdcd; color: #000; } [data-theme="y2k"] .lang__btn.is-active { box-shadow: var(--bevel-in); background: #000080; color: #ffff00; font-weight: 700; } [data-theme="y2k"] .theme-toggle, [data-theme="y2k"] .chip, [data-theme="y2k"] .copy-btn, [data-theme="y2k"] .nav-toggle, [data-theme="y2k"] .btn { background: var(--face); box-shadow: var(--bevel-out); border: 0; border-radius: 0; color: #000; font-family: var(--font-body); } [data-theme="y2k"] .theme-toggle:hover, [data-theme="y2k"] .chip:hover, [data-theme="y2k"] .copy-btn:hover, [data-theme="y2k"] .btn:hover { background: #cdcdcd; color: #000; transform: none; } [data-theme="y2k"] .theme-toggle:active, [data-theme="y2k"] .chip:active, [data-theme="y2k"] .copy-btn:active, [data-theme="y2k"] .btn:active { box-shadow: var(--bevel-in); } [data-theme="y2k"] .theme-toggle__face { color: #000080; } [data-theme="y2k"] .btn { font-weight: 700; font-size: 0.8rem; padding: 0.45rem 1.1rem; } [data-theme="y2k"] .chip.is-active { box-shadow: var(--bevel-in); background: #000080; color: #ffff00; font-weight: 700; } /* --- windows -------------------------------------------------------------- */ /* Every section becomes a window floating on the desktop. */ [data-theme="y2k"] .section, [data-theme="y2k"] .hero { background: var(--face); box-shadow: var(--bevel-out), 3px 3px 0 #00000038; border: 0; padding: 3px 3px 1.4rem; margin-block: 1.5rem; } [data-theme="y2k"] .section > .wrap, [data-theme="y2k"] .hero > .wrap { width: auto; margin: 0; padding: 1.4rem 1.5rem 0; } /* .section__head is the title bar. */ [data-theme="y2k"] .section__head { background: var(--titlebar); margin: 0 0 1.4rem; padding: 0.22rem 0.28rem 0.22rem 0.55rem; align-items: center; gap: 0.5rem; flex-wrap: nowrap; } [data-theme="y2k"] .section__title { color: #fff; font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; text-shadow: none; letter-spacing: 0; line-height: 1.5; margin-right: auto; } /* The minimise / maximise / close cluster, drawn in CSS. */ [data-theme="y2k"] .section__head::after { content: "_ □ ✕"; flex-shrink: 0; font-family: var(--font-body); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.42em; color: #000; background: var(--face); box-shadow: var(--bevel-out); padding: 0.16rem 0.1rem 0.16rem 0.4rem; } [data-theme="y2k"] .section__link { color: #fff; font-size: 0.72rem; text-decoration: underline; flex-shrink: 0; } [data-theme="y2k"] .section__link:hover { color: #ffff00; background: none; } /* The hero has no .section__head, so its title bar is drawn here — complete with the browser name, which is the detail that dates the page instantly. */ [data-theme="y2k"] .hero { padding-top: 3px; } [data-theme="y2k"] .hero::before { content: "abdullahturk.com — Microsoft Internet Explorer"; display: flex; align-items: center; justify-content: space-between; background: var(--titlebar); color: #fff; font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; padding: 0.22rem 0.55rem; } /* cv.html hangs its content straight off
rather than wrapping it in a .section, so without this it would sit on the bare desktop — dark text on teal, and unreadable. The marquee is the one .wrap that must stay bare. */ [data-theme="y2k"] main > .wrap:not(.y2k-only) { background: var(--face); box-shadow: var(--bevel-out), 3px 3px 0 #00000038; padding: 1.4rem 1.5rem; margin-block: 1.5rem; } [data-theme="y2k"] .hero__eyebrow { color: #000080; font-family: var(--font-mono); font-weight: 700; } /* Covers both .hero__name and the bare

the inner pages use. */ [data-theme="y2k"] .hero h1 { font-family: var(--font-fun); font-size: clamp(1.8rem, 5vw, 2.9rem); color: #000080; text-shadow: 2px 2px 0 #ffffff, 3px 3px 0 #808080; letter-spacing: 0; } [data-theme="y2k"] .hero__role { font-family: var(--font-fun); color: #a00000; text-shadow: none; font-size: 1.05rem; } [data-theme="y2k"] .hero__blurb { color: #000; font-size: 0.86rem; /* A sunken well, the way body copy sat in a frame on these pages. */ background: #ffffff; box-shadow: var(--bevel-in); padding: 0.9rem 1rem; max-width: none; } [data-theme="y2k"] h1, [data-theme="y2k"] h2, [data-theme="y2k"] h3 { letter-spacing: 0; text-shadow: none; } [data-theme="y2k"] a { color: #0000ee; text-decoration: underline; } [data-theme="y2k"] a:visited { color: #551a8b; } [data-theme="y2k"] a:hover { color: #ee0000; background: none; } /* --- cards as little windows ---------------------------------------------- */ [data-theme="y2k"] .card { background: var(--face); box-shadow: var(--bevel-out); border: 0; border-radius: 0; padding: 3px; } [data-theme="y2k"] .card:hover { transform: none; box-shadow: var(--bevel-out); } [data-theme="y2k"] .card__top { background: var(--titlebar); padding: 0.2rem 0.3rem 0.2rem 0.5rem; margin: 0 0 0.8rem; align-items: center; } [data-theme="y2k"] .card__title { font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; color: #fff; } [data-theme="y2k"] .card__title a { color: #fff; text-decoration: none; } [data-theme="y2k"] .card__title a:hover { color: #ffff00; } [data-theme="y2k"] .card__tag, [data-theme="y2k"] .card__desc, [data-theme="y2k"] .card__links { padding-inline: 0.7rem; } [data-theme="y2k"] .card__tag { color: #000080; font-size: 0.7rem; } [data-theme="y2k"] .card__desc { color: #000; font-size: 0.8rem; } [data-theme="y2k"] .card__links { border-top: 1px solid var(--shadow-1); border-bottom: 1px solid var(--hilite); padding-block: 0.7rem; margin-top: 1rem; margin-bottom: 0.5rem; } [data-theme="y2k"] .card__links a { color: #0000ee; } /* Status pills read as little sunken badges. */ [data-theme="y2k"] .pill { background: var(--face); box-shadow: var(--bevel-out); border: 0; border-radius: 0; color: #000; font-family: var(--font-body); font-size: 0.6rem; padding: 0.15rem 0.4rem; } [data-theme="y2k"] .pill--beta { background: #ffff00; color: #a00000; font-weight: 700; } /* --- lists, CV, features -------------------------------------------------- */ [data-theme="y2k"] .now__item, [data-theme="y2k"] .entry, [data-theme="y2k"] .skill-row, [data-theme="y2k"] .contact-row { border-color: var(--shadow-1); color: #000; } [data-theme="y2k"] .now__item::before { color: #000080; font-weight: 700; } [data-theme="y2k"] .cv-toolbar { background: var(--face); box-shadow: var(--bevel-out); border: 0; padding: 0.6rem 0.7rem; backdrop-filter: none; margin-bottom: 1.5rem; } [data-theme="y2k"] .cv-toolbar__label, [data-theme="y2k"] .cv-section__title { color: #000080; font-family: var(--font-body); font-weight: 700; } [data-theme="y2k"] .cv-section__title { background: var(--titlebar); color: #fff; padding: 0.22rem 0.55rem; border-bottom: 0; margin-bottom: 0.6rem; } [data-theme="y2k"] .entry__role { font-family: var(--font-body); font-size: 0.88rem; font-weight: 700; color: #000080; } [data-theme="y2k"] .entry__when, [data-theme="y2k"] .entry__where { color: #4a4a4a; } [data-theme="y2k"] .entry__org { color: #000; } [data-theme="y2k"] .entry__marker { color: #a00000; font-weight: 700; } [data-theme="y2k"] .entry__list li { color: #000; } [data-theme="y2k"] .entry__list li::before { content: "►"; background: none; width: auto; height: auto; color: #000080; font-size: 0.6em; top: 0.35em; } [data-theme="y2k"] .tag { background: var(--face); box-shadow: var(--bevel-out); border: 0; border-radius: 0; color: #000; font-size: 0.7rem; padding: 0.18rem 0.45rem; } [data-theme="y2k"] .tag.is-match { background: #ffff00; color: #a00000; font-weight: 700; } [data-theme="y2k"] .feature__title { font-family: var(--font-body); font-size: 0.86rem; font-weight: 700; color: #000080; } [data-theme="y2k"] .feature__icon { color: #a00000; } [data-theme="y2k"] .feature__body, [data-theme="y2k"] .section__intro, [data-theme="y2k"] .empty-note { color: #000; } /* --- screenshots and callouts --------------------------------------------- */ [data-theme="y2k"] .shot { background: var(--face); box-shadow: var(--bevel-out); border: 0; border-radius: 0; padding: 3px; } [data-theme="y2k"] .shot img { box-shadow: var(--bevel-in); } [data-theme="y2k"] .shot figcaption { background: var(--face); color: #000; border-top: 0; font-size: 0.72rem; padding: 0.5rem 0.4rem 0.2rem; } [data-theme="y2k"] .callout { background: var(--face); box-shadow: var(--bevel-out); border: 0; border-radius: 0; padding: 1.2rem; } [data-theme="y2k"] .callout__title { font-family: var(--font-fun); color: #a00000; font-size: 1.1rem; } [data-theme="y2k"] .callout p { color: #000; } [data-theme="y2k"] .contact-row__label { color: #000080; font-weight: 700; } [data-theme="y2k"] .contact-row__value { font-family: var(--font-body); font-size: 0.92rem; color: #0000ee; text-decoration: underline; } /* --- footer as a status bar ----------------------------------------------- */ [data-theme="y2k"] .site-footer { background: var(--face); box-shadow: var(--bevel-out); border: 0; padding: 0.5rem; margin-top: 1.5rem; } [data-theme="y2k"] .site-footer__note, [data-theme="y2k"] .site-footer__meta { color: #000; box-shadow: var(--bevel-in); padding: 0.4rem 0.6rem; font-size: 0.72rem; max-width: none; } [data-theme="y2k"] .site-footer__meta { margin-top: 0.4rem; } [data-theme="y2k"] .site-footer__top { color: #0000ee; } /* --- ornaments ------------------------------------------------------------ */ [data-theme="y2k"] .y2k-only { display: block; } [data-theme="y2k"] .webring { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.4rem; padding: 0.5rem 0.6rem; box-shadow: var(--bevel-in); } .badge88 { display: inline-flex; width: 88px; height: 31px; border: 1px solid #000; font-family: "Courier New", monospace; font-size: 9px; font-weight: 700; line-height: 1; overflow: hidden; flex-shrink: 0; } .badge88__l, .badge88__r { display: grid; place-content: center; flex: 1; text-align: center; padding: 1px; } .badge88__l { background: #000080; color: #ffff00; } .badge88__r { background: #c0c0c0; color: #000080; } .badge88--alt .badge88__l { background: #800000; color: #fff; } .badge88--alt .badge88__r { background: #00ff00; color: #000; } .hit-counter { display: inline-flex; align-items: center; gap: 2px; font-family: "Courier New", monospace; } .hit-counter__digit { background: #000; color: #00ff00; border: 1px solid #000; box-shadow: inset 1px 1px 0 #004400; padding: 2px 4px; font-size: 12px; font-weight: 700; } .hit-counter__label { color: #000; font-size: 11px; margin-left: 4px; font-family: Tahoma, sans-serif; } .webring__text { font-size: 11px; color: #000080; font-family: Tahoma, sans-serif; } /* One marquee. Any more would be a war crime. */ .y2k-marquee { overflow: hidden; background: #000; box-shadow: var(--bevel-in); padding: 0.3rem 0; margin-top: 1.5rem; } .y2k-marquee__track { display: inline-block; white-space: nowrap; padding-left: 100%; font-family: "Courier New", monospace; font-size: 0.78rem; font-weight: 700; color: #00ff00; animation: y2k-scroll 26s linear infinite; } @keyframes y2k-scroll { to { transform: translateX(-100%); } } .blink { animation: y2k-blink 1.2s steps(2, start) infinite; color: #cc0000; font-weight: 700; } @keyframes y2k-blink { to { visibility: hidden; } } /* Cursor sparkles, injected by js/main.js. */ .sparkle-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9999; } .sparkle { position: absolute; transform: translate(-50%, -50%); color: #ffff00; font-size: 13px; text-shadow: 0 0 3px #ff8800; animation: sparkle-out 700ms ease-out forwards; } @keyframes sparkle-out { to { opacity: 0; transform: translate(-50%, -170%) scale(0.3) rotate(120deg); } } /* --- responsive ----------------------------------------------------------- */ @media (max-width: 860px) { [data-theme="y2k"] .nav { padding-bottom: 0.5rem; gap: 2px; } [data-theme="y2k"] .nav__link { border-bottom: 0; padding: 0.4rem 0.6rem; } [data-theme="y2k"] .section__head { flex-wrap: nowrap; } /* The window buttons are the first thing to go when space is tight. */ [data-theme="y2k"] .section__head::after { display: none; } [data-theme="y2k"] .hero::before { font-size: 0.7rem; } } @media (prefers-reduced-motion: reduce) { .y2k-marquee__track { animation: none; padding-left: 0; } .blink { animation: none; } }