@natlibfi/melinda-ui-commons/src/styles/homepage.css

Common modules for Melinda UI applications

/* ---------------------------------------------------------------------------- */
/* Styles for home page                                                         */
/* ---------------------------------------------------------------------------- */


#homePage {
    background-color: var(--color-grey-20);
}

/* ----------------------------------------------------------------------------------------------------------------------*/
/* HOMEPAGE CONTENT */
/* Common styles for homepage info section and homepage services section */

.homepage-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    color: var(--color-blue-100);
    padding-right: 135px;
    padding-left: 135px;
    padding-top: 80px;
    padding-bottom: 80px;
    justify-content: center;
}

@media screen and (min-width: 1800px) {
    #homePage {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .homepage-content {
        max-width: 66%;
    }
}

.homepage-content .service-link {
    display: flex;
}

.homepage-content a {
    text-decoration: none;
}

.homepage-content a .service-link {
    font-weight: var(--font-weight-link);
    display: flex;
    color: var(--color-functional-blue);
    cursor: pointer;
    text-decoration: none;
}

.homepage-content .service-link .service-link-text {
    color: var(--color-functional-blue);
}

.homepage-content .service-link .service-link-text a {
    display: flex;
    color: var(--color-functional-blue);
}

.homepage-content .service-link:hover .service-link-text {
    text-decoration: none;
}

.homepage-content .service-link .icon-arrow {
    display: flex;
    padding-right: 15px;
    transform: translateX(0px);
    transition: transform 0.5s;
}

.homepage-content .service-link:hover .icon-arrow {
    transform: translateX(10px);
    transition: transform 0.75s;
}

.homepage-content .service-link .service-link-icon .open-in-new {
    display: flex;
    padding-left: 5px;
}

.homepage-content .service-link span.open-in-new {
    font-size: var(--font-size-icon-extra-small);
}



/* ----------------------------------------------------------------------------------------------------------------------*/
/* HOMEPAGE INFO */

.homepage-content .homepage-info {
    display: flex;
    flex-direction: column;
    flex-basis: 0;
    flex-grow: 2;
    padding-right: 100px;
    padding-bottom: 75px;
}

.homepage-info .homepage-info-header {
    display: flex;
    flex-direction: row;
    font-family: var(--font-family-brand);
    font-size: var(--font-size-brand);
    font-weight: var(--font-weight-brand);
    line-height: var(--font-line-height-brand);
    padding-bottom: 32px;
}

.homepage-info .homepage-info-text {
    display: flex;
    flex-direction: row;
    font-size: var(--font-size-content-large);
    line-height: var(--font-line-height-content-extra-large);
    padding-bottom: 40px;
}

.homepage-info .homepage-info-link {
    display: flex;
    flex-direction: row;
    width: fit-content;
    font-size: var(--font-size-link-large);
    border-color: var(--color-functional-blue);
    border-style: solid;
    border-width: 2px;
    border-radius: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
}

.homepage-info .homepage-info-link:active {
    color: var(--color-functional-blue);
    outline-color: var(--color-functional-blue);
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 2px;
    border-radius: 5px;
}

.homepage-info .homepage-info-link a .service-link {
    font-size: var(--font-size-link-large);
}

.homepage-info .homepage-info-link .service-link-text {
    font-size: var(--font-size-link-large);
}

.homepage-info .service-link span.open-in-new {
    font-size: var(--font-size-icon-small);
}


/* ----------------------------------------------------------------------------------------------------------------------*/
/* HOMEPAGE SERVICES */

.homepage-content .homepage-services {
    display: flex;
    flex-direction: column;
    flex-basis: 0;
    flex-grow: 1;
    gap: 40px;
    padding-bottom: 75px;
}

.homepage-services .homepage-services-header {
    display: flex;
    flex-direction: row;
    text-transform: uppercase;
    padding-bottom: 16px;
    font-size: var(--font-size-headline-extra-small);
    font-weight: var(--font-weight-headline);
}

.homepage-services .homepage-services-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-bottom: 24px;
}

.homepage-services a .service-link {
    font-size: var(--font-size-link-medium);
}

.homepage-services a:active {
    outline-color: var(--color-functional-blue);
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 2px;
}

.homepage-services .service-link .service-link-text {
    font-size: var(--font-size-link-medium);
}

.homepage-services .service-link span.open-in-new {
    font-size: var(--font-size-icon-extra-small);
}



/* ----------------------------------------------------------------------------------------------------------------------*/
/* HOMEPAGE CONTACT AND HELP */

.homepage-contact-and-help {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-grow: 1;
}

.homepage-contact-and-help .info-contact-and-help-content {
    display: flex;
    flex-direction: row;
    gap: 100px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 24px;
    margin-left: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
    flex-grow: 1;
}

.homepage-contact-and-help .info-contact-and-help-content .info-contact-and-help-heading {
    display: flex;
    flex-direction: row;
    min-width: 375px;
}

.homepage-contact-and-help .info-contact-and-help-heading .contact-and-help-heading-icon {
    border-radius: 50%;
    min-width: 100px;
    max-width: 100px;
    min-height: 100px;
    max-height: 100px;
    margin-right: 24px;
    overflow: hidden;
    background-color: var(--color-primary-white);
}

.homepage-contact-and-help .info-contact-and-help-heading .contact-and-help-heading-icon img {
    width: 50px;
    height: 50px;
    position: relative;
    top: 25px;
    left: 25px;
}

.homepage-contact-and-help .info-contact-and-help-heading .contact-and-help-heading-text {
    font-family: var(--font-family-headline);
    display: flex;
    font-size: var(--font-size-headline-extra-small);
    font-weight: var(--font-weight-headline);
    padding-top: 16px;
}

.homepage-contact-and-help .info-contact-and-help-content .info-contact-and-help-content {
    display: flex;
    flex-direction: column;
}

.homepage-contact-and-help .info-contact-and-help-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.homepage-contact-and-help .info-contact-and-help-list {
    min-width: 375px;
}

.homepage-contact-and-help .info-contact-and-help-list-heading {
    text-transform: uppercase;
    font-family: var(--font-family-headline-small);
    font-weight: var(--font-weight-headline);
    min-width: 375px;
}

.homepage-contact-and-help .info-contact-and-help-list-items {
    padding-top: 16px;
}

.homepage-contact-and-help .info-contact-and-help-list .contact-and-help-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--color-blue-100);
    padding-bottom: 13px;
    gap: 16px;
}

.homepage-contact-and-help a .contact-and-help-list-item .list-item-text {
    color: var(--color-functional-blue);
}

.homepage-contact-and-help a .contact-and-help-list-item .list-item-text:not(.email) {
    text-decoration-line: underline;
    text-decoration-color: var(--color-functional-blue);
    text-decoration-style: dotted;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.homepage-contact-and-help a .contact-and-help-list-item:hover .list-item-text {
    color: var(--color-blue-100);
    text-decoration-line: underline;
    text-decoration-color: var(--color-blue-100);
    text-decoration-style: solid;
}

.homepage-contact-and-help .contact-and-help-list-item .list-item-icon {
    display: flex;
}

.homepage-contact-and-help .contact-and-help-list-item span.open-in-new {
    font-size: var(--font-size-icon-extra-small);
}