/* ===================================================================== SLINE LWR theme — global design tokens + fonts. Loaded once by the slineThemeLayout theme-layout LWC via loadStyle(this, SLINE_THEME + '/sline.css'). In an LWR site, platformResourceLoader injects this into the document head, so the :root custom properties become global and inherit through every component's shadow DOM (custom properties pierce shadow boundaries). Every component also uses var(--sl-*, ) so it still renders correctly before this sheet loads and inside jest. Fonts are bundled here (fonts/*.woff2) so the theme resource is self-contained — no Google Fonts CDN, no CSP dependency. Keep this resource cacheControl=Public (guest site). --------------------------------------------------------------------- LAYERS (read top to bottom; components consume 3 and 4 only) 1. Raw palette --sl-quai/sodium/balise/papier-* literal hex 2. Semantic --sl-bg / --sl-fg / --sl-accent flips by surface 3. Scales --sl-t-* type, --sl-s-* space, layout 4. Legacy alias the original 57 --sl-* names fixed values IMPORTANT — why the semantic block below is only a DEFAULT here: this sheet is document-level, so its selectors cannot match elements inside a component's shadow DOM. `[data-surface="night"] {...}` in this file would never match .sl-root, which lives inside slineThemeLayout's shadow root. The real surface switch therefore lives in the c/slineSurface CSS module, which components @import so the rule is compiled into their own shadow root. What :root sets here is the fallback (day), inherited by anything that hasn't opted in. LEGACY ALIASES ARE SURFACE-NEUTRAL ON PURPOSE. --sl-white must keep resolving to #FFFFFF, not to --sl-bg-raised. If an alias pointed at a flipping semantic, every not-yet-migrated white card would turn navy the moment it landed on a night page. Components opt in to the flip by switching to the semantic names, one at a time. Delete this block only when nothing references it. ===================================================================== */ /* ---- Fonts (bundled woff2) ---- Archivo carries BOTH axes: wght 400-800 and wdth 100%-125%. The expanded end is the display face — the width you see painted on hulls and gantry legs. font-stretch on @font-face declares the range the file covers; components select within it with font-stretch or font-variation-settings. --------------------------------------------------------------------- THE src PATHS ARE ABSOLUTE, AND THEY MUST STAY THAT WAY. These used to be relative — url(fonts/archivo.woff2) — which resolves against THIS SHEET's location. Because the sheet is injected by platformResourceLoader, that produced /webruntime/org-asset//resource//fonts/... a URL that carries a build hash, changes on every site publish, and caches for only 24h. The site's Head Markup declares the same @font-face rules (see docs/site/head-markup.html) so the browser discovers the fonts while parsing the initial HTML — about 2.3 seconds before this sheet even starts downloading. For that to be worth anything, the two declarations must resolve to the SAME url: otherwise the browser fetches 90KB twice, and this sheet — which lands last — re-points the 'Archivo' family at the second URL and reintroduces the very swap the head markup exists to remove. /sfsites/c/resource// is the hash-free form Salesforce documents for exactly this (LWR "Add Custom Fonts"). Same bytes, and it caches for 45 days instead of 1. ⚠ It assumes the site is served from the DOMAIN ROOT. True for www.sline.ma. It was NOT true when the site lived under <...>.my.site.com/ncp — if the site ever moves off root, every path below needs that prefix, and Head Markup's { basePath } token handles it there but there is no such token here. Same trap as the Named Credential base URL. --------------------------------------------------------------------- */ @font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-stretch:100% 125%;font-display:swap;src:url('/sfsites/c/resource/sline_theme/fonts/archivo.woff2') format('woff2')} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('/sfsites/c/resource/sline_theme/fonts/ibmplexsans.woff2') format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/sfsites/c/resource/sline_theme/fonts/ibmplexmono-400.woff2') format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/sfsites/c/resource/sline_theme/fonts/ibmplexmono-500.woff2') format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/sfsites/c/resource/sline_theme/fonts/ibmplexmono-600.woff2') format('woff2')} :root{ /* ================================================================= LAYER 1 — RAW PALETTE Sampled from the photography in the sline_media static resource. Components should not reference these directly; use layer 2. ================================================================= */ /* Quai — the blue hour. Sampled from the sky and haze of hero-home.jpg. */ --sl-quai-900:#050D1C; /* deepest: page floor, footer */ --sl-quai-800:#081428; /* the night surface */ --sl-quai-700:#0E1F3D; /* raised panel on night */ --sl-quai-600:#122A50; /* fog-lifted: hover, active */ --sl-quai-500:#1B3A6B; /* borders on night */ /* Sodium — the quay lamps. The only warm light in the frames. Three stops, because amber has to do two different jobs and one value cannot do both. -500 and -600 are FILL/BORDER values: they only need 3:1 (WCAG 1.4.11), which they clear. -700 is the TEXT value on paper: -600 is #C8820E, which measures 3.16:1 on white and fails 1.4.3 for body copy, so amber prose on a day surface must use -700 (5.3:1). Getting this wrong is silent — it looks fine to anyone who isn't measuring. */ --sl-sodium-500:#F0A32A; /* the hot core: button fills, the mark */ --sl-sodium-600:#C8820E; /* amber for borders/fills on paper (NOT text) */ --sl-sodium-700:#94620B; /* amber that is safe as TEXT on paper — 5.3:1 */ --sl-sodium-300:#F8D07E; /* the halo: amber that reads on night, 12.8:1 */ /* Balise — the cold fluorescent inside detail-logistique.jpg. Reserved for LIVE / SYSTEM state (tracking, real-time, freshness). Never decorative: it is the only cool accent and it means something. */ --sl-balise-400:#7FD3E8; /* on night */ --sl-balise-600:#1E7E9B; /* on paper */ /* Papier — the day surface. Cool, with a blue cast, so the working screens still belong to the same world as the photography. */ --sl-papier-000:#FFFFFF; --sl-papier-050:#F7F9FC; --sl-papier-100:#F2F4F8; --sl-papier-200:#E4E9F1; --sl-encre:#0C1B36; /* Status. Carried over unchanged — they already work on both surfaces. */ --sl-vert:#3E8E6E; --sl-rouge:#C0562F; /* ================================================================= LAYER 2 — SEMANTIC (default = day) The night values live in c/slineSurface. See the header note. ================================================================= */ --sl-bg:var(--sl-papier-050); --sl-bg-sunk:var(--sl-papier-100); --sl-bg-raised:var(--sl-papier-000); --sl-fg:var(--sl-encre); --sl-fg-muted:#54627C; --sl-fg-faint:#8494AB; --sl-line:rgba(12,27,54,.12); --sl-line-strong:rgba(12,27,54,.20); --sl-accent:var(--sl-sodium-600); --sl-accent-ink:var(--sl-sodium-700); /* amber TEXT — see the sodium note */ --sl-accent-line:rgba(200,130,14,.35); /* amber OUTLINE — see below */ --sl-accent-solid:var(--sl-sodium-500); --sl-accent-tint:rgba(240,163,42,.12); --sl-on-accent:var(--sl-quai-900); --sl-live:var(--sl-balise-600); --sl-live-tint:rgba(30,126,155,.12); /* ================================================================= LAYER 3 — SCALES ================================================================= */ /* Type. Display and h1/h2 run Archivo on its EXPANDED width; h3 and below return to normal width, where expanded stops reading as signage and starts reading as a stretched font. */ /* 4.6rem, not 5.4rem. At 86px against the hero's headline measure the type set about EIGHT characters to a line, so the H1 shattered into five lines and gave "commerce" a line of its own. Display type wants 15-25 characters a line; the size and the measure were fighting. Both ends moved — see .hero__lede in slineHero.css. */ --sl-t-display:clamp(2.6rem,5vw,4.6rem); --sl-t-h1:clamp(2.2rem,4vw,3.4rem); --sl-t-h2:clamp(1.7rem,2.6vw,2.4rem); --sl-t-h3:1.25rem; --sl-t-lede:clamp(1.05rem,1.3vw,1.2rem); --sl-t-body:1rem; --sl-t-small:.875rem; --sl-t-code:.8125rem; --sl-lh-display:.98; --sl-lh-head:1.05; --sl-lh-body:1.6; --sl-tr-display:-.025em; --sl-tr-head:-.02em; --sl-tr-code:.08em; /* The two display widths, as variation settings so a component sets one property instead of remembering two axis names. */ --sl-wide-display:'wdth' 122,'wght' 800; --sl-wide-head:'wdth' 118,'wght' 700; /* Space. There was no scale before this: ~2,300 raw px across the component CSS. 8-based, with 4 and 12 for control-internal gaps. */ --sl-s-1:4px; --sl-s-2:8px; --sl-s-3:12px; --sl-s-4:16px; --sl-s-5:24px; --sl-s-6:32px; --sl-s-7:48px; --sl-s-8:64px; --sl-s-9:96px; --sl-s-10:128px; /* Bands. The old --sl-section-pad-y topped out at 64px, which is thin for full-bleed photography; marketing gets room, the portal stays tight. */ --sl-band-y:clamp(72px,7vw,120px); --sl-band-y-tight:clamp(32px,3.5vw,56px); --sl-gutter:clamp(18px,5vw,48px); /* Grid. Marketing layouts are ad-hoc flex today. */ --sl-grid-cols:12; --sl-grid-gap:clamp(16px,2vw,32px); /* ================================================================= LAYER 4 — RETAINED TOKENS What survived the migration's final sweep (the P5 close-out): the status colours and the structural tokens (type family, radius, shadow, layout, the notch) that have no surface-flipping semantic equivalent, plus the --dxp-g-* platform mappings. Every deprecated colour alias the pre-redesign sheet defined — --sl-navy / -gold / -white / -ink / -text / -on-dark / -border and the rest, ~35 names — was deleted here once nothing referenced it any longer: no component CSS, no script, and not this sheet's own rules (the ::selection / :focus-visible conventions below were repointed at the layer-2 semantics). Do NOT reintroduce a raw colour name; components read the semantics. Known gap, unrelated to colour: --sl-font-display is referenced (slineBookingDetailPage.css, slineContactPage.css) but was never defined, so those rules run on their var() fallback. Pre-existing; left as-is. ================================================================= */ /* Status. Surface-neutral by design: a success/error colour must read the same on night and day, so these never flip. Legacy names kept because components reference them (the layer-1 --sl-vert/--sl-rouge hold the same values under the new name). */ --sl-green:#3E8E6E; /* success / temps réel / arrivé */ --sl-blue:#2E56B4; /* info / chargé */ --sl-red:#C0562F; /* error / validation */ --sl-green-tint:rgba(62,142,110,.1); /* Error fills. #FCF3F0 and the .35 border were hardcoded identically in five components (the four auth forms and slineUiInput) — same two values, no name. Opaque, not an alpha wash, because the error field it fills sits on white in a card and on paper in a page. */ --sl-red-tint:#FCF3F0; --sl-red-line:rgba(192,86,47,.35); /* Skeleton. Does NOT flip — a loading placeholder has to stay the same neutral on either surface. */ --sl-skeleton:#ECECEA; /* Typography */ --sl-font-head:'Archivo',system-ui,sans-serif; --sl-font-body:'IBM Plex Sans',system-ui,sans-serif; --sl-font-mono:'IBM Plex Mono',ui-monospace,monospace; /* Radius */ --sl-radius-sm:8px; --sl-radius:12px; --sl-radius-lg:16px; --sl-radius-pill:999px; /* Signature notched corner (top-right 22px chamfer). Scope note: this is being narrowed to elements that represent actual cargo (offers, containers, bookings). It is currently applied in 23 of 70 components, which is a signature that has stopped signifying. */ --sl-notch-size:22px; --sl-notch:polygon(0 0,calc(100% - var(--sl-notch-size)) 0,100% var(--sl-notch-size),100% 100%,0 100%); /* Shadows (large blur, negative spread, low-alpha navy) */ --sl-shadow-card:0 16px 26px rgba(16,33,88,.09); --sl-shadow-card-hover:0 28px 42px rgba(16,33,88,.20); --sl-shadow-panel:0 44px 100px -34px rgba(15,26,60,.2); --sl-shadow-dropdown:0 34px 66px -26px rgba(0,0,0,.6); --sl-shadow-elevated:0 30px 70px -38px rgba(15,26,60,.4); /* Layout */ --sl-maxw:1280px; --sl-maxw-app:1220px; --sl-maxw-narrow:1120px; --sl-section-pad-y:clamp(40px,4.5vw,64px); --sl-section-pad-x:clamp(18px,5vw,48px); /* Map SLINE palette onto platform DXP branding tokens so SLDS base components inherit the brand for free (belt-and-suspenders with the Experience Builder Branding Set the admin configures). */ --dxp-g-brand:#0F245A; --dxp-g-brand-dark:#080F26; --dxp-g-brand-contrast:#FFFFFF; --dxp-g-link:#C5820A; --dxp-g-link-hover:#0F245A; --dxp-g-root:#F7F7F5; --dxp-g-root-contrast:#0F245A; } /* ---- Global site conventions (from the design ) ---- */ .sl-root ::selection{background:var(--sl-accent-solid);color:var(--sl-on-accent);} .sl-root :focus-visible{outline:2px solid var(--sl-accent);outline-offset:2px;} /* Experience Cloud injects its own site-wide rules — link colour, and text-decoration:underline on :hover — which reach our anchors on the PUBLISHED site (they're invisible in Builder preview). Our design never underlines a link: they're distinguished by colour and weight. !important is required because EC's selectors outspecify ours; it wins because EC's own rules are not themselves !important. This is only a safety net — each component still re-asserts its own colour/background !important, since this sheet is document-level and can't be relied on to cross every boundary. */ .sl-root a, .sl-root a:hover, .sl-root a:focus, .sl-root a:active{text-decoration:none!important;} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;} html{scroll-behavior:auto!important;} }