/* ============================================================ THE UK CAREERS FAIR — 2026 DESIGN SYSTEM Brand tokens are centralised here. If exact brand hex values differ, update :root and the whole site updates. ============================================================ */ :root{ /* Brand */ --navy-900:#081A33; --navy-800:#0C2547; --navy-700:#11315E; --navy-600:#16407B; --blue-700:#1B5FC4; /* deep brand blue */ --blue-600:#1E6FD6; /* darker brand blue — darkened from #2A7BE0 for WCAG AA text contrast (~4.9:1 on white) */ --blue-500:#4593F2; /* BRAND BLUE */ --blue-400:#7AB2F7; --blue-200:#C9DFFC; --blue-100:#E7F1FE; --blue-50:#F3F8FE; --ink:#0E1626; --slate:#5A6478; --line:#E6EAF2; --bg:#F6F8FC; --white:#FFFFFF; --gold:#F5B82E; /* Type */ --font-display:"Sora","Sora Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-body:"Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; /* Shape */ --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:999px; --shadow-sm:0 1px 2px rgba(8,26,51,.06),0 4px 12px rgba(8,26,51,.05); --shadow-md:0 6px 24px rgba(8,26,51,.10); --shadow-lg:0 20px 60px rgba(8,26,51,.18); --wrap:1180px; } /* Self-hosted variable fonts (same-origin, preloaded in ). Sora 25KB / Inter 48KB cover all weights. Same-origin + preloaded means the font is ready at first paint -> no cross-origin swap, which kills the hero font-swap CLS (was 0.43). Replaces the Google Fonts . */ @font-face{font-family:"Sora";font-style:normal;font-weight:100 800;font-display:swap;src:url("/fonts/sora-var.woff2") format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/inter-var.woff2") format("woff2")} /* Metric-matched fallback fonts: the local system font reports Sora/Inter-like ascent/descent/advance so the webfont swap reflows ~nothing (cuts font-swap CLS). Real Sora/Inter still load first in the stack; this only governs the swap window. */ @font-face{font-family:"Sora Fallback";src:local("Arial");size-adjust:96%;ascent-override:96%;descent-override:24%;line-gap-override:0%} @font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:107.4%;ascent-override:90.49%;descent-override:22.56%;line-gap-override:0%} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--font-body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.6} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} h1,h2,h3,h4{font-family:var(--font-display);line-height:1.12;letter-spacing:-.02em;font-weight:700} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:15px; padding:14px 28px;border-radius:var(--r-pill);transition:.25s ease;cursor:pointer;border:0;white-space:nowrap} .btn .arr{transition:transform .25s ease} .btn:hover .arr{transform:translateX(4px)} .btn-primary{background:var(--blue-500);color:#fff;box-shadow:0 8px 24px rgba(69,147,242,.38)} .btn-primary:hover{background:var(--blue-600);transform:translateY(-2px)} .btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(8px)} .btn-ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)} .btn-dark{background:var(--white);color:var(--blue-700);border:1.5px solid var(--blue-200)} .btn-dark:hover{background:var(--blue-50);border-color:var(--blue-500);transform:translateY(-2px)} .btn-outline{background:transparent;color:var(--blue-700);border:1.5px solid var(--blue-500)} .btn-outline:hover{background:var(--blue-500);color:#fff} /* ---------- Header ---------- */ .site-header{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .3s ease,box-shadow .3s ease,border-color .3s ease; background:transparent;border-bottom:1px solid transparent} .site-header.solid{background:rgba(255,255,255,.97);border-bottom-color:rgba(8,26,51,.07); box-shadow:0 1px 3px rgba(8,26,51,.05),0 8px 24px rgba(8,26,51,.08); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)} .site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:28px; margin:0 auto;max-width:var(--wrap);padding:14px 24px;} .logo img{height:34px;width:auto;transition:filter .3s ease} .site-header.solid .logo img{filter:invert(1) brightness(0)} .nav-links{display:flex;align-items:center;gap:0;list-style:none} .nav-links a{font-size:14px;font-weight:500;color:rgba(255,255,255,.88);padding:8px 14px;border-radius:6px; transition:color .2s;position:relative} .nav-links a:hover{color:#fff} .nav-links a.active{color:#fff;font-weight:600} .nav-links a.active::after{content:'';position:absolute;bottom:-2px;left:14px;right:14px; height:2px;border-radius:2px;background:#fff;opacity:.7} .site-header.solid .nav-links a{color:var(--slate)} .site-header.solid .nav-links a:hover{color:var(--ink);background:none} .site-header.solid .nav-links a.active{color:var(--blue-600);font-weight:600;background:none} .site-header.solid .nav-links a.active::after{background:var(--blue-500);opacity:1} .nav-cta{display:flex;align-items:center;gap:10px} .nav-cta .btn{padding:11px 22px;font-size:14px} /* Ghost + primary adapt to transparent (over blue) vs solid (white) header */ .site-header .btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45);backdrop-filter:none} .site-header .btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff;transform:translateY(-1px)} .site-header .btn-primary{background:#fff;color:var(--blue-700);box-shadow:0 8px 24px rgba(8,26,51,.22)} .site-header .btn-primary:hover{background:var(--blue-50)} .site-header.solid .btn-ghost{color:var(--ink);border-color:rgba(14,22,38,.22)} .site-header.solid .btn-ghost:hover{background:rgba(14,22,38,.06);color:var(--ink)} .site-header.solid .btn-primary{background:var(--blue-500);color:#fff;box-shadow:0 8px 24px rgba(69,147,242,.38)} .site-header.solid .btn-primary:hover{background:var(--blue-600)} .menu-toggle{display:none;border:0;cursor:pointer;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.18)} .site-header.solid .menu-toggle{background:rgba(69,147,242,.1)} .menu-toggle span{display:block;width:20px;height:2px;background:#fff;margin:3px auto;border-radius:2px;transition:transform .28s cubic-bezier(.2,.8,.25,1),opacity .2s ease} .site-header.solid .menu-toggle span{background:var(--ink)} /* open state → morph the three lines into a clean X */ .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)} .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)} /* Visible keyboard focus on the (otherwise transparent-header) menu toggle */ #menuToggle:focus-visible{outline:3px solid var(--blue-500);outline-offset:2px} .nav-search{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%; border:1.5px solid rgba(255,255,255,.45);background:transparent;color:#fff;cursor:pointer;font-size:16px;transition:.2s} .nav-search:hover{background:rgba(255,255,255,.14)} .site-header.solid .nav-search{border-color:rgba(14,22,38,.22);color:var(--ink)} .site-header.solid .nav-search:hover{background:rgba(14,22,38,.06)} /* ---------- Hero (blue) ---------- */ .hero{position:relative;background:var(--blue-500);color:#fff;overflow:hidden} .hero::before{content:"";position:absolute;inset:0; background: radial-gradient(900px 550px at 92% -5%, rgba(8,26,51,.5), transparent 65%), radial-gradient(700px 600px at -5% 110%, rgba(42,123,224,.6), transparent 60%), radial-gradient(600px 400px at 50% 50%, rgba(255,255,255,.05), transparent 55%); pointer-events:none} .hero .wrap{position:relative;z-index:2} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:rgba(255,255,255,.9);background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3); padding:8px 18px;border-radius:var(--r-pill);margin-bottom:26px} .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 2s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} .hero h1{font-size:clamp(40px,6vw,72px);font-weight:800;margin-bottom:24px} .hero h1 .accent{background:linear-gradient(100deg,rgba(255,255,255,.95),rgba(255,255,255,.65));-webkit-background-clip:text;background-clip:text;color:transparent} /* Dark accent — navy/ink colour for strong contrast on blue background */ .hero h1 .accent-dark{color:var(--navy-900);font-weight:800} .hero .lede{font-size:clamp(16px,1.6vw,19px);color:rgba(255,255,255,.92);max-width:640px;margin-bottom:38px;text-shadow:0 1px 2px rgba(8,26,51,.25)} .hero-actions{display:flex;gap:14px;flex-wrap:wrap} /* ============ HERO 3D STAGE (homepage wow piece) ============ */ .hero-stage{position:relative;perspective:1400px;min-height:480px} .stage-aurora{position:absolute;inset:-10%;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none; background:radial-gradient(closest-side,rgba(255,255,255,.28),rgba(122,178,247,.12) 55%,transparent 75%)} .stage-inner{position:absolute;inset:0;transform-style:preserve-3d; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))} .tile{position:absolute;margin:0;border-radius:18px;overflow:hidden; border:1px solid rgba(255,255,255,.22); box-shadow:0 24px 60px rgba(0,0,0,.5); transition:box-shadow .6s ease,filter .6s ease; animation:tileFloat 7s ease-in-out infinite} .tile img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform 6s ease} .tile figcaption{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:8px; background:rgba(8,26,51,.72);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16); color:#fff;font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.04em; padding:7px 13px;border-radius:999px;opacity:0;transform:translateY(6px);transition:.5s ease} .live-dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 2.2s infinite} .t1{left:0;top:4%;width:54%;aspect-ratio:4/3;transform:translateZ(40px);animation-delay:0s} .t2{right:0;top:0;width:42%;aspect-ratio:1/1;transform:translateZ(85px);animation-delay:-2.2s} .t3{left:6%;bottom:0;width:40%;aspect-ratio:1/1;transform:translateZ(70px);animation-delay:-4.1s} .t4{right:2%;bottom:4%;width:48%;aspect-ratio:4/3;transform:translateZ(110px);animation-delay:-5.6s} /* Use the independent `translate` property (compositor-only) rather than margin-top (forces layout each frame). Keeps each tile's own transform:translateZ() intact. */ @keyframes tileFloat{0%,100%{translate:0 0}50%{translate:0 -12px}} .tile.spot{box-shadow:0 0 0 2px rgba(255,255,255,.85),0 28px 64px rgba(0,0,0,.5);z-index:3} .tile.spot img{transform:scale(1.12)} .tile.spot figcaption{opacity:1;transform:none} .tile.dim{filter:none} .stage-chip{position:absolute;display:flex;flex-direction:column;gap:1px;z-index:4; background:rgba(8,26,51,.82);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18); border-radius:14px;padding:12px 18px;color:#fff;box-shadow:0 12px 36px rgba(8,26,51,.35); animation:tileFloat 6s ease-in-out infinite} .stage-chip b{font-family:var(--font-display);font-size:18px} .stage-chip span{font-size:11.5px;color:rgba(255,255,255,.9)} .chip-a{left:-3%;top:38%;transform:translateZ(150px);animation-delay:-1.5s} .chip-b{right:-2%;top:54%;transform:translateZ(150px);animation-delay:-3.8s} @media (max-width:980px){ .hero-stage{min-height:380px;margin-top:8px} .chip-a{left:0}.chip-b{right:0} } @media (prefers-reduced-motion:reduce){ .tile,.stage-chip,.stage-aurora{animation:none} .stage-inner{transform:none} } /* Hero two-column layout with event image */ .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center} .hero-visual{position:relative} .hero-visual img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg); border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 10px rgba(69,147,242,.08)} .hero-visual-badge{position:absolute;left:-22px;bottom:26px;background:rgba(8,26,51,.82);backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.16);border-radius:var(--r-md);padding:16px 22px;color:#fff} .hero-visual-badge b{font-family:var(--font-display);font-size:20px;display:block} .hero-visual-badge span{font-size:13px;color:rgba(255,255,255,.92)} @media (max-width:980px){ .hero-grid{grid-template-columns:1fr;gap:44px} .hero-visual-badge{left:14px} } /* Hero stats */ .stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:56px} .stat-card{ background:rgba(5,17,38,.65); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:22px 18px 20px; text-align:center; box-shadow:0 8px 32px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; cursor:default; } .stat-card:hover{ transform:translateY(-5px); box-shadow:0 18px 48px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12); border-color:rgba(69,147,242,.4); } .stat-strip b{display:block;font-family:var(--font-display);font-size:clamp(28px,3.2vw,42px);font-weight:800;color:#fff;margin-bottom:6px;letter-spacing:-.02em;line-height:1} .stat-strip span{font-size:11.5px;color:rgba(255,255,255,.5);font-weight:600;letter-spacing:.07em;text-transform:uppercase;line-height:1.3} /* ---------- Sections ---------- */ .section{padding:96px 0} .section.tight{padding:72px 0} .section-head{max-width:720px;margin-bottom:54px} .section-head.center{margin-left:auto;margin-right:auto;text-align:center} .kicker{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-600);margin-bottom:14px} .section-head h2{font-size:clamp(30px,3.6vw,44px);margin-bottom:16px} .section-head p{color:var(--slate);font-size:17px} /* ---------- Logo marquee ---------- */ .marquee-band{background:var(--white);border-block:1px solid var(--line);padding:48px 0;overflow:hidden} .marquee-band .label{text-align:center;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:34px} /* Two full-width colour logo rows sliding in opposite directions */ .logo-rows{display:flex;flex-direction:column;gap:40px;overflow:hidden} .logo-row{display:flex;gap:72px;width:max-content;align-items:center} .logo-row img{height:48px;width:auto;object-fit:contain;flex-shrink:0;transition:transform .2s} .logo-row img:hover{transform:scale(1.08)} .logo-row-l{animation:scroll 44s linear infinite} .logo-row-r{animation:scroll 44s linear infinite reverse} .logo-rows:hover .logo-row{animation-play-state:paused} @media(prefers-reduced-motion:reduce){ .logo-row{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:40px 56px} } @keyframes scroll{to{transform:translateX(-50%)}} /* ---------- Cards ---------- */ .grid{display:grid;gap:26px} .grid.cols-3{grid-template-columns:repeat(3,1fr)} .grid.cols-2{grid-template-columns:repeat(2,1fr)} .grid.cols-4{grid-template-columns:repeat(4,1fr)} /* ---------- Events view toggle (grid / list) ---------- */ .view-toggle{display:inline-flex;border:1.5px solid var(--line);border-radius:var(--r-pill);overflow:hidden;background:var(--white)} .vt-btn{border:0;background:transparent;font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--slate); padding:9px 16px;cursor:pointer;transition:.2s ease;display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .vt-btn:hover{color:var(--blue-700)} .vt-btn.on{background:var(--blue-500);color:#fff} @media(max-width:700px){#nearBtn{display:none}} /* hide geolocation "nearest" on mobile */ /* List layout: re-lay the same cards as horizontal rows (id beats .grid.cols-3 at all breakpoints) */ #evGrid.is-list{display:flex;flex-direction:column;gap:14px} #evGrid.is-list .event-card{flex-direction:row;align-items:stretch} #evGrid.is-list .event-card .thumb{width:230px;flex:none;aspect-ratio:auto} #evGrid.is-list .event-card .body{padding:18px 22px;gap:6px} #evGrid.is-list .event-card .ec-actions{margin-top:8px;padding-top:0} @media(max-width:640px){ #evGrid.is-list .event-card{flex-direction:column} #evGrid.is-list .event-card .thumb{width:100%;aspect-ratio:16/9} } .event-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; transition:.3s ease;display:flex;flex-direction:column;position:relative} .event-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent} .event-card .thumb{position:relative;aspect-ratio:16/9;overflow:hidden} .event-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .event-card:hover .thumb img{transform:scale(1.06)} .event-card .tag{position:absolute;top:14px;left:14px;background:rgba(8,26,51,.88);backdrop-filter:blur(6px); color:#fff;font-size:12px;font-weight:600;padding:6px 14px;border-radius:var(--r-pill);letter-spacing:.04em;text-shadow:0 1px 2px rgba(8,26,51,.45)} .event-card .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px;flex:1} .event-card h3{font-size:19px} .event-card .meta{color:var(--slate);font-size:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .event-card .meta .sep{opacity:.4} .event-card .link{margin-top:auto;padding-top:12px;color:var(--blue-600);font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;gap:6px} /* Quick-add on listing cards: a stretched link keeps the whole card clickable, while the "Add to booking" button sits above it (z-index) to capture its own clicks. */ .ec-stretch{position:absolute;inset:0;z-index:1;font-size:0;text-indent:-9999px} .event-card .ec-actions{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .event-card .ec-actions .link{margin-top:0;padding-top:0} .ec-add{position:relative;z-index:2;border:1.5px solid var(--blue-500);background:var(--blue-50);color:var(--blue-700); font-family:var(--font-display);font-weight:600;font-size:13px;border-radius:var(--r-pill);padding:9px 16px;cursor:pointer; white-space:nowrap;transition:.2s ease} .ec-add:hover{background:var(--blue-500);color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(69,147,242,.3)} .ec-add.added{background:#16c172;border-color:#16c172;color:#fff;pointer-events:none} .ec-ticket{position:relative;z-index:2;border:0;background:var(--blue-500);color:#fff; font-family:var(--font-display);font-weight:600;font-size:13px;border-radius:var(--r-pill);padding:9px 16px; cursor:pointer;white-space:nowrap;transition:.2s ease;box-shadow:0 6px 16px rgba(69,147,242,.3)} .ec-ticket:hover{background:var(--blue-600);transform:translateY(-1px)} .ec-free{display:inline-block;font-family:var(--font-body);font-size:10.5px;font-weight:700;color:#fff;background:#16c172;border-radius:var(--r-pill);padding:1px 8px;margin-left:2px;letter-spacing:.02em;transform-origin:center;animation:ec-free-wiggle 4.5s ease-in-out infinite} @keyframes ec-free-wiggle{0%,86%,100%{transform:rotate(0) scale(1)}89%{transform:rotate(-6deg) scale(1.06)}92%{transform:rotate(6deg) scale(1.06)}95%{transform:rotate(-3deg) scale(1.03)}98%{transform:rotate(0) scale(1)}} @media(prefers-reduced-motion:reduce){.ec-free{animation:none}} @media(prefers-reduced-motion:reduce){.ec-add:hover,.ec-ticket:hover{transform:none}} /* Quick free-ticket modal (candidates, on the events listing) */ .tkt-modal{position:fixed;inset:0;z-index:1300;align-items:center;justify-content:center;padding:20px} .tkt-modal:not([hidden]){display:flex} /* base rule sets no display, so the hidden attribute reliably hides it */ .tkt-scrim{position:absolute;inset:0;background:rgba(8,26,51,.5);opacity:0;transition:opacity .3s ease; -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} .tkt-modal.is-open .tkt-scrim{opacity:1} .tkt-box{position:relative;z-index:1;width:100%;max-width:440px;background:var(--white);border-radius:var(--r-lg); box-shadow:var(--shadow-lg);padding:30px 28px 24px;max-height:90vh;max-height:90dvh;overflow-y:auto; transform:translateY(16px) scale(.98);opacity:0;transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .32s ease} .tkt-modal.is-open .tkt-box{transform:none;opacity:1} .tkt-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;border-radius:var(--r-pill); background:var(--bg);color:var(--slate);font-size:20px;line-height:1;cursor:pointer;transition:.2s ease; display:flex;align-items:center;justify-content:center} .tkt-x:hover{background:var(--line);color:var(--ink);transform:rotate(90deg)} .tkt-eyebrow{display:inline-block;font-weight:700;font-size:12px;color:var(--blue-700);background:var(--blue-50); border:1px solid var(--blue-100);border-radius:var(--r-pill);padding:4px 12px;margin-bottom:12px} .tkt-box h3{font-size:22px;letter-spacing:-.01em} .tkt-sub{color:var(--slate);font-size:13.5px;margin-top:4px;line-height:1.5} .tkt-fields{margin-top:18px;display:flex;flex-direction:column;gap:13px} .tkt-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:420px){.tkt-row2{grid-template-columns:1fr}} .tkt-fields label{font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--ink);display:flex;flex-direction:column;gap:6px} .tkt-fields input,.tkt-fields select{font-family:var(--font-body);font-weight:400;font-size:14px;padding:12px 14px; border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--white);color:var(--ink);transition:.2s ease} .tkt-fields input:focus,.tkt-fields select:focus{outline:0;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(69,147,242,.13)} .tkt-consent{flex-direction:row!important;align-items:flex-start;gap:10px;font-weight:400!important;font-size:12.5px!important;color:var(--slate)!important;line-height:1.5;cursor:pointer} .tkt-consent input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--blue-500)} .tkt-consent a{color:var(--blue-600);font-weight:600} .tkt-err{margin:14px 0 0;color:#d23b3b;font-size:13px;font-weight:600} #tktSubmit{margin-top:18px} .tkt-note{text-align:center;font-size:11.5px;color:var(--slate);margin-top:12px} .tkt-done{text-align:center;padding:8px 0} .tkt-check{width:60px;height:60px;border-radius:var(--r-pill);background:#16c172;color:#fff;font-size:30px; display:flex;align-items:center;justify-content:center;margin:6px auto 14px} .tkt-done h3{margin-bottom:8px} .tkt-done .btn{margin-top:18px} .tkt-free{display:inline-block;vertical-align:middle;margin-left:6px;font-size:12px;font-weight:700;color:#fff;background:#16c172;border-radius:var(--r-pill);padding:3px 11px;letter-spacing:.02em} .tkt-party{margin:4px 0 18px;padding:16px 14px;background:var(--blue-50);border:1px solid var(--blue-100);border-radius:var(--r-md);text-align:left} .tkt-party-q{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink);margin-bottom:10px} .tkt-party-q span{display:block;font-family:var(--font-body);font-weight:400;font-size:12px;color:var(--slate);margin-top:2px} .tkt-party-opts{display:flex;flex-wrap:wrap;gap:7px} .tkt-party-opts button{border:1.5px solid var(--blue-200);background:var(--white);color:var(--blue-700);font-family:var(--font-display);font-weight:600;font-size:12.5px;border-radius:var(--r-pill);padding:8px 14px;cursor:pointer;transition:.18s ease} .tkt-party-opts button:hover{border-color:var(--blue-500);background:var(--blue-100)} .tkt-party-opts button.on{background:var(--blue-500);border-color:var(--blue-500);color:#fff} .tkt-party-thanks{margin-top:10px;font-size:12.5px;font-weight:600;color:#16a35c} .tkt-doors{font-size:12.5px;line-height:1.5;color:#7a5a12;background:#FFF7E6;border:1px solid #F7E3B0;border-radius:var(--r-md);padding:11px 13px;margin-bottom:16px;text-align:left} .tkt-group-note{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--slate);text-align:left} .tkt-group-note strong{color:var(--ink)} .tkt-group-note a{color:var(--blue-600);font-weight:700} .tkt-cowarn{background:#FFF7E6;border:1px solid #F7E3B0;border-radius:var(--r-md);padding:14px 14px 12px;margin-bottom:12px;text-align:left} .tkt-cowarn p{font-size:12.5px;line-height:1.5;color:#6b5212;margin:0 0 7px} .tkt-cowarn p strong{color:#5a4310} .tkt-cowarn-actions{display:flex;flex-direction:column;gap:8px;margin-top:10px} .tkt-cowarn-actions .btn{width:100%;justify-content:center;font-size:13px} /* Registration "registering you…" loader -> tick (shared by event.html + the quick modal) */ .regfx{display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 12px;animation:regfx-fade .25s ease both} .regfx[hidden]{display:none} /* the class display:flex must not override the hidden attribute */ .regfx-stage{position:relative;width:72px;height:72px;margin-bottom:20px} .regfx-ring,.regfx-check{position:absolute;inset:0;width:72px;height:72px} .regfx-ring{animation:regfx-spin .9s linear infinite} .regfx-ring .track{fill:none;stroke:var(--blue-100);stroke-width:5} .regfx-ring .arc{fill:none;stroke:var(--blue-500);stroke-width:5;stroke-linecap:round;stroke-dasharray:90 130} .regfx.done .regfx-ring{opacity:0;transition:opacity .2s} .regfx-check{opacity:0;transform:scale(.4)} .regfx.done .regfx-check{opacity:1;transform:scale(1);transition:transform .45s cubic-bezier(.18,1.6,.4,1),opacity .2s} .regfx-check .c{fill:none;stroke:#16c172;stroke-width:4;stroke-dasharray:145;stroke-dashoffset:145} .regfx-check .t{fill:none;stroke:#16c172;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40} .regfx.done .regfx-check .c{animation:regfx-draw .45s ease forwards} .regfx.done .regfx-check .t{animation:regfx-draw .3s .28s ease forwards} .regfx-title{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink);line-height:1.3;margin-bottom:6px} .regfx-status{font-size:13.5px;color:var(--slate);min-height:18px;transition:opacity .18s} @keyframes regfx-spin{to{transform:rotate(360deg)}} @keyframes regfx-draw{to{stroke-dashoffset:0}} @keyframes regfx-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.regfx{animation:none}.regfx-ring{animation:none}.regfx.done .regfx-check .c,.regfx.done .regfx-check .t{animation:none;stroke-dashoffset:0}.regfx.done .regfx-check{transition:none}} @media(prefers-reduced-motion:reduce){.tkt-scrim,.tkt-box{transition:none}.tkt-x:hover{transform:none}} .feature-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 30px;transition:.3s} .feature-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)} .feature-card .icon{width:52px;height:52px;border-radius:14px;background:var(--blue-100);color:var(--blue-600); display:flex;align-items:center;justify-content:center;font-size:23px;margin-bottom:20px} .feature-card h3{font-size:19px;margin-bottom:10px} .feature-card p{color:var(--slate);font-size:15px} .quote-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;display:flex;flex-direction:column;gap:18px;transition:.3s} .quote-card:hover{transform:scale(1.03);box-shadow:var(--shadow-lg)} .quote-card .stars{color:var(--gold);letter-spacing:3px;font-size:15px} .quote-card blockquote{font-size:16.5px;line-height:1.55;font-weight:500} .quote-card .who{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)} .quote-card .who b{font-family:var(--font-display);font-size:15px;display:block} .quote-card .who span{font-size:13.5px;color:var(--slate)} .quote-card .who.with-logo{display:flex;align-items:center;gap:12px} .quote-card .who-logo{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 2px 8px rgba(8,26,51,.08);display:flex;align-items:center;justify-content:center;overflow:hidden} .quote-card .who-logo img{width:84%;height:84%;object-fit:contain} .quote-card .who-text{min-width:0} /* ---------- Split audience panels ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:26px} .panel{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:460px;display:flex;align-items:flex-end;color:#fff} .panel img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,26,51,.05) 20%,rgba(8,26,51,.88) 78%)} .panel .content{position:relative;z-index:2;padding:38px} .panel .content .kicker{color:var(--blue-400)} .panel h3{font-size:clamp(22px,5vw,28px);margin-bottom:10px} .panel p{color:rgba(255,255,255,.9);font-size:15.5px;margin-bottom:22px;max-width:420px} .panel ul{list-style:none;margin-bottom:24px;display:grid;gap:9px} .panel ul li{display:flex;gap:10px;font-size:15px;color:rgba(255,255,255,.88)} .panel ul li::before{content:"✓";color:var(--blue-400);font-weight:700} /* ---------- Dark CTA band ---------- */ .cta-band{position:relative;background:linear-gradient(135deg,var(--blue-700),var(--blue-500));color:#fff;border-radius:var(--r-lg);overflow:hidden; padding:74px 60px;text-align:center} .cta-band::before{content:"";position:absolute;inset:0; background:radial-gradient(640px 320px at 50% -20%,rgba(255,255,255,.22),transparent 65%)} .cta-band .btn-primary{background:#fff;color:var(--blue-700);box-shadow:0 10px 30px rgba(8,26,51,.28)} .cta-band .btn-primary:hover{background:var(--blue-50)} .cta-band>*{position:relative} .cta-band h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:14px} .cta-band p{color:rgba(255,255,255,.7);max-width:560px;margin:0 auto 32px} .cta-band .hero-actions{justify-content:center} /* ---------- Filters / chips ---------- */ .chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px} .chip{font-size:13.5px;font-weight:600;padding:9px 18px;border-radius:var(--r-pill);background:var(--white); border:1px solid var(--line);color:var(--slate);cursor:pointer;transition:.2s;font-family:var(--font-body)} .chip:hover{border-color:var(--blue-500);color:var(--blue-600)} .chip.active{background:var(--blue-500);color:#fff;border-color:var(--blue-500)} /* ---------- Event table list ---------- */ .event-row{display:grid;grid-template-columns:120px 1fr 1fr auto;gap:18px;align-items:center; background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 24px;transition:.25s} .event-row:hover{box-shadow:var(--shadow-md);transform:translateX(4px);border-color:transparent} .event-row .date{font-family:var(--font-display);font-weight:700;color:var(--navy-800)} .event-row .date small{display:block;font-weight:500;color:var(--slate);font-size:12px;letter-spacing:.06em;text-transform:uppercase} .event-row .name{font-weight:600;font-size:16.5px} .event-row .name span{display:block;font-size:13px;color:var(--blue-600);font-weight:600;margin-top:2px} .event-row .venue{color:var(--slate);font-size:14.5px} .event-row .go{color:var(--blue-600);font-weight:700;font-size:14px;white-space:nowrap} .rows{display:grid;gap:12px} /* ---------- FAQ ---------- */ .faq{display:grid;gap:14px;max-width:820px;margin:0 auto} .faq details{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:0 26px;transition:.25s} .faq details[open]{box-shadow:var(--shadow-sm);border-color:rgba(69,147,242,.45)} .faq summary{font-family:var(--font-display);font-weight:600;font-size:16.5px;padding:22px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-size:24px;color:var(--blue-500);font-weight:400;transition:.25s} .faq details[open] summary::after{transform:rotate(45deg)} .faq .a{color:var(--slate);padding-bottom:22px;font-size:15.5px} /* ---------- Locations cloud ---------- */ .loc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px} .loc{background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 16px;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:8px} .loc .new{background:var(--blue-500);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;letter-spacing:.05em} /* ============ PERSONA TOGGLE (site-wide, in header) ============ */ .persona-toggle{display:flex;gap:4px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18); border-radius:999px;padding:4px;flex-shrink:0} .persona-toggle button{font-family:var(--font-display);font-weight:600;font-size:12.5px;border:0;cursor:pointer; padding:8px 14px;border-radius:999px;background:transparent;color:rgba(255,255,255,.65);transition:.22s;white-space:nowrap} .persona-toggle button:hover{color:#fff} .persona-toggle button.on{background:var(--blue-500);color:#fff;box-shadow:0 4px 14px rgba(69,147,242,.45)} /* Content tagged for one audience disappears when the other is chosen */ body.p-cand [data-aud="employer"]{display:none!important} body.p-emp [data-aud="candidate"]{display:none!important} body.p-cand .split,body.p-emp .split{grid-template-columns:1fr} /* Shown only for the hiring (employer) persona — e.g. nav Contact link, article CTA band */ .emp-only{display:none} body.p-emp .emp-only{display:block} /* Home quote-builder/CTA band: surface to NEUTRAL + employer; gate out only the candidate persona */ body.p-cand #homeExhibitCta{display:none} /* Upcoming-events heading: NEUTRAL + employer see the priced (£495) line; only the candidate persona sees the price-free default line */ .ue-head-emp{display:inline} .ue-head-default{display:none} body.p-cand .ue-head-emp{display:none} body.p-cand .ue-head-default{display:inline} /* Nav links — show only the relevant section link per persona */ body.p-emp .nav-links a[href="candidates.html"]{display:none!important} body.p-cand .nav-links a[href="exhibit.html"]{display:none!important} /* Nav fit: never wrap a label mid-word; NEUTRAL shows both persona links (7 items), so tighten spacing so the bar stays on one line */ .nav-links a{white-space:nowrap} body:not(.p-cand):not(.p-emp) .nav-links a{padding-left:10px;padding-right:10px} /* same gating for the mobile menu */ body.p-cand #mobileNav a[href="exhibit.html"]{display:none!important} body.p-emp #mobileNav a[href="candidates.html"]{display:none!important} /* Nav CTA — show only the relevant action per persona */ body.p-emp .site-header .nav-cta .btn-ghost{display:none!important} body.p-cand .site-header .nav-cta .btn-primary{display:none!important} /* Promote Get a Free Ticket to primary look when in candidate mode */ body.p-cand .site-header .nav-cta .btn-ghost{background:#fff;border:1.5px solid transparent;color:var(--blue-700);box-shadow:0 8px 24px rgba(8,26,51,.22)} body.p-cand .site-header.solid .nav-cta .btn-ghost{background:var(--blue-500);color:#fff;box-shadow:0 8px 24px rgba(69,147,242,.38)} @media (max-width:1100px){.persona-toggle button{padding:8px 10px;font-size:11.5px}} @media (max-width:980px){.persona-toggle{display:none}.mobile-nav .persona-toggle{display:flex;margin:14px 12px 4px;width:max-content}.persona-float{display:none!important}} /* ============ FLOATING PERSONA WIDGET ============ */ .persona-float{position:fixed;right:22px;bottom:22px;z-index:97;font-family:var(--font-body)} .persona-float.ukcf-await-consent{display:none!important} .persona-float .pf-card{position:relative;width:330px;max-width:calc(100vw - 44px); background:rgba(8,26,51,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border:1px solid rgba(122,178,247,.35);border-radius:22px;padding:22px;color:#fff; box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 40px rgba(69,147,242,.18); transform-origin:bottom right;transition:.35s cubic-bezier(.2,.9,.3,1.2)} .persona-float .pf-x{position:absolute;top:10px;right:14px;background:none;border:0;color:rgba(255,255,255,.45); font-size:20px;cursor:pointer;line-height:1} .persona-float .pf-x:hover{color:#fff} .persona-float .pf-q{display:block;font-family:var(--font-display);font-weight:700;font-size:16.5px;margin-bottom:16px} .persona-float .pf-opts{display:grid;gap:10px;margin-bottom:12px} .persona-float .pf-opt{display:block;text-align:left;cursor:pointer;border-radius:14px;padding:14px 16px; background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.16);color:#fff; font-family:var(--font-display);font-weight:600;font-size:15px;transition:.2s} .persona-float .pf-opt small{display:block;font-family:var(--font-body);font-weight:400;font-size:12.5px; color:rgba(255,255,255,.55);margin-top:2px} .persona-float .pf-opt:hover{border-color:rgba(122,178,247,.6);transform:translateY(-2px)} .persona-float .pf-opt.on{background:rgba(69,147,242,.16);border-color:var(--blue-500); box-shadow:0 0 0 1px var(--blue-500),0 0 24px rgba(69,147,242,.35)} .persona-float .pf-clear{background:none;border:0;color:rgba(255,255,255,.5);font-size:12.5px;cursor:pointer; text-decoration:underline;text-underline-offset:3px} .persona-float .pf-clear:hover{color:#fff} .persona-float .pf-chip{display:none;align-items:center;gap:8px;cursor:pointer; background:rgba(8,26,51,.9);backdrop-filter:blur(14px);border:1px solid rgba(122,178,247,.4); color:#fff;font-family:var(--font-display);font-weight:600;font-size:13.5px; padding:11px 18px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 22px rgba(69,147,242,.25); transition:.25s} .persona-float .pf-chip:hover{transform:translateY(-2px);border-color:var(--blue-500)} .persona-float .pf-dot{width:7px;height:7px;border-radius:50%;background:#43E97B;box-shadow:0 0 8px #43E97B;display:inline-block} .persona-float.min .pf-card{transform:scale(.5);opacity:0;pointer-events:none;position:absolute;right:0;bottom:0} .persona-float.min .pf-chip{display:inline-flex} @media(max-width:900px){ .persona-float{right:12px;bottom:84px} /* clears the sticky mobile CTA bar */ } /* ---------- Mobile nav ---------- */ .mobile-nav{display:none;position:fixed;inset:0 0 auto 0;z-index:99;padding:80px 24px 24px; background:rgba(8,26,51,.97);backdrop-filter:blur(20px);flex-direction:column;gap:4px} .mobile-nav.open{display:flex} .mobile-nav a{color:rgba(255,255,255,.82);font-size:16px;font-weight:600;padding:12px 18px;border-radius:var(--r-md);transition:.2s} .mobile-nav a:hover{color:#fff;background:rgba(255,255,255,.08)} /* Mobile-nav action CTAs (header CTAs are hidden on mobile) */ .nav-cta-mob{display:flex;flex-direction:column;gap:10px;margin-bottom:14px} .mobile-nav .nav-cta-mob .btn{width:100%;justify-content:center;padding:14px 22px;font-size:15px} .mobile-nav .nav-cta-mob .btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.4)} .mobile-nav .nav-cta-mob .btn-ghost:hover{background:rgba(255,255,255,.18)} /* Persona ordering: lead with the relevant action (both stay visible) */ body.p-cand .nav-cta-mob .mob-cta-cand{order:0} body.p-cand .nav-cta-mob .mob-cta-emp{order:1} body.p-emp .nav-cta-mob .mob-cta-emp{order:0} body.p-emp .nav-cta-mob .mob-cta-cand{order:1} /* ---------- Page hero (inner pages) ---------- */ .page-hero{padding:180px 0 100px} .page-hero.tight-hero{padding-bottom:56px} /* Employer hero: text left, image right, stat-strip below */ .employer-hero-top{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;margin-bottom:48px} .employer-hero-copy{max-width:760px} .employer-hero-copy .lede{margin-bottom:32px} .employer-hero-media{position:relative} .employer-hero-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg); box-shadow:0 30px 60px rgba(8,26,51,.35)} @media (max-width:900px){ .employer-hero-top{grid-template-columns:1fr;gap:36px} } /* ---------- Awards ---------- */ .awards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .award{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;text-align:center;transition:.3s} .award:hover{box-shadow:var(--shadow-md)} .award .stars{color:var(--gold);font-size:22px;letter-spacing:4px;display:block;margin-bottom:14px} .award h3{font-family:var(--font-display);font-size:17px;font-weight:700;margin-bottom:8px} .award span{font-size:13px;color:var(--slate)} /* ---------- Footer ---------- */ .site-footer{background:var(--navy-900);color:rgba(255,255,255,.7);padding:80px 0 40px} .site-footer .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:60px} .site-footer .brand img{height:38px;margin-bottom:20px} .site-footer .brand p{font-size:14px;line-height:1.7} .site-footer .brand a{color:rgba(255,255,255,.7);text-decoration:underline;text-underline-offset:3px} .site-footer h5{font-family:var(--font-display);font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#fff;margin-bottom:18px} .site-footer ul{list-style:none;display:grid;gap:10px} .site-footer ul a{font-size:14.5px;transition:.2s} .site-footer ul a:hover{color:#fff} .site-footer .legal{border-top:1px solid rgba(255,255,255,.12);padding-top:28px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;font-size:13px} .site-footer .legal a{opacity:.65;transition:.2s;margin-left:18px} .site-footer .legal a:hover{opacity:1} /* ---------- Reveal animations ---------- */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease} .reveal.in{opacity:1;transform:none} /* ---------- Responsive ---------- */ @media (max-width:1100px){ .grid.cols-3{grid-template-columns:repeat(2,1fr)} .grid.cols-4{grid-template-columns:repeat(2,1fr)} .site-footer .top{grid-template-columns:1fr 1fr;gap:36px} } @media (max-width:860px){ .grid.cols-3,.grid.cols-2{grid-template-columns:1fr} .split{grid-template-columns:1fr} .awards{grid-template-columns:1fr} .event-row{grid-template-columns:1fr 1fr;gap:10px} .event-row .venue,.event-row .go{display:none} .nav-links{display:none} .menu-toggle{display:block} .nav-cta .btn:not(.menu-toggle){display:none} .nav-cta .menu-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center} .stat-strip{grid-template-columns:repeat(2,1fr)} .site-footer .top{grid-template-columns:1fr} } @media (max-width:600px){ .page-hero{padding:140px 0 80px} .hero-actions{flex-direction:column;align-items:flex-start} .cta-band{padding:48px 28px} .stat-strip{grid-template-columns:1fr 1fr} } /* ============================================================ V11 — WORKSHEET BUILD COMPONENTS ============================================================ */ /* ---------- Light persona widget (replaces dark glass console) ---------- */ .persona-float .pf-card{background:#fff;border:1px solid var(--line);color:var(--ink); box-shadow:0 24px 70px rgba(8,26,51,.22);backdrop-filter:none;-webkit-backdrop-filter:none} .persona-float .pf-q{color:var(--ink)} .persona-float .pf-x{color:var(--slate)} .persona-float .pf-x:hover{color:var(--ink)} .persona-float .pf-opt{background:var(--bg);border:1.5px solid var(--line);color:var(--ink)} .persona-float .pf-opt small{color:var(--slate)} .persona-float .pf-opt:hover{border-color:var(--blue-400);transform:translateY(-2px)} .persona-float .pf-opt.on{background:var(--blue-50);border-color:var(--blue-500);box-shadow:none} .persona-float .pf-clear{color:var(--slate)} .persona-float .pf-clear:hover{color:var(--ink)} .persona-float .pf-chip{background:#fff;border:1px solid var(--line);color:var(--ink); box-shadow:0 10px 30px rgba(8,26,51,.18)} .persona-float .pf-chip:hover{border-color:var(--blue-500)} .persona-float .pf-dot{background:var(--blue-500);box-shadow:none} /* ---------- First-visit welcome splash ---------- */ .pf-splash{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px; background:rgba(8,26,51,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);overflow:hidden; opacity:1;transition:opacity .45s ease,visibility .45s} .pf-splash.hide{opacity:0;visibility:hidden;pointer-events:none} .pf-splash-photos{position:absolute;inset:-6%;pointer-events:none} .pf-splash-photos img{position:absolute;width:230px;aspect-ratio:4/3;object-fit:cover;border-radius:14px; border:1px solid rgba(255,255,255,.3);box-shadow:0 22px 50px rgba(8,26,51,.35);opacity:.5; animation:splashDrift 9s ease-in-out infinite} @keyframes splashDrift{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-16px) rotate(var(--r,0deg))}} .pf-splash-card{position:relative;z-index:2;width:min(480px,calc(100vw - 40px));background:#fff;border-radius:26px; padding:34px 32px 28px;box-shadow:0 40px 110px rgba(8,26,51,.4);text-align:center} .pf-splash-card img.lg{height:34px;margin:0 auto 18px;filter:invert(1) brightness(0)} .pf-splash-card h2{font-size:24px;margin-bottom:8px} .pf-splash-card>p{color:var(--slate);font-size:14.5px;margin-bottom:22px} .pf-splash-opts{display:grid;gap:10px;margin-bottom:14px} .pf-splash-opt{display:block;text-align:left;cursor:pointer;border-radius:14px;padding:15px 18px; background:var(--bg);border:1.5px solid var(--line);color:var(--ink); font-family:var(--font-display);font-weight:600;font-size:15.5px;transition:.2s} .pf-splash-opt small{display:block;font-family:var(--font-body);font-weight:400;font-size:12.5px;color:var(--slate);margin-top:2px} .pf-splash-opt:hover{border-color:var(--blue-500);background:var(--blue-50);transform:translateY(-2px)} .pf-splash-skip{background:none;border:0;color:var(--slate);font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px} .pf-splash-skip:hover{color:var(--ink)} .pf-splash-progress{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);text-align:left} .pf-splash-progress .lbl{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--slate);margin-bottom:8px} .pf-splash-progress .lbl b{color:var(--blue-700);font-family:var(--font-display)} .season-bar{height:8px;border-radius:99px;background:var(--blue-100);overflow:hidden} .season-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--blue-600),var(--blue-400));transition:width 1.2s cubic-bezier(.2,.8,.2,1)} @media (prefers-reduced-motion:reduce){.pf-splash-photos img{animation:none}} /* ---------- Season progress strip (homepage hero) ---------- */ .season-progress{margin-top:26px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18); border-radius:var(--r-md);padding:16px 22px} .season-progress .lbl{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.85);font-weight:600;margin-bottom:10px} .season-progress .lbl b{font-family:var(--font-display);color:#fff} .season-progress .season-bar{background:rgba(255,255,255,.18)} .season-progress .season-bar i{background:linear-gradient(90deg,#fff,rgba(255,255,255,.75))} /* ---------- Countdown pill ---------- */ .countdown-pill{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px; background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:var(--r-pill); padding:10px 18px;font-size:13.5px;color:rgba(255,255,255,.85)} .countdown-pill b{font-family:var(--font-display);color:#fff;font-weight:700} .countdown-pill .tick{font-variant-numeric:tabular-nums;font-family:var(--font-display);font-weight:700;color:#fff; background:rgba(255,255,255,.14);padding:3px 10px;border-radius:8px} .countdown-inline{display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums} /* ---------- "Near you" banner (injected under header) ---------- */ .nearyou{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;justify-content:center;padding:0 16px 16px;pointer-events:none} /* Only one bottom-anchored prompt at a time: a page sticky CTA or the splash hides the near-you banner */ body.ukcf-has-pagecta .nearyou{display:none!important} body.pf-splash-open .nearyou,body.pf-splash-open .persona-float{display:none!important} /* The near-you geolocation prompt is a candidate-only feature — never shown to the hiring persona or undecided visitors */ body:not(.p-cand) .nearyou{display:none!important} .nearyou.show{display:flex} .nearyou .inner{pointer-events:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:680px; background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 12px 10px 20px; box-shadow:0 18px 50px rgba(8,26,51,.22);font-size:14px} .nearyou .inner b{font-family:var(--font-display)} .nearyou .btn{padding:9px 18px;font-size:13px} .nearyou .x{background:none;border:0;font-size:18px;color:var(--slate);cursor:pointer;padding:4px 8px} @media (max-width:900px){.nearyou{bottom:64px}} @media (max-width:700px){.nearyou{display:none!important}} /* never on mobile */ /* ---------- Site search overlay ---------- */ .search-overlay{position:fixed;inset:0;z-index:210;display:none;align-items:flex-start;justify-content:center; padding:12vh 20px 40px;background:rgba(8,26,51,.55);backdrop-filter:blur(6px)} .search-overlay.open{display:flex} .search-box{width:min(640px,100%);background:#fff;border-radius:var(--r-lg);box-shadow:0 40px 110px rgba(8,26,51,.4);overflow:hidden} .search-box input{width:100%;border:0;outline:0;font:600 17px var(--font-display);padding:20px 24px;border-bottom:1px solid var(--line)} .search-results{max-height:48vh;overflow-y:auto;padding:8px} .search-results a{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;font-size:14.5px;transition:.15s} .search-results a:hover{background:var(--blue-50)} .search-results .k{flex-shrink:0;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--blue-700);background:var(--blue-100);padding:4px 9px;border-radius:99px} .search-results .t{font-weight:600;color:var(--ink)} .search-results .s{color:var(--slate);font-size:12.5px;margin-top:1px} .search-results .none{padding:22px;text-align:center;color:var(--slate);font-size:14px} /* ---------- Bookings ticker band ---------- */ .bookings-band{background:var(--navy-900);overflow:hidden;display:flex;align-items:center;height:44px} .bookings-band .tag{flex-shrink:0;display:flex;align-items:center;gap:8px;height:100%;padding:0 18px; font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--blue-400);border-right:1px solid rgba(255,255,255,.12);white-space:nowrap} .bookings-band .tag i{width:7px;height:7px;border-radius:50%;background:var(--blue-400);animation:pulse 2s infinite} .bookings-track{flex:1;overflow:hidden;display:flex} .bookings-track span{display:inline-flex;white-space:nowrap;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.75); letter-spacing:.03em;animation:scroll 46s linear infinite;padding-left:24px;gap:0} .bookings-track em{font-style:normal;padding:0 22px;display:inline-flex;align-items:center;gap:8px} .bookings-track em::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue-500)} /* ---------- How it works steps ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .step{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px;position:relative} .step .n{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px; background:var(--blue-500);color:#fff;font-family:var(--font-display);font-weight:800;font-size:16px;margin-bottom:16px} .step h3{font-size:17.5px;margin-bottom:8px} .step p{color:var(--slate);font-size:14.5px} @media (max-width:860px){.steps{grid-template-columns:1fr}} /* Homepage "How it works" — photo step cards (image left, text right) */ .steps-photo .step{display:flex;align-items:center;gap:20px;padding:18px} .steps-photo .step-img{width:148px;height:104px;flex-shrink:0;object-fit:cover;object-position:center 30%;border-radius:12px;display:block} .steps-photo .step-body{flex:1;min-width:0} .steps-photo .step .n{margin-bottom:10px} @media (max-width:560px){ .steps-photo .step{flex-direction:column;align-items:flex-start;gap:14px} .steps-photo .step-img{width:100%;height:auto;aspect-ratio:16/10} } /* ---------- Event page: badges, meta, agenda, weather ---------- */ .ev-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px} .ev-badge{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; padding:6px 13px;border-radius:99px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.45);color:#fff;text-shadow:0 1px 2px rgba(8,26,51,.3)} .ev-badge.gold{background:rgba(245,184,46,.2);border-color:rgba(245,184,46,.55);color:#FFE2A0} .breadcrumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,.9);margin-bottom:18px;flex-wrap:wrap;text-shadow:0 1px 2px rgba(8,26,51,.25)} .breadcrumb a:hover{color:#fff;text-decoration:underline} .breadcrumb .sep{opacity:.5} .section .breadcrumb{color:var(--slate)} .section .breadcrumb a:hover{color:var(--blue-600)} .agenda{display:grid;gap:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .agenda .row{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:18px 24px;border-bottom:1px solid var(--line);align-items:center} .agenda .row:last-child{border-bottom:0} .agenda .time{font-family:var(--font-display);font-weight:700;color:var(--blue-700);font-size:14.5px;white-space:nowrap} .agenda .what b{display:block;font-family:var(--font-display);font-size:15.5px} .agenda .what span{font-size:13.5px;color:var(--slate)} .agenda .row.now{background:var(--blue-50)} @media (max-width:600px){.agenda .row{grid-template-columns:1fr;gap:4px}} .weather-card{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22); border-radius:var(--r-md);padding:12px 18px;color:#fff;font-size:13.5px} .weather-card .ico{font-size:26px;line-height:1} .weather-card b{font-family:var(--font-display);font-size:17px;display:block} .weather-card span{color:rgba(255,255,255,.75)} .weather-card.light{background:var(--white);border-color:var(--line);color:var(--ink)} .weather-card.light span{color:var(--slate)} /* ---------- Utility actions: calendar + share ---------- */ .action-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .mini-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:13px; padding:9px 16px;border-radius:var(--r-pill);border:1.5px solid var(--line);background:var(--white);color:var(--ink); cursor:pointer;transition:.2s;text-decoration:none} .mini-btn:hover{border-color:var(--blue-500);color:var(--blue-700);transform:translateY(-1px)} .on-blue .mini-btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff} .on-blue .mini-btn:hover{background:rgba(255,255,255,.2);color:#fff} /* ---------- Stand pricing ---------- */ .stand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch} .stand-card{position:relative;background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-lg); padding:30px 26px;display:flex;flex-direction:column;transition:.25s} .stand-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)} .stand-card.popular{border-color:var(--blue-500);box-shadow:0 14px 44px rgba(69,147,242,.18)} .stand-card .flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--blue-500);color:#fff; font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; padding:6px 16px;border-radius:99px;white-space:nowrap} .stand-card h3{font-size:19px;margin-bottom:6px} .stand-avail{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#1f9d57;background:#e9f9f0;border:1px solid #bfe9d2;border-radius:var(--r-pill);padding:3px 11px;margin-bottom:10px} .stand-avail.out{color:#c0392b;background:#fdecea;border-color:#f5c6c0} .stand-card .price{font-family:var(--font-display);font-size:34px;font-weight:800;color:var(--blue-700)} .stand-card .price small{font-size:14px;color:var(--slate);font-weight:600} .stand-card .desc{color:var(--slate);font-size:14.5px;margin:12px 0 18px} .stand-card ul{list-style:none;display:grid;gap:9px;margin-bottom:22px} .stand-card ul li{display:flex;gap:9px;font-size:14px} .stand-card ul li::before{content:"✓";color:var(--blue-500);font-weight:700;flex-shrink:0} .stand-card .scarce{font-size:12.5px;font-weight:700;color:#B7791F;background:#FEF6E7;border:1px solid #F5D9A8; border-radius:10px;padding:8px 12px;margin-bottom:16px;text-align:center} .stand-card .btn{margin-top:auto;justify-content:center} @media (max-width:980px){.stand-grid{grid-template-columns:1fr}} .sponsor-band{background:linear-gradient(135deg,var(--navy-900),var(--navy-700));border-radius:var(--r-lg);color:#fff; padding:44px 42px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center} .sponsor-band .k{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:11.5px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:14px} .sponsor-band h3{font-size:26px;margin-bottom:8px} .sponsor-band .price{font-family:var(--font-display);font-size:30px;font-weight:800;margin-bottom:14px} .sponsor-band .price small{font-size:14px;color:rgba(255,255,255,.6);font-weight:600} .sponsor-band p{color:rgba(255,255,255,.75);font-size:14.5px;margin-bottom:20px} .sponsor-band ul{list-style:none;display:grid;gap:10px;grid-template-columns:1fr 1fr} .sponsor-band ul li{display:flex;gap:9px;font-size:13.5px;color:rgba(255,255,255,.88)} .sponsor-band ul li::before{content:"✓";color:var(--gold);font-weight:700;flex-shrink:0} @media (max-width:900px){.sponsor-band{grid-template-columns:1fr;padding:34px 26px}.sponsor-band ul{grid-template-columns:1fr}} /* ---------- Included-with-booking grid ---------- */ .includes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .include{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 18px} .include .ico{font-size:22px;margin-bottom:10px;display:block} .include b{font-family:var(--font-display);font-size:14.5px;display:block;margin-bottom:4px} .include span{font-size:13px;color:var(--slate)} @media (max-width:1000px){.includes-grid{grid-template-columns:1fr 1fr}} @media (max-width:560px){.includes-grid{grid-template-columns:1fr}} /* ---------- Past exhibitors wall ---------- */ .exh-wall{display:flex;flex-wrap:wrap;gap:10px} .exh-wall .logo-chip{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line); border-radius:12px;padding:10px 16px;font-family:var(--font-display);font-weight:600;font-size:13.5px} .exh-wall .logo-chip img{height:22px;width:auto;object-fit:contain} /* ---------- FAQ audience tabs ---------- */ .faq-tabs{display:inline-flex;gap:4px;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:28px} .faq-tabs button{font-family:var(--font-display);font-weight:600;font-size:13.5px;border:0;cursor:pointer; padding:9px 20px;border-radius:999px;background:transparent;color:var(--slate);transition:.2s} .faq-tabs button.on{background:var(--blue-500);color:#fff} /* ---------- Quote builder ---------- */ .quote-builder{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; display:grid;grid-template-columns:1.2fr .8fr} .quote-builder .pick{padding:28px;border-right:1px solid var(--line)} .quote-builder .pick h3{font-size:17px;margin-bottom:14px} .qb-search{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:11px 16px;font:500 14px var(--font-body);margin-bottom:12px;outline:0} .qb-search:focus{border-color:var(--blue-500)} .qb-list{max-height:300px;overflow-y:auto;display:grid;gap:6px;scrollbar-width:thin} .qb-list label{display:flex;align-items:center;gap:11px;padding:15px 12px;border:1px solid var(--line);border-radius:11px; font-size:13.5px;cursor:pointer;transition:.15s} .qb-list label:hover{border-color:var(--blue-400)} .qb-list label.on{background:var(--blue-50);border-color:var(--blue-500)} .qb-list input{accent-color:var(--blue-500);width:16px;height:16px} .qb-list .qb-ico{width:34px;height:34px;border-radius:9px;object-fit:cover;flex-shrink:0;background:var(--blue-100)} .qb-list .qb-meta{display:flex;flex-direction:column;line-height:1.2;min-width:0} .qb-list .qb-meta b{font-weight:600;font-size:14px} .qb-list .qb-meta i{font-style:normal;font-size:11.5px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px} .qb-list .d{margin-left:auto;color:var(--slate);font-size:12px;white-space:nowrap;flex-shrink:0} .quote-builder .sum{padding:28px;background:var(--bg)} .qb-sizes{display:grid;gap:8px;margin:14px 0 20px} .qb-sizes label{display:flex;align-items:center;gap:10px;padding:15px 14px;border:1.5px solid var(--line);border-radius:11px; background:#fff;font-size:14px;font-weight:600;cursor:pointer} .qb-sizes label.on{border-color:var(--blue-500);background:var(--blue-50)} .qb-sizes .p{margin-left:auto;font-family:var(--font-display);color:var(--blue-700)} .qb-total{border-top:1px solid var(--line);padding-top:16px;margin-bottom:18px} .qb-total .line{display:flex;justify-content:space-between;font-size:13.5px;color:var(--slate);margin-bottom:6px} .qb-total .grand{display:flex;justify-content:space-between;font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--ink)} .qb-total .grand small{font-size:13px;color:var(--slate);font-weight:600} @media (max-width:900px){.quote-builder{grid-template-columns:1fr}.quote-builder .pick{border-right:0;border-bottom:1px solid var(--line)}} /* booking quote feedback + add-to-basket toast (shared) */ .qb-msg{font-size:13px;margin-top:10px;min-height:16px;color:var(--slate)} .qb-msg.err{color:#c0392b} .bk-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(10px);z-index:200;background:#16c172;color:#fff;font-family:var(--font-display);font-weight:600;font-size:14px;padding:13px 22px;border-radius:var(--r-pill);box-shadow:0 12px 34px rgba(8,26,51,.3);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none} .bk-toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* ---------- News ---------- */ .post-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:.3s} .post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)} .post-card .thumb{aspect-ratio:16/9;overflow:hidden;background:var(--blue-100)} .post-card .thumb img{width:100%;height:100%;object-fit:cover} .post-card .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1} .post-card .cat{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-700)} .post-card h3{font-size:17.5px;line-height:1.3} .post-card .meta{margin-top:auto;padding-top:10px;font-size:12.5px;color:var(--slate)} .post-featured{display:grid;grid-template-columns:1.2fr 1fr;gap:0;background:var(--white);border:1px solid var(--line); border-radius:var(--r-lg);overflow:hidden;margin-bottom:40px} .post-featured .thumb{min-height:280px;background:var(--blue-100) center/cover no-repeat} .post-featured .body{padding:36px;display:flex;flex-direction:column;gap:12px;justify-content:center} .post-featured h3{font-size:26px} @media (max-width:860px){.post-featured{grid-template-columns:1fr}} .article-body{max-width:760px;margin:0 auto;font-size:17px;line-height:1.8} .article-body p{margin-bottom:20px;color:#2A3447} .article-body h2{font-size:24px;margin:34px 0 14px} .article-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--slate);font-size:13.5px} .author-card{display:flex;gap:16px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;max-width:760px;margin:40px auto 0} .author-card .av{width:52px;height:52px;border-radius:50%;background:var(--blue-500);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:19px;flex-shrink:0} .author-card b{font-family:var(--font-display);display:block} .author-card span{font-size:13px;color:var(--slate)} /* ---------- Gallery ---------- */ .gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .gallery-grid figure{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;cursor:pointer} .gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .gallery-grid figure:hover img{transform:scale(1.06)} .gallery-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 16px 12px;font-size:12.5px;font-weight:600;color:#fff; background:linear-gradient(transparent,rgba(8,26,51,.75))} @media (max-width:900px){.gallery-grid{grid-template-columns:1fr 1fr}} @media (max-width:560px){.gallery-grid{grid-template-columns:1fr}} /* ---------- Contact ---------- */ .contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} @media (max-width:980px){.contact-grid{grid-template-columns:1fr}} .field{display:grid;gap:6px;margin-bottom:14px} .field label{font-size:13px;font-weight:600} .field input,.field textarea,.field select{border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;font:500 14px var(--font-body);outline:0;background:#fff;width:100%} .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue-500)} .modal{position:fixed;inset:0;z-index:220;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(8,26,51,.55);backdrop-filter:blur(6px)} .modal.open{display:flex} .modal-card{width:min(620px,100%);max-height:84vh;max-height:84dvh;overflow-y:auto;background:#fff;border-radius:var(--r-lg);padding:32px;box-shadow:0 40px 110px rgba(8,26,51,.4);position:relative} .modal-card .x{position:absolute;top:8px;right:10px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;font-size:24px;color:var(--slate);cursor:pointer} .modal-card h3{font-size:20px;margin-bottom:14px;padding-right:30px} .modal-card .note{background:var(--blue-50);border:1px solid var(--blue-200);border-radius:12px;padding:14px 16px;font-size:13.5px;margin-bottom:16px} .modal-card p{font-size:14.5px;color:#2A3447;margin-bottom:12px} .modal-card h4{font-family:var(--font-display);font-size:15px;margin:18px 0 6px} /* Clickable route-picker cards (buttons styled as stand-cards) */ .route-card{font-family:inherit;text-align:left;width:100%;cursor:pointer;padding:28px 26px} .route-card h3{font-size:19px} .route-card .desc{margin:10px 0 16px} .route-cta{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--blue-600);transition:.2s} .route-card:hover .route-cta{color:var(--blue-700)} /* Contact map + address */ .contact-map{display:grid;grid-template-columns:1.6fr 1fr;gap:0;margin-top:46px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)} .contact-map-frame{position:relative;min-height:300px} .contact-map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.15)} .contact-address{font-style:normal;font-size:14.5px;line-height:1.7;color:#2A3447;padding:32px 30px;display:flex;flex-direction:column;justify-content:center;background:var(--blue-50)} .contact-address strong{font-family:var(--font-display);font-size:16px;color:var(--ink,#0B1B33);display:block;margin-bottom:8px} .contact-address .map-link{margin-top:16px;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--blue-600)} .contact-address .map-link:hover{color:var(--blue-700)} @media (max-width:760px){.contact-map{grid-template-columns:1fr}.contact-map-frame{min-height:240px}} /* Privacy-policy consent checkbox */ .check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#2A3447;line-height:1.5;margin:4px 0 18px;cursor:pointer} .check input[type="checkbox"]{flex-shrink:0;width:18px;height:18px;margin-top:1px;accent-color:var(--blue-500);cursor:pointer} .check a{color:var(--blue-600);font-weight:600} /* ---------- Downloads ---------- */ .dl-card{display:flex;gap:16px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;transition:.2s} .dl-card:hover{border-color:var(--blue-400);box-shadow:var(--shadow-sm)} .dl-card .ico{width:46px;height:46px;border-radius:12px;background:var(--blue-100);color:var(--blue-700);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0} .dl-card b{font-family:var(--font-display);display:block;font-size:15px} .dl-card span{font-size:13px;color:var(--slate)} .dl-card .get{margin-left:auto;font-weight:700;color:var(--blue-600);white-space:nowrap;font-size:13.5px} /* ---------- Past-events showcase strip ---------- */ .legacy-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .legacy-strip figure{border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;position:relative} .legacy-strip img{width:100%;height:100%;object-fit:cover} @media (max-width:860px){.legacy-strip{grid-template-columns:1fr 1fr}} /* ---------- Sticky mobile CTA bar (event pages) ---------- */ .sticky-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:94;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line)} .sticky-cta .btn{flex:1;justify-content:center;padding:13px 10px;font-size:14px} @media (max-width:900px){.sticky-cta{display:flex}} body.p-cand .sticky-cta [data-aud="employer"],body.p-emp .sticky-cta [data-aud="candidate"]{display:none} /* ---------- 404 ---------- */ .notfound{min-height:60vh;display:flex;align-items:center} .notfound .code{font-family:var(--font-display);font-size:clamp(70px,12vw,130px);font-weight:800;color:var(--blue-200);line-height:1} /* ---------- Newsletter (footer) ---------- */ .newsletter{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap} .newsletter input{flex:1;min-width:200px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08); border-radius:999px;padding:12px 18px;color:#fff;font:500 14px var(--font-body);outline:0} .newsletter input::placeholder{color:rgba(255,255,255,.45)} .newsletter input:focus{border-color:var(--blue-400)} .newsletter .btn{padding:12px 22px;font-size:13.5px} /* ---------- Accessibility: visible focus + skip link ---------- */ a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--blue-400);outline-offset:2px;border-radius:6px} .skip-link{position:fixed;top:-60px;left:16px;z-index:300;background:var(--blue-700);color:#fff;padding:12px 20px;border-radius:0 0 12px 12px;font-weight:700;transition:top .2s} .skip-link:focus{top:0} /* Buttons sitting on blue heroes invert for contrast */ .hero .btn-primary{background:#fff;color:var(--blue-700);box-shadow:0 10px 30px rgba(8,26,51,.22)} .hero .btn-primary:hover{background:var(--blue-50);color:var(--blue-700)} /* ============================================================ BOOKING CART — slide-out drawer (global, injected by site.js) The drawer + footer set no `display`, so the browser's built-in hidden-attribute semantics hide them reliably (no !important needed). ============================================================ */ #cartLink{position:relative;border-radius:var(--r-pill);transition:transform .2s ease,background .2s ease} #cartLink:hover{background:var(--blue-50)} @keyframes ukcf-bag-bump{0%{transform:scale(1)}30%{transform:scale(1.28)}60%{transform:scale(.94)}100%{transform:scale(1)}} #cartLink.ukcf-bag-bump{animation:ukcf-bag-bump .45s ease} .ukcf-cart{position:fixed;inset:0;z-index:1200} .ukcf-cart__scrim{position:absolute;inset:0;background:rgba(8,26,51,.45);opacity:0; transition:opacity .35s ease;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} .ukcf-cart.is-open .ukcf-cart__scrim{opacity:1} .ukcf-cart__panel{position:absolute;top:0;right:0;height:100%;width:min(440px,100%); display:flex;flex-direction:column;background:var(--bg);box-shadow:-24px 0 60px rgba(8,26,51,.28); transform:translateX(100%);transition:transform .42s cubic-bezier(.22,1,.36,1)} .ukcf-cart.is-open .ukcf-cart__panel{transform:translateX(0)} .ukcf-cart__head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:16px; padding:22px 24px 18px;background:linear-gradient(135deg,var(--navy-800),var(--blue-700));color:#fff} .ukcf-cart__head h2{font-size:19px;color:#fff;letter-spacing:-.01em} .ukcf-cart__head p{font-size:12.5px;color:var(--blue-200);margin-top:3px} .ukcf-cart__close{flex:none;width:44px;height:44px;border-radius:var(--r-pill);border:0;cursor:pointer; background:rgba(255,255,255,.14);color:#fff;font-size:22px;line-height:1; display:flex;align-items:center;justify-content:center;transition:.25s ease} .ukcf-cart__close:hover{background:rgba(255,255,255,.28);transform:rotate(90deg)} .ukcf-cart__body{flex:1 1 auto;overflow-y:auto;padding:16px 18px} .ukcf-citem{display:grid;grid-template-columns:60px 1fr auto;gap:13px;align-items:start; background:var(--white);border:1px solid var(--line);border-radius:var(--r-md); padding:12px;margin-bottom:12px;box-shadow:var(--shadow-sm);animation:ukcf-citem-in .3s ease both} @keyframes ukcf-citem-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .ukcf-citem__img{width:60px;height:60px;border-radius:10px;object-fit:cover;background:var(--blue-50)} .ukcf-citem__name{font-family:var(--font-display);font-weight:700;font-size:14.5px;line-height:1.2} .ukcf-citem__meta{font-size:12px;color:var(--slate);margin-top:2px} .ukcf-citem__tier{display:inline-block;margin-top:6px;font-size:11px;font-weight:600;color:var(--blue-700); background:var(--blue-50);border:1px solid var(--blue-100);border-radius:var(--r-pill);padding:2px 10px} .ukcf-citem__venue{display:inline-block;margin-top:6px;font-size:11px;color:var(--slate);background:var(--bg); border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 9px} .ukcf-citem__tiersel{margin-top:6px;font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--blue-700); background:var(--blue-50);border:1px solid var(--blue-100);border-radius:var(--r-sm);padding:4px 8px;cursor:pointer;max-width:100%} /* Quick-add another event */ .ukcf-cart__add{flex:none;border-top:1px solid var(--line);background:var(--white)} .ukcf-add-toggle{width:100%;text-align:left;border:0;background:none;font-family:var(--font-display);font-weight:700; font-size:13.5px;color:var(--blue-700);padding:14px 24px;cursor:pointer} .ukcf-add-toggle:hover{background:var(--blue-50)} .ukcf-add-panel{padding:0 18px 14px} .ukcf-add-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .ukcf-add-head span{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--slate)} .ukcf-add-min{border:0;background:var(--bg);color:var(--slate);width:26px;height:26px;border-radius:50%;font-size:16px;line-height:1;cursor:pointer;transition:.2s ease} .ukcf-add-min:hover{background:var(--line);color:var(--ink);transform:rotate(90deg)} .ukcf-add-panel input{width:100%;font-size:13.5px;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r-sm);margin-bottom:8px} .ukcf-add-panel input:focus{outline:0;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(69,147,242,.13)} /* Stop iOS Safari auto-zoom: form controls must render >=16px on small screens */ @media (max-width:600px){.tkt-fields input,.tkt-fields select,.field input,.field textarea,.field select,.newsletter input,.ukcf-add-panel input{font-size:16px}} .ukcf-add-results{display:flex;flex-direction:column;gap:6px;max-height:200px;overflow-y:auto} .ukcf-add-result{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left; border:1px solid var(--line);background:var(--white);border-radius:var(--r-sm);padding:9px 12px;cursor:pointer;transition:.15s ease} .ukcf-add-result:hover{border-color:var(--blue-400);background:var(--blue-50)} .ukcf-add-result b{font-family:var(--font-display);font-size:13px;display:block;color:var(--ink)} .ukcf-add-result i{font-size:11.5px;color:var(--slate);font-style:normal} .ukcf-add-result em{font-style:normal;font-size:12px;font-weight:700;white-space:nowrap} .ukcf-add-result em.add{color:var(--blue-600)} .ukcf-add-result em.in{color:#16a35c} .ukcf-add-none{font-size:12.5px;color:var(--slate);padding:6px 2px} .ukcf-qty{display:inline-flex;align-items:center;margin-top:10px;border:1px solid var(--line); border-radius:var(--r-pill);overflow:hidden;background:var(--white)} .ukcf-qty button{width:44px;height:44px;border:0;background:var(--white);color:var(--blue-700); font-size:18px;line-height:1;cursor:pointer;transition:.15s ease} .ukcf-qty button:hover{background:var(--blue-50)} .ukcf-qty button:focus-visible{outline:3px solid var(--blue-400);outline-offset:-2px} .ukcf-qty span{min-width:26px;text-align:center;font-weight:700;font-size:13px} .ukcf-citem__right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px} .ukcf-citem__price{font-family:var(--font-display);font-weight:700;font-size:14.5px} .ukcf-citem__remove{border:0;background:none;color:var(--slate);font-size:12px;cursor:pointer; text-decoration:underline;text-underline-offset:2px;padding:0} .ukcf-citem__remove:hover{color:#d23b3b} .ukcf-cart__empty{text-align:center;padding:54px 24px;color:var(--slate)} .ukcf-cart__empty .ico{font-size:42px;display:block;margin-bottom:12px;opacity:.55} .ukcf-cart__empty h3{font-size:17px;color:var(--ink);margin-bottom:6px} .ukcf-cart__empty p{font-size:13.5px;margin-bottom:20px;line-height:1.5} .ukcf-cart__foot{flex:none;padding:18px 24px 22px;border-top:1px solid var(--line);background:var(--white); box-shadow:0 -8px 24px rgba(8,26,51,.06)} .ukcf-cart__rows{font-size:13.5px;color:var(--slate);margin-bottom:14px} .ukcf-cart__row{display:flex;justify-content:space-between;padding:3px 0} .ukcf-cart__row.total{margin-top:6px;padding-top:10px;border-top:1px solid var(--line); font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--ink)} .ukcf-cart__foot .btn{width:100%;justify-content:center} .ukcf-cart__continue{display:block;width:100%;text-align:center;margin-top:10px;font-size:13px; color:var(--slate);background:none;border:0;cursor:pointer;padding:6px} .ukcf-cart__continue:hover{color:var(--blue-700)} .ukcf-cart__vatnote{font-size:11px;color:var(--slate);text-align:center;margin-top:10px} body.ukcf-cart-open{overflow:hidden} @media (prefers-reduced-motion:reduce){ .ukcf-cart__scrim,.ukcf-cart__panel{transition:none} .ukcf-citem{animation:none} .ukcf-cart__close:hover{transform:none} #cartLink.ukcf-bag-bump{animation:none} } /* ============================================================ MOBILE UX HARDENING (2026-07 batch) Tap targets, scroll-lock, iOS zoom/dvh, contrast, low-end perf. ============================================================ */ /* (13) Kill the grey tap-flash on interactive elements */ a,button,input,select,textarea,summary,label,[role="button"]{-webkit-tap-highlight-color:transparent} /* (1) Lock body scroll while the mobile nav is open (mirrors .ukcf-cart-open) */ body.mobile-nav-open{overflow:hidden} /* (2) Visible × close button inside the mobile nav (injected by site.js) */ .mobile-nav-close{position:absolute;top:18px;right:18px;width:44px;height:44px;display:flex; align-items:center;justify-content:center;border:0;border-radius:var(--r-pill);cursor:pointer; background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;transition:.2s ease;z-index:2} .mobile-nav-close:hover{background:rgba(255,255,255,.26);transform:rotate(90deg)} .mobile-nav-close:focus-visible{outline:3px solid var(--blue-400);outline-offset:2px} /* (4) Stop iOS Safari auto-zoom: every form control renders >=16px on small screens. (Desktop sizing is untouched — this only applies <=600px.) */ @media (max-width:600px){ input,select,textarea, .bk-lbl input,.bk-lbl select,.bk-lbl textarea, .tkt-fields input,.tkt-fields select, .reg-l input,.reg-l select, .field input,.field select,.field textarea, .ukcf-add-panel input{font-size:16px} } /* (5) Quote builder: stack to one column + cap list height earlier on phones, and reduce padding on tablets (iPad Mini) so it stays usable. */ .qb-list{max-height:300px} @media (max-width:768px){ .quote-builder .pick,.quote-builder .sum{padding:20px} .qb-list{max-height:46vh} } @media (max-width:600px){ .quote-builder{grid-template-columns:1fr} .quote-builder .pick{border-right:0;border-bottom:1px solid var(--line)} .qb-list{max-height:38vh} } /* (8) Let the 3-up card grid collapse to a single column on small phones. #evGrid (events listing) keeps its own id-based rules, so this only affects the generic .grid.cols-3 cards (home/news/related/404). */ @media (max-width:414px){ .grid.cols-3{grid-template-columns:1fr} } /* (7) Panel scales down on phones so it isn't a 460px slab */ @media (max-width:640px){ .panel{min-height:280px} } /* (16) Low-end mobile: drop the decorative hero 3D float/blur animations (keeps the static gradient + tiles looking good, just no infinite transforms). prefers-reduced-motion rules above still apply independently. */ @media (max-width:768px){ .tile,.stage-chip{animation:none} .stage-aurora{animation:none;opacity:.35;filter:blur(50px)} } /* (17) Persona CLS: the splash already animates opacity/visibility (compositor-only). Reserve the splash card's vertical rhythm and contain paint so injecting it doesn't shove surrounding content. persona-float is position:fixed (out of flow). */ .pf-splash{contain:layout paint} .persona-float{contain:layout} /* (15) Small-phone block — nothing below 420px existed before. Covers iPhone SE / 12 mini / Galaxy A. Conservative: only the genuinely oversized. */ @media (max-width:390px){ .wrap{padding:0 16px} .hero h1{font-size:clamp(34px,11vw,46px)} .page-hero h1{font-size:clamp(30px,9vw,40px)} .cta-band{padding:40px 20px} } /* (20) Scroll-triggered sticky reg CTA: site.js adds .reg-prereveal while the hero is still on screen, then removes it once the hero scrolls away. Independent of the page's own .hide toggle (register section in view), so both can hide the bar. */ .reg-sticky.reg-prereveal{display:none!important} /* (19) Keyboard occlusion: when a form control is focused on a small viewport, site.js (and checkout's inline script) add body.kbd-open. Hide the fixed bottom bars so they don't bury the focused field / submit button. Mobile only. */ @media (max-width:900px){ body.kbd-open .sticky-cta, body.kbd-open .reg-sticky, body.kbd-open .bk-mobilebar{transform:translateY(120%);transition:transform .2s ease} }