/*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ :root { scroll-behavior: smooth; } /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; background: var(--creamWhite); text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } :root { --abyssBlue: #003049; --abyssBlueLighten: #ADE2FF; --creamWhite: #FAF3E7; --creamWhiteDarken: #FFDCC2; --richVermillion: #D62828; --richVermillionDarken: #6E1410; --richVermillionLighten: #FFADAD; --slateBlack: #1C1C1E; --violetFrost: #EDADFF; --bodyFontDesktopFontSize: 1rem; --bodyFontFamily: "Work Sans", sans-serif; --bodyFontLetterSpacing: -.25px; --bodyFontMobileFontSize: .875rem; --fontWeightBlack: 900; --fontWeightBold: 700; --fontWeightLight: 300; --fontWeightRegular: 500; --headingFiveDesktopFontSize: 2.5rem; --headingFiveMobileFontSize: calc(1rem + 2.25dvw); --headingFontFamily: "Merriweather", serif; --headingFourDesktopFontSize: 3rem; --headingFourMobileFontSize: calc(1.5rem + 2dvw); --headingOneDesktopFontSize: 4.875rem; --headingOneMobileFontSize: calc(3rem + 1.75dvw); --headingSixDesktopFontSize: 2rem; --headingSixMobileFontSize: calc(.5rem + 2.25dvw); --headingThreeDesktopFontSize: 3.5rem; --headingThreeMobileFontSize: calc(2rem + 2dvw); --headingTwoDesktopFontSize: 3.875rem; --headingTwoMobileFontSize: calc(2.5rem + 1.75dvw); --preheadingFontLetterSpacing: -.5px; --preheadingFontSize: 1rem; --preheadingTextTransform: uppercase; --subheadingFontSize: 1.5rem; --subheadingLetterSpacing: 0; } html { scroll-behavior: smooth; } body.noScroll { overflow: hidden; } img { border-radius: 0.5rem; } img.grayscale { filter: grayscale(100%); } img.grayscale.faded { filter: grayscale(50%); } img.sepia { filter: sepia(100%); } img.logo { border-radius: 0; } h1 span.abyssBlue, h2 span.abyssBlue, h3 span.abyssBlue, h4 span.abyssBlue, h5 span.abyssBlue, h6 span.abyssBlue, p span.abyssBlue { color: var(--abyssBlue); } h1 span.abyssBlueLighten, h2 span.abyssBlueLighten, h3 span.abyssBlueLighten, h4 span.abyssBlueLighten, h5 span.abyssBlueLighten, h6 span.abyssBlueLighten, p span.abyssBlueLighten { color: var(--abyssBlueLighten); } h1 span.ignore, h2 span.ignore, h3 span.ignore, h4 span.ignore, h5 span.ignore, h6 span.ignore, p span.ignore { all: unset; } h1 span.richVermillion, h2 span.richVermillion, h3 span.richVermillion, h4 span.richVermillion, h5 span.richVermillion, h6 span.richVermillion, p span.richVermillion { color: var(--richVermillion); } hr { border: none; border-radius: 4rem; height: 4px; margin: 1rem 0; width: 100%; } hr.creamWhiteToAbyssBlueLighten { background: var(--creamWhite); background: linear-gradient(90deg, var(--creamWhite) 0%, var(--abyssBlueLighten) 100%); } hr.slateBlackToRichVermillion { background: var(--slateBlack); background: linear-gradient(90deg, var(--slateBlack) 0%, var(--richVermillion) 100%); } hr.vertical { height: 4px; width: 100%; } section { overflow: hidden; padding-bottom: 2rem; padding-top: 2rem; } .container { display: grid; margin-left: auto; margin-right: auto; max-width: 1600px; padding-left: 1rem; padding-right: 1rem; } .container.narrow { max-width: 1400px; } .container .textBlock { display: grid; gap: 0.5rem; } @media (min-width: 1024px) { hr { width: 75%; } hr.creamWhiteToAbyssBlueLighten { background: linear-gradient(90deg, var(--creamWhite) 0%, var(--abyssBlueLighten) 75%); } hr.slateBlackToRichVermillion { background: linear-gradient(90deg, var(--slateBlack) 0%, var(--richVermillion) 75%); } hr.vertical { height: 100%; width: 4px; } hr.vertical.creamWhiteToAbyssBlueLighten { background: linear-gradient(0deg, var(--creamWhite) 0%, var(--abyssBlueLighten) 100%); } hr.vertical.slateBlackToRichVermillion { background: linear-gradient(0deg, var(--slateBlack) 0%, var(--richVermillion) 100%); } img { border-radius: 1rem; } img.grayscale { transition: 0.25s ease all; } img.grayscale:hover { filter: grayscale(25%); } section { padding-bottom: 5rem; padding-top: 5em; } .container { padding-left: 2rem; padding-right: 2rem; } } h1, h2, h3, h4, h5, h6 { font-family: var(--headingFontFamily); font-weight: 600; line-height: 1.2; } h1 { font-size: var(--headingOneMobileFontSize); } h2 { font-size: var(--headingTwoMobileFontSize); } h2.smallSectionHeading { font-size: calc(1.5rem + 0.5vw); } h3 { font-size: var(--headingThreeMobileFontSize); } h4 { font-size: var(--headingFourMobileFontSize); } h5 { font-size: var(--headingFiveMobileFontSize); } h6 { font-size: var(--headingSixMobileFontSize); } p { font-family: var(--bodyFontFamily); font-size: var(--bodyFontMobileFontSize); letter-spacing: var(--bodyFontLetterSpacing); line-height: 1.5; } p.marginBottom { margin-bottom: 1rem; } p.pageHeader { color: var(--abyssBlue); font-family: var(--bodyFontFamily); font-size: var(--headingThreeMobileFontSize); font-weight: var(--fontWeightLight); line-height: 1; transition-duration: 0.25s; transition-property: all; transition-timing-function: ease; word-spacing: -0.5rem; } p.pageHeader strong { font-weight: var(--fontWeightBold); } p.preheading { font-size: var(--preheadingFontSize); letter-spacing: 1px; text-transform: var(--preheadingTextTransform); font-weight: var(--fontWeightRegular); } p.subheading { font-family: var(--headingFontFamily); letter-spacing: var(--subheadingLetterSpacing); line-height: 1; font-size: var(--subheadingFontSize); font-weight: var(--fontWeightLight); } p.supportText { color: var(--richVermillion); font-size: 0.75rem; font-weight: 600; letter-spacing: -0.25px; margin-bottom: 0; transition-duration: 0.25s; transition-property: all; transition-timing-function: ease; } li { font-family: var(--bodyFontFamily); font-size: var(--bodyFontMobileFontSize); font-weight: 600; letter-spacing: var(--bodyFontLetterSpacing); } @media (min-width: 1024px) { h1 { font-size: var(--headingOneDesktopFontSize); } h2 { font-size: var(--headingTwoDesktopFontSize); } h2.smallSectionHeading { font-size: 2.25rem; } h3 { font-size: var(--headingThreeDesktopFontSize); } h4 { font-size: var(--headingFourDesktopFontSize); } h5 { font-size: var(--headingFiveDesktopFontSize); } h6 { font-size: var(--headingSixDesktopFontSize); } li { font-size: var(--bodyFontDesktopFontSize); } p { font-size: var(--bodyFontDesktopFontSize); } p.pageHeader { color: var(--abyssBlue); font-family: var(--bodyFontFamily); font-size: var(--headingFourDesktopFontSize); font-weight: var(--fontWeightLight); letter-spacing: -1px; word-spacing: -0.5rem; } p.supportText { font-size: 0.875rem; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 0; transition-duration: 0.25s; transition-property: all; transition-timing-function: ease; } } header { background-color: var(--creamWhite); border-bottom: 2px solid transparent; padding-bottom: 0.75rem; padding-top: 0.75rem; position: sticky; top: 0; z-index: 1; transition-duration: 0.25s; transition-property: all; transition-timing-function: ease; } header .headerContent { display: grid; gap: 0.5rem; grid-template-columns: 1.5rem 1fr; padding-right: 1rem; justify-items: center; } header .headerContent svg { height: auto; width: 100%; } header .headerContent .menu { cursor: pointer; color: var(--abyssBlue); z-index: 2; } header .headerContent nav { background-color: var(--creamWhite); border-right: 4px solid var(--richVermillion); box-shadow: 0.5rem 0 2rem rgba(0, 0, 0, 0.75); display: grid; gap: 1rem; height: 100dvh; justify-items: center; left: -100dvw; padding: 5rem 1rem calc(100dvh - 5rem); position: absolute; top: 0; transition: 0.25s ease all; width: 80%; } header .headerContent nav .overlay { background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(0.5rem); backdrop-filter: blur(0.5rem); visibility: hidden; height: 100dvh; left: 0; opacity: 0; overflow-y: hidden; position: fixed; top: 0; width: 100dvw; z-index: -1; transition: 0.25s ease all; } header .headerContent nav.isOpen { left: 0dvw; } header .headerContent nav.isOpen .overlay { visibility: visible; opacity: 1; } header .headerContent nav a { display: grid; grid-template-columns: 1rem max-content; } header .headerContent .pageHeaderCallout { align-items: center; display: grid; gap: 0.5rem; grid-template-columns: 1fr; justify-items: center; } header.isScrolled { border-bottom-color: var(--abyssBlue); box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.45); padding-bottom: 0.5rem; padding-top: 0.5rem; } header.isScrolled .headerContent nav .button { font-size: 0.875rem; } header.isScrolled .headerContent .pageHeaderCallout { gap: 0.25rem; } header.isScrolled .headerContent .pageHeaderCallout .pageHeader { font-size: 2rem; } header.isScrolled .headerContent .pageHeaderCallout .supportText { font-size: 0.75rem; letter-spacing: -0.25px; } @media (min-width: 1024px) { header { padding-bottom: 1.5rem; padding-top: 1.5rem; position: sticky; top: 0; z-index: 1; } header .headerContent { align-items: center; display: grid; gap: 0.5rem; grid-template-columns: 1fr 1fr; padding-right: initial; justify-items: center; } header .headerContent button { display: none; } header .headerContent nav { justify-self: flex-end; background: transparent; border: none; box-shadow: none; border-right: none; display: grid; grid-template-columns: auto auto auto auto; gap: 0.5rem; height: -moz-fit-content; height: fit-content; justify-items: unset; padding: unset; position: unset; transition: 0.25s ease all; width: auto; } header .headerContent nav a { display: grid; grid-template-columns: 1rem max-content; } header .headerContent nav .overlay { display: none; } header .headerContent .pageHeaderCallout { justify-items: flex-start; gap: 1rem; display: grid; grid-template-columns: 1fr auto; justify-self: flex-start; white-space: nowrap; } header .headerContent .pageHeaderCallout .supportText { white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } header.isScrolled { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.45); } header.isScrolled .headerContent .pageHeaderCallout { gap: 0.5rem; } } .button { align-items: center; border-color: var(--slateBlack); border-radius: 0.5rem; border-style: solid; border-width: 2px; box-sizing: border-box; display: flex; font-family: var(--bodyFontFamily); font-size: 1rem; font-weight: 600; gap: 0.5rem; justify-content: center; letter-spacing: -0.5px; outline: none; padding-bottom: 1rem; padding-left: 1rem; padding-right: 1rem; padding-top: 1rem; text-align: center; text-decoration: none; transition-duration: 0.25s; transition-property: all; transition-timing-function: ease; width: 100%; } .button:hover { border-radius: 1.75rem; } .button.abyssBlue { background-color: var(--abyssBlue); border-color: var(--abyssBlue); color: var(--creamWhite); } .button.abyssBlue:hover { background-color: var(--creamWhite); color: var(--abyssBlue); } .button.abyssBlue.secondary { background-color: var(--creamWhite); color: var(--abyssBlue); } .button.abyssBlue.secondary:hover { background-color: var(--abyssBlue); color: var(--creamWhite); } .button.abyssBlueLighten { background-color: var(--abyssBlueLighten); border-color: var(--abyssBlueLighten); color: var(--abyssBlue); } .button.abyssBlueLighten:hover { background-color: var(--abyssBlue); color: var(--abyssBlueLighten); } .button.abyssBlueLighten.secondary { background-color: var(--creamWhite); border-color: var(--creamWhite); color: var(--abyssBlue); } .button.abyssBlueLighten.secondary:hover { background-color: var(--abyssBlue); border-color: var(--abyssBlueLighten); color: var(--abyssBlueLighten); } .button.richVermillion { background-color: var(--richVermillion); border-color: var(--richVermillion); color: var(--creamWhite); } .button.richVermillion:hover { background-color: var(--creamWhite); color: var(--richVermillion); } .button.richVermillion.secondary { background-color: var(--creamWhite); border-color: var(--richVermillion); color: var(--richVermillion); } .button.richVermillion.secondary:hover { background-color: var(--richVermillion); border-color: var(--richVermillion); color: var(--creamWhite); } .button.disabled { background-color: #CCCCCC; border-color: #CCCCCC; color: #666666; } .button.disabled:hover { border-radius: 0.5rem; cursor: not-allowed; } @media (min-width: 1024px) { .button { padding-bottom: 0.75rem; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 0.75rem; } } footer { background: var(--slateBlack) url("/assets/imgs/topography.svg") repeat fixed; border-top: 4px solid var(--richVermillion); color: var(--creamWhite); padding: 2rem 0; } footer .container { align-items: center; grid-template-columns: auto auto; gap: 1rem; } footer .container p { align-items: center; display: flex; font-size: 1rem; font-weight: 700; gap: 0.25rem; justify-self: flex-start; margin-bottom: 0; } footer .container .socialLinks { display: flex; flex-direction: row; gap: 0.5rem; justify-self: flex-end; } footer .container .socialLinks a { background-color: var(--creamWhite); border-radius: 0.25rem; color: var(--slateBlack); font-size: 1rem; line-height: 0; padding: 0.5rem 0.75rem; transition-duration: 0.25s; transition-property: all; transition-timing-function: ease; } footer .container .socialLinks a:first-child { border-radius: 1rem 0.25rem 0.25rem 1rem; } footer .container .socialLinks a:last-child { border-radius: 0.25rem 1rem 1rem 0.25rem; } footer .container .socialLinks a:hover { border-radius: 1rem; } @media (min-width: 1024px) { footer { padding: 2.875rem 0; } } /** Home Page **/ .introCallout { background: var(--abyssBlue) url("/assets/imgs/topography.svg") repeat fixed; } .introCallout .container { align-items: center; gap: 1rem; grid-template-columns: 1fr; } .introCallout .container img { aspect-ratio: 1/1; width: 100%; } .introCallout .container .textBlock { color: var(--creamWhite); } .introCallout .container .textBlock .preheading { color: var(--creamWhite); } .introCallout .container .textBlock h1 { color: var(--creamWhite); } .introCallout .container .textBlock .subheading { color: var(--abyssBlueLighten); } .introCallout .container .textBlock .buttonContainer { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .process { background-color: var(--creamWhite); } .process .container { gap: 1rem; justify-items: center; } .process .container .timeline { align-items: center; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 1rem; justify-items: center; width: 100%; } .process .container .timeline .processStep { align-items: center; display: grid; gap: 1rem; justify-items: center; } .process .container .timeline .processStep svg { color: var(--abyssBlue); font-size: calc(2.25rem + 0.5vw); } .process .container .timeline .processStep p { color: var(--abyssBlue); font-size: 0.75rem; font-weight: 700; margin-bottom: 0; text-transform: uppercase; } .process .container .timeline hr { background: var(--abyssBlue); height: 2px; } /***************/ /** About Page **/ .aboutCallout { position: relative; } .aboutCallout::before { background-color: var(--slateBlack); background-image: url(/assets/imgs/nature.webp); background-position: top; background-size: cover; content: ""; filter: grayscale(100%) blur(5px) brightness(35%); height: 100%; left: 0; position: absolute; top: 0; transform: scale(1.05); width: 100%; z-index: -1; } .aboutCallout .container { align-items: center; gap: 1rem; grid-template-columns: 1fr; } .aboutCallout .container img { aspect-ratio: 4/3; width: 100%; } .aboutCallout .container .textBlock { color: var(--creamWhite); } .aboutCallout .container .textBlock .preheading { color: var(--creamWhite); } .aboutCallout .container .textBlock h1 { color: var(--creamWhite); } .aboutCallout .container .textBlock .subheading { color: var(--abyssBlueLighten); } .aboutCallout .container .textBlock .buttonContainer { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-top: 1rem; } .professionalCollaboration { background: var(--abyssBlue) url("/assets/imgs/topography.svg") repeat fixed; } .professionalCollaboration .container { align-items: center; color: var(--creamWhite); gap: 1rem; grid-template-columns: 1fr; } .professionalCollaboration .container .collabContainer { align-items: center; display: grid; gap: 1rem; grid-template-columns: 1fr; } .professionalCollaboration .container .collabContainer img { aspect-ratio: 16/9; } .skillSet .container { align-items: center; gap: 1rem; grid-template-columns: 1fr; } .skillSet .container .textBlock { gap: 1rem; } .skillSet .container .textBlock .buttonContainer { align-items: center; display: grid; gap: 1rem; grid-template-columns: 1fr auto 1fr; } .skillSet .container .textBlock .buttonContainer span { border: none; border-radius: 2rem; flex: 1 1 auto; padding-bottom: 0.875rem; padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 0.875rem; text-align: center; } .skillSet .container .textBlock .buttonContainer span.designSkills { background-color: #FFD6C2; background-image: linear-gradient(135deg, #FFD6C2 1%, #F8BFBF 99%); color: var(--richVermillionDarken); } .skillSet .container .textBlock .buttonContainer span.peopleSkills { background-color: var(--abyssBlueLighten); background-image: linear-gradient(135deg, #e9f7ff 0%, var(--abyssBlueLighten) 100%); color: var(--abyssBlue); } .skillSet .container .skillList { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; } .skillSet .container .skillList .skill { background-color: #FFD6C2; background-image: linear-gradient(135deg, #FFD6C2 0%, #F8BFBF 100%); border-radius: 2rem; color: var(--richVermillionDarken); flex: 1 1 auto; padding-bottom: 0.875rem; padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 0.875rem; text-align: center; } .skillSet .container .skillList .skill.more { background-color: transparent; background-image: none; border-radius: 2rem; color: var(--slateBlack); overflow: hidden; /* Ensures corners are clipped */ position: relative; z-index: 0; } .skillSet .container .skillList .skill.more::before { content: ""; position: absolute; inset: 0; padding: 2px; /* Border thickness */ border-radius: inherit; background: linear-gradient(135deg, #F8BFBF, var(--abyssBlueLighten)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; } .skillSet .container .skillList .skill.peopleSkill { background-color: var(--abyssBlueLighten); background-image: linear-gradient(135deg, #e9f7ff 0%, var(--abyssBlueLighten) 100%); color: var(--abyssBlue); } /****************/ /** Projects Page **/ .recentProjects { background: var(--abyssBlue) url("/assets/imgs/topography.svg") repeat fixed; color: var(--creamWhite); } .recentProjects .container { align-items: center; gap: 1rem; } .recentProjects .container .textBlock { align-items: center; } .recentProjects .container .textBlock h1 { font-size: calc(2.5rem - 1dvw); } .recentProjects .container .projectList { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1rem; } .recentProjects .container .projectList .project { align-content: center; background-color: var(--creamWhite); background-image: linear-gradient(135deg, var(--creamWhite) 50%, var(--creamWhiteDarken) 100%); border-radius: 1rem; flex: 1 0 calc(50% - 1rem); } .recentProjects .container .projectList .project a { align-content: center; aspect-ratio: 4/3; display: block; padding: 1.5rem; } .recentProjects .container .projectList .project a img { width: 100%; } .personalProjects { color: var(--creamWhite); position: relative; } .personalProjects .container { align-items: center; gap: 1rem; } .personalProjects .container img { aspect-ratio: 7/5; width: 100%; } .personalProjects .container .textBlock .buttonContainer { display: grid; gap: 1rem; } .personalProjects .container .textBlock .buttonContainer .supportText { font-size: 0.75rem; opacity: 75%; } .personalProjects::before { background-color: var(--slateBlack); background-image: url(/assets/imgs/nature.webp); background-position: top; background-size: cover; content: ""; filter: grayscale(100%) blur(0.5rem) brightness(20%); height: 100%; left: 0; position: absolute; top: 0; transform: scale(1.1); width: 100%; z-index: -1; } .personalProjects.bitesizedBlackjack::before { background-image: url(/assets/imgs/blackjack/header.webp); } .additionalProjects .container { align-items: center; gap: 1rem; grid-template-columns: 1fr; justify-items: center; text-align: center; } .additionalProjects .container .additionalProjectList { display: flex; flex-direction: row; flex-wrap: wrap; gap: 2rem; justify-content: center; } .additionalProjects .container .additionalProjectList .additionalProject { align-items: center; display: flex; flex: 0 0 calc(50% - 2rem); } /*******************/ /** Individual Projects Page **/ .header { border-bottom: 4px solid var(--richVermillion); color: var(--creamWhite); position: relative; } .header::before { background-color: var(--slateBlack); background-image: url(/assets/imgs/nature.webp); background-position: top; background-size: cover; content: ""; filter: grayscale(100%) blur(0.5rem) brightness(20%); height: 100%; left: 0; position: absolute; top: 0; transform: scale(1.1); width: 100%; z-index: -1; } .header.fruit::before { background-image: url(/assets/imgs/fruit/header.webp); } .header.ra::before { background-image: url(/assets/imgs/ra/header.webp); } .header.spalding::before { background-image: url(/assets/imgs/spalding/header.webp); } .header.vfl::before { background-image: url(/assets/imgs/vfl/header.webp); } .header .container { gap: 1rem; } .header .container .projectLogo { align-items: center; aspect-ratio: 16/9; background-color: var(--creamWhite); border-radius: 1rem; justify-content: center; order: -1; padding-bottom: 2rem; padding-left: 1rem; padding-right: 1rem; padding-top: 2rem; width: 100%; } .dektopExamples { background: var(--slateBlack) url("/assets/imgs/topography.svg") repeat fixed; } .dektopExamples .container { gap: 1rem; } .dektopExamples .container .mainImage { aspect-ratio: 4/3; overflow: hidden; width: 100%; } .dektopExamples .container .mainImage img { -o-object-position: top; object-position: top; display: block; height: 100%; -o-object-fit: cover; object-fit: cover; width: 100%; } .dektopExamples .container .supportingImages { display: flex; flex-direction: row; gap: 0.5rem; overflow-x: scroll; padding-left: 1rem; padding-right: 1rem; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; } .dektopExamples .container .supportingImages img { aspect-ratio: 16/9; max-height: 65dvh; -o-object-fit: cover; object-fit: cover; -o-object-position: top; object-position: top; scroll-snap-align: center; width: 100%; } .mobileDesign { background: var(--abyssBlue) url("/assets/imgs/topography.svg") repeat fixed; color: var(--creamWhite); } .mobileDesign .container { gap: 1rem; } .mobileDesign .container.inverted img { order: -1; } .mobileDesign.threeImagesAndText .container { gap: 1rem; grid-template-columns: 1fr; } .mobileDesign.threeImagesAndText .container .mobileDesignImages { display: flex; flex-direction: row; gap: 1rem; order: -1; overflow-x: scroll; padding-left: 1rem; padding-right: 1rem; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; } .mobileDesign.threeImagesAndText .container .mobileDesignImages::-webkit-scrollbar { display: none; } .mobileDesign.threeImagesAndText .container .mobileDesignImages img { aspect-ratio: 9/20; max-height: 65dvh; -o-object-fit: cover; object-fit: cover; -o-object-position: top; object-position: top; scroll-snap-align: center; width: 100%; } .projectSamples { background: var(--abyssBlue) url("/assets/imgs/topography.svg") repeat fixed; } .projectSamples .container { gap: 1rem; grid-template-columns: 1fr; padding: 0; } .projectSamples .container .desktopSampleContainer { display: flex; flex-direction: row; gap: 0.5rem; order: -1; overflow-x: scroll; padding-left: 1rem; padding-right: 1rem; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; } .projectSamples .container .desktopSampleContainer::-webkit-scrollbar { display: none; } .projectSamples .container .desktopSampleContainer img { aspect-ratio: 4/3; -o-object-fit: cover; object-fit: cover; -o-object-position: top; object-position: top; scroll-snap-align: center; width: 100%; } /******************************/ @media (min-width: 1024px) { /** Home Page **/ .introCallout .container { gap: 3rem; grid-template-columns: auto 1fr; } .introCallout .container .textBlock .buttonContainer { grid-template-columns: max-content max-content; } .process { padding-bottom: 2rem; padding-top: 2rem; } .process .container .timeline { gap: 4rem; } .process .container .timeline .processStep p { font-size: 0.875rem; } .process .container .timeline hr { height: 4px; } /***************/ /** About Page **/ .aboutCallout .container { gap: 1rem; grid-template-columns: 1fr 1fr; } .aboutCallout .container .textBlock .buttonContainer { grid-template-columns: max-content max-content; } .professionalCollaboration .container { gap: 1.5rem; justify-items: center; } .professionalCollaboration .container .collabContainer { gap: 1rem; grid-template-columns: 1fr 1fr; } .skillSet .container { align-items: center; gap: 2rem; grid-template-columns: 0.75fr auto 1.25fr; } .skillSet .container .skillList { gap: 0.5rem; } .skillSet .container .skillList .skill:last-child { flex-grow: 0; } /****************/ /** Projects Page **/ .recentProjects .container { gap: 3rem; grid-template-columns: 1.25fr 1fr; } .recentProjects .container .textBlock { gap: 1rem; } .recentProjects .container .textBlock h1 { font-size: var(--headingThreeDesktopFontSize); } .recentProjects .container .projectList .project { transition: 0.25s ease all; } .recentProjects .container .projectList .project:hover { border-radius: 3rem; } .recentProjects .container .projectList .project a { padding: 2rem; } .personalProjects .container { gap: 2rem; grid-template-columns: 0.75fr 1.25fr; } .personalProjects .container .textBlock .buttonContainer { display: grid; grid-template-columns: max-content max-content; } .personalProjects .container .textBlock .buttonContainer .button { width: -moz-max-content; width: max-content; } .additionalProjects { padding-bottom: 2rem; padding-top: 2rem; } .additionalProjects .container { align-items: center; gap: 1rem; } .additionalProjects .container .additionalProjectList { gap: 1rem; justify-content: center; } .additionalProjects .container .additionalProjectList .additionalProject { flex: 1 0 calc(10% - 1rem); padding: 1rem; } /*******************/ /** Individual Projects Page **/ .header .container { align-items: center; gap: 2rem; grid-template-columns: 3fr 1fr; } .header .container .projectLogo { align-items: center; aspect-ratio: 1/1; background-color: var(--creamWhite); border-radius: 1rem; display: flex; flex-shrink: 0; justify-content: center; order: initial; padding-bottom: 3rem; padding-left: 2rem; padding-right: 2rem; padding-top: 3rem; } .header .container .projectLogo img { border-radius: 0; } .header .container .textBlock .buttonContainer .button { width: -moz-max-content; width: max-content; } .dektopExamples .container { align-items: stretch; gap: 1rem; grid-template-columns: 2fr 1fr; } .dektopExamples .container .mainImage { aspect-ratio: 7/5; } .dektopExamples .container .supportingImages { display: flex; flex-direction: column; gap: 1rem; padding: 0; height: 100%; min-height: 0; } .dektopExamples .container .supportingImages img { display: block; flex: 1 1 0; height: 0; min-height: 0; -o-object-fit: cover; object-fit: cover; width: 100%; } .mobileDesign .container { align-items: center; gap: 2rem; grid-template-columns: 1fr 1fr; } .mobileDesign .container img { order: initial; } .mobileDesign .container.inverted img { order: 2; } .mobileDesign.threeImagesAndText .container .mobileDesignImages { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); order: initial; overflow-x: hidden; padding: 0; } .mobileDesign.threeImagesAndText .container .mobileDesignImages img { aspect-ratio: 9/20; -o-object-position: top; object-position: top; -o-object-fit: cover; object-fit: cover; max-width: -moz-max-content; max-width: max-content; } .mobileDesign.threeImagesAndText .container.inverted { grid-template-columns: 1fr 1fr; } .mobileDesign.threeImagesAndText .container.inverted .mobileDesignImages { order: -1; } .projectSamples .container { gap: 1rem; padding-left: 2rem; padding-right: 2rem; } .projectSamples .container .desktopSampleContainer { display: grid; grid-template-columns: 1fr 1fr 1fr; flex-direction: row; gap: 1rem; overflow-x: scroll; padding-left: 0; padding-right: 0; } .projectSamples .container .desktopSampleContainer::-webkit-scrollbar { display: none; } .project .skillSet { padding: 2rem 0; } .project .skillSet .container { align-items: center; gap: 1rem; grid-template-columns: 1fr; } /******************************/ }