@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Roboto:wght@300;400;500;700&display=swap');
:root {
--nova-blue: #004B75;
--nova-pink: #E797C1;
--nova-light-pink: #F8C1D9;
--nova-orange: #F37029;
--deep-space: #0E2A47;
--deep-space-card: #163A5F;
--deep-space-raised: #1E4A77;
--text-primary: #FFFFFF;
--text-secondary: #C7D7E8;
--text-on-light: #0E2A47;
--text-muted-light: #3C5E7E;
--success: #7BC97E;
--locked: #7E93A8;
--divider: rgba(255, 255, 255, 0.14);
/* radius scale - app: s 10, m 16, l 24, pill 999 */
--r-s: 10px; --r-m: 16px; --r-l: 24px; --r-pill: 999px;
/* spacing scale - app: 4 8 16 24 32 48 */
--s-xs: 4px; --s-s: 8px; --s-m: 16px; --s-l: 24px; --s-xl: 32px; --s-xxl: 48px;
--font-display: 'Baloo 2', system-ui, sans-serif;
--font-body: 'Roboto', system-ui, -apple-system, sans-serif;
--band-max: 1120px;
--touch: 52px; /* app's minimum touch target */
}
/* ── THE DEEP-SPACE CANVAS ────────────────────────────────────────────────
The app puts every screen on the brand's space artwork, dimmed so white text
always reads. Same here, applied once to the whole site.
Images are served by Squarespace at /s/. Note the ABSOLUTE url
below: Custom CSS is served from Squarespace's own host, so a relative /s/
path inside THIS file resolves against static1.squarespace.com and 404s.
Relative /s/ paths in the page HTML are fine, because those resolve against
the site. Only the CSS needs the full domain. */
body {
background-color: var(--deep-space) !important;
background-image:
linear-gradient(rgba(8, 24, 43, 0.55), rgba(8, 24, 43, 0.55)),
url('https://www.novaoutreach.co.uk/s/space-bg.jpg');
background-size: cover;
background-position: center top;
background-attachment: fixed;
color: var(--text-primary);
}
/* Let the artwork show through Squarespace's own section shells.
These elements carry the site's theme colour and paint OVER the body
background, so each has to be cleared. There is no #sections wrapper in this
template, so they are targeted directly.
Only the COLOUR is cleared globally. Background IMAGES are cleared only in
sections holding our own markup, so a section background photo you add
somewhere else later still works. */
.section-background,
.section-background-overlay,
.section-border,
.header-background-solid,
.header-menu-bg,
.page-section,
section[data-section-id],
.sqs-block-code {
background-color: transparent !important;
}
.page-section:has(.nova) .section-background,
.page-section:has(.nova) .section-background-overlay,
.page-section:has(.nova) .section-background img {
background-image: none !important;
display: none !important;
}
/* Squarespace wraps code blocks in padded shells. Remove it so our own
section padding is the only padding, and nothing double-gaps. */
.sqs-block-code { padding: 0 !important; }
.sqs-block-code .sqs-block-content { padding: 0 !important; }
/* ── FULL BLEED INSIDE FLUID ENGINE ───────────────────────────────────────
A code block sits in a Fluid Engine grid cell, which caps it well short of
the screen edges, so the tinted bands stop mid-air. Negative margins cannot
escape a grid track, so instead the grid is flattened to a single full-width
column, and ONLY in sections that actually contain our markup. Every other
section on the site keeps its normal Fluid Engine behaviour. */
.fluid-engine:has(.nova) {
grid-template-columns: minmax(0, 1fr) !important;
column-gap: 0 !important;
row-gap: 0 !important;
padding: 0 !important;
}
.fluid-engine:has(.nova) > .fe-block {
/* grid-area:auto clears the explicit placement Squarespace writes, and has to
come first. Setting grid-column: 1 / -1 against a single-column template
resolves to -1 / auto, which drops the block into an IMPLICIT track after
the explicit one and shifts the entire page to the right. */
grid-area: auto !important;
grid-column: 1 / 2 !important;
grid-row: auto !important;
width: 100% !important;
margin: 0 !important;
}
.page-section:has(.nova) { padding-left: 0 !important; padding-right: 0 !important; }
.page-section:has(.nova) .content,
.page-section:has(.nova) .content-wrapper {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: none !important;
width: 100% !important;
}
/* ── BASE ─────────────────────────────────────────────────────────────────
Everything we write is scoped to .nova so Squarespace's own UI is untouched. */
.nova, .nova *, .nova *::before, .nova *::after { box-sizing: border-box; }
.nova {
font-family: var(--font-body);
color: var(--text-primary);
font-size: 17px; /* app body size */
line-height: 1.45; /* app body lineHeight ratio */
-webkit-font-smoothing: antialiased;
}
.nova p { margin: 0 0 var(--s-m); }
.nova img { max-width: 100%; height: auto; display: block; }
/* Buttons carry their own colour, so they are excluded here. Without the
:not(), `.nova a` is more specific than `.nova-btn-primary` and every button
label inherits link pink, including the white-on-blue ones. */
.nova a:not(.nova-btn) { color: var(--nova-pink); }
.nova a { text-decoration: none; }
.nova a:hover { text-decoration: underline; }
.nova ul, .nova ol { margin: 0 0 var(--s-m); padding-left: 1.25em; }
.nova li { margin-bottom: var(--s-s); }
.nova strong { font-weight: 700; }
.nova hr.nova-rule { border: none; border-top: 1px solid var(--divider); margin: var(--s-xl) 0; }
/* ── LAYOUT ───────────────────────────────────────────────────────────────
.nova-band paints a full-width stripe; .nova-wrap centres the content.
Bands are transparent by default so the space artwork shows through. */
.nova-band { width: 100%; padding: 72px var(--s-l); }
.nova-band-sm { width: 100%; padding: var(--s-xxl) var(--s-l); }
.nova-band-hero{ width: 100%; padding: 88px var(--s-l) 72px; }
.nova-wrap { max-width: var(--band-max); margin: 0 auto; }
.nova-wrap-narrow { max-width: 760px; margin: 0 auto; }
.nova-center { text-align: center; }
.nova-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-l); }
.nova-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-l); }
.nova-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-m); }
/* Cards in a grid share a row height, so their buttons must be pinned to the
bottom or a short card leaves its button floating in the middle. */
.nova-grid-2 > .nova-card, .nova-grid-3 > .nova-card,
.nova-grid-2 > .nova-session, .nova-grid-3 > .nova-session { display: flex; flex-direction: column; }
.nova-grid-2 > .nova-card > .nova-btns:last-child,
.nova-grid-3 > .nova-card > .nova-btns:last-child,
.nova-grid-2 > .nova-card > .nova-btn-static:last-child,
.nova-grid-3 > .nova-card > .nova-btn-static:last-child { margin-top: auto; align-self: flex-start; }
.nova-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-xxl); align-items: center; }
.nova-split-start { align-items: start; }
.nova-row { display: flex; flex-wrap: wrap; gap: var(--s-m); align-items: center; }
.nova-row-center { justify-content: center; }
/* Band tints, for rhythm down a long page */
.nova-band-tint { background: rgba(0, 75, 117, 0.42); }
.nova-band-solid { background: var(--deep-space); }
.nova-band-blue { background: var(--nova-blue); }
/* ── TYPE ─────────────────────────────────────────────────────────────────
Display faces are Baloo 2, the same stand-in the app uses for the licensed
210 Mamablock / New Astro Soft (whose licence does not cover embedding). */
.nova-h1, .nova-h2, .nova-h3, .nova-h4 {
font-family: var(--font-display);
color: var(--text-primary);
margin: 0 0 var(--s-m);
letter-spacing: -0.01em;
}
.nova-h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); font-weight: 800; line-height: 1.12; }
.nova-h2 { font-size: clamp(1.65rem, 3.6vw, 2.4rem); font-weight: 700; line-height: 1.18; }
.nova-h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); font-weight: 700; line-height: 1.25; }
.nova-h4 { font-size: 1.1rem; font-weight: 600; line-height: 1.3; }
/* The pink eyebrow label above a heading - straight from the app's card titles */
.nova-label {
font-family: var(--font-display);
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.04em;
color: var(--nova-light-pink);
margin: 0 0 var(--s-s);
text-transform: none;
}
.nova-lead { font-size: 1.2rem; line-height: 1.5; color: var(--text-primary); margin: 0 0 var(--s-l); }
.nova-body { font-size: 1.0625rem; line-height: 1.5; color: var(--text-primary); }
.nova-muted { color: var(--text-secondary); }
.nova-small { font-size: 0.875rem; line-height: 1.4; color: var(--text-secondary); }
.nova-orange-text { color: var(--nova-orange); }
.nova-pink-text { color: var(--nova-pink); }
/* ── BUTTONS ──────────────────────────────────────────────────────────────
Exactly the app's Btn: pill radius, 52px min height, orange primary with
white label, transparent secondary with a 2px pink border. */
.nova-btns { display: flex; flex-wrap: wrap; gap: var(--s-m); margin-top: var(--s-l); }
.nova-btns.nova-center { justify-content: center; }
.nova-btn {
display: inline-flex; align-items: center; justify-content: center;
min-height: var(--touch);
padding: 12px var(--s-l);
border-radius: var(--r-pill);
border: 2px solid transparent;
font-family: var(--font-display);
font-weight: 600;
font-size: 1.05rem;
line-height: 1.2;
text-align: center;
text-decoration: none !important;
cursor: pointer;
transition: opacity .18s ease, transform .18s ease;
}
.nova-btn:hover { opacity: 0.86; transform: translateY(-1px); text-decoration: none !important; }
.nova-btn:active { opacity: 0.82; transform: none; }
.nova-btn-primary { background: var(--nova-orange); color: #FFFFFF; border-color: var(--nova-orange); }
.nova-btn-secondary { background: transparent; color: #FFFFFF; border-color: var(--nova-pink); }
.nova-btn-pink { background: var(--nova-pink); color: var(--text-on-light); border-color: var(--nova-pink); }
.nova-btn-onlight { background: var(--nova-blue); color: #FFFFFF; border-color: var(--nova-blue); }
.nova-btn-onlight-alt { background: transparent; color: var(--nova-blue); border-color: var(--nova-blue); }
.nova-btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; min-height: 44px; padding: 8px var(--s-m); }
.nova-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
/* A non-clicking status badge, for anything not yet on sale */
.nova-btn-static {
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px; padding: 10px var(--s-l);
border-radius: var(--r-pill);
background: rgba(255, 255, 255, 0.08);
border: 2px solid var(--divider);
color: var(--text-secondary);
font-family: var(--font-display); font-weight: 600; font-size: 0.98rem;
}
/* ── CARDS ────────────────────────────────────────────────────────────────
The app's card: deepSpaceCard fill, 24px radius, generous padding. */
.nova-card {
background: var(--deep-space-card);
border-radius: var(--r-l);
padding: var(--s-l);
border: 1px solid var(--divider);
}
.nova-card-raised { background: var(--deep-space-raised); border-radius: var(--r-l); padding: var(--s-l); }
.nova-card-blue { background: var(--nova-blue); border-radius: var(--r-l); padding: var(--s-l); }
/* LIGHT PANELS - for dense information a teacher needs to scan or print:
the rate card, session details, forms. Deep-space canvas, light panel. */
.nova-panel-light {
background: #FFFFFF;
color: var(--text-on-light);
border-radius: var(--r-l);
padding: var(--s-xl);
}
.nova-panel-pink {
background: var(--nova-light-pink);
color: var(--text-on-light);
border-radius: var(--r-l);
padding: var(--s-xl);
}
.nova-panel-light .nova-h2,
.nova-panel-light .nova-h3,
.nova-panel-light .nova-h4,
.nova-panel-pink .nova-h2,
.nova-panel-pink .nova-h3,
.nova-panel-pink .nova-h4 { color: var(--text-on-light); }
.nova-panel-light .nova-label,
.nova-panel-pink .nova-label { color: var(--nova-blue); }
.nova-panel-light .nova-body, .nova-panel-light p,
.nova-panel-pink .nova-body, .nova-panel-pink p { color: var(--text-on-light); }
.nova-panel-light .nova-small,
.nova-panel-pink .nova-small { color: var(--text-muted-light); }
.nova-panel-light a:not(.nova-btn), .nova-panel-pink a:not(.nova-btn) { color: var(--nova-blue); font-weight: 700; }
/* ── ICON CHIPS ───────────────────────────────────────────────────────────
Your branded circular icons (BS_ICON_*), used exactly as the app uses its
format chips. These replace every emoji on the old site. */
.nova-chip {
display: inline-flex; align-items: center; gap: var(--s-s);
background: var(--deep-space-raised);
border-radius: var(--r-pill);
padding: 6px 18px 6px 6px;
font-family: var(--font-body); font-weight: 500; font-size: 0.95rem;
color: var(--text-primary);
}
.nova-chip img, .nova-chip .nova-chip-dot {
width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: block;
}
.nova-chip-dot { background: var(--nova-light-pink); }
/* Icons are painted as background images so that, before you have pasted the
real URLs in, every one falls back to a clean Nova Light Pink disc rather
than a broken-image icon. The site looks finished at every stage. */
.nova-icon, .nova-icon-sm, .nova-icon-lg {
border-radius: 50%;
display: block;
flex-shrink: 0;
background-color: var(--nova-light-pink);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.nova-icon { width: 64px; height: 64px; margin-bottom: var(--s-m); }
.nova-icon-sm { width: 44px; height: 44px; }
.nova-icon-lg { width: 84px; height: 84px; margin: 0 auto var(--s-m); }
/* Small pills for age range, duration, curriculum */
.nova-tag {
display: inline-block;
background: rgba(255, 255, 255, 0.10);
border: 1px solid var(--divider);
color: var(--text-secondary);
border-radius: var(--r-pill);
padding: 4px 14px;
font-size: 0.8rem; font-weight: 500;
margin: 0 var(--s-xs) var(--s-xs) 0;
}
.nova-panel-light .nova-tag, .nova-panel-pink .nova-tag {
background: rgba(0, 75, 117, 0.10); border-color: rgba(0, 75, 117, 0.22); color: var(--nova-blue);
}
.nova-tag-orange { background: rgba(243, 112, 41, 0.18); border-color: rgba(243, 112, 41, 0.5); color: #FFC7A3; }
/* ── SESSION / FEATURE CARDS ──────────────────────────────────────────── */
.nova-session {
background: var(--deep-space-card);
border-radius: var(--r-l);
padding: var(--s-l);
border: 1px solid var(--divider);
display: flex; flex-direction: column;
}
.nova-session-head { display: flex; align-items: center; gap: var(--s-m); margin-bottom: var(--s-m); }
.nova-session-head .nova-h3 { margin: 0; }
.nova-session .nova-curric { color: var(--nova-light-pink); font-size: 0.85rem; font-weight: 500; margin: auto 0 0; padding-top: var(--s-m); }
/* ── RATE CARD ────────────────────────────────────────────────────────────
Light panel, because a busy teacher needs to scan and print this. */
.nova-rates { width: 100%; border-collapse: collapse; font-size: 1.0625rem; }
.nova-rates th, .nova-rates td { text-align: left; padding: 14px var(--s-m); border-bottom: 1px solid rgba(0, 75, 117, 0.16); }
.nova-rates th { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--nova-blue); }
.nova-rates td:last-child, .nova-rates th:last-child { text-align: right; white-space: nowrap; }
.nova-rates td:last-child { font-family: var(--font-display); font-weight: 700; color: var(--nova-blue); font-size: 1.15rem; }
.nova-rates tr:last-child td { border-bottom: none; }
.nova-rates-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* ── BOOK CARDS ───────────────────────────────────────────────────────────
The First Steps books are LANDSCAPE (roughly 1.37:1), not portrait. */
.nova-book { background: var(--deep-space-card); border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--divider); display: flex; flex-direction: column; }
.nova-book-cover { width: 100%; aspect-ratio: 1.37 / 1; background: var(--deep-space-raised); display: flex; align-items: center; justify-content: center; }
.nova-book-cover img { width: 100%; height: 100%; object-fit: cover; }
.nova-book-body { padding: var(--s-l); display: flex; flex-direction: column; flex: 1; }
.nova-book-body .nova-h3 { margin-bottom: var(--s-xs); }
.nova-book-meta { color: var(--nova-light-pink); font-size: 0.85rem; font-weight: 600; margin-bottom: var(--s-m); }
.nova-book-body .nova-btn-static, .nova-book-body .nova-btn { margin-top: auto; align-self: flex-start; }
/* ── HERO LOGO ────────────────────────────────────────────────────────── */
img.nova-hero-logo { width: 100%; max-width: 300px; margin: 0 auto var(--s-l); }
@media (max-width: 640px) { img.nova-hero-logo { max-width: 220px; } }
/* ── PORTRAIT ─────────────────────────────────────────────────────────────
A rectangular studio photo on a dark canvas needs a frame, or it reads as a
grey rectangle someone dropped on the page. Card radius, a hairline edge and
a soft shadow tie it to the rest of the system. */
img.nova-portrait {
width: 100%;
max-width: 460px;
margin: 0 auto;
border-radius: var(--r-l);
border: 1px solid var(--divider);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
/* ── TESTIMONIALS ───────────────────────────────────────── */
.nova-quote { background: var(--deep-space-card); border-radius: var(--r-l); padding: var(--s-l); border: 1px solid var(--divider); border-left: 4px solid var(--nova-pink); }
.nova-quote p { font-size: 1.05rem; line-height: 1.55; font-style: italic; color: var(--text-primary); }
.nova-quote cite { display: block; font-style: normal; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--nova-light-pink); }
/* ── NUMBERED STEPS ───────────────────────────────────────────────────── */
.nova-steps { list-style: none; counter-reset: nova-step; padding: 0; margin: 0; }
.nova-steps li {
counter-increment: nova-step;
position: relative;
padding: 0 0 var(--s-l) 64px;
min-height: 48px;
}
.nova-steps li::before {
counter-increment: none; content: counter(nova-step);
position: absolute; left: 0; top: 0;
width: 44px; height: 44px; border-radius: 50%;
background: var(--nova-orange); color: #FFFFFF;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
}
.nova-panel-light .nova-steps li::before, .nova-panel-pink .nova-steps li::before { background: var(--nova-blue); }
/* ── TICK LIST ────────────────────────────────────────────────────────── */
.nova-ticks { list-style: none; padding: 0; margin: 0; }
.nova-ticks li { position: relative; padding: 0 0 var(--s-m) 34px; }
.nova-ticks li::before {
content: ''; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%;
background: var(--nova-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230E2A47'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/13px no-repeat;
}
/* ── IMPACT NUMBERS ───────────────────────────────────────────────────── */
/* Stats are short, so they stay three across right down to mobile. Dropping
them to two columns strands the third one on a row of its own. */
.nova-grid-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-m); }
.nova-stat { text-align: center; padding: var(--s-l) var(--s-m); }
.nova-stat-n { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3rem); color: var(--nova-orange); line-height: 1; margin-bottom: var(--s-s); }
.nova-stat-l { font-size: 0.95rem; color: var(--text-secondary); margin: 0; }
/* ── PARTNER LOGO STRIP ───────────────────────────────────────────────── */
/* The partner artwork is a wide LOCKUP (NOVA plus a partner), not a single
logo. Constraining it by height shrinks it to nothing, so it is sized by
width and the white plate it already carries is left to do its job. */
.nova-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-l); }
.nova-logos img {
width: 100%; max-width: 400px; height: auto;
background: #FFFFFF; border-radius: var(--r-m);
}
.nova-logo-pill { display: inline-block; background: rgba(255,255,255,0.10); border: 1px solid var(--divider); color: #FFFFFF; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; padding: 10px 22px; border-radius: var(--r-pill); }
/* ── SPEECH BUBBLE (the app's ScientistBubble) ────────────────────────── */
.nova-bubble-row { display: flex; align-items: flex-start; gap: var(--s-m); }
.nova-bubble-row > img { width: 92px; height: auto; flex-shrink: 0; }
.nova-bubble { position: relative; background: var(--deep-space-raised); border-radius: var(--r-l); padding: var(--s-l); flex: 1; }
.nova-bubble::before {
content: ''; position: absolute; left: -12px; top: 30px;
border: 12px solid transparent; border-right-color: var(--deep-space-raised); border-left: 0;
}
.nova-bubble p:last-child { margin-bottom: 0; }
/* ── NEWSLETTER STRIP ─────────────────────────────────────────────────── */
.nova-news { background: var(--nova-light-pink); color: var(--text-on-light); border-radius: var(--r-l); padding: var(--s-xl); text-align: center; }
.nova-news .nova-h2, .nova-news p { color: var(--text-on-light); }
.nova-news .nova-label { color: var(--nova-blue); }
/* ── FORM SHELF ───────────────────────────────────────────────────────────
A light panel that a native Squarespace Form Block sits inside or beneath.
Squarespace form fields are restyled here so they match the app. */
.nova-form-shelf { background: #FFFFFF; border-radius: var(--r-l); padding: var(--s-xl); color: var(--text-on-light); }
.nova-form-shelf .nova-h2, .nova-form-shelf .nova-h3, .nova-form-shelf p { color: var(--text-on-light); }
.sqs-block-form .field-list .title,
.sqs-block-form .form-item .title { font-family: var(--font-display) !important; font-weight: 600 !important; color: var(--nova-blue) !important; }
.sqs-block-form input[type="text"],
.sqs-block-form input[type="email"],
.sqs-block-form input[type="tel"],
.sqs-block-form input[type="number"],
.sqs-block-form textarea,
.sqs-block-form select {
border-radius: var(--r-s) !important;
border: 2px solid rgba(0, 75, 117, 0.25) !important;
font-family: var(--font-body) !important;
min-height: 48px;
}
.sqs-block-form input:focus, .sqs-block-form textarea:focus, .sqs-block-form select:focus {
border-color: var(--nova-blue) !important; outline: none !important;
}
.sqs-block-form .form-button-wrapper input[type="submit"],
.sqs-block-form input[type="submit"] {
background: var(--nova-orange) !important;
color: #FFFFFF !important;
border: none !important;
border-radius: var(--r-pill) !important;
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: 1.05rem !important;
min-height: var(--touch) !important;
padding: 12px var(--s-l) !important;
}
/* ── SQUARESPACE CHROME ───────────────────────────────────────────────────
Header, nav, footer and commerce, brought in line with the app. */
.header, .header-announcement-bar-wrapper { background: rgba(14, 42, 71, 0.92) !important; backdrop-filter: blur(8px); }
.header-nav-item a, .header-nav-folder-title, .header-menu-nav-item a {
font-family: var(--font-display) !important; font-weight: 600 !important; color: #FFFFFF !important;
}
.header-nav-item--active a { color: var(--nova-orange) !important; }
.header-nav-item a:hover { color: var(--nova-pink) !important; }
.header-actions .btn, .header-actions-action--cta a {
background: var(--nova-orange) !important; color: #FFFFFF !important;
border-radius: var(--r-pill) !important; font-family: var(--font-display) !important; font-weight: 600 !important;
}
.top-bun, .patty, .bottom-bun { background-color: #FFFFFF !important; }
.header-menu { background: var(--deep-space) !important; }
#footer-sections, .footer-block { background: var(--nova-blue) !important; color: #FFFFFF !important; }
#footer-sections a { color: var(--nova-light-pink) !important; }
#footer-sections p, #footer-sections h1, #footer-sections h2, #footer-sections h3, #footer-sections h4 { color: #FFFFFF !important; }
/* The footer code block styles itself, rather than relying on Squarespace's
#footer-sections wrapper being present. Ordinary NOVA Pink links measure
4.24:1 against NOVA Blue, marginally under the AA threshold for body text.
Light Pink is 6.02:1, so the footer uses that regardless of what wraps it. */
footer.nova a:not(.nova-btn) { color: var(--nova-light-pink); }
footer.nova, footer.nova p, footer.nova h1, footer.nova h2, footer.nova h3, footer.nova h4 { color: #FFFFFF; }
footer.nova .nova-small { color: var(--text-secondary); }
/* Products, for when commerce is switched on */
.products.collection-content-wrapper .grid-title { font-family: var(--font-display) !important; color: #FFFFFF !important; }
.products.collection-content-wrapper .grid-prices { color: var(--nova-light-pink) !important; }
.sqs-add-to-cart-button, .sqs-editable-button {
background: var(--nova-orange) !important; border-radius: var(--r-pill) !important;
font-family: var(--font-display) !important; font-weight: 600 !important;
}
/* ── ACCESSIBILITY ────────────────────────────────────────────────────────
Contrast notes, checked against WCAG AA:
white on #0E2A47 .......... 14.6:1 ✓
#C7D7E8 on #0E2A47 ........ 10.4:1 ✓
#F8C1D9 on #163A5F ......... 7.9:1 ✓
#0E2A47 on #F8C1D9 ........ 12.1:1 ✓
white on #F37029 ........... 3.0:1 - large text and buttons only, never body
NOVA Orange is an accent and a button fill. It is never used for body text. */
.nova a:focus-visible, .nova button:focus-visible, .nova-btn:focus-visible,
.header-nav-item a:focus-visible {
outline: 3px solid var(--nova-orange); outline-offset: 3px; border-radius: var(--r-s);
}
.nova-visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ── MISSION CONTROL, THE LINKS PAGE ──────────────────────────────────────
A link-in-bio layout: one narrow column of full-width tap targets, the same
on a phone and a desktop. Deliberately different from the rest of the site,
where buttons sit inline. Someone arriving here from a QR code wants a list
they can thumb, not a page they have to read. */
.nova-links { max-width: 460px; margin: 0 auto; }
/* Full width at EVERY breakpoint, not just mobile. This is the whole point of
the layout, so it overrides the inline-button behaviour used elsewhere. */
.nova-links .nova-btn,
.nova-links .nova-btn-static { width: 100%; text-align: center; }
.nova-links .nova-btns { flex-direction: column; align-items: stretch; margin-top: var(--s-m); }
/* Mission Control leads with the NOVA logo, which already carries a small
version of the Bearded Scientist inside the swirl. A second standalone head
directly beneath it read as a duplicate, so the character signs off at the
bottom of the page instead, in the usual speech bubble. */
img.nova-mc-logo { width: 100%; max-width: 210px; margin: 0 auto var(--s-m); }
/* Kept for a circular photo elsewhere, for example a founder avatar on About.
Cropping the file beats fighting object-position: a 4:5 portrait cannot put
a high face in the middle of a square, because the crop window runs out of
image before the face reaches centre. assets/tony-avatar.jpg is that crop. */
img.nova-avatar {
width: 132px; height: 132px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto var(--s-m);
border: 3px solid var(--nova-pink);
}
/* Socials sit as a compact row rather than four more full-width buttons,
so they read as secondary to the actions above them. */
/* ── SOCIAL ICONS ─────────────────────────────────────────────────────────
Used on Mission Control, Contact, The Bearded Scientist and the footer.
The shapes live in an SVG sprite in the Code Injection footer, so these are
just discs that colour whatever shape is dropped into them.
Pink on purpose: it separates "follow me somewhere else" from "do a thing
here", and measures 6.3:1 against deep space, comfortably past AA. */
.nova-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: var(--s-m); }
.nova a.nova-social {
width: 48px; height: 48px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--divider);
color: var(--nova-pink);
transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.nova a.nova-social:hover {
background: var(--deep-space-raised);
color: #FFFFFF;
text-decoration: none;
transform: translateY(-2px);
}
.nova-social-icon { width: 22px; height: 22px; fill: currentColor; display: block; }
/* In the footer the links are Light Pink, so the icons match them. */
footer.nova a.nova-social { color: var(--nova-light-pink); }
/* ── APP STORE BADGES ─────────────────────────────────────────────────────
The platform logo with its store name, in the site's own visual language
rather than the official black artwork, which would sit awkwardly on deep
space. Same shape and reading order as the standard badges, so nobody has
to think about what they are. */
.nova-stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: var(--s-m); }
/* `a.nova-store` rather than `.nova-store`: the base link rule is (0,2,1), so a
plain class loses to it and the badge label comes out link pink. */
.nova a.nova-store, .nova span.nova-store {
display: inline-flex; align-items: center; gap: 10px;
min-height: var(--touch);
padding: 8px 20px 8px 16px;
border: 1px solid var(--divider);
border-radius: var(--r-s);
background: rgba(255, 255, 255, 0.06);
color: #FFFFFF;
text-decoration: none;
transition: background-color .18s ease, transform .18s ease;
}
.nova a.nova-store:hover {
background: var(--deep-space-raised);
text-decoration: none;
transform: translateY(-2px);
}
.nova-store-icon { width: 26px; height: 26px; fill: currentColor; flex-shrink: 0; display: block; }
.nova-store-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.nova .nova-store-text small { font-size: 0.7rem; color: var(--text-secondary); }
.nova .nova-store-text strong { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: #FFFFFF; }
/* Unused now both stores are live. Kept for the next app: it dims a badge
and stops it reading as clickable. */
.nova .nova-store.is-soon { opacity: 0.5; cursor: default; }
@media (prefers-reduced-motion: reduce) {
.nova a.nova-store:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.nova a.nova-social:hover { transform: none; }
}
.nova-links-divider {
display: flex; align-items: center; gap: var(--s-m);
margin: var(--s-xl) 0 var(--s-s);
color: var(--text-secondary);
font-family: var(--font-display); font-weight: 600; font-size: 0.85rem;
letter-spacing: 0.06em; text-transform: uppercase;
}
.nova-links-divider::before, .nova-links-divider::after {
content: ''; flex: 1; height: 1px; background: var(--divider);
}
/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 960px) {
.nova-grid-3 { grid-template-columns: repeat(2, 1fr); }
.nova-grid-4 { grid-template-columns: repeat(2, 1fr); }
.nova-split { grid-template-columns: 1fr; gap: var(--s-xl); }
}
@media (max-width: 640px) {
body { background-attachment: scroll; }
.nova-grid-stats { grid-template-columns: 1fr; }
.nova-band { padding: var(--s-xxl) 20px; }
.nova-band-sm { padding: var(--s-xl) 20px; }
.nova-band-hero { padding: var(--s-xxl) 20px var(--s-xl); }
.nova-grid-2, .nova-grid-3, .nova-grid-4 { grid-template-columns: 1fr; }
.nova-panel-light, .nova-panel-pink, .nova-form-shelf, .nova-news { padding: var(--s-l); }
.nova-btns { flex-direction: column; align-items: stretch; }
.nova-btn { width: 100%; }
.nova-bubble-row { flex-direction: column; }
.nova-bubble::before { left: 30px; top: -12px; border: 12px solid transparent; border-bottom-color: var(--deep-space-raised); border-top: 0; }
.nova-rates th, .nova-rates td { padding: 12px var(--s-s); font-size: 0.98rem; }
}
@media (prefers-reduced-motion: reduce) {
.nova-btn, .nova-btn:hover { transition: none; transform: none; }
}
/* Printing the rate card and session list should not waste ink on space art */
@media print {
body { background: #FFFFFF !important; color: #000000 !important; }
.nova, .nova * { color: #000000 !important; }
.nova-card, .nova-session, .nova-panel-light, .nova-panel-pink { background: #FFFFFF !important; border: 1px solid #999999 !important; }
.nova-band-tint, .nova-band-solid, .nova-band-blue { background: #FFFFFF !important; }
.nova-btn, .nova-btns, .nova-news { display: none !important; }
}
