/* ========================================================= Claire Paisley — Portfolio Design tokens ========================================================= */ :root { --bg: #FFFFFF; --bg-deep: #F0F0F0; --navy: #0F0F0F; --navy-soft: rgba(15, 15, 15, 0.72); --cream: #FFFFFF; --cream-2: #FFFFFF; --cream-soft: rgba(255, 255, 255, 0.82); --lime: #93DE4E; --sky-blue: #36D8FF; --vivid-purple: #8C28FF; --magenta: #8E25B7; --red-orange: #FC493F; --hot-pink: #FC2DD4; --purple: #7921F3; --focus-blue: #2563EB; /* --font-sans: body copy and UI (buttons, nav, labels) — stays quiet and easy to read. --font-heading: headings and display text — the "fun" half of the pairing. Both load from Google Fonts, see the tags in each page's . */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --font-heading: 'Bricolage Grotesque', Arial, Helvetica, sans-serif; --wrap-max: 1200px; --radius-lg: 28px; --radius-md: 18px; --radius-sm: 10px; } /* ========================================================= Reset ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } body, h1, h2, h3, p, figure { margin: 0; } ul { list-style: none; margin: 0; padding: 0; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; background: none; border: none; cursor: pointer; } /* Keyboard focus ring. A solid blue reads clearly against white button fills, the navy footer/hero, and the colorful gradient backgrounds alike (the palette has no blue, so it never blends in). Only shows for keyboard navigation, not mouse clicks. */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-blue); } body { background: var(--bg); color: var(--navy); font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } .wrap { max-width: var(--wrap-max); margin-inline: auto; padding-inline: 24px; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--navy); color: var(--cream); padding: 12px 20px; z-index: 1000; border-radius: 0 0 10px 0; } .skip-link:focus { left: 0; } /* ========================================================= Header / Nav ========================================================= */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--bg); transition: background 0.2s ease; } .header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 14px; } .logo-link { display: inline-flex; align-items: center; } .logo-text { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.25rem, 4.5vw, 1.75rem); letter-spacing: 0.01em; transition: color 0.2s ease; } .logo-text:hover { color: var(--rotate-color, var(--lime)); } .site-nav { display: none; align-items: center; gap: 14px; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 400; } .site-nav a { display: inline-flex; align-items: center; padding: 10px 24px; border-radius: 999px; border: 2px solid var(--navy); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .site-nav a:nth-child(1) { background: var(--navy); color: var(--cream); } .site-nav a:nth-child(2) { background: transparent; color: var(--navy); } .site-nav a:hover { background: var(--rotate-bg, var(--lime)); border-color: var(--rotate-bg, var(--lime)); color: var(--rotate-text, var(--navy)); transform: translateY(-2px); } .nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; padding: 10px; } .nav-toggle span { width: 24px; height: 2px; background: var(--navy); transition: transform 0.25s ease, opacity 0.25s ease, background 0.2s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-nav { max-height: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--cream); color: var(--navy); transition: max-height 0.3s ease; } .mobile-nav.is-open { max-height: 300px; } .mobile-nav a { padding: 16px 24px; border-top: 1px solid rgba(15, 15, 15, 0.1); font-family: var(--font-sans); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; font-size: 14px; transition: color 0.2s ease, background 0.2s ease; } @media (min-width: 760px) { .site-nav { display: flex; } .nav-toggle { display: none; } .mobile-nav { display: none; } } /* ========================================================= Hero ========================================================= */ .hero { padding-block: 64px 56px; text-align: left; } .hero-title { font-family: var(--font-heading); font-weight: 400; font-size: clamp(2.2rem, 5.4vw, 4rem); line-height: 1.08; letter-spacing: -0.01em; } .hero-title strong { font-weight: 700; transition: color 0.2s ease; } .hero-title strong:hover { color: var(--rotate-color, var(--lime)); } .hero-dek { margin-top: 20px; font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--cream-soft); max-width: 62ch; line-height: 1.6; } /* Works page: smaller, bold intro title (matches .section-title's scale rather than the homepage's big hero-title), and a tighter gap between the intro text and the first row of case study cards. */ .works-page .hero-title { font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.6rem); } .works-page .hero { padding-block: 64px 16px; } .works-page .work-section { padding-block: 16px 72px; } .btn-pill { display: inline-flex; align-items: center; gap: 10px; margin-top: 36px; background: var(--navy); color: var(--cream); font-family: var(--font-sans); font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; font-size: 14px; padding: 16px 28px; border-radius: 999px; transition: background 0.25s ease, transform 0.2s ease, color 0.25s ease; } .btn-pill:hover { background: var(--rotate-bg, var(--sky-blue)); color: var(--rotate-text, var(--navy)); transform: translateY(-2px); } .btn-pill span { transition: transform 0.25s ease; } .btn-pill:hover span { transform: translateY(3px); } /* ========================================================= Section titles ========================================================= */ .section-title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.6rem); transition: color 0.2s ease; } .section-title[data-hover]:hover { color: var(--rotate-color, var(--vivid-purple)); } /* ========================================================= Featured work ========================================================= */ .work-section { padding-block: 48px 72px; } .work-grid { display: grid; grid-template-columns: 1fr; gap: 28px; } @media (min-width: 700px) { .work-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } /* min-width: 0 overrides Grid's default of sizing a column to fit its item's full min-content — without it, the flex-shrink:0 category badge inside .work-caption-row forces the whole card (and page) wider than the viewport instead of letting the h3 beside it ellipsis-truncate. */ .work-card { display: block; min-width: 0; } .work-media { aspect-ratio: 5 / 3; width: 100%; overflow: hidden; background: var(--cream-2); border-radius: var(--radius-lg); transition: transform 0.3s ease; } .work-card:hover .work-media { transform: translateY(-6px); } .work-media img { width: 100%; height: 100%; object-fit: cover; } .work-caption { padding-top: 18px; } .work-caption-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .work-caption-row h3 { font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem; transition: color 0.2s ease; } .work-card:hover .work-caption-row h3 { color: var(--rotate-color, var(--lime)); } .work-category { font-family: var(--font-sans); font-weight: 400; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--navy-soft); white-space: nowrap; flex-shrink: 0; border: 1px solid var(--navy-soft); border-radius: 999px; padding: 5px 12px; } @media (min-width: 700px) { .work-caption-row { flex-wrap: nowrap; } .work-caption-row h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .work-caption p { margin-top: 8px; font-size: 14px; color: var(--navy-soft); line-height: 1.6; } /* ========================================================= Marquee sections (places worked / tools) ========================================================= */ .marquee-section { background: var(--cream); padding-block: 40px; border-bottom: 2px solid var(--navy); } .marquee-section .section-title { margin-bottom: 24px; } .marquee-wrap { overflow: hidden; width: 100%; } .marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; } .marquee-track--reverse { animation-name: marquee-reverse; animation-duration: 38s; } .marquee-wrap:hover .marquee-track { animation-play-state: paused; } .marquee-set { display: flex; align-items: center; gap: 20px; padding-inline: 10px; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes marquee-reverse { from { transform: translateX(-50%); } to { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } .marquee-wrap { overflow-x: auto; } .marquee-set[aria-hidden="true"] { display: none; } } .logo-chip { display: flex; align-items: center; justify-content: center; background: #FFFFFF; border-radius: var(--radius-md); padding: 18px 28px; height: 84px; min-width: 140px; } .logo-chip img { max-height: 40px; max-width: 130px; object-fit: contain; filter: grayscale(1); opacity: 0.75; transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease; } .logo-chip:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.06); } .logo-chip--icon { min-width: 84px; padding: 16px; } .logo-chip--icon img { max-height: 44px; } /* ========================================================= About teaser ========================================================= */ .about-teaser { background: var(--navy); color: var(--cream); padding-block: 64px; } .about-teaser .section-title { color: var(--cream); } .about-teaser p { margin-top: 18px; max-width: 62ch; color: var(--cream-soft); line-height: 1.7; } .about-teaser-inner { max-width: 900px; display: flex; flex-direction: column; gap: 28px; } .about-teaser-photo { width: clamp(140px, 40vw, 220px); aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-lg); filter: grayscale(1); flex-shrink: 0; } .about-teaser-content { min-width: 0; } .about-teaser .nav-btn { margin-top: 22px; } @media (min-width: 700px) { .about-teaser-inner { flex-direction: row; align-items: stretch; gap: 36px; } .about-teaser-photo { width: clamp(200px, 22vw, 260px); aspect-ratio: unset; } .about-teaser-content { flex: 1; display: flex; flex-direction: column; } .about-teaser-content .nav-btn { margin-top: auto; align-self: flex-start; } } /* ========================================================= About / Photography pages Uses the same full-bleed gradient backdrop as the homepage (body.home), with the same transparent/white nav-overlay header — no light section for the header to react to, so it just stays white the whole way down. ========================================================= */ .about-hero { padding-block: 64px 48px; } .about-hero-inner { display: flex; flex-direction: column; gap: 40px; } .about-photo-frame { width: 100%; max-width: 360px; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden; } .about-photo { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.03); } .about-title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 5vw, 3rem); transition: color 0.2s ease; } .about-title:hover { color: var(--rotate-color, var(--lime)); } .about-text { min-width: 0; } .about-text p { margin-top: 20px; font-size: 1.05rem; line-height: 1.7; color: var(--cream-soft); max-width: 60ch; } .about-text .nav-btn { margin-top: 28px; } @media (min-width: 700px) { .about-hero-inner { flex-direction: row; align-items: flex-start; gap: 56px; } .about-photo-frame { width: clamp(260px, 32vw, 360px); flex-shrink: 0; } } .about-gallery { padding-block: 0 96px; } .about-gallery-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } .about-gallery-item { margin: 0; } .about-gallery-photo { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.3s ease; } .about-gallery-item:hover .about-gallery-photo { transform: translateY(-6px); } .about-gallery-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .about-gallery-photo--zoom img { transform: scale(1.1); } .about-gallery-item figcaption { margin-top: 10px; font-size: 13px; color: var(--cream-soft); } @media (min-width: 700px) { .about-gallery-grid { grid-template-columns: repeat(3, 1fr); } } /* ========================================================= Reusable pill/outline buttons (header, footer, about teaser) ========================================================= */ .nav-btn { display: inline-flex; align-items: center; padding: 10px 24px; border-radius: 999px; border: 2px solid; font-family: var(--font-sans); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; font-size: 14px; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .nav-btn--solid-light { background: var(--cream); border-color: var(--cream); color: var(--navy); } .nav-btn--outline-light { background: transparent; border-color: var(--cream); color: var(--cream); } .nav-btn:hover { background: var(--rotate-bg, var(--lime)); border-color: var(--rotate-bg, var(--lime)); color: var(--rotate-text, var(--navy)); transform: translateY(-2px); } /* ========================================================= Footer ========================================================= */ .site-footer { background: var(--navy); color: var(--cream); padding-block: 40px 32px; border-top: 2px solid rgba(255, 255, 255, 0.15); } .footer-inner { display: flex; flex-direction: column; gap: 24px; } .site-footer .section-title { color: var(--cream); margin-bottom: 12px; } .footer-links { display: flex; flex-wrap: wrap; gap: 12px; } .footer-copy { font-size: 13px; color: rgba(255, 255, 255, 0.6); } @media (min-width: 700px) { .footer-inner { flex-direction: row; justify-content: space-between; align-items: flex-end; } } /* ========================================================= Homepage full-bleed background Fixed backdrop behind the whole page. The header is transparent so it shows through too; the about-teaser and footer keep their own solid navy background, so the gradient only shows through the "light" sections. ========================================================= */ body.home { background: transparent; color: var(--cream); } body.home::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(rgba(15, 15, 15, 0.25), rgba(15, 15, 15, 0.25)), url("../media/homepage_media/background.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; } body.home .work-category { color: var(--cream-soft); border-color: rgba(255, 255, 255, 0.5); } body.home .work-caption p { color: var(--cream-soft); } body.home .marquee-section { background: transparent; border-bottom-color: rgba(255, 255, 255, 0.25); } /* ========================================================= Transparent adaptive header Shared by any page with a dark/colorful section directly behind the header: the homepage's full-bleed background, or a case-study's dark hero. ========================================================= */ .nav-overlay .site-header { background: transparent; } .nav-overlay .logo-text:not(:hover) { color: #FFFFFF; } .nav-overlay .site-nav a:nth-child(2):not(:hover) { border-color: #FFFFFF; color: #FFFFFF; } .nav-overlay .nav-toggle span { background: #FFFFFF; } /* When a light-colored element (work-card image, marquee chip, or a case-study's white main content) scrolls up underneath the sticky transparent header, flip the logo/hamburger/About button to navy so they stay legible against it. Case-study pages also get an opaque header at that point, since the content passing underneath is long-form article text that needs a solid backing to stay readable; the homepage keeps the header transparent throughout, since it only ever has small contained cards passing underneath. */ .nav-overlay.header-on-light:not(.home) .site-header { background: var(--bg); } .nav-overlay.header-on-light .logo-text:not(:hover) { color: var(--navy); } .nav-overlay.header-on-light .nav-toggle span { background: var(--navy); } .nav-overlay.header-on-light .site-nav a:nth-child(2):not(:hover) { border-color: var(--navy); color: var(--navy); }