/* ── Participate page ("Ich möchte teilnehmen") ── Accordion list of study sites. Loaded only by layouts/participate/list.html. */ /* The theme pins to a fixed viewport height, which clips pages that grow past 100vh — and this page grows every time an accordion opens. Same fix as the inline one in layouts/topics/list.html. */ body { height: auto !important; min-height: 100vh !important; } .participate-page { max-width: 900px; margin: 0 auto; padding: 2rem 0 4rem; } /* Header */ .participate-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.9rem; } .participate-intro { font-size: 1.05rem; line-height: 1.7; color: #444; margin-bottom: 2.25rem; max-width: 60ch; } html.dark .participate-intro { color: #bbb; } /* ── Accordion ── */ .participate-sites { display: flex; flex-direction: column; gap: 0.9rem; } .site-acc { border: 1px solid rgba(5, 102, 46, 0.25); border-left: 4px solid #0a8f37; border-radius: 8px; background: #fff; overflow: hidden; transition: box-shadow 0.18s ease, border-color 0.18s ease; } .site-acc:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); } .site-acc[open] { border-color: rgba(5, 102, 46, 0.45); box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08); } html.dark .site-acc { background: #222; border-color: rgba(10, 143, 55, 0.35); border-left-color: #0a8f37; } html.dark .site-acc[open] { border-color: rgba(10, 143, 55, 0.6); } /* Summary row */ .site-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.4rem; cursor: pointer; list-style: none; user-select: none; } .site-summary::-webkit-details-marker { display: none; } .site-summary:focus-visible { outline: 2px solid #0a8f37; outline-offset: -2px; } .site-summary-text { display: flex; flex-direction: column; gap: 0.15rem; } .site-city { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; color: #05662e; } html.dark .site-city { color: #4cc47a; } .site-inst { font-size: 0.95rem; font-weight: 600; color: #333; } html.dark .site-inst { color: #ddd; } .site-teaser { font-size: 0.9rem; color: #666; line-height: 1.45; } html.dark .site-teaser { color: #aaa; } /* Chevron */ .site-chevron { flex: 0 0 auto; width: 11px; height: 11px; border-right: 2px solid #0a8f37; border-bottom: 2px solid #0a8f37; transform: rotate(45deg); transition: transform 0.2s ease; margin-right: 0.35rem; } .site-acc[open] .site-chevron { transform: rotate(-135deg); } /* ── Panel body ── */ .site-body { padding: 0.25rem 1.4rem 1.6rem; border-top: 1px solid rgba(0, 0, 0, 0.07); margin-top: 0.1rem; } html.dark .site-body { border-top-color: rgba(255, 255, 255, 0.09); } .site-dept { font-size: 0.9rem; color: #666; margin: 1rem 0 0.75rem; } html.dark .site-dept { color: #aaa; } .site-intro { font-size: 1rem; line-height: 1.7; color: #444; margin-bottom: 1.5rem; } html.dark .site-intro { color: #bbb; } .site-block { margin-bottom: 1.35rem; } .site-block-title { font-size: 1rem; font-weight: 700; margin-bottom: 0.45rem; color: #1a1a1a; } html.dark .site-block-title { color: #e8e8e8; } .site-block p { font-size: 0.97rem; line-height: 1.7; color: #444; } html.dark .site-block p { color: #bbb; } .site-list { list-style: none; padding: 0; margin: 0; } .site-list li { position: relative; padding-left: 1.1rem; font-size: 0.97rem; line-height: 1.65; color: #444; margin-bottom: 0.28rem; } .site-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: #0a8f37; } html.dark .site-list li { color: #bbb; } /* Contact card */ .site-contact { background: rgba(5, 102, 46, 0.05); border-radius: 6px; padding: 1rem 1.1rem; margin: 1.5rem 0 1.25rem; } html.dark .site-contact { background: rgba(10, 143, 55, 0.1); } .site-contact-lead, .site-contact-line { font-size: 0.94rem; line-height: 1.6; color: #444; } html.dark .site-contact-lead, html.dark .site-contact-line { color: #bbb; } /* One block per named contact — a site may list several (Aachen has separate contacts for Viersen and Düren). Each line is optional, so a block can be just a name and an e-mail address. */ .site-contact-person { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.85rem; } .site-contact-role { font-size: 0.85rem; color: #666; } html.dark .site-contact-role { color: #999; } .site-contact-name { font-size: 0.94rem; font-weight: 600; color: #444; } html.dark .site-contact-name { color: #ddd; } .site-contact-line a, .site-contact-link { align-self: flex-start; font-size: 0.94rem; line-height: 1.6; color: #05662e; text-decoration: none; border-bottom: 1px solid rgba(5, 102, 46, 0.35); } .site-contact-line a:hover, .site-contact-link:hover { border-bottom-color: #05662e; } html.dark .site-contact-line a, html.dark .site-contact-link { color: #4cc47a; border-bottom-color: rgba(76, 196, 122, 0.4); } /* PDF download button */ .site-actions { margin-top: 1.25rem; } .site-pdf-btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.65rem 1.15rem; border-radius: 6px; background: #0a8f37; color: #fff; font-size: 0.94rem; font-weight: 600; text-decoration: none; transition: background 0.18s ease; } .site-pdf-btn:hover { background: #05662e; } .site-pdf-btn:focus-visible { outline: 2px solid #05662e; outline-offset: 2px; } .site-pdf-icon { width: 17px; height: 17px; } /* Footnotes */ .participate-note { margin-top: 1.75rem; font-size: 0.88rem; color: #777; } html.dark .participate-note { color: #999; } .participate-outro { margin-top: 1.5rem; font-size: 1rem; line-height: 1.7; color: #444; } html.dark .participate-outro { color: #bbb; } /* ── Mobile ── */ @media (max-width: 640px) { .site-summary { padding: 1rem 1.1rem; } .site-body { padding: 0.25rem 1.1rem 1.4rem; } .site-city { font-size: 1.15rem; } }