/* ========================================================= Experience V2 — preview-only, style-only redesign of the Experience page in the approved Home V2 / About V2 / Work V2 / Project Detail V2 visual language. Loaded ONLY by templates/main/experience_v2.html (served at /experience-v2/), alongside static/css/home_v2.css (unmodified, loaded first in that template's for the shared tokens/ reset/nav/footer/preview-flag classes — see home_v2.css for --v2-navy, --v2-orange, --v2-muted, --v2-border, --v2-container, --v2-gutter, --v2-section-padding). Every selector below is prefixed .experience-v2-*, so this file cannot affect Home V2, About V2, Work V2, Project Detail V2, or any other page even if it were ever accidentally linked from one. None of those approved templates/CSS files are modified by this file or by adding it. Expand/collapse behavior comes from the unmodified static/js/edu-accordion.js, driven purely by data-accordion-toggle / data-accordion-card / aria-expanded / aria-controls — no styling here is required for it to work. ========================================================= */ /* ---------- Hero (text-only) ---------- */ .experience-v2-hero { padding-top: 64px; padding-bottom: 40px; } .experience-v2-hero-heading { font-family: "Playfair Display", serif; font-weight: 700; font-size: 34px; line-height: 1.2; letter-spacing: -0.01em; color: var(--v2-navy); margin: 16px 0 20px; } .experience-v2-hero-text { font-size: 17px; line-height: 1.65; color: var(--v2-muted); max-width: 750px; margin: 0; } @media (min-width: 900px) { .experience-v2-hero { padding-top: 88px; padding-bottom: 48px; } .experience-v2-hero-heading { font-size: 44px; } } /* ---------- Groups ---------- */ .experience-v2-section { padding-bottom: 64px; } .experience-v2-group { margin-top: 48px; } .experience-v2-group:first-child { margin-top: 0; } .experience-v2-group-heading { font-family: "Playfair Display", serif; font-weight: 700; font-size: 22px; color: var(--v2-navy); margin: 0 0 24px; } .experience-v2-empty { font-size: 14px; color: var(--v2-muted); } /* ---------- Timeline ---------- */ .experience-v2-timeline { list-style: none; margin: 0; padding-left: 24px; position: relative; } .experience-v2-timeline::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: var(--v2-border); } .experience-v2-item { position: relative; margin-bottom: 36px; } .experience-v2-item:last-child { margin-bottom: 0; } .experience-v2-dot { position: absolute; left: -24px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--v2-orange); box-shadow: 0 0 0 3px #ffffff; } .experience-v2-item-inner { display: flex; flex-direction: column; gap: 12px; } @media (min-width: 820px) { .experience-v2-item-inner { flex-direction: row; align-items: flex-start; gap: 28px; } .experience-v2-meta { flex: 0 0 200px; } .experience-v2-role { flex: 1 1 auto; min-width: 0; } } /* ---------- Meta (date/period, location) ---------- */ .experience-v2-meta { display: flex; flex-direction: column; gap: 4px; } .experience-v2-period { font-weight: 700; font-size: 14px; color: var(--v2-navy); } .experience-v2-location { font-size: 13px; color: var(--v2-muted); } .experience-v2-employment-type { display: inline-block; margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--v2-muted); } /* ---------- Role card ---------- */ .experience-v2-role { background: #ffffff; border: 1px solid var(--v2-border); border-radius: 10px; transition: border-color 0.15s ease; } .experience-v2-role.is-open { border-color: var(--v2-orange); } .experience-v2-role-heading { margin: 0; } .experience-v2-role-header { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; } .experience-v2-logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 56px; height: 48px; } .experience-v2-logo img { max-width: 56px; max-height: 48px; width: auto; height: auto; object-fit: contain; } .experience-v2-header-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .experience-v2-role-title { font-family: "Playfair Display", serif; font-weight: 700; font-size: 17px; color: var(--v2-navy); line-height: 1.3; } .experience-v2-company-line { font-size: 13px; color: var(--v2-muted); } .experience-v2-chev { flex: 0 0 auto; width: 18px; height: 18px; color: var(--v2-muted); transition: transform 0.2s ease; } .experience-v2-role-header[aria-expanded="true"] .experience-v2-chev { transform: rotate(180deg); } .experience-v2-panel { overflow: hidden; max-height: 0; transition: max-height 0.25s ease; } .experience-v2-panel-inner { margin: 0 18px; padding: 16px 0 20px; border-top: 1px solid var(--v2-border); } .experience-v2-summary { font-size: 14px; line-height: 1.65; color: var(--v2-ink); margin: 0 0 14px; } .experience-v2-achievements { margin: 0 0 14px; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; } .experience-v2-achievements li { font-size: 14px; line-height: 1.6; color: var(--v2-ink); } .experience-v2-achievements strong { color: var(--v2-navy); } .experience-v2-technologies { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .experience-v2-tech-tag { font-size: 12px; font-weight: 600; color: var(--v2-muted); background: #fafafa; border: 1px solid var(--v2-border); border-radius: 6px; padding: 3px 9px; } .experience-v2-project-link { display: inline-block; font-size: 13px; font-weight: 600; color: var(--v2-orange); } .experience-v2-project-link:hover { text-decoration: underline; }