/* ==========================================================================
Bliink — v2.0 Homepage
Cinematic scrollytelling build on the brand system already validated
across the v0.1 21-page build (see Bliink Landing Page/website/DESIGN.md):
full-bleed photo hero, live conversation demo card, proof bar, thesis
statement, three "brand rule" act chapters each with a sticky scroll-
driven card stack, who-it's-for, customers, centered final CTA.
========================================================================== */
/* Suisse Int'l — client's typeface, self-hosted from files supplied
directly by Larry on 2026-08-22. FLAG: these files came from
onlinewebfonts.com, not a Swiss Typefaces/authorized-reseller license
download — Larry confirmed no purchased license is confirmed yet and
asked to ship this now, licensing to be sorted separately later. Swap
these five files for properly licensed ones the moment that's resolved;
don't treat their presence here as proof of a valid license. */
@font-face { font-family: "Suisse Intl"; src: url("fonts/suisse-intl/suisse-intl-light.woff2") format("woff2"), url("fonts/suisse-intl/suisse-intl-light.woff") format("woff"), url("fonts/suisse-intl/suisse-intl-light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Suisse Intl"; src: url("fonts/suisse-intl/suisse-intl-regular.woff2") format("woff2"), url("fonts/suisse-intl/suisse-intl-regular.woff") format("woff"), url("fonts/suisse-intl/suisse-intl-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Suisse Intl"; src: url("fonts/suisse-intl/suisse-intl-medium.woff2") format("woff2"), url("fonts/suisse-intl/suisse-intl-medium.woff") format("woff"), url("fonts/suisse-intl/suisse-intl-medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Suisse Intl"; src: url("fonts/suisse-intl/suisse-intl-semibold.woff2") format("woff2"), url("fonts/suisse-intl/suisse-intl-semibold.woff") format("woff"), url("fonts/suisse-intl/suisse-intl-semibold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Suisse Intl"; src: url("fonts/suisse-intl/suisse-intl-bold.woff2") format("woff2"), url("fonts/suisse-intl/suisse-intl-bold.woff") format("woff"), url("fonts/suisse-intl/suisse-intl-bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
:root {
/* --- palette — matched to the Bliink brand kit's exact swatches
(bliink-brandkit-merged.html), 2026-08-19. --accent-deep has no kit
equivalent (the kit uses raw Gold for text, which fails WCAG AA at
2.26:1 on our light backgrounds) and stays as a computed, contrast-safe
derivative of --accent; --line-on-dark/light aren't named kit swatches
either and are left as-is. Every other token maps 1:1 to a kit swatch —
see the mapping note in project memory if this is ever revisited. --- */
--white: #f8f7f4; /* kit "Off White" (was #fdfbf6 "paper") */
--off-white: #f5f0e6; /* kit "Ivory" (was #faf3e7) */
--ink: #111111; /* kit "Deep Black" (was #17130f) */
--ink-soft: #2b2a28; /* kit "Charcoal" (was #2f2619) */
--muted: #b8b2a6; /* kit "Muted — Dark BG" (was #c9bdae) — decorative + dark-bg text/accents only */
--muted-deep: #6b6558; /* kit "Muted — Light BG" (was #766a5d) — graphite-soft, light-bg text, contrast-safe */
--accent: #c9a227; /* kit "Gold" — unchanged, already an exact match */
--accent-bright: #d8b44c; /* kit "Gold Light" (was #d6b95d) — hover fills on dark */
--accent-deep: #836919; /* amber-text — light-bg text/links, WCAG AA (~4.9:1 on the new white) — no kit equivalent, kept as-is */
--line-on-dark: rgba(250, 243, 231, 0.14);
--line-on-light: rgba(74, 64, 56, 0.14);
/* --- secondary / semantic palette — added 2026-09-01 from the formal
"Bliink brand guideline 2026" deck; not yet drawn on anywhere, held
ready for future badge/status/chip work rather than forced into use. --- */
--brass: #a8875a;
--brass-light: #c9ae85;
--warm-taupe: #b5a48c;
--stone-grey: #a9a399;
--status-green: #22c55e;
--status-red: #ef4444;
--status-turquoise: #0891b2;
/* --- type ---
Everything — body and headings alike — is Suisse Intl (the client's
product typeface, self-hosted via @font-face above), no fallback
stack, except text actually wrapped in quotation marks, which uses
EB Garamond via the .quoted class (see below), per the Bliink brand
kit (bliink-brandkit-merged.html). See the @font-face block's comment
re: licensing status of the current font files. --- */
--font: "Suisse Intl";
--font-heading: "Suisse Intl";
--font-serif: "EB Garamond", Georgia, serif;
--font-mono: "Space Mono", ui-monospace, "SF Mono", monospace;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--gutter: clamp(1.5rem, 5vw, 4rem);
--nav-h: 80px;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
@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;
scroll-behavior: auto !important;
}
}
body {
margin: 0;
background: var(--white);
color: var(--ink-soft);
font-family: var(--font);
font-weight: 400;
font-size: 1.0625rem;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* Simplified Chinese pages only: --font ("Suisse Intl") has no CJK glyphs
and no fallback of its own, so scope a Noto Sans SC fallback to zh pages
specifically rather than editing the shared --font variable every other
(locked, English/Indonesian) page also relies on. */
html[lang="zh-Hans"] body { font-family: var(--font), "Noto Sans SC", sans-serif; }
html[lang="zh-Hans"] h1, html[lang="zh-Hans"] h2, html[lang="zh-Hans"] h3,
html[lang="zh-Hans"] h4, html[lang="zh-Hans"] h5, html[lang="zh-Hans"] h6 { font-family: var(--font-heading), "Noto Sans SC", sans-serif; }
html[lang="zh-Hans"] .sequence-item .num,
html[lang="zh-Hans"] .hero-split-rolling { font-family: var(--font), "Noto Sans SC", sans-serif; }
html[lang="zh-Hans"] .quoted { font-family: "EB Garamond", Georgia, "Noto Sans SC", serif; }
/* EB Garamond is scoped to this class only — applied by hand to text that
is literally wrapped in quotation marks (real quoted speech), not to
every element that happens to be styled italic (word-accent, phrase-
accent, and non-quoted uses of the quote-block/quote-stack/closing-line
components keep their normal italic styling in the body typeface). */
.quoted { font-family: var(--font-serif); }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: var(--font-heading);
font-weight: 600;
color: var(--ink);
letter-spacing: -0.015em;
line-height: 1.1;
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark p { color: var(--white); }
:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--accent); }
.container { max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }
.eyebrow {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-deep);
font-weight: 700;
}
.on-dark .eyebrow { color: var(--accent); }
/* ==========================================================================
Nav
========================================================================== */
.site-nav {
position: sticky; top: 0; z-index: 100; height: var(--nav-h);
display: flex; align-items: center;
background: rgba(17, 17, 17, 0.86);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--line-on-dark);
}
.site-nav .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; }
.brand-logo { height: 26px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 0.25rem; }
.nav-links a {
padding: 0.5rem 0.9rem;
font-size: 0.85rem; font-weight: 500;
color: rgba(255, 255, 255, 0.72);
transition: color 200ms var(--ease-standard);
}
.nav-links a:hover { color: var(--accent); }
.nav-links a[aria-current="page"] { color: var(--accent); }
/* nav-right: Login + Sign Up, kept separate from the page-link list —
mirrors engine.com's top-right pattern (a quiet secondary link next to
a solid primary button), not part of .nav-links. */
.nav-right { display: flex; align-items: center; gap: 1.1rem; }
.nav-login { font-size: 0.85rem; font-weight: 500; color: rgba(255, 255, 255, 0.72); transition: color 200ms var(--ease-standard); }
.nav-login:hover { color: var(--accent); }
.nav-login[aria-current="page"] { color: var(--accent); }
.nav-cta {
display: inline-flex; align-items: center;
padding: 0.65rem 1.4rem;
background: var(--accent); color: var(--ink);
font-size: 0.85rem; font-weight: 600;
border-radius: 999px;
white-space: nowrap;
transition: background 200ms var(--ease-standard), transform 140ms var(--ease-out);
}
.nav-cta:hover { background: var(--accent-bright); }
.nav-cta:active { transform: scale(0.97); }
/* language switcher: EN / ID / 中文, quiet like nav-login, sits just before
it in nav-right. Same three links repeat in every page's as
hreflang alternates — this is the human-visible counterpart. */
.lang-switcher { display: flex; align-items: center; gap: 0.5rem; padding-right: 0.9rem; border-right: 1px solid rgba(255,255,255,0.18); }
.lang-switch-item { font-size: 0.78rem; font-weight: 500; color: rgba(255,255,255,0.5); white-space: nowrap; transition: color 200ms var(--ease-standard); }
.lang-switch-item:hover { color: var(--accent); }
html[lang="en"] .lang-switch-item[lang="en"],
html[lang="id"] .lang-switch-item[lang="id"],
html[lang="zh-Hans"] .lang-switch-item[lang="zh-Hans"] { color: var(--white); font-weight: 700; pointer-events: none; }
@media (max-width: 560px) { .lang-switcher { gap: 0.35rem; padding-right: 0.6rem; } }
@media (max-width: 400px) { .lang-switcher { border-right: none; padding-right: 0; } }
/* light-background variant, for the signup/login pages' white form column */
.lang-switcher.on-light { border-right-color: var(--line-on-light); }
.lang-switcher.on-light .lang-switch-item { color: var(--muted-deep); }
.lang-switcher.on-light .lang-switch-item:hover { color: var(--accent-deep); }
html[lang="en"] .lang-switcher.on-light .lang-switch-item[lang="en"],
html[lang="id"] .lang-switcher.on-light .lang-switch-item[lang="id"],
html[lang="zh-Hans"] .lang-switcher.on-light .lang-switch-item[lang="zh-Hans"] { color: var(--ink); font-weight: 700; }
.nav-toggle { display: none; }
@media (max-width: 900px) {
.nav-links {
display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
flex-direction: column; align-items: stretch;
padding: 1rem var(--gutter) 1.5rem;
background: rgba(17, 17, 17, 0.98);
border-bottom: 1px solid var(--line-on-dark);
}
.nav-links.is-open { display: flex; }
.nav-links a { padding: 0.85rem 0.5rem; }
.nav-toggle { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--white); }
}
@media (max-width: 400px) { .nav-login { display: none; } }
/* ==========================================================================
Hero — full-bleed photography
========================================================================== */
.hero { position: relative; min-height: 82vh; display: flex; align-items: flex-end; overflow: clip; background: var(--ink); }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(17,17,17,0.1) 0%, rgba(17,17,17,0.15) 45%, rgba(17,17,17,0.86) 100%);
}
.hero-content { position: relative; width: 100%; padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.hero-content .eyebrow { color: var(--accent); margin-bottom: 1rem; display: block; }
.hero h1 { color: var(--white); font-size: clamp(2.5rem, 5.6vw, 4.4rem); max-width: 20ch; font-weight: 600; }
.hero h1 em { font-style: italic; font-weight: 400; }
.hero .sub { margin-top: 1.5rem; font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: rgba(255,255,255,0.78); max-width: 46ch; line-height: 1.6; }
.hero-cta-row { margin-top: 2.25rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.hero.quiet { min-height: unset; align-items: flex-start; padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem); background: var(--ink); }
.hero.quiet .hero-content { padding-bottom: 0; }
/* ==========================================================================
Buttons
========================================================================== */
.btn-accent {
display: inline-flex; align-items: center; padding: 0.95rem 2rem;
background: var(--accent); color: var(--ink);
font-size: 0.92rem; font-weight: 600; border-radius: 999px;
transition: background 200ms var(--ease-standard), transform 140ms var(--ease-out);
}
.btn-accent:hover { background: var(--accent-bright); }
.btn-accent:active { transform: scale(0.98); }
.btn-line {
display: inline-flex; align-items: center; padding: 0.9rem 1.9rem;
border: 1px solid rgba(255,255,255,0.4); color: var(--white);
font-size: 0.92rem; font-weight: 500; border-radius: 999px;
transition: border-color 200ms var(--ease-standard), background 200ms var(--ease-standard);
}
.btn-line:hover { border-color: var(--accent); background: rgba(232,163,61,0.08); }
.on-paper .btn-line { border-color: var(--line-on-light); color: var(--ink); }
.on-paper .btn-line:hover { border-color: var(--accent-deep); background: rgba(138,90,26,0.06); }
.channel-note { font-size: 0.78rem; color: rgba(255,255,255,0.5); }
.on-paper .channel-note { color: var(--muted-deep); }
/* ==========================================================================
Sections
========================================================================== */
.section { padding-block: clamp(4.5rem, 10vw, 8rem); }
.section.on-dark { background: var(--ink); }
.section.on-paper { background: var(--white); }
.section.on-elevated { background: var(--off-white); }
.section-head { max-width: 640px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); margin-top: 0.75rem; }
.section-head .lede { margin-top: 1.25rem; font-size: 1.1rem; color: var(--muted-deep); line-height: 1.6; }
.section-head .eyebrow { display: block; }
.prose > .eyebrow { display: block; margin-bottom: 0.75rem; }
.prose > .eyebrow + h2 { margin-top: 0; }
.on-dark .section-head .lede { color: rgba(255,255,255,0.7); }
.photo-pair { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); margin-bottom: clamp(3rem, 6vw, 4.5rem); align-items: end; }
.photo-pair img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; border-radius: 4px; }
.photo-pair .tall { aspect-ratio: 3/4; }
@media (max-width: 780px) { .photo-pair { grid-template-columns: 1fr; } .photo-pair .tall { display: none; } }
.feature-photo { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.feature-photo img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; }
.feature-photo figcaption { margin-top: 0.9rem; font-size: 0.76rem; color: var(--muted-deep); }
.sequence { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3rem); }
@media (max-width: 820px) { .sequence { grid-template-columns: 1fr; } }
.sequence-item { border-top: 1px solid var(--line-on-light); padding-top: 1.5rem; }
.on-dark .sequence-item { border-color: var(--line-on-dark); }
.sequence-item .num { font-family: var(--font); font-weight: 700; font-size: 2.2rem; color: var(--accent-deep); display: block; margin-bottom: 0.75rem; }
.on-dark .sequence-item .num { color: var(--accent); }
.sequence-item h3 { font-size: 1.25rem; margin-bottom: 0.6rem; font-weight: 600; }
.sequence-item p { color: var(--muted-deep); line-height: 1.6; }
.on-dark .sequence-item p { color: rgba(255,255,255,0.7); }
.quote-block { max-width: 720px; }
.quote-block blockquote { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 500; font-style: italic; color: var(--ink); line-height: 1.45; margin: 0; }
.on-dark .quote-block blockquote { color: var(--white); }
.quote-block cite { display: block; margin-top: 1.25rem; font-style: normal; font-size: 0.85rem; font-weight: 600; color: var(--muted-deep); }
.on-dark .quote-block cite { color: rgba(255,255,255,0.6); }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.75rem, 3vw, 2.5rem); }
.feature-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-grid, .feature-grid.cols-3 { grid-template-columns: 1fr; } }
.feature-grid h4 { font-size: 1.1rem; margin-bottom: 0.5rem; font-weight: 600; }
.feature-grid p { color: var(--muted-deep); font-size: 0.95rem; line-height: 1.6; }
.on-dark .feature-grid p { color: rgba(255,255,255,0.7); }
/* Contact grid — "how can we help you" audience-picker cards, modelled on
bcdtravel.com/contact-us's card-per-audience funnel: a bold "I'm a..."
statement, a short description, a pill CTA routed to the right channel
for that audience (a real page for the one case that has one — the
sign-up form — and a WhatsApp deep link with a tailored pre-filled
message for every other case, this site's standing no-backend pattern). */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line-on-light); border-radius: 14px; padding: 2rem; box-shadow: 0 20px 44px -28px rgba(23,19,15,0.18); }
.contact-card h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); line-height: 1.3; }
.contact-card p { margin-top: 0.75rem; color: var(--muted-deep); font-size: 0.92rem; line-height: 1.55; flex: 1; }
.contact-card .btn-accent { margin-top: 1.5rem; align-self: flex-start; }
/* pricing benefits — icon + card, modeled on engine.com/pricing's benefit
grid but built on this site's own card/radius/shadow convention */
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.benefit-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .benefit-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .benefit-grid.cols-4 { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .benefit-grid { grid-template-columns: 1fr; } }
.benefit-card { display: flex; flex-direction: column; gap: 0.9rem; background: var(--white); border: 1px solid var(--line-on-light); border-radius: 14px; padding: 1.75rem; box-shadow: 0 20px 44px -28px rgba(23,19,15,0.14); }
.benefit-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--off-white); display: flex; align-items: center; justify-content: center; color: var(--accent-deep); }
.benefit-icon svg { width: 22px; height: 22px; }
.benefit-card h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.benefit-card p { color: var(--muted-deep); font-size: 0.92rem; line-height: 1.55; }
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .card-grid, .card-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .card-grid, .card-grid.cols-3 { grid-template-columns: 1fr; } }
.pcard { border: 1px solid var(--line-on-light); border-radius: 8px; padding: 2rem 1.75rem; transition: border-color 200ms var(--ease-standard); }
.on-dark .pcard { border-color: var(--line-on-dark); }
.pcard:hover { border-color: var(--accent-deep); }
.on-dark .pcard:hover { border-color: var(--accent); }
.pcard h4 { font-size: 1.1rem; margin-bottom: 0.6rem; font-weight: 600; }
.pcard p { color: var(--muted-deep); font-size: 0.94rem; line-height: 1.6; }
.on-dark .pcard p { color: rgba(255,255,255,0.7); }
.pcard a { display: inline-block; margin-top: 1rem; font-size: 0.82rem; font-weight: 600; color: var(--accent-deep); }
/* resource-hub category tabs — engine.com/blog's tab-bar pattern, adapted
to Bliink's own type/color system. Plain links styled as an underlined
tab row; each tab is a real navigation link, not a JS filter, since
these are category hub pages rather than a single filterable feed. */
.resource-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; margin-top: 2.5rem; border-bottom: 1px solid var(--line-on-light); }
.resource-tab { padding-bottom: 0.85rem; font-size: 0.92rem; font-weight: 600; color: var(--muted-deep); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 160ms var(--ease-standard), border-color 160ms var(--ease-standard); }
.resource-tab:hover { color: var(--ink); }
.resource-tab.is-active { color: var(--ink); border-color: var(--accent-deep); }
.on-dark .pcard a { color: var(--accent); }
.pcard .attrib-title { font-size: 0.85rem; color: var(--muted-deep); margin-top: 0.2rem; }
.pcard.is-soon { opacity: 0.6; }
.pcard.is-soon:hover { border-color: var(--line-on-light); }
/* resource-hub top row — engine.com/blog's two-column hero (big featured
card left, "Latest" panel right). Live posts are full opacity; .is-soon
keeps the soft placeholder treatment. */
.resource-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2rem; margin-top: 2.5rem; align-items: stretch; }
@media (max-width: 900px) { .resource-hero-grid { grid-template-columns: 1fr; } }
.resource-featured { display: flex; flex-direction: column; border: 1px solid var(--line-on-light); border-radius: 12px; overflow: clip; color: inherit; text-decoration: none; background: var(--off-white); transition: border-color 200ms var(--ease-standard); }
.resource-featured:hover { border-color: var(--accent-deep); }
.resource-featured.is-soon { opacity: 0.6; pointer-events: none; background: transparent; }
.resource-featured-thumb { position: relative; width: 100%; aspect-ratio: 16 / 10; background: var(--off-white); overflow: hidden; flex: none; }
.resource-featured.is-soon .resource-featured-thumb { border-bottom: 1px dashed var(--line-on-light); }
.resource-featured-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; display: block; }
.resource-featured-body { padding: 1.5rem 1.75rem 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.resource-featured-body h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; margin: 0; }
.resource-card-meta { font-size: 0.82rem; color: var(--muted-deep); line-height: 1.4; margin: 0; }
.resource-latest-panel { background: var(--off-white); border-radius: 12px; padding: 1.75rem; }
.resource-latest-panel .section-head { margin-bottom: 0; }
.resource-rows { display: flex; flex-direction: column; margin-top: 1.5rem; }
.resource-row { display: flex; align-items: center; gap: 1.25rem; padding-block: 1.1rem; border-bottom: 1px solid var(--line-on-light); color: inherit; text-decoration: none; }
.resource-row:first-child { padding-top: 0; }
.resource-row:last-child { border-bottom: none; padding-bottom: 0; }
.resource-row-thumb { position: relative; width: 88px; height: 60px; flex: none; border-radius: 6px; overflow: hidden; background: var(--off-white); }
.resource-row.is-soon .resource-row-thumb { background: var(--white); border: 1px dashed var(--line-on-light); }
.resource-row-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; display: block; }
.resource-row-copy { min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.resource-row h3 { font-size: 0.98rem; font-weight: 600; margin: 0; line-height: 1.35; }
.resource-row:hover h3 { color: var(--accent-deep); }
.resource-row .resource-card-meta { font-size: 0.78rem; }
.resource-row.is-soon { opacity: 0.6; }
.soon-label { display: inline-block; margin-top: 1rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-deep); }
/* pcard image-top treatment — engine.com/blog's .bh-card (full-bleed image,
then title + meta in a padded body below). Prefer a wrapper .pcard-thumb
containing ![]()
; bare img.pcard-thumb stays in-flow (never absolute). */
div.pcard-thumb {
position: relative;
display: block;
width: calc(100% + 3.5rem);
aspect-ratio: 16 / 10;
border-radius: 0;
background: var(--off-white);
border: none;
margin: -2rem -1.75rem 1.25rem;
overflow: hidden;
}
div.pcard-thumb > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
display: block;
}
img.pcard-thumb {
position: static;
display: block;
width: calc(100% + 3.5rem);
height: auto;
max-width: none;
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: center;
margin: -2rem -1.75rem 1.25rem;
border-radius: 0;
}
div.pcard-thumb:empty {
border-bottom: 1px dashed var(--line-on-light);
}
/* engine.com/blog's "Load more" control under the article grid. Disabled
here since Bliink has exactly 5 real categories and nothing further to
load — an honest inactive state rather than a button that does nothing. */
.load-more-row { display: flex; justify-content: center; margin-top: 3rem; }
.btn-line.is-disabled { opacity: 0.4; pointer-events: none; cursor: default; }
.service-rows { display: flex; flex-direction: column; }
.service-row { display: grid; grid-template-columns: 240px 1fr auto; gap: 2rem; align-items: baseline; padding-block: 1.75rem; border-top: 1px solid var(--line-on-light); }
.on-dark .service-row { border-color: var(--line-on-dark); }
.service-rows .service-row:last-child { border-bottom: 1px solid var(--line-on-light); }
.on-dark .service-rows .service-row:last-child { border-color: var(--line-on-dark); }
@media (max-width: 700px) { .service-row { grid-template-columns: 1fr; gap: 0.5rem; } }
.service-row h3 { font-size: 1.25rem; font-weight: 600; }
.service-row p { color: var(--muted-deep); }
.on-dark .service-row p { color: rgba(255,255,255,0.7); }
.service-row a { font-size: 0.82rem; font-weight: 600; color: var(--accent-deep); white-space: nowrap; }
.on-dark .service-row a { color: var(--accent); }
.closing-line { margin-top: clamp(2rem, 4vw, 3rem); font-size: 1.3rem; font-weight: 500; font-style: italic; color: var(--ink); }
.on-dark .closing-line { color: var(--white); }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid var(--line-on-light); }
.faq-list .faq-item:last-child { border-bottom: 1px solid var(--line-on-light); }
.faq-item summary { padding-block: 1.4rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--accent-deep); font-size: 1.3rem; transition: transform 200ms var(--ease-standard); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a { padding-bottom: 1.4rem; color: var(--muted-deep); max-width: 62ch; line-height: 1.65; }
.prose { max-width: 680px; font-size: 1.08rem; line-height: 1.75; color: var(--ink-soft); }
.prose h2, .prose h3 { margin-top: 2rem; margin-bottom: 0.75rem; }
.prose h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.prose p + p { margin-top: 1.2rem; }
.prose a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { margin: 1.2rem 0; padding-left: 1.4rem; list-style: disc; }
.prose ul li { margin-bottom: 0.5rem; }
/* article page — long-form resources post, engine.com/blog-style layout:
split byline+headline/hero header, two-column body with a sticky
contents/CTA/share sidebar, closing "Keep reading" related-post grid. */
.article-hero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; padding-block: clamp(2rem, 4vw, 3rem); }
.article-byline { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.25rem; }
.article-byline-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.article-byline-avatar img { width: 18px; height: 18px; }
.article-byline-name { font-weight: 700; color: var(--ink); font-size: 0.92rem; }
.article-byline-date { color: var(--muted-deep); font-size: 0.92rem; }
.article-hero h1 { font-size: clamp(2rem, 3.6vw, 2.75rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
.article-hero-meta { display: flex; gap: 0.75rem; margin-top: 1.1rem; color: var(--muted-deep); font-size: 0.92rem; }
.article-hero-media { border-radius: 16px; overflow: clip; aspect-ratio: 4/3; box-shadow: 0 24px 48px -16px rgba(23,19,15,0.24); }
.article-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-layout { display: grid; grid-template-columns: minmax(0, 680px) 280px; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
.article-sidebar { position: sticky; top: calc(var(--nav-h) + 2rem); display: flex; flex-direction: column; gap: 1.75rem; }
.article-toc-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-deep); margin-bottom: 0.75rem; }
.article-toc { display: flex; flex-direction: column; gap: 0.65rem; border-left: 2px solid var(--line-on-light); }
.article-toc a { padding-left: 0.9rem; color: var(--muted-deep); font-size: 0.9rem; line-height: 1.4; border-left: 2px solid transparent; margin-left: -2px; transition: color 160ms, border-color 160ms; }
.article-toc a:hover { color: var(--ink); }
.article-toc a.is-active { color: var(--ink); font-weight: 600; border-left-color: var(--accent); }
.article-cta-card { background: var(--ink); border-radius: 16px; padding: 1.75rem; }
.article-cta-card h3 { color: var(--white); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 1.1rem; }
.article-cta-card .btn-accent { width: 100%; text-align: center; }
.article-share { display: flex; flex-direction: column; gap: 0.75rem; }
.article-share-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-deep); margin: 0; }
.article-share-icons { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.article-share-icons a,
.article-share-btn {
width: 34px;
height: 34px;
border: 0;
padding: 0;
border-radius: 50%;
background: var(--off-white);
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-soft);
cursor: pointer;
transition: background 160ms, color 160ms;
}
.article-share-icons a:hover,
.article-share-btn:hover { background: var(--ink); color: var(--white); }
.article-share-icons svg,
.article-share-btn svg { width: 15px; height: 15px; }
html.article-share-open { overflow: hidden; }
.article-share-dialog[hidden] { display: none !important; }
.article-share-dialog {
position: fixed;
inset: 0;
z-index: 80;
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
}
.article-share-dialog-backdrop {
position: absolute;
inset: 0;
background: rgba(20, 18, 16, 0.48);
border: 0;
padding: 0;
cursor: pointer;
}
.article-share-dialog-panel {
position: relative;
z-index: 1;
width: min(100%, 22rem);
background: var(--white);
color: var(--ink);
border-radius: 12px;
box-shadow: 0 16px 40px rgba(20, 18, 16, 0.2);
padding: 0.9rem 0.95rem 0.95rem;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.article-share-dialog-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.article-share-dialog-title {
margin: 0;
font-size: 0.95rem;
line-height: 1.2;
font-weight: 650;
}
.article-share-dialog-x {
width: 30px;
height: 30px;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--ink-soft);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
}
.article-share-dialog-x svg { width: 14px; height: 14px; }
.article-share-dialog-x:hover { background: var(--off-white); color: var(--ink); }
.article-share .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;
}
.article-share-caption {
width: 100%;
min-height: 4.25rem;
resize: vertical;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-radius: 8px;
padding: 0.65rem 0.75rem;
font: inherit;
font-size: 0.88rem;
line-height: 1.4;
color: var(--ink);
background: var(--white);
}
.article-share-caption:focus {
outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
outline-offset: 1px;
}
.article-share-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.65rem;
min-height: 2.1rem;
}
.article-share-count {
font-family: var(--font-mono);
font-size: 0.68rem;
color: var(--muted-deep);
flex-shrink: 0;
}
.article-share-status {
margin: 0;
flex: 1 1 100%;
order: 3;
font-size: 0.78rem;
line-height: 1.45;
color: var(--ink-soft);
white-space: normal;
overflow: visible;
word-break: break-word;
}
.article-share-status[hidden] { display: none !important; }
.article-share-status.is-error { color: #b42318; }
.article-share-dialog-actions {
display: flex;
align-items: center;
gap: 0.4rem;
margin-left: auto;
}
.article-share-icon-btn {
width: 36px;
height: 36px;
border: 0;
border-radius: 50%;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: var(--off-white);
color: var(--ink-soft);
transition: background 140ms, color 140ms;
}
.article-share-icon-btn svg { width: 16px; height: 16px; }
.article-share-icon-btn:hover { background: color-mix(in srgb, var(--ink) 12%, var(--off-white)); color: var(--ink); }
.article-share-icon-btn.is-primary {
background: var(--ink);
color: var(--white);
}
.article-share-icon-btn.is-primary:hover { opacity: 0.92; color: var(--white); }
.article-engagement { margin-bottom: 1.25rem; }
.article-engagement-row {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.article-like-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
border: 1px solid var(--line-on-light);
background: var(--off-white);
color: var(--ink);
border-radius: 999px;
min-height: 34px;
padding: 0.35rem 0.75rem 0.35rem 0.65rem;
cursor: pointer;
transition: background 160ms var(--ease-standard), border-color 160ms var(--ease-standard), color 160ms var(--ease-standard);
}
.article-like-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.article-like-count {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.02em;
line-height: 1;
min-width: 0.75rem;
}
.article-like-btn:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
.article-like-btn.is-liked {
background: color-mix(in srgb, var(--accent-deep) 12%, white);
border-color: var(--accent-deep);
color: var(--accent-deep);
}
.article-like-btn.is-liked svg path { fill: currentColor; }
.article-view-count {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.02em;
color: var(--muted-deep);
}
@media (max-width: 980px) { .article-layout { grid-template-columns: 1fr; } .article-sidebar { position: static; flex-direction: row; flex-wrap: wrap; } .article-toc { display: none; } }
@media (max-width: 780px) { .article-hero { grid-template-columns: 1fr; } .article-hero-media { order: -1; } }
.keep-reading-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.keep-reading-card { display: block; }
.keep-reading-card-media { display: block; width: 100%; aspect-ratio: 16/10; border-radius: 8px; overflow: hidden; margin-bottom: 0.9rem; }
.keep-reading-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 300ms var(--ease-standard); }
.keep-reading-card:hover .keep-reading-card-media img { transform: scale(1.04); }
.keep-reading-card .date { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted-deep); display: block; margin-bottom: 0.5rem; }
.keep-reading-card h4 { font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--ink); }
.keep-reading-card:hover h4 { color: var(--accent-deep); }
@media (max-width: 980px) { .keep-reading-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .keep-reading-grid { grid-template-columns: 1fr; } }
/* long-form legal documents (privacy/booking-terms/cookie-policy/terms) —
wide tables, section dividers and a callout box for legal notices, none
of which the base .prose rules above needed to cover before now */
.prose-legal { max-width: 760px; }
.prose-legal hr { margin: 2.5rem 0; border: none; border-top: 1px solid var(--line-on-light); }
.prose-legal table { width: 100%; margin: 1.2rem 0; border-collapse: collapse; font-size: 0.92rem; }
.prose-legal th, .prose-legal td { text-align: left; vertical-align: top; padding: 0.65rem 0.85rem; border: 1px solid var(--line-on-light); line-height: 1.55; }
.prose-legal th { background: var(--off-white); font-weight: 700; }
.prose-legal .table-scroll { overflow-x: auto; }
.prose-legal blockquote { margin: 1.5rem 0; padding: 1.1rem 1.4rem; background: var(--off-white); border-radius: 8px; }
.prose-legal blockquote p { margin: 0; }
.proof-bar { background: var(--ink); border-top: 1px solid var(--line-on-dark); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.proof-heading { text-align: center; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: rgba(253,251,246,0.6); }
/* proof-grid: real stat numbers, used on interior pages per the content
system (homepage's own proof bar dropped the stats on Larry's request,
but that was a homepage-specific edit — interior pages still carry the
real, non-negotiable proof numbers per PRODUCT.md). */
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; text-align: center; }
.proof-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .proof-grid, .proof-grid.cols-4 { grid-template-columns: 1fr; gap: 2rem; } }
.proof-stat .num { font-family: var(--font-mono); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; color: var(--accent); }
.proof-stat .label { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(253,251,246,0.6); }
.proof-logos-viewport {
margin-top: clamp(1.5rem, 3vw, 2.25rem); overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.proof-logos-track { display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 4rem); width: max-content; animation: proof-logos-scroll 32s linear infinite; }
.proof-logos-track:hover { animation-play-state: paused; }
@keyframes proof-logos-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* fixed-box wrapper: every logo scales to fit the same footprint via
object-fit:contain, so differing intrinsic aspect ratios/padding in the
source files (some are near-square, some are wide wordmarks) still read
as one consistent size, not just one consistent height. */
.proof-logo { display: flex; align-items: center; justify-content: center; height: 36px; width: 110px; flex-shrink: 0; }
.proof-logo img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; opacity: 0.7; filter: grayscale(1) brightness(1.7); transition: opacity 200ms var(--ease-standard); }
.proof-logo:hover img { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.proof-logos-track { animation: none; }
.proof-logos-viewport { overflow-x: auto; }
}
.proof-note { margin-top: clamp(1.5rem, 3vw, 2rem); text-align: center; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.03em; color: rgba(253,251,246,0.56); }
/* --- media bar: "As featured in", light variant of the proof-bar logo
marquee, sat on paper/white rather than ink so it reads as a distinct
quiet break between two dark sections. Same auto-scroll mechanism, same
restraint (grayscale + reduced opacity at rest, full colour on hover). --- */
.media-bar { background: var(--white); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.media-heading { text-align: center; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--muted-deep); }
.media-logos-viewport {
margin-top: clamp(1.5rem, 3vw, 2.25rem); overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.media-logos-track { display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 4rem); width: max-content; animation: proof-logos-scroll 36s linear infinite; }
.media-logos-track:hover { animation-play-state: paused; }
/* height-driven, not width-driven: every logo renders at the same 34px
height, no exceptions. No max-width cap — this is a scrolling marquee
track (width: max-content), not a wrapped grid, so a wider wordmark
just takes its natural width rather than getting silently letterboxed
back down below 34px the way a tight max-width would. */
.media-logo { display: flex; align-items: center; justify-content: center; height: 34px; flex-shrink: 0; text-decoration: none; color: inherit; }
.media-logo img { height: 100%; width: auto; object-fit: contain; opacity: 0.55; filter: grayscale(1); transition: opacity 200ms var(--ease-standard), filter 200ms var(--ease-standard); }
.media-logo:hover img { opacity: 1; filter: grayscale(0); }
@media (prefers-reduced-motion: reduce) {
.media-logos-track { animation: none; }
.media-logos-viewport { overflow-x: auto; }
}
.final-cta { background: var(--ink); text-align: center; padding-block: clamp(5rem, 11vw, 8rem); }
.final-cta h2 { color: var(--white); font-size: clamp(2.1rem, 4.2vw, 3.2rem); max-width: 20ch; margin-inline: auto; font-weight: 600; }
.final-cta .cta-row { margin-top: 2.25rem; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.data-table th, .data-table td { text-align: left; padding: 0.8rem 0.9rem; border-top: 1px solid var(--line-on-light); }
.data-table th { color: var(--accent-deep); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out); }
.reveal.is-in { opacity: 1; transform: translateY(0); }
/* Long-form article body must never start invisible: a tall .prose.reveal
can exceed the viewport, so IntersectionObserver never flips .is-in
(especially on mobile). Blog content is shown immediately. */
.prose.reveal,
.prose.reveal.is-in {
opacity: 1;
transform: none;
transition: none;
}
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
/* ==========================================================================
Footer
========================================================================== */
.site-footer { background: var(--ink); border-top: 1px solid var(--line-on-dark); padding-block: clamp(3.5rem, 6vw, 5rem) 2.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 2.5rem; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand .brand-logo { margin-bottom: 1rem; }
.footer-brand p { color: rgba(255,255,255,0.55); font-size: 0.92rem; max-width: 30ch; }
.footer-badges { display: flex; gap: 0.6rem; margin-top: 1.25rem; flex-wrap: wrap; }
.footer-badges a { display: inline-flex; opacity: 0.92; transition: opacity 160ms; }
.footer-badges a:hover { opacity: 1; }
.footer-badges img { height: 38px; width: 128px; object-fit: fill; display: block; }
.footer-social { display: flex; gap: 0.65rem; margin-top: 1.25rem; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-on-dark); color: rgba(255,255,255,0.65); transition: color 160ms, border-color 160ms; }
.footer-social a:hover { color: var(--accent); border-color: var(--accent); }
.footer-social svg { width: 15px; height: 15px; }
.footer-col h5 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a { font-size: 0.9rem; color: rgba(255,255,255,0.65); transition: color 160ms; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line-on-dark); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.78rem; color: rgba(255,255,255,0.6); }
.footer-legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-legal a { color: rgba(255,255,255,0.6); transition: color 160ms; }
.footer-legal a:hover { color: var(--accent); }
/* ==========================================================================
Floating CTA
========================================================================== */
.float-cta {
position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90;
display: inline-flex; align-items: center; gap: 0.6rem;
padding: 0.85rem 1.3rem; background: var(--accent); color: var(--ink);
font-size: 0.85rem; font-weight: 600; border-radius: 999px;
box-shadow: 0 14px 34px -10px rgba(0,0,0,0.4);
opacity: 0; visibility: hidden; transform: translateY(8px);
transition: opacity 200ms var(--ease-standard), transform 200ms var(--ease-out), visibility 200ms;
}
.float-cta.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.float-cta:hover { background: var(--accent-bright); }
.float-cta:active { transform: scale(0.97); }
/* ==========================================================================
Quote stack — repeated short pull-quotes, e.g. example customer requests
Lighter-weight sibling of .quote-block.
========================================================================== */
.quote-stack { display: flex; flex-direction: column; gap: 1.5rem; max-width: 640px; }
.quote-stack .quote-line { padding-left: 1.5rem; border-left: 2px solid var(--accent-deep); font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 500; font-style: italic; color: var(--ink); line-height: 1.5; }
.on-dark .quote-stack .quote-line { border-left-color: var(--accent); color: var(--white); }
.hero .quote-stack .quote-line { border-left-color: var(--accent); color: var(--white); }
/* Tag list — short preference labels, pill style */
.tag-list { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.tag-list .tag { padding: 0.7rem 1.35rem; background: var(--off-white); border-radius: 999px; font-size: 0.92rem; font-weight: 500; color: var(--ink); }
.on-dark .tag-list .tag { background: var(--off-white); color: var(--ink); }
/* Concept-card marquee — a full-bleed image-card carousel, modelled closely
on ai.fantasy.co/lead-with-ai/travel's carousel (measured directly:
16px gap, 20px media radius, alternating 6:7 portrait / 3:2 landscape
cards, top-aligned track so the shorter landscape cards' captions sit
higher — that stagger is what reads as "designed" rather than a plain
uniform grid). Same auto-scroll mechanism as the homepage's proof-bar
logo marquee and "As featured in" media bar (same @keyframes, same
pause-on-hover/reduced-motion handling, same "heading inside .container,
track full-bleed outside it" structure). Cards are a clean solid-fill
placeholder (no dashed border — that read as an unfinished debug state,
not a designed empty state) until real photography is supplied. */
.concept-marquee-viewport {
margin-top: clamp(2rem, 4vw, 3rem); overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.concept-marquee-track { display: flex; align-items: flex-start; gap: 16px; width: max-content; padding-inline: var(--gutter); animation: proof-logos-scroll 34s linear infinite; }
.concept-marquee-track:hover { animation-play-state: paused; }
.concept-card { flex-shrink: 0; display: flex; flex-direction: column; width: clamp(240px, 28vw, 384px); }
.concept-card.landscape { width: clamp(300px, 35vw, 480px); }
.concept-card-media { aspect-ratio: 6 / 7; border-radius: 20px; background: var(--off-white); display: flex; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; }
.concept-card.landscape .concept-card-media { aspect-ratio: 3 / 2; }
.concept-card-media span { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted-deep); }
.concept-card-label { margin-top: 24px; font-size: 1.05rem; font-weight: 500; color: var(--muted-deep); letter-spacing: -0.01em; }
@media (prefers-reduced-motion: reduce) {
.concept-marquee-track { animation: none; }
.concept-marquee-viewport { overflow-x: auto; }
}
/* Tight list — short declarative lines, not a numbered sequence */
.tight-list { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 1.5rem; }
.tight-list li { font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 500; color: var(--ink); padding-left: 1.4rem; position: relative; }
.tight-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-deep); }
.on-dark .tight-list li { color: var(--white); }
.on-dark .tight-list li::before { background: var(--accent); }
/* ==========================================================================
Scrollytelling components — full-bleed photo hero, live conversation demo
card, centered thesis with side-peek photos, three brand-rule act chapters
each with a sticky scroll-driven card stack, centered final CTA.
========================================================================== */
/* --- cinematic hero: full-bleed photo, corner-anchored copy --- */
.cine-hero { position: relative; height: 100vh; min-height: 640px; overflow: clip; background: var(--ink); }
.cine-hero-media { position: absolute; inset: 0; overflow: hidden; }
.cine-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.cine-hero-media::after {
content: "";
position: absolute; inset: 0;
/* horizontal layer protects the copy column's contrast against this photo's
bright sky/horizon; vertical layer keeps the top/bottom cinematic
vignette. Split hero puts text on the left, so the horizontal dim leans
left rather than the old full-width centered treatment. */
background:
linear-gradient(90deg, rgba(23,19,15,0.62) 0%, rgba(23,19,15,0.4) 42%, rgba(23,19,15,0.14) 68%, rgba(23,19,15,0.05) 100%),
linear-gradient(180deg, rgba(23,19,15,0.45) 0%, rgba(23,19,15,0.2) 25%, rgba(23,19,15,0.2) 55%, rgba(23,19,15,0.8) 100%);
}
.cine-hero-top { position: absolute; top: clamp(1.5rem, 4vw, 3rem); left: var(--gutter); z-index: 2; }
.cine-hero-top .eyebrow-lg { color: var(--white); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.cine-hero-media img { animation: hero-scale-down 1.4s var(--ease-out) forwards; }
@keyframes hero-scale-down { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cine-hero-media img { animation: none; } }
/* --- hero split: fantasy edition's two-column structure (copy | device),
composited over the concierge edition's full-bleed dusk photo (kept as the
hero background rather than fantasy's solid dark ground), per Larry's
explicit direction this session. Desktop: absolutely fills the 100vh hero,
vertically centered. Mobile: hero grows past 100vh and the grid collapses
to one column so headline + phone don't fight for a fixed viewport. --- */
.hero-split {
position: absolute; inset: 0; z-index: 2;
display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center;
gap: clamp(1.5rem, 4vw, 3rem);
padding-top: clamp(3rem, 7vw, 5rem);
}
.hero-split-headline {
color: var(--white); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05;
font-size: clamp(2.1rem, 4.4vw, 3.75rem);
max-width: 14ch;
}
.hero-split-headline .word { display: inline-block; opacity: 0; transform: translateY(14px); animation: hero-word-rise 420ms var(--ease-out) forwards; }
.hero-split-headline .word-accent { font-style: italic; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }
/* --- phrase-accent: reusable emphasis device (italic + gold underline),
same pattern as the hero's word-accent. On-dark contexts may reuse
--accent directly; on-light contexts (like the thesis h2) use --accent-deep,
the WCAG-safe text-on-light variant already established for this brand. --- */
.phrase-accent { font-style: italic; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }
@keyframes hero-word-rise { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .hero-split-headline .word { opacity: 1; transform: none; animation: none; } }
.hero-split-lede { margin-top: 1.5rem; color: rgba(253,251,246,0.82); font-size: 1.05rem; line-height: 1.55; max-width: 38ch; }
.hero-split-copy .cta-row { margin-top: 1.75rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
/* --- rolling "No [x]." line under the primary CTA: static prefix/suffix,
a vertically-cycling word between them (script.js drives the loop). --- */
.hero-split-rolling { margin-top: 1rem; display: flex; align-items: baseline; gap: 0.3rem; font-family: var(--font); font-size: 1.05rem; letter-spacing: 0.03em; color: rgba(253,251,246,0.62); }
.hero-split-rolling .roll-window { display: inline-block; height: 1.3em; overflow: hidden; vertical-align: bottom; }
.hero-split-rolling .roll-track { display: flex; flex-direction: column; }
.hero-split-rolling .roll-item { height: 1.3em; line-height: 1.3em; color: var(--accent); font-weight: 600; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .hero-split-rolling .roll-track { transition: none !important; } }
/* --- Bliink Hub entry under the hero CTA: the one secondary path, styled
after engine.com's "Explore the product" ghost link (button-scale text,
no fill, trailing arrow) but in brand tokens. Off White label so gold
stays reserved for the primary button; the gold ring echoes the logo's
ring and fills on hover to signal "this goes somewhere". --- */
.hero-hub-link { margin-top: 1.25rem; }
.hub-cta {
display: inline-flex; align-items: center; gap: 0.85rem; min-height: 44px;
padding-block: 0.25rem; border-radius: 999px; color: var(--white);
transition: transform 160ms var(--ease-out);
}
.hub-cta-text { display: flex; flex-direction: column; gap: 0.15rem; line-height: 1.25; }
.hub-cta-label { font-size: 1rem; font-weight: 500; letter-spacing: 0; }
.hub-cta-note { font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.01em; color: rgba(248,247,244,0.62); }
.hub-cta-icon {
flex-shrink: 0; display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
border: 1px solid var(--accent); border-radius: 999px; color: var(--accent);
transition: background-color 200ms ease, color 200ms ease;
}
.hub-cta-icon svg { transition: transform 200ms var(--ease-out); }
.hub-cta:active { transform: scale(0.97); }
.hub-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.hub-cta:focus-visible .hub-cta-icon { background: var(--accent); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
.hub-cta:hover .hub-cta-icon { background: var(--accent); color: var(--ink); }
.hub-cta:hover .hub-cta-icon svg { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) {
.hub-cta, .hub-cta-icon svg { transition: none; }
.hub-cta:active { transform: none; }
.hub-cta:hover .hub-cta-icon svg { transform: none; }
}
.hero-split-phone { display: flex; flex-direction: column; align-items: center; overflow-x: clip; }
/* backdrop panel behind a device-cluster sitting in the hero split's photo
column — unlike the homepage's single photographed phone (which has its
own photographic weight and reads against any backdrop), a CSS-drawn
multi-device cluster needs a material behind it to stay legible over a
busy photo. */
.hero-split-phone .device-cluster::before {
/* an opaque stage, not a translucent tint — the dark device bezels need
real contrast against the busy photo behind them, which blur/tint
alone can't supply since the photo itself is already darkened by the
hero's own scrim */
content: "";
position: absolute;
inset: 4% 6% -2%;
background: var(--off-white);
box-shadow: 0 50px 100px -20px rgba(0,0,0,0.6);
z-index: 0;
border-radius: 28px;
}
.hero-split-phone .device-cluster > .device-frame { position: relative; z-index: 1; }
@media (max-width: 900px) {
.cine-hero { height: auto; min-height: 100vh; overflow: visible; }
.hero-split { position: relative; grid-template-columns: 1fr; padding-block: clamp(6.5rem, 24vw, 8.5rem) clamp(3rem, 8vw, 4rem); }
.hero-split-headline, .hero-split-lede { max-width: none; }
.hero-split-copy .cta-row { align-items: stretch; }
.hero-split-phone { margin-top: 1rem; }
}
/* --- phone photo: a real device mockup photograph (cropped tight to the
phone itself), the live chat composited over its screen at the screen's
exact measured position (this specific cropped image's screen sits at
left 13.73%, top 6.09%, width 69.23%, height 86.79% of the frame;
re-measure if the source photo ever changes). --- */
.phone-photo { position: relative; width: clamp(300px, 28.5vw, 390px); aspect-ratio: 598 / 1018; max-width: 100%; }
@media (max-width: 900px) { .phone-photo { width: clamp(240px, 78vw, 360px); } }
.phone-photo-img { width: 100%; height: 100%; object-fit: contain; }
.phone-photo-screen {
/* re-measured via edge-scan from screen center outward to the bezel,
verified against a debug overlay; do not eyeball-adjust without
re-measuring the same way if the source photo ever changes */
position: absolute; left: 16.22%; top: 6.97%; width: 67.73%; height: 86.25%;
border-radius: 7% / 4%; overflow: clip;
box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}
/* --- phone mockup: a close recreation of a real WhatsApp thread (per
Larry's reference screenshot), filling .phone-photo-screen exactly.
Sent bubbles use WhatsApp's own green rather than the brand amber, to
match the reference as closely as asked; flagged as a brand-consistency
trade-off scoped to this one component, not a site-wide palette change. --- */
.phone-mock {
position: relative; width: 100%; height: 100%; overflow: clip;
background:
radial-gradient(circle at 18% 12%, rgba(255,255,255,0.04) 1px, transparent 1.4px),
radial-gradient(circle at 62% 38%, rgba(255,255,255,0.035) 1px, transparent 1.4px),
radial-gradient(circle at 85% 68%, rgba(255,255,255,0.035) 1px, transparent 1.4px),
radial-gradient(circle at 32% 82%, rgba(255,255,255,0.04) 1px, transparent 1.4px),
radial-gradient(circle at 75% 92%, rgba(255,255,255,0.03) 1px, transparent 1.4px),
linear-gradient(180deg, #131b20 0%, #0b1014 100%);
background-size: 42px 42px, 58px 58px, 50px 50px, 64px 64px, 46px 46px, 100% 100%;
display: flex; flex-direction: column;
}
.phone-status-bar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0.3rem 0.65rem 0.1rem; color: #fff; }
.phone-status-bar .time { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.01em; }
.phone-status-bar .status-icons { display: flex; align-items: center; gap: 0.25rem; color: #fff; }
.phone-status-bar .battery { width: 16px; height: 9px; border: 1px solid rgba(255,255,255,0.75); border-radius: 2px; padding: 1px; position: relative; display: inline-flex; }
.phone-status-bar .battery::after { content: ""; position: absolute; right: -3px; top: 2.5px; width: 2px; height: 3px; background: rgba(255,255,255,0.75); border-radius: 0 1px 1px 0; }
.phone-status-bar .battery-fill { display: block; height: 100%; width: 75%; background: #fff; border-radius: 0.5px; }
.phone-mock-head { flex-shrink: 0; display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.55rem 0.55rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.phone-mock-head .back-chevron { font-size: 1.2rem; font-weight: 600; color: rgba(255,255,255,0.85); line-height: 1; margin-right: -0.1rem; }
.phone-mock-head .dot { width: 28px; height: 28px; border-radius: 50%; background: #0d0b08; border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.phone-mock-head .dot img { width: 58%; height: auto; }
.phone-mock-head .who { font-size: 0.82rem; color: var(--white); font-weight: 600; line-height: 1.25; }
.phone-mock-head .who span { display: block; font-size: 0.6rem; font-weight: 400; color: rgba(255,255,255,0.5); }
.phone-mock-thread { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; overflow-y: auto; scrollbar-width: none; padding: 0.5rem 0.55rem; }
.phone-mock-thread::-webkit-scrollbar { display: none; }
.chat-date-divider { align-self: center; margin-bottom: 0.15rem; }
.chat-date-divider span { display: inline-block; padding: 0.2rem 0.6rem; background: rgba(255,255,255,0.08); border-radius: 6px; font-size: 0.5rem; letter-spacing: 0.02em; color: rgba(255,255,255,0.65); font-weight: 500; }
.phone-mock-bubble { max-width: 88%; padding: 0.35rem 0.45rem 0.25rem; border-radius: 8px; display: flex; flex-direction: column; }
.phone-mock-bubble .bubble-text { font-size: 10.5px; line-height: 1.35; }
.phone-mock-bubble .bubble-meta { align-self: flex-end; margin-top: 2px; font-size: 7.5px; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.phone-mock-bubble .bubble-meta .check { flex-shrink: 0; }
.phone-mock-bubble.sent { align-self: flex-end; background: #005c4b; color: #e9edef; border-bottom-right-radius: 2px; font-weight: 400; }
.phone-mock-bubble.sent .bubble-meta { color: rgba(233,237,239,0.62); }
.phone-mock-bubble.sent .check { color: #53bdeb; }
.phone-mock-bubble.received { align-self: flex-start; background: #1f2c34; color: #e9edef; border-bottom-left-radius: 2px; }
.phone-mock-bubble.received .bubble-meta { color: rgba(233,237,239,0.45); }
.phone-input-bar { flex-shrink: 0; display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.6rem 0.55rem; color: rgba(255,255,255,0.6); }
.phone-input-bar .plus { font-size: 1.05rem; line-height: 1; color: rgba(255,255,255,0.6); }
.phone-input-bar .input-pill { flex: 1; height: 20px; background: rgba(255,255,255,0.08); border-radius: 999px; }
/* --- manifesto: centered statement flanked by side-peek photos --- */
.manifesto-cine { position: relative; padding-block: clamp(5rem, 12vw, 9rem); background: var(--off-white); overflow: clip; }
.manifesto-cine-inner { max-width: 780px; margin: 0 auto; text-align: center; padding-inline: var(--gutter); position: relative; z-index: 2; }
.manifesto-cine h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 700; letter-spacing: -0.02em; }
.manifesto-cine p { margin-top: 1.5rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted-deep); line-height: 1.6; }
.manifesto-peek { position: absolute; top: 50%; transform: translateY(-50%); width: clamp(90px, 12vw, 160px); aspect-ratio: 3/4; object-fit: cover; opacity: 0.9; }
.manifesto-peek.left { left: 0; border-radius: 0 16px 16px 0; }
.manifesto-peek.right { right: 0; border-radius: 16px 0 0 16px; }
@media (max-width: 900px) { .manifesto-peek { display: none; } }
/* --- pillar title card: numeral + giant headline over full-bleed photo --- */
.pillar-title-cine { position: relative; height: 90vh; min-height: 560px; display: flex; align-items: center; justify-content: center; overflow: clip; }
.pillar-title-media { position: absolute; inset: 0; }
.pillar-title-media img { width: 100%; height: 100%; object-fit: cover; }
.pillar-title-media::after { content: ""; position: absolute; inset: 0; background: rgba(17,17,17,0.42); }
.pillar-title-inner { position: relative; z-index: 2; text-align: center; }
.pillar-title-inner .num { display: block; color: var(--white); font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.5rem); margin-bottom: 0.5rem; }
.pillar-title-inner h2 { color: var(--white); font-weight: 700; letter-spacing: -0.03em; font-size: clamp(2.75rem, 7vw, 5.5rem); }
/* --- pillar body: two-column, sticky scroll-driven card stack on the right --- */
.pillar-body { background: var(--off-white); padding-block: clamp(4rem, 8vw, 6rem); }
.pillar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 980px) { .pillar-grid { grid-template-columns: 1fr; } }
.pillar-left { position: sticky; top: calc(var(--nav-h) + 3rem); }
.pillar-left h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; }
.pillar-left p { margin-top: 1.25rem; font-size: 1.05rem; color: var(--muted-deep); line-height: 1.65; max-width: 46ch; }
@media (max-width: 980px) { .pillar-left { position: static; } }
.pillar-left .tight-list { margin-top: 2rem; }
/* static image-card grid — same visual language as .stack-card (photo,
dark bottom gradient, white title+text) but laid out as an ordinary
grid, no scroll-jack, no sticky pin, no artificially tall track. Use
this instead of the sticky stack-track pattern on interior pages where
the scroll investment of a homepage "act" isn't earned. */
.static-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.static-card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .static-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .static-card-grid { grid-template-columns: 1fr; } }
.static-card { position: relative; aspect-ratio: 3/4; border-radius: 16px; overflow: clip; display: flex; align-items: flex-end; box-shadow: 0 16px 32px -8px rgba(23,19,15,0.24); }
.static-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.static-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,19,15,0) 35%, rgba(23,19,15,0.9) 100%); }
.static-card-inner { position: relative; z-index: 2; padding: 1.25rem; }
.static-card-inner h3 { color: var(--white); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.static-card-inner p { margin-top: 0.4rem; color: rgba(255,255,255,0.72); font-size: 0.9rem; line-height: 1.5; }
.stack-track { position: relative; }
.stack-sticky { position: sticky; top: calc(var(--nav-h) + 1.5rem); height: 66vh; min-height: 420px; }
.stack-card {
position: absolute; inset: 0;
border-radius: 18px; overflow: clip;
background: linear-gradient(155deg, var(--ink) 0%, var(--ink-soft) 100%);
display: flex; align-items: flex-end;
will-change: transform, opacity;
}
/* No transition here on purpose: script.js drives transform/opacity every scroll
frame, and a CSS transition on top of that fights the scroll and reads as lag
(see DIRECTION-NOTES.md). The motion already reads smooth from rAF's own
update rate; this stays direct-manipulation, 1:1 with the scroll position. */
.stack-card-inner { position: relative; z-index: 2; padding: clamp(1.5rem, 3vw, 2.25rem); }
.stack-card-inner h3 { color: var(--white); font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 700; letter-spacing: -0.01em; }
.stack-card-inner p { margin-top: 0.5rem; color: rgba(255,255,255,0.72); font-size: 0.98rem; }
.stack-card-tally { position: absolute; top: 1.5rem; right: 1.75rem; z-index: 2; color: rgba(255,255,255,0.55); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; font-weight: 600; }
.stack-card { box-shadow: 0 24px 48px -8px rgba(23,19,15,0.28); }
/* optional photo behind a stack-card, in place of the plain ink gradient —
opt-in per card via .has-media so most stack-cards (text-only) are
unaffected. Image sits behind the text, a bottom-weighted dark gradient
on top keeps the h3/p legible, same recipe as .pillar-title-media. */
.stack-card.has-media { background: none; }
.stack-card-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stack-card.has-media::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(23,19,15,0) 30%, rgba(23,19,15,0.88) 100%);
}
.pillar-body .closing-line { margin-top: clamp(2rem, 4vw, 3rem); }
/* --- pillar title parallax (JS-driven, respects reduced motion) --- */
.pillar-title-media img { will-change: transform; }
@media (prefers-reduced-motion: reduce) { .pillar-title-media img { transform: none !important; } }
/* --- final CTA: centered --- */
.cine-final { background: var(--ink); text-align: center; padding-block: clamp(6rem, 13vw, 10rem); }
.cine-final .eyebrow { display: block; margin-bottom: 1rem; }
.cine-final h2 { color: var(--white); font-size: clamp(2.4rem, 5.5vw, 4.2rem); font-weight: 700; letter-spacing: -0.03em; max-width: 18ch; margin-inline: auto; }
.cine-final p { margin-top: 1.5rem; color: rgba(255,255,255,0.68); font-size: 1.1rem; max-width: 52ch; margin-inline: auto; }
.cine-final .cta-row { margin-top: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
/* Email-capture pill — a second, lower-commitment way to reach out
alongside the primary "Talk to Bliink" WhatsApp CTA above it, styled
after engine.com's pill-shaped email + button pattern. No backend on
this static site: submitting hands the entered email to Bliink over
WhatsApp instead of silently going nowhere (see script.js). Lives in the
hero's left-aligned copy column, so it's left-aligned, not centered. */
.email-cta-note { margin-top: 1rem; font-size: 0.85rem; color: rgba(255,255,255,0.5); }
.email-cta {
margin: 1.75rem 0 0; display: flex; align-items: center; gap: 0.5rem;
width: 100%; max-width: 400px;
background: var(--white); border-radius: 999px; padding: 0.4rem 0.4rem 0.4rem 1.5rem;
box-shadow: 0 18px 40px -16px rgba(0,0,0,0.35);
}
.email-cta input[type="email"] { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 0.95rem; color: var(--ink); }
.email-cta input[type="email"]::placeholder { color: var(--muted-deep); }
.email-cta button {
flex-shrink: 0; background: var(--accent); color: var(--ink); font-weight: 700; font-size: 0.88rem;
padding: 0.8rem 1.6rem; border-radius: 999px; white-space: nowrap; transition: background 160ms var(--ease-standard);
border: none; cursor: pointer;
}
.email-cta button:hover { background: var(--accent-bright); }
.email-cta button:active { transform: scale(0.98); }
@media (max-width: 480px) {
.email-cta { flex-direction: column; align-items: stretch; border-radius: 20px; padding: 0.6rem; gap: 0.6rem; }
.email-cta input[type="email"] { padding: 0.5rem 0.5rem 0 0.5rem; text-align: center; }
.email-cta button { width: 100%; }
}
/* ==========================================================================
Sign-up / onboarding page — modelled on engine.com/sign-up's split layout
(a narrow form column + a full-bleed photo column with feature callouts),
deliberately without the site's usual nav/footer chrome, matching the
reference's own minimal, distraction-free signup layout. No account
system exists here (Bliink has none — see the site's own "no app, no
login" facts), so this is a company-intake form, not real authentication;
submitting hands the details to Bliink over WhatsApp (see script.js),
the same no-backend pattern used by .email-cta above.
========================================================================== */
.signup-page { min-height: 100vh; display: grid; grid-template-columns: 2fr 3fr; }
@media (max-width: 900px) { .signup-page { grid-template-columns: 1fr; } }
.signup-form-col { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 5rem); background: var(--white); }
.signup-logo { display: inline-block; margin-bottom: clamp(2.5rem, 7vw, 4.5rem); }
.signup-top-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: clamp(2.5rem, 7vw, 4.5rem); }
.signup-top-row .signup-logo { margin-bottom: 0; }
.signup-account-note { font-size: 0.88rem; color: var(--muted-deep); white-space: nowrap; }
.signup-account-note a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) { .signup-account-note { white-space: normal; } }
.signup-form-col h1 { font-size: clamp(1.9rem, 2.6vw, 2.3rem); font-weight: 500; line-height: 1.3; }
.login-sub { margin-top: 0.85rem; max-width: 38ch; color: var(--muted-deep); font-size: 0.95rem; line-height: 1.55; }
.signup-form { margin-top: 2.25rem; display: flex; flex-direction: column; gap: 1.15rem; max-width: 380px; }
.form-field label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink); margin-bottom: 0.45rem; }
.form-field input { width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--line-on-light); border-radius: 10px; font: inherit; font-size: 0.95rem; color: var(--ink); background: var(--white); }
.form-field input::placeholder { color: var(--muted-deep); }
.signup-form .btn-accent { margin-top: 0.35rem; width: 100%; justify-content: center; border: none; cursor: pointer; font-size: 0.95rem; }
.signup-form-note { margin-top: 1.25rem; max-width: 380px; font-size: 0.88rem; color: var(--accent-deep); }
.email-cta[hidden] { display: none; }
.email-cta input[type="email"][aria-invalid="true"] { color: #9a3412; }
.email-cta button:disabled { opacity: 0.65; cursor: wait; }
.hero-split-copy .signup-field-error {
margin-top: 0.65rem;
max-width: 400px;
color: #fecaca;
}
.hero-split-copy .signup-notice {
margin-top: 0.85rem;
max-width: 400px;
isolation: isolate;
background: #f8f7f4;
border-color: rgba(23, 19, 15, 0.08);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.7) inset,
0 18px 44px -18px rgba(0, 0, 0, 0.55);
}
.hero-split-copy .signup-notice-title { font-size: 0.88rem; }
.hero-split-copy .signup-notice-body { font-size: 0.8rem; }
.hero-split-copy .signup-notice-link,
.hero-split-copy .signup-text-btn { font-size: 0.78rem; }
.hero-split-copy .signup-notice--personal {
background: #fff7ed;
border-color: rgba(180, 83, 9, 0.28);
}
.hero-split-copy .signup-notice--taken,
.hero-split-copy .signup-notice--success {
background: #f8f7f4;
border-color: rgba(201, 162, 39, 0.34);
}
.hero-split-copy .signup-notice--wait {
background: #f8f7f4;
border-color: rgba(107, 101, 88, 0.24);
}
.hero-split-copy .signup-notice--success {
margin-top: 0.85rem;
max-width: 400px;
}
.form-field input[aria-invalid="true"] {
border-color: #c2410c;
box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.12);
}
.signup-form .btn-accent:disabled { opacity: 0.65; cursor: wait; }
.signup-field-error { margin-top: 0.45rem; font-size: 0.82rem; color: #b42318; }
.signup-notice {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.85rem;
align-items: start;
padding: 1rem 1.05rem;
border-radius: 14px;
border: 1px solid transparent;
animation: signup-success-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.signup-notice[hidden] { display: none; }
.signup-notice-icon {
width: 2.1rem;
height: 2.1rem;
border-radius: 999px;
display: grid;
place-items: center;
flex-shrink: 0;
}
.signup-notice-icon svg { width: 1.05rem; height: 1.05rem; display: block; }
.signup-notice-copy { min-width: 0; }
.signup-notice-title {
margin: 0;
font-size: 0.92rem;
font-weight: 600;
line-height: 1.35;
color: var(--ink);
}
.signup-notice-body {
margin: 0.35rem 0 0;
font-size: 0.84rem;
line-height: 1.5;
color: var(--muted-deep);
}
.signup-notice-body strong {
color: var(--ink);
font-weight: 600;
word-break: break-word;
}
.signup-notice-actions {
margin-top: 0.75rem;
display: flex;
flex-wrap: wrap;
gap: 0.55rem 0.9rem;
align-items: center;
}
.signup-notice-link {
color: var(--accent-deep);
font-size: 0.8rem;
font-weight: 600;
line-height: 1.4;
text-decoration: underline;
text-underline-offset: 3px;
}
.signup-notice-link:hover { color: var(--ink); }
.signup-notice--personal {
border-color: rgba(180, 83, 9, 0.22);
background: linear-gradient(165deg, rgba(251, 191, 36, 0.16) 0%, rgba(255, 247, 237, 0.95) 100%);
}
.signup-notice--personal .signup-notice-icon {
background: rgba(180, 83, 9, 0.12);
color: #9a3412;
}
.signup-notice--taken {
border-color: rgba(201, 162, 39, 0.32);
background: linear-gradient(165deg, rgba(201, 162, 39, 0.14) 0%, rgba(248, 247, 244, 0.96) 100%);
}
.signup-notice--taken .signup-notice-icon {
background: rgba(201, 162, 39, 0.18);
color: var(--accent-deep);
}
.signup-notice--wait {
border-color: rgba(107, 101, 88, 0.22);
background: rgba(248, 247, 244, 0.95);
}
.signup-notice--wait .signup-notice-icon {
background: rgba(107, 101, 88, 0.12);
color: var(--muted-deep);
}
.signup-notice--success {
margin-top: 1.75rem;
max-width: 420px;
border-color: rgba(201, 162, 39, 0.28);
background: linear-gradient(165deg, rgba(201, 162, 39, 0.12) 0%, rgba(248, 247, 244, 0.96) 100%);
}
.signup-notice--success .signup-notice-icon {
background: rgba(201, 162, 39, 0.18);
color: var(--accent-deep);
}
.signup-text-btn {
appearance: none;
border: 0;
padding: 0;
background: none;
color: var(--accent-deep);
font-family: inherit;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.4;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.signup-text-btn:hover { color: var(--ink); }
@keyframes signup-success-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.signup-notice { animation: none; }
}
.signup-alt-note { margin-top: 1.25rem; font-size: 0.88rem; color: var(--muted-deep); }
.signup-alt-note a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.signup-legal { margin-top: clamp(2rem, 4vw, 3rem); max-width: 380px; font-size: 0.78rem; color: var(--muted-deep); line-height: 1.6; }
.signup-legal a { color: var(--muted-deep); text-decoration: underline; text-underline-offset: 2px; }
.signup-visual-col { position: relative; overflow: clip; display: none; }
@media (min-width: 901px) { .signup-visual-col { display: block; } }
.signup-visual-col img { width: 100%; height: 100%; object-fit: cover; }
.signup-visual-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(17,17,17,0.92), rgba(17,17,17,0) 42%); }
.signup-features { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); padding: clamp(2rem, 4vw, 3rem); }
.signup-feature-icon { width: 34px; height: 34px; color: var(--accent); margin-bottom: 0.9rem; }
.signup-features p { color: rgba(255,255,255,0.92); font-size: 0.92rem; line-height: 1.4; }
/* ==========================================================================
Conversation thread — scripted typing sequence (script.js drives reveal)
========================================================================== */
.phone-mock-bubble { opacity: 0; transform: translateY(8px); transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); }
.phone-mock-bubble.is-in { opacity: 1; transform: translateY(0); }
.typing-indicator { align-self: flex-start; display: none; align-items: center; gap: 4px; padding: 0.5rem 0.65rem; border-radius: 8px; border-bottom-left-radius: 2px; background: #1f2c34; }
.typing-indicator.is-active { display: inline-flex; }
.typing-indicator span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.6); animation: typing-pulse 1s var(--ease-standard) infinite; }
.typing-indicator span:nth-child(2) { animation-delay: 0.15s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-pulse { 0%, 60%, 100% { opacity: 0.35; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.phone-mock-bubble { opacity: 1; transform: none; transition: none; }
.typing-indicator { display: none !important; }
}
.demo-card-section .under-card-note { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); text-align: center; font-family: var(--font-mono); letter-spacing: 0.03em; }
/* ==========================================================================
Who it's for — address-style cards, hairline-divided, no icon tiles
========================================================================== */
.who-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .who-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .who-grid { grid-template-columns: 1fr; } }
.who-card {
padding: clamp(1.5rem, 3vw, 2rem) clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.75rem, 3vw, 2.25rem);
border-left: 1px solid var(--line-on-light);
border-top: 2px solid transparent;
transition: border-top-color 220ms var(--ease-standard);
/* the grid stretches all four cards to equal height, but the headings
wrap to a different number of lines per card; without this, each link
just sits wherever normal flow lands it after its own heading, so the
four "See X →" links land at four different heights. Anchoring the
link to the bottom via margin-top:auto keeps them on one shared line
regardless of heading length. */
display: flex;
flex-direction: column;
align-items: flex-start;
}
.who-grid .who-card:first-child { border-left: none; }
.who-card:hover, .who-card:focus-within { border-top-color: var(--accent); }
.who-card .eyebrow { display: block; margin-bottom: 1rem; }
.who-card p { font-size: clamp(1.05rem, 1.6vw, 1.2rem); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; line-height: 1.35; }
.who-card a { display: inline-flex; align-items: center; min-height: 24px; margin-top: auto; padding-top: 1.1rem; font-size: 0.85rem; font-weight: 600; color: var(--accent-deep); }
.who-card a:hover { color: var(--accent); }
.on-paper .who-card a:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
.who-grid .who-card { border-left: none; border-top: 1px solid var(--line-on-light); }
.who-grid .who-card:first-child { border-top: none; }
.who-card:hover, .who-card:focus-within { border-top-color: var(--line-on-light); }
.who-card:hover .eyebrow, .who-card:focus-within .eyebrow { color: var(--accent); }
}
/* ==========================================================================
Customers — quiet roster (used on the /customers/ page, no quotes on file)
========================================================================== */
.customers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
@media (max-width: 780px) { .customers-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.customer-card { display: block; border-top: 1px solid var(--line-on-dark); padding-top: 1.75rem; transition: border-color 160ms var(--ease-standard); }
.customer-card:hover, .customer-card:focus-visible { border-top-color: var(--accent); }
.customer-card img { height: 33px; width: auto; opacity: 0.75; filter: grayscale(1) brightness(1.6); margin-bottom: 1.5rem; }
.customer-card .name { color: var(--white); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.customer-card .role { margin-top: 0.35rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.03em; color: rgba(253,251,246,0.6); }
/* ==========================================================================
Testimonials — bento grid of real customer quotes (homepage only)
========================================================================== */
.testimonial-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 1rem; margin-top: 2.5rem; }
.testimonial-card { display: flex; flex-direction: column; background: rgba(253,251,246,0.04); border: 1px solid var(--line-on-dark); border-radius: 14px; padding: 1.5rem; }
.testimonial-card.featured { grid-column: span 2; grid-row: span 2; padding: 1.75rem; }
.testimonial-card.wide { grid-column: span 2; }
.testimonial-logo { height: 20px; width: auto; align-self: flex-start; opacity: 0.75; filter: grayscale(1) brightness(1.6); margin-bottom: 0.9rem; }
.testimonial-card blockquote { flex: 1; margin: 0 0 1rem; font-size: 0.88rem; font-weight: 500; font-style: italic; color: rgba(253,251,246,0.92); line-height: 1.48; }
.testimonial-card.featured blockquote { font-size: clamp(0.95rem, 1.1vw, 1.05rem); }
.testimonial-meta { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.75rem; }
.testimonial-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
.testimonial-name { color: var(--white); font-size: 0.85rem; font-weight: 700; letter-spacing: -0.01em; }
.testimonial-role { margin-top: 0.1rem; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.02em; color: rgba(253,251,246,0.55); }
/* light-background variant — the logos are white PNGs (no dark-colour
asset exists per brand), so invert them dark instead of sourcing new
files; text/border/card-tint flip to their light-mode equivalents. */
.on-paper .testimonial-card, .on-elevated .testimonial-card { background: var(--white); border-color: var(--line-on-light); box-shadow: 0 1px 3px rgba(23,19,15,0.04); }
.on-elevated .testimonial-card { background: var(--white); }
.on-paper .testimonial-logo, .on-elevated .testimonial-logo { filter: grayscale(1) invert(1) brightness(0.35); opacity: 0.85; }
.on-paper .testimonial-card blockquote, .on-elevated .testimonial-card blockquote { color: var(--ink); }
.on-paper .testimonial-name, .on-elevated .testimonial-name { color: var(--ink); }
.on-paper .testimonial-role, .on-elevated .testimonial-role { color: var(--muted-deep); }
@media (max-width: 980px) {
.testimonial-grid { grid-template-columns: repeat(2, 1fr); }
.testimonial-card.featured { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 620px) {
.testimonial-grid { grid-template-columns: 1fr; gap: 1.1rem; }
.testimonial-card.featured, .testimonial-card.wide { grid-column: span 1; }
}
/* ==========================================================================
Pricing page — time-saved calculator + fee explainer
========================================================================== */
.pricing-calc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); background: var(--white); border: 1px solid var(--line-on-light); border-radius: 20px; padding: clamp(1.75rem, 3.5vw, 3rem); box-shadow: 0 24px 48px -16px rgba(23,19,15,0.1); }
@media (max-width: 860px) { .pricing-calc { grid-template-columns: 1fr; } }
.pricing-calc-inputs h3 { font-size: 1.4rem; margin: 0 0 0.35rem; }
.pricing-calc-note { margin: 0 0 2rem; color: var(--muted-deep); font-size: 0.92rem; }
.calc-field { display: block; margin-bottom: 1.75rem; }
.calc-field:last-child { margin-bottom: 0; }
.calc-label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.6rem; }
.calc-label { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.calc-value { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; color: var(--accent-deep); }
.calc-field input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px; background: var(--line-on-light); outline: none; }
.calc-field input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid var(--white); box-shadow: 0 2px 6px rgba(23,19,15,0.25); cursor: pointer; }
.calc-field input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid var(--white); box-shadow: 0 2px 6px rgba(23,19,15,0.25); cursor: pointer; }
.calc-salary-input { display: flex; align-items: center; border: 1px solid var(--line-on-light); border-radius: 10px; overflow: clip; }
.calc-salary-prefix { padding: 0.85rem 0.9rem; background: var(--off-white); font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; color: var(--muted-deep); }
.calc-salary-input input[type="number"] { flex: 1; border: none; padding: 0.85rem 0.9rem; font: inherit; font-size: 1rem; font-weight: 600; color: var(--ink); background: transparent; outline: none; width: 100%; min-width: 0; }
.calc-salary-input input[type="number"]::-webkit-outer-spin-button, .calc-salary-input input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pricing-calc-outputs { display: flex; flex-direction: column; gap: 1.25rem; }
.calc-output-card { flex: 1; border-radius: 14px; padding: 1.5rem 1.75rem; display: flex; flex-direction: column; justify-content: center; }
.calc-output-card:not(.is-dark) { background: var(--off-white); border: 1px solid var(--line-on-light); }
.calc-output-card.is-dark { background: var(--ink); }
.calc-output-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.03em; color: var(--muted-deep); }
.calc-output-card.is-dark .calc-output-label { color: rgba(253,251,246,0.55); }
.calc-output-figure { font-size: clamp(1.8rem, 3vw, 2.3rem); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 0.3rem 0 0.2rem; }
.calc-output-card.is-dark .calc-output-figure { color: var(--accent-bright); }
.calc-output-sub { font-size: 0.85rem; color: var(--muted-deep); }
.calc-output-card.is-dark .calc-output-sub { color: rgba(253,251,246,0.65); }
.calc-disclaimer { max-width: 720px; margin: 1.5rem auto 0; font-size: 0.78rem; line-height: 1.6; color: var(--muted-deep); text-align: center; }
/* ==========================================================================
About page — narrative-specific components
========================================================================== */
/* stacked staccato lines (hero's "A meeting. / A conversation. ...") */
.staccato-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.3rem; }
.staccato-list p { color: var(--white); font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 600; }
/* photo-pair-style single feature photo with a caption, for image sections
that need one clear real photo, not a grid */
.about-photo { border-radius: 8px; overflow: clip; aspect-ratio: 4/3; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
/* honest placeholder for imagery not yet on hand — dashed, quiet, never
pretends to be a real photo. Used only where the content is specifically
biographical (the origin story) and a stock photo would misrepresent it. */
.image-placeholder { aspect-ratio: 4/3; border: 1px dashed var(--line-on-light); border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--off-white); padding: 2rem; }
.on-dark .image-placeholder { border-color: var(--line-on-dark); background: rgba(255,255,255,0.03); }
.image-placeholder span { font-family: var(--font-mono); font-size: 0.76rem; line-height: 1.6; color: var(--muted-deep); text-align: center; max-width: 26ch; }
.on-dark .image-placeholder span { color: rgba(253,251,246,0.5); }
/* the three principles, presented as philosophy, not a feature grid */
.belief-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 820px) { .belief-list { grid-template-columns: 1fr; gap: 2.5rem; } }
.belief-item { border-top: 1px solid var(--line-on-light); padding-top: 1.5rem; }
.belief-item h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; color: var(--accent-deep); }
.belief-item p { margin-top: 0.6rem; color: var(--ink-soft); line-height: 1.6; }
/* Text + sticky image card, two-column — same idea as .pillar-grid's
text-left/media-right split, adapted for a single static photo instead
of a scroll-cycling card stack (About's "We Move With You"). */
.text-media-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 980px) { .text-media-grid { grid-template-columns: 1fr; } }
.text-media-card { position: sticky; top: calc(var(--nav-h) + 3rem); border-radius: 20px; overflow: clip; aspect-ratio: 4 / 5; box-shadow: 0 24px 48px -8px rgba(0,0,0,0.5); }
.text-media-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 980px) { .text-media-card { position: static; margin-top: 2.5rem; aspect-ratio: 16 / 10; } }
/* "Why Bliink" name breakdown — short, typographic, distinct from every
other section on the page */
.name-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3rem); margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center; }
@media (max-width: 780px) { .name-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.name-item { display: flex; flex-direction: column; }
.name-item .term { font-size: clamp(1.8rem, 3.4vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--white); min-height: 2.3em; display: flex; align-items: center; justify-content: center; }
.name-item p { margin-top: 0.75rem; color: rgba(253,251,246,0.72); line-height: 1.55; }
@media (max-width: 780px) { .name-item .term { min-height: 0; } }
/* arrow-flow (the guide's "you tell us ↓ we understand ↓ we take care") */
.flow-list { max-width: 480px; margin-inline: auto; text-align: center; }
.flow-list .flow-step { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; color: var(--ink); }
.flow-list .flow-arrow { margin-block: 0.75rem; color: var(--accent-deep); font-size: 1.2rem; }
.flow-list .flow-people { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line-on-light); font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; color: var(--accent-deep); }
/* before / after transformation pair */
.transform-pair { display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap; margin-top: 2.5rem; text-align: center; }
.transform-pair .stage { max-width: 26ch; }
.transform-pair .stage .tag { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-deep); margin-bottom: 0.5rem; }
.transform-pair .stage p { font-size: 1.15rem; font-weight: 500; color: var(--ink); }
/* --- Features page: apple.com's product-page wireframe (oversized display
type, alternating full-bleed media/copy sections, minimal chrome) rebuilt
entirely in Bliink's own ink/gold/paper system — no Apple colors or type.
Display type pushed larger and tighter than the rest of the site
(clamp ceiling raised, tracking pulled to -0.03em) specifically for this
page's Apple-scale thesis moments; every other page keeps its existing
H1 scale untouched. --- */
.hero-showcase { background: var(--ink); padding-block: clamp(6rem, 14vw, 9rem) 0; overflow: clip; }
.hero-showcase .container { text-align: center; }
.hero-showcase .eyebrow { display: block; margin-bottom: 1rem; }
.hero-showcase h1 { font-size: clamp(2.75rem, 7vw, 5.5rem); line-height: 1.03; letter-spacing: -0.03em; color: var(--white); max-width: 16ch; margin-inline: auto; }
.hero-showcase .sub { margin-top: 1.25rem; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: rgba(253,251,246,0.72); max-width: 46ch; margin-inline: auto; }
.hero-showcase .hero-body { margin-top: 0.85rem; font-size: 1.05rem; line-height: 1.6; color: rgba(253,251,246,0.6); max-width: 40ch; margin-inline: auto; }
.hero-showcase .hero-cta-row { margin-top: 2rem; display: flex; justify-content: center; }
.hero-showcase .device-frame { margin-top: clamp(3rem, 7vw, 5rem); }
.hero-showcase .device-cluster { margin-top: clamp(3rem, 7vw, 5rem); }
.hero-showcase .device-cluster .device-frame { margin-top: 0; }
.hero-showcase .hero-closing { margin-top: clamp(1.5rem, 4vw, 2.5rem); font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; color: var(--white); max-width: 36ch; margin-inline: auto; line-height: 1.4; }
/* alternating text/media feature sections — media is a full column (not
sticky; sections scroll past each other in sequence, apple.com's own
rhythm), reversing side per section via .reverse */
.feature-showcase { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.feature-showcase.reverse { direction: rtl; }
.feature-showcase.reverse > * { direction: ltr; }
.feature-showcase .feature-copy h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -0.02em; line-height: 1.12; }
.feature-showcase .feature-copy p { margin-top: 1rem; max-width: 42ch; color: var(--ink-soft); line-height: 1.6; font-size: 1.05rem; }
.on-dark .feature-showcase .feature-copy p { color: rgba(253,251,246,0.72); }
@media (max-width: 900px) {
.feature-showcase, .feature-showcase.reverse { grid-template-columns: 1fr; direction: ltr; }
.feature-showcase .feature-copy { order: 1; }
.feature-showcase .device-frame, .feature-showcase .phone-photo { order: 2; margin-inline: auto; }
}
/* honest screenshot placeholder, shaped like the device it will hold —
same dashed "not final" language as .image-placeholder, drawn inside a
device silhouette so it reads as "screenshot goes here", not a random
empty box. Swap the inner dashed area for a real ![]()
per feature as
screenshots arrive; the outer frame can stay or be removed then. */
.device-frame { position: relative; }
.device-frame.phone { max-width: 300px; margin-inline: auto; }
.device-frame.tablet { max-width: 460px; margin-inline: auto; }
.device-frame.laptop { max-width: 560px; margin-inline: auto; }
.device-frame-bezel { border-radius: 36px; padding: 14px; background: linear-gradient(155deg, #2a2a2a, #0d0d0d); box-shadow: 0 40px 80px -20px rgba(0,0,0,0.45); }
.device-frame.tablet .device-frame-bezel { border-radius: 22px; padding: 12px; }
.device-frame.laptop .device-frame-bezel { border-radius: 14px 14px 4px 4px; padding: 10px 10px 22px; }
.device-frame-screen { aspect-ratio: 9/19.5; border-radius: 24px; border: 1px dashed rgba(255,255,255,0.25); background: rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.device-frame.tablet .device-frame-screen { aspect-ratio: 4/3; border-radius: 12px; }
.device-frame.laptop .device-frame-screen { aspect-ratio: 16/10; border-radius: 6px; }
.device-frame-screen span { font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.6; letter-spacing: 0.02em; color: rgba(255,255,255,0.45); text-align: center; max-width: 22ch; }
.device-frame-screen img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* multi-device hero cluster: laptop as the base, tablet and phone
staggered in front with overlap and depth — apple.com's own multi-device
hero composition (e.g. iPad + Magic Keyboard + Pencil), translated. */
.device-cluster { position: relative; width: 100%; max-width: 760px; margin-inline: auto; padding-bottom: clamp(2.5rem, 8vw, 5rem); }
.device-cluster .device-frame.laptop { max-width: 100%; }
.device-cluster .device-frame.tablet { position: absolute; width: 34%; right: -2%; bottom: -8%; z-index: 2; transform: rotate(4deg); }
.device-cluster .device-frame.phone { position: absolute; width: 16%; left: 2%; bottom: -14%; z-index: 3; transform: rotate(-6deg); }
@media (max-width: 700px) {
.device-cluster { max-width: 320px; padding-bottom: clamp(4rem, 24vw, 6rem); }
.device-cluster .device-frame.tablet { width: 42%; right: -8%; bottom: -12%; }
.device-cluster .device-frame.phone { width: 22%; left: -4%; bottom: -18%; }
}
/* photographic MacBook mockup — Larry's supplied studio-photo shell, background
removed so just the laptop sits over the hero photo, with a real product
screenshot composited into the full screen bounds (menu bar through dock,
not just the browser sub-window) so the screenshot reads as the laptop's
actual display rather than a page floating inside someone else's OS chrome.
The overlay's position/size are percentages of the shell photo (measured
from its own pixels: the screen sits at 11.3%/12.9% from the top-left,
spanning 72.57% width x 66.55% height), so it stays aligned at any render
size since both images share the shell's aspect ratio. */
.laptop-mockup { position: relative; width: 100%; max-width: 640px; margin-inline: auto; }
.laptop-mockup-shell { display: block; width: 100%; height: auto; }
.laptop-mockup-screen { position: absolute; left: 11.303%; top: 12.9%; width: 72.5704%; height: 66.55%; object-fit: cover; object-position: left center; }
/* features hero: laptop mockup given its own width (not the shared
hero-split grid share) and allowed to overflow its column to the right,
since it sits over a full-bleed photo with nothing to its right to
collide with. */
.hero-split-phone.laptop-hero-device { align-items: flex-start; overflow: visible; }
.laptop-hero-device .laptop-mockup { width: min(880px, 64vw); max-width: none; }
@media (max-width: 900px) {
.hero-split-phone.laptop-hero-device { align-items: center; }
.laptop-hero-device .laptop-mockup { width: min(560px, 78vw); }
}
/* hero phone overlay — the same phone-photo shell used by the WhatsApp demo
card, but with a real app screenshot dropped into .phone-photo-screen
instead of the chat recreation, positioned in front of and right of the
laptop mockup (Apple-style multi-device hero composition). Percentage
width/offsets are relative to .laptop-mockup (its positioned ancestor),
so it scales and stays put as the laptop itself resizes. */
.laptop-mockup .hero-phone-overlay { position: absolute; width: 30%; max-width: none; right: -6%; bottom: -9%; z-index: 3; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4)); }
.phone-photo-screen > img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
.laptop-mockup .hero-phone-overlay { width: 34%; right: -8%; bottom: -10%; }
}
/* "Get the highlights" — a direct port of apple.com/macbook-air's own
highlights gallery: fixed-size landscape cards (696x452 on their desktop
breakpoint, ~1.54:1) in a horizontal-scroll reel (no CSS scroll-snap —
Apple's own gallery doesn't use it either; it fights JS smooth-scrollBy,
silently cancelling the animation), each card a single continuous
surface with the media filling the whole card and the caption absolutely
pinned top-left over it (not a separate white panel below), plus round
paddle-nav buttons under the reel that scroll by one card width. Text
color per card follows Apple's own light/dark-media split: dark ink text
by default (for our off-white "coming soon" placeholders, which are flat
and never need protecting), `.on-dark-media` flips it to white for any
card whose media is a real photo/screenshot.
Rule to keep applying as more real images replace placeholders: a real
photo's local brightness under the caption is never guaranteed (unlike a
flat placeholder), so don't decide text color by eyeballing "is this
photo bright or dark overall" — always add `on-dark-media` for a real
photo, which gets both white text AND the ::before scrim below (a
top-left dark gradient) so legibility never depends on what happens to
sit under the text in that specific image. Placeholders alone stay dark-
text/no-scrim. */
.highlights-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.highlights-carousel { display: flex; gap: 20px; overflow-x: auto; padding: 0.5rem var(--gutter) 1.5rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.highlights-carousel::-webkit-scrollbar { display: none; }
.highlight-card { position: relative; flex: 0 0 auto; width: min(620px, 82vw); aspect-ratio: 696 / 452; border-radius: 20px; overflow: clip; background: var(--ink); min-height: 0; min-width: 0; }
.highlight-card-media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--ink); }
.highlight-card-media.is-placeholder { background: var(--off-white); border: 1px dashed var(--line-on-light); }
.highlight-card-media span { font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.6; letter-spacing: 0.02em; color: var(--muted-deep); text-align: center; max-width: 22ch; }
.highlight-card-media img { width: 100%; height: 100%; object-fit: cover; }
.highlight-card.on-dark-media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(160deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.15) 68%, rgba(0,0,0,0) 85%); }
.highlight-card-caption { position: absolute; inset: 0; padding: clamp(0.9rem, 4vw, 1.75rem); z-index: 2; pointer-events: none; }
.highlight-card-caption p { font-size: clamp(0.75rem, 2.55vw, 1.05rem); font-weight: 600; line-height: 1.4; max-width: none; color: var(--ink); }
.highlight-card-caption strong { font-weight: 700; }
.highlight-card.on-dark-media .highlight-card-caption p { color: var(--white); text-shadow: 0 1px 12px rgba(0,0,0,0.5); }
/* strong-scrim variant: for a card whose media has its own competing
heading right where our caption sits (e.g. the receipt card's "Add a
receipt" sheet title) — Larry's call was to keep every card's caption
pinned top like the rest, and solve legibility by blacking out
whatever's underneath rather than relocating the caption. A near-solid
band (shorter than it looks — the crop is tuned per-image so the key
heading clears it, e.g. receipt card shows "Add a receipt" AND "Take a
photo" both below the band, not hidden) rather than the usual soft
diagonal, so it guarantees legibility regardless of the specific image
without necessarily hiding all of it. */
.highlight-card.strong-scrim::before { background: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.9) 30%, rgba(0,0,0,0) 55%); }
/* stacked-media variant: for a card where the key content (e.g. the policy
panel's own "Your travel policy" header) sits at the very top of the
source image with nothing above it to crop into — no scrim or crop
trick can put our caption "over" it without covering it, since there's
no spare space in the source to push it down into. Stacks instead of
overlays: caption in its own solid-background strip (normal flow, own
height), media filling the remainder below with nothing drawn over it. */
.highlight-card.stacked-media { display: flex; flex-direction: column; }
.highlight-card.stacked-media::before { display: none; }
.highlight-card.stacked-media .highlight-card-caption { position: static; order: -1; background: var(--ink); padding: 1.25rem 1.75rem; flex: 0 0 auto; pointer-events: auto; }
.highlight-card.stacked-media .highlight-card-caption p { color: var(--white); text-shadow: none; }
.highlight-card.stacked-media .highlight-card-media { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; }
.highlights-nav { display: flex; justify-content: flex-end; gap: 0.6rem; padding-inline: var(--gutter); margin-top: -0.5rem; }
.highlights-paddle { width: 36px; height: 36px; border-radius: 50%; background: var(--off-white); border: 1px solid var(--line-on-light); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1; color: var(--ink); cursor: pointer; transition: background 160ms var(--ease-standard); }
.highlights-paddle:hover { background: var(--white); border-color: var(--accent-deep); }
.highlights-paddle:disabled { opacity: 0.35; cursor: default; }
.highlights-paddle:disabled:hover { background: var(--off-white); border-color: var(--line-on-light); }
/* big-number stat callout, apple.com's "Up to 18 hrs / battery life"
pattern — used once, for a real established fact, not decoration */
.stat-callout { text-align: center; }
.stat-callout .stat-number { font-size: clamp(3.5rem, 10vw, 7rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--accent); }
.stat-callout .stat-label { display: block; margin-top: 0.75rem; font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(253,251,246,0.6); }
.on-paper .stat-callout .stat-label { color: var(--muted-deep); }
/* side-by-side stat row, apple.com's multi-figure comparison pattern
("Up to 9.5x / 4x / 3.8x faster") — smaller than the solo hero stat */
.stat-row { display: flex; justify-content: center; gap: clamp(2.5rem, 8vw, 6rem); flex-wrap: wrap; }
.stat-row .stat-callout .stat-number { font-size: clamp(2.75rem, 6vw, 4.5rem); }
.transform-pair .transform-arrow { color: var(--accent-deep); font-size: 1.4rem; }