Merge branch 'oliviergoulet/main/135' into 'main'

Add /collaborations page

Closes #135 and eclipsefdn/infrazilla#669

See merge request eclipsefdn/it/websites/eclipse.org!36

config.toml

@@ -159,4 +159,22 @@ pluralizeListTitles = false
   parent = "contribute"
   name = "FAQ"
   url = "/contribute/dev-program/faq"
-  weight = 2
\ No newline at end of file
+  weight = 2
+
+[[menu.sidebar]]
+  identifier = "collaborations"
+  name = "Industry Collaborations"
+  url = "/collaborations/"
+  weight = 1
+
+[[menu.sidebar]]
+  parent = "collaborations"
+  name = "About Interest Groups"
+  url = "/collaborations/interest-groups"
+  weight = 1
+
+[[menu.sidebar]]
+  parent = "collaborations"
+  name = "Interest Group Process"
+  url = "/org/collaborations/interest-groups/process.php"
+  weight = 1
\ No newline at end of file

content/collaborations/_index.md

+---
+title: Industry Collaborations
+date: 2022-09-13T10:25:51-04:00
+description: Work with your peers in the industry in a vendor-neutral structure to drive shared innovation 
+categories: []
+keywords:
+  - working groups
+  - interest groups
+  - collaboration
+slug: ""
+aliases: []
+toc: false
+draft: false
+page_css_file: public/css/collaborations-styles.css
+header_wrapper_class: header-collaborations header-collaborations-bg-img
+hide_page_title: true
+hide_sidebar: true
+#seo_title: ""
+headline: Industry Collaborations
+subtitle: Work with your peers in the industry in a vendor-neutral structure to drive shared innovation 
+links:
+    - - href: "#join-collaboration"
+      - text: Join a Collaboration
+    - - href: "#start-collaboration"
+      - text: Start a Collaboration
+container: container-fluid collaborations-container
+layout: single
+---
+
+{{< pages/collaborations/collaborating >}}
+
+{{< pages/collaborations/join-collaboration >}}
+
+{{< pages/collaborations/start-new-collaboration >}}
\ No newline at end of file

content/collaborations/interest-groups.md

+---
+title: "About Interest Groups"
+date: 2022-09-21T10:30:17-04:00
+description: ""
+categories: []
+keywords: []
+slug: ""
+aliases: []
+toc: false
+draft: false
+#header_wrapper_class: ""
+#seo_title: ""
+#headline: ""
+#subtitle: ""
+#tagline: ""
+#links: []
+---
+Interest groups are a light-weight, low-cost way for Eclipse Foundation members to collaborate on a common interest or domain in a vendor neutral manner based on the Eclipse Foundation’s governance structure, including its antitrust policy.
+
+Find out more about interest groups, with these frequently asked questions:
+
+1.  [What are Eclipse Foundation Interest Groups?](#1-what-are-eclipse-foundation-interest-groups)
+2.  [Does Eclipse now offer two options for industry collaborations?](#2-does-this-mean-eclipse-offers-two-mechanisms-by-which-it-supports-industry-collaborations)
+3.  [What are the major differences between these collaborations and which one is right for my initiative?](#3-what-are-the-major-differences-between-interest-groups-and-working-groups-how-do-i-choose-which-is-right-for-my-initiative)
+4.  [How do I propose a new Interest Group?](#4-how-can-i-propose-to-create-an-eclipse-interest-group)
+5.  [How many members are required to create an Eclipse Interest Group?](#5-how-many-members-are-required-in-order-to-create-an-interest-group)
+6.  [Are there any fees associated with Interest Groups?](#6-are-there-any-fees-associated-with-interest-groups)
+7.  [How to join an existing Interest Group?](#7-how-can-i-participate-in-an-existing-interest-group)
+8.  [What is the governance structure of Interest Groups?](#8-what-is-the-governance-structure-of-an-interest-group)
+9.  [How do Interest Groups make decisions?](#9-how-do-interest-groups-make-decisions)
+10. [Is there a relationship between Interest Groups and Eclipse Projects?](#10-what-relationship-do-interest-groups-have-to-projects)
+11. [Can Interest Groups create specifications and/or develop software?](#11-can-interest-groups-create-specifications-andor-develop-software)
+12. [Are Interest Groups a pre-req to becoming a Working Group?](#12-are-interest-groups-a-prerequisite-to-becoming-a-working-group)
+13. [Can Interest Groups graduate to Working Groups?](#13-can-interest-groups-graduate-to-working-groups)
+14. [Are Interest Groups the same as Special Interest Groups?](#14-are-interest-groups-the-same-as-special-interest-groups-sigs)
+15. [I’m interested, how do I find out more about the Eclipse Foundation industry collaborations?](#15-how-do-i-find-out-more-about-interest-groups-and-working-groups)
+
+
+## 1. What are Eclipse Foundation Interest Groups?
+Eclipse Foundation Interest Groups facilitate the collaboration between participating Eclipse Member organizations to drive shared innovation. Eclipse Interest Groups are a light-weight association of a subset of Members that can come together to share a common interest in a topic or domain in a vendor-neutral manner based on the Eclipse Foundation’s overall governance structure including its antitrust policy.
+
+## 2. Does this mean Eclipse offers two mechanisms by which it supports industry collaborations?
+Yes, the Eclipse Foundation now offers two mechanisms to foster open industry collaboration to develop and drive new industry platforms and initiatives. Like Eclipse Working Groups, Eclipse Interest Groups can also collaborate across organizational boundaries in a vendor-neutral structure to solve industry problems and to drive shared innovation.
+
+## 3. What are the major differences between Interest Groups and Working Groups? How do I choose which is right for my initiative?  
+Interest Groups, while modeled after Working Groups, are a very light-weight/self-governed  group. Participation in Interest Groups is self managed by Member organizations, and there are no formal participation agreements, budgets, or committees. In short, they provide a simpler mechanism for Member organizations to collaborate in a collegial, vendor-neutral manner on initiatives of shared interest. 
+
+Working Groups are intended for industry collaborative initiatives that have the intent to invest in the collective initiative, typically via participation fees. The intent is for working groups to address such additional objectives as developing and promoting a joint brand, developing open source specifications, contributing resources to drive common roadmaps and/or platforms, etc.
+
+From a pragmatic point of view, Working Groups leverage the [Eclipse Foundation Working Group Process](https://www.eclipse.org/org/workinggroups/process.php) to manage and drive the collaboration, and have Participation Agreements, Working Group Fees, Charters,Committees, Program Plans, Budgets, and so on. Interest Groups, on the other hand, due to their lighter-weight structure, have none of these. 
+
+## 4. How can I propose to create an Eclipse Interest Group?
+Existing members may propose to create an Interest Group by starting the process [here](https://projects.eclipse.org/node/add/interest-group). If your organization is not already a member, you must first [join the Eclipse Foundation](https://www.eclipse.org/membership/#tab-membership), and then follow the same process. Note that all participating member organizations must have also executed the Eclipse Member Committer and Contributor Agreement.
+
+## 5. How many members are required in order to create an Interest Group?
+There must be at least three Member organizations participating. Each Interest Group must designate one or more Interest Group Leads.
+
+## 6. Are there any fees associated with Interest Groups?
+No, Interest Groups do not require Members to pay any additional fees to participate.  However, you must be a Member of the Eclipse Foundation to participate. For more information, please visit our [Membership Page](https://www.eclipse.org/membership/). 
+
+## 7. How can I participate in an existing Interest Group?
+Existing members with an executed Eclipse Member Committer and Contributor Agreement may participate in any Interest Group of interest. Members may participate by declaring participation via the Interest Group’s mailing list.
+
+## 8. What is the governance structure of an Interest Group?
+The governance structure for Interest Groups is intentionally lightweight. Eclipse Interest Groups inherit and rely upon the Eclipse Foundation’s overall governance, sufficient to enable individuals from Member organizations to collaborate effectively while conforming to all Eclipse processes and policies, including the Eclipse Foundation Intellectual Property and Antitrust Policies. See the [Interest Group Process](https://www.eclipse.org/org/collaborations/interest-groups/process.php) for a full overview of applicable related governance documents.
+
+All Interest Groups must produce agendas and minutes of all meetings and disseminate to the Interest Group’s mailing list.
+
+## 9. How do Interest Groups make decisions?
+Most actions taken by Interest Groups should be done so collegially by participants and based on lazy consensus.  However, the [Eclipse Foundation Interest Group Process](https://www.eclipse.org/org/collaborations/interest-groups/process.php) does include a means for decisions to be formalized, should the participants believe it is valuable to do so.  
+
+## 10. What relationship do Interest Groups have to Projects?
+Interest Groups may declare interest in any Eclipse project or projects, and may carry out activities that are in support of the success of those Eclipse project(s).
+
+## 11. Can Interest Groups create specifications and/or develop software?
+No, Interest Groups cannot create specifications nor develop software.  Interest Groups may, at their discretion, produce artifacts such as documents, whitepapers, architectures, blueprints, diagrams, presentation and the like; however, they must not develop software, software documentation, or specifications.
+
+## 12. Are Interest Groups a Prerequisite to becoming a Working Group?
+No, Interest Groups are not a prerequisite to becoming a Working Group. It is possible, however, for the members of an Interest Group to decide to create a new Working Group.  
+
+## 13. Can Interest Groups graduate to Working Groups?
+There is no direct correlation between Interest Groups and Working Groups, and thus no notion of graduation.  Rather, all Eclipse industry collaborations, be they Interest Groups or Working Groups, will persist for however long they serve the collective purpose of their Members. It is possible that, over time, the Members of a particular Interest Group may deem that it would be more useful to be constituted as a Working Group, and vice versa. Should this be the case, it is possible under the guidance of the Foundation’s staff to make such a change.  
+
+## 14. Are Interest Groups the same as Special Interest Groups (SIGs)?
+While similar, they are different.  Special Interest Groups are a collaborative governance structure that allows Members of a working group to collaborate on specific, focused aspects of the broader working group’s scope. As such, Members of a SIG must also be participants of the Working Group which has formed the SIG.
+
+## 15. How do I find out more about Interest Groups and Working Groups?
+Please contact us via [collaborations@eclipse-foundation.org](mailto:collaborations@eclipse-foundation.org
+).

data/collaborations/collaborating.yml

+- title: Vendor Neutral Governance
+  description: |
+    The Eclipse Foundation enables individuals and organizations to collaborate under a vendor-neutral governance model 
+  icon: vendor.png
+- title: Ecosystem Development and Marketing
+  description: Build a community for collaboration through marketing and community programs
+  icon: ecosystem.png
+- title: Collaboration Management
+  description: |
+    Coordinate the efforts of open source projects by providing a shared vision and roadmap
+  icon: collaboration.png
+- title: Specification Development
+  description: |
+    Use the proven Eclipse specification development processes that provide a framework for the development of specifications in open source
+  icon: specification.png
+- title: Branding and Compatibility
+  description: |
+    Create branding and compatibility programs to build a trusted ecosystem of implementers and consumers
+  icon: compatibility.png
+

data/collaborations/collaboration_comparison.yml

+- name: Vendor Neutral Governance
+  support:
+    working_groups: true
+    interest_groups: true
+- name: Collaboration Management
+  support:
+    working_groups: true
+    interest_groups: true
+- name: Ecosystem Development and Marketing
+  support: 
+    working_groups: true
+    interest_groups: false
+- name: Specification Development
+  support:
+    working_groups: true
+    interest_groups: false
+- name: Branding and Compatibility
+  support:
+    working_groups: true
+    interest_groups: false
\ No newline at end of file

js/main.js

@@ -14,3 +14,4 @@
 import 'eclipsefdn-solstice-assets'
 import './src/eclipsefdn-promo-content'
 import './src/featured-projects-committer'
+import './src/collaborations/eclipsefdn.weighted-working-groups';

js/src/collaborations/eclipsefdn.weighted-working-groups.js

+import template from '../templates/weighted-working-groups/working-group-block.mustache'
+
+const defaultOptions = {
+    count: 1,
+    wrapperClass: ''
+}
+
+// Working groups with a weight of -1 will not be displayed.
+const weights = {
+    default: -1,
+    'jakarta-ee': 1,
+    sdv: 20,
+    'cloud-development-tools': 30,
+    adoptium: 38,
+    oniro: 38,
+    'eclipse-ide': 44,
+    'internet-things-iot': 44,
+    aice: 50,
+    asciidoc: 50,
+    'edge-native': 50,
+    microprofile: 50,
+    openmobility: 50,
+    osgi: 50,
+    sparkplug: 50,
+};
+
+const fallbackLogos = {
+    sdv: '/images/collaborations/logos/software-defined-vehicle-fallback.png'
+}
+
+const removeDuplicates = (value, index, self) => self.indexOf(value) === index;
+
+const getWeightedRandomIndex = (weightBuckets, categorizedArrayByWeight) => {
+    const largestWeight = Object.values(weights).sort().at(-1);
+    const randomNumber = Math.floor(Math.random() * largestWeight);
+
+    // Returns whatever number is the closest to a weight bucket
+    const closest = Object.values(weights).reduce((prev, curr) => {
+        return (Math.abs(curr - randomNumber) < Math.abs(prev - randomNumber) ? curr : prev);
+    })
+
+    const weightBucketSelectionIndex = weightBuckets.indexOf(closest);
+    const weightBucketSelection = weightBuckets[weightBucketSelectionIndex];
+    const selectionIndex = Math.floor(Math.random() * categorizedArrayByWeight[weightBucketSelection].length);
+    
+    return categorizedArrayByWeight[weightBucketSelection][selectionIndex];
+}
+
+function getUniqueRandomWorkingGroups(workingGroupsCategorizedByWeight, weightBuckets, count) {
+    // Creates a set of selected working groups. This will omit duplicates.
+    let selectionSet = new Set();
+
+    while (selectionSet.size < count) {
+        const randomWorkingGroup = getWeightedRandomIndex(weightBuckets, workingGroupsCategorizedByWeight);
+
+        if (selectionSet.has(randomWorkingGroup)) continue;
+        selectionSet.add(randomWorkingGroup);
+    }
+
+    return Array.from(selectionSet);
+}
+
+async function getWeightedRandomWorkingGroups(count) {
+    const cachedWorkingGroups = JSON.parse(sessionStorage.getItem('weighted-working-groups'));
+    const isCached = cachedWorkingGroups != null;
+
+    // Only return the cached working groups if the count hasn't changed since last time run
+    if (isCached && cachedWorkingGroups.length === count) return cachedWorkingGroups;
+
+    const response = await fetch('https://membership.eclipse.org/api/working_groups');
+    const workingGroups = await response.json();
+
+    const weightBuckets = Object
+        .values(weights)
+        .filter(removeDuplicates);
+
+    // Create an object where the key is a bucket (or weight), and the value an array of working groups tied to that bucket
+    const weightBucketObject = weightBuckets.reduce((acc, bucket) => ({...acc, [bucket]: [] }), {})
+
+    const workingGroupsCategorizedByWeight = workingGroups.reduce((acc, wg) => {
+        const weight = weights[wg.alias] || weights.default;
+        acc[weight].push(wg);
+
+        return acc;
+    }, { ...weightBucketObject });
+
+    // Retrieves weighted random working groups and stores it in session storage cache
+    const randomWorkingGroups = getUniqueRandomWorkingGroups(workingGroupsCategorizedByWeight, weightBuckets, count);
+    sessionStorage.setItem('weighted-working-groups', JSON.stringify(randomWorkingGroups));
+
+    return randomWorkingGroups;
+};
+
+const matchHeightForLogos = (baseElement) => {
+    const imgElements = baseElement.querySelectorAll('.weighted-working-group-logo');
+
+    imgElements.forEach(el => { 
+        el.addEventListener('load', () => {
+            $('.weighted-working-group-block-wrapper').matchHeight();
+        });
+    });
+}
+
+const getWorkingGroupLogo = ({ alias, logo } = workingGroup) => {
+    const fallbackLogo = fallbackLogos[alias];
+    if (logo === '') return fallbackLogo || '';
+
+    return logo;
+}
+
+(async function renderWeightedWorkingGroups() {
+    const element = document.querySelector('.eclipsefdn-weighted-working-groups');
+    if (!element) return;
+
+    const options = { 
+        ...defaultOptions, 
+        ...element.dataset,
+        count: +element.dataset.count
+    };
+
+    element.innerHTML = template({ isFetching: true, items: new Array(options.count) , wrapperClass: options.wrapperClass })
+
+    const workingGroups = await getWeightedRandomWorkingGroups(options.count);
+    
+    const data = {
+        isFetching: false,
+        wrapperClass: options.wrapperClass,
+        items: workingGroups.map(wg => ({
+            title: wg.title,
+            logo: getWorkingGroupLogo(wg),
+            websiteUrl: wg.resources.website,
+        }))
+    };
+
+    element.innerHTML = template(data); 
+    matchHeightForLogos(element);
+})();
\ No newline at end of file

js/src/mix-manifest.json

+{
+    "/js/main.js": "/js/main.js",
+    "/css/styles.css": "/css/styles.css",
+    "/css/europe-styles.css": "/css/europe-styles.css",
+    "/css/projects-openchain.css": "/css/projects-openchain.css"
+}

js/src/templates/weighted-working-groups/working-group-block.mustache

+{{#items}}
+    <div class="weighted-working-group-block-wrapper match-height-item-by-row {{wrapperClass}}">
+        {{#isFetching}}
+            <div class="weighted-working-group-block weighted-working-group-loading" aria-label="Loading working group website links">
+                <i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
+                <span class="sr-only">Loading...</span>
+            </div>
+        {{/isFetching}}
+        {{^isFetching}}
+            <a class="weighted-working-group-block" href="{{websiteUrl}}" aria-label="{{ title }}'s official website">
+                <div class="weighted-working-group-logo-wrapper">
+                    <img class="weighted-working-group-logo" src="{{logo}}" alt="" />
+                </div>
+            </a>
+        {{/isFetching}}
+    </div>
+{{/items}}
\ No newline at end of file

layouts/shortcodes/pages/collaborations/collaborating.html

+{{ $data_source := .Site.Data.collaborations.collaborating }}
+
+<section id="collaboration-at-the-eclipse-foundation" class="row collaborations-collaborating">
+    <div class="col-md-10 collaborations-col collaborations-collaborating-bg">
+        <div class="title-wrapper">
+            <h2 class="margin-0">Collaborating at the <span class="line-break" >Eclipse Foundation</span></h2>
+        </div>
+    </div>
+    <div class="col-md-14 collaborations-col">
+        <div class="row collaborations-col-row">
+            {{ range $index, $item := $data_source }}
+                {{ if eq (mod $index 2) 0 }}
+                    <div class="clearfix"></div>
+                {{ end }}
+                <div class="col-md-12 collaborations-collaborating-item-col">
+                    <div class="collaborations-collaborating-item">
+                        <div class="item-icon-wrapper">
+                            <img class="item-icon-bg" src="/images/collaborations/icons/icon-bg.png" alt="" />
+                            <img class="item-icon" src="/images/collaborations/icons/{{ $item.icon }}" alt="" />
+                        </div>
+                        <div class="item-content">
+                            <h3 class="item-content-title">{{ $item.title }}</h3>
+                            <p>{{ $item.description }}</p>
+                        </div>
+                    </div>
+                </div>
+            {{ end }}
+        </div>
+    </div>
+</section>

layouts/shortcodes/pages/collaborations/join-collaboration.html

+<section id="join-collaboration" class="container join-collaboration margin-bottom-60">
+    <h2>Join a Collaboration</h2>
+    <div class="row">
+        <div class="eclipsefdn-weighted-working-groups" data-wrapper-class="col-sm-8" data-count="3"></div>
+        <div class="col-xs-24 join-collaboration-button-col">
+            <a class="btn btn-primary join-collaboration-button" href="/org/workinggroups/explore.php" tabindex="0">View All</a>
+        </div>
+    </div>
+</section>

layouts/shortcodes/pages/collaborations/start-new-collaboration.html

+<section id="start-collaboration" class="container-fluid row section-dark">
+    <div class="container">
+        <h2>Start a New Collaboration</h2>
+        <p>The Eclipse Foundation provides multiple services to support industry collaborations.</p>
+        <p>
+            Whether you intend on contributing to Eclipse technologies that are important to your product strategy, or simply
+            want to explore a specific innovation area with like-minded organizations, the Eclipse Foundation is the open source
+            home for industry collaboration.
+        </p>
+
+        <div class="row margin-top-40">
+            <div class="col-md-16">
+                <div class="collaboration-table-wrapper">
+                    <table class="collaboration-table">
+                        <thead>
+                            <tr>
+                                <td scope="col"></td>
+                                <th scope="col">Working Groups</th>
+                                <th scope="col">Interest Groups</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                        {{ range .Site.Data.collaborations.collaboration_comparison }}
+                            <tr>
+                                <th scope="row">{{ .name }}</th>
+                                <td>
+                                    <span 
+                                        role="img" 
+                                        {{ if .support.working_groups }}
+                                        class="collaboration-table-checked" 
+                                        alt="yes"
+                                        {{ else }}
+                                        alt="no"
+                                        {{ end }}
+                                    >
+                                    </span>
+                                </td>
+                                <td>
+                                    <span 
+                                        role="img" 
+                                        {{ if .support.interest_groups }}
+                                        class="collaboration-table-checked" 
+                                        alt="yes"
+                                        {{ else }}
+                                        alt="no"
+                                        {{ end }}
+                                    >
+                                    </span>
+                                </td>
+                            </tr>
+                        {{ end }}
+                        <tr class="collaboration-table-link-row">
+                            <td scope="row"></td>
+                            <td><a href="/org/workinggroups/about.php">More About Working Groups</a></td>
+                            <td><a href="./interest-groups">More About Interest Groups</a></td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="col-md-8">
+                <div class="start-collaboration-buttons-wrapper">
+                    <div class="start-collaboration-buttons">
+                        <a class="btn btn-primary" href="mailto:collaborations@eclipse-foundation.org" tabindex="0">Contact Us About Creating a Working Group</a>
+                        <a class="btn btn-secondary" href="https://projects.eclipse.org/propose-interest-group" tabindex="0">Propose an Interest Group</a>
+                    </div>
+                    <a href="mailto:collaborations@eclipse-foundation.org">Not sure? Contact us</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file

less/_variables.less

@@ -9,4 +9,4 @@
  *   Christopher Guindon <chris.guindon@eclipse-foundation.org>
  * 
  * SPDX-License-Identifier: EPL-2.0
-*/
\ No newline at end of file
+*/

less/page_css_file/collaborations/_variables.less

+/*!
+ * Copyright (c) 2021 Eclipse Foundation, Inc.
+ * 
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ * 
+ * Contributors:
+ *   Olivier Goulet <olivier.goulet@eclipse-foundation.org>
+ * 
+ * SPDX-License-Identifier: EPL-2.0
+*/
+
+@section-dark-white: #FAF5F5;
+@collaboration-gray: #F0EFEF;
+@collaborating-item-color: #888890;
+@collaborations-padding-y: 3em;
+@collaborations-icon-wrapper-margin-top: 0.5em; // adjust for matching section header height
+@collaborations-btn-padding: 1em;
\ No newline at end of file

less/page_css_file/collaborations/styles.less

+/*!
+ * Copyright (c) 2022 Eclipse Foundation, Inc.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * Contributors:
+ *   Olivier Goulet <olivier.goulet@eclipse-foundation.org>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+*/
+@import (reference) '~eclipsefdn-solstice-assets/less/quicksilver/styles.less';
+@import '_variables.less';
+
+.line-break {
+  display: block;
+}
+
+.section-dark {
+  padding-top: 3em;
+  padding-bottom: 3em;
+  background-color: #262525; 
+
+  th,
+  td,
+  p,
+  h2,
+  h3 {
+    color: @section-dark-white;
+  }
+
+  a {
+    color: @section-dark-white;
+  }
+
+  .btn-secondary {
+    color: @black;
+    background-color: @section-dark-white;
+
+    &:hover {
+      background-color: darken(#efebeb, 10%);
+    }
+  }
+}
+
+// Jumbotron
+.header-collaborations {
+  .logo-eclipse-default {
+    filter: drop-shadow(10px 10px 5px @black);
+  }
+
+  h1,
+  h2 {
+    font-weight: bold;
+    text-shadow: 0px 10px 10px @black;
+  }
+
+  h1::after {
+    display: none;
+  }
+
+  h1 {
+    margin-bottom: 3rem;
+  }
+
+  h2 {
+    font-size: 1.75rem;
+    margin-top: 0;
+    margin-bottom: 3rem;
+
+    @media (min-width: @screen-md-min) {
+      font-size: 2.15rem;
+    }
+  }
+
+  .btn-primary {
+    padding: @collaborations-btn-padding;
+  }
+}
+
+.header-collaborations-bg-img {
+  background-image: url(../../images/collaborations/bg-header.jpg)
+}
+
+// Collaborating section
+.collaborations-collaborating {
+  padding-top: 2em;
+
+  @media (min-width: @screen-md-min) {
+    padding-bottom: 6em;
+  }
+}
+
+.collaborations-col-row {
+  @media (min-width: @screen-md-min) {
+    padding: 0 3em;
+  }
+
+  @media (min-width: @screen-lg-min) {
+    padding: 0 6em;
+  }
+}
+
+.collaborations-col {
+  padding-top: @collaborations-padding-y;
+  padding-bottom: @collaborations-padding-y;
+}
+
+.collaborations-collaborating-bg {
+  padding-right: 3em;
+  background-image: url(../../images/collaborations/bg-collaborating.jpg);
+  background-size: cover;
+  min-height: 5em;
+
+  @media (min-width: @screen-sm-min) {
+    min-height: 20em;
+  }
+
+  @media (min-width: @screen-md-min) {
+    min-height: 50em;
+  }
+
+  .title-wrapper {
+    margin-left: auto;
+    max-width: none;
+  }
+
+  h2 {
+    color: @white;
+    text-align: center;
+    font-weight: 600;
+
+    @media (min-width: @screen-md-min) {
+      text-align: right;
+    }
+  }
+}
+
+.collaborations-collaborating-item {
+  display: flex;
+  min-height: 11em;
+
+  .item-icon-wrapper {
+    position: relative;
+    flex-shrink: 0;
+    width: 5em;
+    margin: @collaborations-icon-wrapper-margin-top 2em 0 0; 
+  }
+
+  .item-icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: 1em;
+    text-align: center;
+  }
+
+  .item-icon-bg {
+    width: 100%;
+  }
+
+  .item-content {
+    flex-grow: 1;
+    color: @collaborating-item-color;
+  }
+
+  .item-content-title {
+    margin-top: 0.5em;
+    font-size: 2rem;
+    font-weight: 400;
+    color: @black;
+  }
+}
+
+// Join collaboration section
+.weighted-working-group-block-wrapper {
+  padding-bottom: 2em;
+}
+
+.weighted-working-group-block {
+  display: flex;
+  justify-content: center;
+  border-radius: 0.8em;
+  background-color: @collaboration-gray;
+  padding: 3.5rem;
+  height: 100%;
+}
+
+.weighted-working-group-logo-wrapper {
+  display: flex;
+  justify-content: center;
+  margin: auto;
+  max-height: 16rem;
+
+  img {
+    object-fit: contain;
+    width: 100%;
+  }
+}
+
+.join-collaboration-button-col {
+  padding: 1em;
+  text-align: center;
+}
+
+.join-collaboration-button {
+  padding: @collaborations-btn-padding;
+  width: 75%;
+}
+
+@media (min-width: @screen-md-min) {
+  .join-collaboration-button-col {
+    text-align: right;
+  }
+
+  .join-collaboration-button {
+    width: initial;
+    padding-left: 4em;
+    padding-right: 4em;
+  }
+}
+
+// Start collaboration section
+.collaboration-table-wrapper {
+  overflow-x: auto;
+}
+
+.collaboration-table {
+  margin: auto;
+  border: none @section-dark-white;
+  border-collapse: collapse;
+
+  th,
+  td {
+    padding: 1em;
+    border-width: 1px;
+    font-weight: normal;
+  }
+
+  tbody th, tbody td {
+    border-top-style: solid;
+    border-bottom-style: solid;
+  }
+
+  thead th {
+    text-align: center;
+  }
+
+  td:last-child,
+  th:last-child {
+    border-left: solid 1px;
+  }
+
+  tr:last-child td {
+    border-bottom-style: none;
+  }
+}
+
+.collaboration-table-checked {
+  display: block;
+  width: 1em;
+  height: 1em;
+  margin: auto;
+  border-radius: 9999px;
+  background-color: @brand-primary;
+}
+
+.collaboration-table-link-row a {
+  display: inline-block;
+  text-align: center;
+}
+
+.start-collaboration-buttons-wrapper {
+  display: flex;
+  min-height: 26em;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  a {
+    width: 100%;
+    display: inline-block;
+    text-align: center;
+  }
+}
+
+.start-collaboration-buttons {
+  .btn {
+    width: 100%;
+    padding: @collaborations-btn-padding;
+    margin-bottom: 1em;
+  }
+}
+
+// Collaborations Content
+.collaborations-container {
+  .btn {
+    white-space: normal;
+  }
+}
\ No newline at end of file