/* ========================================================================== 即录VLOG — www.jlvlog.com Clean / technical dark theme ========================================================================== */ :root{ --bg:#05070d; --bg-2:#080b14; --surface:rgba(255,255,255,.035); --surface-2:rgba(255,255,255,.055); --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16); --text:#e9edf5; --muted:#8a95ab; --cyan:#3ee0ff; --violet:#8b6cff; --live:#ff4262; --grad:linear-gradient(120deg,#3ee0ff,#8b6cff); --r-sm:10px; --r:14px; --r-lg:20px; --wrap:1220px; --ease:cubic-bezier(.22,.7,.3,1); --fs-h1:clamp(2.5rem,6.2vw,4.6rem); --fs-h2:clamp(1.75rem,3.4vw,2.7rem); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue", "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans","Noto Sans SC", "Noto Sans Arabic","Noto Sans Thai","Noto Sans Devanagari",sans-serif; font-size:16px;line-height:1.65; -webkit-font-smoothing:antialiased; /* clip, not hidden: `overflow-x:hidden` on makes it a scroll container, which Chromium fails to paint when the document direction is RTL. */ overflow-x:clip; } img{max-width:100%;display:block;border:0} a{color:inherit;text-decoration:none} h1,h2,h3,h4{margin:0;line-height:1.14;letter-spacing:-.022em;font-weight:650} p{margin:0} button,input{font:inherit;color:inherit} svg.ico{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;flex:none} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px} /* Visually hidden without off-canvas offsets: `left:-9999px` becomes *scrollable* overflow under dir="rtl" and blows the document width out to ~11400px. */ .skip{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .skip:focus{position:fixed;inset-inline-start:12px;top:12px;width:auto;height:auto;margin:0; padding:10px 16px;clip:auto;clip-path:none;background:#fff;color:#000;border-radius:8px;z-index:200} :focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px} /* ---------- reveal ---------- */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5em; padding:.82em 1.5em;border-radius:999px;border:1px solid transparent; font-weight:600;font-size:.95rem;letter-spacing:-.005em;cursor:pointer; transition:transform .25s var(--ease),box-shadow .25s var(--ease), background .25s var(--ease),border-color .25s var(--ease); white-space:nowrap; } .btn-sm{padding:.62em 1.15em;font-size:.875rem} .btn-primary{background:var(--grad);color:#04070e;box-shadow:0 8px 26px -12px rgba(62,224,255,.65)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(62,224,255,.8)} .btn-ghost{background:var(--surface);border-color:var(--line-2);color:var(--text);backdrop-filter:blur(8px)} .btn-ghost:hover{background:var(--surface-2);border-color:rgba(255,255,255,.3);transform:translateY(-2px)} .btn-ghost .ico{fill:currentColor;stroke:none;width:.95em;height:.95em} .link-arrow{display:inline-flex;align-items:center;gap:.45em;font-weight:550;font-size:.95rem; color:var(--cyan);transition:gap .25s var(--ease),opacity .2s} .link-arrow:hover{gap:.8em;opacity:.85} .eyebrow{display:inline-flex;align-items:center;gap:.55em;font-size:.78rem;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1.15rem} .dot-live{width:7px;height:7px;border-radius:50%;background:var(--live);flex:none; box-shadow:0 0 0 0 rgba(255,66,98,.55);animation:pulse 2.2s infinite} @keyframes pulse{ 70%{box-shadow:0 0 0 9px rgba(255,66,98,0)} 100%{box-shadow:0 0 0 0 rgba(255,66,98,0)} } /* ========================================================================== HEADER ========================================================================== */ .hdr{position:fixed;inset:0 0 auto;z-index:100;transition:background .35s var(--ease), border-color .35s var(--ease),backdrop-filter .35s var(--ease); border-bottom:1px solid transparent} .hdr.stuck{background:rgba(5,7,13,.78);backdrop-filter:blur(16px) saturate(160%);border-bottom-color:var(--line)} .hdr-in{display:flex;align-items:center;gap:22px;height:70px} .brand{display:inline-flex;align-items:center;gap:10px;flex:none} .brand-mark{width:30px;height:30px} .brand-name{font-weight:680;font-size:1.12rem;letter-spacing:-.02em} .nav{display:flex;gap:5px;margin-inline-start:18px;flex:1} .nav a{padding:8px 13px;border-radius:9px;font-size:.925rem;color:var(--muted); transition:color .2s,background .2s} .nav a:hover{color:var(--text);background:var(--surface)} .hdr-act{display:flex;align-items:center;gap:10px;margin-inline-start:auto} /* language */ .lang{position:relative} .lang-btn{display:inline-flex;align-items:center;gap:.45em;background:var(--surface); border:1px solid var(--line);border-radius:999px;padding:.5em .85em;font-size:.875rem; color:var(--muted);cursor:pointer;transition:color .2s,border-color .2s,background .2s} .lang-btn:hover{color:var(--text);border-color:var(--line-2);background:var(--surface-2)} .lang-btn .caret{width:.85em;height:.85em;transition:transform .25s var(--ease)} .lang-btn[aria-expanded="true"] .caret{transform:rotate(180deg)} .lang-pop{position:absolute;inset-inline-end:0;top:calc(100% + 10px);width:290px; background:rgba(10,13,22,.97);backdrop-filter:blur(20px);border:1px solid var(--line-2); border-radius:var(--r);box-shadow:0 30px 70px -20px rgba(0,0,0,.85);overflow:hidden;z-index:120} .lang-search{padding:10px;border-bottom:1px solid var(--line)} .lang-search input{width:100%;background:var(--surface);border:1px solid var(--line); border-radius:9px;padding:.55em .8em;font-size:.875rem;outline:none} .lang-search input:focus{border-color:var(--line-2)} .lang-list{max-height:330px;overflow-y:auto;padding:6px; scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent} .lang-list::-webkit-scrollbar{width:8px} .lang-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:8px} .lang-list button{display:flex;width:100%;align-items:baseline;gap:.6em;text-align:start; background:none;border:0;padding:.55em .7em;border-radius:9px;cursor:pointer; font-size:.9rem;color:var(--text);transition:background .16s} .lang-list button:hover{background:var(--surface-2)} .lang-list button[aria-selected="true"]{background:rgba(62,224,255,.1);color:var(--cyan)} .lang-list button em{font-style:normal;font-size:.78rem;color:var(--muted);margin-inline-start:auto} .burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px; background:var(--surface);border:1px solid var(--line);border-radius:10px;cursor:pointer;padding:0 10px} .burger span{height:1.6px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease),opacity .2s} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)} /* ========================================================================== HERO ========================================================================== */ .hero{position:relative;padding:170px 0 0;overflow:hidden;isolation:isolate} .hero-bg{position:absolute;inset:0;z-index:-3} .hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.42; filter:saturate(.78) contrast(1.05)} .hero-canvas{position:absolute;inset-inline-end:-4%;top:1%;width:min(700px,58vw); height:min(700px,58vw);z-index:-1;opacity:1;pointer-events:none} .hero-veil{position:absolute;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(72% 62% at 12% 26%,rgba(5,7,13,.96),rgba(5,7,13,.6) 58%,transparent 82%), linear-gradient(180deg,rgba(5,7,13,.9) 0%,rgba(5,7,13,.42) 30%,rgba(5,7,13,.88) 72%,var(--bg) 100%)} .hero-in{position:relative;padding-bottom:56px} .hero-title{font-size:var(--fs-h1);font-weight:700;letter-spacing:-.035em;margin-bottom:1.35rem;max-width:15ch} .hero-title em{font-style:normal;background:var(--grad);-webkit-background-clip:text; background-clip:text;color:transparent} .hero-sub{font-size:clamp(1rem,1.55vw,1.19rem);color:var(--muted);max-width:60ch;margin-bottom:2.2rem} .search{display:flex;align-items:center;gap:10px;background:rgba(10,14,23,.72); backdrop-filter:blur(14px);border:1px solid var(--line-2);border-radius:999px; padding:7px 7px 7px 20px;max-width:610px;transition:border-color .25s,box-shadow .25s} .search:focus-within{border-color:rgba(62,224,255,.55);box-shadow:0 0 0 4px rgba(62,224,255,.09)} .search .ico{width:19px;height:19px;color:var(--muted)} .search input{flex:1;min-width:0;background:none;border:0;outline:none;padding:.7em 0;font-size:.98rem} .search input::placeholder{color:#6c778e} .hero-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:26px} /* stats */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:0; position:relative} .stat{background:rgba(9,12,20,.86);backdrop-filter:blur(10px);padding:26px 24px;text-align:center} .stat b{display:block;font-size:clamp(1.5rem,2.6vw,2.05rem);font-weight:680;letter-spacing:-.03em; font-variant-numeric:tabular-nums;background:var(--grad);-webkit-background-clip:text; background-clip:text;color:transparent} .stat span{font-size:.83rem;color:var(--muted);letter-spacing:.02em} /* ========================================================================== SECTIONS ========================================================================== */ .sec{padding:118px 0;position:relative} .sec-alt{background: linear-gradient(180deg,transparent,rgba(139,108,255,.045) 40%,transparent),var(--bg-2); border-block:1px solid var(--line)} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:52px} .sec-head.center{justify-content:center;text-align:center} .sec-head.center .sec-sub{margin-inline:auto} .sec-head h2{font-size:var(--fs-h2);max-width:20ch} .sec-head.center h2{max-width:24ch;margin-inline:auto} .sec-sub{color:var(--muted);margin-top:1.05rem;max-width:58ch;font-size:1.02rem} /* ---------- live cards ---------- */ .live-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); overflow:hidden;transition:transform .4s var(--ease),border-color .3s,box-shadow .4s var(--ease)} .card:hover{transform:translateY(-5px);border-color:var(--line-2); box-shadow:0 26px 54px -26px rgba(0,0,0,.9)} .card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0b0f18} .card-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease); filter:saturate(.92)} .card:hover .card-media img{transform:scale(1.06)} .card-media::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(5,7,13,.42),transparent 42%,rgba(5,7,13,.5))} .badge-live,.badge-eyes{position:absolute;top:12px;z-index:2;display:inline-flex;align-items:center; gap:.4em;padding:.32em .68em;border-radius:999px;font-size:.7rem;font-weight:700; letter-spacing:.09em;backdrop-filter:blur(8px)} .badge-live{inset-inline-start:12px;background:rgba(255,66,98,.92);color:#fff} .badge-live i{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.6s infinite} @keyframes blink{50%{opacity:.25}} .badge-eyes{inset-inline-end:12px;background:rgba(5,7,13,.62);color:#dfe5f0; border:1px solid rgba(255,255,255,.14);font-weight:600;letter-spacing:.02em; font-variant-numeric:tabular-nums} .badge-eyes .ico{width:.95em;height:.95em} .play{position:absolute;inset-block-end:14px;inset-inline-end:14px;z-index:2;width:42px;height:42px; border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px); transition:transform .35s var(--ease),background .3s} .play svg{width:16px;height:16px;fill:#fff;margin-inline-start:2px} .card:hover .play{background:var(--grad);border-color:transparent;transform:scale(1.09)} .card:hover .play svg{fill:#04070e} .card-body{padding:17px 19px 20px} .card-body h3{font-size:1.07rem;margin-bottom:.35rem} .meta{font-size:.845rem;color:var(--muted);display:flex;gap:.5em;flex-wrap:wrap} .meta .sep{opacity:.45} /* ---------- pillars ---------- */ .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .pillar{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:34px 30px 32px;transition:transform .4s var(--ease),border-color .3s,background .3s} .pillar:hover{transform:translateY(-4px);border-color:var(--line-2);background:var(--surface-2)} .pillar-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:13px; background:rgba(62,224,255,.1);border:1px solid rgba(62,224,255,.22);margin-bottom:20px} .pillar-ico svg{width:23px;height:23px;fill:none;stroke:var(--cyan);stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} .pillar h3{font-size:1.2rem;margin-bottom:.7rem} .pillar p{color:var(--muted);font-size:.955rem} /* ---------- destinations ---------- */ .dest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .dest{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/3.6; border:1px solid var(--line);isolation:isolate} .dest.wide{grid-column:span 2;aspect-ratio:auto} .dest img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .4s; filter:saturate(.85) brightness(.88)} .dest:hover img{transform:scale(1.07);filter:saturate(1) brightness(1)} .dest::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 34%,rgba(5,7,13,.86));z-index:1} .dest-in{position:absolute;inset-block-end:0;inset-inline:0;z-index:2;padding:20px 22px; display:flex;flex-direction:column;gap:.15rem} .dest-in b{font-size:1.13rem;font-weight:640;letter-spacing:-.02em} .dest-in i{font-style:normal;font-size:.82rem;color:var(--muted)} /* ---------- community strip ---------- */ .strip{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:82px} .shot{margin:0;position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5; border:1px solid var(--line)} .shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);filter:saturate(.88)} .shot:hover img{transform:scale(1.06)} .shot figcaption{position:absolute;inset-block-end:0;inset-inline:0;padding:26px 14px 12px; background:linear-gradient(transparent,rgba(5,7,13,.88));display:flex;flex-direction:column} .shot figcaption b{font-size:.9rem;font-weight:600} .shot figcaption span{font-size:.75rem;color:var(--muted)} /* ---------- steps ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .step{padding:30px 28px;border:1px solid var(--line);border-radius:var(--r-lg); background:linear-gradient(160deg,var(--surface),transparent)} .step-n{display:block;font-size:.78rem;font-weight:700;letter-spacing:.16em; color:var(--cyan);margin-bottom:14px} .step h3{font-size:1.1rem;margin-bottom:.55rem} .step p{color:var(--muted);font-size:.94rem} /* ---------- CTA ---------- */ .cta{text-align:center;position:relative;overflow:hidden} .cta::before{content:"";position:absolute;inset-inline:0;top:0;height:1px;background:var(--line)} .cta::after{content:"";position:absolute;left:50%;top:-40%;width:min(920px,110vw);aspect-ratio:1; transform:translateX(-50%);border-radius:50%;pointer-events:none;z-index:-1; background:radial-gradient(circle,rgba(139,108,255,.2),rgba(62,224,255,.07) 45%,transparent 68%)} .cta-in{max-width:680px;margin-inline:auto} .cta h2{font-size:var(--fs-h2);margin-bottom:1.1rem} .cta p{color:var(--muted);font-size:1.05rem} .cta-btns{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap} .cta-note{font-size:.84rem;color:#6c778e;margin-top:22px} /* ========================================================================== FOOTER ========================================================================== */ .ft{border-top:1px solid var(--line);background:var(--bg-2);padding-top:66px} .ft-in{display:grid;grid-template-columns:2.1fr 1fr 1fr 1fr;gap:42px;padding-bottom:52px} .ft-brand p{color:var(--muted);font-size:.92rem;margin-top:18px;max-width:38ch} .ft-col{display:flex;flex-direction:column;gap:.68rem} .ft-col h4{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:#6c778e;margin-bottom:.35rem} .ft-col a{font-size:.92rem;color:var(--muted);transition:color .2s;width:fit-content} .ft-col a:hover{color:var(--text)} .ft-btm{position:relative;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; padding-block:22px 28px;font-size:.83rem;color:#69738a} .ft-btm::before{content:"";position:absolute;top:0;inset-inline:24px;height:1px;background:var(--line)} @media (max-width:600px){.ft-btm::before{inset-inline:18px}} /* ========================================================================== RTL ========================================================================== */ [dir="rtl"] .link-arrow span[aria-hidden]{transform:scaleX(-1);display:inline-block} [dir="rtl"] .play svg{transform:scaleX(-1)} /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width:1080px){ .live-grid,.pillars,.steps{grid-template-columns:repeat(2,1fr)} .dest-grid{grid-template-columns:repeat(2,1fr)} .dest.wide{grid-column:span 2;aspect-ratio:16/9} .strip{grid-template-columns:repeat(3,1fr)} .strip .shot:nth-child(n+4){display:none} .ft-in{grid-template-columns:1fr 1fr;gap:34px} } @media (max-width:860px){ .nav{position:fixed;inset:70px 0 auto;flex-direction:column;gap:2px;margin:0;padding:14px 24px 22px; background:rgba(6,9,16,.98);backdrop-filter:blur(18px);border-bottom:1px solid var(--line); transform:translateY(-118%);transition:transform .38s var(--ease);z-index:-1} .nav.open{transform:none} .nav a{padding:12px 4px;font-size:1rem;border-radius:0} .burger{display:flex} .hdr-act .btn{display:none} .lang-btn span:not(.ico){display:none} .hero{padding-top:130px} .sec{padding:82px 0} .sec-head{flex-direction:column;align-items:flex-start;margin-bottom:38px} .hide-sm{display:none} .stats{grid-template-columns:repeat(2,1fr)} .strip{grid-template-columns:repeat(2,1fr)} .strip .shot:nth-child(n+3){display:none} } @media (max-width:600px){ .wrap{padding-inline:18px} .live-grid,.pillars,.steps,.dest-grid{grid-template-columns:1fr} .dest,.dest.wide{aspect-ratio:16/10;grid-column:auto} .search{flex-wrap:wrap;border-radius:var(--r-lg);padding:14px 16px;gap:8px} .search .ico{order:1} .search input{order:2;flex:1 1 0;min-width:0;padding-block:.35em} .search .btn{order:3;flex:1 0 100%;margin-top:6px} .ft-in{grid-template-columns:1fr} .hero-canvas{opacity:.35;inset-inline-end:-40%} }