/* ===================================================== PEMASAT.DEV — Global Styles Pixel art style circa year 2000 Dynamic theming: time-of-day × season ===================================================== */ /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ===================================================== THEME VARIABLES Applied via [data-time] and [data-season] on ===================================================== */ /* ── MORNING × SPRING ── */ html[data-time="morning"][data-season="spring"] { --bg: #fdf6e3; --bg2: #fce8c3; --surface: #fff9ee; --border: #d4a86a; --accent: #e8734a; --accent2: #7ec850; --text: #2d1f0e; --text-muted: #7a5c3a; --sky1: #f9c96d; --sky2: #f6a45e; --pixel-shadow: #c47a3a; --tag-bg: #fce8b2; --tag-text: #7c4a12; --link: #c45a1e; --link-hover: #e8734a; --card-bg: #fffbf2; --input-bg: #fff9f0; --btn-bg: #e8734a; --btn-text: #fff; --btn-shadow: #9e3d18; --scanline: rgba(0, 0, 0, 0.02); --glow: #f9c96d88; } /* ── MORNING × SUMMER ── */ html[data-time="morning"][data-season="summer"] { --bg: #fff8e1; --bg2: #ffe8a0; --surface: #fffdf5; --border: #c8a030; --accent: #f5a623; --accent2: #38b2ac; --text: #1a1200; --text-muted: #6b5000; --sky1: #ffe066; --sky2: #ffd700; --pixel-shadow: #b8820a; --tag-bg: #fff3b0; --tag-text: #7a5c00; --link: #d97706; --link-hover: #f59e0b; --card-bg: #fffef8; --input-bg: #fffde8; --btn-bg: #f5a623; --btn-text: #1a1200; --btn-shadow: #996000; --scanline: rgba(0, 0, 0, 0.015); --glow: #ffe06688; } /* ── MORNING × AUTUMN ── */ html[data-time="morning"][data-season="autumn"] { --bg: #fef3e2; --bg2: #fad7a0; --surface: #fff8f0; --border: #c9732a; --accent: #d4542a; --accent2: #8fbc8f; --text: #1e0f00; --text-muted: #7a4010; --sky1: #f0a050; --sky2: #d47030; --pixel-shadow: #8a3010; --tag-bg: #fad7a0; --tag-text: #6b3010; --link: #b84020; --link-hover: #d4542a; --card-bg: #fff9f2; --input-bg: #fff5ea; --btn-bg: #d4542a; --btn-text: #fff; --btn-shadow: #7a2010; --scanline: rgba(0, 0, 0, 0.025); --glow: #f0a05088; } /* ── MORNING × WINTER ── */ html[data-time="morning"][data-season="winter"] { --bg: #eef4fb; --bg2: #d0e8f8; --surface: #f8fcff; --border: #7aadd0; --accent: #4a90d9; --accent2: #c0d8f0; --text: #0a1a2e; --text-muted: #3a6080; --sky1: #b0d4f0; --sky2: #8ab8e0; --pixel-shadow: #2a6090; --tag-bg: #d0e8f8; --tag-text: #1a4060; --link: #2870b8; --link-hover: #4a90d9; --card-bg: #f5faff; --input-bg: #eef6ff; --btn-bg: #4a90d9; --btn-text: #fff; --btn-shadow: #1a5090; --scanline: rgba(0, 0, 0, 0.025); --glow: #b0d4f088; } /* ── AFTERNOON × SPRING ── */ html[data-time="afternoon"][data-season="spring"] { --bg: #f0fde4; --bg2: #d4f5b4; --surface: #f8fff4; --border: #5a9a38; --accent: #3a8c28; --accent2: #f5a0c8; --text: #0e1e08; --text-muted: #3a6020; --sky1: #a8e880; --sky2: #78c850; --pixel-shadow: #2a6010; --tag-bg: #d4f5b4; --tag-text: #2a5a10; --link: #2a7018; --link-hover: #3a8c28; --card-bg: #f5fff0; --input-bg: #f0ffe8; --btn-bg: #3a8c28; --btn-text: #fff; --btn-shadow: #1a5010; --scanline: rgba(0, 0, 0, 0.018); --glow: #a8e88088; } /* ── AFTERNOON × SUMMER ── */ html[data-time="afternoon"][data-season="summer"] { --bg: #fffbf0; --bg2: #fff3c0; --surface: #ffffff; --border: #d4a800; --accent: #e8a800; --accent2: #00b4d8; --text: #1a1000; --text-muted: #5a4800; --sky1: #ffe87a; --sky2: #ffcc00; --pixel-shadow: #aa7800; --tag-bg: #fff3c0; --tag-text: #6a5200; --link: #c88800; --link-hover: #e8a800; --card-bg: #fffef8; --input-bg: #fffcf0; --btn-bg: #e8a800; --btn-text: #1a1000; --btn-shadow: #886200; --scanline: rgba(0, 0, 0, 0.01); --glow: #ffe87a88; } /* ── AFTERNOON × AUTUMN ── */ html[data-time="afternoon"][data-season="autumn"] { --bg: #fdf2e0; --bg2: #f8d890; --surface: #fff9f0; --border: #c07830; --accent: #c86820; --accent2: #8b4513; --text: #180c00; --text-muted: #6a3808; --sky1: #e8a040; --sky2: #c87820; --pixel-shadow: #783010; --tag-bg: #f8d890; --tag-text: #602808; --link: #a84818; --link-hover: #c86820; --card-bg: #fff8ee; --input-bg: #fdf5e4; --btn-bg: #c86820; --btn-text: #fff; --btn-shadow: #682808; --scanline: rgba(0, 0, 0, 0.022); --glow: #e8a04088; } /* ── AFTERNOON × WINTER ── */ html[data-time="afternoon"][data-season="winter"] { --bg: #f0f8ff; --bg2: #dceef8; --surface: #fafeff; --border: #6090b8; --accent: #3870a8; --accent2: #a0c8e8; --text: #081828; --text-muted: #305870; --sky1: #a0c8e8; --sky2: #70a8d0; --pixel-shadow: #205080; --tag-bg: #dceef8; --tag-text: #184060; --link: #1858a0; --link-hover: #3870a8; --card-bg: #f4fafe; --input-bg: #ecf5ff; --btn-bg: #3870a8; --btn-text: #fff; --btn-shadow: #104080; --scanline: rgba(0, 0, 0, 0.02); --glow: #a0c8e888; } /* ── EVENING × SPRING ── */ html[data-time="evening"][data-season="spring"] { --bg: #2a1a3e; --bg2: #3d2860; --surface: #352250; --border: #c080e8; --accent: #e870c8; --accent2: #80e890; --text: #f8e8ff; --text-muted: #c8a8e8; --sky1: #9040d8; --sky2: #c060f0; --pixel-shadow: #180830; --tag-bg: #4a3268; --tag-text: #e8c8ff; --link: #d878e8; --link-hover: #f090f8; --card-bg: #3a2858; --input-bg: #2e1e48; --btn-bg: #e870c8; --btn-text: #fff; --btn-shadow: #800870; --scanline: rgba(0, 0, 0, 0.06); --glow: #e870c888; } /* ── EVENING × SUMMER ── */ html[data-time="evening"][data-season="summer"] { --bg: #1e1808; --bg2: #3a3010; --surface: #2c2810; --border: #d4901a; --accent: #ff7a00; --accent2: #00c8d0; --text: #fff8e8; --text-muted: #c8a870; --sky1: #e07000; --sky2: #ff9030; --pixel-shadow: #601800; --tag-bg: #3a2808; --tag-text: #ffd090; --link: #ffa030; --link-hover: #ff7a00; --card-bg: #302808; --input-bg: #241e08; --btn-bg: #ff7a00; --btn-text: #fff; --btn-shadow: #802800; --scanline: rgba(0, 0, 0, 0.07); --glow: #ff7a0088; } /* ── EVENING × AUTUMN ── */ html[data-time="evening"][data-season="autumn"] { --bg: #180e04; --bg2: #2c1a08; --surface: #231208; --border: #c06020; --accent: #d85a10; --accent2: #8b6040; --text: #ffe8d0; --text-muted: #c09870; --sky1: #c04000; --sky2: #e07830; --pixel-shadow: #500800; --tag-bg: #301008; --tag-text: #ffb880; --link: #e07030; --link-hover: #ff9050; --card-bg: #221008; --input-bg: #180a04; --btn-bg: #d85a10; --btn-text: #fff; --btn-shadow: #600800; --scanline: rgba(0, 0, 0, 0.08); --glow: #c0400088; } /* ── EVENING × WINTER ── */ html[data-time="evening"][data-season="winter"] { --bg: #080c18; --bg2: #101828; --surface: #0c1420; --border: #3858a8; --accent: #5080e0; --accent2: #80a8d8; --text: #d8eaff; --text-muted: #8090b0; --sky1: #203060; --sky2: #304888; --pixel-shadow: #020408; --tag-bg: #142038; --tag-text: #a0c0e8; --link: #6898e8; --link-hover: #90b8ff; --card-bg: #0e1828; --input-bg: #080e1c; --btn-bg: #5080e0; --btn-text: #fff; --btn-shadow: #102060; --scanline: rgba(0, 0, 0, 0.1); --glow: #5080e088; } /* ── NIGHT × SPRING ── */ html[data-time="night"][data-season="spring"] { --bg: #0a0814; --bg2: #140e20; --surface: #100c1c; --border: #604888; --accent: #a060f0; --accent2: #40c060; --text: #e8d8ff; --text-muted: #9878c8; --sky1: #300850; --sky2: #501880; --pixel-shadow: #04000c; --tag-bg: #1a102c; --tag-text: #c8a0f0; --link: #c080ff; --link-hover: #d8a8ff; --card-bg: #100a1e; --input-bg: #080610; --btn-bg: #a060f0; --btn-text: #fff; --btn-shadow: #400880; --scanline: rgba(0, 0, 0, 0.12); --glow: #a060f088; } /* ── NIGHT × SUMMER ── */ html[data-time="night"][data-season="summer"] { --bg: #080808; --bg2: #101008; --surface: #0c0c08; --border: #505020; --accent: #d4c030; --accent2: #30a0a8; --text: #fffff0; --text-muted: #909070; --sky1: #181810; --sky2: #282810; --pixel-shadow: #000000; --tag-bg: #181808; --tag-text: #e0d080; --link: #e0d048; --link-hover: #f8f060; --card-bg: #0e0e08; --input-bg: #080808; --btn-bg: #d4c030; --btn-text: #0a0a00; --btn-shadow: #604800; --scanline: rgba(0, 0, 0, 0.14); --glow: #d4c03088; } /* ── NIGHT × AUTUMN ── */ html[data-time="night"][data-season="autumn"] { --bg: #0c0602; --bg2: #180c04; --surface: #120804; --border: #583010; --accent: #c06820; --accent2: #604830; --text: #ffe8c8; --text-muted: #907050; --sky1: #200808; --sky2: #381008; --pixel-shadow: #020000; --tag-bg: #1c0c04; --tag-text: #e0a060; --link: #d08040; --link-hover: #f0a060; --card-bg: #100604; --input-bg: #0c0402; --btn-bg: #c06820; --btn-text: #fff; --btn-shadow: #502000; --scanline: rgba(0, 0, 0, 0.15); --glow: #c0682088; } /* ── NIGHT × WINTER ── */ html[data-time="night"][data-season="winter"] { --bg: #02040c; --bg2: #060a16; --surface: #04080f; --border: #1a2848; --accent: #3060c8; --accent2: #4878a8; --text: #c8d8f0; --text-muted: #506070; --sky1: #08101c; --sky2: #0c1828; --pixel-shadow: #000002; --tag-bg: #080e1c; --tag-text: #88a8d0; --link: #4878d0; --link-hover: #70a0e8; --card-bg: #04080e; --input-bg: #02040a; --btn-bg: #3060c8; --btn-text: #fff; --btn-shadow: #082050; --scanline: rgba(0, 0, 0, 0.18); --glow: #3060c888; } /* ── FALLBACK (initial / no data attrs yet) ── */ html { --bg: #0c1420; --bg2: #141e30; --surface: #101828; --border: #3060a0; --accent: #4080d0; --accent2: #70a0c8; --text: #d0e0f0; --text-muted: #708090; --sky1: #1c2840; --sky2: #283850; --pixel-shadow: #020408; --tag-bg: #182030; --tag-text: #90b0d0; --link: #60a0e0; --link-hover: #90c0f0; --card-bg: #101820; --input-bg: #0c1018; --btn-bg: #4080d0; --btn-text: #fff; --btn-shadow: #103060; --scanline: rgba(0, 0, 0, 0.1); --glow: #4080d088; } /* ===================================================== BASE ===================================================== */ html { font-size: 17px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; transition: background-color 0.8s ease, color 0.8s ease; } body { background-color: var(--bg); color: var(--text); font-family: "Silkscreen", "Courier New", monospace; font-size: 1rem; line-height: 1.75; text-rendering: optimizeLegibility; min-height: 100vh; position: relative; overflow-x: hidden; } p { max-width: 72ch; } /* Subtle scanline overlay for CRT pixel feel */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient( to bottom, transparent 0px, transparent 3px, var(--scanline) 3px, var(--scanline) 4px ); z-index: 9999; mix-blend-mode: multiply; } a { color: var(--link); text-decoration: none; text-underline-offset: 0.18em; text-decoration-thickness: 2px; transition: color 0.2s; } a:hover { color: var(--link-hover); text-decoration: underline; } h1, h2, h3, h4 { font-family: "Press Start 2P", "Courier New", monospace; line-height: 1.4; } img { max-width: 100%; } /* ── PIXEL ART IMAGE RENDERING ── */ .pixelated { image-rendering: pixelated; image-rendering: crisp-edges; } /* ── PIXEL BORDER UTILITY ── */ .pixel-border { border: 3px solid var(--border); box-shadow: 3px 0 0 0 var(--border), 0 3px 0 0 var(--border), 3px 3px 0 0 var(--border), inset -3px 0 0 0 var(--pixel-shadow), inset 0 -3px 0 0 var(--pixel-shadow); } .pixel-border-sm { border: 2px solid var(--border); box-shadow: 2px 0 0 0 var(--border), 0 2px 0 0 var(--border), 2px 2px 0 0 var(--border), inset -2px 0 0 0 var(--pixel-shadow), inset 0 -2px 0 0 var(--pixel-shadow); } /* ── PIXEL BUTTON ── */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.7rem 1.4rem; min-height: 44px; background: var(--btn-bg); color: var(--btn-text); font-family: "Press Start 2P", monospace; font-size: 0.78rem; letter-spacing: 0.05em; cursor: pointer; border: none; outline: none; image-rendering: pixelated; box-shadow: 4px 4px 0 0 var(--btn-shadow), inset -2px -2px 0 0 var(--btn-shadow); transition: box-shadow 0.1s, transform 0.1s, background 0.4s, color 0.4s; text-decoration: none; } .btn:hover { text-decoration: none; color: var(--btn-text); box-shadow: 2px 2px 0 0 var(--btn-shadow), inset -1px -1px 0 0 var(--btn-shadow); transform: translate(2px, 2px); } .btn:active { box-shadow: none; transform: translate(4px, 4px); } .btn-outline { background: transparent; color: var(--btn-bg); border: 2px solid var(--btn-bg); box-shadow: 4px 4px 0 0 var(--btn-shadow); } .btn-outline:hover { background: var(--btn-bg); color: var(--btn-text); } /* ── CONTAINER ── */ .container { max-width: 900px; margin: 0 auto; padding: 0 1.5rem; } /* ── SECTION ── */ section { padding: 4rem 0; } section + section { border-top: 2px dashed var(--border); } .section-title { font-size: 1rem; color: var(--accent); margin-bottom: 2.5rem; text-transform: uppercase; letter-spacing: 0.1em; position: relative; display: inline-block; } .section-title::after { content: ""; display: block; width: 100%; height: 3px; background: var(--accent); margin-top: 0.5rem; box-shadow: 3px 3px 0 0 var(--pixel-shadow); } /* ── TAG ── */ .tag { display: inline-block; padding: 0.25rem 0.6rem; background: var(--tag-bg); color: var(--tag-text); font-size: 0.72rem; font-family: "Press Start 2P", monospace; border: 1px solid var(--border); box-shadow: 2px 2px 0 0 var(--pixel-shadow); margin: 0.2rem 0.1rem; } /* ── CARD ── */ .card { background: var(--card-bg); border: 2px solid var(--border); padding: 1.5rem; box-shadow: 4px 4px 0 0 var(--pixel-shadow), inset -2px -2px 0 0 var(--pixel-shadow); transition: background 0.5s, border-color 0.5s, box-shadow 0.5s; } .card:hover { box-shadow: 6px 6px 0 0 var(--accent), inset -2px -2px 0 0 var(--pixel-shadow); border-color: var(--accent); } /* ── GLOW TEXT ── */ .glow { text-shadow: 0 0 12px var(--glow), 0 0 24px var(--glow); } /* ── SCROLLBAR ── */ ::-webkit-scrollbar { width: 8px; background: var(--bg2); } ::-webkit-scrollbar-thumb { background: var(--border); box-shadow: inset 0 0 0 2px var(--pixel-shadow); } /* ── SELECTION ── */ ::selection { background: var(--accent); color: var(--bg); } .skip-link { position: fixed; top: 0.6rem; left: 0.8rem; background: var(--btn-bg); color: var(--btn-text); border: 2px solid var(--border); box-shadow: 3px 3px 0 0 var(--btn-shadow); padding: 0.5rem 0.8rem; font-family: "Press Start 2P", monospace; font-size: 0.65rem; text-decoration: none; transform: translateY(-220%); transition: transform 0.15s ease; z-index: 10000; } .skip-link:focus-visible { transform: translateY(0); } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } @media (max-width: 680px) { html { font-size: 16px; } .container { padding: 0 1rem; } section { padding: 3rem 0; } }