/* ============================================================ RAW TG — PREMIUM LAYER (premium.css) Cinematic, global, industrial, investment-ready execution. Loaded AFTER styles.css. Scoped to , so existing pages are untouched until rolled out. Benchmarks: NVIDIA scale · Apple storytelling · Runway motion · Palantir enterprise gravity. ============================================================ */ .premium { /* extended cinematic tokens (built on the brand kit) */ --ink: #0B2236; /* deepest stage navy */ --ink-2: #0E2A44; --glass: rgba(255,255,255,0.55); --glass-line: rgba(70,100,130,0.22); --glow-teal: 0 0 0 1px rgba(30,158,99,.25), 0 24px 60px -22px rgba(30,158,99,.45); --glow-green: 0 0 0 1px rgba(35,160,95,.30), 0 22px 54px -20px rgba(35,160,95,.50); --grad-stage: linear-gradient(118deg, #0E2A44 0%, #10485C 45%, #17705F 78%, #1E9E63 130%); --grad-cine: linear-gradient(135deg, #7AE6AF 0%, #37C983 60%, #9CD8FF 130%); --grad-edge: linear-gradient(90deg, transparent, rgba(30,158,99,.55) 22%, rgba(78,140,235,.7) 50%, rgba(30,158,99,.55) 78%, transparent); --fs-display: clamp(2.5rem, 6.2vw, 5rem); --rhythm: clamp(64px, 8vw, 132px); } /* ---------- scroll progress ---------- */ .px-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--grad-foil, #1E9E63); z-index: 200; transition: width .12s linear; box-shadow: 0 0 14px rgba(30,158,99,.6); } /* ---------- premium header ---------- */ .premium .site-header { transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease, border-color .3s; } .premium .site-header[data-scrolled] { background: rgba(255,255,255,0.72); backdrop-filter: blur(16px) saturate(140%); border-bottom-color: rgba(30,158,99,.18); box-shadow: 0 10px 40px rgba(14,40,66,0.14); } .premium .site-header[data-scrolled] .nav { height: 64px; } .premium .site-header[data-scrolled] .nav-links a { color: #2C3A49; } .premium .nav { transition: height .3s ease; } .premium .nav-cta { box-shadow: 0 8px 22px rgba(23,138,84,.26); } /* ---------- shared premium primitives ---------- */ .px-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ff-head); font-weight: 700; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-text, #147A4B); margin: 0 0 18px; } .px-kicker::before { content: ""; width: 30px; height: 2px; background: var(--grad-foil, #1E9E63); } .px-band--dark { background: var(--grad-stage); color: rgba(255,255,255,.85); position: relative; overflow: hidden; } .px-band--dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(70,100,130,0.056) 1px, transparent 1px), linear-gradient(90deg, rgba(70,100,130,0.056) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 80%); opacity: .5; } .px-band--dark .container { position: relative; z-index: 1; } .px-band--dark h1, .px-band--dark h2, .px-band--dark h3, .px-band--dark h4 { color: #FFFFFF; } .px-band--dark p { color: rgba(255,255,255,.8); } .px-rule { height: 1px; border: 0; background: var(--grad-edge); opacity: .6; margin: 0; } .px-eyebrow-center { display: flex; flex-direction: column; align-items: center; text-align: center; } /* fluid section rhythm */ .premium .section { padding: var(--rhythm) 0; } /* ---------- hero ---------- */ .px-hero { position: relative; min-height: 88vh; display: flex; align-items: center; background: var(--grad-stage); color: #E6F0EB; overflow: hidden; padding: clamp(48px,6vh,90px) 0 clamp(56px,7vh,92px); } .px-hero__layer { position: absolute; inset: 0; pointer-events: none; } .px-hero__grid { background-image: linear-gradient(rgba(70,100,130,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(70,100,130,0.08) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(110% 90% at 70% 12%, #000 0%, transparent 72%); } .px-hero__glow { background: radial-gradient(46% 50% at 80% 18%, rgba(122,230,175,.25), transparent 70%), radial-gradient(40% 45% at 12% 88%, rgba(78,140,235,.28), transparent 72%); } .px-hero__net { width: 100%; height: 100%; opacity: .9; } .px-hero .container { position: relative; z-index: 2; } .premium .px-hero .container { max-width: 1320px; } .px-hero__grid-2 { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(30px,5vw,64px); align-items: center; } .premium .px-hero__grid-2 { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); } .px-hero__title { font-family: var(--ff-display); font-size: var(--fs-display); line-height: 1.06; letter-spacing: -.02em; color: #FFFFFF; margin: 0 0 22px; font-weight: 800; } .px-hero__title .grad { background: var(--grad-cine); -webkit-background-clip: text; background-clip: text; color: transparent; } .px-hero__lead { font-size: clamp(1.05rem,1.5vw,1.32rem); color: rgba(255,255,255,.88); max-width: 40ch; margin: 0 0 16px; line-height: 1.55; } .px-hero__sub { font-family: var(--ff-head); font-weight: 600; font-size: .98rem; color: #B9E9D2; max-width: 52ch; margin: 0 0 28px; } .px-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; } .btn--xl { padding: 17px 30px; font-size: 1.02rem; border-radius: 14px; } .btn--primary.px-pulse { animation: pxPulse 3.4s ease-in-out infinite; } @keyframes pxPulse { 0%,100%{ box-shadow: 0 10px 26px rgba(23,138,84,.30); } 50%{ box-shadow: 0 14px 44px rgba(23,138,84,.52);} } /* hero stage (lion + orbit) */ .px-hero__stage { position: relative; min-height: min(62vw,520px); display: grid; place-items: center; } .px-hero__halo { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(30,158,99,.30), transparent 62%); filter: blur(8px); animation: pxBreath 6s ease-in-out infinite; } @keyframes pxBreath { 0%,100%{ transform: scale(.96); opacity:.8;} 50%{ transform: scale(1.06); opacity:1;} } .px-hero__lion { position: relative; width: min(74%,430px); z-index: 2; filter: drop-shadow(0 26px 50px rgba(14,40,66,0.21)); } .px-ring { position: absolute; border: 1px solid rgba(30,158,99,.22); border-radius: 50%; } .px-ring.r1 { width: 70%; aspect-ratio:1; animation: pxSpin 28s linear infinite; } .px-ring.r2 { width: 90%; aspect-ratio:1; border-style: dashed; border-color: rgba(78,140,235,.18); animation: pxSpin 46s linear infinite reverse; } @keyframes pxSpin { to { transform: rotate(360deg);} } /* trust strip below hero */ .px-trust { position: relative; z-index: 2; margin-top: clamp(34px,5vw,56px); border-top: 1px solid rgba(70,100,130,0.16); padding-top: 26px; display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; } .px-trust .t-k { font-family: var(--ff-head); font-weight: 800; font-size: 1.02rem; color: #FFFFFF; letter-spacing: -.01em; } .px-trust .t-k em { font-style: normal; color: #7AE6AF; } .px-trust .t-l { font-size: .82rem; color: #5A6B7A; margin-top: 4px; line-height: 1.4; } /* ---------- materials marquee ---------- */ .px-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .px-marquee__row { display: inline-flex; gap: 14px; padding: 6px 0; white-space: nowrap; animation: pxMarq 34s linear infinite; } .px-marquee:hover .px-marquee__row { animation-play-state: paused; } .px-marq-chip { font-family: var(--ff-head); font-weight: 600; font-size: .9rem; letter-spacing: .02em; padding: 9px 18px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); background: var(--chip-bg); } @keyframes pxMarq { to { transform: translateX(-50%);} } /* ---------- premium cards ---------- */ .px-cardgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,1.6vw,22px); } .px-cardgrid.cols-2 { grid-template-columns: repeat(2,1fr); } .px-card { position: relative; border-radius: 16px; padding: 26px 24px; overflow: hidden; background: var(--panel-grad); border: 1px solid var(--line); transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s, border-color .28s; } .px-card::after { content:""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad-cine); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; pointer-events: none; } .px-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; } .px-card:hover::after { opacity: 1; } .px-band--dark .px-card { background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(240,244,242,.9)); border-color: rgba(70,100,130,0.128); } .px-card h3 { margin: 4px 0 8px; } .px-card p { margin: 0; font-size: .95rem; } .px-card__ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; background: var(--icon-tile-teal-bg); border: 1px solid var(--icon-tile-teal-bd); } .px-card__ic svg { width: 23px; height: 23px; stroke: var(--teal); fill: none; stroke-width: 1.9; } .px-card__ic.green { background: rgba(35,160,95,.10); border-color: rgba(35,160,95,.3); } .px-card__ic.green svg { stroke: var(--green); } .px-card__ic.cyan { background: rgba(78,140,235,.10); border-color: rgba(78,140,235,.3); } .px-card__ic.cyan svg { stroke: var(--cyan); } .px-card__n { position: absolute; top: 16px; right: 20px; font-family: var(--ff-head); font-weight: 800; font-size: 1.5rem; color: transparent; -webkit-text-stroke: 1px var(--line-strong); opacity: .7; } /* ---------- cinema frame for animations/video ---------- */ .px-cinema { position: relative; margin: 0 auto; border-radius: 18px; overflow: hidden; border: 1px solid rgba(30,158,99,.22); background: var(--ink); box-shadow: 0 40px 90px -30px rgba(14,40,66,0.245), var(--glow-teal); } .px-cinema::before { content:""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 120px rgba(14,40,66,0.175); } .px-cinema .ratio { position: relative; width: 100%; padding-top: 66.6667%; } .px-cinema iframe, .px-cinema video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover; } .px-cinema__cap { position: absolute; left: 18px; bottom: 14px; z-index: 4; font-family: var(--ff-head); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(234,241,245,.8); display: inline-flex; align-items: center; gap: 8px; } .px-cinema__cap .live { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: pxBlink 1.8s infinite; } @keyframes pxBlink { 50% { opacity: .35; } } /* ---------- trade > partner > invest ladder ---------- */ .px-ladder { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; } .px-ladder::before { content:""; position: absolute; top: 40px; left: 8%; right: 8%; height: 2px; background: var(--grad-edge); opacity: .55; } .px-rung { position: relative; padding: 30px 26px; border-radius: 16px; background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(240,244,242,.92)); border: 1px solid rgba(70,100,130,0.144); } .px-rung__num { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-family: var(--ff-head); font-weight: 800; font-size: 1.3rem; color: var(--ink); background: var(--grad-cine); position: relative; z-index: 1; margin-bottom: 16px; box-shadow: var(--glow-teal); } .px-rung.is-invest .px-rung__num { background: var(--grad-green); box-shadow: var(--glow-green); } .px-rung h3 { color: #0E2233; margin-bottom: 8px; } .px-rung p { color: #46545F; font-size: .95rem; margin: 0; } /* ---------- reveal motion ---------- */ .px-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); } .px-reveal.in { opacity: 1; transform: none; } /* ---------- split feature ---------- */ .px-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px); align-items: center; } .px-split.wide-left { grid-template-columns: 1.1fr .9fr; } /* ---------- responsive ---------- */ @media (max-width: 1040px){ .px-hero__grid-2 { grid-template-columns: 1fr; gap: 36px; } .px-hero__stage { min-height: 360px; } .px-cardgrid { grid-template-columns: repeat(2,1fr); } .px-split { grid-template-columns: 1fr; } .px-trust { grid-template-columns: repeat(2,1fr); gap: 18px; } } @media (max-width: 640px){ .px-hero { min-height: auto; padding-top: 92px; padding-bottom: 42px; } .px-hero__grid-2 { gap: 18px; } .px-hero__stage--roar { order: -1; } .px-hero__title { font-size: clamp(2.1rem, 12.5vw, 3rem); margin-bottom: 16px; } .px-hero__lead { font-size: 1rem; } .px-hero__sub { font-size: .92rem; margin-bottom: 22px; } .px-hero__cta { gap: 10px; } .px-hero__cta .btn { width: 100%; justify-content: center; } .px-trust { margin-top: 28px; padding-top: 18px; gap: 14px; } .px-cardgrid, .px-cardgrid.cols-2 { grid-template-columns: 1fr; } .px-ladder { grid-template-columns: 1fr; } .px-ladder::before { display: none; } .px-trust { grid-template-columns: 1fr 1fr; } .px-cinema .ratio { padding-top: 75%; } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ .px-reveal { opacity: 1; transform: none; transition: none; } .px-marquee__row, .px-ring, .px-hero__halo, .btn--primary.px-pulse, .px-cinema__cap .live { animation: none; } } /* desk animation: fixed cinematic frame on desktop; static poster on small screens */ .px-cinema__poster { display: none; width: 100%; height: auto; } @media (max-width: 640px){ .px-cinema--desk .ratio { display: none; } .px-cinema--desk .px-cinema__poster { display: block; } } /* ---------- site-wide premium rollout ---------- */ .premium { background: radial-gradient(900px 520px at 88% 8%, rgba(30,158,99,.10), transparent 62%), radial-gradient(720px 440px at 7% 38%, rgba(78,140,235,.08), transparent 70%), #FFFFFF; } .premium .site-header { background: rgba(250,252,253,.82); backdrop-filter: blur(16px) saturate(130%); border-bottom-color: rgba(240,244,242,.08); } .premium .brand img { filter: drop-shadow(0 10px 22px rgba(3,9,14,.10)); } .premium .nav-links a { border-radius: 10px; } .premium .dropdown { border-color: rgba(30,158,99,.16); box-shadow: 0 24px 70px rgba(3,9,14,.18); } .premium .page-hero { min-height: clamp(420px, 54vh, 620px); display: flex; align-items: center; color: #26313D; background: var(--grad-stage); padding-top: clamp(84px, 9vw, 136px); isolation: isolate; } .premium .page-hero::before { background: linear-gradient(rgba(70,100,130,0.064) 1px, transparent 1px), linear-gradient(90deg, rgba(70,100,130,0.064) 1px, transparent 1px); background-size: 68px 68px; mask-image: radial-gradient(110% 80% at 72% 14%, #000 20%, transparent 78%); opacity: .8; } .premium .page-hero::after { content: ""; position: absolute; inset: auto -12% -34% 38%; height: 58%; background: radial-gradient(circle, rgba(30,158,99,.22), transparent 66%); filter: blur(4px); pointer-events: none; z-index: 0; } .premium .page-hero .container { max-width: 980px; } .premium .page-hero h1 { color: #FFFFFF; font-size: clamp(2.45rem, 5.6vw, 4.9rem); line-height: 1.04; letter-spacing: -.02em; max-width: 11.8ch; } .premium .page-hero .lead { color: rgba(255,255,255,.88); font-size: clamp(1.05rem, 1.35vw, 1.28rem); max-width: 58ch; } .premium .breadcrumb, .premium .breadcrumb a, .premium .breadcrumb .sep { color: rgba(218,230,236,.70); } .premium .page-hero .eyebrow, .premium .section-head .eyebrow, .premium .eyebrow { color: var(--accent-text); letter-spacing: .22em; } .premium .section-head h2 { font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1.08; letter-spacing: -.018em; } .premium .section--dark, .premium .theme-dark.section--alt { background: var(--grad-stage); } .premium .section--alt:not(.theme-dark) { background: radial-gradient(860px 460px at 88% 0%, rgba(30,158,99,.08), transparent 62%), linear-gradient(180deg, #FFFFFF 0%, #F5F6F7 100%); } .premium .card, .premium .step, .premium .audience-card, .premium .buy-card, .premium .faq, .premium .quote, .premium .callout, .premium .rtable-wrap, .premium .form { border-radius: 16px; border-color: rgba(240,244,242,.10); background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(248,242,227,.9)); box-shadow: 0 18px 50px rgba(3,9,14,.07); } .premium .section--dark .card, .premium .theme-dark .card, .premium .section--dark .step, .premium .theme-dark .step, .premium .section--dark .callout, .premium .theme-dark .callout, .premium .section--dark .quote, .premium .theme-dark .quote { background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.045)); border-color: rgba(255,255,255,.16); box-shadow: 0 22px 70px rgba(4,16,28,.35); backdrop-filter: blur(8px); } .premium .theme-dark .rtable-wrap { background:#FFFFFF; } .premium .theme-dark .form { background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(240,244,242,.95)); } .theme-dark .rtable th { color: #0E2233; } .theme-dark .rtable td { color: #2C3A49; } .premium .card::before, .premium .buy-card::before { height: 3px; background: var(--grad-cine); } .premium .card:hover, .premium .buy-card:hover, .premium .audience-card:hover { transform: translateY(-6px); border-color: rgba(30,158,99,.36); box-shadow: 0 24px 70px rgba(3,9,14,.13), 0 0 0 1px rgba(30,158,99,.08); } .premium .figure, .premium .figure--banner { border-radius: 18px; overflow: hidden; box-shadow: 0 28px 80px rgba(3,9,14,.12); } .premium .anim-embed, .premium .video-embed { border-radius: 18px; border-color: rgba(30,158,99,.22); box-shadow: 0 40px 90px -32px rgba(14,40,66,0.182), var(--glow-teal); background: var(--ink); } .premium .anim-embed::after, .premium .video-embed::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 90px rgba(14,40,66,0.119); } .premium .video-embed { position: relative; overflow: hidden; } .premium .compare .col { border-radius: 16px; box-shadow: 0 18px 50px rgba(3,9,14,.07); } .premium .tag, .premium .chip, .premium .px-marq-chip { box-shadow: inset 0 1px 0 rgba(70,100,130,0.3); } .premium .form { padding: clamp(22px, 3vw, 34px); } .premium .field input, .premium .field select, .premium .field textarea, .premium .route-opt label { border-radius: 12px; } .premium .site-footer { position: relative; overflow: hidden; background: var(--ink); } .premium .site-footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(560px 300px at 82% 0%, rgba(30,158,99,.12), transparent 70%), linear-gradient(rgba(70,100,130,0.056) 1px, transparent 1px), linear-gradient(90deg, rgba(70,100,130,0.056) 1px, transparent 1px); background-size: auto, 72px 72px, 72px 72px; opacity: .9; } .premium .site-footer .container { position: relative; z-index: 1; } .premium .cookie { border-color: rgba(30,158,99,.22); box-shadow: 0 24px 80px rgba(14,40,66,0.133), var(--glow-teal); } .premium .fade-up { transform: translateY(24px); transition: opacity .72s cubic-bezier(.2,.7,.2,1), transform .72s cubic-bezier(.2,.7,.2,1); } .premium .fade-up.in { transform: none; } .px-hero__stage--roar { min-height: min(70vw, 660px); } .px-roar-embed { position: relative; width: min(100%, 980px); aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; border: 1px solid rgba(30,158,99,.24); background: #0E2233; box-shadow: 0 40px 110px rgba(14,40,66,0.168), var(--glow-teal); clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); } .px-roar-embed::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(70,100,130,0.16), transparent 28%, transparent 74%, rgba(30,158,99,.10)); box-shadow: inset 0 0 0 1px rgba(30,158,99,.08); } .px-roar-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .premium .split--chemistry { grid-template-columns: minmax(0, .92fr) minmax(620px, 1.08fr); gap: clamp(28px, 3.4vw, 48px); } .premium .chemistry-table-panel { min-width: 0; } .premium .chemistry-table-panel .rtable-wrap { overflow: visible; } .premium .chemistry-table-panel .rtable { min-width: 0; width: 100%; table-layout: fixed; font-size: .86rem; } .premium .chemistry-table-panel .rtable th, .premium .chemistry-table-panel .rtable td { padding: 12px 13px; line-height: 1.35; overflow-wrap: anywhere; word-break: normal; } .premium .chemistry-table-panel .rtable thead th { font-size: .72rem; letter-spacing: .045em; } .premium .chemistry-table-panel .rtable th:nth-child(1), .premium .chemistry-table-panel .rtable td:nth-child(1) { width: 21%; } .premium .chemistry-table-panel .rtable th:nth-child(2), .premium .chemistry-table-panel .rtable td:nth-child(2) { width: 34%; } .premium .chemistry-table-panel .rtable th:nth-child(3), .premium .chemistry-table-panel .rtable td:nth-child(3) { width: 45%; } @media (max-width: 1040px){ .premium .px-hero__grid-2 { grid-template-columns: 1fr; } .premium .page-hero h1 { max-width: 13ch; } .premium .split--chemistry { grid-template-columns: 1fr; } } @media (max-width: 640px){ .premium .page-hero { min-height: auto; padding-top: 104px; padding-bottom: 42px; } .premium .page-hero h1 { max-width: 100%; } .premium .px-hero__grid-2 { grid-template-columns: 1fr; } .px-hero__stage--roar { min-height: 225px; align-items: end; } .px-roar-embed { width: 100%; border-radius: 14px; } .premium .chemistry-table-panel .rtable { font-size: .78rem; } .premium .chemistry-table-panel .rtable th, .premium .chemistry-table-panel .rtable td { padding: 9px 8px; } } /* ---------- roaring hero lion ---------- */ .lion-roars .px-hero__lion { transform-origin: 58% 56%; animation: pxLionRoar 6.5s ease-in-out 1.2s infinite; } @keyframes pxLionRoar { 0%, 60%, 100% { transform: scale(1) rotate(0); filter: drop-shadow(0 26px 50px rgba(14,40,66,0.21)); } 66% { transform: scale(1.065) rotate(-1.6deg); filter: drop-shadow(0 26px 50px rgba(14,40,66,0.21)) drop-shadow(0 0 34px rgba(30,158,99,.6)); } 72% { transform: scale(.99) rotate(1deg); } 79% { transform: scale(1.035) rotate(-.6deg); } 88% { transform: scale(1) rotate(0); filter: drop-shadow(0 26px 50px rgba(14,40,66,0.21)); } } /* roar shock-rings reuse the breathing halo for an extra pulse during the roar */ .lion-roars .px-hero__halo { animation: pxRoarHalo 6.5s ease-in-out 1.2s infinite; } @keyframes pxRoarHalo { 0%, 60%, 100% { transform: scale(.96); opacity: .8; } 68% { transform: scale(1.18); opacity: 1; } 85% { transform: scale(1.02); opacity: .85; } } /* radiating roar lines */ .px-roar { position: absolute; left: 50%; top: 52%; width: 50%; height: 34%; transform: translate(-50%,-50%); z-index: 3; pointer-events: none; } .px-roar span { position: absolute; left: 50%; top: 50%; width: 34px; height: 3px; border-radius: 99px; background: linear-gradient(90deg, var(--green), var(--teal), transparent); box-shadow: 0 0 16px rgba(30,158,99,.85); opacity: 0; transform-origin: left center; } .px-roar span:nth-child(1) { --r: -150deg; } .px-roar span:nth-child(2) { --r: -168deg; } .px-roar span:nth-child(3) { --r: 180deg; } .px-roar span:nth-child(4) { --r: 168deg; } .px-roar span:nth-child(5) { --r: 150deg; } .lion-roars .px-roar span { animation: pxRoarLine 6.5s ease-out 1.2s infinite; } @keyframes pxRoarLine { 0%, 60%, 100% { opacity: 0; width: 26px; transform: rotate(var(--r)) translateX(0) scaleX(.3); } 67% { opacity: 1; } 84% { opacity: 0; width: 120px; transform: rotate(var(--r)) translateX(120px) scaleX(1); } } @media (prefers-reduced-motion: reduce){ .lion-roars .px-hero__lion, .lion-roars .px-hero__halo, .lion-roars .px-roar span { animation: none; } .px-roar { display: none; } } /* ---------- hero text / animation rebalance (2026-06-15) ---------- */ /* Text was boxed into the narrow column (.72fr) while the animation took the wide column (1.28fr), forcing the 5rem headline to wrap to ~5 lines and making the copy block far taller than the animation. Even the columns and cap the headline so the two sides sit in proportion. */ .premium .px-hero__grid-2 { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 4vw, 56px); } .premium .px-hero__title { font-size: clamp(2.2rem, 3.6vw, 3.5rem); max-width: 17ch; } @media (max-width: 1040px){ .premium .px-hero__title { font-size: clamp(2.1rem, 6vw, 3rem); max-width: 20ch; } } /* ---------- chemistry table readability (2026-06-15) ---------- */ /* On the dark band the dividers were nearly invisible (line alpha .14), text used the dim grey, the font was small (.86rem) and overflow-wrap: anywhere broke words mid-word in tight cells. Restore a clear grid: stronger dividers, zebra rows, brighter text, no mid-word breaks. */ .theme-dark .chemistry-table-panel .rtable-wrap { border-color: rgba(30,158,99,.30); background: rgba(70,100,130,0.029); } .premium .chemistry-table-panel .rtable { font-size: .92rem; } .premium .chemistry-table-panel .rtable th, .premium .chemistry-table-panel .rtable td { padding: 14px 16px; line-height: 1.45; overflow-wrap: break-word; /* break only when a word truly overflows */ word-break: normal; hyphens: none; } .theme-dark .chemistry-table-panel .rtable thead th { background: rgba(30,158,99,.09); color: #F2F5F4; border-bottom: 2px solid rgba(30,158,99,.48); font-size: .74rem; } .theme-dark .chemistry-table-panel .rtable tbody th, .theme-dark .chemistry-table-panel .rtable tbody td { border-bottom: 1px solid rgba(30,158,99,.20); } .theme-dark .chemistry-table-panel .rtable tbody tr:nth-child(even) th, .theme-dark .chemistry-table-panel .rtable tbody tr:nth-child(even) td { background: rgba(70,100,130,0.064); } .theme-dark .chemistry-table-panel .rtable tbody th { color: #FFFFFF; } .theme-dark .chemistry-table-panel .rtable tbody td { color: #2C3A49; } /* widths: trim family column, give the long 'route' column more room */ .premium .chemistry-table-panel .rtable th:nth-child(1), .premium .chemistry-table-panel .rtable td:nth-child(1) { width: 18%; } .premium .chemistry-table-panel .rtable th:nth-child(2), .premium .chemistry-table-panel .rtable td:nth-child(2) { width: 34%; } .premium .chemistry-table-panel .rtable th:nth-child(3), .premium .chemistry-table-panel .rtable td:nth-child(3) { width: 48%; } /* ---------- dark-band data tables: general readability (2026-06-15) ---------- */ /* Applies the same legibility fix as the chemistry table to every .rtable sitting on a dark band (e.g. trading & offtake "components of a deal"): visible dividers, teal header underline, zebra rows, brighter text. */ .theme-dark .rtable-wrap { border-color: rgba(30,158,99,.28); background: rgba(70,100,130,0.029); } .theme-dark .rtable thead th { background: rgba(30,158,99,.09); color: #F2F5F4; border-bottom: 2px solid rgba(30,158,99,.48); } .theme-dark .rtable tbody th, .theme-dark .rtable tbody td { border-bottom: 1px solid rgba(30,158,99,.20); } .theme-dark .rtable tbody tr:nth-child(even) th, .theme-dark .rtable tbody tr:nth-child(even) td { background: rgba(70,100,130,0.064); } .theme-dark .rtable tbody th { color: #FFFFFF; } .theme-dark .rtable tbody td { color: #2C3A49; } /* ---------- dark-band tables: keep full-width table + scroll (2026-06-15) ---------- */ /* These structural tables keep their natural width and scroll horizontally inside the narrower split column; a fade + hint (see below) signals it. */ .theme-dark .rtable th, .theme-dark .rtable td { overflow-wrap: break-word; word-break: normal; } /* ---------- horizontal-scroll affordance for data tables (2026-06-15) ---------- */ /* premium.js wraps each .rtable-wrap in a .rtable-scroller and adds the fade + hint, toggling .is-scrollable (more to see) and .is-end (scrolled to end). */ .rtable-scroller { position: relative; } .rtable-fade, .rtable-hint { position: absolute; opacity: 0; pointer-events: none; transition: opacity .28s ease; } .rtable-scroller.is-scrollable .rtable-fade, .rtable-scroller.is-scrollable .rtable-hint { opacity: 1; } .rtable-scroller.is-end .rtable-fade, .rtable-scroller.is-end .rtable-hint { opacity: 0; } .rtable-fade { top: 0; right: 0; bottom: 0; width: 64px; border-radius: 0 var(--radius) var(--radius) 0; background: linear-gradient(90deg, rgba(234,238,240,0) 0%, rgba(234,238,240,.96) 78%); } .theme-dark .rtable-fade { background: linear-gradient(90deg, rgba(240,244,242,0) 0%, rgba(240,244,242,.94) 78%); } .rtable-hint { right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--ff-head); font-weight: 700; font-size: .7rem; letter-spacing: .045em; text-transform: uppercase; color: #0E2233; background: var(--teal); padding: 6px 11px; border-radius: 999px; box-shadow: 0 6px 18px rgba(14,40,66,0.133); } .rtable-hint .arr { animation: rtableNudge 1.5s ease-in-out infinite; } @keyframes rtableNudge { 0%,100%{ transform: translateX(0);} 50%{ transform: translateX(4px);} } @media (prefers-reduced-motion: reduce){ .rtable-hint .arr { animation: none; } } /* ============================================================ PREMIUM REFINEMENT PASS (2026-06-15) Softer depth, more whitespace, editorial type, and a real-photography treatment for the Battery Images set. ============================================================ */ /* 1 — Soften neon glows into premium layered shadow + faint hairline */ .premium { --glow-teal: 0 0 0 1px rgba(30,158,99,.14), 0 34px 80px -38px rgba(4,28,32,.70); --glow-green: 0 0 0 1px rgba(35,160,95,.16), 0 34px 80px -38px rgba(8,46,26,.66); } .premium .px-hero__glow { opacity: .72; } .px-progress { box-shadow: 0 0 10px rgba(30,158,99,.4); } @keyframes pxPulse { 0%,100% { box-shadow: 0 10px 24px rgba(35,160,95,.20); } 50% { box-shadow: 0 16px 36px rgba(35,160,95,.34); } } /* 2 — More breathing room */ .premium .section-head { margin-bottom: clamp(36px, 4.4vw, 60px); } .premium .section-head .lead { margin-top: 14px; } .premium .figure--banner { margin-top: clamp(36px, 4vw, 56px); margin-bottom: clamp(36px, 4vw, 56px); } /* 3 — Larger, tighter, more editorial section headings */ .premium .section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); letter-spacing: -.022em; line-height: 1.06; } /* 4 — Real-photography treatment (Battery Images) --------------------------- Wrap any photo in

to crop any source orientation to a clean, consistent frame with a subtle brand finish. */ .premium .photo { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: #0E2233; border: 1px solid rgba(30,158,99,.16); box-shadow: 0 34px 80px -40px rgba(3,9,14,.62); } .premium .photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .premium .photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(240,244,242,0) 58%, rgba(240,244,242,.42) 100%); box-shadow: inset 0 0 0 1px rgba(70,100,130,0.064); } .premium .photo--ultra { aspect-ratio: 21 / 9; } .premium .photo--wide { aspect-ratio: 16 / 9; } .premium .photo--43 { aspect-ratio: 4 / 3; } .premium .photo--square{ aspect-ratio: 1 / 1; } .premium .photo--tall { aspect-ratio: 3 / 4; } .premium .photo--caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px 18px; font-family: var(--ff-head); font-weight: 600; font-size: .82rem; color: #26313D; letter-spacing: .01em; } /* image figure used in a 2-up split: fill the column height */ .premium .split .photo, .premium .split--chemistry .photo { height: 100%; min-height: 280px; } /* 5 — Full-bleed cinematic media band (signature moment) --------------------

…overlaid copy…

*/ .premium .media-band { position: relative; overflow: hidden; min-height: clamp(340px, 44vw, 560px); display: flex; align-items: center; } .premium .media-band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .premium .media-band::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(3,9,14,.90) 0%, rgba(3,9,14,.62) 46%, rgba(3,9,14,.18) 100%), linear-gradient(0deg, rgba(3,9,14,.66), rgba(3,9,14,0) 58%); } .premium .media-band .container { position: relative; z-index: 2; padding-top: clamp(48px,6vw,90px); padding-bottom: clamp(48px,6vw,90px); color: rgba(255,255,255,.88); } .premium .media-band h2 { color: #FFFFFF; } .premium .media-band p { color: rgba(255,255,255,.85); } .premium .media-band .eyebrow { color: #8FE6B8; } @media (max-width: 700px){ .premium .media-band::after { background: linear-gradient(0deg, rgba(3,9,14,.92) 8%, rgba(3,9,14,.5) 60%, rgba(3,9,14,.35) 100%); } } /* ============================================================ P2 / P3 ENHANCEMENTS (2026-06-15) Signature motion, photo galleries, image cards, journey. ============================================================ */ /* --- P2/P3 · animated 'aurora' behind the hero (signature motion) --- */ .premium .px-hero::before { content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none; background: radial-gradient(38% 50% at 22% 30%, rgba(30,158,99,.20), transparent 60%), radial-gradient(34% 46% at 80% 22%, rgba(78,140,235,.18), transparent 62%), radial-gradient(42% 52% at 64% 82%, rgba(35,160,95,.12), transparent 60%); filter: blur(22px); animation: pxAurora 20s ease-in-out infinite alternate; } @keyframes pxAurora { 0% { transform: translate3d(-2%, -1%, 0) scale(1.02); } 50% { transform: translate3d(2%, 2%, 0) scale(1.08); } 100% { transform: translate3d(-1%, 1%, 0) scale(1.04); } } @media (prefers-reduced-motion: reduce){ .premium .px-hero::before { animation: none; } } /* --- photo gallery grid --- */ .premium .photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; } .premium .photo-grid .photo { aspect-ratio: 4 / 3; } .premium .photo-grid .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 12px 13px 11px; font-family: var(--ff-head); font-weight: 600; font-size: .8rem; color: #F5F6F7; letter-spacing: .01em; } .premium .photo-grid .photo::after { background: linear-gradient(180deg, rgba(240,244,242,0) 42%, rgba(240,244,242,.72) 100%); } /* --- image card (photo header + text) --- */ .premium .media-card { background: var(--panel-grad); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s, border-color .28s; } .premium .media-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--line-strong); } .premium .media-card__img { aspect-ratio: 16 / 10; overflow: hidden; background: #0E2233; } .premium .media-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s ease; } .premium .media-card:hover .media-card__img img { transform: scale(1.05); } .premium .media-card__body { padding: 20px 22px 24px; } .premium .media-card__body h3 { margin: 0 0 8px; } .premium .media-card__body p { margin: 0; } /* --- P3 · process journey strip (source -> refiner) --- */ .premium .journey { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: jstep; } .premium .journey__stage { position: relative; background: var(--panel-grad); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; } .premium .journey__img { aspect-ratio: 4 / 3; overflow: hidden; background: #0E2233; position: relative; } .premium .journey__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .premium .journey__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(240,244,242,0) 50%, rgba(240,244,242,.5)); } .premium .journey__num { position: absolute; top: 10px; left: 10px; z-index: 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--grad-cine); color: #0E2233; font-family: var(--ff-head); font-weight: 800; font-size: .9rem; box-shadow: var(--glow-teal); } .premium .journey__body { padding: 14px 15px 18px; } .premium .journey__body h4 { margin: 0 0 6px; font-size: 1rem; } .premium .journey__body p { margin: 0; font-size: .86rem; color: var(--text-dim); line-height: 1.45; } .premium .journey__stage:not(:last-child)::after { content: ""; position: absolute; top: 30%; right: -9px; width: 18px; height: 2px; background: var(--teal); opacity: .6; z-index: 3; } @media (max-width: 980px){ .premium .journey { grid-template-columns: repeat(2, 1fr); } .premium .journey__stage:not(:last-child)::after { display: none; } } @media (max-width: 560px){ .premium .journey { grid-template-columns: 1fr; } } /* ============================================================ MOBILE NAVIGATION FIX (2026-06-15) One readable, uniform mobile menu on every page. Previously the open panel inherited a light background while dark-theme pages kept light text (invisible), and the panel top didn't match the real header height. ============================================================ */ @media (max-width: 1040px){ /* consistent dark header bar so brand + burger are always visible */ .premium .site-header, .premium .site-header[data-scrolled]{ background: rgba(240,244,242,.95); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid rgba(70,100,130,0.128); } .premium .brand, .premium .brand::after{ color: #0E2233; } .premium .nav-toggle{ border-color: rgba(70,100,130,0.3); } .premium .nav-toggle svg{ stroke: #26313D; } /* the slide-down menu panel */ .premium .nav-links{ position: fixed; left: 0; right: 0; top: 74px; bottom: auto; max-height: calc(100vh - 74px); max-height: calc(100dvh - 74px); overflow-y: auto; -webkit-overflow-scrolling: touch; flex-direction: column; align-items: stretch; background: #FFFFFF; border-top: 1px solid rgba(30,158,99,.25); box-shadow: 0 30px 60px rgba(14,40,66,0.193); padding: 8px 16px calc(22px + env(safe-area-inset-bottom)); gap: 0; transform: translateY(-135%); visibility: hidden; transition: transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s linear .3s; } .premium .nav-links.open{ transform: translateY(0); visibility: visible; transition: transform .3s cubic-bezier(.2,.7,.2,1); } /* keep the panel flush to the (shorter) header once scrolled */ .premium .site-header[data-scrolled] .nav-links{ top: 64px; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); } .premium .nav-links > li{ border-bottom: 1px solid rgba(70,100,130,0.112); } .premium .nav-links > li:last-child{ border-bottom: 0; } .premium .nav-links a{ color: #2C3A49; padding: 15px 10px; font-size: 1.05rem; border-radius: 8px; } .premium .nav-links a:hover, .premium .nav-links a[aria-current="page"]{ background: rgba(30,158,99,.12); color: #0E2233; } .premium .nav-links a[aria-current="page"]{ color: var(--gold-deep); } .premium .has-drop > a .caret{ transform: rotate(180deg); } /* dropdown shown inline within the dark panel */ .premium .dropdown{ position: static; opacity: 1; visibility: visible; transform: none; background: transparent; border: 0; box-shadow: none; padding: 2px 0 10px 14px; min-width: 0; } .premium .dropdown a{ color: #5A6B7A; padding: 12px 10px; font-size: .98rem; } .premium .dropdown a small{ color: #6E7D8C; } .premium .dropdown a:hover{ background: rgba(30,158,99,.10); color: #0E2233; } } /* ============================================================ MOBILE GRAPHICS FIX (2026-06-15) The homepage conduit-map used absolute positioning, so on phones the centre "RAW TG" core and the side nodes overlapped. Stack it cleanly (Sources -> RAW TG -> Routes), matching how the film animations behave on small screens. ============================================================ */ @media (max-width: 640px){ .premium .conduit-map{ display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 18px; } .premium .conduit-map::before, .premium .conduit-lines{ display: none; } .premium .conduit-node{ position: relative; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 100%; } .premium .conduit-node.source{ order: 1; } .premium .conduit-core{ position: relative; left: auto; top: auto; transform: none; width: 100%; height: auto; aspect-ratio: auto; border-radius: 12px; padding: 14px 16px; order: 2; } .premium .conduit-core::after{ display: none; } .premium .conduit-node.dest{ order: 3; } } /* Hero: guarantee no parallax drift and stay centred on tablets/phones */ @media (max-width: 1040px){ .premium .px-hero [data-depth]{ transform: none !important; } .premium .px-hero__stage{ justify-items: center; } .premium .px-roar-embed{ margin-left: auto; margin-right: auto; } } /* ============================================================ DEMO POLISH PASS (2026-06-15) Sticky-header anchor offset, visible keyboard focus, dark iframe placeholders, and back-to-top button. ============================================================ */ /* 1 — in-page anchors land below the sticky header, not under it */ html { scroll-padding-top: 92px; } @media (max-width: 1040px){ html { scroll-padding-top: 80px; } } /* 2 — clear, on-brand keyboard focus (only for keyboard users) */ .premium a:focus-visible, .premium button:focus-visible, .premium .btn:focus-visible, .premium input:focus-visible, .premium select:focus-visible, .premium textarea:focus-visible, .premium .nav-toggle:focus-visible, .premium [tabindex]:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; } /* 3 — dark placeholder behind animation iframes (no white flash on load) */ .premium .anim-embed, .premium .anim-embed .ratio, .premium .px-roar-embed, .premium .video-embed { background: #0E2233; } /* 4 — back-to-top button (injected by premium.js) */ .px-top { position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 120; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--grad-cine); color: #0E2233; border: 0; box-shadow: 0 14px 30px rgba(14,40,66,0.119); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease, visibility .25s; } .px-top.show { opacity: 1; visibility: visible; transform: translateY(0); } .px-top:hover { transform: translateY(-2px); } .px-top svg { width: 22px; height: 22px; stroke: #0E2233; fill: none; stroke-width: 2.4; } @media (prefers-reduced-motion: reduce){ .px-top { transition: none; } } /* ============================================================ v20260709-epr — EPR page, passport detail, insights & proof ============================================================ */ /* — utilities (replacing common inline styles) — */ .px-kicker--center { justify-content: center; } /* — regulatory timeline — */ .px-timeline { position: relative; max-width: 860px; margin: clamp(32px,4vw,52px) auto 0; padding-left: 26px; } .px-timeline::before { content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background: linear-gradient(180deg, var(--teal), var(--cyan) 55%, var(--green)); opacity:.55; border-radius:2px; } .px-tl-item { position: relative; padding: 0 0 clamp(22px,3vw,34px) 26px; } .px-tl-item:last-child { padding-bottom: 0; } .px-tl-item::before { content:""; position:absolute; left:-25px; top:6px; width:14px; height:14px; border-radius:50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(30,158,99,.18); } .px-tl-item.is-milestone::before { background: var(--green); box-shadow: 0 0 0 4px rgba(35,160,95,.2); } .px-tl-date { display:inline-block; font-family: var(--ff-head); font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color: var(--accent-text, var(--teal)); border:1px solid var(--line-strong); border-radius:999px; padding:4px 12px; margin-bottom:10px; } .theme-dark .px-tl-date { color: var(--teal); border-color: rgba(30,158,99,.35); } .px-tl-item h3 { font-size:1.08rem; margin-bottom:6px; } .px-tl-item p { font-size:.95rem; margin:0; max-width:62ch; } /* — battery passport mockup — */ .pass-mock { background:#0C2438; border:1px solid rgba(30,158,99,.28); border-radius:18px; overflow:hidden; box-shadow: 0 24px 60px rgba(14,40,66,0.14); font-size:.9rem; } .pass-mock__head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; background:linear-gradient(90deg, rgba(30,158,99,.14), rgba(78,140,235,.08)); border-bottom:1px solid rgba(30,158,99,.2); } .pass-mock__head strong { font-family:var(--ff-head); color:#F5F6F7; font-size:.95rem; letter-spacing:.02em; } .pass-mock__head small { color:#6E7D8C; display:block; font-size:.74rem; } .pass-mock__status { font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#23A05F; border:1px solid rgba(35,160,95,.4); padding:3px 10px; border-radius:999px; white-space:nowrap; } .pass-mock__body { display:grid; grid-template-columns: 132px 1fr; gap:18px; padding:20px; align-items:start; } .pass-mock__qr { background:#F5F6F7; border-radius:10px; padding:8px; } .pass-mock__qr svg, .pass-mock__qr img { display:block; width:100%; height:auto; } .pass-mock__qr figcaption { font-size:.62rem; color:#5F7181; text-align:center; padding-top:4px; } .pass-mock__rows { display:grid; gap:8px; } .pass-row { display:flex; align-items:baseline; justify-content:space-between; gap:14px; border-bottom:1px dashed rgba(120,140,155,.22); padding-bottom:7px; } .pass-row small { color:#6E7D8C; font-size:.76rem; } .pass-row strong { color:#F5F6F7; font-weight:600; font-size:.84rem; text-align:right; } .pass-mock__foot { padding:12px 20px 16px; border-top:1px solid rgba(30,158,99,.16); color:#6E7D8C; font-size:.72rem; } @media (max-width:560px){ .pass-mock__body { grid-template-columns:1fr; } .pass-mock__qr { max-width:150px; } } /* — data access tier chips — */ .tier { display:inline-block; font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:2px 9px; border-radius:999px; border:1px solid; white-space:nowrap; } .tier--pub { color:#1E9E63; border-color:rgba(30,158,99,.45); } .tier--li { color:#3B6BE8; border-color:rgba(78,140,235,.45); } .tier--auth{ color:#23A05F; border-color:rgba(35,160,95,.45); } :root:not(.theme-dark) .rtable .tier--pub { color:#147A4B; } /* — code snippet block — */ .code-snip { background:#0E2233; border:1px solid rgba(30,158,99,.24); border-radius:14px; overflow:auto; padding:20px 22px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.8rem; line-height:1.65; color:#C9D6CE; box-shadow: 0 18px 44px rgba(14,40,66,0.112); } .code-snip .k { color:#3B6BE8; } .code-snip .s { color:#1E9E63; } .code-snip .n { color:#23A05F; } .code-snip .c { color:#5F7181; } .code-snip-cap { font-size:.78rem; color:var(--text-dim); margin-top:10px; } /* — insights cards — */ .ins-card { display:flex; flex-direction:column; gap:10px; } .ins-card .ins-tag { font-size:.7rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-text, #147A4B); } .theme-dark .ins-card .ins-tag { color: var(--teal); } .ins-card .ins-meta { font-size:.78rem; color:var(--text-faint); margin-top:auto; } /* — article layout — */ .article-body { max-width: 760px; margin: 0 auto; } .article-body h2 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); margin: clamp(30px,4vw,44px) 0 12px; } .article-body p, .article-body li { font-size: 1.01rem; line-height: 1.75; } .article-body ul { padding-left: 20px; margin: 14px 0; } .article-body li { margin-bottom: 8px; } .article-meta { display:flex; gap:14px; flex-wrap:wrap; font-size:.82rem; color:var(--text-faint); margin-top:14px; } /* — security / integration mini-grid — */ .sec-tile { display:flex; gap:14px; align-items:flex-start; } .sec-tile svg { width:22px; height:22px; flex:none; stroke: var(--accent-text, #147A4B); fill:none; stroke-width:2; margin-top:3px; } .theme-dark .sec-tile svg { stroke: var(--teal); } .sec-tile h4 { font-size:.95rem; margin-bottom:4px; } .sec-tile p { font-size:.88rem; margin:0; color:var(--text-dim); } /* ---------- Europe coverage map (hero + coverage sections, Jul 2026) ---------- */ .px-map { display: flex; flex-direction: column; align-items: center; gap: 18px; min-height: 0; } .px-map-svg { width: min(100%, 560px); height: auto; will-change: transform; } .px-map-pulse { animation: pxMapPulse 2.6s ease-out infinite; transform-origin: center; transform-box: fill-box; } @keyframes pxMapPulse { 0% { opacity: .9; transform: scale(.6); } 70% { opacity: 0; transform: scale(1.8); } 100% { opacity: 0; transform: scale(1.8); } } .px-map-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; } .px-map-legend .lg { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ff-head); font-weight: 600; font-size: .78rem; color: var(--text-dim); letter-spacing: .01em; } .px-map-legend .lg::before { content: ""; width: 10px; height: 10px; border-radius: 50%; } .px-map-legend .lg-op::before { background: #1E5C40; } .px-map-legend .lg-op2::before { background: #FFFFFF; border: 2.5px solid #1E5C40; } .px-map-legend .lg-mkt::before { background: #FFFFFF; border: 2px solid #147A4B; } .px-map-legend .lg-route::before { background: #1E5C40; } @media (prefers-reduced-motion: reduce) { .px-map-pulse { animation: none; opacity: 0; } .px-map-svg animateMotion { display: none; } } @media (max-width: 900px) { .px-map-svg { width: min(100%, 440px); } } /* ---------- micro-interaction & focus polish (Jul 2026) ---------- */ :focus-visible { outline: 2px solid var(--forest, #1E5C40); outline-offset: 3px; border-radius: 4px; } .btn:focus-visible { outline-offset: 2px; } .btn { position: relative; overflow: hidden; } .btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s ease; pointer-events: none; } .btn:hover::after { transform: translateX(120%); } .btn:active { transform: translateY(0) scale(.985); } @media (prefers-reduced-motion: reduce) { .btn::after { display: none; } } /* consistent icon voice: gold line icons on champagne tiles */ .px-card__ic svg, .icon-tile svg { stroke-width: 1.8; } .px-card__ic, .icon-tile { color: var(--gold-deep); } /* card lift refinement */ .px-card:hover { transform: translateY(-5px); } .card { transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s, border-color .28s; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); } /* view transitions (progressive enhancement) */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* ---------- obligation checker + market grid (Jul 2026) ---------- */ .ob-tool { max-width: 900px; margin: clamp(26px,3vw,40px) auto 0; background: var(--panel-grad); border: 1px solid var(--line-strong); border-radius: 20px; padding: clamp(22px,3.5vw,40px); box-shadow: var(--shadow-sm); } .ob-step { margin-bottom: 26px; } .ob-step h3 { display: flex; align-items: center; gap: 12px; font-size: 1.06rem; margin-bottom: 14px; } .ob-num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--grad-teal); color: #0E2233; font-family: var(--ff-head); font-size: .9rem; font-weight: 800; } .ob-chips { display: flex; flex-wrap: wrap; gap: 9px; } .ob-chip { position: relative; cursor: pointer; } .ob-chip input { position: absolute; opacity: 0; pointer-events: none; } .ob-chip span { display: inline-block; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-solid); font-family: var(--ff-head); font-weight: 500; font-size: .88rem; color: var(--text-dim); transition: all .16s ease; } .ob-chip:hover span { border-color: var(--line-strong); transform: translateY(-1px); } .ob-chip input:checked + span { background: #EAF3ED; border-color: var(--forest); color: var(--heading); box-shadow: 0 0 0 1px var(--forest), 0 6px 16px rgba(23,138,84,.16); } .ob-chip input:focus-visible + span { outline: 2px solid var(--forest); outline-offset: 2px; } .ob-result { border-top: 1px dashed var(--line-strong); padding-top: 24px; margin-top: 4px; } .ob-result__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .ob-count { font-family: var(--ff-head); font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); } .ob-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .ob-list li { display: grid; gap: 3px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid); } .ob-list li strong { font-family: var(--ff-head); font-size: .95rem; color: var(--heading); } .ob-list li span { font-size: .9rem; color: var(--text-dim); line-height: 1.55; } .mkt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 1000px) { .mkt-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .mkt-grid { grid-template-columns: 1fr; } } .mkt { border: 1px solid var(--line); border-radius: 14px; background: var(--panel-solid); overflow: hidden; transition: border-color .2s, box-shadow .2s; align-self: start; } .mkt[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); } .mkt summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; } .mkt summary::-webkit-details-marker { display: none; } .mkt-flag { font-size: 1.2rem; } .mkt-name { font-family: var(--ff-head); font-weight: 600; font-size: .92rem; color: var(--heading); flex: 1; } .mkt-ic { width: 10px; height: 10px; border-right: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep); transform: rotate(45deg); transition: transform .2s; margin-top: -4px; } .mkt[open] .mkt-ic { transform: rotate(225deg); margin-top: 4px; } .mkt-body { padding: 0 16px 16px; } .mkt-body p { font-size: .88rem; line-height: 1.55; } .mkt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; } .mkt-tags span { font-family: var(--ff-head); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-deep); background: rgba(30,158,99,.09); border: 1px solid rgba(30,158,99,.25); border-radius: 999px; padding: 4px 9px; } /* ---------- scrollytelling: follow one battery (Jul 2026) ---------- */ .scrolly { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px,4vw,64px); margin-top: clamp(26px,3vw,44px); } .scrolly__media { position: relative; } .scrolly__frame { position: sticky; top: 110px; margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3.4; border: 1px solid var(--line-strong); box-shadow: var(--shadow); background: #101D2A; } .scrolly__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity .6s ease, transform 1.4s cubic-bezier(.2,.6,.2,1); } .scrolly__frame img.is-active { opacity: 1; transform: scale(1); } .scrolly__tag { position: absolute; left: 16px; bottom: 16px; z-index: 2; font-family: var(--ff-head); font-weight: 700; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: #FFFFFF; background: rgba(42,33,19,.72); backdrop-filter: blur(6px); border: 1px solid rgba(201,162,39,.4); padding: 8px 14px; border-radius: 999px; } .scrolly__steps { display: flex; flex-direction: column; gap: clamp(90px, 16vh, 150px); padding: 12vh 0 14vh; } .scrolly__step { opacity: .32; transition: opacity .4s ease; } .scrolly__step.is-active { opacity: 1; } .scrolly__step h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); margin-bottom: 8px; } .scrolly__step p { margin: 0; max-width: 46ch; } @media (max-width: 900px) { .scrolly { grid-template-columns: 1fr; } .scrolly__frame { position: relative; top: 0; aspect-ratio: 16/10; } .scrolly__steps { gap: 40px; padding: 26px 0 0; } .scrolly__step { opacity: 1; } .scrolly__media { position: sticky; top: 78px; z-index: 3; } } /* checker teaser band */ .ob-teaser { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; background: linear-gradient(120deg, #FFFFFF 0%, #F8EFD8 100%); border: 1px solid var(--line-strong); border-radius: 20px; padding: clamp(24px,3.5vw,40px); box-shadow: var(--shadow-sm); } /* ---------- regulatory clock (Jul 2026) ---------- */ .clock { display: grid; gap: 10px; } .clock-row { display: grid; grid-template-columns: 84px 110px 1fr; gap: 18px; align-items: start; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-solid); } .clock-row h3 { font-size: 1.02rem; margin-bottom: 4px; font-family: var(--ff-head); font-weight: 700; } .clock-row p { margin: 0; font-size: .92rem; } .clock-date { font-family: var(--ff-head); font-weight: 800; color: var(--heading); font-size: .95rem; padding-top: 2px; } .clock-status { justify-self: start; font-family: var(--ff-head); font-size: .66rem; font-weight: 800; letter-spacing: .12em; padding: 5px 10px; border-radius: 999px; margin-top: 2px; } .clock-status.s-live { background: rgba(35,160,95,.14); color: #09642B; border: 1px solid rgba(35,160,95,.35); } .clock-status.s-next { background: rgba(192,57,43,.1); color: #96281C; border: 1px solid rgba(192,57,43,.3); } .clock-status.s-ahead { background: rgba(30,158,99,.1); color: var(--gold-deep); border: 1px solid rgba(30,158,99,.3); } @media (max-width: 700px) { .clock-row { grid-template-columns: 1fr; gap: 6px; } } .scen-out { border-top: 1px dashed var(--line-strong); padding-top: 12px; font-size: .92rem; } /* ---------- readiness checklist (Jul 2026) ---------- */ .ck-group { margin-bottom: clamp(30px,4vw,44px); } .ck-group h2 { display: flex; align-items: center; gap: 14px; font-size: clamp(1.25rem,2.2vw,1.6rem); } .ck-n { display: inline-grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--grad-teal); color: #0E2233; font-family: var(--ff-head); font-weight: 800; font-size: 1rem; } .ck-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; } .ck-item { display: flex; gap: 14px; align-items: flex-start; padding: 15px 17px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid); } .ck-box { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; border: 2px solid var(--gold-deep); border-radius: 5px; } .ck-item strong { display: block; font-family: var(--ff-head); font-size: .95rem; color: var(--heading); margin-bottom: 2px; } .ck-item span:not(.ck-box) { font-size: .9rem; color: var(--text-dim); line-height: 1.55; } @media print { .site-header, .site-footer, .no-print, .cookie-banner, #cookie-banner, .px-progress, .px-top, .breadcrumb, .cta-band { display: none !important; } body { background: #fff; font-size: 12px; } .page-hero, .section { padding: 12px 0 !important; } .ck-item, .clock-row { break-inside: avoid; } a { color: inherit; text-decoration: none; } } /* flow panels replacing legacy dark animation iframes (Jul 2026) */ .flow-panel { border: 1px solid var(--line-strong); border-radius: 20px; overflow: hidden; background: #F5F7F6; box-shadow: var(--shadow-sm); } @media (max-width: 700px) { .flow-panel svg { min-width: 640px; } .flow-panel { overflow-x: auto; } } /* ============================================================ LUMINOUS LAYER (Jul 2026 v3) — Valpak/Reconomy/Apple synthesis. ============================================================ */ /* concentric loop motif on gradient bands (Reconomy-style) */ .theme-dark { position: relative; } .px-hero.theme-dark::before, .cta-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: repeating-radial-gradient(circle at 12% 110%, transparent 0 110px, rgba(255,255,255,.045) 110px 113px); } .page-hero { background: var(--grad-band); } .page-hero h1, .page-hero .breadcrumb, .page-hero .breadcrumb a { color: #FFFFFF; } .page-hero .lead { color: rgba(255,255,255,.88); } .premium .page-hero .eyebrow { color: #8FE6B8; } .page-hero .breadcrumb .sep, .page-hero .breadcrumb a { color: rgba(255,255,255,.7); } .page-hero .btn--ghost { border-color: rgba(255,255,255,.55); color: #FFFFFF; } .page-hero .btn--ghost:hover { border-color: #FFFFFF; color: #FFFFFF; } .page-hero { position: relative; overflow: hidden; } .page-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55; background: repeating-radial-gradient(circle at 88% -30%, transparent 0 90px, rgba(255,255,255,.05) 90px 93px); } .page-hero .container { position: relative; z-index: 1; } /* pill button focus + hero ghost pairing */ .btn--xl { border-radius: 999px; } /* hero map on gradient: light legend */ .px-hero .px-map-legend .lg { color: rgba(255,255,255,.85); } .px-hero .px-map-legend .lg-op::before { background: #7AE6AF; } .px-hero .px-map-legend .lg-op2::before { background: transparent; border-color: #7AE6AF; } .px-hero .px-map-legend .lg-mkt::before { background: transparent; border-color: rgba(255,255,255,.8); } .px-hero .px-map-legend .lg-route::before { background: #FFFFFF; } .px-hero .px-kicker { color: #8FE6B8; } .px-hero .btn--ghost { border-color: rgba(255,255,255,.55); color: #FFFFFF; } .px-hero .btn--ghost:hover { border-color: #FFFFFF; color: #FFFFFF; } .px-hero__title .grad { background: var(--grad-cine); -webkit-background-clip: text; background-clip: text; color: transparent; } /* status chips on gradient bands */ .theme-dark .clock-status.s-live { background: rgba(122,230,175,.18); color: #A9F0CC; border-color: rgba(122,230,175,.5); } .theme-dark .clock-status.s-next { background: rgba(255,122,105,.16); color: #FFB8AC; border-color: rgba(255,122,105,.45); } .theme-dark .clock-status.s-ahead { background: rgba(255,255,255,.12); color: #D9E5E0; border-color: rgba(255,255,255,.3); } .theme-dark .clock-date { color: #FFFFFF; } /* ---------- showcase media bands (Jul 2026 — Apple-flow imagery) ---------- */ .showcase { margin: clamp(28px,4vw,48px) auto 0; max-width: 980px; } .showcase img { width: 100%; height: auto; display: block; border-radius: 22px; border: 1px solid rgba(14,40,66,.08); box-shadow: 0 30px 70px rgba(8,20,34,.22), 0 6px 18px rgba(8,20,34,.10); } .theme-dark .showcase img { border-color: rgba(255,255,255,.10); box-shadow: 0 30px 70px rgba(2,10,20,.5); } .showcase figcaption { text-align: center; font-family: var(--ff-head); font-weight: 600; font-size: .86rem; color: var(--text-faint); margin-top: 14px; letter-spacing: .01em; } .showcase--tight { max-width: 640px; margin-top: 18px; } .showcase--banner { max-width: 1100px; } .showcase--banner img { border-radius: 18px; } /* photo heroes (Jul 2026): image + navy scrim, white type guaranteed */ .page-hero--photo { background-size: cover !important; background-position: center !important; min-height: clamp(360px, 44vh, 520px); display: flex; align-items: center; border-bottom: 0; } .cta-band--photo { background-size: cover !important; background-position: center !important; } .px-band--dark .eyebrow { color: #8FE6B8; } /* readability on gradient bands (Jul 2026 audit round 2) */ .theme-dark .muted, .px-band--dark .muted { color: rgba(255,255,255,.68) !important; } .theme-dark .showcase figcaption { color: rgba(255,255,255,.72); } .theme-dark h4.muted { color: rgba(255,255,255,.7) !important; } .film-label { color: rgba(240,248,244,.9) !important; } .theme-dark .card-more, .theme-dark .px-card .card-more { color: #A9F0CC; } /* readability round 3 (Jul 2026): component-level fixes on gradient bands */ .px-band--dark .px-card, .px-band--dark .card { background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.045)); border-color: rgba(255,255,255,.16); backdrop-filter: blur(8px); } .px-band--dark .px-card p, .px-band--dark .card p { color: rgba(255,255,255,.82); } .px-band--dark .card-more { color: #A9F0CC; } .theme-dark .rtable, .px-band--dark .rtable { background: #FFFFFF; } .theme-dark .rtable thead th, .px-band--dark .rtable thead th { color: #0E2233 !important; } .theme-dark .rtable td, .theme-dark .rtable tbody th, .px-band--dark .rtable td, .px-band--dark .rtable tbody th { color: #2C3A49 !important; } .theme-dark .tag, .px-band--dark .tag { color: #E2ECE8; border-color: rgba(255,255,255,.3); } .split-legend span { color: #46545F !important; } .theme-dark .clock-row p { color: #D3E1DC; } .theme-dark .clock-status.s-live { color: #C8F7DD; } /* ledger family text on dark screen cards */ .ledger-card strong { color: #FFFFFF; } .ledger-card small { color: rgba(255,255,255,.66); } .theme-dark .clock-status.s-next { color: #FFC9BF; } /* ---------- static tables: no horizontal scrolling, ever (Jul 2026) ---------- */ .rtable-wrap { overflow: hidden; } .rtable-scroller { display: contents; } .rtable-fade, .rtable-hint { display: none !important; } .rtable th, .rtable td { white-space: normal !important; word-break: normal; overflow-wrap: anywhere; } @media (max-width: 860px) { .rtable th, .rtable td { font-size: .84rem; padding: 10px 10px; } } @media (max-width: 640px) { .rtable, .rtable tbody, .rtable tr, .rtable td, .rtable tbody th { display: block; width: 100%; } .rtable thead { display: none; } .rtable tr { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: #FFFFFF; } .rtable tbody th { background: rgba(30,158,99,.08); color: #0E2233 !important; } .rtable td { border-top: 1px solid var(--line); } } /* ---------- cine standard (Jul 2026): content flows over pinned imagery ---------- */ @media (hover: hover) and (pointer: fine) and (min-width: 900px) { .page-hero--photo, .cta-band--photo, .media-band--fixed { background-attachment: fixed, fixed; } } .media-band--fixed { background-size: cover; background-position: center; } .media-band--fixed::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(5,14,24,.88) 0%, rgba(5,14,24,.6) 46%, rgba(5,14,24,.22) 100%); } /* leadership cards (Jul 2026) */ .lead-card { text-align: left; } .lead-avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-family: var(--ff-head); font-weight: 800; font-size: 1.3rem; color: #FFFFFF; background: linear-gradient(135deg, #14324A, #1E5C40); margin-bottom: 14px; box-shadow: 0 8px 20px rgba(14,40,66,.2); } .lead-role { font-family: var(--ff-head); font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 8px; } .lead-card p { font-size: .92rem; } .lead-li { font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; } /* passport demo (Jul 2026) */ .pp-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .pp-tab { font-family: var(--ff-head); font-weight: 700; font-size: .88rem; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: #FFFFFF; color: var(--text-dim); cursor: pointer; } .pp-tab.is-active { background: var(--grad-forest); color: #FFFFFF; border-color: transparent; } .pp-card { background: #0C2438; border-radius: 20px; border: 1px solid rgba(122,230,175,.25); box-shadow: 0 30px 70px rgba(8,20,34,.3); overflow: hidden; } .pp-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 20px 22px; border-bottom: 1px solid rgba(255,255,255,.12); } .pp-head strong { color: #FFFFFF; font-family: var(--ff-head); font-size: 1.05rem; display: block; } .pp-head small { color: rgba(255,255,255,.6); font-size: .76rem; } .pp-qr { background: #fff; border-radius: 8px; padding: 5px; line-height: 0; } .pp-grid { display: grid; grid-template-columns: 1fr 1fr; } .pp-row { padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,.08); } .pp-row small { display: block; color: #8FE6B8; font-family: var(--ff-head); font-weight: 700; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 3px; } .pp-row strong { color: #FFFFFF; font-size: .95rem; font-weight: 600; } .pp-eol { padding: 18px 22px 22px; } .pp-eol small { display: block; color: #8FE6B8; font-family: var(--ff-head); font-weight: 700; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; } .pp-eol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .pp-eol li { color: rgba(255,255,255,.85); font-size: .9rem; display: flex; align-items: center; gap: 10px; } .pp-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.5); flex-shrink: 0; } .pp-dot--green { background: #7AE6AF; box-shadow: 0 0 10px rgba(122,230,175,.6); } @media (max-width: 640px){ .pp-grid { grid-template-columns: 1fr; } } /* hero trust strip: readable over any gradient area (Jul 2026) */ .px-trust { border-top: 0; padding-top: 0; gap: 14px; } .px-trust > div { background: rgba(8,22,38,.42); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 14px 16px; backdrop-filter: blur(6px); } .px-trust .t-k { color: #FFFFFF; } .px-trust .t-l { color: rgba(255,255,255,.88); text-shadow: 0 1px 2px rgba(0,0,0,.25); } @media (max-width: 900px) { .px-trust { grid-template-columns: 1fr 1fr; } } /* ---------- animation shots: shared keyframes (Jul 2026 redesign) ---------- */ @keyframes kbZoom { 0% { transform: scale(1.04); } 50% { transform: scale(1.15); } 100% { transform: scale(1.04); } } @keyframes kbPan { 0% { transform: scale(1.12) translate(-1.5%, 1%); } 100% { transform: scale(1.16) translate(1.5%, -1%); } } @keyframes scanY { 0% { top: -4%; opacity: 0; } 6% { opacity: .95; } 52% { top: 100%; opacity: .95; } 60% { top: 100%; opacity: 0; } 100% { top: -4%; opacity: 0; } } @keyframes sRouteDash { to { stroke-dashoffset: -240; } } @keyframes sPulseRing { 0% { transform: scale(.5); opacity: .85; } 70% { opacity: 0; } 100% { transform: scale(2.4); opacity: 0; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } @keyframes marquee { to { transform: translateX(-50%); } } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes drawX { to { transform: scaleX(1); } } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes softGlow { 0%, 100% { box-shadow: 0 0 0 1px rgba(43,193,120,.30), 0 0 26px rgba(43,193,120,.10); } 50% { box-shadow: 0 0 0 1px rgba(43,193,120,.60), 0 0 40px rgba(43,193,120,.28); } } @keyframes ledgerReveal { 0%, 4% { opacity: 0; transform: translateX(14px); } 12% { opacity: 1; transform: translateX(0); } 90% { opacity: 1; } 96%, 100% { opacity: .18; } } @keyframes checkPop { 0%, 8% { transform: scale(0); opacity: 0; } 16% { transform: scale(1.3); opacity: 1; } 22%, 100% { transform: scale(1); opacity: 1; } } @keyframes led1 { 0%, 3% { opacity: 0; transform: translateX(16px); } 8%, 90% { opacity: 1; transform: translateX(0); } 96%, 100% { opacity: 0; } } @keyframes led2 { 0%, 15% { opacity: 0; transform: translateX(16px); } 20%, 90% { opacity: 1; transform: translateX(0); } 96%, 100% { opacity: 0; } } @keyframes led3 { 0%, 27% { opacity: 0; transform: translateX(16px); } 32%, 90% { opacity: 1; transform: translateX(0); } 96%, 100% { opacity: 0; } } @keyframes led4 { 0%, 39% { opacity: 0; transform: translateX(16px); } 44%, 90% { opacity: 1; transform: translateX(0); } 96%, 100% { opacity: 0; } } @keyframes led5 { 0%, 51% { opacity: 0; transform: translateX(16px); } 56%, 90% { opacity: 1; transform: translateX(0); } 96%, 100% { opacity: 0; } } @keyframes stampIn { 0%, 62% { opacity: 0; transform: scale(.7) rotate(-8deg); } 70%, 90% { opacity: 1; transform: scale(1) rotate(-8deg); } 96%, 100% { opacity: 0; } } @keyframes barNi { 0%, 6% { transform: scaleX(0); } 30%, 92% { transform: scaleX(.86); } 100% { transform: scaleX(0); } } @keyframes barCo { 0%, 10% { transform: scaleX(0); } 34%, 92% { transform: scaleX(.58); } 100% { transform: scaleX(0); } } @keyframes barLi { 0%, 14% { transform: scaleX(0); } 38%, 92% { transform: scaleX(.44); } 100% { transform: scaleX(0); } } @keyframes barCu { 0%, 18% { transform: scaleX(0); } 42%, 92% { transform: scaleX(.70); } 100% { transform: scaleX(0); } } @keyframes matchTag { 0%, 52% { opacity: 0; transform: scale(.8); } 60%, 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } } @keyframes cf1 { 0% { opacity: 1; } 20% { opacity: 1; } 24% { opacity: 0; } 96% { opacity: 0; } 100% { opacity: 1; } } @keyframes cf2 { 0%, 20% { opacity: 0; } 24%, 40% { opacity: 1; } 44%, 100% { opacity: 0; } } @keyframes cf3 { 0%, 40% { opacity: 0; } 44%, 60% { opacity: 1; } 64%, 100% { opacity: 0; } } @keyframes cf4 { 0%, 60% { opacity: 0; } 64%, 80% { opacity: 1; } 84%, 100% { opacity: 0; } } @keyframes cf5 { 0%, 80% { opacity: 0; } 84%, 100% { opacity: 1; } } @keyframes matchOn { 0%, 46% { border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.04); } 58%, 90% { border-color: rgba(43,193,120,.75); background: rgba(43,193,120,.14); } 100% { border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.04); } } @keyframes step1 { 0%, 4% { opacity: .32; filter: grayscale(.6) brightness(.7); } 8%, 22% { opacity: 1; filter: none; } 30%, 100% { opacity: .4; filter: grayscale(.5) brightness(.72); } } @keyframes step2 { 0%, 26% { opacity: .32; filter: grayscale(.6) brightness(.7); } 32%, 46% { opacity: 1; filter: none; } 54%, 100% { opacity: .4; filter: grayscale(.5) brightness(.72); } } @keyframes step3 { 0%, 50% { opacity: .32; filter: grayscale(.6) brightness(.7); } 56%, 70% { opacity: 1; filter: none; } 78%, 100% { opacity: .4; filter: grayscale(.5) brightness(.72); } } @keyframes step4 { 0%, 74% { opacity: .32; filter: grayscale(.6) brightness(.7); } 80%, 94% { opacity: 1; filter: none; } 100% { opacity: .4; filter: grayscale(.5) brightness(.72); } } @keyframes layerIn { 0%, 8% { opacity: 0; transform: translate(18px, 18px); } 20%, 88% { opacity: 1; transform: translate(0,0); } 96%, 100% { opacity: 0; transform: translate(18px, 18px); } } @keyframes flowX { 0% { left: -6%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } } @keyframes journeyBar { to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* shot containers */ .anim-shot { width: 100%; max-width: 1050px; margin: clamp(26px,4vw,44px) auto 0; flex: 1 1 100%; min-width: 0; } .anim-shot figure { width: 100%; } .anim-shot figure { margin: 0 !important; } /* hero animation layers (shot 01) */ .px-hero__anim { position: absolute; inset: 0; pointer-events: none; } .px-hero__anim > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .px-hero__anim svg { position: absolute; inset: 0; width: 100%; height: 100%; } /* compliance-stack: tidy static stack (Jul 2026 fix) */ .compliance-stack { position: relative; min-height: 0 !important; display: grid; gap: 14px; padding: clamp(20px,2.5vw,30px) !important; border-radius: 18px; background: linear-gradient(150deg, #0B2236, #0E2A44) !important; border: 1px solid rgba(122,230,175,.25); box-shadow: 0 24px 60px rgba(4,16,28,.35); } .compliance-stack .scan-line { display: none; } .compliance-stack .ledger-card { position: static !important; width: 100% !important; transform: none !important; margin: 0 !important; } /* logistics map panel + shot alignment inside splits */ .flow-panel { width: 100%; min-width: 0; } /* pass-mock body alignment */ .pass-mock__body { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding: 18px 20px; } .pass-mock__qr { text-align: center; } .pass-mock__qr img { background: #FFFFFF; border-radius: 10px; padding: 8px; } .pass-mock__qr figcaption { font-size: .7rem; color: rgba(255,255,255,.6); margin-top: 8px; } @media (max-width: 700px) { .pass-mock__body { grid-template-columns: 1fr; } .pass-mock__qr { justify-self: center; } } /* HubSpot embedded form (Jul 2026) */ .hs-form-card { padding: clamp(20px,3vw,30px); background: #FFFFFF; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); } .hs-form-frame { min-height: 320px; } /* ---------- live hero embed (Jul 2026) ---------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .px-hero--embed { padding: 0 !important; min-height: 0; display: block; position: relative; background: #081521; } .hero-embed { display: block; width: 100%; height: clamp(540px, 86vh, 900px); border: 0; } .hero-embed__cta { position: absolute; left: clamp(22px, 4vw, 54px); bottom: clamp(64px, 10vh, 96px); z-index: 5; display: flex; gap: 14px; flex-wrap: wrap; max-width: min(46%, 560px); } .px-hero--embed::before, .px-hero--embed::after { display: none; } @media (max-width: 700px) { .hero-embed { height: 74vh; } .hero-embed__cta { bottom: 56px; left: 22px; right: 22px; max-width: none; } .hero-embed__cta .btn { padding: 13px 20px; font-size: .92rem; } }