kantarciandClaude Opus 5
efa285c0d0
Gefunden beim Nachbau von kant-it.de: eine Website mit eigener Palette
behielt das Gruen der Vorlage. Symbole, Knoepfe, Rahmen, ruhiger Text,
Fokusring und der Einwilligungsdialog kamen aus festen Token in site.css,
die das Theme nie gesetzt hat - die Farben liessen sich einstellen und
taten nichts.
Das Theme setzt --ink, --paper, --accent, --muted, --line und --mint jetzt
selbst. Als Akzent dient die Linkfarbe, nicht ein Palettenname: das Token
faerbt auch kleine Beschriftungen, und eine helle Akzentfarbe waere dort
nicht lesbar. --muted und --line werden aus Textton und Hintergrund
gemischt; eine Palettenfarbe gleichen Namens gewinnt.
Der Einwilligungsdialog nimmt die Primaerfarbe und laesst sich eigens
faerben ueber eine Palettenfarbe mit dem Schluessel "consent".
Ausserdem aus demselben Nachbau: Ueberschriften werden nicht mehr getrennt
("di-gitale Exzellenz"), und Fliesstext auf dunkel gefaerbten Abschnitten
mischt seine Farbe aus der geerbten statt aus einem Token fuer helle
Hintergruende.
Geprueft: 381 Tests unter PHP 8.2 und 8.4, axe ohne Verstoss auf vier
Seiten des Nachbaus in Desktop- und Handybreite.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
332 lines
23 KiB
CSS
332 lines
23 KiB
CSS
@charset "UTF-8";
|
||
/* Lange Wörter dürfen umbrechen, damit nichts aus der Spalte läuft. Getrennt wird nur im
|
||
Fließtext: eine Überschrift mit Trennstrich („di-gitale") sieht nach Fehler aus. */
|
||
h1,h2,h3,h4,h5,h6,p,a{overflow-wrap:break-word}
|
||
h1,h2,h3,h4,h5,h6{hyphens:manual}
|
||
p{hyphens:auto}
|
||
.block-image{margin:0;max-width:100%}.block-image img{max-width:100%;height:auto}
|
||
:root{color-scheme:light;--paper:#f7f8f4;--ink:#182d2b;--muted:#50625d;--line:#d7dfd7;--mint:#e5f0b6;--accent:#315b49;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
|
||
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:5px}a:hover{text-decoration-thickness:2px}:focus-visible{outline:3px solid var(--accent);outline-offset:6px}main:focus{outline:none}.shell{width:min(var(--k-container,1180px),calc(100% - 64px));margin-inline:auto}.site-header{border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:28px;letter-spacing:-1.3px;text-decoration:none}.brand-icon{width:37px;height:37px;background:var(--ink);color:var(--mint);border-radius:10px;display:grid;place-items:center;margin-right:7px;font-size:27px;letter-spacing:-2px}.brand-light{font-weight:400}.site-header nav{display:flex;gap:32px;align-items:center;font-size:14px;font-weight:600}.site-header nav a{text-decoration:none;padding:12px 0}.site-header nav [aria-current=page]{text-decoration:underline}.site-header nav .nav-link{border:1px solid var(--ink);padding:13px 18px;border-radius:7px}.nav-link span{margin-left:18px}.block-section{padding:70px 0}.block-section:first-child{padding:74px 0 82px}.section-inner>.block-text:first-child{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:color-mix(in srgb,var(--accent) 68%,currentColor);margin:0 0 30px}h1,h2,h3{letter-spacing:-.05em;line-height:1.05;margin:0 0 24px}h1{font-size:clamp(48px,6.6vw,84px);font-weight:500;max-width:900px}h2{font-size:clamp(32px,4vw,49px);font-weight:500;max-width:760px}h3{font-size:26px;letter-spacing:-.035em;line-height:1.2}.block-text{font-size:18px;line-height:1.7;max-width:690px;margin:0 0 23px;color:color-mix(in srgb,currentColor 82%,transparent);white-space:pre-line}.button{display:inline-flex;align-items:center;gap:32px;min-height:50px;margin-top:9px;padding:15px 21px;background:var(--ink);color:var(--paper);border-radius:7px;text-decoration:none;font-size:14px;font-weight:600}.button:hover{background:color-mix(in srgb,var(--ink) 88%,var(--paper))}.block-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:22px;margin-top:38px;background:transparent!important}.block-column{border:1px solid var(--line);border-radius:12px;padding:30px;min-width:0}.block-column .block-text{font-size:15px}.block-column>.block-text:first-child{font-size:12px;font-weight:700;letter-spacing:1px;color:color-mix(in srgb,var(--accent) 68%,currentColor);margin-bottom:34px}.tone-mint{background:var(--mint)}.tone-ink{background:var(--ink);color:var(--paper)}.tone-ink .block-text{color:color-mix(in srgb,var(--paper) 86%,var(--ink))}.tone-ink .section-inner>.block-text:first-child{color:var(--mint)}.tone-ink .button{color:var(--ink);background:var(--mint)}.width-narrow>.section-inner{max-width:800px}.site-footer{border-top:1px solid var(--line)}.site-footer p,.site-footer>span{font-size:12px;color:var(--muted)}.site-footer .brand{font-size:22px}.skip-link{position:fixed;left:16px;top:-100px;z-index:10;background:var(--ink);color:white;padding:16px}.skip-link:focus{top:16px}img{display:block;max-width:100%;height:auto;border-radius:12px}.error-page{padding-block:100px}.error-page h1{max-width:800px}
|
||
@media(max-width:650px){.shell{width:calc(100% - 36px)}.site-header nav{width:100%;justify-content:space-between;gap:12px;font-size:12px}.site-header nav .nav-link{padding:10px}.nav-link span{margin-left:6px}.block-section,.block-section:first-child{padding-block:48px}h1{font-size:49px}.block-text{font-size:16px}.block-column{padding:26px}.site-footer{align-items:flex-start;flex-direction:column;gap:10px}.site-footer p{margin:0}.block-row{gap:16px}}
|
||
|
||
/* Menus. Submenus open with details/summary, so the navigation works without JavaScript. */
|
||
.menu-list{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px;margin:0;padding:0}
|
||
.menu-list a{text-decoration:none;padding:6px 2px;display:inline-block}
|
||
.menu-list a:hover,.menu-list summary:hover{text-decoration:underline}
|
||
.menu-list [aria-current=page]{font-weight:700;text-decoration:underline;text-underline-offset:6px}
|
||
.menu-branch>summary{cursor:pointer;padding:6px 2px;list-style:none}
|
||
.menu-branch>summary::after{content:' ▾'}
|
||
.menu-branch[open]>summary::after{content:' ▴'}
|
||
.menu-branch-body{display:grid;gap:2px;padding:6px 0 6px 14px}
|
||
.menu-level-2{flex-direction:column;align-items:flex-start;gap:2px}
|
||
|
||
/* Posts */
|
||
.post-list{list-style:none;margin:0;padding:0;display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
|
||
.post-card{display:flex;flex-direction:column;gap:14px}
|
||
.post-image img{width:100%;height:210px;object-fit:cover;border-radius:10px;display:block}
|
||
.post-card h3{margin:0;font-size:19px;line-height:1.35}
|
||
.post-card h3 a{text-decoration:none}
|
||
.post-card h3 a:hover{text-decoration:underline}
|
||
.post-meta,.post-header{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;font-size:13px;margin:0}
|
||
.post-header{padding-block:22px 0}
|
||
.post-excerpt{margin:0;line-height:1.65}
|
||
.post-terms{display:flex;flex-wrap:wrap;gap:8px;margin:0;font-size:13px}
|
||
.post-empty{padding:26px;border:1px dashed currentColor;border-radius:10px}
|
||
.pagination{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:38px;padding-top:22px;border-top:1px solid currentColor;font-size:14px}
|
||
.post-terms-label{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:10px}
|
||
|
||
/* Blocks introduced with schema v6. No JavaScript: the accordion is details/summary. */
|
||
.block-icon{flex-shrink:0;display:block}
|
||
.block-iconcard{display:grid;gap:12px;padding:26px;border:1px solid currentColor;border-radius:12px}
|
||
.block-iconcard h3{margin:0;font-size:19px;line-height:1.3}
|
||
.block-iconcard h3 a{text-decoration:none}
|
||
.block-iconcard h3 a:hover{text-decoration:underline}
|
||
.block-iconcard p{margin:0;line-height:1.65}
|
||
.block-stat{display:grid;gap:4px;margin:0}
|
||
.block-stat strong{font-size:44px;font-weight:600;line-height:1.05;letter-spacing:-1.5px}
|
||
.block-stat span{font-size:14px;line-height:1.5}
|
||
.block-quote{margin:0;display:grid;gap:14px;padding:28px;border:1px solid currentColor;border-radius:12px}
|
||
.block-quote blockquote{margin:0}
|
||
.block-quote blockquote p{margin:0;font-size:18px;line-height:1.65}
|
||
.block-quote figcaption{font-size:14px;font-weight:600}
|
||
.block-quote figcaption span{font-weight:400;opacity:.85}
|
||
.quote-rating{margin:0;letter-spacing:3px}
|
||
.block-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));align-items:center;gap:24px}
|
||
.block-logos img{max-height:52px;width:auto;margin-inline:auto;display:block}
|
||
.block-cta{display:flex;flex-wrap:wrap;gap:20px 34px;align-items:center;justify-content:space-between;padding:32px;border:1px solid currentColor;border-radius:14px}
|
||
.block-cta h2{margin:0 0 6px;font-size:26px;letter-spacing:-.6px}
|
||
.block-cta p{margin:0;line-height:1.6}
|
||
.block-contact{display:grid;gap:14px;font-style:normal}
|
||
.block-contact span{display:flex;align-items:center;gap:12px;line-height:1.5}
|
||
.block-divider{border:0;border-top:1px solid currentColor;opacity:.35;margin:0}
|
||
.block-spacer{display:block}
|
||
.spacer-small{height:18px}.spacer-medium{height:38px}.spacer-large{height:68px}.spacer-huge{height:110px}
|
||
.block-accordion{display:grid;gap:10px}
|
||
.block-accordionitem{border:1px solid currentColor;border-radius:10px;padding:4px 18px}
|
||
.block-accordionitem>summary{cursor:pointer;padding:15px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center}
|
||
.block-accordionitem>summary::after{content:'+';font-size:22px;line-height:1}
|
||
.block-accordionitem[open]>summary::after{content:'–'}
|
||
.accordion-body{padding-bottom:16px}
|
||
|
||
/* Tabs. Rendered as an anchor list plus all panels; tabs.js upgrades them to a tab widget. */
|
||
.tabs-nav{list-style:none;display:flex;flex-wrap:wrap;gap:4px;margin:0 0 22px;padding:0;border-bottom:1px solid currentColor}
|
||
.tabs-nav a{display:inline-block;padding:12px 18px;text-decoration:none;border:1px solid transparent;border-bottom:0;border-radius:9px 9px 0 0;margin-bottom:-1px;font-weight:600}
|
||
.tabs-nav a:hover{background:#0000000a}
|
||
.tabs-nav [aria-selected=true]{border-color:currentColor;background:#fff}
|
||
.tabs-ready .tabs-nav a{cursor:pointer}
|
||
.block-tabitem{padding-block:4px}
|
||
.block-tabitem:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
|
||
.tabs-heading{margin:0 0 12px;font-size:17px}
|
||
|
||
/* Forms. Server rendered, no JavaScript; every message sits at its field. */
|
||
.block-form{display:grid;gap:20px;max-width:640px}
|
||
.form-field{display:grid;gap:7px}
|
||
.form-field label{font-weight:600;font-size:14px}
|
||
.form-field input,.form-field textarea,.form-field select{width:100%;padding:12px 13px;border:1px solid currentColor;border-radius:8px;background:#fff;color:inherit;font:inherit;min-height:46px}
|
||
.form-field textarea{min-height:140px;line-height:1.6;resize:vertical}
|
||
.has-error input,.has-error textarea,.has-error select{border-width:2px;border-color:#8b2f22}
|
||
.field-error{margin:0;font-size:13px;font-weight:600;color:#8b2f22}
|
||
.field-note{margin:0;font-size:13px;opacity:.8}
|
||
.form-error-summary{margin:0;padding:14px 18px;border-radius:8px;background:#fff0eb;color:#8b2f22;border:1px solid #e2b2a7;font-weight:600}
|
||
.form-success{margin:0;padding:16px 20px;border-radius:8px;background:color-mix(in srgb,var(--accent) 10%,var(--paper));color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--paper));font-weight:600}
|
||
.form-missing{margin:0;padding:14px 18px;border:1px dashed currentColor;border-radius:8px}
|
||
.check-row{display:flex;align-items:flex-start;gap:11px}
|
||
.check-row input{width:20px;min-height:20px;flex-shrink:0;margin-top:3px}
|
||
.check-row label{font-weight:400;line-height:1.55}
|
||
.required-mark{color:#8b2f22}
|
||
/* Off screen rather than display:none so a filled value still proves automation. */
|
||
.form-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
|
||
|
||
.block-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px 10px;margin:0;padding:0;font-size:13px}
|
||
.block-breadcrumb li+li::before{content:'›';margin-right:10px;opacity:.6}
|
||
.block-breadcrumb a{text-decoration:none}
|
||
.block-breadcrumb a:hover{text-decoration:underline}
|
||
|
||
/* The column rules above were written for a flat section > text structure and set a colour meant
|
||
for light backgrounds. Inside a dark tone they won on specificity, so text in a dark column was
|
||
unreadable - 1.87:1 in the seeded footer. These two selectors match that specificity and come
|
||
later, so the dark tone wins where it has to. */
|
||
.tone-ink .block-column .block-text,
|
||
.tone-ink .block-column>.block-text:first-child{color:color-mix(in srgb,var(--paper) 86%,var(--ink))}
|
||
|
||
/* The consent question. Fixed to the bottom, but it never covers the whole page: the content
|
||
stays readable while the decision is open, because a wall would make "accept" the only way
|
||
forward. Accepting and refusing are the same button in the same row. */
|
||
.consent-bar{position:fixed;inset-inline:12px;bottom:12px;z-index:50;max-width:620px;margin-inline:auto;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:20px 22px;box-shadow:0 18px 50px color-mix(in srgb,var(--ink) 15%,transparent);font-size:14px;line-height:1.6}
|
||
.consent-bar h2{font-size:16px;margin:0 0 8px}
|
||
.consent-bar p{margin:0 0 14px}
|
||
.consent-actions{display:flex;flex-wrap:wrap;gap:10px}
|
||
.consent-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 18px;border-radius:8px;border:1px solid var(--k-consent,var(--accent));background:var(--k-consent,var(--accent));color:#fff;font:inherit;font-weight:600;cursor:pointer}
|
||
.consent-actions .consent-button:last-child{background:var(--paper);color:var(--ink);border-color:var(--line)}
|
||
.consent-button:hover{filter:brightness(.94)}
|
||
.consent-button:focus-visible,.consent-bar a:focus-visible,.consent-bar summary:focus-visible,.consent-bar input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
|
||
.consent-details{margin-top:14px}
|
||
.consent-details>summary{cursor:pointer;font-size:13px;font-weight:600;padding:4px 0}
|
||
.consent-groups{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
|
||
.consent-groups label{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5}
|
||
.consent-groups input{margin-top:3px;width:18px;height:18px;flex-shrink:0}
|
||
.consent-choice{margin-top:14px;background:var(--paper);color:var(--ink);border-color:var(--line)}
|
||
.consent-links{margin:14px 0 0;font-size:12px}
|
||
.consent-links a{color:var(--accent)}
|
||
/* While the question is open the bar is fixed at the bottom, so the page has to end above it -
|
||
otherwise it covers the last element, and an embed's own consent button sat right underneath.
|
||
Found by the browser test, which could not click it. */
|
||
body.consent-open{padding-bottom:260px}
|
||
@media (min-width:900px){body.consent-open{padding-bottom:200px}}
|
||
.consent-page main{max-width:680px;margin-inline:auto;padding:40px 20px}
|
||
.consent-page .consent-bar{position:static;inset:auto;box-shadow:none;max-width:none;margin-top:24px}
|
||
@media (max-width:620px){.consent-bar{inset-inline:0;bottom:0;border-radius:14px 14px 0 0;padding:16px}.consent-actions .consent-button{flex:1 1 140px}}
|
||
|
||
/* An embedded third party, and what stands in its place until it may load. */
|
||
.block-embed iframe{display:block;width:100%;border:0;border-radius:10px;background:color-mix(in srgb,var(--ink) 8%,var(--paper))}
|
||
.embed-blocked{border:1px dashed var(--line);border-radius:10px;padding:24px;background:color-mix(in srgb,var(--ink) 4%,var(--paper));text-align:center}
|
||
.embed-title{margin:0 0 8px;font-weight:600}
|
||
.embed-hint{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--muted)}
|
||
.embed-provider{margin:0 0 16px;font-size:13px;color:var(--muted)}
|
||
|
||
/* Header and footer hold block documents of their own (ADR 026). They are therefore ordinary
|
||
block containers - as flex containers they shrank the section inside them until a single word
|
||
wrapped one letter per line. Their sections are chrome, not articles, so they sit tighter than
|
||
a section in the page body, and their rows keep their columns side by side. */
|
||
.site-header .block-section,
|
||
.site-footer .block-section{padding-block:20px}
|
||
.site-header .block-row,
|
||
.site-footer .block-row{margin-top:0;align-items:center}
|
||
.site-header .block-column,
|
||
.site-footer .block-column{border:0;border-radius:0;padding:0}
|
||
.site-header .block-text,
|
||
.site-footer .block-text{margin:0}
|
||
/* Size and weight only, never colour: the tone of the area decides that, and a colour here won
|
||
against .tone-ink and put 2.24:1 grey text on the dark footer. The browser check caught it. */
|
||
.site-header .block-column>.block-text:first-child{font-size:24px;font-weight:800;letter-spacing:-1px;text-transform:none;margin:0}
|
||
.site-footer .block-column>.block-text:first-child{font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;margin:0}
|
||
/* One landmark for the three links that must be on every page. Loose text outside a landmark is
|
||
also what axe objects to, and rightly: a screen reader then has no way to skip to it. */
|
||
.legal-bar{padding:16px 20px;text-align:center;font-size:12px;color:var(--muted);background:color-mix(in srgb,var(--ink) 6%,var(--paper))}
|
||
.legal-bar a{color:var(--accent)}
|
||
|
||
/* An image takes the rounding of its figure. Without this a radius on an image block rounded the
|
||
figure and left the picture square - which looked like the setting did nothing. */
|
||
.block-image img, .block-gallery img, .block-logos img { border-radius: inherit }
|
||
|
||
/* A single icon, sized by class because inline styles are forbidden by the policy. */
|
||
.block-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--accent);line-height:0}
|
||
.block-icon svg{width:100%;height:100%;display:block}
|
||
.icon-size-12{width:12px;height:12px}.icon-size-16{width:16px;height:16px}.icon-size-20{width:20px;height:20px}
|
||
.icon-size-24{width:24px;height:24px}.icon-size-32{width:32px;height:32px}.icon-size-40{width:40px;height:40px}
|
||
.icon-size-48{width:48px;height:48px}.icon-size-56{width:56px;height:56px}.icon-size-64{width:64px;height:64px}
|
||
.icon-size-80{width:80px;height:80px}.icon-size-96{width:96px;height:96px}.icon-size-120{width:120px;height:120px}
|
||
.icon-size-160{width:160px;height:160px}.icon-size-200{width:200px;height:200px}.icon-size-240{width:240px;height:240px}
|
||
|
||
/* A progress bar. The value is a class, not an inline style, for the same reason. */
|
||
.block-progress{margin:0 0 22px}
|
||
.progress-label{display:flex;justify-content:space-between;gap:16px;margin:0 0 8px;font-size:14px;font-weight:600}
|
||
.progress-value{color:var(--muted);font-weight:400}
|
||
.progress-track{height:10px;border-radius:999px;background:color-mix(in srgb,var(--ink) 12%,var(--paper));overflow:hidden}
|
||
.progress-fill{height:100%;border-radius:999px;background:var(--accent)}
|
||
.tone-ink .progress-track{background:#ffffff26}
|
||
.tone-ink .progress-fill{background:var(--mint)}
|
||
|
||
/* A slider without a script: a scroll container with snapping. It keeps working when snapping is
|
||
unsupported - then it is a strip you can scroll. No autoplay, ever. */
|
||
.block-slider{display:grid;grid-auto-flow:column;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:12px;scrollbar-gutter:stable}
|
||
.block-slider.slider-snap{scroll-snap-type:x mandatory}
|
||
.slider-snap>.slider-slide{scroll-snap-align:start}
|
||
.slider-slide{min-width:0}
|
||
.block-slider:focus-visible{outline:3px solid var(--accent);outline-offset:6px}
|
||
.slide-desktop-1{grid-auto-columns:100%}.slide-desktop-2{grid-auto-columns:calc(50% - 10px)}
|
||
.slide-desktop-3{grid-auto-columns:calc(33.333% - 14px)}.slide-desktop-4{grid-auto-columns:calc(25% - 15px)}
|
||
.slide-desktop-5{grid-auto-columns:calc(20% - 16px)}.slide-desktop-6{grid-auto-columns:calc(16.666% - 17px)}
|
||
@media (max-width:1024px){
|
||
.slide-tablet-1{grid-auto-columns:100%}.slide-tablet-2{grid-auto-columns:calc(50% - 10px)}
|
||
.slide-tablet-3{grid-auto-columns:calc(33.333% - 14px)}.slide-tablet-4{grid-auto-columns:calc(25% - 15px)}
|
||
.slide-tablet-5{grid-auto-columns:calc(20% - 16px)}.slide-tablet-6{grid-auto-columns:calc(16.666% - 17px)}
|
||
}
|
||
@media (max-width:650px){
|
||
.slide-mobile-1{grid-auto-columns:100%}.slide-mobile-2{grid-auto-columns:calc(50% - 10px)}
|
||
.slide-mobile-3{grid-auto-columns:calc(33.333% - 14px)}.slide-mobile-4{grid-auto-columns:calc(25% - 15px)}
|
||
.slide-mobile-5{grid-auto-columns:calc(20% - 16px)}.slide-mobile-6{grid-auto-columns:calc(16.666% - 17px)}
|
||
}
|
||
.progress-fill-0{width:0%}
|
||
.progress-fill-1{width:1%}
|
||
.progress-fill-2{width:2%}
|
||
.progress-fill-3{width:3%}
|
||
.progress-fill-4{width:4%}
|
||
.progress-fill-5{width:5%}
|
||
.progress-fill-6{width:6%}
|
||
.progress-fill-7{width:7%}
|
||
.progress-fill-8{width:8%}
|
||
.progress-fill-9{width:9%}
|
||
.progress-fill-10{width:10%}
|
||
.progress-fill-11{width:11%}
|
||
.progress-fill-12{width:12%}
|
||
.progress-fill-13{width:13%}
|
||
.progress-fill-14{width:14%}
|
||
.progress-fill-15{width:15%}
|
||
.progress-fill-16{width:16%}
|
||
.progress-fill-17{width:17%}
|
||
.progress-fill-18{width:18%}
|
||
.progress-fill-19{width:19%}
|
||
.progress-fill-20{width:20%}
|
||
.progress-fill-21{width:21%}
|
||
.progress-fill-22{width:22%}
|
||
.progress-fill-23{width:23%}
|
||
.progress-fill-24{width:24%}
|
||
.progress-fill-25{width:25%}
|
||
.progress-fill-26{width:26%}
|
||
.progress-fill-27{width:27%}
|
||
.progress-fill-28{width:28%}
|
||
.progress-fill-29{width:29%}
|
||
.progress-fill-30{width:30%}
|
||
.progress-fill-31{width:31%}
|
||
.progress-fill-32{width:32%}
|
||
.progress-fill-33{width:33%}
|
||
.progress-fill-34{width:34%}
|
||
.progress-fill-35{width:35%}
|
||
.progress-fill-36{width:36%}
|
||
.progress-fill-37{width:37%}
|
||
.progress-fill-38{width:38%}
|
||
.progress-fill-39{width:39%}
|
||
.progress-fill-40{width:40%}
|
||
.progress-fill-41{width:41%}
|
||
.progress-fill-42{width:42%}
|
||
.progress-fill-43{width:43%}
|
||
.progress-fill-44{width:44%}
|
||
.progress-fill-45{width:45%}
|
||
.progress-fill-46{width:46%}
|
||
.progress-fill-47{width:47%}
|
||
.progress-fill-48{width:48%}
|
||
.progress-fill-49{width:49%}
|
||
.progress-fill-50{width:50%}
|
||
.progress-fill-51{width:51%}
|
||
.progress-fill-52{width:52%}
|
||
.progress-fill-53{width:53%}
|
||
.progress-fill-54{width:54%}
|
||
.progress-fill-55{width:55%}
|
||
.progress-fill-56{width:56%}
|
||
.progress-fill-57{width:57%}
|
||
.progress-fill-58{width:58%}
|
||
.progress-fill-59{width:59%}
|
||
.progress-fill-60{width:60%}
|
||
.progress-fill-61{width:61%}
|
||
.progress-fill-62{width:62%}
|
||
.progress-fill-63{width:63%}
|
||
.progress-fill-64{width:64%}
|
||
.progress-fill-65{width:65%}
|
||
.progress-fill-66{width:66%}
|
||
.progress-fill-67{width:67%}
|
||
.progress-fill-68{width:68%}
|
||
.progress-fill-69{width:69%}
|
||
.progress-fill-70{width:70%}
|
||
.progress-fill-71{width:71%}
|
||
.progress-fill-72{width:72%}
|
||
.progress-fill-73{width:73%}
|
||
.progress-fill-74{width:74%}
|
||
.progress-fill-75{width:75%}
|
||
.progress-fill-76{width:76%}
|
||
.progress-fill-77{width:77%}
|
||
.progress-fill-78{width:78%}
|
||
.progress-fill-79{width:79%}
|
||
.progress-fill-80{width:80%}
|
||
.progress-fill-81{width:81%}
|
||
.progress-fill-82{width:82%}
|
||
.progress-fill-83{width:83%}
|
||
.progress-fill-84{width:84%}
|
||
.progress-fill-85{width:85%}
|
||
.progress-fill-86{width:86%}
|
||
.progress-fill-87{width:87%}
|
||
.progress-fill-88{width:88%}
|
||
.progress-fill-89{width:89%}
|
||
.progress-fill-90{width:90%}
|
||
.progress-fill-91{width:91%}
|
||
.progress-fill-92{width:92%}
|
||
.progress-fill-93{width:93%}
|
||
.progress-fill-94{width:94%}
|
||
.progress-fill-95{width:95%}
|
||
.progress-fill-96{width:96%}
|
||
.progress-fill-97{width:97%}
|
||
.progress-fill-98{width:98%}
|
||
.progress-fill-99{width:99%}
|
||
.progress-fill-100{width:100%}
|
||
|
||
/* Section widths. "wide" only widens the content, "full" removes the container entirely: that is
|
||
what a picture or a colour field from edge to edge needs. A full width section drops its own
|
||
padding as well, otherwise "edge to edge" would still have 32 pixels of air on each side. */
|
||
.width-wide>.section-inner{width:min(1600px,calc(100% - 64px))}
|
||
.width-full>.section-inner{width:100%;max-width:none;margin-inline:0}
|
||
@media (max-width:650px){.width-wide>.section-inner{width:calc(100% - 36px)}}
|
||
|
||
/* A section that is a flex container centres its content box; the inner container must then be
|
||
allowed to grow, or a full height section would show a strip in the middle. */
|
||
.block-section>.section-inner{flex:1 1 auto}
|
||
|
||
/* Menu kinds. Horizontal is the default; vertical stacks; burger is a details element, so it
|
||
opens without a script - a menu that needs one would not open on a page that runs none. */
|
||
.menu-vertical .menu-list{flex-direction:column;align-items:flex-start;gap:6px}
|
||
.menu-burger>summary{display:inline-flex;align-items:center;gap:10px;cursor:pointer;padding:10px 14px;border:1px solid currentColor;border-radius:8px;font-size:14px;font-weight:600;list-style:none}
|
||
.menu-burger>summary::-webkit-details-marker{display:none}
|
||
.burger-lines{position:relative;width:18px;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
|
||
.menu-burger[open]>summary{border-radius:8px 8px 0 0}
|
||
.menu-burger-body{padding:14px 0 4px}
|
||
.menu-burger-body .menu-list{flex-direction:column;align-items:flex-start;gap:8px}
|