File size: 4,817 Bytes
654e9be
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8b372bf
654e9be
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b887465
654e9be
 
8b372bf
654e9be
 
 
 
 
 
 
 
 
 
 
 
 
8b372bf
654e9be
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9a54c19
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8b372bf
9a54c19
8b372bf
9a54c19
 
 
 
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
:root {
  --bg: #ffffff;
  --panel: #f8f9fb;
  --panel-2: #f1f3f7;
  --border: #e4e7ec;
  --text: #1a1d23;
  --muted: #6b7280;
  --accent: #76b900;
  --accent-2: #5f9500;
  --link: #5f9500;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: #f3f4f7; padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }

/* ------- nav ------- */
nav.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
nav.top .inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px;
}
nav.top .brand { font-weight: 700; letter-spacing: 0.3px; }
nav.top .brand .dot { color: var(--accent); }
nav.top ul { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; flex-wrap: wrap; }
nav.top ul a { color: var(--muted); font-size: 0.92em; }
nav.top ul a:hover { color: var(--text); text-decoration: none; }

/* ------- hero with banner image ------- */
header.hero { border-bottom: 1px solid var(--border); }
.hero-banner {
  position: relative;
  width: 100%;
  height: clamp(240px, 22vw, 420px);
  overflow: hidden;
  background: #000;
}
.hero-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-content {
  max-width: 1100px; width: 100%; margin: 0 auto;
  padding: 40px 24px 36px;
}
.eyebrow { color: var(--accent-2); font-weight: 600; letter-spacing: 0.14em; font-size: 0.85em; text-transform: uppercase; }
h1.hero-title { font-size: clamp(28px, 4vw, 46px); line-height: 1.1; margin: 8px 0 10px; color: var(--text); }
.hero-lead { max-width: 820px; color: #3c4250; font-size: 1.05em; margin: 0; }

/* ------- layout ------- */
main { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
section { padding: 56px 0; border-bottom: 1px solid var(--border); }
section:last-child { border-bottom: 0; }
section > h2 {
  font-size: 28px; margin: 0 0 8px;
  display: flex; align-items: baseline; gap: 12px;
}
section > h2 .sec-num {
  color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7em; letter-spacing: 0.08em;
}
section > p.section-lead { color: #3c4250; max-width: 820px; margin-top: 0; }
section h3 { font-size: 18px; margin: 24px 0 8px; }
.muted { color: var(--muted); }

/* ------- track card ------- */
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 22px;
  max-width: 720px;
}
.card h3 { margin-top: 0; }
.card .pill {
  display: inline-block; font-size: 0.78em; padding: 3px 9px; border-radius: 999px;
  background: rgba(118,185,0,0.15); color: var(--accent-2); border: 1px solid rgba(118,185,0,0.3);
  margin-bottom: 10px; letter-spacing: 0.04em;
}
a.organizer-card {
  display: block; color: inherit; text-decoration: none; transition: border-color 0.15s, transform 0.15s;
}
a.organizer-card:hover {
  border-color: var(--accent); text-decoration: none; transform: translateY(-1px);
}
a.organizer-card h3 { color: var(--text); }
a.organizer-card p { color: #3c4250; margin-bottom: 0; }

/* ------- timeline ------- */
ol.timeline { list-style: none; padding: 0; margin: 18px 0 0; }
ol.timeline li {
  position: relative; padding: 12px 14px 12px 38px; border-left: 2px solid var(--border); margin-left: 8px;
}
ol.timeline li:before {
  content: ""; position: absolute; left: -7px; top: 18px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--accent);
}
ol.timeline li.future:before { background: #ffffff; border: 2px solid var(--accent); }
ol.timeline li .date { color: var(--accent-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                      font-size: 0.85em; letter-spacing: 0.03em; }
ol.timeline li b { display: block; margin-top: 2px; }
ol.timeline li span.desc { color: var(--muted); display: block; font-size: 0.92em; }

/* ------- footer ------- */
footer { padding: 32px 24px 48px; text-align: center; color: var(--muted); font-size: 0.9em; }

/* ------- responsive ------- */
@media (max-width: 720px) {
  nav.top .inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 18px;
  }
  nav.top .brand { font-size: 0.95em; }
  nav.top ul { gap: 16px; }

  .hero-banner { height: clamp(180px, 42vw, 260px); }
  .hero-content { padding: 28px 18px 24px; }
  .hero-lead { font-size: 1em; }

  main { padding: 0 18px; }
  section { padding: 40px 0; }
  section > h2 { font-size: 24px; }

  .card { padding: 18px; }
}