.information-page { background: linear-gradient(145deg, var(--surface-soft), var(--surface) 650px); padding-block: 1.5rem 4rem; } .information-page__inner { min-width: 0; } .information-hero { position: relative; isolation: isolate; padding: 1rem 1rem 2.5rem; min-height: 230px; } .information-hero__copy { position: relative; z-index: 1; max-width: 66ch; } .information-hero h1 { max-width: none; font-size: clamp(2.8rem, 4.5vw, 4.5rem); line-height: 1.05; margin: .6rem 0 1rem; } .information-hero .eyebrow { color: var(--blue); letter-spacing: .18em; } .information-intro { max-width: 62ch; color: var(--ink-soft); line-height: 1.65; } .information-intro p { margin-block: .7rem; } .information-intro hr, .information-section hr { display: none; } .information-hero__art { position: absolute; z-index: 0; right: 0; bottom: 0; width: 45%; height: 100%; color: var(--blue-bright); opacity: .38; mask-image: linear-gradient(to right, transparent, var(--ink) 40%); pointer-events: none; } .information-hero__art > svg:first-child { width: 100%; height: 100%; } .information-email { display: inline-flex; align-items: center; gap: 1rem; padding: .8rem 1.3rem; border-radius: .7rem; color: var(--surface); background: var(--blue); font-weight: 800; text-decoration: none; margin-block-start: 1rem; } .information-email:hover { color: var(--surface); background: var(--blue-deep); } .information-topics { display: grid; grid-template-columns: 1fr repeat(5, 1fr); align-items: stretch; padding: 1.2rem; background: var(--surface-strong); border-radius: 1.2rem; margin-block: .3rem 2rem; } .information-topics h2 { font-size: 2rem; margin: 0; align-self: center; } .information-topics a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; text-align: center; font-weight: 700; line-height: 1.3; font-size: .9rem; text-decoration: none; padding: .5rem 1rem; border-inline-start: 1px solid var(--line-strong); color: var(--ink); } .information-topics .shell-icon { width: 32px; height: 32px; color: var(--blue); } .information-topics a:hover { text-decoration: underline; } .information-layout { display: grid; grid-template-columns: 265px minmax(0,1fr); gap: 2.5rem; align-items: start; } .information-sidebar { position: sticky; top: calc(var(--site-header-height) + 1rem); max-height: calc(100dvh - var(--site-header-height) - 2rem); overflow: auto; border: 1px solid var(--line); border-radius: .9rem; background: var(--surface); } .information-contents summary { cursor: pointer; padding: 1rem 1.2rem; font: 700 1.5rem / 1.2 var(--font-display); } .information-contents ul { list-style: none; padding: 0 .65rem .8rem; margin: 0; } .information-contents a { display: block; padding: .55rem .65rem; color: var(--ink-soft); font-size: .88rem; text-decoration: none; border-radius: .3rem; overflow-wrap: anywhere; } .information-contents a:hover, .information-contents a:focus-visible { background: var(--surface-soft); color: var(--blue); } .information-contents__level-3 { padding-inline-start: .8rem; } .information-document { min-width: 0; max-width: 76ch; padding-inline: .5rem 1rem; line-height: 1.75; font-size: 1.05rem; overflow-wrap: anywhere; } .information-section { position: relative; padding: 1.25rem 0; border-block-end: 1px solid var(--line); } .information-section:first-child { padding-block-start: 0; } .information-section h2 { max-width: none; font-size: clamp(1.9rem, 2.8vw, 2.65rem); line-height: 1.15; margin: 0 0 .75rem; } .information-section h3 { max-width: none; font-size: 1.7rem; line-height: 1.25; margin: 1.6rem 0 .5rem; } .information-section p { margin: .7rem 0; } .information-section ul, .information-section ol { padding-inline-start: 1.5rem; } .information-section li { margin-block: .4rem; padding-inline-start: .2rem; } .information-section li::marker { color: var(--blue); } .information-section :is(h2,h3) { scroll-margin-block-start: calc(var(--site-header-height) + 1.5rem); } .information-section :is(h2,h3):target { background: var(--surface-soft); } .information-section a { color: var(--blue-deep); text-underline-offset: .2em; } .information-section--contact { background: var(--surface-strong); border: 0; border-radius: 1rem; padding: 1.5rem; margin-block-start: 1.5rem; } .information-section--contact a[href^="mailto:"] { display: inline-block; padding: .3rem .7rem; background: var(--surface); border-radius: .5rem; font-weight: 800; } .information-document--support .information-section { padding-inline-start: 3.6rem; } .information-section__icon { position: absolute; top: 1.1rem; left: 0; width: 2.6rem; height: 2.8rem; border-radius: 50% 50% 0 0; display: grid; place-items: center; font-size: 1.6rem; color: var(--blue); background: var(--surface-soft); } .information-document--support .information-section:first-child .information-section__icon { top: 0; } .information-document--support .information-section--contact { padding-inline: 1.5rem; } .information-document--support .information-section--contact .information-section__icon { display: none; } @media (width <= 1024px) { .information-layout { grid-template-columns: 230px minmax(0,1fr); gap: 1.5rem; } } @media (width <= 900px) { .information-topics { grid-template-columns: repeat(3, 1fr); gap: 1rem 0; } .information-topics h2 { text-align: center; } .information-topics a { border-inline-start: 0; } } @media (width <= 767px) { .information-page { padding-block: 1rem 2rem; } .information-hero { padding: .5rem 0 1.8rem; } .information-hero__art { opacity: .1; width: 70%; } .information-layout { grid-template-columns: 1fr; gap: 1.5rem; } .information-sidebar { position: static; max-height: none; } .information-topics { grid-template-columns: 1fr 1fr; padding: 1rem .3rem; } .information-topics a { font-size: .85rem; padding-inline: .5rem; } .information-document { padding: 0; font-size: 1rem; } .information-document--support .information-section { padding-inline-start: 0; } .information-section__icon { display: none; } .information-document--support .information-section--contact { padding-inline: 1rem; } .information-section--contact { padding: 1rem; } } .information-section__icon svg { width: 26px; height: 26px; } .information-topics .information-icon { width: 32px; height: 32px; color: var(--blue); }