/* ============================================================================
BENALI BRAND SYSTEM — marketing surfaces
----------------------------------------------------------------------------
The core stylesheet for everything a reader is meant to be PERSUADED by:
benali.com, landing pages, campaign pages. Ratified 2026-08-16 with the
benali.com redesign. Pair with brand-kit.css (page components) and
brand-artifacts.js (the canvas ground renderer). No build step; plain CSS
custom properties. benali-site serves this file under the same name
(renamed from atlas-3.css, 2026-09-01). The .a3- class prefix is a
stable interface — do not rename it.
THE SYSTEM
- Light is the page (paper #FCFCFD); dark is navy #0C1030 and appears only
on a STAGE (§06) — a bounded surface placed deliberately inside a light
document. Not a theme, not a toggle, never a user preference.
- THE RAMP (§02) is the single source of every artifact colour: pale
indigo → majorelle → violet → rose → coral. Ramp colours never appear as
ink, fill, or border; character comes from the GEOMETRY of the artifacts
(§07) varying, never the colour varying.
- Majorelle #4A52D8 is the one accent, and the only ramp member that is
also ink.
- One font: Hanken Grotesk. Emphasis is colour, never italic. Run-on
heads (§03); never an eyebrow + headline stack.
- The filled pill silhouette means INTERACTIVE; statics are chromeless.
- Product captures follow the six screenshot treatments (§06) — how a
capture meets the page is a law, not a per-page decision.
- Motion is never faster than a breath; nothing re-animates on scroll.
One carve-out (2026-09-01): a hero artifact may be scrubbed by scroll
position — one-shot, never a loop; reduced motion gets the finished
composition.
- Ink scales never cross grounds (§03).
Marks (wordmark ladder, the cube brand mark + its ladder/tiles/favicon,
lockups, the Light) live in ../shared/logos/ — placed as images, never
re-typeset.
========================================================================== */
/* ============================================================================
01 · GROUNDS, INK, LINES
========================================================================== */
:root {
/* ---- grounds ---- */
--paper: #FCFCFD; /* the default section ground */
--tray: #F5F6F8; /* the page behind cards; slightly recessed */
--card: #FFFFFF; /* raised object */
--navy: #0C1030; /* THE dark stage ground — blued, not slate */
--chrome-dark: #23262E; /* window title bar on a dark capture */
/* ---- ink on light ---- */
--ink: #2E333B; /* headlines, primary copy */
--ink-mid: #5B626D; /* run-on continuations, body, secondary */
--ink-meta: #656C77; /* 12px meta labels — the CONTRAST FLOOR.
rgba(46,51,59,0.4) was used early and measures
2.28:1; this is ~4.6:1. Never go lighter than
this on a text element. */
--ink-quiet: rgba(46, 51, 59, 0.55); /* 13px+ only */
--ink-ghost: rgba(46, 51, 59, 0.34); /* 13px+ only, non-essential */
/* ---- ink on the navy stage ---- */
--ink-on-dark: #FFFFFF;
--ink-on-dark-mid: rgba(255, 255, 255, 0.66);
--ink-on-dark-quiet: rgba(255, 255, 255, 0.58);
--ink-on-dark-ghost: rgba(255, 255, 255, 0.38);
/* ---- lines ---- */
--line: rgba(46, 51, 59, 0.10);
--line-strong: rgba(46, 51, 59, 0.12);
--line-on-dark: rgba(255, 255, 255, 0.09);
/* ---- structure ---- */
--measure: 1300px; /* page container */
--gutter: 24px;
--r-control: 999px; /* pills; the silhouette means interactive */
--r-card: 14px;
--r-tile: 16px; /* bento card that carries a ground */
--r-stage: 22px;
--r-window: 10px; /* product capture frame */
/* ---- motion (the breath law) ---- */
--ease-breath: cubic-bezier(0.16, 1, 0.3, 1);
--t-control: 240ms;
}
/* ============================================================================
02 · THE RAMP — the single source of every colour in every artifact
----------------------------------------------------------------------------
Five stops, sampled by position t ∈ [0,1]. Cool at 0, warm at 1. Artifacts
traverse a SEGMENT of it; which segment is what distinguishes them. These
tokens exist for CSS-only fallbacks — the canvas reads the same numbers
from brand-artifacts.js (keep the two in sync; benali-site serves the
same file).
RULE: ramp colours appear ONLY inside artifacts and product-capture
shadows. They are never ink, never a border, never a button fill. The one
exception is --majorelle, which is also the accent (§04).
========================================================================== */
:root {
--ramp-0: #C9CCF5; /* t 0.00 · pale indigo */
--ramp-1: #4A52D8; /* t 0.26 · majorelle — THE brand hue */
--ramp-2: #965CBE; /* t 0.52 · violet seam */
--ramp-3: #C4507A; /* t 0.74 · rose */
--ramp-4: #E0603F; /* t 1.00 · coral */
--majorelle: #4A52D8;
--majorelle-lift: #9AA0EE; /* accent rendition ON the navy stage */
}
/* ============================================================================
03 · TYPE
----------------------------------------------------------------------------
The run-on headline: lead sentence, no trailing period, continuation on its OWN LINE in
--ink-mid. Never an eyebrow + headline stack.
Technology solutions to improve your operations
Agents that know your company, everyday tasks automated.
========================================================================== */
body.atlas3 {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
html { background: var(--paper); } /* REQUIRED: body's background does not
propagate to the canvas if any ancestor paints one, and body is only as
tall as its content — set both or the page shows a tonal seam. */
a { color: inherit; text-decoration: none; }
a:hover { color: var(--majorelle); }
::selection { background: rgba(74, 82, 216, 0.18); }
.a3-h-hero { margin: 0; font-size: clamp(22px, 2.3vw, 31px); font-weight: 500; line-height: 1.15; letter-spacing: -0.028em; max-width: 44ch; }
.a3-h-cta { margin: 0; font-size: clamp(28px, 3.1vw, 40px); font-weight: 500; line-height: 1.15; letter-spacing: -0.028em; }
.a3-h-section { margin: 0; font-size: clamp(20px, 2.2vw, 26px); font-weight: 500; line-height: 1.25; letter-spacing: -0.022em; }
.a3-h-step { margin: 0; font-size: clamp(18px, 1.9vw, 22px); font-weight: 500; line-height: 1.25; letter-spacing: -0.022em; }
.a3-h-card { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.a3-h-tile { margin: 0; font-size: 15px; font-weight: 600; }
/* the continuation — one rule covers every head */
.a3-h-hero > span, .a3-h-cta > span, .a3-h-section > span,
.a3-h-step > span, .a3-h-card > span { display: block; color: var(--ink-mid); }
.a3-on-dark .a3-h-hero > span, .a3-on-dark .a3-h-section > span,
.a3-on-dark .a3-h-step > span { color: var(--ink-on-dark-mid); }
.a3-lede { margin: 10px 0 0; font-size: 15px; color: var(--ink-mid); text-wrap: pretty; }
.a3-meta { font-size: 12px; font-weight: 500; color: var(--ink-meta); }
/* section eyebrow: chromeless tracked caps, never a pill */
.a3-eyebrow { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
/* the live status line: pulsing dot + plain text, no container */
.a3-status { display: inline-flex; align-items: center; font-size: 14px; color: var(--ink-mid); }
.a3-on-dark .a3-status { color: var(--ink-on-dark-mid); }
.a3-status::before {
content: ''; width: 6px; height: 6px; border-radius: 50%; margin-right: 9px;
background: var(--majorelle); animation: a3-pulse 3s ease-in-out infinite;
}
.a3-on-dark .a3-status::before { background: var(--majorelle-lift); }
/* ============================================================================
04 · CONTROLS — pills. The silhouette means interactive.
========================================================================== */
.a3-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 17px; border: 0; border-radius: var(--r-control);
font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1;
cursor: pointer;
background: var(--majorelle); color: #fff;
transition: transform var(--t-control) var(--ease-breath);
}
.a3-btn:hover { transform: translateY(-1px); color: #fff; }
.a3-btn-lg { padding: 10px 19px; }
/* on the navy stage the accent rendition is PAPER, not a lifted majorelle —
the ground already carries the hue */
.a3-on-dark .a3-btn { background: #fff; color: var(--ink); }
.a3-on-dark .a3-btn:hover { color: var(--ink); }
.a3-navlink { padding: 8px 12px; border-radius: var(--r-control); font-size: 14px; font-weight: 500; color: var(--ink-mid); }
/* inline "go deeper" link — accent, arrow, no underline */
.a3-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--majorelle); }
.a3-on-dark .a3-link { color: var(--majorelle-lift); }
/* ============================================================================
05 · CARDS AND THE BENTO
----------------------------------------------------------------------------
Six cards, three columns. Card 01 spans 2, card 06 spans all 3.
AT MOST TWO cards in a bento carry a ground — that is what makes those two
read as anchors. Every other card is plain white.
========================================================================== */
.a3-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.a3-card {
position: relative; display: flex; flex-direction: column; overflow: hidden;
background: var(--card); border: 1px solid var(--line);
border-radius: var(--r-card); padding: 24px 24px 0;
}
.a3-card-plain { padding: 24px; }
.a3-card > * { position: relative; } /* lift content above the artifact */
.a3-card .a3-h-card { margin-bottom: 22px; padding-right: 48px; }
/* the affordance chip, top-right — replaces a text link on a whole-card link */
.a3-chip {
position: absolute; top: 19px; right: 19px; width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--line-strong); border-radius: 8px;
background: rgba(255, 255, 255, 0.8); color: rgba(46, 51, 59, 0.4);
}
/* ============================================================================
06 · SCREENSHOT TREATMENTS — the six, and the law
----------------------------------------------------------------------------
THE LAW. A product capture either sits on a STAGE (a bounded surface with
real edges: a full stage, a full-bleed band, a rail stage, or a card) or it
sits OFF STAGE on open paper. On a stage, cropping is legal and the navy
ground is allowed. Off stage, the FRAME IS NEVER CUT — if the capture is
too tall, crop the IMAGE inside an intact frame (four corners, four rounded
edges). This is the rule that fixes windows that "stop in weird places".
Dark ground ONLY on a stage. There is no dark bleeding into paper without
an edge — Dissolve is the light-section answer instead.
RHYTHM PER PAGE: at most one Rise OR Bleed, at most one Veil, never two of
the same adjacent. Ledge and Dissolve carry everything else.
VERTICAL ROOM: Rise and Bleed crop the window at the stage bottom, so the
section's bottom padding goes to ZERO and the next section carries the
space. Ledge needs ~50px of clear paper under the window for its seam.
========================================================================== */
/* ---- the window frame itself ---- */
.a3-window { border-radius: var(--r-window); overflow: hidden; }
.a3-window > img { width: 100%; display: block; }
.a3-window-light { box-shadow: 0 34px 60px -30px rgba(27,30,35,0.34), 0 2px 5px rgba(27,30,35,0.05), 0 0 0 1px var(--line); }
.a3-window-dark { box-shadow: 0 40px 90px -28px rgba(0,0,0,0.80), 0 0 0 1px var(--line-on-dark); }
/* cropped at the stage bottom: square off the two bottom corners */
.a3-window-rising { border-radius: 11px 11px 0 0; }
/* ---- 01 RISE · full stage. Hero. One per page. ----
The stage owns a 22px radius and sits inside the page rails; the window
rises off its bottom edge. */
.a3-stage {
position: relative; overflow: hidden;
background: var(--navy); border-radius: var(--r-stage);
}
.a3-stage-inner { position: relative; padding: 44px 72px 0; }
/* ---- 02 BLEED · full-width stage. The alternative to Rise, never adjacent. ---- */
.a3-stage-bleed { position: relative; overflow: hidden; background: var(--navy); border-radius: 0; }
/* ---- 03 VEIL · rail stage. Copy on paper, stage bleeds off ONE rail. ----
Put on the absolutely-positioned ground div inside a relative column:
left: calc(50% - 50vw - ) bleeds to the left viewport edge. */
.a3-stage-rail {
position: absolute; top: 0; bottom: 0; right: 0;
background: var(--navy); border-radius: 0 20px 20px 0; overflow: hidden;
}
.a3-stage-rail-left { border-radius: 20px 0 0 20px; }
/* the capture inside a rail stage is FULLY contained with even padding —
the STAGE is what gets cropped here, not the window */
.a3-stage-rail + * { position: relative; padding: 38px; }
/* ---- 04 LEDGE · the quiet default, on paper. Reach for this most. ----
Complete on all four sides; needs no container and no layout change.
The seam artifact goes in a sibling div at bottom: -34px; height: 86px. */
.a3-ledge { position: relative; }
/* ---- 05 DISSOLVE · split, on paper. Colour with no edge at all. ----
The field artifact is masked to fade to nothing well INSIDE its own box, so
there is no boundary to cut. Extend the element far past its container. */
.a3-dissolve-field {
position: absolute; pointer-events: none;
top: -46%; bottom: -46%; left: -46%; right: -46%;
-webkit-mask-image: radial-gradient(70% 56% at 55% 50%, #000 0%, #000 18%, rgba(0,0,0,0) 60%);
mask-image: radial-gradient(70% 56% at 55% 50%, #000 0%, #000 18%, rgba(0,0,0,0) 60%);
}
/* ---- 06 TILE · bento. Chromeless crop, no window bar. ----
The one treatment where the capture is a TEXTURE, and the one place
cropping past two edges at once is right. */
.a3-tile { position: relative; overflow: hidden; border-radius: var(--r-tile); min-height: 256px; }
.a3-tile-light { background: var(--card); border: 1px solid rgba(46,51,59,0.09); }
.a3-tile-dark { background: var(--navy); }
.a3-tile-shot {
position: absolute; width: 150%; border-radius: 8px 0 0 0;
box-shadow: 0 18px 40px -16px rgba(27,30,35,0.4), 0 0 0 1px var(--line);
}
.a3-tile-dark .a3-tile-shot { box-shadow: 0 18px 40px -14px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.1); }
/* ============================================================================
07 · GROUNDS — the artifacts
----------------------------------------------------------------------------
Every ground is canvas, drawn by brand-artifacts.js from the §02 ramp.
Markup is one empty absolutely-positioned div:
WHICH ARTIFACT WHERE (this mapping IS the system — do not improvise):
glow navy stage grounds (hero, dark section, dark tile)
field Dissolve, on paper — warm end, because captures are cool
cell bento card grounds — no seam, so it never fights a screenshot
seam Ledge, the hairline of colour pooled under the window
fan the CTA. MUST carry the mask in §07b.
wave the bottom 240px of a navy section, easing it into paper
hatch / spray / arc / ribbon-flat bento card grounds, one per card
========================================================================== */
.a3-art { position: absolute; inset: 0; pointer-events: none; }
/* 07b · the CTA fan is masked to live BELOW the copy. Individual rays are
~0.3 alpha but they converge on the focus and stack to 0.64 behind text,
which fails contrast. Do not remove this mask. */
.a3-art-fan {
position: absolute; left: 0; right: 0; bottom: -14%; height: 118%;
pointer-events: none;
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 46%, #000 76%);
mask-image: linear-gradient(180deg, rgba(0,0,0,0) 46%, #000 76%);
}
/* the dot field: the only CSS-drawn ground. Always over navy, never alone. */
.a3-dots {
position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(rgba(154,160,238,0.13) 1px, transparent 1px);
background-size: 26px 26px;
}
/* ============================================================================
08 · FRAME
========================================================================== */
.a3-container { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }
.a3-section { padding: clamp(64px, 10vh, 116px) 0; }
.a3-section-dark { position: relative; background: var(--navy); overflow: hidden; }
/* REQUIRED on any wrapper that contains a bleeding stage. `overflow-x: hidden`
silently makes the other axis `auto`, which turns the wrapper into the
scrollport for any sticky descendant — the sticky nav then rides the page
off-screen. `clip` clips without creating a scroll container. */
.a3-page { overflow-x: clip; }
/* the nav lives on two grounds: transparent over the hero stage, then paper.
Crossfade opacity/background only — NEVER backdrop-filter (Chrome flickers
over an animating canvas — a known Chrome bug). */
.a3-nav {
position: sticky; top: 0; z-index: 60;
background: transparent;
transition: background var(--t-control) ease;
}
.a3-nav-solid { background: var(--paper); box-shadow: 0 1px 0 var(--line); }
/* ============================================================================
09 · MOTION
========================================================================== */
@keyframes a3-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.35 } }
@media (prefers-reduced-motion: reduce) {
.a3-status::before { animation: none; }
.a3-btn { transition: none; }
}
/* ============================================================================
10 · RESPONSIVE
========================================================================== */
@media (max-width: 980px) {
.a3-bento { grid-template-columns: repeat(2, 1fr); }
.a3-bento > .a3-card:first-child,
.a3-bento > .a3-card:last-child { grid-column: 1 / -1; }
.a3-stage-inner { padding: 32px 32px 0; }
}
@media (max-width: 720px) {
:root { --gutter: 18px; }
.a3-bento { grid-template-columns: 1fr; }
.a3-bento > .a3-card { grid-column: auto; }
}