|
|
<!doctype html>
|
|
|
<html lang="zh-CN">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<meta name="description" content="首届沪苏协同新兴产业科创大赛官方网站，聚焦光通信全产业链创新。">
|
|
|
<title>首届沪苏协同新兴产业科创大赛</title>
|
|
|
<script src="assets/prototype-scale.js?v=20260819-hero"></script>
|
|
|
<style>
|
|
|
@font-face {
|
|
|
font-family: "Smiley Sans";
|
|
|
src: url("assets/fonts/SmileySans-Oblique.woff2") format("woff2");
|
|
|
font-style: oblique;
|
|
|
font-weight: 400 900;
|
|
|
font-display: swap;
|
|
|
}
|
|
|
:root {
|
|
|
--blue: #0094dc;
|
|
|
--blue-dark: #0078b8;
|
|
|
--circle-blue: #0094dc;
|
|
|
--circle-blue-soft: #d9f1fc;
|
|
|
--circle-blue-pale: #eef9fe;
|
|
|
--photon: #78dcff;
|
|
|
--mint: #69c9df;
|
|
|
--mint-dark: #168caf;
|
|
|
--gold: #a9ddf0;
|
|
|
--gold-dark: #438ead;
|
|
|
--cinnabar: #32b8db;
|
|
|
--sunrise: #9de4f5;
|
|
|
--navy: #051426;
|
|
|
--ink: #10283c;
|
|
|
--muted: #607486;
|
|
|
--ice: #edf8fc;
|
|
|
--line: #cfe5ef;
|
|
|
--white: #fff;
|
|
|
--wrap: min(1280px, calc(100% - 64px));
|
|
|
--ease: cubic-bezier(.2,.8,.2,1);
|
|
|
--font-sans: "Noto Sans CJK SC", "Source Han Sans SC", "Noto Sans SC", "Liberation Sans", sans-serif;
|
|
|
--font-serif: "Noto Serif CJK SC", "Source Han Serif SC", "Noto Serif SC", "Liberation Serif", serif;
|
|
|
--font-small: var(--font-sans);
|
|
|
--font-small-size: 14px;
|
|
|
--font-en: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
|
|
|
}
|
|
|
* { box-sizing: border-box; }
|
|
|
html { width: 100%; min-height: 100%; overflow-x: hidden; scroll-behavior: smooth; }
|
|
|
body { margin: 0; width: 100%; min-width: 320px; min-height: 100%; overflow-x: hidden; color: var(--ink); background: #071526; font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
|
|
|
a { color: inherit; text-decoration: none; }
|
|
|
.wrap { width: var(--wrap); margin: 0 auto; }
|
|
|
.site-header { position: absolute; inset: 0 0 auto; z-index: 20; color: #fff; background: transparent; }
|
|
|
.site-header .wrap, .hero .wrap { width: calc(100% - 144px); max-width: none; }
|
|
|
.header-inner { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 36px; }
|
|
|
.brand { display: flex; align-items: center; width: min(19.2vw, 256px); }
|
|
|
.brand::before { display: none; }
|
|
|
.brand-logo { display: block; width: 100%; height: auto; }
|
|
|
.header-tools { display: flex; align-items: center; gap: 34px; }
|
|
|
.nav { display: flex; align-items: center; gap: 52px; font-size: 15px; font-weight: 600; }
|
|
|
.nav a { color: rgba(245,252,255,.96); text-shadow: 0 2px 12px rgba(0,10,48,.72), 0 0 1px rgba(255,255,255,.38); transition: color .2s, text-shadow .2s; }
|
|
|
.nav a:hover { color: #fff; text-shadow: 0 0 18px rgba(103,226,255,.7); }
|
|
|
.nav .apply {
|
|
|
min-width: 96px;
|
|
|
padding: 10px 17px;
|
|
|
color: #fff;
|
|
|
background: #109bd3;
|
|
|
border: 1px solid rgba(169,231,247,.7);
|
|
|
border-radius: 999px;
|
|
|
text-align: center;
|
|
|
letter-spacing: .04em;
|
|
|
box-shadow: 0 0 0 4px rgba(116,213,255,.1), 0 10px 30px rgba(0,8,26,.22);
|
|
|
transition: color .2s, background .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s;
|
|
|
}
|
|
|
.nav .apply:hover { color: #fff; background: #087db4; border-color: #78dcff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16,155,211,.34); }
|
|
|
.language-switch { position: relative; display: inline-flex; min-width: 38px; height: 32px; align-items: center; justify-content: center; padding-left: 16px; color: rgba(245,252,255,.94); font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-shadow: 0 2px 12px rgba(0,10,48,.72); transition: color .2s, text-shadow .2s; }
|
|
|
.language-switch::before { content: ""; position: absolute; top: 50%; left: 0; width: 1px; height: 12px; border-radius: 999px; background: rgba(198,240,255,.32); transform: translateY(-50%); }
|
|
|
.language-switch:hover { color: #8eeaff; text-shadow: 0 0 16px rgba(103,226,255,.72); }
|
|
|
|
|
|
.hero { position: relative; z-index: 6; width: 100%; height: 100vh; height: 100dvh; max-height: 100svh; max-height: 100dvh; min-height: 0; margin: 0; color: #fff; background: #160a66; overflow: hidden; }
|
|
|
.hero::before { content: none; }
|
|
|
.hero-banners { position: absolute; z-index: 0; inset: -1px; pointer-events: none; overflow: hidden; }
|
|
|
.hero-banner {
|
|
|
position: absolute;
|
|
|
inset: 0;
|
|
|
z-index: 0;
|
|
|
opacity: 0;
|
|
|
background-color: #241176;
|
|
|
background-position: left top;
|
|
|
background-size: 100% 100%;
|
|
|
background-repeat: no-repeat;
|
|
|
transition: opacity 2.4s cubic-bezier(0.37, 0, 0.63, 1);
|
|
|
will-change: opacity, transform;
|
|
|
}
|
|
|
.hero-banner.is-active { opacity: 1; z-index: 1; }
|
|
|
.hero-banner--landmarks {
|
|
|
background-image: url("assets/generated/hero-three-landmarks-compact-v14-4k.png?v=1");
|
|
|
animation: hero-banner-drift-a 24s ease-in-out infinite alternate;
|
|
|
}
|
|
|
.hero-banner--photonic {
|
|
|
background-image: url("assets/generated/hero-photonic-youth-blue-purple-balanced-v7-sharp-trails-4k.png?v=1");
|
|
|
background-position: center center;
|
|
|
background-size: cover;
|
|
|
animation: hero-banner-drift-b 28s ease-in-out infinite alternate;
|
|
|
}
|
|
|
@keyframes hero-banner-drift-a {
|
|
|
from { transform: scale(1) translate3d(0, 0, 0); }
|
|
|
to { transform: scale(1.05) translate3d(-1.2%, -0.5%, 0); }
|
|
|
}
|
|
|
@keyframes hero-banner-drift-b {
|
|
|
from { transform: scale(1.045) translate3d(0.8%, 0, 0); }
|
|
|
to { transform: scale(1) translate3d(-0.9%, 0.4%, 0); }
|
|
|
}
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
.hero-banner {
|
|
|
transform: none;
|
|
|
transition: none;
|
|
|
animation: none;
|
|
|
will-change: auto;
|
|
|
}
|
|
|
.hero-banner--landmarks,
|
|
|
.hero-banner--photonic { animation: none; }
|
|
|
}
|
|
|
.hero-map-dots {
|
|
|
position: absolute;
|
|
|
z-index: 1;
|
|
|
left: 18%;
|
|
|
right: 8%;
|
|
|
bottom: 7%;
|
|
|
height: 43%;
|
|
|
background: url("assets/generated/roadmap-pale-blue-dotmaps-full-transparent-v4.png?v=4") center / 100% 100% no-repeat;
|
|
|
opacity: .115;
|
|
|
filter: saturate(1.25) hue-rotate(9deg) drop-shadow(0 0 12px rgba(72,206,255,.18));
|
|
|
transform: perspective(900px) rotateX(5deg) translateZ(0);
|
|
|
transform-origin: 50% 100%;
|
|
|
-webkit-mask-image: linear-gradient(90deg,transparent 0,#000 14%,#000 78%,transparent 100%),linear-gradient(180deg,transparent 0,#000 24%,#000 72%,transparent 100%);
|
|
|
-webkit-mask-composite: source-in;
|
|
|
mask-image: linear-gradient(90deg,transparent 0,#000 14%,#000 78%,transparent 100%),linear-gradient(180deg,transparent 0,#000 24%,#000 72%,transparent 100%);
|
|
|
mask-composite: intersect;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
.hero-map-dots::before,
|
|
|
.hero-map-dots::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
.hero-map-dots::before {
|
|
|
inset: 7% 9% 24%;
|
|
|
background: inherit;
|
|
|
opacity: .42;
|
|
|
filter: blur(1.8px);
|
|
|
transform: translateY(-13%) scale(.78);
|
|
|
transform-origin: 50% 70%;
|
|
|
}
|
|
|
.hero-map-dots::after {
|
|
|
inset: 46% 5% -7% 12%;
|
|
|
background-image: radial-gradient(circle,rgba(151,236,255,.74) 0 1.2px,transparent 1.8px);
|
|
|
background-size: 27px 22px;
|
|
|
opacity: .32;
|
|
|
filter: blur(.25px) drop-shadow(0 0 5px rgba(73,211,255,.35));
|
|
|
transform: perspective(500px) rotateX(17deg) scale(1.08,1.22);
|
|
|
-webkit-mask-image: radial-gradient(ellipse at 52% 48%,#000 0,rgba(0,0,0,.72) 45%,transparent 78%);
|
|
|
mask-image: radial-gradient(ellipse at 52% 48%,#000 0,rgba(0,0,0,.72) 45%,transparent 78%);
|
|
|
}
|
|
|
.hero::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
z-index: 2;
|
|
|
inset: -1px;
|
|
|
background: radial-gradient(ellipse 30% 44% at 49% 76%, rgba(3,22,105,.58) 0%, rgba(5,43,139,.34) 48%, transparent 78%), radial-gradient(ellipse 32% 38% at 50% 23%, rgba(112,45,211,.46) 0%, rgba(78,38,181,.24) 48%, transparent 80%), linear-gradient(180deg, rgba(23,10,91,.42) 0%, rgba(24,22,108,.22) 14%, transparent 38%, transparent 68%, rgba(13,25,95,.18) 100%), radial-gradient(ellipse 44% 62% at 49% 48%, rgba(70,74,204,.18) 0%, rgba(36,105,199,.08) 52%, transparent 82%), radial-gradient(ellipse 58% 76% at 50% 42%, transparent 0%, transparent 62%, rgba(31,16,101,.12) 82%, rgba(18,8,71,.24) 100%);
|
|
|
}
|
|
|
.hero-grid { position: relative; z-index: 3; height: 100%; padding-top: 184px; display: flex; justify-content: flex-start; }
|
|
|
.hero-content { position: static; width: 100%; padding: 0 0 0 28px; transform: translateY(-30px); }
|
|
|
.hero-content::before, .hero-content::after { content: none; }
|
|
|
.hero-slogan { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 0; width: 100%; max-width: 100%; text-align: left; isolation: isolate; transform: none; }
|
|
|
.hero-slogan::after { content: none; }
|
|
|
.hero-slogan span { position: relative; display: block; max-width: 100%; white-space: nowrap; color: #fff; -webkit-text-stroke: .7px rgba(255,255,255,.7); paint-order: stroke fill; filter: drop-shadow(0 3px 2px rgba(0,10,38,.72)) drop-shadow(0 0 18px rgba(0,15,55,.48)); }
|
|
|
.hero-slogan .slogan-first {
|
|
|
display: flex;
|
|
|
align-items: flex-end;
|
|
|
gap: 0;
|
|
|
width: min(460px, 36.8vw);
|
|
|
line-height: 0;
|
|
|
}
|
|
|
.hero-slogan .slogan-first img {
|
|
|
display: block;
|
|
|
height: auto;
|
|
|
opacity: 1;
|
|
|
filter: drop-shadow(0 2px 2px rgba(0,18,66,.68)) drop-shadow(0 0 3px rgba(255,255,255,.22));
|
|
|
}
|
|
|
.hero-slogan .slogan-year {
|
|
|
width: 33.2%;
|
|
|
flex: 0 0 33.2%;
|
|
|
transform: translateX(-10%);
|
|
|
}
|
|
|
.hero-slogan .slogan-title {
|
|
|
width: 65.6%;
|
|
|
transform: translateX(calc(-6% - 4px));
|
|
|
}
|
|
|
.hero-slogan .slogan-second {
|
|
|
margin-left: 0;
|
|
|
transform: none;
|
|
|
font-family: var(--font-serif);
|
|
|
font-size: clamp(37.4px, 3.2vw, 51.8px);
|
|
|
font-weight: 800;
|
|
|
line-height: 1;
|
|
|
letter-spacing: -.01em;
|
|
|
background: none;
|
|
|
-webkit-background-clip: border-box;
|
|
|
background-clip: border-box;
|
|
|
color: #fff;
|
|
|
-webkit-text-fill-color: currentColor;
|
|
|
text-shadow: 0 2px 3px rgba(0,18,64,.72), 0 0 3px rgba(255,255,255,.24);
|
|
|
filter: none;
|
|
|
}
|
|
|
.hero-actions { position: absolute; z-index: 8; bottom: 97px; left: 50%; display: grid; grid-template-columns: repeat(2,79.2px); gap: 34.4px; width: max-content; margin: 0; padding: 0; transform: translateX(-50%); }
|
|
|
.hero-organizers { position: relative; display: grid; grid-template-columns: 1fr; gap: 9px; width: 100%; margin: 34px 0 0; padding: 0; background: none; border: 0; clip-path: none; backdrop-filter: none; font-family: var(--font-sans); font-kerning: normal; text-align: left; text-rendering: optimizeLegibility; }
|
|
|
.hero-org-row { position: relative; display: grid; grid-template-columns: 68px minmax(0,1fr); gap: 0; margin: 0; font-size: 13px; line-height: 1.38; text-align: left; text-shadow: 0 1px 3px rgba(0,10,42,.82), 0 0 8px rgba(126,225,255,.28); }
|
|
|
.hero-org-row:nth-child(3), .hero-org-row:nth-child(4), .hero-org-row:nth-child(5) { grid-column: auto; }
|
|
|
.hero-org-row dt { color: #effcff; font-weight: 800; white-space: nowrap; text-align: left; letter-spacing: .075em; }
|
|
|
.hero-org-row dd { margin: 0; color: #f8fdff; font-weight: 550; text-align: left; letter-spacing: .018em; }
|
|
|
.hero-primary {
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
display: flex;
|
|
|
width: 79.2px;
|
|
|
aspect-ratio: 1;
|
|
|
height: 79.2px;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
overflow: visible;
|
|
|
isolation: isolate;
|
|
|
opacity: .8;
|
|
|
padding: 0;
|
|
|
color: #f7fdff;
|
|
|
background: transparent;
|
|
|
border: 0;
|
|
|
border-radius: 50%;
|
|
|
box-shadow: 0 18px 42px rgba(1,12,69,.28), 0 0 34px rgba(76,211,255,.08);
|
|
|
backdrop-filter: none;
|
|
|
font-family: var(--font-sans);
|
|
|
font-size: 12.1px;
|
|
|
font-weight: 700;
|
|
|
letter-spacing: .08em;
|
|
|
text-align: center;
|
|
|
text-shadow: 0 2px 10px rgba(0,15,70,.62), 0 0 12px rgba(180,241,255,.16);
|
|
|
transform: scale(1.08);
|
|
|
transition: transform .35s var(--ease),box-shadow .35s var(--ease),filter .35s var(--ease),letter-spacing .35s var(--ease),opacity .35s ease;
|
|
|
}
|
|
|
.hero-primary::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
z-index: -1;
|
|
|
inset: 7.7px;
|
|
|
border: 1px solid rgba(211,248,255,.28);
|
|
|
border-radius: 50%;
|
|
|
background: linear-gradient(90deg,rgba(88,104,244,.68) 0%,rgba(155,67,241,.68) 52%,rgba(229,29,221,.68) 100%);
|
|
|
box-shadow: inset 0 1px rgba(238,253,255,.34), inset 0 -14px 24px rgba(4,10,58,.1), 0 10px 26px rgba(2,15,73,.24);
|
|
|
}
|
|
|
.hero-primary::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
z-index: -2;
|
|
|
inset: 0;
|
|
|
padding: 1px;
|
|
|
border: 0;
|
|
|
border-radius: 50%;
|
|
|
background: conic-gradient(from 205deg,rgba(88,220,255,.18),#75e7ff 18%,rgba(159,113,255,.92) 43%,rgba(255,116,224,.62) 58%,rgba(92,221,255,.16) 78%,#63ddff 100%);
|
|
|
box-shadow: 0 0 12px rgba(83,207,255,.32), 0 0 30px rgba(83,207,255,.12);
|
|
|
-webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
|
|
|
-webkit-mask-composite: xor;
|
|
|
mask-composite: exclude;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
.hero-primary--audience {
|
|
|
border-color: transparent;
|
|
|
background: transparent;
|
|
|
box-shadow: 0 18px 42px rgba(1,12,69,.28), 0 0 34px rgba(76,211,255,.08);
|
|
|
}
|
|
|
.hero-primary--audience::before { background: linear-gradient(90deg,rgba(8,219,232,.68) 0%,rgba(39,156,244,.68) 52%,rgba(103,93,245,.68) 100%); }
|
|
|
.hero-primary:hover {
|
|
|
color: #fff;
|
|
|
filter: brightness(1.1) saturate(1.08);
|
|
|
letter-spacing: .105em;
|
|
|
transform: translateY(-6px) scale(1.1178);
|
|
|
box-shadow: 0 0 0 5px rgba(58,190,231,.08), 0 22px 44px rgba(1,12,69,.34), 0 0 36px rgba(88,216,255,.16);
|
|
|
}
|
|
|
.hero-primary--audience:hover { color: #fff; }
|
|
|
.hero-primary:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
|
|
|
.quick-nav { min-height: 286px; padding: 120px 0 28px; display: flex; align-items: center; justify-content: center; gap: 24px; background: #109bd3; border-bottom: 1px solid #087db4; box-shadow: inset 0 1px rgba(255,255,255,.18), inset 0 -18px 42px rgba(4,93,145,.16); }
|
|
|
.quick-link { display: inline-flex; width: 112px; height: 112px; align-items: center; justify-content: center; border: 1px solid rgba(0,148,220,.22); border-radius: 50%; color: var(--blue-dark); background: var(--circle-blue-pale); box-shadow: inset 0 0 0 9px rgba(0,148,220,.09), 0 14px 32px rgba(0,73,116,.2); font-size: 14px; font-weight: 800; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; }
|
|
|
.quick-link:hover { transform: translateY(-4px); border-color: #fff; box-shadow: inset 0 0 0 9px rgba(16,155,211,.14), 0 18px 38px rgba(0,64,103,.28); }
|
|
|
.quick-link:nth-child(2) { color: var(--blue-dark); border-color: rgba(0,148,220,.28); background: var(--circle-blue-soft); }
|
|
|
.quick-link:nth-child(3) { color: var(--blue-dark); border-color: rgba(0,148,220,.34); background: #c4eafb; }
|
|
|
|
|
|
.section { padding: 120px 0; }
|
|
|
.section-kicker { display: flex; align-items: center; gap: 12px; width: min(310px,100%); margin-bottom: 20px; color: var(--blue-dark); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
|
|
|
.section-kicker::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--circle-blue); box-shadow: 0 0 0 4px rgba(0,148,220,.1), 0 0 18px rgba(0,148,220,.42); }
|
|
|
.section-kicker::after { content: ""; flex: 1; height: 1px; margin-left: 2px; background: linear-gradient(90deg,rgba(16,155,211,.72),rgba(114,201,173,.34) 62%,transparent); }
|
|
|
.section-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.8fr); gap: 60px; align-items: end; margin-bottom: 52px; }
|
|
|
.section-title { margin: 0; color: var(--navy); font-size: clamp(38px,3.8vw,54px); line-height: 1.05; letter-spacing: -.055em; }
|
|
|
.section-lead { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.9; }
|
|
|
.audience {
|
|
|
position: relative;
|
|
|
z-index: auto;
|
|
|
margin: 0;
|
|
|
padding: 120px 0;
|
|
|
background-color: #fff;
|
|
|
background-image: linear-gradient(180deg, #f8fbfc 0%, #f8fbfc 42%, #fbfdfe 72%, #fff 100%);
|
|
|
background-position: 50% 50%;
|
|
|
background-size: cover;
|
|
|
background-repeat: no-repeat;
|
|
|
overflow: visible;
|
|
|
}
|
|
|
.audience::before { content: ""; position: absolute; z-index: 0; top: -210px; left: -142px; width: 500px; height: 500px; min-width: 500px; min-height: 500px; border-radius: 50%; background: linear-gradient(45deg, #b8e5f9 0%, var(--circle-blue-soft) 58%, var(--circle-blue-pale) 100%); }
|
|
|
.audience::after { content: none; }
|
|
|
.audience .wrap { position: relative; z-index: 1; }
|
|
|
.audience .section-kicker { margin-bottom: 16px; color: var(--blue-dark); }
|
|
|
.audience .section-head { grid-template-columns: minmax(0,.72fr) minmax(420px,1.28fr); align-items: center; gap: 72px; margin-bottom: 42px; }
|
|
|
.audience .section-title, .tracks .section-title, .roadmap .section-title { position: relative; z-index: 1; display: inline-block; width: max-content; max-width: 100%; padding: 34px 48px 20px; color: var(--navy); font-family: inherit; font-size: clamp(38px,3.8vw,54px); line-height: 1.05; letter-spacing: -.055em; white-space: nowrap; isolation: isolate; }
|
|
|
/* Keep the decorative frame fixed while pulling the title 23px toward its
|
|
|
left rule: the measured 76px visual gap is reduced by 30%. */
|
|
|
.audience .section-title, .tracks .section-title, .roadmap .section-title { text-indent: -47px; }
|
|
|
.audience .section-title::before, .tracks .section-title::before, .roadmap .section-title::before { content: ""; position: absolute; z-index: -1; inset: -30px -62px -42px -44px; background: url("assets/title-precision-bracket-v1.png") left bottom / 100% 100% no-repeat; pointer-events: none; }
|
|
|
.tracks .section-title { text-indent: 0; }
|
|
|
.tracks .section-title > span { position: relative; display: inline-block; transform: translateX(47px); }
|
|
|
.tracks .section-title::before { transform: scaleX(-1); }
|
|
|
.audience .section-lead { max-width: 650px; color: #526f82; font-size: 17px; line-height: 1.75; }
|
|
|
.audience-card { display: grid; grid-template-columns: minmax(270px,.76fr) minmax(0,2fr); gap: 0; align-items: stretch; border-radius: 20px; filter: drop-shadow(0 20px 28px rgba(33,111,143,.11)); }
|
|
|
.audience-focus { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; min-height: 216px; padding: 30px 54px 30px 32px; color: #fff; background: #109bd3; border-radius: 20px 0 0 20px; }
|
|
|
.audience-code { color: rgba(255,255,255,.76); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
|
|
|
.audience-stage { margin-top: 30px; }
|
|
|
.audience-stage strong { display: block; color: #fff; font-size: clamp(22px,1.85vw,29px); line-height: 1.28; letter-spacing: -.045em; white-space: nowrap; }
|
|
|
.audience-detail { display: grid; grid-template-rows: auto auto; align-content: space-evenly; min-width: 0; margin: -32px 0 0; padding: 28px 44px; background: rgba(255,255,255,.94); border: 0; border-radius: 20px 20px 20px 0; box-shadow: 0 22px 44px rgba(33,111,143,.1); backdrop-filter: blur(8px); }
|
|
|
.audience-detail > p { max-width: 860px; margin: 0; color: var(--ink); font-family: var(--font-sans); font-size: 17px; font-weight: 600; line-height: 1.75; }
|
|
|
.audience-types { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
|
|
|
.audience-type { display: grid; grid-template-columns: 30px 1fr; gap: 7px; align-items: center; min-height: 70px; padding: 14px 24px 14px 16px; background: #edf8fc; border-left: 3px solid rgba(16,155,211,.32); border-radius: 12px; transition: color .2s, transform .2s var(--ease), background .2s; }
|
|
|
.audience-type:nth-child(2) { background: #eaf8f3; }
|
|
|
.audience-type:nth-child(3) { background: #eef5f9; }
|
|
|
.audience-type:hover { color: var(--blue-dark); background: #dff4fb; transform: translateY(-3px); }
|
|
|
.audience-type small { color: var(--blue-dark); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
|
|
|
.audience-type strong { color: var(--ink); font-size: 18px; letter-spacing: .01em; }
|
|
|
.audience-note { margin-top: 12px; color: #718896; font-size: 11px; line-height: 1.6; }
|
|
|
|
|
|
.tracks { position: relative; z-index: auto; margin: 0; padding: 0 0 120px; color: var(--ink); background: #fff; overflow: visible; }
|
|
|
.tracks::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
z-index: 0;
|
|
|
top: -286px;
|
|
|
right: -156px;
|
|
|
width: 660px;
|
|
|
height: 660px;
|
|
|
border-radius: 50%;
|
|
|
background:
|
|
|
radial-gradient(circle at 32% 30%, rgba(191,244,255,.96) 0 7%, rgba(57,190,235,.54) 31%, rgba(0,148,220,.42) 58%, rgba(4,83,151,.25) 82%, rgba(4,67,126,0) 100%);
|
|
|
box-shadow: 0 34px 92px rgba(0,105,171,.14);
|
|
|
}
|
|
|
.tracks .wrap { position: relative; z-index: 2; }
|
|
|
.tracks .section-head { position: relative; display: block; width: min(620px,58%); margin: 0 0 30px auto; text-align: right; }
|
|
|
.tracks .section-lead { color: var(--muted); }
|
|
|
.tracks .section-kicker { color: var(--blue-dark); }
|
|
|
.tracks .section-kicker::before { background: var(--circle-blue); box-shadow: 0 0 0 4px rgba(0,148,220,.1), 0 0 18px rgba(0,148,220,.3); }
|
|
|
.tracks .section-kicker::after { background: linear-gradient(90deg,rgba(215,245,255,.88),rgba(255,255,255,.2) 62%,transparent); }
|
|
|
.track-intro { max-width: 980px; margin: -18px 0 48px 0; color: var(--muted); line-height: 2; }
|
|
|
.track-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
|
|
|
.track-card { position: relative; isolation: isolate; min-height: 184px; padding: 58px 42px 32px; color: var(--ink); background: rgba(247,252,255,.97); border: 1px solid rgba(16,155,211,.18); border-radius: 24px; box-shadow: 0 14px 34px rgba(24,100,135,.08); overflow: hidden; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
|
|
|
.track-card:nth-child(1) { background: #edf8fc; }
|
|
|
.track-card:nth-child(2) { background: #e8f5fb; }
|
|
|
.track-card:nth-child(3) { background: #edf8f4; border-color: rgba(61,156,118,.2); }
|
|
|
.track-card:nth-child(4) { background: #eef6fa; }
|
|
|
.track-card:hover { transform: translateY(-5px); border-color: rgba(16,155,211,.38); box-shadow: 0 22px 44px rgba(24,100,135,.13); }
|
|
|
.track-card h3 { position: relative; z-index: 1; margin: 0 0 10px; color: var(--navy); font-size: 23px; line-height: 1.35; letter-spacing: -.015em; }
|
|
|
.track-card h3::before { content: ""; position: absolute; top: -39px; left: 0; width: 34px; height: 3px; border-radius: 999px; background: #109bd3; }
|
|
|
.track-card:nth-child(3) h3::before { background: #55b88a; }
|
|
|
.track-card p { position: relative; z-index: 1; max-width: 82%; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
|
|
|
|
|
|
.audience-tracks-layout { position: relative; display: grid; grid-template-columns: minmax(390px,42%) minmax(0,58%); min-height: 980px; padding: 0 max(32px,calc((100vw - 1440px)/2)); background: radial-gradient(ellipse 74% 64% at 96% 42%,rgba(0,148,220,.16) 0%,rgba(73,210,241,.09) 42%,transparent 74%), radial-gradient(ellipse 48% 46% at 8% 10%,rgba(4,83,151,.08) 0%,transparent 72%), linear-gradient(180deg,#f3faff 0%,#f8fcfe 48%,#fff 88%); overflow: hidden; }
|
|
|
.audience-tracks-layout::before { content: ""; position: absolute; top: 52%; left: 40.5%; width: 18%; height: 1px; background: linear-gradient(90deg,rgba(16,155,211,.5),rgba(16,155,211,0)); transform: rotate(18deg); transform-origin: left center; }
|
|
|
.audience-tracks-layout .audience, .audience-tracks-layout .tracks { min-width: 0; background: transparent; }
|
|
|
.audience-tracks-layout .audience { padding: 100px 0 162px; }
|
|
|
.audience-tracks-layout .audience .wrap, .audience-tracks-layout .tracks .wrap { width: calc(100% - 36px); max-width: none; }
|
|
|
.audience-tracks-layout .audience .wrap { margin-left: 0; }
|
|
|
.audience-tracks-layout .tracks .wrap { margin-right: 0; }
|
|
|
.audience-tracks-layout .audience .section-head { display: block; margin-bottom: 36px; }
|
|
|
.audience-tracks-layout .audience-card { grid-template-columns: 1fr; }
|
|
|
.audience-tracks-layout .audience-focus { min-height: 112px; align-items: center; justify-content: center; padding: 14px 42px 24px; border-radius: 22px 22px 0 0; clip-path: polygon(0 0,100% 0,100% 78%,57% 78%,50% 100%,43% 78%,0 78%); text-align: center; }
|
|
|
.audience-tracks-layout .audience-stage { margin-top: 0; }
|
|
|
.audience-tracks-layout .audience-detail { gap: 22px; margin: -20px 0 0; padding: 50px 30px 34px; border-radius: 0 0 22px 22px; }
|
|
|
.audience-tracks-layout .audience-types { grid-template-columns: 1fr; }
|
|
|
.audience-tracks-layout .tracks { align-self: start; margin-top: 360px; padding: 0 0 120px; }
|
|
|
.audience-tracks-layout .tracks::before { top: -210px; right: -250px; }
|
|
|
.audience-tracks-layout .tracks .section-head { width: 100%; margin-bottom: 34px; }
|
|
|
.audience-tracks-layout .track-grid { gap: 14px; }
|
|
|
.audience-tracks-layout .track-card { min-height: 196px; padding: 54px 34px 30px; }
|
|
|
.audience-tracks-layout .track-card p { max-width: 100%; }
|
|
|
|
|
|
/* Editorial audience + tracks flow: open, page-native and deliberately
|
|
|
free of poster/PPT framing. */
|
|
|
.audience-tracks-layout {
|
|
|
display: block;
|
|
|
min-height: 0;
|
|
|
padding: 0;
|
|
|
background:
|
|
|
radial-gradient(circle at 100% 11%, rgba(216,239,250,.86) 0 12%, transparent 31%),
|
|
|
linear-gradient(180deg,#fbfdff 0%,#fff 54%,#f5fbfe 100%);
|
|
|
}
|
|
|
.audience-tracks-layout::before { content: none; }
|
|
|
.audience-tracks-layout .audience,
|
|
|
.audience-tracks-layout .tracks { width: 100%; margin: 0; background: transparent; }
|
|
|
.audience-tracks-layout .audience { padding: 112px 0 92px; }
|
|
|
.audience-tracks-layout .audience .wrap,
|
|
|
.audience-tracks-layout .tracks .wrap { width: var(--wrap); margin-right: auto; margin-left: auto; }
|
|
|
.audience::before { top: auto; right: -170px; bottom: -130px; left: auto; width: 520px; height: 520px; min-width: 0; min-height: 0; opacity: .48; }
|
|
|
.audience-tracks-layout .audience .section-head { margin-bottom: 30px; }
|
|
|
.audience .section-title { display: flex; align-items: center; gap: 14px; width: auto; padding: 0; text-indent: 0; color: var(--ink); font-size: 16px; font-weight: 750; letter-spacing: .04em; }
|
|
|
.audience .section-title::before { content: ""; position: static; width: 30px; height: 2px; background: var(--blue); transform: none; }
|
|
|
.audience-tracks-layout .audience-card { display: block; filter: none; }
|
|
|
.audience-tracks-layout .audience-focus { display: block; min-height: 0; padding: 0; color: var(--navy); background: transparent; border-radius: 0; clip-path: none; text-align: left; }
|
|
|
.audience-tracks-layout .audience-stage { margin: 0; }
|
|
|
.audience-tracks-layout .audience-stage strong { color: var(--navy); font-size: clamp(38px,4.1vw,60px); font-weight: 760; line-height: 1.08; letter-spacing: -.055em; white-space: normal; }
|
|
|
.audience-tracks-layout .audience-detail { display: block; margin: 0; padding: 0; background: transparent; border-radius: 0; box-shadow: none; backdrop-filter: none; }
|
|
|
.audience-tracks-layout .audience-detail > p { max-width: 720px; margin: 34px 0 30px; color: #526f82; font-size: 16px; font-weight: 500; line-height: 1.9; }
|
|
|
.audience-tracks-layout .audience-types { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; max-width: 980px; border-top: 1px solid #d7e7ef; border-bottom: 1px solid #d7e7ef; }
|
|
|
.audience-tracks-layout .audience-type { display: flex; min-height: 142px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 22px 36px 24px 0; color: var(--ink); background: transparent; border: 0; border-radius: 0; transform: none; }
|
|
|
.audience-tracks-layout .audience-type + .audience-type { padding-left: 36px; border-left: 1px solid #d7e7ef; }
|
|
|
.audience-tracks-layout .audience-type:hover { color: var(--blue-dark); background: rgba(237,248,252,.46); transform: none; }
|
|
|
.audience-tracks-layout .audience-type small { color: rgba(0,120,184,.54); font-family: var(--font-serif); font-size: clamp(38px,4vw,58px); font-weight: 400; line-height: 1; letter-spacing: -.05em; }
|
|
|
.audience-tracks-layout .audience-type strong { color: currentColor; font-size: 20px; font-weight: 700; }
|
|
|
.audience-tracks-layout .tracks { padding: 82px 0 120px; border-top: 1px solid rgba(207,229,239,.72); }
|
|
|
.audience-tracks-layout .tracks::before { top: -170px; right: -220px; opacity: .28; box-shadow: none; }
|
|
|
.audience-tracks-layout .tracks .section-head { width: 100%; margin: 0 0 52px; text-align: left; }
|
|
|
.tracks .section-title { width: auto; padding: 0; text-indent: 0; }
|
|
|
.tracks .section-title > span { transform: none; }
|
|
|
.tracks .section-title::before { content: none; }
|
|
|
.audience-tracks-layout .track-grid { gap: 0; border-top: 1px solid #d7e7ef; }
|
|
|
.audience-tracks-layout .track-card { min-height: 160px; padding: 34px 34px 30px 0; background: transparent; border: 0; border-bottom: 1px solid #d7e7ef; border-radius: 0; box-shadow: none; }
|
|
|
.audience-tracks-layout .track-card:nth-child(even) { padding-left: 38px; border-left: 1px solid #d7e7ef; }
|
|
|
.audience-tracks-layout .track-card:hover { background: rgba(237,248,252,.45); border-color: #d7e7ef; box-shadow: none; transform: none; }
|
|
|
.audience-tracks-layout .track-card h3::before { top: -13px; width: 28px; height: 2px; }
|
|
|
.roadmap {
|
|
|
position: relative;
|
|
|
z-index: 3;
|
|
|
margin: 0;
|
|
|
padding: 82px 0 132px;
|
|
|
color: var(--ink);
|
|
|
background:
|
|
|
radial-gradient(ellipse 52% 92% at 4% 6%, rgba(0,148,220,.16) 0%, rgba(73,210,241,.08) 48%, transparent 76%),
|
|
|
radial-gradient(ellipse 42% 76% at 98% 100%, rgba(105,201,223,.12) 0%, transparent 72%),
|
|
|
linear-gradient(135deg, #eaf7fd 0%, #f2faff 46%, #eaf6fb 100%);
|
|
|
overflow: visible;
|
|
|
}
|
|
|
.roadmap::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
z-index: 0;
|
|
|
top: -238px;
|
|
|
left: -172px;
|
|
|
width: 590px;
|
|
|
height: 590px;
|
|
|
border-radius: 50%;
|
|
|
background: linear-gradient(
|
|
|
180deg,
|
|
|
rgba(17, 82, 178, .72) 0%,
|
|
|
rgba(190, 229, 248, .32) 52%,
|
|
|
rgba(24, 194, 229, .42) 100%
|
|
|
);
|
|
|
}
|
|
|
.roadmap::after { content: ""; position: absolute; z-index: 0; right: -210px; bottom: -330px; width: 520px; height: 520px; border-radius: 50%; background: rgba(105,201,223,.08); }
|
|
|
.roadmap .wrap { position: relative; z-index: 2; }
|
|
|
.roadmap .section-head { display: block; margin-bottom: 34px; }
|
|
|
.roadmap .section-lead { color: var(--muted); }
|
|
|
.roadmap .section-kicker { color: var(--blue-dark); }
|
|
|
.roadmap .section-kicker::after { background: linear-gradient(90deg,rgba(16,155,211,.74),rgba(120,220,255,.34) 62%,transparent); }
|
|
|
.timeline { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 0; padding-top: 58px; }
|
|
|
.timeline::before { content: ""; position: absolute; top: 82px; left: 51px; right: calc(25% - 51px); height: 2px; background: linear-gradient(90deg,#49d2f1 0%,#18afe0 33%,#0094dc 66%,#045393 100%); }
|
|
|
.step { position: relative; min-width: 0; padding: 74px 26px 0; text-align: left; }
|
|
|
.step-mark { position: absolute; z-index: 2; top: 0; left: 26px; display: grid; width: 50px; height: 50px; place-items: center; border: 7px solid #e3f8fc; border-radius: 50%; color: #fff; background: #49d2f1; box-shadow: 0 8px 24px rgba(73,210,241,.18); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
|
|
|
.step:nth-child(2) .step-mark { border-color: #dff5fb; background: #18afe0; box-shadow: 0 8px 24px rgba(24,175,224,.22); }
|
|
|
.step:nth-child(3) .step-mark { border-color: #dceff9; background: #0094dc; box-shadow: 0 8px 24px rgba(0,148,220,.27); }
|
|
|
.step:nth-child(4) .step-mark { border-color: #dbe8f3; background: #045393; box-shadow: 0 8px 26px rgba(4,83,147,.34); }
|
|
|
.step h3 { min-height: 60px; margin: 0 0 14px; color: var(--navy); font-size: 22px; line-height: 1.4; }
|
|
|
.step p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
|
|
|
.step p strong { position: relative; display: inline-block; margin-bottom: 11px; padding: 1px 0 1px 12px; color: #168ba7; font-size: 15px; font-weight: 800; line-height: 1.35; letter-spacing: .02em; }
|
|
|
.step p strong::before { content: ""; position: absolute; top: 50%; left: 0; width: 1px; height: 14px; background: #49d2f1; transform: translateY(-50%); }
|
|
|
.step:nth-child(2) p strong { color: #0b85b0; }
|
|
|
.step:nth-child(2) p strong::before { background: #18afe0; }
|
|
|
.step:nth-child(3) p strong { color: #0076b2; }
|
|
|
.step:nth-child(3) p strong::before { background: #0094dc; }
|
|
|
.step:nth-child(4) p strong { color: #045393; }
|
|
|
.step:nth-child(4) p strong::before { background: #045393; }
|
|
|
.step + .step::after { content: ""; position: absolute; top: 74px; bottom: 0; left: 0; width: 1px; background: linear-gradient(180deg,rgba(16,155,211,.2),rgba(16,155,211,.04)); }
|
|
|
|
|
|
.awards { position: relative; z-index: 4; margin: 0; padding: 64px 0 104px; color: var(--ink); background: #f5fafe; overflow: hidden; }
|
|
|
.awards::before, .awards::after { content: none; }
|
|
|
.awards .wrap { position: relative; z-index: 2; }
|
|
|
.awards-layout { display: flex; flex-direction: column; min-height: 0; }
|
|
|
.awards .section-head { position: relative; order: -1; display: flex; flex-direction: column; align-items: center; gap: 0; margin: 0 0 52px; padding: 0; text-align: center; }
|
|
|
.awards .section-head::before { content: ""; width: 42px; height: 3px; margin: 0 0 22px; background: var(--blue); }
|
|
|
.awards .section-title { color: var(--navy); font-size: clamp(38px,3.8vw,54px); line-height: 1.08; letter-spacing: -.055em; }
|
|
|
.awards-summary { max-width: 760px; margin: 22px 0 0; color: #60798a; font-size: 15px; line-height: 1.8; }
|
|
|
.awards-note { display: none; }
|
|
|
.award-grid { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; padding: 0; }
|
|
|
.award-grid::before { content: ""; position: absolute; top: 146px; right: 4%; left: 4%; height: 1px; background: var(--blue); }
|
|
|
.award-card { position: relative; display: flex; min-width: 0; min-height: 304px; padding: 0 24px; flex-direction: column; align-items: center; text-align: center; transition: transform .25s var(--ease); }
|
|
|
.award-card::before { content: ""; position: absolute; z-index: 2; top: 140px; left: 50%; width: 10px; height: 10px; border: 4px solid #f5fafe; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px var(--blue); transform: translateX(-50%); }
|
|
|
.award-card small { display: flex; flex-direction: column; align-items: center; color: var(--blue); font-size: 13px; font-weight: 800; line-height: 1.55; letter-spacing: .05em; }
|
|
|
.award-card small span { display: block; margin-bottom: 10px; color: #add4e6; font-size: clamp(54px,5vw,74px); font-weight: 300; line-height: 1; letter-spacing: -.05em; }
|
|
|
.award-card h3 { order: 2; margin: 68px 0 12px; color: var(--navy); font-size: clamp(22px,2vw,29px); line-height: 1.3; letter-spacing: -.035em; white-space: nowrap; }
|
|
|
.award-card p { order: 3; max-width: 290px; margin: 0; color: #60798a; font-size: 13px; line-height: 1.8; }
|
|
|
.award-card:hover { transform: translateY(-5px); }
|
|
|
.award-card:hover h3 { color: var(--blue-dark); }
|
|
|
|
|
|
.site-footer { position: relative; z-index: 5; margin: 0; padding: 20px 0; color: #fff; background: #0094dc; font-size: 12px; }
|
|
|
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 28px; }
|
|
|
.footer-brand,
|
|
|
.footer-meta { color: rgba(255,255,255,.78); font-size: 12px; font-weight: 400; letter-spacing: .02em; }
|
|
|
|
|
|
@media (min-width: 961px) {
|
|
|
.timeline { transform: translateY(-10px); }
|
|
|
}
|
|
|
@media (min-width: 961px) and (min-aspect-ratio: 16 / 9) {
|
|
|
.hero-banner--landmarks { background-size: 100% 100%; }
|
|
|
}
|
|
|
@media (min-width: 961px) and (max-width: 1200px) {
|
|
|
.hero-slogan .slogan-first { width: min(390px, 38vw); }
|
|
|
.hero-slogan .slogan-second { font-size: clamp(28.8px,3.46vw,38.9px); }
|
|
|
.hero-banner--landmarks { background-position: left center; }
|
|
|
}
|
|
|
@media (max-width: 960px) {
|
|
|
:root { --wrap: min(760px, calc(100% - 40px)); }
|
|
|
.site-header .wrap, .hero .wrap { width: min(760px, calc(100% - 40px)); }
|
|
|
.brand { width: min(16.8vw, 152px); }
|
|
|
.hero { background-position: 55% center; }
|
|
|
.hero-banner--landmarks { background-image: url("assets/generated/hero-three-landmarks-compact-v14-hd.png?v=1"); background-size: cover; background-position: left center; }
|
|
|
.hero-banner--photonic { background-size: cover; background-position: center center; }
|
|
|
.hero-grid { padding-top: 166px; }
|
|
|
.hero-content { width: 100%; padding-left: 20px; }
|
|
|
.hero-slogan { gap: 12px; }
|
|
|
.hero-slogan .slogan-first { width: min(360px, 44.2vw); }
|
|
|
.hero-slogan .slogan-second { font-size: clamp(30.2px, 4.32vw, 38.9px); }
|
|
|
.hero-organizers { width: 100%; margin-top: 30px; }
|
|
|
.track-grid { grid-template-columns: repeat(2,1fr); }
|
|
|
.track-card:nth-child(n) { min-height: 210px; padding: 58px 30px 30px; }
|
|
|
.track-card p { max-width: 100%; }
|
|
|
.timeline { grid-template-columns: repeat(2,1fr); gap: 30px 0; padding-top: 34px; }
|
|
|
.timeline::before { display: none; }
|
|
|
.step:nth-child(3) { border-left: 0; }
|
|
|
.section-head { grid-template-columns: 1fr; gap: 22px; }
|
|
|
.audience .section-head { grid-template-columns: 1fr; gap: 18px; }
|
|
|
.audience-tracks-layout { display: block; min-height: 0; padding: 0; overflow: visible; }
|
|
|
.audience-tracks-layout::before { content: none; }
|
|
|
.audience-tracks-layout .audience, .audience-tracks-layout .tracks { margin-top: 0; }
|
|
|
.audience-tracks-layout .audience .wrap, .audience-tracks-layout .tracks .wrap { width: var(--wrap); margin-right: auto; margin-left: auto; }
|
|
|
.audience-tracks-layout .audience-card { grid-template-columns: 240px minmax(0,1fr); }
|
|
|
.audience-tracks-layout .audience-focus { min-height: 216px; border-radius: 20px 0 0 20px; clip-path: none; }
|
|
|
.audience-tracks-layout .audience-detail { margin: -32px 0 0; padding: 28px 44px; border-radius: 20px 20px 20px 0; }
|
|
|
.audience-tracks-layout .audience-types { grid-template-columns: repeat(3,1fr); }
|
|
|
.audience-card { grid-template-columns: 240px minmax(0,1fr); }
|
|
|
.awards { padding: 60px 0 88px; }
|
|
|
.awards .section-head { margin-bottom: 46px; }
|
|
|
.award-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 44px 0; }
|
|
|
.award-grid::before { display: none; }
|
|
|
.award-card { min-height: 282px; padding: 0 28px; }
|
|
|
.award-card::before { top: 126px; }
|
|
|
.award-card::after { content: ""; position: absolute; top: 132px; right: 12%; left: 12%; height: 1px; background: #25b9e7; }
|
|
|
.award-card small span { font-size: 62px; }
|
|
|
.award-card h3 { margin-top: 58px; }
|
|
|
}
|
|
|
@media (max-width: 640px) {
|
|
|
:root { --wrap: calc(100% - 28px); }
|
|
|
.site-header .wrap, .hero .wrap { width: calc(100% - 30px); }
|
|
|
.header-inner { min-height: 62px; }
|
|
|
.brand { width: min(34.4%, 124px); }
|
|
|
.nav { display: none; }
|
|
|
.hero-banner--landmarks { background-image: url("assets/generated/hero-three-landmarks-compact-v14-hd.png?v=1"); background-size: auto 100%; background-position: left center; }
|
|
|
.hero-banner--photonic { background-size: cover; background-position: 62% center; }
|
|
|
.hero::after { background: radial-gradient(ellipse 48% 32% at 50% 77%, rgba(3,23,108,.58) 0%, rgba(6,45,140,.3) 52%, transparent 82%), radial-gradient(ellipse 46% 28% at 50% 27%, rgba(112,45,211,.42) 0%, rgba(78,38,181,.2) 50%, transparent 80%), linear-gradient(180deg, rgba(28,11,102,.24) 0%, transparent 30%, transparent 68%, rgba(16,23,91,.22) 100%); box-shadow: inset 0 -120px 120px rgba(18,24,92,.1), inset 0 1px rgba(226,214,255,.14); }
|
|
|
.hero-grid { padding-top: 118px; justify-content: flex-start; align-items: flex-start; }
|
|
|
.hero-content { width: 100%; }
|
|
|
.hero-content { padding: 18px 0 0 20px; }
|
|
|
.hero-content::before { width: 62px; height: 68px; }
|
|
|
.hero-content::after { top: 67px; height: 270px; }
|
|
|
.hero-slogan { width: 100%; gap: 10px; }
|
|
|
.hero-slogan span { -webkit-text-stroke-width: .6px; }
|
|
|
.hero-slogan .slogan-first { width: calc(52% - 4.8px); }
|
|
|
.hero-slogan .slogan-second { margin-left: 0; font-size: clamp(14.4px, 3.96vw, 17.3px); line-height: 1.05; letter-spacing: -.055em; transform: scaleX(.96); transform-origin: left center; }
|
|
|
.hero-actions { top: auto; bottom: 93px; width: max-content; height: auto; }
|
|
|
.hero-organizers { grid-template-columns: 1fr; gap: 5px; margin-top: 22px; padding: 14px 26px 14px 0; clip-path: polygon(0 0,100% 0,94% 100%,0 100%); }
|
|
|
.hero-org-row, .hero-org-row:nth-child(3), .hero-org-row:nth-child(4), .hero-org-row:nth-child(5) { grid-column: auto; grid-template-columns: 49px minmax(0,1fr); gap: 0; font-size: 8.5px; line-height: 1.32; }
|
|
|
.hero-org-row dd { min-width: 0; overflow-wrap: anywhere; }
|
|
|
.hero-org-row dd span { white-space: normal !important; }
|
|
|
.hero-actions { grid-template-columns: repeat(2,56.1px); gap: 25.6px; width: max-content; padding: 0; }
|
|
|
.hero-primary { width: 56.1px; height: 56.1px; padding: 0; border-width: 0; border-radius: 50%; font-size: 8.8px; transform: scale(1.08); }
|
|
|
.hero-primary::before { inset: 3.3px; }
|
|
|
.header-tools { gap: 0; }
|
|
|
.language-switch { min-width: 34px; height: 28px; padding-left: 12px; font-size: 12px; }
|
|
|
.language-switch::before { height: 10px; }
|
|
|
.quick-nav { min-height: 230px; padding: 90px 0 24px; gap: 10px; }
|
|
|
.quick-link { width: 78px; height: 78px; font-size: 11px; box-shadow: inset 0 0 0 7px rgba(69,151,255,.08), 0 0 22px rgba(22,101,255,.18); }
|
|
|
.section { padding: 96px 0; }
|
|
|
.section-title { font-size: 32px; }
|
|
|
.audience { margin: 0; padding: 96px 0; background-image: linear-gradient(180deg, #f8fbfc 0%, #f8fbfc 36%, #fbfdfe 68%, #fff 100%); background-position: 50% 50%; background-size: cover; }
|
|
|
.audience .section-head { gap: 12px; margin-bottom: 22px; }
|
|
|
.audience .section-title, .tracks .section-title, .roadmap .section-title { width: auto; margin-right: 0; padding: 24px 26px 18px 36px; font-size: 32px; text-indent: -25px; }
|
|
|
.audience .section-title::before, .tracks .section-title::before, .roadmap .section-title::before { inset: -18px -26px -28px -26px; }
|
|
|
.tracks .section-title { text-indent: 0; }
|
|
|
.tracks .section-title > span { transform: translateX(25px); }
|
|
|
.audience .section-lead { font-size: 13px; line-height: 1.65; }
|
|
|
.audience-card { grid-template-columns: 1fr; gap: 0; }
|
|
|
.audience-tracks-layout .audience-card { grid-template-columns: 1fr; }
|
|
|
.audience-tracks-layout .audience-focus { min-height: 100px; padding: 12px 28px 20px; border-radius: 20px 20px 0 0; }
|
|
|
.audience-tracks-layout .audience-detail { margin: 0; padding: 26px 18px 22px; border-radius: 0 0 20px 20px; }
|
|
|
.audience-tracks-layout .audience-types { grid-template-columns: 1fr; }
|
|
|
.audience-focus { min-height: 138px; padding: 20px 44px 28px 22px; border-radius: 20px 20px 0 0; }
|
|
|
.audience-stage { margin-top: 18px; }
|
|
|
.audience-stage strong { font-size: clamp(18px,5vw,23px); }
|
|
|
.audience-detail { align-content: normal; gap: 12px; margin: 0; padding: 26px 18px 22px; border-radius: 0 0 20px 20px; }
|
|
|
.audience-detail > p { margin-bottom: 0; font-size: 14px; line-height: 1.6; }
|
|
|
.audience-types { grid-template-columns: 1fr; gap: 7px; }
|
|
|
.audience-type, .audience-type + .audience-type { grid-template-columns: 28px 1fr; min-height: 48px; padding: 9px 20px 9px 14px; border: 0; }
|
|
|
.audience-note { margin-top: 10px; }
|
|
|
.track-grid, .timeline, .award-grid { grid-template-columns: 1fr; }
|
|
|
.tracks { margin: 0; padding: 0 0 96px; }
|
|
|
.roadmap { margin: 0; padding: 72px 0 96px; }
|
|
|
.awards { margin: 0; padding: 52px 0 76px; background: #f5fafe; }
|
|
|
.audience::before, .tracks::before, .roadmap::before { top: -78px; width: 190px; height: 190px; border-radius: 50%; }
|
|
|
.audience::before { top: -96px; left: -104px; width: 190px; height: 190px; min-width: 190px; min-height: 190px; }
|
|
|
.tracks::before {
|
|
|
top: -116px;
|
|
|
right: -94px;
|
|
|
width: 230px;
|
|
|
height: 230px;
|
|
|
}
|
|
|
.tracks .section-head { width: 100%; margin: 0 0 24px; text-align: left; }
|
|
|
.roadmap::before { left: -84px; }
|
|
|
.awards-layout { display: flex; flex-direction: column; min-height: 0; }
|
|
|
.awards .section-head { min-height: 0; margin-bottom: 48px; padding: 0; }
|
|
|
.awards .section-head::before { width: 36px; margin: 0 0 18px; }
|
|
|
.awards .section-head::after { margin: 0; font-size: 9px; }
|
|
|
.awards .section-title { max-width: none; font-size: 32px; }
|
|
|
.awards-summary { max-width: 320px; margin-top: 16px; font-size: 13px; line-height: 1.7; }
|
|
|
.award-grid { grid-template-columns: 1fr; gap: 0; padding: 0 0 0 24px; }
|
|
|
.award-grid::before { display: block; top: 8px; right: auto; bottom: 8px; left: 5px; width: 1px; height: auto; }
|
|
|
.award-card { min-height: 0; padding: 0 0 34px 28px; align-items: flex-start; text-align: left; }
|
|
|
.award-card:last-child { padding-bottom: 0; }
|
|
|
.award-card::before { top: 8px; left: -19px; width: 8px; height: 8px; transform: translateX(-50%); }
|
|
|
.award-card::after { content: none; }
|
|
|
.award-card small { flex-direction: row; align-items: baseline; gap: 10px; font-size: 11px; }
|
|
|
.award-card small span { margin: 0; font-size: 26px; }
|
|
|
.award-card h3 { margin: 12px 0 8px; font-size: 22px; white-space: normal; }
|
|
|
.award-card p { max-width: 330px; font-size: 12.5px; line-height: 1.7; }
|
|
|
.track-card:nth-child(n) { min-height: 174px; padding: 54px 22px 24px; border-radius: 18px; }
|
|
|
.track-card h3 { margin: 0 0 8px; font-size: 21px; }
|
|
|
.track-card h3::before { top: -35px; width: 28px; }
|
|
|
.track-card p { max-width: 92%; font-size: 13px; line-height: 1.7; }
|
|
|
.timeline { gap: 0; padding: 8px 0 0 18px; }
|
|
|
.timeline::before { display: block; top: 32px; right: auto; bottom: 34px; left: 43px; width: 2px; height: auto; }
|
|
|
.step { min-height: 0; padding: 0 0 38px 76px; text-align: left; }
|
|
|
.step + .step::after { content: none; }
|
|
|
.step-mark { top: 0; left: 25px; width: 50px; height: 50px; transform: translateX(-50%); }
|
|
|
.step h3 { min-height: 0; margin: 5px 0 10px; font-size: 21px; }
|
|
|
.step p strong { margin-bottom: 8px; padding-left: 10px; font-size: 14px; }
|
|
|
.site-footer { padding: 18px 0; }
|
|
|
.footer-inner { flex-direction: column; gap: 6px; text-align: center; }
|
|
|
.footer-brand,
|
|
|
.footer-meta { font-size: 11px; }
|
|
|
}
|
|
|
@media (max-width: 960px) {
|
|
|
.audience-tracks-layout .audience { padding: 88px 0 72px; }
|
|
|
.audience-tracks-layout .audience-stage strong { font-size: clamp(36px,6.4vw,52px); }
|
|
|
.audience-tracks-layout .audience-types { grid-template-columns: repeat(3,minmax(0,1fr)); }
|
|
|
.audience-tracks-layout .audience-type { min-height: 126px; padding-right: 24px; }
|
|
|
.audience-tracks-layout .audience-type + .audience-type { padding-left: 24px; }
|
|
|
.audience-tracks-layout .tracks { padding: 70px 0 96px; }
|
|
|
.audience-tracks-layout .track-card,
|
|
|
.audience-tracks-layout .track-card:nth-child(n) { min-height: 154px; padding: 32px 28px 28px 0; border-radius: 0; }
|
|
|
.audience-tracks-layout .track-card:nth-child(even) { padding-left: 30px; }
|
|
|
.audience-tracks-layout .track-card h3::before { top: -12px; }
|
|
|
}
|
|
|
@media (max-width: 640px) {
|
|
|
.audience-tracks-layout .audience { padding: 74px 0 60px; }
|
|
|
.audience .section-title { width: auto; padding: 0; text-indent: 0; font-size: 14px; }
|
|
|
.audience .section-title::before { position: static; width: 24px; height: 2px; background: var(--blue); }
|
|
|
.audience-tracks-layout .audience .section-head { margin-bottom: 24px; }
|
|
|
.audience-tracks-layout .audience-focus { min-height: 0; padding: 0; border-radius: 0; }
|
|
|
.audience-tracks-layout .audience-stage { margin: 0; }
|
|
|
.audience-tracks-layout .audience-stage strong { font-size: clamp(31px,9.4vw,40px); line-height: 1.14; }
|
|
|
.audience-tracks-layout .audience-detail { padding: 0; }
|
|
|
.audience-tracks-layout .audience-detail > p { margin: 24px 0 22px; font-size: 14px; line-height: 1.75; }
|
|
|
.audience-tracks-layout .audience-types { display: block; }
|
|
|
.audience-tracks-layout .audience-type,
|
|
|
.audience-tracks-layout .audience-type + .audience-type { min-height: 84px; flex-direction: row; align-items: center; gap: 18px; padding: 14px 0; border-left: 0; border-top: 1px solid #d7e7ef; }
|
|
|
.audience-tracks-layout .audience-type:first-child { border-top: 0; }
|
|
|
.audience-tracks-layout .audience-type small { width: 58px; font-size: 42px; }
|
|
|
.audience-tracks-layout .audience-type strong { font-size: 18px; }
|
|
|
.audience::before { right: -110px; bottom: -64px; width: 260px; height: 260px; }
|
|
|
.audience-tracks-layout .tracks { padding: 60px 0 80px; }
|
|
|
.tracks .section-title { width: auto; padding: 0; text-indent: 0; font-size: 32px; }
|
|
|
.tracks .section-title > span { transform: none; }
|
|
|
.audience-tracks-layout .tracks .section-head { margin-bottom: 34px; }
|
|
|
.audience-tracks-layout .track-grid { display: block; }
|
|
|
.audience-tracks-layout .track-card,
|
|
|
.audience-tracks-layout .track-card:nth-child(n),
|
|
|
.audience-tracks-layout .track-card:nth-child(even) { min-height: 0; padding: 34px 0 28px; border-left: 0; border-radius: 0; }
|
|
|
.audience-tracks-layout .track-card h3::before { top: -13px; }
|
|
|
}
|
|
|
/* Final below-fold direction: bilateral editorial system, aligned to the
|
|
|
Changzhou Economic Development Zone Cultural Activity Center brand blue. */
|
|
|
:root {
|
|
|
--brand-blue: #109bd3;
|
|
|
--brand-blue-dark: #087db4;
|
|
|
--brand-blue-deep: #061f3d;
|
|
|
--brand-blue-ink: #04172d;
|
|
|
--brand-blue-pale: #eaf7fc;
|
|
|
}
|
|
|
.audience-tracks-layout {
|
|
|
display: grid;
|
|
|
grid-template-columns: 1fr 1fr;
|
|
|
min-height: 640px;
|
|
|
padding: 0;
|
|
|
background: #fff;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.audience-tracks-layout .audience,
|
|
|
.audience-tracks-layout .tracks {
|
|
|
position: relative;
|
|
|
width: auto;
|
|
|
min-width: 0;
|
|
|
margin: 0;
|
|
|
padding: 76px clamp(40px,5vw,84px) 70px;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.audience-tracks-layout .audience { background: #fff; }
|
|
|
.audience-tracks-layout .tracks {
|
|
|
color: #fff;
|
|
|
background: linear-gradient(135deg,var(--brand-blue-ink),var(--brand-blue-deep));
|
|
|
border: 0;
|
|
|
border-radius: 0;
|
|
|
clip-path: none;
|
|
|
}
|
|
|
.audience-tracks-layout .audience::before,
|
|
|
.audience-tracks-layout .tracks::before { content: none; }
|
|
|
.audience-tracks-layout .audience::after,
|
|
|
.audience-tracks-layout .tracks::after {
|
|
|
position: absolute;
|
|
|
top: 30px;
|
|
|
right: 38px;
|
|
|
color: rgba(16,155,211,.08);
|
|
|
font-size: clamp(76px,8vw,128px);
|
|
|
font-weight: 800;
|
|
|
line-height: 1;
|
|
|
letter-spacing: -.08em;
|
|
|
}
|
|
|
.audience-tracks-layout .audience::after { content: none; }
|
|
|
.audience-tracks-layout .tracks::after { content: none; }
|
|
|
.audience-tracks-layout .audience .wrap,
|
|
|
.audience-tracks-layout .tracks .wrap { width: 100%; margin: 0; }
|
|
|
.audience-tracks-layout .section-head { position: relative; z-index: 2; width: 100%; margin: 0 0 38px; text-align: left; }
|
|
|
.audience-tracks-layout .section-title,
|
|
|
.audience-tracks-layout .tracks .section-title {
|
|
|
display: block;
|
|
|
width: auto;
|
|
|
margin: 0;
|
|
|
padding: 22px 0 0;
|
|
|
color: var(--brand-blue-ink);
|
|
|
font-size: clamp(28px,2.4vw,38px);
|
|
|
font-weight: 800;
|
|
|
line-height: 1.2;
|
|
|
letter-spacing: -.04em;
|
|
|
text-indent: 0;
|
|
|
writing-mode: horizontal-tb;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks .section-title { margin-left: 0; color: #fff; }
|
|
|
.audience-tracks-layout .audience .section-title { padding-top: 0; }
|
|
|
.audience-eyebrow {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
margin: 0 0 18px;
|
|
|
padding: 7px 12px;
|
|
|
color: var(--brand-blue-dark);
|
|
|
background: var(--brand-blue-pale);
|
|
|
border: 1px solid rgba(16,155,211,.18);
|
|
|
border-radius: 999px;
|
|
|
font-size: 11px;
|
|
|
font-weight: 800;
|
|
|
line-height: 1;
|
|
|
letter-spacing: .12em;
|
|
|
}
|
|
|
.audience-eyebrow span {
|
|
|
color: rgba(8,125,180,.55);
|
|
|
font-size: 9px;
|
|
|
font-weight: 700;
|
|
|
letter-spacing: .14em;
|
|
|
}
|
|
|
.audience-tracks-layout .section-title::before,
|
|
|
.audience-tracks-layout .tracks .section-title::before {
|
|
|
content: none;
|
|
|
position: absolute;
|
|
|
z-index: 0;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: auto;
|
|
|
height: auto;
|
|
|
color: rgba(8,125,180,.58);
|
|
|
background: none;
|
|
|
font-size: 10px;
|
|
|
font-weight: 700;
|
|
|
letter-spacing: .18em;
|
|
|
transform: none;
|
|
|
writing-mode: horizontal-tb;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks .section-title::before {
|
|
|
content: none;
|
|
|
right: auto;
|
|
|
left: 0;
|
|
|
color: rgba(106,211,246,.6);
|
|
|
}
|
|
|
.audience-tracks-layout .audience .section-title::before { content: none; }
|
|
|
.audience-tracks-layout .tracks .section-title > span { transform: none; }
|
|
|
.audience-tracks-layout .audience-card { display: block; filter: none; }
|
|
|
.audience-tracks-layout .audience-focus { min-height: 0; padding: 0; color: var(--brand-blue-ink); background: none; clip-path: none; }
|
|
|
.audience-tracks-layout .audience-stage strong { max-width: 520px; color: var(--brand-blue-ink); font-size: clamp(30px,2.8vw,44px); line-height: 1.2; white-space: normal; }
|
|
|
.audience-tracks-layout .audience-stage strong::before { content: none; }
|
|
|
.audience-tracks-layout .audience-detail { margin: 0; padding: 0; background: none; box-shadow: none; backdrop-filter: none; }
|
|
|
.audience-tracks-layout .audience-detail > p { max-width: 540px; margin: 22px 0 34px; color: #567387; font-size: 15px; line-height: 1.8; }
|
|
|
.audience-tracks-layout .audience-types { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); max-width: 560px; border-top: 1px solid #dceaf1; border-bottom: 1px solid #dceaf1; }
|
|
|
.audience-tracks-layout .audience-type,
|
|
|
.audience-tracks-layout .audience-type + .audience-type {
|
|
|
display: flex;
|
|
|
min-height: 104px;
|
|
|
flex-direction: column;
|
|
|
align-items: flex-start;
|
|
|
justify-content: center;
|
|
|
gap: 8px;
|
|
|
padding: 18px 18px 18px 0;
|
|
|
background: none;
|
|
|
border: 0;
|
|
|
border-bottom: 0;
|
|
|
border-radius: 0;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type + .audience-type { padding-left: 22px; border-left: 1px solid #dceaf1; }
|
|
|
.audience-tracks-layout .audience-type small { width: auto; color: var(--brand-blue); font-family: inherit; font-size: 12px; font-weight: 800; }
|
|
|
.audience-tracks-layout .audience-type strong { font-size: 18px; white-space: nowrap; }
|
|
|
.audience-tracks-layout .track-grid { display: block; margin-top: 0; padding-right: 0; border-top: 1px solid rgba(118,205,238,.18); }
|
|
|
.audience-tracks-layout .track-card,
|
|
|
.audience-tracks-layout .track-card:nth-child(n) {
|
|
|
min-height: 0;
|
|
|
padding: 19px 0;
|
|
|
color: #fff;
|
|
|
background: transparent;
|
|
|
border: 0;
|
|
|
border-bottom: 1px solid rgba(118,205,238,.18);
|
|
|
border-radius: 0;
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
.audience-tracks-layout .track-card::before {
|
|
|
position: absolute;
|
|
|
top: 20px;
|
|
|
left: 0;
|
|
|
color: #40c3f0;
|
|
|
font-size: 16px;
|
|
|
font-weight: 700;
|
|
|
line-height: 1;
|
|
|
}
|
|
|
.audience-tracks-layout .track-card:nth-child(1)::before { content: "01"; }
|
|
|
.audience-tracks-layout .track-card:nth-child(2)::before { content: "02"; }
|
|
|
.audience-tracks-layout .track-card:nth-child(3)::before { content: "03"; }
|
|
|
.audience-tracks-layout .track-card:nth-child(4)::before { content: "04"; }
|
|
|
.audience-tracks-layout .track-card h3 { margin: 0 0 7px; padding-left: 48px; color: #fff; font-size: 20px; }
|
|
|
.audience-tracks-layout .track-card h3::before { content: none; }
|
|
|
.audience-tracks-layout .track-card p { max-width: 560px; margin: 0; padding-left: 48px; color: rgba(228,244,251,.66); font-size: 13px; line-height: 1.7; }
|
|
|
.audience-tracks-layout .track-card:hover { background: rgba(16,155,211,.08); transform: translateX(6px); }
|
|
|
|
|
|
.roadmap { padding: 108px 0 100px; background: #fff; }
|
|
|
.roadmap::before, .roadmap::after { content: none; }
|
|
|
.roadmap .section-head { position: relative; margin-bottom: 50px; padding-left: 94px; }
|
|
|
.roadmap .section-head::before { content: "03"; position: absolute; top: -26px; right: 0; color: rgba(16,155,211,.08); font-size: 112px; font-weight: 800; line-height: 1; }
|
|
|
.roadmap .section-title { max-width: 90px; color: var(--brand-blue-ink); font-size: clamp(30px,3.2vw,48px); line-height: 1.08; letter-spacing: -.06em; writing-mode: vertical-rl; }
|
|
|
.timeline { padding: 0 0 36px 94px; }
|
|
|
.timeline::before { top: 26px; left: 150px; right: 10%; height: 1px; background: var(--brand-blue); }
|
|
|
.step { padding: 72px 22px 0 0; }
|
|
|
.step-mark { top: 8px; left: 0; width: 38px; height: 38px; border: 1px solid rgba(16,155,211,.5); color: var(--brand-blue); background: #fff !important; box-shadow: none !important; }
|
|
|
.step h3 { min-height: 56px; font-size: 20px; }
|
|
|
.step + .step::after { content: none; }
|
|
|
|
|
|
.awards { padding: 0; background: linear-gradient(135deg,var(--brand-blue-ink),var(--brand-blue-deep)); }
|
|
|
.awards .wrap { width: 100%; }
|
|
|
.awards-layout { display: grid; grid-template-columns: minmax(180px,22%) 1fr; min-height: 560px; }
|
|
|
.awards .section-head { order: 0; align-items: flex-start; justify-content: center; margin: 0; padding: 64px clamp(32px,5vw,74px); border-right: 1px solid rgba(118,205,238,.2); text-align: left; }
|
|
|
.awards .section-head { grid-column: 1; grid-row: 1; }
|
|
|
.awards .section-head::before { content: "06"; width: auto; height: auto; margin: 0 0 34px; color: rgba(255,255,255,.08); background: none; font-size: 92px; font-weight: 800; }
|
|
|
.awards .section-title { color: #fff; font-size: clamp(30px,3vw,46px); writing-mode: vertical-rl; }
|
|
|
.awards-summary { color: rgba(227,244,251,.65); }
|
|
|
.award-grid { grid-column: 2; grid-row: 1; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: center; padding: 70px clamp(32px,6vw,92px); }
|
|
|
.award-grid::before { content: none; }
|
|
|
.award-card { min-height: 190px; align-items: flex-start; padding: 34px 36px; border-bottom: 1px solid rgba(118,205,238,.18); text-align: left; }
|
|
|
.award-card:nth-child(odd) { border-right: 1px solid rgba(118,205,238,.18); }
|
|
|
.award-card::before { content: none; }
|
|
|
.award-card small { align-items: flex-start; color: #49c4ee; }
|
|
|
.award-card small span { display: inline; margin: 0 10px 0 0; color: rgba(73,196,238,.48); font-size: 13px; }
|
|
|
.award-card h3 { order: 2; margin: 20px 0 12px; color: #fff; font-size: 24px; white-space: normal; }
|
|
|
.award-card p { order: 3; max-width: 440px; color: rgba(227,244,251,.62); }
|
|
|
.award-card:hover h3 { color: #5fd1f5; }
|
|
|
.site-footer { background: var(--brand-blue); }
|
|
|
|
|
|
@media (max-width: 760px) {
|
|
|
.audience-tracks-layout { display: block; }
|
|
|
.audience-tracks-layout .audience,
|
|
|
.audience-tracks-layout .tracks { padding: 72px 24px; }
|
|
|
.audience-tracks-layout .tracks {
|
|
|
border-radius: 0;
|
|
|
clip-path: none;
|
|
|
}
|
|
|
.audience-tracks-layout .section-title,
|
|
|
.audience-tracks-layout .tracks .section-title { margin: 0; writing-mode: horizontal-tb; padding-left: 0; }
|
|
|
.audience-tracks-layout .section-title::before,
|
|
|
.audience-tracks-layout .tracks .section-title::before { display: none; }
|
|
|
.audience-tracks-layout .track-grid { margin: 0; padding: 0; }
|
|
|
.roadmap { padding: 76px 0; }
|
|
|
.roadmap .section-head { padding-left: 0; }
|
|
|
.roadmap .section-title { max-width: none; writing-mode: horizontal-tb; }
|
|
|
.timeline { display: block; padding: 14px 0 0; }
|
|
|
.timeline::before { top: 18px; right: auto; bottom: 12px; left: 18px; width: 1px; height: auto; }
|
|
|
.step { padding: 0 0 52px 66px; }
|
|
|
.step-mark { top: 0; }
|
|
|
.awards-layout { display: block; }
|
|
|
.awards .section-head { min-height: 280px; border-right: 0; border-bottom: 1px solid rgba(118,205,238,.2); }
|
|
|
.awards .section-title { writing-mode: horizontal-tb; }
|
|
|
.award-grid { display: block; padding: 32px 24px 64px; }
|
|
|
.award-card, .award-card:nth-child(odd) { min-height: 0; padding: 30px 0; border-right: 0; }
|
|
|
}
|
|
|
/* Audience art direction: a restrained photonics-inspired eligibility panel. */
|
|
|
.audience-tracks-layout .audience {
|
|
|
isolation: isolate;
|
|
|
background:
|
|
|
radial-gradient(circle at 88% 17%, rgba(126,225,255,.28) 0 2px, transparent 3px),
|
|
|
radial-gradient(circle at 76% 74%, rgba(41,185,235,.2) 0 2px, transparent 3px),
|
|
|
radial-gradient(ellipse 70% 52% at 8% 102%, rgba(19,166,225,.16), transparent 72%),
|
|
|
radial-gradient(ellipse 54% 46% at 104% 80%, rgba(132,91,230,.11), transparent 70%),
|
|
|
linear-gradient(145deg, #eef9ff 0%, #fbfdff 46%, #f1f8ff 100%);
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.audience-tracks-layout .audience::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
z-index: -1;
|
|
|
top: -168px;
|
|
|
right: -142px;
|
|
|
display: block;
|
|
|
width: 470px;
|
|
|
height: 470px;
|
|
|
border: 1px solid rgba(31,176,228,.18);
|
|
|
border-radius: 50%;
|
|
|
background: radial-gradient(circle, rgba(105,218,251,.14), rgba(255,255,255,0) 65%);
|
|
|
box-shadow: 0 0 0 52px rgba(25,173,225,.045), 0 0 0 106px rgba(86,139,229,.027);
|
|
|
}
|
|
|
.audience-tracks-layout .audience::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
z-index: -1;
|
|
|
right: -8%;
|
|
|
bottom: -16%;
|
|
|
width: 72%;
|
|
|
height: 68%;
|
|
|
background:
|
|
|
radial-gradient(circle at 100% 100%, rgba(83,221,255,.38) 0 2px, transparent 3px),
|
|
|
repeating-conic-gradient(from 198deg at 100% 100%, transparent 0deg 1.5deg, rgba(29,139,224,.27) 1.7deg 1.9deg, transparent 2.1deg 3.4deg, rgba(123,83,220,.18) 3.6deg 3.8deg, transparent 4deg 5.4deg),
|
|
|
radial-gradient(ellipse at 100% 100%, rgba(40,184,235,.2), rgba(72,93,211,.08) 38%, transparent 68%);
|
|
|
-webkit-mask-image: radial-gradient(ellipse at 100% 100%, #000 0 34%, rgba(0,0,0,.92) 48%, transparent 76%);
|
|
|
mask-image: radial-gradient(ellipse at 100% 100%, #000 0 34%, rgba(0,0,0,.92) 48%, transparent 76%);
|
|
|
filter: drop-shadow(0 0 10px rgba(39,164,227,.24));
|
|
|
opacity: .72;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
.audience-tracks-layout .audience .section-head { margin-bottom: 32px; }
|
|
|
.audience-tracks-layout .audience .section-title {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 12px;
|
|
|
color: #087db4;
|
|
|
font-size: 13px;
|
|
|
font-weight: 800;
|
|
|
letter-spacing: .14em;
|
|
|
}
|
|
|
.audience-tracks-layout .audience .section-title::before {
|
|
|
content: "";
|
|
|
display: block;
|
|
|
width: 34px;
|
|
|
height: 2px;
|
|
|
background: linear-gradient(90deg,#109bd3,#63d8f2);
|
|
|
}
|
|
|
.audience-tracks-layout .audience .section-title::after {
|
|
|
content: none;
|
|
|
color: #8aa6b8;
|
|
|
font-size: 9px;
|
|
|
font-weight: 700;
|
|
|
letter-spacing: .18em;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-stage { position: relative; padding-left: 24px; }
|
|
|
.audience-tracks-layout .audience-stage::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
top: 7px;
|
|
|
bottom: 6px;
|
|
|
left: 0;
|
|
|
width: 5px;
|
|
|
border-radius: 99px;
|
|
|
background: linear-gradient(180deg,#20c4ed 0%,#087db4 100%);
|
|
|
box-shadow: 0 0 18px rgba(32,196,237,.28);
|
|
|
}
|
|
|
.audience-tracks-layout .audience-stage strong { max-width: 610px; }
|
|
|
.audience-tracks-layout .audience-stage .stage-main {
|
|
|
display: block;
|
|
|
color: transparent;
|
|
|
background: linear-gradient(105deg,#04172d 8%,#075b8a 56%,#12a9df 100%);
|
|
|
background-clip: text;
|
|
|
-webkit-background-clip: text;
|
|
|
font-size: clamp(36px,3.25vw,54px);
|
|
|
}
|
|
|
.audience-tracks-layout .audience-stage .stage-sub {
|
|
|
display: block;
|
|
|
margin-top: 8px;
|
|
|
color: #173b55;
|
|
|
font-size: clamp(20px,1.6vw,26px);
|
|
|
font-weight: 650;
|
|
|
letter-spacing: .12em;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-detail > p {
|
|
|
position: relative;
|
|
|
max-width: 590px;
|
|
|
margin: 26px 0 34px 24px;
|
|
|
padding-right: 28px;
|
|
|
color: #587587;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-types {
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
max-width: 610px;
|
|
|
gap: 12px;
|
|
|
border: 0;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type,
|
|
|
.audience-tracks-layout .audience-type + .audience-type {
|
|
|
position: relative;
|
|
|
min-height: 116px;
|
|
|
padding: 24px 20px;
|
|
|
overflow: hidden;
|
|
|
background: rgba(255,255,255,.74);
|
|
|
border: 1px solid rgba(159,207,226,.58);
|
|
|
border-radius: 14px;
|
|
|
box-shadow: 0 12px 34px rgba(27,104,138,.07);
|
|
|
backdrop-filter: blur(8px);
|
|
|
transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
right: 0;
|
|
|
left: 0;
|
|
|
height: 3px;
|
|
|
background: linear-gradient(90deg,#109bd3,rgba(95,216,243,.18));
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
right: -22px;
|
|
|
bottom: -28px;
|
|
|
width: 72px;
|
|
|
height: 72px;
|
|
|
border: 1px solid rgba(16,155,211,.14);
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type small {
|
|
|
position: relative;
|
|
|
display: block;
|
|
|
width: 34px;
|
|
|
height: 18px;
|
|
|
color: #109bd3;
|
|
|
font-size: 0;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type small::before,
|
|
|
.audience-tracks-layout .audience-type small::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type:nth-child(1) small::before {
|
|
|
top: 6px;
|
|
|
left: 1px;
|
|
|
width: 32px;
|
|
|
height: 2px;
|
|
|
border-radius: 99px;
|
|
|
background: linear-gradient(90deg,#10a9df 0 36%,rgba(16,169,223,.22) 36% 100%);
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type:nth-child(1) small::after {
|
|
|
top: 2px;
|
|
|
left: 10px;
|
|
|
width: 10px;
|
|
|
height: 10px;
|
|
|
border: 2px solid #31c6e9;
|
|
|
border-radius: 50%;
|
|
|
background: #fff;
|
|
|
box-shadow: 0 0 0 4px rgba(49,198,233,.12);
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type:nth-child(2) small::before {
|
|
|
top: 2px;
|
|
|
left: 8px;
|
|
|
width: 14px;
|
|
|
height: 14px;
|
|
|
border: 2px solid #16a9dc;
|
|
|
border-radius: 3px;
|
|
|
box-shadow: inset 0 0 0 3px rgba(73,207,237,.18);
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type:nth-child(2) small::after {
|
|
|
top: 0;
|
|
|
left: 4px;
|
|
|
width: 22px;
|
|
|
height: 18px;
|
|
|
background: repeating-linear-gradient(90deg,transparent 0 4px,#74d8ee 4px 6px,transparent 6px 8px);
|
|
|
clip-path: polygon(0 0,100% 0,100% 2px,0 2px,0 16px,100% 16px,100% 18px,0 18px);
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type:nth-child(3) small::before {
|
|
|
top: 1px;
|
|
|
left: 3px;
|
|
|
width: 24px;
|
|
|
height: 16px;
|
|
|
border: 1.5px solid rgba(16,169,223,.7);
|
|
|
border-radius: 50%;
|
|
|
transform: rotate(-12deg);
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type:nth-child(3) small::after {
|
|
|
top: 6px;
|
|
|
left: 13px;
|
|
|
width: 6px;
|
|
|
height: 6px;
|
|
|
border-radius: 50%;
|
|
|
background: #16a9dc;
|
|
|
box-shadow: 12px -4px 0 -1px #74d8ee;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type strong { color: #102e43; font-size: 18px; }
|
|
|
.audience-tracks-layout .audience-type:hover {
|
|
|
border-color: rgba(16,155,211,.56);
|
|
|
box-shadow: 0 18px 38px rgba(27,104,138,.13);
|
|
|
transform: translateY(-5px);
|
|
|
}
|
|
|
@media (max-width: 1100px) and (min-width: 761px) {
|
|
|
.audience-tracks-layout .audience,
|
|
|
.audience-tracks-layout .tracks { padding-right: 38px; padding-left: 38px; }
|
|
|
.audience-tracks-layout .audience-types { gap: 8px; }
|
|
|
.audience-tracks-layout .audience-type,
|
|
|
.audience-tracks-layout .audience-type + .audience-type { padding: 20px 14px; }
|
|
|
.audience-tracks-layout .audience-type strong { font-size: 16px; }
|
|
|
}
|
|
|
@media (max-width: 760px) {
|
|
|
.audience-tracks-layout .tracks { border-radius: 0; }
|
|
|
.audience-tracks-layout .audience::before { top: -90px; right: -155px; width: 330px; height: 330px; }
|
|
|
.audience-tracks-layout .audience::after { right: 14px; bottom: -12px; font-size: 132px; }
|
|
|
.audience-tracks-layout .audience .section-title { gap: 8px; font-size: 12px; }
|
|
|
.audience-tracks-layout .audience .section-title::after { font-size: 7px; }
|
|
|
.audience-tracks-layout .audience-stage { padding-left: 18px; }
|
|
|
.audience-tracks-layout .audience-stage .stage-main { font-size: clamp(31px,9vw,40px); }
|
|
|
.audience-tracks-layout .audience-stage .stage-sub { margin-top: 6px; font-size: 18px; }
|
|
|
.audience-tracks-layout .audience-detail > p { margin: 22px 0 24px 18px; padding-right: 0; }
|
|
|
.audience-tracks-layout .audience-types { display: grid; grid-template-columns: 1fr; gap: 10px; }
|
|
|
.audience-tracks-layout .audience-type,
|
|
|
.audience-tracks-layout .audience-type + .audience-type {
|
|
|
min-height: 74px;
|
|
|
flex-direction: row;
|
|
|
gap: 16px;
|
|
|
padding: 16px 18px;
|
|
|
border: 1px solid rgba(159,207,226,.58);
|
|
|
border-radius: 12px;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type small { width: 34px; flex: 0 0 34px; }
|
|
|
}
|
|
|
/* Refined participant heading: typography replaces the earlier line marks. */
|
|
|
.audience-tracks-layout .audience .section-title.audience-eyebrow {
|
|
|
display: inline-flex;
|
|
|
width: auto;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
margin: 0;
|
|
|
padding: 8px 13px;
|
|
|
color: var(--brand-blue-dark);
|
|
|
background: var(--brand-blue-pale);
|
|
|
border: 1px solid rgba(16,155,211,.18);
|
|
|
border-radius: 999px;
|
|
|
font-size: 11px;
|
|
|
font-weight: 800;
|
|
|
line-height: 1;
|
|
|
letter-spacing: .12em;
|
|
|
}
|
|
|
.audience-tracks-layout .audience .section-title.audience-eyebrow::before { content: none; }
|
|
|
.audience-tracks-layout .audience .section-title.audience-eyebrow span {
|
|
|
color: rgba(8,125,180,.55);
|
|
|
font-size: 9px;
|
|
|
font-weight: 700;
|
|
|
letter-spacing: .14em;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-stage { padding-left: 0; }
|
|
|
.audience-tracks-layout .audience-stage::before { content: none; }
|
|
|
.audience-tracks-layout .audience-detail > p { margin-left: 0; }
|
|
|
|
|
|
/* Selected direction: editorial precision — reference exec-e383c862. */
|
|
|
.audience-tracks-layout {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(2,minmax(0,1fr));
|
|
|
height: auto;
|
|
|
min-height: 0;
|
|
|
}
|
|
|
.audience-tracks-layout .audience {
|
|
|
position: relative;
|
|
|
z-index: 3;
|
|
|
width: auto;
|
|
|
min-height: 0;
|
|
|
padding: 0;
|
|
|
color: #090b0f;
|
|
|
background: #fdfcf9;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks {
|
|
|
width: auto;
|
|
|
min-width: 0;
|
|
|
min-height: 0;
|
|
|
padding-top: 48px;
|
|
|
padding-bottom: 40px;
|
|
|
}
|
|
|
.audience-tracks-layout .audience::before,
|
|
|
.audience-tracks-layout .audience::after { content: none; }
|
|
|
.audience-tracks-layout .audience .wrap {
|
|
|
position: relative;
|
|
|
display: grid;
|
|
|
grid-template-columns: 64px minmax(0,1fr);
|
|
|
width: min(100%,1440px);
|
|
|
min-height: 0;
|
|
|
margin: 0 auto;
|
|
|
padding: 0 36px 0 0;
|
|
|
}
|
|
|
.audience-index {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
min-height: 100%;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
padding-top: 56px;
|
|
|
color: #075dbb;
|
|
|
border-right: 1px solid rgba(8,74,145,.42);
|
|
|
}
|
|
|
.audience-index::before,
|
|
|
.audience-index::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
width: 22px;
|
|
|
height: 2px;
|
|
|
background: #075dbb;
|
|
|
transform: translateX(-50%);
|
|
|
}
|
|
|
.audience-index::before { top: 0; bottom: auto; width: 1px; height: 356px; }
|
|
|
.audience-index::after { bottom: 58px; }
|
|
|
.audience-index strong,
|
|
|
.audience-index span {
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
writing-mode: vertical-rl;
|
|
|
text-orientation: mixed;
|
|
|
background: transparent;
|
|
|
box-shadow: none;
|
|
|
font-weight: 780;
|
|
|
letter-spacing: .16em;
|
|
|
}
|
|
|
.audience-index strong { font-size: 15px; line-height: 1.25; }
|
|
|
.audience-index span { margin-top: 22px; font-size: 12px; font-weight: 650; letter-spacing: .08em; }
|
|
|
.audience-content { min-width: 0; padding: 112px 0 58px 48px; }
|
|
|
.audience-tracks-layout .tracks .section-head { margin-bottom: 24px; }
|
|
|
.audience-tracks-layout .tracks .track-card,
|
|
|
.audience-tracks-layout .tracks .track-card:nth-child(n) { padding-top: 11px; padding-bottom: 11px; }
|
|
|
.audience-tracks-layout .tracks .track-card::before { top: 12px; }
|
|
|
.audience-tracks-layout .audience .section-head { margin: 0 0 28px; }
|
|
|
.audience-tracks-layout .audience .section-title.audience-eyebrow {
|
|
|
display: block;
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
color: #075dbb;
|
|
|
background: transparent;
|
|
|
border: 0;
|
|
|
border-radius: 0;
|
|
|
font-size: 20px;
|
|
|
font-weight: 760;
|
|
|
line-height: 1.2;
|
|
|
letter-spacing: .08em;
|
|
|
}
|
|
|
.audience-tracks-layout .audience .section-title.audience-eyebrow span { display: none; }
|
|
|
.audience-tracks-layout .audience-card { display: block; filter: none; }
|
|
|
.audience-tracks-layout .audience-focus,
|
|
|
.audience-tracks-layout .audience-detail {
|
|
|
display: block;
|
|
|
min-height: 0;
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
color: inherit;
|
|
|
background: transparent;
|
|
|
border: 0;
|
|
|
border-radius: 0;
|
|
|
box-shadow: none;
|
|
|
backdrop-filter: none;
|
|
|
clip-path: none;
|
|
|
text-align: left;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-stage { margin: 0; padding: 0; }
|
|
|
.audience-tracks-layout .audience-stage strong { max-width: none; color: inherit; font-family: "Songti SC","STSong","Noto Serif CJK SC",serif; }
|
|
|
.audience-tracks-layout .audience-stage .stage-main,
|
|
|
.audience-tracks-layout .audience-stage .stage-sub {
|
|
|
display: block;
|
|
|
color: #06080b;
|
|
|
background: none;
|
|
|
-webkit-text-fill-color: currentColor;
|
|
|
font-weight: 650;
|
|
|
letter-spacing: -.055em;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-stage .stage-main {
|
|
|
font-size: clamp(42px,3.8vw,58px);
|
|
|
line-height: 1.08;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-stage .stage-sub { margin-top: 10px; font-size: clamp(28px,2.45vw,36px); line-height: 1.14; }
|
|
|
.audience-tracks-layout .audience-detail > p {
|
|
|
max-width: 520px;
|
|
|
margin: 34px 0 0;
|
|
|
padding: 27px 0 0;
|
|
|
color: #24272c;
|
|
|
font-family: "Songti SC","STSong","Noto Serif CJK SC",serif;
|
|
|
font-size: 16px;
|
|
|
font-weight: 400;
|
|
|
line-height: 1.9;
|
|
|
letter-spacing: .015em;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-detail > p::before {
|
|
|
content: none;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 58px;
|
|
|
height: 3px;
|
|
|
background: #075dbb;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-types {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(3,minmax(0,1fr));
|
|
|
max-width: none;
|
|
|
margin-top: 46px;
|
|
|
gap: 0;
|
|
|
border: 0;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type,
|
|
|
.audience-tracks-layout .audience-type + .audience-type {
|
|
|
display: flex;
|
|
|
min-height: 96px;
|
|
|
flex-direction: column;
|
|
|
align-items: flex-start;
|
|
|
justify-content: center;
|
|
|
gap: 0;
|
|
|
padding: 10px 22px 8px 0;
|
|
|
color: #06080b;
|
|
|
background: transparent;
|
|
|
border: 0;
|
|
|
border-radius: 0;
|
|
|
box-shadow: none;
|
|
|
transform: none;
|
|
|
overflow: visible;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type + .audience-type { padding-left: 24px; border-left: 1px solid rgba(20,25,32,.38); }
|
|
|
.audience-tracks-layout .audience-type::before,
|
|
|
.audience-tracks-layout .audience-type::after { content: none; }
|
|
|
.audience-tracks-layout .audience-type small {
|
|
|
position: absolute;
|
|
|
z-index: 0;
|
|
|
right: -6px;
|
|
|
bottom: -24px;
|
|
|
display: block;
|
|
|
width: 124px;
|
|
|
height: 124px;
|
|
|
margin: 0;
|
|
|
color: transparent;
|
|
|
font-size: 0;
|
|
|
pointer-events: none;
|
|
|
transform: none;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type small::before,
|
|
|
.audience-tracks-layout .audience-type small::after { content: none; }
|
|
|
.audience-tracks-layout .audience-type small img {
|
|
|
display: block;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
opacity: .075;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type strong {
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
color: inherit;
|
|
|
font-family: "Songti SC","STSong","Noto Serif CJK SC",serif;
|
|
|
font-size: clamp(19px,1.65vw,24px);
|
|
|
font-weight: 600;
|
|
|
line-height: 1.2;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type:hover { color: #075dbb; background: transparent; border-color: rgba(20,25,32,.38); box-shadow: none; transform: translateY(-3px); }
|
|
|
|
|
|
@media (max-width: 760px) {
|
|
|
.audience-tracks-layout { display: block; height: auto; min-height: 0; }
|
|
|
.audience-tracks-layout .tracks { min-height: 0; padding: 72px 24px; }
|
|
|
.audience-tracks-layout .tracks .track-card,
|
|
|
.audience-tracks-layout .tracks .track-card:nth-child(n) { padding: 34px 0 28px; }
|
|
|
.audience-tracks-layout .tracks .track-card::before { top: 35px; }
|
|
|
.audience-tracks-layout .audience { min-height: 0; padding: 0 20px 70px; }
|
|
|
.audience-tracks-layout .audience .wrap { display: block; min-height: 0; padding: 0; }
|
|
|
.audience-index { min-height: 0; height: 74px; flex-direction: row; align-items: center; gap: 12px; padding: 0; border-right: 0; border-bottom: 1px solid rgba(8,74,145,.32); }
|
|
|
.audience-index::before { top: auto; right: 0; bottom: -1px; left: auto; width: 64px; height: 2px; transform: none; }
|
|
|
.audience-index::after { content: none; }
|
|
|
.audience-index strong,
|
|
|
.audience-index span { writing-mode: horizontal-tb; box-shadow: none; }
|
|
|
.audience-index strong { font-size: 14px; }
|
|
|
.audience-index span { margin: 0; font-size: 11px; }
|
|
|
.audience-content { padding: 52px 4px 0; }
|
|
|
.audience-tracks-layout .audience .section-head { margin-bottom: 26px; }
|
|
|
.audience-tracks-layout .audience .section-title.audience-eyebrow { font-size: 20px; }
|
|
|
.audience-tracks-layout .audience-stage .stage-main { font-size: clamp(38px,11.8vw,50px); line-height: 1.16; }
|
|
|
.audience-tracks-layout .audience-stage .stage-sub { margin-top: 8px; font-size: 28px; }
|
|
|
.audience-tracks-layout .audience-detail > p { margin: 32px 0 0; padding-top: 25px; font-size: 16px; line-height: 1.85; }
|
|
|
.audience-tracks-layout .audience-detail > p::before { width: 52px; height: 2px; }
|
|
|
.audience-tracks-layout .audience-types { grid-template-columns: 1fr; margin-top: 40px; }
|
|
|
.audience-tracks-layout .audience-type,
|
|
|
.audience-tracks-layout .audience-type + .audience-type { min-height: 86px; flex-direction: row; align-items: center; gap: 22px; padding: 20px 0; border: 0; border-bottom: 1px solid rgba(20,25,32,.22); }
|
|
|
.audience-tracks-layout .audience-type small { right: auto; bottom: -30px; left: 52px; width: 132px; height: 132px; }
|
|
|
.audience-tracks-layout .audience-type small img { opacity: .065; }
|
|
|
.audience-tracks-layout .audience-type strong { font-size: 25px; }
|
|
|
}
|
|
|
|
|
|
/* Match the participant index rail on the industry-track panel. */
|
|
|
.audience-tracks-layout .tracks { padding: 0; }
|
|
|
.audience-tracks-layout .tracks .wrap {
|
|
|
display: grid;
|
|
|
grid-template-columns: 64px minmax(0,1fr);
|
|
|
min-height: 100%;
|
|
|
}
|
|
|
.tracks-index {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
min-height: 100%;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
padding-top: 56px;
|
|
|
color: #40c3f0;
|
|
|
border-right: 1px solid rgba(118,205,238,.28);
|
|
|
}
|
|
|
.tracks-index::before,
|
|
|
.tracks-index::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
background: #40c3f0;
|
|
|
transform: translateX(-50%);
|
|
|
}
|
|
|
.tracks-index::before { top: 0; width: 1px; height: 356px; }
|
|
|
.tracks-index::after { bottom: 58px; width: 22px; height: 2px; }
|
|
|
.tracks-index strong,
|
|
|
.tracks-index span {
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
writing-mode: vertical-rl;
|
|
|
text-orientation: mixed;
|
|
|
background: var(--brand-blue-ink);
|
|
|
box-shadow: 0 0 0 5px var(--brand-blue-ink);
|
|
|
font-weight: 780;
|
|
|
letter-spacing: .16em;
|
|
|
}
|
|
|
.tracks-index strong { font-size: 15px; line-height: 1.25; }
|
|
|
.tracks-index span { margin-top: 22px; font-size: 12px; font-weight: 650; letter-spacing: .08em; }
|
|
|
.tracks-content { min-width: 0; padding: 76px clamp(40px,5vw,84px) 70px 48px; }
|
|
|
|
|
|
@media (max-width: 760px) {
|
|
|
.audience-tracks-layout .tracks { padding: 0 20px 70px; }
|
|
|
.audience-tracks-layout .tracks .wrap { display: block; min-height: 0; }
|
|
|
.tracks-index { min-height: 0; height: 74px; flex-direction: row; align-items: center; gap: 12px; padding: 0; border-right: 0; border-bottom: 1px solid rgba(118,205,238,.28); }
|
|
|
.tracks-index::before { top: auto; right: 0; bottom: -1px; left: auto; width: 64px; height: 2px; transform: none; }
|
|
|
.tracks-index::after { content: none; }
|
|
|
.tracks-index strong,
|
|
|
.tracks-index span { writing-mode: horizontal-tb; box-shadow: none; }
|
|
|
.tracks-index strong { font-size: 14px; }
|
|
|
.tracks-index span { margin: 0; font-size: 11px; }
|
|
|
.tracks-content { padding: 52px 4px 0; }
|
|
|
}
|
|
|
|
|
|
/* Tracks redesign: one continuous value-chain composition. */
|
|
|
.audience-tracks-layout .tracks { position: relative; isolation: isolate; background: radial-gradient(circle at 82% 14%,rgba(45,196,238,.12),transparent 24%),linear-gradient(145deg,#061d36 0%,#04172d 52%,#071f3a 100%); }
|
|
|
.audience-tracks-layout .tracks::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .28; background-image: linear-gradient(rgba(91,199,235,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(91,199,235,.07) 1px,transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(135deg,transparent 4%,#000 48%,transparent 96%); }
|
|
|
.tracks-content { padding: 68px clamp(34px,4.5vw,72px) 58px 42px; }
|
|
|
.audience-tracks-layout .tracks .section-head.tracks-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 0 38px; }
|
|
|
.tracks-kicker { display: block; margin-bottom: 10px; color: #43cdf4; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
|
|
|
.audience-tracks-layout .tracks .section-title { margin: 0; font-size: clamp(34px,3.25vw,50px); line-height: 1.08; letter-spacing: -.045em; }
|
|
|
.audience-tracks-layout .tracks .section-title::before { display: none; }
|
|
|
.tracks-heading > p { max-width: 210px; margin: 0 0 3px; color: rgba(214,238,248,.58); font-size: 12px; line-height: 1.7; text-align: right; }
|
|
|
.audience-tracks-layout .track-grid { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 0; border: 0; }
|
|
|
.audience-tracks-layout .track-grid::before { content: ""; position: absolute; z-index: -1; top: 50%; right: 18%; left: 18%; height: 1px; background: linear-gradient(90deg,transparent,#35c6ef 18%,#35c6ef 82%,transparent); box-shadow: 0 0 14px rgba(53,198,239,.55); }
|
|
|
.audience-tracks-layout .track-card,
|
|
|
.audience-tracks-layout .track-card:nth-child(n) { position: relative; min-height: 168px; padding: 58px 24px 24px; background: linear-gradient(145deg,rgba(16,64,99,.76),rgba(5,32,57,.82)); border: 1px solid rgba(113,211,242,.18); border-radius: 3px; box-shadow: inset 0 1px rgba(255,255,255,.025),0 16px 38px rgba(0,8,20,.16); overflow: hidden; }
|
|
|
.audience-tracks-layout .track-card::after { content: ""; position: absolute; top: 0; right: 0; width: 54px; height: 54px; border-top: 1px solid rgba(67,205,244,.65); border-right: 1px solid rgba(67,205,244,.65); clip-path: polygon(38% 0,100% 0,100% 62%); opacity: .65; }
|
|
|
.audience-tracks-layout .track-card::before { top: 22px; left: 24px; color: #43cdf4; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
|
|
|
.audience-tracks-layout .track-card h3 { margin: 0 0 9px; padding: 0; color: #fff; font-size: 21px; line-height: 1.3; }
|
|
|
.audience-tracks-layout .track-card p { max-width: none; margin: 0; padding: 0; color: rgba(221,241,249,.68); font-size: 12px; line-height: 1.72; }
|
|
|
.audience-tracks-layout .track-card:hover { background: linear-gradient(145deg,rgba(18,84,124,.9),rgba(5,38,66,.94)); border-color: rgba(67,205,244,.5); box-shadow: 0 18px 42px rgba(0,8,20,.24),inset 0 0 28px rgba(44,188,232,.05); transform: translateY(-4px); }
|
|
|
@media (max-width: 1100px) and (min-width: 761px) {
|
|
|
.tracks-content { padding-right: 28px; padding-left: 28px; }
|
|
|
.audience-tracks-layout .tracks .section-head.tracks-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
|
|
|
.tracks-heading > p { max-width: 320px; text-align: left; }
|
|
|
.audience-tracks-layout .track-card,
|
|
|
.audience-tracks-layout .track-card:nth-child(n) { min-height: 174px; padding-right: 18px; padding-left: 18px; }
|
|
|
.audience-tracks-layout .track-card::before { left: 18px; }
|
|
|
}
|
|
|
@media (max-width: 760px) {
|
|
|
.audience-tracks-layout .tracks::before { background-size: 34px 34px; }
|
|
|
.tracks-content { padding: 50px 4px 0; }
|
|
|
.audience-tracks-layout .tracks .section-head.tracks-heading { display: block; margin-bottom: 32px; }
|
|
|
.tracks-heading > p { max-width: 280px; margin-top: 14px; text-align: left; }
|
|
|
.audience-tracks-layout .track-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
|
|
|
.audience-tracks-layout .track-grid::before { top: 12%; right: auto; bottom: 12%; left: 20px; width: 1px; height: auto; }
|
|
|
.audience-tracks-layout .tracks .track-card,
|
|
|
.audience-tracks-layout .tracks .track-card:nth-child(n),
|
|
|
.audience-tracks-layout .tracks .track-card:nth-child(even) { min-height: 0; padding: 52px 22px 22px 58px; border: 1px solid rgba(113,211,242,.18); }
|
|
|
.audience-tracks-layout .tracks .track-card::before { top: 21px; left: 58px; }
|
|
|
.audience-tracks-layout .tracks .track-card h3 { padding-left: 0; font-size: 20px; }
|
|
|
.audience-tracks-layout .tracks .track-card p { padding-left: 0; font-size: 13px; }
|
|
|
}
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
|
|
|
/* 2026-08 disruptive redesign: competition flightpath + project accelerator */
|
|
|
.roadmap {
|
|
|
position: relative;
|
|
|
isolation: isolate;
|
|
|
padding: 132px 0 148px;
|
|
|
color: #071a2d;
|
|
|
background:
|
|
|
radial-gradient(circle at 12% 12%, rgba(76,214,244,.16), transparent 27%),
|
|
|
linear-gradient(180deg,#f5fbfe 0%,#fff 72%);
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.roadmap::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
z-index: -1;
|
|
|
top: -210px;
|
|
|
right: -120px;
|
|
|
width: 520px;
|
|
|
height: 520px;
|
|
|
border: 1px solid rgba(0,148,220,.1);
|
|
|
border-radius: 50%;
|
|
|
box-shadow: 0 0 0 68px rgba(0,148,220,.025),0 0 0 136px rgba(0,148,220,.018);
|
|
|
}
|
|
|
.roadmap::after { content: none; }
|
|
|
.roadmap .section-head {
|
|
|
display: grid;
|
|
|
grid-template-columns: minmax(0,1.1fr) minmax(300px,.72fr);
|
|
|
gap: 80px;
|
|
|
align-items: end;
|
|
|
margin: 0 0 76px;
|
|
|
padding: 0;
|
|
|
}
|
|
|
.roadmap .section-head::before { content: none; }
|
|
|
.roadmap .section-title {
|
|
|
max-width: 720px;
|
|
|
color: #061a2d;
|
|
|
font-size: clamp(50px,6.1vw,88px);
|
|
|
font-weight: 820;
|
|
|
line-height: .96;
|
|
|
letter-spacing: -.075em;
|
|
|
writing-mode: horizontal-tb;
|
|
|
}
|
|
|
.roadmap-intro { margin: 0 0 6px; color: #587386; font-size: 15px; line-height: 1.9; }
|
|
|
.roadmap-intro strong { display: block; margin-bottom: 12px; color: #099bd3; font-size: 11px; letter-spacing: .2em; }
|
|
|
.timeline {
|
|
|
position: relative;
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(4,minmax(0,1fr));
|
|
|
gap: 12px;
|
|
|
padding: 32px 0 0;
|
|
|
}
|
|
|
.timeline::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
right: 0;
|
|
|
left: 0;
|
|
|
width: auto;
|
|
|
height: 2px;
|
|
|
background: linear-gradient(90deg,#73e5f8 0%,#16b7e8 38%,#008fd2 70%,#063f76 100%);
|
|
|
box-shadow: 0 0 22px rgba(16,174,225,.36);
|
|
|
}
|
|
|
.timeline::after {
|
|
|
content: "FINALS / SUZHOU";
|
|
|
position: absolute;
|
|
|
top: -32px;
|
|
|
right: 0;
|
|
|
color: #0b80b5;
|
|
|
font-size: 9px;
|
|
|
font-weight: 800;
|
|
|
letter-spacing: .2em;
|
|
|
}
|
|
|
.step {
|
|
|
position: relative;
|
|
|
min-height: 310px;
|
|
|
padding: 30px 26px 26px;
|
|
|
border: 1px solid rgba(155,205,226,.52);
|
|
|
border-radius: 2px 2px 22px 2px;
|
|
|
background: rgba(255,255,255,.68);
|
|
|
box-shadow: 0 18px 50px rgba(28,101,135,.06);
|
|
|
backdrop-filter: blur(10px);
|
|
|
transition: transform .3s var(--ease),border-color .3s,box-shadow .3s;
|
|
|
}
|
|
|
.step::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
top: -38px;
|
|
|
left: 25px;
|
|
|
width: 12px;
|
|
|
height: 12px;
|
|
|
border: 4px solid #f5fbfe;
|
|
|
border-radius: 50%;
|
|
|
background: #18b6e7;
|
|
|
box-shadow: 0 0 0 1px #18b6e7,0 0 22px rgba(24,182,231,.56);
|
|
|
}
|
|
|
.step:nth-child(2)::before { background: #0da7dc; box-shadow: 0 0 0 1px #0da7dc,0 0 22px rgba(13,167,220,.52); }
|
|
|
.step:nth-child(3)::before { background: #008fd2; box-shadow: 0 0 0 1px #008fd2,0 0 22px rgba(0,143,210,.48); }
|
|
|
.step:nth-child(4)::before { background: #063f76; box-shadow: 0 0 0 1px #063f76,0 0 22px rgba(6,63,118,.4); }
|
|
|
.step + .step::after { content: none; }
|
|
|
.step:hover { z-index: 2; border-color: rgba(0,148,220,.58); box-shadow: 0 24px 60px rgba(15,105,145,.13); transform: translateY(-10px); }
|
|
|
.step-mark {
|
|
|
position: static;
|
|
|
display: block;
|
|
|
width: auto;
|
|
|
height: auto;
|
|
|
margin: 0 0 58px;
|
|
|
border: 0;
|
|
|
border-radius: 0;
|
|
|
color: rgba(6,63,118,.25);
|
|
|
background: transparent !important;
|
|
|
box-shadow: none !important;
|
|
|
font-size: 48px;
|
|
|
font-weight: 300;
|
|
|
line-height: 1;
|
|
|
letter-spacing: -.06em;
|
|
|
}
|
|
|
.step h3 { min-height: 0; margin: 0 0 18px; color: #071a2d; font-size: 21px; line-height: 1.42; }
|
|
|
.step p { margin: 0; color: #60798b; font-size: 13px; line-height: 1.8; }
|
|
|
.step p strong { display: block; margin: 0 0 6px; padding: 0; color: #078fc8 !important; font-size: 14px; letter-spacing: 0; }
|
|
|
.step p strong::before { content: none; }
|
|
|
.step-place { display: inline-block; margin-top: 20px; color: #0b4f74; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
|
|
|
|
|
|
.awards {
|
|
|
position: relative;
|
|
|
isolation: isolate;
|
|
|
padding: 0;
|
|
|
color: #fff;
|
|
|
background:
|
|
|
radial-gradient(circle at 48% 48%,rgba(24,183,232,.24),transparent 24%),
|
|
|
radial-gradient(circle at 92% 8%,rgba(81,214,242,.16),transparent 28%),
|
|
|
linear-gradient(135deg,#041529 0%,#052f50 54%,#063f6a 100%);
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.awards::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 46%;
|
|
|
width: min(48vw,650px);
|
|
|
aspect-ratio: 1;
|
|
|
border: 1px solid rgba(95,213,241,.12);
|
|
|
border-radius: 50%;
|
|
|
box-shadow: 0 0 0 72px rgba(95,213,241,.035),0 0 0 144px rgba(95,213,241,.018);
|
|
|
transform: translate(-50%,-50%);
|
|
|
}
|
|
|
.awards::after { content: "ACCELERATE"; position: absolute; right: -18px; bottom: -20px; color: rgba(255,255,255,.025); font-size: clamp(76px,13vw,200px); font-weight: 850; line-height: .8; letter-spacing: -.08em; }
|
|
|
.awards .wrap { width: var(--wrap); }
|
|
|
.awards-layout {
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
display: grid;
|
|
|
grid-template-columns: minmax(320px,.8fr) minmax(0,1.45fr);
|
|
|
gap: clamp(58px,8vw,126px);
|
|
|
min-height: 780px;
|
|
|
align-items: center;
|
|
|
padding: 110px 0;
|
|
|
}
|
|
|
.awards .section-head {
|
|
|
grid-column: 1;
|
|
|
grid-row: 1;
|
|
|
order: 0;
|
|
|
display: block;
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
border: 0;
|
|
|
text-align: left;
|
|
|
}
|
|
|
.awards .section-head::before { content: "06 / PROJECT BOOST"; display: block; width: auto; height: auto; margin: 0 0 44px; color: #50cdf2; background: none; font-size: 10px; font-weight: 800; letter-spacing: .22em; }
|
|
|
.awards .section-title { max-width: 430px; color: #fff; font-size: clamp(50px,5.1vw,76px); line-height: 1.02; letter-spacing: -.07em; writing-mode: horizontal-tb; }
|
|
|
.awards-summary { max-width: 420px; margin: 34px 0 0; color: rgba(225,244,251,.66); font-size: 15px; line-height: 1.9; }
|
|
|
.awards-note { display: block; margin: 62px 0 0; color: rgba(80,205,242,.46); font-size: 9px; font-weight: 800; letter-spacing: .24em; }
|
|
|
.award-grid {
|
|
|
grid-column: 2;
|
|
|
grid-row: 1;
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(2,minmax(0,1fr));
|
|
|
gap: 1px;
|
|
|
padding: 0;
|
|
|
background: rgba(114,214,240,.16);
|
|
|
border: 0;
|
|
|
border-radius: 28px 0 28px 0;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.award-grid::before { content: none; }
|
|
|
.award-card,
|
|
|
.award-card:nth-child(odd) {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
min-height: 276px;
|
|
|
align-items: flex-start;
|
|
|
justify-content: flex-start;
|
|
|
padding: 36px 34px;
|
|
|
border: 0;
|
|
|
background: rgba(4,31,54,.76);
|
|
|
text-align: left;
|
|
|
backdrop-filter: blur(12px);
|
|
|
transition: background .3s,transform .3s var(--ease);
|
|
|
}
|
|
|
.award-card::before { content: none; }
|
|
|
.award-card::after { content: ""; position: absolute; right: 28px; bottom: 26px; width: 7px; height: 7px; border-radius: 50%; background: #36c8ef; box-shadow: 0 0 18px rgba(54,200,239,.8); }
|
|
|
.award-card small { display: block; color: #4fcdf2; font-size: 11px; line-height: 1.4; letter-spacing: .1em; }
|
|
|
.award-card small span { display: block; margin: 0 0 22px; color: rgba(113,219,244,.26); font-size: 34px; font-weight: 300; line-height: 1; }
|
|
|
.award-card h3 { order: 2; margin: 28px 0 14px; color: #fff; font-size: clamp(22px,2vw,28px); line-height: 1.25; white-space: normal; }
|
|
|
.award-card p { order: 3; max-width: 360px; margin: 0; color: rgba(219,240,248,.58); font-size: 12px; line-height: 1.75; }
|
|
|
.award-card:hover { z-index: 2; background: rgba(7,73,111,.86); transform: scale(1.018); }
|
|
|
.award-card:hover h3 { color: #fff; }
|
|
|
|
|
|
@media (max-width: 900px) {
|
|
|
.roadmap .section-head { grid-template-columns: 1fr; gap: 28px; }
|
|
|
.roadmap-intro { max-width: 560px; }
|
|
|
.timeline { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; padding-top: 0; }
|
|
|
.timeline::before,.timeline::after,.step::before { content: none; }
|
|
|
.awards-layout { grid-template-columns: 1fr; gap: 64px; min-height: 0; }
|
|
|
.awards .section-head,.award-grid { grid-column: 1; }
|
|
|
.awards .section-head { grid-row: 1; }
|
|
|
.award-grid { grid-row: 2; }
|
|
|
}
|
|
|
@media (max-width: 600px) {
|
|
|
.roadmap { padding: 86px 0 94px; }
|
|
|
.roadmap .section-head { margin-bottom: 44px; }
|
|
|
.roadmap .section-title { font-size: clamp(46px,15vw,64px); }
|
|
|
.timeline { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 0; }
|
|
|
.step { min-height: 0; padding: 26px 24px 28px 92px; }
|
|
|
.step-mark { position: absolute; top: 28px; left: 24px; margin: 0; font-size: 34px; }
|
|
|
.step h3 { font-size: 19px; }
|
|
|
.step-place { margin-top: 14px; }
|
|
|
.awards .wrap { width: calc(100% - 40px); }
|
|
|
.awards-layout { gap: 48px; padding: 84px 0; }
|
|
|
.awards .section-title { font-size: clamp(46px,14vw,62px); }
|
|
|
.awards-summary { margin-top: 24px; }
|
|
|
.awards-note { margin-top: 38px; }
|
|
|
.award-grid { grid-template-columns: 1fr; border-radius: 2px 22px 2px 22px; }
|
|
|
.award-card,.award-card:nth-child(odd) { min-height: 238px; padding: 30px 26px; }
|
|
|
}
|
|
|
|
|
|
/* 2026-08 below-fold redesign — hero is intentionally untouched. */
|
|
|
.story-index {
|
|
|
position: relative;
|
|
|
z-index: 7;
|
|
|
display: grid;
|
|
|
grid-template-columns: 1.25fr repeat(4,1fr);
|
|
|
min-height: 104px;
|
|
|
margin: 0;
|
|
|
padding: 0 max(32px,calc((100vw - 1280px)/2));
|
|
|
color: #dff7ff;
|
|
|
background: #07192c;
|
|
|
border-top: 1px solid rgba(134,225,255,.18);
|
|
|
border-bottom: 1px solid rgba(134,225,255,.12);
|
|
|
}
|
|
|
.story-index::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
height: 1px;
|
|
|
background: linear-gradient(90deg,transparent 4%,#42c9f2 38%,#86f2e4 51%,#42c9f2 64%,transparent 96%);
|
|
|
opacity: .7;
|
|
|
}
|
|
|
.story-index > span,
|
|
|
.story-index > a {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
min-width: 0;
|
|
|
align-items: center;
|
|
|
padding: 0 26px;
|
|
|
border-left: 1px solid rgba(134,225,255,.12);
|
|
|
}
|
|
|
.story-index > span { padding-left: 0; border-left: 0; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .18em; }
|
|
|
.story-index > a { color: rgba(220,243,250,.68); font-size: 13px; font-weight: 650; transition: color .25s,background .25s; }
|
|
|
.story-index > a::before { content: attr(data-index); margin-right: 14px; color: #45c9ef; font-size: 10px; letter-spacing: .08em; }
|
|
|
.story-index > a:hover { color: #fff; background: rgba(57,196,234,.08); }
|
|
|
|
|
|
.audience-tracks-layout {
|
|
|
position: relative;
|
|
|
display: block;
|
|
|
min-height: 0;
|
|
|
padding: 0;
|
|
|
background: #f7fafc;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.audience-tracks-layout::before { content: none; }
|
|
|
.audience-tracks-layout .wrap { width: min(1280px,calc(100% - 64px)); }
|
|
|
.audience-tracks-layout .audience,
|
|
|
.audience-tracks-layout .tracks { width: 100%; margin: 0; }
|
|
|
|
|
|
.audience {
|
|
|
position: relative;
|
|
|
padding: 0 !important;
|
|
|
color: #07192c;
|
|
|
background:
|
|
|
linear-gradient(90deg,rgba(0,148,220,.035) 1px,transparent 1px) 0 0 / 80px 80px,
|
|
|
linear-gradient(180deg,#fbfdff 0%,#f4f9fc 100%) !important;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.audience::before {
|
|
|
content: "01";
|
|
|
position: absolute;
|
|
|
top: 46px;
|
|
|
right: max(20px,calc((100vw - 1280px)/2));
|
|
|
width: auto;
|
|
|
height: auto;
|
|
|
min-width: 0;
|
|
|
min-height: 0;
|
|
|
color: rgba(0,148,220,.08);
|
|
|
background: none;
|
|
|
border-radius: 0;
|
|
|
font-size: clamp(150px,21vw,310px);
|
|
|
font-weight: 800;
|
|
|
line-height: .8;
|
|
|
letter-spacing: -.09em;
|
|
|
opacity: 1;
|
|
|
}
|
|
|
.audience .wrap {
|
|
|
position: relative;
|
|
|
display: grid;
|
|
|
grid-template-columns: 190px minmax(0,1fr);
|
|
|
gap: 68px;
|
|
|
min-height: 760px;
|
|
|
align-items: stretch;
|
|
|
padding: 110px 0 118px;
|
|
|
}
|
|
|
.audience-index,
|
|
|
.tracks-index {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 10px;
|
|
|
padding-top: 10px;
|
|
|
border-top: 2px solid #0e9ed8;
|
|
|
color: #086d9c;
|
|
|
}
|
|
|
.audience-index strong,.tracks-index strong { font-size: 14px; letter-spacing: .1em; }
|
|
|
.audience-index span,.tracks-index span { color: #83a4b5; font-size: 9px; font-weight: 800; letter-spacing: .18em; }
|
|
|
.audience-content { display: flex; align-items: center; }
|
|
|
.audience-card { display: block !important; width: 100%; filter: none !important; }
|
|
|
.audience-focus { display: block !important; min-height: 0 !important; padding: 0 !important; color: #07192c !important; background: transparent !important; border-radius: 0 !important; clip-path: none !important; text-align: left !important; }
|
|
|
.audience-stage { margin: 0 !important; }
|
|
|
.audience-stage strong { display: block; color: #07192c !important; font-size: clamp(50px,6.1vw,86px) !important; font-weight: 780; line-height: .98 !important; letter-spacing: -.07em !important; white-space: normal !important; }
|
|
|
.stage-main,.stage-sub { display: block; }
|
|
|
.stage-sub { margin-top: 12px; color: #0b8fc4; font-family: var(--font-serif); font-weight: 600; }
|
|
|
.audience-detail { display: block !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }
|
|
|
.audience-detail > p { max-width: 680px !important; margin: 42px 0 68px !important; color: #557082 !important; font-size: 17px !important; font-weight: 500 !important; line-height: 1.9 !important; }
|
|
|
.audience-types { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 0 !important; border-top: 1px solid #b9d4e0; border-bottom: 1px solid #b9d4e0; }
|
|
|
.audience-type { position: relative; display: flex !important; min-height: 112px !important; align-items: center !important; padding: 24px 24px 24px 58px !important; color: #10283c !important; background: transparent !important; border: 0 !important; border-right: 1px solid #d3e4eb !important; border-radius: 0 !important; }
|
|
|
.audience-type:last-child { border-right: 0 !important; }
|
|
|
.audience-type::before { content: ""; position: absolute; left: 24px; width: 10px; height: 10px; border: 2px solid #1db6e8; border-radius: 50%; box-shadow: 0 0 0 6px rgba(29,182,232,.08); }
|
|
|
.audience-type strong { font-size: 20px !important; font-weight: 700; }
|
|
|
.audience-type:hover { color: #077cad !important; background: rgba(0,148,220,.035) !important; transform: none !important; }
|
|
|
|
|
|
.tracks {
|
|
|
position: relative;
|
|
|
padding: 0 !important;
|
|
|
color: #fff;
|
|
|
background:
|
|
|
linear-gradient(180deg,rgba(255,255,255,.055),transparent 28%),
|
|
|
radial-gradient(circle at 84% 10%,rgba(105,211,239,.18),transparent 31%),
|
|
|
radial-gradient(circle at 12% 88%,rgba(3,65,108,.28),transparent 36%),
|
|
|
linear-gradient(135deg,#0879aa 0%,#0a8fc3 48%,#0873a4 100%) !important;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.tracks::before { content: "02"; position: absolute; top: 64px; left: max(14px,calc((100vw - 1440px)/2)); width: auto; height: auto; color: rgba(72,197,234,.09); background: none; border-radius: 0; box-shadow: none; font-size: clamp(150px,22vw,320px); font-weight: 800; line-height: .8; letter-spacing: -.09em; }
|
|
|
.tracks::after { content: "780nm 850nm 980nm 1064nm 1310nm 1550nm"; position: absolute; right: 0; bottom: 46px; left: 0; color: rgba(130,219,245,.27); font-size: 9px; word-spacing: clamp(28px,8vw,128px); text-align: center; white-space: nowrap; }
|
|
|
.tracks .wrap { position: relative; display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 68px; min-height: 860px; padding: 112px 0 130px; }
|
|
|
.tracks-index { color: #70dcf7; border-color: #4ec9ed; }
|
|
|
.tracks-index span { color: rgba(191,229,240,.45); }
|
|
|
.tracks-content { align-self: center; }
|
|
|
.tracks .section-head { display: grid !important; grid-template-columns: 1.3fr .7fr !important; gap: 54px !important; width: 100% !important; margin: 0 0 62px !important; align-items: end !important; text-align: left !important; }
|
|
|
.tracks-kicker { display: block; margin-bottom: 15px; color: #48c9ef; font-size: 9px; font-weight: 800; letter-spacing: .2em; }
|
|
|
.tracks .section-title { display: block; width: auto; padding: 0; color: #fff; font-size: clamp(46px,5.4vw,76px); line-height: 1; letter-spacing: -.065em; text-indent: 0; }
|
|
|
.tracks .section-title::before { content: none; }
|
|
|
.tracks .section-title > span { transform: none; }
|
|
|
.tracks .section-head > p { margin: 0 0 8px; color: rgba(210,236,245,.58); font-size: 14px; line-height: 1.85; }
|
|
|
.track-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border-top: 1px solid rgba(100,210,241,.25); border-bottom: 1px solid rgba(100,210,241,.25); }
|
|
|
.track-card,.track-card:nth-child(n) { position: relative; min-height: 340px; padding: 94px 28px 38px; color: #fff; background: transparent; border: 0; border-right: 1px solid rgba(124,208,233,.18); border-radius: 0; box-shadow: none; overflow: hidden; }
|
|
|
.track-card:last-child { border-right: 0; }
|
|
|
.track-card::before { position: absolute; top: 26px; left: 28px; color: #2ac1ef; font-size: 13px; font-weight: 800; letter-spacing: .12em; }
|
|
|
.track-card:nth-child(1)::before { content: "01"; }
|
|
|
.track-card:nth-child(2)::before { content: "02"; }
|
|
|
.track-card:nth-child(3)::before { content: "03"; }
|
|
|
.track-card:nth-child(4)::before { content: "04"; }
|
|
|
.track-card::after { content: ""; position: absolute; right: -28px; bottom: -74px; width: 170px; height: 170px; border: 1px solid rgba(65,194,232,.13); border-radius: 50%; box-shadow: 0 0 0 30px rgba(65,194,232,.025),0 0 0 60px rgba(65,194,232,.015); }
|
|
|
.track-card h3 { margin: 0 0 24px; color: #fff; font-size: 23px; line-height: 1.3; }
|
|
|
.track-card h3::before { content: none; }
|
|
|
.track-card p { max-width: none; margin: 0; color: rgba(209,234,242,.6); font-size: 13px; line-height: 1.9; }
|
|
|
.track-card:hover { z-index: 1; background: rgba(32,166,209,.09); border-color: rgba(124,208,233,.18); box-shadow: inset 0 3px #25bde9; transform: translateY(-8px); }
|
|
|
|
|
|
.roadmap {
|
|
|
position: relative;
|
|
|
padding: 124px 0 136px;
|
|
|
color: #10283c;
|
|
|
background:
|
|
|
linear-gradient(90deg,rgba(0,148,220,.045) 1px,transparent 1px) 0 0 / 80px 80px,
|
|
|
#fbfdff;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.roadmap::before { content: "03"; position: absolute; top: 92px; right: max(14px,calc((100vw - 1440px)/2)); color: rgba(0,148,220,.07); font-size: clamp(150px,22vw,320px); font-weight: 800; line-height: .8; letter-spacing: -.09em; }
|
|
|
.roadmap .section-head { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin: 0 0 96px; }
|
|
|
.roadmap .section-title { width: auto; padding: 0; color: #07192c; font-size: clamp(56px,6.8vw,96px); line-height: .93; letter-spacing: -.08em; text-indent: 0; }
|
|
|
.roadmap .section-title::before { content: none; }
|
|
|
.roadmap-intro { max-width: 520px; margin: 0 0 6px; color: #587182; font-size: 15px; line-height: 1.9; }
|
|
|
.roadmap-intro strong { display: block; margin-bottom: 18px; color: #078fc8; font-size: 9px; letter-spacing: .22em; }
|
|
|
.timeline { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 0; padding-top: 54px; border-top: 1px solid #aacbd9; }
|
|
|
.timeline::before { content: ""; position: absolute; top: -3px; left: 0; width: 32%; height: 5px; background: linear-gradient(90deg,#087eb5,#30c8ed); }
|
|
|
.timeline::after { content: none; }
|
|
|
.step { position: relative; min-height: 330px; padding: 0 34px; color: #10283c; background: transparent; border: 0; border-right: 1px solid #d6e5eb; border-radius: 0; box-shadow: none; }
|
|
|
.step:last-child { border-right: 0; }
|
|
|
.step::before { content: ""; position: absolute; top: -60px; left: 34px; width: 11px; height: 11px; background: #fff; border: 3px solid #0aa4dd; border-radius: 50%; box-shadow: 0 0 0 8px rgba(10,164,221,.09); }
|
|
|
.step-mark { display: block; margin: 0 0 56px; color: rgba(7,145,197,.25); font-size: 66px; font-weight: 800; line-height: .8; letter-spacing: -.08em; }
|
|
|
.step h3 { min-height: 58px; margin: 0 0 24px; color: #07192c; font-size: 20px; line-height: 1.42; }
|
|
|
.step p { margin: 0; color: #647c8c; font-size: 13px; line-height: 1.9; }
|
|
|
.step p strong { display: block; margin-bottom: 8px; color: #078fc8 !important; font-size: 13px; }
|
|
|
.step-place { display: block; margin-top: 28px; color: #5a9ab7; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
|
|
|
|
|
|
.awards { padding: 0; color: #fff; background: linear-gradient(135deg,#041426 0%,#062842 58%,#06466b 100%); }
|
|
|
.awards::before { top: 50%; left: 20%; width: min(54vw,760px); border-color: rgba(81,210,242,.1); box-shadow: 0 0 0 92px rgba(81,210,242,.025),0 0 0 184px rgba(81,210,242,.012); }
|
|
|
.awards::after { content: "04"; right: -12px; bottom: -48px; color: rgba(112,220,245,.045); font-size: clamp(220px,34vw,520px); }
|
|
|
.awards-layout { grid-template-columns: minmax(300px,.72fr) minmax(0,1.55fr); gap: clamp(54px,8vw,130px); min-height: 860px; padding: 120px 0; }
|
|
|
.awards .section-head::before { content: none; display: none; }
|
|
|
.awards .section-title { max-width: 480px; font-size: clamp(52px,5.8vw,82px); }
|
|
|
.awards-summary { max-width: 370px; }
|
|
|
.award-grid { gap: 0; padding: 0; background: transparent; border: 0; border-top: 1px solid rgba(113,218,244,.22); border-bottom: 1px solid rgba(113,218,244,.22); border-radius: 0; }
|
|
|
.award-card,.award-card:nth-child(odd) { min-height: 286px; padding: 42px 34px; background: transparent; border-right: 1px solid rgba(113,218,244,.16); border-bottom: 1px solid rgba(113,218,244,.16); backdrop-filter: none; }
|
|
|
.award-card:nth-child(even) { border-right: 0; }
|
|
|
.award-card:nth-child(n+3) { border-bottom: 0; }
|
|
|
.award-card::after { width: 6px; height: 6px; }
|
|
|
.award-card small span { color: rgba(113,219,244,.22); font-size: 42px; }
|
|
|
.award-card h3 { font-size: clamp(22px,2vw,29px); }
|
|
|
.award-card:hover { background: rgba(30,164,205,.08); transform: none; }
|
|
|
|
|
|
.site-footer { padding: 0; color: rgba(214,237,245,.58); background: #061b2d; border-top: 1px solid rgba(117,218,245,.18); border-radius: 0 0 10px 10px; box-shadow: 0 8px 18px rgba(1,11,20,.28); overflow: hidden; }
|
|
|
.footer-inner { display: grid; grid-template-columns: 1fr auto; min-height: 124px; align-items: center; gap: 40px; }
|
|
|
.footer-brand { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .02em; }
|
|
|
.footer-brand::before { content: "HU–SU COLLABORATIVE INNOVATION"; display: block; margin-bottom: 14px; color: #44d4f4; font-size: 9px; font-weight: 800; letter-spacing: .22em; }
|
|
|
.footer-meta { color: rgba(198,225,235,.42); font-size: 11px; }
|
|
|
|
|
|
@media (max-width: 980px) {
|
|
|
.story-index { grid-template-columns: repeat(4,1fr); min-height: 78px; padding: 0 24px; }
|
|
|
.story-index > span { display: none; }
|
|
|
.story-index > a { justify-content: center; padding: 0 10px; }
|
|
|
.audience .wrap,.tracks .wrap { grid-template-columns: 130px minmax(0,1fr); gap: 38px; }
|
|
|
.track-grid { grid-template-columns: repeat(2,1fr); }
|
|
|
.track-card:nth-child(2) { border-right: 0; }
|
|
|
.track-card:nth-child(-n+2) { border-bottom: 1px solid rgba(124,208,233,.18); }
|
|
|
.roadmap .section-head { grid-template-columns: 1fr; gap: 36px; }
|
|
|
.timeline { grid-template-columns: repeat(2,1fr); gap: 0; }
|
|
|
.step { border-bottom: 1px solid #d6e5eb; }
|
|
|
.step:nth-child(2) { border-right: 0; }
|
|
|
.step:nth-child(n+3) { padding-top: 52px; border-bottom: 0; }
|
|
|
.step:nth-child(n+3)::before { content: none; }
|
|
|
.awards-layout { grid-template-columns: 1fr; }
|
|
|
}
|
|
|
@media (max-width: 680px) {
|
|
|
.story-index { position: sticky; top: 0; z-index: 19; grid-template-columns: repeat(4,1fr); min-height: 58px; padding: 0 8px; }
|
|
|
.story-index > a { padding: 0 4px; font-size: 11px; }
|
|
|
.story-index > a::before { display: none; }
|
|
|
.audience-tracks-layout .wrap,.roadmap .wrap,.awards .wrap,.site-footer .wrap { width: calc(100% - 40px); }
|
|
|
.audience .wrap,.tracks .wrap { display: block; min-height: 0; padding: 78px 0 86px; }
|
|
|
.audience-index,.tracks-index { width: 116px; margin-bottom: 66px; }
|
|
|
.audience-stage strong { font-size: clamp(44px,14vw,66px) !important; }
|
|
|
.audience-detail > p { margin: 30px 0 46px !important; font-size: 15px !important; }
|
|
|
.audience-types { grid-template-columns: 1fr !important; }
|
|
|
.audience-type { min-height: 78px !important; border-right: 0 !important; border-bottom: 1px solid #d3e4eb !important; }
|
|
|
.audience-type:last-child { border-bottom: 0 !important; }
|
|
|
.tracks .section-head { display: block !important; margin-bottom: 44px !important; }
|
|
|
.tracks .section-head > p { margin-top: 24px; }
|
|
|
.track-grid { grid-template-columns: 1fr; }
|
|
|
.track-card,.track-card:nth-child(n) { min-height: 250px; padding: 78px 24px 32px; border-right: 0; border-bottom: 1px solid rgba(124,208,233,.18); }
|
|
|
.track-card:last-child { border-bottom: 0; }
|
|
|
.tracks::after { display: none; }
|
|
|
.roadmap { padding: 86px 0 96px; }
|
|
|
.roadmap .section-head { margin-bottom: 64px; }
|
|
|
.roadmap .section-title { font-size: clamp(50px,15vw,70px); }
|
|
|
.timeline { grid-template-columns: 1fr; padding-top: 0; border-top: 0; }
|
|
|
.timeline::before { content: none; }
|
|
|
.step,.step:nth-child(n+3) { min-height: 0; padding: 30px 18px 34px 82px; border-right: 0; border-bottom: 1px solid #d6e5eb; }
|
|
|
.step:last-child { border-bottom: 0; }
|
|
|
.step::before,.step:nth-child(n+3)::before { content: ""; top: 36px; left: 22px; }
|
|
|
.step-mark { position: absolute; top: 34px; left: 48px; margin: 0; font-size: 28px; }
|
|
|
.step h3 { min-height: 0; margin-bottom: 14px; font-size: 18px; }
|
|
|
.step-place { margin-top: 18px; }
|
|
|
.awards-layout { gap: 54px; min-height: 0; padding: 88px 0; }
|
|
|
.awards .section-title { font-size: clamp(46px,14vw,64px); }
|
|
|
.award-grid { grid-template-columns: 1fr; }
|
|
|
.award-card,.award-card:nth-child(odd) { min-height: 238px; padding: 32px 24px; border-right: 0; border-bottom: 1px solid rgba(113,218,244,.16); }
|
|
|
.award-card:last-child { border-bottom: 0; }
|
|
|
.footer-inner { grid-template-columns: 1fr; min-height: 210px; align-content: center; gap: 24px; }
|
|
|
}
|
|
|
/* Final specificity seal: neutralize legacy iteration selectors. */
|
|
|
.audience-tracks-layout .audience-content { display: flex; min-width: 0; align-items: center; padding: 0; }
|
|
|
.audience-tracks-layout .tracks .track-card,
|
|
|
.audience-tracks-layout .tracks .track-card:nth-child(n),
|
|
|
.audience-tracks-layout .tracks .track-card:nth-child(even) {
|
|
|
min-height: 340px;
|
|
|
padding: 94px 28px 38px;
|
|
|
color: #fff;
|
|
|
background: transparent;
|
|
|
border: 0;
|
|
|
border-right: 1px solid rgba(124,208,233,.18);
|
|
|
border-radius: 0;
|
|
|
box-shadow: none;
|
|
|
transform: none;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks .track-card:last-child { border-right: 0; }
|
|
|
.audience-tracks-layout .tracks .track-card::before { top: 26px; left: 28px; }
|
|
|
.audience-tracks-layout .tracks .track-card::after { content: none; }
|
|
|
.audience-tracks-layout .tracks .track-card h3 { margin: 0 0 24px; padding: 0; color: #fff; font-size: 23px; }
|
|
|
.audience-tracks-layout .tracks .track-card p { max-width: none; margin: 0; padding: 0; color: rgba(209,234,242,.6); font-size: 13px; line-height: 1.9; }
|
|
|
.audience-tracks-layout .tracks .track-card:hover { background: rgba(32,166,209,.09); border-color: rgba(124,208,233,.18); box-shadow: inset 0 3px #25bde9; transform: translateY(-8px); }
|
|
|
@media (max-width: 980px) {
|
|
|
.audience-tracks-layout .tracks .track-card,
|
|
|
.audience-tracks-layout .tracks .track-card:nth-child(n),
|
|
|
.audience-tracks-layout .tracks .track-card:nth-child(even) { min-height: 286px; }
|
|
|
.audience-tracks-layout .tracks .track-card:nth-child(2) { border-right: 0; }
|
|
|
.audience-tracks-layout .tracks .track-card:nth-child(-n+2) { border-bottom: 1px solid rgba(124,208,233,.18); }
|
|
|
}
|
|
|
@media (max-width: 680px) {
|
|
|
.audience-tracks-layout .audience-content { display: block; padding: 0; }
|
|
|
.audience-tracks-layout .tracks .track-card,
|
|
|
.audience-tracks-layout .tracks .track-card:nth-child(n),
|
|
|
.audience-tracks-layout .tracks .track-card:nth-child(even) { min-height: 242px; padding: 78px 24px 32px; border-right: 0; border-bottom: 1px solid rgba(124,208,233,.18); }
|
|
|
.audience-tracks-layout .tracks .track-card:last-child { border-bottom: 0; }
|
|
|
.audience-tracks-layout .tracks .track-card::before { top: 25px; left: 24px; }
|
|
|
}
|
|
|
|
|
|
/* Compact below-fold rhythm; the full-screen hero remains unchanged. */
|
|
|
.audience-tracks-layout .audience .wrap { min-height: 0; padding: 0; }
|
|
|
.audience-tracks-layout .audience-index { padding-top: 124px; }
|
|
|
.audience-tracks-layout .audience-content { padding: 124px 0 82px; }
|
|
|
.audience-detail > p { margin: 30px 0 42px !important; }
|
|
|
.audience-type { min-height: 92px !important; }
|
|
|
.tracks .wrap { min-height: 0; padding-top: 82px; padding-bottom: 86px; }
|
|
|
.tracks .section-head { margin-bottom: 42px !important; }
|
|
|
.audience-tracks-layout .tracks .track-card,
|
|
|
.audience-tracks-layout .tracks .track-card:nth-child(n),
|
|
|
.audience-tracks-layout .tracks .track-card:nth-child(even) { min-height: 270px; padding-top: 76px; padding-bottom: 30px; }
|
|
|
.roadmap { padding: 88px 0 92px; }
|
|
|
.roadmap .section-head { margin-bottom: 62px; }
|
|
|
.step { min-height: 270px; }
|
|
|
.step-mark { margin-bottom: 40px; }
|
|
|
.awards-layout { min-height: 0; padding-top: 88px; padding-bottom: 88px; }
|
|
|
.award-card,.award-card:nth-child(odd) { min-height: 238px; padding-top: 34px; padding-bottom: 34px; }
|
|
|
.footer-inner { min-height: 124px; }
|
|
|
|
|
|
@media (max-width: 980px) {
|
|
|
.audience-tracks-layout .audience .wrap { padding: 0; }
|
|
|
.audience-tracks-layout .audience-index { padding-top: 104px; }
|
|
|
.audience-tracks-layout .audience-content { padding: 104px 0 72px; }
|
|
|
.audience-tracks-layout .tracks .wrap { padding-top: 68px; padding-bottom: 72px; }
|
|
|
.audience-tracks-layout .tracks .track-card,
|
|
|
.audience-tracks-layout .tracks .track-card:nth-child(n),
|
|
|
.audience-tracks-layout .tracks .track-card:nth-child(even) { min-height: 250px; }
|
|
|
.roadmap { padding: 76px 0 80px; }
|
|
|
.awards-layout { padding-top: 76px; padding-bottom: 76px; }
|
|
|
}
|
|
|
@media (max-width: 680px) {
|
|
|
.audience-tracks-layout .audience .wrap { padding: 0; }
|
|
|
.audience-tracks-layout .audience-index { padding-top: 88px; }
|
|
|
.audience-tracks-layout .audience-content { padding: 88px 0 64px; }
|
|
|
.audience-tracks-layout .tracks .wrap { padding: 58px 0 64px; }
|
|
|
.audience-index,.tracks-index { margin-bottom: 42px; }
|
|
|
.audience-detail > p { margin: 26px 0 34px !important; }
|
|
|
.tracks .section-head { margin-bottom: 34px !important; }
|
|
|
.audience-tracks-layout .tracks .track-card,
|
|
|
.audience-tracks-layout .tracks .track-card:nth-child(n),
|
|
|
.audience-tracks-layout .tracks .track-card:nth-child(even) { min-height: 210px; padding-top: 68px; padding-bottom: 26px; }
|
|
|
.roadmap { padding: 64px 0 68px; }
|
|
|
.roadmap .section-head { margin-bottom: 46px; }
|
|
|
.awards-layout { gap: 40px; padding: 66px 0; }
|
|
|
.award-card,.award-card:nth-child(odd) { min-height: 210px; padding: 28px 22px; }
|
|
|
.footer-inner { min-height: 174px; }
|
|
|
}
|
|
|
|
|
|
/* Audience section — compact editorial composition. */
|
|
|
.audience-tracks-layout .audience::before {
|
|
|
content: "01";
|
|
|
top: 74px;
|
|
|
right: max(24px,calc((100vw - 1280px)/2));
|
|
|
color: rgba(0,148,220,.045);
|
|
|
font-size: clamp(130px,16vw,230px);
|
|
|
}
|
|
|
.audience-tracks-layout .audience .wrap {
|
|
|
grid-template-columns: 104px minmax(0,1fr);
|
|
|
gap: 48px;
|
|
|
min-height: 620px;
|
|
|
padding: 82px 0 88px;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-index {
|
|
|
align-self: stretch;
|
|
|
justify-content: flex-start;
|
|
|
padding-top: 18px;
|
|
|
border-top: 0;
|
|
|
border-right: 1px solid rgba(8,74,145,.28);
|
|
|
}
|
|
|
.audience-tracks-layout .audience-index::before {
|
|
|
content: "";
|
|
|
display: block;
|
|
|
width: 32px;
|
|
|
height: 3px;
|
|
|
margin-bottom: 22px;
|
|
|
background: #087dcc;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-index strong,
|
|
|
.audience-tracks-layout .audience-index span {
|
|
|
writing-mode: vertical-rl;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-index strong { font-size: 15px; letter-spacing: .18em; }
|
|
|
.audience-tracks-layout .audience-index span { margin-top: 18px; font-size: 10px; letter-spacing: .14em; }
|
|
|
.audience-tracks-layout .audience-content {
|
|
|
width: 100%;
|
|
|
max-width: 1080px;
|
|
|
justify-self: start;
|
|
|
padding: 0;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-card {
|
|
|
display: grid !important;
|
|
|
grid-template-columns: minmax(300px,.82fr) minmax(430px,1.18fr);
|
|
|
overflow: hidden;
|
|
|
background: rgba(255,255,255,.72);
|
|
|
border: 0;
|
|
|
border-radius: 24px;
|
|
|
box-shadow: 0 24px 64px rgba(31,92,122,.09);
|
|
|
backdrop-filter: blur(10px);
|
|
|
}
|
|
|
.audience-tracks-layout .audience-focus {
|
|
|
display: flex !important;
|
|
|
min-height: 388px !important;
|
|
|
align-items: center;
|
|
|
padding: 50px 48px !important;
|
|
|
border-right: 0 !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-focus::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
top: 18%;
|
|
|
right: 0;
|
|
|
bottom: 18%;
|
|
|
width: 1px;
|
|
|
background: rgba(151,194,214,.42);
|
|
|
}
|
|
|
.audience-eyebrow {
|
|
|
display: inline-flex;
|
|
|
width: max-content;
|
|
|
align-items: center;
|
|
|
margin-bottom: 26px;
|
|
|
padding: 10px 18px;
|
|
|
color: #fff;
|
|
|
background: #087db4;
|
|
|
border-radius: 6px;
|
|
|
box-shadow: 0 8px 20px rgba(8,125,180,.16);
|
|
|
font-size: 10px;
|
|
|
font-weight: 800;
|
|
|
letter-spacing: .22em;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-stage strong { font-size: clamp(38px,3.6vw,56px) !important; line-height: 1.08 !important; }
|
|
|
.audience-tracks-layout .audience-stage .stage-main { color: #07192c; background: none; }
|
|
|
.audience-tracks-layout .audience-stage .stage-sub {
|
|
|
margin-top: 14px;
|
|
|
color: #087db4;
|
|
|
font-size: .54em;
|
|
|
font-family: var(--font-serif);
|
|
|
font-weight: 600;
|
|
|
letter-spacing: .08em;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-detail {
|
|
|
display: flex !important;
|
|
|
min-width: 0;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
padding: 46px 48px !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-detail > p {
|
|
|
max-width: 570px !important;
|
|
|
margin: 0 0 38px !important;
|
|
|
color: #4f6b7e !important;
|
|
|
font-size: 16px !important;
|
|
|
line-height: 1.85 !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-types {
|
|
|
display: grid !important;
|
|
|
grid-template-columns: repeat(3,minmax(0,1fr)) !important;
|
|
|
gap: 0 !important;
|
|
|
max-width: none;
|
|
|
border: 0;
|
|
|
border-top: 1px solid rgba(151,194,214,.55);
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type,
|
|
|
.audience-tracks-layout .audience-type + .audience-type {
|
|
|
display: flex !important;
|
|
|
min-height: 104px !important;
|
|
|
flex-direction: column;
|
|
|
align-items: flex-start !important;
|
|
|
justify-content: center;
|
|
|
gap: 7px;
|
|
|
padding: 20px 18px !important;
|
|
|
background: transparent !important;
|
|
|
border: 0 !important;
|
|
|
border-right: 1px solid rgba(151,194,214,.38) !important;
|
|
|
border-radius: 0 !important;
|
|
|
box-shadow: none !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type:last-child { border-right: 0 !important; }
|
|
|
.audience-tracks-layout .audience-type::before,
|
|
|
.audience-tracks-layout .audience-type::after { content: none; }
|
|
|
.audience-tracks-layout .audience-type > span { color: #18a7dc; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
|
|
|
.audience-tracks-layout .audience-type strong { color: #10283c !important; font-size: 17px !important; }
|
|
|
.audience-tracks-layout .audience-type small {
|
|
|
display: block;
|
|
|
width: auto;
|
|
|
height: auto;
|
|
|
color: #8aa2b0;
|
|
|
font-size: 8px;
|
|
|
font-weight: 700;
|
|
|
letter-spacing: .12em;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type small::before,
|
|
|
.audience-tracks-layout .audience-type small::after { content: none; }
|
|
|
.audience-tracks-layout .audience-type:hover { background: rgba(0,148,220,.035) !important; transform: none; }
|
|
|
|
|
|
@media (max-width: 980px) {
|
|
|
.audience-tracks-layout .audience .wrap { grid-template-columns: 82px minmax(0,1fr); gap: 30px; }
|
|
|
.audience-tracks-layout .audience-card { grid-template-columns: 1fr; }
|
|
|
.audience-tracks-layout .audience-focus { min-height: 230px !important; padding: 38px 42px !important; border-right: 0 !important; border-bottom: 1px solid rgba(151,194,214,.42) !important; }
|
|
|
.audience-tracks-layout .audience-focus::after { display: none; }
|
|
|
.audience-tracks-layout .audience-detail { padding: 38px 42px !important; }
|
|
|
}
|
|
|
@media (max-width: 680px) {
|
|
|
.audience-tracks-layout .audience .wrap { display: block; padding: 64px 0 72px; }
|
|
|
.audience-tracks-layout .audience-index { height: auto; margin: 0 0 34px; padding: 0 0 18px; flex-direction: row; align-items: center; gap: 12px; border-right: 0; border-bottom: 1px solid rgba(8,74,145,.28); }
|
|
|
.audience-tracks-layout .audience-index::before { width: 24px; height: 2px; margin: 0; }
|
|
|
.audience-tracks-layout .audience-index strong,
|
|
|
.audience-tracks-layout .audience-index span { writing-mode: horizontal-tb; }
|
|
|
.audience-tracks-layout .audience-index span { margin: 0; }
|
|
|
.audience-tracks-layout .audience-content { display: block; }
|
|
|
.audience-tracks-layout .audience-focus { min-height: 210px !important; padding: 34px 28px !important; }
|
|
|
.audience-tracks-layout .audience-detail { padding: 30px 28px !important; }
|
|
|
.audience-tracks-layout .audience-detail > p { margin-bottom: 24px !important; font-size: 14px !important; }
|
|
|
.audience-tracks-layout .audience-types { grid-template-columns: 1fr !important; }
|
|
|
.audience-tracks-layout .audience-type,
|
|
|
.audience-tracks-layout .audience-type + .audience-type { min-height: 72px !important; padding: 14px 0 !important; border-right: 0 !important; border-bottom: 1px solid rgba(151,194,214,.38) !important; }
|
|
|
.audience-tracks-layout .audience-type:last-child { border-bottom: 0 !important; }
|
|
|
}
|
|
|
|
|
|
/* 2026-08-18 disruptive below-fold direction: one continuous editorial spine.
|
|
|
The approved dark-blue base of “贯通产业全链条” is intentionally preserved. */
|
|
|
/* Tracks: retain the approved dark base, but consolidate all content into
|
|
|
one precise value-chain instrument instead of four floating cards. */
|
|
|
.audience-tracks-layout .tracks::before {
|
|
|
content: "VALUE CHAIN";
|
|
|
top: 62px;
|
|
|
right: max(24px,calc((100vw - 1280px)/2));
|
|
|
left: auto;
|
|
|
color: rgba(90,213,244,.045);
|
|
|
font-size: clamp(82px,12vw,170px);
|
|
|
font-weight: 850;
|
|
|
letter-spacing: -.07em;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks::after { bottom: 32px; opacity: .62; }
|
|
|
.audience-tracks-layout .tracks .wrap {
|
|
|
display: block;
|
|
|
min-height: 0;
|
|
|
padding: 48px 0 54px;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks-index {
|
|
|
display: flex;
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
align-items: center;
|
|
|
gap: 16px;
|
|
|
margin: 0 0 22px;
|
|
|
padding: 0 0 12px;
|
|
|
border: 0;
|
|
|
background-image: linear-gradient(90deg,transparent 0 15%,rgba(105,207,237,.24) 45%,rgba(105,207,237,.24) 55%,transparent 85% 100%);
|
|
|
background-position: left bottom;
|
|
|
background-size: 100% 1px;
|
|
|
background-repeat: no-repeat;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks-index::before {
|
|
|
content: "02";
|
|
|
color: transparent;
|
|
|
font-size: 10px;
|
|
|
font-weight: 800;
|
|
|
letter-spacing: .12em;
|
|
|
height: 260px;
|
|
|
transform: translate(-50%,20px);
|
|
|
}
|
|
|
.audience-tracks-layout .tracks-index::after { transform: translate(-50%,20px); }
|
|
|
.audience-tracks-layout .tracks-index strong,
|
|
|
.audience-tracks-layout .tracks-index span {
|
|
|
color: #fff;
|
|
|
background: transparent;
|
|
|
box-shadow: none;
|
|
|
writing-mode: horizontal-tb;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks-index strong {
|
|
|
font-size: 14px;
|
|
|
letter-spacing: .14em;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks-index span { margin: 0 0 0 auto; color: rgba(218,243,251,.68); font-size: 9px; letter-spacing: .18em; }
|
|
|
.audience-tracks-layout .tracks-content { width: 100%; }
|
|
|
.audience-tracks-layout .tracks .section-head {
|
|
|
display: grid !important;
|
|
|
grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr) !important;
|
|
|
gap: 44px !important;
|
|
|
margin: 0 0 18px !important;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks .section-title {
|
|
|
max-width: 900px;
|
|
|
font-size: clamp(54px,6.4vw,90px);
|
|
|
letter-spacing: -.075em;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks .section-head > p {
|
|
|
position: relative;
|
|
|
max-width: 320px;
|
|
|
padding-left: 24px;
|
|
|
color: rgba(240,250,254,.82);
|
|
|
border-left: 0 !important;
|
|
|
font-size: 15px;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks .section-head > p::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 0;
|
|
|
width: 2px;
|
|
|
height: 20px;
|
|
|
border-radius: 999px;
|
|
|
background: rgba(105,220,247,.82);
|
|
|
transform: translateY(-50%);
|
|
|
}
|
|
|
.audience-tracks-layout .tracks .track-grid {
|
|
|
position: relative;
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(4,1fr);
|
|
|
gap: 0;
|
|
|
padding: 34px 0 0;
|
|
|
background: linear-gradient(180deg,rgba(3,52,88,.34),rgba(3,65,101,.2));
|
|
|
border: 1px solid rgba(166,229,246,.32);
|
|
|
border-radius: 0 28px 0 28px;
|
|
|
box-shadow: inset 0 1px rgba(255,255,255,.07),0 24px 64px rgba(2,43,72,.24);
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks .track-grid::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
top: 34px;
|
|
|
right: 7%;
|
|
|
left: 7%;
|
|
|
height: 1px;
|
|
|
background: linear-gradient(90deg,#22bce8,#73e5f8);
|
|
|
box-shadow: 0 0 16px rgba(58,204,239,.5);
|
|
|
}
|
|
|
.audience-tracks-layout .tracks .track-card,
|
|
|
.audience-tracks-layout .tracks .track-card:nth-child(n),
|
|
|
.audience-tracks-layout .tracks .track-card:nth-child(even) {
|
|
|
min-height: 176px;
|
|
|
padding: 46px 26px 20px;
|
|
|
background: linear-gradient(180deg,rgba(255,255,255,.025),rgba(1,50,82,.08));
|
|
|
border-right: 1px solid rgba(164,226,244,.2);
|
|
|
}
|
|
|
.audience-tracks-layout .tracks .track-card::before {
|
|
|
top: 23px;
|
|
|
left: 26px;
|
|
|
padding-right: 12px;
|
|
|
color: #9beaff;
|
|
|
background: #0878aa;
|
|
|
font-size: 10px;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks .track-card::after { display: none; }
|
|
|
.audience-tracks-layout .tracks .track-card h3 { margin-bottom: 12px; font-size: 22px; }
|
|
|
.audience-tracks-layout .tracks .track-card:nth-child(even) { background: linear-gradient(180deg,rgba(86,197,228,.045),rgba(1,50,82,.1)); }
|
|
|
.audience-tracks-layout .tracks .track-card p { max-width: 94%; color: rgba(240,250,254,.8); }
|
|
|
.audience-tracks-layout .tracks .track-card:hover {
|
|
|
background: linear-gradient(180deg,rgba(40,191,229,.11),rgba(40,191,229,.035));
|
|
|
box-shadow: inset 0 -3px #25bde9;
|
|
|
transform: none;
|
|
|
}
|
|
|
|
|
|
/* Give the value-chain chapter the weight of a dedicated industry plate:
|
|
|
deep vignette, optical bloom, wafer rings and a restrained circuit grid. */
|
|
|
.audience-tracks-layout .tracks {
|
|
|
isolation: isolate;
|
|
|
background-color: #03172e;
|
|
|
background-image:
|
|
|
radial-gradient(ellipse 42% 58% at 58% 8%,rgba(29,142,197,.28) 0%,rgba(8,78,126,.12) 42%,transparent 76%),
|
|
|
radial-gradient(circle at 7% 51%,transparent 0 20%,rgba(72,190,229,.12) 20.15% 20.35%,transparent 20.55% 28%,rgba(54,157,205,.07) 28.15% 34%,transparent 34.15%),
|
|
|
radial-gradient(ellipse 32% 52% at 95% 62%,rgba(8,83,142,.22),transparent 72%),
|
|
|
linear-gradient(rgba(90,191,225,.038) 1px,transparent 1px),
|
|
|
linear-gradient(90deg,rgba(90,191,225,.038) 1px,transparent 1px),
|
|
|
linear-gradient(112deg,#082b51 0%,#062344 33%,#031a35 68%,#061a36 100%);
|
|
|
background-size: auto,auto,auto,84px 84px,84px 84px,auto;
|
|
|
box-shadow: inset 0 42px 100px rgba(3,14,33,.26),inset 0 -90px 140px rgba(0,8,25,.42);
|
|
|
}
|
|
|
.audience-tracks-layout .tracks::before {
|
|
|
text-shadow: 0 0 58px rgba(53,196,235,.14);
|
|
|
}
|
|
|
.audience-tracks-layout .tracks .wrap::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
z-index: -1;
|
|
|
inset: 0;
|
|
|
pointer-events: none;
|
|
|
opacity: .34;
|
|
|
background:
|
|
|
linear-gradient(90deg,transparent 0 11%,rgba(72,190,229,.22) 11% 11.08%,transparent 11.08% 100%),
|
|
|
radial-gradient(circle at 11% 29%,rgba(95,222,249,.7) 0 1px,transparent 2px),
|
|
|
radial-gradient(circle at 82% 20%,rgba(95,222,249,.46) 0 1px,transparent 2px),
|
|
|
linear-gradient(126deg,transparent 0 68%,rgba(77,185,220,.08) 68.15% 68.28%,transparent 68.4%);
|
|
|
background-size: auto,160px 160px,210px 210px,auto;
|
|
|
mask-image: linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.18) 44%,rgba(0,0,0,.62));
|
|
|
}
|
|
|
.audience-tracks-layout .tracks .track-grid {
|
|
|
background:
|
|
|
linear-gradient(180deg,rgba(20,93,141,.24),rgba(1,24,52,.54)),
|
|
|
rgba(2,29,57,.56);
|
|
|
border-color: rgba(134,213,239,.38);
|
|
|
box-shadow: inset 0 1px rgba(255,255,255,.08),0 30px 74px rgba(0,9,29,.38);
|
|
|
backdrop-filter: blur(3px);
|
|
|
}
|
|
|
|
|
|
.roadmap {
|
|
|
padding: 118px 0 126px;
|
|
|
background: #e9f0f3;
|
|
|
border-top: 1px solid #d1dfe5;
|
|
|
}
|
|
|
.roadmap::before { content: "ROUTE"; top: 72px; color: rgba(4,56,89,.035); font-size: clamp(120px,18vw,260px); }
|
|
|
.roadmap .section-head {
|
|
|
grid-template-columns: minmax(360px,.9fr) minmax(320px,.7fr);
|
|
|
justify-content: space-between;
|
|
|
gap: 100px;
|
|
|
margin-bottom: 70px;
|
|
|
}
|
|
|
.roadmap .section-title {
|
|
|
font-size: clamp(62px,7vw,104px);
|
|
|
line-height: .9;
|
|
|
}
|
|
|
.timeline {
|
|
|
gap: 0;
|
|
|
padding: 0;
|
|
|
overflow: hidden;
|
|
|
color: #fff;
|
|
|
background:
|
|
|
radial-gradient(ellipse 42% 110% at 5% 18%,rgba(92,220,255,.34) 0%,rgba(34,170,235,.18) 46%,transparent 76%),
|
|
|
radial-gradient(ellipse 44% 120% at 73% 8%,rgba(172,241,255,.24) 0%,rgba(68,202,240,.14) 44%,transparent 74%),
|
|
|
radial-gradient(ellipse 56% 100% at 54% 100%,rgba(16,174,230,.30) 0%,rgba(4,118,190,.12) 54%,transparent 82%),
|
|
|
linear-gradient(112deg,#07548f 0%,#087fba 34%,#079bd1 68%,#0491c8 100%);
|
|
|
border: 0;
|
|
|
border-radius: 0 34px 0 34px;
|
|
|
box-shadow: 0 24px 64px rgba(8,125,180,.22),inset 0 1px rgba(220,251,255,.26);
|
|
|
}
|
|
|
.timeline::before { top: 0; width: 100%; height: 4px; background: linear-gradient(90deg,#087db4,#6cddf5); }
|
|
|
.step {
|
|
|
min-height: 330px;
|
|
|
padding: 42px 34px 38px;
|
|
|
color: #fff;
|
|
|
border-right: 1px solid rgba(255,255,255,.2);
|
|
|
}
|
|
|
.step::before { content: none; }
|
|
|
.step-mark {
|
|
|
width: 20px;
|
|
|
height: 2px;
|
|
|
margin: 0 0 58px;
|
|
|
background: rgba(255,255,255,.82) !important;
|
|
|
font-size: 0;
|
|
|
}
|
|
|
.step h3 { min-height: 62px; color: #fff; font-size: 21px; }
|
|
|
.step p { color: rgba(255,255,255,.72); }
|
|
|
.step p strong { color: #fff !important; }
|
|
|
.step-place { color: rgba(255,255,255,.68); }
|
|
|
|
|
|
.awards {
|
|
|
color: #07192c;
|
|
|
background: #f8fafb;
|
|
|
border-top: 1px solid #dce7eb;
|
|
|
}
|
|
|
.awards::before { content: none; }
|
|
|
.awards::after { content: "VALUE"; right: -18px; bottom: -80px; color: rgba(0,148,220,.035); font-size: clamp(180px,30vw,440px); }
|
|
|
.awards-layout {
|
|
|
grid-template-columns: minmax(330px,.78fr) minmax(0,1.35fr);
|
|
|
gap: clamp(64px,9vw,148px);
|
|
|
min-height: 0;
|
|
|
padding: 126px 0 132px;
|
|
|
}
|
|
|
.awards .section-head {
|
|
|
grid-column: 1;
|
|
|
grid-row: 1;
|
|
|
align-self: start;
|
|
|
position: sticky;
|
|
|
top: 42px;
|
|
|
display: block;
|
|
|
margin: 0;
|
|
|
}
|
|
|
.awards .section-head::before { color: #078fc8; }
|
|
|
.awards .section-title { max-width: 520px; color: #07192c; font-size: clamp(54px,5.8vw,82px); }
|
|
|
.awards-summary { margin-top: 34px; color: #587181; }
|
|
|
.awards-note { color: #078fc8; }
|
|
|
.award-grid {
|
|
|
grid-column: 2;
|
|
|
grid-row: 1;
|
|
|
display: block;
|
|
|
border: 0;
|
|
|
border-top: 1px solid #9bbbc8;
|
|
|
}
|
|
|
.award-card,.award-card:nth-child(odd) {
|
|
|
display: grid;
|
|
|
grid-template-columns: minmax(150px,.75fr) minmax(210px,1fr);
|
|
|
gap: 36px;
|
|
|
min-height: 0;
|
|
|
padding: 34px 8px 38px;
|
|
|
color: #07192c;
|
|
|
background: transparent;
|
|
|
border: 0;
|
|
|
border-bottom: 1px solid #cbdbe1;
|
|
|
}
|
|
|
.award-card small { grid-column: 1; color: #63808f; }
|
|
|
.award-card small span { display: block; margin-bottom: 28px; color: #0094dc; font-size: 13px; }
|
|
|
.award-card h3 { grid-column: 1; margin: -2px 0 0; color: #07192c; font-size: clamp(22px,2vw,29px); }
|
|
|
.award-card p { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; color: #587181; }
|
|
|
.award-card::after { display: none; }
|
|
|
.award-card:hover { background: rgba(0,148,220,.025); }
|
|
|
.site-footer { padding: 0; color: rgba(255,255,255,.82); background: #0094dc; border: 0; border-radius: 0; box-shadow: none; }
|
|
|
.footer-inner { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 32px; }
|
|
|
.footer-brand { color: rgba(255,255,255,.88); font-size: 12px; font-weight: 400; letter-spacing: .02em; }
|
|
|
.footer-brand::before { content: none; }
|
|
|
.footer-meta { color: rgba(255,255,255,.78); font-size: 12px; }
|
|
|
|
|
|
@media (max-width: 680px) {
|
|
|
.footer-inner { min-height: 86px; flex-direction: column; justify-content: center; gap: 6px; text-align: center; }
|
|
|
.footer-brand,.footer-meta { font-size: 11px; }
|
|
|
}
|
|
|
|
|
|
@media (max-width: 980px) {
|
|
|
.audience-tracks-layout .tracks-index::before { height: 200px; }
|
|
|
.audience-tracks-layout .tracks .section-head { grid-template-columns: 1fr !important; gap: 28px !important; }
|
|
|
.audience-tracks-layout .tracks .section-head > p { max-width: 520px; }
|
|
|
.audience-tracks-layout .tracks .track-grid { grid-template-columns: repeat(2,1fr); }
|
|
|
.audience-tracks-layout .tracks .track-card:nth-child(2) { border-right: 0; }
|
|
|
.audience-tracks-layout .tracks .track-card:nth-child(-n+2) { border-bottom: 1px solid rgba(124,208,233,.14); }
|
|
|
.roadmap .section-head { grid-template-columns: 1fr; gap: 34px; }
|
|
|
.timeline { grid-template-columns: repeat(2,1fr); }
|
|
|
.step { border-bottom: 1px solid rgba(145,205,225,.16); }
|
|
|
.awards-layout { grid-template-columns: 1fr; gap: 60px; }
|
|
|
.awards .section-head,.award-grid { grid-column: 1; }
|
|
|
.awards .section-head { position: static; }
|
|
|
.award-grid { grid-row: 2; }
|
|
|
}
|
|
|
@media (max-width: 680px) {
|
|
|
.audience-tracks-layout .tracks-index::before { height: 225px; }
|
|
|
.audience-tracks-layout .tracks .wrap { padding: 70px 0 78px; }
|
|
|
.audience-tracks-layout .tracks-index { margin-bottom: 42px; }
|
|
|
.audience-tracks-layout .tracks .section-title { font-size: clamp(44px,13vw,62px); }
|
|
|
.audience-tracks-layout .tracks .section-head > p { padding-left: 18px; }
|
|
|
.audience-tracks-layout .tracks .section-head > p::before { height: 16px; }
|
|
|
.audience-tracks-layout .tracks .track-grid { grid-template-columns: 1fr; padding-top: 34px; border-radius: 0 20px 0 20px; }
|
|
|
.audience-tracks-layout .tracks .track-grid::before { top: 34px; }
|
|
|
.audience-tracks-layout .tracks .track-card,
|
|
|
.audience-tracks-layout .tracks .track-card:nth-child(n),
|
|
|
.audience-tracks-layout .tracks .track-card:nth-child(even) { min-height: 208px; padding: 62px 24px 28px; border-right: 0; border-bottom: 1px solid rgba(124,208,233,.14); }
|
|
|
.audience-tracks-layout .tracks .track-card:last-child { border-bottom: 0; }
|
|
|
.audience-tracks-layout .tracks .track-card::before { top: 29px; left: 24px; }
|
|
|
.roadmap { padding: 76px 0 82px; }
|
|
|
.timeline { grid-template-columns: 1fr; border-radius: 0 22px 0 22px; }
|
|
|
.step,.step:nth-child(n+3) { min-height: 0; padding: 34px 28px 38px; border-bottom-color: rgba(145,205,225,.16); }
|
|
|
.step-mark { position: static; margin: 0 0 30px; font-size: 12px; }
|
|
|
.step h3 { min-height: 0; }
|
|
|
.awards-layout { padding: 78px 0 84px; }
|
|
|
.award-card,.award-card:nth-child(odd) { grid-template-columns: 1fr; gap: 14px; padding: 28px 0 32px; }
|
|
|
.award-card small,.award-card h3,.award-card p { grid-column: 1; grid-row: auto; }
|
|
|
.award-card small span { display: inline; margin-right: 12px; }
|
|
|
}
|
|
|
/* Keep the three primary section headlines typographically aligned with
|
|
|
the audience-stage heading “初创期（天使期）”. */
|
|
|
.audience-tracks-layout .tracks .section-title,
|
|
|
.roadmap .section-title,
|
|
|
.awards .section-title {
|
|
|
font-family: "Songti SC","STSong","Noto Serif CJK SC",serif;
|
|
|
font-size: clamp(42px,3.8vw,58px);
|
|
|
font-weight: 650;
|
|
|
}
|
|
|
/* Keep the paired section labels typographically identical while their
|
|
|
orientation and colors remain specific to each section. */
|
|
|
.audience-index strong,
|
|
|
.audience-tracks-layout .tracks-index strong {
|
|
|
font-family: var(--font-sans);
|
|
|
font-size: 15px;
|
|
|
font-weight: 780;
|
|
|
line-height: 1.25;
|
|
|
}
|
|
|
/* Lift the track label clearly above the short rule. `top` is used here
|
|
|
because this label is laid out by the index rail's flex alignment. */
|
|
|
.audience-tracks-layout .tracks-index strong {
|
|
|
position: relative;
|
|
|
top: -2px;
|
|
|
}
|
|
|
@media (max-width: 680px) {
|
|
|
.audience-tracks-layout .tracks .section-title,
|
|
|
.roadmap .section-title,
|
|
|
.awards .section-title {
|
|
|
font-size: clamp(38px,11.8vw,50px);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 2026-08-18 below-fold colour pass: carry the approved hero's indigo,
|
|
|
cyan light and restrained magenta energy through the whole story. */
|
|
|
:root {
|
|
|
--hero-indigo: #070d5a;
|
|
|
--hero-deep: #041346;
|
|
|
--hero-night: #020a2b;
|
|
|
--hero-cyan: #42c8f2;
|
|
|
--hero-cyan-soft: #9beaff;
|
|
|
--hero-magenta: #cf32d8;
|
|
|
--hero-copy: #f5fbff;
|
|
|
--hero-muted: #b7cde2;
|
|
|
--hero-line: rgba(126,218,247,.24);
|
|
|
}
|
|
|
.audience-tracks-layout {
|
|
|
color: var(--hero-copy);
|
|
|
background:
|
|
|
radial-gradient(ellipse 48% 30% at 8% 8%,rgba(31,112,220,.34),transparent 72%),
|
|
|
radial-gradient(ellipse 44% 34% at 92% 29%,rgba(207,50,216,.12),transparent 68%),
|
|
|
linear-gradient(180deg,#07145b 0%,#06164f 34%,#04143f 66%,#03102f 100%) !important;
|
|
|
}
|
|
|
.audience-tracks-layout::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
inset: 0;
|
|
|
pointer-events: none;
|
|
|
background:
|
|
|
linear-gradient(112deg,transparent 0 44%,rgba(82,202,244,.08) 50%,transparent 57%),
|
|
|
repeating-linear-gradient(90deg,transparent 0 159px,rgba(119,205,239,.035) 160px);
|
|
|
}
|
|
|
.audience-tracks-layout .audience,
|
|
|
.audience-tracks-layout .tracks { color: var(--hero-copy); background: transparent !important; }
|
|
|
.audience-tracks-layout .audience-index { border-right-color: var(--hero-line); }
|
|
|
.audience-tracks-layout .audience-index::before { background: linear-gradient(90deg,var(--hero-magenta),var(--hero-cyan)); }
|
|
|
.audience-index strong,
|
|
|
.audience-tracks-layout .tracks-index strong,
|
|
|
.audience-tracks-layout .audience-stage .stage-main,
|
|
|
.audience-tracks-layout .audience-type strong { color: var(--hero-copy) !important; }
|
|
|
.audience-index span,
|
|
|
.audience-tracks-layout .tracks-index span { color: rgba(196,225,245,.62) !important; }
|
|
|
.audience-tracks-layout .audience-card {
|
|
|
background: linear-gradient(135deg,rgba(22,50,111,.7),rgba(5,24,66,.8)) !important;
|
|
|
border: 1px solid rgba(131,220,248,.22) !important;
|
|
|
box-shadow: 0 28px 80px rgba(0,3,28,.34),inset 0 1px rgba(255,255,255,.07) !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-focus::after,
|
|
|
.audience-tracks-layout .audience-types { border-color: var(--hero-line) !important; }
|
|
|
.audience-eyebrow { background: linear-gradient(90deg,#77108f,#a91eb4) !important; box-shadow: 0 8px 28px rgba(135,22,151,.22); }
|
|
|
.audience-tracks-layout .audience-stage .stage-sub,
|
|
|
.audience-tracks-layout .audience-type > span { color: var(--hero-cyan-soft) !important; }
|
|
|
.audience-tracks-layout .audience-detail > p { color: var(--hero-muted) !important; }
|
|
|
.audience-tracks-layout .audience-type small { color: rgba(181,211,231,.55) !important; }
|
|
|
.audience-tracks-layout .audience-type,
|
|
|
.audience-tracks-layout .audience-type + .audience-type { border-color: var(--hero-line) !important; }
|
|
|
.audience-tracks-layout .audience-type:hover { background: rgba(67,194,239,.07) !important; }
|
|
|
.audience-tracks-layout .tracks {
|
|
|
background:
|
|
|
radial-gradient(ellipse 58% 96% at 4% 18%,rgba(26,105,220,.58) 0%,rgba(18,66,174,.26) 42%,transparent 72%),
|
|
|
radial-gradient(ellipse 46% 84% at 96% 46%,rgba(207,50,216,.30) 0%,rgba(112,35,171,.18) 44%,transparent 74%),
|
|
|
radial-gradient(ellipse 38% 52% at 54% 4%,rgba(66,200,242,.22) 0%,transparent 70%),
|
|
|
linear-gradient(118deg,#070d5a 0%,#071b70 38%,#09155f 67%,#270f66 100%) !important;
|
|
|
border-top: 1px solid rgba(127,217,247,.16);
|
|
|
border-bottom: 1px solid rgba(127,217,247,.16);
|
|
|
}
|
|
|
.audience-tracks-layout .tracks .track-card::before { color: var(--hero-cyan-soft); background: #091e62; }
|
|
|
.audience-tracks-layout .tracks .track-grid { background: linear-gradient(180deg,rgba(27,65,135,.34),rgba(4,19,60,.4)); border-color: rgba(131,220,248,.28); }
|
|
|
|
|
|
.roadmap {
|
|
|
color: var(--hero-copy);
|
|
|
background:
|
|
|
radial-gradient(ellipse 48% 72% at 12% 8%,rgba(41,115,220,.3),transparent 72%),
|
|
|
radial-gradient(ellipse 42% 74% at 88% 92%,rgba(207,50,216,.12),transparent 74%),
|
|
|
linear-gradient(180deg,#061544 0%,#041137 100%) !important;
|
|
|
border-top-color: rgba(126,218,247,.18) !important;
|
|
|
}
|
|
|
.roadmap::before { opacity: .34; filter: saturate(1.3) hue-rotate(8deg); }
|
|
|
.roadmap .section-title { color: var(--hero-copy) !important; }
|
|
|
.roadmap-intro { color: var(--hero-muted) !important; }
|
|
|
.roadmap-intro strong { color: var(--hero-cyan-soft) !important; }
|
|
|
.timeline {
|
|
|
background:
|
|
|
radial-gradient(ellipse 46% 120% at 5% 18%,rgba(81,210,247,.26),transparent 72%),
|
|
|
radial-gradient(ellipse 42% 120% at 92% 20%,rgba(208,55,219,.2),transparent 76%),
|
|
|
linear-gradient(112deg,#092174 0%,#0a3f91 48%,#173e97 72%,#5d207f 100%) !important;
|
|
|
box-shadow: 0 28px 80px rgba(0,3,28,.38),inset 0 1px rgba(220,251,255,.2) !important;
|
|
|
}
|
|
|
.timeline::before { background: linear-gradient(90deg,var(--hero-cyan),#7ce9f7 62%,var(--hero-magenta)) !important; }
|
|
|
|
|
|
.awards {
|
|
|
color: var(--hero-copy) !important;
|
|
|
background:
|
|
|
radial-gradient(ellipse 44% 76% at 86% 20%,rgba(37,116,222,.28),transparent 72%),
|
|
|
radial-gradient(ellipse 36% 62% at 12% 88%,rgba(207,50,216,.1),transparent 74%),
|
|
|
linear-gradient(180deg,#041137 0%,#030d2d 100%) !important;
|
|
|
border-top-color: rgba(126,218,247,.18) !important;
|
|
|
}
|
|
|
.awards .section-title,
|
|
|
.award-card h3 { color: var(--hero-copy) !important; }
|
|
|
.awards .section-head::before,
|
|
|
.awards-note,
|
|
|
.award-card small span { color: var(--hero-cyan-soft) !important; }
|
|
|
.awards-summary,
|
|
|
.award-card p,
|
|
|
.award-card small { color: var(--hero-muted) !important; }
|
|
|
.award-card:nth-child(odd)::before,
|
|
|
.award-card:nth-child(-n+2)::after { background: linear-gradient(180deg,transparent,rgba(103,211,245,.3),rgba(207,50,216,.22),transparent) !important; }
|
|
|
.award-card:nth-child(-n+2)::after { background: linear-gradient(90deg,transparent,rgba(103,211,245,.3),rgba(207,50,216,.22),transparent) !important; }
|
|
|
.award-card:hover,
|
|
|
.award-card:focus-visible,
|
|
|
.award-card.is-active { background: rgba(52,151,222,.1) !important; box-shadow: inset 3px 0 0 var(--hero-magenta) !important; }
|
|
|
.award-card:hover h3,
|
|
|
.award-card:focus-visible h3,
|
|
|
.award-card.is-active h3 { color: #b9f2ff !important; }
|
|
|
.site-footer { background: linear-gradient(90deg,#020a28,#071654 58%,#25104d) !important; border-top: 1px solid rgba(126,218,247,.18) !important; }
|
|
|
|
|
|
/* Match the existing roadmap circle to the approved airy blue palette.
|
|
|
Geometry intentionally remains inherited and unchanged. */
|
|
|
.roadmap::before {
|
|
|
background: linear-gradient(
|
|
|
155deg,
|
|
|
rgba(83,166,226,.86) 0%,
|
|
|
rgba(123,192,230,.72) 48%,
|
|
|
rgba(190,228,238,.60) 100%
|
|
|
);
|
|
|
}
|
|
|
|
|
|
/* Tighten the resource accelerator into one compact, connected block. */
|
|
|
.awards-layout {
|
|
|
grid-template-columns: minmax(300px,.82fr) minmax(0,1.52fr);
|
|
|
gap: clamp(42px,5.2vw,82px);
|
|
|
padding: 92px 0 98px;
|
|
|
}
|
|
|
.awards .section-head { top: 30px; }
|
|
|
.awards .section-head::before { margin-bottom: 24px; }
|
|
|
.awards .section-title {
|
|
|
max-width: 440px;
|
|
|
font-size: clamp(50px,5.25vw,74px);
|
|
|
line-height: .98;
|
|
|
}
|
|
|
.awards-summary {
|
|
|
max-width: 390px;
|
|
|
margin-top: 24px;
|
|
|
line-height: 1.75;
|
|
|
}
|
|
|
.awards-note { margin-top: 34px; }
|
|
|
.award-card,
|
|
|
.award-card:nth-child(odd) {
|
|
|
grid-template-columns: minmax(176px,.72fr) minmax(230px,1.28fr);
|
|
|
gap: 24px;
|
|
|
padding: 25px 8px 27px;
|
|
|
}
|
|
|
.award-card small {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
min-height: 20px;
|
|
|
}
|
|
|
.award-card small span {
|
|
|
display: inline-block;
|
|
|
margin: 0 12px 0 0;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
.award-card h3 { margin-top: 8px; }
|
|
|
.award-card p { line-height: 1.68; }
|
|
|
|
|
|
@media (max-width: 980px) {
|
|
|
.awards-layout { gap: 42px; padding: 84px 0 90px; }
|
|
|
}
|
|
|
@media (max-width: 680px) {
|
|
|
.awards-layout { gap: 38px; padding: 68px 0 72px; }
|
|
|
.awards .section-head::before { margin-bottom: 18px; }
|
|
|
.awards-summary { margin-top: 20px; }
|
|
|
.awards-note { margin-top: 26px; }
|
|
|
.award-card,
|
|
|
.award-card:nth-child(odd) {
|
|
|
grid-template-columns: 1fr;
|
|
|
gap: 8px;
|
|
|
padding: 23px 0 25px;
|
|
|
}
|
|
|
.award-card h3 { margin: 6px 0 4px; }
|
|
|
}
|
|
|
|
|
|
/* Compact 2×2 benefit matrix: keep the editorial intro, remove the long
|
|
|
spreadsheet-like rows, and bring every support outcome into one view. */
|
|
|
.awards-layout {
|
|
|
grid-template-columns: minmax(270px,.68fr) minmax(0,1.55fr);
|
|
|
gap: clamp(44px,5.5vw,86px);
|
|
|
padding: 78px 0 84px;
|
|
|
}
|
|
|
.awards .section-head { top: 24px; }
|
|
|
.awards .section-head::before { margin-bottom: 18px; }
|
|
|
.awards .section-title {
|
|
|
max-width: 360px;
|
|
|
font-size: clamp(46px,4.5vw,64px);
|
|
|
line-height: 1.02;
|
|
|
}
|
|
|
.awards-summary {
|
|
|
max-width: 330px;
|
|
|
margin-top: 20px;
|
|
|
font-size: 14px;
|
|
|
line-height: 1.7;
|
|
|
}
|
|
|
.awards-note { margin-top: 26px; }
|
|
|
.award-grid {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(2,minmax(0,1fr));
|
|
|
align-self: center;
|
|
|
border: 0;
|
|
|
}
|
|
|
.award-card,
|
|
|
.award-card:nth-child(odd) {
|
|
|
display: flex;
|
|
|
min-height: 230px;
|
|
|
padding: 28px 30px 30px;
|
|
|
gap: 0;
|
|
|
align-items: flex-start;
|
|
|
border: 0;
|
|
|
}
|
|
|
.award-card:nth-child(odd)::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
top: 9%;
|
|
|
right: 0;
|
|
|
bottom: 9%;
|
|
|
left: auto;
|
|
|
width: 1px;
|
|
|
height: auto;
|
|
|
background: linear-gradient(180deg,transparent 0%,rgba(0,148,220,.3) 18%,rgba(91,154,180,.34) 50%,rgba(0,148,220,.3) 82%,transparent 100%);
|
|
|
border: 0;
|
|
|
border-radius: 0;
|
|
|
box-shadow: none;
|
|
|
transform: none;
|
|
|
}
|
|
|
.award-card:nth-child(-n+2)::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
right: 7%;
|
|
|
bottom: 0;
|
|
|
left: 7%;
|
|
|
display: block;
|
|
|
width: auto;
|
|
|
height: 1px;
|
|
|
border-radius: 0;
|
|
|
background: linear-gradient(90deg,transparent 0%,rgba(0,148,220,.3) 18%,rgba(91,154,180,.34) 50%,rgba(0,148,220,.3) 82%,transparent 100%);
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
.award-card small {
|
|
|
display: flex;
|
|
|
min-height: auto;
|
|
|
align-items: baseline;
|
|
|
color: #5d7888;
|
|
|
font-size: 12px;
|
|
|
letter-spacing: .05em;
|
|
|
}
|
|
|
.award-card small span {
|
|
|
margin: 0 12px 0 0;
|
|
|
color: #0094dc;
|
|
|
font-size: 12px;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
.award-card h3 {
|
|
|
margin: 30px 0 13px;
|
|
|
font-size: clamp(21px,1.72vw,27px);
|
|
|
line-height: 1.22;
|
|
|
}
|
|
|
.award-card p {
|
|
|
max-width: none;
|
|
|
margin: 0;
|
|
|
font-size: 12.5px;
|
|
|
line-height: 1.66;
|
|
|
}
|
|
|
.award-card:hover {
|
|
|
background: rgba(0,148,220,.035);
|
|
|
transform: translateY(-2px);
|
|
|
}
|
|
|
|
|
|
/* Interaction polish: each benefit remains calm at rest, then gains a
|
|
|
clear reading focus for pointer, keyboard and scroll entry. */
|
|
|
.award-card {
|
|
|
border-radius: 2px;
|
|
|
cursor: default;
|
|
|
outline: none;
|
|
|
transition: background-color .28s var(--ease), box-shadow .28s var(--ease), opacity .46s var(--ease), transform .46s var(--ease);
|
|
|
}
|
|
|
.award-card h3,
|
|
|
.award-card small span {
|
|
|
transition: color .28s var(--ease), transform .28s var(--ease);
|
|
|
}
|
|
|
.award-card:hover,
|
|
|
.award-card:focus-visible,
|
|
|
.award-card.is-active {
|
|
|
z-index: 2;
|
|
|
background: rgba(0,148,220,.055);
|
|
|
box-shadow: inset 3px 0 0 rgba(0,148,220,.72);
|
|
|
transform: translateY(-3px);
|
|
|
}
|
|
|
.award-card:hover h3,
|
|
|
.award-card:focus-visible h3,
|
|
|
.award-card.is-active h3 { color: #007fbd; }
|
|
|
.award-card:hover small span,
|
|
|
.award-card:focus-visible small span,
|
|
|
.award-card.is-active small span { transform: translateX(3px); }
|
|
|
.awards.is-ready .award-card:not(.is-revealed) {
|
|
|
opacity: 0;
|
|
|
transform: translateY(18px);
|
|
|
}
|
|
|
.awards.is-ready .award-card.is-revealed { opacity: 1; }
|
|
|
|
|
|
@media (max-width: 980px) {
|
|
|
.awards-layout { gap: 38px; padding: 72px 0 78px; }
|
|
|
.awards .section-title { max-width: 520px; }
|
|
|
.award-grid { grid-row: 2; }
|
|
|
}
|
|
|
@media (max-width: 680px) {
|
|
|
.awards-layout { gap: 32px; padding: 58px 0 64px; }
|
|
|
.awards .section-title { max-width: 330px; }
|
|
|
.awards-summary { max-width: 320px; margin-top: 16px; }
|
|
|
.awards-note { margin-top: 20px; }
|
|
|
.award-grid { grid-template-columns: 1fr; }
|
|
|
.award-card,
|
|
|
.award-card:nth-child(odd) {
|
|
|
min-height: 0;
|
|
|
padding: 24px 22px 26px;
|
|
|
}
|
|
|
.award-card:nth-child(odd)::before { content: none; }
|
|
|
.award-card:nth-child(-n+2)::after,
|
|
|
.award-card:nth-child(3)::after {
|
|
|
content: "";
|
|
|
right: 8%;
|
|
|
bottom: 0;
|
|
|
left: 8%;
|
|
|
display: block;
|
|
|
width: auto;
|
|
|
height: 1px;
|
|
|
background: linear-gradient(90deg,transparent 0%,rgba(0,148,220,.3) 20%,rgba(91,154,180,.34) 50%,rgba(0,148,220,.3) 80%,transparent 100%);
|
|
|
}
|
|
|
.award-card:last-child::after { content: none; }
|
|
|
.award-card h3 { margin: 18px 0 9px; font-size: 22px; }
|
|
|
.award-card p { font-size: 12.5px; }
|
|
|
.award-card:hover,
|
|
|
.award-card:focus-visible,
|
|
|
.award-card.is-active {
|
|
|
box-shadow: inset 2px 0 0 rgba(0,148,220,.72);
|
|
|
transform: translateX(2px);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* Final colour seal — keep the hero-derived palette above later layout
|
|
|
refinements without changing their geometry or responsive behaviour. */
|
|
|
.awards { color: var(--hero-copy) !important; }
|
|
|
.awards .section-title,
|
|
|
.award-card h3 { color: var(--hero-copy) !important; }
|
|
|
.awards .section-head::before,
|
|
|
.awards-note,
|
|
|
.award-card small span { color: var(--hero-cyan-soft) !important; }
|
|
|
.awards-summary,
|
|
|
.award-card p,
|
|
|
.award-card small { color: var(--hero-muted) !important; }
|
|
|
.award-card:nth-child(odd)::before { background: linear-gradient(180deg,transparent,rgba(103,211,245,.3),rgba(207,50,216,.22),transparent) !important; }
|
|
|
.award-card:nth-child(-n+2)::after,
|
|
|
.award-card:nth-child(3)::after { background: linear-gradient(90deg,transparent,rgba(103,211,245,.3),rgba(207,50,216,.22),transparent) !important; }
|
|
|
.award-card:hover,
|
|
|
.award-card:focus-visible,
|
|
|
.award-card.is-active { background: rgba(52,151,222,.1) !important; box-shadow: inset 3px 0 0 var(--hero-magenta) !important; }
|
|
|
.award-card:hover h3,
|
|
|
.award-card:focus-visible h3,
|
|
|
.award-card.is-active h3 { color: #b9f2ff !important; }
|
|
|
|
|
|
/* 2026-08-18 airy below-fold palette. The hero remains untouched; the
|
|
|
following sections borrow its cyan/indigo/magenta as light atmospheric
|
|
|
tints instead of repeating the hero's full dark value. */
|
|
|
.audience-tracks-layout {
|
|
|
color: var(--ink);
|
|
|
background:
|
|
|
radial-gradient(ellipse 52% 24% at 4% 7%,rgba(76,184,242,.14),transparent 74%),
|
|
|
radial-gradient(ellipse 44% 28% at 96% 38%,rgba(177,116,231,.09),transparent 72%),
|
|
|
linear-gradient(180deg,#f8fbff 0%,#f1f7fd 46%,#edf4fb 100%) !important;
|
|
|
}
|
|
|
.audience-tracks-layout::after {
|
|
|
opacity: .42;
|
|
|
background:
|
|
|
linear-gradient(112deg,transparent 0 44%,rgba(69,185,230,.08) 50%,transparent 57%),
|
|
|
repeating-linear-gradient(90deg,transparent 0 159px,rgba(39,126,177,.035) 160px);
|
|
|
}
|
|
|
.audience-tracks-layout .audience {
|
|
|
color: var(--ink);
|
|
|
background: linear-gradient(180deg,rgba(255,255,255,.76),rgba(248,251,255,.4)) !important;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks {
|
|
|
color: var(--ink);
|
|
|
background:
|
|
|
radial-gradient(ellipse 38% 72% at 7% 40%,rgba(62,174,232,.12),transparent 74%),
|
|
|
radial-gradient(ellipse 36% 68% at 94% 58%,rgba(186,104,222,.08),transparent 76%),
|
|
|
linear-gradient(180deg,#edf5fc 0%,#f6f9ff 100%) !important;
|
|
|
border-color: rgba(70,151,194,.12) !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-index { border-right-color: rgba(39,126,177,.2); }
|
|
|
.audience-index strong,
|
|
|
.audience-tracks-layout .tracks-index strong,
|
|
|
.audience-tracks-layout .audience-stage .stage-main,
|
|
|
.audience-tracks-layout .audience-type strong { color: #102d4c !important; }
|
|
|
.audience-index span,
|
|
|
.audience-tracks-layout .tracks-index span { color: rgba(47,91,127,.58) !important; }
|
|
|
.audience-tracks-layout .audience-card {
|
|
|
background: rgba(255,255,255,.74) !important;
|
|
|
border-color: rgba(75,162,205,.2) !important;
|
|
|
box-shadow: 0 24px 68px rgba(43,97,139,.1),inset 0 1px rgba(255,255,255,.9) !important;
|
|
|
backdrop-filter: blur(14px);
|
|
|
}
|
|
|
.audience-tracks-layout .audience-focus::after,
|
|
|
.audience-tracks-layout .audience-types { border-color: rgba(44,137,183,.17) !important; }
|
|
|
.audience-tracks-layout .audience-stage .stage-sub,
|
|
|
.audience-tracks-layout .audience-type > span { color: #087fb7 !important; }
|
|
|
.audience-tracks-layout .audience-detail > p { color: #526f82 !important; }
|
|
|
.audience-tracks-layout .audience-type small { color: rgba(48,91,121,.55) !important; }
|
|
|
.audience-tracks-layout .audience-type,
|
|
|
.audience-tracks-layout .audience-type + .audience-type { border-color: rgba(44,137,183,.14) !important; }
|
|
|
.audience-tracks-layout .audience-type:hover { background: rgba(66,200,242,.09) !important; }
|
|
|
.audience-tracks-layout .tracks .section-title,
|
|
|
.audience-tracks-layout .tracks .section-lead,
|
|
|
.audience-tracks-layout .tracks .track-card h3 { color: #102d4c !important; }
|
|
|
.audience-tracks-layout .tracks .tracks-kicker,
|
|
|
.audience-tracks-layout .tracks .track-card p { color: #547086 !important; }
|
|
|
.audience-tracks-layout .tracks .track-card::before { color: #087fb7; background: #e1f3fb; }
|
|
|
.audience-tracks-layout .tracks .track-grid {
|
|
|
background: rgba(255,255,255,.56);
|
|
|
border-color: rgba(54,145,190,.18);
|
|
|
box-shadow: 0 20px 56px rgba(43,97,139,.08);
|
|
|
}
|
|
|
|
|
|
.roadmap {
|
|
|
color: #102d4c;
|
|
|
background:
|
|
|
radial-gradient(ellipse 46% 62% at 10% 8%,rgba(71,178,235,.12),transparent 74%),
|
|
|
radial-gradient(ellipse 38% 66% at 91% 92%,rgba(189,106,224,.08),transparent 76%),
|
|
|
linear-gradient(180deg,#fbfdff 0%,#f3f7fd 100%) !important;
|
|
|
border-top-color: rgba(70,151,194,.12) !important;
|
|
|
}
|
|
|
.roadmap::before { opacity: .18; filter: saturate(.9); }
|
|
|
.roadmap .section-title { color: #102d4c !important; }
|
|
|
.roadmap-intro { color: #587286 !important; }
|
|
|
.roadmap-intro strong { color: #087fb7 !important; }
|
|
|
.timeline {
|
|
|
background:
|
|
|
radial-gradient(ellipse 46% 120% at 5% 18%,rgba(81,210,247,.2),transparent 72%),
|
|
|
radial-gradient(ellipse 42% 120% at 92% 20%,rgba(208,55,219,.14),transparent 76%),
|
|
|
linear-gradient(112deg,#0b2875 0%,#0d4d9a 52%,#49317f 100%) !important;
|
|
|
box-shadow: 0 24px 64px rgba(23,58,112,.2),inset 0 1px rgba(220,251,255,.24) !important;
|
|
|
}
|
|
|
|
|
|
.awards {
|
|
|
color: #102d4c !important;
|
|
|
background:
|
|
|
radial-gradient(ellipse 42% 70% at 88% 18%,rgba(66,183,239,.12),transparent 74%),
|
|
|
radial-gradient(ellipse 34% 58% at 10% 88%,rgba(193,104,224,.07),transparent 76%),
|
|
|
linear-gradient(180deg,#edf3fb 0%,#f9fbff 100%) !important;
|
|
|
border-top-color: rgba(70,151,194,.12) !important;
|
|
|
}
|
|
|
.awards .section-title,
|
|
|
.award-card h3 { color: #102d4c !important; }
|
|
|
.awards .section-head::before,
|
|
|
.awards-note,
|
|
|
.award-card small span { color: #087fb7 !important; }
|
|
|
.awards-summary,
|
|
|
.award-card p,
|
|
|
.award-card small { color: #587286 !important; }
|
|
|
.award-card:nth-child(odd)::before { background: linear-gradient(180deg,transparent,rgba(54,160,207,.24),rgba(174,104,205,.16),transparent) !important; }
|
|
|
.award-card:nth-child(-n+2)::after,
|
|
|
.award-card:nth-child(3)::after { background: linear-gradient(90deg,transparent,rgba(54,160,207,.24),rgba(174,104,205,.16),transparent) !important; }
|
|
|
.award-card:hover,
|
|
|
.award-card:focus-visible,
|
|
|
.award-card.is-active { background: rgba(255,255,255,.68) !important; box-shadow: inset 3px 0 0 #b04dca,0 12px 34px rgba(43,97,139,.08) !important; }
|
|
|
.award-card:hover h3,
|
|
|
.award-card:focus-visible h3,
|
|
|
.award-card.is-active h3 { color: #087fb7 !important; }
|
|
|
.site-footer {
|
|
|
background: linear-gradient(90deg,#061333,#0b245c 58%,#25184f) !important;
|
|
|
border-top: 0 !important;
|
|
|
}
|
|
|
.site-footer::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
z-index: 1;
|
|
|
top: 0;
|
|
|
right: 0;
|
|
|
left: 0;
|
|
|
height: 1px;
|
|
|
background: linear-gradient(90deg,rgba(202,93,238,.48) 0%,rgba(91,220,255,.62) 34%,rgba(99,174,255,.52) 62%,rgba(202,93,238,.48) 86%,rgba(202,93,238,.08) 100%);
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
|
|
|
/* Rebalance the page vertically: keep the reading sections open, then
|
|
|
restore visual weight progressively toward the closing sections. */
|
|
|
.audience-tracks-layout {
|
|
|
background:
|
|
|
radial-gradient(ellipse 52% 24% at 4% 7%,rgba(76,184,242,.15),transparent 74%),
|
|
|
radial-gradient(ellipse 44% 28% at 96% 38%,rgba(177,116,231,.1),transparent 72%),
|
|
|
linear-gradient(180deg,#f8fbff 0%,#edf5fc 42%,#e4eef8 100%) !important;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks {
|
|
|
background:
|
|
|
radial-gradient(ellipse 40% 76% at 5% 42%,rgba(48,157,220,.17),transparent 74%),
|
|
|
radial-gradient(ellipse 38% 72% at 96% 58%,rgba(171,89,211,.1),transparent 76%),
|
|
|
linear-gradient(180deg,#e8f2fa 0%,#dceaf6 100%) !important;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks .track-grid {
|
|
|
background: rgba(255,255,255,.64);
|
|
|
box-shadow: 0 24px 62px rgba(35,83,126,.12);
|
|
|
}
|
|
|
|
|
|
.roadmap {
|
|
|
background:
|
|
|
radial-gradient(ellipse 48% 70% at 8% 12%,rgba(53,166,228,.2),transparent 72%),
|
|
|
radial-gradient(ellipse 40% 72% at 92% 88%,rgba(167,83,207,.13),transparent 74%),
|
|
|
linear-gradient(180deg,#dceaf6 0%,#c8daed 100%) !important;
|
|
|
border-top-color: rgba(51,120,168,.16) !important;
|
|
|
}
|
|
|
.roadmap::before { opacity: .26; }
|
|
|
.timeline {
|
|
|
box-shadow: 0 30px 72px rgba(20,49,102,.27),inset 0 1px rgba(220,251,255,.28) !important;
|
|
|
}
|
|
|
|
|
|
.awards {
|
|
|
color: var(--hero-copy) !important;
|
|
|
background:
|
|
|
radial-gradient(ellipse 48% 76% at 90% 16%,rgba(54,151,228,.24),transparent 70%),
|
|
|
radial-gradient(ellipse 38% 64% at 8% 86%,rgba(198,70,211,.12),transparent 74%),
|
|
|
linear-gradient(180deg,#173d78 0%,#0b2459 56%,#071944 100%) !important;
|
|
|
border-top-color: rgba(128,216,247,.2) !important;
|
|
|
}
|
|
|
.awards .section-title,
|
|
|
.award-card h3 { color: var(--hero-copy) !important; }
|
|
|
.awards .section-head::before,
|
|
|
.awards-note,
|
|
|
.award-card small span { color: var(--hero-cyan-soft) !important; }
|
|
|
.awards-summary,
|
|
|
.award-card p,
|
|
|
.award-card small { color: #bfd2e5 !important; }
|
|
|
.award-card:nth-child(odd)::before { background: linear-gradient(180deg,transparent,rgba(103,211,245,.3),rgba(207,50,216,.2),transparent) !important; }
|
|
|
.award-card:nth-child(-n+2)::after,
|
|
|
.award-card:nth-child(3)::after { background: linear-gradient(90deg,transparent,rgba(103,211,245,.3),rgba(207,50,216,.2),transparent) !important; }
|
|
|
.award-card:hover,
|
|
|
.award-card:focus-visible,
|
|
|
.award-card.is-active { background: rgba(64,166,226,.11) !important; box-shadow: inset 3px 0 0 var(--hero-magenta),0 16px 38px rgba(0,7,34,.14) !important; }
|
|
|
.award-card:hover h3,
|
|
|
.award-card:focus-visible h3,
|
|
|
.award-card.is-active h3 { color: #b9f2ff !important; }
|
|
|
|
|
|
/* Give the first two content sections enough visual mass to stand up to
|
|
|
the hero, using layered surfaces rather than another full dark field. */
|
|
|
.audience-tracks-layout .audience {
|
|
|
background:
|
|
|
radial-gradient(circle at 8% 18%,rgba(46,163,226,.18) 0 9%,transparent 27%),
|
|
|
radial-gradient(circle at 91% 82%,rgba(177,85,211,.1) 0 8%,transparent 25%),
|
|
|
linear-gradient(135deg,#edf6fd 0%,#f9fbff 52%,#edf2fb 100%) !important;
|
|
|
border-top: 1px solid rgba(86,177,218,.16);
|
|
|
border-bottom: 1px solid rgba(54,137,183,.16);
|
|
|
}
|
|
|
.audience-tracks-layout .audience::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
z-index: 0;
|
|
|
right: -8%;
|
|
|
bottom: 9%;
|
|
|
width: 42%;
|
|
|
height: 1px;
|
|
|
background: linear-gradient(90deg,transparent,rgba(45,151,205,.3),rgba(179,75,202,.22),transparent);
|
|
|
transform: rotate(-12deg);
|
|
|
}
|
|
|
.audience-tracks-layout .audience-card {
|
|
|
background: linear-gradient(135deg,rgba(255,255,255,.94),rgba(233,245,253,.88)) !important;
|
|
|
border: 1px solid rgba(48,142,190,.28) !important;
|
|
|
box-shadow: 0 30px 76px rgba(31,78,123,.16),inset 0 1px rgba(255,255,255,1) !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-focus {
|
|
|
background:
|
|
|
radial-gradient(circle at 18% 20%,rgba(117,224,255,.28),transparent 36%),
|
|
|
linear-gradient(145deg,#0a83c5 0%,#145aa9 66%,#493a9a 100%) !important;
|
|
|
box-shadow: 18px 0 42px rgba(19,79,143,.14);
|
|
|
}
|
|
|
.audience-tracks-layout .audience-stage .stage-main,
|
|
|
.audience-tracks-layout .audience-focus .stage-sub { color: #fff !important; }
|
|
|
.audience-tracks-layout .audience-type {
|
|
|
background: rgba(223,241,250,.72) !important;
|
|
|
box-shadow: inset 0 0 0 1px rgba(70,157,199,.08);
|
|
|
}
|
|
|
|
|
|
.audience-tracks-layout .tracks {
|
|
|
background:
|
|
|
linear-gradient(112deg,transparent 0 38%,rgba(255,255,255,.42) 49%,transparent 60%),
|
|
|
radial-gradient(ellipse 42% 82% at 4% 42%,rgba(28,140,207,.24),transparent 72%),
|
|
|
radial-gradient(ellipse 38% 76% at 97% 58%,rgba(162,69,201,.14),transparent 74%),
|
|
|
linear-gradient(180deg,#d7e8f5 0%,#cbdff0 100%) !important;
|
|
|
border-top: 1px solid rgba(44,126,174,.2) !important;
|
|
|
border-bottom: 1px solid rgba(44,126,174,.22) !important;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks .track-grid {
|
|
|
background: linear-gradient(145deg,rgba(255,255,255,.88),rgba(234,244,252,.78));
|
|
|
border: 1px solid rgba(43,132,180,.28);
|
|
|
box-shadow: 0 30px 76px rgba(31,78,123,.17),inset 0 1px rgba(255,255,255,.9);
|
|
|
}
|
|
|
.audience-tracks-layout .tracks .track-card {
|
|
|
background: linear-gradient(180deg,rgba(255,255,255,.28),rgba(219,238,249,.2));
|
|
|
transition: background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
|
|
|
}
|
|
|
.audience-tracks-layout .tracks .track-card:hover {
|
|
|
z-index: 2;
|
|
|
background: rgba(255,255,255,.72);
|
|
|
box-shadow: 0 14px 36px rgba(35,87,132,.12);
|
|
|
transform: translateY(-4px);
|
|
|
}
|
|
|
.audience-tracks-layout .tracks .track-card::before {
|
|
|
color: #fff;
|
|
|
background: linear-gradient(135deg,#159dd5,#1766b2 68%,#6241a1);
|
|
|
box-shadow: 0 10px 24px rgba(24,104,173,.2);
|
|
|
}
|
|
|
|
|
|
/* Second composition pass: make section one a crisp editorial light
|
|
|
panel and section two a confident mid-dark technology field. */
|
|
|
.audience-tracks-layout .audience {
|
|
|
background:
|
|
|
linear-gradient(90deg,rgba(14,145,207,.1) 0 1px,transparent 1px) 8% 0 / 160px 100%,
|
|
|
radial-gradient(circle at 3% 50%,rgba(31,167,225,.25),transparent 29%),
|
|
|
radial-gradient(circle at 96% 18%,rgba(134,91,207,.12),transparent 25%),
|
|
|
linear-gradient(135deg,#e2f1fa 0%,#fbfdff 48%,#e8eef8 100%) !important;
|
|
|
border-bottom: 0;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-card {
|
|
|
background: #fff !important;
|
|
|
border: 0 !important;
|
|
|
box-shadow: 0 34px 86px rgba(23,67,111,.2) !important;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-focus {
|
|
|
background:
|
|
|
radial-gradient(circle at 12% 12%,rgba(138,232,255,.38),transparent 34%),
|
|
|
radial-gradient(circle at 92% 90%,rgba(204,64,218,.22),transparent 38%),
|
|
|
linear-gradient(145deg,#078fc9 0%,#1455a5 58%,#4b2f8d 100%) !important;
|
|
|
box-shadow: none;
|
|
|
isolation: isolate;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-focus::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
z-index: -1;
|
|
|
inset: 0;
|
|
|
background: url("assets/generated/hero-photonic-youth-blue-purple-balanced-v7-sharp-trails-4k.png?v=1") 56% 50% / auto 155% no-repeat;
|
|
|
opacity: .24;
|
|
|
filter: saturate(1.08) contrast(1.04);
|
|
|
mix-blend-mode: screen;
|
|
|
-webkit-mask-image: linear-gradient(100deg,transparent 0%,rgba(0,0,0,.38) 28%,#000 62%,rgba(0,0,0,.7) 100%);
|
|
|
mask-image: linear-gradient(100deg,transparent 0%,rgba(0,0,0,.38) 28%,#000 62%,rgba(0,0,0,.7) 100%);
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-detail {
|
|
|
background:
|
|
|
linear-gradient(135deg,rgba(232,246,253,.72),rgba(255,255,255,.98) 54%),
|
|
|
#fff !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type {
|
|
|
background: #d9f2fc !important;
|
|
|
border-left-color: #249fd2 !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type:nth-child(2) { background: #e2eafb !important; border-left-color: #527bc4 !important; }
|
|
|
.audience-tracks-layout .audience-type:nth-child(3) { background: #efe3f8 !important; border-left-color: #9460ba !important; }
|
|
|
|
|
|
.audience-tracks-layout .tracks {
|
|
|
color: var(--hero-copy);
|
|
|
background:
|
|
|
linear-gradient(112deg,transparent 0 42%,rgba(88,211,246,.07) 49%,transparent 57%),
|
|
|
radial-gradient(ellipse 46% 90% at 4% 42%,rgba(31,153,222,.32),transparent 72%),
|
|
|
radial-gradient(ellipse 40% 84% at 98% 60%,rgba(185,61,202,.2),transparent 74%),
|
|
|
linear-gradient(135deg,#123f7d 0%,#092b68 54%,#211e62 100%) !important;
|
|
|
border-color: rgba(130,220,247,.2) !important;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks-index { border-color: rgba(139,218,244,.25) !important; }
|
|
|
.audience-tracks-layout .tracks-index strong,
|
|
|
.audience-tracks-layout .tracks .section-title,
|
|
|
.audience-tracks-layout .tracks .track-card h3 { color: #f5fbff !important; }
|
|
|
.audience-tracks-layout .tracks-index span,
|
|
|
.audience-tracks-layout .tracks .tracks-kicker,
|
|
|
.audience-tracks-layout .tracks .section-head > p,
|
|
|
.audience-tracks-layout .tracks .track-card p { color: #bcd4e7 !important; }
|
|
|
.audience-tracks-layout .tracks .track-grid {
|
|
|
background: linear-gradient(145deg,rgba(25,72,139,.58),rgba(8,30,80,.68));
|
|
|
border: 1px solid rgba(133,220,248,.28);
|
|
|
box-shadow: 0 34px 82px rgba(0,9,42,.3),inset 0 1px rgba(255,255,255,.1);
|
|
|
backdrop-filter: blur(12px);
|
|
|
}
|
|
|
.audience-tracks-layout .tracks .track-card {
|
|
|
background: rgba(255,255,255,.018);
|
|
|
border-color: rgba(139,218,244,.16) !important;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks .track-card:hover {
|
|
|
background: rgba(79,189,231,.12);
|
|
|
box-shadow: inset 0 3px #66dcf5,0 18px 42px rgba(0,9,42,.2);
|
|
|
}
|
|
|
.audience-tracks-layout .tracks .track-card::before {
|
|
|
color: #c2f3ff;
|
|
|
background: rgba(4,27,81,.82);
|
|
|
border: 0;
|
|
|
box-shadow: 0 10px 28px rgba(0,8,40,.28),inset 0 0 18px rgba(62,195,235,.08);
|
|
|
}
|
|
|
|
|
|
/* Hero echoes: orbital rings, photon particles and diagonal light paths.
|
|
|
They sit behind content and reuse the hero's cyan–violet spectrum. */
|
|
|
.audience-tracks-layout .audience .wrap::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
z-index: -1;
|
|
|
top: -76px;
|
|
|
right: 5%;
|
|
|
width: 250px;
|
|
|
height: 250px;
|
|
|
border: 1px solid rgba(25,151,211,.2);
|
|
|
border-radius: 50%;
|
|
|
box-shadow:
|
|
|
0 0 0 34px rgba(36,166,221,.045),
|
|
|
0 0 0 72px rgba(106,91,204,.025),
|
|
|
inset 0 0 48px rgba(62,190,235,.06);
|
|
|
opacity: .9;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
.audience-tracks-layout .audience .wrap::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
z-index: -1;
|
|
|
left: 20%;
|
|
|
bottom: -44px;
|
|
|
width: 54%;
|
|
|
height: 100px;
|
|
|
background:
|
|
|
radial-gradient(circle,rgba(16,137,198,.32) 0 1.2px,transparent 1.8px) 0 0 / 22px 22px,
|
|
|
linear-gradient(168deg,transparent 46%,rgba(29,157,215,.2) 48%,rgba(145,76,196,.14) 50%,transparent 52%);
|
|
|
-webkit-mask-image: linear-gradient(90deg,transparent,#000 18% 82%,transparent);
|
|
|
mask-image: linear-gradient(90deg,transparent,#000 18% 82%,transparent);
|
|
|
opacity: .72;
|
|
|
transform: rotate(-4deg);
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
|
|
|
.audience-tracks-layout .tracks .wrap::before {
|
|
|
content: none;
|
|
|
position: absolute;
|
|
|
z-index: 0;
|
|
|
top: 9%;
|
|
|
left: -9%;
|
|
|
width: 360px;
|
|
|
height: 360px;
|
|
|
border: 1px solid rgba(115,222,249,.2);
|
|
|
border-radius: 50%;
|
|
|
box-shadow:
|
|
|
0 0 0 46px rgba(70,205,242,.035),
|
|
|
0 0 0 92px rgba(180,72,211,.025),
|
|
|
inset 0 0 70px rgba(49,184,230,.06);
|
|
|
opacity: .78;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks .wrap::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
z-index: 0;
|
|
|
top: 13%;
|
|
|
right: -5%;
|
|
|
width: 46%;
|
|
|
height: 44%;
|
|
|
background:
|
|
|
radial-gradient(circle,rgba(139,229,250,.36) 0 1px,transparent 1.7px) 0 0 / 24px 24px,
|
|
|
linear-gradient(154deg,transparent 43%,rgba(82,213,245,.14) 47%,rgba(201,69,213,.12) 50%,transparent 54%);
|
|
|
-webkit-mask-image: radial-gradient(ellipse at center,#000 0 40%,transparent 76%);
|
|
|
mask-image: radial-gradient(ellipse at center,#000 0 40%,transparent 76%);
|
|
|
opacity: .62;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks-index,
|
|
|
.audience-tracks-layout .tracks-content { position: relative; z-index: 1; }
|
|
|
|
|
|
.roadmap::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
z-index: 0;
|
|
|
right: -150px;
|
|
|
bottom: -190px;
|
|
|
width: 430px;
|
|
|
height: 430px;
|
|
|
border: 1px solid rgba(31,134,194,.2);
|
|
|
border-radius: 50%;
|
|
|
background:
|
|
|
radial-gradient(circle at center,transparent 0 52%,rgba(48,161,215,.05) 53% 60%,transparent 61%),
|
|
|
conic-gradient(from 210deg,transparent 0 30%,rgba(44,177,225,.18) 35%,transparent 41% 70%,rgba(157,79,196,.13) 76%,transparent 82%);
|
|
|
box-shadow: 0 0 0 58px rgba(48,145,205,.025);
|
|
|
opacity: .82;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
.roadmap .wrap { position: relative; z-index: 1; }
|
|
|
|
|
|
.awards::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
z-index: 0;
|
|
|
top: -18%;
|
|
|
left: -10%;
|
|
|
width: 54%;
|
|
|
height: 72%;
|
|
|
background:
|
|
|
radial-gradient(circle,rgba(122,225,249,.28) 0 1px,transparent 1.7px) 0 0 / 25px 25px,
|
|
|
linear-gradient(148deg,transparent 43%,rgba(78,206,241,.12) 47%,rgba(202,68,215,.11) 50%,transparent 54%);
|
|
|
-webkit-mask-image: radial-gradient(ellipse at center,#000 0 36%,transparent 75%);
|
|
|
mask-image: radial-gradient(ellipse at center,#000 0 36%,transparent 75%);
|
|
|
opacity: .58;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
.awards::after {
|
|
|
content: none;
|
|
|
}
|
|
|
.awards .wrap { position: relative; z-index: 1; }
|
|
|
|
|
|
@media (max-width: 680px) {
|
|
|
.audience-tracks-layout .audience .wrap::before { right: -90px; width: 210px; height: 210px; opacity: .55; }
|
|
|
.audience-tracks-layout .audience .wrap::after { left: 4%; width: 92%; opacity: .42; }
|
|
|
.audience-tracks-layout .tracks .wrap::before { left: -180px; opacity: .5; }
|
|
|
.audience-tracks-layout .tracks .wrap::after { right: -25%; width: 80%; opacity: .42; }
|
|
|
.roadmap::after { right: -260px; bottom: -210px; opacity: .56; }
|
|
|
.awards::before { left: -42%; width: 110%; opacity: .4; }
|
|
|
}
|
|
|
|
|
|
/* Bright violet-to-cyan conference backdrop for the project accelerator. */
|
|
|
.awards {
|
|
|
background:
|
|
|
linear-gradient(90deg,rgba(31,7,92,.48) 0%,rgba(14,42,132,.28) 46%,rgba(0,88,142,.16) 100%),
|
|
|
linear-gradient(180deg,rgba(8,17,83,.06) 0%,rgba(5,22,84,.25) 100%),
|
|
|
url("assets/generated/awards-accelerator-gradient-wave-v2.png?v=1") center / cover no-repeat !important;
|
|
|
isolation: isolate;
|
|
|
}
|
|
|
.awards::before {
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background:
|
|
|
radial-gradient(circle at 15% 74%,rgba(117,226,255,.30) 0 1px,transparent 1.8px) 0 0 / 28px 28px,
|
|
|
linear-gradient(118deg,transparent 0 38%,rgba(89,215,249,.10) 47%,transparent 56%);
|
|
|
-webkit-mask-image: linear-gradient(90deg,#000,transparent 58%);
|
|
|
mask-image: linear-gradient(90deg,#000,transparent 58%);
|
|
|
opacity: .28;
|
|
|
}
|
|
|
.award-grid {
|
|
|
background:
|
|
|
radial-gradient(ellipse 58% 64% at 0% 0%,rgba(91,190,238,.16),transparent 72%),
|
|
|
radial-gradient(ellipse 72% 120% at 100% 8%,rgba(45,205,233,.18),transparent 68%),
|
|
|
linear-gradient(135deg,rgba(22,42,132,.66) 0%,rgba(10,77,151,.58) 54%,rgba(4,112,151,.50) 100%);
|
|
|
border: 0;
|
|
|
border-radius: 0 28px 0 28px;
|
|
|
box-shadow: 0 26px 76px rgba(0,18,73,.25);
|
|
|
backdrop-filter: blur(9px) saturate(1.08);
|
|
|
}
|
|
|
.award-card,
|
|
|
.award-card:nth-child(odd) {
|
|
|
background: linear-gradient(145deg,rgba(22,66,154,.10),rgba(1,84,133,.04));
|
|
|
}
|
|
|
.award-card:hover,
|
|
|
.award-card:focus-visible,
|
|
|
.award-card.is-active {
|
|
|
background: linear-gradient(145deg,rgba(72,157,230,.16),rgba(34,197,222,.10)) !important;
|
|
|
}
|
|
|
|
|
|
@media (max-width: 680px) {
|
|
|
.awards {
|
|
|
background:
|
|
|
linear-gradient(180deg,rgba(30,8,96,.44),rgba(4,55,132,.26)),
|
|
|
url("assets/generated/awards-accelerator-gradient-wave-v2.png?v=1") 58% center / auto 100% no-repeat !important;
|
|
|
}
|
|
|
.award-grid { backdrop-filter: blur(7px); }
|
|
|
}
|
|
|
|
|
|
/* Audience background: pale photonic-chip microstructure. */
|
|
|
.audience-tracks-layout .audience {
|
|
|
background:
|
|
|
linear-gradient(90deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.78) 52%,rgba(245,251,255,.62) 100%),
|
|
|
url("assets/generated/audience-photonic-chip-wafer-v5.png?v=1") center / cover no-repeat,
|
|
|
#f5fbfe !important;
|
|
|
border-bottom-color: rgba(43,151,205,.14);
|
|
|
}
|
|
|
.audience-tracks-layout .audience-index {
|
|
|
border-color: rgba(37,130,178,.24) !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-index strong {
|
|
|
color: #0b3558 !important;
|
|
|
text-shadow: none;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-index span {
|
|
|
color: #168fc5 !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience::after,
|
|
|
.audience-tracks-layout .audience .wrap::before,
|
|
|
.audience-tracks-layout .audience .wrap::after {
|
|
|
content: none;
|
|
|
}
|
|
|
@media (max-width: 680px) {
|
|
|
.audience-tracks-layout .audience {
|
|
|
background:
|
|
|
linear-gradient(180deg,rgba(255,255,255,.91) 0%,rgba(255,255,255,.8) 60%,rgba(245,251,255,.66) 100%),
|
|
|
url("assets/generated/audience-photonic-chip-wafer-v5.png?v=1") 72% center / auto 100% no-repeat,
|
|
|
#f5fbfe !important;
|
|
|
}
|
|
|
}
|
|
|
/* Remove the participant-type frame and separators. */
|
|
|
.audience-tracks-layout .audience-types {
|
|
|
border: 0 !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type,
|
|
|
.audience-tracks-layout .audience-type + .audience-type {
|
|
|
border: 0 !important;
|
|
|
box-shadow: none !important;
|
|
|
}
|
|
|
@media (min-width: 681px) {
|
|
|
.audience-tracks-layout .audience-type:nth-child(2) {
|
|
|
border-right: 1px solid rgba(44,137,183,.22) !important;
|
|
|
border-left: 1px solid rgba(44,137,183,.22) !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* Tracks background: retain the existing CSS color field and layer a
|
|
|
genuinely transparent, incidental mesh above it. */
|
|
|
.audience-tracks-layout .tracks {
|
|
|
background:
|
|
|
radial-gradient(ellipse 62% 105% at 2% 16%,rgba(25,112,228,.68) 0%,rgba(18,68,181,.3) 42%,transparent 72%),
|
|
|
radial-gradient(ellipse 48% 88% at 98% 48%,rgba(207,50,216,.38) 0%,rgba(112,35,171,.2) 44%,transparent 74%),
|
|
|
radial-gradient(ellipse 42% 58% at 54% 2%,rgba(66,200,242,.28) 0%,transparent 70%),
|
|
|
linear-gradient(118deg,#070d5a 0%,#071d78 38%,#0a1769 66%,#321070 100%) !important;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks-mesh {
|
|
|
position: absolute;
|
|
|
z-index: 2;
|
|
|
inset: 0;
|
|
|
display: block;
|
|
|
background: url("assets/generated/photonics-value-chain-mesh-transparent-v1.png?v=2") center / cover no-repeat;
|
|
|
opacity: 1;
|
|
|
transform: rotate(180deg);
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks > .wrap {
|
|
|
position: relative;
|
|
|
z-index: 3;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks .track-grid {
|
|
|
background: linear-gradient(145deg,rgba(19,59,126,.7),rgba(5,23,69,.84));
|
|
|
border-color: rgba(119,218,250,.3);
|
|
|
box-shadow: 0 34px 82px rgba(0,7,35,.38),inset 0 1px rgba(255,255,255,.1);
|
|
|
backdrop-filter: blur(4px);
|
|
|
}
|
|
|
@media (max-width: 680px) {
|
|
|
.audience-tracks-layout .tracks {
|
|
|
background:
|
|
|
radial-gradient(ellipse 100% 62% at 4% 12%,rgba(25,112,228,.62),transparent 72%),
|
|
|
radial-gradient(ellipse 90% 58% at 100% 74%,rgba(207,50,216,.32),transparent 74%),
|
|
|
linear-gradient(150deg,#070d5a 0%,#071d78 48%,#321070 100%) !important;
|
|
|
}
|
|
|
.audience-tracks-layout .tracks-mesh {
|
|
|
background-size: auto 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* Pale-blue dotted maps fill the roadmap while the light base remains
|
|
|
visible through the transparent artwork. */
|
|
|
.roadmap {
|
|
|
background:
|
|
|
url("assets/generated/roadmap-pale-blue-dotmaps-refined-transparent-v5.png?v=5") center / cover no-repeat,
|
|
|
radial-gradient(ellipse 72% 84% at 14% 4%,rgba(255,255,255,.96) 0%,rgba(248,251,255,.72) 58%,transparent 100%),
|
|
|
linear-gradient(180deg,#f8fbff 0%,#f3f7fc 100%) !important;
|
|
|
}
|
|
|
.roadmap::before,
|
|
|
.roadmap::after {
|
|
|
content: none !important;
|
|
|
display: none !important;
|
|
|
}
|
|
|
.timeline {
|
|
|
background:
|
|
|
url("assets/generated/roadmap-pale-blue-dotmaps-refined-transparent-v5.png?v=5") center / cover no-repeat,
|
|
|
radial-gradient(ellipse 38% 42% at 50% 0%,rgba(113,54,168,.88) 0%,rgba(76,48,151,.48) 48%,transparent 100%),
|
|
|
linear-gradient(112deg,rgba(27,77,145,.94) 0%,rgba(8,74,148,.91) 52%,rgba(7,37,111,.95) 100%) !important;
|
|
|
border-color: rgba(196,234,249,.22) !important;
|
|
|
box-shadow:
|
|
|
0 30px 72px rgba(20,49,102,.27),
|
|
|
inset 0 1px rgba(232,252,255,.3),
|
|
|
inset 0 -80px 120px rgba(2,22,70,.16) !important;
|
|
|
backdrop-filter: blur(2px);
|
|
|
}
|
|
|
@media (max-width: 680px) {
|
|
|
.roadmap {
|
|
|
background-position: center,center !important;
|
|
|
background-size: cover,auto !important;
|
|
|
}
|
|
|
.timeline {
|
|
|
background-position: center,center,center !important;
|
|
|
background-size: cover,auto,auto !important;
|
|
|
}
|
|
|
}
|
|
|
/* Final audience artwork: layered irregular cyan/blue/violet light auras. */
|
|
|
.audience-tracks-layout .audience {
|
|
|
isolation: isolate;
|
|
|
background:
|
|
|
radial-gradient(ellipse 62% 42% at -4% 12%, rgba(44,205,242,.40) 0%, rgba(44,205,242,.17) 38%, transparent 72%),
|
|
|
radial-gradient(ellipse 48% 66% at 104% 8%, rgba(105,126,246,.34) 0%, rgba(105,126,246,.13) 44%, transparent 74%),
|
|
|
radial-gradient(ellipse 58% 34% at 18% 92%, rgba(24,166,228,.34) 0%, rgba(24,166,228,.12) 46%, transparent 78%),
|
|
|
radial-gradient(ellipse 42% 56% at 88% 74%, rgba(153,91,224,.28) 0%, rgba(153,91,224,.10) 45%, transparent 76%),
|
|
|
radial-gradient(ellipse 30% 22% at 8% 54%, rgba(68,232,238,.24) 0%, rgba(68,232,238,.07) 48%, transparent 76%),
|
|
|
radial-gradient(ellipse 34% 26% at 58% 4%, rgba(70,174,246,.22) 0%, rgba(70,174,246,.06) 48%, transparent 74%),
|
|
|
radial-gradient(ellipse 28% 34% at 102% 42%, rgba(190,103,235,.20) 0%, rgba(190,103,235,.06) 46%, transparent 76%),
|
|
|
radial-gradient(ellipse 24% 18% at 29% 18%, rgba(89,205,248,.22) 0%, rgba(89,205,248,.07) 42%, transparent 72%),
|
|
|
radial-gradient(ellipse 22% 28% at 72% 36%, rgba(121,118,241,.20) 0%, rgba(121,118,241,.06) 44%, transparent 74%),
|
|
|
radial-gradient(ellipse 28% 18% at 52% 72%, rgba(46,218,226,.20) 0%, rgba(46,218,226,.06) 46%, transparent 76%),
|
|
|
radial-gradient(ellipse 20% 24% at 76% 96%, rgba(183,101,229,.18) 0%, rgba(183,101,229,.05) 44%, transparent 72%),
|
|
|
radial-gradient(ellipse 34% 24% at 48% 42%, rgba(84,213,235,.16) 0%, transparent 76%),
|
|
|
linear-gradient(145deg, #f7fcff 0%, #eef8ff 48%, #f7f4ff 100%) !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience::before,
|
|
|
.audience-tracks-layout .audience .wrap::before,
|
|
|
.audience-tracks-layout .audience .wrap::after {
|
|
|
content: none !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience::after {
|
|
|
content: "" !important;
|
|
|
position: absolute;
|
|
|
z-index: 0;
|
|
|
inset: -8%;
|
|
|
width: auto;
|
|
|
height: auto;
|
|
|
background:
|
|
|
radial-gradient(ellipse 18% 34% at 14% 28%, rgba(54,222,242,.34), transparent 72%),
|
|
|
radial-gradient(ellipse 26% 18% at 70% 16%, rgba(71,141,245,.30), transparent 72%),
|
|
|
radial-gradient(ellipse 20% 32% at 84% 58%, rgba(176,95,224,.26), transparent 74%),
|
|
|
radial-gradient(ellipse 32% 16% at 36% 82%, rgba(31,181,232,.30), transparent 76%),
|
|
|
radial-gradient(ellipse 15% 22% at 48% 36%, rgba(80,218,245,.20), transparent 70%),
|
|
|
radial-gradient(ellipse 22% 14% at 62% 88%, rgba(111,119,238,.20), transparent 72%),
|
|
|
radial-gradient(ellipse 14% 20% at 30% 54%, rgba(39,232,226,.24), transparent 70%),
|
|
|
radial-gradient(ellipse 18% 13% at 56% 18%, rgba(72,173,251,.22), transparent 72%),
|
|
|
radial-gradient(ellipse 15% 22% at 76% 76%, rgba(193,105,235,.22), transparent 72%),
|
|
|
radial-gradient(ellipse 20% 12% at 12% 90%, rgba(62,192,247,.24), transparent 74%) !important;
|
|
|
opacity: 1;
|
|
|
transform: rotate(-4deg) scale(1.08);
|
|
|
filter: blur(18px);
|
|
|
-webkit-mask-image: none;
|
|
|
mask-image: none;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
.audience-tracks-layout .audience .wrap {
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-content {
|
|
|
position: relative;
|
|
|
isolation: isolate;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-content::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
z-index: -1;
|
|
|
top: 50%;
|
|
|
right: -105px;
|
|
|
width: 390px;
|
|
|
height: 460px;
|
|
|
border-radius: 68% 32% 57% 43% / 38% 62% 35% 65%;
|
|
|
background:
|
|
|
radial-gradient(ellipse 58% 66% at 38% 38%, rgba(25,184,255,.72) 0%, rgba(32,128,255,.44) 42%, transparent 78%),
|
|
|
radial-gradient(ellipse 52% 44% at 72% 62%, rgba(83,79,239,.36) 0%, rgba(104,76,222,.15) 50%, transparent 82%),
|
|
|
radial-gradient(ellipse 44% 32% at 30% 82%, rgba(47,154,255,.28), transparent 76%);
|
|
|
transform: translateY(-50%) rotate(-11deg);
|
|
|
filter: blur(10px);
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
@media (max-width: 680px) {
|
|
|
.audience-tracks-layout .audience {
|
|
|
background: transparent !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience::after {
|
|
|
inset: -4%;
|
|
|
opacity: .82;
|
|
|
transform: rotate(-3deg) scale(1.06);
|
|
|
filter: blur(14px);
|
|
|
}
|
|
|
.audience-tracks-layout .audience-content::after {
|
|
|
right: -135px;
|
|
|
width: 320px;
|
|
|
height: 380px;
|
|
|
opacity: .72;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* Roadmap recolor: a clearer Shanghai-to-Suzhou progression. */
|
|
|
.roadmap .timeline {
|
|
|
position: relative;
|
|
|
isolation: isolate;
|
|
|
background: #0a3d87 !important;
|
|
|
border: 1px solid rgba(213,243,255,.28) !important;
|
|
|
box-shadow:
|
|
|
0 28px 70px rgba(18,54,112,.25),
|
|
|
inset 0 1px rgba(255,255,255,.24),
|
|
|
inset 0 -72px 110px rgba(0,18,68,.16) !important;
|
|
|
}
|
|
|
.roadmap .timeline::before {
|
|
|
z-index: 3;
|
|
|
height: 3px;
|
|
|
background: linear-gradient(90deg,#55e4f5 0%,#4bb7f3 35%,#6b75e8 69%,#b66fe2 100%) !important;
|
|
|
}
|
|
|
.roadmap .timeline::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
z-index: 0;
|
|
|
inset: 0;
|
|
|
background: url("assets/generated/roadmap-pale-blue-dotmaps-full-transparent-v4.png?v=4") center / cover no-repeat;
|
|
|
opacity: .22;
|
|
|
mix-blend-mode: screen;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
.roadmap .step {
|
|
|
z-index: 1;
|
|
|
border-right-color: rgba(224,244,255,.2);
|
|
|
text-shadow: 0 1px 12px rgba(0,18,64,.16);
|
|
|
}
|
|
|
.roadmap .step:nth-child(1) {
|
|
|
background: linear-gradient(145deg,rgba(15,139,190,.96),rgba(16,92,174,.92));
|
|
|
}
|
|
|
.roadmap .step:nth-child(2) {
|
|
|
background: linear-gradient(145deg,rgba(20,112,190,.95),rgba(30,76,169,.93));
|
|
|
}
|
|
|
.roadmap .step:nth-child(3) {
|
|
|
background: linear-gradient(145deg,rgba(39,77,174,.95),rgba(54,55,157,.94));
|
|
|
}
|
|
|
.roadmap .step:nth-child(4) {
|
|
|
background: linear-gradient(145deg,rgba(67,61,164,.96),rgba(81,42,137,.96));
|
|
|
border-right: 0;
|
|
|
}
|
|
|
.roadmap .step-mark {
|
|
|
background: rgba(225,249,255,.9) !important;
|
|
|
box-shadow: 0 0 16px rgba(117,229,255,.42);
|
|
|
}
|
|
|
.roadmap .step h3 { color: #fff !important; }
|
|
|
.roadmap .step p { color: rgba(238,248,255,.78); }
|
|
|
.roadmap .step p strong { color: #fff !important; }
|
|
|
.roadmap .step-place { color: rgba(213,239,255,.76); }
|
|
|
.roadmap .step:hover {
|
|
|
z-index: 2;
|
|
|
border-color: rgba(255,255,255,.28);
|
|
|
box-shadow: inset 0 0 0 1px rgba(255,255,255,.12),0 18px 42px rgba(9,28,84,.22);
|
|
|
transform: translateY(-6px);
|
|
|
}
|
|
|
|
|
|
@media (max-width: 680px) {
|
|
|
.roadmap .timeline::after { opacity: .14; }
|
|
|
.roadmap .step { border-right: 0; }
|
|
|
.roadmap .step:nth-child(1) { background: linear-gradient(135deg,rgba(15,139,190,.97),rgba(16,92,174,.95)); }
|
|
|
.roadmap .step:nth-child(2) { background: linear-gradient(135deg,rgba(20,112,190,.97),rgba(30,76,169,.95)); }
|
|
|
.roadmap .step:nth-child(3) { background: linear-gradient(135deg,rgba(39,77,174,.97),rgba(54,55,157,.96)); }
|
|
|
.roadmap .step:nth-child(4) { background: linear-gradient(135deg,rgba(67,61,164,.98),rgba(81,42,137,.98)); }
|
|
|
}
|
|
|
|
|
|
/* Roadmap interaction refresh: remove the top rule and let each stage respond independently. */
|
|
|
.roadmap .timeline {
|
|
|
border-top: 0 !important;
|
|
|
border-right: 0 !important;
|
|
|
border-bottom: 0 !important;
|
|
|
border-left: 0 !important;
|
|
|
overflow: hidden;
|
|
|
perspective: none;
|
|
|
box-shadow: 0 22px 52px rgba(18,54,112,.2),inset 0 1px rgba(255,255,255,.18) !important;
|
|
|
}
|
|
|
.roadmap .timeline::before { content: none !important; }
|
|
|
.roadmap .step {
|
|
|
--spot-x: 50%;
|
|
|
--spot-y: 35%;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
outline: 0;
|
|
|
cursor: pointer;
|
|
|
transform: translateZ(0);
|
|
|
transform-origin: center bottom;
|
|
|
transition: transform .38s cubic-bezier(.2,.75,.2,1), filter .38s ease,
|
|
|
box-shadow .38s ease, border-color .38s ease;
|
|
|
}
|
|
|
.roadmap .step::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
z-index: -1;
|
|
|
inset: 0;
|
|
|
background: radial-gradient(circle 190px at var(--spot-x) var(--spot-y),rgba(255,255,255,.22),transparent 72%);
|
|
|
opacity: 0;
|
|
|
transition: opacity .3s ease;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
.roadmap .step:is(:hover,:focus-visible,.is-active) {
|
|
|
z-index: 4;
|
|
|
border-color: rgba(224,244,255,.2);
|
|
|
box-shadow: none;
|
|
|
filter: brightness(1.08) saturate(1.06);
|
|
|
transform: none;
|
|
|
}
|
|
|
.roadmap .step:is(:hover,:focus-visible,.is-active)::after { opacity: 1; }
|
|
|
.roadmap .step:focus-visible .step-mark { background: #fff !important; box-shadow: 0 0 18px rgba(126,235,255,.72); }
|
|
|
.roadmap .timeline:has(.step:hover) .step:not(:hover) { filter: saturate(.9) brightness(.94); }
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
.roadmap .step { transition: border-color .15s ease,box-shadow .15s ease; }
|
|
|
.roadmap .step:is(:hover,:focus-visible,.is-active) { transform: none; }
|
|
|
}
|
|
|
|
|
|
@media (max-width: 680px) {
|
|
|
.roadmap .timeline { overflow: hidden; perspective: none; }
|
|
|
.roadmap .step:is(:hover,:focus-visible,.is-active) { transform: none; }
|
|
|
.roadmap .timeline:has(.step:hover) .step:not(:hover) { filter: none; }
|
|
|
}
|
|
|
|
|
|
/* Roadmap surface polish: keep the route continuous, soften only its outer silhouette. */
|
|
|
.roadmap .timeline {
|
|
|
background: transparent !important;
|
|
|
border-radius: 0 28px 0 28px;
|
|
|
box-shadow:
|
|
|
0 26px 64px rgba(18,54,112,.22),
|
|
|
0 8px 22px rgba(32,104,170,.1),
|
|
|
inset 0 1px rgba(255,255,255,.2) !important;
|
|
|
}
|
|
|
.roadmap .timeline::after {
|
|
|
background:
|
|
|
linear-gradient(180deg,rgba(255,255,255,.08),transparent 22%,rgba(2,18,66,.08) 100%),
|
|
|
url("assets/generated/roadmap-pale-blue-dotmaps-full-transparent-v4.png?v=4") center / cover no-repeat;
|
|
|
opacity: .24;
|
|
|
}
|
|
|
.roadmap .step {
|
|
|
border-right: 1px solid rgba(220,242,255,.16);
|
|
|
box-shadow:
|
|
|
inset 1px 0 rgba(255,255,255,.035),
|
|
|
inset 0 1px rgba(255,255,255,.07);
|
|
|
}
|
|
|
.roadmap .step:first-child { border-radius: 27px 0 0 0; }
|
|
|
.roadmap .step:last-child {
|
|
|
border-right: 0;
|
|
|
border-radius: 0 0 27px 0;
|
|
|
}
|
|
|
.roadmap .step:nth-child(1) {
|
|
|
background: linear-gradient(145deg,rgba(11,151,196,.98),rgba(17,91,169,.95));
|
|
|
}
|
|
|
.roadmap .step:nth-child(2) {
|
|
|
background: linear-gradient(145deg,rgba(24,119,193,.98),rgba(35,75,169,.96));
|
|
|
}
|
|
|
.roadmap .step:nth-child(3) {
|
|
|
background: linear-gradient(145deg,rgba(48,82,181,.98),rgba(58,56,160,.97));
|
|
|
}
|
|
|
.roadmap .step:nth-child(4) {
|
|
|
background: linear-gradient(145deg,rgba(70,63,167,.99),rgba(83,44,139,.98));
|
|
|
}
|
|
|
|
|
|
@media (max-width: 1020px) and (min-width: 681px) {
|
|
|
.roadmap .timeline { border-radius: 28px 0 28px 0; }
|
|
|
.roadmap .step:first-child { border-radius: 27px 0 0 0; }
|
|
|
.roadmap .step:nth-child(2) { border-right: 0; border-radius: 0; }
|
|
|
.roadmap .step:nth-child(3) { border-radius: 0; }
|
|
|
.roadmap .step:last-child { border-radius: 0 0 27px 0; }
|
|
|
}
|
|
|
|
|
|
@media (max-width: 680px) {
|
|
|
.roadmap .timeline { border-radius: 28px 0 28px 0; }
|
|
|
.roadmap .step {
|
|
|
border-right: 0;
|
|
|
border-bottom: 1px solid rgba(220,242,255,.14);
|
|
|
border-radius: 0 !important;
|
|
|
}
|
|
|
.roadmap .step:first-child { border-radius: 27px 0 0 0 !important; }
|
|
|
.roadmap .step:last-child {
|
|
|
border-bottom: 0;
|
|
|
border-radius: 0 0 27px 0 !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* Final roadmap corner/base override. */
|
|
|
.roadmap .timeline {
|
|
|
background: none !important;
|
|
|
border-radius: 28px 0 28px 0 !important;
|
|
|
overflow: hidden !important;
|
|
|
}
|
|
|
.roadmap .timeline::after { content: none !important; }
|
|
|
.roadmap .step {
|
|
|
border-radius: 0 !important;
|
|
|
transform: none !important;
|
|
|
}
|
|
|
.roadmap .step:first-child { border-radius: 27px 0 0 0 !important; }
|
|
|
.roadmap .step:last-child { border-radius: 0 0 27px 0 !important; }
|
|
|
@media (max-width: 767.98px) {
|
|
|
.hero-map-dots { left: 24%; right: -28%; bottom: 12%; height: 34%; opacity: .09; }
|
|
|
.hero-map-dots::before { filter: blur(1.2px); }
|
|
|
.hero-map-dots::after { background-size: 19px 16px; opacity: .24; }
|
|
|
}
|
|
|
/* Participant panel: violet frame, top subject blocks and bottom copy. */
|
|
|
.audience-tracks-layout .audience-card {
|
|
|
position: relative;
|
|
|
border: 0 !important;
|
|
|
border-radius: 24px !important;
|
|
|
background: rgba(255,255,255,.28) !important;
|
|
|
box-shadow: 0 30px 78px rgba(73,53,145,.2),inset 0 1px rgba(255,255,255,.95) !important;
|
|
|
backdrop-filter: blur(10px);
|
|
|
}
|
|
|
.audience-tracks-layout .audience-card::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
z-index: 5;
|
|
|
inset: 16px;
|
|
|
border: 2px solid transparent;
|
|
|
border-radius: 10px;
|
|
|
background: linear-gradient(125deg,#087dcc 0%,#5269dc 48%,#b339d0 100%) border-box;
|
|
|
-webkit-mask: linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
|
|
|
-webkit-mask-composite: xor;
|
|
|
mask-composite: exclude;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-focus {
|
|
|
padding-left: 80px !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-stage .stage-main {
|
|
|
font-size: clamp(32px, 2.9vw, 44px) !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-detail {
|
|
|
justify-content: center;
|
|
|
gap: 34px;
|
|
|
background: rgba(255,255,255,.62) !important;
|
|
|
backdrop-filter: blur(12px);
|
|
|
}
|
|
|
.audience-tracks-layout .audience-types {
|
|
|
order: 1;
|
|
|
grid-template-columns: repeat(3,minmax(0,1fr)) !important;
|
|
|
gap: 0 !important;
|
|
|
border: 0 !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type,
|
|
|
.audience-tracks-layout .audience-type + .audience-type {
|
|
|
min-height: 142px !important;
|
|
|
align-items: flex-start !important;
|
|
|
justify-content: center;
|
|
|
padding: 24px 22px !important;
|
|
|
border: 0 !important;
|
|
|
border-left: 0 !important;
|
|
|
border-radius: 0 !important;
|
|
|
background:
|
|
|
radial-gradient(circle at 16% 14%,rgba(138,232,255,.48),transparent 38%),
|
|
|
radial-gradient(circle at 88% 86%,rgba(204,64,218,.10),transparent 42%),
|
|
|
linear-gradient(145deg,#07a0d8 0%,#078fc9 52%,#1568b0 100%) !important;
|
|
|
box-shadow: inset -1px 0 rgba(255,255,255,.16),inset 0 1px rgba(255,255,255,.12) !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type:nth-child(2) {
|
|
|
background:
|
|
|
radial-gradient(circle at 12% 12%,rgba(138,232,255,.32),transparent 34%),
|
|
|
radial-gradient(circle at 92% 90%,rgba(204,64,218,.18),transparent 38%),
|
|
|
linear-gradient(145deg,#078fc9 0%,#1455a5 58%,#3d3d96 100%) !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type:nth-child(3) {
|
|
|
background:
|
|
|
radial-gradient(circle at 18% 16%,rgba(138,232,255,.20),transparent 36%),
|
|
|
radial-gradient(circle at 86% 86%,rgba(204,64,218,.30),transparent 42%),
|
|
|
linear-gradient(145deg,#1568b0 0%,#3d3d96 52%,#4b2f8d 100%) !important;
|
|
|
box-shadow: inset 0 1px rgba(255,255,255,.12) !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type strong {
|
|
|
color: #fff !important;
|
|
|
font-size: 20px !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type > span {
|
|
|
margin-top: 12px;
|
|
|
color: rgba(186,236,255,.78) !important;
|
|
|
font-size: 12px !important;
|
|
|
font-weight: 700;
|
|
|
line-height: 1;
|
|
|
letter-spacing: .14em;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type:hover {
|
|
|
filter: saturate(1.06) brightness(1.05);
|
|
|
box-shadow: 0 17px 34px rgba(19,79,143,.22),inset 0 1px rgba(255,255,255,.18) !important;
|
|
|
transform: none !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type:nth-child(1):hover {
|
|
|
background:
|
|
|
radial-gradient(circle at 16% 14%,rgba(138,232,255,.48),transparent 38%),
|
|
|
radial-gradient(circle at 88% 86%,rgba(204,64,218,.10),transparent 42%),
|
|
|
linear-gradient(145deg,#07a0d8 0%,#078fc9 52%,#1568b0 100%) !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type:nth-child(2):hover {
|
|
|
background:
|
|
|
radial-gradient(circle at 12% 12%,rgba(138,232,255,.32),transparent 34%),
|
|
|
radial-gradient(circle at 92% 90%,rgba(204,64,218,.18),transparent 38%),
|
|
|
linear-gradient(145deg,#078fc9 0%,#1455a5 58%,#3d3d96 100%) !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type:nth-child(3):hover {
|
|
|
background:
|
|
|
radial-gradient(circle at 18% 16%,rgba(138,232,255,.20),transparent 36%),
|
|
|
radial-gradient(circle at 86% 86%,rgba(204,64,218,.30),transparent 42%),
|
|
|
linear-gradient(145deg,#1568b0 0%,#3d3d96 52%,#4b2f8d 100%) !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-detail > p {
|
|
|
position: relative;
|
|
|
order: 2;
|
|
|
max-width: none !important;
|
|
|
margin: 0 !important;
|
|
|
padding: 0 0 24px !important;
|
|
|
color: #526f82 !important;
|
|
|
font-size: 16px !important;
|
|
|
line-height: 1.9 !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-detail > p::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
width: 66px;
|
|
|
height: 3px;
|
|
|
border-radius: 999px;
|
|
|
background: linear-gradient(90deg,#653bd2 0%,#9f40d4 56%,#d439c7 100%);
|
|
|
box-shadow: 0 5px 14px rgba(137,53,199,.24);
|
|
|
}
|
|
|
@media (max-width: 980px) {
|
|
|
.audience-tracks-layout .audience-detail { gap: 28px; }
|
|
|
.audience-tracks-layout .audience-focus { padding-left: 64px !important; }
|
|
|
}
|
|
|
@media (max-width: 680px) {
|
|
|
.audience-tracks-layout .audience-card { border-radius: 20px !important; }
|
|
|
.audience-tracks-layout .audience-focus { padding-left: 44px !important; }
|
|
|
.audience-tracks-layout .audience-stage .stage-main { font-size: clamp(28px, 8vw, 36px) !important; }
|
|
|
.audience-tracks-layout .audience-detail { gap: 22px; }
|
|
|
.audience-tracks-layout .audience-types { grid-template-columns: 1fr !important; gap: 0 !important; }
|
|
|
.audience-tracks-layout .audience-type,
|
|
|
.audience-tracks-layout .audience-type + .audience-type {
|
|
|
min-height: 88px !important;
|
|
|
padding: 16px 18px !important;
|
|
|
border-bottom: 0 !important;
|
|
|
border-left: 0 !important;
|
|
|
border-radius: 0 !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type > span { margin-top: 8px; }
|
|
|
.audience-tracks-layout .audience-detail > p { margin: 0 !important; padding-bottom: 22px !important; font-size: 14px !important; }
|
|
|
.audience-tracks-layout .audience-detail > p::after { width: 52px; }
|
|
|
}
|
|
|
|
|
|
/* Global small-copy system. Keep supporting copy, labels and metadata on
|
|
|
one readable typeface and one size across desktop and mobile. */
|
|
|
.nav,
|
|
|
.language-switch,
|
|
|
.hero-org-row,
|
|
|
.section-kicker,
|
|
|
.audience-code,
|
|
|
.audience-eyebrow,
|
|
|
.audience-index span,
|
|
|
.tracks-index span,
|
|
|
.tracks-kicker,
|
|
|
.tracks-heading > p,
|
|
|
.audience-tracks-layout .audience-detail > p,
|
|
|
.audience-tracks-layout .track-card p,
|
|
|
.roadmap-intro,
|
|
|
.step p,
|
|
|
.step p strong,
|
|
|
.step-place,
|
|
|
.awards-summary,
|
|
|
.award-card small,
|
|
|
.award-card p,
|
|
|
.footer-brand::before,
|
|
|
.footer-brand,
|
|
|
.footer-meta,
|
|
|
small {
|
|
|
font-family: var(--font-small) !important;
|
|
|
font-size: var(--font-small-size) !important;
|
|
|
}
|
|
|
.footer-brand,
|
|
|
.footer-meta {
|
|
|
font-weight: 400 !important;
|
|
|
line-height: 1.5 !important;
|
|
|
letter-spacing: .02em !important;
|
|
|
}
|
|
|
.audience-tracks-layout .audience-type strong {
|
|
|
font-family: var(--font-sans) !important;
|
|
|
}
|
|
|
[lang="en"],
|
|
|
.audience-eyebrow,
|
|
|
.tracks-kicker,
|
|
|
.roadmap-intro strong,
|
|
|
.step-place,
|
|
|
.roadmap::before,
|
|
|
.tracks::after,
|
|
|
.awards::after,
|
|
|
.awards .section-head::before,
|
|
|
.footer-brand::before {
|
|
|
font-family: var(--font-en) !important;
|
|
|
font-style: normal !important;
|
|
|
font-weight: 400 !important;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<header class="site-header">
|
|
|
<div class="wrap header-inner">
|
|
|
<a class="brand" href="event-site.html" aria-label="首届沪苏协同新兴产业科创大赛首页"><img class="brand-logo" src="assets/competition-title-logo.png?v=5" alt="首届沪苏协同新兴产业科创大赛"></a>
|
|
|
<div class="header-tools">
|
|
|
<nav class="nav" aria-label="主导航">
|
|
|
<a href="#audience">参赛对象</a><a href="#tracks">细分赛道</a><a href="#roadmap">赛程安排</a><a href="#awards">奖项支持</a>
|
|
|
</nav>
|
|
|
<a class="language-switch" href="event-site-en.html" lang="en" aria-label="English">EN</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</header>
|
|
|
<main id="top">
|
|
|
<section class="hero">
|
|
|
<div class="hero-banners" aria-hidden="true">
|
|
|
<div class="hero-banner hero-banner--landmarks is-active"></div>
|
|
|
<div class="hero-banner hero-banner--photonic"></div>
|
|
|
</div>
|
|
|
<div class="hero-map-dots" aria-hidden="true"></div>
|
|
|
<div class="wrap hero-grid">
|
|
|
<div class="hero-content">
|
|
|
<h1 class="hero-slogan" aria-label="2026 光联万物，创芯未来；首届沪苏协同新兴产业科创大赛"><span class="slogan-first" aria-hidden="true"><img class="slogan-year" src="assets/slogan-year-2026.png?v=1" alt=""><img class="slogan-title" src="assets/slogan-guanglian-wanwu-gradient.png?v=1" alt=""></span><span class="slogan-second" aria-hidden="true">首届沪苏协同新兴产业科创大赛</span></h1>
|
|
|
<dl class="hero-organizers" aria-label="赛事组织单位">
|
|
|
<div class="hero-org-row"><dt>指导单位：</dt><dd>江苏省人民政府驻上海办事处、苏州工业园区管理委员会</dd></div>
|
|
|
<div class="hero-org-row"><dt>主办单位：</dt><dd>苏州市人民政府驻上海联络处、苏州恒泰</dd></div>
|
|
|
<div class="hero-org-row"><dt>承办单位：</dt><dd>沪苏协同创新平台（苏州工业园区站）、苏州光通信产业基地</dd></div>
|
|
|
<div class="hero-org-row"><dt>协办单位：</dt><dd>上海市江苏青年工作委员会、江苏高校上海校友会联席会、上海市新兴产业投资促进会、<span style="white-space: nowrap;">上海市欧美同学会</span>、苏州光通信产业协会、苏州银行、江苏银行</dd></div>
|
|
|
<div class="hero-org-row"><dt>支持媒体：</dt><dd>新华日报、交汇点新闻、苏州日报、讯石光通信、光纤在线</dd></div>
|
|
|
</dl>
|
|
|
<div class="hero-actions" aria-label="报名入口">
|
|
|
<a class="hero-primary" href="login.html">参赛报名</a>
|
|
|
<a class="hero-primary hero-primary--audience" href="layout.html?role=audience">观众报名</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<div class="audience-tracks-layout">
|
|
|
<section class="section audience" id="audience">
|
|
|
<div class="wrap">
|
|
|
<aside class="audience-index" aria-label="参赛对象"><strong>参赛对象</strong><span lang="en">PARTICIPANTS</span></aside>
|
|
|
<div class="audience-content">
|
|
|
<div class="audience-card">
|
|
|
<div class="audience-focus">
|
|
|
<div>
|
|
|
<span class="audience-eyebrow">TARGET PROJECTS</span>
|
|
|
<div class="audience-stage"><strong><span class="stage-main">初创期（天使期）</span><span class="stage-sub">科技项目</span></strong></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="audience-detail">
|
|
|
<div class="audience-types" aria-label="参赛主体类型">
|
|
|
<div class="audience-type"><strong>科技企业</strong><span lang="en">ENTERPRISE</span></div>
|
|
|
<div class="audience-type"><strong>高校团队</strong><span lang="en">UNIVERSITY</span></div>
|
|
|
<div class="audience-type"><strong>科研院所</strong><span lang="en">INSTITUTE</span></div>
|
|
|
</div>
|
|
|
<p>面向光通信及相关产业链，重点发掘创新性强、成长性好、市场前景广阔的初创期（天使期）科技项目。</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<section class="section tracks" id="tracks">
|
|
|
<span class="tracks-mesh" aria-hidden="true"></span>
|
|
|
<div class="wrap">
|
|
|
<aside class="tracks-index" aria-label="细分赛道"><strong>细分赛道</strong><span lang="en">TRACKS</span></aside>
|
|
|
<div class="tracks-content">
|
|
|
<div class="section-head tracks-heading">
|
|
|
<div><span class="tracks-kicker">PHOTONICS VALUE CHAIN</span><h2 class="section-title"><span>贯通产业全链条</span></h2></div>
|
|
|
<p>聚焦从核心元器件到行业场景的关键创新环节</p>
|
|
|
</div>
|
|
|
<div class="track-grid">
|
|
|
<article class="track-card"><h3>芯片与组件</h3><p>光芯片、光电元器件、光模块等核心芯片与组件研发创新</p></article>
|
|
|
<article class="track-card"><h3>制造与封装</h3><p>光电子精密制造、器件封装耦合、量产工艺优化等制造封装技术攻关</p></article>
|
|
|
<article class="track-card"><h3>材料与设备</h3><p>光电功能新材料、光纤基材及光刻、镀膜、精密测试等专用设备研发</p></article>
|
|
|
<article class="track-card"><h3>场景与应用</h3><p>面向算力网络、移动通信、车载互联、工业传感、航空航天、医疗等领域的系统方案与应用创新</p></article>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
</div>
|
|
|
|
|
|
<section class="section roadmap" id="roadmap">
|
|
|
<div class="wrap">
|
|
|
<div class="section-head">
|
|
|
<h2 class="section-title">从报名到决赛</h2>
|
|
|
<p class="roadmap-intro"><strong>COMPETITION FLIGHTPATH</strong>一条从上海启程、向苏州汇聚的科创赛道。每一步都不只是筛选，也是让项目更清晰、更成熟的加速过程。</p>
|
|
|
</div>
|
|
|
<div class="timeline">
|
|
|
<article class="step" tabindex="0"><span class="step-mark" aria-hidden="true"></span><h3>启动仪式暨首场预选赛</h3><p><strong>2026年 09月</strong>征集令与专项基金筹备发布</p><span class="step-place">SHANGHAI · 启程</span></article>
|
|
|
<article class="step" tabindex="0"><span class="step-mark" aria-hidden="true"></span><h3>项目征集与赛前辅导</h3><p><strong>2026年 09—12月</strong>公开征集、定向邀请与路演辅导</p><span class="step-place">OPEN CALL · 聚合</span></article>
|
|
|
<article class="step" tabindex="0"><span class="step-mark" aria-hidden="true"></span><h3>预选赛</h3><p><strong>2026年 09—12月</strong>计划 3—5 场，每场 10—12 个项目</p><span class="step-place">PITCH · 进阶</span></article>
|
|
|
<article class="step" tabindex="0"><span class="step-mark" aria-hidden="true"></span><h3>总决赛暨行业峰会</h3><p><strong>2027年 第一季度</strong>产业、资本与创新项目集中会师</p><span class="step-place">SUZHOU · 决赛</span></article>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<section class="section awards" id="awards">
|
|
|
<div class="wrap">
|
|
|
<div class="awards-layout">
|
|
|
<div class="award-grid">
|
|
|
<article class="award-card" tabindex="0" aria-label="奖金支持：最高15万元"><small>奖金支持</small><h3>最高15万元</h3><p>总决赛获奖团队：<br>一等奖1名，奖励15万元人民币（税前）<br>二等奖2名，奖励10万元人民币（税前）<br>三等奖3名，奖励5万元人民币（税前）</p></article>
|
|
|
<article class="award-card" tabindex="0" aria-label="人才政策支持：领军人才计划通道"><small>人才政策支持</small><h3>领军人才计划通道</h3><p>对符合条件的获奖团队，按规定推荐进入苏州创新创业领军人才计划直接立项或面试评审环节。</p></article>
|
|
|
<article class="award-card" tabindex="0" aria-label="多层次资本支持：千万元级投资意向"><small>多层次资本支持</small><h3>千万元级投资意向</h3><p>开展“一对一”投融资需求对接，链接头部创投机构，择优推动形成最高可达千万元级的股权投资意向。</p></article>
|
|
|
<article class="award-card" tabindex="0" aria-label="全要素创业服务：最高500平方米，最长3年"><small>全要素创业服务</small><h3>最高500㎡ · 最长3年</h3><p>对符合条件的项目按规定提供办公场地租金减免，并提供产业链、技术、市场、管理与人才对接服务。</p></article>
|
|
|
</div>
|
|
|
<div class="section-head">
|
|
|
<h2 class="section-title">让好项目加速发生</h2>
|
|
|
<p class="awards-summary">奖金只是起点，更关键的是政策、资本、空间与产业链资源的长期连接。</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
</main>
|
|
|
<footer class="site-footer" id="site-footer">
|
|
|
<div class="wrap footer-inner">
|
|
|
<div class="footer-brand">首届沪苏协同新兴产业科创大赛</div>
|
|
|
<div class="footer-meta">© 苏州市人民政府驻上海联络处 苏州恒泰</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
<script>
|
|
|
(function () {
|
|
|
var steps = Array.prototype.slice.call(document.querySelectorAll(".roadmap .step"));
|
|
|
steps.forEach(function (step) {
|
|
|
step.addEventListener("pointermove", function (event) {
|
|
|
var rect = step.getBoundingClientRect();
|
|
|
step.style.setProperty("--spot-x", ((event.clientX - rect.left) / rect.width * 100) + "%");
|
|
|
step.style.setProperty("--spot-y", ((event.clientY - rect.top) / rect.height * 100) + "%");
|
|
|
});
|
|
|
step.addEventListener("click", function () {
|
|
|
var wasActive = step.classList.contains("is-active");
|
|
|
steps.forEach(function (item) { item.classList.remove("is-active"); });
|
|
|
if (!wasActive) step.classList.add("is-active");
|
|
|
});
|
|
|
});
|
|
|
}());
|
|
|
|
|
|
(function () {
|
|
|
var section = document.querySelector(".awards");
|
|
|
if (!section) return;
|
|
|
var cards = Array.prototype.slice.call(section.querySelectorAll(".award-card"));
|
|
|
var reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
|
|
|
|
cards.forEach(function (card) {
|
|
|
card.addEventListener("pointerenter", function () { card.classList.add("is-active"); });
|
|
|
card.addEventListener("pointerleave", function () { card.classList.remove("is-active"); });
|
|
|
card.addEventListener("focus", function () { card.classList.add("is-active"); });
|
|
|
card.addEventListener("blur", function () { card.classList.remove("is-active"); });
|
|
|
});
|
|
|
|
|
|
if (reduceMotion || !("IntersectionObserver" in window)) {
|
|
|
cards.forEach(function (card) { card.classList.add("is-revealed"); });
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
section.classList.add("is-ready");
|
|
|
var observer = new IntersectionObserver(function (entries) {
|
|
|
entries.forEach(function (entry) {
|
|
|
if (!entry.isIntersecting) return;
|
|
|
cards.forEach(function (card, index) {
|
|
|
window.setTimeout(function () { card.classList.add("is-revealed"); }, index * 85);
|
|
|
});
|
|
|
observer.disconnect();
|
|
|
});
|
|
|
}, { threshold: .18 });
|
|
|
observer.observe(section);
|
|
|
}());
|
|
|
|
|
|
window.addEventListener("load", function () {
|
|
|
if (!window.location.hash) return;
|
|
|
window.setTimeout(function () {
|
|
|
var target = document.querySelector(window.location.hash);
|
|
|
if (target) {
|
|
|
var previousBehavior = document.documentElement.style.scrollBehavior;
|
|
|
document.documentElement.style.scrollBehavior = "auto";
|
|
|
target.scrollIntoView({ block: "start", behavior: "auto" });
|
|
|
document.documentElement.style.scrollBehavior = previousBehavior;
|
|
|
}
|
|
|
}, 120);
|
|
|
});
|
|
|
|
|
|
(function () {
|
|
|
var banners = Array.prototype.slice.call(document.querySelectorAll(".hero-banner"));
|
|
|
if (banners.length < 2) return;
|
|
|
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
|
|
|
|
|
|
var index = banners.findIndex(function (banner) { return banner.classList.contains("is-active"); });
|
|
|
if (index < 0) {
|
|
|
index = 0;
|
|
|
banners[0].classList.add("is-active");
|
|
|
}
|
|
|
banners[index].style.zIndex = "1";
|
|
|
|
|
|
var fading = false;
|
|
|
var fadeMs = 2400;
|
|
|
var intervalMs = 4000;
|
|
|
|
|
|
window.setInterval(function () {
|
|
|
if (fading) return;
|
|
|
fading = true;
|
|
|
var next = (index + 1) % banners.length;
|
|
|
banners[next].style.zIndex = "2";
|
|
|
banners[next].classList.add("is-active");
|
|
|
window.setTimeout(function () {
|
|
|
banners[index].classList.remove("is-active");
|
|
|
banners[next].style.zIndex = "1";
|
|
|
banners[index].style.zIndex = "0";
|
|
|
index = next;
|
|
|
fading = false;
|
|
|
}, fadeMs);
|
|
|
}, intervalMs);
|
|
|
}());
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
