Jump to content

MediaWiki:Achievements.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* WARNING: THIS FILE IS @IMPORT BY COMMON.CSS */

/* ------------------------------------------------------------------------- */

/* The styling for achievements is defined here, while the achievements themselves are defined in MediaWiki:AchievementData.json. Achievement IDs from the JSON correspond to CSS classes in the format:
- achievement-{id} */

/* ------------------------------------------------------------------------- */

/* ========================= TITLE ACHIEVEMENTS ========================= */
/* ANCHOR: Titles */

/* BASE STYLING */
/* Container settings for "title" achievements*/
.achievement-header {
  font-size: 1.2em;
}

/* Text foreground layer for all achievement headers */
.achievement-foreground-layer {
  z-index: 10; /* Ensure it's above all animations */
  display: block;
  position: relative;
  pointer-events: none;
  width: 100%;
  padding: 1px;
  text-align: center;
  font-weight: bold;
}

/* ------------------------------------------------------------------------- */

/* SPECIFIC STYLES */

/* %%%%% DEVELOPER %%%%% */
.achievement-header.title-developer {
  position: relative;
  background-color: var(--colored-box-bg-night);
  color: #C9FFD7;
  overflow: hidden;
  z-index: 3;
}

/* First Matrix animation layer */
.achievement-header.title-developer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='200' viewBox='0 0 60 200'%3E%3Ctext fill='%2300FF41' font-family='monospace' font-size='16'%3E%3Ctspan x='3' y='16'%3E|%3C/tspan%3E%3Ctspan x='3' y='38'%3E1%3C/tspan%3E%3Ctspan x='3' y='60'%3E|%3C/tspan%3E%3Ctspan x='3' y='82'%3E0%3C/tspan%3E%3Ctspan x='3' y='104'%3E|%3C/tspan%3E%3Ctspan x='3' y='126'%3E1%3C/tspan%3E%3Ctspan x='3' y='148'%3E|%3C/tspan%3E%3Ctspan x='3' y='170'%3E0%3C/tspan%3E%3Ctspan x='3' y='192'%3E|%3C/tspan%3E%3C/text%3E%3Ctext fill='%2300FF41' font-family='monospace' font-size='16'%3E%3Ctspan x='17' y='26'%3E1%3C/tspan%3E%3Ctspan x='17' y='48'%3E|%3C/tspan%3E%3Ctspan x='17' y='70'%3E0%3C/tspan%3E%3Ctspan x='17' y='92'%3E|%3C/tspan%3E%3Ctspan x='17' y='114'%3E1%3C/tspan%3E%3Ctspan x='17' y='136'%3E|%3C/tspan%3E%3Ctspan x='17' y='158'%3E0%3C/tspan%3E%3Ctspan x='17' y='180'%3E|%3C/tspan%3E%3C/text%3E%3Ctext fill='%2300FF41' font-family='monospace' font-size='16'%3E%3Ctspan x='31' y='16'%3E|%3C/tspan%3E%3Ctspan x='31' y='38'%3E0%3C/tspan%3E%3Ctspan x='31' y='60'%3E|%3C/tspan%3E%3Ctspan x='31' y='82'%3E1%3C/tspan%3E%3Ctspan x='31' y='104'%3E|%3C/tspan%3E%3Ctspan x='31' y='126'%3E0%3C/tspan%3E%3Ctspan x='31' y='148'%3E|%3C/tspan%3E%3Ctspan x='31' y='170'%3E1%3C/tspan%3E%3Ctspan x='31' y='192'%3E|%3C/tspan%3E%3C/text%3E%3Ctext fill='%2300FF41' font-family='monospace' font-size='16'%3E%3Ctspan x='45' y='26'%3E0%3C/tspan%3E%3Ctspan x='45' y='48'%3E|%3C/tspan%3E%3Ctspan x='45' y='70'%3E1%3C/tspan%3E%3Ctspan x='45' y='92'%3E|%3C/tspan%3E%3Ctspan x='45' y='114'%3E0%3C/tspan%3E%3Ctspan x='45' y='136'%3E|%3C/tspan%3E%3Ctspan x='45' y='158'%3E1%3C/tspan%3E%3Ctspan x='45' y='180'%3E|%3C/tspan%3E%3C/text%3E%3C/svg%3E");
  background-size: auto 100px;
  background-repeat: repeat;
  opacity: 0.7;
  z-index: 2;
  animation: matrix-fall-1 15s linear infinite;
}

/* Second Matrix animation layer, offset */
.achievement-header.title-developer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='160' viewBox='0 0 40 160'%3E%3Ctext fill='%2300FF41' font-family='monospace' font-size='14'%3E%3Ctspan x='5' y='20'%3E1%3C/tspan%3E%3Ctspan x='5' y='40'%3E|%3C/tspan%3E%3Ctspan x='5' y='60'%3E1%3C/tspan%3E%3Ctspan x='5' y='80'%3E|%3C/tspan%3E%3Ctspan x='5' y='100'%3E0%3C/tspan%3E%3Ctspan x='5' y='120'%3E|%3C/tspan%3E%3Ctspan x='5' y='140'%3E1%3C/tspan%3E%3C/text%3E%3Ctext fill='%2300FF41' font-family='monospace' font-size='14'%3E%3Ctspan x='22' y='10'%3E|%3C/tspan%3E%3Ctspan x='22' y='30'%3E0%3C/tspan%3E%3Ctspan x='22' y='50'%3E|%3C/tspan%3E%3Ctspan x='22' y='70'%3E1%3C/tspan%3E%3Ctspan x='22' y='90'%3E|%3C/tspan%3E%3Ctspan x='22' y='110'%3E0%3C/tspan%3E%3Ctspan x='22' y='130'%3E|%3C/tspan%3E%3Ctspan x='22' y='150'%3E0%3C/tspan%3E%3C/text%3E%3C/svg%3E");
  background-size: auto 160px;
  background-repeat: repeat;
  opacity: 0.5;
  z-index: 1;
  animation: matrix-fall-2 20s linear infinite;
}

/* Falling effects with background-position for seamless looping */
@keyframes matrix-fall-1 {
  0% { background-position: 0 0; }
  100% { background-position: 0 200%; }
}
@keyframes matrix-fall-2 {
  0% { background-position: 0 0; }
  100% { background-position: 0 200%; }
}

/* %%%%% ICANNWIKI STAFF %%%%% */
.achievement-header.title-icw-staff {
  background: linear-gradient(
    to right,
    #33FF55,
    #00AA2A,
    #008822
  );
}

/* %%%%% HERO %%%%% */
.achievement-header.title-hero {
  background: linear-gradient(
    to right,
    rgb(123, 3, 144),
    #600054,
    #430038
  );
}

/* REVIEW: %%%%% INTERVIEWEE %%%%% */
.achievement-header.title-interviewee {
  background: linear-gradient(
    to right,
    #2af0b1,
    #2ab3a1,
    #166555
  );
}

/* %%%%% KING %%%%% */
.achievement-header.title-king {
  background: linear-gradient(
    to right,
    gold,
    #f1c40f,
    #d4af37
  );
}

/* %%%%% REST IN PEACE %%%%% */
.achievement-header.title-rip {
  background: grey;
}

/* %%%%% TRUSTED %%%%% */
.achievement-header.title-trusted {
  position: relative;
  background-color: #009EEB;
  color: var(--light-text);
  overflow: hidden;
  z-index: 3;
}

/* First stars animation layer, faster */
.achievement-header.title-trusted::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='50' viewBox='0 0 300 50'%3E%3Ctext fill='gold' font-size='16'%3E%3Ctspan x='20' y='20'%3E★%3C/tspan%3E%3Ctspan x='80' y='35'%3E★%3C/tspan%3E%3Ctspan x='140' y='15'%3E★%3C/tspan%3E%3Ctspan x='200' y='30'%3E★%3C/tspan%3E%3Ctspan x='260' y='25'%3E★%3C/tspan%3E%3C/text%3E%3C/svg%3E");
  background-repeat: repeat-x;
  opacity: 0.7;
  z-index: 2;
  animation: stars-fly-1 15s linear infinite;
}

/* Second stars animation layer, slower, offset */
.achievement-header.title-trusted::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='50' viewBox='0 0 400 50'%3E%3Ctext fill='gold' font-size='14'%3E%3Ctspan x='50' y='25'%3E★%3C/tspan%3E%3Ctspan x='120' y='10'%3E★%3C/tspan%3E%3Ctspan x='190' y='30'%3E★%3C/tspan%3E%3Ctspan x='260' y='15'%3E★%3C/tspan%3E%3Ctspan x='330' y='20'%3E★%3C/tspan%3E%3C/text%3E%3C/svg%3E");
  background-repeat: repeat-x;
  opacity: 0.4;
  z-index: 1;
  animation: stars-fly-2 25s linear infinite;
}

/* Horizontal star animations with different speeds */
@keyframes stars-fly-1 {
  0% { background-position: 300px 0; }
  100% { background-position: 0 0; }
}
@keyframes stars-fly-2 {
  0% { background-position: 400px 0; }
  100% { background-position: 0 0; }
}

/* ========================= BADGE ACHIEVEMENTS ========================= */
/* ANCHOR: Badges */

/* BASE STYLING */
/* Container settings for "badge" achievements */
.achievement-badge {
  color: var(--light-text);
  display: inline-flex;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  width: 85px; /* Width based on 1.71 aspect ratio (50px height × 1.71) */
  height: 50px;
  border-radius: 2px;
  margin: 0.1em;
  position: relative;
}

/* Styling for the images within all pseudo-elements: MISSING WIDTH AND HEIGHT BECAUSE IT IS STILL TEXT AT THE MOMENT */
.achievement-badge::before {
  content: "";
  display: block;
  background-size: contain; /* or cover, if needed */
  background-position: center;
  background-repeat: no-repeat;
  text-align: center; /* Center text content within the pseudo-element */
}  

/* ------------------------------------------------------------------------- */

/* SPECIFIC STYLES */

  /* REVIEW: background-image: url('https://icannwiki.org/images/5/5a/IGF2025-logo.png'); add width and height 100%*/

/* ICANN Board */
.achievement-badge.badge-icann-board {
  background-color: #ffc107;
}
.achievement-badge.badge-icann-board::before {
  content: "Board";
}

/* ICANN CEO */
.achievement-badge.badge-icann-ceo {
  background-color: #e5c100;
}
.achievement-badge.badge-icann-ceo::before {
  content: "CEO";
}

/* ICANN Staff */
.achievement-badge.badge-icann-staff {
  background-color: #1d3396;
}
.achievement-badge.badge-icann-staff::before {
  content: "ICANN Staff";
}

/* ICANN Fellow */
.achievement-badge.badge-icann-fellow {
  background-color: #007bff;
}
.achievement-badge.badge-icann-fellow::before {
  content: "Fellow";
}

/* ICANN Interpreter */
.achievement-badge.badge-icann-interpreter {
  background-color: #d944e8;
}
.achievement-badge.badge-icann-interpreter::before {
  content: "Interpreter";
}

/* ICANN NextGen */
.achievement-badge.badge-icann-nextgen {
  background-color: #5bc0de;
}

.achievement-badge.badge-icann-nextgen::before {
  content: "NextGen";
}

/* ICANN NomCom */
.achievement-badge.badge-icann-nomcom {
  background-color: #576972;
}
.achievement-badge.badge-icann-nomcom::before {
  content: "NomCom";
}

/* Porkbun employee */
.achievement-badge.badge-porkbun {
  background-color: #8E24AA;
}
.achievement-badge.badge-porkbun::before {
  content: "Porkbun";
}

/* ICANNWiki past sponsor */
.achievement-badge.badge-past-sponsor {
  background-color: #888;
}
.achievement-badge.badge-past-sponsor::before {
  content: "Past sponsor";
}

/* ICANNWiki current sponsor */
.achievement-badge.badge-current-sponsor {
  background-color: #b733a3;
}
.achievement-badge.badge-current-sponsor::before {
  content: "Current Sponsor";
}

/* At-Large */
.achievement-badge.badge-atlarge {
  background-color: #d9534f;
}
.achievement-badge.badge-atlarge::before {
  content: "At-Large";
}

/* ASO */
.achievement-badge.badge-aso {
  background-color: #576972;
}
.achievement-badge.badge-aso::before {
  content: "ASO";
}

/* ICANNWiki Card Decks */
.achievement-badge.badge-icw-deck-41,
.achievement-badge.badge-icw-deck-42,
.achievement-badge.badge-icw-deck-45,
.achievement-badge.badge-icw-deck-47,
.achievement-badge.badge-icw-deck-48,
.achievement-badge.badge-icw-deck-49,
.achievement-badge.badge-icw-deck-50,
.achievement-badge.badge-icw-deck-51,
.achievement-badge.badge-icw-deck-52,
.achievement-badge.badge-icw-deck-53,
.achievement-badge.badge-icw-deck-54,
.achievement-badge.badge-icw-deck-57,
.achievement-badge.badge-icw-deck-60,
.achievement-badge.badge-icw-deck-76,
.achievement-badge.badge-icw-deck-78 {
  background-color: #6f42c1;
}
.achievement-badge.badge-icw-deck-41::before { content: "Deck ICANN41"; }
.achievement-badge.badge-icw-deck-42::before { content: "Deck ICANN42"; }
.achievement-badge.badge-icw-deck-45::before { content: "Deck ICANN45"; }
.achievement-badge.badge-icw-deck-47::before { content: "Deck ICANN47"; }
.achievement-badge.badge-icw-deck-48::before { content: "Deck ICANN48"; }
.achievement-badge.badge-icw-deck-49::before { content: "Deck ICANN49"; }
.achievement-badge.badge-icw-deck-50::before { content: "Deck ICANN50"; }
.achievement-badge.badge-icw-deck-51::before { content: "Deck ICANN51"; }
.achievement-badge.badge-icw-deck-52::before { content: "Deck ICANN52"; }
.achievement-badge.badge-icw-deck-53::before { content: "Deck ICANN53"; }
.achievement-badge.badge-icw-deck-54::before { content: "Deck ICANN54"; }
.achievement-badge.badge-icw-deck-57::before { content: "Deck ICANN57"; }
.achievement-badge.badge-icw-deck-60::before { content: "Deck ICANN60"; }
.achievement-badge.badge-icw-deck-76::before { content: "Deck ICANN76"; }
.achievement-badge.badge-icw-deck-78::before { content: "Deck ICANN78"; }

/* ccNSO */
.achievement-badge.badge-ccnso {
  background-color: #428bca;
}
.achievement-badge.badge-ccnso::before {
  content: "ccNSO";
}

/* ICANN Fellowship Selection */
.achievement-badge.badge-icann-fellow-selection {
  background-color: #3aa7c2;
}
.achievement-badge.badge-icann-fellow-selection::before {
  content: "Fellowship Selection";
}

/* GAC */
.achievement-badge.badge-gac {
  background-color: #428bca;
}
.achievement-badge.badge-gac::before {
  content: "GAC";
}

/* GNSO */
.achievement-badge.badge-gnso {
  background-color: #428bca;
}
.achievement-badge.badge-gnso::before {
  content: "GNSO";
}

/* LACRALO */
.achievement-badge.badge-atlarge-lacralo {
  background-color: #d9534f;
}
.achievement-badge.badge-atlarge-lacralo::before {
  content: "LACRALO";
}

/* NARALO */
.achievement-badge.badge-atlarge-naralo {
  background-color: #d9534f;
}
.achievement-badge.badge-atlarge-naralo::before {
  content: "NARALO";
}

/* PTI Board */
.achievement-badge.badge-pti-board {
  background-color: #777;
}
.achievement-badge.badge-pti-board::before {
  content: "PTI Board";
}

/* RSSAC Caucus */
.achievement-badge.badge-rssac-caucus {
  background-color: #576972;
}
.achievement-badge.badge-rssac-caucus::before {
  content: "RSSAC Caucus";
}

/* SSAC */
.achievement-badge.badge-ssac {
  background-color: #20c997;
}
.achievement-badge.badge-ssac::before {
  content: "SSAC";
}

Address Supporting Organization. Advises the Board with respect to policy issues relating to the operation, assignment, and management of Internet addresses (ICANN Bylaws).

Country Code Names Supporting Organization. Develops and recommends to the Board global policies relating to country-code top-level domains (ICANN Bylaws).

Governmental Advisory Committee. Considers and provides advice on the activities of ICANN as they relate to concerns of governments, particularly matters where there may be an interaction between ICANN's policies and various laws and international agreements or where they may affect public policy issues (ICANN Bylaws).

Generic Names Supporting Organization. Develops and recommends to the Board substantive policies relating to generic top-level domains and other responsibilities set forth in the Bylaws (ICANN Bylaws).

Root Server System Advisory Committee. Advises the ICANN community and Board on matters relating to the operation, administration, security, and integrity of the Internet's Root Server System (ICANN Bylaws).

Security and Stability Advisory Committee. Advises the ICANN community and Board on matters relating to the security and integrity of the Internet's naming and address allocation systems (ICANN Bylaws).

Retrieved from "https://icannwiki.org/index.php?title=MediaWiki:Achievements.css&oldid=1387858"