/* ===========================================================================
main.css
---------------------------------------------------------------------------
Layout + components for the BTS single-page site.
The design tokens (tokens/fonts.css, colors.css, spacing.css, typography.css)
are loaded as direct s in index.html — in that order, before this file
— rather than via @import here. Direct links fetch in parallel and revalidate
cleanly; an @import chain serialises the requests and caches awkwardly.
========================================================================== */
/* ---------------------------------------------------------------------------
1. Reset / base
--------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }
html {
scroll-behavior: smooth;
/* Snap between the two full-height sections for a deliberate, sectioned feel. */
scroll-snap-type: y proximity;
}
body {
background-color: var(--bg-base);
color: var(--text-primary);
min-height: 100vh;
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
/* Keyboard focus: a single, high-contrast sky-blue ring on every interactive
element. :focus-visible keeps it keyboard-only (no ring on mouse click).
The offset lifts it clear of glass/coloured backgrounds so it never gets
lost the way the faint UA default did. */
:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 3px;
border-radius: 4px;
}
/* Pill controls get a ring that hugs their shape. */
.nav__link:focus-visible,
.btn:focus-visible,
.logo:focus-visible { outline-offset: 4px; border-radius: var(--radius-pill); }
/* The skip-link target is a landmark, not a control — no ring when focused. */
.section[tabindex]:focus,
.section[tabindex]:focus-visible { outline: none; }
/* Visually-hidden but screen-reader-available. */
.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;
}
/* Skip-link: off-screen until focused, then drops in at top-left so keyboard
users can jump straight past the nav to the hero content. */
.skip-link {
position: fixed;
top: var(--space-3);
left: var(--space-3);
z-index: 200;
padding: 12px 20px;
border-radius: var(--radius-pill);
background: var(--c-surface);
color: var(--text-on-light);
font-family: var(--font-body);
font-weight: 500;
font-size: 0.875rem;
box-shadow: var(--shadow-pill);
transform: translateY(-150%); /* tucked above the viewport */
transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }
/* ---------------------------------------------------------------------------
2. Aurora background
---------------------------------------------------------------------------
The WebGL canvas (js/aurora.js) and the CSS fallback both live in this
fixed, full-viewport layer behind all content (z-index:-1).
.aurora-fallback is a layered radial-gradient field that animates only when
WebGL is unavailable. js/aurora.js adds `.webgl-active` to on success,
which hides the fallback so the two never both run.
--------------------------------------------------------------------------- */
.aurora {
position: fixed;
inset: 0;
z-index: -1;
background-color: var(--bg-base); /* base ground beneath everything */
overflow: hidden;
}
#aurora-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
/* CSS fallback: 6 oversized radial blobs under a heavy blur, each drifting on
its own staggered keyframe, plus a screen-blended linear sheen that breathes.
Only shown when WebGL did not initialise. */
.aurora-fallback {
position: absolute;
inset: 0;
display: none; /* shown by JS only if WebGL fails */
filter: blur(80px);
}
html:not(.webgl-active) .aurora-fallback { display: block; }
.aurora-fallback span {
position: absolute;
border-radius: 50%;
/* Each blob is far larger than the viewport so motion reads as a morphing
field rather than discrete circles crossing the screen. */
width: 150vmax;
height: 150vmax;
left: 50%; top: 50%;
will-change: transform;
}
.aurora-fallback .b1 { background: radial-gradient(circle, var(--grad-3) 0%, transparent 60%); animation: drift1 26s ease-in-out infinite; }
.aurora-fallback .b2 { background: radial-gradient(circle, var(--grad-4) 0%, transparent 55%); width: 130vmax; height: 130vmax; animation: drift2 34s ease-in-out infinite; }
.aurora-fallback .b3 { background: radial-gradient(circle, var(--grad-2) 0%, transparent 62%); width: 170vmax; height: 170vmax; animation: drift3 40s ease-in-out infinite; }
.aurora-fallback .b4 { background: radial-gradient(circle, var(--grad-3) 0%, transparent 58%); animation: drift4 30s ease-in-out infinite; }
.aurora-fallback .b5 { background: radial-gradient(circle, var(--grad-4) 0%, transparent 50%); width: 120vmax; height: 120vmax; animation: drift5 22s ease-in-out infinite; }
.aurora-fallback .b6 { background: radial-gradient(circle, var(--grad-2) 0%, transparent 64%); width: 160vmax; height: 160vmax; animation: drift6 38s ease-in-out infinite; }
/* Low-opacity screen-blended sheen so the whole field gently breathes. */
.aurora-fallback .sheen {
width: 200vmax; height: 200vmax;
border-radius: 0;
background: linear-gradient(120deg, transparent 0%, var(--grad-3) 40%, var(--grad-4) 55%, transparent 80%);
background-size: 250% 250%;
mix-blend-mode: screen;
opacity: 0.18;
animation: breathe 30s ease-in-out infinite;
}
@keyframes drift1 { 0%,100% { transform: translate(-65%, -60%) scale(1); } 50% { transform: translate(-35%, -40%) scale(1.3); } }
@keyframes drift2 { 0%,100% { transform: translate(-30%, -65%) scale(1.1); } 50% { transform: translate(-60%, -35%) scale(1); } }
@keyframes drift3 { 0%,100% { transform: translate(-60%, -35%) scale(1); } 50% { transform: translate(-45%, -65%) scale(1.25); } }
@keyframes drift4 { 0%,100% { transform: translate(-40%, -55%) scale(1.15); } 50% { transform: translate(-65%, -45%) scale(1); } }
@keyframes drift5 { 0%,100% { transform: translate(-55%, -45%) scale(1); } 50% { transform: translate(-35%, -60%) scale(1.3); } }
@keyframes drift6 { 0%,100% { transform: translate(-45%, -60%) scale(1.2); } 50% { transform: translate(-55%, -35%) scale(1); } }
@keyframes breathe { 0%,100% { transform: translate(-50%, -50%); background-position: 0% 50%; } 50% { transform: translate(-50%, -50%); background-position: 100% 50%; } }
/* A subtle vignette tying the aurora to the dark ground at the edges. */
.aurora::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(120% 100% at 50% 0%, transparent 40%, rgba(6, 17, 43, 0.55) 100%);
}
/* ---------------------------------------------------------------------------
3. Floating glass navigation
--------------------------------------------------------------------------- */
.nav {
position: fixed;
top: var(--space-3);
left: 50%;
transform: translateX(-50%);
z-index: 100;
width: min(100% - 2 * var(--space-3), var(--container-max));
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: 10px 12px 10px 18px;
border-radius: var(--radius-pill);
/* Frosted glass over the aurora. */
background: var(--glass-fill);
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-pill);
}
/* --- Logo lockup: SVG bull + recreated wordmark, as one unit ------------- */
.logo {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 2px 6px;
line-height: 1;
}
.logo__bull {
width: 30px;
height: auto;
flex: none;
color: var(--text-primary); /* bull inherits via currentColor */
}
/* Two-tier wordmark recreated as live text (crisp at any size, no raster). */
.logo__word {
display: inline-flex;
flex-direction: column;
gap: 1px;
}
.logo__bts {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.35rem;
letter-spacing: -0.02em;
color: var(--text-primary);
}
.logo__full {
font-family: var(--font-body);
font-weight: 500;
font-size: 0.5625rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-secondary);
}
/* --- Nav links ----------------------------------------------------------- */
.nav__links {
display: flex;
align-items: center;
gap: var(--space-1);
list-style: none;
}
.nav__link {
font-family: var(--font-body);
font-weight: 500;
font-size: 0.9375rem;
letter-spacing: 0.005em;
padding: 9px 18px;
border-radius: var(--radius-pill);
color: var(--text-primary);
white-space: nowrap; /* keep "Contact us" on one line */
transition: background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.nav__link--cta {
background: var(--accent);
color: #fff;
box-shadow: var(--shadow-glow);
}
/* Press feedback — fires on tap too, so the link feels responsive on touch. */
.nav__link:active { transform: scale(0.96); }
/* Hover effects only on real pointers; on touch :hover sticks after a tap. */
@media (hover: hover) and (pointer: fine) {
.nav__link:hover { background: var(--hover-tint); }
.nav__link--cta:hover { background: var(--accent-hover); }
}
/* ---------------------------------------------------------------------------
4. Buttons
--------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-body);
font-weight: 600;
font-size: 0.9375rem;
letter-spacing: 0.005em;
padding: 16px 32px;
border: none;
border-radius: var(--radius-pill);
cursor: pointer;
transition: transform var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out),
box-shadow var(--dur-med) var(--ease-out);
}
.btn--primary {
background: var(--accent);
color: #fff;
box-shadow: var(--shadow-glow), var(--shadow-pill);
}
.btn__arrow { transition: transform var(--dur-fast) var(--ease-out); }
/* Hover lift only on real pointers (a stuck lift after a tap feels broken). */
@media (hover: hover) and (pointer: fine) {
.btn--primary:hover {
background: var(--accent-hover);
transform: translateY(-2px);
box-shadow: 0 0 44px rgba(37, 99, 235, 0.6), var(--shadow-pill);
}
.btn--primary:hover .btn__arrow { transform: translateX(4px); }
}
/* Press feedback. Declared after :hover so the scale wins while held down. */
.btn--primary:active { transform: scale(0.97); }
/* ---------------------------------------------------------------------------
5. Section scaffolding
--------------------------------------------------------------------------- */
.section {
position: relative;
min-height: 100vh;
min-height: 100svh; /* mobile-safe viewport height */
display: flex;
align-items: center;
scroll-snap-align: start;
}
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* ---------------------------------------------------------------------------
6. Hero (Section 1) — sits over the aurora
--------------------------------------------------------------------------- */
.hero { text-align: left; }
/* Ink scrim behind the copy so white text keeps ≥4.5:1 even when a bright
sky-blue crest of the aurora drifts under it. Sits above the fixed aurora
(z-index:-1) but below the content. */
.hero::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background: var(--hero-scrim);
pointer-events: none;
}
.hero__inner {
max-width: 1100px;
position: relative;
z-index: 1; /* lift copy above the scrim */
}
.hero__title {
margin-bottom: var(--space-5);
max-width: 18ch; /* fits the longest word ("applications") */
}
.hero__actions {
display: flex;
align-items: center;
gap: var(--space-4);
flex-wrap: wrap;
}
/* ---------------------------------------------------------------------------
7. Closing panel (Section 2) — light off-white surface (Da Vinci style)
---------------------------------------------------------------------------
A cool off-white panel with large rounded top corners that lifts up over the
fixed aurora (the gradient peeks through the corners). Dark navy text on
light; heading and globe stack and centre.
--------------------------------------------------------------------------- */
.panel {
background: var(--c-surface);
color: var(--text-on-light);
border-radius: 48px 48px 0 0; /* rounded top reveals the aurora behind */
overflow: hidden;
box-shadow: var(--shadow-panel); /* lift the light panel off the aurora */
}
/* Centred vertical stack: heading on top, globe beneath. */
.panel__inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-6);
width: 100%;
padding-block: var(--space-6);
}
/* Full container width + balanced wrap -> reads on 1–2 lines, never truncates. */
.panel__title {
max-width: 22ch;
margin: 0 auto;
color: var(--text-on-light);
}
/* Globe sits below the heading, centred and square. */
.globe-wrap {
position: relative;
width: min(46vw, 460px);
aspect-ratio: 1 / 1;
min-width: 0;
}
#globe-canvas { width: 100%; height: 100%; display: block; }
/* Faint cool halo grounding the globe on the light surface. */
.globe-wrap::before {
content: '';
position: absolute;
inset: 6%;
border-radius: 50%;
background: radial-gradient(circle, var(--globe-halo) 0%, transparent 70%);
filter: blur(34px);
z-index: 0;
}
/* ---------------------------------------------------------------------------
7b. Contact page — centred block over the aurora
--------------------------------------------------------------------------- */
.contact { text-align: center; }
/* Radial ink scrim so the copy keeps contrast over the moving aurora. */
.contact::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background: radial-gradient(ellipse 80% 70% at 50% 45%,
rgba(6, 17, 43, 0.62) 0%, rgba(6, 17, 43, 0.30) 46%, transparent 76%);
pointer-events: none;
}
.contact__inner {
position: relative;
z-index: 1;
max-width: 680px;
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
.contact__title { margin: 0; max-width: 14ch; }
.contact__sub {
margin: 0;
max-width: 46ch;
color: var(--text-secondary);
}
/* Email — a clickable glass pill (the address is shown; socials are not). */
.contact__email {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-2);
padding: 14px 24px;
max-width: 100%;
border-radius: var(--radius-pill);
background: var(--glass-fill);
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-pill);
color: var(--text-primary);
font-family: var(--font-body);
font-weight: 500;
font-size: clamp(0.82rem, 2.6vw, 1.0625rem);
letter-spacing: 0;
overflow-wrap: anywhere; /* never overflow the viewport on mobile */
transition: background var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-med) var(--ease-out);
}
.contact__email svg { width: 20px; height: 20px; flex: none; color: var(--accent-bright); }
.contact__email:active { transform: scale(0.98); }
/* Social icons — icon-only links, each with an aria-label + title. */
.contact__socials {
display: flex;
gap: var(--space-3);
list-style: none;
margin: var(--space-3) 0 0;
padding: 0;
}
.social-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px; /* comfortably over the 44px tap target */
height: 56px;
border-radius: var(--radius-pill);
background: var(--glass-fill);
border: 1px solid var(--glass-border);
color: var(--text-primary);
box-shadow: var(--shadow-sm);
transition: background var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-med) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
}
.social-btn svg { width: 24px; height: 24px; }
.social-btn:active { transform: scale(0.94); }
/* Hover only on real pointers (no sticky hover after a tap on touch). */
@media (hover: hover) and (pointer: fine) {
.contact__email:hover {
background: var(--accent);
transform: translateY(-2px);
box-shadow: var(--shadow-glow), var(--shadow-pill);
}
.contact__email:hover,
.contact__email:hover svg { color: #fff; }
.social-btn:hover {
background: var(--accent);
border-color: transparent;
color: #fff;
transform: translateY(-3px);
box-shadow: var(--shadow-glow);
}
}
/* ---------------------------------------------------------------------------
7c. Apply page — multi-section application form
--------------------------------------------------------------------------- */
.apply { align-items: flex-start; padding-block: calc(var(--space-5) + 64px) var(--space-6); }
.apply::before { /* ink scrim for contrast over the aurora */
content: '';
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(180deg, rgba(6,17,43,0.7) 0%, rgba(6,17,43,0.45) 100%);
pointer-events: none;
}
.apply__inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 760px;
margin-inline: auto;
}
.apply__head { margin-bottom: var(--space-4); }
.apply__title { margin: 0 0 var(--space-2); }
.apply__sub { margin: 0; max-width: 60ch; color: var(--text-secondary); }
.apply__privacy {
margin-top: var(--space-3);
font-size: var(--fs-caption);
color: var(--text-secondary);
max-width: 64ch;
}
/* The form card — a solid dark panel (not frosted glass): forms want a calm,
legible surface, and a backdrop-blur over the animated aurora is a needless
cost. The border + shadow still lift it off the background. */
.form-card {
background: rgba(8, 19, 46, 0.92);
border: 1px solid var(--glass-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
padding: clamp(var(--space-3), 4vw, var(--space-5));
}
.form-section { border: none; margin: 0; padding: 0; }
.form-section + .form-section { margin-top: var(--space-5); }
.form-section__title {
margin-bottom: var(--space-4);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--hairline);
}
/* Field grid: two columns on wider cards, one on mobile. */
.field-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3) var(--space-4);
}
.field--full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label {
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--text-primary);
}
.field .req { color: var(--accent-bright); } /* required asterisk */
.field .opt { color: var(--text-secondary); font-weight: 400; font-size: 0.8em; }
.field input,
.field select,
.field textarea {
width: 100%;
font-family: var(--font-body);
font-size: 1rem; /* 16px — avoids iOS zoom-on-focus */
color: var(--text-primary);
background: var(--field-bg);
border: 1px solid var(--field-border);
border-radius: var(--radius-sm);
padding: 12px 14px;
transition: border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
}
.field input::placeholder { color: rgba(141, 162, 196, 0.7); }
.field select {
appearance: none;
/* chevron */
background-image: linear-gradient(45deg, transparent 50%, var(--c-slate) 50%),
linear-gradient(135deg, var(--c-slate) 50%, transparent 50%);
background-position: calc(100% - 20px) center, calc(100% - 15px) center;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-right: 38px;
cursor: pointer;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
}
/* Invalid state + inline message. */
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid .file-field {
border-color: var(--danger);
box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.22);
}
.field__error {
font-size: var(--fs-caption);
color: var(--danger);
min-height: 0;
}
/* File upload — styled label wrapping a hidden . */
.file-field {
display: flex;
align-items: center;
gap: var(--space-3);
background: var(--field-bg);
border: 1px dashed var(--field-border);
border-radius: var(--radius-sm);
padding: 14px;
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out);
}
.file-field input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-field__icon { flex: none; color: var(--accent-bright); width: 22px; height: 22px; }
.file-field__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.file-field__main { font-size: 0.9375rem; color: var(--text-primary); }
.file-field__hint { font-size: var(--fs-caption); color: var(--text-secondary); }
.file-field__name {
font-family: var(--font-body);
font-weight: 500;
font-size: 0.8125rem;
color: var(--accent-bright);
overflow-wrap: anywhere;
}
@media (hover: hover) and (pointer: fine) {
.file-field:hover { border-color: var(--accent); background: rgba(37, 99, 235, 0.08); }
}
/* Submit row + status. */
.form-actions {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
margin-top: var(--space-5);
}
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.btn--primary[disabled]:hover { transform: none; }
.form-status { font-size: 0.9375rem; }
.form-status.is-error { color: var(--danger); }
/* Spinner shown on the submit button while sending. */
.btn .spinner {
width: 16px; height: 16px;
border: 2px solid rgba(255, 255, 255, 0.45);
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Success state that replaces the form. */
.form-thanks {
text-align: center;
padding: clamp(var(--space-4), 6vw, var(--space-7)) var(--space-4);
}
.form-thanks__check {
width: 64px; height: 64px;
margin: 0 auto var(--space-4);
color: var(--success);
}
.form-thanks__title { margin: 0 0 var(--space-2); }
.form-thanks__body { margin: 0 auto; max-width: 46ch; color: var(--text-secondary); }
.form-thanks__actions { margin-top: var(--space-5); }
[hidden] { display: none !important; }
/* ---------------------------------------------------------------------------
8. Responsive
--------------------------------------------------------------------------- */
@media (max-width: 820px) {
.panel__inner { gap: var(--space-5); }
.globe-wrap { width: min(74vw, 400px); }
.panel { border-radius: 32px 32px 0 0; }
}
/* Application form: single column once the card gets narrow. */
@media (max-width: 600px) {
.field-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.logo__full { display: none; } /* keep lockup crisp & compact on phones */
.nav { padding: 8px 8px 8px 14px; }
/* Phone-width links also get the 44px tap target (width is a reliable proxy
for touch; the @media(hover:none) rule below covers wider touch devices). */
.nav__link {
padding: 8px 13px;
font-size: 0.75rem;
min-height: 44px;
display: inline-flex;
align-items: center;
}
.hero__actions { gap: var(--space-3); }
.btn { padding: 14px 26px; }
}
/* Touch devices: guarantee a 44px minimum tap target on the nav links
(the compact mobile padding alone leaves them ~33px tall). Scoped to
pointer-coarse devices so the desktop proportions are untouched. */
@media (hover: none) {
.nav__link {
min-height: 44px;
display: inline-flex;
align-items: center;
}
}
/* ---------------------------------------------------------------------------
9. Reduced motion — honour the user's OS preference everywhere
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
/* The aurora CSS blobs settle into a static composed field. */
.aurora-fallback span { animation: none !important; }
}