/* ========================================================================== Hayden Salem — Product Designer Portfolio Design system: dark, editorial, stat-driven ========================================================================== */ @import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap'); :root { /* Color — dark theme (default / fallback when JS is disabled) */ --bg: #08080a; --bg-elevated: #0f0f13; --header-bg: rgba(8, 8, 10, 0.72); --card: rgba(255, 255, 255, 0.035); --card-hover: rgba(255, 255, 255, 0.06); --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.18); --border-hover: rgba(255, 255, 255, 0.3); --text: #f5f5f7; --text-muted: #a1a1ab; --text-faint: #6b6b76; --accent: #7c8bff; --accent-secondary: #4d5bd9; --accent-ring: rgba(124, 139, 255, 0.15); --accent-warm: #ffb37c; --accent-warm-ring: rgba(255, 179, 124, 0.35); --success: #8ff0a4; --success-ring: rgba(143, 240, 164, 0.35); --btn-primary-hover: #d9d9de; --heading-grad-a: #ffffff; --heading-grad-b: #b9b9c4; --grid-line: rgba(255, 255, 255, 0.14); --grain-opacity: 0.045; --grain-blend: screen; --grain-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 3.2 -1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --ray-color-1: rgba(124, 139, 255, 0.19); --ray-color-2: rgba(255, 179, 124, 0.13); --ray-opacity: 0.55; --grad-mayan: linear-gradient(135deg, rgba(124, 139, 255, 0.2), rgba(124, 139, 255, 0.02) 60%); --grad-fleet: linear-gradient(135deg, rgba(72, 168, 255, 0.2), rgba(72, 168, 255, 0.02) 60%); --grad-pulse: linear-gradient(135deg, rgba(199, 130, 255, 0.18), rgba(199, 130, 255, 0.02) 60%); --grad-system: linear-gradient(135deg, rgba(255, 179, 124, 0.2), rgba(255, 179, 124, 0.02) 60%); --card-shadow-hover: 0 20px 45px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.3); color-scheme: dark; /* Radius */ --radius-lg: 20px; --radius-md: 14px; --radius-sm: 10px; --radius-btn: 10px; --radius-pill: 999px; /* Spacing scale (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* Typography scale — fluid via clamp() so type scales smoothly between the mobile (< 600px) and desktop (> 1200px) viewport */ --fs-display: clamp(2.1rem, 4.5vw + 1rem, 3.4rem); /* H1 */ --fs-h2: clamp(1.5rem, 2.2vw + 1rem, 2.2rem); /* H2 */ --fs-h3: clamp(1.2rem, 1vw + 1rem, 1.4rem); /* H3 */ --fs-body-lg: clamp(1rem, 0.4vw + 0.9rem, 1.05rem); --fs-body: 1rem; --fs-small: 0.9rem; --fs-tiny: 0.8rem; --max-width: 1080px; --container-padding: clamp(20px, 5vw, 24px); font-size: 16px; } /* ========================================================================== Breakpoints used throughout this file (no CSS variables in media queries — kept here for reference): - Mobile: < 600px (single column, hamburger nav) - Tablet: 600–1024px (2-col grids begin at 768px, hamburger nav until 900px) - Desktop: > 1024px (full multi-column layouts, inline nav) ========================================================================== */ /* ---------- Light theme ---------- Applied via [data-theme="light"] on , set by the inline script in (reads localStorage, falls back to prefers-color-scheme) and flipped by the theme toggle in js/main.js. Only color-related tokens are overridden — spacing, type scale and radii stay the same in both themes. */ :root[data-theme='light'] { --bg: #fbfbfa; --bg-elevated: #f2f2f0; --header-bg: rgba(251, 251, 250, 0.78); --card: rgba(10, 10, 10, 0.035); --card-hover: rgba(10, 10, 10, 0.06); --border: rgba(10, 10, 10, 0.1); --border-strong: rgba(10, 10, 10, 0.2); --border-hover: rgba(10, 10, 10, 0.28); --text: #16161a; --text-muted: #55555e; --text-faint: #86868f; --accent: #4a5ad8; --accent-secondary: #7783e0; --accent-ring: rgba(74, 90, 216, 0.15); --accent-warm: #b5641f; --accent-warm-ring: rgba(181, 100, 31, 0.25); --success: #1f9d55; --success-ring: rgba(31, 157, 85, 0.25); --btn-primary-hover: #2c2c31; --heading-grad-a: #16161a; --heading-grad-b: #55555e; --grid-line: rgba(10, 10, 10, 0.16); --grain-opacity: 0.05; --grain-blend: multiply; --grain-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.2 -1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --ray-color-1: rgba(74, 90, 216, 0.2); --ray-color-2: rgba(181, 100, 31, 0.14); --ray-opacity: 0.8; --grad-mayan: linear-gradient(135deg, rgba(74, 90, 216, 0.12), rgba(74, 90, 216, 0.01) 60%); --grad-fleet: linear-gradient(135deg, rgba(37, 130, 220, 0.12), rgba(37, 130, 220, 0.01) 60%); --grad-pulse: linear-gradient(135deg, rgba(155, 75, 220, 0.11), rgba(155, 75, 220, 0.01) 60%); --grad-system: linear-gradient(135deg, rgba(181, 100, 31, 0.13), rgba(181, 100, 31, 0.01) 60%); --card-shadow-hover: 0 24px 48px rgba(30, 30, 45, 0.12), 0 6px 18px rgba(30, 30, 45, 0.08); color-scheme: light; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color 0.25s ease, color 0.25s ease; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ul { list-style: none; } .wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--container-padding); } /* ---------- Sitewide light rays ---------- Volumetric light-beam effect anchored to the top-left corner of the viewport, fixed so it stays put and keeps showing through the gaps between sections as the page scrolls — not just a hero-banner treatment. Colors are pulled from the site's own accent tokens (indigo + amber) rather than a generic blue, and kept subtle: soft, wide gaps between beams, gentle sway, low opacity. */ .glow-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .light-rays { position: absolute; top: -20%; left: -20%; width: 140%; height: 140%; background: repeating-conic-gradient( from 100deg at 0% 0%, transparent 0deg, var(--ray-color-1) 7deg, transparent 15deg, transparent 22deg, var(--ray-color-2) 28deg, transparent 36deg, transparent 44deg, var(--ray-color-1) 50deg, transparent 60deg ); filter: blur(38px); opacity: var(--ray-opacity); transform-origin: 0% 0%; animation: ray-sway 20s ease-in-out infinite; } @keyframes ray-sway { 0%, 100% { transform: rotate(-7deg) scale(1); } 50% { transform: rotate(7deg) scale(1.06); } } @media (prefers-reduced-motion: reduce) { .light-rays { animation: none; } } /* Film-grain texture — a static SVG turbulence pattern, tiled and blended over the page so it reads as textured light instead of flat color. Cheap: no JS, no animation, just one small tiled background. */ .grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain-opacity, 0.08); mix-blend-mode: var(--grain-blend, screen); background-image: var(--grain-image); background-size: 180px 180px; } /* ---------- Grid lines ---------- Two faint dashed verticals framing the content column (inspired by griffinwooldridge.com), fixed so they read as a continuous grid while scrolling. Paired with .divider — a full-bleed horizontal rule — at section boundaries to complete the grid. Hidden below 900px, where the column fills the viewport and there's no margin left to draw them in. */ .grid-line { display: none; position: absolute; top: 0; bottom: 0; width: 0; border-right: 1px dashed var(--grid-line); } .grid-line-l { left: calc(50% - (var(--max-width) / 2) - var(--container-padding)); } .grid-line-r { right: calc(50% - (var(--max-width) / 2) - var(--container-padding)); } @media (min-width: 900px) { .grid-line { display: block; } } .divider { border: none; border-top: 1px dashed var(--grid-line); margin: 0; } /* ---------- Header / Nav ---------- */ header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.3s ease, background-color 0.25s ease; } header.scrolled { border-bottom-color: var(--border); } nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; max-width: var(--max-width); margin: 0 auto; } .logo { display: flex; align-items: center; color: var(--text); } .logo svg { height: 26px; width: auto; display: block; } .nav-links { display: flex; gap: 32px; font-size: 0.95rem; color: var(--text-muted); } .nav-links a { transition: color 0.2s ease; } .nav-links a:hover { color: var(--text); } .nav-actions { display: flex; align-items: center; gap: 14px; } .btn.nav-cta { display: none; } @media (min-width: 768px) { .btn.nav-cta { display: inline-flex; } } /* ---------- Theme toggle ---------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text-muted); cursor: pointer; flex-shrink: 0; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .theme-toggle:hover { background: var(--card-hover); border-color: var(--border-hover); color: var(--text); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } :root[data-theme='light'] .theme-toggle .icon-sun { display: none; } :root[data-theme='light'] .theme-toggle .icon-moon { display: block; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: var(--radius-btn); font-weight: 500; font-size: 0.95rem; border: 1px solid var(--border-strong); background: var(--card); transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; cursor: pointer; white-space: nowrap; } .btn:hover { background: var(--card-hover); border-color: var(--border-hover); transform: translateY(-1px); } .btn-primary { background: var(--text); color: var(--bg); border-color: var(--text); } .btn-primary:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); } .btn-sm { padding: 9px 18px; font-size: 0.85rem; } /* ---------- Hero ---------- */ .hero { padding: 110px 0 70px; text-align: center; } h1 { font-size: var(--fs-display); font-weight: 500; letter-spacing: -0.02em; max-width: 780px; margin: 0 auto var(--space-5); background: linear-gradient(180deg, var(--heading-grad-a), var(--heading-grad-b)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p.lede { max-width: 620px; margin: 0 auto 36px; color: var(--text-muted); font-size: 1.05rem; line-height: 1.65; } .hero-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } /* ---------- Stack ticker ---------- */ .ticker { margin: 88px auto 0; max-width: 620px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .ticker-track { display: flex; align-items: center; gap: 12px; width: max-content; animation: ticker-scroll 28s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .stack-item { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--card); color: var(--text-muted); font-size: 0.88rem; font-weight: 500; white-space: nowrap; flex-shrink: 0; } .stack-item .logo-badge { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .stack-item .logo-badge svg { width: 15px; height: 15px; display: block; } .logo-badge.bg-light { background: #fdfdfc; } .logo-badge.bg-light svg { fill: #16161a; } .logo-badge.bg-figma { background: linear-gradient(135deg, #1abcfe, #a259ff 55%, #f24e1e); } .logo-badge.bg-framer { background: #0055ff; } .logo-badge.bg-zoom { background: #2d8cff; } .logo-badge.bg-anthropic { background: #d97757; } .logo-badge.bg-figma svg, .logo-badge.bg-framer svg, .logo-badge.bg-zoom svg, .logo-badge.bg-anthropic svg { fill: #fff; } /* ---------- Hero: avatar slot, status line, credibility stats ---------- avatar-slot is a placeholder circle (site logomark) reserved for a real headshot later; status-line is a factual "what I'm doing now" pulled from the Experience timeline; hero-stats reuses the exact stat-value / stat-label typography from the case-study cards for one consistent "big number, small label" pattern across the page. */ .avatar-slot { width: 128px; height: 128px; margin: 0 auto 20px; border-radius: 50%; background: var(--card); border: 1px solid var(--border-strong); overflow: hidden; } .avatar-slot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: grayscale(1); transition: filter 0.3s ease; } .avatar-slot:hover img { filter: grayscale(0); } @media (prefers-reduced-motion: reduce) { .avatar-slot img { transition: none; } } .status-line { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 24px; } .status-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex-shrink: 0; } .status-dot::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--success); animation: status-pulse 2s ease-out infinite; } @keyframes status-pulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(3.2); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .status-dot::before { animation: none; display: none; } .status-dot { box-shadow: 0 0 0 3px var(--success-ring); } } .stat-pair.hero-stats { justify-content: center; gap: 0; margin-top: 48px; } .hero-stats > div { padding: 0 28px; border-right: 1px solid var(--border); text-align: center; } .hero-stats > div:last-child { border-right: none; } /* ---------- About page: "beyond the work" photo grid ---------- */ .about-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 640px) { .about-grid { grid-template-columns: 1fr 1fr; } } .about-card { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--bg-elevated); transition: border-color 0.25s ease, transform 0.25s ease; } .about-card:hover { border-color: var(--border-strong); transform: translateY(-2px); } .about-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .about-card-caption { padding: 22px 24px; } .about-card-caption h3 { font-size: 1.05rem; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 8px; } .about-card-caption p { font-size: 0.94rem; color: var(--text-muted); line-height: 1.65; } /* ---------- Companies ticker ---------- */ .companies-strip { padding: 56px 0; } .companies-label { text-align: center; font-size: 0.8rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 32px; } /* Real company logos, forced monochrome via filter (not their brand colors) so the strip reads as one quiet credibility signal rather than a row of competing colored marks. brightness(0) flattens the source image to solid black; invert(1) on top of that flips it to solid white for dark mode. No pill/border — logo, then name caption below it. */ .company-row { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 56px; } .company-item { display: flex; flex-direction: column; align-items: center; gap: 14px; } .company-item img { height: 30px; width: auto; max-width: 130px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.75; transition: opacity 0.2s ease; } .company-item:hover img { opacity: 1; } .company-item .company-name { font-size: 0.8rem; color: var(--text-faint); letter-spacing: 0.02em; } :root[data-theme='light'] .company-item img { filter: brightness(0); } /* ---------- Section shell ---------- */ section { padding: 90px 0; } .section-head { margin-bottom: 48px; max-width: 640px; } .section-tag { color: var(--accent); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; display: block; } .section-head h2 { font-size: var(--fs-h2); font-weight: 500; letter-spacing: -0.01em; margin-bottom: 12px; } .section-head p { color: var(--text-muted); font-size: 1rem; line-height: 1.6; } /* ---------- Work / case study cards ---------- */ .work-list { display: flex; flex-direction: column; gap: 16px; } /* Sticky card stack: each card sticks below the header while the next one scrolls up over it. --stack-progress (0→1, driven by scroll in main.js) scales/dims the covered card slightly so it recedes instead of just vanishing under the next one; increasing z-index makes later cards sit on top. Once the last card has no sibling left to cover it, the stack naturally releases and the page scrolls on to the next section. */ .case-card { --stack-progress: 0; --hover-lift: 0px; position: sticky; top: 88px; display: grid; grid-template-columns: 1fr; gap: 24px; padding: 32px; border-radius: var(--radius-lg); background: var(--bg-elevated); border: 1px solid var(--border); transform: translateY(var(--hover-lift)) scale(calc(1 - var(--stack-progress) * 0.045)); filter: brightness(calc(1 - var(--stack-progress) * 0.22)); transition: border-color 0.25s ease, transform 0.15s ease-out, box-shadow 0.25s ease, filter 0.15s ease-out; } .work-list .case-card:nth-child(1) { z-index: 1; } .work-list .case-card:nth-child(2) { z-index: 2; } .work-list .case-card:nth-child(3) { z-index: 3; } .work-list .case-card:nth-child(4) { z-index: 4; } @media (prefers-reduced-motion: reduce) { .case-card { position: static; transform: none; filter: none; } } /* Each case study gets its own brand-tinted gradient layered over an opaque base (not the translucent --card token) so they're distinguishable at a glance, and so a stacked card fully occludes the one behind it instead of letting it bleed through. */ .case-card--mayan { background: var(--grad-mayan), var(--bg-elevated); } .case-card--fleet { background: var(--grad-fleet), var(--bg-elevated); } .case-card--pulse { background: var(--grad-pulse), var(--bg-elevated); } .case-card--system { background: var(--grad-system), var(--bg-elevated); } @media (min-width: 768px) { .case-card { grid-template-columns: 1.4fr 1fr; align-items: start; padding: 40px; } .case-card .stat-pair { margin-top: 2px; } } .case-card:hover { --hover-lift: -2px; border-color: var(--border-strong); box-shadow: var(--card-shadow-hover); } .case-card .tag-row { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; } .tag { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); color: var(--text-muted); } .tag.live { color: var(--success); border-color: var(--success-ring); } .tag.soon { color: var(--accent-warm); border-color: var(--accent-warm-ring); } .case-card h3 { font-size: 1.4rem; font-weight: 500; margin-bottom: 12px; letter-spacing: -0.01em; } .case-card p { color: var(--text-muted); font-size: 0.98rem; line-height: 1.6; margin-bottom: 20px; } .case-card .arrow-link { font-size: 0.9rem; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; } /* Case study preview image — a background-image div rather than , so a missing file just falls back to a plain tinted box (no broken-image icon) until the real screenshot is dropped in at that path. */ .case-card-media { aspect-ratio: 16 / 10; border-radius: var(--radius-md); background-color: var(--card-hover); background-size: cover; background-position: center; border: 1px solid var(--border); margin-bottom: 20px; } .case-card-media--mayan { background-image: url('../assets/images/case-mayan.jpg'); } .case-card-media--fleet { background-image: url('../case-studies/fleet-dashboard/assets/vehicles-table.png'); } .case-card-media--pulse { background-image: url('../assets/images/case-pulse.jpg'); } .case-card-media--system { background-image: url('../assets/images/case-system.jpg'); } .stat-pair { display: flex; gap: 32px; flex-wrap: wrap; } .stat-pair .stat-label { font-size: 0.8rem; color: var(--text-faint); margin-bottom: 6px; } .stat-pair .stat-value { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); } /* ---------- Skills ---------- Grouped into labeled categories instead of one flat 22-item wall, so it reads as intentional rather than a keyword dump. */ .skills-groups { display: flex; flex-direction: column; gap: 32px; } .skills-group-title { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 14px; } .chip-cloud { display: flex; flex-wrap: wrap; gap: 10px; } .chip { padding: 9px 16px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--card); font-size: 0.88rem; color: var(--text-muted); } /* ---------- Experience timeline ---------- The connecting line is drawn per-item (from this item's dot down to the next item's dot) rather than as one border spanning the whole list — that way it starts flush at the first dot and ends flush at the last one instead of trailing past it into empty space below the final entry. */ .timeline { display: flex; flex-direction: column; gap: 36px; padding-left: 32px; } .timeline-item { position: relative; } .timeline-item::before { content: ''; position: absolute; left: -37px; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); z-index: 1; } .timeline-item:not(:last-child)::after { content: ''; position: absolute; left: -32px; top: 9.5px; width: 1px; height: calc(100% + 36px); background: var(--border); } .timeline-item .role { font-size: 1.1rem; font-weight: 500; margin-bottom: 4px; } .timeline-item .meta { color: var(--text-muted); font-size: 0.9rem; } .timeline-sub { position: relative; margin-top: 16px; padding-left: 20px; } .timeline-sub::before { content: ''; position: absolute; left: -32px; top: -58.5px; width: 26px; height: 66.5px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); border-bottom-left-radius: 10px; } .timeline-sub::after { content: ''; position: absolute; left: -9.5px; top: 4.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .timeline-item .role-sub { margin-top: 0; font-size: 0.95rem; font-weight: 400; color: var(--text-muted); } /* ---------- FAQ ---------- */ .faq-item { border-bottom: 1px solid var(--border); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 24px 0; background: none; border: none; color: var(--text); font-size: 1.05rem; font-family: inherit; text-align: left; cursor: pointer; } .faq-question .icon { display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); transition: transform 0.25s ease; flex-shrink: 0; margin-left: 16px; } .faq-question .icon svg { width: 16px; height: 16px; display: block; } .faq-item.open .faq-question .icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .faq-answer p { color: var(--text-muted); padding-bottom: 24px; max-width: 640px; line-height: 1.65; } /* ---------- CTA banner ---------- */ .cta-banner { text-align: center; padding: 80px 0; border-top: 1px dashed var(--grid-line); } .cta-banner h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 500; margin-bottom: 12px; letter-spacing: -0.01em; } .cta-banner p { color: var(--text-muted); margin-bottom: 32px; } /* ---------- Footer ---------- */ footer { padding: 32px 0 48px; display: flex; justify-content: space-between; align-items: center; color: var(--text-faint); font-size: 0.9rem; border-top: 1px dashed var(--grid-line); } footer a { color: var(--text-muted); transition: color 0.2s ease; } footer a:hover { color: var(--text); } /* ---------- Case study page ---------- */ .cs-hero { padding: 140px 0 60px; } .cs-hero .back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 32px; } .cs-hero .back-link:hover { color: var(--text); } .cs-hero h1 { text-align: left; margin: 0 0 20px; max-width: 760px; } .cs-hero .lede { text-align: left; margin: 0; max-width: 680px; } .meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border); } .meta-grid .meta-label { font-size: 0.8rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; } .meta-grid .meta-value { font-size: 1.05rem; font-weight: 500; } .cs-body { padding: 20px 0 80px; } .cs-block { max-width: 720px; margin: 0 auto 64px; } /* Breaks wide visual content (screenshots, tables, charts) out of the 720px reading column so it spans the same width as the rest of the page (--max-width, via .wrap), instead of being squeezed narrow. */ .cs-wide { margin: 0 auto 64px; } .cs-block h2 { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 20px; } .cs-block p { color: var(--text-muted); line-height: 1.75; margin-bottom: 18px; font-size: 1.02rem; } .cs-block ul { margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .cs-block ul li { color: var(--text-muted); line-height: 1.65; padding-left: 26px; position: relative; font-size: 1.02rem; } .cs-block ul li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } blockquote { max-width: 720px; margin: 0 auto 64px; padding: 32px 36px; border-left: 2px solid var(--accent); background: var(--card); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: 1.15rem; font-style: italic; color: var(--text); line-height: 1.6; } .result-stats { max-width: 720px; margin: 0 auto 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px; padding: 36px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border); } .result-stats .stat-value { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--accent); margin-bottom: 6px; } .result-stats .stat-label { font-size: 0.85rem; color: var(--text-muted); } .cs-nav-footer { max-width: 720px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding-top: 40px; border-top: 1px solid var(--border); } /* ---------- Mobile nav ---------- */ .menu-toggle { display: none; background: none; border: none; color: var(--text); font-size: 1.4rem; cursor: pointer; } /* ---------- Tablet (600–1023px) ---------- */ @media (max-width: 1023px) { section { padding: 72px 0; } .hero { padding: 96px 0 56px; } } /* ---------- Phone + tablet nav (< 768px) ---------- */ @media (max-width: 767px) { .nav-links { position: fixed; top: 64px; left: 0; right: 0; background: var(--bg-elevated); flex-direction: column; padding: var(--space-5); gap: var(--space-5); border-bottom: 1px solid var(--border); transform: translateY(-120%); transition: transform 0.3s ease; } .nav-links.open { transform: translateY(0); } .menu-toggle { display: block; } .meta-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } footer { flex-direction: column; gap: var(--space-3); text-align: center; } } /* ---------- Phone only (< 480px) ---------- */ @media (max-width: 479px) { .hero { padding: 88px 0 48px; } section { padding: 56px 0; } .hero-actions, .cta-banner .wrap > a { width: 100%; } .hero-actions .btn { width: 100%; justify-content: center; } .case-card { padding: 24px; } .hero-stats > div { padding: 0 16px; } .hero-stats .stat-value { font-size: 1.6rem; } .meta-grid { grid-template-columns: 1fr; } .result-stats { padding: var(--space-5); gap: var(--space-5); } blockquote { padding: var(--space-5); font-size: 1.05rem; } .cs-nav-footer { flex-direction: column; gap: var(--space-4); align-items: stretch; } .cs-nav-footer .btn { justify-content: center; } } /* ---------- Case study image lightbox ---------- Click-to-enlarge for case study figures — most useful for images shown small (e.g. a 2-up grid), so a click reveals the full-resolution shot. */ .rf-fig img { cursor: zoom-in; } .lightbox-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, 0.86); display: flex; align-items: center; justify-content: center; padding: 48px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .lightbox-overlay.open { opacity: 1; pointer-events: auto; } .lightbox-overlay img { max-width: 100%; max-height: 100%; border-radius: var(--radius-md, 14px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); cursor: zoom-out; } .lightbox-close { position: absolute; top: 24px; right: 24px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .lightbox-close:hover { background: rgba(255, 255, 255, 0.2); }