/* Antwoordmachine (/a) — answer-shell-CSS naast de Tailwind-build. app.css * levert al: pr-fade-in (keyframes+klasse), .pr-cite, .pr-cite-flash en de * legacy .pr-answer-body. Dit bestand is hand-geschreven (staat buiten de * Tailwind-scan): answer.js zet deze klassen/attributen runtime, en de * ongelaagde regels hieronder winnen bewust van Tailwinds @layer-utilities * (o.a. van de `hidden`-klasse op het expand-icoon). */ /* ── Sidebar-collapse: answer.js togglet data-collapsed op #answer-page en * zet --pr-sidebar-w (264px ↔ 64px) op . ── */ #answer-page[data-collapsed] [data-collapse-hide] { display: none; } #answer-page[data-collapsed] [data-role='icon-collapse'] { display: none; } #answer-page[data-collapsed] [data-role='icon-expand'] { display: block; } #answer-page[data-collapsed] #answer-sidebar { padding-inline: 8px; } #answer-page[data-collapsed] #answer-sidebar-head { justify-content: center; padding-inline: 0; } #answer-page[data-collapsed] #answer-new-question, #answer-page[data-collapsed] #answer-sidebar-nav a { justify-content: center; padding-inline: 0; } #answer-page[data-collapsed] #answer-account > div { justify-content: center; padding-inline: 0; } /* ── Shimmer-sheen op skeletons (blokken hebben zelf een grijze bg-fallback) ── */ @keyframes pr-shimmer-slide { from { background-position: 200% 0; } to { background-position: -200% 0; } } .pr-shimmer { background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 60% ); background-size: 200% 100%; animation: pr-shimmer-slide 1.6s linear infinite; } /* ── Typewriter-caret (answer.js hangt hem aan het laatste element) ── */ @keyframes pr-caret-blink { 50% { opacity: 0; } } .pr-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.15em; background: var(--color-pr-pink); animation: pr-caret-blink 1s steps(1) infinite; } /* ── Binnenkomst-animaties (pr-fade-in-keyframes komen uit app.css) ── */ .pr-rise { animation: pr-fade-in 0.35s ease-out both; } .pr-chip-in { animation: pr-fade-in 0.25s ease-out both; } .pr-prehide { opacity: 0; } .pr-stagger { animation: pr-fade-in 0.4s ease-out both; } /* ── Adviesring om de gekozen kaart(en) in het productgrid ── */ .pr-advice-ring { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-pr-pink) 60%, transparent); } /* ── Insight/web-proza + bronnenlijst (answer.js maakt data-part-divs met * deze klassen in de panelen; het antwoord-blok stylet via Tailwind) ── */ .pr-a-prose { font-size: 14.5px; line-height: 23px; color: var(--color-pr-dark); } .pr-a-prose p { margin: 0 0 10px; } .pr-a-prose p:last-child { margin-bottom: 0; } .pr-a-prose h3 { margin: 14px 0 6px; font-weight: 600; } .pr-a-prose ul, .pr-a-prose ol { margin: 0 0 10px; padding-left: 18px; } .pr-a-prose ul { list-style: disc; } .pr-a-prose ol { list-style: decimal; } .pr-a-prose li { margin: 2px 0; } .pr-a-sources { margin-top: 10px; } /* ── Reduced motion: alles instant, geen sheen/caret/entrees ── */ @media (prefers-reduced-motion: reduce) { .pr-shimmer, .pr-caret, .pr-rise, .pr-chip-in, .pr-stagger { animation: none; } .pr-prehide { opacity: 1; } }