/* Shared foundation for every page: tokens, type, buttons, the site header and footer, and the two-column page grid (section links on the left, content on the right). The look is Swiss/editorial: a neo-grotesk sans in near-black on white, generous white space, rectangular outline buttons, and pink as the single accent. */ /* The original display faces. The site's text uses --font-sans; these are kept for the pieces that stay in the original style: the home hero, the Contact trigger and its dropdown, and the footer. */ @font-face { font-family: 'ArchivoBlack'; src: url('../assets/fonts/ArchivoBlack.ttf') format('truetype'); font-weight: 900; font-style: bold; } @font-face { font-family: 'Gabarito'; src: url('../assets/fonts/Gabarito.ttf') format('truetype'); } @font-face { font-family: 'GajrajOne'; src: url('../assets/fonts/GajrajOne.ttf') format('truetype'); } :root { --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif; --color-background: #fff; --color-foreground: #201f20; --color-black: #201f20; --color-white: #fff; --color-gray: #6b6a6b; --color-gray-light: #a8a7a8; --color-line: #e2e1e2; /* Neutral backdrop behind transparent media and diagrams. */ --color-surface: #f4f4f4; /* Pink is the accent. The soft pinks are for fills and rules; text in the accent uses --color-accent, which is dark enough to read on white. */ --color-accent: #cf3f63; --color-primary-dark: #e2737c; --color-primary-dark2: #f29aa1; --color-primary: #FFB3B9; --color-primary-light: #ffe1e3; --color-warm-accent: #ffe4c2; --color-green-primary: #A5C796; --color-green-secondary: #76A164; --color-red-main: #D13B3B; --color-yellow: #F3D074; --color-green: #B9D580; --color-blue: #86BBE7; --color-purple: #B185D0; --margin-x: 64px; --margin-y: 30px; --padding-480: 20px; --padding-768: 40px; --padding-1024: 80px; --padding-full: 160px; --header-height: 88px; --side-width: 240px; --page-gap: 64px; } .dark { display: none; } .light { display: block; } @media (max-width: 1024px) { :root { --margin-x: 40px; --side-width: 200px; --page-gap: 40px; } } @media (max-width: 768px) { :root { --margin-x: 20px; --margin-y: 20px; --header-height: 64px; } } /* ---------- Base ---------- */ html { background-color: var(--color-background); /* `clip`, not `hidden`: hidden turns into a scroll container, which breaks position: sticky and iOS momentum scrolling. */ overflow-x: hidden; overflow-x: clip; } body { margin: 0; padding: 0; max-width: 100%; overflow-x: clip; background-color: var(--color-background); color: var(--color-foreground); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, p, li, a, button, input { font-family: var(--font-sans); } h1 { font-size: 45px; line-height: 1.05; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 16px; color: var(--color-foreground); } h2 { font-size: 32px; line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 16px; color: var(--color-foreground); } h3 { font-size: 20px; line-height: 1.35; font-weight: 400; margin: 0 0 12px; color: var(--color-foreground); } h4 { font-size: 14px; line-height: 1.4; font-weight: 700; letter-spacing: 0.02em; margin: 0; color: var(--color-gray); } p, li { margin: 0; font-size: 16px; line-height: 1.6; color: var(--color-foreground); } a { color: var(--color-foreground); text-decoration: none; } strong, b { font-weight: 700; } img, video { max-width: 100%; } /* Rectangular outline buttons with a bold label. The same look on a link uses the .btn class. */ button, .btn { display: inline-block; flex: 0 0 auto; align-self: flex-start; width: auto; margin: 0; padding: 10px 16px; border: 2px solid var(--color-foreground); background-color: transparent; color: var(--color-foreground); font-family: var(--font-sans); font-size: 16px; font-weight: 700; line-height: 1.25; text-transform: none; letter-spacing: 0; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } button:hover, .btn:hover, button:focus-visible, .btn:focus-visible { background-color: var(--color-foreground); color: var(--color-background); } a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } .button-row { display: flex; flex-wrap: wrap; gap: 16px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 1000; background-color: var(--color-background); border-bottom: 1px solid transparent; transition: border-color .2s ease; } .site-header.is-scrolled { border-bottom-color: var(--color-line); } .site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; height: var(--header-height); padding: 0 var(--margin-x); } /* The logo: the pixel mark, then the name set as a small stacked block with the current section in gray underneath. */ .site-logo { display: flex; align-items: center; gap: 12px; } .site-logo img { width: 44px; height: auto; } .site-logo-text { display: flex; flex-direction: column; font-size: 14px; font-weight: 700; line-height: 1.05; text-transform: lowercase; } .site-logo-section { color: var(--color-gray-light); } .site-nav { display: flex; align-items: center; gap: 32px; } .site-nav > a { padding: 4px 0; color: var(--color-foreground); font-size: 16px; font-weight: 700; line-height: 1.25; } .site-nav > a:hover, .site-nav > a.is-active { color: var(--color-accent); } /* Contact links for the phone menu; on larger screens the hover dropdown (below) does this job. */ .site-nav-contacts { display: none; } .site-menu-toggle { display: none; align-self: center; } /* Contact: set like the other nav links, with the original pink dropdown (menu-dropdown, below) anchored to it. The dropdown's collapsed pink strip is 131 x 67px at its top-right corner; the offsets centre that strip on the word, and the word stays above it. */ .site-nav-contact { position: relative; display: flex; align-items: center; } .site-nav .menu-button { position: relative; align-self: center; z-index: 1002; padding: 4px 0; border: none; background: none; color: var(--color-foreground); font-size: 16px; font-weight: 700; line-height: 1.25; } /* The pink strip is the hover feedback, so the word stays dark on it. */ .site-nav .menu-button:hover, .site-nav .menu-button:focus-visible { background: none; color: var(--color-foreground); } .site-nav-contact .menu-dropdown { top: -20px; right: -36px; } @media (max-width: 768px) { .site-nav, .site-nav-contact { display: none; } .site-menu-toggle { display: inline-block; padding: 6px 12px; font-size: 14px; } .site-header.is-menu-open .site-nav { position: absolute; top: var(--header-height); left: 0; right: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px var(--margin-x) 24px; background-color: var(--color-background); border-bottom: 1px solid var(--color-line); } .site-header.is-menu-open .site-nav > a { font-size: 20px; } .site-header.is-menu-open .site-nav-contacts { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-line); } .site-header.is-menu-open .site-nav-contacts a { font-size: 16px; font-weight: 700; } } /* ---------- Contact hover dropdown (original style) ---------- */ /* Opened on hover of the Contact nav link by script.js (.menu-button + #menu-dropdown). */ .menu-dropdown { position: absolute; top: 22px; right: calc(var(--margin-x) - 10px); width: 210px; height: 260px; background-color: transparent; opacity: 1; z-index: 1001; } .menu-dropdown a { color: var(--color-black); } /* Animated background that scales from top-right corner */ .menu-dropdown::before { content: ""; position: absolute; inset: 0; background-color: var(--color-primary); border-radius: inherit; transform-origin: top right; transform: scaleX(0.624) scaleY(0); /* animation is applied when open */ z-index: 0; } .menu-dropdown.menu-open { opacity: 1; visibility: visible; /* transform: translateY(0); */ } .menu-dropdown.menu-closing { opacity: 1; visibility: visible; /* Keep visible during closing animation */ } /* Hide after closing animation completes */ .menu-dropdown:not(.menu-open):not(.menu-closing) { opacity: 0; visibility: hidden; } .menu-dropdown.menu-open::before { animation: dropdownGrow .4s ease forwards; } @keyframes dropdownGrow { 0% { /* transform: scaleX(0) scaleY(0.223); */ transform: scaleX(0) scaleY(0.2577); } 25% { transform: scaleX(0.657) scaleY(0.2577); } 65% { transform: scaleX(1) scaleY(0.2577); } 100% { transform: scaleX(1) scaleY(1); } } @keyframes dropdownShrink { 0% { transform: scaleX(1) scaleY(1); } 20% { transform: scaleX(1) scaleY(1); } 50% { transform: scaleX(1) scaleY(0.2577); } 70% { transform: scaleX(0.657) scaleY(0.2577); } 100% { transform: scaleX(0) scaleY(0.2577); } } /* Reverse animation when closing */ .menu-dropdown.menu-closing::before { animation: dropdownShrink .6s ease forwards; } /* Animate on open: background zoom, then items drop with stagger */ .menu-dropdown.menu-open .menu-dropdown-content-links-container::before { transform: scale(1); opacity: 1; } .menu-dropdown.menu-open .menu-dropdown-content-links a { transform: translateY(0); opacity: 1; } .menu-dropdown.menu-open .menu-dropdown-icon { transition-delay: 0.05s; transform: translateY(0); opacity: 1; } .menu-dropdown.menu-open .menu-dropdown-title, .menu-dropdown.menu-open .menu-dropdown-top-icon { transition-delay: 0.05s; transform: translateY(0); opacity: 1; } .menu-dropdown.menu-open .menu-dropdown-content-links a:nth-child(1), .menu-dropdown.menu-open .menu-dropdown-content-links-container>a:nth-child(1) { transition-delay: 0.2s; } .menu-dropdown.menu-open .menu-dropdown-content-links a:nth-child(2), .menu-dropdown.menu-open .menu-dropdown-content-links-container>a:nth-child(2) { transition-delay: 0.3s; } .menu-dropdown.menu-open .menu-dropdown-content-links a:nth-child(3), .menu-dropdown.menu-open .menu-dropdown-content-links-container>a:nth-child(3) { transition-delay: 0.4s; } .menu-dropdown.menu-open .menu-dropdown-content-links a:nth-child(4), .menu-dropdown.menu-open .menu-dropdown-content-links-container>a:nth-child(4) { transition-delay: 0.5s; } .menu-dropdown.menu-open .menu-dropdown-content-links a:nth-child(5), .menu-dropdown.menu-open .menu-dropdown-content-links-container>a:nth-child(5) { transition-delay: 0.6s; } .menu-dropdown.menu-open .menu-dropdown-content-contact { transform: translateY(0); opacity: 1; transition-delay: 0.6s; } .menu-dropdown.menu-open .menu-bottom { transform: translateY(0); opacity: 1; transition-delay: 0.5s; } /* Reverse animations when closing */ .menu-dropdown.menu-closing .menu-dropdown-content-links a, .menu-dropdown.menu-closing .menu-dropdown-content-links-container>a, .menu-dropdown.menu-closing .menu-bottom { transform: translateY(-8px); opacity: 0; transition-delay: 0s; } .menu-dropdown.menu-closing .menu-dropdown-content-links a:nth-child(1), .menu-dropdown.menu-closing .menu-dropdown-content-links-container>a:nth-child(1) { transition-delay: 0.05s; } .menu-dropdown.menu-closing .menu-dropdown-content-links a:nth-child(2), .menu-dropdown.menu-closing .menu-dropdown-content-links-container>a:nth-child(2) { transition-delay: 0.04s; } .menu-dropdown.menu-closing .menu-dropdown-content-links a:nth-child(3), .menu-dropdown.menu-closing .menu-dropdown-content-links-container>a:nth-child(3) { transition-delay: 0.03s; } .menu-dropdown.menu-closing .menu-dropdown-content-links a:nth-child(4), .menu-dropdown.menu-closing .menu-dropdown-content-links-container>a:nth-child(4) { transition-delay: 0.02s; } .menu-dropdown.menu-closing .menu-dropdown-content-contact { transform: translateY(-8px); opacity: 0; transition-delay: 0s; } .menu-dropdown.menu-closing .menu-dropdown-icon, .menu-dropdown.menu-closing .menu-dropdown-title, .menu-dropdown.menu-closing .menu-dropdown-top-icon { transform: translateY(-8px); opacity: 0; transition-delay: 0s; } .menu-dropdown.menu-closing .menu-dropdown-content-links-container::before { transform: scale(0.92); opacity: 0; transition-delay: 0s; } .menu-dropdown-content { display: flex; flex-direction: column; padding: 20px 10px; padding-top: 80px; position: relative; z-index: 1; /* keep text above animated bg */ } .menu-dropdown-content-links-container { /* margin-top: 42px; */ display: flex; flex-direction: column; height: 175px; padding: 2px 10px; gap: 10px; position: relative; /* margin-top: -42px; */ } /* Background zoom layer */ .menu-dropdown-content-links-container::before { content: ""; position: absolute; inset: 0; transform: scale(0.92); opacity: 0; transition: transform 0.35s ease, opacity 0.35s ease; z-index: -1; } .menu-dropdown-content-links { display: flex; flex-direction: column; gap: 10px; } .menu-dropdown-top-row { display: flex; justify-content: space-between; align-items: center; } .menu-dropdown-title { font-size: 28px; font-weight: 700; margin: 0; transform: translateY(-8px); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; transition-delay: 0.05s; } .menu-dropdown-top-icon { width: 22px; height: auto; transform: translateY(-8px); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; transition-delay: 0.05s; } .menu-dropdown-icon { width: 34px; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; z-index: 1002; } .menu-dropdown-content-links a { font-family: 'Gabarito', sans-serif; font-size: 20px; color: var(--color-black); text-decoration: none; transform: translateY(-8px); opacity: 0; transition: transform 0.35s ease, opacity 0.35s ease; width: auto; display: inline-block; flex: 0 0 auto; align-self: flex-start; } .menu-dropdown-content a:hover { text-decoration: underline; } .menu-dropdown-content-contact-container { display: flex; flex-direction: column; gap: 5px; } .menu-dropdown-content-contact { font-size: 14px; color: var(--color-foreground); text-decoration: none; transform: translateY(-8px); opacity: 0; transition: transform 0.35s ease, opacity 0.35s ease; } .menu-bottom { margin-left: -10px; margin-top: -5.5px; transform: translateY(-8px); opacity: 0; transition: transform 0.35s ease, opacity 0.35s ease; } .menu-dropdown, .menu-dropdown a { font-family: 'Gabarito', sans-serif; line-height: normal; } /* ---------- Page grid: section links on the left, content on the right ---------- */ .page { display: grid; grid-template-columns: var(--side-width) minmax(0, 1fr); gap: var(--page-gap); box-sizing: border-box; max-width: 1440px; margin: 0 auto; padding: 72px var(--margin-x) 20px; } .page-side { position: sticky; top: calc(var(--header-height) + 32px); align-self: start; } .page-main { min-width: 0; display: flex; flex-direction: column; gap: 120px; } /* Section anchors land below the sticky header. */ .page-main > section, .page-main [id] { scroll-margin-top: calc(var(--header-height) + 32px); } /* Two-tone headline: a gray kicker line over the black statement. */ .page-title { max-width: 880px; margin: 0; } .page-kicker { display: block; color: var(--color-gray-light); } .lead { max-width: 720px; font-size: 18px; line-height: 1.67; } .lead em, .lead strong { font-style: italic; font-weight: 700; } .section-heading { font-size: 45px; line-height: 1.05; margin: 0 0 32px; } .caption { font-size: 13px; line-height: 1.5; color: var(--color-gray); } @media (max-width: 768px) { .page { display: block; padding: 40px var(--margin-x) 80px; } .page-side { display: none; } .page-main { gap: 80px; } h1, .section-heading { font-size: 34px; } h2 { font-size: 26px; } .lead { font-size: 17px; } } /* ---------- Section links (SideNav) ---------- */ .side-nav { display: flex; flex-direction: column; gap: 14px; } .side-nav a { font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--color-foreground); transition: color .15s ease; } .side-nav a:hover, .side-nav a.is-active { color: var(--color-accent); } /* ---------- Footer (original style) ---------- */ footer { padding: 0; margin: 0; padding-top: 4vh; width: 100%; height: 420px; background-color: var(--color-black); color: var(--color-black); /* position: relative; */ overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: var(--margin-y); align-items: center; gap: 40px; position: relative; } footer a { color: var(--color-black); } footer p { color: var(--color-black); } footer h2 { color: var(--color-black); } footer h3 { color: var(--color-black); } footer h1 { color: var(--color-black); } footer h4 { color: var(--color-black); } footer { margin-top: 100px; } .footer-container { width: calc(100vw - 2 * var(--margin-x)); padding: var(--margin-y) var(--margin-x); margin-left: -1 * var(--margin-x); display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 20px; } .footer-content { width: calc(100vw - 2 * var(--margin-x) - 20px - 125px); /* width: 100%; */ height: 250px; background-color: var(--color-primary); /* padding: 20px; */ display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 0px; } .footer-content-center { height: 80%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 20px 0px; margin-left: 20px; margin-right: -20px; width: 260px; } .footer-content-center h2 { font-size: 28px; } .footer-content-left { height: 80%; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 0px 20px 40px; /* width: 50%; */ } .footer-content-left-links { display: flex; flex-direction: column; gap: 5px; margin-bottom: 40px; } .footer-email { font-size: 24px; color: var(--color-black); font-family: 'GajrajOne', sans-serif; } .footer-email:hover { text-decoration: underline; } .footer-content-right { height: 80%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; padding: 20px 40px 20px 0px; text-align: right; /* width: 50%; */ /* margin-right: 30vw; */ } .footer-content-right-title { font-size: 48px; color: var(--color-black); font-family: 'GajrajOne', sans-serif; } .footer-content-right-description { max-width: 380px; } .footer-social-icons, .head-social-icons { display: flex; flex-direction: row; gap: 10px; /* margin-top: 15px; */ transition: transform 0.3s ease; } .social-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--color-black); transition: opacity 0.3s ease, transform 0.3s ease; position: relative; } .social-icon:hover { opacity: 0.7; } .social-icon svg, .social-icon img { width: 24px; height: 24px; flex-shrink: 0; display: block; } .social-icon-label { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: 'Gabarito', sans-serif; font-size: 14px; color: var(--color-black); opacity: 0; pointer-events: none; z-index: 10000; background-color: transparent; min-width: 0; overflow: visible; transition: opacity 0.2s ease; } /* White label for about page (dark background) */ .head-item-image-container .social-icon-label, .head-social-icons .social-icon-label { color: var(--color-white); } .social-icon:hover~.social-icon { transform: translateX(0); } /* Shift icons to the right when a previous icon is hovered */ .footer-social-icons:hover .social-icon:not(:hover), .head-social-icons:hover .social-icon:not(:hover) { transform: translateX(0); } .footer-social-icons .social-icon img, .footer-phone .social-icon img { filter: brightness(0) invert(1); } .footer-image { position: relative; } .footer-image img { width: 125px; height: 250px; } .footer-copyright { width: calc(100vw - 2 * var(--margin-x)); padding: 0 var(--margin-x); color: var(--color-white); } .footer-leaf { position: absolute; z-index: 1; background-image: url('/assets/images/main/lotus-leaf.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; } .footer-leaf-1 { width: 100px; height: 100px; top: 180px; right: 82px; transform: rotate(40deg); background-image: none; background-color: var(--color-green-secondary); border-radius: 50%; } .footer-leaf-2 { width: 150px; height: 150px; top: 190px; right: 155px; transform: rotate(-50deg); } .footer-phone { display: none; } @media (max-width: 1200px) { .footer-content-center { display: none; } } @media (max-width: 1024px) { .footer-image img { width: 100px; height: 200px; } .footer-content { width: calc(100vw - 2 * var(--margin-x) - 20px - 100px); height: 200px; } .footer-email { font-size: 20px; } .footer-social-icons { height: 18px; margin-bottom: 5px; } .footer-content-left-links { margin-bottom: 20px; } .footer-leaf-1 { top: 150px; right: 77px; } .footer-leaf-2 { top: 160px; right: 150px; } } @media (max-width: 768px) { .footer-content, .footer-image { display: none; } .footer-phone { display: flex; width: calc(100vw - 2 * var(--margin-x)); } .footer-container { padding: 0; width: calc(100vw - 2 * var(--margin-x)); flex-direction: column; margin-left: 0; } .footer-content-right-description { display: none; } .footer-content-right-title { margin-top: 20px; } .footer-content-left { flex-direction: row-reverse; align-items: flex-end; justify-content: space-between; width: calc(100% - 40px); padding: 0 20px; margin-bottom: 20px; /* margin-top: -20px; */ } .footer-content-left-links { display: flex; flex-direction: column; gap: 10px; margin-bottom: 0; align-items: flex-end; justify-content: flex-end; } .footer-content-left a { text-align: right; } .footer-leaf-1 { display: none; } .footer-leaf-2 { display: none; } .footer-content-right-title { font-size: 36px; } .footer-content-right { padding: 0 20px; } .footer-phone-box { background-color: var(--color-primary); width: 100%; display: flex; flex-direction: column; overflow: hidden; } .footer-phone-top { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; } .footer-phone-links { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 0; } .footer-phone-links a { font-family: 'Gabarito', sans-serif; font-size: 16px; color: var(--color-black); text-decoration: none; } .footer-phone-links a:hover { text-decoration: underline; } .footer-phone-img { width: 100px; height: auto; display: block; align-self: flex-end; padding: 0px 20px 60px 20px; margin-top: 20px; } .footer-phone-bottom { padding: 10px 20px 20px; display: flex; flex-direction: column; gap: 8px; } .footer-phone-name { font-family: 'GajrajOne', sans-serif; font-size: 32px; color: var(--color-black); margin: 0; } .footer-phone-bottom-row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .footer-phone .footer-email { font-size: 13px; color: var(--color-foreground); } .footer-phone .footer-social-icons .social-icon { color: var(--color-foreground); } .footer-phone .footer-social-icons .social-icon svg path { fill: var(--color-foreground); } .footer-phone .footer-social-icons .social-icon img { filter: brightness(0); } footer { height: auto; min-height: 300px; padding-top: 40px; margin-top: 100px; } } /* The footer keeps the original type; the site-wide sans and heading styles would otherwise restyle it. */ footer, footer a, footer p { font-family: 'Gabarito', sans-serif; } footer { line-height: normal; } footer p { line-height: 1.2; } /* Four links (with CV) instead of the original three: tighten the space under them so the block still fits the pink card. */ .footer-content-left-links { margin-bottom: 16px; } footer h2 { font-family: 'ArchivoBlack', sans-serif; font-weight: 400; line-height: normal; letter-spacing: 0; margin: 0 0 5px; } /* ---------- Project grid (ProjectGrid) ---------- */ .project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 64px 32px; } .project-card { display: flex; flex-direction: column; color: var(--color-foreground); } .project-card-media { overflow: hidden; margin-bottom: 16px; } /* Covers keep their original proportions: full column width, natural height. */ .project-card-media img, .project-card-media video { display: block; width: 100%; height: auto; transition: transform .4s ease; } .project-card:hover .project-card-media img, .project-card:hover .project-card-media video { transform: scale(1.02); } .project-card-title { margin: 0 0 6px; font-size: 20px; font-weight: 700; line-height: 1.25; transition: color .15s ease; } .project-card:hover .project-card-title, .project-card:focus-visible .project-card-title { color: var(--color-accent); } .project-card-description { color: var(--color-gray); } @media (max-width: 720px) { .project-grid { grid-template-columns: 1fr; gap: 48px; } } /* The Projects page's lead sits between its title and the grid. */ .projects-lead { margin: 28px 0 64px; }