/* ===================================================================== 010 NOIR ARCADE: 009 with games, languages and more themes 009 as the base, with: - a game in every section (games.js, games.css): Rubik's cube above 01, Space Invaders in 01, River Raid in 02, a studio sliding puzzle in 03, Tetris in 04, chess in 05, Snake in the pixel band before 06 - flags: they wave (the cursor is the wind) and get a postmark when their card opens; a passport counts them - style keys: 13 font sets (+ Binary, Arcade, Comic) and 12 palettes (+ Black & White, Jet Black); a third key for 8 languages (i18n.js: English, Persian, Arabic, Chinese, Japanese, French, Spanish, Hindi); Persian and Arabic run right to left - speed: the layout containers get classes from design.js instead of :has() selectors (a small change on the page now restyles ~15x less) From 009: crossing lanes, ticket craft cards, magazine 02, route 04. From 008: ticket buttons, portrait that opens behind the name. From 007: font key (7 sets) and colour key (5 palettes); everything reads its colours and fonts from variables. From 006: quiet 3D background, gold thread, black and white portrait with zoom lens. From 004 (built on 002: ink, cream, gold, film grain, deco ornament): readable skill cards, scroll typography, section colours, logo tooltips, stamp cards and the game wall sorted newest first. WPBakery-safe: every rule is scoped to body.page-id-16516 and styles the markup WPBakery renders. The only new content is the hero text block (hero.html / wpbakery-additions.txt) in the row's empty column. ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,400;1,500;1,600&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap'); /* 'AKD Binary' (010): every letter drawn as a 0 or a 1; built for this page, embedded (2 KB) */ @font-face { font-family: 'AKD Binary'; src: url(data:font/truetype;base64,AAEAAAAKAIAAAwAgT1MvMkUKRlcAAAEoAAAAYGNtYXAJSAt0AAABlAAABARnbHlmiqXq4wAABaQAAADOaGVhZC88bq4AAACsAAAANmhoZWEFFgIeAAAA5AAAACRobXR4AmwAAAAAAYgAAAAKbG9jYQBnAFIAAAWYAAAACm1heHAACAA+AAABCAAAACBuYW1lr8nA8wAABnQAAABpcG9zdAAdABMAAAbgAAAAKgABAAAAAQAAJX+pTF8PPPUAAQPoAAAAAObdlX8AAAAA5t2VfwA8//YCMALaAAAAAwACAAAAAAAAAAEAAAMg/zgAAAJsAAAAeAH0AAEAAAAAAAAAAAAAAAAAAAABAAEAAAAEADwAAwAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAwJsAZAABQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPAAAAAAAAAAAAAAAAPz8/PwAAACACTwMg/zgAAAMgAMgAAAAAAAAAAAAAAAAAAAAgAAACbAAAAAAAAAAAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEA/AAAAASABAAAwACACAAOQBaAHoAoADWAPYCT///AAAAIAAwAEEAYQCgAMAA2AD4////4QAAAAAAAP9hAAAAAAAAAAEAAAAQACIAVAAAAIQAsADsAAAAAgADAAIAAwACAAMAAgADAAIAAwADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwACAAMAAgADAAIAAwAAAAAAAABSAGcAAAADADz/9gIwAtoAGwA3ADsAAAEPBS8GPwYfBiMvBg8GHwY/BQcTFwMCKhMeJzA0ODg0MCceEwYGEx4nMDQ4ODQwJx4TBmQECxIXHSAhISAdFxILBAQLEhcdICEhIB0XEgv70ijSARZPRjosHAkJHCw6Rk9SUk9GOiwcCQkcLDpGT1I8ODMrHxQHBxQfKzM4PDw4MysfFAcHFB8rMziWAcwZ/jQAAAEAlgAAAfQC2gAKAAAhNTMRByc3MxEzFQEERpYe0kZGWgH0RlCC/YBaAAAAAAAEADYAAQAAAAAAAQAKAAAAAQAAAAAAAgAHAAoAAwABBAkAAQAUABEAAwABBAkAAgAOACVBS0QgQmluYXJ5UmVndWxhcgBBAEsARAAgAEIAaQBuAGEAcgB5AFIAZQBnAHUAbABhAHIAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAwATABQAAA==) format('truetype'); font-display: swap; } @property --acc { syntax: ''; inherits: true; initial-value: #d6a756; } @property --acc-fade { syntax: ''; inherits: true; initial-value: #d6a756; } @property --hv { syntax: ''; inherits: true; initial-value: 0; } body.page-id-16516 { --ink: #0d0b09; --ink-rgb: 13, 11, 9; --panel-rgb: 21, 16, 12; --card: rgba(var(--panel-rgb), 0.93); --cream: #f1e8d8; --text: #e4dac8; --soft: #c2b59f; --gold: #d6a756; --gold-hi: #f1cf8a; --gold-rgb: 214, 167, 86; --hi-rgb: 241, 207, 138; --on-acc: #140e09; --warm-rgb: 255, 214, 150; --ember-rgb: 196, 96, 61; --g1: #f5e3bd; --g2: #deb160; --g3: #fff4dc; --g4: #d6a756; --g5: #a8773a; --c-gold: #e0b15e; --c-teal: #5ec4b6; --c-ember: #e8875a; --c-violet: #b8a2ea; --f-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --f-poster: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif; --f-caps: 'Cinzel', Georgia, serif; --f-body: 'Manrope', 'Segoe UI', Arial, sans-serif; --f-mono: 'JetBrains Mono', Consolas, monospace; /* set by the font key: italic or not for headlines, poster weight, and size factors for the display, poster, caps and body roles */ --f-it: italic; --w-poster: 400; --kd: 1; --kp: 1; --kc: 1; --kb: 1; --acc: #d6a756; background: var(--ink) !important; } /* The section accent (--acc, set per section by design.js) changes at once on ; the things that show it all the time fade to the new colour on their own (--acc-fade). Fading --acc on itself restyled the whole page on every frame of the fade, which made scrolling heavy. */ body.page-id-16516 :is(.akd-depth, .akd-front), body.page-id-16516 #wpb-content-root :is(.akd-giant, .akd-decade__y, .akd-decade__r), body.page-id-16516 #wpb-content-root :is(.pg16516-text-10, .pg16516-text-12) > .wpb_wrapper { --acc-fade: var(--acc); transition: --acc-fade 0.9s ease; } body.page-id-16516 #hb-wrap, body.page-id-16516 #main-wrapper, body.page-id-16516 #main-content, body.page-id-16516 #slider-section { background: transparent !important; } body.page-id-16516 #main-content { padding-top: 0; overflow-x: clip; } body.page-id-16516 #wpb-content-root { max-width: 1200px; margin: 0 auto; font-family: var(--f-body); color: var(--text); } body.page-id-16516 #wpb-content-root .pg16516-text { font-family: var(--f-body); color: var(--text); } body.page-id-16516 #wpb-content-root .wpb_content_element { margin-bottom: 0; } body.page-id-16516 #wpb-content-root .wpb_wrapper, body.page-id-16516 #wpb-content-root .vc_figure { box-sizing: border-box; } /* Colour helpers used by highlights, chips and stats */ body.page-id-16516 .akd-c1 { --hl: var(--c-gold); color: var(--c-gold); } body.page-id-16516 .akd-c2 { --hl: var(--c-teal); color: var(--c-teal); } body.page-id-16516 .akd-c3 { --hl: var(--c-ember); color: var(--c-ember); } body.page-id-16516 .akd-c4 { --hl: var(--c-violet); color: var(--c-violet); } /* Generic reveal: JS adds .akd-in when an element enters the view */ html.akd-js body.page-id-16516 .akd-rv { opacity: 0; translate: var(--rv-x, 0) var(--rv-y, 40px); transition: opacity 0.9s ease, translate 1.1s cubic-bezier(.2, .8, .2, 1); } html.akd-js body.page-id-16516 .akd-rv.akd-in { opacity: 1; translate: 0 0; } /* ===================================================================== HERO: text + buttons | arched portrait ===================================================================== */ body.page-id-16516 #wpb-content-root > .vc_row:first-child { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding: clamp(56px, 7vw, 110px) 0 clamp(40px, 5vw, 80px); } body.page-id-16516 #wpb-content-root > .vc_row:first-child::before, body.page-id-16516 #wpb-content-root > .vc_row:first-child::after { content: none !important; display: none !important; } body.page-id-16516 #wpb-content-root > .vc_row:first-child > .wpb_column { width: auto; float: none; min-width: 0; } html.akd-js body.page-id-16516 #wpb-content-root > .vc_row:first-child > .wpb_column:not(.akd-col-text, .akd-col-image) { display: none; } body.page-id-16516 #wpb-content-root > .vc_row.akd-hero-row { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); column-gap: clamp(30px, 5vw, 90px); } body.page-id-16516 #wpb-content-root > .vc_row:first-child .vc_separator { display: none; } body.page-id-16516 #wpb-content-root .pg16516-hero { position: relative; z-index: 2; } body.page-id-16516 #wpb-content-root .pg16516-hero p:empty, body.page-id-16516 #wpb-content-root .pg16516-hero br { display: none; } body.page-id-16516 #wpb-content-root .akd-hero-kicker { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; font: 600 calc(13px * var(--kc, 1))/1 var(--f-caps); letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); } body.page-id-16516 #wpb-content-root .akd-hero-kicker::before { content: ''; width: 56px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); } body.page-id-16516 #wpb-content-root .akd-hero-name { display: flex; flex-direction: column; align-items: flex-start; margin: 0; padding: 0; color: var(--cream); text-transform: none; } body.page-id-16516 #wpb-content-root .akd-hero-first { font: var(--f-it, italic) 500 calc(clamp(52px, 6.2vw, 100px) * var(--kd, 1))/0.92 var(--f-display); letter-spacing: -0.01em; color: var(--cream); padding-left: 0.05em; } body.page-id-16516 #wpb-content-root .akd-hero-lastwrap { position: relative; display: inline-block; } body.page-id-16516 #wpb-content-root .akd-hero-last, body.page-id-16516 #wpb-content-root .akd-hero-echo { display: block; font: var(--w-poster, 400) calc(clamp(74px, 10vw, 166px) * var(--kp, 1) * var(--name-k, 1))/0.86 var(--f-poster); letter-spacing: 0.018em; text-transform: uppercase; white-space: nowrap; } body.page-id-16516 #wpb-content-root .akd-hero-last { position: relative; background: linear-gradient(100deg, var(--g1) 0%, var(--g2) 32%, var(--g3) 48%, var(--g4) 60%, var(--g5) 100%) 0 0 / 240% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: akd-sheen 8s ease-in-out infinite; } body.page-id-16516 #wpb-content-root .akd-hero-echo { position: absolute; left: 0; top: 0; color: transparent; -webkit-text-stroke: 1px rgba(var(--gold-rgb), 0.42); transform: translate3d(calc(0.06em + var(--mx, 0) * 16px), calc(0.07em + var(--my, 0) * 10px), 0); pointer-events: none; user-select: none; } @keyframes akd-sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } } body.page-id-16516 #wpb-content-root .akd-hero-role { max-width: 32ch; margin: 28px 0 0; font: 400 calc(clamp(17px, 1.4vw, 21px) * var(--kb, 1))/1.6 var(--f-body); color: var(--text); } body.page-id-16516 #wpb-content-root .akd-hero-role em { font: var(--f-it, italic) 600 calc(1.34em * var(--kd, 1))/1 var(--f-display); letter-spacing: 0.01em; } /* Hero buttons: design 21 "Offset Ticket" from the button gallery (a mix of 04 Admit One and 18 Offset). Markup in hero.html; the same rules as buttons_gallery/buttons.css (base, here limited to .akd-hb.d21) + buttons_gallery/mix/d21.css, scoped to this page. */ body.page-id-16516 #wpb-content-root .akd-hb.d21 { --ease: cubic-bezier(.2, .8, .2, 1); display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb { --c: var(--c-gold); position: relative; display: inline-flex; align-items: center; box-sizing: border-box; color: var(--cream) !important; text-decoration: none !important; cursor: pointer; -webkit-tap-highlight-color: transparent; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb * { box-sizing: border-box; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb:focus { outline: none; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb:focus-visible { outline: 2px solid var(--cream); outline-offset: 5px; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb--reel { --c: var(--c-ember); } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb--game { --c: var(--c-teal); } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb--folio { --c: var(--c-gold); } body.page-id-16516 #wpb-content-root .akd-hb.d21 small { font-size: inherit; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__eye { display: block; font: 600 calc(8.5px * var(--kc, 1))/1 var(--f-caps); letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.72; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__label { display: block; white-space: nowrap; } /* icons: reel spins, pad keys blink, sheets fan */ body.page-id-16516 #wpb-content-root .akd-hb.d21 .ic { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .ic-dot, body.page-id-16516 #wpb-content-root .akd-hb.d21 .ic-key { fill: currentColor; stroke: none; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .ic-spin { transform-origin: 12px 12px; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .ic-sheet { transform-origin: 12px 19px; transition: transform 0.55s var(--ease); } body.page-id-16516 #wpb-content-root .akd-hb.d21 .ic-sheet:nth-of-type(1) { transform: rotate(-9deg); } body.page-id-16516 #wpb-content-root .akd-hb.d21 .ic-sheet:nth-of-type(3) { transform: rotate(8deg); } body.page-id-16516 #wpb-content-root .akd-hb.d21 .ic-sheet rect { fill: var(--ic-fill, transparent); } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb:is(:hover, :focus-visible) .ic-spin { animation: akd-hb-spin 1.6s linear infinite; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb:is(:hover, :focus-visible) .ic-key { animation: akd-hb-blink 0.5s steps(1) infinite; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb:is(:hover, :focus-visible) .ic-key--b { animation-delay: -0.25s; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb:is(:hover, :focus-visible) .ic-sheet:nth-of-type(1) { transform: rotate(-24deg) translateX(-1px); } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb:is(:hover, :focus-visible) .ic-sheet:nth-of-type(2) { transform: rotate(-5deg); } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb:is(:hover, :focus-visible) .ic-sheet:nth-of-type(3) { transform: rotate(17deg) translateX(1px); } @keyframes akd-hb-spin { to { rotate: 360deg; } } @keyframes akd-hb-blink { 50% { opacity: 0.15; } } /* ---------- 21 Offset Ticket: cream ticket on a hard coloured shadow ---------- The mix closest to both parents. The cream block of 18 is cut like the ticket of 04: a stub with the icon and No., a dashed perforation and punched half-circle notches. It stands on a hard offset shadow in the button's colour that follows the notched outline (drop-shadow on the masked paper), tilted like 18. Hover presses the ticket into its shadow, floods the paper with the colour (the reel's from the perforation, the pad's up in pixel steps, the portfolio's down like a laid sheet), tears the stub off (the reel's swings up, the pad's jumps in steps, the portfolio's drops) and sends a shine across. Layout by the width of the nav (container akd-hb21, content box; the nav keeps 6px on the right for the shadow): 470px and up three equal tickets in one row (wider from 600px, as in the real hero column) 300-469px showreel on its own row with a printed serial, the other two share the next row under 300px three full-width tickets, each with its serial */ body.page-id-16516 #wpb-content-root .akd-hb.d21 { --gx: 18px; container: akd-hb21 / inline-size; gap: 16px var(--gx); padding: 0 6px 6px 0; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb { --off: 6px; --deep: color-mix(in srgb, var(--c) 40%, #000); --tint: color-mix(in srgb, var(--c) 50%, #000); --stub: 36px; --pad: 8px; --lab: 22px; /* The widest label (PORTFOLIO in Syne) is about 4.57 x its font size, so 0.212 x the room in the main part keeps every label inside its ticket with 3% to spare: the label shrinks with the column instead of pushing a ticket onto a new row. Room = one third of the row (100cqi is the nav's content box), minus the stub, the perforation and the padding. */ --fit: calc(((100cqi - 2 * var(--gx)) / 3 - var(--stub) - 1.5px - 2 * var(--pad)) * 0.212); flex: 1 1 0; max-width: 176px; align-items: stretch; height: 62px; color: rgb(var(--ink-rgb)) !important; rotate: var(--tilt, 0deg); transition: rotate 0.35s var(--ease); } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb--reel { --tilt: -1.3deg; --tear: -10deg; --tear-o: 100% 100%; --tear-t: var(--ease); } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb--game { --tilt: 1.1deg; --tear: -7deg; --tear-o: 100% 100%; --tear-t: steps(3, jump-start); } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb--folio { --tilt: -0.6deg; --tear: 9deg; --tear-o: 100% 0; --tear-t: var(--ease); } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb:focus-visible { outline: none; } /* the two pieces of paper: each casts the hard shadow, so it follows the notches */ body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__stub, body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__main { display: flex; filter: drop-shadow(var(--off) var(--off) 0 var(--c)); } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__main { flex: 1 1 auto; outline: 2px solid transparent; outline-offset: 4px; transition: translate 0.24s var(--ease), filter 0.24s var(--ease), scale 0.12s ease, outline-color 0.15s ease 0.18s; } /* hover-out: the stub straightens first, then docks against the ticket */ body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__stub { transform-origin: var(--tear-o); transition: rotate 0.28s var(--ease), translate 0.22s var(--ease) 0.12s, filter 0.22s var(--ease) 0.12s; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__cut { position: relative; display: flex; flex: 1 1 auto; overflow: hidden; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__stub .hb__cut { flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: var(--stub); border-radius: 7px 0 0 7px; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.03) 0 1px, transparent 1px 3px), color-mix(in srgb, var(--cream) 92%, var(--c)); color: var(--deep); -webkit-mask: radial-gradient(circle 6px at 100% 0, #0000 96%, #000) top / 100% 51% no-repeat, radial-gradient(circle 6px at 100% 100%, #0000 96%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle 6px at 100% 0, #0000 96%, #000) top / 100% 51% no-repeat, radial-gradient(circle 6px at 100% 100%, #0000 96%, #000) bottom / 100% 51% no-repeat; } /* the stub keeps its half of the perforation once it is torn off */ body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__stub .hb__cut::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; border-right: 1.5px dashed rgba(var(--ink-rgb), 0.42); opacity: 0; transition: opacity 0.2s ease; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__stub .ic { width: 18px; height: 18px; stroke-width: 1.8; color: color-mix(in srgb, var(--c) 64%, #000); } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__no { font: 600 calc(7.5px * var(--kb, 1))/1 var(--f-mono, monospace); letter-spacing: 0.04em; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__main .hb__cut { --rule: color-mix(in srgb, var(--c) 45%, transparent); flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0 var(--pad); border-left: 1.5px dashed rgba(var(--ink-rgb), 0.42); border-radius: 0 7px 7px 0; background: linear-gradient(var(--rule) 0 0) 0 5px / 100% 1px no-repeat, linear-gradient(var(--rule) 0 0) 0 calc(100% - 5px) / 100% 1px no-repeat, repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.02) 0 1px, transparent 1px 3px), var(--cream); -webkit-mask: radial-gradient(circle 6px at 0 0, #0000 96%, #000) top / 100% 51% no-repeat, radial-gradient(circle 6px at 0 100%, #0000 96%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle 6px at 0 0, #0000 96%, #000) top / 100% 51% no-repeat, radial-gradient(circle 6px at 0 100%, #0000 96%, #000) bottom / 100% 51% no-repeat; } /* the colour flood and the shine; the flood lands with the press */ body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__main .hb__cut::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, 0.22) 0 0) 0 5px / 100% 1px no-repeat, linear-gradient(rgba(0, 0, 0, 0.22) 0 0) 0 calc(100% - 5px) / 100% 1px no-repeat, repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.03) 0 1px, transparent 1px 3px), linear-gradient(100deg, var(--c), color-mix(in srgb, var(--c) 74%, #fff)); clip-path: inset(0 100% 0 0); transition: clip-path 0.32s cubic-bezier(.25, .75, .25, 1) 0.03s; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb--game .hb__main .hb__cut::before { clip-path: inset(100% 0 0 0); transition-timing-function: steps(4, end); } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb--folio .hb__main .hb__cut::before { clip-path: inset(0 0 100% 0); } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__main .hb__cut::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%); transform: translateX(-120%); pointer-events: none; } /* ADMIT ONE between two short deco rules, in the button's colour */ body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__eye, body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__label { position: relative; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__eye { display: flex; align-items: center; gap: 5px; font-size: calc(7.5px * var(--kc, 1)); letter-spacing: 0.26em; color: var(--tint); opacity: 1; transition: color 0.3s ease; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__eye::before, body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__eye::after { content: ''; flex: none; width: 8px; height: 1px; background: currentColor; opacity: 0.55; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__eye::after { margin-left: -0.26em; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__label { font: var(--w-poster, 400) calc(var(--lab) * 0.86 * var(--kp, 1))/0.9 var(--f-poster); letter-spacing: 0.04em; text-transform: uppercase; transition: color 0.3s ease; } /* Deliberate exception to the --kp rule: the poster fonts differ in width far more than --kp evens out (Bebas is narrow, Syne and Orbitron are wide), so where the browser can, the label is sized by the width of its figures (font-size-adjust: ch-width) and capped by --fit, which keeps all 7 font sets on one row. The --kp size above is the fallback. */ @supports (font-size-adjust: ch-width 0.5) { body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__label { font-size: min(var(--lab), var(--fit)); font-size-adjust: ch-width 0.455; } } /* printed serial (SERIES A / No.0001): only on full-width tickets (narrow columns) */ body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__ser { display: none; position: absolute; top: 50%; right: 14px; flex-direction: column; gap: 4px; padding-left: 10px; border-left: 1px solid var(--rule); color: var(--tint); translate: 0 -50%; transition: color 0.3s ease; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__ser span { display: block; font: 600 calc(6.5px * var(--kc, 1))/1 var(--f-caps); letter-spacing: 0.3em; text-transform: uppercase; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__ser span + span { font: 700 calc(10px * var(--kb, 1))/1 var(--f-mono, monospace); letter-spacing: 0.06em; text-transform: none; } /* hover / keyboard focus: straighten, press into the shadow, flood, tear, shine */ body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb:is(:hover, :focus-visible) { rotate: 0deg; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb:is(:hover, :focus-visible) .hb__main { translate: var(--off) var(--off); filter: drop-shadow(0px 0px 0 var(--c)); } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb:is(:hover, :focus-visible) .hb__stub { translate: calc(var(--off) - 5px) var(--off); rotate: var(--tear); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45)); transition: translate 0.24s var(--ease), filter 0.24s var(--ease), rotate 0.6s var(--tear-t) 0.08s; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb--game:is(:hover, :focus-visible) .hb__stub { transition: translate 0.24s var(--ease), filter 0.24s var(--ease), rotate 0.33s var(--tear-t) 0.06s; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb:is(:hover, :focus-visible) .hb__stub .hb__cut::after { opacity: 1; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb:is(:hover, :focus-visible) .hb__main .hb__cut::before { clip-path: inset(0 0 0 0); } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb:is(:hover, :focus-visible) .hb__main .hb__cut::after { transform: translateX(120%); transition: transform 0.9s var(--ease) 0.28s; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb:is(:hover, :focus-visible) :is(.hb__eye, .hb__label, .hb__ser) { color: var(--on-acc, rgb(var(--ink-rgb))); } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb:is(:hover, :focus-visible) .hb__ser { border-left-color: rgba(0, 0, 0, 0.28); } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb:focus-visible .hb__main { outline-color: var(--cream); } /* click: the ticket gives under the finger and the stub tears further */ body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb:active .hb__main { scale: 0.955; transition-duration: 0.08s; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb:active .hb__stub { rotate: calc(var(--tear) * 1.4); transition-duration: 0.1s; transition-delay: 0s; } /* wide hero column (the real page is about 630px): use the room */ @container akd-hb21 (min-width: 600px) { body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb { --lab: 24px; max-width: 196px; height: 66px; } } /* narrow column: showreel on its own row, the other two share the next */ @container akd-hb21 (max-width: 469px) { body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb { --stub: 32px; --pad: 7px; --fit: calc(((100cqi - var(--gx)) / 2 - var(--stub) - 1.5px - 2 * var(--pad)) * 0.212); max-width: none; } /* may shrink below the label's natural width (only matters for a moment while the web font loads), so the rows never change when it arrives */ body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb, body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__main { min-width: 0; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb--reel { --tilt: -0.7deg; --lab: min(25px, 7.6cqi); --fit: 99px; flex-basis: 100%; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb--reel .hb__main .hb__cut { align-items: flex-start; padding-left: 14px; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb--reel .hb__ser { display: flex; } } /* very narrow: all three full width, each like the showreel ticket */ @container akd-hb21 (max-width: 299px) { body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb { --lab: min(24px, 7.6cqi); --fit: 99px; flex-basis: 100%; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb .hb__main .hb__cut { align-items: flex-start; padding-left: 14px; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb .hb__ser { display: flex; } } /* reduced motion: nothing moves; hover floods the ticket and turns its shadow cream */ @media (prefers-reduced-motion: reduce) { body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb:is(:hover, :focus-visible) { rotate: var(--tilt, 0deg); } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb:is(:hover, :focus-visible, :active) :is(.hb__stub, .hb__main) { translate: none; rotate: none; scale: none; filter: drop-shadow(var(--off) var(--off) 0 var(--cream)); } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb:active .hb__main { filter: drop-shadow(var(--off) var(--off) 0 var(--cream)) brightness(0.9); } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb:focus-visible .hb__main { outline-offset: 9px; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__main .hb__cut::before { transition: none; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__main .hb__cut::after { display: none; } body.page-id-16516 #wpb-content-root .akd-hb.d21 *, body.page-id-16516 #wpb-content-root .akd-hb.d21 *::before, body.page-id-16516 #wpb-content-root .akd-hb.d21 *::after { animation: none !important; } } /* Windows high contrast: no ring at rest, a system-coloured one on focus */ @media (forced-colors: active) { body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb__main { outline-style: none; } body.page-id-16516 #wpb-content-root .akd-hb.d21 .hb:focus-visible .hb__main { outline: 2px solid Highlight; } } /* Portrait window: black and white at rest. Hover turns it to colour, then the arched window grows to the LEFT only, sliding in behind the hero text and the buttons, which stay on top and readable. The photo stays exactly where it is, so the frame opens onto more of the picture (the Thames and Tower Bridge; its far left fades into the dark of the window behind the start of the name). design.js sets the reach (--ex-l, up to just past the hero text's left edge); --pw runs 0 -> 1 and moves the frame's left edge, the photo's counter-offset and the outer arches together (--pw2 trails a little for the outer arches). A dark wash on the left and a soft shadow under the text keep the words readable. */ @property --pw { syntax: ''; inherits: true; initial-value: 0; } @property --pw2 { syntax: ''; inherits: true; initial-value: 0; } /* the text column sits above the portrait column, so the window opens behind it */ body.page-id-16516 #wpb-content-root > .vc_row:first-child > .wpb_column.akd-col-text { position: relative; z-index: 4; } body.page-id-16516 #wpb-content-root > .vc_row:first-child > .wpb_column.akd-col-image { position: relative; z-index: 2; } body.page-id-16516 #wpb-content-root :is(.akd-hero-kicker, .akd-hero-first, .akd-hero-role) { transition: text-shadow 0.8s ease; } body.page-id-16516 #wpb-content-root .akd-hero-lastwrap { transition: filter 0.8s ease; } body.page-id-16516 #wpb-content-root > .vc_row.akd-open-beside :is(.akd-hero-kicker, .akd-hero-first, .akd-hero-role) { text-shadow: 0 2px 18px rgba(var(--ink-rgb), 0.95), 0 0 4px rgba(var(--ink-rgb), 0.7); } body.page-id-16516 #wpb-content-root > .vc_row.akd-open-beside .akd-hero-lastwrap { filter: drop-shadow(0 6px 22px rgba(var(--ink-rgb), 0.85)); } body.page-id-16516 #wpb-content-root .akd-hero-kicker { transition: text-shadow 0.8s ease, color 0.8s ease; } body.page-id-16516 #wpb-content-root > .vc_row.akd-open-beside .akd-hero-kicker { color: color-mix(in srgb, var(--gold) 72%, var(--gold-hi)); } body.page-id-16516 #wpb-content-root .wpb_single_image { display: flex; justify-content: flex-end; text-align: center; } body.page-id-16516 #wpb-content-root .wpb_single_image .vc_figure { --hv: 0; --pw: 0; --pw2: 0; --ex-l: 0px; --ar: 1.9505; /* the photo: its height as a multiple of the window's, and where it sits across (0 = left edges meet, 1 = right edges meet) and down */ --ph: 1.2; --img-ax: 0.56; --img-ay: 0.45; --sh-l: 120px; /* left shoulder of the opened window */ position: relative; display: block; flex: 0 0 auto; width: min(440px, 100%); max-width: none; height: 550px; margin: 0; container-type: size; transition: --hv 0.7s ease, --pw 0.85s cubic-bezier(.65, 0, .25, 1), --pw2 1.05s cubic-bezier(.65, 0, .25, 1); } body.page-id-16516 #wpb-content-root .wpb_single_image .vc_figure.is-hover { --hv: 1; } body.page-id-16516 #wpb-content-root .wpb_single_image .vc_figure.is-open { --pw: 1; --pw2: 1; transition: --hv 0.7s ease, --pw 1.15s cubic-bezier(.65, 0, .25, 1), --pw2 1.35s cubic-bezier(.65, 0, .25, 1) 0.06s; } body.page-id-16516 #wpb-content-root .wpb_single_image .vc_single_image-wrapper { position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: calc(var(--pw) * var(--ex-l) * -1); display: block; width: auto !important; height: auto !important; max-width: none !important; /* the right shoulder keeps its arch; the left one tightens as the window opens so the corner clears the name */ border-radius: calc(50cqw - var(--pw) * var(--gw, 1) * (50cqw - var(--sh-l))) 50cqw 14px 14px / calc(40cqh - var(--pw) * var(--gw, 1) * (40cqh - var(--sh-l))) 40cqh 14px 14px; overflow: hidden; cursor: zoom-in; background: radial-gradient(90% 120% at 100% 40%, rgba(var(--gold-rgb), 0.1), transparent 70%), rgb(var(--ink-rgb)); box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(var(--gold-rgb), calc(0.5 + var(--hv) * 0.4)), 0 0 calc(var(--hv) * 60px) rgba(var(--gold-rgb), 0.22); } /* The photo is sized once (a little taller than the window) and pinned: it moves by exactly the frame's growth, so on screen it never moves. Its far left edge fades into the dark of the window. */ body.page-id-16516 #wpb-content-root .wpb_single_image img { position: absolute; display: block; max-width: none !important; width: calc(var(--ph) * 100cqh * var(--ar)) !important; height: calc(var(--ph) * 100cqh) !important; left: calc(var(--pw) * var(--ex-l) + (100cqw - var(--ph) * 100cqh * var(--ar)) * var(--img-ax)); top: calc((100cqh - var(--ph) * 100cqh) * var(--img-ay)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%); mask-image: linear-gradient(90deg, transparent, #000 16%); filter: grayscale(calc(1 - var(--hv))) contrast(calc(1.12 - var(--hv) * 0.06)) brightness(calc(0.94 + var(--hv) * 0.04)); } /* dark wash behind the text: strongest at the far left, gone by the old window's edge (only when the text is beside the portrait, not above it) */ body.page-id-16516 #wpb-content-root .wpb_single_image .vc_figure.is-beside .vc_single_image-wrapper::before { content: ''; position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: calc(var(--pw) * var(--ex-l) + 70px); background: linear-gradient(90deg, rgba(var(--ink-rgb), 0.86), rgba(var(--ink-rgb), 0.66) 38%, rgba(var(--ink-rgb), 0.3) 72%, transparent); opacity: var(--pw); pointer-events: none; } body.page-id-16516 #wpb-content-root .wpb_single_image .vc_single_image-wrapper::after { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle 240px at var(--lx, 50%) var(--ly, 40%), rgba(var(--warm-rgb), calc(var(--hv) * 0.12)), transparent 70%), linear-gradient(180deg, rgba(var(--gold-rgb), 0.08), transparent 40%, rgba(var(--ink-rgb), 0.62)); pointer-events: none; } /* Zoom lens: a magnified view of the photo under the cursor */ body.page-id-16516 #wpb-content-root .akd-zoom { position: absolute; z-index: 4; left: 0; top: 0; width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 50%; background-color: var(--ink); background-repeat: no-repeat; box-shadow: 0 0 0 1.5px rgba(var(--hi-rgb), 0.95), 0 0 0 7px rgba(var(--ink-rgb), 0.45), 0 0 0 8px rgba(var(--hi-rgb), 0.35), 0 26px 50px -14px rgba(0, 0, 0, 0.85), inset 0 0 28px rgba(0, 0, 0, 0.5); filter: saturate(1.2) contrast(1.05); opacity: 0; scale: 0.4; transition: opacity 0.25s ease, scale 0.4s cubic-bezier(.2, .8, .2, 1.25); pointer-events: none; } body.page-id-16516 #wpb-content-root .vc_figure.is-lens .akd-zoom { opacity: 1; scale: 1; } body.page-id-16516 #wpb-content-root .akd-zoom::before, body.page-id-16516 #wpb-content-root .akd-zoom::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; } body.page-id-16516 #wpb-content-root .akd-zoom::before { background: linear-gradient(rgba(var(--hi-rgb), 0.85), rgba(var(--hi-rgb), 0.85)) 50% 0 / 1px 14px no-repeat, linear-gradient(rgba(var(--hi-rgb), 0.85), rgba(var(--hi-rgb), 0.85)) 50% 100% / 1px 14px no-repeat, linear-gradient(rgba(var(--hi-rgb), 0.85), rgba(var(--hi-rgb), 0.85)) 0 50% / 14px 1px no-repeat, linear-gradient(rgba(var(--hi-rgb), 0.85), rgba(var(--hi-rgb), 0.85)) 100% 50% / 14px 1px no-repeat; } body.page-id-16516 #wpb-content-root .akd-zoom::after { background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.04) 24%, transparent 40%), radial-gradient(circle, transparent 62%, rgba(0, 0, 0, 0.38)); } body.page-id-16516 #wpb-content-root .akd-zoom span { position: absolute; left: 50%; top: calc(100% + 12px); transform: translateX(-50%); padding: 4px 9px; border-radius: 999px; background: rgba(var(--ink-rgb), 0.82); font: 700 calc(9.5px * var(--kc, 1))/1 var(--f-caps); letter-spacing: 0.24em; white-space: nowrap; color: var(--gold-hi); } /* Outer arches: their left side follows the window as it grows, a beat behind; the shoulders keep their size. Their reach (--ex-a) stops short of the screen edge, so on narrower screens they tuck behind the window instead of running off the page. */ body.page-id-16516 #wpb-content-root .wpb_single_image .vc_figure::before { content: ''; position: absolute; z-index: 1; top: calc(-30px - var(--hv) * 10px); right: calc(-30px - var(--hv) * 10px); bottom: calc(-16px - var(--hv) * 6px); left: calc(-30px - var(--hv) * 10px - var(--pw2) * var(--ex-a, var(--ex-l))); border-radius: calc(50cqw + 30px + var(--hv) * 10px - var(--pw2) * var(--gw, 1) * (50cqw - var(--sh-l))) calc(50cqw + 30px + var(--hv) * 10px) 20px 20px / calc(40cqh + 36px - var(--pw2) * var(--gw, 1) * (40cqh - var(--sh-l))) calc(40cqh + 36px) 20px 20px; border: 1px solid rgba(var(--gold-rgb), calc(0.28 + var(--hv) * 0.4)); outline: 1px solid rgba(var(--gold-rgb), calc(0.14 + var(--hv) * 0.25)); outline-offset: calc(26px + var(--hv) * 10px); pointer-events: none; } /* Sunburst disc */ body.page-id-16516 #wpb-content-root .wpb_single_image .vc_figure::after { content: ''; position: absolute; z-index: 0; left: 50%; top: 44%; width: min(1150px, 150vw); aspect-ratio: 1; background: repeating-conic-gradient(from 0deg, rgba(var(--gold-rgb), calc(0.1 + var(--hv) * 0.1)) 0deg 1.2deg, transparent 1.2deg 7.5deg); -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 62%); mask-image: radial-gradient(circle, #000 12%, transparent 62%); transform: translate(-50%, -50%) translate3d(0, calc(var(--p, 0) * -110px), 0) rotate(calc(var(--akd-sy, 0) * 0.04deg + var(--akd-t, 0) * 1deg)) scale(calc(1 + var(--hv) * 0.08)); pointer-events: none; } /* ===================================================================== CROSSING LANES (under the hero; scroll drives them sideways) One tape per category. Disciplines x Software cross like an X, Render engines x Code make a second X, Media runs thin through the middle. ===================================================================== */ body.page-id-16516 .akd-lanes { /* 011: the tapes are rotated, so at the screen's edge a tape sits above or below its centre line by half the width x tan(5.5deg) plus half a tape (--lr). The pairs sit --lr from the top and the bottom and the box is as tall as that needs, so no tape is cut on a wide screen. */ --lr: calc(4.82vw + 62px); --lm: clamp(200px, 17vw, 260px); position: relative; z-index: 2; width: 100vw; height: calc(var(--lr) * 2 + var(--lm)); margin: clamp(10px, 3vw, 40px) 0 clamp(30px, 5vw, 80px) calc(50% - 50vw); overflow: hidden; overflow: clip; pointer-events: none; } @supports (overflow: clip) { body.page-id-16516 .akd-lanes { overflow-x: clip; overflow-y: visible; } } body.page-id-16516 .akd-lane { position: absolute; left: -12vw; right: -12vw; top: var(--y); display: flex; align-items: center; padding: 16px 0 14px; overflow: hidden; transform: translateY(-50%) rotate(var(--a)); box-shadow: 0 24px 40px -22px #000, 0 -10px 30px -24px #000; } html.akd-js body.page-id-16516 .akd-lanes .akd-lane { clip-path: inset(0 100% 0 0); transition: clip-path 1.3s cubic-bezier(.7, 0, .2, 1); transition-delay: calc(var(--li) * 0.12s); } html.akd-js body.page-id-16516 .akd-lanes .akd-lane:nth-child(even) { clip-path: inset(0 0 0 100%); } html.akd-js body.page-id-16516 .akd-lanes.akd-in .akd-lane { clip-path: inset(0 0 0 0); } body.page-id-16516 .akd-ribbon__row { display: flex; width: max-content; white-space: nowrap; will-change: transform; } /* 011: the tapes also run by themselves: a compositor animation over one copy of the words (--seg px, measured by design.js), leftwards on the lanes the scroll moves left and back on the others; the scroll offset is applied to the row inside, so the two add up. */ body.page-id-16516 .akd-ribbon__drift { display: flex; width: max-content; animation: akd-drift calc(var(--seg, 2400) * 1s / 60) linear infinite; } body.page-id-16516 .akd-lane--right .akd-ribbon__drift { animation-direction: reverse; } @keyframes akd-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(var(--seg, 2400) * -1px), 0, 0); } } @media (prefers-reduced-motion: reduce) { body.page-id-16516 .akd-ribbon__drift { animation: none; } } body.page-id-16516 .akd-ribbon__item { display: inline-flex; align-items: center; } body.page-id-16516 .akd-ribbon__sep { display: inline-block; margin: 0 0.5em; font-size: 0.42em; transform: translateY(-0.1em); } /* the category label, stuck to the visible left edge of its lane */ body.page-id-16516 .akd-lane__tag { position: absolute; z-index: 1; left: calc(12vw + clamp(14px, 3vw, 48px)); top: 50%; display: inline-flex; align-items: center; gap: 9px; padding: 6px 10px 6px 12px; border-radius: 3px; background: rgb(var(--ink-rgb)); box-shadow: 0 0 0 1px var(--lc, var(--gold)), 8px 0 22px 6px rgba(var(--ink-rgb), 0.9); font: 700 calc(10.5px * var(--kc, 1))/1 var(--f-caps); letter-spacing: 0.24em; text-transform: uppercase; color: var(--lc, var(--gold)); transform: translateY(-50%); } body.page-id-16516 .akd-lane__tag b { padding: 2px 5px; border-radius: 2px; background: var(--lc, var(--gold)); color: rgb(var(--ink-rgb)); font: 700 calc(10px * var(--kb, 1))/1 var(--f-mono, monospace); letter-spacing: 0; } /* Disciplines: cream tape, hazard stripes along both edges */ body.page-id-16516 .akd-lane--disc { --lc: var(--c-gold); z-index: 2; background: repeating-linear-gradient(-45deg, rgb(var(--ink-rgb)) 0 8px, transparent 8px 16px) top / 100% 5px no-repeat, repeating-linear-gradient(-45deg, rgb(var(--ink-rgb)) 0 8px, transparent 8px 16px) bottom / 100% 5px no-repeat, var(--cream); } body.page-id-16516 .akd-lane--disc .akd-ribbon__item { font: var(--w-poster, 400) calc(clamp(34px, 4vw, 60px) * var(--kp, 1))/1 var(--f-poster); letter-spacing: 0.03em; color: rgb(var(--ink-rgb)); } body.page-id-16516 .akd-lane--disc .akd-ribbon__sep { color: var(--c-ember); } /* Software: dark glass, big outlined names, teal */ body.page-id-16516 .akd-lane--soft { --lc: var(--c-teal); z-index: 3; padding: 12px 0 10px; background: linear-gradient(90deg, rgba(var(--ink-rgb), 0.9), rgba(var(--panel-rgb), 0.94) 50%, rgba(var(--ink-rgb), 0.9)); border-block: 1px solid color-mix(in srgb, var(--c-teal) 60%, transparent); } body.page-id-16516 .akd-lane--soft .akd-ribbon__item { font: var(--w-poster, 400) calc(clamp(48px, 6vw, 92px) * var(--kp, 1))/1 var(--f-poster); letter-spacing: 0.03em; color: transparent; -webkit-text-stroke: 1.2px var(--c-teal); } body.page-id-16516 .akd-lane--soft .akd-ribbon__item:nth-child(3n+1) { color: var(--c-teal); -webkit-text-stroke: 0; } body.page-id-16516 .akd-lane--soft .akd-ribbon__sep { color: var(--cream); -webkit-text-stroke: 0; } /* Media: a thin gold line through the middle, italics */ body.page-id-16516 .akd-lane--media { --lc: var(--gold-hi); z-index: 4; padding: 7px 0 6px; background: rgba(var(--ink-rgb), 0.82); border-block: 1px dashed color-mix(in srgb, var(--gold) 70%, transparent); } body.page-id-16516 .akd-lane--media .akd-ribbon__item { font: var(--f-it, italic) 500 calc(clamp(20px, 2vw, 30px) * var(--kd, 1))/1.1 var(--f-display); color: var(--gold-hi); } body.page-id-16516 .akd-lane--media .akd-ribbon__sep { color: var(--gold); } /* Render engines: solid ember band, ink letters */ body.page-id-16516 .akd-lane--rend { --lc: var(--c-ember); z-index: 2; background: linear-gradient(180deg, color-mix(in srgb, var(--c-ember) 88%, #fff), var(--c-ember) 40%, color-mix(in srgb, var(--c-ember) 80%, #000)); } body.page-id-16516 .akd-lane--rend .akd-ribbon__item { font: var(--w-poster, 400) calc(clamp(34px, 4vw, 60px) * var(--kp, 1))/1 var(--f-poster); letter-spacing: 0.04em; color: var(--on-acc); } body.page-id-16516 .akd-lane--rend .akd-ribbon__sep { color: rgba(0, 0, 0, 0.45); } /* Code: a terminal strip, mono, violet */ body.page-id-16516 .akd-lane--code { --lc: var(--c-violet); z-index: 3; padding: 11px 0 10px; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px), rgba(var(--panel-rgb), 0.96); border-block: 1px solid color-mix(in srgb, var(--c-violet) 55%, transparent); } body.page-id-16516 .akd-lane--code .akd-ribbon__item { font: 600 calc(clamp(22px, 2.3vw, 34px) * var(--kb, 1))/1 var(--f-mono, monospace); color: var(--c-violet); } body.page-id-16516 .akd-lane--code .akd-ribbon__item::before { content: '>'; margin-right: 0.45em; color: color-mix(in srgb, var(--c-violet) 55%, transparent); } body.page-id-16516 .akd-lane--code .akd-ribbon__sep { color: color-mix(in srgb, var(--c-violet) 50%, transparent); } /* ===================================================================== SECTION HEADINGS (inserted by design.js, decorative) ===================================================================== */ body.page-id-16516 .akd-kicker { display: flex; align-items: flex-end; gap: clamp(14px, 2vw, 26px); margin: 0 0 44px; --rv-x: -90px; --rv-y: 0px; } body.page-id-16516 .akd-kicker__num { font: var(--w-poster, 400) calc(clamp(76px, 8.4vw, 128px) * var(--kp, 1))/0.78 var(--f-poster); color: transparent; -webkit-text-stroke: 1.2px var(--acc); } body.page-id-16516 .akd-kicker__txt { display: flex; flex-direction: column; gap: 10px; padding-bottom: 4px; } body.page-id-16516 .akd-kicker__title { font: var(--f-it, italic) 500 calc(clamp(36px, 3.8vw, 58px) * var(--kd, 1))/0.95 var(--f-display); color: var(--cream); } body.page-id-16516 .akd-kicker__sub { font: 600 calc(12px * var(--kc, 1))/1.3 var(--f-caps); letter-spacing: 0.26em; text-transform: uppercase; color: var(--acc); } body.page-id-16516 .akd-kicker__rule { flex: 1; min-width: 40px; height: 1px; margin-bottom: 18px; background: linear-gradient(90deg, var(--acc), transparent); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.4s cubic-bezier(.2, .8, .2, 1) 0.25s; } body.page-id-16516 .akd-kicker.akd-in .akd-kicker__rule { transform: scaleX(1); } /* ===================================================================== MAIN GRID ===================================================================== */ body.page-id-16516 #wpb-content-root .wpb_wrapper.akd-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 28px; align-items: start; counter-reset: sk; padding-bottom: 40px; } body.page-id-16516 #wpb-content-root :where(.wpb_wrapper.akd-grid > *) { grid-column: 1 / -1; min-width: 0; } body.page-id-16516 #wpb-content-root .wpb_wrapper.akd-grid > .vc_separator { display: none; } body.page-id-16516 #wpb-content-root .akd-kicker--craft { grid-row: 2; } body.page-id-16516 #wpb-content-root .akd-kicker--story { grid-row: 8; margin-top: 150px; } body.page-id-16516 #wpb-content-root .pg16516-text-9 { grid-row: 9; } body.page-id-16516 #wpb-content-root .pg16516-text-10 { grid-row: 10; margin-top: 64px; } body.page-id-16516 #wpb-content-root .akd-kicker--clients { grid-row: 12; margin-top: 160px; } body.page-id-16516 #wpb-content-root .wpb_wrapper.akd-grid > .wpb_gallery { grid-row: 13; } body.page-id-16516 #wpb-content-root .akd-kicker--journey { grid-row: 15; margin-top: 170px; } body.page-id-16516 #wpb-content-root .pg16516-text-11 { grid-row: 16; } body.page-id-16516 #wpb-content-root .pg16516-text-12 { grid-row: 17; margin-top: 64px; } body.page-id-16516 #wpb-content-root .akd-kicker--places { grid-row: 19; margin-top: 160px; } body.page-id-16516 #wpb-content-root .wpb_wrapper.akd-grid > .vc_inner { grid-row: 20; margin: 0; } /* the game slots (010) between the sections */ body.page-id-16516 #wpb-content-root .akd-slot--rubik { grid-row: 1; margin: 0 0 clamp(70px, 8vw, 130px); } body.page-id-16516 #wpb-content-root .akd-slot--invaders { grid-row: 7; } body.page-id-16516 #wpb-content-root .akd-slot--river { grid-row: 11; } body.page-id-16516 #wpb-content-root .akd-slot--puzzle { grid-row: 14; } body.page-id-16516 #wpb-content-root .akd-slot--tetris { grid-row: 18; } body.page-id-16516 #wpb-content-root .akd-slot--chess { grid-row: 21; } /* Without JS there are no headings, so keep the rhythm with margins */ html:not(.akd-js) body.page-id-16516 #wpb-content-root :is(.pg16516-text-9, .pg16516-text-11) { margin-top: 140px; } html:not(.akd-js) body.page-id-16516 #wpb-content-root .wpb_wrapper.akd-grid > :is(.wpb_gallery, .vc_inner) { margin-top: 140px; } /* ---------- The craft: four readable cards ---------- */ body.page-id-16516 #wpb-content-root .pg16516-text-1, body.page-id-16516 #wpb-content-root .pg16516-text-2 { --acc: var(--c-gold); grid-column: 1 / 7; } body.page-id-16516 #wpb-content-root .pg16516-text-3, body.page-id-16516 #wpb-content-root .pg16516-text-4 { --acc: var(--c-teal); grid-column: 7 / 13; } body.page-id-16516 #wpb-content-root .pg16516-text-5, body.page-id-16516 #wpb-content-root .pg16516-text-6 { --acc: var(--c-ember); grid-column: 1 / 7; } body.page-id-16516 #wpb-content-root .pg16516-text-7, body.page-id-16516 #wpb-content-root .pg16516-text-8 { --acc: var(--c-violet); grid-column: 7 / 13; } body.page-id-16516 #wpb-content-root .pg16516-text-1, body.page-id-16516 #wpb-content-root .pg16516-text-3 { grid-row: 3; } body.page-id-16516 #wpb-content-root .pg16516-text-2, body.page-id-16516 #wpb-content-root .pg16516-text-4 { grid-row: 4; } body.page-id-16516 #wpb-content-root .pg16516-text-5, body.page-id-16516 #wpb-content-root .pg16516-text-7 { grid-row: 5; margin-top: 28px; } body.page-id-16516 #wpb-content-root .pg16516-text-6, body.page-id-16516 #wpb-content-root .pg16516-text-8 { grid-row: 6; } body.page-id-16516 #wpb-content-root :is(.pg16516-text-1, .pg16516-text-3, .pg16516-text-5, .pg16516-text-7) { position: relative; align-self: stretch; padding: 36px 38px 4px; background: var(--card); border: 1px solid color-mix(in srgb, var(--acc) 32%, transparent); border-bottom: 0; border-radius: 20px 20px 0 0; counter-increment: sk; transition: border-color 0.4s ease, translate 0.5s cubic-bezier(.2, .8, .2, 1); } body.page-id-16516 #wpb-content-root :is(.pg16516-text-2, .pg16516-text-4, .pg16516-text-6, .pg16516-text-8) { position: relative; align-self: stretch; padding: 12px 38px 38px; background: var(--card); border: 1px solid color-mix(in srgb, var(--acc) 32%, transparent); border-top: 0; border-radius: 0 0 20px 20px; transition: border-color 0.4s ease, translate 0.5s cubic-bezier(.2, .8, .2, 1); } body.page-id-16516 #wpb-content-root :is(.pg16516-text-1, .pg16516-text-3, .pg16516-text-5, .pg16516-text-7)::before { content: ''; position: absolute; left: 38px; top: -1px; width: 80px; height: 2px; background: var(--acc); box-shadow: 0 0 18px var(--acc); } body.page-id-16516 #wpb-content-root :is(.pg16516-text-1, .pg16516-text-3, .pg16516-text-5, .pg16516-text-7)::after { content: counter(sk, decimal-leading-zero); position: absolute; right: 30px; top: 16px; font: var(--w-poster, 400) calc(78px * var(--kp, 1))/1 var(--f-poster); color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--acc) 75%, transparent); opacity: 0.8; } body.page-id-16516 #wpb-content-root :is(.pg16516-text-1, .pg16516-text-3, .pg16516-text-5, .pg16516-text-7) h1 { margin: 0; font: 700 calc(15px * var(--kc, 1))/1.4 var(--f-caps); letter-spacing: 0.26em; text-transform: uppercase; text-align: start !important; color: var(--acc); } body.page-id-16516 #wpb-content-root :is(.pg16516-text-2, .pg16516-text-4, .pg16516-text-6, .pg16516-text-8) h4 { margin: 16px 70px 0 0; font: 600 calc(21px * var(--kb, 1))/1.5 var(--f-body); letter-spacing: 0.005em; text-align: start !important; color: var(--cream); } body.page-id-16516 #wpb-content-root .pg16516-text-6 h4 + h4 { margin-top: 0; } body.page-id-16516 #wpb-content-root h4.akd-has-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-right: 0; } body.page-id-16516 #wpb-content-root .akd-chip { display: inline-flex; align-items: center; padding: 10px 17px; border-radius: 999px; font: 600 calc(15.5px * var(--kb, 1))/1 var(--f-body); letter-spacing: 0.01em; color: var(--cream); background: color-mix(in srgb, var(--acc) 17%, rgba(0, 0, 0, 0.3)); border: 1px solid color-mix(in srgb, var(--acc) 55%, transparent); transition: background 0.3s ease, color 0.3s ease, translate 0.3s ease, opacity 0.6s ease; transition-delay: 0s, 0s, 0s, calc(var(--ci, 0) * 70ms); } body.page-id-16516 #wpb-content-root .akd-chip:hover { background: var(--acc); color: var(--on-acc); translate: 0 -2px; } html.akd-js body.page-id-16516 #wpb-content-root .akd-chips-wait .akd-chip { opacity: 0; } /* ---------- Statements: word by word, with coloured highlights ---------- */ body.page-id-16516 #wpb-content-root :is(.pg16516-text-9, .pg16516-text-11) { position: relative; } body.page-id-16516 #wpb-content-root :is(.pg16516-text-9, .pg16516-text-11) h3 { position: relative; margin: 0; max-width: 22em; font: var(--f-it, italic) 500 calc(clamp(34px, 4.1vw, 62px) * var(--kd, 1))/1.12 var(--f-display); letter-spacing: -0.005em; text-align: start !important; color: var(--cream); text-shadow: 0 20px 60px rgba(0, 0, 0, 0.85); } body.page-id-16516 #wpb-content-root .pg16516-text-11 h3 { margin-left: auto; text-align: right !important; } body.page-id-16516 #wpb-content-root .akd-w { display: inline-block; opacity: clamp(0.14, calc(var(--rp, 1) * var(--wn, 1) - var(--wi, 0)), 1); transform: translateY(calc((1 - clamp(0, calc(var(--rp, 1) * var(--wn, 1) - var(--wi, 0)), 1)) * 0.28em)); } body.page-id-16516 #wpb-content-root .akd-hl { font: var(--w-poster, 400) calc(1.14em * var(--kp, 1))/0.9 var(--f-poster); font-style: normal; letter-spacing: 0.025em; text-transform: uppercase; color: var(--hl); text-shadow: 0 0 34px color-mix(in srgb, var(--hl) 35%, transparent); } body.page-id-16516 #wpb-content-root .akd-giant { position: absolute; z-index: -1; left: -6vw; top: -0.55em; font: var(--w-poster, 400) calc(clamp(150px, 22vw, 360px) * var(--kp, 1))/1 var(--f-poster); letter-spacing: 0.02em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--acc-fade) 20%, transparent); transform: translate3d(calc(var(--p, 0) * -24vw), 0, 0); pointer-events: none; user-select: none; } body.page-id-16516 #wpb-content-root .pg16516-text-11 .akd-giant { left: auto; right: -6vw; transform: translate3d(calc(var(--p, 0) * 24vw), 0, 0); } /* ---------- Reading panels: lead paragraph + two columns ---------- */ body.page-id-16516 #wpb-content-root :is(.pg16516-text-10, .pg16516-text-12) > .wpb_wrapper { column-count: 2; column-gap: 72px; column-rule: 1px solid color-mix(in srgb, var(--acc-fade) 22%, transparent); padding: 58px 62px 50px; background: rgba(var(--panel-rgb), 0.92); border: 1px solid color-mix(in srgb, var(--acc-fade) 22%, transparent); border-radius: 6px; box-shadow: 0 50px 90px -50px #000; } body.page-id-16516 #wpb-content-root .pg16516-text-10.akd-rv { --rv-x: 120px; --rv-y: 0px; } body.page-id-16516 #wpb-content-root .pg16516-text-12.akd-rv { --rv-x: -120px; --rv-y: 0px; } body.page-id-16516 #wpb-content-root :is(.pg16516-text-10, .pg16516-text-12) p { margin: 0 0 1.1em; font: 400 calc(16.5px * var(--kb, 1))/1.85 var(--f-body); text-align: start !important; color: var(--text) !important; break-inside: avoid-column; } body.page-id-16516 #wpb-content-root :is(.pg16516-text-10, .pg16516-text-12) p:first-child { column-span: all; margin-bottom: 30px; padding-bottom: 28px; border-bottom: 1px solid color-mix(in srgb, var(--acc-fade) 24%, transparent); font: var(--f-it, italic) 500 calc(clamp(22px, 2vw, 29px) * var(--kd, 1))/1.48 var(--f-display); color: var(--cream) !important; } body.page-id-16516 #wpb-content-root :is(.pg16516-text-10, .pg16516-text-12) p:first-child::first-letter { float: left; margin: 0.08em 0.12em 0 0; font: normal 600 calc(3.3em * var(--kd, 1))/0.78 var(--f-display); color: var(--acc-fade); } body.page-id-16516 #wpb-content-root :is(.pg16516-text-10, .pg16516-text-12) p:last-child { margin-bottom: 0; } body.page-id-16516 #wpb-content-root .akd-kw { font-weight: 700; color: var(--hl); background: linear-gradient(transparent 64%, color-mix(in srgb, var(--hl) 22%, transparent) 64%); padding: 0 0.06em; } body.page-id-16516 #wpb-content-root p:first-child .akd-kw { font-weight: 600; } /* ---------- The craft: ticket chips (like the hero buttons) ---------- */ /* Key items are big bold tickets on a hard coloured shadow; the rest are small tickets. Hovering a card (.is-hot on both halves, set by design.js) deals the tickets, fills the big number and plays the card's motif. */ body.page-id-16516 #wpb-content-root h4.akd-has-chips { align-items: center; gap: 14px 12px; } body.page-id-16516 #wpb-content-root .akd-tk { display: inline-flex; align-items: stretch; padding: 0; border: 0; border-radius: 0; background: none; color: var(--cream); transition: translate 0.35s cubic-bezier(.2, .8, .2, 1), rotate 0.35s cubic-bezier(.2, .8, .2, 1), filter 0.3s ease, opacity 0.6s ease; transition-delay: calc(var(--ci, 0) * 35ms), calc(var(--ci, 0) * 35ms), 0s, calc(var(--ci, 0) * 70ms); } body.page-id-16516 #wpb-content-root .akd-tk:hover { background: none; translate: 0 0; } body.page-id-16516 #wpb-content-root .akd-tk__main { display: flex; align-items: center; transition: background 0.3s ease, color 0.3s ease; } /* small ticket: tinted paper, dashed edge, a notch at each end */ body.page-id-16516 #wpb-content-root .akd-tk:not(.is-key) .akd-tk__main { padding: 8px 15px 8px; border: 1px dashed color-mix(in srgb, var(--acc) 55%, transparent); background: color-mix(in srgb, var(--acc) 13%, rgba(var(--ink-rgb), 0.5)); font: 600 calc(13.5px * var(--kb, 1))/1 var(--f-body); letter-spacing: 0.02em; color: var(--text); -webkit-mask: radial-gradient(circle 5px at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 5px at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 5px at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 5px at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat; } body.page-id-16516 #wpb-content-root .akd-tk:not(.is-key):hover .akd-tk__main { background: var(--acc); color: var(--on-acc); border-color: var(--acc); } /* key ticket: cream stub + main, perforation, notches, coloured offset */ body.page-id-16516 #wpb-content-root .akd-tk.is-key { rotate: -1.2deg; filter: drop-shadow(5px 5px 0 var(--acc)); } body.page-id-16516 #wpb-content-root .akd-tk.is-key:nth-child(even) { rotate: 1.2deg; } body.page-id-16516 #wpb-content-root .akd-tk.is-key .akd-tk__stub { display: flex; align-items: center; justify-content: center; width: 30px; background: color-mix(in srgb, var(--acc) 22%, var(--cream)); font: 700 calc(9px * var(--kb, 1))/1 var(--f-mono, monospace); color: color-mix(in srgb, var(--acc) 55%, #000); writing-mode: vertical-rl; -webkit-mask: radial-gradient(circle 5px at 100% 0, #0000 96%, #000) top / 100% 51% no-repeat, radial-gradient(circle 5px at 100% 100%, #0000 96%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle 5px at 100% 0, #0000 96%, #000) top / 100% 51% no-repeat, radial-gradient(circle 5px at 100% 100%, #0000 96%, #000) bottom / 100% 51% no-repeat; } body.page-id-16516 #wpb-content-root .akd-tk.is-key .akd-tk__main { padding: 11px 18px 9px 14px; border-left: 1.5px dashed rgba(var(--ink-rgb), 0.4); background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.03) 0 1px, transparent 1px 3px), var(--cream); font: var(--w-poster, 400) calc(30px * var(--kp, 1))/0.95 var(--f-poster); letter-spacing: 0.03em; text-transform: uppercase; color: rgb(var(--ink-rgb)); -webkit-mask: radial-gradient(circle 5px at 0 0, #0000 96%, #000) top / 100% 51% no-repeat, radial-gradient(circle 5px at 0 100%, #0000 96%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle 5px at 0 0, #0000 96%, #000) top / 100% 51% no-repeat, radial-gradient(circle 5px at 0 100%, #0000 96%, #000) bottom / 100% 51% no-repeat; } body.page-id-16516 #wpb-content-root .akd-tk.is-key:hover { rotate: 0deg; translate: 5px 5px; filter: drop-shadow(0 0 0 var(--acc)); } body.page-id-16516 #wpb-content-root .akd-tk.is-key:hover .akd-tk__main { background: var(--acc); color: var(--on-acc); } body.page-id-16516 #wpb-content-root .akd-has-keys h4.akd-has-chips { row-gap: 16px; } /* card hover: deal the tickets */ body.page-id-16516 #wpb-content-root .is-hot .akd-tk:not(:hover) { translate: 0 -4px; } body.page-id-16516 #wpb-content-root .is-hot .akd-tk.is-key:not(:hover) { rotate: 0deg; filter: drop-shadow(8px 8px 0 var(--acc)); } body.page-id-16516 #wpb-content-root :is(.pg16516-text-1, .pg16516-text-2, .pg16516-text-3, .pg16516-text-4, .pg16516-text-5, .pg16516-text-6, .pg16516-text-7, .pg16516-text-8).is-hot { translate: 0 -8px; border-color: color-mix(in srgb, var(--acc) 70%, transparent); } body.page-id-16516 #wpb-content-root :is(.pg16516-text-1, .pg16516-text-3, .pg16516-text-5, .pg16516-text-7)::before { transition: width 0.7s cubic-bezier(.7, 0, .2, 1); } body.page-id-16516 #wpb-content-root :is(.pg16516-text-1, .pg16516-text-3, .pg16516-text-5, .pg16516-text-7).is-hot::before { width: calc(100% - 76px); } body.page-id-16516 #wpb-content-root :is(.pg16516-text-1, .pg16516-text-3, .pg16516-text-5, .pg16516-text-7)::after { z-index: 1; transition: color 0.5s ease, opacity 0.5s ease, translate 0.6s cubic-bezier(.2, .8, .2, 1); } body.page-id-16516 #wpb-content-root :is(.pg16516-text-1, .pg16516-text-3, .pg16516-text-5, .pg16516-text-7).is-hot::after { color: color-mix(in srgb, var(--acc) 85%, transparent); opacity: 1; translate: 0 -4px; } /* card motifs, top right behind the big number */ body.page-id-16516 #wpb-content-root .akd-cfx { position: absolute; right: 116px; top: 20px; width: 120px; height: 70px; pointer-events: none; } /* 01 sparks burst from the number */ body.page-id-16516 #wpb-content-root .akd-cfx--sparks { right: 30px; top: 28px; width: 90px; } body.page-id-16516 #wpb-content-root .akd-cfx--sparks i { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc), 0 0 2px #fff; opacity: 0; } body.page-id-16516 #wpb-content-root .is-hot .akd-cfx--sparks i { animation: akd-spark 1.25s cubic-bezier(.2, .7, .3, 1) var(--t) infinite; } @keyframes akd-spark { 0% { opacity: 0; transform: rotate(var(--a)) translateX(6px) scale(1.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(0.2); } } /* 02 a node graph draws itself */ body.page-id-16516 #wpb-content-root .akd-cfx--graph svg { width: 100%; height: 100%; overflow: visible; } body.page-id-16516 #wpb-content-root .akd-cfx--graph path { fill: none; stroke: var(--acc); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.8; transition: stroke-dashoffset 0.9s cubic-bezier(.6, 0, .2, 1); } body.page-id-16516 #wpb-content-root .akd-cfx--graph path + path { transition-delay: 0.25s; opacity: 0.45; } body.page-id-16516 #wpb-content-root .akd-cfx--graph circle { fill: rgb(var(--panel-rgb)); stroke: var(--acc); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; scale: 0.4; opacity: 0.35; transition: scale 0.4s cubic-bezier(.2, .8, .2, 1.4), opacity 0.3s ease, fill 0.3s ease; } body.page-id-16516 #wpb-content-root .is-hot .akd-cfx--graph path { stroke-dashoffset: 0; } body.page-id-16516 #wpb-content-root .is-hot .akd-cfx--graph circle { scale: 1; opacity: 1; fill: var(--acc); } body.page-id-16516 #wpb-content-root .is-hot .akd-cfx--graph circle:nth-of-type(2) { transition-delay: 0.3s; } body.page-id-16516 #wpb-content-root .is-hot .akd-cfx--graph circle:nth-of-type(3) { transition-delay: 0.6s; } body.page-id-16516 #wpb-content-root .is-hot .akd-cfx--graph circle:nth-of-type(4) { transition-delay: 0.75s; } /* 03 render buckets fill in, as a frame renders */ body.page-id-16516 #wpb-content-root .akd-cfx--buckets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; width: 114px; height: 54px; top: 26px; } body.page-id-16516 #wpb-content-root .akd-cfx--buckets i { border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); background: color-mix(in srgb, var(--acc) 6%, transparent); transition: background 0.25s ease, border-color 0.25s ease; } body.page-id-16516 #wpb-content-root .is-hot .akd-cfx--buckets i { background: color-mix(in srgb, var(--acc) 55%, transparent); border-color: var(--acc); transition-delay: calc(var(--i) * 55ms); } /* 04 a code cursor types between braces */ body.page-id-16516 #wpb-content-root .akd-cfx--code { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font: 600 calc(40px * var(--kb, 1))/1 var(--f-mono, monospace); color: color-mix(in srgb, var(--acc) 55%, transparent); } body.page-id-16516 #wpb-content-root .akd-cfx--code b { font-weight: 600; transition: translate 0.45s cubic-bezier(.2, .8, .2, 1), color 0.3s ease; } body.page-id-16516 #wpb-content-root .akd-cfx--code span { display: inline-flex; align-items: center; overflow: hidden; width: 0; transition: width 0.6s steps(3); } body.page-id-16516 #wpb-content-root .akd-cfx--code span i { font: 600 0.5em/1 var(--f-mono, monospace); font-style: normal; color: var(--cream); } body.page-id-16516 #wpb-content-root .akd-cfx--code em { flex: none; width: 2px; height: 0.7em; margin: 0 2px; background: var(--acc); animation: akd-caret 1s steps(1) infinite; } body.page-id-16516 #wpb-content-root .is-hot .akd-cfx--code b { color: var(--acc); } body.page-id-16516 #wpb-content-root .is-hot .akd-cfx--code span { width: 0.95em; } @keyframes akd-caret { 50% { opacity: 0; } } /* ---------- 02 Two Decades: the long text as a magazine spread ---------- */ body.page-id-16516 #wpb-content-root .pg16516-text-10 > .wpb_wrapper.akd-mag { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 46px; column-count: auto; column-rule: none; padding: 70px 66px 62px; overflow: hidden; } body.page-id-16516 #wpb-content-root .akd-mag > * { position: relative; z-index: 1; } body.page-id-16516 #wpb-content-root .akd-mag__bg { position: absolute !important; z-index: 0 !important; right: -0.04em; top: -0.16em; font: var(--w-poster, 400) calc(clamp(280px, 32vw, 500px) * var(--kp, 1))/0.8 var(--f-poster); color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--acc-fade) 26%, transparent); transform: translate3d(0, calc(var(--p, 0) * -70px), 0); pointer-events: none; user-select: none; } body.page-id-16516 #wpb-content-root .akd-mag .akd-mag__p { margin: 0; text-align: start !important; } body.page-id-16516 #wpb-content-root .akd-mag .akd-mag__p1 { grid-column: 1 / 11; font: var(--f-it, italic) 500 calc(clamp(27px, 2.6vw, 42px) * var(--kd, 1))/1.3 var(--f-display); color: var(--cream) !important; } body.page-id-16516 #wpb-content-root .akd-mag .akd-kw--big { font: var(--w-poster, 400) calc(1.9em * var(--kp, 1))/0.86 var(--f-poster); font-style: normal; letter-spacing: 0.02em; text-transform: uppercase; background: none; text-shadow: 0 0 40px color-mix(in srgb, var(--hl) 40%, transparent); } body.page-id-16516 #wpb-content-root .akd-mag .akd-kw--big2 { font-size: calc(1.3em * var(--kp, 1)); } body.page-id-16516 #wpb-content-root .akd-mag .akd-mag__p1 .akd-kw:not(.akd-kw--big) { font-weight: 600; } body.page-id-16516 #wpb-content-root .akd-mag__rail { grid-column: 1 / -1; display: flex; flex-wrap: wrap; margin: 34px 0 40px !important; border-block: 1px solid color-mix(in srgb, var(--acc-fade) 30%, transparent); } body.page-id-16516 #wpb-content-root .akd-mag__rail span { flex: 1 1 0; padding: 15px 10px 13px; font: 700 calc(12px * var(--kc, 1))/1 var(--f-caps); letter-spacing: 0.3em; text-transform: uppercase; text-align: center; color: var(--c-gold); } body.page-id-16516 #wpb-content-root .akd-mag__rail span + span { border-left: 1px solid color-mix(in srgb, var(--acc-fade) 30%, transparent); } body.page-id-16516 #wpb-content-root .akd-mag__rail span:nth-child(2) { color: var(--c-violet); } body.page-id-16516 #wpb-content-root .akd-mag__rail span:nth-child(3) { color: var(--c-teal); } body.page-id-16516 #wpb-content-root .akd-mag__rail span:nth-child(4) { color: var(--c-ember); } body.page-id-16516 #wpb-content-root .akd-mag .akd-mag__p2 { grid-column: 1 / 8; font: 400 calc(18px * var(--kb, 1))/1.8 var(--f-body); color: var(--text) !important; } body.page-id-16516 #wpb-content-root .akd-mag .akd-mag__p3 { grid-column: 8 / 13; align-self: start; padding: 6px 0 0 28px; border-left: 2px solid var(--c-teal); font: var(--f-it, italic) 500 calc(25px * var(--kd, 1))/1.45 var(--f-display); color: color-mix(in srgb, var(--c-teal) 45%, var(--cream)) !important; } body.page-id-16516 #wpb-content-root .akd-mag .akd-mag__p3::before { content: '\201C'; position: absolute; left: 18px; top: -0.42em; font: var(--w-poster, 400) calc(110px * var(--kp, 1))/1 var(--f-poster); color: color-mix(in srgb, var(--c-teal) 35%, transparent); } body.page-id-16516 #wpb-content-root .akd-mag .akd-mag__p4 { grid-column: 1 / 6; margin-top: 46px; font: 400 calc(15.5px * var(--kb, 1))/1.8 var(--f-body); color: var(--soft) !important; } body.page-id-16516 #wpb-content-root .akd-mag .akd-mag__p5 { grid-column: 6 / 13; margin-top: 46px; font: 400 calc(17px * var(--kb, 1))/1.8 var(--f-body); color: var(--text) !important; } body.page-id-16516 #wpb-content-root .akd-mag__lead { display: block; margin-bottom: 10px; } body.page-id-16516 #wpb-content-root .akd-mag__p2 .akd-mag__lead { font: var(--w-poster, 400) calc(2.05em * var(--kp, 1))/0.95 var(--f-poster); letter-spacing: 0.02em; text-transform: uppercase; color: var(--c-gold); } body.page-id-16516 #wpb-content-root .akd-mag__p3 .akd-mag__lead { display: inline; margin: 0; font-weight: 700; color: var(--cream); } body.page-id-16516 #wpb-content-root .akd-mag__p4 .akd-mag__lead { font: 700 calc(12.5px * var(--kc, 1))/1.5 var(--f-caps); letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-ember); } body.page-id-16516 #wpb-content-root .akd-mag__p5 .akd-mag__lead { font: var(--f-it, italic) 500 calc(1.85em * var(--kd, 1))/1.15 var(--f-display); color: var(--c-violet); } body.page-id-16516 #wpb-content-root .akd-mag .akd-mag__lead .akd-kw { background: none; padding: 0; color: inherit; } /* ---------- 04 The Journey: a route with stops, parallax and depth ---------- */ body.page-id-16516 #wpb-content-root .pg16516-text-12 > .wpb_wrapper.akd-route { position: relative; display: flex; flex-direction: column; column-count: auto; column-rule: none; padding: 74px 58px 96px; overflow: hidden; } body.page-id-16516 #wpb-content-root .akd-route__back { position: absolute; z-index: 0; inset: -12% -8%; transform: translate3d(0, calc(var(--p, 0) * 90px), 0); pointer-events: none; } body.page-id-16516 #wpb-content-root .akd-route__back svg { width: 100%; height: 100%; } body.page-id-16516 #wpb-content-root .akd-route__globe * { fill: none; stroke: color-mix(in srgb, var(--acc-fade) 12%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; } body.page-id-16516 #wpb-content-root .akd-route__arcs path { fill: none; stroke: color-mix(in srgb, var(--c-gold) 30%, transparent); stroke-width: 1.2; stroke-dasharray: 3 7; vector-effect: non-scaling-stroke; animation: akd-arc 14s linear infinite; } @keyframes akd-arc { to { stroke-dashoffset: -200; } } body.page-id-16516 #wpb-content-root .akd-route__line { position: absolute; z-index: 1; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; } body.page-id-16516 #wpb-content-root .akd-route__line svg { position: absolute; left: 0; top: 0; overflow: visible; } body.page-id-16516 #wpb-content-root .akd-route__trail { fill: none; stroke: color-mix(in srgb, var(--acc-fade) 40%, transparent); stroke-width: 2; stroke-dasharray: 1 9; stroke-linecap: round; } body.page-id-16516 #wpb-content-root .akd-route__done { fill: none; stroke: var(--acc-fade); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px var(--acc-fade)); } body.page-id-16516 #wpb-content-root .akd-route__pin { fill: rgb(var(--ink-rgb)); stroke: var(--acc-fade); stroke-width: 2; } body.page-id-16516 #wpb-content-root .akd-route__tie { fill: none; stroke: color-mix(in srgb, var(--acc-fade) 45%, transparent); stroke-width: 1; stroke-dasharray: 3 4; } body.page-id-16516 #wpb-content-root .akd-route__plane { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc-fade) 40%, transparent), 0 0 24px 4px var(--acc-fade); } body.page-id-16516 #wpb-content-root .akd-stop { --sa: var(--c-gold); position: relative; z-index: 2; box-sizing: border-box; width: 41%; margin-top: -84px; padding: 24px 28px 24px; border: 1px solid color-mix(in srgb, var(--sa) 30%, transparent); border-radius: 4px; background: linear-gradient(160deg, color-mix(in srgb, var(--sa) 9%, rgba(var(--ink-rgb), 0.94)), rgba(var(--ink-rgb), 0.94) 60%); box-shadow: 0 calc(20px + var(--z, 1) * 30px) calc(40px + var(--z, 1) * 40px) calc(-20px - var(--z, 1) * 10px) #000; transform: translate3d(0, calc(var(--p, 0) * var(--z, 1) * -56px), 0); } body.page-id-16516 #wpb-content-root .akd-stop--l { align-self: flex-start; } body.page-id-16516 #wpb-content-root .akd-stop--r { align-self: flex-end; } body.page-id-16516 #wpb-content-root .akd-stop--start + .akd-stop { margin-top: 40px; } body.page-id-16516 #wpb-content-root .akd-stop:nth-child(4n) { --sa: var(--c-teal); } body.page-id-16516 #wpb-content-root .akd-stop:nth-child(4n + 1) { --sa: var(--c-ember); } body.page-id-16516 #wpb-content-root .akd-stop:nth-child(4n + 2) { --sa: var(--c-violet); } body.page-id-16516 #wpb-content-root .akd-stop.akd-rv { --rv-x: 0px; --rv-y: 70px; } body.page-id-16516 #wpb-content-root .akd-stop--start { align-self: center; width: min(820px, 88%); margin: 0 0 30px; padding: 0; border: 0; background: none; box-shadow: none; text-align: center; } body.page-id-16516 #wpb-content-root .akd-stop__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; } body.page-id-16516 #wpb-content-root .akd-stop--start .akd-stop__head { justify-content: center; } body.page-id-16516 #wpb-content-root .akd-stop__num { font: var(--w-poster, 400) calc(46px * var(--kp, 1))/0.8 var(--f-poster); color: transparent; -webkit-text-stroke: 1px var(--sa); } body.page-id-16516 #wpb-content-root .akd-stop__tag { font: 700 calc(11px * var(--kc, 1))/1.3 var(--f-caps); letter-spacing: 0.26em; text-transform: uppercase; color: var(--sa); } body.page-id-16516 #wpb-content-root .akd-route .akd-stop p { margin: 0; font: 400 calc(16px * var(--kb, 1))/1.78 var(--f-body); text-align: start !important; color: var(--text) !important; } body.page-id-16516 #wpb-content-root .akd-route .akd-stop--start p { font: var(--f-it, italic) 500 calc(clamp(24px, 2.3vw, 36px) * var(--kd, 1))/1.35 var(--f-display); text-align: center !important; color: var(--cream) !important; } body.page-id-16516 #wpb-content-root .akd-route .akd-stop--start p::first-letter { float: none; margin: 0; font: inherit; color: inherit; } /* ---------- Before 06 Play: a pixel curtain (no text) ---------- */ body.page-id-16516 .akd-gate { position: relative; z-index: 1; width: 100vw; height: clamp(170px, 17vw, 260px); margin: clamp(60px, 7vw, 120px) 0 0 calc(50% - 50vw); overflow: hidden; pointer-events: none; } body.page-id-16516 .akd-gate__px { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); gap: 3px; } body.page-id-16516 .akd-gate__px i { grid-column: calc(var(--x) + 1); grid-row: calc(var(--y) + 1); background: color-mix(in srgb, var(--acc) 22%, rgb(var(--panel-rgb))); border-radius: 1px; } body.page-id-16516 .akd-gate__px i.is-acc1 { background: var(--c-gold); } body.page-id-16516 .akd-gate__px i.is-acc2 { background: var(--c-teal); } body.page-id-16516 .akd-gate__px i.is-acc3 { background: var(--c-ember); } body.page-id-16516 .akd-gate__px i.is-acc4 { background: var(--c-violet); } html.akd-js body.page-id-16516 .akd-gate__px i { opacity: 0; transform: translateY(-60%) scale(0.4); transition: opacity 0.3s ease var(--d), transform 0.5s cubic-bezier(.2, .8, .2, 1.3) var(--d); } html.akd-js body.page-id-16516 .akd-gate.akd-in .akd-gate__px i { opacity: 1; transform: none; } /* a scan line sweeps the pixels */ body.page-id-16516 .akd-gate::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, transparent 40%, rgba(255, 255, 255, 0.14) 50%, transparent 60%) 0 0 / 50% 100% no-repeat; animation: akd-scan 4.5s linear infinite; } @keyframes akd-scan { from { background-position: -100% 0; } to { background-position: 300% 0; } } body.page-id-16516 .akd-gate__shapes { position: absolute; inset: 0; z-index: 3; } body.page-id-16516 .akd-gate__s { position: absolute; width: clamp(34px, 3.4vw, 56px); height: auto; overflow: visible; fill: none; stroke-width: 3; } body.page-id-16516 .akd-gate__s--tri { left: 14%; top: 8%; stroke: var(--c-teal); transform: translate3d(0, calc(var(--p, 0) * -70px), 0) rotate(calc(var(--p, 0) * 40deg)); } body.page-id-16516 .akd-gate__s--cir { left: 38%; top: 32%; width: clamp(24px, 2.4vw, 40px); stroke: var(--c-ember); transform: translate3d(0, calc(var(--p, 0) * -120px), 0); } body.page-id-16516 .akd-gate__s--x { left: 63%; top: 4%; stroke: var(--c-violet); transform: translate3d(0, calc(var(--p, 0) * -50px), 0) rotate(calc(var(--p, 0) * -60deg)); } body.page-id-16516 .akd-gate__s--sq { left: 84%; top: 26%; width: clamp(26px, 2.6vw, 44px); stroke: var(--c-gold); transform: translate3d(0, calc(var(--p, 0) * -95px), 0) rotate(calc(var(--p, 0) * 30deg)); } /* ===================================================================== GALLERIES (isotope layout replaced by grid) ===================================================================== */ body.page-id-16516 #wpb-content-root .wpb_image_grid .wpb_image_grid_ul { display: grid !important; height: auto !important; margin: 0; padding: 0; list-style: none; } body.page-id-16516 #wpb-content-root .wpb_image_grid .wpb_image_grid_ul li { position: relative !important; top: auto !important; left: auto !important; width: auto !important; margin: 0 !important; float: none !important; } body.page-id-16516 #wpb-content-root .wpb_image_grid .wpb_image_grid_ul img { display: block; width: 100%; height: 100%; } html.akd-js body.page-id-16516 #wpb-content-root .wpb_image_grid_ul > li { opacity: 0; translate: var(--in-x, 0px) 46px; transition: opacity 0.9s ease, translate 1s cubic-bezier(.2, .8, .2, 1), transform 0.45s cubic-bezier(.2, .8, .2, 1), box-shadow 0.45s, filter 0.45s, rotate 0.5s, scale 0.45s; transition-delay: calc(var(--d, 0) * 1ms), calc(var(--d, 0) * 1ms), 0s, 0s, 0s, 0s, 0s; } html.akd-js body.page-id-16516 #wpb-content-root .wpb_image_grid_ul > li.akd-in { opacity: 1; translate: 0 0; } /* ---------- Client logos: film strip, colour + tooltip on hover ---------- */ body.page-id-16516 #wpb-content-root .wpb_wrapper.akd-grid > .wpb_gallery { position: relative; padding: 54px 36px; background: rgb(var(--panel-rgb)); box-shadow: 0 50px 100px -40px #000; transform: perspective(1500px) rotateX(calc(var(--p, 0) * 8deg)) rotateZ(-1deg) translateX(calc(var(--p, 0) * -60px)); } body.page-id-16516 #wpb-content-root .wpb_wrapper.akd-grid > .wpb_gallery::before, body.page-id-16516 #wpb-content-root .wpb_wrapper.akd-grid > .wpb_gallery::after { content: ''; position: absolute; left: 0; right: 0; height: 14px; background: repeating-linear-gradient(90deg, transparent 0 12px, var(--ink) 12px 30px); background-position: calc(var(--akd-sy, 0) * -0.2px) 0; } body.page-id-16516 #wpb-content-root .wpb_wrapper.akd-grid > .wpb_gallery::before { top: 17px; } body.page-id-16516 #wpb-content-root .wpb_wrapper.akd-grid > .wpb_gallery::after { bottom: 17px; } body.page-id-16516 #wpb-content-root .wpb_wrapper.akd-grid > .wpb_gallery .wpb_image_grid_ul { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; } body.page-id-16516 #wpb-content-root .wpb_wrapper.akd-grid > .wpb_gallery li { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--cream); cursor: help; outline: none; } body.page-id-16516 #wpb-content-root .wpb_wrapper.akd-grid > .wpb_gallery li img { width: auto; height: auto; max-width: 70%; max-height: 62%; object-fit: contain; mix-blend-mode: multiply; filter: sepia(0.95) saturate(0.55) contrast(1.05) brightness(0.97); transition: filter 0.45s ease; } body.page-id-16516 #wpb-content-root .wpb_wrapper.akd-grid > .wpb_gallery li:is(:hover, .is-hot, :focus-visible) { z-index: 5; transform: translateY(-8px) scale(1.24) rotate(-1.5deg); box-shadow: 0 26px 40px -14px #000, 0 0 0 2px var(--acc), 0 0 40px color-mix(in srgb, var(--acc) 40%, transparent); } body.page-id-16516 #wpb-content-root .wpb_wrapper.akd-grid > .wpb_gallery li:is(:hover, .is-hot, :focus-visible) img { filter: none; } /* ---------- Countries: postage stamps that fly in sideways ---------- */ html.akd-js body.page-id-16516 #wpb-content-root .vc_inner > .wpb_column:not(.akd-col-gallery) { display: none; } body.page-id-16516 #wpb-content-root .vc_inner > .wpb_column.akd-col-gallery { width: 100%; float: none; } body.page-id-16516 #wpb-content-root .vc_inner .wpb_image_grid_ul { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 34px 32px; } body.page-id-16516 #wpb-content-root .vc_inner .wpb_image_grid_ul li { --r: 5px; aspect-ratio: 5 / 4; padding: 11px; background: var(--cream); -webkit-mask: radial-gradient(var(--r) at var(--r) var(--r), #0000 97%, #000) calc(-1 * var(--r)) calc(-1 * var(--r)) / calc(2 * var(--r) + 4px) calc(2 * var(--r) + 4px) round, linear-gradient(#000 0 0) content-box; mask: radial-gradient(var(--r) at var(--r) var(--r), #0000 97%, #000) calc(-1 * var(--r)) calc(-1 * var(--r)) / calc(2 * var(--r) + 4px) calc(2 * var(--r) + 4px) round, linear-gradient(#000 0 0) content-box; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.6)); rotate: calc(var(--rot, 0) * 1deg); cursor: pointer; outline: none; } html.akd-js body.page-id-16516 #wpb-content-root .vc_inner .wpb_image_grid_ul li:not(.akd-in) { rotate: calc(var(--rot, 0) * 1deg + var(--dir, 1) * 14deg); } body.page-id-16516 #wpb-content-root .vc_inner .wpb_image_grid_ul li img { object-fit: cover; filter: sepia(0.3) saturate(0.9); transition: filter 0.4s; } body.page-id-16516 #wpb-content-root .vc_inner .wpb_image_grid_ul li:is(:hover, .is-hot, :focus-visible) { z-index: 5; rotate: 0deg; scale: 1.36; } body.page-id-16516 #wpb-content-root .vc_inner .wpb_image_grid_ul li:is(:hover, .is-hot, :focus-visible) img { filter: none; } /* Fun with the stamps (010): cloth wave, cursor wind, postmarks, passport */ body.page-id-16516 #wpb-content-root .vc_inner .wpb_image_grid_ul li { position: relative; --wind: 0; } body.page-id-16516 #wpb-content-root .vc_inner .wpb_image_grid_ul li img { transform-origin: 0 50%; animation: akd-flag 3.6s ease-in-out infinite; animation-delay: calc(var(--d, 0) * -9ms); } @keyframes akd-flag { 0%, 100% { transform: perspective(260px) rotateY(calc(var(--wind) * -28deg)) skewY(0deg) scaleX(1); } 50% { transform: perspective(260px) rotateY(calc(var(--wind) * -28deg - 7deg)) skewY(1.6deg) scaleX(0.985); } } body.page-id-16516 #wpb-content-root .akd-cloth { position: absolute; inset: 11px; z-index: 1; background: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0) 0 18%, rgba(255, 255, 255, 0.34) 26%, rgba(0, 0, 0, 0.22) 36%, rgba(255, 255, 255, 0) 44% 60%) 0 0 / 220% 100%; mix-blend-mode: soft-light; animation: akd-cloth 3.6s linear infinite; animation-delay: calc(var(--d, 0) * -9ms); pointer-events: none; } @keyframes akd-cloth { to { background-position: -220% 0; } } body.page-id-16516 #wpb-content-root .akd-postmark { position: absolute; z-index: 2; right: 2%; top: 4%; width: 64%; aspect-ratio: 1; color: var(--c-ember); opacity: 0; transform: rotate(var(--pr, -12deg)) scale(1.8); transition: opacity 0.2s ease, transform 0.35s cubic-bezier(.2, .8, .2, 1.4); pointer-events: none; } body.page-id-16516 #wpb-content-root li.is-stamped .akd-postmark { opacity: 0.82; transform: rotate(var(--pr, -12deg)) scale(1); } body.page-id-16516 #wpb-content-root li.is-stamping { animation: akd-thump 0.45s ease; } @keyframes akd-thump { 40% { scale: 1.22; } } body.page-id-16516 #wpb-content-root .akd-postmark svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 3; } body.page-id-16516 #wpb-content-root .akd-postmark text { fill: currentColor; stroke: none; font: 800 9.5px/1 var(--f-caps); letter-spacing: 0.12em; } body.page-id-16516 #wpb-content-root .akd-postmark .akd-postmark__cc { font: var(--w-poster, 400) 22px/1 var(--f-poster); letter-spacing: 0.04em; } body.page-id-16516 #wpb-content-root .akd-postmark__w { stroke-width: 2.4; opacity: 0.8; } body.page-id-16516 #wpb-content-root .akd-passport { display: flex; align-items: center; gap: 10px; margin-top: 12px; font: 700 calc(11px * var(--kc, 1))/1.3 var(--f-caps); letter-spacing: 0.22em; text-transform: uppercase; color: var(--soft); } body.page-id-16516 #wpb-content-root .akd-passport i { position: relative; flex: none; width: 90px; height: 4px; border-radius: 2px; background: rgba(var(--gold-rgb), 0.18); overflow: hidden; } body.page-id-16516 #wpb-content-root .akd-passport i::after { content: ''; position: absolute; inset: 0; background: var(--c-ember); transform: scaleX(var(--k, 0)); transform-origin: 0 50%; transition: transform 0.6s cubic-bezier(.2, .8, .2, 1); } html.akd-rtl body.page-id-16516 #wpb-content-root .akd-passport i::after { transform-origin: 100% 50%; } @media (prefers-reduced-motion: reduce) { body.page-id-16516 #wpb-content-root .vc_inner .wpb_image_grid_ul li img, body.page-id-16516 #wpb-content-root .akd-cloth { animation: none; } } /* ===================================================================== GAMES: one wall, newest first, decade headings, year tags ===================================================================== */ body.page-id-16516 #wpb-content-root > .vc_row.akd-games-row { position: relative; background: transparent !important; padding: 20px 0 150px !important; margin: 0 !important; } body.page-id-16516 #wpb-content-root > .vc_row.akd-games-row .vc_separator { display: none; } body.page-id-16516 #wpb-content-root > .vc_row.akd-games-row.akd-merged .pg16516-text-13 + .wpb_gallery { display: none; } body.page-id-16516 #wpb-content-root .pg16516-text-13 { position: relative; padding-bottom: 36px; } body.page-id-16516 #wpb-content-root .pg16516-text-13 h1 { margin: 0; font: var(--f-it, italic) 500 calc(clamp(36px, 4.4vw, 66px) * var(--kd, 1))/1.05 var(--f-display); text-align: start !important; background: linear-gradient(180deg, var(--g1), var(--g5)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body.page-id-16516 #wpb-content-root .pg16516-text-13 .akd-giant { top: -0.35em; } body.page-id-16516 #wpb-content-root > .vc_row.akd-games-row .wpb_image_grid_ul { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 16px 14px; } body.page-id-16516 #wpb-content-root > .vc_row.akd-games-row .pg16516-text-13 + .wpb_gallery { margin-bottom: 16px; } body.page-id-16516 #wpb-content-root > .vc_row.akd-games-row .wpb_image_grid_ul > li:not(.akd-decade) { aspect-ratio: 350 / 408; border-radius: 6px; overflow: hidden; cursor: pointer; outline: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 16px 30px -18px rgba(0, 0, 0, 0.95); filter: saturate(0.82) brightness(0.94); } body.page-id-16516 #wpb-content-root > .vc_row.akd-games-row .wpb_image_grid_ul > li img { object-fit: cover; } body.page-id-16516 #wpb-content-root > .vc_row.akd-games-row .wpb_image_grid_ul > li[data-year]::after { content: attr(data-year); display: block !important; position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 8px 6px; font: var(--w-poster, 400) calc(17px * var(--kp, 1))/1 var(--f-poster); letter-spacing: 0.08em; color: var(--cream); background: linear-gradient(transparent, rgba(var(--ink-rgb), 0.88)); pointer-events: none; } body.page-id-16516 #wpb-content-root > .vc_row.akd-games-row .wpb_image_grid_ul > li:not(.akd-decade):is(:hover, .is-active, :focus-visible) { z-index: 3; transform: translateY(-8px) scale(1.06); filter: none; box-shadow: 0 0 0 2px var(--acc), 0 26px 40px -14px #000, 0 0 36px color-mix(in srgb, var(--acc) 40%, transparent); } body.page-id-16516 #wpb-content-root .wpb_image_grid_ul > li.akd-decade { grid-column: 1 / -1; display: flex !important; align-items: flex-end; gap: 16px; padding: 44px 0 4px; --in-x: -80px; } body.page-id-16516 #wpb-content-root .wpb_image_grid_ul > li.akd-decade:first-child { padding-top: 0; } body.page-id-16516 #wpb-content-root .akd-decade__y { font: var(--w-poster, 400) calc(clamp(56px, 6vw, 88px) * var(--kp, 1))/0.8 var(--f-poster); color: transparent; -webkit-text-stroke: 1.2px var(--acc-fade); } body.page-id-16516 #wpb-content-root .akd-decade__n { padding-bottom: 6px; font: 600 calc(11px * var(--kc, 1))/1.3 var(--f-caps); letter-spacing: 0.26em; text-transform: uppercase; color: var(--soft); } body.page-id-16516 #wpb-content-root .akd-decade__r { flex: 1; height: 1px; margin-bottom: 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--acc-fade) 60%, transparent), transparent); } /* ===================================================================== FLOATING CARDS (appended to by design.js) ===================================================================== */ body.page-id-16516 .akd-float { position: fixed; left: 0; top: 0; z-index: 10000; box-sizing: border-box; color: var(--cream); background: rgba(var(--panel-rgb), 0.97); border: 1px solid color-mix(in srgb, var(--acc) 50%, transparent); box-shadow: 0 40px 80px -24px #000, 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 50px color-mix(in srgb, var(--acc) 14%, transparent); opacity: 0; visibility: hidden; transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(0.94); transform-origin: var(--ox, 0%) 50%; transition: opacity 0.22s ease, transform 0.32s cubic-bezier(.2, .8, .2, 1), visibility 0s linear 0.32s; pointer-events: none; } body.page-id-16516 .akd-float.is-on { opacity: 1; visibility: visible; transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(1); transition-delay: 0s; } body.page-id-16516 .akd-float :is(h3, p, ul, li) { margin: 0; padding: 0; list-style: none; text-transform: none; } body.page-id-16516 .akd-float li::before { display: none; } /* Logo tooltip */ body.page-id-16516 .akd-tip { width: max-content; max-width: 290px; padding: 13px 16px 12px; border-radius: 10px; transform-origin: var(--ax, 50%) 100%; } body.page-id-16516 .akd-tip::after { content: ''; position: absolute; left: var(--ax, 50%); bottom: -6px; width: 10px; height: 10px; background: rgb(var(--panel-rgb)); border-right: 1px solid color-mix(in srgb, var(--acc) 50%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--acc) 50%, transparent); transform: translateX(-50%) rotate(45deg); } body.page-id-16516 .akd-tip.is-below { transform-origin: var(--ax, 50%) 0; } body.page-id-16516 .akd-tip.is-below::after { bottom: auto; top: -6px; transform: translateX(-50%) rotate(225deg); } body.page-id-16516 .akd-tip.is-sheet::after { display: none; } body.page-id-16516 .akd-tip__name { font: 700 calc(12px * var(--kc, 1))/1.3 var(--f-caps); letter-spacing: 0.2em; text-transform: uppercase; color: var(--acc); } body.page-id-16516 .akd-tip__meta { margin-top: 6px !important; font: 600 calc(13px * var(--kb, 1))/1.4 var(--f-body); color: var(--cream); } body.page-id-16516 .akd-tip__meta b { font: var(--w-poster, 400) calc(17px * var(--kp, 1))/1 var(--f-poster); letter-spacing: 0.06em; color: var(--gold-hi); margin-right: 2px; } body.page-id-16516 .akd-tip__fact { margin-top: 4px !important; font: 400 calc(12.5px * var(--kb, 1))/1.45 var(--f-body); color: var(--soft); } /* Country card */ body.page-id-16516 .akd-place { width: 360px; display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; padding: 18px 20px 18px 16px; border-radius: 14px; } body.page-id-16516 .akd-place svg { display: block; width: 120px; height: 120px; overflow: visible; } body.page-id-16516 .akd-place path { fill: color-mix(in srgb, var(--acc) 0%, transparent); stroke: var(--gold-hi); stroke-width: 1.3; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.4, 0, .2, 1) 0.1s, fill 0.8s ease 0.9s; } body.page-id-16516 .akd-place.is-on path { stroke-dashoffset: 0; fill: color-mix(in srgb, var(--gold) 20%, transparent); } body.page-id-16516 .akd-place__hi { font: var(--w-poster, 400) calc(24px * var(--kp, 1))/1 var(--f-poster); letter-spacing: 0.06em; color: var(--acc); } body.page-id-16516 .akd-place__name { margin-top: 6px !important; font: var(--f-it, italic) 500 calc(30px * var(--kd, 1))/1.05 var(--f-display); color: var(--cream); } body.page-id-16516 .akd-place__meta { margin-top: 10px !important; font: 400 calc(13px * var(--kb, 1))/1.5 var(--f-body); color: var(--soft); } body.page-id-16516 .akd-place__meta b { font-weight: 700; color: var(--cream); } body.page-id-16516 .akd-place__region { margin-top: 8px !important; font: 600 calc(10.5px * var(--kc, 1))/1.3 var(--f-caps); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); } /* Game card */ body.page-id-16516 .akd-gcard { width: 600px; max-width: calc(100vw - 24px); display: grid; grid-template-columns: 236px 1fr; gap: 24px; padding: 18px; border-radius: 16px; } body.page-id-16516 .akd-gcard.is-on { pointer-events: auto; } body.page-id-16516 .akd-gcard__poster { display: block; width: 236px; aspect-ratio: 350 / 408; height: auto; object-fit: cover; border-radius: 8px; box-shadow: 0 20px 40px -12px #000; } body.page-id-16516 .akd-gcard__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 4px 4px 2px 0; } body.page-id-16516 .akd-gcard__eyebrow { font: 600 calc(11px * var(--kc, 1))/1 var(--f-caps); letter-spacing: 0.26em; text-transform: uppercase; color: var(--acc); } body.page-id-16516 .akd-gcard__title { font: var(--f-it, italic) 500 calc(31px * var(--kd, 1))/1.08 var(--f-display) !important; color: var(--cream) !important; letter-spacing: 0 !important; } body.page-id-16516 .akd-gcard__date { display: flex; align-items: baseline; gap: 10px; font: var(--w-poster, 400) calc(30px * var(--kp, 1))/1 var(--f-poster); letter-spacing: 0.04em; color: var(--gold-hi); } body.page-id-16516 .akd-gcard__date span { font: 600 calc(10px * var(--kc, 1))/1 var(--f-caps); letter-spacing: 0.24em; color: var(--soft); } body.page-id-16516 .akd-gcard__plats { display: flex; flex-wrap: wrap; gap: 6px; } body.page-id-16516 .akd-gcard__plats li { padding: 7px 11px; border-radius: 999px; font: 700 calc(11.5px * var(--kb, 1))/1 var(--f-body); letter-spacing: 0.03em; color: var(--cream); background: color-mix(in srgb, var(--acc) 18%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 55%, transparent); } body.page-id-16516 .akd-gcard__dev { font: 400 calc(13.5px * var(--kb, 1))/1.5 var(--f-body); color: var(--soft); } body.page-id-16516 .akd-gcard__dev b { font-weight: 700; color: var(--cream); } body.page-id-16516 .akd-gcard__wiki { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: auto; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--gold); font: 700 calc(11px * var(--kc, 1))/1 var(--f-caps); letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none !important; color: var(--gold-hi) !important; transition: background 0.3s ease, color 0.3s ease; } body.page-id-16516 .akd-gcard__wiki:hover, body.page-id-16516 .akd-gcard__wiki:focus-visible { background: var(--gold); color: var(--on-acc) !important; } body.page-id-16516 .akd-float__close { display: none; position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border: 1px solid rgba(var(--gold-rgb), 0.5); border-radius: 50%; background: rgba(var(--ink-rgb), 0.9); color: var(--cream); font: 400 calc(22px * var(--kb, 1))/1 var(--f-body); cursor: pointer; } /* ===================================================================== DEPTH LAYERS (created by design.js) ===================================================================== */ body.page-id-16516 .akd-depth { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background-color: var(--ink); } body.page-id-16516 .akd-depth > * { position: absolute; inset: 0; } body.page-id-16516 .akd-glow { background: radial-gradient(900px 700px at 15% 0%, color-mix(in srgb, var(--acc-fade) 10%, transparent), transparent 62%), radial-gradient(800px 800px at 95% 85%, rgba(var(--ember-rgb), 0.06), transparent 60%); } body.page-id-16516 .akd-rings { inset: -40%; background: repeating-radial-gradient(circle at 78% 30%, transparent 0 88px, color-mix(in srgb, var(--acc-fade) 5%, transparent) 88px 89px); transform: translate3d(0, calc(var(--akd-sy, 0) * -0.06px), 0); } body.page-id-16516 .akd-beam { inset: -20% -10%; background: conic-gradient(from 118deg at 0% 0%, transparent 0deg, rgba(var(--warm-rgb), 0.05) 8deg, rgba(var(--warm-rgb), 0.012) 18deg, transparent 26deg); transform-origin: 0 0; transform: rotate(calc(sin(var(--akd-sy, 0) * 0.002) * 4deg)); mix-blend-mode: screen; } body.page-id-16516 .akd-spot { background: radial-gradient(520px circle at var(--mx-px, 50%) var(--my-px, 30%), color-mix(in srgb, var(--acc-fade) 7%, transparent), transparent 70%); } body.page-id-16516 .akd-mesh { width: 100%; height: 100%; } body.page-id-16516 .akd-grain { inset: -50%; opacity: 0.08; background-image: url("data:image/svg+xml;utf8,"); animation: akd-grain 0.9s steps(6) infinite; } @keyframes akd-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-5%, 3%); } 40% { transform: translate(4%, -6%); } 60% { transform: translate(-3%, 7%); } 80% { transform: translate(6%, 2%); } 100% { transform: translate(0, 0); } } body.page-id-16516 .akd-vignette { background: radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(0, 0, 0, 0.7)); } body.page-id-16516 .akd-progress { position: fixed; left: 0; top: 0; z-index: 10002; width: 100%; height: 3px; background: linear-gradient(90deg, var(--c-gold), var(--c-ember), var(--c-violet), var(--c-teal)); transform-origin: 0 50%; transform: scaleX(var(--prog, 0)); pointer-events: none; } /* Foreground: faint blurred bokeh, nearer than the content */ body.page-id-16516 .akd-front { position: absolute; inset: 0; z-index: 3; overflow: clip; pointer-events: none; } body.page-id-16516 .akd-bokeh { position: absolute; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--acc-fade) 55%, #fff 10%), color-mix(in srgb, var(--acc-fade) 12%, transparent) 55%, transparent 70%); filter: blur(6px); transform: translate3d(0, calc(var(--akd-sy, 0) * var(--v) * -1px), 0); } /* ===================================================================== STYLE KEYS (created by design.js): a font key and a colour key, fixed at the top right just under the theme header. Pressing a key picks a random font set / palette; hovering (or focusing) it opens a small gallery of all of them, and each tile can be picked directly. The panels use Manrope so they stay readable in every font set. ===================================================================== */ body.page-id-16516 .akd-dock { position: fixed; z-index: 999; /* above the theme's #main-content (997) */ top: var(--dock-top, 96px); right: 18px; display: flex; gap: 7px; padding: 6px; border-radius: 999px; background: rgba(var(--panel-rgb), 0.74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.3), 0 16px 34px -18px #000; font-family: 'Manrope', 'Segoe UI', Arial, sans-serif; opacity: 0; translate: 0 -8px; transition: opacity 0.5s ease, translate 0.6s cubic-bezier(.2, .8, .2, 1); } body.page-id-16516 .akd-dock.is-ready { opacity: 1; translate: 0 0; } body.page-id-16516 .akd-key { position: relative; } body.page-id-16516 .akd-key__btn { position: relative; display: grid; place-items: center; width: 42px; height: 42px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(var(--ink-rgb), 0.82); color: var(--cream); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.38); transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), box-shadow 0.35s ease; -webkit-tap-highlight-color: transparent; } body.page-id-16516 .akd-key__btn:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--gold), 0 0 22px -6px var(--gold); } body.page-id-16516 .akd-key__btn:focus { outline: none; } body.page-id-16516 .akd-key__btn:focus-visible { box-shadow: inset 0 0 0 2px var(--cream), 0 0 22px -6px var(--gold); } body.page-id-16516 .akd-key__btn:active { transform: scale(0.93); } body.page-id-16516 .akd-key__btn::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid transparent; border-top-color: var(--gold-hi); opacity: 0; pointer-events: none; } @keyframes akd-spin { to { rotate: 360deg; } } body.page-id-16516 .akd-key.is-busy .akd-key__btn::after { opacity: 1; animation: akd-spin 0.8s linear infinite; } body.page-id-16516 .akd-key__aa { display: inline-flex; align-items: baseline; gap: 1px; color: var(--gold-hi); line-height: 1; } body.page-id-16516 .akd-key__aa b { font: var(--w-poster, 400) 19px/1 var(--f-poster); } body.page-id-16516 .akd-key__aa i { font: var(--f-it, italic) 500 19px/1 var(--f-display); } body.page-id-16516 .akd-key__sw { width: 24px; height: 24px; border-radius: 50%; background: conic-gradient(var(--gold), var(--c-gold), var(--c-teal), var(--c-ember), var(--c-violet), var(--gold)); box-shadow: inset 0 0 0 4px rgba(var(--ink-rgb), 0.92), 0 0 0 1px rgba(255, 255, 255, 0.2); transition: rotate 0.9s cubic-bezier(.2, .8, .2, 1); } body.page-id-16516 .akd-key__btn:hover .akd-key__sw { rotate: 120deg; } /* hover gallery */ body.page-id-16516 .akd-panel { position: absolute; top: 100%; right: -6px; width: 392px; margin-top: 14px; padding: 14px; border-radius: 16px; background: rgba(var(--panel-rgb), 0.97); box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.32), 0 30px 60px -24px #000; color: var(--cream); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: 92% 0; transition: opacity 0.2s ease 0.25s, transform 0.3s ease 0.25s, visibility 0s linear 0.55s; } body.page-id-16516 .akd-key--colour .akd-panel { width: 404px; } body.page-id-16516 .akd-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } body.page-id-16516 .akd-panel::after { content: ''; position: absolute; top: -5px; right: 22px; width: 9px; height: 9px; background: rgba(var(--panel-rgb), 0.97); box-shadow: -1px -1px 0 0 rgba(var(--gold-rgb), 0.32); transform: rotate(45deg); } body.page-id-16516 .akd-key:hover .akd-panel, body.page-id-16516 .akd-key:has(:focus-visible) .akd-panel, body.page-id-16516 .akd-key.is-open .akd-panel { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s ease 0.06s, transform 0.3s cubic-bezier(.2, .8, .2, 1) 0.06s, visibility 0s; } body.page-id-16516 .akd-panel__title { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 12px !important; font: 700 10px/1 'Manrope', 'Segoe UI', sans-serif; letter-spacing: 0.26em; text-transform: uppercase; color: var(--soft); } body.page-id-16516 .akd-panel__title b { font-weight: 700; color: var(--gold); letter-spacing: 0.1em; } body.page-id-16516 .akd-panel__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } body.page-id-16516 .akd-panel__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } body.page-id-16516 .akd-font, body.page-id-16516 .akd-pal { margin: 0; border: 0; border-radius: 10px; background: rgba(var(--ink-rgb), 0.72); color: var(--cream); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.16); transition: transform 0.3s cubic-bezier(.2, .8, .2, 1), box-shadow 0.3s ease, background 0.3s ease; -webkit-tap-highlight-color: transparent; } body.page-id-16516 .akd-font:hover, body.page-id-16516 .akd-pal:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--gold); } body.page-id-16516 .akd-font:focus, body.page-id-16516 .akd-pal:focus { outline: none; } body.page-id-16516 .akd-font:focus-visible, body.page-id-16516 .akd-pal:focus-visible { box-shadow: inset 0 0 0 2px var(--cream); } body.page-id-16516 .akd-font[aria-pressed="true"], body.page-id-16516 .akd-pal[aria-pressed="true"] { background: rgba(var(--gold-rgb), 0.16); box-shadow: inset 0 0 0 1.5px var(--gold); } body.page-id-16516 .akd-font { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 4px 9px; } body.page-id-16516 .akd-font__aa { display: flex; align-items: baseline; justify-content: center; height: 34px; color: var(--gold-hi); font-size: 31px; line-height: 1; } body.page-id-16516 .akd-font__aa b { font-weight: inherit; } body.page-id-16516 .akd-font__aa i { font-size: 29px; } body.page-id-16516 .akd-font__name { font: 600 9.5px/1.2 'Manrope', 'Segoe UI', sans-serif; letter-spacing: 0.04em; color: var(--soft); text-align: center; white-space: nowrap; } body.page-id-16516 .akd-font[aria-pressed="true"] .akd-font__name { color: var(--cream); } body.page-id-16516 .akd-pal { display: flex; align-items: center; gap: 9px; padding: 6px 10px 6px 6px; font: 600 12.5px/1 'Manrope', 'Segoe UI', sans-serif; text-align: left; } body.page-id-16516 .akd-pal__sw { display: flex; flex: none; gap: 3px; padding: 5px 7px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); } body.page-id-16516 .akd-pal__sw i { width: 10px; height: 10px; border-radius: 50%; } body.page-id-16516 .akd-pal__name { flex: 1; } body.page-id-16516 .akd-pal[aria-pressed="true"] .akd-pal__name::after { content: '✓'; float: right; color: var(--gold); } /* the language key (010): a round key with the language code, a list of 8 */ body.page-id-16516 .akd-key__lang { font: 800 13px/1 'Manrope', 'Segoe UI', sans-serif; letter-spacing: 0.06em; color: var(--gold-hi); } body.page-id-16516 .akd-key--lang .akd-panel { width: 330px; } body.page-id-16516 .akd-lang { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; border: 0; border-radius: 10px; background: rgba(var(--ink-rgb), 0.72); color: var(--cream); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.16); font: 600 14px/1.1 'Manrope', 'Vazirmatn', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans Devanagari', 'Segoe UI', sans-serif; text-align: start; transition: transform 0.3s cubic-bezier(.2, .8, .2, 1), box-shadow 0.3s ease, background 0.3s ease; } body.page-id-16516 .akd-lang:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--gold); } body.page-id-16516 .akd-lang:focus { outline: none; } body.page-id-16516 .akd-lang:focus-visible { box-shadow: inset 0 0 0 2px var(--cream); } body.page-id-16516 .akd-lang[aria-pressed="true"] { background: rgba(var(--gold-rgb), 0.16); box-shadow: inset 0 0 0 1.5px var(--gold); } body.page-id-16516 .akd-lang__code { flex: none; padding: 4px 6px; border-radius: 5px; background: rgba(var(--gold-rgb), 0.14); color: var(--gold-hi); font: 800 10px/1 'Manrope', sans-serif; letter-spacing: 0.08em; direction: ltr; } body.page-id-16516 .akd-panel__hint { margin: 12px 2px 0 !important; font: 500 11px/1.45 'Manrope', 'Segoe UI', sans-serif; color: var(--soft); opacity: 0.85; } body.page-id-16516 .akd-dock__toast { position: absolute; right: 4px; top: calc(100% + 12px); padding: 8px 13px; border-radius: 999px; background: rgba(var(--panel-rgb), 0.96); box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.38), 0 14px 30px -16px #000; color: var(--cream); font: 600 12px/1 'Manrope', 'Segoe UI', sans-serif; white-space: nowrap; opacity: 0; transform: translateY(-4px); transition: opacity 0.3s ease, transform 0.35s ease; pointer-events: none; } body.page-id-16516 .akd-dock__toast b { color: var(--gold-hi); font-weight: 700; } body.page-id-16516 .akd-dock__toast.is-on { opacity: 1; transform: none; } body.page-id-16516 .akd-dock:has(.akd-key:hover, .akd-key.is-open) .akd-dock__toast { opacity: 0; } /* Colour change: the new palette opens as a circle from the colour key (View Transitions; browsers without them switch instantly). */ html.akd-vt-reveal::view-transition-old(root), html.akd-vt-reveal::view-transition-new(root) { animation: none; mix-blend-mode: normal; } html.akd-vt-reveal::view-transition-new(root) { z-index: 1; } /* Hero buttons: space above (the room for the ticket shadows comes from .akd-hb.d21) */ body.page-id-16516 #wpb-content-root .akd-hb--hero { margin: 44px 0 0; } /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width: 1023px) { body.page-id-16516 #wpb-content-root .akd-mag > .akd-mag__p, body.page-id-16516 #wpb-content-root .akd-mag > .akd-mag__rail { grid-column: 1 / -1 !important; } body.page-id-16516 #wpb-content-root .akd-mag .akd-mag__p3 { margin: 36px 0 0; } body.page-id-16516 #wpb-content-root .akd-mag .akd-mag__p4 { margin-top: 36px; } body.page-id-16516 #wpb-content-root .akd-mag .akd-mag__p5 { margin-top: 30px; } body.page-id-16516 #wpb-content-root .akd-stop { width: auto; margin: 26px 0 0 44px; align-self: stretch; transform: none; } body.page-id-16516 #wpb-content-root .akd-stop--start { margin: 0 0 10px; width: auto; text-align: left; } body.page-id-16516 #wpb-content-root .akd-stop--start .akd-stop__head { justify-content: flex-start; } body.page-id-16516 #wpb-content-root .akd-route .akd-stop--start p { text-align: start !important; } body.page-id-16516 #wpb-content-root > .vc_row.akd-hero-row { grid-template-columns: minmax(0, 1fr); row-gap: 70px; } body.page-id-16516 #wpb-content-root .wpb_wrapper.akd-grid { display: block; } body.page-id-16516 #wpb-content-root :is(.pg16516-text-3, .pg16516-text-5, .pg16516-text-7) { margin-top: 22px; } body.page-id-16516 #wpb-content-root :is(.akd-kicker--story, .akd-kicker--clients, .akd-kicker--journey, .akd-kicker--places) { margin-top: 110px; } body.page-id-16516 #wpb-content-root :is(.pg16516-text-10, .pg16516-text-12) { margin-top: 44px; } body.page-id-16516 #wpb-content-root :is(.pg16516-text-10, .pg16516-text-12) > .wpb_wrapper { column-count: 1; padding: 40px 34px; } body.page-id-16516 #wpb-content-root .wpb_wrapper.akd-grid > .wpb_gallery .wpb_image_grid_ul, body.page-id-16516 #wpb-content-root .vc_inner .wpb_image_grid_ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } body.page-id-16516 #wpb-content-root .wpb_single_image { justify-content: center; } } @media (max-width: 767px) { body.page-id-16516 .akd-lanes { --lm: 170px; } body.page-id-16516 .akd-lane__tag { left: calc(12vw + 10px); } body.page-id-16516 #wpb-content-root .pg16516-text-10 > .wpb_wrapper.akd-mag { padding: 40px 24px 34px; column-gap: 0; } body.page-id-16516 #wpb-content-root .akd-mag__rail { display: grid; grid-template-columns: 1fr 1fr; } body.page-id-16516 #wpb-content-root .akd-mag__rail span { padding: 12px 4px; letter-spacing: 0.16em; } body.page-id-16516 #wpb-content-root .akd-mag__rail span:nth-child(3) { border-left: 0; } body.page-id-16516 #wpb-content-root .akd-mag__rail span:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, var(--acc-fade) 30%, transparent); } body.page-id-16516 #wpb-content-root h4.akd-has-chips { gap: 12px 10px; } body.page-id-16516 #wpb-content-root .pg16516-text-12 > .wpb_wrapper.akd-route { padding: 40px 18px 50px; } body.page-id-16516 #wpb-content-root .akd-stop { margin-left: 30px; padding: 20px 18px; } body.page-id-16516 #wpb-content-root .akd-cfx { display: none; } body.page-id-16516 #wpb-content-root .akd-tk.is-key .akd-tk__main { font-size: calc(24px * var(--kp, 1)); } body.page-id-16516 #wpb-content-root .wpb_single_image .vc_figure { height: auto; aspect-ratio: 4 / 5; } body.page-id-16516 #wpb-content-root :is(.pg16516-text-1, .pg16516-text-3, .pg16516-text-5, .pg16516-text-7) { padding: 30px 24px 4px; } body.page-id-16516 #wpb-content-root :is(.pg16516-text-2, .pg16516-text-4, .pg16516-text-6, .pg16516-text-8) { padding: 10px 24px 28px; } body.page-id-16516 #wpb-content-root :is(.pg16516-text-1, .pg16516-text-3, .pg16516-text-5, .pg16516-text-7)::after { font-size: calc(58px * var(--kp, 1)); right: 20px; } body.page-id-16516 #wpb-content-root .akd-chip { font-size: calc(14px * var(--kb, 1)); padding: 9px 14px; } body.page-id-16516 #wpb-content-root .pg16516-text-11 h3 { text-align: start !important; margin-left: 0; } body.page-id-16516 #wpb-content-root :is(.pg16516-text-10, .pg16516-text-12) > .wpb_wrapper { padding: 30px 22px; } body.page-id-16516 #wpb-content-root .wpb_wrapper.akd-grid > .wpb_gallery { padding: 46px 14px; } body.page-id-16516 #wpb-content-root .wpb_wrapper.akd-grid > .wpb_gallery .wpb_image_grid_ul, body.page-id-16516 #wpb-content-root .vc_inner .wpb_image_grid_ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; } body.page-id-16516 #wpb-content-root > .vc_row.akd-games-row .wpb_image_grid_ul { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px 10px; } body.page-id-16516 #wpb-content-root > .vc_row.akd-games-row .wpb_image_grid_ul > li[data-year]::after { font-size: calc(14px * var(--kp, 1)); padding-top: 18px; } body.page-id-16516 .akd-bokeh { display: none; } body.page-id-16516 .akd-dock { right: 10px; gap: 5px; padding: 5px; } body.page-id-16516 .akd-key__btn { width: 38px; height: 38px; } body.page-id-16516 .akd-panel, body.page-id-16516 .akd-key--colour .akd-panel { width: min(360px, calc(100vw - 20px)); } body.page-id-16516 .akd-font__aa { height: 28px; font-size: 25px; } body.page-id-16516 .akd-font__aa i { font-size: 23px; } body.page-id-16516 .akd-pal__sw i:nth-child(n+4) { display: none; } body.page-id-16516 .akd-key--font .akd-panel { right: -49px; } body.page-id-16516 .akd-key--font .akd-panel::after { right: 64px; } /* Cards become bottom sheets on phones */ body.page-id-16516 .akd-float.is-sheet { left: 10px; right: 10px; top: auto; bottom: 10px; width: auto; max-width: none; transform: translate3d(0, 24px, 0); transform-origin: 50% 100%; } body.page-id-16516 .akd-float.is-sheet.is-on { transform: translate3d(0, 0, 0); pointer-events: auto; } body.page-id-16516 .akd-float.is-sheet .akd-float__close { display: block; } body.page-id-16516 .akd-gcard.is-sheet { grid-template-columns: 112px 1fr; gap: 16px; padding: 16px; } body.page-id-16516 .akd-gcard.is-sheet .akd-gcard__poster { width: 112px; } body.page-id-16516 .akd-gcard.is-sheet .akd-gcard__title { font-size: calc(24px * var(--kd, 1)) !important; padding-right: 36px; } body.page-id-16516 .akd-gcard.is-sheet .akd-gcard__date { font-size: calc(24px * var(--kp, 1)); } body.page-id-16516 .akd-place.is-sheet { grid-template-columns: 96px 1fr; } body.page-id-16516 .akd-place.is-sheet svg { width: 96px; height: 96px; } } @media (prefers-reduced-motion: reduce) { body.page-id-16516 .akd-grain, body.page-id-16516 #wpb-content-root .akd-hero-last, body.page-id-16516 .akd-key.is-busy .akd-key__btn::after { animation: none; } body.page-id-16516 #wpb-content-root .akd-w { opacity: 1; transform: none; } body.page-id-16516 #wpb-content-root .akd-cfx *, body.page-id-16516 .akd-gate::after, body.page-id-16516 #wpb-content-root .akd-route__arcs path { animation: none !important; } body.page-id-16516 #wpb-content-root :is(.akd-stop, .akd-mag__bg, .akd-route__back), body.page-id-16516 .akd-gate__s { transform: none; } body.page-id-16516 *, body.page-id-16516 *::before, body.page-id-16516 *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; } } /* ===================================================================== LANGUAGES (010): scripts other than Latin Arabic, Persian and Devanagari letters join, so no letter spacing and no capitals there; Chinese and Japanese get tighter spacing. Right-to-left text flows from the right; the layout itself stays as it is. ===================================================================== */ html.akd-nonlatin body.page-id-16516 :is(#wpb-content-root, .akd-dock, .akd-float, .akd-slot, .akd-lanes, .akd-arcade) :is(*, *::before, *::after) { letter-spacing: normal !important; text-transform: none !important; } html.akd-lang-zh body.page-id-16516 #wpb-content-root :is(.akd-kicker__sub, .akd-slot__kick, .akd-stop__tag, .akd-mag__rail span, .akd-hero-kicker), html.akd-lang-ja body.page-id-16516 #wpb-content-root :is(.akd-kicker__sub, .akd-slot__kick, .akd-stop__tag, .akd-mag__rail span, .akd-hero-kicker) { letter-spacing: 0.12em !important; } html.akd-rtl body.page-id-16516 #wpb-content-root :is(.pg16516-hero, .akd-slot__cap, .akd-stop, .akd-mag, .akd-kicker__txt) { direction: rtl; } html.akd-rtl body.page-id-16516 .akd-float { direction: rtl; } html.akd-rtl body.page-id-16516 #wpb-content-root .akd-hero-name { align-items: flex-start; } html.akd-rtl body.page-id-16516 #wpb-content-root .akd-hero-echo { left: auto; right: 0; } html.akd-rtl body.page-id-16516 #wpb-content-root .akd-mag .akd-mag__p3 { padding: 6px 28px 0 0; border-left: 0; border-right: 2px solid var(--c-teal); } html.akd-rtl body.page-id-16516 #wpb-content-root .akd-mag .akd-mag__p3::before { left: auto; right: 18px; } html.akd-nonlatin body.page-id-16516 #wpb-content-root :is(.pg16516-text-9, .pg16516-text-11) h3 { line-height: 1.35; } html.akd-rtl body.page-id-16516 .akd-panel__hint, html.akd-rtl body.page-id-16516 .akd-dock__toast { direction: rtl; text-align: right; } /* Black & White (010): the logo cards stay white paper (the logos are multiplied onto it) */ html[data-pal="mono"] body.page-id-16516 #wpb-content-root .wpb_wrapper.akd-grid > .wpb_gallery li { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); }