/* Global styles — friend-portfolio Reset, page typography, nav, footer and scroll-reveal. */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body, body * { letter-spacing: var(--tracking); } body { background: var(--color-bg); color: var(--color-ink); font-family: var(--font-sans); font-weight: var(--weight); font-size: var(--text-s); -webkit-font-smoothing: antialiased; } h1, h2 { font-weight: inherit; font-size: inherit; } h1, h2, p, ul { margin: 0; padding: 0; } ul { list-style: none; } a { color: inherit; text-decoration: none; } img { display: block; } :focus-visible { outline: var(--focus-w) solid var(--color-ink); outline-offset: var(--focus-offset); } /* ---------- Nav ---------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); height: var(--nav-h); padding: var(--nav-pad-y) var(--gutter); background: var(--color-bg); } .nav__inner { display: flex; justify-content: space-between; align-items: center; } .nav__left, .nav__center { display: flex; align-items: center; } .nav__left { gap: var(--gap-l); } .nav__center { gap: var(--gap-m); } .nav__logo { font-size: var(--text-m); line-height: var(--lh-tight); } .clock { display: flex; justify-content: center; width: var(--clock-w); line-height: var(--lh-tight); } .nav__link { display: flex; flex-direction: column; gap: var(--gap-xs); line-height: var(--lh-tight); } .nav__link::after { content: ""; height: var(--underline); background: var(--color-ink); opacity: 0; transform: scaleX(0); transition: transform var(--dur-link) var(--ease-link), opacity var(--dur-link) var(--ease-link); } .nav__link:hover::after, .nav__link:focus-visible::after { opacity: 1; transform: scaleX(1); } /* ---------- Footer ---------- */ .footer { padding: var(--footer-pad) var(--gutter); background: var(--color-bg); } .footer__inner { display: flex; justify-content: space-between; align-items: flex-end; height: var(--footer-h); max-width: var(--footer-max); margin: 0 auto; } .footer__brand { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; } .footer__logo { font-size: var(--text-xl); line-height: var(--lh-tight); letter-spacing: -0.03em; } .footer__copy, .footer__social a { color: var(--color-muted); } .footer__copy, .footer__list p { line-height: var(--lh-tight); } .footer__links { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; } .footer__list { display: flex; flex-direction: column; gap: var(--gap-s); } .footer__social a { transition: color var(--dur-link) var(--ease-link); } .footer__social a:hover, .footer__social a:focus-visible { color: var(--color-ink); } .to-top { display: flex; align-items: center; gap: var(--gap-s); line-height: var(--lh-tight); } .to-top svg { width: var(--icon); height: var(--icon); transform: rotate(-45deg); } /* ---------- Scroll reveal (JS adds .js to ) ---------- */ .js .reveal { opacity: 0; transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); } .js .reveal--up { transform: translateY(var(--reveal-up)); } .js .reveal--down { transform: translateY(var(--reveal-hero)); } .js .nav.reveal--down { transform: translateY(var(--reveal-nav)); } .js .reveal--down { transition-delay: var(--delay-reveal); } .js .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal, .nav__link::after, .footer__social a { transition: none; } .js .reveal { opacity: 1; transform: none; } }