keeps list semantics; the button
carries the aria-pressed + aria-controls. A small fire-orange bar on the
left of the active row mirrors the visible phone screen so users see at a
glance which benefit corresponds to what's on the phone.
========================================================================= */
/* Button reset inside the alumni benefit row */
body .eduway-section--alumni .alumni-benefit__btn {
display: flex;
align-items: flex-start;
gap: 16px;
width: 100%;
margin: 0;
padding: 12px 14px;
background: transparent;
border: 0;
border-radius: 14px;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
transition: transform 0.25s ease;
}
/* Title + body inside the button — these were /
before; now s
styled to look the same. Display:block for proper stacking. */
body .eduway-section--alumni .alumni-benefit__btn .alumni-benefit__title,
body .eduway-section--alumni .alumni-benefit__btn .alumni-benefit__body {
display: block;
}
/* Hover affordance — title shifts to fire-300 + small horizontal nudge.
No background tint. */
body .eduway-section--alumni .alumni-benefit__btn:hover {
transform: translateX(2px);
}
body .eduway-section--alumni .alumni-benefit__btn:hover .alumni-benefit__title {
color: var(--fire-300);
}
/* (No active highlight — the phone screen is the only feedback for which
benefit is selected. Removed the fire bar + tinted background per request.) */
/* Focus-visible — keyboard users get a clear ring inside the dark surface */
body .eduway-section--alumni .alumni-benefit__btn:focus-visible {
outline: 2px solid var(--fire-500);
outline-offset: 2px;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
body .eduway-section--alumni .alumni-benefit__btn {
transition: none;
}
}
/* =========================================================================
LOGOS — full eduway wordmark (img tag) replaces the inline E + text combo
========================================================================= */
.eduway-nav .brand__logo {
display: block;
height: 24px;
width: auto;
}
.eduway-drawer__logo {
display: block;
height: 32px;
width: auto;
}
.integrations-hub__hub .integrations-hub__logo {
display: block;
width: 56px;
height: 56px;
}
@media (max-width: 767px) {
.integrations-hub__hub .integrations-hub__logo {
width: 38px;
height: 38px;
}
}
/* Hide the now-orphaned wordmark span if any old pattern still emits it */
.eduway-nav .brand__text,
.integrations-hub__hub .integrations-hub__name { display: none; }
/* Footer brand logo (dark-bg variant) */
.eduway-footer__logo {
display: block;
height: 32px;
width: auto;
}
/* =========================================================================
INTEGRATIONS — HUB-AND-SPOKES CONSTELLATION
========================================================================= */
body .eduway-section--integrations .integrations-grid { display: none; }
.integrations-hub {
width: 100%;
margin: 64px auto 0;
}
.integrations-hub__inner {
position: relative;
width: 100%;
max-width: 720px;
margin: 0 auto;
aspect-ratio: 1;
display: grid;
place-items: center;
}
.integrations-hub__lines {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
overflow: visible;
}
.integrations-hub__line {
fill: none;
stroke: var(--plum-300);
stroke-width: 1.5;
stroke-dasharray: 2 7;
stroke-linecap: round;
opacity: 0.55;
animation: integrations-flow 2.6s linear infinite;
}
.integrations-hub__line:nth-child(2) { animation-delay: -0.4s; }
.integrations-hub__line:nth-child(3) { animation-delay: -0.8s; }
.integrations-hub__line:nth-child(4) { animation-delay: -1.2s; }
.integrations-hub__line:nth-child(5) { animation-delay: -1.6s; }
.integrations-hub__line:nth-child(6) { animation-delay: -2.0s; }
@keyframes integrations-flow {
to { stroke-dashoffset: -36; }
}
@media (prefers-reduced-motion: reduce) {
.integrations-hub__line { animation: none; }
}
.integrations-hub__hub {
position: relative;
z-index: 3;
width: 144px;
height: 144px;
border-radius: 999px;
background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
box-shadow:
0 0 0 1px rgba(255, 127, 28, 0.35),
inset 0 0 0 6px var(--paper),
0 24px 60px -16px rgba(255, 127, 28, 0.45),
0 4px 14px rgba(26, 15, 31, 0.06);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
}
.integrations-hub__hub::before {
content: "";
position: absolute;
inset: -16px;
border-radius: 999px;
background: radial-gradient(circle, rgba(255, 127, 28, 0.22) 0%, rgba(255, 127, 28, 0) 65%);
z-index: -1;
animation: hub-pulse 3.2s ease-in-out infinite;
}
.integrations-hub__pulse {
position: absolute;
inset: -2px;
border-radius: 999px;
border: 1.5px solid var(--fire-500);
opacity: 0;
animation: hub-ring 3.2s ease-out infinite;
pointer-events: none;
}
.integrations-hub__name {
font-family: var(--font);
font-weight: 700;
font-size: 14px;
color: var(--plum-900);
letter-spacing: -0.01em;
}
@keyframes hub-pulse {
0%, 100% { transform: scale(1); opacity: 0.6; }
50% { transform: scale(1.18); opacity: 1; }
}
@keyframes hub-ring {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(1.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.integrations-hub__hub::before,
.integrations-hub__pulse { animation: none; }
}
.integrations-hub__nodes {
position: absolute;
inset: 0;
margin: 0;
padding: 0;
list-style: none;
pointer-events: none;
}
body .integrations-hub__nodes .integration-card {
position: absolute;
width: 132px;
min-height: 0;
padding: 14px 12px;
pointer-events: auto;
z-index: 2;
}
@media (min-width: 768px) {
body .integrations-hub__nodes .integration-card {
width: 148px;
padding: 16px 14px;
}
}
/* Dynamic radial layout — JS sets --node-x / --node-y on each card based on
total node count and container size. Add or remove an .integration-card
in the markup and everything reflows automatically. */
body .integrations-hub__nodes .integration-card {
top: 50%;
left: 50%;
transform:
translate(-50%, -50%)
translate(var(--node-x, 0px), var(--node-y, 0px));
transition: transform 0.25s ease, box-shadow 0.25s ease;
/* Override the default horizontal flex (icon + name + type in a row): in
the radial hub each card is only ~140px wide, way too narrow for the
horizontal layout. Stack vertically so all the text fits. */
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px !important;
padding: 14px 14px 16px !important;
min-height: 0 !important;
text-align: left;
overflow: hidden;
}
body .integrations-hub__nodes .integration-card .integration-card__icon {
width: 36px;
height: 36px;
}
body .integrations-hub__nodes .integration-card .integration-card__name {
font-size: 14px;
line-height: 1.18;
margin: 0;
max-width: 100%;
word-break: break-word;
}
body .integrations-hub__nodes .integration-card .integration-card__type {
font-size: 10px;
margin: 0;
}
body .integrations-hub__nodes .integration-card:hover {
transform:
translate(-50%, -50%)
translate(var(--node-x, 0px), calc(var(--node-y, 0px) - 4px));
box-shadow: 0 12px 32px -10px rgba(255, 127, 28, 0.28);
}
/* Tablet — keep the constellation but tighten radii and node width */
@media (min-width: 768px) and (max-width: 1023px) {
.integrations-hub__inner { max-width: 560px; }
body .integrations-hub__nodes .integration-card { width: 132px; }
}
/* MOBILE — collapse the constellation into a tight 2-column grid */
@media (max-width: 767px) {
.integrations-hub { margin-top: 24px; }
.integrations-hub__inner {
aspect-ratio: auto;
max-width: 100%;
display: block;
}
.integrations-hub__lines { display: none; }
/* Hub sits closer to the tile grid below so the section reads as one
unit instead of a hub + a gap + a grid. */
.integrations-hub__hub {
position: relative;
width: 92px;
height: 92px;
margin: 0 auto 14px;
}
.integrations-hub__hub .integrations-hub__logo { width: 28px; height: 28px; }
.integrations-hub__hub .integrations-hub__name { font-size: 11px; }
/* Subtle vertical wisp from hub to grid — keeps the connection metaphor on mobile */
.integrations-hub__hub::after {
content: "";
position: absolute;
left: 50%;
bottom: -14px;
width: 1.5px;
height: 14px;
background: linear-gradient(180deg, var(--fire-500) 0%, transparent 100%);
transform: translateX(-50%);
opacity: 0.55;
}
.integrations-hub__nodes {
position: relative;
inset: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
body .integrations-hub__nodes .integration-card {
position: relative !important;
width: 100% !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
padding: 14px 12px;
min-height: 92px;
}
body .integrations-hub__nodes .integration-card:hover {
transform: translateY(-2px) !important;
}
body .integrations-hub__nodes .integration-card__name { font-size: 14px; }
body .integrations-hub__nodes .integration-card__type { font-size: 10px; }
}
/* =============================================================
RIBBON-SWEEP HERO
Scoped under .ribbon-preview to coexist with the existing
.ribbon (chip/pill) class earlier in this stylesheet.
============================================================= */
.ribbon-preview {
position: relative;
min-height: 100svh;
padding: clamp(18px, 3vw, 34px);
overflow: hidden;
isolation: isolate;
}
/* Keep sticky-nav clearance from .eduway-section--hero. */
.eduway-section--hero.ribbon-preview { padding-top: 88px; }
@media (min-width: 1024px) {
.eduway-section--hero.ribbon-preview { padding-top: 120px; }
}
.ribbon-preview::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background:
radial-gradient(circle at 78% 22%, rgba(255,127,28,0.16), transparent 36%),
radial-gradient(circle at 18% 86%, rgba(11,179,149,0.10), transparent 40%),
linear-gradient(180deg, var(--paper-0), var(--paper));
}
/* Hairline instrument-panel frame inset from the section edges */
.ribbon-preview::after {
content: "";
position: absolute;
inset: clamp(16px, 2vw, 24px);
border: 1px solid var(--mist);
border-radius: var(--r-4);
pointer-events: none;
z-index: 0;
}
.ribbon-preview__image {
position: absolute;
/* Full bleed on the right half of the section — no inset, no border,
no shadow. The photo IS the right half of the section. */
inset: 0 0 0 38%;
z-index: -1;
border-radius: 0;
overflow: hidden;
box-shadow: none;
}
/* No overlay on the photo. Hero.png has a transparent background, so
the section paper shows through anywhere the asset is empty — there's
nothing to fade *into*. The previous paper-overlay was painting a
semi-opaque rectangle over the left edge of the image element, which
ended visibly somewhere around the photo subject and read as a divide.
With this gone, the transparent PNG dissolves naturally into the
section paper and the atmospheric blotches (on the section ::after
above) tint everything uniformly. */
.ribbon-preview__image::after {
content: none;
display: none;
}
/* HERO BG STACK — flatten so the left + right halves read as one surface.
Layers from back to front:
::before (z: -2) — solid --paper (no atmosphere here, no opaque
linear that would hide the photo)
__image (z: -1) — full-bleed photo on the right half
::after (z: 0) — fire + volt radial blotches painted ACROSS the
entire section, on top of both the empty left
half AND the photo, so the same atmospheric
tint covers both halves uniformly. The "cut"
between greenish-left + white-right disappears
because the green/orange wash now spans both.
content (z: 2) — ribbons / copy, on top of everything */
.ribbon-preview::before {
background: var(--paper) !important;
}
.ribbon-preview::after,
body .ribbon-preview::after {
content: "" !important;
display: block !important;
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
pointer-events: none !important;
border: 0 !important;
border-radius: 0 !important;
background:
radial-gradient(circle at 78% 22%, rgba(255,127,28,0.18), transparent 38%),
radial-gradient(circle at 18% 86%, rgba(11,179,149,0.12), transparent 42%) !important;
}
/* HERO TOP RHYTHM — anchor the wordmark closer to the top of the page.
The previous desktop layout vertically centered the wordmark + ribbon
stack inside one viewport, which pushed the eduway logo deep into
the page on initial load. Now we top-align the inner stack and trim
the ribbon-stage's top padding so the logo sits a comfortable
distance below the floating nav, not in the middle of empty space. */
@media (min-width: 768px) {
body .ribbon-preview .ribbon-preview__inner {
align-items: start !important;
min-height: 0 !important;
padding-top: 0 !important;
}
body .ribbon-preview .ribbon-stage {
padding: 0 !important;
}
body .ribbon-preview .ribbon-stack {
padding-top: 0 !important;
padding-bottom: 24px;
}
body .eduway-section--hero.ribbon-preview {
min-height: auto;
padding-top: clamp(72px, 6vw, 96px);
padding-bottom: clamp(48px, 6vw, 96px);
}
}
.ribbon-preview__image img {
width: 100%; height: 100%;
object-fit: cover;
transform-origin: center;
}
.ribbon-preview__image::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, var(--paper-0) 0%, rgba(250,250,247,0.86) 32%, rgba(250,250,247,0.05) 70%),
radial-gradient(circle at 78% 22%, rgba(255,127,28,0.22), transparent 32%);
}
.ribbon-preview__image.is-visible img { animation: hero-image-breathe 18s ease-in-out infinite alternate; }
.ribbon-preview__inner {
width: min(100%, 1380px);
min-height: calc(100svh - clamp(36px, 6vw, 68px));
margin-inline: auto;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
}
.ribbon-stage {
position: relative;
z-index: 2;
width: min(100%, 620px);
padding: clamp(44px, 7vw, 92px) 0 clamp(26px, 5vw, 70px);
}
.ribbon-stack {
display: flex;
flex-direction: column;
align-items: flex-start;
perspective: 900px;
perspective-origin: 30% 50%;
transform-style: preserve-3d;
padding: 32px 0;
margin: 0;
}
.ribbon-tilt {
display: inline-block;
transform-style: preserve-3d;
transform-origin: 50% 50% -180px;
transform:
rotateY(calc(var(--mx, 0) * 18deg))
rotateX(calc(var(--my, 0) * -14deg));
transition: transform 700ms cubic-bezier(.16,1,.3,1);
}
.ribbon-tilt.is-active { will-change: transform; }
.ribbon-tilt + .ribbon-tilt { margin-top: 6px; }
.ribbon-tilt--logo { margin-left: clamp(4px, 1.6vw, 22px); }
.ribbon-tilt--dropouts { margin-left: clamp(14px, 6vw, 96px); }
.ribbon-tilt--alumni { margin-left: clamp(6px, 3vw, 48px); }
/* Scoped to override the global .ribbon (chip) rule earlier in the file.
Signal v0.2: tighter --r-2, crisp ivory + hairline border, sharper shadow. */
.ribbon-preview .ribbon {
--ribbon-bg: var(--paper-0);
--ribbon-fg: var(--ink-900);
--depth: 0px;
--land-rotate: -1.5deg;
--fall-rotate: -3deg;
position: relative;
display: inline-flex;
align-items: center;
width: fit-content;
max-width: min(100%, calc(100vw - clamp(40px, 8vw, 112px)));
padding: 0;
gap: 0;
border-radius: var(--r-2);
background: transparent;
color: var(--ribbon-fg);
border: 0;
box-shadow: none;
font-family: var(--font);
font-size: clamp(30px, 4.8vw, 70px);
line-height: 1;
font-weight: 700;
font-style: normal;
letter-spacing: -0.025em;
text-transform: none;
white-space: nowrap;
transform-style: preserve-3d;
transform: translate3d(0, -200px, -260px) rotateX(-50deg) rotateZ(var(--fall-rotate));
opacity: 0;
animation: ribbon-drop-3d 760ms cubic-bezier(.22,.82,.22,1) forwards;
will-change: transform, opacity;
}
.ribbon-face {
position: relative;
z-index: 5;
display: inline-flex;
align-items: center;
border-radius: inherit;
padding: clamp(12px, 1.4vw, 18px) clamp(22px, 3vw, 42px) clamp(16px, 1.8vw, 26px);
background: var(--ribbon-bg);
border: 1px solid var(--mist);
box-shadow: var(--sh-2);
transform: translateZ(0);
}
.ribbon-glint-clip {
position: absolute;
inset: 0;
border-radius: inherit;
overflow: hidden;
pointer-events: none;
z-index: 6;
transform: translateZ(1px);
}
.ribbon-glint-clip::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
opacity: 0;
transform: translateX(-130%) skewX(-16deg);
}
.ribbon-preview .ribbon--applications .ribbon-glint-clip::after { animation: ribbon-glint 1100ms cubic-bezier(.32,.72,.22,1) 1500ms forwards; }
.ribbon-preview .ribbon--dropouts .ribbon-glint-clip::after { animation: ribbon-glint 1100ms cubic-bezier(.32,.72,.22,1) 1700ms forwards; }
.ribbon-preview .ribbon--alumni .ribbon-glint-clip::after { animation: ribbon-glint 1100ms cubic-bezier(.32,.72,.22,1) 1900ms forwards; }
.ribbon-preview .ribbon--logo {
z-index: 4;
--depth: 70px;
--fall-rotate: -1.5deg;
--land-rotate: 0deg;
animation: none;
opacity: 1;
transform: translate3d(0, 0, var(--depth)) rotateZ(var(--land-rotate));
}
.ribbon-preview .ribbon--logo .ribbon-face {
padding: 4px 0;
background: transparent;
box-shadow: none;
border: 0;
}
.ribbon-preview .ribbon--logo .ribbon-glint-clip { display: none; }
.ribbon-preview .ribbon--logo svg {
position: relative;
z-index: 1;
width: clamp(190px, 22vw, 280px);
height: auto;
display: block;
}
.ribbon-preview .ribbon--applications {
z-index: 1;
animation-delay: 0ms;
--depth: 0px;
--fall-rotate: -2deg;
--land-rotate: -1.5deg;
}
/* Dropouts — solid ink, fire-300 italic key. The dramatic counter-beat. */
.ribbon-preview .ribbon--dropouts {
--ribbon-bg: var(--ink-900);
--ribbon-fg: var(--paper);
z-index: 2;
animation-delay: 130ms;
--depth: 24px;
--fall-rotate: 4deg;
--land-rotate: 1.5deg;
}
.ribbon-preview .ribbon--dropouts .ribbon-face { border-color: var(--ink-700); }
/* Alumni — fire gradient, the warm payoff */
.ribbon-preview .ribbon--alumni {
--ribbon-fg: var(--ink-900);
z-index: 3;
animation-delay: 260ms;
--depth: 46px;
--fall-rotate: -3deg;
--land-rotate: -0.5deg;
}
.ribbon-preview .ribbon--alumni .ribbon-face {
background: linear-gradient(135deg, var(--fire-400) 0%, var(--fire-600) 100%);
border: 0;
box-shadow: var(--sh-warm);
color: var(--ink-900);
padding-right: clamp(30px, 4vw, 58px);
padding-bottom: clamp(18px, 2vw, 28px);
}
.ribbon-preview .ribbon-key,
.ribbon-preview .ribbon-tail { position: relative; z-index: 1; }
/* Key word — Instrument Serif italic. The new editorial moment. */
.ribbon-preview .ribbon-key {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
color: var(--fire-600);
letter-spacing: -0.02em;
font-size: 1.05em;
padding-right: 0.08em;
text-transform: none;
}
.ribbon-preview .ribbon-tail {
font-style: normal;
font-weight: 700;
letter-spacing: -0.025em;
text-transform: none;
}
.ribbon-preview .ribbon--dropouts .ribbon-key { color: var(--fire-300); }
.ribbon-preview .ribbon--alumni .ribbon-key { color: var(--ink-900); }
/* Inside the ribbon, the legacy .hl-pencil sweep is suppressed — the
Instrument Serif italic IS the editorial moment. */
.ribbon-preview .ribbon .hl-pencil { padding-bottom: 0; }
.ribbon-preview .ribbon .hl-pencil::after { display: none; }
.ribbon-copy {
max-width: 540px;
margin-top: clamp(24px, 4vw, 42px);
opacity: 0;
transform: translateY(20px);
animation: copy-rise 600ms cubic-bezier(.32,.72,.22,1) 1200ms forwards;
position: relative;
z-index: 2;
}
/* Desktop-only lede legibility — paper halo backdrop + heavy text-shadow
stack to lift the text above the breathing hero photo behind it. On
mobile there's no image overlap (hero is single-column), so the halo
would just look like an artifact. */
@media (min-width: 768px) {
.ribbon-copy .lede {
position: relative;
text-shadow:
0 0 8px var(--paper),
0 0 16px var(--paper),
0 0 24px var(--paper),
0 0 36px var(--paper);
}
.ribbon-copy .lede::before {
content: '';
position: absolute;
inset: -20px -56px;
z-index: -1;
background: radial-gradient(ellipse at center,
var(--paper) 0%,
rgba(250,250,247,0.85) 35%,
rgba(250,250,247,0.45) 65%,
transparent 100%);
pointer-events: none;
border-radius: 32px;
filter: blur(6px);
}
}
.ribbon-copy .ctas {
margin-top: 26px;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
@keyframes hero-image-breathe { to { transform: scale(1.14); } }
@keyframes ribbon-drop-3d {
0% { opacity: 0; transform: translate3d(0, -180px, -260px) rotateX(-50deg) rotateZ(var(--fall-rotate)); }
60% { opacity: 1; transform: translate3d(0, 6px, calc(var(--depth) + 14px)) rotateX(6deg) rotateZ(calc(var(--land-rotate) * 1.2)); }
82% { transform: translate3d(0, -2px, var(--depth)) rotateX(-1.5deg) rotateZ(var(--land-rotate)); }
100% { opacity: 1; transform: translate3d(0, 0, var(--depth)) rotateX(0deg) rotateZ(var(--land-rotate)); }
}
@keyframes ribbon-glint {
0%, 20% { opacity: 0; transform: translateX(-130%) skewX(-16deg); }
44% { opacity: 0.7; }
100% { opacity: 0; transform: translateX(230%) skewX(-16deg); }
}
@keyframes copy-rise { to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1180px) {
.ribbon-stage { margin-left: clamp(12px, 2vw, 34px); }
}
@media (min-width: 768px) and (max-width: 1024px) {
.ribbon-preview .ribbon { font-size: clamp(28px, 4vw, 48px); }
}
@media (max-width: 767px) {
.ribbon-preview { min-height: 100svh; padding: 22px 16px 26px; }
.eduway-section--hero.ribbon-preview { padding-top: 80px; }
.ribbon-preview::before {
background:
linear-gradient(180deg, rgba(255,248,240,0.94) 0%, rgba(255,248,240,0.82) 46%, rgba(255,248,240,0.68) 100%),
radial-gradient(circle at 82% 14%, rgba(255,127,28,0.22), transparent 36%);
}
/* Hide hero image on mobile — paired with media query so the bytes never load. */
.ribbon-preview__image { display: none; }
.ribbon-preview__inner { min-height: 0; align-items: flex-start; padding-top: 16px; }
.ribbon-stage { width: 100%; padding: 18px 0 12px; }
.ribbon-stack { align-items: flex-start; perspective: 700px; padding: 10px 0; gap: 9px; }
.ribbon-tilt { display: inline-block; transform: none; transition: none; width: auto; }
.ribbon-tilt + .ribbon-tilt { margin-top: 0; }
.ribbon-tilt--logo { margin-left: 4px; }
.ribbon-tilt--applications { margin-left: 14px; }
.ribbon-tilt--dropouts { margin-left: 32px; }
.ribbon-tilt--alumni { margin-left: 10px; }
.ribbon-preview .ribbon {
width: auto;
max-width: calc(100vw - 32px);
justify-content: flex-start;
border-radius: var(--r-2);
font-size: clamp(26px, 7.6vw, 40px);
line-height: 1.05;
text-align: left;
white-space: nowrap;
display: inline-flex;
}
.ribbon-face { padding: 10px 18px 13px; justify-content: flex-start; width: auto; }
.ribbon-preview .ribbon--logo .ribbon-face { padding: 4px 0; }
.ribbon-preview .ribbon--logo svg { width: clamp(150px, 44vw, 210px); }
.ribbon-preview .ribbon--alumni .ribbon-face { padding: 11px 22px 14px; }
.ribbon-preview .ribbon-key,
.ribbon-preview .ribbon-tail { font-weight: 700; }
.ribbon-preview .ribbon--alumni { font-size: clamp(24px, 7vw, 36px); line-height: 1.05; }
.ribbon-copy { max-width: none; margin-top: 26px; padding-left: 4px; }
.ribbon-copy .ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.ribbon-copy .btn { min-height: 46px; padding: 12px 18px; font-size: 15px; width: 100%; justify-content: center; }
}
@media (min-width: 560px) and (max-width: 767px) {
.ribbon-copy .ctas { flex-direction: row; }
.ribbon-copy .btn { width: auto; }
}
@media (hover: none) and (pointer: coarse) {
.ribbon-tilt {
transform:
translate3d(calc(var(--tx, 0) * 1px), calc(var(--ty, 0) * 1px), 0)
rotate(calc(var(--rz, 0) * 1deg));
transition: none;
}
}
@media (max-width: 374px) {
.ribbon-tilt--dropouts { margin-left: 22px; }
.ribbon-tilt--applications { margin-left: 10px; }
.ribbon-face { padding: 9px 14px 12px; }
.ribbon-preview .ribbon--logo .ribbon-face { padding: 4px 0; }
.ribbon-preview .ribbon--logo svg { width: clamp(140px, 44vw, 184px); }
.ribbon-preview .ribbon { font-size: clamp(22px, 7vw, 28px); }
.ribbon-preview .ribbon--alumni { font-size: clamp(20px, 6.4vw, 26px); }
}
@media (prefers-reduced-motion: reduce) {
.ribbon-preview__image img,
.ribbon-preview__image.is-visible img,
.ribbon-tilt {
animation: none;
transform: none;
transition: none;
}
.ribbon-preview .ribbon, .ribbon-copy {
animation: none;
opacity: 1;
transform: rotateZ(var(--land-rotate));
}
.ribbon-copy { transform: none; }
.ribbon-glint-clip::after { animation: none; opacity: 0; }
}
/* =========================================================================
SIGNAL v0.2 — INTEGRATIONS + FINAL CTA REDESIGN
These two sections are rewritten end-to-cascade so the rest of the file
keeps its structure but both bands flow with the rest of Signal: crisp
ivory surfaces, hairline borders, sharp geometry, mono labels, an italic
editorial moment, dual fire+volt radial atmosphere — no curved arches,
no blurred peach blobs, no warm-cream gradient hub.
========================================================================= */
/* ----------------------------------------------------------------------
INTEGRATIONS — architectural constellation
---------------------------------------------------------------------- */
body .eduway-section--integrations {
background: var(--paper);
padding: 80px 0;
position: relative;
}
@media (min-width: 1024px) { body .eduway-section--integrations { padding: 128px 0; } }
/* Subtle fire glow above the hub + volt glow below — same atmosphere
pattern Signal uses on the hero and megacta. Sits behind the content. */
body .eduway-section--integrations::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(circle at 78% 22%, rgba(255,127,28,0.10), transparent 38%),
radial-gradient(circle at 18% 86%, rgba(11,179,149,0.08), transparent 42%);
}
body .eduway-section--integrations > .eduway-container {
position: relative;
z-index: 1;
}
/* Header — matches Signal eyebrow + balanced italic h1 */
body .eduway-section--integrations .integrations-head {
max-width: 880px !important;
margin: 0 auto 56px !important;
text-align: center !important;
}
@media (min-width: 1024px) {
body .eduway-section--integrations .integrations-head { margin: 0 auto 80px !important; }
}
body .eduway-section--integrations .integrations-head .eyebrow {
margin: 0 auto 20px !important;
justify-content: center;
}
body .eduway-section--integrations .integrations-headline {
font-family: var(--font);
font-size: var(--fs-h2);
line-height: 1.08;
letter-spacing: -0.022em;
font-weight: 700;
color: var(--ink-900);
max-width: 22ch;
text-wrap: balance;
}
body .eduway-section--integrations .integrations-headline em.hl-italic {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
color: var(--fire-600);
letter-spacing: -0.01em;
}
body .eduway-section--integrations .integrations-lede {
margin: 0 auto !important;
max-width: 56ch;
text-align: center !important;
color: var(--ink-400);
}
/* Hub container — neutral, no warm gradient, hairline-bordered stage */
body .eduway-section--integrations .integrations-hub {
width: 100%;
margin: 0 auto;
max-width: 1080px;
}
body .eduway-section--integrations .integrations-hub__inner {
position: relative;
width: 100%;
max-width: 720px;
margin: 0 auto;
aspect-ratio: 1;
display: grid;
place-items: center;
}
/* Connection lines — volt teal, dashed, animated. Reads as live data sync.
Replaces sunrise's plum-300 lines for the kinetic Signal voice. */
body .eduway-section--integrations .integrations-hub__lines {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
overflow: visible;
}
body .eduway-section--integrations .integrations-hub__line {
fill: none;
stroke: var(--volt-500);
stroke-width: 1.5;
stroke-dasharray: 3 7;
stroke-linecap: round;
opacity: 0.55;
animation: signal-flow 2.6s linear infinite;
}
@keyframes signal-flow {
to { stroke-dashoffset: -36; }
}
@media (prefers-reduced-motion: reduce) {
body .eduway-section--integrations .integrations-hub__line { animation: none; }
}
/* Hub center — ink-900 disc, fire-glow halo, hairline mist border.
Replaces sunrise's cream gradient hub. Architectural, not organic. */
body .eduway-section--integrations .integrations-hub__hub {
position: relative;
z-index: 3;
width: 132px;
height: 132px;
border-radius: var(--r-pill, 9999px);
background: var(--ink-900);
box-shadow:
0 0 0 1px var(--mist),
0 24px 60px -16px rgba(255, 127, 28, 0.45),
0 4px 14px rgba(11, 8, 32, 0.18);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 0;
}
body .eduway-section--integrations .integrations-hub__hub::before {
content: "";
position: absolute;
inset: -18px;
border-radius: 9999px;
background: radial-gradient(circle, rgba(255,127,28,0.30) 0%, rgba(255,127,28,0) 65%);
z-index: -1;
animation: hub-pulse-signal 3.2s ease-in-out infinite;
}
body .eduway-section--integrations .integrations-hub__pulse {
position: absolute;
inset: -2px;
border-radius: 9999px;
border: 1.5px solid var(--fire-500);
opacity: 0;
animation: hub-ring-signal 3.2s ease-out infinite;
pointer-events: none;
}
body .eduway-section--integrations .integrations-hub__logo {
width: 54px;
height: 54px;
filter: brightness(0) invert(1); /* white logo on ink */
}
body .eduway-section--integrations .integrations-hub__name {
font-family: var(--mono);
font-weight: 500;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--volt-300);
}
@keyframes hub-pulse-signal {
0%, 100% { transform: scale(1); opacity: 0.55; }
50% { transform: scale(1.18); opacity: 1; }
}
@keyframes hub-ring-signal {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(1.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
body .eduway-section--integrations .integrations-hub__hub::before,
body .eduway-section--integrations .integrations-hub__pulse { animation: none; }
}
/* Integration cards — paper-0 + hairline mist + tight --r-3.
No more peach/butter/sage mix; the icon palette is clean fire/volt/ink. */
body .eduway-section--integrations .integrations-hub__nodes .integration-card {
background: var(--paper-0);
border: 1px solid var(--mist);
border-radius: var(--r-3);
padding: 14px 14px 16px !important;
box-shadow: var(--sh-1);
transition: transform var(--t2), box-shadow var(--t2), border-color var(--t2);
}
body .eduway-section--integrations .integrations-hub__nodes .integration-card:hover {
transform:
translate(-50%, -50%)
translate(var(--node-x, 0px), calc(var(--node-y, 0px) - 4px));
border-color: var(--ink-300);
box-shadow: var(--sh-2);
}
/* Reset all icon backgrounds to a unified fire-50 + fire-700, then per-type
subtle volt / ink variants. Square icon container, --r-2 corners. */
body .integration-card .integration-card__icon {
width: 38px;
height: 38px;
border-radius: var(--r-2);
background: var(--fire-50);
color: var(--fire-700);
display: grid;
place-items: center;
transition: transform var(--t2), background var(--t2), color var(--t2);
}
body .integration-card:hover .integration-card__icon {
transform: rotate(-6deg) scale(1.05);
}
body .integration-card--sis .integration-card__icon {
background: var(--volt-50);
color: var(--volt-700);
}
body .integration-card--lms .integration-card__icon {
background: var(--fire-50);
color: var(--fire-700);
}
body .integration-card--erp .integration-card__icon {
background: rgba(11,8,32,0.06);
color: var(--ink-700);
}
body .integration-card--add .integration-card__icon {
background: var(--fire-100);
color: var(--fire-700);
}
body .integration-card__name {
margin: 0 0 2px;
font-family: var(--font);
font-size: 14px;
font-weight: 700;
letter-spacing: -0.012em;
color: var(--ink-900);
line-height: 1.2;
}
body .integration-card__type {
margin: 0;
font-family: var(--mono);
font-size: 10px !important;
font-weight: 500;
font-style: normal;
letter-spacing: 0.14em !important;
text-transform: uppercase;
color: var(--ink-300);
}
/* "+ Your CRM" — Signal variant: dashed mist border, fire italic accent
on the name (Instrument Serif), subtle fire-50 fill on hover. */
body .integration-card--add {
background: var(--paper-0);
border: 1px dashed var(--mist);
}
body .integration-card--add .integration-card__name {
color: var(--fire-700);
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 16px;
letter-spacing: -0.01em;
}
body .integration-card--add .integration-card__type {
color: var(--fire-600);
}
body .integration-card--add:hover {
background: var(--fire-50);
border-color: var(--fire-300);
border-style: dashed;
}
/* Mobile collapse — keeps the existing 2-column grid logic but updates
the hub treatment to match. */
@media (max-width: 767px) {
body .eduway-section--integrations .integrations-hub__hub {
width: 96px;
height: 96px;
}
body .eduway-section--integrations .integrations-hub__logo {
width: 38px;
height: 38px;
}
body .eduway-section--integrations .integrations-hub__name { display: none; }
}
/* ----------------------------------------------------------------------
FINAL CTA — Signal megacta band
Replaces the curved arch + blurred peach blob with the v0.2 megacta:
paper-2 surface, hairline border, fire radial top-right + volt radial
bottom-left, italic editorial moment in the headline.
---------------------------------------------------------------------- */
body .eduway-section--final {
background: var(--paper);
padding: 80px 0 112px;
}
@media (min-width: 1024px) { body .eduway-section--final { padding: 112px 0 160px; } }
body .eduway-section--final .final-cta {
max-width: 1180px;
margin: 0 auto;
background: var(--paper-2);
border: 1px solid var(--mist);
border-radius: var(--r-4);
padding: 56px 28px;
position: relative;
overflow: hidden;
box-shadow: var(--sh-1);
}
@media (min-width: 768px) { body .eduway-section--final .final-cta { padding: 80px 48px; } }
@media (min-width: 1024px) { body .eduway-section--final .final-cta { padding: 112px 80px; border-radius: var(--r-5); } }
/* Replace .megacta__arch (the curved sun) with a fire radial blur in the
top-right corner. Matches the Signal megacta pattern. */
body .eduway-section--final .final-cta .megacta__arch {
all: unset;
content: "";
position: absolute;
right: -10%;
top: -30%;
width: 60%;
aspect-ratio: 1;
background: radial-gradient(closest-side, var(--fire-300), transparent 70%);
filter: blur(20px);
opacity: 0.55;
pointer-events: none;
z-index: 1;
display: block;
}
@media (min-width: 1024px) {
body .eduway-section--final .final-cta .megacta__arch {
right: -8%;
top: -25%;
width: 55%;
}
}
/* Replace the peach blob (::after) with a volt radial bottom-left. */
body .eduway-section--final .final-cta::after {
content: "";
position: absolute;
left: -5%;
bottom: -25%;
right: auto;
top: auto;
width: 45%;
aspect-ratio: 1;
background: radial-gradient(closest-side, var(--volt-300), transparent 70%);
filter: blur(30px);
opacity: 0.32;
border-radius: 0;
pointer-events: none;
z-index: 1;
}
/* Hairline frame inset 16px from the megacta edges — the instrument-panel
detail Signal uses on the hero. Threads the section into the rest. */
body .eduway-section--final .final-cta::before {
content: "";
position: absolute;
inset: 16px;
border: 1px solid var(--mist);
border-radius: var(--r-3);
pointer-events: none;
z-index: 1;
}
@media (min-width: 1024px) {
body .eduway-section--final .final-cta::before {
inset: 20px;
border-radius: var(--r-4);
}
}
body .eduway-section--final .final-cta__inner {
position: relative;
z-index: 3;
max-width: 720px;
}
body .eduway-section--final .final-cta__inner .eyebrow {
margin: 0 0 20px;
}
body .eduway-section--final .final-cta__headline {
font-family: var(--font);
font-size: clamp(32px, 5.4vw, 64px);
line-height: 1.04;
letter-spacing: -0.028em;
font-weight: 700;
color: var(--ink-900);
max-width: 18ch;
margin: 0 0 20px !important;
text-wrap: balance;
}
body .eduway-section--final .final-cta__headline em.hl-italic {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
color: var(--fire-600);
letter-spacing: -0.01em;
}
body .eduway-section--final .final-cta__lede {
font-size: clamp(15px, 2vw, 19px);
line-height: 1.55;
color: var(--ink-400);
max-width: 56ch;
margin: 0 0 32px !important;
}
body .eduway-section--final .final-cta__lede strong {
color: var(--ink-900);
font-weight: 700;
}
body .eduway-section--final .final-cta__ctas {
display: flex;
gap: 12px;
flex-wrap: wrap;
position: relative;
z-index: 3;
align-items: center;
}
/* A tiny mono "[ talk to us ]" technical accent under the CTA — only on
wider viewports — that mirrors the .hl-bracket / .mono-tag pattern from
the Signal showcase, threading the section visually into the rest. */
@media (min-width: 768px) {
body .eduway-section--final .final-cta__ctas::after {
content: "20 min · no slides · real product";
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-300);
margin-left: 6px;
}
}
@media (max-width: 480px) {
body .eduway-section--final .final-cta__ctas .btn { width: 100%; }
}
/* ----------------------------------------------------------------------
LIFECYCLE — Signal instrument readout
The dashed sage thread + colored phase markers are out. Replaced with
a horizontal hairline rail (the "track"), mono [00] bracket markers
for each phase, ink-square station dots, and a scroll-driven fire fill
that scrubs left → right behind the rail as the user travels through
the journey. Reads as a high-end product timeline, not a watercolor
thread. Reuses the existing GSAP timeline by piggybacking a single
--lifecycle-progress variable (set in the JS block below).
---------------------------------------------------------------------- */
body .eduway-section--lifecycle {
background: var(--paper);
position: relative;
overflow: hidden;
}
/* Same fire+volt atmosphere recipe used on integrations + hero */
body .eduway-section--lifecycle::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(circle at 88% 18%, rgba(255,127,28,0.08), transparent 38%),
radial-gradient(circle at 12% 90%, rgba(11,179,149,0.07), transparent 42%);
}
body .eduway-section--lifecycle > .eduway-container {
position: relative;
z-index: 1;
}
/* Header — italic moment */
body .eduway-section--lifecycle .lifecycle-headline em.hl-italic {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
color: var(--fire-600);
letter-spacing: -0.01em;
background: none;
padding: 0;
display: inline;
}
/* ─────────────────────────────────────────────────────────────────
THE TRACK
The dashed sunrise-sage SVG is hidden. A new horizontal rail is
composed from .lifecycle-thread itself + two pseudo-elements.
───────────────────────────────────────────────────────────────── */
/* Kill the wavy SVG — it's the sunrise voice */
body .eduway-section--lifecycle .lifecycle-thread__svg { display: none !important; }
/* Reset .lifecycle-thread to be a 1px rail container */
body .eduway-section--lifecycle .lifecycle-thread {
display: none;
position: relative;
max-width: 1180px;
width: 100%;
margin: 0 auto -10px !important;
padding: 0 56px !important;
background: transparent !important;
color: inherit;
pointer-events: none;
z-index: 2;
height: 56px;
--lifecycle-progress: 0;
}
@media (min-width: 1100px) {
body .eduway-section--lifecycle .lifecycle-thread { display: block; }
}
/* The empty rail — hairline mist running edge-to-edge */
body .eduway-section--lifecycle .lifecycle-thread::before {
content: "";
position: absolute;
left: 56px;
right: 56px;
bottom: 18px;
height: 1px;
background: var(--mist);
border-radius: 0;
}
/* The fire fill — scrubs L→R driven by --lifecycle-progress.
Uses scaleX so the GPU handles it. The gradient ends with sunset for
that signature warm bridge. A tiny volt-glow caps the leading edge. */
body .eduway-section--lifecycle .lifecycle-thread::after {
content: "";
position: absolute;
left: 56px;
right: 56px;
bottom: 18px;
height: 2px;
transform-origin: left center;
transform: scaleX(var(--lifecycle-progress, 0));
background: linear-gradient(
90deg,
var(--fire-500) 0%,
var(--sunset) 70%,
var(--fire-500) 100%
);
box-shadow:
0 0 0 1px rgba(255,127,28,0.10),
0 0 12px rgba(255,127,28,0.45);
will-change: transform;
transition: transform 80ms linear;
}
/* ─────────────────────────────────────────────────────────────────
STATION DOTS
Each .lifecycle-stop__dot becomes a sharp ink-900 square sitting on
the rail directly above its card. Volt-glow halo when its card pops
in (the existing GSAP timeline scales each dot 0.4 → 1 staggered).
───────────────────────────────────────────────────────────────── */
body .eduway-section--lifecycle .lifecycle-stop__dot {
background: var(--ink-900) !important;
border: 1px solid var(--fire-500);
border-radius: 2px;
box-shadow:
0 0 0 4px var(--paper),
0 0 0 5px var(--mist) !important;
width: 12px;
height: 12px;
position: absolute;
top: -8px;
left: 28px;
}
@media (min-width: 1100px) {
body .eduway-section--lifecycle .lifecycle-stop__dot {
top: -34px;
left: 50%;
transform: translateX(-50%);
width: 14px;
height: 14px;
}
}
/* Per-phase color override drop — they're all ink+fire now */
body .eduway-section--lifecycle .lifecycle-stop--01 .lifecycle-stop__dot,
body .eduway-section--lifecycle .lifecycle-stop--02 .lifecycle-stop__dot,
body .eduway-section--lifecycle .lifecycle-stop--03 .lifecycle-stop__dot,
body .eduway-section--lifecycle .lifecycle-stop--04 .lifecycle-stop__dot {
background: var(--ink-900);
}
/* Volt-300 pulsing halo — kicks in when the card lands (.is-active is
set by the existing GSAP timeline via dot scale, but we can also use
:hover as the always-on signal cue). */
body .eduway-section--lifecycle .lifecycle-stop:hover .lifecycle-stop__dot {
box-shadow:
0 0 0 4px var(--paper),
0 0 0 5px var(--volt-300),
0 0 16px rgba(11,179,149,0.55) !important;
animation: lifecycle-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes lifecycle-dot-pulse {
0%, 100% { transform: translateX(-50%) scale(1); }
50% { transform: translateX(-50%) scale(1.18); }
}
/* Reset transform on the mobile dot which doesn't translateX */
@media (max-width: 1099px) {
@keyframes lifecycle-dot-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.18); }
}
}
/* ─────────────────────────────────────────────────────────────────
PHASE LABELS — mono brackets [01] [02] [03] [04]
The existing markup says "Phase 01" — we keep that text for screen
readers and visually-rewrap it with bracket pseudo-elements.
───────────────────────────────────────────────────────────────── */
body .eduway-section--lifecycle .lifecycle-stop__num {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 0 16px !important;
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
font-style: normal;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-700) !important;
background: var(--paper-2);
padding: 4px 10px 4px 8px;
border-radius: 4px;
border: 1px solid var(--mist);
width: max-content;
}
body .eduway-section--lifecycle .lifecycle-stop__num::before {
content: "[";
color: var(--fire-500);
font-weight: 700;
margin-right: 2px;
}
body .eduway-section--lifecycle .lifecycle-stop__num::after {
content: "]";
color: var(--fire-500);
font-weight: 700;
margin-left: 2px;
}
/* ─────────────────────────────────────────────────────────────────
CARDS — unified Signal palette
No more sage/butter/peach/fire rainbow. All four cards share the
same paper-0 + hairline mist + tighter --r-3, with a subtle warm
progression on the icon background only (fire-50 → fire-100 →
fire-200/300 tinted) so the row still reads as "warming up to the
alumni-fire payoff" without breaking the kinetic ink+fire voice.
───────────────────────────────────────────────────────────────── */
body .eduway-section--lifecycle .lifecycle-stop {
background: var(--paper-0) !important;
border: 1px solid var(--mist) !important;
border-radius: var(--r-3) !important;
padding: 32px 26px 30px !important;
box-shadow: var(--sh-1);
transition: transform var(--t2), box-shadow var(--t2), border-color var(--t2);
overflow: hidden;
position: relative;
}
/* Gradient sweep on hover — same diagonal recipe as Signal feature cards */
body .eduway-section--lifecycle .lifecycle-stop::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 40%, rgba(255,127,28,0.06) 50%, transparent 60%);
transform: translateX(-100%);
transition: transform 800ms cubic-bezier(.16,1,.3,1);
pointer-events: none;
}
body .eduway-section--lifecycle .lifecycle-stop:hover {
transform: translateY(-3px);
border-color: var(--ink-300) !important;
box-shadow: var(--sh-2) !important;
}
body .eduway-section--lifecycle .lifecycle-stop:hover::after {
transform: translateX(100%);
}
/* Icons — square with --r-2, unified ink+fire treatment with a gentle
warming progression across the four phases. */
body .eduway-section--lifecycle .lifecycle-stop__icon {
width: 48px !important;
height: 48px !important;
border-radius: var(--r-2) !important;
background: var(--fire-50) !important;
color: var(--fire-700) !important;
display: grid;
place-items: center;
margin-bottom: 22px;
transition: transform var(--t2), background var(--t2), color var(--t2);
}
body .eduway-section--lifecycle .lifecycle-stop:hover .lifecycle-stop__icon {
transform: rotate(-6deg) scale(1.05);
}
/* Subtle "warming up" — phase 01 starts cool (volt), phases 02-04 deepen
in fire saturation. Keeps the "journey progression" idea while staying
on Signal palette. */
body .eduway-section--lifecycle .lifecycle-stop--01 .lifecycle-stop__icon {
background: var(--volt-50) !important;
color: var(--volt-700) !important;
}
body .eduway-section--lifecycle .lifecycle-stop--02 .lifecycle-stop__icon {
background: var(--fire-50) !important;
color: var(--fire-700) !important;
}
body .eduway-section--lifecycle .lifecycle-stop--03 .lifecycle-stop__icon {
background: var(--fire-100) !important;
color: var(--fire-700) !important;
}
body .eduway-section--lifecycle .lifecycle-stop--04 .lifecycle-stop__icon {
background: var(--fire-500) !important;
color: var(--paper) !important;
box-shadow: var(--sh-warm);
}
/* Per-phase border-color overrides removed — every card uses the same
ink-300 hover state so the row reads as one cohesive instrument panel. */
body .eduway-section--lifecycle .lifecycle-stop--01:hover,
body .eduway-section--lifecycle .lifecycle-stop--02:hover,
body .eduway-section--lifecycle .lifecycle-stop--03:hover,
body .eduway-section--lifecycle .lifecycle-stop--04:hover {
border-color: var(--ink-300) !important;
box-shadow: var(--sh-2) !important;
}
/* Title + body — Signal voice */
body .eduway-section--lifecycle .lifecycle-stop__title {
font-family: var(--font);
color: var(--ink-900) !important;
font-size: clamp(20px, 2.4vw, 24px) !important;
letter-spacing: -0.018em !important;
line-height: 1.2 !important;
margin: 0 0 12px !important;
}
body .eduway-section--lifecycle .lifecycle-stop__body {
color: var(--ink-400) !important;
font-size: 14.5px !important;
line-height: 1.6 !important;
}
body .eduway-section--lifecycle .lifecycle-stop__body .hl-quote-em {
display: block;
margin-top: 10px;
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 1.08em;
color: var(--fire-600);
line-height: 1.35;
letter-spacing: -0.01em;
}
/* ─────────────────────────────────────────────────────────────────
MOBILE — hairline left rail on each card
Under 1100px the horizontal track is hidden. Each card gets a thin
2px fire bar on its left edge so the "instrument" voice still reads.
───────────────────────────────────────────────────────────────── */
@media (max-width: 1099px) {
body .eduway-section--lifecycle .lifecycle-stop::before {
content: "";
position: absolute;
left: 0;
top: 14%;
bottom: 14%;
width: 2px;
background: linear-gradient(180deg, var(--fire-500), var(--sunset));
border-radius: 0 2px 2px 0;
opacity: 0.55;
}
/* The dot doesn't make sense without a horizontal rail — promote it
into a bracket-style accent on the top-right of each card. */
body .eduway-section--lifecycle .lifecycle-stop__dot {
top: 18px;
left: auto;
right: 18px;
transform: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
body .eduway-section--lifecycle .lifecycle-thread::after { transition: none; }
body .eduway-section--lifecycle .lifecycle-stop:hover .lifecycle-stop__dot {
animation: none;
}
}
/* ----------------------------------------------------------------------
NAV — Signal v0.2 sticky bar
The pill + wavy hand-drawn underline + warm-cream fill belongs to
Sunrise. Signal wants a clean architectural bar: --r-3 corners,
crisp paper-0 fill behind a backdrop blur, hairline mist border,
sharp fire-500 underline that wipes left → right on hover/active.
The hamburger drops its fire pill for a square ghost button to
match the rest of the kinetic-editorial voice.
---------------------------------------------------------------------- */
body .eduway-nav {
position: fixed;
top: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
display: flex;
align-items: center;
gap: 4px;
padding: 8px;
background: rgba(255, 255, 255, 0.78);
border: 1px solid var(--mist);
border-radius: var(--r-3);
box-shadow: var(--sh-1);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
max-width: calc(100vw - 24px);
overflow: visible;
}
body .eduway-nav .brand {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px;
flex-shrink: 0;
}
body .eduway-nav .brand img { height: 22px; width: auto; }
body .eduway-nav .links {
display: flex;
align-items: center;
gap: 0;
}
/* Links — mono caps, ink-700 default, sharp fire-500 underline that
wipes in from the left on hover/active. Same recipe as the Signal
showcase navbar (.navbar .links a::after). */
body .eduway-nav .links a {
position: relative;
padding: 8px 14px;
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-400);
border-radius: var(--r-2);
transition: color var(--t1), background var(--t1);
min-height: 36px;
display: inline-flex;
align-items: center;
white-space: nowrap;
overflow: visible;
}
body .eduway-nav .links a:hover {
color: var(--ink-900);
background: transparent;
}
/* Reset the wavy SVG underline and replace with the Signal wipe.
Keeping ::after means the existing scroll-spy `is-active` class still
reveals the underline — we just changed what "underline" looks like. */
body .eduway-nav .links a::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: 4px;
height: 2px;
background: var(--fire-500);
background-image: none !important;
border-radius: 0;
transform: scaleX(0);
transform-origin: left center;
opacity: 0;
transition: transform var(--t2), opacity var(--t1);
}
body .eduway-nav .links a:hover::after,
body .eduway-nav .links a.is-active::after {
transform: scaleX(1);
opacity: 1;
}
body .eduway-nav .links a.is-active {
color: var(--ink-900);
}
@media (prefers-reduced-motion: reduce) {
body .eduway-nav .links a::after { transition: none; }
}
/* CTA — small fire button anchored to the right of the bar */
body .eduway-nav .cta {
margin-left: 6px;
}
/* HAMBURGER — square ghost button, --r-2 corners, ink stroke. The fire
pill + warm shadow is dropped — Signal doesn't ride on cream warmth. */
body .eduway-nav .hamburger {
width: 40px !important;
height: 40px !important;
border-radius: var(--r-2) !important;
background: transparent !important;
color: var(--ink-900) !important;
border: 1px solid var(--mist) !important;
box-shadow: none !important;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
padding: 0;
transition: background var(--t1), border-color var(--t1), transform var(--t1);
}
body .eduway-nav .hamburger:hover,
body .eduway-nav .hamburger:active {
background: var(--paper-2) !important;
border-color: var(--ink-900) !important;
transform: none !important;
}
body .eduway-nav .hamburger svg {
width: 18px;
height: 18px;
stroke: currentColor;
}
@media (max-width: 767px) {
body .eduway-nav { padding: 6px; gap: 6px; }
body .eduway-nav .links { display: none; }
body .eduway-nav .cta { display: none; }
body .eduway-nav .hamburger { display: inline-flex !important; }
/* When brand is hidden (hero in view), zero the flex gap so the empty
collapsed brand doesn't add a phantom 6px to the left side, and tighten
padding so the hamburger sits perfectly centered in the pill. */
body .eduway-nav:not(.is-revealed) {
padding: 4px;
gap: 0;
}
body .eduway-nav:not(.is-revealed) .brand {
display: none;
}
}
@media (max-width: 419px) {
body .eduway-nav .brand__text { display: none; }
}
@media (min-width: 768px) {
body .eduway-nav .hamburger { display: none !important; }
}
/* ----------------------------------------------------------------------
MOBILE DRAWER — Signal voice
Drops the giant plum-bold-700 list for a clean stacked menu: mono
caps eyebrow at the top, ink-900 link text, sharp fire-500 wipe
under the active item. Close button is a square --r-2 ghost.
---------------------------------------------------------------------- */
body .eduway-drawer {
position: fixed;
inset: 0;
background: var(--paper);
z-index: 200;
padding: 80px 24px 40px;
overflow-y: auto;
transform: translateY(-100%);
transition: transform var(--t2);
}
/* Subtle dot-grid floor — same architectural texture the body uses */
body .eduway-drawer::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.4;
background-image: radial-gradient(rgba(11,8,32,0.08) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(180deg, black 0%, black 70%, transparent 100%);
}
body .eduway-drawer > * { position: relative; z-index: 1; }
body .eduway-drawer[aria-hidden="false"] { transform: translateY(0); }
body .eduway-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 32px;
padding-bottom: 20px;
border-bottom: 1px solid var(--mist);
}
body .eduway-drawer__brand img { height: 24px; width: auto; }
body .eduway-drawer__close {
width: 44px !important;
height: 44px !important;
border-radius: var(--r-2) !important;
border: 1px solid var(--mist) !important;
background: transparent !important;
color: var(--ink-900) !important;
cursor: pointer;
display: grid;
place-items: center;
transition: background var(--t1), border-color var(--t1);
}
body .eduway-drawer__close:hover {
background: var(--paper-2) !important;
border-color: var(--ink-900) !important;
}
body .eduway-drawer ul {
list-style: none;
margin: 0;
padding: 0;
border-top: none;
}
body .eduway-drawer li {
border-bottom: 1px solid var(--mist);
}
body .eduway-drawer li + li { margin-top: 0; }
body .eduway-drawer a {
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--font);
font-size: clamp(22px, 4.4vw, 32px);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink-900);
padding: 18px 0;
transition: color var(--t1), padding var(--t2);
position: relative;
}
body .eduway-drawer a::after {
content: "→";
font-family: var(--mono);
font-size: 0.75em;
color: var(--fire-500);
font-weight: 400;
transition: transform var(--t1);
}
body .eduway-drawer a:hover {
color: var(--fire-600);
padding-left: 8px;
}
body .eduway-drawer a:hover::after {
transform: translateX(4px);
}
body .eduway-drawer__cta {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--mist);
}
/* ─────────────────────────────────────────────────────────────────
PINNED LIFECYCLE — desktop (≥1100px) layout for the GSAP scrub-pin
When .is-pinned is set by the JS the section locks to the viewport
while the rail scrubs and the cards animate in. We need:
· the section to fit in exactly one viewport (no clipping)
· the content to vertically center inside it
· the standard 144px padding override to step out of the way
The class is only applied at desktop with no reduced-motion, which
matches the matchMedia breakpoint that creates the pin in the JS.
───────────────────────────────────────────────────────────────── */
@media (min-width: 1100px) {
body .eduway-section--lifecycle.is-pinned {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 64px !important;
padding-bottom: 64px !important;
}
body .eduway-section--lifecycle.is-pinned > .eduway-container {
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
}
/* Tighten header margin so everything fits comfortably above the rail */
body .eduway-section--lifecycle.is-pinned .lifecycle-head {
margin: 0 auto 32px !important;
}
body .eduway-section--lifecycle.is-pinned .lifecycle-thread {
margin: 0 auto -10px !important;
}
}
/* ----------------------------------------------------------------------
DIFFERENTIATOR — three-row editorial with alternating photo column
Photos are transparent PNGs, so the container has no border / no
background / no overlay — the asset paints itself on the section.
Layout: text gets first refusal on horizontal space; photo column
sizes itself within a clamp so it can never squeeze the body copy
into a wrap. Rows alternate 01 photo right · 02 photo left · 03 right.
---------------------------------------------------------------------- */
/* All three rows have a photo column on web. We use minmax(0, ...) on the
text column so it can never shrink below 0 (its only source of "tight"
wrapping was the photo column being too greedy on tablet widths). */
@media (min-width: 768px) {
body .eduway-section--diff .diff-row.diff-row--with-photo {
grid-template-columns:
minmax(160px, 200px)
minmax(0, 1fr)
clamp(180px, 22vw, 240px) !important;
gap: clamp(24px, 3vw, 40px) !important;
align-items: center !important;
}
}
@media (min-width: 1100px) {
body .eduway-section--diff .diff-row.diff-row--with-photo {
grid-template-columns:
240px
minmax(0, 1fr)
clamp(240px, 24vw, 320px) !important;
gap: clamp(40px, 4vw, 56px) !important;
}
}
/* Reverse modifier: flip the columns so the photo sits on the left.
Source order stays for accessibility — grid-column placement swaps. */
@media (min-width: 768px) {
body .eduway-section--diff .diff-row.diff-row--reverse {
grid-template-columns:
clamp(180px, 22vw, 240px)
minmax(0, 1fr)
minmax(160px, 200px) !important;
}
body .eduway-section--diff .diff-row.diff-row--reverse .diff-row__photo {
grid-column: 1;
grid-row: 1;
}
body .eduway-section--diff .diff-row.diff-row--reverse .diff-row__num {
grid-column: 3;
grid-row: 1;
text-align: left !important;
}
body .eduway-section--diff .diff-row.diff-row--reverse .diff-row__content {
grid-column: 2;
grid-row: 1;
}
}
@media (min-width: 1100px) {
body .eduway-section--diff .diff-row.diff-row--reverse {
grid-template-columns:
clamp(240px, 24vw, 320px)
minmax(0, 1fr)
240px !important;
}
}
/* Photo container — transparent assets sit cleanly on the section's paper.
No border, no shadow, no overlay. Just a contain-fit canvas that scales
nicely between breakpoints. */
body .eduway-section--diff .diff-row__photo {
margin-top: 16px;
border-radius: 0;
overflow: visible;
box-shadow: none;
border: 0;
background: transparent;
aspect-ratio: 1 / 1;
position: relative;
transition: transform var(--t2);
}
@media (min-width: 768px) {
body .eduway-section--diff .diff-row__photo {
margin-top: 0;
aspect-ratio: 1 / 1;
min-height: 0;
align-self: center;
}
}
body .eduway-section--diff .diff-row__photo img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
background: transparent;
transition: transform var(--t3);
}
/* Kill the dark vignette overlay — the assets are transparent, an overlay
would just paint a ghost rectangle around them. */
body .eduway-section--diff .diff-row__photo::after { content: none !important; }
body .eduway-section--diff .diff-row--with-photo.is-focused .diff-row__photo img {
transform: scale(1.03);
}
/* Mobile — photos stack below the content. Wider aspect so they read
well at narrow widths. No frame, no overlay. */
@media (max-width: 767px) {
body .eduway-section--diff .diff-row__photo {
margin-top: 20px;
aspect-ratio: 16 / 10;
}
}
/* ----------------------------------------------------------------------
ALUMNI BACKGROUND PHOTO
Keep the original full-bleed faded photo treatment — Alumni.png is
the new asset, but it sits behind everything just like the previous
image did, with the orange arch + blob as atmosphere on top.
---------------------------------------------------------------------- */
/* (intentionally left as the original .alumni__bg-photo styles — no
overrides needed here. The src swap to Alumni.png is in the markup.) */
/* ----------------------------------------------------------------------
MOBILE HERO — drop the frame, tighten the stack
On narrow viewports the inset hairline frame around the whole hero
reads as a random rectangle, not an "instrument panel". The 100svh
centering also pushes the wordmark + ribbon stack into the middle of
a sea of empty paper. Both belong to the desktop layout only — on
mobile we want the content to start right under the floating nav and
flow naturally to the CTAs.
---------------------------------------------------------------------- */
@media (max-width: 767px) {
/* Kill the inset instrument-panel frame */
body .ribbon-preview::after {
content: none !important;
display: none !important;
}
/* Refresh the atmosphere — match the Signal palette (volt + fire)
instead of the inherited warm-cream gradient that's still bleeding
through from an earlier override. */
body .ribbon-preview::before {
background:
radial-gradient(circle at 82% 14%, rgba(255,127,28,0.18), transparent 38%),
radial-gradient(circle at 14% 88%, rgba(11,179,149,0.10), transparent 42%),
linear-gradient(180deg, var(--paper-0), var(--paper)) !important;
}
/* Section padding — anchor the content right below the floating nav.
The 80px top clears the nav comfortably; bottom stays loose. */
body .eduway-section--hero.ribbon-preview {
padding: 80px 16px 32px !important;
min-height: 0 !important;
}
/* Inner stack — let it grow with content instead of stretching to a
full viewport. align-items: flex-start so everything starts at the
top of the stage right where the user enters the page. */
body .ribbon-preview .ribbon-preview__inner {
min-height: 0 !important;
align-items: flex-start !important;
padding-top: 0 !important;
}
/* Ribbon stage — kill the extra top padding that was pushing the
wordmark down on small screens. */
body .ribbon-preview .ribbon-stage {
padding: 0 !important;
}
/* Ribbon stack — tighten gaps between logo and the three message
ribbons so they read as one tight composition. */
body .ribbon-preview .ribbon-stack {
padding: 0 !important;
gap: 8px;
margin-bottom: 18px;
}
/* The wordmark sits at the very top with breathing room before the
first message ribbon — but not the giant empty zone the centered
layout was producing. */
body .ribbon-preview .ribbon-tilt--logo {
margin-bottom: 12px;
}
/* Ribbon copy — pull it closer to the stack and trim the lede width
so it doesn't crowd the edge. */
body .ribbon-preview .ribbon-copy {
margin-top: 18px !important;
padding-left: 0 !important;
}
body .ribbon-preview .ribbon-copy .lede {
font-size: clamp(15px, 4.2vw, 17px);
line-height: 1.55;
}
body .ribbon-preview .ribbon-copy .ctas {
margin-top: 20px !important;
gap: 10px;
}
/* Hero scroll cue — keep it close to the CTAs, not floating in space. */
body .ribbon-preview .hero__scroll-cue {
margin-top: 24px;
}
}
/* ----------------------------------------------------------------------
NAV BRAND — hide while hero is in view, reveal on scroll past
The eduway wordmark is already the dominant element of the hero (the
first ribbon in the stack). Showing it again in the floating nav is
redundant. JS toggles `.is-revealed` on the nav when the hero leaves
the viewport — until then, the brand fades + scales out and the nav
is a clean links + CTA pill.
---------------------------------------------------------------------- */
body .eduway-nav .brand {
opacity: 0;
transform: translateX(-6px) scale(0.96);
transform-origin: left center;
pointer-events: none;
transition: opacity 320ms cubic-bezier(.32,.72,.22,1),
transform 320ms cubic-bezier(.32,.72,.22,1);
max-width: 0;
overflow: hidden;
padding-left: 0;
padding-right: 0;
margin-right: 0;
}
body .eduway-nav.is-revealed .brand {
opacity: 1;
transform: translateX(0) scale(1);
pointer-events: auto;
max-width: 200px;
padding-left: 10px;
padding-right: 10px;
margin-right: 4px;
}
@media (prefers-reduced-motion: reduce) {
body .eduway-nav .brand { transition: none; }
}
/* ----------------------------------------------------------------------
SUNRISE-RELIC HEADLINE TREATMENTS — replace with Signal v0.2 voice
These were leftover sunrise sage-dashed lines that escaped the earlier
pass. Now they use Signal's display-italic moment instead.
---------------------------------------------------------------------- */
/* Lifecycle headline italic — was sage dashed underline. Now pure
Instrument Serif italic in fire-600, no background-image trickery. */
body .eduway-section--lifecycle .lifecycle-headline .hl-italic {
background-image: none !important;
background: none !important;
padding-bottom: 0 !important;
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
color: var(--fire-600);
letter-spacing: -0.01em;
display: inline;
}
/* Mobile lifecycle dashed-thread connector between cards — drop it.
Each card in the new Signal redesign carries its own fire bar on the
left edge; the dashed sage thread that ran behind them was sunrise
leftover that no longer fits the architectural language. */
body .eduway-section--lifecycle .lifecycle-stops::before {
display: none !important;
content: none !important;
}
/* ----------------------------------------------------------------------
STAT-LABEL HIGHLIGHTS
Two different treatments so each section reads cleanly:
PROBLEM — fire-500 → sunset gradient sweep (`.hl-sweep`). Bold
"look at this" highlight against the ink-400 label color. Same
recipe as the lifecycle thread, animated in via --pencil-fill.
OUTCOMES — semibold text + soft fire-50 background pill
(`.outcomes-mark`). Same body font so it reads naturally without
pulling the eye. The pill background scales in from the left on
scroll via a `::before` pseudo-element with `scaleX(0→1)`.
Triggered by the GSAP block below toggling `.is-in`.
---------------------------------------------------------------------- */
/* Problem section sweep — sized to sit cleanly over the label text */
body .eduway-section--problem .problem-stat__label .hl-sweep {
font-weight: 600;
color: var(--ink-900);
white-space: nowrap;
}
body .eduway-section--problem .problem-stat__label .hl-sweep::after {
height: 0.22em;
bottom: -0.02em;
border-radius: 1px;
box-shadow: 0 0 12px rgba(255,127,28,0.35);
}
/* Outcomes tint-pill mark — semibold text with a soft fire-50
background pill that scales in from the left on scroll.
Same body font (Plus Jakarta Sans) so it reads naturally. */
body .eduway-section--outcomes .outcomes-stat__label .outcomes-mark {
font-weight: 600;
color: var(--ink-900);
position: relative;
display: inline;
padding: 1px 7px 2px;
border-radius: 4px;
white-space: nowrap;
/* Pill bg drawn via pseudo so we can animate scaleX */
}
body .eduway-section--outcomes .outcomes-stat__label .outcomes-mark::before {
content: '';
position: absolute;
inset: 0;
border-radius: 4px;
background: var(--volt-100);
transform-origin: left center;
transform: scaleX(0);
transition: transform 500ms cubic-bezier(.32,.72,.22,1);
z-index: -1;
}
body .eduway-section--outcomes .outcomes-stat__label .outcomes-mark.is-in::before {
transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
body .eduway-section--outcomes .outcomes-stat__label .outcomes-mark::before {
transform: scaleX(1); transition: none;
}
}
/* ----------------------------------------------------------------------
LIFECYCLE CARDS v2 — compact, icon next to title, no tilt
Phase numbers are removed in markup. Icon + title now live in one
flex row at the top of each card. Bodies take up less vertical space.
The hover-tilt rotation on the icon is disabled (still keeps a soft
color shift on hover for affordance).
---------------------------------------------------------------------- */
/* Tighter card padding so the cards feel architectural rather than
a tall block of whitespace. */
body .eduway-section--lifecycle .lifecycle-stop {
padding: 22px 22px 24px !important;
}
@media (min-width: 768px) {
body .eduway-section--lifecycle .lifecycle-stop {
padding: 24px 22px 26px !important;
}
}
@media (min-width: 1100px) {
body .eduway-section--lifecycle .lifecycle-stop {
padding: 26px 22px 28px !important;
}
}
/* New head row — icon + title side by side, vertically centered */
body .eduway-section--lifecycle .lifecycle-stop__head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
/* Icon container — keep --r-2 square, drop the bottom margin and
stop the rotate-on-hover. */
body .eduway-section--lifecycle .lifecycle-stop__icon {
width: 40px !important;
height: 40px !important;
border-radius: var(--r-2) !important;
margin-bottom: 0 !important;
flex-shrink: 0;
display: grid;
place-items: center;
transition: background var(--t2), color var(--t2);
}
/* Override the previous rotate(-6deg) scale(1.05) on hover — user
asked for no tilt. Keep an instant color/bg shift for affordance. */
body .eduway-section--lifecycle .lifecycle-stop:hover .lifecycle-stop__icon {
transform: none !important;
}
/* Title — sit on the same baseline as the icon. Bumped tracking down
slightly so it reads as a row label. */
body .eduway-section--lifecycle .lifecycle-stop__head .lifecycle-stop__title {
margin: 0 !important;
font-size: clamp(18px, 2.1vw, 21px) !important;
letter-spacing: -0.014em !important;
line-height: 1.2 !important;
flex: 1;
min-width: 0;
}
/* ----------------------------------------------------------------------
HERO SCROLL CUE — Signal v0.2 voice
Replaces the cream Sunrise pill with an instrument-grade indicator:
a vertical hairline track with a fire dot traveling down, and a
mono-caps "SCROLL" label. No background, no bounce, no chrome.
---------------------------------------------------------------------- */
body .hero__scroll-cue.hero__scroll-cue--signal {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
margin: 32px auto 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
width: max-content;
color: var(--ink-400);
text-decoration: none;
transition: color 220ms cubic-bezier(.32,.72,.22,1);
}
body .hero__scroll-cue.hero__scroll-cue--signal:hover {
background: transparent !important;
transform: none !important;
color: var(--ink-900);
}
body .hero__scroll-cue--signal .hero__scroll-cue-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
font-style: normal;
color: inherit;
}
body .hero__scroll-cue--signal .hero__scroll-cue-track {
position: relative;
display: block;
width: 3px;
height: 40px;
background: var(--mist);
border-radius: 3px;
overflow: hidden;
}
body .hero__scroll-cue--signal .hero__scroll-cue-dot {
position: absolute;
left: 50%;
top: 0;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--fire-500);
transform: translate(-50%, -100%);
box-shadow: 0 0 10px rgba(255,127,28,0.6);
animation: hero-cue-travel 1.8s cubic-bezier(.55,.05,.55,.95) infinite;
}
@keyframes hero-cue-travel {
0% { transform: translate(-50%, -100%); opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { transform: translate(-50%, 40px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
body .hero__scroll-cue--signal .hero__scroll-cue-dot { animation: none; opacity: 1; transform: translate(-50%, 14px); }
}
@media (max-width: 767px) {
/* Center the cue under the CTAs by switching the parent .ribbon-copy
into a flex column and aligning the cue to center. The cue itself
uses display: flex (block-level) so margin: auto centers it. */
body .ribbon-preview .ribbon-copy {
display: flex;
flex-direction: column;
align-items: stretch;
}
body .hero__scroll-cue.hero__scroll-cue--signal {
display: flex;
align-self: center;
}
}
/* The existing mobile ribbon motion lives in JS at the bottom of this file.
It writes --tx, --ty, --rz on each ribbon, combining both ambient float
AND scroll-driven offsets. The CSS that reads those vars is in the
`(hover: none) and (pointer: coarse)` block earlier in this stylesheet.
We don't add a separate scroll-only override here — that would clobber
the float animation. Stronger scroll values are configured in JS instead. */
/* ----------------------------------------------------------------------
ALUMNI APP — compact desktop + sticky-phone scroll-spy on mobile
Desktop: trim padding so the spotlight fits one viewport.
Mobile: reorder so head is on top, phone sticks while user scrolls
benefits, and the phone screen swaps as each benefit enters view.
---------------------------------------------------------------------- */
/* DESKTOP — tighten the section so it fits a single viewport */
@media (min-width: 1024px) {
body .eduway-section--alumni {
padding: 88px 0 !important;
}
body .eduway-section--alumni .alumni__grid {
gap: 64px !important;
grid-template-columns: 340px 1fr !important;
}
body .eduway-section--alumni .alumni-headline {
font-size: clamp(28px, 3.6vw, 44px) !important;
margin-bottom: 16px !important;
}
body .eduway-section--alumni .alumni-lede {
margin-bottom: 24px !important;
}
body .eduway-section--alumni .alumni-benefits {
gap: 18px 28px !important;
margin-bottom: 20px !important;
}
body .eduway-section--alumni .alumni-close {
margin-top: 20px !important;
padding-top: 18px;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
body .eduway-section--alumni {
padding: 72px 0 !important;
}
}
/* MOBILE — scroll-locked sequence: head, phone, benefit, close.
Layout rules in normal mode AND pinned mode below.
`display: contents` on .alumni__content lifts its children into the
parent flex container so we can interleave them with the phone. */
@media (max-width: 767px) {
body .eduway-section--alumni {
padding: 56px 0 !important;
}
body .eduway-section--alumni .alumni__grid {
display: flex !important;
flex-direction: column;
gap: 20px !important;
}
body .eduway-section--alumni .alumni__content {
display: contents;
}
body .eduway-section--alumni .alumni-head {
order: 1;
width: 100%;
margin: 0 !important;
}
body .eduway-section--alumni .alumni-headline {
font-size: clamp(26px, 6.8vw, 34px) !important;
margin-bottom: 10px !important;
max-width: 22ch;
}
body .eduway-section--alumni .alumni-lede {
margin: 0 !important;
font-size: 14px !important;
line-height: 1.5;
}
body .eduway-section--alumni .alumni__phone {
order: 2;
align-self: center;
max-width: 200px;
margin: 0 auto !important;
}
body .eduway-section--alumni .alumni-benefits {
order: 3;
grid-template-columns: 1fr !important;
gap: 16px !important;
margin: 0 !important;
}
body .eduway-section--alumni .alumni-benefit {
padding-top: 14px;
}
body .eduway-section--alumni .alumni-benefit__title {
font-size: 15.5px !important;
}
body .eduway-section--alumni .alumni-benefit__body {
font-size: 13.5px !important;
line-height: 1.5 !important;
}
body .eduway-section--alumni .alumni-close {
order: 4;
margin: 4px 0 0 !important;
padding-top: 14px;
font-size: 13px;
}
/* Hide the dot selector — the scroll-locked pin drives screen swaps. */
body .eduway-section--alumni .phone__dots {
display: none !important;
}
/* PINNED STATE — set by GSAP at the bottom of the file when the
section locks to the top of the viewport. The benefits collapse
into a single absolutely-positioned slot, so only one benefit
shows at a time, fading in/out as scroll progresses. */
body .eduway-section--alumni.is-pinned-alumni {
min-height: 100svh;
display: flex;
align-items: flex-start;
padding: 84px 0 32px !important;
}
/* Hide the floating Talk-to-us pill while pinned — it would otherwise
sit over the benefit text and shrink the readable area. */
body:has(.eduway-section--alumni.is-pinned-alumni.is-active-pin) .floating-cta {
opacity: 0 !important;
pointer-events: none !important;
transform: translateX(-50%) translateY(20px) !important;
}
/* Force the benefits container itself to span the full grid width.
Without this, the inner buttons sized to content and the text wrapped
one word per line in the right half of the viewport. */
body .eduway-section--alumni.is-pinned-alumni .alumni-benefits {
width: 100% !important;
max-width: 420px;
margin-left: auto !important;
margin-right: auto !important;
}
body .eduway-section--alumni.is-pinned-alumni .alumni-benefit {
left: 0 !important;
right: 0 !important;
width: 100%;
}
/* PINNED BENEFIT LAYOUT — icon centred above the text, text takes the
full width of the container and is centre-aligned. align-items: stretch
(default) lets the copy block fill horizontally; the icon centres
itself with align-self: center. */
body .eduway-section--alumni.is-pinned-alumni .alumni-benefit__btn {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 0 8px !important;
text-align: center;
width: 100%;
box-sizing: border-box;
}
body .eduway-section--alumni.is-pinned-alumni .alumni-benefit__icon {
align-self: center;
width: 36px;
height: 36px;
}
body .eduway-section--alumni.is-pinned-alumni .alumni-benefit__icon svg {
width: 18px;
height: 18px;
}
body .eduway-section--alumni.is-pinned-alumni .alumni-benefit__copy {
display: block;
width: 100%;
}
body .eduway-section--alumni.is-pinned-alumni .alumni-benefit__title {
display: block;
font-size: 16px !important;
text-align: center;
margin-bottom: 4px;
}
body .eduway-section--alumni.is-pinned-alumni .alumni-benefit__body {
display: block;
font-size: 13.5px !important;
line-height: 1.5 !important;
text-align: center;
margin: 0 auto;
max-width: 36ch;
}
}
/* Hide the decorative orange arch on the alumni section — it competes with
the lifecycle/sections aesthetic and reads as a leftover sunrise shape. */
body .eduway-section--alumni .alumni__bg-arch {
display: none !important;
}
/* SHORT-VIEWPORT RESCUE — iPhone SE (667px), iPhone X (812px), small Androids.
At full size the pinned layout (84px top + head + 180px-wide phone + benefit
slot + 32px bottom) can total >700px, clipping the bottom benefit body on
short screens. These scale every element down based on viewport HEIGHT so
the entire sequence always fits one viewport without cropping. */
/* ≤720px tall (covers iPhone X / 13 mini / pre-Pro) */
@media (max-width: 767px) and (max-height: 760px) {
body .eduway-section--alumni.is-pinned-alumni {
padding: 72px 0 24px !important;
}
body .eduway-section--alumni.is-pinned-alumni .alumni__grid {
gap: 12px !important;
}
body .eduway-section--alumni.is-pinned-alumni .alumni-headline {
font-size: clamp(20px, 5vw, 24px) !important;
margin-bottom: 6px !important;
}
body .eduway-section--alumni.is-pinned-alumni .alumni-lede {
font-size: 12.5px !important;
line-height: 1.45 !important;
}
body .eduway-section--alumni.is-pinned-alumni .alumni__phone {
max-width: 150px;
}
body .eduway-section--alumni.is-pinned-alumni .alumni-benefits {
min-height: 110px;
}
body .eduway-section--alumni.is-pinned-alumni .alumni-benefit__title {
font-size: 14.5px !important;
}
body .eduway-section--alumni.is-pinned-alumni .alumni-benefit__body {
font-size: 12.5px !important;
}
}
/* ≤680px tall (iPhone SE 1st/2nd/3rd gen, very small Androids) */
@media (max-width: 767px) and (max-height: 680px) {
body .eduway-section--alumni.is-pinned-alumni {
padding: 64px 0 16px !important;
}
body .eduway-section--alumni.is-pinned-alumni .alumni__grid {
gap: 8px !important;
}
body .eduway-section--alumni.is-pinned-alumni .alumni-headline {
font-size: 18px !important;
max-width: 26ch;
}
body .eduway-section--alumni.is-pinned-alumni .alumni-lede {
font-size: 11.5px !important;
line-height: 1.4 !important;
max-width: 32ch;
}
body .eduway-section--alumni.is-pinned-alumni .alumni__phone {
max-width: 130px;
}
body .eduway-section--alumni.is-pinned-alumni .alumni-benefits {
min-height: 96px;
}
body .eduway-section--alumni.is-pinned-alumni .alumni-benefit__icon {
width: 28px;
height: 28px;
}
body .eduway-section--alumni.is-pinned-alumni .alumni-benefit__icon svg {
width: 14px;
height: 14px;
}
body .eduway-section--alumni.is-pinned-alumni .alumni-benefit__title {
font-size: 13.5px !important;
margin-bottom: 2px;
}
body .eduway-section--alumni.is-pinned-alumni .alumni-benefit__body {
font-size: 12px !important;
line-height: 1.4 !important;
}
}
/* Mobile background photo — shift the visible crop so the photo's content
sits behind the foreground (phone + text), giving the section more of a
"subject in the background" feel than a centred photo competing for the eye. */
@media (max-width: 767px) {
body .eduway-section--alumni .alumni__bg-photo img {
object-position: 78% center;
}
body .eduway-section--alumni.is-pinned-alumni .alumni__grid {
gap: 14px !important;
}
body .eduway-section--alumni.is-pinned-alumni .alumni-head {
text-align: center;
}
body .eduway-section--alumni.is-pinned-alumni .alumni-headline {
margin: 0 auto 8px !important;
font-size: clamp(22px, 5.6vw, 28px) !important;
}
body .eduway-section--alumni.is-pinned-alumni .alumni-lede {
margin: 0 auto !important;
font-size: 13.5px !important;
max-width: 38ch;
}
body .eduway-section--alumni.is-pinned-alumni .alumni__phone {
max-width: 180px;
}
/* Benefits — single visible slot, all four absolutely stacked */
body .eduway-section--alumni.is-pinned-alumni .alumni-benefits {
position: relative;
min-height: 130px;
display: block !important;
}
body .eduway-section--alumni.is-pinned-alumni .alumni-benefit {
position: absolute;
inset: 0;
padding: 14px 0 0 !important;
border-top: 1px solid rgba(255, 214, 168, 0.18);
opacity: 0;
pointer-events: none;
transform: translateY(8px);
transition: opacity 360ms cubic-bezier(.32,.72,.22,1),
transform 360ms cubic-bezier(.32,.72,.22,1);
}
body .eduway-section--alumni.is-pinned-alumni .alumni-benefit.is-current {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
/* Tiny progress dots above the benefit area — quiet visual indicator
showing 1/4, 2/4, etc. as scroll moves through the sequence. */
body .eduway-section--alumni.is-pinned-alumni .alumni-benefits::before {
content: '';
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background:
radial-gradient(circle at 12.5% 50%, var(--fire-300) 2px, transparent 2.5px),
radial-gradient(circle at 37.5% 50%, var(--fire-300) 2px, transparent 2.5px),
radial-gradient(circle at 62.5% 50%, var(--fire-300) 2px, transparent 2.5px),
radial-gradient(circle at 87.5% 50%, var(--fire-300) 2px, transparent 2.5px);
opacity: 0.3;
}
body .eduway-section--alumni.is-pinned-alumni .alumni-benefits::after {
content: '';
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 4px;
display: block;
background: radial-gradient(circle at 50% 50%, var(--fire-500) 2.5px, transparent 3px);
margin-left: calc(-30px + var(--alumni-progress, 0) * 60px);
transition: margin-left 360ms cubic-bezier(.32,.72,.22,1);
filter: drop-shadow(0 0 6px rgba(255,127,28,0.6));
}
body .eduway-section--alumni.is-pinned-alumni .alumni-close {
display: none;
}
}
/* ----------------------------------------------------------------------
HOW IT WORKS — Signal v0.2 voice
The original tiles were sunrise-era: cream surfaces, plum-* text,
bold sans-serif numbers. Refreshed to match the rest of the page:
ink palette, mono-caps numerals with a hairline rail, Instrument
Serif italic on the closing emphasis, hairline borders that warm
to fire-300 on hover. Same layout, new voice.
---------------------------------------------------------------------- */
/* Section + head — eyebrow gets a small mono lead-in dash */
body .eduway-section--how {
background: var(--paper);
}
body .eduway-section--how .how-headline {
font-family: var(--font);
font-weight: 700;
letter-spacing: -0.025em;
color: var(--ink-900);
}
body .eduway-section--how .how-headline .hl-italic {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
color: var(--ink-900);
letter-spacing: -0.015em;
background: none;
padding: 0;
}
body .eduway-section--how .how-lede {
color: var(--ink-400);
}
/* Tile surface — paper-0 with the mist hairline + signal radius/shadow */
body .eduway-section--how .how-tile,
body .eduway-section--how .how-tile.feature {
background: var(--paper-0) !important;
border: 1px solid var(--mist) !important;
border-radius: var(--r-3) !important;
box-shadow: var(--sh-1);
padding: 28px 26px !important;
transition: border-color 280ms cubic-bezier(.32,.72,.22,1),
box-shadow 280ms cubic-bezier(.32,.72,.22,1),
transform 320ms cubic-bezier(.32,.72,.22,1);
}
@media (min-width: 1024px) {
body .eduway-section--how .how-tile,
body .eduway-section--how .how-tile.feature { padding: 32px 30px !important; }
}
body .eduway-section--how .how-tile:hover,
body .eduway-section--how .how-tile.feature:hover {
border-color: var(--fire-300) !important;
box-shadow: var(--sh-warm);
transform: translateY(-2px);
}
/* Tile number — mono caps in fire-500, with a small fire hairline rail
to the left so it reads as instrument-grade chapter marker, not a
sunrise plum-italic. */
body .eduway-section--how .how-tile__num {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 14px !important;
font-family: var(--mono) !important;
font-style: normal !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase;
color: var(--fire-600) !important;
}
body .eduway-section--how .how-tile__num::before {
content: '';
display: inline-block;
width: 18px;
height: 1px;
background: var(--fire-500);
}
/* Title — ink-900, slightly tighter; size unchanged so the visual
hierarchy isn't disturbed. */
body .eduway-section--how .how-tile__title {
color: var(--ink-900) !important;
font-family: var(--font);
font-weight: 700;
letter-spacing: -0.015em;
margin: 0 0 12px !important;
}
/* Body — ink-400, the standard signal body color */
body .eduway-section--how .how-tile__body {
color: var(--ink-400) !important;
font-size: 14.5px;
line-height: 1.6;
}
/* Closing emphasis — Instrument Serif italic in ink-900, no underline.
Same recipe used on lifecycle stops + outcomes caveat pop. */
body .eduway-section--how .how-tile__body .hl-quote-em {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
color: var(--ink-900);
font-size: 1.05em;
background: none !important;
padding: 0;
letter-spacing: -0.005em;
}
/* Dark tile (AI) — flip to plum-900 surface but keep the same hairline
warmth on hover. Body text uses peach-200 from existing rules; we
just tighten the title + num to match Signal voice. */
body .eduway-section--how .how-tile.dark,
body .eduway-section--how .how-tile.feature.dark {
background: var(--plum-900) !important;
border-color: rgba(255, 127, 28, 0.18) !important;
}
body .eduway-section--how .how-tile.dark:hover,
body .eduway-section--how .how-tile.feature.dark:hover {
border-color: var(--fire-500) !important;
}
body .eduway-section--how .how-tile.dark .how-tile__num {
color: var(--fire-300) !important;
}
body .eduway-section--how .how-tile.dark .how-tile__num::before {
background: var(--fire-300);
}
body .eduway-section--how .how-tile.dark .how-tile__title {
color: var(--paper-0) !important;
}
body .eduway-section--how .how-tile.dark .how-tile__body {
color: var(--peach-200) !important;
}
body .eduway-section--how .how-tile.dark .how-tile__body .hl-quote-em {
color: var(--paper-0) !important;
}
/* UI frame chrome — slim it slightly so it sits inside the lighter
tile without competing for attention. */
body .eduway-section--how .ui-frame {
border-radius: var(--r-2);
border: 1px solid var(--mist);
overflow: hidden;
box-shadow: none;
}
body .eduway-section--how .ui-frame__chrome {
background: var(--paper-2);
border-bottom: 1px solid var(--mist);
padding: 8px 12px;
}
body .eduway-section--how .ui-frame__chrome-url {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-400);
letter-spacing: 0.04em;
}
body .eduway-section--how .ui-frame--dark {
border-color: rgba(255, 248, 240, 0.12);
}
body .eduway-section--how .ui-frame--dark .ui-frame__chrome {
background: rgba(0, 0, 0, 0.35);
border-bottom-color: rgba(255, 248, 240, 0.08);
}
body .eduway-section--how .ui-frame--dark .ui-frame__chrome-url {
color: var(--peach-200);
}
/* ----------------------------------------------------------------------
OUTCOMES METHODOLOGY — subtle click-to-expand
Replaces the always-visible caveat paragraph with a quiet expandable.
The summary is a small mono-caps "Methodology" label + tiny chevron
that rotates 180° on open. No background, no border, no shout — just
a hairline cue that more context lives behind a click.
---------------------------------------------------------------------- */
body .eduway-section--outcomes .outcomes-source {
max-width: 760px;
margin: 28px auto 0;
padding-top: 24px;
border-top: 1px solid var(--paper-3);
/* Centre the inline-flex summary toggle horizontally */
text-align: center;
}
body .eduway-section--outcomes .outcomes-source__summary {
list-style: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 0;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-400);
transition: color 220ms cubic-bezier(.32,.72,.22,1);
user-select: none;
}
body .eduway-section--outcomes .outcomes-source__summary::-webkit-details-marker { display: none; }
body .eduway-section--outcomes .outcomes-source__summary::marker { content: ''; }
body .eduway-section--outcomes .outcomes-source__summary:hover {
color: var(--ink-900);
}
body .eduway-section--outcomes .outcomes-source__summary:focus-visible {
outline: 2px solid var(--fire-300);
outline-offset: 4px;
border-radius: 2px;
}
body .eduway-section--outcomes .outcomes-source__chevron {
color: currentColor;
transition: transform 280ms cubic-bezier(.32,.72,.22,1);
flex-shrink: 0;
}
body .eduway-section--outcomes .outcomes-source[open] .outcomes-source__chevron {
transform: rotate(180deg);
}
/* Body wrap — animates open/close. JS at the bottom of the file sets the
inline `height` from 0 → scrollHeight (and back) so the transition runs
in both directions. Native snaps the content visibility, so
the JS defers the [open] attribute removal until after the close transition. */
body .eduway-section--outcomes .outcomes-source__body-wrap {
overflow: hidden;
opacity: 0;
transition: height 380ms cubic-bezier(.32,.72,.22,1),
opacity 280ms cubic-bezier(.32,.72,.22,1);
}
body .eduway-section--outcomes .outcomes-source[open] .outcomes-source__body-wrap {
opacity: 1;
}
body .eduway-section--outcomes .outcomes-source__body {
margin: 14px auto 0;
max-width: 600px;
font-size: 14px;
line-height: 1.6;
color: var(--ink-400);
text-align: center;
}
@media (min-width: 768px) {
body .eduway-section--outcomes .outcomes-source__body { font-size: 14.5px; }
}
body .eduway-section--outcomes .outcomes-source__pop {
color: var(--ink-900);
font-weight: 600;
font-style: italic;
}
@media (prefers-reduced-motion: reduce) {
body .eduway-section--outcomes .outcomes-source__chevron,
body .eduway-section--outcomes .outcomes-source__body-wrap {
transition: none;
}
}
/* Body — slightly tighter line-height to compact the card */
body .eduway-section--lifecycle .lifecycle-stop__body {
font-size: 14px !important;
line-height: 1.55 !important;
}
body .eduway-section--lifecycle .lifecycle-stop__body .hl-quote-em {
margin-top: 8px !important;
font-size: 1.04em !important;
}
/* ----------------------------------------------------------------------
LIFECYCLE — MOBILE SCROLL-LOCKED STACK
On mobile (<1100px), GSAP pins the section and animates each card to
fly up from below and stack on top of the previous one with a slight
rotational fan, like a dealt deck. A vertical fire rail on the left
tracks progress through the four phases. After all four cards land,
a dotted circular loop indicator appears, signaling that the lifecycle
continues — the engagement loops back to recruitment for the next class.
Hidden by default; only takes over when GSAP adds .is-pinned-mobile.
---------------------------------------------------------------------- */
.lifecycle-mobile-rail { display: none; }
@media (max-width: 1099px) {
body .eduway-section--lifecycle.is-pinned-mobile {
--lifecycle-progress: 0;
min-height: 100svh;
padding-top: 0 !important;
padding-bottom: 0 !important;
overflow: hidden;
}
body .eduway-section--lifecycle.is-pinned-mobile .eduway-container {
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 80px 20px 28px;
position: relative;
}
/* Compact header so the card stage gets vertical room on small screens */
body .eduway-section--lifecycle.is-pinned-mobile .lifecycle-head {
margin: 0 auto 18px !important;
text-align: center;
max-width: 100%;
}
body .eduway-section--lifecycle.is-pinned-mobile .lifecycle-headline {
font-size: clamp(26px, 6.4vw, 34px) !important;
line-height: 1.08 !important;
}
body .eduway-section--lifecycle.is-pinned-mobile .lifecycle-lede {
font-size: 14.5px !important;
line-height: 1.5 !important;
max-width: 36ch;
margin-left: auto;
margin-right: auto;
}
/* Hide the original horizontal dashed thread on mobile pinned state —
the new vertical rail replaces it. */
body .eduway-section--lifecycle.is-pinned-mobile .lifecycle-thread {
display: none !important;
}
/* The card stage — relative + fixed height, cards stack absolutely inside.
Reset the grid layout that mobile inherits otherwise. */
body .eduway-section--lifecycle.is-pinned-mobile .lifecycle-stops {
position: relative;
display: block !important;
grid-template-columns: none !important;
gap: 0 !important;
width: calc(100% - 56px);
max-width: 380px;
margin: 0 auto;
flex: 1;
min-height: 360px;
padding: 0 !important;
list-style: none;
}
body .eduway-section--lifecycle.is-pinned-mobile .lifecycle-stop {
position: absolute !important;
top: 16px !important;
left: 0 !important;
right: 0 !important;
margin: 0 !important;
padding: 22px 22px 24px !important;
background: var(--paper-0);
border: 1px solid var(--mist);
border-radius: var(--r-3);
box-shadow: var(--sh-2);
will-change: transform, opacity;
transform-origin: 50% 100%;
/* Initial state — off-screen below, faded out. GSAP animates each
card in sequence to its resting fan position. */
opacity: 0;
transform: translate3d(0, 110%, 0) rotate(-6deg);
z-index: 1;
}
/* Each card fans slightly when it lands — different angles per card */
body .eduway-section--lifecycle.is-pinned-mobile .lifecycle-stop--01 { z-index: 1; }
body .eduway-section--lifecycle.is-pinned-mobile .lifecycle-stop--02 { z-index: 2; }
body .eduway-section--lifecycle.is-pinned-mobile .lifecycle-stop--03 { z-index: 3; }
body .eduway-section--lifecycle.is-pinned-mobile .lifecycle-stop--04 { z-index: 4; }
/* Soften the inner spacing so the card reads compact at this viewport */
body .eduway-section--lifecycle.is-pinned-mobile .lifecycle-stop__head {
margin-bottom: 8px;
}
body .eduway-section--lifecycle.is-pinned-mobile .lifecycle-stop__title {
font-size: 19px !important;
line-height: 1.2 !important;
}
body .eduway-section--lifecycle.is-pinned-mobile .lifecycle-stop__body {
font-size: 13.5px !important;
line-height: 1.5 !important;
}
/* MOBILE RAIL — slim vertical fire thread on the left of the card stage.
Lives INSIDE .lifecycle-stops (the card stage) so it can never overlap
the headline above. Four tiny dots fill in as cards land; a single
pulsing fire dot at the end signals the cycle continues. */
body .eduway-section--lifecycle.is-pinned-mobile .lifecycle-stops {
padding-left: 22px !important;
box-sizing: border-box;
}
body .eduway-section--lifecycle.is-pinned-mobile .lifecycle-mobile-rail {
display: block;
position: absolute;
left: 4px;
top: 16px;
bottom: 0;
width: 12px;
pointer-events: none;
}
/* Track — neutral hairline */
body .eduway-section--lifecycle.is-pinned-mobile .lifecycle-mobile-rail__track {
position: absolute;
left: 50%;
top: 0;
bottom: 28px;
width: 1px;
transform: translateX(-50%);
background: var(--mist);
}
/* Fill — fire hairline, scrubbed by --lifecycle-progress (0→1) */
body .eduway-section--lifecycle.is-pinned-mobile .lifecycle-mobile-rail__fill {
position: absolute;
left: 50%;
top: 0;
width: 1px;
transform: translateX(-50%);
height: calc(var(--lifecycle-progress, 0) * (100% - 28px));
background: linear-gradient(to bottom, var(--fire-500), var(--fire-700));
box-shadow: 0 0 8px rgba(255,127,28,0.45);
}
/* Nodes — tiny dots, no numbers */
body .eduway-section--lifecycle.is-pinned-mobile .lifecycle-mobile-rail__node {
position: absolute;
left: 50%;
transform: translate(-50%, -50%) scale(0.8);
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--paper-0);
border: 1px solid var(--mist);
transition: background 280ms cubic-bezier(.32,.72,.22,1),
border-color 280ms cubic-bezier(.32,.72,.22,1),
transform 320ms cubic-bezier(.32,.72,.22,1),
box-shadow 320ms cubic-bezier(.32,.72,.22,1);
}
body .eduway-section--lifecycle.is-pinned-mobile .lifecycle-mobile-rail__node--01 { top: 0%; }
body .eduway-section--lifecycle.is-pinned-mobile .lifecycle-mobile-rail__node--02 { top: calc((100% - 28px) * 0.333); }
body .eduway-section--lifecycle.is-pinned-mobile .lifecycle-mobile-rail__node--03 { top: calc((100% - 28px) * 0.666); }
body .eduway-section--lifecycle.is-pinned-mobile .lifecycle-mobile-rail__node--04 { top: calc(100% - 28px); }
/* Active state — JS toggles .is-on as each card stacks */
body .eduway-section--lifecycle.is-pinned-mobile .lifecycle-mobile-rail__node.is-on {
background: var(--fire-500);
border-color: var(--fire-500);
transform: translate(-50%, -50%) scale(1.15);
box-shadow: 0 0 10px rgba(255,127,28,0.55);
}
/* Loop indicator — single pulsing fire dot under the last node.
Subtle "the signal continues" cue without a chrome chart icon. */
body .eduway-section--lifecycle.is-pinned-mobile .lifecycle-mobile-rail__loop {
position: absolute;
left: 50%;
bottom: 8px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--fire-500);
transform: translateX(-50%);
opacity: calc(max(0, var(--lifecycle-progress, 0) - 0.7) * 3.33);
animation: lifecycle-loop-pulse 1.6s ease-in-out infinite;
}
@keyframes lifecycle-loop-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255,127,28,0.55); }
50% { box-shadow: 0 0 0 6px rgba(255,127,28,0); }
}
@media (prefers-reduced-motion: reduce) {
body .eduway-section--lifecycle.is-pinned-mobile .lifecycle-mobile-rail__loop {
animation: none;
}
}
}
/* =============================================================
INTEGRATIONS — CONVEYOR (replaces hub-and-spokes)
Two-row dark ticker with system names separated by Eduway icons.
Scoped under .eduway-section--integrations to inherit page styling.
============================================================= */
.eduway-section--integrations .integrations-intro {
display: grid;
gap: 28px;
margin: 0 0 34px;
}
/* Override the existing centered .integrations-head rules when inside .integrations-intro. */
.eduway-section--integrations .integrations-intro .integrations-head {
max-width: 900px !important;
margin: 0 !important;
text-align: left !important;
}
.eduway-section--integrations .integrations-intro .integrations-head .eyebrow {
margin: 0 !important;
justify-content: flex-start;
}
.eduway-section--integrations .integrations-intro .integrations-headline {
margin: 14px 0 0 !important;
max-width: 860px;
text-align: left !important;
}
.eduway-section--integrations .integrations-intro .integrations-lede {
margin: 22px 0 0 !important;
max-width: 660px;
text-align: left !important;
}
.integrations-visual {
width: min(100%, 560px);
margin: clamp(-88px, -8vw, -32px) auto clamp(-72px, -6vw, -24px);
min-width: 0;
pointer-events: none;
}
.integrations-visual img {
width: 100%;
height: auto;
object-fit: contain;
object-position: center;
}
@media (min-width: 768px) {
.eduway-section--integrations .integrations-intro { margin-bottom: 42px; }
}
@media (min-width: 521px) and (max-width: 1099px) {
.integrations-visual { width: min(68vw, 560px); }
}
@media (min-width: 1100px) {
.eduway-section--integrations .integrations-intro {
grid-template-columns: minmax(0, 0.66fr) minmax(320px, 0.34fr);
align-items: end;
gap: 44px;
}
.integrations-visual {
align-self: end;
justify-self: end;
width: 100%;
margin: 0;
}
.integrations-visual img { margin-inline: auto 0; }
}
/* ----- The conveyor itself ----- */
.conveyor {
position: relative;
overflow: hidden;
width: 100%;
max-width: 100%;
border: 1px solid var(--ink-900);
border-radius: var(--r-3);
background: var(--ink-900);
color: var(--paper);
}
.conveyor__lanes { display: grid; }
.conveyor__lane {
position: relative;
overflow: hidden;
}
.conveyor__lane + .conveyor__lane { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.conveyor__lane::before,
.conveyor__lane::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
z-index: 2;
width: 44px;
pointer-events: none;
}
.conveyor__lane::before { left: 0; background: linear-gradient(90deg, var(--ink-900), transparent); }
.conveyor__lane::after { right: 0; background: linear-gradient(270deg, var(--ink-900), transparent); }
.conveyor__track {
display: flex;
align-items: center;
width: max-content;
padding: 16px 0;
will-change: transform;
transform: translate3d(0, 0, 0);
}
.conveyor__set {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.system-word {
display: inline-flex;
align-items: center;
padding: 0 14px;
color: var(--paper);
font-size: clamp(24px, 4.2vw, 50px);
font-weight: 800;
line-height: 1;
letter-spacing: 0;
white-space: nowrap;
}
.system-word[data-kind="open"] {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
color: var(--fire-200);
}
.system-separator {
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(56px, 6.4vw, 84px);
height: clamp(56px, 6.4vw, 84px);
margin: 0 14px;
flex: 0 0 auto;
}
.system-separator img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.conveyor.is-ready .conveyor__track {
animation: conveyor-ticker 22s linear infinite;
}
.conveyor.is-ready .conveyor__lane:nth-child(2) .conveyor__track {
animation-direction: reverse;
animation-duration: 26s;
}
.conveyor:hover .conveyor__track { animation-play-state: paused; }
@keyframes conveyor-ticker {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(calc(var(--ticker-distance, 0px) * -1), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.conveyor__track {
animation: none !important;
transform: none !important;
}
}