hyperloopWebsite/apply.html at main · hyperloop-cornell/hyperloopWebsite · GitHub

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
<!DOCTYPE html>
<html class="dark" lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Cornell Hyperloop — Apply</title>
<meta name="description" content="Apply to join Cornell Hyperloop. Learn roles, recruitment timeline, and how to get involved with the team."/>
<meta name="robots" content="index,follow"/>
<link rel="canonical" href="https://www.cornellhyperloop.com/apply.html"/>
<meta property="og:title" content="Cornell Hyperloop — Apply"/>
<meta property="og:description" content="Apply to join Cornell Hyperloop. Learn roles, recruitment timeline, and how to get involved with the team."/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://www.cornellhyperloop.com/apply.html"/>
<meta property="og:image" content="https://www.cornellhyperloop.com/res/2025springhyperloop.avif"/>
<meta property="og:image:alt" content="Cornell Hyperloop team at competition"/>
<meta property="og:site_name" content="Cornell Hyperloop"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="Cornell Hyperloop — Apply"/>
<meta name="twitter:description" content="Apply to join Cornell Hyperloop. Learn roles, recruitment timeline, and how to get involved with the team."/>
<meta name="twitter:image" content="https://www.cornellhyperloop.com/res/2025springhyperloop.avif"/>
<link rel="icon" href="/favicon.png?v=6" type="image/png"/>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; base-uri 'self'; form-action 'self'; img-src 'self' data: https:; font-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'; connect-src 'self'; frame-src https://www.youtube.com; worker-src 'self'; object-src 'none'"/>
<link rel="stylesheet" href="res/tw.css?v=9"/>
<style>
  html { scroll-behavior: smooth; }
  @font-face{font-family:'Material Symbols Outlined';src:url('res/fonts/material-symbols-outlined.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:'Inter';src:url('res/fonts/inter/inter-variablefont_opsz,wght.subset.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
  @font-face{font-family:'Inter';src:url('res/fonts/inter/inter-italic-variablefont_opsz,wght.ttf') format('truetype');font-weight:100 900;font-style:italic;font-display:swap}
  @font-face{font-family:'Space Grotesk';src:url('res/fonts/space_grotesk/spacegrotesk-variablefont_wght.subset.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
  .material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}
  .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 }
  .grid-overlay {
    background-image: linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
  }
  html,body{background:#0c1324;color:#dce1fb;overflow-x:hidden}
  .card-hover-line::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 2px;
    background: #d22b2b;
    transition: width 0.4s ease;
  }
  .card-hover-line:hover::after { width: 100%; }
</style>
</head>
<body class="bg-background text-on-background font-body-md text-body-md overflow-x-hidden">
<div id="nav-placeholder"></div>

<main>

  <!-- Hero -->
  <section class="relative py-28 md:py-28 border-b border-outline-variant overflow-hidden">
    <div class="grid-overlay absolute inset-0 opacity-30"></div>
    <div class="absolute inset-0 z-0">
      <img src="res/recruitment.avif" alt="Cornell Hyperloop pod" class="w-full h-full object-cover opacity-40"/>
      <div class="absolute inset-0 bg-gradient-to-r from-background via-background/80 to-background/40"></div>
    </div>
    <div class="relative z-10 max-w-container-max mx-auto px-6 md:px-margin">
      <div class="border-l-2 border-primary-container pl-8 max-w-3xl">
        <span class="font-label-caps text-label-caps text-primary tracking-[0.2em] uppercase flex items-center gap-2 mb-4">
          <span class="w-8 h-[1px] bg-primary block"></span>Recruitment
        </span>
        <h1 class="font-headline-xl text-headline-xl text-on-surface uppercase tracking-tighter mb-6" style="font-size:clamp(1.75rem,10vw,4rem)">
          Join the<br/><span class="text-primary-container">Team.</span>
        </h1>
        <p class="font-body-lg text-body-lg text-on-surface-variant mb-8">
            Our team is open to students from all majors and backgrounds who bring dedication and a drive to build the future of transportation.
        </p>
        <div class="flex flex-wrap gap-4">
          <a href="#process" class="bg-primary-container text-on-primary-container font-label-caps text-label-caps uppercase px-8 py-4 tracking-widest hover:bg-primary transition-colors duration-200 inline-flex items-center gap-2">
            Recruitment Status <span class="material-symbols-outlined text-base" style="transform:rotate(90deg)">arrow_forward</span>
          </a>
          <a href="#roles" class="border border-outline text-on-surface font-label-caps text-label-caps uppercase px-8 py-4 tracking-widest hover:bg-surface-container-high transition-colors duration-200 inline-flex items-center">
            Explore Subteams
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- Recruitment Status -->
  <section id="process" class="py-24 border-b border-outline-variant bg-surface-container-low relative overflow-hidden">
    <div class="grid-overlay absolute inset-0 opacity-10"></div>
    <div class="relative z-10 max-w-container-max mx-auto px-margin">
      <div class="mb-16">
        <span class="font-label-caps text-label-caps text-primary tracking-[0.2em] uppercase flex items-center gap-2 mb-4">
          <span class="w-8 h-[1px] bg-primary block"></span>Status
        </span>
        <h2 class="font-headline-lg text-headline-lg text-on-surface uppercase mb-4">
          Recruitment <span class="text-primary">Update</span>
        </h2>
        <p class="font-body-md text-body-md text-on-surface-variant max-w-3xl">
          Thank you for your interest in joining Cornell Hyperloop! Here's where recruitment stands.
        </p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
        <div class="relative bg-surface border border-outline-variant p-6 hover:border-primary-container transition-colors duration-300 flex flex-col justify-between items-start">
          <span class="absolute top-4 right-4 font-label-caps text-[10px] text-outline-variant">STS-01</span>
          <div>
            <span class="material-symbols-outlined text-primary-container text-3xl mb-4 block">check_circle</span>
            <h3 class="font-headline-md text-headline-md text-on-surface mb-2 uppercase">Fall Recruitment</h3>
            <p class="font-body-md text-body-md text-on-surface-variant mb-4 text-sm">Applications have closed. Thank you to everyone who applied and came out to meet the team.</p>
          </div>
          <span class="font-label-caps text-label-caps text-secondary">CLOSED</span>
        </div>

        <div class="relative bg-surface border border-outline-variant p-6 hover:border-primary-container transition-colors duration-300 flex flex-col justify-between items-start">
          <span class="absolute top-4 right-4 font-label-caps text-[10px] text-outline-variant">STS-02</span>
          <div>
            <span class="material-symbols-outlined text-primary-container text-3xl mb-4 block">calendar_today</span>
            <h3 class="font-headline-md text-headline-md text-on-surface mb-2 uppercase">Spring Recruitment</h3>
            <p class="font-body-md text-body-md text-on-surface-variant mb-4 text-sm">Dates will be released in late January, and the full timeline will be posted on this page.</p>
          </div>
          <span class="font-label-caps text-label-caps text-primary">UP NEXT</span>
        </div>

        <div class="relative bg-surface border border-outline-variant p-6 hover:border-primary-container transition-colors duration-300 flex flex-col justify-between items-start">
          <span class="absolute top-4 right-4 font-label-caps text-[10px] text-outline-variant">STS-03</span>
          <div>
            <span class="material-symbols-outlined text-primary-container text-3xl mb-4 block">mail</span>
            <h3 class="font-headline-md text-headline-md text-on-surface mb-2 uppercase">Have Questions?</h3>
            <p class="font-body-md text-body-md text-on-surface-variant mb-4 text-sm">Want to learn more about the team before spring? Send us an email.</p>
          </div>
          <a href="mailto:[email protected]" class="font-label-caps text-label-caps text-primary border border-outline-variant px-4 py-2 hover:border-primary hover:bg-surface-container-high transition-all duration-200 inline-flex items-center gap-2">
            Email Us <span class="material-symbols-outlined text-base">arrow_forward</span>
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- Subteams -->
  <section id="roles" class="py-24 border-t border-outline-variant relative overflow-hidden">
    <div class="grid-overlay absolute inset-0 opacity-10"></div>
    <div class="relative z-10 max-w-container-max mx-auto px-margin">
      <div class="flex items-center gap-4 mb-12">
        <span class="font-label-caps text-label-caps text-primary tracking-[0.2em] uppercase flex items-center gap-2">
          <span class="w-8 h-[1px] bg-primary block"></span>Our Subteams
        </span>
        <div class="h-px bg-outline-variant flex-grow opacity-50"></div>
        <span class="font-label-caps text-label-caps text-on-surface-variant uppercase">ROL-06</span>
      </div>
      <p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl mb-12">
        We recruit across all engineering disciplines and backgrounds. Find the subteam that matches your skills and ambitions.
      </p>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">

        <a href="subteam-views/subteam-structures.html" class="group relative bg-surface-container border border-outline-variant p-6 hover:border-primary-container transition-colors duration-300 card-hover-line overflow-hidden block">
          <span class="absolute top-4 right-4 font-label-caps text-[10px] text-outline-variant group-hover:text-primary transition-colors">UNIT-M1</span>
          <span class="material-symbols-outlined text-primary-container text-3xl mb-4 block">architecture</span>
          <h3 class="font-headline-md text-headline-md text-primary mb-2 uppercase">Structures</h3>
          <p class="font-body-md text-body-md text-on-surface-variant mb-4 text-sm">Aerospace-grade chassis and aeroshell design. CAD, FEA, and composite manufacturing.</p>
          <span class="font-label-caps text-label-caps text-primary border border-outline-variant px-4 py-2 group-hover:border-primary group-hover:bg-surface-container-high transition-all duration-200 inline-flex items-center gap-2">
            Learn More <span class="material-symbols-outlined text-base">arrow_forward</span>
          </span>
        </a>

        <a href="subteam-views/subteam-braking.html" class="group relative bg-surface-container border border-outline-variant p-6 hover:border-primary-container transition-colors duration-300 card-hover-line overflow-hidden block">
          <span class="absolute top-4 right-4 font-label-caps text-[10px] text-outline-variant group-hover:text-primary transition-colors">UNIT-M2</span>
          <span class="material-symbols-outlined text-primary-container text-3xl mb-4 block">speed</span>
          <h3 class="font-headline-md text-headline-md text-primary mb-2 uppercase">Braking</h3>
          <p class="font-body-md text-body-md text-on-surface-variant mb-4 text-sm">Fail-safe friction and eddy-current braking systems for sub-sonic deceleration.</p>
          <span class="font-label-caps text-label-caps text-primary border border-outline-variant px-4 py-2 group-hover:border-primary group-hover:bg-surface-container-high transition-all duration-200 inline-flex items-center gap-2">
            Learn More <span class="material-symbols-outlined text-base">arrow_forward</span>
          </span>
        </a>

        <a href="subteam-views/subteam-magnetic.html" class="group relative bg-surface-container border border-outline-variant p-6 hover:border-primary-container transition-colors duration-300 card-hover-line overflow-hidden block">
          <span class="absolute top-4 right-4 font-label-caps text-[10px] text-outline-variant group-hover:text-primary transition-colors">UNIT-M3</span>
          <span class="material-symbols-outlined text-primary-container text-3xl mb-4 block">ssid_chart</span>
          <h3 class="font-headline-md text-headline-md text-primary mb-2 uppercase">Magnetics</h3>
          <p class="font-body-md text-body-md text-on-surface-variant mb-4 text-sm">Magnetic levitation and linear induction motor systems for contactless propulsion.</p>
          <span class="font-label-caps text-label-caps text-primary border border-outline-variant px-4 py-2 group-hover:border-primary group-hover:bg-surface-container-high transition-all duration-200 inline-flex items-center gap-2">
            Learn More <span class="material-symbols-outlined text-base">arrow_forward</span>
          </span>
        </a>

        <a href="subteam-views/subteam-ecc.html" class="group relative bg-surface-container border border-outline-variant p-6 hover:border-primary-container transition-colors duration-300 card-hover-line overflow-hidden block">
          <span class="absolute top-4 right-4 font-label-caps text-[10px] text-outline-variant group-hover:text-primary transition-colors">UNIT-E1</span>
          <span class="material-symbols-outlined text-primary-container text-3xl mb-4 block">developer_board</span>
          <h3 class="font-headline-md text-headline-md text-primary mb-2 uppercase">ECC</h3>
          <p class="font-body-md text-body-md text-on-surface-variant mb-4 text-sm">Electronics, Controls & Communications. Embedded systems, sensor fusion, and telemetry.</p>
          <span class="font-label-caps text-label-caps text-primary border border-outline-variant px-4 py-2 group-hover:border-primary group-hover:bg-surface-container-high transition-all duration-200 inline-flex items-center gap-2">
            Learn More <span class="material-symbols-outlined text-base">arrow_forward</span>
          </span>
        </a>

        <a href="subteam-views/subteam-power.html" class="group relative bg-surface-container border border-outline-variant p-6 hover:border-primary-container transition-colors duration-300 card-hover-line overflow-hidden block">
          <span class="absolute top-4 right-4 font-label-caps text-[10px] text-outline-variant group-hover:text-primary transition-colors">UNIT-E2</span>
          <span class="material-symbols-outlined text-primary-container text-3xl mb-4 block">electric_bolt</span>
          <h3 class="font-headline-md text-headline-md text-primary mb-2 uppercase">Power Systems</h3>
          <p class="font-body-md text-body-md text-on-surface-variant mb-4 text-sm">High-voltage battery packs and power distribution. Thermal management and energy optimization.</p>
          <span class="font-label-caps text-label-caps text-primary border border-outline-variant px-4 py-2 group-hover:border-primary group-hover:bg-surface-container-high transition-all duration-200 inline-flex items-center gap-2">
            Learn More <span class="material-symbols-outlined text-base">arrow_forward</span>
          </span>
        </a>

        <a href="subteam-views/subteam-business.html" class="group relative bg-surface-container border border-outline-variant p-6 hover:border-primary-container transition-colors duration-300 card-hover-line overflow-hidden block">
          <span class="absolute top-4 right-4 font-label-caps text-[10px] text-outline-variant group-hover:text-primary transition-colors">UNIT-B1</span>
          <span class="material-symbols-outlined text-primary-container text-3xl mb-4 block">groups</span>
          <h3 class="font-headline-md text-headline-md text-primary mb-2 uppercase">Business</h3>
          <p class="font-body-md text-body-md text-on-surface-variant mb-4 text-sm">Sponsorships, outreach, and team operations. The backbone sustaining our engineering mission.</p>
          <span class="font-label-caps text-label-caps text-primary border border-outline-variant px-4 py-2 group-hover:border-primary group-hover:bg-surface-container-high transition-all duration-200 inline-flex items-center gap-2">
            Learn More <span class="material-symbols-outlined text-base">arrow_forward</span>
          </span>
        </a>

      </div>
    </div>
  </section>

</main>

<div id="footer-placeholder"></div>
<script src="shared.js?v=9"></script>
</body>
</html>