/* ============================================= PETER WEGNER — site styles Edit freely. Structure is intentionally simple. ============================================= */ /* FONTS — two options, use whichever applies: OPTION A — Adobe Fonts (Creative Cloud) ---------------------------------------- Aktiv Grotesk: typekit id → "aktiv-grotesk" Akzidenz-Grotesk: typekit id → "acumin-pro" is NOT it; search Adobe Fonts for "Akzidenz Grotesk" and add it to a web project, then paste the they give you into each HTML file's , above the style.css link. Font name to use: "akzidenz-grotesk" Paste your Adobe Fonts kit link here if using that route: @import url("https://use.typekit.net/XXXXXXX.css"); OPTION B — Self-hosted (you own the font files) ------------------------------------------------ Drop your .woff2 (and .woff fallback) files into a fonts/ folder next to this css/ folder, then uncomment the @font-face blocks below. */ /* @font-face { font-family: "Aktiv Grotesk"; src: url("../fonts/AktivGrotesk-Regular.woff2") format("woff2"), url("../fonts/AktivGrotesk-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Aktiv Grotesk"; src: url("../fonts/AktivGrotesk-Medium.woff2") format("woff2"), url("../fonts/AktivGrotesk-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } */ /* @font-face { font-family: "Akzidenz-Grotesk"; src: url("../fonts/AkzidenzGrotesk-Regular.woff2") format("woff2"), url("../fonts/AkzidenzGrotesk-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Akzidenz-Grotesk"; src: url("../fonts/AkzidenzGrotesk-Medium.woff2") format("woff2"), url("../fonts/AkzidenzGrotesk-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --black: #000; --white: #fff; --gray: #999; /* Set --font to whichever you're using: "aktiv-grotesk" (Adobe Fonts kit) "Aktiv Grotesk" (self-hosted @font-face above) "Akzidenz-Grotesk" (either route) The fallback chain avoids Helvetica entirely. */ --font: "aktiv-grotesk", "Aktiv Grotesk", "Akzidenz-Grotesk", "Acumin Pro", "Gill Sans", "Franklin Gothic Medium", sans-serif; --nav-size: 9px; --gap: 10px; } html, body { height: 100%; } body { font-family: var(--font); background: var(--white); color: var(--black); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } a:hover { color: var(--gray); } img { display: block; max-width: 100%; height: auto; } /* ── LAYOUT ── */ .site-wrapper { max-width: 1200px; margin: 0 auto; padding: 30px var(--gap) 60px; } /* ── HEADER / NAV ── */ header { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 10px; border-bottom: 0.5px solid var(--black); margin-bottom: 20px; } .site-title { font-size: 19px; font-weight: bold; letter-spacing: 0.06em; text-transform: uppercase; color: #333; } nav { display: flex; gap: 24px; font-size: var(--nav-size); font-weight: bold; letter-spacing: 0.06em; text-transform: uppercase; } nav a.active { color: #c00; } /* ── WORK / BOOKS GRID ── */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--gap); row-gap: 7px; } .grid-item { min-width: 0; } .grid-item a { display: block; } .grid-item img { width: 100%; display: block; transition: opacity 0.15s ease; } .grid-item a:hover img { opacity: 0.85; } .grid-item .caption { font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 5px; color: var(--black); } /* ── DETAIL PAGE ── */ .detail-body { max-width: 100%; margin: 0; } .detail-body h1 { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; } .detail-body .description { font-size: 13px; line-height: 1.5; margin-bottom: 20px; color: #333; } .detail-body .description strong { display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--black); margin-bottom: 6px; font-weight: normal; } .detail-images figure { margin-bottom: 20px; } .video-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden; } .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .detail-images img { width: 100%; display: block; } .detail-images figcaption { margin-top: 8px; font-size: 12px; line-height: 1.6; letter-spacing: 0.04em; color: var(--black); } .detail-images figcaption strong { font-weight: 700; color: var(--black); display: inline; font-size: 12px; letter-spacing: 0.04em; } .detail-nav { font-size: var(--nav-size); font-weight: bold; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 40px; display: flex; justify-content: space-between; } /* ── ABOUT PAGE ── */ .about-slideshow { margin-bottom: 0; } .about-slides { position: relative; } .about-slide { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity 0.8s ease; pointer-events: none; } .about-slide.active { position: relative; opacity: 1; pointer-events: auto; } .about-slide img { width: 100%; height: auto; display: block; } .about-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; margin-bottom: 20px; } .dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: #bbb; cursor: pointer; padding: 0; appearance: none; -webkit-appearance: none; transition: background 0.2s ease; } .dot.active { background: #666; } .about-rule { border: none; border-top: 0.5px solid var(--black); margin: 0 0 20px; } .about-text { max-width: none; text-align: justify; } .about-text p { font-size: 13px; line-height: 1.5; margin-bottom: 1em; color: #333; } .about-links { margin-top: 20px; font-size: 13px; font-weight: bold; line-height: 1.5; color: #333; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; } .about-links-sep { color: #888; font-weight: normal; } .about-links a { color: #333; } .about-links a:hover { color: var(--gray); } /* ── RESPONSIVE ── */ @media (max-width: 700px) { .grid { grid-template-columns: repeat(2, 1fr); } .grid-item .caption { display: none; } } }