@refrakt-md/lumina 0.7.1 → 0.8.0

package/styles/runes/bento.css

@@ -2,6 +2,42 @@
 .rf-bento {
 	margin: 1.5rem 0;
 }
+.rf-bento__header {
+	margin-bottom: 1.5rem;
+}
+.rf-bento__eyebrow {
+	font-size: 0.8125rem;
+	font-weight: 600;
+	letter-spacing: 0.05em;
+	text-transform: uppercase;
+	color: var(--rf-color-primary);
+	margin: 0 0 0.5rem;
+}
+.rf-bento__eyebrow:has(a) {
+	display: inline-block;
+	position: relative;
+	padding: 0.25rem 0.875rem;
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-full);
+	color: var(--rf-color-text);
+	font-weight: 400;
+	text-transform: none;
+	letter-spacing: 0;
+	transition: border-color 150ms ease;
+}
+.rf-bento__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
+.rf-bento__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: 600; text-decoration: none; }
+.rf-bento__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
+.rf-bento__headline {
+	margin-top: 0;
+}
+.rf-bento__blurb {
+	color: var(--rf-color-muted);
+	margin-bottom: 0;
+}
+.rf-bento__image {
+	margin-bottom: 1rem;
+}
 .rf-bento__grid {
 	display: grid;
 	grid-template-columns: repeat(var(--bento-columns, 4), 1fr);
@@ -14,6 +50,9 @@
 	background: var(--rf-color-surface);
 	overflow: hidden;
 }
+.rf-bento-cell--full {
+	grid-column: 1 / -1;
+}
 .rf-bento-cell--large {
 	grid-column: span 2;
 	grid-row: span 2;
@@ -24,13 +63,31 @@
 .rf-bento-cell--small {
 	grid-column: span 1;
 }
+/* Span mode: heading level determines column span via CSS variable */
+.rf-bento-cell--span {
+	grid-column: span var(--cell-span, 1);
+}
+.rf-bento-cell__icon {
+	margin-bottom: 0.75rem;
+	line-height: 0;
+}
+.rf-bento-cell__icon svg {
+	width: 1.5rem;
+	height: 1.5rem;
+	color: var(--rf-color-accent);
+}
+.rf-bento-cell__icon .rf-icon {
+	width: 1.5rem;
+	height: 1.5rem;
+	color: var(--rf-color-accent);
+}
 .rf-bento-cell__title {
-	font-size: 1rem;
+	font-size: 1.125rem;
 	font-weight: 600;
 	margin: 0 0 0.5rem;
 }
-.rf-bento-cell__body span[property],
-.rf-bento-cell__body meta { display: none; }
+.rf-bento-cell__body > span[property],
+.rf-bento-cell__body > meta { display: none; }
 .rf-bento-cell__body p:last-child { margin-bottom: 0; }
 .rf-bento-cell img {
 	width: 100%;
@@ -38,13 +95,33 @@
 	border-radius: var(--rf-radius-sm);
 	margin-bottom: 0.75rem;
 }
+/* Remove padding on bleed edges when showcase bleeds inside a cell */
+.rf-bento-cell:has(.rf-showcase[data-bleed="bottom"]),
+.rf-bento-cell:has(.rf-showcase[data-bleed="both"]),
+.rf-bento-cell:has(.rf-showcase[data-bleed="bottom-end"]) {
+	padding-bottom: 0;
+}
+.rf-bento-cell:has(.rf-showcase[data-bleed="end"]),
+.rf-bento-cell:has(.rf-showcase[data-bleed="bottom-end"]),
+.rf-bento-cell:has(.rf-showcase[data-bleed="top-end"]) {
+	padding-inline-end: 0;
+}
+.rf-bento-cell:has(.rf-showcase[data-bleed="top"]),
+.rf-bento-cell:has(.rf-showcase[data-bleed="both"]),
+.rf-bento-cell:has(.rf-showcase[data-bleed="top-end"]) {
+	padding-top: 0;
+}
 @media (max-width: 768px) {
 	.rf-bento__grid { grid-template-columns: repeat(2, 1fr) !important; }
+	.rf-bento-cell--full { grid-column: 1 / -1; }
 	.rf-bento-cell--large { grid-column: span 2; grid-row: span 1; }
 	.rf-bento-cell--medium { grid-column: span 2; }
+	.rf-bento-cell--span { grid-column: span min(var(--cell-span, 1), 2); }
 }
 @media (max-width: 480px) {
 	.rf-bento__grid { grid-template-columns: 1fr !important; }
+	.rf-bento-cell--full,
 	.rf-bento-cell--large,
-	.rf-bento-cell--medium { grid-column: span 1; }
+	.rf-bento-cell--medium,
+	.rf-bento-cell--span { grid-column: span 1; }
 }

package/styles/runes/bg.css

@@ -0,0 +1,53 @@
+/* Background — Directive rune for background images, video, overlays, blur */
+
+/* Background layer — absolute positioned behind content */
+[data-name="bg"] {
+	position: absolute;
+	inset: 0;
+	z-index: 0;
+	overflow: hidden;
+	background-image: var(--bg-image);
+	background-size: var(--bg-fit, cover);
+	background-position: var(--bg-position, center);
+	background-repeat: no-repeat;
+}
+/* Blur and opacity applied when set via custom properties */
+[data-name="bg"][style*="--bg-blur"] {
+	filter: blur(var(--bg-blur));
+}
+[data-name="bg"][style*="--bg-opacity"] {
+	opacity: var(--bg-opacity);
+}
+/* Fixed (parallax) background */
+[data-name="bg"][data-bg-fixed] {
+	background-attachment: fixed;
+}
+/* Content above background — any sibling of bg layer gets z-index */
+.rf-has-bg > :not([data-name="bg"]) {
+	position: relative;
+	z-index: 1;
+}
+/* Video background */
+[data-name="bg-video"] {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	object-position: var(--bg-position, center);
+}
+[data-name="bg-video"][style*="--bg-blur"] {
+	filter: blur(var(--bg-blur));
+}
+[data-name="bg-video"][style*="--bg-opacity"] {
+	opacity: var(--bg-opacity);
+}
+/* Overlay */
+[data-name="bg-overlay"] {
+	position: absolute;
+	inset: 0;
+}
+[data-name="bg-overlay"][data-bg-overlay="dark"] {
+	background: rgba(0, 0, 0, 0.5);
+}
+[data-name="bg-overlay"][data-bg-overlay="light"] {
+	background: rgba(255, 255, 255, 0.6);
+}

package/styles/runes/budget.css

@@ -154,10 +154,10 @@
 }
 
 /* Summary style — hide line items, show only category headers */
-[data-style="summary"] .rf-budget-category__line-items {
+[data-variant="summary"] .rf-budget-category__line-items {
 	display: none;
 }
-[data-style="summary"] .rf-budget-category__header {
+[data-variant="summary"] .rf-budget-category__header {
 	margin-bottom: 0;
 	padding-bottom: 0;
 	border-bottom: none;

package/styles/runes/cast.css

@@ -45,7 +45,7 @@
 	color: var(--rf-color-muted);
 }
 .rf-cast-member__body:empty { display: none; }
-.rf-cast-member__body span[property] { display: none; }
+.rf-cast-member__body > span[property] { display: none; }
 .rf-cast-member img {
 	width: 80px;
 	height: 80px;

package/styles/runes/codegroup.css

@@ -75,3 +75,12 @@
 	font-family: var(--rf-font-mono);
 	font-size: 0.85rem;
 }
+/* Overflow modes */
+.rf-codegroup[data-overflow="wrap"] pre {
+	white-space: pre-wrap;
+	word-break: break-word;
+	overflow-x: hidden;
+}
+.rf-codegroup[data-overflow="hide"] pre {
+	overflow-x: hidden;
+}

package/styles/runes/comparison.css

@@ -16,8 +16,8 @@
 	font-weight: 700;
 	color: var(--rf-color-text);
 }
-.rf-comparison meta,
-.rf-comparison span[property] { display: none; }
+.rf-comparison > meta,
+.rf-comparison > span[property] { display: none; }
 /* Table layout */
 .rf-comparison__table-wrapper {
 	overflow-x: auto;

package/styles/runes/conversation.css

@@ -48,7 +48,7 @@
 }
 .rf-conversation-message__body p { margin: 0; }
 .rf-conversation-message__body p + p { margin-top: 0.5rem; }
-.rf-conversation-message__body span[property],
-.rf-conversation-message__body meta { display: none; }
-.rf-conversation-message span[property="speaker"],
-.rf-conversation-message meta[property] { display: none; }
+.rf-conversation-message__body > span[property],
+.rf-conversation-message__body > meta { display: none; }
+.rf-conversation-message > span[property="speaker"],
+.rf-conversation-message > meta[property] { display: none; }

package/styles/runes/cta.css

@@ -1,11 +1,59 @@
 /* Call to Action */
 .rf-cta {
-	text-align: center;
 	padding: 3.5rem 2rem 3rem;
 }
+.rf-cta .rf-cta__header,
+.rf-cta > h1, .rf-cta > h2, .rf-cta > h3,
+.rf-cta > p {
+	text-align: center;
+}
+.rf-cta__header {
+	margin-bottom: 1.5rem;
+}
+/* Higher specificity needed to override .rf-cta p (0,1,1) */
+.rf-cta .rf-cta__eyebrow {
+	font-size: 0.875rem;
+	font-weight: 600;
+	letter-spacing: 0.05em;
+	text-transform: uppercase;
+	color: var(--rf-color-primary);
+	margin: 0 0 0.75rem;
+	max-width: none;
+}
+/* Pill-badge variant when eyebrow contains a link */
+.rf-cta .rf-cta__eyebrow:has(a) {
+	display: inline-block;
+	position: relative;
+	padding: 0.25rem 0.875rem;
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-full);
+	color: var(--rf-color-text);
+	font-weight: 400;
+	text-transform: none;
+	letter-spacing: 0;
+	transition: border-color 150ms ease;
+}
+.rf-cta .rf-cta__eyebrow:has(a):hover {
+	border-color: var(--rf-color-muted);
+}
+.rf-cta .rf-cta__eyebrow:has(a) a {
+	color: var(--rf-color-primary);
+	font-weight: 600;
+	text-decoration: none;
+}
+.rf-cta .rf-cta__eyebrow:has(a) a::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+	border-radius: inherit;
+}
+.rf-cta__image {
+	margin-bottom: 1.5rem;
+}
 .rf-cta h1,
 .rf-cta h2,
-.rf-cta h3 {
+.rf-cta h3,
+.rf-cta__headline {
 	font-size: 2.5rem;
 	font-weight: 750;
 	letter-spacing: -0.03em;
@@ -17,7 +65,9 @@
 	-webkit-text-fill-color: transparent;
 	background-clip: text;
 }
-.rf-cta p {
+/* Higher specificity needed to override .rf-cta p (0,1,1) */
+.rf-cta p,
+.rf-cta .rf-cta__blurb {
 	font-size: 1.15rem;
 	color: var(--rf-color-muted);
 	max-width: 540px;
@@ -78,9 +128,13 @@
 
 /* Context-aware: CTA inside pricing — compact, left-aligned */
 .rf-cta--in-pricing {
-	text-align: left;
 	padding: 1.5rem 0 0;
 }
+.rf-cta--in-pricing .rf-cta__header,
+.rf-cta--in-pricing > h1, .rf-cta--in-pricing > h2, .rf-cta--in-pricing > h3,
+.rf-cta--in-pricing > p {
+	text-align: left;
+}
 .rf-cta--in-pricing p {
 	margin: 0 0 1rem;
 	max-width: none;

package/styles/runes/feature.css

@@ -2,42 +2,88 @@
 .rf-feature {
 	padding: 2.5rem 0 2rem;
 }
-.rf-feature__body {
+.rf-feature__header {
+	margin-bottom: 1.5rem;
+}
+.rf-feature__eyebrow {
+	font-size: 0.8125rem;
+	font-weight: 600;
+	letter-spacing: 0.05em;
+	text-transform: uppercase;
+	color: var(--rf-color-primary);
+	margin: 0 0 0.5rem;
+}
+.rf-feature__eyebrow:has(a) {
+	display: inline-block;
+	position: relative;
+	padding: 0.25rem 0.875rem;
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-full);
+	color: var(--rf-color-text);
+	font-weight: 400;
+	text-transform: none;
+	letter-spacing: 0;
+	transition: border-color 150ms ease;
+}
+.rf-feature__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
+.rf-feature__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: 600; text-decoration: none; }
+.rf-feature__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
+.rf-feature__headline {
+	margin-top: 0;
+}
+.rf-feature__blurb {
+	color: var(--rf-color-muted);
+	margin-bottom: 0;
+	max-width: 40rem;
+}
+.rf-feature__image {
+	margin-bottom: 1rem;
+}
+.rf-feature__content {
 	display: contents;
 }
 .rf-feature h2 {
-	text-align: center;
 	margin-bottom: 2rem;
 }
+.rf-feature[data-align="center"] .rf-feature__header,
+.rf-feature[data-align="center"] h2 {
+	text-align: center;
+}
+.rf-feature[data-align="left"] .rf-feature__header,
+.rf-feature[data-align="left"] h2 {
+	text-align: left;
+}
+.rf-feature[data-align="right"] .rf-feature__header,
+.rf-feature[data-align="right"] h2 {
+	text-align: right;
+}
 .rf-feature dl {
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+	grid-template-columns: repeat(auto-fit, minmax(max(240px, calc((100% - 3rem) / 3)), 1fr));
 	gap: 1.5rem;
 	margin: 0;
 }
-.rf-feature--split {
-	display: grid;
-	align-items: center;
-	grid-template-columns: 1fr 1fr;
-	gap: 3rem;
-}
-.rf-feature--split .rf-feature__body {
+/* Split layout: override defaults when in split mode */
+.rf-feature[data-layout="split"] .rf-feature__content,
+.rf-feature[data-layout="split-reverse"] .rf-feature__content {
 	display: block;
 }
-.rf-feature--split h2 {
+.rf-feature[data-layout="split"] .rf-feature__header,
+.rf-feature[data-layout="split-reverse"] .rf-feature__header,
+.rf-feature[data-layout="split"] h2,
+.rf-feature[data-layout="split-reverse"] h2 {
 	text-align: left;
 }
-.rf-feature--split dl {
+.rf-feature[data-layout="split"] dl,
+.rf-feature[data-layout="split-reverse"] dl {
 	display: block;
 }
-.rf-feature--split .rf-feature-definition {
+.rf-feature[data-layout="split"] .rf-feature-definition,
+.rf-feature[data-layout="split-reverse"] .rf-feature-definition {
 	border: none;
 	background: none;
 	padding: 0.75rem 0;
 }
-.rf-feature--mirror .rf-feature__showcase {
-	order: -1;
-}
 .rf-feature-definition {
 	padding: 1.75rem;
 	border-radius: var(--rf-radius-md);
@@ -46,7 +92,7 @@
 }
 .rf-feature-definition dt {
 	font-weight: 650;
-	font-size: 1.05rem;
+	font-size: 1.125rem;
 	margin-bottom: 0.75rem;
 	letter-spacing: -0.01em;
 	color: var(--rf-color-text);

package/styles/runes/gallery.css

@@ -0,0 +1,182 @@
+/* Gallery — Multi-image container with grid/carousel/masonry layout */
+.rf-gallery {
+	margin: 1.5rem 0;
+	position: relative;
+}
+
+/* Layout modifier classes */
+.rf-gallery--grid {}
+.rf-gallery--carousel {}
+.rf-gallery--masonry {}
+
+/* Items container — grid layout by default */
+.rf-gallery__items {
+	display: grid;
+	grid-template-columns: repeat(var(--gallery-columns, 3), 1fr);
+	gap: var(--gallery-gap, var(--rf-spacing-md));
+}
+
+/* Individual gallery items */
+.rf-gallery__item {
+	position: relative;
+	overflow: hidden;
+	border-radius: var(--rf-radius-md);
+}
+.rf-gallery__item img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	display: block;
+}
+.rf-gallery__item figcaption {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	padding: 0.5rem 0.75rem;
+	background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
+	color: white;
+	font-size: 0.825rem;
+}
+
+/* Gallery caption */
+.rf-gallery > figcaption {
+	margin-top: 0.625rem;
+	font-size: 0.825rem;
+	color: var(--rf-color-muted);
+	text-align: center;
+	font-style: italic;
+}
+
+/* Carousel layout */
+.rf-gallery[data-layout="carousel"] .rf-gallery__items {
+	display: flex;
+	overflow-x: auto;
+	scroll-snap-type: x mandatory;
+	-webkit-overflow-scrolling: touch;
+}
+.rf-gallery[data-layout="carousel"] .rf-gallery__item {
+	flex: 0 0 calc(100% / var(--gallery-columns, 3));
+	scroll-snap-align: start;
+}
+
+/* Carousel nav buttons */
+.rf-gallery__nav {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	z-index: 2;
+	width: 2.5rem;
+	height: 2.5rem;
+	border-radius: 50%;
+	border: none;
+	background: var(--rf-color-surface);
+	color: var(--rf-color-text);
+	box-shadow: var(--rf-shadow-md);
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 1.25rem;
+	opacity: 0.8;
+	transition: opacity 0.2s;
+}
+.rf-gallery__nav:hover {
+	opacity: 1;
+}
+.rf-gallery__nav--prev {
+	left: 0.5rem;
+}
+.rf-gallery__nav--next {
+	right: 0.5rem;
+}
+
+/* Masonry layout (CSS progressive enhancement) */
+.rf-gallery[data-layout="masonry"] .rf-gallery__items {
+	grid-template-rows: masonry;
+}
+
+/* Lightbox cursor hint */
+.rf-gallery[data-lightbox="true"] .rf-gallery__item {
+	cursor: zoom-in;
+}
+
+/* Lightbox overlay */
+.rf-gallery__lightbox {
+	position: fixed;
+	inset: 0;
+	z-index: 9999;
+	background: rgba(0, 0, 0, 0.9);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.rf-gallery__lightbox img {
+	max-width: 90vw;
+	max-height: 90vh;
+	object-fit: contain;
+	border-radius: var(--rf-radius-md);
+}
+.rf-gallery__lightbox-close {
+	position: absolute;
+	top: 1rem;
+	right: 1rem;
+	width: 2.5rem;
+	height: 2.5rem;
+	border-radius: 50%;
+	border: none;
+	background: rgba(255, 255, 255, 0.15);
+	color: white;
+	font-size: 1.5rem;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.rf-gallery__lightbox-nav {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 3rem;
+	height: 3rem;
+	border-radius: 50%;
+	border: none;
+	background: rgba(255, 255, 255, 0.15);
+	color: white;
+	font-size: 1.5rem;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.rf-gallery__lightbox-nav--prev {
+	left: 1rem;
+}
+.rf-gallery__lightbox-nav--next {
+	right: 1rem;
+}
+
+/* Column count overrides */
+.rf-gallery[data-columns="1"] .rf-gallery__items { grid-template-columns: 1fr; }
+.rf-gallery[data-columns="2"] .rf-gallery__items { grid-template-columns: repeat(2, 1fr); }
+.rf-gallery[data-columns="4"] .rf-gallery__items { grid-template-columns: repeat(4, 1fr); }
+.rf-gallery[data-columns="5"] .rf-gallery__items { grid-template-columns: repeat(5, 1fr); }
+.rf-gallery[data-columns="6"] .rf-gallery__items { grid-template-columns: repeat(6, 1fr); }
+
+/* Responsive: collapse to fewer columns on small screens */
+@media (max-width: 768px) {
+	.rf-gallery__items {
+		grid-template-columns: repeat(2, 1fr);
+	}
+	.rf-gallery[data-layout="carousel"] .rf-gallery__item {
+		flex-basis: 80%;
+	}
+}
+@media (max-width: 480px) {
+	.rf-gallery__items {
+		grid-template-columns: 1fr;
+	}
+	.rf-gallery[data-layout="carousel"] .rf-gallery__item {
+		flex-basis: 100%;
+	}
+}

package/styles/runes/grid.css

@@ -4,8 +4,9 @@
 }
 .rf-grid [data-layout="grid"] {
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-	gap: 1.5rem;
+	grid-template-columns: var(--grid-ratio, repeat(auto-fit, minmax(250px, 1fr)));
+	align-items: var(--grid-valign, stretch);
+	gap: var(--grid-gap, 1.5rem);
 }
 /* Explicit column counts override auto-fit */
 .rf-grid [data-columns="1"] { grid-template-columns: 1fr; }
@@ -26,6 +27,39 @@
 .rf-grid [data-rowspan="2"] { grid-row: span 2; }
 .rf-grid [data-rowspan="3"] { grid-row: span 3; }
 .rf-grid [data-rowspan="4"] { grid-row: span 4; }
-/* Item styling */
-.rf-grid [data-name="item"] p:first-child { margin-top: 0; }
-.rf-grid [data-name="item"] p:last-child { margin-bottom: 0; }
+/* Cell styling */
+.rf-grid [data-name="cell"] p:first-child { margin-top: 0; }
+.rf-grid [data-name="cell"] p:last-child { margin-bottom: 0; }
+/* Auto mode — responsive auto-fill */
+.rf-grid[data-mode="auto"] [data-layout="grid"] {
+	grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 250px), 1fr));
+}
+/* Masonry mode — progressive enhancement */
+.rf-grid[data-mode="masonry"] [data-layout="grid"] {
+	grid-template-rows: masonry;
+}
+/* Aspect ratio enforcement on cells */
+.rf-grid[data-aspect] [data-name="cell"] {
+	aspect-ratio: var(--grid-aspect);
+	overflow: hidden;
+}
+.rf-grid[data-aspect] [data-name="cell"] > img,
+.rf-grid[data-aspect] [data-name="cell"] > video {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+/* Stack order when collapsed */
+.rf-grid[data-stack="reverse"] [data-name="cell"]:last-child {
+	order: -1;
+}
+/* Collapse breakpoints */
+@media (max-width: 640px) {
+	.rf-grid[data-collapse="sm"] [data-layout="grid"] { grid-template-columns: 1fr; }
+}
+@media (max-width: 768px) {
+	.rf-grid[data-collapse="md"] [data-layout="grid"] { grid-template-columns: 1fr; }
+}
+@media (max-width: 1024px) {
+	.rf-grid[data-collapse="lg"] [data-layout="grid"] { grid-template-columns: 1fr; }
+}