@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;500;600;700&family=Noto+Serif+SC:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');
:root{
--navy-900:#070c14;
--navy-800:#0d1b2a;
--navy-700:#1b263b;
--blue:#2a4f8f;
--blue-soft:#41729f;
--gold:#c5a059;
--gold-soft:#dfc79b;
--ink:#17222d;
--ink-soft:#4a5768;
--paper:#f8f7f4;
--paper-2:#efece4;
--line:#e3ddd0;
--white:#ffffff;
--radius:20px;
--shadow:0 24px 60px rgba(7, 12, 20, 0.06), 0 4px 14px rgba(7, 12, 20, 0.02);
--shadow-sm:0 8px 30px rgba(7, 12, 20, 0.04);
--maxw:1180px;
--font:"Outfit","Inter","Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
margin:0;font-family:var(--font);color:var(--ink);
background:var(--paper);line-height:1.75;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{line-height:1.3;margin:0;font-weight:700;letter-spacing:.01em}
p{margin:0 0 1em}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{
display:inline-flex;align-items:center;gap:.5em;
font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
color:var(--gold);font-weight:700;margin-bottom:14px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold)}
.section{padding:88px 0}
.section--tight{padding:60px 0}
.section-head{max-width:760px;margin:0 auto 52px;text-align:center}
.section-head.left{margin-left:0;text-align:left}
.section-head h2{
font-size:clamp(1.9rem,3.2vw,2.7rem);
color:var(--navy-900);
background: linear-gradient(135deg, var(--navy-900) 0%, var(--blue) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: block;
width: fit-content;
margin: 0 auto;
letter-spacing: -0.01em;
}
.section-head.left h2{margin-left:0}
.section-head p{margin-top:16px;color:var(--ink-soft);font-size:1.05rem}
.lead{font-size:1.18rem;color:var(--ink-soft)}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;gap:.5em;cursor:pointer;
padding:14px 30px;border-radius:999px;font-weight:600;font-size:1rem;
border:1px solid transparent;transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1);white-space:nowrap;
}
.btn--gold{background:linear-gradient(135deg,var(--gold),#a78343);color:#1a1206;box-shadow:0 8px 24px rgba(197,160,89,.25), inset 0 1px 0 rgba(255,255,255,0.4);text-shadow: 0 1px 0 rgba(255,255,255,0.2)}
.btn--gold:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 16px 34px rgba(197,160,89,.45)}
.btn--ghost{border-color:rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,0.02)}
.btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}
.btn--outline{border-color:var(--blue);color:var(--blue);background:transparent}
.btn--outline:hover{background:var(--blue);color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(42,79,143,0.15)}
/* ---------- header / nav ---------- */
.site-header{
position:sticky;top:0;z-index:50;background:rgba(248,247,244,.85);
backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid rgba(28,39,51,.06);
box-shadow:0 4px 30px rgba(0,0,0,0.02);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.header-right {
display: flex;
align-items: center;
gap: 16px;
}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--navy-800)}
.brand .mark{
width:38px;height:38px;border-radius:50%;flex:none;
background:radial-gradient(circle at 35% 30%,var(--blue-soft),var(--blue));
display:grid;place-items:center;color:#fff;font-size:.9rem;font-weight:800;
box-shadow:0 6px 16px rgba(47,85,151,.4);
}
.brand small{display:block;font-size:.66rem;letter-spacing:.18em;color:var(--ink-soft);font-weight:600}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav-links a{
padding:8px 14px;border-radius:12px;font-size:.95rem;font-weight:600;color:var(--ink-soft);transition:all .3s cubic-bezier(0.16, 1, 0.3, 1);
white-space:nowrap;
}
.nav-links a:hover{color:var(--navy-800);background:rgba(239,236,228,0.7);transform:translateY(-1px)}
.nav-links a.active{color:var(--blue);background:rgba(42,79,143,0.05)}
.nav-cta{margin-left:8px}
.lang-switch {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.85rem !important;
color: var(--blue) !important;
border: 1px solid var(--line);
padding: 6px 12px !important;
border-radius: 8px;
transition: .2s;
background: rgba(47, 85, 151, 0.04);
white-space: nowrap;
}
.lang-switch:hover {
background: var(--blue) !important;
color: #fff !important;
border-color: var(--blue) !important;
}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--navy-800);margin:5px 0;transition:.3s}
/* ---------- hero ---------- */
.hero{
position:relative;color:#fff;overflow:hidden;
background:radial-gradient(120% 120% at 80% 0%,#23416b 0%,var(--navy-800) 45%,var(--navy-900) 100%);
}
.hero::after{
content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
background:
radial-gradient(circle at 80% 20%,rgba(223,199,155,.16),transparent 45%),
radial-gradient(circle at 20% 80%,rgba(65,114,159,.22),transparent 45%);
}
.hero .container{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:96px 0}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.5rem);letter-spacing:.01em}
.hero h1 .accent{color:var(--gold-soft)}
.hero .lead{color:rgba(255,255,255,.82);font-size:1.15rem;margin:22px 0 30px;max-width:30em}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:flex;gap:34px;margin-top:42px;flex-wrap:wrap}
.hero-stats .num{font-size:1.7rem;font-weight:800;color:var(--gold-soft)}
.hero-stats .lbl{font-size:.85rem;color:rgba(255,255,255,.7)}
.hero-visual{position:relative}
.hero-card{
background:rgba(255,255,255,.96);border-radius:24px;padding:14px;box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.hero-card img{border-radius:14px}
.hero-badge{
position:absolute;left:-18px;bottom:26px;background:var(--gold);color:#1a1206;
padding:12px 18px;border-radius:14px;font-weight:700;font-size:.9rem;box-shadow:var(--shadow);
}
.hero-badge small{display:block;font-weight:600;font-size:.72rem;opacity:.8}
/* ---------- page banner (inner pages) ---------- */
.page-banner {
color: #fff;
padding: 140px 0 100px;
background: linear-gradient(135deg, var(--navy-800) 0%, #142842 100%);
position: relative;
overflow: hidden;
text-align: center;
}
.page-banner::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(120% 120% at 50% 0%, rgba(65, 120, 170, 0.55) 0%, transparent 75%),
radial-gradient(circle at 85% 30%, rgba(223, 199, 155, 0.22), transparent 55%),
radial-gradient(1px 1px at 20px 20px, rgba(255, 255, 255, 0.06) 50%, transparent 100%);
background-size: 100% 100%, 100% 100%, 40px 40px;
pointer-events: none;
}
.page-banner .container {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.page-banner h1 {
font-size: clamp(2.4rem, 4.5vw, 3.6rem);
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 24px;
background: linear-gradient(135deg, #ffffff 30%, var(--gold-soft) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
position: relative;
}
.page-banner h1::after {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 2px;
background: var(--gold);
}
.page-banner p {
color: rgba(255, 255, 255, 0.7);
max-width: 48em;
margin-top: 48px;
font-size: 1.1rem;
line-height: 1.8;
font-weight: 300;
}
.crumbs{font-size:.85rem;color:rgba(255,255,255,.6);margin-bottom:14px}
.crumbs a:hover{color:var(--gold-soft)}
/* ---------- generic cards / grids ---------- */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{
background:var(--white);border:1px solid rgba(227,221,208,0.8);border-radius:var(--radius);
padding:30px;box-shadow:var(--shadow-sm), inset 0 0 0 1px rgba(255,255,255,0.7);
transition:transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s;
}
.card:hover{
transform:translateY(-6px);
box-shadow:var(--shadow), 0 12px 24px rgba(197,160,89,0.04);
border-color:var(--gold-soft);
}
.card h3{
font-size: 1.18rem;
color: var(--navy-800);
margin-bottom: 12px;
position: relative;
padding-top: 24px;
}
.card h3::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 2px;
background: var(--blue);
transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.card:hover h3::before {
width: 40px;
}
.card p{
color: var(--ink-soft);
font-size: .97rem;
margin: 0;
}
.card--gold h3::before{
background: var(--gold);
}
.card-eyebrow {
display: block;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.15em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 12px;
}
/* ---------- event cards ---------- */
.event-card {
position: relative;
background: #ffffff;
border: 1px solid rgba(223, 199, 155, 0.4);
border-radius: 16px;
padding: 40px 32px 36px;
box-shadow: 0 10px 30px rgba(7, 12, 20, 0.03);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
overflow: hidden;
display: flex;
flex-direction: column;
}
.event-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--gold-soft), var(--gold));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.event-card:hover {
transform: translateY(-8px);
box-shadow: 0 24px 48px rgba(156, 123, 52, 0.12);
border-color: rgba(223, 199, 155, 0.8);
}
.event-card:hover::before {
transform: scaleX(1);
}
.event-card .e-tag {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
padding: 6px 14px;
font-size: 0.8rem;
font-weight: 800;
color: var(--gold);
background: rgba(197, 160, 89, 0.08);
border: 1px solid rgba(197, 160, 89, 0.2);
border-radius: 6px;
margin-bottom: 28px;
letter-spacing: 0.12em;
text-transform: uppercase;
transition: all 0.3s ease;
}
.event-card:hover .e-tag {
background: var(--gold);
color: #fff;
border-color: var(--gold);
box-shadow: 0 4px 12px rgba(197, 160, 89, 0.2);
}
.event-card h3 {
font-size: 1.4rem;
color: var(--navy-900);
margin-bottom: 14px;
font-weight: 800;
}
.event-card p {
color: var(--ink-soft);
font-size: 0.95rem;
line-height: 1.6;
margin: 0;
}
/* ---------- feat cards ---------- */
.feat-card {
position: relative;
background: #ffffff;
border: 1px solid rgba(223, 199, 155, 0.2);
border-radius: 20px;
padding: 48px 40px;
box-shadow: 0 10px 40px rgba(7, 12, 20, 0.04);
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
overflow: hidden;
z-index: 1;
}
.feat-card::after {
content: attr(data-num);
position: absolute;
top: -30px;
right: -10px;
font-size: 14rem;
font-family: Arial, sans-serif;
font-weight: 900;
line-height: 1;
color: rgba(7, 12, 20, 0.02);
z-index: -1;
transition: color 0.5s ease;
pointer-events: none;
}
.feat-card:hover {
transform: translateY(-8px);
box-shadow: 0 30px 60px rgba(156, 123, 52, 0.08);
border-color: rgba(223, 199, 155, 0.6);
}
.feat-card:hover::after {
color: rgba(223, 199, 155, 0.1);
}
.feat-card h3 {
font-size: 1.5rem;
color: var(--navy-900);
margin-bottom: 16px;
font-weight: 800;
}
.feat-card p {
color: var(--ink-soft);
font-size: 1.05rem;
line-height: 1.7;
margin: 0;
}
.feat-card .num-mark {
display: inline-block;
font-size: 0.9rem;
font-weight: 800;
color: var(--gold);
letter-spacing: 0.2em;
margin-bottom: 24px;
text-transform: uppercase;
}
.feat-card .num-mark::after {
content: "";
display: block;
width: 24px;
height: 2px;
background: var(--gold-soft);
margin-top: 8px;
}
/* ---------- core cards ---------- */
.grid-3 {
counter-reset: core-count;
}
.core-card {
counter-increment: core-count;
background: #ffffff;
border-radius: 20px;
padding: 56px 40px;
box-shadow: 0 10px 30px rgba(7, 12, 20, 0.03);
border: 1px solid rgba(223, 199, 155, 0.2);
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
text-align: center;
position: relative;
overflow: hidden;
z-index: 1;
}
.core-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--gold-soft), var(--gold));
transform: scaleX(0);
transform-origin: center;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.core-card:hover {
transform: translateY(-8px);
box-shadow: 0 30px 60px rgba(156, 123, 52, 0.08);
border-color: rgba(223, 199, 155, 0.5);
}
.core-card:hover::before {
transform: scaleX(1);
}
.core-card .c-icon-wrap {
display: flex;
justify-content: center;
margin-bottom: 36px;
}
.core-card .c-icon {
width: 64px;
height: 64px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: rgba(197, 160, 89, 0.08);
border-radius: 50%;
border: 1px solid rgba(197, 160, 89, 0.2);
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.core-card .c-icon::before {
content: "0" counter(core-count);
font-size: 1.25rem;
font-weight: 800;
color: var(--gold);
z-index: 1;
transition: color 0.5s ease;
}
.core-card:hover .c-icon {
background: var(--gold);
border-color: var(--gold);
box-shadow: 0 8px 24px rgba(197, 160, 89, 0.25);
transform: scale(1.1);
}
.core-card:hover .c-icon::before {
color: #ffffff;
}
.core-card h3 {
font-size: 1.45rem;
color: var(--navy-900);
margin-bottom: 16px;
font-weight: 800;
}
.core-card p {
color: var(--ink-soft);
font-size: 0.95rem;
line-height: 1.7;
margin: 0;
}
/* ---------- org cards ---------- */
.org-card {
position: relative;
background: #ffffff;
border-radius: 12px;
padding: 40px 32px 36px;
border: 1px solid rgba(223, 199, 155, 0.2);
box-shadow: 0 10px 30px rgba(7, 12, 20, 0.02);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
overflow: hidden;
z-index: 1;
}
.org-card::before {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--gold-soft), var(--gold));
opacity: 0.5;
transition: width 0.4s ease, opacity 0.4s ease;
}
.org-card::after {
content: "\2726"; /* Four-pointed star */
position: absolute;
bottom: -40px;
right: -20px;
font-size: 14rem;
line-height: 1;
color: rgba(197, 160, 89, 0.04);
z-index: -1;
transform: rotate(15deg);
transition: color 0.5s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.org-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(156, 123, 52, 0.08);
border-color: rgba(223, 199, 155, 0.5);
}
.org-card:hover::before {
opacity: 1;
width: 6px;
}
.org-card:hover::after {
color: rgba(197, 160, 89, 0.08);
transform: rotate(0deg) scale(1.1);
}
.org-card h3 {
font-size: 1.35rem;
color: var(--navy-900);
margin-bottom: 12px;
font-weight: 800;
letter-spacing: -0.01em;
}
.org-card p {
color: var(--ink-soft);
font-size: 0.95rem;
line-height: 1.7;
margin: 0;
}
/* ---------- partner cards ---------- */
.partner-card {
position: relative;
background: #ffffff;
border-radius: 12px;
padding: 48px 40px;
box-shadow: 0 10px 30px rgba(7, 12, 20, 0.03);
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
overflow: hidden;
border: 1px solid rgba(223, 199, 155, 0.2);
z-index: 1;
}
.partner-card::before {
content: "";
position: absolute;
top: -40px; right: -40px;
width: 120px; height: 120px;
background: radial-gradient(circle, rgba(197, 160, 89, 0.08) 0%, rgba(197, 160, 89, 0) 70%);
border-radius: 50%;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
z-index: -1;
}
.partner-card::after {
content: "";
position: absolute;
bottom: -30px; left: -30px;
width: 80px; height: 80px;
background: radial-gradient(circle, rgba(197, 160, 89, 0.06) 0%, rgba(197, 160, 89, 0) 70%);
border-radius: 50%;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
z-index: -1;
}
.partner-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(156, 123, 52, 0.08);
border-color: rgba(223, 199, 155, 0.5);
}
.partner-card:hover::before {
transform: scale(1.5);
}
.partner-card:hover::after {
transform: scale(1.5);
}
.partner-card h3 {
font-size: 1.4rem;
color: var(--navy-900);
margin-bottom: 16px;
font-weight: 800;
display: flex;
align-items: center;
}
.partner-card h3::before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid var(--gold);
border-radius: 50%;
margin-right: 12px;
background: transparent;
transition: background 0.4s ease;
}
.partner-card:hover h3::before {
background: var(--gold);
}
.partner-card p {
color: var(--ink-soft);
font-size: 0.95rem;
line-height: 1.7;
margin: 0;
padding-left: 28px;
}
/* ---------- activity cards ---------- */
.activity-card {
position: relative;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 40px 32px;
box-shadow: 0 4px 16px rgba(7, 12, 20, 0.02);
border: 1px solid rgba(255, 255, 255, 0.8);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
overflow: hidden;
}
.activity-card:hover {
background: #ffffff;
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(7, 12, 20, 0.05);
border-color: rgba(223, 199, 155, 0.4);
}
.activity-card .a-icon {
width: 48px;
height: 48px;
background: rgba(197, 160, 89, 0.1);
color: var(--gold);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
font-size: 1.5rem;
transition: all 0.4s ease;
}
.activity-card:hover .a-icon {
background: var(--gold);
color: #fff;
transform: scale(1.05) rotate(5deg);
}
.activity-card h3 {
font-size: 1.25rem;
color: var(--navy-900);
margin-bottom: 12px;
font-weight: 700;
}
.activity-card p {
color: var(--ink-soft);
font-size: 0.95rem;
line-height: 1.6;
margin: 0;
}
.alt{background:var(--paper-2)}
.navy-bg{background:var(--navy-800);color:#fff}
.navy-bg .section-head h2{background:linear-gradient(135deg,#ffffff 0%,rgba(255,255,255,0.7) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:#fff}
.navy-bg .section-head p{color:rgba(255,255,255,.75)}
.navy-bg .card{background:rgba(255, 255, 255, 0.05);border-color:rgba(255, 255, 255, 0.12);color:rgba(255, 255, 255, 0.82);box-shadow:0 20px 48px rgba(7, 12, 20, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.06);transition:transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s}
.navy-bg .card h3{color:#fff}
.navy-bg .card p{color:rgba(255, 255, 255, 0.7)}
.navy-bg .card .ic{background:rgba(255, 255, 255, 0.08);box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.1);color:var(--gold-soft)}
.navy-bg .card:hover{background:rgba(255, 255, 255, 0.08);border-color:var(--gold-soft);box-shadow:0 30px 60px rgba(7, 12, 20, 0.25), 0 0 20px rgba(197, 160, 89, 0.15);transform:translateY(-6px)}
.navy-bg .ticks li {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.85);
box-shadow: 0 8px 24px rgba(7, 12, 20, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.navy-bg .ticks li:hover {
background: rgba(255, 255, 255, 0.08);
border-color: var(--gold-soft);
box-shadow: 0 12px 32px rgba(7, 12, 20, 0.25), 0 0 16px rgba(197, 160, 89, 0.1);
transform: translateX(4px);
}
.navy-bg .ticks li strong {
color: #fff;
}
/* ---------- feature split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split img{border-radius:var(--radius);box-shadow:var(--shadow)}
.split h2{font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--navy-800);margin-bottom:18px}
.split .reverse{order:-1}
.ticks {
list-style: none;
padding: 0;
margin: 20px 0 0;
}
.ticks li {
position: relative;
padding: 16px 20px 16px 48px;
margin-bottom: 12px;
color: var(--ink-soft);
background: var(--paper-2);
border: 1px solid rgba(223, 199, 155, 0.15);
border-radius: 14px;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
font-size: 0.95rem;
}
.ticks li:hover {
background: #ffffff;
border-color: rgba(223, 199, 155, 0.6);
box-shadow: 0 8px 24px rgba(7, 12, 20, 0.04);
transform: translateX(4px);
}
.ticks li::before {
content: "✓";
position: absolute;
left: 16px;
top: 18px;
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold) 0%, #b38b4d 100%);
color: #fff;
font-size: .65rem;
display: grid;
place-items: center;
font-weight: 800;
box-shadow: 0 2px 8px rgba(197, 160, 89, 0.3);
}
.ticks li strong {
color: var(--navy-800);
font-weight: 700;
}
/* ---------- pills / tags ---------- */
.pill{display:inline-block;padding:6px 14px;border-radius:999px;background:#eef2f8;color:var(--blue);font-size:.82rem;font-weight:600;margin:0 6px 8px 0}
.pill--gold{background:#f6efdd;color:#9c7b34}
/* ---------- oriental tags (elegant concept display) ---------- */
.oriental-tags {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
.oriental-tag {
display: inline-flex;
align-items: center;
background: linear-gradient(145deg, #ffffff 0%, #fcfbf9 100%);
border: 1px solid rgba(223, 199, 155, 0.6);
padding: 12px 24px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(156, 123, 52, 0.05);
color: var(--navy-800);
font-size: 0.95rem;
transition: all 0.3s ease;
}
.oriental-tag:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(156, 123, 52, 0.1);
border-color: var(--gold);
}
.oriental-tag strong {
font-weight: 700;
color: var(--navy-900);
}
.oriental-tag .dot {
margin: 0 10px;
color: var(--gold);
font-size: 1.2rem;
line-height: 1;
}
.oriental-tag span {
color: var(--ink-soft);
}
/* ---------- numbered steps ---------- */
.steps{counter-reset:step;display:grid;gap:18px}
.step{display:flex;gap:20px;background:var(--white);border:1px solid rgba(227, 221, 208, 0.8);border-radius:14px;padding:22px 26px;box-shadow:var(--shadow-sm), inset 0 0 0 1px rgba(255,255,255,0.7);transition:all 0.4s cubic-bezier(0.16, 1, 0.3, 1)}
.step:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--blue-soft)}
.step .n{flex:none;counter-increment:step;width:42px;height:42px;border-radius:50%;
background:linear-gradient(135deg,var(--blue),var(--navy-700));color:#fff;font-weight:800;display:grid;place-items:center;transition:all 0.4s cubic-bezier(0.16, 1, 0.3, 1)}
.step:hover .n{transform:scale(1.08);box-shadow:0 0 12px rgba(42, 79, 143, 0.25)}
.step .n::before{content:counter(step)}
.step h4{color:var(--navy-800);margin-bottom:4px}
.step p{margin:0;color:var(--ink-soft);font-size:.95rem}
/* ---------- tables ---------- */
.table-wrap{
overflow-x:auto;
border-radius:var(--radius);
box-shadow: 0 30px 70px rgba(7, 12, 20, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
border:1px solid rgba(227, 221, 208, 0.7);
background: rgba(255, 255, 255, 0.9);
}
table{width:100%;border-collapse:collapse;background:transparent;min-width:560px}
.table-compare table{min-width:1000px}
th,td{
padding:20px 24px;
text-align:left;
font-size:.96rem;
border-bottom:1px solid rgba(227, 221, 208, 0.5);
vertical-align:middle;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
thead th{
background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-900) 100%);
color:#fff;
font-weight:600;
letter-spacing:.04em;
border-bottom:0;
font-family: "Outfit", var(--font);
font-size: 1.05rem;
}
tbody tr:nth-child(even){background:rgba(248, 247, 244, 0.45)}
tbody tr:hover{
background:rgba(42, 79, 143, 0.03);
}
td.em{
font-weight:700;
color:var(--navy-800);
font-family: "Outfit", var(--font);
font-size: 1rem;
}
/* 专门针对右侧（Sleepist Program）对比列进行的高档分栏高亮优化 */
.table-compare th:nth-child(2) {
position: relative;
color: var(--gold-soft);
font-weight: 700;
background: linear-gradient(135deg, #0d1b2a 0%, #070c14 100%); /* 五类课程对比表 Sleepist 列专属黑金 */
border-left: 1px solid rgba(197, 160, 89, 0.15);
border-right: 1px solid rgba(197, 160, 89, 0.15);
}
.table-compare td:nth-child(2) {
background: rgba(197, 160, 89, 0.03);
font-weight: 600;
color: var(--navy-900);
border-left: 1px solid rgba(197, 160, 89, 0.10);
border-right: 1px solid rgba(197, 160, 89, 0.10);
}
.table-compare tbody tr:hover td:nth-child(2) {
background: rgba(197, 160, 89, 0.08);
color: #7b5f25;
}
.table-compare td:nth-child(n+3) {
color: var(--ink-soft);
opacity: 0.85;
}
.table-note{font-size:.82rem;color:var(--ink-soft);margin-top:12px}
/* ---------- module list ---------- */
.module{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;
background:#fff;border:1px solid rgba(227, 221, 208, 0.8);border-left:4px solid var(--gold);
border-radius:14px;padding:24px 28px;box-shadow:var(--shadow-sm);transition:all 0.4s cubic-bezier(0.16, 1, 0.3, 1)}
.module:hover{transform:translateX(6px) translateY(-2px);box-shadow:var(--shadow);border-color:var(--gold-soft)}
.module .tag{font-size:.8rem;font-weight:700;color:var(--gold);letter-spacing:.1em}
.module h3{font-size:1.2rem;color:var(--navy-800);margin:4px 0 6px}
.module p{margin:0;color:var(--ink-soft);font-size:.95rem}
.module .hrs{flex:none;text-align:center;background:var(--paper-2);border-radius:12px;padding:14px 18px;min-width:92px}
.module .hrs b{display:block;font-size:1.5rem;color:var(--blue);font-weight:800}
.module .hrs span{font-size:.78rem;color:var(--ink-soft)}
/* ---------- stat band ---------- */
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;
background:rgba(255, 255, 255, 0.03);border:1px solid rgba(255, 255, 255, 0.08);
border-radius:20px;padding:34px 24px;box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.02)}
.statband .num{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;color:var(--gold-soft)}
.statband .lbl{color:rgba(255,255,255,.78);font-size:.92rem;margin-top:4px}
/* ---------- FAQ ---------- */
.faq{max-width:840px;margin:0 auto}
.faq details{background:#fff;border:1px solid rgba(227, 221, 208, 0.8);border-radius:14px;margin-bottom:14px;box-shadow:var(--shadow-sm);overflow:hidden;transition:all 0.4s cubic-bezier(0.16, 1, 0.3, 1)}
.faq details:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--gold-soft)}
.faq details[open]{border-color:var(--gold);box-shadow:var(--shadow), 0 0 15px rgba(197, 160, 89, 0.05)}
.faq summary{cursor:pointer;padding:20px 26px;font-weight:700;color:var(--navy-800);list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;color:var(--gold);font-weight:400;transition:.3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 26px 22px;margin:0;color:var(--ink-soft)}
/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;color:#fff;text-align:center;padding:84px 0;
background:radial-gradient(120% 160% at 50% 0%,#23416b,var(--navy-800) 60%,var(--navy-900))}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 120%,rgba(200,168,106,.25),transparent 55%)}
.cta-band .container{position:relative;z-index:1}
.cta-band h2{font-size:clamp(1.7rem,3vw,2.4rem)}
.cta-band p{color:rgba(255,255,255,.82);max-width:38em;margin:16px auto 30px}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* ---------- footer ---------- */
.site-footer{background:var(--navy-900);color:rgba(255,255,255,.72);padding:64px 0 28px;font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:42px}
.site-footer h4{color:#fff;font-size:.95rem;margin-bottom:16px;letter-spacing:.04em}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:10px}
.site-footer a:hover{color:var(--gold-soft)}
.site-footer .brand{color:#fff;margin-bottom:14px}
.site-footer .brand small{color:rgba(255,255,255,.6)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:rgba(255,255,255,.6)}
.disclaimer{font-size:.78rem;color:rgba(255,255,255,.58);margin-top:14px;line-height:1.7}
/* ---------- hero data panel ---------- */
.hero-panel{
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
border-radius:24px;padding:28px;backdrop-filter:blur(6px);
box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.hero-panel .slogan{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px}
.hero-panel .slogan p{margin:0}
.hero-panel .slogan .s1{font-size:.8rem;color:rgba(255,255,255,.65);font-weight:600}
.hero-panel .slogan .s2{font-size:1.25rem;font-weight:800;color:#fff;margin-top:2px}
.hero-panel .slogan .globe{font-size:2rem;opacity:.85}
.hero-panel .cells{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hero-panel .cell{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:16px;padding:18px}
.hero-panel .cell .v{font-size:1.6rem;font-weight:800;color:var(--gold-soft)}
.hero-panel .cell .v small{font-size:.95rem;font-weight:700}
.hero-panel .cell .t{font-weight:700;color:#fff;font-size:.92rem;margin-top:6px}
.hero-panel .cell .n{font-size:.78rem;color:rgba(255,255,255,.6);margin-top:3px;line-height:1.5}
@media(max-width:480px){.hero-panel .cells{grid-template-columns:1fr}}
/* ---------- image placeholder ---------- */
.img-ph{
position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
min-height:300px;border-radius:var(--radius);border:2px dashed #c9c2b2;
background:repeating-linear-gradient(45deg,#f3f0e9,#f3f0e9 14px,#edeae0 14px,#edeae0 28px);
color:#9a917c;font-weight:600;text-align:center;padding:30px;
}
.img-ph .ph-ic{font-size:2rem;opacity:.55}
.img-ph small{font-weight:500;font-size:.8rem;opacity:.75}
.img-ph--dark{border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.6);
background:repeating-linear-gradient(45deg,rgba(255,255,255,.05),rgba(255,255,255,.05) 14px,rgba(255,255,255,.09) 14px,rgba(255,255,255,.09) 28px)}
.img-ph--sm{min-height:180px}
.img-ph--tall{min-height:420px}
/* ---------- word anatomy (Sleep + -ist) ---------- */
.anatomy {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
margin: 40px 0 24px;
}
.anatomy .piece {
background: #ffffff;
border: 1px solid rgba(223, 199, 155, 0.4);
border-radius: 24px;
padding: 32px 40px;
text-align: center;
box-shadow: 0 20px 40px rgba(7, 12, 20, 0.03), inset 0 0 0 1px #ffffff;
min-width: 190px;
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
}
.anatomy .piece:hover {
transform: translateY(-6px);
box-shadow: 0 30px 60px rgba(7, 12, 20, 0.08), 0 0 0 1px var(--gold-soft);
}
.anatomy .piece b {
display: block;
font-size: 2rem;
color: var(--navy-800);
letter-spacing: -0.01em;
margin-bottom: 8px;
}
.anatomy .piece span {
font-size: 0.92rem;
color: var(--ink-soft);
font-weight: 500;
}
.anatomy .op {
font-size: 2.2rem;
font-weight: 300;
color: var(--gold);
background: linear-gradient(135deg, var(--gold) 0%, #b38b4d 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: 0 8px;
}
.anatomy .piece--result {
background: linear-gradient(145deg, var(--blue) 0%, #1e3b6e 100%);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 24px 48px rgba(42, 79, 143, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
padding: 32px 48px;
min-width: 280px;
}
.anatomy .piece--result:hover {
box-shadow: 0 32px 64px rgba(42, 79, 143, 0.3), 0 0 30px rgba(197, 160, 89, 0.2);
border-color: rgba(223, 199, 155, 0.6);
transform: translateY(-6px);
}
.anatomy .piece--result b {
color: #ffffff;
font-size: 2.2rem;
background: linear-gradient(135deg, #ffffff 0%, var(--gold-soft) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
}
.anatomy .piece--result span {
color: rgba(255, 255, 255, 0.85);
font-weight: 400;
letter-spacing: 0.02em;
}
/* ---------- flow (3-stage logic) ---------- */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:stretch}
.flow .stage{background:#fff;border:1px solid rgba(227, 221, 208, 0.8);border-top:4px solid var(--blue);border-radius:14px;padding:26px;box-shadow:var(--shadow-sm), inset 0 0 0 1px rgba(255,255,255,0.7);transition:all 0.4s cubic-bezier(0.16, 1, 0.3, 1)}
.flow .stage:hover{transform:translateY(-4px);box-shadow:var(--shadow), 0 12px 24px rgba(42, 79, 143, 0.03);border-color:var(--blue-soft)}
.flow .stage .k{font-size:.78rem;font-weight:800;letter-spacing:.14em;color:var(--blue)}
.flow .stage h3{font-size:1.15rem;color:var(--navy-800);margin:8px 0 10px}
.flow .stage ul{margin:0;padding-left:18px;color:var(--ink-soft);font-size:.92rem}
.flow .stage li{margin-bottom:6px}
.flow .stage .rate{display:inline-block;margin-top:12px;background:#f6efdd;color:#9c7b34;font-weight:700;font-size:.85rem;padding:5px 14px;border-radius:999px}
.flow .arrow{align-self:center;color:var(--gold);font-size:1.6rem;font-weight:800}
.flow .stage--gold{border-top-color:var(--gold)}
.flow .stage--gold:hover{border-color:var(--gold-soft);box-shadow:var(--shadow), 0 12px 24px rgba(197, 160, 89, 0.04)}
@media(max-width:900px){
.flow{grid-template-columns:1fr}
.flow .arrow{transform:rotate(90deg);justify-self:center}
}
/* ---------- risk notice ---------- */
.notice-risk{
margin-top:28px;border:1px solid #e3b8b0;background:#fbf1ef;border-radius:16px;
padding:20px 26px;font-size:.92rem;line-height:1.8;color:#7a3b30;
}
.notice-risk strong{color:#5e2c23}
/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
/* ---------- responsive ---------- */
@media(max-width:960px){
.hero-grid,.split{grid-template-columns:1fr;gap:36px}
.split .reverse{order:0}
.grid-4{grid-template-columns:repeat(2,1fr)}
.statband{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
.section{padding:60px 0}
.nav-links{
position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;gap:6px;
background:var(--paper);border-bottom:1px solid var(--line);padding:16px 16px 24px;
transform:translateY(-130%);transition:.32s;box-shadow:var(--shadow)}
.nav-links.open{transform:none}
.nav-links a{padding:14px 14px;border-radius:8px}
.nav-links .nav-cta{margin:12px 0 2px}
.nav-cta .btn{width:100%;justify-content:center}
.nav-toggle{display:block}
.grid-3,.grid-2{grid-template-columns:1fr}
.module{grid-template-columns:1fr;text-align:left}
.module .hrs{justify-self:start}
}
@media(max-width:480px){
.grid-4{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr}
.hero-stats{gap:22px}
}
/* ---------- exam & cert premium design ---------- */
.exam-section {
position: relative;
background: var(--paper);
padding: 96px 0;
}
.exam-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.deco-card {
background: var(--white);
border: 1px solid rgba(227, 221, 208, 0.8);
border-radius: 20px;
padding: 44px 40px;
box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
position: relative;
overflow: hidden;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.deco-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow), 0 12px 24px rgba(42, 79, 143, 0.03);
border-color: var(--blue-soft);
}
.deco-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
}
.deco-card--blue::before {
background: linear-gradient(90deg, var(--blue), var(--blue-soft));
}
.deco-card--gold::before {
background: linear-gradient(90deg, var(--gold), var(--gold-soft));
}
.deco-card .badge-icon {
position: absolute;
top: 35px;
right: 35px;
width: 54px;
height: 54px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
background: var(--paper-2);
color: var(--navy-700);
}
.deco-card--blue .badge-icon {
background: rgba(47, 85, 151, 0.08);
color: var(--blue);
}
.deco-card--gold .badge-icon {
background: rgba(200, 168, 106, 0.12);
color: var(--gold);
}
.card-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 24px 0;
}
.metric-box {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px 10px;
text-align: center;
}
.metric-box .val {
font-size: 1.4rem;
font-weight: 800;
color: var(--navy-800);
display: block;
}
.metric-box .lbl {
font-size: 0.78rem;
color: var(--ink-soft);
margin-top: 4px;
display: block;
}
.list-styled {
list-style: none;
padding: 0;
margin: 0 0 24px 0;
}
.list-styled li {
position: relative;
padding-left: 28px;
margin-bottom: 14px;
font-size: 0.96rem;
color: var(--ink-soft);
line-height: 1.6;
}
.list-styled li::before {
content: "";
position: absolute;
left: 0;
top: 6px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--blue);
display: flex;
align-items: center;
justify-content: center;
}
.list-styled li::after {
content: "✓";
position: absolute;
left: 4px;
top: 4px;
font-size: 0.62rem;
color: #fff;
font-weight: 800;
}
.deco-card--gold .list-styled li::before {
background: var(--gold);
}
.card-highlight-box {
background: var(--paper);
border-left: 4px solid var(--gold);
border-radius: 8px;
padding: 16px 20px;
font-size: 0.92rem;
color: var(--navy-800);
margin-top: auto;
display: flex;
align-items: flex-start;
gap: 10px;
}
.card-highlight-box p {
margin: 0;
line-height: 1.5;
}
.card-highlight-box .icon {
font-size: 1.2rem;
flex-shrink: 0;
}
@media(max-width:960px){
.exam-grid {
grid-template-columns: 1fr;
gap: 30px;
}
}
@media(max-width:760px){
.deco-card {
padding: 30px 24px;
}
.deco-card .badge-icon {
top: 24px;
right: 24px;
width: 44px;
height: 44px;
font-size: 1.25rem;
}
.card-metrics {
grid-template-columns: 1fr;
gap: 10px;
}
.metric-box {
padding: 12px 10px;
}
}
/* ==========================================================================
INTERNATIONAL / ENGLISH VERSION DECORATIONS & TYPESETTING
========================================================================== */
/* 1. Side-by-Side Comparison Cards (Replacing Dense Tables) */
.comparison-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
max-width: 960px;
margin: 40px auto 0;
align-items: stretch;
}
.comp-card {
background: var(--white);
border: 1px solid rgba(227, 221, 208, 0.8);
border-radius: 24px;
padding: 44px 36px;
box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
position: relative;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s;
display: flex;
flex-direction: column;
}
.comp-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow), 0 12px 24px rgba(42, 79, 143, 0.03);
border-color: var(--blue-soft);
}
.comp-card-head {
margin-bottom: 28px;
border-bottom: 1px solid var(--line);
padding-bottom: 20px;
}
.comp-card-head h3 {
font-size: 1.6rem;
color: var(--navy-800);
margin-bottom: 6px;
}
.comp-card-head .desc {
font-size: 0.95rem;
color: var(--ink-soft);
}
.comp-features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.comp-features li {
position: relative;
padding-left: 28px;
font-size: 0.94rem;
line-height: 1.5;
}
.comp-features li::before {
position: absolute;
left: 0;
top: 2px;
font-size: 1rem;
font-weight: 700;
}
.comp-features li.yes {
color: var(--ink);
}
.comp-features li.yes::before {
content: "✓";
color: var(--blue);
}
.comp-features li.no {
color: var(--ink-soft);
}
.comp-features li.no::before {
content: "✕";
color: #a0a0a0;
font-size: 0.85rem;
}
/* Premium Sleepist Card Highlights */
.comp-card--premium {
background: var(--navy-800);
border-color: rgba(223, 199, 155, 0.4);
color: rgba(255, 255, 255, 0.9);
box-shadow: 0 20px 50px rgba(7, 12, 20, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s;
}
.comp-card--premium:hover {
transform: translateY(-6px);
border-color: var(--gold);
box-shadow: 0 30px 60px rgba(7, 12, 20, 0.25), 0 0 20px rgba(197, 160, 89, 0.15);
}
.comp-card--premium .comp-card-head {
border-bottom-color: rgba(255, 255, 255, 0.12);
}
.comp-card--premium .comp-card-head h3 {
color: var(--gold-soft);
}
.comp-card--premium .comp-card-head .desc {
color: rgba(255, 255, 255, 0.7);
}
.comp-card--premium .comp-features li.yes {
color: rgba(255, 255, 255, 0.95);
}
.comp-card--premium .comp-features li.yes::before {
color: var(--gold-soft);
}
.comp-card--premium .popular-tag {
position: absolute;
top: -14px;
right: 32px;
background: linear-gradient(135deg, var(--gold), #b8924f);
color: #1a1206;
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 6px 16px;
border-radius: 999px;
box-shadow: 0 4px 12px rgba(200, 168, 106, 0.3);
}
/* 2. Program Grid (Replacing the Dense 4-Course Table) */
.program-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 40px;
}
.program-card {
background: var(--white);
border: 1px solid rgba(227, 221, 208, 0.8);
border-radius: 20px;
padding: 36px 28px;
box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
display: flex;
flex-direction: column;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s;
}
.program-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow), 0 12px 24px rgba(42, 79, 143, 0.03);
border-color: var(--blue-soft);
}
.program-tag {
align-self: flex-start;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 4px 10px;
border-radius: 6px;
background: var(--paper-2);
color: var(--ink-soft);
margin-bottom: 18px;
}
.program-card h3 {
font-size: 1.3rem;
color: var(--navy-800);
margin-bottom: 12px;
line-height: 1.3;
}
.program-meta {
margin-bottom: 20px;
font-size: 0.88rem;
color: var(--ink-soft);
display: flex;
flex-direction: column;
gap: 4px;
}
.program-meta span b {
color: var(--navy-700);
}
.program-desc {
font-size: 0.92rem;
color: var(--ink-soft);
line-height: 1.6;
margin-bottom: 24px;
flex-grow: 1;
}
.program-benefits {
list-style: none;
padding: 0;
margin: 0 0 28px 0;
border-top: 1px solid var(--line);
padding-top: 18px;
display: flex;
flex-direction: column;
gap: 10px;
font-size: 0.88rem;
}
.program-benefits li {
position: relative;
padding-left: 22px;
color: var(--ink);
}
.program-benefits li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--blue);
font-weight: 800;
}
.program-card .btn {
margin-top: auto;
width: 100%;
justify-content: center;
}
@media(max-width: 1100px) {
.program-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media(max-width: 600px) {
.comparison-cards {
grid-template-columns: 1fr;
}
.program-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
PREMIUM MISSION SHOWCASE
========================================================================== */
.mission-showcase {
position: relative;
padding: 110px 0;
background: #ffffff;
overflow: hidden;
border-top: 1px solid rgba(197, 160, 89, 0.15);
border-bottom: 1px solid rgba(197, 160, 89, 0.15);
}
/* Background decorative circles */
.mission-showcase::before {
content: "";
position: absolute;
top: -100px;
right: -100px;
width: 500px;
height: 500px;
border-radius: 50%;
background: radial-gradient(circle, rgba(197, 160, 89, 0.05) 0%, transparent 70%);
z-index: 0;
}
.mission-showcase::after {
content: "";
position: absolute;
bottom: -150px;
left: -150px;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(42, 79, 143, 0.05) 0%, transparent 70%);
z-index: 0;
}
.mission-showcase-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.mission-text {
position: relative;
}
.mission-text .eyebrow {
margin-bottom: 20px;
}
.mission-text h2 {
font-size: clamp(2.4rem, 4vw, 3.4rem);
color: var(--navy-800);
margin-bottom: 32px;
letter-spacing: 0.01em;
}
.mission-text .lead {
font-size: 1.15rem;
color: var(--ink);
line-height: 1.8;
margin-bottom: 24px;
}
.mission-text .sub-lead {
font-size: 1.05rem;
color: var(--ink-soft);
line-height: 1.7;
margin-bottom: 48px;
}
.mission-features {
display: flex;
flex-direction: column;
gap: 24px;
}
.m-feat-card {
display: flex;
align-items: flex-start;
gap: 24px;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 24px;
padding: 32px 36px;
box-shadow: 0 10px 40px rgba(7, 12, 20, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
z-index: 1;
}
.m-feat-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
z-index: -1;
opacity: 0;
transition: opacity 0.5s;
}
.m-feat-card:hover {
transform: translateX(-10px) translateY(-5px);
background: #fff;
border-color: rgba(197, 160, 89, 0.4);
box-shadow: 0 24px 48px rgba(7, 12, 20, 0.08), 0 0 30px rgba(197, 160, 89, 0.08);
}
.m-feat-card:hover::before {
opacity: 1;
}
.m-feat-ic {
width: 64px;
height: 64px;
border-radius: 18px;
background: linear-gradient(135deg, #f8f6f0, #e8dfc8);
color: #9c7b34;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
flex-shrink: 0;
box-shadow: 0 8px 16px rgba(197, 160, 89, 0.15), inset 0 1px 0 #fff;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.5s, color 0.5s;
}
.m-feat-card:hover .m-feat-ic {
transform: scale(1.1) rotate(8deg);
background: linear-gradient(135deg, var(--gold-soft), var(--gold));
color: #fff;
box-shadow: 0 12px 24px rgba(197, 160, 89, 0.3);
}
.m-feat-content h3 {
font-size: 1.3rem;
color: var(--navy-800);
margin-bottom: 10px;
font-weight: 700;
transition: color 0.3s;
}
.m-feat-card:hover .m-feat-content h3 {
color: var(--gold);
}
.m-feat-content p {
font-size: 0.98rem;
color: var(--ink-soft);
margin: 0;
line-height: 1.6;
}
@media(max-width: 960px) {
.mission-showcase-inner {
grid-template-columns: 1fr;
gap: 50px;
}
.m-feat-card:hover {
transform: translateY(-8px);
}
}
/* Flagship Program Card Highlight */
.program-card--highlight {
background: var(--navy-800);
border-color: rgba(197, 160, 89, 0.4);
color: rgba(255, 255, 255, 0.85);
transform: scale(1.02);
box-shadow: 0 20px 45px rgba(7, 12, 20, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s;
}
.program-card--highlight:hover {
transform: scale(1.02) translateY(-7px);
border-color: var(--gold);
box-shadow: 0 30px 60px rgba(7, 12, 20, 0.25), 0 0 20px rgba(197, 160, 89, 0.15);
}
.program-card--highlight h3 {
color: var(--gold-soft);
}
.program-card--highlight .program-meta span b {
color: #fff;
}
.program-card--highlight .program-tag {
background: rgba(197, 160, 89, 0.15);
color: var(--gold-soft);
}
.program-card--highlight .program-benefits {
border-top-color: rgba(255, 255, 255, 0.15);
}
.program-card--highlight .program-benefits li {
color: rgba(255, 255, 255, 0.9);
}
.program-card--highlight .program-benefits li::before {
color: var(--gold-soft);
}
/* ==========================================================================
PREMIUM PILLARS SHOWCASE (3 Pillars)
========================================================================== */
.pillars-showcase {
position: relative;
background: var(--paper);
padding: 100px 0; /* Added proper vertical padding */
}
.pillars-showcase .section-head {
margin-bottom: 72px; /* Increased spacing between header and grid */
}
.pillars-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
position: relative;
z-index: 2;
}
.pillar-premium-card {
background: var(--white);
border-radius: 24px;
padding: 46px 40px;
position: relative;
overflow: hidden;
border: 1px solid rgba(227, 221, 208, 0.8);
box-shadow: 0 10px 40px rgba(7, 12, 20, 0.03), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
flex-direction: column;
}
.pillar-premium-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--gold), var(--gold-soft));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.pillar-premium-card:hover {
transform: translateY(-8px);
box-shadow: 0 24px 50px rgba(7, 12, 20, 0.06), 0 0 20px rgba(197, 160, 89, 0.08);
border-color: rgba(197, 160, 89, 0.3);
}
.pillar-premium-card:hover::before {
transform: scaleX(1);
}
.pillar-num-decor {
font-size: 3rem; /* Reduced from 4rem for better balance */
font-weight: 300;
line-height: 1;
color: var(--gold-soft);
margin-bottom: 20px; /* Adjusted spacing */
font-family: "Outfit", sans-serif;
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
display: inline-block;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(135deg, var(--gold), #d4af6d);
}
.pillar-num-decor::after {
content: "";
position: absolute;
left: 0;
bottom: -10px;
width: 24px; /* Slightly narrower initial underline */
height: 2px;
background: var(--gold);
transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.pillar-premium-card:hover .pillar-num-decor {
transform: translateX(6px);
}
.pillar-premium-card:hover .pillar-num-decor::after {
width: 100%;
}
.pillar-premium-card h3 {
font-size: 1.3rem; /* Toned down slightly */
color: var(--navy-800);
margin-bottom: 14px;
line-height: 1.4;
position: relative;
z-index: 2;
}
.pillar-premium-card p {
font-size: 0.98rem; /* Toned down slightly */
color: var(--ink-soft);
margin: 0;
line-height: 1.6;
flex-grow: 1;
position: relative;
z-index: 2;
}
/* Premium Card Structural Elements */
.pillar-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
position: relative;
z-index: 2;
}
.pillar-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(197, 160, 89, 0.05);
color: var(--gold);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(197, 160, 89, 0.15);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pillar-stage {
font-family: "Outfit", sans-serif;
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.15em;
color: var(--gold);
}
.pillar-divider {
width: 100%;
height: 1px;
background: linear-gradient(90deg, rgba(197,160,89,0.2) 0%, transparent 100%);
margin-bottom: 24px;
position: relative;
z-index: 2;
transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pillar-premium-card:hover .pillar-icon {
background: var(--gold);
color: #fff;
transform: scale(1.1) rotate(5deg);
box-shadow: 0 10px 20px rgba(197, 160, 89, 0.25);
border-color: transparent;
}
.pillar-premium-card:hover .pillar-divider {
background: linear-gradient(90deg, rgba(197,160,89,0.6) 0%, transparent 100%);
}
/* Background large watermarked number */
.pillar-premium-card .bg-num {
position: absolute;
right: -5px;
bottom: -20px;
font-size: 9rem; /* Reduced from 12rem */
font-weight: 800;
color: rgba(197, 160, 89, 0.03); /* Lighter opacity */
font-family: "Outfit", sans-serif;
line-height: 1;
pointer-events: none;
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 1;
}
.pillar-premium-card:hover .bg-num {
color: rgba(197, 160, 89, 0.06);
transform: scale(1.05) rotate(-3deg);
}
@media(max-width: 960px) {
.pillars-grid {
grid-template-columns: 1fr;
gap: 24px;
}
}
/* ==========================================================================
PREMIUM IDENTITY SHOWCASE (Why Sleepist)
========================================================================== */
.identity-showcase {
position: relative;
background: #f4f6f9;
color: var(--ink);
padding: 130px 0;
overflow: hidden;
border-top: 1px solid rgba(0, 0, 0, 0.03);
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
z-index: 1;
}
/* Atmospheric glowing orbs in the background */
.identity-showcase::before {
content: "";
position: absolute;
top: -20%; left: -10%;
width: 60%; height: 60%;
background: radial-gradient(circle, rgba(42, 79, 143, 0.06) 0%, transparent 60%);
filter: blur(60px);
z-index: -1;
pointer-events: none;
}
.identity-showcase::after {
content: "";
position: absolute;
bottom: -20%; right: -10%;
width: 60%; height: 60%;
background: radial-gradient(circle, rgba(197, 160, 89, 0.06) 0%, transparent 60%);
filter: blur(60px);
z-index: -1;
pointer-events: none;
}
.identity-showcase .section-head {
margin-bottom: 72px;
}
.identity-showcase .section-head h2 {
color: var(--navy-800);
}
.identity-showcase .section-head p {
color: var(--ink-soft);
}
.identity-showcase .eyebrow {
color: var(--gold);
}
.identity-showcase .eyebrow::before {
background: var(--gold);
}
.identity-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
position: relative;
z-index: 2;
}
/* Glassmorphism-lite cards */
.id-card {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-radius: 24px;
padding: 40px 36px;
box-shadow:
0 10px 40px rgba(7, 12, 20, 0.04),
inset 0 0 0 1px rgba(255, 255, 255, 1),
inset 0 2px 4px rgba(255, 255, 255, 0.8);
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.id-card::before {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
opacity: 0;
transition: opacity 0.5s;
z-index: 0;
pointer-events: none;
}
/* Typography Accent (replaces icons) */
.id-card h3 {
font-size: 1.4rem;
color: var(--navy-800);
margin-bottom: 16px;
padding-top: 28px;
position: relative;
z-index: 2;
letter-spacing: -0.01em;
}
.id-card h3::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 2px;
background: var(--blue);
transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.id-card:hover h3::before {
width: 60px;
}
.id-card--gold h3::before {
background: var(--gold);
}
.id-card p {
font-size: 0.98rem;
color: var(--ink-soft);
margin: 0;
line-height: 1.6;
position: relative;
z-index: 2;
}
/* Hover Effects */
.id-card:hover {
transform: translateY(-8px);
background: rgba(255, 255, 255, 0.9);
box-shadow:
0 24px 50px rgba(7, 12, 20, 0.08),
inset 0 0 0 1px rgba(255, 255, 255, 1),
inset 0 2px 4px rgba(255, 255, 255, 0.9);
}
.id-card:hover::before {
opacity: 1;
}
/* Gold Variant */
.id-card--gold {
background: rgba(255, 255, 255, 0.7);
}
.id-card--gold:hover {
background: rgba(255, 255, 255, 0.9);
box-shadow:
0 24px 50px rgba(197, 160, 89, 0.08),
inset 0 0 0 1px rgba(255, 255, 255, 1),
inset 0 2px 4px rgba(255, 255, 255, 0.9);
}
@media(max-width: 960px) {
.identity-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media(max-width: 600px) {
.identity-grid {
grid-template-columns: 1fr;
}
}
.program-card--highlight .program-tag {
background: var(--gold);
color: #1a1206;
}
.program-card--highlight .program-meta {
color: rgba(255, 255, 255, 0.7);
}
.program-card--highlight .program-meta span b {
color: var(--gold-soft);
}
.program-card--highlight .program-desc {
color: rgba(255, 255, 255, 0.8);
}
.program-card--highlight .program-benefits {
border-top-color: rgba(255, 255, 255, 0.12);
}
.program-card--highlight .program-benefits li {
color: rgba(255, 255, 255, 0.9);
}
.program-card--highlight .program-benefits li::before {
color: var(--gold-soft);
}
/* 3. Eastern Wisdom Nodes (Interactive Floating Layout) */
.wisdom-visual {
background: var(--white);
border: 1px solid var(--line);
border-radius: 24px;
padding: 40px;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: 28px;
}
.wisdom-node {
display: flex;
align-items: flex-start;
gap: 20px;
padding-bottom: 24px;
border-bottom: 1px solid var(--paper-2);
}
.wisdom-node:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.wisdom-icon-circle {
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(200, 168, 106, 0.1);
color: var(--gold);
font-size: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-weight: 700;
box-shadow: 0 4px 12px rgba(200, 168, 106, 0.1);
}
.wisdom-node h4 {
font-size: 1.15rem;
color: var(--navy-800);
margin-bottom: 4px;
}
.wisdom-node p {
font-size: 0.94rem;
color: var(--ink-soft);
margin: 0;
}
/* Responsive Overrides */
@media(max-width:960px) {
.comparison-cards {
grid-template-columns: 1fr;
gap: 24px;
}
.program-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.program-card--highlight {
transform: none;
}
.program-card--highlight:hover {
transform: translateY(-5px);
}
}
@media(max-width:600px) {
.program-grid {
grid-template-columns: 1fr;
}
.comp-card {
padding: 32px 24px;
}
}
/* ===== icon-refresh v2 : refined iconography & celestial decor ===== */
.ic svg{width:24px;height:24px;display:block}
.card .ic{background:linear-gradient(160deg,#eef3f9,#e1e9f3);box-shadow:inset 0 0 0 1px rgba(47,85,151,.10)}
.card--gold .ic{background:linear-gradient(160deg,#f7efda,#efe0ba);box-shadow:inset 0 0 0 1px rgba(184,146,79,.20)}
.badge-icon svg{width:30px;height:30px}
.card-highlight-box .icon{display:inline-grid;place-items:center}
.card-highlight-box .icon svg{width:22px;height:22px}
/* hero-panel crescent (replaces former globe emoji) */
.hero-panel .slogan .globe{display:grid;place-items:center;color:var(--gold-soft);opacity:.95}
.hero-panel .slogan .globe svg{width:42px;height:42px}
/* refined brand mark : subtle gold inner ring */
.brand .mark{box-shadow:0 6px 16px rgba(47,85,151,.40),inset 0 0 0 1.5px rgba(225,201,143,.45)}
/* subtle night-sky starfield for dark sections */
.hero,.page-banner,.cta-band{position:relative;overflow:hidden}
.hero::before,.page-banner::before,.cta-band::before{
content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;
background-repeat:no-repeat;
background-image:
radial-gradient(1.4px 1.4px at 14% 22%,rgba(225,201,143,.9),transparent),
radial-gradient(1px 1px at 26% 68%,rgba(255,255,255,.7),transparent),
radial-gradient(1px 1px at 41% 30%,rgba(255,255,255,.6),transparent),
radial-gradient(1.3px 1.3px at 57% 58%,rgba(255,255,255,.7),transparent),
radial-gradient(1px 1px at 67% 24%,rgba(225,201,143,.7),transparent),
radial-gradient(1px 1px at 80% 50%,rgba(255,255,255,.65),transparent),
radial-gradient(1px 1px at 90% 30%,rgba(255,255,255,.55),transparent),
radial-gradient(1px 1px at 33% 85%,rgba(255,255,255,.5),transparent),
radial-gradient(1.2px 1.2px at 73% 80%,rgba(225,201,143,.55),transparent),
radial-gradient(1px 1px at 50% 13%,rgba(255,255,255,.6),transparent);
}
/* gold-chip icon stroke contrast fix */
.card--gold .ic{color:#6f5420}
/* ===== banner / hero image slots (replaceable) ===== */
.hero,.page-banner{position:relative}
.banner-media{position:absolute;inset:0;z-index:1;background-position:center;background-size:cover;background-repeat:no-repeat}
.banner-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,18,32,.30) 0%,rgba(10,18,32,.52) 100%)}
.hero .container,.page-banner .container{position:relative;z-index:2}
/* Temporarily hide WST-I entry points without deleting the system pages. */
.nav-links li:has(> a[href="system.html"]),
.nav-links li:has(> a[href="../system.html"]),
.nav-links li:has(> a[href="cn/system.html"]),
.site-footer li:has(> a[href="system.html"]),
.site-footer li:has(> a[href="../system.html"]),
.site-footer li:has(> a[href="cn/system.html"]),
.cta-band a[href="system.html"],
.cta-band a[href="../system.html"],
.cta-band a[href="cn/system.html"],
a.lang-switch[href="system.html"],
a.lang-switch[href="../system.html"],
a.lang-switch[href="cn/system.html"]{
display:none !important;
}
/* ==========================================================================
HOMEPAGE CUSTOM CORE CARDS STYLING UPGRADES (RICH AESTHETICS)
========================================================================== */
/* --- Pillar Cards : 课程定位三支柱 --- */
.card--pillar {
position: relative;
background: linear-gradient(180deg, #ffffff 0%, #faf9f6 100%);
box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(197, 160, 89, 0.12);
}
.card--pillar .ic {
display: none !important; /* 精简小图标 */
}
.card--pillar .pillar-num {
position: static; /* 调整为流式布局顶部置顶 */
display: block;
font-size: 2.2rem;
font-weight: 300; /* 纤细的 Outfit 字体大数字 */
color: var(--gold);
opacity: 0.85;
font-family: "Outfit", sans-serif;
line-height: 1;
margin-bottom: 20px;
transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.card--pillar:hover {
border-color: var(--gold);
box-shadow: var(--shadow), 0 16px 36px rgba(197, 160, 89, 0.12);
}
.card--pillar:hover .pillar-num {
opacity: 1;
transform: translateY(-2px) scale(1.03);
color: var(--gold-soft);
}
/* --- Identity Cards : 专业身份 --- */
.card--identity {
position: relative;
background: #ffffff;
}
.card--identity .ic {
display: none !important; /* 精简小图标 */
}
.card--identity::before {
content: "";
display: block;
width: 30px;
height: 2px;
background: var(--blue-soft);
margin-bottom: 24px;
transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s;
}
.card--identity.card--gold::before {
background: var(--gold);
}
.card--identity:hover::before {
width: 55px;
background: var(--blue);
}
.card--identity.card--gold:hover::before {
background: var(--gold-soft);
}
.card--identity.card--gold:hover {
border-color: var(--gold-soft);
box-shadow: var(--shadow), 0 16px 36px rgba(197, 160, 89, 0.08);
}
/* --- Mission Cards : 使命维度 --- */
.card--mission {
background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%);
border-color: rgba(215, 222, 230, 0.7);
box-shadow: 0 8px 24px rgba(42, 79, 143, 0.02);
}
.card--mission .ic {
display: none !important; /* 精简小图标 */
}
.card--mission::before {
content: "◆";
display: block;
font-size: 0.9rem;
color: var(--blue-soft);
margin-bottom: 16px;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s;
}
.card--mission:hover {
border-color: var(--blue-soft);
box-shadow: var(--shadow), 0 16px 36px rgba(42, 79, 143, 0.06);
}
.card--mission:hover::before {
color: var(--gold);
transform: scale(1.15) rotate(45deg);
}
/* --- Partner Cards : 联合发布机构 --- */
.card--partner {
position: relative;
border: 1px double rgba(227, 221, 208, 0.9);
background: #ffffff;
}
.card--partner .ic {
display: none !important; /* 精简小图标 */
}
.card--partner::before {
content: "✦";
display: block;
font-size: 1.15rem;
color: var(--gold);
margin-bottom: 16px;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s;
}
.card--partner:hover {
border-color: var(--gold-soft);
background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
box-shadow: var(--shadow), 0 16px 36px rgba(19, 35, 61, 0.04);
}
.card--partner:hover::before {
transform: rotate(180deg) scale(1.08);
color: var(--gold-soft);
}
/* ==========================================================================
ORGANIZATIONS SHOWCASE (Partners)
========================================================================== */
.org-showcase {
background: var(--paper);
padding: 120px 0;
position: relative;
}
.org-showcase .section-head {
margin-bottom: 72px;
}
.org-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.org-card {
background: #ffffff;
border-radius: 16px;
padding: 48px 40px;
box-shadow:
0 10px 40px rgba(7, 12, 20, 0.03),
inset 0 0 0 1px rgba(0, 0, 0, 0.03);
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* Elegant top gold border */
.org-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, var(--gold), var(--gold-soft));
opacity: 0.6;
transition: opacity 0.5s, height 0.5s;
}
.org-card h3, .org-content h3 {
font-size: 1.4rem;
color: var(--navy-800);
margin-bottom: 24px;
line-height: 1.3;
position: relative;
padding-bottom: 20px;
min-height: calc(1.4rem * 1.3 * 2 + 20px);
}
/* Decorative line separator instead of an icon */
.org-card h3::after, .org-content h3::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background: var(--gold);
transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.org-card p, .org-content p {
font-size: 1rem;
color: var(--ink-soft);
margin: 0;
line-height: 1.7;
}
/* Hover effect */
.org-card:hover {
transform: translateY(-8px);
box-shadow:
0 24px 50px rgba(7, 12, 20, 0.06),
inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.org-card:hover::before {
opacity: 1;
height: 6px;
}
.org-card:hover h3::after {
width: 60px;
}
@media(max-width: 1024px) {
.org-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media(max-width: 600px) {
.org-grid {
grid-template-columns: 1fr;
}
}
/* ===== homepage : refined decoration (大气) ===== */
.home .section{padding:104px 0}
.home .section-head{max-width:820px;margin-bottom:58px}
.home .section-head h2{font-size:clamp(2rem,3.4vw,2.9rem);letter-spacing:.004em}
.home .section-head p{font-size:1.08rem;margin-top:18px}
.home .section-head .eyebrow{justify-content:center;letter-spacing:.26em}
.home .section-head .eyebrow::after{content:"";width:26px;height:1px;background:var(--gold)}
.home .card{padding:34px 30px;border-radius:18px}
.home .card--pillar{padding-top:32px}
.home .card--pillar .pillar-num{font-size:2.7rem;margin-bottom:20px}
.home .card--pillar .pillar-num::after{content:"";display:block;width:36px;height:2px;background:linear-gradient(90deg,var(--gold),rgba(200,168,106,0));margin-top:16px}
.home .card--identity::before{height:2px}
.home .card--partner{border:1px solid var(--line)}
.home .card--partner::before{font-size:1.05rem}
/* partner section : role tags instead of star */
.home .card--partner::before{content:none}
.home .card--partner{padding-top:30px}
.partner-tag{display:inline-block;font-size:.66rem;letter-spacing:.18em;font-weight:700;color:var(--gold);background:rgba(200,168,106,.10);border:1px solid rgba(200,168,106,.34);padding:5px 12px;border-radius:999px;margin-bottom:18px;font-family:"Outfit",sans-serif}
.home .card--partner:hover .partner-tag{background:rgba(200,168,106,.18);border-color:var(--gold)}
/* ===== site-wide refined decoration (extend homepage elegance to all pages) ===== */
.section-head:not(.left) .eyebrow{justify-content:center;letter-spacing:.26em}
.section-head:not(.left) .eyebrow::after{content:"";width:26px;height:1px;background:var(--gold)}
.section-head h2{font-size:clamp(1.95rem,3.3vw,2.8rem);letter-spacing:.004em}
.section-head{max-width:820px}
.section{padding:100px 0}
.section--tight{padding:64px 0}
.card{border-radius:18px}
.page-banner h1{letter-spacing:.01em}
/* ==========================================================================
✦ LUXURY REFINEMENT LAYER ✦ —— 全站高端大气装饰升级
仅增强视觉质感（衬线标题 / 鎏金细节 / 纸张肌理 / 深邃光影），
不改动任何页面的结构与布局。中 / 英 / 根目录三套页面共享此层。
========================================================================== */
:root{
--font-display:"Noto Serif","Noto Serif SC","Source Han Serif SC","Songti SC","STSong",Georgia,serif;
--gold-metal:linear-gradient(135deg,#efdcab 0%,#cba85f 32%,#9c7b34 56%,#e6cd96 100%);
--gold-line:linear-gradient(90deg,rgba(197,160,89,0),rgba(197,160,89,.7) 50%,rgba(197,160,89,0));
/* 更深邃柔和的高级光影 */
--shadow:0 34px 76px rgba(10,18,32,.10),0 10px 26px rgba(10,18,32,.05);
--shadow-sm:0 16px 46px rgba(10,18,32,.06);
}
/* ---- 暖象牙底 + 极轻纸张颗粒，整站统一质感 ---- */
body{
background:radial-gradient(125% 90% at 50% -8%,#fffdf8 0%,var(--paper) 48%) fixed;
}
body::after{
content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.028;
background-image:url("data:image/svg+xml;utf8,");
}
/* ---- 标题改用高级衬线体，中英双语皆显典雅大气 ---- */
.hero h1,
.page-banner h1,
.section-head h2,
.cta-band h2,
.mission-text h2,
.split h2,
.comp-card-head h3,
.org-content h3,
.deco-card h2,
.faq summary{
font-family:var(--font-display);
letter-spacing:.012em;
}
.hero h1,
.page-banner h1,
.section-head h2,
.cta-band h2,
.mission-text h2,
.split h2{font-weight:600}
.hero h1{font-size:clamp(2.5rem,4.9vw,4rem);line-height:1.16}
.cta-band h2{font-size:clamp(2rem,3.4vw,2.9rem)}
.faq summary{font-size:1.12rem;letter-spacing:.005em}
/* 关键数字采用衬线古典字形，编辑级精致感 */
.hero-stats .num,.statband .num,.hero-panel .cell .v,
.metric-box .val,.module .hrs b{
font-family:var(--font-display);font-weight:600;letter-spacing:.01em;
}
/* ---- Eyebrow：鎏金质感 + 更舒朗的字距 ---- */
.eyebrow{
letter-spacing:.3em;font-weight:600;font-size:.74rem;
background:var(--gold-metal);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
.eyebrow::before,.eyebrow::after{background:var(--gold) !important}
/* Hero 中的高亮词 —— 鎏金描边 */
.hero h1 .accent{
background:var(--gold-metal);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
/* ---- 标题下的古典鎏金分隔徽记（菱形 + 细线）---- */
.section-head:not(.left) h2{position:relative;padding-bottom:30px}
.section-head:not(.left) h2::after{
content:"";position:absolute;left:50%;bottom:13px;transform:translateX(-50%);
width:66px;height:1px;background:var(--gold);opacity:.85;
}
.section-head:not(.left) h2::before{
content:"";position:absolute;left:50%;bottom:9px;transform:translateX(-50%) rotate(45deg);
width:8px;height:8px;background:var(--gold);z-index:1;
}
.section-head.left h2{position:relative;padding-bottom:24px}
.section-head.left h2::after{
content:"";position:absolute;left:0;bottom:10px;width:54px;height:1px;background:var(--gold);opacity:.85;
}
.section-head.left h2::before{
content:"";position:absolute;left:0;bottom:6px;width:8px;height:8px;background:var(--gold);transform:rotate(45deg);z-index:1;
}
/* ---- 鎏金按钮：金属渐变 + 掠光 ---- */
.btn{letter-spacing:.03em}
.btn--gold{
background:var(--gold-metal);color:#2a1c06;position:relative;overflow:hidden;
box-shadow:0 12px 28px rgba(197,160,89,.30),inset 0 1px 0 rgba(255,255,255,.55);
}
.btn--gold::after{
content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
transform:skewX(-18deg);transition:left .75s cubic-bezier(.16,1,.3,1);
}
.btn--gold:hover::after{left:140%}
.btn--gold:hover{box-shadow:0 18px 40px rgba(197,160,89,.42)}
/* ---- 顶栏：鎏金细线 + 衬线品牌字 + 导航悬停金线 ---- */
.site-header{border-bottom:1px solid rgba(197,160,89,.16)}
.site-header::after{
content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold-line);
}
.brand{font-family:var(--font-display);font-weight:700;font-size:1.18rem;letter-spacing:.02em}
.brand small{font-family:var(--font);font-weight:600;letter-spacing:.14em}
.brand .mark{font-family:var(--font)}
.nav-links a:not(.btn){position:relative}
.nav-links a:not(.btn)::after{
content:"";position:absolute;left:14px;right:14px;bottom:3px;height:1px;
background:var(--gold);opacity:.85;transform:scaleX(0);transform-origin:left;
transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn).active::after{transform:scaleX(1)}
/* ---- Hero 数据面板：内嵌鎏金细框 ---- */
.hero-panel{box-shadow:0 38px 84px rgba(0,0,0,.45),inset 0 0 0 1px rgba(225,201,143,.22)}
/* ---- 深色区块：上下鎏金细线，更显庄重大气 ---- */
.cta-band{border-top:1px solid rgba(197,160,89,.22);border-bottom:1px solid rgba(197,160,89,.22)}
/* ---- 页脚：顶部鎏金细线 + 衬线金色小标题 ---- */
.site-footer{position:relative}
.site-footer::before{
content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--gold-line);
}
.site-footer h4{
font-family:var(--font-display);font-weight:600;font-size:1.08rem;
letter-spacing:.05em;color:var(--gold-soft);
}
/* ---- 正文导语：纤细字重更显高级 ---- */
.lead{font-weight:300}
/* ---- 更舒朗的版面留白（大气） ---- */
.section{padding:112px 0}
.home .section{padding:120px 0}
@media(max-width:760px){
.section,.home .section,.pillars-showcase,.identity-showcase,.mission-showcase,.org-showcase,.exam-section{padding:66px 0}
.hero h1{font-size:clamp(2rem,8vw,2.6rem)}
}
/* ==========================================================================
✦ DECLUTTER + PALETTE REFINEMENT ✦ —— 精简图标 · 收敛配色 · 优化排版
去除 emoji 与廉价图标，统一鎏金质感；蓝色更深邃克制，整体更高端大气。
========================================================================== */
/* ---- 配色收敛：把偏鲜艳的企业蓝压深，提升高级感 ---- */
:root{
--blue:#2a4a73; /* 更深邃克制的藏青蓝（原 #2a4f8f 偏鲜亮） */
--blue-soft:#4a6c93;
--ink:#1b242f;
--ink-soft:#586575;
--line:#e8e2d4; /* 描边略微偏暖，呼应象牙底 */
}
/* ---- 卡片图标块（.ic）：废弃难看的全宽渐变色条 ----
改为克制的鎏金「眉标签」，让文字与留白主导版面（高端编辑感）。 */
.card .ic,
.navy-bg .card .ic{
background:none !important;box-shadow:none !important;
width:auto;height:auto;min-width:0;border-radius:0;padding:0;
display:inline-flex;align-items:center;line-height:1;margin:0 0 16px;
font-family:"Outfit","Inter",sans-serif;
font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
color:var(--gold);
}
.navy-bg .card .ic{color:var(--gold-soft)}
/* 清空后的图标容器、地球符号、徽记圆环：直接隐去，保持洁净 */
.ic:empty,
.badge-icon:empty,
.hero-panel .slogan .globe:empty,
.hero-panel .slogan .globe{display:none !important}
/* 已有鎏金眉标签时，省去 h3 上方重复的小金线 */
.card .ic:not(:empty) + h3{padding-top:0}
.card .ic:not(:empty) + h3::before{display:none}
/* ---- 首页三支柱：移除与「STAGE 0X + 大号水印数字」重复的线框图标 ---- */
.pillar-icon{display:none}
.pillar-header{gap:0;margin-bottom:18px}
.pillar-stage{font-size:.8rem;letter-spacing:.22em}
/* ---- 使命卡图标：由厚重金块改为克制的描金线框，更典雅 ---- */
.m-feat-ic{
width:54px;height:54px;border-radius:14px;
background:rgba(197,160,89,.08);color:var(--gold);
box-shadow:inset 0 0 0 1px rgba(197,160,89,.30);
font-size:1.5rem;
}
.m-feat-card:hover .m-feat-ic{
background:var(--gold);color:#fff;
box-shadow:0 10px 22px rgba(197,160,89,.28);
}
/* ---- 排版细化：卡片内更舒朗的呼吸感与层级 ---- */
.grid{gap:28px}
.card h3{letter-spacing:.005em}
.card p{line-height:1.7}
.module h3,.step h4,.wisdom-node h4{letter-spacing:.005em}
/* ==========================================================================
✦ FORMAL TUNING ✦ —— 正式 · 专业 · 权威（睡眠培训认证机构调性）
端正的宋体/Noto Serif 标题，清晰无衬线的数字，克制的装饰。
========================================================================== */
/* 衬线标题：端正权威，弱化时装感（字号收敛、字重加强、字距归零） */
.hero h1{font-size:clamp(2.1rem,3.9vw,3.2rem);font-weight:700;line-height:1.24;letter-spacing:0}
.section-head h2{font-size:clamp(1.7rem,2.9vw,2.3rem);font-weight:600;line-height:1.32;letter-spacing:0}
.page-banner h1{font-size:clamp(2rem,3.6vw,2.9rem);font-weight:700;letter-spacing:0}
.cta-band h2{font-size:clamp(1.7rem,2.8vw,2.3rem);font-weight:600;letter-spacing:0}
.mission-text h2{font-size:clamp(1.9rem,3vw,2.5rem);font-weight:600;letter-spacing:0}
.split h2,.comp-card-head h3,.org-content h3{font-weight:600;letter-spacing:0}
/* 数字与 FAQ 标题回归清晰无衬线，专业、数据感强、可读性高 */
.hero-stats .num,.statband .num,.hero-panel .cell .v,
.metric-box .val,.module .hrs b{
font-family:"Outfit",var(--font);font-weight:800;letter-spacing:0;
}
.faq summary{font-family:var(--font);font-size:1.02rem;font-weight:700;letter-spacing:.005em}
/* 眉标签更端正克制 */
.eyebrow{letter-spacing:.22em}
/* 标题分隔徽记收敛为简洁小金标（证书式正式感，去时装化） */
.section-head:not(.left) h2::before,
.section-head.left h2::before{width:6px;height:6px}
.section-head:not(.left) h2::after{width:56px}
/* ===== content image slots (replaceable, drop assets/img/.jpg to auto-show) ===== */
.content-media{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:center/cover no-repeat;box-shadow:var(--shadow-sm);margin:0}
.content-media.ratio-43{aspect-ratio:4/3}
/* ==========================================================================
✦ POLISH & A11Y LAYER ✦ —— 审计修复与质感补全（低风险纯增量）
========================================================================== */
/* 眉标签 / 药丸后紧跟的标题：去掉重复的顶部小蓝线，层级更干净 */
.card-eyebrow + h3, .pill + h3, .pill--gold + h3{padding-top:0}
.card-eyebrow + h3::before, .pill + h3::before, .pill--gold + h3::before{display:none}
/* 深色区块内的卡片标题：藏青短线在深底上不可见，直接收掉 */
.navy-bg .card h3{padding-top:0}
.navy-bg .card h3::before{display:none}
/* 键盘焦点与选中文字：统一鎏金调性（可达性） */
a:focus-visible, .btn:focus-visible, summary:focus-visible, .nav-toggle:focus-visible{
outline:2px solid var(--gold);outline-offset:3px;border-radius:6px;
}
::selection{background:rgba(197,160,89,.3);color:var(--navy-900)}
/* 顶栏 CTA 收为紧凑药丸，主次分明 */
.nav-cta .btn{padding:9px 22px;font-size:.92rem}
/* 语言切换与药丸按钮呼应 */
.lang-switch{border-radius:999px !important}
/* FAQ：问答之间加鎏金发丝线，summary 悬停 / 展开高亮 */
.faq details p{border-top:1px solid rgba(197,160,89,.18);margin:0 26px 22px;padding:16px 0 0}
.faq summary:hover{color:var(--blue)}
.faq details[open] summary{color:var(--blue)}
/* 页脚链接 hover 过渡 */
.site-footer a{transition:color .25s}
/* 动效降级（prefers-reduced-motion） */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
.reveal{opacity:1 !important;transform:none !important}
}