Basculer le menu
Changer de menu des préférences
Basculer le menu personnel
Non connecté(e)
Votre adresse IP sera visible au public si vous faites des modifications.

« Modèle:Accueil/shared/styles.css » : différence entre les versions

De Nefald
Hiob (discussion | contributions)
Aucun résumé des modifications
Hiob (discussion | contributions)
Aucun résumé des modifications
Ligne 2 : Ligne 2 :
   TABLE DES MATIÈRES
   TABLE DES MATIÈRES
   ====================================
   ====================================
   1. HEADER & HERO
   1. VARIABLES CSS
   2. BARRE DE RECHERCHE
  2. HEADER & HERO
   3. EVENT (Bannière événement)
   3. BARRE DE RECHERCHE
   4. NAVIGATION CARDS
   4. EVENT (Bannière événement)
   5. LAYOUT PRINCIPAL
   5. NAVIGATION CARDS
   6. FEATURED ARTICLES
   6. LAYOUT PRINCIPAL
   7. UPDATES
   7. FEATURED ARTICLES
   8. STATS
   8. UPDATES
   9. SOCIAL BUTTONS
   9. STATS
   10. LINKS BOX
   10. SOCIAL BUTTONS
   11. UTILITIES
   11. LINKS BOX
   12. ANIMATIONS
   12. UTILITIES
   13. MEDIA QUERIES
   13. ANIMATIONS
   14. MEDIA QUERIES
   ==================================== */
   ==================================== */


/* ====================================
/* ====================================
   1. HEADER & HERO
   1. VARIABLES CSS
  ==================================== */
 
:root {
    --color-primary: #87bfdb;
    --color-secondary: #eea529;
    --color-surface-0: #202122;
    --color-surface-1: #27292a;
    --color-surface-2: #2e3031;
    --color-base: #eaecf0;
    --color-subtle: #a2a9b1;
    --border-color-base: #3f4142;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
}
 
/* ====================================
  2. HEADER & HERO
   ==================================== */
   ==================================== */


Ligne 53 : Ligne 79 :
     text-align: center;
     text-align: center;
     max-width: 800px;
     max-width: 800px;
    animation: fadeIn 0.8s ease-out;
}
}


Ligne 74 : Ligne 101 :
     color: var(--color-subtle);
     color: var(--color-subtle);
     line-height: 1.6;
     line-height: 1.6;
}
/* Responsive header */
@media (min-width: 768px) {
    .home-header__title {
        font-size: 3rem;
    }
   
    .home-header__subtitle {
        font-size: 1.125rem;
    }
}
@media (min-width: 1200px) {
    .home-header__title {
        font-size: 3.5rem;
    }
   
    .home-header__subtitle {
        font-size: 1.25rem;
    }
}
}


/* ====================================
/* ====================================
   2. BARRE DE RECHERCHE
   3. BARRE DE RECHERCHE
   ==================================== */
   ==================================== */


Ligne 117 : Ligne 123 :
}
}


/* Hover state */
.home-search:hover {
.home-search:hover {
     border-color: var(--color-primary);
     border-color: var(--color-primary);
     box-shadow: 0 4px 20px rgba(135, 191, 219, 0.15);
     box-shadow: 0 4px 20px rgba(135, 191, 219, 0.15);
}
/* Focus state - utilise une classe JS si :focus-within ne fonctionne pas */
.home-search.is-focused {
    border-color: var(--color-primary);
    box-shadow: 0 4px 30px rgba(135, 191, 219, 0.25);
    background: var(--color-surface-1);
}
}


Ligne 136 : Ligne 134 :
     color: var(--color-subtle);
     color: var(--color-subtle);
     transition: color 0.2s;
     transition: color 0.2s;
}
.home-search.is-focused .home-search__icon {
    color: var(--color-primary);
}
}


Ligne 164 : Ligne 158 :
     color: var(--color-subtle);
     color: var(--color-subtle);
}
}


/* ====================================
/* ====================================
   3. EVENT (Bannière événement)
   4. EVENT (Bannière événement)
   ==================================== */
   ==================================== */


.home-event {
.home-event {
     display: grid;
     display: grid;
     grid-template-columns: 1fr auto;
     grid-template-columns: 300px 1fr;
     gap: 1.5rem;
     gap: 1.5rem;
     padding: 1.5rem;
     padding: 1.5rem;
     background: linear-gradient(135deg, rgba(135, 191, 219, 0.05) 0%, rgba(238, 165, 41, 0.05) 100%);
     background: var(--color-surface-0);
     border: 2px solid var(--border-color-base);
     border: 2px solid var(--border-color-base);
     border-radius: 12px;
     border-radius: var(--radius-xl);
     margin-bottom: 2rem;
     margin-bottom: 2rem;
     align-items: center;
     overflow: hidden;
}
 
.home-event__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
}
}


Ligne 185 : Ligne 185 :
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
     gap: 0.5rem;
     justify-content: center;
}
}


.home-event__label {
.home-event__badge {
     display: flex;
     display: inline-flex;
     align-items: center;
     align-items: center;
     gap: 0.75rem;
     gap: 0.5rem;
    margin-bottom: 0.5rem;
     padding: 0.5rem 1rem;
}
     background: rgba(238, 165, 41, 0.15);
 
     border: 1px solid var(--color-secondary);
.home-event__icon {
     border-radius: 50px;
    font-size: 1.25rem;
     font-size: 0.875rem;
}
 
.home-event__status {
     padding: 0.25rem 0.75rem;
     background: rgba(238, 165, 41, 0.2);
     border: 1px solid rgba(238, 165, 41, 0.4);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #EEA529;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
 
.home-event__version {
    padding: 0.25rem 0.75rem;
    background: rgba(135, 191, 219, 0.2);
    border: 1px solid rgba(135, 191, 219, 0.4);
     border-radius: 4px;
     font-size: 0.75rem;
     font-weight: 600;
     font-weight: 600;
     color: #87BFDB;
     color: var(--color-secondary);
    margin-bottom: 1rem;
}
}


.home-event__title {
.home-event__title {
     font-size: 1.5rem;
     font-size: 1.75rem;
     font-weight: 700;
     font-weight: 700;
    margin-bottom: 0.25rem;
     color: var(--color-base);
     color: var(--color-base);
    margin-bottom: 0.75rem;
}
}


.home-event__desc {
.home-event__description {
    font-size: 1rem;
     color: var(--color-subtle);
     color: var(--color-subtle);
     font-size: 0.875rem;
     line-height: 1.6;
    margin-bottom: 1rem;
}
}


.home-event__image {
.home-event__date {
     display: flex;
     font-size: 0.875rem;
     align-items: center;
     color: var(--color-primary);
    justify-content: center;
     font-weight: 600;
    border-radius: 8px;
    overflow: hidden;
}
 
.home-event__image img {
    width: 100%;
    height: 100%;
     object-fit: cover;
}
}


/* ====================================
/* ====================================
   4. NAVIGATION CARDS
   5. NAVIGATION CARDS
   ==================================== */
   ==================================== */


Ligne 262 : Ligne 237 :


.home-nav-card {
.home-nav-card {
    position: relative;
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
Ligne 269 : Ligne 245 :
     background: var(--color-surface-0);
     background: var(--color-surface-0);
     border: 2px solid var(--border-color-base);
     border: 2px solid var(--border-color-base);
     border-radius: 12px;
     border-radius: var(--radius-lg);
    text-align: center;
     text-decoration: none;
     text-decoration: none;
     color: var(--color-base);
     color: var(--color-base);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     min-height: 120px;
    overflow: hidden;
     min-height: 140px;
}
 
.home-nav-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    transition: opacity 0.3s, transform 0.3s;
}
}


.mw-body .home-nav-card:hover {
.home-nav-card:hover {
     transform: translateY(-4px);
     transform: translateY(-4px);
     border-color: var(--color-primary);
     border-color: var(--color-primary);
     box-shadow: 0 8px 24px rgba(135, 191, 219, 0.2);
     box-shadow: 0 8px 24px rgba(135, 191, 219, 0.2);
     background: var(--color-surface-1);
}
 
.home-nav-card:hover::before {
     opacity: 0.25;
    transform: scale(1.05);
}
}


.home-nav-card__icon {
.home-nav-card__icon {
     font-size: 2.5rem;
     font-size: 2rem;
     margin-bottom: 0.75rem;
     margin-bottom: 0.75rem;
     line-height: 1;
     position: relative;
    z-index: 1;
}
}


.home-nav-card__title {
.home-nav-card__title {
     font-size: 0.9rem;
     font-size: 1rem;
     font-weight: 600;
     font-weight: 600;
     color: var(--color-base);
     text-align: center;
}
    position: relative;
 
     z-index: 1;
.mw-body .home-nav-card:hover .home-nav-card__title {
     color: var(--color-primary);
}
}


/* ====================================
/* ====================================
   5. LAYOUT PRINCIPAL
   6. LAYOUT PRINCIPAL
   ==================================== */
   ==================================== */


.home-container {
.home-container {
     display: grid;
     display: grid;
     grid-template-columns: 1fr 350px;
     grid-template-columns: 1fr 400px;
     gap: 2rem;
     gap: 2rem;
     margin-bottom: 2rem;
     margin-bottom: 2rem;
Ligne 325 : Ligne 317 :


/* ====================================
/* ====================================
   6. FEATURED ARTICLES
   7. FEATURED ARTICLES
   ==================================== */
   ==================================== */


Ligne 332 : Ligne 324 :
     background: var(--color-surface-0);
     background: var(--color-surface-0);
     border: 2px solid var(--border-color-base);
     border: 2px solid var(--border-color-base);
     border-radius: 12px;
     border-radius: var(--radius-xl);
}
}


Ligne 338 : Ligne 330 :
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     gap: 0.75rem;
     justify-content: space-between;
     margin-bottom: 1.5rem;
     margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color-base);
}
}


.home-featured__icon {
.home-featured__title {
     font-size: 1.5rem;
     font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-base);
}
}


.home-featured__title {
.home-featured__link {
     font-size: 1.25rem;
     font-size: 0.875rem;
    font-weight: 700;
     color: var(--color-primary);
     color: var(--color-base);
    text-decoration: none;
    font-weight: 600;
}
 
.home-featured__link:hover {
    text-decoration: underline;
}
}


Ligne 359 : Ligne 356 :
}
}


.home-featured-card {
.home-featured-item {
     display: grid;
     display: grid;
     grid-template-columns: 120px 1fr;
     grid-template-columns: 120px 1fr;
Ligne 365 : Ligne 362 :
     padding: 1rem;
     padding: 1rem;
     background: var(--color-surface-1);
     background: var(--color-surface-1);
     border: 1px solid var(--border-color-base);
     border-radius: var(--radius-lg);
    border-radius: 8px;
     text-decoration: none;
     text-decoration: none;
     transition: all 0.2s;
    color: var(--color-base);
     transition: all 0.3s;
}
}


.mw-body .home-featured-card:hover {
.home-featured-item:hover {
     border-color: var(--color-primary);
     background: var(--color-surface-2);
    box-shadow: 0 4px 12px rgba(135, 191, 219, 0.15);
     transform: translateX(4px);
     transform: translateX(4px);
}
}


.home-featured-card__image {
.home-featured-item__image {
     width: 120px;
     width: 120px;
     height: 80px;
     height: 80px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-surface-2);
}
.home-featured-card__image img {
    width: 100%;
    height: 100%;
     object-fit: cover;
     object-fit: cover;
    border-radius: var(--radius-md);
}
}


.home-featured-card__content {
.home-featured-item__content {
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
     gap: 0.5rem;
     justify-content: center;
}
}


.home-featured-card__title {
.home-featured-item__title {
     font-size: 1rem;
     font-size: 1.125rem;
     font-weight: 600;
     font-weight: 600;
    margin-bottom: 0.5rem;
     color: var(--color-base);
     color: var(--color-base);
    line-height: 1.3;
}
}


.home-featured-card__desc {
.home-featured-item__excerpt {
     font-size: 0.875rem;
     font-size: 0.875rem;
     color: var(--color-subtle);
     color: var(--color-subtle);
     line-height: 1.4;
     line-height: 1.5;
    overflow: hidden;
}
}


/* ====================================
/* ====================================
   7. UPDATES
   8. UPDATES
   ==================================== */
   ==================================== */


Ligne 418 : Ligne 408 :
     background: var(--color-surface-0);
     background: var(--color-surface-0);
     border: 2px solid var(--border-color-base);
     border: 2px solid var(--border-color-base);
     border-radius: 12px;
     border-radius: var(--radius-xl);
}
}


Ligne 424 : Ligne 414 :
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     gap: 0.75rem;
     gap: 0.5rem;
     margin-bottom: 1.5rem;
     margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color-base);
}
}


Ligne 449 : Ligne 437 :
     display: flex;
     display: flex;
     gap: 1rem;
     gap: 1rem;
     padding: 0.75rem;
     padding: 1rem;
     background: var(--color-surface-1);
     background: var(--color-surface-1);
     border: 1px solid var(--border-color-base);
     border-radius: var(--radius-lg);
     border-radius: 8px;
     border-left: 3px solid var(--color-primary);
    text-decoration: none;
    transition: all 0.2s;
}
 
.mw-body .home-update-item:hover {
    border-color: var(--color-primary);
    background: var(--color-surface-2);
}
}


Ligne 469 : Ligne 450 :
     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: center;
     background: rgba(135, 191, 219, 0.1);
     background: rgba(135, 191, 219, 0.15);
     border-radius: 8px;
     border-radius: 50%;
     font-size: 1.25rem;
     font-size: 1.25rem;
}
}
Ligne 476 : Ligne 457 :
.home-update-item__content {
.home-update-item__content {
     flex: 1;
     flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
}


.home-update-item__title {
.home-update-item__title {
     font-size: 0.9rem;
     font-size: 1rem;
     font-weight: 600;
     font-weight: 600;
     color: var(--color-base);
     color: var(--color-base);
    margin-bottom: 0.25rem;
}
.home-update-item__text {
    font-size: 0.875rem;
    color: var(--color-subtle);
    line-height: 1.5;
}
}


.home-update-item__meta {
.home-update-item__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
     font-size: 0.75rem;
     font-size: 0.75rem;
     color: var(--color-subtle);
     color: var(--color-subtle);
Ligne 493 : Ligne 482 :


/* ====================================
/* ====================================
   8. STATS
   9. STATS
   ==================================== */
   ==================================== */


Ligne 500 : Ligne 489 :
     background: var(--color-surface-0);
     background: var(--color-surface-0);
     border: 2px solid var(--border-color-base);
     border: 2px solid var(--border-color-base);
     border-radius: 12px;
     border-radius: var(--radius-xl);
}
 
.home-stats__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color-base);
}
 
.home-stats__icon {
    font-size: 1.5rem;
}
}


Ligne 520 : Ligne 496 :
     font-weight: 700;
     font-weight: 700;
     color: var(--color-base);
     color: var(--color-base);
    margin-bottom: 1.5rem;
}
}


Ligne 528 : Ligne 505 :
}
}


.home-stat {
.home-stat-item {
     padding: 1rem;
     padding: 1rem;
     background: var(--color-surface-1);
     background: var(--color-surface-1);
     border: 1px solid var(--border-color-base);
     border-radius: var(--radius-lg);
    border-radius: 8px;
     text-align: center;
     text-align: center;
}
}


.home-stat__number {
.home-stats__number {
    display: block;
     font-size: 2.5rem;
     font-size: 2.5rem;
     font-weight: 800;
     font-weight: 700;
     color: var(--color-primary);
     color: var(--color-primary);
    line-height: 1;
     margin-bottom: 0.25rem;
     margin-bottom: 0.5rem;
}
}


.home-stat__label {
.home-stats__label {
    display: block;
     font-size: 0.875rem;
     font-size: 0.875rem;
     color: var(--color-subtle);
     color: var(--color-subtle);
Ligne 554 : Ligne 527 :


/* ====================================
/* ====================================
   9. SOCIAL BUTTONS
   10. SOCIAL BUTTONS
   ==================================== */
   ==================================== */


Ligne 561 : Ligne 534 :
     background: var(--color-surface-0);
     background: var(--color-surface-0);
     border: 2px solid var(--border-color-base);
     border: 2px solid var(--border-color-base);
     border-radius: 12px;
     border-radius: var(--radius-xl);
}
 
.home-social__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color-base);
}
 
.home-social__icon {
    font-size: 1.5rem;
}
}


Ligne 581 : Ligne 541 :
     font-weight: 700;
     font-weight: 700;
     color: var(--color-base);
     color: var(--color-base);
    margin-bottom: 1rem;
}
}


.home-social__grid {
.home-social__grid {
     display: grid;
     display: grid;
    grid-template-columns: repeat(2, 1fr);
     gap: 0.75rem;
     gap: 0.75rem;
}
}
Ligne 592 : Ligne 552 :
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
    justify-content: center;
     gap: 0.75rem;
     gap: 0.5rem;
     padding: 0.875rem 1rem;
     padding: 0.75rem;
     background: var(--color-surface-1);
     background: var(--color-surface-1);
     border: 2px solid var(--border-color-base);
     border: 2px solid var(--border-color-base);
     border-radius: 8px;
     border-radius: var(--radius-lg);
     text-decoration: none;
     text-decoration: none;
    color: var(--color-base);
     font-weight: 600;
     font-weight: 600;
    font-size: 0.875rem;
     transition: all 0.3s;
     transition: all 0.2s;
}
}


.home-social-btn--discord {
.home-social-btn:hover {
     color: #5865F2;
     transform: translateX(4px);
     border-color: rgba(88, 101, 242, 0.3);
     border-color: currentColor;
}
}


.mw-body .home-social-btn--discord:hover {
.home-social-btn__icon {
     background: rgba(88, 101, 242, 0.1);
     font-size: 1.5rem;
    border-color: #5865F2;
    transform: translateY(-2px);
}
}


.home-social-btn--youtube {
.home-social-btn--discord {
     color: #FF0000;
     color: #5865f2;
    border-color: rgba(255, 0, 0, 0.3);
}
 
.mw-body .home-social-btn--youtube:hover {
    background: rgba(255, 0, 0, 0.1);
    border-color: #FF0000;
    transform: translateY(-2px);
}
}


.home-social-btn--twitter {
.home-social-btn--patreon {
     color: #1DA1F2;
     color: #ff424d;
    border-color: rgba(29, 161, 242, 0.3);
}
}


.mw-body .home-social-btn--twitter:hover {
.home-social-btn--kofi {
     background: rgba(29, 161, 242, 0.1);
     color: #ff5e5b;
    border-color: #1DA1F2;
    transform: translateY(-2px);
}
}


.home-social-btn--instagram {
.home-social-btn--reddit {
     color: #E4405F;
     color: #ff4500;
    border-color: rgba(228, 64, 95, 0.3);
}
 
.mw-body .home-social-btn--instagram:hover {
    background: rgba(228, 64, 95, 0.1);
    border-color: #E4405F;
    transform: translateY(-2px);
}
 
.home-social-btn__icon {
    font-size: 1.25rem;
}
}


/* ====================================
/* ====================================
   10. LINKS BOX
   11. LINKS BOX
   ==================================== */
   ==================================== */


Ligne 660 : Ligne 596 :
     background: var(--color-surface-0);
     background: var(--color-surface-0);
     border: 2px solid var(--border-color-base);
     border: 2px solid var(--border-color-base);
     border-radius: 12px;
     border-radius: var(--radius-xl);
}
 
.home-links__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color-base);
}
 
.home-links__icon {
    font-size: 1.5rem;
}
}


Ligne 680 : Ligne 603 :
     font-weight: 700;
     font-weight: 700;
     color: var(--color-base);
     color: var(--color-base);
    margin-bottom: 1rem;
}
}


Ligne 688 : Ligne 612 :
}
}


.home-links__list a {
.home-links__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
     padding: 0.75rem;
     padding: 0.75rem;
     background: var(--color-surface-1);
     background: var(--color-surface-1);
     border: 1px solid var(--border-color-base);
     border-radius: var(--radius-md);
    border-radius: 6px;
     text-decoration: none;
     text-decoration: none;
     color: var(--color-base);
     color: var(--color-base);
    font-size: 0.9rem;
     transition: all 0.2s;
     transition: all 0.2s;
}
}


.mw-body .home-links__list a:hover {
.home-links__item:hover {
    color: var(--color-primary);
     background: var(--color-surface-2);
     background: var(--color-surface-2);
     border-color: var(--color-primary);
     border-color: var(--color-primary);
Ligne 706 : Ligne 630 :


/* ====================================
/* ====================================
   11. UTILITIES
   12. UTILITIES
   ==================================== */
   ==================================== */


.home-grid {
.home-grid {
     display: grid;
     display: grid;
     grid: auto-flow dense / repeat(auto-fit, minmax(9.375rem, 1fr));
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     grid-auto-rows: minmax(3rem, auto);
     gap: 0.5rem;
    grid-gap: 0.5rem;
}
}


Ligne 725 : Ligne 648 :


/* ====================================
/* ====================================
   12. ANIMATIONS
   13. ANIMATIONS
   ==================================== */
   ==================================== */


Ligne 739 : Ligne 662 :
}
}


.home-header__content {
/* ====================================
     animation: fadeIn 0.8s ease-out;
  14. MEDIA QUERIES
  ==================================== */
 
@media (min-width: 768px) {
    .home-header__title {
        font-size: 3rem;
     }
   
    .home-header__subtitle {
        font-size: 1.125rem;
    }
}
}


/* ====================================
@media (min-width: 1200px) {
  13. MEDIA QUERIES
    .home-header__title {
  ==================================== */
        font-size: 3.5rem;
    }
   
    .home-header__subtitle {
        font-size: 1.25rem;
    }
}


@media (max-width: 1024px) {
@media (max-width: 1024px) {
Ligne 754 : Ligne 693 :
     .home-sidebar {
     .home-sidebar {
         grid-template-columns: 1fr 1fr;
         grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
     }
     }
      
      
Les témoins (''cookies'') nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation de témoins.