/* 90s Pixel / Retro styles */ :root{ --bg:#0b2b3a; --window-bg:#c0c0c0; --titlebar:#000080; --text:#0a0a0a; --accent:#00ff00; --xp-blue:#3a76ff; --xp-grey:#cfcfcf; --ui-font: 'TahomaV1', Tahoma, "Segoe UI", sans-serif; --range-progress: 0%; --vol-progress: 50%; --startbar-height: 35px; } /* Load local Tahoma variants from public/fonts */ @font-face{ font-family: 'TahomaV1'; src: url('/fonts/Tahoma V1.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face{ font-family: 'TahomaV1'; src: url('/fonts/Tahoma Bold V1.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } *{box-sizing:border-box} html,body{height:100%;margin:0;font-family: var(--ui-font);background:#0b2b3a;color:var(--text)} .boot-screen{position:fixed;inset:0;background:#000;color:var(--accent);display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:50} .boot-content{width:80%;max-width:800px} .logo{font-family: var(--ui-font);color:#7fffd4;margin-bottom:10px;text-align:center} .boot-lines{background:transparent;border:none;color:var(--accent);font-family:inherit;white-space:pre-wrap} .progress{height:10px;background:#222;margin-top:16px;border:2px solid #333} .progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#00ff00,#7fffd4);animation:bootprogress 3s linear forwards} @keyframes bootprogress{to{width:100%}} /* XP-like starting screen */ .xp-starting{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:24px;transform:translateY(-30px);will-change:transform} .xp-big-logo{width:360px;max-width:80%;height:auto;display:block} .xp-loading{display:flex;flex-direction:column;align-items:center;gap:10px;width:420px;max-width:90%} .xp-progress-container { width: 300px; height: 22px; border: 2px solid #7c7c7c; border-radius: 6px; background-color: #000; position: relative; overflow: hidden; box-shadow: none; display: flex; align-items: center; } .block-group { display: flex; gap: 4px; position: absolute; animation: xp-chase 2s linear infinite; } .block { width: 12px; height: 14px; border-radius: 1px; background: linear-gradient( to bottom, #3a76ff 0%, #7baaff 40%, #3a76ff 60%, #1a46b3 100% ); box-shadow: none; } @keyframes xp-chase { 0% { transform: translateX(-50px); } 100% { transform: translateX(310px); } } .copyright{font-family: var(--ui-font);color:#fff;opacity:0.85;font-size:12px;text-shadow:none} /* Boot screen bottom text (XP style) */ .boot-copyright, .boot-microsoft{ position:fixed; bottom:10px; color:#fff; text-shadow:none; opacity:0.9; font-size:12px; z-index:80; } .boot-copyright{left:12px;font-family: var(--ui-font)} .boot-microsoft{right:12px;font-family: var(--ui-font);letter-spacing:1px;font-size:14px} .hidden{display:none} /* Desktop */ .desktop{position:fixed;inset:0;overflow:hidden} .wallpaper{position:absolute;inset:0;background-color:#6dbb2f;background-image: url('/assets/wallpaper.webp'), url('../assets/wallpaper.webp'), url('assets/wallpaper.webp');background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0.98} .icons{position:relative;padding:20px;display:flex;flex-direction:column;gap:18px} .icon{width:96px;cursor:pointer;user-select:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;transition:transform .16s ease;will-change:transform} .icon-art{width:64px;height:64px;display:block;object-fit:contain;margin-bottom:6px;margin-left:0;background:transparent;border:0;box-shadow:none;filter:none;transition:all .2s ease-in-out} .icon:hover > .icon-art[src$="bin.svg"], .icon:hover > .icon-art[src$="browser.svg"], .icon:hover > .icon-art[src$="music-player.svg"], .icon:hover > .icon-art[src*="/bin.svg"], .icon:hover > .icon-art[src*="/browser.svg"], .icon:hover > .icon-art[src*="/music-player.svg"] { filter: brightness(.94); box-shadow: none; } .icon:active > .icon-art[src$="bin.svg"], .icon:active > .icon-art[src$="browser.svg"], .icon:active > .icon-art[src$="music-player.svg"] { transform: scale(.98); filter: brightness(.9); } .icon-art[src$="bin.svg"], .icon-art[src*="/bin.svg"], .icon-art[src$="browser.svg"], .icon-art[src*="/browser.svg"]{ box-shadow: none !important; filter: none !important; } .icon-label{width:100%;text-align:center;font-size:11px;font-family: var(--ui-font);color:#fff;text-shadow:none;line-height:1.1;white-space:normal;word-break:break-word;margin-top:2px} .icon .icon-link{ text-decoration: none; color: inherit; display: inline-flex; flex-direction: column; align-items: center; } .icon .icon-link .icon-label{ text-decoration: none; } .icon .folder{background:linear-gradient(#ffd27f,#ffb84d);position:relative} .icon .recycle-bin{background:linear-gradient(#e6f7ff,#cfeeff);display:flex;align-items:center;justify-content:center} .icon .recycle-bin::after{content:"🗑️";font-size:24px} /* Window */ .titlebar, .title-bar { height: 30px; background: linear-gradient(to bottom, #7baaff 0%, #3a76ff 5%, #1a46b3 100%); display: flex; align-items: center; padding: 0 8px; color: white; font-size: 12px; font-weight: bold; text-shadow: none; } .title{font-family: var(--ui-font);font-size:12px} .close{background:#c0c0c0;border:2px solid #000;padding:4px 8px;cursor:pointer;font-family: var(--ui-font)} .window-body{padding:12px;background:#e9e9e9;color:#000} .tabs{display:flex;gap:6px;margin-bottom:10px} .tabs button{background:#ddd;border:2px solid #000;padding:6px 10px;cursor:pointer;font-family: var(--ui-font)} .tabs button.active{background:#b0d4ff} .page h1,.page h2{font-family: var(--ui-font)} .about-grid{display:flex;gap:12px;align-items:flex-start} .profile-pic{width:140px;height:140px;border:3px solid #000;background:#fff} .about-text p{margin:0 0 8px 0} .about-text h2{margin:8px 0 4px 0} /* Small screens */ @media (max-width:700px){ .window{left:12px;top:60px;width:calc(100% - 24px)} .icons{flex-direction:row;gap:12px;padding:12px} } #view-work { display: flex; flex-direction: column; width: 100%; height: 100%; position: relative; /* Change from absolute to relative */ overflow: hidden; background-color: #748aff; } #view-work .main { display: flex; flex: 1; /* This is key to filling the remaining height */ width: 100%; align-items: stretch; } #view-work .leftpanel { width: 240px; background: linear-gradient(to bottom, #748aff 0%, #4057d3 100%); padding: 15px; height: 100%; /* Stretches to bottom */ } #view-work .rightpanel { flex: 1; display: flex; flex-direction: column; background-color: #7280ce; align-items: stretch; justify-content: flex-start; padding: 0; width: 100%; /* ◄ ADD THIS LINE */ } #view-work .rightpanel > div { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } @media (max-width:900px){ #view-work .main { flex-direction: column; } #view-work .leftpanel { width: 100%; flex: 0 0 auto; max-height: 220px; } } /* Taskbar styles (Windows XP like) */ .taskbar{ position:fixed; bottom:0; left:0; right:0; height:40px; background: linear-gradient(to bottom, #245edb 0%, #3f8cf3 9%, #245edb 18%, #245edb 92%, #1941a5 100%); display:flex; align-items:center; justify-content:space-between; z-index:1000; } .start-button { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-width: 130px; height: 100%; padding: 0 15px; cursor: pointer; background: linear-gradient(to bottom, #4fba4f 0%, #359d35 50%, #207a20 100%); border-radius: 0 20px 20px 0; border: 1px solid #144f14; border-left: none; box-shadow: none, inset 1px 3px 5px rgba(255,255,255,0.7), inset -3px -3px 6px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.6); color: #fff; font-family: var(--ui-font); font-size: 26px; font-weight: bold; font-style: italic; text-shadow: none; } .quicklaunch{display:flex;gap:6px;margin-left:6px} .quick-launch{background:transparent;border:2px solid rgba(255,255,255,0.12);width:34px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px;cursor:pointer} .taskbar-items{display:flex;gap:6px;align-items:center;flex:1;margin-left:8px} .task-item{background:#d7e9ff;border:2px solid #022c6a;padding:10px 20px;font-family: var(--ui-font);cursor:pointer;border-radius:3px} .task-item.hidden{display:none} .task-item.active{background:#b0d4ff} /* Positioning helpers: first open task goes to the left, second to the right */ .task-item.left{order:0} .task-item.right{order:1} .system-tray{height:100%;display:flex;align-items:center;padding:0 10px;background:linear-gradient(to bottom, #0ea3f8 0%, #0089e5 100%);border-left:1px solid #106ad2} .tray{display:flex;align-items:center;gap:12px} .tray-icons{display:flex;gap:8px;margin-right:12px;align-items:center} .tray-icon{font-size:16px;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;width:20px;height:20px} .notif-wrapper{position:relative;display:flex;align-items:center} .balloon{display:none;position:absolute;bottom:45px;right:-10px;width:280px;background:#ffffef;border:1px solid #000;border-radius:8px;padding:10px;box-shadow:none;font-size:12px;z-index:2000;pointer-events:none} .notif-wrapper:hover .balloon{display:block} .balloon-header{display:flex;justify-content:space-between;font-weight:bold;margin-bottom:4px} .balloon-tail{position:absolute;bottom:-10px;right:15px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #000} .balloon-tail::after{content:'';position:absolute;bottom:1px;right:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #ffffef} /* Clock: light-blue bordered, with the volume icon inside */ .clock{color:#fff;font-size:11px;text-shadow:none;font-family:var(--ui-font)} .clock .tray-icon{width:18px;height:18px;flex:0 0 18px;display:block;margin-right:0px;padding:0;background:transparent;border-radius:2px;box-shadow:none;filter:none;} .clock .tray-icon{position:relative} /* Tooltip for tray icons (uses the element's title attr) */ .clock .tray-icon::after{ content: attr(title); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); background: #fff; color: #062a4a; padding: 4px 8px; border-radius: 6px; font-size: 11px; white-space: nowrap; border: 1px solid #0ea3f8; box-shadow: none; opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease; z-index: 220; } .clock .tray-icon::before{ content: ''; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%) translateY(4px); border-width: 6px; border-style: solid; border-color: #fff transparent transparent transparent; opacity: 0; transition: opacity .12s ease, transform .12s ease; z-index: 221; } .clock .tray-icon:hover::after, .clock .tray-icon:hover::before{ opacity: 1; transform: translateX(-50%) translateY(0); } .clock .clock-time{font-family: var(--ui-font);color:#062a4a} .start-button .start-logo, .start-button img { height: 32px; width: auto; flex-shrink: 0; display: block; margin: 0; } .start-button .start-text { font-family: var(--ui-font); font-size: 26px; font-weight: bold; font-style: italic; color: #fff; text-shadow: none; letter-spacing: -1px; line-height: 1; margin-left: 8px; } /* Music player window styles (copied/adapted from provided snippet) */ .music-player{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(0.96);z-index:2000;box-shadow:none} .music-player.hidden{display:none} .wmp-window{width:880px;background:linear-gradient(to bottom, #7baaff 0%, #3a76ff 5%, #1a46b3 100%);border:4px solid #1a46b3;border-radius:10px;box-shadow:10px 10px 40px rgba(0,0,0,0.6);display:flex;flex-direction:column;overflow:hidden} .wmp-icon-svg, .ff-icon { width: 16px; height: 16px; margin-right: 6px; display:block; object-fit:contain; } .win-controls { margin-left: auto; display: flex; gap: 2px; } /* Justify text for About / profile columns */ .text_col { text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .subtitle { text-align: justify; text-justify: inter-word; } /* Heading utilities */ .bold-italic { font-weight: 700; font-style: italic; } .italic-only { font-style: italic; font-weight: 400; } .h6-regular { font-style: normal; font-weight: 400; margin: 0; } .h5-regular { font-style: normal; font-weight: 400; margin: 0; } /* Grouped headings inside work welcome - remove internal gaps */ .work-headings { display: flex; flex-direction: column; gap: 6px; align-items: center; margin-bottom: 6px; } .work-headings h2, .work-headings h5, .work-headings h6 { margin: 0; padding: 0; } .win-btn { width: 21px; height: 21px; border: 1px solid rgba(255,255,255,0.65); border-radius: 3px; background: linear-gradient(to bottom, #cbe9ff 0%, #6fb8ff 50%, #2b6fe6 100%); color: white; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 12px; transition: transform .1s ease, box-shadow .1s ease, background .12s ease; box-shadow: 0 2px 6px rgba(0,0,0,0.12) inset; } .win-btn:hover{ box-shadow: 0 14px 28px rgba(0,0,0,0.28); filter: brightness(.94); } .win-btn.close { background: linear-gradient(to bottom, #ffd1d1 0%, #e04343 50%, #b82222 100%); } /* ER / Browser window: use Firefox-like chrome */ /* ER window removed; styles have been removed to avoid orphaned selectors */ /* --- My Computer WinForm (scoped to .winform to avoid clashing) --- */ .winform{position:absolute;top:4%;left:18%;width:900px;height:min(650px, 80vh);max-height:85vh;display:flex;flex-direction:column;z-index:2500} .winform .titlebar{display:flex;align-items:center;justify-content:space-between;height:35px;border-top-left-radius:8px;border-top-right-radius:8px;background:linear-gradient(to bottom,#0058ee,#003092);color:#fff;padding:0 6px} .winform .windowborder{display:flex;background-color:rgb(8,49,217);padding:0 4px 4px 4px;height:100%} .winform .windowsbody{display:flex;flex-direction:column;background:#fff;height:100%;width:100%} .winform .topwindowsbar{display:flex;height:32px;border-bottom:2px solid rgba(0,0,0,0.1)} .winform .toolbar{display:flex;align-items:center;width:100%;background:#ede9d3;padding-left:6px} .winform .toolbaritem{font-size:13px;padding:6px;cursor:default} .winform .toolbar_icon{display:flex;background:#ede9d3;height:35px;align-items:center;padding:5px} .winform .bottomwindowsbar{display:flex;height:24px;border-top:2px solid rgba(0,0,0,0.1);background:#ede9d3} .winform .addressbar{display:flex;background:#fff;border:1px solid rgba(0,0,0,0.2);width:100%;align-items:center;margin:0 5px;padding:4px} .winform .accordion{margin:0; display:flex; flex-direction:column; flex:1 1 auto; min-height:0} .winform .accordion_content{flex:1 1 auto; padding:8px; background:rgba(198,211,255,0.87); overflow:auto; min-height:0} /* Ensure welcome-page (custom content) fills the available white area inside the winform */ .winform .welcome-page{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; width:100% } .winform .welcome-page > .accordion_content{ flex:1 1 auto; min-height:0; overflow:auto; padding:0; display:flex; flex-direction:column } .winform .welcome-page .welcome-main{ flex:1 1 auto; min-height:0 } .winform .welcome-page .welcome-main .main{ height:100%; min-height:0 } .winform .win-btn{ width:26px !important; height:26px !important; display:flex; align-items: center; justify-content:center; border-radius:3px; background:transparent !important; color:#fff; cursor:pointer; background-repeat:no-repeat !important; background-position:center !important; background-size:18px 18px !important; padding:0 !important; border:0 !important; } /* === My Work layout styles (appended from user request) === */ .main { display: flex; flex-direction: row; height: 100%; overflow: auto; } .leftpanel { width: 300px; max-height: 100%; background: linear-gradient(rgb(116, 138, 255) 0%, rgb(64, 87, 211) 100%); padding: 10px; overflow-y: auto; } .leftpanel::-webkit-scrollbar { width: 15px; } .leftpanel::-webkit-scrollbar-thumb { border-radius: 10px; border: 2px solid #ddd; } .rightpanel { display: flex; flex-direction: column; align-items: center; padding: 10px; width: 100%; overflow-y: auto; } .content_tech { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .tech_badge { display: inline-block; margin: 0; } .header { display: flex; align-items: center; margin-bottom: 20px; width: 100%; padding: 10px; gap: 10px; color: white; background-color: #6687ff; border-radius: 15px; box-shadow: 2px 2px #959393; } .body { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 10px; gap: 10px; background-color: #ddd; border-radius: 15px; font-size: 16px; margin: 10px 0; box-shadow: 2px 2px #959393; } .github_button { display: flex; align-items: center; justify-content: center; padding: 10px; width: 210px; gap: 10px; height: 60px; background-color: #333; color: #fff; border-radius: 10px; font-size: 18px; font-weight: bold; text-decoration: none; transition: all 0.2s ease-in-out; } .github_button:hover { background-color: #fff; border: 1px solid #333; color: #000; cursor: pointer; } .github_icon { cursor: default; } .accordion_content_item { margin: 5px 0px; cursor: pointer; } .accordion_content_item:hover { text-decoration: underline; } .accordion_content_text { font-size: 12px; line-height: 14px; color: rgb(12, 50, 125); display: flex; align-items: center; gap: 5px; } .win_accordion_title { font-weight: bold; color: white; padding: 5px 0; } @media (max-width:700px){ .leftpanel{ display:none; } .rightpanel{ padding:6px; } } .winform .win-btn.close{background-color:transparent !important} /* Welcome page scoped styles (moved from index.html) */ .welcome-main { font-family: sans-serif; margin: 0; padding: 0; height: 100%; box-sizing: border-box; } .welcome-main .main { background-color: #6375d6; width: 100%; /* top padding moved into the inner scroll containers so the scrollbar starts flush at the very top of the window */ padding: 0 0 20px 20px; box-sizing: border-box; background-repeat: no-repeat; background-position: right bottom; color: #d6dff5; display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; } .welcome-main .content { display: flex; flex-direction: row; gap: 20px; flex: 1 1 auto; min-height: 0; flex-wrap: wrap; align-items: flex-start; } .welcome-main .leftpanel, .welcome-main .rightpanel { display: flex; flex-direction: column; flex: 1 1 300px; min-width: 180px; max-width: 60%; padding: 15px; box-sizing: border-box; } .welcome-main .profile_pic{ object-fit: cover; border-radius: 20%; margin-bottom:10px; max-width:100%; height:auto } .welcome-main .subtitle_header{ font-size:22px; font-weight:bold; margin-top:20px; margin-bottom:10px } .welcome-main .subtitle{ font-size:20px; font-weight:500; margin-bottom: 30px; padding:0 } .welcome-main .hidden{ display:none } /* Ensure the Work view uses a two-column layout (overrides welcome-main .main) */ #view-work .main { display: flex; flex-direction: row; gap: 20px; align-items: flex-start; min-height: 0; } #view-work .leftpanel { flex: 0 0 300px; } #view-work .rightpanel { flex: 1 1 auto; min-width: 0; padding: 0; /* ensure consistent no-gap behavior */ } .welcome-main a{ color:inherit } .welcome-main .pic_col{ flex: 0 0 220px; display:flex; flex-direction:column; gap:12px; align-items:center } .welcome-main .text_col { flex: 1 1 60%; min-width:180px } /* Ensure inner scroll works when container is constrained */ .welcome-main .main > #view-menu, .welcome-main .main > #view-about { overflow: auto; /* keep the inner content padded while allowing the scrollbar to align with the right edge of the parent window */ padding: 20px 20px 0 20px; box-sizing: border-box; height: 100%; } /* Menu item icon styles for the welcome pane */ .welcome-main .menu-item{ display:flex; align-items:center; gap:8px; padding:6px 0; color:inherit; text-decoration:none; cursor:pointer; } .welcome-main .menu-item:hover{ opacity:0.95 } .welcome-main .menu-icon{ width:50px; height:50px; display:inline-block; object-fit:contain } /* Titlebar button images (scoped to winform) */ .winform .win-btn{ /* ensure image sizing stays consistent */ background-size:18px 18px !important } .winform .win-btn img.btn-icon{ width:16px; height:16px; display:block } .winform .win-btn{ display:flex; align-items:center; justify-content:center } /* Toolbar icon sizing and spacing */ .toolbar_icon{ display:flex; gap:6px; align-items:center; padding:4px } .toolbar-btn{ background:transparent; border:none; padding:4px; cursor:pointer } .toolbar-icon-img{ width:18px; height:18px; display:block;} .toolbar-label{ margin-left:6px; font-size:12px; font-family: var(--ui-font); color:#00136b; display:inline-flex; align-items:center } /* Folder + thumbnail grouping beside forward button */ .folder_thumb{ display:flex; align-items:center; gap:8px; padding:0 6px } .folder_thumb .toolbar-icon-img{ width:18px; height:18px } .folder_thumb .dropdown-icon{ width:12px; height:12px } .folder_thumb .vertical_line.small{ width:1px; background:#cac6af; height:18px; margin:0 6px } /* Thumbnail icon placed after folders icon */ .folders .thumbnail-icon{ width:18px; height:18px; margin-left:8px } .folders .dropdown-icon{ margin-left:6px } .toolbar-btn:focus{ outline:2px solid rgba(0,0,0,0.2) } /* Scoped toolbar styles adapted from provided layout -- applied only inside .winform */ .winform .topwindowsbar { display: flex; height: 32px; flex-direction: row; border-bottom: 2px solid rgba(0,0,0,0.1); } .winform .winlogo{ width:55px; height:100%; margin-right:8px; display:block; object-fit:contain } .winform .toolbar{ display:flex; align-items:center; justify-content:flex-start; height:100%; width:100%; background-color:#ede9d3; border-right:1px solid rgba(0,0,0,0.1); padding-left:2px } .winform .toolbaritem{ cursor:default; font-size:13px; padding:6px; border:1px solid transparent } .winform .toolbaritem:hover{ border-left:1px solid white; border-top:1px solid white; box-shadow:1px 1px #b9b6aa } .winform .toolbaritem:active{ border-right:1px solid white; border-bottom:1px solid white; box-shadow:-1px -1px #b9b6aa } .winform .toolbar_icon{ display:flex; flex-direction:row; background:#ede9d3; height:35px; align-items:center; padding:5px } .winform .bottomwindowsbar{ display:flex; flex-direction:row; height:24px; border-top:2px solid rgba(0,0,0,0.1); background:#ede9d3 } .winform .forward{ display:flex; align-items:center } /* forward disabled/enabled states */ .winform .forward.forward_disabled{ filter:grayscale(100%); cursor:default } .winform .forward.forward_enabled{ filter:none; cursor:pointer } .winform .back_disabled{ display:flex; align-items:center; margin:0 5px; height:40px; filter:grayscale(100%); border:1px solid transparent } .winform .back_enabled{ display:flex; align-items:center; cursor:pointer; border:1px solid transparent; height:40px; padding:5px; border-radius:5px } .winform .back_enabled > .toolbar-icon-img { margin-right: 2px } .winform .back_enabled:hover{ filter:brightness(1.05); border:1px solid #c2c2b7; box-shadow:inset 0px -6px 6px -6px #999999 } .winform .button_line{ width:1px; border:0; height:35px } .winform .back_enabled:hover > .button_line{ background-color:#c2c2b7 } .winform .search, .winform .folders{ display:flex; align-items:center } .winform .go{ padding:0 5px; display:flex; width:100%; align-items:stretch } .winform .goIcon:hover, .winform .dropdownIcon:hover{ filter:brightness(1.1) } .winform .addressbar{ display:flex; background:white; border:1px solid rgba(0,0,0,0.2); width:100%; align-items:center; margin:0 5px; justify-content:space-between } /* Ensure Address label, addressbar, and Go button match the bottom bar height */ .winform .go { align-items:stretch; } .winform .go > p, .winform .go > .addressbar, .winform .go > .goIcon { height: 100%; display: flex; align-items: center; } .winform .addressbar { padding: 0 8px; } .winform .go > p { font-size: 11px; margin: 0 8px; padding: 0 4px; } .winform .go > .goIcon { padding: 0 8px; margin-left: 8px; cursor: pointer; } .winform .addressbar span { font-size: 11px !important; color: #7F7F7F; font-style: italic; line-height: 1 !important; } /* Dropdown arrow icon sizing */ .winform .dropdown-icon, .toolbar_icon .dropdown-icon{ width: 6px; height: 6px; display: inline-block; vertical-align: middle; margin-left: 6px; } /* Go button with swap images for hover */ .goBtn{ background: transparent; border: 0; padding: 2px 6px; display:flex; align-items:center; gap:6px; cursor:pointer } .goBtn{ height:100%; } .goBtn .go-img{ width:18px; height:18px; display:inline-block } .goBtn .go-img.hover{ display:none } .goBtn:hover .go-img.default{ display:none } .goBtn:hover .go-img.hover{ display:inline-block } .goBtn .goIcon{ font-size:11px; margin:0; padding:0 } .winform .vertical_line{ border-left:1px solid #cac6af; height:100%; margin:0 8px } .winform .win-btn.minimise{background-image: url('../assets/minimise.png')} .winform .win-btn.minimise:hover{background-image: url('../assets/minimise_hover.png')} .winform .win-btn.maximise{background-image: url('../assets/maximise.png')} .winform .win-btn.maximise:hover{background-image: url('../assets/maximise_hover.png')} .winform .win-btn.close{background-image: url('../assets/close.png')} .winform .win-btn.close:hover{background-image: url('../assets/close_hover.png')} .winform.hidden{display:none} /* Fullscreen variant for winform (used by maximise button) */ .winform.fullscreen{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; bottom:var(--startbar-height) !important; /* leave room for startbar at bottom */ width:100% !important; height:calc(100vh - var(--startbar-height)) !important; border-radius:0 !important; z-index:900 !important; } .winform.fullscreen .windowsbody{height:calc(100% - 35px) !important} /* When a window is fullscreen, remove the extra bottom padding so the blue outer border doesn't appear thicker than intended. This keeps the thin border at default size while still allowing a small inner padding at normal window sizes. */ .winform.fullscreen .windowborder{padding-bottom:0 !important} /* Ensure Work view panels expand correctly when the parent winform is fullscreen */ .winform.fullscreen #view-work, .winform.fullscreen #view-work .main { height: calc(100% - 35px) !important; } .winform.fullscreen #view-work .leftpanel { height: 100% !important; } .winform.fullscreen #view-work .rightpanel { flex: 1 1 auto !important; width: auto !important; height: 100% !important; overflow: auto !important; } /* Aggressive fullscreen fixes to remove visible gaps */ .winform.fullscreen .windowborder { padding: 0 !important; } .winform.fullscreen .windowsbody { padding: 0 !important; } .winform.fullscreen #view-work { margin: 0 !important; padding: 0 !important; width: 100% !important; height: 100% !important; } .winform.fullscreen #view-work .main { gap: 0 !important; margin: 0 !important; padding: 0 !important; } .winform.fullscreen #view-work .leftpanel { border-right: 1px solid #ffffff33 !important; padding-left: 10px !important; padding-right: 10px !important; } .winform.fullscreen #view-work .rightpanel { padding-left: 10px !important; padding-right: 10px !important; } /* Additional fixes: remove background gutters and force rightpanel to fill width */ .winform.fullscreen .windowborder { background-color: rgb(8,49,217) !important; padding: 0 4px 0 4px !important; /* keep bottom padding at 0 so window sits flush with startbar */ } .winform.fullscreen .windowsbody { background: #fff !important; /* keep inner content white */ padding: 0 !important; } .winform.fullscreen .welcome-main .main, .winform.fullscreen .welcome-main .main > #view-menu, .winform.fullscreen .welcome-main .main > #view-about, .winform.fullscreen .welcome-main .main > #view-work, .winform.fullscreen #view-work .body, .winform.fullscreen .welcome-main .main .content { padding-bottom: 0 !important; margin-bottom: 0 !important; } .winform.fullscreen .welcome-main .main { overflow: auto !important; } .winform.fullscreen #view-work .rightpanel { padding: 0 !important; margin: 0 !important; width: calc(100% - 250px) !important; /* account for leftpanel width */ box-sizing: border-box !important; max-width: none !important; } /* Titlebar compatibility: copy music-player title style to existing .titlebar used by ER window */ .menu-bar { background: #eff0f1; padding: 2px 10px; font-size: 11px; display: flex; gap: 12px; border-bottom: 1px solid #ccc; } /* Menu item hover: subtle lift + shadow animation */ .menu-bar span{ display: inline-block; padding: 4px 8px; border-radius: 4px; transition: transform .1s cubic-bezier(.2,.8,.2,1), box-shadow .1s ease; position: relative; } .menu-bar span:hover{ box-shadow: 0 8px 20px rgba(0,0,0,0.20); filter: brightness(.95); z-index: 3; } /* Tab-bar (for browser tabs) */ .tab-bar { background: #dce4f1; padding-top: 5px; display: flex; padding-left: 8px; border-bottom: 1px solid #999; align-items: center; } /* Start Menu Item Styles (added) */ .Item { display: flex; flex-direction: row; height: 40px; align-items: center; margin: 0px 3px 0px 1px; cursor: default; padding: 4px 6px; } .Item:hover { background-color: #2f71cd; } .Item:hover p { color: white; background-color: #2f71cd; } .leftIcon, .rightIcon { width: 32px; height: 32px; flex-shrink: 0; margin-left: 8px; margin-right: 8px; } /* Ensure icons align vertically between left and right columns */ .leftmenu .Item img, .rightmenu .Item img { margin-left: 8px; } /* Unified text styles for start-menu items */ .Item p { margin: 0; font-family: var(--ui-font); font-size: 13px; color: #00136b; line-height: 1.1; } .subtitleONE { color: #6b6b6b; font-size: 8px; margin: 0; } .TextONE { font-weight: 700; } /* Make these menu items normal weight: Resume, Github, LinkedIn, Control Panel, Set Program Access, Printers and Faxes, Help & Support, Search, Run */ .TextTWO, .TextTHREE, .TextFOUR { font-weight: 400 !important; color: #00136b; } /* Keep the arrow aligned to the far right of the item */ .menu_arrow { border: 3.5px solid transparent; border-right: 0; border-left-color: #00136b; margin-left: auto; margin-right: 8px; } .Item:hover .menu_arrow { border-left-color: white; } /* --------- Custom Start Bar (bluebar) --------- */ /* Base Reset for bluebar elements (scoped) */ .bluebar, .bluebar * { box-sizing: border-box; } .bluebar { display: flex; justify-content: space-between; position: fixed; bottom: 0; right: 0; left: 0; height: var(--startbar-height); width: 100%; background: linear-gradient( rgb(31, 47, 134) 0px, rgb(49, 101, 196) 3%, rgb(54, 130, 229) 6%, rgb(68, 144, 230) 10%, rgb(56, 131, 229) 12%, rgb(43, 113, 224) 15%, rgb(38, 99, 218) 18%, rgb(35, 91, 214) 20%, rgb(34, 88, 213) 23%, rgb(33, 87, 214) 38%, rgb(36, 93, 219) 54%, rgb(37, 98, 223) 86%, rgb(36, 95, 220) 89%, rgb(33, 88, 212) 92%, rgb(29, 78, 192) 95%, rgb(25, 65, 165) 98% ); z-index: 5000; } .startbtn, .startbtn_active { width: 120px; height: 35px; background-repeat: no-repeat; background-size: cover; outline: none; cursor: pointer; } .startbtn { background-image: url('../assets/xp_btn_norm.png'); } .startbtn:hover { background-image: url('../assets/xp_btn_hover.png'); } .startbtn:active, .startbtn_active { background-image: url('../assets/xp_btn_clicked.png'); } .tabbar { display: flex; justify-content: flex-start; align-items: center; width: 80%; height: 100%; } /* Task button design provided by user: exact styles requested */ .tab_container { text-overflow: ellipsis; position: relative; display: flex; flex: 2 2 0%; flex-direction: row; align-items: center; margin-top: 2px; background-color: rgb(60, 129, 243); box-shadow: rgb(0 0 0 / 30%) -1px 0px inset, rgb(255 255 255 / 20%) 1px 1px 1px inset; max-width: 200px; height: 80%; cursor: default; border-radius: 2px; overflow: hidden; white-space: nowrap; } .tab_container_focused { text-overflow: ellipsis; position: relative; display: flex; flex: 2 2 0%; flex-direction: row; align-items: center; margin-top: 2px; background-color: rgb(30, 82, 183); box-shadow: rgb(0 0 0 / 20%) 0px 0px 1px 1px inset, rgb(0 0 0 / 70%) 1px 0px 1px inset; max-width: 200px; height: 80%; cursor: default; border-radius: 2px; overflow: hidden; white-space: nowrap; } .tab_container_focused:hover { filter: brightness(120%); } .tab_container:hover { filter: brightness(120%); } .tab_container:active { background-color: rgb(30, 82, 183); box-shadow: rgb(0 0 0 / 20%) 0px 0px 1px 1px inset, rgb(0 0 0 / 70%) 1px 0px 1px inset; } .tab_text { color: white; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tab_icon { margin: 0 10px; } .icontray { width: 170px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 10px; background: linear-gradient( rgb(12, 89, 185) 1%, rgb(19, 158, 233) 6%, rgb(24, 181, 242) 10%, rgb(19, 155, 235) 14%, rgb(18, 144, 232) 19%, rgb(13, 141, 234) 63%, rgb(13, 159, 241) 81%, rgb(15, 158, 237) 88%, rgb(17, 155, 233) 91%, rgb(19, 146, 226) 94%, rgb(19, 126, 215) 97%, rgb(9, 91, 201) 100% ); box-shadow: rgb(24 187 255) 1px 0px 1px inset; color: white; font-family: var(--ui-font); font-size: 12px; } .iconrow { display: flex; flex-direction: row; align-items: center; width: 90px; gap: 6px; } /* Responsive */ @media screen and (max-width: 903px) { .icontray { width: 270px; } } /* end bluebar */ /* --------- Start Menu Styles --------- */ .startmenu { position: absolute; left: 0px; bottom: var(--startbar-height); width: 440px; height: 600px; display: flex; flex-direction: column; background-color: rgb(66, 130, 214); border-top-left-radius: 5px; border-top-right-radius: 5px; align-items: center; box-shadow: rgb(0 0 0 / 50%) 2px 4px 2px; font-family: var(--ui-font); z-index: 1300; } .menutopbar { display: flex; align-items: center; width: 100%; height: 12%; padding: 6px 5px 5px; background: linear-gradient(rgb(24, 104, 206) 0%, rgb(14, 96, 203) 12%, rgb(71, 145, 235) 100%); border-top-left-radius: 5px; border-top-right-radius: 5px; overflow: hidden; } .menu { display: flex; width: 100%; height: 79%; background-color: white; } .menubtmbar { display: flex; align-items: center; justify-content: flex-end; width: 100%; height: 8%; background: linear-gradient(rgb(66, 130, 214) 0%, rgb(15, 97, 203) 88%); } .greyhr { width: 100%; height: 2px; background: linear-gradient(to right, transparent 0%, #d2d2d2 50%, transparent 100%); border: 0; } .orangehr { width: 100%; height: 4px; background: linear-gradient(to right, transparent 10%, orange 50%, transparent 100%); } .bluehr { width: 100%; height: 3px; background: linear-gradient(to right, transparent 0%, rgba(135, 179, 226, 0.71) 50%, transparent 100%); border: 0; } .whitehr { width: 97%; height: 3px; background: #6fb1f8; border: 0; } .allprograms { display: flex; justify-content: center; align-items: center; font-weight: 700; height: 30px; margin: 3px; cursor: default; } .allprograms:hover { color: white; background-color: #2f71cd; } .systemBtn { display: flex; align-items: center; color: white; margin: 0 5px; padding: 0 5px; cursor: default; font-size: 12px; } .systemBtn:hover { border-radius: 5px; background-color: #2f71cd; } .systemBtnIcon { border-radius: 3px; margin-right: 3px; } /* hide startmenu by default using existing .hidden class */ .startmenu{ transition: transform .18s cubic-bezier(.2,.9,.2,1), opacity .18s ease; opacity: 1; transform-origin: left bottom; transform: translateY(0) scale(1); visibility: visible; } /* closed state: keep in DOM but hidden and non-interactive so CSS transition can play */ .startmenu.hidden{ opacity: 0; transform: translateY(10px) scale(0.96); pointer-events: none; visibility: hidden; } /* end startmenu */ .tab { background: #f0f0f0; border: 1px solid #999; border-bottom: none; padding: 5px 15px; font-size: 11px; border-radius: 4px 4px 0 0; display: flex; align-items: center; gap: 5px; min-width: 120px; } .tab.active { background: #fff; position: relative; top: 1px; z-index: 2; } .plus-tab { padding: 5px 10px; background: #ccc; border: 1px solid #999; border-bottom: none; margin-left: 2px; cursor: pointer; } /* Navbar (address/search bar) */ .navbar { background: var(--toolbar-bg); padding: 5px 10px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #999; } .nav-btn { width:28px; height:28px; background:#fff; border:1px solid #999; border-radius:50%; display:flex; justify-content:center; align-items:center; cursor:pointer; font-size:18px; } .url-bar { flex-grow:1; height:22px; border:1px solid #999; padding:0 8px; font-size:12px; display:flex; align-items:center; background:#fff; } .search-bar { width:180px; height:22px; border:1px solid #999; background:#fff; display:flex; align-items:center; padding:0 5px; } .browser-content { flex-grow:1; background:#fff; padding:12px; overflow:auto; } /* Remove the old CSS play triangle */ .wmp-icon-small::after { display: none; } /* New class for an SVG icon in the title bar */ .wmp-icon-svg{ width:18px; height:18px; margin-right:8px; display:block; object-fit:contain; } .window-controls{margin-left:auto;display:flex;gap:3px} .win-btn{width:22px;height:22px;border:1px solid rgba(255,255,255,0.65);border-radius:3px;background:linear-gradient(to bottom,#cbe9ff 0%, #6fb8ff 50%, #2b6fe6 100%);color:white;display:flex;justify-content:center;align-items:center;cursor:pointer;font-size:14px;transition:transform .1s ease, box-shadow .1s ease} .win-btn.close{background:linear-gradient(to bottom,#ffd1d1 0%, #e04343 50%, #b82222 100%)} .menu-bar{background:#fff;padding:4px 12px;font-size:11px;display:flex;gap:15px;border-bottom:1px solid #999} .wmp-content{flex-grow:1;background:var(--wmp-bg);display:flex;padding:10px;gap:5px} .sidebar{width:140px;display:flex;flex-direction:column;gap:4px;padding-top:5px} .tab{padding:12px 10px;font-size:11px;font-weight:bold;color:#000;background:linear-gradient(to bottom,#e6effb,#c6d9f7);border:1px solid #9bbbf7;text-align:left;cursor:pointer;transition:all 0.2s} .tab:hover{ background:#f7fbff; box-shadow:0 8px 18px rgba(0,0,0,0.14); filter: brightness(.985); z-index:10 } .tab.active{background:#fff;border-right:none;transform:none;box-shadow:none} .player-main{flex-grow:1;display:flex;flex-direction:column} .video-container{flex-grow:1;background:#000;border:2px solid #555;border-radius:4px 4px 0 0;overflow:hidden;position:relative} .progress-area{height:35px;background:#222;display:flex;align-items:center;padding:0 12px;gap:15px;border:2px solid #555;border-top:none;border-radius:0 0 4px 4px} /* Seek / duration bar - cross-browser visuals using CSS variables */ .seek-bar{flex-grow:1;appearance:none;height:6px;background:linear-gradient(to right,var(--xp-blue) var(--range-progress),#444 var(--range-progress));border-radius:3px;outline:none;cursor:pointer} .seek-bar::-webkit-slider-runnable-track{background:transparent;height:6px;border-radius:3px} .seek-bar::-moz-range-track{background:#444;height:6px;border-radius:3px} .seek-bar::-moz-range-progress{background:var(--xp-blue);height:6px;border-radius:3px} input[type="range"]::-webkit-slider-thumb{appearance:none;height:14px;width:14px;background:#fff;border:1px solid #888;border-radius:50%;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.5);margin-top:-4px} .time-display{color:#fff;font-size:11px;font-family: var(--ui-font);min-width:35px} .control-panel{height:100px;background:linear-gradient(to bottom,#d6e4f9 0%,#a4bedb 50%,#d6e4f9 100%);border-top:1px solid #778;display:flex;align-items:center;padding:0 30px} .transport-group{display:flex;align-items:center;gap:15px} .btn-main{width:55px;height:55px;background:linear-gradient(to bottom,#cbe9ff 0%, #6fb8ff 50%, #2b6fe6 100%);border:1px solid rgba(68,68,85,0.6);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s ease, box-shadow .12s ease;box-shadow:0 3px 6px rgba(0,0,0,0.28)} .btn-main:hover{ box-shadow:0 12px 26px rgba(0,0,0,0.30); filter: brightness(.95); } .btn-small{width:36px;height:36px;background:linear-gradient(to bottom,#cbe9ff 0%, #6fb8ff 50%, #2b6fe6 100%);border:1px solid rgba(119,119,119,0.6);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:box-shadow .12s ease, filter .08s ease} .btn-small:hover{ box-shadow:0 10px 20px rgba(0,0,0,0.24); filter: brightness(.95); } .volume-section{margin-left:auto;display:flex;align-items:center;gap:12px} .vol-slider{width:120px;appearance:none;height:6px;background:linear-gradient(to right,var(--xp-blue) var(--vol-progress),var(--xp-grey) var(--vol-progress));border-radius:3px;outline:none} .vol-slider::-webkit-slider-runnable-track{background:transparent;height:6px;border-radius:3px} .vol-slider::-moz-range-track{background:var(--xp-grey);height:6px;border-radius:3px} .vol-slider::-moz-range-progress{background:var(--xp-blue);height:6px;border-radius:3px} .start-menu{position:fixed;left:8px;bottom:54px;width:220px;background:linear-gradient(#ffffff,#e6eef8);border:3px solid #000;padding:8px;z-index:70} .start-menu ul{list-style:none;margin:0;padding:0} .start-menu li{margin:6px 0} .start-menu button{width:100%;text-align:left;padding:6px;border:2px solid #fff;background:#000;cursor:pointer} /* Click animations: XP-style float-out and zoom-out for clicked items */ .xp-click { animation-duration: 320ms; animation-timing-function: cubic-bezier(.2,.8,.2,1); animation-fill-mode: forwards; pointer-events: none; } @keyframes xp-float-out { 0% { transform: translateY(0) scale(1); opacity: 1; } 40% { transform: translateY(-6px) scale(1.04); } 100% { transform: translateY(-18px) scale(0.96); opacity: 0; } } @keyframes xp-zoom-out { 0% { transform: scale(1); opacity: 1; } 45% { transform: scale(1.12); } 100% { transform: scale(0.85); opacity: 0; } } .xp-click--float { animation-name: xp-float-out; } .xp-click--zoom { animation-name: xp-zoom-out; } /* Quick pressed feedback for buttons and controls */ .press-feedback { transition: transform .08s ease; } .press-feedback:active { transform: translateY(2px) scale(0.98); } @media (max-width:480px){ .taskbar{height:60px} .start-button{padding:8px} } /* -------- My Work view styles (from provided layout) -------- */ .work-main { height: 100%; display: flex; flex-direction: row; overflow: auto; } .work-main .leftpanel { width: 300px; max-height: 100%; background: linear-gradient(rgb(116, 138, 255) 0%, rgb(64, 87, 211) 100%); padding: 10px; overflow-y: auto; } .work-main .leftpanel::-webkit-scrollbar { width: 15px; } .work-main .leftpanel::-webkit-scrollbar-thumb { border-radius: 10px; border: 2px solid #ddd; } .work-main .rightpanel { display: flex; flex-direction: column; align-items: center; padding: 10px; width: 100%; overflow-y: auto; } .content_tech { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;} .tech_badge { display: inline-block; margin: 0; } .work-main .header { display: flex; align-items: center; margin-bottom: 20px; width: 100%; padding: 10px; gap: 10px; color: white; background-color: #6687ff; border-radius: 15px; box-shadow: 2px 2px #959393; } .work-main .body { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 10px; gap: 10px; background-color: #ddd; border-radius: 15px; font-size: 16px; margin: 10px 0; box-shadow: 2px 2px #959393; } .github_button { display: flex; align-items: center; justify-content: center; padding: 10px; width: 210px; gap: 10px; height: 60px; background-color: #333; color: #fff; border-radius: 10px; font-size: 18px; font-weight: bold; text-decoration: none; transition: all 0.2s ease-in-out; } .github_button:hover { background-color: #fff; border: 1px solid #333; color: #000; cursor: pointer; } .github_icon { cursor: default; } .accordion_content_item { margin: 5px 0px; cursor: pointer; } .accordion_content_item:hover { text-decoration: underline; } .accordion_content_text { font-size: 12px; line-height: 14px; color: rgb(12, 50, 125); display: flex; align-items: center; gap: 5px; } .win_accordion_title { font-weight: bold; color: white; padding: 5px 0; } @media (max-width:900px){ .work-main { flex-direction: column; } .work-main .leftpanel { width: 100%; max-height: 200px; } } /* User-provided left/right panel styles (scoped to #view-work) */ #view-work .leftpanel { width: 600px; max-height: 100%; background: linear-gradient(rgb(116, 138, 255) 0%, rgb(64, 87, 211) 100%); padding: 10px; overflow-y: auto; } #view-work .leftpanel::-webkit-scrollbar { width: 15px; } #view-work .leftpanel::-webkit-scrollbar-thumb { border-radius: 10px; border: 2px solid #ddd; } #view-work .rightpanel::-webkit-scrollbar-button { display: none; } #view-work .rightpanel { display: flex; flex-direction: column; align-items: center; padding: 10px; width: 100%; overflow-y: auto; } /* Align the headings and the tech badges area so they share the same horizontal margins and appear centered under the same column width. */ #view-work .work-headings, #view-work .content_tech { box-sizing: border-box; max-width: 920px; /* keeps both areas the same centered column */ width: 100%; margin: 0 auto 12px; /* center and give a small gap below */ padding: 0 20px; /* inner padding to match overall page gutters */ } #view-work .content_tech { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: 100%; } #view-work .tech_badge { display: inline-block; margin: 0; transition: transform .18s ease, box-shadow .18s ease; will-change: transform; cursor: default; } #view-work .tech_badge:hover { transform: translateY(-8px); box-shadow: 0 10px 22px rgba(2,8,23,0.18); } /* Apply same behavior to any other .content_tech usage */ .content_tech { justify-content: center; gap:4px } /* Center headings inside the Work welcome area */ #work-welcome h2, #work-welcome h5, #work-welcome h6 { text-align: center; } .tech_badge { transition: transform .18s ease, box-shadow .18s ease; will-change: transform } .tech_badge:hover { transform: translateY(-8px); box-shadow: 0 10px 22px rgba(2,8,23,0.18); cursor: default } #view-work .header { display: flex; align-items: center; margin-bottom: 20px; width: 100%; padding: 10px; gap: 10px; color: white; background-color: #6687ff; border-radius: 15px; box-shadow: 2px 2px #959393; } #view-work .body { background-color: #d3d3d3; /* Classic Windows XP Grey */ border-radius: 20px; width: 90%; max-width: 800px; padding: 40px; box-shadow: none; /* 2nd pic doesn't have a heavy shadow */ border: 1px solid #999; text-align: center; color: #000; /* Darker text for readability */ } #view-work .github_button { display: flex; align-items: center; justify-content: center; padding: 10px; width: 210px; gap: 10px; height: 60px; background-color: #333; color: #fff; border-radius: 10px; font-size: 18px; font-weight: bold; text-decoration: none; transition: all 0.2s ease-in-out; } #view-work .github_button:hover { background-color: #fff; border: 1px solid #333; color: #000; cursor: pointer; } #view-work .github_icon { cursor: default; } #view-work .accordion { background: #ffffff33; /* Semi-transparent white box for the category */ border-radius: 5px; padding-bottom: 5px; } #view-work .accordion_content_item { margin: 5px 0px; cursor: pointer; } #view-work .accordion_content_item:hover { text-decoration: underline; color: #0000ff; /* Blue hover link */ } #view-work .accordion_content_text { font-size: 13px; color: #000; /* Black text like the 2nd pic */ padding: 5px 15px; display: flex; align-items: center; gap: 8px; } /* Mock Accordion Styling */ #view-work .win_accordion_title { font-weight: bold; color: #2d3748; padding: 5px 10px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.4) 100%); border-radius: 5px 5px 0 0; margin-bottom: -10px; } /* This is the parent container in your HTML */ #app-container { display: flex; flex-direction: column; height: 100%; width: 100%; position: relative; overflow: hidden; } /* Ensure both views are capable of filling the screen */ #view-menu, #view-work, #view-about { width: 100%; height: 100%; display: flex; flex-direction: column; } /* Specifically for the split-screen Work view */ #view-work .main { display: flex; flex-direction: row; /* Sidebar on left, Content on right */ flex: 1; /* Fills remaining vertical space */ width: 100%; align-items: stretch; } /* Force hide class */ .hidden { display: none !important; } /* Final gapless overrides requested by user */ .welcome-page, .accordion_content, .welcome-main, #app-container { padding: 0 !important; margin: 0 !important; gap: 0 !important; /* Removes the space between children */ height: 100% !important; display: flex !important; flex-direction: column !important; } #view-work .main { display: flex !important; flex-direction: row !important; gap: 0 !important; /* This pulls the panels together */ padding: 0 !important; margin: 0 !important; height: 100% !important; width: 100% !important; align-items: stretch !important; } #view-work .leftpanel { width: 250px !important; min-width: 250px !important; margin: 0 !important; padding: 15px 10px !important; /* Interior padding is fine */ background: linear-gradient(to bottom, #748aff 0%, #4057d3 100%) !important; height: 100% !important; } #view-work .rightpanel { flex: 1 !important; margin: 0 !important; padding: 20px !important; height: 100% !important; width: 100%; /* Change this to match the sidebar blue or a consistent grey */ background-color: #fefeff !important; display: flex !important; flex-direction: column !important; align-items: center !important; } #view-work #work-welcome { width: 100%; /* Allows it to expand with the window */ background-color: #d3d3d3; /* The gray background from your image */ padding: 40px; border-radius: 20px; border: 1px solid #808080; text-align: center; } /* Strong overrides: touch all edges, remove gaps, and ensure equal-height split */ .welcome-page, .accordion_content, .welcome-main, #app-container { padding: 0 !important; margin: 0 !important; height: 100% !important; display: flex; flex-direction: column; } #view-work { flex: 1; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; background-color: #ece9d8; /* XP window grey */ } #view-work .main { display: flex !important; flex-direction: row !important; height: 100% !important; width: 100% !important; align-items: stretch !important; } #view-work .leftpanel { width: 250px; min-width: 250px; margin: 0 !important; padding: 10px; height: 100% !important; background: linear-gradient(to bottom, #748aff 0%, #4057d3 100%); } #view-work .rightpanel { flex: 1; height: 100% !important; margin: 0 !important; padding: 20px; background-color: #d2d7ff; } #view-work .main > * { box-sizing: border-box; } /* User requested: zero-out containers and force flush two-column layout for Work view */ .welcome-main, #app-container, .accordion_content { margin: 0 !important; padding: 0 !important; height: 100% !important; width: 100% !important; display: flex; flex-direction: column; } /* Force view-work to be perfectly flush against the address bar and edges */ #view-work { flex: 1; /* Stretch to fill the bottom */ width: 100%; margin: 0 !important; padding: 0 !important; background-color: #748aff; /* Matches the sidebar blue */ } /* Ensure the split-screen main area fills everything */ #view-work .main { display: flex; flex-direction: row; height: 100% !important; width: 100% !important; align-items: stretch; /* Forces Left and Right panels to be same height */ } #view-work .leftpanel { width: 250px; min-width: 250px; height: 100%; /* Stretch to bottom */ background: linear-gradient(rgb(116, 138, 255) 0%, rgb(64, 87, 211) 100%); padding: 15px 10px; /* Internal padding is okay, but margins are not */ margin: 0 !important; border-right: 1px solid #ffffff33; } #view-work .rightpanel { flex: 1; height: 100%; background-color: #d2d7ff; /* A slightly lighter XP blue for the main area */ margin: 0 !important; padding: 20px; overflow-y: auto; } /* Target the address bar container to remove bottom spacing */ .address-bar, .window-nav { margin-bottom: 0 !important; } /* Left panel accordion layout overrides (added per user request) */ .leftpanel { display: flex !important; flex-direction: column !important; height: 100% !important; padding: 10px !important; /* Keep a little internal padding */ gap: 10px !important; /* Space between the three boxes */ } .accordion-group { flex: 1 !important; /* This is the magic: it forces equal growth */ display: flex; flex-direction: column; background-color: rgba(255, 255, 255, 0.2); /* Optional: slight XP tint */ border-radius: 4px 4px 0 0; overflow: hidden; } .win_accordion_title { /* Ensure the title doesn't stretch, only the content area below it */ flex: 0 0 auto; padding: 5px 10px; font-weight: bold; color: white; background: linear-gradient(to right, #9bb2ff, #748aff); /* XP Title gradient */ display: flex; gap: 175px; align-items: center; } .accordion_content_item { flex: 1 !important; /* Makes the light blue area fill the rest of the box */ background-color: #d6e2ff; /* Classic light blue inner box */ padding: 10px; } /* ============================================================ FINAL SAFE PATCH - Work view layout/gap fix Purpose: 1. Prevent #view-menu, #view-about, and #view-work from stacking vertically. 2. Remove the blue gutter/gap on the right side of the Work panel. 3. Keep the left accordion panel fixed and the right panel fluid. ============================================================ */ .winform .welcome-page, .winform .welcome-page > .accordion_content, .winform .welcome-main, .winform #app-container { width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .winform #app-container { position: relative !important; display: block !important; background: #6375d6 !important; } /* Keep views layered in the same space instead of stacking one after another. */ .winform #app-container > #view-menu, .winform #app-container > #view-about, .winform #app-container > #view-work { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; box-sizing: border-box !important; } /* Hidden must always win. */ .winform #app-container > .hidden, .winform #view-menu.hidden, .winform #view-about.hidden, .winform #view-work.hidden { display: none !important; } /* Menu and About keep their original blue portfolio look. */ .winform #view-menu:not(.hidden), .winform #view-about:not(.hidden) { display: block !important; overflow: auto !important; padding: 20px !important; background: #6375d6 !important; } /* Work view: exact split panel layout. */ .winform #view-work:not(.hidden) { display: flex !important; flex-direction: column !important; overflow: hidden !important; padding: 0 !important; background: #d2d7ff !important; } .winform #view-work .main { display: flex !important; flex-direction: row !important; flex: 1 1 auto !important; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; overflow: hidden !important; align-items: stretch !important; background: #d2d7ff !important; } .winform #view-work .leftpanel { flex: 0 0 250px !important; width: 250px !important; min-width: 250px !important; max-width: 250px !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 10px !important; overflow-y: auto !important; overflow-x: hidden !important; background: linear-gradient(to bottom, #748aff 0%, #4057d3 100%) !important; border-right: 1px solid rgba(255,255,255,0.35) !important; box-sizing: border-box !important; } .winform #view-work .rightpanel { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 20px !important; overflow-y: auto !important; overflow-x: hidden !important; background: #d2d7ff !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: center !important; } .winform #view-work #work-welcome { width: min(800px, 100%) !important; max-width: 800px !important; margin: 0 auto !important; box-sizing: border-box !important; background: #d3d3d3 !important; border: 1px solid #808080 !important; border-radius: 20px !important; padding: 40px !important; color: #000 !important; text-align: center !important; } .winform.fullscreen #view-work, .winform.fullscreen #view-work .main, .winform.fullscreen #view-work .leftpanel, .winform.fullscreen #view-work .rightpanel { height: 100% !important; } @media (max-width: 900px) { .winform #view-work .main { flex-direction: column !important; } .winform #view-work .leftpanel { flex: 0 0 200px !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 200px !important; } } /* ========================================================= Welcome menu cleanup: remove blue tile behind left links and align the right-side menu items with the left column. Keep this at the very bottom of styles.css. ========================================================= */ #view-menu .content { display: grid !important; grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr) !important; column-gap: 70px !important; row-gap: 0 !important; align-items: start !important; width: 100% !important; max-width: 840px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } #view-menu .leftpanel, #view-menu .rightpanel { display: flex !important; flex-direction: column !important; gap: 22px !important; width: 100% !important; max-width: none !important; min-width: 0 !important; flex: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } #view-menu .menu-item { display: grid !important; grid-template-columns: 58px 1fr !important; align-items: center !important; gap: 12px !important; min-height: 50px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; color: inherit !important; text-decoration: none !important; } #view-menu .menu-icon { width: 50px !important; height: 50px !important; object-fit: contain !important; display: block !important; } @media (max-width: 850px) { .winform #view-about .about-stats { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 700px) { #view-menu .content { grid-template-columns: 1fr !important; row-gap: 22px !important; } } /* ============================================================ FINAL FULLSCREEN WINFORM FIX Fixes the large blue bottom border/gap when My Computer is maximized. Keep this block at the VERY END of styles.css. ============================================================ */ .winform.fullscreen { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: var(--startbar-height) !important; width: 100vw !important; height: calc(100vh - var(--startbar-height)) !important; max-width: none !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; z-index: 4000 !important; } .winform.fullscreen .titlebar { flex: 0 0 35px !important; height: 35px !important; min-height: 35px !important; max-height: 35px !important; border-radius: 0 !important; box-sizing: border-box !important; } .winform.fullscreen .windowborder { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; width: 100% !important; padding: 0 4px 4px 4px !important; margin: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; box-sizing: border-box !important; background-color: rgb(8,49,217) !important; } .winform.fullscreen .windowsbody { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; width: 100% !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; box-sizing: border-box !important; background: #fff !important; } .winform.fullscreen .topwindowsbar { flex: 0 0 32px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; } .winform.fullscreen .toolbar_icon { flex: 0 0 35px !important; height: 35px !important; min-height: 35px !important; max-height: 35px !important; } .winform.fullscreen .bottomwindowsbar { flex: 0 0 24px !important; height: 24px !important; min-height: 24px !important; max-height: 24px !important; } .winform.fullscreen .welcome-page, .winform.fullscreen .welcome-page > .accordion_content, .winform.fullscreen .welcome-main, .winform.fullscreen #app-container { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } .winform.fullscreen #app-container { position: relative !important; display: block !important; } .winform.fullscreen #app-container > #view-menu, .winform.fullscreen #app-container > #view-about, .winform.fullscreen #app-container > #view-work { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; box-sizing: border-box !important; } .winform.fullscreen #view-menu:not(.hidden), .winform.fullscreen #view-about:not(.hidden) { display: block !important; overflow: auto !important; } .winform.fullscreen #view-work:not(.hidden) { display: flex !important; flex-direction: column !important; overflow: hidden !important; background: #d2d7ff !important; } .winform.fullscreen #view-work .main { flex: 1 1 auto !important; display: flex !important; flex-direction: row !important; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; overflow: hidden !important; align-items: stretch !important; box-sizing: border-box !important; } .winform.fullscreen #view-work .leftpanel { flex: 0 0 250px !important; width: 250px !important; min-width: 250px !important; max-width: 250px !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 10px !important; overflow-y: auto !important; overflow-x: hidden !important; box-sizing: border-box !important; } .winform.fullscreen #view-work .rightpanel { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 20px !important; overflow-y: auto !important; overflow-x: hidden !important; box-sizing: border-box !important; } /* Do not let the card force extra height that creates a bottom gutter. */ .winform.fullscreen #view-work #work-welcome { margin-top: 0 !important; margin-bottom: 0 !important; box-sizing: border-box !important; } @media (max-width: 900px) { .winform.fullscreen #view-work .main { flex-direction: column !important; } .winform.fullscreen #view-work .leftpanel { flex: 0 0 200px !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 200px !important; } } /* ============================================================ FINAL WELCOME MENU ALIGNMENT FIX Aligns "My Work" with "About Me" and "Send Me An Email" with "My GitHub". Keep this block at the VERY END of styles.css. ============================================================ */ .winform #view-menu .content { display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 90px !important; row-gap: 0 !important; align-items: start !important; width: 100% !important; max-width: 820px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } .winform #view-menu .leftpanel, .winform #view-menu .rightpanel { display: grid !important; grid-auto-rows: 50px !important; row-gap: 22px !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; gap: 22px !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } .winform #view-menu .rightpanel { padding-top: 0 !important; align-self: start !important; } .winform #view-menu .menu-item { display: grid !important; grid-template-columns: 58px 1fr !important; align-items: center !important; gap: 12px !important; height: 50px !important; min-height: 50px !important; max-height: 50px !important; padding: 0 !important; margin: 0 !important; line-height: 1.2 !important; background: transparent !important; color: inherit !important; text-decoration: none !important; } .winform #view-menu .menu-icon { width: 50px !important; height: 50px !important; object-fit: contain !important; display: block !important; } @media (max-width: 700px) { .winform #view-menu .content { grid-template-columns: 1fr !important; row-gap: 22px !important; } } /* ============================================================ ABOUT PAGE CONTENT LAYOUT ONLY This keeps your existing #view-about background color. ============================================================ */ .winform #view-about:not(.hidden) { display: block !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 35px 55px !important; box-sizing: border-box !important; } .winform #view-about .about-bootstrap-section { width: 100% !important; max-width: 1180px !important; margin: 0 auto !important; font-family: var(--ui-font) !important; } .winform #view-about .about-top { display: grid !important; grid-template-columns: 330px minmax(0, 1fr) !important; gap: 35px !important; align-items: start !important; } .winform #view-about .about-photo-wrap { width: 100% !important; } .winform #view-about .about-main-photo { width: 100% !important; max-width: 330px !important; height: 330px !important; object-fit: cover !important; display: block !important; border-radius: 0 !important; margin: 0 !important; } .winform #view-about .about-info h1 { margin: 0 0 22px 0 !important; font-size: 26px !important; line-height: 1.25 !important; font-weight: 700 !important; } .winform #view-about .about-intro { margin: 0 0 25px 0 !important; font-size: 17px !important; line-height: 1.55 !important; font-style: italic !important; text-align: left !important; } .winform #view-about .about-details { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 35px !important; margin-bottom: 28px !important; } .winform #view-about .about-detail-col p { margin: 0 0 24px 0 !important; font-size: 16px !important; line-height: 1.2 !important; text-align: left !important; } .winform #view-about .about-detail-col strong { font-weight: 700 !important; margin-right: 6px !important; } .winform #view-about .about-arrow { color: #2d3748 !important; font-size: 26px !important; font-weight: 400 !important; margin-right: 8px !important; line-height: 0 !important; vertical-align: -2px !important; } .winform #view-about .about-description { display: block !important; width: 100% !important; max-width: 760px !important; margin: 35px auto 0 auto !important; text-align: justify !important; text-justify: inter-word !important; hyphens: auto !important; font-size: 16px !important; line-height: 1.55 !important; } @media (max-width: 1000px) { .winform #view-about:not(.hidden) { padding: 35px 35px !important; } .winform #view-about .about-top { grid-template-columns: 280px minmax(0, 1fr) !important; gap: 25px !important; } .winform #view-about .about-main-photo { max-width: 280px !important; height: 280px !important; } } @media (max-width: 700px) { .winform #view-about:not(.hidden) { padding: 25px 20px !important; } .winform #view-about .about-top { grid-template-columns: 1fr !important; } .winform #view-about .about-main-photo { max-width: 100% !important; height: auto !important; } .winform #view-about .about-details { grid-template-columns: 1fr !important; gap: 0 !important; } .winform #view-about .about-description { max-width: 100% !important; padding: 0 10px !important; } } /* ============================================================ ABOUT SERVICES OFFERED SECTION ============================================================ */ .winform #view-about .about-services { width: 100% !important; max-width: 900px !important; margin: 45px auto 0 auto !important; box-sizing: border-box !important; } .winform #view-about .about-services h2 { margin: 0 0 14px 0 !important; text-align: center !important; font-size: 28px !important; line-height: 1.2 !important; font-weight: 700 !important; } .winform #view-about .about-services-description { max-width: 780px !important; margin: 0 auto 26px auto !important; text-align: center !important; font-size: 15px !important; line-height: 1.6 !important; } .winform #view-about .about-services-columns { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 32px !important; width: 100% !important; } .winform #view-about .about-services-columns ul { margin: 0 !important; padding-left: 22px !important; } .winform #view-about .about-services-columns li { margin-bottom: 18px !important; padding-left: 4px !important; font-size: 15px !important; line-height: 1.45 !important; } .winform #view-about .about-services-columns li::marker { color: #173b8f !important; } .winform #view-about .about-services-columns strong { display: block !important; margin-bottom: 4px !important; font-size: 16px !important; font-weight: 700 !important; } .winform #view-about .about-services-columns span { display: block !important; font-size: 14px !important; line-height: 1.45 !important; } /* Mobile */ @media (max-width: 700px) { .winform #view-about .about-services { max-width: 100% !important; padding: 0 10px !important; } .winform #view-about .about-services-columns { grid-template-columns: 1fr !important; gap: 0 !important; } } /* ============================================================ ABOUT STATS FINAL CLEAN VERSION 3 items above, 2 centered below, no icon circle ============================================================ */ .winform #view-about .about-stats { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 45px 35px !important; width: 100% !important; max-width: 900px !important; margin: 60px auto 0 auto !important; justify-content: center !important; align-items: center !important; box-sizing: border-box !important; } .winform #view-about .about-stat { display: flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; width: 100% !important; max-width: 240px !important; text-align: left !important; box-sizing: border-box !important; } .winform #view-about .about-stat:nth-child(1) { grid-column: 1 / span 2 !important; } .winform #view-about .about-stat:nth-child(2) { grid-column: 3 / span 2 !important; } .winform #view-about .about-stat:nth-child(3) { grid-column: 5 / span 2 !important; } .winform #view-about .about-stat:nth-child(4) { grid-column: 2 / span 2 !important; } .winform #view-about .about-stat:nth-child(5) { grid-column: 4 / span 2 !important; } .winform #view-about .about-stat-icon { width: 64px !important; height: 64px !important; min-width: 64px !important; flex: 0 0 64px !important; display: flex !important; align-items: center !important; justify-content: center !important; border: none !important; border-radius: 0 !important; background: transparent !important; overflow: visible !important; padding: 0 !important; box-sizing: border-box !important; font-size: 0 !important; line-height: 0 !important; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.35)) !important; } .winform #view-about .about-stat-icon img { width: 64px !important; height: 64px !important; max-width: 64px !important; max-height: 64px !important; object-fit: contain !important; display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } .winform #view-about .about-stat h2 { margin: -5px 0 8px 0 !important; font-size: clamp(34px, 4vw, 42px) !important; line-height: 1 !important; font-weight: 700 !important; white-space: nowrap !important; } .winform #view-about .about-stat p { margin: 0 !important; font-size: 15px !important; line-height: 1.35 !important; } /* Smaller Windows form: 2 columns and center the last stat */ @media (max-width: 850px) { .winform #view-about .about-stats { grid-template-columns: repeat(2, minmax(180px, 240px)) !important; max-width: 560px !important; gap: 35px 25px !important; } .winform #view-about .about-stat { grid-column: auto !important; } .winform #view-about .about-stat:nth-child(5) { grid-column: 1 / -1 !important; } } /* Very small Windows form: stack in one column */ @media (max-width: 560px) { .winform #view-about .about-stats { grid-template-columns: minmax(220px, 260px) !important; max-width: 280px !important; gap: 28px !important; } .winform #view-about .about-stat, .winform #view-about .about-stat:nth-child(5) { grid-column: auto !important; } } /* ============================================================ PROFILE PHOTO CAROUSEL - dots centered below image Uses unique class names to avoid old carousel indicator styles. ============================================================ */ .winform #view-about .about-photo-wrap { width: 300px !important; max-width: 300px !important; display: block !important; margin: 0 !important; padding: 0 !important; } .winform #view-about .profile-photo-carousel { width: 300px !important; max-width: 300px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; position: relative !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; background: transparent !important; cursor: pointer !important; user-select: none !important; touch-action: pan-y !important; } .winform #view-about .profile-photo-viewport { width: 300px !important; height: 300px !important; max-width: 300px !important; max-height: 300px !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; position: relative !important; background: #fff !important; flex: 0 0 auto !important; border-radius: 18px !important; } .winform #view-about .profile-photo-track { width: 100% !important; height: 100% !important; display: flex !important; flex-direction: row !important; transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) !important; will-change: transform !important; } .winform #view-about .profile-photo-slide { width: 100% !important; min-width: 100% !important; height: 100% !important; flex: 0 0 100% !important; overflow: hidden !important; position: relative !important; } .winform #view-about .profile-photo-slide .about-main-photo { width: 100% !important; max-width: none !important; height: 100% !important; object-fit: cover !important; display: block !important; border-radius: 18px !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; } .winform #view-about .profile-photo-dots { position: static !important; inset: auto !important; transform: none !important; z-index: auto !important; width: 300px !important; max-width: 300px !important; height: 12px !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 7px !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; line-height: 0 !important; } .winform #view-about .profile-photo-dot { appearance: none !important; -webkit-appearance: none !important; width: 8px !important; height: 8px !important; min-width: 8px !important; min-height: 8px !important; border-radius: 999px !important; border: 1px solid rgba(255, 255, 255, 0.9) !important; background: rgba(255, 255, 255, 0.55) !important; display: block !important; cursor: pointer !important; padding: 0 !important; margin: 0 !important; transition: width 0.25s ease, background 0.25s ease !important; } .winform #view-about .profile-photo-dot.active { width: 24px !important; background: #ffffff !important; } @media (max-width: 1000px) { .winform #view-about .about-photo-wrap, .winform #view-about .profile-photo-carousel, .winform #view-about .profile-photo-dots { width: 280px !important; max-width: 280px !important; } .winform #view-about .profile-photo-viewport { width: 280px !important; height: 280px !important; max-width: 280px !important; max-height: 280px !important; } } @media (max-width: 700px) { .winform #view-about .about-photo-wrap, .winform #view-about .profile-photo-carousel, .winform #view-about .profile-photo-dots { width: min(100%, 300px) !important; max-width: 300px !important; } .winform #view-about .profile-photo-viewport { width: 100% !important; height: auto !important; max-width: 300px !important; max-height: none !important; aspect-ratio: 1 / 1 !important; } } /* ============================================================ ABOUT PROFILE CAROUSEL ROUNDED IMAGE CORNERS Keep this at the very bottom so it overrides older square-image rules. ============================================================ */ .winform #view-about .profile-photo-viewport, .winform #view-about .profile-photo-slide, .winform #view-about .profile-photo-slide .about-main-photo { border-radius: 18px !important; } .winform #view-about .profile-photo-viewport, .winform #view-about .profile-photo-slide { overflow: hidden !important; } /* ============================================================ CONTACT ME OUTLOOK-STYLE COMPOSE FORM Scoped to #contact-window to avoid affecting desktop icons. ============================================================ */ .winform #contact-window .accordion_content, #contact-window .accordion_content { padding: 0 !important; background: #ede9d3 !important; overflow: hidden !important; } #contact-window .contact-compose { width: 100%; height: 100%; min-height: 0; font-family: var(--ui-font); color: #000; } #contact-window .contact-main { background-color: #ede9d3; height: 100%; width: 100%; padding: 0 6px 6px 6px; box-sizing: border-box; display: flex; flex-direction: column; min-height: 0; } #contact-window .contact-icons-toolbar { display: flex; flex-direction: row; background: #ede9d3; height: 50px; min-height: 50px; align-items: center; padding: 5px; box-sizing: border-box; gap: 2px; overflow-x: auto; overflow-y: hidden; } #contact-window .contact-toolbar-button { cursor: default; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid transparent; filter: brightness(1.05); font-family: var(--ui-font); font-size: 12px; color: #000; background: transparent; padding: 2px 6px; min-width: 48px; height: 44px; } #contact-window .contact-toolbar-button img { object-fit: contain; display: block; margin: 0 auto; } #contact-window .contact-toolbar-button p, #contact-window .contact-toolbar-button-disabled p { margin: 2px 0 0 0; line-height: 1; } #contact-window .contact-toolbar-button:hover:not(.contact-toolbar-button-disabled) { background: #f4f4ed; border-radius: 5px; border: 1px solid #cecec3; filter: brightness(1.02); } #contact-window .contact-toolbar-button:active:not(.contact-toolbar-button-disabled) { color: white; background: #e2e1d9; } #contact-window .contact-toolbar-button-disabled { color: grey; filter: grayscale(100%) brightness(0.9); pointer-events: auto; } #contact-window .contact-toolbar-button-disabled .contact-send-icon { filter: grayscale(100%) brightness(0.9); } #contact-window .contact-toolbar-button:not(.contact-toolbar-button-disabled) .contact-send-icon { filter: none; } #contact-window .contact-vertical-line { border-left: 1px solid #cac6af; height: 100%; margin: 0 8px; flex: 0 0 auto; } #contact-window .contact-compose-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; } #contact-window .contact-mailing { display: flex; flex-direction: row; background: #ede9d3; margin: 10px 5px; flex: 0 0 auto; } #contact-window .contact-mailing-text { display: flex; flex-direction: column; padding: 5px; gap: 5px; align-items: flex-start; flex: 0 0 auto; } #contact-window .contact-field-text { display: flex; flex-direction: row; align-items: center; font-size: 14px; height: 22px; white-space: nowrap; } #contact-window .contact-field-text img { margin: 0 4px; } #contact-window .contact-field-text p { margin: 0; } #contact-window .contact-mailing-fields { display: flex; flex-direction: column; padding: 1px 10px; width: 100%; gap: 4px; min-width: 0; } #contact-window .contact-textfield { height: 18px; box-shadow: inset 1px 1px 1px #aca899; width: 100%; font-family: var(--ui-font); font-size: 14px; color: black; border: 1px solid #7a7a7a; box-sizing: border-box; background: #fff; padding: 1px 4px; } #contact-window .contact-textfield:disabled { color: #555; background: #f5f5f5; cursor: default; } #contact-window .contact-richfield { cursor: default; flex: 1 1 auto; min-height: 0; width: 100%; padding: 0 5px 6px 5px; box-sizing: border-box; } #contact-window .contact-richtextbox { width: 100%; height: 100%; min-height: 180px; resize: none; font-size: 14px; font-family: var(--ui-font); box-shadow: inset 2px 2px 2px #888; color: black; border: 1px solid #7a7a7a; box-sizing: border-box; padding: 6px; background: #fff; } @media (max-width: 700px) { #contact-window .contact-icons-toolbar { height: 58px; min-height: 58px; } #contact-window .contact-mailing { margin: 8px 4px; } #contact-window .contact-mailing-text { padding-left: 0; } #contact-window .contact-field-text { font-size: 12px; } #contact-window .contact-textfield, #contact-window .contact-richtextbox { font-size: 12px; } } /* ============================================================ CONTACT WINDOW CLEANUP Contact Me no longer uses the Explorer toolbar/address rows, so the Outlook compose area fills the available window body. ============================================================ */ #contact-window .welcome-page, #contact-window .welcome-page > .accordion_content, #contact-window .contact-compose, #contact-window .contact-main { flex: 1 1 auto !important; height: 100% !important; min-height: 0 !important; } #contact-window .contact-main { padding-top: 4px !important; } #contact-window .contact-mailing { margin-top: 6px !important; } /* ============================================================ CONTACT ME - Check/Spelling state based on message content Check and Spelling stay greyscale until the message box has text. ============================================================ */ #contact-window .contact-message-dependent-disabled { color: grey !important; filter: grayscale(100%) brightness(0.9) !important; } #contact-window .contact-message-dependent-disabled img { filter: grayscale(100%) brightness(0.9) !important; } #contact-window .contact-message-dependent-disabled:hover { background: transparent !important; border-color: transparent !important; border-radius: 0 !important; } #contact-window .contact-message-dependent-active { color: #000 !important; filter: brightness(1.05) !important; } #contact-window .contact-message-dependent-active img { filter: none !important; } /* ============================================================ FINAL PATCH - keep Start Menu above all open/maximized windows ============================================================ */ .startmenu { position: fixed !important; left: 0 !important; bottom: var(--startbar-height) !important; z-index: 20000 !important; } .bluebar { z-index: 19999 !important; } .winform, .winform.fullscreen { z-index: 4000; } /* ============================================================ FINAL PATCH - Start menu always above open/maximized windows and Contact toolbar message-dependent color state ============================================================ */ .startmenu { position: fixed !important; left: 0 !important; bottom: var(--startbar-height) !important; z-index: 2147483647 !important; } .bluebar { position: fixed !important; z-index: 2147483646 !important; } /* Keep all Windows forms lower than the Start Menu. */ .winform, .winform.fullscreen { z-index: 4000 !important; } /* Empty message box: Send, Check, and Spelling stay grayscale. */ #contact-window .contact-message-dependent-disabled { color: grey !important; filter: grayscale(100%) brightness(0.9) !important; } #contact-window .contact-message-dependent-disabled img { filter: grayscale(100%) brightness(0.9) !important; } /* Message has content: Send, Check, and Spelling show full color. */ #contact-window .contact-message-dependent-active { color: #000 !important; filter: brightness(1.05) !important; } #contact-window .contact-message-dependent-active img, #contact-window .contact-message-dependent-active .contact-send-icon { filter: none !important; } /* Send button can look colored once a message exists, while JS still blocks sending until all fields are valid. */ #contact-window #contact-send-btn.contact-message-dependent-active { pointer-events: auto !important; } /* ============================================================ FINAL PATCH - My Work grouped accordion + empty detail panels Applies the latest My Work structure without touching Contact Me. ============================================================ */ .winform #view-work .accordion { display: flex !important; flex-direction: column !important; gap: 12px !important; background: transparent !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; } .winform #view-work .accordion-group { flex: 0 0 auto !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; background: rgba(255, 255, 255, 0.2) !important; border-radius: 5px !important; margin: 0 !important; padding: 0 !important; } .winform #view-work .accordion-group .win_accordion_title { flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0 !important; margin: 0 !important; padding: 5px 10px !important; color: #2d3748 !important; background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 100%) !important; border-radius: 5px 5px 0 0 !important; } .winform #view-work .accordion-group .win_accordion_title .accordion-btn { width: 16px !important; height: 16px !important; object-fit: contain !important; flex: 0 0 auto !important; } .winform #view-work .accordion-group .accordion_content_item { flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; min-height: 38px !important; background: #d6e2ff !important; border: 0 !important; box-shadow: none !important; cursor: pointer !important; } .winform #view-work .accordion-group .accordion_content_item + .accordion_content_item { border-top: 0 !important; } .winform #view-work .accordion-group .accordion_content_item:hover { text-decoration: underline !important; color: #0000ff !important; } .winform #view-work .accordion-group .accordion_content_text { display: flex !important; align-items: center !important; gap: 7px !important; padding: 7px 8px !important; margin: 0 !important; font-size: 13px !important; color: #000 !important; line-height: 1.2 !important; border: 0 !important; box-shadow: none !important; } .winform #view-work .accordion-group .accordion_content_text p { margin: 0 !important; padding: 0 !important; } .winform #view-work .rightpanel { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; background: #d3d3d3 !important; } .winform #view-work .work-panel, .winform #view-work #work-welcome { width: 100% !important; max-width: none !important; height: 100% !important; min-height: 100% !important; margin: 0 !important; padding: 40px !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; background: #d3d3d3 !important; color: #000 !important; box-sizing: border-box !important; overflow-y: auto !important; overflow-x: hidden !important; } .winform #view-work .work-detail-panel { display: block !important; padding: 18px !important; background: #d6e2ff !important; } .winform #view-work .work-detail-panel.hidden, .winform #view-work .work-panel.hidden, .winform #view-work #work-welcome.hidden { display: none !important; } .winform #view-work #work-welcome:not(.hidden) { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; background: #d3d3d3 !important; } .winform #view-work #work-welcome .work-headings, .winform #view-work #work-welcome .content_tech { max-width: 800px !important; } /* ============================================================ FINAL COMPACT ACCORDION PATCH Purpose: - Removes the large vertical gap inside the Work accordion. - Resets default

margins. - Tightens title, folder rows, icon spacing, and group spacing. Keep this block at the VERY END of the CSS file. ============================================================ */ .winform #view-work .accordion { display: flex !important; flex-direction: column !important; gap: 4px !important; margin: 0 !important; padding: 0 0 4px 0 !important; background: #ffffff33 !important; border-radius: 5px !important; } .winform #view-work .accordion-group { flex: 0 0 auto !important; margin: 0 0 4px 0 !important; padding: 0 !important; line-height: 1 !important; } .winform #view-work .accordion-group .win_accordion_title { display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 20px !important; margin: 0 !important; padding: 3px 8px !important; font-size: 12px !important; line-height: 14px !important; font-weight: 700 !important; color: #2d3748 !important; background: linear-gradient( 90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.4) 100% ) !important; border-radius: 5px 5px 0 0 !important; } .winform #view-work .accordion-group .win_accordion_title .accordion-btn { width: 13px !important; height: 13px !important; display: block !important; flex: 0 0 13px !important; margin: 0 !important; padding: 0 !important; } .winform #view-work .accordion-group .accordion_content_item { min-height: 19px !important; margin: 0 !important; padding: 0 !important; cursor: pointer !important; line-height: 1 !important; } .winform #view-work .accordion-group .accordion_content_item:hover { text-decoration: underline !important; color: #0000ff !important; } .winform #view-work .accordion-group .accordion_content_text { display: flex !important; align-items: center !important; gap: 4px !important; min-height: 19px !important; margin: 0 !important; padding: 1px 8px !important; font-size: 12px !important; line-height: 14px !important; color: #000 !important; border: 0 !important; box-shadow: none !important; } .winform #view-work .accordion-group .accordion_content_text img { width: 15px !important; height: 15px !important; flex: 0 0 15px !important; display: block !important; margin: 0 !important; padding: 0 !important; } .winform #view-work .accordion-group .accordion_content_text p { margin: 0 !important; padding: 0 !important; line-height: 14px !important; font-size: 12px !important; } /* Optional: slightly smaller gaps between the main category blocks */ .winform #view-work .accordion-group + .accordion-group { margin-top: 2px !important; } /* ============================================================ EXTRA VERTICAL BREATHING ROOM PATCH Purpose: - Adds a bit more top and bottom space so the left accordion items do not look cramped. - Keep this AFTER the compact patch so it wins. ============================================================ */ .winform #view-work .accordion { padding: 6px 0 8px 0 !important; gap: 6px !important; } .winform #view-work .accordion-group { margin: 0 0 6px 0 !important; } .winform #view-work .accordion-group .win_accordion_title { min-height: 24px !important; padding: 5px 8px !important; line-height: 16px !important; } .winform #view-work .accordion-group .accordion_content_item { min-height: 22px !important; } .winform #view-work .accordion-group .accordion_content_text { min-height: 22px !important; padding: 3px 8px !important; line-height: 16px !important; } .winform #view-work .accordion-group .accordion_content_text p { line-height: 16px !important; } .winform #view-work .accordion-group + .accordion-group { margin-top: 4px !important; } /* ============================================================ FINAL ACCORDION INNER SPACING PATCH Adds space INSIDE each accordion group: - between the title and the first folder item - between the last folder item and the bottom edge Keep this block at the VERY END of the CSS file. ============================================================ */ .winform #view-work .accordion { padding: 0 !important; gap: 10px !important; } /* The rounded blue/white accordion box */ .winform #view-work .accordion-group { overflow: hidden !important; margin: 0 0 8px 0 !important; padding: 0 0 7px 0 !important; /* bottom inside space */ border-radius: 5px !important; background: #d6e2ff !important; } /* Category title: Graphics, Videos, Articles */ .winform #view-work .accordion-group .win_accordion_title { margin: 0 0 5px 0 !important; /* space below title */ padding: 5px 8px 4px 8px !important; min-height: 24px !important; line-height: 16px !important; } /* Folder rows */ .winform #view-work .accordion-group .accordion_content_item { margin: 0 !important; padding: 0 !important; min-height: 21px !important; } /* Text/icon row inside each folder item */ .winform #view-work .accordion-group .accordion_content_text { padding: 2px 8px !important; min-height: 21px !important; line-height: 16px !important; } /* Remove default paragraph margin so spacing is controlled only by the group */ .winform #view-work .accordion-group .accordion_content_text p { margin: 0 !important; padding: 0 !important; line-height: 16px !important; } /* ============================================================ FINAL WORK WELCOME VERTICAL CENTERING PATCH Purpose: - Makes the top and bottom gap around the "Welcome To My Portfolio Section" content even. - Centers the heading + tech badges vertically inside the right panel. Keep this block at the VERY END of the CSS file. ============================================================ */ .winform #view-work .rightpanel { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 20px !important; box-sizing: border-box !important; } .winform #view-work #work-welcome:not(.hidden) { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 40px !important; box-sizing: border-box !important; text-align: center !important; } .winform #view-work #work-welcome .work-headings { margin: 0 0 24px 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; align-items: center !important; } .winform #view-work #work-welcome .work-headings h2, .winform #view-work #work-welcome .work-headings h5, .winform #view-work #work-welcome .work-headings h6 { margin: 0 !important; padding: 0 !important; } .winform #view-work #work-welcome .content_tech { margin: 0 auto !important; padding: 0 !important; max-width: 820px !important; width: 100% !important; justify-content: center !important; } /* ============================================================ WORK DETAIL GALLERY PANELS Scoped replacement for the gallery code inside each Work panel. ============================================================ */ .winform #view-work .work-detail-panel { position: relative !important; padding: 0 !important; background: #eef2fb !important; overflow: hidden !important; } .winform #view-work .work-gallery { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important; background: #eef2fb !important; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important; } .winform #view-work .display_container { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; height: 66% !important; min-height: 260px !important; width: 100% !important; background-color: #eef2fb !important; box-sizing: border-box !important; } .winform #view-work .work-gallery-active-image { width: 95% !important; height: 90% !important; object-fit: contain !important; display: block !important; } .winform #view-work .control_container { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 10px !important; height: 40px !important; width: 100% !important; flex: 0 0 40px !important; } .winform #view-work .control_icon { background: none !important; border: 2px solid transparent !important; padding: 0 !important; cursor: pointer !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; filter: brightness(1.05) !important; } .winform #view-work .control_icon:hover { background: #f8f8f0 !important; border-radius: 5px !important; border: 2px solid #cecec3 !important; filter: brightness(1.02) !important; } .winform #view-work .control_icon:active { background: #e0e4e0 !important; border: 2px solid #989c90 !important; filter: brightness(0.98) !important; } .winform #view-work .slider_container { position: relative !important; overflow-x: auto !important; overflow-y: hidden !important; width: 100% !important; height: 34% !important; min-height: 120px !important; background: #eef2fb !important; box-sizing: border-box !important; } .winform #view-work .slider { display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 4px !important; height: 100% !important; width: 100% !important; padding: 10px !important; box-sizing: border-box !important; } .winform #view-work .gallery-slider-icon { background: none !important; border: 2px solid transparent !important; cursor: pointer !important; padding: 10px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 4px !important; color: #000 !important; font-size: 12px !important; min-width: 85px !important; font-family: var(--ui-font) !important; } .winform #view-work .gallery-slider-icon:hover, .winform #view-work .gallery-slider-icon.active { background: #f8f8f0 !important; border-radius: 5px !important; border-color: #cecec3 !important; } .winform #view-work .gallery-slider-icon img { object-fit: contain !important; display: block !important; } .winform #view-work .gallery-slider-icon span { margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; white-space: nowrap !important; } .winform #view-work .work-gallery-shadow { position: absolute !important; bottom: -15px !important; right: 4px !important; pointer-events: none !important; opacity: 0.95 !important; } @media (max-width: 700px) { .winform #view-work .display_container { min-height: 220px !important; } .winform #view-work .gallery-slider-icon { min-width: 76px !important; padding: 8px !important; font-size: 11px !important; } } /* ============================================================ FINAL PATCH - Gallery fills the Work right panel edge-to-edge Removes the gray gutter/spacing around the gallery detail panel. Keep this at the VERY END of styles.css. ============================================================ */ .winform #view-work .rightpanel { padding: 0 !important; margin: 0 !important; align-items: stretch !important; justify-content: stretch !important; background: #eef2fb !important; overflow: hidden !important; } .winform #view-work .work-detail-panel, .winform #view-work .work-detail-panel.body, .winform #view-work .rightpanel > .work-detail-panel { width: 100% !important; max-width: none !important; height: 100% !important; min-height: 100% !important; flex: 1 1 auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #eef2fb !important; overflow: hidden !important; box-sizing: border-box !important; } .winform #view-work .work-detail-panel:not(.hidden) { display: flex !important; flex-direction: column !important; } .winform #view-work .work-gallery { width: 100% !important; max-width: none !important; height: 100% !important; min-height: 100% !important; flex: 1 1 auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: #eef2fb !important; overflow: hidden !important; box-sizing: border-box !important; } .winform #view-work .display_container { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: #eef2fb !important; box-sizing: border-box !important; } .winform #view-work .slider_container { flex: 0 0 34% !important; height: 34% !important; min-height: 120px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: #eef2fb !important; box-sizing: border-box !important; } .winform #view-work .slider { margin: 0 !important; box-sizing: border-box !important; } /* ============================================================ FINAL PATCH - Work gallery fullscreen fit + color split Purpose: - Gallery fills the right panel in normal and fullscreen modes. - Top display/image area and slider controls use #eef2fb. - Thumbnail strip/background uses white. Keep this block at the VERY END of styles.css. ============================================================ */ .winform #view-work .rightpanel, .winform.fullscreen #view-work .rightpanel { padding: 0 !important; margin: 0 !important; align-items: stretch !important; justify-content: stretch !important; background: #eef2fb !important; overflow: hidden !important; } .winform #view-work .work-detail-panel, .winform #view-work .work-detail-panel.body, .winform #view-work .rightpanel > .work-detail-panel, .winform.fullscreen #view-work .work-detail-panel, .winform.fullscreen #view-work .work-detail-panel.body, .winform.fullscreen #view-work .rightpanel > .work-detail-panel { width: 100% !important; max-width: none !important; height: 100% !important; min-height: 0 !important; flex: 1 1 auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #eef2fb !important; overflow: hidden !important; box-sizing: border-box !important; } .winform #view-work .work-detail-panel:not(.hidden), .winform.fullscreen #view-work .work-detail-panel:not(.hidden) { display: flex !important; flex-direction: column !important; } .winform #view-work .work-gallery, .winform.fullscreen #view-work .work-gallery { width: 100% !important; max-width: none !important; height: 100% !important; min-height: 0 !important; flex: 1 1 auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: #eef2fb !important; overflow: hidden !important; box-sizing: border-box !important; } /* Top picture display area */ .winform #view-work .display_container, .winform.fullscreen #view-work .display_container { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: #eef2fb !important; background-color: #eef2fb !important; box-sizing: border-box !important; } /* Slider/arrow controls stay with the top image color */ .winform #view-work .control_container, .winform.fullscreen #view-work .control_container { flex: 0 0 40px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; background: #eef2fb !important; background-color: #eef2fb !important; box-sizing: border-box !important; } /* Bottom thumbnail area */ .winform #view-work .slider_container, .winform.fullscreen #view-work .slider_container { flex: 0 0 34% !important; height: 34% !important; min-height: 120px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; background-color: #ffffff !important; overflow-x: auto !important; overflow-y: hidden !important; box-sizing: border-box !important; } .winform #view-work .slider, .winform.fullscreen #view-work .slider { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 10px !important; background: #ffffff !important; background-color: #ffffff !important; box-sizing: border-box !important; } .winform #view-work .gallery-slider-icon, .winform.fullscreen #view-work .gallery-slider-icon { background: transparent !important; } .winform #view-work .gallery-slider-icon:hover, .winform #view-work .gallery-slider-icon.active, .winform.fullscreen #view-work .gallery-slider-icon:hover, .winform.fullscreen #view-work .gallery-slider-icon.active { background: #f8f8f0 !important; } /* ============================================================ FINAL PATCH - XP Picture Gallery visual match Replicates the reference style: - top preview and controls use #eef2fb - bottom thumbnail strip uses white - no outer gap in normal or fullscreen view - thumbnail selection uses classic XP blue label highlight ============================================================ */ .winform #view-work .rightpanel, .winform.fullscreen #view-work .rightpanel { padding: 0 !important; margin: 0 !important; background: #eef2fb !important; overflow: hidden !important; align-items: stretch !important; justify-content: stretch !important; } .winform #view-work .work-detail-panel, .winform #view-work .work-detail-panel.body, .winform.fullscreen #view-work .work-detail-panel, .winform.fullscreen #view-work .work-detail-panel.body { width: 100% !important; height: 100% !important; min-height: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden !important; background: #eef2fb !important; box-sizing: border-box !important; } .winform #view-work .work-detail-panel:not(.hidden), .winform.fullscreen #view-work .work-detail-panel:not(.hidden) { display: flex !important; flex-direction: column !important; } .winform #view-work .work-gallery, .winform.fullscreen #view-work .work-gallery { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: #eef2fb !important; overflow: hidden !important; box-sizing: border-box !important; font-family: var(--ui-font) !important; } /* Top preview section */ .winform #view-work .display_container, .winform.fullscreen #view-work .display_container { flex: 1 1 auto !important; min-height: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: #eef2fb !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } .winform #view-work .work-gallery-active-image, .winform.fullscreen #view-work .work-gallery-active-image { display: block !important; width: auto !important; height: auto !important; max-width: 72% !important; max-height: calc(100% - 50px) !important; object-fit: contain !important; margin: 0 auto !important; border: 0 !important; box-shadow: none !important; } /* Control strip under preview image */ .winform #view-work .control_container, .winform.fullscreen #view-work .control_container { flex: 0 0 40px !important; width: 100% !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; background: #eef2fb !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; box-sizing: border-box !important; } .winform #view-work .control_icon, .winform.fullscreen #view-work .control_icon { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; padding: 0 !important; border: 1px solid transparent !important; border-radius: 3px !important; background: transparent !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; box-sizing: border-box !important; } .winform #view-work .control_icon img, .winform.fullscreen #view-work .control_icon img { width: 24px !important; height: 24px !important; object-fit: contain !important; display: block !important; } .winform #view-work .control_icon:hover, .winform.fullscreen #view-work .control_icon:hover { background: #f8f8f0 !important; border-color: #cecec3 !important; } .winform #view-work .control_icon:active, .winform.fullscreen #view-work .control_icon:active { background: #e0e4e0 !important; border-color: #989c90 !important; } /* Bottom thumbnail strip */ .winform #view-work .slider_container, .winform.fullscreen #view-work .slider_container { position: relative !important; flex: 0 0 31% !important; height: 31% !important; min-height: 150px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; overflow-x: auto !important; overflow-y: hidden !important; box-sizing: border-box !important; } .winform #view-work .slider, .winform.fullscreen #view-work .slider { display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 28px !important; width: max-content !important; min-width: 100% !important; height: 100% !important; margin: 0 !important; padding: 18px 20px 12px 20px !important; background: #ffffff !important; box-sizing: border-box !important; } .winform #view-work .gallery-slider-icon, .winform.fullscreen #view-work .gallery-slider-icon { width: 116px !important; min-width: 116px !important; max-width: 116px !important; min-height: 124px !important; padding: 0 !important; margin: 0 !important; border: 1px solid transparent !important; border-radius: 0 !important; background: transparent !important; color: #000 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 4px !important; cursor: pointer !important; font-family: var(--ui-font) !important; font-size: 14px !important; line-height: 1.15 !important; text-align: center !important; box-sizing: border-box !important; } .winform #view-work .gallery-slider-icon:hover, .winform.fullscreen #view-work .gallery-slider-icon:hover { background: transparent !important; border-color: #d8d2bd !important; } .winform #view-work .gallery-slider-icon.active, .winform.fullscreen #view-work .gallery-slider-icon.active { background: transparent !important; border-color: transparent !important; } .winform #view-work .gallery-slider-icon img, .winform.fullscreen #view-work .gallery-slider-icon img { width: 96px !important; height: 96px !important; object-fit: cover !important; display: block !important; margin: 0 auto 3px auto !important; padding: 3px !important; background: #ffffff !important; border: 2px solid #ede7d8 !important; box-sizing: border-box !important; } .winform #view-work .gallery-slider-icon:hover img, .winform.fullscreen #view-work .gallery-slider-icon:hover img { border-color: #cfc7a6 !important; } .winform #view-work .gallery-slider-icon.active img, .winform.fullscreen #view-work .gallery-slider-icon.active img { border-color: #2b78d6 !important; } .winform #view-work .gallery-slider-icon span, .winform.fullscreen #view-work .gallery-slider-icon span { display: block !important; max-width: 104px !important; margin: 0 auto !important; padding: 1px 3px !important; color: #000 !important; background: transparent !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; line-height: 1.15 !important; box-sizing: border-box !important; } .winform #view-work .gallery-slider-icon.active span, .winform.fullscreen #view-work .gallery-slider-icon.active span { color: #ffffff !important; background: #2b78d6 !important; } .winform #view-work .work-gallery-shadow, .winform.fullscreen #view-work .work-gallery-shadow { position: absolute !important; right: 8px !important; bottom: -14px !important; width: 120px !important; height: 120px !important; opacity: 0.22 !important; pointer-events: none !important; } @media (max-width: 900px) { .winform #view-work .work-gallery-active-image, .winform.fullscreen #view-work .work-gallery-active-image { max-width: 86% !important; } .winform #view-work .slider, .winform.fullscreen #view-work .slider { gap: 18px !important; } } /* ============================================================ FINAL PATCH - remove click/float animation from gallery thumbnails ============================================================ */ .winform #view-work .gallery-slider-icon, .winform.fullscreen #view-work .gallery-slider-icon, .winform #view-work .gallery-slider-icon:active, .winform.fullscreen #view-work .gallery-slider-icon:active, .winform #view-work .gallery-slider-icon.press-feedback:active, .winform.fullscreen #view-work .gallery-slider-icon.press-feedback:active, .winform #view-work .gallery-slider-icon.xp-click, .winform.fullscreen #view-work .gallery-slider-icon.xp-click { animation: none !important; transform: none !important; transition: none !important; } /* ============================================================ FINAL PATCH - Even gallery preview spacing Makes the top padding above the preview image and the bottom space below the slider buttons visually balanced. Keep this block at the VERY END of styles.css. ============================================================ */ .winform #view-work .display_container, .winform.fullscreen #view-work .display_container { justify-content: flex-start !important; padding: 14px 0 14px 0 !important; gap: 10px !important; } .winform #view-work .work-gallery-active-image, .winform.fullscreen #view-work .work-gallery-active-image { flex: 1 1 auto !important; min-height: 0 !important; max-height: calc(100% - 50px) !important; margin: 0 auto !important; } .winform #view-work .control_container, .winform.fullscreen #view-work .control_container { flex: 0 0 26px !important; height: 26px !important; min-height: 26px !important; margin: 0 !important; padding: 0 !important; } .winform #view-work .control_icon, .winform.fullscreen #view-work .control_icon, .winform #view-work .control_icon img, .winform.fullscreen #view-work .control_icon img { width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; } /* ============================================================ COPYWRITING PROJECT DOCUMENT GRID Applies Windows Explorer-style document icons to Articles, Emails, and Social Media Captions right panels. ============================================================ */ .winform #view-work .work-doc-grid { width: 100% !important; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)) !important; gap: 24px 18px !important; align-items: start !important; justify-items: center !important; padding: 8px 4px !important; box-sizing: border-box !important; } .winform #view-work .work-doc-item { appearance: none !important; -webkit-appearance: none !important; width: 88px !important; min-height: 92px !important; padding: 4px 3px !important; margin: 0 !important; border: 1px solid transparent !important; background: transparent !important; color: #000 !important; font-family: var(--ui-font) !important; font-size: 12px !important; line-height: 1.15 !important; text-align: center !important; cursor: pointer !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important; border-radius: 2px !important; } .winform #view-work .work-doc-item img { width: 56px !important; height: 56px !important; object-fit: contain !important; display: block !important; margin: 0 auto !important; pointer-events: none !important; } .winform #view-work .work-doc-item span { display: block !important; width: 100% !important; color: #000 !important; text-align: center !important; word-break: break-word !important; pointer-events: none !important; } .winform #view-work .work-doc-item:hover, .winform #view-work .work-doc-item:focus { background: rgba(49, 106, 197, 0.16) !important; border-color: rgba(49, 106, 197, 0.45) !important; outline: none !important; } .winform #view-work .work-doc-item:active, .winform #view-work .work-doc-item.selected { background: rgba(49, 106, 197, 0.28) !important; border-color: rgba(49, 106, 197, 0.75) !important; } /* ============================================================ VIDEO PROJECT ICON GRID + HOVER DETAIL DIALOGUES Adds Explorer-style video icons and hover metadata for thumbnail, document, and video portfolio items. ============================================================ */ .winform #view-work .work-video-grid { width: 100% !important; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important; gap: 24px 18px !important; align-items: start !important; justify-items: center !important; padding: 8px 4px !important; box-sizing: border-box !important; } .winform #view-work .work-video-item { appearance: none !important; -webkit-appearance: none !important; width: 96px !important; min-height: 96px !important; padding: 4px 3px !important; margin: 0 !important; border: 1px solid transparent !important; background: transparent !important; color: #000 !important; font-family: var(--ui-font) !important; font-size: 12px !important; line-height: 1.15 !important; text-align: center !important; cursor: pointer !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important; border-radius: 2px !important; position: relative !important; } .winform #view-work .work-video-item img { width: 56px !important; height: 56px !important; object-fit: contain !important; display: block !important; margin: 0 auto !important; pointer-events: none !important; } .winform #view-work .work-video-item span { display: block !important; width: 100% !important; color: #000 !important; text-align: center !important; word-break: break-word !important; pointer-events: none !important; } .winform #view-work .work-video-item:hover, .winform #view-work .work-video-item:focus { background: rgba(49, 106, 197, 0.16) !important; border-color: rgba(49, 106, 197, 0.45) !important; outline: none !important; } .winform #view-work .work-video-item:active, .winform #view-work .work-video-item.selected { background: rgba(49, 106, 197, 0.28) !important; border-color: rgba(49, 106, 197, 0.75) !important; } /* Keep tooltip positioning available for all portfolio icon buttons. */ .winform #view-work .gallery-slider-icon, .winform #view-work .work-doc-item, .winform #view-work .work-video-item { position: relative !important; } /* Small hover dialogue box for thumbnails, documents, and videos. */ .winform #view-work .gallery-slider-icon[data-tooltip-date]:hover::after, .winform #view-work .work-doc-item[data-tooltip-date]:hover::after, .winform #view-work .work-video-item[data-tooltip-date]:hover::after { content: "Date: " attr(data-tooltip-date) "\A" attr(data-tooltip-description); position: absolute !important; left: calc(100% + 10px) !important; top: 8px !important; width: 220px !important; min-height: 48px !important; padding: 8px 10px !important; background: #ffffe1 !important; border: 1px solid #7a7a7a !important; box-shadow: 2px 2px 4px rgba(0,0,0,0.25) !important; color: #000 !important; font-family: var(--ui-font) !important; font-size: 11px !important; line-height: 1.35 !important; text-align: left !important; white-space: pre-line !important; z-index: 99999 !important; pointer-events: none !important; } .winform #view-work .gallery-slider-icon[data-tooltip-date]:hover::before, .winform #view-work .work-doc-item[data-tooltip-date]:hover::before, .winform #view-work .work-video-item[data-tooltip-date]:hover::before { content: ""; position: absolute !important; left: calc(100% + 4px) !important; top: 18px !important; width: 0 !important; height: 0 !important; border-top: 6px solid transparent !important; border-bottom: 6px solid transparent !important; border-right: 6px solid #7a7a7a !important; z-index: 99998 !important; pointer-events: none !important; } /* Prevent tooltip clipping inside gallery slider strips. */ .winform #view-work .slider_container, .winform #view-work .slider { overflow: visible !important; } .winform #view-work .work-gallery { overflow: visible !important; } /* ============================================================ TETRIS GAME WINDOW ============================================================ */ #tetris-window { width: 760px; height: min(680px, 84vh); top: 7%; left: 20%; z-index: 3600; } #tetris-window .accordion_content { padding: 0 !important; background: #111827 !important; overflow: hidden !important; } #tetris-window .tetris-app { width: 100%; height: 100%; min-height: 0; display: grid; grid-template-columns: 190px minmax(240px, 1fr) 160px; gap: 14px; padding: 16px; box-sizing: border-box; background: radial-gradient(circle at top, #223057 0%, #111827 55%, #050816 100%); color: #ffffff; font-family: var(--ui-font); } #tetris-window .tetris-sidebar, #tetris-window .tetris-controls { display: flex; flex-direction: column; gap: 12px; min-height: 0; } #tetris-window .tetris-panel { background: #ede9d3; color: #000; border: 2px solid #0831d9; box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080; padding: 10px; box-sizing: border-box; } #tetris-window .tetris-panel h3 { margin: 0 0 8px 0; font-size: 13px; color: #00136b; } #tetris-window .tetris-score-value { padding: 8px; background: #000; color: #33ff66; font-family: 'VT323', monospace; font-size: 36px; line-height: 1; text-align: right; border: 2px inset #808080; } #tetris-window .tetris-rank-list { margin: 0; padding-left: 24px; font-size: 13px; line-height: 1.7; } #tetris-window .tetris-help-panel p { margin: 6px 0; font-size: 12px; line-height: 1.25; } #tetris-window .tetris-board-wrap { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; } #tetris-window .tetris-canvas { width: min(100%, 300px); height: auto; aspect-ratio: 1 / 2; background: #050816; border: 4px solid #ede9d3; box-shadow: 0 0 0 2px #0831d9, 0 18px 38px rgba(0,0,0,0.55); image-rendering: pixelated; } #tetris-window .tetris-controls { justify-content: center; } #tetris-window .tetris-controls button, #tetris-window .tetris-game-over-box button { min-height: 34px; padding: 6px 10px; background: #ede9d3; border: 2px outset #ffffff; color: #000; font-family: var(--ui-font); font-size: 12px; cursor: pointer; } #tetris-window .tetris-controls button:hover, #tetris-window .tetris-game-over-box button:hover { filter: brightness(1.06); } #tetris-window .tetris-controls button:active, #tetris-window .tetris-game-over-box button:active { border-style: inset; } #tetris-window .tetris-game-over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.68); z-index: 10; } #tetris-window .tetris-game-over.hidden { display: none !important; } #tetris-window .tetris-game-over-box { width: 230px; background: #ede9d3; color: #000; border: 3px solid #0831d9; box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080, 0 16px 40px rgba(0,0,0,0.55); padding: 18px; text-align: center; } #tetris-window .tetris-game-over-box h2 { margin: 0 0 10px 0; color: #b00000; font-size: 20px; } #tetris-window .tetris-game-over-box p { margin: 0 0 14px 0; font-size: 13px; } #tetris-window .tetris-game-over-box button { width: 100%; margin-top: 8px; } .winform.fullscreen#tetris-window { width: 100vw !important; height: calc(100vh - var(--startbar-height)) !important; } @media (max-width: 760px) { #tetris-window { left: 2% !important; width: 96% !important; } #tetris-window .tetris-app { grid-template-columns: 1fr; overflow-y: auto; } #tetris-window .tetris-controls { display: grid; grid-template-columns: repeat(2, 1fr); } } /* ============================================================ FLOATING PORTFOLIO TOOLTIP OVERLAY FIX Moves hover dialogue boxes outside the Windows form clipping area. This lets the tooltip overlap in front of the WinForm when the window is not fullscreen instead of being cropped by the panel edges. ============================================================ */ .winform #view-work .gallery-slider-icon[data-tooltip-date]:hover::after, .winform #view-work .work-doc-item[data-tooltip-date]:hover::after, .winform #view-work .work-video-item[data-tooltip-date]:hover::after, .winform #view-work .gallery-slider-icon[data-tooltip-date]:hover::before, .winform #view-work .work-doc-item[data-tooltip-date]:hover::before, .winform #view-work .work-video-item[data-tooltip-date]:hover::before { content: none !important; display: none !important; } .portfolio-floating-tooltip { position: fixed !important; left: 0; top: 0; width: 240px; min-height: 48px; padding: 8px 10px; background: #ffffe1; border: 1px solid #7a7a7a; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); color: #000; font-family: var(--ui-font); font-size: 11px; line-height: 1.35; text-align: left; white-space: pre-line; pointer-events: none; opacity: 0; visibility: hidden; z-index: 999999; box-sizing: border-box; } .portfolio-floating-tooltip.is-visible { opacity: 1; visibility: visible; } .portfolio-floating-tooltip::before { content: ""; position: absolute; top: 10px; left: -6px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid #7a7a7a; } .portfolio-floating-tooltip.tooltip-left::before { left: auto; right: -6px; border-right: 0; border-left: 6px solid #7a7a7a; } /* ============================================================ FINAL TOOLTIP RIGHT-SIDE LOCK Ensures hover dialogue boxes never flip to the left side of document/video icons, including Video 5/10 positions. ============================================================ */ .portfolio-floating-tooltip { width: min(240px, calc(100vw - 16px)) !important; max-width: calc(100vw - 16px) !important; } .portfolio-floating-tooltip::before, .portfolio-floating-tooltip.tooltip-left::before { content: "" !important; position: absolute !important; top: 10px !important; left: -6px !important; right: auto !important; width: 0 !important; height: 0 !important; border-top: 6px solid transparent !important; border-bottom: 6px solid transparent !important; border-left: 0 !important; border-right: 6px solid #7a7a7a !important; } /* ============================================================ FINAL WINDOW CONTROL + DESKTOP RESPONSIVENESS PATCH Keep this block at the VERY END of styles.css. ============================================================ */ /* A hidden WinForm must remain hidden even when it still has fullscreen. */ .winform.hidden, .winform.fullscreen.hidden, #contact-window.hidden, #contact-window.fullscreen.hidden, #tetris-window.hidden, #tetris-window.fullscreen.hidden, #mycomputer-window.hidden, #mycomputer-window.fullscreen.hidden { display: none !important; } /* Real button reset for the title-bar controls. */ .winform .titlebar .win-btn { appearance: none !important; -webkit-appearance: none !important; font: inherit !important; line-height: 1 !important; min-width: 26px !important; flex: 0 0 26px !important; touch-action: manipulation; position: relative; z-index: 2; } .winform .titlebar .win-btn:focus-visible { outline: 1px dotted #fff !important; outline-offset: -3px !important; } /* Normal windows scale to the visible desktop and are centered by default. */ .winform:not(.fullscreen) { left: 50%; top: clamp(8px, 4vh, 48px); transform: translateX(-50%); width: min(900px, calc(100vw - 24px)); height: min(650px, calc(100dvh - var(--startbar-height) - 24px)); max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - var(--startbar-height) - 24px) !important; min-width: min(560px, calc(100vw - 24px)); min-height: min(360px, calc(100dvh - var(--startbar-height) - 24px)); overflow: hidden; } /* Tetris has an older ID-specific position rule; override it here while still allowing inline pixel positions after the user drags the window. */ #tetris-window.winform:not(.fullscreen) { left: 50%; top: clamp(8px, 4vh, 48px); transform: translateX(-50%); width: min(760px, calc(100vw - 24px)); height: min(680px, calc(100dvh - var(--startbar-height) - 24px)); } /* Fullscreen always fills only the area above the XP taskbar. */ .winform.fullscreen { inset: 0 0 var(--startbar-height) 0 !important; width: 100vw !important; height: calc(100dvh - var(--startbar-height)) !important; max-width: none !important; max-height: none !important; transform: none !important; overflow: hidden !important; } .winform .windowborder, .winform .windowsbody, .winform .welcome-page, .winform .welcome-page > .accordion_content { min-width: 0 !important; min-height: 0 !important; } /* Desktop icons flow into another column on short/wide monitors. */ .desktop .icons { position: absolute !important; inset: 0 0 var(--startbar-height) 0 !important; display: grid !important; grid-template-rows: repeat(auto-fit, 92px) !important; grid-auto-flow: column !important; grid-auto-columns: 96px !important; align-content: start !important; justify-content: start !important; gap: clamp(6px, 1.4vh, 18px) 8px !important; padding: clamp(10px, 2vh, 20px) !important; overflow: hidden !important; pointer-events: none; } .desktop .icons .icon { width: 88px !important; min-width: 0 !important; pointer-events: auto; } .desktop .icons .icon-art { width: clamp(46px, 6vh, 64px) !important; height: clamp(46px, 6vh, 64px) !important; } /* Flexible XP taskbar for standard, ultrawide, and narrow computer screens. */ .bluebar { min-width: 0 !important; overflow: visible !important; } .bluebar .startbtn, .bluebar .startbtn_active { flex: 0 0 clamp(88px, 12vw, 120px) !important; width: clamp(88px, 12vw, 120px) !important; } .bluebar .tabbar { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; overflow: hidden !important; } .bluebar .tab_container, .bluebar .tab_container_focused { flex: 1 1 150px !important; min-width: 72px !important; max-width: min(200px, 26vw) !important; } .bluebar .tab_icon { width: 18px !important; height: 18px !important; margin: 0 7px !important; object-fit: contain !important; } .bluebar .tab_text { min-width: 0 !important; font-size: clamp(11px, 1vw, 14px) !important; } .bluebar .icontray { flex: 0 0 clamp(130px, 16vw, 170px) !important; width: clamp(130px, 16vw, 170px) !important; min-width: 0 !important; padding: 0 clamp(5px, 1vw, 10px) !important; gap: 6px !important; } .bluebar .iconrow { width: auto !important; min-width: 0 !important; gap: clamp(3px, .6vw, 6px) !important; } .bluebar .time-display { white-space: nowrap !important; font-size: clamp(10px, .9vw, 12px) !important; } /* Start menu stays usable on short laptop displays. */ .startmenu { width: min(440px, calc(100vw - 8px)) !important; height: min(600px, calc(100dvh - var(--startbar-height) - 8px)) !important; max-height: calc(100dvh - var(--startbar-height) - 8px) !important; overflow: hidden !important; } .startmenu .menu { min-height: 0 !important; overflow: hidden !important; } .startmenu .leftmenu, .startmenu .rightmenu { min-width: 0 !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; } /* Contact compose form adapts to shorter and narrower desktop windows. */ #contact-window .contact-main, #contact-window .contact-compose-form, #contact-window .contact-richfield { min-width: 0 !important; min-height: 0 !important; } #contact-window .contact-icons-toolbar { flex: 0 0 auto !important; width: 100% !important; scrollbar-width: thin; } #contact-window .contact-mailing-fields { min-width: 0 !important; } #contact-window .contact-richtextbox { min-height: 100px !important; } /* Work and About panes remain readable on 4:3 and smaller laptop screens. */ @media (max-width: 1100px) { .winform #view-work .leftpanel, .winform.fullscreen #view-work .leftpanel { flex-basis: 220px !important; width: 220px !important; min-width: 220px !important; max-width: 220px !important; } .winform #view-about .about-top { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) !important; gap: 24px !important; } .winform #view-about:not(.hidden) { padding: 28px 32px !important; } } @media (max-height: 720px), (min-aspect-ratio: 2/1) { .winform:not(.fullscreen) { top: 8px; height: calc(100dvh - var(--startbar-height) - 16px); max-height: calc(100dvh - var(--startbar-height) - 16px) !important; } #contact-window .contact-icons-toolbar { height: 46px !important; min-height: 46px !important; padding-block: 2px !important; } #contact-window .contact-toolbar-button { height: 40px !important; padding-block: 1px !important; } #contact-window .contact-toolbar-button img { max-height: 25px !important; } #contact-window .contact-mailing { margin-block: 4px !important; } #contact-window .contact-richtextbox { min-height: 80px !important; } .winform #view-work .rightpanel { padding: 12px !important; } .winform #view-work #work-welcome { padding: clamp(18px, 4vh, 34px) !important; } } @media (max-width: 760px) { .winform:not(.fullscreen) { min-width: calc(100vw - 16px); width: calc(100vw - 16px); max-width: calc(100vw - 16px) !important; height: calc(100dvh - var(--startbar-height) - 16px); max-height: calc(100dvh - var(--startbar-height) - 16px) !important; top: 8px; } .winform #view-work .main, .winform.fullscreen #view-work .main { flex-direction: column !important; } .winform #view-work .leftpanel, .winform.fullscreen #view-work .leftpanel { flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: min(190px, 32vh) !important; } .winform #view-work .rightpanel, .winform.fullscreen #view-work .rightpanel { min-height: 0 !important; } #contact-window .contact-mailing-text { flex: 0 0 74px !important; } .bluebar .icontray { flex-basis: 126px !important; width: 126px !important; } .bluebar .iconrow img:nth-child(n+3) { display: none !important; } } /* ============================================================ MOBILE RESPONSIVE PATCH Preserves the existing Windows XP design and desktop behavior while making all windows and content usable on phones/tablets. ============================================================ */ @media (max-width: 760px) { html, body { width: 100%; height: 100%; height: 100dvh; overflow: hidden; overscroll-behavior: none; -webkit-text-size-adjust: 100%; } body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } button, a, input, textarea { touch-action: manipulation; } input, textarea, select { font-size: 16px !important; } .desktop { width: 100vw !important; height: 100dvh !important; } .desktop .wallpaper { inset: 0 0 var(--startbar-height) 0 !important; } .desktop .icons { inset: 0 0 var(--startbar-height) 0 !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: none !important; grid-auto-flow: row !important; grid-auto-rows: 88px !important; grid-auto-columns: auto !important; gap: 8px 2px !important; padding: 12px 6px !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; } .desktop .icons .icon { width: 100% !important; max-width: 104px !important; justify-self: center !important; } .desktop .icons .icon-art { width: 50px !important; height: 50px !important; margin-bottom: 4px !important; } .desktop .icons .icon-label { font-size: 11px !important; line-height: 1.15 !important; } .winform:not(.fullscreen), .winform.fullscreen, #mycomputer-window.winform:not(.fullscreen), #contact-window.winform:not(.fullscreen), #tetris-window.winform:not(.fullscreen) { position: fixed !important; inset: 0 0 var(--startbar-height) 0 !important; left: 0 !important; top: 0 !important; right: 0 !important; bottom: var(--startbar-height) !important; transform: none !important; width: 100vw !important; min-width: 0 !important; max-width: 100vw !important; height: calc(100dvh - var(--startbar-height)) !important; min-height: 0 !important; max-height: calc(100dvh - var(--startbar-height)) !important; border-radius: 0 !important; overflow: hidden !important; } .winform .titlebar { flex: 0 0 35px !important; height: 35px !important; min-height: 35px !important; max-height: 35px !important; border-radius: 0 !important; cursor: default !important; } .winform .titlebar > div:first-child { min-width: 0 !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; } .winform .titlebar .win-btn { width: 30px !important; min-width: 30px !important; height: 30px !important; flex-basis: 30px !important; } .winform .titlebar .win-btn img.btn-icon { width: 18px !important; height: 18px !important; } .winform .windowborder { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; padding: 0 2px 2px !important; } .winform .windowsbody { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; } .winform .topwindowsbar { flex: 0 0 32px !important; min-width: 0 !important; } .winform .toolbar { overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .winform .toolbar::-webkit-scrollbar, .winform .toolbar_icon::-webkit-scrollbar, #contact-window .contact-icons-toolbar::-webkit-scrollbar { display: none; } .winform .toolbaritem { flex: 0 0 auto !important; padding: 6px 7px !important; font-size: 12px !important; } .winform .winlogo { width: 42px !important; margin-right: 2px !important; } .winform .toolbar_icon { flex: 0 0 38px !important; height: 38px !important; min-height: 38px !important; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .winform .back_enabled, .winform .back_disabled { height: 34px !important; margin-inline: 2px !important; } .winform .search, .winform .folders, .winform .folder_thumb, .winform .forward { flex: 0 0 auto !important; } .winform .bottomwindowsbar { flex: 0 0 28px !important; height: 28px !important; min-height: 28px !important; } .winform .go { min-width: 0 !important; padding: 0 2px !important; } .winform .go > p { display: none !important; } .winform .addressbar { min-width: 0 !important; margin: 1px 2px !important; } .winform .goBtn { flex: 0 0 auto !important; margin-left: 2px !important; padding-inline: 4px !important; } .winform #view-menu:not(.hidden) { padding: 18px 16px 24px !important; } .winform #view-menu .welcome_text { margin: 0 0 10px !important; font-size: clamp(19px, 6vw, 26px) !important; line-height: 1.2 !important; } .winform #view-menu .subtitle { margin: 0 0 18px !important; font-size: 14px !important; line-height: 1.45 !important; text-align: left !important; } .winform #view-menu .content { grid-template-columns: 1fr !important; column-gap: 0 !important; row-gap: 18px !important; max-width: 100% !important; } .winform #view-menu .leftpanel, .winform #view-menu .rightpanel { display: grid !important; grid-template-columns: 1fr !important; grid-auto-rows: minmax(48px, auto) !important; gap: 12px !important; } .winform #view-menu .menu-item { grid-template-columns: 48px minmax(0, 1fr) !important; height: auto !important; min-height: 48px !important; max-height: none !important; gap: 10px !important; font-size: 14px !important; } .winform #view-menu .menu-icon { width: 44px !important; height: 44px !important; } .winform #view-about:not(.hidden) { padding: 22px 16px 34px !important; } .winform #view-about .about-top { grid-template-columns: 1fr !important; gap: 22px !important; } .winform #view-about .about-photo-wrap { max-width: 320px !important; margin: 0 auto !important; } .winform #view-about .about-main-photo { width: 100% !important; max-width: 320px !important; height: auto !important; aspect-ratio: 1 / 1 !important; } .winform #view-about .about-info h1 { font-size: 22px !important; margin-bottom: 14px !important; } .winform #view-about .about-intro, .winform #view-about .about-description { font-size: 15px !important; line-height: 1.5 !important; text-align: left !important; } .winform #view-about .about-details, .winform #view-about .about-services-columns { grid-template-columns: 1fr !important; gap: 0 !important; } .winform #view-about .about-detail-col p { margin-bottom: 14px !important; font-size: 14px !important; overflow-wrap: anywhere !important; } .winform #view-about .about-description { margin-top: 22px !important; padding: 0 !important; } .winform #view-about .about-services { margin-top: 32px !important; } .winform #view-about .about-services h2 { font-size: 24px !important; } .winform #view-about .about-services-description { text-align: left !important; font-size: 14px !important; } .winform #view-about .about-services-columns li { margin-bottom: 16px !important; } .winform #view-about .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } .winform #view-about .about-stat { min-width: 0 !important; padding: 12px !important; } .winform #view-about .about-stat h2 { font-size: 20px !important; } .winform #view-work .main, .winform.fullscreen #view-work .main { flex-direction: column !important; overflow: hidden !important; } .winform #view-work .leftpanel, .winform.fullscreen #view-work .leftpanel { display: flex !important; flex: 0 0 184px !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 184px !important; min-height: 184px !important; max-height: 184px !important; padding: 8px !important; overflow-y: auto !important; overflow-x: hidden !important; } .winform #view-work .accordion { width: 100% !important; min-height: max-content !important; } .winform #view-work .accordion-group { flex: 0 0 auto !important; min-height: auto !important; } .winform #view-work .win_accordion_title { gap: 8px !important; justify-content: space-between !important; margin-bottom: 0 !important; } .winform #view-work .accordion_content_item { flex: 0 0 auto !important; padding: 4px 6px !important; } .winform #view-work .accordion_content_text { padding: 2px 4px !important; font-size: 12px !important; } .winform #view-work .rightpanel, .winform.fullscreen #view-work .rightpanel { flex: 1 1 auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; padding: 12px !important; overflow-y: auto !important; overflow-x: hidden !important; } .winform #view-work #work-welcome { width: 100% !important; max-width: 100% !important; padding: 20px 14px !important; border-radius: 12px !important; } .winform #view-work .work-headings, .winform #view-work .content_tech { padding-inline: 0 !important; } .winform #view-work .work-headings h2 { font-size: 20px !important; } .winform #view-work .content_tech img { max-width: 100% !important; height: 24px !important; } .winform #view-work .body, .winform #view-work .work-detail-panel { width: 100% !important; max-width: 100% !important; padding: 14px !important; border-radius: 10px !important; } .winform #view-work .work-gallery { width: 100% !important; min-width: 0 !important; overflow: hidden !important; } .winform #view-work .display_container { width: 100% !important; min-width: 0 !important; padding: 8px 0 !important; } .winform #view-work .work-gallery-active-image { width: 100% !important; max-width: 100% !important; max-height: 36vh !important; object-fit: contain !important; } .winform #view-work .slider_container { width: 100% !important; min-width: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; } .winform #view-work .slider { width: max-content !important; min-width: 100% !important; overflow: visible !important; } .winform #view-work .gallery-slider-icon { flex: 0 0 92px !important; width: 92px !important; min-width: 92px !important; } .winform #view-work .work-video-grid, .winform #view-work .work-doc-grid { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)) !important; gap: 16px 10px !important; } .winform #view-work .work-video-item, .winform #view-work .work-doc-item { width: 82px !important; min-width: 0 !important; } #contact-window .topwindowsbar { display: flex !important; } #contact-window .contact-main { padding: 2px 4px 5px !important; } #contact-window .contact-icons-toolbar { flex: 0 0 58px !important; width: 100% !important; height: 58px !important; min-height: 58px !important; padding: 4px 2px !important; gap: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; } #contact-window .contact-toolbar-button { flex: 0 0 54px !important; min-width: 54px !important; height: 50px !important; padding: 2px 4px !important; font-size: 11px !important; } #contact-window .contact-vertical-line { margin-inline: 4px !important; } #contact-window .contact-mailing { margin: 6px 2px !important; min-width: 0 !important; } #contact-window .contact-mailing-text { flex: 0 0 66px !important; width: 66px !important; padding: 3px 0 !important; gap: 6px !important; } #contact-window .contact-field-text { height: 28px !important; font-size: 12px !important; } #contact-window .contact-field-text img { width: 16px !important; height: 16px !important; margin-inline: 2px !important; } #contact-window .contact-mailing-fields { padding: 1px 2px !important; gap: 6px !important; } #contact-window .contact-textfield { height: 28px !important; min-height: 28px !important; padding: 3px 5px !important; } #contact-window .contact-richfield { padding: 0 2px 3px !important; } #contact-window .contact-richtextbox { min-height: 140px !important; padding: 8px !important; } #tetris-window .accordion_content { overflow-y: auto !important; -webkit-overflow-scrolling: touch; } #tetris-window .tetris-app { display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto auto auto !important; gap: 10px !important; padding: 10px !important; min-height: max-content !important; height: auto !important; overflow: visible !important; } #tetris-window .tetris-sidebar { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } #tetris-window .tetris-help-panel { grid-column: 1 / -1 !important; } #tetris-window .tetris-panel { padding: 8px !important; } #tetris-window .tetris-board-wrap { min-height: 0 !important; padding: 2px 0 !important; } #tetris-window .tetris-canvas { width: min(68vw, 260px) !important; max-width: 260px !important; height: auto !important; } #tetris-window .tetris-controls { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; } #tetris-window .tetris-controls button { min-height: 44px !important; padding: 8px 4px !important; } .startmenu { position: fixed !important; left: 0 !important; right: 0 !important; bottom: var(--startbar-height) !important; width: 100vw !important; max-width: 100vw !important; height: min(580px, calc(100dvh - var(--startbar-height))) !important; max-height: calc(100dvh - var(--startbar-height)) !important; border-radius: 0 !important; } .startmenu .menutopbar { flex: 0 0 68px !important; height: 68px !important; } .startmenu .menu { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; } .startmenu .leftmenu, .startmenu .rightmenu { width: 50% !important; min-width: 0 !important; } .startmenu .Item { min-height: 42px !important; height: auto !important; padding: 4px 2px !important; } .startmenu .leftIcon, .startmenu .rightIcon { width: 28px !important; height: 28px !important; margin-inline: 4px !important; } .startmenu .Item p { font-size: 11px !important; overflow-wrap: anywhere !important; } .startmenu .menubtmbar { flex: 0 0 44px !important; height: 44px !important; } .bluebar { height: var(--startbar-height) !important; min-height: var(--startbar-height) !important; } .bluebar .startbtn, .bluebar .startbtn_active { flex: 0 0 88px !important; width: 88px !important; height: var(--startbar-height) !important; } .bluebar .tabbar { flex: 1 1 auto !important; min-width: 0 !important; } .bluebar .tab_container, .bluebar .tab_container_focused { min-width: 0 !important; max-width: none !important; height: 30px !important; } .bluebar .tab_icon { width: 16px !important; height: 16px !important; margin-inline: 5px !important; } .bluebar .tab_text { font-size: 11px !important; } .bluebar .icontray { flex: 0 0 88px !important; width: 88px !important; padding-inline: 4px !important; justify-content: center !important; } .bluebar .iconrow { display: none !important; } .bluebar .time-display { font-size: 11px !important; } .portfolio-floating-tooltip { display: none !important; } .tech_badge:hover, .icon:hover, .menu-bar span:hover { transform: none !important; box-shadow: none !important; } } @media (max-width: 420px) { .desktop .icons { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: 84px !important; } .winform .toolbar-label { display: none !important; } .winform .vertical_line { margin-inline: 4px !important; } .winform .folder_thumb { padding-inline: 2px !important; } .winform #view-about .about-stats { grid-template-columns: 1fr !important; } .winform #view-work .leftpanel, .winform.fullscreen #view-work .leftpanel { flex-basis: 170px !important; height: 170px !important; min-height: 170px !important; max-height: 170px !important; } .winform #view-work .rightpanel, .winform.fullscreen #view-work .rightpanel { padding: 8px !important; } .winform #view-work .body, .winform #view-work .work-detail-panel { padding: 10px !important; } #contact-window .contact-mailing-text { flex-basis: 60px !important; width: 60px !important; } #contact-window .contact-field-text { font-size: 11px !important; } #tetris-window .tetris-sidebar { grid-template-columns: 1fr !important; } #tetris-window .tetris-help-panel { grid-column: auto !important; } #tetris-window .tetris-controls { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .startmenu .menutopbar p { font-size: 14px !important; } .bluebar .startbtn, .bluebar .startbtn_active { flex-basis: 82px !important; width: 82px !important; } .bluebar .icontray { flex-basis: 74px !important; width: 74px !important; } } @media (max-width: 340px) { .desktop .icons { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .bluebar .tab_icon { display: none !important; } .bluebar .tab_text { padding-inline: 3px !important; } .startmenu .Item p { font-size: 10px !important; } } @media (orientation: landscape) and (max-height: 520px) and (max-width: 950px) { .winform #view-work .main, .winform.fullscreen #view-work .main { flex-direction: row !important; } .winform #view-work .leftpanel, .winform.fullscreen #view-work .leftpanel { flex: 0 0 190px !important; width: 190px !important; min-width: 190px !important; max-width: 190px !important; height: 100% !important; min-height: 0 !important; max-height: none !important; } .winform #view-about .about-top { grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) !important; } #tetris-window .tetris-app { grid-template-columns: 150px minmax(220px, 1fr) 150px !important; grid-template-rows: 1fr !important; min-height: 100% !important; } #tetris-window .tetris-sidebar { display: flex !important; } #tetris-window .tetris-controls { display: grid !important; grid-template-columns: 1fr !important; align-content: center !important; } #tetris-window .tetris-canvas { width: min(42vh, 230px) !important; } }