/* FILE: footer.css PURPOSE: Styles for the shared footer (footer.html). Uses only colours, fonts and sizes already defined in tokens.css - link that file before this one in the page . */ .footer { width: 100%; border-top: 1px solid var(--color-text-dark); } .footer__inner { max-width: 1200px; margin: 0 auto; /* Used to be horizontal-only with a fixed height:300px, so footer__promo (then stretched to fill it) reached the footer's full height with no inset. footer__promo is now sized by its own image (200px tall, 100px on mobile) instead of stretching, so this 30px top/bottom padding is what gives it breathing room, per Lucrecia's request -- the footer's total height is no longer a fixed number, it just follows from the promo image's own height plus this padding. */ padding: 30px 40px; box-sizing: border-box; display: flex; align-items: stretch; justify-content: space-between; gap: 40px; flex-wrap: wrap; /* stacks on narrow screens - no mobile footer spec given, safe default */ } .footer__main { display: flex; flex-direction: column; justify-content: center; } .footer__blurb, .footer__link { font-family: var(--font-body); font-size: 18px; /* was var(--font-size-body), per Lucrecia's request -- now matches what mobile already used */ font-weight: var(--weight-regular); color: var(--color-text-dark); } .footer__blurb { max-width: 540px; margin: 0; } .footer__cta { color: var(--color-text-dark); } /* "Get in touch", CV and LinkedIn all bold, at every width now (was mobile only), per Lucrecia's request. */ .footer__cta, .footer__link { font-weight: var(--weight-bold); } .footer__extra-links { display: flex; align-items: center; gap: 30px; /* gap between CV / LinkedIn */ margin-top: 30px; /* separation from the paragraph above */ } .footer__link { text-decoration: none; } .footer__link:hover, .footer__link:focus-visible, .footer__cta:hover, .footer__cta:focus-visible { text-decoration: underline; } /* CV / LinkedIn links show in every footer now, on every page and at every width, per Lucrecia's request -- the footer--compact modifier that used to hide them (Work and About Me pages) has no effect any more, see footer.html's own doc comment. */ /* Just the mate illustration now, no box/background/border/text, per Lucrecia's request -- still a link (wraps the image), just with all its own visual styling removed. */ .footer__promo { display: flex; align-items: center; flex-shrink: 0; } .footer__promo-illustration { display: block; /* mate-corner@3x.png is a @3x export (395 x 706). Height drives the size now (200px desktop, see the mobile override below for 100px), width follows automatically via this ratio so the browser reserves the right amount of space with no cropping needed. */ height: 200px; width: auto; aspect-ratio: 395 / 706; } @media (max-width: 768px) { .footer__inner { flex-direction: column; /* padding is the same 30px 40px as desktop now, see the base rule above */ } /* "get in touch" loses its default link underline in the resting state on mobile (hover/focus still show one, that rule is unscoped so it still applies -- only the plain resting state changes). Font size is 18px everywhere now, see the base rule above, so no mobile-only override is needed for that any more. */ .footer__cta { text-decoration: none; } /* Same image, just shorter on mobile, per Lucrecia's request. */ .footer__promo-illustration { height: 100px; } }