Modèle:Accueil/header/styles.css

/*
    This is the full stylesheet for the header template.
    The new section for SVG logo styling has been added at the end.
*/

.home-header {
    position: relative;
    padding-block: 3.5rem;
    line-height: var( --line-height-xx-small );
    text-align: center;
}

/*
    The user's original template used .tg-mainpage-header-logo.
    We add it here to ensure the logo is also centered,
    as it appears to be the main element replacing .home-header__title.
*/
.home-header__title,
.tg-mainpage-header-logo {
    --display-font-size: min( calc( 2.5rem + 3.9vw ), 4.5rem );
    margin: 0 auto; /* Use auto margin for centering block element */
    font-size: var( --display-font-size );
    text-transform: uppercase;
    line-height: 0.9;
    font-weight: var( --font-weight-semi-bold );
}

.home-header__pretitle {
    margin-bottom: var( --space-xxs );
    color: var( --color-subtle );
    font-size: var( --font-size-small );
    letter-spacing: 0.05em;
}

.home-header__subtitle {
    margin-top: var( --space-xxs );
    color: var( --color-subtle );
    font-size: var( --font-size-small );
}

.home-header__search {
    --gradient: #87bfdb, #77abC8, #6797b5, #577f9d, #476684, #43668a, #3e668f, #304a66, #212e3d, #304a66, #3e668f, #43668a, #476684, #577f9d, #6797b5, #77abC8, #87bfdb;
    --gradient-blur: 4px;
    padding: var( --space-md );
    margin-top: var( --space-xl );
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
    border: var( --border-base );
    border-radius: var( --border-radius-pill );
    background-color: var( --color-surface-1 );
    cursor: pointer;
    font-size: var( --font-size-small );
    font-weight: var( --font-weight-medium );
    text-align: center;
}

.home-header__search .desktoponly {
    margin-left: var( --space-xs );
}

.home-header__search:hover {
    --gradient:  #120d0e, #321d13, #512d19, #713d1e, #90571d, #b0701b, #cf8a1a, #de9822, #eeA529, #fdb331, #eeA529, #de9822, #cf8a1a, #b0701b, #90571d, #713d1e, #512d19, #321d13, #120d0e;
    --gradient-blur: 8px;
    background: var( --color-surface-0 );
}

.home-header__searchIcon img {
    margin-right: var( --space-md );
    opacity: var( --opacity-icon-base );
}

/* Fix vertical alignment problem */
.home-header__search .keyboard-key {
    display: inline;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
}

.home-header:before,
.home-header__searchIcon img {
    filter: var( --filter-invert );
}

@media ( hover: none ) {
    .home-header__search .desktoponly {
        display: none;
    }
}

/* --- START: SVG Logo Color Styling --- */
/*
 * This section makes the SVG logo theme-aware (light/dark mode).
 * It requires the SVG file to use `fill="currentColor"`.
*/
.tg-mainpage-header-logo {
    /*
     * We use the theme's base color variable.
     * It automatically switches from dark (for light theme) to light (for dark theme).
     * This is the cleanest and most maintainable approach.
    */
    color: var(--color-base);

    /* Add a smooth transition for a better user experience when switching themes. */
    transition: color 0.3s ease-in-out;
}
/* --- END: SVG Logo Color Styling --- */