/* initi8: the motion layer. Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd. The opening panel and the scroll reveals. This sits on top of the converted design and never alters it: every rule here is either inside .i8-intro, or gated behind the .i8-motion class that i8-scroll.js adds to only once it is running and has already marked its elements. If the JavaScript never arrives, none of this applies and the page is exactly the converted page. Corrections the conversion could not carry live in i8-motion.css. This file is additions. */ /* ---- the opening panel --------------------------------------------------- */ .i8-intro { position: fixed; inset: 0; z-index: 2147483000; background: radial-gradient(120% 90% at 50% 45%, #062a5e 0%, #011f4b 45%, #01152f 100%); display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.86, 0, 0.07, 1); } /* It lifts rather than fades, which is the same move the page transitions make, so arriving and navigating feel like one behaviour. */ .i8-intro.is-done { opacity: 0; transform: translateY(-6%); pointer-events: none; } .i8-intro__canvas { position: absolute; inset: 0; display: block; } /* The scrollbar would otherwise sit over the panel and the page behind it can be scrolled while it is up. */ html.i8-intro-open, html.i8-intro-open body { overflow: hidden; } .i8-intro__word { position: relative; z-index: 1; text-align: center; font-family: Verdana, Geneva, Tahoma, sans-serif; font-weight: 700; font-size: clamp(2.2rem, 7vw, 4.4rem); letter-spacing: -0.01em; line-height: 1; color: #ffffff; opacity: 0; transform: translateY(0.4em); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } /* The 8 in the wordmark is the figure the canvas has just been drawing, so it carries the same cyan the stations on the curve were lit in. */ .i8-intro__word span { color: #05adef; } .i8-intro__word em { display: block; margin-top: 0.85em; font-style: normal; font-weight: 400; font-size: clamp(0.72rem, 1.7vw, 0.95rem); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(226, 240, 250, 0.72); } .i8-intro.is-named .i8-intro__word { opacity: 1; transform: translateY(0); } .i8-intro__skip { position: absolute; right: 1.25rem; bottom: 1.25rem; z-index: 2; padding: 0.5rem 1rem; font: inherit; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(226, 240, 250, 0.75); background: transparent; border: 1px solid rgba(226, 240, 250, 0.3); border-radius: 2px; cursor: pointer; } .i8-intro__skip:hover, .i8-intro__skip:focus-visible { color: #ffffff; border-color: rgba(226, 240, 250, 0.7); } /* Right to left needs the skip control on the other side, and nothing else: the panel is centred and the figure is symmetrical. */ [dir="rtl"] .i8-intro__skip { right: auto; left: 1.25rem; } /* ---- the scroll reveals -------------------------------------------------- */ /* Gated on .i8-motion, which the script adds only after it has marked its elements. Without it nothing is hidden, which is the point: a script that fails to load must not cost the client the page. */ html.i8-motion [data-i8] { opacity: 0; transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: 0s; will-change: opacity, transform; } html.i8-motion [data-i8="up"] { transform: translateY(22px); } /* Images lift further and a touch slower: they carry the weight on this site and the difference is what stops the whole page moving as one sheet. */ html.i8-motion [data-i8="rise"] { transform: translateY(34px); } html.i8-motion [data-i8].is-in { opacity: 1; transform: none; } /* The stagger. Read off an attribute rather than nth-child, because the script knows which run an element belongs to and the stylesheet does not. */ html.i8-motion [data-i8-i="1"] { transition-delay: 0.06s; } html.i8-motion [data-i8-i="2"] { transition-delay: 0.12s; } html.i8-motion [data-i8-i="3"] { transition-delay: 0.18s; } html.i8-motion [data-i8-i="4"] { transition-delay: 0.24s; } html.i8-motion [data-i8-i="5"] { transition-delay: 0.30s; } html.i8-motion [data-i8-i="6"] { transition-delay: 0.36s; } @media (prefers-reduced-motion: reduce) { .i8-intro { display: none; } html.i8-motion [data-i8] { opacity: 1; transform: none; transition: none; } }