/* Shared demo identity — matches demos.ashanpraba.com and ecfr.ashanpraba.com. * * Deliberately does NOT set page background or body text colour. The 63 demos were built * independently: some are dark-navy with light text, some are white with dark text. * Forcing one canvas colour would leave light text on a light background and break pages * that currently work. Typography, square corners, accents and the header carry the * shared identity instead — type is the strongest signal anyway. */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,600;1,400&family=Manrope:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root { --ap-canvas:#f1efe7; --ap-paper:#f8f6ef; --ap-ink:#1f1d18; --ap-muted:#6f6a5e; --ap-faint:#9b9589; --ap-rule:#d8d2c4; --ap-red:#a33b2b; --ap-red-deep:#76281e; --ap-serif:'Newsreader','Iowan Old Style',Baskerville,Georgia,serif; --ap-sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --ap-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace; --ap-bar:46px; } /* Typography: the demo keeps its own colours, but speaks in the same voice. */ body, button, input, select, textarea { font-family: var(--ap-sans); } h1, h2, h3, h4 { font-family: var(--ap-serif); font-weight: 400; letter-spacing: -0.025em; } code, pre, kbd, samp, .mono { font-family: var(--ap-mono); } /* Square everything. The editorial language has no rounded corners. */ *, *::before, *::after { border-radius: 0 !important; } ::selection { background: var(--ap-red); color: #fff; } :focus-visible { outline: 2px solid var(--ap-red); outline-offset: 2px; } /* ── shared header ───────────────────────────────────────────────────────── Fixed, paper-coloured, and always legible regardless of what the demo below it looks like. Acts as a frame around otherwise unrelated designs. */ #ap-bar { position: fixed; inset: 0 0 auto 0; height: var(--ap-bar); z-index: 2147483000; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--ap-canvas); border-bottom: 1px solid var(--ap-rule); font-family: var(--ap-sans); font-size: 13px; color: var(--ap-ink); box-sizing: border-box; } #ap-bar a { color: inherit; text-decoration: none; } #ap-bar .ap-mark { display: flex; align-items: center; gap: 8px; font-family: var(--ap-serif); font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; } #ap-bar .ap-glyph { width: 21px; height: 21px; background: var(--ap-red); color: var(--ap-paper); display: grid; place-items: center; font-family: var(--ap-mono); font-size: 8.5px; letter-spacing: .03em; flex: none; } #ap-bar .ap-co { font-family: var(--ap-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--ap-muted); border-left: 1px solid var(--ap-rule); padding-left: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ap-bar .ap-sp { flex: 1 1 auto; } #ap-bar .ap-back { font-family: var(--ap-mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--ap-red); white-space: nowrap; border: 1px solid var(--ap-rule); padding: 7px 11px; } #ap-bar .ap-back:hover { background: var(--ap-ink); color: var(--ap-paper); border-color: var(--ap-ink); } @media (max-width: 560px) { #ap-bar .ap-co { display: none; } #ap-bar { padding: 0 11px; gap: 9px; } } /* Push the demo down so the bar never covers its own header. Applied to rather than because many demos set their own body margin/padding. */ html { padding-top: var(--ap-bar) !important; box-sizing: border-box; } /* A demo that pins something to the very top would sit under the bar. */ body > *[style*="position:fixed"], body > .fixed-top { top: var(--ap-bar); }