world-game/assets/css/custom-panel.css

@font-face {
    font-family: 'Terminal Grotesque';
    src: url('fonts/terminal-grotesque.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Danzza';
    src: url('fonts/Danzza-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Danzza';
    src: url('fonts/Danzza-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Danzza';
    src: url('fonts/Danzza-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Danzza';
    src: url('fonts/Danzza-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

:root{
    --font-title: 'Terminal Grotesque', sans-serif;
    --font-body: 'Danzza', sans-serif;

    --font-sans: 'Danzza', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    
    --text-h1: 3em;

    --color-green-perso: #04fea0;

    --color-black: #0B1632;
    --color-white: #ffffff;

    --color-gray-200: #BCCAF0;
    --color-gray-100:  #BCCAF0;
    --color-gray-250:  #8BA3E5;
    --color-gray-300:  #7A95E1;
    --color-gray-400:  #597BD9;
    --color-gray-500: #3761D2;
    --color-gray-600: #224196;
    --color-gray-700:  #1A3274;
    --color-gray-800: #172C64;
    --color-gray-850:  #132553;
    --color-gray-900:  #0e1e43;
    --color-gray-950: #0d1a38;

    --button-cancel-filled-color-back: light-dark( var(--color-gray-300), var(--color-gray-950) );
    --color-icon-perso: light-dark( var(--color-gray-700), var(--color-gray-400) );

    --color-border: light-dark(var(--color-gray-300), var(--color-gray-600));
    --dropdown-color-hr:var(--color-gray-800);

    --color-focus: var(--color-green-perso);

    --color-red-h: 355;
    --color-green-h: 152;
    --color-orange-h: 15;
    --color-blue-h: 220;
}

.k-dialog-button-cancel:where([data-variant="filled"]) {
  --button-color-back: var(--button-cancel-filled-color-back);
}

.k-box {
  --icon-color: var(--color-icon-perso);
}

.k-panel-menu-button:hover:not(.k-activation-button):not(.k-panel-menu-search){
    color: var(--color-green-perso);
}


.k-header-title{
    font-family: var(--font-title);
}
.k-panel[data-template="home"] .k-header-title-text, .k-panel[data-template="expertise"] .k-header-title-text,
.k-panel[data-template="portfolio"] .k-header-title-text, .k-panel[data-template="jouer"] .k-header-title-text,
.k-panel[data-template="about"] .k-header-title-text, .k-panel[data-template="blog"] .k-header-title-text{
    text-transform: uppercase;
}
.k-header-title .k-icon{
    --icon-size: 28px;
}

.k-text a{
    color: var(--color-green-perso);
}

.k-block-container:not(:last-of-type) {
  border-bottom: 1px dashed var(--color-gray-600);
}

/*modif card pour ressembler au site web*/
.k-panel[data-template="blog"] .k-item.k-cards-item[data-template="article"]{
    display: grid;
    grid-template-columns: 2fr auto 1fr;
    grid-template-rows: auto;
}

.k-panel[data-template="blog"] .k-item.k-cards-item[data-template="article"] .k-item-image{
    grid-column: 3/4;
    grid-row: 1/3;
}
.k-panel[data-template="blog"] .k-item.k-cards-item[data-template="article"] .k-item-content{
    grid-column: 1/2;
    grid-row: 1/2;
}
.k-panel[data-template="blog"] .k-item.k-cards-item[data-template="article"] .k-item-options{
    grid-column: 2/3;
    grid-row: 1/2;
    align-items: start;
}

/* Logo sur la page de login */
.k-login-view .k-login-form::before {
    content: '';
    display: block;
    width: 150px;
    height: 150px;
    margin: 0 auto 2rem auto;
    background-image: url('logo-panel.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}