User:Test987654/common.css: Difference between revisions

:root{
  --rubik-white: #ffffff;
  --rubik-yellow: #ffd500;
  --rubik-orange: #ff6a00;
  --rubik-red: #d40000;
  --rubik-green: #009b48;
  --rubik-blue: #0051ba;
  --rubik-dark: #1b1b1b;
  --rubik-border: #d8d8d8;
  --rubik-soft: #fbfbfb;
}

/* Corps et fond léger damier */
body {
  background-color: var(--rubik-soft);
  color: var(--rubik-dark);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.45;
}

/* Conteneur principal centré et largeur lisible */
#content, .mw-body {
  max-width: 1100px;
  margin: 18px auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* En-tête propre */
#mw-head {
  padding: 10px 0;
  border-bottom: 3px solid var(--rubik-border);
  background: linear-gradient(90deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
}

/* Bandeau titre */
#firstHeading {
  display: block;
  margin: 16px 0;
  padding: 14px 18px;
  font-size: 1.6rem;
  font-weight: 700;
  border: 2px solid var(--rubik-border);
  background: repeating-linear-gradient(
    90deg,
    var(--rubik-yellow) 0 33%,
    var(--rubik-orange) 33% 66%,
    var(--rubik-red) 66% 100%
  );
  color: var(--rubik-dark);
  box-shadow: 0 4px 0 rgba(0,0,0,0.06);
  border-radius: 6px;
}

/* Grille des sections principales (Purpose / Features / Contact) */
.rubik-sections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 18px;
}

/* Cartes homogènes */
.rubik-card {
  background: linear-gradient(180deg, var(--rubik-white), #fcfcfc);
  border: 2px solid var(--rubik-border);
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.04);
  min-height: 140px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* En-tête de chaque carte (couleur identifiante) */
.rubik-card .card-title {
  font-weight: 700;
  padding: 8px 10px;
  margin: -14px -14px 10px -14px;
  border-radius: 6px 6px 0 0;
  color: white;
  display: inline-block;
}

/* Couleurs des titres */
.rubik-title-blue { background: var(--rubik-blue); }
.rubik-title-yellow { background: var(--rubik-yellow); color: #111; }
.rubik-title-orange { background: var(--rubik-orange); }

.rubik-card p {
  margin: 6px 0;
  flex: 1 0 auto;
}

/* Boutons et liens dans les cartes */
.rubik-card .actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.rubik-card .actions a {
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid var(--rubik-border);
  background: #fff;
  box-shadow: 0 2px 0 rgba(0,0,0,0.04);
  color: var(--rubik-dark);
  font-weight: 600;
}

/* Améliore la lisibilité des listes internes */
.rubik-card ul { padding-left: 18px; margin: 6px 0; }

/* Grille des langues propre et compacte */
.rubik-langlist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.rubik-langlist a {
  display: block;
  padding: 8px 10px;
  background: var(--rubik-white);
  border: 1px solid var(--rubik-border);
  border-radius: 6px;
  text-decoration: none;
  color: var(--rubik-dark);
  box-shadow: 0 2px 0 rgba(0,0,0,0.03);
  font-size: .95rem;
}

/* Footer léger */
#footer {
  margin-top: 18px;
  padding: 12px 0;
  color: #333;
  border-top: 1px solid var(--rubik-border);
}

/* Mobile : empilement */
@media (max-width: 920px) {
  .rubik-sections { grid-template-columns: 1fr; }
  #firstHeading { font-size: 1.3rem; padding: 12px; }
  .rubik-card { min-height: auto; }
}

/* Utilitaires rubik pour blocs de face 3x3 */
.rubik-grid {
  display: grid;
  grid-template-columns: repeat(3, 26px);
  gap: 6px;
  align-items: center;
}
.rubik-cell {
  width: 26px; height: 26px; border: 1px solid rgba(0,0,0,0.06);
  border-radius: 3px; box-shadow: 0 2px 0 rgba(0,0,0,0.03);
}
.rubik-white { background: var(--rubik-white); }
.rubik-yellow { background: var(--rubik-yellow); }
.rubik-orange { background: var(--rubik-orange); }
.rubik-red { background: var(--rubik-red); }
.rubik-green { background: var(--rubik-green); }
.rubik-blue { background: var(--rubik-blue); }