/* bahunya inline, unused removed */ :root { --background-body: #0d1117; --background: #161b22; --background-bright: rgba(240, 246, 252, 0.15); --background-alt: #1a242f; --selection: #1c76c5; --text-main: #c9d1d9; --text-bright: #e3e9f0; --text-muted: #8b949e; --links: #e3bc5e; --focus: #388bfd; --focus-background: #0c2d6b; --border: #21252c; --border-muted: #21262d; --border-bright: #8b949e; --button-hover: #324759; --monospace: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; --sans-serif: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif } html { box-sizing: border-box } *, :after, :before { box-sizing: inherit } body { font-family: var(--sans-serif); line-height: 1.7; max-width: 50rem; margin: 4rem auto; /* was 6rem; still clears the fixed bar, drops dead space above the lang switcher */ padding: 0 10px; word-wrap: break-word; color: #c9d1d9; color: var(--text-main); background: #0d1117; background: var(--background-body); text-rendering: optimizeLegibility } @media (max-width: 600px) { body { padding-top: 60px; /* whatever your two-row nav height is */ } } h1, h2, h3, h4, h5 { margin: 1.38rem 0 1.38rem; line-height: 1.3 } h1 { font-size: 2.488rem } h2 { font-size: 2.074rem } h1, h2, h3, h4, h5, h6, strong { color: #e3e9f0; color: var(--text-bright) } ol, ul { padding-left: 2em } a { text-decoration: none; color: #e3bc5e; color: var(--links) } footer { border-top: 1px solid #21252c; border-top: 1px solid var(--border); padding-top: 10px; color: #8b949e; color: var(--text-muted) } body>footer { margin-top: 40px } header nav:first-of-type { position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, .5); padding: 0 calc(50vw - 25rem); display: flex; align-items: center; width: 100%; z-index: 999 } header nav:first-of-type:before { backdrop-filter: saturate(180%) blur(5px); -webkit-backdrop-filter: saturate(180%) blur(5px); content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0 } /* CHANGED: was `header nav:first-of-type a` — the descendant selector also hit the submenu links and beat `.dropdown a` on specificity. Now top-level only. */ header nav:first-of-type>ul>li>a { margin: 10px; display: inline-block } /* CHANGED: was `header nav:first-of-type ul` with `display: inline; overflow: hidden`. Two problems: `overflow: hidden` clipped the absolutely-positioned submenu, and `display: inline` outranked `.dropdown { display: none }`. Flex replaces the float layout, so the overflow hack is no longer needed, and the child combinator keeps these rules from cascading into .dropdown. */ header nav:first-of-type>ul { list-style-type: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center } /* REMOVED: `>ul>li { float: left }` and `>ul>li:lang(fa) { float: right }`. Flex items ignore float. For an RTL language, set dir="rtl" on and flex follows the writing direction on its own. */ /* custom */ body { font-size: 1.1rem; } a { text-decoration: underline !important; } .lang-nav { all: unset } .skip-link { clip: rect(1px, 1px, 1px, 1px); display: block; left: 1rem; top: 4rem; z-index: 999 } .skip-link, .visually-hidden { height: 1px; overflow: hidden; position: absolute; width: 1px } .visually-hidden { clip: rect(0, 0, 0, 0); white-space: nowrap } .skip-link:focus, .visually-hidden:focus { clip: auto; background-color: var(--background); color: var(--links); height: auto; line-height: 1; overflow: visible; padding: 1rem; width: auto } .skip-link:not(:focus) { clip: rect(0 0 0 0); border: 0; height: auto; margin: 0; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } dl { margin: 1.5rem 0; } dt { color: var(--text-bright); font-weight: 600; margin-top: 1rem; } dd { color: var(--text-main); margin: 0.25rem 0 0 1.5rem; } .obj-title { font-size: 1.75rem; margin: 0 0 4px; } .description { font-size: 1rem; color: var(--text-main); line-height: 1.7; margin: 1rem 0; } .type-tag { font-size: 0.95rem; color: var(--text-muted); font-style: italic; } .back-link { font-size: 0.95rem; color: #e3bc5e; display: inline-block; margin-bottom: 1rem; } .blurb { color: var(--text-muted); margin: 0.25rem 0 0.5rem; } /* title row: page title on the left, language dropdown top-right */ .page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.5rem; margin-bottom: 1rem; } .page-head h1 { margin: 0; min-width: 0; } /* language dropdown (top-right, by the title) */ .lang-dropdown { position: relative; flex: none; } .lang-dropdown__button { font: inherit; color: var(--text-bright); background: var(--background); border: 1px solid var(--border-bright); border-radius: 6px; padding: 0.35rem 0.7rem; line-height: 1.2; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; } .lang-dropdown__button:hover { background: var(--button-hover); } .lang-dropdown__button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .lang-dropdown__caret { transition: transform 0.15s ease; } .lang-dropdown__button[aria-expanded="true"] .lang-dropdown__caret { transform: rotate(180deg); } .lang-dropdown__menu { position: absolute; right: 0; top: calc(100% + 4px); margin: 0; padding: 0.25rem; list-style: none; min-width: 10rem; background: var(--background); border: 1px solid var(--border-bright); border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); z-index: 1000; } .lang-dropdown__menu li { margin: 0; } .lang-dropdown__menu a { display: block; padding: 0.4rem 0.6rem; border-radius: 4px; color: var(--text-main); text-decoration: none !important; } .lang-dropdown__menu a:hover { background: var(--button-hover); color: var(--text-bright); } .lang-dropdown__menu a[aria-current="true"] { color: var(--links); font-weight: 600; } /* footer text switcher */ .lang-switch--footer { margin: 1rem 0; color: var(--text-muted); } .lang-available { color: var(--text-muted); } /* separator between footer language links, drawn in CSS */ .lang-nav a + a::before { content: " / "; color: var(--text-muted); } iframe { background-color: #EEEDFC; margin-top: 1.5rem; } /* collections submenu — styled to match .lang-dropdown__menu above */ .has-dropdown { position: relative; } .dropdown { display: none; position: absolute; top: 100%; left: 0; min-width: 12rem; margin: 0; padding: 0.25rem; list-style: none; background: var(--background); border: 1px solid var(--border-bright); border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); z-index: 10; } .has-dropdown:hover>.dropdown, .has-dropdown:focus-within>.dropdown { display: block; } .dropdown li { margin: 0; } .dropdown a { display: block; margin: 0; padding: 0.4rem 0.6rem; border-radius: 4px; white-space: nowrap; color: var(--text-main); text-decoration: none !important; } .dropdown a:hover { background: var(--button-hover); color: var(--text-bright); } .dropdown a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }