/* Static content remains visible until the local controllers enhance it. */ .ui-demo { min-width:0; } .ui-dashboard { width:100%; } .ui-dashboard .pd-scale { transform-origin:0 0; } .ui-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } .ui-carousel { position:relative; width:100%; } .ui-carousel-frame { position:relative; } .ui-carousel-stage { display:grid; position:relative; touch-action:pan-y; } .ui-carousel-stage > * { grid-area:1 / 1; min-width:0; } .ui-carousel-stage > [aria-hidden] { opacity:0; visibility:hidden; pointer-events:none; transition:opacity .5s ease, visibility .5s; } .ui-carousel-stage > .is-current { opacity:1; visibility:visible; pointer-events:auto; } .ui-carousel-controls { display:flex; align-items:center; gap:.75rem; } .ui-pagination { display:flex; align-items:center; gap:.5rem; } .ui-pagination-dot { width:1.5rem; height:1.5rem; display:grid; place-items:center; padding:0; background:transparent; cursor:pointer; } .ui-pagination-dot::after { content:''; width:.5rem; height:.5rem; border-radius:50%; background:currentColor; opacity:.35; } .ui-pagination-dot[aria-pressed="true"]::after { opacity:1; border-radius:0; } .ui-carousel-arrow { width:2.5rem; height:2.5rem; border:1px solid currentColor; border-radius:50%; background:transparent; color:inherit; cursor:pointer; font-size:1.2rem; } .ui-carousel button:focus-visible { outline:2px solid currentColor; outline-offset:4px; } .ui-carousel--featured .ui-carousel-stage { padding-right:9.3125rem; } .ui-carousel--featured .ui-carousel-controls { position:absolute; left:0; bottom:0; } .ui-carousel--featured .ui-carousel-arrow { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; } .ui-carousel--featured .ui-carousel-arrow:focus-visible { position:static; width:2.5rem; height:2.5rem; clip-path:none; } .ui-carousel--featured .featured-slide_image-wrap { cursor:e-resize; } .ui-carousel--content { height:350vh; } .ui-carousel--content .ui-carousel-frame { position:sticky; top:0; height:100vh; display:flex; align-items:center; } .ui-carousel--content .ui-carousel-stage { width:100%; } .ui-carousel--content .ui-carousel-controls { position:absolute; right:0; top:50%; transform:translateY(-50%); } .ui-carousel--content .ui-pagination { flex-direction:column; } .ui-marquee { width:100%; overflow:hidden; } .ui-marquee-track { display:flex; width:max-content; animation:brand-marquee var(--marquee-duration,30s) linear infinite; } .ui-marquee-group { display:flex; flex:none; align-items:center; gap:var(--marquee-gap,48px); padding-right:var(--marquee-gap,48px); } .ui-marquee-group > * { flex:none; } .ui-marquee-group > img { height:48px; object-fit:contain; } @keyframes brand-marquee { to { transform:translateX(var(--marquee-distance)); } } [data-tabs-element="tab-panel"][hidden] { display:none!important; } /* Headlines in Scholé's display face (scripts/fonts.json). The hero h1, the h-style utilities and heading wrappers set no family of their own and would inherit the Inter body. */ h1, .heading_wrap, [class*="u-text-style-h"] { font-family:var(--_typography-primitives---family--display-sans); } /* The hero headline at New Spirit's own spacing: 92% of the display size keeps it on its two lines. */ .heading_wrap.variant-7 { font-size:calc(var(--_typography-tokens---display--size) * .92); } .heading_wrap.variant-7, .heading_wrap.variant-7 h1 { line-height:1.06; } /* Nav links in Inter 400, as on schole.ai/more (the theme wrappers otherwise set 500). */ .nav_link { --_typography-tokens---nav-link--weight:400; } .nav_dropdown_mega_wrap:not(.is-open) { visibility:hidden; pointer-events:none; } .nav_dropdown_mega_wrap.is-open { visibility:visible; } /* The schole.ai menus' feature cards carry a mascot, not a photo: centred on white, never cropped. */ .card-full_img.is-art { background:#fff; } .mega_feature-art { width:44%; max-height:78%; object-fit:contain; } .mega_feature-cta { color:var(--text--primary-headings); font-size:var(--_typography-tokens---body-small--size); font-weight:500; } .mega_feature-cta::after { content:" \2192"; } .mega_menu-footer { display:flex; gap:24px; padding-top:20px; border-top:1px solid var(--border--primary); } .mega_menu-footer-link { color:var(--text--secondary-body); font-size:var(--_typography-tokens---body-xsmall--size); text-decoration:none; } .mega_menu-footer-link:hover { color:var(--text--primary-headings); } .mega_feature-eyebrow { color:#615c9c; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; } /* Phones get schole.ai/more's shorter grouped sheet (scripts/nav.json "mobile") in place of the bar's menus. */ .tuc-mobile-nav { display:none; } .tuc-mobile-label { margin:18px 0 2px; color:#8b95c4; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; } .tuc-mobile-link { display:flex; align-items:center; justify-content:space-between; min-height:48px; color:#14151c; font-size:16px; text-decoration:none; border-bottom:1px solid #eef0f4; } .tuc-mobile-link::after { content:"\203A"; color:#b8bdd3; font-size:20px; } @media (max-width:991px) { .nav_menu .nav_links_wrap:not(.tuc-mobile-nav) { display:none; } .tuc-mobile-nav { display:block; width:100%; padding:0 1.25rem 1rem; } } /* The hover dropdowns at the size of the deployed schole.ai/more menus: a 960px panel centred under the bar and joined to it (square top, rounded bottom), 12px inset, two columns of 83px items and a 300px card column (Product 323px tall with its developer links, Solutions and Company 282px, Resources 369px). Only the size changes; colours, type and the card stay. */ @media (min-width:992px) { .nav_dropdown_mega_wrap .mega_wrap { background:transparent; } .nav_dropdown_mega_wrap .u-container { padding:0; } .tuc-dd { box-sizing:border-box; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:0; width:min(960px, calc(100vw - 48px)); max-width:none; margin:16px auto 0; padding:0; overflow:hidden; background:#fff; border:1px solid #e1e8f0; border-top:0; border-radius:0 0 16px 16px; box-shadow:0 24px 60px -20px rgba(15,23,42,.25); } .tuc-dd .mega_menu { gap:0; max-width:none; padding:12px; } .tuc-dd .mega_menu > .u-text-style-h4 { display:none; } .tuc-dd .mega_menu-grid { gap:4px; grid-auto-rows:83px; } .tuc-dd .mega_nav-link { box-sizing:border-box; gap:2px; height:83px; padding:12px; border-radius:12px; overflow:hidden; } .tuc-dd .mega_nav-link:hover { background:#f8f8fb; } .tuc-dd .mega_nav-link .u-text-style-small { font-size:.9rem; line-height:1.5; } .tuc-dd .mega_nav-link .u-text-style-xsmall { font-size:.8rem; line-height:1.375; } .tuc-dd .mega_menu-footer { margin:12px -12px -12px; padding:10px 24px; min-height:40px; box-sizing:border-box; align-items:center; } .tuc-dd .mega_feature-container { border:0; } .tuc-dd .mega_feature { box-sizing:border-box; display:flex; height:calc(100% - 24px); margin:12px; padding:16px; border-radius:12px; } .tuc-dd .card-full_wrap { height:100%; justify-content:flex-start; } .tuc-dd .card-full_img.is-art { flex:none; aspect-ratio:auto; height:90px; margin-bottom:10px; } .tuc-dd .card-full_content { padding:0; gap:4px; } .tuc-dd .card-full_inner-content { gap:4px; } .tuc-dd .heading_wrap.is-text-version { font-size:1.05rem; line-height:1.25; } .tuc-dd .card-full_description { font-size:.8rem; line-height:1.375; } .tuc-dd .mega_feature-cta { font-size:.85rem; } } .nav_links_item > .nav_dropdown_mega_wrap { flex-basis:100%; } .nav_links_item > .nav_dropdown_mega_wrap .mega_menu > .u-text-style-h4 { display:none; } .nav_menu-button[aria-expanded="true"] .nav_menu-icon-line { background:currentColor; } .footer_layout { opacity:1; } .footer-label_wrap[aria-expanded="true"] .footer-dropdown-icon { transform:rotate(180deg); } .intro-sticky-wrap[data-reveal-ready] { min-height:calc(200vh + 480px); } .intro-sticky-wrap[data-reveal-ready] .intro-sticky { height:100vh; position:sticky; top:0; } .intro-sticky-wrap[data-reveal-ready] .intro-sticky_below { margin-top:-100vh; position:sticky; top:0; min-height:100vh; } .intro-sticky-wrap[data-reveal-ready] .intro-image_wrap { transform:scale(var(--intro-scale,.4)); transform-origin:50% 0; } .intro-sticky-wrap[data-reveal-ready] .intro-sticky { opacity:var(--intro-opacity,1); transition:opacity .7s ease; } .section-background-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* Preserve the original floating-shape video; Bloom supplies its surface. */ .what-we-do-visual { position:relative; isolation:isolate; } .what-we-do-bloom { position:absolute; inset:0; z-index:2; background:transparent; } .what-we-do-bloom::after { display:none; } .what-we-do-bloom .schole-bloom__canvas { transition:none; } /* A baked factory render with only small SVG parcels and LEDs in motion. */ .new-text-media_style.learning-factory { position:relative; isolation:isolate; background:#fff; min-height:0; align-self:start; } .lf-scene { position:absolute; top:3%; left:7%; width:86%; aspect-ratio:1; pointer-events:none; } .lf-render, .lf-motion { position:absolute; inset:0; display:block; width:100%; height:100%; } .lf-animate { animation-duration:9s; animation-timing-function:linear; animation-iteration-count:infinite; animation-play-state:paused; } .learning-factory.is-running .lf-animate { animation-play-state:running; } .lf-incoming { animation-name:lf-intake; animation-delay:var(--parcel-delay); } .lf-outgoing { animation-name:lf-output; animation-duration:8s; animation-delay:var(--parcel-delay); } .lf-parcel--0 { --parcel-delay:-2s; } .lf-parcel--1 { --parcel-delay:-6s; } .lf-incoming.lf-parcel--1 { --parcel-delay:-5s; } .lf-incoming.lf-parcel--2 { --parcel-delay:-8s; } .lf-display { animation-name:lf-status; animation-duration:4s; } @keyframes lf-intake { 0% { transform:translate(355px,968px); opacity:0; } 8%,87% { opacity:1; } 100% { transform:translate(652px,765px); opacity:0; } } @keyframes lf-output { 0% { transform:translate(590px,595px); opacity:0; } 12%,83% { opacity:1; } 100% { transform:translate(758px,659px); opacity:0; } } @keyframes lf-status { 0%,100% { opacity:.45; } 45%,65% { opacity:1; } } @media (prefers-reduced-motion:reduce) { .learning-factory .lf-animate { animation-play-state:paused!important; } } @media (max-width:991px) { .ui-carousel--featured .ui-carousel-stage { padding-right:5rem; } } @media (max-width:767px) { /* 1rem, not 0: at 0 the slide text and photo ran to the screen edge on phones. */ .ui-carousel--featured .ui-carousel-stage { padding-right:1rem; } .ui-carousel--featured .ui-carousel-controls { position:relative; margin-top:1rem; } .ui-carousel--content { height:auto; } .ui-carousel--content .ui-carousel-frame { position:relative; height:auto; display:block; } .ui-carousel--content .ui-carousel-controls { position:relative; top:auto; right:auto; transform:none; margin-top:2rem; } .ui-carousel--content .ui-pagination { flex-direction:row; } .tabbed-content_link-list-inner { flex-direction:column; align-items:stretch; } .tabbed-content_link-list-inner > [data-tabs-element="tab-panel"] { padding:1.5rem 0; } .tabbed-content_link-list-inner > .tabbed-content_link { justify-content:space-between; width:100%; } /* Stacked on a phone, the closed tabs get an outline and a 44px row so they read as tappable. */ .tabbed-content_link-list-inner > .tabbed-content_link:not(.is-active) { min-height:44px; border:1px solid rgba(20,21,28,.15); border-radius:6px; } /* Portrait photos in the landscape results slides keep the faces in frame. */ .ui-carousel--content .image_wrap.variant-6 .image_src { object-position:50% 30%; } /* The testimonial name and role were 10px on phones. */ .attibution-content_wrap { font-size:12px; } .footer_link-list[hidden] { display:none; } .intro-sticky-wrap[data-reveal-ready] { min-height:0; } .intro-sticky-wrap[data-reveal-ready] .intro-sticky_below { margin-top:0; min-height:0; position:relative; } } @media (prefers-reduced-motion:reduce) { .ui-carousel-stage > [aria-hidden] { transition:none; } .ui-carousel--content { height:auto; padding:3rem 0; } .ui-carousel--content .ui-carousel-frame { position:relative; height:auto; } .ui-marquee-track { animation:none; } .ui-dashboard * { animation:none!important; transition:none!important; } .intro-sticky-wrap[data-reveal-ready] { min-height:0; } .intro-sticky-wrap[data-reveal-ready] .intro-sticky { display:none; } .intro-sticky-wrap[data-reveal-ready] .intro-sticky_below { margin-top:0; position:relative; } } /* "Trusted by learners from" logo banner, ported from the schole.ai home page (new-landing-page: landing-page.js + styles/theme.css). Pure CSS, no script. */ .tuc-trusted { width:100%; text-align:center; } .tuc-trusted_label { margin:0; font-size:.875rem; line-height:1.25rem; color:rgb(96,103,138); } .tuc-trusted_viewport { margin-top:1rem; overflow:hidden; -webkit-mask-image:linear-gradient(to right, transparent, black 2rem, black calc(100% - 2rem), transparent); mask-image:linear-gradient(to right, transparent, black 2rem, black calc(100% - 2rem), transparent); } .tuc-trusted_marquee { display:flex; width:max-content; animation:tucTrustedMarquee 72s linear infinite; } @keyframes tucTrustedMarquee { from { transform:translateX(0); } to { transform:translateX(-50%); } } .schole-logo-track { display:flex; flex-shrink:0; align-items:center; gap:32px; padding-right:32px; } .schole-logo-item { display:flex; flex-shrink:0; align-items:center; justify-content:center; height:54px; width:auto; padding:0 4px; } .schole-marquee-logo { height:36px; width:auto; max-width:175px; object-fit:contain; opacity:.88; } .schole-marquee-logo[src$="nbc.png"], .schole-marquee-logo[src$="decathlon.png"] { height:44px; } @media (min-width:640px) { .tuc-trusted_label { font-size:1rem; line-height:1.5rem; } .schole-marquee-logo { height:40px; max-width:190px; } .schole-marquee-logo[src$="nbc.png"], .schole-marquee-logo[src$="decathlon.png"] { height:48px; } } @media (prefers-reduced-motion:reduce) { .tuc-trusted_viewport { overflow-x:auto; } .tuc-trusted_marquee { animation:none; } .schole-logo-track[aria-hidden="true"] { display:none; } } /* The closing heading balances its lines ("Your team’s / next chapter") instead of leaving "chapter" alone. */ .new-text-media_sticky .heading_wrap h2 { text-wrap:balance; } .ui-carousel--featured[data-single] .featured-slide_image-wrap { cursor:auto; } /* Businesses | Learners above the header (KJ, Nov 2: "two toggles at the top", a site switch above the header). Two links, the current site filled with the brand gradient; Learners opens the learner home. */ .audience-switch { position:relative; z-index:2; background:#14151c; } .audience-switch_inner { max-width:1440px; margin:0 auto; padding:0 32px; display:flex; gap:2px; } .audience-switch a { display:inline-flex; align-items:center; height:36px; padding:0 16px; font-family:var(--_typography-primitives---family--primary-family); font-size:14px; font-weight:400; line-height:1.3; color:rgba(255,255,255,.72); text-decoration:none; transition:color .2s ease, background-color .2s ease; } .audience-switch a:hover { color:#ffffff; background-color:rgba(255,255,255,.08); } .audience-switch a[aria-current="page"] { color:#ffffff; background:linear-gradient(270deg, #9075c0 0%, #6e94cf 100%); } .audience-switch a:focus-visible { outline:2px solid #ffffff; outline-offset:-4px; } @media (max-width:767px) { .audience-switch_inner { padding:0; } .audience-switch a { padding:0 12px; } } /* "Powered by the best adaptive learning engine" with the Scholé AI logo and a button to the learner home (KJ, Nov 2), between "Build the workforce of the future" and the customer results. */ .schole-engine { background:#ffffff; padding:112px 32px; } .schole-engine_inner { max-width:1376px; margin:0 auto; text-align:center; } /* The sentence on one line from 1024px (KJ, Nov 2: "not stacked"), the Scholé AI logo centred under it (KJ, later). */ .schole-engine_title { display:flex; flex-direction:column; align-items:center; justify-content:center; row-gap:32px; margin:0; font-family:var(--_typography-primitives---family--display-serif); font-weight:400; font-size:clamp(26px, 2.3vw, 36px); line-height:1.2; letter-spacing:-0.01em; color:#14151c; text-wrap:balance; } .schole-engine_logo { display:block; flex:none; width:min(440px, 80%); height:auto; } @media (min-width:1024px) { .schole-engine_text { white-space:nowrap; } } .schole-engine_cta { margin-top:44px; display:flex; justify-content:center; } @media (max-width:767px) { .schole-engine { padding:72px 20px; } .schole-engine_cta { margin-top:32px; } } /* A video under "Build the skills your business needs next" (KJ, Nov 2), then the engine section. A 16:9 placeholder frame until the video arrives (see the comment in index.html for the