/* ============================================================ CAPUCHINE RÉSUMÉ — STYLES ============================================================ */ /* ── Custom Properties ─────────────────────────────────────── */ :root { --color-bg: #FAF7F2; --color-surface: #F0E8DA; --color-primary: #3B2314; --color-accent: #C8922A; --color-muted: #D4B896; --color-text: #2C1A0E; --color-text-sub: #6B4C35; --font-sans: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-serif: Georgia, "Times New Roman", serif; --radius: 6px; --max-width: 860px; --nav-h: 60px; --space-xs: 0.375rem; --space-sm: 0.75rem; --space-md: 1.25rem; --space-lg: 2.5rem; --space-xl: 4rem; } /* ── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); line-height: 1.7; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: var(--color-accent); text-decoration: none; } a:hover { text-decoration: underline; } ul { list-style: none; } /* ── Container ─────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-md); } /* ── Navigation ─────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; background-color: var(--color-primary); min-height: var(--nav-h); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } .nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; min-height: var(--nav-h); max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-md); } .nav-brand { font-family: var(--font-serif); font-size: 1.25rem; font-weight: bold; color: var(--color-accent); letter-spacing: 0.05em; user-select: none; } .nav-links { display: flex; gap: var(--space-md); } .nav-links a { color: var(--color-muted); font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; transition: color 0.2s; } .nav-links a:hover { color: #fff; text-decoration: none; } /* Hamburger — hidden by default; JS adds .js to to enable it */ .nav-toggle { display: none; flex-direction: column; justify-content: space-between; width: 24px; height: 18px; background: none; border: none; cursor: pointer; padding: 0; } .nav-toggle span { display: block; width: 100%; height: 2px; background-color: var(--color-muted); border-radius: 2px; transition: background-color 0.2s; } .nav-toggle:hover span { background-color: #fff; } /* ── Section Shared ─────────────────────────────────────────── */ .section { padding-block: var(--space-xl); } .section-alt { background-color: var(--color-surface); } .section-title { font-family: var(--font-serif); font-size: 1.75rem; color: var(--color-primary); margin-bottom: var(--space-lg); padding-bottom: var(--space-sm); border-bottom: 2px solid var(--color-accent); display: inline-block; } /* ── Hero ───────────────────────────────────────────────────── */ .hero { background-color: var(--color-primary); color: #fff; padding-block: var(--space-xl) calc(var(--space-xl) * 1.25); text-align: center; } .hero-eyebrow { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-muted); margin-bottom: var(--space-xs); } .hero-name { font-family: var(--font-serif); font-size: clamp(2.25rem, 6vw, 3.5rem); color: #fff; line-height: 1.15; margin-bottom: var(--space-xs); } .hero-title { font-size: 1.2rem; color: var(--color-accent); font-weight: 500; margin-bottom: var(--space-sm); } .hero-tagline { color: var(--color-muted); max-width: 480px; margin-inline: auto; margin-bottom: var(--space-lg); } .hero-links { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; } /* Buttons */ .btn { display: inline-block; padding: 0.6em 1.4em; border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; transition: opacity 0.2s; } .btn:hover { opacity: 0.85; text-decoration: none; } .btn-primary { background-color: var(--color-accent); color: #fff; } .btn-outline { border: 2px solid var(--color-muted); color: var(--color-muted); } /* ── About ──────────────────────────────────────────────────── */ .about-body p + p { margin-top: var(--space-md); } /* ── Skills ─────────────────────────────────────────────────── */ .skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-lg); } .skill-group-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); margin-bottom: var(--space-sm); font-weight: 700; } .skill-list { display: flex; flex-direction: column; gap: var(--space-xs); } .skill-list li { font-size: 0.95rem; color: var(--color-text); padding-left: var(--space-sm); border-left: 2px solid var(--color-muted); } /* ── Experience ─────────────────────────────────────────────── */ .job-card { background-color: var(--color-surface); border-left: 4px solid var(--color-accent); border-radius: var(--radius); padding: var(--space-lg); margin-bottom: var(--space-lg); } .job-card:last-child { margin-bottom: 0; } .job-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md); } .job-company { font-size: 1.15rem; font-family: var(--font-serif); color: var(--color-primary); } .job-role { font-size: 0.95rem; color: var(--color-text-sub); margin-top: 2px; } .job-dates { font-size: 0.85rem; color: var(--color-text-sub); white-space: nowrap; } .job-responsibilities { list-style: disc; padding-left: 1.25rem; margin-bottom: var(--space-md); } .job-responsibilities li { margin-bottom: var(--space-xs); font-size: 0.95rem; } /* Milestone Projects */ .milestone-projects { background-color: rgba(200, 146, 42, 0.08); border: 1px solid var(--color-muted); border-radius: var(--radius); padding: var(--space-md); } .milestone-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); font-weight: 700; margin-bottom: var(--space-sm); } .milestone-list { display: flex; flex-direction: column; gap: var(--space-sm); } .milestone-list li { font-size: 0.9rem; color: var(--color-text); line-height: 1.5; } .milestone-list strong { color: var(--color-primary); } /* ── Education ──────────────────────────────────────────────── */ .edu-card { margin-bottom: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-muted); } .edu-card:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .edu-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-xs); } .edu-institution { font-family: var(--font-serif); font-size: 1.05rem; color: var(--color-primary); } .edu-degree { font-size: 0.9rem; color: var(--color-text-sub); margin-top: 2px; } .edu-dates { font-size: 0.85rem; color: var(--color-text-sub); white-space: nowrap; } .edu-notes { font-size: 0.9rem; color: var(--color-text-sub); } /* ── Contact ────────────────────────────────────────────────── */ .contact-intro { margin-bottom: var(--space-lg); color: var(--color-text-sub); } .contact-links { display: flex; flex-direction: column; gap: var(--space-md); } .contact-links li { display: flex; align-items: baseline; gap: var(--space-sm); } .contact-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); font-weight: 700; min-width: 80px; } /* ── Footer ─────────────────────────────────────────────────── */ .site-footer { background-color: var(--color-primary); color: var(--color-muted); text-align: center; padding-block: var(--space-lg); font-size: 0.85rem; } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 767px) { /* * Progressive enhancement: nav-links are visible by default (no JS). * When JS loads, it adds .js to , which enables the hamburger pattern. */ .js .nav-toggle { display: flex; } .js .nav-links { display: none; flex-direction: column; gap: 0; position: absolute; top: var(--nav-h); left: 0; right: 0; background-color: var(--color-primary); padding: var(--space-sm) 0; box-shadow: 0 4px 8px rgba(0,0,0,0.3); } .js .nav-links.is-open { display: flex; } /* Non-JS mobile: stack nav links inline */ .nav-links { flex-wrap: wrap; gap: var(--space-sm); padding-block: var(--space-sm); width: 100%; } .job-header, .edu-header { flex-direction: column; } .job-dates, .edu-dates { order: -1; } .hero-links { flex-direction: column; align-items: center; } } @media (max-width: 480px) { .skills-grid { grid-template-columns: 1fr 1fr; } } /* ── Print ──────────────────────────────────────────────────── */ @media print { :root { --color-bg: #fff; --color-surface: #f5f5f5; --color-primary: #000; --color-accent: #333; --color-muted: #999; --color-text: #000; --color-text-sub:#333; } .site-header, .hero-links, .nav-toggle, .btn, .site-footer { display: none !important; } .hero { background-color: #fff; color: #000; padding-block: 1rem; text-align: left; } .hero-name { color: #000; font-size: 2rem; } .hero-title { color: #333; } .hero-tagline, .hero-eyebrow { color: #555; } .section, .section-alt { padding-block: 1.5rem; background-color: #fff; } .job-card { background-color: #f5f5f5; border-left-color: #333; page-break-inside: avoid; } .milestone-projects { background-color: #fafafa; border-color: #ccc; } a[href^="http"]::after, a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #555; } }