style.css

/*
Theme Name: Mētis
Theme URI: https://wordpress.org/themes/metis/
Author: Automattic
Author URI: https://automattic.com/
Description: A block theme for creators, with flexible patterns and templates designed for refinement in the Site Editor.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: metis
Tags: one-column, full-site-editing, block-patterns, block-styles, style-variations, blog
*/

/* Crossfade page transition */
@view-transition {
	navigation: auto;
}

/* Font smoothing */
body {
	text-rendering: geometricprecision;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Progressive enhancement to reduce widows and orphans */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/* Link styles. Buttons and inner elements included: core often
   declares the underline on a child (the accordion toggle's title
   span), and thickness does not inherit. */
a,
button,
a *,
button * {
	text-decoration-thickness: 1px !important;
	text-underline-offset: 0.1em;
}

.more-link {
	display: block;
}

:where(pre) {
	overflow-x: auto;
}

footer.wp-block-template-part {
	margin-block-start: 0 !important;
}

/* ————————————————————————————————————————————————————————————————
   Utilities. Opt-in via the block's Additional CSS class(es).
   Doubled selectors (.x.x) beat per-instance layout rules.
   ———————————————————————————————————————————————————————————— */

/* Growth weights for Row children; the Editor's Grow is always 1.
   Used: grow-2 on the search cell of "Header, uppercase title and search bar". */
.grow-0.grow-0 { flex-grow: 0; }
.grow.grow { flex-grow: 1; }
.grow-2.grow-2 { flex-grow: 2; }
.grow-3.grow-3 { flex-grow: 3; }

/* Makes a block fill its Row cell (the Search block's own width only
   reaches its inner wrapper). Used: the Search in "Header, uppercase
   title and search bar". */
.fill-width.fill-width {
	width: 100%;
	flex-grow: 1;
}

/* Links: no underline at rest, underline on hover/focus.
   Used: dates and meta in front-page, single, single-with-sidebar,
   archive, index and search patterns. */
.no-underline a {
	text-decoration: none;
}

.no-underline a:hover,
.no-underline a:focus-visible {
	text-decoration: underline;
}

/* Clips children that overhang the container edge.
   Used: "Footer, watermark on gradient", cropping the fit-text title. */
.clip-overflow {
	overflow: hidden;
}

/* Start-pads the Search input so text clears rounded corners.
   Used: the Search in "Header, uppercase title and search bar". */
.search-inset .wp-block-search__input {
	padding-inline-start: var(--wp--preset--spacing--30);
}

/* Indents a text block's first line by a third of its own width.
   Used: front-page intro heading. */
.indent-first-line {
	text-indent: 33.33%;
}

/* Removes the meta symbol (the ::before glyph on Date or Author
   Name) from one instance. Used: Author Name in the single template. */
.no-symbol.no-symbol::before {
	content: none;
}

/* Removes the Date's left stroke and its padding from one instance
   (the bar set in theme.json core/post-date). Doubled: the global rule
   carries :root. Used: opt-in wherever a Date drops the bar. */
.no-stroke.no-stroke {
	border-left: none;
	padding-left: 0;
}

/* On a Post Template: featured images alternate 3:4 (odd) and 1:1
   (even); !important beats the block's inline ratio. The img rules
   restore core's fill-and-crop, which needs an inline ratio to fire.
   Used: front-page "Posts with Featured Images" query loop. */
.alternate-ratios > li:nth-child(odd) .wp-block-post-featured-image {
	aspect-ratio: 3/4 !important;
}

.alternate-ratios > li:nth-child(even) .wp-block-post-featured-image {
	aspect-ratio: 1/1 !important;
}

.alternate-ratios .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* On a three-column Post Template grid: steps the middle card down.
   Desktop only — below 783px the grid stacks and the offset must not
   apply. Used: "Post cards, staggered grid" (via "Posts, staggered
   cards") and its inlined copy in the Personal template. */
@media (min-width: 783px) {
	.stagger-middle > li:nth-child(3n+2) {
		margin-top: var(--wp--preset--spacing--70);
	}
}

/* ————————————————————————————————————————————————————————————————
   Buttons — shared action grammar. Every Button-block style grows on
   hover, squishes on press, and shares the pressed surface: theme-4
   with theme-2 text. !important outranks per-instance color presets,
   which are themselves important. Skins (fill, outline, glossy) style
   the resting and hover surfaces on top of this.
   ———————————————————————————————————————————————————————————— */
.wp-block-button .wp-block-button__link {
	transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wp-block-button .wp-block-button__link:hover {
	transform: scale(1.04);
}

.wp-block-button .wp-block-button__link:active {
	transform: scale(0.97);
	background: var(--wp--preset--color--theme-4) !important;
	border-color: var(--wp--preset--color--theme-2) !important;
	color: var(--wp--preset--color--theme-2) !important;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button .wp-block-button__link {
		transition: none;
	}

	.wp-block-button .wp-block-button__link:hover,
	.wp-block-button .wp-block-button__link:active {
		transform: none;
	}
}

/* ————————————————————————————————————————————————————————————————
   Block fixes.
   ———————————————————————————————————————————————————————————— */

/* Accordion bleed: items overlap via negative margins; positioning
   makes each paint atomically in source order, so an item's fill can
   crop the title above it on the front end (the editor's positioned
   wrappers already do this). Used: "Selected builds, accordions". */
.wp-block-accordion-item {
	position: relative;
}

/* An open item adds the 40px the bleed removes: the next item's
   -40px overlap would otherwise cover the expanded panel. !important
   outranks the items' inline margin attributes. */
.wp-block-accordion-item.is-open {
	margin-bottom: 40px !important;
}

/* Closed panels keep their box (hidden-until-found), so instance
   padding would hold items open as phantom height and break the
   bleed. Zero it while closed; the open state keeps the spacing. */
.wp-block-accordion-item:not(.is-open) .wp-block-accordion-panel {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}