/* ==========================================================================
Discovery Airways — lớp "premium"
Bổ sung lên trên base.css + styles.css, không sửa đổi hai file gốc:
1. prefers-reduced-motion — CÔNG TẮC: xem ghi chú "CHUYỂN ĐỘNG CƯỠNG BỨC"
2. Con trỏ tuỳ biến + nút nam châm + chiều sâu khi hover ảnh
3. Chuyển cảnh giữa các trang
4. Flight Deck HUD — "signature moment": cuộn trang = một chuyến bay
5. Tiêu đề Montserrat biến thiên độ đậm theo tiến trình cuộn
========================================================================== */
/* ==========================================================================
0. Tiếp cận — focus nhìn thấy được & giảm chuyển động
========================================================================== */
.page-taxibay :is(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--tb-gold-soft);
outline-offset: 3px;
border-radius: 4px;
}
.tb-skip {
position: absolute; z-index: 10001; top: 10px; left: 10px;
padding: 10px 18px; color: #22190a; background: var(--tb-gold-lt);
font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
text-decoration: none; border-radius: 999px; transform: translateY(-160%);
transition: transform .3s var(--tb-ease);
}
.tb-skip:focus-visible { transform: translateY(0); }
/* ==========================================================================
CHUYỂN ĐỘNG CƯỠNG BỨC
Trang được yêu cầu chạy đủ hiệu ứng cho MỌI thiết bị, kể cả máy đang bật
"giảm chuyển động" trong cài đặt hệ điều hành. Lớp .tb-motion-forced được
gắn vào bằng một dòng inline ở của cả 7 trang.
ĐỂ TRẢ LẠI HỖ TRỢ TIẾP CẬN: xoá dòng
trong — toàn bộ phần dưới đây tự động có hiệu lực trở lại.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html:not(.tb-motion-forced) { scroll-behavior: auto !important; }
html:not(.tb-motion-forced) :is(*, *::before, *::after) {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
html:not(.tb-motion-forced) .tb-splash { display: none !important; }
html:not(.tb-motion-forced) :is(.tb-cursor, .tb-hud, .tb-pagefade) { display: none !important; }
html:not(.tb-motion-forced) .page-taxibay [data-mo] { opacity: 1 !important; transform: none !important; }
html:not(.tb-motion-forced) .tb-char { opacity: 1 !important; transform: none !important; }
}
html.tb-reduced .tb-splash { display: none !important; }
html.tb-reduced .tb-cursor,
html.tb-reduced .tb-hud,
html.tb-reduced .tb-pagefade { display: none !important; }
/* ==========================================================================
1. Con trỏ "ống ngắm" — chỉ trên thiết bị có chuột thật
Không dùng lerp đuổi theo con trỏ: ở trạng thái tự do, khung ngắm được ghi
thẳng vị trí chuột trong chính sự kiện pointer (không transition, không rAF
nội suy) nên bám đúng thời gian thực. Khi rê lên phần tử tương tác, khung
khoá vào đúng khung bao của phần tử — lúc đó nó đứng yên, nên độ trễ bằng 0.
========================================================================== */
.tb-cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
html.tb-cursor-on, html.tb-cursor-on * { cursor: none !important; }
.tb-cursor {
position: fixed;
z-index: 10000;
top: 0; left: 0;
display: block;
width: 0; height: 0;
color: #9c7535; /* nền sáng: vàng đậm của bộ nhận diện */
pointer-events: none;
opacity: 0;
transition: opacity .3s ease, color .3s ease;
will-change: transform;
filter: drop-shadow(0 0 2px rgba(8, 14, 22, .55));
}
.tb-cursor.is-ready { opacity: 1; }
.tb-cursor.on-dark { color: #fff3d8; } /* nền tối/ảnh: vàng ngà sáng */
/* khung ngắm 4 góc */
.tb-cursor-box {
position: absolute;
top: 0; left: 0;
width: var(--cw, 26px);
height: var(--ch, 26px);
}
.tb-cursor-box i {
position: absolute;
width: 8px; height: 8px;
border: 1.4px solid currentColor;
border-radius: 1px;
transition: opacity .22s ease;
}
.tb-cursor-box i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.tb-cursor-box i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.tb-cursor-box i:nth-child(3) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.tb-cursor-box i:nth-child(4) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
/* vòng nét đứt cho trạng thái ảnh — lớp ngoài lo phóng to, lớp trong lo xoay,
tách ra để hai chuyển động không giẫm lên nhau trên cùng thuộc tính transform */
.tb-cursor-ring {
position: absolute;
top: 0; left: 0;
width: var(--cw, 26px);
height: var(--ch, 26px);
opacity: 0;
transform: scale(.5);
transition: opacity .28s ease, transform .45s var(--tb-ease),
width .34s var(--tb-ease), height .34s var(--tb-ease);
}
/* Vẽ bằng SVG chứ không dùng border-style:dashed, vì border không cho
chỉnh độ dài nét — trình duyệt tự quyết, thường ra khoảng 34 nét đặc
kín vòng. Ở đây đặt thẳng stroke-dasharray để còn khoảng 9 nét, thưa
hơn hẳn. Dùng mask + background:currentColor để vòng vẫn đổi màu theo
.tb-cursor.is-media như trước, không phải đóng cứng mã màu vào SVG. */
.tb-cursor-ring i {
position: absolute;
inset: 0;
border: 0;
border-radius: 999px;
background: currentColor;
--tb-ring-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Ccircle cx='26' cy='26' r='25.2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-dasharray='9 9'/%3E%3C/svg%3E");
-webkit-mask: var(--tb-ring-svg) center / 100% 100% no-repeat;
mask: var(--tb-ring-svg) center / 100% 100% no-repeat;
}
.tb-cursor.is-media .tb-cursor-ring { opacity: 1; transform: scale(1); }
/* Ảnh có sáng có tối nên luôn dùng vàng ngà + đổ bóng để vòng luôn đọc được. */
.tb-cursor.is-media {
color: #fff8ea;
filter: drop-shadow(0 1px 4px rgba(8, 14, 22, .62));
}
.tb-cursor.is-media .tb-cursor-ring i { animation: tbCursorSpin 9s linear infinite; }
@keyframes tbCursorSpin { to { transform: rotate(360deg); } }
.tb-cursor-dot {
position: absolute;
top: 50%; left: 50%;
width: 3px; height: 3px;
margin: -1.5px 0 0 -1.5px;
background: currentColor;
border-radius: 999px;
transition: opacity .25s ease, transform .25s var(--tb-ease);
}
.tb-cursor-dot { left: calc(var(--cw, 26px) / 2); top: calc(var(--ch, 26px) / 2); }
.tb-cursor-label {
position: absolute;
top: calc(var(--ch, 26px) + 9px);
left: 0;
font-family: var(--font-body);
font-size: 9px;
font-weight: 700;
letter-spacing: .26em;
text-transform: uppercase;
color: currentColor;
white-space: nowrap;
opacity: 0;
transform: translateY(-5px);
transition: opacity .3s ease, transform .35s var(--tb-ease);
}
/* khoá vào phần tử: kích thước và vị trí đều chuyển động mượt tới khung bao */
.tb-cursor.is-snap {
transition: transform .34s var(--tb-ease), opacity .3s ease, color .3s ease;
}
.tb-cursor-box {
transition: width .34s var(--tb-ease), height .34s var(--tb-ease),
transform .22s var(--tb-ease);
}
.tb-cursor.is-snap .tb-cursor-dot { opacity: 0; }
.tb-cursor.is-media .tb-cursor-box i { opacity: 0; }
.tb-cursor.is-media .tb-cursor-dot { opacity: 0; }
.tb-cursor.is-media .tb-cursor-label {
/* .tb-cursor có kích thước 0 nên 50% không phải tâm vòng — phải lấy theo
biến kích thước của khung ngắm. */
top: calc(var(--ch, 26px) / 2);
left: calc(var(--cw, 26px) / 2);
opacity: 1;
transform: translate(-50%, -50%);
}
/* vùng chữ: thu thành con nháy mảnh */
.tb-cursor.is-text .tb-cursor-box i { opacity: 0; }
.tb-cursor.is-text .tb-cursor-dot {
opacity: 1;
width: 1.5px; height: 22px;
margin: -11px 0 0 -.75px;
border-radius: 1px;
}
/* nhấn chuột: khung siết vào */
.tb-cursor.is-down .tb-cursor-box { transform: scale(.82); }
.tb-cursor-box { transform-origin: 50% 50%; }
}
/* ==========================================================================
2. Nút nam châm + chiều sâu khi hover ảnh
========================================================================== */
.tb-mag { will-change: transform; }
.tb-mag > * { pointer-events: none; }
.tb-depth { position: relative; overflow: hidden; }
.tb-depth > img {
transform: scale(1.001);
transition: transform 1.1s var(--tb-ease), filter 1.1s var(--tb-ease);
will-change: transform;
}
.tb-depth::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 34%, rgba(255, 244, 214, .22) 50%, transparent 66%);
transform: translateX(-110%);
transition: transform 1.05s var(--tb-ease);
pointer-events: none;
}
:is(.tb-service, .tb-infra-gallery figure, .tb-journey-track li, .tb-skyframe):hover .tb-depth > img,
.tb-depth:hover > img { transform: scale(1.065); filter: saturate(1.06) contrast(1.03); }
:is(.tb-service, .tb-infra-gallery figure, .tb-journey-track li, .tb-skyframe):hover .tb-depth::after,
.tb-depth:hover::after { transform: translateX(110%); }
/* gạch chân chạy cho các liên kết "xem thêm" */
.page-taxibay .tb-more a {
position: relative;
background-image: linear-gradient(currentColor, currentColor);
background-size: 0% 1px;
background-repeat: no-repeat;
background-position: left 100%;
text-decoration: none;
transition: background-size .55s var(--tb-ease);
}
.page-taxibay .tb-more a:hover { background-size: 100% 1px; }
/* ==========================================================================
3. Chuyển cảnh giữa các trang
========================================================================== */
.tb-pagefade {
position: fixed;
z-index: 9998;
inset: 0;
display: grid;
place-items: center;
pointer-events: none;
visibility: hidden;
}
.tb-pagefade i {
position: absolute;
inset: 0;
background: linear-gradient(170deg, #08111b 0%, #0d1a27 52%, #132436 100%);
transform: scaleY(0);
transform-origin: 50% 100%;
}
.tb-pagefade b {
position: relative;
width: 54px; height: 54px;
background: url("assets/airways-mark.svg") center / contain no-repeat;
opacity: 0;
transform: translateY(12px);
}
.tb-pagefade.is-on { visibility: visible; pointer-events: all; }
/* ==========================================================================
4. FLIGHT DECK HUD — signature
Cuộn trang được đọc như một chuyến bay: cao độ, tốc độ, pha bay và
vị trí trên tuyến đều bám theo tiến trình cuộn.
========================================================================== */
.tb-hud {
position: fixed;
z-index: 900;
left: clamp(16px, 3.4vw, 46px);
bottom: clamp(16px, 2.6vw, 34px);
display: grid;
gap: 10px;
padding: 14px 18px 13px;
min-width: 244px;
color: #f6efdf;
font-family: var(--font-body);
background: rgba(9, 17, 27, .58);
border: 1px solid rgba(224, 198, 141, .26);
border-radius: 3px;
backdrop-filter: blur(14px) saturate(1.2);
-webkit-backdrop-filter: blur(14px) saturate(1.2);
box-shadow: 0 18px 50px rgba(4, 10, 18, .38);
opacity: 0;
transform: translateY(14px);
transition: opacity .7s var(--tb-ease), transform .7s var(--tb-ease);
pointer-events: none;
}
.tb-hud.is-on { opacity: 1; transform: translateY(0); }
.tb-hud-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
font-size: 9px;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--tb-gold-lt);
}
.tb-hud-live { display: inline-flex; align-items: center; gap: 6px; }
.tb-hud-live::before {
content: "";
width: 5px; height: 5px;
border-radius: 999px;
background: #6fe0a8;
box-shadow: 0 0 0 0 rgba(111, 224, 168, .7);
animation: tbHudPulse 2.4s infinite;
}
@keyframes tbHudPulse {
0% { box-shadow: 0 0 0 0 rgba(111, 224, 168, .6); }
70% { box-shadow: 0 0 0 7px rgba(111, 224, 168, 0); }
100% { box-shadow: 0 0 0 0 rgba(111, 224, 168, 0); }
}
.tb-hud-phase { color: #fff8e8; }
.tb-hud-read {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.tb-hud-read div { display: grid; gap: 1px; }
.tb-hud-read b {
font-family: var(--font-title);
font-size: 19px;
font-weight: 600;
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -.02em;
color: #fff;
}
.tb-hud-read s {
text-decoration: none;
font-size: 8px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(246, 239, 223, .5);
}
.tb-hud-track {
position: relative;
height: 2px;
margin-top: 2px;
background: rgba(224, 198, 141, .2);
border-radius: 2px;
}
.tb-hud-track i {
position: absolute;
inset: 0 auto 0 0;
width: 0%;
background: linear-gradient(90deg, rgba(224, 198, 141, .5), var(--tb-gold-lt));
border-radius: 2px;
}
.tb-hud-craft {
position: absolute;
top: 50%;
left: 0;
width: 15px; height: 15px;
margin: -7.5px 0 0 -7.5px;
background: url("assets/airways-mark.svg") center / contain no-repeat;
filter: drop-shadow(0 0 6px rgba(224, 198, 141, .85));
}
@media (max-width: 900px) {
.tb-hud {
left: 12px; right: 12px; bottom: 12px;
min-width: 0;
padding: 10px 13px 11px;
gap: 7px;
}
.tb-hud-read b { font-size: 15px; }
}
@media (max-width: 560px) {
.tb-hud-top span:not(.tb-hud-phase) { display: none; }
}
/* thang cao độ gắn vào rail bên phải */
.tb-rail-alt {
position: absolute;
right: 100%;
top: 50%;
margin-right: 14px;
transform: translateY(-50%);
font-family: var(--font-body);
font-size: 9px;
font-weight: 700;
letter-spacing: .14em;
color: var(--tb-gold);
font-variant-numeric: tabular-nums;
white-space: nowrap;
opacity: 0;
transition: opacity .5s ease;
}
.tb-rail.is-on .tb-rail-alt { opacity: .75; }
/* ==========================================================================
5. Tiêu đề biến thiên — tách ký tự, độ đậm chạy theo cuộn
========================================================================== */
.tb-split { display: block; }
.tb-line { display: block; overflow: hidden; }
.tb-word { display: inline-block; white-space: nowrap; }
.tb-char {
display: inline-block;
will-change: transform, opacity, font-variation-settings;
}
html.tb-varfont-armed .tb-split .tb-char {
opacity: 0;
transform: translateY(.62em);
font-variation-settings: "wght" 200;
}
/* dải chữ chạy ở dải thương hiệu */
.tb-marquee {
position: relative;
overflow: hidden;
padding: 26px 0 4px;
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.tb-marquee-row { display: flex; width: max-content; gap: 0; }
.tb-marquee span {
display: inline-flex;
align-items: center;
gap: 34px;
padding-right: 34px;
font-family: var(--font-title);
font-size: clamp(28px, 4.4vw, 62px);
font-weight: 300;
letter-spacing: -.02em;
line-height: 1.05;
white-space: nowrap;
color: rgba(255, 255, 255, .26);
}
.tb-marquee span i {
width: 9px; height: 9px;
border-radius: 999px;
background: var(--tb-gold-soft);
opacity: .75;
}
@keyframes tbMarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.tb-marquee-row { animation: tbMarquee 34s linear infinite; }
.tb-marquee:hover .tb-marquee-row { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { html:not(.tb-motion-forced) .tb-marquee-row { animation: none; } }
/* ==========================================================================
6. Lenis — bắt buộc để quán tính cuộn không đấu với scroll-behavior: smooth
========================================================================== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
/* ==========================================================================
7. Hoà giải với styles.css
styles.css đặt ".tb-hero h1 span { display: block }" cho hai dòng tiêu đề
hero, và tô vàng "h1 span:last-child". Sau khi tách ký tự, mỗi .tb-char
cũng là một nên dính cả hai quy tắc đó — phải trả lại đúng vai trò.
========================================================================== */
.page-taxibay :is(.tb-hero, .tb-phero) h1 :is(.tb-word, .tb-char),
.page-taxibay main :is(h1, h2, h3) :is(.tb-word, .tb-char) { display: inline-block; }
body.page-taxibay main > section:first-child h1 > span:first-child :is(.tb-word, .tb-char) {
color: #fff !important;
}
body.page-taxibay main > section:first-child h1 > span:last-child :is(.tb-word, .tb-char) {
color: #f2dda6 !important;
}
/* bóng đổ chỉ cần một lần trên dòng, không nhân lên theo từng ký tự */
body.page-taxibay main > section:first-child h1 :is(.tb-word, .tb-char) { text-shadow: none; }
body.page-taxibay main > section:first-child h1 > span { text-shadow: 0 2px 16px rgba(0, 0, 0, .7); }
/* ==========================================================================
8. Cảnh bay ở hero — tan dần ở mép để không tranh chấp với chữ và khối chỉ số
========================================================================== */
.tb-hero-net {
opacity: .8;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 58%, rgba(0,0,0,.35) 80%, transparent 96%);
mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 58%, rgba(0,0,0,.35) 80%, transparent 96%);
}
/* HUD tự mờ khi người đọc dừng lại, sáng trở lại lúc cuộn hoặc rê chuột vào. */
.tb-hud { pointer-events: auto; }
.tb-hud.is-on { opacity: .34; }
.tb-hud.is-on.is-live,
.tb-hud.is-on:hover { opacity: 1; }
/* dải chữ chạy nằm tràn hết chiều ngang dải thương hiệu */
.tb-band .tb-marquee {
position: relative;
z-index: 3;
margin: clamp(28px, 3.4vw, 52px) calc(var(--tb-shell) * -1) calc(var(--tb-shell) * -.4);
padding-left: var(--tb-shell);
}
/* .tb-depth đặt position: relative, nhưng các lớp ảnh nền vốn là absolute —
phải trả lại đúng kiểu định vị, nếu không ảnh nền sẽ chiếm chỗ trong grid
và đẩy chiều cao dải thương hiệu / hero trang con lên gấp đôi. */
.tb-hero-media.tb-depth,
.tb-band-media.tb-depth,
.tb-phero-media.tb-depth { position: absolute; }