/* Plus Jakarta Sans, self-hosted variable font: the same file Google
was already serving, covering weights 400-800 in one request.
latin + latin-ext only, which is all this site renders. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(../assets/fonts/pjs-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(../assets/fonts/pjs-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* =========================================================
SmartSG IPTV — original design system
========================================================= */
:root{
/* ---- SmartSG IPTV surfaces: ink navy, four measured steps ----
Each step is a fixed lightness jump so a card always reads as
a plane above the section it sits in, at any viewport. */
--bg:var(--blue-950); /* foundation */
--bg-alt:var(--blue-900); /* alternating sections */
--surface:var(--blue-900); /* cards — a distinct plane */
--surface-2:var(--blue-850); /* hover / raised */
--panel:var(--surface);
--panel-2:var(--surface-2);
/* ---- borders: on ink the border carries the separation,
so it is a real hairline rather than a hint ---- */
--line:var(--blue-100); /* structural dividers */
--line-2:var(--blue-200); /* card outlines */
--line-3:var(--blue-300); /* emphasis / hover */
--line-str:var(--line-2);
--line-accent:rgba(84,187,254,.45);
/* ---- text ---- */
--text:#FFFFFF; /* headings and key labels */
--text-2:var(--ink-700); /* body — 8.4:1 on white */
--text-3:var(--ink-500); /* meta — 5.7:1 on white */
--muted:var(--text-2);
--dim:var(--text-3);
/* ---- accent: amber gold. Warm, so WhatsApp green never competes
with it — the paid action and the chat action stay distinguishable
at a glance, which the whole pricing block depends on. ---- */
--accent:var(--accent); /* 9.3:1 on --bg */
--accent-hover:var(--blue-400);
--accent-soft:var(--blue-050);
--accent-tint:rgba(84,187,254,.13);
--accent-deep:var(--blue-800);
--on-accent:#ffffff; /* 9.1:1 on --accent */
--accent-glow:rgba(84,187,254,.34);
--grad:linear-gradient(100deg,var(--blue-400) 0%,var(--accent) 100%);
/* legacy aliases — the component layer below still names them */
--lime:var(--accent);
--lime-hover:var(--accent-hover);
--lime-soft:var(--accent-soft);
--lime-tint:var(--accent-tint);
--lime-deep:var(--accent-deep);
--on-lime:var(--on-accent);
--lime-lt:var(--accent-hover);
--lime-pale:var(--accent-soft);
--wa:#25D366;
--wa-deep:#1DA851;
--r-sm:10px; --r:16px; --r-lg:22px; --r-xl:28px;
--pad:clamp(1.25rem,4vw,2rem);
--gap:clamp(1rem,2vw,1.5rem);
--sec-y:clamp(4.5rem,9vw,8rem);
--max:1180px;
--ease:cubic-bezier(.2,.7,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--text);font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:clamp(.975rem,.93rem + .2vw,1.0625rem);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.025em;font-weight:800;}
p{margin:0}
svg{display:block}
:focus-visible{border-radius:4px;}
.skip-link{
position:absolute;left:-9999px;top:0;z-index:200;
background:var(--lime);color:var(--on-lime);padding:.7rem 1.1rem;border-radius:0 0 var(--r-sm) 0;font-weight:700;
}
.skip-link:focus{left:0}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.wrap-narrow{max-width:820px}
/* ---------- section shells ---------- */
.section{padding-block:var(--sec-y);position:relative}
.sec-head{max-width:660px;margin-bottom:clamp(2.5rem,5vw,3.75rem)}
.sec-head h2{font-size:clamp(1.75rem,1.2rem + 2.3vw,2.85rem);margin-bottom:.85rem}
.sec-sub{color:var(--muted);font-size:1.02em}
.eyebrow{
display:inline-flex;align-items:center;gap:.55rem;
font-size:.775rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
color:var(--accent);background:var(--accent-faint);
border:1px solid var(--accent-edge);
padding:.4rem .85rem;border-radius:100px;margin-bottom:1.15rem;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime);flex:none}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* ---------- buttons ---------- */
.btn{
--btn-bg:transparent;
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
font:inherit;font-weight:700;letter-spacing:-.01em;
padding:.72rem 1.35rem;border-radius:100px;border:1px solid transparent;
cursor:pointer;text-align:center;
transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s var(--ease),border-color .18s var(--ease);
}
.btn-lg{padding:.92rem 1.75rem;font-size:1.02em}
.btn-block{width:100%}
.btn-primary{background:var(--grad);color:var(--on-lime);box-shadow:0 6px 20px -6px rgba(84,187,254,.30)}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(84,187,254,.55)}
.btn-ghost{background:var(--panel);color:var(--text);border-color:var(--line-str)}
.btn-ghost:hover{background:var(--panel-2);border-color:var(--accent-edge-2);transform:translateY(-2px)}
/* ---------- header ---------- */
.site-header{
position:sticky;top:0;z-index:100;
border-bottom:1px solid transparent;
transition:background-color .25s var(--ease),border-color .25s var(--ease),backdrop-filter .25s var(--ease);
}
.site-header.stuck{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--header-h)}
.brand{display:inline-flex;align-items:center;font-weight:800;font-size:1.2rem;letter-spacing:-.03em;}
.nav{display:flex;align-items:center;gap:.35rem}
.nav>a{padding:.5rem .8rem;border-radius:100px;font-weight:600;font-size:.95rem;transition:color .18s var(--ease),background-color .18s var(--ease);}
.nav-cta{margin-left:.6rem;color:var(--on-lime)!important}
.nav-cta:hover{color:var(--on-lime)!important;filter:brightness(1.06)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line-str);background:var(--panel);border-radius:12px;cursor:pointer;padding:0;place-items:center}
.burger span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;margin:3px auto;transition:transform .22s var(--ease),opacity .18s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
/* ---------- hero ----------
The warm red identity is declared on .hero and used only by
hero-scoped selectors,so the rest of the site keeps brand blue. */
.hero{--flame:var(--accent);--flame-deep:var(--accent-deep);--ember:var(--blue-400);--flame-grad:linear-gradient(103deg,var(--blue-400) 0%,var(--accent-hover) 100%);position:relative;overflow:hidden;isolation:isolate;}
/* ambient red light,masked out before the blue sections below */
.hero-glow{position:absolute;inset:-22% -14% auto -14%;height:940px;pointer-events:none;z-index:-1;-webkit-mask-image:linear-gradient(#000 58%,transparent 97%);mask-image:linear-gradient(#000 58%,transparent 97%);}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(56% 52% at 46% 34%,#000 0%,transparent 78%);mask-image:radial-gradient(56% 52% at 46% 34%,#000 0%,transparent 78%);}
.hero-inner{
position:relative;z-index:1;
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(2.5rem,4.5vw,4.5rem);align-items:center;
}
/* ---------- left column ---------- */
.hero .eyebrow{color:var(--blue-200);background:var(--accent-faint);border-color:var(--accent-edge)}
.hero .eyebrow .dot{background:var(--flame);box-shadow:0 0 9px var(--flame)}
.hero-copy h1{font-size:clamp(2.2rem,1.2rem + 4.2vw,4.35rem);letter-spacing:-.04em;line-height:1.03;margin-bottom:1.25rem;text-wrap:balance;font-weight:800;}
.h1-lead{display:block;}
.hero .lede{color:var(--muted);font-size:clamp(1rem,.95rem + .4vw,1.16rem);max-width:34em}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.1rem}
.hero .btn-ghost{border-color:var(--accent-edge)}
.hero .btn-ghost:hover{border-color:var(--accent-edge-2);background:var(--accent-faint)}
.btn-ico{display:inline-flex;align-items:center;flex:none;line-height:1}
.btn-ico svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* icon trust row */
.hero-trust{flex-wrap:wrap;margin-top:2.2rem;}
.hero-trust li{display:flex;align-items:center;gap:.65rem;}
.ht-ico{display:grid;place-items:center;flex:none;background:var(--accent-faint);border:1px solid var(--accent-edge);}
.ht-ico svg{fill:none;stroke:var(--ember);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.ht-txt{display:flex;flex-direction:column;line-height:1.3}
.ht-txt b{font-weight:700;color:var(--text);}
.ht-txt span{color:var(--dim);font-weight:500;}
/* ---------- television on a console ---------- */
.hero-visual{position:relative}
/* ---------- shared components ----------
.ico and .tick are used by the feature cards,the trust cards,pricing
and every landing and article page. They were defined inside the old
bento block; restored verbatim here so removing that block is safe. */
.ico{
display:grid;place-items:center;width:44px;height:44px;flex:none;
border-radius:13px;margin-bottom:1rem;
background:linear-gradient(150deg,rgba(84,187,254,.24),rgba(84,187,254,.12));
border:1px solid var(--accent-edge);
}
.tick{display:flex;flex-direction:column;gap:.5rem;margin-top:1.1rem}
.tick li{position:relative;padding-left:1.55rem;color:var(--muted);font-size:.92rem}
.tick li::before{content:"";position:absolute;left:0;top:.52em;width:14px;height:8px;border-left:2px solid var(--lime);border-bottom:2px solid var(--lime);transform:rotate(-45deg);border-radius:1px;}
/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);align-items:stretch}
.plan{
position:relative;display:flex;flex-direction:column;
background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);
padding:clamp(1.5rem,2.6vw,1.9rem);
transition:transform .22s var(--ease),border-color .22s var(--ease)}
.plan:hover{transform:translateY(-4px);border-color:var(--accent-edge-2)}
.plan-name{font-size:1.05rem;font-weight:700;margin-bottom:.35rem;}
.plan-price{font-size:clamp(2.3rem,1.9rem + 1.6vw,3rem);font-weight:800;letter-spacing:-.045em;line-height:1;}
.plan-price .cur{font-size:.5em;font-weight:700;vertical-align:.55em;margin-right:.06em;}
.plan-note{color:var(--dim);font-size:.855rem;margin-top:.5rem;font-weight:600;}
.plan .tick{flex:1;margin-top:1.35rem;margin-bottom:1.6rem}
.plan .tick li{font-size:.885rem}
.plan-flag{position:absolute;top:-1px;right:1.35rem;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .7rem;border-radius:0 0 8px 8px;}
.price-foot{margin-top:2rem;color:var(--dim);font-size:.92rem;max-width:60ch}
.price-foot a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* ---------- faq ---------- */
.faq-list{display:flex;flex-direction:column;gap:.7rem}
.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .2s var(--ease)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem 1.3rem;cursor:pointer;list-style:none;font-weight:700;font-size:1rem;letter-spacing:-.015em;}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary i{
position:relative;width:16px;height:16px;flex:none;
}
.faq-item summary i::before,.faq-item summary i::after{content:"";position:absolute;border-radius:2px;transition:transform .22s var(--ease),opacity .22s var(--ease);}
.faq-item summary i::before{left:0;top:7px;width:16px;height:2px}
.faq-item summary i::after{left:7px;top:0;width:2px;height:16px}
.faq-item[open] summary i::after{transform:scaleY(0);opacity:0}
.faq-a{padding:0 1.3rem 1.25rem;color:var(--muted);font-size:.95rem;max-width:70ch}
.faq-a a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* ---------- final cta ---------- */
.final-cta{padding-block:var(--sec-y)}
.cta-panel{position:relative;overflow:hidden;text-align:center;border:1px solid var(--accent-edge);border-radius:clamp(var(--r-lg),4vw,34px);padding:clamp(2.75rem,6vw,4.5rem) var(--pad);background:linear-gradient(160deg,rgba(84,187,254,.19),rgba(84,187,254,.05) 55%,rgba(255,255,255,.03));}
.cta-glow{position:absolute;pointer-events:none;}
.cta-panel h2{position:relative;font-size:clamp(1.75rem,1.2rem + 2.4vw,3rem);margin-bottom:1rem}
.cta-panel p{position:relative;color:var(--muted);max-width:56ch;margin-inline:auto;font-size:1.03em}
.cta-panel .hero-cta{position:relative;justify-content:center}
/* ---------- footer ---------- */
.site-footer{padding-top:clamp(3rem,6vw,4.5rem);}
.footer-top{display:grid;gap:clamp(2rem,4vw,3rem);}
.footer-brand p{color:var(--muted);font-size:.925rem;margin-top:1rem;max-width:38ch}
.footer-brand .brand{margin-bottom:0}
.footer-col h2{font-size:.775rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin-bottom:1.1rem;}
.footer-col ul{display:flex;flex-direction:column;gap:.6rem}
.footer-col a{font-size:.93rem;transition:color .18s var(--ease);}
.footer-bottom{display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:center;justify-content:space-between;margin-top:clamp(2.5rem,5vw,3.5rem);padding-block:1.5rem;color:var(--dim);font-size:.845rem;}
.footer-disc{max-width:56ch}
/* =========================================================
Responsive
========================================================= */
@media (max-width:1080px){
.showcase-grid{grid-template-columns:repeat(3,1fr)}
.price-grid{grid-template-columns:repeat(2,1fr)}
.trust-grid{grid-template-columns:repeat(2,1fr)}
.footer-top{grid-template-columns:1fr 1fr}
.footer-brand{grid-column:span 2}
}@media (max-width:900px){
.nav{
position:fixed;inset:var(--header-h) 0 auto 0;
flex-direction:column;align-items:stretch;gap:.25rem;
background:rgba(6,9,19,.97);
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border-bottom:1px solid var(--line);
padding:1rem var(--pad) 1.5rem;
transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
max-height:calc(100dvh - var(--header-h));overflow-y:auto;
}
.nav.open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
.nav>a{padding:.85rem .6rem;font-size:1.02rem;border-radius:12px}
.nav-cta{margin-left:0;margin-top:.75rem;justify-content:center}
.burger{display:grid}
.site-header{background:rgba(10,12,17,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
}@media (max-width:620px){
.price-grid{grid-template-columns:1fr}
.footer-top{grid-template-columns:1fr}
.footer-brand{grid-column:span 1}
.footer-bottom{flex-direction:column;align-items:flex-start}
}
/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
.btn:hover,.player:hover,.plan:hover,.trust-card:hover,.show-card:hover{transform:none}
.show-card:hover img{transform:none}
}
/* ---------- legal / document pages ---------- */
.legal{padding-block:clamp(3rem,7vw,5rem) var(--sec-y)}
.legal-head{margin-bottom:2.5rem;padding-bottom:2rem;border-bottom:1px solid var(--line)}
.legal-head h1{font-size:clamp(1.9rem,1.3rem + 2.6vw,3rem);margin-bottom:.85rem}
.legal-head p{color:var(--muted)}
.legal-body h2{font-size:clamp(1.2rem,1.05rem + .7vw,1.5rem);margin:2.5rem 0 .85rem}
.legal-body h2:first-child{margin-top:0}
.legal-body p{color:var(--muted);margin-bottom:1rem;max-width:72ch}
.legal-body ul{display:flex;flex-direction:column;gap:.55rem;margin:0 0 1.25rem;max-width:72ch}
.legal-body li{position:relative;padding-left:1.3rem;color:var(--muted)}
.legal-body li::before{content:"";position:absolute;left:.2rem;top:.72em;width:5px;height:5px;border-radius:50%;}
.legal-body a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.85rem;color:var(--dim);margin-bottom:1.35rem}
.crumbs a{color:var(--accent)}
.crumbs span{opacity:.5}
/* =========================================================
QA pass — fixes verified against rendered screenshots
========================================================= */
/* Anchor targets were landing under the sticky header */
section[id],main[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
/* Keep the pricing feature lists on a shared baseline across all four plans */
.plan-note{min-height:2.9em;}
/* The final-CTA glow sat too far below the panel to be visible */
.cta-glow{inset:auto -20% -55% -20%;height:380px;}
.cta-panel{box-shadow:inset 0 1px 0 rgba(255,255,255,.10);}
/* Let the browser even out heading line lengths (progressive enhancement) */
.hero-copy h1,.sec-head h2,.cta-panel h2,.legal-head h1{text-wrap:balance}
.lede,.sec-sub,.cta-panel p{text-wrap:pretty}
/* =========================================================
Landing / guide pages
========================================================= */
.doc{padding-block:clamp(2.5rem,6vw,4rem) var(--sec-y)}
.wrap-doc{max-width:880px}
.doc-head{margin-bottom:clamp(2.5rem,5vw,3.5rem);padding-bottom:clamp(2rem,4vw,2.5rem);border-bottom:1px solid var(--line)}
.doc-head h1{font-size:clamp(1.9rem,1.3rem + 2.7vw,3.1rem);margin-bottom:1.1rem;text-wrap:balance}
.doc-head .lede{max-width:64ch}
.doc-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
/* body copy */
.prose{display:flex;flex-direction:column;gap:clamp(2.25rem,4.5vw,3.25rem)}
.prose-block h2{font-size:clamp(1.35rem,1.1rem + 1.1vw,1.85rem);margin-bottom:1rem;text-wrap:balance}
.prose-block h3{font-size:1.1rem;margin:1.75rem 0 .6rem}
.prose-block p{color:var(--muted);margin-bottom:1rem;max-width:68ch}
.prose-block p:last-child{margin-bottom:0}
.prose-block a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose-block a:hover{color:var(--blue-200)}
.prose-block strong{color:var(--text);font-weight:700}
.prose-block code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;border-radius:6px;padding:.12em .4em;}
.prose-block .tick{margin-top:0;margin-bottom:1rem;max-width:68ch}
/* numbered step lists */
.steps-list{counter-reset:st;display:flex;flex-direction:column;gap:.9rem;margin:0 0 1rem;max-width:68ch}
.steps-list li{counter-increment:st;position:relative;padding-left:2.9rem;color:var(--muted)}
.steps-list li::before{
content:counter(st,decimal-leading-zero);position:absolute;left:0;top:-.1em;
width:2rem;height:2rem;display:grid;place-items:center;border-radius:50%;
font-size:.75rem;font-weight:800;color:#fff;
background:radial-gradient(circle at 30% 25%,var(--blue-900),var(--blue-950));
border:1px solid var(--accent-edge-2);
}
/* comparison tables */
.table-wrap{overflow-x:auto;margin:0 0 1rem;border:1px solid var(--line);border-radius:var(--r);}
.table-wrap table{border-collapse:collapse;width:100%;min-width:520px;font-size:.92rem}
.table-wrap caption{text-align:left;padding:.9rem 1rem .1rem;color:var(--dim);font-size:.85rem;font-weight:600}
.table-wrap th,.table-wrap td{padding:.7rem 1rem;text-align:left;color:var(--muted);}
.table-wrap thead th{font-weight:700;font-size:.83rem;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;}
.table-wrap tbody th{color:var(--text);font-weight:700}
.table-wrap tbody tr:last-child th,.table-wrap tbody tr:last-child td{border-bottom:0}
.table-wrap a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* related links */
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.related-card{
display:flex;flex-direction:column;gap:.35rem;
background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
padding:1.1rem 1.25rem;
transition:transform .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease);
}
.related-card:hover{transform:translateY(-3px);border-color:var(--accent-edge-2);background:var(--panel-2)}
.rc-title{font-weight:700;color:var(--text);letter-spacing:-.015em}
.rc-desc{font-size:.88rem;color:var(--muted)}
/* closing CTA */
.doc-cta-panel{
margin-top:clamp(2.75rem,5vw,4rem);
border:1px solid var(--accent-edge);border-radius:var(--r-xl);
padding:clamp(1.75rem,4vw,2.5rem);
background:linear-gradient(160deg,rgba(84,187,254,.17),rgba(84,187,254,.05) 60%,rgba(255,255,255,.03));
}
.doc-cta-panel h2{font-size:clamp(1.3rem,1.1rem + .9vw,1.7rem);margin-bottom:.7rem}
.doc-cta-panel p{color:var(--muted);max-width:60ch}
.doc-cta-panel .doc-cta{margin-top:1.35rem}@media (max-width:620px){
.related-grid{grid-template-columns:1fr}
.doc-cta .btn{width:100%}
}
/* Footer gained a fifth column (Devices) — widen the desktop grid to match */
.footer-top{grid-template-columns:1.5fr repeat(4,1fr);}@media (max-width:1080px){
.footer-top{grid-template-columns:repeat(3,1fr)}
.footer-brand{grid-column:span 3}
}@media (max-width:760px){
.footer-top{grid-template-columns:repeat(2,1fr)}
.footer-brand{grid-column:span 2}
}@media (max-width:480px){
.footer-top{grid-template-columns:1fr}
.footer-brand{grid-column:span 1}
}
/* Article byline / editorial metadata */
.byline{margin-top:1.25rem;color:var(--dim);font-size:.875rem;font-weight:600}
.byline a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.doc-head .eyebrow{margin-bottom:1rem}
/* Long inline code (example M3U URLs) must wrap rather than push the page wide */
.prose-block code{overflow-wrap:anywhere;word-break:break-word;}
/* Cards inside prose are links,but should not inherit the body-link underline */
.prose-block .related-card,.prose-block .related-card:hover{text-decoration:none}
.prose-block .related-card .rc-title,.prose-block .related-card .rc-desc{text-decoration:none}
.prose-block .related-card .rc-title{color:var(--text)}
/* ---------- hero responsive ---------- */
@media (max-width:1024px){
.hero-inner{gap:2.25rem}
.fc-1{left:-2%}
.fc-2{right:-2%}
.ht-txt b{font-size:.85rem}
.ht-txt span{font-size:.74rem}
}@media (max-width:900px){
.hero-inner{grid-template-columns:1fr;gap:3rem}
.hero-visual{max-width:580px;width:100%;margin-inline:auto}
.hero .lede{max-width:none}
.hero-glow{height:760px}
}@media (max-width:620px){
.hero-cta{flex-direction:column;align-items:stretch}
.hero-cta .btn{width:100%}
.hero-trust{gap:.9rem 1.2rem}
.hero-trust li{flex:1 1 100%}
.hero-glow{height:600px;background:
radial-gradient(54% 38% at 30% 24%,rgba(84,187,254,.20),transparent 72%)}
}@media (prefers-reduced-motion:reduce){
.hero .btn-flame:hover{transform:none}
}
/* Three trust items on one row,aligned,instead of wrapping 2 + 1 */
.hero-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem .9rem;}
.hero-trust li{flex:initial;}
.ht-ico{width:30px;height:30px;border-radius:9px;}
.ht-ico svg{width:15px;height:15px;}
.ht-txt b{font-size:.82rem;line-height:1.25;}
.ht-txt span{font-size:.72rem;}@media (max-width:620px){
.hero-trust{grid-template-columns:1fr;gap:.85rem}
}
/* Keep the second label attached to its chip row instead of stranding it */
/* Trim dead space under the hero */
.hero{padding-block:clamp(2.75rem,6vw,5rem) clamp(3rem,6vw,5.25rem);}
/* ===============================================================
COLOUR SYSTEM
Lime appears in seven places only: primary buttons,the active nav
item,tick marks,icon glyphs,the focus ring,the eyebrow dot,and
the featured plan. Everything else is dark surface + white/gray.
=============================================================== */
/* ---- surfaces & structure ---------------------------------- */
.player,.plan,.related-card,.faq-item,.float-card{
background:var(--surface);border-color:var(--line);
}
.table-wrap{border-color:var(--line);}
.table-wrap th,.table-wrap td{border-bottom-color:var(--line);}
/* hover is a lift and a lighter surface — not a colour change */
/* ---- typography -------------------------------------------- */
h1,h2,h3{color:var(--text);}
.hero-copy h1{color:var(--text);}
/* the headline is white; lime lives in the button beneath it */
.hero-copy h1 .grad{display:block;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--text);}
.h1-lead{color:var(--text);}
.lede,.sec-sub,.prose-block p,.faq-a p,.rc-desc,.plan-note,.footer-brand p,.doc-cta-panel p,.cta-panel p{color:var(--text-2)}
.byline,.crumbs,.footer-bottom,.price-foot,.table-wrap caption,.ui-label{color:var(--text-3)}
.tick li,.legal-body p,.legal-body li{color:var(--text-2)}
.prose-block strong,.table-wrap tbody th,.rc-title{color:var(--text)}
/* ---- the eyebrow: gray label,single lime dot --------------- */
.eyebrow,.hero .eyebrow{color:var(--text-3);}
.eyebrow .dot,.hero .eyebrow .dot{background:var(--lime);box-shadow:none;width:5px;height:5px}
/* ---- links: off-white,lime only on hover ------------------- */
.prose-block a,.legal-body a,.faq-a a,.table-wrap a,.price-foot a,.crumbs a,.byline a{color:var(--text);}
/* ---- buttons: the primary action is the loudest thing ------- */
.btn-primary,.hero .btn-flame,.nav-cta{border-color:transparent;box-shadow:none;}
.btn-ghost,.hero .btn-ghost{border-color:var(--line-2);}
/* ---- icons: small lime glyph on a dark tinted chip ---------- */
.ico svg,.ht-ico svg{stroke:var(--lime);fill:none}
/* tick marks stay lime — they are functional,and they are tiny */
.tick li::before,.legal-body li::before{border-color:var(--lime);background:transparent}
.legal-body li::before{background:var(--lime);}
/* ---- ambient light: almost none ----------------------------- */
.hero::after{opacity:.5;}
.cta-panel,.doc-cta-panel{
background:var(--surface);border-color:var(--line-2);box-shadow:none;
}
/* ---- pricing: one featured card,marked by border not fill --- */
.plan-featured{border-color:var(--line-accent);}
.plan-price{color:var(--text);}
.plan-name{color:var(--text-2);}
/* ---- FAQ ---------------------------------------------------- */
.faq-item summary{color:var(--text);}
/* ---- header & footer ---------------------------------------- */
.site-header.stuck{border-bottom-color:var(--line);}
.site-footer{border-top-color:var(--line);}
.footer-col h2{color:var(--text-3);}
.footer-bottom{border-top-color:var(--line);}
/* ---- focus: lime,because it must be unmistakable ----------- */
/* ---- the TV interface: one lime accent,rest neutral -------- */
.ui-logo b{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--lime);}
/* ---- inline code -------------------------------------------- */
.prose-block code{border-color:var(--line);}
/* Links need an affordance at rest. White text with a lime underline gives
one without putting lime type through every paragraph. */
.prose-block a,.legal-body a,.faq-a a,.table-wrap a,.price-foot a,.crumbs a,.byline a{text-decoration:underline;text-decoration-color:rgba(84,187,254,.55);text-underline-offset:3px;text-decoration-thickness:1px;}
.prose-block a:hover,.legal-body a:hover,.faq-a a:hover,.table-wrap a:hover,.price-foot a:hover,.crumbs a:hover,.byline a:hover{color:var(--lime);text-decoration-color:var(--lime);}
/* the TV's channel row was five lime chips in a cluster — calm it down */
/* ===============================================================
WhatsApp
Brand green is reserved for WhatsApp and always travels with the
mark,so it reads as a channel rather than a second site accent.
The lime CTA stays the primary action.
=============================================================== */
/* header: icon only in the bar,labelled inside the mobile menu */
.wa-nav{
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
padding:.5rem .62rem;border-radius:100px;flex:none;
color:var(--wa);background:var(--wa-tint);
border:1px solid var(--wa-edge);
transition:background-color .18s var(--ease),border-color .18s var(--ease);
}
.wa-nav:hover{background:var(--wa-tint);border-color:var(--wa-edge);color:var(--wa)}
.wa-nav svg{width:17px;height:17px;fill:currentColor;flex:none}
.wa-nav span{display:none}
/* in-page secondary action: dark button,green mark */
.btn-wa{background:transparent;color:var(--text);border-color:var(--wa-edge)}
.btn-wa:hover{background:var(--wa-tint);border-color:var(--wa-edge);color:var(--text);transform:translateY(-2px)}
.wa-ico{display:inline-flex;align-items:center;color:var(--wa);flex:none}
.wa-ico svg{width:1.15em;height:1.15em;fill:currentColor}
/* on the lime CTA the mark inherits the dark button text for contrast */
.btn-flame .wa-ico,.btn-primary .wa-ico{color:currentColor}
/* floating button */
.wa-fab{
position:fixed;z-index:95;
right:clamp(1rem,2.5vw,1.75rem);
bottom:clamp(1rem,2.5vw,1.75rem);
width:54px;height:54px;border-radius:50%;
display:grid;place-items:center;
background:var(--wa);color:#fff;
box-shadow:0 12px 30px -10px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.10);
transition:transform .2s var(--ease),background-color .2s var(--ease);
}
.wa-fab svg{width:28px;height:28px;fill:currentColor}
.wa-fab:hover{background:var(--wa-deep);transform:translateY(-2px)}
.wa-fab:focus-visible{outline:2px solid #fff;outline-offset:3px}@supports (padding:max(0px)){
.wa-fab{bottom:max(clamp(1rem,2.5vw,1.75rem),env(safe-area-inset-bottom, 0px))}
}@media (max-width:900px){
/* inside the mobile menu the link becomes a normal labelled row */
.wa-nav{justify-content:flex-start;padding:.85rem .6rem;border-radius:12px;font-weight:600;font-size:1.02rem}
.wa-nav span{display:inline}
.wa-nav svg{width:19px;height:19px}
}@media (max-width:620px){
.wa-fab{width:50px;height:50px}
.wa-fab svg{width:26px;height:26px}
}@media (prefers-reduced-motion:reduce){
.wa-fab:hover,.btn-wa:hover{transform:none}
}
.sec-foot{margin-top:2rem;color:var(--text-2);font-size:.95rem;max-width:62ch}
.sec-foot a{color:var(--text);text-decoration:underline;text-decoration-color:rgba(37,211,102,.6);text-underline-offset:3px}
.sec-foot a:hover{color:var(--wa);text-decoration-color:var(--wa)}@media (max-width:620px){.price-cta .btn{width:100%}}
/* ---------- nav: intermediate widths ----------
With Pricing added the bar needs 767px. Between the mobile breakpoint
and ~1120px that no longer fits,so spacing tightens rather than the
items wrapping or the hamburger appearing on a desktop-sized screen. */
@media (min-width:901px) and (max-width:1120px){
.nav{gap:.1rem}
.nav>a{padding:.5rem .55rem;font-size:.9rem}
.nav-cta{margin-left:.4rem;padding:.62rem 1rem}
.wa-nav{padding:.48rem .5rem}
.wa-nav svg{width:16px;height:16px}
}
/* ===============================================================
CONTRAST PASS
The previous palette had cards at 1.08:1 against the background —
effectively invisible. Surfaces now step deliberately and borders
are real hairlines,so the ladder background -> section -> card ->
heading -> text -> CTA is legible at a glance.
=============================================================== */
body{background:var(--bg);}
.section-alt{background:var(--bg-alt);border-block:1px solid var(--line);}
/* cards read as a plane,outlined */
.player,.plan,.related-card,.faq-item,.cta-panel,.doc-cta-panel,.table-wrap,.float-card{
background:var(--surface);border:1px solid var(--line-2);
}
.plan:hover,.related-card:hover{background:var(--surface-2);border-color:var(--line-3);transform:translateY(-3px);}
.table-wrap thead th{background:var(--surface-2);color:var(--text);}
.table-wrap th,.table-wrap td{border-bottom:1px solid var(--line);}
/* text ladder */
h1,h2,h3,.hero-copy h1,.h1-lead,.hero-copy h1 .grad,.rc-title,.prose-block strong,.table-wrap tbody th,.plan-price,.faq-item summary,.step h3,.ht-txt b{color:var(--text)}
.lede,.sec-sub,.prose-block p,.faq-a p,.rc-desc,.footer-brand p,.doc-cta-panel p,.cta-panel p,.tick li,.legal-body p,.legal-body li,.table-wrap td,.sec-foot{color:var(--text-2)}
.byline,.crumbs,.footer-bottom,.price-foot,.table-wrap caption,.ui-label,.plan-note,.plan-name,.ht-txt span,.footer-col h2,.eyebrow{color:var(--text-3)}
/* eyebrow: outlined chip so it reads as a label,not stray text */
.eyebrow,.hero .eyebrow{background:var(--surface);border:1px solid var(--line-2);}
/* nav */
.nav>a{color:var(--text-2);}
.nav>a:hover{color:var(--text);background:var(--surface-2);}
.nav>a[aria-current="page"]{color:var(--lime);background:var(--lime-tint);}
.site-header.stuck{background:rgba(10,12,17,.9);border-bottom:1px solid var(--line);}
/* buttons must be unmistakable against the card behind them */
.btn-primary,.hero .btn-flame,.nav-cta{background:var(--lime);color:var(--on-lime)!important;border:1px solid var(--lime);}
.btn-primary:hover,.hero .btn-flame:hover,.nav-cta:hover{background:var(--lime-hover);border-color:var(--lime-hover);color:var(--on-lime)!important;transform:translateY(-2px);box-shadow:none;filter:none;}
.btn-ghost,.hero .btn-ghost{background:var(--surface);border:1px solid var(--line-3);color:var(--text);}
.btn-ghost:hover,.hero .btn-ghost:hover{background:var(--surface-2);border-color:var(--text-3);color:var(--text);}
/* links: white text,unmistakable lime rule beneath */
.prose-block a,.legal-body a,.faq-a a,.table-wrap a,.price-foot a,.crumbs a,.byline a,.sec-foot a{
color:var(--text);text-decoration:underline;
text-decoration-color:var(--lime);text-decoration-thickness:1.5px;text-underline-offset:3px;
}
.prose-block a:hover,.legal-body a:hover,.faq-a a:hover,.table-wrap a:hover,.price-foot a:hover,.crumbs a:hover,.byline a:hover,.sec-foot a:hover{
color:var(--lime);text-decoration-color:var(--lime);
}
.footer-col a{color:var(--text-2);}
.footer-col a:hover{color:var(--lime);}
/* icons */
.ico,.ht-ico{background:var(--lime-tint);border:1px solid var(--line-accent);}
.ico svg,.ht-ico svg{stroke:var(--lime)}
.tick li::before{border-color:var(--lime);}
.hero-trust svg{stroke:var(--lime);}
/* pricing */
.plan-featured{background:var(--surface-2);border:1px solid var(--lime);box-shadow:none;}
.plan-featured:hover{border-color:var(--lime-hover);background:var(--surface-2);}
.plan-flag{background:var(--lime);color:var(--on-lime);}
.plan-price .cur{color:var(--text-3);}
/* steps,faq,footer */
.step-num{background:var(--surface-2);border:1px solid var(--line-3);color:var(--text);}
.faq-item[open]{background:var(--surface-2);border-color:var(--line-3);}
.faq-item summary:hover{color:var(--lime);}
.faq-item summary i::before,.faq-item summary i::after{background:var(--lime);}
.site-footer{background:var(--bg-alt);border-top:1px solid var(--line);}
.footer-bottom{border-top:1px solid var(--line);}
/* ambient light stays minimal */
.hero-glow{background:radial-gradient(40% 44% at 68% 34%,rgba(84,187,254,.06),transparent 72%);}
.cta-glow{background:radial-gradient(50% 100% at 50% 100%,rgba(84,187,254,.10),transparent 72%);}
.prose-block code{background:var(--surface-2);border:1px solid var(--line-2);color:var(--lime-soft);}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;}
/* header */
.sec-head-center{max-width:760px;margin-inline:auto;text-align:center}
.sec-head-center .eyebrow{margin-inline:auto}
.sec-head-center h2{margin-bottom:1rem;letter-spacing:-.035em;line-height:1.08}
.sec-head-center h2 .hl{color:var(--lime)}
.sec-head-center .sec-sub{margin-inline:auto;max-width:46ch}
/* ---------- WhatsApp strip ---------- */
/* ---------- responsive ---------- */
@media (max-width:1080px){
.fv{height:198px}
.epg{font-size:7px}
.epg-b.w2{width:88px}
.dv-tv{width:114px;height:72px}
}@media (max-width:680px){
.sec-head-center h2 br{display:none}
}
/* the continue-watching bar was clipped by 7px in the shorter mobile visual */
@media (max-width:400px){
.vod-title{margin-bottom:7px}
.vod-foot{margin-top:9px;margin-bottom:4px}
}
/* ===============================================================
DEVICES — built from the supplied design reference.
Illustrations are generic silhouettes: the reference's Samsung,LG,Amazon,Android,Apple and MAG marks are not licensed to this project.
=============================================================== */
.dev-sec{position:relative;isolation:isolate;overflow:hidden}
/* ---------- responsive ---------- */
@media (max-width:1080px){
.dgrid{grid-template-columns:repeat(3,1fr)}
}@media (max-width:520px){
.sec-head-center h2 br{display:none}
}
/* ---------- device illustrations: proportion and light refinement ----------
The pool was reading as a grey-green smudge; it is now tighter,softer
and sits behind the hardware. Devices scaled up to fill the stage. */
.dcard-art{height:168px}
/* remote,shared */
.dcard-art .dv-rem{width:34px;height:88px;right:12%;top:20%}
/* ---------- devices: compact mobile layout ----------
Must come after the desktop refinement block above: media queries add
no specificity,so the unmediated rules there would otherwise win. */
@media (max-width:520px){
.dcard{flex-direction:row;align-items:center;border-radius:16px}
.dcard-art{width:126px;height:106px;flex:none;margin-bottom:0}
.dcard-art::before{width:92px;height:70px;filter:blur(13px)}
.dcard-body{padding:.95rem .95rem .95rem 0}
.dcard-body h3{font-size:.97rem}
.dcard-body p{font-size:.82rem}
.art-tv .dv-tv{width:88px;height:54px;top:24%}
.art-tv .tile{width:10px;height:10px}
.art-tv .dv-foot{width:30px;bottom:16%}
.art-tv .dv-foot::after{top:-9px;height:9px;width:8px}
.art-stick .dv-stick{width:54px;height:17px;left:6%;top:44%;border-radius:9px}
.art-stick .dv-stick i{width:8px;height:10px;right:-7px}
.dcard-art .dv-rem{width:20px;height:52px;right:8%;top:24%;border-radius:6px}
.dcard-art .dv-rem.slim{width:18px;height:56px}
.dcard-art .dv-rem.tall{height:58px}
.dcard-art .dv-rem .pad{width:12px;height:12px;top:6px}
.dcard-art .dv-rem .ring{width:11px;height:11px;top:6px}
.dcard-art .dv-rem .key{width:8px;height:2.5px}
.dcard-art .dv-rem .key:nth-of-type(2){top:25px}
.dcard-art .dv-rem .key:nth-of-type(3){top:32px}
.dcard-art .dv-rem .key:nth-of-type(4){top:39px}
.art-abox .dv-box{width:52px;height:36px;left:6%;top:34%}
.art-abox .led{width:12px;left:8px;bottom:7px}
.art-atv .dv-cube{width:44px;height:44px;left:10%;top:30%}
.art-atv .dv-cube::after{width:14px;height:14px}
.art-ios .dv-phone{width:26px;height:46px;left:8%;top:26%}
.art-ios .dv-tab{width:56px;height:42px;right:8%;top:30%}
.art-ios svg{width:13px;height:13px}
.art-ios .dv-tab svg{width:17px;height:17px}
.art-ios .bar{left:8px;right:8px;bottom:6px}
.art-droid .dv-phone{width:26px;height:48px;left:8%;top:24%;padding:5px 4px;gap:3px}
.art-droid .dv-tab{width:54px;height:42px;right:8%;top:28%;padding:6px;gap:3px}
.art-droid i{height:6px}
.art-laptop .dv-lap{width:80px;height:50px;top:22%}
.art-laptop .scr{padding:5px 5px 5px 18px;gap:2px}
.art-laptop .side{width:10px}
.art-laptop .row{height:4px}
.art-laptop .dv-base{width:100px;height:4px;bottom:16%}
.art-mag .dv-mag{width:58px;height:30px;left:6%;top:38%}
.art-mag .slot{width:17px;left:8px;bottom:7px}
.art-mag .dv-mag::after{width:4px;height:4px;right:8px;bottom:7px}
}
/* deep links from the players cards land clear of the sticky header */
h2[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
/* ===============================================================
DEVICES — the supplied artwork IS the section,shown whole and
unmodified: no crop,no overlay,no frame,nothing drawn on it.
The file already carries its own heading,cards and WhatsApp bar,so no HTML repeats them. Depth comes from an ambient glow behind
it; the section background matches the image's own edge colour
(var(--blue-950),sampled from the file) so it seats with no seam.
Transparent hotspots make the regions it depicts actually work,and the hairline index below carries the same words as real text
for search engines and for phones,where the artwork is too small
to read.
=============================================================== */
.dev-sec{background:transparent}
/* --- hairline index: no boxes,no repeated cards --- */
.dvx-index{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:1.7rem 2.2rem;list-style:none;margin:0;padding:0;
}
/* --- responsive --- */
@media (max-width:1100px){
.dvx-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2rem}
.dvx-shot{margin-bottom:2.8rem}
}
/* ===============================================================
WHY SMARTSG IPTV — built from the supplied design reference.
Two-column intro with a lit TV stage on the right,then four
numbered benefit cards. The stage uses the project's own
logo.webp; everything else around it is drawn in CSS.
=============================================================== */
.wf-sec{position:relative;isolation:isolate;overflow:hidden}
.wf-sec .eyebrow{color:var(--lime);border-color:var(--accent-edge-2);background:var(--accent-faint)}
.wf-sec .eyebrow .dot{background:var(--lime)}
.wf-amb{
position:absolute;inset:0 0 auto 0;height:620px;z-index:-1;pointer-events:none;
background:radial-gradient(38% 44% at 76% 20%,rgba(84,187,254,.10),transparent 70%);
}
/* ---------- top: intro + stage ---------- */
.wf-top{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
gap:2rem 3.5rem;align-items:center;margin-bottom:3.6rem;
}
.wf-intro h2{
margin:0 0 1.05rem;letter-spacing:-.035em;line-height:1.06;
font-size:clamp(1.95rem,4vw,3.15rem);
}
.wf-intro h2 .hl{color:var(--lime)}
.wf-sub{color:var(--text-2);font-size:1.02rem;line-height:1.65;margin:0;max-width:46ch}
/* ---------- the four cards ---------- */
.wf-grid{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);
list-style:none;margin:0;padding:0;
}
.wf-card{
position:relative;display:flex;flex-direction:column;
padding:1.55rem 1.4rem 1.3rem;
border:1px solid var(--line);border-radius:18px;
background:linear-gradient(180deg,var(--blue-900) 0%,var(--blue-950) 100%);
transition:transform .24s var(--ease),border-color .24s var(--ease),box-shadow .24s var(--ease);
}
/* the lit left edge from the reference */
.wf-card::before{
content:"";position:absolute;left:-1px;top:12%;bottom:12%;width:1px;border-radius:1px;
background:linear-gradient(180deg,transparent,rgba(84,187,254,.6),transparent);
transition:opacity .24s var(--ease);opacity:.85;
}
.wf-card:hover{
transform:translateY(-4px);border-color:var(--accent-edge-2);
box-shadow:0 20px 44px -30px rgba(0,0,0,.85),0 0 26px -14px rgba(84,187,254,.30);
}
.wf-card:hover::before{opacity:1}
.wf-ico{
display:grid;place-items:center;width:60px;height:60px;border-radius:50%;
border:1px solid var(--line-2);background:radial-gradient(80% 80% at 50% 30%,var(--blue-900),var(--blue-950));
margin-bottom:1.3rem;
}
.wf-ico svg{width:25px;height:25px;fill:none;stroke:var(--lime);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wf-card:nth-child(3) .wf-ico svg{fill:var(--lime);stroke:none}
.wf-ico svg.wf-wa{fill:var(--lime);stroke:none;width:26px;height:26px}
.wf-dash{display:block;width:22px;height:3px;border-radius:2px;background:var(--lime);margin-bottom:.9rem}
.wf-card h3{font-size:1.05rem;line-height:1.32;letter-spacing:-.012em;color:var(--text);margin-bottom:.6rem}
.wf-card p{color:var(--text-2);font-size:.9rem;line-height:1.62;margin:0}
.wf-card a{color:var(--lime);font-weight:600;text-decoration:underline;
text-decoration-color:rgba(84,187,254,.5);text-underline-offset:3px}
.wf-card a:hover{color:var(--lime-hover);text-decoration-color:var(--lime-hover)}
.wf-meter{display:flex;align-items:center;gap:.8rem;margin-top:auto;padding-top:1.5rem}
.wf-meter b{color:var(--lime);font-size:.92rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.wf-meter i{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),rgba(84,187,254,.55))}
.wf-meter em{
width:7px;height:7px;border-radius:50%;flex:none;background:var(--lime);
box-shadow:0 0 10px 2px rgba(84,187,254,.55);
}
/* ---------- responsive ---------- */
@media (max-width:1100px){
.wf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}@media (max-width:900px){
.wf-top{grid-template-columns:1fr;gap:2.4rem;margin-bottom:2.8rem}
.wf-sub{max-width:60ch}
}@media (max-width:640px){
.wf-intro h2 br{display:none}
.wf-top{margin-bottom:2.2rem}
.wf-grid{grid-template-columns:1fr}
.wf-card{padding:1.3rem 1.2rem 1.1rem;border-radius:16px}
.wf-ico{width:54px;height:54px;margin-bottom:1.1rem}
.wf-ico svg{width:23px;height:23px}
.wf-meter{padding-top:1.25rem}
}@media (prefers-reduced-motion:reduce){
.wf-card:hover{transform:none}
}
/* ===============================================================
IPTV PLAYERS — the supplied artwork is the section's main visual,shown whole and unmodified: no crop,no stretch,nothing drawn on
top. The file carries its own panels and player rows,so no HTML
repeats them; it has no heading or WhatsApp line,so those stay as
real markup. Section background matches the image's own edge
colour (var(--blue-950),sampled from the file) so it seats with no seam.
Transparent hotspots make the regions it depicts clickable,and the
hairline index below carries the same words as real text,which is
what stays legible on a phone.
=============================================================== */
.pix-sec{position:relative;isolation:isolate;overflow:hidden}
.pix-amb{
position:absolute;inset:0 0 auto 0;height:520px;z-index:-1;pointer-events:none;
background:radial-gradient(40% 42% at 28% 2%,rgba(84,187,254,.10),transparent 72%);
}
/* --- header: headline left,supporting copy right --- */
.pix-head{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:1rem 3.5rem;align-items:end;margin-bottom:2.4rem;
padding-bottom:1.6rem;border-bottom:1px solid var(--line);
}
.pix-head h2{margin:0;letter-spacing:-.035em;line-height:1.07;font-size:clamp(1.85rem,3.6vw,2.75rem)}
.pix-head h2 .hl{color:var(--lime)}
.pix-lede{color:var(--text-2);font-size:.975rem;line-height:1.65;margin:0;max-width:52ch}
/* --- hairline index: no boxes,no repeated cards --- */
.pix-index{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:1.7rem 2.2rem;list-style:none;margin:0;padding:0;
}
.pix-index li{display:flex;flex-direction:column;gap:.3rem;padding-top:1rem;border-top:1px solid var(--line)}
.pix-index b{font-size:1rem;font-weight:700;letter-spacing:-.012em;color:var(--text)}
.pix-index b a{display:inline-flex;align-items:baseline;gap:.34rem;color:inherit;text-decoration:none;
transition:color .22s var(--ease)}
.pix-index b a::after{content:"\2192";font-weight:400;color:var(--lime);opacity:0;transform:translateX(-5px);
transition:opacity .22s var(--ease),transform .22s var(--ease)}
.pix-index b a:hover,.pix-index b a:focus-visible{color:var(--lime)}
.pix-index b a:hover::after,.pix-index b a:focus-visible::after{opacity:1;transform:translateX(0)}
.pix-index span{color:var(--text-3);font-size:.875rem;line-height:1.5}
.pix-foot{margin-top:2.6rem;max-width:62ch}
/* --- responsive --- */
@media (max-width:1000px){
.pix-head{grid-template-columns:1fr;gap:.9rem;align-items:start;margin-bottom:2rem}
.pix-lede{max-width:60ch}
.pix-index{grid-template-columns:repeat(2,minmax(0,1fr))}
.pix-shot{margin-bottom:2.6rem}
}@media (max-width:640px){
.pix-head{padding-bottom:1.25rem;margin-bottom:1.7rem}
.pix-index{gap:1.25rem 1.4rem}
.pix-index li{padding-top:.85rem}
.pix-index b{font-size:.95rem}
.pix-index span{font-size:.845rem}
.pix-foot{margin-top:2rem}
}@media (max-width:420px){
.pix-index{grid-template-columns:1fr;gap:1rem}
}@media (prefers-reduced-motion:reduce){
.pix-index b a::after{transition:none}
}
/* ===============================================================
THE LIBRARY — the supplied artwork is the section,shown whole
and unmodified: no crop,no stretch,nothing drawn on top. The
file already carries its own badge,headline,description and six
category cards,so no HTML repeats them; the heading is kept for
document structure but visually hidden. Section background matches
the image's own edge colour (var(--blue-950),sampled from the file) so it
seats with no seam. The category row below restores the six
captions as real text,which is what stays legible on a phone.
=============================================================== */
.shx-sec{
position:relative;isolation:isolate;overflow:hidden;
background:transparent;
}
.shx-amb{
position:absolute;inset:0 0 auto 0;height:480px;z-index:-1;pointer-events:none;
background:radial-gradient(38% 44% at 72% 4%,rgba(84,187,254,.09),transparent 72%);
}
/* --- responsive --- */
@media (max-width:900px){
.shx-tags{margin-top:2.1rem}
}
/* ===============================================================
GETTING STARTED — the supplied artwork is the section,shown
whole and unmodified: no crop,no stretch,no recolour,nothing
drawn on top. The file carries its own badge,headline,description and four step cards,so no HTML repeats them. The h2
is kept for document structure but visually hidden. Section
background matches the file's own edge colour (sampled
from the file) so it seats with no seam. A hotspot keeps the
setup-guide link the artwork depicts clickable,and the numbered
list below carries the four steps as real text,which is what
stays legible on a phone.
=============================================================== */
.hix-sec{
position:relative;isolation:isolate;overflow:hidden;
background:transparent;
}
.hix-amb{
position:absolute;inset:0 0 auto 0;height:520px;z-index:-1;pointer-events:none;
background:radial-gradient(38% 44% at 74% 6%,rgba(84,187,254,.09),transparent 72%);
}
/* --- the four steps as real text --- */
.hix-steps{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:1.7rem 2.2rem;list-style:none;margin:2.8rem 0 0;padding:0;
counter-reset:hix;
}
.hix-steps li{
display:flex;flex-direction:column;gap:.34rem;
padding-top:1rem;border-top:1px solid var(--line);counter-increment:hix;
}
.hix-steps li::before{
content:"0" counter(hix);
color:var(--lime);font-size:.82rem;font-weight:700;letter-spacing:.06em;
font-variant-numeric:tabular-nums;margin-bottom:.1rem;
}
.hix-steps b{font-size:1rem;font-weight:700;letter-spacing:-.012em;color:var(--text)}
.hix-steps span{color:var(--text-3);font-size:.875rem;line-height:1.5}
.hix-foot{margin:2.4rem auto 0;text-align:center;max-width:64ch;color:var(--text-2);font-size:.95rem;line-height:1.6}
.hix-foot a{color:var(--text);text-decoration:underline;
text-decoration-color:rgba(84,187,254,.55);text-underline-offset:3px}
.hix-foot a:hover{color:var(--lime);text-decoration-color:var(--lime)}
/* --- responsive --- */
@media (max-width:1000px){
.hix-steps{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:2.3rem}
}@media (max-width:640px){
.hix-steps{gap:1.25rem 1.4rem;margin-top:1.9rem}
.hix-steps li{padding-top:.85rem}
.hix-steps b{font-size:.95rem}
.hix-steps span{font-size:.845rem}
.hix-foot{margin-top:1.9rem;font-size:.9rem}
}@media (max-width:420px){
.hix-steps{grid-template-columns:1fr;gap:1rem}
}
/* ===============================================================
DESIGN CONSISTENCY PASS
Appended so each fix wins the cascade cleanly and the whole pass
can be lifted out as one block. Every rule below closes a
measured inconsistency rather than a matter of taste.
=============================================================== */
/* 1. BUG. A .btn sitting inside prose,legal,FAQ,trust or table
copy inherited the body-link treatment: ".prose-block a" scores
0,1,1 and beats ".btn" at 0,1,0,so call-to-action buttons on 17
pages rendered with underlined labels at weight 600 instead of
700. Anchor-qualified so it outranks those link rules. */
a.btn,a.btn:hover,a.btn:focus-visible{text-decoration:none}
a.btn{font-weight:700}
.hero .btn-flame{font-weight:800} /* the hero CTA keeps its heavier weight */
/* 2. Section headings ran at five sizes across one page
(44 / 45.6 / 48 / 50.4px) with three different letter-spacings
and three line-heights. One scale for every section heading. */
.sec-head h2,.sec-head-center h2,.pix-head h2,.wf-intro h2,.cta-panel h2{
font-size:clamp(1.75rem,1.2rem + 2.3vw,2.85rem);
letter-spacing:-.035em;
line-height:1.08;
}
/* 3. Eyebrow badges were grey in markup but lime inside the
supplied artworks,and both appear on the homepage together.
Lime throughout so the badge reads the same everywhere. */
.eyebrow,.hero .eyebrow{
color:var(--lime);
background:var(--accent-faint);
border:1px solid var(--accent-edge-2);
}
.eyebrow .dot,.hero .eyebrow .dot{background:var(--lime)}
/* 5. Panel radii: 34px here against 28px on every comparable panel. */
.cta-panel{border-radius:clamp(var(--r-lg),4vw,28px)}
/* 6. Same role,two scales: the legal pages ran their h1 and h2
smaller than the guide pages they sit beside. */
.legal-head h1{font-size:clamp(1.9rem,1.3rem + 2.7vw,3.1rem)}
.legal-body h2{font-size:clamp(1.35rem,1.1rem + 1.1vw,1.85rem)}
/* 7. Invisible links. Inline links in .sec-sub and .pix-lede rendered
in exactly the body colour with no underline,so "Full plan details"
and "guide to the best IPTV players" read as plain text. Give them
the same inline-link treatment the prose and legal pages already use. */
.sec-sub a:not(.btn),.pix-lede a:not(.btn){
color:var(--text);
text-decoration:underline;
text-decoration-color:rgba(84,187,254,.55);
text-decoration-thickness:1px;
text-underline-offset:3px;
}
.sec-sub a:not(.btn):hover,.pix-lede a:not(.btn):hover{
color:var(--lime);text-decoration-color:var(--lime);
}
/* 8. The device and player index titles are links whose only affordance
was an arrow revealed on hover,which never appears on a touch screen.
Show the arrow at rest and let hover brighten and advance it. */
.dvx-index b a::after,.pix-index b a::after{opacity:.55;transform:none}
.dvx-index b a:hover::after,.dvx-index b a:focus-visible::after,.pix-index b a:hover::after,.pix-index b a:focus-visible::after{
opacity:1;transform:translateX(3px);
}
/* The supplied devices artwork paints a "Need help? We're on WhatsApp"
bar across its bottom edge. Show only the part of the file above it,so the bar is outside the visible box. object-fit keeps the aspect
ratio intact,so nothing is stretched,and the file on disk is not
modified. The eight device cards end at 89.6% of the image height;
the cut sits at 90.5%. */
.dvx-shot img{aspect-ratio:1536/927;object-fit:cover;object-position:top center}
/* ===============================================================
ORDER PAGE — confirms which plan arrived in the URL, then hands
the customer to WhatsApp. Reuses .plan and .btn so the cards look
exactly like the ones on the pricing section.
=============================================================== */
.ord-picked{
display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
margin:0 0 2rem;padding:.95rem 1.15rem;border-radius:14px;
background:var(--accent-faint);border:1px solid var(--accent-edge-2);
color:var(--text-2);font-size:.97rem;line-height:1.5;
}
.ord-picked b{color:var(--text);font-weight:700}
.ord-check{
display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;
background:var(--lime);
}
.ord-check svg{width:17px;height:17px;fill:none;stroke:var(--on-lime);stroke-width:2.6;
stroke-linecap:round;stroke-linejoin:round}
.ord-change{margin-left:auto;color:var(--lime);font-weight:600;font-size:.9rem;
text-decoration:underline;text-decoration-color:rgba(84,187,254,.5);text-underline-offset:3px}
.ord-change:hover{color:var(--lime-hover);text-decoration-color:var(--lime-hover)}
.ord-steps{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem 2rem;
list-style:none;margin:0 0 2.4rem;padding:0;counter-reset:ord;
}
.ord-steps li{display:flex;flex-direction:column;gap:.3rem;padding-top:.95rem;
border-top:1px solid var(--line);counter-increment:ord}
.ord-steps li::before{content:"0" counter(ord);color:var(--lime);font-size:.8rem;font-weight:700;
letter-spacing:.06em;font-variant-numeric:tabular-nums;margin-bottom:.15rem}
.ord-steps b{color:var(--text);font-size:.98rem;font-weight:700;letter-spacing:-.012em}
.ord-steps span{color:var(--text-3);font-size:.875rem;line-height:1.5}
.ord-grid{margin-bottom:2.6rem}
/* the plan that came in on the URL */
.ord-grid .plan.is-picked{
border-color:var(--accent-edge-2);
box-shadow:0 0 0 1px rgba(84,187,254,.30),0 0 34px -16px rgba(84,187,254,.55);
}@media (max-width:900px){
.ord-steps{grid-template-columns:1fr;gap:1.1rem;margin-bottom:2rem}
.ord-picked{margin-bottom:1.6rem}
.ord-change{margin-left:0}
}
/* ================================================================
Artwork hotspot hit areas
The hotspots over the section artwork are positioned in percentages,
so they shrink with the image. On a phone several fell to a handful of
pixels tall and became impossible to tap. This gives each one a
transparent, centred minimum hit area. Nothing visible moves or
resizes: the hover highlight still traces the real target, and
max() leaves any hotspot that is already large enough untouched.
The stacked player hotspots sit about 1% apart vertically, so only
the isolated first one may grow on that axis.
================================================================ */
.dvx-hot::after,.pix-hot::after,.hix-hot::after{
content:"";position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%);
width:max(100%,44px);height:max(100%,44px);
}
/* ================================================================
Blog cover image
One supplied image used as the cover across the blog. On an article it
sits between the head and the prose at full content width; on a blog
index card it is a full-bleed thumbnail across the top. Both keep the
3:2 source ratio, and both carry width/height so the space is reserved
before the image arrives and nothing shifts.
================================================================ */
.doc-cover{margin:0 0 clamp(2rem,4vw,2.75rem)}
.doc-cover img{
display:block;width:100%;height:auto;
border:1px solid var(--line);border-radius:var(--r);
}
/* full-bleed across the top of a card, cancelling the card's own padding */
.rc-img{
display:block;width:calc(100% + 2.5rem);
margin:-1.1rem -1.25rem .85rem;
aspect-ratio:3/2;object-fit:cover;
border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
}
/* ================================================================
SmartSG IPTV — conversion layer
Everything below is new to the redesign: the brand lockup, the
hero price teaser, the rebuilt pricing block, the honest-claims
panel and the mobile action bar. It sits last so it wins over the
earlier component rules without any of them needing to be edited.
================================================================ */
/* ---------- brand lockup ----------
The mark is inline SVG and the name is real text, so it renders in
the page font, stays crisp at any density, recolours with the theme
and costs no extra request. ---------- */
.brand{gap:.6rem;align-items:center}
/* ---------- hero price teaser ----------
The old hero sent people to WhatsApp before they had seen a price.
The primary action is now the plans, and this line carries the number
so the offer is legible without scrolling. ---------- */
.hero-price{
display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .7rem;
margin-top:1.15rem;color:var(--text-2);font-size:.94rem;font-weight:600;
}
.hero-price b{color:var(--text);font-weight:800}
.hero-price a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.hero-price a:hover{color:var(--accent-hover)}
.hp-sep{width:4px;height:4px;border-radius:50%;background:var(--line-3);flex:none}
/* ---------- a solid secondary button ----------
Ghost buttons read as text on a dark ground. Three of the four plan
cards need a button that is unmistakably a button but still yields to
the featured plan, so they get a filled neutral rather than an outline. */
.btn-solid{background:var(--surface-2);color:var(--text);border:1px solid var(--line-3);font-weight:700}
.btn-solid:hover{background:var(--blue-050);border-color:var(--accent);color:var(--text);transform:translateY(-2px)}
/* ================================================================
PRICING
================================================================ */
.pr-sec{overflow:hidden}
.pr-amb{
position:absolute;inset:0;pointer-events:none;
background:radial-gradient(58% 42% at 50% 0%,rgba(84,187,254,.09),transparent 72%);
}
.pr-sec .wrap{position:relative}
.sec-head-center{margin-inline:auto;text-align:center;max-width:720px}
.sec-head-center .eyebrow{margin-inline:auto}
/* what every plan includes — stated once, above the grid, so the four
cards can be about price alone instead of repeating five identical
bullet lists */
.pr-incl{
display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;
max-width:960px;margin:0 auto .6rem;
}
.pr-grid .plan{padding-top:clamp(1.7rem,2.8vw,2.1rem)}
.pr-grid .plan-note{flex:1;margin-bottom:1.4rem}
.plan-rate{
display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
margin-top:.6rem;color:var(--accent);font-weight:800;
font-size:.94rem;letter-spacing:-.01em;
}
.plan-save{
font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:var(--accent);background:var(--accent-tint);
border:1px solid var(--accent-edge-2);border-radius:100px;padding:.22rem .55rem;
}
.plan-alt{
display:block;text-align:center;margin-top:.85rem;
font-size:.82rem;font-weight:600;color:var(--text-3);
text-decoration:underline;text-underline-offset:3px;
}
.plan-alt:hover{color:var(--accent)}
.plan-featured{background:linear-gradient(180deg,rgba(84,187,254,.07),transparent 55%),var(--surface)}
.pr-basis{
margin:1.6rem auto 0;max-width:72ch;text-align:center;
color:var(--text-3);font-size:.82rem;
}
/* the two questions that stop an order — whether it can be tried first,
and what happens with a second television — answered beside the prices */
.pr-foot{
display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);
margin-top:clamp(2.2rem,4vw,3rem);
}
.pr-foot-card{
display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;
background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-lg);padding:clamp(1.4rem,2.4vw,1.85rem);
}
.pr-foot-card h3{font-size:1.1rem}
.pr-foot-card p{flex:1;color:var(--text-2);font-size:.92rem}
.pr-foot-card .btn{margin-top:.3rem}
.pr-sec .price-foot{margin-inline:auto;text-align:center;max-width:66ch}@media (max-width:900px){
.pr-foot{grid-template-columns:1fr}
}@media (max-width:620px){
.pr-foot-card .btn{width:100%;justify-content:center}
}
/* ================================================================
THE CLAIMS WE DO NOT MAKE
The site's editorial position, given a place on the home page
instead of living only on /about.html.
================================================================ */
.wf-honest{
margin-top:clamp(2.2rem,4vw,3rem);
background:linear-gradient(180deg,var(--surface),var(--bg-alt));
border:1px solid var(--line-2);border-radius:var(--r-xl);
padding:clamp(1.5rem,3.2vw,2.4rem);
}
.wf-honest-head{display:flex;gap:1rem;align-items:flex-start}
.wf-honest-ico{
flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
background:var(--accent-tint);border:1px solid var(--accent-edge);
}
.wf-honest-ico svg{
width:22px;height:22px;fill:none;stroke:var(--accent);
stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.wf-honest-head h3{font-size:clamp(1.15rem,1rem + .6vw,1.45rem);margin-bottom:.5rem}
.wf-honest-head p{color:var(--text-2);font-size:.95rem;max-width:72ch}
.wf-honest-list{
display:grid;grid-template-columns:repeat(2,1fr);gap:.65rem 1.6rem;
margin:1.5rem 0 1.3rem;
}
.wf-honest-list li{position:relative;padding-left:1.6rem;color:var(--text-2);font-size:.91rem}
.wf-honest-list li::before{
content:"";position:absolute;left:.15rem;top:.62em;width:12px;height:2px;
background:var(--accent);border-radius:2px;
}
.wf-honest-foot{
color:var(--text-3);font-size:.89rem;
padding-top:1.1rem;border-top:1px solid var(--line);
}
.wf-honest-foot a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}@media (max-width:720px){
.wf-honest-list{grid-template-columns:1fr}
.wf-honest-ico{width:38px;height:38px;border-radius:11px}
.wf-honest-ico svg{width:19px;height:19px}
}
/* ================================================================
MOBILE ACTION BAR
Below 900px the two actions that matter stay on screen at all
times, so pricing is never more than one tap away no matter how
far down a guide the reader has gone. It replaces the floating
WhatsApp button at these widths rather than stacking with it.
================================================================ */
.mbar{display:none}@media (max-width:900px){
.mbar{
display:grid;grid-template-columns:1fr 1fr;gap:.55rem;
position:fixed;left:0;right:0;bottom:0;z-index:90;
padding:.55rem .7rem;padding-bottom:calc(.55rem + env(safe-area-inset-bottom,0px));
background:rgba(10,12,17,.93);border-top:1px solid var(--line);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.mbar-btn{
display:flex;align-items:center;justify-content:center;gap:.55rem;
min-height:52px;padding:.5rem .7rem;border-radius:14px;
border:1px solid transparent;font-weight:800;line-height:1.15;
}
.mbar-plans{background:var(--accent);color:var(--on-accent)}
.mbar-wa{background:var(--surface-2);color:var(--text);border-color:var(--line-3)}
.mbar-ico{display:inline-flex;flex:none}
.mbar-ico svg{width:20px;height:20px}
.mbar-plans .mbar-ico svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mbar-wa .mbar-ico svg{fill:var(--wa);stroke:none}
.mbar-txt{display:flex;flex-direction:column;min-width:0}
.mbar-txt b{font-size:.9rem;white-space:nowrap}
.mbar-txt i{font-style:normal;font-weight:600;font-size:.71rem;opacity:.82;white-space:nowrap}
.wa-fab{display:none}
body{padding-bottom:78px}
}@media (max-width:345px){
.mbar-txt i{display:none}
.mbar-btn{gap:.4rem;padding-inline:.45rem}
.mbar-txt b{font-size:.84rem}
}
/* ================================================================
BLOG PRESENTATION
Structure, links and schema are untouched; this is presentation
only — a clearer card and a stronger read affordance.
================================================================ */
.related-card{transition:transform .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease)}
.related-card .rc-title{display:block;font-size:1.02rem;line-height:1.3;margin-bottom:.4rem}
.related-card .rc-desc{display:block;line-height:1.55}
.related-card::after{
content:"Read the guide";
display:block;margin-top:.85rem;
font-size:.78rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
color:var(--accent);opacity:.75;transition:opacity .22s var(--ease);
text-decoration:none;
}
.related-card:hover::after{opacity:1}@media (prefers-reduced-motion:reduce){
.related-card,.plan,.btn-solid{transition:none}
.btn-solid:hover,.plan:hover{transform:none}
}
/* hero: keep the two actions on one row in the copy column, and keep the
price teaser on a single line beneath them */
.hero .hero-cta{margin-top:1.95rem}
.hero .hero-cta .btn{flex:1 1 auto;justify-content:center;white-space:nowrap}
.hero-price{font-size:.895rem;margin-top:1.05rem;flex-wrap:nowrap}
.hero-trust .ht-txt b{font-size:.885rem}@media (max-width:900px){
.hero .hero-cta .btn{flex:1 1 100%}
.hero-price{flex-wrap:wrap}
}
/* pricing: the rate line reserves two rows on every card so the note,
the button and the order link stay on a shared baseline whether or
not that plan carries a savings badge */
.plan-rate{display:block;min-height:3.15em;line-height:1.35;margin-top:.55rem}
.plan-save{display:inline-block;margin-top:.35rem;vertical-align:middle}
/* ================================================================
TOUCH TARGETS
Everything a thumb has to hit gets real vertical room at phone
widths. Breadcrumbs, the price teaser link and the order links
were all around 22px tall.
================================================================ */
@media (max-width:900px){
.crumbs{gap:.4rem .5rem}
.crumbs a{display:inline-block;padding-block:.5rem}
.hero-price a{display:inline-block;padding-block:.45rem}
.plan-alt{padding-block:.55rem;margin-top:.45rem}
.ord-change{display:inline-block;padding-block:.5rem}
.dvx-index b a,.pix-index b a{display:inline-block;padding-block:.3rem}
/* The artwork hotspots scale with their figure and are only a few
pixels across on a phone, which makes them impossible to hit on
purpose and easy to hit by accident. Each figure already has a
text index beneath it carrying exactly the same links, so the
overlays stand down at these widths. */
.dvx-hot,.pix-hot,.hix-hot{display:none}
}
/* mobile refinements found in the render review */
@media (max-width:900px){
/* the teaser wraps here, which stranded a separator at the end of the
first line — the wrap itself is the separator */
.hero-price .hp-sep:last-of-type{display:none}
/* cards are stacked at this width, so the rate line no longer needs to
reserve a second row for a badge that is not there */
.plan-rate{min-height:0}
}
/* ================================================================
MOBILE MENU + BURGER
The panel was translucent enough for the hero headline to read
through the menu items, and the burger's close state relied on a
fixed 5px nudge that did not match the real gap between its bars,
so the X came out as a chevron. Both are pinned down here.
================================================================ */
@media (max-width:900px){
.nav{
background:var(--bg);
box-shadow:0 24px 48px -24px rgba(0,0,0,.85);
/* stop short of the action bar rather than padding past it — an
empty padded strip would swallow the tap that should close the
menu, so the panel is capped and scrolls instead */
max-height:calc(100dvh - var(--header-h) - 78px);
}
}
.burger{position:relative}
.burger span{
position:absolute;left:50%;top:50%;
width:18px;height:2px;margin:0;
transform:translate(-50%,calc(-50% - 6px));
}
.burger span:nth-child(2){transform:translate(-50%,-50%)}
.burger span:nth-child(3){transform:translate(-50%,calc(-50% + 6px))}
.burger[aria-expanded="true"] span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg)}
/* ================================================================
BLOG INDEX CARDS
All 61 entries share one cover image, so a full-bleed 3:2 hero on
every card read as a duplicated photo rather than a design. As a
small square thumbnail it becomes a repeating motif instead, the
list gets denser, and 61 large decodes drop to 61 tiny ones.
Guide-page related grids have no image and are untouched.
================================================================ */
.related-card:has(.rc-img){
display:grid;
grid-template-columns:88px minmax(0,1fr);
grid-template-areas:"img title" "img desc" "img more";
align-content:start;align-items:start;
gap:.1rem 1.05rem;
}
.related-card:has(.rc-img) .rc-img{
grid-area:img;align-self:start;
width:88px;height:88px;margin:0;
aspect-ratio:1;object-fit:cover;
border-radius:12px;border:1px solid var(--line-2);
}
.related-card:has(.rc-img) .rc-title{grid-area:title;margin-bottom:.3rem}
.related-card:has(.rc-img) .rc-desc{grid-area:desc}
.related-card:has(.rc-img)::after{grid-area:more;margin-top:.6rem}@media (max-width:420px){
.related-card:has(.rc-img){grid-template-columns:64px minmax(0,1fr);gap:.1rem .85rem}
.related-card:has(.rc-img) .rc-img{width:64px;height:64px;border-radius:10px}
}
/* ================================================================================
DESIGN SYSTEM — normalisation layer
================================================================================
The stylesheet above grew in layers, and an audit of it found the marks of
that: 186 selectors declared more than once, 106 with properties fought over
by a later rule, 35 border-radius values, 69 font sizes, 25 transitions across
five different durations. On screen that showed up as five near-identical
"small text" sizes, four "meta" sizes, three section-heading sizes, five card
radii, and a hover that behaved differently on every component.
This layer does not restyle the site. It puts the existing components onto one
scale — type, space, radius, motion, elevation — and onto one container grid,
so the whole site reads as one piece of design work. It sits last so it settles
those questions without any earlier rule needing to be unpicked.
================================================================================ */
:root{
/* ---- type scale: a fourth apart at the top, tightening through the body
sizes where the eye needs finer steps. Every size below replaces a cluster
of near-identical values that were within a pixel of each other. ---- */
--fs-2xs:.75rem; /* 12px — eyebrows, badges, uppercase labels */
--fs-xs:.8125rem; /* 13px — captions, notes, breadcrumbs, bylines */
--fs-sm:.9375rem; /* 15px — card copy, lists, footer, secondary body */
--fs-base:1.0625rem; /* 17px — body */
--fs-lg:1.1875rem; /* 19px — ledes, section subtitles, h3 */
--fs-h3:1.1875rem;
--fs-h2-prose:clamp(1.4rem,1.15rem + 1.1vw,1.8rem);
--fs-h2:clamp(1.7rem,1.25rem + 2vw,2.55rem);
--fs-h1:clamp(1.95rem,1.35rem + 2.6vw,3.05rem);
--fs-display:clamp(2.2rem,1.2rem + 4.2vw,4.2rem);
/* ---- line heights, paired to role rather than to size ---- */
--lh-tight:1.12; /* display and headings */
--lh-snug:1.35; /* short card headings, buttons */
--lh-body:1.65; /* interface copy */
--lh-prose:1.75; /* long-form reading */
/* ---- reading measure ---- */
--measure:68ch;
/* ---- space scale, 4px based ---- */
--sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
--sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem;
/* ---- radii: two, by role. Primary surfaces are the things a decision is
made on — a plan, a panel. Secondary surfaces are everything else. ---- */
--r-xs:10px;
--r:16px; /* secondary surfaces */
--r-lg:20px; /* primary surfaces */
--r-xl:24px; /* full-bleed panels */
--r-sm:12px;
--r-pill:999px;
/* ---- motion: two durations and one curve, everywhere ---- */
--dur-1:140ms;
--dur-2:220ms;
--ease:cubic-bezier(.2,.7,.3,1);
--lift-card:-3px;
--lift-btn:-1px;
/* ---- elevation ---- */
--sh-1:0 1px 2px rgba(0,0,0,.28);
--sh-2:0 14px 30px -18px rgba(0,0,0,.8),0 2px 6px rgba(0,0,0,.3);
--sh-accent:0 8px 22px -10px rgba(84,187,254,.45);
/* ---- content columns, all sharing the site's left edge ---- */
--col-doc:54rem; /* guides, blog, order */
--col-narrow:48rem; /* legal, FAQ */
}
/* ================================================================================
1. ONE GRID
The header and footer sat on a 1180px measure while document pages sat on a
centred 880px one and the legal pages on a centred 820px one, so on 76 of the
81 pages the logo started roughly 150px to the left of the first word of the
page. Content columns now begin on the same line as the masthead and keep a
comfortable reading width.
================================================================================ */
.wrap-doc,
.wrap-narrow{
max-width:var(--max);
display:grid;
justify-content:start;
}
.wrap-doc{grid-template-columns:minmax(0,var(--col-doc))}
.wrap-narrow{grid-template-columns:minmax(0,var(--col-narrow))}@media (max-width:1180px){
.wrap-doc,.wrap-narrow{grid-template-columns:minmax(0,1fr)}
}
/* ================================================================================
2. TYPOGRAPHY
================================================================================ */
body{font-size:var(--fs-base);line-height:var(--lh-body)}
h1,h2,h3,h4{line-height:var(--lh-tight);letter-spacing:-.025em;text-wrap:balance}
.hero-copy h1{font-size:var(--fs-display);letter-spacing:-.038em;line-height:1.04}
.doc-head h1,.legal-head h1{font-size:var(--fs-h1);letter-spacing:-.032em}
.sec-head h2,.cta-panel h2,.final-cta h2{font-size:var(--fs-h2);letter-spacing:-.03em}
.prose-block h2,.legal-body h2{font-size:var(--fs-h2-prose);letter-spacing:-.025em}
.prose-block h3,.legal-body h3,.fcard-body h3,.wf-card h3,.pr-foot-card h3,
.wf-honest-head h3,.step h3{font-size:var(--fs-h3);line-height:var(--lh-snug);letter-spacing:-.018em}
/* ledes and section subtitles share one size */
.lede,.sec-sub,.pix-lede,.wf-sub{font-size:var(--fs-lg);line-height:1.55}
/* the small sizes: five values within a pixel of each other, now one */
.tick li,.flist li,.rc-desc,.footer-col a,.price-foot,.pr-incl li,.hero-price,
.pr-foot-card p,.wf-card p,.fcard-body p,.sec-foot,.hix-foot,.faq-a,
.dvx-index span,.pix-index span,.hix-steps span,.ord-steps span,
.footer-brand p,.doc-cta-panel p{font-size:var(--fs-sm)}
/* the meta sizes: four values, now one */
.crumbs,.byline,.plan-note,.plan-alt,.pr-basis,.pr-incl-note,.footer-bottom,
.ht-txt span,.table-wrap caption,.hint,.ui-label{font-size:var(--fs-xs)}
/* uppercase labels carry tracking; without it small caps read as noise */
.eyebrow,.footer-col h2,.plan-flag,.plan-save,.related-card::after{
font-size:var(--fs-2xs);letter-spacing:.11em;text-transform:uppercase;
}
.footer-col h2{font-weight:600;color:var(--text-3)}
/* ================================================================================
3. PROSE
Long-form pages carry most of the site's words and had the least design
attention: the measure ran to 78 characters and the leading was set for
interface copy rather than reading.
================================================================================ */
.prose-block p,.prose-block li,.legal-body p,.legal-body li{
max-width:var(--measure);
line-height:var(--lh-prose);
}
.prose-block p{margin-bottom:var(--sp-4)}
.prose-block h2,.legal-body h2{margin-bottom:var(--sp-3)}
.prose-block h3,.legal-body h3{margin:var(--sp-6) 0 var(--sp-2)}
.prose-block h3:first-child{margin-top:0}
/* a hairline where a real section starts, so a long guide can be scanned */
.prose > .prose-block + .prose-block,
.legal-body > section + section{
border-top:1px solid var(--line);
padding-top:clamp(1.75rem,3.5vw,2.5rem);
}
.doc-head{padding-bottom:clamp(1.75rem,3.5vw,2.4rem)}
.doc-head .lede{max-width:var(--measure)}
/* ================================================================================
4. SURFACES
Cards were carrying five different radii and three different resting
treatments. Two radii now, by role, and one resting recipe.
================================================================================ */
.plan,.cta-panel,.wf-honest,.pr-foot-card,.doc-cta-panel,.fcard{
border-radius:var(--r-lg);
}
.related-card,.faq-item,.table-wrap,.player,.float-card,.wf-card,
.pr-incl li,.ord-steps li{
border-radius:var(--r);
}
.hero .stage,.dvx-shot,.pix-shot,.shx-shot,.hix-shot{border-radius:var(--r-xl)}
.plan,.related-card,.faq-item,.wf-card,.pr-foot-card,.fcard,.doc-cta-panel{
box-shadow:var(--sh-1);
}
/* ================================================================================
5. MOTION
One curve, two durations, one lift per role. Interactive surfaces previously
used 25 different transition declarations, so no two hovers felt alike.
================================================================================ */
.btn,.plan,.related-card,.fcard,.wf-card,.pr-foot-card,.player,.nav>a,
.footer-col a,.mbar-btn,.plan-alt,.fbtn,.wa-fab,.faq-item summary,.dvx-index b a,.pix-index b a{
transition:
transform var(--dur-2) var(--ease),
background-color var(--dur-2) var(--ease),
border-color var(--dur-2) var(--ease),
box-shadow var(--dur-2) var(--ease),
color var(--dur-1) var(--ease);
}
.plan:hover,.related-card:hover,.fcard:hover,.wf-card:hover,.pr-foot-card:hover{
transform:translateY(var(--lift-card));
box-shadow:var(--sh-2);
}
.btn:hover,.wa-fab:hover{transform:translateY(var(--lift-btn))}
.btn-primary:hover{box-shadow:var(--sh-accent)}
.btn:active,.plan:active{transform:translateY(0)}
/* one focus ring for the whole site */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent-edge);color:#fff}@media (prefers-reduced-motion:reduce){
.btn,.plan,.related-card,.fcard,.wf-card,.pr-foot-card,.player,.nav>a,
.footer-col a,.mbar-btn,.plan-alt,.fbtn,.wa-fab,.faq-item summary{transition:none}
.plan:hover,.related-card:hover,.fcard:hover,.wf-card:hover,
.pr-foot-card:hover,.btn:hover,.wa-fab:hover{transform:none}
}
/* ================================================================================
6. LINKS
164 inline links were white with an amber underline; three were not. The
odd ones out are brought into line.
================================================================================ */
.hero-price a,.wf-honest-foot a,.pr-basis a{
color:var(--text);
text-decoration:underline;
text-decoration-color:rgba(84,187,254,.55);
text-decoration-thickness:1px;
text-underline-offset:3px;
font-weight:600;
}
.hero-price a:hover,.wf-honest-foot a:hover,.pr-basis a:hover{
color:var(--accent);text-decoration-color:var(--accent);
}
/* ================================================================================
7. RHYTHM
Section heads and the space beneath them were set per-section. One value.
================================================================================ */
.sec-head{margin-bottom:clamp(2.25rem,4.5vw,3.25rem)}
.sec-head h2{margin-bottom:var(--sp-3)}
.sec-head .eyebrow{margin-bottom:var(--sp-4)}
.sec-sub{max-width:60ch}
.sec-head-center .sec-sub{margin-inline:auto}
/* Legal pages are a flat run of h2/p/ul with no section wrappers, so the
rule that separates prose sections has to hang off the heading itself. */
.legal-body h2:not(:first-child){
margin-top:clamp(2rem,4vw,2.9rem);
padding-top:clamp(1.75rem,3.5vw,2.5rem);
border-top:1px solid var(--line);
}
/* ================================================================================
8. COMPONENT CORRECTIONS FOUND IN THE RENDER PASS
================================================================================ */
/* Hero trust row: three equal columns of ~140px, so both lines of each item
have to sit on the smaller step or the label wraps onto a third line. */
.ht-txt b{font-size:var(--fs-xs);line-height:1.3}
.ht-txt span{line-height:1.3}
.hero-trust{gap:1rem .75rem}
/* The closing block of every guide and article carries the page's only offer,
but it was marked up as an ordinary prose section and so looked like one.
Giving it a surface is the difference between a paragraph and an invitation. */
.prose-block:has(.doc-cta){
background:linear-gradient(180deg,var(--surface),var(--bg-alt));
border:1px solid var(--line-2);
border-radius:var(--r-lg);
padding:clamp(1.5rem,3vw,2.25rem);
box-shadow:var(--sh-1);
}
.prose > .prose-block:has(.doc-cta){border-top:0}
.prose-block:has(.doc-cta) h2{margin-bottom:var(--sp-3)}
.prose-block:has(.doc-cta) > p{max-width:62ch}
.prose-block:has(.doc-cta) .tick{margin:var(--sp-4) 0 0}
.prose-block:has(.doc-cta) .tick li{font-size:var(--fs-sm)}
/* ---- the last stragglers the render pass turned up -----------------------
Each of these was within a pixel or two of a step already on the scale, so
they read as sloppiness rather than as a decision. (The .dvx-sr / .pix-sr /
.shx-sr / .hix-sr headings are screen-reader only and are left alone.) */
.wf-honest-foot,.ord-picked{font-size:var(--fs-xs)}
.plan-rate,.wf-honest-head p{font-size:var(--fs-sm)}
.cta-panel p,.hero-copy .lede{font-size:var(--fs-lg)}
.pix-head h2,.wf-intro h2{font-size:var(--fs-h2);letter-spacing:-.03em;line-height:var(--lh-tight)}
.doc-cta-panel h2{font-size:var(--fs-h2-prose)}
/* The plan name is the card's label, not its headline — the price is the
headline. Setting it as a tracked label lets the number carry the card. */
.plan-name{
font-size:var(--fs-2xs);
letter-spacing:.12em;
text-transform:uppercase;
font-weight:700;
color:var(--text-3);
margin-bottom:var(--sp-2);
}
/* ================================================================================
9. THE FOUR ARTWORK SECTIONS, REBUILT
Devices, what-is-inside, how-it-works and players were each carried by a large
raster poster. Those posters still showed the old brand name in the old lime
palette and baked their headings and card copy into pixels. The copy underneath
them was already real HTML, so these rules promote it to being the design.
================================================================================ */
/* ---- shared card recipe for the three grids ---- */
.dvx-card,.pix-index li,.hix-steps li{
position:relative;
display:flex;flex-direction:column;
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r);
padding:clamp(1.1rem,2vw,1.4rem);
box-shadow:var(--sh-1);
transition:transform var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),
background-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.dvx-card:hover,.pix-index li:hover,.hix-steps li:hover{
transform:translateY(var(--lift-card));
border-color:var(--line-3);
background:var(--surface-2);
box-shadow:var(--sh-2);
}
.dvx-card b,.pix-index b,.hix-steps b{
display:block;color:var(--text);font-size:1rem;font-weight:700;
letter-spacing:-.015em;line-height:1.3;margin-bottom:.35rem;
}
.dvx-card > span,.pix-index span,.hix-steps li > span{
color:var(--text-2);font-size:var(--fs-sm);line-height:1.5;
}
.dvx-card b a,.pix-index b a{color:var(--text);text-decoration:none}
.dvx-card b a:hover,.pix-index b a:hover{color:var(--accent)}
.dvx-card > span a{
color:var(--text);text-decoration:underline;
text-decoration-color:rgba(84,187,254,.55);text-underline-offset:3px;
}
.dvx-card > span a:hover{color:var(--accent);text-decoration-color:var(--accent)}
/* ---- devices ---- */
.dvx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.dvx-ico{
display:grid;place-items:center;width:40px;height:40px;flex:none;
margin-bottom:.9rem;border-radius:11px;
background:var(--accent-tint);border:1px solid var(--accent-edge);
}
.dvx-ico svg{
width:20px;height:20px;fill:none;stroke:var(--accent);
stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
/* ---- players ---- */
.pix-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:0}
.pix-index li::before{display:none}
.pix-index b{padding-right:1.6rem}
.pix-index li::after{
content:"";position:absolute;top:calc(clamp(1.1rem,2vw,1.4rem) + .25em);
right:clamp(1.1rem,2vw,1.4rem);width:8px;height:8px;
border-top:2px solid var(--accent);border-right:2px solid var(--accent);
transform:rotate(45deg);opacity:.65;
transition:transform var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease);
}
.pix-index li:hover::after{opacity:1;transform:rotate(45deg) translate(2px,-2px)}
/* ---- how it works: four steps on a rail ---- */
.hix-steps{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);
counter-reset:none;margin:0;
}
.hix-steps li{padding-top:clamp(1.4rem,2.4vw,1.75rem)}
.hix-steps li::before,.hix-steps li::marker{content:none}
.hix-num{
display:inline-grid;place-items:center;width:38px;height:38px;margin-bottom:.85rem;
border-radius:50%;background:var(--accent);color:var(--on-accent);
font-size:.82rem;font-weight:800;letter-spacing:.02em;
font-variant-numeric:tabular-nums;
}
.hix-steps li:not(:first-child)::after{
content:"";position:absolute;left:calc(-1 * var(--gap) - 1px);top:calc(clamp(1.4rem,2.4vw,1.75rem) + 19px);
width:var(--gap);height:1px;background:linear-gradient(90deg,transparent,var(--line-3));
}
.hix-foot{margin-top:clamp(1.6rem,3vw,2.2rem);color:var(--text-2);max-width:70ch}
.hix-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.3rem}
/* ---- responsive ---- */
@media (max-width:1080px){
.dvx-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.pix-index{grid-template-columns:repeat(2,minmax(0,1fr))}
.hix-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
.hix-steps li:not(:first-child)::after{display:none}
.shx-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}@media (max-width:760px){
.dvx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}@media (max-width:520px){
.dvx-grid,.pix-index,.hix-steps{grid-template-columns:minmax(0,1fr)}
.hix-cta .btn{width:100%;justify-content:center}
}@media (prefers-reduced-motion:reduce){
.dvx-card,.pix-index li,.hix-steps li,.shx-card,.shx-card img{transition:none}
.dvx-card:hover,.pix-index li:hover,.hix-steps li:hover,.shx-card:hover{transform:none}
}
/* The player and device titles carried an arrow glyph from the old list layout.
Now that each item is a card with its own chevron, that was two affordances
pointing at the same link. */
.pix-index b a::after,.dvx-index b a::after,.dvx-card b a::after{content:none}
.pix-index li{border-top:0;padding-top:clamp(1.1rem,2vw,1.4rem);gap:0}
/* the section head and closing note are centred, so the buttons are too */
.hix-cta{justify-content:center}
.hix-foot{margin-inline:auto;text-align:center}
/* the hard break in the devices heading is a desktop composition; on a phone
it produces a ragged three-line break, so the balancer takes over */
@media (max-width:620px){ .dev-sec .sec-head h2 br{display:none} }
/* .hix-num is a direct span child of the step, so the step's body-copy colour
was beating it and the numerals sat at 1.26:1 on the amber disc. */
.hix-steps li .hix-num{color:var(--on-accent)}
/* ================================================================================
10. TWO REMAINING ALIGNMENT ITEMS
================================================================================ */
/* The FAQ column is deliberately narrow for reading, which on a wide screen
left half the row empty. The heading moves alongside and stays with the
reader as they work down the questions. */
@media (min-width:1000px){
#faq .wrap-narrow{
grid-template-columns:minmax(0,21rem) minmax(0,40rem);
gap:clamp(2rem,4vw,4rem);
align-items:start;
}
#faq .sec-head{position:sticky;top:calc(var(--header-h) + 1.5rem);margin-bottom:0}
#faq .sec-sub{max-width:none}
}
/* The footer rule spanned the container's padding, so it overhung the columns
above it by 32px on each side. */
.footer-bottom{border-top:0;position:relative}
.footer-bottom::before{
content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);
height:1px;background:var(--line);
}
/* ================================================================================
11. COLOUR SYSTEM
================================================================================
A census of everything the site paints across fourteen pages found the accent
appearing at eleven border alphas and six background alphas, five different
page grounds where the rhythm only needs two, and two colours from the previous
palette still alive inside rgba(). Those are settled above. What follows sets
the rules the palette runs on.
The palette is three neutrals deep, one accent, and one platform colour:
ground the page, and one step up from it for emphasis
surface cards and panels, and one step up from that for hover
line three weights of hairline
accent amber — actions, state, and the one thing to notice
WhatsApp green — the chat channel, never anything else
The accent earns its meaning by being spent only where something can be done
or something has changed. Where it was decorating a repeated icon it steps
back to the neutral scale and keeps only the glyph.
================================================================================ */
:root{
/* accent tints, four steps — replacing eleven ad-hoc alphas */
--accent-faint:rgba(84,187,254,.10); /* ambient marks, decoration */
--accent-tint:rgba(84,187,254,.14); /* filled chips and badges */
--accent-edge:rgba(84,187,254,.24); /* quiet outline */
--accent-edge-2:rgba(84,187,254,.40); /* outline that has to be seen */
--line-accent:var(--accent-edge-2);
/* the platform colour gets the same treatment, two steps */
--wa-tint:rgba(37,211,102,.10);
--wa-edge:rgba(37,211,102,.32);
}
/* ---- 11.1 two grounds, and a hairline only where the ground changes -------
The four sections that used to sit on near-black are back on the page
ground, so the run from hero to footer is one continuous surface with two
deliberate lifts: the pricing block and the FAQ. ------------------------ */
.section-alt{
background:var(--bg-alt);
border-block:1px solid var(--line);
}
.dev-sec,.pix-sec,.shx-sec,.hix-sec,.wf-sec,.feat{border-block:0}
.site-footer{background:var(--bg-alt);border-top:1px solid var(--line)}
/* ---- 11.2 surfaces -------------------------------------------------------
Cards sat on the second line weight, which outlined every box on the page
at the same strength as a focused control. At rest they take the quiet
hairline and let the shadow do the separating; the stronger weight is kept
for hover, so the border now means "you are on this". ------------------- */
.plan,.related-card,.faq-item,.fcard,.wf-card,.pr-foot-card,.player,
.table-wrap,.doc-cta-panel,.dvx-card,.pix-index li,.hix-steps li,
.shx-card,.pr-incl li,.ord-steps li{
border-color:var(--line);
}
.plan:hover,.related-card:hover,.faq-item:hover,.fcard:hover,.wf-card:hover,
.pr-foot-card:hover,.player:hover,.dvx-card:hover,.pix-index li:hover,
.hix-steps li:hover,.shx-card:hover{
border-color:var(--line-3);
}
.faq-item[open]{background:var(--surface-2);border-color:var(--line-3)}
.plan-featured{border-color:var(--accent-edge-2)}
.plan-featured:hover{border-color:var(--accent)}
/* ---- 11.3 icon chips -----------------------------------------------------
Eight device chips, three feature chips, four trust chips and the tick and
check marks were all amber fill on an amber outline, which put the accent
on roughly thirty repeated ornaments per page and left it saying nothing in
particular. The chip becomes neutral; the glyph inside stays amber, so the
brand colour is still present at a size that reads as a mark rather than a
field. ------------------------------------------------------------------ */
.ico,.ht-ico,.dvx-ico,.wf-ico,.wf-honest-ico{
background:var(--surface-2);
border:1px solid var(--line);
}
.ico svg,.ht-ico svg,.dvx-ico svg,.wf-ico svg,.wf-honest-ico svg{stroke:var(--accent)}
.wf-ico .wf-wa{fill:var(--wa);stroke:none}
/* the functional marks keep their tint: a tick is state, not ornament */
.fchk{background:var(--accent-tint);border:1px solid var(--accent-edge)}
/* ---- 11.4 the accent, spent on purpose ----------------------------------- */
.eyebrow{
color:var(--accent);
background:var(--accent-faint);
border:1px solid var(--accent-edge);
}
.plan-save{background:var(--accent-tint);border:1px solid var(--accent-edge)}
.plan-flag{background:var(--accent);color:var(--on-accent)}
.hix-steps li .hix-num{background:var(--accent);color:var(--on-accent)}
/* ---- 11.5 the platform colour, two steps only ---------------------------- */
.wa-nav{background:var(--wa-tint);border:1px solid var(--wa-edge)}
.btn-wa{border-color:var(--wa-edge)}
.btn-wa:hover{background:var(--wa-tint);border-color:var(--wa)}
/* ---- 11.6 type colour: three roles, no fourth ---------------------------- */
.prose-block code,.legal-body code{
background:var(--surface-2);
border:1px solid var(--line);
color:var(--accent-soft);
}
/* ---- 11.7 elevation in one hue ------------------------------------------
Shadows carried a white inner highlight in one place and pure black in
another. All elevation is now the same neutral, so a lifted card on the
page ground and a lifted card on the alt ground read as the same material. */
.wa-fab{box-shadow:0 10px 26px -12px rgba(0,0,0,.85)}
.cta-panel{box-shadow:var(--sh-1)}
/* ================================================================================
12. WHITE AND SKY BLUE
================================================================================
The site is rebuilt on a light ground. Everything above already reads its
colour from tokens, so the palette is restated once here and the components
follow; what remains are the places that assumed a dark page and the handful
of surfaces that should stay dark on purpose.
Two blues, not many. Sky (var(--blue-400)) is the brand light — washes, tints, glows,
the lighter half of the mark. Azure (var(--accent)) is the working blue — buttons,
links, icons, anything that has to hold white text or sit on white and still
pass contrast. Sky cannot do that job: white on var(--blue-400) is 2:1. Using the
lighter tone for atmosphere and the deeper one for action is what keeps the
identity sky blue and the interface readable at the same time.
The product mock-ups keep their dark screens. A television is dark, and an
app screenshot on a white card is how software is shown; inverting them would
have made the one honest picture of the product look like a diagram.
================================================================================ */
:root{
/* ---- surfaces: white page, white cards, a blue-tinted band for emphasis -- */
--bg:#ffffff;
--bg-alt:var(--blue-050);
--surface:#ffffff;
--surface-2:var(--blue-025);
--panel:var(--surface);
--panel-2:var(--surface-2);
/* ---- lines: blue-tinted, never neutral grey ---- */
--line:var(--blue-100);
--line-2:var(--blue-200);
--line-3:var(--blue-300);
--line-str:var(--line-2);
/* ---- text: blue-black rather than black, so it belongs to the palette ---- */
--text:var(--ink-900); /* 16.4:1 on white */
--text-2:var(--ink-700); /* 7.6:1 on white */
--text-3:var(--ink-500); /* 5.0:1 on white */
--muted:var(--text-2);
--dim:var(--text-3);
/* ---- the two blues ---- */
--sky:var(--blue-400);
--accent:var(--accent); /* 4.9:1 on white, 4.9:1 white-on-it */
--accent-hover:var(--accent-hover); /* 6.6:1 */
--accent-soft:var(--blue-050);
--accent-deep:var(--accent-deep);
--on-accent:#ffffff;
--accent-faint:rgba(84,187,254,.10);
--accent-tint:rgba(84,187,254,.17);
--accent-edge:rgba(0,112,181,.22);
--accent-edge-2:rgba(0,112,181,.42);
--line-accent:var(--accent-edge-2);
--accent-glow:rgba(84,187,254,.40);
--grad:linear-gradient(135deg,var(--blue-400) 0%,var(--accent) 100%);
/* legacy names the component layer still calls */
--lime:var(--accent); --lime-hover:var(--accent-hover);
--lime-soft:var(--accent-soft); --lime-tint:var(--accent-tint);
--lime-deep:var(--accent-deep); --on-lime:var(--on-accent);
--lime-lt:var(--accent-hover); --lime-pale:var(--accent-soft);
/* ---- the chat channel is no longer green ----
A saturated WhatsApp green next to sky blue is the one combination this
palette cannot absorb. The glyph is what people recognise, not the hue, so
the buttons join the palette and keep the mark. */
--wa:var(--accent);
--wa-deep:var(--accent-hover);
--wa-tint:var(--accent-faint);
--wa-edge:var(--accent-edge);
/* ---- elevation: blue-black, never neutral black on white ---- */
--sh-1:0 1px 2px rgba(2,27,43,.06),0 1px 3px rgba(2,27,43,.04);
--sh-2:0 18px 34px -18px rgba(2,27,43,.26),0 3px 10px rgba(2,27,43,.06);
--sh-accent:0 10px 24px -10px rgba(0,112,181,.42);
}
/* ================================================================================
12.1 THE DARK ISLANDS
Custom properties inherit, so restating the ramp on the four mock-up roots
turns every component inside them back to dark without touching a single
component rule.
================================================================================ */
.hero-visual,.fv,.wf-set,.shx-live{
--bg:var(--blue-950);
--bg-alt:var(--blue-900);
--surface:var(--blue-900);
--surface-2:var(--blue-850);
--panel:var(--surface);
--panel-2:var(--surface-2);
--line:rgba(255,255,255,.10);
--line-2:rgba(255,255,255,.15);
--line-3:rgba(255,255,255,.24);
--text:#ffffff;
--text-2:var(--ink-200);
--text-3:var(--ink-300);
--muted:var(--text-2);
--dim:var(--text-3);
--sh-1:0 1px 2px rgba(0,0,0,.4);
}
/* ================================================================================
12.2 CHROME THAT ASSUMED A DARK PAGE
================================================================================ */
.site-header{
background:rgba(255,255,255,.82);
border-bottom:1px solid transparent;
}
.site-header.stuck{
background:rgba(255,255,255,.92);
border-bottom-color:var(--line);
box-shadow:0 1px 3px rgba(2,27,43,.05);
}
.mbar{background:rgba(255,255,255,.94);border-top:1px solid var(--line)}
.nav>a{color:var(--text-2)}
.nav>a:hover,.nav>a[aria-current]{color:var(--accent);background:var(--accent-faint)}
.btn-solid{background:var(--surface-2);color:var(--text);border-color:var(--line-2)}
.btn-solid:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-deep)}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--accent);color:var(--accent-deep)}
.btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}
.btn-wa{background:var(--surface);color:var(--text);border-color:var(--line-2)}
.btn-wa:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-deep)}
.btn-wa .wa-ico svg{fill:currentColor}
.wa-fab{background:var(--accent);color:#fff}
.wa-fab:hover{background:var(--accent-hover)}
.wa-nav{background:var(--accent-faint);border:1px solid var(--accent-edge);color:var(--accent)}
.wa-nav:hover{background:var(--accent-tint);color:var(--accent-deep)}
.wa-nav svg{fill:currentColor}
.mbar-wa .mbar-ico svg{fill:currentColor}
.mbar-plans{background:var(--accent);color:var(--on-accent)}
.mbar-wa{background:var(--surface);color:var(--text);border-color:var(--line-2)}
::selection{background:var(--accent-tint);color:var(--text)}
.wf-ico .wf-wa{fill:var(--accent);stroke:none}
/* inline code was set in the soft tint, which is a background colour now */
.prose-block code,.legal-body code{
background:var(--surface-2);border:1px solid var(--line);color:var(--accent-deep);
}
/* the ambient light: on white it is a breath of sky, not a glow */
.hero-glow{background:radial-gradient(46% 46% at 70% 30%,rgba(84,187,254,.16),transparent 70%)}
.feat-glow,.wf-amb,.pix-amb,.shx-amb,.hix-amb,.pr-amb{
background:radial-gradient(58% 44% at 50% 0%,rgba(84,187,254,.10),transparent 72%);
}
/* the featured plan is washed in sky rather than outlined twice */
.plan-featured{
background:linear-gradient(180deg,rgba(84,187,254,.10),transparent 58%),var(--surface);
border-color:var(--accent);
}
.plan-featured:hover{border-color:var(--accent-hover)}
/* ================================================================================
12.3 CARDS ON WHITE
A white card on a white page has no edge of its own, so the hairline and the
shadow do that work together; on hover the edge takes the accent rather than
another grey, which is the only colour change a pointer ever produces.
================================================================================ */
.plan,.related-card,.faq-item,.fcard,.wf-card,.pr-foot-card,.player,
.table-wrap,.doc-cta-panel,.dvx-card,.pix-index li,.hix-steps li,
.pr-incl li,.ord-steps li,.cta-panel,.wf-honest{
background:var(--surface);
border-color:var(--line);
box-shadow:var(--sh-1);
}
.plan:hover,.related-card:hover,.faq-item:hover,.fcard:hover,.wf-card:hover,
.pr-foot-card:hover,.player:hover,.dvx-card:hover,.pix-index li:hover,
.hix-steps li:hover{
background:var(--surface);
border-color:var(--accent-edge-2);
box-shadow:var(--sh-2);
}
.faq-item[open]{background:var(--surface);border-color:var(--accent-edge-2)}
.wf-honest{background:linear-gradient(180deg,var(--bg-alt),var(--surface));border-color:var(--line-2)}
.prose-block:has(.doc-cta){
background:linear-gradient(180deg,var(--bg-alt),var(--surface));
border-color:var(--line-2);
}
/* icon chips: a sky wash with an azure glyph reads as brand, not as furniture */
.ico,.ht-ico,.dvx-ico,.wf-ico,.wf-honest-ico{
background:var(--accent-faint);
border:1px solid var(--accent-edge);
}
.ico svg,.ht-ico svg,.dvx-ico svg,.wf-ico svg,.wf-honest-ico svg{stroke:var(--accent)}
/* ================================================================================
12.4 THE SHOWCASE TILES
The photographs are dark, so their captions keep a scrim and white type.
================================================================================ */
.shx-card{background:var(--surface);border-color:var(--line)}
/* ---- 12.5 the hero set, relit ------------------------------------------
The television keeps its dark screen, but the media unit it stands on was
a dark slab sampled for a dark page; on white it read as a hole cut in the
layout. It becomes pale furniture, and the two badges become white chips,
so the only dark thing in the composition is the screen itself. */
.console{
background:linear-gradient(180deg,var(--blue-050) 0%,var(--blue-100) 42%,var(--blue-200) 100%);
border:1px solid var(--line-2);
box-shadow:0 20px 38px -22px rgba(2,27,43,.32),inset 0 1px 0 rgba(255,255,255,.9);
}
.hero-visual .float-card{
background:rgba(255,255,255,.94);
border:1px solid var(--line-2);
box-shadow:0 14px 30px -16px rgba(2,27,43,.3);
color:var(--ink-900);
}
.hero-visual .float-card b{color:var(--accent)}
.hero-visual .float-card span{color:var(--ink-500)}
/* ---- 12.6 the two labels that sit on a tint -----------------------------
The working blue clears 4.5:1 on white, but on its own pale wash it lands
at 4.2. Both labels take the deep blue instead, which is the same hue two
steps down and reads as more deliberate anyway. */
.eyebrow{color:var(--accent-deep)}
.eyebrow .dot{background:var(--accent);box-shadow:none}
.plan-save{color:var(--accent-deep)}
/* ---- 12.7 the two blues, each on its own ground -------------------------
Sky is the light tone and azure the working one, so which of them is
legible depends on what is behind it. On white, azure. On the dark screens,
sky — azure on near-black is 3.8:1, sky is 9:1. Stating it on the island
roots means every mark inside them flips with one line. */
.hero-visual,.fv,.wf-set,.shx-live{
--accent:var(--blue-400);
--accent-hover:var(--blue-400);
--accent-deep:var(--blue-200);
--on-accent:var(--blue-900);
--accent-faint:rgba(84,187,254,.14);
--accent-tint:rgba(84,187,254,.22);
--accent-edge:rgba(84,187,254,.32);
--accent-edge-2:rgba(84,187,254,.5);
}
/* The wordmark is set in the gradient, and a gradient that starts in sky is
unreadable on a white page. It runs between the two darker blues instead. */
.brand-text span{
background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* the badges float on a near-white chip over a dark screen, which lands both
labels a shade under AA on the working blue */
.hero-visual .float-card b{color:var(--accent-deep)}
.hero-visual .float-card span{color:var(--ink-700)}
/* the badges are white chips sitting over the dark screen, so they belong to
the light palette even though they live inside the island */
.hero-visual .float-card{
--accent:var(--accent); --accent-deep:var(--accent-deep); --text-2:var(--ink-700); --text-3:var(--ink-500);
}
.hero-visual .float-card b{color:var(--accent-deep)}
.hero-visual .float-card span{color:var(--text-2)}
/* ---- 12.8 the aliases have to be restated on the islands -----------------
A custom property is substituted on the element that declares it, and the
resolved value is what inherits. --lime:var(--accent) is declared on :root,
so it had already resolved to the working blue before it reached the dark
screens, and the marks inside them kept the light-ground colour. Restating
the aliases on the island roots is what makes the flip actually reach the
components that still call them. */
.hero-visual,.fv,.wf-set,.shx-live{
--lime:var(--accent);
--lime-hover:var(--accent-hover);
--lime-soft:var(--accent-deep);
--lime-tint:var(--accent-tint);
--lime-deep:rgba(84,187,254,.18);
--on-lime:var(--on-accent);
--lime-lt:var(--accent-hover);
--lime-pale:var(--accent-deep);
--line-accent:var(--accent-edge-2);
--line-str:var(--line-2);
--accent-glow:rgba(84,187,254,.45);
--grad:linear-gradient(135deg,var(--blue-400) 0%,var(--blue-400) 100%);
}
/* the hero's own local names predate the token system and sit outside the
islands; the icon stroke was landing on a pale chip in the palest blue */
.hero{--flame:var(--accent);--flame-deep:var(--accent-deep);--ember:var(--accent)}
/* ================================================================================
13. ONE RAMP
================================================================================
The palette was measured in OKLCH before this was written, and it was not a
palette: the saturated blues spanned 29 degrees of hue — sky sat at 233° while
every other blue sat between 250° and 262°, so the brand colour was literally a
different blue from the rest of the site. The lightness steps were uneven too,
with a 17-point hole through the middle of the range and four pairs of colours
sitting within a point of each other while doing unrelated jobs.
Everything below is generated on a single hue, 240°, at controlled lightness
steps, with chroma peaking through the middle of the range and easing at both
ends so the ramp stays believable rather than turning neon. Each step was
contrast-checked against the grounds it is actually used on before being
written down. Nothing here is picked by eye.
blue-000 #ffffff the page
blue-025 #f4faff raised surfaces, hover wash
blue-050 #ebf7ff the tinted band
blue-100 var(--blue-100) quiet hairline
blue-200 var(--blue-200) soft fill, panel edge
blue-300 var(--blue-300) control edge
blue-400 var(--blue-400) SKY — the brand light
blue-500 var(--blue-500) bright accent, marks on dark
blue-600 var(--accent) ACCENT — buttons, links 5.3:1 both ways on white
blue-700 var(--accent-hover) hover 7.4:1
blue-800 var(--accent-deep) deep — labels that sit on tint 10.4:1
blue-850 var(--blue-850) screen raised
blue-900 var(--blue-900) screen surface
blue-950 var(--blue-950) screen ground
The ink ramp is the same hue with the chroma pulled right down, so body copy
reads as ink that belongs to the palette rather than as blue text.
ink-900 #0e212e headings 16.5:1
ink-700 #3e505c body 8.4:1
ink-500 #5b6872 meta 5.7:1 (5.3:1 on the band)
ink-300 #8fa1ae meta on the dark screens
ink-200 #b7c7d2 body on the dark screens
================================================================================ */
:root{
--blue-000:#ffffff; --blue-025:#f4faff; --blue-050:#ebf7ff; --blue-100:#def0fd;
--blue-200:#cae6fa; --blue-300:#a5cfee; --blue-400:#54bbfe; --blue-500:#0096e0;
--blue-600:#0070b5; --blue-700:#005897; --blue-800:#004272; --blue-850:#003c5f;
--blue-900:#002c4a; --blue-950:#021b2b;
--ink-900:#0e212e; --ink-700:#3e505c; --ink-500:#5b6872;
--ink-300:#8fa1ae; --ink-200:#b7c7d2;
/* ---- roles ---- */
--bg:var(--blue-000);
--bg-alt:var(--blue-050);
--surface:var(--blue-000);
--surface-2:var(--blue-025);
--panel:var(--surface);
--panel-2:var(--surface-2);
--line:var(--blue-100);
--line-2:var(--blue-200);
--line-3:var(--blue-300);
--line-str:var(--line-2);
--text:var(--ink-900);
--text-2:var(--ink-700);
--text-3:var(--ink-500);
--muted:var(--text-2);
--dim:var(--text-3);
--sky:var(--blue-400);
--accent:var(--blue-600);
--accent-hover:var(--blue-700);
--accent-deep:var(--blue-800);
--accent-soft:var(--blue-050);
--on-accent:#ffffff;
/* four alpha steps, all struck from the ramp: sky for fills, accent for edges */
--accent-faint:rgba(84,187,254,.13);
--accent-tint:rgba(84,187,254,.22);
--accent-edge:rgba(0,112,181,.20);
--accent-edge-2:rgba(0,112,181,.40);
--line-accent:var(--accent-edge-2);
--accent-glow:rgba(84,187,254,.40);
--grad:linear-gradient(135deg,var(--blue-400) 0%,var(--blue-600) 100%);
--wa:var(--accent); --wa-deep:var(--accent-hover);
--wa-tint:var(--accent-faint); --wa-edge:var(--accent-edge);
/* shadow is the deepest step of the ramp, so nothing on the page casts grey */
--sh-1:0 1px 2px rgba(2,27,43,.07),0 1px 3px rgba(2,27,43,.04);
--sh-2:0 18px 34px -18px rgba(2,27,43,.30),0 3px 10px rgba(2,27,43,.07);
--sh-accent:0 10px 24px -10px rgba(0,112,181,.42);
}
/* the aliases the older component layers still call, restated so they resolve
against the ramp rather than against whatever they last held */
:root{
--lime:var(--accent); --lime-hover:var(--accent-hover);
--lime-soft:var(--accent-soft); --lime-tint:var(--accent-tint);
--lime-deep:var(--accent-deep); --on-lime:var(--on-accent);
--lime-lt:var(--accent-hover); --lime-pale:var(--accent-soft);
}
/* ---- the dark screens, on the same ramp ---------------------------------- */
.hero-visual,.fv,.wf-set,.shx-live{
--bg:var(--blue-950);
--bg-alt:var(--blue-900);
--surface:var(--blue-900);
--surface-2:var(--blue-850);
--panel:var(--surface); --panel-2:var(--surface-2);
--line:rgba(255,255,255,.10);
--line-2:rgba(255,255,255,.15);
--line-3:rgba(255,255,255,.24);
--line-str:var(--line-2);
--text:#ffffff;
--text-2:var(--ink-200);
--text-3:var(--ink-300);
--muted:var(--text-2); --dim:var(--text-3);
--accent:var(--blue-400);
--accent-hover:var(--blue-300);
--accent-deep:var(--blue-200);
--accent-soft:var(--blue-200);
--on-accent:var(--blue-950);
--accent-faint:rgba(84,187,254,.14);
--accent-tint:rgba(84,187,254,.22);
--accent-edge:rgba(84,187,254,.34);
--accent-edge-2:rgba(84,187,254,.52);
--line-accent:var(--accent-edge-2);
--accent-glow:rgba(84,187,254,.45);
--grad:linear-gradient(135deg,var(--blue-300) 0%,var(--blue-400) 100%);
--sh-1:0 1px 2px rgba(0,0,0,.4);
--lime:var(--accent); --lime-hover:var(--accent-hover);
--lime-soft:var(--accent-deep); --lime-tint:var(--accent-tint);
--lime-deep:rgba(84,187,254,.18); --on-lime:var(--on-accent);
--lime-lt:var(--accent-hover); --lime-pale:var(--accent-deep);
}
/* the badges float on white over a dark screen, so they belong to the light end */
.hero-visual .float-card{
--accent:var(--blue-600); --accent-deep:var(--blue-800);
--text:var(--ink-900); --text-2:var(--ink-700); --text-3:var(--ink-500);
}
/* ---- the pieces that were still written as literals ---------------------- */
/* background is a shorthand and resets background-clip, which is what
paints this wordmark; background-image leaves the clip alone */
.brand-text span{
background-image:linear-gradient(135deg,var(--blue-600) 0%,var(--blue-800) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero{--flame:var(--blue-600);--flame-deep:var(--blue-800);--ember:var(--blue-600)}
.hero-visual .float-card{
background:rgba(255,255,255,.95);
border:1px solid var(--blue-200);
box-shadow:0 14px 30px -16px rgba(2,27,43,.32);
}
.hero-glow{background:radial-gradient(46% 46% at 70% 30%,rgba(84,187,254,.18),transparent 70%)}
.feat-glow,.wf-amb,.pix-amb,.shx-amb,.hix-amb,.pr-amb{
background:radial-gradient(58% 44% at 50% 0%,rgba(84,187,254,.11),transparent 72%);
}
.site-header{background:rgba(255,255,255,.82)}
.site-header.stuck{background:rgba(255,255,255,.93);box-shadow:0 1px 3px rgba(2,27,43,.06)}
.mbar{background:rgba(255,255,255,.95)}
.plan-featured{
background:linear-gradient(180deg,rgba(84,187,254,.13),transparent 58%),var(--surface);
}
.wf-honest,.prose-block:has(.doc-cta){
background:linear-gradient(180deg,var(--blue-050),var(--surface));
border-color:var(--blue-200);
}
/* the quality tag inside the channel chips sits on the raised screen step,
where the meta ink lands at 4.35:1 — it takes the step above */
.ui-chips b{color:var(--ink-200)}
/* .nav>a is more specific than .wa-nav, so the chat mark in the bar was
inheriting body ink instead of the accent it shares with every other
interactive mark */
.nav>a.wa-nav{color:var(--accent)}
.nav>a.wa-nav:hover{color:var(--accent-deep);background:var(--accent-tint)}
/* ================================================================================
14. EDGE-LIT
================================================================================
The audit that prompted this: of the ten sections on the home page, five in a
row were a centred heading over an even grid of identical rounded rectangles —
three cards, then six, then eight, then four, then four. Every surface carried
the same radius, the same hairline and the same shadow, so the page had one
texture from top to bottom and scrolling it told you nothing about where you
were.
The direction is the subject's own: a screen is a thing that emits light, so
every surface on this page behaves as though it sits near one. Light catches
the top edge of a surface and falls away down it, and the shadow beneath is
wide and soft rather than tight and dark. That single idea supplies the depth,
so nothing else has to be decorated.
On top of it, three surface roles that look physically different, which is what
actually breaks the sameness:
lit the surfaces a decision is made on — plans, feature cards, panels.
Generous radius, edge-light along the top, light falling down the
face, a wide shadow. These lift on hover.
etched reference material — devices, the plan inclusions. No card at all:
items sit on the page separated by hairlines, like a spec sheet.
inset the product screens. Unchanged; they are the one dark thing.
And four compositional changes so the rhythm varies down the page: the feature
grid becomes asymmetric, the category rail runs wider than every other section,
the device grid loses its boxes, and the four steps become a rail with the
numbers sitting on the line.
================================================================================ */
:root{
/* the light: a hairline that is brightest across the middle of an edge */
--edge-light:linear-gradient(90deg,
transparent 0%,
var(--blue-200) 18%,
var(--blue-300) 50%,
var(--blue-200) 82%,
transparent 100%);
/* the fall-off down the face of a lit surface */
--face-light:linear-gradient(180deg,rgba(84,187,254,.055) 0%,rgba(84,187,254,0) 42%);
/* depth: a tight contact shadow plus a wide soft one, both struck from the
bottom of the ramp so nothing casts grey */
--sh-1:0 1px 2px rgba(2,27,43,.05),0 4px 10px -6px rgba(2,27,43,.10);
--sh-2:0 2px 4px rgba(2,27,43,.05),0 22px 44px -20px rgba(2,27,43,.26);
--sh-3:0 3px 6px rgba(2,27,43,.06),0 40px 70px -32px rgba(2,27,43,.34);
--sh-accent:0 1px 2px rgba(0,66,114,.30),0 14px 28px -12px rgba(0,112,181,.50);
}
/* ---- 14.1 the lit surface ------------------------------------------------ */
.plan,.wf-card,.pr-foot-card,.cta-panel,.doc-cta-panel,.wf-honest,
.faq-item,.related-card,.pix-index li,.prose-block:has(.doc-cta){
position:relative;
background-color:var(--surface);
background-image:var(--edge-light),var(--face-light);
background-repeat:no-repeat;
background-size:100% 1px,100% 100%;
background-position:top center,top center;
border:1px solid var(--line);
box-shadow:var(--sh-1);
}
.plan,.cta-panel,.wf-honest,.pr-foot-card,.doc-cta-panel,.prose-block:has(.doc-cta){
border-radius:22px;
}
.faq-item,.related-card,.pix-index li,.wf-card{border-radius:14px}
.plan:hover,.wf-card:hover,.pr-foot-card:hover,.related-card:hover,.pix-index li:hover{
border-color:var(--blue-200);
box-shadow:var(--sh-2);
}
.faq-item[open]{border-color:var(--blue-200);box-shadow:var(--sh-2)}
/* ---- 14.2 the etched surface ---------------------------------------------
Reference lists stop being cards. They sit on the page inside one hairline
frame, divided by rules — a spec sheet rather than eight little boxes. */
.dvx-grid{
gap:0;
border:1px solid var(--line);
border-radius:22px;
overflow:hidden;
background:var(--surface);
box-shadow:var(--sh-1);
background-image:var(--edge-light);
background-repeat:no-repeat;
background-size:100% 1px;
background-position:top center;
}
.dvx-card{
background:transparent;
border:0;
border-radius:0;
box-shadow:none;
padding:clamp(1.25rem,2.2vw,1.6rem);
border-inline-start:1px solid var(--line);
border-block-start:1px solid var(--line);
transition:background-color var(--dur-2) var(--ease);
}
.dvx-card:hover{background:var(--blue-025);transform:none;box-shadow:none}@media (min-width:1081px){
.dvx-card:nth-child(4n+1){border-inline-start:0}
.dvx-card:nth-child(-n+4){border-block-start:0}
}@media (min-width:761px) and (max-width:1080px){
.dvx-card:nth-child(3n+1){border-inline-start:0}
.dvx-card:nth-child(-n+3){border-block-start:0}
}@media (min-width:521px) and (max-width:760px){
.dvx-card:nth-child(odd){border-inline-start:0}
.dvx-card:nth-child(-n+2){border-block-start:0}
}@media (max-width:520px){
.dvx-card{border-inline-start:0}
.dvx-card:first-child{border-block-start:0}
}
/* the plan inclusions get the same etched treatment, in a row */
.pr-incl li{
background:transparent;border:0;box-shadow:none;
padding:.4rem .95rem;border-inline-start:1px solid var(--blue-200);border-radius:0;
}
/* ---- 14.3 the feature grid, made asymmetric ------------------------------
Three equal cards say the three things are interchangeable. They are not:
live television is the reason people buy this. */
@media (min-width:960px){
.fgrid{grid-template-columns:1.6fr 1fr;align-items:stretch}
.fgrid > :first-child{grid-row:span 2}
.fgrid > :first-child .fcard-body{padding:clamp(1.6rem,2.6vw,2.1rem)}
.fgrid > :first-child h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem)}
}
/* ---- 14.4 the category rail runs wider than the page ---------------------
One section that ignores the measure everything else keeps. It is the only
place the eye is asked to look sideways rather than down. */
@media (min-width:1240px){
.shx-sec .wrap{max-width:1500px}
.shx-sec .sec-head{max-width:720px;margin-inline:auto}
}
/* ---- 14.5 the four steps become a rail ----------------------------------
The numbers sit on the line rather than inside four more boxes, so the
sequence reads as a sequence. */
.hix-steps{position:relative;padding-top:2.6rem}
.hix-steps::before{
content:"";position:absolute;left:0;right:0;top:calc(2.6rem - 19px);height:2px;
background:linear-gradient(90deg,var(--blue-200),var(--blue-300),var(--blue-200));
border-radius:2px;
}
.hix-steps li{
background:transparent;border:0;box-shadow:none;padding:0;border-radius:0;
overflow:visible;
}
.hix-steps li:hover{transform:none;box-shadow:none;background:transparent}
.hix-steps li:not(:first-child)::after{display:none}
.hix-num{
position:absolute;top:-2.6rem;left:0;
width:38px;height:38px;
box-shadow:0 0 0 6px var(--bg),0 4px 10px -4px rgba(0,112,181,.5);
}
.hix-steps li{position:relative}@media (max-width:1080px){
.hix-steps::before{display:none}
.hix-steps{padding-top:0}
.hix-num{position:static;box-shadow:0 4px 10px -4px rgba(0,112,181,.5)}
}
/* ---- 14.6 the heading rhythm --------------------------------------------
Five centred headings in a row is what made the page feel like one long
list. Alternating them gives the scroll a pulse. */
@media (min-width:900px){
.dev-sec .sec-head-center,
.hix-sec .sec-head-center{text-align:left;margin-inline:0;max-width:44ch}
.dev-sec .sec-head-center .eyebrow,
.hix-sec .sec-head-center .eyebrow{margin-inline:0}
.dev-sec .sec-head-center .sec-sub,
.hix-sec .sec-head-center .sec-sub{margin-inline:0}
}
/* ---- 14.7 buttons -------------------------------------------------------
The primary action gets the same light as the surfaces: a highlight along
its top edge, a face that falls away, and a shadow in its own hue. */
.btn{position:relative;isolation:isolate}
.btn-primary{
background-color:var(--accent);
background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%);
border:1px solid var(--blue-700);
box-shadow:var(--sh-accent);
color:var(--on-accent);
}
.btn-primary:hover{
background-color:var(--accent-hover);
border-color:var(--blue-800);
box-shadow:0 1px 2px rgba(0,66,114,.34),0 18px 34px -12px rgba(0,112,181,.55);
}
.btn-primary:active{box-shadow:0 1px 2px rgba(0,66,114,.4)}
.btn-solid,.btn-ghost,.btn-wa{
background-color:var(--surface);
background-image:linear-gradient(180deg,rgba(84,187,254,.07),rgba(84,187,254,0) 60%);
border:1px solid var(--line-2);
box-shadow:var(--sh-1);
color:var(--text);
}
.btn-solid:hover,.btn-ghost:hover,.btn-wa:hover{
background-color:var(--blue-025);
border-color:var(--blue-300);
color:var(--accent-deep);
box-shadow:var(--sh-2);
}
/* the mobile action bar matches the buttons above it */
.mbar-plans{
background-color:var(--accent);
background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%);
box-shadow:var(--sh-accent);
}
/* ---- 14.8 the featured plan is lifted, not just outlined ---------------- */
@media (min-width:1081px){
.plan-featured{transform:translateY(-14px)}
.plan-featured:hover{transform:translateY(-18px)}
}
.plan-featured{
border-color:var(--blue-300);
box-shadow:var(--sh-3);
background-image:var(--edge-light),
linear-gradient(180deg,rgba(84,187,254,.16) 0%,rgba(84,187,254,0) 46%);
}
.plan-featured:hover{border-color:var(--accent);box-shadow:var(--sh-3)}
.plan-flag{box-shadow:0 6px 14px -6px rgba(0,112,181,.6)}
/* ---- 14.9 the eyebrow reads as a marker, not a pill --------------------- */
.eyebrow{
background:transparent;
border:0;
border-inline-start:2px solid var(--blue-400);
border-radius:0;
padding:.1rem 0 .1rem .7rem;
color:var(--accent-deep);
}
.eyebrow .dot{display:none}
.sec-head-center .eyebrow{
border-inline-start:0;
border-block-end:2px solid var(--blue-400);
padding:0 0 .45rem;
}@media (prefers-reduced-motion:reduce){
.plan-featured,.plan-featured:hover{transform:none}
.dvx-card{transition:none}
}
/* ---- 14.10 the guide fills the dominant card ----------------------------
The programme guide is drawn at a fixed width, so widening its card left a
band of empty screen and stranded the NOW marker mid-panel. Inside the
dominant card the programme bars become fluid, which is what a real guide
does when the window gets wider. */
@media (min-width:960px){
.fgrid > :first-child .epg{padding-right:10px}
.fgrid > :first-child .epg-row{gap:6px}
.fgrid > :first-child .epg-b{flex:1 1 0;width:auto;min-width:0}
.fgrid > :first-child .epg-b.w2{flex-grow:1.75}
.fgrid > :first-child .epg-top{padding-right:2px}
.fgrid > :first-child .epg-times{flex:1;justify-content:space-between;gap:0;padding-inline:6% 2%}
.fgrid > :first-child .epg-now{left:58%}
}
/* the setup section's head is left-aligned now, so its closing note and
buttons follow it rather than sitting centred under a left-set heading */
@media (min-width:900px){
.hix-foot{margin-inline:0;text-align:left}
.hix-cta{justify-content:flex-start}
}
/* ================================================================================
15. CATEGORY CARDS
================================================================================
Built from the supplied reference. The composition is three stacked plates:
a photograph, a white panel overlapping its lower edge, and an icon badge
sitting across the seam between them, with the link arrow in the bottom
corner. The overlap is what gives the card its depth — there is no border on
the photograph at all, so the panel appears to sit in front of it.
================================================================================ */
.cat-grid{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:clamp(.9rem,1.6vw,1.35rem);
align-items:stretch;
}
.cat{display:flex}
.cat-link{
position:relative;
display:flex;flex-direction:column;
width:100%;
color:inherit;text-decoration:none;
border-radius:18px;
transition:transform var(--dur-2) var(--ease);
}
/* --- the photograph ---------------------------------------------------- */
.cat-shot{
display:block;position:relative;z-index:0;
border-radius:18px;overflow:hidden;
background:var(--blue-100);
box-shadow:0 10px 22px -14px rgba(2,27,43,.35);
}
.cat-shot img{
display:block;width:100%;height:auto;
aspect-ratio:283/156;object-fit:cover;
transition:transform var(--dur-2) var(--ease);
}
/* --- the panel that overlaps it ---------------------------------------- */
.cat-body{
position:relative;z-index:1;
display:flex;flex-direction:column;flex:1;
margin:-30px 0 0;
padding:2.6rem 1.15rem 3.1rem;
background:var(--surface);
border:1px solid var(--line);
border-radius:18px;
box-shadow:var(--sh-1);
transition:box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}
/* --- the badge across the seam ----------------------------------------- */
.cat-ico{
position:absolute;top:-31px;left:1.05rem;
width:62px;height:62px;
display:grid;place-items:center;
background:var(--surface);
border-radius:17px;
box-shadow:0 8px 18px -8px rgba(2,27,43,.30),0 0 0 1px var(--line);
transition:transform var(--dur-2) var(--ease);
}
.cat-ico svg{width:27px;height:27px;fill:var(--accent);stroke:none;display:block}
.cat-name{
display:block;
font-size:1.28rem;font-weight:800;letter-spacing:-.022em;line-height:1.2;
color:var(--text);
margin-bottom:.45rem;
}
.cat-desc{
display:block;flex:1;
font-size:var(--fs-sm);line-height:1.5;color:var(--text-2);
}
/* --- the arrow ---------------------------------------------------------- */
.cat-go{
position:absolute;right:1.05rem;bottom:1.05rem;
width:36px;height:36px;flex:none;
display:grid;place-items:center;
border-radius:50%;
background:var(--blue-100);
transition:background-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
}
.cat-go svg{
width:17px;height:17px;fill:none;stroke:var(--accent);
stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;display:block;
}
/* --- hover: the whole plate lifts as one -------------------------------- */
.cat-link:hover{transform:translateY(-4px)}
.cat-link:hover .cat-body{border-color:var(--blue-200);box-shadow:var(--sh-2)}
.cat-link:hover .cat-shot img{transform:scale(1.045)}
.cat-link:hover .cat-go{background:var(--accent);transform:translateX(2px)}
.cat-link:hover .cat-go svg{stroke:var(--on-accent)}
.cat-link:hover .cat-ico{transform:translateY(-2px)}
.cat-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:18px}
/* --- the closing action ------------------------------------------------- */
.cat-cta{display:flex;justify-content:center;margin-top:clamp(2.25rem,4vw,3.25rem)}
.cat-cta .btn-ico svg{
width:1.1em;height:1.1em;fill:none;stroke:currentColor;
stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
}
/* --- responsive ---------------------------------------------------------
Six across only where a card still holds three lines of description; then
three, two, and one. The badge and the overlap scale with the card so the
composition never breaks. ---------------------------------------------- */
@media (max-width:1239px){
.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}
}@media (max-width:820px){
.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}@media (max-width:520px){
.cat-grid{grid-template-columns:minmax(0,1fr);gap:1.1rem}
.cat-body{padding:2.5rem 1.2rem 1.2rem}
.cat-desc{padding-right:3rem}
.cat-go{bottom:1.2rem;right:1.2rem}
}@media (prefers-reduced-motion:reduce){
.cat-link,.cat-shot img,.cat-go,.cat-ico,.cat-body{transition:none}
.cat-link:hover{transform:none}
.cat-link:hover .cat-shot img{transform:none}
.cat-link:hover .cat-go{transform:none}
.cat-link:hover .cat-ico{transform:none}
}
/* ---- 15.1 proportions matched to the reference --------------------------
Cropping the baked-in badge off the supplied photographs left a strip too
letterboxed to match the reference, where the visible photograph is about
two thirds as tall as the card is wide. The tile takes a 5:4 box and the
photograph fills it, which centre-crops the sides rather than squashing it.
The badge and the overlap are sized from the card so the composition holds
at every column count. */
.cat-link{--badge:clamp(44px,21%,62px);--overlap:calc(var(--badge) * .5)}
.cat-shot img{aspect-ratio:5/4;object-position:50% 42%}
.cat-body{
margin-top:calc(var(--overlap) * -1);
padding-top:calc(var(--overlap) + .95rem);
}
.cat-ico{
width:var(--badge);height:var(--badge);
top:calc(var(--overlap) * -1);
border-radius:calc(var(--badge) * .28);
}
.cat-ico svg{width:44%;height:44%}
/* ================================================================================
16. THE PRODUCT PHOTOGRAPH IN "WHY SMARTSG IPTV"
================================================================================
The orbit graphic that stood here was abstract; the supplied photograph shows
the thing itself, which is a better argument in a section about what a
provider is willing to show you before you pay.
The picture is placed, never stretched: it keeps its own 805:681 ratio at
every width and is only ever scaled. Two callouts sit over it in HTML rather
than in pixels, so their text stays sharp, recolours with the palette, and
says only what the site can stand behind.
================================================================================ */
.wf-shot{
position:relative;
margin:0;
border-radius:22px;
background:linear-gradient(160deg,var(--blue-050),var(--blue-025));
box-shadow:var(--sh-2);
/* the photograph is cropped close on the right, so a hairline all the way
round would draw attention to the bleed; the light sits on the top edge
like every other lit surface instead */
background-image:var(--edge-light),linear-gradient(160deg,var(--blue-050),var(--blue-025));
background-repeat:no-repeat;
background-size:100% 1px,100% 100%;
background-position:top center,top center;
border:1px solid var(--line);
overflow:hidden;
isolation:isolate;
}
.wf-shot img{
display:block;
width:100%;height:auto;
aspect-ratio:805/681;
object-fit:cover;object-position:50% 50%;
}
/* ---- the two callouts --------------------------------------------------- */
.wf-chip{
position:absolute;z-index:2;
display:flex;align-items:center;gap:.6rem;
padding:.6rem .85rem;
background:rgba(255,255,255,.94);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
border:1px solid var(--line);
border-radius:14px;
box-shadow:0 10px 24px -12px rgba(2,27,43,.34);
white-space:nowrap;
}
.wf-chip-a{top:6.5%;left:4%}
.wf-chip-b{bottom:8%;right:4%}
.wf-chip-ico{
display:grid;place-items:center;flex:none;
width:34px;height:34px;border-radius:10px;
background:var(--accent-faint);
}
.wf-chip-ico svg{
width:18px;height:18px;fill:none;stroke:var(--accent);
stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block;
}
.wf-chip-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.wf-chip-txt b{font-size:.86rem;font-weight:800;color:var(--text);letter-spacing:-.01em}
.wf-chip-txt i{font-style:normal;font-size:.74rem;font-weight:600;color:var(--text-2)}
/* ---- responsive ---------------------------------------------------------
The column becomes full width below 1024, where the picture is large enough
that the callouts still read. Under 560 they would cover a third of the
screen each, so they step down; under 420 the picture speaks for itself. */
@media (max-width:1023px){
.wf-shot{max-width:620px;margin-inline:auto}
}@media (max-width:559px){
.wf-chip{padding:.5rem .7rem;gap:.5rem;border-radius:12px}
.wf-chip-ico{width:28px;height:28px;border-radius:8px}
.wf-chip-ico svg{width:15px;height:15px}
.wf-chip-txt b{font-size:.78rem}
.wf-chip-txt i{font-size:.68rem}
.wf-chip-a{top:4%;left:3%}
.wf-chip-b{bottom:5%;right:3%}
}@media (max-width:419px){
.wf-chip{display:none}
}
/* ---- 16.1 the chips float over the frame's edge -------------------------
Clipping the figure meant the callouts had to sit inside the picture, on
top of the screen. The photograph is clipped by its own frame instead, and
the callouts hang over its corners the way the reference has them. The
overhang is small and only applies where there is margin to spare. */
.wf-shot{
background:none;border:0;box-shadow:none;overflow:visible;border-radius:0;
max-width:560px;margin-inline:0 0;margin-left:auto;
}
.wf-frame{
display:block;position:relative;
border-radius:22px;overflow:hidden;
border:1px solid var(--line);
box-shadow:var(--sh-2);
background-image:var(--edge-light),linear-gradient(160deg,var(--blue-050),var(--blue-025));
background-repeat:no-repeat;
background-size:100% 1px,100% 100%;
background-position:top center,top center;
}@media (min-width:1024px){
.wf-chip-a{top:5%;left:-5%}
.wf-chip-b{bottom:7%;right:-4%}
}@media (max-width:1023px){
.wf-shot{max-width:620px;margin-inline:auto}
.wf-chip-a{top:5%;left:2%}
.wf-chip-b{bottom:7%;right:2%}
}
/* ---- 16.2 the callouts clear what matters in the picture ----------------
The first chip was sitting over the brand on the television screen and the
second over the remote. Both straddle an edge of the frame instead, which
is also closer to how the reference places them. */
@media (min-width:1024px){
.wf-chip-a{top:-6%;left:-6%}
.wf-chip-b{bottom:13%;right:-5%}
}@media (max-width:1023px){
.wf-chip-a{top:-5%;left:1%}
.wf-chip-b{bottom:12%;right:1%}
}
/* ================================================================================
17. THE HERO VISUAL
================================================================================
The supplied artwork replaces the CSS television that stood here. It is placed,
never stretched: it keeps its own 1096:752 ratio at every width and is only
ever scaled. No frame, no border and no card — the artwork already carries its
own soft ground and shadow, and putting a box round it would fight that.
================================================================================ */
.hero-shot{
margin:0;
display:block;
position:relative;
}
.hero-shot img{
display:block;
width:100%;
height:auto;
aspect-ratio:1096/752;
/* the artwork is drawn on a pale ground that meets the page, so it needs no
rounding of its own; a radius here would cut the floating callouts */
}
/* the hero grid gave the copy and the visual equal columns, which left the
artwork smaller than it is drawn and the copy with room it does not use */
@media (min-width:900px){
.hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:center}
.hero-shot{margin-right:calc(var(--pad) * -1)}
}@media (max-width:899px){
.hero-visual{max-width:640px;width:100%;margin-inline:auto}
}
/* ---- 17.1 the artwork's own ground, carried into the page ---------------
The supplied image is drawn on a pale blue ground (its edges sample between
#eef6ff and #f9fafe), so on a white hero it read as a pasted rectangle. A
soft wash of that same colour sits behind it and fades out, which lets the
artwork's ground meet the page instead of ending at a line. Nothing is done
to the image itself. */
.hero-shot::before{
content:"";
position:absolute;
inset:-14% -11% -16% -9%;
z-index:-1;
pointer-events:none;
border-radius:50%;
background:radial-gradient(58% 58% at 50% 48%,
#eff7fe 0%,
rgba(239,247,254,.82) 42%,
rgba(239,247,254,.35) 68%,
rgba(239,247,254,0) 84%);
}@media (min-width:900px){
.hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
}
/* 1.2fr squeezed the copy column until the two hero buttons stacked; 1.12
keeps them on one row. The wash reaches further so the artwork's ground
fades out well before the page white rather than at the image edge. */
@media (min-width:900px){
.hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
}
.hero-shot::before{inset:-20% -17% -22% -15%}
/* ---- 17.2 the horizontal edges melt into the wash -----------------------
The artwork's ground shades from #f5f8fe at the top to #daeefe at the
bottom right, so a single flat wash could not match it everywhere and the
top and bottom edges still read as lines. Those two edges carry nothing but
empty ground and the table surface, so they fade; the left and right are
left alone because the callouts and the plant sit against them. */
.hero-shot img{
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 95%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
/* ================================================================================
18. THE PRICING CARDS
================================================================================
Four across on a desktop, two on a tablet, one on a phone. Each card is a
price block, a hairline, a ticked feature list and a rounded button, in that
order, with the list taking the slack so the four buttons sit on one line
whatever the copy does.
The ticks are the accent, not red: red against sky blue is the one clash this
palette cannot absorb, and a tick that matches the buy button reads as "this
is included in what you are buying". The one crossed-off line is the
multi-device limit — the only thing a plan genuinely does not include.
================================================================================ */
.pr-grid{align-items:stretch}
.plan{
display:flex;flex-direction:column;
padding:clamp(1.5rem,2.4vw,1.9rem) clamp(1.25rem,2vw,1.6rem) clamp(1.4rem,2.2vw,1.75rem);
overflow:hidden;
}
/* ---- the price block ---------------------------------------------------- */
.plan-head{display:flex;flex-direction:column}
.plan-name{
font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;
font-weight:700;color:var(--text-3);margin-bottom:.5rem;
}
.plan-price{
font-size:clamp(2.5rem,1.9rem + 1.9vw,3.35rem);
font-weight:800;letter-spacing:-.05em;line-height:.95;color:var(--text);
font-variant-numeric:tabular-nums;
}
.plan-price .cur{
font-size:.42em;font-weight:700;vertical-align:.62em;margin-right:.08em;color:var(--text-3);
}
.plan-rate{
display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;
min-height:0;margin-top:.6rem;
font-size:var(--fs-sm);font-weight:700;color:var(--accent);
}
.plan-save{
font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:var(--accent-deep);background:var(--accent-tint);
border:1px solid var(--accent-edge);border-radius:999px;padding:.2rem .5rem;
margin-top:0;
}
.plan-note{
margin-top:.55rem;font-size:var(--fs-xs);color:var(--text-3);
min-height:2.8em;flex:none;
}
/* ---- the feature list, with a hairline either side ---------------------- */
.plan-feats{
display:flex;flex-direction:column;gap:.6rem;
flex:1;
margin:clamp(1.05rem,1.8vw,1.3rem) 0;
padding:clamp(1.05rem,1.8vw,1.3rem) 0;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
list-style:none;
}
.plan-feats li{
display:flex;align-items:flex-start;gap:.6rem;
font-size:var(--fs-sm);line-height:1.4;color:var(--text-2);
min-width:0;
}
.plan-feats li > span:last-child{min-width:0;overflow-wrap:anywhere}
.pf-mark{
display:grid;place-items:center;flex:none;
width:20px;height:20px;margin-top:.05em;border-radius:50%;
}
.pf-mark svg{
width:12px;height:12px;fill:none;stroke-width:2.6;
stroke-linecap:round;stroke-linejoin:round;display:block;
}
.plan-feats .is-in .pf-mark{background:var(--accent-tint)}
.plan-feats .is-in .pf-mark svg{stroke:var(--accent)}
.plan-feats .is-out{color:var(--text-3)}
.plan-feats .is-out .pf-mark{background:var(--blue-100)}
.plan-feats .is-out .pf-mark svg{stroke:var(--ink-500);stroke-width:2.3}
/* ---- the action --------------------------------------------------------- */
.plan-foot{display:flex;flex-direction:column;gap:.55rem}
.plan-foot .btn{border-radius:999px;padding-block:.85rem;font-weight:800}
.plan-alt{
display:block;text-align:center;
font-size:var(--fs-xs);font-weight:600;color:var(--text-3);
text-decoration:underline;text-underline-offset:3px;margin-top:0;
}
.plan-alt:hover{color:var(--accent)}
/* ---- the featured plan --------------------------------------------------
It already sits proud of the row and carries the accent border; the list
inside it takes the accent hairlines too so the whole card reads as one
object rather than a white card with a coloured edge. */
.plan-featured .plan-feats{border-color:var(--accent-edge)}
.plan-featured .plan-name{color:var(--accent-deep)}
.plan-flag{
top:0;right:clamp(1.25rem,2vw,1.6rem);
border-radius:0 0 10px 10px;padding:.32rem .75rem;
}
/* ---- responsive ---------------------------------------------------------
Four across only while a card can hold the price and a full-width button
without the list wrapping oddly; then two, then one. The lifted featured
card levels off as soon as the row breaks, or it would float mid-column. */
@media (max-width:1080px){
.price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.plan-featured,.plan-featured:hover{transform:none}
}@media (max-width:620px){
.price-grid{grid-template-columns:minmax(0,1fr)}
.plan-note{min-height:0}
.plan-price{font-size:2.6rem}
}@media (prefers-reduced-motion:reduce){
.plan,.plan:hover{transition:none}
}
/* ---- 18.1 one baseline for the four heads ------------------------------
The savings badge sits beside the monthly rate on a wide card and wraps
below it on a narrow one, and the first plan has no badge at all, so the
four feature lists started at four different heights. The rate row reserves
both lines on every card, which puts the hairlines — and therefore the
lists and the buttons — on one line across the row. */
.plan-rate{min-height:3.3em;align-content:flex-start}@media (max-width:620px){
.plan-rate{min-height:0}
}
/* ================================================================================
19. THE BRAND LOGO
================================================================================
The supplied file is square (1254x1254) with a transparent background, and the
artwork inside it — the set and the wordmark stacked — occupies 1046x807 of
that, so roughly a fifth of the box is empty above and below. The whole file is
displayed, unaltered and undistorted; the box is simply sized so the artwork
itself reads at the right size against the navigation, and the transparent
margins fall outside the bar where nothing is drawn.
================================================================================ */
.brand{gap:0}
.brand-logo{
display:block;
width:auto;
height:86px; /* artwork inside stands 55px tall */
max-width:100%;
object-fit:contain; /* belt and braces: never distorts, whatever the box */
margin-block:-8px; /* the transparent margin, not the artwork */
}
.footer-brand .brand-logo{height:96px;margin-block:-10px;margin-inline-start:-6px}@media (max-width:900px){
.brand-logo{height:76px;margin-block:-6px}
}@media (max-width:420px){
.brand-logo{height:64px;margin-block:-5px}
}
/* ---- 19.1 the bar is sized to the logo, not the other way round ---------
The supplied mark stacks the set above the wordmark, so at a 76px bar the
wordmark came out under ten pixels and could not be read. The bar takes the
height the artwork needs; every rule that depended on 76px now reads the
token, so the mobile panel, the sticky FAQ heading and the anchor offsets
all follow it. */
:root{--header-h:100px}@media (max-width:900px){ :root{--header-h:84px} }@media (max-width:420px){ :root{--header-h:72px} }
.brand-logo{height:118px;margin-block:-14px}@media (max-width:900px){ .brand-logo{height:100px;margin-block:-12px} }@media (max-width:420px){ .brand-logo{height:86px;margin-block:-10px} }
.footer-brand .brand-logo{height:124px;margin-block:-16px;margin-inline-start:-8px}
/* ================================================================================
20. THE ARTICLE RAIL
================================================================================
Article pages align their reading column with the masthead, which is
deliberate — but on a wide screen that left a third of the viewport empty on
the right. The rail fills that space with something useful rather than
changing the alignment: a contents list for a long guide, and, where the
article already links somewhere the related grid does not cover, a short
pointer to it.
The numbers fit inside the existing measure: 54rem of text + a 3rem gutter +
15rem of rail is 1152px, against a 1180px wrap. Nothing is squeezed and the
text column keeps its width exactly.
Below 1220px the rail is display:none and the grid returns to one column, so
tablet and phone layouts are untouched. The markup is built by script and the
list is plain anchors, so keyboard and screen-reader behaviour is the browser
default. Nothing here changes the article body.
================================================================================ */
.doc-rail{display:none}
@media (min-width:1220px){
.doc .wrap-doc{
grid-template-columns:minmax(0,var(--col-doc)) 15rem;
column-gap:clamp(2rem,3vw,3rem);
}
.doc .wrap-doc > :not(.doc-rail){grid-column:1}
.doc-rail{
display:block;
grid-column:2;
grid-row:1 / -1;
align-self:start;
position:sticky;
top:calc(var(--header-h) + 1.25rem);
max-height:calc(100dvh - var(--header-h) - 2.5rem);
overflow-y:auto;
overscroll-behavior:contain;
padding-block:.25rem;
/* the cover image is the first thing worth reading beside, so the rail
starts level with the top of the article rather than the breadcrumb */
margin-top:clamp(4rem,9vw,7rem);
}
}
.rail-title{
font-size:var(--fs-2xs);
letter-spacing:.12em;
text-transform:uppercase;
font-weight:700;
color:var(--text-3);
margin-bottom:.7rem;
}
.rail-list{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.rail-list li{margin:0}
.rail-list a{
display:block;
padding:.42rem 0 .42rem .85rem;
margin-left:-1px;
border-left:2px solid transparent;
font-size:var(--fs-xs);
line-height:1.4;
color:var(--text-3);
text-decoration:none;
transition:color .15s ease,border-color .15s ease;
}
.rail-list a:hover{color:var(--accent);border-left-color:var(--accent-edge)}
.rail-list a[aria-current="true"]{
color:var(--accent-deep);
font-weight:600;
border-left-color:var(--accent);
}
.rail-more{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.rail-more a{
display:block;
font-size:var(--fs-xs);
line-height:1.45;
color:var(--text-2);
text-decoration:none;
padding-block:.32rem;
}
.rail-more a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){
.rail-list a{transition:none}
}
/* The three hero trust labels are short enough to sit on one line, but the
grid gives each an equal third of the hero column, which forced "Setup help
included" and "Support over WhatsApp" to break mid-phrase. Below 600px the
grid is already a single column, so this is safe at every width — checked
from 320px to 1440px with no overflow and no clipping. */
.hero-trust .ht-txt b{white-space:nowrap}
/* ================================================================================
21. ACCENT PRESENCE
================================================================================
The palette was already right; the accent simply was not being spent where it
would do the most work. An earlier layer flattened every body link to ink and
moved the blue to :hover, which is the wrong way round — a link should be
recognisable before you point at it, not after. Restoring that one convention
puts the brand colour on roughly a dozen touchpoints per article without
adding a single blue area to the page.
Nothing here changes a background, a heading or body copy. Every value is
taken from the existing ramp, and every pairing clears WCAG AA on each
surface it can land on:
accent #0070b5 5.27:1 on white 4.51:1 on blue-100
accent-hover#005897 7.39:1 on white
accent-deep #004272 10.38:1 on white 9.53:1 on the footer ground
Hover goes darker rather than lighter, so the state change adds contrast
instead of spending it.
================================================================================ */
/* ---- links carry the colour at rest, not on hover ---------------------- */
.prose-block a,
.legal-body a,
.faq-a a,
.table-wrap a,
.price-foot a,
.crumbs a,
.byline a{color:var(--accent)}
.prose-block a:hover,
.legal-body a:hover,
.faq-a a:hover,
.table-wrap a:hover,
.price-foot a:hover,
.crumbs a:hover,
.byline a:hover{color:var(--accent-hover);text-decoration-color:var(--accent-hover)}
/* cards in prose are whole-card links: the title should not read as body copy
while the card is being pointed at */
.prose-block .related-card:hover .rc-title,
.prose-block .related-card:focus-visible .rc-title{color:var(--accent)}
/* ---- small highlights that were carrying no colour at all -------------- */
.plan-name{color:var(--accent-deep)}
.faq-item summary i{color:var(--accent)}
.footer-col h2{color:var(--accent-deep)}
/* ================================================================================
SmartSG IPTV — DARK COLOUR SYSTEM
Single source of truth. Appended last, so this block supersedes every earlier
:root declaration in this file (there are ten of them, layered from successive
passes). Change colour here and nowhere else.
Direction: deep navy grounds, a vivid cyan-to-blue accent, white headings.
Contrast, measured (WCAG 2.1, sRGB):
white on bg / surface 19.2:1 / 16.4:1 AAA
--text-2 on bg / surface 12.8:1 / 10.9:1 AAA
--text-3 on bg / surface 8.0:1 / 6.8:1 AAA
--accent as text on surface 7.1:1 AA
--on-accent on --accent fill 8.3:1 AA
--on-accent on --accent-hover 10.6:1 AA
--on-accent on WhatsApp green 9.7:1 AA
Every accent that can carry text passes at 4.5:1 or better on every ground it
is used on, and every accent used as a fill passes with --on-accent on top.
================================================================================ */
:root{
color-scheme:dark;
/* ---- the ramp -------------------------------------------------------------
000-300 are grounds and borders, darkest first. 400-800 are the live accent
tones. 850-950 stay deep navy: they paint the television screens in the
hero and category art, which were always dark and must remain so. ---- */
--blue-000:#050f1c; /* page ground */
--blue-025:#081527; /* raised ground / subtle hover */
--blue-050:#0b1d33; /* alternating section band */
--blue-100:#0d2038; /* card surface */
--blue-200:#143049; /* raised surface, panel edge */
--blue-300:#1e4260; /* control edge, stronger divider */
--blue-400:#38d0ff; /* sky — the brand light */
--blue-500:#2eb4ff; /* azure — the working accent */
--blue-600:#0d9bfa; /* deeper azure */
--blue-700:#0b7fe0;
--blue-800:#0a66b8;
--blue-850:#0a2137; /* screen surface */
--blue-900:#071b2c; /* screen ground */
--blue-950:#030b14; /* deepest */
/* ---- ink ramp, inverted for a dark ground --------------------------------
Same role names as before so the component layers keep resolving, but the
lightness runs the other way: 900 is now the brightest, not the darkest. */
--ink-900:#ffffff; /* headings */
--ink-700:#c3d5e6; /* body */
--ink-500:#93aabf; /* meta */
--ink-300:#93aabf; /* meta on screens */
--ink-200:#c3d5e6; /* body on screens */
/* ---- surfaces ---- */
--bg:var(--blue-000);
--bg-alt:var(--blue-050);
--surface:var(--blue-100);
--surface-2:var(--blue-200);
--panel:var(--surface);
--panel-2:var(--surface-2);
/* ---- lines: on a dark ground separation comes from light, not from a
darker hairline, so these are white alphas rather than ramp steps ---- */
--line:rgba(255,255,255,.09);
--line-2:rgba(255,255,255,.14);
--line-3:rgba(56,208,255,.34);
--line-str:var(--line-2);
/* ---- text ---- */
--text:#ffffff;
--text-2:#c3d5e6;
--text-3:#93aabf;
--muted:var(--text-2);
--dim:var(--text-3);
/* ---- accent -------------------------------------------------------------
--accent has to work in both directions: it is set as a text colour and as
a fill in roughly equal measure across the component layers. #2eb4ff is the
brightest tone that still passes with dark ink on top of it, which is why
it is the working accent and the brighter cyan is kept for hover. ---- */
--sky:var(--blue-400);
--accent:var(--blue-500);
--accent-hover:var(--blue-400);
--accent-deep:var(--blue-600);
--accent-soft:rgba(56,208,255,.14);
--on-accent:#04101d;
--accent-faint:rgba(56,208,255,.10);
--accent-tint:rgba(56,208,255,.18);
--accent-edge:rgba(56,208,255,.26);
--accent-edge-2:rgba(56,208,255,.48);
--line-accent:var(--accent-edge-2);
--accent-glow:rgba(56,208,255,.45);
--grad:linear-gradient(135deg,var(--blue-400) 0%,var(--blue-500) 100%);
/* ---- legacy aliases: the older component layers still call these ---- */
--lime:var(--accent);
--lime-hover:var(--accent-hover);
--lime-soft:var(--accent-soft);
--lime-tint:var(--accent-tint);
--lime-deep:var(--accent-deep);
--on-lime:var(--on-accent);
--lime-lt:var(--accent-hover);
--lime-pale:var(--accent-soft);
/* ---- WhatsApp keeps its own brand green -----------------------------------
An earlier pass had aliased these to the blue accent, which left the chat
button and the buy button the same colour. Green is restored so the two
actions stay tellable apart. White fails on #25D366 (2.0:1), so the label
is ink. ---- */
--wa:#25D366;
--wa-deep:#1DA851;
--wa-tint:rgba(37,211,102,.14);
--wa-edge:rgba(37,211,102,.42);
--on-wa:#04101d;
/* ---- depth: on a dark ground shadow reads as black, and the accent glow
does the lifting that a drop shadow does on white ---- */
--sh-1:0 1px 2px rgba(0,0,0,.50);
--sh-2:0 2px 6px rgba(0,0,0,.45),0 22px 44px -20px rgba(0,0,0,.75);
--sh-3:0 3px 8px rgba(0,0,0,.50),0 40px 70px -32px rgba(0,0,0,.82);
--sh-accent:0 1px 2px rgba(0,0,0,.50),0 14px 34px -12px rgba(46,180,255,.45);
/* ---- surface sheens, re-cut for dark ---- */
--edge-light:linear-gradient(90deg,
transparent 0%,
rgba(56,208,255,.30) 18%,
rgba(56,208,255,.60) 50%,
rgba(56,208,255,.30) 82%,
transparent 100%);
--face-light:linear-gradient(180deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,0) 42%);
}
/* ---- chrome: the header and footer had white backgrounds baked in, not
tokens, so they are restated here rather than left behind ---- */
.site-header{background:rgba(5,15,28,.82)}
.site-header.stuck{
background:rgba(5,15,28,.92);
border-bottom:1px solid var(--line);
box-shadow:0 1px 0 rgba(255,255,255,.05);
}
.site-footer{background:var(--bg-alt);border-top:1px solid var(--line)}
/* ---- WhatsApp components: green ground, ink label ---- */
.wa-fab{background:var(--wa);color:var(--on-wa)}
.wa-fab:hover{background:var(--wa-deep);color:var(--on-wa)}
.wa-fab:focus-visible{outline:2px solid #fff;outline-offset:3px}
.wa-nav{color:var(--wa);background:var(--wa-tint);border-color:var(--wa-edge)}
.wa-nav:hover{color:var(--wa);background:var(--wa-tint);border-color:var(--wa-edge)}
.wa-ico{color:var(--wa)}
.mbar-wa{color:var(--wa)}
/* ---- selection ---- */
::selection{background:rgba(56,208,255,.30);color:#fff}
/* ================================================================================
Brand lockup geometry
The supplied artwork changed shape: the old mark stacked the set above the
wordmark and was close to square, so the bar was grown to 100px to keep the
wordmark legible. The new lockup is horizontal at 3.37:1, so it reads at a
fraction of that height and the bar comes back down with it.
================================================================================ */
:root{--header-h:78px}
.brand-logo{height:46px;width:auto;margin-block:0;object-fit:contain}
.footer-brand .brand-logo{height:54px;margin-block:0;margin-inline-start:0}
@media (max-width:900px){
:root{--header-h:68px}
.brand-logo{height:40px;margin-block:0}
.footer-brand .brand-logo{height:48px}
}
@media (max-width:420px){
:root{--header-h:60px}
.brand-logo{height:34px;margin-block:0}
.footer-brand .brand-logo{height:42px}
}
/* ================================================================================
Dark-ground corrections
A handful of surfaces were painted with an opaque white rather than a token,
so they did not follow the system across. Restated here against the ramp.
================================================================================ */
/* the mobile action bar */
.mbar{
background:rgba(5,15,28,.94);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
border-top:1px solid var(--line);
}
.mbar-btn{color:var(--text)}
.mbar-txt i{color:var(--text-3)}
/* the cards floating over the hero artwork */
.hero-visual .float-card{
background:rgba(13,32,56,.92);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
border:1px solid var(--line-2);
box-shadow:0 18px 38px -18px rgba(0,0,0,.75);
color:var(--text);
}
.hero-visual .float-card b{color:var(--accent)}
.hero-visual .float-card span{color:var(--text-3)}
/* the chips pinned to the feature artwork */
.wf-chip{
background:rgba(13,32,56,.92);
border:1px solid var(--line-2);
box-shadow:0 12px 28px -14px rgba(0,0,0,.72);
color:var(--text);
}
.wf-chip b{color:var(--text)}
.wf-chip span,.wf-chip i{color:var(--text-3)}
/* ambient glows re-struck on the new cyan */
.hero-glow{background:radial-gradient(46% 46% at 70% 30%,rgba(56,208,255,.20),transparent 70%)}
/* ================================================================================
Homepage hero visual — the supplied photograph
The previous artwork was drawn on a pale ground, so it was faded into a white
page with a vertical mask and a pale-blue wash. The new image is a dark
photograph that carries its own frame, so:
- the mask is lifted; it was fading the top and bottom of the picture out
- the wash is re-struck as a cyan glow that belongs on the dark ground
- the frame gets a hairline and a radius so it reads as a panel, not a
rectangle pasted onto the section
Aspect ratio is declared to the image's true 1407x1118 so the box is reserved
before the file lands and nothing shifts.
================================================================================ */
.hero-shot img{
aspect-ratio:1407/1118;
-webkit-mask-image:none;
mask-image:none;
border-radius:var(--r-lg);
border:1px solid var(--line-2);
box-shadow:0 26px 64px -30px rgba(0,0,0,.88);
}
.hero-shot::before{
inset:-14% -11% -16% -11%;
background:radial-gradient(58% 58% at 50% 46%,
rgba(56,208,255,.20) 0%,
rgba(56,208,255,.09) 46%,
rgba(56,208,255,0) 76%);
}
@media (min-width:900px){
/* the old artwork was pulled into the gutter to look larger; a framed
photograph should stop at the container edge instead */
.hero-shot{margin-right:0}
}
/* ================================================================================
#showcase — the category cards, restyled to the supplied reference
Presentation only. The markup, the h2, the six card descriptions and all six
internal links are untouched, so the section keeps its copy, its crawlable
text and its accessibility while taking on the look of the reference.
The shadows below replace values that were still tuned for a white page
(rgba(2,27,43,...) reads as nothing on a dark ground).
Contrast, measured: body copy 9.7:1 on the card, white arrow 5.9:1 on its
button, card panel 1.32:1 against the section ground so it reads as a plane.
================================================================================ */
/* ambient light behind the section, centred as in the reference */
.shx-amb{
height:560px;
background:
radial-gradient(46% 54% at 50% 0%,rgba(56,208,255,.15),transparent 72%),
radial-gradient(30% 40% at 10% 16%,rgba(46,180,255,.10),transparent 74%);
}
/* the photograph sits on the card's own ground */
.cat-shot{
background:var(--blue-200);
box-shadow:none;
}
/* one cohesive panel: a soft vertical lift, a blue hairline, black depth */
.cat-body{
background:linear-gradient(180deg,#102a45 0%,#0b1d33 62%);
border:1px solid rgba(86,178,236,.22);
box-shadow:0 18px 38px -22px rgba(0,0,0,.85);
}
/* the badge across the seam */
.cat-ico{
background:linear-gradient(180deg,#143a5c 0%,#0e2742 100%);
border-radius:15px;
box-shadow:0 10px 20px -10px rgba(0,0,0,.80),0 0 0 1px rgba(86,178,236,.28);
}
.cat-ico svg{fill:var(--accent-hover)}
.cat-name{color:var(--text)}
.cat-desc{color:var(--text-2)}
/* the arrow reads as a filled action, as in the reference */
.cat-go{
background:linear-gradient(180deg,#2a8fd8 0%,#1567ad 100%);
box-shadow:0 8px 18px -9px rgba(21,103,173,.85);
}
.cat-go svg{stroke:#ffffff;stroke-width:2.3}
/* hover: the plate lifts and the edge picks up the accent */
.cat-link:hover .cat-body{
border-color:rgba(86,178,236,.55);
box-shadow:0 24px 48px -24px rgba(0,0,0,.90),0 0 0 1px rgba(56,208,255,.18);
}
.cat-link:hover .cat-go{
background:linear-gradient(180deg,#3aa3ee 0%,#1a76c2 100%);
transform:translateX(2px);
}
.cat-link:hover .cat-go svg{stroke:#ffffff}
.cat-link:hover .cat-ico{box-shadow:0 12px 22px -10px rgba(0,0,0,.85),0 0 0 1px rgba(56,208,255,.45)}
/* ================================================================================
HERO — rebuilt to the supplied reference (imageg04.webp)
Presentation only, plus the platform row the reference calls for. Every
existing string, button, link and the h1 is kept; the running order is set
with flex `order` so nothing had to be moved in the markup.
Reference order: badge -> h1 -> sub -> feature row -> buttons -> meta line
DOM order: badge -> h1 -> sub -> buttons -> meta line -> feature row
================================================================================ */
.hero-copy{display:flex;flex-direction:column;align-items:flex-start}
.hero-copy > .eyebrow{order:1}
.hero-copy > h1{order:2}
.hero-copy > .lede{order:3}
.hero-copy > .hero-trust{order:4}
.hero-copy > .hero-cta{order:5}
.hero-copy > .hero-price{order:6}
/* --- the badge ---------------------------------------------------------- */
.hero .eyebrow{
color:var(--accent-hover);
background:rgba(56,208,255,.10);
border:1px solid rgba(56,208,255,.34);
font-size:.72rem;letter-spacing:.15em;
padding:.5rem 1rem;
}
.hero .eyebrow .dot{background:var(--accent-hover);box-shadow:0 0 10px var(--accent-hover)}
/* --- the headline: second phrase in cyan, as in the reference ----------- */
.hero-copy h1{margin-bottom:.2rem}
.hero-copy h1 .h1-lead{display:block;color:#fff}
.hero-copy h1 .grad{
display:block;
background:linear-gradient(100deg,#5fdcff 0%,#2eb4ff 62%);
-webkit-background-clip:text;background-clip:text;
color:transparent;
}
.hero-copy .lede{margin-top:.9rem;max-width:56ch;color:#b9cbdc}
/* --- the feature row: bare cyan glyph over a two-line label ------------- */
.hero-trust{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:1.4rem 1.6rem;
margin-top:2.1rem;width:100%;max-width:600px;
}
.hero-trust li{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem}
.hero-trust .ht-ico{
width:auto;height:auto;background:none;border:0;border-radius:0;box-shadow:none;
}
.hero-trust .ht-ico svg{
width:26px;height:26px;
stroke:var(--accent-hover);stroke-width:1.8;fill:none;
}
.hero-trust .ht-txt b{font-size:1rem;font-weight:800;color:#fff;white-space:normal;line-height:1.25}
.hero-trust .ht-txt span{font-size:.845rem;color:#93aabf;font-weight:500;line-height:1.35}
/* --- the buttons -------------------------------------------------------- */
.hero .hero-cta{margin-top:2.3rem;gap:.9rem;flex-wrap:wrap}
.hero .hero-cta .btn{flex:0 0 auto}
.hero .btn-primary{
background:linear-gradient(100deg,#3ec8ff 0%,#1b8fe6 100%);
border:0;color:#04101d!important;
padding:1rem 1.9rem;font-size:1.02rem;font-weight:800;
box-shadow:0 14px 32px -12px rgba(46,180,255,.62);
}
.hero .btn-primary:hover{
background:linear-gradient(100deg,#5fdcff 0%,#2ea0f2 100%);
color:#04101d!important;transform:translateY(-2px);
box-shadow:0 18px 40px -12px rgba(46,180,255,.75);
}
/* the second action is outlined in the reference; the WhatsApp glyph keeps
its own green so the chat route is still tellable from the paid one */
.hero .btn-wa{
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.22);
color:#fff;
padding:1rem 1.7rem;font-size:1.02rem;font-weight:700;
}
.hero .btn-wa:hover{
background:rgba(255,255,255,.08);
border-color:rgba(56,208,255,.55);
color:#fff;transform:translateY(-2px);
}
.hero .btn-wa .wa-ico{color:var(--wa)}
/* --- the meta line under the buttons ------------------------------------ */
.hero .hero-price{
margin-top:1.4rem;color:#93aabf;font-size:.95rem;font-weight:600;flex-wrap:wrap;
}
.hero .hero-price b{color:#fff}
/* --- ambience: the room light of the reference --------------------------- */
.hero-glow{
background:
radial-gradient(42% 46% at 72% 34%,rgba(56,208,255,.26),transparent 70%),
radial-gradient(34% 40% at 14% 8%,rgba(46,180,255,.12),transparent 72%);
}
/* --- the visual --------------------------------------------------------- */
.hero-shot img{aspect-ratio:902/727}
/* ================================================================================
The platform row beneath the hero
Built from the six device pages the site already has, so every tile is a real
internal link rather than an unsupported platform claim.
================================================================================ */
.hero-platforms{
width:100%;max-width:var(--max);
margin:clamp(2.5rem,5vw,4rem) auto 0;
padding-inline:var(--pad);
}
.hp-list{
display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
background:linear-gradient(180deg,rgba(16,42,69,.72) 0%,rgba(11,29,51,.72) 100%);
border:1px solid rgba(86,178,236,.20);
border-radius:20px;
box-shadow:0 20px 44px -26px rgba(0,0,0,.85);
overflow:hidden;
}
.hp-item{display:flex;position:relative}
.hp-item + .hp-item::before{
content:"";position:absolute;left:0;top:22%;bottom:22%;
width:1px;background:rgba(255,255,255,.10);
}
.hp-item a{
display:flex;align-items:center;gap:.75rem;
width:100%;padding:1.15rem 1rem;
color:inherit;text-decoration:none;
transition:background-color var(--dur-2) var(--ease);
}
.hp-item a:hover{background:rgba(56,208,255,.07)}
.hp-item a:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:12px}
.hp-ico{flex:none;display:grid;place-items:center;width:34px;height:34px}
.hp-ico svg{
width:26px;height:26px;fill:none;
stroke:var(--accent-hover);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.hp-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.hp-txt b{font-size:.94rem;font-weight:800;color:#fff;white-space:nowrap}
.hp-txt i{font-size:.775rem;font-style:normal;color:#93aabf;font-weight:500;white-space:nowrap}
/* --- the nav action, as a gradient pill --------------------------------- */
.nav-cta{
background:linear-gradient(100deg,#3ec8ff 0%,#1b8fe6 100%)!important;
border:0!important;color:#04101d!important;font-weight:800;
box-shadow:0 10px 22px -10px rgba(46,180,255,.55);
}
.nav-cta:hover{
background:linear-gradient(100deg,#5fdcff 0%,#2ea0f2 100%)!important;
color:#04101d!important;
}
/* ================================================================================
Responsive — the composition reflows, nothing is hidden
================================================================================ */
@media (max-width:1180px){
.hp-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.hp-item + .hp-item::before{display:none}
.hp-item:not(:nth-child(3n+1))::before{display:block}
.hp-item:nth-child(n+4)::after{
content:"";position:absolute;left:6%;right:6%;top:0;height:1px;
background:rgba(255,255,255,.10);
}
}
@media (max-width:900px){
.hero-copy{align-items:center;text-align:center}
.hero-copy .lede{margin-inline:auto}
.hero-trust{margin-inline:auto}
.hero-trust li{align-items:center;text-align:center}
.hero .hero-cta{justify-content:center}
.hero .hero-price{justify-content:center}
}
@media (max-width:760px){
.hero-trust{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem .6rem}
.hero-trust .ht-txt b{font-size:.85rem}
.hero-trust .ht-txt span{font-size:.74rem}
.hp-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.hp-item + .hp-item::before{display:none}
.hp-item:not(:nth-child(2n+1))::before{display:block}
.hp-item:nth-child(n+3)::after{
content:"";position:absolute;left:6%;right:6%;top:0;height:1px;
background:rgba(255,255,255,.10);
}
.hp-item a{padding:1rem .85rem}
}
@media (max-width:520px){
.hero-trust{grid-template-columns:1fr;gap:.9rem;max-width:320px}
.hero-trust li{flex-direction:row;align-items:center;gap:.7rem;text-align:left}
.hero-trust .ht-ico svg{width:22px;height:22px}
.hero .hero-cta .btn{flex:1 1 100%}
.hp-txt b{font-size:.88rem}
.hp-txt i{font-size:.73rem}
}
/* ================================================================================
HERO — corrections after comparing the render against the reference
1. the h1 ran to six lines at 67px; the reference headline is three. Its own
scale, not the shared display scale, so other pages are untouched.
2. the reference visual is large and frameless and bleeds toward the edge;
the border and radius added for the earlier photograph are dropped here.
3. the feature labels were wrapping mid-phrase, so the block gets more room.
================================================================================ */
.hero-copy h1{
font-size:clamp(2.05rem,1.05rem + 2.55vw,3.35rem);
letter-spacing:-.035em;
line-height:1.06;
}
.hero-copy .lede{font-size:1.0625rem;line-height:1.6;max-width:52ch}
/* the visual: no frame, larger, allowed to run toward the edge */
.hero-shot img{
border:0;
border-radius:18px;
box-shadow:0 30px 70px -34px rgba(0,0,0,.9);
}
.hero-shot::before{
inset:-18% -14% -20% -14%;
background:radial-gradient(56% 56% at 52% 46%,
rgba(56,208,255,.26) 0%,
rgba(56,208,255,.11) 46%,
rgba(56,208,255,0) 78%);
}
@media (min-width:1080px){
.hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);gap:clamp(2rem,3.4vw,3.4rem)}
.hero-shot{margin-right:calc(var(--pad) * -1.35)}
}
/* the three feature items read on one line each at this width */
.hero-trust{max-width:660px;gap:1.35rem 1.35rem}
.hero-trust .ht-txt b{font-size:.95rem}
.hero-trust .ht-txt span{font-size:.815rem}
/* the strip carries the hero's lower edge, so the section needs less below */
.hero{padding-block:clamp(2.25rem,4.6vw,3.6rem) clamp(2.25rem,4.4vw,3.4rem)}
/* the three feature labels are different lengths, so one sits on a single line
and two wrap; giving the label a two-line box lines the sub-labels up */
.hero-trust .ht-txt b{display:block;min-height:2.5em}
.hero-trust li{gap:.5rem}
.hero .hero-price{margin-top:1.2rem}
.hero-platforms{margin-top:clamp(2rem,3.6vw,2.9rem)}
/* the two-line label box is only needed where the three columns are narrow
enough to wrap (the desktop split); below that it just adds a gap */
.hero-trust .ht-txt b{min-height:0}
@media (min-width:901px){
.hero-trust .ht-txt b{min-height:2.5em}
}
/* ================================================================================
HERO — homepage1.webp as the cinematic plate
The supplied file is used exactly as delivered: one ![]()
, no derivatives, no
edits. It is promoted to a full-bleed layer behind the copy, and the parts of
it that carry their own chrome (a navigation strip along the top, a platform
strip along the bottom, a headline down the left) are held outside the frame
by object-fit cropping and covered by the scrim, so nothing on it competes
with the real markup sitting on top.
The ![]()
element is reused rather than swapped for a CSS background so the
alt text, the intrinsic size and the LCP priority hint all survive.
================================================================================ */
.hero{
position:relative;isolation:isolate;overflow:hidden;
padding-block:clamp(3.25rem,7vw,5.5rem) clamp(2.5rem,4.6vw,3.6rem);
min-height:clamp(560px,52vw,660px);
display:flex;flex-direction:column;justify-content:center;
}
/* the plate ---------------------------------------------------------------- */
.hero-visual{
position:absolute;inset:0;z-index:-2;
margin:0;max-width:none;width:auto;
pointer-events:none;
}
.hero-shot{position:absolute;inset:0;margin:0;overflow:hidden}
.hero-shot::before{display:none}
.hero-shot img{
width:100%;height:100%;
aspect-ratio:auto;
object-fit:cover;
/* pushes the baked navigation off the top and the baked platform strip off
the bottom, and holds the television in the right half of the frame */
object-position:68% 46%;
transform:scale(1.16);
transform-origin:72% 48%;
border:0;border-radius:0;box-shadow:none;
-webkit-mask-image:none;mask-image:none;
}
/* the scrim: opaque enough on the left to bury the artwork's own headline,
clearing to nothing over the television on the right ---------------------- */
.hero::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:
linear-gradient(90deg,
rgba(5,15,28,.97) 0%,
rgba(5,15,28,.95) 30%,
rgba(5,15,28,.86) 44%,
rgba(5,15,28,.55) 60%,
rgba(5,15,28,.18) 78%,
rgba(5,15,28,.10) 100%),
linear-gradient(180deg,
rgba(5,15,28,.92) 0%,
rgba(5,15,28,.30) 22%,
rgba(5,15,28,.22) 68%,
rgba(5,15,28,.90) 100%);
}
/* the section's own ambient wash is redundant once the plate is behind it */
.hero-glow{display:none}
/* the copy sits on the scrim ---------------------------------------------- */
.hero-inner{position:relative;z-index:1}
@media (min-width:1080px){
.hero-inner{grid-template-columns:minmax(0,1fr);gap:0}
.hero-shot{margin-right:0}
}
.hero-copy{max-width:640px}
.hero-copy .lede{max-width:46ch}
.hero-trust{max-width:600px}
/* the platform row keeps its panel, now over the plate --------------------- */
.hero-platforms{position:relative;z-index:1}
.hp-list{
background:linear-gradient(180deg,rgba(10,26,45,.82) 0%,rgba(7,20,36,.86) 100%);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
/* ================================================================================
Responsive: the plate stays, the scrim strengthens, nothing is dropped
================================================================================ */
@media (max-width:1079px){
.hero-inner{grid-template-columns:minmax(0,1fr)}
.hero-copy{max-width:none}
}
@media (max-width:900px){
.hero{min-height:clamp(520px,86vw,620px);padding-block:clamp(2.5rem,7vw,3.5rem) clamp(2rem,5vw,3rem)}
.hero-shot img{object-position:64% 42%;transform:scale(1.28);transform-origin:68% 44%}
.hero::before{
background:
linear-gradient(180deg,
rgba(5,15,28,.94) 0%,
rgba(5,15,28,.80) 34%,
rgba(5,15,28,.72) 58%,
rgba(5,15,28,.93) 100%),
linear-gradient(90deg,rgba(5,15,28,.70) 0%,rgba(5,15,28,.40) 60%,rgba(5,15,28,.55) 100%);
}
.hero-copy{align-items:center;text-align:center;margin-inline:auto}
}
@media (max-width:560px){
.hero{min-height:0;padding-block:2.25rem 2rem}
.hero-shot img{object-position:60% 40%;transform:scale(1.5);transform-origin:64% 42%}
.hero::before{
background:linear-gradient(180deg,
rgba(5,15,28,.93) 0%,
rgba(5,15,28,.86) 40%,
rgba(5,15,28,.84) 62%,
rgba(5,15,28,.96) 100%);
}
}
/* ------------------------------------------------------------------------
The plate must be positioned against the section, not against the 1180px
wrap, or it stops short of the viewport edges and the scrim misaligns.
------------------------------------------------------------------------ */
.hero-inner{position:static}
.hero-copy{position:relative;z-index:2}
.hero-platforms{position:relative;z-index:2}
.hero-visual{position:absolute;inset:0;z-index:0}
.hero::before{z-index:1}
/* the artwork carries its own headline, navigation and platform strip, so the
scrim has to bury them outright rather than merely darken them */
.hero::before{
background:
linear-gradient(90deg,
rgba(5,15,28,.995) 0%,
rgba(5,15,28,.99) 34%,
rgba(5,15,28,.94) 46%,
rgba(5,15,28,.62) 60%,
rgba(5,15,28,.22) 76%,
rgba(5,15,28,.12) 100%),
linear-gradient(180deg,
rgba(5,15,28,1) 0%,
rgba(5,15,28,.86) 9%,
rgba(5,15,28,.20) 26%,
rgba(5,15,28,.20) 66%,
rgba(5,15,28,.92) 88%,
rgba(5,15,28,1) 100%);
}
/* ------------------------------------------------------------------------
The scrim belongs inside the figure, directly over the ![]()
, rather than
on the section: as a sibling of the plate it kept losing the paint order.
------------------------------------------------------------------------ */
.hero::before{background:none}
.hero-shot::after{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:
linear-gradient(90deg,
rgba(5,15,28,.985) 0%,
rgba(5,15,28,.97) 32%,
rgba(5,15,28,.90) 45%,
rgba(5,15,28,.58) 60%,
rgba(5,15,28,.20) 78%,
rgba(5,15,28,.10) 100%),
linear-gradient(180deg,
rgba(5,15,28,1) 0%,
rgba(5,15,28,.92) 8%,
rgba(5,15,28,.22) 24%,
rgba(5,15,28,.22) 62%,
rgba(5,15,28,.90) 86%,
rgba(5,15,28,1) 100%);
}
@media (max-width:900px){
.hero-shot::after{
background:
linear-gradient(180deg,
rgba(5,15,28,1) 0%,
rgba(5,15,28,.90) 12%,
rgba(5,15,28,.74) 40%,
rgba(5,15,28,.78) 66%,
rgba(5,15,28,1) 92%),
linear-gradient(90deg,rgba(5,15,28,.72) 0%,rgba(5,15,28,.44) 62%,rgba(5,15,28,.60) 100%);
}
}
/* the artwork headline still ghosted through at the far left, and its TV
sidebar through the middle; the first three stops go fully opaque */
.hero-shot::after{
background:
linear-gradient(90deg,
rgb(5,15,28) 0%,
rgb(5,15,28) 26%,
rgba(5,15,28,.985) 40%,
rgba(5,15,28,.90) 50%,
rgba(5,15,28,.55) 63%,
rgba(5,15,28,.18) 80%,
rgba(5,15,28,.08) 100%),
linear-gradient(180deg,
rgb(5,15,28) 0%,
rgba(5,15,28,.92) 8%,
rgba(5,15,28,.20) 24%,
rgba(5,15,28,.20) 62%,
rgba(5,15,28,.90) 86%,
rgb(5,15,28) 100%);
}
/* ------------------------------------------------------------------------
Below 900px the copy centres across the full width, so there is no crop of
this artwork that keeps its own headline and television UI clear of the
real text. The plate stays - it is what gives the section its depth - but
it drops back to atmosphere behind a heavy scrim (~92% combined), which is
enough to bury the baked lettering while the room colour still reads.
------------------------------------------------------------------------ */
@media (max-width:900px){
.hero-shot img{object-position:34% 58%;transform:scale(1.3);transform-origin:36% 56%}
.hero-shot::after{
background:
linear-gradient(180deg,
rgb(5,15,28) 0%,
rgba(5,15,28,.93) 13%,
rgba(5,15,28,.81) 48%,
rgba(5,15,28,.93) 86%,
rgb(5,15,28) 100%),
linear-gradient(90deg,
rgba(5,15,28,.72) 0%,
rgba(5,15,28,.62) 50%,
rgba(5,15,28,.72) 100%);
}
}
/* the artwork lettering was still legible as ghosting; lift the scrim to ~97%
at its lightest so only the room colour survives */
@media (max-width:900px){
.hero-shot::after{
background:
linear-gradient(180deg,
rgb(5,15,28) 0%,
rgba(5,15,28,.96) 13%,
rgba(5,15,28,.89) 48%,
rgba(5,15,28,.96) 86%,
rgb(5,15,28) 100%),
linear-gradient(90deg,
rgba(5,15,28,.82) 0%,
rgba(5,15,28,.74) 50%,
rgba(5,15,28,.82) 100%);
}
}
/* ------------------------------------------------------------------------
Tablet keeps the reference composition: copy left, television right. That
lets the directional scrim keep doing the work (opaque under the text,
clearing over the set) instead of flooding the whole plate.
------------------------------------------------------------------------ */
@media (min-width:701px) and (max-width:900px){
.hero-copy{align-items:flex-start;text-align:left;margin-inline:0;max-width:62%}
.hero-copy .lede{margin-inline:0;max-width:38ch}
.hero-trust{margin-inline:0;max-width:none}
.hero-trust li{align-items:flex-start;text-align:left}
.hero .hero-cta{justify-content:flex-start}
.hero .hero-price{justify-content:flex-start}
.hero-shot img{object-position:70% 46%;transform:scale(1.2);transform-origin:74% 48%}
.hero-shot::after{
background:
linear-gradient(90deg,
rgb(5,15,28) 0%,
rgb(5,15,28) 40%,
rgba(5,15,28,.97) 54%,
rgba(5,15,28,.72) 68%,
rgba(5,15,28,.28) 84%,
rgba(5,15,28,.14) 100%),
linear-gradient(180deg,
rgb(5,15,28) 0%,
rgba(5,15,28,.90) 10%,
rgba(5,15,28,.24) 28%,
rgba(5,15,28,.24) 62%,
rgba(5,15,28,.90) 88%,
rgb(5,15,28) 100%);
}
}
/* ================================================================================
Blog article rail - pre-existing layout fix (not related to image quality)
.doc-rail asks for grid-row:1/-1, but .wrap-doc declares no explicit rows, so
-1 resolves to line 2 and the rail lands in row 1 alone. Row 1 then grows to
the rail height (~550px) and the breadcrumbs, stretching to fill it, pushed
the article title far down the page on every article at >=1220px.
Spanning many rows lets the height distribute as intended.
================================================================================ */
@media (min-width:1220px){
.doc-rail{grid-row:1 / span 100}
.doc .wrap-doc > .crumbs{align-self:start}
}
/* ================================================================================
BLOG INDEX — featured guide, filter controls and the card grid
Built on the existing tokens, so it inherits the dark ground, the cyan accent
and the card treatment used everywhere else on the site.
================================================================================ */
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.blog-index .doc-head{margin-bottom:clamp(2rem,4vw,3rem)}
/* ---- featured ----------------------------------------------------------- */
.bx-featured{margin:0 0 clamp(2rem,4vw,3rem)}
.bxf-link{
display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
align-items:stretch;gap:0;
background:linear-gradient(180deg,#102a45 0%,#0b1d33 70%);
border:1px solid rgba(86,178,236,.24);
border-radius:var(--r-lg);
overflow:hidden;color:inherit;text-decoration:none;
box-shadow:0 22px 46px -26px rgba(0,0,0,.85);
transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
}
.bxf-link:hover{
transform:translateY(-3px);
border-color:rgba(86,178,236,.55);
box-shadow:0 28px 56px -26px rgba(0,0,0,.9),0 0 0 1px rgba(56,208,255,.16);
}
.bxf-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.bxf-media{position:relative;display:block;min-height:220px;overflow:hidden}
.bxf-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-2) var(--ease)}
.bxf-link:hover .bxf-media img{transform:scale(1.04)}
.bxf-body{display:flex;flex-direction:column;gap:.7rem;padding:clamp(1.4rem,2.6vw,2.2rem)}
.bxf-badge{
display:inline-flex;align-items:center;gap:.55rem;align-self:flex-start;
font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
color:var(--accent-hover);background:rgba(56,208,255,.10);
border:1px solid rgba(56,208,255,.32);border-radius:100px;padding:.4rem .85rem;
}
.bxf-title{
font-size:clamp(1.45rem,1rem + 1.5vw,2.15rem);font-weight:800;
letter-spacing:-.03em;line-height:1.12;color:var(--text);text-wrap:balance;
}
.bxf-desc{color:var(--text-2);font-size:1.02rem;line-height:1.6;max-width:52ch}
.bxf-meta,.bx-meta{
display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
font-size:.85rem;color:var(--text-3);font-variant-numeric:tabular-nums;
}
.bx-dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5;flex:none}
.bxf-go{
display:inline-flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:.4rem;
font-weight:800;color:var(--accent-hover);
}
.bxf-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.bxf-link:hover .bxf-go svg{transform:translateX(3px);transition:transform var(--dur-2) var(--ease)}
/* ---- controls ------------------------------------------------------------ */
.bx-controls{
display:flex;flex-direction:column;gap:1rem;
margin:0 0 1.1rem;
}
.bx-search{position:relative;display:flex;align-items:center}
.bx-search-ico{
position:absolute;left:1rem;display:grid;place-items:center;pointer-events:none;color:var(--text-3);
}
.bx-search-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.bx-search input{
width:100%;font:inherit;font-size:1rem;color:var(--text);
background:rgba(13,32,56,.85);
border:1px solid var(--line-2);border-radius:100px;
padding:.9rem 3rem .9rem 2.9rem;
transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.bx-search input::placeholder{color:var(--text-3)}
.bx-search input:focus{
outline:none;border-color:rgba(56,208,255,.55);
box-shadow:0 0 0 4px rgba(56,208,255,.12);
}
.bx-search input::-webkit-search-cancel-button{display:none}
.bx-clear{
position:absolute;right:.65rem;width:30px;height:30px;flex:none;
display:grid;place-items:center;cursor:pointer;
font-size:1.3rem;line-height:1;color:var(--text-3);
background:rgba(255,255,255,.06);border:0;border-radius:50%;
}
.bx-clear:hover{color:var(--text);background:rgba(255,255,255,.12)}
.bx-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.bx-chip{
display:inline-flex;align-items:center;gap:.5rem;
font:inherit;font-size:.875rem;font-weight:700;letter-spacing:-.01em;
color:var(--text-2);cursor:pointer;
background:rgba(255,255,255,.035);
border:1px solid var(--line-2);border-radius:100px;
padding:.5rem .95rem;
transition:color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}
.bx-chip i{
font-style:normal;font-size:.74rem;font-weight:800;
color:var(--text-3);font-variant-numeric:tabular-nums;
}
.bx-chip:hover{color:var(--text);border-color:rgba(56,208,255,.4)}
.bx-chip.is-on{
color:#04101d;background:linear-gradient(100deg,#3ec8ff 0%,#1b8fe6 100%);
border-color:transparent;
}
.bx-chip.is-on i{color:rgba(4,16,29,.62)}
.bx-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bx-status{margin:0 0 1.6rem;font-size:.88rem;color:var(--text-3)}
/* ---- category jump list -------------------------------------------------- */
.bx-legend{margin:0 0 2rem}
.bx-legend ul{display:flex;flex-wrap:wrap;gap:.45rem .5rem}
.bx-legend li{display:flex}
.bx-legend a{
display:inline-flex;align-items:center;gap:.4rem;
font-size:.82rem;font-weight:600;color:var(--text-3);
border-bottom:1px solid transparent;padding:.15rem 0;
}
.bx-legend a:hover{color:var(--accent-hover);border-bottom-color:currentColor}
.bx-legend span{font-size:.72rem;color:var(--text-3);opacity:.7}
.bx-legend li:not(:last-child)::after{content:"";width:1px;height:12px;background:var(--line-2);margin:0 .5rem;align-self:center}
/* ---- sections and grid --------------------------------------------------- */
.bx-section{margin:0 0 clamp(2.4rem,4.5vw,3.4rem);scroll-margin-top:calc(var(--header-h) + 1rem)}
.bx-sechead{margin:0 0 1.1rem}
.bx-sechead h2{
font-size:clamp(1.2rem,.95rem + .8vw,1.55rem);letter-spacing:-.025em;
color:var(--text);margin:0 0 .3rem;
}
.bx-sechead p{color:var(--text-3);font-size:.95rem;margin:0;max-width:62ch}
.bx-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
gap:clamp(1rem,1.8vw,1.5rem);
}
.bx-card{display:flex}
.bx-link{
display:flex;flex-direction:column;width:100%;
color:inherit;text-decoration:none;
background:linear-gradient(180deg,#102a45 0%,#0b1d33 62%);
border:1px solid rgba(86,178,236,.20);
border-radius:16px;overflow:hidden;
box-shadow:0 14px 32px -22px rgba(0,0,0,.85);
transition:transform var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.bx-link:hover{
transform:translateY(-4px);
border-color:rgba(86,178,236,.55);
box-shadow:0 22px 44px -22px rgba(0,0,0,.9),0 0 0 1px rgba(56,208,255,.16);
}
.bx-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.bx-media{display:block;overflow:hidden;background:var(--blue-200)}
.bx-media img{
display:block;width:100%;height:auto;aspect-ratio:1400/933;object-fit:cover;
transition:transform var(--dur-2) var(--ease);
}
.bx-link:hover .bx-media img{transform:scale(1.045)}
.bx-body{display:flex;flex-direction:column;gap:.5rem;padding:1.05rem 1.1rem 1.15rem;flex:1}
.bx-cat{
font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
color:var(--accent-hover);
}
.bx-title{
font-size:1.02rem;font-weight:800;letter-spacing:-.02em;line-height:1.28;
color:var(--text);text-wrap:balance;
}
.bx-desc{font-size:.875rem;line-height:1.5;color:var(--text-2);flex:1}
.bx-meta{margin-top:.15rem;font-size:.78rem}
/* ---- empty state --------------------------------------------------------- */
.bx-empty{
margin:0 0 2rem;padding:1.6rem;text-align:center;
color:var(--text-2);background:var(--surface);
border:1px dashed var(--line-2);border-radius:var(--radius,16px);
}
.bx-reset{
font:inherit;font-weight:800;cursor:pointer;
color:var(--accent-hover);background:none;border:0;
text-decoration:underline;text-underline-offset:3px;
}
/* ---- responsive ---------------------------------------------------------- */
@media (max-width:860px){
.bxf-link{grid-template-columns:minmax(0,1fr)}
.bxf-media{min-height:0;aspect-ratio:1400/933}
}
@media (max-width:640px){
.bx-grid{grid-template-columns:minmax(0,1fr)}
.bx-chips{gap:.4rem}
.bx-chip{font-size:.82rem;padding:.45rem .8rem}
.bx-legend{display:none}
}
@media (prefers-reduced-motion:reduce){
.bxf-link,.bx-link,.bx-media img,.bxf-media img,.bxf-go svg{transition:none}
.bxf-link:hover,.bx-link:hover{transform:none}
.bx-link:hover .bx-media img,.bxf-link:hover .bxf-media img{transform:none}
}
/* the featured media is a tall box against a 3:2 cover, so it crops the sides.
Anchoring right keeps the artwork+s own bottom-left caption out of frame
instead of slicing through it; the badge already names the category. */
@media (min-width:861px){
.bxf-media img{object-position:right center}
}
/* the jump list ran its counts straight into the labels */
.bx-legend li{align-items:center;gap:.35rem}
.bx-legend a{gap:.35rem}
.bx-legend span{
font-size:.68rem;font-weight:700;color:var(--text-3);opacity:.75;
background:rgba(255,255,255,.06);border-radius:100px;padding:.05rem .4rem;
}
/* author display rules outrank the UA [hidden] rule, so filtered cards, empty
sections and the clear button stayed on screen. Scope it to the blog index. */
.blog-index [hidden]{display:none!important}
/* ================================================================================
VISUAL AUDIT FIXES
Five issues from the visual review. Presentation only — no content, SEO,
URL, schema or navigation changes.
================================================================================ */
/* --------------------------------------------------------------------------
1. CRITICAL — the "Why SmartSG IPTV" frame now carries homepage1.webp.
That artwork is 2:1 and carries its own navigation strip along the top and
platform strip along the bottom, while this frame is 805:681. Cover alone
would scale by height and show both strips, so the picture is zoomed and
focused on the television instead. transform-origin matches object-position
so the zoom keeps that focal point. The frame already clips (overflow:hidden).
-------------------------------------------------------------------------- */
.wf-shot img{
object-fit:cover;
object-position:86% 44%;
transform:scale(1.34);
transform-origin:86% 44%;
}
/* --------------------------------------------------------------------------
2. IMPORTANT — mobile menu overlay.
The open menu covered only the top of the viewport, left the page scrolling
behind it, exposed a live hero CTA beneath it and sat alongside the fixed
bottom bar. js/main.js now also marks so these can apply.
-------------------------------------------------------------------------- */
body.nav-open{overflow:hidden}
/* the backdrop sits under the header (z-index 100) and over the page, and
swallows taps so nothing underneath can be hit by accident */
body.nav-open::before{
content:"";
position:fixed;inset:0;z-index:90;
background:rgba(3,10,20,.74);
-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
/* the bottom bar would otherwise compete with the menu's own actions */
body.nav-open .mbar{display:none}
@media (prefers-reduced-motion:reduce){
body.nav-open::before{-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* --------------------------------------------------------------------------
3. IMPORTANT — pricing rows.
.plan-rate is a wrapping flex row. On the 3-month card the longer
"= EUR 11.67 per month" pushes its Save badge onto a second line, making
that card taller than its neighbours from the badge downwards. Reserving
two lines on every card keeps the four in step whether the badge wraps or
not. Prices and discount values are untouched.
-------------------------------------------------------------------------- */
.plan-rate{min-height:3.55em;align-content:flex-start}
@media (max-width:900px){
/* stacked cards are read one at a time, so the reservation is not needed */
.plan-rate{min-height:0}
}
/* --------------------------------------------------------------------------
4 + 5. COSMETIC — one eyebrow treatment everywhere.
The component rendered four ways on the homepage alone: a tinted box in the
hero, a 2px underline on four section heads, a 2px left bar on two more,
and background-plus-left-bar in the "why" block. It is now the same rounded
tinted chip in every position, which also restores the pill radius the hero
eyebrow had lost and matches the blog category chips.
-------------------------------------------------------------------------- */
.eyebrow,
.hero .eyebrow,
.sec-head .eyebrow,
.sec-head-center .eyebrow,
.wf-intro .eyebrow,
.pix-head .eyebrow{
display:inline-flex;align-items:center;gap:.55rem;
padding:.4rem .9rem;
border:1px solid rgba(56,208,255,.34);
border-radius:100px;
background:rgba(56,208,255,.10);
color:var(--accent-hover);
font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
margin-bottom:1.15rem;
width:auto;
}
.eyebrow .dot{
width:6px;height:6px;border-radius:50%;flex:none;
background:var(--accent-hover);box-shadow:0 0 8px var(--accent-hover);
}
.sec-head-center .eyebrow{margin-inline:auto}
/* --------------------------------------------------------------------------
5. COSMETIC — hero feature labels.
The label was given a two-line box so wrapped and unwrapped labels lined up.
Since the hero became a single column the labels no longer wrap at desktop
widths, so that box reserved ~19px of dead space under every label and
detached it from its sub-line. The reservation is kept only where the text
genuinely still wraps.
-------------------------------------------------------------------------- */
@media (min-width:901px){
/* Measured at 901, 920, 950, 1000, 1024, 1100, 1200 and 1440: all three
labels stay on a single line at every one of those widths, so nothing is
reserved above this breakpoint. Below 901 the cards stack and the base
rule already leaves the labels to size themselves. */
.hero-trust .ht-txt b{min-height:0}
}
@media (min-width:521px) and (max-width:900px){
/* Here the three items are still side by side but the column is narrow
enough that the longer labels genuinely wrap (measured 19/38/38 at 880
and 560), which left the sub-lines out of step with each other. The
two-line box is kept for this range only. Below 521 the items stack one
per row, so uneven labels cannot misalign anything. */
.hero-trust .ht-txt b{min-height:2.5em}
}
/* ------------------------------------------------------------------------
Audit fix refinements, measured rather than assumed.
------------------------------------------------------------------------ */
/* 2. is the scrolling element, so the lock has to sit there too */
html.nav-open{overflow:hidden}
/* 3. the plan note still differed by one line: three cards wrap to two lines
while the shortest sits on one, so the reservation is raised to a real
two-line box. Measured: two lines render at 43px, one at 21.5px. */
.plan-note{min-height:3.35em}
@media (max-width:900px){
/* stacked, so the note reservation is dropped, but the rate row still needs
to match: the card without a Save badge is 3px shorter than the others */
.plan-note{min-height:0}
.plan-rate{min-height:1.6em}
}