anentrypoint-design 0.0.299 → 0.0.301
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app-shell.css +0 -27
- package/colors_and_type.css +2 -3
- package/dist/247420.css +2 -30
- package/dist/247420.js +14 -14
- package/dist/index.html +1 -1
- package/package.json +1 -1
package/app-shell.css
CHANGED
|
@@ -773,16 +773,6 @@ a.row { text-decoration: none; }
|
|
|
773
773
|
max-width: var(--measure-wide);
|
|
774
774
|
position: relative; isolation: isolate;
|
|
775
775
|
}
|
|
776
|
-
/* Restrained depth wash, not a marketing glow-gradient: a single very-low-
|
|
777
|
-
opacity accent-ink radial anchored top-right, sitting under the grain/
|
|
778
|
-
halftone texture (z-index -1, same isolation trick as .ds-hero-aside::after)
|
|
779
|
-
so it reads as ambient light rather than a colored blob. Token-only. */
|
|
780
|
-
.ds-hero::before {
|
|
781
|
-
content: ''; position: absolute; z-index: -1;
|
|
782
|
-
top: -10%; right: -10%; width: 60%; height: 140%;
|
|
783
|
-
background: radial-gradient(closest-side, color-mix(in oklab, var(--accent-ink) 10%, transparent), transparent 70%);
|
|
784
|
-
pointer-events: none;
|
|
785
|
-
}
|
|
786
776
|
.ds-hero-head { grid-area: title; display: grid; gap: var(--space-3); }
|
|
787
777
|
.ds-hero-body { grid-area: body; }
|
|
788
778
|
/* The right column carries its own visual weight — a spined, halftone-
|
|
@@ -802,13 +792,6 @@ a.row { text-decoration: none; }
|
|
|
802
792
|
width: var(--bw-chunk); background: var(--accent);
|
|
803
793
|
border-radius: var(--bw-chunk) 0 0 var(--bw-chunk);
|
|
804
794
|
}
|
|
805
|
-
.ds-hero-aside::after {
|
|
806
|
-
content: ''; position: absolute; inset: 0; z-index: -1;
|
|
807
|
-
pointer-events: none;
|
|
808
|
-
background-image: radial-gradient(currentColor 1px, transparent 1.2px);
|
|
809
|
-
background-size: var(--halftone-size) var(--halftone-size);
|
|
810
|
-
opacity: 0.1; border-radius: inherit;
|
|
811
|
-
}
|
|
812
795
|
.ds-hero-stats { display: flex; flex-direction: column; gap: var(--space-2); }
|
|
813
796
|
.ds-hero-stat {
|
|
814
797
|
font-family: var(--ff-mono); font-size: var(--fs-sm);
|
|
@@ -884,16 +867,6 @@ a.row { text-decoration: none; }
|
|
|
884
867
|
opacity: var(--grain-opacity);
|
|
885
868
|
mix-blend-mode: var(--grain-blend);
|
|
886
869
|
}
|
|
887
|
-
/* Halftone dot screen — a heavier print tell for accent panels/hero. */
|
|
888
|
-
.ds-halftone { position: relative; isolation: isolate; }
|
|
889
|
-
.ds-halftone::after {
|
|
890
|
-
content: ''; position: absolute; inset: 0; z-index: -1;
|
|
891
|
-
pointer-events: none;
|
|
892
|
-
background-image: radial-gradient(currentColor 1px, transparent 1.2px);
|
|
893
|
-
background-size: var(--halftone-size) var(--halftone-size);
|
|
894
|
-
opacity: 0.12;
|
|
895
|
-
}
|
|
896
|
-
|
|
897
870
|
/* ============================================================
|
|
898
871
|
Marquee / ticker — brand kinetic device ("always open 24/7"). The track
|
|
899
872
|
holds two identical runs so the loop is seamless; reduced-motion freezes it
|
package/colors_and_type.css
CHANGED
|
@@ -228,12 +228,11 @@
|
|
|
228
228
|
--ease-exit: cubic-bezier(0.4, 0, 1, 1);
|
|
229
229
|
|
|
230
230
|
/* Print texture — the signature surface treatment. --grain is a tiled
|
|
231
|
-
fractal-noise data-URI
|
|
232
|
-
|
|
231
|
+
fractal-noise data-URI, opt-in via the .ds-grain utility and tuned faint
|
|
232
|
+
so type stays crisp. */
|
|
233
233
|
--grain-opacity: 0.05;
|
|
234
234
|
--grain-blend: multiply;
|
|
235
235
|
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
236
|
-
--halftone-size: 6px;
|
|
237
236
|
/* Offset-ink registration — the small print-mark offset used on editorial
|
|
238
237
|
edges (panel spine, expo numbering). A literal length, not a color. */
|
|
239
238
|
--ink-offset: 3px;
|
package/dist/247420.css
CHANGED
|
@@ -230,12 +230,11 @@
|
|
|
230
230
|
--ease-exit: cubic-bezier(0.4, 0, 1, 1);
|
|
231
231
|
|
|
232
232
|
/* Print texture — the signature surface treatment. --grain is a tiled
|
|
233
|
-
fractal-noise data-URI
|
|
234
|
-
|
|
233
|
+
fractal-noise data-URI, opt-in via the .ds-grain utility and tuned faint
|
|
234
|
+
so type stays crisp. */
|
|
235
235
|
--grain-opacity: 0.05;
|
|
236
236
|
--grain-blend: multiply;
|
|
237
237
|
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
238
|
-
--halftone-size: 6px;
|
|
239
238
|
/* Offset-ink registration — the small print-mark offset used on editorial
|
|
240
239
|
edges (panel spine, expo numbering). A literal length, not a color. */
|
|
241
240
|
--ink-offset: 3px;
|
|
@@ -1310,16 +1309,6 @@
|
|
|
1310
1309
|
max-width: var(--measure-wide);
|
|
1311
1310
|
position: relative; isolation: isolate;
|
|
1312
1311
|
}
|
|
1313
|
-
/* Restrained depth wash, not a marketing glow-gradient: a single very-low-
|
|
1314
|
-
opacity accent-ink radial anchored top-right, sitting under the grain/
|
|
1315
|
-
halftone texture (z-index -1, same isolation trick as .ds-hero-aside::after)
|
|
1316
|
-
so it reads as ambient light rather than a colored blob. Token-only. */
|
|
1317
|
-
.ds-247420 .ds-hero::before {
|
|
1318
|
-
content: ''; position: absolute; z-index: -1;
|
|
1319
|
-
top: -10%; right: -10%; width: 60%; height: 140%;
|
|
1320
|
-
background: radial-gradient(closest-side, color-mix(in oklab, var(--accent-ink) 10%, transparent), transparent 70%);
|
|
1321
|
-
pointer-events: none;
|
|
1322
|
-
}
|
|
1323
1312
|
.ds-247420 .ds-hero-head { grid-area: title; display: grid; gap: var(--space-3); }
|
|
1324
1313
|
.ds-247420 .ds-hero-body { grid-area: body; }
|
|
1325
1314
|
/* The right column carries its own visual weight — a spined, halftone-
|
|
@@ -1339,13 +1328,6 @@
|
|
|
1339
1328
|
width: var(--bw-chunk); background: var(--accent);
|
|
1340
1329
|
border-radius: var(--bw-chunk) 0 0 var(--bw-chunk);
|
|
1341
1330
|
}
|
|
1342
|
-
.ds-247420 .ds-hero-aside::after {
|
|
1343
|
-
content: ''; position: absolute; inset: 0; z-index: -1;
|
|
1344
|
-
pointer-events: none;
|
|
1345
|
-
background-image: radial-gradient(currentColor 1px, transparent 1.2px);
|
|
1346
|
-
background-size: var(--halftone-size) var(--halftone-size);
|
|
1347
|
-
opacity: 0.1; border-radius: inherit;
|
|
1348
|
-
}
|
|
1349
1331
|
.ds-247420 .ds-hero-stats { display: flex; flex-direction: column; gap: var(--space-2); }
|
|
1350
1332
|
.ds-247420 .ds-hero-stat {
|
|
1351
1333
|
font-family: var(--ff-mono); font-size: var(--fs-sm);
|
|
@@ -1421,16 +1403,6 @@
|
|
|
1421
1403
|
opacity: var(--grain-opacity);
|
|
1422
1404
|
mix-blend-mode: var(--grain-blend);
|
|
1423
1405
|
}
|
|
1424
|
-
/* Halftone dot screen — a heavier print tell for accent panels/hero. */
|
|
1425
|
-
.ds-247420 .ds-halftone { position: relative; isolation: isolate; }
|
|
1426
|
-
.ds-247420 .ds-halftone::after {
|
|
1427
|
-
content: ''; position: absolute; inset: 0; z-index: -1;
|
|
1428
|
-
pointer-events: none;
|
|
1429
|
-
background-image: radial-gradient(currentColor 1px, transparent 1.2px);
|
|
1430
|
-
background-size: var(--halftone-size) var(--halftone-size);
|
|
1431
|
-
opacity: 0.12;
|
|
1432
|
-
}
|
|
1433
|
-
|
|
1434
1406
|
/* ============================================================
|
|
1435
1407
|
Marquee / ticker — brand kinetic device ("always open 24/7"). The track
|
|
1436
1408
|
holds two identical runs so the loop is seamless; reduced-motion freezes it
|