/* ========================================================= Education V2 — preview-only, style-only redesign of the Education page in the approved Home V2 / About V2 / Work V2 / Project Detail V2 / Experience V2 visual language. Loaded ONLY by templates/main/education_v2.html (served at /education-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 .education-v2-*, so this file cannot affect Home V2, About V2, Work V2, Project Detail V2, Experience 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. Two functional (non-visual) hooks are intentionally kept from the old page so its existing, unmodified JS keeps working: data-accordion-toggle / data-accordion-card (edu-accordion.js — attribute-only, not styled here) and the literal "gp-tab" / "is-active" class names + data-tabs / data-target attributes (edu-tabs.js — those specific class names ARE required by that script, so this file styles them via the paired .education-v2-gp-tab / .education-v2-gp-section classes instead of restyling "gp-tab"/"gp-section" directly). ========================================================= */ /* ---------- Hero (text-only) ---------- */ .education-v2-hero { padding-top: 64px; padding-bottom: 40px; } .education-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 0; } @media (min-width: 900px) { .education-v2-hero { padding-top: 88px; padding-bottom: 48px; } .education-v2-hero-heading { font-size: 44px; } } .education-v2-section { padding-bottom: 64px; } .education-v2-empty { font-size: 14px; color: var(--v2-muted); } /* ---------- Timeline ---------- */ .education-v2-timeline { list-style: none; margin: 0; padding-left: 24px; position: relative; } .education-v2-timeline::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: var(--v2-border); } .education-v2-item { position: relative; margin-bottom: 36px; } .education-v2-item:last-child { margin-bottom: 0; } .education-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; } .education-v2-item-inner { display: flex; flex-direction: column; gap: 12px; } @media (min-width: 820px) { .education-v2-item-inner { flex-direction: row; align-items: flex-start; gap: 28px; } .education-v2-meta { flex: 0 0 200px; } .education-v2-entry { flex: 1 1 auto; min-width: 0; } } /* ---------- Meta (date/period, location) ---------- */ .education-v2-meta { display: flex; flex-direction: column; gap: 4px; } .education-v2-date { font-weight: 700; font-size: 14px; color: var(--v2-navy); } .education-v2-place { font-size: 13px; color: var(--v2-muted); } /* ---------- Entry card ---------- */ .education-v2-entry { background: #ffffff; border: 1px solid var(--v2-border); border-radius: 10px; transition: border-color 0.15s ease; } .education-v2-entry:has(.education-v2-entry-header[aria-expanded="true"]) { border-color: var(--v2-orange); } .education-v2-entry-heading { margin: 0; } .education-v2-entry-header { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; } .education-v2-logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 56px; height: 48px; } .education-v2-logo img { max-width: 56px; max-height: 48px; width: auto; height: auto; object-fit: contain; } .education-v2-header-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .education-v2-degree-title { font-family: "Playfair Display", serif; font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--v2-navy); } .education-v2-school-line { font-size: 13px; color: var(--v2-muted); } .education-v2-chev { flex: 0 0 auto; width: 18px; height: 18px; color: var(--v2-muted); transition: transform 0.2s ease; } .education-v2-entry-header[aria-expanded="true"] .education-v2-chev { transform: rotate(180deg); } .education-v2-panel { overflow: hidden; max-height: 0; transition: max-height 0.25s ease; } .education-v2-panel-inner { margin: 0 18px; padding: 16px 0 20px; border-top: 1px solid var(--v2-border); } .education-v2-bullets { margin: 0 0 14px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; } .education-v2-bullets li { font-size: 14px; line-height: 1.6; color: var(--v2-ink); } .education-v2-bullets b { color: var(--v2-navy); } .education-v2-attachment-link { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--v2-orange); } .education-v2-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .education-v2-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; } /* ---------- Nested sections (Graduation Project / Training & Certificates) ---------- */ .education-v2-nested-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--v2-border); } .education-v2-nested-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .education-v2-nested-heading { margin: 0; } .education-v2-nested-header { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 4px 14px; border-left: 2px solid var(--v2-orange); background: none; border-top: 0; border-right: 0; border-bottom: 0; text-align: left; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--v2-navy); } .education-v2-nested-header--static { cursor: default; } .education-v2-nested-header b { color: var(--v2-navy); } .education-v2-nested-chev { flex: 0 0 auto; width: 16px; height: 16px; color: var(--v2-muted); transition: transform 0.2s ease; } .education-v2-nested-header[aria-expanded="true"] .education-v2-nested-chev { transform: rotate(180deg); } .education-v2-nested-panel { overflow: hidden; max-height: 0; transition: max-height 0.25s ease; } .education-v2-nested-panel-inner { padding: 14px 0 4px 16px; border-left: 2px solid var(--v2-border); margin-left: 0; } .education-v2-gp-lead { font-size: 13px; font-style: italic; color: var(--v2-muted); margin: 0 0 14px; } /* Graduation Project tabs — "gp-tab"/"is-active"/data-tabs/data-target are the literal hooks static/js/edu-tabs.js depends on; styled here via the paired .education-v2-gp-tab / .education-v2-gp-section classes. */ .education-v2-gp-tabs-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--v2-border); } .education-v2-gp-tab { font-size: 12px; font-weight: 600; color: var(--v2-muted); background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 10px; cursor: pointer; margin-bottom: -1px; } .education-v2-gp-tab.is-active { color: var(--v2-orange); border-bottom-color: var(--v2-orange); } .education-v2-gp-section { font-size: 13px; } .education-v2-gp-overview-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } .education-v2-gp-overview-title { font-family: "Playfair Display", serif; font-weight: 700; font-size: 15px; color: var(--v2-navy); margin: 0 0 6px; } .education-v2-gp-overview-body { font-size: 13px; line-height: 1.6; color: var(--v2-ink); margin: 0; } .education-v2-gp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .education-v2-gp-action-btn { font-size: 12px; font-weight: 600; color: var(--v2-navy); border: 1px solid var(--v2-border); border-radius: 6px; padding: 5px 10px; } .education-v2-gp-action-btn:hover { border-color: var(--v2-orange); color: var(--v2-orange); } .education-v2-gp-overview-side { display: flex; flex-direction: column; gap: 8px; } .education-v2-gp-brand-card { margin: 0; } .education-v2-gp-brand-card img { width: 100%; max-width: 220px; height: auto; border-radius: 8px; border: 1px solid var(--v2-border); display: block; } .education-v2-gp-brand-card figcaption { font-size: 11px; color: var(--v2-muted); margin-top: 6px; } .education-v2-gp-badges { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .education-v2-gp-badges li { font-size: 11px; color: var(--v2-muted); background: #fafafa; border: 1px solid var(--v2-border); border-radius: 6px; padding: 2px 8px; } @media (min-width: 700px) { .education-v2-gp-overview-grid { grid-template-columns: 1fr 220px; } } .education-v2-gp-tech-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } .education-v2-gp-facts { margin: 0; display: flex; flex-direction: column; gap: 6px; } .education-v2-gp-facts dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--v2-muted); margin: 8px 0 0; } .education-v2-gp-facts dt:first-child { margin-top: 0; } .education-v2-gp-facts dd { font-size: 13px; color: var(--v2-navy); margin: 2px 0 0; } .education-v2-gp-tech-visuals { display: flex; flex-wrap: wrap; gap: 10px; } .education-v2-gp-tech-card { margin: 0; width: 140px; } @media (min-width: 700px) { .education-v2-gp-tech-grid { grid-template-columns: 1fr 1fr; } } .education-v2-gp-media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 700px) { .education-v2-gp-media-grid { grid-template-columns: repeat(4, 1fr); } } .education-v2-gp-media-item { display: block; position: relative; } .education-v2-gp-media-item img, .education-v2-gp-tech-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; border: 1px solid var(--v2-border); display: block; } .education-v2-gp-media-item figcaption, .education-v2-gp-tech-card figcaption { font-size: 11px; color: var(--v2-muted); margin-top: 4px; } .education-v2-gp-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; background: rgba(27, 42, 74, 0.85); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 11px; } .education-v2-gp-link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .education-v2-gp-link-list li { font-size: 13px; color: var(--v2-muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; } .education-v2-gp-link-list a { color: var(--v2-orange); font-weight: 600; } .education-v2-gp-link-list a:hover { text-decoration: underline; } /* ---------- In memoriam ---------- */ .education-v2-in-memory { display: flex; gap: 14px; margin-top: 16px; padding: 14px; background: #fafafa; border-radius: 8px; align-items: flex-start; } .education-v2-in-memory-photo img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; } .education-v2-in-memory-text h4 { font-family: "Playfair Display", serif; font-weight: 700; font-size: 13px; color: var(--v2-navy); margin: 0 0 4px; } .education-v2-in-memory-text p { font-size: 13px; line-height: 1.6; color: var(--v2-ink); margin: 0; } .education-v2-in-memory-text a { color: var(--v2-orange); font-weight: 600; } /* ---------- Training & Certificates ---------- */ .education-v2-achv-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 700px) { .education-v2-achv-grid { grid-template-columns: repeat(2, 1fr); } } .education-v2-achv-card { background: #ffffff; border: 1px solid var(--v2-border); border-radius: 8px; padding: 14px; } .education-v2-achv-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; } .education-v2-achv-title { font-family: "Playfair Display", serif; font-weight: 700; font-size: 14px; color: var(--v2-navy); margin: 0; } .education-v2-achv-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .education-v2-chip { font-size: 11px; font-weight: 600; color: var(--v2-muted); background: #fafafa; border: 1px solid var(--v2-border); border-radius: 6px; padding: 2px 8px; } .education-v2-chip--type { background: none; border: 0; border-radius: 0; padding: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--v2-orange); } .education-v2-achv-brief { font-size: 12px; line-height: 1.6; color: var(--v2-ink); margin: 0 0 8px; } .education-v2-achv-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--v2-orange); transition: gap 0.15s ease, color 0.15s ease; } .education-v2-achv-link:hover { color: #c8551f; gap: 7px; text-decoration: underline; }