.idea { color: var(--color-white); position: relative; } .idea .idea__header dl, .idea .idea__header h2 { display: flex; font-weight: 700; padding-bottom: 0.15em; padding-top: 0.15em; } .idea .idea__header dl dt, .idea .idea__header h2 span { font-feature-settings: 'ss02', 'tnum'; width: 2.8ch; } .idea .idea__header dl dd, .idea .idea__header h2 strong { transition: opacity var(--transition); width: calc(100% - 2.8ch); } .idea .idea__header a { display: block; letter-spacing: -0.01em; pointer-events: auto; text-decoration: none; transition: color var(--transition); } .idea .idea__content { margin-left: 2.8ch; margin-top: 0.5em; max-width: 50ch; pointer-events: auto; } .idea .idea__content > * + * { margin-top: 0.5em; } .idea.idea--clone { display: none; } /* No per-item scroll-margin-top; we use root scroll-padding-top on . */ /* Hide titles for non-selected ideas on idea pages; reveal on hover/focus */ html.is-idea .cluster.cluster--index .idea .idea__header a dl dd { opacity: 0; } html.is-idea .cluster.cluster--index .idea .idea__header a:hover dl dd, html.is-idea .cluster.cluster--index .idea .idea__header a:focus dl dd { opacity: 1; } /* Single-page variant */ html.is-idea .cluster.cluster--signal .idea .idea__header a dl dd { opacity: 0; } html.is-idea .cluster.cluster--signal .idea .idea__header a:hover dl dd, html.is-idea .cluster.cluster--signal .idea .idea__header a:focus dl dd { opacity: 1; } @media (hover: none), (pointer: coarse) { html.is-idea .cluster.cluster--index .idea .idea__header a dl dd { opacity: 1; } } @media(min-width: 64em) and (hover: hover) and (pointer: fine) { .idea .idea__header dl, .idea .idea__header h2 { padding-bottom: 0; padding-top: 0; } .idea:hover, .idea:focus, .idea:focus-within { z-index: 103; } .idea .idea__header a:hover, .idea .idea__header a:focus { color: var(--color-white); } .idea:not(:last-child) .idea__content { margin-bottom: 0.5em; } } @media (min-width: 64em) and (hover: hover) and (pointer: fine) { /* Detail page: de-emphasize non-selected items' numbers */ html.is-idea .cluster.cluster--signal .idea:not([data-selected="true"]) .idea__header a dl dt { opacity: 0.2; /* stronger dim for non-selected */ transition: opacity var(--transition); } /* Restore emphasis on intent */ html.is-idea .cluster.cluster--signal .idea .idea__header a:hover dl dt, html.is-idea .cluster.cluster--signal .idea .idea__header a:focus dl dt { opacity: 1; } }