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; }
}
|