-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathexamples.css
More file actions
270 lines (255 loc) · 16.6 KB
/
Copy pathexamples.css
File metadata and controls
270 lines (255 loc) · 16.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
/* Examples gallery — the listing page: hero, category grids, the featured card,
and the example cards (card art + tags + footer). Tags use the shared
.t-pill / .t-overlay primitives. Docs-only; the docs examples page imports this.
Moved out of the docs repo so examples styling lives in @cocoindex/brand. */
@import './doc-hero.css';
/* ═══════════ Listing-specific styles ═══════════
Scoped to body.ex-listing so they don't leak into the rest of the
docs site. Values are lifted verbatim from the design guide. */
body.ex-listing { font-size: var(--text-base); line-height: 1.55; }
body.ex-listing .ex-wrap {
max-width: 1440px; margin: 0 auto; padding: 0 40px;
}
/* ── HERO ── */
body.ex-listing .ex-hero { padding: 72px 0 48px; border-bottom: 1px solid var(--rule); }
body.ex-listing .hero-top { display: flex; align-items: center; gap: 18px; margin-bottom: 32px; flex-wrap: wrap; }
/* Hero eyebrow uses the shared .t-eyebrow.live (@cocoindex/brand/tags.css). */
@keyframes ex-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
body.ex-listing .hero-top .stats { margin-left: auto; display: flex; gap: 20px; font-family: var(--mono); font-size: var(--text-sm); color: var(--muted); letter-spacing: 0.06em; flex-wrap: wrap; }
body.ex-listing .hero-top .stats b { color: var(--maroon); font-weight: 500; font-size: var(--text-sm); }
body.ex-listing .hero-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: end; }
/* Hero type comes from doc-hero.css; listing deltas only. */
body.ex-listing h1.hero-h { margin: 0 0 24px; }
body.ex-listing .hero-sub {
font-size: var(--text-lg); line-height: 1.45; letter-spacing: -0.01em;
max-width: 48ch;
}
body.ex-listing .hero-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* .t-filter comes from @cocoindex/brand/tags.css (consistent coral hover). */
body.ex-listing .hero-viz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; aspect-ratio: 3/2; }
body.ex-listing .hero-viz .t {
border-radius: var(--r-md); position: relative; overflow: hidden;
padding: 16px; display: flex; flex-direction: column; justify-content: space-between;
font-family: var(--mono); font-size: var(--text-xs); letter-spacing: var(--track-label); text-transform: uppercase;
}
body.ex-listing .hero-viz .t .ct { font-family: var(--sans); font-size: var(--text-md); font-weight: 600; letter-spacing: -0.02em; line-height: 1; text-transform: none; }
body.ex-listing .hero-viz .t .ct em { color: inherit; font-style: normal; }
body.ex-listing .hero-viz .t.search { background: var(--maroon); color: var(--cream); }
body.ex-listing .hero-viz .t.ingest { background: var(--peach); color: var(--maroon-ink); }
body.ex-listing .hero-viz .t.llm { background: var(--coral); color: var(--cream-bright); }
body.ex-listing .hero-viz .t.agents { background: var(--cream); color: var(--maroon); border: 1px solid var(--rule-strong); }
body.ex-listing .hero-viz .t.custom { background: var(--maroon-ink); color: var(--cream); }
body.ex-listing .hero-viz .t::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(circle, color-mix(in oklab, var(--cream) 8%, transparent) 1.2px, transparent 1.6px);
background-size: 14px 14px; opacity: 0.6;
}
body.ex-listing .hero-viz .t.agents::after,
body.ex-listing .hero-viz .t.ingest::after {
background-image: radial-gradient(circle, color-mix(in oklab, var(--maroon-ink) 8%, transparent) 1.2px, transparent 1.6px);
}
/* ── SIDEBAR + MAIN ── */
body.ex-listing .doc { display: grid; grid-template-columns: 1fr 260px; gap: 56px; align-items: start; padding-top: 32px; }
/* Swap visual order so the "Browse" nav sits on the right without
moving it in the DOM (keeps it first for keyboard/tab order). */
body.ex-listing .doc > .side-nav { grid-column: 2; grid-row: 1; }
body.ex-listing .doc > .col-main { grid-column: 1; grid-row: 1; }
body.ex-listing .side-nav { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; padding: 0 0 40px; font-family: var(--sans); }
body.ex-listing .side-head {
font-family: var(--mono); font-size: var(--text-xs); letter-spacing: var(--track-label); text-transform: uppercase;
color: var(--muted); padding-bottom: 10px; margin-bottom: 14px;
border-bottom: 1px solid var(--rule-strong);
display: flex; justify-content: space-between; align-items: baseline;
}
body.ex-listing .side-head .ct { color: var(--coral); font-family: var(--mono); }
body.ex-listing .side-nav ol { list-style: none; padding: 0; margin: 0 0 24px; }
body.ex-listing .side-nav ol li { margin-bottom: 2px; }
body.ex-listing .side-nav ol li a {
display: flex; align-items: center; gap: 10px;
text-decoration: none; color: var(--maroon-ink);
font-size: var(--text-sm); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2;
padding: 9px 12px; border-radius: 6px;
border-left: 2px solid transparent;
margin-left: -14px; padding-left: 12px;
transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
body.ex-listing .side-nav ol li a .cat-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--maroon); }
body.ex-listing .side-nav ol li a[data-cat="search"] .cat-dot { background: var(--maroon); }
body.ex-listing .side-nav ol li a[data-cat="ingest"] .cat-dot { background: var(--peach); }
body.ex-listing .side-nav ol li a[data-cat="llm"] .cat-dot { background: var(--coral); }
body.ex-listing .side-nav ol li a[data-cat="agents"] .cat-dot { background: var(--maroon-ink); }
body.ex-listing .side-nav ol li a[data-cat="image"] .cat-dot { background: var(--pink); }
body.ex-listing .side-nav ol li a[data-cat="featured"] .cat-dot { background: var(--coral); border-radius: 50%; }
body.ex-listing .side-nav ol li a .count {
margin-left: auto;
font-family: var(--mono); font-size: var(--text-xs); letter-spacing: var(--track-code); color: var(--muted);
padding: 2px 8px; border-radius: 999px; background: transparent; border: 1px solid var(--rule);
}
body.ex-listing .side-nav ol li a:hover { color: var(--coral); background: var(--cream); }
body.ex-listing .side-nav ol li a:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
body.ex-listing .side-nav ol li.active a { color: var(--maroon); background: var(--cream); border-left-color: var(--coral); }
body.ex-listing .side-nav ol li.active a .count { color: var(--coral); border-color: var(--coral); }
body.ex-listing .side-group { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
body.ex-listing .side-group h6 {
font-family: var(--mono); font-size: var(--text-xs); letter-spacing: var(--track-label); text-transform: uppercase;
color: var(--muted); margin: 0 0 10px;
}
body.ex-listing .side-group .tags-row { display: flex; flex-wrap: wrap; gap: 5px; }
/* Sidebar mini-tags use @cocoindex/brand .t-pill. */
body.ex-listing .side-group .links { display: flex; flex-direction: column; gap: 4px; }
body.ex-listing .side-group .links a {
text-decoration: none; color: var(--maroon-ink);
font-size: var(--text-sm); padding: 4px 0;
display: flex; justify-content: space-between; align-items: center;
}
body.ex-listing .side-group .links a:hover { color: var(--coral); }
body.ex-listing .side-group .links a .c { font-family: var(--mono); font-size: var(--text-xs); color: var(--muted); }
body.ex-listing .col-main { min-width: 0; }
/* ── FEATURED ── */
body.ex-listing section.feat { padding: 0 0 40px; scroll-margin-top: 84px; }
/* Section header base comes from doc-hero.css; the listing variant is a
full-width ruled band with a bigger title. */
body.ex-listing .sec-head {
display: flex; flex-direction: column; gap: 8px;
margin-bottom: 28px; max-width: none;
padding-bottom: 18px;
border-bottom: 1px solid var(--rule);
}
body.ex-listing .sec-head h2 { font-size: var(--text-3xl); line-height: 1; margin: 0; }
body.ex-listing .sec-head .lead { color: var(--muted); font-size: var(--text-base); max-width: 60ch; margin: 0; }
body.ex-listing .sec-head .idx { color: var(--muted); display: inline; margin: 0 8px 0 0; }
body.ex-listing .sec-head .all {
margin-left: auto;
font-family: var(--mono); font-size: var(--text-xs); letter-spacing: var(--track-label); text-transform: uppercase;
color: var(--maroon); text-decoration: none;
padding-bottom: 2px; border-bottom: 1px solid var(--maroon);
}
body.ex-listing .sec-head .all:hover { color: var(--coral); border-color: var(--coral); }
/* ── CATEGORY SECTIONS ── */
body.ex-listing section.cat { padding: 64px 0; scroll-margin-top: 84px; }
body.ex-listing .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
body.ex-listing .ex-card {
display: flex; flex-direction: column;
border: 1px solid var(--rule); border-radius: var(--r-2xl);
background: var(--paper);
min-height: 280px;
text-decoration: none; color: inherit;
overflow: hidden;
position: relative; isolation: isolate;
transition: border-color var(--dur-fast) var(--ease);
}
/* Hover dot-reveal: a behind-content accent that fades in from the right
edge only (like the homepage cards). Light dots — a soft coral tint, not
the full --dot-reveal — and concentrated on the right so they never sit
behind the left-aligned title/body text. */
body.ex-listing .ex-card::before {
content: ""; position: absolute; inset: 0;
background-image: radial-gradient(circle, color-mix(in oklab, var(--coral) 20%, transparent) 1.2px, transparent 1.6px);
background-size: var(--dot-reveal-size) var(--dot-reveal-size);
-webkit-mask-image: linear-gradient(to left, #000 0%, #000 12%, transparent 48%);
mask-image: linear-gradient(to left, #000 0%, #000 12%, transparent 48%);
opacity: 0; pointer-events: none;
transition: opacity var(--dur-slow) var(--ease);
z-index: -1;
}
body.ex-listing .ex-card:hover::before { opacity: 1; }
body.ex-listing .ex-card:hover { border-color: color-mix(in oklab, var(--coral) 35%, var(--rule-strong)); }
/* Card art — the pipeline SVG render (blobs repo) on the homepage card
surface, with a slide-up "Open example" affordance on hover. */
body.ex-listing .ex-art {
position: relative; aspect-ratio: 480 / 300; overflow: hidden;
background: var(--card-ink);
border-bottom: 1px solid var(--rule);
}
body.ex-listing .ex-art-img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.ex-listing .ex-open {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
padding: 9px 16px; font-family: var(--mono); font-size: var(--text-xs);
letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 500; color: var(--cream);
background: linear-gradient(to top, color-mix(in oklab, var(--maroon-ink) 92%, transparent), transparent);
transform: translateY(100%); opacity: 0;
transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
body.ex-listing .ex-card:hover .ex-open { transform: translateY(0); opacity: 1; }
body.ex-listing .ex-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
body.ex-listing .ex-body h3 { font-family: var(--sans); font-weight: 600; font-size: var(--text-md); letter-spacing: -0.02em; line-height: 1.2; margin: 0; color: var(--maroon-ink); }
body.ex-listing .ex-body h3 em { color: var(--coral); font-style: normal; }
body.ex-listing .ex-body p { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; flex: 1; }
/* ── BOTTOM CTA ── */
body.ex-listing .cta-end {
text-align: left; /* surface delta — the shared .cta-end base (cta.css) centers */
margin: 72px 0 96px;
border-radius: var(--r-2xl);
background: var(--cream);
border: 1px solid var(--rule);
padding: 64px 48px;
position: relative; overflow: hidden;
}
body.ex-listing .cta-end::before {
content: ""; position: absolute; right: -40px; bottom: -60px;
width: 260px; height: 260px; border-radius: 50%;
background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--coral) 20%, transparent), transparent 60%);
pointer-events: none;
}
body.ex-listing .cta-end h3 {
font-family: var(--sans); font-weight: 600;
font-size: var(--text-3xl); line-height: 1; letter-spacing: -0.025em;
margin: 0 0 16px; max-width: 22ch;
}
body.ex-listing .cta-end h3 em { color: var(--coral); font-style: normal; }
body.ex-listing .cta-end p { color: var(--muted); max-width: 48ch; margin: 0 0 24px; font-size: var(--text-base); }
body.ex-listing .cta-end .btns { display: flex; gap: 12px; flex-wrap: wrap; }
/* Buttons — see `.btn` + variants in globals.css. No local overrides. */
body.ex-listing .cta-end .side {
display: flex; flex-direction: column; gap: 18px;
padding: 28px 26px; border-radius: var(--r-lg);
background: var(--paper); border: 1px solid var(--rule);
}
body.ex-listing .cta-end .side .eyebrow {
font-family: var(--mono); font-size: var(--text-xs); letter-spacing: var(--track-label); text-transform: uppercase;
color: var(--coral-text);
}
body.ex-listing .cta-end .side .time {
font-family: var(--mono); font-size: var(--text-xs); color: var(--muted);
}
body.ex-listing .cta-end .side h4 {
font-family: var(--sans); font-weight: 600; font-size: var(--text-md); letter-spacing: -0.02em;
line-height: 1.2; margin: 0;
}
body.ex-listing .cta-end .side h4 em { color: var(--coral); font-style: normal; }
@media (max-width: 1180px) {
body.ex-listing .doc { grid-template-columns: 1fr; gap: 0; }
/* Reset the desktop grid-column/grid-row pinning. Without these,
.side-nav (grid-column: 2) forces an implicit second column on
a single-column grid, squeezing .col-main to half the viewport
and shredding word wrap on long copy (Bug: cta-end h3/p
wrapping one word per line on phone). */
body.ex-listing .doc > .side-nav,
body.ex-listing .doc > .col-main { grid-column: auto; grid-row: auto; }
body.ex-listing .side-nav {
position: static; top: auto; max-height: none;
padding: 16px; border: 1px solid var(--rule); border-radius: var(--r-lg);
background: var(--cream); margin-bottom: 32px;
}
body.ex-listing .side-nav ol { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
body.ex-listing .side-nav ol li { margin-bottom: 0; }
body.ex-listing .side-nav ol li a { padding: 8px 12px; margin-left: 0; border-left: none; border: 1px solid var(--rule); }
body.ex-listing .side-nav ol li.active a { border-color: var(--coral); }
body.ex-listing .side-group { margin-top: 10px; padding-top: 10px; }
body.ex-listing .hero-grid { grid-template-columns: 1fr; gap: 40px; }
body.ex-listing .cat-grid { grid-template-columns: repeat(2, 1fr); }
body.ex-listing .cta-end { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
body.ex-listing .cat-grid { grid-template-columns: 1fr; }
body.ex-listing .hero-top { flex-wrap: wrap; }
body.ex-listing .hero-top .stats { order: 3; width: 100%; }
}
/* On phones the cross-example browse rail moves into the menu
drawer — same data, fewer chrome elements competing with the
hero. Hides .side-nav entirely below 820px (matches the docs
site's phone breakpoint). */
@media (max-width: 820px) {
body.ex-listing .side-nav { display: none; }
body.ex-listing .doc { padding-top: 16px; }
}