html { scroll-behavior: smooth; overflow-x:hidden; }
body { background:#F7FAFE; color:#0B2545; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
.font-cn { font-family:"Noto Serif TC", serif; }
.font-en { font-family:"Cormorant Garamond", serif; letter-spacing:.06em; }
.font-num { font-family:"DM Serif Display", serif; font-feature-settings:"lnum"; }
.writing-vertical { writing-mode: vertical-rl; text-orientation: mixed; letter-spacing:.4em; }
/* subtle grain */
.grain::before{
content:""; position:absolute; inset:0; pointer-events:none;
background-image: radial-gradient(rgba(11,37,69,.045) 1px, transparent 1px);
background-size: 3px 3px; mix-blend-mode:multiply; opacity:.5;
}
/* thin rule with center diamond */
.rule { display:flex; align-items:center; gap:14px; color:#1E5AA8; }
.rule::before,.rule::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,#4A90D9,transparent); }
.rule .diamond{ width:8px;height:8px;transform:rotate(45deg);background:#C9A85C; box-shadow:0 0 0 4px rgba(201,168,92,.15);}
/* ticket dashed border */
.ticket {
background:
radial-gradient(circle at 0 40px, transparent 10px, #fff 10.5px) top left / 22px 100% no-repeat,
radial-gradient(circle at 100% 40px, transparent 10px, #fff 10.5px) top right / 22px 100% no-repeat,
#fff;
}
/* bus wheel spin */
@keyframes spin { to { transform: rotate(360deg); } }
.wheel { animation: spin 6s linear infinite; transform-origin:center; }
/* road dashes */
@keyframes road { to { background-position: -80px 0; } }
.road-line{
height:2px;
background: repeating-linear-gradient(90deg,#C9A85C 0 24px, transparent 24px 40px);
animation: road 2.5s linear infinite;
}
/* fade in on scroll */
.reveal { opacity:0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity:1; transform:none; }
/* schedule dot */
.sched-dot{ width:14px; height:14px; border-radius:999px; background:#fff; border:3px solid #1E5AA8; box-shadow:0 0 0 4px #E6EEFA; }
/* input */
.field {
width:100%; background:#fff; border:1px solid #D6E1F1; border-radius:14px;
padding:14px 16px; font-size:15px; color:#0B2545; transition:.2s;
}
.field:focus { outline:none; border-color:#1E5AA8; box-shadow:0 0 0 4px rgba(30,90,168,.12); }
.label { font-size:13px; font-weight:600; color:#13315C; margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.req::after{ content:"·必填"; font-size:11px; color:#C9A85C; font-weight:500; letter-spacing:.05em; }
/* button */
.btn-primary{
background: linear-gradient(180deg,#1E5AA8 0%, #13315C 100%);
color:#fff; border-radius:999px; padding:16px 28px; font-weight:700; letter-spacing:.08em;
box-shadow: 0 12px 30px -12px rgba(19,49,92,.55);
transition: transform .2s, box-shadow .2s;
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(19,49,92,.6); }
/* backdrop bus scene */
.cloud { fill:#fff; opacity:.85 }
/* guest card */
.guest-card{
background:#fff; border:1px solid #E4ECF7; border-radius:20px; padding:18px 20px;
display:flex; flex-direction:column; gap:6px; transition:.25s; position:relative; overflow:hidden;
}
.guest-card::before{
content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
background: linear-gradient(180deg,#4A90D9,#C9A85C);
}
.guest-card:hover{ transform: translateY(-3px); box-shadow: 0 20px 50px -28px rgba(11,37,69,.35); }
/* modal */
.modal-backdrop{ position:fixed; inset:0; background:rgba(11,37,69,.55); backdrop-filter: blur(6px); z-index:60; display:none; align-items:center; justify-content:center; padding:20px; }
.modal-backdrop.show{ display:flex; }
/* map link */
.stamp{
border:1.5px dashed #C9A85C; color:#C9A85C; border-radius:8px;
padding:4px 10px; font-size:12px; letter-spacing:.25em; font-weight:600;
transform: rotate(-4deg); display:inline-block;
}
/* section title */
.kicker { color:#C9A85C; letter-spacing:.5em; font-size:12px; font-weight:600; }
/* sticky CTA on mobile */
.float-cta{
position:fixed; bottom:14px; left:50%; transform:translateX(-50%);
z-index:50; background:#0B2545; color:#fff; padding:12px 22px; border-radius:999px;
font-weight:700; letter-spacing:.1em; box-shadow: 0 16px 40px -12px rgba(11,37,69,.55);
display:none;
}
@media (max-width: 768px){ .float-cta{ display:inline-flex; align-items:center; gap:8px; } }
/* countdown */
.cd-num { font-family:"DM Serif Display", serif; font-size: clamp(38px, 6vw, 64px); line-height:1; color:#0B2545; }
.cd-label { font-size:11px; letter-spacing:.35em; color:#1E5AA8; font-weight:600; }
/* mountain layer */
.mountains { position:absolute; left:0; right:0; bottom:0; pointer-events:none; }
/* corner ornament */
.corner{
position:absolute; width:80px; height:80px; border:1.5px solid #C9A85C; opacity:.6;
}
.corner.tl{ top:16px; left:16px; border-right:none; border-bottom:none; }
.corner.tr{ top:16px; right:16px; border-left:none; border-bottom:none; }
.corner.bl{ bottom:16px; left:16px; border-right:none; border-top:none; }
.corner.br{ bottom:16px; right:16px; border-left:none; border-top:none; }
/* university logo — show the complete original mark without a mask */
.logo-frame { flex:0 0 auto; overflow:visible; background:transparent; border-radius:0; display:block; }
.logo-frame-header { width:42px; height:auto; }
.logo-frame-footer { width:108px; height:auto; opacity:.96; }
.site-logo { display:block; width:100%; height:auto; object-fit:contain; object-position:center; }
@media (max-width: 768px){ .logo-frame-header { width:38px; } .logo-frame-footer { width:92px; } }
/* photo polish */
figure img { image-rendering: auto; }
@media (max-width: 768px){
.hero-photo { min-height: 420px; }
#venue-photos figure { min-height: 250px; }
}
/* hover magnifier on homepage poster */
.hero-photo-zoom { cursor:zoom-in; z-index:1; }
.hero-photo-zoom::before {
content:""; position:absolute; inset:0; z-index:2;
background:rgba(11,37,69,.16); opacity:0;
transition:opacity .25s ease; pointer-events:none;
}
.hero-photo-zoom::after {
content:""; position:absolute; z-index:3; left:50%; top:50%;
width:52px; height:52px;
transform:translate(-50%,-50%) scale(.8); opacity:0;
transition:opacity .25s ease, transform .25s ease;
pointer-events:none; border-radius:50%;
background:rgba(255,255,255,.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2545' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.3'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3Cpath d='M10.8 7.8v6M7.8 10.8h6'/%3E%3C/svg%3E") center/28px no-repeat;
box-shadow:0 8px 24px rgba(11,37,69,.28);
}
.hero-photo-zoom:hover::before,
.hero-photo-zoom:focus-visible::before,
.hero-photo-zoom:hover::after,
.hero-photo-zoom:focus-visible::after { opacity:1; }
.hero-photo-zoom:hover::after,
.hero-photo-zoom:focus-visible::after { transform:translate(-50%,-50%) scale(1); }
/* clickable image lightbox */
img[data-lightbox] { cursor:zoom-in; }
.lightbox { position:fixed; inset:0; z-index:100; display:none; align-items:flex-start; justify-content:center; overflow:auto; padding:72px 72px 40px; background:rgba(6,20,38,.88); backdrop-filter:blur(8px); }
.lightbox.show { display:flex; }
.lightbox img { max-width:none; max-height:none; width:auto; height:auto; object-fit:contain; border-radius:16px; box-shadow:0 24px 80px rgba(0,0,0,.45); cursor:zoom-out; }
.lightbox-close, .lightbox-nav { position:absolute; border:1px solid rgba(255,255,255,.35); color:#fff; background:rgba(11,37,69,.6); cursor:pointer; transition:.2s; }
.lightbox-close { top:18px; right:22px; width:44px; height:44px; border-radius:999px; font-size:28px; line-height:1; }
.lightbox-nav { top:50%; transform:translateY(-50%); width:48px; height:64px; border-radius:16px; font-size:38px; line-height:1; display:grid; place-items:center; }
.lightbox-prev { left:22px; }
.lightbox-next { right:22px; }
.lightbox-close:hover, .lightbox-nav:hover { background:#fff; color:#0B2545; }
@media (max-width: 768px){ .lightbox { padding:64px 52px 24px; } .lightbox img { border-radius:10px; } .lightbox-nav { width:40px; height:52px; font-size:30px; border-radius:12px; } .lightbox-prev { left:8px; } .lightbox-next { right:8px; } .lightbox-close { top:10px; right:10px; } }
/* selection */
::selection { background:#C9A85C; color:#fff; }