/* ========================================================================== Astuce L-Bar — design tokens Generated from the Penpot token catalogue (file "IBC 2026", page 02). Two tiers: --c-* primitives carry the raw value, semantic vars point at them. Always use the semantic var in component CSS. ========================================================================== */ :root { /* --- primitives: ink ------------------------------------------------- */ --c-ink-900: #0C0C0C; --c-ink-800: #121316; --c-ink-700: #161616; --c-ink-600: #171717; --c-ink-500: #1D1D1D; --c-ink-400: #1E1E1E; --c-ink-300: #23272A; --c-ink-200: #2E2E2E; --c-ink-100: #2F2F2F; /* --- primitives: grey ------------------------------------------------ */ --c-grey-600: #5A5A5A; --c-grey-500: #6E6E6E; --c-grey-400: #8A8A8A; --c-grey-300: #9A9A9A; --c-grey-200: #D9D9D9; --c-grey-100: #E8E8E8; --c-white: #FFFFFF; /* --- primitives: market signal --------------------------------------- */ --c-green-500: #1DA86F; --c-green-600: #1AAA38; --c-red-400: #BE0826; --c-red-500: #C62430; --c-red-600: #D81E32; --c-red-700: #E4022B; /* --- primitives: brand ----------------------------------------------- */ --c-brand-red: #CE0233; --c-brand-blue: #0D46CC; /* --- grid ------------------------------------------------------------ */ --canvas-w: 1920px; --canvas-h: 1080px; /* The backdrop artwork, exported from the Penpot design (`bgTestAnimation`). A 1920x1080 render, so it is pinned to `cover` rather than tiled — it is a lit scene, not a texture, and repeating it would break the light. Both styles use the same plate: it reads as a bright rim around the dark package and as the ground itself in the bright one. */ --backdrop-art: url("../assets/backdrop-astuce.png") center / cover no-repeat; /* The image-free fallback, kept off. See base.css. */ --backdrop-streaks-layer: repeating-linear-gradient( 102deg, transparent 0 60px, color-mix(in srgb, var(--streak-color) calc(var(--streak-alpha) * 100%), transparent) 60px 96px, transparent 96px 150px, color-mix(in srgb, #000 8%, transparent) 150px 176px ); --margin-x: 50px; --margin-y: 25px; --gutter: 10px; --col-rail: 215px; --col-panel: 484px; --col-stage: 1101px; --size-rail-cell: 158px; --size-panel-header: 82px; --size-row-mover: 49px; --size-row-news: 60px; --size-row-news-pitch: 65px; --size-news-headline: 73px; --size-card-program: 219px; --size-card-clock: 105px; --size-thumb: 204px; --size-badge: 44px; /* the disc, kept for reference */ /* The reference art draws this at 64 x 55 on a 1920 canvas. Ours runs at 85% of that — the marker reads at the same weight without crowding the rail cell, which is narrower than the panel it was drawn for. */ --size-chevrons-w: 54.4px; --size-chevrons-h: 46.75px; --radius-badge: 22px; --radius-plate: 18px; --stroke-accent: 5px; --stroke-tick: 6px; --stroke-hairline: 1px; /* --- type ------------------------------------------------------------ */ --font-display: "Cairo", system-ui, sans-serif; --font-data: "Cairo", system-ui, sans-serif; --fw-regular: 400; --fw-medium: 600; --fw-bold: 700; --fw-black: 900; --fs-xxs: 12px; --fs-xs: 16px; --fs-sm: 20px; --fs-md: 24px; --fs-lg: 30px; --fs-xl: 34px; --fs-2xl: 38px; --fs-3xl: 42px; --fs-4xl: 46px; --type-panel-header: var(--fs-4xl); --type-news-headline: var(--fs-3xl); --type-quote-value: var(--fs-2xl); --type-program-name: var(--fs-xl); --type-section-title: var(--fs-xl); --type-quote-change: var(--fs-lg); --type-news-row: var(--fs-md); --type-mover-row: var(--fs-sm); --type-quote-name: var(--fs-xs); --type-axis: var(--fs-xxs); /* tuned down from 38 in Penpot: "10:00 AM" wrapped at 36. See README. */ --type-clock-time: 32px; --opacity-plot: 0.35; --opacity-streak: 0.06; /* --- motion ---------------------------------------------------------- Broadcast counts in frames, not milliseconds, so the scale is anchored to one frame at 25p. Change --motion-frame to 1000/50 for a 50p chain and the whole package retimes with it. */ --motion-frame: 40ms; /* 25p */ /* Two masses, two speeds. The plate is heavy: it travels a short distance fast and takes its time settling. The copy is light: it catches up in fewer frames and lands sooner. Separating them is what makes the plate read as carrying the text rather than appearing beside it. */ --dur-plate: calc(var(--motion-frame) * 12); /* 12f — plate reveal */ --dur-push: calc(var(--motion-frame) * 8); /* 8f — plate travel */ --dur-copy: calc(var(--motion-frame) * 10); /* 10f — copy reveal */ --dur-rise: calc(var(--motion-frame) * 7); /* 7f — copy travel */ --dur-swap: calc(var(--motion-frame) * 6); /* 6f — value change */ --dur-plate-out: calc(var(--motion-frame) * 8); /* 8f — plate closing */ --exit-lead: calc(var(--motion-frame) * 3); /* 3f — copy clears first */ /* Travel. The plate moves in px because it is furniture and its distance is absolute; the copy moves in em so it stays proportional to its own size. */ --push-distance: 22px; --rise-distance: 0.42em; --stagger-row: calc(var(--motion-frame) * 1); /* 1f between rows */ --stagger-text: calc(var(--motion-frame) * 2); /* 2f — plate leads */ --sweep-lead: calc(var(--motion-frame) * 2); /* 2f — solid leads */ /* The direction marker arrives dot by dot, and the running order carries the trend: a gainer fills from the outer arm ends inward and lands on its tip last, a loser opens at the tip and spreads outward. One frame per step so that is actually legible — at half a frame the whole arm filled in two and the direction was lost. */ --dur-chev-in: calc(var(--motion-frame) * 6); /* 6f per dot */ --stagger-chev: calc(var(--motion-frame) * 2); /* 2f between chevrons */ --stagger-dot: calc(var(--motion-frame) * 1); /* 1f per step out the arm */ /* The backdrop establishes the shot: it arrives before anything lands on it and takes longer to settle, pulling back out of a blur. Zoom is a pull BACK — it starts overscaled and eases to 1:1, so the ground appears to settle into place rather than to grow. */ --dur-backdrop: calc(var(--motion-frame) * 20); /* 20f */ --backdrop-zoom: 1.12; --backdrop-blur: 18px; /* --- the signature --------------------------------------------------- Four curves for four behaviours. One ease across every layer is what makes a package read as a template. The REVEAL curves are deliberately not eased-out. Nearly every stock ease — easeOutExpo (0.16, 1, 0.3, 1) above all — dumps ~90% of the move into the first third and then crawls; on a wipe that reads as a progress bar filling. A vision-mixer wipe moves at a steady rate, and that is the reference here: the plate edge is at 19% / 36% / 71% / 90% of its sweep at a quarter, a third, a half and two thirds of the way through. Steady, then a soft landing. The copy mask is the same shape run lighter — 36% / 54% / 79% — so it outruns the plate it sits on. The TRAVEL curves overshoot and settle. The plate passes its mark by 11.7% of its 22px, peaking at 40% of the duration and easing back over the remaining 60% — early peak, long damping, which reads as weight rather than as a bounce. The copy overshoots half as far, 5.8%, because it is lighter. That difference between the two is the whole gesture. Overshoot lives on `transform` only. `clip-path` cannot pass its own edge, so the reveal stays monotonic and never flickers backwards. */ --ease-plate: cubic-bezier(0.42, 0.02, 0.30, 1.00); /* steady sweep */ --ease-push: cubic-bezier(0.22, 1.62, 0.36, 1.00); /* +11.7% @ 40% */ --ease-copy: cubic-bezier(0.30, 0.10, 0.25, 1.00); /* lighter sweep */ --ease-rise: cubic-bezier(0.16, 1.42, 0.32, 1.00); /* +5.8% @ 43% */ /* A value changing is not an arrival: no overshoot, in and out on the beat. */ --ease-swap: cubic-bezier(0.45, 0.00, 0.20, 1.00); } /* Latin runs wider than the Arabic it was measured against — "Abu Dhabi Securities Exchange" needs 612px at 46px, and the panel is 484. Cairo is a stand-in for the original narrow Arabic face, so these steps will want revisiting once the real family lands. */ [lang="en"] { --type-panel-header: 32px; /* "Abu Dhabi Securities Exchange" needs 426 of the 448 available */ } /* ========================================================================== Style: Dark 2.5D (default) Three ingredients only — a vertical gradient with ~8% luminance delta, a 1px inner hairline, and a shadow you can barely see. If the gradient reads as a gradient it is too strong. ========================================================================== */ :root, [data-style="dark"] { --bg-panel-header: linear-gradient(180deg, #171A1F 0%, #0A0B0E 100%); --bg-panel: linear-gradient(180deg, #22262B 0%, #14171A 100%); --bg-module: linear-gradient(180deg, #272B31 0%, #181B1F 100%); --bg-row: linear-gradient(180deg, #242830 0%, #191C21 100%); --bg-news-headline:linear-gradient(180deg, #313842 0%, #1F242B 100%); --bg-news-breaking:linear-gradient(180deg, #C21D23 0%, #A81A1F 100%); --bg-stage: linear-gradient(180deg, #2A2F36 0%, #1A1E23 100%); --bg-backdrop: var(--backdrop-art); --bg-backdrop-css: linear-gradient(163deg, #2C333B 0%, #545C66 45%, #0E1114 100%); --backdrop-base: #0E1114; /* The artwork is a brightly lit scene. Under the dark package it is multiplied down to a ceiling rather than replaced: multiply keeps every value in proportion, so the ribbons and their falloff survive intact and only the exposure changes. The tint is the colour white becomes — set it lighter to open the room up, darker to close it down. */ --backdrop-tint: linear-gradient(#333B45, #333B45); --backdrop-blend: multiply; --sweep-color: #0A0B0E; /* the panel-header black: resolves into the plate */ --bg-thumb: linear-gradient(180deg, #39424E 0%, #232A32 100%); --bg-row-gap: #0E1013; --fill-badge-up: linear-gradient(180deg, #45E08C 0%, #12A054 100%); --fill-badge-down: linear-gradient(180deg, #FF5C70 0%, #C8102E 100%); --fill-badge-flat: linear-gradient(180deg, #78838E 0%, #4A535C 100%); --fill-tick: linear-gradient(180deg, #FF4D63 0%, #B00A24 100%); --fill-accent-up: linear-gradient(180deg, #3FE08A 0%, #17A85C 100%); --fill-accent-down:linear-gradient(180deg, #FF6377 0%, #D01F36 100%); --text-primary: #FFFFFF; --text-secondary: #DCE3EA; --text-muted: #94A0AC; --text-axis: #7C8894; --text-on-video: #FFFFFF; --data-up: #3FE08A; --data-down: #FF6377; --data-flat: #7A8590; --accent-time: #FF5065; --brand-primary: #E4033C; --brand-partner: #1E5BE6; --chart-baseline:#E3E9EF; --chart-plot: rgba(42, 42, 42, 0.35); --border-edge: #2F353D; --border-hairline:#3A414A; --border-grid: #333A42; --shadow-lift: 0 1px 4px rgba(0, 0, 0, 0.28); --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.20); --streak-color: #FFFFFF; --streak-alpha: 0.05; /* The vector is masked and painted with currentColor, so it follows the theme and needs no plate behind it in either style. */ --logo-color: #FFFFFF; } /* ========================================================================== Style: Bright 2.5D The video window stays dark in this theme — it carries picture, not surface. ========================================================================== */ [data-style="bright"] { --bg-panel-header: linear-gradient(180deg, #FFFFFF 0%, #E3E8ED 100%); --bg-panel: linear-gradient(180deg, #FBFCFD 0%, #E9EEF3 100%); --bg-module: linear-gradient(180deg, #FFFFFF 0%, #EAEFF4 100%); --bg-row: linear-gradient(180deg, #FFFFFF 0%, #EDF1F5 100%); --bg-news-headline:linear-gradient(180deg, #EDF1F5 0%, #D8E0E7 100%); --bg-news-breaking:linear-gradient(180deg, #B41C21 0%, #97171C 100%); --bg-stage: linear-gradient(180deg, #20242A 0%, #14171B 100%); --bg-backdrop: var(--backdrop-art); --bg-backdrop-css: linear-gradient(163deg, #F7F9FB 0%, #DCE3EA 45%, #B9C5CF 100%); --backdrop-base: #B9C5CF; /* The artwork is already a lit scene under this style, so nothing is multiplied into it. Declared rather than inherited: the dark block sets a tint, and a style that does not reset it inherits the other style's. */ --backdrop-tint: none; --backdrop-blend: normal; --sweep-color: #FFFFFF; /* white: resolves into the bright plate */ --bg-thumb: linear-gradient(180deg, #E7ECF1 0%, #D3DBE3 100%); --bg-row-gap: #CFD7DE; --fill-badge-up: linear-gradient(180deg, #3AD489 0%, #0B8B4E 100%); --fill-badge-down: linear-gradient(180deg, #FF5F72 0%, #C0102A 100%); --fill-badge-flat: linear-gradient(180deg, #B7C1CB 0%, #8794A0 100%); --fill-tick: linear-gradient(180deg, #E4033C 0%, #A20028 100%); --fill-accent-up: linear-gradient(180deg, #12B26B 0%, #0B8B4E 100%); --fill-accent-down:linear-gradient(180deg, #E63A50 0%, #B01126 100%); --text-primary: #10151B; --text-secondary: #2B333C; --text-muted: #67737F; --text-axis: #8794A0; --text-on-video: #FFFFFF; --data-up: #0B8B4E; --data-down: #B01126; --data-flat: #8A96A2; --accent-time: #D21F36; --brand-primary: #E4033C; --brand-partner: #1E5BE6; --chart-baseline:#4A555F; --chart-plot: rgba(15, 23, 42, 0.05); --border-edge: #D7DEE5; --border-hairline:#CBD5DE; --border-grid: #DDE4EA; --shadow-lift: 0 1px 3px rgba(16, 24, 40, 0.10); --shadow-soft: 0 2px 6px rgba(16, 24, 40, 0.07); --streak-color: #0F172A; --streak-alpha: 0.05; --logo-color: #10151B; }