/* ============================================================
HSRPP 2026 — Shared App Shell
Bottom tab bar injected on every page.
Keep this scoped: only styles inside `.hsrpp-nav*` or under
`body.hsrpp-app-shell`. Sub-pages have their own full styling.
Fonts: Ubuntu (headings) + Lato (body) to match
hsrppconference.org.uk. Both loaded from Google Fonts.
============================================================ */
/* Google Fonts — matches the main conference site.
@import used so this works even when a sub-page forgets to add
a tag; the one round-trip from the browser is cheap. */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Ubuntu:wght@400;500;700&display=swap');
:root {
--qub-gold: #C9A227;
--qub-gold-dark: #a88620;
--qub-gold-bg: #fffcf5;
--hsrpp-nav-height: 64px;
--hsrpp-nav-height-safe: calc(var(--hsrpp-nav-height) + env(safe-area-inset-bottom, 0px));
/* Typography — match hsrppconference.org.uk */
--font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--font-heading: 'Ubuntu', 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
/* Apply the body font globally to anything that hasn't specified its own.
Sub-pages that already set font-family will still win per the cascade. */
body {
font-family: var(--font-body);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
}
/* Reserve space so page content isn't hidden behind the tab bar.
Each sub-page adds `.hsrpp-app-shell` to . */
body.hsrpp-app-shell {
padding-bottom: var(--hsrpp-nav-height-safe) !important;
}
/* -------- Bottom tab bar -------- */
.hsrpp-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
display: flex;
justify-content: space-around;
align-items: stretch;
height: var(--hsrpp-nav-height-safe);
padding-bottom: env(safe-area-inset-bottom, 0px);
background: rgba(255, 255, 255, 0.94);
backdrop-filter: saturate(1.4) blur(10px);
-webkit-backdrop-filter: saturate(1.4) blur(10px);
border-top: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.07);
font-family: var(--font-body);
}
/* Dark variant — used on the Tour page so the bar sits over the
panorama without blinding the user. */
.hsrpp-nav.hsrpp-nav--dark {
background: rgba(18, 18, 18, 0.80);
border-top-color: rgba(255, 255, 255, 0.10);
box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.45);
}
.hsrpp-nav a {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
color: #666;
text-decoration: none;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
transition: color .15s, background-color .15s;
padding: 6px 4px;
-webkit-tap-highlight-color: transparent;
}
.hsrpp-nav.hsrpp-nav--dark a { color: #bdbdbd; }
.hsrpp-nav a svg {
width: 22px; height: 22px;
display: block;
stroke: currentColor;
stroke-width: 1.9;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.hsrpp-nav a.active,
.hsrpp-nav a:hover {
color: var(--qub-gold);
}
.hsrpp-nav.hsrpp-nav--dark a.active,
.hsrpp-nav.hsrpp-nav--dark a:hover {
color: var(--qub-gold);
}
.hsrpp-nav a.active {
background: linear-gradient(to top, rgba(201, 162, 39, 0.10), transparent 70%);
}
/* Small iOS-like active dot above label */
.hsrpp-nav a.active::before {
content: '';
position: absolute;
top: 4px;
width: 16px; height: 3px;
border-radius: 2px;
background: var(--qub-gold);
}
.hsrpp-nav a { position: relative; }
/* -------- iOS / Android install prompt chip -------- */
.hsrpp-install-chip {
position: fixed;
left: 12px;
right: 12px;
bottom: calc(var(--hsrpp-nav-height-safe) + 10px);
max-width: 540px;
margin: 0 auto;
background: #fff;
color: #222;
border-radius: 12px;
padding: 12px 14px;
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0,0,0,0.06);
display: none;
z-index: 10001;
font-family: var(--font-body);
font-size: 14px;
line-height: 1.4;
gap: 10px;
align-items: center;
}
.hsrpp-install-chip.show { display: flex; }
.hsrpp-install-chip .hsrpp-install-icon {
flex: none;
width: 38px; height: 38px;
border-radius: 9px;
background: linear-gradient(135deg, var(--qub-gold), var(--qub-gold-dark));
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 14px;
}
.hsrpp-install-chip .hsrpp-install-body { flex: 1; }
.hsrpp-install-chip .hsrpp-install-body strong { display: block; font-size: 13.5px; }
.hsrpp-install-chip .hsrpp-install-body span { font-size: 12.5px; color: #666; }
.hsrpp-install-chip button {
flex: none;
border: 0;
background: var(--qub-gold);
color: #fff;
padding: 8px 12px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
font-size: 13px;
font-family: inherit;
}
.hsrpp-install-chip button:hover { background: var(--qub-gold-dark); }
.hsrpp-install-chip .hsrpp-install-close {
background: transparent !important;
color: #999 !important;
padding: 4px 6px !important;
font-size: 18px !important;
}
/* -------- "New version available — Refresh" banner --------
Sits at the top of the viewport, above everything else, and respects
the iOS safe-area inset so the notch doesn't clip it. Animates in from
above on show; slides away on dismiss. Dark variant for the tour page. */
.hsrpp-update-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10002; /* above nav (10000) and install chip (10001) */
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
padding-top: max(10px, calc(env(safe-area-inset-top, 0px) + 8px));
background: #fff;
color: #222;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
font-family: var(--font-body);
font-size: 13.5px;
line-height: 1.35;
transform: translateY(-110%);
opacity: 0;
transition: transform .32s cubic-bezier(.25,.7,.25,1), opacity .32s ease;
pointer-events: none;
}
.hsrpp-update-banner.show {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.hsrpp-update-banner .hsrpp-update-icon {
flex: none;
width: 34px; height: 34px;
border-radius: 9px;
background: linear-gradient(135deg, var(--qub-gold), var(--qub-gold-dark));
color: #fff;
display: flex; align-items: center; justify-content: center;
}
.hsrpp-update-banner .hsrpp-update-icon svg {
width: 18px; height: 18px;
stroke: currentColor; fill: none;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.hsrpp-update-banner .hsrpp-update-body { flex: 1 1 auto; min-width: 0; }
.hsrpp-update-banner .hsrpp-update-body strong {
display: block;
font-size: 13.5px;
font-weight: 700;
color: inherit;
}
.hsrpp-update-banner .hsrpp-update-body span {
font-size: 12px;
color: #666;
}
.hsrpp-update-banner button {
flex: none;
border: 0;
cursor: pointer;
font-family: inherit;
-webkit-tap-highlight-color: transparent;
}
.hsrpp-update-banner .hsrpp-update-btn {
background: var(--qub-gold);
color: #fff;
padding: 8px 14px;
border-radius: 8px;
font-weight: 700;
font-size: 13px;
}
.hsrpp-update-banner .hsrpp-update-btn:hover { background: var(--qub-gold-dark); }
.hsrpp-update-banner .hsrpp-update-close {
background: transparent;
color: #999;
padding: 4px 8px;
font-size: 20px;
line-height: 1;
}
/* Dark variant — used on the tour page so it reads against a panorama. */
.hsrpp-update-banner--dark {
background: rgba(22, 22, 22, 0.92);
color: #f5f5f5;
border-bottom-color: rgba(255, 255, 255, 0.12);
backdrop-filter: saturate(1.4) blur(10px);
-webkit-backdrop-filter: saturate(1.4) blur(10px);
}
.hsrpp-update-banner--dark .hsrpp-update-body span { color: #bdbdbd; }
.hsrpp-update-banner--dark .hsrpp-update-close { color: #bbb; }
@media (max-width: 380px) {
.hsrpp-update-banner { font-size: 12.5px; gap: 8px; padding: 8px 10px; }
.hsrpp-update-banner .hsrpp-update-body span { display: none; }
.hsrpp-update-banner .hsrpp-update-btn { padding: 7px 11px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
.hsrpp-update-banner { transition: opacity .2s ease; transform: none; }
}
@media (max-width: 380px) {
.hsrpp-nav a { font-size: 10.5px; }
.hsrpp-nav a svg { width: 20px; height: 20px; }
}
/* ============================================================
Splash / Intro screen
Full-viewport cover shown on first visit of a session. The
landing page includes the markup; CSS here handles layout,
animation, and the fade-out on "Enter HSRPP 2026".
============================================================ */
.hsrpp-splash {
position: fixed;
inset: 0;
z-index: 20000; /* above tab bar (10000) and everything else */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
overflow: hidden;
background-color: #2b2b2b; /* fallback while image loads */
font-family: var(--font-body);
}
/* Background image — a real ![]()
element, not a CSS background. Positioned
absolutely so it ignores the parent flex and fills the full viewport.
`object-fit: cover` crops the image to fully fill the splash on every
aspect ratio, from narrow mobile portrait to wide desktop landscape. */
.hsrpp-splash > .hsrpp-splash__bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
/* Slow drift/zoom — starts slightly zoomed so the edges never expose */
animation: hsrpp-splash-zoom 18s ease-out forwards;
transform-origin: center 40%;
will-change: transform;
user-select: none;
-webkit-user-drag: none;
pointer-events: none;
/* Guarantee the image isn't squashed or auto-sized by any parent rules */
max-width: none;
max-height: none;
min-width: 0;
min-height: 0;
display: block;
z-index: 0;
}
/* Gradient overlay for legibility — a pseudo-element on the splash itself,
so it sits above the image but below the text content (z-index:2). Using
the parent's ::before avoids the extra wrapping div and removes any chance
of the image being constrained by a badly sized container. */
.hsrpp-splash::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.30) 0%,
rgba(0, 0, 0, 0.48) 48%,
rgba(0, 0, 0, 0.78) 100%
);
pointer-events: none;
z-index: 1;
}
/* Hide the splash when the landing page marks it ready to dismiss */
body.hsrpp-splash-hidden .hsrpp-splash {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .55s ease, visibility 0s linear .55s;
}
/* Prevent content scroll while splash is visible */
body.hsrpp-splash-active { overflow: hidden; }
html.hsrpp-splash-active { overflow: hidden; }
@keyframes hsrpp-splash-zoom {
from { transform: scale(1.06) translateY(0); }
to { transform: scale(1.14) translateY(-1.5%); }
}
.hsrpp-splash__inner {
position: relative;
z-index: 2;
max-width: 640px;
padding: 34px clamp(22px, 5vw, 42px);
padding-top: max(34px, calc(env(safe-area-inset-top) + 24px));
padding-bottom: max(34px, calc(env(safe-area-inset-bottom) + 24px));
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
/* Entry animation — subtle rise/fade */
animation: hsrpp-splash-in 900ms cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes hsrpp-splash-in {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
.hsrpp-splash__logo {
width: clamp(180px, 40vw, 260px);
height: auto;
display: block;
/* White logo on a dark image — add a soft drop shadow so it pops */
filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.55));
margin-bottom: 4px;
}
.hsrpp-splash__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 7px 14px;
border-radius: 999px;
color: #fff;
}
.hsrpp-splash__eyebrow .dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--qub-gold);
box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.7);
animation: hsrpp-splash-pulse 1.8s ease-out infinite;
}
@keyframes hsrpp-splash-pulse {
0% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(201, 162, 39, 0); }
100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
}
.hsrpp-splash__title {
font-family: var(--font-heading);
font-weight: 700;
font-size: clamp(38px, 8vw, 62px);
line-height: 1.02;
letter-spacing: -0.01em;
margin: 4px 0 0;
text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}
.hsrpp-splash__sub {
font-family: var(--font-body);
font-size: clamp(14px, 2.6vw, 17px);
font-weight: 400;
font-style: italic;
line-height: 1.45;
max-width: 36ch;
margin: 0 auto;
opacity: 0.92;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.hsrpp-splash__dates {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-heading);
font-weight: 500;
font-size: clamp(14px, 2.4vw, 16px);
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.95);
margin-top: 4px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.hsrpp-splash__dates svg {
width: 18px; height: 18px;
stroke: currentColor; fill: none;
stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.hsrpp-splash__cta {
margin-top: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 220px;
padding: 14px 28px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 16px;
letter-spacing: 0.02em;
color: #ffffff;
background: linear-gradient(135deg, var(--qub-gold) 0%, var(--qub-gold-dark) 100%);
border: 0;
border-radius: 999px;
cursor: pointer;
text-decoration: none;
box-shadow:
0 12px 28px rgba(0, 0, 0, 0.35),
0 0 0 1px rgba(255, 255, 255, 0.22) inset;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
-webkit-tap-highlight-color: transparent;
}
.hsrpp-splash__cta:hover,
.hsrpp-splash__cta:focus-visible {
transform: translateY(-2px);
box-shadow:
0 16px 34px rgba(0, 0, 0, 0.42),
0 0 0 1px rgba(255, 255, 255, 0.3) inset;
outline: none;
}
.hsrpp-splash__cta:active { transform: translateY(0); }
.hsrpp-splash__cta svg {
width: 18px; height: 18px;
stroke: currentColor; fill: none;
stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.hsrpp-splash__footer {
position: absolute;
bottom: max(18px, env(safe-area-inset-bottom));
left: 0; right: 0;
text-align: center;
font-size: 11.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.65);
z-index: 2;
pointer-events: none;
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
.hsrpp-splash { animation: none; }
.hsrpp-splash__inner { animation: none; }
.hsrpp-splash__eyebrow .dot { animation: none; }
}