Skip to content

Commit 06f0e47

Browse files
mrbiggredmrbiggred
committed
Moved sponsor css to it's own file.
1 parent 9435b06 commit 06f0e47

2 files changed

Lines changed: 384 additions & 385 deletions

File tree

‎docs/stylesheets/extra.css‎

Lines changed: 0 additions & 385 deletions
Original file line numberDiff line numberDiff line change
@@ -9,388 +9,3 @@
99
margin-left: 10px;
1010
}
1111
}
12-
13-
/* ============================================================
14-
Sponsors page — card grid with hover reveal
15-
All rules scoped under .wdc-sponsors-page to avoid leaking
16-
onto host/past-host pages (which still use the float-left
17-
layout for their cards).
18-
============================================================ */
19-
.wdc-sponsors-page {
20-
--wdc-paper-2: #fafafa;
21-
--wdc-line: #e0e0e0;
22-
--wdc-line-2: #c9c9c9;
23-
--wdc-ink: #1a1a1a;
24-
--wdc-ink-2: #5a5a5a;
25-
--wdc-ink-3: #8a8a8a;
26-
--wdc-teal: var(--md-primary-fg-color, #009688);
27-
--wdc-teal-dark: #00766c;
28-
--wdc-teal-light: #b2dfdb;
29-
--wdc-teal-soft: #e0f2f1;
30-
--wdc-blue: var(--md-accent-fg-color, #448aff);
31-
--wdc-radius: 14px;
32-
--wdc-radius-sm: 8px;
33-
--wdc-shadow-1: 0 1px 0 rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.05);
34-
--wdc-shadow-2: 0 10px 40px -12px rgba(0, 0, 0, 0.18);
35-
--wdc-mono: ui-monospace, "SF Mono", Menlo, monospace;
36-
}
37-
38-
/* ---------- Support block (3 numbered cards) ---------- */
39-
.wdc-sponsors-page .support {
40-
display: grid;
41-
grid-template-columns: repeat(3, 1fr);
42-
gap: 16px;
43-
padding: 32px 0;
44-
border-top: 1px solid var(--wdc-line);
45-
border-bottom: 1px solid var(--wdc-line);
46-
margin: 32px 0 56px;
47-
}
48-
.wdc-sponsors-page .support-card {
49-
padding: 22px;
50-
border-radius: var(--wdc-radius);
51-
background: var(--wdc-paper-2);
52-
border: 1px solid var(--wdc-line);
53-
transition: transform 0.2s, box-shadow 0.2s;
54-
}
55-
.wdc-sponsors-page .support-card:hover {
56-
transform: translateY(-2px);
57-
box-shadow: var(--wdc-shadow-1);
58-
}
59-
.wdc-sponsors-page .support-k {
60-
font-family: var(--wdc-mono);
61-
font-size: 11px;
62-
letter-spacing: 0.08em;
63-
color: var(--wdc-ink-3);
64-
}
65-
.wdc-sponsors-page .support-card h3 {
66-
font-weight: 400;
67-
font-size: 22px;
68-
margin: 10px 0 8px;
69-
letter-spacing: -0.005em;
70-
}
71-
.wdc-sponsors-page .support-card p {
72-
margin: 0;
73-
color: var(--wdc-ink-2);
74-
font-size: 15px;
75-
}
76-
.wdc-sponsors-page .support-cta {
77-
display: inline-block;
78-
margin-top: 14px;
79-
font-family: var(--wdc-mono);
80-
font-size: 13px;
81-
color: var(--wdc-teal-dark);
82-
border-bottom: 1px solid currentColor;
83-
padding-bottom: 2px;
84-
}
85-
86-
/* ---------- Year group ---------- */
87-
.wdc-sponsors-page .year-group {
88-
margin-bottom: 72px;
89-
scroll-margin-top: 80px;
90-
}
91-
.wdc-sponsors-page .year-header {
92-
display: flex;
93-
align-items: baseline;
94-
gap: 16px;
95-
margin-bottom: 20px;
96-
}
97-
.wdc-sponsors-page .year-header h2.year-num {
98-
font-weight: 300;
99-
font-size: clamp(40px, 6vw, 64px);
100-
letter-spacing: -0.02em;
101-
line-height: 1;
102-
margin: 0;
103-
color: var(--wdc-teal);
104-
border-bottom: none;
105-
padding-bottom: 0;
106-
}
107-
.wdc-sponsors-page .year-meta {
108-
font-family: var(--wdc-mono);
109-
font-size: 12px;
110-
letter-spacing: 0.06em;
111-
color: var(--wdc-ink-3);
112-
text-transform: uppercase;
113-
}
114-
.wdc-sponsors-page .year-rule {
115-
flex: 1;
116-
height: 1px;
117-
background: var(--wdc-line);
118-
align-self: center;
119-
}
120-
121-
/* ---------- Sponsor grid ---------- */
122-
.wdc-sponsors-page .sponsor-grid {
123-
display: grid;
124-
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
125-
gap: 14px;
126-
}
127-
128-
/* ---------- Sponsor card (overlay reveal style) ---------- */
129-
.wdc-sponsors-page .sponsor-card {
130-
position: relative;
131-
aspect-ratio: 1 / 1;
132-
border-radius: var(--wdc-radius);
133-
background: var(--wdc-paper-2);
134-
border: 1px solid var(--wdc-line);
135-
overflow: hidden;
136-
cursor: pointer;
137-
outline: none;
138-
transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
139-
box-shadow 0.25s, border-color 0.2s;
140-
}
141-
.wdc-sponsors-page .sponsor-card:hover,
142-
.wdc-sponsors-page .sponsor-card:focus-within {
143-
transform: translateY(-3px);
144-
box-shadow: var(--wdc-shadow-2);
145-
border-color: var(--wdc-line-2);
146-
}
147-
.wdc-sponsors-page .sponsor-card:focus-visible {
148-
outline: 3px solid var(--wdc-blue);
149-
outline-offset: 2px;
150-
}
151-
152-
.wdc-sponsors-page .card-face {
153-
position: absolute;
154-
inset: 0;
155-
display: flex;
156-
flex-direction: column;
157-
padding: 18px;
158-
transition: opacity 0.22s ease;
159-
}
160-
161-
/* Front face */
162-
.wdc-sponsors-page .card-front .card-logo {
163-
flex: 1;
164-
display: flex;
165-
align-items: center;
166-
justify-content: center;
167-
padding: 12px;
168-
min-height: 0;
169-
}
170-
.wdc-sponsors-page .card-front .card-logo img {
171-
max-width: 85%;
172-
max-height: 85%;
173-
object-fit: contain;
174-
transition: transform 0.3s;
175-
}
176-
.wdc-sponsors-page .card-logo-placeholder {
177-
width: 60%;
178-
aspect-ratio: 1 / 1;
179-
border-radius: 50%;
180-
background: var(--wdc-teal-soft);
181-
color: var(--wdc-teal-dark);
182-
display: flex;
183-
align-items: center;
184-
justify-content: center;
185-
font-size: 36px;
186-
font-weight: 300;
187-
}
188-
.wdc-sponsors-page .sponsor-card:hover .card-front .card-logo img,
189-
.wdc-sponsors-page .sponsor-card:focus-within .card-front .card-logo img {
190-
transform: scale(1.04);
191-
}
192-
.wdc-sponsors-page .card-footer {
193-
display: flex;
194-
justify-content: space-between;
195-
align-items: center;
196-
padding-top: 10px;
197-
border-top: 1px dashed var(--wdc-line);
198-
font-family: var(--wdc-mono);
199-
font-size: 10px;
200-
letter-spacing: 0.06em;
201-
text-transform: uppercase;
202-
}
203-
.wdc-sponsors-page .card-tier {
204-
color: var(--wdc-ink-2);
205-
font-weight: 600;
206-
}
207-
.wdc-sponsors-page .card-hint {
208-
color: var(--wdc-ink-3);
209-
}
210-
211-
/* Back face */
212-
.wdc-sponsors-page .card-back {
213-
background: var(--wdc-teal-dark);
214-
color: #ffffff;
215-
opacity: 0;
216-
pointer-events: none;
217-
}
218-
.wdc-sponsors-page .sponsor-card:hover .card-front,
219-
.wdc-sponsors-page .sponsor-card:focus-within .card-front {
220-
opacity: 0;
221-
}
222-
.wdc-sponsors-page .sponsor-card:hover .card-back,
223-
.wdc-sponsors-page .sponsor-card:focus-within .card-back {
224-
opacity: 1;
225-
pointer-events: auto;
226-
}
227-
.wdc-sponsors-page .card-back-inner {
228-
display: flex;
229-
flex-direction: column;
230-
height: 100%;
231-
gap: 8px;
232-
}
233-
.wdc-sponsors-page .card-back-tier {
234-
font-family: var(--wdc-mono);
235-
font-size: 10px;
236-
letter-spacing: 0.08em;
237-
text-transform: uppercase;
238-
color: var(--wdc-teal-light);
239-
}
240-
.wdc-sponsors-page .card-back-name {
241-
font-weight: 400;
242-
font-size: 20px;
243-
letter-spacing: -0.005em;
244-
margin: 0;
245-
line-height: 1.2;
246-
color: #ffffff;
247-
}
248-
.wdc-sponsors-page .card-back-desc {
249-
flex: 1;
250-
margin: 0;
251-
font-size: 13px;
252-
line-height: 1.5;
253-
color: rgba(255, 255, 255, 0.85);
254-
overflow: hidden;
255-
}
256-
.wdc-sponsors-page .card-back-links {
257-
display: flex;
258-
flex-wrap: wrap;
259-
gap: 6px;
260-
padding-top: 10px;
261-
border-top: 1px solid rgba(255, 255, 255, 0.15);
262-
}
263-
.wdc-sponsors-page .card-back-links a {
264-
display: inline-flex;
265-
align-items: center;
266-
gap: 4px;
267-
font-family: var(--wdc-mono);
268-
font-size: 11px;
269-
padding: 5px 9px;
270-
background: rgba(255, 255, 255, 0.12);
271-
color: #ffffff;
272-
border-radius: 4px;
273-
text-decoration: none;
274-
transition: background 0.15s;
275-
}
276-
.wdc-sponsors-page .card-back-links a:hover {
277-
background: var(--wdc-blue);
278-
}
279-
.wdc-sponsors-page .card-back-links .arrow {
280-
font-size: 10px;
281-
opacity: 0.7;
282-
}
283-
284-
/* ---------- Become a sponsor CTA ---------- */
285-
.wdc-sponsors-page .become-sponsor {
286-
margin-top: 40px;
287-
border-radius: var(--wdc-radius);
288-
background: linear-gradient(135deg, var(--wdc-teal-dark) 0%, var(--wdc-teal) 100%);
289-
color: #ffffff;
290-
padding: 40px;
291-
position: relative;
292-
overflow: hidden;
293-
}
294-
.wdc-sponsors-page .become-sponsor::before {
295-
content: "";
296-
position: absolute;
297-
inset: 0;
298-
background: radial-gradient(circle at 80% 20%, rgba(68, 138, 255, 0.3) 0%, transparent 50%);
299-
pointer-events: none;
300-
}
301-
.wdc-sponsors-page .become-inner {
302-
display: grid;
303-
grid-template-columns: 1.4fr auto;
304-
gap: 32px;
305-
align-items: center;
306-
position: relative;
307-
}
308-
.wdc-sponsors-page .become-sponsor .eyebrow {
309-
display: inline-flex;
310-
align-items: center;
311-
gap: 8px;
312-
font-family: var(--wdc-mono);
313-
font-size: 12px;
314-
letter-spacing: 0.06em;
315-
text-transform: uppercase;
316-
padding: 6px 10px;
317-
background: rgba(255, 255, 255, 0.15);
318-
color: #ffffff;
319-
border-radius: 999px;
320-
}
321-
.wdc-sponsors-page .become-sponsor .eyebrow .dot {
322-
width: 7px;
323-
height: 7px;
324-
border-radius: 50%;
325-
background: var(--wdc-blue);
326-
box-shadow: 0 0 0 3px rgba(68, 138, 255, 0.3);
327-
}
328-
.wdc-sponsors-page .become-sponsor h3 {
329-
font-weight: 300;
330-
font-size: 36px;
331-
letter-spacing: -0.01em;
332-
margin: 14px 0 10px;
333-
line-height: 1.15;
334-
color: #ffffff;
335-
border-bottom: none;
336-
}
337-
.wdc-sponsors-page .become-sponsor p {
338-
margin: 0;
339-
color: rgba(255, 255, 255, 0.9);
340-
max-width: 48ch;
341-
}
342-
.wdc-sponsors-page .become-ctas {
343-
display: flex;
344-
flex-direction: column;
345-
gap: 10px;
346-
}
347-
.wdc-sponsors-page .btn {
348-
display: inline-flex;
349-
align-items: center;
350-
justify-content: center;
351-
padding: 12px 20px;
352-
border-radius: 10px;
353-
font-weight: 500;
354-
font-size: 14px;
355-
text-decoration: none;
356-
transition: transform 0.15s, background 0.15s;
357-
white-space: nowrap;
358-
}
359-
.wdc-sponsors-page .btn.primary {
360-
background: var(--wdc-blue);
361-
color: #ffffff;
362-
}
363-
.wdc-sponsors-page .btn.primary:hover {
364-
background: #2979ff;
365-
transform: translateY(-1px);
366-
}
367-
.wdc-sponsors-page .btn.ghost {
368-
background: rgba(255, 255, 255, 0.15);
369-
color: #ffffff;
370-
}
371-
.wdc-sponsors-page .btn.ghost:hover {
372-
background: rgba(255, 255, 255, 0.25);
373-
}
374-
375-
/* ---------- Responsive ---------- */
376-
@media (max-width: 900px) {
377-
.wdc-sponsors-page .support {
378-
grid-template-columns: 1fr;
379-
}
380-
.wdc-sponsors-page .sponsor-grid {
381-
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
382-
gap: 10px;
383-
}
384-
.wdc-sponsors-page .become-inner {
385-
grid-template-columns: 1fr;
386-
}
387-
.wdc-sponsors-page .become-ctas {
388-
flex-direction: row;
389-
}
390-
.wdc-sponsors-page .become-sponsor {
391-
padding: 28px;
392-
}
393-
.wdc-sponsors-page .become-sponsor h3 {
394-
font-size: 28px;
395-
}
396-
}

0 commit comments

Comments
 (0)