@livenetworks/ashlar 2.2.0 → 2.2.2

package/theme/config/mixins/_translations.scss

@@ -1,124 +1,126 @@
-@use 'display' as *;
-@use 'spacing' as *;
-@use 'sizing' as *;
-@use 'typography' as *;
-@use 'colors' as *;
-@use 'borders' as *;
-@use 'transitions' as *;
-@use 'interaction' as *;
-@use 'motion' as *;
-
-// Translation management -- flag icons, badges, trigger button.
-//
-// Usage:
-//   [data-ln-translatable-lang] { @include translations-flag-input; }
-//   [data-ln-translations-active] { @include translations-active-list; }
-
-// ─── Flag icon in input background ───────────────────────────────
-
-@mixin translations-flag-input {
-	// Intrinsic flag-icon decoration math — pad-left + bg-pos + bg-size
-	// composed against the icon's own dimensions, not shell rhythm.
-	padding-left: calc(var(--size-sm-up) + var(--size-md-up) + var(--size-sm-up));
-	background-repeat: no-repeat;
-	background-size: var(--size-md-up) auto;
-	background-position: var(--size-sm-up) calc(var(--size-sm) + (var(--size-lg) - var(--size-md-up) * 3 / 4) / 2);
-}
-
-// ─── Dropdown menu item: flag via ::before ───────────────────────
-
-@mixin translations-dropdown-flag {
-	@include flex;
-	@include items-center;
-	gap: var(--gap);
-
-	&::before {
-		content: '';
-		@include inline-block;
-		width: 1.25rem;
-		aspect-ratio: 4 / 3;
-		background-size: contain;
-		background-repeat: no-repeat;
-		background-position: center;
-		flex-shrink: 0;
-	}
-}
-
-// ─── Header actions ──────────────────────────────────────────────
-
-@mixin translations-actions {
-	@include inline-flex;
-	@include items-center;
-	--gap: var(--size-xs);
-	gap: var(--gap);
-	margin-left: auto;
-}
-
-// ─── Active translations list ────────────────────────────────────
-
-@mixin translations-active-list {
-	@include inline-flex;
-	@include items-center;
-	--gap: var(--size-xs);
-	gap: var(--gap);
-}
-
-// ─── Badge with flag ─────────────────────────────────────────────
-
-@mixin translations-badge {
-	@include inline-flex;
-	@include items-center;
-	--gap: var(--size-xs);
-	gap: var(--gap);
-	--padding-y: var(--size-2xs);
-	--padding-x: var(--size-xs);
-	padding: var(--padding-y) var(--padding-x);
-	@include text-xs;
-	@include font-semibold;
-	@include rounded-sm;
-	@include tinted-surface(0.08);
-	@include select-none;
-	margin: 0;
-	background-repeat: no-repeat;
-	background-position: var(--size-xs) center; // Intrinsic flag-icon position, not shell rhythm.
-	background-size: 1rem auto;
-	--padding-x: var(--size-lg);
-	padding-left: var(--padding-x);
-}
-
-// ─── Badge remove button ─────────────────────────────────────────
-
-@mixin translations-badge-remove {
-	background: none;
-	border: none;
-	@include cursor-pointer;
-	@include text-sm;
-	@include font-bold;
-	color: inherit;
-	--btn-padding-y: 0;
-	--btn-padding-x: 0;
-	line-height: 1;
-	@include transition-fast;
-
-	&:hover {
-		@include text-error;
-	}
-}
-
-// ─── Trigger button ──────────────────────────────────────────────
-
-@mixin translations-add-button {
-	@include inline-flex;
-	@include items-center;
-	@include justify-center;
-	@include size(1.5rem);
-	@include rounded-sm;
-	@include cursor-pointer;
-	@include transition-fast;
-	@include tinted-surface(0.08);
-	border: none;
-
-	&:hover {
-		@include tinted-surface(0.15);
-	}
-}
+@use 'display' as *;
+@use 'spacing' as *;
+@use 'sizing' as *;
+@use 'typography' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+@use 'transitions' as *;
+@use 'interaction' as *;
+@use 'motion' as *;
+
+// Translation management -- flag icons, badges, trigger button.
+//
+// Usage:
+//   [data-ln-translatable-lang] { @include translations-flag-input; }
+//   [data-ln-translations-active] { @include translations-active-list; }
+
+// ─── Flag icon in input background ───────────────────────────────
+
+@mixin translations-flag-input {
+	// Intrinsic flag-icon decoration math — pad-left + bg-pos + bg-size
+	// composed against the icon's own dimensions, not shell rhythm.
+	padding-inline-start: calc(var(--size-sm-up) + var(--size-md-up) + var(--size-sm-up));
+	background-repeat: no-repeat;
+	background-size: var(--size-md-up) auto;
+	background-position: var(--size-sm-up) center;
+}
+
+// ─── Dropdown menu item: flag via ::before ───────────────────────
+
+@mixin translations-dropdown-flag {
+	@include flex;
+	@include items-center;
+	--gap: var(--size-xs);
+	gap: var(--gap);
+
+	&::before {
+		content: '';
+		@include inline-block;
+		width: 1.25rem;
+		aspect-ratio: 4 / 3;
+		background-size: contain;
+		background-repeat: no-repeat;
+		background-position: center;
+		flex-shrink: 0;
+	}
+}
+
+// ─── Header actions ──────────────────────────────────────────────
+
+@mixin translations-actions {
+	@include inline-flex;
+	@include items-center;
+	--gap: var(--size-xs);
+	gap: var(--gap);
+	margin-inline-start: auto;
+}
+
+// ─── Active translations list ────────────────────────────────────
+
+@mixin translations-active-list {
+	@include inline-flex;
+	@include items-center;
+	--gap: var(--size-xs);
+	gap: var(--gap);
+}
+
+// ─── Badge with flag ─────────────────────────────────────────────
+
+@mixin translations-badge {
+	@include inline-flex;
+	@include items-center;
+	--gap: var(--size-xs);
+	gap: var(--gap);
+	--padding-y: var(--size-2xs);
+	--padding-x: var(--size-xs);
+	padding-block: var(--padding-y);
+	padding-inline: var(--padding-x);
+	@include text-xs;
+	@include font-semibold;
+	@include rounded-sm;
+	@include tinted-surface(0.08);
+	@include select-none;
+	margin: 0;
+	background-repeat: no-repeat;
+	background-position: var(--size-xs) center; // Intrinsic flag-icon position, not shell rhythm.
+	background-size: 1rem auto;
+	--padding-x: var(--size-lg);
+	padding-inline-start: var(--padding-x);
+}
+
+// ─── Badge remove button ─────────────────────────────────────────
+
+@mixin translations-badge-remove {
+	background: none;
+	border: none;
+	@include cursor-pointer;
+	@include text-sm;
+	@include font-bold;
+	color: inherit;
+	--btn-padding-y: 0;
+	--btn-padding-x: 0;
+	line-height: 1;
+	@include transition-fast;
+
+	&:hover {
+		@include text-error;
+	}
+}
+
+// ─── Trigger button ──────────────────────────────────────────────
+
+@mixin translations-add-button {
+	@include inline-flex;
+	@include items-center;
+	@include justify-center;
+	@include size(1.5rem);
+	@include rounded-sm;
+	@include cursor-pointer;
+	@include transition-fast;
+	@include tinted-surface(0.08);
+	border: none;
+
+	&:hover {
+		@include tinted-surface(0.15);
+	}
+}

package/theme/presentation/_effects.scss

@@ -97,6 +97,74 @@
 	@include glass-panel;
 }
 
+// ---------------------------------------------------------------------------
+// Photo Backdrop (full-bleed photograph behind a region's content)
+// ---------------------------------------------------------------------------
+// The region's FIRST child is a <figure><img></figure>; it fills the region
+// behind everything that follows. The scrim is mixed from the region's own
+// --bg-base, so the region's text tokens stay legible in light mode, dark
+// mode and scoped theme islands — set data-mode / data-theme on the region,
+// never a hardcoded text color.
+//
+//   <section id="hero" class="hero-section photo-backdrop" data-mode="dark">
+//       <figure><img src="…" alt="…"></figure>
+//       <div class="landing-container">…</div>
+//   </section>
+//
+//   #hero  { @include photo-backdrop; }                              // default scrim
+//   #cta   { @include photo-backdrop(photo-scrim(180deg, 85%, 40%)); }
+//   #story { @include photo-backdrop(linear-gradient(…brand tint…)); }
+//   #plain { @include photo-backdrop(null); }                        // no scrim
+//
+// photo-scrim($angle, $from, $to): $from / $to are the --bg-base share at
+// the start / end of the gradient (100% = opaque surface).
+// ---------------------------------------------------------------------------
+@function photo-scrim($angle: 90deg, $from: 92%, $to: 30%) {
+	$mid: ($from + $to) * 0.5;
+
+	@return linear-gradient(
+		$angle,
+		color-mix(in srgb, var(--bg-base) #{$from}, transparent) 0%,
+		color-mix(in srgb, var(--bg-base) #{$mid}, transparent) 45%,
+		color-mix(in srgb, var(--bg-base) #{$to}, transparent) 100%
+	);
+}
+
+@mixin photo-backdrop($scrim: photo-scrim()) {
+	position: relative;
+	isolation: isolate;
+	// [data-mode] re-derives --color-fg on the region, but `color` itself is
+	// inherited already resolved from <body>; re-read it here.
+	color: var(--color-fg);
+
+	> figure:first-child {
+		position: absolute;
+		inset: 0;
+		z-index: -1;
+		margin: 0;
+
+		img {
+			display: block;
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+
+		@if $scrim {
+			&::after {
+				content: '';
+				position: absolute;
+				inset: 0;
+				background: $scrim;
+			}
+		}
+	}
+}
+
+.photo-backdrop {
+	@include photo-backdrop;
+}
+
 // ---------------------------------------------------------------------------
 // Hover Glow & Elevation
 // ---------------------------------------------------------------------------

package/theme/presentation/_navbar.scss

@@ -2,8 +2,29 @@
 // Presentation Header & Navigation — ln-ashlar
 // ==========================================================================
 // Sticky frosted glass header, brand mark, navigation links, and action bar.
+//
+// Below the `nav` breakpoint the inline .nav-menu collapses: .menu-toggle
+// in .nav-actions opens a <nav> that is a direct child of .site-header
+// (ln-toggle + .collapsible). Above it, the toggle and the panel are hidden.
+//
+//   <header class="site-header">
+//       <div class="landing-container">
+//           <nav class="site-nav">
+//               …brand, ul.nav-menu…
+//               <div class="nav-actions">
+//                   <button type="button" class="btn btn-ghost btn-sm menu-toggle"
+//                           data-ln-toggle-for="site-menu" aria-label="Menu">…</button>
+//               </div>
+//           </nav>
+//       </div>
+//       <nav id="site-menu" data-ln-toggle class="collapsible" aria-label="Menu">
+//           <div class="collapsible-body"><ul><li><a href="…">…</a></li></ul></div>
+//       </nav>
+//   </header>
 // ==========================================================================
 
+@use '../config/mixins' as *;
+
 .site-header {
 	position: sticky;
 	top: 0;
@@ -60,7 +81,7 @@
 		margin: 0;
 		padding: 0;
 
-		@media (max-width: 820px) {
+		@include mq-down(nav) {
 			display: none;
 		}
 
@@ -97,6 +118,56 @@
 		align-items: center;
 		gap: var(--size-sm);
 	}
+
+	// Collapsed-menu trigger — only while .nav-menu is hidden.
+	.menu-toggle {
+		@include mq-up(nav) {
+			display: none;
+		}
+	}
+
+	// Collapsed-menu panel. The .collapsible parent stays padding-free;
+	// the list inside .collapsible-body carries the spacing.
+	> nav {
+		@include mq-up(nav) {
+			display: none;
+		}
+
+		ul {
+			display: flex;
+			flex-direction: column;
+			gap: var(--size-2xs);
+			list-style: none;
+			margin: 0;
+			padding: var(--size-sm) var(--container-padding-x) var(--size-md);
+			border-top: var(--border-width) solid color-mix(in srgb, var(--color-border) 60%, transparent);
+		}
+
+		li {
+			margin: 0;
+			padding: 0;
+		}
+
+		a {
+			display: block;
+			padding: var(--size-sm-up) var(--size-sm);
+			border-radius: var(--radius-md);
+			font-weight: 600;
+			color: var(--color-fg);
+			text-decoration: none;
+			transition: color var(--transition-fast), background-color var(--transition-fast);
+
+			&:hover {
+				background-color: var(--bg-hover);
+			}
+
+			&.active,
+			&[aria-current="page"] {
+				color: hsl(var(--color-primary));
+				background-color: color-mix(in srgb, hsl(var(--color-primary)) 10%, transparent);
+			}
+		}
+	}
 }
 
 // ---------------------------------------------------------------------------

package/theme/presentation/_typography.scss

@@ -161,3 +161,16 @@
 		text-decoration-color: hsl(var(--color-primary));
 	}
 }
+
+// A link inside a heading is a title link (card, article, news item), not an
+// inline text link: it keeps the heading color and only tints on hover. Same
+// specificity as the rule above and declared after it, so it wins for
+// `li h3 a` without touching inline links in the same list item.
+.landing-section :is(h1, h2, h3, h4, h5, h6) a:not(.btn) {
+	color: inherit;
+	text-decoration: none;
+
+	&:hover {
+		color: hsl(var(--color-primary));
+	}
+}