/* Behind Network — global styles Fonts (Anton, Hanken Grotesk, Newsreader) are loaded from Google Fonts in . Layout is driven by inline styles on the markup; this file holds the global resets, keyframes, and the scroll-driven "our story" timeline. */ html { color-scheme: light only; } * { box-sizing: border-box; } body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: #EF4A1F; color: #F2EEE5; } a { color: inherit; } /* keyframes */ @keyframes bnKen { 0% { transform: scale(1.08) translate(0, 0); } 100% { transform: scale(1.18) translate(-1.5%, -2%); } } @keyframes bnMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes bnRise { 0% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes bnCue { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(7px); opacity: 1; } } @keyframes bnReveal { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } @keyframes bnOverlay { from { opacity: 0; } to { opacity: 1; } } @keyframes bnStep { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes bnRail { from { transform: scaleY(0); } to { transform: scaleY(1); } } /* our-story timeline — scroll-driven where supported */ #bn-timeline { view-timeline-name: --bnTl; view-timeline-axis: block; } .bn-tl-item { animation: bnReveal linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; } #bn-timeline-fill { transform-origin: top center; animation: bnRail linear both; animation-timeline: --bnTl; animation-range: entry 88% exit 12%; } .bn-ms { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(34px, 5vw, 72px) 0; } .bn-ms-photo { order: 2; } .bn-ms-copy { order: 1; } .bn-ms-rev .bn-ms-photo { order: 1; } .bn-ms-rev .bn-ms-copy { order: 2; } .bn-node { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; border-radius: 50%; background: #EF4A1F; box-shadow: 0 0 0 5px #16242a; z-index: 3; } .bn-node-today { width: 20px; height: 20px; background: #F6C28A; box-shadow: 0 0 0 5px #16242a, 0 0 0 7px rgba(246, 194, 138, .3); } @media (max-width: 760px) { .bn-ms { grid-template-columns: 1fr; gap: 18px; padding-left: 34px; } .bn-ms-photo, .bn-ms-rev .bn-ms-photo { order: 2; } .bn-ms-copy, .bn-ms-rev .bn-ms-copy { order: 1; } .bn-spine { left: 11px !important; transform: none !important; } .bn-node { left: 11px !important; top: 40px !important; } } /* nav hamburger — the two bars morph into an X when the menu opens */ nav button[aria-label="Menu"] span { transform-origin: center; transition: transform .3s cubic-bezier(.2, .7, .2, 1); } .bn-menu-open nav button[aria-label="Menu"] span:nth-child(1) { transform: translateY(2.75px) rotate(45deg); } .bn-menu-open nav button[aria-label="Menu"] span:nth-child(2) { transform: translateY(-2.75px) rotate(-45deg); } /* mobile menu overlay — fade in, with the links rising in sequence */ #bn-menu { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s ease, visibility 0s linear .4s; } .bn-menu-open #bn-menu { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .4s ease, visibility 0s; } #bn-menu .bn-menu-links a { opacity: 0; transform: translateY(18px); transition: opacity .45s ease, transform .5s cubic-bezier(.2, .7, .2, 1); } .bn-menu-open #bn-menu .bn-menu-links a { opacity: 1; transform: none; } .bn-menu-open #bn-menu .bn-menu-links a:nth-child(1) { transition-delay: .08s; } .bn-menu-open #bn-menu .bn-menu-links a:nth-child(2) { transition-delay: .14s; } .bn-menu-open #bn-menu .bn-menu-links a:nth-child(3) { transition-delay: .20s; } .bn-menu-open #bn-menu .bn-menu-links a:nth-child(4) { transition-delay: .26s; } .bn-menu-open #bn-menu .bn-menu-links a:nth-child(5) { transition-delay: .32s; } @media (prefers-reduced-motion: reduce) { nav button[aria-label="Menu"] span, #bn-menu, #bn-menu .bn-menu-links a { transition-duration: .01ms !important; } } /* For browsers without scroll-driven animations (most non-Chromium), reveal the timeline items and fill the spine so nothing stays hidden. */ @supports not (animation-timeline: view()) { .bn-tl-item { opacity: 1; transform: none; } #bn-timeline-fill { transform: scaleY(1); } } /* primary CTA buttons — lift + brand-coloured shadow + a light sheen sweep on hover, and a tactile press on click. Sheen rides an ::after clipped to the button's radius via overflow:hidden. */ .bn-btn { position: relative; overflow: hidden; transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease, filter .25s ease; } .bn-btn::after { content: ""; position: absolute; top: 0; left: -135%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent); transform: skewX(-18deg); transition: left .6s ease; pointer-events: none; } .bn-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(239, 74, 31, .6); filter: brightness(1.05); } .bn-btn:hover::after { left: 135%; } .bn-btn:active { transform: translateY(0) scale(.98); transition-duration: .08s; } @media (prefers-reduced-motion: reduce) { .bn-btn { transition: none; } .bn-btn::after { display: none; } .bn-btn:hover { transform: none; box-shadow: none; filter: none; } } /* close (×) buttons — the cross spins a quarter-turn and the label brightens to full opacity on hover. */ .bn-close { transition: opacity .25s ease; } .bn-close:hover { opacity: 1 !important; } .bn-close .bn-x { display: inline-block; transition: transform .35s cubic-bezier(.2, .7, .2, 1); } .bn-close:hover .bn-x { transform: rotate(90deg) scale(1.18); } @media (prefers-reduced-motion: reduce) { .bn-close, .bn-close .bn-x { transition: none; } .bn-close:hover .bn-x { transform: none; } } /* stats card · the four figures under the hero form. Grid with DECLARED breakpoints, not flex-wrap. The layout used to emerge from `flex:1 1 200px`, so the reflow points were a side effect of the basis and moved whenever anything around them changed - turning the strip into an inset card shifted them from 404/804 to 438/872 and dropped a 404px phone from a 2x2 to a tall single column, which is the layout the brief was written against. Declaring them means the dividers below key off the SAME numbers, so layout and rules cannot disagree. The three ranges are mutually exclusive on purpose: an earlier version used a base `.bn-stat + .bn-stat` rule plus overrides, and its specificity (0-2-0) beat the overrides (0-1-0), leaving a stray divider above the second cell. Non-overlapping queries have no specificity fight to lose. */ .bn-stats { display: grid; grid-template-columns: 1fr; } .bn-stat { padding: 26px 22px; } /* Dividers go BETWEEN cells only - the card edge handles the outside. Which border is the divider depends on the column count, so each rule lives in its own range. */ /* one column */ @media (max-width: 399px) { .bn-stat:nth-child(n+2) { border-top: 1px solid rgba(242, 238, 229, .14); } } /* two columns */ @media (min-width: 400px) and (max-width: 879px) { .bn-stats { grid-template-columns: 1fr 1fr; } .bn-stat:nth-child(n+3) { border-top: 1px solid rgba(242, 238, 229, .14); } .bn-stat:nth-child(even) { border-left: 1px solid rgba(242, 238, 229, .14); } } /* four columns */ @media (min-width: 880px) { .bn-stats { grid-template-columns: repeat(4, 1fr); } .bn-stat:nth-child(n+2) { border-left: 1px solid rgba(242, 238, 229, .14); } }