Template:Person Infobox/styles.css

/* ===================================
   WikiVita Ultra Premium Infobox
   Production Ready Final Version
   =================================== */

.wv-infobox {
    width: 100%;
    max-width: 340px;

    float: right;
    clear: right;

    margin: 0 0 1.3em 1.3em;

    border: 1px solid #e7e7e7;
    border-radius: 28px;

    background: #ffffff;

    font-size: 14px;
    line-height: 1.6;

    border-spacing: 0;
    overflow: hidden;

   box-shadow:
    0 6px 18px rgba(0,0,0,0.05),
    0 18px 42px rgba(0,0,0,0.08);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

/* ===================================
   Hover
   =================================== */

.wv-infobox:hover {
    transform: translateY(-2px);

    box-shadow:
        0 4px 10px rgba(0,0,0,0.05),
        0 18px 38px rgba(0,0,0,0.08),
        0 34px 60px rgba(0,0,0,0.09);
}

/* ===================================
   Global Table Styling
   =================================== */

.wv-infobox th,
.wv-infobox td {
    padding: 10px 14px;

    text-align: left;
    vertical-align: top;
}

/* ===================================
   Ultra Premium Title
   =================================== */

.wv-title,
.wv-infobox .wv-title,
.wv-infobox th.wv-title {

    text-align: center;

    padding: 14px 16px 12px;

font-size: 20px;
font-weight: 700;
line-height: 1.08;
    letter-spacing: -1px;

color: #1f2937;

    background:
        linear-gradient(
            to bottom,
            #ffffff,
            #f8f9fb
        );

    border-bottom:
        1px solid rgba(0,0,0,0.05);

    text-shadow:
        0 1px 0 rgba(255,255,255,0.7);
}
.wv-infobox tr:nth-child(even) td {
background: rgba(248,250,252,0.22);
}

.wv-title img,
.wv-title svg {
    width: 20px;
    height: 20px;
    vertical-align: -3px;

    margin-left: 1px;
}

/* ===================================
   Premium Image Section
   =================================== */

.wv-image {

    padding: 14px 14px 12px;

    background:
        linear-gradient(
            to bottom,
            #f6f7f9 0%,
            #ffffff 100%
        );

    position: relative;
}

/* Soft divider glow */

.wv-image::after {
    content: "";

    position: absolute;

    left: 24px;
    right: 24px;
    bottom: 0;

    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(0,0,0,0.08),
            transparent
        );
}

.wv-image img {

    border-radius: 24px;

    box-shadow:
        0 4px 10px rgba(0,0,0,0.05),
        0 18px 34px rgba(0,0,0,0.12);
}

/* ===================================
   Row Hover
   =================================== */

.wv-infobox tr {
    transition: background 0.18s ease;
}

.wv-infobox tr:hover {
    background: #fcfcfc;
}

/* ===================================
   Labels
   =================================== */

.wv-infobox th {
    width: 34%;

    font-weight: 600;

color: #5f6673;

    background:
        linear-gradient(
            to right,
            #fafafa,
            #f6f6f6
        );

border-top: 1px solid rgba(15,23,42,0.035);
border-right: 1px solid #f2f2f2;

    letter-spacing: -0.1px;

    word-break: break-word;
}

/* Prevent title from inheriting label styles */

.wv-title,
.wv-infobox th.wv-title {
    width: auto;

    background:
        linear-gradient(
            to bottom,
            #ffffff,
            #f7f7f7
        );

    border-right: none;
}

/* ===================================
   Values
   =================================== */

.wv-infobox td {
    color: #222;

background: rgba(255,255,255,0.92);

border-top: 1px solid rgba(15,23,42,0.025);

    overflow-wrap: break-word;
    word-break: break-word;
}

/* ===================================
   Remove First Borders
   =================================== */

.wv-infobox tr:first-of-type th,
.wv-infobox tr:first-of-type td {
    border-top: none;
}

/* ===================================
   Better Line Breaks
   =================================== */

.wv-infobox td br {
    line-height: 1.85;
}

/* ===================================
   Links
   =================================== */

.wv-infobox a {
    color: #1c5da5;
    text-decoration: none;

    transition: color 0.18s ease;
}

.wv-infobox a:hover {
    color: #12457b;
    text-decoration: underline;
}

/* ===================================
   Small Text
   =================================== */

.wv-infobox small,
.wv-infobox .caption {
    color: #6b6b6b;

    font-size: 12.5px;
    line-height: 1.5;
}

/* ===================================
   Mobile Optimization
   =================================== */

@media screen and (max-width: 768px) {

    .wv-infobox {
        float: none;

        width: 100%;
        max-width: 100%;

        margin: 0 auto 1em auto;

        border-radius: 30px;

box-shadow:
    0 8px 22px rgba(15,23,42,0.06),
    0 24px 54px rgba(15,23,42,0.08);
    }

    /* ===================================
       Mobile Title Fix
       =================================== */

    .wv-title,
    .wv-infobox .wv-title,
    .wv-infobox th.wv-title,
    .wv-infobox tr .wv-title {
        font-size: 22px;

        font-weight: 500;

        line-height: 1.10;

        padding: 10px 16px;

        letter-spacing: -0.8px;

        text-align: center;
    }

    /* ===================================
       Compact Rows
       =================================== */

    .wv-infobox th,
    .wv-infobox td {
      padding: 8px 12px;
      padding-left: 18px;

        font-size: 13.4px;
        line-height: 1.5;
    }

    /* Better Label Width */

    .wv-infobox th {
        width: 35%;
    }

    /* ===================================
       Mobile Image
       =================================== */

    .wv-image {
        padding: 14px 14px 10px;
        margin-top: -2px;
    }

    .wv-image img {
        max-width: 250px;

        border-radius: 20px;
    }
}