tag
IMPORTANT: This template uses font-size:62.5% on html
(so 1rem = 10px, not 16px). All clamps below are in
PIXELS so values are exact regardless of root font.
Verified DOM classes (live, all 15):
aa-cs-cd-cell, aa-cs-cd-lbl, aa-cs-cd-num, aa-cs-countdown,
aa-cs-footer, aa-cs-form, aa-cs-form-hint, aa-cs-form-label,
aa-cs-form-row, aa-cs-kicker, aa-cs-stage, aa-cs-tagline,
aa-cs-target, aa-cs-vignette, aa-cs-wordmark
Original (desktop) sizes preserved at upper clamp bound:
.aa-cs-wordmark = 132px desktop, 40px floor at 320px phone
.aa-cs-cd-num = 54px desktop, 22px floor
.aa-cs-tagline = 16px desktop, 11px floor
.aa-cs-cd-lbl = 10px desktop, 8px floor
============================================================ */
/* ── KICKER / STAGE LINE (top: "◠SYSTEM · INFRASTRUCTURE PHASE · LDN 51.5074°N") */
.aa-cs-kicker{
font-size: clamp(10px, 2.2vw, 14px) !important;
letter-spacing: clamp(0.08em, 0.3vw, 0.2em) !important;
white-space: normal !important;
word-break: break-word !important;
text-align: center !important;
padding-left: clamp(8px, 3vw, 0px) !important;
padding-right: clamp(8px, 3vw, 0px) !important;
}
/* ── WORDMARK ("ARCHALIGN") — was 132px fixed, now fluid 40px..132px */
.aa-cs-wordmark{
font-size: clamp(40px, 9.5vw, 132px) !important;
letter-spacing: 0.18em !important;
line-height: 1 !important;
word-break: keep-all !important;
white-space: nowrap !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
/* ── TAGLINE ("COMING SOON") */
.aa-cs-tagline{
font-size: clamp(11px, 2.4vw, 16px) !important;
letter-spacing: clamp(0.1em, 0.4vw, 0.32em) !important;
text-align: center !important;
}
/* ── COUNTDOWN container — keep 4 columns, shrink gap on phone */
.aa-cs-countdown{
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: clamp(6px, 1.6vw, 18px) !important;
width: 100% !important;
max-width: 560px !important;
margin: 0 auto !important;
padding-left: clamp(8px, 3vw, 24px) !important;
padding-right: clamp(8px, 3vw, 24px) !important;
box-sizing: border-box !important;
}
/* ── COUNTDOWN cell */
.aa-cs-cd-cell{
padding: clamp(8px, 2.2vw, 18px) clamp(4px, 1.4vw, 14px) !important;
min-width: 0 !important;
}
/* ── COUNTDOWN DIGITS — was 54px fixed, now fluid 22px..54px */
.aa-cs-cd-num{
font-size: clamp(22px, 6vw, 54px) !important;
line-height: 1 !important;
letter-spacing: 0 !important;
}
/* ── COUNTDOWN LABELS (DAYS / HOURS / MINUTES / SECONDS) */
.aa-cs-cd-lbl{
font-size: clamp(8px, 1.5vw, 10px) !important;
letter-spacing: clamp(0.08em, 0.3vw, 0.18em) !important;
margin-top: clamp(4px, 1vw, 8px) !important;
}
/* ── TARGET LINE ("LAUNCH · 30 JUNE 2026 · 00:00 BST") */
.aa-cs-target{
font-size: clamp(10px, 2vw, 13px) !important;
letter-spacing: clamp(0.06em, 0.3vw, 0.2em) !important;
white-space: normal !important;
text-align: center !important;
padding-left: clamp(12px, 4vw, 24px) !important;
padding-right: clamp(12px, 4vw, 24px) !important;
word-break: break-word !important;
}
/* ── NOTIFY FORM container */
.aa-cs-form{
width: 100% !important;
max-width: 460px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: clamp(12px, 4vw, 24px) !important;
padding-right: clamp(12px, 4vw, 24px) !important;
box-sizing: border-box !important;
}
.aa-cs-form-label{
font-size: clamp(10px, 2vw, 13px) !important;
letter-spacing: clamp(0.06em, 0.3vw, 0.2em) !important;
text-align: center !important;
}
.aa-cs-form-hint{
font-size: clamp(9px, 1.8vw, 12px) !important;
text-align: center !important;
}
.aa-cs-form-row{
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
width: 100% !important;
gap: 0 !important;
}
.aa-cs-form-row input[type="email"],
.aa-cs-form input[type="email"]{
font-size: clamp(12px, 2.4vw, 14px) !important;
padding: clamp(10px, 2.5vw, 14px) clamp(12px, 3vw, 18px) !important;
flex: 1 1 auto !important;
min-width: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.aa-cs-form-row button,
.aa-cs-form button[type="submit"]{
font-size: clamp(10px, 2vw, 13px) !important;
padding: clamp(10px, 2.5vw, 14px) clamp(12px, 4vw, 26px) !important;
letter-spacing: clamp(0.06em, 0.3vw, 0.22em) !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
/* ── FOOTER LINE ("Trade enquiries continue to operate · trade@archalign.co.uk") */
.aa-cs-footer{
font-size: clamp(10px, 2vw, 13px) !important;
letter-spacing: clamp(0.04em, 0.2vw, 0.12em) !important;
text-align: center !important;
padding-left: clamp(12px, 4vw, 24px) !important;
padding-right: clamp(12px, 4vw, 24px) !important;
word-break: break-word !important;
line-height: 1.5 !important;
}
.aa-cs-footer a{
word-break: break-all !important;
}
/* ── STAGE wrapper — pull padding in on phone */
.aa-cs-stage{
padding-left: clamp(12px, 4vw, 48px) !important;
padding-right: clamp(12px, 4vw, 48px) !important;
padding-top: clamp(24px, 6vw, 80px) !important;
padding-bottom: clamp(40px, 8vw, 120px) !important;
}
/* ── VIGNETTE matrix bg — dim it on small viewports for readability */
@media (max-width: 749px){
.aa-cs-vignette,
#aa-matrix-bg,
canvas#aa-matrix-bg{
opacity: 0.22 !important;
}
html, body{ overflow-x: hidden !important; }
}
/* === rev3.1 fix: restore wordmark luxury letter-spacing on desktop === */
.aa-cs-wordmark { letter-spacing: 0.18em !important; }
@media (max-width: 620px) {
.aa-cs-wordmark { letter-spacing: 0.04em !important; }
}
/* === rev3.2: higher-specificity desktop letter-spacing restore === */
main.aa-cs-stage h1.aa-cs-wordmark { letter-spacing: 0.18em !important; }
@media (max-width: 620px) {
main.aa-cs-stage h1.aa-cs-wordmark { letter-spacing: 0.04em !important; }
letter-spacing:var(--aa-ls,.18em)!important;white-space:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important"
/* === rev3.3: defeat global h1 letter-spacing override === */
h1.aa-cs-wordmark { letter-spacing: 0.18em !important; }
@media (max-width: 620px) { h1.aa-cs-wordmark { letter-spacing: 0.04em !important; } }
/* === rev3.4: maximum-specificity killshot for global h1 override === */
body h1.aa-cs-wordmark, html h1.aa-cs-wordmark { letter-spacing: 0.18em !important; }
@media (max-width: 620px) {
body h1.aa-cs-wordmark, html h1.aa-cs-wordmark { letter-spacing: 0.04em !important; }
}
/* === rev4: SMARTPHONE FIT FIX 2026-05-30 === */
@media (max-width: 620px) {
.aa-cs-stage { padding: 16px !important; }
.aa-cs-wordmark {
--aa-ls: 0.02em !important;
font-size: clamp(16px, 5vw, 28px) !important; white-space: nowrap !important;
max-width: 100% !important;
}
.aa-cs-tagline { font-size: 11px !important; letter-spacing: 0.2em !important; }
.aa-cs-kicker { font-size: 9px !important; letter-spacing: 0.18em !important; }
.aa-cs-countdown { gap: 6px !important; margin-bottom: 28px !important; padding: 0 8px !important; box-sizing: border-box !important; max-width: 100% !important; }
.aa-cs-cd-cell { min-width: 0 !important; padding: 8px 4px !important; }
.aa-cs-cd-num { font-size: clamp(14px, 4.5vw, 22px) !important; }
.aa-cs-cd-lbl { font-size: 7px !important; letter-spacing: 0.14em !important; }
.aa-cs-target { font-size: 10px !important; padding: 0 12px !important; word-break: break-word !important; }
.aa-cs-form { max-width: 100% !important; padding: 0 8px !important; box-sizing: border-box !important; }
.aa-cs-form-row { width: 100% !important; }
.aa-cs-form-row input[type=email] { font-size: 12px !important; padding: 10px 12px !important; min-width: 0 !important; }
.aa-cs-form-row button { font-size: 10px !important; padding: 10px 14px !important; white-space: nowrap !important; flex-shrink: 0 !important; }
.aa-cs-footer { font-size: 8.5px !important; padding: 0 14px !important; word-break: break-word !important; }
html, body { overflow-x: hidden !important; }
}
@media (max-width: 380px) {
.aa-cs-wordmark { font-size: clamp(24px, 8vw, 36px) !important; --aa-ls: 0 !important; }
.aa-cs-cd-num { font-size: 22px !important; }
.aa-cs-cd-cell { padding: 6px 2px !important; }
.aa-cs-stage { padding: 12px !important; }
}
SYSTEM · INFRASTRUCTURE PHASE · LDN 51.5074°N
ARCHALIGN
Coming Soon
00Days
00Hours
00Minutes
00Seconds
Launch · 30 June 2026 · 00:00 BST