/* fonts.css is linked from each page's (not @import'd here) so the
browser discovers the font files in parallel with this stylesheet */
/* ==========================================================================
Jib OS — landing page
Hand-written CSS. No framework, no JS, no animation.
Design tokens mirror the reference design's warm-neutral system.
========================================================================== */
/* --- tokens --------------------------------------------------------------- */
:root {
/* warm paper surfaces */
--surface-50: oklch(99.3% 0.004 96);
--surface-300: oklch(97.5% 0.007 96);
--surface-500: oklch(96.3% 0.012 96);
--white: oklch(100% 0 0);
/* warm-grey ink ramp */
--ink-100: oklch(95.8% 0.007 98);
--ink-200: #edeae4;
--ink-300: oklch(87.6% 0.011 98);
--ink-400: oklch(71.4% 0.009 98);
--ink-500: oklch(67.6% 0.012 98);
--ink-600: oklch(57.6% 0.008 98);
--ink-700: oklch(38% 0.008 98);
--ink-800: oklch(29% 0.005 98);
--ink-900: oklch(23% 0.002 98);
--text-primary: var(--ink-900);
--text-secondary:var(--ink-700);
/* darker than the ink-500 ramp step it replaced: small muted labels
(stat captions, "/ month", card intents, pills) need ≥4.5:1 on paper */
--text-muted: oklch(53% 0.011 98);
--text-inverse: var(--ink-100);
--border-subtle: var(--ink-100);
--border-default: var(--ink-200);
--border-strong: var(--ink-300);
/* accents sampled from Jib himself */
--accent-blue: rgb(59 130 246);
--accent-blue-d: rgb(37 99 235);
--accent-teal: rgb(45 212 191);
--accent-coral: rgb(251 146 96);
--font-heading: "new-kansas", Georgia, serif;
--font-body: "Jib Sans", "Noto Sans Thai", system-ui, -apple-system, sans-serif;
}
/* No lang-scoped override here, unlike the TH site. Thai needed one: it dropped
the serif headings for a Thai sans and swapped the body face. Indonesian is
Latin script, so lang="id" inherits the root stack above and the Indonesian
page gets the same typography as the English one — new-kansas headings,
Jib Sans body. That is intentional, not an oversight.
NOTE: new-kansas is served from Adobe Typekit kit rsi5hww, and Typekit web
projects are DOMAIN-SCOPED. hdmall.id has to be added to that kit or every
heading silently falls back to Georgia. There is no console error. */
:root {
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.625rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-3xl: 1.5rem;
--radius-full: 9999px;
--container: 1320px;
--gutter: 24px;
--section-y: 120px;
--shadow-card: 0 1px 2px rgb(28 25 23 / 0.04), 0 8px 24px -8px rgb(28 25 23 / 0.10);
--shadow-raised: 0 1px 2px rgb(28 25 23 / 0.06), 0 12px 32px -8px rgb(28 25 23 / 0.16);
}
/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
/* the one exception to the no-motion rule: in-page anchor scrolling */
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
color: var(--text-primary);
background: var(--surface-50);
-webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
/* Respect the "no animation" rule globally — nothing here transitions. */
/* --- layout primitives ---------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--tight { padding-block: 72px; }
.eyebrow {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 500;
color: var(--text-secondary);
text-align: center;
}
h1, h2, h3, h4 {
font-family: var(--font-heading);
font-weight: 500;
letter-spacing: -0.013em;
line-height: 1.15;
text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 5.2vw, 4rem); line-height: 1.07; letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.15; }
h3 { font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.023em; }
h4 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.01em; }
.lede {
font-size: 1.25rem;
line-height: 1.6;
color: var(--text-secondary);
text-wrap: pretty;
}
/* --- buttons -------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 26px;
border-radius: var(--radius-xl);
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.011em;
white-space: nowrap;
}
.btn--primary { background: var(--ink-900); color: var(--white); }
.btn--primary:hover { background: var(--ink-800); }
.btn--light { background: var(--white); color: var(--ink-900); box-shadow: var(--shadow-card); }
.btn--light:hover { background: var(--ink-100); }
.btn--ghost-dark {
background: rgb(255 255 255 / 0.10);
color: var(--white);
border: 1px solid rgb(255 255 255 / 0.18);
backdrop-filter: blur(8px);
}
.btn--ghost-dark:hover { background: rgb(255 255 255 / 0.18); }
.btn--outline { border: 1px solid var(--border-strong); color: var(--ink-900); background: var(--white); }
.btn--outline:hover { background: var(--surface-300); }
.btn--sm { padding: 9px 16px; font-size: 0.875rem; }
/* the one conversion moment gets the biggest button on the page */
.btn--xl {
padding: 18px 36px;
font-size: 1.125rem;
border-radius: var(--radius-2xl);
box-shadow: 0 2px 4px rgb(10 6 20 / 0.18), 0 14px 40px -8px rgb(10 6 20 / 0.45);
}
.btn__arrow { font-weight: 400; }
.btn--xl:hover .btn__arrow { padding-inline-start: 2px; }
/* --- nav ------------------------------------------------------------------ */
.nav {
position: fixed;
top: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 50;
width: min(calc(var(--container) + -28px), calc(100% - 32px));
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.nav__group {
display: flex;
align-items: center;
gap: 4px;
padding: 6px;
/* background: rgb(255 255 255 / 0.92); */
backdrop-filter: blur(12px);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-card);
}
.nav__brand {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
font-family: var(--font-heading);
font-size: 1.125rem;
font-weight: 600;
letter-spacing: -0.02em;
white-space: nowrap;
}
/* Jib, the mascot, doubles as the brand mark */
.brandmark { width: 24px; height: 24px; object-fit: contain; flex: none; }
.footer__brand .brandmark { width: 28px; height: 28px; }
.nav__divider { width: 1px; height: 22px; background: var(--border-default); margin-inline: 4px; }
.nav__link {
padding: 8px 14px;
border-radius: var(--radius-md);
font-size: 0.9375rem;
font-weight: 600;
color: var(--ink-800);
white-space: nowrap;
}
.nav__link:hover { background: var(--surface-300); }
/* language select, dressed as a nav link with its own small chevron */
.nav__lang {
appearance: none;
-webkit-appearance: none;
border: 0;
padding: 8px 24px 8px 12px;
border-radius: var(--radius-md);
font: inherit;
font-size: 0.875rem;
font-weight: 600;
color: var(--ink-800);
cursor: pointer;
background: transparent url("data:image/svg+xml;utf8,") right 8px center / 10px no-repeat;
}
.nav__lang:hover { background-color: var(--surface-300); }
/* landing-page variant: the pills wear the same glass as .btn--ghost-dark
(article pages keep the white pills — their nav sits on paper, not art) */
.nav--glass .nav__group,
.nav--glass .nav__burgerpill {
/* background: rgb(255 255 255 / 0.10);
border: 1px solid rgb(255 255 255 / 0.18);
backdrop-filter: blur(8px);
box-shadow: none; */
}
.nav--glass .nav__brand,
.nav--glass .nav__link { color: var(--white); }
.nav--glass .nav__link:hover { background: rgb(255 255 255 / 0.14); }
.nav--glass .nav__lang {
color: var(--white);
background-image: url("data:image/svg+xml;utf8,");
}
.nav--glass .nav__lang:hover { background-color: rgb(255 255 255 / 0.14); }
.nav--glass .nav__lang option { color: var(--text-primary); }
.nav--glass .nav__divider { background: rgb(255 255 255 / 0.25); }
.nav--glass .nav__burger span { background: var(--white); }
/* the open mobile sheet stays a solid white menu for readability */
.nav--glass .nav__mobile { color: var(--text-primary); }
.nav--glass .nav__mobile .nav__lang { color: var(--ink-800); background-image: url("data:image/svg+xml;utf8,"); }
/* --- hero ----------------------------------------------------------------- */
/* the frame's own gradient is sampled from the hero art's top (near-navy)
and bottom (dusty rose/coral) tones, so the inset margin reads as a
continuation of the art instead of a cut-out white border */
.hero-frame {
padding: 20px;
background: var(--surface-500);
}
.hero {
position: relative;
isolation: isolate;
min-height: min(90vh, 800px);
min-height: min(90svh, 800px);
border-radius: 2rem;
padding-top: 168px;
padding-bottom: 96px;
overflow: hidden;
text-align: center;
color: var(--white);
background: #171029;
}
.hero__art {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom;
}
/* keeps the headline legible over the brightest part of the art */
.hero__scrim {
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgb(14 9 26 / 0.62) 0%, rgb(14 9 26 / 0.30) 42%, rgb(14 9 26 / 0) 72%);
}
/* reduced motion gets the video's opening frame as a still instead */
@media (prefers-reduced-motion: reduce) {
.hero__video { display: none; }
.hero {
background: #171029 url("assets/brand/hero-poster.jpg") center bottom / cover no-repeat;
}
}
@media (prefers-reduced-motion: reduce) and (max-width: 720px) {
.hero {
background: #171029 url("assets/brand/hero-poster-mobile.jpg") center bottom / cover no-repeat;
}
}
.hero h1 { max-width: 20ch; margin-inline: auto; }
.hero .lede {
max-width: 58ch;
margin: 24px auto 0;
color: rgb(255 255 255 / 0.82);
}
.hero__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 32px;
}
/* --- logo bar ------------------------------------------------------------- */
.logobar { background: var(--surface-500); padding-block: 48px; border-radius: 0 0 50px 50px; }
.logobar .eyebrow { margin-bottom: 32px; }
.logobar__row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 26px 56px;
/* fade the outermost logos rather than hard-cut the row's edges. Wide
enough to reach past the centering slack on a wrapped line (justify-
content: center leaves empty space before the first/last item whenever
a line's items don't fill the full row width) */
-webkit-mask-image: linear-gradient(to right, transparent, black 140px, black calc(100% - 140px), transparent);
mask-image: linear-gradient(to right, transparent, black 140px, black calc(100% - 140px), transparent);
}
.logobar__row img {
height: 40px;
width: 100px;
object-fit: contain;
opacity: 0.9;
/* fixed box + contain: every mark gets the same footprint regardless of its
native aspect ratio (a 346x96 wordmark and an 81x96 mark used to render
at wildly different widths at a shared height).
these are real partner marks — keep their color, they turn to mush in greyscale */
}
/* --- pull quote ----------------------------------------------------------- */
.quote { text-align: center; background: var(--surface-50); }
.quote blockquote {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 3.2vw, 2.75rem);
font-weight: 400;
line-height: 1.28;
letter-spacing: -0.018em;
color: var(--ink-800);
max-width: 22ch;
margin-inline: auto;
text-wrap: balance;
/* grows from smaller to full size as the quote streams in on scroll
(--stream-scale is set per scroll frame in assets/i18n.js) */
transform: scale(var(--stream-scale, 1));
transform-origin: center;
}
/* --- feature rows --------------------------------------------------------- */
.feature { padding-block: var(--section-y); }
/* breathing room between the two group sections */
.group + .group { margin-top: var(--section-y); }
/* the group's feature rows sit in one rounded card that rides up over the
banner art, like the old agent card did */
.group__card {
position: relative;
margin-top: -104px;
background: var(--white);
border: 1px solid var(--border-default);
/* concentric radii: the card is the outermost rounded surface, so its radius
stays larger than anything nested inside it (32 > 16) */
border-radius: 2rem;
box-shadow: var(--shadow-raised);
padding-inline: clamp(20px, 4vw, 64px);
}
.group__card .feature { padding-block: 56px; }
.group__card .feature .container { padding-inline: 0; }
/* immersive rows are background blocks, so they space with margins instead of
internal padding — this keeps clear air between every row in the card */
.group__card .feature--immersive { margin-block: 48px; padding-block: 56px; }
.group__card .feature--immersive:last-child { margin-bottom: 56px; }
.feature__inner {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 72px;
}
.feature--reverse .feature__media { order: -1; }
.feature__body { margin-top: 16px; max-width: 46ch; }
.feature__list { margin-top: 24px; display: grid; gap: 12px; }
.feature__list li {
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 0.9375rem;
color: var(--text-secondary);
}
.feature__tick {
flex: none;
width: 20px; height: 20px;
margin-top: 2px;
border-radius: var(--radius-full);
background: var(--ink-900);
color: var(--white);
font-size: 11px;
line-height: 20px;
text-align: center;
font-weight: 700;
}
.feature__media img,
.feature__media video {
width: 100%;
border-radius: var(--radius-2xl); /* nested inside .group__card (2rem) */
box-shadow: var(--shadow-raised);
aspect-ratio: 16 / 10;
object-fit: cover;
}
/* --- stat band ------------------------------------------------------------ */
.stats__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
text-align: center;
}
.stat__num {
font-family: var(--font-heading);
font-size: clamp(1.375rem, 2.4vw, 2rem);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1;
}
.stat__label { margin-top: 10px; font-size: 0.9375rem; color: var(--text-muted); }
/* --- closing CTA ---------------------------------------------------------- */
.cta {
position: relative;
isolation: isolate;
overflow: hidden;
text-align: center;
color: var(--text-primary);
margin: 20px;
border-radius: 2rem;
padding-block: 132px;
padding-bottom: 400px;
}
.cta__art {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%;
object-fit: cover; /* the plate is authored bright; the scrim is eased to 0.28 */
}
.cta__scrim { position: absolute; inset: 0; z-index: -1; background: rgb(16 10 28 / 0.28); }
.cta h2 { max-width: 18ch; margin-inline: auto; }
.cta .lede { max-width: 58ch; margin: 20px auto 0; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
/* --- footer --------------------------------------------------------------- */
.footer {
position: relative;
isolation: isolate;
overflow: hidden;
color: var(--white);
padding-block: 84px 0px;
padding-top: 0px;
}
/* frosted-glass card floating over the shared finale art, rather than the
footer content sitting directly on the raw scrim */
.footer .container {
/* background: linear-gradient(155deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.04) 60%);
border: 1px solid rgb(255 255 255 / 0.22); */
border-radius: 28px;
/* backdrop-filter: blur(28px) saturate(150%);
-webkit-backdrop-filter: blur(28px) saturate(150%);
box-shadow:
0 20px 48px -12px rgb(0 0 0 / 0.35),
inset 0 1px 0 rgb(255 255 255 / 0.25); */
padding: 56px 48px 40px;
/* .footer has a fixed height for the finale art behind it; stretch the
container to that height so footer__bottom can be pinned to its floor */
height: 100%;
display: flex;
flex-direction: column;
}
.footer__top {
display: grid;
grid-template-columns: 2fr 1.2fr 1.4fr;
gap: 48px;
}
.footer__blurb { max-width: 34ch; color: var(--white); font-size: 0.9375rem; margin-top: 14px; }
.footer__brand {
display: flex; align-items: center; gap: 10px;
color: var(--white);
font-family: var(--font-heading);
font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em;
}
.footer h4 {
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--white);
margin-bottom: 16px;
}
.footer__links { display: grid; gap: 4px; font-size: 0.9375rem; }
/* padding instead of pure grid gap keeps each row a ≥28px touch target */
.footer__links a { display: inline-block; padding-block: 4px; color: var(--white); }
.footer__links a:hover { color: rgb(255 255 255 / 0.7); }
.footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: auto;
padding-top: 100px;
font-size: 0.875rem;
color: var(--white);
}
.footer__legal { color: inherit; }
.footer__legal:hover { color: var(--ink-600); }
/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
:root { --section-y: 88px; }
.feature__inner { grid-template-columns: 1fr; gap: 40px; }
.feature--reverse .feature__media { order: 0; }
.footer__top { grid-template-columns: 1fr 1fr; gap: 36px; }
.stats__grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
}
@media (max-width: 720px) {
:root { --section-y: 64px; --gutter: 18px; }
/* one mobile type ladder: h1 40 → h2 + banner titles 28 → card h2 / h3 24
→ lede 17 → body 16. Class-level headings (.wall__head, .faq__aside h2)
get the same 28 in their own later media blocks. */
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
.lede { font-size: 1.125rem; }
/* a right-shifted crop keeps the small banner Jibs (baked in at ~73% from
the left) clear of the title on phones; the title's own mobile size lives
in the late 720 block — it must follow the base clamp() in file order */
.group .agent__art { object-position: 65% center; }
.nav { top: 22px; }
.hero-frame { padding: 10px; }
.hero { border-radius: 1.25rem; }
.cta { margin: 10px; border-radius: 1.25rem; }
/* keep the brand visible; drop only the section links */
.nav__group--links .nav__link,
.nav__group--links .nav__divider { display: none; }
.nav__brand { padding-inline: 10px; font-size: 1rem; }
.nav__group { gap: 2px; }
.nav__link { padding: 8px 10px; font-size: 0.875rem; }
.btn--sm { padding: 9px 13px; }
.hero { padding-top: 132px; }
/* .footer rules removed with the