/* ============================================================ Y2K DESKTOP — stylesheet ------------------------------------------------------------ PART 1 · Theme colours ← edit these to recolour everything PART 2 · Y2K UI KIT ← reusable window / button / widget parts PART 3 · Page layouts ============================================================ */ /* ============================================================ PART 1 · THEME — change these and the whole site changes ============================================================ */ :root{ /* the three holographic tones, used in every gradient */ --c1:#f9bcdd; /* pink */ --c2:#cdb6f2; /* lilac */ --c3:#a9cdf5; /* blue */ --wall-1:#ffe3f2; /* wallpaper, top-left */ --wall-2:#e3ddff; /* wallpaper, middle */ --wall-3:#d6f0ff; /* wallpaper, bottom-right */ --body:#fdfbff; /* inside of a window */ --edge:#b7a3da; /* window border */ --ink:#5c4a78; /* text */ --ink2:#8d80a8; /* soft text */ --field:#ffffff; /* input backgrounds */ --mint:#b9e8d4; --lemon:#fdf2b8; --radius:12px; --shadow:0 12px 26px -10px rgba(90,70,130,.45); --font:'Nunito', system-ui, -apple-system, sans-serif; --font-pixel:'VT323', 'Courier New', monospace; } /* ---- OTHER COLOURWAYS --------------------------------------- Copy one of these onto :root to reskin the whole site. MINT SODA --c1:#b9e8d4 --c2:#a9cdf5 --c3:#cdb6f2 --wall-1:#dcfff2 --wall-2:#dff0ff --wall-3:#f0e6ff PEACH POP --c1:#ffd6b0 --c2:#f9bcdd --c3:#ffe9a8 --wall-1:#fff0e0 --wall-2:#ffe6f2 --wall-3:#fff8db CYBER --c1:#a9cdf5 --c2:#b8b6f7 --c3:#9fe8e0 --wall-1:#e0f0ff --wall-2:#e6e4ff --wall-3:#dbfaf6 ------------------------------------------------------------ */ *{box-sizing:border-box;margin:0;padding:0} /* the wallpaper sits on so it never seams on a long page */ html{ scroll-behavior:smooth; background: radial-gradient(1200px 800px at 12% 8%, var(--wall-1) 0%, transparent 58%), radial-gradient(1100px 900px at 88% 22%, var(--wall-3) 0%, transparent 60%), linear-gradient(160deg, var(--wall-1), var(--wall-2) 52%, var(--wall-3)); } body{ font-family:var(--font);color:var(--ink);font-size:15px;line-height:1.6; min-height:100vh;background:transparent; -webkit-font-smoothing:antialiased; } /* soft holographic sheen over the wallpaper */ body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5; background: radial-gradient(600px 400px at 70% 80%, rgba(255,255,255,.7), transparent 65%), radial-gradient(500px 500px at 20% 70%, rgba(255,214,240,.55), transparent 62%); } img{max-width:100%;display:block} a{color:inherit} .wrap{max-width:1120px;margin:0 auto;padding:0 22px;position:relative;z-index:1} /* ============================================================ PART 2 · Y2K UI KIT These classes are self-contained — copy them into a chat box, an overlay, a widget, anything. They don't depend on the blog. ============================================================ */ /* ---- WINDOW ------------------------------------------------ */ .win{ border-radius:var(--radius);overflow:hidden; border:2px solid var(--edge);background:var(--body); box-shadow:var(--shadow), inset 0 0 0 2px #fff; } .win-tb{ /* the title bar */ min-height:32px;display:flex;align-items:center;gap:8px;padding:0 8px 0 11px; background:linear-gradient(100deg,var(--c1),var(--c2) 52%,var(--c3)); border-bottom:2px solid var(--edge); font-weight:800;font-size:13px;color:#fff; text-shadow:0 1px 1px rgba(120,90,150,.55); } .win-tb .ic{width:15px;height:15px;border-radius:4px;background:rgba(255,255,255,.78);flex:0 0 auto; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.95)} .win-tb .btns{margin-left:auto;display:flex;gap:5px} .win-tb .btns b{ width:19px;height:17px;border-radius:5px;background:rgba(255,255,255,.85); border:1.5px solid rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center; font-size:10px;color:#7d6aa0;font-weight:800;line-height:1;cursor:pointer; } .win-tb .btns b:hover{background:#fff} .win-bd{padding:18px} /* ---- BUTTON ------------------------------------------------ */ .btn{ display:inline-flex;align-items:center;gap:7px;cursor:pointer;text-decoration:none; border-radius:9px;padding:8px 18px;font-family:inherit;font-weight:800;font-size:13px;color:#6b5891; background:linear-gradient(#ffffff,#f0e8fb);border:1.5px solid #cbbbe8; box-shadow:0 3px 0 #ddd1f2;transition:transform .12s, box-shadow .12s; } .btn:hover{transform:translateY(-1px);box-shadow:0 4px 0 #ddd1f2} .btn:active{transform:translateY(2px);box-shadow:0 1px 0 #ddd1f2} .btn.pink{background:linear-gradient(#fde0ef,#f9c4de);border-color:#eda9c9;color:#a04d78;box-shadow:0 3px 0 #f0b7d4} .btn.pink:hover{box-shadow:0 4px 0 #f0b7d4} .btn.blue{background:linear-gradient(#dcecfd,#bcd9f8);border-color:#9cc3ee;color:#4a6f9c;box-shadow:0 3px 0 #b6d4f4} .btn.blue:hover{box-shadow:0 4px 0 #b6d4f4} .btn.mint{background:linear-gradient(#d8f7e9,#b6ecd0);border-color:#8fd9b6;color:#3f7a60;box-shadow:0 3px 0 #b0e6cd} .btn.mint:hover{box-shadow:0 4px 0 #b0e6cd} /* ---- FIELD / TAG / BAR ------------------------------------- */ .field{background:var(--field);border:1.5px solid #d9cdee;border-radius:8px;padding:10px 13px; font-family:inherit;font-size:14px;color:var(--ink);width:100%} .field:focus{outline:none;border-color:var(--c2)} .tag{ display:inline-block;font-size:11px;font-weight:800;letter-spacing:.03em; border-radius:99px;padding:4px 12px;color:#7d6aa0; background:linear-gradient(#fff,#f4eefc);border:1.5px solid #dbcff2; } .tag.pink{background:linear-gradient(#fde0ef,#fbd3e8);border-color:#f2b9d5;color:#a04d78} .tag.blue{background:linear-gradient(#e2f0fe,#cfe4fb);border-color:#a9cdf5;color:#4a6f9c} .tag.mint{background:linear-gradient(#ddf8ec,#c8f0dc);border-color:#9fe0c2;color:#3f7a60} .bar{height:15px;border-radius:99px;background:#efe8fa;border:1.5px solid #d6c9ee;overflow:hidden} .bar i{display:block;height:100%; background:repeating-linear-gradient(100deg,var(--c1) 0 10px,var(--c2) 10px 20px,var(--c3) 20px 30px)} /* ---- BOUNCING DESKTOP ICONS -------------------------------- */ /* Every .dicon bobs up and down forever, each one slightly out of step with the next. Remove the animation line to stop. */ @keyframes bob{ 0%,100%{transform:translateY(0)} 50% {transform:translateY(-11px)} } @keyframes shadowpulse{ 0%,100%{transform:scaleX(1);opacity:.32} 50% {transform:scaleX(.7);opacity:.16} } @keyframes pop{ 0%{transform:scale(1)}50%{transform:scale(1.18) rotate(-4deg)}100%{transform:scale(1)} } .dock{display:flex;gap:34px;flex-wrap:wrap;justify-content:center} .dicon{ width:112px;text-decoration:none;text-align:center; display:flex;flex-direction:column;align-items:center;gap:9px; } .dicon .art{ width:74px;height:74px;display:grid;place-items:center;position:relative; animation:bob 2.6s ease-in-out infinite; } .dicon:nth-child(2) .art{animation-delay:.22s} .dicon:nth-child(3) .art{animation-delay:.44s} .dicon:nth-child(4) .art{animation-delay:.66s} .dicon:nth-child(5) .art{animation-delay:.88s} .dicon:nth-child(6) .art{animation-delay:1.1s} .dicon:nth-child(7) .art{animation-delay:1.32s} .dicon .art::after{ /* the little shadow on the ground */ content:"";position:absolute;bottom:-12px;left:50%;translate:-50% 0; width:52px;height:9px;border-radius:50%;background:#8b6fbd; animation:shadowpulse 2.6s ease-in-out infinite;animation-delay:inherit; } .dicon:hover .art{animation:pop .45s ease} .dicon .name{ font-size:12.5px;font-weight:800;color:#5c4a78; background:rgba(255,255,255,.72);border-radius:7px;padding:3px 10px; border:1.5px solid rgba(255,255,255,.9); } .dicon:hover .name{background:#fff;color:#a04d78} /* the icon artwork itself — all drawn with CSS, no images */ .i-folder{width:64px;height:48px;border-radius:5px 9px 9px 9px;position:relative; background:linear-gradient(var(--lemon),#f8dd8a);border:2.5px solid #d9b95f} .i-folder::before{content:"";position:absolute;left:-2.5px;top:-9px;width:28px;height:11px; border-radius:5px 7px 0 0;background:linear-gradient(var(--lemon),#f6d878); border:2.5px solid #d9b95f;border-bottom:none} .i-note{width:52px;height:64px;border-radius:5px;position:relative; background:linear-gradient(#fff,#f6effd);border:2.5px solid #cbbbe8} .i-note::before{content:"";position:absolute;left:9px;right:9px;top:12px;height:3px;border-radius:2px; background:#e2d8f4;box-shadow:0 10px 0 #e2d8f4, 0 20px 0 #e2d8f4, 0 30px 0 #e2d8f4} .i-cd{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;border:2.5px solid #cbbbe8; background:conic-gradient(var(--c1),var(--c2),var(--c3),var(--mint),var(--lemon),var(--c1))} .i-cd::after{content:"";width:18px;height:18px;border-radius:50%;background:#fdfbff;border:2.5px solid #cbbbe8} .i-mail{width:66px;height:46px;border-radius:6px;position:relative;overflow:hidden; background:linear-gradient(#fff,#f6effd);border:2.5px solid #cbbbe8} .i-mail::before{content:"";position:absolute;left:50%;top:-25px;width:54px;height:54px; transform:translateX(-50%) rotate(45deg); background:linear-gradient(#fde0ef,#f9c4de);border:2.5px solid #cbbbe8} /* heart and star are drawn as tiny inline SVGs so the curves stay crisp */ .i-heart{width:64px;height:60px;background-repeat:no-repeat;background-size:contain;background-position:center; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 60'%3E%3Cdefs%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fde0ef'/%3E%3Cstop offset='1' stop-color='%23f9bcdd'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M32 55C9 38 5 26 11.5 17.5 18 9 28.5 11.5 32 20c3.5-8.5 14-11 20.5-2.5C59 26 55 38 32 55Z' fill='url(%23h)' stroke='%23eda9c9' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E")} .i-star{width:62px;height:62px;background-repeat:no-repeat;background-size:contain;background-position:center; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fdf2b8'/%3E%3Cstop offset='1' stop-color='%23f6d878'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M32 4.5 39.9 24h20.6L44.3 36.8 50.5 58 32 45.6 13.5 58l6.2-21.2L3.5 24h20.6Z' fill='url(%23s)' stroke='%23d9b95f' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E")} .i-globe{width:60px;height:60px;border-radius:50%;border:2.5px solid #8fb9e8;position:relative;overflow:hidden; background:linear-gradient(#dcecfd,#a9cdf5)} .i-globe::before{content:"";position:absolute;inset:-2px;border-radius:50%; border:2px solid rgba(255,255,255,.85); box-shadow:inset 0 0 0 2px transparent} .i-globe::after{content:"";position:absolute;left:50%;top:-4px;bottom:-4px;width:26px;translate:-50% 0; border-radius:50%;border:2px solid rgba(255,255,255,.85)} /* ---- TASKBAR ----------------------------------------------- */ .taskbar{ position:sticky;top:0;z-index:60; background:linear-gradient(100deg,var(--c1),var(--c2) 52%,var(--c3)); border-bottom:2px solid var(--edge); box-shadow:0 3px 12px -4px rgba(90,70,130,.4); } .taskbar .wrap{display:flex;align-items:center;gap:8px;height:44px;padding-top:0;padding-bottom:0} .tb-start{ display:flex;align-items:center;gap:8px;text-decoration:none; background:rgba(255,255,255,.9);border:1.5px solid #fff;border-radius:9px; padding:6px 14px;font-weight:800;font-size:13.5px;color:#7d5a9c; } .tb-start:hover{background:#fff} .tb-start i{width:15px;height:15px;border-radius:4px;font-style:normal; background:conic-gradient(var(--c1),var(--c2),var(--c3),var(--c1))} .tb-nav{display:flex;gap:5px;margin-left:8px;flex-wrap:wrap} .tb-nav a{ text-decoration:none;font-weight:700;font-size:12.5px;color:#6b5891; background:rgba(255,255,255,.6);border:1.5px solid rgba(255,255,255,.75); border-radius:8px;padding:6px 13px; } .tb-nav a:hover{background:rgba(255,255,255,.92)} .tb-nav a.on{background:#fff;color:#a04d78;box-shadow:inset 0 2px 5px rgba(150,120,180,.22)} .tb-clock{ margin-left:auto;background:rgba(255,255,255,.8);border:1.5px solid rgba(255,255,255,.9); border-radius:8px;padding:6px 13px;font-weight:800;font-size:12.5px;color:#7d5a9c; display:flex;align-items:center;gap:8px; } /* ============================================================ PART 3 · PAGE LAYOUTS ============================================================ */ main{padding:44px 0 70px;position:relative;z-index:1} .hero-win{max-width:760px;margin:0 auto 46px} .hero-win .win-bd{text-align:center;padding:36px 30px} .hero-win h1 .em{-webkit-text-fill-color:initial;color:initial;background:none;filter:none} .hero-win h1{ font-size:clamp(2rem,5vw,3.1rem);font-weight:800;letter-spacing:-.03em;line-height:1.05; background:linear-gradient(100deg,var(--c1),var(--c2) 45%,var(--c3)); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 2px 0 rgba(255,255,255,.9)); } .hero-win p{color:var(--ink2);font-weight:600;margin-top:12px;font-size:15px} .hero-cta{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:22px} .sec-title{ display:flex;align-items:center;gap:13px;margin:0 0 20px; font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8b6fbd; text-shadow:0 1px 0 rgba(255,255,255,.9); } .sec-title::after{content:"";flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.75)} /* post cards */ .posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px} .post-card{text-decoration:none;display:block;transition:transform .2s} .post-card:hover{transform:translateY(-5px)} .post-card .thumb{ height:104px;display:grid;place-items:center;font-size:38px; background:linear-gradient(120deg,var(--c1),var(--c2) 50%,var(--c3)); border-bottom:2px solid var(--edge); } .post-card h2{font-size:17px;font-weight:800;letter-spacing:-.01em;margin:9px 0 7px;line-height:1.25} .post-card .ex{font-size:13.5px;color:var(--ink2);font-weight:600} .post-card .meta{display:flex;gap:7px;align-items:center;flex-wrap:wrap} .post-card .more{display:inline-block;margin-top:11px;font-size:12.5px;font-weight:800;color:#a04d78} /* single post */ .article{max-width:760px;margin:0 auto} .article .win-bd{padding:34px} .article h1{font-size:clamp(1.6rem,3.6vw,2.2rem);font-weight:800;letter-spacing:-.025em;line-height:1.15;margin-bottom:12px} .prose{font-size:15.5px;line-height:1.78;color:#54456f} .prose p{margin-bottom:16px} .prose h2{font-size:19px;font-weight:800;margin:26px 0 10px;color:var(--ink)} .prose ul{margin:0 0 16px 20px} .prose li{margin-bottom:7px} .prose blockquote{ border-left:4px solid var(--c2);background:#f8f3fe;border-radius:0 10px 10px 0; padding:14px 18px;margin:18px 0;font-weight:600;color:#6b5891; } .prose code{background:#f2ebfc;border:1px solid #e0d5f5;border-radius:5px;padding:1px 6px;font-size:13px} /* gallery */ .gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px} .gal .cell{ aspect-ratio:1;border-radius:10px;display:grid;place-items:center;font-size:40px; border:2px solid var(--edge);background:linear-gradient(140deg,#fff,#f6effd); box-shadow:inset 0 0 0 2px #fff;transition:transform .2s; } .gal .cell:hover{transform:scale(1.05) rotate(-2deg)} /* links / buttons wall */ .links{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px} .links a{ text-decoration:none;display:flex;align-items:center;gap:11px; border-radius:10px;padding:13px 16px;font-weight:800;font-size:14px;color:#6b5891; background:linear-gradient(#fff,#f4eefc);border:1.5px solid #dbcff2;box-shadow:0 3px 0 #e4daf6; transition:transform .15s; } .links a:hover{transform:translateY(-2px)} .links a span{font-size:20px} /* 88x31 retro buttons */ .badges{display:flex;gap:10px;flex-wrap:wrap} .badges b{ width:88px;height:31px;border-radius:4px;display:grid;place-items:center; font-size:9.5px;font-weight:800;letter-spacing:.04em;color:#fff; border:2px solid #fff;box-shadow:0 3px 8px -3px rgba(90,70,130,.5); background:linear-gradient(100deg,var(--c1),var(--c2),var(--c3)); text-shadow:0 1px 1px rgba(120,90,150,.6); } /* about */ .two{display:grid;grid-template-columns:300px 1fr;gap:26px;align-items:start} .stat-rows div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1.5px solid #efe8fa;font-size:13.5px} .stat-rows div:last-child{border-bottom:none} .stat-rows span{color:var(--ink2);font-weight:700} .stat-rows b{font-weight:800} /* contact form */ .form{display:grid;gap:15px;max-width:520px;margin:0 auto} .form label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8b6fbd;display:block;margin-bottom:6px} .form textarea{min-height:130px;resize:vertical} .sent{display:none;text-align:center;font-weight:800;color:#3f7a60; background:linear-gradient(#ddf8ec,#c8f0dc);border:2px solid #9fe0c2;border-radius:10px;padding:16px} /* footer */ .foot{ margin-top:60px;padding:26px 0 40px;text-align:center; font-size:12.5px;font-weight:700;color:#7d6aa0;position:relative;z-index:1; } .foot a{text-decoration:none} .foot a:hover{color:#a04d78} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:820px){ .two{grid-template-columns:1fr} .dock{gap:18px} .dicon{width:92px} } @media(max-width:560px){ .wrap{padding:0 15px} .taskbar .wrap{height:auto;padding:8px 15px;flex-wrap:wrap} .tb-clock{margin-left:0} .tb-nav{margin-left:0;width:100%} .win-bd{padding:15px} .article .win-bd{padding:20px} .dicon{width:82px} .dicon .art{width:62px;height:62px;transform-origin:center} } /* people who prefer less motion get a still desktop */ @media(prefers-reduced-motion:reduce){ .dicon .art, .dicon .art::after{animation:none} }