/*-----------------------------------*\ #style.css \*-----------------------------------*/ /** * copyright 2022 @codewithsadee */ /*-----------------------------------*\ #CUSTOM PROPERTY \*-----------------------------------*/ :root { /** * colors */ /* 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-yellow-1: linear-gradient( to bottom right, hsl(45, 100%, 71%) 0%, hsla(36, 100%, 69%, 0) 50% ); --bg-gradient-yellow-2: linear-gradient( 135deg, hsla(45, 100%, 71%, 0.251) 0%, hsla(35, 100%, 68%, 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-yellow: linear-gradient( to right, hsl(45, 100%, 72%), hsl(35, 100%, 68%) ); /* 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%); --orange-yellow-crayola: hsl(45, 100%, 72%); --vegas-gold: hsl(45, 54%, 58%); --light-gray: hsl(0, 0%, 84%); --light-gray-70: hsla(0, 0%, 84%, 0.7); --bittersweet-shimmer: hsl(0, 43%, 51%); /* the sidebar tags: an amber hairline and a wash of the same, both faint enough to read as a pill rather than as a button */ --tag-border: hsla(45, 100%, 72%, 0.42); --tag-fill: hsl(45, 15%, 14%); /** * Roles that must not simply invert with the theme, or that were hard-coded * before light mode existed. */ /* text drawn on top of the amber accent - stays dark in both themes */ --on-accent: hsl(0, 0%, 7%); /* the resume logo chips are composed on white artwork; they stay light */ --logo-plate: hsl(0, 0%, 98%); --navbar-bg: hsla(240, 1%, 17%, 0.75); --select-hover: hsl(240, 2%, 20%); --scrollbar-thumb: hsla(0, 0%, 100%, 0.1); --scrollbar-thumb-hover: hsla(0, 0%, 100%, 0.15); --scrollbar-thumb-inset: hsla(0, 0%, 100%, 0.11); color-scheme: dark; /** * 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 * * Only the palette changes; every rule below reads these variables, so nothing * else needs a light-mode counterpart. * * data-theme is set by an inline script in before first paint - from * localStorage if the visitor has chosen, otherwise from prefers-color-scheme. * Doing it there rather than with a CSS media query means these values are * written once instead of twice, and there is no flash of the wrong theme. */ :root[data-theme="light"] { /* gradient */ --bg-gradient-onyx: linear-gradient( to bottom right, hsl(0, 0%, 97%) 3%, hsl(0, 0%, 91%) 97% ); --bg-gradient-jet: linear-gradient( to bottom right, hsla(0, 0%, 100%, 0.9) 0%, hsla(0, 0%, 98%, 0) 100% ), hsl(0, 0%, 100%); --bg-gradient-yellow-1: linear-gradient( to bottom right, hsl(45, 100%, 78%) 0%, hsla(36, 100%, 76%, 0) 50% ); --bg-gradient-yellow-2: linear-gradient( 135deg, hsla(45, 100%, 71%, 0.32) 0%, hsla(35, 100%, 68%, 0) 59.86% ), hsl(0, 0%, 100%); --border-gradient-onyx: linear-gradient( to bottom right, hsl(0, 0%, 82%) 0%, hsla(0, 0%, 82%, 0) 50% ); /* darkened so amber text stays legible on white */ --text-gradient-yellow: linear-gradient( to right, hsl(38, 92%, 44%), hsl(30, 92%, 42%) ); /* solid */ --jet: hsl(0, 0%, 87%); --onyx: hsl(0, 0%, 91%); --eerie-black-1: hsl(0, 0%, 100%); --eerie-black-2: hsl(0, 0%, 100%); --smoky-black: hsl(0, 0%, 94%); --white-1: hsl(240, 4%, 16%); --white-2: hsl(240, 6%, 11%); --orange-yellow-crayola: hsl(35, 92%, 42%); --vegas-gold: hsl(38, 68%, 38%); --light-gray: hsl(240, 4%, 34%); --light-gray-70: hsla(240, 4%, 34%, 0.78); --bittersweet-shimmer: hsl(0, 62%, 45%); --tag-border: hsla(35, 92%, 42%, 0.38); --tag-fill: hsl(45, 100%, 96%); /* roles that do not invert with the theme */ --on-accent: hsl(0, 0%, 7%); --logo-plate: hsl(0, 0%, 98%); --navbar-bg: hsla(0, 0%, 100%, 0.82); --select-hover: hsl(0, 0%, 94%); --scrollbar-thumb: hsla(240, 6%, 30%, 0.28); --scrollbar-thumb-hover: hsla(240, 6%, 30%, 0.42); --scrollbar-thumb-inset: hsla(240, 6%, 30%, 0.12); /* far softer over a light ground */ --shadow-1: -4px 8px 24px hsla(240, 8%, 45%, 0.16); --shadow-2: 0 16px 30px hsla(240, 8%, 45%, 0.14); --shadow-3: 0 16px 40px hsla(240, 8%, 45%, 0.14); --shadow-4: 0 25px 50px hsla(240, 8%, 45%, 0.10); --shadow-5: 0 24px 80px hsla(240, 8%, 45%, 0.16); color-scheme: light; } /*-----------------------------------*\ #RESET \*-----------------------------------*/ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } a { text-decoration: none; } [hidden] { display: none !important; } li { list-style: none; } img, ion-icon, 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(--orange-yellow-crayola); color: var(--on-accent); } :focus { outline-color: var(--orange-yellow-crayola); } html { font-family: var(--ff-poppins); } body { background: var(--smoky-black); } /*-----------------------------------*\ #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; } .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(--orange-yellow-crayola); 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; } .icon-box ion-icon { --ionicon-stroke-width: 35px; } 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; } /** * German capitalises nouns, not every word: `capitalize` turns "So arbeiten * wir" into "So Arbeiten Wir", which is simply wrong. The headings are already * written in the casing they should render in, so on the German page the * transform is dropped rather than fought. */ html[lang="de"] .h2, html[lang="de"] .h3, html[lang="de"] .h4, html[lang="de"] .h5, html[lang="de"] .select-item button { text-transform: none; } .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-yellow); 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(--orange-yellow-crayola); 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; } .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 \*-----------------------------------*/ /** * the collapse runs on .sidebar-info_more rather than the card, so the * language and theme controls at the foot of the card survive it. The card * itself just follows the panel's height. */ .sidebar { margin-bottom: 15px; } .sidebar-info { position: relative; display: flex; justify-content: flex-start; align-items: center; gap: 15px; } /** * avatar flip card. Hovering turns the memoji over to reveal the photo; the * responsive width rules still target .avatar-box img, so the front image keeps * sizing the box and the back is absolutely positioned to match it. */ .avatar-box { background: var(--bg-gradient-onyx); border-radius: 20px; perspective: 700px; } .avatar-flip { position: relative; border-radius: inherit; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.4, 0.15, 0.2, 1); } .avatar-box:hover .avatar-flip, .avatar-box:focus-within .avatar-flip, .avatar-box.is-flipped .avatar-flip { transform: rotateY(180deg); } .avatar-side { border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .avatar-box .avatar-back { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: rotateY(180deg); } @media (prefers-reduced-motion: reduce) { .avatar-flip { transition: none; } } .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; } /** * language switch - mirrors .info_more-btn in the opposite corner of the sidebar * so the two controls read as a pair at every breakpoint. */ .lang-switch { position: absolute; top: -15px; left: -15px; display: flex; align-items: center; gap: 3px; background: var(--border-gradient-onyx); border-radius: 15px 0; padding: 8px 10px; box-shadow: var(--shadow-2); font-size: var(--fs-8); z-index: 1; } .lang-switch::before { content: ""; position: absolute; inset: 1px; border-radius: inherit; background: var(--bg-gradient-jet); z-index: -1; } .lang-switch-item { color: var(--light-gray-70); font-weight: var(--fw-500); padding: 2px 7px; border-radius: 6px; transition: color var(--transition-1), background var(--transition-1); } .lang-switch-item:hover, .lang-switch-item:focus { color: var(--orange-yellow-crayola); } .lang-switch-item.active { color: var(--on-accent); background: var(--text-gradient-yellow); } /** * theme toggle. Sits at the opposite corner from the language switch. Below * 1250px .info_more-btn owns the top-right corner, so it tucks in beside the * language switch instead of colliding with it. On a phone the pair has to * stay inside the 80px avatar column, or the toggle lands on the name - hence * the tighter pill padding above and the shorter offset here, both widened * again at 580px where the sidebar has the room. */ .theme-toggle { position: absolute; top: -15px; left: 47px; display: flex; align-items: center; justify-content: center; width: 38px; height: 37px; color: var(--orange-yellow-crayola); background: var(--border-gradient-onyx); border-radius: 0 0 15px 15px; box-shadow: var(--shadow-2); font-size: 16px; transition: background var(--transition-1), color var(--transition-1); z-index: 1; } .theme-toggle::before { content: ""; position: absolute; inset: 1px; border-radius: inherit; background: var(--bg-gradient-jet); transition: background var(--transition-1); z-index: -1; } .theme-toggle:hover, .theme-toggle:focus { background: var(--bg-gradient-yellow-1); } .theme-toggle:hover::before, .theme-toggle:focus::before { background: var(--bg-gradient-yellow-2); } .theme-toggle ion-icon { --ionicon-stroke-width: 38px; } /** * specialism tags under the sidebar title. Full width of the card rather than * inside .info-content, so they wrap across the whole sidebar on mobile instead * of into the narrow column beside the avatar. */ .tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; margin-bottom: 2px; } .tag-item { color: var(--orange-yellow-crayola); background: var(--tag-border); font-size: 12px; font-weight: var(--fw-400); line-height: 1.2; padding: 5px 9px; border-radius: 7px; position: relative; z-index: 1; } .tag-item::before { content: ""; position: absolute; inset: 1px; background: var(--tag-fill); border-radius: inherit; z-index: -1; } .info_more-btn { position: absolute; top: -15px; right: -15px; border-radius: 0 15px; font-size: 13px; color: var(--orange-yellow-crayola); background: var(--border-gradient-onyx); padding: 10px; box-shadow: var(--shadow-2); transition: background var(--transition-1), color var(--transition-1); z-index: 1; } .info_more-btn::before { content: ""; position: absolute; inset: 1px; border-radius: inherit; background: var(--bg-gradient-jet); transition: background var(--transition-1); z-index: -1; } .info_more-btn:hover, .info_more-btn:focus { background: var(--bg-gradient-yellow-1); } .info_more-btn:hover::before, .info_more-btn:focus::before { background: var(--bg-gradient-yellow-2); } .info_more-btn span { display: none; } /* below 580px only the chevron shows, so it has to say which way the panel goes */ .info_more-btn ion-icon { transition: transform var(--transition-1); } .sidebar.active .info_more-btn ion-icon { transform: rotate(180deg); } .sidebar-info_more { max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: max-height var(--transition-2), opacity var(--transition-2), visibility var(--transition-2); } /* generous enough for the tag list at 320px, where it wraps the most */ .sidebar.active .sidebar-info_more { max-height: 600px; 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; } /* directly under the title pill in .info-content, not down with the contacts */ .social-list { display: flex; justify-content: flex-start; align-items: center; gap: 15px; margin-top: 12px; } .social-item .social-link { color: var(--light-gray-70); font-size: 18px; } .social-item .social-link:hover { color: var(--light-gray); } /** * language and theme, sitting where the (c) line used to. Static here and * absolute again at 1250px, where they go back to the card's top corners. */ .sidebar-controls { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 15px; } /** * relative, not static: both carry a ::before with inset: 1px for the inner * fill, and a static parent would hand that ::before the viewport as its * containing block - it then paints a full-page rectangle over the site. */ .sidebar-controls .lang-switch, .sidebar-controls .theme-toggle { position: relative; inset: auto; border-radius: 12px; } /** * the (c) line. In the stacked layout it belongs at the end of the page, * under the projects, not in the middle of the sidebar card; above 1250px * the sidebar copy is the one that shows. */ .sidebar-year, .page-year { text-align: center; color: var(--light-gray-70); font-size: var(--fs-8); font-weight: var(--fw-300); } .sidebar-year { display: none; margin-top: 12px; } .page-year { margin: 25px 0 15px; } /*-----------------------------------*\ #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(--orange-yellow-crayola); } /*-----------------------------------*\ #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; } /* the whole tile is the control that picks which process is shown */ .service-item-btn { display: block; width: 100%; color: inherit; text-align: inherit; } .service-item { cursor: pointer; transition: var(--transition-1); } .service-item:hover { box-shadow: var(--shadow-3); } .service-item.is-selected { background: var(--bg-gradient-yellow-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-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; } /** * back to top */ .to-top { position: fixed; right: 16px; bottom: 84px; display: grid; place-items: center; width: 44px; height: 44px; background: var(--border-gradient-onyx); color: var(--orange-yellow-crayola); border-radius: 12px; box-shadow: var(--shadow-3); font-size: 20px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: var(--transition-1); z-index: 5; } .to-top::before { content: ""; position: absolute; inset: 1px; background: var(--bg-gradient-jet); border-radius: inherit; z-index: -1; } .to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .to-top:hover, .to-top:focus { background: var(--bg-gradient-yellow-1); } .to-top:hover::before, .to-top:focus::before { background: var(--bg-gradient-yellow-2); } @media (min-width: 1250px) { /* the navbar stops being a fixed bottom bar here, so it can sit lower */ .to-top { right: 30px; bottom: 30px; } } /** * process */ .process-list { display: grid; gap: 25px; } .process-group { position: relative; background: var(--border-gradient-onyx); padding: 20px; border-radius: 14px; box-shadow: var(--shadow-2); z-index: 1; } .process-group::before { content: ""; position: absolute; inset: 1px; background: var(--bg-gradient-jet); border-radius: inherit; z-index: -1; } .process-group-title { margin-bottom: 14px; } .process-steps { counter-reset: step; } .process-step { position: relative; color: var(--light-gray); font-size: var(--fs-6); font-weight: var(--fw-300); line-height: 1.6; padding-left: 30px; counter-increment: step; } .process-step:not(:last-child) { margin-bottom: 12px; } .process-step::before { content: "0" counter(step); position: absolute; left: 0; top: 0; color: var(--orange-yellow-crayola); font-size: var(--fs-7); font-weight: var(--fw-500); } .process-note { color: var(--light-gray-70); font-size: var(--fs-7); font-weight: var(--fw-300); line-height: 1.6; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--jet); } @media (min-width: 768px) { .process-group { padding: 25px; } } /** * #testimonials */ .testimonials { margin-bottom: 30px; } .testimonials-title { margin-bottom: 20px; } .testimonials-list { display: flex; justify-content: flex-start; align-items: flex-start; gap: 15px; margin: 0 -15px; padding: 25px 15px; padding-bottom: 35px; overflow-x: auto; scroll-behavior: smooth; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; } .testimonials-item { min-width: 100%; scroll-snap-align: center; } .testimonials-avatar-box { position: absolute; top: 0; left: 0; transform: translate(15px, -25px); background: var(--bg-gradient-onyx); border-radius: 14px; box-shadow: var(--shadow-1); } .testimonials-item-title { margin-bottom: 7px; } .testimonials-text { color: var(--light-gray); font-size: var(--fs-6); font-weight: var(--fw-300); line-height: 1.6; display: -webkit-box; line-clamp: 4; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /** * #testimonials-modal */ .modal-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow-y: auto; overscroll-behavior: contain; z-index: 20; pointer-events: none; visibility: hidden; } .modal-container::-webkit-scrollbar { display: none; } .modal-container.active { pointer-events: all; visibility: visible; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: hsl(0, 0%, 5%); opacity: 0; visibility: hidden; pointer-events: none; z-index: 1; transition: var(--transition-1); } .overlay.active { opacity: 0.8; visibility: visible; pointer-events: all; } .testimonials-modal { background: var(--eerie-black-2); position: relative; padding: 15px; margin: 15px 12px; border: 1px solid var(--jet); border-radius: 14px; box-shadow: var(--shadow-5); transform: scale(1.2); opacity: 0; transition: var(--transition-1); z-index: 2; } .modal-container.active .testimonials-modal { transform: scale(1); opacity: 1; } .modal-close-btn { position: absolute; top: 15px; right: 15px; background: var(--onyx); border-radius: 8px; width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; color: var(--white-2); font-size: 18px; opacity: 0.7; } .modal-close-btn:hover, .modal-close-btn:focus { opacity: 1; } .modal-close-btn ion-icon { --ionicon-stroke-width: 50px; } .modal-avatar-box { background: var(--bg-gradient-onyx); width: max-content; border-radius: 14px; margin-bottom: 15px; box-shadow: var(--shadow-2); } .modal-img-wrapper > img { display: none; } .modal-title { margin-bottom: 4px; } .modal-content time { font-size: var(--fs-6); color: var(--light-gray-70); font-weight: var(--fw-300); margin-bottom: 10px; } .modal-content p { color: var(--light-gray); font-size: var(--fs-6); font-weight: var(--fw-300); line-height: 1.6; } /** * #clients */ .clients { margin-bottom: 15px; } .clients-list { display: flex; justify-content: flex-start; align-items: flex-start; gap: 15px; margin: 0 -15px; padding: 25px; padding-bottom: 25px; overflow-x: auto; scroll-behavior: smooth; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scroll-padding-inline: 25px; } .clients-item { min-width: 50%; scroll-snap-align: start; } .clients-item img { width: 100%; filter: grayscale(1); transition: var(--transition-1); } .clients-item img:hover { filter: grayscale(0); } /*-----------------------------------*\ #RESUME \*-----------------------------------*/ .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; } /* logo + heading row at the top of each timeline entry */ .timeline-item-head { display: flex; align-items: center; gap: 12px; margin-bottom: 7px; } /** * Company / university logos, one image file each in assets/images/logos/. * Each file is a pre-composed 128px square tile - brands that own a background * (LEDVANCE's orange, Porsche's white plate) fill it edge to edge, the rest are * inset on white - so the chip itself only needs to clip and size them. */ .timeline-logo { flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; overflow: hidden; background: var(--logo-plate); box-shadow: var(--shadow-1); } .timeline-logo img { width: 100%; height: 100%; object-fit: cover; } .timeline-item-head .timeline-item-title { margin-bottom: 2px; } .timeline-list span { color: var(--vegas-gold); 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: 15px; left: -33px; height: 6px; width: 6px; background: var(--text-gradient-yellow); 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; } /** * skills */ .skills-title { margin-bottom: 20px; } .skills-list { padding: 20px; } .skills-item:not(:last-child) { margin-bottom: 15px; } .skill .title-wrapper { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; } .skill-progress-bg { background: var(--jet); width: 100%; height: 8px; border-radius: 10px; } .skill-progress-fill { background: var(--text-gradient-yellow); height: 100%; border-radius: inherit; } /*-----------------------------------*\ #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); } .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-item > a { width: 100%; } .project-img { position: relative; width: 100%; height: 200px; border-radius: 16px; overflow: hidden; margin-bottom: 15px; } .project-img::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 1; transition: var(--transition-1); } .project-item > a:hover .project-img::before { background: hsla(0, 0%, 0%, 0.5); } .project-item-icon-box { --scale: 0.8; background: var(--jet); color: var(--orange-yellow-crayola); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(var(--scale)); font-size: 20px; padding: 18px; border-radius: 12px; opacity: 0; z-index: 1; transition: var(--transition-1); } .project-item > a:hover .project-item-icon-box { --scale: 1; opacity: 1; } .project-item-icon-box ion-icon { --ionicon-stroke-width: 50px; } .project-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-1); } .project-item > a:hover img { transform: scale(1.1); } .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); } /*-----------------------------------*\ #BLOG \*-----------------------------------*/ .blog-posts { margin-bottom: 10px; } .blog-posts-list { display: grid; grid-template-columns: 1fr; gap: 20px; } .blog-post-item > a { position: relative; background: var(--border-gradient-onyx); height: 100%; box-shadow: var(--shadow-4); border-radius: 16px; z-index: 1; } .blog-post-item > a::before { content: ""; position: absolute; inset: 1px; border-radius: inherit; background: var(--eerie-black-1); z-index: -1; } .blog-banner-box { width: 100%; height: 200px; border-radius: 12px; overflow: hidden; } .blog-banner-box img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-1); } .blog-post-item > a:hover .blog-banner-box img { transform: scale(1.1); } .blog-content { padding: 15px; } .blog-meta { display: flex; justify-content: flex-start; align-items: center; gap: 7px; margin-bottom: 10px; } .blog-meta :is(.blog-category, time) { color: var(--light-gray-70); font-size: var(--fs-6); font-weight: var(--fw-300); } .blog-meta .dot { background: var(--light-gray-70); width: 4px; height: 4px; border-radius: 4px; } .blog-item-title { margin-bottom: 10px; line-height: 1.3; transition: var(--transition-1); } .blog-post-item > a:hover .blog-item-title { color: var(--orange-yellow-crayola); } .blog-text { color: var(--light-gray); font-size: var(--fs-6); font-weight: var(--fw-300); line-height: 1.6; } /*-----------------------------------*\ #CONTACT \*-----------------------------------*/ .mapbox { position: relative; height: 250px; width: 100%; border-radius: 16px; margin-bottom: 30px; border: 1px solid var(--jet); overflow: hidden; } .mapbox figure { height: 100%; } .mapbox iframe { width: 100%; height: 100%; border: none; filter: grayscale(1) invert(1); } .contact-form { margin-bottom: 10px; } .form-title { margin-bottom: 20px; } .input-wrapper { display: grid; grid-template-columns: 1fr; gap: 25px; margin-bottom: 25px; } .form-input { color: var(--white-2); font-size: var(--fs-6); font-weight: var(--fw-400); padding: 13px 20px; border: 1px solid var(--jet); border-radius: 14px; outline: none; } .form-input::placeholder { font-weight: var(--fw-500); } .form-input:focus { border-color: var(--orange-yellow-crayola); } /** * Chrome paints autofilled fields with its own light background and dark text, * which reads as a white box on this dark card. background-color is ignored on * :-webkit-autofill, so the background has to be faked with a large inset shadow * and the text recoloured with -webkit-text-fill-color. */ .form-input:-webkit-autofill, .form-input:-webkit-autofill:hover, .form-input:-webkit-autofill:focus, .form-input:-webkit-autofill:active { -webkit-text-fill-color: var(--white-2); -webkit-box-shadow: 0 0 0 100px var(--eerie-black-2) inset; box-shadow: 0 0 0 100px var(--eerie-black-2) inset; caret-color: var(--white-2); /* Chrome re-applies its background on interaction; an absurd delay outruns it */ transition: background-color 600000s 0s, color 600000s 0s; } .form-input:-webkit-autofill::first-line { color: var(--white-2); font-family: var(--ff-poppins); font-size: var(--fs-6); } textarea.form-input { min-height: 100px; height: 120px; max-height: 200px; resize: vertical; margin-bottom: 25px; } textarea.form-input::-webkit-resizer { display: none; } .form-input:focus:invalid { border-color: var(--bittersweet-shimmer); } /** * topic dropdown. Reuses the portfolio filter's .filter-select / .select-list * styling; only the wrapper differs, because .filter-select-box is display:none * above 768px where the portfolio switches to buttons. */ .form-select-box { position: relative; } .form-select-box .filter-select { border-radius: 14px; } .form-select-box .select-value { color: var(--light-gray-70); font-weight: var(--fw-300); } .form-select-box .select-value.is-chosen { color: var(--white-2); font-weight: var(--fw-400); } /* The reCAPTCHA widget has a fixed 304px width - let it scroll sideways rather than push the card wider on narrow screens. overflow-y MUST stay pinned. Declaring overflow-x alone leaves overflow-y at 'visible', and CSS computes a 'visible' axis to 'auto' as soon as the other one is not - so the box quietly gained a vertical scrollbar down the full width of the form, next to the checkbox. What overflows is Google's own hidden #g-recaptcha-response textarea, which sits below the 78px widget; clipping it is harmless, the form reads its value, not its box. The challenge popup is position:fixed on and is not clipped by this. */ .form-recaptcha { margin-bottom: 25px; overflow-x: auto; overflow-y: hidden; } /* our own validation messages; the native bubbles cannot be styled */ .form-error { color: var(--bittersweet-shimmer); font-size: var(--fs-7); font-weight: var(--fw-300); line-height: 1.5; margin-top: 8px; } .form-error:empty { display: none; } .form-input.is-invalid { border-color: var(--bittersweet-shimmer); } .form-status { color: var(--light-gray); font-size: var(--fs-6); font-weight: var(--fw-300); line-height: 1.6; margin-top: 15px; min-height: 1px; } .form-status:empty { display: none; } .form-status.is-success { color: var(--orange-yellow-crayola); } .form-status.is-error { color: var(--bittersweet-shimmer); } .form-btn { position: relative; width: 100%; background: var(--border-gradient-onyx); color: var(--orange-yellow-crayola); display: flex; justify-content: center; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 14px; font-size: var(--fs-6); text-transform: capitalize; box-shadow: var(--shadow-3); z-index: 1; transition: var(--transition-1); } .form-btn::before { content: ""; position: absolute; inset: 1px; background: var(--bg-gradient-jet); border-radius: inherit; z-index: -1; transition: var(--transition-1); } .form-btn ion-icon { font-size: 16px; } .form-btn:hover { background: var(--bg-gradient-yellow-1); } .form-btn:hover::before { background: var(--bg-gradient-yellow-2); } .form-btn:disabled { opacity: 0.7; cursor: not-allowed; } .form-btn:disabled:hover { background: var(--border-gradient-onyx); } .form-btn:disabled:hover::before { background: var(--bg-gradient-jet); } /*-----------------------------------*\ #RESPONSIVE \*-----------------------------------*/ /** * responsive larger than 450px screen */ @media (min-width: 450px) { /** * client */ .clients-item { min-width: calc(33.33% - 10px); } /** * #PORTFOLIO, BLOG */ .project-img, .blog-banner-box { 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 { margin-bottom: 30px; } .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 ion-icon { 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 { padding: 30px; } .service-item-btn { display: flex; justify-content: flex-start; align-items: flex-start; gap: 18px; } .service-icon-box { margin-bottom: 0; margin-top: 5px; } .service-content-box { text-align: left; } /* testimonials */ .testimonials-title { margin-bottom: 25px; } .testimonials-list { gap: 30px; margin: 0 -30px; padding: 30px; padding-bottom: 35px; } .content-card { padding: 30px; padding-top: 25px; } .testimonials-avatar-box { transform: translate(30px, -30px); border-radius: 20px; } .testimonials-avatar-box img { width: 80px; } .testimonials-item-title { margin-bottom: 10px; margin-left: 95px; } .testimonials-text { line-clamp: 2; -webkit-line-clamp: 2; } /* testimonials modal */ .modal-container { padding: 20px; } .testimonials-modal { display: flex; justify-content: flex-start; align-items: stretch; gap: 25px; padding: 30px; border-radius: 20px; } .modal-img-wrapper { display: flex; flex-direction: column; align-items: center; } .modal-avatar-box { border-radius: 18px; margin-bottom: 0; } .modal-avatar-box img { width: 65px; } .modal-img-wrapper > img { display: block; flex-grow: 1; width: 35px; } /* clients */ .clients-list { gap: 50px; margin: 0 -30px; padding: 45px; scroll-padding-inline: 45px; } .clients-item { min-width: calc(33.33% - 35px); } /** * #RESUME */ .timeline-list { margin-left: 65px; } .timeline-item:not(:last-child)::before { left: -40px; } .timeline-item::after { height: 8px; width: 8px; left: -43px; } .skills-item:not(:last-child) { margin-bottom: 25px; } /** * #PORTFOLIO, BLOG */ .project-img, .blog-banner-box { border-radius: 16px; } .blog-posts-list { gap: 30px; } .blog-content { padding: 25px; } /** * #CONTACT */ .mapbox { height: 380px; border-radius: 18px; } .input-wrapper { gap: 30px; margin-bottom: 30px; } .form-input { padding: 15px 20px; } textarea.form-input { margin-bottom: 30px; } .form-btn { --fs-6: 16px; padding: 16px 20px; } .form-btn ion-icon { font-size: 18px; } } /** * 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; } /** * ABOUT */ /* testimonials modal */ .testimonials-modal { gap: 35px; max-width: 680px; } .modal-avatar-box img { width: 80px; } /** * PORTFOLIO */ .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(--orange-yellow-crayola); } /* portfolio and blog grid */ .project-list, .blog-posts-list { grid-template-columns: 1fr 1fr; } /** * CONTACT */ .input-wrapper { grid-template-columns: 1fr 1fr; } .form-btn { width: max-content; margin-left: auto; } } /** * responsive larger than 1024px screen */ @media (min-width: 1024px) { /** * CUSTOM PROPERTY */ :root { /** * 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); } /** * ABOUT */ /* service */ .service-list { grid-template-columns: 1fr 1fr; gap: 20px 25px; } /* testimonials */ .testimonials-item { min-width: calc(50% - 15px); } /* clients */ .clients-item { min-width: calc(25% - 38px); } /** * PORTFOLIO */ .project-list { grid-template-columns: repeat(3, 1fr); } /** * BLOG */ .blog-banner-box { height: 230px; } } /** * 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); border-radius: 20px; box-shadow: inset 1px 1px 0 var(--scrollbar-thumb-inset), inset -1px -1px 0 var(--scrollbar-thumb-inset); } body::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } 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; /* The inner panel handles collapse; size this card to its own content. */ align-self: flex-start; height: auto; 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; } /** * back to the card's top corners. .sidebar-controls stops generating a box, * so the two position against .sidebar itself - which is sticky here, and * carries the 60px of top padding they sit in. */ .sidebar-controls { display: contents; } .sidebar-controls .lang-switch, .sidebar-controls .theme-toggle { position: absolute; top: 15px; border-radius: 12px; } .sidebar-controls .lang-switch { left: 30px; right: auto; } .sidebar-controls .theme-toggle { left: auto; right: 30px; height: 41px; } .sidebar-year { display: block; } .page-year { display: none; } /** * no collapse up here, so lift the cap. Both selectors are listed because * .sidebar.active would otherwise out-specify a bare .sidebar-info_more and * hold the panel at the mobile 600px. */ .sidebar-info_more, .sidebar.active .sidebar-info_more { max-height: none; 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; } /** * RESUME */ .timeline-text { max-width: 700px; } } /*-----------------------------------*\ #PROJECT MODAL \*-----------------------------------*/ /** * Opened from a project card's preview button. Reuses the template's * .modal-container / .overlay / .modal-close-btn scaffolding, so the entrance * animation and the scrim behave exactly like the testimonials modal did. */ .project-modal { position: relative; z-index: 2; width: 100%; max-width: 980px; /** * `auto` rather than `15px`, and it matters: .modal-container centres its * child with `align-items: center`, which clips the top of anything taller * than the viewport and makes it unscrollable. Auto cross-axis margins take * precedence over align-items and collapse to 0 on overflow instead of * going negative, so the close button stays reachable. */ margin: auto 12px; padding: 15px; display: grid; gap: 20px; background: var(--eerie-black-2); border: 1px solid var(--jet); border-radius: 14px; box-shadow: var(--shadow-5); transform: scale(1.2); opacity: 0; transition: var(--transition-1); } .modal-container.active .project-modal { transform: scale(1); opacity: 1; } .project-modal .modal-close-btn { z-index: 3; } .project-modal .modal-close-btn svg { width: 16px; height: 16px; } .project-modal-media { display: flex; flex-direction: column; gap: 15px; min-width: 0; } /** * One media stage, with a thumbnail strip under it when there is more than one * thing to show. The video's poster is the screenshot, so showing both at once * just read as the same picture twice. */ .project-modal-stage { position: relative; border-radius: 16px; overflow: hidden; background: var(--border-gradient-onyx); box-shadow: var(--shadow-2); line-height: 0; } /** * The goes on painting the project you looked at last until the next file * decodes, so opening a second modal from the grid flashed the first one. This * covers the stage while that happens. script.js only turns it on when the * browser does not already have the file, so a cached shot still opens with no * shimmer at all. */ .project-modal-shimmer { position: absolute; inset: 0; z-index: 1; background: var(--eerie-black-2); display: none; } /** * On and off with no transition, deliberately. Fading in would let the previous * screenshot show through for the length of the fade - which is the very thing * being covered - and fading out turns the few milliseconds a cached file takes * into a visible flash. Instant either way is invisible when the file is cached * and complete when it is not. */ .project-modal-stage.is-loading .project-modal-shimmer { display: block; } .project-modal-shimmer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, hsla(0, 0%, 60%, 0.08) 40%, hsla(0, 0%, 70%, 0.16) 50%, hsla(0, 0%, 60%, 0.08) 60%, transparent 80%); transform: translateX(-100%); animation: stageShimmer 1.2s ease-in-out infinite; } @keyframes stageShimmer { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .project-modal-shimmer::after { animation: none; } } /** * `height: auto` alone lets a portrait screenshot (a phone capture is ~0.7 as * wide as it is tall) push the modal past the top of the viewport, taking the * close button with it. The cap keeps the stage inside the window; landscape * shots never reach it, so nothing else on the site changes. `width: 100%` * stays deliberately - a screen narrower than the column (Video Grabber's * 532px crop) is meant to upscale rather than sit letterboxed. */ .project-modal-stage img, .project-modal-stage video { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; } /** * An author `display` beats the user agent's `[hidden] { display: none }`, so * every element this modal toggles with the hidden attribute needs saying again. */ .project-modal-stage img[hidden], .project-modal-stage video[hidden], .project-modal-thumbs[hidden], .project-modal-thumb[hidden] { display: none; } .project-modal-thumbs { display: flex; flex-wrap: wrap; gap: 10px; } .project-modal-thumb { position: relative; display: block; width: 96px; border-radius: 10px; overflow: hidden; border: 1px solid var(--jet); background: var(--eerie-black-1); line-height: 0; opacity: 0.55; transition: var(--transition-1); } /** * Same reason as the stage's cap above: a phone capture is portrait, so at * 96px wide its thumbnail would be over 200px tall and tower over the * landscape ones beside it. Every existing screen is wider than it is tall and * so never reaches 96px, which is why nothing else in the strip moves. */ .project-modal-thumb img { display: block; width: 100%; height: auto; max-height: 96px; object-fit: contain; } .project-modal-thumb:hover, .project-modal-thumb:focus-visible { opacity: 0.85; } .project-modal-thumb.active { opacity: 1; border-color: var(--orange-yellow-crayola); } /* play badge, so the video thumbnail is not just the poster again */ .project-modal-thumb-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: hsla(0, 0%, 5%, 0.62); color: var(--white-2); } .project-modal-thumb-play svg { width: 14px; height: 14px; margin-left: 1px; } .project-modal-thumb.active .project-modal-thumb-play { background: var(--orange-yellow-crayola); color: var(--on-accent); } .project-modal-info { min-width: 0; padding: 5px 5px 10px; align-self: start; } .project-modal-category { color: var(--light-gray-70); font-size: var(--fs-6); font-weight: var(--fw-300); margin-bottom: 4px; } .project-modal-title { color: var(--white-2); text-transform: capitalize; margin-bottom: 12px; } .project-modal-text { color: var(--light-gray); font-size: var(--fs-6); font-weight: var(--fw-300); line-height: 1.6; } /* same amber hairline pill as the sidebar specialism tags */ .project-modal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; } .project-modal-tags li { position: relative; z-index: 1; color: var(--orange-yellow-crayola); background: var(--tag-border); font-size: 12px; font-weight: var(--fw-400); line-height: 1.2; padding: 5px 9px; border-radius: 7px; } .project-modal-tags li::before { content: ""; position: absolute; inset: 1px; background: var(--tag-fill); border-radius: inherit; z-index: -1; } /* the preview button is a real control now, so give it a focus ring */ .project-item > a:focus-visible .project-img::before { background: hsla(0, 0%, 0%, 0.5); } .project-item > a:focus-visible .project-item-icon-box { --scale: 1; opacity: 1; } /** * responsive larger than 768px screen */ @media (min-width: 768px) { .project-modal { padding: 20px; gap: 24px; } } /** * responsive larger than 992px screen */ @media (min-width: 992px) { .project-modal { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; padding: 24px; } .project-modal-info { padding-right: 24px; } }