@orangecheck/design 0.28.3 → 0.28.4
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/dist/styles/sigil.css +19 -11
- package/package.json +1 -1
package/dist/styles/sigil.css
CHANGED
|
@@ -26,15 +26,17 @@
|
|
|
26
26
|
width: var(--oc-sigil-size, clamp(240px, 52vmin, 600px));
|
|
27
27
|
height: var(--oc-sigil-size, clamp(240px, 52vmin, 600px));
|
|
28
28
|
/* translucent: the whole relief composites at this alpha so the aurora and
|
|
29
|
-
page read through it (a watermark, not an opaque object)
|
|
30
|
-
|
|
29
|
+
page read through it (a watermark, not an opaque object). Light mode
|
|
30
|
+
rides higher — a mid-tone terracotta over a near-white page needs more
|
|
31
|
+
presence to read than the same mark over a dark page. */
|
|
32
|
+
opacity: var(--oc-sigil-opacity, 0.58);
|
|
31
33
|
/* soft edge fade so the mark dissolves into the field rather than ending in
|
|
32
34
|
a hard box (on the wrapper, which is safe for preserve-3d) */
|
|
33
35
|
-webkit-mask-image: radial-gradient(125% 125% at 55% 45%, #000 42%, transparent 90%);
|
|
34
36
|
mask-image: radial-gradient(125% 125% at 55% 45%, #000 42%, transparent 90%);
|
|
35
37
|
}
|
|
36
38
|
:root.dark .oc-sigil {
|
|
37
|
-
opacity: var(--oc-sigil-opacity, 0.
|
|
39
|
+
opacity: var(--oc-sigil-opacity, 0.52);
|
|
38
40
|
}
|
|
39
41
|
|
|
40
42
|
/* corner anchors — the bleed crops against the hero's overflow-hidden. Offsets
|
|
@@ -92,18 +94,24 @@
|
|
|
92
94
|
backface-visibility: hidden;
|
|
93
95
|
}
|
|
94
96
|
|
|
95
|
-
/* Phones:
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
97
|
+
/* Phones: single-column heroes stack tall, so a bottom anchor buries the mark
|
|
98
|
+
below the fold. Re-anchor to the TOP-RIGHT corner (clear of a left-aligned
|
|
99
|
+
headline) so it lands in the first viewport, and keep it quiet. This wins on
|
|
100
|
+
specificity + source order over the desktop corner classes above. */
|
|
99
101
|
@media (max-width: 640px) {
|
|
100
102
|
.oc-sigil {
|
|
101
|
-
width: var(--oc-sigil-size-sm, clamp(
|
|
102
|
-
height: var(--oc-sigil-size-sm, clamp(
|
|
103
|
-
opacity: var(--oc-sigil-opacity-sm, 0.
|
|
103
|
+
width: var(--oc-sigil-size-sm, clamp(170px, 56vw, 300px));
|
|
104
|
+
height: var(--oc-sigil-size-sm, clamp(170px, 56vw, 300px));
|
|
105
|
+
opacity: var(--oc-sigil-opacity-sm, 0.4);
|
|
104
106
|
}
|
|
105
107
|
:root.dark .oc-sigil {
|
|
106
|
-
opacity: var(--oc-sigil-opacity-sm, 0.
|
|
108
|
+
opacity: var(--oc-sigil-opacity-sm, 0.42);
|
|
109
|
+
}
|
|
110
|
+
.oc-sigil--bottom-left,
|
|
111
|
+
.oc-sigil--bottom-right,
|
|
112
|
+
.oc-sigil--top-left,
|
|
113
|
+
.oc-sigil--top-right {
|
|
114
|
+
inset: -5% -24% auto auto; /* top-right, cropped off the right edge */
|
|
107
115
|
}
|
|
108
116
|
}
|
|
109
117
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@orangecheck/design",
|
|
3
|
-
"version": "0.28.
|
|
3
|
+
"version": "0.28.4",
|
|
4
4
|
"description": "OrangeCheck design system — multi-theme tokens, primitives, and family composites for the .ochk.io sub-sites. Tailwind 4 + Next.js Pages Router. Not for third-party integration.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"orangecheck",
|