/*
Theme Name: HG100 Creator Archive
Theme URI: https://hg100.duckdns.org
Author: HG100
Description: Dark creator directory starter theme.
Version: 1.0.0
License: GPL-2.0+
Text Domain: hg100-theme
*/

:root {
    --bg: #0f0f12;
    --card: #191922;
    --text: #ffffff;
    --muted: #a1a1aa;
    --accent: #8b5cf6;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
}

a {
    color: var(--text);
    text-decoration: none;
}

.hg-container {
    width: min(1200px, 90%);
    margin: auto;
}

.hg-header {
    padding: 25px 0;
    border-bottom: 1px solid #26262f;
}

.hg-logo {
    font-size: 28px;
    font-weight: bold;
}

.hg-nav a {
    margin-left: 20px;
    color: var(--muted);
}

.hg-hero {
    padding: 100px 0;
    text-align: center;
}

.hg-hero h1 {
    font-size: 56px;
}

.hg-button {
    display:inline-block;
    margin-top:20px;
    padding:14px 28px;
    background:var(--accent);
    border-radius:10px;
}

.hg-card {
    background:var(--card);
    padding:25px;
    border-radius:18px;
    margin:20px 0;
}

footer {
    margin-top:80px;
    padding:30px 0;
    color:var(--muted);
}

.creator-single{
    max-width:900px;
    margin:60px auto;
    padding:20px;
}


.creator-profile-card{

    text-align:center;
    background:#ffffff;
    border-radius:20px;
    padding:40px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

}



.creator-avatar{

    width:180px;
    height:180px;

    object-fit:cover;

    border-radius:50%;

    margin-bottom:20px;

}



.creator-profile-card h1{

    font-size:42px;
    margin-bottom:10px;

}



.country{

    font-size:18px;

    color:#666;

}



.bio{

    margin:30px auto;

    max-width:600px;

    font-size:18px;

    line-height:1.8;

}



.social-links{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-top:30px;

}



.social-links a{

    padding:12px 25px;

    border-radius:30px;

    background:#111;

    color:white;

    text-decoration:none;

}



.social-links a:hover{

    opacity:.8;

}

/* ===============================
 Creator Single Page
=============================== */

.creator-single-card {

    max-width:900px;
    margin:60px auto;
    
    background:
    rgba(25,25,25,0.95);

    border-radius:24px;

    padding:50px;

    box-shadow:
    0 20px 60px rgba(0,0,0,0.65);

    border:
    1px solid rgba(255,255,255,0.08);

    color:#ffffff;
}


/* 头像 */

.creator-avatar img{

    width:180px;
    height:180px;

    object-fit:cover;

    border-radius:50%;

    border:
    4px solid rgba(255,255,255,0.15);

    box-shadow:
    0 10px 30px rgba(0,0,0,.5);

}


/* 名字 */

.creator-single-card h1{

    color:#ffffff;

    font-size:42px;

    margin-top:30px;

    margin-bottom:10px;

}


/* 国家 */

.creator-country{

    color:#bbbbbb;

    font-size:16px;

    margin-bottom:30px;

}


/* 简介 */

.creator-bio{

    color:#dddddd;

    font-size:18px;

    line-height:1.8;

    margin:30px 0;

}


/* 社交链接区域 */

.creator-links{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}



/* 链接按钮 */

.creator-links a{

    display:inline-block;

    padding:12px 24px;

    border-radius:999px;


    background:#000;


    color:#fff;


    text-decoration:none;


    border:
    1px solid rgba(255,255,255,.15);


    transition:.3s;

}


.creator-links a:hover{

    background:#fff;

    color:#000;

}

/* Creator Archive */


.creator-archive{

padding:60px 20px;

}



.creator-header{

text-align:center;

margin-bottom:50px;

}


.creator-header h1{

font-size:48px;

color:white;

}



.creator-header p{

color:#aaa;

}





.creator-grid{

display:grid;

grid-template-columns:
repeat(auto-fill,minmax(240px,1fr));

gap:30px;

}





.creator-card{

background:#151515;

border-radius:20px;

overflow:hidden;

text-decoration:none;

transition:.3s;

border:1px solid #222;

}





.creator-card:hover{

transform:translateY(-8px);

box-shadow:
0 20px 40px rgba(0,0,0,.5);

}




.creator-card-image{

height:300px;

overflow:hidden;

}




.creator-card-image img{

width:100%;

height:100%;

object-fit:cover;

}





.no-avatar{

height:100%;

display:flex;

align-items:center;

justify-content:center;

color:#777;

}




.creator-card-info{

padding:20px;

}



.creator-card-info h2{

margin:0;

font-size:24px;

color:white;

}



.creator-card-info p{

color:#aaa;

margin-top:10px;

}

/* HG100 HOME */


.hg-home{

background:#000;

color:white;

}



.hero{

text-align:center;

padding:120px 20px 100px;

}



.hero h1{

font-size:90px;

margin:0;

font-weight:800;

}



.hero h2{

font-size:42px;

margin-top:20px;

}



.hero p{

font-size:18px;

color:#aaa;

}




.hero-btn{

display:inline-block;

margin-top:40px;

padding:16px 40px;

background:white;

color:black;

border-radius:40px;

text-decoration:none;

font-weight:bold;

transition:.3s;

}



.hero-btn:hover{

transform:translateY(-5px);

}




.featured{

padding:70px 30px;

}



.featured>h2,
.categories>h2,
.about>h2{

text-align:center;

font-size:40px;

margin-bottom:50px;

}





.categories{

padding:80px 30px;

}



.category-list{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}



.category-list div{

background:#151515;

padding:20px 40px;

border-radius:30px;

font-size:18px;

border:1px solid #333;

}





.about{

padding:80px 30px;

text-align:center;

max-width:800px;

margin:auto;

}



.about p{

color:#aaa;

font-size:18px;

line-height:2;

}

/* HEADER */


.hg-header{

background:#000;

border-bottom:1px solid #222;

padding:20px 30px;

}


.hg-container{

max-width:1200px;

margin:auto;

display:flex;

justify-content:space-between;

align-items:center;

}



.hg-brand{

display:flex;

align-items:baseline;

gap:12px;

}



.hg-logo{

font-size:32px;

font-weight:800;

color:white;

}



.hg-subtitle{

font-size:14px;

color:#888;

}



.hg-nav{

display:flex;

gap:30px;

}



.hg-nav a{

color:#aaa;

text-decoration:none;

font-size:16px;

transition:.3s;

}



.hg-nav a:hover{

color:white;

}



@media(max-width:700px){


.hg-container{

flex-direction:column;

gap:20px;

}


.hg-nav{

gap:15px;

flex-wrap:wrap;

justify-content:center;

}


}