/* ============================================================ Jeet Doshi — portfolio Palette: daylight control room. Pale mineral ground, slate ink, one hot signal orange, deep teal for links. Reuse guide: - Change the custom properties below to rebrand both screen and print output. - Layout classes are shared by multiple sections; prefer modifier classes for one-off variants rather than changing a shared rule globally. - Breakpoints are content-driven. Recheck mobile and A4 output after adding longer names, more cards, or additional experience entries. ============================================================ */ /* Light palette and global design tokens. The current page selects the dark overrides below through . Remove that attribute to use this palette; no JavaScript theme switcher is included. */ :root { --paper: #F1F2EE; --paper-deep: #E5E7E0; --ink: #122736; --ink-soft: #56635F; --rule: #C7CCC4; --signal: #E2571F; --on-signal: #0B0F12; --teal: #1C4B4B; --serif: "Source Serif 4", Georgia, "Times New Roman", serif; --sans: "Archivo", "Helvetica Neue", Arial, sans-serif; --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; --rail: 19rem; --measure: 66ch; } /* Dark, recruiter-facing re-skin — same variables, same layout. Keep selectors at this specificity in mind when overriding variables inside media queries. */ html[data-theme="dark"] { --paper: #14181C; --paper-deep: #1C2126; --ink: #ECEEEF; --ink-soft: #9AA3AA; --rule: #2C3238; --signal: #FF7A45; --on-signal: #0B0F12; --teal: #5FD4C7; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 1.0625rem; line-height: 1.62; font-variant-numeric: oldstyle-nums; overflow-wrap: anywhere; } h1, h2, h3, h4 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.022em; line-height: 1.08; margin: 0; font-variant-numeric: lining-nums; } a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 0.16em; } a:hover { color: var(--signal); } :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 1px; } .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: .6rem 1rem; z-index: 50; } .skip:focus { left: 0; } /* ---------- shell ---------- Mobile is a single column. At 62rem the rail and main content become a two-column grid; minmax(0, 1fr) prevents long content overflowing the grid. */ .shell { display: block; max-width: min(94vw, 108rem); margin: 0 auto; padding: 0 1.5rem; } @media (min-width: 62rem) { .shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 4.5rem; padding: 0 2.5rem; } } /* ---------- rail ---------- */ .rail { display: flex; flex-direction: column; padding: 3rem 0 1.5rem; border-bottom: 1px solid var(--rule); } /* mobile: surface contact links + resume download before the section nav, so they're not buried below a 6-item list on a short phone screen */ @media (max-width: 61.99rem) { .nav { order: 2; } .rail__foot { order: 1; margin-top: 1.5rem; padding-top: 0; margin-bottom: .5rem; } } @media (min-width: 62rem) { .rail { position: sticky; top: 0; height: 100vh; padding: 4.5rem 0 2.5rem; border-bottom: 0; border-right: 1px solid var(--rule); padding-right: 2rem; animation: rail-in .7s cubic-bezier(.2,.7,.3,1) both; } } @keyframes rail-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .rail { animation: none; } } .rail__name { font-size: clamp(2rem, 2.7vw, 2.4rem); line-height: .96; letter-spacing: -0.028em; } .rail__role { font-family: var(--sans); font-weight: 500; font-size: 1.04rem; line-height: 1.34; color: var(--ink); margin: 1rem 0 0; max-width: 20ch; } .rail__place { font-family: var(--mono); font-size: .79rem; letter-spacing: .01em; color: var(--ink-soft); margin: .7rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; } /* current working arrangement — teal, so it never reads as the signal colour used for links and section headings */ .rail__mode { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); border: 1px solid currentColor; border-radius: 2px; padding: .05rem .38rem .1rem; line-height: 1.45; white-space: nowrap; } .nav { margin-top: 2.25rem; } .nav ul { list-style: none; margin: 0; padding: 0; } .nav li + li { margin-top: .1rem; } .nav a { display: block; font-family: var(--sans); font-size: .93rem; font-weight: 500; color: var(--ink); text-decoration: none; padding: .3rem 0 .3rem .95rem; border-left: 2px solid transparent; transition: border-color .2s ease, color .2s ease; } .nav a:hover { border-left-color: var(--rule); } .nav a[aria-current="true"] { border-left-color: var(--signal); color: var(--signal); } .rail__foot { margin-top: auto; padding-top: 2rem; } .rail__links { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-family: var(--sans); font-size: .85rem; } .rail__cv { display: inline-block; margin-top: 1.1rem; font-family: var(--sans); font-size: .85rem; font-weight: 600; color: var(--paper); background: var(--ink); padding: .5rem .9rem; text-decoration: none; } .rail__cv:hover { background: var(--signal); color: var(--on-signal); } /* ---------- main ---------- */ main { padding-bottom: 6rem; min-width: 0; } section { padding: 4.25rem 0 0; scroll-margin-top: 1.5rem; } section:first-child { padding-top: 3.25rem; } @media (min-width: 62rem) { section:first-child { padding-top: 4.5rem; } } main { counter-reset: sec; } .sec-head::before { counter-increment: sec; content: counter(sec, decimal-leading-zero); display: block; font-family: var(--mono); font-size: .8rem; letter-spacing: .12em; color: var(--ink-soft); margin-bottom: .75rem; } .sec-head { font-size: clamp(2.25rem, 4vw, 3.25rem); font-family: var(--sans); font-weight: 700; line-height: 1.05; color: var(--signal); margin-bottom: 2.25rem; } .sec-head::after { content: ""; display: block; width: 4rem; height: 3px; margin-top: .9rem; background: var(--signal); } /* ---------- hero ---------- */ .eyebrow { font-family: var(--mono); font-size: clamp(.62rem, 1.02vw, .74rem); line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; color: var(--signal); margin: 0 0 1rem; } .hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); line-height: 1.0; max-width: 17ch; letter-spacing: -0.032em; } /* scoped to the prose block so the hero kicker keeps its own type */ #heroBody p { margin: 1.3rem 0 0; } #heroBody p:first-of-type { font-size: 1.16rem; } .record { margin-top: 2.8rem; border-top: 2px solid var(--ink); display: grid; } @media (min-width: 40rem) { .record { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } } @media (min-width: 64rem) { .record { grid-template-columns: repeat(3, 1fr); column-gap: 2.5rem; } } .metric { padding: 1.15rem 0 1.25rem; border-bottom: 1px solid var(--rule); } .metric__v { display: block; font-family: var(--sans); font-weight: 700; font-size: clamp(1.95rem, 3.1vw, 2.4rem); line-height: 1; letter-spacing: -0.03em; color: var(--signal); font-variant-numeric: lining-nums; } .metric__l { font-family: var(--sans); font-weight: 600; font-size: .93rem; line-height: 1.3; margin-top: .45rem; } .metric__n { font-size: .9rem; line-height: 1.45; color: var(--ink-soft); margin-top: .3rem; } /* ---------- trail (experience) ---------- */ .trail { position: relative; } .job { display: grid; grid-template-columns: 1fr; gap: .35rem; padding: 0 0 2.4rem 1.65rem; border-left: 2px solid var(--rule); position: relative; } .job::before { content: ""; position: absolute; left: -5px; top: .55rem; width: 9px; height: 9px; background: var(--paper); border: 1px solid var(--ink); border-radius: 50%; } .job--current::before { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 10px 2px var(--signal); } .job--older { opacity: .8; } .job:last-child { border-left-color: transparent; padding-bottom: 1rem; } .job__when { font-family: var(--mono); font-size: .72rem; color: var(--ink-soft); } .job__title { font-size: 1.12rem; } .job__org { font-family: var(--sans); font-weight: 500; font-size: .95rem; color: var(--ink-soft); } .job__flag { display: inline-block; font-family: var(--sans); font-size: .8rem; font-weight: 600; color: var(--signal); border-left: 2px solid var(--signal); padding-left: .6rem; margin: .5rem 0 .1rem; } .job ul { margin: .6rem 0 0; padding-left: 1.05rem; } .job li { margin-bottom: .3rem; } .job li::marker { color: var(--rule); } /* ---------- cards: projects + writing + talks ---------- All three sections use the same card markup produced by app.js. */ .cardgrid { display: grid; gap: 2.1rem 3rem; align-items: start; } @media (min-width: 52rem) { .cardgrid { grid-template-columns: 1fr 1fr; } } .card { border-left: 2px solid var(--ink); padding: .15rem 0 .15rem 1.15rem; } .card__meta { font-family: var(--mono); font-size: .74rem; color: var(--ink-soft); } .card__title { font-size: 1.08rem; margin: .3rem 0 .3rem; } .card__sub { font-family: var(--sans); font-weight: 500; font-size: .92rem; color: var(--ink-soft); } .card p { margin: .55rem 0 .65rem; } .card__links { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-family: var(--sans); font-size: .85rem; font-weight: 600; } /* ---------- skills / credentials ---------- grid2 is also used by the static credential wrappers in index.html. */ .grid2 { display: grid; gap: 2rem; } @media (min-width: 45rem) { .grid2 { grid-template-columns: 1fr 1fr; gap: 2rem 3rem; } } .skillset { margin-bottom: 1.4rem; } .skillset h3 { font-size: .95rem; margin-bottom: .45rem; } .skillset p { margin: 0; color: var(--ink-soft); font-size: .98rem; } .credhead { font-family: var(--sans); font-size: .95rem; font-weight: 700; margin-bottom: .5rem; } .credhead--gap { margin-top: 1.8rem; } .credlist { list-style: none; margin: 0; padding: 0; } .credlist li { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; } .credlist span { font-family: var(--mono); font-size: .72rem; color: var(--ink-soft); white-space: nowrap; } /* ---------- buttons ---------- */ .btn { font-family: var(--sans); font-size: .88rem; font-weight: 600; padding: .62rem 1.1rem; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; border-radius: 0; } .btn:hover { background: var(--signal); border-color: var(--signal); color: var(--on-signal); } .btn[disabled] { opacity: .45; cursor: not-allowed; } .btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* ---------- contact ---------- */ .cta { margin: 0 0 2.75rem; } .cta__head { font-family: var(--sans); font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 2.15rem); line-height: 1.1; letter-spacing: -0.025em; margin: 0; } .cta__body { margin: .9rem 0 0; color: var(--ink-soft); } .cta__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; } .cta__actions .btn { text-decoration: none; } .contact__list { list-style: none; margin: 1rem 0 0; padding: 0; max-width: 34rem; } .contact__list li { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--rule); } .contact__list span { font-family: var(--mono); font-size: .72rem; color: var(--ink-soft); padding-top: .18rem; } footer { margin-top: 4rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: .7rem; color: var(--ink-soft); } h3.skillset { font-size: .95rem; margin-bottom: .5rem; } /* ---------- print / PDF export ---------- The PDF is this page. Same markup, same data, same renderer — only the skin changes, so the two can never drift apart. Target: 3 A4 pages. Check with the measurement script if you add content; the budget is tight by design. Browser note: users may disable background graphics, so the print design uses white paper, borders, and text colour instead of relying on filled panels. ---------------------------------------- */ @page { size: A4; margin: 12mm 13mm; } @media print { /* must match html[data-theme="dark"]'s specificity or dark wins */ html[data-theme], :root { --paper: #fff; --paper-deep: #fff; --ink: #14181C; --ink-soft: #46525C; --rule: #C8CDD1; --signal: #A8380F; --teal: #12403E; } body { background: #fff; font-size: 9pt; line-height: 1.3; overflow-wrap: normal; } .skip, .nav, .rail__cv, #contact { display: none !important; } .shell { display: block; max-width: none; padding: 0; } /* rail becomes a masthead */ .rail { position: static; height: auto; display: block; padding: 0 0 5pt; margin-bottom: 2pt; border-right: 0; border-bottom: 1.2pt solid var(--ink); animation: none; } .rail__name { font-size: 19pt; line-height: 1; margin: 0; } .rail__role { font-size: 9.5pt; margin: 2pt 0 0; max-width: none; color: var(--ink); } .rail__place { font-size: 8pt; margin: 2pt 0 0; gap: .3rem; } .rail__mode { font-size: 7.4pt; padding: 0 .3rem; } .rail__foot { margin: 3pt 0 0; padding: 0; } .rail__links { font-size: 8pt; gap: .2rem .7rem; } main { padding-bottom: 0; } section { padding: 8pt 0 0; } section:first-child { padding-top: 5pt; } .sec-head { font-size: 11.5pt; margin-bottom: 5pt; line-height: 1.1; } .sec-head::after { display: none; } .sec-head::before { font-size: 6.8pt; margin-bottom: 2pt; } /* hero */ .hero h1 { font-size: 15pt; max-width: none; margin-bottom: 3pt; } .eyebrow { font-size: 7.2pt; margin-bottom: 4pt; } #heroBody { columns: 2; column-gap: 14pt; } #heroBody p { margin: 0 0 4pt; font-size: 8.6pt; } #heroBody p:first-of-type { font-size: 8.6pt; } /* metrics — force 3 across; the A4 box is narrower than the 64rem breakpoint */ .record { margin-top: 7pt; border-top: 1.2pt solid var(--ink); grid-template-columns: repeat(3, 1fr); column-gap: 14pt; } .metric { padding: 4pt 0 5pt; } .metric__v { font-size: 14pt; } .metric__l { font-size: 8.2pt; margin-top: 1pt; } .metric__n { font-size: 7.8pt; margin-top: 1pt; } /* cards: projects, writing, talks */ .cardgrid { grid-template-columns: 1fr 1fr; gap: 7pt 14pt; } .card { padding-left: 7pt; border-left-width: 1.5pt; } .card__meta { font-size: 7pt; } .card__title { font-size: 9pt; margin: 1pt 0 1pt; } .card__sub { font-size: 8pt; } .card p { margin: 2pt 0 2pt; font-size: 8.4pt; } .card__links { font-size: 7.8pt; gap: .2rem .7rem; } /* experience */ .job { padding: 0 0 6pt 7pt; border-left-width: 1.5pt; } .job::before { width: 5px; height: 5px; left: -3.5px; top: 3pt; } .job__when { font-size: 7.2pt; } .job__title { font-size: 9.4pt; } .job__org { font-size: 8.2pt; } .job__flag { font-size: 7.6pt; margin: 2pt 0 0; padding-left: 4pt; } .job ul { margin: 2pt 0 0; padding-left: 9pt; } .job li { margin-bottom: 1pt; font-size: 8.4pt; } .job--older { opacity: 1; } /* toolkit + credentials — same breakpoint problem as .record */ .grid2 { grid-template-columns: 1fr 1fr; gap: 5pt 16pt; } .skillset { margin-bottom: 5pt; } .skillset h3 { font-size: 8.4pt; margin-bottom: 1pt; } .skillset p { font-size: 8.2pt; } .credhead { font-size: 8.4pt; margin-bottom: 2pt; } .credhead--gap { margin-top: 6pt; } .credlist li { padding: 2pt 0; } .credlist li div { font-size: 8.4pt; } .credlist span { font-size: 7.2pt; } /* recognition reads fine in two columns */ #recognition .credlist { columns: 2; column-gap: 16pt; } #recognition .credlist li { break-inside: avoid; } /* page-break discipline */ .job, .card, .metric, .credlist li, .skillset { page-break-inside: avoid; break-inside: avoid; } .sec-head { page-break-after: avoid; break-after: avoid; } section { page-break-inside: auto; } a { text-decoration: none; color: var(--teal); } }