/* Belegabgleich — the one global stylesheet. Loaded by every page: the generated marketing pages AND the Svelte tool at /app/. Sits on top of the Needle brand system (brand.css); per the brand's hard rules we never redeclare --surface-*, --text-*, --accent-* or --border-*. Layers, in order: 1. base — reset, typography, focus, tooltip 2. chrome — header, footer, buttons (shared by site + tool) 3. sections — the marketing page vocabulary 4. prose — articles and the privacy page 5. responsive — the few places where the above needs help */ /* ============================================================ 1. base ==== */ /* The brand's @font-face ships without a weight range, so the variable font can't reach the heavy display weights (headings render thin). Re-declare the family with the full axis so weights 100–900 resolve. */ @font-face { font-family: "NunitoSans"; src: url("/fonts/NunitoSans-Variable.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* A calm "attention" scale for the "Beleg fehlt" state, which the brand has no dedicated token for. */ --status-warn: #e06a4a; --status-warn-text: #b23c1e; --status-warn-surface: #fce9e2; --status-warn-border: #f3cfc2; --layout-max: 1080px; --layout-prose: 68ch; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--surface-page); color: var(--text-primary); font-family: var(--font-family-body); font-size: var(--type-body-size); line-height: var(--type-body-line-height); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } h1, h2, h3 { text-wrap: balance; margin: 0; font-family: var(--font-family-display); } p { text-wrap: pretty; } :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 4px; } a { color: var(--text-link); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px 16px; background: var(--surface-panel); border-radius: 0 0 var(--radius-control) 0; font-weight: 700; text-decoration: none; color: var(--text-primary); } .skip-link:focus { left: 0; } /* Tooltip bubble for the `tooltip` action (appended to , position fixed). */ .tooltip-pop { position: fixed; z-index: 100; max-width: 320px; padding: 6px 10px; border-radius: 8px; background: var(--text-primary); color: var(--text-inverse); font-family: var(--font-family-body); font-size: 0.8rem; font-weight: 600; line-height: 1.35; box-shadow: var(--shadow-panel); pointer-events: none; white-space: normal; overflow-wrap: anywhere; animation: tooltip-in 0.12s ease; } @keyframes tooltip-in { from { opacity: 0; transform: translateY(2px); } } @media (prefers-reduced-motion: reduce) { .tooltip-pop { animation: none; } } /* ========================================================== 2. chrome ==== */ main { width: 100%; max-width: var(--layout-max); margin: 0 auto; padding: 0 24px; } /* -- header ---------------------------------------------------------------- */ .header-pill-shell { position: sticky; top: 0; z-index: 50; display: flex; justify-content: center; padding: 10px 24px; } .header-pill { width: 100%; max-width: var(--layout-max); } .header-pill-brand { gap: 9px; text-decoration: none; } .header-pill-logo { width: 40px; height: auto; } .header-pill-brand-label { font-family: var(--font-family-display); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.02em; line-height: 1; color: var(--text-primary); white-space: nowrap; } /* Make the burger dropdown span the full pill width and animate in. The extra .header-pill raises specificity over the brand's right-anchored rule. */ .header-pill .header-pill-dropdown { left: 0; right: 0; min-width: 0; max-width: none; } .header-pill[data-menu-open="true"] .header-pill-dropdown { transform-origin: top center; animation: menu-in 0.2s cubic-bezier(0.2, 0, 0, 1); } @keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } } @media (prefers-reduced-motion: reduce) { .header-pill[data-menu-open="true"] .header-pill-dropdown { animation: none; } } /* brand.css stretches .header-pill-button inside the burger menu; our buttons are .btn, so they need the same treatment or they sit ragged in the column. */ .header-pill-dropdown .btn { width: 100%; justify-content: center; } /* Icon-only GitHub link — a trust signal, not a primary action. */ .ghicon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-pill); color: var(--text-muted); transition: color 0.15s ease, background-color 0.15s ease, scale 0.12s ease; } .ghicon svg { width: 17px; height: 17px; fill: currentColor; display: block; } .ghicon:hover { color: var(--text-primary); background: var(--surface-panel-muted); } .ghicon:active { scale: 0.94; } /* -- buttons --------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: var(--radius-control); border: 1px solid transparent; font-family: var(--font-family-body); font-weight: 700; font-size: 0.95rem; text-decoration: none; white-space: nowrap; cursor: pointer; transition: scale 0.12s ease, background-color 0.15s ease, border-color 0.15s ease; } .btn-sm { min-height: 38px; padding: 0 15px; font-size: 0.86rem; } .btn-primary { background: var(--accent-brand-deep); color: var(--text-inverse); box-shadow: var(--shadow-subtle); } .btn-primary:hover { background: var(--text-success); color: var(--text-inverse); } .btn-ghost { background: var(--surface-panel); color: var(--text-primary); border-color: var(--border-strong); } .btn-ghost:hover { border-color: var(--accent-brand-deep); } .btn-ghost svg { width: 15px; height: 15px; fill: currentColor; } .btn:active { scale: 0.96; } .btn-arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: translate 0.16s cubic-bezier(0.2, 0, 0, 1); } .btn:hover .btn-arrow { translate: 3px 0; } @media (prefers-reduced-motion: reduce) { .btn, .btn-arrow { transition: none; } } .cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } /* -- footer ---------------------------------------------------------------- */ body { display: flex; flex-direction: column; min-height: 100dvh; } main { flex: 1; } .site-footer { margin-top: 64px; border-top: 1px solid var(--border-subtle); background: var(--surface-page-elevated); } .site-footer-inner { max-width: var(--layout-max); margin: 0 auto; padding: 44px 24px 28px; } .site-footer-main { display: grid; grid-template-columns: minmax(230px, 1.4fr) repeat(4, minmax(120px, 1fr)); gap: 32px; } .site-footer-brand p { margin: 12px 0 0; color: var(--text-secondary); font-size: 0.9rem; max-width: 34ch; } .site-footer-wordmark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text-primary); font-family: var(--font-family-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; } .site-footer-vendor { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .site-footer-vendor img { height: 20px; width: auto; opacity: 0.85; transition: opacity 0.15s ease; } .site-footer-vendor a:hover img { opacity: 1; } .site-footer-col { display: flex; flex-direction: column; gap: 9px; } .site-footer-col-title { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); font-family: var(--font-family-code); } .site-footer-col a { color: var(--text-secondary); font-size: 0.92rem; text-decoration: none; transition: color 0.15s ease; } .site-footer-col a:hover { color: var(--text-primary); } .site-footer-legal { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 0.84rem; } .site-footer-legal a { color: inherit; } .site-footer-version { font-family: var(--font-family-code); font-variant-numeric: tabular-nums; } .noscript-note { max-width: 44ch; margin: 18vh auto 0; padding: 24px; background: var(--surface-panel); border: 1px solid var(--border-subtle); border-radius: var(--radius-panel); text-align: center; } /* ======================================================== 3. sections ==== */ .eyebrow { margin: 0 0 14px; font-family: var(--font-family-code); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-brand-deep); } .micro-label { font-size: var(--type-micro-label-size); font-weight: var(--type-micro-label-weight); letter-spacing: var(--type-micro-label-tracking); text-transform: uppercase; color: var(--text-muted); } .lede { margin: 20px 0 0; max-width: 46ch; font-size: 1.12rem; color: var(--text-secondary); text-wrap: pretty; } .section { padding: 72px 0 0; scroll-margin-top: 88px; } .section-head { margin-bottom: 26px; } .section h2, .cta-band h2, .related h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 780; line-height: 1.1; letter-spacing: -0.035em; } .section-lede { margin: 12px 0 0; max-width: 62ch; color: var(--text-secondary); } .section-foot { margin-top: 26px; } .section-note { margin: 22px 0 0; color: var(--text-muted); font-size: 0.92rem; } .section-note a { color: var(--accent-brand-deep); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent-brand-deep) 35%, transparent); } .section-note a:hover { border-bottom-color: var(--accent-brand-deep); } /* -- hero ------------------------------------------------------------------ */ .hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; padding: 64px 0 56px; } .hero h1 { font-size: var(--type-display-size); font-weight: var(--type-display-weight); line-height: var(--type-display-line-height); letter-spacing: var(--type-display-tracking); } .hero .cta-row { margin-top: 30px; } .hero-note { margin: 14px 0 0; font-size: 0.86rem; color: var(--text-muted); max-width: 42ch; } .page-hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; padding: 34px 0 48px; } .page-hero-narrow { grid-template-columns: 1fr; max-width: 62ch; } .page-hero h1 { font-size: var(--type-page-title-size); font-weight: var(--type-page-title-weight); line-height: var(--type-page-title-line-height); letter-spacing: var(--type-page-title-tracking); } .page-hero .cta-row { margin-top: 26px; } .page-hero-aside { display: flex; justify-content: center; } .hero-card { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 28px; background: var(--surface-panel); border: 1px solid var(--border-subtle); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); text-decoration: none; color: inherit; transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease; } .hero-card:hover { box-shadow: var(--shadow-floating); border-color: var(--border-strong); transform: translateY(-2px); } .hero-card:active { transform: translateY(0); } .hero-card-head { width: 100%; display: flex; align-items: center; justify-content: space-between; } .hero-card-period { color: var(--text-muted); font-size: 0.85rem; font-weight: 650; font-family: var(--font-family-code); } .hero-card-foot { color: var(--accent-brand-deep); font-size: 0.9rem; font-weight: 700; } @media (prefers-reduced-motion: reduce) { .hero-card { transition: none; } .hero-card:hover { transform: none; } } /* -- the meter: the signature element -------------------------------------- */ .meter { position: relative; width: 220px; height: 220px; margin: 0; flex: none; } .meter svg { width: 100%; height: 100%; display: block; } .meter-track { fill: none; stroke: var(--border-subtle); stroke-width: 11; } .meter-value { fill: none; stroke: url(#meterStroke); stroke-width: 11; stroke-linecap: round; } @media (prefers-reduced-motion: no-preference) { .meter-value { animation: meter-fill 1s cubic-bezier(0.2, 0, 0, 1) backwards; } @keyframes meter-fill { from { stroke-dashoffset: var(--meter-from); } } } .meter figcaption { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; } .meter-count { font-family: var(--font-family-display); font-weight: 800; font-size: 3.4rem; line-height: 1; letter-spacing: -0.04em; color: var(--text-primary); font-variant-numeric: tabular-nums; } .meter-label { margin-top: 2px; font-size: var(--type-micro-label-size); font-weight: var(--type-micro-label-weight); letter-spacing: var(--type-micro-label-tracking); text-transform: uppercase; color: var(--text-muted); } .meter-ratio { margin-top: 4px; font-size: 0.85rem; font-weight: 650; color: var(--text-muted); font-variant-numeric: tabular-nums; } /* -- trust strip ----------------------------------------------------------- */ .trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); overflow: hidden; } .trust-strip > div { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; background: var(--surface-panel); } .trust-strip strong { font-size: 0.95rem; font-weight: 750; } .trust-strip span { color: var(--text-muted); font-size: 0.82rem; } /* -- ledger: a statement excerpt, the artifact the tool is about ----------- */ .ledger { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--surface-panel); overflow: hidden; } .ledger-row { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem 6rem minmax(0, 9.5rem); align-items: center; gap: 12px; padding: 13px 18px; border-top: 1px solid var(--border-subtle); } .ledger-row:first-child { border-top: 0; } .ledger-row[data-state="missing"] { background: var(--status-warn-surface); } .ledger-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ledger-date, .ledger-amount { font-family: var(--font-family-code); font-size: 0.86rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .ledger-amount { text-align: right; } .ledger-badge { justify-self: end; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; } .ledger-badge-ok { background: var(--surface-callout-success); color: var(--text-success); } .ledger-badge-missing { background: var(--status-warn); color: #fff; } .ledger-badge-none { background: var(--surface-panel-muted); color: var(--text-muted); } /* -- steps ----------------------------------------------------------------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; counter-reset: none; } .step { padding: 24px; background: var(--surface-panel); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-subtle); } .step-n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: var(--surface-callout-success); color: var(--text-success); font-family: var(--font-family-display); font-weight: 800; margin-bottom: 14px; } .step h3 { font-size: 1.05rem; font-weight: 750; margin-bottom: 6px; letter-spacing: -0.015em; } .step p { margin: 0; color: var(--text-secondary); font-size: 0.93rem; } /* -- cards ----------------------------------------------------------------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; } .card { background: var(--surface-panel); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-subtle); transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; } .card > a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px; text-decoration: none; color: inherit; } .card-grid-plain .card { padding: 24px; display: flex; flex-direction: column; gap: 8px; } .card:has(a):hover { border-color: var(--accent-brand-deep); box-shadow: var(--shadow-panel); transform: translateY(-2px); } .card h3 { font-size: 1.05rem; font-weight: 750; letter-spacing: -0.015em; } .card p { margin: 0; color: var(--text-secondary); font-size: 0.93rem; flex: 1; } .card-more { color: var(--accent-brand-deep); font-size: 0.88rem; font-weight: 700; } @media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:has(a):hover { transform: none; } } /* -- providers ------------------------------------------------------------- */ .provider-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .provider-tag { display: inline-block; padding: 8px 14px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--surface-callout-info); color: var(--text-secondary); font-size: 0.95rem; text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } a.provider-tag:hover { border-color: var(--accent-brand-deep); color: var(--accent-brand-deep); background: color-mix(in srgb, var(--accent-brand) 8%, transparent); } /* -- callout --------------------------------------------------------------- */ .callout { background: var(--surface-callout-info); border: 1px solid var(--border-subtle); border-radius: var(--radius-panel); padding: 32px 36px; } .callout h2 { margin-bottom: 16px; } .callout ul { margin: 0; padding-left: 20px; } .callout li { margin: 8px 0; color: var(--text-secondary); } .callout strong { color: var(--text-primary); } .callout a { color: var(--accent-brand-deep); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent-brand-deep) 35%, transparent); } .callout a:hover { border-bottom-color: var(--accent-brand-deep); } .callout-more { display: inline-block; margin-top: 18px; font-weight: 700; } /* -- faq ------------------------------------------------------------------- */ .faq-list { display: flex; flex-direction: column; max-width: 78ch; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--surface-panel); overflow: hidden; } .faq-item { border-top: 1px solid var(--border-subtle); } .faq-item:first-child { border-top: 0; } .faq-item > summary { display: flex; align-items: center; gap: 12px; padding: 18px 22px; cursor: pointer; list-style: none; transition: background 0.14s ease; } .faq-item > summary::-webkit-details-marker { display: none; } .faq-item > summary:hover { background: var(--surface-panel-muted); } .faq-item > summary h3 { flex: 1; font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; } /* A plus that becomes a minus — cheaper to read than a rotating chevron. */ .faq-item > summary::after { content: ""; flex: none; width: 13px; height: 13px; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; color: var(--text-muted); transition: rotate 0.2s ease; } .faq-item[open] > summary::after { background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat; rotate: 180deg; } /* Open + hovered, the summary's tint would otherwise end flush against the first line of the answer. Pull the boundary up and give the answer its own top padding, so the tinted block never crowds the text below it. */ .faq-item[open] > summary { padding-bottom: 8px; } .faq-answer { padding: 12px 22px 20px; max-width: 68ch; } .faq-answer p { margin: 0 0 10px; color: var(--text-secondary); } .faq-answer p:last-child { margin-bottom: 0; } .faq-answer a { color: var(--accent-brand-deep); } @media (prefers-reduced-motion: reduce) { .faq-item > summary, .faq-item > summary::after { transition: none; } } /* -- cta band -------------------------------------------------------------- */ .cta-band { margin: 80px 0 0; } .cta-band-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 52px 32px; border-radius: var(--radius-panel); background: var(--surface-panel); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-subtle); } .cta-band-inner p { margin: 0; max-width: 52ch; color: var(--text-secondary); } .cta-band .cta-row { margin-top: 10px; justify-content: center; } /* -- breadcrumb, related --------------------------------------------------- */ .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 18px 0 0; font-size: 0.84rem; color: var(--text-muted); } .breadcrumb a { color: var(--text-muted); text-decoration: none; } .breadcrumb a:hover { color: var(--text-primary); } .breadcrumb-sep { color: var(--border-strong); } .related-list, .article-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .related-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .related-list a, .article-list a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px 22px; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--surface-panel); text-decoration: none; color: inherit; transition: border-color 0.16s ease, background 0.16s ease; } .related-list a:hover, .article-list a:hover { border-color: var(--accent-brand-deep); background: var(--surface-panel-muted); } .related-list strong { font-family: var(--font-family-display); font-size: 1.02rem; font-weight: 750; letter-spacing: -0.015em; } .related-list span { color: var(--text-secondary); font-size: 0.9rem; } .article-list h2 { font-size: 1.15rem; font-weight: 750; letter-spacing: -0.02em; } .article-list p { margin: 0; color: var(--text-secondary); font-size: 0.94rem; flex: 1; } /* ============================================================ 4. prose ==== */ .prose { max-width: var(--layout-prose); padding-top: 34px; } .prose h1 { font-size: var(--type-page-title-size); font-weight: var(--type-page-title-weight); line-height: var(--type-page-title-line-height); letter-spacing: var(--type-page-title-tracking); } /* Editorial pages get the brand's serif italic for their opening line — it marks "this is written, not generated by the tool". */ .prose > .lede { font-family: var(--font-family-accent-serif); font-style: italic; font-size: 1.28rem; line-height: 1.45; color: var(--text-primary); max-width: 52ch; margin-top: 18px; } .prose h2 { margin: 44px 0 12px; font-size: 1.32rem; font-weight: 780; letter-spacing: -0.025em; } .prose p { margin: 0 0 14px; color: var(--text-secondary); } .prose ul { margin: 0 0 18px; padding-left: 22px; color: var(--text-secondary); } .prose li { margin: 7px 0; } .prose strong { color: var(--text-primary); } /* :not(.btn) matters — a bare `.prose a` outranks `.btn-primary` (0,2,0 beats 0,1,0) and would paint the button's label in the same green as its own background, leaving an empty pill. Buttons inside prose keep their own look. */ .prose a:not(.btn) { color: var(--accent-brand-deep); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent-brand-deep) 35%, transparent); } .prose a:not(.btn):hover { border-bottom-color: var(--accent-brand-deep); } .prose code { font-family: var(--font-family-code); font-size: 0.88em; padding: 1px 5px; border-radius: 5px; background: var(--surface-panel-muted); border: 1px solid var(--border-subtle); } .article-meta { margin: 16px 0 30px; font-size: 0.82rem; color: var(--text-muted); font-family: var(--font-family-code); } .filename-sample { margin: 0 0 18px; } .filename-sample code { font-size: 1rem; padding: 8px 12px; display: inline-block; } .inline-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 30px 0; padding: 20px 24px; border-radius: var(--radius-card); background: var(--surface-callout-success); border: 1px solid color-mix(in srgb, var(--accent-brand) 26%, var(--border-subtle)); } .inline-cta p { margin: 0; flex: 1 1 24ch; color: var(--text-primary); font-weight: 600; } .disclaimer { margin: 36px 0 0; padding: 14px 18px; border-left: 3px solid var(--border-strong); color: var(--text-muted); font-size: 0.88rem; } /* ------------------------------------------------- 4b. the Beleg (/wissen/) -- The explainers are printed on a receipt: a paper slip with torn top and bottom edges, a monospaced till-slip header, dashed rules between sections, and the standing disclaimer set as literal fine print. The subject of the whole site is the Beleg, so the articles about it take its form. The tear is a mask, not a painted overlay, so it works on any background; the shadow therefore lives on the wrapper (filter is applied before mask, so a shadow on the sheet itself would be masked away with it). */ .beleg { --tear: 9px; max-width: calc(var(--layout-prose) + 120px); margin: 26px 0 0; filter: drop-shadow(0 10px 26px rgba(34, 44, 32, 0.09)); } .beleg-sheet { max-width: none; padding: 46px clamp(20px, 5vw, 60px) 44px; background: var(--surface-panel); /* Peaks along the top, valleys along the bottom; the middle stays solid. */ --tear-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9'%3E%3Cpath d='M0 9L9 0l9 9z' fill='%23000'/%3E%3C/svg%3E"); --tear-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9'%3E%3Cpath d='M0 0l9 9 9-9z' fill='%23000'/%3E%3C/svg%3E"); -webkit-mask-image: var(--tear-top), linear-gradient(#000 0 0), var(--tear-bottom); -webkit-mask-size: 18px var(--tear), 100% calc(100% - var(--tear) * 2), 18px var(--tear); -webkit-mask-position: top left, left var(--tear), bottom left; -webkit-mask-repeat: repeat-x, no-repeat, repeat-x; mask-image: var(--tear-top), linear-gradient(#000 0 0), var(--tear-bottom); mask-size: 18px var(--tear), 100% calc(100% - var(--tear) * 2), 18px var(--tear); mask-position: top left, left var(--tear), bottom left; mask-repeat: repeat-x, no-repeat, repeat-x; } /* Till-slip header: centred, spaced, quiet. */ .beleg-head { margin-bottom: 30px; padding-bottom: 14px; border-bottom: 1px dashed var(--border-strong); text-align: center; } .beleg-merchant, .beleg-docline { margin: 0; font-family: var(--font-family-code); text-transform: uppercase; } .beleg-merchant { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.22em; /* letter-spacing pads the right edge; pull it back so it reads as centred */ text-indent: 0.22em; color: var(--text-primary); } .beleg-docline { margin-top: 5px; font-size: 0.72rem; letter-spacing: 0.12em; color: var(--text-muted); } /* A receipt line item: label, dotted leader, value. */ .beleg-line { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 0; font-family: var(--font-family-code); font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } .beleg-dots { flex: 1; min-width: 20px; border-bottom: 1px dotted var(--border-strong); translate: 0 -0.25em; } .beleg-line time { font-variant-numeric: tabular-nums; } /* Section breaks read as the separators between line items. */ .beleg-sheet h2 { margin-top: 40px; padding-top: 26px; border-top: 1px dashed var(--border-subtle); } .beleg-sheet > h1 + .lede { margin-top: 16px; } /* The disclaimer genuinely is the fine print, so it is set as fine print. */ .beleg-sheet .disclaimer { margin-top: 44px; padding: 20px 0 0; border-left: 0; border-top: 1px dashed var(--border-strong); font-family: var(--font-family-code); font-size: 0.74rem; line-height: 1.65; text-align: center; } .beleg-sheet .disclaimer strong { display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); } /* The mid-article call to action stays, but stamped rather than printed. */ .beleg-sheet .inline-cta { border-style: dashed; } /* The index gets the catalogue number, not the whole paper treatment. */ .article-nr { font-family: var(--font-family-code); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } @media (max-width: 620px) { .beleg-sheet { padding: 38px 18px 34px; } } .privacy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; margin: 32px 0 8px; } .privacy-card { padding: 20px 22px; border-radius: var(--radius-card); border: 1px solid var(--border-subtle); background: var(--surface-panel); } .privacy-card-good { background: var(--surface-callout-success); border-color: color-mix(in srgb, var(--accent-brand) 26%, var(--border-subtle)); } .privacy-card strong { display: block; margin-bottom: 10px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--font-family-code); } .privacy-card ul { margin: 0; padding-left: 18px; font-size: 0.92rem; } /* ======================================================= 5. responsive ==== */ @media (max-width: 980px) { .site-footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .site-footer-brand { grid-column: 1 / -1; } } @media (max-width: 860px) { .hero, .page-hero { grid-template-columns: 1fr; gap: 32px; padding: 40px 0 44px; } .hero-card, .page-hero-aside { order: -1; } .steps { grid-template-columns: 1fr; } .trust-strip { grid-template-columns: repeat(2, 1fr); } .section { padding-top: 56px; } } @media (max-width: 620px) { main { padding: 0 16px; } .header-pill-shell { padding: 8px 16px; } .site-footer-inner { padding: 32px 16px 24px; } .site-footer-main { grid-template-columns: 1fr; } .trust-strip { grid-template-columns: 1fr; } .callout { padding: 24px 20px; } .cta-band-inner { padding: 36px 20px; } /* Amount and badge stack under the name — the grid gets too tight otherwise. */ .ledger-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; } .ledger-date { text-align: right; } .ledger-amount { text-align: left; } .btn { width: 100%; } .cta-row { width: 100%; } } @media (prefers-reduced-motion: no-preference) { @keyframes fade-up { from { opacity: 0; transform: translateY(10px); } } .hero-copy, .page-hero-copy { animation: fade-up 0.5s cubic-bezier(0.2, 0, 0, 1) backwards; } .hero-card, .page-hero-aside { animation: fade-up 0.5s cubic-bezier(0.2, 0, 0, 1) 0.1s backwards; } }