/* ========================================================================= style.css — the ONE stylesheet shared by every page on the site. "CSS" = the rules that control how the HTML looks (colors, spacing, layout). Because all pages link to this same file, changing a color here changes it everywhere. That's why we keep styling in one place instead of on each page. ========================================================================= */ /* ---- 1. Design tokens --------------------------------------------------- These "custom properties" (the --name values) are reusable settings. We define our colors and sizes once here, then refer to them below with var(--name). Change a value here and it updates across the whole site. */ :root { --bg: #ffffff; /* page background */ --surface: #f4f7f9; /* slightly grey panels/cards */ --text: #16232e; /* main text: dark, near-black for easy reading */ --muted: #5a6b78; /* secondary text: softer grey */ --accent: #0f7d78; /* brand accent: a clinical teal */ --accent-dk: #0b5c58; /* darker teal for hover states */ --border: #dde5ea; /* thin divider lines */ --maxw: 1000px; /* the widest the content ever gets on big screens */ --radius: 10px; /* rounded-corner size, reused everywhere */ } /* ---- 2. Base + sensible resets ----------------------------------------- box-sizing:border-box makes width include padding, so boxes never overflow unexpectedly. This is the single most useful line for predictable layouts. */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; /* A "system font stack": use whatever clean UI font the visitor's device already has (San Francisco on Mac, Segoe on Windows...). Zero download, always looks native. */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } /* ---- Per-page soft background tints ------------------------------------ Each page gets its own whisper-soft wash via a class on , all kept in one gentle cool family (teal → sage → periwinkle) so they harmonize. */ body.home { background: #e9f4f1; } /* soft teal (matches the accent) */ body.about { background: #ffefe7; } /* soft peach, light (complements the red-rock ground in the family photo) */ body.portfolio { background: #eef4e8; } /* soft sage green */ /* Each case study gets its own whisper-soft wash that echoes the dominant ad on that page. All kept very light so the artwork stays the focus. Each case page's carries "case" (shared) plus one of these modifiers; the modifier comes later in the file so it wins over the .case fallback. */ body.case { background: #eef4e8; } /* fallback: soft sage */ body.case-brisdelle{ background: #f3eef8; } /* soft lavender — purple smoke ad */ body.case-jardiance{ background: #e6f3f4; } /* soft aqua — pool "Vacation" ad */ body.case-nd0612 { background: #f5f1ea; } /* soft warm sand — skin-tone hands */ body.case-neulasta { background: #eceff3; } /* soft cool blue-grey — corridor */ body.case-evrysdi { background: #f0f6fd; } /* very light sky blue — blue blanket */ body.case-crm { background: #f0f0f2; } /* soft light grey — black ad */ /* Images never spill past their container — key for mobile. */ img { max-width: 100%; height: auto; display: block; } /* ---- 3. Layout helper --------------------------------------------------- .container centers content and caps its width. We reuse it on every page so all pages share the same comfortable reading width and side gutters. */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; /* left/right breathing room, esp. important on phones */ } /* ---- 4. Navigation bar (shared across pages) ---------------------------- */ .site-nav { border-bottom: 1px solid var(--border); background: transparent; /* show the page's soft tint behind the nav */ } .site-nav .container { display: flex; /* flexbox = lay children in a row... */ flex-wrap: wrap; /* ...but wrap onto a new line if too narrow (mobile) */ align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; padding-bottom: 16px; } .brand { font-weight: 700; font-size: 1.15rem; color: var(--text); text-decoration: none; letter-spacing: -0.01em; } .brand span { color: var(--accent); } /* accent-color the surname dot/word */ .nav-links { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; margin: 0; padding: 0; list-style: none; /* remove the default bullet points */ } .nav-links a { color: var(--muted); text-decoration: none; font-size: 0.98rem; padding: 6px 2px; /* padding gives a bigger, finger-friendly tap area */ } .nav-links a:hover, .nav-links a[aria-current="page"] { /* the current page's link is highlighted */ color: var(--accent); } /* ---- 5. Buttons --------------------------------------------------------- */ .btn { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; padding: 12px 22px; /* generous padding = easy to tap on a phone */ border-radius: var(--radius); border: none; cursor: pointer; font-size: 1rem; } .btn:hover { background: var(--accent-dk); } .btn-outline { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); } .btn-outline:hover { background: var(--surface); } /* ---- 6. Hero (big intro block on the home page) ------------------------- */ .hero { padding: 72px 0 56px; } .hero .eyebrow { color: var(--accent); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85rem; margin: 0 0 14px; } .hero h1 { /* clamp() = responsive font size: min 2rem, scale with screen, max 3.4rem. This alone keeps the headline from being huge on phones or tiny on TVs. */ font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 18px; } .hero p.lead { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--muted); max-width: 620px; margin: 0 0 32px; } /* Two-column hero: circular headshot on the left, copy on the right. flex-wrap stacks them (photo on top) on narrow screens. */ .hero-grid { display: flex; align-items: center; gap: clamp(28px, 4vw, 48px); /* No flex-wrap: the copy stays to the RIGHT of the photo across tablet/desktop. The mobile rule below is what stacks them (photo on top) on real phones. */ } .hero-copy { flex: 1 1 0; min-width: 0; } /* fills the space to the right of the photo */ /* Circular headshot: a square box + border-radius:50% makes the circle. The width scales with the row (clamp) but never below 220px or above 340px, so it and the copy always fit side by side. aspect-ratio keeps it a perfect circle; object-fit:cover fills it; object-position frames the face. */ .hero-photo { flex: 0 0 auto; width: clamp(220px, 34%, 340px); aspect-ratio: 1 / 1; height: auto; border-radius: 50%; object-fit: cover; object-position: center 22%; } /* Round accent buttons (inspired by the reference designs). Two teal shades so the pair reads as one designed set, like the examples' circular buttons. */ .hero-circles { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 30px; } .circle-btn { width: 132px; height: 132px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; font-weight: 600; font-size: 1.02rem; padding: 10px; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .circle-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(22, 35, 46, 0.16); } .circle-btn--solid { background: var(--accent); color: #fff; } .circle-btn--solid:hover { background: var(--accent-dk); } .circle-btn--tint { background: #d5e9e7; color: var(--accent-dk); } /* soft teal tint */ .circle-btn--tint:hover { background: #c4e0dd; } /* ---- 7. Generic page sections ------------------------------------------ */ .page { padding: 56px 0; } .page h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 8px; letter-spacing: -0.02em; } .page .subtitle { color: var(--muted); margin: 0 0 32px; font-size: 1.1rem; } .prose { max-width: 680px; } .prose p { margin: 0 0 18px; } /* ---- About page: headshot floated so the bio wraps around it ---------- "float: right" pulls the photo to the right edge and lets the paragraph text flow around its left side (the classic magazine-style text wrap). */ .headshot { float: right; /* Group photo, so a bit wider (~240px) than a solo headshot would need, to keep faces legible. The 864px source stays crisp at this size, even on retina. */ width: 240px; max-width: 42%; /* never let it hog a narrow column */ border-radius: var(--radius); margin: 4px 0 16px 28px; /* left + bottom gap between photo and wrapping text */ } /* ---- 8. Portfolio / work grid ------------------------------------------- CSS Grid with auto-fit + minmax is the classic responsive gallery trick: it fits as many columns as will hold cards at least 260px wide, then wraps. Wide screen = 3 across; tablet = 2; phone = 1. No media query needed. */ .work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 8px; } /* Each campaign = an image on top, then a title + caption below it. */ .work-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; /* clips the image corners to match the rounded card */ display: flex; flex-direction: column; /* stack image over text */ } .work-card img { width: 100%; aspect-ratio: 3 / 2; /* every card's image area is the same shape, so the grid stays tidy */ object-fit: contain; /* show the WHOLE ad (letterboxed if needed) so copy is never cropped */ background: var(--surface); /* fills any letterbox space + shows while loading */ display: block; } .work-card .work-body { padding: 18px 18px 22px; } /* line-height:1.2 tightens the leading on titles that wrap to two lines (e.g. the Jardiance and CRM cards) so the two rows sit closer together. */ .work-card h3 { margin: 0 0 6px; font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1.2; } .work-card .caption { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.5; } /* When a card is a link (), make the WHOLE card clickable and give it a gentle hover lift so it's obvious it's interactive. */ a.work-card { text-decoration: none; color: inherit; /* keep the text colors, not link-blue */ transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease; } a.work-card:hover { border-color: var(--accent); box-shadow: 0 8px 24px rgba(22, 35, 46, 0.10); transform: translateY(-3px); /* lifts slightly toward the cursor */ } /* ---- 8b. Case-study page (Jessica Hische-style: info left, images right) --- */ .case-layout { display: grid; grid-template-columns: 5fr 7fr; /* narrower info column, wider image column */ gap: 52px; align-items: start; /* so the sticky left column can stick */ } /* LEFT: project info. position:sticky keeps it in view while the images scroll. */ .case-info { position: sticky; top: 24px; align-self: start; } .case-back { display: inline-block; margin-bottom: 22px; color: var(--muted); text-decoration: none; font-size: 0.95rem; } .case-back:hover { color: var(--accent); } .case-title { font-size: clamp(2rem, 4vw, 2.9rem); letter-spacing: -0.02em; color: var(--accent); margin: 0 0 12px; /* gap below the title's rule to the Client line */ padding-bottom: 3px; /* tight gap between the title and its accent rule */ border-bottom: 3px solid var(--accent); /* accent rule under the title, like the reference */ } .case-meta { margin: 0; font-size: 1rem; } .case-meta-label { /* "CLIENT:", "ART DIRECTOR:" small-caps labels */ text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 700; color: var(--accent); margin-right: 4px; } /* 12px top matches the 12px below the title's rule, so the Client line sits evenly between the two rules; 20px bottom gives the description room. */ .case-rule { border: 0; border-top: 1px solid var(--border); margin: 12px 0 20px; } .case-desc { font-size: 1.05rem; line-height: 1.7; margin: 0 0 22px; } /* (Drop-cap first-letter styling removed — it rendered inconsistently across browsers, leaving a big gap after the first letter. The first letter now reads as a normal part of the first word.) */ /* RIGHT: campaign images stacked, shown full (no cropping), each clickable. */ .case-media { display: flex; flex-direction: column; gap: 30px; } .case-shot { margin: 0; } .tile-img { /* the clickable image button */ display: block; width: 100%; padding: 0; border: 0; background: var(--surface); border-radius: var(--radius); overflow: hidden; cursor: zoom-in; box-shadow: 0 6px 18px rgba(22, 35, 46, 0.08); transition: transform 0.15s ease, box-shadow 0.15s ease; } .tile-img:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(22, 35, 46, 0.16); } .tile-img img { width: 100%; height: auto; display: block; } /* full image, natural shape */ .case-shot figcaption { margin-bottom: 10px; color: var(--muted); font-size: 0.9rem; } .case-hint { color: var(--muted); font-size: 0.85rem; margin-top: 30px; } /* Lightbox overlay (full-size image on click). [hidden] keeps it off until used. */ .lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(16, 24, 30, 0.86); cursor: zoom-out; } .lightbox[hidden] { display: none; } /* needed: our display:flex would override the default */ .lightbox img { max-width: min(1100px, 94vw); max-height: 92vh; width: auto; height: auto; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } /* Stack the two columns (info on top, images below) and drop sticky on smaller screens, where side-by-side would squeeze both columns too narrow. */ @media (max-width: 760px) { .case-layout { grid-template-columns: 1fr; gap: 0; } .case-info { position: static; margin-bottom: 34px; } } /* ---- 9. Password gate (portfolio page only) ---------------------------- */ .gate { max-width: 420px; margin: 40px auto; text-align: center; } .gate form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; } .gate input[type="password"] { flex: 1 1 220px; padding: 12px 14px; font-size: 1rem; border: 1px solid var(--border); border-radius: var(--radius); } .gate .hint { color: var(--muted); font-size: 0.9rem; margin-top: 14px; } .gate .error { color: #b3261e; font-size: 0.92rem; min-height: 1.2em; margin-top: 10px; } /* A small honest warning banner about the soft gate. */ .notice { background: #fff8e6; border: 1px solid #f0dca0; border-radius: var(--radius); padding: 12px 16px; font-size: 0.9rem; color: #6b5a1e; margin-bottom: 28px; } /* utility: hide something completely (used to toggle the gate vs. gallery) */ .hidden { display: none !important; } /* ---- 10. Footer --------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border); color: var(--muted); font-size: 0.9rem; padding: 28px 0; margin-top: 40px; } /* ---- 11. Responsive tweaks --------------------------------------------- Most of our layout is already fluid (flex-wrap, clamp, auto-fit grid). This "media query" adds a couple of extra adjustments only when the screen is 600px wide or narrower — i.e. phones. Read it as: "WHEN the screen is at most 600px, THEN apply these rules." */ @media (max-width: 600px) { .hero { padding: 48px 0 36px; } /* Phones only: stack the hero (photo on top) and center everything. */ .hero-grid { flex-direction: column; text-align: center; gap: 28px; } .hero-photo { width: 240px; } .hero-circles { justify-content: center; } .site-nav .container { justify-content: center; } /* On a narrow phone, a floated photo squeezes the text column too thin, so stop floating and center the photo above the bio instead. */ .headshot { float: none; display: block; width: 220px; max-width: 70%; margin: 0 auto 22px; } }