/* windows98.css — Windows 98 theme overrides All rules scoped under .theme-windows on */ /* ======================================== DESIGN TOKENS ======================================== */ .theme-windows { --w98-bg: #008080; --w98-surface: #c0c0c0; --w98-window-bg: #c0c0c0; --w98-titlebar: #000080; --w98-titlebar-active: linear-gradient(90deg, #000080, #1084d0); --w98-titlebar-text: #ffffff; --w98-text: #222222; --w98-text-disabled: #808080; --w98-border-light: #ffffff; --w98-border-mid: #dfdfdf; --w98-border-dark: #808080; --w98-border-darkest: #0a0a0a; --w98-button-face: #c0c0c0; --w98-highlight: #000080; --w98-highlight-text: #ffffff; --w98-input-bg: #ffffff; --w98-font: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, sans-serif; --w98-font-size: 11px; } /* ======================================== GLOBAL OVERRIDES ======================================== */ .theme-windows body { font-family: var(--w98-font); font-size: var(--w98-font-size); background: var(--w98-bg); color: var(--w98-text); -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale; font-smooth: never; } /* ======================================== MENU BAR → TASKBAR ======================================== */ .theme-windows .menu_bar { top: auto; bottom: 0; height: 32px; background: var(--w98-surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; border-top: 2px solid var(--w98-border-light); padding: 2px 4px; font-size: var(--w98-font-size); color: var(--w98-text); } .theme-windows .menu_left { gap: 4px; } .theme-windows .apple_logo { cursor: pointer; } .theme-windows .apple_logo::before { content: 'Start'; font-size: var(--w98-font-size); font-weight: 700; background: var(--w98-button-face); border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); padding: 2px 8px; display: inline-block; line-height: 20px; } .theme-windows .apple_logo::before:active { border-top: 2px solid var(--w98-border-darkest); border-left: 2px solid var(--w98-border-darkest); border-bottom: 2px solid var(--w98-border-light); border-right: 2px solid var(--w98-border-light); } .theme-windows .menu_item { font-weight: 400; font-size: var(--w98-font-size); } .theme-windows .menu_right { font-size: var(--w98-font-size); background: var(--w98-surface); border-top: 2px solid var(--w98-border-dark); border-left: 2px solid var(--w98-border-dark); border-bottom: 2px solid var(--w98-border-light); border-right: 2px solid var(--w98-border-light); padding: 2px 8px; line-height: 20px; flex-shrink: 0; } /* Taskbar open-window buttons */ .theme-windows .w98-taskbar-buttons { flex: 1; display: flex; gap: 2px; padding: 2px 4px; overflow: hidden; min-width: 0; } .theme-windows .w98-taskbar-btn { font-family: var(--w98-font); font-size: var(--w98-font-size); color: var(--w98-text); background: var(--w98-button-face); border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); padding: 1px 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; min-width: 60px; height: 24px; line-height: 20px; text-align: left; } /* Active (non-minimized) button has pressed/inset look */ .theme-windows .w98-taskbar-btn-active { border-top: 2px solid var(--w98-border-darkest); border-left: 2px solid var(--w98-border-darkest); border-bottom: 2px solid var(--w98-border-light); border-right: 2px solid var(--w98-border-light); background: #b0b0b0; font-weight: 700; } .theme-windows .w98-taskbar-btn:hover { background: #d0d0d0; } /* Hide taskbar buttons container in Mac theme */ .w98-taskbar-buttons { display: none !important; } .theme-windows .w98-taskbar-buttons { display: flex !important; } /* ======================================== DESKTOP ======================================== */ .theme-windows .desktop { top: 0; bottom: 36px; background: transparent; z-index: 51; pointer-events: none; } .theme-windows .desktop .safari_window { pointer-events: auto; } .theme-windows .desktop_message { display: none !important; } /* ======================================== WINDOWS (SAFARI_WINDOW → W98 WINDOW) ======================================== */ .theme-windows .safari_window { background: var(--w98-window-bg); border-radius: 0; box-shadow: none; border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); } .theme-windows .safari_window.maximized { border-radius: 0; height: calc(100vh - 36px) !important; top: 0 !important; } .theme-windows .safari_window.maximized .window_content { height: calc(100% - 56px); } /* No open/close animations */ .theme-windows .safari_window.opening { animation: none; } .theme-windows .safari_window.closing { animation: none; } /* ======================================== WINDOW TITLE BAR ======================================== */ .theme-windows .window_header { height: 24px; background: var(--w98-titlebar-active); border-bottom: none; padding: 2px 3px; cursor: move; } .theme-windows .window_header:active { cursor: move; } .theme-windows .window_title { color: var(--w98-titlebar-text); font-size: var(--w98-font-size); font-weight: 700; font-family: var(--w98-font); } /* ======================================== WINDOW CONTROLS (traffic lights → W98 buttons) ======================================== */ .theme-windows .window_controls { gap: 2px; order: 1; position: absolute; right: 3px; top: 2px; } .theme-windows .control { width: 16px; height: 16px; border-radius: 0; background: var(--w98-button-face); border-top: 1px solid var(--w98-border-light); border-left: 1px solid var(--w98-border-light); border-bottom: 1px solid var(--w98-border-darkest); border-right: 1px solid var(--w98-border-darkest); display: flex; align-items: center; justify-content: center; } .theme-windows .control::after { font-family: var(--w98-font); font-size: 8px; font-weight: 700; color: var(--w98-text); line-height: 1; } .theme-windows .control.close { background: var(--w98-button-face); order: 2; } .theme-windows .control.minimize { order: 0; } .theme-windows .control.maximize { order: 1; } .theme-windows .control.close::after { content: '\00D7'; font-size: 11px; } .theme-windows .control.close:hover, .theme-windows .control.minimize:hover, .theme-windows .control.maximize:hover { background: #d0d0d0; } .theme-windows .control.minimize { background: var(--w98-button-face); } .theme-windows .control.minimize::after { content: '_'; font-size: 9px; position: relative; top: 1px; } .theme-windows .control.maximize { background: var(--w98-button-face); } .theme-windows .control.maximize::after { content: '\25A1'; font-size: 10px; } .theme-windows .control:active { border-top: 1px solid var(--w98-border-darkest); border-left: 1px solid var(--w98-border-darkest); border-bottom: 1px solid var(--w98-border-light); border-right: 1px solid var(--w98-border-light); } .theme-windows .control:focus { outline: 1px dotted #000000; outline-offset: -3px; } /* ======================================== SAFARI TOOLBAR → W98 EXPLORER MENU + ADDRESS BAR ======================================== */ .theme-windows .safari_toolbar { height: auto !important; background: var(--w98-surface) !important; border-bottom: 1px solid var(--w98-border-dark) !important; padding: 0 !important; flex-direction: column; align-items: stretch; } /* Explorer menu bar (File, Edit, View, Help) */ .theme-windows .safari_toolbar::before { content: 'File \00a0\00a0 Edit \00a0\00a0 View \00a0\00a0 Help'; display: block; width: 100%; padding: 2px 6px; font-family: var(--w98-font); font-size: var(--w98-font-size); color: var(--w98-text); border-bottom: 1px solid var(--w98-border-dark); line-height: 20px; } /* Address bar row */ .theme-windows .url_bar { background: var(--w98-input-bg) !important; border: none !important; border-top: 2px solid var(--w98-border-dark) !important; border-left: 2px solid var(--w98-border-dark) !important; border-bottom: 2px solid var(--w98-border-light) !important; border-right: 2px solid var(--w98-border-light) !important; border-radius: 0; height: 22px; font-size: var(--w98-font-size); padding: 0 4px; margin: 3px 6px; max-width: none; flex: 1; } .theme-windows .url_text { font-size: var(--w98-font-size); color: var(--w98-text) !important; font-family: var(--w98-font); } /* Replace lock emoji with "Address" label */ .theme-windows .lock_icon { font-size: 0; line-height: 0; overflow: hidden; width: auto; margin-right: 2px; } .theme-windows .lock_icon::after { content: 'Address'; font-size: var(--w98-font-size); font-family: var(--w98-font); color: var(--w98-text); line-height: normal; } /* ======================================== WINDOW CONTENT (Explorer content pane) ======================================== */ .theme-windows .window_content { background: var(--w98-input-bg) !important; font-family: var(--w98-font); border-top: 2px solid var(--w98-border-dark); border-left: 2px solid var(--w98-border-dark); border-bottom: 2px solid var(--w98-border-light); border-right: 2px solid var(--w98-border-light); margin: 2px 3px; } /* Status bar at bottom of each window */ .theme-windows .safari_window { padding-bottom: 22px; } .theme-windows .safari_window::after { content: 'Done'; position: absolute; bottom: 0; left: 0; right: 0; height: 20px; background: var(--w98-surface); border-top: 2px solid var(--w98-border-dark); border-left: 2px solid var(--w98-border-dark); font-family: var(--w98-font); font-size: var(--w98-font-size); color: var(--w98-text); line-height: 18px; padding: 0 6px; z-index: 5; } /* ======================================== ABOUT WINDOW ======================================== */ .theme-windows .about_container { background: var(--w98-input-bg) !important; gap: 20px; padding: 16px; } .theme-windows .profile_image { border-radius: 0; } .theme-windows .profile_image img { box-shadow: none; border-top: 2px solid var(--w98-border-dark); border-left: 2px solid var(--w98-border-dark); border-bottom: 2px solid var(--w98-border-light); border-right: 2px solid var(--w98-border-light); } .theme-windows .about_text h1 { font-family: var(--w98-font); font-size: 20px; color: var(--w98-text); font-weight: 700; margin-bottom: 12px; } .theme-windows .about_text p { font-family: var(--w98-font); font-size: 12px; line-height: 1.5; color: var(--w98-text); margin-bottom: 8px; } /* ======================================== WORK WINDOW ======================================== */ .theme-windows #work-window .window_content { background: var(--w98-input-bg) !important; } .theme-windows .work_content { padding: 24px; } .theme-windows .work_content h2 { font-family: var(--w98-font); font-size: 18px; color: var(--w98-text); margin-bottom: 16px; } .theme-windows .magnai_logo { max-width: 200px; margin-bottom: 16px; } .theme-windows .magnai_logo_light { display: none; } .theme-windows .magnai_logo_dark { display: block; } .theme-windows .work_content p { font-family: var(--w98-font); font-size: 12px; line-height: 1.6; color: var(--w98-text); margin-bottom: 16px; } .theme-windows .work_content strong { color: var(--w98-text); } .theme-windows .work_button { font-family: var(--w98-font); font-size: var(--w98-font-size); background: var(--w98-button-face); color: var(--w98-text); border: none; border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); border-radius: 0; padding: 6px 20px; text-transform: none; letter-spacing: 0; cursor: pointer; } .theme-windows .work_button:hover { background: #d0d0d0; color: var(--w98-text); } .theme-windows .work_button:active { border-top: 2px solid var(--w98-border-darkest); border-left: 2px solid var(--w98-border-darkest); border-bottom: 2px solid var(--w98-border-light); border-right: 2px solid var(--w98-border-light); transform: none; } .theme-windows .work_button:focus, .theme-windows .music_back_btn:focus, .theme-windows .photos_back_btn:focus, .theme-windows .art_back_btn:focus, .theme-windows .writings_back_btn:focus, .theme-windows .writings_download_btn:focus, .theme-windows .chat_send_btn:focus, .theme-windows .perudo_button:focus { outline: 1px dotted #000000; outline-offset: -4px; } /* ======================================== MUSIC WINDOW ======================================== */ .theme-windows #music-window .window_content { background: var(--w98-input-bg) !important; } .theme-windows .music_content { padding: 16px; } .theme-windows .music_content h2 { font-family: var(--w98-font); font-size: 16px; color: var(--w98-text); margin-bottom: 8px; } .theme-windows .music_intro { font-family: var(--w98-font); font-size: 12px; color: var(--w98-text); margin-bottom: 16px; } .theme-windows .music_nav_item { background: var(--w98-window-bg); border: none; border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); border-radius: 0; padding: 8px 12px; box-shadow: none; } .theme-windows .music_nav_item:hover { transform: none; box-shadow: none; background: var(--w98-highlight); color: var(--w98-highlight-text); border-left: 2px solid var(--w98-border-light); } .theme-windows .music_nav_item:hover .music_nav_title { color: var(--w98-highlight-text); } .theme-windows .music_nav_title { font-family: var(--w98-font); font-size: 12px; color: var(--w98-text); } .theme-windows .music_nav_arrow { color: var(--w98-text); } .theme-windows .music_nav_item:hover .music_nav_arrow { color: var(--w98-highlight-text); } .theme-windows .music_nav_item:focus { outline: 1px dotted #000000; outline-offset: -4px; } .theme-windows .music_back_btn { font-family: var(--w98-font); font-size: var(--w98-font-size); background: var(--w98-button-face); color: var(--w98-text); border: none; border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); border-radius: 0; padding: 4px 16px; } .theme-windows .music_back_btn:hover { background: #d0d0d0; transform: none; box-shadow: none; } .theme-windows .music_date { color: var(--w98-text); font-family: var(--w98-font); font-size: var(--w98-font-size); } .theme-windows .music_description { background: var(--w98-input-bg); border-radius: 0; border-left: none; border-top: 2px solid var(--w98-border-dark); border-left: 2px solid var(--w98-border-dark); border-bottom: 2px solid var(--w98-border-light); border-right: 2px solid var(--w98-border-light); padding: 12px; } .theme-windows .music_description p { font-family: var(--w98-font); font-size: 12px; color: var(--w98-text); } .theme-windows .candid_track h3 { font-family: var(--w98-font); font-size: 14px; color: var(--w98-text); } .theme-windows .candid_hero_image { border-radius: 0; border: 2px solid var(--w98-border-darkest); box-shadow: none; } .theme-windows .candid_video { border-radius: 0; border: 2px solid var(--w98-border-darkest); box-shadow: none; } .theme-windows .candid_video_section h3 { font-family: var(--w98-font); font-size: 14px; color: var(--w98-text); } .theme-windows .candid_track { border-bottom-color: var(--w98-border-dark); } .theme-windows .candid_video_section { border-top-color: var(--w98-border-dark); } .theme-windows iframe { border-radius: 0; } /* ======================================== PHOTOS WINDOW ======================================== */ .theme-windows #photos-window .window_content { background: var(--w98-input-bg) !important; } .theme-windows .photos_content { padding: 16px; } .theme-windows .photos_content h2 { font-family: var(--w98-font); font-size: 16px; color: var(--w98-text); margin-bottom: 12px; } .theme-windows .photos_nav_item { background: var(--w98-window-bg); border: none; border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); border-radius: 0; padding: 8px 12px; box-shadow: none; } .theme-windows .photos_nav_item:hover { transform: none; box-shadow: none; background: var(--w98-highlight); border-left: 2px solid var(--w98-border-light); } .theme-windows .photos_nav_item:hover .photos_nav_title { color: var(--w98-highlight-text); } .theme-windows .photos_nav_title { font-family: var(--w98-font); font-size: 12px; color: var(--w98-text); } .theme-windows .photos_nav_arrow { color: var(--w98-text); } .theme-windows .photos_nav_item:hover .photos_nav_arrow { color: var(--w98-highlight-text); } .theme-windows .photos_nav_item:focus { outline: 1px dotted #000000; outline-offset: -4px; } .theme-windows .photos_back_btn { font-family: var(--w98-font); font-size: var(--w98-font-size); background: var(--w98-button-face); color: var(--w98-text); border: none; border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); border-radius: 0; padding: 4px 16px; } .theme-windows .photos_back_btn:hover { background: #d0d0d0; transform: none; box-shadow: none; } .theme-windows .photos_description { background: var(--w98-input-bg); border-radius: 0; border-left: none; border-top: 2px solid var(--w98-border-dark); border-left: 2px solid var(--w98-border-dark); border-bottom: 2px solid var(--w98-border-light); border-right: 2px solid var(--w98-border-light); padding: 12px; } .theme-windows .photos_description p { font-family: var(--w98-font); font-size: 12px; color: var(--w98-text); } .theme-windows .photos_nav_count { font-family: var(--w98-font); font-size: 11px; color: var(--w98-text); } .theme-windows .photos_nav_item:hover .photos_nav_count { color: var(--w98-highlight-text); } .theme-windows .photo_gallery { gap: 4px; } .theme-windows .photo_row { gap: 4px; } .theme-windows .photo_item { border-radius: 0; box-shadow: none; border-top: 2px solid var(--w98-border-dark); border-left: 2px solid var(--w98-border-dark); border-bottom: 2px solid var(--w98-border-light); border-right: 2px solid var(--w98-border-light); } .theme-windows .photo_item img { border-radius: 0; } .theme-windows .photo_item:hover img { transform: none; } /* ======================================== ART WINDOW ======================================== */ .theme-windows #art-window .window_content { background: var(--w98-input-bg) !important; } .theme-windows .art_content { padding: 16px; } .theme-windows .art_content h2 { font-family: var(--w98-font); font-size: 16px; color: var(--w98-text); margin-bottom: 12px; } .theme-windows .art_nav_item { background: var(--w98-window-bg); border: none; border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); border-radius: 0; padding: 8px 12px; box-shadow: none; } .theme-windows .art_nav_item:hover { transform: none; box-shadow: none; background: var(--w98-highlight); border-left: 2px solid var(--w98-border-light); } .theme-windows .art_nav_item:hover .art_nav_title { color: var(--w98-highlight-text); } .theme-windows .art_nav_title { font-family: var(--w98-font); font-size: 12px; color: var(--w98-text); } .theme-windows .art_nav_arrow { color: var(--w98-text); } .theme-windows .art_nav_item:hover .art_nav_arrow { color: var(--w98-highlight-text); } .theme-windows .art_nav_item:focus { outline: 1px dotted #000000; outline-offset: -4px; } .theme-windows .art_back_btn { font-family: var(--w98-font); font-size: var(--w98-font-size); background: var(--w98-button-face); color: var(--w98-text); border: none; border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); border-radius: 0; padding: 4px 16px; } .theme-windows .art_back_btn:hover { background: #d0d0d0; transform: none; } .theme-windows .art_image { border-radius: 0; border: 2px solid var(--w98-border-darkest); box-shadow: none; } .theme-windows .art_date { font-family: var(--w98-font); font-size: var(--w98-font-size); color: var(--w98-text); font-style: normal; } /* ======================================== WRITINGS WINDOW ======================================== */ .theme-windows #writings-window .window_content { background: var(--w98-input-bg) !important; } .theme-windows .writings_content { padding: 16px; } .theme-windows .writings_content h2 { font-family: var(--w98-font); font-size: 16px; color: var(--w98-text); margin-bottom: 12px; } .theme-windows .writings_nav_item { background: var(--w98-window-bg); border: none; border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); border-radius: 0; padding: 8px 12px; box-shadow: none; } .theme-windows .writings_nav_item:hover { transform: none; box-shadow: none; background: var(--w98-highlight); border-left: 2px solid var(--w98-border-light); } .theme-windows .writings_nav_item:hover .writings_nav_title { color: var(--w98-highlight-text); } .theme-windows .writings_nav_title { font-family: var(--w98-font); font-size: 12px; color: var(--w98-text); } .theme-windows .writings_nav_arrow { color: var(--w98-text); } .theme-windows .writings_nav_item:hover .writings_nav_arrow { color: var(--w98-highlight-text); } .theme-windows .writings_nav_item:focus { outline: 1px dotted #000000; outline-offset: -4px; } .theme-windows .writings_back_btn { font-family: var(--w98-font); font-size: var(--w98-font-size); background: var(--w98-button-face); color: var(--w98-text); border: none; border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); border-radius: 0; padding: 4px 16px; } .theme-windows .writings_back_btn:hover { background: #d0d0d0; transform: none; box-shadow: none; } .theme-windows .writings_date { color: var(--w98-text); font-family: var(--w98-font); font-size: var(--w98-font-size); } .theme-windows .writings_description { background: var(--w98-input-bg); border-radius: 0; border-left: none; border-top: 2px solid var(--w98-border-dark); border-left: 2px solid var(--w98-border-dark); border-bottom: 2px solid var(--w98-border-light); border-right: 2px solid var(--w98-border-light); padding: 12px; } .theme-windows .writings_description p { font-family: var(--w98-font); font-size: 12px; color: var(--w98-text); } .theme-windows .writings_hero_image { border-radius: 0; border: 2px solid var(--w98-border-darkest); box-shadow: none; } .theme-windows .writings_download_btn { font-family: var(--w98-font); font-size: var(--w98-font-size); background: var(--w98-button-face); color: var(--w98-text); border: none; border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); border-radius: 0; padding: 6px 20px; box-shadow: none; } .theme-windows .writings_download_btn:hover { background: #d0d0d0; color: var(--w98-text); transform: none; box-shadow: none; } /* ======================================== LINKS WINDOW ======================================== */ .theme-windows #links-window .window_content { background: var(--w98-input-bg) !important; } .theme-windows #links-window .window_content::before { display: none; } .theme-windows .links_content { padding: 16px; } .theme-windows .links_content h2 { font-family: var(--w98-font); font-size: 16px; color: var(--w98-text); text-shadow: none; margin-bottom: 8px; } .theme-windows .links_subtitle { font-family: var(--w98-font); font-size: 12px; color: var(--w98-text); margin-bottom: 16px; } .theme-windows .link_card { background: var(--w98-window-bg); backdrop-filter: none; -webkit-backdrop-filter: none; border: none; border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); border-radius: 0; color: var(--w98-text); box-shadow: none; padding: 8px 12px; } .theme-windows .link_card::before { display: none; } .theme-windows .link_card:hover { transform: none; background: #0000a0; border-color: var(--w98-border-darkest); box-shadow: none; border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); } .theme-windows .link_card:hover .link_name, .theme-windows .link_card:hover .link_handle { color: var(--w98-highlight-text); } .theme-windows .link_card:active { transform: none; } /* Override platform-specific accent colors */ .theme-windows .link_x:hover, .theme-windows .link_instagram:hover, .theme-windows .link_letterboxd:hover, .theme-windows .link_linkedin:hover, .theme-windows .link_github:hover { border-color: var(--w98-border-darkest); box-shadow: none; border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); } .theme-windows .link_card:hover .link_icon { transform: none; } .theme-windows .link_name { font-family: var(--w98-font); font-size: 12px; color: var(--w98-text); } .theme-windows .link_handle { font-family: var(--w98-font); font-size: var(--w98-font-size); color: var(--w98-text-disabled); } .theme-windows .link_icon { font-size: 20px; margin-right: 12px; } /* ======================================== SEARCH WINDOW ======================================== */ .theme-windows .search_content { padding: 16px; } .theme-windows .search_content h2 { font-family: var(--w98-font); font-size: 16px; color: var(--w98-text); margin-bottom: 8px; } .theme-windows .search_subtitle { font-family: var(--w98-font); font-size: 12px; color: var(--w98-text); margin-bottom: 16px; } .theme-windows .search_input { font-family: var(--w98-font); font-size: 12px; border: none; border-top: 2px solid var(--w98-border-dark); border-left: 2px solid var(--w98-border-dark); border-bottom: 2px solid var(--w98-border-light); border-right: 2px solid var(--w98-border-light); border-radius: 0; padding: 4px 8px; background: var(--w98-input-bg); } .theme-windows .search_input:focus { border-top: 2px solid var(--w98-border-dark); border-left: 2px solid var(--w98-border-dark); border-bottom: 2px solid var(--w98-border-light); border-right: 2px solid var(--w98-border-light); box-shadow: none; } .theme-windows .search_result_item { background: var(--w98-window-bg); border-radius: 0; border-left: none; padding: 8px 12px; } .theme-windows .search_result_item:hover { background: var(--w98-highlight); border-left-color: transparent; transform: none; box-shadow: none; color: var(--w98-highlight-text); } .theme-windows .search_result_item:hover .search_result_title { color: var(--w98-highlight-text); } .theme-windows .search_result_item:hover .search_result_section { color: var(--w98-highlight-text); } .theme-windows .search_result_title { font-family: var(--w98-font); font-size: 12px; color: var(--w98-text); } .theme-windows .search_result_section { font-family: var(--w98-font); font-size: var(--w98-font-size); color: var(--w98-highlight); } .theme-windows .search_placeholder, .theme-windows .search_no_results { font-family: var(--w98-font); font-size: 12px; color: var(--w98-text-disabled); } .theme-windows .search_count { font-family: var(--w98-font); font-size: var(--w98-font-size); color: var(--w98-text); } /* ======================================== MAP WINDOW ======================================== */ .theme-windows #map-window .window_content { background: var(--w98-input-bg) !important; } .theme-windows .map-filter-bar { background: var(--w98-surface); border-bottom: 1px solid var(--w98-border-dark); padding: 4px 8px; gap: 8px; } .theme-windows .filter-group label { font-family: var(--w98-font); font-size: var(--w98-font-size); color: var(--w98-text); } .theme-windows .filter-group select { font-family: var(--w98-font); font-size: var(--w98-font-size); background: var(--w98-input-bg); color: var(--w98-text); border: none; border-top: 2px solid var(--w98-border-dark); border-left: 2px solid var(--w98-border-dark); border-bottom: 2px solid var(--w98-border-light); border-right: 2px solid var(--w98-border-light); border-radius: 0; padding: 2px 4px; cursor: pointer; } .theme-windows .filter-group select:focus { outline: 1px dotted var(--w98-text); } .theme-windows .map-stats-panel { background: var(--w98-surface); border: none; border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); border-radius: 0; box-shadow: none; padding: 8px; } .theme-windows .stats-header { font-family: var(--w98-font); font-size: var(--w98-font-size); color: var(--w98-text); } .theme-windows .stat-row { font-family: var(--w98-font); font-size: var(--w98-font-size); color: var(--w98-text); } .theme-windows .stat-row span:first-child { color: var(--w98-text); } .theme-windows .stat-row span:last-child { color: var(--w98-text); } /* ======================================== PERUDO WINDOW ======================================== */ .theme-windows #perudo-window .window_content { background: var(--w98-input-bg) !important; } .theme-windows .perudo_content { padding: 10px; min-height: 280px; gap: 8px; } .theme-windows .perudo_status_item, .theme-windows .perudo_panel, .theme-windows .perudo_help, .theme-windows .perudo_reveal_card { background: var(--w98-surface); border-radius: 0; border: none; border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); box-shadow: none; } .theme-windows .perudo_panel h2 { font-family: var(--w98-font); font-size: 13px; color: var(--w98-text); } .theme-windows .perudo_status_label, .theme-windows .perudo_status_value, .theme-windows .perudo_controls label, .theme-windows .perudo_help p, .theme-windows .perudo_status_message, .theme-windows .perudo_reveal_card p, .theme-windows .perudo_reveal_card h3 { font-family: var(--w98-font); font-size: var(--w98-font-size); color: var(--w98-text); text-transform: none; letter-spacing: 0; font-weight: 400; } .theme-windows .perudo_die { border-radius: 0; border: none; border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); box-shadow: none; font-family: var(--w98-font); font-size: 12px; color: var(--w98-text); } .theme-windows .perudo_die_placeholder { font-family: var(--w98-font); font-size: var(--w98-font-size); color: var(--w98-text-disabled); } .theme-windows .perudo_palifico { font-family: var(--w98-font); font-size: var(--w98-font-size); color: var(--w98-text); background: var(--w98-surface); border-radius: 0; border: 1px solid var(--w98-border-dark); } .theme-windows .perudo_select { font-family: var(--w98-font); font-size: var(--w98-font-size); background: var(--w98-input-bg); color: var(--w98-text); border-radius: 0; border: none; border-top: 2px solid var(--w98-border-dark); border-left: 2px solid var(--w98-border-dark); border-bottom: 2px solid var(--w98-border-light); border-right: 2px solid var(--w98-border-light); padding: 2px 4px; } .theme-windows .perudo_select:focus { outline: 1px dotted var(--w98-text); box-shadow: none; } .theme-windows .perudo_button { font-family: var(--w98-font); font-size: var(--w98-font-size); color: var(--w98-text); border-radius: 0; border: none; background: var(--w98-button-face); border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); filter: none; padding: 4px 10px; } .theme-windows .perudo_button:hover { background: #d0d0d0; transform: none; } .theme-windows .perudo_button:active { border-top: 2px solid var(--w98-border-darkest); border-left: 2px solid var(--w98-border-darkest); border-bottom: 2px solid var(--w98-border-light); border-right: 2px solid var(--w98-border-light); } .theme-windows .perudo_button:disabled { color: var(--w98-text-disabled); } .theme-windows .perudo_reveal_overlay { background: rgba(0, 0, 0, 0.45); } .theme-windows .perudo_status_error { color: #ff0000; } /* ======================================== RECIPES WINDOW ======================================== */ .theme-windows #recipes-window .window_content { background: var(--w98-input-bg) !important; } .theme-windows .recipes_login_content { padding: 12px; gap: 10px; } .theme-windows .recipes_login_content h2, .theme-windows .recipes_login_prompt, .theme-windows .recipes_login_feedback { font-family: var(--w98-font); color: var(--w98-text); } .theme-windows .recipes_login_content h2 { font-size: 14px; } .theme-windows .recipes_login_prompt { font-size: var(--w98-font-size); } .theme-windows .recipes_noodle_wrap { background: var(--w98-surface); border-radius: 0; border: none; border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); padding: 6px; } .theme-windows .recipes_password_input { font-family: var(--w98-font); font-size: var(--w98-font-size); border-radius: 0; border: none; border-top: 2px solid var(--w98-border-dark); border-left: 2px solid var(--w98-border-dark); border-bottom: 2px solid var(--w98-border-light); border-right: 2px solid var(--w98-border-light); background: var(--w98-input-bg); color: var(--w98-text); padding: 4px 6px; } .theme-windows .recipes_password_input:focus { outline: 1px dotted var(--w98-text); box-shadow: none; } .theme-windows .recipes_login_button { font-family: var(--w98-font); font-size: var(--w98-font-size); color: var(--w98-text); border-radius: 0; border: none; background: var(--w98-button-face); border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); filter: none; padding: 4px 10px; } .theme-windows .recipes_login_button:hover, .theme-windows .recipes_login_button:focus-visible { background: #d0d0d0; } .theme-windows .recipes_login_button:active { border-top: 2px solid var(--w98-border-darkest); border-left: 2px solid var(--w98-border-darkest); border-bottom: 2px solid var(--w98-border-light); border-right: 2px solid var(--w98-border-light); } .theme-windows .recipes_login_feedback.is_error { color: #800000; } .theme-windows .recipes_login_feedback.is_success { color: #006000; } /* ======================================== CHAT WINDOW (DANBOT) ======================================== */ .theme-windows #chat-window .window_content { background: var(--w98-input-bg) !important; } .theme-windows .chat_content { padding: 16px; min-height: 300px; } .theme-windows .chat_content h2 { font-family: var(--w98-font); font-size: 14px; color: var(--w98-text); margin-bottom: 8px; } .theme-windows .chat_messages { background: var(--w98-input-bg); border: none; border-top: 2px solid var(--w98-border-dark); border-left: 2px solid var(--w98-border-dark); border-bottom: 2px solid var(--w98-border-light); border-right: 2px solid var(--w98-border-light); border-radius: 0; padding: 8px; } .theme-windows .chat_message { border-radius: 0; padding: 6px 8px; margin-bottom: 8px; } .theme-windows .chat_message_user { background: #ffffcc; margin-left: 20%; } .theme-windows .chat_message_bot { background: var(--w98-surface); margin-right: 20%; } .theme-windows .chat_label { font-family: var(--w98-font); font-size: var(--w98-font-size); color: var(--w98-highlight); font-weight: 700; } .theme-windows .chat_text { font-family: var(--w98-font); font-size: 12px; color: var(--w98-text); } .theme-windows .chat_message_typing .chat_text { color: var(--w98-text-disabled); } .theme-windows .chat_input { font-family: var(--w98-font); font-size: 12px; border: none; border-top: 2px solid var(--w98-border-dark); border-left: 2px solid var(--w98-border-dark); border-bottom: 2px solid var(--w98-border-light); border-right: 2px solid var(--w98-border-light); border-radius: 0; padding: 4px 8px; background: var(--w98-input-bg); } .theme-windows .chat_input:focus { outline: none; border-top: 2px solid var(--w98-border-dark); border-left: 2px solid var(--w98-border-dark); border-bottom: 2px solid var(--w98-border-light); border-right: 2px solid var(--w98-border-light); box-shadow: none; } .theme-windows .chat_send_btn { font-family: var(--w98-font); font-size: var(--w98-font-size); background: var(--w98-button-face); color: var(--w98-text); border: none; border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); border-radius: 0; padding: 4px 16px; cursor: pointer; } .theme-windows .chat_send_btn:hover { background: #d0d0d0; transform: none; box-shadow: none; } .theme-windows .chat_send_btn:active { border-top: 2px solid var(--w98-border-darkest); border-left: 2px solid var(--w98-border-darkest); border-bottom: 2px solid var(--w98-border-light); border-right: 2px solid var(--w98-border-light); } .theme-windows .chat_send_btn:disabled { color: var(--w98-text-disabled); } .theme-windows .chat_disclaimer { font-family: var(--w98-font); font-size: var(--w98-font-size); color: var(--w98-text-disabled); } .theme-windows .chat_error { background: var(--w98-surface); color: #ff0000; border-radius: 0; font-family: var(--w98-font); font-size: var(--w98-font-size); } /* ======================================== CRICKET STATS ======================================== */ .theme-windows .filter_group label { font-family: var(--w98-font); font-size: var(--w98-font-size); color: var(--w98-text); } .theme-windows .filter_group select { font-family: var(--w98-font); font-size: var(--w98-font-size); background: var(--w98-input-bg); border: none; border-top: 2px solid var(--w98-border-dark); border-left: 2px solid var(--w98-border-dark); border-bottom: 2px solid var(--w98-border-light); border-right: 2px solid var(--w98-border-light); border-radius: 0; color: var(--w98-text); } .theme-windows .filter_group select:focus { outline: 1px dotted var(--w98-text); } .theme-windows .cricket_search input { font-family: var(--w98-font); font-size: 12px; border: none; border-top: 2px solid var(--w98-border-dark); border-left: 2px solid var(--w98-border-dark); border-bottom: 2px solid var(--w98-border-light); border-right: 2px solid var(--w98-border-light); border-radius: 0; } .theme-windows .cricket_summary { background: var(--w98-surface); border-radius: 0; border-left: none; border-top: 2px solid var(--w98-border-dark); border-left: 2px solid var(--w98-border-dark); border-bottom: 2px solid var(--w98-border-light); border-right: 2px solid var(--w98-border-light); } .theme-windows .cricket_stat_value { font-family: var(--w98-font); font-size: 18px; color: var(--w98-text); } .theme-windows .cricket_stat_label { font-family: var(--w98-font); font-size: var(--w98-font-size); color: var(--w98-text-disabled); } .theme-windows .cricket_table_container { border-radius: 0; border: none; border-top: 2px solid var(--w98-border-dark); border-left: 2px solid var(--w98-border-dark); border-bottom: 2px solid var(--w98-border-light); border-right: 2px solid var(--w98-border-light); } .theme-windows .cricket_table { font-family: var(--w98-font); font-size: var(--w98-font-size); } .theme-windows .cricket_table thead { background: var(--w98-highlight); } .theme-windows .cricket_table th { font-family: var(--w98-font); font-size: var(--w98-font-size); padding: 4px 6px; } .theme-windows .cricket_table th:hover { background: #0000a0; } .theme-windows .cricket_table tbody tr { border-bottom: 1px solid var(--w98-border-dark); } .theme-windows .cricket_table tbody tr:hover { background: #ffffcc; } .theme-windows .cricket_table tbody tr:nth-child(even) { background: #f0f0f0; } .theme-windows .cricket_table tbody tr:nth-child(even):hover { background: #ffffcc; } .theme-windows .cricket_table td { color: var(--w98-text); padding: 4px 6px; } .theme-windows .cricket_link { background: var(--w98-button-face); color: var(--w98-text); border-radius: 0; font-family: var(--w98-font); } .theme-windows .cricket_link:hover { background: var(--w98-highlight); color: var(--w98-highlight-text); } /* ======================================== DOCK → DESKTOP ICONS (W98 style) ======================================== */ .theme-windows .dock { position: fixed; top: 8px; left: 8px; bottom: 40px; right: auto; transform: none; width: auto; max-width: calc(100vw - 16px); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; border-radius: 0; padding: 0; box-shadow: none; z-index: 50; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 4px; } .theme-windows .dock_item { width: 72px; height: 72px; background: transparent; border-radius: 0; border: 1px solid transparent; flex-direction: column; gap: 2px; padding: 4px 2px 2px; } /* Show text label below icon using title attribute */ .theme-windows .dock_item::after { content: attr(title); display: block; font-family: var(--w98-font); font-size: var(--w98-font-size); color: #ffffff; text-align: center; line-height: 1.2; text-shadow: 1px 1px 1px #000000; max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .theme-windows .dock_item:hover { transform: none; box-shadow: none; background: transparent; border: 1px dotted rgba(255, 255, 255, 0.5); } .theme-windows .dock_item:hover::after { background: var(--w98-highlight); color: var(--w98-highlight-text); text-shadow: none; } .theme-windows .dock_item:active { border: 1px dotted rgba(255, 255, 255, 0.8); } .theme-windows .dock_item.active::before { display: none; } .theme-windows .dock_icon { width: 32px; height: 32px; background-size: contain; background-repeat: no-repeat; background-position: center; image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: -webkit-optimize-contrast; font-size: 0; /* Hide any text/emoji fallback */ } /* Windows 98-style pixelated desktop icons */ .theme-windows .dock_icon_document { background-image: url('data:image/svg+xml;utf8,'); } .theme-windows .dock_icon_notepad { background-image: url('data:image/svg+xml;utf8,'); } .theme-windows .dock_icon_music { background-image: url('data:image/svg+xml;utf8,'); } .theme-windows .dock_icon_photos { background-image: url('data:image/svg+xml;utf8,'); } .theme-windows .dock_icon_art { background-image: url('data:image/svg+xml;utf8,'); } .theme-windows .dock_icon_map { background-image: url('data:image/svg+xml;utf8,'); } .theme-windows .dock_icon_computer { background-image: url('data:image/svg+xml;utf8,'); } .theme-windows .dock_icon_folder { background-image: url('data:image/svg+xml;utf8,'); } .theme-windows .dock_icon_links { background-image: url('data:image/svg+xml;utf8,'); } .theme-windows .dock_icon_search { background-image: url('data:image/svg+xml;utf8,'); } .theme-windows .dock_icon_dice { background-image: url('data:image/svg+xml;utf8,'); } .theme-windows .dock_icon_recipes { background-image: url('/assets/recipes-icon.svg'); image-rendering: auto; } .theme-windows .dock_separator { display: none; } .theme-windows .dock_item.dragging { opacity: 0.6; transform: none; } .theme-windows .dock_item.drag-over { transform: none; border: 1px dashed rgba(255, 255, 255, 0.8); border-radius: 0; } /* ======================================== LEAFLET MAP OVERRIDES ======================================== */ .theme-windows #map-window .leaflet-control-zoom a { background: var(--w98-button-face); color: var(--w98-text); border-color: var(--w98-border-dark); border-radius: 0; } .theme-windows #map-window .leaflet-control-zoom a:hover { background: #d0d0d0; color: var(--w98-text); } .theme-windows .leaflet-tooltip.map-tooltip { background: var(--w98-surface); border: 1px solid var(--w98-border-darkest); border-radius: 0; box-shadow: none; font-family: var(--w98-font); } .theme-windows .map-tooltip .place-name { font-family: var(--w98-font); font-size: 12px; color: var(--w98-text); } .theme-windows .map-tooltip .place-date { font-family: var(--w98-font); font-size: var(--w98-font-size); color: var(--w98-text); } /* ======================================== SCROLLBAR (W98 STYLE) ======================================== */ .theme-windows .window_content::-webkit-scrollbar { width: 16px; } .theme-windows .window_content::-webkit-scrollbar-track { background: #c0c0c0; background-image: url("data:image/svg+xml,%3Csvg width='2' height='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23c0c0c0'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23c0c0c0'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='0' width='1' height='1' fill='%23ffffff'/%3E%3C/svg%3E"); background-size: 2px 2px; } .theme-windows .window_content::-webkit-scrollbar-thumb { background: var(--w98-button-face); border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); } .theme-windows .window_content::-webkit-scrollbar-button { background: var(--w98-button-face); border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); height: 16px; } .theme-windows .chat_messages::-webkit-scrollbar { width: 16px; } .theme-windows .chat_messages::-webkit-scrollbar-track { background: #c0c0c0; } .theme-windows .chat_messages::-webkit-scrollbar-thumb { background: var(--w98-button-face); border-top: 2px solid var(--w98-border-light); border-left: 2px solid var(--w98-border-light); border-bottom: 2px solid var(--w98-border-darkest); border-right: 2px solid var(--w98-border-darkest); } /* ======================================== RESPONSIVE OVERRIDES ======================================== */ @media (max-width: 768px) { .theme-windows .dock { top: 4px; left: 4px; bottom: 40px; gap: 2px; } .theme-windows .dock_item { width: 56px; height: 56px; flex-shrink: 0; } .theme-windows .dock_item::after { font-size: 9px; max-width: 52px; } .theme-windows .dock_icon { width: 28px; height: 28px; } .theme-windows .desktop { bottom: 36px; } .theme-windows .safari_window.maximized { height: calc(100vh - 36px) !important; } }