@charset "utf-8"; /* ========================================================================== SmartLab — product page components (SmartLab Events, SmartLab Event App) Loaded after smartlab-v2.css. Every colour here reads the generic --accent / --accent-ink / --accent-tint / --accent-on aliases, so both pages pick up the orange theme from [data-theme="events"] on and the same components would work unchanged in the blue theme. ========================================================================== */ /* --- Breadcrumb ---------------------------------------------------------- */ .breadcrumb { border-bottom: 1px solid var(--line); background: var(--surface); font-size: .8125rem; } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 0; } .breadcrumb li { display: flex; align-items: center; gap: 8px; color: var(--ink-3); } .breadcrumb li + li::before { content: '›'; color: var(--line-2); } .breadcrumb a { color: var(--ink-3); } .breadcrumb a:hover { color: var(--accent-ink); } .breadcrumb [aria-current] { color: var(--ink); font-weight: 700; } /* --- Product hero -------------------------------------------------------- */ .phero { background: var(--accent-tint); padding: 76px 0 0; } .phero__copy { text-align: center; max-width: 940px; margin-inline: auto; } .phero__title { margin-bottom: 20px; } .phero__title .accent-display, .phero__title .accent-display strong { color: var(--accent); } /* beats .h1 strong */ .phero__lede { max-width: var(--measure); margin-inline: auto; } .phero__actions { margin-top: 30px; justify-content: center; } .phero__note { margin-top: 16px; font-size: var(--fs-sm); color: var(--ink-3); } .phero__stores { display: flex; justify-content: center; gap: 14px; margin-top: 26px; } .phero__stores img { height: 46px; width: auto; } .phero__shot { position: relative; z-index: 1; margin-top: 44px; margin-bottom: -64px; } .phero__shot img { margin-inline: auto; } /* Sticky CTA that appears once the hero has scrolled away. */ .sticky-cta { position: fixed; right: 24px; bottom: 24px; z-index: 90; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease, visibility .25s; } .sticky-cta.is-on { opacity: 1; visibility: visible; transform: none; } .sticky-cta .btn { box-shadow: var(--shadow-lg); } @media (max-width: 767px) { .sticky-cta { right: 16px; bottom: 16px; } } /* --- Section furniture --------------------------------------------------- */ .section--accentTint { background: var(--accent-tint); } /* .eyebrow already reads --accent-ink; kept as an explicit hook. */ .eyebrow--accent { color: var(--accent-ink); } .rule { width: 48px; height: 3px; border-radius: 2px; background: var(--accent); margin: 0 0 20px; } .center .rule { margin-inline: auto; } /* --- Value cards (icon + title + copy) ----------------------------------- */ .valuecards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; margin-top: 44px; } .valuecard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px 24px 28px; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .valuecard:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); } .valuecard__icon { width: 48px; height: 48px; margin-bottom: 18px; border-radius: 10px; background: var(--accent-tint); display: flex; align-items: center; justify-content: center; } .valuecard__icon img { width: 26px; height: 26px; } .valuecard h3 { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 8px; color: var(--accent-ink); } .valuecard p { font-size: var(--fs-base); line-height: 1.55; } /* Why-choose: hero image beside the value cards */ .whychoose { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 48px; align-items: center; margin-top: 44px; } .whychoose__media img { border-radius: var(--r-md); width: 100%; box-shadow: var(--shadow-md); } .whychoose .valuecards { grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 0; } /* --- Alternating feature rows -------------------------------------------- */ .frow { padding: 72px 0; } .frow + .frow { padding-top: 0; } .frow__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items: center; } .frow--flip .frow__media { order: 2; } .frow__media img { width: 100%; max-width: 560px; margin-inline: auto; border-radius: var(--r-md); } .frow__copy h3 { margin-bottom: 14px; } .frow__copy h3 .accent-display, .frow__copy h3 .accent-display strong { color: var(--accent); } .frow__copy > p { margin-bottom: 26px; } .minigrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 28px; margin-top: 26px; } .minigrid h4 { font-size: var(--fs-base); font-weight: 700; color: var(--accent-ink); margin-bottom: 4px; } .minigrid p { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); } .frow .link-arrow { color: var(--accent-ink); } /* --- Visual environments carousel ---------------------------------------- */ .carousel { margin-top: 44px; } .carousel__viewport { overflow: hidden; border-radius: var(--r-lg); } .carousel__track { display: flex; gap: 20px; transition: transform .45s cubic-bezier(.22,.61,.36,1); } .carousel__slide { flex: 0 0 100%; } .carousel__slide img { width: 100%; border-radius: var(--r-lg); display: block; } .carousel__slide figcaption { margin-top: 14px; font-size: var(--fs-sm); color: var(--ink-3); text-align: center; } .carousel__controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 24px; } .carousel__btn { width: 44px; height: 44px; border-radius: var(--r-pill); flex: none; border: 2px solid var(--line-2); background: var(--surface); color: var(--accent-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast); } .carousel__btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent); color: var(--accent-on); } .carousel__btn:disabled { opacity: .35; cursor: default; } .carousel__btn svg { width: 18px; height: 18px; } .carousel__dots { display: flex; gap: 8px; } .carousel__dot { width: 9px; height: 9px; padding: 0; border-radius: var(--r-pill); border: 0; background: var(--line-2); cursor: pointer; transition: background-color var(--t-fast), transform var(--t-fast); } .carousel__dot[aria-current="true"] { background: var(--accent); transform: scale(1.25); } /* --- Smart features: four capability groups ------------------------------ */ .capgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; margin-top: 44px; } .capcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 32px 32px; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .capcard:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); } .capcard__head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .capcard__head img { width: 52px; height: auto; flex: none; } .capcard__head h3 { font-size: 1.1875rem; font-weight: 700; color: var(--accent-ink); } .capcard ul { display: flex; flex-direction: column; gap: 11px; } .capcard li { display: flex; gap: 11px; align-items: flex-start; font-size: var(--fs-base); line-height: 1.5; color: var(--ink-2); } .capcard li img { width: 17px; height: 17px; flex: none; margin-top: 3px; } /* --- Collaboration app cards --------------------------------------------- */ .appgrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; margin-top: 44px; } .appcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); } .appcard:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); transform: translateY(-2px); } .appcard__top { position: relative; background: var(--accent-tint); } .appcard__top > img { width: 100%; aspect-ratio: 540 / 220; object-fit: cover; display: block; } .appcard__icon { position: absolute; left: 20px; bottom: -22px; width: 48px; height: 48px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; } .appcard__icon img { width: 30px; height: 30px; } .appcard__body { padding: 34px 20px 24px; } .appcard__body h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; } .appcard__body p { font-size: var(--fs-sm); line-height: 1.5; } /* --- Use-case band ------------------------------------------------------- */ .usecases { background: var(--accent); padding: 88px 0; } .usecases__head { max-width: var(--measure); margin-bottom: 44px; } .usecases__head h2, .usecases__head p { color: #fff; } .usecases__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; } .usecase { background: var(--surface); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--t-fast), box-shadow var(--t-fast); } .usecase:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .usecase img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; display: block; } .usecase__body { padding: 22px 24px 26px; } .usecase__body h3 { font-size: var(--fs-lg); font-weight: 700; color: var(--accent-ink); margin-bottom: 6px; } .usecase__body p { font-size: var(--fs-base); line-height: 1.55; } .usecases__foot { margin-top: 48px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; } .usecases__foot p { color: #fff; font-size: 1.125rem; font-weight: 700; max-width: 56ch; } /* On the accent band: white outline ⇄ white fill with an accent label */ .usecases .btn { background: transparent; border-color: #fff; color: #fff; box-shadow: none; } .usecases .btn:hover { background: #fff; border-color: #fff; color: var(--accent-ink); } /* --- Inline email capture ------------------------------------------------ */ .capture { background: var(--accent); padding: 88px 0; } .capture__head { text-align: center; max-width: 74ch; margin-inline: auto; } .capture__head h2, .capture__head p { color: #fff; } .capture__head p { margin-top: 18px; font-size: var(--fs-lg); line-height: 1.65; } .capture__card { margin: 40px auto 0; max-width: 660px; background: var(--surface); border-radius: var(--r-lg); padding: 34px 36px 36px; box-shadow: var(--shadow-lg); text-align: center; } .capture__card p { font-size: var(--fs-lg); margin-bottom: 20px; } .capture__form { display: flex; gap: 12px; } .capture__form input[type=email] { flex: 1; min-width: 0; padding: 14px 18px; font: inherit; font-size: 1rem; color: var(--ink); border: 2px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); } .capture__form input[type=email]:focus { outline: 2px solid var(--accent-ink); outline-offset: 1px; border-color: var(--accent); } .capture__form input[type=email]::placeholder { color: var(--ink-3); } .capture__form .btn { flex: none; } /* --- Story / PDF band ---------------------------------------------------- */ .story { background: var(--surface-2); padding: 80px 0; } .story__inner { text-align: center; max-width: 68ch; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 22px; } .story__inner img { max-width: 320px; } /* --- Responsive ---------------------------------------------------------- */ @media (max-width: 1080px) { .valuecards { grid-template-columns: repeat(2, minmax(0,1fr)); } .appgrid { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 991px) { .whychoose { grid-template-columns: 1fr; gap: 32px; } .frow { padding: 56px 0; } .frow__grid { grid-template-columns: 1fr; gap: 36px; } .frow--flip .frow__media { order: -1; } .frow__media { order: -1; } .capgrid { grid-template-columns: 1fr; } .usecases__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .usecases, .capture { padding: 64px 0; } } @media (max-width: 767px) { .phero { padding-top: 52px; } .phero__shot { margin-top: 32px; margin-bottom: -28px; } .valuecards, .appgrid, .usecases__grid { grid-template-columns: 1fr; } .whychoose .valuecards { grid-template-columns: 1fr; } .minigrid { grid-template-columns: 1fr; gap: 18px; } .capture__card { padding: 26px 22px 28px; } .capture__form { flex-direction: column; } .capture__form .btn { width: 100%; } .phero__stores img { height: 40px; } /* Compact pill on phones — a full-width bar would permanently cover ~70px of a page this long. */ .sticky-cta .btn { padding: 12px 22px; font-size: var(--fs-base); } } @media (max-width: 479px) { .whychoose .valuecards { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .carousel__track { transition: none; } .usecase:hover, .appcard:hover { transform: none; } } /* --- Partner program tiles ------------------------------------------------ */ .partners { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px; margin-top: 48px; } .partner { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); } .partner:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); transform: translateY(-2px); } .partner__media { background: var(--accent-tint); aspect-ratio: 16 / 10; overflow: hidden; padding: 22px 22px 0; display: flex; align-items: flex-end; justify-content: center; } .partner__media img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; } .partner__body { padding: 28px 30px 32px; display: flex; flex-direction: column; flex: 1; gap: 12px; } .partner__body h3 { color: var(--accent-ink); } .partner__body .btn { align-self: flex-start; margin-top: auto; } /* --- Closing impact strip ------------------------------------------------- */ .impact-shot { margin: 40px auto 44px; max-width: 900px; } .impact-shot img { width: 100%; border-radius: var(--r-md); } @media (max-width: 767px) { .partners { grid-template-columns: 1fr; gap: 24px; } .impact-shot { margin: 28px auto 32px; } } @media (prefers-reduced-motion: reduce) { .partner:hover { transform: none; } } /* ========================================================================== Program detail pages — SmartLab AI Acceleration, Leaders, Deep Academy, Culture OS, Experience Labs. One component set, shared section order, so the four partner programs read as a family. ========================================================================== */ /* --- Partner band -------------------------------------------------------- */ .partnerband { background: var(--surface-2); border-block: 1px solid var(--line); padding: 56px 0; } .partnerband__inner { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 48px; align-items: center; } .partnerband__logo { display: flex; align-items: center; } .partnerband__logo img { max-height: 74px; max-width: 240px; width: auto; } .partnerband__label { font-size: 12px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; } .partnerband p { font-size: var(--fs-lg); line-height: 1.65; } /* --- Quote cards --------------------------------------------------------- */ .quotecards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 44px; } .quotecard { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-md); padding: 28px 30px 30px; } .quotecard blockquote { margin: 0 0 16px; font-size: var(--fs-lg); line-height: 1.6; color: var(--ink-2); } .quotecard figcaption { font-size: var(--fs-sm); font-weight: 700; color: var(--accent-ink); } .quotecard figcaption span { display: block; font-weight: 400; color: var(--ink-3); margin-top: 2px; } /* --- Stat band (on the dark section) ------------------------------------- */ .statband { background: var(--blue-deep); color: #fff; padding: 76px 0; } .statband__head { text-align: center; max-width: var(--measure); margin: 0 auto 48px; } .statband__head h2 { color: #fff; } .statband__head p { color: var(--ink-onDark); margin-top: 16px; font-size: var(--fs-lg); } .statband__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; } .stat { border-top: 2px solid rgba(255,255,255,.28); padding-top: 22px; } .stat__num { font-size: clamp(2.5rem, 4.4vw, 3.5rem); font-weight: 900; line-height: 1; letter-spacing: -.02em; color: #fff; } .stat__label { margin-top: 12px; font-size: var(--fs-base); line-height: 1.5; color: var(--ink-onDark); } .stat__source { margin-top: 8px; font-size: .8125rem; color: var(--ink-onDark-2); } .statband__foot { margin-top: 48px; text-align: center; } .statband__foot p { color: #fff; font-size: 1.125rem; font-weight: 700; } /* --- Numbered phases ----------------------------------------------------- */ .phases { display: flex; flex-direction: column; gap: 24px; margin-top: 48px; } .phase { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px 36px 36px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; } .phase__lead { display: flex; flex-direction: column; gap: 14px; } .phase__num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-pill); flex: none; background: var(--accent); color: var(--accent-on); font-size: 1rem; font-weight: 900; } .phase__lead h3 { font-size: 1.3125rem; font-weight: 700; } .phase__lead .phase__tagline { font-size: var(--fs-base); font-weight: 700; color: var(--accent-ink); } .phase__lead p { font-size: var(--fs-base); line-height: 1.6; } .phase__body h4 { font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; } .phase__outcomes { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 24px; margin-bottom: 24px; } .phase__outcomes h5 { font-size: var(--fs-base); font-weight: 700; color: var(--accent-ink); margin: 0 0 3px; } .phase__outcomes p { font-size: var(--fs-sm); line-height: 1.5; } .phase__practice { display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-block; padding: 7px 14px; border-radius: var(--r-pill); background: var(--accent-tint); border: 1px solid var(--line); font-size: .8125rem; color: var(--ink-2); } /* --- Stage cards (Learn / Apply / Build) --------------------------------- */ .stages { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; margin-top: 48px; } .stage { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 32px 32px; display: flex; flex-direction: column; gap: 14px; } .stage__num { width: 34px; height: 34px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-on); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 900; } .stage h3 { font-size: 1.1875rem; font-weight: 700; } .stage p { font-size: var(--fs-base); line-height: 1.6; } .stage ul { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; } .stage li { position: relative; padding-left: 22px; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); } .stage li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--accent-ink); font-weight: 900; line-height: 1.5; } /* --- Audience columns ---------------------------------------------------- */ .audience { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 44px; margin-top: 48px; } .audience__col > h3 { font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .audience__list { display: flex; flex-direction: column; gap: 20px; } .audience__list h4 { font-size: 1rem; font-weight: 700; color: var(--accent-ink); margin-bottom: 4px; } .audience__list p { font-size: var(--fs-base); line-height: 1.55; } /* --- Two-column comparison ---------------------------------------------- One card per column: the artwork sits at the top and is never cropped, the claims are a single ticked list in the text area beneath it. */ .compare { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px; margin-top: 48px; } .compare__col { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .compare__col:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); } .compare__media { background: var(--accent-tint); padding: 24px; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; /* keeps the two cards' text areas aligned */ /* .compare__col is a column flex container, so this box is a flex item and min-height:auto would let the image override the ratio. */ flex: none; min-height: 0; overflow: hidden; } .compare__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--r-sm); } .compare__media .placeholder { width: 100%; height: 100%; border: 0; min-height: 0; } .compare__body { padding: 30px 32px 34px; } .compare__body h3 { font-size: 1.1875rem; font-weight: 700; color: var(--accent-ink); margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } /* --- Difference tiles ---------------------------------------------------- */ .difftiles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; margin-top: 48px; } .difftile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px 26px 26px; border-top: 3px solid var(--accent); } .difftile h3 { font-size: var(--fs-lg); font-weight: 700; color: var(--accent-ink); margin-bottom: 6px; } .difftile p { font-size: var(--fs-base); line-height: 1.55; } /* --- Horizontal journey steps ------------------------------------------- */ .journey { counter-reset: step; margin-top: 48px; } .journey__track { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 20px; } .journey__step { position: relative; padding-top: 34px; } .journey__step::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 0; width: 26px; height: 26px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-on); display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 900; } .journey__step::after { content: ''; position: absolute; top: 12px; left: 34px; right: -20px; height: 2px; background: var(--line-2); } .journey__step:last-child::after { display: none; } .journey__step h3 { font-size: 1rem; font-weight: 700; color: var(--accent-ink); margin-bottom: 6px; } .journey__step p { font-size: var(--fs-sm); line-height: 1.5; } /* --- Delivery models ----------------------------------------------------- */ .models { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 44px; } .model { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px 24px 28px; } .model h3 { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 14px; } .model dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: var(--fs-sm); } .model dt { color: var(--ink-3); } .model dd { margin: 0; font-weight: 700; color: var(--ink); } .model p { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.5; } /* --- Domain tracks table ------------------------------------------------- */ .tracks { margin-top: 48px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); } .tracks table { width: 100%; border-collapse: collapse; } .tracks th, .tracks td { text-align: left; padding: 16px 22px; font-size: var(--fs-base); line-height: 1.5; vertical-align: top; } .tracks thead th { font-size: 12px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); border-bottom: 1px solid var(--line); } .tracks tbody tr + tr { border-top: 1px solid var(--line); } .tracks tbody th { font-weight: 700; color: var(--accent-ink); white-space: nowrap; } .tracks td:last-child { color: var(--ink); font-weight: 700; } /* --- Full-width figure --------------------------------------------------- */ .figureband { margin-top: 44px; } .figureband img { width: 100%; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); } .figureband figcaption { margin-top: 14px; font-size: var(--fs-sm); color: var(--ink-3); text-align: center; } /* --- Image placeholder (for art that doesn't exist yet) ------------------ */ .placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: repeating-linear-gradient(135deg, var(--surface-2) 0 12px, var(--blue-tint) 12px 24px); border: 2px dashed var(--line-2); border-radius: var(--r-md); padding: 32px 24px; text-align: center; color: var(--ink-3); min-height: 220px; } .placeholder strong { font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); } .placeholder span { font-size: var(--fs-sm); line-height: 1.5; max-width: 42ch; } .placeholder em { font-size: .75rem; font-style: normal; color: var(--ink-3); opacity: .85; } /* --- Responsive ---------------------------------------------------------- */ @media (max-width: 1080px) { .difftiles { grid-template-columns: repeat(2, minmax(0,1fr)); } .journey__track { grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: 32px; } .journey__step:nth-child(3n)::after { display: none; } } @media (max-width: 991px) { .partnerband__inner { grid-template-columns: 1fr; gap: 24px; } .phase { grid-template-columns: 1fr; gap: 28px; padding: 28px 26px 30px; } .stages { grid-template-columns: 1fr; } .audience { grid-template-columns: 1fr; gap: 36px; } .compare { grid-template-columns: 1fr; } .tracks { overflow-x: auto; } .tracks table { min-width: 640px; } } @media (max-width: 767px) { .difftiles { grid-template-columns: 1fr; } .phase__outcomes { grid-template-columns: 1fr; } .journey__track { grid-template-columns: 1fr; row-gap: 28px; } .journey__step::after { display: none; } .statband { padding: 60px 0; } .partnerband { padding: 44px 0; } } /* Feature rows nested inside a section that already has its own padding. The `.frow + .frow { padding-top: 0 }` rule above is more specific than a single class, so the sibling spacing has to be restated here. */ .frow--inSection { padding: 72px 0 0; } .frow--inSection .frow__grid { gap: 56px; } .frow--inSection + .frow--inSection { padding-top: 88px; } @media (max-width: 991px) { .frow--inSection { padding-top: 48px; } .frow--inSection + .frow--inSection { padding-top: 64px; } } /* A use-case grid dropped into a plain .section needs the head spacing that the .usecases wrapper would otherwise provide. */ .section .usecases__grid { margin-top: 48px; } /* ========================================================================== Program-page blocks (added for the content-parity rebuild) ========================================================================== */ /* --- Screen-reader-only ------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- Ticked lists -------------------------------------------------------- */ .checks { display: flex; flex-direction: column; gap: 12px; } /* The tick is positioned rather than a flex sibling, so inline markup inside the item (, , links) wraps as normal prose instead of becoming its own flex item. */ .checks li { position: relative; padding-left: 25px; font-size: var(--fs-base); line-height: 1.55; color: var(--ink-2); } .checks li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--accent-ink); font-weight: 900; line-height: 1.55; } .checks li strong { color: var(--ink); } .checks--2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 40px; } /* --- Image + ticked capability list ------------------------------------- */ .checkblock { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: center; margin-top: 44px; } .checkblock--solo { grid-template-columns: minmax(0, 78ch); justify-content: center; } .checkblock--solo .checkblock__body { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 34px 32px; } .checkblock--solo .checkblock__body h3 { text-align: center; } .checkblock__media img { width: 100%; border-radius: var(--r-md); box-shadow: var(--shadow-md); } .checkblock__body h3 { font-size: 1.1875rem; font-weight: 700; color: var(--accent-ink); margin-bottom: 18px; } /* --- Intro / positioning block ------------------------------------------ */ .introgrid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: center; margin-top: 44px; } .introgrid--flip .introgrid__media { order: 2; } .introgrid__media img { width: 100%; border-radius: var(--r-md); box-shadow: var(--shadow-md); } .introcopy p + p { margin-top: 16px; } .introcopy--wide { max-width: 74ch; margin: 40px auto 0; text-align: center; } .introcopy__sub { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); } .introcopy__sub h3 { font-size: 1.1875rem; font-weight: 700; color: var(--accent-ink); margin-bottom: 10px; } .introcopy__sub p { font-size: var(--fs-base); line-height: 1.65; } /* --- Definition band ---------------------------------------------------- */ .defband { background: var(--accent); padding: 68px 0; } .defband__inner { max-width: 74ch; margin-inline: auto; text-align: center; } .defband__term { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 900; letter-spacing: -.02em; color: #fff; margin-bottom: 18px; } .defband__body { font-size: 1.125rem; line-height: 1.65; color: #fff; } /* --- Founder / people cards --------------------------------------------- */ .people { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; margin-top: 44px; } .person { display: grid; grid-template-columns: 116px minmax(0,1fr); gap: 24px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 30px 30px; } .person__shot img { width: 116px; height: 116px; border-radius: var(--r-pill); object-fit: cover; background: var(--surface-2); } .person__body h3 { font-size: 1.1875rem; font-weight: 700; margin-bottom: 4px; } .person__role { font-size: var(--fs-sm); font-weight: 700; color: var(--accent-ink); margin-bottom: 12px; } .person__body > p:last-child { font-size: var(--fs-base); line-height: 1.6; } /* --- Quote card counts -------------------------------------------------- */ .quotecards--1 { grid-template-columns: minmax(0, 74ch); justify-content: center; } .quotecards--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } /* --- Grid column counts ------------------------------------------------- */ .valuecards--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .valuecards--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .valuecards--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .difftiles--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .difftiles--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .valuecard__shot { margin: -24px -26px 18px; } .valuecard__shot img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; display: block; } .valuecard--noTitle p { font-size: 1rem; } /* --- Stage column counts ------------------------------------------------ */ .stages--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .stages--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .stages--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .stage__kicker { font-size: var(--fs-base); font-weight: 700; color: var(--accent-ink); } /* --- Journey column counts ---------------------------------------------- */ .journey--3 .journey__track { grid-template-columns: repeat(3, minmax(0,1fr)); } .journey--4 .journey__track { grid-template-columns: repeat(4, minmax(0,1fr)); } .journey--5 .journey__track { grid-template-columns: repeat(5, minmax(0,1fr)); } /* --- Table extras ------------------------------------------------------- */ .tracks--wide tbody th { white-space: normal; min-width: 170px; } .tracks--wide td:last-child { font-weight: 400; color: var(--ink-2); } .tablefoot { margin-top: 18px; font-size: var(--fs-sm); color: var(--ink-3); text-align: center; } /* --- Phase extra list --------------------------------------------------- */ .phase__list + .phase__list { margin-top: 22px; } .phase__list h4 { margin-bottom: 12px; } /* --- Full-bleed figures (images only, never cropped) -------------------- */ .figpair { display: grid; gap: 28px; margin-top: 44px; } .figpair--1 { grid-template-columns: minmax(0, 1000px); justify-content: center; } .figpair--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .figpair--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .figpair__item { margin: 0; } .figpair__item img { width: 100%; height: auto; display: block; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); } .figpair__item figcaption { margin-top: 12px; font-size: var(--fs-sm); color: var(--ink-3); } /* --- Three-up product cards --------------------------------------------- */ .partners--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .partners--3 .partner__media { aspect-ratio: 4 / 3; } /* --- List columns ------------------------------------------------------- */ .listcols { display: grid; gap: 32px; margin-top: 44px; } .listcols--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .listcols--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .listcol { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 28px 30px; } .listcol h3 { font-size: var(--fs-lg); font-weight: 700; color: var(--accent-ink); margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } /* --- Case result cards -------------------------------------------------- */ .cases { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; margin-top: 48px; } .case { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 26px 28px; border-top: 3px solid var(--accent); } .case__icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--r-sm); background: var(--accent-tint); margin-bottom: 16px; } .case__icon img { width: 26px; height: 26px; } .case h3 { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 18px; } .case__stats { display: flex; flex-direction: column; gap: 14px; } .case__stats strong { display: block; font-size: 1.5rem; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; color: var(--accent-ink); } .case__stats span { display: block; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-2); margin-top: 3px; } /* --- Leadership shift blocks -------------------------------------------- */ .shift { margin-top: 44px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px 34px 34px; } .shift__label { font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 20px; } .shift__label--table { margin-top: 44px; margin-bottom: 0; text-align: center; } .shift__label--table + .tracks { margin-top: 20px; } /* --- Audience column art ------------------------------------------------ */ .audience__shot { margin-bottom: 22px; } .audience__shot img { width: 100%; border-radius: var(--r-md); } /* --- Get started: copy beside the flow diagram -------------------------- */ .getstarted { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: center; } .getstarted__media img { width: 100%; height: auto; border-radius: var(--r-md); } .getstarted__aside { display: flex; align-items: center; gap: 26px; margin-top: 56px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 30px; } .getstarted__aside img { width: 200px; height: auto; border-radius: var(--r-md); flex: none; } .getstarted__aside p { font-size: var(--fs-lg); line-height: 1.6; } @media (max-width: 991px) { .getstarted { grid-template-columns: 1fr; gap: 36px; } } /* --- Responsive --------------------------------------------------------- */ @media (max-width: 1080px) { .cases { grid-template-columns: repeat(2, minmax(0,1fr)); } .valuecards--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .listcols--3 { grid-template-columns: repeat(2, minmax(0,1fr)); } .partners--3 { grid-template-columns: repeat(2, minmax(0,1fr)); } .stages--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 991px) { .checkblock, .introgrid { grid-template-columns: 1fr; gap: 32px; } .introgrid--flip .introgrid__media { order: -1; } .introgrid__media { order: -1; } .quotecards--2 { grid-template-columns: 1fr; } .valuecards--3, .difftiles--3, .difftiles--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .stages--2, .stages--3 { grid-template-columns: 1fr; } .figpair--2, .figpair--3 { grid-template-columns: 1fr; } .journey--3 .journey__track, .journey--4 .journey__track, .journey--5 .journey__track { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 30px; } .journey--3 .journey__step::after, .journey--4 .journey__step::after, .journey--5 .journey__step::after { display: none; } .defband { padding: 52px 0; } } @media (max-width: 767px) { .checks--2 { grid-template-columns: 1fr; } .cases, .valuecards--4, .valuecards--3, .valuecards--2, .difftiles--2, .difftiles--3, .stages--4, .listcols--2, .listcols--3, .partners--3 { grid-template-columns: 1fr; } .person { grid-template-columns: 1fr; gap: 18px; padding: 24px 22px 26px; } .person__shot img { width: 92px; height: 92px; } .compare { grid-template-columns: 1fr; gap: 32px; } .journey--3 .journey__track, .journey--4 .journey__track, .journey--5 .journey__track { grid-template-columns: 1fr; } .getstarted__aside { flex-direction: column; align-items: flex-start; gap: 18px; } .getstarted__aside img { width: 160px; } .shift { padding: 26px 22px 28px; } } @media (prefers-reduced-motion: reduce) { .compare__col:hover { box-shadow: none; } } .audience__note { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: var(--fs-base); line-height: 1.6; color: var(--ink-2); } .audience--cards { gap: 28px; } .audience--cards .audience__col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 32px 34px; border-top: 3px solid var(--accent); } .audience--cards .audience__col > h3 { border: 0; padding: 0; margin-bottom: 6px; } .audience__sub { font-size: var(--fs-base); line-height: 1.55; color: var(--ink-2); margin-bottom: 22px; } .center.measure { margin-inline: auto; } .stage .link-arrow { margin-top: 4px; font-size: var(--fs-base); color: var(--accent-ink); } .stage .link-arrow svg { width: 16px; height: 16px; } /* --- Benefit groups (industry pages) ------------------------------------ */ .groupgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; margin-top: 48px; } .groupcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 30px 30px; border-top: 3px solid var(--accent); transition: border-color var(--t-fast), box-shadow var(--t-fast); } .groupcard:hover { box-shadow: var(--shadow-sm); } .groupcard > h3 { font-size: 1.125rem; font-weight: 700; color: var(--accent-ink); margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .groupcard ul { display: flex; flex-direction: column; gap: 18px; } .groupcard h4 { font-size: var(--fs-base); font-weight: 700; margin-bottom: 4px; } .groupcard p { font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2); } @media (max-width: 1080px) { .groupgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 767px) { .groupgrid { grid-template-columns: 1fr; } } /* ========================================================================== Revision pass — section grouping, figure sizing, dark-band checklists ========================================================================== */ /* A figure sitting inside another block's section, tied to what follows. */ .figureband--tight { margin-top: 40px; margin-bottom: 8px; } .figureband--sm { max-width: 760px; margin-inline: auto; } .figureband--md { max-width: 920px; margin-inline: auto; } .figureband--plain img { border: 0; background: transparent; } /* Ticked list on the dark stat band. */ .statband__checks { margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.22); } .statband__checks h3 { font-size: 1.125rem; font-weight: 700; color: #fff; margin-bottom: 22px; text-align: center; } .statband__checks .checks { max-width: 860px; margin-inline: auto; } .statband__checks .checks li { color: var(--ink-onDark); } .statband__checks .checks li::before { color: #8fb4f0; } /* Quote cards nested inside the partner band, so the two read as one unit. */ .partnerband .quotecards { margin-top: 34px; } .partnerband .quotecard { background: var(--surface); border-color: var(--line); } /* Unframed image pairs (used by "Experience Labs in action"). */ .figpair--bare .figpair__item img { border: 0; background: transparent; border-radius: var(--r-md); } .figpair--sm { grid-template-columns: minmax(0, 760px); justify-content: center; } .figpair--md { grid-template-columns: minmax(0, 920px); justify-content: center; } /* Stage cards sitting directly under a figure in the same section. */ .stages--tight { gap: 20px; margin-top: 32px; } /* A checkblock image that should not dominate the row. */ .checkblock--sm .checkblock__media img { max-width: 420px; margin-inline: auto; display: block; } /* Grid image shown above the cards rather than after them. */ .valuecards--afterFigure { margin-top: 40px; } .stages__note { margin-top: 34px; text-align: center; font-size: var(--fs-base); line-height: 1.65; color: var(--ink-2); max-width: 88ch; margin-inline: auto; } .stages__note strong { color: var(--ink); } /* ========================================================================== Platform / AI / Contact — added for the Platform section rebuild ========================================================================== */ /* --- Sticky in-page navigation ------------------------------------------ A secondary bar that rides up with the page and then pins directly beneath the site header, staying there for the rest of the page. `top` is the header height rather than 0, which is what previously let it slide underneath and disappear. z-index sits below the header so the nav dropdowns still open over it, and above everything else on the page. */ .jumpnav { position: sticky; top: var(--header-h); z-index: 80; background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); transition: box-shadow .2s ease; } /* Lifted off the page only once it is actually pinned, so it reads as a bar rather than a section divider. Set by smartlab-v2.js. */ .jumpnav[data-stuck="true"] { box-shadow: 0 6px 20px rgba(30, 51, 88, .09); } .jumpnav__inner { display: flex; align-items: center; gap: 24px; height: var(--jumpnav-h); } .jumpnav__label { font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); flex: none; } .jumpnav__links { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; /* Nine sections do not fit at every width, and the scrollbar is hidden, so a soft edge is the only cue that the row continues. The fade appears on whichever side has more to show — smartlab-v2.js sets data-edge. */ --fade-l: 0px; --fade-r: 0px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); scroll-behavior: smooth; } .jumpnav__links[data-edge="end"] { --fade-r: 28px; } .jumpnav__links[data-edge="start"] { --fade-l: 28px; } .jumpnav__links[data-edge="both"] { --fade-l: 28px; --fade-r: 28px; } @media (prefers-reduced-motion: reduce) { .jumpnav__links { scroll-behavior: auto; } } .jumpnav__links::-webkit-scrollbar { display: none; } .jumpnav__links a { flex: none; padding: 7px 15px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); white-space: nowrap; transition: background-color var(--t-fast), color var(--t-fast); } .jumpnav__links a:hover { background: var(--accent-tint); color: var(--accent-ink); text-decoration: none; } .jumpnav__links a.is-current { background: var(--accent-fill); color: var(--accent-on); } /* Anchored sections must clear both bars, plus a little breathing room. */ main [id], main section[id] { scroll-margin-top: calc(var(--header-h) + 24px); } /* On a page that carries the in-page bar, clear that too. */ body:has(.jumpnav) main [id], body:has(.jumpnav) main section[id] { scroll-margin-top: calc(var(--header-h) + var(--jumpnav-h) + 20px); } @media (max-width: 767px) { .jumpnav__label { display: none; } .jumpnav__inner { gap: 0; } /* Room for the pill row to scroll horizontally under a shorter header. */ .jumpnav { top: var(--header-h); } } /* Browsers without :has() keep a single generous offset — never a heading hidden behind the bars, at worst a slightly larger gap above it. */ @supports not selector(body:has(.jumpnav)) { main [id], main section[id] { scroll-margin-top: calc(var(--header-h) + var(--jumpnav-h) + 20px); } } /* --- Apple-style capability rows ---------------------------------------- Unframed and deliberately tight: the artwork carries its own background, so a tinted well around it only added height. */ .showcase { display: flex; flex-direction: column; gap: 56px; margin-top: 48px; } .showcase__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; } .showcase__row--flip .showcase__media { order: 2; } .showcase__media { display: flex; align-items: center; justify-content: center; } .showcase__media img { width: 100%; height: auto; max-height: 320px; object-fit: contain; display: block; margin-inline: auto; } .showcase--tall .showcase__media img { max-height: 480px; } .showcase__index { font-size: 12px; font-weight: 900; letter-spacing: .14em; color: var(--accent-ink); margin-bottom: 10px; /* --accent is 3.31:1 at this size */ } .showcase__copy h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 12px; } .showcase__copy .body-lg { color: var(--ink-2); } .showcase__copy .link-arrow { margin-top: 22px; color: var(--accent-ink); } /* --- Full-width signature moment ---------------------------------------- */ .spotlight { /* The blue stops part-way so the artwork overlaps onto the white below it. background-color is declared too so the copy's effective backdrop is resolvable (contrast tooling and gradient-less fallbacks both read it). */ background-color: var(--blue-deep); background-image: linear-gradient(to bottom, var(--blue-deep) 0 68%, var(--surface) 68% 100%); color: #fff; padding: 96px 0 72px; } .spotlight__copy { text-align: center; max-width: 68ch; margin: 0 auto 52px; } .spotlight__copy .eyebrow { color: #8fb4f0; } .spotlight__copy h2 { color: #fff; } .spotlight__copy .lede { color: var(--ink-onDark); margin-top: 18px; } .spotlight__media { background: transparent; padding: 0; } .spotlight__media img { width: 100%; height: auto; display: block; } /* --- Contact: routing tiles --------------------------------------------- */ .routes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; margin-top: 44px; } .route { display: flex; gap: 18px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 28px 28px; color: inherit; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); } .route:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; } .route__icon { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--accent-tint); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; } .route__icon svg { width: 22px; height: 22px; } .route__body strong { display: block; font-size: var(--fs-lg); font-weight: 700; margin-bottom: 5px; } .route__body span { display: block; font-size: var(--fs-base); line-height: 1.55; color: var(--ink-2); } /* --- Contact: the form itself ------------------------------------------- */ .contact { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 56px; align-items: start; } .contact__form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 40px 44px 44px; } .cform { display: flex; flex-direction: column; gap: 20px; margin-top: 30px; } .cform__row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; } .cform__field { display: flex; flex-direction: column; gap: 7px; } .cform__field label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); } .cform__field label span { color: var(--accent-ink); } .cform input, .cform select, .cform textarea { font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 13px 15px; width: 100%; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .cform textarea { resize: vertical; min-height: 110px; } .cform input::placeholder, .cform textarea::placeholder { color: var(--ink-3); } /* The focus ring is a border-colour change plus a soft halo. `outline: none` would be a WCAG 2.4.7 failure in forced-colors mode, where box-shadow is discarded and nothing would be left to see — so the outline is kept and made transparent instead. Transparent outlines are painted as a visible system colour in forced-colors mode and render as nothing everywhere else, so this costs no pixels on a normal display. */ .cform input:focus, .cform select:focus, .cform textarea:focus { outline: 2px solid transparent; outline-offset: 2px; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .cform select { /* Prefixes needed: without them Safari draws its native arrow *as well as* the chevron below. */ -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 13px; padding-right: 40px; } .cform__submit { align-self: flex-start; margin-top: 4px; } .cform__note { font-size: .8125rem; line-height: 1.6; color: var(--ink-3); } .contact__aside { display: flex; flex-direction: column; gap: 28px; } .contact__detail { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 26px 26px; } .contact__detailLabel { font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; } .contact__detail p { font-size: var(--fs-base); line-height: 1.65; color: var(--ink-2); } .contact__detail a { color: var(--accent-ink); font-weight: 700; } /* --- Responsive --------------------------------------------------------- */ @media (max-width: 1080px) { .routes { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 991px) { .showcase { gap: 64px; margin-top: 48px; } .showcase__row { grid-template-columns: 1fr; gap: 28px; } .showcase__row--flip .showcase__media, .showcase__media { order: -1; } .spotlight { padding: 64px 0 48px; background-image: linear-gradient(to bottom, var(--blue-deep) 0 72%, var(--surface) 72% 100%); } .contact { grid-template-columns: 1fr; gap: 32px; } .contact__form { padding: 30px 26px 34px; } } @media (max-width: 767px) { .routes { grid-template-columns: 1fr; } .cform__row { grid-template-columns: 1fr; } .showcase__media { padding: 20px; } .cform__submit { width: 100%; text-align: center; } } @media (prefers-reduced-motion: reduce) { .route:hover { transform: none; } } /* --- Award wall (Accreditations) ---------------------------------------- */ .awardwall { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 20px; margin-top: 48px; align-items: center; } .awardwall li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 22px; display: flex; align-items: center; justify-content: center; min-height: 108px; } .awardwall img { max-width: 100%; max-height: 68px; width: auto; height: auto; } @media (max-width: 991px) { .awardwall { grid-template-columns: repeat(3, minmax(0,1fr)); } } /* 560px, not the usual 479px, and deliberately so: at three columns below ~560px each badge is ~101px wide and the "9-Grid for Digital Learning" sub-line stops being readable. Dropping to two columns at 560 keeps it legible. The only intentional departure from the breakpoint ladder. */ @media (max-width: 560px) { .awardwall { grid-template-columns: repeat(2, minmax(0,1fr)); } } /* Certification badges need more room than a 26px glyph. */ .valuecards--badgeIcons .valuecard__icon { width: 72px; height: 72px; background: transparent; border-radius: 0; margin-bottom: 14px; } .valuecards--badgeIcons .valuecard__icon img { width: auto; height: auto; max-width: 100%; max-height: 72px; object-fit: contain; } .phero__shot[style*="max-width"] { margin-inline: auto; } /* ========================================================================== Revision pass 3 — unframed media, split layouts, cookie banner ========================================================================== */ /* Icons that are artwork in their own right, not glyphs in a tinted chip. */ .valuecards--plainIcons .valuecard__icon { width: 72px; height: 72px; background: transparent; border-radius: 0; margin-bottom: 16px; } .valuecards--plainIcons .valuecard__icon img { width: 72px; height: 72px; } /* Screenshot cards: the whole image sits above the copy, never cropped, and carries no background of its own. The artwork is capped and centred so the tiles stay even without cropping. (Merged 2026-08-13 — this used to be two blocks 20 lines apart, the second silently overriding the first. Same computed result, one place to edit.) */ .valuecards--photoTop .valuecard { padding-top: 0; overflow: hidden; display: flex; flex-direction: column; } .valuecards--photoTop .valuecard__shot { margin: 0 -24px 18px; background: transparent; display: flex; align-items: center; justify-content: center; padding-top: 22px; } .valuecards--photoTop .valuecard__shot img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; display: block; max-height: 210px; object-position: center; } /* Flat media — no frame, no shadow. */ .checkblock--flat .checkblock__media img, .introgrid--flat .introgrid__media img { box-shadow: none; border-radius: 0; } /* --- Image beside a capability grid -------------------------------------- */ .splitgrid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr); gap: 56px; align-items: center; margin-top: 44px; } .splitgrid__media img { width: 100%; height: auto; display: block; } .splitgrid__list { margin-top: 0; } @media (max-width: 991px) { .splitgrid { grid-template-columns: 1fr; gap: 32px; } } /* --- Long-form policy pages ---------------------------------------------- */ .legal { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 64px; align-items: start; } .legal__toc { position: sticky; top: 96px; } .legal__tocLabel { font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; } .legal__toc ul { display: flex; flex-direction: column; gap: 2px; } .legal__toc a { display: block; padding: 7px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-2); } .legal__toc a:hover { background: var(--accent-tint); color: var(--accent-ink); text-decoration: none; } .prose { max-width: 72ch; } .prose__section + .prose__section { margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--line); } .prose h2 { font-size: 1.375rem; font-weight: 900; letter-spacing: -.01em; margin-bottom: 18px; } .prose h3 { font-size: var(--fs-lg); font-weight: 700; color: var(--accent-ink); margin: 26px 0 8px; } .prose p { font-size: 1rem; line-height: 1.75; color: var(--ink-2); } .prose p + p { margin-top: 16px; } .prose ul, .prose ol { margin: 16px 0 0 22px; display: flex; flex-direction: column; gap: 10px; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li { font-size: 1rem; line-height: 1.7; color: var(--ink-2); padding-left: 4px; } .prose a { color: var(--accent-ink); font-weight: 700; } .prose strong { color: var(--ink); } .prose__meta { font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: 32px; } @media (max-width: 991px) { .legal { grid-template-columns: 1fr; gap: 32px; } .legal__toc { position: static; border-bottom: 1px solid var(--line); padding-bottom: 20px; } .legal__toc ul { flex-direction: row; flex-wrap: wrap; gap: 6px; } .legal__toc a { background: var(--surface-2); } } /* ========================================================================== Editorial — index cards, filters, article pages ========================================================================== */ .section--flush { padding-bottom: 0; } /* --- Post cards ---------------------------------------------------------- */ .postgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; } .postgrid--3 { margin-top: 44px; } .postcard { display: flex; } .postcard[hidden] { display: none; } .postcard__link { display: flex; flex-direction: column; width: 100%; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); } .postcard__link:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; } .postcard__media { display: block; background: var(--accent-tint); aspect-ratio: 1200 / 627; } .postcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .postcard__noimage { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(135deg, var(--accent-tint) 0 14px, var(--surface-2) 14px 28px); } .postcard__body { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 26px; flex: 1; } .postcard__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .75rem; color: var(--ink-3); } .postcard__tag { background: var(--accent-tint); color: var(--accent-ink); font-weight: 700; padding: 3px 10px; border-radius: var(--r-pill); letter-spacing: .01em; } .postcard h3 { font-size: var(--fs-lg); font-weight: 700; line-height: 1.35; } .postcard p { font-size: var(--fs-base); line-height: 1.55; color: var(--ink-2); } .postcard__more { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 700; color: var(--accent-ink); } .postcard__more svg { width: 16px; height: 16px; transition: transform var(--t-fast); } .postcard__link:hover .postcard__more svg { transform: translateX(4px); } /* --- Tag filter ---------------------------------------------------------- */ .filterbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .filterbar__label { font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; } .filterchip { font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast); } .filterchip:hover { border-color: var(--accent); color: var(--accent-ink); } .filterchip.is-on { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-on); } .filterbar__count { margin-top: 16px; font-size: var(--fs-sm); color: var(--ink-3); } /* --- Article ------------------------------------------------------------- */ .post { padding: 56px 0 0; } .post__head { max-width: 74ch; margin-inline: auto; text-align: center; } .post__head .h1 { font-size: clamp(2rem, 4vw, 3rem); margin-top: 12px; } .post__meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-top: 20px; font-size: var(--fs-sm); color: var(--ink-3); } .post__tag { background: var(--accent-tint); color: var(--accent-ink); font-weight: 700; padding: 4px 12px; border-radius: var(--r-pill); font-size: .8125rem; } .post__tag:hover { text-decoration: none; background: var(--accent-fill); color: var(--accent-on); } .post__summary { margin-top: 22px; } .post__hero { margin: 48px auto 0; max-width: 1000px; } .post__hero img { width: 100%; height: auto; border-radius: var(--r-lg); display: block; } .post__body { margin: 48px auto 0; } .post__body img { max-width: 100%; height: auto; border-radius: var(--r-md); display: block; margin: 24px auto; } .post__body figure { margin: 28px 0; } .post__body figcaption { margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-3); text-align: center; } .post__body iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--r-md); margin: 24px 0; } .post__body table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: var(--fs-base); } .post__body th, .post__body td { text-align: left; padding: 12px 16px; border: 1px solid var(--line); vertical-align: top; } .post__body th { background: var(--surface-2); font-weight: 700; } .post__body blockquote { margin: 28px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--accent); font-size: var(--fs-lg); line-height: 1.7; color: var(--ink); } .post__download { margin-top: 44px; padding: 28px 30px 30px; background: var(--accent-tint); border-radius: var(--r-lg); text-align: center; } .post__download p { font-size: var(--fs-lg); line-height: 1.6; margin-bottom: 20px; color: var(--ink); } @media (max-width: 1080px) { .postgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 767px) { .postgrid { grid-template-columns: 1fr; } .post { padding-top: 36px; } .post__hero { margin-top: 32px; } .post__body { margin-top: 32px; } } @media (prefers-reduced-motion: reduce) { .postcard__link:hover { transform: none; } } /* On the deep-blue bands the theme accent is too dark to carry display type, so each theme supplies a light counterpart. */ .cta .accent-display, .cta .accent-display strong, .statband .accent-display, .statband .accent-display strong, .spotlight .accent-display, .spotlight .accent-display strong, .defband .accent-display, .defband .accent-display strong { color: var(--accent-onDark); }