*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box;
/* 1 */
border-width: 0;
/* 2 */
border-style: solid;
/* 2 */
border-color: #e5e7eb;
/* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
line-height: 1.5;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-moz-tab-size: 4;
/* 3 */
-o-tab-size: 4;
tab-size: 4;
/* 3 */
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* 4 */
font-feature-settings: normal;
/* 5 */
font-variation-settings: normal;
/* 6 */
-webkit-tap-highlight-color: transparent;
/* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0;
/* 1 */
line-height: inherit;
/* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0;
/* 1 */
color: inherit;
/* 2 */
border-top-width: 1px;
/* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* 1 */
font-feature-settings: normal;
/* 2 */
font-variation-settings: normal;
/* 3 */
font-size: 1em;
/* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0;
/* 1 */
border-color: inherit;
/* 2 */
border-collapse: collapse;
/* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-feature-settings: inherit;
/* 1 */
font-variation-settings: inherit;
/* 1 */
font-size: 100%;
/* 1 */
font-weight: inherit;
/* 1 */
line-height: inherit;
/* 1 */
letter-spacing: inherit;
/* 1 */
color: inherit;
/* 1 */
margin: 0;
/* 2 */
padding: 0;
/* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
-webkit-appearance: button;
appearance: button;
/* 1 */
background-color: transparent;
/* 2 */
background-image: none;
/* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield;
appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1;
/* 1 */
color: #6b7280;
/* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1;
/* 1 */
color: #6b7280;
/* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
/* 1 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
display: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.hidden {
display: none;
}
.outline {
outline-style: solid;
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.ease-out {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
/* ============================================
BASE
============================================ */
body {
font-family: "Inter", sans-serif;
}
/* ============================================
HERO SECTION WRAPPER
============================================ */
.hero-section {
width: 100%;
/* position for the wave bands at its foot; overflow was already here, and
it is what keeps them from opening a horizontal scrollbar as they
stretch wider than the section. */
position: relative;
overflow: hidden;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
padding-left: 1.5rem;
padding-right: 1.5rem;
/* The section token caps at 48, which put the first line of copy 48px
under the navbar -- close enough to read as tucked against it. Written
out so the hero opens with room above it. */
padding-top: clamp(56px, 5vw, 78px);
padding-bottom: var(--space-section-sm);
}
@media (min-width: 768px) {
.hero-section {
padding-left: 3rem;
padding-right: 3rem;
}
}
@media (min-width: 1024px) {
.hero-section {
padding-left: 5rem;
padding-right: 5rem;
}
}
/* Three bands along the foot of the hero, tinted off the brand ramp. Each
rises a little further than the one behind it, stretches sideways and
fades, then runs back -- alternate is the yoyo, the durations differ per
band so the three do not move as one block, and the curve is sine.inOut
written out as its bezier.
This hero sits on white rather than the peach the About and Udaan ones do,
so the bands read as the page warming up into the section below it.
transform-box:fill-box so scaleX pivots on each band's own centre rather
than on the SVG's origin. */
.hero-waves {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
width: 100%;
height: clamp(110px, 14vw, 220px);
pointer-events: none;
}
.hero-wave {
transform-box: fill-box;
transform-origin: 50% 100%;
animation: hmWaveDrift var(--wave-time) cubic-bezier(.37, 0, .63, 1) infinite alternate;
}
.hero-wave-1 { --wave-time: 3s; --wave-lift: -20px; fill: rgba(255, 102, 0, .06); }
.hero-wave-2 { --wave-time: 4s; --wave-lift: -10px; fill: rgba(255, 102, 0, .09); }
.hero-wave-3 { --wave-time: 5s; --wave-lift: 0px; fill: rgba(255, 226, 207, .70); }
@keyframes hmWaveDrift {
to {
transform: translateY(var(--wave-lift)) scaleX(1.2);
opacity: .4;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-wave {
animation: none;
}
}
/* The hero's own content sits above the bands. */
.hero-wrapper {
position: relative;
z-index: 1;
margin-left: auto;
margin-right: auto;
display: flex;
max-width: 80rem;
flex-direction: column;
align-items: center;
gap: 3rem;
}
@media (min-width: 1024px) {
.hero-wrapper {
flex-direction: row;
gap: clamp(1.25rem, 2vw, 2.25rem);
align-items: center;
justify-content: space-between;
}
}
/* ============================================
LEFT SIDE (TEXT CONTENT)
============================================ */
.hero-left {
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
}
@media (min-width: 1024px) {
.hero-left {
width: 55%;
max-width: 660px;
flex-shrink: 0;
}
}
/* small pill badge at the top */
.hero-badge {
margin-bottom: 1.5rem;
display: inline-flex;
/* Was a fixed 241x36.9 box sized to the old "EMPOWER YOUR FUTURE" label.
The current one is a full sentence, which spilled straight out of the
pill — so it sizes to its content now, with the old box as the floor. */
/* The pill now carries a sentence rather than a three-word label, so it
sits a size down from the old badge — enough to read as an eyebrow above
the headline instead of competing with it. */
min-height: 32px;
max-width: 100%;
align-items: center;
gap: 0.5rem;
border-radius: 27.11px;
border-width: 1.51px;
border-color: rgb(255 255 255 / 0.9);
background-color: rgb(230 233 238 / 0.3);
padding-left: 0.85rem;
padding-right: 0.85rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 0.75rem;
letter-spacing: 0.02em;
line-height: 1.15rem;
font-weight: 600;
--tw-text-opacity: 1;
color: rgb(251 118 0 / var(--tw-text-opacity, 1));
--tw-shadow: 0 4px 8px rgba(0,0,0,0.08);
--tw-shadow-colored: 0 4px 8px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
}
.hero-badge:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
--tw-border-opacity: 1;
border-color: rgb(255 102 0 / var(--tw-border-opacity, 1));
background-color: rgb(252 227 204 / 0.4);
}
/* main big heading - fixed 64px, single line (kept on one line with
the rotating word via whitespace-nowrap). Shrinks only on very
narrow phones so it doesn't force horizontal scrolling. */
.hero-heading {
margin-bottom: 1.5rem;
/* This used to be white-space:nowrap, to hold the rotating word on one
line. That rotator is gone and the headline is plain text now, so nowrap
only stopped it wrapping inside its own max-width — it overflowed the
column and ran across the artwork instead. Balanced wrapping keeps the
two lines close in length. */
/* No text-wrap:balance here — the
already sets where the headline
breaks, and balance re-split the first line to even them out, putting the
headline back to three lines. */
font-weight: 800;
line-height: 1.25;
/* Was a Tailwind gray-900 expression -- the one heading on the page that
was not on the shared ink. */
color:var(--ink);
/* Back on the shared hero token. The cap was dropped to ~32px only so that
"Learn The Skills. Build The Experience." would hold ONE line inside the
hero's half-width column, which left the page's h1 the same size as its
section titles. The headline now breaks a sentence per line, so the
longest of the three is about 480px against ~660 available and the
compromise is no longer needed.
The hero token's own slope and 44px cap, with the floor dropped from 30 to
26. The headline is hard-broken by
, so its longest line has to hold
at 360px: "Build The Experience." runs about 320px at 30 against roughly
312 available, and would have wrapped to a fourth line on the commonest
phone width. At 26 it fits. */
font-size: clamp(26px,3.2vw,44px);
max-width:100%;
}
.hero-heading-orange {
--tw-text-opacity: 1;
color: rgb(255 102 0 / var(--tw-text-opacity, 1));
}
/* paragraph below heading */
.hero-para {
margin-bottom: 2rem;
/* Sits under a 600px headline, so it shares that measure rather than
stopping short of it. text-wrap:pretty keeps a single word off the
last line now that this is a full paragraph. */
/* Set to finish where the headline's last line finishes, so the two right
edges line up rather than the paragraph running past "Ready." by 40px.
The headline's last line is not one width -- the word ahead of "Ready."
rotates through Career, Internship, Placement, Industry, which measure
519, 596, 604 and 557. Tracking that would reflow the paragraph every
few seconds, so this takes the two long ones and sits a little past the
two short. Still three lines, first two flush, last at 466. */
max-width: 600px;
/* Justified: left alignment put the three lines at 541/523/513, close
enough that the rag read as a mistake rather than a rag.
Justify was tried here once before and taken back out for stretching the
word spacing into rivers. That is what happens with balance still on --
balance shortens every line to even them up, and justify then has to
stretch each one back to the full measure, so the gaps carry the whole
difference. pretty does not shorten lines, it only avoids leaving a stub
on the last one, so justify starts from lines that are already nearly
full and has almost nothing left to stretch.
Measured with pretty: 663/663 at 1584, 649/649 at 1424, 609/609 at 1350,
562/562 at 1264 -- the first two lines flush at every desktop width, and
no line stretched far enough to open a gap you can see. */
text-align: justify;
text-wrap: pretty;
font-size: 1rem;
line-height: 1.7;
--tw-text-opacity: 1;
color:var(--ink-500);
}
@media (min-width: 768px) {
.hero-para {
font-size: 1.125rem;
line-height: 1.75rem;
}
}
/* buttons row */
.hero-btn-row {
margin-bottom: 2.5rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
}
.btn-primary {
display: flex;
align-items: center;
gap: 0.5rem;
border-radius: 0.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-weight: 600;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
--tw-shadow: 0 1px 2px 0 rgba(120,116,116,0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
/* TEMPORARY - up for review, not a decision.
Put back so it can be seen on the live site next to the rest of the
page. It is the gradient this button used to carry, and every stop sits
off the brand orange: #FB7600 is already green +16 against #FF6600, and
by #F88E25 it is green +40 and blue +37, which is what drains the
saturation and makes the right-hand end read pale.
TO RESTORE: background: var(--primary, #FF6600);
and the hover below is unaffected - it already uses --primary-hover. */
background: linear-gradient(90deg, #FB7600 0%, #FA800F 65%, #F98818 93%, #F88E25 100%);
}
.btn-primary:hover {
--tw-translate-y: -0.125rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
/* Was rgb(234 88 12) - Tailwind's orange-600, not this site's. */
background: var(--primary-hover, #E65C00);
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.btn-primary i {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
}
.btn-primary:hover i {
--tw-translate-x: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.btn-secondary {
display: flex;
align-items: center;
gap: 0.5rem;
border-radius: 0.5rem;
border-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(255 102 0 / var(--tw-border-opacity, 1));
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-weight: 600;
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity, 1));
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
}
.btn-secondary:hover {
--tw-translate-y: -0.125rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
background-color: rgb(252 227 204 / 0.4);
}
/* ----------------------------------------------------------------------
HOVER LABEL SWAP — "Enroll Now" gives way to "Filling Fast!"
Both labels sit in the same single-cell grid, so the button is always as
wide as the longer of the two and hovering never nudges the layout. One
slides up and out while the other rises into its place.
---------------------------------------------------------------------- */
.btn-swap {
display: grid;
/* Clips each label at the button's text line as it travels. */
overflow: hidden;
align-items: center;
justify-items: center;
line-height: 1.35;
}
.btn-swap-label,
.btn-swap-hover {
grid-area: 1 / 1;
white-space: nowrap;
transition:
transform 0.34s cubic-bezier(0.65, 0, 0.35, 1),
opacity 0.34s cubic-bezier(0.65, 0, 0.35, 1);
}
/* Waiting one line below, ready to come up. */
.btn-swap-hover {
transform: translateY(115%);
opacity: 0;
color: var(--primary);
font-weight: 700;
}
/* Hover only where there is a cursor. On a phone there is nothing to hover
with, so the button simply reads "Enroll Now" and never flickers on tap. */
@media (hover: hover) {
.btn-secondary:hover .btn-swap-label,
.btn-secondary:focus-visible .btn-swap-label {
transform: translateY(-115%);
opacity: 0;
}
.btn-secondary:hover .btn-swap-hover,
.btn-secondary:focus-visible .btn-swap-hover {
transform: translateY(0);
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.btn-swap-label,
.btn-swap-hover {
transition: opacity 0.2s linear;
}
/* No travel — just a plain swap. */
.btn-swap-hover {
transform: none;
}
@media (hover: hover) {
.btn-secondary:hover .btn-swap-label {
transform: none;
}
}
}
.btn-secondary i {
--tw-text-opacity: 1;
color: rgb(255 102 0 / var(--tw-text-opacity, 1));
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
.btn-secondary:hover i {
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
/* learners avatar + text row */
.hero-learners-row {
display: flex;
align-items: center;
gap: 1rem;
}
/* Below ~340px the row has too little width left beside the avatar stack for
"Join 200,000+ learners already growing with Baoiam" to hold two lines —
it wrapped to three and the last line sat underneath the avatars. Stacking
the two removes the width fight entirely. */
@media (max-width:340px){
.hero-learners-row{
flex-direction:column;
align-items:flex-start;
gap:10px;
}
}
.learners-avatar-stack {
display: flex;
align-items: center;
}
.learners-avatar-stack span {
position: relative;
margin-left: -0.75rem;
}
.learners-avatar-stack span:first-child {
margin-left: 0px;
}
.learners-avatar-stack span{
z-index:1;
}
.learners-avatar-stack span:nth-child(1){
z-index:4;
}
.learners-avatar-stack span:nth-child(2){
z-index:3;
}
.learners-avatar-stack span:nth-child(3){
z-index:2;
}
.learners-avatar-stack span:nth-child(4){
z-index:1;
}
.learner-avatar {
height: 2.75rem;
width: 2.75rem;
border-radius: 9999px;
border-width: 2.5px;
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
-o-object-fit: cover;
object-fit: cover;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
.learner-avatar:hover{
transform:translateY(-3px);
}
.learners-text {
font-size: 0.875rem;
line-height: 1.25rem;
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
@media (min-width: 768px) {
.learners-text {
font-size: 1rem;
line-height: 1.5rem;
}
}
.learners-count {
font-weight: 600;
--tw-text-opacity: 1;
color: rgb(255 102 0 / var(--tw-text-opacity, 1));
}
/* ============================================
RIGHT SIDE (IMAGE + STATS CARD)
============================================ */
.hero-right {
position: relative;
display: flex;
width: 100%;
justify-content: center;
}
@media (min-width: 1024px) {
.hero-right {
width: 50%;
}
}
/* the rotated outline square peeking out behind the photo */
.hero-outline-square{
position:absolute;
top:-8%;
left:50px;
width:130px;
height:130px;
border:2px solid #d95a05fc;
border-radius:12px;
transform:rotate(-65deg);
z-index:15;
background:transparent;
}
.hero-outline-square-back{
position:absolute;
top:-7.5%;
left:52px;
width:135px;
height:134px;
border:2px solid rgba(28, 14, 5, 0.25);
border-radius:12px;
transform:rotate(-65deg);
z-index:14;
background:transparent;
}
/* wrapper for the student photo (blob shape + outline already baked into the image) */
.hero-blob {
position: relative;
z-index: 3;
/* Up a step at each width. The blob sat at 360 inside a column with room
for well over 500, so the photo read small against the stats card
beside it. */
width: 290px;
}
@media (min-width: 768px) {
.hero-blob {
width: 340px;
}
}
@media (min-width: 1024px) {
.hero-blob {
width: 420px;
}
}
.hero-student-img {
height: auto;
width: 73%;
}
/* a second faint card outline peeking out from behind the stats card */
.hero-stats-card-shadow {
position: absolute;
right: -4rem;
bottom: 1rem;
top: 14%;
z-index: 10;
/* Tracks .hero-stats-card. This sits behind that card as a peeking edge,
so it has to carry the same width at every breakpoint - left at the old
200/230 while the card came down to 178/202 it stopped peeking and
started sticking out, which read as the white card being oversized.
Height scaled by the same ratio the card lost. */
height: 236px;
width: 178px;
border-radius: 1rem;
border-width: 2px;
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
@media (min-width: 768px) {
.hero-stats-card-shadow {
width: 218px;
}
}
@media (min-width: 1024px) {
.hero-stats-card-shadow {
right: -2rem;
bottom: 2.7rem;
}
}
/* floating stats card */
.hero-stats-card {
position: absolute;
right: -4rem;
top: 57%;
z-index: 10;
width: 178px;
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
overflow: hidden;
border-radius: 1rem;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
/* On a phone the card's -4rem overhang ran past the hero and got clipped by an
ancestor's overflow, chopping the right edge off "Expert Instructors" and
"Courses & Paths". Floating it back inside only traded that for the card
covering the student photo, so on small screens it stops being a floating
panel and simply flows underneath the image instead. */
@media (max-width: 767px) {
.hero-right {
flex-direction: column;
align-items: center;
gap: 24px;
}
.hero-stats-card {
position: static;
width: 100%;
max-width: 300px;
transform: none;
animation: none;
}
/* Purely a decorative sliver behind the floating card; with the card in flow
it has nothing to sit behind. */
.hero-stats-card-shadow {
display: none;
}
}
@media (min-width: 768px) {
.hero-stats-card {
right: -2rem;
width: 218px;
}
}
@media (min-width: 1024px) {
.hero-stats-card {
right: -2rem;
}
}
.hero-stats-card:hover {
--tw-translate-y: calc(calc(50% + 0.25rem) * -1);
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.stats-row {
display: flex;
align-items: center;
gap: 0.6rem;
padding-left: 0.85rem;
padding-right: 0.85rem;
padding-top: 0.55rem;
padding-bottom: 0.55rem;
}
.stats-icon-box {
display: flex;
height: 1.9rem;
width: 1.9rem;
flex-shrink: 0;
align-items: center;
justify-content: center;
border-radius: 9999px;
--tw-bg-opacity: 1;
background-color: rgb(252 227 204 / var(--tw-bg-opacity, 1));
font-size: 0.76rem;
line-height: 1;
--tw-text-opacity: 1;
color: rgb(255 102 0 / var(--tw-text-opacity, 1));
}
.stats-text-box {
display: flex;
flex-direction: column;
}
.stats-number {
font-size: 0.8rem;
line-height: 1.25rem;
font-weight: 700;
line-height: 1.25;
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.stats-label {
font-size: 0.68rem;
line-height: 1rem;
line-height: 1.25;
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.stats-divider {
margin-left: 0.85rem;
margin-right: 0.85rem;
height: 1px;
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
/* orange quote strip at the bottom of the card */
.stats-quote-strip {
margin-top: 0.25rem;
display: flex;
align-items: flex-start;
gap: 0.55rem;
--tw-bg-opacity: 1;
background-color: rgb(255 102 0 / var(--tw-bg-opacity, 1));
/* 2.5rem, kept from before the card was narrowed. It is doing real work:
the indent is what holds the quote on four lines. Trimming it to 1.4
gave the text enough room to reflow onto three, which read as a
different quote. */
padding-left: 2.5rem;
padding-right: 0.85rem;
padding-top: 0.6rem;
padding-bottom: 0.6rem;
--tw-text-opacity: 0.85;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.stats-quote-strip i {
margin-top: 0.2rem;
font-size: 0.85rem;
line-height: 1rem;
opacity: 0.7;
}
.stats-quote-strip p {
/* Left at 0.75 with the indent, for the same reason. */
font-size: 0.75rem;
line-height: 1rem;
font-weight: 500;
line-height: 1.375;
}
/* ============================================
HERO LOAD-IN SEQUENCE
Pure CSS keyframe animations (theme.extend.animation in
tailwind.config.js) - autoplay on paint, no JS required.
`both` fill-mode holds the 0% state before the delay elapses
and the 100% state after, so nothing flashes unstyled.
============================================ */
@keyframes fadeInDown {
0% {
opacity: 0;
translate: 0 -18px;
}
100% {
opacity: 1;
translate: 0 0;
}
}
.hero-badge {
animation: fadeInDown 0.6s cubic-bezier(0.16,1,0.3,1) both;
}
@media (prefers-reduced-motion: reduce) {
.hero-badge {
animation: none;
}
}
.hero-badge {
animation-delay: 50ms;
}
@keyframes fadeInUp {
0% {
opacity: 0;
translate: 0 24px;
}
100% {
opacity: 1;
translate: 0 0;
}
}
.hero-heading {
animation: fadeInUp 0.7s cubic-bezier(0.16,1,0.3,1) both;
}
@media (prefers-reduced-motion: reduce) {
.hero-heading {
animation: none;
}
}
.hero-heading {
animation-delay: 200ms;
}
@keyframes fadeInUp {
0% {
opacity: 0;
translate: 0 24px;
}
100% {
opacity: 1;
translate: 0 0;
}
}
.hero-para {
animation: fadeInUp 0.7s cubic-bezier(0.16,1,0.3,1) both;
}
@media (prefers-reduced-motion: reduce) {
.hero-para {
animation: none;
}
}
.hero-para {
animation-delay: 380ms;
}
@keyframes fadeInUp {
0% {
opacity: 0;
translate: 0 24px;
}
100% {
opacity: 1;
translate: 0 0;
}
}
.hero-btn-row {
animation: fadeInUp 0.7s cubic-bezier(0.16,1,0.3,1) both;
}
@media (prefers-reduced-motion: reduce) {
.hero-btn-row {
animation: none;
}
}
.hero-btn-row {
animation-delay: 520ms;
}
@keyframes fadeInUpSm {
0% {
opacity: 0;
translate: 0 16px;
}
100% {
opacity: 1;
translate: 0 0;
}
}
.hero-learners-row {
animation: fadeInUpSm 0.6s cubic-bezier(0.16,1,0.3,1) both;
}
@media (prefers-reduced-motion: reduce) {
.hero-learners-row {
animation: none;
}
}
.hero-learners-row {
animation-delay: 680ms;
}
@keyframes scaleIn {
0% {
opacity: 0;
scale: .5;
}
100% {
opacity: 1;
scale: 1;
}
}
.hero-outline-square {
animation: scaleIn 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}
@media (prefers-reduced-motion: reduce) {
.hero-outline-square {
animation: none;
}
}
.hero-outline-square {
animation-delay: 800ms;
}
@keyframes zoomIn {
0% {
opacity: 0;
scale: .88;
}
100% {
opacity: 1;
scale: 1;
}
}
.hero-blob {
animation: zoomIn 0.7s cubic-bezier(0.16,1,0.3,1) both;
}
@media (prefers-reduced-motion: reduce) {
.hero-blob {
animation: none;
}
}
.hero-blob {
animation-delay: 920ms;
}
@keyframes slideInRightSm {
0% {
opacity: 0;
translate: 46px 0;
}
100% {
opacity: 1;
translate: 0 0;
}
}
.hero-stats-card-shadow {
animation: slideInRightSm 0.6s cubic-bezier(0.16,1,0.3,1) both;
}
@media (prefers-reduced-motion: reduce) {
.hero-stats-card-shadow {
animation: none;
}
}
.hero-stats-card-shadow {
animation-delay: 1080ms;
}
@keyframes slideInRight {
0% {
opacity: 0;
translate: 60px 0;
}
100% {
opacity: 1;
translate: 0 0;
}
}
.hero-stats-card {
animation: slideInRight 0.7s cubic-bezier(0.16,1,0.3,1) both;
}
@media (prefers-reduced-motion: reduce) {
.hero-stats-card {
animation: none;
}
}
.hero-stats-card {
animation-delay: 1180ms;
}
@keyframes popScale {
0% {
opacity: 0;
scale: .4;
}
100% {
opacity: 1;
scale: 1;
}
}
.learner-avatar {
animation: popScale 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
@media (prefers-reduced-motion: reduce) {
.learner-avatar {
animation: none;
}
}
.learner-avatar:nth-child(1) {
animation-delay: 840ms;
}
.learner-avatar:nth-child(2) {
animation-delay: 920ms;
}
.learner-avatar:nth-child(3) {
animation-delay: 1000ms;
}
.learner-avatar:nth-child(4) {
animation-delay: 1080ms;
}
/* ============================================
ROTATING HEADLINE WORD ("Learn. Build. Get ___")
JS (js/hero.js) swaps the text and toggles .rotator-out /
.rotator-in-start; no hover lives on this element so the
ordinary transform-based translate-y-* utilities are safe here.
============================================ */
.hero-line-3 {
display: inline-flex;
align-items: center;
gap: 0.3em;
white-space: nowrap;
}
.hero-heading-rotator {
position: relative;
display: inline-block;
/* No fixed width: a fixed box sized for the longest word ("Placement")
left a visible gap before "Ready." for every shorter word, since
.rotator-word is a block that fills the box and left-aligns its text.
Shrink-to-fit instead, so "Ready." always sits flush against whichever
word is showing — it shifts a few px during the 400ms slide, which
reads as part of the animation rather than a static layout gap. */
overflow: hidden;
vertical-align: bottom;
height: 1.25em;
line-height: 1.25;
white-space: nowrap;
}
/* "Ready." is its own slider so it visibly animates rather than sitting still,
but it runs on exactly the same clock as the descriptor — no delay — so the
two leave and arrive together as one phrase. */
.rotator-ready {
transition-delay: 0ms;
}
/* The original motion: the word slides straight up out of its window and
the next one rises into it from below, both fading as they travel.
Kept on keyframes rather than the transition-plus-forced-reflow it used
to run on. The resting state carries no animation at all, so however the
two classes are timed the word can only ever settle in place and visible
— the reflow dance could leave it stranded at opacity 0. */
.rotator-word {
display: block;
transform: translateY(0);
opacity: 1;
}
.rotator-word.rotator-out {
animation: rotatorSlideOut 400ms cubic-bezier(0.65,0,0.35,1) forwards;
}
.rotator-word.rotator-in {
animation: rotatorSlideIn 400ms cubic-bezier(0.65,0,0.35,1);
}
@keyframes rotatorSlideOut {
from { transform: translateY(0); opacity: 1; }
to { transform: translateY(-100%); opacity: 0; }
}
@keyframes rotatorSlideIn {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* stats numbers get a quiet count-up handled in JS */
.stats-number.is-counting {
font-variant-numeric: tabular-nums;
}
/* visible keyboard focus (quality floor) */
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
outline-style: solid;
outline-width: 2px;
outline-offset: 2px;
outline-color: #FF6600;
}
/* Hero headline must wrap on narrow screens or it runs off the page. */
@media (max-width: 900px) {
.hero-heading {
white-space: normal;
max-width: 100%;
}
}
/* ============================================
HERO ACCENT WORD — SHINE
Replaces the word-rotator that used to sit in this headline. That one
swapped the text on a timer, which meant the line reflowed and needed
white-space:nowrap to hold it together. This is purely a paint effect on
the accent word: a highlight sweeps across it every few seconds, so
nothing moves and the headline keeps its natural wrapping.
============================================ */
/* This carried a background-clip:text shine while the rotator was gone.
It cannot stay now that the rotator is back inside .bao-last: the
gradient is painted on this box and clipped to its glyphs, so the moment
a descendant is 3D-transformed the glyphs no longer line up with their
own backing and the word renders as nothing at all. Flat colour here;
the flip is the effect now. */
.hero-heading .bao-last {
color: var(--primary);
}
/* The spark trailing the word beats on the rotator's own clock — 1.4s
showing plus a 0.4s flip — so the pulse lands with each word change
rather than drifting against it. */
.hero-heading .bao-spark {
animation: heroSparkPulse 1.8s ease-in-out 1.3s infinite;
}
@keyframes heroSparkPulse {
0%, 66%, 100% { transform: scale(1) rotate(0deg); }
78% { transform: scale(1.18) rotate(-8deg); }
90% { transform: scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
.hero-heading .bao-spark {
animation: none;
}
}
/* ============================================
HERO BUTTON ROW — KEEP THE PAIR SIDE BY SIDE
Both labels grew with the rewritten copy ("Explore Your Career Path",
"Start Your Journey Today"), and together they no longer fit the hero's
half-width column at desktop, so flex-wrap dropped the second one onto
its own line. Tightening the gap and the horizontal padding brings the
pair back onto one row; the labels also stop wrapping inside their own
buttons. Below 640px they still stack, which is what we want there.
============================================ */
@media (min-width: 641px) {
.hero-btn-row {
flex-wrap: nowrap;
gap: 0.75rem;
}
.hero-btn-row .btn-primary,
.hero-btn-row .btn-secondary {
padding-left: 1.15rem;
padding-right: 1.15rem;
white-space: nowrap;
}
}
/* The learner stack used illustrated Profile (1-4).png avatars, which read as
AI art beside real photography. Swapped for actual interns. Three are plain
photographs; the fourth comes from the mentor set, which is composited onto
a dark panel — framing it on the face keeps the panel out of the crop so it
sits consistently with the others. */
.learner-avatar {
object-position: center 22%;
}
/* The mentor image is a composite — a rounded dark panel on transparency —
so object-fit alone left the panel's corner and the empty margin around it
showing inside the circle, which read as a half-filled avatar. Its wrapper
becomes the circular frame instead, so the image can be scaled up inside
until the panel covers the whole thing. */
.learner-avatar-frame {
box-sizing: border-box;
display: inline-block;
overflow: hidden;
height: 2.75rem;
width: 2.75rem;
border-radius: 9999px;
border: 2.5px solid #fff;
background: #3a2419;
}
.learner-avatar--panel {
height: 100%;
width: 100%;
border: 0;
border-radius: 0;
object-position: center 46%;
transform: scale(1.5);
}
/* ==========================================
TOUCH TARGETS / LEGIBILITY
The stat labels went to 10.9px when the card was sized down for desktop.
That is a caption on a phone, not a label.
========================================== */
@media (max-width:768px), (hover:none){
.stats-label{
font-size:12px;
}
}
/* ============================================
HERO ARTWORK SWAP (2026-09-05)
The right column used to be assembled on the page: a blob-cropped photo,
two decorative outline squares, and a live stats card sitting over them.
It now carries one piece of artwork that already contains its own person,
backdrop and floating cards.
Everything the artwork duplicates is hidden rather than deleted, so this
whole block is what undoes the swap -- delete it, point the ![]()
back at
home_hero.webp, and the old composition returns untouched.
WHAT THIS COSTS: the stats card carried 200K+ Active Learners, 500+ Expert
Instructors, 1000+ Courses & Paths and 98% Success Rate, plus the "Learning
today, leading tomorrow" strip. Those figures are no longer on the hero.
The markup is still in place, only display:none, so they come back with
this block.
============================================ */
.hero-blob {
/* The artwork is landscape and self-contained, so it takes the column
rather than sitting as a 420px disc inside it. */
/* There is a cap now. The column bleeds to the window edge, so on a very
wide viewport the artwork grew with it: 1036px at 2544 and 1687 at 3824,
against a file that is 978 native. Past that it is being enlarged, which
costs sharpness and buys nothing. 978 is where it stops.
Measured at the widths people actually use: 488 at 1424 and 719 at 1904,
both well under the cap, so the ordinary desktop is untouched. */
width: 100%;
max-width: 978px;
}
@media (min-width: 768px) {
.hero-blob { width: 100%; }
}
@media (min-width: 1024px) {
.hero-blob { width: 100%; }
}
/* ============================================
HERO ARTWORK — HOVER
Written as the `transform` shorthand on purpose. The ambient drift in
css/hero-alive.css moves this same element with the standalone `translate`
and `rotate` properties, and the two compose: the scale rides on top of
whatever point the loop is at, instead of replacing it and snapping the
photo back to centre the moment the pointer arrives.
box-shadow, not drop-shadow. The class name suggests a blob crop, but
hero-student.webp is 978x702 with an alpha channel that is 255 everywhere
-- a plain opaque rectangle. drop-shadow would trace exactly the same
rectangle a box shadow does, and pay to re-render the element for it.
============================================ */
.hero-blob {
transition:
transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.hero-blob:hover {
transform: scale(1.035);
box-shadow: 0 20px 44px -12px rgba(255, 102, 0, .32);
}
@media (prefers-reduced-motion: reduce) {
/* The lift goes; the shadow is a state change, not motion, so it stays. */
.hero-blob {
transition: box-shadow var(--dur-base) var(--ease-out);
}
.hero-blob:hover {
transform: none;
}
}
.hero-student-img {
/* Was 73%, which framed the photo inside the old blob crop. The new file is
already framed. */
width: 100%;
}
.hero-outline-square,
.hero-outline-square-back,
.hero-stats-card,
.hero-stats-card-shadow {
display: none;
}
/* The right column runs to the edge of the window rather than stopping at the
centred wrapper. calc(50% - 50vw) is exactly the distance from the wrapper's
right edge to the viewport's -- 50% resolves against the flex container, so
it tracks the wrapper at every width without a breakpoint. flex-grow lets
the column absorb the space that negative margin frees up, which is what
actually widens the artwork rather than just shifting it.
.hero-section already carries overflow:hidden for its wave bands, so the
bleed cannot open a horizontal scrollbar. */
.hero-student-img {
/* Was 73%, which framed the photo inside the old blob crop. The new file is
already framed. */
width: 100%;
}
.hero-outline-square,
.hero-outline-square-back,
.hero-stats-card,
.hero-stats-card-shadow {
display: none;
}
/* The right column runs to the edge of the window rather than stopping at the
centred wrapper. calc(50% - 50vw) is exactly the distance from the wrapper's
right edge to the viewport's -- 50% resolves against the flex container, so
it tracks the wrapper at every width without a breakpoint. flex-grow lets
the column absorb the space that negative margin frees up, which is what
actually widens the artwork rather than just shifting it.
.hero-section already carries overflow:hidden for its wave bands, so the
bleed cannot open a horizontal scrollbar. */
@media (min-width: 1024px) {
.hero-left {
flex: 0 0 auto;
width: 55%;
max-width: 660px;
}
.hero-line-3 {
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 0.3em;
}
.hero-right {
flex: 1 1 auto;
width: 45%;
margin-right: 0 !important;
display: flex;
justify-content: center;
align-items: center;
}
/* Balanced artwork scale adjusted so text never wraps or jitters */
.hero-blob {
width: 100% !important;
max-width: 520px !important;
display: flex;
justify-content: center;
}
.hero-student-img {
width: 100% !important;
max-width: 520px !important;
height: auto !important;
object-fit: contain;
transform: none !important;
}
}
/* ============================================
HERO RINGS
Three concentric arcs turning in the gap between the copy column and the
artwork, echoing the faint circles the artwork already carries on its left
edge. They sit behind everything: .hero-wrapper is z-index 1, this is 0,
and .hero-section's overflow:hidden keeps the outer arc from widening the
page as it turns.
Each ring is a dashed circle rather than a whole one -- a complete circle
spinning looks identical to a still one, so the gap is what makes the
motion visible at all. Different periods and one reversed direction stop
the three reading as a single rigid wheel.
============================================ */
.hero-rings {
position: absolute;
top: 50%;
/* Sits over the seam between the two columns rather than centred on the
section, so the arcs fill the white the artwork left behind. */
left: 54%;
z-index: 0;
/* Trimmed from 30vw: the outer arc was reaching back under the third line
of the headline, which read as a stray mark through the type rather than
as decoration in the gap. */
width: clamp(280px, 26vw, 380px);
aspect-ratio: 1;
transform: translate(-50%, -50%);
pointer-events: none;
}
.hero-rings svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
.hero-ring {
fill: none;
stroke: rgba(255, 102, 0, .22);
stroke-width: 1.25;
stroke-linecap: round;
transform-origin: 50% 50%;
}
/* Dash then gap, in user units against each circle's own circumference
(515, 823 and 1150) -- roughly a 150 degree arc on each. */
.hero-ring-1 { stroke-dasharray: 214 301; animation: hero-ring-turn 26s linear infinite; }
.hero-ring-2 { stroke-dasharray: 343 480; animation: hero-ring-turn 38s linear infinite reverse; }
.hero-ring-3 { stroke-dasharray: 479 671; animation: hero-ring-turn 52s linear infinite; }
/* Rides the middle ring, on that ring's own period so it stays on the line. */
.hero-ring-dot {
fill: var(--primary);
opacity: .5;
transform-origin: 50% 50%;
animation: hero-ring-turn 38s linear infinite reverse;
}
@keyframes hero-ring-turn {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
/* Held still. The arcs are a resting state they were drawn for, so nothing
is lost by stopping them where they stand. */
.hero-ring,
.hero-ring-dot {
animation: none;
}
}
/* Below the row split the columns stack and there is no gap to fill; the
arcs would sit behind the copy instead. */
@media (max-width: 1023px) {
.hero-rings {
display: none;
}
}