/* ========================================================================== B VISUAL — splash.css Holding page at /. One screen, no scroll: the dense star field is the whole surface, and the only jobs are to say who this is and to open an enquiry. ========================================================================== */ .splash { position: relative; /* the particle canvas is prepended in here */ isolation: isolate; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--s10) + var(--s6)) var(--gutter) var(--s6); background-image: var(--surface-plum); overflow: clip; } /* The field is injected as the first child at z-index 0; everything the visitor reads sits above it. */ .splash__inner { position: relative; z-index: 1; margin: auto 0; max-width: 62rem; } .splash__lockup { display: inline-flex; align-items: center; gap: var(--s3); color: var(--paper); } .splash__mark { width: clamp(38px, 4.6vw, 58px); height: auto; } .splash__mark .mark-body { fill: var(--purple); } .splash__mark .mark-edge { fill: var(--mint); } /* Masked rather than inlined, same reasoning as the nav wordmark: the supplied SVG hard-codes fill:#fff, which would put a raw colour outside tokens.css. */ .splash__type { height: clamp(17px, 2vw, 25px); aspect-ratio: 392.815 / 64.256; background-color: var(--paper); -webkit-mask: url("/assets/logo/logotype-white.svg") left center / contain no-repeat; mask: url("/assets/logo/logotype-white.svg") left center / contain no-repeat; } /* The tagline sits beside the wordmark on purpose now. Before, .label is inline-flex site-wide, so it simply flowed onto the lockup's line: 4px from the wordmark, baseline-aligned so it hung off the bottom of the mark, and with an 80px top margin that did nothing because they shared a line. A real flex row instead — centred against the wordmark, with actual space, and it drops below on a narrow screen rather than crushing. */ .splash__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s5); } .splash__eyebrow { margin: 0; } .splash__title { color: var(--paper); margin-top: var(--s8); max-width: 18ch; } .splash__sub { color: var(--bone); margin-top: var(--s6); } .splash__enter { margin-top: var(--s8); display: inline-flex; align-items: center; gap: var(--s2); color: var(--bone); border-bottom: var(--hairline); padding-bottom: 6px; transition: color var(--d-ui) var(--e-out), border-color var(--d-ui) var(--e-out); } .splash__enter:hover { color: var(--paper); border-color: var(--purple); } .splash__enter svg { width: 16px; height: 16px; transition: transform var(--d-ui) var(--e-out); } .splash__enter:hover svg { transform: translateX(4px); } /* --- Start a Project bar -------------------------------------------------- */ .splash__bar { position: relative; z-index: 1; margin-top: var(--s10); padding-top: var(--s6); border-top: var(--hairline); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s4); } .splash__bar-text { color: var(--paper); } .splash__bar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s5); } .splash__bar-link { color: var(--mute); border-bottom: var(--hairline); padding-bottom: 4px; transition: color var(--d-ui) var(--e-out), border-color var(--d-ui) var(--e-out); } .splash__bar-link:hover { color: var(--paper); border-color: var(--purple); } /* No .scroll-progress rule here: the splash writes its own and simply never includes the bar. Hiding an element that is not rendered is dead CSS. */ @media (max-width: 720px) { .splash { padding-top: calc(var(--s10) + var(--s4)); } /* Stack rather than wrap mid-phrase. */ .splash__head { flex-direction: column; align-items: flex-start; gap: var(--s4); } .splash__bar { flex-direction: column; align-items: flex-start; } } /* --- The gate ------------------------------------------------------------- A curtain in front of the enter link, not access control. Styled from the same primitives as the quick-form pop-up so it reads as part of the site rather than a browser prompt. No box-shadow (M5); the scrim does the lifting. -------------------------------------------------------------------------- */ .gate { position: fixed; inset: 0; z-index: var(--z-transition); display: grid; place-items: center; padding: var(--gutter); } .gate__scrim { position: absolute; inset: 0; background: rgba(9, 6, 20, .72); opacity: 0; transition: opacity var(--d-ui) var(--e-out); } .gate.is-open .gate__scrim { opacity: 1; } .gate__panel { position: relative; width: min(26rem, 100%); padding: var(--s6); border: var(--hairline); border-radius: var(--r-ui); background: var(--plum); opacity: 0; transform: translateY(10px); transition: opacity var(--d-ui) var(--e-out), transform var(--d-ui) var(--e-out); } .gate.is-open .gate__panel { opacity: 1; transform: translateY(0); } .gate__close { position: absolute; top: var(--s3); right: var(--s3); width: 28px; height: 28px; display: grid; place-items: center; border: var(--hairline); border-radius: var(--r-ui); background: none; color: var(--mute); cursor: pointer; transition: color var(--d-ui) var(--e-out), border-color var(--d-ui) var(--e-out); } .gate__close:hover { color: var(--paper); border-color: var(--purple); } .gate__close svg { width: 11px; height: 11px; } .gate__title { color: var(--paper); margin-top: var(--s2); } .gate__sub { color: var(--bone); margin-top: var(--s2); } .gate__form { margin-top: var(--s5); display: flex; flex-direction: column; gap: var(--s4); } .gate__go { align-self: flex-start; } .gate__alt { color: var(--mute); margin-top: var(--s4); } .gate__alt a { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; } .gate__alt a:hover { color: var(--purple); } /* Stop the field behind scrolling under the panel. */ html.gate-open { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .gate__scrim, .gate__panel { transition: none; } }