/* NYT-style LIGHT refresh. Overrides main.css + opensource.css — must load AFTER both. CSS-only. Editorial system: Georgia body (serif), Playfair Display headlines (Cheltenham stand-in), Libre Franklin labels/UI (NYT Franklin stand-in). Big air between sections, thin grey rules, NYT blue links. To promote: add the font (see preview ) + this file to the real pages, after the opensource.css link. Remove this file to undo. */ :root { --serif: Georgia, "Times New Roman", Times, serif; /* body */ --display: "Playfair Display", Georgia, "Times New Roman", serif; /* headlines */ --sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif; /* labels/UI */ --ui: var(--serif); /* page default face */ --ink: #121212; /* NYT near-black */ --ink-2: #363636; --grey: #666666; /* meta / timestamps */ --rule: #e2e2e2; /* hairline rules */ --accent: #fc4c02; /* Strava orange (highlight) */ --accent-dark: #e0440b; /* orange, button hover */ --paper: #ffffff; } /* Serif body by default. Blunt !important universal unifies the scattered Lora/Open Sans declarations in main.css + opensource.css; headlines and labels override below via higher-specificity !important. ponytail: heavy-handed but predictable for a whole-page font swap. */ body, body * { font-family: var(--ui) !important; } body { color: var(--ink); background: var(--paper); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Narrow column = big side margins + a comfortable reading measure */ .wrapper { max-width: 700px; padding: 0 40px; } @media (min-width: 1069px) { .wrapper { max-width: 720px; } } /* Drop the old heavy grey bars; NYT uses thin rules, re-added selectively */ .page-header .title-bar, .icon-links { border: none !important; } .page-header .title-bar { margin-top: 1.5rem; padding: 0; } .icon-links { padding-top: 0; } /* Masthead name: Playfair display serif */ .page-header .header-name { font-family: var(--display) !important; font-weight: 700; letter-spacing: -0.01em; font-size: 3.5rem; line-height: 1.06; } /* Job title = NYT kicker: Franklin sans */ .page-header .title-bar .header-title { font-family: var(--sans) !important; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); } /* Section titles: Playfair, under a thin NYT rule with big air */ .section-header h2 { font-family: var(--display) !important; font-weight: 700; font-size: 2.1rem; letter-spacing: -0.01em; color: var(--ink); } /* Hero lede: Playfair italic */ .hero-tagline { font-family: var(--display) !important; font-style: italic; font-weight: 600; font-size: 1.9rem; line-height: 1.2; letter-spacing: 0; color: var(--ink); } /* --- Big air + thin rules between sections --- */ .page-header { padding: 3.5rem 0 2rem; } .content-section { margin: 0 0 7rem; } .section-header { border-top: 1px solid var(--rule); padding-top: 2.5rem; margin-bottom: 2rem; } /* Labels / small UI in Franklin sans */ .role-subtitle, .hero-subline, .hero-audience, .cta-note, .availability, .page-footer .footer-line, .oss-item-stars, .oss-item-org, .oss-compact .oss-compact-stars, .top-right a { font-family: var(--sans) !important; } .hero-subline, .role-subtitle, .cta-note, .hero-audience { color: var(--grey); } .oss-item-desc { color: var(--ink-2); } .oss-item-stars, .oss-item-org, .oss-compact .oss-compact-stars, .page-footer .footer-line { color: var(--grey); } .availability { color: var(--ink); font-weight: 600; } /* Links: NYT body style — ink, thin underline, blue on hover */ .content-section .resume-item-copy a, .content-section .resume-item-list a, .content-section .resume-item-title a, .content-section .resume-item-details a, .page-header .resume-item-copy a, .oss-item-name a, .oss-item-desc a, .oss-compact li a { color: var(--ink); border-bottom: none; text-decoration: underline; text-decoration-color: #b9b9b9; text-underline-offset: 2px; transition: color 0.15s ease, text-decoration-color 0.15s ease; } .content-section .resume-item-copy a:hover, .content-section .resume-item-list a:hover, .content-section .resume-item-title a:hover, .content-section .resume-item-details a:hover, .page-header .resume-item-copy a:hover, .oss-item-name a:hover, .oss-item-desc a:hover, .oss-compact li a:hover { color: var(--ink); opacity: 1; border-bottom: none; text-decoration: underline; text-decoration-color: var(--accent); } /* Button: squared NYT block, Franklin sans */ .contact-button { font-family: var(--sans) !important; background-color: var(--ink); color: #fff; border-radius: 3px; font-weight: 600; font-size: 1rem; letter-spacing: 0.01em; min-width: 240px; min-height: 48px; line-height: 48px; } .contact-button:hover { background-color: var(--accent); /* Strava orange, only on hover */ color: #fff; transform: none; } /* Thin rules in the NYT tone */ .oss-item { border-bottom: 1px solid var(--rule); } .page-footer { border-top: 1px solid var(--rule); padding-top: 2rem; } /* Social icons + language switcher */ .top-right a { color: var(--ink); } .top-right a:hover { color: var(--ink-2); opacity: 1; } .icon-links .icon path { fill: #999; } .icon-links .icon-link:hover .icon path { fill: var(--ink); } /* App icons: subtle squircle */ .app-strip-item { background: #f2f2f2; box-shadow: 0 1px 3px rgba(0,0,0,0.10), inset 0 0 0 0.5px rgba(0,0,0,0.08); } /* --- Readability: looser leading, real paragraph gaps, roomier list --- */ .content-section .resume-item-copy, .page-header .resume-item-copy { margin: 0 0 1.6rem; line-height: 1.75; } .content-section .resume-item-copy:last-child, .page-header .resume-item-copy:last-child { margin-bottom: 0; } .resume-item-list { margin: 1.5rem 0; padding-left: 1.25rem; } .resume-item-list li { margin-bottom: 1rem; line-height: 1.75; padding-left: 0.35rem; } .resume-item-list li:last-child { margin-bottom: 0; } /* Opening paragraph of a content section reads as a lede (eases the eye in) */ .content-section .resume-item > .resume-item-copy:first-child { font-size: 1.15rem; line-height: 1.7; color: var(--ink); } /* The readability margin above zeroed these notes' auto side-margins and left-anchored them; restore the centered block. */ .page-header .cta-note { margin-left: auto; margin-right: auto; }