/*-----------------------------------*\ #style.css \*-----------------------------------*/ /** * copyright 2022 @codewithsadee */ /*-----------------------------------*\ #CUSTOM PROPERTY \*-----------------------------------*/ :root { /** * colors - wxNote's own brand green (#37b24d, the app-icon plate colour) stands in for the * template's yellow accent throughout; every other token is a light/dark *theme* pair, resolved * for `data-theme="dark"` here and overridden under `[data-theme="light"]` below. `:root`'s own * values are the dark-theme defaults so an unthemed flash-of-unstyled-content still looks correct. */ /* gradient */ --bg-gradient-onyx: linear-gradient( to bottom right, hsl(240, 1%, 25%) 3%, hsl(0, 0%, 19%) 97% ); --bg-gradient-jet: linear-gradient( to bottom right, hsla(240, 1%, 18%, 0.251) 0%, hsla(240, 2%, 11%, 0) 100% ), hsl(240, 2%, 13%); --bg-gradient-accent-1: linear-gradient( to bottom right, hsl(134, 52%, 55%) 0%, hsla(134, 45%, 45%, 0) 50% ); --bg-gradient-accent-2: linear-gradient( 135deg, hsla(134, 52%, 55%, 0.251) 0%, hsla(134, 45%, 45%, 0) 59.86% ), hsl(240, 2%, 13%); --border-gradient-onyx: linear-gradient( to bottom right, hsl(0, 0%, 25%) 0%, hsla(0, 0%, 25%, 0) 50% ); --text-gradient-accent: linear-gradient( to right, hsl(134, 55%, 58%), hsl(150, 55%, 48%) ); /* Wider lightness spread than text-gradient-accent (whose two stops are close enough together to read as flat once compressed into a small button) - both stops still fully opaque, unlike bg-gradient-accent-1/2 which fade to transparent (see the platform-download-btn:hover comment). */ --btn-hover-gradient: linear-gradient( 135deg, hsl(134, 60%, 68%) 0%, hsl(152, 65%, 32%) 100% ); --navbar-bg: hsla(240, 1%, 17%, 0.75); --select-hover-bg: hsl(240, 2%, 20%); --scrollbar-thumb-bg: hsla(0, 0%, 100%, 0.1); --scrollbar-thumb-shadow: hsla(0, 0%, 100%, 0.11); --scrollbar-thumb-hover-bg: hsla(0, 0%, 100%, 0.15); /* solid */ --jet: hsl(0, 0%, 22%); --onyx: hsl(240, 1%, 17%); --eerie-black-1: hsl(240, 2%, 13%); --eerie-black-2: hsl(240, 2%, 12%); --smoky-black: hsl(0, 0%, 7%); --white-1: hsl(0, 0%, 100%); --white-2: hsl(0, 0%, 98%); --accent: hsl(134, 52%, 55%); --accent-muted: hsl(134, 35%, 50%); --light-gray: hsl(0, 0%, 84%); --light-gray-70: hsla(0, 0%, 84%, 0.7); --bittersweet-shimmer: hsl(0, 43%, 51%); /** * typography */ /* font-family */ --ff-poppins: 'Poppins', sans-serif; /* font-size */ --fs-1: 24px; --fs-2: 18px; --fs-3: 17px; --fs-4: 16px; --fs-5: 15px; --fs-6: 14px; --fs-7: 13px; --fs-8: 11px; /* font-weight */ --fw-300: 300; --fw-400: 400; --fw-500: 500; --fw-600: 600; /** * shadow */ --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.25); --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.25); --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.25); --shadow-4: 0 25px 50px hsla(0, 0%, 0%, 0.15); --shadow-5: 0 24px 80px hsla(0, 0%, 0%, 0.25); /** * transition */ --transition-1: 0.25s ease; --transition-2: 0.5s ease-in-out; } /** * light theme - same token names, repointed to light-appropriate values. Applied via a * `data-theme="light"` attribute that assets/js/script.js sets on ; every rule below this * point in the file reads colors exclusively through these custom properties, so no component CSS * needs to know which theme is active. */ [data-theme="light"] { --bg-gradient-onyx: linear-gradient( to bottom right, hsl(220, 20%, 96%) 3%, hsl(220, 16%, 91%) 97% ); --bg-gradient-jet: linear-gradient( to bottom right, hsla(220, 20%, 88%, 0.4) 0%, hsla(220, 20%, 88%, 0) 100% ), hsl(0, 0%, 100%); --bg-gradient-accent-1: linear-gradient( to bottom right, hsl(134, 52%, 45%) 0%, hsla(134, 45%, 45%, 0) 50% ); --bg-gradient-accent-2: linear-gradient( 135deg, hsla(134, 52%, 45%, 0.16) 0%, hsla(134, 45%, 45%, 0) 59.86% ), hsl(0, 0%, 100%); --border-gradient-onyx: linear-gradient( to bottom right, hsl(220, 15%, 80%) 0%, hsla(220, 15%, 80%, 0) 50% ); --text-gradient-accent: linear-gradient( to right, hsl(134, 55%, 40%), hsl(150, 55%, 34%) ); --btn-hover-gradient: linear-gradient( 135deg, hsl(134, 55%, 45%) 0%, hsl(152, 65%, 24%) 100% ); --navbar-bg: hsla(0, 0%, 100%, 0.75); --select-hover-bg: hsl(220, 20%, 92%); --scrollbar-thumb-bg: hsla(220, 15%, 20%, 0.14); --scrollbar-thumb-shadow: hsla(220, 15%, 20%, 0.1); --scrollbar-thumb-hover-bg: hsla(220, 15%, 20%, 0.22); --jet: hsl(220, 13%, 85%); --onyx: hsl(220, 14%, 93%); --eerie-black-1: hsl(220, 20%, 97%); --eerie-black-2: hsl(0, 0%, 100%); --smoky-black: hsl(220, 20%, 93%); --white-1: hsl(220, 20%, 12%); --white-2: hsl(220, 18%, 16%); --accent: hsl(134, 55%, 38%); --accent-muted: hsl(134, 35%, 40%); --light-gray: hsl(220, 10%, 32%); --light-gray-70: hsl(220, 9%, 46%); --bittersweet-shimmer: hsl(0, 55%, 44%); --shadow-1: -4px 8px 24px hsla(220, 20%, 40%, 0.12); --shadow-2: 0 16px 30px hsla(220, 20%, 40%, 0.12); --shadow-3: 0 16px 40px hsla(220, 20%, 40%, 0.12); --shadow-4: 0 25px 50px hsla(220, 20%, 40%, 0.1); --shadow-5: 0 24px 80px hsla(220, 20%, 40%, 0.14); } /*-----------------------------------*\ #RESET \*-----------------------------------*/ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } a { text-decoration: none; } li { list-style: none; } img, svg, a, button, time, span { display: block; } button { font: inherit; background: none; border: none; text-align: left; cursor: pointer; } input, textarea { display: block; width: 100%; background: none; font: inherit; } ::selection { background: var(--accent); color: var(--smoky-black); } :focus { outline-color: var(--accent); } html { font-family: var(--ff-poppins); color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } body { background: var(--smoky-black); transition: background-color var(--transition-2); } .navbar { transition: background var(--transition-2), border-color var(--transition-2); } /*-----------------------------------*\ #REUSED STYLE \*-----------------------------------*/ .sidebar, article { background: var(--eerie-black-2); border: 1px solid var(--jet); border-radius: 20px; padding: 15px; box-shadow: var(--shadow-1); z-index: 1; transition: background var(--transition-2), border-color var(--transition-2); } .separator { width: 100%; height: 1px; background: var(--jet); margin: 16px 0; } .icon-box { position: relative; background: var(--border-gradient-onyx); width: 30px; height: 30px; border-radius: 8px; display: flex; justify-content: center; align-items: center; font-size: 16px; color: var(--accent); box-shadow: var(--shadow-1); z-index: 1; } .icon-box::before { content: ""; position: absolute; inset: 1px; background: var(--eerie-black-1); border-radius: inherit; z-index: -1; } article { display: none; } article.active { display: block; animation: fade 0.5s ease backwards; } @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } .h2, .h3, .h4, .h5 { color: var(--white-2); text-transform: capitalize; } .h2 { font-size: var(--fs-1); } .h3 { font-size: var(--fs-2); } .h4 { font-size: var(--fs-4); } .h5 { font-size: var(--fs-7); font-weight: var(--fw-500); } .article-title { position: relative; padding-bottom: 7px; } .article-title::after { content: ""; position: absolute; bottom: 0; left: 0; width: 30px; height: 3px; background: var(--text-gradient-accent); border-radius: 3px; } .has-scrollbar::-webkit-scrollbar { width: 5px; /* for vertical scrollbar */ height: 5px; /* for horizontal scrollbar */ } .has-scrollbar::-webkit-scrollbar-track { background: var(--onyx); border-radius: 5px; } .has-scrollbar::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 5px; } .has-scrollbar::-webkit-scrollbar-button { width: 20px; } .content-card { position: relative; background: var(--border-gradient-onyx); padding: 15px; padding-top: 45px; border-radius: 14px; box-shadow: var(--shadow-2); cursor: pointer; z-index: 1; } /* Every .content-card is its own stacking context (position: relative + z-index above), so a platform card's open dropdown menu only outranks elements *inside that same card* - against a later sibling card (equal z-index, later in DOM order) it loses and renders underneath it. .content-card.dropdown-open (toggled in script.js) raises the whole card while its dropdown is open, so the menu clears every sibling card instead of just its own. 6, not 5: .navbar (below) is also z-index 5, and at both the >=1024px layout (where .navbar and every .content-card share .main-content's stacking context) and mobile widths (where .navbar is a fixed bottom bar in the same root stacking context as everything else) a tie would only resolve correctly by DOM-order coincidence, not by this rule actually outranking it. The highest z-index anywhere else in this stylesheet is 5, so 6 is deliberate headroom, not an arbitrary bump. */ .content-card.dropdown-open { z-index: 6; } .content-card::before { content: ""; position: absolute; inset: 1px; background: var(--bg-gradient-jet); border-radius: inherit; z-index: -1; } /*-----------------------------------*\ #MAIN \*-----------------------------------*/ main { margin: 15px 12px; margin-bottom: 75px; min-width: 259px; } /*-----------------------------------*\ #SIDEBAR \*-----------------------------------*/ .sidebar { margin-bottom: 15px; max-height: 112px; overflow: hidden; transition: var(--transition-2); } .sidebar.active { max-height: 405px; } .sidebar-info { position: relative; display: flex; justify-content: flex-start; align-items: center; gap: 15px; } .avatar-box { background: var(--bg-gradient-onyx); border-radius: 20px; } .info-content .name { color: var(--white-2); font-size: var(--fs-3); font-weight: var(--fw-500); letter-spacing: -0.25px; margin-bottom: 10px; } .info-content .title { color: var(--white-1); background: var(--onyx); font-size: var(--fs-8); font-weight: var(--fw-300); width: max-content; padding: 3px 12px; border-radius: 8px; } .info_more-btn { position: absolute; top: -15px; right: -15px; border-radius: 0 15px; font-size: 13px; color: var(--accent); background: var(--border-gradient-onyx); padding: 10px; box-shadow: var(--shadow-2); transition: var(--transition-1); z-index: 1; } .info_more-btn::before { content: ""; position: absolute; inset: 1px; border-radius: inherit; background: var(--bg-gradient-jet); transition: var(--transition-1); z-index: -1; } .info_more-btn:hover, .info_more-btn:focus { background: var(--bg-gradient-accent-1); } .info_more-btn:hover::before, .info_more-btn:focus::before { background: var(--bg-gradient-accent-2); } .info_more-btn span { display: none; } .sidebar-info_more { opacity: 0; visibility: hidden; transition: var(--transition-2); } .sidebar.active .sidebar-info_more { opacity: 1; visibility: visible; } .contacts-list { display: grid; grid-template-columns: 1fr; gap: 16px; } .contact-item { min-width: 100%; display: flex; align-items: center; gap: 16px; } .contact-info { max-width: calc(100% - 46px); width: calc(100% - 46px); } .contact-title { color: var(--light-gray-70); font-size: var(--fs-8); text-transform: uppercase; margin-bottom: 2px; } .contact-info :is(.contact-link, time, address) { color: var(--white-2); font-size: var(--fs-7); } .contact-info address { font-style: normal; } .social-list { display: flex; justify-content: flex-start; align-items: center; gap: 15px; padding-bottom: 4px; padding-left: 7px; } .social-item .social-link { color: var(--light-gray-70); font-size: 18px; } .social-item .social-link:hover { color: var(--light-gray); } /*-----------------------------------*\ #NAVBAR \*-----------------------------------*/ .navbar { position: fixed; bottom: 0; left: 0; width: 100%; background: var(--navbar-bg); backdrop-filter: blur(10px); border: 1px solid var(--jet); border-radius: 12px 12px 0 0; box-shadow: var(--shadow-2); z-index: 5; } .navbar-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 0 10px; } .navbar-link { color: var(--light-gray); font-size: var(--fs-8); padding: 20px 7px; transition: color var(--transition-1); } .navbar-link:hover, .navbar-link:focus { color: var(--light-gray-70); } .navbar-link.active { color: var(--accent); } /*-----------------------------------*\ #ABOUT \*-----------------------------------*/ .about .article-title { margin-bottom: 15px; } .about-text { color: var(--light-gray); font-size: var(--fs-6); font-weight: var(--fw-300); line-height: 1.6; } .about-text p { margin-bottom: 15px; } /** * #service */ .service { margin-bottom: 35px; } .service-title { margin-bottom: 20px; } .service-list { display: grid; grid-template-columns: 1fr; gap: 20px; } .service-item { position: relative; background: var(--border-gradient-onyx); padding: 20px; border-radius: 14px; box-shadow: var(--shadow-2); z-index: 1; } .service-item::before { content: ""; position: absolute; inset: 1px; background: var(--bg-gradient-jet); border-radius: inherit; z-index: -1; } .service-icon-box { margin-bottom: 10px; } .service-icon-box img { margin: auto; } .service-icon-box svg { margin: auto; width: 34px; height: 34px; color: var(--accent); } .service-content-box { text-align: center; } .service-item-title { margin-bottom: 7px; } .service-item-text { color: var(--light-gray); font-size: var(--fs-6); font-weight: var(--fw-3); line-height: 1.6; } /*-----------------------------------*\ #FEATURES \*-----------------------------------*/ .article-title { margin-bottom: 30px; } /** * education and experience */ .timeline { margin-bottom: 30px; } .timeline .title-wrapper { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; } .timeline-list { font-size: var(--fs-6); margin-left: 45px; } .timeline-item { position: relative; } .timeline-item:not(:last-child) { margin-bottom: 20px; } .timeline-item-title { font-size: var(--fs-6); line-height: 1.3; margin-bottom: 7px; } .timeline-list span { color: var(--accent-muted); font-weight: var(--fw-400); line-height: 1.6; } .timeline-item:not(:last-child)::before { content: ""; position: absolute; top: -25px; left: -30px; width: 1px; height: calc(100% + 50px); background: var(--jet); } .timeline-item::after { content: ""; position: absolute; top: 5px; left: -33px; height: 6px; width: 6px; background: var(--text-gradient-accent); border-radius: 50%; box-shadow: 0 0 0 4px var(--jet); } .timeline-text { color: var(--light-gray); font-weight: var(--fw-300); line-height: 1.6; } /*-----------------------------------*\ #PORTFOLIO \*-----------------------------------*/ .filter-list { display: none; } .filter-select-box { position: relative; margin-bottom: 25px; } .filter-select { background: var(--eerie-black-2); color: var(--light-gray); display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 16px; border: 1px solid var(--jet); border-radius: 14px; font-size: var(--fs-6); font-weight: var(--fw-300); } .filter-select.active .select-icon { transform: rotate(0.5turn); } .select-list { background: var(--eerie-black-2); position: absolute; top: calc(100% + 6px); width: 100%; padding: 6px; border: 1px solid var(--jet); border-radius: 14px; z-index: 2; opacity: 0; visibility: hidden; pointer-events: none; transition: 0.15s ease-in-out; } .filter-select.active + .select-list { opacity: 1; visibility: visible; pointer-events: all; } .select-item button { background: var(--eerie-black-2); color: var(--light-gray); font-size: var(--fs-6); font-weight: var(--fw-300); text-transform: capitalize; width: 100%; padding: 8px 10px; border-radius: 8px; } .select-item button:hover { --eerie-black-2: var(--select-hover-bg); } .project-list { display: grid; grid-template-columns: 1fr; gap: 30px; margin-bottom: 10px; } .project-item { display: none; } .project-item.active { display: block; animation: scaleUp 0.25s ease forwards; } @keyframes scaleUp { 0% { transform: scale(0.5); } 100% { transform: scale(1); } } .project-img { position: relative; width: 100%; height: 200px; border-radius: 16px; overflow: hidden; margin-bottom: 15px; } .project-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-1); cursor: pointer; /* click-to-zoom via img-previewer, see script.js */ } .project-img img:hover { transform: scale(1.05); } .project-title, .project-category { margin-left: 10px; } .project-title { color: var(--white-2); font-size: var(--fs-5); font-weight: var(--fw-400); text-transform: capitalize; line-height: 1.3; } .project-category { color: var(--light-gray-70); font-size: var(--fs-6); font-weight: var(--fw-300); } /*-----------------------------------*\ #THEME TOGGLE \*-----------------------------------*/ .navbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-right: 8px; } .navbar-list { flex: 1; } .theme-toggle { display: flex; align-items: center; gap: 2px; background: var(--onyx); border-radius: 10px; padding: 3px; } .theme-toggle button { display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; border-radius: 7px; color: var(--light-gray-70); font-size: 15px; transition: var(--transition-1); } .theme-toggle button:hover { color: var(--light-gray); } .theme-toggle button[aria-pressed="true"] { background: var(--eerie-black-2); color: var(--accent); box-shadow: var(--shadow-1); } /*-----------------------------------*\ #SIDEBAR QUICK FACTS \*-----------------------------------*/ [data-sidebar-version] { color: var(--accent); font-weight: var(--fw-500); } /*-----------------------------------*\ #HIGHLIGHTS (About page - replaces the template's testimonials) \*-----------------------------------*/ .highlights { margin-bottom: 30px; } .highlights-title { margin-bottom: 20px; } .highlights-list { display: flex; justify-content: flex-start; align-items: stretch; gap: 15px; margin: 0 -15px; padding: 10px 15px 20px; overflow-x: auto; scroll-behavior: smooth; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; } .highlights-item { min-width: 68%; scroll-snap-align: center; } .highlight-card { height: 100%; padding-top: 18px; cursor: default; } .highlight-number { display: block; font-size: 34px; font-weight: var(--fw-600); background: var(--text-gradient-accent); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 8px; } .highlight-label { color: var(--light-gray); font-size: var(--fs-6); font-weight: var(--fw-300); line-height: 1.5; } /*-----------------------------------*\ #BUILT WITH (About page - replaces the template's client-logo strip) \*-----------------------------------*/ .built-with { margin-bottom: 15px; } .built-with-title { margin-bottom: 16px; } .built-with-list { display: flex; flex-wrap: wrap; gap: 10px; } .built-with-list a { background: var(--onyx); color: var(--light-gray); font-size: var(--fs-7); font-weight: var(--fw-400); padding: 8px 14px; border: 1px solid var(--jet); border-radius: 20px; transition: var(--transition-1); } .built-with-list a:hover { color: var(--accent); border-color: var(--accent); } /*-----------------------------------*\ #SCREENSHOT PLACEHOLDERS (Screenshots page, until real screenshots replace them) \*-----------------------------------*/ .project-img--placeholder { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 8px; background: var(--eerie-black-1); border: 1px dashed var(--jet); color: var(--light-gray-70); } .project-img--placeholder ion-icon { font-size: 32px; } .project-img--placeholder span { font-size: var(--fs-8); text-align: center; padding: 0 12px; } /*-----------------------------------*\ #CHANGELOG (replaces the template's blog grid) \*-----------------------------------*/ .changelog-posts { margin-bottom: 10px; } .changelog-list { display: grid; grid-template-columns: 1fr; gap: 20px; } .changelog-card { padding-top: 20px; } .changelog-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .changelog-tag { background: var(--accent); color: var(--smoky-black); font-size: var(--fs-8); font-weight: var(--fw-600); padding: 3px 10px; border-radius: 20px; } .changelog-meta time { color: var(--light-gray-70); font-size: var(--fs-6); font-weight: var(--fw-300); } .changelog-title { margin-bottom: 8px; } .changelog-text { color: var(--light-gray); font-size: var(--fs-6); font-weight: var(--fw-300); line-height: 1.6; margin-bottom: 10px; } .changelog-link { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-size: var(--fs-6); font-weight: var(--fw-500); } .changelog-link svg { width: 14px; height: 14px; } .changelog-footer { display: flex; justify-content: center; margin-top: 25px; } /*-----------------------------------*\ #DOWNLOAD (replaces the template's contact form/map) \*-----------------------------------*/ .release-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 15px; background: var(--border-gradient-onyx); border-radius: 16px; padding: 20px; margin-bottom: 25px; } .release-hero-label { color: var(--light-gray-70); font-size: var(--fs-8); text-transform: uppercase; margin-bottom: 4px; } .release-hero-version { font-size: var(--fs-1); } .release-hero-date { color: var(--light-gray); font-size: var(--fs-6); font-weight: var(--fw-300); margin-top: 2px; } .release-hero-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: var(--fs-6); font-weight: var(--fw-500); } .platforms { margin-bottom: 15px; } .platform-list { display: grid; grid-template-columns: 1fr; gap: 20px; } .platform-card { text-align: center; padding-top: 25px; } .platform-card > svg { width: 36px; height: 36px; color: var(--accent); margin: 0 auto 10px; } .platform-card h4 { margin-bottom: 6px; } .platform-card p { color: var(--light-gray); font-size: var(--fs-6); font-weight: var(--fw-300); line-height: 1.5; margin-bottom: 16px; } /* Sits under a platform's download dropdown, for a caveat that would be dishonest to bury in a doc the user has to already know exists (currently: Defender false-positives the Windows installer). */ .platform-card .platform-note { color: var(--light-gray-70); font-size: var(--fs-8); line-height: 1.5; margin: 14px 0 0; } .platform-card .platform-note a { color: var(--accent); text-decoration: underline; } .platform-download-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--border-gradient-onyx); color: var(--accent); padding: 12px 16px; border-radius: 12px; font-size: var(--fs-6); font-weight: var(--fw-500); transition: var(--transition-1); } .platform-download-btn:hover { /* btn-hover-gradient, not bg-gradient-accent-1: both its stops are fully opaque (no fade to transparent), unlike bg-gradient-accent-1 (designed for an avatar glow, fading out at 50%) which made the label illegible partway through - see CHANGELOG. Its own two stops are much further apart in lightness than text-gradient-accent's (designed for a thin text underline, not a whole button-sized area) so the gradient actually reads as one instead of looking flat. */ background: var(--btn-hover-gradient); color: var(--smoky-black); } .platform-download-btn[aria-disabled="true"] { opacity: 0.6; pointer-events: none; } .dropdown-caret { margin-left: -2px; transition: transform 0.15s ease-in-out; } .platform-download-dropdown.active .dropdown-caret { transform: rotate(180deg); } .platform-download-dropdown { position: relative; } .platform-download-menu { position: absolute; top: calc(100% + 6px); left: 0; width: 100%; background: var(--eerie-black-2); border: 1px solid var(--jet); border-radius: 12px; padding: 6px; box-shadow: var(--shadow-2); z-index: 2; opacity: 0; visibility: hidden; pointer-events: none; transition: 0.15s ease-in-out; } .platform-download-dropdown.active .platform-download-menu { opacity: 1; visibility: visible; pointer-events: all; } .platform-download-menu a { color: var(--light-gray); font-size: var(--fs-6); font-weight: var(--fw-400); padding: 9px 10px; border-radius: 8px; transition: var(--transition-1); } .platform-download-menu a:hover { background: var(--select-hover-bg); color: var(--accent); } .platform-download-menu a[aria-disabled="true"] { opacity: 0.5; pointer-events: none; } .platform-download-menu .menu-group-label { color: var(--light-gray-70); font-size: var(--fs-8); font-weight: var(--fw-500); text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 10px 3px; cursor: default; } .platform-download-menu li + li .menu-group-label { border-top: 1px solid var(--jet); margin-top: 4px; } .source-note { color: var(--light-gray); font-size: var(--fs-6); font-weight: var(--fw-300); line-height: 1.6; text-align: center; } .source-note a { color: var(--accent); text-decoration: underline; } /*-----------------------------------*\ #IMG-PREVIEWER OVERRIDES \*-----------------------------------*/ /* The vendored img-previewer stylesheet references var(--header-bg-opcity) - a typo for --header-bg-opacity, which is what its JS actually sets - so the header bar behind the counter and the reset/rotate/close buttons never gets a background. Restore it here (the vendored file stays unmodified). A translucent-black bar (rgba(0,0,0,...)) is the same colour as the lightbox's own near-black modal backdrop, so over a dark-theme page the two blend and it never reads as a distinct bar; use a solid grey plus a hairline border for guaranteed contrast. The lightbox is always a dark overlay regardless of the host page's theme, so this is intentionally not tied to [data-theme]. */ .img-pre__header { background: rgb(75, 75, 82) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.18); } /* The "1 / 7" counter (three spans: current / delimiter / total) was stacking onto three lines because this stylesheet's own global reset - `img, svg, a, button, time, span { display: block }` (search "span { display: block" above) - makes EVERY span a block element, so the img-previewer counter's spans each take their own line. Force just these back to inline so the whole "1 / 7" sits on one line. */ .img-pre__nums span { display: inline; } .img-pre__nums p { margin: 0; } /*-----------------------------------*\ #RESPONSIVE \*-----------------------------------*/ /** * responsive larger than 450px screen */ @media (min-width: 450px) { /** * #PORTFOLIO */ .project-img { height: auto; } } /** * responsive larger than 580px screen */ @media (min-width: 580px) { /** * CUSTOM PROPERTY */ :root { /** * typography */ --fs-1: 32px; --fs-2: 24px; --fs-3: 26px; --fs-4: 18px; --fs-6: 15px; --fs-7: 15px; --fs-8: 12px; } /** * #REUSED STYLE */ .sidebar, article { width: 520px; margin-inline: auto; padding: 30px; } .article-title { font-weight: var(--fw-600); padding-bottom: 15px; } .article-title::after { width: 40px; height: 5px; } .icon-box { width: 48px; height: 48px; border-radius: 12px; font-size: 18px; } /** * #MAIN */ main { margin-top: 60px; margin-bottom: 100px; } /** * #SIDEBAR */ .sidebar { max-height: 180px; margin-bottom: 30px; } .sidebar.active { max-height: 584px; } .sidebar-info { gap: 25px; } .avatar-box { border-radius: 30px; } .avatar-box img { width: 120px; } .info-content .name { margin-bottom: 15px; } .info-content .title { padding: 5px 18px; } .info_more-btn { top: -30px; right: -30px; padding: 10px 15px; } .info_more-btn span { display: block; font-size: var(--fs-8); } .info_more-btn svg { display: none; } .separator { margin: 32px 0; } .contacts-list { gap: 20px; } .contact-info { max-width: calc(100% - 64px); width: calc(100% - 64px); } /** * #NAVBAR */ .navbar { border-radius: 20px 20px 0 0; } .navbar-list { gap: 20px; } .navbar-link { --fs-8: 14px; } /** * #ABOUT */ .about .article-title { margin-bottom: 20px; } .about-text { margin-bottom: 40px; } /* service */ .service-item { display: flex; justify-content: flex-start; align-items: flex-start; gap: 18px; padding: 30px; } .service-icon-box { margin-bottom: 0; margin-top: 5px; } .service-content-box { text-align: left; } .content-card { padding: 30px; padding-top: 25px; } /** * #FEATURES */ .timeline-list { margin-left: 65px; } .timeline-item:not(:last-child)::before { left: -40px; } .timeline-item::after { height: 8px; width: 8px; left: -43px; } /** * #SCREENSHOTS */ .project-img { border-radius: 16px; } } /** * responsive larger than 768px screen */ @media (min-width: 768px) { /** * REUSED STYLE */ .sidebar, article { width: 700px; } .has-scrollbar::-webkit-scrollbar-button { width: 100px; } /** * SIDEBAR */ .contacts-list { grid-template-columns: 1fr 1fr; gap: 30px 15px; } /** * NAVBAR */ .navbar-link { --fs-8: 15px; } /** * SCREENSHOTS */ .article-title { padding-bottom: 20px; } .filter-select-box { display: none; } .filter-list { display: flex; justify-content: flex-start; align-items: center; gap: 25px; padding-left: 5px; margin-bottom: 30px; } .filter-item button { color: var(--light-gray); font-size: var(--fs-5); transition: var(--transition-1); } .filter-item button:hover { color: var(--light-gray-70); } .filter-item button.active { color: var(--accent); } .project-list { grid-template-columns: 1fr 1fr; } } /** * responsive larger than 1024px screen */ @media (min-width: 1024px) { /** * CUSTOM PROPERTY */ /* :not([data-theme="light"]) outranks the plain [data-theme="light"] override above on specificity, so this large-screen shadow tuning only ever applies to the dark theme - light theme keeps the shadow values defined in its own block regardless of screen width. */ :root:not([data-theme="light"]) { /** * shadow */ --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.125); --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.125); --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.125); } /** * REUSED STYLE */ .sidebar, article { width: 950px; box-shadow: var(--shadow-5); } /** * MAIN */ main { margin-bottom: 60px; } .main-content { position: relative; width: max-content; margin: auto; } /** * NAVBAR */ .navbar { position: absolute; bottom: auto; top: 0; left: auto; right: 0; width: max-content; border-radius: 0 20px; padding: 0 20px; box-shadow: none; } .navbar-list { gap: 30px; padding: 0 20px; } .navbar-link { font-weight: var(--fw-500); } /* The navbar is an absolutely-positioned overlay pinned to the top-right of .main-content at this breakpoint, so it no longer pushes article content down on its own - without this, a wide enough article-title (long page name, or just this breakpoint's larger heading font) renders underneath it. Reserve enough top clearance that the title always starts below the navbar, regardless of how wide either one renders. */ article { padding-top: 90px; } /** * ABOUT */ /* service */ .service-list { grid-template-columns: 1fr 1fr; gap: 20px 25px; } /* highlights */ .highlights-item { min-width: calc(33.33% - 10px); } /** * SCREENSHOTS */ .project-list { grid-template-columns: repeat(3, 1fr); } /** * CHANGELOG */ .changelog-list { grid-template-columns: 1fr 1fr; } /** * DOWNLOAD */ .platform-list { grid-template-columns: repeat(3, 1fr); } } /** * responsive larger than 1250px screen */ @media (min-width: 1250px) { /** * RESET */ body::-webkit-scrollbar { width: 20px; } body::-webkit-scrollbar-track { background: var(--smoky-black); } body::-webkit-scrollbar-thumb { border: 5px solid var(--smoky-black); background: var(--scrollbar-thumb-bg); border-radius: 20px; box-shadow: inset 1px 1px 0 var(--scrollbar-thumb-shadow), inset -1px -1px 0 var(--scrollbar-thumb-shadow); } body::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover-bg); } body::-webkit-scrollbar-button { height: 60px; } /** * REUSED STYLE */ .sidebar, article { width: auto; } article { min-height: 100%; } /** * MAIN */ main { max-width: 1200px; margin-inline: auto; display: flex; justify-content: center; align-items: stretch; gap: 25px; } .main-content { min-width: 75%; width: 75%; margin: 0; } /** * SIDEBAR */ .sidebar { position: sticky; top: 60px; max-height: max-content; height: 100%; margin-bottom: 0; padding-top: 60px; z-index: 1; } .sidebar-info { flex-direction: column; } .avatar-box img { width: 150px; } .info-content .name { white-space: nowrap; text-align: center; } .info-content .title { margin: auto; } .info_more-btn { display: none; } .sidebar-info_more { opacity: 1; visibility: visible; } .contacts-list { grid-template-columns: 1fr; } .contact-info :is(.contact-link) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .contact-info :is(.contact-link, time, address) { --fs-7: 14px; font-weight: var(--fw-300); } .separator:last-of-type { margin: 15px 0; opacity: 0; } .social-list { justify-content: center; } /** * FEATURES */ .timeline-text { max-width: 700px; } } /*-----------------------------------*\ #COMPARISON \*-----------------------------------*/ .comparison { margin-block-start: 4px; } .compare-intro { color: var(--light-gray); font-size: var(--fs-6); font-weight: var(--fw-300); line-height: 1.7; margin-block-end: 22px; } .compare-intro em { color: var(--white-2); font-style: normal; font-weight: var(--fw-500); } .compare-wrap { overflow-x: auto; } .compare-table { width: 100%; min-width: 460px; border-collapse: collapse; } .compare-table th, .compare-table td { padding: 13px 16px; text-align: left; font-size: var(--fs-6); border-block-end: 1px solid var(--jet); } .compare-table thead th { font-size: var(--fs-5); font-weight: var(--fw-600); color: var(--light-gray); border-block-end: 2px solid var(--jet); } .compare-table tbody th { font-weight: var(--fw-400); color: var(--light-gray-70); width: 36%; } .compare-table .c-wx { color: var(--white-2); font-weight: var(--fw-500); background: hsla(134, 52%, 55%, 0.07); } .compare-table thead .c-head-wx { color: var(--accent); background: hsla(134, 52%, 55%, 0.07); border-radius: 8px 8px 0 0; } .compare-table tbody tr:last-child .c-wx { border-block-end: none; border-radius: 0 0 8px 8px; } .compare-table .c-npp { color: var(--light-gray-70); } .c-plus { color: var(--accent); font-weight: var(--fw-600); } .compare-note { margin-block-start: 24px; padding: 16px 18px; border: 1px solid var(--jet); border-radius: 14px; color: var(--light-gray); font-size: var(--fs-6); font-weight: var(--fw-300); line-height: 1.7; } .compare-note strong { color: var(--white-2); font-weight: var(--fw-600); }