{"id":2415,"date":"2026-09-29T16:36:02","date_gmt":"2026-09-29T16:36:02","guid":{"rendered":"https:\/\/gamma.interfaceedu.com\/thrive-v2\/"},"modified":"2026-09-29T16:36:02","modified_gmt":"2026-09-29T16:36:02","slug":"thrive-v2","status":"publish","type":"page","link":"https:\/\/gamma.interfaceedu.com\/zh\/thrive-v2\/","title":{"rendered":"THRIVE (redesign sample)"},"content":{"rendered":"<div class=\"tv2\">\n<style>\n  \/* \u4e3b\u9898\u4f1a\u5728\u5185\u5bb9\u4e0a\u65b9\u8f93\u51fa\u9875\u9762\u6807\u9898\uff0c\u548c hero \u91cc\u7684 THRIVE \u91cd\u590d\uff0c\u8fd9\u91cc\u9690\u85cf\u6389 *\/\n  .page-header{display:none !important;}\n  .tv2{font-family:\"Josefin Sans\",-apple-system,\"Noto Sans SC\",sans-serif;color:#143852;\n    --gold:#967039; --navy:#143852; --cream:#f4ead4;}\n  .tv2 *{box-sizing:border-box;}\n  .tv2 .wrap{max-width:1140px;margin:0 auto;padding:0 24px;}\n\n  \/* ---- hero ---- *\/\n  .tv2 .hero{background:var(--navy);color:#fff;padding:90px 0 0;\n    border-radius:0 0 0 150px;overflow:hidden;}\n  .tv2 .hero h1{font-size:64px;letter-spacing:.06em;margin:0 0 18px;font-weight:600;}\n  .tv2 .hero .lede{font-size:22px;line-height:1.55;max-width:620px;opacity:.9;margin:0 0 54px;}\n  .tv2 .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;\n    border-top:1px solid rgba(255,255,255,.18);}\n  .tv2 .stat{padding:30px 22px 44px;border-right:1px solid rgba(255,255,255,.18);}\n  .tv2 .stat:last-child{border-right:none;}\n  .tv2 .stat b{display:block;font-size:40px;line-height:1;color:var(--cream);margin-bottom:9px;font-weight:600;}\n  .tv2 .stat span{font-size:14px;line-height:1.5;opacity:.72;display:block;}\n\n  \/* ---- generic section ---- *\/\n  .tv2 section{padding:84px 0;}\n  .tv2 .eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;\n    color:var(--gold);font-weight:600;margin-bottom:14px;}\n  .tv2 h2{font-size:38px;line-height:1.25;margin:0 0 20px;font-weight:600;}\n  .tv2 .sub{font-size:19px;line-height:1.65;color:#5d6570;max-width:640px;margin:0 0 50px;}\n\n  \/* ---- the three blocks (was one wall of prose) ---- *\/\n  .tv2 .three{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;}\n  .tv2 .blk{border-top:3px solid var(--gold);padding-top:22px;}\n  .tv2 .blk h3{font-size:20px;line-height:1.35;margin:0 0 12px;font-weight:600;}\n  .tv2 .blk p{font-size:15.5px;line-height:1.75;color:#5d6570;margin:0;}\n\n  \/* ---- click to expand: the headline is always visible, the detail is not ---- *\/\n  \/* the theme forces display on children, which defeats the native collapse \u2014 override it *\/\n  .tv2 details:not([open]) > *:not(summary){display:none !important;}\n  .tv2 details{margin-top:10px;}\n  .tv2 details summary{list-style:none;cursor:pointer;font-size:14px;color:var(--gold);\n    font-weight:600;display:inline-flex;align-items:center;gap:7px;padding:4px 0;}\n  .tv2 details summary::-webkit-details-marker{display:none;}\n  .tv2 details summary::after{content:\"+\";font-size:17px;line-height:1;}\n  .tv2 details[open] summary::after{content:\"\\2212\";}\n  .tv2 details[open] summary span{opacity:.55;}\n  .tv2 details .body{font-size:15.5px;line-height:1.75;color:#5d6570;padding-top:10px;}\n\n  \/* services become titles only until asked *\/\n  .tv2 .svc details summary{color:var(--navy);font-weight:600;font-size:17px;\n    justify-content:space-between;width:100%;}\n  .tv2 .svc details summary::after{color:var(--gold);}\n  .tv2 .svc details .body{font-size:15px;padding-top:12px;}\n\n  \/* ---- pull quote ---- *\/\n  .tv2 .pull{background:var(--cream);padding:70px 0;margin:0;}\n  .tv2 .pull q{display:block;max-width:880px;margin:0 auto;font-size:34px;line-height:1.4;\n    color:var(--navy);text-align:center;quotes:none;font-weight:500;}\n  .tv2 .pull .who{text-align:center;margin-top:22px;font-size:14px;\n    letter-spacing:.14em;text-transform:uppercase;color:var(--gold);}\n\n  \/* ---- what it does ---- *\/\n  .tv2 .chips{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 34px;}\n  .tv2 .chip{border:1px solid #d8cdb8;border-radius:999px;padding:9px 22px;\n    font-size:15px;color:var(--navy);}\n  .tv2 .result{border-left:4px solid var(--gold);padding:20px 26px;background:#fbf8f2;\n    font-size:18px;line-height:1.7;color:var(--navy);max-width:760px;}\n\n  \/* ---- services ---- *\/\n  .tv2 .svc{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#e8e0d0;\n    border:1px solid #e8e0d0;}\n  .tv2 .svc > div{background:#fff;padding:30px 32px;}\n  .tv2 .svc h4{font-size:17px;margin:0 0 9px;font-weight:600;color:var(--navy);}\n  .tv2 .svc p{font-size:15px;line-height:1.7;color:#5d6570;margin:0;}\n\n  \/* ---- testimonials: strongest line visible, full quote one click away ---- *\/\n  .tv2 .voices{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 40px;}\n  .tv2 .voice{border-top:1px solid #e0d8c6;padding-top:22px;}\n  .tv2 .voice .line{font-size:19px;line-height:1.55;color:var(--navy);margin:0 0 12px;}\n  .tv2 .voice .who{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);}\n  .tv2 .voice details .body{font-size:15.5px;line-height:1.75;color:#5d6570;font-style:italic;}\n\n  .tv2 .note{background:#143852;color:#fff;padding:26px 0;font-size:14px;}\n  .tv2 .note .wrap{display:flex;gap:14px;align-items:baseline;}\n  .tv2 .note b{color:var(--cream);}\n\n  \/* ---- restrained motion: one fade-and-rise on entry, nothing that loops ---- *\/\n  .tv2 .rv{opacity:0;transform:translateY(16px);\n    transition:opacity .75s ease, transform .75s cubic-bezier(.22,.61,.36,1);}\n  .tv2 .rv.in{opacity:1;transform:none;}\n  .tv2 .blk,.tv2 .chip,.tv2 .svc > div,.tv2 details summary{transition:all .25s ease;}\n  .tv2 .blk:hover{border-top-color:var(--navy);}\n  .tv2 .chip:hover{background:var(--cream);border-color:var(--gold);}\n  .tv2 .svc > div:hover{background:#fbf8f2;}\n  .tv2 details summary:hover{opacity:.7;}\n  .tv2 details .body{overflow:hidden;transition:height .32s ease, opacity .32s ease;}\n  @media (prefers-reduced-motion: reduce){\n    .tv2 .rv{opacity:1;transform:none;transition:none;}\n    .tv2 details .body{transition:none;}\n  }\n\n  @media(max-width:900px){\n    .tv2 .hero h1{font-size:42px;} .tv2 h2{font-size:28px;}\n    .tv2 .stats{grid-template-columns:repeat(2,1fr);}\n    .tv2 .three,.tv2 .svc,.tv2 .voices{grid-template-columns:1fr;}\n    .tv2 .pull q{font-size:24px;}\n    .tv2 section{padding:56px 0;}\n  }\n<\/style>\n\n<div class=\"note\"><div class=\"wrap\">\n  <b>Sample<\/b>\n  <span>A redesign of the THRIVE page, for comparison with the current one. Nothing new has been\n  written \u2014 the copy is drawn from the existing page, shortened and reordered.<\/span>\n<\/div><\/div>\n\n<div class=\"hero\">\n  <div class=\"wrap\">\n    <h1>THRIVE<\/h1>\n    <p class=\"lede\">The transition after college admission is often where uncertainty begins.<\/p>\n    <div class=\"stats\">\n      <div class=\"stat\"><b>1,700+<\/b><span>families supported, across four continents<\/span><\/div>\n      <div class=\"stat\"><b>15&ndash;20<\/b><span>students per counselor, versus an industry average of 60&ndash;100<\/span><\/div>\n      <div class=\"stat\"><b>50+<\/b><span>of the world&rsquo;s most selective universities represented<\/span><\/div>\n      <div class=\"stat\"><b>20<\/b><span>years guiding students from middle school through young adulthood<\/span><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<section>\n  <div class=\"wrap\">\n    <div class=\"eyebrow\">Who THRIVE is for<\/div>\n    <h2>Accomplished \u2014 and unsure what comes next<\/h2>\n    <p class=\"sub\">For many students, getting into a top university has been the defining goal for years. Their schedules, achievements and identities were built around reaching it.<\/p>\n    <div class=\"three\">\n      <div class=\"blk\">\n        <h3>The goal that defined everything<\/h3>\n        <p>Getting in was the milestone everything was built around.<\/p>\n        <details><summary><span>More<\/span><\/summary>\n          <div class=\"body\">Their schedules, achievements and identities were built around reaching that\n          milestone. But once they arrive, many begin to ask a more difficult question: what comes next?<\/div>\n        <\/details>\n      <\/div>\n      <div class=\"blk\">\n        <h3>Success without direction<\/h3>\n        <p>Highly accomplished, with no clear sense of where it leads.<\/p>\n        <details><summary><span>More<\/span><\/summary>\n          <div class=\"body\">They have learned how to succeed academically, yet many have not had the\n          opportunity to fully explore who they are, what they value, or how they want to contribute in\n          the world.<\/div>\n        <\/details>\n      <\/div>\n      <div class=\"blk\">\n        <h3>Means without purpose<\/h3>\n        <p>Financial security creates freedom, but not direction.<\/p>\n        <details><summary><span>More<\/span><\/summary>\n          <div class=\"body\">For families of significant means this challenge is amplified. Without\n          intentional development, students can struggle to build confidence, independence and ownership\n          over their future.<\/div>\n        <\/details>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<div class=\"pull\">\n  <q>What comes next?<\/q>\n  <div class=\"who\">The question THRIVE was created to answer<\/div>\n<\/div>\n\n<section>\n  <div class=\"wrap\">\n    <div class=\"eyebrow\">What THRIVE does<\/div>\n    <h2>From externally driven achievement to internally grounded direction<\/h2>\n    <p class=\"sub\">Part of Interface's broader Rising Gen Development framework.<\/p>\n    <div class=\"chips\">\n      <span class=\"chip\">Mentorship<\/span>\n      <span class=\"chip\">Coaching<\/span>\n      <span class=\"chip\">Experiential opportunities<\/span>\n      <span class=\"chip\">Professional guidance<\/span>\n    <\/div>\n    <div class=\"result\">\n      The result is not simply stronger professional preparation, but a young adult who moves\n      forward with greater purpose, maturity and readiness for the opportunities ahead.\n    <\/div>\n  <\/div>\n<\/section>\n\n<section style=\"background:#fbf8f2;\">\n  <div class=\"wrap\">\n    <div class=\"eyebrow\">Services<\/div>\n    <h2>Eight ways we support the transition<\/h2>\n    <p class=\"sub\" style=\"margin-bottom:26px;\">Tap any of the eight to see what it involves.<\/p>\n    <div class=\"svc\">\n      <div><details><summary><span>Career &amp; Direction Coaching<\/span><\/summary><div class=\"body\">Individualized guidance to help students clarify strengths, interests and long-term goals.<\/div><\/details><\/div>\n      <div><details><summary><span>Professional Development &amp; Internship Strategy<\/span><\/summary><div class=\"body\">Identifying internships, research opportunities, mentorship pathways and career-building experiences.<\/div><\/details><\/div>\n      <div><details><summary><span>Leadership &amp; Experiential Development<\/span><\/summary><div class=\"body\">Hands-on opportunities that strengthen initiative, communication, resilience and leadership capacity.<\/div><\/details><\/div>\n      <div><details><summary><span>Academic Performance &amp; Executive Function<\/span><\/summary><div class=\"body\">Targeted support to improve focus, accountability, organisation and sustainable high performance.<\/div><\/details><\/div>\n      <div><details><summary><span>Purpose &amp; Identity Development<\/span><\/summary><div class=\"body\">Structured coaching and reflection to build self-awareness, confidence and internal motivation.<\/div><\/details><\/div>\n      <div><details><summary><span>Mentorship &amp; Network Access<\/span><\/summary><div class=\"body\">Connection to experienced mentors, professionals, entrepreneurs and rising-generation leaders.<\/div><\/details><\/div>\n      <div><details><summary><span>Family Partnership &amp; Transition Support<\/span><\/summary><div class=\"body\">Guidance for families navigating independence, communication, responsibility and stewardship.<\/div><\/details><\/div>\n      <div><details><summary><span>Long-Term Rising Gen Development<\/span><\/summary><div class=\"body\">Ongoing support building the human, social, intellectual and financial readiness future leadership requires.<\/div><\/details><\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<section>\n  <div class=\"wrap\">\n    <div class=\"eyebrow\">Voices<\/div>\n    <h2>Real transformation is best described by the families and students who experience it<\/h2>\n    <p class=\"sub\" style=\"margin-bottom:44px;\">All five testimonials are here &mdash; folded, not cut. The line that carries each one stays visible; the rest opens on request.<\/p>\n    <div class=\"voices\">\n      <div class=\"voice\">\n        <p class=\"line\">&ldquo;Interface helped me see my son as a person, not just a project.&rdquo;<\/p>\n        <div class=\"who\">Interface parent<\/div>\n        <details><summary><span>Full quote<\/span><\/summary><div class=\"body\">&ldquo;Before Interface, I assumed my job was to push. What I realized is that I needed to change. Listening differently, asking better questions, showing up without an agenda. Interface helped me see my son as a person, not just a project. He got into a great school. We also came out of it closer.&rdquo;<\/div><\/details>\n      <\/div>\n      <div class=\"voice\">\n        <p class=\"line\">&ldquo;I followed a path that felt safe but was never really mine.&rdquo;<\/p>\n        <div class=\"who\">Interface student<\/div>\n        <details><summary><span>Full quote<\/span><\/summary><div class=\"body\">&ldquo;I followed a path that felt safe but was never really mine. Interface pushed me to slow down and think about what I actually cared about, not what looked good on paper. Once I stopped building something impressive and started being honest about my interests, everything got easier to explain.&rdquo;<\/div><\/details>\n      <\/div>\n      <div class=\"voice\">\n        <p class=\"line\">&ldquo;What I noticed over time was how she approached difficulty.&rdquo;<\/p>\n        <div class=\"who\">Interface parent<\/div>\n        <details><summary><span>Full quote<\/span><\/summary><div class=\"body\">&ldquo;I wanted my daughter to develop a genuine sense of herself, not just a strong application. Interface gave her the space to do that. What I noticed over time was how she approached difficulty. She became deliberate, less impulsive. The hard moments ended up mattering just as much as the wins.&rdquo;<\/div><\/details>\n      <\/div>\n      <div class=\"voice\">\n        <p class=\"line\">&ldquo;Start early, and do fewer things well.&rdquo;<\/p>\n        <div class=\"who\">Interface student<\/div>\n        <details><summary><span>Full quote<\/span><\/summary><div class=\"body\">&ldquo;Interface worked with me to start early, and do fewer things well. I had time to explore without pressure, which made it easier to figure out what I actually wanted to commit to. By the time applications came around, I was not scrambling to pull everything together. I was just showcasing what I had already built.&rdquo;<\/div><\/details>\n      <\/div>\n      <div class=\"voice\">\n        <p class=\"line\">&ldquo;Interface helped me see that depth matters more than volume.&rdquo;<\/p>\n        <div class=\"who\">Interface student<\/div>\n        <details><summary><span>Full quote<\/span><\/summary><div class=\"body\">&ldquo;There was always pressure to do more. At some point I stopped listening to it. Interface helped me see that depth matters more than volume. Once I focused on things I genuinely cared about, the work got better and decisions got easier. I was not building an image. I was just doing the work.&rdquo;<\/div><\/details>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<div class=\"note\"><div class=\"wrap\">\n  <b>Not in this sample yet<\/b>\n  <span>Case studies and mentor profiles. If this direction works, the same treatment applies to\n  those and to the other service pages.<\/span>\n<\/div><\/div>\n<\/div>\n<script>\n(function(){\n  var root = document.querySelector('.tv2');\n  if (!root) return;\n  var still = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  \/* Smooth open\/close. The markup stays native <details>, so with JS off or\n     broken the sections still expand \u2014 they just snap instead of sliding. *\/\n  root.querySelectorAll('details').forEach(function(d){\n    var body = d.querySelector('.body'), sum = d.querySelector('summary');\n    if (!body || !sum || still) return;\n    var busy = false;\n    \/* Every step below is also driven by a timer, never by transitionend\n       alone. If the transition does not run \u2014 zero height, a background tab,\n       reduced motion forced mid-session \u2014 the section must still finish\n       opening or closing. A panel that will not close again is worse than\n       one that never animated. *\/\n    function settle(after){ setTimeout(after, 340); }\n    sum.addEventListener('click', function(e){\n      e.preventDefault();\n      if (busy) return;\n      busy = true;\n      if (d.open) {\n        body.style.height = body.scrollHeight + 'px';\n        void body.offsetHeight;                       \/\/ force the start value\n        body.style.height = '0px'; body.style.opacity = '0';\n        settle(function(){\n          d.open = false; body.style.height = ''; body.style.opacity = ''; busy = false;\n        });\n      } else {\n        d.open = true;\n        var target = body.scrollHeight;\n        body.style.height = '0px'; body.style.opacity = '0';\n        void body.offsetHeight;\n        body.style.height = target + 'px'; body.style.opacity = '1';\n        settle(function(){ body.style.height = 'auto'; busy = false; });\n      }\n    });\n  });\n\n  if (still) return;\n\n  \/* One fade-and-rise as each block first comes into view.\n     Two rules keep this from ever costing us the page:\n       - the class is added here, never in the HTML, so a script failure\n         leaves everything plainly visible;\n       - anything already on the first screen is never hidden at all. A blank\n         hero while an observer warms up is far worse than no animation. *\/\n  var items = [].slice.call(root.querySelectorAll(\n    '.stat, .eyebrow, h2, .sub, .blk, .pull q, .pull .who, .chip, .result, .svc > div, .voice'\n  )).filter(function(el){\n    return el.getBoundingClientRect().top > window.innerHeight * 0.85;\n  });\n  items.forEach(function(el){ el.classList.add('rv'); });\n\n  function show(el){\n    if (el.classList.contains('in')) return;\n    var sibs = [].slice.call(el.parentNode.children);\n    el.style.transitionDelay = Math.min(sibs.indexOf(el), 5) * 70 + 'ms';\n    el.classList.add('in');\n  }\n  function sweep(){\n    for (var i = items.length - 1; i >= 0; i--) {\n      if (items[i].getBoundingClientRect().top < window.innerHeight * 0.92) {\n        show(items[i]); items.splice(i, 1);\n      }\n    }\n  }\n  \/* Throttled on a timestamp rather than requestAnimationFrame: rAF is paused\n     in background tabs and by some automation, and a paused rAF here would\n     leave whole sections permanently invisible. *\/\n  var last = 0;\n  addEventListener('scroll', function(){\n    var now = Date.now();\n    if (now - last < 100) return;\n    last = now; sweep();\n  }, { passive: true });\n  addEventListener('resize', sweep, { passive: true });\n  addEventListener('load', sweep);\n  sweep();\n  setTimeout(sweep, 400);\n  \/* Last resort: if anything is somehow still hidden after five seconds,\n     show it. Nobody should lose content to a failed animation. *\/\n  setTimeout(function(){\n    items.forEach(function(el){ el.classList.add('in'); });\n    items.length = 0;\n  }, 5000);\n\n  \/* Count the headline numbers up once. Any non-digit part of the label\n     (the comma, the plus, the en dash range) is preserved exactly. The markup\n     already holds the final number, so if this never runs nothing is lost. *\/\n  if (!('IntersectionObserver' in window)) return;\n  root.querySelectorAll('.stat b').forEach(function(b){\n    var full = b.textContent, m = full.match(\/[\\d,]+\/);\n    \/* A range like 15-20 is left alone \u2014 counting one half of it up reads as\n       a glitch rather than an effect. *\/\n    if (!m || \/[\u2013\u2014-]\/.test(full)) return;\n    var end = parseInt(m[0].replace(\/,\/g, ''), 10);\n    var co = new IntersectionObserver(function(en){\n      if (!en[0].isIntersecting) return;\n      co.disconnect();\n      var t0 = Date.now();\n      var tick = setInterval(function(){\n        var p = Math.min((Date.now() - t0) \/ 900, 1);\n        b.textContent = full.replace(m[0],\n          Math.round(end * (1 - Math.pow(1 - p, 3))).toLocaleString('en-US'));\n        if (p >= 1) { clearInterval(tick); b.textContent = full; }\n      }, 40);\n      \/* These numbers are the page's factual claims. Whatever happens to the\n         animation, the real figure goes back on screen. *\/\n      setTimeout(function(){ clearInterval(tick); b.textContent = full; }, 1500);\n    }, { threshold: 0.5 });\n    co.observe(b);\n  });\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2415","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gamma.interfaceedu.com\/zh\/wp-json\/wp\/v2\/pages\/2415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gamma.interfaceedu.com\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gamma.interfaceedu.com\/zh\/wp-json\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/gamma.interfaceedu.com\/zh\/wp-json\/wp\/v2\/comments?post=2415"}],"version-history":[{"count":0,"href":"https:\/\/gamma.interfaceedu.com\/zh\/wp-json\/wp\/v2\/pages\/2415\/revisions"}],"wp:attachment":[{"href":"https:\/\/gamma.interfaceedu.com\/zh\/wp-json\/wp\/v2\/media?parent=2415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}