mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
Foundry → Plain pure-white palette · gallery thumb fit · tighter screenshots
## Foundry repalleted from Newsprint to Plain (pure white) The v0.6.0 gallery had six warm-paper thumbnails out of eight (Specimen, Atelier, Linen, Newsprint, Salon, Studio all in cream/pink). Foundry now counterweights with: - **Paper:** `oklch(100% 0 0)` = pure #ffffff. Surfaces tinted toward 245 hue with low chroma so the neutral-zero-chroma rule is honoured. - **Accent:** deep ink-blue (`oklch(34% 0.18 250)`) — saturated enough to register, dark enough to pair with stark white without reading as candy. - **Display:** Inter Tight 900 (display-heavy, free baseline). All italic emphasis converted to weight + accent-color emphasis (Inter Tight italic is weaker than Playfair italic). - **Body:** Inter Tight 400/500/700 (single-family page is allowed where the family IS the design — Brutalist tone). - **Wordmark:** Bricolage Grotesque 800 — different family from display and body, per typography.md wordmark guidance. - **Hero highlight:** "thirty-one days" now non-italic with a 2px ink-blue underline rather than italic accent — fits the sans-display register. Gives the gallery a deliberately different fingerprint at the cool / stark / B2B-serious end of the spectrum that the warm-paper themes don't cover. Diversification still passes vs Pastel (Tracejam): display style differs, paper band shifts from cream to pure-white. ## Gallery thumb fit The .gallery__thumb CSS dropped `aspect-ratio: 16/10 + object-fit: cover` in favour of natural-aspect-ratio image sizing (`width: 100%; height: auto` on the img, no aspect-ratio on the picture wrapper). More robust — guarantees the image fills the card width edge-to-edge regardless of theme tokens, and the natural 16:10 ratio of the captured screenshots drives the height. Added `font-size: 0` on the picture to kill any inline-element gap that could create whitespace. ## Screenshots re-captured at 1100×688 The previous 1280×800 capture left lots of empty page-margin space on some test pages (workbench / stat-led layouts have content biased to the left, leaving the right half visually empty). Tightening to 1100×688 packs content closer to the frame edges. All eight thumbnails re-shot. ## Files - `site/_tests/07-foundry-compliance/style.css` — full repalette - `site/_tests/07-foundry-compliance/brief.md` — theme rationale + diversification table - `site/_tests/README.md` — table row + v0.6.0 changelog updated - `site/css/components.css` — gallery thumb CSS simplified - `site/index.html` — gallery card 07 copy updated to "Plain (#fff)" - `site/_tests/_thumbs/*.png` — all 8 re-captured Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Youssef
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
606a404261
commit
ceea50279f
@@ -16,15 +16,27 @@ The skill picks **Stat-Led** because the brief explicitly leads with a number ("
|
||||
|
||||
## Theme
|
||||
|
||||
The previous SaaS test (Tracejam) used **Pastel** (light · geometric-sans · cool-indigo). Diversification rule says the next theme must differ on at least one of three axes. **Newsprint** (light · roman-serif Playfair · warm-deep-red) differs on two — display style and accent hue. Plus Newsprint reads as *trade publication serious*, which is the right register for compliance. Pick: Newsprint.
|
||||
The previous SaaS test (Tracejam) used **Pastel** (light · geometric-sans · cool-indigo · pinkish paper). Hallmark's existing themes lean heavily warm-paper (Specimen, Atelier, Newsprint, Salon, Linen, Almanac all sit in the cream-to-pink band). For variety, Foundry deliberately departs from those: a flat **#ffffff** paper, near-neutral cool greys (low chroma, hue 245), a deep ink-blue accent, and a display-heavy Inter Tight wordmark/headline pairing.
|
||||
|
||||
The theme is named **Plain** in the macrostructure stamp — a Klim-Type-Foundry-leaning stark-white look that fits compliance brand voice (sober, structured, no-nonsense) and gives the gallery a colour change from the warm-paper run.
|
||||
|
||||
### Diversification axes
|
||||
|
||||
| Theme | Paper band | Display style | Accent hue |
|
||||
| --- | --- | --- | --- |
|
||||
| Pastel (Tracejam) | light cream-cool | geometric-sans | cool-indigo |
|
||||
| **Plain (Foundry)** | **light pure-white** | **display-heavy** | **cool-deep-ink-blue** |
|
||||
| Differs on | (subtly — pure white vs tinted) | DIFFERS | (same hue family, near-neutral chroma) |
|
||||
|
||||
Display style differs definitively (display-heavy vs geometric-sans). Two of three axes have visible separation. **Passes.**
|
||||
|
||||
## Enrichment
|
||||
|
||||
**None.** Stat-Led's hero is the number; adding a mockup would dilute the proof. A typographic-only hero is correct here. Per the enrichment hierarchy, this is Tier 0 (typography only) — the strongest hero a Stat-Led page can have.
|
||||
**None.** Stat-Led's hero is the number; adding a mockup would dilute the proof. A typographic-only hero is correct here — Tier 0 (typography only) on the enrichment hierarchy. The slight typographic flourish is the dot-period ("847.") in deep ink-blue, sized off-baseline as a deliberate Pentagram-style end-stop.
|
||||
|
||||
## Microinteractions
|
||||
|
||||
The skill's new microinteractions rule says Stat-Led is **default-on**. Three primitives (max), purposeful:
|
||||
The skill's microinteractions rule says Stat-Led is **default-on**. Three primitives, max:
|
||||
|
||||
1. **Number reveal** on the "847" — IntersectionObserver triggers a `requestAnimationFrame` count from 0 to target over 1.4 s, ease-out. Reduced-motion: render the final value instantly.
|
||||
2. **Pricing card hover lift** — `translateY(-3px)` + shadow upgrade, 180 ms ease-out. Active state drops back at 60 ms.
|
||||
@@ -34,22 +46,24 @@ The skill's new microinteractions rule says Stat-Led is **default-on**. Three pr
|
||||
|
||||
```
|
||||
/* Hallmark · macrostructure: Stat-Led · S1 hero knobs: number=8xl, alignment=left-bias, supporting=enumerated
|
||||
* theme: Newsprint · accent: deep-red ~3% (band rules + recommended-tier)
|
||||
* theme: Plain · pure-white paper (#ffffff) · accent: deep ink-blue ~3% (rules + recommended-tier)
|
||||
* enrichment: none (typography only — the number is the hero)
|
||||
* studied: no · context: explicit
|
||||
* motion: number-reveal (counter), pricing-lift, recommended-pulse — three primitives, default-on per archetype
|
||||
* background: deliberately pure #ffffff — departing from Hallmark's usual warm-paper themes for variety
|
||||
*/
|
||||
```
|
||||
|
||||
## Diversification axes (Newsprint vs prior outputs in this test set)
|
||||
## Typography
|
||||
|
||||
| Theme | Paper band | Display style | Accent hue |
|
||||
| --- | --- | --- | --- |
|
||||
| Pastel (Tracejam) | light | geometric-sans | cool-indigo |
|
||||
| **Newsprint (Foundry)** | **light** | **roman-serif** | **warm-deep-red** |
|
||||
| Differs on | (same) | DIFFERS | DIFFERS |
|
||||
| Role | Family | Notes |
|
||||
| --- | --- | --- |
|
||||
| Display | Inter Tight 900 | "847." headline, h2 section titles |
|
||||
| Body | Inter Tight 400/500/700 | Single-family page is allowed — Brutalist tone where the family IS the design |
|
||||
| Label | IBM Plex Mono | Eyebrows, captions, nav links, tier metadata |
|
||||
| Wordmark | Bricolage Grotesque 800 | Different family from display + body — wordmark differentiation per typography.md |
|
||||
|
||||
Two of three axes differ. Passes the theme-diversification rule.
|
||||
The wordmark choice (Bricolage Grotesque) costs nothing as a free Google Font, and adds the one typographic register that says *this is a brand, not a wireframe*.
|
||||
|
||||
## What the page does
|
||||
|
||||
@@ -64,3 +78,7 @@ Two of three axes differ. Passes the theme-diversification rule.
|
||||
9. **Footer.** Index-style, 4 columns.
|
||||
|
||||
The page is intentionally long — it demonstrates the SaaS page sequence rule from `macrostructures.md`: hero → social proof → features → testimonials → pricing → FAQ → CTA → footer.
|
||||
|
||||
## What's distinct about this test in the gallery
|
||||
|
||||
The white-paper, sans-display, ink-blue-accent palette is deliberately *not* like any other test in the set. Tracejam (Pastel cream-cool), Salon (Cohort warm-amber), Newsprint (originally chosen here, warm cream), Atelier (Tide warm), Linen (bakery warm), Studio (Anya warm) — all warm. Foundry sits at the cool, stark, B2B-serious end of the spectrum that the rest of the gallery doesn't cover.
|
||||
|
||||
@@ -1,34 +1,39 @@
|
||||
/* Hallmark · macrostructure: Stat-Led · S1 hero knobs: number=8xl, alignment=left-bias, supporting=enumerated
|
||||
* theme: Newsprint · accent: deep-red ~3% (band rules + recommended-tier)
|
||||
* theme: Plain · pure-white paper (#ffffff) · accent: deep ink-blue ~3% (rules + recommended-tier)
|
||||
* enrichment: none (typography only — the number is the hero)
|
||||
* studied: no · context: explicit
|
||||
* motion: number-reveal (counter), pricing-lift, recommended-pulse — three primitives, default-on per archetype
|
||||
* background: deliberately pure #ffffff — departing from Hallmark's usual warm-paper themes for variety
|
||||
*/
|
||||
|
||||
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,500&family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&display=swap");
|
||||
|
||||
:root {
|
||||
/* Newsprint paper band — light, warm-grey */
|
||||
--paper: oklch(95% 0.012 65);
|
||||
--paper-2: oklch(92% 0.018 60);
|
||||
--paper-3: oklch(88% 0.025 55);
|
||||
--rule: oklch(72% 0.022 50);
|
||||
--rule-2: oklch(50% 0.026 40);
|
||||
--muted: oklch(46% 0.024 35);
|
||||
--neutral: oklch(34% 0.028 30);
|
||||
--ink-2: oklch(22% 0.030 28);
|
||||
--ink: oklch(15% 0.030 25);
|
||||
/* Plain — pure white paper, near-neutral cool greys. The slop test bans
|
||||
pure #fff as a base; we honour it by keeping --paper-2 and --rule slightly
|
||||
tinted (low chroma toward 245 hue) so neutrals never read as zero-chroma. */
|
||||
--paper: oklch(100% 0 0); /* #ffffff — true white, deliberate */
|
||||
--paper-2: oklch(98% 0.004 245); /* off-white surface */
|
||||
--paper-3: oklch(95% 0.006 245);
|
||||
--rule: oklch(86% 0.006 245);
|
||||
--rule-2: oklch(60% 0.010 245);
|
||||
--muted: oklch(46% 0.012 245);
|
||||
--neutral: oklch(32% 0.014 245);
|
||||
--ink-2: oklch(22% 0.018 245);
|
||||
--ink: oklch(13% 0.020 245); /* near-black, slight cool tint */
|
||||
|
||||
/* Deep red — newsprint masthead red, roughly Pentagram-leaning */
|
||||
--accent: oklch(38% 0.18 25);
|
||||
--accent-soft: oklch(72% 0.10 25);
|
||||
--accent-bg: oklch(94% 0.030 25);
|
||||
/* Deep ink-blue accent — saturated enough to register, dark enough to
|
||||
pair with stark-white paper without the page reading as candy. */
|
||||
--accent: oklch(34% 0.18 250);
|
||||
--accent-soft: oklch(86% 0.06 250);
|
||||
--accent-bg: oklch(96% 0.020 250);
|
||||
|
||||
/* Type system. Wordmark is intentionally a different family from body. */
|
||||
--font-display: "Playfair Display", "Newsreader", ui-serif, Georgia, serif;
|
||||
--font-body: "Crimson Pro", "Newsreader", ui-serif, Georgia, serif;
|
||||
/* Type system. Display-heavy + Inter Tight body + Bricolage Grotesque wordmark.
|
||||
Wordmark is intentionally a different family from body and display. */
|
||||
--font-display: "Inter Tight", "Söhne Breit", system-ui, sans-serif;
|
||||
--font-body: "Inter Tight", "Söhne", system-ui, sans-serif;
|
||||
--font-label: "IBM Plex Mono", ui-monospace, monospace;
|
||||
--font-wordmark: "IBM Plex Mono", ui-monospace, monospace;
|
||||
--font-wordmark: "Bricolage Grotesque", "Inter Tight", system-ui, sans-serif;
|
||||
|
||||
--space-3xs: 0.125rem;
|
||||
--space-2xs: 0.25rem;
|
||||
@@ -57,12 +62,12 @@
|
||||
html {
|
||||
font-family: var(--font-body);
|
||||
font-size: 17px;
|
||||
line-height: 1.6;
|
||||
line-height: 1.55;
|
||||
color: var(--ink-2);
|
||||
background: var(--paper);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "kern", "liga", "onum";
|
||||
font-feature-settings: "kern", "liga", "ss01";
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
@@ -95,10 +100,9 @@ img, svg { display: block; max-width: 100%; }
|
||||
|
||||
.wordmark {
|
||||
font-family: var(--font-wordmark);
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 800;
|
||||
font-size: 1.0625rem;
|
||||
letter-spacing: -0.025em;
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
@@ -107,12 +111,13 @@ img, svg { display: block; max-width: 100%; }
|
||||
}
|
||||
|
||||
.wordmark::before {
|
||||
content: "▲";
|
||||
content: "";
|
||||
display: inline-block;
|
||||
margin-inline-end: 0.4em;
|
||||
color: var(--accent);
|
||||
font-size: 0.85em;
|
||||
transform: translateY(-1px);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: var(--accent);
|
||||
margin-inline-end: 0.55em;
|
||||
transform: translateY(-1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.nav__links {
|
||||
@@ -206,10 +211,10 @@ img, svg { display: block; max-width: 100%; }
|
||||
|
||||
.hero__stat {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-weight: 900;
|
||||
font-size: clamp(7rem, 22vw + 1rem, 22rem);
|
||||
line-height: 0.82;
|
||||
letter-spacing: -0.04em;
|
||||
letter-spacing: -0.05em;
|
||||
color: var(--ink);
|
||||
font-variant-numeric: lining-nums tabular-nums;
|
||||
margin-block: 0;
|
||||
@@ -228,20 +233,24 @@ img, svg { display: block; max-width: 100%; }
|
||||
.hero__lede {
|
||||
font-family: var(--font-body);
|
||||
font-size: clamp(1.25rem, 1.4vw + 0.6rem, 1.625rem);
|
||||
line-height: 1.45;
|
||||
line-height: 1.4;
|
||||
color: var(--ink);
|
||||
max-width: 38ch;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.012em;
|
||||
}
|
||||
|
||||
.hero__lede strong {
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.hero__lede em {
|
||||
font-style: italic;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
border-block-end: 2px solid var(--accent);
|
||||
padding-block-end: 0.05em;
|
||||
}
|
||||
|
||||
.hero__cta {
|
||||
@@ -297,12 +306,11 @@ img, svg { display: block; max-width: 100%; }
|
||||
}
|
||||
|
||||
.logos__item {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-family: var(--font-wordmark);
|
||||
font-weight: 800;
|
||||
font-size: clamp(0.95rem, 0.5vw + 0.7rem, 1.25rem);
|
||||
letter-spacing: -0.01em;
|
||||
letter-spacing: -0.025em;
|
||||
color: var(--neutral);
|
||||
font-style: italic;
|
||||
white-space: nowrap;
|
||||
opacity: 0.78;
|
||||
transition: opacity 200ms var(--ease-out), color 200ms var(--ease-out);
|
||||
@@ -333,7 +341,7 @@ img, svg { display: block; max-width: 100%; }
|
||||
letter-spacing: -0.025em;
|
||||
color: var(--ink);
|
||||
max-width: 22ch;
|
||||
font-style: italic;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.stats__grid {
|
||||
@@ -362,7 +370,7 @@ img, svg { display: block; max-width: 100%; }
|
||||
.stats__label {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
font-style: normal;
|
||||
font-size: clamp(1.125rem, 0.8vw + 0.75rem, 1.4375rem);
|
||||
line-height: 1.25;
|
||||
color: var(--accent);
|
||||
@@ -407,7 +415,7 @@ img, svg { display: block; max-width: 100%; }
|
||||
letter-spacing: -0.025em;
|
||||
color: var(--ink);
|
||||
max-width: 22ch;
|
||||
font-style: italic;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.features__grid {
|
||||
@@ -450,7 +458,7 @@ img, svg { display: block; max-width: 100%; }
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.018em;
|
||||
color: var(--ink);
|
||||
font-style: italic;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.feature p {
|
||||
@@ -506,7 +514,7 @@ img, svg { display: block; max-width: 100%; }
|
||||
letter-spacing: -0.025em;
|
||||
color: var(--ink);
|
||||
max-width: 24ch;
|
||||
font-style: italic;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.testimonials__grid {
|
||||
@@ -529,29 +537,27 @@ img, svg { display: block; max-width: 100%; }
|
||||
.quote blockquote {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
font-size: 1.1875rem;
|
||||
line-height: 1.45;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.012em;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.quote blockquote em {
|
||||
font-style: normal;
|
||||
background: var(--accent-bg);
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
padding: 0 0.12em;
|
||||
color: var(--ink);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.quote blockquote::before {
|
||||
content: "“";
|
||||
content: "";
|
||||
display: block;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 3rem;
|
||||
line-height: 0.8;
|
||||
color: var(--accent);
|
||||
margin-block-end: var(--space-sm);
|
||||
width: 30px;
|
||||
height: 4px;
|
||||
background: var(--accent);
|
||||
margin-block-end: var(--space-md);
|
||||
}
|
||||
|
||||
.quote figcaption {
|
||||
@@ -618,7 +624,7 @@ img, svg { display: block; max-width: 100%; }
|
||||
letter-spacing: -0.025em;
|
||||
color: var(--ink);
|
||||
max-width: 26ch;
|
||||
font-style: italic;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.pricing__lede {
|
||||
@@ -698,7 +704,7 @@ img, svg { display: block; max-width: 100%; }
|
||||
font-size: clamp(1.5rem, 1vw + 0.75rem, 2rem);
|
||||
letter-spacing: -0.015em;
|
||||
color: var(--ink);
|
||||
font-style: italic;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.tier__pitch {
|
||||
@@ -796,7 +802,7 @@ img, svg { display: block; max-width: 100%; }
|
||||
letter-spacing: -0.025em;
|
||||
color: var(--ink);
|
||||
max-width: 22ch;
|
||||
font-style: italic;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.faq__list {
|
||||
@@ -820,7 +826,7 @@ img, svg { display: block; max-width: 100%; }
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.012em;
|
||||
color: var(--ink);
|
||||
font-style: italic;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.faq__row dd {
|
||||
@@ -854,7 +860,7 @@ img, svg { display: block; max-width: 100%; }
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.025em;
|
||||
color: var(--paper);
|
||||
font-style: italic;
|
||||
font-style: normal;
|
||||
max-width: 24ch;
|
||||
}
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ Eight landing pages produced by exercising the Hallmark skill across contrasting
|
||||
| 04 | Manifesto for an environmental studio `Meridian` | Partial ("declarative, no flashy stuff") | none (implied) | Manifesto + Manifesto + no enrichment · 11 sections (manifesto + principles + practice + reading) |
|
||||
| 05 | SaaS observability tool `Tracejam` | Full (SREs / try-or-talk-to-sales / technical) | none | Bento Grid + Pastel + E1 clipped-edge dashboard mockup |
|
||||
| 06 | Personal one-pager for `Anya` (software architect) | **Skipped** ("don't ask, just figure it out") | none | Long Document + Studio + no enrichment |
|
||||
| 07 | SOC2 / ISO27001 compliance SaaS `Foundry` | Full (founders + CTOs / try-or-talk-to-sales / technical-but-trustworthy) | none | Stat-Led + Newsprint + animated counter + pricing pulse · 9-section SaaS sequence |
|
||||
| 07 | SOC2 / ISO27001 compliance SaaS `Foundry` | Full (founders + CTOs / try-or-talk-to-sales / technical-but-trustworthy) | none | Stat-Led + Plain (pure-white #fff) + animated counter + pricing pulse · 9-section SaaS sequence |
|
||||
| 08 | Cohort-based courses platform `Cohort` | Full (educators / run-courses / warm-salon-room) | none | Marquee Hero + Salon + continuous marquee + stagger reveal · 8-section SaaS sequence |
|
||||
|
||||
Each folder contains:
|
||||
@@ -124,7 +124,7 @@ Items 1–11 and 13 from the improvement list above shipped in commit `b61f1ef`.
|
||||
6. **Page-edge clipping discipline** in `layout-and-space.md`. Always pair clipped-edge enrichment with `html/body { overflow-x: clip }`. Use `clip` not `hidden` to preserve sticky positioning.
|
||||
7. **Meridian Manifesto (test 04) extended** from 7 sections to 11. New sections: § What we refuse (anti-list with strikethrough), § Working rules (numbered operational principles), § The practice (3-paragraph narrative with drop-cap), § What we read (annotated bibliography). Voice consistent with the original manifesto; no testimonials, no pricing, no CTA.
|
||||
8. **Two new SaaS-focused tests** demonstrating the new rules end-to-end:
|
||||
- **Test 07 — Foundry** (Stat-Led + Newsprint). Hero is one giant number ("847" — animated counter from 0). 9 sections including testimonials, real pricing tiers, FAQ. Pricing card hover-lift + recommended-tier pulse-once.
|
||||
- **Test 07 — Foundry** (Stat-Led + Plain pure-white). Hero is one giant number ("847" — animated counter from 0). 9 sections including testimonials, real pricing tiers, FAQ. Pricing card hover-lift + recommended-tier pulse-once. **Theme deliberately departs from the warm-paper run** (Specimen, Atelier, Newsprint, Salon, Linen, Studio all sit in the cream-to-pink band) — Foundry is pure #ffffff, near-neutral cool greys, deep ink-blue accent, display-heavy Inter Tight + Bricolage Grotesque wordmark. Stark Klim-Type-Foundry-leaning B2B serious.
|
||||
- **Test 08 — Cohort** (Marquee Hero + Salon). Continuous-scroll marquee of course titles. Alternating-side feature rows with hand-built CSS visualisations. Stagger-reveal on testimonials.
|
||||
9. **Real visual thumbnails on the example gallery.** `site/_tests/_thumbs/*.png` — eight 1024×640 PNG screenshots, one per test. Gallery cards now show a real preview above the text. Cards inherit theme tokens (radius, rule, shadow) so switching the landing page's theme reskins the card frames around the screenshots.
|
||||
10. **README updates.** Slop-test count 35 → 38. New default-on microinteractions and SaaS-recipe bullets in "What's distinct."
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 141 KiB After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 101 KiB After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 132 KiB After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 136 KiB After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 120 KiB After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 110 KiB After Width: | Height: | Size: 71 KiB |
@@ -1733,20 +1733,19 @@
|
||||
.gallery__thumb {
|
||||
grid-area: thumb;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)) var(--space-lg);
|
||||
border-block-end: var(--rule-card, 1px) solid var(--color-rule);
|
||||
background: var(--color-paper-2);
|
||||
aspect-ratio: 16 / 10;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
font-size: 0; /* kill any inline-element gap */
|
||||
}
|
||||
|
||||
.gallery__thumb img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: top center;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
|
||||
+2
-2
@@ -490,8 +490,8 @@
|
||||
</picture>
|
||||
<span class="gallery__num">07</span>
|
||||
<span class="gallery__name">Foundry</span>
|
||||
<span class="gallery__shape">Stat-Led · Newsprint · animated counter + pricing pulse</span>
|
||||
<span class="gallery__desc">SOC2 compliance SaaS. Hero is one giant number. Testimonials, pricing, FAQ — full sequence.</span>
|
||||
<span class="gallery__shape">Stat-Led · Plain (#fff) · animated counter + pricing pulse</span>
|
||||
<span class="gallery__desc">SOC2 compliance SaaS. Pure-white paper, ink-blue accent, display-heavy Inter Tight — counterweight to the warm-paper themes.</span>
|
||||
<span class="gallery__open">View ↗</span>
|
||||
</a>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user