/* ============================================================= langsyn-theme.css — LangSyn design system (BRAND GUIDE) Shared across every branded host. Every mark in the family is an inference rule, premises over a line and the conclusion under it, and the page is set the way a derivation is written down. - A horizontal rule line means "therefore": it sits only between premises and a conclusion. Sections are separated by space. - The palette is the brand guide's six flat colours: ink, mist and the four product accents. Two accents carry meaning on a page: --ls-given (amber) marks what someone gave the engine, --ls-derived (teal) what the engine concluded. Everything else is mist on ink. - Labels are italic and in sentence case, never tracked capitals. - The type is IBM Plex: Plex Sans for text and wordmarks, Plex Mono for code. Fonts are self-hosted. ============================================================= */ /* --- Self-hosted type ---------------------------------------- IBM's own web files, served byte for byte. Plex reserves its name under the OFL, so a subset cut here could not be called Plex (fonts/OFL-IBMPlex.txt). IBM splits each style by script, and a browser fetches a piece only for a page that uses its characters, through the unicode-range IBM gives it. Written, ranges included, by web/tools/font-build.py. */ @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexSans-Regular-Latin1.woff2') format('woff2');unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexSans-Regular-Latin2.woff2') format('woff2');unicode-range:U+0100-0101,U+0104-0130,U+0132-0151,U+0154-017F,U+018F,U+0192,U+01A0-01A1,U+01AF-01B0,U+01FA-01FF,U+0218-021B,U+0237,U+0259,U+1E80-1E85,U+1E9E,U+20A1,U+20A4,U+20A6,U+20A8-20AA,U+20AD-20AE,U+20B1-20B2,U+20B4-20B5,U+20B8-20BA,U+20BD,U+20BF} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexSans-Regular-Pi.woff2') format('woff2');unicode-range:U+0E3F,U+2000-200D,U+2015,U+2028-2029,U+202F,U+2032-2033,U+2070,U+2074-2079,U+2080-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+2215,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+ECE0,U+EFCC,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexSans-Regular-Greek.woff2') format('woff2');unicode-range:U+037E,U+0386-038A,U+038C,U+038E-03A1,U+03A3-03CE} @font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/IBMPlexSans-Italic-Latin1.woff2') format('woff2');unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02} @font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/IBMPlexSans-Italic-Latin2.woff2') format('woff2');unicode-range:U+0100-0101,U+0104-0130,U+0132-0151,U+0154-017F,U+018F,U+0192,U+01A0-01A1,U+01AF-01B0,U+01FA-01FF,U+0218-021B,U+0237,U+0259,U+1E80-1E85,U+1E9E,U+20A1,U+20A4,U+20A6,U+20A8-20AA,U+20AD-20AE,U+20B1-20B2,U+20B4-20B5,U+20B8-20BA,U+20BD,U+20BF} @font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/IBMPlexSans-Italic-Pi.woff2') format('woff2');unicode-range:U+0E3F,U+2000-200D,U+2015,U+2028-2029,U+202F,U+2032-2033,U+2070,U+2074-2079,U+2080-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+2215,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+ECE0,U+EFCC,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/IBMPlexSans-Italic-Greek.woff2') format('woff2');unicode-range:U+037E,U+0386-038A,U+038C,U+038E-03A1,U+03A3-03CE} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/IBMPlexSans-Medium-Latin1.woff2') format('woff2');unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/IBMPlexSans-Medium-Latin2.woff2') format('woff2');unicode-range:U+0100-0101,U+0104-0130,U+0132-0151,U+0154-017F,U+018F,U+0192,U+01A0-01A1,U+01AF-01B0,U+01FA-01FF,U+0218-021B,U+0237,U+0259,U+1E80-1E85,U+1E9E,U+20A1,U+20A4,U+20A6,U+20A8-20AA,U+20AD-20AE,U+20B1-20B2,U+20B4-20B5,U+20B8-20BA,U+20BD,U+20BF} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/IBMPlexSans-Medium-Pi.woff2') format('woff2');unicode-range:U+0E3F,U+2000-200D,U+2015,U+2028-2029,U+202F,U+2032-2033,U+2070,U+2074-2079,U+2080-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+2215,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+ECE0,U+EFCC,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/IBMPlexSans-Medium-Greek.woff2') format('woff2');unicode-range:U+037E,U+0386-038A,U+038C,U+038E-03A1,U+03A3-03CE} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/IBMPlexSans-SemiBold-Latin1.woff2') format('woff2');unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/IBMPlexSans-SemiBold-Latin2.woff2') format('woff2');unicode-range:U+0100-0101,U+0104-0130,U+0132-0151,U+0154-017F,U+018F,U+0192,U+01A0-01A1,U+01AF-01B0,U+01FA-01FF,U+0218-021B,U+0237,U+0259,U+1E80-1E85,U+1E9E,U+20A1,U+20A4,U+20A6,U+20A8-20AA,U+20AD-20AE,U+20B1-20B2,U+20B4-20B5,U+20B8-20BA,U+20BD,U+20BF} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/IBMPlexSans-SemiBold-Pi.woff2') format('woff2');unicode-range:U+0E3F,U+2000-200D,U+2015,U+2028-2029,U+202F,U+2032-2033,U+2070,U+2074-2079,U+2080-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+2215,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+ECE0,U+EFCC,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/IBMPlexSans-SemiBold-Greek.woff2') format('woff2');unicode-range:U+037E,U+0386-038A,U+038C,U+038E-03A1,U+03A3-03CE} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexMono-Regular-Latin1.woff2') format('woff2');unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexMono-Regular-Latin2.woff2') format('woff2');unicode-range:U+0100-0101,U+0104-0130,U+0132-0151,U+0154-017F,U+018F,U+0192,U+01A0-01A1,U+01AF-01B0,U+01FA-01FF,U+0218-021B,U+0237,U+0259,U+1E80-1E85,U+1E9E,U+20A1,U+20A4,U+20A6,U+20A8-20AA,U+20AD-20AE,U+20B1-20B2,U+20B4-20B5,U+20B8-20BA,U+20BD,U+20BF} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexMono-Regular-Pi.woff2') format('woff2');unicode-range:U+03C0,U+0E3F,U+2000-200D,U+2010-2012,U+2015,U+2028-2029,U+202F,U+2032-2033,U+203E,U+205F,U+2070,U+2074-2079,U+2080-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+2215,U+2219-221A,U+221E,U+222B,U+2236,U+2248,U+2260,U+2264-2265,U+2400-2421,U+2500-259F,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+3000,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/IBMPlexMono-SemiBold-Latin1.woff2') format('woff2');unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/IBMPlexMono-SemiBold-Latin2.woff2') format('woff2');unicode-range:U+0100-0101,U+0104-0130,U+0132-0151,U+0154-017F,U+018F,U+0192,U+01A0-01A1,U+01AF-01B0,U+01FA-01FF,U+0218-021B,U+0237,U+0259,U+1E80-1E85,U+1E9E,U+20A1,U+20A4,U+20A6,U+20A8-20AA,U+20AD-20AE,U+20B1-20B2,U+20B4-20B5,U+20B8-20BA,U+20BD,U+20BF} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/IBMPlexMono-SemiBold-Pi.woff2') format('woff2');unicode-range:U+03C0,U+0E3F,U+2000-200D,U+2010-2012,U+2015,U+2028-2029,U+202F,U+2032-2033,U+203E,U+205F,U+2070,U+2074-2079,U+2080-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+2215,U+2219-221A,U+221E,U+222B,U+2236,U+2248,U+2260,U+2264-2265,U+2400-2421,U+2500-259F,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+3000,U+FEFF,U+FFFD} :root{ color-scheme:dark; /* ---- ground and mist (contrast measured against --ls-bg) ---- */ --ls-bg: #18233A; /* ink */ --ls-surface: #1F2C4A; /* raised: code panels, forms */ --ls-surface-2: #26355A; /* raised twice: hover, selected */ --ls-border: #3A4458; /* quiet edge, decorative only */ --ls-border-strong: #7B8392; /* control edge, 4.1:1; 3.2:1 on surface-2 */ --ls-text: #E8ECF3; /* mist, 13.2:1 */ --ls-text-2: #ADB3BE; /* mist, secondary, 7.4:1 */ --ls-text-faint: #9AA1AE; /* faint, 6.0:1; 4.6:1 even on surface-2 */ --ls-text-muted: #ADB3BE; /* alias kept for existing markup */ /* ---- the two colours that mean something: two of the guide's accents. Amber is the accent of DKE Python, the facts you write. ---- */ --ls-given: #F2A93B; /* amber: asserted values, literals, 7.8:1 */ --ls-derived: #36C2B4; /* teal: what the engine concluded, 7.1:1 */ --ls-rule: #787F8F; /* the rule line of a derivation, 3.9:1 */ --ls-focus: var(--ls-derived); /* ---- marks ---- A mark's tile on the page takes the guide's dark-surface ink, so its edge shows against the ink ground. The mark files keep the guide's ink, for a light ground. */ --ls-tile: #26355A; /* ---- type ---- */ --ls-font-text: "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --ls-font-display:var(--ls-font-text); --ls-font-sans: var(--ls-font-text); --ls-font-mono: "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; --ls-tracking-eyebrow:0; --ls-radius:3px; --ls-radius-sm:2px; /* the sheet grid: the margin that holds a section's name, and the gutter */ --ls-margin:11rem; --ls-gap:clamp(1.5rem,4vw,3.5rem); --ls-dur:200ms; --ls-ease:cubic-bezier(.2,.6,.2,1); /* ---- accent: retired as a per-site colour. Kept as tokens so existing rules resolve; it is mist, like everything that does not mean given or derived. The product accents belong to the marks, not to a site. ---- */ --ls-accent-rgb:173 179 190; --ls-accent-glow:#E8ECF3; --ls-accent-ink:#18233A; --ls-accent: rgb(var(--ls-accent-rgb)); --ls-accent-border: rgb(var(--ls-accent-rgb) / .35); --ls-accent-bg: rgb(var(--ls-accent-rgb) / .08); --ls-accent-primary: var(--ls-accent); /* ---- semantic colours for the account pages and the status board. Coherence Spec A2: the ONE home for these, so a page states var(--ls-danger), never a raw colour (gate G2). ---- */ --ls-danger-rgb:240 154 136; /* #F09A88, 7.2:1 */ --ls-danger:rgb(var(--ls-danger-rgb)); --ls-warn-rgb:240 168 96; /* #F0A860 */ --ls-warn-border:rgb(var(--ls-warn-rgb) / .6); --ls-warn-bg:rgb(var(--ls-warn-rgb) / .08); --ls-ok-rgb:147 201 154; /* #93C99A, service up */ --ls-ok:rgb(var(--ls-ok-rgb)); } /* --- Reset -------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{overflow-x:hidden;background:var(--ls-bg)} body{ font-family:var(--ls-font-text); font-size:18px;line-height:1.65;font-weight:400; font-variant-numeric:oldstyle-nums; color:var(--ls-text);background:var(--ls-bg); -webkit-font-smoothing:antialiased; position:relative;overflow-x:hidden; } body>*{position:relative;z-index:1} /* `hidden` means hidden. The browser's own [hidden] rule loses to any page rule that gives a class a display (flex, grid, a button's inline-flex), so the element showed. Pages patched that class by class, and each new class opened it again (WEB-A-CLASS-DISPLAY-RULE-OUTRANKS-HIDDEN-SO-SIX-CONTROLS-NEVER-HIDE). */ [hidden]{display:none!important} table,.ls-num{font-variant-numeric:lining-nums tabular-nums} /* --- Typography --------------------------------------------- */ h1{font-family:var(--ls-font-text);font-weight:600;font-size:clamp(2.35rem,1.9rem + 2.1vw,3.5rem);line-height:1.12;letter-spacing:-.012em;color:var(--ls-text);text-wrap:balance} h2{font-family:var(--ls-font-text);font-weight:600;font-size:clamp(1.6rem,1.3rem + 1.3vw,2.25rem);line-height:1.18;color:var(--ls-text);text-wrap:balance} h3{font-family:var(--ls-font-text);font-weight:600;font-size:1.3rem;line-height:1.3;color:var(--ls-text)} h4{font-family:var(--ls-font-text);font-weight:600;font-size:1.05rem;color:var(--ls-text)} h1 em{font-style:normal;color:inherit} a{color:var(--ls-text);text-decoration:underline;text-decoration-color:var(--ls-text-faint);text-decoration-thickness:1px;text-underline-offset:.18em} a:hover{text-decoration-color:var(--ls-text)} :focus-visible{outline:2px solid var(--ls-focus);outline-offset:3px;border-radius:2px} code,.ls-mono{font-family:var(--ls-font-mono);font-variant-numeric:normal} p code,li code,td code{font-size:.86em} .ls-given{color:var(--ls-given)} .ls-derived{color:var(--ls-derived)} .ls-kw{font-weight:600} .ls-com{color:var(--ls-text-faint)} /* --- Navigation -------------------------------------------- */ /* The horizontal lockup, then the four sections, then Sign in pushed to the far edge. The section the page belongs to is set in mist at 600; the rest stay mist-2. The lockup's tile is 40px, above the 32px below which the guide switches to the simplified mark. */ .ls-nav{display:flex;align-items:baseline;gap:.8rem 2.5rem;padding:1.4rem 2rem;position:relative;z-index:100;flex-wrap:wrap} .ls-nav-logo{align-self:center;display:inline-flex;color:var(--ls-text);text-decoration:none;line-height:0} .ls-nav-logo:hover{color:var(--ls-text)} .ls-nav-logo .ls-mark{display:block;height:40px;width:auto} /* A mark's tile on the page: the guide's dark-surface ink, set through the class because the mark files carry the ink of a light ground. */ .ls-tile{fill:var(--ls-tile)} .ls-nav-links{display:flex;gap:.6rem 1.8rem;list-style:none;flex-wrap:wrap} .ls-nav-links a,.ls-nav-signin{color:var(--ls-text-2);text-decoration:none;font-family:var(--ls-font-text);font-size:1rem} .ls-nav-links a:hover,.ls-nav-signin:hover{color:var(--ls-text)} .ls-nav-links a[aria-current],.ls-nav-signin[aria-current]{color:var(--ls-text);font-weight:600} .ls-nav-signin{margin-left:auto} /* Sign out, set beside the right-hand item by account-nav.js on the signed-in pages. A button, since signing out is an action and not a place. */ .ls-nav-signout{font:inherit;font-family:var(--ls-font-text);font-size:1rem;color:var(--ls-text-2);background:none;border:0;padding:0;cursor:pointer} .ls-nav-signout:hover{color:var(--ls-text)} .ls-nav-account{margin-left:auto;display:inline-flex;align-items:baseline;gap:1.8rem} .ls-nav-account .ls-nav-signin{margin-left:0} .ls-nav-lang{display:flex;gap:.8rem;align-items:baseline;list-style:none} .ls-nav-lang:empty,nav.lang:empty{display:none} .ls-nav-lang a{color:var(--ls-text-2);text-decoration:none;font-family:var(--ls-font-text);font-size:.95rem} .ls-nav-lang a:hover{color:var(--ls-text)} .ls-nav-lang a[aria-current="true"]{color:var(--ls-text);font-weight:600} @media(max-width:640px){ /* Domain-only nav: short links never need a collapsing menu — keep them inline and let them wrap on narrow screens (the hamburger was retired in WEB-NAV-TOGGLE-RETIRE). The mark takes the first row by itself, so the sections always start the second and where they break does not depend on which one is set at 600. The margin fills the row and leaves the link its own width. */ .ls-nav{padding:1.2rem 1rem;column-gap:1.2rem} .ls-nav-logo{margin-inline-end:100%} .ls-nav-links{gap:.4rem 1.1rem} .ls-nav-account{gap:1.1rem} } /* --- Hero ---------------------------------------------------- */ .ls-hero{padding:5rem 2rem 3.5rem;max-width:1040px;margin:0 auto} /* The column under a hero: the same box, so what follows a page's heading starts on the heading's own edge. The account and checkout pages set their cards in it, left-aligned, rather than centring them under a heading that is not centred. */ .ls-column{max-width:1040px;margin:0 auto;padding-inline:2rem} .ls-eyebrow{font-family:var(--ls-font-text);font-style:italic;font-size:1.15rem;letter-spacing:0;text-transform:none;color:var(--ls-text-2);margin-bottom:1rem} .ls-hero h1{margin-bottom:1.3rem} .ls-hero-sub{font-size:1.1rem;color:var(--ls-text-2);max-width:60ch;margin-bottom:2rem;line-height:1.65} .ls-ctas{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center} .ls-streak-bar,.ls-side-streak{display:none} /* --- Buttons ----------------------------------------------- */ .ls-btn-primary,.ls-btn-outline{font-family:var(--ls-font-text);font-weight:600;font-size:1rem;line-height:1.2;padding:.8em 1.2em;min-height:48px;border-radius:var(--ls-radius);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;transition:background var(--ls-dur) var(--ls-ease),border-color var(--ls-dur) var(--ls-ease)} .ls-btn-primary{background:var(--ls-text);color:var(--ls-bg);border:1px solid transparent} .ls-btn-primary:hover{background:#FFFFFF} .ls-btn-outline{background:transparent;border:1px solid var(--ls-border-strong);color:var(--ls-text)} .ls-btn-outline:hover{background:var(--ls-surface)} /* The one button that destroys something. Outlined in the danger colour rather than filled, so it never reads as the page's primary action. */ .ls-btn-danger{font-family:var(--ls-font-text);font-weight:600;font-size:1rem;line-height:1.2;padding:.8em 1.2em;min-height:48px;border-radius:var(--ls-radius);cursor:pointer;display:inline-flex;align-items:center;background:transparent;border:1px solid var(--ls-danger);color:var(--ls-danger);transition:background var(--ls-dur) var(--ls-ease)} .ls-btn-danger:hover{background:rgb(var(--ls-danger-rgb) / .12)} .ls-btn-danger[disabled]{opacity:.5;cursor:default} /* --- Layout ------------------------------------------------ */ .ls-section{max-width:1040px;margin:0 auto;padding:4.5rem 2rem} .ls-section-label{font-family:var(--ls-font-text);font-style:italic;font-size:1.15rem;letter-spacing:0;text-transform:none;color:var(--ls-text-2);margin-bottom:.6rem} /* Sections are separated by space; the only rule line on the site is a derivation's. The element stays for existing markup. */ .ls-divider{height:0;background:none;margin:0 2rem} /* --- Cards ------------------------------------------------- */ .ls-card,.ls-card-subtle,.ls-card-left{background:var(--ls-surface);border:0;border-radius:var(--ls-radius-sm);padding:1.3rem;position:relative;overflow:hidden} .ls-card-subtle{background:var(--ls-surface-2)} .ls-card::before,.ls-card-left::before{display:none} .ls-card h3,.ls-card-subtle h3,.ls-card-left h3{margin-bottom:.4rem} .ls-card p,.ls-card-subtle p,.ls-card-left p{font-size:.95rem;color:var(--ls-text-2);line-height:1.6} .ls-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.4rem} .ls-card-left{display:flex;align-items:flex-start;gap:1rem;padding:1rem 1.3rem} /* --- Paths grid (org "Four Paths") ------------------------- */ .ls-paths-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.4rem} .ls-path-card{background:var(--ls-surface);border:0;border-radius:var(--ls-radius-sm);padding:1.3rem;text-align:left} .ls-path-icon,.ls-about-accent{display:none} .ls-path-card h3{margin-bottom:.4rem} .ls-path-card p{font-size:.95rem;color:var(--ls-text-2);line-height:1.6} /* --- Code panel -------------------------------------------- */ /* Only code sits on a raised panel. An italic caption heads it, and its copy button starts hidden: the page's script reveals it, because without a script it would be a button that does nothing. Keywords are set in weight, literals in the given colour, results in the derived one; nothing else is coloured. */ .ls-panel{background:var(--ls-surface);border-radius:var(--ls-radius-sm);min-width:0} .ls-panel-top{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.55rem .6rem 0 1.25rem;min-height:2.75rem;color:var(--ls-text-faint);font-size:.95rem;font-style:italic} .ls-panel pre{margin:0;padding:1.1rem 1.25rem;overflow-x:auto;font-family:var(--ls-font-mono);font-size:.9rem;line-height:1.6;color:var(--ls-text)} .ls-panel-top code{font-style:normal} .ls-panel-top+pre{padding-top:.5rem} .ls-copy{font-family:var(--ls-font-text);font-style:normal;font-weight:600;font-size:.95rem;line-height:1;color:var(--ls-text);background:var(--ls-bg);border:1px solid var(--ls-border-strong);border-radius:var(--ls-radius);padding:.5rem .9rem;min-height:44px;cursor:pointer} .ls-copy:hover{background:var(--ls-surface-2)} /* --- Badge -------------------------------------------------- */ .ls-badge{font-family:var(--ls-font-text);font-size:.85rem;font-weight:600;letter-spacing:0;padding:1px 8px;border-radius:var(--ls-radius-sm);background:none;color:var(--ls-text-2);border:1px solid var(--ls-border-strong)} /* --- Footer ------------------------------------------------ */ /* The stacked wordmark, the primary logo, over its rows. It never sits on a tile. The release line closes the family row in faint, the one place outside the docs that states the version a customer is on. */ .ls-footer{padding:6rem 2rem 3rem;display:grid;gap:.7rem;font-family:var(--ls-font-text);font-size:.95rem} .ls-footer-mark{color:var(--ls-text-2);margin-bottom:.5rem} .ls-footer-mark .ls-mark{display:block;height:56px;width:auto} .ls-footer-links{display:flex;gap:.5rem 1.6rem;list-style:none;flex-wrap:wrap;align-items:baseline} .ls-footer-links a{color:var(--ls-text-2);text-decoration:none} .ls-footer-links a:hover{color:var(--ls-text);text-decoration:underline;text-underline-offset:.18em} .ls-footer-release{color:var(--ls-text-faint);font-variant-numeric:lining-nums} /* --- Long-form prose (philosophy / spec intros) ------------ */ .ls-prose{max-width:66ch;margin:0 auto;padding:4rem 2rem 2rem} .ls-prose h1{margin-bottom:1.5rem} .ls-prose h2{margin:2.5rem 0 .75rem} .ls-prose h2:first-child{margin-top:0} .ls-prose p,.ls-prose ul,.ls-prose ol{color:var(--ls-text-2);line-height:1.7;margin-bottom:1rem} .ls-prose ul,.ls-prose ol{padding-left:1.5rem} .ls-prose li{margin-bottom:.5rem} .ls-prose .lead{font-size:1.15rem} .ls-prose strong{color:var(--ls-text);font-weight:600} .ls-prose em{color:var(--ls-text);font-style:italic} .ls-prose code{font-size:.86em;padding:1px 5px;background:var(--ls-surface);border-radius:var(--ls-radius-sm)} .ls-prose pre{background:var(--ls-surface);border:0;border-radius:var(--ls-radius-sm);padding:1rem 1.2rem;overflow-x:auto;font-size:.85rem;line-height:1.6;margin:.8rem 0 1rem} .ls-prose pre code{background:none;padding:0;font-size:inherit} /* --- Page nav (prev/next) ---------------------------------- */ .ls-page-nav{display:flex;justify-content:space-between;align-items:center;max-width:66ch;margin:0 auto;padding:1rem 2rem 2rem} .ls-page-nav a{font-size:1rem;font-weight:600;color:var(--ls-text-2);text-decoration:none;display:inline-flex;align-items:center;gap:.35rem} .ls-page-nav a:hover{color:var(--ls-text)} /* --- Mobile ------------------------------------------------ */ @media(max-width:640px){ body{font-size:17px} .ls-hero{padding:3.5rem 1rem 2.5rem} .ls-column{padding-inline:1rem} .ls-section{padding:3rem 1rem} .ls-prose{padding:2.5rem 1rem 1.5rem} .ls-page-nav{padding:1rem 1rem 1.5rem} .ls-card-grid{grid-template-columns:1fr} .ls-footer{padding:4rem 1rem 2rem} } /* --- Motion ------------------------------------------------- The one orchestrated moment on the site is a derivation drawing its rule line on first load; everything respects reduced motion. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } /* --- Sheet sections ----------------------------------------- */ /* The page grid the proof sheet is set on: a margin for a section's name, in italic, and a main column. Sections are separated by space, never by a line. Below 900px the name moves above what it names. */ .ls-sheet{max-width:1280px;margin:0 auto;padding:clamp(3.5rem,8vw,7rem) 2rem 0;display:grid;grid-template-columns:var(--ls-margin) minmax(0,1fr);column-gap:var(--ls-gap);row-gap:.9rem} .ls-sheet-name{font-family:var(--ls-font-text);font-style:italic;font-weight:400;font-size:1.17rem;line-height:1.3;letter-spacing:0;color:var(--ls-text-2);padding-top:.35em} .ls-sheet-name small{display:block;font-size:.95rem;font-style:normal;color:var(--ls-text-faint);margin-top:.4rem;font-variant-numeric:lining-nums} .ls-sheet-main{display:flex;flex-direction:column;gap:1.75rem;min-width:0} .ls-sheet-lede{max-width:62ch;color:var(--ls-text-2);font-size:1.17rem;line-height:1.5} .ls-sheet-note{color:var(--ls-text-2);font-size:.95rem;max-width:62ch} .ls-sheet-body{color:var(--ls-text-2);max-width:62ch;line-height:1.7} /* Short titled notes in the main column: a heading and a sentence or two each, with no box around them, in as many columns as the notes fill. A note whose heading is a link takes the reader to what it describes. */ .ls-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));gap:1.75rem var(--ls-gap);max-width:62rem} .ls-notes h3{font-size:1.1rem;line-height:1.35;margin:0 0 .35rem} .ls-notes p{color:var(--ls-text-2);line-height:1.6} /* The last section of a page, which the footer follows. */ .ls-close{padding-bottom:clamp(4rem,9vw,7.5rem)} @media(max-width:900px){ .ls-sheet{grid-template-columns:minmax(0,1fr)} .ls-sheet-name{font-size:1rem;padding-top:0} } @media(max-width:640px){ .ls-sheet{padding-inline:1rem} }