/* ================================================================
styles.css — Shared stylesheet for all portfolio pages
Referenced by: index.html, mountainseed.html, kiwi.html,
fyr.html, ladle.html
================================================================
TABLE OF CONTENTS
-----------------
1. Design Tokens (CSS Variables)
2. Reset & Base
3. Layout Utilities
4. Scroll Reveal Animation
5. Navigation
6. Buttons
7. ── INDEX PAGE ──
7a. Hero
7b. Section Shared
7c. About
7d. Projects Grid
7e. Skills
7f. Contact
7g. Footer
8. ── CASE STUDY PAGES ──
8a. CS Hero
8b. CS Body & Section Structure
8c. Pull Quote
8d. Tags
8e. Numbered List
8f. Media Placeholders
8g. Media Grid
8h. Lean UX Canvas Accordion (kiwi.html)
8i. UI Principles List (fyr.html)
8j. GDD Phases List (ladle.html)
8k. Honest Callout Block (ladle.html)
8l. Case Study Footer Nav
9. Shared Footer
10. Responsive Breakpoints
================================================================ */
/* ================================================================
1. DESIGN TOKENS
✏️ Edit these variables to restyle the entire site.
All pages reference these — one change applies everywhere.
================================================================ */
:root {
/* — Color palette */
--color-bg: #EAF0F0; /* Light — page background */
--color-surface: #BFC9D2; /* Mid — card / section backgrounds */
--color-dark: #26343F; /* Dark — primary text, nav */
--color-accent: #dc782b; /* Orange — brand accent, links */
--color-text: #26343F; /* Primary text (same as dark) */
--color-muted: #5A6A76; /* Secondary / caption text */
--color-border: #C8D4DA; /* Subtle dividers */
--color-tag-bg: #D8E3E8; /* Tag pill background */
--color-tag-text: #26343F; /* Tag pill text */
/* — Typography
✏️ Font is loaded via Google Fonts in each HTML .
If you change the font, update both the tag in
each HTML file AND the variables below. */
--font-display: 'Be Vietnam Pro', sans-serif;
--font-body: 'Be Vietnam Pro', sans-serif;
/* — Sizing */
--radius: 6px;
--max-width: 820px; /* Narrow reading column */
--max-width-wide: 1120px; /* Wide container for media rows */
--section-gap: 60px; /* Vertical space between sections */
}
/* ================================================================
2. RESET & BASE
================================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-weight: 400;
font-size: 1rem;
line-height: 1.75;
-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* ================================================================
3. LAYOUT UTILITIES
================================================================ */
/* Narrow reading column — used for body text and headings */
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 40px;
}
/* Wide container — used for nav and full-bleed media */
.container-wide {
max-width: var(--max-width-wide);
margin: 0 auto;
padding: 0 40px;
}
/* ================================================================
4. SCROLL REVEAL ANIMATION
Elements with .reveal fade + slide in when they enter viewport.
JS in main.js handles adding .visible via IntersectionObserver.
================================================================ */
.reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* ================================================================
5. NAVIGATION
Fixed across all pages. Blurs on scroll via JS (.scrolled class).
================================================================ */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 22px 0;
transition: background 0.3s, border-color 0.3s;
}
nav.scrolled {
background: rgba(234, 240, 240, 0.88);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--color-border);
}
.nav-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
/* — Logo / your name */
.nav-logo {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-dark);
}
/* — Nav links */
.nav-links {
display: flex;
gap: 32px;
list-style: none;
align-items: center;
}
.nav-links a {
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-muted);
transition: color 0.2s;
}
.nav-links a:hover { color: var(--color-dark); }
/* .active marks the current page in the nav */
.nav-links a.active { color: var(--color-accent); }
/* — Resume link — styled as a pill in the nav */
.nav-links a.nav-resume {
padding: 6px 14px;
border: 1px solid currentColor;
border-radius: 100px;
color: var(--color-dark);
transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.nav-links a.nav-resume:hover {
background: var(--color-dark);
color: var(--color-bg);
}
/* — Standalone resume button — use anywhere in the page */
.btn-resume {
display: inline-block;
padding: 13px 30px;
border-radius: var(--radius);
font-size: 0.86rem;
font-weight: 500;
letter-spacing: 0.05em;
border: 1px solid var(--color-dark);
color: var(--color-dark);
transition: background 0.2s, color 0.2s;
cursor: pointer;
}
.btn-resume:hover {
background: var(--color-dark);
color: var(--color-bg);
}
/* standalone link to bring viewers to personal content */
.content-link {
display: block;
width: fit-content;
margin: 24px auto;
}
/* — Hamburger button — hidden on desktop */
.nav-hamburger {
display: none;
flex-direction: column;
justify-content: space-between;
width: 24px;
height: 18px;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.nav-hamburger span {
display: block;
width: 100%;
height: 2px;
background: var(--color-dark);
transition: transform 0.3s ease, opacity 0.3s ease;
transform-origin: center;
}
nav.menu-open .nav-hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
nav.menu-open .nav-hamburger span:nth-child(2) { opacity: 0; }
nav.menu-open .nav-hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* ================================================================
6. BUTTONS
================================================================ */
.btn {
display: inline-block;
padding: 13px 30px;
border-radius: var(--radius);
font-size: 0.86rem;
font-weight: 500;
letter-spacing: 0.05em;
transition: all 0.2s;
cursor: pointer;
}
/* Filled — primary CTA */
.btn-primary {
background: var(--color-dark);
color: var(--color-bg);
}
.btn-primary:hover { background: var(--color-accent); }
/* Outlined — secondary CTA */
.btn-secondary {
border: 1px solid var(--color-border);
color: var(--color-dark);
}
.btn-secondary:hover { border-color: var(--color-dark); }
/* ================================================================
7a. INDEX — HERO
================================================================ */
#hero {
min-height: 100vh;
display: flex;
align-items: center;
padding-top: 100px;
}
.hero-content { max-width: var(--max-width); }
.hero-label {
display: inline-block;
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 20px;
}
.hero-headline {
font-family: var(--font-display);
font-size: clamp(2rem, 5vw, 4rem);
font-weight: 500;
line-height: 1.08;
letter-spacing: -0.02em;
margin-bottom: 28px;
}
.hero-headline em {
font-style: italic;
font-weight: 300;
color: var(--color-accent);
}
.hero-sub {
font-size: 1.05rem;
color: var(--color-muted);
max-width: var(--max-width);
margin-bottom: 40px;
line-height: 1.7;
}
.hero-actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.hero-rule {
width: 100%;
height: 2px;
background: var(--color-accent);
margin-top: 64px;
}
.hero-rule.reveal {
width: 0;
opacity: 1;
transform: none;
transition: width 0.9s ease;
}
.hero-rule.reveal.visible {
width: 100%;
}
/* ================================================================
7b. INDEX — SECTION SHARED
================================================================ */
section { padding: var(--section-gap) 0; }
.section-label {
font-size: 0.73rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 12px;
}
.section-title {
font-family: var(--font-display);
font-size: clamp(1.8rem, 4vw, 2.6rem);
font-weight: 700;
line-height: 1.15;
margin-bottom: 48px;
}
.section-subtitle{
font-family: var(--font-display);
font-size: clamp(1.45rem, 3.2vw, 2.1rem);
font-weight: 600;
line-height: 1.15;
margin: 16px auto;
}
/* ================================================================
7c. INDEX — ABOUT SECTION
================================================================ */
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: start;
}
.about-text p {
color: var(--color-muted);
margin-bottom: 16px;
font-size: 0.97rem;
}
.about-currently {
margin-top: 28px;
padding: 20px 24px;
border-left: 3px solid var(--color-accent);
background: color-mix(in srgb,var(--color-surface),transparent 25%);
border-radius: 0 var(--radius) var(--radius) 0;
}
.about-currently strong {
display: block;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 6px;
}
.about-stats { display: flex; flex-direction: column; gap: 0; }
.stat-item {
padding: 24px 0;
border-bottom: 1px solid var(--color-border);
}
.stat-item:first-child { border-top: 1px solid var(--color-border); }
.stat-item:last-child { border-bottom: none; }
.stat-number {
font-family: var(--font-display);
font-size: 2.4rem;
font-weight: 700;
line-height: 1;
margin-bottom: 6px;
color: var(--color-dark);
}
.stat-desc {
font-size: 0.87rem;
color: var(--color-muted);
}
/* ================================================================
7d. INDEX — PROJECTS GRID
================================================================ */
#projects { background: var(--color-dark); }
#projects .section-title { color: var(--color-bg); }
.projects-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 36px;
}
.project-card {
display: flex;
flex-direction: column;
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
transition: transform 0.25s, box-shadow 0.25s;
background: var(--color-bg);
position: relative;
max-height: 500px;
}
.project-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 36px rgba(38, 52, 63, 0.1);
}
/* ✏️ Replace .project-thumb with ![]()
when you have screenshots */
.project-thumb {
height: 200px;
background: var(--color-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--color-muted);
overflow: hidden;
position: relative;
}
.project-thumb::after {
content: '';
position: absolute;
inset: 0;
background: var(--color-muted);
opacity: 0.35;
transition: opacity 0.25s ease;
}
.project-card:hover .project-thumb::after {
opacity: 0;
}
.project-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.project-body {
padding: 24px;
display: flex;
flex-direction: column;
flex: 1;
}
.project-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tag {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 100px;
border: 1px solid var(--color-border);
color: var(--color-muted);
}
.project-title {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 8px;
}
.project-desc {
font-size: 0.88rem;
color: var(--color-muted);
margin-bottom: 20px;
line-height: 1.65;
}
.project-link {
margin-top: auto;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--color-accent);
display: inline-flex;
align-items: center bottom;
gap: 6px;
transition: gap 0.2s;
}
.project-link:hover { gap: 10px; }
.project-link::after {
content: '';
position: absolute;
inset: 0;
}
/* ================================================================
7e. INDEX — SKILLS SECTION
================================================================ */
.skills-grid {
display: grid;
grid-template-columns: 1fr;
gap: 56px;
}
.skill-group-title {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 28px;
}
.skill-item { margin-bottom: 22px; }
.skill-header {
display: flex;
justify-content: space-between;
font-size: 1rem;
margin-bottom: 8px;
}
.skill-level {
color: var(--color-muted);
font-size: 0.8rem;
}
.skill-bar {
height: 2px;
background: var(--color-border);
border-radius: 2px;
overflow: hidden;
}
/* data-width on .skill-fill drives the bar width via JS */
.skill-fill {
height: 100%;
background: var(--color-accent);
border-radius: 2px;
width: 0%;
transition: width 1s ease;
}
/* ================================================================
7f. INDEX — CONTACT SECTION
================================================================ */
#contact { text-align: center; }
.contact-email {
font-family: var(--font-display);
font-size: clamp(1.4rem, 3.5vw, 2rem);
font-weight: 600;
color: var(--color-accent);
display: inline-block;
margin-bottom: 40px;
border-bottom: 2px solid var(--color-accent);
padding-bottom: 4px;
transition: opacity 0.2s;
}
.contact-email:hover { opacity: 0.7; }
.social-links {
display: flex;
justify-content: center;
gap: 36px;
list-style: none;
}
.social-links a {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-muted);
transition: color 0.2s;
}
.social-links a:hover { color: var(--color-dark); }
/* ================================================================
7g. SHARED FOOTER
================================================================ */
footer {
padding: 40px 0;
border-top: 1px solid var(--color-border);
text-align: center;
font-size: 0.78rem;
color: var(--color-muted);
}
/* ================================================================
8a. CASE STUDY — HERO
================================================================ */
.cs-hero {
padding-top: 150px;
padding-bottom: 88px;
border-bottom: 1px solid var(--color-border);
}
.cs-eyebrow {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.73rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 20px;
}
.cs-eyebrow span { color: var(--color-border); }
.cs-title {
font-family: var(--font-display);
font-size: clamp(2.4rem, 6vw, 4.2rem);
font-weight: 700;
line-height: 1.07;
letter-spacing: -0.02em;
margin-bottom: 24px;
/*max-width: 680px;*/
}
.cs-title em {
font-style: italic;
font-weight: 300;
color: var(--color-accent);
}
.cs-summary {
font-size: 1.06rem;
color: var(--color-muted);
max-width: 560px;
margin-bottom: 52px;
line-height: 1.68;
}
/* — Meta grid */
.cs-meta {
display: flex;
flex-direction: column;
flex-wrap: wrap;
border-top: 1px solid var(--color-border);
border-left: 1px solid var(--color-border);
}
.cs-meta-item {
flex: 1;
min-width: 160px;
padding: 20px 28px;
border-right: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.cs-meta-label {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-muted);
margin-bottom: 6px;
}
.cs-meta-value {
font-size: 0.9rem;
font-weight: 400;
color: var(--color-dark);
}
/* — Hero cover image / placeholder */
.cs-hero-media { margin: 68px 0 0; }
.cs-hero .content-link { margin-top: 56px; margin-bottom: 0; }
.cs-hero .content-link + .cs-media { margin-top: 16px; }
/* ================================================================
8b. CASE STUDY — BODY & SECTION STRUCTURE
================================================================ */
.cs-body { padding: 100px 0; }
.cs-section { margin-bottom: 50px; }
.cs-section:last-child { margin-bottom: 0; }
.cs-section-label {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 16px;
}
.cs-section-label::before {
content: '';
display: block;
width: 24px;
height: 2px;
background: var(--color-accent);
flex-shrink: 0;
}
.cs-section-title {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3.5vw, 2.3rem);
font-weight: 700;
line-height: 1.18;
margin-bottom: 28px;
}
.cs-prose p, ul {
color: var(--color-muted);
margin-bottom: 20px;
font-size: 0.97rem;
line-height: 1.78;
}
.cs-prose p:last-child { margin-bottom: 0; }
.cs-prose strong { color: var(--color-dark); font-weight: 600; }
.cs-prose a {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.2s, text-decoration-color 0.2s;
}
.cs-prose a:hover {
color: var(--color-dark);
}
.cs-prose a:active {
color: var(--color-accent);
opacity: 0.7;
}
/* ================================================================
8c. PULL QUOTE
================================================================ */
.cs-pullquote {
border-left: 3px solid var(--color-accent);
padding: 6px 0 6px 28px;
margin: 44px 0;
}
.cs-pullquote p {
font-family: var(--font-display);
font-size: clamp(1.1rem, 2.4vw, 1.5rem);
font-weight: 400;
font-style: italic;
line-height: 1.45;
color: var(--color-dark) !important;
margin: 0 !important;
}
/* ================================================================
8d. TAGS
================================================================ */
.cs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.cs-tag {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 100px;
background: var(--color-tag-bg);
color: var(--color-tag-text);
}
/* ================================================================
8e. NUMBERED LIST
================================================================ */
.cs-list { list-style: none; margin-top: 24px; }
.cs-list li {
display: flex;
gap: 20px;
padding: 20px 0;
border-bottom: 1px solid var(--color-border);
font-size: 0.94rem;
color: var(--color-muted);
line-height: 1.68;
}
.cs-list li:first-child { border-top: 1px solid var(--color-border); }
.cs-list-num {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 700;
color: var(--color-accent);
flex-shrink: 0;
width: 28px;
padding-top: 1px;
}
.cs-list-text strong {
display: block;
color: var(--color-dark);
font-weight: 600;
margin-bottom: 4px;
}
/* ================================================================
8f. MEDIA & PLACEHOLDERS
================================================================ */
.cs-media { margin: 36px 0; }
.cs-media-inner {
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--color-border)
}
.cs-media-inner.ratio-16-9 { aspect-ratio: 16 / 9; }
.cs-media-inner.ratio-4-3 { aspect-ratio: 4 / 3; }
.cs-media-inner.ratio-3-2 { aspect-ratio: 3 / 2; }
.cs-media-inner.ratio-tall { aspect-ratio: 3 / 4; }
.cs-media-inner.bare { background: none; }
#no-border { border: none; }
.cs-placeholder {
width: 100%;
height: 100%;
min-height: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--color-muted);
font-size: 0.76rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.cs-placeholder svg { width: 28px; height: 28px; opacity: 0.35; }
.cs-media-caption {
margin: 10px auto;
font-size: 0.78rem;
color: var(--color-muted);
text-align: center;
letter-spacing: 0.02em;
}
/* ================================================================
8g. MEDIA GRID — side-by-side image layouts
✏️ Use cols-2 or cols-3 class on .cs-media-grid
================================================================ */
.cs-media-grid { display: grid; gap: 16px; margin: 52px 0; }
.cs-media-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.cs-media-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
/* Text left, stacked images right — text always determines row height */
.cs-split-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin: 36px 0;
align-items: start;
}
.cs-split-media {
align-self: stretch;
display: flex;
flex-direction: column;
gap: 16px;
}
/* Propagate flex height through wrapper divs and cs-media-inner */
.cs-split-media > div {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.cs-split-media .cs-media-inner {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.cs-split-media .cs-media-inner a {
flex: 1;
min-height: 0;
display: flex;
}
.cs-split-media img {
flex: 1;
min-height: 0;
width: 100%;
object-fit: contain;
object-position: top;
}
/* ================================================================
Styling for text-wrap around images
================================================================ */
.wrapped-image {
float: left; /* Aligns image to the left and wraps text to the right */
margin-right: 20px; /* Crucial: Adds space so text doesn't touch the image */
margin-bottom: 10px; /* Adds space below the image */
max-width: 300px; /* Keeps the image at a reasonable size */
height: auto; /* Maintains aspect ratio */
}
/* ================================================================
8h. LEAN UX CANVAS ACCORDION — kiwi.html
Two-column layout: image left, accordion list right.
JS in main.js controls open/close (one open at a time).
================================================================ */
.canvas-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 52px;
align-items: start;
margin-top: 44px;
}
/* Canvas image side — fixed min-height so it doesn't collapse */
.canvas-image .cs-media-inner { min-height: 360px; }
/* Accordion container */
.canvas-accordion { display: flex; flex-direction: column; }
.accordion-item { border-bottom: 1px solid var(--color-border); }
.accordion-item:first-child { border-top: 1px solid var(--color-border); }
/* Trigger — always visible: number + name + chevron */
.accordion-trigger {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
background: none;
border: none;
cursor: pointer;
text-align: left;
gap: 12px;
}
.accordion-trigger-left { display: flex; align-items: center; gap: 14px; }
.accordion-num {
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: 700;
color: var(--color-accent);
flex-shrink: 0;
min-width: 24px;
}
.accordion-name {
font-size: 0.84rem;
font-weight: 600;
color: var(--color-dark);
}
/* Chevron rotates 180° when open */
.accordion-chevron {
width: 15px;
height: 15px;
flex-shrink: 0;
color: var(--color-muted);
transition: transform 0.25s ease-out;
}
.accordion-item.open .accordion-chevron { transform: rotate(180deg); }
/* Collapsible content panel */
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.25s ease-out; }
.accordion-item.open .accordion-panel { max-height: 300px; }
.accordion-content {
padding: 0 0 14px 38px; /* indent aligns text under accordion-name */
font-size: 0.86rem;
color: var(--color-muted);
line-height: 1.68;
}
/* ================================================================
8i. UI PRINCIPLES LIST — fyr.html
Two-column row: principle name left, rationale right.
================================================================ */
.principles-list { margin-top: 36px; }
.principle-item {
display: grid;
grid-template-columns: 200px 1fr;
gap: 28px;
padding: 24px 0;
border-bottom: 1px solid var(--color-border);
align-items: start;
}
.principle-item:first-child { border-top: 1px solid var(--color-border); }
.principle-name {
font-size: 0.87rem;
font-weight: 600;
color: var(--color-dark);
padding-top: 2px;
}
.principle-desc {
font-size: 0.9rem;
color: var(--color-muted);
line-height: 1.68;
}
/* ================================================================
8j. GDD PHASES LIST — ladle.html
Two-column row: phase name left, description right.
================================================================ */
.gdd-phases { margin-top: 36px; }
.phase-item {
display: grid;
grid-template-columns: 180px 1fr 1fr;
gap: 28px;
padding: 22px 0;
border-bottom: 1px solid var(--color-border);
align-items: start;
}
.phase-item:first-child { border-top: 1px solid var(--color-border); }
.phase-item .cs-media-grid {
grid-column: 1 / -1;
margin: 0;
}
.phase-item .cs-media-inner {
max-height: 140px; /* cap — adjust to match your description height */
overflow: hidden;
}
.phase-item .cs-media-inner img {
width: 100%;
height: auto;
}
.phase-name {
font-size: 0.87rem;
font-weight: 600;
color: var(--color-dark);
padding-top: 2px;
}
.phase-desc {
font-size: 0.9rem;
color: var(--color-muted);
line-height: 1.68;
}
/* ================================================================
8k. HONEST CALLOUT BLOCK — ladle.html
Used for frank retrospective moments — visually distinct.
================================================================ */
.cs-honest {
margin: 44px 0;
padding: 28px 32px;
background: var(--color-surface);
border-radius: var(--radius);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-accent);
}
.cs-honest-label {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 12px;
}
.cs-honest p {
font-size: 0.94rem;
color: var(--color-muted);
line-height: 1.72;
margin-bottom: 12px;
}
.cs-honest p:last-child { margin-bottom: 0; }
.cs-honest strong { color: var(--color-dark); font-weight: 600; }
/* ================================================================
8m. CAROUSEL
================================================================ */
.cs-carousel { margin: 36px 0; }
.cs-carousel-viewport {
position: relative;
border-radius: var(--radius);
}
.cs-carousel-track { position: relative; }
.cs-carousel-slide {
display: none;
}
.cs-carousel-slide.active {
display: block;
animation: carouselFade 0.35s ease;
}
@keyframes carouselFade {
from { opacity: 0; }
to { opacity: 1; }
}
.cs-carousel-slide a { display: block; }
.cs-carousel-slide img {
width: 100%;
height: auto;
display: block;
}
.cs-carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--color-dark);
color: var(--color-bg);
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.7;
transition: opacity 0.2s;
z-index: 2;
}
.cs-carousel-btn:hover { opacity: 1; }
.cs-carousel-prev { left: 12px; }
.cs-carousel-next { right: 12px; }
.cs-carousel-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 12px;
}
.cs-carousel-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-border);
border: none;
cursor: pointer;
padding: 0;
transition: background 0.2s;
}
.cs-carousel-dot.active { background: var(--color-accent); }
/* ================================================================
8l. CASE STUDY FOOTER NAV
Links to prev / next case study.
================================================================ */
.cs-footer-nav {
border-top: 1px solid var(--color-border);
padding: 68px 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.cs-footer-nav-item { display: flex; flex-direction: column; gap: 8px; }
.cs-footer-nav-item.next { text-align: right; align-items: flex-end; }
.cs-footer-label {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-muted);
}
.cs-footer-title {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 700;
color: var(--color-dark);
transition: color 0.2s;
}
.cs-footer-nav-item a:hover .cs-footer-title { color: var(--color-accent); }
/* ================================================================
10. RESPONSIVE BREAKPOINTS
Mobile < 720px — stacks columns, hides nav links
Tablet 721px–1023px — default (no override needed)
Desktop ≥ 1024px — increases spacing and padding
Wide ≥ 1280px — increases padding further
================================================================ */
/* — Wide desktop: more breathing room */
@media (min-width: 1024px) {
.container { padding: 0 56px; }
.container-wide { padding: 0 36px; }
:root { --section-gap: 96px; }
.cs-hero { padding-top: 180px; padding-bottom: 120px; }
.cs-body { padding: 120px 0; }
.cs-section { margin-bottom: 120px; }
.cs-footer-nav { padding: 88px 0; }
}
/* — Extra wide: even more padding
@media (min-width: 1280px) {
:root {
--max-width: 960px;
--max-width-wide: 1360px;
}
.container { padding: 0 72px; }
.container-wide { padding: 0 72px; }
} */
/* — Ultra wide: expand max-widths so content fills larger screens
@media (min-width: 1440px) {
:root {
--max-width: 960px;
--max-width-wide: 1360px;
}
} */
@media (min-width: 1280px) {
.container { padding: 0 72px; }
.container-wide { padding: 0 72px; }
:root {
--max-width: clamp(820px, calc(820px + (100vw - 1280px) * 0.875), 960px);
--max-width-wide: clamp(1120px, calc(1120px + (100vw - 1280px) * 1.5), 1360px);
}
}
/* — Mobile: stack everything */
@media (max-width: 720px) {
/* Show hamburger, hide nav links by default on mobile */
.nav-hamburger { display: flex; }
.nav-links { display: none; }
/* Dropdown when menu is open */
nav.menu-open .nav-links {
display: flex;
flex-direction: column;
gap: 0;
position: absolute;
top: 100%;
left: 0; right: 0;
background: var(--color-bg);
border-bottom: 1px solid var(--color-border);
padding: 8px 0 16px;
}
nav.menu-open .nav-links li a {
display: block;
padding: 12px 40px;
}
/* Stack index page columns */
.about-grid { grid-template-columns: 1fr; gap: 40px; }
.projects-grid { grid-template-columns: 1fr; }
.skills-grid { grid-template-columns: 1fr; gap: 36px; }
/* Stack case study components */
.canvas-layout { grid-template-columns: 1fr; }
.principle-item { grid-template-columns: 1fr; gap: 8px; }
.phase-item { grid-template-columns: 1fr; gap: 8px; }
/* Stack media grids */
.cs-media-grid.cols-2,
.cs-media-grid.cols-3 { grid-template-columns: 1fr; }
/* Stack meta row */
.cs-meta { flex-direction: column; }
/* Stack footer nav */
.cs-footer-nav { grid-template-columns: 1fr; }
.cs-footer-nav-item.next { text-align: left; align-items: flex-start; }
}