/* ==========================================================================
E.M.P.O.W.E.R — Global Stylesheet
Mobile landscape-first interactive learning website
Target viewport: 844 × 390 (mobile landscape)
========================================================================== */
/* Language fonts (must stay first). Noto Sans covers English / Bahasa
Indonesia / Tagalog; Noto Sans Tamil covers Tamil; Noto Sans Myanmar
is used so Burmese script actually renders (plain Noto Sans has no
Burmese glyphs). */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Noto+Sans+Tamil:wght@400;500;600;700&family=Noto+Sans+Myanmar:wght@400;500;600;700&display=swap");
/* --------------------------------------------------------------------------
1. DESIGN TOKENS (CSS variables)
-------------------------------------------------------------------------- */
:root {
/* Brand palette (from SPF Visual Research) */
--c-bg-deep: #09111C; /* base dark navy */
--c-bg-mid: #0F1A2E; /* surface */
--c-bg-soft: #142440; /* raised surface */
--c-police-blue: #0D2A61; /* primary accent */
--c-police-blue-2: #1A3A82; /* lighter blue */
--c-rose: #BBA3A3; /* warm muted */
--c-soft-blue: #E1EFF8; /* soft text */
--c-off-white: #EDF0EF;
--c-white: #FFFFFF;
--c-tape: #F5C518; /* police-tape yellow accent */
--c-tape-soft: rgba(245, 197, 24, 0.15);
--c-success: #4ADE80;
--c-danger: #EF5350;
/* Text */
--c-text: var(--c-white);
--c-text-soft: var(--c-soft-blue);
--c-text-muted: rgba(225, 239, 248, 0.65);
--c-text-dim: rgba(225, 239, 248, 0.45);
/* Strokes / overlays */
--c-border: rgba(255, 255, 255, 0.10);
--c-border-strong: rgba(255, 255, 255, 0.20);
--c-overlay: rgba(9, 17, 28, 0.72);
--c-overlay-dim: rgba(9, 17, 28, 0.45);
/* Typography */
--ff-sans: "Inter", "Noto Sans Tamil", "Noto Sans Myanmar", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--ff-serif: "Gelasio", "Georgia", "Times New Roman", serif;
--fs-xs: 10px;
--fs-sm: 12px;
--fs-md: 14px;
--fs-lg: 16px;
--fs-xl: 20px;
--fs-2xl: 26px;
--fs-3xl: 34px;
--fs-4xl: 44px;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
/* Spacing scale */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-7: 32px;
--sp-8: 40px;
/* Layout */
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 20px;
--r-pill: 999px;
--sidebar-w: 76px;
/* Shadows */
--shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35);
--shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.55);
--glow-blue: 0 0 0 1px rgba(26, 58, 130, 0.5), 0 8px 26px rgba(13, 42, 97, 0.45);
--glow-tape: 0 0 0 1px rgba(245, 197, 24, 0.45), 0 8px 22px rgba(245, 197, 24, 0.18);
/* Motion */
--t-fast: 120ms ease;
--t-med: 220ms ease;
--t-slow: 380ms ease;
}
/* --------------------------------------------------------------------------
2. RESET & BASE
-------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body {
font-family: var(--ff-sans);
font-size: var(--fs-md);
font-weight: var(--fw-regular);
color: var(--c-text);
background: var(--c-bg-deep);
line-height: 1.45;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden; /* page itself doesn't scroll — stage handles scroll */
}
a { color: inherit; text-decoration: none; }
button {
font: inherit;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: var(--fw-bold); line-height: 1.2; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible {
outline: 2px solid var(--c-tape);
outline-offset: 2px;
border-radius: var(--r-sm);
}
/* --------------------------------------------------------------------------
3. APP SHELL — landscape stage
The whole experience lives inside .app — a fixed 844x390 mobile-landscape
stage centered on screen. On real mobile in landscape it fills the viewport.
-------------------------------------------------------------------------- */
.app {
position: relative;
width: min(100vw, 100%);
height: 100vh;
max-width: 100vw;
background: var(--c-bg-deep);
background-image:
radial-gradient(80% 60% at 50% 0%, rgba(13, 42, 97, 0.55) 0%, transparent 60%),
radial-gradient(60% 50% at 100% 100%, rgba(26, 58, 130, 0.25) 0%, transparent 65%),
linear-gradient(180deg, #0B1626 0%, #060B14 100%);
overflow: hidden;
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
grid-template-rows: 100%;
}
/* When there's no sidebar (landing / language pages) */
.app--no-sidebar { grid-template-columns: 1fr; }
/* --------------------------------------------------------------------------
4. SIDEBAR (left vertical nav, compact)
-------------------------------------------------------------------------- */
.sidebar {
grid-column: 1;
height: 100%;
background: rgba(9, 17, 28, 0.85);
border-right: 1px solid var(--c-border);
display: flex;
flex-direction: column;
align-items: center;
padding: var(--sp-3) 0;
backdrop-filter: blur(6px);
}
.sidebar__logo {
width: 44px;
height: 44px;
border-radius: var(--r-md);
background: linear-gradient(160deg, var(--c-police-blue-2), var(--c-police-blue));
display: grid;
place-items: center;
color: var(--c-white);
font-family: var(--ff-serif);
font-size: 16px;
font-weight: var(--fw-bold);
margin-bottom: var(--sp-4);
box-shadow: var(--shadow-sm);
}
.sidebar__nav {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--sp-1);
width: 100%;
padding: 0 var(--sp-2);
}
.nav-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: var(--sp-2) var(--sp-1);
border-radius: var(--r-md);
color: var(--c-text-muted);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
transition: background var(--t-fast), color var(--t-fast);
}
.nav-item:hover { background: rgba(255, 255, 255, 0.04); color: var(--c-text); }
.nav-item.is-active {
background: rgba(26, 58, 130, 0.35);
color: var(--c-white);
box-shadow: inset 0 0 0 1px rgba(26, 58, 130, 0.5);
}
.nav-item__icon {
width: 22px;
height: 22px;
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.06);
border-radius: var(--r-sm);
font-size: 11px;
}
.nav-item__label {
font-size: 9px;
letter-spacing: 0.02em;
text-transform: uppercase;
}
/* --------------------------------------------------------------------------
5. STAGE — main scrolling content area
-------------------------------------------------------------------------- */
.stage {
grid-column: 2;
position: relative;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
}
.app--no-sidebar .stage { grid-column: 1; }
/* The scene is one screen-height "page" — pages can use multiple scenes */
.scene {
position: relative;
min-height: 100%;
padding: var(--sp-4) var(--sp-5);
display: flex;
flex-direction: column;
}
/* --------------------------------------------------------------------------
6. TOP BAR (inside stage)
-------------------------------------------------------------------------- */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
padding: var(--sp-2) 0 var(--sp-3);
min-height: 36px;
}
.topbar__left,
.topbar__right {
display: flex;
align-items: center;
gap: var(--sp-3);
}
/* Brand wordmark */
.brand {
display: flex;
align-items: center;
gap: var(--sp-2);
}
.brand__mark {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(160deg, var(--c-police-blue-2), var(--c-police-blue));
display: grid;
place-items: center;
font-family: var(--ff-serif);
font-weight: var(--fw-bold);
font-size: 12px;
}
.brand__name {
font-family: var(--ff-serif);
font-weight: var(--fw-medium);
letter-spacing: 0.18em;
font-size: var(--fs-md);
}
.brand__sub {
font-size: 9px;
color: var(--c-text-dim);
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Back link */
.back-link {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
color: var(--c-text-muted);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
padding: var(--sp-1) var(--sp-2);
border-radius: var(--r-sm);
transition: color var(--t-fast), background var(--t-fast);
}
.back-link:hover { color: var(--c-text); background: rgba(255, 255, 255, 0.04); }
/* --------------------------------------------------------------------------
7. LANGUAGE DROPDOWN (in topbar)
-------------------------------------------------------------------------- */
.lang-select {
position: relative;
}
.lang-select__toggle {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--c-border);
border-radius: var(--r-pill);
color: var(--c-text);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
transition: background var(--t-fast), border-color var(--t-fast);
}
.lang-select__toggle:hover {
background: rgba(255, 255, 255, 0.10);
border-color: var(--c-border-strong);
}
.lang-select__toggle::after {
content: "▾";
font-size: 10px;
color: var(--c-text-muted);
}
.lang-select__menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 180px;
background: var(--c-bg-mid);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
box-shadow: var(--shadow-lg);
padding: var(--sp-1);
display: none;
z-index: 20;
}
.lang-select.is-open .lang-select__menu { display: block; }
.lang-select__item {
display: flex;
align-items: center;
gap: var(--sp-2);
width: 100%;
padding: var(--sp-2) var(--sp-3);
border-radius: var(--r-sm);
color: var(--c-text-soft);
font-size: var(--fs-sm);
text-align: left;
cursor: pointer;
}
.lang-select__item:hover { background: rgba(255, 255, 255, 0.05); color: var(--c-text); }
.lang-select__item.is-selected { color: var(--c-tape); }
.lang-select__flag {
width: 20px;
height: 14px;
border-radius: 2px;
overflow: hidden;
display: block;
flex-shrink: 0;
}
/* --------------------------------------------------------------------------
8. BUTTONS
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-5);
border-radius: var(--r-md);
font-family: var(--ff-sans);
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
letter-spacing: 0.02em;
border: 1px solid transparent;
transition: transform var(--t-fast), background var(--t-fast),
border-color var(--t-fast), box-shadow var(--t-fast);
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
background: linear-gradient(180deg, var(--c-police-blue-2) 0%, var(--c-police-blue) 100%);
color: var(--c-white);
box-shadow: var(--glow-blue);
}
.btn--primary:hover {
background: linear-gradient(180deg, #234aa6 0%, #18398e 100%);
box-shadow: 0 0 0 1px rgba(26, 58, 130, 0.7), 0 12px 30px rgba(13, 42, 97, 0.55);
}
.btn--ghost {
background: rgba(255, 255, 255, 0.04);
color: var(--c-text);
border-color: var(--c-border);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--c-border-strong); }
.btn--tape {
background: var(--c-tape);
color: #1a1a1a;
box-shadow: var(--glow-tape);
}
.btn--tape:hover { background: #ffd840; }
.btn--lg { padding: var(--sp-4) var(--sp-7); font-size: var(--fs-lg); }
.btn--sm { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
.btn--block { display: flex; width: 100%; }
.btn[disabled],
.btn.is-disabled {
opacity: 0.4;
pointer-events: none;
cursor: not-allowed;
}
.btn__arrow {
display: inline-block;
transition: transform var(--t-fast);
}
.btn:hover .btn__arrow { transform: translateX(3px); }
/* --------------------------------------------------------------------------
9. CARDS
-------------------------------------------------------------------------- */
.card {
background: linear-gradient(180deg, rgba(20, 36, 64, 0.85) 0%, rgba(15, 26, 46, 0.85) 100%);
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: var(--sp-4);
box-shadow: var(--shadow-md);
backdrop-filter: blur(4px);
}
.card--flush { padding: 0; overflow: hidden; }
.card__media {
position: relative;
height: 76px;
background:
linear-gradient(180deg, rgba(9, 17, 28, 0) 0%, rgba(9, 17, 28, 0.7) 100%),
var(--c-bg-soft);
display: grid;
place-items: center;
color: var(--c-text-dim);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
overflow: hidden;
}
.card__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.card__title {
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
margin-bottom: 2px;
}
.card__sub {
font-size: var(--fs-sm);
color: var(--c-text-muted);
}
/* --------------------------------------------------------------------------
10. PROGRESS INDICATORS
-------------------------------------------------------------------------- */
.progress {
height: 6px;
background: rgba(255, 255, 255, 0.08);
border-radius: var(--r-pill);
overflow: hidden;
}
.progress__bar {
height: 100%;
background: linear-gradient(90deg, var(--c-tape) 0%, #ffe069 100%);
transition: width var(--t-slow);
border-radius: inherit;
}
.progress--tall { height: 8px; }
.progress-line {
display: flex;
align-items: center;
gap: var(--sp-3);
}
.progress-line__label {
font-size: var(--fs-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-text-muted);
white-space: nowrap;
}
.progress-line__count {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--c-text);
white-space: nowrap;
}
/* --------------------------------------------------------------------------
11. BADGE / TAGS
-------------------------------------------------------------------------- */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: var(--r-pill);
font-size: 10px;
font-weight: var(--fw-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.badge--available {
background: rgba(245, 197, 24, 0.15);
color: var(--c-tape);
border: 1px solid rgba(245, 197, 24, 0.35);
}
.badge--locked {
background: rgba(255, 255, 255, 0.05);
color: var(--c-text-dim);
border: 1px solid var(--c-border);
}
.badge--complete {
background: rgba(74, 222, 128, 0.12);
color: var(--c-success);
border: 1px solid rgba(74, 222, 128, 0.35);
}
.badge--soon {
background: rgba(187, 163, 163, 0.12);
color: var(--c-rose);
border: 1px solid rgba(187, 163, 163, 0.30);
}
/* --------------------------------------------------------------------------
12. POLICE-TAPE DIVIDER
-------------------------------------------------------------------------- */
.tape {
position: relative;
height: 18px;
margin: var(--sp-2) 0;
background: var(--c-tape);
color: #1a1a1a;
display: grid;
place-items: center;
font-family: var(--ff-sans);
font-weight: var(--fw-bold);
font-size: 9px;
letter-spacing: 0.32em;
text-transform: uppercase;
transform: rotate(-1deg);
box-shadow: 0 6px 18px rgba(245, 197, 24, 0.18);
}
.tape::before,
.tape::after {
content: "";
position: absolute;
top: 0; bottom: 0;
width: 30px;
background: repeating-linear-gradient(
-45deg,
#1a1a1a 0 4px,
transparent 4px 8px
);
opacity: 0.45;
}
.tape::before { left: 0; }
.tape::after { right: 0; transform: scaleX(-1); }
/* --------------------------------------------------------------------------
13. HERO (landing scene)
-------------------------------------------------------------------------- */
.hero {
position: relative;
flex: 1;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: var(--sp-6);
align-items: center;
padding: var(--sp-3) 0;
}
.hero__bg {
position: absolute;
inset: 0;
border-radius: var(--r-xl);
background:
linear-gradient(105deg, rgba(9, 17, 28, 0.85) 0%, rgba(9, 17, 28, 0.4) 55%, rgba(9, 17, 28, 0.85) 100%),
radial-gradient(80% 100% at 70% 50%, rgba(13, 42, 97, 0.55), transparent 70%),
linear-gradient(180deg, #0E1B2F 0%, #060B14 100%);
border: 1px solid var(--c-border);
z-index: 0;
overflow: hidden;
}
/* Silhouette placeholder grid (cinematic atmosphere) */
.hero__bg::after {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(2px 2px at 20% 80%, rgba(245, 197, 24, 0.25), transparent 60%),
radial-gradient(2px 2px at 80% 30%, rgba(225, 239, 248, 0.18), transparent 60%),
radial-gradient(3px 3px at 65% 70%, rgba(245, 197, 24, 0.18), transparent 60%);
pointer-events: none;
}
.hero__content {
position: relative;
z-index: 1;
padding: var(--sp-4) var(--sp-5);
}
.hero__eyebrow {
font-family: var(--ff-sans);
font-size: 10px;
font-weight: var(--fw-semibold);
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--c-tape);
margin-bottom: var(--sp-2);
}
.hero__title {
font-family: var(--ff-sans);
font-weight: var(--fw-bold);
font-size: var(--fs-3xl);
letter-spacing: 0.05em;
line-height: 1.05;
margin-bottom: var(--sp-2);
}
.hero__title-serif {
font-family: var(--ff-serif);
font-style: italic;
font-weight: var(--fw-medium);
color: var(--c-soft-blue);
letter-spacing: 0.01em;
}
.hero__sub {
font-size: var(--fs-sm);
color: var(--c-text-muted);
max-width: 32ch;
margin-bottom: var(--sp-5);
}
.hero__cta { display: flex; gap: var(--sp-3); align-items: center; }
.hero__visual {
position: relative;
z-index: 1;
height: 100%;
display: grid;
place-items: center;
}
/* Mascot placeholder — circular silhouette */
.mascot {
width: 130px;
height: 130px;
border-radius: 50%;
background:
radial-gradient(circle at 50% 40%, rgba(225, 239, 248, 0.20), transparent 65%),
linear-gradient(180deg, rgba(26, 58, 130, 0.4), rgba(9, 17, 28, 0.8));
border: 1px dashed var(--c-border-strong);
display: grid;
place-items: center;
text-align: center;
color: var(--c-text-muted);
font-size: var(--fs-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.mascot--sm { width: 64px; height: 64px; font-size: 8px; }
/* --------------------------------------------------------------------------
14. LANGUAGE PAGE GRID
-------------------------------------------------------------------------- */
.lang-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-3);
margin: var(--sp-4) 0;
}
.lang-card {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
color: var(--c-text);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
cursor: pointer;
transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.lang-card:hover {
background: rgba(255, 255, 255, 0.06);
border-color: var(--c-border-strong);
}
.lang-card.is-selected {
background: rgba(245, 197, 24, 0.10);
border-color: rgba(245, 197, 24, 0.55);
box-shadow: var(--glow-tape);
}
.lang-card__flag {
width: 28px;
height: 20px;
border-radius: 3px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05));
border: 1px solid var(--c-border);
flex-shrink: 0;
}
/* --------------------------------------------------------------------------
15. MODULE HUB
-------------------------------------------------------------------------- */
.hub__head {
display: flex;
flex-direction: column;
gap: var(--sp-2);
margin-bottom: var(--sp-3);
}
.hub__title { font-size: var(--fs-xl); }
.hub__greeting { font-size: var(--fs-sm); color: var(--c-text-muted); }
.module-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-3);
}
.module-card {
position: relative;
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
cursor: pointer;
transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.module-card:hover {
transform: translateY(-2px);
border-color: var(--c-border-strong);
}
.module-card.is-locked {
opacity: 0.65;
cursor: not-allowed;
}
.module-card.is-available {
border-color: rgba(245, 197, 24, 0.35);
box-shadow: var(--glow-tape);
}
.module-card__media {
height: 64px;
background:
linear-gradient(180deg, rgba(9, 17, 28, 0) 0%, rgba(9, 17, 28, 0.7) 100%),
radial-gradient(80% 80% at 50% 50%, rgba(26, 58, 130, 0.6), transparent 65%),
var(--c-bg-soft);
position: relative;
}
.module-card__lock {
position: absolute;
top: var(--sp-2);
right: var(--sp-2);
}
.module-card__body {
padding: var(--sp-3);
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.module-card__title {
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
letter-spacing: 0.01em;
}
.module-card__sub {
font-size: var(--fs-xs);
color: var(--c-text-muted);
}
.module-card__progress {
margin-top: var(--sp-2);
}
/* --------------------------------------------------------------------------
16. SCAMS MODULE PAGE
-------------------------------------------------------------------------- */
.scams-layout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: var(--sp-5);
flex: 1;
}
.scams-intro__title {
font-size: var(--fs-2xl);
margin-bottom: var(--sp-2);
}
.scams-intro__lede {
font-size: var(--fs-sm);
color: var(--c-text-soft);
margin-bottom: var(--sp-3);
max-width: 38ch;
}
.scams-intro__objective {
display: flex;
gap: var(--sp-3);
align-items: flex-start;
padding: var(--sp-3);
background: rgba(245, 197, 24, 0.06);
border: 1px solid rgba(245, 197, 24, 0.25);
border-radius: var(--r-md);
margin-bottom: var(--sp-3);
}
.scams-intro__objective-label {
font-size: 9px;
font-weight: var(--fw-bold);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-tape);
margin-bottom: 2px;
}
.scams-intro__objective-text {
font-size: var(--fs-sm);
color: var(--c-text);
line-height: 1.5;
}
.scams-mascot-tip {
display: flex;
gap: var(--sp-3);
align-items: center;
padding: var(--sp-3);
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
}
.scams-mascot-tip__text {
font-size: var(--fs-sm);
color: var(--c-text-soft);
}
/* Sub-topic list (right column) */
.topic-stack {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-2);
align-content: start;
}
.topic-card {
position: relative;
display: flex;
flex-direction: column;
gap: 4px;
padding: var(--sp-3);
border-radius: var(--r-md);
border: 1px solid var(--c-border);
background: rgba(255, 255, 255, 0.025);
transition: border-color var(--t-fast), background var(--t-fast);
}
.topic-card.is-highlight {
border-color: rgba(245, 197, 24, 0.55);
background: rgba(245, 197, 24, 0.08);
box-shadow: var(--glow-tape);
}
.topic-card.is-locked { opacity: 0.55; }
.topic-card__name {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
}
.topic-card__meta {
font-size: var(--fs-xs);
color: var(--c-text-muted);
}
.topic-card__star {
position: absolute;
top: var(--sp-2);
right: var(--sp-2);
font-size: 10px;
color: var(--c-tape);
}
/* --------------------------------------------------------------------------
17. JOB SCAM PLACEHOLDER PAGE
-------------------------------------------------------------------------- */
.placeholder-stage {
flex: 1;
display: grid;
grid-template-columns: 1fr 1.2fr 1fr;
gap: var(--sp-3);
align-items: stretch;
margin: var(--sp-3) 0;
}
.placeholder-flank {
background:
linear-gradient(180deg, rgba(9, 17, 28, 0) 0%, rgba(9, 17, 28, 0.7) 100%),
radial-gradient(70% 80% at 50% 50%, rgba(26, 58, 130, 0.45), transparent 70%),
var(--c-bg-mid);
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
display: grid;
place-items: center;
color: var(--c-text-dim);
font-size: var(--fs-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
filter: grayscale(0.7);
opacity: 0.6;
}
.placeholder-center {
background: var(--c-bg-mid);
border: 1px dashed rgba(245, 197, 24, 0.45);
border-radius: var(--r-lg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--sp-4);
gap: var(--sp-2);
}
.placeholder-center__label {
font-size: 10px;
font-weight: var(--fw-bold);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-tape);
}
.placeholder-center__title {
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
}
.placeholder-center__body {
font-size: var(--fs-sm);
color: var(--c-text-muted);
max-width: 36ch;
margin-bottom: var(--sp-3);
}
/* --------------------------------------------------------------------------
18. ROTATE-DEVICE OVERLAY
Shows when the viewport is portrait / too narrow.
-------------------------------------------------------------------------- */
.rotate-overlay {
position: fixed;
inset: 0;
background: var(--c-bg-deep);
display: none;
place-items: center;
z-index: 1000;
text-align: center;
padding: var(--sp-6);
}
.rotate-overlay__inner { max-width: 280px; }
.rotate-overlay__icon {
width: 60px;
height: 90px;
margin: 0 auto var(--sp-4);
border: 2px solid var(--c-text);
border-radius: 10px;
position: relative;
animation: rotateHint 2.4s ease-in-out infinite;
}
.rotate-overlay__icon::before {
content: "";
position: absolute;
inset: 6px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.1);
}
.rotate-overlay__title {
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
margin-bottom: var(--sp-2);
}
.rotate-overlay__body { font-size: var(--fs-sm); color: var(--c-text-muted); }
@keyframes rotateHint {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(-90deg); }
}
/* Show only when portrait OR too narrow */
@media (orientation: portrait) and (max-width: 700px) {
.rotate-overlay { display: grid; }
}
@media (max-aspect-ratio: 1/1) and (max-width: 600px) {
.rotate-overlay { display: grid; }
}
/* --------------------------------------------------------------------------
19. UTILITIES
-------------------------------------------------------------------------- */
.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-center { align-items: center; justify-content: center; }
.u-gap-2 { gap: var(--sp-2); }
.u-gap-3 { gap: var(--sp-3); }
.u-mt-auto { margin-top: auto; }
.u-ml-auto { margin-left: auto; }
.u-muted { color: var(--c-text-muted); }
.u-soft { color: var(--c-text-soft); }
.u-tape { color: var(--c-tape); }
.u-sm { font-size: var(--fs-sm); }
.u-xs { font-size: var(--fs-xs); }
.u-bold { font-weight: var(--fw-bold); }
.u-serif { font-family: var(--ff-serif); }
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
STAGE 2 — CINEMATIC LAYER
Additions for the visual upgrade (Landing page first, then propagated).
Everything below ADDS to the wireframe layer above; existing classes still
work unchanged.
========================================================================== */
/* ---- Extra tokens (palette-correct: navy + soft-blue + rose, no yellow accent) ---- */
:root {
--c-glow-blue: rgba(26, 58, 130, 0.50);
--c-glow-soft: rgba(225, 239, 248, 0.20);
--c-glow-rose: rgba(187, 163, 163, 0.30);
--c-bluefilm: rgba(26, 58, 130, 0.18);
--mascot-size-xl: 168px;
--mascot-size-lg: 120px;
--mascot-size-md: 84px;
--mascot-size-sm: 56px;
--t-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
/* --------------------------------------------------------------------------
A. ATMOSPHERIC LAYERS
Stackable background layers that combine into a cinematic mood.
Use as children of a positioned parent (the hero, a scene, a card).
-------------------------------------------------------------------------- */
.atmosphere {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
border-radius: inherit;
}
/* Photo slot — designer drops in cinematic imagery later */
.atmosphere__photo {
position: absolute;
inset: 0;
background-color: #0B1626;
background-size: cover;
background-position: center;
background-image:
radial-gradient(60% 80% at 30% 30%, rgba(26, 58, 130, 0.55) 0%, transparent 70%),
radial-gradient(70% 90% at 80% 80%, rgba(13, 42, 97, 0.65) 0%, transparent 70%),
radial-gradient(40% 50% at 70% 25%, rgba(225, 239, 248, 0.08) 0%, transparent 70%),
radial-gradient(30% 40% at 20% 80%, rgba(187, 163, 163, 0.10) 0%, transparent 70%),
linear-gradient(180deg, #0B1A33 0%, #050912 100%);
}
.atmosphere__vignette {
position: absolute;
inset: 0;
background:
radial-gradient(120% 80% at 50% 50%, transparent 35%, rgba(5, 9, 18, 0.55) 75%, rgba(5, 9, 18, 0.95) 100%);
}
.atmosphere__haze {
position: absolute;
inset: -10%;
background:
radial-gradient(40% 30% at 25% 70%, rgba(225, 239, 248, 0.07), transparent 70%),
radial-gradient(50% 40% at 80% 30%, rgba(187, 163, 163, 0.06), transparent 70%);
filter: blur(20px);
animation: hazeDrift 22s ease-in-out infinite alternate;
}
.atmosphere__leak {
position: absolute;
top: -20%;
right: -10%;
width: 60%;
height: 140%;
background: radial-gradient(closest-side, rgba(26, 58, 130, 0.32), transparent 70%);
transform: rotate(18deg);
filter: blur(30px);
}
.atmosphere__grain {
position: absolute;
inset: 0;
opacity: 0.18;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
}
.atmosphere__specks {
position: absolute;
inset: 0;
background-image:
radial-gradient(1.5px 1.5px at 12% 70%, rgba(225, 239, 248, 0.40), transparent 60%),
radial-gradient(1px 1px at 78% 22%, rgba(225, 239, 248, 0.35), transparent 60%),
radial-gradient(2px 2px at 65% 65%, rgba(187, 163, 163, 0.30), transparent 60%),
radial-gradient(1px 1px at 25% 18%, rgba(225, 239, 248, 0.25), transparent 60%),
radial-gradient(1.2px 1.2px at 90% 55%, rgba(187, 163, 163, 0.30), transparent 60%);
}
@keyframes hazeDrift {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(3%, -2%) scale(1.05); }
}
/* --------------------------------------------------------------------------
B. MASCOT BUBBLE — reusable component
-------------------------------------------------------------------------- */
.mascot-bubble {
position: relative;
width: var(--mascot-size-lg);
height: var(--mascot-size-lg);
border-radius: 50%;
display: grid;
place-items: center;
background:
radial-gradient(circle at 50% 30%, rgba(26, 58, 130, 0.55) 0%, rgba(9, 17, 28, 0.95) 70%);
box-shadow:
0 0 0 1px rgba(225, 239, 248, 0.18),
0 0 0 4px rgba(26, 58, 130, 0.22),
0 18px 36px rgba(0, 0, 0, 0.55),
inset 0 0 24px rgba(225, 239, 248, 0.08);
isolation: isolate;
}
.mascot-bubble::before {
content: "";
position: absolute;
inset: -8%;
border-radius: 50%;
background: radial-gradient(closest-side, var(--c-glow-blue), transparent 70%);
filter: blur(6px);
z-index: -1;
animation: mascotBreath 4.4s ease-in-out infinite;
}
.mascot-bubble--xl { width: var(--mascot-size-xl); height: var(--mascot-size-xl); }
.mascot-bubble--lg { width: var(--mascot-size-lg); height: var(--mascot-size-lg); }
.mascot-bubble--md { width: var(--mascot-size-md); height: var(--mascot-size-md); }
.mascot-bubble--sm { width: var(--mascot-size-sm); height: var(--mascot-size-sm); }
.mascot-bubble__img {
width: 78%;
height: 78%;
object-fit: contain;
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
animation: mascotFloat 5s ease-in-out infinite;
}
.mascot-bubble--welcome {
box-shadow:
0 0 0 1px rgba(225, 239, 248, 0.35),
0 0 0 4px rgba(26, 58, 130, 0.25),
0 18px 36px rgba(0, 0, 0, 0.55),
inset 0 0 24px rgba(225, 239, 248, 0.10);
}
.mascot-bubble--warn {
box-shadow:
0 0 0 1px rgba(239, 83, 80, 0.45),
0 0 0 4px rgba(239, 83, 80, 0.10),
0 18px 36px rgba(0, 0, 0, 0.55),
inset 0 0 24px rgba(239, 83, 80, 0.12);
}
.mascot-bubble--celebrate {
box-shadow:
0 0 0 1px rgba(74, 222, 128, 0.45),
0 0 0 4px rgba(74, 222, 128, 0.10),
0 18px 36px rgba(0, 0, 0, 0.55),
inset 0 0 24px rgba(74, 222, 128, 0.12);
}
@keyframes mascotBreath {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 0.85; transform: scale(1.06); }
}
@keyframes mascotFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
/* --------------------------------------------------------------------------
C. BRAND MARK refinement — small shield + wordmark
-------------------------------------------------------------------------- */
.brand-mark {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
}
.brand-mark__shield {
width: 32px;
height: 32px;
display: grid;
place-items: center;
background: linear-gradient(160deg, var(--c-police-blue-2), var(--c-police-blue));
border-radius: 8px 8px 14px 14px / 8px 8px 18px 18px;
position: relative;
box-shadow:
0 0 0 1px rgba(225, 239, 248, 0.25),
0 4px 12px rgba(13, 42, 97, 0.55);
}
.brand-mark__shield::before {
content: "";
width: 14px;
height: 14px;
border-radius: 50%;
background: linear-gradient(180deg, #FFFFFF, var(--c-soft-blue));
box-shadow: 0 0 8px rgba(225, 239, 248, 0.45);
}
.brand-mark__shield::after {
content: "";
position: absolute;
bottom: 3px;
width: 18px;
height: 2px;
background: rgba(225, 239, 248, 0.7);
border-radius: 2px;
}
.brand-mark__text {
display: flex;
flex-direction: column;
line-height: 1;
}
.brand-mark__name {
font-family: var(--ff-sans);
font-weight: var(--fw-bold);
font-size: 13px;
letter-spacing: 0.2em;
color: var(--c-white);
}
.brand-mark__sub {
font-family: var(--ff-sans);
font-size: 8px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--c-text-dim);
margin-top: 3px;
}
/* --------------------------------------------------------------------------
D. HERO refinement (cinematic landing)
-------------------------------------------------------------------------- */
.hero--cinematic {
position: relative;
flex: 1;
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: var(--sp-6);
align-items: center;
padding: 0;
border-radius: var(--r-xl);
overflow: hidden;
isolation: isolate;
min-height: 290px;
border: 1px solid var(--c-border);
}
.hero--cinematic .hero__content {
padding: var(--sp-6) var(--sp-7);
z-index: 2;
}
.hero--cinematic .hero__visual {
z-index: 2;
padding-right: var(--sp-6);
display: grid;
place-items: center;
}
.hero__title--cinematic {
font-family: var(--ff-sans);
font-weight: var(--fw-bold);
font-size: 38px;
letter-spacing: 0.04em;
line-height: 1.02;
text-transform: uppercase;
text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
margin: 0;
}
.hero__title--cinematic .hero__title-serif {
display: block;
font-family: var(--ff-serif);
font-style: italic;
font-weight: 500;
font-size: 32px;
text-transform: none;
letter-spacing: 0;
color: var(--c-soft-blue);
margin-top: 4px;
}
.hero__rule {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
margin: var(--sp-2) 0 var(--sp-3);
}
.hero__rule::before,
.hero__rule::after {
content: "";
width: 22px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(225, 239, 248, 0.7), transparent);
}
.hero__rule-text {
font-family: var(--ff-sans);
font-size: 10px;
font-weight: var(--fw-semibold);
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--c-soft-blue);
}
/* --------------------------------------------------------------------------
E. POLICE-TAPE EYEBROW (small accent above hero)
-------------------------------------------------------------------------- */
/* "Case file" eyebrow — small uppercase chip, palette-neutral */
.tape-mini {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(180deg, rgba(13, 42, 97, 0.55), rgba(9, 17, 28, 0.55));
color: var(--c-soft-blue);
font-size: 9px;
font-weight: var(--fw-bold);
letter-spacing: 0.28em;
text-transform: uppercase;
padding: 5px 14px;
border: 1px solid rgba(225, 239, 248, 0.18);
border-radius: 2px;
position: relative;
margin-bottom: var(--sp-2);
backdrop-filter: blur(4px);
}
.tape-mini::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: linear-gradient(180deg, #FFFFFF, var(--c-soft-blue));
box-shadow: 0 0 6px rgba(225, 239, 248, 0.5);
flex-shrink: 0;
}
/* --------------------------------------------------------------------------
F. BUTTON polish — cinematic variants
-------------------------------------------------------------------------- */
/* Primary cinematic CTA — police blue glass (matches SPF "LEARN MORE" pattern) */
.btn--cinematic.btn--primary,
.btn--cinematic.btn--tape {
position: relative;
background:
linear-gradient(180deg, rgba(26, 58, 130, 0.95) 0%, rgba(13, 42, 97, 0.95) 100%);
color: var(--c-white);
border: 1px solid rgba(225, 239, 248, 0.18);
box-shadow:
0 0 0 1px rgba(225, 239, 248, 0.06),
0 10px 26px rgba(13, 42, 97, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.10);
overflow: hidden;
backdrop-filter: blur(4px);
}
.btn--cinematic.btn--primary::after,
.btn--cinematic.btn--tape::after {
content: "";
position: absolute;
top: 0; left: -120%;
width: 60%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(225, 239, 248, 0.20), transparent);
transform: skewX(-18deg);
transition: left 700ms var(--t-ease-out);
}
.btn--cinematic.btn--primary:hover::after,
.btn--cinematic.btn--tape:hover::after { left: 130%; }
.btn--cinematic.btn--primary:hover,
.btn--cinematic.btn--tape:hover {
border-color: rgba(225, 239, 248, 0.30);
box-shadow:
0 0 0 1px rgba(225, 239, 248, 0.12),
0 14px 34px rgba(13, 42, 97, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.btn--cinematic.btn--ghost {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--c-border);
backdrop-filter: blur(6px);
}
.btn--cinematic.btn--ghost:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(225, 239, 248, 0.30);
}
/* --------------------------------------------------------------------------
G. ENTRANCE ANIMATIONS — minimal, performant
-------------------------------------------------------------------------- */
.reveal {
opacity: 0;
transform: translateY(12px);
animation: revealUp 700ms var(--t-ease-out) forwards;
}
.reveal--right { transform: translateX(20px); animation-name: revealRight; }
.reveal--scale { transform: scale(0.92); animation-name: revealScale; }
.reveal[data-delay="1"] { animation-delay: 120ms; }
.reveal[data-delay="2"] { animation-delay: 240ms; }
.reveal[data-delay="3"] { animation-delay: 380ms; }
.reveal[data-delay="4"] { animation-delay: 520ms; }
.reveal[data-delay="5"] { animation-delay: 660ms; }
@keyframes revealUp { to { opacity: 1; transform: translateY(0); } }
@keyframes revealRight { to { opacity: 1; transform: translateX(0); } }
@keyframes revealScale { to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal--right, .reveal--scale {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.mascot-bubble::before,
.mascot-bubble__img,
.atmosphere__haze { animation: none !important; }
}
/* --------------------------------------------------------------------------
H. SCENE backdrop for cinematic pages
-------------------------------------------------------------------------- */
.scene--cinematic {
position: relative;
isolation: isolate;
}
.scene--cinematic > .atmosphere { z-index: 0; }
.scene--cinematic > *:not(.atmosphere) { position: relative; z-index: 1; }
/* --------------------------------------------------------------------------
I. TOPBAR refinements for the cinematic landing
-------------------------------------------------------------------------- */
.topbar--cinematic {
background: linear-gradient(180deg, rgba(9, 17, 28, 0.85) 0%, transparent 100%);
margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-5)) var(--sp-3);
padding: var(--sp-3) var(--sp-5);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--c-border);
}
/* ==========================================================================
STAGE 2 — MODULE HUB (cinematic)
Replaces wireframe module-card with photo-overlay treatment from SPF ref.
========================================================================== */
/* ---- Section header (eyebrow + title + lede) ---- */
.section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--sp-5);
margin: var(--sp-2) 0 var(--sp-3);
}
.section-head__left { display: flex; flex-direction: column; gap: 6px; }
.section-head__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--ff-sans);
font-size: 10px;
font-weight: var(--fw-bold);
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--c-soft-blue);
}
.section-head__eyebrow::before {
content: "";
width: 22px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(225, 239, 248, 0.8));
}
.section-head__title {
font-family: var(--ff-sans);
font-weight: var(--fw-bold);
font-size: 22px;
letter-spacing: 0.02em;
line-height: 1.05;
text-transform: uppercase;
}
.section-head__title-serif {
display: inline;
font-family: var(--ff-serif);
font-style: italic;
font-weight: 500;
text-transform: none;
font-size: 22px;
color: var(--c-soft-blue);
letter-spacing: 0;
margin-left: 6px;
}
.section-head__lede {
font-size: var(--fs-sm);
color: var(--c-text-muted);
max-width: 52ch;
margin-top: 2px;
}
.section-head__right {
min-width: 240px;
display: flex;
flex-direction: column;
gap: 6px;
}
/* Override the progress bar gradient to palette-correct (no yellow) */
.progress__bar {
background: linear-gradient(90deg, var(--c-soft-blue) 0%, var(--c-white) 100%);
}
/* ---- Module hub grid (3 × 2 on mobile landscape) ---- */
.module-grid--cinematic {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
gap: var(--sp-3);
margin-top: var(--sp-2);
}
/* ---- Module card (photo overlay style — SPF reference) ---- */
.mcard {
position: relative;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, rgba(15, 26, 46, 0.85) 0%, rgba(9, 17, 28, 0.92) 100%);
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
overflow: hidden;
cursor: pointer;
transition: transform 220ms var(--t-ease-out),
border-color var(--t-fast),
box-shadow var(--t-fast);
isolation: isolate;
box-shadow: var(--shadow-md);
min-height: 132px;
}
.mcard:hover:not(.is-locked):not(.is-soon) {
transform: translateY(-3px);
border-color: rgba(225, 239, 248, 0.28);
box-shadow: var(--shadow-lg);
}
/* Highlighted (Scams) — primary call-to-action card */
.mcard.is-available {
border-color: rgba(225, 239, 248, 0.28);
box-shadow:
0 0 0 1px rgba(26, 58, 130, 0.5),
0 14px 32px rgba(13, 42, 97, 0.45);
}
.mcard.is-available::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
pointer-events: none;
z-index: 3;
box-shadow: inset 0 0 0 1px rgba(225, 239, 248, 0.18);
}
.mcard.is-locked,
.mcard.is-soon {
opacity: 0.78;
cursor: not-allowed;
}
.mcard.is-locked .mcard__media,
.mcard.is-soon .mcard__media { filter: grayscale(0.5) brightness(0.7); }
/* MEDIA (top half of card — photo or gradient placeholder) */
.mcard__media {
position: relative;
height: 78px;
overflow: hidden;
background-size: cover;
background-position: center;
}
/* Gradient fade overlay (photo → card body) */
.mcard__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(9, 17, 28, 0.10) 0%,
rgba(9, 17, 28, 0.55) 65%,
rgba(9, 17, 28, 0.95) 100%);
pointer-events: none;
}
/* Title overlaid on photo (bottom edge) */
.mcard__title {
position: absolute;
left: var(--sp-3);
right: 56px;
bottom: 6px;
z-index: 2;
font-family: var(--ff-sans);
font-weight: var(--fw-bold);
font-size: 13px;
letter-spacing: 0.01em;
line-height: 1.15;
color: var(--c-white);
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
/* Status badge (top right of photo) */
.mcard__badge {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
font-family: var(--ff-sans);
font-size: 8px;
font-weight: var(--fw-bold);
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 3px 7px;
border-radius: 2px;
backdrop-filter: blur(4px);
}
.mcard__badge--available {
background: rgba(26, 58, 130, 0.85);
color: var(--c-white);
border: 1px solid rgba(225, 239, 248, 0.35);
}
.mcard__badge--soon {
background: rgba(187, 163, 163, 0.20);
color: var(--c-rose);
border: 1px solid rgba(187, 163, 163, 0.35);
}
.mcard__badge--locked {
background: rgba(9, 17, 28, 0.65);
color: var(--c-text-muted);
border: 1px solid var(--c-border);
}
/* BODY */
.mcard__body {
padding: var(--sp-3);
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.mcard__desc {
font-size: 10.5px;
color: var(--c-text-muted);
line-height: 1.4;
flex: 1;
}
.mcard__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
margin-top: 2px;
}
.mcard__time {
font-family: var(--ff-sans);
font-size: 9px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-text-dim);
}
/* Compact CTA inside cards (matches SPF "VIEW TIPS" / "SUBMIT A REPORT") */
.mcard__cta {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--ff-sans);
font-size: 10px;
font-weight: var(--fw-semibold);
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 5px 10px;
background: rgba(13, 42, 97, 0.55);
border: 1px solid rgba(225, 239, 248, 0.20);
border-radius: 3px;
color: var(--c-white);
transition: background var(--t-fast), border-color var(--t-fast);
}
.mcard__cta:hover {
background: rgba(26, 58, 130, 0.85);
border-color: rgba(225, 239, 248, 0.4);
}
.mcard__cta--muted {
background: transparent;
color: var(--c-text-muted);
border-color: var(--c-border);
cursor: not-allowed;
}
/* Lock icon — drawn in CSS, no emoji */
.lock-icon {
width: 11px;
height: 11px;
position: relative;
display: inline-block;
}
.lock-icon::before {
content: "";
position: absolute;
bottom: 0;
width: 11px;
height: 7px;
background: currentColor;
border-radius: 1.5px;
}
.lock-icon::after {
content: "";
position: absolute;
top: 0;
left: 2px;
width: 7px;
height: 6px;
border: 1.5px solid currentColor;
border-bottom: 0;
border-radius: 3.5px 3.5px 0 0;
}
/* ==========================================================================
STAGE 2 — JOB SCAM INTERACTIVE MODULE
Self-contained step flow inside job-scam.html. Namespaced `.jsm-`.
Steps are show/hidden by js/job-scam.js.
========================================================================== */
/* ---- Module root + step system ---- */
.jsm {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.jsm-step { display: none; flex-direction: column; flex: 1; min-height: 0; }
.jsm-step.is-active { display: flex; animation: revealUp 420ms var(--t-ease-out); }
/* ---- Minimal module top bar (exit + step indicator) ---- */
.jsm-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
padding: var(--sp-2) 0 var(--sp-3);
}
.jsm-exit {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--c-text-muted);
padding: 4px 8px;
border-radius: var(--r-sm);
transition: color var(--t-fast), background var(--t-fast);
}
.jsm-exit:hover { color: var(--c-text); background: rgba(255,255,255,0.05); }
.jsm-stepmeta {
display: flex;
align-items: center;
gap: var(--sp-3);
}
.jsm-stepname {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--c-soft-blue);
letter-spacing: 0.02em;
}
/* Step dots — 6 segments */
.jsm-stepdots { display: flex; gap: 5px; }
.jsm-stepdots__dot {
width: 22px;
height: 4px;
border-radius: var(--r-pill);
background: rgba(255,255,255,0.12);
transition: background var(--t-med);
}
.jsm-stepdots__dot.is-done { background: rgba(225,239,248,0.55); }
.jsm-stepdots__dot.is-active { background: var(--c-soft-blue); }
/* ---- Generic step heading ---- */
.jsm-head { margin-bottom: var(--sp-2); }
.jsm-head__title {
font-family: var(--ff-sans);
font-weight: var(--fw-bold);
font-size: var(--fs-xl);
letter-spacing: 0.01em;
}
.jsm-head__body {
font-size: var(--fs-sm);
color: var(--c-text-muted);
margin-top: 2px;
max-width: 64ch;
}
/* ---- Mascot tip row (reused across steps) ---- */
.jsm-tip {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3);
background: rgba(13, 42, 97, 0.30);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
}
.jsm-tip__text { font-size: var(--fs-sm); color: var(--c-text-soft); }
.jsm-tip__text strong { color: var(--c-white); }
/* ============ STEP 1 — INTRO ============ */
.jsm-intro {
flex: 1;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: var(--sp-5);
align-items: center;
}
.jsm-intro__goals {
display: flex;
flex-direction: column;
gap: 6px;
margin: var(--sp-3) 0;
}
.jsm-intro__goal {
display: flex;
align-items: flex-start;
gap: var(--sp-2);
font-size: var(--fs-sm);
color: var(--c-text-soft);
}
.jsm-intro__goal::before {
content: "";
width: 14px; height: 14px;
margin-top: 1px;
flex-shrink: 0;
border-radius: 50%;
background: rgba(26, 58, 130, 0.85);
box-shadow: inset 0 0 0 1px rgba(225,239,248,0.35);
}
.jsm-intro__visual { display: grid; place-items: center; gap: var(--sp-3); }
/* ============ STEP 2 — SCENARIO (interactive message) ============ */
.jsm-scenario {
flex: 1;
display: grid;
grid-template-columns: 300px 1fr;
gap: var(--sp-4);
min-height: 0;
}
/* Phone frame */
.jsm-phone {
background: linear-gradient(180deg, #0E1A2E 0%, #0A1322 100%);
border: 2px solid rgba(225,239,248,0.14);
border-radius: 22px;
padding: var(--sp-3);
display: flex;
flex-direction: column;
box-shadow: var(--shadow-lg);
overflow-y: auto;
}
.jsm-msg__sender {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
background: rgba(255,255,255,0.05);
border-radius: var(--r-md);
font-size: var(--fs-xs);
color: var(--c-text-muted);
margin-bottom: var(--sp-2);
}
.jsm-msg__avatar {
width: 22px; height: 22px; border-radius: 50%;
background: rgba(187,163,163,0.35);
flex-shrink: 0;
}
.jsm-msg__bubble {
background: rgba(20, 36, 64, 0.75);
border-radius: 4px 14px 14px 14px;
padding: var(--sp-3);
display: flex;
flex-direction: column;
gap: 7px;
}
.jsm-msg__line { font-size: var(--fs-sm); line-height: 1.45; color: var(--c-text); }
/* Hotspot — tappable suspicious region */
.jsm-hotspot {
position: relative;
display: block;
width: 100%;
text-align: left;
font: inherit;
color: inherit;
cursor: pointer;
padding: 5px 28px 5px 8px;
border: 1.5px dashed rgba(225, 239, 248, 0.45);
border-radius: var(--r-sm);
background: rgba(225, 239, 248, 0.04);
transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.jsm-hotspot:hover { background: rgba(225,239,248,0.10); border-color: rgba(225,239,248,0.7); }
.jsm-hotspot:active { transform: scale(0.99); }
.jsm-hotspot__num {
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
width: 17px; height: 17px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 10px;
font-weight: var(--fw-bold);
background: rgba(26, 58, 130, 0.95);
color: var(--c-white);
box-shadow: 0 0 0 1px rgba(225,239,248,0.35);
}
.jsm-hotspot.is-found {
border-style: solid;
border-color: rgba(74, 222, 128, 0.55);
background: rgba(74, 222, 128, 0.10);
cursor: default;
}
.jsm-hotspot.is-found .jsm-hotspot__num {
background: var(--c-success);
color: #0a2a14;
box-shadow: none;
}
/* sender variant inherits hotspot but stays inline in the header */
.jsm-msg__sender.jsm-hotspot { margin-bottom: var(--sp-2); }
/* Right panel — instruction, progress, checklist, continue */
.jsm-panel {
display: flex;
flex-direction: column;
gap: var(--sp-3);
min-height: 0;
}
.jsm-panel__instruction {
font-size: var(--fs-sm);
color: var(--c-text-soft);
padding: var(--sp-3);
background: rgba(13, 42, 97, 0.30);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
}
.jsm-count {
display: flex;
align-items: baseline;
gap: var(--sp-2);
}
.jsm-count__big {
font-size: var(--fs-2xl);
font-weight: var(--fw-bold);
color: var(--c-white);
}
.jsm-count__label {
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.10em;
color: var(--c-text-muted);
}
/* Checklist of the 5 signs */
.jsm-checklist { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.jsm-checklist__item {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--fs-sm);
color: var(--c-text-dim);
padding: 5px 8px;
border-radius: var(--r-sm);
border: 1px solid transparent;
transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.jsm-checklist__box {
width: 16px; height: 16px;
border-radius: 4px;
border: 1.5px solid var(--c-border-strong);
display: grid; place-items: center;
flex-shrink: 0;
font-size: 11px;
}
.jsm-checklist__item.is-found {
color: var(--c-text);
background: rgba(74, 222, 128, 0.08);
border-color: rgba(74, 222, 128, 0.30);
}
.jsm-checklist__item.is-found .jsm-checklist__box {
background: var(--c-success);
border-color: var(--c-success);
color: #0a2a14;
}
/* ============ POPUP — reusable warning sign explanation ============ */
.jsm-popup {
position: absolute;
inset: 0;
z-index: 50;
display: none;
place-items: center;
padding: var(--sp-5);
background: rgba(5, 9, 18, 0.78);
backdrop-filter: blur(3px);
}
.jsm-popup.is-open { display: grid; animation: revealUp 240ms var(--t-ease-out); }
.jsm-popup__card {
width: min(540px, 100%);
background: linear-gradient(180deg, #15243F 0%, #0F1A2E 100%);
border: 1px solid var(--c-border-strong);
border-radius: var(--r-lg);
box-shadow: var(--shadow-lg);
padding: var(--sp-4);
position: relative;
}
.jsm-popup__label {
font-size: 9px;
font-weight: var(--fw-bold);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-rose);
}
.jsm-popup__title {
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
margin: 2px 0 var(--sp-2);
}
.jsm-popup__content {
font-size: var(--fs-sm);
color: var(--c-text-soft);
line-height: 1.5;
}
.jsm-popup__tip {
display: flex;
align-items: center;
gap: var(--sp-3);
margin-top: var(--sp-3);
padding: var(--sp-2) var(--sp-3);
background: rgba(13, 42, 97, 0.35);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
font-size: var(--fs-xs);
color: var(--c-text-soft);
}
.jsm-popup__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
margin-top: var(--sp-4);
}
.jsm-popup__progress {
font-size: var(--fs-xs);
color: var(--c-text-muted);
}
.jsm-popup__close {
position: absolute;
top: var(--sp-2);
right: var(--sp-3);
font-size: 20px;
line-height: 1;
color: var(--c-text-muted);
padding: 4px;
}
.jsm-popup__close:hover { color: var(--c-white); }
/* ============ STEP 3 — DECISION ============ */
.jsm-decision { flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); }
.jsm-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-3);
}
.jsm-option {
display: flex;
align-items: center;
gap: var(--sp-3);
text-align: left;
font: inherit;
color: var(--c-text);
padding: var(--sp-3);
background: rgba(255,255,255,0.03);
border: 1.5px solid var(--c-border);
border-radius: var(--r-md);
cursor: pointer;
transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.jsm-option:hover:not(.is-disabled) { border-color: var(--c-border-strong); background: rgba(255,255,255,0.06); }
.jsm-option:active:not(.is-disabled) { transform: scale(0.99); }
.jsm-option__marker {
width: 26px; height: 26px;
border-radius: 50%;
flex-shrink: 0;
display: grid; place-items: center;
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
background: rgba(26, 58, 130, 0.6);
box-shadow: inset 0 0 0 1px rgba(225,239,248,0.25);
}
.jsm-option__text { font-size: var(--fs-sm); line-height: 1.35; }
.jsm-option.is-selected { border-color: var(--c-soft-blue); background: rgba(225,239,248,0.08); }
.jsm-option.is-correct {
border-color: rgba(74, 222, 128, 0.7);
background: rgba(74, 222, 128, 0.12);
}
.jsm-option.is-correct .jsm-option__marker { background: var(--c-success); color: #0a2a14; }
.jsm-option.is-wrong {
border-color: rgba(239, 83, 80, 0.7);
background: rgba(239, 83, 80, 0.12);
}
.jsm-option.is-wrong .jsm-option__marker { background: var(--c-danger); color: #2a0a0a; }
.jsm-option.is-disabled { cursor: default; opacity: 0.85; }
/* Feedback panel (decision + quiz) */
.jsm-feedback {
display: none;
align-items: flex-start;
gap: var(--sp-3);
padding: var(--sp-3);
border-radius: var(--r-md);
border: 1px solid var(--c-border);
font-size: var(--fs-sm);
line-height: 1.45;
}
.jsm-feedback.is-shown { display: flex; animation: revealUp 280ms var(--t-ease-out); }
.jsm-feedback.is-correct {
background: rgba(74, 222, 128, 0.10);
border-color: rgba(74, 222, 128, 0.35);
color: var(--c-text);
}
.jsm-feedback.is-wrong {
background: rgba(239, 83, 80, 0.10);
border-color: rgba(239, 83, 80, 0.35);
color: var(--c-text);
}
.jsm-feedback__icon {
width: 24px; height: 24px;
border-radius: 50%;
flex-shrink: 0;
display: grid; place-items: center;
font-weight: var(--fw-bold);
font-size: var(--fs-sm);
}
.jsm-feedback.is-correct .jsm-feedback__icon { background: var(--c-success); color: #0a2a14; }
.jsm-feedback.is-wrong .jsm-feedback__icon { background: var(--c-danger); color: #2a0a0a; }
/* ============ STEP 4 — QUIZ ============ */
.jsm-quiz { flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); }
.jsm-quiz__progress {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
align-self: flex-start;
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-soft-blue);
padding: 4px 10px;
border: 1px solid var(--c-border);
border-radius: var(--r-pill);
}
.jsm-quiz__question {
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
line-height: 1.3;
}
.jsm-quiz__options { display: flex; flex-direction: column; gap: var(--sp-2); }
.jsm-quiz__option {
display: flex;
align-items: center;
gap: var(--sp-3);
text-align: left;
font: inherit;
color: var(--c-text);
padding: var(--sp-3);
background: rgba(255,255,255,0.03);
border: 1.5px solid var(--c-border);
border-radius: var(--r-md);
cursor: pointer;
transition: border-color var(--t-fast), background var(--t-fast);
}
.jsm-quiz__option:hover:not(.is-disabled) { border-color: var(--c-border-strong); background: rgba(255,255,255,0.06); }
.jsm-quiz__option .jsm-option__marker { width: 22px; height: 22px; font-size: var(--fs-xs); }
.jsm-quiz__option.is-correct {
border-color: rgba(74, 222, 128, 0.7);
background: rgba(74, 222, 128, 0.12);
}
.jsm-quiz__option.is-correct .jsm-option__marker { background: var(--c-success); color: #0a2a14; }
.jsm-quiz__option.is-wrong {
border-color: rgba(239, 83, 80, 0.7);
background: rgba(239, 83, 80, 0.12);
}
.jsm-quiz__option.is-wrong .jsm-option__marker { background: var(--c-danger); color: #2a0a0a; }
.jsm-quiz__option.is-disabled { cursor: default; }
/* ============ STEP 5 — RECAP ============ */
.jsm-recap { flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); }
.jsm-recap__cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-3);
flex: 1;
}
.jsm-recap__col {
border: 1px solid var(--c-border);
border-radius: var(--r-md);
overflow: hidden;
display: flex;
flex-direction: column;
}
.jsm-recap__colhead {
padding: var(--sp-2) var(--sp-3);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.jsm-recap__col.is-red .jsm-recap__colhead { background: rgba(239, 83, 80, 0.16); color: #ff9b99; }
.jsm-recap__col.is-safe .jsm-recap__colhead { background: rgba(74, 222, 128, 0.16); color: #8ef0b0; }
.jsm-recap__list { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.jsm-recap__item {
display: flex;
align-items: flex-start;
gap: var(--sp-2);
font-size: var(--fs-sm);
color: var(--c-text-soft);
}
.jsm-recap__item::before {
content: "";
width: 8px; height: 8px;
margin-top: 5px;
border-radius: 2px;
flex-shrink: 0;
}
.jsm-recap__col.is-red .jsm-recap__item::before { background: var(--c-danger); }
.jsm-recap__col.is-safe .jsm-recap__item::before { background: var(--c-success); }
/* ============ STEP 6 — COMPLETION ============ */
.jsm-completion {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: var(--sp-3);
}
.jsm-completion__check {
width: 84px; height: 84px;
border-radius: 50%;
display: grid;
place-items: center;
background: radial-gradient(circle at 50% 35%, rgba(74,222,128,0.30), rgba(9,17,28,0.9) 70%);
border: 2px solid rgba(74, 222, 128, 0.6);
font-size: 38px;
color: var(--c-success);
box-shadow: 0 0 28px rgba(74, 222, 128, 0.25);
}
.jsm-completion__progress {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: 6px 14px;
border-radius: var(--r-pill);
background: rgba(13, 42, 97, 0.4);
border: 1px solid var(--c-border);
font-size: var(--fs-sm);
color: var(--c-soft-blue);
}
.jsm-completion__buttons { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); }
/* ---- Step footer (continue / action row) ---- */
.jsm-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
padding-top: var(--sp-3);
margin-top: auto;
}
.jsm-foot__hint { font-size: var(--fs-xs); color: var(--c-text-dim); }
/* ==========================================================================
PLACEHOLDER MODULE BACKGROUNDS
Six distinct cinematic gradient backdrops using ONLY brand-palette colours.
Designer images drop in via `data-image` (background-image) and these
fallbacks remain underneath.
========================================================================== */
.mod-bg--theft {
background-image:
radial-gradient(60% 80% at 30% 30%, rgba(13, 42, 97, 0.85), transparent 70%),
radial-gradient(70% 90% at 80% 80%, rgba(225, 239, 248, 0.08), transparent 70%),
linear-gradient(135deg, #0E1B33 0%, #060B14 100%);
}
.mod-bg--oom {
background-image:
radial-gradient(50% 70% at 70% 30%, rgba(187, 163, 163, 0.30), transparent 70%),
radial-gradient(80% 90% at 20% 80%, rgba(9, 17, 28, 0.95), transparent 70%),
linear-gradient(160deg, #1A1E2E 0%, #0A0E18 100%);
}
.mod-bg--loans {
background-image:
radial-gradient(70% 90% at 50% 100%, rgba(187, 163, 163, 0.20), transparent 70%),
radial-gradient(50% 70% at 80% 20%, rgba(13, 42, 97, 0.6), transparent 70%),
linear-gradient(170deg, #1A1521 0%, #0B0A12 100%);
}
.mod-bg--scams {
background-image:
radial-gradient(60% 80% at 40% 30%, rgba(26, 58, 130, 0.85), transparent 70%),
radial-gradient(40% 60% at 80% 70%, rgba(225, 239, 248, 0.18), transparent 70%),
linear-gradient(135deg, #102347 0%, #050B19 100%);
}
.mod-bg--road {
background-image:
radial-gradient(50% 70% at 30% 70%, rgba(225, 239, 248, 0.12), transparent 70%),
radial-gradient(60% 80% at 80% 30%, rgba(13, 42, 97, 0.5), transparent 70%),
linear-gradient(155deg, #0E1A30 0%, #050B15 100%);
}
.mod-bg--formsg {
background-image:
radial-gradient(50% 70% at 50% 40%, rgba(225, 239, 248, 0.20), transparent 70%),
radial-gradient(70% 90% at 80% 90%, rgba(13, 42, 97, 0.45), transparent 70%),
linear-gradient(135deg, #131F38 0%, #07101F 100%);
}
/* ==========================================================================
SIDEBAR — clean SVG-icon treatment (replaces ASCII glyphs)
The icons live in HTML as inline SVG, this just sizes them.
========================================================================== */
.nav-item__icon svg {
width: 16px;
height: 16px;
stroke: currentColor;
stroke-width: 1.5;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ==========================================================================
STAGE 3 — LIGHT THEME (high-fidelity visual direction)
--------------------------------------------------------------------------
Scoped to `body.theme-light`. Applied page-by-page while migrating the
site from the dark cinematic prototype to the final light visual style.
Pages not yet carrying the `theme-light` class keep the dark theme.
========================================================================== */
body.theme-light {
/* Token overrides — cascade into existing components */
--c-bg-deep: #F4F9FD;
--c-bg-mid: #FFFFFF;
--c-bg-soft: #EDF4FB;
--c-text: #1A2740;
--c-text-soft: #33425C;
--c-text-muted: #6B7B92;
--c-text-dim: #93A1B5;
--c-border: #D6E3EF;
--c-border-strong: #BBCEE0;
/* Light-theme specific tokens */
--lt-sky-1: #BEDDF2;
--lt-sky-2: #E1EFF8;
--lt-white: #FFFFFF;
--lt-navy: #0D2A61;
--lt-ink: #1A2740;
--lt-muted: #6B7B92;
--lt-border: #D6E3EF;
--lt-soft: #9CC4E4; /* soft-blue button (home "Start Learning") */
--lt-soft-hi: #88B6DD;
--lt-tape: #F5C518; /* police-tape yellow (literal tape graphic) */
--lt-disc: #FBF1C7; /* pale-yellow mascot disc */
background: var(--c-bg-deep);
color: var(--lt-ink);
}
/* ---- App shell becomes a vertical stack: tape · stage · footer ---- */
body.theme-light .app {
display: flex;
flex-direction: column;
background: var(--lt-white);
background-image: none;
}
body.theme-light .stage {
flex: 1;
min-height: 0;
height: auto;
background: var(--lt-white);
}
/* --------------------------------------------------------------------------
POLICE-TAPE BANNER (top edge of light pages)
CSS placeholder — swap to the supplied image by uncommenting below.
-------------------------------------------------------------------------- */
.police-tape {
height: 22px;
width: 100%;
flex-shrink: 0;
background-image: repeating-linear-gradient(
-45deg,
#161616 0 16px,
var(--lt-tape) 16px 32px
);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
position: relative;
z-index: 5;
}
/* When the artwork is ready:
.police-tape {
background-image: url("../assets/images/police-tape.png");
background-size: cover;
background-position: center;
}
*/
/* --------------------------------------------------------------------------
SITE FOOTER (dark navy bar — home page)
-------------------------------------------------------------------------- */
.site-footer {
flex-shrink: 0;
background: var(--lt-navy);
color: rgba(255, 255, 255, 0.82);
text-align: center;
font-size: var(--fs-xs);
letter-spacing: 0.04em;
padding: var(--sp-3) var(--sp-4);
}
/* --------------------------------------------------------------------------
CITY SKYLINE BACKDROP
CSS placeholder (two building layers as an inline SVG). Swap to the
designer's artwork by setting `background-image` on `.city-skyline`.
-------------------------------------------------------------------------- */
.city-skyline {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
background: linear-gradient(180deg, var(--lt-sky-1) 0%, var(--lt-sky-2) 55%, #F4F9FD 100%);
}
.city-skyline::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 78%;
background-repeat: no-repeat;
background-position: bottom center;
background-size: cover;
background-image: url("data:image/svg+xml;utf8,");
}
/* ==========================================================================
LIGHT BUTTONS
========================================================================== */
.theme-light .btn--soft {
background: var(--lt-soft);
color: #FFFFFF;
border: 1px solid rgba(13, 42, 97, 0.10);
box-shadow: 0 8px 20px rgba(156, 196, 228, 0.45);
font-weight: var(--fw-semibold);
}
.theme-light .btn--soft:hover { background: var(--lt-soft-hi); }
.theme-light .btn--navy {
background: var(--lt-navy);
color: #FFFFFF;
border: 1px solid rgba(13, 42, 97, 0.30);
box-shadow: 0 8px 22px rgba(13, 42, 97, 0.30);
font-weight: var(--fw-semibold);
}
.theme-light .btn--navy:hover { background: #11357C; }
.theme-light .btn--quiet {
background: transparent;
color: var(--lt-muted);
border: 1px solid transparent;
}
.theme-light .btn--quiet:hover { color: var(--lt-navy); background: rgba(13, 42, 97, 0.05); }
/* ==========================================================================
HOME PAGE — light
========================================================================== */
.scene--home-light { padding: 0; }
.home-split {
flex: 1;
display: grid;
grid-template-columns: 1.04fr 1fr;
min-height: 0;
}
/* LEFT — skyline + mascot disc */
.home-visual {
position: relative;
overflow: hidden;
display: grid;
place-items: center;
}
.home-visual::after { /* soft fade into the white content panel */
content: "";
position: absolute;
top: 0; bottom: 0; right: 0;
width: 90px;
background: linear-gradient(90deg, transparent, var(--lt-white));
z-index: 2;
}
.mascot-disc {
position: relative;
z-index: 1;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle at 50% 42%, #FEF8DA 0%, var(--lt-disc) 70%, #F3E4B0 100%);
display: grid;
place-items: center;
box-shadow:
0 0 0 10px rgba(251, 241, 199, 0.45),
0 24px 50px rgba(13, 42, 97, 0.20);
animation: discFloat 6s ease-in-out infinite;
}
.mascot-disc__img {
width: 86%;
height: 86%;
object-fit: contain;
filter: drop-shadow(0 10px 16px rgba(13, 42, 97, 0.25));
}
@keyframes discFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* RIGHT — content panel */
.home-content {
background: var(--lt-white);
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--sp-2);
padding: var(--sp-6) var(--sp-8);
z-index: 1;
}
.home-title {
font-family: var(--ff-sans);
font-weight: var(--fw-bold);
font-size: 40px;
letter-spacing: 0.06em;
color: var(--lt-navy);
line-height: 1.05;
}
.home-lede {
font-size: var(--fs-lg);
color: var(--lt-ink);
line-height: 1.4;
max-width: 30ch;
margin-top: 2px;
}
.home-tagline {
font-size: var(--fs-sm);
color: var(--lt-muted);
margin-bottom: var(--sp-3);
}
.home-content .btn {
align-self: flex-start;
padding: var(--sp-4) var(--sp-7);
font-size: var(--fs-lg);
border-radius: var(--r-lg);
}
.home-hint {
font-size: var(--fs-xs);
color: var(--lt-muted);
margin-top: var(--sp-3);
}
/* ==========================================================================
LANGUAGE PAGE — light
========================================================================== */
.scene--lang-light { padding: 0; position: relative; }
.lang-light-wrap {
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
padding: var(--sp-4) var(--sp-7) var(--sp-5);
min-height: 0;
}
.lang-back {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--lt-muted);
padding: 4px 8px;
border-radius: var(--r-sm);
transition: color var(--t-fast), background var(--t-fast);
}
.lang-back:hover { color: var(--lt-navy); background: rgba(13, 42, 97, 0.05); }
.lang-light-head { text-align: center; margin-top: var(--sp-1); }
.lang-light-head__title {
font-family: var(--ff-sans);
font-weight: var(--fw-bold);
font-size: 28px;
color: var(--lt-navy);
letter-spacing: 0.01em;
}
.lang-light-head__sub {
font-size: var(--fs-sm);
color: var(--lt-muted);
margin-top: 4px;
}
/* Card grid — 3 per row, white cards */
body.theme-light .lang-grid {
grid-template-columns: repeat(3, minmax(0, 220px));
justify-content: center;
gap: var(--sp-3);
margin: var(--sp-4) auto;
}
body.theme-light .lang-card {
background: var(--lt-white);
border: 1px solid var(--lt-border);
border-radius: var(--r-md);
box-shadow: 0 6px 16px rgba(13, 42, 97, 0.08);
color: var(--lt-ink);
padding: var(--sp-3) var(--sp-4);
}
body.theme-light .lang-card:hover {
border-color: var(--lt-soft);
box-shadow: 0 8px 22px rgba(13, 42, 97, 0.14);
}
body.theme-light .lang-card.is-selected {
border-color: var(--lt-navy);
background: #F2F7FC;
box-shadow: 0 0 0 2px rgba(13, 42, 97, 0.18), 0 8px 22px rgba(13, 42, 97, 0.16);
}
body.theme-light .lang-card__flag {
width: 30px;
height: 22px;
border-radius: 4px;
background: linear-gradient(180deg, #E8EFF6, #D6E3EF);
border: 1px solid var(--lt-border);
display: grid;
place-items: center;
font-size: 9px;
font-weight: var(--fw-bold);
color: var(--lt-muted);
}
.lang-light-foot {
margin-top: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-2);
}
.lang-light-foot__helper { font-size: var(--fs-xs); color: var(--lt-muted); }
.lang-light-foot .btn {
padding: var(--sp-4) var(--sp-8);
font-size: var(--fs-lg);
border-radius: var(--r-lg);
}
/* Reduced-motion: stop the disc float */
@media (prefers-reduced-motion: reduce) {
.mascot-disc { animation: none !important; }
}
/* ==========================================================================
STAGE 4 — PORTRAIT-FIRST MOBILE-APP LAYER
--------------------------------------------------------------------------
New primary direction. Scoped to `body.theme-portrait` so it doesn't
collide with the earlier landscape / theme-light layers (which remain
in this file in case the old pages need to be referenced again).
--------------------------------------------------------------------------
Targets: phones 360–440px wide, scales cleanly up to tablets (1280px).
Layout pattern: fixed bottom nav · scrollable stage · centered container.
========================================================================== */
body.theme-portrait {
/* Palette (light, friendly) */
--c-bg-deep: #E1EFF8;
--c-bg-mid: #FFFFFF;
--c-bg-soft: #F4F9FD;
--c-text: #1A2740;
--c-text-soft: #33425C;
--c-text-muted: #6B7B92;
--c-text-dim: #93A1B5;
--c-border: #DCE7F1;
--c-border-strong: #B9CEE2;
/* Portrait tokens */
--p-navy: #0D2A61;
--p-navy-deep: #08184A;
--p-soft-blue: #9CC4E4;
--p-sky-1: #C9E1F2;
--p-sky-2: #E1EFF8;
--p-disc: #FBF1C7;
--p-tape: #F5C518;
/* Layout */
--p-radius-card: 18px;
--p-radius-btn: 14px;
--p-radius-pill: 999px;
--p-shadow-card: 0 8px 22px rgba(13, 42, 97, 0.10);
--p-shadow-soft: 0 2px 8px rgba(13, 42, 97, 0.06);
--p-shadow-nav: 0 -6px 24px rgba(13, 42, 97, 0.10);
--p-nav-h: 72px;
--p-safe-bottom: env(safe-area-inset-bottom, 0px);
--p-safe-top: env(safe-area-inset-top, 0px);
/* Fluid container — phone full-width, tablet capped */
--p-container: min(100%, 480px);
font-family: var(--ff-sans);
background: var(--c-bg-deep);
color: var(--c-text);
overflow: auto; /* allow vertical scroll on portrait pages */
}
@media (min-width: 700px) { body.theme-portrait { --p-container: 540px; } }
@media (min-width: 1000px) { body.theme-portrait { --p-container: 600px; } }
/* Portrait pages skip the landscape rotate overlay */
body.theme-portrait .rotate-overlay { display: none !important; }
/* --------------------------------------------------------------------------
App shell — full-height vertical stack
-------------------------------------------------------------------------- */
.p-app {
position: relative;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
background:
linear-gradient(180deg, #D8ECF7 0%, var(--p-sky-2) 55%, #F4F9FD 100%);
isolation: isolate;
overflow: hidden;
}
/* --------------------------------------------------------------------------
Decorative Singapore skyline pinned to the bottom of the viewport.
- Mobile-first: the skyline spans the full width and hugs the bottom edge.
- The image width is capped on large screens so it stays centred and does
not become oversized; transparent sides simply blend into the sky.
- Height is derived from the rendered width (image aspect ~0.49) so the
full skyline is always visible with no building tops cropped.
Swap the file at assets/backgrounds/sg-skyline.png to change the artwork.
-------------------------------------------------------------------------- */
.p-app::before {
content: "";
position: fixed;
left: 0; right: 0; bottom: 0;
/* Full-bleed skyline: the image always spans the FULL viewport width and is
anchored flush to the bottom edge (no blank gap). Because the artwork is
trimmed to its edges, "100% width" means it grows larger as the screen
grows. Height tracks the image aspect (h/w ~= 0.41) so the whole skyline
stays visible, and is capped by viewport height so it can't swallow the
screen or overlap the hero on short/wide displays. */
height: min(41vw, 60vh);
min-height: 120px;
background-repeat: no-repeat;
background-position: bottom center;
background-size: 100% auto; /* stretch to full width, keep aspect */
background-image: url("../assets/backgrounds/sg-skyline.png");
opacity: 0.97;
pointer-events: none;
z-index: 0;
}
/* Optional police-tape strip at top of the viewport */
.p-tape {
position: relative;
z-index: 5;
flex-shrink: 0;
height: 14px;
background-image: repeating-linear-gradient(
-45deg,
#161616 0 12px,
var(--p-tape) 12px 24px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
/* --------------------------------------------------------------------------
Stage (scrollable content area)
-------------------------------------------------------------------------- */
.p-stage {
flex: 1;
position: relative;
z-index: 1;
padding: clamp(16px, 4vw, 28px);
padding-top: calc(clamp(16px, 4vw, 28px) + var(--p-safe-top));
padding-bottom: clamp(20px, 5vw, 36px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* When a page has the bottom nav, push content above it */
.p-app.has-nav .p-stage {
padding-bottom: calc(var(--p-nav-h) + var(--p-safe-bottom) + 24px);
}
/* --------------------------------------------------------------------------
Centered container — caps width on tablets
-------------------------------------------------------------------------- */
.p-container {
width: 100%;
max-width: var(--p-container);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: clamp(14px, 3.5vw, 22px);
}
/* --------------------------------------------------------------------------
Top header (greeting / page title row inside .p-container)
-------------------------------------------------------------------------- */
.p-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 4px;
}
.p-header__group { display: flex; flex-direction: column; gap: 2px; }
.p-greeting {
font-size: clamp(12px, 3.4vw, 14px);
color: var(--c-text-muted);
letter-spacing: 0.04em;
}
.p-page-title {
font-family: var(--ff-sans);
font-weight: var(--fw-bold);
font-size: clamp(22px, 6.5vw, 28px);
letter-spacing: 0.01em;
color: var(--p-navy);
line-height: 1.15;
}
.p-page-sub {
font-size: clamp(13px, 3.6vw, 15px);
color: var(--c-text-muted);
line-height: 1.45;
}
/* Avatar bubble (small mascot in header) */
.p-avatar {
width: clamp(44px, 11vw, 52px);
height: clamp(44px, 11vw, 52px);
border-radius: 50%;
background: radial-gradient(circle at 50% 35%, #FEF8DA 0%, var(--p-disc) 70%, #F3E4B0 100%);
display: grid;
place-items: center;
box-shadow: 0 6px 14px rgba(13, 42, 97, 0.18);
flex-shrink: 0;
}
.p-avatar img { width: 80%; height: 80%; object-fit: contain; }
/* --------------------------------------------------------------------------
Back link (used on language, scams, sub-pages)
-------------------------------------------------------------------------- */
.p-back {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: clamp(13px, 3.6vw, 14px);
font-weight: var(--fw-medium);
color: var(--c-text-muted);
padding: 6px 10px 6px 4px;
border-radius: var(--p-radius-pill);
align-self: flex-start;
transition: color var(--t-fast), background var(--t-fast);
}
.p-back:hover, .p-back:focus-visible {
color: var(--p-navy);
background: rgba(13, 42, 97, 0.05);
}
/* Grey top back links: show only the arrow, hide the text label. The link keeps
its aria-label for screen readers. In-lesson back buttons (.jspx-topback and
.p-btn--back) use different classes and keep their text. */
.p-back span:not([aria-hidden="true"]) {
display: none;
}
/* --------------------------------------------------------------------------
Cards
-------------------------------------------------------------------------- */
.p-card {
background: var(--c-bg-mid);
border: 1px solid var(--c-border);
border-radius: var(--p-radius-card);
padding: clamp(14px, 4vw, 20px);
box-shadow: var(--p-shadow-card);
}
.p-card--flush { padding: 0; overflow: hidden; }
/* Progress card (top of hub) */
.p-progress-card {
display: flex;
flex-direction: column;
gap: 10px;
}
.p-progress-card__row {
display: flex;
align-items: baseline;
justify-content: space-between;
}
.p-progress-card__label {
font-size: clamp(11px, 3.2vw, 13px);
font-weight: var(--fw-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-text-muted);
}
.p-progress-card__count {
font-size: clamp(20px, 5.5vw, 24px);
font-weight: var(--fw-bold);
color: var(--p-navy);
}
.p-progress-card__sub {
font-size: clamp(12px, 3.4vw, 13px);
color: var(--c-text-muted);
}
.p-progress-bar {
height: 10px;
background: #E1ECF6;
border-radius: var(--p-radius-pill);
overflow: hidden;
}
.p-progress-bar__fill {
height: 100%;
background: linear-gradient(90deg, var(--p-soft-blue), var(--p-navy));
border-radius: inherit;
transition: width 380ms ease;
}
/* --------------------------------------------------------------------------
Section title (small heading above lists)
-------------------------------------------------------------------------- */
.p-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin: 4px 2px 0;
}
.p-section-title {
font-size: clamp(13px, 3.6vw, 14px);
font-weight: var(--fw-bold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--p-navy);
}
.p-section-action {
font-size: clamp(11px, 3vw, 12px);
color: var(--c-text-muted);
font-weight: var(--fw-medium);
}
/* --------------------------------------------------------------------------
Module card (used in hub list)
-------------------------------------------------------------------------- */
.p-module-list {
display: flex;
flex-direction: column;
gap: clamp(10px, 2.6vw, 14px);
}
.p-module {
position: relative;
display: grid;
grid-template-columns: clamp(48px, 13vw, 56px) 1fr auto;
gap: clamp(12px, 3vw, 14px);
align-items: center;
background: var(--c-bg-mid);
border: 1px solid var(--c-border);
border-radius: var(--p-radius-card);
padding: clamp(12px, 3.5vw, 16px);
box-shadow: var(--p-shadow-card);
cursor: pointer;
transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
font: inherit;
color: inherit;
text-align: left;
width: 100%;
}
.p-module:hover:not([aria-disabled="true"]) {
transform: translateY(-1px);
border-color: var(--p-soft-blue);
box-shadow: 0 10px 26px rgba(13, 42, 97, 0.14);
}
.p-module.is-locked,
.p-module.is-soon { opacity: 0.7; cursor: not-allowed; }
/* Locked modules read as clearly greyed-out (not just dimmed) until the
module above them is completed. */
.p-module.is-locked { background: #EFF3F8; }
.p-module.is-locked .p-module__icon {
background: #E4E9F0;
color: #9AA7B8;
filter: grayscale(1);
}
.p-module.is-locked .p-module__title { color: #7C8A9C; }
.p-module.is-locked .p-module__desc { color: #9AA7B8; }
.p-module.is-locked .p-module__cta {
background: rgba(124, 138, 156, 0.12);
color: #9AA7B8;
}
.p-module__icon {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 14px;
background: linear-gradient(160deg, var(--p-sky-1), var(--p-sky-2));
display: grid;
place-items: center;
color: var(--p-navy);
}
.p-module__icon svg { width: 60%; height: 60%; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.p-module--active .p-module__icon {
background: linear-gradient(160deg, var(--p-navy), var(--p-navy-deep));
color: #FFFFFF;
}
.p-module__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.p-module__title {
font-size: clamp(14px, 3.8vw, 16px);
font-weight: var(--fw-semibold);
color: var(--c-text);
line-height: 1.2;
}
.p-module__desc {
font-size: clamp(11px, 3.2vw, 12.5px);
color: var(--c-text-muted);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.p-module__cta {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(13, 42, 97, 0.06);
color: var(--p-navy);
flex-shrink: 0;
}
.p-module--active .p-module__cta {
background: var(--p-navy);
color: #FFFFFF;
}
.p-module__cta svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p-module__badge {
position: absolute;
top: -8px; right: 12px;
font-size: 10px;
font-weight: var(--fw-bold);
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: var(--p-radius-pill);
background: var(--p-navy);
color: #FFFFFF;
box-shadow: 0 4px 10px rgba(13, 42, 97, 0.25);
}
.p-module__badge--soon {
background: #E1ECF6;
color: var(--c-text-muted);
box-shadow: none;
}
.p-module__badge--locked {
background: #E1ECF6;
color: var(--c-text-muted);
box-shadow: none;
}
/* --------------------------------------------------------------------------
Topic card (used in scams overview)
-------------------------------------------------------------------------- */
.p-topic-list { display: flex; flex-direction: column; gap: 8px; }
.p-topic {
display: grid;
grid-template-columns: clamp(34px, 9vw, 40px) 1fr auto;
gap: 12px;
align-items: center;
background: var(--c-bg-mid);
border: 1px solid var(--c-border);
border-radius: 14px;
padding: clamp(10px, 3vw, 14px) clamp(12px, 3.5vw, 16px);
box-shadow: var(--p-shadow-soft);
cursor: pointer;
font: inherit;
color: inherit;
text-align: left;
width: 100%;
transition: transform var(--t-fast), border-color var(--t-fast);
}
.p-topic:hover:not([aria-disabled="true"]) {
transform: translateY(-1px);
border-color: var(--p-soft-blue);
}
.p-topic.is-locked, .p-topic.is-soon { opacity: 0.55; cursor: not-allowed; }
.p-topic__num {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 10px;
background: linear-gradient(160deg, var(--p-sky-1), var(--p-sky-2));
display: grid;
place-items: center;
font-weight: var(--fw-bold);
font-size: clamp(13px, 3.6vw, 14px);
color: var(--p-navy);
}
.p-topic.is-available .p-topic__num,
.p-topic.is-progress .p-topic__num {
background: linear-gradient(160deg, var(--p-navy), var(--p-navy-deep));
color: #FFFFFF;
}
.p-topic__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-topic__name {
font-size: clamp(13px, 3.6vw, 15px);
font-weight: var(--fw-semibold);
color: var(--c-text);
}
.p-topic__meta {
font-size: clamp(11px, 3vw, 12px);
color: var(--c-text-muted);
}
.p-topic__chevron {
width: 18px; height: 18px;
color: var(--c-text-dim);
}
.p-topic__chevron svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p-badge {
font-size: 9.5px;
font-weight: var(--fw-bold);
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: var(--p-radius-pill);
background: #E1ECF6;
color: var(--c-text-muted);
flex-shrink: 0;
}
.p-badge--available { background: rgba(13, 42, 97, 0.10); color: var(--p-navy); }
.p-badge--progress { background: rgba(245, 197, 24, 0.18); color: #8a6a06; }
/* --------------------------------------------------------------------------
Buttons (portrait)
-------------------------------------------------------------------------- */
.p-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: clamp(13px, 3.6vw, 16px) clamp(20px, 5vw, 28px);
border-radius: var(--p-radius-btn);
font-family: var(--ff-sans);
font-size: clamp(14px, 4vw, 16px);
font-weight: var(--fw-semibold);
border: 1px solid transparent;
cursor: pointer;
transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.p-btn:active { transform: translateY(1px); }
.p-btn--block { display: flex; width: 100%; }
.p-btn--navy {
background: var(--p-navy);
color: #FFFFFF;
box-shadow: 0 8px 20px rgba(13, 42, 97, 0.25);
}
.p-btn--navy:hover { background: var(--p-navy-deep); }
.p-btn--soft {
background: var(--p-soft-blue);
color: #FFFFFF;
box-shadow: 0 8px 20px rgba(156, 196, 228, 0.45);
}
.p-btn--soft:hover { background: #88B6DD; }
.p-btn--outline {
background: transparent;
color: var(--p-navy);
border-color: var(--p-navy);
}
.p-btn--outline:hover { background: rgba(13, 42, 97, 0.06); }
.p-btn--ghost {
background: transparent;
color: var(--p-navy);
}
.p-btn--ghost:hover { background: rgba(13, 42, 97, 0.06); }
.p-btn[disabled], .p-btn.is-disabled { opacity: 0.5; pointer-events: none; }
/* --------------------------------------------------------------------------
Bottom navigation bar
-------------------------------------------------------------------------- */
.bottom-nav {
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 20;
background: var(--c-bg-mid);
border-top: 1px solid var(--c-border);
box-shadow: var(--p-shadow-nav);
padding: 8px 8px calc(8px + var(--p-safe-bottom));
}
.bottom-nav__inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
max-width: 600px;
margin: 0 auto;
}
.bottom-nav__item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px 4px;
color: var(--c-text-muted);
font-size: clamp(10px, 2.8vw, 11px);
font-weight: var(--fw-medium);
border-radius: 12px;
transition: color var(--t-fast), background var(--t-fast);
min-height: 56px;
justify-content: center;
}
.bottom-nav__item:hover:not(.is-disabled) {
color: var(--p-navy);
background: rgba(13, 42, 97, 0.05);
}
.bottom-nav__item.is-active {
color: var(--p-navy);
background: rgba(13, 42, 97, 0.08);
}
.bottom-nav__item.is-disabled { opacity: 0.5; cursor: not-allowed; }
.bottom-nav__icon {
width: 22px; height: 22px;
display: grid; place-items: center;
}
.bottom-nav__icon svg {
width: 100%; height: 100%;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.bottom-nav__item.is-active .bottom-nav__icon svg { stroke-width: 2.2; }
/* --------------------------------------------------------------------------
Landing-specific (hero block)
-------------------------------------------------------------------------- */
.p-hero {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: clamp(20px, 6vw, 36px) clamp(8px, 3vw, 16px);
gap: clamp(16px, 4vw, 22px);
}
.p-hero__mascot {
width: clamp(180px, 50vw, 240px);
aspect-ratio: 1 / 1;
border-radius: 50%;
background: radial-gradient(circle at 50% 38%, #FEF8DA 0%, var(--p-disc) 70%, #F3E4B0 100%);
display: grid;
place-items: center;
box-shadow:
0 0 0 10px rgba(251, 241, 199, 0.45),
0 20px 44px rgba(13, 42, 97, 0.18);
animation: pDiscFloat 6s ease-in-out infinite;
}
.p-hero__mascot img {
width: 84%; height: 84%; object-fit: contain;
filter: drop-shadow(0 8px 14px rgba(13, 42, 97, 0.22));
}
.p-hero__title {
font-family: var(--ff-sans);
font-weight: var(--fw-bold);
font-size: clamp(28px, 8vw, 36px);
letter-spacing: 0.05em;
color: var(--p-navy);
line-height: 1.05;
}
.p-hero__lede {
font-size: clamp(13px, 3.8vw, 15px);
color: var(--c-text-soft);
max-width: 32ch;
line-height: 1.5;
}
.p-hero__tag {
font-size: clamp(11px, 3.2vw, 13px);
color: var(--c-text-muted);
}
.p-hero__cta { width: 100%; max-width: 320px; margin-top: 4px; }
@keyframes pDiscFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
.p-hero__mascot { animation: none !important; }
}
/* --------------------------------------------------------------------------
Language selection (portrait)
-------------------------------------------------------------------------- */
.p-lang-list { display: flex; flex-direction: column; gap: 18px; }
.p-lang {
display: flex;
align-items: center;
gap: 14px;
background: var(--c-bg-mid);
border: 1.5px solid var(--c-border);
border-radius: 14px;
padding: clamp(12px, 3.4vw, 16px);
font: inherit;
color: var(--c-text);
text-align: left;
cursor: pointer;
width: 100%;
transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
box-shadow: var(--p-shadow-soft);
}
.p-lang:hover { border-color: var(--p-soft-blue); }
.p-lang.is-selected {
border-color: var(--p-navy);
background: #F1F6FB;
box-shadow: 0 0 0 2px rgba(13, 42, 97, 0.18), 0 8px 18px rgba(13, 42, 97, 0.12);
}
.p-lang__flag {
width: 38px;
height: 28px;
border-radius: 5px;
border: 1px solid var(--c-border);
overflow: hidden;
display: block;
flex-shrink: 0;
}
.lang-flag-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.p-lang__name {
font-size: clamp(14px, 3.8vw, 15px);
font-weight: var(--fw-semibold);
}
.p-lang__check {
margin-left: auto;
width: 22px; height: 22px;
border-radius: 50%;
border: 2px solid var(--c-border-strong);
display: grid; place-items: center;
color: transparent;
flex-shrink: 0;
}
.p-lang.is-selected .p-lang__check {
background: var(--p-navy);
border-color: var(--p-navy);
color: #FFFFFF;
font-size: 12px;
font-weight: var(--fw-bold);
}
/* --------------------------------------------------------------------------
Mascot tip block (used on hub / scams)
-------------------------------------------------------------------------- */
.p-tip {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.75);
border: 1px dashed var(--c-border-strong);
border-radius: 14px;
backdrop-filter: blur(4px);
}
.p-tip__mascot {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--p-disc);
display: grid; place-items: center;
flex-shrink: 0;
box-shadow: 0 4px 10px rgba(13, 42, 97, 0.10);
}
.p-tip__mascot img { width: 86%; height: 86%; object-fit: contain; }
.p-tip__text {
font-size: clamp(12px, 3.4vw, 13px);
color: var(--c-text-soft);
line-height: 1.4;
}
.p-tip__text strong { color: var(--p-navy); }
/* --------------------------------------------------------------------------
Scams intro card
-------------------------------------------------------------------------- */
.p-intro-card {
background: var(--c-bg-mid);
border-radius: var(--p-radius-card);
padding: clamp(14px, 4vw, 20px);
box-shadow: var(--p-shadow-card);
display: flex;
flex-direction: column;
gap: 8px;
border: 1px solid var(--c-border);
}
.p-intro-card__eyebrow {
font-size: 10px;
font-weight: var(--fw-bold);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--p-soft-blue);
}
.p-intro-card__title {
font-size: clamp(15px, 4.4vw, 17px);
font-weight: var(--fw-bold);
color: var(--p-navy);
}
.p-intro-card__body {
font-size: clamp(12px, 3.4vw, 14px);
color: var(--c-text-muted);
line-height: 1.5;
}
/* --------------------------------------------------------------------------
Footnote line
-------------------------------------------------------------------------- */
.p-foot {
text-align: center;
font-size: clamp(10px, 2.8vw, 12px);
color: var(--c-text-muted);
padding: 8px 4px 0;
}
/* ==========================================================================
STAGE 5 — SCAMS MODULE TRAIL (icon trail + popup)
--------------------------------------------------------------------------
New layout for scams.html: a vertical icon trail with a mascot beside it,
and a navy popup that anchors below whichever icon is tapped. Each icon
represents one scam sub-topic; tapping reveals "what to expect" + START.
========================================================================== */
/* ---- Navy section header (Module 1 · Section X · Topic) ---- */
.scam-head {
background: var(--p-navy);
color: #FFFFFF;
border-radius: 14px;
padding: 14px 18px;
box-shadow: 0 10px 22px rgba(13, 42, 97, 0.20);
display: flex;
flex-direction: column;
gap: 2px;
}
.scam-head__crumb {
font-size: clamp(11px, 3.2vw, 12px);
font-weight: var(--fw-medium);
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.78);
}
.scam-head__title {
font-size: clamp(17px, 5vw, 20px);
font-weight: var(--fw-bold);
line-height: 1.15;
letter-spacing: 0.01em;
}
/* ---- Trail container ---- */
.scam-trail {
position: relative;
padding: clamp(20px, 5vw, 32px) clamp(8px, 3vw, 16px) 12px;
min-height: 56vh;
display: flex;
flex-direction: column;
align-items: center;
}
.scam-trail__list {
display: flex;
flex-direction: column;
gap: clamp(22px, 5vw, 30px);
width: 100%;
align-items: center;
position: relative;
z-index: 1;
}
/* Mascot positioned to the right of the trail */
.scam-trail__mascot {
position: absolute;
right: clamp(8px, 5vw, 28px);
top: clamp(140px, 32vw, 220px);
width: clamp(96px, 26vw, 132px);
aspect-ratio: 1 / 1;
border-radius: 50%;
display: grid;
place-items: center;
pointer-events: none;
filter: drop-shadow(0 12px 22px rgba(13, 42, 97, 0.18));
z-index: 0;
transition: top 320ms var(--t-ease-out, ease);
}
.scam-trail__mascot img { width: 100%; height: 100%; object-fit: contain; }
/* ---- Trail icon (each scam subtopic) ---- */
.scam-icon {
position: relative;
width: clamp(58px, 15vw, 72px);
height: clamp(58px, 15vw, 72px);
border-radius: 50%;
border: 0;
cursor: pointer;
display: grid;
place-items: center;
background: linear-gradient(160deg, #D7E4EF, #BFD2E5);
color: #6E7E94;
box-shadow: 0 8px 16px rgba(13, 42, 97, 0.12), inset 0 -3px 0 rgba(0,0,0,0.06);
transition: transform 180ms var(--t-ease-out, ease), box-shadow 180ms ease, background 180ms ease;
font: inherit;
}
.scam-icon:hover:not(.is-locked):not(.is-active) { transform: translateY(-2px); }
.scam-icon svg {
width: 56%;
height: 56%;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.scam-icon.is-active {
background: linear-gradient(160deg, var(--p-navy), var(--p-navy-deep));
color: #FFFFFF;
box-shadow: 0 12px 22px rgba(13, 42, 97, 0.35), inset 0 -3px 0 rgba(0,0,0,0.18);
transform: scale(1.05);
}
.scam-icon.is-locked {
background: linear-gradient(160deg, #C7CFD9, #B0BAC5);
color: #7A8392;
opacity: 0.85;
cursor: not-allowed;
}
/* Soft zigzag — alternate icons offset left / right slightly */
.scam-icon:nth-child(odd) { transform: translateX(clamp(-28px, -8vw, -18px)); }
.scam-icon:nth-child(even) { transform: translateX(clamp(18px, 8vw, 28px)); }
.scam-icon.is-active { /* override translate while active so the popup arrow lines up */
transform: scale(1.05);
}
/* Vertical connector behind icons (subtle dotted line) */
.scam-trail__list::before {
content: "";
position: absolute;
top: 12px; bottom: 12px;
left: 50%;
width: 2px;
background-image: linear-gradient(180deg, rgba(13, 42, 97, 0.22) 50%, transparent 50%);
background-size: 2px 8px;
background-repeat: repeat-y;
z-index: -1;
}
/* ---- Popup (anchored below an active icon) ---- */
.scam-popup {
position: relative;
margin: 4px clamp(20px, 8vw, 40px) 8px;
width: calc(100% - 2 * clamp(20px, 8vw, 40px));
background: var(--p-navy);
color: #FFFFFF;
border-radius: 14px;
padding: 18px 18px 16px;
box-shadow: 0 14px 30px rgba(13, 42, 97, 0.30);
text-align: center;
animation: scamPopIn 240ms var(--t-ease-out, ease);
}
.scam-popup::before {
content: "";
position: absolute;
top: -7px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px;
height: 14px;
background: var(--p-navy);
border-radius: 2px;
}
.scam-popup__text {
font-size: clamp(12.5px, 3.6vw, 14px);
line-height: 1.45;
color: #E1EFF8;
}
.scam-popup__btn {
margin-top: 14px;
width: 100%;
padding: 12px 24px;
background: var(--p-soft-blue);
color: #FFFFFF;
font-weight: var(--fw-bold);
font-size: clamp(13px, 3.8vw, 15px);
letter-spacing: 0.10em;
border: 0;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 6px 14px rgba(156, 196, 228, 0.40);
transition: background 160ms ease, transform 120ms ease;
}
.scam-popup__btn:hover { background: #88B6DD; }
.scam-popup__btn:active { transform: translateY(1px); }
.scam-popup__btn.is-disabled { background: rgba(255,255,255,0.20); cursor: not-allowed; }
@keyframes scamPopIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.scam-popup { animation: none !important; }
.scam-icon { transition: none !important; }
}
/* ==========================================================================
STAGE 6 — JOB SCAM PORTRAIT FLOW
--------------------------------------------------------------------------
Components used only by job-scam.html. Sits inside body.theme-portrait
so all the existing layout tokens (--p-navy, --p-soft-blue, etc.) apply.
Namespaced `.jspx-*` (Job Scam Portrait eXperience) so nothing collides
with the earlier landscape `.jsm-*` classes (left intact for reference).
========================================================================== */
/* ---- Page / step show-hide ---- */
.jspx-page { display: none; flex-direction: column; flex: 1; gap: clamp(14px, 3.5vw, 18px); }
.jspx-page.is-active { display: flex; animation: jspxFadeIn 280ms ease-out; }
@keyframes jspxFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .jspx-page.is-active { animation: none !important; } }
/* ---- Shared page header (chip + title + progress) ---- */
.jspx-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.jspx-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--p-navy);
color: #FFFFFF;
font-size: clamp(11px, 3.2vw, 13px);
font-weight: var(--fw-semibold);
letter-spacing: 0.04em;
padding: 6px 14px;
border-radius: var(--p-radius-pill);
box-shadow: 0 6px 14px rgba(13, 42, 97, 0.18);
}
.jspx-pagetitle {
font-family: var(--ff-sans);
font-weight: var(--fw-bold);
font-size: clamp(22px, 6vw, 28px);
color: var(--c-text);
letter-spacing: 0.01em;
}
.jspx-pbar {
width: 100%;
height: 12px;
background: var(--c-bg-mid);
border: 1px solid var(--c-border);
border-radius: var(--p-radius-pill);
overflow: hidden;
box-shadow: var(--p-shadow-soft);
}
.jspx-pbar__fill {
height: 100%;
background: linear-gradient(90deg, var(--p-soft-blue), var(--p-navy));
border-radius: inherit;
transition: width 420ms ease;
}
.jspx-pbar__label {
font-size: clamp(10px, 2.8vw, 12px);
color: var(--c-text-muted);
text-align: right;
margin-top: 4px;
align-self: stretch;
}
/* ============ Screen 1 — INTRO ============ */
.jspx-intro-card {
position: relative;
background: linear-gradient(160deg, var(--p-navy), var(--p-navy-deep));
color: #FFFFFF;
border-radius: var(--p-radius-card);
padding: 18px 20px;
box-shadow: 0 12px 26px rgba(13, 42, 97, 0.22);
display: grid;
grid-template-columns: 48px 1fr 64px;
gap: 12px;
align-items: center;
}
.jspx-intro-card__icon {
width: 48px; height: 48px;
border-radius: 12px;
background: rgba(255,255,255,0.12);
display: grid; place-items: center;
}
.jspx-intro-card__icon svg { width: 56%; height: 56%; stroke: #FFFFFF; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jspx-intro-card__title {
font-size: clamp(15px, 4.4vw, 17px);
font-weight: var(--fw-bold);
margin-bottom: 4px;
}
.jspx-intro-card__body {
font-size: clamp(12px, 3.4vw, 13.5px);
line-height: 1.45;
color: rgba(255,255,255,0.88);
}
.jspx-intro-card__mascot {
width: 64px; height: 64px;
border-radius: 50%;
background: var(--p-disc);
display: grid; place-items: center;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.20);
}
.jspx-intro-card__mascot img { width: 86%; height: 86%; object-fit: contain; }
.jspx-learn {
background: var(--c-bg-mid);
border: 1px solid var(--c-border);
border-radius: var(--p-radius-card);
padding: 16px 18px;
box-shadow: var(--p-shadow-card);
}
.jspx-learn__title {
font-size: clamp(15px, 4.2vw, 17px);
font-weight: var(--fw-bold);
color: var(--c-text);
margin-bottom: 10px;
}
.jspx-learn__list {
display: flex;
flex-direction: column;
gap: 8px;
}
.jspx-learn__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 10px;
border-radius: 10px;
background: #F4F8FC;
font-size: clamp(12px, 3.4vw, 14px);
color: var(--c-text);
}
.jspx-learn__check {
width: 22px; height: 22px;
border-radius: 50%;
background: var(--p-navy);
color: #FFFFFF;
display: grid; place-items: center;
flex-shrink: 0;
font-size: 12px;
font-weight: var(--fw-bold);
}
/* ============ Screen 2 — POSTER ============ */
.jspx-poster {
background: var(--c-bg-mid);
border: 1px solid var(--c-border);
border-radius: var(--p-radius-card);
padding: 8px;
box-shadow: var(--p-shadow-card);
display: grid;
place-items: center;
overflow: hidden;
}
.jspx-poster__img {
width: 100%;
height: auto;
max-height: 60vh;
object-fit: contain;
border-radius: 12px;
display: block;
}
.jspx-poster__fallback {
width: 100%;
min-height: 320px;
display: grid;
place-items: center;
color: var(--c-text-muted);
font-size: var(--fs-sm);
text-align: center;
padding: 24px;
border: 2px dashed var(--c-border-strong);
border-radius: 12px;
background: var(--c-bg-soft);
}
/* ============ Screen 3 — SCENARIO ============ */
.jspx-scenario-card {
background: var(--c-bg-mid);
border: 1px solid var(--c-border);
border-radius: var(--p-radius-card);
padding: clamp(20px, 5vw, 28px);
box-shadow: var(--p-shadow-card);
font-size: clamp(14px, 4vw, 16px);
color: var(--c-text);
line-height: 1.55;
white-space: pre-line;
text-align: left;
margin-top: 8px;
}
/* MOM / verification tip callout — appears on "How it happens" screen */
.jspx-tip-card {
background: #EEF4FF;
border: 1.5px solid var(--p-soft-blue);
border-left: 4px solid var(--p-navy);
border-radius: var(--p-radius-card);
padding: 12px 16px;
font-size: clamp(13px, 3.8vw, 15px);
color: var(--c-text);
line-height: 1.5;
margin-top: 4px;
}
.jspx-tip-card:empty { display: none; }
/* ============ Screen 4 — INTERACTIVE MESSAGE ============ */
/* The chat screen fills most of the stage and overrides the container width.
It uses its own dark-edge chat look (green header + doodle bg + bubble). */
.jspx-chat {
background: var(--c-bg-mid);
border-radius: var(--p-radius-card);
overflow: hidden;
box-shadow: var(--p-shadow-card);
display: flex;
flex-direction: column;
min-height: 60vh;
position: relative;
isolation: isolate;
}
.jspx-chat__top {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: #128C7E; /* WhatsApp-style teal */
color: #FFFFFF;
flex-shrink: 0;
}
.jspx-chat__back { color: #FFFFFF; font-size: 18px; line-height: 1; padding: 4px; }
.jspx-chat__avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.25); flex-shrink: 0; }
.jspx-chat__name { font-weight: var(--fw-semibold); font-size: clamp(13px, 3.8vw, 15px); flex: 1; min-width: 0; }
.jspx-chat__actions { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,0.9); }
.jspx-chat__body {
flex: 1;
padding: clamp(14px, 4vw, 20px) clamp(12px, 4vw, 18px);
position: relative;
background-color: #E5DDD5;
/* Soft doodle pattern (kept abstract to stay light + avoid copying brand art) */
background-image:
radial-gradient(circle at 12% 18%, rgba(13, 42, 97, 0.06) 0 6px, transparent 7px),
radial-gradient(circle at 70% 25%, rgba(13, 42, 97, 0.05) 0 4px, transparent 5px),
radial-gradient(circle at 32% 60%, rgba(13, 42, 97, 0.05) 0 5px, transparent 6px),
radial-gradient(circle at 85% 72%, rgba(13, 42, 97, 0.06) 0 5px, transparent 6px),
radial-gradient(circle at 45% 88%, rgba(13, 42, 97, 0.04) 0 4px, transparent 5px),
radial-gradient(circle at 18% 80%, rgba(13, 42, 97, 0.05) 0 3px, transparent 4px),
radial-gradient(circle at 90% 12%, rgba(13, 42, 97, 0.04) 0 3px, transparent 4px);
background-size: 240px 240px;
background-repeat: repeat;
}
.jspx-chat__bubble {
background: #FFFFFF;
border-radius: 4px 12px 12px 12px;
padding: 12px 14px;
max-width: 86%;
box-shadow: 0 1px 2px rgba(0,0,0,0.12);
color: #1F2933;
display: flex;
flex-direction: column;
gap: 6px;
font-size: clamp(13px, 3.6vw, 14px);
line-height: 1.5;
}
.jspx-chat__line { display: block; }
.jspx-chat__line--bold { font-weight: var(--fw-semibold); }
/* Tappable hotspot — appears inline within a message line */
.jspx-hot {
display: inline;
background: rgba(13, 42, 97, 0.06);
border-bottom: 1.5px dashed rgba(13, 42, 97, 0.55);
color: inherit;
padding: 2px 4px;
border-radius: 4px;
cursor: pointer;
font: inherit;
transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
-webkit-tap-highlight-color: transparent;
}
.jspx-hot:hover, .jspx-hot:focus-visible {
background: rgba(13, 42, 97, 0.14);
border-color: var(--p-navy);
outline: none;
}
.jspx-hot.is-found {
background: rgba(13, 42, 97, 0.16);
border-bottom-style: solid;
color: var(--p-navy);
font-weight: var(--fw-semibold);
cursor: default;
}
.jspx-hot.is-found::after {
content: " ✓";
font-weight: var(--fw-bold);
color: var(--p-navy);
}
/* Floating instruction panel + mascot near bottom of chat */
.jspx-panel {
position: absolute;
left: clamp(12px, 4vw, 20px);
right: clamp(12px, 4vw, 20px);
bottom: clamp(70px, 18vw, 110px);
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: center;
background: var(--c-bg-mid);
border-radius: 12px;
padding: 10px 14px;
box-shadow: 0 6px 18px rgba(13, 42, 97, 0.18);
z-index: 3;
}
.jspx-panel__title {
font-size: clamp(12px, 3.4vw, 13px);
font-weight: var(--fw-semibold);
color: var(--c-text);
}
.jspx-panel__sub {
font-size: clamp(11px, 3vw, 12px);
color: var(--c-text-muted);
margin-top: 2px;
}
.jspx-panel__count {
font-size: clamp(16px, 4.6vw, 18px);
font-weight: var(--fw-bold);
color: var(--p-navy);
white-space: nowrap;
}
.jspx-chat__mascot {
position: absolute;
right: 12px;
bottom: 8px;
width: clamp(74px, 22vw, 110px);
aspect-ratio: 1 / 1;
z-index: 4;
filter: drop-shadow(0 6px 14px rgba(0,0,0,0.2));
pointer-events: none;
}
.jspx-chat__mascot img { width: 100%; height: 100%; object-fit: contain; }
/* The Continue button area below the chat (sits in the page container) */
.jspx-chat-foot {
display: flex;
flex-direction: column;
gap: 8px;
align-items: stretch;
margin-top: 4px;
}
.jspx-chat-foot__hint {
text-align: center;
font-size: clamp(11px, 3vw, 12px);
color: var(--c-text-muted);
}
/* ============ Screen 5 — WARNING SIGN MODAL ============ */
.jspx-modal {
position: fixed;
inset: 0;
z-index: 100;
display: none;
align-items: center;
justify-content: center;
padding: clamp(16px, 5vw, 24px);
background: rgba(9, 17, 28, 0.45);
backdrop-filter: blur(3px);
}
.jspx-modal.is-open { display: flex; animation: jspxModalIn 220ms ease-out; }
@keyframes jspxModalIn { from { opacity: 0; } to { opacity: 1; } }
.jspx-modal__card {
width: 100%;
max-width: 440px;
background: var(--c-bg-mid);
border-radius: var(--p-radius-card);
padding: clamp(16px, 4.5vw, 22px);
box-shadow: 0 20px 50px rgba(0,0,0,0.30);
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
animation: jspxCardPop 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes jspxCardPop { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.jspx-modal__top {
display: flex;
align-items: flex-start;
gap: 12px;
}
.jspx-modal__mascot {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--p-disc);
display: grid;
place-items: center;
flex-shrink: 0;
box-shadow: 0 4px 10px rgba(13, 42, 97, 0.12);
}
.jspx-modal__mascot img { width: 86%; height: 86%; object-fit: contain; }
.jspx-modal__topbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.jspx-modal__chip {
align-self: flex-start;
background: var(--p-navy);
color: #FFFFFF;
font-size: 10px;
font-weight: var(--fw-bold);
letter-spacing: 0.06em;
padding: 3px 9px;
border-radius: var(--p-radius-pill);
}
.jspx-modal__label {
font-size: 11px;
font-weight: var(--fw-semibold);
color: var(--c-text-muted);
letter-spacing: 0.04em;
margin-top: 2px;
}
.jspx-modal__title {
font-size: clamp(16px, 4.5vw, 18px);
font-weight: var(--fw-bold);
color: var(--c-text);
line-height: 1.25;
}
.jspx-modal__body {
font-size: clamp(13px, 3.6vw, 14px);
color: var(--c-text-soft);
line-height: 1.55;
}
.jspx-modal__tip {
border: 1.5px dashed var(--c-border-strong);
border-radius: 10px;
padding: 10px 12px;
background: #F4F8FC;
}
.jspx-modal__tipLabel {
font-size: 11px;
font-weight: var(--fw-bold);
letter-spacing: 0.06em;
color: var(--p-navy);
}
.jspx-modal__tipText {
font-size: clamp(12px, 3.4vw, 13.5px);
color: var(--c-text);
margin-top: 3px;
line-height: 1.45;
}
.jspx-modal__progress {
font-size: 11px;
color: var(--c-text-muted);
text-align: center;
}
.jspx-modal__pbar {
height: 6px;
background: #E1ECF6;
border-radius: var(--p-radius-pill);
overflow: hidden;
margin-top: 4px;
}
.jspx-modal__pbar-fill {
height: 100%;
background: linear-gradient(90deg, var(--p-soft-blue), var(--p-navy));
border-radius: inherit;
transition: width 320ms ease;
}
.jspx-modal__btn {
padding: 12px 20px;
background: var(--p-navy);
color: #FFFFFF;
border: 0;
border-radius: 12px;
font-size: clamp(13px, 3.8vw, 15px);
font-weight: var(--fw-semibold);
cursor: pointer;
box-shadow: 0 6px 14px rgba(13, 42, 97, 0.25);
transition: background 160ms ease, transform 100ms ease;
}
.jspx-modal__btn:hover { background: var(--p-navy-deep); }
.jspx-modal__btn:active { transform: translateY(1px); }
/* ============ Screen 6 — DECISION ============ */
.jspx-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.jspx-option {
background: var(--c-bg-mid);
border: 2px solid var(--c-border);
border-radius: 14px;
padding: 12px 14px;
display: grid;
grid-template-columns: 32px 1fr 24px;
gap: 12px;
align-items: center;
cursor: pointer;
font: inherit;
color: inherit;
text-align: left;
width: 100%;
box-shadow: var(--p-shadow-soft);
transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.jspx-option:hover:not(.is-disabled) { border-color: var(--p-soft-blue); }
.jspx-option__letter {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--p-navy);
color: #FFFFFF;
display: grid; place-items: center;
font-weight: var(--fw-bold);
font-size: 14px;
flex-shrink: 0;
}
.jspx-option__body { min-width: 0; display: flex; flex-direction: column; }
.jspx-option__title {
font-size: clamp(13px, 3.6vw, 14.5px);
font-weight: var(--fw-semibold);
color: var(--c-text);
line-height: 1.25;
}
.jspx-option__sub {
font-size: clamp(11px, 3vw, 12px);
color: var(--c-text-muted);
margin-top: 2px;
}
.jspx-option__radio {
width: 20px; height: 20px;
border-radius: 50%;
border: 2px solid var(--c-border-strong);
background: var(--c-bg-mid);
flex-shrink: 0;
position: relative;
transition: background 160ms ease, border-color 160ms ease;
}
.jspx-option.is-selected { border-color: var(--p-navy); background: #F1F6FB; box-shadow: 0 0 0 2px rgba(13,42,97,0.15); }
.jspx-option.is-selected .jspx-option__radio { background: var(--p-navy); border-color: var(--p-navy); }
.jspx-option.is-selected .jspx-option__radio::after {
content: ""; position: absolute; inset: 4px;
background: #FFFFFF; border-radius: 50%;
}
.jspx-option.is-correct { border-color: #2C9B58; background: #ECF7F0; }
.jspx-option.is-correct .jspx-option__letter { background: #2C9B58; }
.jspx-option.is-wrong { border-color: #C7424E; background: #FBECEE; }
.jspx-option.is-wrong .jspx-option__letter { background: #C7424E; }
.jspx-option.is-disabled { cursor: not-allowed; opacity: 0.92; }
/* ============ Screen 7 — OUTCOME ============ */
.jspx-outcome {
display: flex;
flex-direction: column;
gap: 16px;
}
.jspx-outcome__title {
text-align: center;
font-family: var(--ff-sans);
font-weight: var(--fw-bold);
font-size: clamp(22px, 6vw, 26px);
color: var(--p-navy);
}
.jspx-outcome__title--wrong { color: #C7424E; }
.jspx-outcome__card {
background: var(--c-bg-mid);
border: 1px solid var(--c-border);
border-radius: var(--p-radius-card);
padding: clamp(16px, 4.5vw, 20px);
box-shadow: var(--p-shadow-card);
display: flex;
flex-direction: column;
gap: 8px;
}
.jspx-outcome__cardTitle {
font-size: clamp(15px, 4.2vw, 16px);
font-weight: var(--fw-bold);
color: var(--p-navy);
}
.jspx-outcome__cardBody {
font-size: clamp(13px, 3.6vw, 14px);
color: var(--c-text-soft);
line-height: 1.55;
white-space: pre-line;
}
.jspx-outcome__speech {
display: grid;
grid-template-columns: clamp(70px, 22vw, 90px) 1fr;
gap: 10px;
align-items: center;
}
.jspx-speech-mascot {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: var(--p-disc);
display: grid;
place-items: center;
box-shadow: 0 6px 14px rgba(13, 42, 97, 0.15);
}
.jspx-speech-mascot img { width: 86%; height: 86%; object-fit: contain; }
.jspx-speech-bubble {
background: var(--c-bg-mid);
border: 1px solid var(--c-border);
border-radius: 14px;
padding: 12px 14px;
font-size: clamp(12.5px, 3.5vw, 14px);
color: var(--c-text);
line-height: 1.45;
position: relative;
box-shadow: var(--p-shadow-soft);
}
.jspx-speech-bubble::before {
content: "";
position: absolute;
left: -8px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 14px; height: 14px;
background: var(--c-bg-mid);
border-left: 1px solid var(--c-border);
border-bottom: 1px solid var(--c-border);
}
/* ============ Screen 8 — PREVENTION MEASURES ============ */
.jspx-measures {
display: flex;
flex-direction: column;
gap: clamp(12px, 3vw, 16px);
}
.jspx-measure {
background: var(--c-bg-mid);
border: 1px solid var(--c-border);
border-radius: var(--p-radius-card);
padding: clamp(14px, 4vw, 18px);
box-shadow: var(--p-shadow-card);
}
.jspx-measure__head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.jspx-measure__num {
width: 30px; height: 30px;
flex-shrink: 0;
border-radius: 50%;
background: var(--p-navy);
color: #FFFFFF;
display: grid; place-items: center;
font-weight: var(--fw-bold);
font-size: 13px;
}
.jspx-measure__title {
font-size: clamp(14px, 4vw, 16px);
font-weight: var(--fw-bold);
color: var(--c-text);
}
.jspx-measure__body {
font-size: clamp(13px, 3.6vw, 14px);
line-height: 1.55;
color: var(--c-text);
}
/* Highlighted key phrases inside the measure body */
.jspx-measure__body b {
color: #2B8FD6;
font-weight: var(--fw-semibold);
}
/* ============ Screen 9 — COMPLETION ============ */
.jspx-complete {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(12px, 3.2vw, 16px);
}
.jspx-wordmark {
font-family: var(--ff-sans);
font-weight: var(--fw-bold);
font-size: clamp(24px, 7vw, 30px);
letter-spacing: 0.08em;
color: var(--p-navy);
text-align: center;
}
.jspx-complete__chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--p-navy);
color: #FFFFFF;
font-size: clamp(11px, 3.2vw, 13px);
font-weight: var(--fw-semibold);
padding: 6px 14px;
border-radius: var(--p-radius-pill);
box-shadow: 0 6px 14px rgba(13, 42, 97, 0.18);
}
/* White title card with the 100% progress bar */
.jspx-titlecard {
width: 100%;
background: var(--c-bg-mid);
border: 1px solid var(--c-border);
border-radius: var(--p-radius-card);
padding: 14px 18px;
box-shadow: var(--p-shadow-card);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
box-sizing: border-box;
overflow: hidden;
min-width: 0;
}
.jspx-titlecard__title {
font-size: clamp(15px, 4.2vw, 22px);
font-weight: var(--fw-bold);
color: var(--c-text);
white-space: normal;
word-break: break-word;
overflow-wrap: break-word;
min-width: 0;
flex-shrink: 1;
}
.jspx-titlecard__bar {
flex: 1;
height: 8px;
background: #E1ECF6;
border-radius: var(--p-radius-pill);
overflow: hidden;
}
.jspx-titlecard__fill {
height: 100%;
background: linear-gradient(90deg, var(--p-soft-blue), var(--p-navy));
border-radius: inherit;
}
.jspx-titlecard__pct {
font-size: 11px;
color: var(--c-text-muted);
white-space: nowrap;
}
/* Navy "Job Scam Completed!" card with icon + mascot */
.jspx-complete-card {
width: 100%;
background: linear-gradient(160deg, var(--p-navy), var(--p-navy-deep));
color: #FFFFFF;
border-radius: var(--p-radius-card);
padding: 18px 20px;
box-shadow: 0 12px 26px rgba(13, 42, 97, 0.22);
display: grid;
grid-template-columns: 48px 1fr 64px;
gap: 12px;
align-items: center;
}
.jspx-complete-card__icon {
width: 48px; height: 48px;
border-radius: 12px;
background: rgba(255,255,255,0.12);
display: grid; place-items: center;
}
.jspx-complete-card__icon svg { width: 56%; height: 56%; stroke: #FFFFFF; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jspx-complete-card__title {
font-size: clamp(16px, 4.6vw, 19px);
font-weight: var(--fw-bold);
line-height: 1.2;
}
.jspx-complete-card__mascot {
width: 64px; height: 64px;
border-radius: 50%;
background: var(--p-disc);
display: grid; place-items: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.20);
}
.jspx-complete-card__mascot img { width: 88%; height: 88%; object-fit: contain; }
/* ==========================================================================
INTERACTIVE POSTER — hotspot zones + bottom-sheet modal
Namespace: .jspx-zone*, .jspx-poster-modal*
Scoped to theme-portrait pages.
========================================================================== */
/* --------------------------------------------------------------------------
Poster frame — wraps the ![]()
and positions zones absolutely on top
-------------------------------------------------------------------------- */
.jspx-poster__frame {
position: relative;
display: block;
border-radius: 12px;
overflow: hidden;
/* Slight recede when a zone is active — matches lift effect */
transition: transform 300ms cubic-bezier(0.18, 1.2, 0.4, 1),
filter 300ms ease;
}
.jspx-poster__frame.has-active {
transform: scale(0.984);
filter: brightness(0.97);
}
.jspx-poster__frame img {
display: block;
width: 100%;
height: auto;
}
/* --------------------------------------------------------------------------
Hotspot zone buttons
-------------------------------------------------------------------------- */
.jspx-zone {
position: absolute;
background: transparent;
border: 2px dashed transparent;
border-radius: 8px;
cursor: pointer;
padding: 0;
/* spring easing for the lift */
transition: transform 260ms cubic-bezier(0.18, 1.2, 0.4, 1),
box-shadow 260ms ease,
border-color 180ms ease,
background 180ms ease,
opacity 200ms ease;
z-index: 2;
}
/* Active (currently open in modal) — lifts forward */
.jspx-zone.is-active {
border-color: var(--p-navy, #0D2A61);
border-style: solid;
background: rgba(13, 42, 97, 0.08);
transform: scale(1.025);
box-shadow:
0 0 0 3px rgba(13, 42, 97, 0.18),
0 8px 24px rgba(13, 42, 97, 0.18);
z-index: 4;
}
/* Dimmed siblings when another zone is active */
.jspx-zone.is-dimmed { opacity: 0.45; }
/* Primed — burst has played, waiting for second tap; zone itself stays invisible */
.jspx-zone.is-primed {
border-color: transparent;
background: transparent;
}
.jspx-zone.is-primed .jspx-zone__cta {
background: rgba(13, 42, 97, 0.92);
animation: ctaBlink 1s ease-in-out infinite; /* faster pulse = more urgent */
}
/* Explored — hotspot box invisible, only the "↺ Read again" CTA shows */
.jspx-zone.is-found:not(.is-active):not(.is-dimmed) {
pointer-events: auto;
border-color: transparent;
background: transparent;
box-shadow: none;
opacity: 1;
}
/* When the modal is open for this zone, full highlight */
.jspx-zone.is-found.is-active {
opacity: 1;
pointer-events: auto;
border-color: #4ADE80;
box-shadow:
0 0 0 3px rgba(74, 222, 128, 0.22),
0 8px 24px rgba(74, 222, 128, 0.14);
}
/* --------------------------------------------------------------------------
Pulse indicator badge in the corner of each zone
-------------------------------------------------------------------------- */
.jspx-zone__pulse {
position: absolute;
top: 6px;
right: 6px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--p-navy, #0D2A61);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
pointer-events: none;
box-shadow: 0 0 0 0 rgba(13, 42, 97, 0.55);
animation: zonePulse 2.4s ease-in-out infinite;
}
.jspx-zone.is-found .jspx-zone__pulse {
display: none;
}
@keyframes zonePulse {
0% { box-shadow: 0 0 0 0 rgba(13, 42, 97, 0.55); }
65% { box-shadow: 0 0 0 9px rgba(13, 42, 97, 0); }
100% { box-shadow: 0 0 0 0 rgba(13, 42, 97, 0); }
}
/* --------------------------------------------------------------------------
Instruction banner above the poster
-------------------------------------------------------------------------- */
.jspx-poster-hint {
display: flex;
align-items: center;
gap: 8px;
font-size: clamp(12px, 3.2vw, 13px);
color: var(--c-text-muted, #6B7B92);
background: rgba(13, 42, 97, 0.05);
border: 1px solid var(--c-border, #DCE7F1);
border-radius: 12px;
padding: 10px 14px;
line-height: 1.45;
}
.jspx-poster-hint__icon {
font-size: 16px;
flex-shrink: 0;
}
/* --------------------------------------------------------------------------
Progress row (below poster, above Continue)
-------------------------------------------------------------------------- */
.jspx-poster__progress {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: clamp(12px, 3.2vw, 13px);
color: var(--c-text-muted, #6B7B92);
padding: 2px 2px;
}
.jspx-poster__progress-count {
font-weight: 700;
font-size: clamp(13px, 3.6vw, 15px);
color: var(--p-navy, #0D2A61);
}
/* --------------------------------------------------------------------------
Bottom-sheet modal (slides up from bottom)
-------------------------------------------------------------------------- */
.jspx-poster-modal {
position: fixed;
inset: 0;
z-index: 60;
display: none;
align-items: flex-end;
background: rgba(13, 42, 97, 0.32);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.jspx-poster-modal.is-open {
display: flex;
animation: pmBackdropIn 220ms ease forwards;
}
@keyframes pmBackdropIn {
from { background: rgba(13, 42, 97, 0); }
to { background: rgba(13, 42, 97, 0.32); }
}
.jspx-poster-modal__sheet {
width: 100%;
max-width: var(--p-container, 480px);
margin: 0 auto;
background: #ffffff;
border-radius: 24px 24px 0 0;
padding: 16px 18px calc(20px + var(--p-safe-bottom, 0px));
max-height: 80vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: 0 -8px 32px rgba(13, 42, 97, 0.16);
animation: pmSheetUp 300ms cubic-bezier(0.18, 1.2, 0.4, 1) forwards;
}
@keyframes pmSheetUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
/* Drag handle */
.jspx-poster-modal__handle {
width: 36px;
height: 4px;
background: var(--c-border, #DCE7F1);
border-radius: 99px;
margin: 0 auto 2px;
flex-shrink: 0;
}
/* Eyebrow chip (section number + label) */
.jspx-poster-modal__eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #ffffff;
background: var(--p-navy, #0D2A61);
padding: 4px 12px;
border-radius: 99px;
align-self: flex-start;
}
/* Main title */
.jspx-poster-modal__title {
font-size: clamp(18px, 5vw, 21px);
font-weight: 700;
color: var(--p-navy, #0D2A61);
line-height: 1.2;
margin: 0;
}
/* Info blocks (How / Trap / Outcome) */
.jspx-poster-modal__block {
display: flex;
flex-direction: column;
gap: 5px;
padding: 12px 14px;
border-radius: 12px;
background: var(--c-bg-soft, #F4F9FD);
border-left: 3px solid var(--c-border, #DCE7F1);
}
.jspx-poster-modal__block--trap {
background: #FFFBEC;
border-left-color: #F5C518;
}
.jspx-poster-modal__block--outcome {
background: #FFF5F5;
border-left-color: #EF5350;
}
.jspx-poster-modal__block-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--c-text-muted, #6B7B92);
}
.jspx-poster-modal__block--trap .jspx-poster-modal__block-label { color: #8a6a06; }
.jspx-poster-modal__block--outcome .jspx-poster-modal__block-label { color: #b71c1c; }
.jspx-poster-modal__block-text {
font-size: clamp(13px, 3.5vw, 14px);
color: var(--c-text, #1A2740);
line-height: 1.5;
margin: 0;
}
/* Red-flag warning chips */
.jspx-poster-modal__flags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.jspx-poster-modal__flag {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: clamp(10px, 2.8vw, 11px);
font-weight: 600;
color: #b71c1c;
background: rgba(239, 83, 80, 0.09);
border: 1px solid rgba(239, 83, 80, 0.28);
border-radius: 99px;
padding: 4px 10px;
}
.jspx-poster-modal__flag::before {
content: "⚠";
font-size: 9px;
opacity: 0.85;
}
/* Mascot tip row */
.jspx-poster-modal__tip {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
background: rgba(13, 42, 97, 0.05);
border: 1px solid var(--c-border, #DCE7F1);
border-radius: 12px;
}
.jspx-poster-modal__tip-mascot {
width: 38px;
height: 38px;
border-radius: 50%;
background: radial-gradient(circle at 50% 35%, #FEF8DA, #FBF1C7 70%);
display: grid;
place-items: center;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(13, 42, 97, 0.12);
}
.jspx-poster-modal__tip-mascot img {
width: 82%;
height: 82%;
object-fit: contain;
}
.jspx-poster-modal__tip-text {
font-size: clamp(12px, 3.2vw, 13px);
color: var(--c-text-soft, #33425C);
line-height: 1.5;
margin: 0;
padding-top: 2px;
}
/* Footer: prev/next + close */
.jspx-poster-modal__foot {
display: flex;
align-items: center;
gap: 10px;
padding-top: 2px;
}
.jspx-poster-modal__nav {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.jspx-poster-modal__nav-btn {
width: 42px;
height: 42px;
border-radius: 50%;
border: 1.5px solid var(--c-border, #DCE7F1);
background: #ffffff;
color: var(--p-navy, #0D2A61);
display: grid;
place-items: center;
font-size: 17px;
cursor: pointer;
flex-shrink: 0;
transition: background 150ms ease, border-color 150ms ease;
font-family: inherit;
}
.jspx-poster-modal__nav-btn:hover:not(:disabled) {
background: var(--c-bg-soft, #F4F9FD);
border-color: var(--p-navy, #0D2A61);
}
.jspx-poster-modal__nav-btn:disabled { opacity: 0.32; cursor: not-allowed; }
.jspx-poster-modal__foot .p-btn { flex: 1; }
/* --------------------------------------------------------------------------
"Tap me" CTA pill — centered in each zone, pulses until explored
-------------------------------------------------------------------------- */
.jspx-zone__cta {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: rgba(13, 42, 97, 0.82);
color: #ffffff;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 99px;
pointer-events: none;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(13, 42, 97, 0.32);
animation: ctaBlink 2s ease-in-out infinite;
}
/* While active (modal open) hide CTA */
.jspx-zone.is-active .jspx-zone__cta { display: none; }
/* Found — keep the same "Tap me" pill appearance */
.jspx-zone.is-found:not(.is-active) .jspx-zone__cta {
/* no overrides — inherits default .jspx-zone__cta styles unchanged */
}
@keyframes ctaBlink {
0%, 100% { opacity: 0.92; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 0.42; transform: translate(-50%, -50%) scale(0.91); }
}
/* --------------------------------------------------------------------------
Burst particles — emoji that pop outward from zone center on first tap
Uses position:fixed to escape .jspx-poster__frame overflow:hidden
-------------------------------------------------------------------------- */
.jspx-burst-obj {
position: fixed;
pointer-events: none;
z-index: 9999;
font-size: 22px;
line-height: 1;
will-change: transform, opacity;
opacity: 0;
animation: burstPop 950ms cubic-bezier(0.18, 1.2, 0.4, 1) var(--delay, 0ms) forwards;
}
@keyframes burstPop {
0% {
transform: translate(-50%, -50%) scale(0.15) rotate(0deg);
opacity: 1;
}
55% {
transform:
translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px)))
scale(1.25)
rotate(var(--rot, 20deg));
opacity: 1;
}
100% {
transform:
translate(calc(-50% + var(--tx, 0px) * 1.6), calc(-50% + var(--ty, 0px) * 1.6))
scale(0.5)
rotate(var(--rot, 20deg));
opacity: 0;
}
}
/* --------------------------------------------------------------------------
Reduced-motion: disable spring + pulse animations
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.jspx-zone,
.jspx-poster__frame,
.jspx-poster-modal__sheet { animation: none !important; transition: none !important; }
.jspx-zone__pulse,
.jspx-zone__cta,
.jspx-burst-obj { animation: none !important; }
}
/* End of file */
/* ==========================================================================
MINI-GAME SCREENS (jspx-game-*)
--------------------------------------------------------------------------
All game components live in body.theme-portrait context (light palette).
========================================================================== */
/* ── Shared wrapper ── */
.jspx-game { display: flex; flex-direction: column; gap: 14px; }
/* ── Shared intro card ── */
.jspx-game-intro {
background: var(--c-bg-mid);
border-radius: var(--p-radius-card);
padding: 28px 20px 24px;
text-align: center;
box-shadow: var(--p-shadow-card);
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
}
.jspx-game-intro__icon { font-size: 52px; line-height: 1; }
.jspx-game-intro__title {
font-size: clamp(15px, 4.4vw, 17px);
font-weight: var(--fw-bold);
color: var(--c-text);
line-height: 1.3;
}
.jspx-game-intro__sub {
font-size: clamp(12px, 3.5vw, 14px);
color: var(--c-text-muted);
line-height: 1.5;
}
/* ── Shared result card ── */
.jspx-game-result {
background: var(--c-bg-mid);
border-radius: var(--p-radius-card);
padding: 16px 18px;
box-shadow: var(--p-shadow-card);
}
.jspx-game-result--correct { border-left: 4px solid #2C9B58; }
.jspx-game-result--wrong { border-left: 4px solid #C7424E; }
.jspx-game-result__title {
font-weight: var(--fw-bold);
font-size: clamp(14px, 4vw, 16px);
margin-bottom: 8px;
}
.jspx-game-result__title--correct { color: #2C9B58; }
.jspx-game-result__title--wrong { color: #C7424E; }
.jspx-game-result__body {
font-size: clamp(12px, 3.4vw, 13px);
color: var(--c-text-muted);
line-height: 1.6;
margin-bottom: 10px;
}
.jspx-game-result__flags { display: flex; flex-direction: column; gap: 6px; }
.jspx-game-result__flag {
font-size: clamp(11px, 3.2vw, 12px);
background: rgba(13,42,97,0.06);
padding: 6px 10px;
border-radius: 8px;
color: var(--c-text);
}
/* ==========================================================================
1. SPOT THE FAKE — Phishing (two SMS cards)
========================================================================== */
.jspx-sms-pair { display: flex; flex-direction: column; gap: 12px; }
.jspx-sms-card {
background: var(--c-bg-mid);
border-radius: var(--p-radius-card);
border: 2px solid var(--c-border);
padding: 14px;
cursor: pointer;
transition: border-color 140ms ease, box-shadow 140ms ease, transform 100ms ease;
box-shadow: var(--p-shadow-card);
position: relative;
-webkit-tap-highlight-color: transparent;
}
.jspx-sms-card:active { transform: scale(0.985); }
.jspx-sms-card__label {
font-size: 10px; font-weight: var(--fw-bold);
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--c-text-muted); margin-bottom: 8px;
}
.jspx-sms-card__header {
display: flex; align-items: center; gap: 9px;
padding-bottom: 10px; margin-bottom: 10px;
border-bottom: 1px solid var(--c-border);
}
.jspx-sms-card__icon {
width: 34px; height: 34px; border-radius: 8px;
background: var(--p-navy); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: var(--fw-bold); flex-shrink: 0;
}
.jspx-sms-card__sender { font-weight: var(--fw-semibold); font-size: 13px; color: var(--c-text); flex: 1; }
.jspx-sms-card__time { font-size: 10px; color: var(--c-text-muted); }
.jspx-sms-card__body { font-size: clamp(12px, 3.4vw, 13px); color: var(--c-text-soft); line-height: 1.55; }
.jspx-sms-card__line { display: block; }
.jspx-sms-card__link { color: #1a6fc4; text-decoration: underline; word-break: break-all; }
.jspx-sms-card__badge {
position: absolute; top: 10px; right: 12px;
font-size: 20px; line-height: 1;
}
.jspx-sms-card.is-selected { border-color: var(--p-navy); box-shadow: 0 0 0 3px rgba(13,42,97,0.14); }
.jspx-sms-card.is-correct { border-color: #2C9B58; background: #ECF7F0; pointer-events: none; }
.jspx-sms-card.is-wrong { border-color: #C7424E; background: #FBECEE; pointer-events: none; }
.jspx-sms-card.is-disabled { pointer-events: none; }
/* ==========================================================================
2. BUY OR BYE — E-Commerce (marketplace listing)
========================================================================== */
.jspx-listing {
background: var(--c-bg-mid);
border-radius: var(--p-radius-card);
padding: 16px;
box-shadow: var(--p-shadow-card);
}
.jspx-listing__emoji { font-size: 52px; text-align: center; margin-bottom: 12px; line-height: 1; }
.jspx-listing__title { font-size: clamp(14px, 4.2vw, 16px); font-weight: var(--fw-bold); color: var(--c-text); margin-bottom: 4px; }
.jspx-listing__price { font-size: clamp(20px, 5.5vw, 24px); font-weight: var(--fw-bold); color: #C7424E; margin-bottom: 10px; }
.jspx-listing__divider { height: 1px; background: var(--c-border); margin: 10px 0; }
.jspx-listing__meta { display: flex; flex-direction: column; gap: 5px; }
.jspx-listing__row { display: flex; align-items: center; gap: 8px; font-size: clamp(12px, 3.3vw, 13px); color: var(--c-text-muted); }
.jspx-listing__row-icon { flex-shrink: 0; font-size: 14px; }
.jspx-listing__row-label { color: var(--c-text-soft); }
.jspx-listing__seller-msg {
margin-top: 12px;
background: rgba(199,66,78,0.08);
border-radius: 8px; padding: 8px 12px;
font-size: 12px; color: #C7424E; font-style: italic;
}
.jspx-listing-chat { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.jspx-listing-chat__bubble {
background: #E8F5E9;
border-radius: 4px 12px 12px 12px;
padding: 8px 12px; max-width: 88%;
font-size: 13px; color: #1A2740;
box-shadow: 0 1px 3px rgba(0,0,0,0.10);
line-height: 1.45;
}
.jspx-game-opts { display: flex; flex-direction: column; gap: 8px; }
/* Game option buttons have no letter element — override to 2-col layout */
.jspx-game-opts .jspx-option,
.jspx-chat-reply .jspx-option,
.jspx-options--game .jspx-option {
grid-template-columns: 1fr 24px;
}
/* ==========================================================================
3. CHAT CHOICE — Love Scam (WhatsApp reply options)
========================================================================== */
.jspx-chat-reply { display: flex; flex-direction: column; gap: 8px; }
.jspx-chat-reply__label {
text-align: center; font-size: 12px;
color: var(--c-text-muted); font-style: italic;
}
/* ==========================================================================
4. CALL RESPONSE — Gov Official (call screen)
========================================================================== */
.jspx-call {
border-radius: 20px; overflow: hidden;
box-shadow: 0 8px 28px rgba(13,42,97,0.22);
}
.jspx-call__top {
background: linear-gradient(170deg, #2C3E72 0%, #0D2A61 100%);
padding: 28px 20px 22px;
display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.jspx-call__avatar {
width: 70px; height: 70px; border-radius: 50%;
background: rgba(255,255,255,0.15);
display: flex; align-items: center; justify-content: center;
font-size: 30px;
border: 2px solid rgba(255,255,255,0.22);
}
.jspx-call__name { color: #fff; font-size: clamp(16px, 4.6vw, 19px); font-weight: var(--fw-bold); }
.jspx-call__status { color: rgba(255,255,255,0.6); font-size: 12px; }
.jspx-call__status--ringing { animation: callBlink 1.5s ease-in-out infinite; }
@keyframes callBlink { 0%,100%{opacity:.6} 50%{opacity:1;color:#4ADE80} }
.jspx-call__transcript {
background: #0A1628; padding: 14px 16px;
display: flex; flex-direction: column; gap: 8px;
}
.jspx-call__line {
font-size: clamp(12px, 3.4vw, 13px); color: rgba(255,255,255,0.85);
line-height: 1.55; padding-left: 14px; position: relative;
}
.jspx-call__line::before { content:"›"; position:absolute; left:0; color:rgba(255,255,255,0.38); }
/* ==========================================================================
5. PROFILE DETECTIVE — Social Media (two profile cards)
========================================================================== */
.jspx-profile-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jspx-profile-card {
background: var(--c-bg-mid);
border-radius: var(--p-radius-card);
border: 2px solid var(--c-border);
padding: 14px 10px 12px;
cursor: pointer;
transition: border-color 140ms ease, transform 100ms ease;
box-shadow: var(--p-shadow-card);
display: flex; flex-direction: column; align-items: center; gap: 5px;
text-align: center;
-webkit-tap-highlight-color: transparent;
}
.jspx-profile-card:active { transform: scale(0.97); }
.jspx-profile-card__avatar {
width: 50px; height: 50px; border-radius: 50%;
background: linear-gradient(135deg, var(--p-sky-1), var(--p-soft-blue));
display: flex; align-items: center; justify-content: center;
font-size: 22px; margin-bottom: 4px;
}
.jspx-profile-card__name { font-weight: var(--fw-bold); font-size: clamp(11px,3.2vw,13px); color: var(--c-text); }
.jspx-profile-card__username { font-size: 10px; color: var(--c-text-muted); word-break: break-all; margin-bottom: 4px; }
.jspx-profile-card__stat {
font-size: 10px; color: var(--c-text-muted);
background: var(--c-bg-soft); border-radius: 4px; padding: 3px 6px;
width: 100%; text-align: center;
}
.jspx-profile-card__msg { font-size: 11px; color: #C7424E; font-style: italic; margin-top: 4px; }
.jspx-profile-card.is-selected { border-color: var(--p-navy); box-shadow: 0 0 0 3px rgba(13,42,97,0.14); }
.jspx-profile-card.is-correct { border-color: #2C9B58; background: #ECF7F0; pointer-events: none; }
.jspx-profile-card.is-wrong { border-color: #C7424E; background: #FBECEE; pointer-events: none; }
.jspx-profile-card.is-disabled { pointer-events: none; }
.jspx-profile-card__badge {
position: absolute; font-size: 18px;
top: 8px; right: 8px;
}
/* ==========================================================================
6. WHATSAPP WEB LOGIN — Social Media Game 2 (fake browser frame)
========================================================================== */
.jspx-browser { border-radius: 16px; overflow: hidden; box-shadow: 0 6px 22px rgba(13,42,97,0.14); }
.jspx-browser__bar {
background: #F0F0F0; padding: 8px 10px;
display: flex; align-items: center; gap: 8px;
border-bottom: 1px solid #E0E0E0;
}
.jspx-browser__dots { display: flex; gap: 5px; align-items: center; }
.jspx-browser__dot { width: 9px; height: 9px; border-radius: 50%; }
.jspx-browser__dot:nth-child(1) { background: #FF5F57; }
.jspx-browser__dot:nth-child(2) { background: #FEBC2E; }
.jspx-browser__dot:nth-child(3) { background: #28C840; }
.jspx-browser__url {
flex: 1; background: #E4E4E4; border-radius: 5px;
padding: 4px 10px; font-size: 11px; font-family: monospace;
color: #C7424E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jspx-browser__lock { font-size: 11px; color: #C7424E; }
.jspx-browser__content {
background: #fff; padding: 22px 18px;
display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
.jspx-browser__wa-logo {
width: 58px; height: 58px; border-radius: 14px;
background: #25D366;
display: flex; align-items: center; justify-content: center;
font-size: 30px; color: #fff;
}
.jspx-browser__wa-title { font-size: 16px; font-weight: 700; color: #111; }
.jspx-browser__wa-msg { font-size: 13px; color: #555; line-height: 1.5; }
.jspx-browser__qr {
width: 80px; height: 80px;
background: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%) 0 0 / 10px 10px;
border-radius: 4px; border: 3px solid #000; opacity: 0.8;
}
.jspx-browser__cta-btn {
background: #25D366; color: #fff;
border: none; border-radius: 24px;
padding: 10px 28px; font-size: 14px; font-weight: 700;
width: 100%; cursor: default; pointer-events: none;
}
.jspx-browser__warning {
font-size: 11px; color: #C7424E;
background: rgba(199,66,78,0.08);
border-radius: 6px; padding: 5px 10px; width: 100%; text-align: center;
}
.jspx-game-question {
text-align: center; font-weight: var(--fw-semibold);
color: var(--p-navy); font-size: clamp(13px,3.8vw,15px);
}
/* ==========================================================================
7. CARD SORT — Loan Scam (safe-or-scam sorting)
========================================================================== */
.jspx-sort { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.jspx-sort__progress {
font-size: 12px; color: var(--c-text-muted);
font-weight: var(--fw-semibold); align-self: flex-end;
}
.jspx-sort-card {
background: var(--c-bg-mid);
border-radius: var(--p-radius-card);
border: 2px solid var(--c-border);
padding: 22px 18px;
box-shadow: var(--p-shadow-card);
text-align: center; width: 100%;
font-size: clamp(13px,3.8vw,15px);
font-weight: var(--fw-medium); color: var(--c-text); line-height: 1.55;
min-height: 90px; display: flex; align-items: center; justify-content: center;
transition: transform 220ms ease, opacity 220ms ease;
}
@keyframes sortSlideLeft { to { transform:translateX(-110%); opacity:0; } }
@keyframes sortSlideRight { to { transform:translateX(110%); opacity:0; } }
.jspx-sort-card.anim-safe { animation: sortSlideRight 240ms ease forwards; }
.jspx-sort-card.anim-scam { animation: sortSlideLeft 240ms ease forwards; }
.jspx-sort-btns {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%;
}
.jspx-sort-btn {
padding: 14px 8px; border-radius: var(--p-radius-btn);
font-size: clamp(14px,4vw,16px); font-weight: var(--fw-bold);
border: 2px solid transparent; cursor: pointer;
transition: background 140ms ease, transform 100ms ease;
-webkit-tap-highlight-color: transparent;
}
.jspx-sort-btn:active { transform: scale(0.94); }
.jspx-sort-btn--safe { background:#ECF7F0; color:#2C9B58; border-color:#2C9B58; }
.jspx-sort-btn--safe:hover { background:#D4EFE0; }
.jspx-sort-btn--scam { background:#FBECEE; color:#C7424E; border-color:#C7424E; }
.jspx-sort-btn--scam:hover { background:#F5D6D9; }
.jspx-sort-feedback {
background: var(--c-bg-mid); border-radius: 10px;
padding: 12px 15px; font-size: clamp(12px,3.4vw,13px);
line-height: 1.55; width: 100%; box-shadow: var(--p-shadow-soft);
}
.jspx-sort-feedback--correct { border-left: 3px solid #2C9B58; }
.jspx-sort-feedback--wrong { border-left: 3px solid #C7424E; }
.jspx-sort__final {
background: var(--p-navy); color: #fff;
border-radius: var(--p-radius-card); padding: 22px 18px;
text-align: center; width: 100%;
}
.jspx-sort__score { font-size: 32px; font-weight: var(--fw-bold); margin-bottom: 8px; }
.jspx-sort__final-body { font-size: 13px; line-height: 1.6; opacity: 0.9; }
.jspx-sort__reminder {
margin-top: 12px; font-size: 12px; opacity: 0.75;
border-top: 1px solid rgba(255,255,255,0.18); padding-top: 12px;
}
/* ==========================================================================
8. TELEGRAM CHAT THEME (Job Scam — Tap the Red Flags)
========================================================================== */
.jspx-chat--telegram .jspx-chat__top { background: #2AABEE; }
.jspx-chat--telegram .jspx-chat__body {
background-color: #DAE8F0;
background-image:
radial-gradient(circle at 12% 18%, rgba(42,171,238,0.08) 0 6px, transparent 7px),
radial-gradient(circle at 70% 30%, rgba(42,171,238,0.06) 0 4px, transparent 5px),
radial-gradient(circle at 35% 65%, rgba(42,171,238,0.06) 0 5px, transparent 6px),
radial-gradient(circle at 85% 70%, rgba(42,171,238,0.07) 0 5px, transparent 6px);
background-size: 240px 240px; background-repeat: repeat;
}
.jspx-chat--telegram .jspx-chat__bubble {
border-radius: 4px 14px 14px 14px;
}
.jspx-chat--telegram .jspx-chat__channel-tag {
display: inline-flex; align-items: center; gap: 5px
background: rgba(42,171,238,0.12); color: #1a7ab5;
border-radius: 4px; padding: 2px 7px; font-size: 10px; font-weight: 700;
}
/* ==========================================================================
9. IMMERSIVE GAME SHELLS
========================================================================== */
/* ── PHONE MESSAGES SHELL (Phishing — Spot the Fake) ── */
.jspx-phone-shell {
border-radius: 22px; overflow: hidden;
box-shadow: 0 8px 28px rgba(13,42,97,0.16);
border: 2px solid #d0d7de; background: #fff;
}
.jspx-phone-shell__status {
background: #f7f7f7;
display: flex; justify-content: space-between; align-items: center;
padding: 7px 16px 4px;
font-size: 11px; font-weight: 700; color: #111;
}
.jspx-phone-shell__nav {
background: #f7f7f7; border-bottom: 1px solid #e5e5e5;
display: flex; align-items: center; justify-content: space-between;
padding: 6px 14px 8px;
}
.jspx-phone-shell__nav-back { color: #007AFF; font-size: 14px; font-weight: 500; }
.jspx-phone-shell__nav-title { font-size: 16px; font-weight: 700; color: #111; }
.jspx-phone-shell__nav-edit { color: #007AFF; font-size: 14px; font-weight: 500; }
.jspx-phone-shell__body { background: #fff; }
.jspx-sms-thread {
display: flex; align-items: flex-start; gap: 12px;
padding: 13px 16px; cursor: pointer;
border-bottom: 1px solid #f0f0f0;
transition: background 150ms ease;
-webkit-tap-highlight-color: transparent;
position: relative;
}
.jspx-sms-thread:last-child { border-bottom: none; }
.jspx-sms-thread:active { background: rgba(0,0,0,0.04); }
.jspx-sms-thread__icon {
width: 46px; height: 46px; border-radius: 50%;
background: var(--p-navy); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 800; flex-shrink: 0; letter-spacing: -0.5px;
}
.jspx-sms-thread__content { flex: 1; min-width: 0; }
.jspx-sms-thread__top {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 3px;
}
.jspx-sms-thread__sender { font-weight: 700; font-size: 14px; color: #111; }
.jspx-sms-thread__time { font-size: 11px; color: #aaa; }
.jspx-sms-thread__preview {
font-size: 13px; color: #666; line-height: 1.4;
overflow: hidden; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.jspx-sms-thread__preview-link { color: #007AFF; }
.jspx-sms-thread__badge {
position: absolute; top: 50%; right: 16px;
transform: translateY(-50%); font-size: 20px; display: none;
}
.jspx-sms-thread.is-correct { background: #ECF7F0; pointer-events: none; }
.jspx-sms-thread.is-correct .jspx-sms-thread__badge { display: block; color: #2C9B58; }
.jspx-sms-thread.is-wrong { background: #FBECEE; pointer-events: none; }
.jspx-sms-thread.is-wrong .jspx-sms-thread__badge { display: block; color: #C7424E; }
.jspx-sms-thread.is-disabled { pointer-events: none; }
/* ── SHOP APP (E-Commerce — Buy or Bye) ── */
.jspx-shop {
border-radius: var(--p-radius-card); overflow: hidden;
box-shadow: var(--p-shadow-card); border: 1.5px solid var(--c-border);
}
.jspx-shop__header {
background: linear-gradient(120deg, #FF6B35 0%, #FF8C42 100%);
display: flex; align-items: center; gap: 8px; padding: 10px 14px;
}
.jspx-shop__logo { font-size: 20px; }
.jspx-shop__name { color: #fff; font-weight: 700; font-size: 15px; flex: 1; }
.jspx-shop__search-icon { color: #fff; font-size: 17px; opacity: 0.85; }
.jspx-shop__product { background: #fff; padding: 14px 14px 0; }
.jspx-shop__img-box {
background: linear-gradient(145deg, #f3f6fa 0%, #e9ecf0 100%);
border-radius: 12px; height: 120px;
display: flex; align-items: center; justify-content: center;
font-size: 58px; margin-bottom: 12px;
}
.jspx-shop__title { font-size: 14px; font-weight: 700; color: #1a2740; line-height: 1.4; margin-bottom: 4px; }
.jspx-shop__price { font-size: 26px; font-weight: 800; color: #E02020; margin-bottom: 6px; }
.jspx-shop__stars { font-size: 13px; color: #aaa; margin-bottom: 8px; }
.jspx-shop__divider { height: 1px; background: #f0f0f0; margin: 8px 0; }
.jspx-shop__seller-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.jspx-shop__seller-name { font-size: 13px; color: #333; font-weight: 600; }
.jspx-shop__unverified-badge {
font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
background: #FFF3CD; color: #856404; border: 1px solid #FFDEA0;
}
.jspx-shop__meta-row { font-size: 12px; color: #777; margin-bottom: 4px; display: flex; align-items: center; gap: 5px; }
.jspx-shop__seller-msg {
margin-top: 8px; padding: 8px 10px;
background: #FFF8E7; border-left: 3px solid #FFB800;
border-radius: 0 8px 8px 0;
font-size: 12px; color: #664D00; font-style: italic; line-height: 1.5;
}
.jspx-shop__actions {
background: #fff; padding: 12px 14px 14px;
border-top: 1px solid #f0f0f0;
display: flex; flex-direction: column; gap: 8px;
}
.jspx-shop__btn {
width: 100%; padding: 13px; border-radius: 10px;
border: none; font-size: 14px; font-weight: 700; cursor: pointer;
transition: transform 120ms ease, opacity 150ms ease;
-webkit-tap-highlight-color: transparent;
}
.jspx-shop__btn:active { transform: scale(0.97); }
.jspx-shop__btn--buy { background: #FF6B35; color: #fff; }
.jspx-shop__btn--ask { background: #EEF2FF; color: #1a4db8; border: 1.5px solid #C0CCF8; }
.jspx-shop__btn--avoid { background: var(--p-navy); color: #fff; }
.jspx-shop__btn.is-disabled { opacity: 0.5; pointer-events: none; }
.jspx-shop-chat { padding: 10px 14px 14px; background: #f7f7f7; display: flex; flex-direction: column; gap: 8px; }
.jspx-shop-chat__label { font-size: 10px; color: #888; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.jspx-shop-chat__bubble {
background: #E8F5E9; border-radius: 4px 12px 12px 12px;
padding: 8px 12px; max-width: 88%;
font-size: 12px; color: #1a4022; line-height: 1.5;
}
/* ── PHONE CALL SCREEN (Gov Official — Call Response) ── */
.jspx-callscreen {
border-radius: 22px; overflow: hidden;
box-shadow: 0 12px 36px rgba(0,0,0,0.22);
background: linear-gradient(165deg, #1C2B4A 0%, #0A1628 100%);
}
.jspx-callscreen__status-bar {
display: flex; justify-content: space-between;
padding: 8px 16px 2px;
font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.55);
}
.jspx-callscreen__label {
text-align: center; padding: 4px 0 0;
font-size: 12px; color: rgba(255,255,255,0.5);
font-weight: 500; letter-spacing: 0.05em;
}
.jspx-callscreen__avatar-wrap {
display: flex; justify-content: center;
padding: 16px 0 8px; position: relative;
}
@keyframes callRingPulse {
0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 0.5; }
50% { transform: translate(-50%,-50%) scale(1.22); opacity: 0.1; }
}
.jspx-callscreen__ring {
width: 92px; height: 92px; border-radius: 50%;
border: 3px solid rgba(255,255,255,0.18);
animation: callRingPulse 2s ease-in-out infinite;
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
.jspx-callscreen__avatar {
width: 78px; height: 78px; border-radius: 50%;
background: rgba(255,255,255,0.12);
border: 2px solid rgba(255,255,255,0.22);
display: flex; align-items: center; justify-content: center;
font-size: 32px; position: relative;
}
.jspx-callscreen__caller {
text-align: center; color: #fff;
font-size: clamp(18px, 5vw, 21px); font-weight: 700;
padding: 6px 16px 2px;
}
.jspx-callscreen__sub {
text-align: center; color: rgba(255,255,255,0.45);
font-size: 12px; padding-bottom: 6px;
}
.jspx-callscreen__transcript {
margin: 6px 14px 0;
background: rgba(255,255,255,0.07); border-radius: 12px;
padding: 10px 14px; display: flex; flex-direction: column; gap: 6px;
}
.jspx-callscreen__line {
font-size: clamp(11px, 3.2vw, 12px);
color: rgba(255,255,255,0.8);
padding-left: 14px; position: relative; line-height: 1.55;
}
.jspx-callscreen__line::before {
content: "›"; position: absolute; left: 0;
color: rgba(255,255,255,0.35);
}
.jspx-callscreen__btns {
display: flex; justify-content: space-around; align-items: center;
padding: 16px 24px 20px;
}
.jspx-callscreen__btn-circle {
width: 58px; height: 58px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 22px; border: none; pointer-events: none;
}
.jspx-callscreen__btn-circle--decline { background: #E53935; }
.jspx-callscreen__btn-circle--mid { background: rgba(255,255,255,0.12); }
.jspx-callscreen__btn-circle--answer { background: #2E7D32; }
/* ── SOCIAL MEDIA APP (Profile Detective) ── */
.jspx-social-shell {
border-radius: var(--p-radius-card); overflow: hidden;
box-shadow: var(--p-shadow-card); border: 1.5px solid var(--c-border);
}
.jspx-social-shell__header {
background: #1877F2;
display: flex; align-items: center; gap: 8px; padding: 10px 14px;
}
.jspx-social-shell__logo { font-size: 20px; }
.jspx-social-shell__name { color: #fff; font-weight: 700; font-size: 15px; flex: 1; }
.jspx-social-shell__notif { color: rgba(255,255,255,0.85); font-size: 17px; }
.jspx-social-shell__notice {
background: #E8F0FE; padding: 10px 14px;
font-size: 13px; color: #1a3a7a; font-weight: 600;
border-bottom: 1px solid #C5D6FA;
display: flex; align-items: center; gap: 6px;
}
.jspx-social-profiles {
padding: 10px; background: #f0f2f5;
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
padding-bottom: 14px;
}
.jspx-profile-card--v2 {
background: #fff; border-radius: 12px; overflow: hidden;
border: 2px solid #e4e6eb; cursor: pointer;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
transition: transform 150ms ease;
-webkit-tap-highlight-color: transparent;
position: relative;
}
.jspx-profile-card--v2:active { transform: scale(0.97); }
.jspx-profile-card__cover-v2 {
height: 42px;
background: linear-gradient(135deg, #9CC4E4 0%, #C9E1F2 100%);
}
.jspx-profile-card__avatar-v2-wrap {
display: flex; justify-content: center; margin-top: -20px; margin-bottom: 3px;
}
.jspx-profile-card__avatar-v2 {
width: 40px; height: 40px; border-radius: 50%;
background: var(--p-navy); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 17px; border: 3px solid #fff;
}
.jspx-profile-card__body-v2 { padding: 0 8px 10px; text-align: center; }
.jspx-profile-card__name-v2 { font-size: 12px; font-weight: 700; color: #111; line-height: 1.3; margin-bottom: 1px; }
.jspx-profile-card__uname-v2 { font-size: 10px; color: #888; word-break: break-all; margin-bottom: 5px; }
.jspx-profile-card__stat-v2 { font-size: 10px; color: #555; margin-bottom: 2px; }
.jspx-profile-card__dm-v2 {
margin-top: 5px; padding: 4px 6px;
background: #FFF0F0; border-radius: 5px;
font-size: 10px; color: #C7424E; font-style: italic; line-height: 1.4;
}
.jspx-profile-card--v2.is-correct { border-color: #2C9B58; background: #ECF7F0; pointer-events: none; }
.jspx-profile-card--v2.is-wrong { border-color: #C7424E; background: #FBECEE; pointer-events: none; }
.jspx-profile-card--v2.is-disabled { pointer-events: none; }
.jspx-profile-card__badge-v2 {
position: absolute; top: 6px; right: 6px;
font-size: 18px; display: none;
}
.jspx-profile-card--v2.is-correct .jspx-profile-card__badge-v2,
.jspx-profile-card--v2.is-wrong .jspx-profile-card__badge-v2 { display: block; }
/* ── LOAN SORT MESSAGES (Loan Scam — Card Sort) ── */
.jspx-sort-msg {
background: #fff; border-radius: var(--p-radius-card);
border: 2px solid var(--c-border); box-shadow: var(--p-shadow-card);
overflow: hidden; width: 100%;
}
.jspx-sort-msg__header {
background: #25D366; display: flex; align-items: center;
justify-content: space-between; padding: 8px 12px;
}
.jspx-sort-msg__from { font-size: 12px; font-weight: 700; color: #fff; }
.jspx-sort-msg__time { font-size: 10px; color: rgba(255,255,255,0.75); }
.jspx-sort-msg__body {
padding: 14px 16px;
font-size: clamp(13px,3.8vw,14px); color: #1a2740; line-height: 1.65;
}
/* ── ENHANCED WHATSAPP LOGIN BROWSER ── */
.jspx-browser__wa-header {
background: #075E54;
padding: 10px 14px;
display: flex; align-items: center; gap: 10px;
}
.jspx-browser__wa-header-icon { font-size: 22px; }
.jspx-browser__wa-header-text { color: #fff; font-size: 15px; font-weight: 700; }
.jspx-browser__wa-sub { font-size: 12px; color: #666; line-height: 1.5; padding: 10px 14px 0; text-align: center; }
.jspx-browser__wa-steps {
display: flex; flex-direction: column; gap: 4px;
padding: 8px 14px; font-size: 11px; color: #555; line-height: 1.5;
}
.jspx-browser__url-bar {
display: flex; align-items: center; gap: 6px;
background: #fff; border: 1.5px solid #ddd; border-radius: 8px;
padding: 6px 10px; margin: 0 8px 8px;
}
.jspx-browser__url-lock { font-size: 12px; color: #C7424E; }
.jspx-browser__url-text {
font-family: monospace; font-size: 11px; color: #C7424E;
word-break: break-all; flex: 1;
}
.jspx-browser__url-warn { font-size: 10px; color: #C7424E; font-weight: 700; }
/* ==========================================================================
10. BACK BUTTON (all scam module pages)
========================================================================== */
.jspx-back-btn {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 5px;
background: none; border: none; padding: 0;
cursor: pointer;
color: var(--p-navy); font-size: 13px; font-weight: var(--fw-semibold);
opacity: 0.65;
-webkit-tap-highlight-color: transparent;
transition: opacity 150ms ease;
margin-bottom: 2px;
}
.jspx-back-btn:active { opacity: 0.4; }
.jspx-back-btn__arrow { font-size: 16px; line-height: 1; }
/* ==========================================================================
11. SCAMS PAGE — OVERALL PROGRESS BAR + COMPLETED ICON
========================================================================== */
/* Progress bar card */
.scam-progress {
margin-bottom: 16px;
padding: 14px 16px;
background: var(--c-bg-mid);
border-radius: var(--p-radius-card);
box-shadow: var(--p-shadow-soft);
border: 1px solid var(--c-border);
}
.scam-progress__labels {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 8px;
}
.scam-progress__text {
font-size: 13px; font-weight: var(--fw-semibold); color: var(--p-navy);
}
.scam-progress__pct {
font-size: 12px; font-weight: var(--fw-semibold);
color: var(--c-text-muted);
}
.scam-progress__bar {
width: 100%; height: 14px;
background: var(--c-bg-deep);
border-radius: var(--p-radius-pill);
overflow: hidden;
border: 1px solid var(--c-border);
}
.scam-progress__fill {
height: 100%;
background: linear-gradient(90deg, var(--p-soft-blue) 0%, var(--p-navy) 100%);
border-radius: var(--p-radius-pill);
transition: width 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Completed scam-icon — greyed-out circle with a large centred checkmark.
The topic icon is hidden and no corner badge is used. */
.scam-icon.is-completed {
background: #9EACBF;
color: #FFFFFF;
box-shadow: 0 6px 14px rgba(13, 42, 97, 0.16),
inset 0 -3px 0 rgba(0, 0, 0, 0.10);
}
.scam-icon.is-completed svg { opacity: 0; } /* hide the topic icon */
.scam-icon.is-completed::after {
content: "✓";
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 28px;
font-weight: 800;
color: #FFFFFF;
line-height: 1;
}
/* ── Completed module card (hub page) ──
Completion is communicated purely through colour + iconography (no text),
so it needs no translation: green left-border accent, soft green tint, and
a green checkmark in place of the chevron. */
.p-module--completed {
border-left: 4px solid #1B7A40;
background: #DCF1E4;
}
.p-module--completed .p-module__icon {
background: linear-gradient(160deg, #1A4080, var(--p-navy-deep));
color: #FFFFFF;
}
.p-module--completed .p-module__cta {
background: #C4E7D0;
color: #1B7A40;
}
.p-module--completed .p-module__cta svg {
stroke-width: 2.6;
}
.p-module__badge--done {
background: #2C9B58;
color: #FFFFFF;
box-shadow: 0 4px 10px rgba(44, 155, 88, 0.30);
}
/* ==========================================================================
SCAM CONTENT BLOCKS — Evidence-file card style
Each card mimics a police evidence entry: yellow left-bar accent, dark
photo-slot placeholder zone with a giant faded watermark number, a bright
tape-yellow gradient divider, and a clean white text body with a step label.
========================================================================== */
[data-page="scam-module"] .jspx-pagetitle {
font-size: 28px;
line-height: 1.25;
letter-spacing: 0.01em;
}
[data-page="scam-module"] .jspx-chip {
font-size: 13px;
letter-spacing: 0.08em;
}
/* ---------- stack of cards ---------- */
.scam-blocks {
display: flex;
flex-direction: column;
gap: 22px;
margin: 20px 0 26px;
}
/* ---------- individual card ---------- */
.scam-block {
position: relative;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(245, 197, 24, 0.18);
box-shadow:
0 14px 36px rgba(0, 0, 0, 0.45),
0 2px 8px rgba(0, 0, 0, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* Police-tape yellow left accent stripe */
.scam-block::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: linear-gradient(180deg, #F5C518 0%, rgba(245, 197, 24, 0.28) 100%);
z-index: 3;
}
/* ---------- visual placeholder zone ---------- */
.scam-block__visual {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 22px 20px 20px;
text-align: center;
/* Dot-grid texture over deep navy gradient */
background:
radial-gradient(rgba(245, 197, 24, 0.055) 1px, transparent 1px),
linear-gradient(145deg, #0B1D3D 0%, #0D2A61 50%, #09111C 100%);
background-size: 22px 22px, auto;
}
/* Giant faded watermark step number (rendered from data-num attr set by JS) */
.scam-block__visual::after {
content: attr(data-num);
position: absolute;
right: 2px;
bottom: -14px;
font-size: 128px;
font-weight: 900;
line-height: 1;
color: rgba(245, 197, 24, 0.07);
pointer-events: none;
letter-spacing: -0.04em;
user-select: none;
}
/* Dashed storyboard / photo-slot frame around the icon */
.scam-block__visual-frame {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 14px 30px 12px;
border: 1.5px dashed rgba(245, 197, 24, 0.36);
border-radius: 10px;
background: rgba(0, 0, 0, 0.18);
box-shadow: 0 0 0 5px rgba(13, 42, 97, 0.38);
}
.scam-block__visual-icon { font-size: 38px; line-height: 1; }
.scam-block__visual-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--c-tape, #F5C518);
}
.scam-block__visual-note {
position: relative;
z-index: 1;
margin: 0;
font-size: 12px;
font-style: italic;
line-height: 1.55;
color: rgba(225, 239, 248, 0.52);
max-width: 42ch;
}
/* ---------- tape-yellow gradient divider strip ---------- */
.scam-block__divider {
height: 3px;
background: linear-gradient(
90deg,
transparent 0%,
var(--c-tape, #F5C518) 22%,
rgba(245, 197, 24, 0.30) 68%,
transparent 100%
);
}
/* ---------- text body ---------- */
.scam-block__body {
background: #FFFFFF;
padding: 14px 20px 22px 22px;
display: flex;
flex-direction: column;
gap: 7px;
}
/* "POINT 01" step label */
.scam-block__step {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.24em;
color: var(--c-police-blue, #0D2A61);
opacity: 0.45;
}
.scam-block__text {
margin: 0;
font-size: 17px;
font-weight: 500;
line-height: 1.72;
color: #0D1B2E;
}
@media (min-width: 480px) {
.scam-block__text { font-size: 18px; }
}
/* ==========================================================================
STAGE 7 — REDESIGNED SCAM MODULE CARDS (design handoff 2026-06-13)
--------------------------------------------------------------------------
Scoped to [data-page="scam-module"]. Overrides the earlier scam-block
styles to match the new 4-page design: navy gradient header band, white
text body, per-page accent colours (yellow / green), numbered/icon badges,
connector arrows for the How-It-Works page.
========================================================================== */
/* ---- Font for the module pages ---- */
[data-page="scam-module"] {
--ff-module: 'Noto Sans', 'Noto Sans Tamil', 'Noto Sans Myanmar', system-ui, sans-serif;
}
/* ---- Per-language font selection ----
module.html sets from the chosen language.
Tamil and Burmese need their script-specific Noto family; the others
use Noto Sans. English UI labels still resolve to Noto Sans because it
is listed first in each stack. */
html[data-lang="ta"] {
--ff-sans: 'Inter', 'Noto Sans Tamil', system-ui, sans-serif;
}
html[data-lang="ta"] [data-page="scam-module"] {
--ff-module: 'Inter', 'Noto Sans Tamil', system-ui, sans-serif;
}
html[data-lang="my"] {
--ff-sans: 'Inter', 'Noto Sans Myanmar', system-ui, sans-serif;
}
html[data-lang="my"] [data-page="scam-module"] {
--ff-module: 'Inter', 'Noto Sans Myanmar', system-ui, sans-serif;
}
/* ---- Redesigned header chip (shield icon + text pill) ---- */
[data-page="scam-module"] .jspx-header {
display: flex;
flex-direction: column;
gap: 10px;
padding: 0 0 4px;
}
/* Top-of-page Back link (first page of a lesson) */
[data-page="scam-module"] .jspx-topback {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
background: none;
border: none;
cursor: pointer;
font-family: inherit;
font-size: 13.5px;
font-weight: 700;
color: #14306b;
padding: 4px 10px 4px 4px;
margin: 0 0 10px;
border-radius: 999px;
transition: background 0.15s ease;
}
[data-page="scam-module"] .jspx-topback:hover,
[data-page="scam-module"] .jspx-topback:focus-visible {
background: rgba(20, 48, 107, 0.07);
}
[data-page="scam-module"] .jspx-topback svg { display: block; }
[data-page="scam-module"] .jspx-chip {
display: inline-flex;
align-items: center;
gap: 9px;
background: linear-gradient(120deg, #1f4078 0%, #142c57 100%);
color: #FFFFFF;
font-family: var(--ff-module);
font-size: 13px;
font-weight: 700;
letter-spacing: -0.05px;
padding: 12px 15px;
border-radius: 16px;
box-shadow: 0 10px 22px rgba(16, 38, 75, 0.24);
line-height: 1.35;
width: 100%;
}
[data-page="scam-module"] .jspx-chip::before {
content: "";
display: inline-block;
width: 19px;
height: 22px;
flex-shrink: 0;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 27' fill='none'%3E%3Cpath d='M12 2l9 3.2v7.3c0 6.2-4.1 9.3-9 11.2-4.9-1.9-9-5-9-11.2V5.2z' fill='rgba(255,255,255,.14)' stroke='%23fff' stroke-width='1.6'/%3E%3Cpath d='M8.4 13.2l2.6 2.6 4.6-5.2' stroke='%23F6C915' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
no-repeat center / contain;
}
[data-page="scam-module"] .jspx-pagetitle {
font-family: var(--ff-module);
font-size: clamp(24px, 6.5vw, 29px);
font-weight: 800;
color: #102a52;
letter-spacing: -0.6px;
line-height: 1.2;
margin: 0;
}
/* ---- Redesigned progress bar ---- */
[data-page="scam-module"] .jspx-pbar {
height: 10px;
background: #FFFFFF;
border: none;
border-radius: 99px;
box-shadow: inset 0 1px 2px rgba(16, 38, 75, 0.14);
overflow: hidden;
}
[data-page="scam-module"] .jspx-pbar__fill {
height: 100%;
background: linear-gradient(90deg, #2f63ad, #5b91d4);
border-radius: 99px;
box-shadow: 0 1px 4px rgba(47, 99, 173, 0.55);
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ---- Stack of cards ---- */
[data-page="scam-module"] .scam-blocks {
margin: 8px 0 24px;
gap: 20px;
}
/* ---- Base card reset ---- */
[data-page="scam-module"] .scam-block {
border-radius: 20px;
overflow: hidden;
border: none;
box-shadow: 0 14px 30px rgba(16, 38, 75, 0.18);
transition: transform 0.15s ease, box-shadow 0.15s ease;
font-family: var(--ff-module);
}
[data-page="scam-module"] .scam-block:hover {
transform: translateY(-2px);
box-shadow: 0 18px 36px rgba(16, 38, 75, 0.24);
}
/* Yellow left accent (pages 1, 2, 3) */
[data-page="scam-module"] .scam-block::before {
width: 6px;
background: #F6C915;
border-radius: 0;
}
/* Green left accent for page 4 (What To Do) */
[data-page="scam-module"] .scam-block--action::before {
background: #1E9E63;
}
/* Red left accent for the "How to Spot Red Flags" page */
[data-page="scam-module"] .scam-block--redflag::before {
background: #D62828;
}
/* ---- Visual zone (navy header band) ---- */
[data-page="scam-module"] .scam-block__visual {
background: linear-gradient(125deg, #1d3c70 0%, #10254c 100%);
height: 76px;
padding: 0;
gap: 9px;
flex-direction: row;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* Real-image visual: a navy header bar (holding the number badge) sits above
the artwork, so the badge never overlaps the image. */
[data-page="scam-module"] .scam-block__visual--image {
height: auto;
background: #EDF1F6;
display: block;
padding: 0;
}
[data-page="scam-module"] .scam-block__visual--image::after { content: none; }
[data-page="scam-module"] .scam-block__imgbar {
/* Navy header row: step label on the left, number badge on the right,
vertically aligned on the same line. */
min-height: 56px;
padding: 12px 16px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 12px;
background: linear-gradient(125deg, #1d3c70 0%, #10254c 100%);
}
/* Step label ("POINT 01" / "STEP 01" / "RED FLAG 01" / "ACTION 01") shown inside
the navy bar: centered, larger, and light enough to read on the dark blue. */
[data-page="scam-module"] .scam-block__imgbar .scam-block__step {
order: 2; /* label on the right */
justify-content: flex-start;
text-align: left;
color: #dbe6fb;
font-size: 13.5px;
letter-spacing: 2px;
opacity: 1;
}
[data-page="scam-module"] .scam-block__imgbar .scam-block__step--warn {
color: #ffb0b0;
}
[data-page="scam-module"] .scam-block__imgbar .scam-block__step--action {
color: #93efc1;
}
[data-page="scam-module"] .scam-block__img {
display: block;
width: 100%;
height: auto;
}
/* Placeholder: navy bar (number badge) on top, placeholder box separated
below — same structure as an image block. */
[data-page="scam-module"] .scam-block__visual--placeholder {
height: auto;
background: none;
display: block;
padding: 0;
}
[data-page="scam-module"] .scam-block__visual--placeholder::after { content: none; }
[data-page="scam-module"] .scam-block__visual--baronly {
height: auto;
background: none;
display: block;
padding: 0;
}
[data-page="scam-module"] .scam-block__visual--baronly::after { content: none; }
[data-page="scam-module"] .scam-block__ph {
min-height: 96px;
background: #E9EEF4;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
padding: 16px;
}
[data-page="scam-module"] .scam-block__ph-icon { line-height: 0; opacity: 0.85; }
[data-page="scam-module"] .scam-block__visual--placeholder .scam-block__visual-label {
position: static;
color: #6E819C;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 2px;
}
/* Faded watermark number */
[data-page="scam-module"] .scam-block__visual::after {
font-size: 66px;
font-weight: 800;
color: rgba(255, 255, 255, 0.07);
right: 8px;
bottom: auto;
top: 50%;
transform: translateY(-50%);
line-height: 1;
letter-spacing: 0;
}
/* Visual placeholder frame (the small image placeholder icon + label) */
[data-page="scam-module"] .scam-block__visual-frame {
position: relative;
z-index: 1;
flex-direction: row;
align-items: center;
gap: 8px;
border: none;
border-radius: 0;
padding: 0;
background: none;
box-shadow: none;
}
[data-page="scam-module"] .scam-block__visual-icon { font-size: 22px; }
[data-page="scam-module"] .scam-block__visual-label {
font-size: 10.5px;
font-weight: 800;
letter-spacing: 2px;
color: #F6C915;
position: relative;
z-index: 1;
}
/* Image placeholder (small icon SVG in the band) */
[data-page="scam-module"] .scam-block__visual-frame::before {
content: "";
display: inline-block;
width: 27px;
height: 27px;
flex-shrink: 0;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Crect x='6' y='9' width='36' height='30' rx='5' fill='%23EAF2FB' stroke='%23F6C915' stroke-width='2.5'/%3E%3Ccircle cx='17' cy='19' r='4' fill='%23FFD23F'/%3E%3Cpath d='M10 38L21 25l7 8 4-4.5L40 38z' fill='%233FA66A'/%3E%3C/svg%3E")
no-repeat center / contain;
}
/* ---- Numbered badge overlaid on header (pages 1-2) ---- */
[data-page="scam-module"] .scam-block__badge {
position: static; /* placed by the navy bar's flex row */
order: 1; /* number sits on the left, aligned with the label */
z-index: 4;
width: 38px;
height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, #2f63ad, #14306b);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: var(--ff-module);
font-size: 17px;
font-weight: 800;
box-shadow: 0 4px 10px rgba(16, 38, 75, 0.4);
border: 2px solid rgba(255, 255, 255, 0.25);
line-height: 1;
}
/* Warning triangle badge (page 3 — Red Flags) */
[data-page="scam-module"] .scam-block__badge--warn {
border-radius: 11px;
background: linear-gradient(135deg, #FF5A5A, #E12D2D);
box-shadow: 0 4px 10px rgba(200, 30, 30, 0.4);
border-color: rgba(255, 255, 255, 0.4);
}
/* Green check badge (page 4 — What To Do) */
[data-page="scam-module"] .scam-block__badge--action {
background: linear-gradient(135deg, #28b673, #157a4c);
box-shadow: 0 4px 10px rgba(21, 122, 76, 0.4);
border-color: rgba(255, 255, 255, 0.35);
}
/* ---- White body area ---- */
[data-page="scam-module"] .scam-block__divider { display: none; }
[data-page="scam-module"] .scam-block__body {
padding: 15px 18px 17px;
gap: 6px;
background: #FFFFFF;
}
/* Step label row (with optional icon prefix) */
[data-page="scam-module"] .scam-block__step {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--ff-module);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.6px;
color: #8fa3c2;
opacity: 1;
text-transform: uppercase;
}
[data-page="scam-module"] .scam-block__step--warn {
color: #D62828;
}
[data-page="scam-module"] .scam-block__step--action {
color: #1E8A57;
}
/* Card title (uiText — short version) */
[data-page="scam-module"] .scam-block__title {
font-family: var(--ff-module);
font-size: 18px;
font-weight: 700;
color: #102a52;
margin: 2px 0 0;
line-height: 1.25;
}
/* Card body text — sized/coloured to match the point headers */
[data-page="scam-module"] .scam-block__text {
font-family: var(--ff-module);
font-size: 18px;
font-weight: 400;
line-height: 1.35;
color: #102a52;
}
/* ---- Connector arrow between How-It-Works cards ---- */
[data-page="scam-module"] .scam-connector {
display: flex;
justify-content: center;
padding: 8px 0;
}
[data-page="scam-module"] .scam-connector__circle {
width: 30px;
height: 30px;
border-radius: 50%;
background: #FFFFFF;
box-shadow: 0 4px 10px rgba(16, 38, 75, 0.14);
display: flex;
align-items: center;
justify-content: center;
}
[data-page="scam-module"] .scam-connector__circle svg {
width: 14px;
height: 14px;
}
/* ---- Footer nav buttons (override default p-btn) ---- */
[data-page="scam-module"] .jspx-nav-row {
display: flex;
gap: 12px;
margin-top: 8px;
}
/* Crisp single-tap activation (no double-tap-zoom / gesture delay). */
[data-page="scam-module"] .jspx-nav-row .p-btn--back,
[data-page="scam-module"] .jspx-nav-row .p-btn--next,
[data-page="scam-module"] .jspx-nav-row .p-btn--finish {
touch-action: manipulation;
}
[data-page="scam-module"] .jspx-nav-row .p-btn--back {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 6px;
padding: 14px 18px;
border-radius: 14px;
border: 1.5px solid #c9d6e8;
background: #FFFFFF;
color: #14306b;
font-family: var(--ff-module);
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: background 0.12s ease;
box-shadow: none;
}
[data-page="scam-module"] .jspx-nav-row .p-btn--back:hover { background: #f4f8fd; }
[data-page="scam-module"] .jspx-nav-row .p-btn--next {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 15px;
border-radius: 14px;
border: none;
background: linear-gradient(120deg, #1f4078, #15306b);
color: #FFFFFF;
font-family: var(--ff-module);
font-size: 16px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 8px 18px rgba(20, 48, 107, 0.32);
transition: box-shadow 0.12s ease;
}
[data-page="scam-module"] .jspx-nav-row .p-btn--next:hover {
box-shadow: 0 10px 22px rgba(20, 48, 107, 0.42);
}
[data-page="scam-module"] .jspx-nav-row .p-btn--finish {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 15px;
border-radius: 14px;
border: none;
background: linear-gradient(120deg, #28b673, #157a4c);
color: #FFFFFF;
font-family: var(--ff-module);
font-size: 16px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 8px 18px rgba(21, 122, 76, 0.34);
transition: box-shadow 0.12s ease;
}
[data-page="scam-module"] .jspx-nav-row .p-btn--finish:hover {
box-shadow: 0 10px 22px rgba(21, 122, 76, 0.44);
}
/* ---- Visual note (caption below image area) ---- */
[data-page="scam-module"] .scam-block__visual-note {
display: none; /* hide the text caption — it's for the designer reference only */
}
/* Responsive: slightly bigger text on wider screens */
@media (min-width: 480px) {
[data-page="scam-module"] .scam-block__text { font-size: 19px; }
[data-page="scam-module"] .scam-block__title { font-size: 19px; }
}
/* ==========================================================================
STAGE 8 — RESPONSIVENESS FIXES FOR SCAM MODULE
--------------------------------------------------------------------------
Fixes text overflow on long scam titles, ensures all module pages work
correctly on all screen widths (360px – 1280px).
========================================================================== */
/* ---- Global overflow guard for the module container ---- */
[data-page="scam-module"] .p-container {
overflow-x: hidden;
min-width: 0;
box-sizing: border-box;
}
[data-page="scam-module"] .p-stage {
overflow-x: hidden;
/* Hide the scrollbar (like the mobile view) so the desktop scrollbar can't sit
over the Next Page button or shift the layout when it appears/disappears.
Scrolling by wheel, trackpad, drag or arrow keys still works normally. */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* legacy Edge / IE */
}
[data-page="scam-module"] .p-stage::-webkit-scrollbar {
width: 0;
height: 0;
display: none; /* Chrome / Safari / Edge */
}
/* Also hide it if the document itself is the scroller on some setups. */
body[data-page="scam-module"] {
scrollbar-width: none;
-ms-overflow-style: none;
}
body[data-page="scam-module"]::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
/* Give the module shell a definite height so .p-stage is the single, predictable
scroll region. Without this the whole page scrolled, which let the scrollbar
land over the buttons and stopped "jump to the top of the next page" from
firing — so pressing Next only moved the scrollbar and the new page appeared
already scrolled down, looking like nothing happened. This does not change the
button's position. */
[data-page="scam-module"] .p-app {
min-height: 0;
height: 100vh;
height: 100dvh;
}
/* ---- Header: chip text wraps on small screens ---- */
[data-page="scam-module"] .jspx-chip {
word-break: break-word;
overflow-wrap: break-word;
white-space: normal;
line-height: 1.3;
/* Larger module title so it's easy to see which module you're in.
Fluid: bigger on wide screens, still fits on narrow phones. */
font-size: clamp(15px, 4.3vw, 19px);
}
/* ---- Page title: always wraps, never overflows ---- */
[data-page="scam-module"] .jspx-pagetitle {
font-size: clamp(20px, 5.5vw, 29px);
word-break: break-word;
overflow-wrap: break-word;
hyphens: auto;
white-space: normal;
max-width: 100%;
}
/* ---- Completion: title card — allow title to wrap ---- */
[data-page="scam-module"] .jspx-titlecard {
/* Switch to a column layout on narrow screens so long titles don't push
the bar off-screen */
flex-wrap: wrap;
gap: 8px 12px;
min-width: 0;
}
[data-page="scam-module"] .jspx-titlecard__title {
white-space: normal;
word-break: break-word;
overflow-wrap: break-word;
font-size: clamp(15px, 4.2vw, 20px);
min-width: 0;
flex-shrink: 1;
}
[data-page="scam-module"] .jspx-titlecard__bar {
flex-basis: 100%; /* own row once title wraps */
flex-shrink: 0;
min-width: 60px;
}
[data-page="scam-module"] .jspx-titlecard__pct {
flex-shrink: 0;
}
/* ---- Wordmark on completion ---- */
[data-page="scam-module"] .jspx-wordmark {
word-break: break-word;
overflow-wrap: break-word;
font-size: clamp(20px, 6vw, 28px);
max-width: 100%;
text-align: center;
}
/* ---- Intro card: ensure it never overflows ---- */
[data-page="scam-module"] .jspx-intro-card {
min-width: 0;
overflow: hidden;
box-sizing: border-box;
}
[data-page="scam-module"] .jspx-intro-card__title {
word-break: break-word;
overflow-wrap: break-word;
white-space: normal;
font-size: clamp(14px, 4vw, 17px);
}
[data-page="scam-module"] .jspx-intro-card__body {
word-break: break-word;
overflow-wrap: break-word;
white-space: normal;
}
/* ---- Card text: always wraps ---- */
[data-page="scam-module"] .scam-block__title {
word-break: break-word;
overflow-wrap: break-word;
white-space: normal;
}
[data-page="scam-module"] .scam-block__text {
word-break: break-word;
overflow-wrap: break-word;
white-space: normal;
}
/* ---- Nav row: buttons shrink but stay usable ---- */
[data-page="scam-module"] .jspx-nav-row {
flex-wrap: wrap;
box-sizing: border-box;
}
[data-page="scam-module"] .jspx-nav-row .p-btn--back {
min-width: 0;
flex-shrink: 1;
padding: clamp(11px, 3.5vw, 14px) clamp(12px, 4vw, 18px);
font-size: clamp(13px, 3.8vw, 15px);
white-space: nowrap;
}
[data-page="scam-module"] .jspx-nav-row .p-btn--next,
[data-page="scam-module"] .jspx-nav-row .p-btn--finish {
min-width: 0;
flex-shrink: 1;
padding: clamp(11px, 3.5vw, 15px) clamp(12px, 4vw, 16px);
font-size: clamp(13px, 3.8vw, 16px);
white-space: nowrap;
}
/* ---- Learn list items ---- */
[data-page="scam-module"] .jspx-learn__item {
word-break: break-word;
overflow-wrap: break-word;
min-width: 0;
font-size: clamp(12px, 3.4vw, 14px);
}
/* ---- Completion card: mascot stays to the right ---- */
[data-page="scam-module"] .jspx-complete-card {
min-width: 0;
overflow: hidden;
box-sizing: border-box;
}
[data-page="scam-module"] .jspx-complete-card__title {
word-break: break-word;
overflow-wrap: break-word;
white-space: normal;
font-size: clamp(13px, 3.8vw, 16px);
flex: 1;
min-width: 0;
}
/* ---- Scam chip in complete section ---- */
[data-page="scam-module"] .jspx-complete__chip {
max-width: 100%;
word-break: break-word;
white-space: normal;
text-align: center;
}
/* ---- Scam block visual band: constrain watermark number ---- */
[data-page="scam-module"] .scam-block__visual {
overflow: hidden;
}
/* ---- Step label: never overflow ---- */
[data-page="scam-module"] .scam-block__step {
max-width: 100%;
white-space: normal;
flex-wrap: wrap;
}
/* ---- Fluid font sizes for very narrow phones (< 375px) ---- */
@media (max-width: 374px) {
[data-page="scam-module"] .jspx-pagetitle {
font-size: 19px;
}
[data-page="scam-module"] .jspx-chip {
font-size: 14px;
padding: 10px 12px;
}
[data-page="scam-module"] .scam-block__text {
font-size: 16px;
}
[data-page="scam-module"] .jspx-nav-row .p-btn--next,
[data-page="scam-module"] .jspx-nav-row .p-btn--finish {
font-size: 13px;
}
}
/* ==========================================================================
SETTINGS INTEGRATION — applied from js/settings-apply.js via attrs
data-motion="reduce" · --text-scale
Appended last so these overrides win over earlier declarations.
========================================================================== */
/* ---- Text size: scale the shared font tokens (settings "Text size") ---- */
:root {
--text-scale: 1;
--fs-xs: calc(10px * var(--text-scale));
--fs-sm: calc(12px * var(--text-scale));
--fs-md: calc(14px * var(--text-scale));
--fs-lg: calc(16px * var(--text-scale));
--fs-xl: calc(20px * var(--text-scale));
--fs-2xl: calc(26px * var(--text-scale));
--fs-3xl: calc(34px * var(--text-scale));
--fs-4xl: calc(44px * var(--text-scale));
}
/* ---- Reduce motion (settings "Reduce motion") ---- */
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important;
}
/* ---- Text size: scale the main readable content by --text-scale ----
The app's content text uses fixed px / clamp() sizes, so we multiply the
key readable elements here to make the "Text size" setting take effect. */
body.theme-portrait .scam-block__text { font-size: calc(17px * var(--text-scale)); }
[data-page="scam-module"] .scam-block__title { font-size: calc(18px * var(--text-scale)); }
body.theme-portrait .p-page-title { font-size: calc(clamp(22px, 6.5vw, 28px) * var(--text-scale)); }
body.theme-portrait .p-greeting { font-size: calc(clamp(12px, 3.4vw, 14px) * var(--text-scale)); }
body.theme-portrait .p-section-title { font-size: calc(clamp(13px, 3.6vw, 14px) * var(--text-scale)); }
body.theme-portrait .p-hero__lede { font-size: calc(clamp(13px, 3.8vw, 15px) * var(--text-scale)); }
body.theme-portrait .p-hero__tag { font-size: calc(clamp(11px, 3.2vw, 13px) * var(--text-scale)); }
body.theme-portrait .p-module__title { font-size: calc(clamp(14px, 3.8vw, 16px) * var(--text-scale)); }
body.theme-portrait .p-module__desc { font-size: calc(clamp(11px, 3.2vw, 12.5px) * var(--text-scale)); }
body.theme-portrait .p-tip__text { font-size: calc(clamp(12px, 3.4vw, 13px) * var(--text-scale)); }
body.theme-portrait .p-lang__name { font-size: calc(clamp(14px, 3.8vw, 15px) * var(--text-scale)); }
/* ---- Celebration overlay (settings "Celebration style") ---- */
.fx-layer {
position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden;
}
.fx-piece { position: absolute; top: -24px; will-change: transform, opacity; }
@keyframes fx-fall {
0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(110vh) rotate(720deg); opacity: 1; }
}
@keyframes fx-burst {
0% { transform: translate(0,0) scale(.4); opacity: 1; }
100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; }
}
@keyframes fx-pop {
0% { transform: scale(0) rotate(0deg); opacity: 0; }
40% { transform: scale(1.15) rotate(15deg); opacity: 1; }
100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
html[data-motion="reduce"] .fx-piece { animation: none !important; }
/* ==========================================================================
WARM & FRIENDLY REFRESH (2026-07)
Site-wide polish for the portrait (active) theme: friendlier rounded font,
softer depth, rounder shapes, bigger tap targets, calmer cards, larger
reading text, clearer navigation. Appended last so it wins by cascade.
========================================================================== */
body.theme-portrait {
/* Rounder, softer, roomier */
--p-radius-card: 22px;
--p-radius-btn: 16px;
--p-nav-h: 78px;
--c-border: #E6EEF6;
--c-border-strong: #CFDDEB;
--p-shadow-card: 0 12px 30px rgba(13, 42, 97, 0.09), 0 3px 8px rgba(13, 42, 97, 0.05);
--p-shadow-soft: 0 4px 16px rgba(13, 42, 97, 0.07);
--p-shadow-nav: 0 -8px 30px rgba(13, 42, 97, 0.10);
line-height: 1.55;
}
/* ---- Friendlier focus (thicker, softer, consistent) ---- */
body.theme-portrait :focus-visible {
outline: 3px solid var(--p-tape);
outline-offset: 3px;
border-radius: 12px;
}
/* ---- Headings a touch bolder & tighter for a confident, friendly tone ---- */
body.theme-portrait .p-page-title { font-weight: 800; letter-spacing: -0.01em; }
body.theme-portrait .p-section-title { font-weight: 800; letter-spacing: 0.01em; }
/* ---- Bigger, rounder buttons with a gentle press ---- */
body.theme-portrait .p-btn {
min-height: 54px;
padding: 15px clamp(22px, 5vw, 30px);
border-radius: 16px;
font-size: clamp(15px, 4vw, 17px);
font-weight: 800;
letter-spacing: 0.01em;
gap: 10px;
transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}
body.theme-portrait .p-btn:active { transform: translateY(1px) scale(0.99); }
body.theme-portrait .p-btn--navy { box-shadow: 0 10px 24px rgba(13, 42, 97, 0.26); }
body.theme-portrait .p-btn--navy:hover { box-shadow: 0 13px 30px rgba(13, 42, 97, 0.32); }
/* ---- Calmer, rounder cards ---- */
body.theme-portrait .p-card { border-radius: 22px; }
/* ---- Module list: bigger tap target, soft lift, clearer affordance ---- */
body.theme-portrait .p-module {
border-radius: 20px;
padding: clamp(15px, 4vw, 18px);
box-shadow: var(--p-shadow-soft);
transition: transform 0.16s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
body.theme-portrait .p-module:hover:not([aria-disabled="true"]) {
transform: translateY(-2px);
box-shadow: var(--p-shadow-card);
border-color: var(--p-soft-blue);
}
body.theme-portrait .p-module__icon { border-radius: 16px; }
/* ---- Warm, friendly tip card (cream, not dashed) ---- */
body.theme-portrait .p-tip {
background: #FFF8E6;
border: 1px solid #F2E4B6;
border-radius: 18px;
padding: 14px 16px;
box-shadow: var(--p-shadow-soft);
}
/* ---- Back link becomes a clear, tappable pill ---- */
body.theme-portrait .p-back {
padding: 9px 16px 9px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.85);
border: 1px solid var(--c-border);
font-weight: 700;
box-shadow: var(--p-shadow-soft);
}
body.theme-portrait .p-back:hover { background: #fff; }
/* ---- Bottom nav: taller, bigger icons, clear active pill ---- */
body.theme-portrait .bottom-nav__item {
gap: 5px;
font-size: 12px;
font-weight: 700;
position: relative;
}
body.theme-portrait .bottom-nav__icon { width: 26px; height: 26px; }
body.theme-portrait .bottom-nav__item.is-active { color: var(--p-navy); }
body.theme-portrait .bottom-nav__item.is-active::before {
content: "";
position: absolute;
top: 6px;
width: 54px; height: 32px;
border-radius: 999px;
background: rgba(13, 42, 97, 0.10);
z-index: 0;
}
body.theme-portrait .bottom-nav__icon,
body.theme-portrait .bottom-nav__label { position: relative; z-index: 1; }
/* ---- Progress bar: taller & rounder for a satisfying, readable indicator ---- */
body.theme-portrait .p-progress-bar { height: 12px; }
/* ---- Larger, more comfortable reading text in modules ---- */
body.theme-portrait .scam-block__text { font-size: calc(18px * var(--text-scale)); line-height: 1.6; }
[data-page="scam-module"] .scam-block__title { font-size: calc(19px * var(--text-scale)); }
/* ---- Module nav row (Back / Next / Finish): big, obvious, thumb-friendly ---- */
body.theme-portrait .jspx-nav-row { gap: 12px; }
body.theme-portrait .jspx-nav-row .p-btn { min-height: 56px; }
/* ---- First-visit welcome hint ---- */
.eo-hint {
position: relative;
display: flex; align-items: flex-start; gap: 12px;
background: linear-gradient(180deg, #FFFDF5, #FFF6DE);
border: 1px solid #F2E4B6;
border-radius: 18px;
padding: 14px 44px 14px 16px;
margin-bottom: 16px;
box-shadow: var(--p-shadow-soft);
animation: eo-hint-in 0.4s ease both;
}
.eo-hint__icon {
flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
display: grid; place-items: center; background: #F5C518; color: #4A3B00;
}
.eo-hint__text { font-size: 14px; color: #4A431F; line-height: 1.45; }
.eo-hint__text strong { color: #2C2708; }
.eo-hint__close {
position: absolute; top: 8px; right: 8px;
width: 30px; height: 30px; border-radius: 50%;
border: 0; background: transparent; cursor: pointer; color: #8a7f52;
display: grid; place-items: center;
}
.eo-hint__close:hover { background: rgba(0,0,0,0.05); }
@keyframes eo-hint-in { from { opacity: 0; transform: translateY(-6px); } }
html[data-motion="reduce"] .eo-hint { animation: none; }
/* ---- Icon-only module nav buttons (Back / Next / Finish are symbols now) ---- */
[data-page="scam-module"] .jspx-nav-row .p-btn--icon {
display: flex; align-items: center; justify-content: center;
min-height: 58px; gap: 0;
}
[data-page="scam-module"] .jspx-nav-row .p-btn--back.p-btn--icon { padding: 14px 22px; }
/* ---- Bigger, clearer round "back" button in the module reader ---- */
[data-page="scam-module"] .jspx-topback {
width: 50px; height: 50px; padding: 0;
justify-content: center; border-radius: 50%;
background: #FFFFFF; border: 1.5px solid var(--c-border);
box-shadow: var(--p-shadow-soft);
}
[data-page="scam-module"] .jspx-topback svg { width: 28px; height: 28px; }
/* ---- Round white back button (chevron) on the language page ---- */
.p-back--round {
width: 50px; height: 50px; padding: 0;
align-items: center; justify-content: center;
border-radius: 50%;
background: #FFFFFF;
border: 1.5px solid var(--c-border);
box-shadow: var(--p-shadow-soft);
margin-bottom: 8px;
}
.p-back--round:hover { background: #FFFFFF; border-color: var(--c-border-strong); }
.p-back--round svg { display: block; }
/* ---- Desktop/tablet: cap the skyline so it doesn't grow oversized ----
Mobile keeps the full-width skyline; from 700px up we fit it to a modest
height and centre it so it stays a bottom band and never overlaps content. */
@media (min-width: 700px) {
.p-app::before {
height: clamp(180px, 32vh, 300px);
background-size: auto 100%;
background-position: bottom center;
}
}
/* ---- Welcome page: vertically centre the hero so it isn't top-heavy ---- */
body[data-page="landing"] .p-stage {
display: flex;
flex-direction: column;
justify-content: center;
}
