/* ========================================================================== Windows XP skin — activated by Sibling to y2k.css: the same desktop metaphor, four years later. Where 98 is square grey bevels on teal, XP is rounded Luna-blue chrome, soft gradients and the beige window face, sitting on a Bliss-ish sky. Same trick as the 98 skin — .section__head is already a heading row wrapping an h2, so it becomes the title bar with no markup changes. ========================================================================== */ [data-theme="xp"] { --bg: #5a9bd5; --bg-sunk: #ece9d8; --surface: #ffffff; --ink: #000000; --ink-soft: #2b2b2b; --ink-faint: #5a5a5a; --rule: #c6c3b6; --accent: #0055ea; --accent-ink: #ffffff; --accent-wash: #e8f0fd; --marker: #ff9a00; --face: #ece9d8; /* the XP window beige */ --frame: #0055ea; --titlebar: linear-gradient(180deg, #3d95ff 0%, #0e6fea 8%, #0055ea 40%, #0d6bec 88%, #0050d8 100%); --titlebar-off: linear-gradient(180deg, #96b7e8 0%, #7fa5dd 50%, #6f96d4 100%); --btn-face: linear-gradient(180deg, #ffffff 0%, #f3f2eb 45%, #e3e0d2 55%, #d6d2c2 100%); --btn-hot: linear-gradient(180deg, #ffffff 0%, #fff3d6 45%, #ffe5a8 55%, #ffd980 100%); --font-display: Tahoma, "Segoe UI", Verdana, Geneva, sans-serif; --font-body: Tahoma, "Segoe UI", Verdana, Geneva, sans-serif; --font-mono: "Lucida Console", "Courier New", monospace; --radius: 3px; --shadow: 0 3px 10px rgb(0 0 0 / 0.28); --speed: 90ms; } /* Bliss, approximately: sky above, hill below. */ [data-theme="xp"] body { background-color: #4e8fd4; background-image: linear-gradient(180deg, #2a6fc4 0%, #63a4e0 32%, #9dcbf0 52%, #86b34a 53%, #6d9c33 70%, #4f7a22 100%); background-attachment: fixed; background-size: cover; font-family: var(--font-body); font-size: 0.84rem; line-height: 1.6; color: #000; } [data-theme="xp"] ::selection { background: #3399ff; color: #fff; } [data-theme="xp"] :focus-visible { outline: 1px dotted #000; outline-offset: 2px; } [data-theme="xp"] ::-webkit-scrollbar { width: 17px; height: 17px; } [data-theme="xp"] ::-webkit-scrollbar-track { background: #f1f0e8; } [data-theme="xp"] ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #a6c9f0, #4f8fe0); border: 1px solid #3a6ea5; border-radius: 8px; } [data-theme="xp"] h1, [data-theme="xp"] h2, [data-theme="xp"] h3 { font-family: var(--font-display); letter-spacing: 0; text-shadow: none; } [data-theme="xp"] a { color: #0033cc; text-decoration: underline; } [data-theme="xp"] a:visited { color: #6b3fa0; } [data-theme="xp"] a:hover { color: #ff6600; } /* --- taskbar -------------------------------------------------------------- */ [data-theme="xp"] .site-header { background: linear-gradient(180deg, #3168d5 0%, #4993ec 8%, #2f6ada 40%, #2358c8 90%, #1941a5 100%); border-bottom: 1px solid #0a2a7a; box-shadow: 0 1px 4px rgb(0 0 0 / 0.35); backdrop-filter: none; } [data-theme="xp"] .site-header__inner { min-height: 3.2rem; } /* The Start button, green and comically rounded, as it should be. */ [data-theme="xp"] .brand { background: linear-gradient(180deg, #63b755 0%, #4a9f3c 45%, #3d8a30 55%, #2f7a24 100%); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; font-style: italic; padding: 0.3rem 1.1rem 0.3rem 0.7rem; border-radius: 0 12px 12px 0; text-shadow: 1px 1px 1px rgb(0 0 0 / 0.5); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45); } [data-theme="xp"] .brand:hover { filter: brightness(1.1); color: #fff; } [data-theme="xp"] .brand__dot { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #ffd400 55%, #e08a00); } [data-theme="xp"] .nav__link { color: #fff; font-size: 0.8rem; text-decoration: none; padding: 0.3rem 0.7rem; border-bottom: 0; border-radius: 3px; text-shadow: 1px 1px 1px rgb(0 0 0 / 0.35); } [data-theme="xp"] .nav__link:hover { background: rgb(255 255 255 / 0.18); color: #fff; } [data-theme="xp"] .nav__link.is-active { background: rgb(0 0 0 / 0.22); box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.4); color: #fff; font-weight: 700; } /* --- controls ------------------------------------------------------------- */ [data-theme="xp"] .lang { border: 1px solid #1b3f8f; border-radius: 3px; overflow: hidden; } [data-theme="xp"] .lang__btn { background: var(--btn-face); color: #000; font-size: 0.72rem; padding: 0.26rem 0.5rem; } [data-theme="xp"] .lang__btn + .lang__btn { border-left: 1px solid #b0ac9c; } [data-theme="xp"] .lang__btn:hover { background: var(--btn-hot); color: #000; } [data-theme="xp"] .lang__btn.is-active { background: linear-gradient(180deg, #2f6ada, #1941a5); color: #fff; font-weight: 700; } [data-theme="xp"] .theme-toggle, [data-theme="xp"] .chip, [data-theme="xp"] .copy-btn, [data-theme="xp"] .nav-toggle, [data-theme="xp"] .btn { background: var(--btn-face); border: 1px solid #003c74; border-radius: 3px; color: #000; font-family: var(--font-body); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.6); } [data-theme="xp"] .theme-toggle:hover, [data-theme="xp"] .chip:hover, [data-theme="xp"] .copy-btn:hover, [data-theme="xp"] .btn:hover { background: var(--btn-hot); border-color: #e59700; color: #000; transform: none; } [data-theme="xp"] .theme-toggle:active, [data-theme="xp"] .chip:active, [data-theme="xp"] .btn:active { background: linear-gradient(180deg, #d0ccbd, #e8e5d8); box-shadow: inset 1px 1px 3px rgb(0 0 0 / 0.25); } [data-theme="xp"] .theme-toggle { background: rgb(255 255 255 / 0.9); } [data-theme="xp"] .theme-toggle__face { color: #0055ea; } [data-theme="xp"] .btn { font-weight: 400; font-size: 0.82rem; padding: 0.42rem 1.2rem; } [data-theme="xp"] .chip.is-active { background: linear-gradient(180deg, #2f6ada, #1941a5); border-color: #0a2a7a; color: #fff; font-weight: 700; } /* --- windows -------------------------------------------------------------- */ [data-theme="xp"] .section, [data-theme="xp"] .hero, [data-theme="xp"] main > .wrap:not(.y2k-only) { background: var(--face); border: 3px solid #0055ea; border-top: 0; border-radius: 8px 8px 0 0; box-shadow: var(--shadow); padding: 0 0 1.4rem; margin-block: 1.6rem; } [data-theme="xp"] main > .wrap:not(.y2k-only) { padding: 1.3rem 1.4rem; border-top: 3px solid #0055ea; border-radius: 8px; } [data-theme="xp"] .section > .wrap, [data-theme="xp"] .hero > .wrap { width: auto; margin: 0; padding: 1.3rem 1.5rem 0; } [data-theme="xp"] .section__head { background: var(--titlebar); border-radius: 5px 5px 0 0; margin: 0 0 1.3rem; padding: 0.3rem 0.35rem 0.3rem 0.7rem; align-items: center; gap: 0.5rem; flex-wrap: nowrap; } [data-theme="xp"] .section__title { color: #fff; font-family: var(--font-display); font-size: 0.86rem; font-weight: 700; text-shadow: 1px 1px 2px rgb(0 0 0 / 0.55); line-height: 1.5; margin-right: auto; } /* Minimise / maximise / close, XP-style: rounded, with the red one at the end. */ [data-theme="xp"] .section__head::after { content: "─ □ ✕"; flex-shrink: 0; font-family: var(--font-display); font-size: 0.6rem; font-weight: 700; color: #fff; letter-spacing: 0.1em; background: linear-gradient(180deg, #f08a5d 0%, #e04a2f 45%, #c62d16 100%); border: 1px solid rgb(255 255 255 / 0.7); border-radius: 3px; padding: 0.14rem 0.4rem; text-shadow: 1px 1px 1px rgb(0 0 0 / 0.4); } [data-theme="xp"] .section__link { color: #fff; font-size: 0.74rem; text-decoration: underline; flex-shrink: 0; text-shadow: 1px 1px 1px rgb(0 0 0 / 0.4); } [data-theme="xp"] .section__link:hover { color: #ffe08a; } /* The hero window gets the browser title bar. */ [data-theme="xp"] .hero::before { content: "abdullahturk.com — Microsoft Internet Explorer"; display: block; background: var(--titlebar); color: #fff; font-family: var(--font-display); font-size: 0.86rem; font-weight: 700; text-shadow: 1px 1px 2px rgb(0 0 0 / 0.55); padding: 0.3rem 0.7rem; border-radius: 5px 5px 0 0; } [data-theme="xp"] .hero__eyebrow { color: #0055ea; font-weight: 700; } [data-theme="xp"] .hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 5.5vw, 3.1rem); font-weight: 700; color: #0a3a8f; text-shadow: 0 1px 0 #fff; } [data-theme="xp"] .hero__role { font-family: var(--font-display); color: #c05a00; font-size: 1.02rem; } [data-theme="xp"] .hero__blurb { color: #000; font-size: 0.88rem; background: #fff; border: 1px solid #7f9db9; border-radius: 3px; padding: 0.9rem 1rem; max-width: none; } /* --- cards ---------------------------------------------------------------- */ [data-theme="xp"] .card { background: var(--face); border: 2px solid #0055ea; border-top: 0; border-radius: 6px 6px 3px 3px; padding: 0 0 0.6rem; box-shadow: 0 2px 6px rgb(0 0 0 / 0.2); } [data-theme="xp"] .card:hover { transform: none; box-shadow: 0 3px 12px rgb(0 0 0 / 0.32); } [data-theme="xp"] .card__top { background: var(--titlebar); border-radius: 3px 3px 0 0; padding: 0.26rem 0.4rem 0.26rem 0.6rem; margin: 0 0 0.8rem; align-items: center; } [data-theme="xp"] .card__title { font-family: var(--font-display); font-size: 0.84rem; font-weight: 700; color: #fff; text-shadow: 1px 1px 2px rgb(0 0 0 / 0.5); } [data-theme="xp"] .card__title a { color: #fff; text-decoration: none; } [data-theme="xp"] .card__title a:hover { color: #ffe08a; } [data-theme="xp"] .card__tag, [data-theme="xp"] .card__desc, [data-theme="xp"] .card__links { padding-inline: 0.8rem; } [data-theme="xp"] .card__tag { color: #0055ea; font-size: 0.72rem; } [data-theme="xp"] .card__desc { color: #1a1a1a; font-size: 0.82rem; } [data-theme="xp"] .card__links { border-top: 1px solid #c6c3b6; padding-top: 0.7rem; margin-top: 1rem; } [data-theme="xp"] .card__links a { color: #0033cc; } [data-theme="xp"] .pill { background: var(--btn-face); border: 1px solid #7f9db9; border-radius: 8px; color: #333; font-family: var(--font-display); font-size: 0.6rem; padding: 0.14rem 0.5rem; } [data-theme="xp"] .pill--beta { background: linear-gradient(180deg, #ffd980, #ff9a00); border-color: #c06f00; color: #4a2a00; font-weight: 700; } /* --- lists, CV, features -------------------------------------------------- */ [data-theme="xp"] .now__item, [data-theme="xp"] .entry, [data-theme="xp"] .skill-row, [data-theme="xp"] .contact-row { border-color: #c6c3b6; color: #1a1a1a; } [data-theme="xp"] .now__item::before { color: #0055ea; font-weight: 700; } [data-theme="xp"] .cv-toolbar { background: #f6f5ee; border: 1px solid #c6c3b6; border-radius: 4px; padding: 0.6rem 0.7rem; backdrop-filter: none; margin-bottom: 1.4rem; } [data-theme="xp"] .cv-toolbar__label { color: #0055ea; font-weight: 700; } [data-theme="xp"] .cv-section__title { background: var(--titlebar); color: #fff; border-radius: 4px 4px 0 0; border-bottom: 0; padding: 0.28rem 0.7rem; margin-bottom: 0.6rem; text-shadow: 1px 1px 2px rgb(0 0 0 / 0.5); font-family: var(--font-display); } [data-theme="xp"] .entry__role { font-family: var(--font-display); font-size: 0.92rem; font-weight: 700; color: #0a3a8f; } [data-theme="xp"] .entry__marker { color: #c05a00; font-weight: 700; } [data-theme="xp"] .entry__list li::before { background: #0055ea; } [data-theme="xp"] .tag { background: var(--btn-face); border: 1px solid #b0ac9c; border-radius: 3px; color: #1a1a1a; font-size: 0.72rem; } [data-theme="xp"] .tag.is-match { background: linear-gradient(180deg, #ffd980, #ff9a00); border-color: #c06f00; color: #4a2a00; font-weight: 700; } [data-theme="xp"] .feature__title { font-family: var(--font-display); font-size: 0.88rem; font-weight: 700; color: #0a3a8f; } [data-theme="xp"] .feature__icon { color: #ff9a00; } [data-theme="xp"] .feature__body, [data-theme="xp"] .section__intro, [data-theme="xp"] .empty-note { color: #1a1a1a; } /* --- screenshots, callout, contact ---------------------------------------- */ [data-theme="xp"] .shot { background: #fff; border: 1px solid #7f9db9; border-radius: 4px; padding: 3px; } [data-theme="xp"] .shot figcaption { background: #f6f5ee; color: #333; border-top: 1px solid #c6c3b6; font-size: 0.76rem; } [data-theme="xp"] .callout { background: #fffdf2; border: 1px solid #e0b34a; border-left: 4px solid #ff9a00; border-radius: 4px; } [data-theme="xp"] .callout__title { color: #0a3a8f; font-family: var(--font-display); } [data-theme="xp"] .callout p { color: #1a1a1a; } [data-theme="xp"] .contact-row__label { color: #0055ea; font-weight: 700; } [data-theme="xp"] .contact-row__value { font-family: var(--font-display); color: #0033cc; } /* --- footer as a status bar ----------------------------------------------- */ [data-theme="xp"] .site-footer { background: var(--face); border: 3px solid #0055ea; border-radius: 8px; box-shadow: var(--shadow); padding: 1rem; margin-top: 1.6rem; } [data-theme="xp"] .site-footer__note, [data-theme="xp"] .site-footer__meta { color: #333; font-size: 0.76rem; max-width: none; } [data-theme="xp"] .site-footer__top { color: #0033cc; } @media (max-width: 860px) { [data-theme="xp"] .section__head::after { display: none; } [data-theme="xp"] .hero::before { font-size: 0.72rem; } [data-theme="xp"] .nav__link { border-bottom: 0; } } /* Below the title bar, matching the 98 skin: the window chrome owns the top. */ [data-theme="xp"] .card__top { order: -1; } [data-theme="xp"] .card__cover { order: 0; width: auto; margin: 0 0.8rem 0.8rem; border: 1px solid #7f9db9; border-radius: 3px; }