/* --------------------------------------------------------------------------- #bolt-contact — merged from the FOUR live Elementor html widgets that all emit this same section id: #c8c7f2d /contact-us/ "details" layout (address list + form panel) #a27769e /submit-cv/ "stack" layout (desktop twin) #5d251d8 /submit-cv/ "stack" layout (mobile twin) #3b1e581 /submit-vacancies/ "stack" layout (mobile twin of #bolt-contact-desktop — see contact-desktop.css) Rules common to all four are shared; the deltas are scoped by the layout modifier the template part puts on the section (.bc--details / .bc--stack). The source markup classes (.bc-stack, .bc-form-wrap) are preserved verbatim. --------------------------------------------------------------------------- */ /* ===== BASE BLUE GLASS ===== */ #bolt-contact{ --pink:var(--mp-pink); --blue:var(--mp-blue); --text:var(--mp-ink); --muted:#d7dbff; --outline:rgba(255,255,255,.25); --glassTop:rgba(255,255,255,.10); --glassBot:rgba(255,255,255,.05); --mx:50%; --my:50%; position:relative; isolation:isolate; overflow:hidden; color:var(--text); padding:96px 0; background: radial-gradient(130% 160% at 70% 0%, var(--blue) 0%, var(--mp-blue-dark) 65%, var(--mp-blue-deep) 100%); } #bolt-contact::before{ content:""; position:absolute; inset:0; background: radial-gradient(780px 780px at 22% 38%, rgba(255,255,255,.08), transparent 60%), radial-gradient(640px 640px at 80% 72%, rgba(255,255,255,.06), transparent 65%); mix-blend-mode:screen; opacity:.5; z-index:0; animation:bcFloat 24s ease-in-out infinite alternate; } @keyframes bcFloat{0%{transform:translate(0,0) scale(1);}50%{transform:translate(-4%,3%) scale(1.05);}100%{transform:translate(4%,-3%) scale(1);} } #bolt-contact::after{ content:""; position:absolute; inset:-10% -40%; z-index:0; background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,.09) 50%, transparent 65%); transform:skewX(-12deg); animation:bcSheen 7s linear infinite; } @keyframes bcSheen{0%{transform:translateX(-40%) skewX(-12deg);}100%{transform:translateX(40%) skewX(-12deg);}} /* Mouse glow */ #bolt-contact .bc-mouse{ position:absolute; inset:0; pointer-events:none; z-index:1; background: radial-gradient(360px 360px at var(--mx) var(--my), rgba(255,255,255,.18) 0%, transparent 60%); filter: blur(50px); } /* Layout */ #bolt-contact .bc-inner{ position:relative; z-index:2; margin:0 auto; padding:0 20px; display:grid; grid-template-columns:1fr; } #bolt-contact.bc--details .bc-inner{ max-width:1200px; gap:40px; } #bolt-contact.bc--stack .bc-inner{ max-width:1320px; gap:22px; } @media(min-width:1024px){ #bolt-contact.bc--details .bc-inner{ grid-template-columns:5fr 6fr; align-items:start; } } /* LEFT / HEAD */ #bolt-contact .bc-left{ max-width:620px; } #bolt-contact .bc-head{ max-width:980px; } #bolt-contact .bc-badge{ display:inline-flex; align-items:center; gap:.75rem; padding:6px 14px; margin:0 0 10px; border:1px solid var(--pink); border-radius:999px; background:linear-gradient(90deg, rgba(208,36,121,.15), rgba(37,52,153,.15)); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 22px rgba(0,0,0,.28); color:var(--muted); font-family:"Montserrat",sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; } #bolt-contact .bc-badge i{ color:#ffd166; font-style:normal; font-size:13px; } #bolt-contact .bc-title{ font-family:"DM Serif Display",serif; font-weight:400; color:#fff; font-size:42px; line-height:1.12; margin:10px 0 14px; } #bolt-contact .bc-sub{ font-family:"Montserrat",sans-serif; font-size:16px; line-height:1.8; color:#fff; } #bolt-contact.bc--details .bc-sub{ margin:0 0 20px; } #bolt-contact.bc--stack .bc-sub{ margin:0; } /* Info list */ #bolt-contact .bc-info{ list-style:none; padding:0; margin:0; display:grid; gap:12px; } #bolt-contact .bc-info li{ display:flex; align-items:center; gap:12px; font-family:"Montserrat",sans-serif; font-size:15px; } #bolt-contact .bc-info a{ color:#fff; text-decoration:none; border-bottom:1px solid transparent; transition:.2s; } #bolt-contact .bc-info a:hover{ border-bottom-color:#fff; } #bolt-contact .bc-info .ico{ width:36px; height:36px; min-width:36px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(180deg, var(--glassTop), var(--glassBot)); border:1px solid var(--outline); box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 6px 16px rgba(0,0,0,.25); } #bolt-contact .bc-info .ico svg{ width:18px; height:18px; fill:#fff; opacity:.95; } /* indent address like a block (USA + UK) */ #bolt-contact .bc-info .bc-infoBlock{ align-items:flex-start; } #bolt-contact .bc-infoText{ display:block; } #bolt-contact .bc-infoLabel{ display:block; font-weight:600; letter-spacing:.01em; margin-top:1px; } #bolt-contact .bc-infoValue{ display:block; margin-top:3px; opacity:.95; } /* separation between groups (UK / USA / Remaining) */ #bolt-contact .bc-sep{ height:18px; margin:6px 0; border-top:1px solid rgba(255,255,255,.14); opacity:.9; } #bolt-contact .bc-sep::after{ content:""; display:block; height:0; } /* RIGHT: FORM AREA */ #bolt-contact .bc-right{ background:linear-gradient(180deg, var(--glassTop), var(--glassBot)); border:1px solid var(--outline); box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 10px 25px rgba(0,0,0,.3); backdrop-filter:blur(8px); border-radius:16px; } #bolt-contact.bc--details .bc-right{ padding:36px 32px; min-height:520px; display:flex; align-items:center; justify-content:center; } #bolt-contact.bc--details .bc-formSlot{ width:100%; max-width:540px; } #bolt-contact.bc--stack .bc-right{ padding:28px 24px; } /* FORM HEIGHT — source rule, verbatim. */ #bolt-contact.bc--stack .bc-formSlot{ min-height:450px; } /* ===== Responsive polish (no redesign) — details layout ===== */ @media (max-width:1023px){ #bolt-contact.bc--details{ padding: clamp(64px, 9vw, 92px) 0; } #bolt-contact.bc--details .bc-inner{ padding:0 18px; gap:28px; } #bolt-contact.bc--details .bc-left{ max-width: 100%; } #bolt-contact.bc--details .bc-right{ padding:28px 22px; min-height:unset; } #bolt-contact.bc--details .bc-sep{ height:16px; margin:4px 0; } } @media (max-width:720px){ #bolt-contact.bc--details{ padding: clamp(52px, 10vw, 82px) 0; } #bolt-contact.bc--details .bc-inner{ padding:0 16px; gap:22px; } #bolt-contact.bc--details .bc-title{ font-size: clamp(30px, 7.5vw, 38px); } #bolt-contact.bc--details .bc-sub{ font-size:15px; line-height:1.75; margin:0 0 18px; text-wrap:pretty; } #bolt-contact.bc--details .bc-info li{ font-size:14px; align-items:flex-start; } #bolt-contact.bc--details .bc-info .ico{ width:34px; height:34px; min-width:34px; border-radius:10px; } #bolt-contact.bc--details .bc-right{ padding:22px 18px; border-radius:14px; } #bolt-contact.bc--details .bc-sep{ height:14px; margin:2px 0; } } @media (max-width:520px){ #bolt-contact.bc--details .bc-title{ font-size:36px; } } /* ===== Responsive — stack layout ===== */ @media (max-width:768px){ #bolt-contact.bc--stack{ padding:64px 0; } #bolt-contact.bc--stack .bc-head{ margin-bottom:8px; } #bolt-contact.bc--stack .bc-title{ font-size:32px; line-height:1.2; } #bolt-contact.bc--stack .bc-sub{ font-size:15px; line-height:1.7; } #bolt-contact.bc--stack .bc-right{ padding:24px 18px; } #bolt-contact.bc--stack .bc-formSlot{ min-height:570px; } } /* Touch devices: reduce hover lift only (desktop unchanged) */ @media (hover:none) and (pointer:coarse){ #bolt-contact .bc-info a:hover{ border-bottom-color:transparent; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ #bolt-contact::before, #bolt-contact::after{ animation:none; } #bolt-contact .bc-mouse{ display:none; } } /* The form card: footer.css carries a leaked, unscoped .bc-right flex rule from live's footer widget, which shrink-wrapped and centred the form. */ #bolt-contact.bc--stack .bc-right { display: block; } @media (min-width: 1025px) { /* the 10+10px padding of live's collapsed form container below the band */ #bolt-contact.bc--stack { margin-bottom: 20px; } } /* Gravity Forms skin, from live's Elementor form widget (3e3b4ee / da2612d): two 50% columns with a 10px gap and 21px rows; labels Montserrat 20px/700 white with 6px below; 42px transparent fields with a 1px white border and 8px radius, DM Serif 14px/300; a 1200x50 #D02479 SEND with a circled arrow. Scoped to the slot: nothing here reaches any other input on the site. */ #bolt-contact.bc--stack .bc-formSlot { width: 100%; box-sizing: border-box; padding: 27px 16px 0; } #bolt-contact.bc--stack .bc-formSlot .gform_wrapper, #bolt-contact.bc--stack .bc-formSlot form { margin: 0; } #bolt-contact.bc--stack .bc-formSlot .gform_validation_container, #bolt-contact.bc--stack .bc-formSlot .gform_hidden, #bolt-contact.bc--stack .bc-formSlot .gfield_visibility_hidden, #bolt-contact.bc--stack .bc-formSlot .validation_message--hidden-on-empty:empty { display: none !important; } #bolt-contact.bc--stack .bc-formSlot .gform_fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; row-gap: 21px; margin: 0; padding: 0; } #bolt-contact.bc--stack .bc-formSlot .gfield { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; } #bolt-contact.bc--stack .bc-formSlot .gfield--width-half { grid-column: span 1; } #bolt-contact.bc--stack .bc-formSlot .gfield_label { display: block; margin: 0 0 6px; padding: 0; font-family: "Montserrat", sans-serif; font-size: 20px; font-weight: 700; line-height: 1.2; color: #fff; } #bolt-contact.bc--stack .bc-formSlot .gfield_required, #bolt-contact.bc--stack .bc-formSlot .gform_fileupload_rules, #bolt-contact.bc--stack .bc-formSlot .gfield--type-consent > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #bolt-contact.bc--stack .bc-formSlot :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], input[type="file"], select, textarea) { box-sizing: border-box; width: 100%; height: 42px; margin: 0; padding: 6px 16px; border: 1px solid #fff; border-radius: 8px; background: transparent; color: #fff; font-family: "DM Serif Display", serif; font-size: 14px; font-weight: 300; line-height: 1.4; } #bolt-contact.bc--stack .bc-formSlot input[type="file"] { padding-block: 9px; } #bolt-contact.bc--stack .bc-formSlot textarea { height: 108px; resize: vertical; } #bolt-contact.bc--stack .bc-formSlot select option { color: #000; } #bolt-contact.bc--stack .bc-formSlot ::placeholder { color: rgba(255, 255, 255, .6); opacity: 1; } #bolt-contact.bc--stack .bc-formSlot .ginput_container_consent { display: flex; align-items: center; gap: 8px; } #bolt-contact.bc--stack .bc-formSlot .gfield_consent_label { font-family: "DM Serif Display", serif; font-size: 14px; font-weight: 700; color: #fff; } #bolt-contact.bc--stack .bc-formSlot .multi-role-note { margin: 0; font-family: "DM Serif Display", serif; font-size: 16px; color: #fff; } #bolt-contact.bc--stack .bc-formSlot .multi-role-note a { color: #fff; font-weight: 600; text-decoration: underline; } #bolt-contact.bc--stack .bc-formSlot .gfield_validation_message, #bolt-contact.bc--stack .bc-formSlot .validation_message { margin-top: 6px; font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 600; line-height: 1.4; color: #ffd3e4; } #bolt-contact.bc--stack .bc-formSlot .gform_validation_errors { margin: 0 0 16px; padding: 12px 16px; border: 1px solid #fff; border-radius: 8px; color: #fff; } #bolt-contact.bc--stack .bc-formSlot .gform_footer { margin: 21px 0 0; padding: 0; } #bolt-contact.bc--stack .bc-formSlot .gform_button { width: 100%; height: 50px; margin: 0; padding: 0 40px; border: 0; border-radius: 6px; background: #D02479; color: #fff; font-family: "DM Serif Display", serif; font-size: 20px; font-weight: 600; line-height: 1; text-transform: uppercase; cursor: pointer; } /* GF renders the submit as a