bounding rect starts at the text glyph top (below the leading),
while the bounding rect starts at the line-box top (above
the leading). Pushing the
down by ~5px brings the first
glyph in line with 'Careers' / 'Imprint'. */
margin: 0;
padding-top: 5px;
font-size: 13.5px;
line-height: 1.55;
color: var(--ink-3); /* match the greyish link color */
letter-spacing: -0.005em;
text-transform: none;
}
.foot-security-badges {
display: flex;
gap: 22px;
margin-top: 18px;
justify-content: flex-start;
}
.foot-badge {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 6px;
color: var(--ink-2);
}
.foot-badge svg {
width: 26px;
height: 26px;
}
.foot-badge-label {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.08em;
color: var(--ink-3);
text-transform: uppercase;
}
@media (max-width: 720px) {
.foot-security { max-width: none; }
}
/* --- temporary section hides (revisit when there's real content) --- */
/* foot-cols children now in order: [spacer, Product, Company, Legal] —
Security badge moved out into .foot-brand. */
/* Product column: removed from layout entirely (display: none).
When Product gets real content, swap to `> * { visibility: hidden }`
or delete this rule to bring it back. */
.foot-cols .foot-col:nth-child(2) {
display: none;
}
/* Company column items: [About, Manifesto, Careers, Contact]
Hide About, Manifesto, and Contact until those pages exist. */
.foot-cols .foot-col:nth-child(3) li:nth-child(1),
.foot-cols .foot-col:nth-child(3) li:nth-child(2),
.foot-cols .foot-col:nth-child(3) li:nth-child(4) {
display: none;
}
/* Legal column items: [Imprint, Terms, Privacy, DPA]
Hide Terms (no terms.md content yet) and DPA. */
.foot-cols .foot-col:nth-child(4) li:nth-child(2),
.foot-cols .foot-col:nth-child(4) li:nth-child(4) {
display: none;
}
.foot-bottom {
padding: 18px 0 8px;
border-top: 1px solid var(--line);
font-family: var(--f-mono);
font-size: 11.5px;
color: var(--ink-3);
letter-spacing: 0.04em;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.foot-region {
display: inline-flex;
align-items: center;
gap: 8px;
}
.foot-flag {
display: inline-block;
height: 12px;
width: 18px;
flex-shrink: 0;
border-radius: 1.5px;
overflow: hidden;
}
/* Giant striped watermark – huge, overflows the viewport, cropped at the bottom */
.foot-mark {
position: relative;
margin-top: -0.05em;
width: 100%;
pointer-events: none;
user-select: none;
display: flex;
justify-content: center;
overflow: hidden;
/* Container is sized to ~80% of rendered text height (font * 0.78)
so the bottom of every letter is "slightly cut off" – the original
design intent – without removing the upper halves of the glyphs.
Earlier clamp(150, 22vw, 320) was too aggressive (~45% cropped on
widescreen); earlier clamp(206, 28vw, 366) was the opposite (no
crop at all on laptop widths). This curve keeps the crop at a
consistent ~18-22% across the full viewport range. */
height: clamp(180px, 20vw, 400px);
}
.foot-mark-text {
font-family: var(--f-display);
font-weight: 800;
/* min was 265px which forced the word to overflow on viewports <600px.
Measured: kasdor at Inter Tight 800 + -0.06em renders ~2.91x font-size
wide. At 32vw the word is ~93% of viewport — comfortable fit down to
~320px viewport. Max restored to 663px (original design) so the
watermark reads as huge / cropped on widescreen monitors. */
font-size: clamp(80px, 32vw, 663px);
letter-spacing: -0.06em;
line-height: 0.78;
background-image: repeating-linear-gradient(
to bottom,
var(--accent) 0 2px,
transparent 2px 7px
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
opacity: 0.62;
padding: 0;
margin: 0;
white-space: nowrap;
display: block;
transform: translateY(-4%);
}
/* reveal */
.reveal { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
.reveal.pre { opacity: 0; transform: translateY(10px); }
.reveal.in { opacity: 1; transform: none; }
::selection { background: var(--accent); color: var(--accent-ink); }
/* ---------- booking modal ---------- */
.booking-modal {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
}
.booking-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
animation: booking-fade-in .25s ease-out both;
}
.booking-frame {
position: relative;
width: 100%;
/* wider frame so the side padding can be a substantial visible
strip AND Cal still has enough room for its 3-column layout */
max-width: 1100px;
max-height: calc(100vh - 64px);
background-color: oklch(0.13 0.012 60);
border-radius: 20px;
overflow: hidden;
z-index: 1;
color: var(--paper);
/* same compositor isolation as .hero / .cta-wrap — keeps the
Cal iframe above from forcing repaints of the blurred bg */
contain: paint;
isolation: isolate;
animation: booking-pop-in .35s cubic-bezier(.16, 1, .3, 1) both;
display: flex;
flex-direction: column;
}
.booking-frame::before,
.booking-frame::after {
content: "";
position: absolute;
inset: -25%;
pointer-events: none;
/* match endor-whisper-smooth source – will-change includes both
properties the keyframes animate so the browser can plan ahead. */
will-change: transform, background-position;
z-index: 0;
}
.booking-frame::before {
background: linear-gradient(135deg, oklch(0.13 0.012 60) 0%, oklch(0.92 0.10 70 / 0.85) 18%, oklch(0.13 0.012 60) 34%, oklch(0.70 0.21 38 / 0.95) 52%, oklch(0.13 0.012 60) 68%, oklch(0.55 0.24 32 / 0.85) 85%, oklch(0.13 0.012 60) 100%);
background-size: 200% 200%;
filter: blur(15px);
animation: heat-flow-a 14s ease-in-out infinite alternate;
}
.booking-frame::after {
background: linear-gradient(120deg, transparent 0%, oklch(0.92 0.10 70 / 0.50) 30%, transparent 50%, oklch(0.60 0.22 40 / 0.55) 72%, transparent 100%);
background-size: 240% 240%;
filter: blur(20px);
mix-blend-mode: screen;
animation: heat-flow-b 20s ease-in-out infinite alternate;
}
.booking-overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
/* lighter overlay so the heat-flow stays visibly orange in the side
padding around the Cal widget (was 0.4 — too dark, killed the
orange on the L/R edges) */
background: rgba(0, 0, 0, 0.22);
}
.booking-close {
position: absolute;
top: 16px;
right: 16px;
z-index: 3;
width: 38px;
height: 38px;
border: none;
background: rgba(255, 255, 255, 0.08);
color: var(--paper);
border-radius: 999px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
outline: none;
/* simple background transition only – no transform, no border, no
focus-ring competing with hover. SVG inside has pointer-events:none
so hover lives only on the button rect. */
transition: background .15s ease;
}
.booking-close:hover,
.booking-close:focus-visible { background: rgba(255, 255, 255, 0.22); }
.booking-close:active { background: rgba(255, 255, 255, 0.30); }
.booking-close svg { width: 18px; height: 18px; pointer-events: none; }
.booking-content {
position: relative;
z-index: 2;
/* 70px L/R strips on the 1100px modal. Cal area = 960px, well
above its 3-column threshold. A touch thicker than the 60px
'finally!' version per the latest request. */
padding: 40px 70px 32px;
overflow-y: auto;
flex: 1;
min-height: 0;
}
.booking-header { margin-bottom: 28px; max-width: 60ch; }
.booking-eyebrow {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
margin: 0 0 12px;
}
.booking-title {
font-family: var(--f-display);
font-size: clamp(28px, 3.4vw, 44px);
font-weight: 500;
letter-spacing: -0.03em;
margin: 0;
color: var(--paper);
line-height: 1.02;
}
.booking-sub {
margin: 10px 0 0;
font-size: 15px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.72);
}
.booking-cal {
border-radius: 14px;
overflow: hidden;
/* Dark semi-transparent wrapper that frames the Cal iframe on all
four sides. Padding 30 top/bottom (= X) and 20 L/R (= 2X/3). */
background: rgba(0, 0, 0, 0.45);
padding: 30px 20px;
min-height: 640px;
}
@keyframes booking-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes booking-pop-in {
from { opacity: 0; transform: translateY(16px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 720px) {
/* Mobile full-screen modal. Use DYNAMIC viewport units (dvh) — plain
100vh on mobile is the *large* viewport (height with the address bar
hidden), so the frame rendered taller than the visible screen and the
centered layout pushed the close button up under the browser toolbar
and the bottom below the fold (couldn't close it). dvh tracks the
actually-visible area. Anchor the modal at the top (release `bottom`)
and make it exactly one visible viewport tall; the close button pins
to the frame's top-right, the calendar scrolls inside. */
.booking-modal {
padding: 0;
inset: 0 0 auto 0; /* top/left/right: 0, bottom: auto */
height: 100dvh;
align-items: stretch;
}
.booking-frame {
border-radius: 0;
height: 100%;
max-height: 100dvh;
}
.booking-content { padding: 24px 20px 20px; }
.booking-cal { min-height: 540px; }
}
/* =============================================================================
* Perf hot-fix follow-up (2026-05-28): pause expensive animations when the
* booking modal is open.
*
* Cal.com's embedded calendar iframe is already heavy on retina (their JS,
* their DOM, their constant postMessage heartbeat). Stacking our animated
* heat-flow gradients with `filter: blur(30-40px)` underneath the modal AND
* inside the booking frame on top of that brings the GPU to its knees on
* M-series MacBooks — manifests as fan noise and visible screen flicker.
*
* When `
` is set (BookingModal's effect adds it on
* mount, removes on unmount), pause the booking-frame heat-flow behind the Cal
* iframe. (The hero + CTA are now video and the card glows are static, so the
* booking frame is the only animated gradient left to pause.)
*
* `animation-play-state: paused` retains the current frame, so the visual
* doesn't snap back to t=0 — it just freezes where it is. When the modal
* closes, the class is removed and animations resume.
* ===========================================================================*/
body.modal-open .booking-frame::before,
body.modal-open .booking-frame::after {
animation-play-state: paused !important;
}
/* Also respect user-level reduced-motion preference. Anyone with the OS
* accessibility setting enabled gets static gradients site-wide. */
@media (prefers-reduced-motion: reduce) {
.booking-frame::before,
.booking-frame::after {
animation: none !important;
}
}
/* =============================================================================
* Page Visibility — pause every animation site-wide when the tab is hidden.
* Hooks into the visibilitychange listener in app.jsx (body.tab-hidden). The
* universal selector is safe because the user literally can't see the tab, so
* there's no UX impact; animations resume when the tab is shown again.
*
* (Origin: perf hot-fix 3, 2026-05-28 — the GPU-starvation rescue. The other
* changes from that pass — killing the secondary ::after heat-flow layers and
* cutting blur radii — were later superseded when the hero + CTA heat-flows
* became