/* ========================================================================== Praveen Yadav — portfolio stylesheet No external fonts, no CDNs. System font stacks only. Theme model: light/dark mode (prefers-color-scheme + manual override) times 7 curated colour palettes, each independently tuned for both modes, plus 6 font pairings -- all via data-attributes on , persisted in localStorage by js/main.js. Every palette token is single-purpose -- never reused for both a background and a text role. That split is what keeps every palette x mode combination correct: a token that means "page background" in one place and silently gets pressed into service as a text colour elsewhere is the classic way theme-switching breaks (one of its two uses goes invisible the moment the palette changes). --on-accent exists solely so accent- coloured buttons never have to borrow --bg for their text colour. ========================================================================== */ /* ---------- Site config (managed via the private admin page) ---------- */ html[data-hide-wimt] #block-wimt { display: none; } html[data-hide-cib] #block-cib { display: none; } html[data-hide-resume] .resume-link { display: none !important; } /* Admin-controlled content framing (Architect vs. Delivery Leader) -- deliberately NOT a visitor preference. Every visitor sees whichever version is set site-wide; there is no client-side override for this. */ /* :not([data-content="delivery"]) instead of a bare class selector so this reliably beats same-specificity element rules that come later in the file (e.g. .btn { display: inline-flex } silently won over a plain .content-delivery { display: none } on the résumé download button). */ html:not([data-content="delivery"]) .content-delivery { display: none; } html[data-content="delivery"] .content-architect { display: none; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul, ol { list-style: none; padding: 0; } img, picture, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } a { color: inherit; } /* ---------- Font pairings ---------- */ :root, :root[data-font="serif"] { --font-heading: ui-serif, Georgia, "Cambria", "Times New Roman", serif; --font-body: -apple-system, "Segoe UI", ui-sans-serif, system-ui, Roboto, Helvetica, Arial, sans-serif; } :root[data-font="sans"] { --font-heading: -apple-system, "Segoe UI", ui-sans-serif, system-ui, Roboto, Helvetica, Arial, sans-serif; --font-body: -apple-system, "Segoe UI", ui-sans-serif, system-ui, Roboto, Helvetica, Arial, sans-serif; } :root[data-font="classic"] { --font-heading: ui-serif, Georgia, "Cambria", "Times New Roman", serif; --font-body: ui-serif, Georgia, "Cambria", "Times New Roman", serif; } :root[data-font="mono"] { --font-heading: ui-monospace, "Cascadia Code", "Consolas", "SFMono-Regular", Menlo, monospace; --font-body: -apple-system, "Segoe UI", ui-sans-serif, system-ui, Roboto, Helvetica, Arial, sans-serif; } :root[data-font="cambria"] { --font-heading: Cambria, "Constantia", Georgia, serif; --font-body: Calibri, "Segoe UI", ui-sans-serif, system-ui, sans-serif; } :root[data-font="grotesk"] { --font-heading: Arial, "Helvetica Neue", Helvetica, sans-serif; --font-body: Arial, "Helvetica Neue", Helvetica, sans-serif; } /* ---------- Colour palettes ---------- 7 palettes, each independently designed for light and dark mode -- not a single hue swapped over a shared grey scale. Every pair below (ink/bg, ink-soft/panel, accent/bg, on-accent/accent, accent-strong/bg, ...) is WCAG AA contrast-checked (>=4.5:1, >=3:1 for -faint text) with a script, not by eye. --panel is a subtle section tint; --surface is the raised card/header colour, which coincides with --bg in light mode but lifts clear of it in dark mode -- collapsing the two would flatten every card back into the page in dark mode. */ :root, :root[data-palette="harbor"], :root[data-palette="harbor"][data-theme="light"] { --bg: #f7f8fa; --surface: #ffffff; --panel: #eef1f5; --ink: #151b24; --ink-soft: #454f5e; --ink-faint: #6b7686; --line: #dde1e8; --line-strong: #c3c9d4; --accent: #1f4d8f; --accent-strong: #163a6c; --on-accent: #ffffff; --shadow: 0 1px 2px rgba(21, 27, 36, 0.07), 0 1px 1px rgba(21, 27, 36, 0.05); color-scheme: light; } :root[data-palette="ivory"], :root[data-palette="ivory"][data-theme="light"] { --bg: #faf6ee; --surface: #ffffff; --panel: #f1e6d3; --ink: #241a12; --ink-soft: #5a4a3a; --ink-faint: #7d6c5a; --line: #e3d6c0; --line-strong: #cbb897; --accent: #7a2233; --accent-strong: #591925; --on-accent: #ffffff; --shadow: 0 1px 2px rgba(36, 26, 18, 0.08), 0 1px 1px rgba(36, 26, 18, 0.05); color-scheme: light; } :root[data-palette="verdant"], :root[data-palette="verdant"][data-theme="light"] { --bg: #f6f9f6; --surface: #ffffff; --panel: #e9f1e9; --ink: #131f16; --ink-soft: #465342; --ink-faint: #697a63; --line: #dce7dc; --line-strong: #c1d3c1; --accent: #1c6b45; --accent-strong: #134e33; --on-accent: #ffffff; --shadow: 0 1px 2px rgba(19, 31, 22, 0.07), 0 1px 1px rgba(19, 31, 22, 0.05); color-scheme: light; } :root[data-palette="aurum"], :root[data-palette="aurum"][data-theme="light"] { --bg: #f8f6f2; --surface: #ffffff; --panel: #efe8dc; --ink: #1c1712; --ink-soft: #524738; --ink-faint: #786b58; --line: #e2d8c6; --line-strong: #c9baa0; --accent: #8a5a0f; --accent-strong: #6a4409; --on-accent: #ffffff; --shadow: 0 1px 2px rgba(28, 23, 18, 0.08), 0 1px 1px rgba(28, 23, 18, 0.05); color-scheme: light; } :root[data-palette="glacier"], :root[data-palette="glacier"][data-theme="light"] { --bg: #f5f9fa; --surface: #ffffff; --panel: #e6eff1; --ink: #141c1f; --ink-soft: #42545a; --ink-faint: #66797f; --line: #d7e4e7; --line-strong: #bccdd1; --accent: #0f6e73; --accent-strong: #0a5054; --on-accent: #ffffff; --shadow: 0 1px 2px rgba(20, 28, 31, 0.07), 0 1px 1px rgba(20, 28, 31, 0.05); color-scheme: light; } :root[data-palette="onyx"], :root[data-palette="onyx"][data-theme="light"] { --bg: #f6f6f7; --surface: #ffffff; --panel: #e9eaec; --ink: #17181b; --ink-soft: #464a52; --ink-faint: #6c7078; --line: #dcdee2; --line-strong: #c2c5cc; --accent: #3d4451; --accent-strong: #282d37; --on-accent: #ffffff; --shadow: 0 1px 2px rgba(23, 24, 27, 0.07), 0 1px 1px rgba(23, 24, 27, 0.05); color-scheme: light; } :root[data-palette="iris"], :root[data-palette="iris"][data-theme="light"] { --bg: #f8f6fb; --surface: #ffffff; --panel: #ece6f5; --ink: #1c1530; --ink-soft: #4f4368; --ink-faint: #726489; --line: #ddd3ea; --line-strong: #c3b3d9; --accent: #5b3a9e; --accent-strong: #432a78; --on-accent: #ffffff; --shadow: 0 1px 2px rgba(28, 21, 48, 0.08), 0 1px 1px rgba(28, 21, 48, 0.05); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-palette]), :root[data-palette="harbor"]:not([data-theme="light"]) { --bg: #0c1017; --surface: #131a24; --panel: #131a24; --ink: #eef1f6; --ink-soft: #b7c0cd; --ink-faint: #8892a1; --line: #232c39; --line-strong: #333f4f; --accent: #7fabe6; --accent-strong: #a9c6f0; --on-accent: #0b1420; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3); color-scheme: dark; } :root[data-palette="ivory"]:not([data-theme="light"]) { --bg: #181310; --surface: #241a15; --panel: #241a15; --ink: #f3ece1; --ink-soft: #cdbfab; --ink-faint: #a3907a; --line: #332721; --line-strong: #493730; --accent: #e08a99; --accent-strong: #eeb0ba; --on-accent: #241014; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3); color-scheme: dark; } :root[data-palette="verdant"]:not([data-theme="light"]) { --bg: #0a120d; --surface: #0f1c14; --panel: #0f1c14; --ink: #e9f3ec; --ink-soft: #b0c7ba; --ink-faint: #82988c; --line: #1c2c22; --line-strong: #2a3f31; --accent: #6fcf9a; --accent-strong: #9fe2bc; --on-accent: #08160f; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3); color-scheme: dark; } :root[data-palette="aurum"]:not([data-theme="light"]) { --bg: #100e0a; --surface: #1a1610; --panel: #1a1610; --ink: #f1ebdd; --ink-soft: #cabfa5; --ink-faint: #9c9075; --line: #2b2418; --line-strong: #3f3623; --accent: #d9a94e; --accent-strong: #ecc476; --on-accent: #1a1204; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3); color-scheme: dark; } :root[data-palette="glacier"]:not([data-theme="light"]) { --bg: #091314; --surface: #0e1c1e; --panel: #0e1c1e; --ink: #e7f4f5; --ink-soft: #adc7ca; --ink-faint: #7f9799; --line: #1c2f31; --line-strong: #2a4547; --accent: #5bc9d1; --accent-strong: #8fdbe1; --on-accent: #052224; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3); color-scheme: dark; } :root[data-palette="onyx"]:not([data-theme="light"]) { --bg: #0d0e10; --surface: #17181b; --panel: #17181b; --ink: #eef0f2; --ink-soft: #b4b9c2; --ink-faint: #868c96; --line: #25272c; --line-strong: #363940; --accent: #a7b0c0; --accent-strong: #ccd3de; --on-accent: #111318; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3); color-scheme: dark; } :root[data-palette="iris"]:not([data-theme="light"]) { --bg: #120e1c; --surface: #1c1630; --panel: #1c1630; --ink: #f0ecf9; --ink-soft: #c6bcdc; --ink-faint: #9a8fb5; --line: #2c2447; --line-strong: #403668; --accent: #b298e6; --accent-strong: #cfbcf0; --on-accent: #150f26; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3); color-scheme: dark; } } :root[data-theme="dark"]:not([data-palette]), :root[data-palette="harbor"][data-theme="dark"] { --bg: #0c1017; --surface: #131a24; --panel: #131a24; --ink: #eef1f6; --ink-soft: #b7c0cd; --ink-faint: #8892a1; --line: #232c39; --line-strong: #333f4f; --accent: #7fabe6; --accent-strong: #a9c6f0; --on-accent: #0b1420; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3); color-scheme: dark; } :root[data-palette="ivory"][data-theme="dark"] { --bg: #181310; --surface: #241a15; --panel: #241a15; --ink: #f3ece1; --ink-soft: #cdbfab; --ink-faint: #a3907a; --line: #332721; --line-strong: #493730; --accent: #e08a99; --accent-strong: #eeb0ba; --on-accent: #241014; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3); color-scheme: dark; } :root[data-palette="verdant"][data-theme="dark"] { --bg: #0a120d; --surface: #0f1c14; --panel: #0f1c14; --ink: #e9f3ec; --ink-soft: #b0c7ba; --ink-faint: #82988c; --line: #1c2c22; --line-strong: #2a3f31; --accent: #6fcf9a; --accent-strong: #9fe2bc; --on-accent: #08160f; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3); color-scheme: dark; } :root[data-palette="aurum"][data-theme="dark"] { --bg: #100e0a; --surface: #1a1610; --panel: #1a1610; --ink: #f1ebdd; --ink-soft: #cabfa5; --ink-faint: #9c9075; --line: #2b2418; --line-strong: #3f3623; --accent: #d9a94e; --accent-strong: #ecc476; --on-accent: #1a1204; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3); color-scheme: dark; } :root[data-palette="glacier"][data-theme="dark"] { --bg: #091314; --surface: #0e1c1e; --panel: #0e1c1e; --ink: #e7f4f5; --ink-soft: #adc7ca; --ink-faint: #7f9799; --line: #1c2f31; --line-strong: #2a4547; --accent: #5bc9d1; --accent-strong: #8fdbe1; --on-accent: #052224; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3); color-scheme: dark; } :root[data-palette="onyx"][data-theme="dark"] { --bg: #0d0e10; --surface: #17181b; --panel: #17181b; --ink: #eef0f2; --ink-soft: #b4b9c2; --ink-faint: #868c96; --line: #25272c; --line-strong: #363940; --accent: #a7b0c0; --accent-strong: #ccd3de; --on-accent: #111318; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3); color-scheme: dark; } :root[data-palette="iris"][data-theme="dark"] { --bg: #120e1c; --surface: #1c1630; --panel: #1c1630; --ink: #f0ecf9; --ink-soft: #c6bcdc; --ink-faint: #9a8fb5; --line: #2c2447; --line-strong: #403668; --accent: #b298e6; --accent-strong: #cfbcf0; --on-accent: #150f26; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3); color-scheme: dark; } /* ---------- Scale ---------- */ :root { --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 6.5rem; --radius: 8px; --radius-lg: 12px; --content-width: 46rem; --page-width: 76rem; --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem); --step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem); --step-2: clamp(1.44rem, 1.32rem + 0.6vw, 1.75rem); --step-3: clamp(1.8rem, 1.6rem + 1vw, 2.3rem); --step-4: clamp(2.2rem, 1.85rem + 1.75vw, 3.2rem); } /* ---------- Base ---------- */ html { font-family: var(--font-body); font-size: 100%; -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--ink); font-size: var(--step-0); line-height: 1.6; transition: background-color 0.15s ease, color 0.15s ease; } h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); margin-bottom: var(--space-5); } h3 { font-size: var(--step-1); } h4 { font-size: var(--step-0); margin-top: var(--space-7); margin-bottom: var(--space-3); } h5 { font-size: var(--step-0); color: var(--accent); margin-top: var(--space-5); margin-bottom: var(--space-2); } p { max-width: 68ch; } a { text-decoration-thickness: 1px; text-underline-offset: 0.15em; } a:not(.btn):not(.card):not(.nav-link):not(.brand) { color: var(--accent); } ::selection { background: var(--accent); color: var(--on-accent); } :focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------- Layout helpers ---------- */ .wrap { width: 100%; max-width: var(--page-width); margin-inline: auto; padding-inline: var(--space-5); } .prose { max-width: var(--content-width); margin-inline: 0; } section { padding-block: var(--space-8); } section + section { border-top: 1px solid var(--line); } /* ---------- Collapsible sections ---------- */ .section-details summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); } .section-details summary::-webkit-details-marker { display: none; } .section-details summary::marker { content: ""; } .section-details .summary-text { flex: 1; min-width: 0; } .section-details summary h2 { margin-bottom: var(--space-2); } .section-details[open] summary h2 { margin-bottom: var(--space-5); } .section-teaser { color: var(--ink-soft); max-width: 68ch; } .teaser-more { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 0.15em; white-space: nowrap; margin-left: 0.3em; } .section-details[open] .section-teaser { display: none; } .chevron { flex-shrink: 0; width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: 50%; font-size: var(--step-0); color: var(--ink-soft); transition: transform 0.15s ease; } .section-details:hover .chevron { border-color: var(--accent); color: var(--accent); } .section-details[open] .chevron { transform: rotate(180deg); } .details-body { padding-top: var(--space-6); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: var(--space-4); top: var(--space-4); /* translateY (not a fixed negative top) so it's always fully clear of the viewport regardless of the link's actual rendered height -- a fixed -3rem offset left a ~2px sliver of its background visible. */ transform: translateY(-150%); background: var(--accent); color: var(--on-accent); padding: var(--space-3) var(--space-4); border-radius: var(--radius); z-index: 100; transition: transform 0.15s ease; font-weight: 600; } .skip-link:focus { transform: translateY(0); } /* ---------- Header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-3); gap: var(--space-4); } @media (min-width: 641px) { .site-header .wrap { display: grid; grid-template-columns: auto 1fr auto; justify-content: normal; } .site-nav { justify-self: start; margin-left: var(--space-7); } .nav-controls { justify-self: end; } } .site-header .brand { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-family: var(--font-heading); font-weight: 700; font-size: var(--step--1); letter-spacing: 0.02em; text-decoration: none; } .site-header .brand:hover { filter: brightness(1.08); } .site-nav { display: flex; align-items: center; } .site-nav ul { display: flex; gap: var(--space-5); font-size: var(--step-0); font-weight: 600; } .nav-controls { display: flex; align-items: center; gap: var(--space-4); } .nav-link { text-decoration: none; color: var(--ink-soft); padding-block: var(--space-3); border-bottom: 2px solid transparent; } .nav-link:hover, .nav-link:focus-visible { color: var(--ink); border-color: var(--accent); } .nav-toggle { display: none; background: none; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: var(--space-2) var(--space-3); } /* ---------- Theme switcher control ---------- */ .theme-switcher { position: relative; } @media (min-width: 641px) { .theme-switcher { transform: translateX(-53px); } } .theme-switcher > button { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; padding: var(--space-2) var(--space-4); font-size: var(--step--1); font-weight: 600; cursor: pointer; box-shadow: var(--shadow); transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .theme-switcher > button .theme-icon { color: var(--accent); flex-shrink: 0; } .theme-switcher > button:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } .theme-panel { position: absolute; right: 0; top: calc(100% + var(--space-2)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(0,0,0,0.14); padding: var(--space-4); width: 15rem; display: none; flex-direction: column; gap: var(--space-4); } .theme-panel[data-open="true"] { display: flex; } .theme-panel fieldset { border: 0; padding: 0; } .theme-panel legend { font-size: var(--step--1); font-weight: 700; color: var(--ink-soft); padding-bottom: var(--space-2); text-transform: uppercase; letter-spacing: 0.04em; } .theme-panel .option-row { display: flex; gap: var(--space-2); flex-wrap: wrap; } .swatch { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--line-strong); cursor: pointer; padding: 0; } .swatch[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); } .theme-panel .text-option { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); padding: var(--space-2) var(--space-3); font-size: var(--step--1); cursor: pointer; } .theme-panel .text-option[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); font-weight: 700; } /* ---------- Hero / banner ---------- */ .hero { padding-block: var(--space-9) var(--space-8); background: radial-gradient(60rem 22rem at 15% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%), linear-gradient(180deg, var(--panel), var(--bg) 70%); border-top: none; } .hero .eyebrow { font-size: var(--step--1); font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-3); } .hero h1 { margin-bottom: var(--space-3); } .hero-grid { display: grid; grid-template-columns: 1fr; align-items: center; gap: var(--space-7); } .hero-media { display: flex; justify-content: flex-start; order: -1; margin-bottom: var(--space-4); } .hero-photo-lg { width: 100%; max-width: 9rem; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22); } html[data-photo-ring="accent"] .hero-photo-lg { border-color: var(--accent); } @media (max-width: 699px) { .hero { padding-top: var(--space-6); } } @media (min-width: 700px) { .hero-grid { grid-template-columns: 1fr 13rem; } .hero-media { justify-content: flex-end; order: 0; margin-bottom: 0; } .hero-photo-lg { max-width: 13rem; border-width: 3px; } } .hero h1 { font-size: clamp(2.1rem, 1.75rem + 1.5vw, 2.9rem); } .hero .headline { font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem); color: var(--ink-soft); font-weight: 500; margin-bottom: var(--space-5); max-width: none; } .hero .headline .dot { display: inline-block; color: var(--accent); font-size: 1.3em; line-height: 0; vertical-align: -0.05em; margin-inline: 0.15em; } .hero .lede { font-size: var(--step-0); max-width: none; margin-bottom: var(--space-6); } .credential { margin-bottom: var(--space-4); } .credential a { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--step--1); font-weight: 700; color: var(--accent); text-decoration: none; border: 1px solid var(--line-strong); border-radius: 999px; padding: var(--space-1) var(--space-4); } .credential a:hover { border-color: var(--accent); text-decoration: underline; } .hero .actions { display: flex; gap: var(--space-3); flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; font-weight: 700; font-size: var(--step--1); padding: var(--space-3) var(--space-5); border-radius: var(--radius); border: 1.5px solid transparent; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-strong); } .btn-secondary { background: transparent; border-color: var(--line-strong); color: var(--ink); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); } /* ---------- About ---------- */ .about-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } #about .section-teaser, .about-grid p { max-width: none; } #projects .section-teaser, #projects .section-intro { max-width: none; } .about p { margin-bottom: var(--space-4); } .about p:last-child { margin-bottom: 0; } .about .opportunities { border-left: 3px solid var(--accent); padding-left: var(--space-4); color: var(--ink-soft); } /* ---------- Projects ---------- */ .section-intro { max-width: 60ch; color: var(--ink-soft); margin-bottom: var(--space-6); } .project-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow); } .card h3 { margin-bottom: var(--space-2); } .card .stack { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: var(--space-3); } .card .desc { margin-bottom: var(--space-3); } .card .decision { background: var(--panel); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-4); font-size: var(--step--1); } .card .decision strong { color: var(--accent); } .card-links { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--step--1); align-items: center; } .card-links a { font-weight: 700; text-decoration: none; color: var(--accent); } .card-links a:hover { text-decoration: underline; } .pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--panel); color: var(--ink-soft); border: 1px solid var(--line); } .pill.is-muted { font-weight: 600; } .demo-note { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--panel); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); font-size: var(--step--1); color: var(--ink-soft); } .demo-note strong { color: var(--ink); } .fine-print { margin-top: var(--space-5); font-size: 0.78rem; color: var(--ink-faint); } /* ---------- Experience ---------- */ .timeline { display: flex; flex-direction: column; gap: var(--space-6); } .role-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); } .role-header .org { color: var(--ink-soft); } .role-header .dates { font-size: var(--step--1); color: var(--ink-soft); font-weight: 600; white-space: nowrap; } .role-bullets { display: flex; flex-direction: column; gap: var(--space-2); } .role-bullets li { position: relative; padding-left: var(--space-5); } .role-bullets li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .role-detail { margin-top: var(--space-5); } .role-detail p { margin-bottom: var(--space-4); } .role-detail .role-bullets { margin-block: var(--space-4); } .flow-line { font-weight: 700; color: var(--accent); white-space: normal; } .pull-quote { border-left: 3px solid var(--accent); padding-left: var(--space-4); margin: var(--space-4) 0; font-style: italic; color: var(--ink); max-width: none; } #experience .role-detail p, #experience .section-teaser { max-width: none; } /* ---------- Recommendations carousel (single row, group labels inline) ---------- */ .rec-carousel { position: relative; } .rec-viewport { overflow: hidden; width: 100%; } .rec-track { display: flex; gap: var(--space-4); } .rec-slide { flex: 0 0 auto; width: min(283px, 100%); display: flex; flex-direction: column; } .rec-slide-label { font-size: var(--step-0); color: var(--ink); margin: 0 0 var(--space-3); text-align: center; } /* Shifts the label left so it straddles the boundary with the previous card instead of sitting flush above the current one -- starts ~60-70% into the previous card, ends around the midpoint of the current card. Background/shadow keep it legible where it overlaps the previous card's image. */ .rec-slide-label--overlap { position: relative; z-index: 1; width: 257px; margin-left: -115px; background: var(--surface); border-radius: var(--radius); padding: var(--space-2) var(--space-3); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16); } .rec-card { display: block; text-decoration: none; margin-top: auto; /* No border/shadow/radius here -- the screenshots already carry LinkedIn's own rounded corners and drop shadow; adding CSS framing on top doubled up and looked wrong. */ } .rec-card img { width: 100%; height: auto; display: block; } .rec-card:focus-visible img { outline: 2.5px solid var(--accent); outline-offset: 3px; } .rec-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 1.3rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); } .rec-nav:hover { border-color: var(--accent); color: var(--accent); } .rec-prev { left: 0; } .rec-next { right: 0; } /* ---------- Skills ---------- */ .skills-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); } .skill-group h3 { font-size: var(--step-0); margin-bottom: var(--space-3); } .tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); } .tag { font-size: var(--step--1); padding: var(--space-1) var(--space-3); border-radius: 999px; background: var(--panel); border: 1px solid var(--line); } /* ---------- Education ---------- */ .edu-list { display: flex; flex-direction: column; gap: var(--space-3); } .edu-list li { padding-left: var(--space-5); position: relative; } .edu-list li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* ---------- Certifications ---------- */ .cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-4); max-width: 40rem; margin-inline: auto; } .cert-badge { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); text-decoration: none; color: var(--ink); } a.cert-badge:hover { border-color: var(--accent); box-shadow: var(--shadow); } .cert-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--accent); font-weight: 700; font-size: var(--step--1); border-radius: var(--radius-lg); opacity: 0; transition: opacity 0.15s ease; pointer-events: none; } a.cert-badge:hover .cert-hint, a.cert-badge:focus-visible .cert-hint { opacity: 1; } .cert-badge img { width: 6rem; height: 6rem; border-radius: 50%; } .cert-badge.is-plain { justify-content: center; min-height: 8.5rem; color: var(--ink-soft); } .cert-name { font-weight: 700; font-size: var(--step-0); color: var(--ink); } .cert-issuer { font-size: var(--step--1); color: var(--ink-soft); } /* ---------- Contact ---------- */ .contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); max-width: 32rem; margin-inline: auto; } .contact-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); background: var(--surface); } .contact-row:hover, .contact-row:focus-visible { border-color: var(--accent); } .contact-row .label { font-size: var(--step--1); color: var(--ink-soft); } .contact-row .value { font-weight: 700; } /* ---------- Footer ---------- */ .site-footer { padding-block: var(--space-6); font-size: var(--step--1); color: var(--ink-soft); text-align: center; } /* ---------- Floating scroll nav (up / down) ---------- */ .scroll-nav { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 15; display: flex; flex-direction: column; gap: var(--space-2); } .scroll-nav button { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(6px); color: var(--ink-soft); box-shadow: var(--shadow); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.15s ease, color 0.15s ease; } .scroll-nav button:hover { border-color: var(--accent); color: var(--accent); } .scroll-nav button.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } @media (max-width: 640px) { .scroll-nav { right: var(--space-3); bottom: var(--space-3); gap: var(--space-1); } .scroll-nav button { width: 1.9rem; height: 1.9rem; } .scroll-nav button svg { width: 11px; height: 11px; } } /* ---------- Responsive ---------- */ @media (min-width: 700px) { .project-grid { grid-template-columns: repeat(2, 1fr); } .skills-grid { grid-template-columns: repeat(2, 1fr); } .about-grid { grid-template-columns: 1fr; } } @media (min-width: 960px) { h1 { font-size: var(--step-4); } .skills-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .site-nav ul { display: none; } .nav-toggle { display: inline-flex; order: 2; } .theme-switcher { order: 1; } .site-nav[data-open="true"] ul { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--panel); border-bottom: 1px solid var(--line); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18); padding: var(--space-2) var(--space-5); gap: 0; } .site-nav[data-open="true"] ul li { border-bottom: 1px solid var(--line); } .site-nav[data-open="true"] ul li:last-child { border-bottom: none; } .site-nav[data-open="true"] .nav-link { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-4); font-size: var(--step-1); font-weight: 600; color: var(--ink); border-bottom: none; } .site-nav[data-open="true"] .nav-link::after { content: "\203A"; color: var(--ink-faint); font-size: 1.2em; } .site-nav[data-open="true"] .nav-link:hover, .site-nav[data-open="true"] .nav-link:focus-visible { color: var(--accent); } .site-nav[data-open="true"] .nav-link:hover::after, .site-nav[data-open="true"] .nav-link:focus-visible::after { color: var(--accent); } .role-header { flex-direction: column; align-items: flex-start; } }