/* ==========================================================================
Merakigo — site stylesheet
Written as plain CSS on purpose: no build step, no external font/CDN
request, so the strict Content-Security-Policy ('self' only) holds.
========================================================================== */
/* --------------------------------------------------------------------------
0. Fonts
Self-hosted, not loaded from a CDN: the Content-Security-Policy is
'self'-only, and a Google Fonts link would simply be blocked. The files sit
in public/assets/fonts and are served from this origin.
Each family is one variable woff2 covering its whole weight range, which is
what Google now ships — asking for 600 and 700 separately returned the same
bytes twice, so only one file per family is stored. `font-weight: 100 900`
is what tells the browser that one file answers for every weight.
Only the `latin` subset is included. The site is Indonesian; Cyrillic,
Greek and Vietnamese subsets would have tripled the download for nothing.
`font-display: swap` renders the text immediately in the fallback and
repaints when the font lands, so a slow font never leaves the hero blank.
-------------------------------------------------------------------------- */
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/montserrat.woff2") format("woff2");
}
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/opensans.woff2") format("woff2");
}
/* Plus Jakarta Sans — the typeface the printed certificate is set in, and now
the one every button carries, so a control on screen matches the document it
leads to.
Three static weights rather than a variable file: buttons use 600, and a
couple sit at 500 and 700. Shipping only what is used keeps this to about
125 KB instead of the ~250 KB the full variable font costs.
Self-hosted, like the other two. Nothing here reaches Google Fonts, so no
visitor's address is handed to a third party for the sake of a typeface. */
@font-face {
font-family: "Plus Jakarta Sans";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/plusjakartasans-medium.woff2") format("woff2");
}
@font-face {
font-family: "Plus Jakarta Sans";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/plusjakartasans-semibold.woff2") format("woff2");
}
@font-face {
font-family: "Plus Jakarta Sans";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/plusjakartasans-bold.woff2") format("woff2");
}
/* --------------------------------------------------------------------------
1. Tokens
-------------------------------------------------------------------------- */
:root {
--purple-50: #F5F3FF;
--purple-100: #EDE9FE;
--purple-200: #DDD6FE;
--purple-400: #A78BFA;
--purple-500: #8B5CF6;
--purple-600: #7C3AED;
--purple-700: #6D28D9;
--blue-500: #3B82F6;
--sky-500: #4BA8CE; /* the "Apa itu Agen Digital MAJU?" band */
/* Row accents in the earnings breakdown, sampled from the supplied
reference rather than approximated from the purple scale above. */
--accent-violet: #6A37E4;
--accent-blue: #2376FC;
--accent-green: #3FC757;
--accent-violet-deep: #6032D9;
--accent-tint: #F1EFFD;
--pink-500: #EC4899;
--orange-500: #F97316;
--orange-100: #FFEDD5;
--blue-100: #DBEAFE;
--ink: #14142B;
--ink-soft: #3D3D5C;
--body: #5F5F7A;
--muted: #8B8BA7;
--surface: #FFFFFF;
--surface-soft: #FBFAFF;
/* A second quiet ground, cooled towards the wordmark's blue rather than
its purple. Distinct enough from --surface-soft to separate two
sections that would otherwise run together, quiet enough that it never
competes with the cards sitting on it. */
--surface-tint: #F1F6FB;
--surface-tint-line: #E2ECF5;
--line: #ECEAF6;
/* A firmer hairline for boxes that are nothing but an outline.
`--line` is tuned to divide things that already sit on a tinted panel;
on plain white, with no fill and no shadow to help it, it fades to
almost nothing and the box stops reading as a box. */
--line-firm: #DCDAE6;
--footer-bg: #141428;
--footer-line: #2A2A45;
--footer-text: #A8A8C4;
/* Sampled from the wordmark itself, so anything wearing this gradient
matches the logo beside it rather than approximating it. */
--logo-purple: #663696;
--logo-blue: #42A7CE;
--grad-logo: linear-gradient(100deg, var(--logo-purple) 0%, var(--logo-blue) 100%);
--grad-brand: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 45%, #6366F1 100%);
--grad-cta: linear-gradient(100deg, #7C3AED 0%, #8B5CF6 55%, #6D5DF6 100%);
--shadow-sm: 0 1px 2px rgba(20, 20, 43, .05);
--shadow-md: 0 4px 16px rgba(20, 20, 43, .06);
--shadow-lg: 0 14px 40px rgba(20, 20, 43, .10);
--shadow-cta: 0 12px 30px rgba(124, 58, 237, .28);
/* Cut-out artwork — the EDC, the flow steps, the stat illustrations, the
money — is transparent PNG with no box to catch a `box-shadow`, so it is
grounded with a `filter: drop-shadow()` that follows the subject's own
outline instead of a rectangle around it.
Two sizes, because the images are two sizes. A single shadow tuned for a
480px-tall device render turns into a smudge under a 90px icon.
Two stacked drop-shadows each, not one: a wide soft pool for the lift,
and a tight dark one right under the edge for the contact. A single
26px-blur shadow at 20% was mathematically present and practically
invisible — these illustrations carry their own painted-in shadows, so a
CSS one has to be firmer than usual before it reads as separate.
These are `drop-shadow()` functions, not raw shadow values: they go in
`filter`, never in `box-shadow`. */
--art-shadow: drop-shadow(0 18px 24px rgba(20, 20, 43, .26)) drop-shadow(0 3px 6px rgba(20, 20, 43, .14));
--art-shadow-sm: drop-shadow(0 10px 14px rgba(20, 20, 43, .22)) drop-shadow(0 2px 4px rgba(20, 20, 43, .12));
--radius-sm: 10px;
--radius: 16px;
--radius-lg: 22px;
--radius-xl: 30px;
/* Content width. This one value drives the proportions of every section:
the reference design sits at 1180px, this is a touch roomier without
stretching a five-card row into a thin ribbon. */
--container: 1400px;
--gutter: clamp(20px, 3vw, 40px);
/* ---------------------------------------------------------------------
TYPE SCALE
Every font-size in this stylesheet comes from this list. Nothing picks
its own value — that is what made section typography drift apart.
The root font-size already grows 16px → 18px with the viewport, so the
text steps are plain rem and scale with it automatically. The three
display sizes add a small viewport term of their own so headings stay
manageable on a phone and do not overshoot on a wide monitor.
--------------------------------------------------------------------- */
--fs-2xs: 0.78rem; /* badges, hints, inline errors */
--fs-xs: 0.85rem; /* meta lines, breadcrumbs, footer legal */
--fs-sm: 0.92rem; /* card copy, form fields, nav, footer */
--fs-md: 1rem; /* body copy, leads */
--fs-lg: 1.08rem; /* card titles, h3 */
--fs-xl: 1.25rem; /* prose h2, CTA title */
--fs-2xl: clamp(1.35rem, 0.7vw + 1.15rem, 1.65rem); /* section titles */
--fs-3xl: clamp(1.65rem, 1.1vw + 1.35rem, 2.1rem); /* page titles, stat figures */
--fs-4xl: clamp(1.95rem, 1.8vw + 1.5rem, 2.8rem); /* h1, hero */
/* Body and sub-headlines: Open Sans Regular. */
--font: "Open Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
/* Display face for headings.
"Segoe UI Variable Display" is Windows 11's optical size cut for large
text — tighter spacing and crisper joins than the text cut this site
was using for everything. macOS resolves `system-ui` to SF Pro Display
at these sizes, Android to Roboto. All three are already on the device,
so the strict CSP stays intact and no font file is downloaded.
To swap in a brand face instead: drop a .woff2 into public/assets/fonts,
declare an @font-face, and put its family first in this list. */
/* Headings and buttons: Montserrat. Family names only — never a
weight-specific one like "Segoe UI Black". Those pin the weight and
then ignore `font-weight`, so the headline could not be made lighter or
heavier from CSS afterwards. */
--font-display: "Montserrat", "Segoe UI Variable Display", "Segoe UI",
system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
/* Buttons and other controls. Falls back to the same system stack, so a
blocked or slow font never leaves a control set in something jarring. */
--font-ui: "Plus Jakarta Sans", "Segoe UI Variable Display", "Segoe UI",
system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
--ease: cubic-bezier(.4, 0, .2, 1);
/* A second curve, for things arriving rather than responding: it covers
most of the distance early and settles slowly. Entrances eased this way
read as deliberate, where the symmetric curve above reads as mechanical.
Kept apart from --ease on purpose — hover and press should stay quick
and even; only arrivals get the long tail. */
--ease-entrance: cubic-bezier(.16, 1, .3, 1);
/* Elevation in two layers: a tight contact shadow that holds the shape to
the page, and a wide soft one for the lift. One blurred shadow alone
reads as a smudge; two read as an object above a surface. */
--lift-1: 0 2px 6px rgba(20, 20, 43, .06), 0 12px 28px rgba(20, 20, 43, .10);
--lift-2: 0 3px 10px rgba(20, 20, 43, .07), 0 22px 48px rgba(20, 20, 43, .13);
}
/* --------------------------------------------------------------------------
2. Reset / base
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* Body text grows gently with the viewport, 16px to 18px. Because every
size below is expressed in rem, the whole scale moves together — which
is what keeps headings and body copy in proportion on a full-width
layout instead of headings ballooning on their own. */
font-size: clamp(16px, 0.25vw + 15px, 18px);
}
body {
margin: 0;
font-family: var(--font);
line-height: 1.7;
color: var(--body);
background: var(--surface);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
margin: 0 0 .5em;
font-family: var(--font-display);
color: var(--ink);
line-height: 1.22;
font-weight: 700;
letter-spacing: -.015em;
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--purple-600); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--purple-700); }
/* `height: auto` is not decoration — without it images are distorted.
*
* An 's `width`/`height` attributes are presentational hints: `height="300"`
* behaves as `height: 300px`. So the moment CSS narrows the image — `max-width:
* 100%` on a phone, or a smaller `max-width` at a breakpoint — the width shrinks
* and the height stays pinned at whatever the attribute said. The picture is
* stretched, and by more the narrower the screen gets.
*
* That is exactly what was happening to the illustration in "Kenapa Memilih
* Agen Digital MAJU": 1467x1072 artwork, `height="300"`, and a 300px-wide box
* under 900px — so it was drawn 300x300 and stood about 37% too tall.
*
* `auto` hands the height back to the image's own proportions. Rules that
* genuinely want a fixed height (.brand__logo, .hero__photo img) are all more
* specific and still win.
*/
img, svg { max-width: 100%; height: auto; display: block; }
/* Both list types are reset. Missing `ol` here is what made the breadcrumb
render as "1. Beranda." — components re-enable markers where they want
them (see .prose ol). */
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
:focus-visible {
outline: 3px solid var(--purple-400);
outline-offset: 3px;
border-radius: 4px;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 999;
padding: 12px 20px;
background: var(--purple-600);
color: #fff;
border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
.icon { width: 24px; height: 24px; flex-shrink: 0; }
.icon--sm { width: 18px; height: 18px; }
.icon--lg { width: 28px; height: 28px; }
.icon--heart { color: var(--purple-400); fill: currentColor; }
/* --------------------------------------------------------------------------
3. Buttons
-------------------------------------------------------------------------- */
/* Buttons take the display face at SemiBold — one step lighter than the
headline, so they read as the same voice without shouting as loudly. */
.btn {
--btn-bg: transparent;
--btn-fg: var(--ink);
--btn-bd: transparent;
/* Plus Jakarta Sans on every button, everywhere. It is the typeface the
certificate is set in, so a control on screen and the document it leads
to are the same voice. The rest of the page keeps Montserrat. */
font-family: var(--font-ui);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
border: 1.5px solid var(--btn-bd);
border-radius: var(--radius-sm);
background: var(--btn-bg);
color: var(--btn-fg);
font-size: var(--fs-sm);
font-weight: 600;
line-height: 1.2;
text-align: center;
transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
/* One purple for every button on the site: --logo-purple, #663696, the colour
taken from the wordmark.
The primary button used to be --grad-brand, a violet gradient that did not
match the logo beside it in the header; the header's own sign-in button had
already been given a flat #663696 to compensate, so two purples were on
screen at once. Setting it here means that override is no longer needed and
the outline and white variants pick up the same hue rather than the old
--purple-700.
Shadows are tinted from the same colour, so a button does not cast a violet
glow under a purple face. */
.btn--primary {
--btn-bg: var(--logo-purple);
--btn-fg: #fff;
box-shadow: 0 6px 18px rgba(102, 54, 150, .25);
/* A sheen used to sweep across this on hover. It was removed: a light
travelling over a button is a trick that draws attention to the effect
rather than to the action, and it repeats on every pass of the cursor.
What is left is depth — the button lifts, its shadow spreads and softens
exactly as a real object's would, and pressing puts it back down. */
position: relative;
}
.btn--primary:hover {
--btn-bg: #552B7F;
box-shadow: 0 4px 10px rgba(102, 54, 150, .22), 0 14px 30px rgba(102, 54, 150, .30);
}
/* The press. Every button already lifts on hover; returning it to the page —
and shrinking the shadow with it — is what makes the click feel connected
rather than merely registered. */
.btn:active { transform: translateY(1px) scale(.995); }
.btn--primary:active { box-shadow: 0 2px 6px rgba(102, 54, 150, .24); }
.btn--outline {
--btn-bg: #fff;
--btn-fg: var(--ink);
--btn-bd: var(--line);
box-shadow: var(--shadow-sm);
}
.btn--outline:hover { --btn-bd: var(--logo-purple); --btn-fg: var(--logo-purple); }
.btn--white {
--btn-bg: #fff;
--btn-fg: var(--logo-purple);
box-shadow: 0 8px 22px rgba(20, 20, 43, .16);
}
.btn--ghost-light {
--btn-bg: rgba(255, 255, 255, .12);
--btn-fg: #fff;
--btn-bd: rgba(255, 255, 255, .6);
}
.btn--ghost-light:hover { --btn-bg: rgba(255, 255, 255, .22); }
.btn--lg { padding: 14px 30px; font-size: var(--fs-md); }
.btn--block { width: 100%; }
/* --------------------------------------------------------------------------
4. Header / navigation
-------------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(12px);
border-bottom: 1px solid transparent;
transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
/* Scrolled state: the glass tightens and a hairline appears, rather than a
shadow being switched on. A drop shadow under a translucent bar reads as two
separate objects; raising the opacity and the blur keeps it one surface that
the page passes beneath. */
.site-header.is-stuck {
background: rgba(255, 255, 255, .96);
backdrop-filter: blur(18px) saturate(140%);
border-bottom-color: var(--line);
box-shadow: 0 1px 0 rgba(20, 20, 43, .04), 0 8px 24px rgba(20, 20, 43, .06);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
/* Tall enough that the enlarged logo is not flush against the edges. */
min-height: 86px;
}
.brand { display: inline-flex; align-items: center; color: var(--ink); }
.brand:hover { color: var(--ink); }
/* Height-driven so the wordmark keeps its aspect ratio at any size. */
.brand__logo {
width: auto;
height: 52px;
/* A wordmark on transparency, so drop-shadow follows the letterforms.
Kept tight and light: a logo is the one mark on a page that should look
printed rather than floating, and a wide soft shadow under type reads as
a mistake long before it reads as depth. */
filter: drop-shadow(0 2px 4px rgba(20, 20, 43, .22));
}
/* ---- header wordmark ----------------------------------------------------
Arrives first and arrives quickly. It sits above the hero, so anything
slower than the headline would leave the page looking as if it had loaded
out of order.
Scoped to the header on purpose: the footer mark is far down the page and
lazy-loaded, so animating it would fire while nobody is looking at it and
flicker if it decoded late. */
.site-header .brand__logo {
/* `backwards`, not `both`. A forwards fill would keep asserting the
animation's final `transform: none` for the rest of the page's life,
and an animated property outranks everything else in the cascade — the
hover below would be silently dead. Ending the animation hands transform
back to the rules underneath it. */
animation: brand-in .95s var(--ease-entrance) backwards;
}
@keyframes brand-in {
from { opacity: 0; transform: translateY(-8px) scale(.96); }
to { opacity: 1; transform: none; }
}
/* A hover the pointer can feel without the layout moving — the logo is the
way back to the front page, and this is the only cue that says so. */
.brand__logo { transition: transform .35s var(--ease-entrance); }
.brand:hover .brand__logo { transform: scale(1.04); }
/*
* The logo is deep purple and mid blue — legible on white, but it sinks into
* the near-black footer. Knocking it out to solid white is the standard fix
* and keeps the mark readable there.
*/
/* The shadow has to be restated here, not inherited. `filter` is one property
holding a list, so this declaration replaces the drop-shadow above outright
rather than adding to it — writing only the knock-out would silently strip
the footer logo's shadow.
Darker and wider than the header's, because this one is white type on a
near-black ground where a 22% shadow is invisible. */
.brand--light .brand__logo {
filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0, 0, 0, .55));
height: 46px;
}
/* Header "Masuk" button: one flat colour, taken from the wordmark's purple.
Flat rather than the logo gradient — the CTA banner carries that, and two
gradients competing on one page cheapens both. */
/* Colour and hover come from .btn--primary now — this used to restate them
because the primary button was a gradient in a different purple. */
.site-header__login { flex-shrink: 0; }
.nav-toggle {
display: none;
padding: 8px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: #fff;
color: var(--ink);
}
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }
.site-nav { display: flex; align-items: center; gap: 34px; }
.site-nav__list { display: flex; align-items: center; gap: 30px; }
.site-nav__link {
position: relative;
display: inline-block;
padding: 6px 0;
color: var(--ink-soft);
font-size: var(--fs-sm);
font-weight: 500;
}
.site-nav__link::after {
content: "";
position: absolute;
left: 50%;
bottom: -2px;
width: 0;
height: 2px;
border-radius: 2px;
background: var(--purple-600);
transform: translateX(-50%);
transition: width .25s var(--ease);
}
.site-nav__link:hover { color: var(--purple-700); }
.site-nav__link:hover::after { width: 60%; }
.site-nav__link.is-active { color: var(--purple-700); font-weight: 600; }
.site-nav__link.is-active::after { width: 100%; }
/* the little dot under the active item, as in the design */
.site-nav__link.is-active::before {
content: "";
position: absolute;
left: 50%;
bottom: -12px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--purple-600);
transform: translateX(-50%);
}
/* --------------------------------------------------------------------------
5. Section furniture
-------------------------------------------------------------------------- */
.section { padding: clamp(48px, 4.5vw, 74px) 0; }
.section--soft { background: var(--surface-soft); }
/* The cooler ground. Hairlines top and bottom because the tint is light
enough that, against white, its edges would otherwise be guesswork. */
.section--tint {
background: var(--surface-tint);
border-top: 1px solid var(--surface-tint-line);
border-bottom: 1px solid var(--surface-tint-line);
}
.section--tight { padding-block: clamp(40px, 5vw, 60px); }
/* Full-bleed coloured band. Headings carry their own colour in the base
rules, so they are handed back to `inherit` here — otherwise dark ink
would sit on the blue. */
/* The news band, and the one section that gets a wash of its own.
*
* It sits between the hero and the benefits, and both of those are pale — the
* hero fades to white at its foot and `--surface-soft` (#FBFAFF) is white with
* a rumour of violet in it. Using either would have run the three together into
* one long stretch of near-white with headings floating in it.
*
* A shade deeper and warmer than `--surface-soft`, with hairlines top and
* bottom the way `--section--tint` has them, so the band has actual edges
* rather than fading into its neighbours. */
.section--news {
background: #F3F1FC;
border-top: 1px solid #E7E3F7;
border-bottom: 1px solid #E7E3F7;
}
.section--brand { background: var(--sky-500); color: #fff; }
.section--brand :is(h1, h2, h3, h4) { color: inherit; }
.section-head { max-width: 680px; margin: 0 auto clamp(32px, 5vw, 52px); text-align: center; }
.section-head--left { margin-inline: 0; text-align: left; }
.section-head__eyebrow {
display: block;
margin-bottom: 10px;
color: var(--purple-600);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: .06em;
}
.section-head__title { margin-bottom: 14px; }
.section-head__lead { color: var(--body); font-size: var(--fs-md); }
/* The rule under centred headings: two gradients that meet in the middle, so
the line is strongest at its centre and fades out at both ends.
It used to carry a dot between them. The dot is gone site-wide — both the
markup and its style — so a stray `` copied into a
new view from anywhere would now render nothing at all. The gap goes with
it, or the line would keep a notch where the dot used to sit. */
.rule {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin: 16px auto 0;
width: 120px;
}
.rule::before,
.rule::after {
content: "";
height: 2px;
flex: 1;
border-radius: 2px;
background: linear-gradient(90deg, transparent, var(--purple-300, var(--purple-200)));
}
.rule::after { background: linear-gradient(90deg, var(--purple-200), transparent); }
/* --------------------------------------------------------------------------
6. Hero
-------------------------------------------------------------------------- */
/* ---- the banner wash ----------------------------------------------------
Two pale pools over a vertical fade: violet a fifth of the way across, pink
at the middle, and the right-hand side left as bare tint. The hero had no
background at all before this — the section was transparent over plain
white.
The numbers are measured, not chosen. Sampling public/contoh-gradient.png
gives #E8E0FE under the violet and #F5DFF3 under the pink against a #F6F4FF
ground, which works out at roughly .19 and .16 alpha; the right-hand third
reads #F7F5FF, i.e. no third pool at all. An earlier attempt guessed at
three heavier pools and came out visibly darker and lopsided.
Percentages throughout, so the arrangement holds from a phone to a wide
desktop instead of crowding into a corner. Centres sit slightly above the
box (-5%) so the band opens at its fullest colour and fades downward. */
.hero,
.page-head {
background:
radial-gradient(50% 130% at 18% -5%, rgba(139, 92, 246, .19), transparent 72%),
radial-gradient(40% 115% at 50% -5%, rgba(236, 72, 153, .16), transparent 72%),
linear-gradient(180deg, #F6F4FF 0%, #FBFAFF 55%, #fff 100%);
}
.hero {
position: relative;
padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 7vw, 88px);
overflow: hidden;
/* The blending floor for the watercolour splash inside.
It makes this element the backdrop the splash multiplies against — its
own wash — and stops the blend reaching anything further down the page. */
isolation: isolate;
}
/* No `position: relative; z-index: 1` here, and that is not an oversight.
Either one makes this a new stacking context, and the watercolour splash
inside it blends with `mix-blend-mode: multiply` — which needs to reach the
hero's own background to work. Isolated, its white paper stops disappearing
and shows up as a solid white rectangle over the photograph.
The wash does not need it: it is a background on .hero, and backgrounds
always paint behind their element's content. */
.hero__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
align-items: center;
gap: clamp(32px, 5vw, 56px);
}
.hero__title {
margin-bottom: 22px;
font-size: var(--fs-4xl);
/* Montserrat Bold. `font-synthesis: none` keeps a browser from faking the
weight by smearing the outline if the file has not arrived yet — the
fallback's own bold is cleaner than a synthetic one. */
font-weight: 700;
font-synthesis: none;
/* Three lines of display type: 1.15 holds them together without the
descenders of one line touching the caps of the next. */
line-height: 1.15;
letter-spacing: -.02em;
/* Dark type on a pale wash, so the shadow is a lift rather than a glow:
a short offset and a tight blur, both well under 10% opacity.
It has to stay this light. Anything heavier turns display type at this
size muddy — the shadow starts filling the counters of the letterforms
and the whole headline reads slightly out of focus. */
text-shadow: 0 2px 4px rgba(20, 20, 43, .09);
}
/* The reference headline breaks after "Semua," and again after "untuk".
Character-count limits (max-width in `ch`) only approximate that, so the
breaks are explicit in the markup and simply switched off once the column
is narrow enough to need its own wrapping. */
@media (max-width: 900px) {
.hero__title br { display: none; }
}
/* Set in all caps, so it takes positive tracking: capitals are drawn to sit
in lower-case words, and left at the headline's negative tracking they jam
together. This is the one place on the page that opens up rather than in. */
.hero__title-mark {
letter-spacing: .06em;
/* Tracking adds space after the final letter too; pulling it back keeps
the word optically centred against the lines above. */
margin-right: -.06em;
}
.hero__lead {
max-width: 40ch;
margin-bottom: 32px;
font-size: var(--fs-md);
color: var(--body);
/* Open Sans Regular — the sub-headline stays plain against the bold
Montserrat above it. */
font-weight: 400;
/* Lighter again than the headline's. This is body-weight text at body
size, where a shadow sized for display type would read as a printing
fault rather than as depth. */
text-shadow: 0 1px 3px rgba(20, 20, 43, .07);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* ---- hero copy entrance -------------------------------------------------
Headline, then subtitle, then the buttons — each a fifth of a second behind
the last. Reading order and arrival order are the same, so the eye is led
down the block instead of having to choose where to start.
Only on arrival: none of these keep moving afterwards. The photograph and
the splash carry the hero's idle motion, and a headline that drifts is a
headline that is hard to read. */
.hero__title { animation: hero-copy-in 1.15s var(--ease-entrance) .1s both; }
.hero__lead { animation: hero-copy-in 1.15s var(--ease-entrance) .34s both; }
.hero__actions { animation: hero-copy-in 1.15s var(--ease-entrance) .58s both; }
@keyframes hero-copy-in {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
/* "MAJU" lands last and lands differently — a shade of scale on top of the
line's own rise, so the wordmark reads as the point the sentence arrives at
rather than just its final two syllables. */
.hero__title-mark {
display: inline-block;
animation: hero-mark-in .95s var(--ease-entrance) .78s both;
}
@keyframes hero-mark-in {
from { opacity: 0; transform: translateY(8px) scale(.94); }
to { opacity: 1; transform: none; }
}
/* ---- hero artwork: photograph fused into the watercolour ----------------
Two layers, combined entirely in CSS. The paint is a supplied image at
public/assets/img/hero-splash.png; nothing here is generated.
.hero__splash the watercolour, sitting behind, with
`mix-blend-mode: multiply`.
.hero__photo the photograph, in front of the paint. Its rectangle is
dissolved by a mask made of four overlapping radial
gradients — their union is an irregular, soft-edged blob,
so no straight edge survives to give away that it was
ever a rectangle, and the photo melts into the splash at
its edges instead of sitting on top of it as a cut-out.
Multiply on the splash is what lets the artwork be used uncut. Multiplying
by white leaves the backdrop untouched, so the white paper the splash was
painted on simply vanishes against the white page; only the pigment shows.
Because the photo is in front, its colours stay true — the paint frames it
rather than tinting it. Works the same whether the supplied artwork has a
white background or a transparent one.
------------------------------------------------------------------------ */
.hero__media {
position: relative;
aspect-ratio: 4 / 3;
/* No white panel and no isolation here any more.
This box used to paint itself white and cut blending off at its own
edge, which was right while the hero was white too — the panel was
invisible and the splash's paper disappeared into it. With a tinted wash
behind the hero, that same panel reads as a white rectangle sitting on
the colour.
The isolation moved up to .hero instead, so the splash multiplies
against the wash itself: white paper leaves the tint untouched, pigment
sinks into it. Blending still cannot escape the hero. */
}
.hero__photo {
position: absolute;
/* Inset so the paint reads all the way round the subject. */
inset: 6% 8% 4%;
/* In front of the paint. */
z-index: 2;
/* No frame, no rounding, no shadow: the photo is a cut-out with a
transparent background, so the subject stands free against the paint.
A box here would put a white card back on top of the artwork — which is
exactly what the cut-out exists to avoid. */
}
.hero__photo img {
width: 100%;
height: 100%;
/* `contain`, not `cover` — cover would crop the subject to fill the box. */
object-fit: contain;
object-position: center bottom;
/* Grounds the cut-out against the paint so it does not look pasted on.
Stacked like the artwork token: a wide pool for the lift and a tight one
under the contact edge. The subject is standing on the splash, and a
single soft shadow left it hovering a centimetre above the paper. */
filter:
drop-shadow(0 22px 30px rgba(20, 20, 43, .26))
drop-shadow(0 4px 8px rgba(20, 20, 43, .16));
/* The subject arrives first and the paint is thrown in behind them.
Ordering the hero this way makes the photograph the thing the eye lands
on and the splash its backdrop — the reverse, paint first, made the
artwork the event and the person its passenger.
Floats on a nine-second cycle against the splash's fourteen. The two
never line up, which is what stops the pair looking like one object
wobbling. */
animation:
hero-photo-in 1.35s var(--ease-entrance) .1s both,
hero-photo-float 9s ease-in-out 1.45s infinite;
}
@keyframes hero-photo-in {
from { opacity: 0; transform: translateY(22px) scale(.985); }
to { opacity: 1; transform: none; }
}
@keyframes hero-photo-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-9px); }
}
.hero__splash {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
max-width: none;
object-fit: contain;
mix-blend-mode: multiply;
pointer-events: none;
/* Two motions, and the order matters.
The photograph settles first; the paint is thrown in behind it half a
second later, once there is a subject for it to land around. The `both`
fill is what makes the wait work — the artwork holds at opacity 0
through the delay instead of sitting there waiting to be animated.
After the burst it breathes: fourteen seconds for a cycle, and less than
two per cent of scale. It is meant to be felt rather than watched;
anything faster turns the hero into something that keeps asking to be
looked at.
`transform-origin` sits low and central because that is where the
heaviest pigment lies, so the spread reads as coming from the paint
rather than from the middle of an empty box. */
transform-origin: 50% 58%;
animation:
splash-burst 1.9s cubic-bezier(.16, 1, .3, 1) .75s both,
splash-breathe 14s ease-in-out 2.65s infinite;
}
/* Scaling the whole image up from 90% was never going to read as a splash —
that is a picture getting bigger, and the eye knows the difference. Paint
thrown at paper does three things at once, so this does all three:
clip-path the wet edge travelling outward. This is the one that actually
sells it: pigment is *revealed* across the paper from the point
of impact instead of the finished artwork fading up in place.
transform landing hard and small, overshooting past full size, then
settling back — the recoil of something that hit rather than
appeared.
blur out of focus for the first third, because a fast-moving edge
has no crisp outline until it stops.
The circle finishes at 140%, well past the corners, so the artwork is never
left clipped once the animation's forwards fill takes hold. */
/* The drop-shadow is carried inside the keyframes, not declared on the element.
It has to be: an animation that touches `filter` owns the property outright
while it runs, and this one's forwards fill owns it for good afterwards — a
`filter: drop-shadow(...)` on `.hero__splash` itself would be overwritten at
frame one and never seen again.
It is deliberately light. The artwork has no hard edge anywhere — the alpha
fades out over a hundred-odd pixels — so `drop-shadow` has nothing crisp to
trace and returns a soft haze rather than an outline. Multiply then darkens
that haze into the wash. Enough to give the paint some weight is all this can
honestly be; pushed further it turns the hero grey. */
@keyframes splash-burst {
0% {
opacity: 0;
transform: scale(.42) rotate(-9deg);
clip-path: circle(5% at 50% 58%);
filter: blur(5px) drop-shadow(0 10px 16px rgba(20, 20, 43, .16));
}
30% {
opacity: 1;
filter: blur(2px) drop-shadow(0 12px 18px rgba(20, 20, 43, .16));
}
62% {
transform: scale(1.07) rotate(2deg);
clip-path: circle(80% at 50% 58%);
filter: blur(0) drop-shadow(0 14px 20px rgba(20, 20, 43, .16));
}
82% {
transform: scale(.985) rotate(-.6deg);
}
100% {
opacity: 1;
transform: none;
clip-path: circle(140% at 50% 58%);
filter: blur(0) drop-shadow(0 14px 20px rgba(20, 20, 43, .16));
}
}
/* The shockwave: one ring pushed out from the point of impact, gone in a
second and a half and never seen again.
It sits *behind* the artwork on purpose. The splash multiplies, and multiply
against white leaves the backdrop alone — so the ring shows through the bare
paper and is swallowed by the pigment, exactly as it would be if the wave
were travelling under the paint rather than over it.
`translate`/`scale` as their own properties, not `transform` — the shorthand
here would have to restate the centring offset in every keyframe, and one
typo would slide the ring off the impact point. */
.hero__media::before {
content: "";
position: absolute;
left: 50%;
top: 58%;
width: 32%;
aspect-ratio: 1;
translate: -50% -50%;
border-radius: 50%;
border: 2px solid rgba(139, 92, 246, .45);
pointer-events: none;
z-index: 0;
/* Rides with the burst, a shade ahead of it — the wave leads the pigment. */
animation: splash-ring 2s cubic-bezier(.16, 1, .3, 1) .7s both;
}
@keyframes splash-ring {
0% { opacity: 0; scale: .15; }
15% { opacity: .6; }
100% { opacity: 0; scale: 2.6; }
}
@keyframes splash-breathe {
0%, 100% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.018) rotate(.4deg); }
}
/* No artwork on disk: show the photo on its own, filling the frame. */
.hero__media--plain { aspect-ratio: 1 / 1; }
.hero__media--plain .hero__photo { inset: 0; }
/* --------------------------------------------------------------------------
7. Program cards / benefit grid
-------------------------------------------------------------------------- */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 20px;
}
.card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.program-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 30px 22px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
text-align: center;
transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.program-card:hover {
transform: translateY(-6px);
border-color: var(--purple-200);
box-shadow: var(--shadow-lg);
}
.program-card__icon {
display: grid;
place-items: center;
width: 58px;
height: 58px;
border-radius: 50%;
background: var(--purple-100);
color: var(--purple-600);
}
.program-card__icon[data-tone="orange"] { background: var(--orange-100); color: var(--orange-500); }
.program-card__icon[data-tone="blue"] { background: var(--blue-100); color: var(--blue-500); }
.program-card__icon[data-tone="pink"] { background: #FCE7F3; color: var(--pink-500); }
.program-card__title { margin: 0; font-size: var(--fs-lg); }
.program-card__text { font-size: var(--fs-sm); line-height: 1.66; color: var(--body); }
.program-card__link {
margin-top: auto;
padding-top: 6px;
font-size: var(--fs-sm);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 6px;
}
.program-card__link .icon { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.program-card__link:hover .icon { transform: translateX(3px); }
/* ---- benefit grid: illustration beside copy, two per row ----------------
No card, no border: the reference design sets the four points straight on
the page and lets the artwork do the separating. Each item is its own
two-column grid so the text column starts at the same offset in every
cell, whatever height the illustration turns out to be.
------------------------------------------------------------------------ */
.benefit-grid {
display: grid;
/* `min(400px, 100%)` rather than a bare 400px: on a phone narrower than
the track the column would otherwise keep its 400px and push the page
into a sideways scroll. */
grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
/* Generous row gap: the rows carry no divider, so the space is what
tells them apart. */
gap: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 64px);
margin: 0;
padding: 0;
list-style: none;
}
.benefit {
display: grid;
grid-template-columns: clamp(120px, 15vw, 190px) minmax(0, 1fr);
align-items: center;
gap: clamp(16px, 2.5vw, 32px);
}
/* The artwork lifts, not the whole row: moving the text as well would nudge
the reader's line, which is the one thing on the page that should hold
still. Transition lives on the image so it eases both ways. */
.benefit__media img { transition: transform .35s var(--ease), filter .35s var(--ease); }
/* The illustration rises and its shadow deepens with it. Both, or the lift
reads as the picture sliding up rather than coming off the page. */
.benefit:hover .benefit__media img {
transform: translateY(-6px) scale(1.03);
filter: var(--art-shadow);
}
.benefit__media {
display: grid;
place-items: center;
aspect-ratio: 1 / 1;
}
.benefit__media img {
width: 100%;
height: 100%;
/* `contain` — illustrations arrive at their own proportions and must not
be cropped to a square. */
object-fit: contain;
/* Cut-outs on transparency, so a drop-shadow that follows the subject —
not a box-shadow, which would draw a rectangle around empty space. The
small token: these sit at 120–190px, the same range as the flow steps. */
filter: var(--art-shadow-sm);
}
/* Stand-in while an illustration is missing: the same tinted disc the
program cards use, sized to hold the illustration's place. The modifier is
set in PHP from what is actually on disk, so the fallback never depends on
the browser resolving a :has() selector. */
/* The fallback when no illustration is on disk: a tinted disc holding an icon.
This one is a filled shape, so it takes a real box-shadow — and it must not
also inherit the drop-shadow above, which would trace the disc a second
time and double the weight. */
.benefit__media--icon {
width: clamp(84px, 10vw, 110px);
justify-self: center;
border-radius: 50%;
background: var(--purple-100);
color: var(--purple-600);
box-shadow: 0 8px 18px rgba(20, 20, 43, .16), 0 2px 5px rgba(20, 20, 43, .10);
}
.benefit__media--icon img { filter: none; }
.benefit__media--icon[data-tone="orange"] { background: var(--orange-100); color: var(--orange-500); }
.benefit__media--icon[data-tone="blue"] { background: var(--blue-100); color: var(--blue-500); }
.benefit__media--icon[data-tone="pink"] { background: #FCE7F3; color: var(--pink-500); }
.benefit__title { margin: 0 0 10px; font-size: var(--fs-lg); }
.benefit__text {
margin: 0;
max-width: 34ch;
font-size: var(--fs-sm);
line-height: 1.8;
color: var(--body);
}
/* --------------------------------------------------------------------------
8. About split
-------------------------------------------------------------------------- */
.about__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: clamp(32px, 5vw, 64px);
}
.value-list { display: grid; gap: 12px; margin-top: 26px; }
.value-list li {
display: flex;
align-items: center;
gap: 11px;
font-size: var(--fs-sm);
font-weight: 500;
color: var(--ink-soft);
}
.value-list .icon { color: var(--purple-600); }
/* Photo in a slightly tilted frame, with a coloured card peeking out behind
it — offset down and to the right, as in the reference design.
Capped so a wide viewport does not blow the photo up until it dwarfs the
text column beside it. */
.frame {
position: relative;
width: 100%;
max-width: 540px;
margin-inline: auto;
}
.frame::before {
content: "";
position: absolute;
inset: 8% -6% -9% 10%;
border-radius: var(--radius-xl);
background: linear-gradient(135deg, var(--pink-500), var(--purple-600) 52%, #6366F1);
opacity: .9;
}
.frame__inner {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
aspect-ratio: 4 / 3;
transform: rotate(-1.6deg);
}
.frame__inner img { width: 100%; height: 100%; object-fit: cover; }
/* ---- intro band: "Apa itu Agen Digital MAJU?" ---------------------------
A full-bleed coloured band with the EDC render on the left and the
explanation on the right. The colour comes from `.section--brand`, so the
band is a section modifier rather than something baked into this block.
------------------------------------------------------------------------ */
.intro-band {
display: grid;
/* The device is narrow and tall; giving the text roughly twice the width
keeps the paragraphs at a readable measure instead of a thin ribbon. */
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
align-items: center;
gap: clamp(28px, 5vw, 72px);
}
.intro-band__media { display: grid; place-items: center; }
/* The device comes in from its own side of the band rather than straight up
like everything else, so the band opens outward from the middle instead of
scrolling up as one sheet.
This has to sit above `.reveal.is-visible` in the file, not below it: both
selectors weigh the same, so whichever is written last wins. Moved below it,
this rule would pin the device permanently off-centre. */
@media (scripting: enabled) {
.intro-band__media.reveal { transform: translateX(-34px) translateY(8px); }
}
.intro-band__media img {
/* Capped so a wide viewport does not scale a phone-sized device up to
the height of the whole band. */
max-height: min(60vh, 480px);
width: auto;
/* The render is a cut-out on transparency: the shadow is what stops it
floating flat on the colour. Deeper than the shared token because this
one sits on saturated blue, where the standard weight disappears. */
filter: drop-shadow(0 20px 34px rgba(20, 20, 43, .28));
/* Idle drift lives on the image, never on `.intro-band__media` — the
wrapper's transform belongs to the reveal, and an infinite animation on
the same property would overrule the transition and strand it. */
animation: intro-device-float 7s ease-in-out infinite;
}
@keyframes intro-device-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-10px) rotate(-.8deg); }
}
.intro-band__title { margin-bottom: 22px; font-size: var(--fs-3xl); }
.intro-band__body p { margin-bottom: 18px; line-height: 1.85; }
.intro-band__body p:last-child { margin-bottom: 0; }
.intro-band__body strong { font-weight: 700; }
/* ---- supported transactions --------------------------------------------
Two cards, each holding a list that runs into two columns once there is
room. The lists are different lengths on purpose — payments outnumber
banking services — so the cards are top-aligned rather than stretched to
match, which would leave a pool of empty white under the shorter one.
------------------------------------------------------------------------ */
.txn {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
align-items: start;
gap: clamp(18px, 2.5vw, 26px);
}
.txn__group {
padding: clamp(24px, 3vw, 32px);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.txn__group:hover {
transform: translateY(-6px);
border-color: var(--purple-200);
box-shadow: var(--lift-1);
}
.txn__head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: clamp(18px, 2vw, 24px);
}
.txn__icon {
display: grid;
place-items: center;
flex-shrink: 0;
width: 46px;
height: 46px;
border-radius: 14px;
background: var(--purple-100);
color: var(--purple-600);
}
.txn__icon[data-tone="orange"] { background: var(--orange-100); color: var(--orange-500); }
.txn__icon[data-tone="blue"] { background: var(--blue-100); color: var(--blue-500); }
.txn__title { margin: 0; font-size: var(--fs-lg); }
.txn__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
gap: 12px 22px;
}
.txn__list li {
display: flex;
align-items: flex-start;
gap: 9px;
font-size: var(--fs-sm);
line-height: 1.55;
color: var(--body);
}
/* Nudged onto the first line of text rather than the top of the box. */
.txn__list .icon { margin-top: 2px; color: var(--purple-600); }
/* ---- accepted schemes and certification marks ---------------------------
A quiet band under the two cards. Real logo files sit at their own size;
until one is supplied its scheme is set as a wordmark chip, so the row
stays even either way rather than showing a hole where a logo will go.
------------------------------------------------------------------------ */
.logo-strip {
margin-top: clamp(20px, 2.5vw, 28px);
padding: clamp(20px, 2.5vw, 28px);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
text-align: center;
}
.logo-strip__label {
margin-bottom: 16px;
color: var(--muted);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
}
.logo-strip__list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px 16px;
}
.logo-strip__item img {
/* Height-matched, width free: the schemes' logos are all different
proportions and forcing a common width would squash half of them. */
height: 32px;
width: auto;
/* Much lighter than the artwork token. These are payment-scheme marks and
a heavy shadow under a Visa logo looks like a mistake — this is just
enough to lift them off the strip. */
filter: drop-shadow(0 3px 5px rgba(20, 20, 43, .18));
}
.logo-strip__chip {
display: inline-block;
padding: 9px 18px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface-soft);
color: var(--ink-soft);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
transition: transform .25s var(--ease), border-color .25s var(--ease),
background .25s var(--ease), color .25s var(--ease);
}
/* The chips are the one row on the page that sat completely still. A small
lift on hover is enough to say they are a set of real marks rather than
printed decoration. */
.logo-strip__chip:hover {
transform: translateY(-3px);
border-color: var(--purple-200);
background: var(--surface);
color: var(--logo-purple);
}
/* The certification marks are a footnote to the schemes above, not a second
row of equals — so they are quieter and sit behind a hairline. */
.logo-strip__list--marks {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--line);
gap: 10px 26px;
}
.logo-strip__list--marks .logo-strip__item img { height: 28px; }
.logo-strip__mark {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--muted);
font-size: var(--fs-xs);
font-weight: 600;
}
.logo-strip__mark .icon { color: var(--purple-400); }
/* ---- news: the single headline under the hero ---------------------------
One story, laid out as a wide card: picture on the left, the story on the
right. Deliberately not the same shape as `.post-card` — that is a tile in a
grid of equals, and this is the one item on the page that is meant to be
read before anything below it.
------------------------------------------------------------------------ */
.news {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
align-items: center;
gap: clamp(20px, 3.5vw, 44px);
padding: clamp(18px, 2.5vw, 26px);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--surface);
/* No shadow at rest — it arrives on hover, below.
The border is what carries the card at rest, and it has to stay: without
either, a white card on the news band's pale wash would have no edge at
all until the pointer found it. */
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.news:hover {
transform: translateY(-4px);
box-shadow: 0 18px 36px rgba(20, 20, 43, .16), 0 4px 10px rgba(20, 20, 43, .09);
}
/* No picture in the file: the story takes the whole card rather than leaving a
column open for an image that is not there. */
.news--plain { grid-template-columns: minmax(0, 1fr); }
.news__media {
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 16 / 10;
background: var(--purple-50);
}
.news__media img { width: 100%; height: 100%; object-fit: cover; }
.news__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 0 0 12px;
}
.news__tag {
padding: 4px 11px;
border-radius: 999px;
background: var(--accent-tint);
color: var(--accent-violet-deep);
font-family: var(--font-ui);
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.news__date { font-size: var(--fs-xs); color: var(--muted); }
.news__title {
margin: 0 0 12px;
font-size: var(--fs-2xl);
line-height: 1.3;
}
.news__excerpt {
margin: 0;
color: var(--body);
font-size: var(--fs-sm);
line-height: 1.8;
/* Clamped so a long entry cannot stretch the card taller than its own
picture and leave the image floating in white space. */
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news__actions { margin: 20px 0 0; }
/* ---- the three under the lead ------------------------------------------
Equals in a row, so a grid rather than the headline's two-column split.
`auto-fit` with a floor means they drop to two and then one on their own
instead of needing a breakpoint each.
------------------------------------------------------------------------ */
.news-more {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
gap: clamp(14px, 2vw, 22px);
margin: clamp(16px, 2.5vw, 24px) 0 0;
padding: 0;
list-style: none;
}
.news-card {
display: flex;
flex-direction: column;
padding: 20px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
/* Flat at rest, like the headline card above — the border carries it. */
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* The `:has(a)` gate is gone: the shadow now answers the pointer on every card
in this band, linked or not, because that is what was asked for. The lift is
kept small for the same reason it was once withheld — with no article route
yet most of these open nothing, and a card that leaps under the pointer
promises more than the page can keep. */
.news-card:hover,
.news-card:focus-within {
transform: translateY(-4px);
box-shadow: 0 14px 28px rgba(20, 20, 43, .16), 0 3px 8px rgba(20, 20, 43, .09);
}
.news-card__media {
margin: -20px -20px 16px;
border-radius: var(--radius) var(--radius) 0 0;
overflow: hidden;
aspect-ratio: 16 / 10;
background: var(--purple-50);
}
.news-card__media img { width: 100%; height: 100%; object-fit: cover; }
.news-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 10px;
}
.news-card__title {
margin: 0 0 8px;
font-size: var(--fs-md);
line-height: 1.45;
}
.news-card__title a { color: inherit; }
.news-card__title a:hover { color: var(--logo-purple); }
.news-card__text {
margin: 0;
color: var(--body);
font-size: var(--fs-xs);
line-height: 1.75;
/* Three lines, so a long entry cannot make one card taller than the two
beside it. */
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* The picture goes above the text rather than beside it, and loses some height
so it does not push the headline off the first screenful. */
@media (max-width: 800px) {
.news { grid-template-columns: minmax(0, 1fr); }
.news__media { aspect-ratio: 16 / 9; }
.news__title { font-size: var(--fs-xl); }
}
/* ---- estimate panel: a worked example of a day's takings ----------------
Heading and lead run the full width; below them the takings sit on the
left and the artwork on the right. The figures get a column of their own
so they can be compared down the page — run into prose, as the reference
copy does, they are impossible to scan.
------------------------------------------------------------------------ */
.estimate {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
/* The heading takes only the height it needs; the list below it takes
the rest. Naming the rows is what lets the artwork span both. */
grid-template-rows: auto 1fr;
align-items: start;
gap: clamp(24px, 4vw, 56px);
}
.estimate__head {
grid-column: 1;
max-width: 68ch;
}
.estimate__body { grid-column: 1; }
.estimate__title { margin-bottom: 14px; font-size: var(--fs-3xl); }
.estimate__lead { margin: 0; line-height: 1.85; color: var(--body); }
/* Rows sit on white and are told apart by the colour of their amount, not by
a stripe behind them — the colours below are sampled from the reference.
The block is clipped as one so only its outer corners round. */
.estimate__rows {
margin: 0;
max-width: 520px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
}
.estimate__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
padding: 15px 18px;
font-size: var(--fs-sm);
}
/* Dotted rules between the lines, receipt-style. Set on the following row
rather than as a bottom border on every row, so the last line does not
trail a rule against the edge of the block. Purple-200 rather than the
hairline grey: dots have far less ink than a solid rule and disappear
entirely at --line's lightness. */
.estimate__row + .estimate__row { border-top: 1px dotted var(--purple-200); }
/* Three accents, cycled: violet, blue, green. The label stays neutral so the
colour lands on the figure, which is what the row is read for. */
.estimate__row:nth-child(3n+1) dd { color: var(--accent-violet); }
.estimate__row:nth-child(3n+2) dd { color: var(--accent-blue); }
.estimate__row:nth-child(3n+3) dd { color: var(--accent-green); }
.estimate__row dt { color: var(--body); }
.estimate__row dd {
margin: 0;
font-weight: 600;
color: var(--ink);
/* Digits of equal width, so the rupiah figures stack into a clean column
instead of jittering row to row. */
font-variant-numeric: tabular-nums;
}
/* The closing line is the one row that does take a band, so it reads as the
end of the table rather than as another entry in it. Selector is heavier
than the nth-child accents above so it wins without `!important`. */
.estimate__rows .estimate__row--total {
padding-block: 18px;
background: var(--accent-tint);
}
.estimate__rows .estimate__row--total dt { color: var(--ink); font-weight: 700; }
.estimate__rows .estimate__row--total dd {
color: var(--accent-violet-deep);
font-size: var(--fs-xl);
font-weight: 700;
}
/* The rows above tick past one at a time; the month total is what they add up
to, so it lands rather than slides — a shade of scale on top of the rise.
Two specificity traps here, both silent if you get them wrong:
- Exactly two classes, not three. `.estimate__rows .estimate__row--total`
would outweigh `.reveal.is-visible` and pin the row at its start state
for good — visibly squashed and offset, for ever.
- No `transition-delay`. `.stagger > .reveal:nth-child(n)` is heavier and
written later, so any delay set here is overruled anyway. It needs none:
the total is the last child, so the stagger already lands it last. */
@media (scripting: enabled) {
.estimate__row--total.reveal { transform: translateY(14px) scale(.97); }
}
.estimate__note {
margin: 18px 0 0;
max-width: 52ch;
font-size: var(--fs-xs);
color: var(--muted);
}
/* The artwork spans both rows — heading and list — so it starts at the very
top of the section instead of below the heading, and is then centred in
that full height. Confining it to the second row is what left the gap
above it. */
.estimate__media {
grid-column: 2;
grid-row: 1 / -1;
align-self: center;
display: grid;
place-items: center;
}
.estimate__media img {
width: 100%;
max-width: 460px;
height: auto;
filter: var(--art-shadow);
}
/* Mirrors the intro band: the artwork enters from its own side while the
figures rise from below, so the panel opens rather than scrolls. Same
two-class ceiling as the total row above, and same reason. */
@media (scripting: enabled) {
.estimate__media.reveal { transform: translateX(30px) translateY(8px); }
}
.estimate__media img { animation: estimate-art-float 8s ease-in-out infinite; }
@keyframes estimate-art-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-8px) rotate(.7deg); }
}
/* No artwork on disk: the body takes the full width rather than leaving a
column open for a picture that is not there. */
.estimate--plain { grid-template-columns: minmax(0, 1fr); }
/* ---- videos and shorts --------------------------------------------------
Two blocks side by side: three vertical shorts, then two landscape videos.
Three 9:16 tiles and two 16:9 tiles come out at roughly the same height, so
the two blocks finish level without either being forced into the other's
proportions.
The column split is 3fr / 2fr — the share of tiles in each block — so the
tiles themselves end up about the same width across the whole row.
------------------------------------------------------------------------ */
/* ---- MAJU di FYP --------------------------------------------------------
Three vertical cards: reels other people posted. Its own block rather than a
reuse of `.video--short`, because the two answer different questions — the
shorts row is the company's own catalogue and carries only a title, while
these have to say plainly whose account they came from, or the section loses
the one thing that makes it worth showing.
------------------------------------------------------------------------ */
.fyp {
display: grid;
/* 150px, not 220. At 220 a 390px phone fits exactly one column, and three
9:16 cards stacked one per row make this section over 2000px tall — a
reader has to scroll past three full screens of it to reach what comes
next. At 150 a phone fits two, and desktop still lands on three because
the row is capped at 860px below. */
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: clamp(16px, 2.4vw, 26px);
margin: 0;
padding: 0;
list-style: none;
/* Three reels never want the full width of a desktop container — at
1200px they stretch to portrait billboards. */
max-width: 1040px;
margin-inline: auto;
}
.fyp__link {
display: grid;
gap: 12px;
text-decoration: none;
color: inherit;
}
.fyp__thumb {
position: relative;
display: block;
aspect-ratio: 9 / 16;
border-radius: var(--radius);
background: var(--purple-100);
overflow: hidden;
box-shadow:
0 10px 22px rgba(20, 20, 43, .16),
0 2px 5px rgba(20, 20, 43, .10);
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.fyp__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* The Instagram tile has no still — Instagram serves none to a visitor who is
not signed in. Rather than a broken image or a borrowed frame, it gets the
platform's own gradient, so it reads as deliberate. */
.fyp__thumb--instagram {
background: linear-gradient(140deg, #405DE6 0%, #C13584 45%, #F56040 75%, #FCAF45 100%);
}
.fyp__link:hover .fyp__thumb,
.fyp__link:focus-visible .fyp__thumb {
transform: translateY(-6px);
box-shadow:
0 20px 36px rgba(20, 20, 43, .24),
0 4px 8px rgba(20, 20, 43, .12);
}
/* Same play mark as the video cards, drawn rather than an image so it reads on
the still-less tile too. */
.fyp__play {
position: absolute;
top: 50%;
left: 50%;
width: 46px;
height: 46px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: rgba(20, 20, 43, .55);
backdrop-filter: blur(2px);
box-shadow:
0 6px 16px rgba(0, 0, 0, .38),
inset 0 1px 0 rgba(255, 255, 255, .22);
transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.fyp__play::after {
content: "";
position: absolute;
top: 50%;
left: 54%;
width: 0;
height: 0;
transform: translate(-50%, -50%);
border-left: 16px solid #fff;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.fyp__link:hover .fyp__play,
.fyp__link:focus-visible .fyp__play {
background: var(--logo-purple);
transform: translate(-50%, -50%) scale(1.08);
box-shadow: 0 8px 20px rgba(102, 54, 150, .50);
}
/* Which platform, said on the tile itself. Without it the three cards look
like one set from one place, and two of them are not. */
.fyp__badge {
position: absolute;
top: 10px;
left: 10px;
padding: 4px 9px;
border-radius: 999px;
background: rgba(20, 20, 43, .62);
backdrop-filter: blur(3px);
color: #fff;
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: .02em;
}
/* The MAJU mark. A white pill, because the logo is purple on transparent and
would vanish into the dark half of a photograph on its own. Opposite corner
from the platform badge so the two read as two labels, not one. */
.fyp__brand {
position: absolute;
top: 10px;
right: 10px;
display: grid;
place-items: center;
padding: 5px 9px;
border-radius: 999px;
background: rgba(255, 255, 255, .94);
box-shadow: 0 2px 8px rgba(20, 20, 43, .22);
}
.fyp__brand img { display: block; width: auto; height: 15px; }
/* On the Instagram tile there is no photograph to identify, so the mark also
stands in for one: a larger version, centred above the play button, which
turns an empty gradient into something that says whose section this is. */
.fyp__thumb--instagram .fyp__brand {
top: 50%;
left: 50%;
right: auto;
transform: translate(-50%, calc(-50% - 52px));
padding: 9px 16px;
}
.fyp__thumb--instagram .fyp__brand img { height: 26px; }
.fyp__body { display: grid; gap: 3px; }
.fyp__title {
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink);
line-height: 1.45;
/* Two lines, then an ellipsis. These captions come from other people's
accounts and can run to a paragraph of hashtags; letting one card grow
to six lines drags the whole row out of alignment. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fyp__author { font-size: var(--fs-2xs); color: var(--muted); }
.videos-split {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
gap: clamp(26px, 4vw, 48px);
align-items: start;
}
.videos-group__title {
margin-bottom: 18px;
font-size: var(--fs-lg);
color: var(--ink);
}
.videos {
display: grid;
gap: clamp(14px, 2vw, 20px);
align-items: start;
}
.videos--short { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.videos--video { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.video__link {
display: grid;
gap: 12px;
color: var(--ink);
}
.video__link:hover { color: var(--purple-700); }
.video__thumb {
position: relative;
display: block;
aspect-ratio: 16 / 9;
border-radius: var(--radius);
background: var(--purple-100);
overflow: hidden;
/* Two layers: a wide soft pool for the lift, a tight dark one at the edge
so the rounded corner has a defined boundary against the tinted section
behind it. `--shadow-sm` used to do this alone — 1px at 5% opacity,
which on a coloured ground is not a shadow, it is a rumour. */
box-shadow:
0 10px 22px rgba(20, 20, 43, .16),
0 2px 5px rgba(20, 20, 43, .10);
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.video--short .video__thumb { aspect-ratio: 9 / 16; }
.video__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* The card rises and its shadow grows with it — the two have to move together
or the lift reads as the picture sliding up the page rather than off it. */
.video__link:hover .video__thumb,
.video__link:focus-visible .video__thumb {
transform: translateY(-6px);
box-shadow:
0 20px 36px rgba(20, 20, 43, .24),
0 4px 8px rgba(20, 20, 43, .12);
}
/* The play mark is a CSS triangle on a disc, so it still reads on a card
whose thumbnail failed to load. Sized in em of the tile so it stays in
proportion on the narrower short tiles. */
.video__play {
position: absolute;
top: 50%;
left: 50%;
width: 46px;
height: 46px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: rgba(20, 20, 43, .55);
backdrop-filter: blur(2px);
/* The disc is translucent, so on a busy still it can sink into whatever is
behind it. The shadow gives it an edge of its own; the inset highlight
keeps the top of the circle visible against a dark frame. */
box-shadow:
0 6px 16px rgba(0, 0, 0, .38),
inset 0 1px 0 rgba(255, 255, 255, .22);
transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.video__play::after {
content: "";
position: absolute;
top: 50%;
left: 54%;
width: 0;
height: 0;
transform: translate(-50%, -50%);
border-left: 16px solid #fff;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.video__link:hover .video__play,
.video__link:focus-visible .video__play {
background: var(--logo-purple);
transform: translate(-50%, -50%) scale(1.08);
/* Tinted to the button's own purple on hover, so the glow belongs to the
control rather than looking like a second grey shadow. */
box-shadow:
0 8px 20px rgba(102, 54, 150, .50),
inset 0 1px 0 rgba(255, 255, 255, .28);
}
.video__title {
font-size: var(--fs-sm);
font-weight: 600;
line-height: 1.5;
/* Titles vary from three words to a full sentence; clamping keeps the
row of cards even without truncating mid-thought on the short ones. */
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.videos__more { margin-top: clamp(24px, 3vw, 34px); text-align: center; }
/* ---- testimonials -------------------------------------------------------
The quote is the subject, so it is set largest and first; the portrait is
an attribution mark at the foot of the card, not a header image. Keeping
the picture small also keeps the supplied circular crops honest — squared
off at 56px, the scaling that costs their outer edge is invisible.
Cards stretch to equal height and the attribution is pushed to the bottom,
so the three names line up across the row however long the quotes run.
------------------------------------------------------------------------ */
.quotes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: clamp(18px, 2.5vw, 26px);
align-items: stretch;
}
.quote {
display: flex;
flex-direction: column;
margin: 0;
padding: clamp(26px, 3vw, 36px);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.quote:hover {
transform: translateY(-6px);
border-color: var(--purple-200);
box-shadow: var(--lift-1);
}
/* A short rule rather than a giant serif quotation mark: the mark competed
with the text for weight and pushed the first line down by 30px. */
.quote__text {
flex: 1 1 auto;
margin: 0 0 22px;
color: var(--ink-soft);
font-size: var(--fs-md);
line-height: 1.75;
}
.quote__text::before {
content: "";
display: block;
width: 34px;
height: 3px;
margin-bottom: 18px;
border-radius: 2px;
background: var(--grad-logo);
}
.quote__text p { margin: 0; }
.quote__by {
display: flex;
align-items: center;
gap: 14px;
padding-top: 20px;
border-top: 1px solid var(--line);
}
/* Rounded square, not a disc — a circle here would put the round crop back,
which is the shape that was rejected. */
.quote__portrait {
display: grid;
place-items: center;
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 14px;
background: var(--purple-50);
overflow: hidden;
/* `box-shadow`, not the art token: this one is a filled rounded box, so
the shadow belongs to the frame rather than to the face inside it. */
box-shadow: var(--shadow-md);
}
.quote__portrait img {
width: 100%;
height: 100%;
object-fit: cover;
/* The source files are circular crops on a transparent ground; scaling by
√2 pushes their corners outside this frame so the portrait reads square. */
transform: scale(1.42);
}
.quote__portrait--initials {
background: var(--purple-100);
color: var(--purple-700);
font-size: var(--fs-sm);
font-weight: 700;
}
/* The zoom trigger is a button, so its own chrome is stripped back to the
frame the portrait already had. */
.quote__portrait--zoom {
position: relative;
padding: 0;
border: 0;
cursor: zoom-in;
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.quote__portrait--zoom:hover { transform: scale(1.06); box-shadow: var(--shadow-md); }
/* The magnifier only appears on hover or keyboard focus — at rest the row
should read as an attribution, not a gallery. */
.quote__zoom-hint {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: rgba(20, 20, 43, .45);
color: #fff;
opacity: 0;
transition: opacity .25s var(--ease);
}
.quote__portrait--zoom:hover .quote__zoom-hint,
.quote__portrait--zoom:focus-visible .quote__zoom-hint { opacity: 1; }
/* No