Various Iterations

Updated details (corrections), added resources page, partners and added calendar invite feature for P2P 2026

Author: WelbourneSecurity

P2P.html

@@ -5,12 +5,14 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Pwn2Play CTF - DMU Hackers Capture The Flag Competition</title>
-  <meta name="description" content="Pwn2Play is DMU Hackers' flagship Capture The Flag competition. Web exploitation, cryptography, reverse engineering and more. Open to all universities.">
+  <meta name="description" content="Pwn2Play is DMU Hackers' flagship Capture The Flag competition. Web exploitation, cryptography, reverse engineering and more. Open to everyone.">
   <meta property="og:title" content="Pwn2Play CTF - DMU Hackers">
   <meta property="og:description" content="DMU Hackers' flagship CTF competition. Exploit, decrypt, reverse-engineer. Prove you've got what it takes.">
   <meta property="og:type" content="website">
   <meta property="og:url" content="https://dmuhackers.com/P2P.html">
+  <meta property="og:image" content="https://dmuhackers.com/img/site-content/logo.png">
   <meta name="twitter:card" content="summary">
+  <meta name="twitter:image" content="https://dmuhackers.com/img/site-content/logo.png">
   <meta name="twitter:site" content="@dmuhackers">
   <meta name="twitter:title" content="Pwn2Play CTF - DMU Hackers">
   <meta name="twitter:description" content="DMU Hackers' flagship CTF competition. Exploit, decrypt, reverse-engineer. Prove you've got what it takes.">
@@ -68,6 +70,7 @@
         <li><a href="#key-info" class="nav__link" data-section="key-info">Key Info</a></li>
         <li><a href="#schedule" class="nav__link" data-section="schedule">Schedule</a></li>
         <li><a href="#rules" class="nav__link" data-section="rules">Rules</a></li>
+        <li><a href="#afterparty" class="nav__link" data-section="afterparty">Social</a></li>
         <li><a href="#sponsors" class="nav__link" data-section="sponsors">Sponsors</a></li>
         <li><a href="#podium" class="nav__link" data-section="podium">Results</a></li>
         <li><a href="https://discord.gg/Vvrk4kK" class="nav__link nav__link--cta" target="_blank" rel="noopener noreferrer"><i class="fab fa-discord"></i> Join Us</a></li>
@@ -146,6 +149,10 @@ <h3 class="card__title">Location</h3>
           <p class="card__text">Virtual &amp; DMU Campus</p>
         </div>
       </div>
+      <div class="calendar-actions">
+        <a href="https://www.google.com/calendar/render?action=TEMPLATE&text=Pwn2Play%3A+Core+Incursion+-+DMU+Hackers+CTF&dates=20260530T080000Z/20260530T170000Z&details=DMU+Hackers%27+flagship+Capture+The+Flag+competition.+Register%3A+https%3A%2F%2Fforms.gle%2FYPQaL6gwLK24S6ms8&location=Gateway+House+Floor+5%2C+De+Montfort+University%2C+The+Gateway%2C+Leicester+LE1+9BH" class="btn btn--ghost btn--sm" target="_blank" rel="noopener noreferrer"><i class="fab fa-google"></i> Google Calendar</a>
+        <a href="data/p2p-core-incursion.ics" class="btn btn--ghost btn--sm" download><i class="fas fa-calendar-plus"></i> Download .ics</a>
+      </div>
       <div class="p2p-connect">
         <h3 class="p2p-connect__title">Connect with us</h3>
         <div class="p2p-connect__links">
@@ -552,7 +559,7 @@ <h2 class="section__title" id="podiumTitle">Pwn2Play Results</h2>
       <div class="footer__top">
         <div class="footer__col">
           <div class="footer__brand">
-            <img src="img/site-content/logo.png" alt="DMU Hackers logo" class="footer__logo">
+            <img src="img/site-content/logo.png" alt="DMU Hackers logo" class="footer__logo" loading="lazy">
             <span>DMU Hackers</span>
           </div>
           <p class="footer__desc">De Montfort University's cyber security society. Hacking, learning, and competing since 2015.</p>
@@ -587,6 +594,7 @@ <h4 class="footer__heading">Join</h4>
             <a href="https://discord.gg/Vvrk4kK" target="_blank" rel="noopener noreferrer">Discord Server</a>
             <a href="https://www.demontfortsu.com/organisation/dmuhackers/" target="_blank" rel="noopener noreferrer">DSU Page</a>
             <a href="sponsors.html">Sponsors</a>
+            <a href="resources.html">Resources</a>
           </nav>
         </div>
       </div>

committee.html

@@ -10,7 +10,9 @@
   <meta property="og:description" content="The people who built DMU Hackers, year by year.">
   <meta property="og:type" content="website">
   <meta property="og:url" content="https://dmuhackers.com/committee.html">
+  <meta property="og:image" content="https://dmuhackers.com/img/site-content/logo.png">
   <meta name="twitter:card" content="summary">
+  <meta name="twitter:image" content="https://dmuhackers.com/img/site-content/logo.png">
   <meta name="twitter:site" content="@dmuhackers">
   <link rel="canonical" href="https://dmuhackers.com/committee.html">
   <link rel="icon" href="favicon.ico" type="image/x-icon">
@@ -99,7 +101,7 @@ <h3 class="member__name">Josh Lloyd</h3>
               <div class="member member--sm">
                 <div class="member__img member__img--placeholder member__img--mini"><i class="fas fa-heart-pulse"></i></div>
                 <div class="member--sm__info">
-                  <span class="member__name">Denis Turgut</span>
+                  <span class="member__name">Deniz Turgut</span>
                   <span class="member__role">Wellbeing Officer</span>
                 </div>
               </div>
@@ -617,7 +619,7 @@ <h3 class="member__name">Jeszica Natasha</h3>
       <div class="footer__top">
         <div class="footer__col">
           <div class="footer__brand">
-            <img src="img/site-content/logo.png" alt="DMU Hackers logo" class="footer__logo">
+            <img src="img/site-content/logo.png" alt="DMU Hackers logo" class="footer__logo" loading="lazy">
             <span>DMU Hackers</span>
           </div>
           <p class="footer__desc">De Montfort University's cyber security society. Hacking, learning, and competing since 2015.</p>
@@ -635,6 +637,7 @@ <h4 class="footer__heading">Navigate</h4>
             <a href="index.html">Home</a>
             <a href="index.html#about">About</a>
             <a href="committee.html">Committee</a>
+            <a href="resources.html">Resources</a>
           </nav>
         </div>
         <div class="footer__col">
@@ -650,6 +653,7 @@ <h4 class="footer__heading">Join</h4>
             <a href="https://discord.gg/Vvrk4kK" target="_blank" rel="noopener noreferrer">Discord Server</a>
             <a href="https://www.demontfortsu.com/organisation/dmuhackers/" target="_blank" rel="noopener noreferrer">DSU Page</a>
             <a href="sponsors.html">Sponsors</a>
+            <a href="partners.html">Partners</a>
           </nav>
         </div>
       </div>

css/P2P.css

@@ -160,6 +160,13 @@
 }
 
 /* ---------- Connect strip ---------- */
+.calendar-actions {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 32px;
+}
+
 .p2p-connect {
   margin-top: 48px;
   text-align: center;

css/main.css

@@ -102,6 +102,18 @@ ul  { list-style: none; }
   top: 0;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .container {
   width: 100%;
   max-width: var(--max-w);
@@ -1170,6 +1182,13 @@ a.card--link:hover .card__arrow {
   animation-play-state: paused;
 }
 
+.logo-marquee__track a {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  flex-shrink: 0;
+}
+
 .logo-marquee__img {
   height: 36px;
   width: auto;
@@ -1195,6 +1214,36 @@ a.card--link:hover .card__arrow {
   height: 48px;
 }
 
+/* ---------- Hero Stats ---------- */
+.hero-stats {
+  display: flex;
+  justify-content: center;
+  gap: 48px;
+  margin-top: 48px;
+  padding: 32px 0;
+  border-top: 1px solid rgba(255,255,255,.06);
+  border-bottom: 1px solid rgba(255,255,255,.06);
+}
+.hero-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.hero-stat__number {
+  font-family: var(--font-display);
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--accent);
+  line-height: 1;
+}
+.hero-stat__label {
+  font-size: .82rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: .08em;
+}
+
 /* ---------- Info Bar ---------- */
 .info-bar {
   display: flex;
@@ -1237,6 +1286,13 @@ a.card--link:hover .card__arrow {
   font-size: 1.15rem;
   text-shadow: 0 0 12px rgba(0,228,255,.3);
 }
+.info-bar__item a {
+  color: inherit;
+  text-decoration: none;
+}
+.info-bar__item a:hover {
+  color: var(--cyan);
+}
 
 /* ---------- P2P Split ---------- */
 .p2p-split {
@@ -1280,6 +1336,18 @@ a.card--link:hover .card__arrow {
   margin-top: 48px;
 }
 
+.section-cta {
+  text-align: center;
+  max-width: 520px;
+  margin: 0 auto;
+}
+.section-cta p {
+  font-size: 1.05rem;
+  color: var(--text-muted);
+  margin-bottom: 24px;
+  line-height: 1.7;
+}
+
 .committee-grid .member {
   flex: 0 0 calc(25% - 18px);
 }
@@ -1554,6 +1622,7 @@ a.card--link:hover .card__arrow {
 .step,
 .faq,
 .getting-started__cta,
+.section-cta,
 .rule {
   opacity: 0;
   transform: translateY(28px);
@@ -1727,8 +1796,139 @@ a.card--link:hover .card__arrow {
 
 @media (max-width: 480px) {
   .committee-grid .member { flex: 0 0 calc(50% - 12px); }
+  .hero-stats { gap: 24px; flex-wrap: wrap; }
+  .hero-stat__number { font-size: 1.6rem; }
   .info-bar { flex-direction: column; align-items: center; }
   .hero__actions { flex-direction: column; align-items: center; }
   .footer__top { grid-template-columns: 1fr; }
   .hero-term__body { max-height: 200px; }
 }
+
+/* ==========================================================================
+   View Transitions (cross-page)
+   ========================================================================== */
+@view-transition {
+  navigation: auto;
+}
+
+::view-transition-old(root) {
+  animation: fadeOut .2s ease-out;
+}
+::view-transition-new(root) {
+  animation: fadeIn .3s ease-in;
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+/* ==========================================================================
+   Keyboard Focus Indicators
+   ========================================================================== */
+:focus-visible {
+  outline: 2px solid var(--cyan);
+  outline-offset: 3px;
+  border-radius: 4px;
+}
+
+.btn:focus-visible {
+  outline: 2px solid var(--cyan);
+  outline-offset: 3px;
+  box-shadow: 0 0 16px var(--cyan-glow);
+}
+
+.nav__link:focus-visible {
+  outline: 2px solid var(--cyan);
+  outline-offset: 4px;
+}
+
+.card:focus-visible,
+.resource-card:focus-visible {
+  outline: 2px solid var(--cyan);
+  outline-offset: 2px;
+}
+
+/* ==========================================================================
+   Print Stylesheet
+   ========================================================================== */
+@media print {
+  *,
+  *::before,
+  *::after {
+    background: transparent !important;
+    color: #000 !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  body {
+    font-size: 12pt;
+    line-height: 1.5;
+  }
+
+  .nav,
+  .hero__canvas,
+  .hero__bg,
+  .hero__scroll,
+  .back-to-top,
+  .hero-term,
+  .hero-featured,
+  .hero__socials,
+  .hero__actions,
+  .logo-marquee,
+  .hero-countdown,
+  .info-bar__item--countdown,
+  .footer__socials {
+    display: none !important;
+  }
+
+  .hero {
+    min-height: auto !important;
+    padding: 24pt 0 !important;
+  }
+
+  .section {
+    padding: 24pt 0 !important;
+    break-inside: avoid;
+  }
+
+  .cards,
+  .bento,
+  .tools-grid,
+  .resource-grid {
+    grid-template-columns: 1fr 1fr !important;
+  }
+
+  .card,
+  .resource-card,
+  .tool-card {
+    border: 1px solid #ccc !important;
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+
+  a[href]::after {
+    content: " (" attr(href) ")";
+    font-size: .8em;
+    color: #555 !important;
+  }
+
+  .nav__link::after,
+  .btn::after,
+  .footer__nav a::after,
+  .hero-featured::after,
+  .logo-marquee__track a::after,
+  .info-bar__item a::after {
+    content: none !important;
+  }
+
+  .footer {
+    border-top: 1px solid #ccc;
+    padding-top: 12pt;
+  }
+}