mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
Youssef
9f907ad38e
Each .ex-card div is now an <a target="_blank" rel="noopener"> wrapping the same content. The hover-play video, prompt line, and .ex-card styles all work unchanged (the class already had color: inherit + focus-visible). Added one CSS line — text-decoration: none on .ex-card — so the <a> doesn't underline the card. Linked destinations: - examples/tally/ — SaaS, modern-minimal (from /Users/youssef/test-hallmark-9) - examples/wayfare/ — travel booking, atmospheric (from test-hallmark-12) - _tests/09-slow-pour/ — small-batch coffee subscription (already in site) - examples/bananastudio/ — creative studio with playful motion (from test-hallmark-6) - _tests/06-anya-portfolio/ — software architect personal site (already in site) - examples/najm/ — Moroccan fashion (from test-hallmark-7) - _tests/11-soroe-ceramics/ — small ceramics studio (already in site) - examples/hyperlane/ — developer infrastructure (from test-hallmark-15) site/examples/ adds ~308 KB total across the 5 copied projects. The other 3 already live under site/_tests/ so no copying needed for them.
101 lines
2.8 KiB
CSS
101 lines
2.8 KiB
CSS
/* Hallmark · macrostructure: Marquee Hero · genre: modern-minimal · theme: Pastel
|
|
* paper-band: light · display-style: geometric-sans · accent-hue: cool-indigo
|
|
* nav: N5 Floating pill · footer: Ft5 Statement
|
|
*/
|
|
|
|
:root {
|
|
/* Paper / ink — cool-pastel band */
|
|
--color-paper-0: oklch(98.4% 0.005 258);
|
|
/* page paper */
|
|
--color-paper-1: oklch(96.2% 0.010 258);
|
|
/* card */
|
|
--color-paper-2: oklch(93.0% 0.015 258);
|
|
/* elevated card */
|
|
--color-paper-3: oklch(89.0% 0.020 258);
|
|
/* hairline tint */
|
|
--color-ink-0: oklch(18.0% 0.030 258);
|
|
/* primary ink */
|
|
--color-ink-1: oklch(35.0% 0.025 258);
|
|
/* body */
|
|
--color-ink-2: oklch(52.0% 0.018 258);
|
|
/* secondary */
|
|
--color-ink-3: oklch(70.0% 0.012 258);
|
|
/* mute */
|
|
|
|
/* Accent — indigo with companion lime */
|
|
--color-accent: oklch(54.0% 0.220 268);
|
|
/* primary indigo */
|
|
--color-accent-soft: oklch(72.0% 0.140 268);
|
|
--color-accent-tint: oklch(94.0% 0.040 268);
|
|
--color-companion: oklch(82.0% 0.180 130);
|
|
/* lime — sparingly */
|
|
--color-warning: oklch(74.0% 0.180 50);
|
|
/* amber */
|
|
--color-success: oklch(68.0% 0.150 145);
|
|
/* green */
|
|
|
|
/* Focus ring — distinct from accent so contrast holds */
|
|
--color-focus: oklch(46.0% 0.220 268);
|
|
|
|
/* Typography — Geist + Geist Mono via Google Fonts */
|
|
--font-display: "Geist", ui-sans-serif, system-ui, sans-serif;
|
|
--font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
|
|
--font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
|
|
--font-italic: "Instrument Serif", "Times New Roman", serif;
|
|
/* italic accent */
|
|
|
|
/* Type scale — modular, tight */
|
|
--text-xs: 0.75rem;
|
|
--text-sm: 0.875rem;
|
|
--text-base: 1rem;
|
|
--text-md: 1.125rem;
|
|
--text-lg: 1.375rem;
|
|
--text-xl: 1.75rem;
|
|
--text-2xl: 2.5rem;
|
|
--text-3xl: 3.5rem;
|
|
--text-4xl: clamp(2rem, 7vw, 4rem);
|
|
--text-5xl: clamp(2rem, 10vw, 5rem);
|
|
|
|
/* Spacing — 4pt scale */
|
|
--space-2xs: 0.25rem;
|
|
--space-xs: 0.5rem;
|
|
--space-sm: 0.75rem;
|
|
--space-md: 1rem;
|
|
--space-lg: 1.5rem;
|
|
--space-xl: 2rem;
|
|
--space-2xl: 3rem;
|
|
--space-3xl: 5rem;
|
|
--space-4xl: 8rem;
|
|
|
|
/* Radius */
|
|
--radius-sm: 6px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 20px;
|
|
--radius-xl: 28px;
|
|
--radius-pill: 999px;
|
|
|
|
/* Lines */
|
|
--rule-hair: 1px solid color-mix(in oklch, var(--color-ink-0) 8%, transparent);
|
|
--rule-soft: 1px solid color-mix(in oklch, var(--color-ink-0) 14%, transparent);
|
|
|
|
/* Easings + durations */
|
|
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
--ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
|
|
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
|
|
|
--dur-fast: 140ms;
|
|
--dur-mid: 240ms;
|
|
--dur-slow: 420ms;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 140ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
} |