/* KustomAI landing (2026-08-23, refined):
* Text (headings / body / labels) → BLACK on WHITE
* Royal Blue → buttons + header/hero chrome only
Hierarchy on the white plate is expressed as opacity of pure black;
the hero + primary button remain Royal Blue and use White ink.
Fonts (Ubuntu, Instrument Serif, Noto Sans Khmer) are loaded via
a direct `` in every marketing page's so they hit the
first paint without waiting on this stylesheet to parse. */
:root {
/* Canonical brand pair — never override these two. */
--royal-blue: #0a42ba;
--pure-white: #ffffff;
--pure-black: #000000;
/* White body + Black ink. Text hierarchy is black at
100% / 78% / 55% opacity for heading / body / mute.
Lines are near-black hairlines. */
--ink: var(--pure-black);
--ink-body: rgba(0, 0, 0, 0.78);
--mute: rgba(0, 0, 0, 0.55);
--line: rgba(0, 0, 0, 0.10);
--paper: var(--pure-white);
--surface-tint: rgba(0, 0, 0, 0.03); /* a hair of black on White for card fills */
--font: "Ubuntu", "Noto Sans", "Noto Sans Khmer", system-ui, sans-serif;
/* One-family lockdown — everything is Ubuntu. The `--font-serif`
alias is retained (points at the same Ubuntu stack) so existing
rules that reference it continue to render without churn. */
--font-serif: var(--font);
/* Royal Blue plate — hero + footer chrome. */
--ka-hero: var(--royal-blue);
--ka-hero-deep: var(--royal-blue); /* solid, no gradient tint */
/* Primary action — Pure White fill on the Royal Blue hero
inverts to Royal Blue fill on the White body. Handled by the
button rules further down. */
--ka-highlight: var(--royal-blue);
--ka-highlight-hover: rgba(10, 66, 186, 0.88);
--ka-highlight-ink: var(--pure-white);
/* On-Royal-Blue counterparts — White at graded opacities. */
--ink-on-dark: var(--pure-white);
--ink-on-dark-mute: rgba(255, 255, 255, 0.78);
--line-on-dark: rgba(255, 255, 255, 0.20);
/* -----------------------------------------------------------------
KustomAI brand palette (60 / 30 / 10). Prefer these tokens over
ad-hoc hexes in every new component so the branding stays coherent.
60% chrome → --ka-navy for backgrounds, nav, headers, logo mass
30% mid → --ka-cobalt or --ka-indigo for key text, cards,
non-AI filled buttons, primary iconography
10% accent → --ka-cyan / --ka-orange / --ka-violet for the
highest-priority interactive moment on a screen —
AI action buttons, live badges, status pips. Used
sparingly so the pops stay pops.
----------------------------------------------------------------- */
--ka-navy: #0f172a;
--ka-cobalt: #2563eb;
--ka-indigo: #4f46e5;
--ka-cyan: #06b6d4;
--ka-orange: #f97316;
--ka-violet: #8b5cf6;
/* Button roles — declared as separate tokens (not aliases into the
palette) so the marketing team can retune button hues without
re-mapping the 60/30/10 chrome. Primary is a mint accent that
reads as "action"; secondary is a deep violet that reads as
"supporting action". Hover shades stay in the same hue for
tactile feedback. */
--ka-primary: #4ff7d1;
--ka-primary-hover: #34e5bc;
--ka-primary-ink: #0f172a; /* Navy text on the mint fill — WCAG AAA */
--ka-secondary: #8847b9;
--ka-secondary-hover: #7238a1;
--ka-secondary-ink: #ffffff; /* White text on the violet fill — WCAG AA */
}
.os {
margin: 0;
color: var(--ink-body);
background: var(--paper);
font-family: var(--font);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
/* Headings own the darker ink so they anchor against the softer
purple-tinted body copy — same tone-splitting Fly uses. */
.os h1, .os h2, .os h3, .os h4, .os h5 {
color: var(--ink);
}
.os *,
.os *::before,
.os *::after {
box-sizing: border-box;
}
.os a:not(.os-btn):not(.os-brand) {
color: var(--ink-body);
text-decoration: underline;
text-decoration-color: rgba(5, 32, 102, 0.35);
text-underline-offset: 3px;
font-weight: 600;
transition: color 120ms ease, text-decoration-color 120ms ease;
}
.os a:not(.os-btn):not(.os-brand):hover {
color: var(--ink);
text-decoration-color: var(--ink-body);
opacity: 1;
}
.os :lang(km) {
font-family: "Noto Sans Khmer", var(--font);
}
.os-wrap {
width: min(920px, calc(100% - 40px));
margin-inline: auto;
}
.skip {
position: absolute;
left: -999px;
top: 8px;
background: var(--paper);
padding: 8px 12px;
z-index: 80;
}
.skip:focus {
left: 8px;
}
/* Sticky nav lives on Pure White (matches interior surface).
Backdrop blur smooths the transition when the Royal Blue hero
scrolls behind it — the ribbon reads as a bright plate over blue. */
.os-bar {
position: sticky;
top: 0;
z-index: 40;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: saturate(140%) blur(10px);
-webkit-backdrop-filter: saturate(140%) blur(10px);
border-bottom: 1px solid var(--line);
}
.os-bar-inner {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 64px;
}
.os-brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--ink);
font-weight: 600;
text-decoration: none !important;
letter-spacing: -0.02em;
}
.os-brand:hover {
opacity: 0.85;
color: var(--royal-blue);
}
.os-brand img {
display: block;
}
.os-nav {
display: flex;
align-items: center;
gap: 22px;
}
.os-nav a:not(.os-btn) {
font-size: 14px;
font-weight: 500;
text-decoration: none;
color: var(--ink);
transition: color 120ms ease;
}
.os-nav a:not(.os-btn):hover {
color: var(--royal-blue);
opacity: 0.72;
}
/* Base pill — transparent, inherits color from context. Filled
variants (.os-btn-fill / .os-btn-soft) paint over the top. This
means an unadorned `.os-btn` in the nav reads as a subtle outline
on Navy, and a plain `.os-btn` inside a light section reads as a
soft slate chip. */
.os-btn,
a.os-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 18px;
border: 1px solid currentColor;
border-radius: 999px;
background: transparent;
color: inherit;
font-family: inherit;
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 60ms ease;
}
.os-btn:hover,
a.os-btn:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.08);
}
.os-btn:active,
a.os-btn:active {
transform: translateY(1px);
}
/* Primary CTA — Royal Blue fill on the White interior. Inverts to
White fill on the Royal Blue hero (rule below). Only two colours
in play; hover uses opacity to soften without adding a hue. */
.os-btn-fill,
a.os-btn-fill {
background: var(--royal-blue);
color: var(--pure-white);
border-color: transparent;
box-shadow: 0 6px 20px rgba(10, 66, 186, 0.24);
}
.os-btn-fill:hover,
a.os-btn-fill:hover {
background: rgba(10, 66, 186, 0.88);
color: var(--pure-white);
box-shadow: 0 8px 24px rgba(10, 66, 186, 0.32);
}
/* On the Royal Blue hero, invert so the primary CTA reads as a
solid White pill on Blue — same contrast, different direction. */
.os-hero .os-btn-fill,
.os-hero a.os-btn-fill {
background: var(--pure-white);
color: var(--royal-blue);
box-shadow: 0 6px 22px rgba(255, 255, 255, 0.22);
}
.os-hero .os-btn-fill:hover,
.os-hero a.os-btn-fill:hover {
background: rgba(255, 255, 255, 0.92);
color: var(--royal-blue);
box-shadow: 0 10px 28px rgba(255, 255, 255, 0.30);
}
/* Secondary CTA — outlined pill using currentColor so the same
markup adapts to any surface. On White it draws a Royal Blue
outline over White; on Blue it draws a White outline over Blue. */
.os-btn-soft,
a.os-btn-soft {
background: transparent;
color: var(--royal-blue);
border: 1px solid rgba(10, 66, 186, 0.35);
box-shadow: none;
}
.os-btn-soft:hover,
a.os-btn-soft:hover {
background: rgba(10, 66, 186, 0.06);
color: var(--royal-blue);
border-color: var(--royal-blue);
box-shadow: none;
}
.os-hero .os-btn-soft,
.os-hero a.os-btn-soft {
background: transparent;
color: var(--pure-white);
border: 1px solid rgba(255, 255, 255, 0.35);
}
.os-hero .os-btn-soft:hover,
.os-hero a.os-btn-soft:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--pure-white);
border-color: var(--pure-white);
}
.os-btn-lg {
min-height: 48px;
padding: 0 20px;
}
.os-btn-block {
width: 100%;
}
/* Language switcher pills — sit inline in the top nav. */
.os-lang {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0;
background: transparent;
}
.os-lang-btn {
width: 26px;
height: 20px;
padding: 0;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
}
.os-lang-btn .lang-flag {
display: block;
width: 22px;
height: auto;
border-radius: 2px;
filter: grayscale(0.7);
opacity: 0.6;
transition: filter 150ms ease, opacity 150ms ease;
}
.os-lang-btn:hover .lang-flag,
.os-lang-btn.is-on .lang-flag {
filter: grayscale(0);
opacity: 1;
}
html[lang="km"] body.os {
font-family: "Noto Sans Khmer", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
html[lang="ja"] body.os {
font-family: "Noto Sans JP", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.os-btn:focus-visible,
.os a:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
}
/* Hero — solid Royal Blue plate. Dot pattern is White at low
opacity so we stay on-palette. Serif headline in Pure White. */
.os-hero {
position: relative;
padding: 128px 0 112px;
background: var(--royal-blue);
color: var(--ink-on-dark);
border-bottom: 0;
overflow: hidden;
}
.os-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.30;
background-image:
radial-gradient(circle, rgba(255, 255, 255, 0.18) 1.1px, transparent 1.2px),
radial-gradient(circle, rgba(255, 255, 255, 0.10) 1.1px, transparent 1.2px);
background-size: 22px 22px, 22px 22px;
background-position: 0 0, 11px 11px;
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(180deg, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%);
}
.os-hero > * {
position: relative;
z-index: 1;
}
.os-hero h1 {
margin: 0 0 20px;
font-family: var(--font-serif);
font-size: clamp(48px, 8vw, 112px);
font-weight: 500;
letter-spacing: -0.025em;
line-height: 0.98;
color: var(--pure-white);
}
/* Editorial detail — italic `` inside the headline sits at
softened white so it reads as an emphasis inflection, not a
different colour (palette purity). */
.os-hero h1 em,
.os-serif-em {
font-style: italic;
color: rgba(255, 255, 255, 0.72);
}
.os-block h2,
.os-end h2 {
margin: 0 0 20px;
font-family: var(--font-serif);
font-size: clamp(32px, 4vw, 56px);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.08;
}
.os-lead,
.os-lede {
margin: 0 0 28px;
max-width: 34rem;
color: var(--mute);
font-size: 19px;
line-height: 1.55;
}
/* Hero lead — White at 78% opacity, reads as body without dropping
to bald white. */
.os-hero .os-lead,
.os-hero .os-note {
color: var(--ink-on-dark-mute);
font-size: 20px;
max-width: 38rem;
}
/* Text links inside the hero — Pure White with a softer underline
trail. Palette-pure. */
.os-hero a:not(.os-btn):not(.os-brand) {
color: var(--pure-white);
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0.45);
text-underline-offset: 3px;
}
.os-hero a:not(.os-btn):not(.os-brand):hover {
color: var(--pure-white);
text-decoration-color: var(--pure-white);
opacity: 1;
}
.os-cta {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.os-helps {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.os-helps-inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.os-helps p {
margin: 0;
padding: 28px 24px 28px 0;
border-right: 1px solid var(--line);
font-size: 16px;
}
.os-helps p:last-child {
border-right: 0;
padding-right: 0;
}
.os-block {
padding: 80px 0;
}
.os-block-line {
border-top: 1px solid var(--line);
}
.os-list {
margin: 36px 0 0;
padding: 0;
}
.os-list > div {
display: grid;
grid-template-columns: 200px 1fr;
gap: 24px;
padding: 16px 0;
border-top: 1px solid var(--line);
}
.os-list > div:last-child {
border-bottom: 1px solid var(--line);
}
.os-list dt {
margin: 0;
font-weight: 600;
}
.os-list dd {
margin: 0;
color: var(--mute);
}
/* Product page — small uppercase kicker above a section heading.
Hero-purple so the kicker doubles as a section-brand pip. */
.os-eyebrow {
margin: 0 0 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-body);
}
/* Product page — module tile grid. Each tile is a link into a per-module
deep section (or elsewhere in the site). Auto-fill so the grid reflows
from 4 columns on desktop down to 1 on mobile. */
.os-modules {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
margin: 32px 0 0;
}
.os-mod {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
text-decoration: none;
color: inherit;
overflow: hidden;
transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.os-mod:hover {
border-color: var(--royal-blue);
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(10, 66, 186, 0.14);
}
/* Hero image — 320x200 SVG concept illustration. Aspect locked so
the grid stays tidy no matter how tall descriptions get. */
.os-mod-hero {
display: block;
width: 100%;
aspect-ratio: 320 / 200;
object-fit: cover;
background: #f4f4f5;
border-bottom: 1px solid var(--line);
}
.os-mod-body {
padding: 16px 18px 20px;
}
/* Legacy small-icon fallback (kept for callers still using it). */
.os-mod-icon {
display: inline-flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
background: #f4f4f5;
border-radius: 10px;
margin: 20px 20px 14px;
color: #111;
}
.os-mod-icon svg,
.os-mod-icon .nav-icon {
width: 22px;
height: 22px;
color: currentColor;
}
.os-mod h3 {
margin: 0 0 6px;
font-size: 16px;
font-weight: 600;
letter-spacing: -0.005em;
}
.os-mod p {
margin: 0;
color: var(--mute);
font-size: 14px;
line-height: 1.5;
}
/* Flat "all modules" catalog grid — icon on top, module name, tiny tag.
Denser than .os-modules; ~5-6 columns on desktop, 2 on mobile. */
.os-mod-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
margin: 32px 0 0;
}
.os-mod-lite {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
padding: 20px 12px 16px;
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
text-decoration: none;
color: inherit;
transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.os-mod-lite:hover {
border-color: #111;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}
.os-mod-lite-img {
display: block;
width: 72px;
height: 72px;
object-fit: contain;
margin-bottom: 12px;
}
.os-mod-lite h3 {
margin: 0 0 2px;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1.25;
}
.os-mod-lite p {
margin: 0;
color: var(--mute);
font-size: 12px;
line-height: 1.35;
}
/* ============================================================
Play Store-style product catalog + detail pages
============================================================ */
/* --- Category tab bar (All / Sell / Operate / …) --- */
.ps-cat-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 24px 0 0;
}
.ps-cat-tab {
display: inline-flex;
align-items: center;
padding: 8px 16px;
border: 1px solid var(--line);
border-radius: 999px;
background: #fff;
color: #111;
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ps-cat-tab:hover {
border-color: #111;
}
.ps-cat-tab.is-on {
background: #fef3c7;
color: #111;
border-color: #f59e0b;
font-weight: 600;
}
/* --- Catalog grid card (Play Store app tile) --- */
.ps-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
margin: 28px 0 0;
}
.ps-card {
display: flex;
flex-direction: column;
padding: 18px 16px;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
text-decoration: none;
color: inherit;
transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.ps-card:hover {
border-color: #111;
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
}
.ps-card-icon {
display: block;
width: 56px;
height: 56px;
object-fit: contain;
background: #f4f4f5;
border-radius: 12px;
margin-bottom: 12px;
padding: 6px;
}
.ps-card-name {
margin: 0 0 4px;
font-size: 15px;
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1.25;
}
.ps-card-summary {
margin: 0 0 10px;
color: var(--mute);
font-size: 12.5px;
line-height: 1.4;
}
.ps-card-meta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: auto;
color: var(--mute);
font-size: 12px;
}
.ps-card-star {
color: #f5a623;
font-size: 13px;
line-height: 1;
}
.ps-card-rate {
color: #111;
font-weight: 600;
}
/* --- Detail page header --- */
.ps-detail-back {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 24px 0 8px;
color: var(--mute);
font-size: 13px;
text-decoration: none;
}
.ps-detail-back:hover { color: #111; }
.ps-detail-header {
display: grid;
grid-template-columns: 128px 1fr;
gap: 24px;
align-items: center;
padding: 8px 0 24px;
}
.ps-detail-icon {
width: 128px;
height: 128px;
object-fit: contain;
background: #f4f4f5;
border-radius: 24px;
padding: 14px;
}
.ps-detail-title {
margin: 0 0 6px;
font-size: 28px;
font-weight: 700;
letter-spacing: -0.015em;
}
.ps-detail-cat {
margin: 0 0 12px;
color: var(--mute);
font-size: 14px;
}
.ps-detail-meta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px;
margin: 0 0 16px;
color: var(--mute);
font-size: 13px;
}
.ps-detail-meta-item {
display: inline-flex;
flex-direction: column;
gap: 2px;
}
.ps-detail-meta-item strong {
color: #111;
font-size: 14px;
font-weight: 600;
}
.ps-detail-cta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 4px;
}
/* --- Screenshots gallery --- */
.ps-gallery {
display: flex;
gap: 12px;
padding: 4px 0 20px;
margin: 12px 0 32px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.ps-gallery-img {
flex: 0 0 auto;
width: 320px;
aspect-ratio: 320 / 200;
object-fit: cover;
background: #f4f4f5;
border: 1px solid var(--line);
border-radius: 12px;
scroll-snap-align: start;
}
/* --- Detail content sections --- */
.ps-section {
padding: 28px 0;
border-top: 1px solid var(--line);
}
.ps-section h2 {
margin: 0 0 14px;
font-size: 20px;
font-weight: 700;
letter-spacing: -0.01em;
}
.ps-desc {
color: #333;
font-size: 15px;
line-height: 1.6;
max-width: 720px;
}
.ps-highlights {
margin: 16px 0 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 10px;
}
.ps-highlights li {
position: relative;
padding: 8px 12px 8px 32px;
background: #f8f8f9;
border-radius: 8px;
font-size: 14px;
color: #111;
}
.ps-highlights li::before {
content: "✓";
position: absolute;
left: 12px;
top: 8px;
color: #16a34a;
font-weight: 700;
}
/* --- Ratings & reviews --- */
.ps-rating-summary {
display: grid;
grid-template-columns: 160px 1fr;
gap: 32px;
align-items: center;
margin: 12px 0 24px;
}
.ps-rating-big {
text-align: center;
}
.ps-rating-big-num {
font-size: 48px;
font-weight: 700;
line-height: 1;
color: #111;
}
.ps-rating-big-stars {
color: #f5a623;
font-size: 16px;
letter-spacing: 2px;
margin: 6px 0 4px;
}
.ps-rating-big-count {
color: var(--mute);
font-size: 13px;
}
.ps-rating-bars {
display: flex;
flex-direction: column;
gap: 6px;
max-width: 340px;
}
.ps-rating-bar {
display: grid;
grid-template-columns: 16px 1fr 36px;
gap: 10px;
align-items: center;
font-size: 12px;
color: var(--mute);
}
.ps-rating-bar-track {
height: 8px;
background: #f2f2f3;
border-radius: 999px;
overflow: hidden;
}
.ps-rating-bar-fill {
height: 100%;
background: #f5a623;
border-radius: 999px;
}
.ps-reviews {
display: flex;
flex-direction: column;
gap: 20px;
margin: 12px 0 0;
}
.ps-review {
padding: 16px 0;
border-bottom: 1px solid var(--line);
}
.ps-review:last-child { border-bottom: 0; }
.ps-review-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.ps-review-avatar {
width: 36px;
height: 36px;
border-radius: 999px;
background: #f2f2f3;
color: #111;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
}
.ps-review-name {
font-size: 14px;
font-weight: 600;
color: #111;
}
.ps-review-date {
font-size: 12px;
color: var(--mute);
}
.ps-review-stars {
color: #f5a623;
font-size: 13px;
letter-spacing: 1px;
margin-bottom: 6px;
}
.ps-review-text {
color: #333;
font-size: 14px;
line-height: 1.55;
margin: 0;
}
.ps-reviews-note {
margin: 20px 0 0;
color: var(--mute);
font-size: 12px;
font-style: italic;
}
/* --- Share buttons --- */
.ps-share {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 8px 0 0;
}
.ps-share-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: #fff;
border: 1px solid var(--line);
border-radius: 999px;
color: #111;
font-size: 13px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
.ps-share-btn:hover {
border-color: #111;
background: #f8f8f9;
}
.ps-share-btn svg {
width: 14px;
height: 14px;
}
/* --- Related modules --- */
.ps-related {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 14px;
margin: 12px 0 0;
}
/* --- Responsive tweaks for detail page --- */
@media (max-width: 640px) {
.ps-detail-header {
grid-template-columns: 88px 1fr;
gap: 16px;
}
.ps-detail-icon {
width: 88px;
height: 88px;
border-radius: 18px;
padding: 10px;
}
.ps-detail-title { font-size: 22px; }
.ps-gallery-img { width: 260px; }
.ps-rating-summary {
grid-template-columns: 1fr;
gap: 16px;
text-align: left;
}
.ps-rating-big { text-align: left; }
}
.os-sub {
margin: 36px 0 12px;
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
}
.os-bullets {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 24px;
}
.os-bullets li {
color: var(--mute);
padding-left: 18px;
position: relative;
}
.os-bullets li::before {
content: "";
position: absolute;
left: 0;
top: 0.7em;
width: 8px;
height: 1px;
background: var(--ink);
}
.os-tiers {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.os-tiers article {
display: flex;
flex-direction: column;
padding: 22px 20px;
border: 1px solid var(--line);
border-radius: 16px;
}
.os-tiers .is-on {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
.os-tiers h3 {
margin: 0 0 10px;
font-size: 16px;
font-weight: 600;
}
.os-price {
margin: 0 0 8px;
font-size: 14px;
}
.os-price b {
font-size: 22px;
font-weight: 600;
}
.os-tiers p {
margin: 0 0 20px;
font-size: 14px;
color: var(--mute);
}
.os-tiers .is-on p {
color: #ccc;
}
.os-tiers .os-btn {
margin-top: auto;
}
.os-tiers .is-on .os-btn-fill,
.os-tiers .is-on a.os-btn-fill {
background: #fff;
color: #111;
}
.os-tiers .is-on .os-btn-fill:hover,
.os-tiers .is-on a.os-btn-fill:hover {
background: #eee;
color: #111;
}
.os-tiers .is-on .os-btn-soft,
.os-tiers .is-on a.os-btn-soft {
background: #2a2a2a;
color: #fff;
}
.os-note {
margin: 20px 0 0;
color: var(--mute);
font-size: 14px;
}
/* Closing section — stays on cream paper so the piece reads like an
article you're finishing rather than a marketing wall. The
Instrument Serif h2 does the emphasis lifting. */
.os-end {
padding: 112px 0 120px;
background: var(--surface-tint);
border-top: 1px solid var(--line);
color: var(--ink);
}
.os-end .os-lead,
.os-end .os-note,
.os-end p {
color: var(--mute);
}
.os-end a:not(.os-btn):not(.os-brand) {
color: var(--ink-body);
font-weight: 600;
}
.os-end a:not(.os-btn):not(.os-brand):hover {
color: var(--ink);
opacity: 1;
}
/* Footer closes on Deep Navy with Ice-Blue-tinted ink — mirrors the
hero plate at the bottom of the fold, forming Navy bookends
around the Cool Gray interior. */
.os-foot {
background: var(--ka-hero-deep);
border-top: 0;
padding: 40px 0 48px;
color: var(--ink-on-dark-mute);
font-size: 13px;
}
.os-foot-inner {
display: flex;
justify-content: space-between;
gap: 16px;
}
/* Bumped specificity with `:not(.os-btn):not(.os-brand)` so this
wins over the global `.os a` rule that colours interior text
links in the hero-purple — otherwise footer links inherit the
dark link colour and vanish against the equally-dark footer bg. */
.os-foot a:not(.os-btn):not(.os-brand) {
margin-left: 16px;
text-decoration: none;
color: var(--ink-on-dark);
font-weight: 500;
transition: color 120ms ease;
}
.os-foot a:not(.os-btn):not(.os-brand):hover {
color: var(--pure-white);
opacity: 1;
}
.os-foot p {
margin: 0;
}
@media (max-width: 800px) {
.os-helps-inner,
.os-tiers,
.os-list > div,
.os-bullets,
.os-foot-inner {
grid-template-columns: 1fr;
}
.os-helps p {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 18px 0;
}
.os-helps p:last-child {
border-bottom: 0;
}
.os-nav a:not(.os-btn):not(.os-lang-btn) {
display: none;
}
.os-lang {
order: -1;
}
.os-hero {
padding: 56px 0 48px;
}
.os-block,
.os-end {
padding: 56px 0;
}
.os-foot-inner {
display: grid;
gap: 8px;
}
.os-foot a {
margin-left: 0;
margin-right: 16px;
}
}
/* ============================================================
Business-app catalog: larger cards, hero image on top, feature
preview. Layered on top of .ps-* base styles via .ps-*-biz.
============================================================ */
/* --- Grid: two cards wide on desktop, one on mobile --- */
.ps-grid-biz {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 24px;
margin: 28px 0 0;
}
/* --- Card: hero on top, body underneath --- */
.ps-card-biz {
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
border-radius: 18px;
background: #fff;
border: 1px solid var(--line);
transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.ps-card-biz:hover {
border-color: #111;
transform: translateY(-3px);
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.08);
}
.ps-card-hero {
width: 100%;
aspect-ratio: 320 / 200;
background: #f4f4f5;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.ps-card-hero img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ps-card-body {
display: flex;
flex-direction: column;
padding: 20px 22px 22px;
gap: 10px;
flex: 1;
}
.ps-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.ps-card-biz .ps-card-name {
margin: 0;
font-size: 20px;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.2;
}
.ps-card-avail {
flex-shrink: 0;
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 999px;
background: #dcfce7;
color: #14532d;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
}
.ps-card-biz .ps-card-summary {
margin: 0;
color: var(--mute);
font-size: 14px;
line-height: 1.45;
}
/* Feature preview: 3 short pills */
.ps-card-feats {
margin: 4px 0 6px;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
}
.ps-card-feats li {
position: relative;
padding: 0 0 0 20px;
color: #333;
font-size: 13px;
line-height: 1.4;
}
.ps-card-feats li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: #16a34a;
font-weight: 700;
}
.ps-card-biz .ps-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 10px;
border-top: 1px solid var(--line);
color: var(--mute);
font-size: 12.5px;
}
.ps-card-rating {
display: inline-flex;
align-items: center;
gap: 4px;
color: #111;
}
.ps-card-rating strong { font-weight: 700; }
.ps-card-count { color: var(--mute); font-weight: 400; }
.ps-card-cat {
color: var(--mute);
font-size: 12.5px;
}
/* --- Detail page hero: big media + info side-by-side --- */
.ps-hero-detail {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 40px;
align-items: center;
padding: 16px 0 32px;
}
.ps-hero-media {
width: 100%;
aspect-ratio: 320 / 200;
background: #f4f4f5;
border-radius: 22px;
overflow: hidden;
border: 1px solid var(--line);
}
.ps-hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ps-hero-info { display: flex; flex-direction: column; gap: 12px; }
.ps-hero-cat {
margin: 0;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--mute);
}
.ps-hero-cat a { color: inherit; text-decoration: none; }
.ps-hero-cat a:hover { color: #111; }
.ps-hero-title {
margin: 0;
font-size: 40px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
}
.ps-hero-sub {
margin: 0;
color: #333;
font-size: 17px;
line-height: 1.5;
max-width: 46ch;
}
.ps-hero-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin-top: 4px;
color: var(--mute);
font-size: 13px;
}
.ps-hero-badge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
}
.ps-hero-badge.is-avail {
background: #dcfce7;
color: #14532d;
}
.ps-hero-rating {
display: inline-flex;
align-items: center;
gap: 4px;
color: #111;
}
.ps-hero-rating strong { font-weight: 700; }
.ps-hero-updated { color: var(--mute); }
.ps-hero-cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 8px;
}
/* --- Features section: emphasised over other sections --- */
.ps-features-section {
background: #fafafa;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 32px 24px;
border-radius: 18px;
margin: 24px 0;
}
.ps-features-section h2 {
margin: 0 0 18px;
font-size: 22px;
}
.ps-features {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 12px;
}
.ps-feature {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
font-size: 14.5px;
line-height: 1.45;
color: #111;
}
.ps-feature-mark {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 999px;
background: #dcfce7;
color: #14532d;
font-size: 13px;
font-weight: 700;
}
/* --- Responsive: stack on narrow screens --- */
@media (max-width: 780px) {
.ps-hero-detail {
grid-template-columns: 1fr;
gap: 20px;
}
.ps-hero-title { font-size: 30px; }
.ps-hero-sub { font-size: 15.5px; }
.ps-features-section { padding: 24px 16px; }
}
@media (max-width: 520px) {
.ps-grid-biz {
grid-template-columns: 1fr;
gap: 18px;
}
.ps-card-body { padding: 18px 18px 20px; }
.ps-card-biz .ps-card-name { font-size: 18px; }
.ps-hero-title { font-size: 26px; }
}
/* =========================================================================
App-store product page: hero + search, featured strip, chip band,
grid header, Cambodia band. Additive only — leaves existing .ps-*
classes alone.
========================================================================= */
.os-hero-app {
padding-top: 56px;
padding-bottom: 40px;
}
.os-hero-app h1 {
max-width: 20ch;
margin-bottom: 14px;
}
.os-hero-app .os-lead {
max-width: 62ch;
margin-bottom: 26px;
}
.ps-search {
display: flex;
align-items: center;
gap: 8px;
max-width: 720px;
padding: 8px 8px 8px 14px;
background: #fff;
border: 1px solid rgba(17, 17, 17, 0.12);
border-radius: 14px;
box-shadow: 0 6px 22px rgba(17, 17, 17, 0.06);
}
.ps-search-icon {
font-size: 18px;
color: #7a7a7a;
line-height: 1;
}
.ps-search input[type="search"] {
flex: 1;
min-width: 0;
height: 44px;
padding: 0 8px;
border: 0;
outline: 0;
background: transparent;
font: inherit;
font-size: 16px;
color: #111;
}
.ps-search input[type="search"]::placeholder {
color: #8a8a8a;
}
.ps-search .os-btn {
height: 40px;
padding: 0 18px;
border-radius: 10px;
flex-shrink: 0;
}
.ps-chip-band {
padding-top: 22px;
padding-bottom: 8px;
position: sticky;
top: 0;
z-index: 20;
background: rgba(250, 250, 250, 0.92);
backdrop-filter: saturate(160%) blur(8px);
border-bottom: 1px solid rgba(17, 17, 17, 0.06);
}
.ps-chip-band .ps-cat-tabs {
overflow-x: auto;
scrollbar-width: none;
flex-wrap: nowrap;
padding-bottom: 4px;
}
.ps-chip-band .ps-cat-tabs::-webkit-scrollbar { display: none; }
.ps-chip-band .ps-cat-tab { white-space: nowrap; }
.ps-featured {
padding-top: 40px;
}
.ps-featured-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
margin-bottom: 22px;
flex-wrap: wrap;
}
.ps-featured-head h2 {
margin: 0;
display: flex;
align-items: center;
gap: 10px;
}
.ps-featured-head .ps-star {
color: #f5a623;
font-size: 22px;
}
.ps-featured-head p {
margin: 0;
color: var(--mute, #666);
font-size: 15px;
}
.ps-featured-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.ps-feat-card {
display: flex;
flex-direction: column;
gap: 12px;
padding: 18px;
background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
border: 1px solid rgba(17, 17, 17, 0.09);
border-radius: 14px;
text-decoration: none;
color: inherit;
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.ps-feat-card:hover {
transform: translateY(-2px);
border-color: rgba(17, 17, 17, 0.22);
box-shadow: 0 12px 32px rgba(17, 17, 17, 0.08);
}
.ps-feat-icon {
width: 56px;
height: 56px;
border-radius: 12px;
background: #f3f3f3;
display: grid;
place-items: center;
padding: 8px;
}
.ps-feat-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.ps-feat-body h3 {
margin: 0;
font-size: 17px;
font-weight: 700;
line-height: 1.25;
}
.ps-feat-body p {
margin: 4px 0 8px;
font-size: 14px;
color: var(--mute, #666);
line-height: 1.45;
}
.ps-feat-cat {
display: inline-block;
font-size: 12px;
padding: 3px 8px;
border-radius: 999px;
background: #f3f3f3;
color: #444;
}
.ps-grid-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin: 26px 0 18px;
flex-wrap: wrap;
}
.ps-grid-head h2 {
margin: 0;
display: inline-flex;
align-items: baseline;
gap: 10px;
}
.ps-grid-head h2 em {
font-style: normal;
color: #111;
border-bottom: 2px solid #111;
}
.ps-grid-count {
font-size: 14px;
font-weight: 500;
color: var(--mute, #666);
padding: 2px 10px;
border-radius: 999px;
background: #f0f0f0;
}
.ps-grid-clear {
font-size: 14px;
font-weight: 600;
color: #111;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.ps-empty {
text-align: center;
color: var(--mute, #666);
margin: 60px 0;
font-size: 15px;
}
/* Built for Cambodia band */
.os-cambodia-band {
background: linear-gradient(180deg, #111 0%, #1c1c1c 100%);
color: #f2f2f2;
padding-top: 56px;
padding-bottom: 56px;
margin-top: 40px;
}
.os-cambodia-band h2 {
color: #fff;
margin: 0 0 26px;
}
.ps-cam-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.ps-cam-tile {
padding: 22px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
}
.ps-cam-emoji {
font-size: 28px;
line-height: 1;
margin-bottom: 12px;
}
.ps-cam-tile h3 {
margin: 0 0 6px;
color: #fff;
font-size: 16px;
font-weight: 700;
}
.ps-cam-tile p {
margin: 0;
color: rgba(242, 242, 242, 0.72);
font-size: 14px;
line-height: 1.5;
}
@media (max-width: 980px) {
.ps-featured-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ps-cam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.ps-featured-strip { grid-template-columns: 1fr; }
.ps-cam-grid { grid-template-columns: 1fr; }
.os-hero-app h1 { font-size: 30px; }
.ps-search { padding: 6px 6px 6px 12px; }
.ps-search .os-btn { padding: 0 12px; }
}
/* =========================================================================
Business-app showroom (2026-08-21)
Complete products, grouped by trade — not a module wall.
Signature: charcoal product windows with laterite "live" marks.
========================================================================= */
.os-wrap-wide {
width: min(1160px, calc(100% - 40px));
margin-inline: auto;
}
.os-catalog {
--laterite: #b5442a;
--bezel: #171717;
--screen: #f7f6f3;
}
.os-catalog a.ps-app:hover,
.os-catalog a.ps-trade:hover,
.os-catalog .ps-flag-shot:hover,
.os-catalog .ps-flag-name a:hover {
opacity: 1;
}
.os-catalog .os-bar {
background: rgba(255, 255, 255, 0.94);
}
/* --- Hero --- */
.ps-show-hero {
padding: 56px 0 28px;
background:
radial-gradient(1200px 280px at 10% -20%, rgba(181, 68, 42, 0.08), transparent 60%),
#fff;
}
.ps-show-hero--ind { padding-bottom: 36px; }
.ps-eyebrow {
margin: 0 0 12px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--laterite);
}
.ps-show-hero h1 {
margin: 0 0 16px;
font-size: clamp(32px, 4.4vw, 52px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.08;
max-width: 18ch;
}
.ps-show-hero h1 span {
display: block;
color: #444;
font-weight: 600;
}
.ps-show-hero .os-lead {
max-width: 62ch;
margin: 0 0 28px;
font-size: 17px;
}
.ps-hero-note {
margin: 8px 0 0;
color: var(--mute);
font-size: 15px;
}
.os-catalog .ps-search {
max-width: 640px;
}
.ps-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin: 36px 0 0;
padding: 0;
list-style: none;
counter-reset: none;
}
.ps-steps li {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 14px;
border-top: 2px solid #111;
}
.ps-steps strong {
font-size: 15px;
letter-spacing: -0.01em;
}
.ps-steps span {
color: var(--mute);
font-size: 13.5px;
font-weight: 400;
line-height: 1.45;
}
.os-catalog .ps-chip-band {
top: 64px;
background: rgba(255, 255, 255, 0.92);
}
.os-catalog .ps-cat-tab.is-on {
background: #111;
color: #fff;
border-color: #111;
}
.os-catalog .ps-cat-tab:hover { opacity: 1; }
.ps-section-head {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 22px;
}
.ps-section-head h2,
.ps-ind-head h2 {
margin: 0;
font-size: 26px;
letter-spacing: -0.02em;
}
.ps-section-head p,
.ps-ind-head p {
margin: 0;
color: var(--mute);
max-width: 62ch;
}
/* --- Industry tiles --- */
.ps-trades { padding-top: 36px; }
.ps-trades-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.ps-trade {
display: grid;
grid-template-columns: 48px 1fr auto;
align-items: center;
gap: 14px;
padding: 16px 16px 16px 14px;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
text-decoration: none !important;
font-weight: 400 !important;
transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.ps-trade:hover {
border-color: #111;
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(17, 17, 17, 0.08);
}
.ps-trade-mark {
width: 48px;
height: 48px;
border-radius: 12px;
background: #f4f4f4;
display: grid;
place-items: center;
}
.ps-trade-mark img { width: 28px; height: 28px; object-fit: contain; }
.ps-trade-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps-trade-copy strong {
font-size: 15px;
letter-spacing: -0.01em;
}
.ps-trade-copy em {
font-style: normal;
color: var(--mute);
font-size: 12.5px;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ps-trade-n {
font-size: 12px;
font-weight: 600;
color: #666;
background: #f3f3f3;
padding: 3px 8px;
border-radius: 999px;
}
/* --- Flagship product cards --- */
.ps-top { padding-top: 24px; }
.ps-top-grid,
.ps-flag-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.ps-flag-grid.is-single { grid-template-columns: 1fr; }
.ps-flag {
display: grid;
grid-template-columns: 1fr;
background: #fff;
border: 1px solid var(--line);
border-radius: 20px;
overflow: hidden;
transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.ps-flag.is-lead {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}
.ps-flag:hover {
border-color: #111;
box-shadow: 0 16px 40px rgba(17, 17, 17, 0.08);
transform: translateY(-2px);
}
.ps-flag-shot {
display: block;
background: #ececec;
text-decoration: none !important;
font-weight: 400 !important;
}
.ps-flag-body {
display: flex;
flex-direction: column;
gap: 10px;
padding: 22px 24px 24px;
}
.ps-flag-who {
margin: 0;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--laterite);
}
.ps-flag-name {
margin: 0;
font-size: 24px;
letter-spacing: -0.02em;
line-height: 1.15;
}
.ps-flag-name a { text-decoration: none !important; font-weight: 700 !important; }
.ps-flag-tag {
margin: 0;
font-size: 16px;
line-height: 1.45;
color: #333;
}
.ps-loop {
margin: 6px 0 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.ps-loop li {
position: relative;
padding-left: 28px;
font-size: 14px;
line-height: 1.4;
color: #222;
}
.ps-loop li::before {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 16px;
height: 16px;
border-radius: 999px;
border: 2px solid #111;
background: #fff;
}
.ps-loop li:first-child::before { background: var(--laterite); border-color: var(--laterite); }
.ps-loop-lg { margin-top: 12px; }
.ps-loop-lg li { font-size: 16px; padding-left: 32px; padding-bottom: 10px; }
/* CMS-authored Markdown containers (description / loop / features).
Earmark emits stock /
// — tone them down so they
sit inside the surrounding sections without visual noise. */
.ps-desc :first-child { margin-top: 0; }
.ps-desc :last-child { margin-bottom: 0; }
.ps-desc p { margin: 0 0 12px; }
.ps-desc a { color: var(--laterite); text-decoration: underline; }
.ps-loop-md, .ps-features-md {
color: #222;
font-size: 15px;
line-height: 1.55;
max-width: 720px;
}
.ps-loop-md ol, .ps-loop-md ul,
.ps-features-md ol, .ps-features-md ul {
margin: 6px 0 0;
padding-left: 22px;
}
.ps-loop-md li, .ps-features-md li { margin: 4px 0; }
.ps-loop-md p, .ps-features-md p { margin: 0 0 10px; }
.ps-loop-md a, .ps-features-md a { color: var(--laterite); text-decoration: underline; }
.ps-with {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 4px;
font-size: 12.5px;
}
.ps-with span { color: var(--mute); font-weight: 500; }
.ps-with a {
padding: 4px 10px;
border-radius: 999px;
background: #f3f3f3;
font-weight: 600 !important;
font-size: 12.5px;
text-decoration: none !important;
}
.ps-with a:hover { background: #111; color: #fff; opacity: 1; }
.ps-flag-cta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: auto;
padding-top: 12px;
}
/* --- Compact app cards --- */
.ps-apps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.ps-app {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
overflow: hidden;
text-decoration: none !important;
font-weight: 400 !important;
color: inherit;
transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.ps-app:hover {
border-color: #111;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(17, 17, 17, 0.08);
}
.ps-app-shot { background: #ececec; }
.ps-app-body {
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px 18px 18px;
flex: 1;
}
.ps-app-who {
margin: 0;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--laterite);
}
.ps-app-name {
margin: 0;
font-size: 17px;
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.2;
}
.ps-app-tag {
margin: 0;
color: var(--mute);
font-size: 13.5px;
line-height: 1.4;
}
.ps-app-go {
margin-top: auto;
padding-top: 10px;
font-size: 13px;
font-weight: 600;
color: #111;
}
.ps-ind {
padding-top: 28px;
padding-bottom: 12px;
}
.ps-ind-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin-bottom: 22px;
}
.ps-ind-all {
flex-shrink: 0;
font-size: 14px;
}
.ps-more { margin-top: 28px; }
.ps-more h3 {
margin: 0 0 14px;
font-size: 16px;
font-weight: 600;
}
.ps-hero-buyer {
margin: 0;
color: var(--mute);
font-size: 14px;
}
.ps-section-lede {
margin: -8px 0 18px;
color: var(--mute);
}
.ps-day .ps-desc { margin-top: 20px; }
.ps-hero-detail .ps-hero-media {
background: #ececec;
display: flex;
align-items: stretch;
aspect-ratio: auto;
min-height: 280px;
}
.ps-hero-detail .ps-win { width: 100%; height: 100%; }
/* --- Product window --- */
.ps-win {
height: 100%;
min-height: 220px;
padding: 16px;
background:
linear-gradient(180deg, #dcdcdc 0%, #cfcfcf 100%);
}
.ps-win.is-compact { min-height: 150px; padding: 12px; }
.ps-win-bezel {
height: 100%;
background: var(--bezel);
border-radius: 12px;
padding: 8px 8px 10px;
display: flex;
flex-direction: column;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}
.ps-win-chrome {
display: flex;
align-items: center;
gap: 8px;
padding: 2px 6px 8px;
}
.ps-win-dots { display: flex; gap: 4px; }
.ps-win-dots i {
display: block;
width: 7px;
height: 7px;
border-radius: 999px;
background: #3a3a3a;
}
.ps-win-dots i:first-child { background: var(--laterite); }
.ps-win-label {
color: #bdbdbd;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ps-win-screen {
flex: 1;
background: var(--screen);
border-radius: 6px;
overflow: hidden;
min-height: 0;
}
.ps-win-photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sc {
height: 100%;
padding: 10px;
font-size: 11px;
color: #111;
}
.sc-floor {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 8px;
}
.sc-floor-map {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
align-content: center;
}
.sc-floor-map i {
display: block;
aspect-ratio: 1;
border-radius: 999px;
border: 2px solid #ccc;
background: #fff;
}
.sc-floor-map i.on {
background: var(--laterite);
border-color: var(--laterite);
}
.sc-slip {
display: flex;
flex-direction: column;
gap: 4px;
background: #fff;
border: 1px dashed #ccc;
border-radius: 6px;
padding: 8px;
font-size: 10.5px;
}
.sc-slip b { font-size: 12px; }
.sc-kds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sc-tix {
background: #fff;
border-radius: 6px;
padding: 8px 6px;
border-top: 4px solid #16a34a;
display: flex;
flex-direction: column;
gap: 4px;
}
.sc-tix.age-warn { border-top-color: #ca8a04; }
.sc-tix.age-hot { border-top-color: var(--laterite); }
.sc-tix em { color: var(--mute); font-style: normal; font-size: 10px; }
.sc-host { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 8px; }
.sc-plan {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
align-content: center;
}
.sc-plan i {
display: block;
height: 28px;
border-radius: 4px;
background: #fff;
border: 1px solid #ddd;
}
.sc-plan i.booked { background: #f3d4cb; border-color: var(--laterite); }
.sc-plan i.seated { background: var(--laterite); }
.sc-book { display: flex; flex-direction: column; gap: 6px; font-size: 10.5px; }
.sc-retail, .sc-ledger, .sc-paye, .sc-tax, .sc-garage, .sc-factory,
.sc-recipe, .sc-proj, .sc-prop, .sc-campus, .sc-fleet, .sc-school {
display: flex;
flex-direction: column;
gap: 8px;
}
.sc-lines, .sc-rows {
display: grid;
grid-template-columns: 1fr auto;
gap: 4px 10px;
font-size: 11px;
}
.sc-pay, .sc-kpi, .sc-form, .sc-job, .sc-att, .sc-wo {
display: flex;
justify-content: space-between;
align-items: baseline;
background: #fff;
border-radius: 6px;
padding: 8px 10px;
}
.sc-kpi strong, .sc-pay strong { font-size: 18px; letter-spacing: -0.03em; }
.sc-pay em {
font-style: normal;
font-weight: 700;
color: var(--laterite);
letter-spacing: 0.04em;
}
.sc-crm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sc-col {
background: #fff;
border-radius: 6px;
padding: 6px;
display: flex;
flex-direction: column;
gap: 4px;
}
.sc-col em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--mute); }
.sc-col i { display: block; height: 18px; border-radius: 3px; background: #eee; }
.sc-col.on i { background: #f3d4cb; }
.sc-shop {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
height: 100%;
}
.sc-shop i {
display: block;
border-radius: 6px;
background: #fff;
border: 1px solid #e6e6e6;
}
.sc-shop i.on { border-color: var(--laterite); box-shadow: inset 0 0 0 2px var(--laterite); }
.sc-hotel { height: 100%; }
.sc-chart {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
height: 100%;
align-content: center;
}
.sc-chart i { display: block; height: 22px; border-radius: 3px; background: #fff; border: 1px solid #e6e6e6; }
.sc-chart i.in { background: var(--laterite); border-color: var(--laterite); }
.sc-chart i.arr { background: #f3d4cb; }
.sc-chart i.dep { background: #ddd; }
.sc-kids {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.sc-kids i { display: block; height: 22px; border-radius: 4px; background: #dcfce7; }
.sc-kids i.no { background: #fecaca; }
.sc-kids i.late { background: #fde68a; }
.sc-bar {
height: 6px;
background: #e5e5e5;
border-radius: 99px;
overflow: hidden;
margin-top: 6px;
}
.sc-bar i { display: block; height: 100%; background: var(--laterite); }
.sc-salon, .sc-cowork { display: flex; flex-direction: column; gap: 6px; }
.sc-slot {
display: flex;
justify-content: space-between;
background: #fff;
border-radius: 6px;
padding: 7px 8px;
font-size: 11px;
}
.sc-slot.on { border-left: 3px solid var(--laterite); }
.sc-clinic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sc-q {
background: #fff;
border-radius: 6px;
padding: 10px 6px;
text-align: center;
}
.sc-q.now { background: #f3d4cb; }
.sc-q b { display: block; font-size: 16px; }
.sc-phone {
display: flex;
flex-direction: column;
gap: 8px;
justify-content: center;
}
.sc-msg {
align-self: flex-start;
background: #fff;
border-radius: 10px 10px 10px 2px;
padding: 8px 10px;
max-width: 80%;
}
.sc-msg.me {
align-self: flex-end;
background: #f3d4cb;
border-radius: 10px 10px 2px 10px;
}
.sc-wh {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
height: 100%;
align-content: center;
}
.sc-wh i {
display: grid;
place-items: center;
height: 44px;
border-radius: 6px;
background: #fff;
border: 1px solid #e6e6e6;
font-size: 12px;
font-weight: 700;
}
.sc-wh i::after { content: attr(data-n); }
.sc-wh i.low { background: #fde68a; }
.sc-wh i.out { background: #fecaca; }
.os-catalog .os-cambodia-band { margin-top: 8px; }
@media (max-width: 980px) {
.ps-trades-grid,
.ps-top-grid,
.ps-flag-grid,
.ps-flag-grid.is-single,
.ps-apps,
.ps-steps {
grid-template-columns: 1fr 1fr;
}
.ps-flag.is-lead { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.ps-show-hero { padding-top: 36px; }
.ps-show-hero h1 { max-width: none; }
.ps-trades-grid,
.ps-top-grid,
.ps-flag-grid,
.ps-apps,
.ps-steps {
grid-template-columns: 1fr;
}
.ps-ind-head { align-items: flex-start; flex-direction: column; }
.ps-win { min-height: 180px; }
.os-catalog .ps-chip-band { top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
.ps-trade,
.ps-flag,
.ps-app,
.ps-feat-card,
.ps-card-biz {
transition: none;
}
.ps-trade:hover,
.ps-flag:hover,
.ps-app:hover {
transform: none;
}
}
/* -----------------------------------------------------------------
Hero platform-name rotator
Cycles the highlighted brand in "Sell on ______." through Telegram
→ Messenger → WhatsApp → Line every 2s (8s total loop). The ghost
span reserves the width of the longest word so the h1 doesn't
reflow between swaps; the sr-only span carries the whole list for
assistive tech so screen readers hear the full multi-platform
message instead of just the currently-visible word.
----------------------------------------------------------------- */
.os-rotator {
position: relative;
display: inline-block;
vertical-align: baseline;
overflow: hidden;
line-height: inherit;
}
.os-rotator__sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.os-rotator__ghost {
visibility: hidden;
white-space: nowrap;
}
.os-rotator__word {
position: absolute;
inset: 0 auto auto 0;
white-space: nowrap;
opacity: 0;
transform: translateY(100%);
animation: os-rotator-cycle 8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
will-change: transform, opacity;
}
/* Colored from the KustomAI palette: one Cobalt anchor from the 30%
tier + the three 10% accents. Skipping the platforms' own brand
hues (Telegram cyan-blue, WhatsApp green, etc.) is a deliberate
palette-purity choice — the rotator here is a KustomAI moment, not
a logo strip. */
/* Two-colour palette: rotator words on the Royal Blue hero cycle
through White at 100 / 82 / 60 / 40% opacity so each frame reads
as a distinct tempo without introducing a third hue. */
.os-rotator__word--tg { animation-delay: 0s; color: rgba(255, 255, 255, 1.00); }
.os-rotator__word--mg { animation-delay: 2s; color: rgba(255, 255, 255, 0.82); }
.os-rotator__word--wa { animation-delay: 4s; color: rgba(255, 255, 255, 0.60); }
.os-rotator__word--ln { animation-delay: 6s; color: rgba(255, 255, 255, 0.40); }
@keyframes os-rotator-cycle {
/* Each word owns 25% of the 8s cycle: brief entry, ~1.6s hold,
brief exit, then parks off-screen until the next turn. */
0% { opacity: 0; transform: translateY(100%); }
3% { opacity: 1; transform: translateY(0); }
22% { opacity: 1; transform: translateY(0); }
25% { opacity: 0; transform: translateY(-100%); }
100% { opacity: 0; transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) {
.os-rotator__word {
animation: none;
}
/* Freeze the first brand in place — no motion, no cycling. */
.os-rotator__word--tg {
opacity: 1;
transform: translateY(0);
}
}
/* -----------------------------------------------------------------
Compact social row for marketing footers. Muted gray by default,
nudges toward brand ink on hover. Icons only (14px SVG). See
`KustomaiWeb.MarketingComponents.os_socials/1` for markup.
----------------------------------------------------------------- */
.os-socials {
display: inline-flex;
align-items: center;
gap: 10px;
}
.os-socials a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
color: #9ca3af; /* zinc-400: muted enough to sit quietly next to text links */
transition: color 0.15s ease;
border-radius: 4px;
/* Undo the `.os-foot a { margin-left: 16px }` default so our own
`.os-socials { gap }` controls spacing between the icons. */
margin-left: 0;
}
/* Small nudge so the icon row sits away from the last text link. */
.os-foot .os-socials {
margin-left: 16px;
}
.os-socials a:hover,
.os-socials a:focus-visible {
color: var(--ka-navy, #0f172a);
}
/* When the socials live inside the Navy footer, invert the resting
and hover colours so they read as light icons that brighten on
hover instead of trying to darken to Navy on Navy. */
.os-foot .os-socials a {
color: rgba(255, 255, 255, 0.55);
}
.os-foot .os-socials a:hover,
.os-foot .os-socials a:focus-visible {
color: #ffffff;
}
/* -----------------------------------------------------------------
Auth / demo form fields — inputs across sign-in, register, and the
demo request page. Palette-aligned focus rings + Cobalt border on
hover; inline HEEx styles set the base geometry. This overrides the
`#111` focus that used to live per-page.
----------------------------------------------------------------- */
.auth-input,
.os-form input:not([type="checkbox"]):not([type="radio"]),
.os-form textarea,
.os-form select {
border: 1px solid var(--line);
background: #ffffff;
color: var(--ink);
border-radius: 10px;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.auth-input:hover,
.os-form input:not([type="checkbox"]):not([type="radio"]):hover,
.os-form textarea:hover,
.os-form select:hover {
border-color: #94a3b8; /* slate-400 */
}
.auth-input:focus,
.auth-input:focus-visible,
.os-form input:focus,
.os-form textarea:focus,
.os-form select:focus {
outline: none;
border-color: var(--royal-blue);
box-shadow: 0 0 0 3px rgba(10, 66, 186, 0.22);
}
.auth-field-label a {
color: var(--ink-body);
}
.auth-alt a {
color: var(--ink-body);
font-weight: 600;
}
/* -----------------------------------------------------------------
Auth plate — /sign-in, /register.
Black-text-on-white per the palette rule (Royal Blue is reserved
for the top nav bar + the primary CTA button below the form).
The old `.os-hero .auth-*` overrides that painted labels white for
the Royal Blue plate are removed — auth pages no longer sit inside
the hero.
----------------------------------------------------------------- */
.auth-plate {
padding: 88px 0 80px;
background: var(--paper);
color: var(--ink);
}
.auth-plate h1 {
margin: 0 0 16px;
font-family: var(--font-serif);
font-size: clamp(40px, 5vw, 64px);
font-weight: 500;
letter-spacing: -0.025em;
line-height: 1.02;
color: var(--ink);
}
.auth-plate h1 em,
.auth-plate .os-serif-em {
font-style: italic;
color: rgba(0, 0, 0, 0.55);
}
.auth-plate .os-lead {
margin: 0 0 24px;
color: var(--ink-body);
font-size: 18px;
line-height: 1.55;
max-width: 34rem;
}
/* Body links on the auth plate — black underlined (affordance from
underline, not from a chrome hue). */
.auth-plate a:not(.os-btn):not(.os-brand):not(.bot-cta) {
color: var(--ink);
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(0, 0, 0, 0.35);
text-underline-offset: 3px;
}
.auth-plate a:not(.os-btn):not(.os-brand):not(.bot-cta):hover {
text-decoration-color: var(--ink);
}
/* Focus rings — Royal Blue tinted, same anchor as the primary CTA. */
.os-btn:focus-visible,
.os a:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(10, 66, 186, 0.40);
}
.os-socials svg {
display: block;
}
/* ============================================================
Team grid — four portraits, grayscale by default, full colour
on hover. Portraits are square SVGs (1:1) inside a rounded
frame; the desaturation lives on the ![]()
, not the wrapper,
so the name / role label stays fully readable at rest.
============================================================ */
.os-team {
list-style: none;
margin: 36px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 24px;
}
.os-team-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
}
.os-team-card img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 999px;
background: var(--surface-tint);
filter: grayscale(100%);
transition: filter 300ms ease, transform 300ms ease;
}
.os-team-card:hover img,
.os-team-card:focus-within img {
filter: grayscale(0);
transform: translateY(-2px);
}
.os-team-name {
font-weight: 600;
color: var(--ink);
}
.os-team-role {
color: var(--mute);
font-size: 14px;
}
@media (max-width: 800px) {
.os-team {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}