/* =========================================================================== Ashok Leyland WMS — deck styles =========================================================================== */ :root{ /* type scale (1920×1080) */ --type-display: 118px; --type-title: 60px; --type-subtitle:40px; --type-lead: 31px; --type-body: 26px; --type-small: 24px; --type-eyebrow: 24px; --type-micro: 24px; /* spacing */ --pad-x: 110px; --pad-top: 86px; --pad-bottom: 78px; --gap-title: 46px; /* palette — warm off-white + category system from the flow diagram */ --bg: #F7F5EF; --bg-panel: #FCFBF7; --ink: #1A1917; --ink-soft: #56544E; --ink-faint: #8A887F; --hair: rgba(31,30,29,.14); --hair-strong: rgba(31,30,29,.26); /* category colors: fill / line / ink */ --blue-fill:#E6F1FB; --blue-line:#185FA5; --blue-ink:#0C447C; --green-fill:#E1F5EE; --green-line:#0F6E56; --green-ink:#085041; --amber-fill:#FAEEDA; --amber-line:#854F0B; --amber-ink:#633806; --violet-fill:#EEEDFE; --violet-line:#534AB7; --violet-ink:#3C3489; --terra-fill:#FAECE7; --terra-line:#993C1D; --terra-ink:#712B13; --neutral-fill:#F1EFE8; --neutral-line:#5F5E5A; --neutral-ink:#44443F; /* animation */ --reveal-step: 320ms; /* delay between sequential stage reveals */ --reveal-dur: 640ms; --ease: cubic-bezier(.2,.7,.2,1); } *{ box-sizing:border-box; } html,body{ margin:0; background:#0e0e0d; } deck-stage:not(:defined){ visibility:hidden; } section{ font-family:"Archivo", system-ui, sans-serif; background:var(--bg); color:var(--ink); overflow:hidden; -webkit-font-smoothing:antialiased; } /* ---- shared primitives ---------------------------------------------------- */ .frame{ position:absolute; inset:0; padding:var(--pad-top) var(--pad-x) var(--pad-bottom); display:flex; flex-direction:column; } .mono{ font-family:"IBM Plex Mono", monospace; } .eyebrow{ font-family:"IBM Plex Mono", monospace; font-size:var(--type-eyebrow); letter-spacing:.30em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; display:flex; align-items:center; gap:18px; } .eyebrow::before{ content:""; width:34px; height:2px; background:var(--ink); display:inline-block; } .s-title{ font-size:var(--type-title); font-weight:700; line-height:1.04; letter-spacing:-.018em; margin:0; text-wrap:balance; } .s-title .accent{ color:var(--accent, var(--blue-line)); } .s-sub{ font-size:var(--type-lead); font-weight:400; color:var(--ink-soft); margin:0; line-height:1.3; max-width:23ch; } .head{ display:flex; flex-direction:column; gap:18px; } .head--row{ flex-direction:row; align-items:flex-end; justify-content:space-between; } .pagemark{ font-family:"IBM Plex Mono", monospace; font-size:var(--type-micro); color:var(--ink-faint); letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; } /* category chips / tag pills */ .tag{ font-family:"IBM Plex Mono", monospace; font-size:var(--type-micro); letter-spacing:.04em; padding:7px 13px; border-radius:6px; border:1px solid var(--hair-strong); color:var(--ink-soft); white-space:nowrap; } /* ---- entrance animation (per active slide) ------------------------------- Transition-based (not @keyframes): the revealed state is a real computed value, so content is always visible even if the animation engine can't tick. Hidden state is gated behind html[data-anim] (set in ) so a JS failure degrades to fully-visible rather than blank. */ .rise{ opacity:1; transform:none; } html[data-anim] .rise{ opacity:0; transform:translateY(20px); transition:opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease); transition-delay:calc(var(--i, 0) * 90ms + 120ms); } html[data-anim] section.play-rise .rise{ opacity:1; transform:none; } /* respect reduced motion */ @media (prefers-reduced-motion: reduce){ html[data-anim] .rise{ transition:none!important; opacity:1!important; transform:none!important; } }