/* ==========================================================================
ComplyChip — RESPONSIVE LAYER
Loaded AFTER luxury.css. Overrides only — never redeclares base design.
Delete the to revert the entire responsive pass.
Desktop-first ladder, chosen to interleave with the five media blocks that
already live in luxury.css (1180 / 1080 / 980 / 960 / 640). Those are left
untouched; each fires first and this sheet only mops up what they miss.
tokens fluid gutter + type scale (no media query)
nav burger / drawer base state
1200px tighten wide two-column grids — nothing collapses
960px DEFECT D1 — product visuals forced to final state when un-pinned
900px master collapse — two-column -> one, nav -> drawer
640px type floor, halved section padding, stacked CTAs
420px trims for 375px viewports
coarse touch pointers — kill hover-only transforms
short landscape phones / short laptop windows
========================================================================== */
/* ==========================================================================
FLUID TOKENS
luxury.css scopes its tokens to `.ccl` (not :root), so we re-declare on the
same selector — equal specificity, later sheet wins.
--ccl-gutter is read by six call sites in luxury.css (.ccl-wrap:44,
.ccl-hero-inner:223, .ccl-trust-strip-inner:353, .ccl-cap-pin-head:1656,
.ccl-cap-pin-slide:1741, .ccl-cap-pin-hint:1801). Making the ONE token
fluid fixes horizontal padding everywhere with zero selector edits.
Every heading clamp keeps its ORIGINAL vw term and max (luxury.css:52, 68,
80) so desktop rendering is unchanged. Only the floors move.
========================================================================== */
.ccl {
--ccl-gutter: clamp(20px, 4.2vw, 56px); /* was a fixed 56px */
--ccl-gutter-wide: clamp(16px, 2.4vw, 32px); /* for rails hardcoding `padding: 0 32px` */
--ccl-fs-h1: clamp(38px, 6.4vw, 96px); /* floor 56 -> 38 */
--ccl-fs-h2: clamp(34px, 5.8vw, 88px); /* floor 48 -> 34 */
--ccl-fs-h3: clamp(24px, 3.4vw, 48px); /* floor 32 -> 24 */
/* .ccl-lede and .ccl-hero-sub were FIXED sizes (20px / 22px), not clamps, so
there is no original vw term to preserve. These ramps are tuned to reach the
original value at exactly 900px — the master collapse line — so every viewport
at or above tablet renders identically to before. Only phones scale down. */
--ccl-fs-lede: clamp(16px, 13px + 0.78vw, 20px); /* was a fixed 20px; 20px at >=900 */
--ccl-fs-sub: clamp(17px, 13.2px + 0.98vw, 22px); /* was a fixed 22px; 22px at >=900 */
}
.ccl-h1 { font-size: var(--ccl-fs-h1); }
.ccl-h2 { font-size: var(--ccl-fs-h2); }
.ccl-h3 { font-size: var(--ccl-fs-h3); }
.ccl-lede { font-size: var(--ccl-fs-lede); }
.ccl-hero-sub { font-size: var(--ccl-fs-sub); }
/* luxury.css:871 sets this with !important, so an equal-specificity
!important is the only way to bind it to the token. */
.ccl-final-h { font-size: var(--ccl-fs-h1) !important; }
/* The two rails that hardcode `padding: 0 32px` (luxury.css:45, 133). */
.ccl-wrap-wide,
.ccl-nav-inner { padding-inline: var(--ccl-gutter-wide); }
/* Overflow guard.
MUST be `clip`, never `hidden`: `overflow-x: hidden` creates a scroll
container and silently kills `position: sticky` for every descendant —
.ccl-nav, .ccl-cap-pin-sticky, .ccl-hiw-rail and .ccl-hiw-card all die.
Also never put this on .ccl or .ccl-host for the same reason. */
html,
body { overflow-x: clip; }
/* ==========================================================================
NAV — burger + in-nav drawer (base / desktop state)
The JSX lands in a later phase; this is the styling contract:
No position:fixed overlay and no body scroll lock — Lenis owns scroll and
`overflow:hidden` on body can freeze the page. The drawer stays an in-flow
child of the sticky nav.
========================================================================== */
.ccl-nav-burger {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
width: 40px;
height: 40px;
padding: 0;
justify-self: end;
background: transparent;
border: 1px solid var(--ccl-line);
border-radius: 10px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.ccl-nav-burger span {
display: block;
width: 16px;
height: 1.5px;
border-radius: 2px;
background: var(--ccl-ink);
transition: transform 260ms cubic-bezier(.2,.8,.2,1);
}
/* bars sit 5.5px apart (1.5px bar + 4px gap) -> 2.75px each to meet centre */
.ccl-nav.is-open .ccl-nav-burger span:first-child { transform: translateY(2.75px) rotate(45deg); }
.ccl-nav.is-open .ccl-nav-burger span:last-child { transform: translateY(-2.75px) rotate(-45deg); }
.ccl-nav-drawer { display: none; }
/* ==========================================================================
961–1200px — tighten the wide two-column grids. Nothing collapses here.
The lower bound is REQUIRED, not cosmetic. Two rules below re-declare a
multi-column grid on `.ccl-cap-pin-slide-inner` and `.ccl-hiw-grid`. Those
selectors are single-class, exactly matching luxury.css's `@media
(max-width: 960px)` collapse rules (luxury.css:2265 -> `1fr`, luxury.css:2760
-> `1fr`). Because this sheet loads AFTER luxury.css, a bare `max-width: 1200`
query still matches at phone widths and would win the cascade on equal
specificity — pinning the product canvas to a ~6px column and crushing the
how-it-works card. Capping at 960px hands those widths back to the collapse.
========================================================================== */
@media (min-width: 961px) and (max-width: 1200px) {
.ccl-hero-inner { gap: 56px; }
.ccl-trust-strip-inner { gap: 32px; }
.ccl-trust-grid { gap: 48px; }
.ccl-foot-top { gap: 48px; }
.ccl-cap-pin-slide-inner {
grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr);
gap: 44px;
}
.ccl-ai-foot { gap: 44px; }
.ccl-hiw-grid { grid-template-columns: 180px 1fr; gap: 36px; }
.ccl-hiw-card-body { gap: 32px; }
}
/* ==========================================================================
1340px — the hero's decorative float cards hang outside the stage
(luxury.css:1037-1039 use left:-68px / right:-84px). luxury.css:1041 only
hides them below 1180px, so between 1181 and ~1340 the right-hand "Indexed"
card runs past the viewport edge. It used to force a horizontal scrollbar;
`overflow-x: clip` now absorbs that, but the card still renders visibly
sheared. Pull both outer cards inward instead of hiding them — 1280 is one
of the most common laptop widths and losing the decoration there is worse.
========================================================================== */
@media (max-width: 1340px) {
.ccl-float-pos--doc { right: -24px; }
.ccl-float-pos--score { left: -32px; }
}
/* ==========================================================================
DEFECT D1 — product visuals 2–5 render blank once the pin is released.
LCapabilities (ccl-product.jsx:344-375) hands `live={i === active}` to one
slide at a time. luxury.css:2248 un-pins the section with
`height: auto !important` below 960px, so all five slides stack and are on
screen simultaneously while only ONE ever carries `.live` — the other four
sit in their invisible resting state (.ccl-vis-risk-bar{height:0},
.ccl-vis-risk-row{opacity:0}, .ccl-vis-risk-fill{width:0}, and the
copilot / workflow / graph equivalents).
Fix is CSS-only: reuse the exact "force to final state" declaration list
that luxury.css:2280-2299 already ships for prefers-reduced-motion. The
!important on every line is inherited verbatim from that block and is
required — CSS animations outrank normal author declarations, so only an
important declaration can pin the final state.
Scope note: the query is `max-width: 960px, max-height: 700px` rather than
width alone. That union is exactly the set of conditions under which the
section is un-pinned once the short-viewport block at the bottom of this
file also releases it — without the second condition, a 1280x650 window
would un-pin and reintroduce the same blank slides.
========================================================================== */
@media (max-width: 960px), (max-height: 700px) {
.ccl-vis-scan, .ccl-vis-doc-line.lit, .ccl-vis-doc-tag,
.ccl-vis-json, .ccl-vis-out-status,
.ccl-vis-risk-bar, .ccl-vis-risk-row, .ccl-vis-risk-fill,
.ccl-vis-cp-qtext span, .ccl-vis-cp-think, .ccl-vis-cp-a, .ccl-vis-cp-row,
.ccl-vis-flow-node, .ccl-vis-graph-edge, .ccl-vis-graph-node, .ccl-vis-graph-halo,
.ccl-vis-out-dot, .ccl-vis-flow-status i,
.ccl-cap-pin-hint-tip::before {
animation: none !important;
}
.ccl-vis-doc-line.lit { background: rgba(31,58,48,0.20) !important; }
.ccl-vis-doc-tag { opacity: 1 !important; transform: none !important; }
.ccl-vis-json { clip-path: none !important; }
.ccl-vis-risk-bar { height: var(--h) !important; }
.ccl-vis-risk-row, .ccl-vis-cp-a, .ccl-vis-cp-row, .ccl-vis-flow-node, .ccl-vis-graph-node { opacity: 1 !important; transform: none !important; }
.ccl-vis-cp-qtext span { clip-path: none !important; }
.ccl-vis-risk-fill { width: var(--w) !important; }
.ccl-vis-graph-edge { stroke-dashoffset: 0 !important; }
/* Two resting states the reduced-motion block forgets to restore: with
animations off both would stay at opacity 0 forever. */
.ccl-vis-out-status,
.ccl-vis-graph-ping { opacity: 1 !important; }
}
/* ==========================================================================
900px — MASTER COLLAPSE
Everything still two-column goes one-column and the nav becomes a drawer.
Deliberately just below the 960/980/1080 blocks in luxury.css so each of
those fires first; this only handles what they never covered.
========================================================================== */
@media (max-width: 900px) {
/* ---- nav -> drawer ---- */
.ccl-navlinks { display: none; }
.ccl-nav-burger { display: inline-flex; }
.ccl-nav-drawer {
display: block;
background: var(--ccl-paper);
border-top: 1px solid var(--ccl-hairline);
padding: 4px var(--ccl-gutter-wide) 16px;
max-height: calc(100dvh - 72px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* REQUIRED: the display:block above would otherwise beat the UA
[hidden]{display:none} rule and the drawer would always be open. */
.ccl-nav-drawer[hidden] { display: none; }
.ccl-nav-drawer a {
display: block;
padding: 15px 0; /* -> ~56px touch target */
font-size: 17px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--ccl-ink-2);
text-decoration: none;
border-bottom: 1px solid var(--ccl-hairline);
}
.ccl-nav-drawer a:last-child { border-bottom: none; }
/* ---- hero ---- */
.ccl-hero { padding: 48px 0 64px; }
.ccl-hero-inner { grid-template-columns: 1fr; gap: 40px; }
.ccl-hero-copy { max-width: none; }
.ccl-hero-meta { margin-bottom: 28px; }
.ccl-hero-sub { margin: 24px 0 32px; max-width: none; }
.ccl-hero-actions { margin-bottom: 40px; }
/* ---- trust strip (minmax(140px,auto) 1fr overflows below ~800px) ---- */
.ccl-trust-strip-inner { grid-template-columns: 1fr; gap: 20px; }
.ccl-trust-label { max-width: none; }
/* ---- section rhythm ---- */
.ccl-section { padding: 80px 0; }
.ccl-section-tight { padding: 72px 0; }
.ccl-section-head { margin-bottom: 44px; }
/* ---- AI ---- */
.ccl-ai-pipeline-wrap { margin: 40px 0 56px; }
.ccl-ai-pipeline { padding: 28px 24px 32px; }
.ccl-ai-foot { margin-top: 56px; padding-top: 40px; }
/* ---- security / trust (minmax(320px,5fr) minmax(0,7fr) + 72px gap) ---- */
.ccl-trust { padding: 88px 0; }
.ccl-trust-grid { grid-template-columns: 1fr; gap: 40px; }
/* ---- final CTA ---- */
.ccl-final { padding: 96px 0; }
.ccl-final-meta { margin-top: 40px; gap: 24px; flex-wrap: wrap; justify-content: center; }
/* ---- footer ---- */
.ccl-foot { padding: 64px 0 32px; }
.ccl-foot-top { grid-template-columns: 1fr; gap: 40px; padding-bottom: 48px; }
.ccl-foot-tag { max-width: none; }
}
/* ==========================================================================
640px — type floor engages, section padding halves, CTAs stack.
Matches the breakpoint luxury.css:2486 already uses for .ccl-ind-grid.
========================================================================== */
@media (max-width: 640px) {
/* ---- nav ---- */
.ccl-nav-inner { height: 60px; }
.ccl-brand { font-size: 19px; }
.ccl-nav-drawer { max-height: calc(100dvh - 60px); }
/* ---- section rhythm ---- */
.ccl-section { padding: 56px 0; }
.ccl-section-tight { padding: 48px 0; }
.ccl-section-head { margin-bottom: 32px; }
.ccl-hero { padding: 32px 0 48px; }
.ccl-trust { padding: 64px 0; }
.ccl-final { padding: 64px 0; }
/* ---- full-width stacked buttons.
LMagnetic (ccl-scroll.jsx:149) wraps each button in an inline-flex span,
so the SPAN has to stretch too, not just the .ccl-btn inside it. ---- */
.ccl-hero-actions,
.ccl-final-actions,
.ccl-ea-actions {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.ccl-hero-actions > span,
.ccl-final-actions > span,
.ccl-ea-actions > span { width: 100%; }
.ccl-hero-actions .ccl-btn,
.ccl-final-actions .ccl-btn,
.ccl-ea-actions .ccl-btn {
width: 100%;
justify-content: center;
}
/* ---- final CTA meta (inline-flex, gap 32) ---- */
.ccl-final-meta {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
margin-top: 36px;
}
/* ---- security certifications ---- */
.ccl-cert-grid { grid-template-columns: 1fr; }
.ccl-cert { padding: 24px 22px; min-height: 0; }
/* ---- footer ---- */
.ccl-foot-cols { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
.ccl-foot-bar { flex-direction: column; align-items: flex-start; gap: 16px; }
.ccl-foot-badges { flex-wrap: wrap; gap: 10px 20px; }
/* ---- early access ---- */
.ccl-ea-main { padding: 26px 22px; }
.ccl-ea-stat { padding: 26px 24px 24px; }
.ccl-ea-stat-num { font-size: 60px; }
.ccl-ea-stat-lbl { max-width: none; }
/* ---- AI ---- */
.ccl-ai-pipeline-stages { grid-template-columns: repeat(2, 1fr); }
.ccl-ai-pipeline { padding: 24px 18px 28px; }
.ccl-ai-card { padding: 26px 22px 24px; }
/* ---- industries / how it works ---- */
.ccl-ind-card-body { padding: 22px 22px 20px; }
.ccl-hiw-card-inner { padding: 22px 20px; }
/* ---- capability rail: pips scroll horizontally, scrollbar hidden ---- */
.ccl-cap-pin-pips {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 2px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.ccl-cap-pin-pips::-webkit-scrollbar { display: none; }
.ccl-cap-pin-head { padding-top: 40px; }
.ccl-cap-pin-slide { padding: 32px var(--ccl-gutter); }
.ccl-cap-pin-canvas { min-height: 420px; }
/* ---- capability visuals: drop the columns that cannot survive ---- */
.ccl-vis-intake { grid-template-columns: 1fr; }
.ccl-vis-intake-doc {
padding: 22px 20px 24px;
border-right: none;
border-bottom: 1px solid var(--ccl-line);
}
.ccl-vis-intake-out { padding: 20px 18px; }
.ccl-vis-risk-track { display: none; }
.ccl-vis-risk-row { grid-template-columns: 1fr 76px 52px; gap: 10px; }
.ccl-vis-cp-src { display: none; }
.ccl-vis-risk { padding: 22px 18px; }
.ccl-vis-copilot,
.ccl-vis-flow,
.ccl-vis-graph { padding: 20px 18px; }
/* ---- hero product mock: the toolbar url has no room left ---- */
.ccl-hero-url { display: none; }
.ccl-hero-toolbar { padding: 10px 12px; gap: 10px; }
.ccl-hero-toolbar-tabs span { padding: 5px 8px; font-size: 9.5px; }
/* HeroPreview sets padding/min-height and the score size as React inline
styles (ccl-hero.jsx), so !important is required to reach them. */
.ccl-hp-body { padding: 22px 18px 24px !important; min-height: 0 !important; gap: 20px !important; }
.ccl-hp-score { font-size: 68px !important; }
}
/* ==========================================================================
420px — trims for 375px-class viewports.
========================================================================== */
@media (max-width: 420px) {
.ccl-ai-card-spec-row { grid-template-columns: 1fr; gap: 4px; }
.ccl-ai-card { padding: 22px 18px 20px; }
.ccl-ea-main { padding: 22px 18px; }
.ccl-ea-stat { padding: 22px 20px 20px; }
.ccl-ea-stat-num { font-size: 52px; }
.ccl-cert { padding: 20px 18px; }
.ccl-ind-card-body { padding: 18px 18px 16px; }
.ccl-ind-card-name { font-size: 26px; }
.ccl-hiw-card-inner { padding: 18px 16px; }
.ccl-hero-meta { gap: 10px; font-size: 12px; margin-bottom: 24px; }
.ccl-btn { padding: 0 16px; font-size: 13.5px; }
.ccl-vis-risk-row { grid-template-columns: 1fr 68px 46px; gap: 8px; }
.ccl-final-meta { font-size: 10px; letter-spacing: 0.12em; }
/* ---- hero product mock: drop the tab rail, shrink the score ---- */
.ccl-hero-toolbar-tabs { display: none; }
.ccl-hp-body { padding: 18px 14px 20px !important; gap: 16px !important; }
.ccl-hp-score { font-size: 56px !important; }
.ccl-hp-cards { gap: 6px !important; }
}
/* ==========================================================================
TOUCH / COARSE POINTER
iOS synthesises a `mousemove` on tap but frequently never fires
`mouseleave`, so a tapped card would stay permanently tilted. The tilt
transforms are driven by custom properties written as inline styles
(ccl-sections.jsx:172-175 sets --rx/--ry/--mx/--my, ccl-ai.jsx:99-100 sets
--rx/--ry), so !important is the reliable way to neutralise them without
opening either copy-owned file.
========================================================================== */
@media (hover: none), (pointer: coarse) {
.ccl-ind-card,
.ccl-ind-card-vis svg,
.ccl-ai-card { transform: none !important; }
.ccl-ind-card-vis::after { opacity: 1; }
.ccl-iv-check { stroke-dashoffset: 0; }
}
/* ==========================================================================
SHORT VIEWPORT — landscape phones and 1366x768-class laptop windows.
A 100vh sticky pin plus a 5x100vh scroll budget is unusable under ~700px
of height, so mirror what luxury.css:2247 already does at 960px wide.
Guarded with min-width: 901px so it never double-applies with the 900px
block above.
========================================================================== */
@media (max-height: 700px) and (min-width: 901px) {
/* height comes from an inline style (ccl-product.jsx:394 writes
`height: 500vh`), so !important is the only way to release it. */
.ccl-cap-pin { height: auto !important; }
.ccl-cap-pin-sticky { position: static; height: auto; overflow: visible; }
.ccl-cap-pin-head { grid-template-columns: 1fr; padding-bottom: 24px; }
.ccl-cap-pin-pips { flex-wrap: wrap; }
/* ccl-product.jsx:361 writes translate3d() as an inline style on this
element every scroll frame — !important is required. */
.ccl-cap-pin-track {
flex-direction: column;
width: 100%;
transform: none !important;
}
.ccl-cap-pin-slide { width: 100%; height: auto; padding: 40px var(--ccl-gutter); }
.ccl-cap-pin-slide-inner { grid-template-columns: 1fr; gap: 32px; height: auto; }
.ccl-cap-pin-text { opacity: 1; transform: none; }
.ccl-cap-pin-canvas {
opacity: 1;
transform: none;
min-height: 420px;
max-height: none;
}
.ccl-cap-pin-hint { display: none; }
/* ccl-howitworks.jsx:347 writes `top: ${80 + i * 12}px` inline on each
stacking card — !important is required to unstick them. */
.ccl-hiw-card {
position: relative;
top: auto !important;
margin-bottom: 24px;
min-height: 0;
}
}