/* ============================================================================ ATLAS 3 — Benali design system · extracted from the ratified site redesign ---------------------------------------------------------------------------- STATUS: ratified direction (2026-08-16), extracted from `Benali Landing v4 Dark`, `Benali Operation Mapping`, and `Screenshot Treatments v2`. Supersedes atlas.css (warm cream) and the atlas-2.css PROPOSAL. WHAT CHANGED FROM ATLAS 2, AND WHY 1. THE FIELD IS GONE. Atlas 2's `--field-grad` (one 105deg majorelle gradient reused as a surface) is retired. It could not carry a whole site: repeated, one gradient reads as wallpaper, and blurred ellipses have no structure to read direction in. Replaced by THE RAMP + ARTIFACTS (§02, §07): one five-stop colour ramp, and a set of canvas-drawn geometries that all sample it. Character comes from the GEOMETRY varying, never the colour varying. 2. MAJORELLE IS NO LONGER THE ONLY HUE. It is the cool anchor of a ramp that runs pale indigo → majorelle → violet → rose → coral. Coral and rose are ramp members, not new brand colours, and only ever appear inside an artifact — never as ink, fill, or border. 3. THE DARK GROUND IS NAVY, NOT SLATE. `#0C1030` (a blued near-black), so the ramp's cool end reads against it. Atlas 2's `--slate-deep` #22262D is retired as a page ground; the window title bar keeps a slate. 4. CONTROLS ARE PILLS AGAIN. Atlas 2 squared buttons to 4px; the redesign reverted to full pills (999px). Cards went 10px → 14px, stages 22px. 5. DUAL-THEME IS GONE. Light is the page. Dark is a STAGE (§06) placed deliberately inside a light document — not a theme, not a toggle, and never a user preference. 6. SCREENSHOT TREATMENTS ARE PART OF THE SYSTEM (§06). Product captures are most of this site's content, so how they meet the page is a law, not a per-page decision. LAWS THAT CARRY OVER FROM ATLAS UNCHANGED - One font: Hanken Grotesk. Emphasis is colour, never italic. - The filled pill silhouette means INTERACTIVE; statics are chromeless. - Motion is never faster than a breath; nothing re-animates on scroll. - Ink scales never cross grounds (§03). NO BUILD STEP. Plain CSS custom properties; pair with atlas-3-artifacts.js for the grounds. ========================================================================== */ /* ============================================================================ 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 (was 1280 in Atlas 2) */ --gutter: 24px; --r-control: 999px; /* pills — the Atlas 2 4px square is reverted */ --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 atlas-3-artifacts.js (keep the two in sync). 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 (Atlas 2's Stripe pattern) survives, in its 2026-08-05 form: 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 atlas-3-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; this bit Atlas 2 twice). */ .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; } }