/*
 * mirror.slitaz.org: a copy of www.slitaz.org/slitaz.css, the family look.
 * The name stays slitaz-2026.css: `marmite up-mirror` chowns exactly this
 * file name in the docroot it shares with the packages. Rules proper to
 * the mirror page live in the <style> of index.html.
 */

/*
 * www.slitaz.org: the whole style of the site, on its own. Plain CSS
 * that Soie renders as well as Firefox: flexbox, grid, gradients,
 * rounded corners, shadows; no web font, no framework. theme.js only
 * sets data-theme on <html> when the visitor picks light or dark.
 */

:root {
	color-scheme: light;
	--orange:      #d9530a;	/* the spider's orange: numbers, accents */
	--button:      #c94c08;	/* primary buttons, white text reads AA */
	--orange-dark: #b84300;
	--bg:          #fbfaf8;
	--band:        #f3efea;
	--card:        #ffffff;
	--text:        #1f1c19;
	--muted:       #6b645c;
	--line:        #e4ddd5;
	--code:        #f1ece5;
	--link:        #b84300;
	--radius:      14px;
	--shadow:      0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .06);
	--mono:        ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
	/* Old names, still used by inline styles of the inner pages */
	--color-primary: var(--orange);
	--primary:       var(--orange);
	--text-light:    var(--muted);
	--border:        var(--line);
	--font-size-sm:  .875rem;
	--space-xs:      .25rem;
	--space-sm:      .5rem;
	--space-md:      1rem;
	--space-lg:      1.5rem;
	--space-xl:      2rem;
	--space-2xl:     3rem;
}
/* Dark: the system's choice, unless the toggle said light... */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--bg:     #15130f;
		--band:   #1d1a16;
		--card:   #24201b;
		--text:   #eee8e1;
		--muted:  #a59d93;
		--line:   #353029;
		--code:   #2d2822;
		--link:   #ff8a4c;
		--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .3);
	}
}
/* ...and the toggle's choice, whatever the system says */
:root[data-theme="dark"] {
	color-scheme: dark;
	--bg:     #15130f;
	--band:   #1d1a16;
	--card:   #24201b;
	--text:   #eee8e1;
	--muted:  #a59d93;
	--line:   #353029;
	--code:   #2d2822;
	--link:   #ff8a4c;
	--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto,
		"DejaVu Sans", sans-serif;
}

a { color: var(--link); }
img { max-width: 100%; }
a:focus-visible, button:focus-visible, label:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 2px;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h2 { font-size: 2rem; letter-spacing: -.02em; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }

code {
	font-family: var(--mono);
	font-size: .88em;
	background: var(--code);
	padding: .1em .35em;
	border-radius: 5px;
}

/* Header: one bar, stays on top; translucent where the browser can blur */
#header {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(10px)) {
	#header {
		background: color-mix(in srgb, var(--bg) 85%, transparent);
		backdrop-filter: saturate(1.5) blur(10px);
	}
}
.top {
	max-width: 1140px;
	margin: 0 auto;
	padding: .6rem 1.2rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}
/* The site name takes the room left, the rest goes to the right */
#header h1 { margin: 0 auto 0 0; font-size: 1.3rem; }
#header h1 a {
	display: flex;
	align-items: center;
	gap: .5rem;
	color: var(--text);
	text-decoration: none;
}
#header h1 img { width: 30px; height: 30px; display: block; }
#nav-toggle, #nav-burger { display: none; }
#network ul {
	display: flex;
	align-items: center;
	gap: 1.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
#network a {
	color: var(--muted);
	text-decoration: none;
	font-weight: 500;
	white-space: nowrap;
}
#network a:hover { color: var(--text); }

/* The light/dark switch: a discreet round icon, theme.js draws it */
#theme-toggle {
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: transparent;
	color: var(--muted);
	border: 1px solid var(--line);
	border-radius: 50%;
	cursor: pointer;
}
#theme-toggle:hover { color: var(--text); border-color: var(--muted); }
#theme-toggle svg { display: block; }

/* Buttons */
.button {
	display: inline-block;
	padding: .75rem 1.4rem;
	border-radius: 999px;
	background: var(--button);
	color: #ffffff;
	font-weight: 600;
	text-decoration: none;
}
.button:hover { background: var(--orange-dark); }
#network a.button { padding: .4rem 1rem; color: #ffffff; }
.button.ghost {
	background: transparent;
	color: var(--text);
	border: 2px solid var(--line);
	padding: calc(.75rem - 2px) 1.4rem;
}
.button.ghost:hover { border-color: var(--orange); }
.button.small { font-size: .9rem; padding: calc(.4rem - 2px) 1rem; }

/* Hero: the pitch on the left, the desktop on the right, two faint
 * halos of the spider's oranges behind */
.lead {
	background:
		radial-gradient(900px 420px at 88% 15%, rgba(217, 83, 10, .13),
			transparent 60%),
		radial-gradient(600px 300px at 0% 45%, rgba(184, 67, 0, .09),
			transparent 60%);
}
.lead-in {
	max-width: 1140px;
	margin: 0 auto;
	padding: 4.5rem 1.2rem 3.5rem;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 3rem;
	align-items: center;
}
.kicker {
	color: var(--link);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .85rem;
	margin: 0 0 .8rem;
}
.lead h2 {
	font-size: clamp(2.4rem, 5vw, 3.7rem);
	line-height: 1.05;
	letter-spacing: -.03em;
	margin: 0 0 1rem;
}
.lead h2 span { color: var(--orange); }
.lead p { font-size: 1.12rem; }
.hero-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	margin: 1.6rem 0 1rem;
}
.lead small { display: block; color: var(--muted); font-size: .9rem; }
.window {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 24px 48px rgba(0, 0, 0, .16);
	overflow: hidden;
}
.window img { display: block; width: 100%; height: auto; }

/* The numbers, as cards */
.stats-in {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 1.2rem 4rem;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.2rem;
}
.stat, .card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 1.4rem 1.5rem;
}
.stat b {
	display: block;
	font-size: 2.5rem;
	line-height: 1.1;
	letter-spacing: -.03em;
	color: var(--orange);
}
.stat span {
	display: block;
	color: var(--muted);
	font-size: .92rem;
	line-height: 1.45;
	margin-top: .5rem;
}

/* Sections, a band of colour every other one */
.part {
	max-width: 1040px;
	margin: 0 auto;
	padding: 4.5rem 1.2rem;
}
.part .intro {
	font-size: 1.12rem;
	color: var(--muted);
	max-width: 46em;
	margin-bottom: 2rem;
}
.band {
	background: var(--band);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.note { color: var(--muted); font-size: .9rem; margin-top: 1.2rem; }

/* Cards */
.cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.2rem;
	margin-top: 1.5rem;
}
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card h3 { margin: 0 0 .5rem; }
.card h3 a { text-decoration: none; }
.card p { margin: 0; font-size: .93rem; line-height: 1.6; }
.card p + p, .card p + .pills, .card .pills + p { margin-top: 1rem; }

/* Download: one card per ISO, the button always at the bottom */
.iso { display: flex; flex-direction: column; }
/* The main one: a 2px orange ring drawn by the shadow, so its border
 * stays 1px and it lines up with its neighbours */
.iso.main {
	border-color: var(--orange);
	box-shadow: 0 0 0 1px var(--orange), var(--shadow);
}
/* Two lines for every description: the buttons line up in Soie too,
 * which does not push them down with the auto margin below */
.iso p { color: var(--muted); min-height: 3.2em; }
.iso .size {
	display: block;
	font-size: 1.8rem;
	letter-spacing: -.02em;
	margin: .8rem 0 1rem;
}
.iso .get { margin-top: auto; }
.iso .get a { margin-right: .8rem; font-size: .9rem; }
.iso .get .button {
	display: block;
	text-align: center;
	margin: 0 0 .8rem;
	font-size: 1rem;
}

/* The news, as a timeline */
.timeline {
	list-style: none;
	margin: 1.5rem 0 1.5rem;
	padding: 0;
	border-left: 2px solid var(--line);
}
.timeline li { margin: 0 0 1.6rem; padding-left: 1.6rem; }
.timeline .when {
	display: inline-block;
	background: var(--band);
	border: 1px solid var(--line);
	color: var(--muted);
	font-size: .82rem;
	font-weight: 600;
	padding: 1px 11px;
	border-radius: 999px;
	margin-bottom: .3rem;
}
.timeline li.now .when {
	background: var(--button);
	border-color: var(--button);
	color: #ffffff;
}
.timeline h3 { margin: .25rem 0; }
.timeline h3 a { color: var(--text); text-decoration: none; }
.timeline h3 a:hover { color: var(--link); }
.timeline p { margin: 0; }

/* Latest commits: a plain list, the date line first */
ul.activity { list-style: none; margin: 0 0 1rem; padding: 0; }
ul.activity li {
	padding: .45rem 0;
	border-bottom: 1px solid var(--line);
	font-size: .93rem;
	overflow-wrap: anywhere;
}
ul.activity li:last-child { border-bottom: 0; }
ul.activity span { color: var(--muted); font-size: .85rem; }
ul.activity a { text-decoration: none; }

.pills { display: flex; flex-wrap: wrap; gap: .5rem; }

#footer {
	border-top: 1px solid var(--line);
	padding: 2.5rem 1.2rem;
	text-align: center;
	color: var(--muted);
	font-size: .9rem;
}
#footer p, #footer-lang { margin: 0 0 .6rem; }
#footer p:first-child { margin-bottom: 1rem; }
#footer a { color: var(--muted); margin: 0 .3rem; }
#footer-lang strong, #footer-lang span { margin: 0 .3rem; }
#footer-lang span { opacity: .6; }
#footer-lang strong { color: var(--text); }

/*
 * Content pages: the inner pages (about, get, news, devel...) keep the
 * markup of the 2026 site. This layer gives its classes the new look,
 * so ~300 pages in 7 languages follow without being rewritten.
 */

/* One reading column; section.features is the support page's top */
article.content, section.features {
	max-width: 1040px;
	margin: 0 auto;
	overflow-wrap: break-word;
	padding: 3.5rem 1.2rem 4.5rem;
}
/* The page title */
.content > h2:first-child, .features > h2 {
	font-size: clamp(2.2rem, 4.5vw, 3rem);
	letter-spacing: -.03em;
}
.features > h2 { text-align: center; }
.features + .content { padding-top: 0; }
.features + .content > h2:first-child { font-size: 2rem; }
.content h2 { margin: 2.8rem 0 1rem; }
.content > h2:first-child, .content > :first-child { margin-top: 0; }
.content h3 { font-size: 1.3rem; margin: 2rem 0 .6rem; }
.content h4 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }
.content ul, .content ol { padding-left: 1.4em; margin: 0 0 1.2rem; }
.content li { margin-bottom: .35rem; }
.content li > p { margin: .3rem 0 .8rem; }
.content img { height: auto; }
.content iframe, .content object { max-width: 100%; border: 0; }
.content hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/* Code blocks: dark in both themes, they scroll inside their own box */
pre {
	background: #1e1b17;
	color: #eee8e1;
	font: .88em/1.55 var(--mono);
	padding: 1rem 1.2rem;
	border-radius: var(--radius);
	overflow-x: auto;
	margin: 0 0 1.2rem;
}
pre code { background: none; padding: 0; color: inherit; font-size: 1em; }
pre a { color: #ff8a4c; }

blockquote {
	margin: 0 0 1.2rem;
	padding: .2rem 0 .2rem 1.2rem;
	border-left: 3px solid var(--orange);
	color: var(--muted);
}

/* Tables: a card, rows split by lines, small muted header cells */
.content table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin: 0 0 1.5rem;
	font-size: .93rem;
}
.content th, .content td {
	padding: .6rem .9rem;
	text-align: left;
	vertical-align: top;
	border-top: 1px solid var(--line);
}
.content tr:first-child > * { border-top: 0; }
.content th { color: var(--muted); font-size: .85rem; font-weight: 600; }

/* Forms: rounded fields, the submit button is a pill */
input, select, textarea, button { font: inherit; }
.content input[type="text"], .content input[type="search"],
.content select, .content textarea {
	background: var(--card);
	color: var(--text);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: .5rem .9rem;
	max-width: 100%;
}
.content textarea { border-radius: 10px; }
.content input[type="submit"] {
	background: var(--button);
	color: #ffffff;
	border: 0;
	border-radius: 999px;
	padding: .55rem 1.3rem;
	font-weight: 600;
	cursor: pointer;
}
.searchbox { text-align: center; margin: 0 0 1rem; }

/* Old buttons, as the new pills */
.btn {
	display: inline-block;
	padding: .75rem 1.4rem;
	border-radius: 999px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}
.btn-primary { background: var(--button); color: #ffffff; }
.btn-primary:hover { background: var(--orange-dark); }
.btn-secondary {
	background: transparent;
	color: var(--text);
	border: 2px solid var(--line);
	padding: calc(.75rem - 2px) 1.4rem;
}
.btn-secondary:hover { border-color: var(--orange); }

/* Old cards, as the new ones */
.feature-card, .download-card, .activity-card, .box, .box-dl,
#gallery div {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 1.4rem 1.5rem;
}
.box, .box-dl { margin: 2rem 0; overflow-wrap: anywhere; }
.box > :last-child, .box-dl > :last-child,
.box > :last-child > pre:last-child { margin-bottom: 0; }
.features-grid, .activity-grid, .download-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.2rem;
	margin: 1.5rem 0;
}
.activity-grid, .download-cards.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.download-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-card h3, .download-card h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
.feature-card p { color: var(--muted); font-size: .93rem; margin: 0; }
.feature-icon { color: var(--orange); margin-bottom: .7rem; line-height: 0; }
.feature-icon svg { width: 32px; height: 32px; }
.feature-card-links { display: flex; flex-direction: column; gap: .3rem; margin-top: 1rem; }
.feature-card-links a { font-size: .93rem; }

/* Download cards: the size, then the buttons at the bottom */
.download-card { display: flex; flex-direction: column; }
.download-card.featured {
	border-color: var(--orange);
	box-shadow: 0 0 0 1px var(--orange), var(--shadow);
}
.download-card p { font-size: .93rem; }
.download-card .version {
	color: var(--link);
	font-weight: 600;
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	margin: 0 0 .6rem;
}
.download-card .size {
	margin: auto 0 1rem;
	padding-top: .4rem;
	font-weight: 600;
	font-size: 1.15rem;
	letter-spacing: -.01em;
}
.download-card .btn { display: block; margin: 0 0 .6rem; }
.download-links { font-size: .9rem; margin-top: .2rem; }
.download-links a { color: var(--muted); margin-right: .8rem; }

/* Latest commits */
.activity-card { display: flex; flex-direction: column; margin: 1.5rem 0; }
.activity-grid .activity-card { margin: 0; }
.activity-card h3 {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: 1.15rem;
	margin: 0 0 .6rem;
}
.activity-card h3 svg { color: var(--orange); flex-shrink: 0; }
ul.activity-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.activity-list li {
	padding: .45rem 0;
	margin: 0;
	border-bottom: 1px solid var(--line);
	font-size: .93rem;
	overflow-wrap: anywhere;
}
.activity-list li:last-child { border-bottom: 0; }
.activity-list a { text-decoration: none; }
.activity-list span { color: var(--muted); font-size: .85rem; }
.activity-card > .text-center:last-child { margin: auto 0 0; }

/* News: a timeline as on the homepage, the date as a pill */
.date {
	display: inline-block;
	background: var(--band);
	border: 1px solid var(--line);
	color: var(--muted);
	font-size: .82rem;
	font-weight: 600;
	padding: 1px 11px;
	border-radius: 999px;
	margin: 0 0 1.2rem;
}
.news-list, .news > ul {
	list-style: none;
	margin: 1.5rem 0 2.5rem;
	padding: 0;
	border-left: 2px solid var(--line);
}
.news-item, .news > ul > li { padding-left: 1.6rem; margin: 0 0 2rem; }
.news-item { display: flex; flex-direction: column; }
.news-item .date { order: -1; align-self: flex-start; margin: 0 0 .4rem; }
.news-item:first-child .date {
	background: var(--button);
	border-color: var(--button);
	color: #ffffff;
}
.news-item h3 { margin: .2rem 0 .4rem; }
.news-item h3 a { color: var(--text); text-decoration: none; }
.news-item h3 a:hover { color: var(--link); }
.news-item p { margin: 0 0 .5rem; }
.news > ul > li > strong { display: block; font-size: 1.1rem; }

/* Screenshots */
#gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1.2rem;
	margin: 1.5rem 0;
}
#gallery div {
	padding: 0;
	overflow: hidden;
	text-align: center;
	font-size: .9rem;
	color: var(--muted);
}
#gallery a { display: block; }
#gallery img { display: block; width: 100%; height: 150px; object-fit: cover; }
#gallery br { display: none; }
#gallery div > :last-child { display: block; padding: .6rem; }

/* Small helpers of the old stylesheet */
.text-center { text-align: center; }
.mt-2 { margin-top: 1.5rem; }
.mb-3 { margin-bottom: 2rem; }
ul.nobullet { list-style: none; padding-left: 0; }
.icon16 { width: 16px; height: 16px; vertical-align: middle; }

/* The six old homepages, until they get the new one: a plain column */
.download-section, .about, .news-section, .activity-section, .community {
	max-width: 1040px;
	margin: 0 auto;
	padding: 3rem 1.2rem;
}
.community-links { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }

/* Narrow screens: one column; minmax(0, 1fr), or the big numbers
 * make the columns wider than a phone */
@media (max-width: 860px) {
	.lead-in, .cards, .cards.two {
		grid-template-columns: minmax(0, 1fr);
	}
	.stats-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lead-in { padding-top: 3rem; gap: 2rem; }
	.iso p { min-height: 0; }
	.features-grid, .download-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Narrow screens: the links fold under a burger, a checkbox opens
 * them; the theme switch and the burger stay in the bar. 900px, so the
 * longer Russian and German labels never wrap. */
@media (max-width: 900px) {
	#nav-burger {
		display: block;
		font-size: 1.5rem;
		line-height: 1;
		padding: .2rem .4rem;
		cursor: pointer;
	}
	#network { display: none; }
	#nav-toggle:checked ~ #network {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--bg);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow);
	}
	#nav-toggle:checked ~ #network ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: .4rem 0 .8rem;
	}
	#nav-toggle:checked ~ #network a { display: block; padding: .5rem 1rem; }
	#nav-toggle:checked ~ #network a.button {
		margin: .4rem 1rem 0;
		text-align: center;
	}
}

/* Phones */
@media (max-width: 700px) {
	.top { padding: .6rem 1rem; gap: .6rem; }
	.lead-in { padding: 2.5rem 1rem 3rem; }
	.part { padding: 3rem 1rem; }
	.stats-in { gap: .8rem; padding: 0 1rem 3rem; }
	.stat, .card { padding: 1.1rem 1.1rem; }
	.stat b { font-size: 1.9rem; }
	#footer { padding: 2rem 1rem; }
	article.content, section.features { padding: 2.5rem 1rem 3rem; }
	.features + .content { padding-top: 0; }
	/* !important: some pages set their columns in a style attribute */
	.features-grid, .activity-grid, .download-cards, .cards-2 {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	.feature-card, .download-card, .activity-card, .box, .box-dl {
		padding: 1.1rem;
	}
	.download-section, .about, .news-section, .activity-section,
	.community { padding: 2.5rem 1rem; }
}