/* =========================================
HOUSE OF STAPLETON
WELCOME PAGE
========================================= */

/* =========================================
   BANNER COMPONENT
========================================= */

/* =========================================
   VILLAGE GREEN BANNER
========================================= */

.village-banner {

    text-align: center;

    margin-bottom: 30px;

    padding: 30px 20px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.95),
            rgba(248,245,238,.95)
        );

    border-top: 4px solid #8b7355;
    border-bottom: 4px solid #8b7355;

    border-radius: 12px;

    box-shadow:
        0 4px 12px rgba(0,0,0,.15);
}

/* Main title */

.village-title {

    font-family: Georgia, "Times New Roman", serif;

    font-size: 3rem;

    font-weight: bold;

    color: #2f3b2f;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 10px;
}

/* Subtitle */

.village-subtitle {

    font-size: 1.15rem;

    font-style: italic;

    color: #666;

    margin-bottom: 15px;
}

/* Decorative divider */

.village-divider {

    width: 120px;

    height: 2px;

    margin: 0 auto 15px;

    background:
        linear-gradient(
            to right,
            transparent,
            #c9a21a,
            transparent
        );
}

/* Section listing */

.village-sections {

    font-size: .95rem;

    letter-spacing: 1px;

    text-transform: uppercase;

    color: #555;
}

/* =========================================
   HELLO COMPONENT
========================================= */

.welcome-banner {

    text-align: center;

    margin: 15px 0 30px;

    padding: 15px;

    background: linear-gradient(
        to right,
        #faf7ef,
        #fffdf5,
        #faf7ef
    );

    border-top: 2px solid #c49a6c;
    border-bottom: 2px solid #c49a6c;
}

.welcome-time {

    font-size: 1.8rem;
    font-weight: 600;

    color: var(--color-blue);
}

.welcome-message {

    margin-top: 5px;

    font-size: 1.1rem;

    font-style: italic;

    color: #666;
}

/* Welcome card */

.card.welcome {

background: #fff8e8;

border-left: 5px solid #c78c1f;

margin-bottom: 25px;

}

/* Shared story cards */

.house-card {

width: 88%;

margin-bottom: 25px;

position: relative;

transition:
    transform .2s ease;

box-shadow:
        0 4px 12px rgba(0,0,0,.15),
        0 1px 2px rgba(0,0,0,.08);

}

/* Decorative push pin */

.house-card::before {

content: "\2022";

position: absolute;

top: 8px;
right: 12px;

font-size: 2rem;

opacity: .60;

}

/* Alternate alignment */

.house-card.left {
margin-right: auto;
}

.house-card.right {
margin-left: auto;
}

/* Scrapbook tilt */

.house-card.rotate-left {
transform: rotate(-1.0deg);
}

.house-card.rotate-right {
transform: rotate(1.5deg);
}

.house-card:hover {
transform: rotate(0deg) scale(1.01);
}

/* =========================================
HOME TEASER CARDS
========================================= */

/* Genealogy */

.card.genealogy {

background: #f3eee5;

border-left: 5px solid #8b7355;

}

.card.genealogy::before {

color: #8b7355;

}

/* Entertainment */

.card.entertainment {

background: #eef5ff;

border-left: 5px solid #4a74b8;

}

.card.entertainment::before {

color: #4a74b8;

}

/* Sports */

.card.sports {

background: #eef8ee;

border-left: 5px solid #4f8a4f;

}

.card.sports::before {

color: #4f8a4f;

}

/* Trivia */

.card.trivia {

background: #f8f0ff;

border-left: 5px solid #8a5fbf;

}

.card.trivia::before {

color: #8a5fbf;

}