<?php
// page_5.html 大字封面板：顶部超大标题渐变区 + 正文卡片浮上去（负 margin 重叠）
$pg5_name    = isset($page['name']) ? $page['name'] : '单页';
$pg5_content = isset($page['content']) ? $page['content'] : '';
$pg5_company = site_config('company_name', '炎酷CMS');
$pg5_slogan  = site_config('slogan', '');
?>
<style>
.yk-page5{background:#f3f5f8;padding-bottom:70px}
.yk-pg5-hero{background:linear-gradient(135deg,#16222e 0%,#2b5876 55%,#4e8098 100%);color:#fff;text-align:center;padding:96px 20px 140px;position:relative;overflow:hidden}
.yk-pg5-hero:before{content:"";position:absolute;left:50%;top:-160px;width:520px;height:520px;margin-left:-260px;border-radius:50%;background:rgba(255,255,255,.05)}
.yk-pg5-hero h1{margin:0;font-size:52px;font-weight:800;letter-spacing:6px;position:relative}
.yk-pg5-hero .yk-pg5-en{margin:16px 0 0;font-size:14px;letter-spacing:5px;text-transform:uppercase;opacity:.65;position:relative}
.yk-pg5-hero .yk-pg5-slogan{margin:22px auto 0;max-width:640px;font-size:15px;line-height:1.9;opacity:.85;position:relative}
.yk-pg5-card{max-width:900px;margin:-88px auto 0;padding:0 24px;position:relative;z-index:2}
.yk-pg5-card-in{background:#fff;border-radius:14px;box-shadow:0 14px 44px rgba(15,40,70,.16);padding:54px 60px;font-size:15px;line-height:2;color:#414a54}
.yk-pg5-card-in:before{content:"";display:block;width:56px;height:5px;border-radius:3px;background:linear-gradient(90deg,#2b5876,#4e8098);margin:0 auto 30px}
.yk-pg5-card-in img{max-width:100%;height:auto}
.yk-pg5-card-in h2,.yk-pg5-card-in h3{color:#2b5876;margin:1.2em 0 .6em}
.yk-pg5-card-in p{margin:0 0 1em}
.yk-pg5-tail{text-align:center;margin-top:30px;font-size:13px;color:#9aa5b1;letter-spacing:2px}
@media (max-width:1199px){
  .yk-pg5-hero{padding:76px 20px 120px}
  .yk-pg5-hero h1{font-size:40px;letter-spacing:4px}
  .yk-pg5-card-in{padding:42px 40px}
}
@media (max-width:767px){
  .yk-pg5-hero{padding:56px 16px 100px}
  .yk-pg5-hero h1{font-size:28px;letter-spacing:2px}
  .yk-pg5-hero .yk-pg5-slogan{font-size:13px}
  .yk-pg5-card{margin:-64px auto 0;padding:0 14px}
  .yk-pg5-card-in{padding:28px 20px;font-size:14px;line-height:1.9}
}
</style>
<div class="yk-page5">
  <div class="yk-pg5-hero">
    <h1><?php echo e($pg5_name); ?></h1>
    <p class="yk-pg5-en"><?php echo e(isset($page['flag']) ? $page['flag'] : 'page'); ?></p>
    <?php if ($pg5_slogan !== '') { ?>
    <p class="yk-pg5-slogan"><?php echo e($pg5_slogan); ?></p>
    <?php } ?>
  </div>
  <div class="yk-pg5-card">
    <article class="yk-pg5-card-in">
      <?php echo $pg5_content; ?>
    </article>
  </div>
  <div class="yk-pg5-tail"><?php echo e($pg5_company); ?></div>
</div>
