/* ============================================================
homepage-templates.css — client-specific homepage designs
------------------------------------------------------------
Loaded after homepage-new.css by Views/Layouts/homepageNew.php.
Three things live here:
1. The brand-token bridge. Every client sets a primary and an
accent colour at /homepageSetup/; the layout writes them as
--hn-brand-primary / --hn-brand-accent on .hn-body and this
file re-derives the semantic tokens homepage-new.css uses,
so one pair of hex values re-skins the whole page.
2. Components shared by every template but not present in the
base sheet: banner slides, notice, steps, support, carousel.
3. The two non-default designs, scoped by the body attribute
[data-hn-template="institution"] and ="academy".
Source order matters: this file must stay after homepage-new.css
or the base sheet's hard-coded navy wins on equal specificity.
============================================================ */
/* ── 1. Brand tokens ───────────────────────────────────────── */
.hn-body {
/* Defaults; the layout overrides these two per client. */
--hn-brand-primary: #2563b0;
--hn-brand-accent: #ea580c;
}
.hn-body {
--hn-primary: var(--hn-brand-primary);
--hn-primary-dark: var(--hn-brand-primary);
--hn-accent: var(--hn-brand-accent);
/* Flat fallback first; browsers with color-mix() take the richer
gradient on the following line. */
--hn-grad-navy: var(--hn-brand-primary);
--hn-grad-navy: linear-gradient(135deg,
color-mix(in srgb, var(--hn-brand-primary) 72%, #000) 0%,
var(--hn-brand-primary) 100%);
--hn-grad-orange: var(--hn-brand-accent);
--hn-grad-orange: linear-gradient(135deg,
color-mix(in srgb, var(--hn-brand-accent) 80%, #000) 0%,
var(--hn-brand-accent) 100%);
--hn-grad-card-navy: var(--hn-grad-navy);
--hn-grad-card-orange: var(--hn-grad-orange);
--hn-grad-footer: var(--hn-brand-primary);
--hn-grad-footer: linear-gradient(160deg,
color-mix(in srgb, var(--hn-brand-primary) 55%, #05080f) 0%,
color-mix(in srgb, var(--hn-brand-primary) 88%, #05080f) 100%);
--hn-shadow-navy: 0 8px 24px color-mix(in srgb, var(--hn-brand-primary) 38%, transparent);
--hn-shadow-orange:0 8px 24px color-mix(in srgb, var(--hn-brand-accent) 34%, transparent);
}
/* Elements the base sheet paints with literal navy/orange. */
.hn-body .hn-section-title i,
.hn-body .hn-hero-eyebrow-dot { color: var(--hn-brand-primary); }
.hn-body .hn-section-eyebrow {
color: var(--hn-brand-accent);
background: color-mix(in srgb, var(--hn-brand-accent) 10%, #fff);
border-color: color-mix(in srgb, var(--hn-brand-accent) 24%, #fff);
}
.hn-body .hn-stat-icon { color: color-mix(in srgb, var(--hn-brand-accent) 70%, #fff); }
.hn-body .hn-hero-headline-accent { color: color-mix(in srgb, var(--hn-brand-accent) 78%, #fff); }
/* ── 2. Shared additions ───────────────────────────────────── */
/* Hero background driven by the client's banners / slider images.
One layer per slide; homepage-new.js rotates .is-active / .is-leaving.
The drift is a paused keyframe animation, not a transform transition. A
transition reverses the instant .is-active comes off, so every changeover
used to drag the outgoing photo back towards its start frame while it faded
— two photographs sliding opposite ways at once, which is what read as the
background racing. Pausing an animation instead leaves the photo exactly
where it stopped and resumes from there on its next turn, so the pan is one
continuous crawl that never restarts and never snaps back. Same mechanism as
.hn-hero-bg-layer in homepage-new.css. */
.hn-hero-slides {
/* Offset below the fixed navbar for the same reason as .hn-hero-bg — the bar
is opaque, so anything drawn behind it is simply lost. */
position: absolute; inset: var(--hn-navbar-h) 0 0 0;
overflow: hidden; pointer-events: none;
/* Own stacking context, so the layering below cannot compete with
.hn-hero-grid (z-index: 1) and put a photo on top of the hero copy. */
isolation: isolate;
}
.hn-hero-slide {
position: absolute; inset: 0; z-index: 0;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 0;
/* ~8% of travel spread over 44s, and only while the slide is on screen:
roughly a fifth of that per turn at the 9s cadence homepage-new.js uses. */
animation: hn-hero-slide-drift 44s ease-in-out infinite alternate;
animation-play-state: paused;
transition: opacity 2000ms linear;
will-change: opacity, transform;
backface-visibility: hidden;
}
.hn-hero-slide.is-active { opacity: 1; z-index: 2; }
/* The outgoing photo stays fully opaque underneath the incoming one and only
drops away once that is all but solid. Fading both at once would let the
hero's navy through the middle of every cross-fade as a dark pulse. */
.hn-hero-slide.is-leaving {
z-index: 1;
transition: opacity 400ms linear 1600ms;
}
/* Keep the drift running through the fade-out so the photo on its way out
never freezes half-way. */
.hn-hero-slide.is-active,
.hn-hero-slide.is-leaving { animation-play-state: running; }
@keyframes hn-hero-slide-drift {
from { transform: scale(1.06) translate3d(-1.1%, -.7%, 0); }
to { transform: scale(1.14) translate3d( 1.1%, .7%, 0); }
}
.hn-hero-slide-scrim {
/* Above the photo layers, which now carry z-indexes of their own. */
position: absolute; inset: 0; z-index: 3;
background:
linear-gradient(100deg,
rgba(4,10,24,.90) 0%,
rgba(6,15,35,.82) 34%,
rgba(8,22,52,.68) 66%,
rgba(11,34,76,.56) 100%),
linear-gradient(to bottom,
rgba(6,13,31,.55) 0%,
rgba(6,13,31,0) 28%,
rgba(6,13,31,0) 68%,
rgba(6,13,31,.68) 100%);
}
.hn-hero-slide-dots {
position: absolute; left: 50%; bottom: 18px;
transform: translateX(-50%);
display: flex; gap: 8px; z-index: 3;
}
.hn-hero-slide-dot {
width: 26px; height: 4px; padding: 0;
border: none; border-radius: var(--hn-r-full);
background: rgba(255,255,255,.32); cursor: pointer;
transition: background var(--hn-fast) var(--hn-ease), width var(--hn-fast) var(--hn-ease);
}
.hn-hero-slide-dot.is-active { background: #fff; width: 40px; }
/* Hero bullet list — used by every template above the fold. */
.hn-hero-highlights {
list-style: none; margin: 18px 0 0; padding: 0;
display: flex; flex-direction: column; gap: 9px;
}
.hn-hero-highlights li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.86);
}
.hn-hero-highlights li i { color: var(--hn-brand-accent); margin-top: 3px; flex-shrink: 0; }
/* Feature card tag pill. */
.hn-feature-tag {
display: inline-block; margin: 0 0 8px;
font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--hn-brand-primary);
background: color-mix(in srgb, var(--hn-brand-primary) 8%, #fff);
border: 1px solid color-mix(in srgb, var(--hn-brand-primary) 18%, #fff);
padding: 3px 10px; border-radius: var(--hn-r-full);
}
.hn-btn-lg { font-size: 15px; padding: 13px 26px; min-height: 52px; border-radius: var(--hn-r-md); }
/* Stats strip on a light background (academy). */
.hn-stats-strip--light {
background: #fff;
border: 1px solid var(--hn-gray-200);
box-shadow: var(--hn-shadow-sm);
backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hn-stats-strip--light .hn-stat-num { color: var(--hn-gray-800); }
.hn-stats-strip--light .hn-stat-label { color: var(--hn-gray-500); }
.hn-stats-strip--light .hn-stat-divider { background: var(--hn-gray-200); }
.hn-stats-strip--light .hn-stat-icon {
background: color-mix(in srgb, var(--hn-brand-primary) 8%, #fff);
color: var(--hn-brand-primary);
}
/* ── Notice callout ────────────────────────────────────────── */
.hn-notice {
display: flex; gap: 14px; align-items: flex-start;
background: #fff;
border: 1px solid var(--hn-gray-200);
border-left: 4px solid var(--hn-brand-accent);
border-radius: var(--hn-r-md);
padding: 18px 20px;
box-shadow: var(--hn-shadow-sm);
}
.hn-notice-icon {
width: 38px; height: 38px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border-radius: var(--hn-r-sm);
background: color-mix(in srgb, var(--hn-brand-accent) 12%, #fff);
color: var(--hn-brand-accent); font-size: 15px;
}
.hn-notice-title {
font-family: var(--hn-font-head);
font-size: 15px; font-weight: 700; color: var(--hn-gray-800);
margin: 0 0 4px;
}
.hn-notice-text { font-size: 13.5px; line-height: 1.65; color: var(--hn-gray-600); margin: 0; }
.hn-notice-cta {
display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
font-size: 13px; font-weight: 600; color: var(--hn-brand-primary); text-decoration: none;
}
.hn-notice-cta:hover { text-decoration: underline; color: var(--hn-brand-primary); }
/* Full-width band under a hero (classic). */
.hn-notice--band {
max-width: 1200px; margin: -28px auto 0;
position: relative; z-index: 5;
box-shadow: var(--hn-shadow-lg);
}
/* Inside the dark institution panel. */
.hn-notice--portal {
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.14);
border-left: 4px solid var(--hn-brand-accent);
box-shadow: none;
margin-top: 22px;
}
.hn-notice--portal .hn-notice-icon { background: rgba(255,255,255,.10); color: #fff; }
.hn-notice--portal .hn-notice-title { color: #fff; }
.hn-notice--portal .hn-notice-text { color: rgba(255,255,255,.78); }
.hn-notice--portal .hn-notice-cta { color: color-mix(in srgb, var(--hn-brand-accent) 70%, #fff); }
.hn-notice--academy { margin-top: 18px; width: 100%; max-width: 420px; }
/* ── Banner carousel (captioned) ───────────────────────────── */
.hn-banner-section { padding: 40px 0; background: var(--hn-bg); }
.hn-carousel {
position: relative;
border-radius: var(--hn-r-xl);
overflow: hidden;
box-shadow: var(--hn-shadow-lg);
background: var(--hn-gray-100);
}
.hn-carousel:focus-visible { outline: 3px solid var(--hn-brand-primary); outline-offset: 3px; }
.hn-carousel-track { position: relative; aspect-ratio: 1200 / 380; min-height: 220px; }
.hn-carousel-slide {
position: absolute; inset: 0;
display: block; opacity: 0; visibility: hidden;
transition: opacity 600ms var(--hn-ease);
text-decoration: none;
}
.hn-carousel-slide.active { opacity: 1; visibility: visible; }
.hn-carousel-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hn-carousel-caption {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 28px 32px;
background: linear-gradient(to top, rgba(5,10,22,.88) 0%, rgba(5,10,22,.55) 55%, rgba(5,10,22,0) 100%);
color: #fff;
}
.hn-carousel-caption-title {
font-family: var(--hn-font-head);
font-size: 22px; font-weight: 700; margin: 0 0 6px; color: #fff;
}
.hn-carousel-caption-sub { font-size: 14px; margin: 0; color: rgba(255,255,255,.82); max-width: 60ch; }
.hn-carousel-caption-cta {
display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
background: var(--hn-grad-orange); color: #fff;
font-size: 13px; font-weight: 600;
padding: 9px 18px; border-radius: var(--hn-r-full);
}
.hn-carousel-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 42px; height: 42px; border: none; border-radius: 50%;
background: rgba(255,255,255,.86); color: var(--hn-gray-800);
cursor: pointer; display: flex; align-items: center; justify-content: center;
box-shadow: var(--hn-shadow-md);
transition: background var(--hn-fast) var(--hn-ease);
}
.hn-carousel-nav:hover { background: #fff; }
.hn-carousel-nav-prev { left: 16px; }
.hn-carousel-nav-next { right: 16px; }
.hn-carousel-dots {
position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
display: flex; gap: 8px;
}
.hn-carousel-dot {
width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%;
background: rgba(255,255,255,.45); cursor: pointer;
transition: background var(--hn-fast) var(--hn-ease), transform var(--hn-fast) var(--hn-ease);
}
.hn-carousel-dot.active { background: #fff; transform: scale(1.3); }
/* ── Steps ─────────────────────────────────────────────────── */
.hn-steps-section { background: var(--hn-white); }
.hn-steps-grid {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.hn-step-item {
position: relative;
background: var(--hn-bg-alt);
border: 1px solid var(--hn-gray-200);
border-radius: var(--hn-r-lg);
padding: 30px 24px 26px;
}
.hn-step-number {
position: absolute; top: -14px; left: 24px;
width: 34px; height: 34px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--hn-grad-navy); color: #fff;
font-family: var(--hn-font-head); font-size: 15px; font-weight: 700;
box-shadow: var(--hn-shadow-navy);
}
.hn-step-icon {
width: 46px; height: 46px; border-radius: var(--hn-r-md);
display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--hn-brand-primary) 9%, #fff);
color: var(--hn-brand-primary); font-size: 19px;
margin: 6px 0 14px;
}
.hn-step-title { font-size: 16px; font-weight: 700; color: var(--hn-gray-800); margin: 0 0 8px; }
.hn-step-desc { font-size: 13.5px; line-height: 1.65; color: var(--hn-gray-600); margin: 0; }
/* ── Support / help desk ───────────────────────────────────── */
.hn-support-section { background: var(--hn-bg-alt); }
.hn-support-card {
display: flex; align-items: center; justify-content: space-between;
gap: 28px; flex-wrap: wrap;
background: var(--hn-grad-navy);
border-radius: var(--hn-r-xl);
padding: 34px 38px;
box-shadow: var(--hn-shadow-lg);
}
.hn-support-copy { display: flex; gap: 18px; align-items: flex-start; flex: 1 1 380px; }
.hn-support-icon {
width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--hn-r-md);
background: rgba(255,255,255,.14); color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.hn-support-title {
font-family: var(--hn-font-head);
font-size: 21px; font-weight: 700; color: #fff; margin: 0 0 6px;
}
.hn-support-desc { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.80); margin: 0; max-width: 62ch; }
.hn-support-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hn-support-link {
display: inline-flex; align-items: center; gap: 8px;
font-size: 14px; font-weight: 600; color: #fff; text-decoration: none;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.20);
padding: 11px 18px; border-radius: var(--hn-r-md);
}
.hn-support-link:hover { background: rgba(255,255,255,.20); color: #fff; text-decoration: none; }
.hn-support-actions .hn-btn-primary {
background: var(--hn-grad-orange); box-shadow: var(--hn-shadow-orange);
}
/* ============================================================
3a. Template: INSTITUTION (examination-authority portal)
============================================================ */
[data-hn-template="institution"] .hn-portal-hero {
position: relative;
padding: calc(var(--hn-navbar-h) + 56px) 0 64px;
background: var(--hn-grad-navy);
overflow: hidden;
color: #fff;
}
[data-hn-template="institution"] .hn-portal-hero .hn-container { position: relative; z-index: 2; }
/* A masthead reads as a printed notice, not a marketing headline:
centred, ruled, and set in the heading face. */
[data-hn-template="institution"] .hn-portal-masthead {
text-align: center;
max-width: 860px; margin: 0 auto 40px;
padding-bottom: 26px;
border-bottom: 1px solid rgba(255,255,255,.16);
}
[data-hn-template="institution"] .hn-portal-eyebrow {
display: inline-flex; align-items: center; gap: 9px;
font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
color: color-mix(in srgb, var(--hn-brand-accent) 76%, #fff);
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.16);
padding: 7px 16px; border-radius: var(--hn-r-full);
margin-bottom: 18px;
}
[data-hn-template="institution"] .hn-portal-headline {
font-family: var(--hn-font-head);
font-size: clamp(28px, 4vw, 42px); font-weight: 800;
line-height: 1.15; letter-spacing: -.02em;
color: #fff; margin: 0 0 14px;
}
[data-hn-template="institution"] .hn-portal-headline-accent {
display: block;
color: color-mix(in srgb, var(--hn-brand-accent) 82%, #fff);
}
[data-hn-template="institution"] .hn-portal-sub {
font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,.80);
margin: 0 auto; max-width: 68ch;
}
[data-hn-template="institution"] .hn-portal-panel {
display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: start;
}
[data-hn-template="institution"] .hn-portal-checklist {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 14px;
}
[data-hn-template="institution"] .hn-portal-checklist li {
display: flex; align-items: flex-start; gap: 13px;
font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.88);
}
[data-hn-template="institution"] .hn-portal-check {
width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--hn-brand-accent) 88%, #000);
color: #fff; font-size: 11px;
}
[data-hn-template="institution"] .hn-portal-cta { margin-top: 22px; }
[data-hn-template="institution"] .hn-stats-strip { margin-top: 22px; }
[data-hn-template="institution"] .hn-portal-login { display: flex; justify-content: center; }
[data-hn-template="institution"] .hn-portal-login .hn-login-card { max-width: 440px; }
/* The portal has no marketing sections, so the remaining bands sit
directly on white and stay quiet. */
[data-hn-template="institution"] .hn-steps-section { background: var(--hn-white); }
[data-hn-template="institution"] .hn-features { background: var(--hn-bg-alt); }
[data-hn-template="institution"] .hn-feature-item { text-align: left; }
[data-hn-template="institution"] .hn-feature-icon { margin: 0 0 16px; }
/* ============================================================
3b. Template: ACADEMY (practice platform, child + parent)
============================================================ */
[data-hn-template="academy"] { --hn-bg: #f4f9f2; }
[data-hn-template="academy"] .hn-academy-hero {
position: relative; overflow: hidden;
padding: calc(var(--hn-navbar-h) + 48px) 0 60px;
background:
radial-gradient(ellipse 60% 70% at 12% 0%, color-mix(in srgb, var(--hn-brand-accent) 14%, #fff) 0%, transparent 62%),
linear-gradient(180deg, #ffffff 0%, #f4f9f2 100%);
}
[data-hn-template="academy"] .hn-academy-blob {
position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none;
}
[data-hn-template="academy"] .hn-academy-blob-1 {
width: 420px; height: 420px; top: -120px; right: -80px;
background: color-mix(in srgb, var(--hn-brand-accent) 26%, transparent);
}
[data-hn-template="academy"] .hn-academy-blob-2 {
width: 360px; height: 360px; bottom: -160px; left: -100px;
background: color-mix(in srgb, var(--hn-brand-primary) 18%, transparent);
}
[data-hn-template="academy"] .hn-academy-grid {
position: relative; z-index: 2;
display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start;
}
[data-hn-template="academy"] .hn-academy-eyebrow {
display: inline-flex; align-items: center; gap: 9px;
font-size: 12.5px; font-weight: 700;
color: color-mix(in srgb, var(--hn-brand-accent) 70%, #000);
background: color-mix(in srgb, var(--hn-brand-accent) 14%, #fff);
border: 1px solid color-mix(in srgb, var(--hn-brand-accent) 30%, #fff);
padding: 8px 16px; border-radius: var(--hn-r-full);
margin-bottom: 20px;
}
[data-hn-template="academy"] .hn-academy-headline {
font-family: var(--hn-font-head);
font-size: clamp(30px, 4.4vw, 46px); font-weight: 800;
line-height: 1.14; letter-spacing: -.025em;
color: var(--hn-gray-800); margin: 0 0 16px;
}
[data-hn-template="academy"] .hn-academy-headline-accent { color: var(--hn-brand-accent); }
[data-hn-template="academy"] .hn-academy-sub {
font-size: 16px; line-height: 1.72; color: var(--hn-gray-600);
margin: 0 0 22px; max-width: 60ch;
}
/* Chips, not bullets — easier for a child to scan than a paragraph. */
[data-hn-template="academy"] .hn-academy-chips {
list-style: none; margin: 0 0 26px; padding: 0;
display: flex; flex-wrap: wrap; gap: 10px;
}
[data-hn-template="academy"] .hn-academy-chip {
display: inline-flex; align-items: center; gap: 8px;
background: #fff; border: 1px solid var(--hn-gray-200);
border-radius: var(--hn-r-full);
padding: 9px 16px; font-size: 13.5px; font-weight: 600; color: var(--hn-gray-700);
box-shadow: var(--hn-shadow-sm);
}
[data-hn-template="academy"] .hn-academy-chip i { color: var(--hn-brand-accent); }
[data-hn-template="academy"] .hn-academy-ctas {
display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px;
}
/* Framed artwork keeps the page bright; a dark full-bleed hero reads
as an exam hall, which is the wrong signal for practice. */
[data-hn-template="academy"] .hn-academy-media {
position: relative;
aspect-ratio: 16 / 8;
border-radius: var(--hn-r-xl);
overflow: hidden;
border: 6px solid #fff;
box-shadow: var(--hn-shadow-lg);
margin-bottom: 26px;
}
[data-hn-template="academy"] .hn-academy-media-slide {
position: absolute; inset: 0; margin: 0;
opacity: 0; visibility: hidden;
transition: opacity 900ms var(--hn-ease);
}
[data-hn-template="academy"] .hn-academy-media-slide.is-active { opacity: 1; visibility: visible; }
/* visibility is not interpolated, so without this the outgoing figure is cut
dead the moment .is-active comes off and the 900ms fade above never plays.
homepage-new.js holds .is-leaving on it for the length of that fade. */
[data-hn-template="academy"] .hn-academy-media-slide.is-leaving { visibility: visible; }
[data-hn-template="academy"] .hn-academy-media-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-hn-template="academy"] .hn-academy-media-slide figcaption {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 22px 24px 16px;
background: linear-gradient(to top, rgba(5,10,22,.80), rgba(5,10,22,0));
color: #fff; font-size: 14px; font-weight: 600;
}
[data-hn-template="academy"] .hn-academy-right {
display: flex; flex-direction: column; align-items: center;
position: sticky; top: calc(var(--hn-navbar-h) + 24px);
}
[data-hn-template="academy"] .hn-login-card--academy { box-shadow: var(--hn-shadow-xl); }
/* Larger tap targets: the primary device here is a shared tablet.
The size stays at 16px: this selector outranks the phone-tier `.hn-input`
rule in homepage-new.css, so anything smaller made iOS Safari zoom the whole
page the moment a child tapped the username field, with no way back out. */
[data-hn-template="academy"] .hn-input { min-height: 48px; font-size: 16px; }
[data-hn-template="academy"] .hn-btn-card { min-height: 46px; font-size: 14px; }
[data-hn-template="academy"] .hn-step-item { padding: 32px 26px 28px; }
[data-hn-template="academy"] .hn-feature-item { padding: 30px 22px; }
/* ============================================================
3c. Template: MARKETPLACE (test-series catalogue)
------------------------------------------------------------
Colour comes entirely from --hn-brand-primary / --hn-brand-accent via the
bridge in section 1, so this design re-skins with the client's two hex values
like the others. The only literals are neutrals and alpha.
Contrast note: the hero CTA does NOT reuse --hn-brand-accent. The accent is
whatever hue the tenant picked and can be anything from a pale amber to a deep
violet, so no single ink is readable on it — PracticeNexa's violet accent with
the dark ink this first shipped with measured 2.89:1, a fail.
The CTA therefore has its own pair, and the DEFAULT is white-on-primary, which
is high contrast on any dark hero a tenant can produce. A tenant that has a
third brand colour overrides the pair in its client stylesheet and takes
responsibility for the ratio there, where the actual hex is known.
============================================================ */
[data-hn-template="marketplace"] {
--hn-bg: #f6f5fc;
--hn-mkt-cta-bg: #ffffff;
--hn-mkt-cta-ink: var(--hn-brand-primary);
}
/* ── Hero ──────────────────────────────────────────────────── */
[data-hn-template="marketplace"] .hn-mkt-hero {
position: relative; overflow: hidden;
padding: calc(var(--hn-navbar-h) + 56px) 0 44px;
background: var(--hn-grad-hero);
color: #fff;
}
/* The client's banners sit behind the brand ground rather than replacing it:
at 22% they read as texture, and the headline keeps its contrast whatever
the photograph happens to be. */
[data-hn-template="marketplace"] .hn-hero-slides { opacity: .22; }
[data-hn-template="marketplace"] .hn-hero-slide-scrim {
background: linear-gradient(180deg,
color-mix(in srgb, var(--hn-brand-primary) 62%, #05040f) 0%,
color-mix(in srgb, var(--hn-brand-primary) 30%, transparent) 100%);
}
[data-hn-template="marketplace"] .hn-mkt-glow {
position: absolute; border-radius: 50%; filter: blur(110px); pointer-events: none; z-index: 0;
}
[data-hn-template="marketplace"] .hn-mkt-glow-1 {
width: 520px; height: 520px; top: -220px; right: -140px;
background: color-mix(in srgb, var(--hn-brand-accent) 46%, transparent);
}
[data-hn-template="marketplace"] .hn-mkt-glow-2 {
width: 420px; height: 420px; bottom: -240px; left: -120px;
background: color-mix(in srgb, var(--hn-brand-primary) 60%, transparent);
}
[data-hn-template="marketplace"] .hn-mkt-grid {
position: relative; z-index: 2;
display: grid; grid-template-columns: 1.1fr .9fr; gap: 52px; align-items: center;
}
[data-hn-template="marketplace"] .hn-mkt-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px; border-radius: 999px;
font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: #fff;
background: rgba(255,255,255,.13);
border: 1px solid rgba(255,255,255,.22);
backdrop-filter: blur(4px);
}
[data-hn-template="marketplace"] .hn-mkt-eyebrow i { color: var(--hn-brand-accent); }
[data-hn-template="marketplace"] .hn-mkt-headline {
font-family: 'Poppins', 'Inter', sans-serif;
font-size: clamp(34px, 4.4vw, 56px); line-height: 1.08; font-weight: 800;
letter-spacing: -0.02em; margin: 18px 0 0; color: #fff;
}
[data-hn-template="marketplace"] .hn-mkt-headline-accent {
display: block;
/* Mixed toward white so the accent stays a highlight on a dark ground rather
than a second, competing dark. */
color: color-mix(in srgb, var(--hn-brand-accent) 55%, #fff);
}
[data-hn-template="marketplace"] .hn-mkt-sub {
font-size: 16.5px; line-height: 1.65; margin: 18px 0 0;
color: rgba(255,255,255,.80); max-width: 54ch;
}
[data-hn-template="marketplace"] .hn-mkt-chips {
list-style: none; margin: 22px 0 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 10px;
}
[data-hn-template="marketplace"] .hn-mkt-chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 13px; border-radius: 10px;
font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.90);
background: rgba(255,255,255,.09);
border: 1px solid rgba(255,255,255,.16);
}
[data-hn-template="marketplace"] .hn-mkt-chip i {
font-size: 11px; color: color-mix(in srgb, var(--hn-brand-accent) 60%, #fff);
}
[data-hn-template="marketplace"] .hn-mkt-ctas {
display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px;
}
[data-hn-template="marketplace"] .hn-mkt-btn-primary {
background: var(--hn-mkt-cta-bg);
color: var(--hn-mkt-cta-ink);
border: 1px solid transparent;
font-weight: 700;
box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
[data-hn-template="marketplace"] .hn-mkt-btn-primary:hover {
background: color-mix(in srgb, var(--hn-mkt-cta-bg) 90%, #000);
color: var(--hn-mkt-cta-ink); transform: translateY(-2px);
}
[data-hn-template="marketplace"] .hn-mkt-btn-ghost {
background: rgba(255,255,255,.10);
color: #fff; border: 1px solid rgba(255,255,255,.34); font-weight: 600;
}
[data-hn-template="marketplace"] .hn-mkt-btn-ghost:hover {
background: rgba(255,255,255,.18); color: #fff; transform: translateY(-2px);
}
[data-hn-template="marketplace"] .hn-login-card--marketplace { box-shadow: var(--hn-shadow-xl); }
/* ── Browse-by-exam rail ───────────────────────────────────── */
[data-hn-template="marketplace"] .hn-mkt-rail {
position: relative; z-index: 2;
margin-top: 40px; padding-top: 24px;
border-top: 1px solid rgba(255,255,255,.14);
display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
}
[data-hn-template="marketplace"] .hn-mkt-rail-label {
flex-shrink: 0;
font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
color: rgba(255,255,255,.55);
}
/* Wraps rather than scrolling. A nowrap rail cut the last chip in half at the
container edge, which reads as a broken layout rather than as an invitation to
scroll — and there is no affordance here to say otherwise. The list is bounded
by the packages on the page (eight cards, so eight families at the very most),
so wrapping costs one extra row in the worst case. */
[data-hn-template="marketplace"] .hn-mkt-rail-list {
list-style: none; margin: 0; padding: 0;
display: flex; gap: 10px; flex-wrap: wrap;
}
[data-hn-template="marketplace"] .hn-mkt-rail-chip {
display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
padding: 8px 14px; border-radius: 999px;
font-size: 13.5px; font-weight: 600; text-decoration: none;
color: #fff; background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.18);
transition: background var(--hn-fast, .18s) ease, transform var(--hn-fast, .18s) ease;
}
[data-hn-template="marketplace"] .hn-mkt-rail-chip:hover {
background: rgba(255,255,255,.20); color: #fff; transform: translateY(-1px);
}
[data-hn-template="marketplace"] .hn-mkt-rail-chip:focus-visible {
outline: 2px solid var(--hn-brand-accent); outline-offset: 2px;
}
/* The two-or-three letter family code, so the rail is scannable by shape as
well as by word. */
[data-hn-template="marketplace"] .hn-mkt-rail-code {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px;
font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
background: rgba(255,255,255,.20); color: #fff;
}
[data-hn-template="marketplace"] .hn-mkt-rail-chip--all {
background: var(--hn-mkt-cta-bg); color: var(--hn-mkt-cta-ink); border-color: transparent;
}
[data-hn-template="marketplace"] .hn-mkt-rail-chip--all:hover {
background: color-mix(in srgb, var(--hn-mkt-cta-bg) 90%, #000); color: var(--hn-mkt-cta-ink);
}
[data-hn-template="marketplace"] .hn-mkt-rail-chip--all i { font-size: 11px; }
/* Stats sit on the hero's dark ground here, so the base (dark) styling is
already right — it only needs separating from the rail above it. */
[data-hn-template="marketplace"] .hn-stats-strip { margin-top: 28px; }
/* ── The shelf leads ───────────────────────────────────────── */
/* packages-section.php ships with .hn-section-alt, which is the tinted band used
to separate a section sitting between two others. Here it is the FIRST thing
under the hero, so the band would read as a stripe rather than a separation. */
[data-hn-template="marketplace"] #hn-packages-section.hn-section-alt {
background: transparent;
padding-top: 54px;
}
[data-hn-template="marketplace"] #hn-packages-section .hn-section-title {
font-size: clamp(24px, 2.6vw, 32px);
}
/* The exam feed self-hides while empty, so the steps band can end up directly
under the shelf; a tint keeps the two from running together. */
[data-hn-template="marketplace"] .hn-steps-section { background: #fff; }
/* ── Responsive ────────────────────────────────────────────── */
/* Breakpoints match homepage-new.css exactly. They used to be 1024/768 against
its 1023/767, so at a 767.5px viewport — real on Android at fractional device
pixel ratios — the phone tier here fired while --hn-navbar-h was still the
68px desktop value, and the two hero paddings disagreed. */
@media (max-width: 1023.98px) {
[data-hn-template="institution"] .hn-portal-panel,
[data-hn-template="academy"] .hn-academy-grid,
[data-hn-template="marketplace"] .hn-mkt-grid {
grid-template-columns: 1fr; gap: 32px;
}
/* Same reasoning as the institution panel below: once the hero stacks, the
sign-in card belongs above the fold, not a screen under the copy. */
[data-hn-template="marketplace"] .hn-mkt-right { order: -1; }
[data-hn-template="marketplace"] .hn-mkt-rail { flex-direction: column; align-items: flex-start; gap: 10px; }
[data-hn-template="academy"] .hn-academy-right { position: static; }
.hn-steps-grid { grid-template-columns: repeat(2, 1fr); }
/* This page has one job — sign an enrolled candidate in — so once the panel
stacks, the card comes before the instructions rather than a screen below
them. Matches what the classic hero already does at this width. */
[data-hn-template="institution"] .hn-portal-login { order: -1; }
}
@media (max-width: 767.98px) {
.hn-steps-grid { grid-template-columns: 1fr; gap: 26px; }
[data-hn-template="marketplace"] .hn-mkt-hero { padding: calc(var(--hn-navbar-h) + 32px) 0 32px; }
[data-hn-template="marketplace"] .hn-mkt-sub { font-size: 15px; }
/* Full-width taps, and the rail keeps its horizontal scroll rather than
wrapping into a block of chips that pushes the shelf off the screen. */
[data-hn-template="marketplace"] .hn-mkt-ctas { flex-direction: column; align-items: stretch; }
[data-hn-template="marketplace"] .hn-mkt-ctas .hn-btn { justify-content: center; min-height: 48px; }
[data-hn-template="marketplace"] .hn-mkt-rail { margin-top: 28px; padding-top: 18px; }
[data-hn-template="marketplace"] #hn-packages-section.hn-section-alt { padding-top: 34px; }
.hn-step-item { padding: 26px 18px 22px; }
.hn-notice { padding: 15px 16px; gap: 12px; }
.hn-notice--band { margin: -20px 16px 0; }
.hn-hero-highlights li { font-size: 13.5px; }
/* Support: the email and phone links are the actions here just as much as the
button beside them, so they get the same full-width row — and a break, or a
long support address runs past the card edge. */
.hn-support-card { padding: 24px 18px; gap: 20px; }
.hn-support-title { font-size: 18px; }
.hn-support-desc { font-size: 13.5px; }
.hn-support-actions { width: 100%; gap: 10px; }
.hn-support-actions .hn-btn,
.hn-support-link { flex: 1 1 100%; justify-content: center; min-height: 48px; }
.hn-support-link { overflow-wrap: anywhere; }
/* Banner carousel. Uploaded banners are ~1200x380; forcing them into 4/3 threw
away more than half the width of every one. 3/2 keeps most of the artwork,
and the sub-line is clamped so the caption stops swallowing the image. */
.hn-banner-section { padding: 28px 0; }
.hn-carousel-track { aspect-ratio: 3 / 2; min-height: 200px; }
.hn-carousel-caption { padding: 14px 16px; }
.hn-carousel-caption-title { font-size: 16px; }
.hn-carousel-caption-sub {
font-size: 12.5px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hn-carousel-caption-cta { margin-top: 10px; }
.hn-carousel-nav { width: 44px; height: 44px; top: calc((100% - 46px) / 2); }
.hn-carousel-nav-prev { left: 8px; }
.hn-carousel-nav-next { right: 8px; }
/* Dots move out from over the caption into a row of their own under the
image, where a 44px target fits without covering anything. */
.hn-carousel-dots {
position: static; transform: none;
height: 46px; align-items: center; justify-content: center; gap: 0;
}
.hn-carousel-dot {
width: 32px; height: 44px; padding: 0; background: none; transform: none;
display: flex; align-items: center; justify-content: center;
}
.hn-carousel-dot.active { background: none; transform: none; }
.hn-carousel-dot::after {
content: ''; width: 9px; height: 9px; border-radius: 50%;
background: var(--hn-gray-300);
transition: background var(--hn-fast) var(--hn-ease), transform var(--hn-fast) var(--hn-ease);
}
.hn-carousel-dot.active::after { background: var(--hn-brand-primary); transform: scale(1.3); }
/* Hero slide dots: same treatment, kept inside the hero's bottom padding.
The slide count is however many banners the tenant uploaded, so the row
wraps rather than running off the edge. */
.hn-hero-slide-dots {
bottom: 2px; gap: 0;
flex-wrap: wrap; justify-content: center;
max-width: calc(100vw - 24px);
}
.hn-hero-slide-dot {
width: 44px; height: 44px; background: none;
display: flex; align-items: center; justify-content: center;
}
.hn-hero-slide-dot.is-active { width: 56px; background: none; }
.hn-hero-slide-dot::after {
content: ''; width: 26px; height: 4px; border-radius: var(--hn-r-full);
background: rgba(255,255,255,.32);
transition: background var(--hn-fast) var(--hn-ease), width var(--hn-fast) var(--hn-ease);
}
.hn-hero-slide-dot.is-active::after { width: 40px; background: #fff; }
/* ── INSTITUTION ─────────────────────────────────────────── */
[data-hn-template="institution"] .hn-portal-hero { padding: calc(var(--hn-navbar-h) + 28px) 0 50px; }
[data-hn-template="institution"] .hn-portal-masthead { margin-bottom: 26px; padding-bottom: 20px; }
[data-hn-template="institution"] .hn-portal-sub { font-size: 14.5px; }
[data-hn-template="institution"] .hn-portal-panel { gap: 26px; }
[data-hn-template="institution"] .hn-portal-checklist { gap: 11px; }
[data-hn-template="institution"] .hn-portal-checklist li { font-size: 14px; }
/* Was inheriting full width from the navbar button rule in homepage-new.css,
which is now scoped to the menu. */
[data-hn-template="institution"] .hn-portal-cta { width: 100%; justify-content: center; }
/* ── ACADEMY ─────────────────────────────────────────────── */
[data-hn-template="academy"] .hn-academy-hero { padding: calc(var(--hn-navbar-h) + 24px) 0 40px; }
[data-hn-template="academy"] .hn-academy-grid { gap: 28px; }
[data-hn-template="academy"] .hn-academy-blob { display: none; }
[data-hn-template="academy"] .hn-academy-sub { font-size: 15px; margin-bottom: 18px; }
[data-hn-template="academy"] .hn-academy-chips { gap: 8px; margin-bottom: 20px; }
[data-hn-template="academy"] .hn-academy-chip { padding: 8px 13px; font-size: 13px; }
[data-hn-template="academy"] .hn-academy-ctas { gap: 10px; margin-bottom: 22px; }
[data-hn-template="academy"] .hn-academy-ctas .hn-btn { flex: 1 1 100%; }
[data-hn-template="academy"] .hn-academy-media { border-width: 4px; margin-bottom: 20px; }
[data-hn-template="academy"] .hn-academy-media-slide figcaption { padding: 16px 16px 12px; font-size: 13px; }
.hn-notice--academy { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
.hn-hero-slide { animation: none; transform: none; transition: opacity 200ms linear; }
.hn-hero-slide.is-active { transform: none; }
/* Outranks the delayed fade-out above on specificity, media query or not. */
.hn-hero-slide.is-leaving { transition: opacity 200ms linear; }
.hn-carousel-slide,
[data-hn-template="academy"] .hn-academy-media-slide { transition: none; }
}
/* ============================================================
3d. MARKETPLACE inside the Android app shell — card stack
------------------------------------------------------------
The WebView hides the site navbar and footer (.hn-app-shell on
), which until now meant the app showed the desktop page
squeezed into a phone: 68px of hero padding reserved for a navbar
that is not there, and the package cards flattened into side-on
list rows by the shared phone CSS in homepage-new.css.
Everything here is scoped .hn-app-shell[data-hn-template="marketplace"],
so it renders on exactly one surface: the marketplace template opened
inside the Android app. Phone BROWSERS keep the responsive website
layout — never key this on MOBILE_UI (see
tests/qa_mobile_app_shell_regression.php for why the app flag must
not leak into browser sessions), and the other templates
(classic / institution / academy) never match the attribute.
Colour comes from the same --hn-brand-* pair as the rest of the
template, so a theme change at /homepageSetup/ carries through.
============================================================ */
/* No in-page bar: the Android app draws its own native toolbar and
bottom navigation (with a Login tab), so the page adds no chrome of
its own — it opens straight on the hero card below.
Every color-mix() below is preceded by a flat fallback, the same
discipline as section 1: an older WebView that cannot parse
color-mix drops the whole declaration, and without the fallback the
hero card shipped with white text on no background. */
@media (max-width: 767.98px) {
.hn-app-shell[data-hn-template="marketplace"] .hn-container { padding: 0 16px; }
.hn-app-shell[data-hn-template="marketplace"] .hn-section { padding: 30px 0; }
/* The stack reads as one screen; per-section eyebrows and title icons
are desktop rhythm it does not need. */
.hn-app-shell[data-hn-template="marketplace"] .hn-section-eyebrow,
.hn-app-shell[data-hn-template="marketplace"] .hn-section-title i { display: none; }
/* ── Hero: dark band → brand card on the light ground ────── */
.hn-app-shell[data-hn-template="marketplace"] .hn-mkt-hero {
background: var(--hn-bg);
padding: 0 0 4px;
color: var(--hn-text);
overflow: visible; /* the band clipped its own card's shadow */
}
.hn-app-shell[data-hn-template="marketplace"] .hn-mkt-glow,
.hn-app-shell[data-hn-template="marketplace"] .hn-hero-slides,
.hn-app-shell[data-hn-template="marketplace"] .hn-hero-slide-dots,
.hn-app-shell[data-hn-template="marketplace"] .hn-login-trigger-row { display: none; }
/* The right grid cell only hosts the fixed bottom sheet on phones, so the
stacked grid's gap was pure dead space above the copy. Never hide the
cell itself — the sheet lives inside it. */
.hn-app-shell[data-hn-template="marketplace"] .hn-mkt-grid { gap: 0; }
.hn-app-shell[data-hn-template="marketplace"] .hn-mkt-left {
position: relative; overflow: hidden;
margin-top: 16px;
border-radius: var(--hn-r-xl);
padding: 24px 20px;
background: var(--hn-brand-primary);
background: linear-gradient(140deg,
color-mix(in srgb, var(--hn-brand-primary) 62%, #05040f) 0%,
var(--hn-brand-primary) 48%,
color-mix(in srgb, var(--hn-brand-primary) 45%, var(--hn-brand-accent)) 100%);
box-shadow: 0 4px 12px rgba(0,0,0,.12);
box-shadow: 0 16px 40px color-mix(in srgb, var(--hn-brand-primary) 26%, transparent),
0 4px 12px rgba(0,0,0,.06);
}
.hn-app-shell[data-hn-template="marketplace"] .hn-mkt-headline { font-size: 27px; margin-top: 14px; }
.hn-app-shell[data-hn-template="marketplace"] .hn-mkt-sub { font-size: 13.5px; margin-top: 12px; }
/* Highlight chips → bare check rows inside the card. */
.hn-app-shell[data-hn-template="marketplace"] .hn-mkt-chips { margin-top: 14px; gap: 8px; flex-direction: column; align-items: flex-start; }
.hn-app-shell[data-hn-template="marketplace"] .hn-mkt-chip {
padding: 0; border: 0; border-radius: 0; background: transparent;
font-size: 13px;
}
.hn-app-shell[data-hn-template="marketplace"] .hn-mkt-ctas { margin-top: 18px; gap: 10px; }
.hn-app-shell[data-hn-template="marketplace"] .hn-mkt-ctas .hn-btn { border-radius: 14px; }
.hn-app-shell[data-hn-template="marketplace"] .hn-mkt-btn-primary { min-height: 50px; }
.hn-app-shell[data-hn-template="marketplace"] .hn-mkt-btn-ghost { min-height: 46px; }
/* ── Browse-by-exam: dark wrap → light swipe rail ────────── */
.hn-app-shell[data-hn-template="marketplace"] .hn-mkt-rail {
border-top: 0; margin-top: 22px; padding-top: 0;
}
.hn-app-shell[data-hn-template="marketplace"] .hn-mkt-rail-label { color: var(--hn-gray-500); }
/* One swipeable row. The wrap-don't-scroll comment in §3c is about the
DARK rail sitting inside the hero band, where a cut chip read as
broken; here the row sits on the page ground and bleeds through the
16px gutter, which is its scroll affordance. */
.hn-app-shell[data-hn-template="marketplace"] .hn-mkt-rail-list {
flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
width: 100%;
margin: 0 -16px; padding: 2px 16px 6px;
scrollbar-width: none;
}
.hn-app-shell[data-hn-template="marketplace"] .hn-mkt-rail-list::-webkit-scrollbar { display: none; }
.hn-app-shell[data-hn-template="marketplace"] .hn-mkt-rail-chip {
min-height: 44px;
background: var(--hn-white);
color: var(--hn-brand-primary);
border: 1px solid var(--hn-gray-200);
box-shadow: var(--hn-shadow-sm);
}
.hn-app-shell[data-hn-template="marketplace"] .hn-mkt-rail-code {
background: var(--hn-navy-50);
background: color-mix(in srgb, var(--hn-brand-primary) 10%, #fff);
color: var(--hn-brand-primary);
}
.hn-app-shell[data-hn-template="marketplace"] .hn-mkt-rail-chip--all {
background: var(--hn-brand-primary); color: #fff; border-color: transparent;
}
/* ── Stats: glass strip → white tiles ────────────────────── */
.hn-app-shell[data-hn-template="marketplace"] .hn-stats-strip {
margin-top: 20px; padding: 0;
background: transparent; border: 0;
backdrop-filter: none; -webkit-backdrop-filter: none;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.hn-app-shell[data-hn-template="marketplace"] .hn-stat-divider { display: none; }
.hn-app-shell[data-hn-template="marketplace"] .hn-stat {
background: var(--hn-white);
border: 1px solid var(--hn-gray-100);
border-radius: var(--hn-r-lg);
padding: 14px 16px;
box-shadow: var(--hn-shadow-sm);
}
.hn-app-shell[data-hn-template="marketplace"] .hn-stat-icon {
border-radius: 10px;
background: var(--hn-gray-100);
background: color-mix(in srgb, var(--hn-brand-accent) 10%, #fff);
color: var(--hn-brand-accent);
}
.hn-app-shell[data-hn-template="marketplace"] .hn-stat-num { color: var(--hn-navy-800); }
.hn-app-shell[data-hn-template="marketplace"] .hn-stat-label { color: var(--hn-text-muted); }
/* ── Shelf: side-on rows → proper cards ──────────────────── */
.hn-app-shell[data-hn-template="marketplace"] #hn-packages-section.hn-section-alt { padding-top: 24px; }
.hn-app-shell[data-hn-template="marketplace"] .hn-cards-grid { gap: 16px; }
/* Undo the shared phone layout from homepage-new.css: back to the
desktop card anatomy — cover on top, body, footer under a rule. */
.hn-app-shell[data-hn-template="marketplace"] .hn-pkg-card {
display: flex; flex-direction: column;
}
.hn-app-shell[data-hn-template="marketplace"] .hn-pkg-card-body { padding: 16px 16px 12px; gap: 9px; }
.hn-app-shell[data-hn-template="marketplace"] .hn-pkg-card-footer {
padding: 12px 16px 16px;
border-top: 1px solid var(--hn-gray-100);
}
.hn-app-shell[data-hn-template="marketplace"] .hn-pkg-card-top .hn-chip-subject { display: inline-flex; }
.hn-app-shell[data-hn-template="marketplace"] .hn-pkg-card-footer .hn-btn-card {
min-height: 44px; border-radius: 10px; padding: 0 18px;
}
/* ── Steps: floating-number panels → compact numbered rows ─ */
.hn-app-shell[data-hn-template="marketplace"] .hn-steps-section { background: transparent; }
.hn-app-shell[data-hn-template="marketplace"] .hn-features-heading { text-align: left; margin-bottom: 16px; }
.hn-app-shell[data-hn-template="marketplace"] .hn-features-heading .hn-section-title { justify-content: flex-start; margin-top: 0; }
.hn-app-shell[data-hn-template="marketplace"] .hn-steps-grid { gap: 12px; }
.hn-app-shell[data-hn-template="marketplace"] .hn-step-item {
display: grid; grid-template-columns: 34px minmax(0, 1fr);
column-gap: 14px; align-items: start;
background: var(--hn-white);
border: 1px solid var(--hn-gray-100);
border-radius: var(--hn-r-lg);
padding: 16px;
box-shadow: var(--hn-shadow-sm);
}
.hn-app-shell[data-hn-template="marketplace"] .hn-step-number {
position: static; grid-row: 1 / span 2;
border-radius: 10px;
background: linear-gradient(135deg, var(--hn-brand-primary), var(--hn-brand-accent));
box-shadow: none;
}
.hn-app-shell[data-hn-template="marketplace"] .hn-step-icon { display: none; }
.hn-app-shell[data-hn-template="marketplace"] .hn-step-title { grid-column: 2; align-self: center; font-size: 14.5px; margin: 0; }
.hn-app-shell[data-hn-template="marketplace"] .hn-step-desc { grid-column: 2; font-size: 12.5px; line-height: 1.55; margin: 4px 0 0; }
/* ── Features + support: fold into the same stack ────────── */
.hn-app-shell[data-hn-template="marketplace"] .hn-features { padding: 30px 0; }
.hn-app-shell[data-hn-template="marketplace"] .hn-feature-item { border-radius: var(--hn-r-lg); }
.hn-app-shell[data-hn-template="marketplace"] .hn-support-section { background: transparent; padding-bottom: 44px; }
.hn-app-shell[data-hn-template="marketplace"] .hn-support-card { border-radius: var(--hn-r-xl); }
}
/* ============================================================
3e. Template: SHOWCASE (demo / evaluation entrance)
------------------------------------------------------------
A dark ground, which none of the other designs on this sheet use above the
fold, because this page is not selling a course to a student — it is showing
software to somebody deciding whether to buy it, and the product frame has to
be the brightest thing on the screen.
Colour still comes from --hn-brand-primary / --hn-brand-accent through the
bridge in section 1: the dark ground is the client's primary mixed toward
near-black, so a second tenant that adopts this design gets its own dark, not
this one's navy. Literals are neutrals, alpha and the greys of the abstract
product frame — that frame is a picture of a UI, so it keeps the UI's greys
whatever the brand hue is.
The white-on-dark rules for the NAVBAR are desktop-only on purpose. Below
768px the shared sheet turns .hn-nav-links into a white dropdown panel and
re-inks the links navy; colouring them white here would leave the phone menu
white on white.
============================================================ */
[data-hn-template="showcase"] {
--hn-bg: #f8faff;
/* Flat fallback first, color-mix second — same pattern as section 1. */
--hn-sc-ink-900: #0a1628;
--hn-sc-ink-900: color-mix(in srgb, var(--hn-brand-primary) 28%, #04070e);
--hn-sc-ink-800: #0d2045;
--hn-sc-ink-800: color-mix(in srgb, var(--hn-brand-primary) 52%, #04070e);
--hn-sc-hero-ground: var(--hn-brand-primary);
--hn-sc-hero-ground: linear-gradient(150deg,
var(--hn-sc-ink-900) 0%,
var(--hn-sc-ink-800) 46%,
var(--hn-brand-primary) 100%);
--hn-sc-accent-light: var(--hn-brand-accent);
--hn-sc-accent-light: color-mix(in srgb, var(--hn-brand-accent) 62%, #fff);
/* One scale for text on the dark ground, so the hero and the closing band
cannot drift apart. */
--hn-sc-on-dark: rgba(255,255,255,.78);
--hn-sc-on-dark-soft: rgba(255,255,255,.62);
--hn-sc-hairline: rgba(255,255,255,.18);
}
/* ── Navbar: dark, over the dark hero ──────────────────────── */
[data-hn-template="showcase"] .hn-navbar {
background: var(--hn-sc-ink-900);
border-bottom: 1px solid var(--hn-sc-hairline);
box-shadow: none;
}
[data-hn-template="showcase"] .hn-navbar.hn-navbar-scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.38); }
/* The wordmark itself is not styled here: hn-header.php asks inc_app_brand.php for
its 'dark' surface, and app-brand.css whitens it. */
[data-hn-template="showcase"] .hn-sc-brand-group {
display: flex; align-items: center; gap: 14px; min-width: 0;
}
[data-hn-template="showcase"] .hn-sc-live-chip {
display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
padding: 5px 11px; border-radius: var(--hn-r-full);
background: rgba(34,197,94,.14);
border: 1px solid rgba(34,197,94,.38);
font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--hn-green-400);
white-space: nowrap;
}
[data-hn-template="showcase"] .hn-sc-live-dot {
width: 6px; height: 6px; border-radius: var(--hn-r-full);
background: var(--hn-green-500);
}
@media (min-width: 768px) {
[data-hn-template="showcase"] .hn-nav-link { color: rgba(255,255,255,.84); }
[data-hn-template="showcase"] .hn-nav-link:hover { color: #fff; background: rgba(255,255,255,.10); }
[data-hn-template="showcase"] .hn-navbar .hn-btn-outline {
color: #fff; border-color: rgba(255,255,255,.40); background: transparent;
}
[data-hn-template="showcase"] .hn-navbar .hn-btn-outline:hover {
background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.70); color: #fff;
}
}
/* This bar carries two links the other designs do not, and between the hamburger
breakpoint and about 1200px that was enough to wrap "For institutions" onto a
second line and push it into the brand. Nothing in the bar wraps; below 1200px
the links also give up their side padding. */
@media (min-width: 768px) {
[data-hn-template="showcase"] .hn-nav-link { white-space: nowrap; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
[data-hn-template="showcase"] .hn-nav-link { padding: 8px 8px; }
[data-hn-template="showcase"] .hn-navbar .hn-btn { padding: 10px 14px; }
}
/* The bar's own call to action is the accent, not the primary: on a ground made
FROM the primary, a primary-gradient button disappears into it. */
[data-hn-template="showcase"] .hn-navbar .hn-btn-primary {
background: var(--hn-grad-orange);
box-shadow: var(--hn-shadow-orange);
}
[data-hn-template="showcase"] .hn-hamburger {
background: rgba(255,255,255,.10);
border-color: rgba(255,255,255,.24);
}
[data-hn-template="showcase"] .hn-hamburger span { background: #fff; }
[data-hn-template="showcase"] .hn-navbar-signin { color: #fff; }
/* ── Shared button variants used by this design ────────────── */
/* 22px of side padding, not 26: at the 1200px container the pair of hero CTAs
measured 601px against a 582px copy column and wrapped, which left two pills of
different widths stacked on a desktop. */
[data-hn-template="showcase"] .hn-sc-btn-lg {
min-height: 54px; padding: 0 22px; font-size: 15.5px; border-radius: var(--hn-r-full);
}
[data-hn-template="showcase"] .hn-btn-orange { border-radius: var(--hn-r-full); font-weight: 700; }
[data-hn-template="showcase"] .hn-sc-btn-ghost {
background: transparent; color: #fff;
border: 1.5px solid rgba(255,255,255,.38);
}
[data-hn-template="showcase"] .hn-sc-btn-ghost:hover {
background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.68);
color: #fff; text-decoration: none; transform: translateY(-1px);
}
[data-hn-template="showcase"] .hn-sc-btn-outline {
background: var(--hn-white); color: var(--hn-brand-primary);
border: 1.5px solid var(--hn-navy-100);
border-radius: var(--hn-r-full); min-height: 48px; padding: 0 22px; font-size: 15px;
box-shadow: var(--hn-shadow-sm);
}
[data-hn-template="showcase"] .hn-sc-btn-outline:hover {
border-color: var(--hn-brand-primary); color: var(--hn-brand-primary);
text-decoration: none; transform: translateY(-1px);
}
/* ── Hero ──────────────────────────────────────────────────── */
[data-hn-template="showcase"] .hn-sc-hero {
position: relative; overflow: hidden;
padding: calc(var(--hn-navbar-h) + 64px) 0 72px;
background: var(--hn-sc-hero-ground);
color: #fff;
}
[data-hn-template="showcase"] .hn-sc-glow {
position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0;
}
[data-hn-template="showcase"] .hn-sc-glow-1 {
width: 520px; height: 520px; top: -240px; right: -120px;
background: color-mix(in srgb, var(--hn-brand-accent) 34%, transparent);
}
[data-hn-template="showcase"] .hn-sc-glow-2 {
width: 460px; height: 460px; bottom: -260px; left: -160px;
background: color-mix(in srgb, var(--hn-brand-primary) 62%, transparent);
}
/* The copy column is the wider one. Equal columns broke the headline after its
third word ("See the exam / software"), and the product frame reads perfectly
well at 560px — it is a picture of a screen, not a screen. */
[data-hn-template="showcase"] .hn-sc-hero-grid {
position: relative; z-index: 2;
display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr);
gap: 56px; align-items: center;
}
[data-hn-template="showcase"] .hn-sc-hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
[data-hn-template="showcase"] .hn-sc-eyebrow {
display: inline-flex; align-items: center; gap: 9px;
padding: 7px 14px; border-radius: var(--hn-r-full);
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.22);
font-size: 12.5px; font-weight: 600; letter-spacing: .03em;
color: rgba(255,255,255,.88);
}
[data-hn-template="showcase"] .hn-sc-eyebrow-dot {
width: 7px; height: 7px; border-radius: var(--hn-r-full);
background: var(--hn-green-500); flex-shrink: 0;
}
[data-hn-template="showcase"] .hn-sc-headline {
font-family: var(--hn-font-head);
font-size: clamp(32px, 3.8vw, 50px); line-height: 1.08; font-weight: 800;
letter-spacing: -0.035em; margin: 22px 0 0; color: #fff; text-wrap: pretty;
}
[data-hn-template="showcase"] .hn-sc-headline-accent { color: var(--hn-sc-accent-light); }
[data-hn-template="showcase"] .hn-sc-sub {
font-size: 17px; line-height: 1.62; margin: 20px 0 0;
color: var(--hn-sc-on-dark); max-width: 52ch; text-wrap: pretty;
}
[data-hn-template="showcase"] .hn-sc-highlights {
list-style: none; margin: 18px 0 0; padding: 0;
display: flex; flex-direction: column; gap: 9px;
}
[data-hn-template="showcase"] .hn-sc-highlights li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 15px; color: var(--hn-sc-on-dark);
}
[data-hn-template="showcase"] .hn-sc-highlights i { color: var(--hn-sc-accent-light); margin-top: 4px; }
[data-hn-template="showcase"] .hn-sc-cta-row {
display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px;
}
[data-hn-template="showcase"] .hn-sc-counters {
display: flex; flex-direction: column; gap: 10px;
margin-top: 30px; padding-top: 22px;
border-top: 1px solid var(--hn-sc-hairline);
width: 100%;
}
[data-hn-template="showcase"] .hn-sc-counter-row { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
[data-hn-template="showcase"] .hn-sc-counter { display: flex; flex-direction: column; }
[data-hn-template="showcase"] .hn-sc-counter-num {
font-family: var(--hn-font-head);
font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: #fff; line-height: 1.2;
}
[data-hn-template="showcase"] .hn-sc-counter-label {
font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
color: var(--hn-sc-on-dark-soft);
}
[data-hn-template="showcase"] .hn-sc-counter-divider {
width: 1px; height: 38px; background: rgba(255,255,255,.22);
}
[data-hn-template="showcase"] .hn-sc-counter-note { font-size: 12px; color: var(--hn-sc-on-dark-soft); }
/* ── The product frame ─────────────────────────────────────── */
[data-hn-template="showcase"] .hn-sc-hero-pane { position: relative; z-index: 2; }
[data-hn-template="showcase"] .hn-sc-frame {
border-radius: var(--hn-r-lg); overflow: hidden; background: var(--hn-white);
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 20px 48px rgba(4,7,14,.45), 0 8px 16px rgba(0,0,0,.24);
}
[data-hn-template="showcase"] .hn-sc-frame-bar {
display: flex; align-items: center; gap: 8px;
height: 42px; padding: 0 16px;
background: var(--hn-gray-100); border-bottom: 1px solid var(--hn-gray-200);
}
[data-hn-template="showcase"] .hn-sc-frame-dot {
width: 10px; height: 10px; border-radius: var(--hn-r-full);
background: var(--hn-gray-300); flex-shrink: 0;
}
[data-hn-template="showcase"] .hn-sc-frame-url {
flex-grow: 1; margin-left: 6px; height: 24px; padding: 0 12px;
display: flex; align-items: center;
background: var(--hn-white); border: 1px solid var(--hn-gray-200);
border-radius: var(--hn-r-full);
font-size: 11px; color: var(--hn-gray-500);
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
[data-hn-template="showcase"] .hn-sc-frame-img { display: block; width: 100%; height: auto; }
/* The abstract. Deliberately grey: it is the SHAPE of the screen, not a picture
of data this page does not have. */
[data-hn-template="showcase"] .hn-sc-mock { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
[data-hn-template="showcase"] .hn-sc-mock-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
[data-hn-template="showcase"] .hn-sc-mock-head-copy { display: flex; flex-direction: column; gap: 6px; }
[data-hn-template="showcase"] .hn-sc-mock-title {
font-family: var(--hn-font-head); font-size: 17px; font-weight: 700; color: var(--hn-gray-800);
}
[data-hn-template="showcase"] .hn-sc-mock-tiles {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
[data-hn-template="showcase"] .hn-sc-mock-tile {
padding: 12px 14px; border-radius: var(--hn-r-md);
background: var(--hn-gray-50); border: 1px solid var(--hn-gray-200);
display: flex; flex-direction: column; gap: 7px;
}
[data-hn-template="showcase"] .hn-sc-mock-tile--warn {
background: var(--hn-orange-50); border-color: var(--hn-orange-100);
}
[data-hn-template="showcase"] .hn-sc-mock-table {
border: 1px solid var(--hn-gray-200); border-radius: var(--hn-r-md); overflow: hidden;
}
[data-hn-template="showcase"] .hn-sc-mock-tr {
display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) 74px 72px;
gap: 12px; align-items: center;
padding: 13px 14px; border-bottom: 1px solid var(--hn-gray-100);
}
[data-hn-template="showcase"] .hn-sc-mock-tr:last-child { border-bottom: none; }
[data-hn-template="showcase"] .hn-sc-mock-tr--head {
background: var(--hn-gray-50); border-bottom: 1px solid var(--hn-gray-200);
padding: 10px 14px;
font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--hn-gray-500);
}
[data-hn-template="showcase"] .hn-sc-bar {
display: block; height: 10px; border-radius: 3px; background: var(--hn-gray-200);
}
[data-hn-template="showcase"] .hn-sc-bar--strong { height: 15px; background: var(--hn-gray-300); }
[data-hn-template="showcase"] .hn-sc-bar--accent { height: 15px; background: var(--hn-orange-300); }
/* The row's action control, drawn as the pill it is. */
[data-hn-template="showcase"] .hn-sc-bar--pill {
height: 24px; border-radius: var(--hn-r-full); background: var(--hn-gray-200);
}
[data-hn-template="showcase"] .hn-sc-chip {
justify-self: start;
padding: 3px 10px; border-radius: var(--hn-r-full);
font-size: 11px; font-weight: 700; white-space: nowrap;
}
[data-hn-template="showcase"] .hn-sc-chip--green { background: var(--hn-green-100); color: var(--hn-green-700); }
[data-hn-template="showcase"] .hn-sc-chip--amber { background: var(--hn-orange-100); color: var(--hn-orange-600); }
[data-hn-template="showcase"] .hn-sc-chip--red { background: #fee2e2; color: #b91c1c; }
/* ── The tour ──────────────────────────────────────────────── */
[data-hn-template="showcase"] .hn-sc-tour { background: var(--hn-bg); padding: 76px 0 80px; }
[data-hn-template="showcase"] .hn-sc-tour-head {
display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
margin-bottom: 40px;
}
[data-hn-template="showcase"] .hn-sc-tour-head-copy { max-width: 700px; }
[data-hn-template="showcase"] .hn-sc-section-eyebrow {
display: block;
font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: var(--hn-brand-accent);
}
[data-hn-template="showcase"] .hn-sc-section-eyebrow--green { color: var(--hn-green-600); }
[data-hn-template="showcase"] .hn-sc-section-title {
font-family: var(--hn-font-head);
font-size: clamp(26px, 3vw, 38px); line-height: 1.14; font-weight: 800;
letter-spacing: -0.03em; color: var(--hn-sc-ink-800); margin: 12px 0 0; text-wrap: pretty;
}
[data-hn-template="showcase"] .hn-sc-section-sub {
font-size: 16px; color: var(--hn-text-secondary); margin: 12px 0 0; text-wrap: pretty;
}
[data-hn-template="showcase"] .hn-sc-tour-head .hn-sc-btn-outline { flex-shrink: 0; }
[data-hn-template="showcase"] .hn-sc-tour-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px;
}
[data-hn-template="showcase"] .hn-sc-stop {
display: flex; flex-direction: column; gap: 16px;
padding: 24px; border-radius: var(--hn-r-lg);
background: var(--hn-white); border: 1px solid var(--hn-border);
box-shadow: var(--hn-shadow-md);
}
[data-hn-template="showcase"] .hn-sc-stop-head { display: flex; align-items: center; gap: 13px; }
[data-hn-template="showcase"] .hn-sc-stop-num {
width: 34px; height: 34px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border-radius: var(--hn-r-md);
background: var(--hn-navy-50); border: 1px solid var(--hn-navy-100);
font-family: var(--hn-font-head); font-size: 15px; font-weight: 800;
color: var(--hn-brand-primary);
}
[data-hn-template="showcase"] .hn-sc-stop-title {
font-family: var(--hn-font-head); font-size: 20px; font-weight: 700;
letter-spacing: -0.02em; color: var(--hn-sc-ink-800); margin: 0;
}
[data-hn-template="showcase"] .hn-sc-stop-desc {
font-size: 15px; color: var(--hn-text-secondary); margin: 0; text-wrap: pretty;
}
[data-hn-template="showcase"] .hn-sc-stop-pane {
height: 168px; overflow: hidden;
border-radius: var(--hn-r-md);
background: var(--hn-gray-50); border: 1px solid var(--hn-gray-200);
}
[data-hn-template="showcase"] .hn-sc-stop-img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Four shapes for four screens: a form, a list, a record beside a photo, a
chart. Same grey vocabulary as the hero frame. */
[data-hn-template="showcase"] .hn-sc-stop-mock {
position: relative;
height: 100%; padding: 16px; display: grid; gap: 10px; align-content: start;
}
[data-hn-template="showcase"] .hn-sc-stop-chip { position: absolute; top: 14px; right: 14px; }
[data-hn-template="showcase"] .hn-sc-stop-mock .hn-sc-bar { width: 100%; }
[data-hn-template="showcase"] .hn-sc-stop-mock--0 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-hn-template="showcase"] .hn-sc-stop-mock--0 .hn-sc-bar:nth-child(1) { grid-column: 1 / -1; width: 60%; background: var(--hn-gray-300); }
[data-hn-template="showcase"] .hn-sc-stop-mock--0 .hn-sc-bar:nth-child(2) { grid-column: 1 / -1; height: 30px; border-radius: 8px; }
[data-hn-template="showcase"] .hn-sc-stop-mock--0 .hn-sc-bar:nth-child(n+3) { height: 22px; border-radius: 8px; }
[data-hn-template="showcase"] .hn-sc-stop-mock--1 .hn-sc-bar { height: 18px; border-radius: 6px; }
[data-hn-template="showcase"] .hn-sc-stop-mock--1 .hn-sc-bar:nth-child(1) { width: 46%; height: 11px; background: var(--hn-gray-300); }
[data-hn-template="showcase"] .hn-sc-stop-mock--2 { grid-template-columns: 116px minmax(0, 1fr); align-content: stretch; }
[data-hn-template="showcase"] .hn-sc-stop-mock--2 .hn-sc-bar:nth-child(1) {
grid-row: 1 / span 5; height: 100%; border-radius: 8px; background: var(--hn-gray-300);
}
[data-hn-template="showcase"] .hn-sc-stop-mock--2 .hn-sc-bar:nth-child(2) { width: 42%; }
[data-hn-template="showcase"] .hn-sc-stop-mock--2 .hn-sc-bar:nth-child(4) { width: 74%; }
[data-hn-template="showcase"] .hn-sc-stop-mock--2 .hn-sc-bar:nth-child(5) { width: 86%; }
[data-hn-template="showcase"] .hn-sc-stop-mock--2 .hn-sc-bar:nth-child(6) { width: 58%; }
[data-hn-template="showcase"] .hn-sc-stop-mock--3 {
grid-template-columns: repeat(6, minmax(0, 1fr));
align-items: end; align-content: end; height: 100%;
}
[data-hn-template="showcase"] .hn-sc-stop-mock--3 .hn-sc-bar { border-radius: 4px 4px 0 0; }
[data-hn-template="showcase"] .hn-sc-stop-mock--3 .hn-sc-bar:nth-child(1) { height: 34px; }
[data-hn-template="showcase"] .hn-sc-stop-mock--3 .hn-sc-bar:nth-child(2) { height: 62px; }
[data-hn-template="showcase"] .hn-sc-stop-mock--3 .hn-sc-bar:nth-child(3) { height: 92px; background: var(--hn-brand-primary); }
[data-hn-template="showcase"] .hn-sc-stop-mock--3 .hn-sc-bar:nth-child(4) { height: 48px; }
[data-hn-template="showcase"] .hn-sc-stop-mock--3 .hn-sc-bar:nth-child(5) { height: 74px; }
[data-hn-template="showcase"] .hn-sc-stop-mock--3 .hn-sc-bar:nth-child(6) { height: 30px; }
[data-hn-template="showcase"] .hn-sc-stop-link,
[data-hn-template="showcase"] .hn-sc-inline-link {
display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
font-size: 15px; font-weight: 700; color: var(--hn-brand-accent); text-decoration: none;
min-height: 44px;
}
[data-hn-template="showcase"] .hn-sc-stop-link:hover,
[data-hn-template="showcase"] .hn-sc-inline-link:hover {
color: color-mix(in srgb, var(--hn-brand-accent) 78%, #000); text-decoration: none;
}
/* ── The student lane, one band ────────────────────────────── */
[data-hn-template="showcase"] .hn-sc-catalogue {
background: var(--hn-white);
border-top: 1px solid var(--hn-border);
border-bottom: 1px solid var(--hn-border);
padding: 56px 0;
}
[data-hn-template="showcase"] .hn-sc-catalogue-grid {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
gap: 48px; align-items: center;
}
[data-hn-template="showcase"] .hn-sc-catalogue-copy { display: flex; flex-direction: column; }
[data-hn-template="showcase"] .hn-sc-catalogue-cards {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
/* ── Close: the offer, and the way in ──────────────────────── */
[data-hn-template="showcase"] .hn-sc-close {
background: var(--hn-grad-footer);
padding: 64px 0 68px;
color: #fff;
}
[data-hn-template="showcase"] .hn-sc-close-grid {
display: grid; grid-template-columns: minmax(0, 1fr) 420px;
gap: 56px; align-items: center;
}
[data-hn-template="showcase"] .hn-sc-close-copy { display: flex; flex-direction: column; align-items: flex-start; }
[data-hn-template="showcase"] .hn-sc-close-title {
font-family: var(--hn-font-head);
font-size: clamp(24px, 2.6vw, 32px); line-height: 1.18; font-weight: 800;
letter-spacing: -0.03em; color: #fff; margin: 0; text-wrap: pretty;
}
[data-hn-template="showcase"] .hn-sc-close-sub {
font-size: 16px; line-height: 1.6; color: var(--hn-sc-on-dark);
margin: 12px 0 0; max-width: 52ch; text-wrap: pretty;
}
[data-hn-template="showcase"] .hn-sc-close-contact {
display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px;
}
[data-hn-template="showcase"] .hn-sc-contact-link {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
font-size: 15px; font-weight: 600; color: #fff; text-decoration: none;
}
[data-hn-template="showcase"] .hn-sc-contact-link:hover { color: var(--hn-sc-accent-light); text-decoration: none; }
[data-hn-template="showcase"] .hn-sc-contact-link i { color: var(--hn-sc-accent-light); }
/* ── Phone ─────────────────────────────────────────────────── */
/* Every one-column fallback is minmax(0, 1fr), never 1fr. A grid item defaults to
min-width: auto, so a plain 1fr column cannot shrink below its content's
min-content width — and the product frame's min-content is a table, a tile row
and a URL pill. On a 390px phone that pushed the whole page, headline and
buttons included, off the right edge. Same trap as the exam result grid. */
@media (max-width: 991.98px) {
[data-hn-template="showcase"] .hn-sc-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
[data-hn-template="showcase"] .hn-sc-catalogue-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
[data-hn-template="showcase"] .hn-sc-close-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
[data-hn-template="showcase"] .hn-sc-tour-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
[data-hn-template="showcase"] .hn-sc-tour-head { flex-direction: column; align-items: flex-start; gap: 20px; }
/* The belt to that braces: both hero columns are flex containers, whose items
carry the same auto minimum. */
[data-hn-template="showcase"] .hn-sc-hero-copy,
[data-hn-template="showcase"] .hn-sc-hero-pane,
[data-hn-template="showcase"] .hn-sc-close-copy,
[data-hn-template="showcase"] .hn-sc-catalogue-copy { min-width: 0; }
}
@media (max-width: 767.98px) {
[data-hn-template="showcase"] .hn-sc-hero { padding: calc(var(--hn-navbar-h) + 28px) 0 32px; }
[data-hn-template="showcase"] .hn-sc-tour { padding: 36px 0 40px; }
[data-hn-template="showcase"] .hn-sc-catalogue { padding: 36px 0; }
[data-hn-template="showcase"] .hn-sc-close { padding: 36px 0 40px; }
/* Full-width CTAs: the hero's two are the page's whole ask on a phone. */
[data-hn-template="showcase"] .hn-sc-cta-row { flex-direction: column; align-items: stretch; width: 100%; }
[data-hn-template="showcase"] .hn-sc-cta-row .hn-btn { width: 100%; }
[data-hn-template="showcase"] .hn-sc-counter-row { gap: 18px; justify-content: space-between; }
[data-hn-template="showcase"] .hn-sc-counter-num { font-size: 21px; }
/* Same move the shared sheet makes for every other template's login column:
the card becomes a fixed bottom sheet, so its wrapper must leave no empty
grid row behind. */
[data-hn-template="showcase"] .hn-sc-close-login { display: contents; }
/* The frame is cropped rather than shrunk — a 1200px-wide console scaled to
fit a phone is unreadable, and the crop invites the scroll. */
[data-hn-template="showcase"] .hn-sc-mock-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-hn-template="showcase"] .hn-sc-mock-tile:nth-child(3) { display: none; }
[data-hn-template="showcase"] .hn-sc-mock-tr { grid-template-columns: minmax(0, 1fr) 66px; }
[data-hn-template="showcase"] .hn-sc-mock-tr > *:nth-child(2),
[data-hn-template="showcase"] .hn-sc-mock-tr > *:nth-child(4) { display: none; }
[data-hn-template="showcase"] .hn-sc-frame-url { display: none; }
[data-hn-template="showcase"] .hn-sc-catalogue-cards { grid-template-columns: minmax(0, 1fr); }
}
/* ═══════════════════════════════════════════════════════════════════════════════════
TEMPLATE: KIDS — "Two Doors". Views/HomepageNew/templates/kids.php
Everything is scoped to [data-hn-template="kids"], which the layout puts on , so
none of it can reach the other five designs.
THE COLOURS ARE STATED, not taken from --hn-brand-*. Every other template derives its
palette from the tenant's two theme colours so one design serves sixteen tenants; this
one is the artwork's own tin — the same values kids-exam.css, kids-journey.css and
kids-room.css are painted from — because the page's job is to look like the product,
and the product is 230 pictures drawn in these six colours. A tenant choosing this
template is choosing that.
#1B1938 ink #E9573B coral #F3AE22 marigold
#64A23A grass #6B3BE0 violet #FDF4E0 sand
═══════════════════════════════════════════════════════════════════════════════════ */
[data-hn-template="kids"] {
--hnk-ink: #1B1938;
--hnk-ink-2: #3F3A57;
--hnk-ink-3: #6B6483;
--hnk-coral: #E9573B;
--hnk-coral-d:#B8471C;
--hnk-violet: #6B3BE0;
--hnk-grass: #3E7A22;
--hnk-sand: #FDF4E0;
--hnk-paper: #FAF7F0;
--hnk-line: #EAE3D6;
}
/* ── hero ─────────────────────────────────────────────────────────────────────── */
/* ONE GROUND, paper, from under the navbar to the footer. The hero was sand and the band
under it paper, which drew a seam across the page the drawing does not have — and put
the CHILD's ground on the page a parent reads. Sand belongs to the child's half; it is
what kids-room.css and the exam screen sit on. */
[data-hn-template="kids"] .hn-kid-hero {
position: relative;
background: var(--hnk-paper);
/* The navbar is FIXED, so a hero's own top padding has to carry its height as well as
its own inset — every other template in this file does the same. Without it the
phone frame in the right column was cropped through its screen by the bar. */
padding: calc(var(--hn-navbar-h) + 48px) 0 44px;
overflow: hidden;
}
/* CENTRED is right now that the right column is the phone alone. It was wrong while the
sign-in card was stacked under it: the right column ran to 870px, so centring pushed the
headline 390px down the hero and left a band of empty cream above it. The card has moved
to its own section ( see the note in the template ). */
[data-hn-template="kids"] .hn-kid-grid {
display: grid;
/* A FIXED 580, not a 1.05fr share. The drawing's left column is `flex-grow: 1` capped at
580, and .hn-container is narrower than the mock's own 1120, so the share gave 559 and
broke the headline a word earlier — "Their door is / all pictures." where the drawing
reads "Their door is all / pictures." A column measured in px breaks where it was
drawn to break. */
grid-template-columns: minmax(0, 580px) minmax(0, 1fr);
gap: 60px;
align-items: center;
}
/* A VIOLET pill, not a white bordered one. Violet is the colour this design gives the
grown-ups' half all the way through, and the eyebrow's job here is to name the idea the
two doors below are about — the drawing has it in #F1EAFB / #4A26A8, which is 8.9:1. */
[data-hn-template="kids"] .hn-kid-eyebrow {
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
background: #F1EAFB;
font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: #4A26A8;
}
[data-hn-template="kids"] .hn-kid-headline {
margin: 16px 0 0;
font-family: var(--hn-font-head);
font-size: clamp(34px, 5vw, 56px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -.015em;
color: var(--hnk-ink);
/* NO text-wrap: balance. The headline is authored as two sentences in two elements and
the drawing breaks the first after "all"; balance evens the line lengths instead and
moved that break a word earlier. Measured before changing anything else: both pages
give the column 580px and both need 380 for "Their door is all", so the font was not
the cause. */
}
/* A BLOCK, and ink rather than coral. The drawing sets both sentences in the same ink —
"Their door is all pictures. / Yours has the receipts." is one thought in two halves, and
colouring the second half turns it into a slogan with a highlight on it. The block keeps
the line break the drawing has. */
[data-hn-template="kids"] .hn-kid-headline-accent { display: block; }
[data-hn-template="kids"] .hn-kid-sub {
margin: 16px 0 0;
/* In px, not em: the drawing's column is 500px wide and an em measure moves with the
font size, so the line breaks were landing in different places. */
max-width: 500px;
font-size: 18px; line-height: 1.6; color: var(--hnk-ink-2);
}
/* FLAT, at the drawing's 12px radius and 17px type. The chunky 5px drop shadow belongs to
the CHILD's half — it is what a four-year-old's finger is aiming at, and kids-room.css
uses it on Play and Carry on. On the page a parent reads it is a toy button under a
paragraph about receipts, which is the register mistake this whole template exists to
stop making. */
[data-hn-template="kids"] .hn-kid-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
[data-hn-template="kids"] .hn-kid-btn {
display: inline-flex; align-items: center; gap: 9px;
padding: 15px 26px; border-radius: 12px;
font-family: var(--hn-font-body);
font-size: 17px; font-weight: 700; line-height: 1;
text-decoration: none;
transition: background-color .15s ease, border-color .15s ease;
}
[data-hn-template="kids"] .hn-kid-btn svg { width: 18px; height: 18px; flex: none; }
[data-hn-template="kids"] .hn-kid-btn-primary {
background: var(--hnk-coral-d); color: #ffffff;
}
[data-hn-template="kids"] .hn-kid-btn-primary:hover { background: #8A3413; color: #ffffff; }
[data-hn-template="kids"] .hn-kid-btn-ghost {
background: #ffffff; color: var(--hnk-ink);
border: 2px solid #D9D2C4;
}
[data-hn-template="kids"] .hn-kid-btn-ghost:hover { background: var(--hnk-paper); border-color: var(--hnk-ink-3); color: var(--hnk-ink); }
/* A ROW OF TICKS, not three green pills. Three pills at 8px of padding each wrapped onto
two lines at 1280 and read as three buttons; the drawing has them as one scannable line
of plain text, which is also what they are — facts, not controls. The copy was cut to
its nouns in getClientDefaults() for the same reason. */
[data-hn-template="kids"] .hn-kid-chips {
display: flex; flex-wrap: wrap; gap: 26px;
margin: 24px 0 0; padding: 0; list-style: none;
}
[data-hn-template="kids"] .hn-kid-chip {
display: inline-flex; align-items: center; gap: 7px;
color: var(--hnk-grass);
font-size: 14px; font-weight: 600;
}
[data-hn-template="kids"] .hn-kid-chip svg { width: 16px; height: 16px; flex: none; }
/* ── the phone in the hero ────────────────────────────────────────────────────── */
[data-hn-template="kids"] .hn-kid-right {
display: flex; flex-direction: column; align-items: center; gap: 30px;
}
/* 284, not 264. The drawing's frame is a 264px screen inside 10px of bezel and its page
has no box-sizing reset, so its outer width is 284; homepage-new.css sets border-box on
everything, which made 264 the OUTER width and shrank the screen inside it to 244 —
the whole mock-up 8% small. */
[data-hn-template="kids"] .hn-kid-phone {
margin: 0;
width: 284px; max-width: 100%;
background: var(--hnk-ink);
border-radius: 34px;
padding: 10px;
box-shadow: 0 24px 48px rgba(27, 25, 56, .22);
/* Two elements would be needed for two transforms; there is only one here, so the
bob carries the tilt with it rather than fighting a second rule for the property. */
animation: hnkBob 5.2s ease-in-out infinite;
}
@keyframes hnkBob {
0%, 100% { transform: translateY(0) rotate(-1.4deg); }
50% { transform: translateY(-8px) rotate(-1.4deg); }
}
[data-hn-template="kids"] .hn-kid-phone-screen {
background: #ffffff; border-radius: 26px; padding: 15px 13px 16px;
}
[data-hn-template="kids"] .hn-kid-phone-q {
margin: 0 0 11px;
font-family: var(--hn-font-head);
font-size: 20px; font-weight: 800; line-height: 1.1; color: var(--hnk-ink);
}
[data-hn-template="kids"] .hn-kid-phone-tiles {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
[data-hn-template="kids"] .hn-kid-phone-tile {
display: block; border-radius: 16px; overflow: hidden;
background: var(--hnk-hue, var(--hnk-coral));
animation: hnkPop 4.6s ease-in-out infinite;
}
[data-hn-template="kids"] .hn-kid-phone-tile:nth-child(2) { animation-delay: .6s; }
[data-hn-template="kids"] .hn-kid-phone-tile:nth-child(3) { animation-delay: 1.2s; }
[data-hn-template="kids"] .hn-kid-phone-tile:nth-child(4) { animation-delay: 1.8s; }
@keyframes hnkPop {
0%, 86%, 100% { transform: scale(1); }
92% { transform: scale(1.055); }
}
[data-hn-template="kids"] .hn-kid-phone-tile img {
display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
}
[data-hn-template="kids"] .hn-kid-phone-name {
display: block; padding: 6px 9px 8px;
font-family: var(--hn-font-head);
font-size: 13.5px; font-weight: 800; color: #ffffff;
}
[data-hn-template="kids"] .hn-kid-phone-cta {
display: flex; align-items: center; justify-content: center; gap: 9px;
margin-top: 10px; padding: 12px;
border-radius: 16px; background: var(--hnk-coral); color: #ffffff;
font-family: var(--hn-font-head); font-size: 17px; font-weight: 800;
}
[data-hn-template="kids"] .hn-kid-phone-cta svg { width: 19px; height: 19px; }
/* ── the two doors ────────────────────────────────────────────────────────────── */
/* 6px, not 46. The doors are the second half of the hero's sentence — "their door … your
door" answers the headline directly above them — and 40px of extra air between the two
reads as a change of subject. Measured off the drawing, where the band is `6px 80px 0`. */
[data-hn-template="kids"] .hn-kid-doors { background: transparent; padding: 6px 0 0; }
[data-hn-template="kids"] .hn-kid-doors-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px;
}
[data-hn-template="kids"] .hn-kid-door {
border-radius: 26px; padding: 26px 28px 28px;
display: flex; flex-direction: column; gap: 14px;
transition: transform .2s ease, box-shadow .2s ease;
}
[data-hn-template="kids"] .hn-kid-door:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(27,25,56,.12); }
[data-hn-template="kids"] .hn-kid-door-child { background: #241F45; }
[data-hn-template="kids"] .hn-kid-door-parent { background: #ffffff; border: 1px solid var(--hnk-line); }
[data-hn-template="kids"] .hn-kid-door-h {
display: flex; align-items: center; gap: 11px; margin: 0;
font-family: var(--hn-font-head); font-size: 25px; font-weight: 800;
}
[data-hn-template="kids"] .hn-kid-door-child .hn-kid-door-h { color: #ffffff; }
[data-hn-template="kids"] .hn-kid-door-parent .hn-kid-door-h { color: var(--hnk-ink); }
[data-hn-template="kids"] .hn-kid-door-ic {
width: 36px; height: 36px; border-radius: 12px; flex: none;
display: grid; place-items: center;
}
[data-hn-template="kids"] .hn-kid-door-ic svg { width: 19px; height: 19px; }
[data-hn-template="kids"] .hn-kid-door-child .hn-kid-door-ic { background: var(--hnk-coral); color: #ffffff; }
[data-hn-template="kids"] .hn-kid-door-parent .hn-kid-door-ic { background: #F1EAFB; color: #4A26A8; }
[data-hn-template="kids"] .hn-kid-door-p { margin: 0; font-size: 15px; line-height: 1.6; }
/* #C9C2E4 on #241F45 is 8.3:1. The stock muted grey would be 3.1:1 there. */
[data-hn-template="kids"] .hn-kid-door-child .hn-kid-door-p { color: #C9C2E4; }
[data-hn-template="kids"] .hn-kid-door-parent .hn-kid-door-p { color: var(--hnk-ink-2); }
[data-hn-template="kids"] .hn-kid-door-strip {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 2px;
}
[data-hn-template="kids"] .hn-kid-door-strip img {
width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
border-radius: 14px; display: block;
}
/* AT THE FOOT of the card, as drawn. The two doors are grid siblings, so both stretch to
the taller of them — the child's, with its four pictures — and a figure row left at its
natural position floated in the top third of a tall white box. */
[data-hn-template="kids"] .hn-kid-facts {
display: flex; flex-wrap: wrap; gap: 26px; margin: auto 0 0;
}
[data-hn-template="kids"] .hn-kid-facts > div { display: flex; flex-direction: column-reverse; }
[data-hn-template="kids"] .hn-kid-facts dt { font-size: 12.5px; font-weight: 700; color: var(--hnk-ink-3); margin: 0; }
[data-hn-template="kids"] .hn-kid-facts dd {
margin: 0; font-family: var(--hn-font-head);
font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--hnk-grass);
}
/* ── sign in, in a band of its own ─────────────────────────────────────────────── */
/* PAPER, like everything else, separated by a rule rather than by a change of ground.
It was sand — which put the CHILD's colour back on the page a parent reads and drew the
same seam across it that moving the hero off sand had just removed. */
[data-hn-template="kids"] .hn-kid-signin {
background: var(--hnk-paper);
border-top: 1px solid var(--hnk-line);
padding: 40px 0;
margin-top: 40px;
}
[data-hn-template="kids"] .hn-kid-signin-grid {
display: grid; grid-template-columns: minmax(0, 1fr) 420px;
gap: 48px; align-items: center;
}
[data-hn-template="kids"] .hn-kid-signin-h {
margin: 0;
font-family: var(--hn-font-head);
font-size: 34px; font-weight: 800; line-height: 1.1; color: var(--hnk-ink);
}
[data-hn-template="kids"] .hn-kid-signin-p {
margin: 12px 0 0; max-width: 34em;
font-size: 17px; line-height: 1.6; color: var(--hnk-ink-2);
}
/* .hn-login-shell is `display: contents` above 767.98px, so the card is a direct child of
this cell and needs nothing but a width to sit in. Below that width the shell becomes a
fixed bottom sheet and this column collapses to nothing, which is why the copy beside it
is the thing that has to keep reading sensibly on its own. */
[data-hn-template="kids"] .hn-kid-signin-card { min-width: 0; }
/* ── phone ────────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
[data-hn-template="kids"] .hn-kid-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
[data-hn-template="kids"] .hn-kid-doors-grid { grid-template-columns: minmax(0, 1fr); }
[data-hn-template="kids"] .hn-kid-signin-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 767.98px) {
[data-hn-template="kids"] .hn-kid-hero { padding: calc(var(--hn-navbar-h) + 26px) 0 30px; }
/* The phone frame is the one thing on this page that IS the product, so on a phone it
stays and the login card does not compete with it — the shared sheet has already
turned that card into a bottom sheet at this width. */
[data-hn-template="kids"] .hn-kid-phone { width: 268px; }
[data-hn-template="kids"] .hn-kid-headline { font-size: 32px; }
[data-hn-template="kids"] .hn-kid-signin { padding: 30px 0; }
[data-hn-template="kids"] .hn-kid-signin-h { font-size: 26px; }
[data-hn-template="kids"] .hn-kid-chips { gap: 14px 22px; }
[data-hn-template="kids"] .hn-kid-btn { flex: 1 1 100%; justify-content: center; }
[data-hn-template="kids"] .hn-kid-door-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
[data-hn-template="kids"] .hn-kid-facts { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
[data-hn-template="kids"] .hn-kid-phone,
[data-hn-template="kids"] .hn-kid-phone-tile { animation: none; }
}
/* The sign-in band's own trigger sits under its copy rather than stretching, which is what
the hero's does — there it is the only action in a column of its own. */
[data-hn-template="kids"] .hn-kid-signin-copy .hn-login-trigger-row { margin-top: 18px; }
/* ═══════════════════════════════════════════════════════════════════════════════════
TEMPLATE: KIDS, IN THE APP — "Open the door". Views/HomepageNew/templates/kids-app.php
The same tenant, the same tin, a different surface. The web page above is a landing
page for a parent; this is the first SCREEN of an app a child is handed, and it is
built to the rules the child's room is built to ( Webroot/css/kids-room.css ): big
pictures, one action, nothing to read, and everything a parent needs behind the key.
Scoped to .ka-* inside [data-hn-template="kids"], so it reaches nothing else — and it
reuses the --hnk-* tokens declared at the top of the KIDS block rather than restating
a palette that already has four copies in this product.
Every size is the drawn size at 393px, which is the viewport the design was drawn at
and the one a phone reports. No conversion, so nothing rounds.
═══════════════════════════════════════════════════════════════════════════════════ */
[data-hn-template="kids"] .ka-door {
/* SAND is the child's ground and paper is the grown-ups', the same split the web page
makes. The wrapper carries it so the colour runs under the app's bottom bar, which is
drawn OVER the WebView rather than in a band beneath it. */
background: var(--hnk-sand);
color: var(--hnk-ink);
font-family: var(--hn-font-body);
}
[data-hn-template="kids"] .ka-door.is-grown { background: var(--hnk-paper); }
/* AND IT HAS TO REACH THE FLOOR, or there is a strip of somebody else's colour under it.
The play half is exactly 100dvh MINUS the bar ( below ) — that is what keeps the screen
from scrolling — so the wrapper around it is that tall too, and the last ~112px of the
viewport, the part the bar floats over, is painted by nothing on this page.
What shows there is the CANVAS, and the canvas is not this body's colour: AdminLTE.css
sets `html, body { background: #f9f9f9 }`, and an with a background of its own
stops the body's from propagating. So the child's cream ended in a hard line and the
bottom bar sat on a grey band — the tray the bar was taken out of a band to avoid.
min-height on the WRAPPER and not on .ka-play: the play half's height is a layout
measurement ( what a child can see without scrolling ) and must keep the bar subtracted.
This is only the ground behind it, which the bar is meant to float over. Both halves get
it from one declaration, and in a browser --oe-floor is 0, the two are equal, and this
changes nothing. */
[data-hn-template="kids"] .ka-door { min-height: 100dvh; }
/* AND WHEN THE PLAY HALF DOES NOT FIT, THE GROUND IS WHERE IT SCROLLS TO.
One screen is the intent, not a guarantee the arithmetic can keep at every size. The
picture height below is `min( 150px, (100dvh - floor - --ka-fixed) / rows, 40vw )` over
a `min-height: 88px` floor, and 88 is deliberately a floor rather than a target: the
comment there says, in as many words, that a page which scrolls a little is better than
a panda with its head cropped off.
Measured on a real phone, which is where this went wrong. 360 x 780dp at density 3, the
WebView 360 x 691 with 96 of it under the bar: --ka-fixed is 450 at that width, not the
430 the formula assumes, the second term asks for 82.5 and the floor raises it to 88, so
the half wants 626px of a 595px visible area. The emulator this was built on — 412 x 805
with 120 under the bar — has room for all of it and shows none of this.
And it did not scroll, which is the part that made it a bug rather than a squeeze. The
half is 626 inside a door of exactly 100dvh, so the document was precisely the viewport,
nothing could move, and the last 31px of the child's screen — the whole Grown-ups row —
sat under the bar with no way to bring it up.
The reservation goes on the DOOR and not on .ka-play, because .ka-play's padding is
inside the box its min-height measures: adding the floor there moves the foot of a half
that FITS up by the whole bar, and the grown-ups row floats 96px off the ground on every
phone that was never broken. Out here it is only ground. The door is
max( 100dvh, play + floor ): while the half fits, min-height wins and nothing scrolls;
when it overruns, the document grows by exactly the overrun and the page scrolls exactly
that far, which puts the last row back above the bar and not one pixel further.
:not(.is-grown) because the parents' half already spends the floor in its own padding
( below ) — it is a scrolling panel and reserves it at the end of the scroll. Giving it
to both would reserve it twice. 0 in a browser, as always. */
[data-hn-template="kids"] .ka-door:not(.is-grown) { padding-bottom: var(--oe-floor, 0px); }
/* The floor the app's bottom bar covers. #hnMain > section:last-of-type::after in
homepage-new.css does this for every other template, and cannot reach these sections:
they are one level in, inside .ka-door. Undeclared in a browser, where it is 0. */
/* THE FLOOR IS SPENT ONCE, and the two halves spend it differently.
The app's bottom bar is drawn OVER the WebView, and #hnMain > section:last-of-type::after
in homepage-new.css — which reserves it for every other template — cannot reach these
sections, one level in inside .ka-door.
The play half is ONE SCREEN, so it takes the floor off its HEIGHT ( below ) and pads
only for breathing room; adding it here as well would push the document past the
viewport and the screen that is meant not to scroll would scroll by exactly the bar.
The grown-ups half is a scroll, so it adds the floor to its padding, which is what
keeps the last row off the bar at the end of it. Both are 0 in a browser. */
[data-hn-template="kids"] .ka-play {
padding: 14px 16px 22px;
}
[data-hn-template="kids"] .ka-grown {
padding: 14px 16px calc(var(--oe-floor, 0px) + 22px);
}
/* ONE SCREEN, AND THE SCREEN IS NOT 100dvh.
The play half is a screen and not the top of a page: a child looking for a picture to
tap must not have to discover that there is more underneath. But the app's bar is
drawn OVER the WebView, so the part of the viewport this page can actually be seen in
is 100dvh MINUS the bar. Measured on the emulator: 412 x 805 with the bottom 120px
under the bar, which left the facts row cut in half and the grown-ups row completely
hidden — a browser at any width shows none of that.
dvh rather than vh because the WebView's height changes when the app's bars come and
go; the floor is 0 in a browser, where this is plain 100dvh. */
[data-hn-template="kids"] .ka-play {
display: flex; flex-direction: column;
min-height: calc(100dvh - var(--oe-floor, 0px));
box-sizing: border-box;
}
[data-hn-template="kids"] .ka-topline {
display: flex; justify-content: flex-end; align-items: center;
min-height: 36px; margin-bottom: 8px;
}
/* The key, in the corner, exactly as the room has it — except that this one carries its
word. The room's key is drawn for a child who must not go through it; here the person
holding the phone has just installed the app and is looking for the prices. */
[data-hn-template="kids"] .ka-key,
[data-hn-template="kids"] .ka-back {
display: inline-flex; align-items: center; gap: 6px;
min-height: 36px; padding: 0 13px 0 11px;
border: 1.5px solid #D6C9F5; border-radius: 18px;
background: #ffffff; color: #5A2FC4;
font-family: var(--hn-font-body); font-size: 13px; font-weight: 700;
cursor: pointer;
}
[data-hn-template="kids"] .ka-back { border-color: var(--hnk-line); color: var(--hnk-coral-d); }
[data-hn-template="kids"] .ka-key svg,
[data-hn-template="kids"] .ka-back svg { width: 16px; height: 16px; flex: none; }
/* The switch moves focus to the heading of the half that just arrived — otherwise focus
is left on a button that is now display:none and the next Tab starts from the top of
the document. It is focused programmatically, so :focus-visible does not match and the
ring is drawn at nobody: a tap on a picture painted a box around the sentence above it.
Keyboard focus keeps its ring, which is the whole point of the negation. */
[data-hn-template="kids"] .ka-h1:focus:not(:focus-visible),
[data-hn-template="kids"] .ka-g-h:focus:not(:focus-visible) { outline: none; }
[data-hn-template="kids"] .ka-h1 {
margin: 0;
font-family: var(--hn-font-head);
font-size: 33px; line-height: 38px; font-weight: 800; letter-spacing: -.006em;
color: var(--hnk-ink);
}
[data-hn-template="kids"] .ka-sub {
margin: 3px 0 0;
font-size: 13.5px; line-height: 18px; color: var(--hnk-ink-3);
}
/* ── the four kinds ───────────────────────────────────────────────────────────── */
/* THE PICTURES ARE WHAT GIVES, and the rule that decides how much is arithmetic, not a
guess. A stated 150px tile is a bet on the viewport and the bet lost on the first real
device it met: a browser at 393 x 844 has the room, the app's 412 x 805 with 120px of
it under the bar does not, and the grown-ups row ended up behind the bar.
`--ka-fixed` is everything on this screen that is NOT a picture — the topline, the
heading, the sub-line, the button and its foot, the facts, the grown-ups row, every
gap and both paddings. Measured, not estimated: with the pictures at 150 the content
ran to 770px, so 770 - 2x150 = 470, and 22 more for the breathing room under the last
row. 413 is what is left of that once the key pill and two lines of adult copy came off
the child's screen — 79px that went back into the drawings, which is the only thing on
this page a four-year-old is actually looking at. What is left after that, split between the rows, is what a picture may be; 150
stays the ceiling so a tall phone does not get a poster, and min-height 88 is the
floor — below that a square drawing is letterboxed into a sliver, and a page that
scrolls a little is better than a panda with its head cropped off.
THE THIRD TERM IS THE NARROW END. --ka-fixed is not a constant across widths: at 360
the heading and the sub-line each take a line more than they do at 393, so the fixed
part measured 450 there against 413 here, and the height that fits one phone overflows
the other by 10px. 40vw closes it from the other side — a picture never taller than
two-fifths of the screen is also the shape rule this grid wanted anyway — and --ka-fixed
sits at 430, between the two measurements rather than on top of either. Verified at
360, 393 and 412 in a browser and at 412 with the app's bar over it.
Letting the grid flex instead was tried first and is worse: with no definite height to
share, `1fr` rows fall back to max-content and a 360x360 drawing at 190px wide is
190px tall — the tiles grew rather than shrank. */
[data-hn-template="kids"] .ka-tiles {
list-style: none; margin: 14px 0 0; padding: 0;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px;
}
/* Three kinds, or five: the odd one out takes the whole row rather than leaving a hole.
A gap in a grid of pictures reads as something that failed to load. */
[data-hn-template="kids"] .ka-tiles.has-odd > .ka-tile-cell:last-child { grid-column: 1 / -1; }
/* A FLEX COLUMN, so a row made taller by a two-line name ( "A bit of everything" ) grows
the PICTURE rather than leaving a slab of empty band under a one-line neighbour. */
[data-hn-template="kids"] .ka-tile {
display: flex; flex-direction: column; height: 100%; overflow: hidden;
border-radius: 22px;
background: var(--ka-band, var(--hnk-coral-d));
box-shadow: 0 4px 0 rgba(27, 25, 56, .10);
text-decoration: none;
}
[data-hn-template="kids"] .ka-tile:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(27, 25, 56, .10); }
/* The picture is the part that flexes. width/height on the ![]()
are presentation hints
for the CSS properties — the bug that stretched the room's first tiles to 176x360 —
so an author rule has to state both: `height: auto` to drop the hint, then flex to
take the cell's leftover height. 88px is the floor at which a drawing still reads as
what it is; below that the page would rather scroll. */
[data-hn-template="kids"] .ka-tile img {
display: block; width: 100%; object-fit: cover;
/* Stated, because width/height on the ![]()
are presentation hints for the CSS
properties: leave it to `aspect-ratio` and the hint wins ( the bug that stretched
the room's first tiles to 176x360 ), and leave it `auto` and a square drawing is as
tall as the column is wide. --ka-rows is printed by the view: three kinds make two
rows and five make three, and the arithmetic has to know which. */
height: min(
150px, /* the ceiling */
calc( ( 100dvh - var(--oe-floor, 0px) - var(--ka-fixed, 430px) ) / var(--ka-rows, 2) ),
40vw /* the shape */
);
min-height: 88px;
}
[data-hn-template="kids"] .ka-tile-band { display: block; padding: 8px 12px 11px; }
[data-hn-template="kids"] .ka-tile-name {
display: block;
font-family: var(--hn-font-head); font-size: 18px; font-weight: 700; line-height: 21px;
color: #ffffff;
}
[data-hn-template="kids"] .ka-tile-count {
display: block; font-size: 11.5px; line-height: 14px; color: rgba(255, 255, 255, .88);
}
/* ── the one action ───────────────────────────────────────────────────────────── */
/* The play colour is #E9573B and it cannot carry this label: white on it is 3.6:1 and
this is 22px, under the 24px where 3:1 would do. So the FILL is the readable step and
the loud one becomes the halo around it — the button still reads as coral from across
a room, and the word on it passes at 5.3:1. */
[data-hn-template="kids"] .ka-go {
display: flex; align-items: center; justify-content: center; gap: 10px;
margin-top: 16px; min-height: 64px; padding: 0 18px;
border-radius: 22px;
background: var(--hnk-coral-d); color: #ffffff; text-decoration: none;
box-shadow: 0 0 0 5px rgba(233, 87, 59, .22), 0 6px 0 #8A3413;
}
[data-hn-template="kids"] .ka-go:hover,
[data-hn-template="kids"] .ka-go:focus { color: #ffffff; }
[data-hn-template="kids"] .ka-go:active { transform: translateY(3px); box-shadow: 0 0 0 5px rgba(233, 87, 59, .22), 0 3px 0 #8A3413; }
[data-hn-template="kids"] .ka-go svg { width: 22px; height: 22px; flex: none; }
[data-hn-template="kids"] .ka-go span {
font-family: var(--hn-font-head); font-size: 22px; font-weight: 700;
}
[data-hn-template="kids"] .ka-go-foot {
margin: 9px 0 0; text-align: center;
font-size: 12.5px; line-height: 17px; color: var(--hnk-ink-2);
}
[data-hn-template="kids"] .ka-facts {
list-style: none; margin: 13px 0 0; padding: 0;
display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px;
}
[data-hn-template="kids"] .ka-facts li {
display: inline-flex; align-items: center; gap: 5px;
font-size: 12.5px; font-weight: 600; color: var(--hnk-ink-2);
}
[data-hn-template="kids"] .ka-facts svg { width: 14px; height: 14px; flex: none; color: var(--hnk-grass); }
/* Pushed to the foot of the screen by the flex column above, so the pictures sit under
the heading where a child looks and this sits where an adult's thumb already is. */
[data-hn-template="kids"] .ka-grown-row {
display: flex; align-items: center; gap: 11px; width: 100%;
margin-top: auto; padding: 11px 14px;
border: 1.5px solid #DDD2FA; border-radius: 18px;
background: #F1ECFE; text-align: left; cursor: pointer;
}
[data-hn-template="kids"] .ka-grown-ic {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; flex: none;
border-radius: 12px; background: var(--hnk-violet); color: #ffffff;
}
[data-hn-template="kids"] .ka-grown-ic svg { width: 17px; height: 17px; }
[data-hn-template="kids"] .ka-grown-copy { flex: 1 1 auto; }
[data-hn-template="kids"] .ka-grown-h {
display: block; font-size: 14px; font-weight: 800; color: #3B1F87;
}
[data-hn-template="kids"] .ka-grown-p {
display: block; font-size: 12px; line-height: 16px; color: var(--hnk-ink-3);
}
[data-hn-template="kids"] .ka-grown-go { width: 18px; height: 18px; flex: none; color: #5A2FC4; }
/* ── behind the key ───────────────────────────────────────────────────────────── */
[data-hn-template="kids"] .ka-g-h {
margin: 6px 0 0;
font-family: var(--hn-font-head);
font-size: 24px; line-height: 29px; font-weight: 800; color: var(--hnk-ink);
}
[data-hn-template="kids"] .ka-g-h span { display: block; }
[data-hn-template="kids"] .ka-g-p {
margin: 6px 0 0; font-size: 13.5px; line-height: 19px; color: var(--hnk-ink-2);
}
[data-hn-template="kids"] .ka-g-facts {
margin: 14px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
[data-hn-template="kids"] .ka-g-facts > div {
padding: 9px 10px; border: 1px solid #EFE9E0; border-radius: 15px; background: #ffffff;
}
[data-hn-template="kids"] .ka-g-facts dt {
font-size: 10.5px; font-weight: 800; letter-spacing: .03em; color: var(--hnk-grass);
text-transform: uppercase;
}
[data-hn-template="kids"] .ka-g-facts dd {
margin: 0; font-family: var(--hn-font-head); font-size: 15.5px; font-weight: 700;
color: var(--hnk-ink);
}
[data-hn-template="kids"] .ka-g-h3 {
margin: 18px 0 9px;
font-family: var(--hn-font-head); font-size: 19px; font-weight: 700; color: var(--hnk-ink);
}
[data-hn-template="kids"] .ka-packs { list-style: none; margin: 0; padding: 0; }
[data-hn-template="kids"] .ka-packs li + li { margin-top: 9px; }
[data-hn-template="kids"] .ka-pack {
display: flex; align-items: center; gap: 11px;
padding: 10px; border: 1px solid #EFE9E0; border-radius: 18px;
background: #ffffff; text-decoration: none; color: inherit;
}
/* The shared shelf card renders this cover as a 2x2 of 48x106 cells on a phone — four
slivers of four pictures. Here the cells are square, which is the shape they are drawn
in, and the whole cover is one thumbnail rather than half a card. */
[data-hn-template="kids"] .ka-pack-cover {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
width: 62px; height: 62px; flex: none;
border-radius: 13px; overflow: hidden; background: #EFE9E0;
}
[data-hn-template="kids"] .ka-pack-cover img { display: block; width: 100%; height: 30px; object-fit: cover; }
[data-hn-template="kids"] .ka-pack-body { flex: 1 1 auto; min-width: 0; }
[data-hn-template="kids"] .ka-pack-name {
display: block; font-family: var(--hn-font-head); font-size: 16px; font-weight: 700;
line-height: 20px; color: var(--hnk-ink);
}
[data-hn-template="kids"] .ka-pack-meta { display: block; font-size: 12px; color: var(--hnk-ink-3); }
[data-hn-template="kids"] .ka-pack-price {
display: block; margin-top: 2px; font-size: 13px; font-weight: 800; color: var(--hnk-ink);
}
[data-hn-template="kids"] .ka-pack-price.is-free { color: var(--hnk-grass); }
[data-hn-template="kids"] .ka-pack-price i { margin-right: 1px; font-size: 11px; }
[data-hn-template="kids"] .ka-pack-go { width: 18px; height: 18px; flex: none; color: var(--hnk-ink-3); }
[data-hn-template="kids"] .ka-more {
display: block; margin-top: 11px; text-align: center;
font-size: 13.5px; font-weight: 700; color: var(--hnk-violet); text-decoration: none;
}
/* The sign-in trigger is the shared one ( partials/login-trigger.php ), which is hidden
above 767.98px because the card is on the page there. In the app it is the only way to
the sheet, so it is shown at every width this surface can be. */
[data-hn-template="kids"] .ka-grown .hn-login-trigger-row {
display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px;
}
[data-hn-template="kids"] .ka-grown .hn-login-trigger-row .hn-btn { flex: 1 1 140px; justify-content: center; }
/* Its own colours, because the shared trigger is drawn for a DARK hero: .hn-login-trigger-alt
is white text on nothing, which on this cream panel is a button you can only find by
tapping where you remember it being. */
[data-hn-template="kids"] .ka-grown .hn-login-trigger { background: var(--hnk-coral-d); color: #ffffff; border: 0; }
[data-hn-template="kids"] .ka-grown .hn-login-trigger-alt {
background: #ffffff; color: var(--hnk-violet); border: 1.5px solid #DDD2FA;
}
[data-hn-template="kids"] .ka-grown .hn-login-trigger-alt:hover { background: #F1ECFE; color: #4B22A8; }
[data-hn-template="kids"] .ka-g-links {
display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 20px;
}
[data-hn-template="kids"] .ka-g-links a { font-size: 12.5px; color: var(--hnk-ink-3); text-decoration: none; }
[data-hn-template="kids"] .ka-g-links a:hover { color: var(--hnk-ink); text-decoration: underline; }
[data-hn-template="kids"] .ka-g-lang {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px;
}
[data-hn-template="kids"] .ka-g-lang-label {
font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
color: var(--hnk-ink-3);
}
[data-hn-template="kids"] .ka-g-lang a {
display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px;
border: 1px solid var(--hnk-line); border-radius: 15px;
font-size: 12px; font-weight: 700; color: var(--hnk-ink-2); text-decoration: none;
}
/* ── the switch ───────────────────────────────────────────────────────────────────
WITHOUT JavaScript both panels are in the document, one under the other, and the page
is simply longer — the anchor in the link still lands on the right one. `is-ready` is
written by homepage-new.js, so nothing is hidden until something can show it again. */
[data-hn-template="kids"] .ka-door.is-ready .ka-grown { display: none; }
[data-hn-template="kids"] .ka-door.is-ready.is-grown .ka-play { display: none; }
[data-hn-template="kids"] .ka-door.is-ready.is-grown .ka-grown { display: block; }
/* The one blue thing left on a children's screen. .hn-login-brand-mark is a navy gradient
stated once in homepage-new.css for all sixteen tenants, and on the front door it is the
sign-in tile — the single most looked-at square on the parents' half. The kids card has
carried the hook for this ( hn-login-card--kids ) since the web template was built and
nothing had used it.
Held to the app, because the browser page is deliberately out of scope for this round.
The same square is still navy on the web homepage's own card; it is one selector to
widen when somebody decides that. */
body.hn-app-shell[data-hn-template="kids"] .hn-login-card--kids .hn-login-brand-mark {
background: linear-gradient(135deg, #8A3413, #E9573B);
box-shadow: 0 6px 16px rgba(233, 87, 59, .28);
}
/* The card itself is on the page above 767.98px on every other template. This surface is
a phone-shaped WebView; on the rare wide one ( a tablet in the app ) the sheet's own
rules stop applying and the card would print in the middle of the front door. */
@media (min-width: 768px) {
[data-hn-template="kids"] .ka-door ~ .hn-login-shell { display: none; }
}