/** * Landing page trang chủ (/) — chỉ nạp trên trang chủ (xem bstory_enqueue_assets). * * Nạp SAU story.css và nằm trong `.bstory`, nên dùng lại toàn bộ biến thiết kế ở đó * (--bstory-accent, --bstory-measure, ...). Đừng khai báo lại màu bằng số hex ở đây trừ * chỗ đã ghi rõ lý do — đổi màu thương hiệu phải chỉ sửa một nơi là story.css. * * HAI LUẬT VỀ CHUYỂN ĐỘNG (đọc trước khi thêm hiệu ứng mới): * 1. Mọi hiệu ứng "hiện dần khi cuộn" chỉ được ẩn phần tử khi * (script bootstrap trong gắn vào). Không có JS thì KHÔNG ẩn gì cả — nếu không * thì crawler và người tắt JS thấy trang trắng. * 2. Mọi animation phải tắt trong `prefers-reduced-motion: reduce` ở cuối file. */ /* ===================================================================== Hiện dần khi cuộn tới ===================================================================== */ .bstory-anim .bstory-home [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.75s cubic-bezier(0.22, 0.7, 0.28, 1), transform 0.75s cubic-bezier(0.22, 0.7, 0.28, 1); transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; } .bstory-anim .bstory-home [data-reveal].is-visible { opacity: 1; transform: none; } /* ===================================================================== Khung chung của các mục ===================================================================== */ /* Gỡ khổ 1200px của GeneratePress trên trang chủ (body class do bstory_body_class gắn). Bắt buộc phải làm ở tầng #page chứ không phải bên trong .bstory-home: hero có nền riêng (vệt màu loang), dải chữ chạy có đường kẻ trên/dưới, CTA cuối là một tấm màu — cả ba dừng lại ở mép 1200px thì cả trang lộ ra như một cái hộp đặt giữa nền trống, đúng cảm giác "bị bọc trong container". Header/footer của GP vốn đã full-bleed (chỉ phần ruột bị giới hạn) nên nới chỗ này là khớp luôn với chúng. */ body.bstory-home-page .site.grid-container { max-width: none; padding-left: 0; padding-right: 0; } .bstory-home { /* Khổ ngang riêng của landing page = ĐÚNG khổ ruột header/footer của GP (1200 với đệm 40px mỗi bên), để mép chữ hero thẳng hàng với logo phía trên và với chân trang phía dưới. Trang truyện vẫn giữ 1040 của story.css — hai loại trang khác nhau về mật độ chữ: trang truyện cần dòng ngắn để đọc liên tục, landing page thì không. */ --bstory-measure: 1200px; --bstory-home-gutter: 40px; overflow-x: clip; /* các khối trang trí (aurora, chip bay) tràn ra ngoài khổ — cắt ở đây thay vì để sinh thanh cuộn ngang cho cả trang. */ /* GIỮ NGUYÊN, đừng dọn đi vì "chẳng thấy tác dụng": GeneratePress để `.site-content` là flex container, nên khối này là một flex item — mà flex item mặc định lấy bề rộng theo max-content. Chỉ cần MỘT phần tử con rộng bất thường (trước đây là dải chữ chạy `width: max-content`) là cả trang phình gấp đôi màn hình và mọi thứ lệch sang phải. Dải chữ chạy đã bỏ, nhưng 4 dòng này là thứ chặn lỗi đó quay lại. */ flex: 1 1 auto; width: 100%; min-width: 0; max-width: 100%; } .bstory-home__section { max-width: var(--bstory-measure); margin: 0 auto; padding: 76px var(--bstory-home-gutter) 0; } /* Tiêu đề mục canh GIỮA: nội dung bên dưới mỗi mục đều là khối đối xứng chạy hết khổ (lưới 4 card, 3 bước, dãy chip chủ đề, tấm truyện nổi bật). Tiêu đề nép trái trong 620px phía trên một lưới cân đối đọc ra như bị lệch khỏi chính khối nó giới thiệu. Ngoại lệ là biến thể --row bên dưới: mục đó có link phụ ở mép phải nên bắt buộc là hàng trái–phải, canh giữa thì không còn chỗ cho link. */ .bstory-home__section-head { max-width: 620px; margin: 0 auto 34px; text-align: center; } /* Canh TRÁI cho mục có lưới card. Lưới card neo bên trái và hiếm khi lấp đầy hàng (3 card trên lưới 4 cột), nên tiêu đề canh giữa đọc ra như lệch khỏi khối nó giới thiệu — khác hẳn các mục có nội dung đối xứng (4 card đều, 3 bước, dãy chip) vốn canh giữa thì đúng. Luật: MỤC CÓ LƯỚI CARD thì canh trái, mục có khối đối xứng thì canh giữa. */ .bstory-home__section-head--left { margin-left: 0; margin-right: 0; text-align: left; } .bstory-home__section-head--row { max-width: none; margin-left: 0; margin-right: 0; text-align: left; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .bstory-home__section-title { font-family: 'Source Serif 4', Georgia, serif; font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 10px; color: var(--bstory-text-strong); text-wrap: balance; } .bstory-home__section-head--row .bstory-home__section-title { margin-bottom: 0; } .bstory-home__section-lede { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--bstory-muted-2); text-wrap: pretty; } .bstory-home__seeall { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--bstory-accent); text-decoration: none; } .bstory-home__seeall svg { width: 16px; height: 16px; transition: transform 0.2s ease; } .bstory-home__seeall:hover svg { transform: translateX(4px); } /* ===================================================================== Nút & nhãn dùng chung ===================================================================== */ .bstory-home__btn { display: inline-flex; align-items: center; gap: 9px; padding: 0 22px; height: 50px; border-radius: 100px; font-size: 15.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .bstory-home__btn svg { width: 18px; height: 18px; flex: none; transition: transform 0.2s ease; } .bstory-home__btn:hover { transform: translateY(-2px); } .bstory-home__btn:active { transform: translateY(0); } .bstory-home__btn:hover svg { transform: translateX(3px); } .bstory-home__btn--ghost:hover svg { transform: none; } .bstory-home .bstory-home__btn--primary { background: linear-gradient(140deg, var(--bstory-accent), var(--bstory-accent-hover)); color: #fff; box-shadow: 0 10px 24px -12px rgba(47, 111, 106, 0.85); } .bstory-home .bstory-home__btn--primary:hover { color: #fff; box-shadow: 0 16px 30px -12px rgba(47, 111, 106, 0.95); } .bstory-home .bstory-home__btn--ghost { background: var(--bstory-surface); border: 1px solid var(--bstory-border); color: var(--bstory-text); } .bstory-home .bstory-home__btn--ghost:hover { border-color: var(--bstory-accent); color: var(--bstory-accent); } /* Nút trên nền accent đặc ở khối CTA cuối trang. */ .bstory-home .bstory-home__btn--light { background: #fff; color: #1f4f4b; box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.6); } .bstory-home .bstory-home__btn--light:hover { color: #1f4f4b; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12), 0 14px 30px -14px rgba(0, 0, 0, 0.7); } .bstory-home__pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; padding: 5px 11px; border-radius: 100px; background: var(--bstory-badge-bg); color: var(--bstory-badge-text); white-space: nowrap; } .bstory-home__pill svg { width: 13px; height: 13px; } .bstory-home__pill--accent { background: var(--bstory-accent-bg); color: var(--bstory-accent-text); font-weight: 600; } /* ===================================================================== Hero ===================================================================== */ .bstory-home__hero { position: relative; isolation: isolate; /* giữ lớp aurora (z-index âm) nằm trong hero, không chui xuống dưới nền trang và biến mất. */ /* Chừa chỗ cho cảnh bình minh ở chân hero — chữ và nút phải nằm trọn phía trên nó, đúng như tấm CTA cuối chừa chỗ cho dải đồi. */ padding-bottom: 112px; overflow: hidden; } /* ===================================================================== Cảnh bình minh ở chân hero Cùng bộ kỹ thuật với cảnh đêm ở CTA cuối (xem phần đó): núi kéo giãn ngang bằng `preserveAspectRatio="none"`, khóm tre giữ tỉ lệ nên là SVG riêng, quầng sáng dùng `mix-blend-mode: screen` để LÀM SÁNG nền thay vì trộn ra màu đục. Màu núi đi qua biến để đảo được theo nền sáng/tối: nền tối thì núi là bóng mực, nền sáng thì núi là vệt teal nhạt (đổ mực đen lên nền cream ra màu xám bẩn). ===================================================================== */ .bstory-home__dawn { /* Trong nền tối, mọi thứ của cảnh phải SÁNG HƠN nền chứ không tối hơn. Bóng đen trên trời đêm là vô hình — bản đầu vẽ tre và cò bằng mực tối rồi mất hút, phải sửa lại. (Cảnh đêm ở CTA cuối làm ngược được vì trời ở đó là dải teal sáng, không phải nền trang gần đen.) */ --bstory-ridge-far: rgba(126, 196, 186, 0.10); --bstory-ridge-near: rgba(126, 196, 186, 0.19); /* Màu ĐẶC + độ mờ đặt trên cả hình, KHÔNG phải màu rgba nửa trong suốt trên từng nét: con trâu có đầu chồng lên thân và sừng vắt qua lưng, mà màu nửa trong suốt thì chỗ chồng nhau cộng alpha và sáng bật lên như vết vá. */ --bstory-scene-solid: #9ed6cc; --bstory-scene-mo: 0.42; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; z-index: -1; pointer-events: none; /* Tan dần vào nền ở mép dưới. Trước đây dải chữ chạy che chỗ này; bỏ dải chữ đi thì chân cảnh thành một đường cắt ngang thẳng băng, đọc ra như ảnh bị crop. */ mask-image: linear-gradient(to bottom, #000 0 68%, rgba(0, 0, 0, 0.5) 86%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 0 68%, rgba(0, 0, 0, 0.5) 86%, transparent 100%); } html:not(.bstory-dark) .bstory-home__dawn { --bstory-ridge-far: rgba(47, 111, 106, 0.16); --bstory-ridge-near: rgba(47, 111, 106, 0.28); --bstory-scene-solid: #2f6f6a; --bstory-scene-mo: 0.55; } .bstory-home__sunglow { position: absolute; left: 50%; bottom: -46%; width: 900px; max-width: 92%; height: 300px; transform: translateX(-58%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 206, 138, 0.34), rgba(255, 186, 110, 0.10) 45%, transparent 70%); mix-blend-mode: screen; filter: blur(12px); } html:not(.bstory-dark) .bstory-home__sunglow { opacity: 0.55; mix-blend-mode: normal; } .bstory-home__ridges { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 220px; display: block; } .bstory-home__ridge-far { fill: var(--bstory-ridge-far); } .bstory-home__ridge-near { fill: var(--bstory-ridge-near); } /* Xóm nhà tranh + cây đa. ẨN MẶC ĐỊNH, chỉ hiện từ 1360px trở lên — không phải vì thẩm mỹ mà vì hết chỗ: khe trống giữa cánh diều và mép trái thẻ demo chỉ rộng ~63px ở 901px, ~150px ở 1200px, phải tới ~200px mới đủ cho một xóm 170px đứng có khoảng thở. Nhét bừa vào khổ hẹp là hoặc đè lên diều, hoặc chui sau thẻ demo (dải bình minh có z-index: -1, thẻ luôn nằm trên — xem phần đàn cò). Đo lại khe này nếu đổi `left` của cảnh chăn trâu, bề rộng cột hero, hay `--bstory-measure` của trang chủ. */ /* TÊN PHẢI KHÁC `__village` — class đó đã là nếp nhà sáng đèn của cảnh ĐÊM ở CTA cuối trang, và rule của nó nằm sau trong file nên sẽ đè lên. Đã dính đúng lỗi này một lần: xóm ở hero bị kéo về `left: 7%` của cảnh đêm và không đổi theo bề rộng màn hình. */ .bstory-home__hamlet { display: none; } @media (min-width: 1360px) { .bstory-home__hamlet { display: block; position: absolute; left: 39%; bottom: 64px; width: 170px; height: auto; fill: var(--bstory-scene-solid); /* Mờ hơn cảnh chăn trâu một bậc (0.42 -> 0.30): xóm ở XA hơn, và sương sớm thì càng xa càng nhạt. Cùng độ mờ thì hai thứ đọc ra cùng một mặt phẳng, mất chiều sâu. */ opacity: calc(var(--bstory-scene-mo) * 0.72); } } /* Khóm tre là ảnh qua mặt nạ (xem chú thích ở templates/home.php). Bề rộng đặt sao cho CHIỀU CAO dựng ra bằng đúng bản vẽ tay cũ (235 / 157 / 119px) — đổi ảnh khác tỉ lệ thì phải tính lại 3 con số này, nếu không khóm tre sẽ thò lên quá dải bình minh. */ .bstory-home__bamboo { position: absolute; right: 4%; bottom: 0; width: 150px; height: auto; fill: var(--bstory-scene-solid); opacity: var(--bstory-scene-mo); /* NGỌN TRE BỊ CẮT TRONG CHÍNH ẢNH NGUỒN, không phải do CSS: quét bamboo.png thấy một tàu lá chạm mép trên canvas (18px rộng ở hàng y=0, loe ra 40px ở y=5), tức phần ngọn đã mất từ lúc tạo ảnh. Cắt bớt ảnh KHÔNG chữa được — bụi tre dày, mọi đường cắt ngang đều xén qua giữa các tàu lá khác, chỉ dời vết cắt xuống thấp hơn. Nên xử lý như một hình bóng ở xa: cho ~9px trên cùng tan dần vào trời, đúng kỹ thuật đã dùng cho chân dải bình minh (`.bstory-home__dawn`). Vết cắt phẳng biến thành mép nhoè, đọc ra như sương chứ không như hình bị xén. Muốn chữa tận gốc thì phải vẽ/sinh lại bamboo.png có chừa lề phía trên. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9px); mask-image: linear-gradient(to bottom, transparent 0, #000 9px); } /* ----- Cảnh chăn trâu thả diều (một SVG chứa cả trâu, chú bé và diều) ----- */ .bstory-home__scene-play { position: absolute; left: 21%; bottom: 18px; width: 300px; height: 190px; /* Màu ĐẶC + opacity trên cả hình, KHÔNG dùng rgba trên từng nét: đầu trâu chồng lên thân và sừng vắt qua lưng, màu nửa trong suốt thì chỗ chồng nhau cộng alpha và sáng bật lên như vết vá. */ fill: var(--bstory-scene-solid); opacity: var(--bstory-scene-mo); } /* Diều đảo quanh ĐÚNG điểm buộc dây (212,46 trong hệ toạ độ viewBox) — nhờ vậy đầu dây đứng yên trong lúc cánh diều lắc, dây không rời khỏi tay chú bé. Đảo quanh tâm hình thì dây sẽ trượt ra khỏi tay mỗi nhịp. */ .bstory-home__kite { transform-origin: 212px 46px; animation: bstory-home-kite 8s ease-in-out infinite alternate; } .bstory-home__kite-spar, .bstory-home__kite-tail, .bstory-home__kite-string { fill: none; stroke: var(--bstory-scene-solid); stroke-linecap: round; } /* Nan chống phải SÁNG HƠN cánh diều mới thấy được: cùng một màu, nhưng cánh để hơi trong (fill-opacity .7) còn nan để đặc — chênh lệch đó vẽ ra hai thanh bắt chéo. Dùng màu khác thì hỏng nguyên tắc "cả cảnh một tông". */ .bstory-home__kite-sail { fill-opacity: 0.7; } .bstory-home__kite-spar { stroke-width: 1.4; } .bstory-home__kite-tail { stroke-width: 1.5; } /* Dây thả mảnh hơn hẳn phần còn lại: dây căng ngoài trời nhìn gần như một sợi tóc. */ .bstory-home__kite-string { stroke-width: 1; opacity: 0.5; } /* CHIỀU NGHIÊNG CỦA DIỀU — dễ làm ngược, đã làm ngược một lần rồi: Người thả đứng bên TRÁI, diều bay lên bên PHẢI, tức gió thổi từ trái sang phải. Diều đón gió bằng mặt dưới, nên **MŨI diều ngả VỀ PHÍA người thả** (sang trái) còn **ĐUÔI trôi xuôi ra xa** (sang phải). Xoay ÂM (ngược chiều kim đồng hồ) mới ra thế đó; xoay dương thì mũi chúi ra xa, nhìn như diều đang rơi úp. Dao động quanh mốc nghiêng (-31° … -22°), không đi qua phương thẳng đứng — qua 0° thì mỗi nhịp diều lại "chết gió" một lần. */ @keyframes bstory-home-kite { from { transform: rotate(-31deg); } to { transform: rotate(-22deg); } } /* Trâu + chú bé + dây: thở nhô lên 2px trong 5,5 giây. Đủ để cảnh không chết cứng, không đủ để ai nhận ra là đang có thứ gì chuyển động. Dây nằm trong nhóm này nên nhấp nhô cùng cậu bé. Hình bóng đi qua mặt nạ (maskUnits="userSpaceOnUse") vẫn dịch chuyển đúng theo transform của nhóm — mặt nạ tính trong hệ toạ độ ĐÃ áp transform, nên ảnh và đi cùng nhau. Đuôi không còn ve vẩy được nữa (nó nằm trong ảnh): đổi lại là một con trâu ra hình con trâu. Đánh đổi có ý thức, đừng cố dựng lại hoạt cảnh đuôi bằng path chồng lên ảnh. */ .bstory-home__buffalo { animation: bstory-home-tho 5.5s ease-in-out infinite alternate; } @keyframes bstory-home-tho { from { transform: translateY(0); } to { transform: translateY(-2px); } } /* Đàn cò ĐỨNG YÊN. Trước đây bay ngang cả dải trời trong 44 giây; bỏ đi vì cảnh bình minh giờ chỉ nên có MỘT thứ chuyển động (cánh diều) — hai vật thể cùng trôi ở hai chỗ khác nhau thì mắt bị kéo qua kéo lại, mà đây là nền của hero chứ không phải nội dung. ĐỘ CAO BỊ THẺ DEMO CHẶN TRẦN, không phải muốn để đâu cũng được. `.bstory-home__hero-art` thò xuống 84-106px vào dải bình minh (2 cột: ở nửa phải; 1 cột: chắn hết bề ngang), mà dải bình minh có `z-index: -1` nên thẻ luôn nằm ĐÈ LÊN. Đàn cò từng đặt ở 140px và biến mất hoàn toàn sau thẻ demo — bay ngang thì không ai để ý vì phần lớn hành trình vẫn hở, đứng yên thì mất hẳn. Trần đo được (mép dưới thẻ tới đáy dải, trừ chiều cao đàn cò): 82px ở ≥901px, 62px ở ≤900px, 45px ở ≤600px. Ba con số dưới đây chừa thêm ~10px an toàn. Lưu ý hộp của LUÔN cao 32px (chỉ `width` đổi theo khổ), nên ở khổ hẹp hình vẽ bị letterbox — mép trên hộp cao hơn mép trên đàn cò vài px, đo theo hộp là đo đúng phía an toàn. Đổi chiều cao thẻ demo, `padding-bottom` của hero hay chiều cao dải bình minh thì PHẢI đo lại — cách đo: dựng iframe trang chủ ở nhiều bề rộng rồi so hộp bao, xem docs/decisions.md. Bề ngang thì chốt ở 62% (55% ở ≤600px vì khóm tre bắt đầu từ ~73%): bên phải cảnh chăn trâu, chưa chạm lá tre. Ba thứ chia nhau một dải trời — đổi bề rộng khóm tre hay `left` của cảnh chăn trâu thì kiểm lại chỗ này. */ .bstory-home__birds { position: absolute; left: 62%; bottom: 72px; width: 96px; height: 32px; fill: none; stroke: var(--bstory-scene-solid); stroke-width: 2.2; stroke-linecap: round; opacity: var(--bstory-scene-mo); } .bstory-home__hero-inner { max-width: var(--bstory-measure); margin: 0 auto; padding: 64px var(--bstory-home-gutter) 40px; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); align-items: center; gap: 56px; } /* Ba vệt màu loang trôi rất chậm phía sau hero. Blur lớn + opacity thấp: mục đích là làm nền cream bớt phẳng, KHÔNG phải để nhìn thấy hình khối. */ .bstory-home__aurora { position: absolute; inset: -20% -10% auto -10%; height: 130%; z-index: -1; pointer-events: none; } .bstory-home__aurora span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.42; animation: bstory-home-drift 26s ease-in-out infinite alternate; } .bstory-home__aurora span:nth-child(1) { width: 46vw; height: 46vw; max-width: 560px; max-height: 560px; top: 2%; left: -6%; background: radial-gradient(circle at 35% 35%, rgba(47, 111, 106, 0.30), rgba(47, 111, 106, 0) 68%); } .bstory-home__aurora span:nth-child(2) { width: 40vw; height: 40vw; max-width: 500px; max-height: 500px; top: 26%; right: -4%; left: auto; background: radial-gradient(circle at 60% 40%, rgba(214, 158, 96, 0.28), rgba(214, 158, 96, 0) 68%); animation-duration: 32s; animation-delay: -8s; } .bstory-home__aurora span:nth-child(3) { width: 34vw; height: 34vw; max-width: 420px; max-height: 420px; bottom: -6%; left: 38%; background: radial-gradient(circle at 50% 50%, rgba(120, 160, 200, 0.22), rgba(120, 160, 200, 0) 70%); animation-duration: 38s; animation-delay: -16s; } @keyframes bstory-home-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(4%, -6%, 0) scale(1.14); } } .bstory-home__eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; border-radius: 100px; background: var(--bstory-accent-bg); font-size: 13px; /* Nhịp dọc của cột chữ hero (sau khi bỏ đoạn mô tả): tiêu đề và câu tiếng Anh là MỘT nhóm nên dính sát nhau (khe ~10px); khoảng thở lớn chỉ đặt GIỮA các nhóm — nhãn / tiêu đề+dịch / nút / gạch đầu dòng. Nới đều mọi khoảng thì khối lại rời rạc. Số ở đây (32px) lớn hơn khe MẮT THẤY (~28px) vì phần leading của dòng tiêu đề ăn bớt vài pixel — luôn đo lại chứ đừng tin con số trong CSS. */ margin-bottom: 32px; } .bstory-home__eyebrow-vi { color: var(--bstory-accent-text); font-weight: 600; } /* Câu tiếng Anh in nghiêng và nhạt hơn — đúng thứ bậc dùng ở mọi nơi khác trong site (tiếng Việt là bản chính, tiếng Anh là bản đối chiếu). */ .bstory-home__eyebrow-en { color: var(--bstory-accent-text); opacity: 0.72; font-style: italic; } .bstory-home__eyebrow-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; color: var(--bstory-accent); opacity: 0.5; flex: none; } .bstory-home__title { font-family: 'Source Serif 4', Georgia, serif; /* Cận dưới 31px (không phải 38px) để ở khổ 375px MỖI VẾ vừa đúng một dòng — 38px thì vế đầu tràn sang dòng thứ ba, tiêu đề thành 3 dòng lệch. Hệ số 4vw (không phải 5vw): trong khoảng 900-1100px, hero vẫn là 2 cột nên cột chữ hẹp đi NHANH HƠN mức cỡ chữ giảm theo vw — để 5vw thì tiêu đề vỡ thành 4 dòng đúng ở dải màn hình laptop nhỏ. Đã quét đo ở 1400 / 1200 / 1024 / 935 / 375. */ font-size: clamp(31px, 4vw, 56px); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 16px; color: var(--bstory-text-strong); /* Chia dòng cho cân thay vì để dòng cuối trơ một chữ ("Truyện cổ tích Việt / Nam,"). Trình duyệt chưa hỗ trợ thì bỏ qua, không ảnh hưởng gì. */ text-wrap: balance; } /* ----- Câu tiếng Anh dưới tiêu đề ----- */ .bstory-home__title-en { display: flex; align-items: flex-start; gap: 10px; margin: -6px 0 42px; padding-left: 2px; font-family: 'Source Serif 4', Georgia, serif; font-style: italic; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.35; color: var(--bstory-muted); } .bstory-home__turn { flex: none; width: 22px; height: 20px; margin-top: 2px; fill: none; stroke: var(--bstory-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; } .bstory-home__lede { font-size: 17px; line-height: 1.7; color: var(--bstory-muted-2); margin: 0 0 30px; max-width: 33em; text-wrap: pretty; } .bstory-home__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; } .bstory-home__trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; } .bstory-home__trust li { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--bstory-muted); } .bstory-home__trust svg { width: 16px; height: 16px; color: var(--bstory-accent); flex: none; } /* ----- Khối demo song ngữ ----- */ .bstory-home__hero-art { position: relative; /* home.js đẩy giá trị parallax vào biến này khi cuộn (0 khi tắt chuyển động). */ transform: translateY(var(--bstory-parallax, 0px)); } /* ===================================================================== Chồng thẻ 3D ở hero (2.5.0) Ba thẻ nằm CHỒNG trong MỘT ô grid — không dùng position:absolute vì absolute thì khối mất chiều cao và phải đo bằng JS. Grid một-ô cho hai thứ miễn phí: chiều cao khối bằng thẻ cao nhất, và cả ba thẻ tự bằng nhau (grid item mặc định `stretch`) nên lúc xoay không có thẻ nào cao thấp lệch làm cả khối giật. ===================================================================== */ .bstory-home__deck { display: grid; /* Điểm nhìn đặt lệch lên trên: các thẻ sau lùi về phía sau VÀ lên trên, giống một chồng bài đang được cầm nghiêng, chứ không phải ba tấm dán phẳng lên nhau. */ /* 1100px chứ không 1500: phối cảnh càng NGẮN thì độ méo càng mạnh, thẻ lùi ra sau càng co lại rõ và góc xoay càng "ăn" — đó mới là thứ đọc ra 3D. Perspective dài thì mọi thứ gần như chiếu song song, thẻ sau chỉ giống bản thu nhỏ. */ perspective: 1100px; perspective-origin: 50% 30%; } .bstory-home__deck-item { grid-area: 1 / 1; /* Thẻ sau phải nằm DƯỚI thẻ trước; z-index đặt theo data-pos ở dưới. */ position: relative; transform-style: preserve-3d; transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.85s ease; will-change: transform; } /* Mặt trước. */ .bstory-home__deck-item[data-pos="0"] { z-index: 3; opacity: 1; transform: none; } /* Hai thẻ sau: lùi theo trục Z, nhích lên và sang phải, xoay nhẹ quanh trục Y. Xoay là thứ làm nó ĐỌC RA 3D — chỉ thu nhỏ thì trông như ba tấm ảnh khác cỡ. Giữ độ mờ đủ cao để vẫn thấy đó là thẻ truyện thật, không phải bóng trang trí. */ /* HAI THẺ SAU NẰM HAI BÊN, thẻ chính ở giữa (2.5.5) — kiểu coverflow, không phải xoè một bên như bản 2.5.3. Ràng buộc đã đo: cột phải hero rộng 521px. Thẻ 360px đặt GIỮA cột thì còn đúng ~80px trống mỗi bên — vừa đủ cho mỗi thẻ sau lộ ra một dải ~70px. Thẻ phải nhỏ hơn cột thì mới có hai khe này; để thẻ rộng bằng cột là không còn bên nào để lộ. Hai thẻ sau cùng độ sâu (z -420) và xoay ĐỐI XỨNG (+16° / -16°) — lệch độ sâu giữa hai bên sẽ đọc ra như đặt sai chứ không ra chiều sâu. LÙI SÂU THÌ PHẢI ĐẨY RA XA HƠN (2.5.7): z -420 thu thẻ còn 0,72 lần, tức hai mép của nó tự thụt vào ~50px mỗi bên; giữ nguyên lệch ±97px thì dải lộ ra chỉ còn ~22px, lùi sâu xong lại thành ít thấy hơn trước. Công thức: dải lộ = lệch_màn_hình − (nửa bề ngang thẻ) × (1 − tỉ lệ thu). Và `translateX` là trước phép chiếu nên lệch_màn_hình = translateX × tỉ lệ thu — ĐỪNG đọc thẳng con số px trong translate3d là khoảng cách nhìn thấy. */ .bstory-home__deck-item { justify-self: center; width: min(360px, 100%); } /* Bên PHẢI = thẻ sắp tới lượt ra giữa. Sáng hơn thẻ bên trái vì nó là "cái tiếp theo", còn bên trái là cái vừa đi qua. */ .bstory-home__deck-item[data-pos="1"] { z-index: 2; opacity: 0.7; transform: translate3d(165px, -16px, -420px) rotateY(-16deg); } /* Bên TRÁI = thẻ vừa rời khỏi giữa. */ .bstory-home__deck-item[data-pos="2"] { z-index: 1; opacity: 0.45; transform: translate3d(-165px, -16px, -420px) rotateY(16deg); } /* Vòng ba chỗ thì luôn có MỘT thẻ phải nhảy từ mép trái sang mép phải. Cho nó mờ hẳn rồi mới nhảy (JS tắt transition đúng lúc nhảy — xem initDeck), nếu không nó trượt ngang qua trước mặt hai thẻ kia, ngược chiều với chuyển động chung. */ .bstory-home__deck-item[data-pos="leaving"] { z-index: 1; opacity: 0; } .bstory-home__deck-item.is-teleport { transition: none; } /* Ba chấm điều hướng dưới chồng thẻ. Nằm NGOÀI `.bstory-home__deck` (không phải trong ô grid chồng thẻ) nên nó trôi xuống dưới thẻ cao nhất một cách tự nhiên, không phải đoán toạ độ. */ .bstory-home__deck-dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; } .bstory-home__deck-dot { /* Vùng bấm rộng hơn hẳn chấm nhìn thấy: chấm 8px là quá nhỏ để nhắm chuột, mà phóng to chấm thì nó cạnh tranh với nội dung. Đệm trong suốt là cách có cả hai. */ appearance: none; border: 0; background: none; padding: 8px 6px; cursor: pointer; line-height: 0; } .bstory-home__deck-dot::before { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; color: var(--bstory-muted); opacity: 0.4; transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease; } .bstory-home__deck-dot:hover::before { opacity: 0.7; } /* Chấm đang chọn KÉO DÀI thành viên thuốc thay vì chỉ đổi màu: người mù màu vẫn phân biệt được, và ở cỡ 8px thì khác biệt hình dạng dễ thấy hơn khác biệt sắc độ. */ .bstory-home__deck-dot.is-active::before { width: 22px; border-radius: 100px; background: var(--bstory-accent); opacity: 1; } .bstory-home__deck-dot:focus-visible::before { outline: 2px solid var(--bstory-accent); outline-offset: 3px; } /* THẺ CHƯA Ở MẶT TRƯỚC THÌ ĐỨNG YÊN HOÀN TOÀN (2.6.3). Hai thứ vẫn chạy trên thẻ sau: animation `float` của `.demo` (trôi ±6px) và transition 0,35s của câu VI/EN mỗi lần vòng đổi ngôn ngữ chạy. Cả hai đều là chuyển động ở chỗ mắt không nhìn tới: nó vừa phá cảm giác "hai thẻ nằm yên phía sau", vừa bắt trình duyệt vẽ lại ba thẻ thay vì một. Dùng `animation-play-state: paused` chứ KHÔNG `animation: none`: none làm thẻ nhảy về mốc 0 của keyframes (lệch tới 6px) đúng lúc nó vừa được đưa ra mặt trước, mà cú nhảy đó không có transition nào che. Paused thì đóng băng tại chỗ và chạy tiếp liền mạch khi ra trước. Câu VI/EN vẫn ĐỔI theo (chỉ bỏ phần chuyển tiếp) — thẻ xoay tới phải sẵn đúng ngôn ngữ người dùng đang chọn, không phải đổi sau khi đã hiện ra. */ .bstory-home__deck-item:not([data-pos="0"]) .bstory-home__demo, .bstory-home__deck-item:not([data-pos="0"]) .bstory-home__chip, .bstory-home__deck-item:not([data-pos="0"]) .bstory-home__wave span { animation-play-state: paused; } .bstory-home__deck-item:not([data-pos="0"]) .bstory-home__demo-line, .bstory-home__deck-item:not([data-pos="0"]) .bstory-home__demo-tab { transition: none; } /* Chip (viên audio + viên từ vựng) CHỈ thuộc về thẻ mặt trước. Chúng nằm ngoài khung thẻ nên không bị bo góc cắt — thẻ sau tuy đã lùi ra sau và mờ đi, chip của nó vẫn thò ra ngoài thành mấy mẩu chữ lơ lửng. Đó mới là thứ làm khối trông rối, không phải chồng thẻ. */ .bstory-home__deck-item:not([data-pos="0"]) .bstory-home__chip { opacity: 0; transform: scale(0.9); } .bstory-home__chip { transition: opacity 0.4s ease, transform 0.4s ease; } /* Chỉ thẻ mặt trước bấm được. `inert` (JS đặt) đã chặn tương tác lẫn tab focus, đây chỉ là lớp phòng khi trình duyệt chưa hỗ trợ inert. */ .bstory-home__deck-item:not([data-pos="0"]) { pointer-events: none; } .bstory-home__demo { position: relative; background: var(--bstory-surface); border: 1px solid var(--bstory-border); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -34px rgba(38, 35, 32, 0.55), 0 2px 6px -2px rgba(38, 35, 32, 0.12); animation: bstory-home-float 7s ease-in-out infinite alternate; /* Cao bằng ô grid (= thẻ cao nhất trong chồng) để ba thẻ khít nhau khi xoay. Float vẫn nằm ở ĐÂY chứ không ở .bstory-home__deck-item: item đã dùng `transform` cho vị trí trong chồng, hai transform trên cùng một phần tử thì cái sau đè cái trước. */ height: 100%; display: flex; flex-direction: column; } @keyframes bstory-home-float { from { transform: translateY(-6px); } to { transform: translateY(6px); } } .bstory-home__demo-media { aspect-ratio: 2 / 1; background: var(--bstory-badge-bg); } .bstory-home__demo-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Lưới 3 hàng (tabs / câu / chân thẻ) chỉ để làm một việc: xếp CHỒNG hai câu VI và EN vào CÙNG một ô (cả hai đều `grid-row: 2`). Nhờ vậy chiều cao ô bằng câu dài hơn trong hai câu, đổi ngôn ngữ thì khung đứng yên — nếu để hai câu là hai khối thường thì mỗi lần đổi, cả thẻ demo lại nhảy cao/thấp. */ .bstory-home__demo-body { flex: 1; padding: 18px 20px 20px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; } .bstory-home__demo-tabs { grid-row: 1; justify-self: start; display: inline-flex; background: var(--bstory-badge-bg); border-radius: 8px; padding: 3px; gap: 2px; margin-bottom: 14px; } .bstory-home__demo-tab { border: none; background: transparent; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--bstory-muted-2); padding: 0 14px; height: 30px; border-radius: 6px; cursor: pointer; transition: background 0.18s ease, color 0.18s ease; } .bstory-home__demo-tab.is-active { background: var(--bstory-surface); color: var(--bstory-accent); box-shadow: 0 1px 3px rgba(38, 35, 32, 0.14); } /* Cả hai câu VI/EN LUÔN nằm trong DOM (luật SEO chung với switcher trang truyện) — chỉ ẩn bằng CSS theo data-demo, không bao giờ xoá/nạp lại bằng JS. */ .bstory-home__demo-line { grid-row: 2; grid-column: 1; min-width: 0; margin: 0; font-size: 16px; line-height: 1.65; color: var(--bstory-text); transition: opacity 0.35s ease, transform 0.35s ease; /* Chặn 3 dòng: ba truyện có đoạn mở đầu dài ngắn khác nhau, không chặn thì thẻ cao nhất kéo cả chồng cao theo và ăn vào dải bình minh phía dưới (xem chú thích ở hero-art). */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .bstory-home__demo-foot { grid-row: 3; } .bstory-home__deck[data-demo="vi"] .bstory-home__demo-line[data-lang="en"], .bstory-home__deck[data-demo="en"] .bstory-home__demo-line[data-lang="vi"] { opacity: 0; transform: translateY(6px); pointer-events: none; } .bstory-home__deck[data-demo="en"] .bstory-home__demo-line[data-lang="en"] { font-style: italic; } .bstory-home__demo-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bstory-border-light); font-size: 13.5px; color: var(--bstory-muted); } .bstory-home__demo-foot svg { width: 16px; height: 16px; color: var(--bstory-accent); flex: none; } .bstory-home__demo-foot a { color: var(--bstory-muted-2); text-decoration: none; font-weight: 600; } .bstory-home__demo-foot a:hover { color: var(--bstory-accent); } /* Hai thẻ nhỏ bay quanh khối demo. Từ 2.5.0 chúng neo theo `.bstory-home__deck-item` (mỗi thẻ trong chồng một bộ chip riêng, vì mỗi thẻ là một truyện khác) chứ không theo `.bstory-home__hero-art` nữa. Vẫn nằm NGOÀI `.bstory-home__demo` nên không bị cuốn theo animation float của thẻ — hai nhịp trôi lệch nhau mới ra cảm giác nhiều lớp. */ .bstory-home__chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 100px; background: var(--bstory-surface); border: 1px solid var(--bstory-border); box-shadow: 0 14px 30px -18px rgba(38, 35, 32, 0.7); font-size: 13px; font-weight: 600; color: var(--bstory-text); white-space: nowrap; z-index: 2; } .bstory-home__chip--audio { top: 16px; left: -26px; color: var(--bstory-accent-text); animation: bstory-home-float 5.5s ease-in-out -1.5s infinite alternate; } /* Viên audio là với toạ độ/cỡ/độ trễ truyền qua biến inline (xem home.php). Nhấp nháy LỆCH PHA nhau nhờ --d; cùng pha thì cả bầu trời "thở" một nhịp, lộ ngay là hiệu ứng máy móc. */ .bstory-home__night i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, 0.75); opacity: 0.5; animation: bstory-home-twinkle 3.4s ease-in-out infinite; animation-delay: var(--d); } @keyframes bstory-home-twinkle { 0%, 100% { opacity: 0.16; transform: scale(0.7); } 50% { opacity: 0.8; transform: scale(1); } } /* Sao băng: hiện chưa tới 1 giây trong mỗi 11 giây. Cố ý hiếm — thấy thường xuyên thì hết là "bắt gặp", thành ra một cái băng chuyền. Vệt đuôi là gradient trên chính phần tử, nghiêng 22 độ, chạy chéo xuống. */ .bstory-home__shoot { position: absolute; top: 12%; left: 62%; width: 120px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85)); opacity: 0; transform: rotate(22deg); animation: bstory-home-shoot 11s linear infinite; } @keyframes bstory-home-shoot { 0% { opacity: 0; transform: translate(0, 0) rotate(22deg); } 2% { opacity: 0.9; } 7% { opacity: 0; transform: translate(300px, 122px) rotate(22deg); } 100% { opacity: 0; transform: translate(300px, 122px) rotate(22deg); } } /* ----- Đồi + nếp nhà ----- */ .bstory-home__hills { position: absolute; left: 0; right: 0; bottom: -1px; /* -1px: tránh khe sáng 1px do làm tròn pixel ở một số tỉ lệ zoom */ width: 100%; height: 150px; display: block; } .bstory-home__hill-back { fill: rgba(8, 26, 25, 0.55); } .bstory-home__hill-front { fill: rgba(4, 16, 15, 0.85); } .bstory-home__village { position: absolute; left: 7%; bottom: 6px; width: 176px; height: auto; display: block; } .bstory-home__silhouette { fill: #08201e; } /* Ô cửa sổ là chi tiết ẤM DUY NHẤT trong cả cảnh — mắt tự bắt vào đó. Sáng yếu dần rồi mạnh lại như ánh đèn dầu, không phải nhấp nháy kiểu đèn LED. */ .bstory-home__window { fill: #ffd08a; filter: drop-shadow(0 0 8px rgba(255, 200, 130, 0.9)); animation: bstory-home-lamp 6s ease-in-out infinite; } .bstory-home__window-bar { stroke: #08201e; stroke-width: 1.6; fill: none; } @keyframes bstory-home-lamp { 0%, 100% { opacity: 0.78; } 50% { opacity: 1; } } .bstory-home__closing-en { font-family: 'Source Serif 4', Georgia, serif; font-style: italic; margin: 0 auto 18px !important; color: rgba(255, 255, 255, 0.62) !important; } .bstory-home__closing-inner h2 { font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(28px, 3.6vw, 38px); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px; color: #fff; } .bstory-home__closing-inner p { margin: 0 auto 26px; /* 46ch (khổ đọc văn xuôi) từng cắt câu mời 57 ký tự thành 2 dòng — ở đây chỉ có MỘT câu ngắn, một dòng liền mạch đọc gọn hơn hẳn. Vẫn giữ trần chứ không bỏ hẳn: nếu sau này ai viết câu dài thì nó còn xuống dòng ở khổ đọc được, thay vì kéo dài hết 1120px của tấm CTA. */ max-width: 62ch; font-size: 16.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.88); text-wrap: balance; } /* Đè lại cỡ chữ cho câu tiếng Anh: rule `.bstory-home__closing-inner p` ngay trên nặng hơn (`.class .class p`) nên khai báo cỡ ở class đơn của nó không có tác dụng — nhỏ hơn câu tiếng Việt một chút là đúng thứ bậc, nó là câu phụ. */ .bstory-home__closing-inner .bstory-home__closing-en { font-size: 16px; } /* ===================================================================== Nền tối Phần lớn tự đúng nhờ đọc biến từ story.css. Chỉ những chỗ dùng màu tuyệt đối (trắng trong veil/sheen, bóng đổ) mới cần chỉnh tay ở đây. ===================================================================== */ html.bstory-dark .bstory-home .bstory-home__feature::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.08), transparent); } html.bstory-dark .bstory-home .bstory-home__aurora span { opacity: 0.38; } html.bstory-dark .bstory-home .bstory-home__demo { box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.9); } html.bstory-dark .bstory-home .bstory-home__chip { box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.9); } html.bstory-dark .bstory-home .bstory-home__closing-inner { background: radial-gradient(120% 90% at 18% 8%, rgba(70, 140, 132, 0.45), transparent 60%), linear-gradient(150deg, #235450 0%, #1b3b39 45%, #122624 100%); } html.bstory-dark .bstory-home .bstory-home__closing-inner::after { opacity: 0.7; } /* Nền tối dùng teal SÁNG (#6fb3ac) làm màu nhấn, nên chữ trắng trên nút chính chỉ còn tương phản ~2:1 — đảo sang chữ xanh đậm. */ html.bstory-dark .bstory-home .bstory-home__btn--primary, html.bstory-dark .bstory-home .bstory-home__btn--primary:hover { color: #16302e; } html.bstory-dark .bstory-home .bstory-home__btn--light { background: #e8e3d9; color: #16302e; } /* ===================================================================== Khổ hẹp ===================================================================== */ @media (max-width: 900px) { .bstory-home__hero-inner { grid-template-columns: 1fr; gap: 44px; padding: 44px var(--bstory-home-gutter) 32px; } .bstory-home__hero { padding-bottom: 100px; } .bstory-home__dawn, .bstory-home__ridges { height: 170px; } .bstory-home__bamboo { width: 100px; right: 3%; /* Tre nhỏ lại thì dải nhoè phải co theo tỉ lệ, không thì 9px ăn quá sâu vào ngọn. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6px); mask-image: linear-gradient(to bottom, transparent 0, #000 6px); } .bstory-home__birds { bottom: 54px; width: 72px; } .bstory-home__scene-play { width: 232px; height: 147px; bottom: 14px; left: 16%; } .bstory-home__hero-art { max-width: 520px; } .bstory-home__chip--audio { left: -8px; } .bstory-home__spotlight-body { padding: 160px 26px 30px; } .bstory-home__step::before { display: none; } } @media (max-width: 600px) { .bstory-home { --bstory-home-gutter: 20px; } .bstory-home__section { padding: 56px var(--bstory-home-gutter) 0; } .bstory-home__hero-inner { padding: 32px var(--bstory-home-gutter) 26px; gap: 36px; } .bstory-home__section-title { font-size: 25px; } .bstory-home__section-lede { font-size: 15.5px; } .bstory-home__lede { font-size: 16px; } .bstory-home__title-en { font-size: 16.5px; margin-top: -2px; margin-bottom: 30px; } .bstory-home__eyebrow { margin-bottom: 22px; } .bstory-home__cta { margin-bottom: 26px; } .bstory-home__turn { width: 18px; height: 17px; } /* Cặp câu mở đầu ở khổ hẹp: cho phép xuống dòng trong viên thuốc thay vì tràn ngang. */ .bstory-home__eyebrow { flex-wrap: wrap; justify-content: center; row-gap: 2px; } /* Nút chiếm trọn bề ngang: ở khổ này hai nút đứng cạnh nhau thành hai nút hẹp, chữ tiếng Việt dài dễ xuống dòng trong nút. */ .bstory-home__cta { flex-direction: column; align-items: stretch; } .bstory-home__btn { justify-content: center; height: 52px; } /* Thẻ bay ra ngoài mép khung ở khổ hẹp sẽ bị `overflow-x: clip` cắt mất một nửa — kéo hẳn vào trong. */ .bstory-home__chip--audio { left: 8px; top: 10px; } .bstory-home__chip { font-size: 12px; padding: 7px 12px; } /* Vùng bấm 44px — cùng luật đã áp cho tab VI/EN và nút "Nghe thử". Nới bằng đệm trong suốt, không phóng to chấm. */ .bstory-home__deck-dot { padding: 18px 8px; } /* VÙNG BẤM 44px trên điện thoại — cùng luật đã áp cho tab ngôn ngữ và nút đọc ở trang truyện (chuẩn Apple HIG). Ở đây có 4 chỗ hụt: hai tab VI/EN của thẻ demo (30px), nút "Nghe thử" (34px), và hai link chữ đứng một mình (20-22px) — link chữ thì nới bằng đệm dọc chứ không kéo cao cả dòng. */ .bstory-home__demo-tab { height: 44px; padding: 0 18px; } .bstory-home__audio-btn { padding: 12px 16px; } .bstory-home__demo-foot a { padding: 12px 0; } .bstory-home__seeall { padding: 11px 0; } .bstory-home__spotlight { min-height: 340px; } .bstory-home__spotlight-flag { top: 12px; right: 12px; font-size: 12px; padding: 6px 12px; } .bstory-home__spotlight-body { padding: 130px 20px 26px; } .bstory-home__closing { margin-top: 60px; padding: 0 var(--bstory-home-gutter) 60px; } .bstory-home__closing-inner { padding: 40px 22px 104px; border-radius: 20px; } .bstory-home__hills { height: 108px; } .bstory-home__village { width: 124px; left: 5%; } /* Ở khổ hẹp, trăng nằm góc trên-phải sẽ đứng ngay CẠNH tiêu đề (tiêu đề canh giữa, khoảng trống hai bên chỉ còn ~90px) — chật chội như hai thứ tranh chỗ nhau. Hạ trăng xuống mảng trời trống bên phải, phía trên dải đồi: chỗ đó không có chữ nào. */ .bstory-home__moon { width: 56px; height: 56px; top: auto; bottom: 118px; right: 16px; } .bstory-home__grid { gap: 20px; } .bstory-home__medal { width: 34px; height: 39px; top: 7px; left: 7px; } .bstory-home__feature-grid { gap: 16px; } .bstory-home__theme { width: 100%; min-height: 88px; } /* Đệm này nới 60 -> 88px (1.7.5), cùng lý do với 96->112 ở khổ rộng và 76->100 ở khổ vừa: thẻ demo thò xuống tận dải bình minh, không nới thì đàn cò hoặc bị thẻ đè, hoặc phải tụt xuống vùng mép dưới đang tan dần (mask của .bstory-home__dawn) và mờ đi. */ .bstory-home__hero { padding-bottom: 88px; } .bstory-home__dawn, .bstory-home__ridges { height: 132px; } .bstory-home__bamboo { width: 76px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5px); mask-image: linear-gradient(to bottom, transparent 0, #000 5px); } /* Ở khổ này khóm tre bắt đầu từ ~73% nên đàn cò phải lùi về 55%, không thì đè lên lá. */ .bstory-home__birds { left: 55%; bottom: 44px; width: 58px; } .bstory-home__scene-play { width: 186px; height: 118px; bottom: 8px; left: 12%; } } /* Máy rất hẹp (iPhone SE cũ, 320-360px): dải trời chỉ còn ~250px mà đã có cánh diều bên trái và khóm tre bên phải — đàn cò cỡ 58px chen vào là đè cả hai. Thu còn 44px và ép sát vào giữa khe. Đo ở 320px: hở 5px mỗi bên. */ @media (max-width: 380px) { .bstory-home__birds { left: 57.5%; width: 44px; } } /* Dưới 340px thì khe giữa cánh diều và khóm tre chỉ còn ~40px: nhét đàn cò vào là dính cả hai bên. Ẩn hẳn — mất ba con cò còn hơn có ba vệt dính vào lá tre. */ @media (max-width: 339px) { .bstory-home__birds { display: none; } } /* ===================================================================== Tắt chuyển động Người bật "giảm chuyển động" trong hệ điều hành: giữ nguyên bố cục, bỏ mọi thứ tự chạy. `[data-reveal]` phải trả về hiện sẵn, nếu không nội dung sẽ nằm ẩn vĩnh viễn khi IntersectionObserver không kịp/không chạy. ===================================================================== */ @media (prefers-reduced-motion: reduce) { .bstory-anim .bstory-home [data-reveal] { opacity: 1; transform: none; transition: none; } .bstory-home__aurora span, .bstory-home__demo, .bstory-home__chip, .bstory-home__wave span, .bstory-home__buffalo, .bstory-home__kite, .bstory-home__night i, .bstory-home__shoot, .bstory-home__window { animation: none; } /* Sao băng không chạy thì không được để nó đứng chình ình giữa trời — ẩn hẳn. */ .bstory-home__shoot { display: none; } /* Không nhấp nháy thì để sao đứng yên ở độ sáng vừa phải, đừng để nguyên 0.5 rồi trông như bụi bẩn trên nền. */ .bstory-home__night i { opacity: 0.45; } .bstory-home__hero-art { transform: none; } .bstory-home__btn, .bstory-home__card, .bstory-home__feature, .bstory-home__theme, .bstory-home__spotlight-img, .bstory-home__card-thumb img { transition: none; } .bstory-home__btn:hover, .bstory-home__card:hover, .bstory-home__feature:hover, .bstory-home__theme:hover { transform: none; } } /* KHỔ HẸP — ngưỡng 1080px chứ KHÔNG phải 900px. Hero chuyển về 1 cột ở 900, nhưng khoảng 901-1023 vẫn là 2 cột với cột phải hẹp (369-428px): thẻ 360px đặt giữa đó thì lệch ±97px là mép phải tràn khỏi hero 4-28px, và `overflow: hidden` của hero CẮT CỤT trong im lặng (không sinh thanh cuộn nên không có dấu hiệu nào). Lần đo đầu chỉ thử 900 và 1024 nên né đúng dải hỏng — ĐỔI SỐ NÀY THÌ PHẢI ĐO LẠI CẢ DẢI, không chỉ hai đầu mút. Dưới ngưỡng thì quay về kiểu chồng khít nhô lên trên: chiều dọc luôn còn chỗ. */ @media (max-width: 1080px) { .bstory-home__deck-item { width: 100%; } .bstory-home__deck-item[data-pos="1"] { transform: translate3d(0, -30px, -260px) rotateY(-5deg); } .bstory-home__deck-item[data-pos="2"] { transform: translate3d(0, -56px, -460px) rotateY(-8deg); opacity: 0.32; } } @media (prefers-reduced-motion: reduce) { /* Chồng thẻ vẫn xếp lớp (đó là bố cục, không phải hiệu ứng) nhưng bỏ hẳn chuyển tiếp; home.js cũng không hẹn giờ xoay khi người dùng bật giảm chuyển động. */ .bstory-home__deck-item { transition: none; } } /* * ===== Ảnh 16:9 (truyện vẽ bằng Google Flow, 18/08) — xem giải thích đầy đủ ở * story.css cạnh `.bstory-archive__card-thumb`. Cả hai khung dưới đây đều là thẻ ĐẠI * DIỆN CHO MỘT TRUYỆN (thẻ demo trong chồng xoay, thẻ lưới "Đọc nhiều nhất"/"Đọc tiếp"), * KHÔNG phải ảnh của trang đang xem — nên attribute đọc THEO TỪNG THẺ, không phải theo * page-level như `.bstory[data-image-ratio]` — trang chủ vốn đã trộn nhiều truyện khác * nhau trong cùng một danh sách. */ .bstory-home__demo-media[data-image-ratio="16:9"], .bstory-home__card-thumb[data-image-ratio="16:9"] { aspect-ratio: 16 / 9; }