style.css

/*
Theme Name: Shanti
Theme URI: https://themeist.com/themes/shanti/
Author: Themeist
Author URI: https://themeist.com
Description: A purpose-built block theme for personal blogs, designed around portrait featured images and crafted for clear, readable content. Shanti is ideal for documenting life, travel, or thoughts — with simple layouts, generous spacing, and no visual clutter. Built entirely with WordPress blocks and Full Site Editing, it gives you full creative control while letting your words take center stage.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.0.4
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.en.html
Text Domain: shanti
Domain Path: /languages
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, blog, portfolio, news
*/

/* Smooth scrolling for in-page links */
html {
	scroll-behavior: smooth;
}

/* Base: Links & focus */

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 2px !important;
	text-underline-offset: 0.2em;
}

/* Accessible focus: Only shows up for keyboard users, not mouse clicks */
:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
}

/* Removes the focus ring for mouse users to keep it clean */
:focus:not(:focus-visible) {
	outline: none;
}

/* Typography & content */

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
p,
blockquote,
caption,
figcaption {
	text-wrap: pretty;
}

strong,
b {
	font-weight: var(--wp--custom--font-weight--semi-bold);
}

/*
 * Prevent long URLs in excerpts and post content from causing horizontal scroll on mobile.
 */
.wp-block-post-excerpt p,
.wp-block-post-excerpt a,
.wp-block-post-content p,
.wp-block-post-content a {
	overflow-wrap: break-word;
	word-break: break-word;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
 */
.more-link {
	display: block;
}

/*
 * Prevents unnecessary scrollbars while handling long lines of preformatted text.
 * https://core.trac.wordpress.org/ticket/63875
 */
:where(pre) {
	overflow-x: auto;
}

/* Navigation */

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/* Navigation: emphasize current/active item */
.wp-block-navigation em {
	font-weight: var(--wp--custom--font-weight--semi-bold);
}

/* Navigation: top margin on open responsive overlay */
.wp-block-navigation__responsive-container.is-menu-open {
	margin-top: var(--wp--preset--spacing--80);
}

/* Hero cover */

/* Hero Cover: constrain inner content width */
.shanti-header-cover .constrain-text {
	max-width: 700px;
	position: relative; /* needed for absolutely positioned scroll arrow */
}

/* Hero Cover: position and style scroll arrow */
.shanti-header-cover .scroll-to {
	position: absolute;
	left: 0;
	z-index: 2;
}

.shanti-header-cover .scroll-to a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1;
}

/* Layout: Template parts & cover */

.wp-block-template-part.is-style-transparent {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: transparent;
	z-index: 10;
}

.wp-block-cover.is-style-fullscreen {
	position: relative;
	z-index: 0;
	min-height: 100vh !important;
	min-height: 100dvh !important;
}

body.admin-bar .wp-block-template-part.is-style-transparent {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .wp-block-template-part.is-style-transparent {
		top: 46px;
	}
}

/* Icons (CSS mask based) */

.shanti-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;
	mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
	background-color: currentColor;
	-webkit-mask-size: contain;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
}

.shanti-icon-return {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 10 4 15 9 20'/%3E%3Cpath d='M20 4v7a4 4 0 0 1-4 4H4'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 10 4 15 9 20'/%3E%3Cpath d='M20 4v7a4 4 0 0 1-4 4H4'/%3E%3C/svg%3E");
	margin-left: 0.5em;
}

/* Block-specific */

/* Query pagination arrows: bigger and primary color */
.wp-block-query-pagination-next-arrow,
.wp-block-query-pagination-previous-arrow {
	color: var(--wp--preset--color--primary);
	font-size: 1.5em;
}

/* Hide query pagination wrapper when there is only one page (index, archive, search) */
body.has-no-query-pagination .query-pagination {
	display: none;
}

/* Single: left column constrained group stays left-aligned (content size from theme.json) */
.shanti-single-intro {
	margin-inline-start: 0;
	margin-inline-end: auto;
}

/* Post meta: avatar, separator, date (scoped; comments unchanged) */
.shanti-meta {
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.shanti-meta > * {
	margin-block-start: 0;
}

.shanti-meta .wp-block-post-author__avatar {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--wp--preset--color--primary);
}

.shanti-meta .wp-block-post-author__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.shanti-meta-sep {
	color: var(--wp--preset--color--contrast-alt);
}

/* Inline comment form: bottom spacing when replying to a comment */
.wp-block-comment-template .wp-block-post-comments-form {
	margin-bottom: var(--wp--preset--spacing--60) !important;
}

/* Responsive */

/* Post meta (date + terms): stack on mobile */
@media screen and (max-width: 720px) {
	.wp-block-group:has(.wp-block-post-date):has(.wp-block-post-terms) {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* .wp-block-separator.is-style-wavy {
	border: none;
	height: 20px;
	background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q 25 0, 50 10 T 100 10' stroke='black' fill='transparent' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-size: 50px 20px;
	opacity: 1;
} */

.wp-block-separator.is-style-wavy {
	border: none;
	height: 20px; /* Increased height to prevent clipping */
	width: 150px !important;
	background-color: currentColor;
	opacity: 1;

	/* Masking with a larger viewbox (20x20) so the path (at y=10) is centered and safe */
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M0 10 Q 5 2 10 10 T 20 10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M0 10 Q 5 2 10 10 T 20 10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: 20px 20px;
	mask-size: 20px 20px;
}