/* ========================================================================== EDUCATION — /education (design: assets/html/teamian-education-crm (2).html) Namespace: everything is scoped under .tedu. Loaded via $pageStyles in education.php, paired with assets/js/teamian-education.js. 1. :root, html and body collapse onto .tedu — on :root the mock's tokens would redefine --ink and --bg site-wide, and its body background would restyle the shared header and footer. 2. .reveal / .reveal-scale / .reveal-line became .tedu-rv / -scale / -line. main.js runs its own IntersectionObserver over every .reveal and toggles .is-visible, while this page's observer toggles .in. 3. @keyframes marquee became tedu-marquee. Keyframe names are global however the selectors are scoped, and style.css already defines `marquee` for the site's own ticker. 4. The mock's JS gate was a bare `js` class on . It is .tedu-js now: scoping had turned `.js .rise` into a descendant of the wrapper, which never matches, and a class called `js` on collides with anything. `body.loaded` moved onto the wrapper as `.tedu.loaded` for the same reason. 5. Every `Nfr` grid track became `minmax(0,Nfr)` (17 grids). ========================================================================== */ .tedu{ --bg: #F7F7F5; --bg-alt: #FFFFFF; --ink: #0A0A0A; --ink-2: #1a1a1a; --muted: #6b6b6b; --muted-2: #9a9a9a; --line: #E5E5E2; --line-strong: #d4d4d0; --teal: #0d9488; --teal-soft: rgba(13, 148, 136, 0.06); --radius: 0px; } .tedu{ scroll-behavior: smooth; } .tedu{ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'ss01', 'cv11'; /* clip, not hidden. This came off the mock's `body` rule, where it is harmless. On a regular wrapper div `overflow-x:hidden` forces overflow-y to compute to `auto`, which makes the element a scroll container and kills `position:sticky` for every descendant — the pinned diagram/stack just scrolled away. `clip` clips on the same axis without creating that scroll container, so sticky survives. */ overflow-x: clip; } .tedu a{ color: inherit; text-decoration: none; } /* ============ TOP MARK ============ */ .tedu .top-mark{ position: absolute; top: 32px; left: 48px; z-index: 10; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } .tedu .top-mark::before{ content: ""; display: inline-block; width: 6px; height: 6px; background: var(--teal); margin-right: 8px; vertical-align: middle; } /* ============ STAGE (sticky scroll section) ============ */ .tedu .stage{ position: relative; max-width: 1400px; margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap: 0; } .tedu .stage::before,.tedu .stage::after{ content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background-image: linear-gradient(to bottom, var(--line-strong) 50%, transparent 50%); background-size: 1px 8px; background-repeat: repeat-y; } .tedu .stage::before{ left: 48px; } .tedu .stage::after{ left: 50%; } .tedu .left-col{ padding: 0 60px 0 40px; } .tedu .right-col{ position: relative; } /* top:0 / 100vh in the mock, which had no site chrome — here that parks the diagram underneath the 76px fixed nav and clips its top. Offset by the nav and shortened by the same amount so it still fills what you can see. */ .tedu .sticky-diagram{ position: sticky; top: 76px; height: calc(100vh - 76px); display: flex; align-items: center; justify-content: center; } /* ============ SECTIONS in left column ============ */ .tedu .section{ min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 100px 0; } .tedu .section.hero{ min-height: 100vh; } .tedu .eyebrow{ font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; color: var(--teal); text-transform: uppercase; margin-bottom: 28px; display: inline-block; } .tedu h1.display{ font-size: clamp(40px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 500; color: var(--ink); margin-bottom: 28px; } .tedu h2.section-title{ font-size: clamp(34px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 500; color: var(--ink); margin-bottom: 24px; } .tedu .lead{ font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 480px; font-weight: 400; } .tedu .lead + .lead{ margin-top: 16px; } .tedu .cta-primary{ display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; padding: 15px 26px; font-size: 14px; font-weight: 500; letter-spacing: -0.005em; margin-top: 40px; transition: background 0.2s ease, transform 0.15s ease; } .tedu .cta-primary:hover{ background: #2a2a2a; transform: translateY(-1px); } .tedu .cta-primary .arrow{ display: inline-block; transition: transform 0.2s ease; } .tedu .cta-primary:hover .arrow{ transform: translateX(3px); } /* ============ ISOMETRIC STACK ============ */ .tedu .stack-wrap{ height: min(78vh, 760px); aspect-ratio: 620 / 820; width: auto; max-width: 100%; } .tedu .stack-svg{ width: 100%; height: 100%; overflow: visible; } /* Three nested groups per plate: .plate -> scroll-step position .plate-enter -> page-load entrance .plate-float -> ambient idle drift */ .tedu .plate{ transform: translate(0, 300px); transition: transform 1000ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--stagger, 0ms); } .tedu-js .tedu .plate-enter{ opacity: 0; transform-box: view-box; transform-origin: 310px 110px; transform: translateY(54px) scale(0.9); transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 1000ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--enter, 0ms); } .tedu .stack-svg.ready .plate-enter{ opacity: 1; transform: translateY(0) scale(1); } .tedu .plate-float{ animation: plateFloat 7.5s ease-in-out infinite; animation-delay: var(--float, 0s); } @keyframes plateFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .tedu .plate-slab{ fill: var(--ink); } .tedu .plate-face{ fill: #FFFFFF; stroke: var(--ink); stroke-width: 2.4; transition: fill 600ms ease; } .tedu .plate-inset{ fill: #EDEDEA; opacity: 0.9; transition: fill 600ms ease, opacity 600ms ease; } .tedu .plate-label{ font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -0.005em; fill: var(--ink); transition: fill 500ms ease; pointer-events: none; } /* Top plate — the institution itself */ .tedu .plate-1 .plate-face{ fill: var(--teal); } .tedu .plate-1 .plate-label{ fill: #ffffff; } /* Plate the current section is talking about */ .tedu .plate.is-active .plate-face{ fill: #F1FAF8; } .tedu .plate.is-active .plate-inset{ fill: rgba(13, 148, 136, 0.16); opacity: 1; } .tedu .plate.is-active .plate-label{ fill: var(--teal); } .tedu .plate-1.is-active .plate-face{ fill: var(--teal); } .tedu .plate-1.is-active .plate-label{ fill: #fff; } /* Step 0 — hero — settled stack */ .tedu .stack-svg[data-step="0"] .plate-1{ transform: translate(0px, 170px); } .tedu .stack-svg[data-step="0"] .plate-2{ transform: translate(0px, 315px); } .tedu .stack-svg[data-step="0"] .plate-3{ transform: translate(0px, 400px); } .tedu .stack-svg[data-step="0"] .plate-4{ transform: translate(0px, 485px); } /* Step 1 — Your Institution lifts clear */ .tedu .stack-svg[data-step="1"] .plate-1{ transform: translate(-16px, 100px); } .tedu .stack-svg[data-step="1"] .plate-2{ transform: translate(0px, 355px); } .tedu .stack-svg[data-step="1"] .plate-3{ transform: translate(0px, 445px); } .tedu .stack-svg[data-step="1"] .plate-4{ transform: translate(0px, 535px); } /* Step 2 — Enquiry snaps into place */ .tedu .stack-svg[data-step="2"] .plate-1{ transform: translate(0px, 115px); } .tedu .stack-svg[data-step="2"] .plate-2{ transform: translate(-16px, 260px); } .tedu .stack-svg[data-step="2"] .plate-3{ transform: translate(0px, 450px); } .tedu .stack-svg[data-step="2"] .plate-4{ transform: translate(0px, 540px); } /* Step 3 — Counselling snaps into place */ .tedu .stack-svg[data-step="3"] .plate-1{ transform: translate(0px, 115px); } .tedu .stack-svg[data-step="3"] .plate-2{ transform: translate(0px, 260px); } .tedu .stack-svg[data-step="3"] .plate-3{ transform: translate(-16px, 405px); } .tedu .stack-svg[data-step="3"] .plate-4{ transform: translate(0px, 560px); } /* Step 4 — Admission completes the stack */ .tedu .stack-svg[data-step="4"] .plate-1{ transform: translate(0px, 115px); } .tedu .stack-svg[data-step="4"] .plate-2{ transform: translate(0px, 255px); } .tedu .stack-svg[data-step="4"] .plate-3{ transform: translate(0px, 405px); } .tedu .stack-svg[data-step="4"] .plate-4{ transform: translate(-16px, 550px); } /* Parallax nudge on the whole diagram */ .tedu .stack-parallax{ will-change: transform; transform: translateY(var(--par, 0px)); } /* ============ WIDE SECTIONS ============ */ .tedu .wide{ max-width: 1400px; margin: 0 auto; padding: 140px 48px; } .tedu .wide-header{ max-width: 720px; margin-bottom: 80px; } .tedu .wide-header h2{ font-size: clamp(34px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 500; margin-top: 20px; } /* ============ APPLICANT RECORD (features) ============ */ .tedu .record{ display: grid; grid-template-columns:360px minmax(0,1fr); border: 1px solid var(--line); background: var(--bg-alt); } .tedu .record-rail{ display: flex; flex-direction: column; background: var(--bg); } .tedu .rec-item{ position: relative; display: grid; grid-template-columns:auto minmax(0,1fr); align-items: center; gap: 16px; width: 100%; padding: 20px 26px; border: 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); background: transparent; font-family: inherit; text-align: left; cursor: pointer; transition: background 0.3s ease, border-color 0.3s ease; } .tedu .rec-item:last-child{ border-bottom: 0; } .tedu .rec-item:hover{ background: rgba(13, 148, 136, 0.04); } .tedu .rec-item::before{ content: ""; position: absolute; top: -1px; bottom: -1px; left: 0; width: 2px; background: var(--teal); transform: scaleY(0); transform-origin: center; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .tedu .rec-item[aria-selected="true"]{ background: var(--bg-alt); border-right-color: transparent; } .tedu .rec-item[aria-selected="true"]::before{ transform: scaleY(1); } .tedu .rec-item:focus-visible{ outline: 2px solid var(--teal); outline-offset: -3px; } .tedu .rec-idx{ font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.1em; color: var(--muted-2); transition: color 0.3s ease; } .tedu .rec-item[aria-selected="true"] .rec-idx{ color: var(--teal); } .tedu .rec-meta{ display: flex; flex-direction: column; gap: 3px; min-width: 0; } .tedu .rec-name{ font-size: 15.5px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); } .tedu .rec-cat{ font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); } .tedu .record-panel{ position: relative; padding: 46px 48px 44px; min-height: 460px; } .tedu .rec-progress{ position: absolute; top: 0; left: 0; right: 0; height: 2px; overflow: hidden; } .tedu .rec-progress i{ display: block; height: 100%; width: 100%; background: var(--teal); transform: scaleX(0); transform-origin: left; } .tedu .rec-progress i.run{ animation: recProg 6s linear forwards; } @keyframes recProg { from { transform: scaleX(0); } to { transform: scaleX(1); } } .tedu .rec-panel{ display: none; } .tedu .rec-panel.is-shown{ display: block; animation: recIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes recIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .tedu .rec-tag{ display: inline-flex; align-items: center; gap: 7px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); margin-bottom: 18px; } .tedu .rec-tag::before{ content: ""; width: 5px; height: 5px; background: var(--teal); } .tedu .rec-panel h3{ font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -0.028em; font-weight: 500; margin-bottom: 14px; } .tedu .rec-desc{ font-size: 16px; line-height: 1.62; color: var(--muted); max-width: 580px; } .tedu .rec-fields{ margin-top: 38px; border-top: 1px solid var(--line); padding-top: 22px; } .tedu .rec-fields-label{ font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 6px; } .tedu .rec-fields dl{ max-width: 640px; } .tedu .rec-row{ display: grid; grid-template-columns:168px minmax(0,1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); } .tedu .rec-row:last-child{ border-bottom: 0; } .tedu .is-shown .rec-row{ animation: recRow 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 140ms); } @keyframes recRow { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .tedu .rec-row dt{ font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: 0.06em; color: var(--muted); padding-top: 2px; } .tedu .rec-row dd{ font-size: 14.5px; line-height: 1.5; color: var(--ink); } /* Institutions band */ .tedu .institutions{ background: var(--ink); color: #fff; padding: 130px 48px; } .tedu .institutions .wide-inner{ max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap: 80px; align-items: center; } .tedu .institutions .eyebrow{ color: rgba(255,255,255,0.5); } .tedu .institutions h2{ font-size: clamp(32px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 500; color: #fff; } .tedu .institutions p{ font-size: 16px; line-height: 1.65; color: rgba(255,255,255,0.65); } .tedu .institution-list{ display: grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap: 1px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); } .tedu .institution-item{ background: var(--ink); padding: 26px 24px; display: flex; align-items: flex-start; gap: 14px; } .tedu .institution-item .num{ font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--teal); letter-spacing: 0.1em; padding-top: 2px; min-width: 26px; } .tedu .institution-item .name{ font-size: 15px; font-weight: 500; color: #fff; margin-bottom: 4px; } .tedu .institution-item .role{ font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.5; } /* ============ THE CORRECTION (Purpose-Built vs Generic) ============ */ .tedu .compare{ max-width: 1300px; margin: 0 auto; padding: 140px 48px; } .tedu .specimen{ margin-top: 12px; border-top: 1px solid var(--ink); } .tedu .specimen-head{ display: grid; grid-template-columns:160px minmax(0,1fr) 44px minmax(0,1.5fr); gap: 32px; align-items: center; padding: 22px 0 22px; border-bottom: 1px solid var(--line); } .tedu .specimen-head .col-h{ font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); } .tedu .specimen-head .col-h.old{ grid-column: 2; } .tedu .specimen-head .col-h.new{ grid-column: 4; color: var(--teal); } .tedu .spec-list{ list-style: none; padding: 0; margin: 0; counter-reset: spec; } .tedu .spec-row{ display: grid; grid-template-columns:160px minmax(0,1fr) 44px minmax(0,1.5fr); gap: 32px; align-items: baseline; padding: 30px 0; border-bottom: 1px solid var(--line); position: relative; } .tedu .spec-row:last-child{ border-bottom: 0; } .tedu .spec-cat{ display: flex; align-items: baseline; gap: 14px; } .tedu .spec-num{ font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; color: var(--muted-2); font-weight: 500; transition: color 0.5s ease; } .tedu .spec-label{ font-size: 15px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink); text-transform: uppercase; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em; font-size: 12px; } /* Old (generic) — typewriter mono, dims and gets crossed */ .tedu .spec-old{ position: relative; display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 14px; line-height: 1.45; color: var(--muted); letter-spacing: -0.005em; padding: 2px 0; transition: color 0.6s ease, opacity 0.6s ease; } .tedu .spec-old::after{ content: ""; position: absolute; left: 0; right: 0; top: calc(50% + 1px); height: 1.6px; background: var(--teal); transform: scaleX(0); transform-origin: left center; transition: transform 0.75s cubic-bezier(0.7, 0, 0.3, 1); transition-delay: var(--strike-d, 0.15s); } .tedu .spec-row.in .spec-old{ color: var(--muted-2); opacity: 0.55; } .tedu .spec-row.in .spec-old::after{ transform: scaleX(1); } .tedu .spec-row.in .spec-num{ color: var(--teal); } /* Arrow: maps-to symbol */ .tedu .spec-arrow{ font-family: 'JetBrains Mono', monospace; font-size: 20px; line-height: 1; color: var(--teal); text-align: center; display: inline-block; opacity: 0; transform: translateX(-8px) scale(0.7); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1.4, 0.4, 1); transition-delay: 0.55s; } .tedu .spec-row.in .spec-arrow{ opacity: 1; transform: translateX(0) scale(1); } /* New (Teamian) — clean sans, fades in after strike */ .tedu .spec-new{ font-size: 17px; font-weight: 500; line-height: 1.4; letter-spacing: -0.015em; color: var(--ink); opacity: 0; transform: translateY(6px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: 0.7s; } .tedu .spec-row.in .spec-new{ opacity: 1; transform: translateY(0); } /* Row entry itself */ .tedu .spec-row{ opacity: 0; transform: translateY(14px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--row-d, 0s); } .tedu .spec-row.in{ opacity: 1; transform: translateY(0); } /* Signature: bottom summary line */ .tedu .specimen-foot{ margin-top: 44px; display: flex; align-items: baseline; gap: 18px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .tedu .specimen-foot .dot{ width: 6px; height: 6px; background: var(--teal); display: inline-block; transform: rotate(45deg); } /* FAQ */ .tedu .faq{ max-width: 1300px; margin: 0 auto; padding: 140px 48px; } .tedu .faq-list{ border-top: 1px solid var(--line); } .tedu .faq-item{ border-bottom: 1px solid var(--line); } .tedu .faq-q{ width: 100%; background: none; border: none; font-family: inherit; text-align: left; padding: 28px 0; font-size: 18px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .tedu .faq-q .plus{ font-size: 20px; font-weight: 300; color: var(--muted); transition: transform 0.3s ease; flex-shrink: 0; } .tedu .faq-item.open .plus{ transform: rotate(45deg); color: var(--teal); } .tedu .faq-a{ max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .tedu .faq-a-inner{ padding: 0 0 28px 0; max-width: 780px; font-size: 15.5px; line-height: 1.65; color: var(--muted); } .tedu .faq-item.open .faq-a{ max-height: 300px; } /* CTA band */ .tedu .cta-band{ background: var(--bg-alt); border-top: 1px solid var(--line); padding: 130px 48px; text-align: center; } .tedu .cta-band h2{ font-size: clamp(38px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 500; max-width: 800px; margin: 0 auto 20px; } .tedu .cta-band p{ font-size: 17px; color: var(--muted); max-width: 560px; margin: 0 auto 40px; line-height: 1.55; } /* Reveal animations */ .tedu-js .tedu .tedu-rv{ opacity: 0; transform: translateY(20px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .tedu-js .tedu .tedu-rv.in{ opacity: 1; transform: translateY(0); } .tedu-js .tedu .tedu-rv{ transition-delay: var(--d, 0s); } .tedu-js .tedu .tedu-rv.delay-1{ --d: 0.08s; } .tedu-js .tedu .tedu-rv.delay-2{ --d: 0.16s; } .tedu-js .tedu .tedu-rv.delay-3{ --d: 0.24s; } .tedu-js .tedu .tedu-rv.delay-4{ --d: 0.32s; } .tedu-js .tedu .tedu-rv.delay-5{ --d: 0.40s; } /* Scale-in reveal for stat blocks */ .tedu-js .tedu .tedu-rv-scale{ opacity: 0; transform: scale(0.94) translateY(14px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--d, 0s); } .tedu-js .tedu .tedu-rv-scale.in{ opacity: 1; transform: scale(1) translateY(0); } /* Draw-in horizontal line reveal */ .tedu .tedu-rv-line{ display: block; height: 1px; background: var(--line-strong); transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--d, 0s); } .tedu .tedu-rv-line.in{ transform: scaleX(1); } /* ============ MICRO-STAT (used in scroll stage) ============ */ .tedu .micro-stat{ display: flex; align-items: baseline; gap: 14px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); max-width: 460px; } .tedu .micro-stat-num{ font-size: clamp(38px, 3.6vw, 52px); line-height: 1; font-weight: 400; letter-spacing: -0.04em; color: var(--ink); font-feature-settings: 'tnum'; } .tedu .micro-stat-num em{ font-style: normal; color: var(--teal); } .tedu .micro-stat-label{ font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); max-width: 180px; line-height: 1.4; } /* Corner tick marker beside eyebrow */ .tedu .eyebrow-mark{ display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; } .tedu .eyebrow-mark::before{ content: ""; width: 22px; height: 1px; background: var(--teal); } .tedu .eyebrow-mark .eyebrow{ margin-bottom: 0; } /* Lead — tightened, single sentence */ .tedu .lead-tight{ font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--ink); max-width: 460px; font-weight: 400; letter-spacing: -0.01em; } .tedu .lead-tight .accent{ color: var(--teal); font-weight: 500; } /* ============ STAT STRIP (between stage and pill band) ============ */ .tedu .stat-strip{ max-width: 1400px; margin: 0 auto; padding: 100px 48px 40px; display: grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap: 0; border-top: 1px solid var(--line); } .tedu .stat-cell{ padding: 40px 32px; border-right: 1px solid var(--line); position: relative; } .tedu .stat-cell:last-child{ border-right: 0; } .tedu .stat-cell .stat-idx{ font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 20px; display: block; } .tedu .stat-cell .stat-num{ font-size: clamp(44px, 4.2vw, 64px); line-height: 0.98; font-weight: 400; letter-spacing: -0.04em; color: var(--ink); margin-bottom: 12px; font-feature-settings: 'tnum'; } .tedu .stat-cell .stat-num em{ font-style: normal; color: var(--teal); font-size: 0.55em; letter-spacing: -0.01em; padding-left: 2px; vertical-align: 0.2em; } .tedu .stat-cell .stat-label{ font-size: 14px; line-height: 1.45; color: var(--muted); max-width: 200px; } .tedu .stat-cell::after{ content: ""; position: absolute; left: 32px; bottom: 40px; width: 24px; height: 1px; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s; } .tedu .stat-cell.in::after{ transform: scaleX(1); } @media (max-width: 900px) { .tedu .stat-strip{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding: 60px 24px 20px; } .tedu .stat-cell{ padding: 28px 20px; border-bottom: 1px solid var(--line); } .tedu .stat-cell:nth-child(2){ border-right: 0; } .tedu .stat-cell:nth-child(3),.tedu .stat-cell:nth-child(4){ border-bottom: 0; } .tedu .stat-cell::after{ left: 20px; bottom: 28px; } } /* Progress indicator */ .tedu .progress-rail{ position: absolute; top: 15%; bottom: 15%; left: 48px; width: 1px; z-index: 5; pointer-events: none; } .tedu .progress-fill{ position: absolute; top: 0; left: 0; right: 0; background: var(--teal); height: 0%; transition: height 0.3s ease; } .tedu .progress-dots{ position: absolute; top: 0; left: -3px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .tedu .progress-dot{ width: 7px; height: 7px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 50%; transition: background 0.3s, border-color 0.3s; } .tedu .progress-dot.active{ background: var(--teal); border-color: var(--teal); } /* ============ PAGE LOAD SEQUENCE ============ */ .tedu-js .tedu .rise{ opacity: 0; transform: translateY(26px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--d, 0s); } .tedu-js .tedu.loaded .rise{ opacity: 1; transform: translateY(0); } /* ============ SCROLL PROGRESS ============ */ .tedu .scroll-progress{ position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; background: transparent; pointer-events: none; } .tedu .scroll-progress i{ display: block; height: 100%; width: 0%; background: var(--teal); } /* ============ WORD-BY-WORD SCROLL REVEAL ============ */ .tedu .wr-w{ opacity: 0.16; transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .tedu .wr-w.lit{ opacity: 1; } .tedu .institutions .wr-w{ opacity: 0.22; } /* ============ JOURNEY PILLS ============ */ .tedu .pill-band{ max-width: 1400px; margin: 0 auto; padding: 130px 48px 40px; } .tedu .pill-band .band-head{ max-width: 760px; margin-bottom: 64px; } .tedu .pill-band h2{ font-size: clamp(32px, 3.2vw, 44px); line-height: 1.07; letter-spacing: -0.03em; font-weight: 500; margin-top: 20px; } .tedu .pill-cloud{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 14px; max-width: 1000px; margin: 0 auto; padding: 20px 0 10px; } .tedu-js .tedu .pill-wrap{ opacity: 0; transform: translate(var(--dx, 0px), 30px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.95s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--d, 0s); margin-top: var(--my, 0px); } .tedu .pill-cloud.in .pill-wrap{ opacity: 1; transform: translate(0, 0); } .tedu .pill-wrap:hover{ transform: translateY(-5px); } .tedu .pill{ display: inline-block; padding: 13px 22px; font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; border-radius: 6px; animation: pillFloat 6s ease-in-out infinite; animation-delay: var(--fd, 0s); transform: rotate(var(--rot, 0deg)); } @keyframes pillFloat { 0%, 100% { transform: rotate(var(--rot, 0deg)) translateY(0); } 50% { transform: rotate(var(--rot, 0deg)) translateY(-7px); } } .tedu .pill-wrap:hover .pill{ animation-play-state: paused; } .tedu .p-dark{ background: var(--ink); color: #fff; } .tedu .p-teal{ background: var(--teal); color: #fff; } .tedu .p-soft{ background: rgba(13, 148, 136, 0.10); color: #0b7c72; } .tedu .p-line{ background: var(--bg-alt); color: var(--ink); border: 1px solid var(--line-strong); } /* ============ MARQUEE ============ */ .tedu .marquee{ overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-alt); padding: 20px 0; margin-top: 90px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .tedu .marquee-track{ display: flex; width: max-content; animation: tedu-marquee 38s linear infinite; } .tedu .marquee:hover .marquee-track{ animation-play-state: paused; } @keyframes tedu-marquee { to { transform: translateX(-50%); } } .tedu .marquee-track span{ display: inline-flex; align-items: center; gap: 14px; padding: 0 26px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .tedu .marquee-track span::after{ content: ""; width: 5px; height: 5px; background: var(--teal); transform: rotate(45deg); } /* ============ REDUCED MOTION ============ */ @media (prefers-reduced-motion: reduce) { .tedu{ scroll-behavior: auto; } .tedu .plate,.tedu .plate-enter,.tedu .plate-float,.tedu .pill,.tedu .pill-wrap,.tedu .marquee-track,.tedu .tedu-rv,.tedu .rise,.tedu .wr-w,.tedu .rec-panel,.tedu .rec-row,.tedu .rec-progress i,.tedu .tedu-rv-scale,.tedu .tedu-rv-line,.tedu .spec-row,.tedu .spec-old,.tedu .spec-old::after,.tedu .spec-arrow,.tedu .spec-new{ animation: none !important; transition: none !important; } .tedu .plate-enter,.tedu .pill-wrap{ opacity: 1 !important; transform: none !important; } .tedu .wr-w{ opacity: 1 !important; } .tedu .tedu-rv,.tedu .rise,.tedu .tedu-rv-scale{ opacity: 1 !important; transform: none !important; } .tedu .tedu-rv-line{ transform: scaleX(1) !important; } .tedu .stack-parallax{ transform: none !important; } .tedu .spec-row{ opacity: 1 !important; transform: none !important; } .tedu .spec-old{ opacity: 0.55 !important; color: var(--muted-2) !important; } .tedu .spec-old::after{ transform: scaleX(1) !important; } .tedu .spec-arrow,.tedu .spec-new{ opacity: 1 !important; transform: none !important; } } /* ============ RESPONSIVE ============ */ @media (max-width: 900px) { .tedu .top-mark{ left: 24px; top: 24px; } .tedu .stage{ padding: 0 24px; grid-template-columns:minmax(0,1fr); } .tedu .stage::before{ display: none; } .tedu .stage::after{ display: none; } .tedu .left-col{ padding: 0; } .tedu .right-col{ order: -1; } .tedu .sticky-diagram{ position: relative; height: 60vh; top: auto; } .tedu .stack-wrap{ height: auto; width: 100%; max-width: 380px; } .tedu .section{ min-height: auto; padding: 60px 0; } .tedu .section.hero{ min-height: 90vh; padding-top: 100px; } .tedu .wide,.tedu .compare,.tedu .faq{ padding: 80px 24px; } .tedu .institutions,.tedu .cta-band{ padding: 80px 24px; } .tedu .institutions .wide-inner{ grid-template-columns:minmax(0,1fr); gap: 40px; } .tedu .record{ grid-template-columns:minmax(0,1fr); } .tedu .rec-item{ border-right: 0; padding: 18px 20px; } .tedu .rec-item:last-child{ border-bottom: 1px solid var(--line); } .tedu .record-panel{ padding: 30px 24px 34px; min-height: 0; } .tedu .rec-row{ grid-template-columns:minmax(0,1fr); gap: 4px; } .tedu .compare-grid{ grid-template-columns:minmax(0,1fr); } .tedu .specimen-head{ display: none; } .tedu .spec-row{ grid-template-columns:minmax(0,1fr); gap: 10px; padding: 24px 0; } .tedu .spec-cat{ gap: 12px; } .tedu .spec-arrow{ text-align: left; transform: none; transition-delay: 0.4s; } .tedu .spec-row.in .spec-arrow{ transform: none; } .tedu .spec-old{ font-size: 13px; } .tedu .spec-new{ font-size: 15.5px; } .tedu .specimen-foot{ margin-top: 28px; font-size: 10.5px; letter-spacing: 0.12em; } .tedu .institution-list{ grid-template-columns:minmax(0,1fr); } .tedu .progress-rail{ display: none; } .tedu .wide-header{ margin-bottom: 40px; } .tedu .pill-band{ padding: 80px 24px 20px; } .tedu .pill-band .band-head{ margin-bottom: 40px; } .tedu .pill-cloud{ gap: 12px 10px; } .tedu .pill{ padding: 11px 16px; font-size: 13px; } .tedu .pill-wrap{ --my: 0px !important; } .tedu .marquee{ margin-top: 56px; } .tedu .stack-parallax{ transform: none !important; } }