@refrakt-md/lumina 0.7.1 → 0.8.0

package/styles/runes/hero.css

@@ -1,10 +1,52 @@
 /* Hero */
 .rf-hero {
 	position: relative;
-	padding: 5rem 2rem 4.5rem;
+	padding: 7rem 2rem 6.5rem;
 	background-size: cover;
 	background-position: center;
-	overflow: hidden;
+}
+.rf-hero__header {
+	margin-bottom: 2rem;
+}
+/* Higher specificity needed to override .rf-hero p (0,1,1) */
+.rf-hero .rf-hero__eyebrow {
+	font-size: 0.875rem;
+	font-weight: 600;
+	letter-spacing: 0.05em;
+	text-transform: uppercase;
+	color: var(--rf-color-primary);
+	margin: 0 0 1rem;
+	max-width: none;
+}
+/* Pill-badge variant when eyebrow contains a link */
+.rf-hero .rf-hero__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-hero .rf-hero__eyebrow:has(a):hover {
+	border-color: var(--rf-color-muted);
+}
+.rf-hero .rf-hero__eyebrow:has(a) a {
+	color: var(--rf-color-primary);
+	font-weight: 600;
+	text-decoration: none;
+}
+.rf-hero .rf-hero__eyebrow:has(a) a::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+	border-radius: inherit;
+}
+.rf-hero__image {
+	margin-bottom: 1.5rem;
 }
 .rf-hero__actions {
 	max-width: 720px;
@@ -14,23 +56,29 @@
 	gap: 0.75rem;
 	flex-wrap: wrap;
 }
-.rf-hero--center {
+.rf-hero[data-align="center"] .rf-hero__header,
+.rf-hero[data-align="center"] > h1,
+.rf-hero[data-align="center"] > p {
 	text-align: center;
 }
-.rf-hero--center .rf-hero__actions {
+.rf-hero[data-align="center"] .rf-hero__actions {
 	margin: 0 auto;
 	justify-content: center;
 }
-.rf-hero--left {
+.rf-hero[data-align="left"] .rf-hero__header,
+.rf-hero[data-align="left"] > h1,
+.rf-hero[data-align="left"] > p {
 	text-align: left;
 }
-.rf-hero--left .rf-hero__actions {
+.rf-hero[data-align="left"] .rf-hero__actions {
 	margin: 0;
 }
-.rf-hero--right {
+.rf-hero[data-align="right"] .rf-hero__header,
+.rf-hero[data-align="right"] > h1,
+.rf-hero[data-align="right"] > p {
 	text-align: right;
 }
-.rf-hero--right .rf-hero__actions {
+.rf-hero[data-align="right"] .rf-hero__actions {
 	margin: 0 0 0 auto;
 }
 .rf-hero__actions pre {
@@ -43,7 +91,8 @@
 	border: 1px solid var(--rf-color-border);
 	white-space: nowrap;
 }
-.rf-hero h1 {
+.rf-hero h1,
+.rf-hero__headline {
 	font-size: 3.25rem;
 	font-weight: 800;
 	letter-spacing: -0.035em;
@@ -54,13 +103,17 @@
 	-webkit-text-fill-color: transparent;
 	background-clip: text;
 }
-.rf-hero p {
+/* Higher specificity needed to override .rf-hero p (0,1,1) */
+.rf-hero p,
+.rf-hero .rf-hero__blurb {
 	font-size: 1.2rem;
 	line-height: 1.65;
 	color: var(--rf-color-muted);
 	margin: 0 0 2rem;
+	max-width: 40rem;
 }
-.rf-hero--center p {
+.rf-hero[data-align="center"] > p,
+.rf-hero[data-align="center"] .rf-hero__blurb {
 	max-width: 560px;
 	margin-left: auto;
 	margin-right: auto;
@@ -75,8 +128,8 @@
 	padding: 0;
 	margin: 0;
 }
-.rf-hero--center ul,
-.rf-hero--center nav {
+.rf-hero[data-align="center"] ul,
+.rf-hero[data-align="center"] nav {
 	justify-content: center;
 }
 .rf-hero li {
@@ -115,3 +168,15 @@
 	border-color: var(--rf-color-surface-active);
 	text-decoration: none;
 }
+.rf-hero__media {
+	margin-top: 3rem;
+	border-radius: var(--rf-radius-lg);
+}
+.rf-hero__media img {
+	display: block;
+	width: 100%;
+	height: auto;
+}
+.rf-hero__media pre {
+	margin: 0;
+}

package/styles/runes/itinerary.css

@@ -1,6 +1,8 @@
 /* Itinerary */
 .rf-itinerary {
 	margin: 2rem 0;
+	padding-left: 0.75rem;
+	padding-right: 0.75rem;
 }
 .rf-itinerary > header {
 	margin-bottom: 1.5rem;

package/styles/runes/mockup.css

@@ -0,0 +1,539 @@
+/* Mockup — Device frame chrome around content */
+
+.rf-mockup {
+	--mockup-bezel-dark: #1a1a1a;
+	--mockup-bezel-light: #e5e5e5;
+	--mockup-bezel: var(--mockup-bezel-dark);
+	--mockup-chrome: #2a2a2a;
+	--mockup-chrome-text: #999;
+	--mockup-scale: 1;
+	display: block;
+	width: 100%;
+	container-type: inline-size;
+	margin: 1.5rem 0;
+	background-color: transparent;
+}
+
+/* Inside a placed showcase, let device frame use natural width */
+.rf-showcase[data-place] .rf-mockup {
+	width: auto;
+	max-width: 100%;
+	container-type: normal;
+}
+.rf-showcase[data-place] .rf-mockup__frame {
+	zoom: var(--mockup-scale, 1);
+}
+
+/* ── Fit mode: none (native pixel size) ── */
+
+.rf-mockup[data-fit="none"] {
+	display: inline-block;
+	width: auto;
+	container-type: normal;
+}
+
+.rf-mockup[data-fit="none"] .rf-mockup__frame {
+	zoom: normal;
+	transform: scale(var(--mockup-scale, 1));
+	transform-origin: top center;
+	margin-inline: 0;
+}
+
+.rf-mockup[data-fit="none"].rf-mockup--browser,
+.rf-mockup[data-fit="none"].rf-mockup--browser-dark {
+	display: block;
+}
+
+/* ── Color modifiers ── */
+
+.rf-mockup--dark {
+	--mockup-bezel: var(--mockup-bezel-dark);
+	--mockup-chrome: #2a2a2a;
+	--mockup-chrome-text: #999;
+}
+
+.rf-mockup--light {
+	--mockup-bezel: var(--mockup-bezel-light);
+	--mockup-chrome: #f5f5f5;
+	--mockup-chrome-text: #666;
+}
+
+.rf-mockup--auto {
+	--mockup-bezel: var(--mockup-bezel-dark);
+	--mockup-chrome: #2a2a2a;
+	--mockup-chrome-text: #999;
+}
+
+/* ── Frame (wraps everything) ── */
+
+.rf-mockup__frame {
+	position: relative;
+	margin-inline: auto;
+	zoom: calc(var(--mockup-scale, 1) * min(1, tan(atan2(100cqi, var(--mockup-device-width, 100cqi)))));
+}
+
+/* ── Viewport (content area) ── */
+
+.rf-mockup__viewport {
+	overflow: auto;
+	background: var(--rf-color-bg);
+}
+.rf-mockup__viewport img {
+	display: block;
+}
+
+.rf-mockup__viewport > *:first-child {
+	margin-top: 0;
+}
+
+.rf-mockup__viewport > *:last-child {
+	margin-bottom: 0;
+}
+
+/* ── Label ── */
+
+.rf-mockup__label {
+	text-align: center;
+	font-size: 0.75rem;
+	font-weight: 500;
+	color: var(--rf-color-muted);
+	margin-top: 0.75rem;
+}
+
+/* ═══════════════════════════════════════
+   MOBILE DEVICES
+   ═══════════════════════════════════════ */
+
+/* ── Bezel (mobile/tablet outer shell) ── */
+
+.rf-mockup__bezel {
+	background: var(--mockup-bezel);
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+/* ── Notch variants ── */
+
+.rf-mockup__notch {
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 2;
+}
+
+.rf-mockup__notch--dynamic-island {
+	width: 120px;
+	height: 34px;
+	top: 12px;
+	background: #000;
+	border-radius: 20px;
+}
+
+.rf-mockup__notch--classic {
+	width: 150px;
+	height: 28px;
+	top: 0;
+	background: var(--mockup-bezel);
+	border-radius: 0 0 20px 20px;
+}
+
+.rf-mockup__notch--punch-hole {
+	width: 12px;
+	height: 12px;
+	top: 16px;
+	background: #000;
+	border-radius: var(--rf-radius-full);
+}
+
+/* ── Status bar ── */
+
+.rf-mockup__status-bar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 1.5rem;
+	height: 44px;
+	font-size: 0.75rem;
+	font-weight: 600;
+	color: var(--rf-color-text);
+	background: var(--rf-color-bg);
+	position: relative;
+	z-index: 1;
+}
+
+.rf-mockup__status-time {
+	font-variant-numeric: tabular-nums;
+}
+
+.rf-mockup__status-icons::after {
+	content: '\25CF\25CF\25CF \25AE 100%';
+	font-size: 0.625rem;
+	letter-spacing: 0.05em;
+	color: var(--rf-color-muted);
+}
+
+/* ── Home indicator ── */
+
+.rf-mockup__home-indicator {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 32px;
+	background: var(--rf-color-bg);
+}
+
+.rf-mockup__home-indicator::after {
+	content: '';
+	display: block;
+	width: 134px;
+	height: 5px;
+	background: var(--rf-color-text);
+	border-radius: var(--rf-radius-full);
+	opacity: 0.2;
+}
+
+/* ── iPhone 15 ── */
+
+.rf-mockup--iphone-15 .rf-mockup__frame {
+	--mockup-device-width: 393px;
+	width: 393px;
+	border-radius: 55px;
+}
+
+.rf-mockup--iphone-15 .rf-mockup__bezel {
+	border-radius: 55px;
+	border: 10px solid var(--mockup-bezel);
+}
+
+.rf-mockup--iphone-15 .rf-mockup__viewport {
+	height: 852px;
+	border-radius: 0;
+}
+
+/* ── iPhone SE ── */
+
+.rf-mockup--iphone-se .rf-mockup__frame {
+	--mockup-device-width: 375px;
+	width: 375px;
+	border-radius: 40px;
+}
+
+.rf-mockup--iphone-se .rf-mockup__bezel {
+	border-radius: 40px;
+	border: 10px solid var(--mockup-bezel);
+	padding-bottom: 60px;
+}
+
+.rf-mockup--iphone-se .rf-mockup__notch--classic {
+	position: relative;
+	top: auto;
+	left: auto;
+	transform: none;
+	width: 100%;
+	height: 60px;
+	background: var(--mockup-bezel);
+	border-radius: 0;
+}
+
+.rf-mockup--iphone-se .rf-mockup__bezel::after {
+	content: '';
+	position: absolute;
+	bottom: 14px;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 36px;
+	height: 36px;
+	border: 2px solid var(--mockup-chrome-text);
+	border-radius: var(--rf-radius-full);
+	opacity: 0.5;
+}
+
+.rf-mockup--iphone-se .rf-mockup__viewport {
+	height: 667px;
+}
+
+/* ── Pixel ── */
+
+.rf-mockup--pixel .rf-mockup__frame {
+	--mockup-device-width: 412px;
+	width: 412px;
+	border-radius: 40px;
+}
+
+.rf-mockup--pixel .rf-mockup__bezel {
+	border-radius: 40px;
+	border: 8px solid var(--mockup-bezel);
+}
+
+.rf-mockup--pixel .rf-mockup__viewport {
+	height: 915px;
+}
+
+/* ── Generic phone ── */
+
+.rf-mockup--phone .rf-mockup__frame {
+	--mockup-device-width: 390px;
+	width: 390px;
+	border-radius: 48px;
+}
+
+.rf-mockup--phone .rf-mockup__bezel {
+	border-radius: 48px;
+	border: 10px solid var(--mockup-bezel);
+}
+
+.rf-mockup--phone .rf-mockup__viewport {
+	height: 844px;
+}
+
+/* ═══════════════════════════════════════
+   TABLET DEVICES
+   ═══════════════════════════════════════ */
+
+/* ── iPad ── */
+
+.rf-mockup--ipad .rf-mockup__frame {
+	--mockup-device-width: 820px;
+	width: 820px;
+	border-radius: 24px;
+}
+
+.rf-mockup--ipad .rf-mockup__bezel {
+	border-radius: 24px;
+	border: 12px solid var(--mockup-bezel);
+}
+
+.rf-mockup--ipad .rf-mockup__viewport {
+	height: 1180px;
+}
+
+/* ── Generic tablet ── */
+
+.rf-mockup--tablet .rf-mockup__frame {
+	--mockup-device-width: 800px;
+	width: 800px;
+	border-radius: 20px;
+}
+
+.rf-mockup--tablet .rf-mockup__bezel {
+	border-radius: 20px;
+	border: 14px solid var(--mockup-bezel);
+}
+
+.rf-mockup--tablet .rf-mockup__viewport {
+	height: 1100px;
+}
+
+/* ═══════════════════════════════════════
+   DESKTOP DEVICES
+   ═══════════════════════════════════════ */
+
+/* ── Title bar (browser / macbook) ── */
+
+.rf-mockup__title-bar {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	padding: 0.625rem 1rem;
+	background: var(--mockup-chrome);
+	min-height: 2.5rem;
+}
+
+/* ── Traffic lights ── */
+
+.rf-mockup__traffic-lights {
+	display: flex;
+	gap: 0.5rem;
+	flex-shrink: 0;
+}
+
+.rf-mockup__traffic-light {
+	display: block;
+	width: 12px;
+	height: 12px;
+	border-radius: var(--rf-radius-full);
+}
+
+.rf-mockup__traffic-light--close {
+	background: #ff5f57;
+}
+
+.rf-mockup__traffic-light--minimize {
+	background: #febc2e;
+}
+
+.rf-mockup__traffic-light--maximize {
+	background: #28c840;
+}
+
+/* ── Address bar (browser only) ── */
+
+.rf-mockup__address-bar {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	max-width: 60%;
+	margin: 0 auto;
+	padding: 0.25rem 0.75rem;
+	background: rgba(255, 255, 255, 0.08);
+	border-radius: var(--rf-radius-sm);
+	min-height: 1.75rem;
+}
+
+.rf-mockup__url {
+	font-size: 0.75rem;
+	font-family: var(--rf-font-sans);
+	color: var(--mockup-chrome-text);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* ── Browser ── */
+
+.rf-mockup--browser .rf-mockup__frame {
+	width: 100%;
+	border-radius: var(--rf-radius-lg) var(--rf-radius-lg) 0 0;
+	overflow: hidden;
+}
+
+.rf-mockup--browser .rf-mockup__title-bar {
+	border-radius: var(--rf-radius-lg) var(--rf-radius-lg) 0 0;
+}
+
+.rf-mockup--browser .rf-mockup__viewport {
+	min-height: 12rem;
+	border: 1px solid var(--rf-color-border);
+	border-top: none;
+}
+
+/* ── Browser dark ── */
+
+.rf-mockup--browser-dark .rf-mockup__frame {
+	width: 100%;
+	border-radius: var(--rf-radius-lg) var(--rf-radius-lg) 0 0;
+	overflow: hidden;
+}
+
+.rf-mockup--browser-dark .rf-mockup__title-bar {
+	background: #1a1a1a;
+	border-radius: var(--rf-radius-lg) var(--rf-radius-lg) 0 0;
+}
+
+.rf-mockup--browser-dark .rf-mockup__address-bar {
+	background: rgba(255, 255, 255, 0.06);
+}
+
+.rf-mockup--browser-dark .rf-mockup__viewport {
+	min-height: 12rem;
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	border-top: none;
+}
+
+/* ── MacBook ── */
+
+.rf-mockup--macbook .rf-mockup__frame {
+	--mockup-device-width: 1440px;
+	width: 1440px;
+}
+
+.rf-mockup--macbook .rf-mockup__title-bar {
+	border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
+	border: 3px solid var(--mockup-bezel);
+	border-bottom: none;
+}
+
+.rf-mockup--macbook .rf-mockup__viewport {
+	min-height: 12rem;
+	border: 3px solid var(--mockup-bezel);
+	border-top: none;
+	border-bottom: none;
+}
+
+/* ── Keyboard ── */
+
+.rf-mockup__keyboard {
+	background: linear-gradient(to bottom, var(--mockup-bezel), color-mix(in srgb, var(--mockup-bezel), #000 15%));
+	padding: 0.5rem 2rem 0.75rem;
+	border-radius: 0 0 var(--rf-radius-md) var(--rf-radius-md);
+	display: flex;
+	justify-content: center;
+}
+
+.rf-mockup__trackpad {
+	width: 40%;
+	height: 6px;
+	background: color-mix(in srgb, var(--mockup-bezel), #fff 10%);
+	border-radius: var(--rf-radius-full);
+	margin-top: 0.25rem;
+}
+
+/* ═══════════════════════════════════════
+   SPECIAL DEVICES
+   ═══════════════════════════════════════ */
+
+/* ── Watch ── */
+
+.rf-mockup--watch .rf-mockup__frame {
+	--mockup-device-width: 198px;
+	width: 198px;
+	border-radius: 40px;
+	position: relative;
+}
+
+.rf-mockup--watch .rf-mockup__bezel {
+	border-radius: 40px;
+	border: 14px solid var(--mockup-bezel);
+}
+
+.rf-mockup--watch .rf-mockup__bezel::after {
+	content: '';
+	position: absolute;
+	right: -6px;
+	top: 35%;
+	width: 6px;
+	height: 28px;
+	background: var(--mockup-bezel);
+	border-radius: 0 3px 3px 0;
+}
+
+.rf-mockup--watch .rf-mockup__viewport {
+	height: 242px;
+	border-radius: 26px;
+}
+
+/* ── None (no frame) ── */
+
+.rf-mockup--none .rf-mockup__viewport {
+	border: 1px dashed var(--rf-color-border);
+	border-radius: var(--rf-radius-sm);
+}
+
+/* ═══════════════════════════════════════
+   CONTEXT: inside preview
+   ═══════════════════════════════════════ */
+
+.rf-grid .rf-mockup {
+	justify-self: center;
+}
+.rf-preview .rf-mockup {
+	margin: 0;
+}
+
+/* ═══════════════════════════════════════
+   DARK MODE
+   ═══════════════════════════════════════ */
+
+@media (prefers-color-scheme: dark) {
+	.rf-mockup--auto {
+		--mockup-bezel: var(--mockup-bezel-light);
+		--mockup-chrome: #3a3a3a;
+		--mockup-chrome-text: #aaa;
+	}
+
+	.rf-mockup--light .rf-mockup__address-bar {
+		background: rgba(0, 0, 0, 0.15);
+	}
+}

package/styles/runes/page-section.css

@@ -12,6 +12,7 @@
 	gap: 3rem;
 	align-items: start;
 }
+
 @media (max-width: 768px) {
 	.rf-page-section--split {
 		grid-template-columns: 1fr;