<?php
// page_10.html 深色风：深色背景区标题 + 白色正文卡片
$pg10_name    = isset($page['name']) ? $page['name'] : '单页';
$pg10_content = isset($page['content']) ? $page['content'] : '';
$pg10_company = site_config('company_name', '炎酷CMS');
$pg10_slogan  = site_config('slogan', '');
?>
<style>
.yk-page10{background:#e9edf2;padding-bottom:70px}
.yk-pg10-hero{background:linear-gradient(150deg,#0d1117 0%,#1c2333 55%,#26314a 100%);color:#fff;padding:78px 20px 108px;position:relative}
.yk-pg10-hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(120,170,255,.5),transparent)}
.yk-pg10-hero-in{max-width:980px;margin:0 auto;position:relative}
.yk-pg10-hero .yk-pg10-tag{display:inline-block;padding:5px 16px;border-radius:3px;background:rgba(96,150,255,.16);border:1px solid rgba(96,150,255,.4);color:#9db8ea;font-size:12px;letter-spacing:3px;margin-bottom:20px}
.yk-pg10-hero h1{margin:0;font-size:38px;font-weight:700;letter-spacing:2px}
.yk-pg10-hero .yk-pg10-slogan{margin:16px 0 0;font-size:14px;line-height:1.9;color:rgba(255,255,255,.7);max-width:640px}
.yk-pg10-card{max-width:980px;margin:-56px auto 0;padding:0 24px;position:relative;z-index:2}
.yk-pg10-card-in{background:#fff;border-radius:12px;box-shadow:0 16px 40px rgba(10,20,40,.18);overflow:hidden}
.yk-pg10-card-bar{height:6px;background:linear-gradient(90deg,#3d6fd8,#6fa0f0,#9dc0f7)}
.yk-pg10-article{padding:48px 54px;font-size:15px;line-height:2;color:#3d4450}
.yk-pg10-article img{max-width:100%;height:auto}
.yk-pg10-article h2,.yk-pg10-article h3{color:#1c2333;margin:1.2em 0 .6em}
.yk-pg10-article p{margin:0 0 1em}
.yk-pg10-article a{color:#3d6fd8}
.yk-pg10-tail{max-width:980px;margin:26px auto 0;padding:0 24px;display:flex;justify-content:space-between;font-size:12px;color:#98a3b3;letter-spacing:1px}
.yk-pg10-tail a{color:#3d6fd8;text-decoration:none}
@media (max-width:1199px){
  .yk-pg10-hero{padding:60px 20px 92px}
  .yk-pg10-hero h1{font-size:31px}
  .yk-pg10-article{padding:38px 36px}
}
@media (max-width:767px){
  .yk-pg10-hero{padding:44px 16px 80px}
  .yk-pg10-hero h1{font-size:24px}
  .yk-pg10-card{margin:-46px auto 0;padding:0 14px}
  .yk-pg10-article{padding:26px 20px;font-size:14px;line-height:1.9}
  .yk-pg10-tail{flex-direction:column;gap:6px;text-align:center}
}
</style>
<div class="yk-page10">
  <div class="yk-pg10-hero">
    <div class="yk-pg10-hero-in">
      <span class="yk-pg10-tag"><?php echo e($pg10_company); ?></span>
      <h1><?php echo e($pg10_name); ?></h1>
      <?php if ($pg10_slogan !== '') { ?>
      <p class="yk-pg10-slogan"><?php echo e($pg10_slogan); ?></p>
      <?php } ?>
    </div>
  </div>
  <div class="yk-pg10-card">
    <div class="yk-pg10-card-in">
      <div class="yk-pg10-card-bar"></div>
      <article class="yk-pg10-article">
        <?php echo $pg10_content; ?>
      </article>
    </div>
  </div>
  <div class="yk-pg10-tail">
    <span><?php echo e($pg10_company); ?></span>
    <a href="<?php echo e(url_home()); ?>">返回首页 →</a>
  </div>
</div>
