908 lines
99 KiB
CSS
908 lines
99 KiB
CSS
:root {
|
|
--header-height: 78px;
|
|
--header-offset: var(--header-height);
|
|
--blue-900: #006fc9;
|
|
--blue-800: #007ddd;
|
|
--blue-700: #0087ef;
|
|
--blue-600: #0090ff;
|
|
--blue-500: #2aa2ff;
|
|
--blue-300: #82caff;
|
|
--blue-100: #dff1ff;
|
|
--blue-50: #f3faff;
|
|
--ink: #041f3a;
|
|
--muted: #63758a;
|
|
--line: rgba(8, 87, 184, .14);
|
|
--shadow: 0 24px 70px rgba(5, 52, 111, .13);
|
|
font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Arial, sans-serif;
|
|
color: var(--ink);
|
|
}
|
|
html.nav-is-hidden { --header-offset: 0px; }
|
|
|
|
* { box-sizing: border-box; }
|
|
html { scroll-behavior: smooth; }
|
|
body { margin: 0; overflow-x: hidden; background: #fff; }
|
|
a { color: inherit; text-decoration: none; }
|
|
img { display: block; max-width: 100%; }
|
|
button { font: inherit; }
|
|
.container { width: min(1260px, calc(100% - 56px)); margin: 0 auto; }
|
|
.site-shell { min-height: 100vh; }
|
|
main { min-height: 72vh; }
|
|
|
|
/* Navigation */
|
|
.site-header {
|
|
position: fixed; inset: 0 0 auto; z-index: 2000; height: 78px;
|
|
background: rgba(255, 255, 255, .88); border-bottom: 1px solid rgba(7, 59, 130, .1);
|
|
box-shadow: 0 8px 35px rgba(0, 81, 153, .055); backdrop-filter: blur(22px) saturate(145%); transform: translateY(0); will-change: transform; transition: transform .38s cubic-bezier(.2,.8,.2,1), background .3s, box-shadow .3s;
|
|
}
|
|
.site-header.scrolled { background: rgba(255,255,255,.97); box-shadow: 0 12px 34px rgba(0,72,135,.12); }
|
|
.site-header.header-hidden { transform: translateY(calc(-100% - 8px)); box-shadow: none; }
|
|
.site-header:focus-within { transform: translateY(0); }
|
|
.site-header::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, var(--blue-300), var(--blue-700)); }
|
|
.nav-wrap { width: min(1480px, calc(100% - 54px)); height: 100%; margin: auto; display: grid; grid-template-columns: 150px minmax(0,1fr) auto; align-items: center; gap: 18px; }
|
|
.brand { width: 150px; height: 56px; display: flex; align-items: center; overflow: hidden; }
|
|
.brand img { width: 100%; max-height: 52px; object-fit: contain; object-position: left center; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
|
|
.brand:hover img { transform: translateY(-2px) scale(1.025); }
|
|
.main-nav { min-width: 0; align-self: stretch; display: flex; align-items: stretch; justify-content: flex-end; gap: 0; }
|
|
.nav-item { position: relative; display: flex; align-items: center; }
|
|
.nav-item > a { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; color: #213b59; font-size: 14px; font-weight: 650; letter-spacing: .15px; white-space: nowrap; transition: color .25s ease; }
|
|
.nav-item > a i { width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s; }
|
|
.nav-item:hover > a i { transform: translateY(1px) rotate(225deg); }
|
|
.nav-item > a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--blue-500), var(--blue-700)); transition: left .3s ease, right .3s ease; }
|
|
.nav-item:hover > a, .nav-item > a.router-link-active, .nav-item > a.section-active { color: var(--blue-700); }
|
|
.nav-item:hover > a::after, .nav-item > a.router-link-active::after, .nav-item > a.section-active::after { left: 14px; right: 14px; }
|
|
.dropdown {
|
|
position: absolute; top: 72px; left: 50%; width: 190px; padding: 12px;
|
|
background: rgba(255,255,255,.97); border: 1px solid rgba(0,144,255,.14); border-radius: 14px;
|
|
box-shadow: 0 24px 65px rgba(3, 39, 86, .18); opacity: 0; visibility: hidden;
|
|
transform: translate(-50%, 13px) scale(.97); transform-origin: 50% 0; transition: .28s cubic-bezier(.2,.8,.2,1);
|
|
}
|
|
.dropdown::before { content: ""; position: absolute; left: 50%; top: -7px; width: 13px; height: 13px; background: #fff; border-left: 1px solid rgba(0,144,255,.14); border-top: 1px solid rgba(0,144,255,.14); transform: translateX(-50%) rotate(45deg); }
|
|
.nav-item:hover .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }
|
|
.dropdown-label { display: block; padding: 7px 12px 10px; color: var(--blue-500); font-size: 11px; font-weight: 800; letter-spacing: 2px; border-bottom: 1px solid var(--line); }
|
|
.dropdown a { position: relative; display: block; margin-top: 3px; padding: 12px 12px 12px 24px; border-radius: 8px; color: #40556d; font-size: 14px; font-weight: 500; transition: .22s ease; }
|
|
.dropdown a::before { content: ""; position: absolute; left: 10px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--blue-300); transform: translateY(-50%); transition: .22s; }
|
|
.dropdown a:hover, .dropdown a.router-link-active { color: var(--blue-700); background: var(--blue-50); transform: translateX(3px); }
|
|
.dropdown a:hover::before { background: var(--blue-600); box-shadow: 0 0 0 4px rgba(0,144,255,.12); }
|
|
.dropdown-mega { width: min(620px,calc(100vw - 48px)); padding: 18px; }
|
|
.dropdown-groups { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
|
|
.dropdown-group { min-width: 0; padding: 6px; border-radius: 11px; background: #f8fbff; }
|
|
.dropdown .dropdown-group-title { margin: 0; padding: 13px 14px; color: var(--blue-800); background: #eaf6ff; font-size: 14px; font-weight: 800; }
|
|
.dropdown .dropdown-group-title::before { display: none; }
|
|
.dropdown .dropdown-group-title:hover { transform: translateY(-2px); }
|
|
.nav-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
|
|
.language-switch { height: 38px; display: inline-grid; grid-template-columns: repeat(2,34px); align-items: center; padding: 3px; border: 1px solid rgba(0,144,255,.2); border-radius: 20px; background: var(--blue-50); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
|
|
.language-switch span,.language-switch a { height: 30px; display: grid; place-items: center; border-radius: 16px; font-size: 11px; font-weight: 800; letter-spacing: .4px; transition: color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease; }
|
|
.language-switch span { color: #fff; background: var(--blue-600); box-shadow: 0 6px 14px rgba(0,144,255,.25); }
|
|
.language-switch a { color: #49627a; }
|
|
.language-switch a:hover { color: var(--blue-700); background: #fff; transform: translateY(-1px); box-shadow: 0 5px 12px rgba(0,94,174,.1); }
|
|
.menu-toggle { display: none; width: 44px; padding: 9px; border: 0; border-radius: 9px; color: #fff; background: var(--blue-700); }
|
|
.menu-toggle span { display: block; height: 2px; margin: 5px 0; border-radius: 2px; background: currentColor; transition: .3s; }
|
|
|
|
/* Route and reveal motion */
|
|
.page-enter-active, .page-leave-active { transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
|
|
.page-enter-from { opacity: 0; transform: translateY(16px); }
|
|
.page-leave-to { opacity: 0; transform: translateY(-8px); }
|
|
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .75s ease var(--delay, 0ms), transform .8s cubic-bezier(.2,.8,.2,1) var(--delay, 0ms); }
|
|
.reveal.is-visible { opacity: 1; transform: translateY(0); }
|
|
|
|
/* Vue-native homepage */
|
|
.new-home { overflow: hidden; background: #fff; padding-top: 78px;}
|
|
.home-hero { position: relative; min-height: 800px; isolation: isolate; overflow: hidden; color: #fff; background: #0090ff; }
|
|
.home-hero-media { position: absolute; inset: 0; z-index: -4; width: 100%; overflow: hidden; background: #006fc9; }
|
|
.home-hero-slide { position: absolute; inset: 0; opacity: 0; background-position: center; background-size: cover; transform: translateX(20%) scale(1.055); transition: opacity 1.1s ease, transform 7s ease; }
|
|
.home-hero-slide.active { opacity: 1; transform: translateX(25%) scale(1.105); }
|
|
.home-hero-shade { position: absolute; inset: 0; z-index: -3; width: 100%; background: linear-gradient(90deg,transparent 45%,rgba(0,43,82,.04) 70%,rgba(0,20,42,.18) 100%); }
|
|
.home-hero-solid { position: absolute; inset: 0; z-index: -2; width: 100%; background: linear-gradient(90deg,#006fc9 0%,#0086ec 30%,#0090ff 45%,rgba(0,144,255,.98) 50%,rgba(0,144,255,.86) 55%,rgba(0,144,255,.56) 61%,rgba(0,144,255,.22) 68%,rgba(0,144,255,0) 76%); }
|
|
.home-hero-grid { display: none; }
|
|
.home-hero-ring { display: none; }
|
|
.home-hero-ring::after { content: ""; position: absolute; left: 12%; top: 12%; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 22px var(--blue-300); }
|
|
.ring-one { width: 570px; height: 570px; right: -160px; top: 120px; }.ring-two { width: 280px; height: 280px; right: 115px; top: 260px; animation-direction: reverse; animation-duration: 12s; }
|
|
.home-hero-content { min-height: 720px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
|
|
.home-eyebrow { display: flex; align-items: center; gap: 14px; color: var(--blue-300); font-size: 11px; font-weight: 800; letter-spacing: 4px; }
|
|
.home-eyebrow::before { content: ""; width: 42px; height: 2px; background: var(--blue-600); }
|
|
.home-hero h1 { margin: 22px 0 24px; max-width: 650px; font-size: clamp(66px,7.3vw,108px); line-height: .96; letter-spacing: -6px; text-shadow: 0 18px 45px rgba(0,69,132,.2); }
|
|
.home-hero h1 em { color: var(--blue-600); font-style: normal; }
|
|
.home-hero-content > p { max-width: 720px; margin: 0; color: rgba(255,255,255,.92); font-size: clamp(19px,1.45vw,23px); font-weight: 500; line-height: 1.75; text-align: center; text-wrap: balance; text-shadow: 0 5px 20px rgba(0,61,118,.16); }
|
|
.home-hero-actions { display: flex; align-items: center; gap: 16px; margin-top: 36px; }
|
|
.home-primary-button,.home-ghost-button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 11px; font-size: 13px; font-weight: 700; transition: .3s; }
|
|
.home-primary-button { gap: 30px; color: #fff; background: var(--blue-600); box-shadow: 0 16px 35px rgba(0,144,255,.3); }.home-primary-button span { transition: transform .25s; }.home-primary-button:hover { transform: translateY(-4px); box-shadow: 0 22px 42px rgba(0,144,255,.4); }.home-primary-button:hover span { transform: translateX(6px); }
|
|
.home-ghost-button { color: #fff; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.06); backdrop-filter: blur(10px); }.home-ghost-button:hover { border-color: var(--blue-300); background: rgba(0,144,255,.16); }
|
|
.home-hero-dots { position: absolute; left: 50%; bottom: 38px; z-index: 3; display: flex; align-items: center; gap: 9px; transform: translateX(-50%); }
|
|
.home-hero-dots button { width: 30px; height: 4px; padding: 0; border: 0; border-radius: 4px; background: rgba(255,255,255,.4); cursor: pointer; transition: width .3s ease, background .3s ease; }
|
|
.home-hero-dots button.active { width: 54px; background: #fff; }
|
|
.home-scroll { position: absolute; right: 34px; bottom: 36px; display: flex; align-items: center; gap: 13px; color: rgba(255,255,255,.48); font-size: 8px; letter-spacing: 2px; writing-mode: vertical-rl; }.home-scroll i { position: relative; display: block; width: 1px; height: 55px; overflow: hidden; background: rgba(255,255,255,.2); }.home-scroll i::after { content: ""; position: absolute; inset: -100% 0 auto; height: 100%; background: #fff; animation: scrollLine 2s ease-in-out infinite; }
|
|
.home-about { display: grid; grid-template-columns: minmax(360px,.9fr) minmax(0,1.1fr); gap: 95px; align-items: center; padding-top: 120px; padding-bottom: 130px; }
|
|
.home-honor-carousel { position: relative; min-height: 540px; overflow: hidden; border: 1px solid rgba(0,144,255,.14); border-radius: 30px 6px 30px 6px; background: linear-gradient(145deg,#fff,var(--blue-50)); box-shadow: var(--shadow); isolation: isolate; }
|
|
.home-honor-carousel::after { content: ""; position: absolute; inset: 0; z-index: 1; border: 1px solid rgba(255,255,255,.58); border-radius: inherit; pointer-events: none; }
|
|
.home-honor-slide { position: absolute; inset: 0; z-index: 0; opacity: 0; visibility: hidden; transform: scale(1.035); transition: opacity .75s ease, visibility .75s ease, transform 1.1s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
|
|
.home-honor-slide.active { z-index: 1; opacity: 1; visibility: visible; transform: scale(1); pointer-events: auto; }
|
|
.home-honor-slide img { width: 100%; height: 100%; padding: 26px; object-fit: contain; background: radial-gradient(circle at 50% 42%,#fff 0%,#f4faff 72%,#e2f3ff 100%); }
|
|
.home-honor-slide > div { position: absolute; inset: auto 0 0; display: flex; flex-direction: column; gap: 8px; padding: 80px 32px 70px; color: #fff; background: linear-gradient(transparent,rgba(0,75,139,.92)); }
|
|
.home-honor-slide small { color: rgba(255,255,255,.7); font-size: 9px; font-weight: 800; letter-spacing: 2px; }
|
|
.home-honor-slide strong { max-width: 82%; font-size: clamp(22px,2.2vw,32px); line-height: 1.3; }
|
|
.home-honor-controls { position: absolute; right: 22px; bottom: 20px; left: 22px; z-index: 3; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
|
|
.home-honor-controls > button { width: 38px; height: 38px; padding: 0; color: #fff; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; background: rgba(0,107,201,.45); backdrop-filter: blur(10px); cursor: pointer; pointer-events: auto; transition: transform .25s ease, background .25s ease; }
|
|
.home-honor-controls > button:hover { background: var(--blue-600); transform: translateY(-2px); }
|
|
.home-honor-controls > div { display: flex; align-items: center; gap: 7px; pointer-events: auto; }
|
|
.home-honor-controls > div button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.45); cursor: pointer; transition: width .3s ease, background .3s ease; }
|
|
.home-honor-controls > div button.active { width: 28px; background: #fff; }
|
|
.home-about-image { position: relative; }.home-about-image::before { content: ""; position: absolute; left: -22px; bottom: -22px; width: 72%; height: 70%; background: var(--blue-100); border-radius: 28px 5px 28px 5px; }.home-about-image img { position: relative; z-index: 1; width: 100%; min-height: 540px; object-fit: cover; border-radius: 30px 6px 30px 6px; box-shadow: var(--shadow); }.home-about-image > span { position: absolute; right: -28px; bottom: 55px; z-index: 2; padding: 18px 22px; color: #fff; border-radius: 12px 3px 12px 3px; background: var(--blue-600); box-shadow: 0 15px 36px rgba(0,144,255,.3); font-size: 10px; font-weight: 800; letter-spacing: 2px; }
|
|
.home-section-label { color: var(--blue-600); font-size: 10px; font-weight: 800; letter-spacing: 4px; }
|
|
.home-about-copy h2 { margin: 14px 0 28px; color: var(--ink); font-size: clamp(38px,4.4vw,59px); line-height: 1.22; letter-spacing: -3px; }.home-about-copy > p { max-width: 690px; margin: 0; color: #536b83; font-size: 15px; line-height: 2; }
|
|
.home-about-points { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 30px 0; }.home-about-points span { position: relative; padding: 18px 16px 18px 28px; color: #35516c; border: 1px solid var(--line); border-radius: 11px; background: var(--blue-50); font-size: 12px; line-height: 1.5; }.home-about-points span::before { content: ""; position: absolute; left: 13px; top: 24px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-600); box-shadow: 0 0 0 4px rgba(0,144,255,.12); }
|
|
.home-text-link { display: inline-flex; align-items: center; gap: 20px; color: var(--blue-700); font-size: 13px; font-weight: 800; }.home-text-link b { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--blue-600); transition: transform .3s; }.home-text-link:hover b { transform: rotate(45deg); }
|
|
.home-ecosystem { padding: 105px 0 120px; background: var(--blue-50); }
|
|
.home-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; margin-bottom: 48px; }.home-section-head > div > span { color: var(--blue-600); font-size: 10px; font-weight: 800; letter-spacing: 4px; }.home-section-head h2 { margin: 8px 0 0; color: var(--ink); font-size: clamp(38px,4.5vw,58px); letter-spacing: -3px; }.home-section-head > p { max-width: 490px; margin: 0; color: var(--muted); line-height: 1.85; }.home-section-head > a { color: var(--blue-700); font-size: 13px; font-weight: 700; }
|
|
.ecosystem-grid { display: grid; grid-template-columns: repeat(12,1fr); grid-auto-flow: dense; gap: 18px; }.ecosystem-card { position: relative; grid-column: span 4; min-height: 360px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 26px; color: #fff; border-radius: 22px 5px 22px 5px; background-position: center; background-size: cover; box-shadow: 0 16px 40px rgba(0,72,135,.12); transition: transform .45s, box-shadow .45s; }.ecosystem-card:nth-child(odd) { grid-column: span 8; }.ecosystem-card:nth-child(even) { grid-column: span 4; }.ecosystem-card:hover { transform: translateY(-8px); box-shadow: 0 28px 62px rgba(0,72,135,.22); }.ecosystem-overlay { position: absolute; inset: 0; background: linear-gradient(0deg,rgba(0,24,53,.94),rgba(0,60,110,.13) 75%); transition: background .4s; }.ecosystem-card:hover .ecosystem-overlay { background: linear-gradient(0deg,rgba(0,52,98,.96),rgba(0,144,255,.12) 80%); }.ecosystem-card > span,.ecosystem-card > div:last-child { position: relative; z-index: 1; }.ecosystem-card > span { align-self: flex-end; width: 36px; height: 36px; display: grid; place-items:center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; font-size: 10px; }.ecosystem-card small { color: var(--blue-300); font-size: 9px; font-weight: 800; letter-spacing: 2px; }.ecosystem-card h3 { margin: 7px 0 10px; font-size: 28px; }.ecosystem-card p { max-width: 450px; margin: 0 0 18px; color: rgba(235,247,255,.68); font-size: 13px; line-height: 1.7; }.ecosystem-card b { color: #fff; font-size: 11px; }
|
|
.home-products { padding: 110px 0 125px; color: #fff; background: linear-gradient(135deg,#0077d5 0%,#0090ff 62%,#38aaff 100%); }.home-section-head.light h2 { color: #fff; }.home-section-head.light > a { color: #fff; }
|
|
.home-product-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }.home-product-grid > a { padding: 15px 15px 26px; border: 1px solid rgba(255,255,255,.12); border-radius: 19px 4px 19px 4px; background: rgba(255,255,255,.06); transition: .4s; }.home-product-grid > a:hover { transform: translateY(-9px); border-color: rgba(130,202,255,.5); background: rgba(0,144,255,.14); box-shadow: 0 25px 55px rgba(0,0,0,.2); }.home-product-image { position: relative; height: 300px; overflow: hidden; border-radius: 13px 3px 13px 3px; background: #fff; }.home-product-image img { width: 100%; height: 100%; object-fit: contain; transition: transform .55s; }.home-product-grid > a:hover img { transform: scale(1.06); }.home-product-image span { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--blue-600); font-size: 9px; }.home-product-grid small { display: block; margin-top: 19px; color: var(--blue-300); font-size: 10px; font-weight: 800; }.home-product-grid h3 { min-height: 52px; margin: 8px 0 15px; font-size: 18px; line-height: 1.45; }.home-product-grid b { color: rgba(235,247,255,.55); font-size: 11px; }
|
|
.home-innovation { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; padding-top: 115px; padding-bottom: 115px; }.innovation-card { position: relative; min-height: 420px; overflow: hidden; padding: 48px; color: #fff; border-radius: 26px 5px 26px 5px; box-shadow: var(--shadow); transition: transform .4s; }.innovation-card:hover { transform: translateY(-8px); }.technology-card { background: linear-gradient(145deg,#0076d4,#0090ff 70%); }.health-card { background: linear-gradient(145deg,#0090ff,#42b1ff); }.innovation-card::before { content: ""; position: absolute; right: -80px; bottom: -100px; width: 310px; height: 310px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }.innovation-card > div { position: relative; z-index: 1; max-width: 480px; }.innovation-card small { color: var(--blue-100); font-size: 9px; font-weight: 800; letter-spacing: 3px; }.innovation-card h2 { margin: 12px 0 18px; font-size: 44px; }.innovation-card p { color: rgba(255,255,255,.8); line-height: 1.9; }.innovation-card b { display: block; margin-top: 35px; font-size: 12px; }.innovation-card > span { position: absolute; right: -8px; top: 50px; color: rgba(255,255,255,.1); font-size: 76px; font-weight: 900; letter-spacing: -4px; }
|
|
.home-news { padding: 110px 0 125px; background: var(--blue-50); }.home-news-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }.home-news-grid > a { overflow: hidden; border: 1px solid var(--line); border-radius: 20px 4px 20px 4px; background: #fff; box-shadow: 0 13px 34px rgba(0,72,135,.07); transition: .4s; }.home-news-grid > a:hover { transform: translateY(-8px); box-shadow: 0 25px 58px rgba(0,72,135,.15); }.home-news-image { position: relative; height: 260px; overflow: hidden; }.home-news-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }.home-news-grid > a:hover img { transform: scale(1.06); }.home-news-image span { position: absolute; left: 16px; top: 16px; padding: 8px 11px; color: #fff; border-radius: 7px; background: var(--blue-600); font-size: 9px; font-weight: 800; letter-spacing: 1px; }.home-news-grid > a > div:last-child { padding: 25px 26px 28px; }.home-news-grid small { color: var(--blue-600); font-size: 10px; font-weight: 800; }.home-news-grid h3 { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 59px; margin: 10px 0 13px; color: var(--ink); font-size: 20px; line-height: 1.48; }.home-news-grid p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; min-height: 69px; color: var(--muted); font-size: 13px; line-height: 1.75; }.home-news-grid b { color: var(--blue-700); font-size: 11px; }
|
|
.home-cta { position: relative; overflow: hidden; padding: 105px 0; color: #fff; text-align: center; background: var(--blue-600); }.home-cta::before { content: ""; position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px); background-size: 58px 58px; }.home-cta-orbit { position: absolute; width: 520px; height: 520px; right: -220px; top: -260px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }.home-cta .container { position: relative; z-index: 1; }.home-cta small { font-size: 9px; font-weight: 800; letter-spacing: 4px; }.home-cta h2 { max-width: 900px; margin: 16px auto 18px; font-size: clamp(38px,5vw,62px); line-height: 1.2; letter-spacing: -3px; }.home-cta p { color: rgba(255,255,255,.78); }.home-cta a { display: inline-flex; align-items: center; gap: 28px; margin-top: 25px; padding: 15px 22px; color: var(--blue-800); border-radius: 11px; background: #fff; box-shadow: 0 16px 35px rgba(0,44,85,.2); font-size: 13px; font-weight: 800; transition: transform .3s; }.home-cta a:hover { transform: translateY(-4px); }
|
|
|
|
/* Original homepage, recolored without changing its content */
|
|
.home-original { padding-top: 82px; background: var(--blue-50); }
|
|
.home-original .yuedong_head, .home-original .yuedong-menu-backdrop { display: none !important; }
|
|
.home-original { --color-primary: var(--blue-600) !important; --theme-color: var(--blue-600) !important; }
|
|
.home-original :is(a, button) { transition: color .28s ease, background-color .28s ease, border-color .28s ease, transform .28s ease, box-shadow .28s ease !important; }
|
|
.home-original :is(.btn, [class*="button"], [class*="more"]):hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(8,120,232,.2); }
|
|
.home-original :is(h1, h2, h3) { color: var(--ink); }
|
|
.home-original :is([class*="title"] span, [class*="number"], [class*="counter"]) { color: var(--blue-600); }
|
|
.home-original :is([class*="item"], [class*="card"], [class*="list"]) img { transition: transform .65s cubic-bezier(.2,.8,.2,1), filter .45s ease; }
|
|
.home-original :is([class*="item"], [class*="card"], [class*="list"]):hover img { transform: scale(1.035); filter: saturate(1.08); }
|
|
@supports (animation-timeline: view()) {
|
|
.home-original section { animation: homeReveal linear both; animation-timeline: view(); animation-range: entry 5% cover 25%; }
|
|
}
|
|
@keyframes homeReveal { from { opacity: .25; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
|
|
|
|
/* Yuedong Jumping Home */
|
|
.sports-hall-page { display: grid; width: 100%; min-width: 0; gap: 92px; }
|
|
.hall-kicker { color: var(--blue-600); font-size: 10px; font-weight: 900; letter-spacing: 3px; }
|
|
.sports-hall-page h3 { color: var(--ink); font-size: clamp(32px,4vw,52px); line-height: 1.18; letter-spacing: -2px; }
|
|
.hall-intro { position: relative; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(380px,.95fr); min-height: 590px; overflow: hidden; border-radius: 32px 7px 32px 7px; background: linear-gradient(125deg,#006fc9 0%,#0090ff 66%,#39b3ff 100%); box-shadow: 0 28px 70px rgba(0,92,175,.2); }
|
|
.hall-intro::before { content: ""; position: absolute; right: -160px; bottom: -330px; width: 760px; height: 760px; border: 2px solid rgba(255,225,0,.65); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,225,0,.08),0 0 0 160px rgba(255,225,0,.05); }
|
|
.hall-intro-copy { position: relative; z-index: 2; align-self: center; padding: 76px 20px 120px 70px; color: #fff; }
|
|
.hall-intro-copy .hall-kicker { color: #ffe500; }
|
|
.hall-intro-copy h3 { max-width: 650px; margin: 16px 0 26px; color: #fff; font-size: clamp(46px,5.4vw,76px); }
|
|
.hall-intro-copy h3 em { color: #ffe500; font-style: normal; }
|
|
.hall-intro-copy > p { max-width: 680px; margin: 0; color: rgba(255,255,255,.86); font-size: 16px; line-height: 2; }
|
|
.hall-goals { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
|
|
.hall-goals span { padding: 10px 14px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(255,255,255,.09); font-size: 12px; font-weight: 700; backdrop-filter: blur(8px); }
|
|
.hall-intro-visual { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; padding: 55px 25px 65px 0; }
|
|
.hall-intro-visual img { width: min(100%,610px); max-height: 510px; object-fit: contain; filter: drop-shadow(0 28px 35px rgba(0,47,91,.2)); animation: hallFloat 5s ease-in-out infinite; }
|
|
@keyframes hallFloat { 50% { transform: translateY(-12px); } }
|
|
.hall-stats { position: absolute; left: 70px; bottom: 38px; z-index: 3; display: flex; gap: 0; }
|
|
.hall-stats > div { min-width: 130px; padding: 0 24px; border-left: 1px solid rgba(255,255,255,.25); }
|
|
.hall-stats > div:first-child { padding-left: 0; border-left: 0; }
|
|
.hall-stats strong,.hall-stats span { display: block; }
|
|
.hall-stats strong { color: #fff; font-size: 26px; }
|
|
.hall-stats span { margin-top: 5px; color: rgba(255,255,255,.62); font-size: 10px; letter-spacing: 1px; }
|
|
.hall-science { display: grid; grid-template-columns: minmax(0,.88fr) minmax(420px,1.12fr); gap: 70px; align-items: center; }
|
|
.hall-section-copy h3,.hall-section-title h3,.hall-coach-copy h3,.hall-network-card h3,.hall-gallery-card h3 { margin: 13px 0 20px; }
|
|
.hall-section-copy > p,.hall-section-title > p,.hall-coach-copy > p,.hall-network-card p,.hall-gallery-card p { color: var(--muted); line-height: 1.9; }
|
|
.hall-concerns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
|
|
.hall-concerns span { padding: 10px 15px; color: #4b6178; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 8px 20px rgba(0,72,135,.05); font-size: 12px; }
|
|
.hall-assessment { padding: 38px; border: 1px solid rgba(0,144,255,.12); border-radius: 27px 6px 27px 6px; background: linear-gradient(145deg,#fff,#eef8ff); box-shadow: var(--shadow); }
|
|
.hall-assessment > small { color: var(--blue-600); font-size: 9px; font-weight: 900; letter-spacing: 3px; }
|
|
.hall-assessment ol { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
|
|
.hall-assessment li { display: grid; grid-template-columns: 55px 1fr; gap: 18px; align-items: center; padding: 18px; border-radius: 14px; background: #fff; box-shadow: 0 8px 22px rgba(0,72,135,.06); transition: transform .3s ease; }
|
|
.hall-assessment li:hover { transform: translateX(7px); }
|
|
.hall-assessment li > b { color: rgba(0,144,255,.25); font-size: 25px; }
|
|
.hall-assessment strong,.hall-assessment span { display: block; }
|
|
.hall-assessment strong { color: var(--ink); font-size: 16px; }
|
|
.hall-assessment span { margin-top: 5px; color: var(--muted); font-size: 12px; }
|
|
.hall-section-title { max-width: 780px; margin: 0 auto 44px; text-align: center; }
|
|
.hall-values-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
|
|
.hall-values-grid article { position: relative; min-height: 240px; overflow: hidden; padding: 27px 24px; border: 1px solid color-mix(in srgb,var(--value-color) 30%,#fff); border-radius: 20px 5px 20px 5px; background: #fff; box-shadow: 0 12px 34px rgba(0,72,135,.07); transition: transform .35s ease,box-shadow .35s ease; }
|
|
.hall-values-grid article::after { content: ""; position: absolute; right: -55px; bottom: -70px; width: 150px; height: 150px; border-radius: 50%; background: color-mix(in srgb,var(--value-color) 10%,transparent); }
|
|
.hall-values-grid article:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(0,72,135,.13); }
|
|
.hall-values-grid article > div { display: flex; align-items: baseline; gap: 7px; color: var(--value-color); }
|
|
.hall-values-grid article b { font-size: 42px; line-height: 1; }
|
|
.hall-values-grid article small { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
|
|
.hall-values-grid h4 { margin: 24px 0 12px; color: var(--value-color); font-size: 17px; }
|
|
.hall-values-grid p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
|
|
.hall-curriculum { width: 100%; min-width: 0; margin: 0; overflow: hidden; padding: 82px clamp(24px,5vw,64px); color: #fff; border-radius: 28px 6px 28px 6px; background: linear-gradient(135deg,#006fc9,#0090ff 62%,#42b5ff); }
|
|
.hall-section-title.light h3 { color: #fff; }
|
|
.hall-section-title.light .hall-kicker { color: #b9e4ff; }
|
|
.hall-section-title.light p { color: rgba(255,255,255,.72); }
|
|
.hall-levels { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
|
|
.hall-levels article { position: relative; min-height: 390px; padding: 28px 24px; border: 1px solid rgba(255,255,255,.17); border-radius: 22px 5px 22px 5px; background: rgba(255,255,255,.09); backdrop-filter: blur(10px); transition: transform .35s ease,background .35s ease; }
|
|
.hall-levels article:hover { transform: translateY(-8px); background: rgba(255,255,255,.15); }
|
|
.hall-levels article > span { position: absolute; right: 22px; top: 18px; color: rgba(255,255,255,.18); font-size: 38px; font-weight: 900; }
|
|
.hall-levels small { color: #bce6ff; font-size: 10px; font-weight: 800; letter-spacing: 1px; }
|
|
.hall-levels h4 { margin: 30px 0 8px; font-size: 30px; }
|
|
.hall-levels strong { color: #ffe500; font-size: 15px; }
|
|
.hall-levels p { min-height: 78px; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.75; }
|
|
.hall-levels ul { display: grid; gap: 9px; margin: 22px 0 0; padding: 0; list-style: none; }
|
|
.hall-levels li { padding-top: 9px; border-top: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.86); font-size: 12px; }
|
|
.hall-loop-steps { position: relative; display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
|
|
.hall-loop-steps::before { content: ""; position: absolute; top: 36px; right: 8%; left: 8%; height: 2px; background: linear-gradient(90deg,#a9ddff,#0090ff,#ffe500); }
|
|
.hall-loop-steps article { position: relative; padding: 78px 18px 24px; text-align: center; border: 1px solid var(--line); border-radius: 18px 4px 18px 4px; background: #fff; box-shadow: 0 12px 28px rgba(0,72,135,.07); }
|
|
.hall-loop-steps b { position: absolute; top: 15px; left: 50%; width: 43px; height: 43px; display: grid; place-items: center; color: #fff; border: 5px solid #fff; border-radius: 50%; background: var(--blue-600); box-shadow: 0 0 0 1px var(--line); transform: translateX(-50%); }
|
|
.hall-loop-steps h4 { margin: 0 0 10px; color: var(--ink); font-size: 18px; }
|
|
.hall-loop-steps p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
|
|
.hall-coaches { display: grid; grid-template-columns: minmax(0,1fr) minmax(430px,.86fr); gap: 70px; align-items: center; padding: 54px; border-radius: 28px 6px 28px 6px; background: linear-gradient(145deg,#f2faff,#fff); box-shadow: var(--shadow); }
|
|
.hall-coach-rhythm { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-top: 28px; }
|
|
.hall-coach-rhythm span { padding: 13px 15px; color: var(--muted); border-radius: 10px; background: #fff; font-size: 12px; }
|
|
.hall-coach-rhythm b { margin-right: 7px; color: var(--blue-600); }
|
|
.hall-coach-numbers { display: grid; gap: 12px; }
|
|
.hall-coach-numbers > div { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 20px; padding: 20px 24px; border: 1px solid rgba(0,144,255,.12); border-radius: 14px; background: #fff; }
|
|
.hall-coach-numbers strong { color: var(--blue-600); font-size: 30px; }
|
|
.hall-coach-numbers span { color: #3f5870; font-size: 14px; }
|
|
.hall-footprint { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
|
|
.hall-network-card,.hall-gallery-card { overflow: hidden; border: 1px solid var(--line); border-radius: 25px 5px 25px 5px; background: #fff; box-shadow: var(--shadow); }
|
|
.hall-network-card > div,.hall-gallery-card > div { padding: 34px 36px; }
|
|
.hall-network-card h3,.hall-gallery-card h3 { font-size: 30px; }
|
|
.hall-network-card img { display: block; width: 100%; height: 360px; padding: 16px 28px 30px; object-fit: contain; }
|
|
.hall-gallery-card { display: flex; flex-direction: column; background: #007cd9; }
|
|
.hall-gallery-card > img { order: 2; width: 100%; height: 410px; padding: 0 16px 18px; object-fit: contain; }
|
|
.hall-gallery-card > div { color: #fff; }
|
|
.hall-gallery-card small { color: #a8ddff; font-size: 9px; font-weight: 900; letter-spacing: 2px; }
|
|
.hall-gallery-card h3 { color: #fff; }
|
|
.hall-gallery-card p { color: rgba(255,255,255,.72); }
|
|
.hall-quote { max-width: 950px; margin: -20px auto 0; text-align: center; }
|
|
.hall-quote p { margin: 0; color: var(--ink); font-size: clamp(24px,3vw,36px); font-weight: 700; line-height: 1.65; letter-spacing: -1px; }
|
|
.hall-quote a { display: inline-flex; align-items: center; gap: 22px; margin-top: 28px; padding: 14px 20px; color: #fff; border-radius: 10px; background: var(--blue-600); box-shadow: 0 14px 30px rgba(0,144,255,.25); font-size: 13px; font-weight: 800; transition: transform .3s ease; }
|
|
.hall-quote a:hover { transform: translateY(-4px); }
|
|
|
|
@media (max-width: 1050px) {
|
|
.hall-intro { grid-template-columns: 1fr; }
|
|
.hall-intro-copy { padding-right: 60px; }
|
|
.hall-intro-visual { position: absolute; right: -80px; bottom: 0; width: 52%; opacity: .28; }
|
|
.hall-science,.hall-coaches { grid-template-columns: 1fr; }
|
|
.hall-values-grid,.hall-levels { grid-template-columns: repeat(2,1fr); }
|
|
.hall-footprint { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.sports-hall-page { gap: 64px; }
|
|
.hall-intro { min-height: 700px; border-radius: 22px 5px 22px 5px; }
|
|
.hall-intro-copy { align-self: start; padding: 55px 24px 185px; }
|
|
.hall-intro-copy h3 { font-size: 46px; }
|
|
.hall-intro-copy > p { font-size: 14px; }
|
|
.hall-intro-visual { right: -20px; bottom: 20px; width: 78%; padding: 0; opacity: .24; }
|
|
.hall-stats { right: 22px; bottom: 28px; left: 22px; justify-content: space-between; }
|
|
.hall-stats > div { min-width: 0; padding: 0 12px; }
|
|
.hall-stats strong { font-size: 21px; }
|
|
.hall-science { gap: 32px; }
|
|
.hall-assessment { padding: 22px 17px; }
|
|
.hall-assessment li { grid-template-columns: 42px 1fr; gap: 10px; padding: 15px 12px; }
|
|
.hall-values-grid,.hall-levels { grid-template-columns: 1fr; }
|
|
.hall-values-grid article { min-height: 205px; }
|
|
.hall-curriculum { padding-top: 70px; padding-bottom: 70px; }
|
|
.hall-levels article { min-height: 0; }
|
|
.hall-levels p { min-height: 0; }
|
|
.hall-loop-steps { grid-template-columns: 1fr; }
|
|
.hall-loop-steps::before { top: 25px; bottom: 25px; left: 31px; width: 2px; height: auto; }
|
|
.hall-loop-steps article { padding: 21px 20px 21px 78px; text-align: left; }
|
|
.hall-loop-steps b { top: 50%; left: 31px; transform: translate(-50%,-50%); }
|
|
.hall-coaches { gap: 35px; padding: 30px 22px; }
|
|
.hall-coach-numbers > div { grid-template-columns: 105px 1fr; padding: 17px; }
|
|
.hall-coach-numbers strong { font-size: 25px; }
|
|
.hall-network-card > div,.hall-gallery-card > div { padding: 28px 24px; }
|
|
.hall-network-card img { height: 270px; padding: 8px 12px 22px; }
|
|
.hall-gallery-card > img { height: 310px; }
|
|
}
|
|
|
|
/* Inner page hero */
|
|
.page-hero { position: relative; height: clamp(350px, 38vw, 460px); padding-top: 78px; isolation: isolate; overflow: hidden; background: #0090ff center/cover no-repeat; }
|
|
.page-hero::after { content: ""; position: absolute; inset: auto 0 0; z-index: 2; height: 48px; background: linear-gradient(transparent, rgba(3,26,61,.24)); }
|
|
.hero-shade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(100deg,rgba(0,89,168,.92) 0%,rgba(0,144,255,.66) 50%,rgba(0,144,255,.22) 86%),linear-gradient(0deg,rgba(0,111,201,.4),transparent 58%); }
|
|
.hero-grid { position: absolute; inset: 0; z-index: 0; opacity: .1; background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px); background-size: 60px 60px; mask-image: linear-gradient(90deg,#000,transparent 78%); }
|
|
.hero-orbit { position: absolute; z-index: 0; border: 1px solid rgba(120,197,255,.28); border-radius: 50%; animation: orbit 16s linear infinite; }
|
|
.hero-orbit::before { content: ""; position: absolute; left: 12%; top: 10%; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 18px var(--blue-300); }
|
|
.hero-orbit-one { right: -100px; top: 28px; width: 390px; height: 390px; }
|
|
.hero-orbit-two { right: 105px; top: 110px; width: 190px; height: 190px; opacity: .14; animation-direction: reverse; animation-duration: 11s; }
|
|
@keyframes orbit { to { transform: rotate(360deg); } }
|
|
.hero-copy { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; color: #fff; }
|
|
.hero-copy > span { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.72); font-size: 10px; font-weight: 800; letter-spacing: 4px; }
|
|
.hero-copy > span::before { content: ""; width: 38px; height: 2px; background: var(--blue-300); }
|
|
.hero-copy h1 { margin: 11px 0 13px; max-width: 900px; font-size: clamp(40px, 5vw, 68px); line-height: 1.06; letter-spacing: -3px; text-shadow: 0 12px 38px rgba(0,0,0,.2); }
|
|
.hero-copy p { max-width: 600px; margin: 0; color: rgba(235,247,255,.84); font-size: 15px; line-height: 1.75; }
|
|
.hero-line { display: flex; align-items: center; gap: 12px; margin-top: 19px; }
|
|
.hero-line i { display: block; width: 72px; height: 1px; background: linear-gradient(90deg,var(--blue-300),transparent); }
|
|
.hero-line b { color: rgba(255,255,255,.5); font-size: 9px; letter-spacing: 3px; }
|
|
.scroll-cue { position: absolute; z-index: 3; right: 34px; bottom: 24px; display: none; align-items: center; gap: 10px; color: rgba(255,255,255,.65); font-size: 9px; letter-spacing: 3px; writing-mode: vertical-rl; }
|
|
.scroll-cue span { position: relative; width: 1px; height: 48px; overflow: hidden; background: rgba(255,255,255,.25); }
|
|
.scroll-cue span::after { content: ""; position: absolute; inset: -100% 0 auto; height: 100%; background: #fff; animation: scrollLine 2s ease-in-out infinite; }
|
|
@keyframes scrollLine { 0% { transform: translateY(0); } 100% { transform: translateY(200%); } }
|
|
|
|
/* Sub navigation */
|
|
.subnav { position: sticky; top: var(--header-offset); z-index: 120; display: flex; justify-content: center; gap: 10px; min-height: 72px; padding: 10px; background: rgba(255,255,255,.9); border-bottom: 1px solid var(--line); box-shadow: 0 12px 28px rgba(4,39,87,.04); backdrop-filter: blur(18px); transition: top .38s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
|
|
.subnav a { position: relative; display: flex; align-items: center; min-width: 132px; justify-content: center; padding: 0 25px; border-radius: 11px; color: #62768c; font-size: 14px; font-weight: 600; transition: .28s ease; }
|
|
.subnav a:hover { color: var(--blue-700); background: var(--blue-50); }
|
|
.subnav a.active { color: #fff; background: linear-gradient(135deg,var(--blue-600),var(--blue-800)); box-shadow: 0 10px 24px rgba(8,120,232,.25); }
|
|
|
|
/* Inner content */
|
|
.content-page { background: linear-gradient(180deg,#fff 0,var(--blue-50) 100%); padding-top: 76px; }
|
|
.content { padding: 96px 0 128px; }
|
|
.section-heading { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 20px; margin-bottom: 52px; }
|
|
.section-heading small { color: var(--blue-600); font-size: 10px; font-weight: 800; letter-spacing: 3px; }
|
|
.section-heading h2 { margin: 7px 0 0; font-size: clamp(30px,4vw,46px); letter-spacing: -2px; }
|
|
.section-heading i { height: 1px; margin-left: 20px; background: linear-gradient(90deg,var(--line),transparent); }
|
|
.story-layout { position: relative; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(390px,.9fr); gap: 78px; align-items: stretch; padding: 46px; border: 1px solid rgba(8,120,232,.1); border-radius: 28px; background: rgba(255,255,255,.86); box-shadow: var(--shadow); }
|
|
.story-layout::before { content: ""; position: absolute; left: 0; top: 52px; width: 4px; height: 92px; border-radius: 0 4px 4px 0; background: linear-gradient(var(--blue-300),var(--blue-700)); }
|
|
.story-layout > .prose { max-width: 780px; }
|
|
.prose p { margin: 0 0 18px; color: #40566e; font-size: 15.5px; line-height: 2.05; }
|
|
.prose p { color: var(--ink); font-size: 20px; font-weight: 700; line-height: 1.75; }
|
|
.story-layout > img { display: block; width: 100%; height: 100%; min-height: 470px; max-height: 620px; object-fit: cover; border-radius: 22px 5px 22px 5px; box-shadow: 20px 22px 0 var(--blue-100); }
|
|
.timeline-page { width: 100%; }
|
|
.timeline-intro { margin-bottom: 88px; }
|
|
.brand-timeline { position: relative; width: 100%; padding: 10px 0 10px; }
|
|
.brand-timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 136px; width: 2px; border-radius: 2px; background: linear-gradient(var(--blue-100),var(--blue-600) 14%,var(--blue-600) 86%,var(--blue-100)); }
|
|
.brand-timeline article { position: relative; display: grid; grid-template-columns: 108px minmax(0,1fr); gap: 58px; align-items: start; padding: 0 0 34px; }
|
|
.brand-timeline article:last-child { padding-bottom: 0; }
|
|
.brand-timeline article::before { content: ""; position: absolute; top: 21px; left: 128px; z-index: 2; width: 14px; height: 14px; border: 4px solid #fff; border-radius: 50%; background: var(--blue-600); box-shadow: 0 0 0 6px rgba(0,144,255,.13); }
|
|
.timeline-year { padding-top: 10px; color: var(--blue-600); font-size: 28px; font-weight: 900; line-height: 1; text-align: right; letter-spacing: -1px; }
|
|
.timeline-card { position: relative; padding: 27px 32px 24px; border: 1px solid var(--line); border-radius: 18px 4px 18px 4px; background: linear-gradient(145deg,#fff,var(--blue-50)); box-shadow: 0 12px 32px rgba(0,94,174,.08); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
|
|
.timeline-card::before { content: ""; position: absolute; left: -9px; top: 19px; width: 16px; height: 16px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; transform: rotate(45deg); }
|
|
.brand-timeline article:hover .timeline-card { transform: translateX(7px); border-color: rgba(0,144,255,.28); box-shadow: 0 20px 45px rgba(0,94,174,.14); }
|
|
.timeline-card small { display: block; margin-bottom: 12px; color: var(--blue-600); font-size: 10px; font-weight: 800; letter-spacing: 2px; }
|
|
.timeline-card p { position: relative; margin: 8px 0; padding-left: 17px; color: #40576f; font-size: 15px; line-height: 1.85; }
|
|
.timeline-card p::before { content: ""; position: absolute; left: 0; top: .78em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-500); }
|
|
.product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
|
|
.product-card { position: relative; overflow: hidden; border: 1px solid rgba(8,120,232,.1); border-radius: 22px 5px 22px 5px; background: rgba(255,255,255,.92); box-shadow: 0 12px 36px rgba(5,52,111,.07); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .3s; }
|
|
.product-card:hover { z-index: 2; transform: translateY(-10px); border-color: rgba(8,120,232,.3); box-shadow: 0 30px 65px rgba(5,52,111,.17); }
|
|
.card-index { position: absolute; right: 16px; top: 14px; z-index: 2; width: 39px; height: 39px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: rgba(7,59,130,.86); backdrop-filter: blur(8px); font-size: 11px; font-weight: 800; }
|
|
.product-card img, .product-placeholder { width: 100%; height: 320px; object-fit: contain; background: linear-gradient(145deg,#fff,var(--blue-50)); transition: transform .65s cubic-bezier(.2,.8,.2,1); }
|
|
.product-card:hover img { transform: scale(1.06) rotate(-1deg); }
|
|
.product-placeholder { display: grid; place-items: center; color: var(--blue-100); font-size: 90px; font-weight: 900; }
|
|
.product-card > div:last-child { position: relative; padding: 27px 28px 30px; }
|
|
.product-card > div:last-child::before { content: ""; position: absolute; left: 28px; top: 0; width: 42px; height: 3px; background: var(--blue-500); transition: width .35s; }
|
|
.product-card:hover > div:last-child::before { width: 86px; }
|
|
.product-card small { color: var(--blue-600); font-size: 11px; font-weight: 800; letter-spacing: 1px; }
|
|
.product-card h3 { margin: 9px 0 13px; color: var(--ink); font-size: 21px; }
|
|
.product-card p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 4; -webkit-box-orient: vertical; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
|
|
.article-list { border-top: 1px solid var(--line); }
|
|
.article-list > a { position: relative; display: grid; grid-template-columns: 105px 1fr 34px; gap: 34px; padding: 42px 28px; border-bottom: 1px solid var(--line); transition: background .35s, transform .35s; }
|
|
.article-list > a::after { content: "↗"; align-self: start; display: grid; place-items: center; width: 34px; height: 34px; color: var(--blue-600); border: 1px solid var(--line); border-radius: 50%; transition: .3s; }
|
|
.article-list > a:hover { z-index: 1; background: #fff; transform: translateX(8px); box-shadow: 0 18px 50px rgba(5,52,111,.08); }
|
|
.article-list > a:hover::after { color: #fff; background: var(--blue-600); transform: rotate(45deg); }
|
|
.article-no { color: var(--blue-500); font-size: 30px; font-weight: 900; }
|
|
.article-list h3 { margin: 0 0 16px; color: var(--ink); font-size: 25px; line-height: 1.45; }
|
|
.article-list p { margin: 0 0 10px; color: #536980; line-height: 1.85; }
|
|
.card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 64px; }
|
|
.card-grid > a { position: relative; min-height: 240px; overflow: hidden; padding: 32px; color: #fff; border-radius: 20px 4px 20px 4px; background: linear-gradient(145deg,#0078d7,#0090ff 72%); box-shadow: 0 20px 44px rgba(0,107,195,.2); transition: transform .4s, box-shadow .4s; }
|
|
.card-grid > a::after { content: ""; position: absolute; width: 150px; height: 150px; right: -75px; bottom: -75px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; transition: transform .5s; }
|
|
.card-grid > a:hover { transform: translateY(-8px); box-shadow: 0 28px 65px rgba(5,52,111,.25); }
|
|
.card-grid > a:hover::after { transform: scale(1.3); }
|
|
.card-grid span { color: var(--blue-300); font-size: 12px; font-weight: 800; letter-spacing: 2px; }
|
|
.card-grid h3 { margin: 40px 0 14px; font-size: 21px; line-height: 1.55; }
|
|
.card-grid p { color: rgba(225,242,255,.7); line-height: 1.75; }
|
|
.card-grid > a > b { position: absolute; left: 32px; bottom: 28px; color: var(--blue-300); font-size: 12px; }
|
|
.product-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 34px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.86); box-shadow: 0 12px 30px rgba(5,52,111,.06); }
|
|
.category-filters { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.category-filters button { padding: 10px 16px; color: #587087; border: 0; border-radius: 10px; background: var(--blue-50); cursor: pointer; transition: .25s; }
|
|
.category-filters button:hover, .category-filters button.active { color: #fff; background: linear-gradient(135deg,var(--blue-500),var(--blue-700)); box-shadow: 0 8px 20px rgba(8,120,232,.2); }
|
|
.product-toolbar > span { flex: 0 0 auto; color: var(--muted); font-size: 12px; }
|
|
.product-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; margin: 48px 0 0; }
|
|
.product-pagination button { min-width: 42px; height: 42px; padding: 0 12px; color: #526b83; border: 1px solid rgba(8,120,232,.14); border-radius: 11px 3px 11px 3px; background: #fff; box-shadow: 0 8px 22px rgba(4,67,128,.06); cursor: pointer; font-weight: 750; transition: .25s ease; }
|
|
.product-pagination button:hover:not(:disabled),.product-pagination button.active { color: #fff; border-color: transparent; background: linear-gradient(145deg,var(--blue-500),var(--blue-800)); box-shadow: 0 10px 25px rgba(8,120,232,.24); transform: translateY(-2px); }
|
|
.product-pagination button:disabled { opacity: .35; cursor: not-allowed; }
|
|
.purchase-channels { display: grid; grid-template-columns: minmax(260px,.7fr) minmax(0,1.3fr); gap: 46px; align-items: center; margin-top: 68px; padding: 42px 46px; overflow: hidden; color: #fff; border-radius: 28px 7px 28px 7px; background: linear-gradient(135deg,#005eae,#0090ff 68%,#42b5ff); box-shadow: 0 26px 65px rgba(0,88,167,.2); }
|
|
.purchase-channel-copy small { color: rgba(255,255,255,.66); font-size: 10px; font-weight: 850; letter-spacing: 3px; }
|
|
.purchase-channel-copy h2 { margin: 9px 0 12px; font-size: clamp(30px,3.5vw,44px); }
|
|
.purchase-channel-copy p { max-width: 420px; margin: 0; color: rgba(255,255,255,.76); font-size: 14px; line-height: 1.8; }
|
|
.purchase-channel-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
|
|
.purchase-channel-links a { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 16px; align-items: center; min-height: 118px; padding: 20px; color: var(--ink); border: 1px solid rgba(255,255,255,.5); border-radius: 18px 5px 18px 5px; background: rgba(255,255,255,.94); box-shadow: 0 14px 34px rgba(0,66,126,.16); transition: transform .3s ease, box-shadow .3s ease, background .3s ease; }
|
|
.purchase-channel-links a:hover { color: var(--ink); background: #fff; box-shadow: 0 22px 44px rgba(0,57,112,.24); transform: translateY(-5px); }
|
|
.purchase-channel-links a > span { width: 48px; height: 48px; display: grid; place-items: center; color: #fff; border-radius: 14px 4px 14px 4px; background: linear-gradient(145deg,var(--blue-500),var(--blue-800)); font-size: 13px; font-weight: 900; }
|
|
.purchase-channel-links small { display: block; color: var(--blue-600); font-size: 9px; font-weight: 800; letter-spacing: 1.5px; }
|
|
.purchase-channel-links strong { display: block; margin-top: 4px; font-size: 20px; }
|
|
.purchase-channel-links b { grid-column: 2; color: var(--blue-700); font-size: 11px; }
|
|
.purchase-channels.compact { display: block; margin: 28px 0 18px; padding: 18px; color: var(--ink); border: 1px solid rgba(8,120,232,.12); border-radius: 16px 4px 16px 4px; background: linear-gradient(145deg,#fff,var(--blue-50)); box-shadow: 0 12px 28px rgba(0,83,155,.07); }
|
|
.purchase-channels.compact .purchase-channel-copy { margin-bottom: 12px; }
|
|
.purchase-channels.compact .purchase-channel-copy > small,.purchase-channels.compact .purchase-channel-copy p { display: none; }
|
|
.purchase-channels.compact .purchase-channel-copy h2 { margin: 0; color: var(--ink); font-size: 17px; }
|
|
.purchase-channels.compact .purchase-channel-links { gap: 9px; }
|
|
.purchase-channels.compact .purchase-channel-links a { grid-template-columns: 36px minmax(0,1fr); gap: 10px; min-height: 76px; padding: 10px 12px; border-color: rgba(8,120,232,.13); box-shadow: none; }
|
|
.purchase-channels.compact .purchase-channel-links a > span { width: 36px; height: 36px; border-radius: 10px 3px 10px 3px; font-size: 10px; }
|
|
.purchase-channels.compact .purchase-channel-links small { display: none; }
|
|
.purchase-channels.compact .purchase-channel-links strong { margin: 0; font-size: 15px; }
|
|
.purchase-channels.compact .purchase-channel-links b { font-size: 9px; }
|
|
|
|
/* Single-page sports business sections */
|
|
.sports-grouped-layout { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 54px; align-items: start; }
|
|
.sports-side-nav { position: sticky; top: calc(var(--header-offset) + 92px); z-index: 25; padding: 24px 18px; border: 1px solid rgba(8,120,232,.12); border-radius: 20px 5px 20px 5px; background: rgba(255,255,255,.94); box-shadow: 0 18px 42px rgba(2,62,119,.09); backdrop-filter: blur(16px); }
|
|
.sports-side-nav > small { display: block; margin: 0 8px 14px; color: var(--blue-600); font-size: 9px; font-weight: 850; letter-spacing: 2px; line-height: 1.6; }
|
|
.sports-side-nav nav { display: grid; gap: 7px; }
|
|
.sports-side-nav a { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 9px; align-items: center; padding: 12px 10px; color: #587087; border-radius: 11px 3px 11px 3px; font-size: 13px; font-weight: 700; transition: .25s ease; }
|
|
.sports-side-nav a span { color: var(--blue-400); font-size: 10px; font-weight: 900; }
|
|
.sports-side-nav a:hover,.sports-side-nav a.active { color: #fff; background: linear-gradient(145deg,var(--blue-500),var(--blue-800)); box-shadow: 0 10px 24px rgba(8,120,232,.22); transform: translateX(3px); }
|
|
.sports-side-nav a:hover span,.sports-side-nav a.active span { color: rgba(255,255,255,.7); }
|
|
.sports-grouped-content { min-width: 0; }
|
|
.sports-grouped-section { scroll-margin-top: calc(var(--header-offset) + 135px); padding: 12px 0 104px; }
|
|
.sports-grouped-section + .sports-grouped-section { padding-top: 92px; border-top: 1px solid var(--line); }
|
|
.sports-grouped-heading { max-width: 820px; margin-bottom: 40px; }
|
|
.sports-grouped-heading small { color: var(--blue-600); font-size: 10px; font-weight: 850; letter-spacing: 3px; }
|
|
.sports-grouped-heading h2 { margin: 10px 0 13px; color: var(--ink); font-size: clamp(32px,4vw,50px); letter-spacing: -2px; }
|
|
.sports-grouped-heading p { max-width: 680px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.85; }
|
|
.sports-grouped-articles { margin-top: 0; }
|
|
.sports-performance-block,.sports-text-gallery { display: grid; gap: 34px; }
|
|
.sports-performance-block > .prose,.sports-text-gallery > .prose { max-width: 860px; padding: 30px 34px; border-left: 4px solid var(--blue-500); border-radius: 0 15px 15px 0; background: #fff; box-shadow: 0 14px 38px rgba(2,62,119,.07); }
|
|
.sports-grouped-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
|
|
.sports-grouped-gallery img { width: 100%; height: 290px; object-fit: cover; border-radius: 18px 4px 18px 4px; box-shadow: 0 13px 34px rgba(2,62,119,.1); }
|
|
.poster-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; align-items: stretch; }
|
|
.poster-gallery__card { position: relative; min-width: 0; min-height: 420px; padding: 18px; overflow: hidden; border: 1px solid rgba(8,120,232,.12); border-radius: 20px 5px 20px 5px; background: linear-gradient(145deg,#f7fbff,#eaf5ff); box-shadow: 0 13px 34px rgba(2,62,119,.1); cursor: zoom-in; }
|
|
.poster-gallery__card img { display: block; width: 100%; height: 100%; max-height: 660px; object-fit: contain; transition: transform .35s ease; }
|
|
.poster-gallery__card > span { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; color: #fff; border-radius: 10px 3px 10px 3px; background: rgba(0,69,134,.82); box-shadow: 0 8px 22px rgba(0,47,91,.22); backdrop-filter: blur(10px); font-size: 11px; font-weight: 750; }
|
|
.poster-gallery__card > span b { font-size: 14px; }
|
|
.poster-gallery__card:hover img { transform: scale(1.018); }
|
|
.poster-lightbox-open { overflow: hidden; }
|
|
.poster-lightbox { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; color: #fff; outline: none; }
|
|
.poster-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,16,31,.96); backdrop-filter: blur(14px); }
|
|
.poster-lightbox__topbar { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 24px; background: linear-gradient(180deg,rgba(0,14,28,.82),transparent); }
|
|
.poster-lightbox__topbar > div { min-width: 0; display: grid; gap: 3px; }
|
|
.poster-lightbox__topbar strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
|
|
.poster-lightbox__topbar small { color: rgba(255,255,255,.58); font-size: 11px; }
|
|
.poster-lightbox__topbar button,.poster-lightbox__arrow,.poster-lightbox__controls button { display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.1); backdrop-filter: blur(12px); cursor: pointer; }
|
|
.poster-lightbox__topbar button { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; font-size: 28px; line-height: 1; }
|
|
.poster-lightbox__viewport { position: absolute; z-index: 1; inset: 72px 86px 76px; display: grid; place-items: center; overflow: hidden; touch-action: none; }
|
|
.poster-lightbox__viewport.is-draggable { cursor: grab; }
|
|
.poster-lightbox__viewport.is-dragging { cursor: grabbing; }
|
|
.poster-lightbox__viewport img { display: block; flex: 0 0 auto; max-width: none; max-height: none; object-fit: fill; user-select: none; transform-origin: center; transition: transform .16s ease; }
|
|
.poster-lightbox__viewport.is-dragging img { transition: none; }
|
|
.poster-lightbox__arrow { position: absolute; z-index: 3; top: 50%; width: 48px; height: 66px; border-radius: 14px 4px 14px 4px; transform: translateY(-50%); font-size: 40px; }
|
|
.poster-lightbox__arrow--previous { left: 20px; }
|
|
.poster-lightbox__arrow--next { right: 20px; }
|
|
.poster-lightbox__controls { position: absolute; z-index: 3; left: 50%; bottom: 20px; display: flex; align-items: center; gap: 7px; padding: 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px 4px 14px 4px; background: rgba(0,35,69,.72); transform: translateX(-50%); backdrop-filter: blur(14px); }
|
|
.poster-lightbox__controls button { min-width: 38px; height: 36px; border-radius: 9px 3px 9px 3px; font-size: 18px; }
|
|
.poster-lightbox__controls button:disabled { opacity: .35; cursor: default; }
|
|
.poster-lightbox__controls .poster-lightbox__scale { min-width: 68px; font-size: 11px; font-weight: 800; }
|
|
.poster-lightbox button:hover:not(:disabled) { background: rgba(8,144,255,.65); }
|
|
.card-detail-link { display: block; margin-top: 18px; color: var(--blue-600); font-size: 12px; }
|
|
.content-detail-link { display: inline-flex; align-items: center; gap: 18px; margin-top: 20px; padding: 14px 20px; color: #fff; border-radius: 10px; background: linear-gradient(135deg,var(--blue-500),var(--blue-700)); box-shadow: 0 12px 24px rgba(8,120,232,.2); font-size: 13px; font-weight: 700; }
|
|
.content-detail-link span { transition: transform .25s; }
|
|
.content-detail-link:hover span { transform: translateX(6px); }
|
|
|
|
/* Shared secondary detail pages */
|
|
.detail-page { padding-top: 82px; background: #fff; }
|
|
.detail-hero { position: relative; min-height: 440px; overflow: hidden; color: #fff; background: linear-gradient(135deg,#0075d2,#0090ff 68%,#38aaff); }
|
|
.detail-hero-grid { position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px); background-size: 62px 62px; }
|
|
.detail-hero-inner { position: relative; z-index: 2; min-height: 440px; display: flex; flex-direction: column; justify-content: center; }
|
|
.breadcrumbs { position: absolute; top: 34px; left: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: rgba(225,242,255,.55); font-size: 12px; }
|
|
.breadcrumbs a:hover { color: #fff; }
|
|
.breadcrumbs b { color: var(--blue-300); font-weight: 600; }
|
|
.detail-kicker { margin-bottom: 18px; color: var(--blue-300); font-size: 11px; font-weight: 800; letter-spacing: 4px; }
|
|
.detail-hero h1 { max-width: 1000px; margin: 0 0 18px; font-size: clamp(42px,6vw,76px); line-height: 1.12; letter-spacing: -3px; }
|
|
.detail-hero p { max-width: 760px; margin: 0; color: rgba(225,242,255,.68); line-height: 1.8; }
|
|
.product-overview { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(390px,.95fr); gap: 76px; padding-top: 88px; padding-bottom: 100px; align-items: start; }
|
|
.product-media { position: relative; z-index: 3; min-width: 0; }
|
|
.product-main-image { position: relative; height: 570px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 28px 6px 28px 6px; background: linear-gradient(145deg,#fff,var(--blue-50)); box-shadow: var(--shadow); cursor: zoom-in; }
|
|
.product-main-image img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s; }
|
|
.product-main-image:not(.is-zooming):hover > img { transform: scale(1.035); }
|
|
.product-main-image.is-zooming { cursor: crosshair; }
|
|
.product-main-image.is-zooming > img { transform: none; }
|
|
.product-zoom-hint { position: absolute; right: 18px; bottom: 17px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; color: #49647d; border: 1px solid rgba(0,144,255,.13); border-radius: 9px; background: rgba(255,255,255,.88); box-shadow: 0 8px 22px rgba(4,65,125,.08); backdrop-filter: blur(10px); font-size: 10px; font-weight: 700; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
|
|
.product-zoom-hint::before { content: "+"; width: 17px; height: 17px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--blue-600); font-size: 13px; line-height: 1; }
|
|
.product-main-image.is-zooming .product-zoom-hint { opacity: 0; transform: translateY(5px); }
|
|
.product-zoom-lens { position: absolute; z-index: 4; width: 35%; height: 35%; border: 1px solid rgba(0,144,255,.62); background: rgba(0,144,255,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 8px 24px rgba(0,97,184,.12); transform: translate(-50%,-50%); pointer-events: none; }
|
|
.product-zoom-preview { position: absolute; z-index: 35; top: 0; left: calc(100% + 26px); width: 100%; height: 570px; overflow: hidden; border: 1px solid rgba(0,144,255,.24); border-radius: 6px 24px 6px 24px; background: #fff; box-shadow: 0 26px 70px rgba(2,50,104,.22); pointer-events: none; animation: zoomPreviewIn .18s ease-out; }
|
|
.product-zoom-preview img { width: 100%; height: 100%; object-fit: contain; will-change: transform; }
|
|
.product-zoom-preview span { position: absolute; right: 15px; top: 14px; padding: 7px 10px; color: var(--blue-700); border-radius: 7px; background: rgba(243,250,255,.92); font-size: 9px; font-weight: 800; letter-spacing: 1px; }
|
|
@keyframes zoomPreviewIn { from { opacity: 0; transform: translateX(-8px) scale(.985); } to { opacity: 1; transform: none; } }
|
|
.detail-image-placeholder { color: var(--blue-100); font-size: 150px; font-weight: 900; }
|
|
.product-thumbnails { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 16px; }
|
|
.product-thumbnails button { height: 105px; overflow: hidden; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; transition: .25s; }
|
|
.product-thumbnails button.active { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(27,147,255,.12); }
|
|
.product-thumbnails img { width: 100%; height: 100%; object-fit: contain; }
|
|
.product-summary { position: sticky; top: 110px; padding-top: 20px; }
|
|
.detail-category { display: inline-flex; padding: 8px 13px; color: var(--blue-700); border-radius: 20px; background: var(--blue-100); font-size: 11px; font-weight: 800; }
|
|
.product-summary h2 { margin: 22px 0 20px; color: var(--ink); font-size: clamp(34px,4vw,54px); line-height: 1.15; letter-spacing: -2px; }
|
|
.model-lines { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
|
|
.model-lines span { padding: 7px 10px; color: #547088; border-radius: 7px; background: var(--blue-50); font-size: 11px; }
|
|
.product-summary > p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 6; -webkit-box-orient: vertical; margin: 26px 0; color: #50677f; font-size: 15px; line-height: 1.9; }
|
|
.detail-primary-action { display: inline-flex; align-items: center; gap: 24px; padding: 16px 22px; color: #fff; border-radius: 12px; background: linear-gradient(135deg,var(--blue-500),var(--blue-800)); box-shadow: 0 14px 30px rgba(8,120,232,.25); font-size: 13px; font-weight: 700; }
|
|
.detail-primary-action span { transition: transform .25s; }
|
|
.detail-primary-action:hover span { transform: translateY(5px); }
|
|
.detail-section { padding-top: 100px; padding-bottom: 100px; }
|
|
.detail-section-blue { color: #fff; background: linear-gradient(135deg,#0075d2,#0090ff 68%,#38aaff); }
|
|
.detail-copy-grid { display: grid; grid-template-columns: 310px 1fr; gap: 85px; }
|
|
.detail-section-title small { color: var(--blue-500); font-size: 10px; font-weight: 800; letter-spacing: 3px; }
|
|
.detail-section-title h2 { margin: 8px 0 0; font-size: clamp(30px,4vw,45px); line-height: 1.2; }
|
|
.detail-section-blue .detail-section-title small { color: var(--blue-300); }
|
|
.detail-prose { max-width: 820px; }
|
|
.detail-prose p { margin: 0 0 20px; color: rgba(235,247,255,.78); font-size: 16px; line-height: 2; }
|
|
.specifications { scroll-margin-top: 100px; }
|
|
.specifications > .detail-section-title { margin-bottom: 42px; }
|
|
.spec-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
|
|
.spec-grid article { min-height: 130px; padding: 25px 28px; border: 1px solid var(--line); border-radius: 16px 4px 16px 4px; background: linear-gradient(145deg,#fff,var(--blue-50)); }
|
|
.spec-grid small { display: block; margin-bottom: 12px; color: var(--blue-600); font-size: 11px; font-weight: 800; letter-spacing: 1px; }
|
|
.spec-grid p { margin: 4px 0; color: #455d75; font-size: 14px; line-height: 1.7; }
|
|
.related-products { padding: 90px 0 110px; background: var(--blue-50); }
|
|
.related-products .detail-section-title { margin-bottom: 38px; }
|
|
.related-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
|
|
.related-grid > a { overflow: hidden; padding-bottom: 24px; border: 1px solid var(--line); border-radius: 18px 4px 18px 4px; background: #fff; transition: .35s; }
|
|
.related-grid > a:hover { transform: translateY(-7px); box-shadow: var(--shadow); }
|
|
.related-grid img, .related-placeholder { width: 100%; height: 220px; object-fit: contain; background: linear-gradient(145deg,#fff,var(--blue-50)); }
|
|
.related-placeholder { display: grid; place-items: center; color: var(--blue-100); font-size: 80px; font-weight: 900; }
|
|
.related-grid span, .related-grid h3, .related-grid b { display: block; margin-left: 22px; margin-right: 22px; }
|
|
.related-grid span { margin-top: 20px; color: var(--blue-600); font-size: 10px; font-weight: 800; }
|
|
.related-grid h3 { min-height: 50px; margin-top: 8px; margin-bottom: 14px; color: var(--ink); font-size: 17px; }
|
|
.related-grid b { color: var(--blue-600); font-size: 11px; }
|
|
.content-detail-hero { min-height: 520px; background-position: center; background-size: cover; }
|
|
.content-detail-hero .detail-hero-inner { min-height: 520px; }
|
|
.detail-hero-overlay { position: absolute; inset: 0; background: linear-gradient(100deg,rgba(0,103,189,.93),rgba(0,144,255,.68),rgba(0,144,255,.2)); }
|
|
.editorial-detail { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 60px; padding-top: 90px; padding-bottom: 120px; }
|
|
.editorial-detail aside { position: sticky; top: 112px; align-self: start; padding: 25px; border-left: 3px solid var(--blue-500); background: var(--blue-50); }
|
|
.editorial-detail aside span { color: var(--blue-600); font-size: 10px; font-weight: 800; letter-spacing: 2px; }
|
|
.editorial-detail aside h3 { margin: 10px 0 28px; font-size: 22px; }
|
|
.editorial-detail aside a { color: var(--blue-600); font-size: 12px; }
|
|
.editorial-detail > article > p { margin: 0 0 22px; color: #40576f; font-size: 16px; line-height: 2.05; }
|
|
.editorial-detail > article > p { color: var(--ink); font-size: 21px; font-weight: 700; }
|
|
.detail-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-flow: dense; gap: 18px; width: 100%; margin-top: 55px; }
|
|
.detail-gallery figure { margin: 0; overflow: hidden; border-radius: 16px 4px 16px 4px; background: var(--blue-50); }
|
|
.detail-gallery img { display: block; width: 100%; height: 310px; object-fit: cover; }
|
|
.detail-gallery figure:last-child:nth-child(odd) { grid-column: 1 / -1; }
|
|
.detail-gallery figcaption { padding: 14px 17px; color: var(--muted); font-size: 12px; }
|
|
.gallery { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); grid-auto-flow: dense; gap: 20px; width: 100%; margin-top: 82px; }
|
|
.gallery figure { position: relative; grid-column: span 4; height: 330px; margin: 0; overflow: hidden; border-radius: 20px 4px 20px 4px; background: var(--blue-100); box-shadow: 0 12px 34px rgba(5,52,111,.09); }
|
|
.gallery figure:nth-child(5n+1) { grid-column: span 7; }
|
|
.gallery figure:nth-child(5n+2) { grid-column: span 5; }
|
|
.gallery figure:nth-child(5n+3), .gallery figure:nth-child(5n+4), .gallery figure:nth-child(5n+5) { grid-column: span 4; }
|
|
.gallery figure:nth-child(5n+1):last-child { grid-column: 1 / -1; }
|
|
.gallery figure:nth-child(5n+1):nth-last-child(2), .gallery figure:nth-child(5n+2):last-child { grid-column: span 6; }
|
|
.gallery figure:nth-child(5n+1):nth-last-child(3), .gallery figure:nth-child(5n+2):nth-last-child(2) { grid-column: span 4; }
|
|
.gallery figure:nth-child(5n+3):nth-last-child(2), .gallery figure:nth-child(5n+4):last-child { grid-column: span 6; }
|
|
.gallery img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .5s; }
|
|
.gallery figure:hover img { transform: scale(1.065); filter: saturate(1.12); }
|
|
.gallery figcaption { position: absolute; inset: auto 0 0; display: flex; align-items: center; gap: 12px; padding: 55px 20px 18px; color: #fff; background: linear-gradient(transparent,rgba(3,26,61,.88)); font-size: 13px; transform: translateY(5px); transition: transform .35s; }
|
|
.gallery figure:hover figcaption { transform: translateY(0); }
|
|
.gallery figcaption span { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; font-size: 9px; }
|
|
.members { margin-top: 92px; padding: 48px; border-radius: 28px; background: linear-gradient(145deg,#fff,var(--blue-50)); box-shadow: var(--shadow); }
|
|
.members > h3 { margin: 0 0 30px; color: var(--ink); font-size: 31px; }
|
|
.members > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
|
|
.members article { position: relative; overflow: hidden; padding: 25px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.88); transition: .35s; }
|
|
.members article:hover { transform: translateY(-5px); border-color: rgba(8,120,232,.3); box-shadow: 0 15px 35px rgba(5,52,111,.1); }
|
|
.members small { color: var(--blue-600); font-weight: 800; letter-spacing: 2px; }
|
|
.members p { color: #4b6178; line-height: 1.75; }
|
|
|
|
/* YGJRC members */
|
|
.ygjrc-profile-page { width: 100%; }
|
|
.ygjrc-intro { margin-bottom: 105px; }
|
|
.ygjrc-members-section,.ambassador-section { margin-top: 95px; }
|
|
.ygjrc-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; margin-bottom: 42px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
|
|
.ygjrc-section-head small { color: var(--blue-600); font-size: 10px; font-weight: 800; letter-spacing: 3px; }
|
|
.ygjrc-section-head h2 { margin: 9px 0 0; color: var(--ink); font-size: clamp(34px,4vw,50px); letter-spacing: -2px; }
|
|
.ygjrc-section-head > p { max-width: 470px; margin: 0; color: var(--muted); line-height: 1.85; }
|
|
.ygjrc-member-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 18px; }
|
|
.ygjrc-member-grid > article { grid-column: span 4; overflow: hidden; border: 1px solid var(--line); border-radius: 22px 5px 22px 5px; background: #fff; box-shadow: 0 14px 38px rgba(0,75,140,.08); transition: transform .4s ease, box-shadow .4s ease, border-color .35s ease; }
|
|
.ygjrc-member-grid > article:nth-child(n+4) { grid-column: span 3; }
|
|
.ygjrc-member-grid > article:hover { transform: translateY(-9px); border-color: rgba(0,144,255,.3); box-shadow: 0 28px 58px rgba(0,75,140,.16); }
|
|
.ygjrc-member-photo { position: relative; height: 350px; overflow: hidden; background: linear-gradient(155deg,#eaf7ff,#0090ff); }
|
|
.ygjrc-member-photo::before { content: ""; position: absolute; right: -80px; top: -100px; width: 260px; height: 260px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; }
|
|
.ygjrc-member-photo img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transition: transform .55s cubic-bezier(.2,.8,.2,1); }
|
|
.ygjrc-member-grid > article:hover .ygjrc-member-photo img { transform: scale(1.045); }
|
|
.ygjrc-member-photo > span { position: absolute; right: 14px; top: 14px; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(0,111,201,.42); backdrop-filter: blur(8px); font-size: 10px; font-weight: 800; }
|
|
.ygjrc-member-copy { padding: 26px 27px 30px; }
|
|
.ygjrc-member-copy small { color: var(--blue-600); font-size: 9px; font-weight: 800; letter-spacing: 1.5px; }
|
|
.ygjrc-member-copy h3 { margin: 8px 0 18px; color: var(--ink); font-size: 24px; }
|
|
.ygjrc-member-copy ul { margin: 0; padding: 0; list-style: none; }
|
|
.ygjrc-member-copy li { position: relative; margin-top: 9px; padding-left: 15px; color: #536a81; font-size: 12px; line-height: 1.7; }
|
|
.ygjrc-member-copy li::before { content: ""; position: absolute; left: 0; top: .75em; width: 5px; height: 5px; border-radius: 50%; background: var(--blue-500); }
|
|
.ambassador-section { padding: 70px; border-radius: 30px 7px 30px 7px; background: linear-gradient(145deg,var(--blue-50),#fff); box-shadow: inset 0 0 0 1px var(--line); }
|
|
.ambassador-team-image { width: 100%; max-height: 680px; object-fit: contain; border-radius: 20px 5px 20px 5px; background: #fff; box-shadow: 0 18px 48px rgba(0,71,132,.12); }
|
|
.ambassador-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; margin-top: 24px; }
|
|
.ambassador-grid article { position: relative; min-height: 225px; overflow: hidden; padding: 27px 24px; color: #fff; border-radius: 17px 4px 17px 4px; background: linear-gradient(145deg,#0077d5,#0090ff 72%); transition: transform .35s ease, box-shadow .35s ease; }
|
|
.ambassador-grid article:hover { transform: translateY(-7px); box-shadow: 0 22px 42px rgba(0,91,168,.23); }
|
|
.ambassador-grid article > span { position: absolute; right: 14px; top: 5px; color: rgba(255,255,255,.13); font-size: 58px; font-weight: 900; }
|
|
.ambassador-grid small { position: relative; color: rgba(255,255,255,.62); font-size: 8px; font-weight: 800; letter-spacing: 1.4px; }
|
|
.ambassador-grid h3 { position: relative; margin: 40px 0 15px; font-size: 24px; }
|
|
.ambassador-grid p { position: relative; margin: 7px 0; color: rgba(255,255,255,.8); font-size: 12px; line-height: 1.65; }
|
|
|
|
@media (max-width: 950px) {
|
|
.ygjrc-section-head { align-items: flex-start; flex-direction: column; gap: 20px; }
|
|
.ygjrc-member-grid > article,.ygjrc-member-grid > article:nth-child(n+4) { grid-column: span 6; }
|
|
.ygjrc-member-grid > article:last-child:nth-child(odd) { grid-column: 1 / -1; }
|
|
.ambassador-section { padding: 45px; }
|
|
.ambassador-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.ygjrc-intro { margin-bottom: 70px; }
|
|
.ygjrc-members-section,.ambassador-section { margin-top: 70px; }
|
|
.ygjrc-member-grid > article,.ygjrc-member-grid > article:nth-child(n+4),.ygjrc-member-grid > article:last-child:nth-child(odd) { grid-column: 1 / -1; }
|
|
.ygjrc-member-photo { height: 330px; }
|
|
.ambassador-section { margin-left: -8px; margin-right: -8px; padding: 28px 18px; border-radius: 20px 5px 20px 5px; }
|
|
.ambassador-grid { grid-template-columns: 1fr; }
|
|
.ambassador-team-image { border-radius: 13px 3px 13px 3px; }
|
|
}
|
|
|
|
/* Contact page */
|
|
.contact-hero { background: linear-gradient(135deg,#006fc9,#0090ff 68%,#4bb7ff); }
|
|
.contact-content { overflow: hidden; background: #fff; }
|
|
.contact-section { scroll-margin-top: calc(var(--header-offset) + 72px); padding: 100px 0 115px; }
|
|
.contact-section .section-heading { margin-bottom: 48px; }
|
|
.contact-lead-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(320px,.8fr); gap: 24px; margin-bottom: 38px; }
|
|
.contact-intro,.business-summary { min-height: 210px; padding: 36px 38px; border: 1px solid var(--line); border-radius: 22px 5px 22px 5px; background: linear-gradient(145deg,#fff,var(--blue-50)); box-shadow: 0 16px 42px rgba(0,83,155,.08); }
|
|
.contact-intro > span,.business-summary small { color: var(--blue-600); font-size: 10px; font-weight: 800; letter-spacing: 3px; }
|
|
.contact-intro h3 { margin: 14px 0 16px; color: var(--ink); font-size: clamp(29px,3vw,42px); }
|
|
.contact-intro p,.business-summary p { margin: 0; color: #536b83; line-height: 1.9; }
|
|
.business-summary { color: #fff; border-color: transparent; background: linear-gradient(145deg,#0077d5,#0090ff 70%,#42b1ff); }
|
|
.business-summary small { color: rgba(255,255,255,.72); }
|
|
.business-summary p { margin-top: 36px; color: rgba(255,255,255,.86); font-size: 18px; font-weight: 600; }
|
|
.social-platform-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
|
|
.social-platform-grid article { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 22px; align-items: center; min-height: 174px; padding: 25px; border: 1px solid var(--line); border-radius: 18px 4px 18px 4px; background: #fff; box-shadow: 0 12px 34px rgba(0,75,140,.07); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
|
|
.social-platform-grid article:hover { transform: translateY(-7px); border-color: rgba(0,144,255,.28); box-shadow: 0 23px 48px rgba(0,75,140,.14); }
|
|
.social-icon { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 22px 6px 22px 6px; box-shadow: 0 12px 24px rgba(0,0,0,.13); }
|
|
.social-icon img { width: 40px; height: 40px; object-fit: contain; filter: brightness(0) invert(1); }
|
|
.social-platform-grid small { color: var(--blue-600); font-size: 9px; font-weight: 800; letter-spacing: 2px; }
|
|
.social-platform-grid h3 { margin: 5px 0 11px; color: var(--ink); font-size: 21px; }
|
|
.social-platform-grid p { width: fit-content; max-width: 100%; margin: 0 0 10px; padding: 8px 12px; color: var(--blue-700); border: 1px solid rgba(0,144,255,.18); border-radius: 9px; background: linear-gradient(135deg,var(--blue-50),#fff); box-shadow: 0 6px 16px rgba(0,116,212,.08); font-size: 16px; font-weight: 900; line-height: 1.2; letter-spacing: .2px; }
|
|
.social-platform-grid p::before { content: "账号"; display: inline-block; margin-right: 8px; padding-right: 8px; color: var(--blue-500); border-right: 1px solid rgba(0,144,255,.2); font-size: 9px; font-weight: 800; letter-spacing: 1px; vertical-align: 2px; }
|
|
.social-platform-grid span { color: var(--muted); font-size: 11px; }
|
|
.business-capabilities { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-top: 32px; }
|
|
.business-capabilities article { position: relative; min-height: 220px; overflow: hidden; padding: 27px; border-radius: 18px 4px 18px 4px; color: #fff; background: linear-gradient(145deg,#0079d8,#0090ff); transition: transform .35s ease; }
|
|
.business-capabilities article:hover { transform: translateY(-7px); }
|
|
.business-capabilities article > span { position: absolute; right: 18px; top: 12px; color: rgba(255,255,255,.14); font-size: 58px; font-weight: 900; }
|
|
.business-capabilities article > div { position: relative; z-index: 1; }
|
|
.business-capabilities small { color: rgba(255,255,255,.66); font-size: 9px; font-weight: 800; letter-spacing: 2px; }
|
|
.business-capabilities h3 { margin: 45px 0 12px; font-size: 23px; }
|
|
.business-capabilities p { margin: 0; color: rgba(255,255,255,.76); font-size: 13px; line-height: 1.75; }
|
|
.commerce-note { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 22px; padding: 21px 26px; border: 1px solid var(--line); border-radius: 13px; background: var(--blue-50); }
|
|
.commerce-note b { color: var(--blue-700); font-size: 13px; }
|
|
.commerce-note span { color: #536b83; font-size: 13px; letter-spacing: 1px; }
|
|
.venue-section { background: linear-gradient(180deg,var(--blue-50),#fff); }
|
|
.venue-summary { max-width: 760px; margin: -22px 0 54px; color: var(--muted); line-height: 1.9; }
|
|
.venue-city { margin-top: 55px; }
|
|
.venue-city-title { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
|
|
.venue-city-title span { color: var(--blue-600); font-size: 10px; font-weight: 800; letter-spacing: 2px; }
|
|
.venue-city-title h3 { margin: 0; color: var(--ink); font-size: 29px; }
|
|
.venue-city-title b { margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 600; }
|
|
.venue-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
|
|
.venue-grid > a { min-height: 150px; display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 14px; align-items: start; padding: 23px 22px; border: 1px solid rgba(0,144,255,.12); border-radius: 15px 3px 15px 3px; background: #fff; box-shadow: 0 9px 28px rgba(0,83,155,.055); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
|
|
.venue-grid > a:hover { transform: translateY(-5px); border-color: rgba(0,144,255,.3); box-shadow: 0 18px 38px rgba(0,83,155,.11); }
|
|
.venue-pin { position: relative; width: 28px; height: 28px; border: 2px solid var(--blue-600); border-radius: 50% 50% 50% 6px; transform: rotate(-45deg); }
|
|
.venue-pin::after { content: ""; position: absolute; left: 8px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-600); }
|
|
.venue-grid h4 { margin: 0 0 10px; color: var(--ink); font-size: 16px; }
|
|
.venue-grid p { margin: 0; color: #64788d; font-size: 12px; line-height: 1.75; }
|
|
.venue-map-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--blue-600); font-size: 11px; font-weight: 800; }
|
|
.venue-map-link span { transition: transform .25s ease; }
|
|
.venue-grid > a:hover .venue-map-link span { transform: translateX(4px); }
|
|
.contact-info-section { color: #fff; background: linear-gradient(135deg,#006fc9,#0090ff 68%,#3facff); }
|
|
.contact-info-section .section-heading small { color: rgba(255,255,255,.68); }
|
|
.contact-info-section .section-heading h2 { color: #fff; }
|
|
.contact-info-section .section-heading i { background: linear-gradient(90deg,rgba(255,255,255,.3),transparent); }
|
|
.contact-card-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
|
|
.contact-card-grid a { position: relative; min-height: 285px; overflow: hidden; padding: 29px; border: 1px solid rgba(255,255,255,.2); border-radius: 20px 4px 20px 4px; background: rgba(255,255,255,.1); box-shadow: 0 15px 38px rgba(0,70,130,.16); backdrop-filter: blur(12px); transition: transform .35s ease, background .35s ease, box-shadow .35s ease; }
|
|
.contact-card-grid a:hover { transform: translateY(-8px); background: rgba(255,255,255,.18); box-shadow: 0 25px 50px rgba(0,70,130,.24); }
|
|
.contact-card-grid a > span { position: absolute; right: 18px; top: 8px; color: rgba(255,255,255,.11); font-size: 68px; font-weight: 900; }
|
|
.contact-card-grid small { position: relative; color: rgba(255,255,255,.63); font-size: 9px; font-weight: 800; letter-spacing: 2px; }
|
|
.contact-card-grid h3 { position: relative; margin: 39px 0 16px; font-size: 25px; }
|
|
.contact-card-grid p { margin: 0 0 8px; color: rgba(255,255,255,.7); }
|
|
.contact-card-grid b { display: block; font-size: 20px; letter-spacing: 1px; }
|
|
.contact-card-grid i { position: absolute; left: 29px; bottom: 27px; color: rgba(255,255,255,.62); font-size: 11px; font-style: normal; }
|
|
|
|
@media (max-width: 950px) {
|
|
.contact-lead-grid { grid-template-columns: 1fr; }
|
|
.social-platform-grid,.venue-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
|
|
.business-capabilities,.contact-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.contact-section { padding: 72px 0 82px; }
|
|
.contact-intro,.business-summary { min-height: 0; padding: 28px 24px; }
|
|
.social-platform-grid,.venue-grid,.business-capabilities,.contact-card-grid { grid-template-columns: 1fr; }
|
|
.social-platform-grid article { grid-template-columns: 64px minmax(0,1fr); min-height: 150px; padding: 20px; }
|
|
.social-platform-grid p { font-size: 15px; }
|
|
.social-icon { width: 64px; height: 64px; border-radius: 18px 5px 18px 5px; }
|
|
.social-icon img { width: 34px; height: 34px; }
|
|
.business-capabilities article { min-height: 190px; }
|
|
.commerce-note { align-items: flex-start; flex-direction: column; gap: 10px; }
|
|
.commerce-note span { line-height: 1.8; }
|
|
.venue-city-title { flex-wrap: wrap; }
|
|
.venue-city-title b { width: 100%; margin-left: 0; }
|
|
.contact-card-grid a { min-height: 245px; }
|
|
}
|
|
|
|
/* Footer */
|
|
.site-footer { position: relative; overflow: hidden; padding: 82px 0 24px; color: #fff; background: linear-gradient(135deg,#006fc9 0%,#0090ff 65%,#35a9ff 100%); }
|
|
.site-footer::before { content: ""; position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px); background-size: 64px 64px; }
|
|
.footer-orbit { position: absolute; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; opacity: 0; transform: scale(.72); transition: opacity 1.1s ease, transform 1.2s cubic-bezier(.2,.8,.2,1); }
|
|
.footer-orbit-one { width: 430px; height: 430px; right: -170px; top: -150px; }
|
|
.footer-orbit-two { width: 250px; height: 250px; right: -50px; top: -60px; }
|
|
.footer-inner { position: relative; z-index: 1; width: min(1260px,calc(100% - 56px)); margin: auto; display: grid; grid-template-columns: 2.2fr repeat(3,1fr); gap: 68px; }
|
|
.footer-inner > div { opacity: 0; transform: translateY(34px); transition: opacity .75s ease, transform .85s cubic-bezier(.2,.8,.2,1); }
|
|
.footer-inner > div:nth-child(2) { transition-delay: .1s; }
|
|
.footer-inner > div:nth-child(3) { transition-delay: .18s; }
|
|
.footer-inner > div:nth-child(4) { transition-delay: .26s; }
|
|
.footer-brand img { width: 180px; max-height: 70px; object-fit: contain; object-position: left center; }
|
|
.footer-brand p { margin: 20px 0 8px; color: #d8eeff; font-size: 20px; font-weight: 700; }
|
|
.footer-brand small { color: rgba(216,238,255,1); font-size: 8px; letter-spacing: 2px; }
|
|
.footer-inner b { display: block; margin-bottom: 22px; color: #fff; font-size: 14px; }
|
|
.footer-inner a { position: relative; display: block; width: max-content; margin-bottom: 14px; color: rgba(216,238,255,.58); font-size: 13px; transition: .25s; }
|
|
.footer-inner a::before { content: ""; position: absolute; left: -15px; top: 50%; width: 0; height: 1px; background: var(--blue-300); transition: .25s; }
|
|
.footer-inner a:hover { color: #fff; transform: translateX(15px); }
|
|
.footer-inner a:hover::before { width: 9px; }
|
|
.copyright { position: relative; z-index: 1; width: min(1260px,calc(100% - 56px)); margin: 60px auto 0; padding-top: 22px; display: flex; justify-content: space-between; border-top: 1px solid rgba(216,238,255,.12); color: rgba(216,238,255,.38); font-size: 10px; letter-spacing: 1px; opacity: 0; transform: translateY(18px); transition: opacity .7s ease .34s, transform .8s cubic-bezier(.2,.8,.2,1) .34s; }
|
|
.site-footer.footer-visible::before { animation: footerGridDrift 10s linear infinite alternate; }
|
|
.footer-visible .footer-inner > div,.footer-visible .copyright { opacity: 1; transform: translateY(0); }
|
|
.footer-visible .footer-orbit { opacity: 1; transform: scale(1); }
|
|
.footer-visible .footer-orbit-one { animation: footerOrbit 18s linear 1.2s infinite; }
|
|
.footer-visible .footer-orbit-two { animation: footerOrbitReverse 13s linear 1s infinite; }
|
|
@keyframes footerGridDrift { to { background-position: 32px 18px; } }
|
|
@keyframes footerOrbit { to { transform: rotate(360deg) scale(1); } }
|
|
@keyframes footerOrbitReverse { to { transform: rotate(-360deg) scale(1); } }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.footer-inner > div,.copyright,.footer-orbit { opacity: 1; transform: none; transition: none; }
|
|
.site-footer.footer-visible::before,.footer-visible .footer-orbit-one,.footer-visible .footer-orbit-two { animation: none; }
|
|
}
|
|
|
|
@media (max-width: 1230px) {
|
|
.brand { width: 130px; }
|
|
.nav-wrap { grid-template-columns: 130px minmax(0,1fr) auto; gap: 10px; }
|
|
.nav-item > a { padding: 0 7px; font-size: 13px; }
|
|
.language-switch { grid-template-columns: repeat(2,31px); }
|
|
.product-grid { grid-template-columns: repeat(2,1fr); }
|
|
.home-product-grid { grid-template-columns: repeat(2,1fr); }
|
|
}
|
|
|
|
@media (max-width: 950px) {
|
|
:root { --header-height: 70px; }
|
|
.site-header { height: 70px; }
|
|
.nav-wrap { width: calc(100% - 30px); display: flex; justify-content: space-between; gap: 20px; }
|
|
.brand { width: 132px; height: 52px; }
|
|
.menu-toggle { display: block; }
|
|
.nav-actions { margin-left: auto; }
|
|
.language-switch { grid-template-columns: repeat(2,33px); }
|
|
.site-header.open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
|
|
.site-header.open .menu-toggle span:nth-child(2) { opacity: 0; }
|
|
.site-header.open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
|
|
.main-nav { position: fixed; top: 70px; left: 0; right: 0; max-height: calc(100vh - 70px); display: block; overflow: auto; padding: 12px 24px 30px; background: rgba(255,255,255,.98); opacity: 0; visibility: hidden; transform: translateY(-18px); transition: .3s; }
|
|
.site-header.open .main-nav { opacity: 1; visibility: visible; transform: translateY(0); }
|
|
.nav-item { display: block; }
|
|
.nav-item > a { height: auto; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
|
|
.nav-item > a i { margin-left: auto; }
|
|
.dropdown { position: static; width: 100%; padding: 4px 0 10px 18px; border: 0; opacity: 1; visibility: visible; transform: none; box-shadow: none; }
|
|
.dropdown::before, .dropdown-label { display: none; }
|
|
.dropdown a { display: inline-block; margin-right: 18px; padding: 9px 0; font-size: 14px; }
|
|
.dropdown a::before { display: none; }
|
|
.dropdown-mega { width: 100%; padding-left: 18px; }
|
|
.dropdown .dropdown-group-title { display: block; margin: 0; padding: 10px 0; background: transparent; }
|
|
.dropdown-groups { display: block; }
|
|
.dropdown-group { margin: 5px 0 10px; padding: 8px 10px; }
|
|
.home-original { padding-top: 70px; }
|
|
.page-hero { height: 400px; padding-top: 70px; }
|
|
.scroll-cue { display: none; }
|
|
.subnav { justify-content: flex-start; min-height: 64px; overflow-x: auto; padding: 8px 20px; }
|
|
.subnav a { min-width: 120px; white-space: nowrap; }
|
|
.story-layout { grid-template-columns: 1fr; gap: 38px; padding: 34px; }
|
|
.story-layout > img { min-height: 350px; }
|
|
.gallery figure, .gallery figure:nth-child(n) { grid-column: span 6 !important; }
|
|
.gallery figure:last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
|
|
.members > div { grid-template-columns: repeat(2,1fr); }
|
|
.footer-inner { grid-template-columns: 1.6fr 1fr 1fr; }
|
|
.footer-inner > div:last-child { grid-column: 2; }
|
|
.home-hero { min-height: 760px; padding-top: 70px; }
|
|
.home-hero-media { width: 100%; }
|
|
.home-hero-shade { width: 100%; }
|
|
.home-hero-solid { width: 100%; background: linear-gradient(90deg,#006fc9 0%,#0090ff 56%,rgba(0,144,255,.96) 62%,rgba(0,144,255,.68) 70%,rgba(0,144,255,.28) 80%,rgba(0,144,255,0) 90%); }
|
|
.home-hero-grid { display: none; }
|
|
.home-hero-content { min-height: 690px; }
|
|
.home-hero h1 { font-size: 78px; }
|
|
.home-hero-content > p { max-width: 600px; }
|
|
.home-scroll { display: none; }
|
|
.home-about { grid-template-columns: 1fr; gap: 70px; }
|
|
.home-about-image { width: min(650px,92%); }
|
|
.home-honor-carousel { width: min(650px,92%); }
|
|
.ecosystem-card:nth-child(n) { grid-column: span 6; }
|
|
.home-innovation { grid-template-columns: 1fr; }
|
|
.home-news-grid { grid-template-columns: repeat(2,1fr); }
|
|
.home-news-grid > a:last-child { grid-column: 1 / -1; }
|
|
.detail-page { padding-top: 70px; }
|
|
.product-overview { grid-template-columns: 1fr; gap: 45px; }
|
|
.product-main-image { height: 520px; }
|
|
.product-main-image { cursor: default; }
|
|
.product-zoom-hint,.product-zoom-lens,.product-zoom-preview { display: none; }
|
|
.product-summary { position: static; }
|
|
.detail-copy-grid { grid-template-columns: 1fr; gap: 38px; }
|
|
.related-grid { grid-template-columns: repeat(2,1fr); }
|
|
.purchase-channels { grid-template-columns: 1fr; gap: 28px; }
|
|
.sports-grouped-layout { grid-template-columns: 1fr; gap: 34px; }
|
|
.sports-side-nav { top: calc(var(--header-offset) + 64px); padding: 12px; overflow-x: auto; border-radius: 14px 3px 14px 3px; }
|
|
.sports-side-nav > small { display: none; }
|
|
.sports-side-nav nav { display: flex; width: max-content; min-width: 100%; gap: 7px; }
|
|
.sports-side-nav a { flex: 0 0 auto; min-width: 142px; transform: none; }
|
|
.editorial-detail { grid-template-columns: 1fr; gap: 35px; }
|
|
.editorial-detail aside { position: static; }
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.container { width: calc(100% - 30px); }
|
|
.page-hero { height: 350px; }
|
|
.hero-grid { background-size: 46px 46px; }
|
|
.hero-orbit-one { width: 250px; height: 250px; right: -120px; top: 92px; }
|
|
.hero-orbit-two { display: none; }
|
|
.hero-copy h1 { margin-top: 10px; font-size: 38px; letter-spacing: -2px; }
|
|
.hero-copy p { font-size: 13px; line-height: 1.7; }
|
|
.content { padding: 68px 0 88px; }
|
|
.section-heading { grid-template-columns: minmax(0,auto) 1fr; gap: 14px; margin-bottom: 38px; }
|
|
.section-heading i { display: none; }
|
|
.section-heading h2 { font-size: 30px; }
|
|
.story-layout { padding: 25px 22px; border-radius: 19px 4px 19px 4px; }
|
|
.story-layout > img { min-height: 270px; box-shadow: 10px 12px 0 var(--blue-100); }
|
|
.timeline-intro { margin-bottom: 58px; }
|
|
.brand-timeline::before { left: 14px; }
|
|
.brand-timeline article { grid-template-columns: 1fr; gap: 12px; padding: 0 0 28px 42px; }
|
|
.brand-timeline article::before { top: 7px; left: 6px; }
|
|
.timeline-year { padding-top: 0; font-size: 24px; text-align: left; }
|
|
.timeline-card { padding: 23px 22px 20px; }
|
|
.timeline-card::before { display: none; }
|
|
.brand-timeline article:hover .timeline-card { transform: translateY(-3px); }
|
|
.prose p { font-size: 14px; }
|
|
.product-grid, .card-grid, .members > div { grid-template-columns: 1fr; }
|
|
.product-card img, .product-placeholder { height: 290px; }
|
|
.article-list > a { grid-template-columns: 54px 1fr; gap: 12px; padding: 30px 8px; }
|
|
.article-list > a::after { display: none; }
|
|
.article-no { font-size: 22px; }
|
|
.article-list h3 { font-size: 20px; }
|
|
.gallery { display: block; margin-top: 55px; }
|
|
.gallery figure, .gallery figure:nth-child(n) { height: 280px; margin-bottom: 16px; }
|
|
.members { padding: 28px 22px; border-radius: 19px; }
|
|
.footer-inner { width: calc(100% - 36px); grid-template-columns: 1fr 1fr; gap: 36px 25px; }
|
|
.footer-brand { grid-column: 1 / -1; }
|
|
.footer-inner > div:last-child { grid-column: auto; }
|
|
.copyright { width: calc(100% - 36px); display: block; line-height: 2; }
|
|
.copyright span { display: block; }
|
|
.home-hero { min-height: 760px; }
|
|
.home-hero-shade,.home-hero-grid { display: none; }
|
|
.home-hero-shade { background: linear-gradient(90deg,rgba(0,99,183,.92),rgba(0,144,255,.7)),linear-gradient(0deg,rgba(0,111,201,.68),transparent 60%); }
|
|
.home-hero-solid { width: 100%; clip-path: none; background: linear-gradient(180deg,rgba(0,75,142,.66),rgba(0,119,215,.38) 55%,rgba(0,45,88,.68)); }
|
|
.home-hero-grid { background-size: 44px 44px; }
|
|
.home-hero-content { min-height: 690px; justify-content: flex-start; padding-top: 105px; }
|
|
.home-hero h1 { margin-top: 18px; font-size: 58px; line-height: 1; letter-spacing: -4px; }
|
|
.home-hero-content > p { max-width: 100%; font-size: 17px; line-height: 1.7; text-align: center; }
|
|
.home-hero-actions { width: 100%; align-items: stretch; flex-direction: column; }
|
|
.home-primary-button,.home-ghost-button { width: 100%; }
|
|
.ring-one { width: 330px; height: 330px; right: -190px; top: 160px; }.ring-two { display: none; }
|
|
.home-about { padding-top: 80px; padding-bottom: 90px; }
|
|
.home-about-image { width: calc(100% - 14px); }.home-about-image img { min-height: 370px; }.home-about-image > span { right: -14px; bottom: 34px; }
|
|
.home-honor-carousel { width: 100%; min-height: 410px; }
|
|
.home-about-copy h2 { font-size: 36px; letter-spacing: -2px; }.home-about-points { grid-template-columns: 1fr; }
|
|
.home-ecosystem,.home-products,.home-news { padding-top: 78px; padding-bottom: 85px; }
|
|
.home-section-head { align-items: flex-start; flex-direction: column; gap: 20px; margin-bottom: 34px; }.home-section-head h2 { font-size: 40px; }.home-section-head > p { font-size: 14px; }
|
|
.ecosystem-grid { display: block; }.ecosystem-card:nth-child(n) { min-height: 340px; margin-bottom: 16px; }
|
|
.home-product-grid,.home-news-grid { grid-template-columns: 1fr; }.home-product-image { height: 310px; }.home-news-grid > a:last-child { grid-column: auto; }
|
|
.home-innovation { padding-top: 80px; padding-bottom: 80px; }.innovation-card { min-height: 380px; padding: 34px 27px; }.innovation-card h2 { font-size: 38px; }.innovation-card > span { top: 25px; font-size: 55px; }
|
|
.home-cta { padding: 80px 0; }.home-cta h2 { font-size: 38px; letter-spacing: -2px; }
|
|
.product-toolbar { align-items: flex-start; flex-direction: column; }
|
|
.category-filters { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
|
|
.category-filters button { flex: 0 0 auto; }
|
|
.product-pagination { gap: 7px; margin-top: 36px; }
|
|
.product-pagination button { min-width: 38px; height: 38px; padding: 0 9px; }
|
|
.purchase-channels { margin-top: 48px; padding: 30px 24px; border-radius: 21px 5px 21px 5px; }
|
|
.purchase-channel-links { grid-template-columns: 1fr; }
|
|
.purchase-channels.compact .purchase-channel-links { grid-template-columns: 1fr; }
|
|
.sports-grouped-section { padding-bottom: 72px; }
|
|
.sports-grouped-section + .sports-grouped-section { padding-top: 62px; }
|
|
.sports-grouped-heading { margin-bottom: 30px; }
|
|
.sports-grouped-gallery { grid-template-columns: 1fr; }
|
|
.sports-grouped-gallery img { height: 230px; }
|
|
.poster-gallery { grid-template-columns: 1fr; }
|
|
.poster-gallery__card { min-height: 390px; padding: 12px; }
|
|
.poster-lightbox__topbar { padding: 13px 15px; }
|
|
.poster-lightbox__viewport { inset: 68px 12px 78px; }
|
|
.poster-lightbox__arrow { top: auto; bottom: 18px; width: 42px; height: 42px; border-radius: 50%; transform: none; font-size: 30px; }
|
|
.poster-lightbox__arrow--previous { left: 14px; }
|
|
.poster-lightbox__arrow--next { right: 14px; }
|
|
.detail-hero, .detail-hero-inner { min-height: 430px; }
|
|
.breadcrumbs { top: 24px; left: 0; }
|
|
.detail-hero h1 { font-size: 39px; letter-spacing: -2px; }
|
|
.product-overview { padding-top: 52px; padding-bottom: 70px; }
|
|
.product-main-image { height: 340px; }
|
|
.product-thumbnails { grid-template-columns: repeat(3,1fr); }
|
|
.product-thumbnails button { height: 85px; }
|
|
.product-summary h2 { font-size: 34px; }
|
|
.detail-section { padding-top: 68px; padding-bottom: 68px; }
|
|
.spec-grid, .related-grid, .detail-gallery { grid-template-columns: 1fr; }
|
|
.related-grid img, .related-placeholder { height: 260px; }
|
|
.editorial-detail { padding-top: 60px; padding-bottom: 80px; }
|
|
.detail-gallery img { height: 260px; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
|
|
.reveal { opacity: 1; transform: none; }
|
|
}
|