/* E3 Center homepage styles. Loaded from so index.html stays markup. Fonts: IBM Plex Sans (body), Space Grotesk (headings), Space Mono (labels). Only these three are bundled; see README before switching. */ /* ---------- self-hosted fonts ---------- */ /* cyrillic-ext */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("../fonts/366fa30d.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("../fonts/21a239b3.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("../fonts/56e06c0b.woff2") format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("../fonts/c879bbc7.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("../fonts/6df828c5.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("../fonts/a047bac9.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("../fonts/366fa30d.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("../fonts/21a239b3.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("../fonts/56e06c0b.woff2") format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("../fonts/c879bbc7.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("../fonts/6df828c5.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("../fonts/a047bac9.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("../fonts/366fa30d.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("../fonts/21a239b3.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("../fonts/56e06c0b.woff2") format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("../fonts/c879bbc7.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("../fonts/6df828c5.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("../fonts/a047bac9.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/4b8ce47d.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/3dbd5bdc.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/4fe29e11.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/4b8ce47d.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/3dbd5bdc.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/4fe29e11.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/030e87aa.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/913ac638.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/17b423e3.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- page ---------- */ :root{ --e3-sans:"IBM Plex Sans","IBM Plex Sans TC","Noto Sans TC",system-ui,sans-serif; --e3-head:"Space Grotesk","IBM Plex Sans TC","Noto Sans TC",system-ui,sans-serif; --e3-mono:"Space Mono",ui-monospace,Menlo,monospace; } body{margin:0;background:#E5E9ED;font-family:var(--e3-sans);color:#0E1A24;text-wrap:pretty} a{color:#204666;text-decoration:none}a:hover{color:#37615E} h1,h2,h3{text-wrap:balance;font-weight:600;margin:0;font-family:var(--e3-head)} /* ===== E3 hover motion standard ========================================= Three durations, one curve, three distances. Anything that answers a pointer uses these; nothing invents its own timing. --e3-dur-tint colour, border, background 120ms --e3-dur-move a control shifting position 180ms --e3-dur-open disclosure: reveals, media zoom 320ms Only transform, opacity and colour animate. Those are what the compositor can carry without re-laying out the page; width, height, top and left cannot, and stutter on a long page. The three distances: --e3-lift 1px a button rises under the pointer --e3-float 3px a title lifts off its baseline --e3-slide 4px an arrow travels Distances stay small. A control acknowledges the pointer, it does not jump. Every pattern answers :focus-visible as well as :hover, so the keyboard sees what the mouse sees. Under prefers-reduced-motion the movement stops and the colour change stays, so nothing silently loses its affordance. The patterns: .e3-btn solid button on a dark ground (hero) .e3-btn-solid solid button on a light ground (call to action) .e3-rowlink a whole article row: title floats, media eases in .e3-float the title inside a row link; lifts on hover .e3-media the image frame inside a row link .e3-arrowlink a text link that ends in an arrow .e3-reveal a research card, description opening on hover .e3-footlink a footer link, colour only .e3-rise rises into place the first time it is scrolled to ========================================================================== */ :root{ --e3-dur-tint:120ms; --e3-dur-move:180ms; --e3-dur-open:320ms; --e3-ease:cubic-bezier(.2,0,0,1); --e3-lift:1px; --e3-float:3px; --e3-slide:4px; --e3-dur-enter:560ms; --e3-rise:16px; --e3-stagger:70ms; } /* --- entrance: cards rise as they come into view --- Hover motion is short because it answers something the reader just did. An entrance is longer, because nobody asked for it and it should feel like the page settling rather than a control reacting. The hidden state is armed by .js, which the runtime adds once it has rendered. Nothing is parked at opacity:0 in the markup itself, so the page can never get stuck invisible if the observer fails to start. Each element reveals once and is then unobserved; scrolling back up does not replay it. Replaying on every pass turns a page into a slideshow. */ .js .e3-rise{ opacity:0;transform:translateY(var(--e3-rise)); transition:opacity var(--e3-dur-enter) var(--e3-ease), transform var(--e3-dur-enter) var(--e3-ease); } .js .e3-rise.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .js .e3-rise,.js .e3-rise.is-in{opacity:1;transform:none;transition:none} } /* --- buttons: tint, a 1px rise, and a press that returns it --- */ .e3-btn,.e3-btn-solid{ display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box; border-radius:3px;font-size:15px;font-weight:600;text-align:center; transition:background-color var(--e3-dur-tint) var(--e3-ease), border-color var(--e3-dur-tint) var(--e3-ease), color var(--e3-dur-tint) var(--e3-ease), transform var(--e3-dur-move) var(--e3-ease); } .e3-btn:hover,.e3-btn:focus-visible, .e3-btn-solid:hover,.e3-btn-solid:focus-visible{transform:translateY(calc(-1 * var(--e3-lift)))} .e3-btn:active,.e3-btn-solid:active{transform:translateY(0)} .e3-btn{height:48px;padding:0 24px;border:1px solid #fff;background:#fff;color:#021A2F} /* hover lets the footage read through; the label flips to white because navy would not survive a translucent fill over moving video */ .e3-btn:hover,.e3-btn:focus-visible{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.92);color:#fff} .e3-btn-solid{height:44px;padding:0 24px;border:1px solid #204666;background:#204666;color:#fff} .e3-btn-solid:hover,.e3-btn-solid:focus-visible{background:#0E304A;border-color:#0E304A;color:#fff} /* --- row links: the title underlines, the picture eases in --- The underline is a background image rather than a pseudo-element so it tracks a title that wraps to several lines. */ .e3-rowlink{color:#0E1A24;transition:color var(--e3-dur-tint) var(--e3-ease)} .e3-rowlink:hover,.e3-rowlink:focus-visible{color:#204666} /* The title lifts off its baseline rather than underlining. transform does not reflow, so the row's height and the text below it stay exactly where they are; only the title appears to float. */ .e3-float{transition:transform var(--e3-dur-move) var(--e3-ease)} .e3-rowlink:hover .e3-float,.e3-rowlink:focus-visible .e3-float{transform:translateY(calc(-1 * var(--e3-float)))} .e3-media{overflow:hidden} .e3-media>*{transition:transform var(--e3-dur-open) var(--e3-ease)} .e3-rowlink:hover .e3-media>*,.e3-rowlink:focus-visible .e3-media>*, .e3-reveal:hover .e3-media>*,.e3-reveal:focus-visible .e3-media>*{transform:scale(1.03)} /* --- a text link ending in an arrow --- */ .e3-arrowlink{display:inline-flex;align-items:baseline;gap:6px;transition:color var(--e3-dur-tint) var(--e3-ease)} .e3-arrowlink .e3-arrow{transition:transform var(--e3-dur-move) var(--e3-ease)} .e3-arrowlink:hover .e3-arrow,.e3-arrowlink:focus-visible .e3-arrow{transform:translateX(var(--e3-slide))} /* --- the partner marquee holds still while a pointer is on it --- */ .e3-marquee:hover,.e3-marquee:focus-within{animation-play-state:paused} /* --- footer: colour only --- */ .e3-footlink{color:#C8D8E7;transition:color var(--e3-dur-tint) var(--e3-ease)} .e3-footlink:hover,.e3-footlink:focus-visible{color:#fff} @media (prefers-reduced-motion:reduce){ .e3-btn,.e3-btn-solid,.e3-float,.e3-media>*,.e3-arrowlink .e3-arrow, .e3-reveal .e3-desc,.e3-reveal .e3-arrow{transition:none!important;transform:none!important} .e3-rowlink:hover .e3-media>*{transform:none} } /* Hero eyebrows. Larger than the 11.5px label step, with the tracking wound back to match: letter-spacing exists to open up small type, so the same em value reads loose once the type grows. The stack gap tightens by the same amount the type gains, so the block keeps its height and the headline stays put. Phones keep the original sizes to avoid a three-line wrap. */ .e3-eyebrows{display:flex;flex-direction:column;gap:8px} .e3-eyebrow,.e3-eyebrow-strong{ font-family:var(--e3-mono);text-transform:uppercase; } .e3-eyebrow{font-size:13.5px;font-weight:500;letter-spacing:.13em;color:#C8D8E7} .e3-eyebrow-strong{font-size:16px;font-weight:500;letter-spacing:.18em;color:#A9C1D8;line-height:1.5} /* The three E of E3. The letter is already white and already at 600, the heaviest weight loaded and the design system's ceiling, so it cannot be pushed further on its own. The separation comes from the other side: the rest of the line sits at blue-300 rather than blue-200, which roughly doubles the brightness step from the E to its neighbours while still measuring 6.05:1 against the footage. Size only has to nudge now, one step up the ladder. */ .e3-eyebrow-strong .e3-e{font-size:17px;font-weight:600;color:#fff;line-height:1} /* Hero video crop. The clip is 16:9 and the hero is close to it, so at width:100% there is no horizontal slack and object-position has nothing to slide. Making the video box wider than the hero and anchoring it left crops the right-hand side off screen and pushes the picture's centre rightwards, clear of the headline. --hero-video-width : 100% = no crop. Higher = more crop, further right. object-position now governs the VERTICAL crop only. */ .e3-hero-video{ position:absolute;top:0;left:0; width:var(--hero-video-width,118%);height:100%; object-fit:cover;object-position:center; } /* section headings: blue-800, brighter than the near-black body colour */ h2{color:#204666} @keyframes e3scroll{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} @media (prefers-reduced-motion:reduce){.e3-scrollline{animation:none!important;transform:none!important}} @keyframes e3blink{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}} :focus-visible{outline:2px solid #866D2A;outline-offset:2px} @keyframes e3marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .e3-reveal .e3-desc{max-height:0;opacity:0;overflow:hidden;transition:max-height var(--e3-dur-open) var(--e3-ease),opacity var(--e3-dur-open) var(--e3-ease),margin var(--e3-dur-open) var(--e3-ease);margin-top:0} .e3-reveal:hover .e3-desc,.e3-reveal:focus-visible .e3-desc{max-height:160px;opacity:1;margin-top:8px} .e3-reveal:hover .e3-arrow,.e3-reveal:focus-visible .e3-arrow{transform:translateX(var(--e3-slide))} /* nav: hover submenus mirroring the footer columns */ .e3-nav{align-items:stretch;align-self:stretch} .e3-navitem{position:relative;display:flex;align-items:center} .e3-navlink{display:inline-flex;align-items:center;gap:6px;color:#364553;height:100%} .e3-navitem:hover>.e3-navlink,.e3-navitem:focus-within>.e3-navlink{color:#204666} .e3-caret{width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid currentColor;opacity:.55;transition:transform .18s ease} .e3-navitem:hover .e3-caret,.e3-navitem:focus-within .e3-caret{transform:rotate(180deg);opacity:1} .e3-submenu{ position:absolute;top:100%;left:-16px;z-index:30;min-width:196px; display:flex;flex-direction:column;padding:6px 0; background:#fff;border:1px solid #CFD6DD;border-top:2px solid #204666;border-radius:0 0 3px 3px; box-shadow:0 6px 20px rgba(2,26,47,.10); opacity:0;visibility:hidden;transform:translateY(-4px); transition:opacity .18s ease,transform .18s ease,visibility .18s ease; } .e3-navitem:hover>.e3-submenu,.e3-navitem:focus-within>.e3-submenu{opacity:1;visibility:visible;transform:translateY(0)} .e3-submenu a{padding:9px 18px;font-size:15px;font-weight:400;color:#364553;white-space:nowrap} .e3-submenu a:hover,.e3-submenu a:focus-visible{background:#F3F5F6;color:#204666} @media (prefers-reduced-motion:reduce){.e3-submenu,.e3-caret{transition:none!important}} @media (max-width:900px){.e3-grid2{grid-template-columns:1fr!important;gap:32px!important}.e3-grid3{grid-template-columns:1fr!important}.e3-pad{padding-left:24px!important;padding-right:24px!important}.e3-nav{display:none!important}.e3-hero{height:560px!important}.e3-eyebrow{font-size:11.5px;letter-spacing:.16em}.e3-eyebrow-strong{font-size:14px;letter-spacing:.22em}.e3-eyebrow-strong .e3-e{font-size:15px}.e3-h1{font-size:44px!important}.e3-cta{flex-direction:column;align-items:flex-start!important}}