diff --git a/_collections/_freshers_events/2026-09-21-2026-09-25-scavenger-hunt.md b/_collections/_freshers_events/2026-09-21-2026-09-25-scavenger-hunt.md new file mode 100644 index 00000000..a44a63bd --- /dev/null +++ b/_collections/_freshers_events/2026-09-21-2026-09-25-scavenger-hunt.md @@ -0,0 +1,10 @@ +--- +title: Scavenger Hunt +cover_image: /assets/images/inaction-css.jpg +image_alt: Computer Science Society members at a social event +description: Learn the lay of the campus with CSS' scavenger hunt, find study areas and food outlets around the uni. This is a self-guided activity. Find us at our stall from 10am — 4pm once you've completed it in the CS building for an exclusive Old Joe Tex sticker! Join up with up to 5 other people and have fun exploring! +location: Campus +date: 2026-09-21 +display_date: 21–25 Sep 2026 +start_time: "All day" +--- \ No newline at end of file diff --git a/_collections/_freshers_events/2026-09-21-board-games-night.md b/_collections/_freshers_events/2026-09-21-board-games-night.md new file mode 100644 index 00000000..ed1aaa49 --- /dev/null +++ b/_collections/_freshers_events/2026-09-21-board-games-night.md @@ -0,0 +1,10 @@ +--- +title: Board Games Night +cover_image: /assets/images/board-games-night.jpg +image_alt: Students playing board games at a CSS social +description: Come to the CS atrium for a night of board games and pizza! Get to know other people in CSS while you learn how to play something new! Make sure to bring your student ID if you'd like to get alcohol at the event, and no need to bring your own, that's our job! +location: School of Computer Science +date: 2026-09-21 +start_time: "18:00" +end_time: "TBD" +--- \ No newline at end of file diff --git a/_collections/_freshers_events/2026-09-22-css-lunch.md b/_collections/_freshers_events/2026-09-22-css-lunch.md new file mode 100644 index 00000000..c317e5bc --- /dev/null +++ b/_collections/_freshers_events/2026-09-22-css-lunch.md @@ -0,0 +1,10 @@ +--- +title: CSS Lunch +cover_image: /assets/images/freshers-2026/alfred-works.jpg +image_alt: CSS members eating together at Ming Moon +description: Join us at Alfred Works, a food hall in Birmingham’s iconic Custard Factory, for a relaxed lunch with CSS. This is the perfect time to get to know your coursemates and meet some great friends, all while having a nice lunch. +location: Alfred Works, Birmingham +date: 2026-09-22 +start_time: "12:00" +end_time: "14:00" +--- diff --git a/_collections/_freshers_events/2026-09-24-freshers-quiz.md b/_collections/_freshers_events/2026-09-24-freshers-quiz.md new file mode 100644 index 00000000..2f471525 --- /dev/null +++ b/_collections/_freshers_events/2026-09-24-freshers-quiz.md @@ -0,0 +1,9 @@ +--- +title: Freshers' Quiz +cover_image: /assets/images/2021-autumn/halloween.jpg +image_alt: Members of the Computer Science Society together at a quiz event +description: Get a team together or come along on your own for an evening of trivia, questionable guesses and friendly competition. It’s a great chance to meet your coursemates and other members of CSS, with drinks available and prizes up for grabs. +location: School of Computer Science +date: 2026-09-24 +start_time: "TBD" +--- diff --git a/_collections/_freshers_events/2026-09-25-pub-night.md b/_collections/_freshers_events/2026-09-25-pub-night.md new file mode 100644 index 00000000..75c258b0 --- /dev/null +++ b/_collections/_freshers_events/2026-09-25-pub-night.md @@ -0,0 +1,10 @@ +--- +title: Pub Night +cover_image: /assets/images/pub-night.jpg +image_alt: CSS members gathered together at a pub social +description: This is our first big pub night of the year! We will book a table at a TBD pub just for you! Join us for a drink and get to know your coursemates. Whether you're a fresher or not, come to the Pub for a great night! +location: TBD +date: 2026-09-25 +start_time: "19:00" +end_time: "21:00" +--- diff --git a/_collections/_freshers_events/2026-09-28-cs-societies-night.md b/_collections/_freshers_events/2026-09-28-cs-societies-night.md new file mode 100644 index 00000000..0d89ee80 --- /dev/null +++ b/_collections/_freshers_events/2026-09-28-cs-societies-night.md @@ -0,0 +1,9 @@ +--- +title: CS Societies Night +cover_image: /assets/images/20230925_204106-1-.jpg +image_alt: Students sitting together in a lecture hall +description: We’ll be joined alongside our friends at AFNOM, GDS, CVG, WiSE and oSTEM to hear some amazing introductory talks about each society to find out what we’re all about! After the talks, stick around for a chat and some free pizza and drinks! +location: Teaching & Learning Building - LT01 +date: 2026-09-28 +start_time: "TBD" +--- diff --git a/_config.yml b/_config.yml index b89f311f..63badbf3 100644 --- a/_config.yml +++ b/_config.yml @@ -11,7 +11,16 @@ social: links: - https://twitter.com/CSSBham - https://github.com/CSSUoB +freshers_banner: + enabled: true + link: /freshers + image: /assets/images/freshers-2026/freshers-nav.png menu: + - name: FRESHERS + link: /freshers + class: freshers-nav + image: /assets/images/freshers-2026/freshers-nav.png + image_alt: Freshers Week - name: News link: /newsletter - name: Events @@ -63,6 +72,9 @@ collections: clubs: events: sort_by: order + freshers_events: + output: false + sort_by: date feed: collections: @@ -70,4 +82,4 @@ feed: path: "/newsletter/feed.xml" include: ["_redirects"] -keep_files: ["_redirects"] \ No newline at end of file +keep_files: ["_redirects"] diff --git a/_data/freshers.yml b/_data/freshers.yml new file mode 100644 index 00000000..833e2631 --- /dev/null +++ b/_data/freshers.yml @@ -0,0 +1,71 @@ +hero: + background_image: /assets/images/freshers-2026/group-photo-web.jpg + intro: New to Computer Science at Birmingham? Find upcoming events and join the CSS community. + +countdown: + date: "2026-09-21" + +events: + heading: Events + introduction: Events are open to everyone, not just freshers! Coming along on your own is completely normal. + calendar_image: /assets/images/freshers-2026/freshers-calendar.svg + calendar_image_alt: CS Societies Freshers events calendar for 21 September to 2 October 2026, including CSS, GDS, AFNOM, VGS, oSTEM and other societies. + calendar_guide_file: /assets/images/freshers-2026/freshers-calendar.pdf + calendar_guide_heading: View our handy Freshers events guide + calendar_guide_description: Open our guide for dates, times and locations of events from CSS and a bunch of other societies you might be interested in. + +welcome: + heading: "👋 WELCOME TO FRESHERS 2026!" + body: |- + Congratulations to everyone joining Birmingham this year, and welcome back to our returning students! We provide social and academic events, connect students across the uni, and create opportunities through industry events, sponsors and collaborations. Some of our biggest events include our Halloween Quiz, Pub Crawl, Christmas Meal, TeX Talks, and the CSS Ball. + + During Freshers, our aim is to help new and returning CS students meet, feel part of the community, and settle into university life. + Last year was one of our biggest yet, with over 400 members, 3,000+ on our Discord server, 40 events, and CSS becoming the 3rd largest Guild society at UoB. + + Buying a CSS membership gives you access to ticketed events, society emails, a green name on Discord, and a free CSS T-shirt! + + Discord is our main platform, but our WhatsApp group and Instagram will always have the latest events and announcements. + + Freshers is one of the best times to get involved. We can’t wait to meet you. Welcome to CSS! 💜 + + + +about: + heading: Who are we? + body: |- + CSS is the official Computer Science Society at the University of Birmingham. We are a student-run society affiliated with the Guild of Students and work closely with the School of Computer Science. The society is run by an elected committee of students who organise our events, manage our finances and represent the society throughout the year. + + Our activities are funded through a combination of membership fees, Guild and University funding, and sponsorship from industry partners. This funding allows us to run events throughout the year, often for free or at a heavily subsidised price for our members. + link_text: Learn more about CSS + link_url: /about + cards: + - title: Run by students + body: An elected committee organises the society, represents members and decides what CSS does each year. + link_text: Meet the committee + link_url: /committee + - title: How we are supported + body: Memberships, ticketed events and sponsors help us fund events for members. + link_text: See our sponsors + link_url: /sponsor + - title: Socials and community + body: We run many socials including game nights, meals, quizzes, trips, pub nights. Some of our annual events are the CSS Ball and Pub Crawl. + link_text: Explore our events + link_url: /events + - title: Skills and careers + body: Expect workshops, hackathons, industry talks, and opportunities to try something new. + link_text: Visit BirmingHack + link_url: https://birminghack.com + +faq: + heading: FAQs + items: + - question: Are all freshers events free? + answer: Yes, all events are free to attend. You do not need a ticket. + - question: Do I need a membership first? + answer: Many activities are open to everyone. Membership may be required for some ticketed events, and this will always be stated in the event details. + - question: Do I need to study Computer Science? + answer: No. Anyone interested in CSS and our events is welcome to get involved. + - question: Do I need programming experience? + answer: Not at all! CSS is a social community first and foremost, bringing Computer Science students together to meet people, make friends and enjoy events throughout the year. + - question: Is it okay to come to an event alone? + answer: Absolutely. Lots of people do, especially during Freshers. Our committee will be there to welcome you and help you meet people. diff --git a/_includes/freshers_2026_banner.html b/_includes/freshers_2026_banner.html new file mode 100644 index 00000000..af6a13cf --- /dev/null +++ b/_includes/freshers_2026_banner.html @@ -0,0 +1,19 @@ +{% if site.freshers_banner.enabled %} + {% unless page.url contains "/freshers" %} + + {% endunless %} +{% endif %} diff --git a/_includes/header.html b/_includes/header.html index bdb0ed20..2228007e 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -7,8 +7,8 @@ {% for item in site.menu %} {% if item.children %} -
- {{ item.name }} +
+ {% if item.image %}{{ item.image_alt | default: item.name }}{% else %}{{ item.name }}{% endif %}
{% for sub in item.children %} {{ sub.name }} @@ -16,8 +16,8 @@
{% else %} -
- {{ item.name }} +
+ {% if item.image %}{{ item.image_alt | default: item.name }}{% else %}{{ item.name }}{% endif %}
{% endif %} {% endfor %} @@ -27,9 +27,9 @@
{% for item in site.menu %} -
+
{% if item.children %} - {{ item.name }} + {% if item.image %}{{ item.image_alt | default: item.name }}{% else %}{{ item.name }}{% endif %} {% else %} - {{ item.name }} + {% if item.image %}{{ item.image_alt | default: item.name }}{% else %}{{ item.name }}{% endif %} {% endif %}
{% endfor %} diff --git a/_layouts/merch.html b/_layouts/merch.html index 44b7a513..b34142f5 100644 --- a/_layouts/merch.html +++ b/_layouts/merch.html @@ -16,6 +16,7 @@ {% include header.html %}
+ {% include freshers_2026_banner.html %}
See other merch
@@ -65,4 +66,4 @@

Purchase options

{% include footer.html %} - \ No newline at end of file + diff --git a/_layouts/page.html b/_layouts/page.html index d14d85b5..0bae3e61 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -39,7 +39,7 @@ {% include header.html %}
- {% include ball_photos_banner.html %} + {% include freshers_2026_banner.html %} {{ content }}
diff --git a/_layouts/post.html b/_layouts/post.html index 12ed259a..2807b1c5 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -15,7 +15,7 @@ {% include header.html %}
- {% include ball_banner.html %} + {% include freshers_2026_banner.html %}
{% if page.header-image %} @@ -35,4 +35,4 @@

- Date Posted: {{ page.date | date: "%b %-d, %Y"}}

{% include footer.html %} - \ No newline at end of file + diff --git a/admin/config.yml b/admin/config.yml index 27fc0b9c..f330338b 100644 --- a/admin/config.yml +++ b/admin/config.yml @@ -8,6 +8,126 @@ publish_mode: editorial_workflow media_folder: "assets/images/" collections: + - name: "freshers_page" + label: "Freshers Page" + files: + - label: "Freshers Page Settings" + name: "freshers_page_settings" + file: "_data/freshers.yml" + fields: + - label: "Hero" + name: "hero" + widget: "object" + fields: + - label: "Background Image" + name: "background_image" + widget: "image" + allow_multiple: false + - label: "Introduction" + name: "intro" + widget: "text" + - label: "Countdown" + name: "countdown" + widget: "object" + fields: + - label: "Date" + name: "date" + widget: "datetime" + date_format: "DD MMM YYYY" + time_format: false + format: "YYYY-MM-DD" + hint: "The countdown disappears at the start of this date." + - label: "Events Section" + name: "events" + widget: "object" + fields: + - label: "Heading" + name: "heading" + widget: "string" + - label: "Introduction" + name: "introduction" + widget: "text" + - label: "Calendar Image" + name: "calendar_image" + widget: "image" + allow_multiple: false + - label: "Calendar Image Description" + name: "calendar_image_alt" + widget: "string" + hint: "Describe the calendar for people using screen readers." + - label: "Calendar Guide PDF" + name: "calendar_guide_file" + widget: "file" + - label: "Calendar Guide Heading" + name: "calendar_guide_heading" + widget: "string" + - label: "Calendar Guide Description" + name: "calendar_guide_description" + widget: "text" + - label: "Welcome Section" + name: "welcome" + widget: "object" + fields: + - label: "Heading" + name: "heading" + widget: "string" + - label: "Text" + name: "body" + widget: "markdown" + - label: "What Are We Section" + name: "about" + widget: "object" + fields: + - label: "Heading" + name: "heading" + widget: "string" + - label: "Introduction" + name: "body" + widget: "markdown" + - label: "Link Text" + name: "link_text" + widget: "string" + - label: "Link URL" + name: "link_url" + widget: "string" + - label: "Information Cards" + name: "cards" + widget: "list" + min: 1 + summary: "{{fields.title}}" + fields: + - label: "Title" + name: "title" + widget: "string" + - label: "Text" + name: "body" + widget: "text" + - label: "Link Text" + name: "link_text" + widget: "string" + - label: "Link URL" + name: "link_url" + widget: "string" + - label: "FAQs Section" + name: "faq" + widget: "object" + fields: + - label: "Heading" + name: "heading" + widget: "string" + - label: "Questions" + name: "items" + widget: "list" + min: 1 + summary: "{{fields.question}}" + fields: + - label: "Question" + name: "question" + widget: "string" + - label: "Answer" + name: "answer" + widget: "text" + - name: "pages" label: "Pages" folder: "/" @@ -70,3 +190,53 @@ collections: - label: "Body" name: "body" widget: "markdown" + + - name: "freshers_events" + label: "Freshers Events" + label_singular: "Freshers Event" + folder: "_collections/_freshers_events" + create: true + delete: true + slug: "{{year}}-{{month}}-{{day}}-{{slug}}" + sortable_fields: ["date", "title"] + summary: "{{title}} — {{date}}" + fields: + - label: "Title" + name: "title" + widget: "string" + - label: "Cover Image" + name: "cover_image" + widget: "image" + allow_multiple: false + - label: "Image Description" + name: "image_alt" + widget: "string" + hint: "Describe the image for people using screen readers." + - label: "Event Description" + name: "description" + widget: "text" + hint: "A short paragraph shown on the event card." + - label: "Location" + name: "location" + widget: "string" + - label: "Date (for sorting)" + name: "date" + widget: "datetime" + date_format: "DD MMM YYYY" + time_format: false + format: "YYYY-MM-DD" + hint: "Used to put events in chronological order." + - label: "Date shown on event" + name: "display_date" + widget: "string" + required: false + hint: "Shown exactly as entered. For example, 21 Sep 2026 or 21–25 Sep 2026." + - label: "Start Time" + name: "start_time" + widget: "string" + hint: "For example, 18:30." + - label: "End Time" + name: "end_time" + widget: "string" + required: false + hint: "Optional. For example, 21:00." diff --git a/assets/images/freshers-2026/alfred-works.jpg b/assets/images/freshers-2026/alfred-works.jpg new file mode 100644 index 00000000..cae5b262 Binary files /dev/null and b/assets/images/freshers-2026/alfred-works.jpg differ diff --git a/assets/images/freshers-2026/cs-societies-freshers-events-2025.png b/assets/images/freshers-2026/cs-societies-freshers-events-2025.png new file mode 100644 index 00000000..47b066d9 Binary files /dev/null and b/assets/images/freshers-2026/cs-societies-freshers-events-2025.png differ diff --git a/assets/images/freshers-2026/freshers-calendar.pdf b/assets/images/freshers-2026/freshers-calendar.pdf new file mode 100644 index 00000000..f3d34a91 Binary files /dev/null and b/assets/images/freshers-2026/freshers-calendar.pdf differ diff --git a/assets/images/freshers-2026/freshers-calendar.svg b/assets/images/freshers-2026/freshers-calendar.svg new file mode 100644 index 00000000..67c5a8ce --- /dev/null +++ b/assets/images/freshers-2026/freshers-calendar.svg @@ -0,0 +1,31 @@ + + Generated from structured event data by the CSS Freshers calendar generator. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/images/freshers-2026/freshers-nav.png b/assets/images/freshers-2026/freshers-nav.png new file mode 100644 index 00000000..55280e75 Binary files /dev/null and b/assets/images/freshers-2026/freshers-nav.png differ diff --git a/assets/images/freshers-2026/freshers-week-2026-lockup.png b/assets/images/freshers-2026/freshers-week-2026-lockup.png new file mode 100644 index 00000000..948d688c Binary files /dev/null and b/assets/images/freshers-2026/freshers-week-2026-lockup.png differ diff --git a/assets/images/freshers-2026/group-photo-web.jpg b/assets/images/freshers-2026/group-photo-web.jpg new file mode 100644 index 00000000..37e7a172 Binary files /dev/null and b/assets/images/freshers-2026/group-photo-web.jpg differ diff --git a/assets/tex/tex_bbq.svg b/assets/tex/tex_bbq.svg index 6d5db1cf..20ef502e 100644 --- a/assets/tex/tex_bbq.svg +++ b/assets/tex/tex_bbq.svg @@ -6,57 +6,14 @@ xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" - xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" - xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - width="264.58334mm" - height="239.40178mm" - viewBox="0 0 264.58334 239.40178" + width="327.97839mm" + height="291.60181mm" + viewBox="0 0 327.97839 291.60181" version="1.1" id="svg8" - sodipodi:docname="css dino bbq.svg" - inkscape:version="1.0 (4035a4fb49, 2020-05-01)" - style="enable-background:new" - inkscape:export-filename="C:\Users\Kate\Documents\#COMMISSIONS\css dinos\5-css dino (bbq & graduation)\css dino (bbq)\css dino bbq.png" - inkscape:export-xdpi="191.99998" - inkscape:export-ydpi="191.99998"> + style="enable-background:new"> - - - - + id="defs2" /> @@ -70,10 +27,8 @@ + transform="translate(90.05689,103.90857)" + id="layer23"> + id="path926" /> + id="path918" /> + id="path920" /> + id="path913" /> + id="path909" /> + id="path946" /> + id="path930" /> + id="path935" /> + id="path937" /> + id="path939" /> + id="path941" /> + id="path943" /> + id="path922" /> + id="path907" /> + id="path902" /> + id="path1034" /> + id="path1048" /> + id="path1043" /> + id="path1038" /> + id="path1000" /> + id="path1028" /> + id="path1022" /> + id="path954" /> + id="path959" /> + id="path962" /> + id="path978" /> + id="path980" /> + id="path982" /> + id="path984" /> + id="path986" /> + id="path990" /> + id="path992" /> + id="path994" /> + id="path1183" /> + id="path1185" /> + id="path1223" /> + id="path1217" /> + id="path1219" /> + id="path1273" /> + id="path1275" /> + id="path1277" /> + id="path1279" /> + id="path886" /> + id="path869" /> + id="path883" /> @@ -397,15 +257,11 @@ + id="path891" /> + id="path889" /> + id="g1171"> + id="path850-4" /> + id="path852-9" /> + id="path852-7-7" /> + d="m 244.71638,152.15953 c 0,0 2.57699,-3.04554 10.89363,-3.04554 8.31664,0 10.89363,3.04554 10.89363,3.04554 v 3.77607 c 0,0 -1.40563,3.04553 -10.89363,3.04553 -9.488,0 -10.89363,-3.04553 -10.89363,-3.04553 z" /> + transform="translate(90.05689,103.90857)" + style="display:inline;opacity:0.4;mix-blend-mode:overlay" + id="layer27"> + style="display:inline;fill:#1c184e;fill-opacity:1;stroke:none;stroke-width:0.963232px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" + d="m 110.89621,144.37315 -11.626674,32.67656 c 0.09899,0.14809 0.0984,0.16887 0.241846,0.35553 0.303368,0.39473 0.757448,0.74859 0.818038,0.8232 0.0955,-0.0191 0.67208,-0.006 1.15652,-0.1204 0.22695,-0.0536 0.2409,-0.0703 0.41238,-0.12299 l 3.80338,-10.68927 z" + id="path983" /> + + + + + + + + + + + + + + + + + id="layer3"> - + \ No newline at end of file diff --git a/css/freshers.scss b/css/freshers.scss new file mode 100644 index 00000000..76d3d648 --- /dev/null +++ b/css/freshers.scss @@ -0,0 +1,1555 @@ +--- +--- + +$ink: #090b18; +$navy: #101939; +$blue: #2f3c63; +$purple: #9d68dc; +$purple-dark: #793fd8; +$mint: #69e6c2; +$yellow: #ffe277; +$coral: #ff7c86; +$cream: #fbf8f3; +$white: #ffffff; + +body { + background: radial-gradient( + circle at 12% 8%, + rgba(169, 104, 255, 0.15), + transparent 24rem + ), + radial-gradient( + circle at 92% 32%, + rgba(105, 230, 194, 0.12), + transparent 30rem + ), + $ink; +} + +body > header { + position: sticky; + top: 0; + z-index: 100; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(9, 11, 24, 0.86); + backdrop-filter: blur(18px); +} + +main { + width: 100%; + max-width: none; + margin-top: 16px; +} + +.freshers-page { + --page-gutter: clamp(22px, 5vw, 72px); + overflow: hidden; + border-radius: 28px; + background: $navy; + box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28); +} + +.freshers-hero, +.freshers-section, +.freshers-final { + box-sizing: border-box; +} + +.freshers-hero { + position: relative; + display: block; + min-height: auto; + padding: clamp(26px, 4vw, 58px) var(--page-gutter) clamp(58px, 7vw, 100px); + isolation: isolate; + text-align: left; + background: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px), + linear-gradient(135deg, $ink, #131a44 68%, #22245b); + background-size: + 42px 42px, + 42px 42px, + auto; + + &::after { + content: ""; + position: absolute; + inset: auto 0 0; + height: 160px; + z-index: -1; + background: linear-gradient(transparent, rgba(169, 104, 255, 0.09)); + } +} + +.freshers-hero-copy { + position: relative; + z-index: 2; +} + +.freshers-hero .freshers-intro { + max-width: 720px; + margin-bottom: 34px; + color: rgba(255, 255, 255, 0.76); + font-size: clamp(18px, 1.7vw, 24px); + line-height: 1.6; +} + +.freshers-actions { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 16px; + width: 100%; + margin-top: 30px; +} + +.freshers-button { + position: relative; + display: flex; + align-items: center; + justify-content: flex-start; + min-height: 175px; + padding: 28px; + border: 2px solid transparent; + border-radius: 26px; + overflow: hidden; + font-family: "JetBrains Mono", "Inconsolata", monospace; + font-weight: 700; + text-align: left; + text-decoration: none; + transition: + transform 0.18s ease, + box-shadow 0.18s ease, + background 0.18s ease; + + .freshers-button-label { + align-self: flex-end; + max-width: 80%; + font-size: clamp(19px, 2vw, 28px); + line-height: 1.1; + } + + .freshers-button-arrow { + position: absolute; + top: 18px; + right: 18px; + display: grid; + place-items: center; + width: 54px; + height: 54px; + border-radius: 50%; + font-size: 30px; + transition: transform 0.18s ease; + } + + &:hover, + &:focus-visible { + transform: translateY(-3px); + + .freshers-button-arrow { + transform: translate(2px, -2px); + } + } +} + +.freshers-button-discord { + color: $white; + background: linear-gradient(110deg, #5865f2, #4752c4); + box-shadow: 0 14px 35px rgba(88, 101, 242, 0.28); + + .freshers-button-arrow { + color: #4752c4; + background: rgba(255, 255, 255, 0.88); + } + + &:hover, + &:focus-visible { + background: linear-gradient(110deg, #6571f5, #5865f2); + box-shadow: 0 18px 40px rgba(88, 101, 242, 0.4); + } +} + +.freshers-button-whatsapp { + color: #071b10; + background: linear-gradient(110deg, #25d366, #1fba59); + box-shadow: 0 14px 35px rgba(37, 211, 102, 0.25); + + .freshers-button-arrow { + color: #0b6b31; + background: rgba(255, 255, 255, 0.78); + } + + &:hover, + &:focus-visible { + background: linear-gradient(110deg, #36dd75, #25d366); + box-shadow: 0 18px 40px rgba(37, 211, 102, 0.38); + } +} + +.freshers-button-quiet { + color: $ink; + border-color: rgba(255, 255, 255, 0.08); + background: $cream; + + .freshers-button-arrow { + color: $cream; + background: $ink; + } + + &:hover, + &:focus-visible { + background: $white; + } +} + +.freshers-marquee { + --freshers-marquee-gap: 20px; + overflow: hidden; + color: $ink; + background: $yellow; + font-family: "JetBrains Mono", "Inconsolata", monospace; + font-size: clamp(13px, 1.5vw, 18px); + font-weight: 700; + white-space: nowrap; + + &:hover .freshers-marquee-track { + animation-play-state: paused; + } + + i { + color: $purple-dark; + font-style: normal; + } +} + +.freshers-marquee-track { + display: flex; + width: max-content; + animation: freshers-marquee-scroll 20s linear infinite; + will-change: transform; +} + +.freshers-marquee-group { + display: flex; + flex: none; + align-items: center; + justify-content: space-around; + gap: var(--freshers-marquee-gap); + width: max-content; + min-width: 100vw; + box-sizing: border-box; + padding: 20px calc(var(--freshers-marquee-gap) / 2); +} + +@keyframes freshers-marquee-scroll { + to { + transform: translateX(-50%); + } +} + +.freshers-section { + padding: clamp(72px, 9vw, 130px) var(--page-gutter); +} + +.freshers-section-heading { + max-width: 850px; + + h2 { + margin: 10px 0 18px; + font-size: clamp(38px, 5.5vw, 74px); + line-height: 1.02; + letter-spacing: -0.045em; + } + + > p { + max-width: 650px; + color: rgba(255, 255, 255, 0.68); + font-size: 18px; + } +} + +.freshers-heading-row { + display: block; + max-width: none; + margin-bottom: 38px; + + .freshers-heading-note { + max-width: 650px; + margin: 0; + color: rgba(255, 255, 255, 0.64); + font-size: 17px; + text-align: left; + } +} + +.freshers-events { + padding-top: clamp(38px, 5vw, 64px); + padding-bottom: clamp(32px, 4vw, 56px); + background: radial-gradient( + circle at 94% 15%, + rgba(255, 124, 134, 0.14), + transparent 25rem + ), + $blue; +} + +.freshers-countdown { + display: grid; + place-items: center; + padding-top: clamp(28px, 4vw, 48px); + padding-bottom: clamp(28px, 4vw, 48px); + text-align: center; + background: radial-gradient( + circle at 92% 20%, + rgba(255, 226, 119, 0.22), + transparent 28rem + ), + $ink; + + p { + margin: 0; + color: $white; + font-family: "JetBrains Mono", "Inconsolata", monospace; + font-size: clamp(28px, 4vw, 54px); + font-weight: 800; + line-height: 1; + letter-spacing: -0.045em; + + strong { + color: $yellow; + } + } +} + +.freshers-events-carousel { + position: relative; +} + +.freshers-events-empty { + display: flex; + align-items: center; + gap: clamp(22px, 4vw, 44px); + padding: clamp(24px, 4vw, 42px); + border: 1px solid rgba(255, 255, 255, 0.14); + border-radius: 22px; + background: rgba(9, 11, 24, 0.32); + + > img { + width: clamp(74px, 10vw, 118px); + height: clamp(74px, 10vw, 118px); + max-width: none; + max-height: none; + margin: 0; + object-fit: contain; + } + + h3 { + margin: 0 0 8px; + color: $mint; + font-size: clamp(22px, 3vw, 34px); + } + + p { + margin: 0; + color: rgba(255, 255, 255, 0.72); + } +} + +.freshers-events-track { + display: flex; + gap: clamp(18px, 2.4vw, 34px); + overflow-x: auto; + padding: 2px 0 8px; + scroll-behavior: smooth; + scroll-snap-type: x mandatory; + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } + + &:focus-visible { + outline: 3px solid $yellow; + outline-offset: 8px; + } +} + +.freshers-event-card { + display: flex; + flex: 0 0 calc((100% - (2 * clamp(18px, 2.4vw, 34px))) / 3); + flex-direction: column; + min-width: 0; + scroll-snap-align: start; + scroll-snap-stop: always; + + h3 { + min-height: 2.45em; + margin: 0 0 10px; + color: $mint; + font-size: clamp(21px, 2vw, 28px); + line-height: 1.16; + letter-spacing: -0.025em; + } +} + +.freshers-event-cover { + display: block; + width: 100%; + max-width: none; + aspect-ratio: 16 / 9; + border-radius: 18px; + object-fit: cover; + background: $navy; +} + +.freshers-event-details { + display: grid; + gap: 9px; + margin: 18px 0 16px; + + div { + display: grid; + grid-template-columns: 22px minmax(0, 1fr); + align-items: start; + gap: 9px; + } + + dt, + dd { + margin: 0; + } + + dt { + color: $yellow; + + svg { + display: block; + width: 18px; + height: 18px; + fill: none; + stroke: currentColor; + stroke-width: 1.8; + stroke-linecap: round; + stroke-linejoin: round; + } + } + + dd { + color: rgba(255, 255, 255, 0.82); + font-size: 15px; + line-height: 1.35; + } +} + +.freshers-event-description { + margin: 0; + color: rgba(255, 255, 255, 0.68); + font-size: 15px; + line-height: 1.55; +} + +.freshers-carousel-controls { + display: flex; + justify-content: space-between; + margin-top: 24px; + + button { + display: grid; + place-items: center; + width: 52px; + height: 52px; + padding: 0; + border: 0; + border-radius: 50%; + color: $yellow; + background: transparent; + cursor: pointer; + + svg { + width: 34px; + height: 34px; + fill: none; + stroke: currentColor; + stroke-width: 2.4; + stroke-linecap: round; + stroke-linejoin: round; + } + + &:hover, + &:focus-visible { + color: $ink; + background: $yellow; + } + + &:disabled { + opacity: 0.28; + cursor: default; + color: $yellow; + background: transparent; + } + } +} + +.freshers-calendar-link { + display: inline-block; + margin-top: 18px; + color: $yellow; + font-family: "JetBrains Mono", "Inconsolata", monospace; + font-size: 16px; + font-weight: 700; +} + +.freshers-calendar { + display: grid; + grid-template-columns: clamp(110px, 12vw, 160px) minmax(0, 1fr) auto; + align-items: center; + gap: clamp(16px, 2.5vw, 32px); + max-width: 1120px; + margin: clamp(32px, 4vw, 56px) auto 0; + padding: clamp(14px, 2vw, 22px); + border: 1px solid rgba(255, 255, 255, 0.16); + border-radius: 22px; + background: rgba(9, 11, 24, 0.3); + + .freshers-calendar-preview { + display: block; + width: 100%; + max-width: none; + height: auto; + margin: 0; + border-radius: 10px; + } +} + +.freshers-calendar-copy { + min-width: 0; + + h3 { + margin: 0 0 8px; + color: $white; + font-size: clamp(20px, 2.2vw, 30px); + letter-spacing: -0.025em; + } + + p { + max-width: 650px; + margin: 0; + color: rgba(255, 255, 255, 0.7); + font-size: clamp(14px, 1.3vw, 16px); + line-height: 1.55; + } +} + +.freshers-calendar-open { + display: inline-flex; + align-items: center; + justify-content: space-between; + gap: 18px; + min-height: 54px; + padding: 0 10px 0 20px; + border-radius: 999px; + color: $ink; + background: $yellow; + font-family: "JetBrains Mono", "Inconsolata", monospace; + font-size: 15px; + font-weight: 700; + text-decoration: none; + + span { + display: grid; + place-items: center; + width: 38px; + height: 38px; + border-radius: 50%; + color: $yellow; + background: $ink; + } + + svg { + width: 20px; + height: 20px; + fill: none; + stroke: currentColor; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; + } + + &:focus-visible { + outline: 3px solid $white; + outline-offset: 3px; + } + + @media (hover: hover) { + &:hover { + color: $yellow; + background: $ink; + + span { + color: $ink; + background: $yellow; + } + } + } +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.freshers-steps { + background: $ink; + + .freshers-section-heading { + max-width: none; + } + + .freshers-section-heading > p { + max-width: none; + } +} + +.freshers-card-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 18px; + margin-top: 42px; +} + +.freshers-card { + display: flex; + flex-direction: column; + min-height: 330px; + padding: clamp(24px, 3vw, 38px); + border-radius: 22px; + color: $ink; + transition: transform 0.2s ease; + + &:hover { + transform: translateY(-6px) rotate(-0.5deg); + } + + h3 { + margin: 44px 0 10px; + color: $ink; + font-size: clamp(25px, 2.4vw, 34px); + } + + p { + flex: 1; + color: rgba(9, 11, 24, 0.76); + font-size: 16px; + } + + a { + color: $ink; + font-family: "JetBrains Mono", "Inconsolata", monospace; + font-weight: 700; + } +} + +.freshers-card-purple { + background: $purple; +} + +.freshers-card-mint { + background: $mint; +} + +.freshers-card-yellow { + background: $yellow; +} + +.freshers-card-icon { + display: grid; + place-items: center; + width: 48px; + height: 48px; + border: 1px solid rgba(9, 11, 24, 0.32); + border-radius: 50%; + font-family: "JetBrains Mono", "Inconsolata", monospace; + font-weight: 700; +} + +.freshers-split { + display: grid; + grid-template-columns: minmax(0, 0.85fr) minmax(400px, 1.15fr); + gap: clamp(50px, 8vw, 120px); + background: $cream; + + h2, + h3, + p { + color: $ink; + } +} + +.freshers-split-intro { + h2 { + margin: 0 0 22px; + font-size: clamp(38px, 5vw, 68px); + line-height: 1.02; + letter-spacing: -0.045em; + } + + > p { + color: #4f5262; + font-size: 18px; + } + + > a { + display: inline-block; + margin-top: 20px; + color: $purple-dark; + font-family: "JetBrains Mono", "Inconsolata", monospace; + font-weight: 700; + } +} + +.freshers-benefits { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; + + article { + display: flex; + flex-direction: column; + padding: 25px; + border: 1px solid #ded9e4; + border-radius: 18px; + background: $white; + + > .freshers-benefit-icon { + display: block; + align-self: flex-start; + width: 56px; + height: 56px; + margin: 0 0 24px; + object-fit: contain; + object-position: left top; + } + + > .freshers-benefit-emoji { + display: flex; + align-items: center; + align-self: flex-start; + width: 56px; + height: 56px; + margin: 0 0 24px; + font-size: 34px; + line-height: 1; + } + + > div { + display: flex; + flex: 1; + flex-direction: column; + } + + h3 { + margin-bottom: 7px; + font-size: 20px; + } + + p { + margin: 0; + color: #5d6070; + font-size: 14px; + } + + a { + align-self: flex-start; + margin-top: 18px; + color: $purple-dark; + font-family: "JetBrains Mono", "Inconsolata", monospace; + font-size: 14px; + font-weight: 700; + } + } +} + +.freshers-faq { + background: $navy; +} + +.freshers-faq-list { + margin-top: 38px; + border-top: 1px solid rgba(255, 255, 255, 0.16); + + details { + border-bottom: 1px solid rgba(255, 255, 255, 0.16); + color: $white; + } + + summary { + display: flex; + align-items: center; + justify-content: space-between; + gap: 20px; + padding: 25px 4px; + color: $white; + cursor: pointer; + list-style: none; + font-family: "JetBrains Mono", "Inconsolata", monospace; + font-size: clamp(17px, 2vw, 22px); + font-weight: 700; + + &::-webkit-details-marker { + display: none; + } + + span { + color: $mint; + font-size: 28px; + transition: transform 0.18s ease; + } + } + + details[open] summary span { + transform: rotate(45deg); + } + + details p { + margin: -4px 4px 24px; + color: rgba(255, 255, 255, 0.66); + font-size: 16px; + } +} + +.freshers-final { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: end; + gap: 40px; + padding: clamp(70px, 9vw, 120px) var(--page-gutter); + background: radial-gradient( + circle at 86% 18%, + rgba(190, 142, 255, 0.34), + transparent 22rem + ), + linear-gradient(125deg, #241147, $purple-dark 58%, $purple); + + h2 { + max-width: 900px; + margin: 12px 0 16px; + font-size: clamp(42px, 6vw, 82px); + line-height: 0.98; + letter-spacing: -0.05em; + } + + p { + max-width: 660px; + color: rgba(255, 255, 255, 0.78); + font-size: 18px; + } +} + +.freshers-final-copy { + display: grid; + grid-template-columns: clamp(100px, 11vw, 150px) minmax(0, 1fr); + align-items: center; + column-gap: clamp(22px, 3vw, 40px); + + .freshers-final-tex { + grid-row: 1 / 3; + width: 100%; + height: auto; + max-width: none; + max-height: 180px; + margin: 0; + object-fit: contain; + } + + h2, + p { + grid-column: 2; + } +} + +.freshers-final-actions { + display: grid; + gap: 12px; + width: clamp(250px, 22vw, 330px); +} + +.freshers-final-button { + display: flex; + align-items: center; + justify-content: space-between; + gap: 24px; + min-height: 64px; + box-sizing: border-box; + padding: 16px 18px 16px 22px; + border-radius: 16px; + font-family: "JetBrains Mono", "Inconsolata", monospace; + font-size: clamp(16px, 1.5vw, 20px); + font-weight: 800; + text-decoration: none; + + span { + display: grid; + place-items: center; + width: 34px; + height: 34px; + flex: 0 0 auto; + border-radius: 50%; + background: currentColor; + font-size: 18px; + } +} + +.freshers-final-button-discord { + color: #d9dcff; + background: #5865f2; + + span { + color: #5865f2; + background: #d9dcff; + } + + &:hover, + &:focus-visible { + color: #252b6d; + background: #cfd3ff; + + span { + color: #d9dcff; + background: #5865f2; + } + } +} + +.freshers-final-button-whatsapp { + color: #c9f7da; + background: #25d366; + + span { + color: #25d366; + background: #c9f7da; + } + + &:hover, + &:focus-visible { + color: #075e2b; + background: #b9f5cf; + + span { + color: #c9f7da; + background: #128c4a; + } + } +} + +body > footer { + border-top: 1px solid rgba(255, 255, 255, 0.08); + background: $ink; +} + +@media only screen and (max-width: 1000px) { + .freshers-event-card { + flex-basis: calc((100% - clamp(18px, 2.4vw, 34px)) / 2); + } + + .freshers-hero-copy { + max-width: 800px; + } + + .freshers-final { + display: block; + } + + .freshers-final-actions { + width: min(100%, 420px); + margin-top: 22px; + } + + .freshers-card-grid { + grid-template-columns: 1fr; + } + + .freshers-card { + min-height: 260px; + } + + .freshers-split { + grid-template-columns: 1fr; + } +} + +@media only screen and (max-width: 650px) { + main { + margin-top: 8px; + } + + .freshers-page { + border-radius: 18px; + } + + .freshers-hero { + h1 { + font-size: clamp(48px, 15vw, 68px); + } + } + + .freshers-intro { + max-width: 92%; + } + + .freshers-actions, + .freshers-button { + width: 100%; + box-sizing: border-box; + } + + .freshers-marquee { + --freshers-marquee-gap: 16px; + font-size: clamp(12px, 3.6vw, 15px); + } + + .freshers-marquee-group { + padding-block: 16px; + } + + .freshers-event-card { + flex-basis: 100%; + + h3 { + min-height: 0; + font-size: 23px; + } + } + + .freshers-benefits { + grid-template-columns: 1fr; + } + + .freshers-final h2 { + font-size: clamp(42px, 12vw, 60px); + } +} + +.freshers-lockup { + --freshers-hero-photo: radial-gradient( + circle at 50% 45%, + #27336d, + #0d122d 72% + ); + --freshers-logo-inset: clamp(16px, 3vw, 42px); + position: relative; + z-index: 2; + display: grid; + place-items: center; + width: 100%; + max-width: none; + height: clamp(470px, 70svh, 680px); + margin: 0; + border-radius: clamp(28px, 4vw, 54px); + overflow: hidden; + isolation: isolate; + background-image: linear-gradient(rgba(9, 11, 24, 0.1), rgba(9, 11, 24, 0.45)), + var(--freshers-hero-photo); + background-position: center 62%; + background-size: cover; + + &::after { + content: ""; + position: absolute; + inset: 0; + z-index: 0; + box-shadow: inset 0 0 90px rgba(9, 11, 24, 0.28); + pointer-events: none; + } + + > .freshers-campaign-lockup { + position: absolute; + inset: var(--freshers-logo-inset); + z-index: 2; + display: block; + width: calc(100% - (2 * var(--freshers-logo-inset))); + height: calc(100% - (2 * var(--freshers-logo-inset))); + max-width: none; + max-height: none; + margin: 0; + object-fit: contain; + filter: drop-shadow(0 16px 24px rgba(9, 11, 24, 0.38)); + } +} + +.freshers-hero-lower { + display: block; + padding-top: clamp(34px, 5vw, 68px); +} + +.freshers-hero-lower .freshers-hero-copy { + grid-column: 1; + grid-row: 1; + align-self: center; + width: auto; + max-width: none; + margin: 0; + padding-right: clamp(12px, 2vw, 28px); +} + +.freshers-hero-lower .freshers-intro { + max-width: none; + margin: 0; + color: rgba(255, 255, 255, 0.84); + font-size: clamp(17px, 1.6vw, 22px); + line-height: 1.75; +} + +.freshers-hero-lower .freshers-actions { + --freshers-cta-gap: clamp(10px, 1.25vw, 16px); + display: grid; + grid-template-columns: minmax(0, 1.75fr) minmax(190px, 0.95fr) minmax( + 0, + 1.75fr + ); + // The introduction, Discord and Instagram share the wide left column; + // WhatsApp and Events retain their full-height columns. + grid-template-rows: minmax(0, 0.8fr) repeat(2, minmax(0, 1fr)); + gap: var(--freshers-cta-gap); + min-height: clamp(330px, 28vw, 390px); + margin: 0; +} + +.freshers-hero-lower .freshers-button { + box-sizing: border-box; + width: 100%; + min-width: 0; + max-width: 100%; + min-height: 0; + padding: clamp(20px, 2vw, 26px); + border-radius: 23px; + box-shadow: none; + transition: none; + + .freshers-button-label { + position: relative; + z-index: 2; + font-size: clamp(32px, 2.4vw, 44px); + } + + .freshers-button-arrow { + top: 16px; + right: 16px; + width: 54px; + height: 54px; + box-sizing: border-box; + z-index: 2; + border: 0; + color: $ink; + background: rgba(255, 255, 255, 0.9); + transition: none; + + svg { + width: 24px; + height: 24px; + fill: none; + stroke: currentColor; + stroke-width: 2.25; + stroke-linecap: round; + stroke-linejoin: round; + } + } + + .freshers-button-doodle { + position: absolute; + z-index: 1; + display: block; + fill: none; + stroke: currentColor; + stroke-width: 3.5; + stroke-linecap: round; + stroke-linejoin: round; + opacity: 0.32; + pointer-events: none; + } + + .freshers-button-doodle-discord-chat { + top: 12px; + left: 28px; + width: 80px; + transform: rotate(-4deg); + } + + .freshers-button-doodle-discord-squiggle { + top: 84px; + left: 49%; + width: 50px; + transform: rotate(7deg); + } + + .freshers-button-doodle-whatsapp-phone { + top: 34px; + left: 22px; + width: 72px; + transform: rotate(-5deg); + } + + .freshers-button-doodle-whatsapp-squiggle { + top: 38%; + right: 22px; + width: 44px; + transform: rotate(8deg); + } + + .freshers-button-doodle-instagram-camera { + top: 22px; + left: 24px; + width: 68px; + transform: rotate(-5deg); + } + + .freshers-button-doodle-instagram-sparkles { + top: 36%; + right: 24px; + width: 54px; + transform: rotate(6deg); + } + + .freshers-button-doodle-events-drink { + top: 24px; + left: 32px; + width: 92px; + transform: rotate(-7deg); + } + + .freshers-button-doodle-events-exclamations { + top: 80px; + left: 52%; + width: 80px; + transform: rotate(5deg); + } + + &:hover, + &:focus-visible { + transform: none; + + .freshers-button-arrow { + transform: none; + } + } +} + +.freshers-hero-lower .freshers-button-discord { + grid-column: 1; + grid-row: 2; + color: #d9dcff; + background-color: #5865f2; + background-image: none; + + .freshers-button-arrow { + color: #5865f2; + background-color: #d9dcff; + } + + &:hover, + &:focus-visible { + color: #252b6d; + background-color: #cfd3ff; + box-shadow: none; + + .freshers-button-arrow { + color: #d9dcff; + background-color: #5865f2; + } + } +} + +.freshers-hero-lower .freshers-button-discord, +.freshers-hero-lower .freshers-button-instagram { + .freshers-button-label { + font-size: clamp(24px, 2vw, 34px); + } +} + +.freshers-hero-lower .freshers-button-whatsapp { + grid-column: 2; + grid-row: 1 / 4; + color: #c9f7da; + background-color: #25d366; + background-image: none; + + .freshers-button-arrow { + color: #0b6b31; + background-color: #c9f7da; + } + + &:hover, + &:focus-visible { + color: #075e2b; + background-color: #b9f5cf; + box-shadow: none; + + .freshers-button-arrow { + color: #c9f7da; + background-color: #128c4a; + } + } +} + +.freshers-hero-lower .freshers-button-instagram { + grid-column: 1; + grid-row: 3; + color: #ffe2f0; + background-color: #c13584; + background-image: none; + + .freshers-button-arrow { + color: #9b2867; + background-color: #ffe2f0; + } + + &:hover, + &:focus-visible { + color: #7e2054; + background-color: #ffd1e6; + box-shadow: none; + + .freshers-button-arrow { + color: #ffe2f0; + background-color: #9b2867; + } + } +} + +.freshers-hero-lower .freshers-button-quiet { + grid-column: 3; + grid-row: 1 / 4; + background-color: $cream; + + .freshers-button-arrow { + color: $cream; + background-color: $ink; + } + + &:hover, + &:focus-visible { + color: $ink; + background-color: $yellow; + box-shadow: none; + + .freshers-button-arrow { + color: $yellow; + background-color: $ink; + } + } +} + +@media only screen and (max-width: 760px) { + .freshers-hero { + padding: 22px 18px 60px; + } + + .freshers-calendar { + grid-template-columns: 82px minmax(0, 1fr); + gap: 14px; + padding: 14px; + border-radius: 18px; + } + + .freshers-calendar-copy { + h3 { + font-size: 19px; + } + + p { + font-size: 13px; + } + } + + .freshers-calendar-open { + grid-column: 1 / -1; + width: 100%; + box-sizing: border-box; + } + + .freshers-lockup { + --freshers-logo-inset: 8px; + height: clamp(175px, 42vw, 220px); + border-radius: 18px; + background-position: center 66%; + + > .freshers-campaign-lockup { + max-width: none; + max-height: none; + } + } + + .freshers-final-copy { + display: block; + + .freshers-final-tex { + width: 82px; + height: 82px; + margin-bottom: 18px; + } + } + + .freshers-hero-lower { + display: block; + min-height: 0; + padding-top: 18px; + } + + .freshers-hero-lower .freshers-hero-copy { + grid-column: 1 / -1; + grid-row: auto; + width: auto; + max-width: none; + margin-bottom: 16px; + } + + .freshers-hero-lower .freshers-intro { + font-size: 17px; + line-height: 1.8; + } + + .freshers-hero-lower .freshers-actions { + --freshers-cta-gap: 10px; + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-rows: none; + gap: var(--freshers-cta-gap); + min-height: 0; + margin-top: 0; + } + + .freshers-hero-lower .freshers-button { + grid-column: auto; + grid-row: auto; + min-height: 164px; + + .freshers-button-label { + font-size: 28px; + } + + .freshers-button-doodle { + opacity: 0.38; + } + + .freshers-button-doodle-discord-chat { + display: none; + } + + .freshers-button-doodle-whatsapp-phone { + top: 40px; + right: 180px; + left: auto; + display: block; + width: 50px; + } + + .freshers-button-doodle-discord-squiggle { + display: none; + } + + .freshers-button-doodle-whatsapp-squiggle { + top: 40px; + right: 49px; + left: auto; + display: block; + width: 35px; + } + + .freshers-button-doodle-instagram-camera { + top: 25px; + left: 24px; + width: 58px; + } + + .freshers-button-doodle-instagram-sparkles { + top: 48px; + right: 72px; + width: 42px; + } + + .freshers-button-doodle-events-drink { + top: 18px; + left: 24px; + width: 72px; + } + + .freshers-button-doodle-events-exclamations { + top: 40px; + left: 60%; + width: 60px; + } + + .freshers-button-arrow { + top: 13px; + right: 13px; + width: 46px; + height: 46px; + + svg { + width: 21px; + height: 21px; + } + } + } + + .freshers-hero-lower .freshers-button-discord, + .freshers-hero-lower .freshers-button-whatsapp { + aspect-ratio: 1.12 / 1; + min-height: 0; + + .freshers-button-label { + font-size: 20px; + } + } + + .freshers-hero-lower .freshers-button-instagram { + grid-column: 1 / -1; + min-height: 164px; + + .freshers-button-label { + font-size: 28px; + } + } + + .freshers-hero-lower .freshers-button-quiet { + grid-column: 1 / -1; + min-height: 210px; + margin-top: 0; + } +} + +@media (prefers-reduced-motion: reduce) { + .freshers-button, + .freshers-button span, + .freshers-card, + .freshers-faq-list summary span { + transition: none; + } + + .freshers-events-track { + scroll-behavior: auto; + } + + .freshers-marquee-track { + width: 100%; + animation: none; + transform: none; + will-change: auto; + } + + .freshers-marquee-group { + flex-wrap: wrap; + justify-content: center; + width: 100%; + min-width: 100%; + white-space: normal; + + &[aria-hidden="true"] { + display: none; + } + } +} diff --git a/css/main.scss b/css/main.scss index 250d90b3..47a70279 100644 --- a/css/main.scss +++ b/css/main.scss @@ -46,6 +46,105 @@ body { } } +.freshers-2026-banner { + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto; + align-items: center; + gap: 18px; + overflow: hidden; + padding: 10px 16px; + box-sizing: border-box; + border: 0; + border-radius: 24px; + background: $TeX-Purple; + box-shadow: + inset 0 0 0 1px rgba(255, 255, 255, 0.18), + 0 12px 30px rgba(10, 15, 30, 0.22); +} + +.banner .freshers-2026-banner-logo { + display: block; + width: 76px; + height: 58px; + object-fit: contain; +} + +.banner .freshers-2026-banner-copy { + margin: 0; + text-align: left; + + strong, + span { + display: block; + text-align: left; + } + + strong { + margin-bottom: 3px; + color: white; + font-size: 18px; + } + + span { + color: rgba(255, 255, 255, 0.82); + font-size: 14px; + font-weight: 500; + } +} + +.banner .freshers-2026-banner-cta { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 9px; + min-height: 42px; + padding: 0 16px; + border-radius: 10px; + color: #241147; + background: #ffe277; + font-size: 14px; + text-decoration: none; + white-space: nowrap; + + span { + color: inherit; + } + + &:hover, + &:focus-visible { + color: white; + background: #241147; + } +} + +@media only screen and (max-width: 650px) { + .freshers-2026-banner { + grid-template-columns: auto minmax(0, 1fr); + gap: 10px 14px; + padding: 12px 14px 14px; + border-radius: 18px; + } + + .banner .freshers-2026-banner-logo { + width: 62px; + height: 52px; + } + + .banner .freshers-2026-banner-copy strong { + font-size: 15px; + } + + .banner .freshers-2026-banner-copy span { + font-size: 12px; + } + + .banner .freshers-2026-banner-cta { + grid-column: 1 / -1; + width: 100%; + box-sizing: border-box; + } +} + main { font-family: "Roboto", sans-serif; width: min(1550px, 95%); @@ -168,6 +267,9 @@ header { } .right { + display: flex; + align-items: center; + justify-content: flex-end; flex: 1 1 auto; text-align: right; padding-right: 20px; @@ -371,6 +473,35 @@ footer { padding: 0; } +header .nav.freshers-nav > a { + display: inline-flex; + align-items: center; + justify-content: right; + line-height: 0; +} + +header .right .nav.freshers-nav > a { + display: flex; +} + +header .nav.freshers-nav .nav-item-image { + display: block; + width: auto; + height: 30px; + max-width: none; +} + +header .mobile-menu .nav.freshers-nav .nav-item-image { + height: 74px; +} + +header .mobile-menu .nav.freshers-nav > a { + display: flex; + align-items: flex-start; + justify-content: flex-end; + width: 100%; +} + hr { color: #9d68dc; } diff --git a/freshers.html b/freshers.html new file mode 100644 index 00000000..7cfc08f7 --- /dev/null +++ b/freshers.html @@ -0,0 +1,335 @@ +--- +layout: page +title: Freshers 2026 +description: Meet the University of Birmingham Computer Science Society, discover Freshers events and join the CSS community. +styles: + - /css/freshers.css +scripts: + - /js/freshers-events.js +--- + +{% assign freshers = site.data.freshers %} + + + +
+
+

+ CSS Freshers Week 2026, University of Birmingham +

+ +
+
+
+

+ {{ freshers.hero.intro | escape }} +

+
+ + + + + Join Our Discord + + + + + + Join Our WhatsApp + + + + + + Follow on Instagram + + + + + + See CSS Freshers events + + +
+
+
+ + {% assign freshers_marquee_items = "COMMUNITY|PIZZA|TRIPS|HACKATHONS|SPORT|QUIZZES|NETWORKING|CAREERS|WORKSHOPS" | split: "|" %} +
+
+ {% for copy in (1..2) %} + + {% endfor %} +
+
+ +
+

0 days to go!

+
+ +
+
+

{{ freshers.events.heading | escape }}

+

{{ freshers.events.introduction | escape }}

+
+ + {% assign freshers_events = site.freshers_events %} + {% if freshers_events.size > 0 %} +
+
+ {% for event in freshers_events %} +
+

{{ event.title }}

+ {{ event.image_alt | default: event.title | escape }} +
+
+
+ + +
+
{{ event.location }}
+
+
+
+ + +
+
+ {% if event.display_date %} + {{ event.display_date | escape }} + {% else %} + + {% endif %} +
+
+
+
+ + +
+
{{ event.start_time }}{% if event.end_time %}–{{ event.end_time }}{% endif %}
+
+
+

{{ event.description | escape }}

+
+ {% endfor %} +
+ + {% if freshers_events.size > 1 %} +
+ + +
+ {% endif %} +
+ Add to your own calendar + {% else %} +
+ +
+

Freshers events are coming soon.

+

Check back here for dates, locations and times.

+
+
+ {% endif %} + +
+ {{ freshers.events.calendar_image_alt | escape }} +
+

{{ freshers.events.calendar_guide_heading | escape }}

+

{{ freshers.events.calendar_guide_description | escape }}

+
+ + Open events guide + + +
+
+ +
+
+

{{ freshers.welcome.heading | escape }}

+ {{ freshers.welcome.body | markdownify }} +
+ +
+
+ +

Join our community

+

Join our Discord, introduce yourself and meet coursemates. We also regularly update our WhatsApp group with socials.

+ Enter the Discord +
+
+ +

Pick an event

+

From socials to games and nights out, choose something fun and meet everyone. Coming alone is completely normal too.

+ Explore freshers socials +
+
+ +

Get a membership

+

Become a member for access to ticketed events, a free T-shirt, society emails and a whole year of CSS.

+ Explore membership +
+
+
+ +
+
+

{{ freshers.about.heading | escape }}

+ {{ freshers.about.body | markdownify }} + {{ freshers.about.link_text | escape }} +
+
+ {% for card in freshers.about.cards %} +
+ {% case forloop.index %} + {% when 1 %} + + {% when 2 %} + + {% when 3 %} + + {% when 4 %} + + {% endcase %} +
+

{{ card.title | escape }}

+

{{ card.body | escape }}

+ {{ card.link_text | escape }} +
+
+ {% endfor %} +
+
+ +
+
+

{{ freshers.faq.heading | escape }}

+
+
+ {% for item in freshers.faq.items %} +
+ {{ item.question | escape }} +

{{ item.answer | escape }}

+
+ {% endfor %} +
+
+ +
+
+ +

Join our community today.

+

Introduce yourself on our discord now and arrive in September already knowing a few friendly faces. Join our WhatsApp to get the latest on all our socials.

+
+
+ + Join Discord + + + Join WhatsApp + +
+
+
diff --git a/js/freshers-events.js b/js/freshers-events.js new file mode 100644 index 00000000..c9a72e12 --- /dev/null +++ b/js/freshers-events.js @@ -0,0 +1,67 @@ +document.addEventListener("DOMContentLoaded", () => { + const countdown = document.querySelector("[data-freshers-countdown]"); + + if (countdown) { + const target = new Date(countdown.dataset.countdownTo).getTime(); + const days = countdown.querySelector("[data-countdown-days]"); + const unit = countdown.querySelector("[data-countdown-unit]"); + let countdownTimer; + + const updateCountdown = () => { + const remaining = target - Date.now(); + + if (!Number.isFinite(target) || remaining <= 0) { + window.clearInterval(countdownTimer); + countdown.remove(); + return false; + } + + const remainingDays = Math.ceil(remaining / 86400000); + days.textContent = String(remainingDays); + unit.textContent = remainingDays === 1 ? "day" : "days"; + return true; + }; + + if (updateCountdown()) { + countdownTimer = window.setInterval(updateCountdown, 1000); + } + } + + document.querySelectorAll("[data-events-carousel]").forEach((carousel) => { + const track = carousel.querySelector("[data-events-track]"); + const previous = carousel.querySelector("[data-events-previous]"); + const next = carousel.querySelector("[data-events-next]"); + + if (!track || !previous || !next) return; + + const endTolerance = 4; + + const updateControls = () => { + const maximumScroll = track.scrollWidth - track.clientWidth; + previous.disabled = track.scrollLeft <= endTolerance; + next.disabled = track.scrollLeft >= maximumScroll - endTolerance; + }; + + const move = (direction) => { + const gap = + Number.parseFloat(window.getComputedStyle(track).columnGap) || 0; + const card = track.querySelector(".freshers-event-card"); + + if (!card) return; + + track.scrollBy({ + left: direction * (card.getBoundingClientRect().width + gap), + behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches + ? "auto" + : "smooth", + }); + }; + + previous.addEventListener("click", () => move(-1)); + next.addEventListener("click", () => move(1)); + track.addEventListener("scroll", updateControls, { passive: true }); + window.addEventListener("resize", updateControls); + + updateControls(); + }); +});