/* flickersoft.com — page layer on top of the Nocturne design system.
styles.css owns the tokens and components; this file owns the site's own
chrome, the projector effects, and the responsive rules.
The design these pages came from carried every value as an inline style.
Those are classes here instead: inline styles outrank stylesheet rules,
so nothing below ~900px could have been made to reflow. */
html { overflow-x: clip; }
/* clip, not hidden: `overflow: hidden` would make a scroll container
and the sticky header would stop sticking. */
body { background: var(--color-bg); }
/* The width/height attributes on ![]()
reserve layout space before the file
loads, but they also land as real used values -- so any image the CSS
resizes by width alone would keep its attribute height and stretch.
(The hero mark rendered 201x400 without this.) */
img { height: auto; }
/* ═══ keyframes ═══════════════════════════════════════════════════════ */
@keyframes fs-flicker {
0%, 100% { opacity: 0.92; }
8% { opacity: 0.62; }
12% { opacity: 0.98; }
26% { opacity: 0.78; }
41% { opacity: 1; }
55% { opacity: 0.7; }
62% { opacity: 0.95; }
78% { opacity: 0.84; }
91% { opacity: 0.99; }
}
@keyframes fs-grain {
0% { transform: translate3d(0, 0, 0); }
25% { transform: translate3d(-3%, 2%, 0); }
50% { transform: translate3d(2%, -3%, 0); }
75% { transform: translate3d(-2%, -2%, 0); }
100% { transform: translate3d(0, 0, 0); }
}
@keyframes fs-marquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@keyframes fs-perf {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(0, -48px, 0); }
}
@keyframes fs-drift {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(0, -14px, 0) scale(1.03); }
}
@keyframes fs-pulse {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 0.85; transform: scale(1.04); }
}
/* ═══ page shell ══════════════════════════════════════════════════════ */
.page {
position: relative;
min-height: 100vh;
min-height: 100dvh; /* iOS Safari's collapsing toolbar */
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-size: 15px;
line-height: 1.55;
}
.page--column { display: flex; flex-direction: column; }
.page__body { position: relative; z-index: 3; }
/* Section gutters — one value, used by every band on the page. */
.band { padding-inline: clamp(20px, 5vw, 72px); }
/* Anchor targets clear the sticky header instead of hiding under it. */
:target, [id] { scroll-margin-top: 78px; }
/* ═══ projector effects (home) ════════════════════════════════════════ */
.fx-bg {
position: fixed; inset: 0; width: 100%; height: 100%;
z-index: 0; pointer-events: none;
}
.fx-flicker {
position: fixed; inset: 0; z-index: 1; pointer-events: none;
background: radial-gradient(120% 90% at 50% 0%, rgba(145, 132, 217, 0.16), transparent 60%);
opacity: 0.3;
}
.fx-grain {
position: fixed; inset: -20%; z-index: 2; pointer-events: none;
opacity: 0.055; mix-blend-mode: screen;
background-image: url('grain.png'); background-size: 180px 180px;
animation: fs-grain 1.1s steps(4, end) infinite;
}
.fx-beam {
position: fixed; top: 0; left: 0; width: 900px; height: 900px;
margin: -450px 0 0 -450px; z-index: 1; pointer-events: none;
background: radial-gradient(circle at 50% 50%, rgba(181, 171, 252, 0.13), rgba(145, 132, 217, 0.05) 45%, transparent 70%);
will-change: transform;
}
/* A single soft glow instead of the canvas, on the two static pages. */
.fx-glow { position: fixed; inset: 0; pointer-events: none; }
.fx-glow--support { background: radial-gradient(80% 55% at 50% 0%, rgba(145, 132, 217, 0.18), transparent 62%); }
.fx-glow--legal { background: radial-gradient(90% 60% at 22% -10%, rgba(145, 132, 217, 0.16), transparent 65%); }
/* ═══ header ══════════════════════════════════════════════════════════ */
.site-nav {
position: relative;
display: flex; align-items: center; justify-content: space-between; gap: 24px;
padding-block: 18px;
border-bottom: 1px solid var(--color-divider);
}
.site-nav--sticky {
position: sticky; top: 0; z-index: 20;
backdrop-filter: blur(14px);
background: linear-gradient(to bottom, rgba(22, 24, 38, 0.92), rgba(22, 24, 38, 0.6));
}
.site-nav__brand {
display: flex; align-items: center; gap: 12px;
color: var(--color-text); text-decoration: none; flex: none;
}
.site-nav__mark { width: 30px; height: 30px; filter: invert(1); opacity: 0.9; }
.site-nav__word {
font-family: var(--font-heading); font-weight: 500; font-size: 13px;
letter-spacing: 0.32em; text-transform: uppercase;
}
.site-nav__links {
display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px);
font-family: var(--font-heading); font-size: 12px;
letter-spacing: 0.16em; text-transform: uppercase;
}
.site-nav__link {
color: var(--color-neutral-400); text-decoration: none;
padding-block: 6px; /* toward a 44px tap target */
}
.site-nav__link:hover { color: var(--color-text); }
.site-nav__cta {
letter-spacing: 0.16em; text-transform: uppercase;
font-size: 11px; padding: 9px 16px;
}
/* ═══ footer ══════════════════════════════════════════════════════════ */
.site-footer {
position: relative;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 18px; padding-block: 26px 40px;
border-top: 1px solid var(--color-divider);
font-size: 12px; letter-spacing: 0.06em; color: var(--color-neutral-600);
}
.site-footer__brand { display: flex; align-items: center; gap: 12px; }
.site-footer__mark { width: 22px; height: 22px; filter: invert(1); opacity: 0.55; }
.site-footer__copy { font-variant-numeric: tabular-nums; }
.site-footer__links {
display: flex; align-items: center; gap: 26px;
text-transform: uppercase; letter-spacing: 0.16em;
}
.site-footer__link { color: var(--color-neutral-500); text-decoration: none; padding-block: 6px; }
.site-footer__link:hover { color: var(--color-text); }
/* ═══ hero ════════════════════════════════════════════════════════════ */
.hero {
position: relative; min-height: 92vh;
display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
gap: clamp(24px, 5vw, 80px); align-items: center;
padding-block: clamp(48px, 9vh, 120px) clamp(40px, 7vh, 90px);
}
.eyebrow { display: flex; align-items: center; gap: 14px; }
.eyebrow__dash { width: 34px; height: 2px; background: var(--color-accent); flex: none; }
.eyebrow__text {
font-family: var(--font-heading); font-size: 11px; letter-spacing: 0.34em;
text-transform: uppercase; color: var(--color-accent-300);
font-variant-numeric: tabular-nums;
}
.hero .eyebrow { margin-bottom: clamp(20px, 4vh, 40px); }
.hero__title {
margin: 0; font-family: var(--font-heading); font-weight: 300;
/* The design asked for 7.4vw, but at that size its longest forced line
("none of them wasted.", 1077px) does not fit the 1.25fr column it sits
in (756px), so the intended three-line break collapsed into five ragged
ones. 5.1vw is the largest step at which all three lines hold, from the
900px breakpoint up. No text-wrap: balance — it re-breaks lines that
the
s already place. */
font-size: clamp(46px, 5.1vw, 122px); line-height: 0.94;
letter-spacing: -0.035em;
}
.hero__title em { font-style: normal; color: var(--color-accent-300); font-weight: 400; }
.hero__lede {
margin: clamp(22px, 4vh, 40px) 0 0; max-width: 30em;
font-size: clamp(16px, 1.35vw, 20px); line-height: 1.6;
color: var(--color-neutral-300); text-wrap: pretty;
}
.hero__actions {
display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
margin-top: clamp(26px, 4.5vh, 46px);
}
.btn--lg { padding: 13px 24px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.btn--lg.btn-ghost { padding: 13px 20px; color: var(--color-neutral-300); }
.hero__figure {
position: relative; display: flex; align-items: center; justify-content: center;
min-height: 320px;
}
.hero__halo {
position: absolute; width: min(100%, 460px); aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle, rgba(145, 132, 217, 0.22), transparent 65%);
filter: blur(6px); animation: fs-drift 9s ease-in-out infinite;
}
.hero__mark {
position: relative; width: min(78%, 380px);
filter: invert(1) drop-shadow(0 0 34px rgba(181, 171, 252, 0.55));
animation: fs-flicker 2.6s steps(1, end) infinite;
}
.hero__rule {
position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
background: linear-gradient(to right, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent);
}
/* ═══ marquee ═════════════════════════════════════════════════════════ */
.marquee {
overflow: hidden; border-bottom: 1px solid var(--color-divider);
padding: 16px 0; background: rgba(35, 37, 50, 0.35);
}
.marquee__track {
display: flex; width: max-content;
animation: fs-marquee 26s linear infinite;
font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.4em;
text-transform: uppercase; color: var(--color-neutral-500); white-space: nowrap;
}
.marquee__track span { padding-right: 34px; }
.marquee__track .sep { color: var(--color-accent-400); }
/* ═══ scroll reveal ═══════════════════════════════════════════════════ */
[data-reveal] {
opacity: 0; transform: translateY(26px);
transition: opacity 0.9s ease, transform 0.9s ease;
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
/* Without JS nothing would ever reveal, so the sections would stay invisible. */
.no-js [data-reveal] { opacity: 1; transform: none; }
/* ═══ the gate ════════════════════════════════════════════════════════ */
.gate {
display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: clamp(28px, 5vw, 72px); align-items: center;
padding-block: clamp(56px, 11vh, 130px);
border-bottom: 1px solid var(--color-divider);
}
.kicker {
font-family: var(--font-heading); font-size: 11px; letter-spacing: 0.34em;
text-transform: uppercase; color: var(--color-accent-300); margin-bottom: 20px;
}
.gate__title {
margin: 0; font-family: var(--font-heading); font-weight: 300;
font-size: clamp(32px, 3.6vw, 58px); line-height: 1.02; letter-spacing: -0.03em;
}
.gate__body { margin: 22px 0 0; max-width: 34em; color: var(--color-neutral-300); text-wrap: pretty; }
.gate__readout { display: flex; align-items: baseline; gap: 14px; margin-top: clamp(26px, 4vh, 44px); }
.gate__fps {
font-family: var(--font-heading); font-weight: 300;
font-size: clamp(56px, 7vw, 104px); line-height: 1; letter-spacing: -0.04em;
font-variant-numeric: tabular-nums; color: var(--color-text);
}
.gate__unit {
font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.3em;
text-transform: uppercase; color: var(--color-neutral-500);
}
.gate__note { margin-top: 14px; font-size: 13px; color: var(--color-neutral-500); }
.track {
position: relative; margin-top: 26px; height: 46px;
cursor: ew-resize; touch-action: none; user-select: none;
}
.track__rail { position: absolute; left: 0; right: 0; top: 22px; height: 1px; background: var(--color-neutral-800); }
.track__ticks {
position: absolute; left: 0; right: 0; top: 22px;
display: flex; justify-content: space-between; pointer-events: none;
}
.track__ticks i { width: 1px; height: 9px; margin-top: -4px; background: var(--color-neutral-700); }
.track__fill { position: absolute; left: 0; top: 22px; height: 3px; margin-top: -1px; background: var(--color-accent); }
.track__handle {
position: absolute; top: 22px; width: 16px; height: 26px; margin: -13px 0 0 -8px;
border: 1px solid var(--color-accent); border-radius: 3px;
background: rgba(22, 24, 38, 0.9); box-shadow: 0 0 18px rgba(145, 132, 217, 0.5);
}
.track__min, .track__max {
position: absolute; bottom: 0; font-size: 11px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--color-neutral-600);
font-variant-numeric: tabular-nums;
}
.track__min { left: 0; }
.track__max { right: 0; }
.projector {
position: relative; padding: 18px 44px;
border: 1px solid var(--color-neutral-800); border-radius: var(--radius-lg);
background: linear-gradient(160deg, rgba(35, 37, 50, 0.9), rgba(22, 24, 38, 0.9));
box-shadow: 0 0 0 1px rgba(145, 132, 217, 0.08), 0 24px 60px rgba(0, 0, 0, 0.55);
}
.projector__rail {
position: absolute; top: 18px; bottom: 18px; width: 14px;
overflow: hidden; border-radius: 3px; background: var(--color-neutral-900);
}
.projector__rail--left { left: 18px; }
.projector__rail--right { right: 18px; }
.projector__perfs { animation: fs-perf 0.9s linear infinite; }
.projector__perfs i {
display: block; width: 8px; height: 12px; margin: 18px 3px;
border-radius: 2px; background: var(--color-neutral-700);
}
.projector__screen {
display: block; width: 100%; aspect-ratio: 4 / 3;
border-radius: var(--radius-md); background: #0d0e16;
}
/* ═══ work ════════════════════════════════════════════════════════════ */
.work { padding-block: clamp(56px, 11vh, 130px); border-bottom: 1px solid var(--color-divider); }
.work__head {
display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
gap: 20px; margin-bottom: clamp(30px, 5vh, 56px);
}
.section-title {
margin: 0; font-family: var(--font-heading); font-weight: 300;
font-size: clamp(32px, 4vw, 66px); line-height: 1; letter-spacing: -0.03em;
}
.work__aside { font-size: 13px; color: var(--color-neutral-500); max-width: 26em; }
.work__grid {
/* min(300px, 100%), not a bare 300px: below ~340px the track would stay
300px wide, overflow this container and get clipped by the overflow
rule below -- cutting the right edge off both cards. */
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: 1px; background: var(--color-divider);
border: 1px solid var(--color-divider); border-radius: var(--radius-lg); overflow: hidden;
}
.product {
padding: clamp(26px, 3.4vw, 46px); background: rgba(22, 24, 38, 0.72);
display: flex; flex-direction: column; gap: 18px; min-height: 300px;
transition: background 0.3s ease;
}
.product:hover { background: rgba(43, 39, 65, 0.6); }
.product__meta {
display: flex; align-items: center; justify-content: space-between;
font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.26em;
text-transform: uppercase; color: var(--color-neutral-500);
font-variant-numeric: tabular-nums;
}
.product__status { color: var(--color-accent-300); }
.product__name {
font-family: var(--font-heading); font-weight: 300;
font-size: clamp(34px, 3.6vw, 56px); line-height: 1; letter-spacing: -0.03em;
}
.product__rule { height: 1px; background: var(--color-neutral-800); }
.product__body { margin: 0; color: var(--color-neutral-400); max-width: 26em; }
.product__link {
margin-top: auto; align-self: flex-start;
font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--color-accent-300); text-decoration: none;
border-bottom: 1px solid var(--color-accent-700); padding-bottom: 4px;
}
.product__link:hover { color: var(--color-accent-200); border-color: var(--color-accent); }
/* ═══ practice ════════════════════════════════════════════════════════ */
.practice { padding-block: clamp(56px, 11vh, 130px); border-bottom: 1px solid var(--color-divider); }
.practice__title {
margin: 0 0 clamp(34px, 6vh, 64px); font-family: var(--font-heading); font-weight: 300;
font-size: clamp(32px, 4vw, 66px); line-height: 1; letter-spacing: -0.03em; max-width: 22em;
}
.practice__grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
gap: clamp(24px, 3vw, 56px);
}
.practice__mark { width: 28px; height: 2px; background: var(--color-accent); margin-bottom: 18px; }
.practice__name {
font-family: var(--font-heading); font-size: 20px; font-weight: 500;
letter-spacing: -0.01em; margin-bottom: 10px;
}
.practice__body { margin: 0; color: var(--color-neutral-400); }
/* ═══ contact ═════════════════════════════════════════════════════════ */
.contact { padding-block: clamp(64px, 14vh, 160px); text-align: center; }
.contact .kicker { margin-bottom: 26px; }
.contact__mail {
display: inline-block; font-family: var(--font-heading); font-weight: 300;
font-size: clamp(28px, 5.2vw, 86px); line-height: 1.05; letter-spacing: -0.035em;
color: var(--color-text); text-decoration: none;
border-bottom: 1px solid var(--color-accent-700); padding-bottom: 8px;
word-break: break-word;
}
.contact__mail:hover { color: var(--color-accent-300); border-color: var(--color-accent); }
.contact__body { margin: 30px auto 0; max-width: 30em; color: var(--color-neutral-400); }
/* ═══ support page ════════════════════════════════════════════════════ */
.support {
position: relative; flex: 1;
display: flex; align-items: center; justify-content: center;
padding-block: clamp(48px, 10vh, 130px);
padding-inline: clamp(20px, 5vw, 40px);
}
.support__inner { width: 100%; max-width: 760px; text-align: center; }
.support__markwrap {
position: relative; display: inline-flex; align-items: center; justify-content: center;
margin-bottom: clamp(26px, 5vh, 46px);
}
.support__pulse {
position: absolute; width: 190px; height: 190px; border-radius: 50%;
background: radial-gradient(circle, rgba(145, 132, 217, 0.3), transparent 65%);
animation: fs-pulse 4.2s ease-in-out infinite;
}
.support__mark {
position: relative; width: 116px;
filter: invert(1) drop-shadow(0 0 24px rgba(181, 171, 252, 0.5));
}
.support__title {
margin: 0; font-family: var(--font-heading); font-weight: 300;
font-size: clamp(38px, 6vw, 86px); line-height: 1; letter-spacing: -0.035em;
}
.support__lede {
margin: clamp(20px, 4vh, 34px) auto 0; max-width: 30em; font-size: 17px;
color: var(--color-neutral-300); text-wrap: pretty;
}
.support__actions {
display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
margin-top: clamp(26px, 5vh, 44px);
}
.btn--md { padding: 14px 26px; font-size: 14px; letter-spacing: 0.1em; }
.btn--md.btn-ghost { padding: 14px 20px; color: var(--color-neutral-300); }
.facts {
margin-top: clamp(40px, 8vh, 76px);
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
gap: 1px; background: var(--color-divider);
border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
overflow: hidden; text-align: left;
}
.facts__cell { padding: 22px; background: rgba(22, 24, 38, 0.7); }
.facts__label {
font-family: var(--font-heading); font-size: 11px; letter-spacing: 0.24em;
text-transform: uppercase; color: var(--color-neutral-500); margin-bottom: 10px;
}
.facts__value { color: var(--color-neutral-300); }
.facts__value--apps { display: flex; flex-wrap: wrap; gap: 8px; }
.facts__sep { color: var(--color-neutral-600); }
/* ═══ legal page ══════════════════════════════════════════════════════ */
.legal {
position: relative; max-width: 820px; margin: 0 auto;
padding-block: clamp(48px, 9vh, 110px) clamp(60px, 12vh, 140px);
padding-inline: clamp(20px, 5vw, 40px);
}
.legal .eyebrow { margin-bottom: 26px; }
.legal__title {
margin: 0; font-family: var(--font-heading); font-weight: 300;
font-size: clamp(38px, 5.6vw, 82px); line-height: 1; letter-spacing: -0.035em;
}
.legal__lede {
margin-top: clamp(30px, 5vh, 54px);
display: flex; flex-direction: column; gap: 16px;
color: var(--color-neutral-300); font-size: 16px; line-height: 1.7;
}
.legal__lede p { margin: 0; }
.legal__section { margin-top: clamp(34px, 6vh, 62px); }
.legal__rule {
height: 1px; margin-bottom: 26px;
background: linear-gradient(to right, var(--color-divider), transparent);
}
.legal__heading {
margin: 0 0 16px; font-family: var(--font-heading); font-weight: 400;
font-size: clamp(22px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -0.02em;
}
.legal__body {
display: flex; flex-direction: column; gap: 14px;
color: var(--color-neutral-300); font-size: 16px; line-height: 1.7;
}
.legal__body p { margin: 0; }
.legal__callout {
margin-top: clamp(40px, 7vh, 76px); padding: 26px;
border: 1px solid var(--color-neutral-800); border-radius: var(--radius-lg);
background: rgba(35, 37, 50, 0.5);
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.legal__callout p { margin: 0; color: var(--color-neutral-300); }
.btn--sm { padding: 12px 20px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
/* ═══ 404 ═════════════════════════════════════════════════════════════ */
.notfound {
position: relative; flex: 1;
display: flex; align-items: center; justify-content: center;
padding-block: clamp(60px, 14vh, 160px);
padding-inline: clamp(20px, 5vw, 40px);
text-align: center;
}
.notfound__code {
font-family: var(--font-heading); font-weight: 300;
font-size: clamp(72px, 16vw, 190px); line-height: 1; letter-spacing: -0.05em;
font-variant-numeric: tabular-nums; color: var(--color-accent-300);
}
.notfound__title {
margin: 12px 0 0; font-family: var(--font-heading); font-weight: 300;
font-size: clamp(28px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -0.03em;
}
.notfound__body { margin: 20px auto 0; max-width: 30em; color: var(--color-neutral-400); }
.notfound__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }
/* ═══ responsive ══════════════════════════════════════════════════════
The source design had no media queries — it was drawn once at 1440×900.
Every clamp() in it bottoms out at a desktop-sized floor, so the rules
below are what make the site work on a phone. */
@media (max-width: 900px) {
/* The three in-page anchors go; they are reachable by scrolling, and the
nav is over its width budget long before this. */
.site-nav__link--anchor { display: none; }
.hero {
grid-template-columns: minmax(0, 1fr);
min-height: 0;
padding-block: clamp(40px, 6vh, 72px) clamp(32px, 5vh, 60px);
gap: clamp(28px, 6vw, 48px);
}
.hero__figure { min-height: 200px; order: -1; }
.hero__mark { width: min(60%, 220px); }
.hero__halo { width: min(72%, 280px); }
.gate { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
/* Wordmark out, projector mark stays: "FLICKERSOFT" at 0.32em tracking is
~130px on its own and the nav cannot afford it next to two actions. */
.site-nav__word { display: none; }
.site-nav { gap: 14px; }
.site-nav__links { gap: 16px; }
/* clamp() floors sized for desktop overflow a 350px line — see the
hero title and the support title in particular. */
.hero__title { font-size: clamp(32px, 9.5vw, 46px); }
.hero__lede { font-size: 16px; }
.support__title { font-size: clamp(30px, 8.4vw, 38px); }
.gate__title { font-size: clamp(26px, 7vw, 32px); }
.section-title, .practice__title { font-size: clamp(28px, 8vw, 32px); }
.legal__title { font-size: clamp(30px, 8.4vw, 38px); }
.contact__mail { font-size: clamp(22px, 6.4vw, 28px); }
.gate__fps { font-size: clamp(44px, 13vw, 56px); }
.projector { padding: 14px 40px; }
/* Stacked to one column, the cells read better centred -- and the Apps
row is a flex container, so text-align alone would not move it. */
.facts { text-align: center; }
.facts__value--apps { justify-content: center; }
.site-footer { padding-block: 22px 32px; }
.site-footer__links { gap: 18px; }
/* "support@flickersoft.com" uppercased and tracked out at 0.12em is wider
than a 320px callout can hold, and it has no spaces to wrap at. Dropping
the transform buys back the room and reads as an address rather than a
label; anywhere is a last resort below 320. */
.legal__callout { padding: 20px; }
.legal__callout .btn {
width: 100%; text-transform: none; letter-spacing: 0.02em;
padding-inline: 14px; overflow-wrap: anywhere;
}
}
@media (max-width: 380px) {
.marquee__track { font-size: 11px; letter-spacing: 0.3em; }
.site-nav__links { gap: 12px; font-size: 11px; }
}
/* Touch: no cursor to track, and a 16px handle is under the 44px minimum. */
@media (pointer: coarse) {
.fx-beam { display: none; }
.track__handle::before {
content: ''; position: absolute; inset: -14px -16px;
}
}
/* ═══ reduced motion ══════════════════════════════════════════════════
The marquee is the worst offender, but the flicker and grain are the
ones most likely to be a problem for someone. site.js also skips its
animation loop under this setting. */
@media (prefers-reduced-motion: reduce) {
.fx-grain, .hero__halo, .hero__mark, .marquee__track,
.projector__perfs, .support__pulse {
animation: none !important;
}
[data-reveal] { transition: none; opacity: 1; transform: none; }
html { scroll-behavior: auto; }
}