/* AnimalWiki — design system * * One stylesheet for the whole encyclopedia. It is deliberately a single file * with no build step: every page links it, so it is fetched once and cached, * and the several hundred thousand generated pages stay as small as possible. * * Layout is a two-column article/aside on wide screens and a single stacked * column below 900px. Colour is driven by two things: a paper/ink palette that * flips with the colour scheme, and a per-rank accent hue set on by the * generator, so a page's rank is legible at a glance without reading a word. */ :root { color-scheme: light dark; --hue: 150; /* overridden per rank on */ --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-text: ui-serif, Georgia, Cambria, "Times New Roman", serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --paper: hsl(40 36% 97%); --paper-2: hsl(40 30% 94%); --paper-3: hsl(40 24% 90%); --ink: hsl(30 12% 14%); --ink-2: hsl(30 8% 36%); --ink-3: hsl(30 6% 52%); --rule: hsl(38 20% 85%); --accent: hsl(var(--hue) 52% 34%); --accent-2: hsl(var(--hue) 46% 94%); --accent-ink: hsl(var(--hue) 60% 26%); --shadow: 0 1px 2px hsl(35 20% 40% / .08), 0 8px 24px -12px hsl(35 20% 30% / .18); --measure: 74ch; --radius: 10px; --gap: clamp(1rem, 2.5vw, 2rem); } @media (prefers-color-scheme: dark) { :root { --paper: hsl(220 18% 10%); --paper-2: hsl(220 16% 13%); --paper-3: hsl(220 14% 17%); --ink: hsl(40 20% 92%); --ink-2: hsl(40 10% 72%); --ink-3: hsl(40 8% 56%); --rule: hsl(220 12% 24%); --accent: hsl(var(--hue) 58% 68%); --accent-2: hsl(var(--hue) 34% 18%); --accent-ink: hsl(var(--hue) 62% 78%); --shadow: 0 1px 2px hsl(0 0% 0% / .4), 0 8px 24px -12px hsl(0 0% 0% / .7); } } /* The header toggle stamps data-theme on ; it must beat the media query in both directions, so both are declared explicitly. */ :root[data-theme="light"] { --paper: hsl(40 36% 97%); --paper-2: hsl(40 30% 94%); --paper-3: hsl(40 24% 90%); --ink: hsl(30 12% 14%); --ink-2: hsl(30 8% 36%); --ink-3: hsl(30 6% 52%); --rule: hsl(38 20% 85%); --accent: hsl(var(--hue) 52% 34%); --accent-2: hsl(var(--hue) 46% 94%); --accent-ink: hsl(var(--hue) 60% 26%); --shadow: 0 1px 2px hsl(35 20% 40% / .08), 0 8px 24px -12px hsl(35 20% 30% / .18); } :root[data-theme="dark"] { --paper: hsl(220 18% 10%); --paper-2: hsl(220 16% 13%); --paper-3: hsl(220 14% 17%); --ink: hsl(40 20% 92%); --ink-2: hsl(40 10% 72%); --ink-3: hsl(40 8% 56%); --rule: hsl(220 12% 24%); --accent: hsl(var(--hue) 58% 68%); --accent-2: hsl(var(--hue) 34% 18%); --accent-ink: hsl(var(--hue) 62% 78%); --shadow: 0 1px 2px hsl(0 0% 0% / .4), 0 8px 24px -12px hsl(0 0% 0% / .7); } /* per-rank accent hues, matching tools/aw/model.py */ html[data-rank="domain"] { --hue: 268; } html[data-rank="kingdom"] { --hue: 244; } html[data-rank="phylum"] { --hue: 210; } html[data-rank="class"] { --hue: 190; } html[data-rank="order"] { --hue: 168; } html[data-rank="family"] { --hue: 138; } html[data-rank="genus"] { --hue: 44; } html[data-rank="species"] { --hue: 18; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.65 var(--font-ui); text-rendering: optimizeLegibility; } a { color: var(--accent-ink); text-decoration-thickness: .06em; text-underline-offset: .18em; } a:hover { text-decoration-thickness: .12em; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: var(--paper); padding: .6rem 1rem; border-radius: 0 0 var(--radius) 0; } .skip:focus { left: 0; } :where(a, button, input, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ---------------------------------------------------------------- header */ .top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 1rem; padding: .55rem var(--gap); background: color-mix(in oklab, var(--paper) 88%, transparent); backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--rule); } .brand { display: inline-flex; align-items: center; font-weight: 700; letter-spacing: -.015em; font-size: 1.05rem; color: var(--ink); text-decoration: none; white-space: nowrap; } .brand::before { content: ""; width: 1.35rem; height: 1.35rem; flex: none; border-radius: 5px; margin-right: .5rem; background: var(--accent) no-repeat center/72% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 21V9M12 9 6 4M12 9l6-5M6 4v6M18 4v6'/%3E%3C/svg%3E"); } .brand b { color: var(--accent-ink); font-weight: 700; } .top nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; } .top nav a { color: var(--ink-2); text-decoration: none; padding: .35rem .6rem; border-radius: 6px; font-size: .9rem; white-space: nowrap; } .top nav a:hover { background: var(--paper-3); color: var(--ink); } /* Narrow screens give the room to the search box, which is what the header is mostly for: first the secondary links go, then the wordmark beside the mark. */ @media (max-width: 720px) { .top nav a.opt { display: none; } } @media (max-width: 480px) { .brand .wordmark { display: none; } .brand::before { margin-right: 0; } } #theme { border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink-2); width: 2rem; height: 2rem; border-radius: 6px; cursor: pointer; font-size: .9rem; display: grid; place-items: center; } #theme:hover { color: var(--ink); border-color: var(--ink-3); } /* ---------------------------------------------------------------- search */ .search { position: relative; flex: 1 1 auto; max-width: 34rem; } .search input { width: 100%; font: inherit; font-size: .92rem; padding: .45rem .75rem .45rem 2rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper-2) no-repeat .55rem center/1rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); color: var(--ink); } .search input::placeholder { color: var(--ink-3); } .search input:focus { border-color: var(--accent); background-color: var(--paper); } /* The results pane is shared by the header box and the big box on the front page, so it is styled by class; both instances carry it. */ .results { position: absolute; top: calc(100% + .4rem); left: 0; right: 0; z-index: 30; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); max-height: min(70vh, 30rem); overflow-y: auto; padding: .3rem; } .results:empty { display: none; } .results a { display: block; padding: .4rem .6rem; border-radius: 6px; text-decoration: none; color: var(--ink); line-height: 1.35; } .results a:hover, .results a[aria-selected="true"] { background: var(--accent-2); } .results .sci { font-family: var(--font-text); font-style: italic; } .vern-h { color: var(--ink-3); font-weight: 400; } .vern-sub { margin: -.2rem 0 .9rem; color: var(--ink-3); font-size: 1.05rem; } .rankline { text-align: center; margin: 0 0 .8rem; } #refs:empty, #refs h2:only-child { display: none; } .results .meta { display: block; font-size: .74rem; color: var(--ink-3); font-style: normal; } .results .hint { padding: .5rem .6rem; color: var(--ink-3); font-size: .82rem; } /* ---------------------------------------------------------- breadcrumbs */ .crumbs { padding: .5rem var(--gap) 0; font-size: .8rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: .3rem; align-items: baseline; } .crumbs a { color: var(--ink-2); text-decoration: none; } .crumbs a:hover { color: var(--accent-ink); text-decoration: underline; } .crumbs span[aria-hidden] { opacity: .5; } /* ------------------------------------------------------------- layout */ main { max-width: 78rem; margin: 0 auto; padding: 1rem var(--gap) 4rem; display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } @media (max-width: 900px) { main { grid-template-columns: minmax(0, 1fr); } } article { min-width: 0; } article > *:first-child { margin-top: 0; } h1 { font: 700 clamp(1.85rem, 1.2rem + 2vw, 2.7rem)/1.15 var(--font-text); letter-spacing: -.02em; margin: .2rem 0 .35rem; } h1 em { font-style: italic; } h2 { font: 600 1.3rem/1.3 var(--font-text); letter-spacing: -.01em; margin: 2.2rem 0 .7rem; padding-bottom: .3rem; border-bottom: 1px solid var(--rule); } h3 { font: 600 1.05rem/1.35 var(--font-ui); margin: 1.6rem 0 .5rem; } h4, h5, h6 { font: 600 .95rem/1.4 var(--font-ui); margin: 1.3rem 0 .4rem; color: var(--ink-2); } article p { max-width: var(--measure); margin: 0 0 1rem; } article ul, article ol { max-width: var(--measure); padding-left: 1.3rem; margin: 0 0 1rem; } article li { margin: .18rem 0; } article li::marker { color: var(--ink-3); } .lede { font-family: var(--font-text); font-size: 1.12rem; color: var(--ink-2); } .lede strong { color: var(--ink); } blockquote { margin: 1rem 0; padding: .1rem 1rem; border-left: 3px solid var(--accent); color: var(--ink-2); background: var(--paper-2); border-radius: 0 6px 6px 0; } code { font: .88em var(--font-mono); background: var(--paper-3); padding: .1em .35em; border-radius: 4px; } pre { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: .9rem 1rem; overflow-x: auto; } pre code { background: none; padding: 0; font-size: .85rem; } hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; } img { max-width: 100%; height: auto; border-radius: var(--radius); } /* -------------------------------------------------------------- tables */ .table-wrap { overflow-x: auto; margin: 0 0 1.2rem; border: 1px solid var(--rule); border-radius: var(--radius); } table { border-collapse: collapse; width: 100%; font-size: .92rem; } th, td { padding: .45rem .8rem; border-bottom: 1px solid var(--rule); text-align: left; } td.num, th.num { text-align: right; } thead th { background: var(--paper-2); font-weight: 600; font-size: .8rem; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); } tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; } tbody tr:hover { background: var(--paper-2); } /* --------------------------------------------------------------- aside */ aside { position: sticky; top: 4rem; display: grid; gap: 1rem; } @media (max-width: 900px) { aside { position: static; } } .card { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); } .card h2 { font: 600 .78rem/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 0 0 .7rem; padding: 0; border: 0; } .card + .card { margin-top: 0; } .crest { display: block; width: 100%; max-width: 12rem; margin: 0 auto .8rem; } .rank-badge { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px; background: var(--accent-2); color: var(--accent-ink); border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); } dl.facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; font-size: .87rem; } dl.facts dt { color: var(--ink-3); } dl.facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; } dl.facts dd em { font-family: var(--font-text); } /* The Red List category, spelled out rather than abbreviated: "Vulnerable" tells a reader something, "VU" only tells someone who already knows. */ .iucn { display: inline-block; text-align: right; font-weight: 700; font-size: .72rem; letter-spacing: .02em; line-height: 1.5; padding: .1rem .45rem; border-radius: 5px; color: #fff; } .iucn[data-c="EX"], .iucn[data-c="EW"] { background: #3b1f2b; } .iucn[data-c="CR"] { background: #a3261f; } .iucn[data-c="EN"] { background: #c4691c; } .iucn[data-c="VU"] { background: #b08900; } .iucn[data-c="NT"] { background: #5f7c1f; } .iucn[data-c="LC"] { background: #3f7d3f; } .iucn[data-c="DD"], .iucn[data-c="NE"] { background: #6b6b6b; } .linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .88rem; } .linklist a { text-decoration: none; } .linklist a:hover { text-decoration: underline; } .linklist a::after { content: " ↗"; font-size: .75em; color: var(--ink-3); } .linklist a.internal::after { content: none; } .edit { display: block; text-align: center; font-size: .85rem; text-decoration: none; padding: .5rem; border: 1px dashed var(--rule); border-radius: 8px; color: var(--ink-2); } .edit:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-2); } /* -------------------------------------------------------------- photos */ /* Every photograph on the site is hotlinked from iNaturalist Open Data and carries its photographer and licence in the caption. Sizes are fixed so the layout does not jump while images load. */ .photo { margin: 0 0 .9rem; } .photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--paper-3); } .photo figcaption { font-size: .7rem; color: var(--ink-3); margin-top: .35rem; text-align: center; line-height: 1.4; } .photo figcaption a { color: var(--ink-3); text-decoration: underline; } .photo figcaption a:hover { color: var(--accent-ink); } /* ---------------------------------------------------------- child grid */ .children { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); max-width: none; } .children li { margin: 0; } .children a { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .45rem .7rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper-2); text-decoration: none; color: var(--ink); } .children a:hover { border-color: var(--accent); background: var(--accent-2); } /* Thumbnail variants used on the home page and on list pages. The name sits next to its photograph rather than being pushed to the far edge; only the species count, where there is one, is flushed right. */ .children.thumbs a { align-items: center; gap: .65rem; padding: .4rem .6rem; justify-content: flex-start; } .children.thumbs b { margin-left: auto; } .children.thumbs img { width: 2.6rem; height: 2.6rem; flex: none; border-radius: 6px; object-fit: cover; background: var(--paper-3); } .children.feature { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); } .children.feature img { width: 3.1rem; height: 3.1rem; } .children.feature i { font-family: var(--font-text); font-style: italic; } /* The two single-entry ranks at the top of the front page. */ .children.ladder { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } .children.ladder a { padding: .8rem 1rem; font-size: 1.05rem; } .children.ladder .rk { display: block; font: 600 .68rem/1.4 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: .1rem; } section.phyla { grid-column: 1 / -1; margin-top: 2.2rem; } section.phyla > .lede { margin-bottom: 1rem; } .children b { font-size: .76rem; color: var(--ink-3); font-weight: 400; font-variant-numeric: tabular-nums; flex: none; } .children i { font-family: var(--font-text); font-style: italic; } .children .vern { display: block; font-size: .76rem; color: var(--ink-3); } .more { color: var(--ink-3); font-size: .88rem; margin-top: .8rem; } /* On the home page each phylum card carries a share-of-diversity bar, so the border moves to the list item and the link inside it goes flat. */ .phyla .children li { border: 1px solid var(--rule); border-radius: 8px; background: var(--paper-2); overflow: hidden; } .phyla .children a { border: 0; background: none; border-radius: 0; } .phyla .children a:hover { background: var(--accent-2); } .phyla .bar { margin: 0 .7rem .6rem; } /* -------------------------------------------------------------- home * * The front page is the one page on the site written for someone who has not * come looking for a taxonomy. It leads with a photograph of an animal in * every card it can, names things the way a reader would say them out loud, * and keeps the scientific name as the second line rather than the first. */ .hero { grid-column: 1 / -1; margin: .4rem 0 2.2rem; padding: clamp(1.6rem, 3.6vw, 2.8rem) clamp(1.1rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.2rem); border: 1px solid var(--rule); border-radius: 18px; text-align: center; background: radial-gradient(115% 130% at 8% -10%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 58%), radial-gradient(95% 120% at 102% 0%, color-mix(in oklab, hsl(28 85% 55%) 18%, transparent), transparent 52%), var(--paper-2); } .hero h1 { font-size: clamp(2rem, 1.1rem + 3.9vw, 3.5rem); max-width: 17ch; margin: 0 auto .55rem; } .hero .tag { font-family: var(--font-text); font-size: clamp(1.02rem, .96rem + .45vw, 1.28rem); color: var(--ink-2); max-width: 50ch; margin: 0 auto clamp(1.3rem, 3vw, 2rem); } /* The front page's search box: the same index as the header's, at the size of the thing people came here to do. */ .hero-search { position: relative; max-width: 33rem; margin: 0 auto; text-align: left; } .hero-search input { width: 100%; font: inherit; font-size: 1.05rem; color: var(--ink); padding: .8rem 1rem .8rem 2.9rem; border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow); background: var(--paper) no-repeat 1rem center/1.15rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); } .hero-search input::placeholder { color: var(--ink-3); } .hero-search input:focus { border-color: var(--accent); } .chips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem; margin: 1.1rem auto 0; max-width: 44rem; } .chips .lbl { font-size: .82rem; color: var(--ink-3); } .chips a { font-size: .85rem; padding: .28rem .7rem; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink-2); text-decoration: none; } .chips a:hover { border-color: var(--accent); background: var(--accent-2); color: var(--accent-ink); } /* Front-page sections drop the ruled heading the article pages use: this page is a shop window, not a document. */ .home-sec { grid-column: 1 / -1; margin-top: clamp(2.2rem, 5vw, 3.4rem); } .home-sec > h2 { font: 700 clamp(1.35rem, 1.15rem + .8vw, 1.9rem)/1.2 var(--font-text); letter-spacing: -.015em; border: 0; padding: 0; margin: 0 0 .3rem; } .home-sec > .lede { margin-bottom: 1.1rem; } /* Photo tiles: animal groups and individual species use the same card. */ .tiles { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); } .tiles li { margin: 0; } .tiles a { display: block; overflow: hidden; text-decoration: none; color: var(--ink); border: 1px solid var(--rule); border-radius: 14px; background: var(--paper-2); box-shadow: var(--shadow); transition: transform .18s ease, border-color .18s ease; } .tiles a:hover { transform: translateY(-2px); border-color: var(--accent); } .tiles .shot, .tiles .no-shot { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; background: var(--paper-3); } .tiles .no-shot { background: radial-gradient(70% 90% at 30% 20%, var(--accent-2), transparent 70%), var(--paper-3); } .tiles .cap { display: block; padding: .6rem .8rem .75rem; } .tiles .cap b { display: block; font: 600 1rem/1.3 var(--font-ui); letter-spacing: -.01em; } .tiles .cap span { display: block; font-size: .8rem; color: var(--ink-3); margin-top: .1rem; } .tiles .cap i { font-family: var(--font-text); font-style: italic; } /* Curated lists, each showing a few of its members. */ .themes { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } .themes li { margin: 0; } .themes a { display: block; height: 100%; padding: .9rem 1rem 1rem; text-decoration: none; color: var(--ink); border: 1px solid var(--rule); border-radius: 12px; background: var(--paper-2); } .themes a:hover { border-color: var(--accent); background: var(--accent-2); } .themes b { display: block; font: 600 1.05rem/1.3 var(--font-text); } .themes .blurb { display: block; margin: .2rem 0 .6rem; font-size: .85rem; color: var(--ink-2); } .themes .strip { display: flex; gap: .25rem; } .themes .strip img { width: 2rem; height: 2rem; border-radius: 5px; object-fit: cover; background: var(--paper-3); } .credit { color: var(--ink-3); font-size: .78rem; margin-top: .8rem; } .stats { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin: 1.5rem 0; } .stat { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: .9rem 1rem; } .stat b { display: block; font: 700 clamp(1.4rem, 1rem + 1.4vw, 2rem)/1.1 var(--font-text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .stat span { font-size: .78rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; } .phyla { grid-column: 1 / -1; } .bar { height: .4rem; border-radius: 999px; background: var(--paper-3); overflow: hidden; margin-top: .35rem; } .bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; } /* ------------------------------------------------------------- footer */ footer { border-top: 1px solid var(--rule); background: var(--paper-2); padding: 2rem var(--gap); font-size: .85rem; color: var(--ink-3); } footer .inner { max-width: 78rem; margin: 0 auto; } .footer-nav { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } footer h3 { font: 600 .75rem/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin: 0 0 .5rem; } footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; } footer a { color: var(--ink-2); text-decoration: none; } footer a:hover { color: var(--accent-ink); text-decoration: underline; } footer .colophon { border-top: 1px solid var(--rule); margin: 1.2rem 0 0; padding-top: 1rem; line-height: 1.6; } /* Without scripting the columns never arrive; the credit line then stands alone and does not need a rule above it. */ .footer-nav:empty + .colophon { border-top: 0; margin-top: 0; padding-top: 0; } /* --------------------------------------------------------------- misc */ .notice { background: var(--accent-2); border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent); border-radius: var(--radius); padding: .7rem 1rem; font-size: .9rem; margin: 0 0 1.2rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }