/* public/splash.css — [P] V1 public entry (PUB-01..PUB-03). Canon §17.33.
*
* Loaded after shared.css and brand.css, never before. This file is NOT a copy of the design
* prototype's styles.css: that file re-declared brand colours as raw hex and re-themed shared
* components, which §10 forbids and §17.30 exists to avoid. Only the geometry, motion and image
* treatment are carried across; every brand value comes from a token.
*
* Image-overlay values. A photographic hero needs white- and black-alpha ink that is not a brand
* colour and has no token in shared.css's set (§10's tokens are all opaque, dark-surface values).
* Those values are declared ONCE here, scoped to this view, and never re-used elsewhere. Widening
* §10 with a named image-overlay surface is logged as an open canon question rather than assumed.
*/
.pt-splash-body {
--splash-ink: rgba(255, 250, 244, .96);
--splash-ink-soft: rgba(255, 255, 255, .86);
--splash-glass: rgba(255, 255, 255, .055);
--splash-glass-line: rgba(255, 255, 255, .16);
--splash-text-shadow: 0 1px 18px rgba(0, 0, 0, .55);
--splash-logo-shadow: drop-shadow(0 2px 12px rgba(0, 0, 0, .35));
--splash-glass-shadow: 0 16px 40px rgba(0, 0, 0, .18);
/* Content column geometry. The palm silhouette occupies the RIGHT ~40% of the hero and its trunk
begins near 58% of viewport width, so the text column stops well clear of it. */
--splash-left-edge: 6vw;
--splash-right-edge: 55vw;
min-height: 100dvh;
margin: 0;
font-family: var(--fw-sans);
color: var(--splash-ink);
background: var(--fw-bg);
overflow: hidden;
overscroll-behavior: none;
-webkit-font-smoothing: antialiased;
}
/* PUB-01 — the only decorative full-bleed image in the product. */
.pt-splash {
position: fixed;
inset: 0;
background-image: url('/assets/splash-hero.jpg');
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
background-color: var(--fw-bg);
z-index: 1;
}
.pt-splash-logo {
position: fixed;
top: 28px;
left: 40px;
display: block;
z-index: 4;
border-radius: var(--fw-radius-base);
animation: pt-splash-fade 420ms var(--fw-ease) both;
}
.pt-splash-logo img {
display: block;
/* 35px, down from 44px on the owner's instruction — 20% smaller. The value is a height, not a
width: palmtree-logo-light.png is a fixed-aspect lock-up, so constraining the side that has a
type size in it keeps the wordmark's cap height predictable and lets the width follow. */
height: 35px;
width: auto;
filter: var(--splash-logo-shadow);
}
.pt-splash-content {
position: fixed;
top: 0;
bottom: 0;
left: var(--splash-left-edge);
right: calc(100vw - var(--splash-right-edge));
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--fw-space-7);
text-align: center;
animation: pt-splash-fade 620ms var(--fw-ease) both 120ms;
}
/* PUB-02 — headline in the brand display family (--brand-display-family, §17.30).
Two sizes, one heading. "Approved Employer" sets at half the size of "Compliance Toolkit", so the
two lines are separate elements — but they remain inside a single , because the heading of
this page is still the whole phrase "Approved Employer Compliance Toolkit". Splitting it into an
and a
, or into two headings, would change what the document says its subject is to serve
a type decision. The eyebrow is a `display: block` span inside that heading, so the break is a
consequence of the layout and the heading still reads as one phrase to a screen reader.
The ratio is computed, not typed twice. --splash-title-size is the only size in this block; the
eyebrow is a multiple of it, so the relationship holds at every viewport width the clamp passes
through and cannot drift the next time either number is touched.
--splash-eyebrow-ratio was 0.5 ("half the headline") and is now 0.6, the owner's 20% increase on
that: .5 * 1.2. It is a named property rather than a literal so the next adjustment is one number
in one place, and so the 0.6 is readable as a decision instead of arithmetic nobody can retrace. */
.pt-splash-title {
--splash-title-size: clamp(38px, 5vw, 76px);
--splash-eyebrow-ratio: .6;
margin: 0;
font-family: var(--brand-display-family);
font-weight: 400;
font-size: var(--splash-title-size);
line-height: 1.05;
letter-spacing: -.005em;
color: var(--splash-ink);
text-shadow: var(--splash-text-shadow);
}
.pt-splash-eyebrow {
display: block;
font-size: calc(var(--splash-title-size) * var(--splash-eyebrow-ratio));
/* The smaller line is set a touch looser: at half the size the same -.005em tracking reads tight,
and the two lines need to look like one lock-up rather than one line shrunk. */
letter-spacing: .01em;
line-height: 1.25;
}
/* PUB-03 — single action; no secondary path on this page. A real anchor to /auth, so it works
without JavaScript and can be opened in a new tab like any other link. */
.pt-splash-begin {
display: inline-block;
padding: 15px 52px;
border-radius: var(--fw-radius-pill);
background: var(--splash-glass);
border: 1px solid var(--splash-glass-line);
box-shadow: var(--splash-glass-shadow);
backdrop-filter: blur(14px) saturate(1.1);
-webkit-backdrop-filter: blur(14px) saturate(1.1);
text-decoration: none;
transition: background var(--fw-dur) var(--fw-ease), border-color var(--fw-dur) var(--fw-ease);
}
.pt-splash-begin span {
font-weight: 300;
font-size: clamp(15px, 1.4vw, 18px);
letter-spacing: .4em;
text-transform: uppercase;
color: var(--splash-ink-soft);
}
.pt-splash-begin:hover {
background: var(--splash-glass-line);
border-color: var(--splash-ink-soft);
}
.pt-splash-begin:focus-visible,
.pt-splash-logo:focus-visible {
outline: 2px solid var(--brand-accent);
outline-offset: 4px;
}
/* PUB-04, the brand voice line, was removed from this surface on the owner's instruction. Its rule
is deleted rather than commented out: dead CSS is indistinguishable from CSS that stopped being
reached by accident. Git holds the previous version if it is ever wanted back. */
@keyframes pt-splash-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 860px) {
.pt-splash-body { --splash-left-edge: 8vw; --splash-right-edge: 92vw; }
.pt-splash-logo { top: 20px; left: 20px; }
.pt-splash-logo img { height: 27px; }
.pt-splash-content { gap: var(--fw-space-6); }
}
@media (prefers-reduced-motion: reduce) {
.pt-splash-logo, .pt-splash-content { animation-duration: .001ms; }
}