/*
v2.css — Jen Wilson Portfolio v2
Landing page + Project case study pages
Font: Raleway via Google Fonts (weights 300–800, normal + italic)
1. Fonts (Google Fonts import)
2. Variables & Reset
3. Typography
4. Navigation
5. Landing — Masthead
6. Landing — Project Cards
7. Landing — Footer
8. Project Page — Hero
9. Project Page — Content Sections
10. Project Page — Approach Phases
11. Back Link
12. Responsive
*/
/* ─────────────────────────────────────────────────────────────
1. Fonts — Raleway via Google Fonts
───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300..800;1,300..800&display=swap');
/* ─────────────────────────────────────────────────────────────
2. Variables & Reset
───────────────────────────────────────────────────────────── */
:root {
/* Color palette */
--nav-bg: #31353B;
--nav-text: #F2F3F5;
--nav-text-hover: #55B4B4; /* lighter teal — hover state */
--accent-dark: #0C70A6; /* default interactive state */
--nav-border: #F2F3F5;
--outline-btn: #0C70A6; /* accessible outline-button border/label color */
--outline-btn-hover-bg: #EDF8FD;
--body-bg: #F4F6F7;
--card-details-bg: #f0f2f4;
--card-hover-bg: #31353b;
--text-dark: #191919;
--text-body: #191919;
--text-secondary: #6A757E;
--text-muted: #999999;
--text-on-dark: #ffffff;
--text-muted-dark: #A5B2BD;
--font-main: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
--phase-empathize: #e8813a;
--phase-define: #3a7bd5;
--phase-ideate: #7c5cbf;
--phase-prototype: #2ea87e;
--phase-test: #c9a227;
--phase-handoff: #5a7a8a;
/* Font size tokens
font-size-body: standard readable text throughout the portfolio
font-size-meta-label: small uppercase labels (ROLE, SKILLS, YEAR, etc.) */
--font-size-body: 16px;
--font-size-meta-label: 11px;
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 2rem;
--space-lg: 4rem;
--space-xl: 6rem;
/* Section heading rule (the underline beneath .section-heading)
gap-top: space between heading text and the line
gap-bottom: space between the line and the content that follows
color reuses --card-details-bg — no new color introduced */
--section-rule-weight: 2px;
--section-rule-color: var(--card-details-bg);
--section-rule-gap-top: 8px;
--section-rule-gap-bottom: 16px;
/* Project color theming
The portfolio has a fixed palette of named hue classes (defined
below) -- apply one directly to a project's and to its
homepage card link(s). Assigning a project a color is just picking
a hue name; no need to remember RGB/hex pairs. Two projects can
share a hue on purpose -- they'll recolor together if the hue's
values ever change. Light cards use --project-color-rgb at 10%
opacity; the image card uses it at full opacity. Neutral fallback
approximates --card-details-bg so an unthemed page still looks right. */
--project-color-rgb: 240, 242, 244;
}
/* Portfolio color palette -- one class per hue. Edit a hue's values
here to recolor every project currently assigned to it.
--project-color-dark is optional -- v2.js auto-derives an accessible
dark shade via HSL darkening when it's omitted. Currently assigned:
purple -> TCI, Data Viz (orphaned)
teal -> Folio, Design System (orphaned)
blue -> Patient Billing
copper -> Active Learning
Pink and gray are defined but not yet assigned to a project. */
.palette-purple { --project-color-rgb: 142, 142, 195; --project-color-dark: #58589D; }
.palette-teal { --project-color-rgb: 153, 202, 203; --project-color-dark: #3d8e90; }
.palette-blue { --project-color-rgb: 132, 176, 208; --project-color-dark: #134262; }
.palette-copper { --project-color-rgb: 248, 199, 139; --project-color-dark: #AC632F; }
.palette-pink { --project-color-rgb: 219, 180, 198; --project-color-dark: #994869; }
.palette-gray { --project-color-rgb: 210, 219, 226; --project-color-dark: #434C54; }
/* Future Vision has no page yet and no assigned hue -- its own
placeholder color, per the note on its homepage card. */
.theme-future-vision { --project-color-rgb: 180, 155, 120; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
font-family: var(--font-main);
background: #ffffff;
color: var(--text-body);
line-height: 1.7;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
/* ─────────────────────────────────────────────────────────────
3. Typography
───────────────────────────────────────────────────────────── */
h1 { font-family: var(--font-main); font-size: 48px; font-weight: 700; line-height: 48px; color: var(--text-dark); }
h2 { font-family: var(--font-main); font-size: 1.8rem; font-weight: 700; line-height: 1.25; color: var(--text-dark); }
h3 { font-family: var(--font-main); font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--text-dark); }
h4 { font-family: var(--font-main); font-size: 1rem; font-weight: 600; }
p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }
/* ─────────────────────────────────────────────────────────────
4. Navigation
Height 100px, bg #31353B, 5px border-bottom,
Raleway 17px weight 400, brand Raleway 32px weight 700
───────────────────────────────────────────────────────────── */
/* Nav background — always full viewport width */
.site-nav {
position: sticky;
top: 0;
z-index: 100;
background: var(--nav-bg);
border-bottom: 5px solid var(--nav-border);
height: 100px;
}
/* Nav content — constrained to 1152px, centered, 36px side padding */
.nav-inner {
max-width: 1152px;
margin: 0 auto;
padding: 30px 36px 0;
display: grid;
grid-template-columns: 30% 40% 30%;
align-items: center;
height: 100%;
}
.nav-links {
display: flex;
align-items: center;
gap: 2em;
}
.nav-links a {
font-family: var(--font-main);
color: var(--nav-text);
font-size: 17px;
font-weight: 400;
line-height: 30px;
padding: 0.3em 0.85em;
border: 2px solid transparent;
border-radius: 6px;
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a[aria-current="page"] {
background: #000000;
border-color: #ffffff;
color: #ffffff;
}
.nav-brand {
font-family: var(--font-main);
font-size: 32px;
font-weight: 700;
line-height: 30px;
color: var(--nav-text);
text-align: center;
display: block;
}
.nav-icons {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.5em;
}
.nav-icons a {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--nav-text);
font-size: 1.1rem;
padding: 0.4em 0.5em;
border: 2px solid transparent;
border-radius: 6px;
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.nav-icons a:hover,
.nav-icons a:focus-visible {
background: #000000;
border-color: #ffffff;
color: #ffffff;
}
/* Mobile hamburger */
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
}
.nav-toggle span {
display: block;
width: 24px;
height: 2px;
background: var(--nav-text);
border-radius: 2px;
}
@media (max-width: 932px) {
.site-nav { height: auto; }
.nav-inner {
grid-template-columns: 1fr auto;
padding: 20px 20px;
height: auto;
}
.nav-links,
.nav-icons { display: none; }
.nav-links.is-open {
display: flex;
flex-direction: column;
align-items: flex-start;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--nav-bg);
padding: var(--space-sm) 20px;
gap: 0.75rem;
z-index: 99;
}
.nav-brand { font-size: 32px; line-height: 32px; }
.nav-toggle { display: flex; }
}
/* ─────────────────────────────────────────────────────────────
5. Page Canvas Wrapper
Constrains landing page sections to 1152px, centered.
Nav bg extends full-width separately (see section 4).
On viewports ≤ 1192px (1152 + 2×20), 20px side gutters
keep sections off screen edges — giving the "card" look.
───────────────────────────────────────────────────────────── */
.page-sections {
max-width: 1152px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 24px;
padding: var(--space-xl) 36px;
}
/* Outer wrapper for a single section card (e.g. project hero).
Centers at 1152px and provides the same 20px gutters as .page-sections
so the card floats off the screen edges at narrower viewports. */
.hero-wrapper {
max-width: 1152px;
margin: 0 auto;
}
@media (max-width: 1192px) {
.page-sections { padding-left: 20px; padding-right: 20px; }
.nav-inner { padding-left: 20px; padding-right: 20px; }
.hero-wrapper { padding-left: 20px; padding-right: 20px; }
}
/* Single-column text container — 800px max-width, centered in its section.
Use this anywhere content is a single readable column:
hero text, resume body, case study intro, etc.
Text inside remains left-aligned; the block itself centers. */
.text-column {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
/* ── Section heading token ──────────────────────────────────
Primary section heading style used throughout the portfolio:
resume sections, project page sections, any major content group.
To use: add class="section-heading" to any h2 (or other element).
The underline spans the full width of the containing column.
Token values (swap these for a different designer's inspiration):
font-size: 25px
font-weight: 700
color: #191919 (--text-dark)
underline: 2px solid #191919
──────────────────────────────────────────────────────────── */
.section-heading {
font-family: var(--font-main);
font-size: 25px;
font-weight: 700;
font-style: normal;
color: var(--text-dark);
line-height: 30px;
text-align: left;
text-transform: none;
letter-spacing: normal;
padding-top: 20px;
padding-bottom: var(--section-rule-gap-top); /* text → line */
margin-top: 0;
margin-bottom: var(--section-rule-gap-bottom); /* line → content */
border-bottom: var(--section-rule-weight) solid var(--section-rule-color);
}
/* ─────────────────────────────────────────────────────────────
6. Landing — Masthead
Exact values: bg #F4F6F7, background watermark image center-right,
padding 110px top / 100px bottom, h1 48px 700, p 18px 400
───────────────────────────────────────────────────────────── */
.masthead {
background-color: #F4F6F7; /* bleeds full viewport width */
}
/* Background image lives on the inner wrapper so it stays pinned to the
1152px content area — not the full viewport. background-size: contain
must reference a fixed-width container or the image scales to viewport. */
.masthead-inner {
max-width: 1152px;
margin: 0 auto;
padding: 110px 36px 100px;
background-image: url("https://cdn.myportfolio.com/b1457e90-a349-4d6d-8a8f-742a3ea5c6c3/c8b08aea-7e9b-41f3-b4e6-0901223ce52f_rwc_0x0x816x901x4096.png?h=185ce55070e15dddc0e195d5cc6fe5db");
background-position: center right;
background-repeat: no-repeat;
background-size: contain;
}
/* Masthead text is constrained to 800px via .text-column (see layout utilities) */
.masthead h1 {
color: #191919;
font-size: 48px;
font-weight: 700;
line-height: 48px;
margin-bottom: 15px;
margin-top: 0;
text-align: left;
}
.masthead p {
color: #31353B;
font-size: 18px;
font-weight: 400;
line-height: 28px;
margin: 0;
text-align: left;
}
@media (max-width: 932px) {
.masthead-inner {
padding: 44px 36px 40px;
}
.masthead h1 { font-size: 24px; line-height: 24px; margin-bottom: 11px; }
.masthead p { font-size: 14px; line-height: 20px; }
}
@media (max-width: 540px) {
.masthead-inner {
padding: 38px 24px 34px;
}
.masthead h1 { font-size: 21px; line-height: 21px; margin-bottom: 10px; }
.masthead p { font-size: 14px; line-height: 20px; }
}
/* ─────────────────────────────────────────────────────────────
7. Landing — Project Cards
Exact values: image 60% / details 40%, height 450px,
details bg #f0f2f4, hover bg #31353b, text centered
───────────────────────────────────────────────────────────── */
.projects {
display: flex;
flex-direction: column;
/*gap: 12px;*/
}
.project-card {
display: flex;
align-items: stretch;
background: var(--card-details-bg);
cursor: pointer;
transition: background 0.2s ease;
text-decoration: none;
color: var(--text-dark);
margin-top: 20px;
height: 450px;
}
/* Even cards: text left, image right */
.project-card:nth-child(even) { flex-direction: row-reverse; }
.project-card:hover { background: var(--card-hover-bg); }
/* Image side — 60% width */
.card-image {
flex: 0 0 60%;
position: relative;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: opacity 0.2s ease;
}
/* Dark overlay on image when hovered */
.card-image::after {
content: '';
position: absolute;
inset: 0;
background-color: #191919;
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}
.project-card:hover .card-image::after { opacity: 0.5; }
/* Details side — 40% width, centered content */
.card-info {
flex: 0 0 40%;
padding: 6% 4%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 0;
transition: background 0.2s ease;
background: var(--card-details-bg);
}
.project-card:hover .card-info { background: var(--card-hover-bg); }
/* Category label (e.g. "UX / Product Design") */
.card-category {
font-family: var(--font-main);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-secondary);
display: block;
margin-bottom: 6px;
transition: color 0.2s ease;
}
.project-card:hover .card-category { color: #ffffff; }
/* Title */
.card-info h2 {
font-family: var(--font-main);
font-size: 20px;
font-weight: 600;
line-height: 24px;
color: #191919;
padding-bottom: 3px;
transition: color 0.2s ease;
}
.project-card:hover .card-info h2 { color: #ffffff; }
/* Description */
.card-description {
font-family: var(--font-main);
font-size: 14px;
font-weight: 400;
line-height: 26px;
color: #31353B;
padding-top: 12px;
margin-bottom: 0;
transition: color 0.2s ease;
}
.project-card:hover .card-description { color: #ffffff; }
/* Meta row — bare spans for date and role inside .card-meta */
.card-meta {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 12px;
}
.card-meta span {
font-family: var(--font-main);
font-size: 14px;
font-weight: 400;
line-height: 18px;
color: #6A757E;
transition: color 0.2s ease;
}
.project-card:hover .card-meta span { color: #ffffff; }
/* Tags */
.card-tags {
font-family: var(--font-main);
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #6A757E;
padding-top: 12px;
margin-bottom: 0;
transition: color 0.2s ease;
}
.project-card:hover .card-tags { color: #ffffff; }
@media (max-width: 932px) {
.project-card { height: auto; min-height: 360px; }
.card-image { flex: 0 0 60%; }
.card-info { flex: 0 0 40%; }
.card-info h2 { font-size: 17px; line-height: 20px; padding-bottom: 5px; }
.card-description { font-size: 14px; line-height: 20px; padding-top: 10px; }
.card-role, .card-tags { font-size: 14px; line-height: 20px; padding-top: 10px; }
}
@media (max-width: 540px) {
.project-card,
.project-card:nth-child(even) {
flex-direction: column;
height: auto;
}
.card-image { flex: none; height: 293px; }
.card-info { flex: none; padding: 8% 5%; }
.card-info h2 { font-size: 14px; line-height: 17px; padding-bottom: 4px; }
.card-description { font-size: 14px; line-height: 20px; padding-top: 10px; }
.card-role, .card-tags { font-size: 14px; line-height: 20px; padding-top: 10px; }
}
/* ─────────────────────────────────────────────────────────────
7. Landing — Footer
───────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
Specialization — two-column skill bars section
───────────────────────────────────────────────────────────── */
.spec-section {
background: #ffffff;
font-family: var(--font-main);
}
.spec-inner {
max-width: 1152px;
margin: 0 auto;
padding: 4rem 36px;
}
/* Full-width header — sits above the two-column grid */
.spec-heading {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-dark);
margin: 0 0 0.75rem;
letter-spacing: -0.02em;
}
.spec-intro {
font-size: 0.95rem;
color: var(--text-secondary);
line-height: 1.65;
margin: 0 0 2.5rem;
}
/* Two-column grid: Design | Research */
.spec-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: start;
}
/* Column group heading */
.spec-group-title {
font-size: 1rem;
font-weight: 700;
color: var(--text-dark);
margin: 0 0 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #e8e8e8;
}
/* Individual skill row */
.skill-item {
margin-bottom: 1.5rem;
}
/* Skill label — uppercase, bold, small */
.skill-name {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-dark);
margin-bottom: 0.25rem;
}
/* Tools description + percentage on same line */
.skill-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.4rem;
}
.skill-tools {
font-size: 0.85rem;
color: var(--text-secondary);
}
.skill-pct {
font-size: 0.85rem;
font-weight: 700;
color: var(--text-dark);
white-space: nowrap;
margin-left: 1rem;
}
.skill-track {
background: #e4e8eb;
border-radius: 4px;
height: 8px;
overflow: hidden;
}
.skill-fill {
height: 100%;
width: var(--pct);
background: var(--accent-dark);
border-radius: 4px;
}
/* Responsive */
@media (max-width: 1192px) and (min-width: 641px) {
.spec-inner { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 640px) {
.spec-inner { padding: 3rem 20px; }
.spec-grid { grid-template-columns: 1fr; gap: 0; }
}
/* ─────────────────────────────────────────────────────────────
Features band — full viewport width, dark background.
Three pillars: icon (left) + heading + description (right).
Inner container matches nav-inner width and gutters exactly.
───────────────────────────────────────────────────────────── */
.features-section {
background: #1e1e1e;
font-family: var(--font-main);
}
.features-inner {
max-width: 1152px;
margin: 0 auto;
padding: 4rem 36px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
}
/* Each pillar: icon floats left, text stacks to the right */
.feature-item {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}
.feature-icon {
flex-shrink: 0;
color: #ffffff;
margin-top: 0.15rem; /* optically align icon with heading */
}
.feature-heading {
font-size: 1rem;
font-weight: 600;
color: #ffffff;
margin: 0 0 0.5rem;
letter-spacing: -0.01em;
}
.feature-desc {
font-size: 0.9rem;
line-height: 1.65;
color: #9a9a9a;
margin: 0;
}
/* Tablet: 3-col → 1-col (narrow enough that 2-col still crowds) */
@media (max-width: 860px) {
.features-grid { grid-template-columns: 1fr; gap: 2rem; }
.features-inner { padding: 3rem 20px; }
}
/* Match nav gutter at mid-range */
@media (max-width: 1192px) and (min-width: 861px) {
.features-inner { padding-left: 20px; padding-right: 20px; }
}
/* ─────────────────────────────────────────────────────────────
Footer
───────────────────────────────────────────────────────────── */
.site-footer {
background: #1e1e1e;
font-family: var(--font-main);
}
/* Inner container — matches nav-inner width and gutters */
.site-footer-inner {
max-width: 1152px;
margin: 0 auto;
padding: 2.5rem 36px;
}
/* Top block — brand + tagline, centered */
.site-footer-top {
text-align: center;
margin-bottom: 2rem;
}
.site-footer-brand {
display: block;
font-size: 1.2rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 0.5rem;
text-decoration: none;
letter-spacing: -0.01em;
}
.site-footer-brand:hover {
color: rgba(255, 255, 255, 0.75);
}
.site-footer-tagline {
font-size: 0.9rem;
color: #9a9a9a;
margin: 0;
line-height: 1.6;
}
/* Bottom bar — icons left, copyright right */
.site-footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.site-footer-social {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 1.1rem;
}
.site-footer-social a {
font-size: 1.35rem;
color: #9a9a9a;
transition: color 0.18s ease;
}
.site-footer-social a:hover {
color: #ffffff;
}
.site-footer-copy {
font-size: 0.8rem;
color: #666;
margin: 0;
}
/* Responsive — match nav gutters */
@media (max-width: 1192px) {
.site-footer-inner { padding-left: 20px; padding-right: 20px; }
}
/* Narrow screens — stack the bottom bar */
@media (max-width: 540px) {
.site-footer-bottom {
flex-direction: column-reverse;
gap: 1rem;
text-align: center;
}
}
/* ─────────────────────────────────────────────────────────────
8. Project Page — Hero
Project color theming: apply the project's .theme-* class (see
Variables section above) to -- throughline and meta cards
use --project-color-rgb at 10% opacity;
— image card uses it at full opacity as the background.
Uniform 20px gap between all hero elements so spacing is
identical whether measured vertically or horizontally.
───────────────────────────────────────────────────────────── */
.project-hero {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
width: 100%;
padding: var(--space-lg) 0 var(--space-md);
}
/* Back link, category label, h1 — grouped wrapper, no extra styling */
.project-hero-inner {}
.project-hero .category {
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-secondary);
margin-bottom: var(--space-sm);
}
.project-hero h1 {
font-size: 34px;
line-height: 1.15;
color: var(--text-dark);
}
/* Throughline — full-width card using project color at 10% opacity.
Optional: omit the element entirely for projects without one.
No italic, no decorative color — weight and the tinted card do the work. */
.project-throughline {
background: rgba(var(--project-color-rgb), 0.1);
border-radius: 8px;
padding: 20px 24px;
font-size: 21px;
font-weight: 500;
line-height: 1.5;
color: var(--text-dark);
margin: 0; /* override p { margin-bottom: 1em } — gap handles spacing */
}
/* Bottom row: meta card (left) + image card (right).
align-items: stretch guarantees both cards are always the same height. */
.project-hero-bottom {
display: grid;
grid-template-columns: 2fr 3fr;
gap: 20px;
align-items: stretch;
}
/* Meta card — Impact, Role, Skills stacked vertically */
.project-hero-meta {
background: rgba(var(--project-color-rgb), 0.1);
border-radius: 8px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 20px;
}
.hero-meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.meta-label {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--project-color-dark, var(--text-secondary));
}
.meta-value {
font-size: var(--font-size-body);
font-weight: 500;
color: var(--text-body);
line-height: 1.5;
}
/* Image card — solid project color background, image centered and contained */
.project-hero-image {
background: rgb(var(--project-color-rgb));
border-radius: 8px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.project-hero-image img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
@media (max-width: 680px) {
.project-hero { padding: var(--space-md) 0 var(--space-sm); gap: 14px; }
.project-hero-bottom { grid-template-columns: 1fr; }
.project-hero-image { min-height: 240px; }
}
.placeholder-block {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-xs);
color: rgba(255,255,255,0.25);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
width: 100%;
height: 100%;
}
.placeholder-block svg { opacity: 0.2; }
/* ─────────────────────────────────────────────────────────────
9. Project Page — Content Sections
───────────────────────────────────────────────────────────── */
.project-content {
max-width: 860px;
margin: 0 auto;
padding: var(--space-lg) 3% var(--space-lg);
}
.content-section { margin-bottom: var(--space-xl); }
.content-section:last-child { margin-bottom: 0; }
.section-label {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--project-color-dark, #706F72);
margin-bottom: var(--space-sm);
padding-bottom: var(--space-xs);
border-bottom: 2px solid #e8e8e8;
}
.content-section h2 { margin-bottom: var(--space-sm); color: var(--text-dark); }
.content-section p { font-size: 16px; line-height: 1.7; }
/* Image placeholders */
.image-placeholder {
width: 100%;
height: 320px;
background: #ebebeb;
border-radius: 4px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-xs);
color: #b0b0b0;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: var(--space-md) 0;
}
.image-placeholder--half { height: 220px; }
.image-placeholder--tall { height: 480px; }
.image-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-sm);
margin: var(--space-md) 0;
}
/* Key takeaways */
.takeaways-list {
display: flex;
flex-direction: column;
gap: var(--space-sm);
margin-top: var(--space-sm);
}
.takeaway-item {
display: flex;
gap: var(--space-sm);
align-items: flex-start;
padding: var(--space-sm) var(--space-md);
background: #ffffff;
border-radius: 6px;
border-left: 4px solid var(--nav-bg);
}
.takeaway-number { font-size: 0.85rem; font-weight: 700; color: var(--nav-bg); min-width: 1.5rem; }
.takeaway-text { font-size: 16px; color: var(--text-body); line-height: 1.6; }
/* ─────────────────────────────────────────────────────────────
10. Project Page — Approach Phases
───────────────────────────────────────────────────────────── */
.approach-phases {
display: flex;
flex-direction: column;
gap: 0;
margin-top: var(--space-lg);
}
/* Each phase — 2px rule above, breathing room on both sides, 2-column grid */
.phase {
display: grid;
grid-template-columns: 200px 1fr;
gap: var(--space-lg);
align-items: start;
border-top: 2px solid var(--card-details-bg);
padding-top: var(--space-lg);
padding-bottom: var(--space-lg);
}
.phase-sidebar {
position: sticky;
top: 120px; /* below 100px nav */
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-xs);
}
.phase-badge {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.35em 0.85em;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
background: var(--project-color-dark);
color: #fff;
}
/*
Classic opt-out: add class "approach-phases--classic" to the .approach-phases
container to use per-phase solid colors instead of the project color system.
*/
.approach-phases--classic .phase-badge { color: #fff; background: none; }
.approach-phases--classic .phase-badge--empathize { background: var(--phase-empathize); }
.approach-phases--classic .phase-badge--define { background: var(--phase-define); }
.approach-phases--classic .phase-badge--ideate { background: var(--phase-ideate); }
.approach-phases--classic .phase-badge--prototype { background: var(--phase-prototype); }
.approach-phases--classic .phase-badge--test { background: var(--phase-test); }
.approach-phases--classic .phase-badge--handoff { background: var(--phase-handoff); }
.phase-number { font-size: 2.5rem; font-weight: 800; line-height: 1; color: var(--project-color-dark); margin-top: var(--space-xs); }
.phase-name { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.04em; }
/* Optional sidebar image — uncomment the in HTML to use.
Sits below the step number and name. Most steps won't need this. */
.phase-sidebar-img {
width: 100%;
border-radius: 6px;
margin-top: var(--space-sm);
}
/* Phase body — text zone first, then artifacts */
.phase-body { min-width: 0; }
.phase-body h3 {
font-size: 1.1rem;
font-weight: 700;
margin-top: var(--space-sm);
margin-bottom: var(--space-xs);
color: var(--text-dark);
}
.phase-body p {
font-size: 16px;
color: var(--text-body);
line-height: 1.7;
}
/* Bulleted list within a phase — use */
.phase-list {
list-style: none;
padding: 0;
margin: var(--space-xs) 0 var(--space-sm);
display: flex;
flex-direction: column;
gap: 0.4em;
}
.phase-list li {
padding-left: 1.25em;
position: relative;
font-size: 16px;
color: var(--text-body);
line-height: 1.6;
}
.phase-list li::before {
content: '•';
position: absolute;
left: 0;
color: rgb(var(--project-color-text, 80, 80, 80));
font-weight: 700;
font-size: 1.4em;
}
/* ── Artifact Card — text-based artifacts ─────────────────────
Use for structured deliverables (personas, requirements, audit
results, etc.) that should look distinct from body prose.
Background inherits the project's tint color automatically. */
/* ── Shared artifact title label ──────────────────────────────
Used in both .artifact-card (text) and .artifact-img-card (image).
Generalization rule: title = body text size (currently 16px).
All other card content = one step smaller (currently 14px). */
.artifact-card .artifact-card-title,
.artifact-img-card-header .artifact-card-title {
font-size: 16px;
font-weight: 700;
letter-spacing: normal;
color: var(--text-dark);
margin: 0;
padding: 0;
}
/* ── Text artifact card ───────────────────────────────────────
For structured text deliverables: personas, requirement lists,
feedback categories, audit results, etc. */
.artifact-card {
background: rgba(var(--project-color-rgb, 160, 160, 160), 0.10);
border-radius: 8px;
padding: 16px 20px;
}
.artifact-card > .artifact-card-title {
padding-bottom: 10px;
margin-bottom: 12px;
border-bottom: 1px solid rgba(var(--project-color-text, 80, 80, 80), 0.35);
}
/* All non-title content inside artifact cards is one step smaller than body text.
Generalization rule: title = body text size; all card content = next size down.
Currently: body = 16px → card content = 14px. */
.artifact-card p:not(.artifact-card-title) {
font-size: 14px;
color: var(--text-dark);
line-height: 1.55;
margin: 0 0 8px;
}
/* Optional subheading within a text artifact card — use */
.artifact-card h4 {
font-size: 14px;
font-weight: 700;
color: var(--text-dark);
margin: 14px 0 2px;
font-family: var(--font-main);
}
.artifact-card h4:first-of-type { margin-top: 0; }
.artifact-card ul,
.artifact-card ol {
padding-left: 1.25rem;
margin: 0;
}
.artifact-card ul { list-style: disc; }
.artifact-card ol { list-style: decimal; }
/* Two-column variant for longer component/item lists */
.artifact-card ul.artifact-list-cols {
columns: 2;
column-gap: 2rem;
}
.artifact-card ul li,
.artifact-card ol li {
font-size: 14px;
font-weight: 400;
color: var(--text-dark);
line-height: 1.55;
margin-bottom: 6px;
}
.artifact-card ul li:last-child,
.artifact-card ol li:last-child { margin-bottom: 0; }
/* ── Image artifact card ──────────────────────────────────────
For image deliverables with a labeled header. Border uses the
same color as the title rule for visual consistency.
Click the image to open it in the lightbox. */
.artifact-img-card {
border: 2px solid rgba(var(--project-color-text, 80, 80, 80), 0.35);
border-radius: 8px;
overflow: hidden;
}
.artifact-img-card-header {
background: rgba(var(--project-color-rgb, 160, 160, 160), 0.10);
padding: 12px 18px;
border-bottom: 1px solid rgba(var(--project-color-text, 80, 80, 80), 0.35);
}
.artifact-img-card .artifact-img-card-desc {
font-size: 14px;
color: var(--text-dark);
margin: 4px 0 0;
line-height: 1.4;
}
.artifact-img-card-img {
display: block;
width: 100%;
cursor: zoom-in;
}
/* ── Lightbox ─────────────────────────────────────────────────
Opens when a .artifact-img-card-img is clicked. */
.artifact-lightbox {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.88);
z-index: 9000;
align-items: center;
justify-content: center;
padding: 24px;
}
.artifact-lightbox.is-open { display: flex; }
.artifact-lightbox-inner {
position: relative;
max-width: min(92vw, 1280px);
max-height: 92vh;
}
.artifact-lightbox-img {
display: block;
max-width: 100%;
max-height: 92vh;
object-fit: contain;
border-radius: 6px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.artifact-lightbox-close {
position: absolute;
top: -14px;
right: -14px;
width: 30px;
height: 30px;
background: #fff;
border: none;
border-radius: 50%;
font-size: 20px;
line-height: 28px;
text-align: center;
cursor: pointer;
color: var(--text-dark);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
transition: background 0.15s;
}
.artifact-lightbox-close:hover { background: var(--card-details-bg); }
/* Artifact images — shown below text content, clearly grouped */
.phase-artifacts {
display: flex;
flex-direction: column;
gap: var(--space-sm);
margin-top: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid var(--card-details-bg);
}
@media (max-width: 860px) {
.phase { grid-template-columns: 1fr; }
.phase-sidebar { position: static; flex-direction: row; align-items: center; flex-wrap: wrap; }
.phase-number { display: none; }
.phase-artifacts { margin-top: var(--space-sm); padding-top: var(--space-sm); }
.image-grid { grid-template-columns: 1fr; }
.two-col { grid-template-columns: 1fr; }
.stat-row { grid-template-columns: 1fr; }
.gallery-grid { grid-template-columns: 1fr; }
}
/* ─────────────────────────────────────────────────────────────
11. Project Page — Additional Layout Blocks
───────────────────────────────────────────────────────────── */
/* Pull quote / opening statement */
.pull-quote {
font-family: var(--font-main);
font-style: italic;
font-weight: 400;
font-size: 1.2rem;
color: var(--text-dark);
text-align: center;
line-height: 1.65;
max-width: 680px;
margin: 0 auto var(--space-lg);
padding: var(--space-md) var(--space-lg);
border-left: 3px solid var(--accent);
border-right: 3px solid var(--accent);
}
/* Two-column text or image pairs */
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
margin: var(--space-md) 0;
align-items: start;
}
.two-col-item h4 {
font-size: 1rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: var(--space-xs);
}
.two-col-item p {
font-size: 16px;
color: var(--text-body);
line-height: 1.65;
}
.two-col-item img {
width: 100%;
height: auto;
display: block;
border-radius: 4px;
}
/* Team comparison cards — two teams side by side, each keyed to a fixed brand color */
.team-compare-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-sm);
margin: var(--space-md) 0;
}
@media (max-width: 640px) {
.team-compare-grid { grid-template-columns: 1fr; }
}
.team-compare-card {
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.team-compare-header {
padding: 14px 20px;
color: #fff;
font-weight: 700;
font-size: 1.05rem;
display: flex;
align-items: center;
gap: 10px;
}
.team-compare-header-icon {
font-size: 1.1rem;
opacity: 0.85;
}
.team-compare-body {
padding: 18px 20px;
flex: 1;
}
.team-compare-field {
margin-bottom: var(--space-sm);
}
.team-compare-field:last-child { margin-bottom: 0; }
.team-compare-field-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.team-compare-label {
font-weight: 700;
font-size: 0.9rem;
color: var(--text-dark);
margin-bottom: 2px;
}
.team-compare-value {
font-size: 0.9rem;
color: #585858;
line-height: 1.4;
}
.team-compare-card--orange .team-compare-header { background: var(--project-color-dark); }
.team-compare-card--orange .team-compare-body { background: rgba(var(--project-color-rgb), 0.08); }
.team-compare-card--blue .team-compare-header { background: #0065AE; }
.team-compare-card--blue .team-compare-body { background: rgba(0, 101, 174, 0.08); }
/* Stat highlight row */
.stat-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
margin: var(--space-lg) 0;
}
.stat-row--2x2 {
grid-template-columns: repeat(2, 1fr);
}
.stat-item {
background: rgba(var(--project-color-rgb), 0.05);
border-top: 3px solid rgba(var(--project-color-rgb), 0.6);
border-radius: 0 0 8px 8px;
padding: var(--space-md);
text-align: center;
}
.stat-number {
font-family: var(--font-main);
font-size: 4rem;
font-weight: 600;
display: block;
line-height: 1.1;
color: var(--project-color-dark);
}
.stat-label {
display: block;
font-size: 0.9rem;
font-weight: 500;
color: var(--text-body);
line-height: 1.3;
margin-top: 0.75em;
}
/* Image with caption */
.content-img {
width: 100%;
display: block;
border-radius: 4px;
margin: var(--space-sm) 0 0;
}
.img-caption {
font-size: 0.78rem;
color: var(--text-muted);
font-style: italic;
text-align: center;
margin: 0.4em 0 var(--space-md);
line-height: 1.4;
}
/* Process image stream */
.process-images {
display: flex;
flex-direction: column;
gap: var(--space-sm);
margin: var(--space-md) 0;
}
.process-images img {
width: 100%;
height: auto;
display: block;
border-radius: 4px;
}
/* Callout block (questions, key problems) */
.callout-block {
background: rgba(var(--project-color-rgb), 0.05);
border-left: 3px solid rgba(var(--project-color-rgb), 0.6);
border-radius: 0 8px 8px 0;
padding: var(--space-md) var(--space-md);
margin: var(--space-md) 0;
}
.callout-block p {
color: var(--text-body) !important;
font-size: 1.15rem;
font-style: normal;
font-weight: 500;
line-height: 1.6;
margin-bottom: 0.75em;
}
.callout-block p:last-child { margin-bottom: 0; }
/* Titled callout variant — accent line on top, centered title + content.
Self-contained section break — no divider needed above it. */
.callout-block--titled {
border-left: none;
border-top: 3px solid rgba(var(--project-color-rgb), 0.6);
border-radius: 0 0 8px 8px;
text-align: center;
}
.callout-block--titled .callout-block-title {
font-size: 1rem;
font-weight: 700;
color: var(--text-dark);
margin: 0 0 var(--space-sm);
}
.callout-block--titled p {
text-align: center;
}
/* Quote card variant — for interview quotes in a grid */
.callout-block--quote {
border-left: none;
border-radius: 8px;
border: none;
position: relative;
}
.callout-block--quote::before {
content: '\201C';
position: absolute;
top: 1rem;
left: 0.75rem;
font-family: Georgia, serif;
font-size: 7rem;
line-height: 1;
color: var(--project-color-dark, #706F72);
opacity: 0.2;
pointer-events: none;
z-index: 0;
}
.callout-block--quote p,
.callout-block--quote cite {
position: relative;
z-index: 1;
}
.callout-block--quote p {
font-style: italic;
margin-top: var(--space-xs);
margin-left: 1.75rem; /* tied to ::before left: 0.75rem + quote mark width — not a spacing token */
}
.callout-block--quote cite {
display: block;
font-size: 0.7rem;
font-style: normal;
font-weight: 500;
color: #706F72;
letter-spacing: 0.02em;
margin-top: 0.75rem;
}
/* Quote grid — 3×1 for 3 quotes, 2×2 for 4 quotes */
.quote-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
margin: var(--space-md) 0;
}
.quote-grid--2x2 {
grid-template-columns: repeat(2, 1fr);
}
.quote-grid .callout-block {
margin: 0;
}
@media (max-width: 640px) {
.quote-grid,
.quote-grid--2x2 {
grid-template-columns: 1fr;
}
}
/* Numbered takeaway list — circular project-color badges instead of arrows.
Use for closing "Takeaways" sections that name specific skills/capabilities. */
.takeaway-list {
list-style: none;
padding: 0;
margin: var(--space-sm) 0;
counter-reset: takeaway;
}
.takeaway-list li {
position: relative;
padding: 0.3em 0 0.3em 2.6em;
min-height: 1.8em;
color: var(--text-body);
font-size: 16px;
line-height: 1.7;
counter-increment: takeaway;
}
.takeaway-list li::before {
content: counter(takeaway, decimal-leading-zero);
position: absolute;
left: 0;
top: 0.9em;
width: 1.8em;
height: 1.8em;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 700;
border-radius: 50%;
background: rgba(var(--project-color-rgb), 0.12);
color: var(--project-color-dark, var(--text-dark));
}
/* Arrow bullet list */
.arrow-list {
list-style: none;
padding: 0;
margin: var(--space-sm) 0;
}
.arrow-list li {
position: relative;
padding: 0.3em 0 0.3em 1.6em;
color: var(--text-body);
font-size: 16px;
line-height: 1.7;
}
.arrow-list li::before {
content: '→';
position: absolute;
left: 0;
color: var(--accent);
}
/* Gallery image grid */
.gallery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
margin-top: var(--space-md);
}
.gallery-grid figure {
margin: 0;
}
.gallery-grid img {
width: 100%;
height: auto;
display: block;
border-radius: 4px;
}
.gallery-grid figcaption {
font-size: 0.78rem;
color: var(--text-muted);
font-style: italic;
margin-top: 0.4em;
line-height: 1.4;
}
/* ─────────────────────────────────────────────────────────────
11. Back Link
───────────────────────────────────────────────────────────── */
.back-link {
display: inline-flex;
align-items: center;
gap: 0.4em;
font-size: 0.85rem;
font-weight: 600;
color: var(--outline-btn);
background: #fff;
border: 2px solid var(--outline-btn);
border-radius: 8px;
padding: 0.6rem 1.15rem;
transition: background-color 0.2s, color 0.2s;
margin-bottom: var(--space-md);
}
.back-link:hover,
.back-link:focus-visible {
background: var(--outline-btn-hover-bg);
color: var(--outline-btn);
}
.back-link:focus-visible {
outline: 2px solid var(--outline-btn);
outline-offset: 2px;
}
/* Prev / Next project navigation */
.project-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--space-md);
border-top: 1px solid var(--card-details-bg);
margin-top: var(--space-md);
}
.project-nav-link {
display: inline-flex;
align-items: center;
gap: 0.4em;
font-size: 0.85rem;
font-weight: 600;
color: var(--outline-btn);
background: #fff;
border: 2px solid var(--outline-btn);
border-radius: 8px;
padding: 0.6rem 1.15rem;
transition: background-color 0.2s, color 0.2s;
}
.project-nav-link:hover,
.project-nav-link:focus-visible {
background: var(--outline-btn-hover-bg);
color: var(--outline-btn);
}
.project-nav-link:focus-visible {
outline: 2px solid var(--outline-btn);
outline-offset: 2px;
}
/* ─────────────────────────────────────────────────────────────
12. Resume Page
─────────────────────────────────────────────────────────────
TYPE HIERARCHY — When building a different designer's resume, replace
these values with their inspiration tokens.
Role Size Wt Color Class
────────────────────────────────────────────────────────
Section header 25px 700 #191919 .resume-section-title
Job title / Degree 18px 800 #191919 .resume-entry-title (inline, date follows)
Company / School 16px 400 #191919 .resume-entry-company
Date range 16px 400 #191919 .resume-entry-date (inline after title)
Sub-category label 16px 500 #191919 .resume-entry-sublabel
Body / description 16px 400 #191919 .resume-entry-body (line-height: 26px)
Education note 16px 400 #191919 .resume-entry-note
Cert item 16px 400 #191919 .resume-cert-item
Skill tag 13px 500 #2e8a8a .skill-tag (chip style)
Tool tag 13px 500 #31353B .tool-tag (chip style)
─────────────────────────────────────────────────────────── */
/* ── Main content area ──
Same 800px readable column as .text-column, achieved differently:
860px outer width with 30px padding each side = 800px of text.
(Resume is a self-contained padded container; hero uses a nested .text-column.) */
.resume-page {
max-width: 860px;
margin: 0 auto;
padding: var(--space-lg) 30px var(--space-xl);
/* 30px fixed sides → content is always 860 - 60 = 800px on desktop.
On viewports narrower than 860px the element shrinks naturally and
the 30px side gutters keep text off the edges. */
}
/* ── Sections ── */
.resume-section {
margin-bottom: 0;
}
.resume-section + .resume-section {
margin-top: 56px;
}
/* Section header — uses the shared .section-heading token.
No additional overrides needed; add both classes to the element. */
.resume-section-title {
/* styles come from .section-heading */
}
/* ── Shared body text — matches .standard-modules .rich-text div ── */
.resume-entry-body,
.resume-entry-company,
.resume-entry-date,
.resume-entry-note,
.resume-cert-item {
font-family: var(--font-main);
font-size: 16px;
font-style: normal;
font-weight: 400;
color: #191919;
line-height: 26px;
padding-bottom: 10px;
margin: 0;
}
/* ── Work / Education entries ── */
.resume-entry {
margin-bottom: 0;
}
.resume-entry + .resume-entry {
margin-top: 36px;
}
/* Title row: job title (inline) + date (inline) on one line */
.resume-entry-header {
display: block;
padding-bottom: 0;
margin-bottom: 0;
}
/* Job title / Degree — 18px/800, inline so date follows on same line */
.resume-entry-title {
font-family: var(--font-main);
font-size: 18px;
font-weight: 800;
font-style: normal;
color: #191919;
display: inline;
margin: 0;
}
/* Date — inline after title, same 16px body weight */
.resume-entry-date {
font-size: 16px;
font-weight: 400;
display: inline;
padding-bottom: 0;
}
/* Company is on its own line, same body text style */
.resume-entry-company {
display: block;
}
/* ── Sub-category details (dl) ── */
.resume-entry-details {
margin-top: 0;
}
/* Each detail item: two columns — narrow label left, description right */
.resume-detail-item {
display: grid;
grid-template-columns: 210px 1fr;
gap: 0 var(--space-sm);
padding: 4px 0;
align-items: start;
}
/* Sub-category label — 16px/600, left column of two-column grid */
.resume-entry-sublabel {
font-family: var(--font-main);
font-size: 16px;
font-weight: 600;
font-style: normal;
color: #191919;
margin: 0;
padding-bottom: 10px;
line-height: 26px;
}
.resume-detail-item dd {
font-family: var(--font-main);
font-size: 16px;
font-weight: 400;
color: #191919;
line-height: 26px;
padding-bottom: 10px;
margin: 0;
}
/* ── Skills & Tools tag chips (our addition — user-approved) ── */
.skills-grid,
.tools-grid {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding-bottom: 10px;
}
/* Skill chip — accent-tinted */
.skill-tag {
font-family: var(--font-main);
font-size: 13px;
font-weight: 500;
background: #e6f4f4;
color: var(--accent-dark);
border-radius: 4px;
padding: 0.35em 0.8em;
line-height: 1;
white-space: nowrap;
}
/* Tool chip — neutral */
.tool-tag {
font-family: var(--font-main);
font-size: 13px;
font-weight: 500;
background: var(--card-details-bg);
color: var(--text-body);
border-radius: 4px;
padding: 0.35em 0.8em;
line-height: 1;
white-space: nowrap;
}
/* ── Certificates ── */
.resume-cert-list {
list-style: none;
padding: 0;
margin: 0;
}
.resume-cert-item strong {
font-weight: 700;
color: #191919;
}
/* ── Responsive ── */
@media (max-width: 680px) {
.resume-section-title { font-size: 18px; line-height: 22px; padding-top: 14px; }
.resume-entry-title { font-size: 16px; }
.resume-page { padding-left: 16px; padding-right: 16px; }
.resume-detail-item { grid-template-columns: 1fr; gap: 0; }
.resume-entry-sublabel { padding-bottom: 2px; }
}
/* ================================================================
PROJECT CARDS — variant: compact
Ported from canvas/portfolio.css for use on the v2 landing page.
1, 2, or 3 vertical cards per row.
work-row--3 → up to 3 cards per row
work-row--2 → up to 2 cards per row
work-row--1 → full-width single card
================================================================ */
.work-grid { margin-top: 0; }
.work-row {
display: flex;
flex-wrap: wrap;
gap: 2rem;
margin-bottom: 2rem;
align-items: stretch;
}
.work-row--3 > .work-card { flex: 0 0 calc(33.333% - 1.4rem); }
.work-row--2 > .work-card { flex: 0 0 calc(50% - 1rem); }
.work-row--1 > .work-card { flex: 0 0 100%; }
/* Compact card — entire card is the link */
.work-card {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.work-card .recent-work {
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 8px;
overflow: hidden;
transition: background 0.2s ease, border-color 0.2s ease;
}
/* Hover: card goes dark */
.work-card:hover .recent-work {
background: var(--card-hover-bg);
border-color: var(--card-hover-bg);
}
/* Thumbnail — project color bg, dark overlay on hover */
.recent-work-thumbnail {
position: relative;
overflow: hidden;
background: rgb(var(--project-color-rgb, 200, 200, 200));
height: 235px;
}
.recent-work-thumbnail::after {
content: '';
position: absolute;
inset: 0;
background: #191919;
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}
.work-card:hover .recent-work-thumbnail::after { opacity: 0.5; }
.recent-work-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Info panel */
.work-card .recent-work-info {
flex: 1;
display: flex;
flex-direction: column;
padding: 1.1rem 1.4rem 1.2rem;
transition: background 0.2s ease;
}
.work-card:hover .recent-work-info { background: var(--card-hover-bg); }
/* Category rubric */
.recent-work-rubric {
color: #767676;
text-transform: uppercase;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
display: inline-block;
margin-bottom: 0.5rem;
transition: color 0.2s ease;
}
.work-card:hover .recent-work-rubric { color: rgba(255, 255, 255, 0.75); }
/* Title */
.recent-work-info .recent-work-title {
font-weight: 700;
font-size: 1rem;
line-height: 1.4;
color: #222;
margin: 0 0 0.5rem;
transition: color 0.2s ease;
}
.work-card:hover .recent-work-title { color: #ffffff; }
/* Description */
.work-card .recent-work-info p {
flex: 1;
font-size: 14px;
color: #767676;
line-height: 1.5;
margin-bottom: 0;
transition: color 0.2s ease;
}
.work-card:hover .recent-work-info p { color: #ffffff; }
/* Meta row */
.recent-work-meta {
font-size: 0.8rem;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 0.75rem;
margin-top: 1rem;
border-top: 1px solid #e9e9e9;
transition: border-color 0.2s ease;
}
.work-card:hover .recent-work-meta { border-top-color: rgba(255, 255, 255, 0.15); }
.recent-work-meta .time {
color: #767676;
transition: color 0.2s ease;
}
.work-card:hover .recent-work-meta .time { color: rgba(255, 255, 255, 0.75); }
.recent-work-meta .read-more {
color: var(--accent-dark);
font-weight: 600;
transition: color 0.2s ease;
}
.work-card:hover .recent-work-meta .read-more { color: #ffffff; }
/* Medium (2-col) cards: taller thumbnail to suit the wider card width */
#work-medium .recent-work-thumbnail { height: 300px; }
/* Medium (2-col) cards: doubled gutters — same gap horizontally and vertically */
#work-medium .work-row {
gap: 4rem;
margin-bottom: 4rem;
}
/* Recalculate card width to account for the larger gap (1 gap × 4rem, split across 2 cards) */
#work-medium .work-row--2 > .work-card { flex: 0 0 calc(50% - 2rem); }
@media (max-width: 860px) {
.work-row--3 > .work-card { flex: 0 0 calc(50% - 1rem); }
}
@media (max-width: 540px) {
.work-row--3 > .work-card,
.work-row--2 > .work-card { flex: 0 0 100%; }
}
/* ================================================================
RECOMMENDATIONS — carousel variant
Ported from canvas/portfolio.css for use on the v2 landing page.
================================================================ */
.quotes-section {
background: #f7f7f7;
text-align: center;
padding: 4em 36px;
}
.quotes-inner {
max-width: 700px;
margin: 0 auto;
}
.quotes-title {
font-size: 25px;
font-weight: 700;
color: #222;
margin: 0 0 2em;
}
.quotes-viewport {
overflow: hidden;
width: 100%;
}
.quotes-track {
display: flex;
transition: transform 0.5s ease-in-out;
will-change: transform;
}
.quote-item {
flex: 0 0 100%;
padding: 0 3em;
position: relative;
box-sizing: border-box;
}
.quote-avatar {
display: block;
width: 80px;
height: 80px;
border-radius: 50%;
margin: 0 auto 2em;
object-fit: cover;
}
.quote-avatar--initials {
background: var(--accent);
color: #fff;
font-size: 24px;
font-weight: 700;
font-style: normal;
line-height: 80px;
text-align: center;
user-select: none;
}
.quote-mark {
position: absolute;
left: 0.2em;
top: 0.6em;
font-size: 7em;
line-height: 1;
color: #eae9e9;
font-style: italic;
pointer-events: none;
user-select: none;
}
.quote-text {
font-size: 16px;
line-height: 1.7;
color: #444;
position: relative;
margin-bottom: 1em;
}
.quote-attr {
font-size: 15px;
color: #444;
margin: 0;
}
.quote-name {
font-weight: 700;
color: #3b3b3b;
font-style: italic;
}
.quotes-dots-wrap {
margin-top: 3em;
text-align: center;
}
.quotes-dot {
display: inline-block;
width: 9px;
height: 9px;
background: #e2e2e2;
border-radius: 50%;
margin: 0 10px;
border: none;
padding: 0;
cursor: pointer;
transition: background 0.2s;
}
.quotes-dot.is-active { background: var(--accent); }
@media (max-width: 932px) {
.quotes-section { padding: 3em 20px; }
.quote-item { padding: 0 2em; }
}