.qv-london-hero, .qv-london-hero * { box-sizing: border-box; } .qv-london-hero { --qv-green: #123f35; --qv-green-dark: #0b3028; --qv-gold: #deb52e; --qv-gold-light: #f4dc83; --qv-cream: #fbf8ef; --qv-text: #172b26; --qv-muted: #596b66; position: relative; overflow: hidden; padding: clamp(70px, 8vw, 120px) 22px; background: radial-gradient(circle at 88% 15%, rgba(222,181,46,.20), transparent 25%), radial-gradient(circle at 8% 90%, rgba(18,63,53,.10), transparent 28%), linear-gradient(135deg, #ffffff 0%, var(--qv-cream) 100%); font-family: inherit; } .qv-london-hero::before { content: ""; position: absolute; top: -160px; right: -130px; width: 420px; height: 420px; border: 1px solid rgba(18,63,53,.10); border-radius: 50%; } .qv-london-hero__container { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr); align-items: center; gap: clamp(40px, 6vw, 85px); width: 100%; max-width: 1200px; margin: 0 auto; } .qv-london-hero__eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; padding: 9px 14px; color: var(--qv-green); background: rgba(222,181,46,.16); border: 1px solid rgba(222,181,46,.40); border-radius: 999px; font-size: 14px; font-weight: 700; letter-spacing: .02em; } .qv-london-hero__eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--qv-gold); border-radius: 50%; box-shadow: 0 0 0 5px rgba(222,181,46,.18); } .qv-london-hero h1 { max-width: 760px; margin: 0 0 22px; color: var(--qv-green-dark); font-size: clamp(40px, 5.5vw, 70px); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; } .qv-london-hero__highlight { color: #b88908; } .qv-london-hero__intro { max-width: 720px; margin: 0 0 30px; color: var(--qv-muted); font-size: clamp(17px, 1.7vw, 20px); line-height: 1.75; } .qv-london-hero__actions { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 28px; } .qv-london-hero__button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 14px 23px; border: 2px solid var(--qv-green); border-radius: 12px; font-size: 16px; font-weight: 750; line-height: 1.2; text-decoration: none !important; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .qv-london-hero__button:hover { transform: translateY(-2px); } .qv-london-hero__button:focus-visible { outline: 3px solid var(--qv-gold-light); outline-offset: 3px; } .qv-london-hero__button--primary { color: #fff !important; background: var(--qv-green); box-shadow: 0 12px 28px rgba(18,63,53,.20); } .qv-london-hero__button--primary:hover { color: #fff !important; background: var(--qv-green-dark); } .qv-london-hero__button--secondary { color: var(--qv-green) !important; background: #fff; } .qv-london-hero__button--secondary:hover { color: var(--qv-green-dark) !important; background: #f7f4e9; } .qv-london-hero__trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; color: var(--qv-text); font-size: 14px; font-weight: 650; } .qv-london-hero__trust li { display: flex; align-items: center; gap: 8px; } .qv-london-hero__check { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; color: #fff; background: var(--qv-green); border-radius: 50%; font-size: 12px; } .qv-london-hero__panel { position: relative; padding: clamp(28px, 4vw, 44px); color: #fff; background: linear-gradient(145deg, rgba(255,255,255,.08), transparent 45%), var(--qv-green); border: 1px solid rgba(255,255,255,.15); border-radius: 28px; box-shadow: 0 30px 70px rgba(11,48,40,.22); } .qv-london-hero__panel::before { content: "LONDON"; position: absolute; top: 18px; right: 22px; color: rgba(255,255,255,.07); font-size: clamp(44px, 6vw, 78px); font-weight: 900; letter-spacing: .08em; } .qv-london-hero__panel-label { position: relative; margin: 0 0 10px; color: var(--qv-gold-light); font-size: 13px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } .qv-london-hero__panel h2 { position: relative; margin: 0 0 14px; color: #fff; font-size: clamp(27px, 3vw, 38px); line-height: 1.15; } .qv-london-hero__panel-text { position: relative; margin: 0 0 26px; color: rgba(255,255,255,.82); font-size: 16px; line-height: 1.7; } .qv-london-hero__features { position: relative; display: grid; gap: 12px; } .qv-london-hero__feature { display: grid; grid-template-columns: 43px 1fr; gap: 13px; align-items: center; padding: 14px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); border-radius: 15px; } .qv-london-hero__feature-number { display: grid; place-items: center; width: 43px; height: 43px; color: var(--qv-green-dark); background: var(--qv-gold); border-radius: 12px; font-size: 15px; font-weight: 850; } .qv-london-hero__feature strong { display: block; margin-bottom: 2px; color: #fff; font-size: 15px; } .qv-london-hero__feature span { display: block; color: rgba(255,255,255,.70); font-size: 13px; line-height: 1.45; } @media (max-width: 900px) { .qv-london-hero__container { grid-template-columns: 1fr; } .qv-london-hero__panel { max-width: 650px; } } @media (max-width: 600px) { .qv-london-hero { padding: 58px 17px; } .qv-london-hero h1 { font-size: 40px; } .qv-london-hero__actions { display: grid; } .qv-london-hero__button { width: 100%; } .qv-london-hero__trust { display: grid; gap: 12px; } .qv-london-hero__panel { padding: 27px 20px; border-radius: 21px; } } @media (prefers-reduced-motion: reduce) { .qv-london-hero__button { transition: none; } } .qv-london-flex, .qv-london-flex * { box-sizing: border-box; } .qv-london-flex { --qv-flex-green: #123f35; --qv-flex-dark: #0b3028; --qv-flex-gold: #deb52e; --qv-flex-cream: #f8f5eb; --qv-flex-text: #21332e; --qv-flex-muted: #60716c; padding: clamp(65px, 7vw, 105px) 22px; background: #ffffff; font-family: inherit; } .qv-london-flex__container { width: 100%; max-width: 1200px; margin: 0 auto; } .qv-london-flex__heading { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: end; gap: 35px; margin-bottom: 38px; } .qv-london-flex__eyebrow { display: block; margin-bottom: 12px; color: #a77b00; font-size: 13px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } .qv-london-flex h2 { max-width: 570px; margin: 0; color: var(--qv-flex-dark); font-size: clamp(31px, 4vw, 50px); line-height: 1.12; letter-spacing: -.025em; } .qv-london-flex__lead { max-width: 620px; margin: 0; color: var(--qv-flex-muted); font-size: 17px; line-height: 1.75; } .qv-london-flex__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; } .qv-london-flex__card { position: relative; min-height: 295px; padding: 27px 23px 24px; overflow: hidden; background: var(--qv-flex-cream); border: 1px solid #e9e3d2; border-radius: 20px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .qv-london-flex__card:hover { transform: translateY(-4px); border-color: rgba(222,181,46,.65); box-shadow: 0 18px 40px rgba(18,63,53,.10); } .qv-london-flex__number { display: inline-grid; place-items: center; width: 43px; height: 43px; margin-bottom: 23px; color: var(--qv-flex-dark); background: var(--qv-flex-gold); border-radius: 13px; font-size: 14px; font-weight: 850; } .qv-london-flex__card h3 { margin: 0 0 12px; color: var(--qv-flex-green); font-size: 21px; line-height: 1.25; } .qv-london-flex__card p { margin: 0; color: var(--qv-flex-muted); font-size: 15px; line-height: 1.7; } .qv-london-flex__card--dark { color: #fff; background: radial-gradient(circle at 100% 0%, rgba(222,181,46,.20), transparent 36%), var(--qv-flex-green); border-color: var(--qv-flex-green); } .qv-london-flex__card--dark h3 { color: #ffffff; } .qv-london-flex__card--dark p { color: rgba(255,255,255,.78); } .qv-london-flex__note { display: flex; align-items: flex-start; gap: 13px; margin-top: 24px; padding: 18px 21px; color: var(--qv-flex-text); background: #fff; border: 1px solid #e8e3d5; border-left: 4px solid var(--qv-flex-gold); border-radius: 12px; font-size: 14px; line-height: 1.65; } .qv-london-flex__note-mark { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; color: #fff; background: var(--qv-flex-green); border-radius: 50%; font-weight: 800; } .qv-london-flex__note strong { color: var(--qv-flex-dark); } @media (max-width: 1020px) { .qv-london-flex__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .qv-london-flex__heading { grid-template-columns: 1fr; align-items: start; gap: 18px; } } @media (max-width: 560px) { .qv-london-flex { padding: 58px 17px; } .qv-london-flex__grid { grid-template-columns: 1fr; } .qv-london-flex__card { min-height: auto; } } @media (prefers-reduced-motion: reduce) { .qv-london-flex__card { transition: none; } } .qv-london-progress, .qv-london-progress * { box-sizing: border-box; } .qv-london-progress { --qv-progress-green: #123f35; --qv-progress-dark: #0a3028; --qv-progress-gold: #deb52e; --qv-progress-light: #f8f6ef; --qv-progress-text: #263a34; --qv-progress-muted: #65756f; position: relative; overflow: hidden; padding: clamp(70px, 8vw, 115px) 22px; background: var(--qv-progress-light); font-family: inherit; } .qv-london-progress::before { content: ""; position: absolute; top: -190px; left: -190px; width: 420px; height: 420px; border: 70px solid rgba(222,181,46,.08); border-radius: 50%; } .qv-london-progress__container { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; } .qv-london-progress__heading { max-width: 790px; margin: 0 auto 42px; text-align: center; } .qv-london-progress__eyebrow { display: inline-block; margin-bottom: 13px; color: #9b7100; font-size: 13px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; } .qv-london-progress h2 { margin: 0 0 17px; color: var(--qv-progress-dark); font-size: clamp(32px, 4.2vw, 53px); line-height: 1.12; letter-spacing: -.025em; } .qv-london-progress__intro { margin: 0; color: var(--qv-progress-muted); font-size: 17px; line-height: 1.75; } .qv-london-progress__story { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); overflow: hidden; background: #fff; border: 1px solid #e7e1d1; border-radius: 26px; box-shadow: 0 24px 65px rgba(18,63,53,.10); } .qv-london-progress__summary { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 5vw, 55px); color: #fff; background: radial-gradient(circle at 10% 100%, rgba(222,181,46,.22), transparent 35%), linear-gradient(145deg, var(--qv-progress-green), var(--qv-progress-dark)); } .qv-london-progress__families { margin: 0 0 20px; color: var(--qv-progress-gold); font-size: clamp(62px, 8vw, 100px); line-height: .9; font-weight: 900; } .qv-london-progress__summary h3 { margin: 0 0 14px; color: #fff; font-size: clamp(25px, 3vw, 35px); line-height: 1.2; } .qv-london-progress__summary p { margin: 0; color: rgba(255,255,255,.80); font-size: 16px; line-height: 1.7; } .qv-london-progress__details { padding: clamp(30px, 5vw, 55px); } .qv-london-progress__details > p { margin: 0 0 28px; color: var(--qv-progress-text); font-size: 17px; line-height: 1.8; } .qv-london-progress__path { position: relative; display: grid; gap: 13px; } .qv-london-progress__step { display: grid; grid-template-columns: 48px 1fr; align-items: start; gap: 15px; padding: 17px; background: var(--qv-progress-light); border: 1px solid #e9e3d4; border-radius: 15px; } .qv-london-progress__icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--qv-progress-dark); background: var(--qv-progress-gold); border-radius: 14px; font-size: 15px; font-weight: 900; } .qv-london-progress__step h3 { margin: 1px 0 5px; color: var(--qv-progress-green); font-size: 18px; line-height: 1.3; } .qv-london-progress__step p { margin: 0; color: var(--qv-progress-muted); font-size: 14px; line-height: 1.65; } .qv-london-progress__result { margin-top: 25px; padding: 20px 22px; background: rgba(222,181,46,.13); border: 1px solid rgba(222,181,46,.42); border-radius: 15px; } .qv-london-progress__result strong { display: block; margin-bottom: 7px; color: var(--qv-progress-dark); font-size: 16px; } .qv-london-progress__result p { margin: 0; color: var(--qv-progress-text); font-size: 15px; line-height: 1.7; } .qv-london-progress__disclaimer { margin: 19px 0 0; color: var(--qv-progress-muted); font-size: 12px; line-height: 1.6; text-align: center; } @media (max-width: 820px) { .qv-london-progress__story { grid-template-columns: 1fr; } .qv-london-progress__summary { text-align: center; } } @media (max-width: 560px) { .qv-london-progress { padding: 58px 17px; } .qv-london-progress__story { border-radius: 20px; } .qv-london-progress__step { grid-template-columns: 42px 1fr; padding: 15px; } .qv-london-progress__icon { width: 42px; height: 42px; } } .qv-london-lessons, .qv-london-lessons * { box-sizing: border-box; } .qv-london-lessons { --qv-lesson-green: #123f35; --qv-lesson-dark: #0a3028; --qv-lesson-gold: #deb52e; --qv-lesson-cream: #faf7ee; --qv-lesson-text: #243833; --qv-lesson-muted: #62736d; padding: clamp(70px, 8vw, 115px) 22px; background: #ffffff; font-family: inherit; } .qv-london-lessons__container { width: 100%; max-width: 1200px; margin: 0 auto; } .qv-london-lessons__header { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: end; gap: 45px; margin-bottom: 48px; } .qv-london-lessons__eyebrow { display: inline-block; margin-bottom: 12px; color: #9b7100; font-size: 13px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; } .qv-london-lessons h2 { margin: 0; color: var(--qv-lesson-dark); font-size: clamp(32px, 4.2vw, 53px); line-height: 1.12; letter-spacing: -.025em; } .qv-london-lessons__lead { margin: 0; color: var(--qv-lesson-muted); font-size: 17px; line-height: 1.8; } .qv-london-lessons__timeline { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .qv-london-lessons__timeline::before { content: ""; position: absolute; top: 69px; left: 16%; right: 16%; height: 3px; background: linear-gradient( 90deg, var(--qv-lesson-green), var(--qv-lesson-gold), var(--qv-lesson-green) ); opacity: .25; } .qv-london-lessons__card { position: relative; z-index: 1; padding: 29px 24px 25px; text-align: center; background: var(--qv-lesson-cream); border: 1px solid #e8e2d2; border-radius: 22px; } .qv-london-lessons__time { display: grid; place-items: center; width: 82px; height: 82px; margin: 0 auto 23px; color: #ffffff; background: var(--qv-lesson-green); border: 8px solid #ffffff; border-radius: 50%; box-shadow: 0 0 0 2px rgba(18,63,53,.12), 0 12px 26px rgba(18,63,53,.18); } .qv-london-lessons__time strong { display: block; font-size: 24px; line-height: .9; } .qv-london-lessons__time span { display: block; margin-top: 4px; font-size: 10px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; } .qv-london-lessons__card--standard { background: var(--qv-lesson-green); border-color: var(--qv-lesson-green); transform: translateY(-10px); box-shadow: 0 22px 48px rgba(18,63,53,.17); } .qv-london-lessons__card--standard .qv-london-lessons__time { color: var(--qv-lesson-dark); background: var(--qv-lesson-gold); } .qv-london-lessons__card h3 { margin: 0 0 10px; color: var(--qv-lesson-green); font-size: 21px; line-height: 1.3; } .qv-london-lessons__card p { margin: 0; color: var(--qv-lesson-muted); font-size: 15px; line-height: 1.7; } .qv-london-lessons__card--standard h3 { color: #ffffff; } .qv-london-lessons__card--standard p { color: rgba(255,255,255,.78); } .qv-london-lessons__principle { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 21px; margin-top: 37px; padding: 25px 27px; background: radial-gradient(circle at 100% 50%, rgba(222,181,46,.17), transparent 31%), #f7f4e9; border: 1px solid #e6dfcb; border-radius: 18px; } .qv-london-lessons__principle-icon { display: grid; place-items: center; width: 62px; height: 62px; color: var(--qv-lesson-dark); background: var(--qv-lesson-gold); border-radius: 17px; font-size: 25px; font-weight: 900; } .qv-london-lessons__principle h3 { margin: 0 0 6px; color: var(--qv-lesson-dark); font-size: 21px; } .qv-london-lessons__principle p { margin: 0; color: var(--qv-lesson-muted); font-size: 15px; line-height: 1.7; } .qv-london-lessons__notice { max-width: 850px; margin: 19px auto 0; color: var(--qv-lesson-muted); font-size: 12px; line-height: 1.65; text-align: center; } @media (max-width: 850px) { .qv-london-lessons__header { grid-template-columns: 1fr; align-items: start; gap: 18px; } .qv-london-lessons__timeline { grid-template-columns: 1fr; } .qv-london-lessons__timeline::before { display: none; } .qv-london-lessons__card--standard { transform: none; } } @media (max-width: 560px) { .qv-london-lessons { padding: 58px 17px; } .qv-london-lessons__principle { grid-template-columns: 1fr; align-items: start; } } .qv-london-lessons__time strong, .qv-london-lessons__time span { color: #ffffff !important; } .qv-london-lessons__card--standard .qv-london-lessons__time strong, .qv-london-lessons__card--standard .qv-london-lessons__time span { color: #092f27 !important; } .qv-london-balance, .qv-london-balance * { box-sizing: border-box; } .qv-london-balance { --qv-balance-green: #123f35; --qv-balance-dark: #0a3028; --qv-balance-gold: #deb52e; --qv-balance-cream: #faf7ef; --qv-balance-text: #263a34; --qv-balance-muted: #62736d; position: relative; overflow: hidden; padding: clamp(70px, 8vw, 115px) 22px; background: linear-gradient( 90deg, var(--qv-balance-green) 0%, var(--qv-balance-green) 36%, var(--qv-balance-cream) 36%, var(--qv-balance-cream) 100% ); font-family: inherit; } .qv-london-balance__container { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: clamp(35px, 6vw, 80px); align-items: center; width: 100%; max-width: 1200px; margin: 0 auto; } .qv-london-balance__planner { position: relative; padding: 29px; background: #ffffff; border: 1px solid rgba(255,255,255,.30); border-radius: 24px; box-shadow: 0 28px 65px rgba(0,0,0,.20); } .qv-london-balance__planner::before { content: ""; position: absolute; top: -7px; left: 28px; right: 28px; height: 14px; background: radial-gradient(circle, var(--qv-balance-gold) 4px, transparent 5px) left center / 35px 14px repeat-x; } .qv-london-balance__planner-label { display: block; margin-bottom: 8px; color: #9a7100; font-size: 12px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; } .qv-london-balance__planner h3 { margin: 0 0 23px; color: var(--qv-balance-dark); font-size: 25px; line-height: 1.25; } .qv-london-balance__day { display: grid; grid-template-columns: 61px 1fr; gap: 13px; align-items: center; padding: 14px 0; border-top: 1px solid #ebe6da; } .qv-london-balance__time { color: var(--qv-balance-green); font-size: 12px; font-weight: 850; text-align: center; } .qv-london-balance__activity { padding: 13px 15px; color: var(--qv-balance-text); background: var(--qv-balance-cream); border-radius: 11px; font-size: 14px; font-weight: 700; } .qv-london-balance__activity--quran { color: #ffffff; background: var(--qv-balance-green); border-left: 5px solid var(--qv-balance-gold); } .qv-london-balance__planner-note { margin: 18px 0 0; color: var(--qv-balance-muted); font-size: 12px; line-height: 1.6; } .qv-london-balance__content { padding: clamp(20px, 3vw, 35px) 0; } .qv-london-balance__eyebrow { display: inline-block; margin-bottom: 12px; color: #987000; font-size: 13px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; } .qv-london-balance h2 { max-width: 720px; margin: 0 0 20px; color: var(--qv-balance-dark); font-size: clamp(32px, 4.2vw, 53px); line-height: 1.12; letter-spacing: -.025em; } .qv-london-balance__intro { max-width: 750px; margin: 0 0 28px; color: var(--qv-balance-muted); font-size: 17px; line-height: 1.8; } .qv-london-balance__points { display: grid; gap: 14px; } .qv-london-balance__point { display: grid; grid-template-columns: 45px 1fr; gap: 15px; align-items: start; padding: 17px 18px; background: rgba(255,255,255,.72); border: 1px solid #e4decf; border-radius: 15px; } .qv-london-balance__icon { display: grid; place-items: center; width: 45px; height: 45px; color: var(--qv-balance-dark); background: var(--qv-balance-gold); border-radius: 13px; font-size: 14px; font-weight: 900; } .qv-london-balance__point h3 { margin: 0 0 5px; color: var(--qv-balance-green); font-size: 18px; line-height: 1.3; } .qv-london-balance__point p { margin: 0; color: var(--qv-balance-muted); font-size: 14px; line-height: 1.65; } .qv-london-balance__statement { margin-top: 21px; padding: 18px 20px; color: var(--qv-balance-text); background: rgba(222,181,46,.14); border-left: 4px solid var(--qv-balance-gold); border-radius: 12px; font-size: 15px; line-height: 1.7; } .qv-london-balance__statement strong { color: var(--qv-balance-dark); } @media (max-width: 900px) { .qv-london-balance { background: var(--qv-balance-cream); } .qv-london-balance__container { grid-template-columns: 1fr; } .qv-london-balance__planner { max-width: 620px; background: #ffffff; border-color: #e6dfcf; } } @media (max-width: 560px) { .qv-london-balance { padding: 58px 17px; } .qv-london-balance__planner { padding: 25px 18px; border-radius: 19px; } .qv-london-balance__day { grid-template-columns: 52px 1fr; } } .qv-london-programmes, .qv-london-programmes * { box-sizing: border-box; } .qv-london-programmes { --qv-programme-green: #123f35; --qv-programme-dark: #0a3028; --qv-programme-gold: #deb52e; --qv-programme-cream: #faf7ef; --qv-programme-text: #283b35; --qv-programme-muted: #65756f; padding: clamp(70px, 8vw, 115px) 22px; background: #ffffff; font-family: inherit; } .qv-london-programmes__container { width: 100%; max-width: 1200px; margin: 0 auto; } .qv-london-programmes__header { max-width: 790px; margin: 0 auto 43px; text-align: center; } .qv-london-programmes__eyebrow { display: inline-block; margin-bottom: 12px; color: #9b7100; font-size: 13px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; } .qv-london-programmes h2 { margin: 0 0 17px; color: var(--qv-programme-dark); font-size: clamp(32px, 4.2vw, 53px); line-height: 1.12; letter-spacing: -.025em; } .qv-london-programmes__intro { margin: 0; color: var(--qv-programme-muted); font-size: 17px; line-height: 1.75; } .qv-london-programmes__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; } .qv-london-programmes__card { grid-column: span 2; position: relative; display: flex; flex-direction: column; min-height: 315px; padding: 25px; overflow: hidden; color: var(--qv-programme-text) !important; background: var(--qv-programme-cream); border: 1px solid #e7e0cf; border-radius: 20px; text-decoration: none !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .qv-london-programmes__card:nth-child(4), .qv-london-programmes__card:nth-child(5) { grid-column: span 3; } .qv-london-programmes__card:hover { transform: translateY(-5px); color: var(--qv-programme-text) !important; border-color: rgba(222,181,46,.70); box-shadow: 0 20px 45px rgba(18,63,53,.12); } .qv-london-programmes__card:focus-visible { outline: 3px solid var(--qv-programme-gold); outline-offset: 4px; } .qv-london-programmes__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 22px; } .qv-london-programmes__icon { display: grid; place-items: center; width: 54px; height: 54px; flex: 0 0 54px; color: #ffffff; background: var(--qv-programme-green); border-radius: 16px; font-family: Georgia, "Times New Roman", serif; font-size: 25px; font-weight: 700; } .qv-london-programmes__audience { display: inline-flex; align-items: center; min-height: 29px; padding: 6px 10px; color: var(--qv-programme-green); background: rgba(222,181,46,.17); border: 1px solid rgba(222,181,46,.35); border-radius: 999px; font-size: 11px; font-weight: 800; text-align: center; } .qv-london-programmes__card h3 { margin: 0 0 11px; color: var(--qv-programme-green); font-size: 22px; line-height: 1.3; } .qv-london-programmes__card p { margin: 0 0 21px; color: var(--qv-programme-muted); font-size: 14px; line-height: 1.7; } .qv-london-programmes__topics { display: flex; flex-wrap: wrap; gap: 7px; margin: auto 0 20px; padding: 0; list-style: none; } .qv-london-programmes__topics li { padding: 6px 9px; color: var(--qv-programme-text); background: #ffffff; border: 1px solid #e5dfd1; border-radius: 8px; font-size: 11px; font-weight: 700; } .qv-london-programmes__link { display: flex; align-items: center; justify-content: space-between; padding-top: 15px; color: var(--qv-programme-green); border-top: 1px solid #e3ddce; font-size: 14px; font-weight: 850; } .qv-london-programmes__arrow { display: grid; place-items: center; width: 31px; height: 31px; color: var(--qv-programme-dark); background: var(--qv-programme-gold); border-radius: 50%; transition: transform .2s ease; } .qv-london-programmes__card:hover .qv-london-programmes__arrow { transform: translateX(3px); } .qv-london-programmes__card--featured { color: #ffffff !important; background: radial-gradient(circle at 100% 0%, rgba(222,181,46,.22), transparent 35%), var(--qv-programme-green); border-color: var(--qv-programme-green); } .qv-london-programmes__card--featured:hover { color: #ffffff !important; } .qv-london-programmes__card--featured .qv-london-programmes__icon { color: var(--qv-programme-dark); background: var(--qv-programme-gold); } .qv-london-programmes__card--featured h3, .qv-london-programmes__card--featured .qv-london-programmes__link { color: #ffffff; } .qv-london-programmes__card--featured p { color: rgba(255,255,255,.78); } .qv-london-programmes__card--featured .qv-london-programmes__audience { color: #ffffff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.20); } .qv-london-programmes__card--featured .qv-london-programmes__topics li { color: #ffffff; background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.15); } .qv-london-programmes__card--featured .qv-london-programmes__link { border-color: rgba(255,255,255,.16); } .qv-london-programmes__assessment { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 27px; padding: 24px 27px; background: #f8f5eb; border: 1px solid #e5deca; border-radius: 17px; } .qv-london-programmes__assessment h3 { margin: 0 0 5px; color: var(--qv-programme-dark); font-size: 20px; } .qv-london-programmes__assessment p { margin: 0; color: var(--qv-programme-muted); font-size: 14px; line-height: 1.65; } .qv-london-programmes__button { display: inline-flex; align-items: center; justify-content: center; min-width: 190px; min-height: 50px; padding: 13px 20px; color: #ffffff !important; background: var(--qv-programme-green); border: 2px solid var(--qv-programme-green); border-radius: 11px; font-size: 14px; font-weight: 800; text-decoration: none !important; transition: transform .2s ease, background .2s ease; } .qv-london-programmes__button:hover { color: #ffffff !important; background: var(--qv-programme-dark); transform: translateY(-2px); } .qv-london-programmes__button:focus-visible { outline: 3px solid var(--qv-programme-gold); outline-offset: 3px; } @media (max-width: 950px) { .qv-london-programmes__card, .qv-london-programmes__card:nth-child(4), .qv-london-programmes__card:nth-child(5) { grid-column: span 3; } .qv-london-programmes__card:last-child { grid-column: 2 / span 4; } } @media (max-width: 650px) { .qv-london-programmes { padding: 58px 17px; } .qv-london-programmes__grid { grid-template-columns: 1fr; } .qv-london-programmes__card, .qv-london-programmes__card:nth-child(4), .qv-london-programmes__card:nth-child(5), .qv-london-programmes__card:last-child { grid-column: auto; min-height: auto; } .qv-london-programmes__assessment { align-items: stretch; flex-direction: column; } .qv-london-programmes__button { width: 100%; } } @media (prefers-reduced-motion: reduce) { .qv-london-programmes__card, .qv-london-programmes__arrow, .qv-london-programmes__button { transition: none; } } .qv-london-tarbiyah, .qv-london-tarbiyah * { box-sizing: border-box; } .qv-london-tarbiyah { --qv-tarbiyah-green: #123f35; --qv-tarbiyah-dark: #092d26; --qv-tarbiyah-gold: #deb52e; --qv-tarbiyah-cream: #faf7ee; --qv-tarbiyah-text: #293c36; --qv-tarbiyah-muted: #667670; position: relative; overflow: hidden; padding: clamp(70px, 8vw, 115px) 22px; background: radial-gradient(circle at 90% 10%, rgba(222,181,46,.17), transparent 25%), linear-gradient(145deg, var(--qv-tarbiyah-dark), var(--qv-tarbiyah-green)); font-family: inherit; } .qv-london-tarbiyah::before { content: "۞"; position: absolute; right: -40px; bottom: -100px; color: rgba(255,255,255,.035); font-family: Georgia, "Times New Roman", serif; font-size: 400px; line-height: 1; } .qv-london-tarbiyah__container { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(40px, 6vw, 75px); align-items: center; width: 100%; max-width: 1200px; margin: 0 auto; } .qv-london-tarbiyah__eyebrow { display: inline-block; margin-bottom: 13px; color: var(--qv-tarbiyah-gold); font-size: 13px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; } .qv-london-tarbiyah h2 { margin: 0 0 20px; color: #ffffff; font-size: clamp(32px, 4.2vw, 53px); line-height: 1.12; letter-spacing: -.025em; } .qv-london-tarbiyah__intro { margin: 0 0 25px; color: rgba(255,255,255,.78); font-size: 17px; line-height: 1.8; } .qv-london-tarbiyah__quote { margin: 0 0 25px; padding: 19px 20px; color: #ffffff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-left: 4px solid var(--qv-tarbiyah-gold); border-radius: 13px; font-size: 15px; font-weight: 650; line-height: 1.7; } .qv-london-tarbiyah__button { display: inline-flex; align-items: center; justify-content: center; min-height: 51px; padding: 13px 20px; color: var(--qv-tarbiyah-dark) !important; background: var(--qv-tarbiyah-gold); border: 2px solid var(--qv-tarbiyah-gold); border-radius: 11px; font-size: 14px; font-weight: 850; text-decoration: none !important; transition: transform .2s ease, background .2s ease; } .qv-london-tarbiyah__button:hover { color: var(--qv-tarbiyah-dark) !important; background: #edca54; transform: translateY(-2px); } .qv-london-tarbiyah__button:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; } .qv-london-tarbiyah__panel { padding: clamp(25px, 4vw, 38px); background: var(--qv-tarbiyah-cream); border: 1px solid rgba(255,255,255,.20); border-radius: 25px; box-shadow: 0 28px 65px rgba(0,0,0,.22); } .qv-london-tarbiyah__panel-heading { margin-bottom: 21px; } .qv-london-tarbiyah__panel-heading span { display: block; margin-bottom: 7px; color: #9a7100; font-size: 12px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; } .qv-london-tarbiyah__panel-heading h3 { margin: 0; color: var(--qv-tarbiyah-dark); font-size: clamp(24px, 3vw, 32px); line-height: 1.25; } .qv-london-tarbiyah__principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; } .qv-london-tarbiyah__principle { padding: 19px 17px; background: #ffffff; border: 1px solid #e6dfcf; border-radius: 14px; } .qv-london-tarbiyah__number { display: grid; place-items: center; width: 35px; height: 35px; margin-bottom: 13px; color: var(--qv-tarbiyah-dark); background: var(--qv-tarbiyah-gold); border-radius: 10px; font-size: 12px; font-weight: 900; } .qv-london-tarbiyah__principle h3 { margin: 0 0 7px; color: var(--qv-tarbiyah-green); font-size: 17px; line-height: 1.3; } .qv-london-tarbiyah__principle p { margin: 0; color: var(--qv-tarbiyah-muted); font-size: 13px; line-height: 1.65; } .qv-london-tarbiyah__family-note { margin-top: 15px; padding: 16px 18px; color: var(--qv-tarbiyah-text); background: rgba(222,181,46,.14); border: 1px solid rgba(222,181,46,.40); border-radius: 12px; font-size: 13px; line-height: 1.65; } .qv-london-tarbiyah__family-note strong { color: var(--qv-tarbiyah-dark); } @media (max-width: 900px) { .qv-london-tarbiyah__container { grid-template-columns: 1fr; } .qv-london-tarbiyah__content { max-width: 760px; } } @media (max-width: 580px) { .qv-london-tarbiyah { padding: 58px 17px; } .qv-london-tarbiyah__principles { grid-template-columns: 1fr; } .qv-london-tarbiyah__button { width: 100%; } .qv-london-tarbiyah__panel { border-radius: 20px; } } @media (prefers-reduced-motion: reduce) { .qv-london-tarbiyah__button { transition: none; } } .qv-london-teachers, .qv-london-teachers * { box-sizing: border-box; } .qv-london-teachers { --qv-teacher-green: #123f35; --qv-teacher-dark: #092f27; --qv-teacher-gold: #deb52e; --qv-teacher-cream: #faf7ef; --qv-teacher-text: #283c35; --qv-teacher-muted: #63746e; position: relative; overflow: hidden; padding: clamp(70px, 8vw, 115px) 22px; background: radial-gradient(circle at 8% 8%, rgba(222,181,46,.14), transparent 24%), var(--qv-teacher-cream); font-family: inherit; } .qv-london-teachers__container { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; } .qv-london-teachers__header { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 42px; align-items: end; margin-bottom: 42px; } .qv-london-teachers__eyebrow { display: inline-block; margin-bottom: 12px; color: #987000; font-size: 13px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; } .qv-london-teachers h2 { margin: 0; color: var(--qv-teacher-dark); font-size: clamp(32px, 4.2vw, 53px); line-height: 1.12; letter-spacing: -.025em; } .qv-london-teachers__lead { margin: 0; color: var(--qv-teacher-muted); font-size: 17px; line-height: 1.8; } .qv-london-teachers__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .qv-london-teachers__card { position: relative; min-height: 335px; padding: 27px 24px; overflow: hidden; background: #ffffff; border: 1px solid #e5decd; border-radius: 20px; } .qv-london-teachers__card--dark { color: #ffffff; background: radial-gradient(circle at 100% 0%, rgba(222,181,46,.20), transparent 36%), var(--qv-teacher-green); border-color: var(--qv-teacher-green); } .qv-london-teachers__icon { display: grid; place-items: center; width: 57px; height: 57px; margin-bottom: 22px; color: var(--qv-teacher-dark); background: var(--qv-teacher-gold); border-radius: 17px; font-size: 20px; font-weight: 900; } .qv-london-teachers__card h3 { margin: 0 0 11px; color: var(--qv-teacher-green); font-size: 22px; line-height: 1.3; } .qv-london-teachers__card > p { margin: 0 0 19px; color: var(--qv-teacher-muted); font-size: 14px; line-height: 1.7; } .qv-london-teachers__card--dark h3 { color: #ffffff; } .qv-london-teachers__card--dark > p { color: rgba(255,255,255,.78); } .qv-london-teachers__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .qv-london-teachers__list li { display: grid; grid-template-columns: 20px 1fr; gap: 9px; align-items: start; color: var(--qv-teacher-text); font-size: 13px; line-height: 1.55; } .qv-london-teachers__card--dark .qv-london-teachers__list li { color: rgba(255,255,255,.86); } .qv-london-teachers__check { display: grid; place-items: center; width: 20px; height: 20px; color: var(--qv-teacher-dark); background: var(--qv-teacher-gold); border-radius: 50%; font-size: 10px; font-weight: 900; } .qv-london-teachers__language { display: grid; grid-template-columns: 52px 1fr; gap: 13px; align-items: center; padding: 12px; background: var(--qv-teacher-cream); border: 1px solid #e8e1d1; border-radius: 12px; } .qv-london-teachers__language + .qv-london-teachers__language { margin-top: 10px; } .qv-london-teachers__language-code { display: grid; place-items: center; width: 52px; height: 43px; color: #ffffff; background: var(--qv-teacher-green); border-radius: 10px; font-size: 12px; font-weight: 900; } .qv-london-teachers__language strong { display: block; margin-bottom: 2px; color: var(--qv-teacher-dark); font-size: 14px; } .qv-london-teachers__language span { display: block; color: var(--qv-teacher-muted); font-size: 12px; line-height: 1.45; } .qv-london-teachers__match { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; margin-top: 25px; padding: 26px 28px; background: #ffffff; border: 1px solid #e4dcc9; border-radius: 18px; } .qv-london-teachers__match h3 { margin: 0 0 7px; color: var(--qv-teacher-dark); font-size: 21px; } .qv-london-teachers__match p { margin: 0; color: var(--qv-teacher-muted); font-size: 14px; line-height: 1.65; } .qv-london-teachers__actions { display: flex; flex-wrap: wrap; gap: 10px; } .qv-london-teachers__button { display: inline-flex; align-items: center; justify-content: center; min-height: 49px; padding: 12px 18px; border: 2px solid var(--qv-teacher-green); border-radius: 10px; font-size: 14px; font-weight: 800; text-decoration: none !important; white-space: nowrap; transition: transform .2s ease, background .2s ease; } .qv-london-teachers__button--primary { color: #ffffff !important; background: var(--qv-teacher-green); } .qv-london-teachers__button--secondary { color: var(--qv-teacher-green) !important; background: #ffffff; } .qv-london-teachers__button:hover { transform: translateY(-2px); } .qv-london-teachers__button--primary:hover { color: #ffffff !important; background: var(--qv-teacher-dark); } .qv-london-teachers__button--secondary:hover { color: var(--qv-teacher-dark) !important; background: var(--qv-teacher-cream); } .qv-london-teachers__button:focus-visible { outline: 3px solid var(--qv-teacher-gold); outline-offset: 3px; } .qv-london-teachers__independence { max-width: 920px; margin: 18px auto 0; color: var(--qv-teacher-muted); font-size: 12px; line-height: 1.65; text-align: center; } @media (max-width: 950px) { .qv-london-teachers__header { grid-template-columns: 1fr; align-items: start; gap: 18px; } .qv-london-teachers__grid { grid-template-columns: 1fr 1fr; } .qv-london-teachers__card:last-child { grid-column: 1 / -1; } } @media (max-width: 720px) { .qv-london-teachers__match { grid-template-columns: 1fr; align-items: start; } } @media (max-width: 580px) { .qv-london-teachers { padding: 58px 17px; } .qv-london-teachers__grid { grid-template-columns: 1fr; } .qv-london-teachers__card:last-child { grid-column: auto; } .qv-london-teachers__card { min-height: auto; } .qv-london-teachers__actions, .qv-london-teachers__button { width: 100%; } } @media (prefers-reduced-motion: reduce) { .qv-london-teachers__button { transition: none; } } .qv-london-schedule, .qv-london-schedule * { box-sizing: border-box; } .qv-london-schedule { --qv-schedule-green: #123f35; --qv-schedule-dark: #092f27; --qv-schedule-gold: #deb52e; --qv-schedule-cream: #faf7ef; --qv-schedule-text: #283c35; --qv-schedule-muted: #64756f; position: relative; overflow: hidden; padding: clamp(70px, 8vw, 115px) 22px; background: #ffffff; font-family: inherit; } .qv-london-schedule__container { width: 100%; max-width: 1200px; margin: 0 auto; } .qv-london-schedule__header { max-width: 820px; margin: 0 auto 42px; text-align: center; } .qv-london-schedule__eyebrow { display: inline-block; margin-bottom: 12px; color: #987000; font-size: 13px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; } .qv-london-schedule h2 { margin: 0 0 17px; color: var(--qv-schedule-dark); font-size: clamp(32px, 4.2vw, 53px); line-height: 1.12; letter-spacing: -.025em; } .qv-london-schedule__intro { margin: 0; color: var(--qv-schedule-muted); font-size: 17px; line-height: 1.78; } .qv-london-schedule__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; margin-bottom: 27px; } .qv-london-schedule__day { padding: 15px 8px; text-align: center; background: var(--qv-schedule-cream); border: 1px solid #e6dfcf; border-radius: 12px; } .qv-london-schedule__day strong { display: block; margin-bottom: 4px; color: var(--qv-schedule-green); font-size: 13px; } .qv-london-schedule__day span { display: block; color: var(--qv-schedule-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; } .qv-london-schedule__day--active { color: #ffffff; background: var(--qv-schedule-green); border-color: var(--qv-schedule-green); box-shadow: 0 10px 23px rgba(18,63,53,.13); } .qv-london-schedule__day--active strong { color: #ffffff; } .qv-london-schedule__day--active span { color: var(--qv-schedule-gold); } .qv-london-schedule__main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr); gap: 21px; } .qv-london-schedule__shifts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .qv-london-schedule__shift { position: relative; min-height: 275px; padding: 23px 19px; overflow: hidden; background: var(--qv-schedule-cream); border: 1px solid #e6dfcf; border-radius: 18px; } .qv-london-schedule__shift::after { content: ""; position: absolute; right: -35px; bottom: -35px; width: 100px; height: 100px; background: rgba(222,181,46,.11); border-radius: 50%; } .qv-london-schedule__shift--evening { color: #ffffff; background: var(--qv-schedule-green); border-color: var(--qv-schedule-green); } .qv-london-schedule__shift-icon { display: grid; place-items: center; width: 49px; height: 49px; margin-bottom: 19px; color: var(--qv-schedule-dark); background: var(--qv-schedule-gold); border-radius: 14px; font-size: 20px; } .qv-london-schedule__shift-label { display: block; margin-bottom: 6px; color: #987000; font-size: 10px; font-weight: 850; letter-spacing: .10em; text-transform: uppercase; } .qv-london-schedule__shift--evening .qv-london-schedule__shift-label { color: var(--qv-schedule-gold); } .qv-london-schedule__shift h3 { margin: 0 0 9px; color: var(--qv-schedule-green); font-size: 20px; line-height: 1.3; } .qv-london-schedule__shift p { position: relative; z-index: 1; margin: 0; color: var(--qv-schedule-muted); font-size: 13px; line-height: 1.7; } .qv-london-schedule__shift--evening h3 { color: #ffffff; } .qv-london-schedule__shift--evening p { color: rgba(255,255,255,.78); } .qv-london-schedule__booking { display: flex; flex-direction: column; justify-content: center; padding: clamp(25px, 4vw, 36px); color: #ffffff; background: radial-gradient(circle at 100% 0%, rgba(222,181,46,.23), transparent 38%), var(--qv-schedule-dark); border-radius: 20px; box-shadow: 0 22px 52px rgba(9,47,39,.19); } .qv-london-schedule__booking-label { display: block; margin-bottom: 9px; color: var(--qv-schedule-gold); font-size: 11px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; } .qv-london-schedule__booking h3 { margin: 0 0 12px; color: #ffffff; font-size: 25px; line-height: 1.25; } .qv-london-schedule__booking p { margin: 0 0 21px; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.7; } .qv-london-schedule__actions { display: grid; gap: 9px; } .qv-london-schedule__button { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 17px; border: 2px solid var(--qv-schedule-gold); border-radius: 10px; font-size: 13px; font-weight: 850; text-align: center; text-decoration: none !important; transition: transform .2s ease, background .2s ease; } .qv-london-schedule__button--primary { color: var(--qv-schedule-dark) !important; background: var(--qv-schedule-gold); } .qv-london-schedule__button--secondary { color: #ffffff !important; background: transparent; } .qv-london-schedule__button:hover { transform: translateY(-2px); } .qv-london-schedule__button--primary:hover { color: var(--qv-schedule-dark) !important; background: #eccb58; } .qv-london-schedule__button--secondary:hover { color: var(--qv-schedule-dark) !important; background: var(--qv-schedule-gold); } .qv-london-schedule__button:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; } .qv-london-schedule__notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 21px; } .qv-london-schedule__note { padding: 16px; color: var(--qv-schedule-muted); background: #ffffff; border: 1px solid #e6dfcf; border-left: 4px solid var(--qv-schedule-gold); border-radius: 11px; font-size: 12px; line-height: 1.6; } .qv-london-schedule__note strong { display: block; margin-bottom: 4px; color: var(--qv-schedule-dark); font-size: 13px; } @media (max-width: 960px) { .qv-london-schedule__main { grid-template-columns: 1fr; } } @media (max-width: 740px) { .qv-london-schedule__week { grid-template-columns: repeat(4, minmax(0, 1fr)); } .qv-london-schedule__shifts, .qv-london-schedule__notes { grid-template-columns: 1fr; } .qv-london-schedule__shift { min-height: auto; } } @media (max-width: 480px) { .qv-london-schedule { padding: 58px 17px; } .qv-london-schedule__week { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qv-london-schedule__day:last-child { grid-column: 1 / -1; } } @media (prefers-reduced-motion: reduce) { .qv-london-schedule__button { transition: none; } } .qv-london-trial, .qv-london-trial * { box-sizing: border-box; } .qv-london-trial { --qv-trial-green: #123f35; --qv-trial-dark: #092f27; --qv-trial-gold: #deb52e; --qv-trial-cream: #faf7ef; --qv-trial-text: #283c35; --qv-trial-muted: #64756f; position: relative; overflow: hidden; padding: clamp(70px, 8vw, 115px) 22px; background: radial-gradient(circle at 5% 100%, rgba(222,181,46,.13), transparent 27%), var(--qv-trial-cream); font-family: inherit; } .qv-london-trial__container { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; } .qv-london-trial__header { max-width: 820px; margin: 0 auto 48px; text-align: center; } .qv-london-trial__eyebrow { display: inline-block; margin-bottom: 12px; color: #987000; font-size: 13px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; } .qv-london-trial h2 { margin: 0 0 17px; color: var(--qv-trial-dark); font-size: clamp(32px, 4.2vw, 53px); line-height: 1.12; letter-spacing: -.025em; } .qv-london-trial__intro { margin: 0; color: var(--qv-trial-muted); font-size: 17px; line-height: 1.78; } .qv-london-trial__journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 37px; margin: 0; padding: 0; list-style: none; } .qv-london-trial__step { position: relative; min-height: 330px; padding: 25px 21px 23px; background: #ffffff; border: 1px solid #e5decc; border-radius: 20px; box-shadow: 0 15px 35px rgba(18,63,53,.07); } .qv-london-trial__step:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: -31px; z-index: 2; display: grid; place-items: center; width: 25px; height: 25px; color: var(--qv-trial-green); font-size: 27px; font-weight: 900; transform: translateY(-50%); } .qv-london-trial__step--payment { color: #ffffff; background: radial-gradient(circle at 100% 0%, rgba(222,181,46,.22), transparent 35%), var(--qv-trial-green); border-color: var(--qv-trial-green); } .qv-london-trial__day { display: inline-flex; align-items: center; justify-content: center; min-height: 31px; margin-bottom: 21px; padding: 6px 11px; color: var(--qv-trial-dark); background: var(--qv-trial-gold); border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; } .qv-london-trial__number { display: block; margin-bottom: 9px; color: rgba(18,63,53,.10); font-size: 55px; line-height: .9; font-weight: 900; } .qv-london-trial__step--payment .qv-london-trial__number { color: rgba(255,255,255,.10); } .qv-london-trial__step h3 { margin: 0 0 11px; color: var(--qv-trial-green); font-size: 21px; line-height: 1.3; } .qv-london-trial__step p { margin: 0; color: var(--qv-trial-muted); font-size: 14px; line-height: 1.7; } .qv-london-trial__step--payment h3 { color: #ffffff; } .qv-london-trial__step--payment p { color: rgba(255,255,255,.78); } .qv-london-trial__result { display: block; margin-top: 18px; padding-top: 15px; color: var(--qv-trial-green); border-top: 1px solid #e5dece; font-size: 12px; font-weight: 800; line-height: 1.55; } .qv-london-trial__step--payment .qv-london-trial__result { color: var(--qv-trial-gold); border-color: rgba(255,255,255,.16); } .qv-london-trial__bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 25px; align-items: center; margin-top: 29px; padding: 24px 27px; background: #ffffff; border: 1px solid #e4ddca; border-radius: 17px; } .qv-london-trial__bottom h3 { margin: 0 0 6px; color: var(--qv-trial-dark); font-size: 20px; } .qv-london-trial__bottom p { margin: 0; color: var(--qv-trial-muted); font-size: 14px; line-height: 1.65; } .qv-london-trial__actions { display: flex; flex-wrap: wrap; gap: 10px; } .qv-london-trial__button { display: inline-flex; align-items: center; justify-content: center; min-height: 49px; padding: 12px 18px; border: 2px solid var(--qv-trial-green); border-radius: 10px; font-size: 14px; font-weight: 850; text-decoration: none !important; white-space: nowrap; transition: transform .2s ease, background .2s ease; } .qv-london-trial__button--primary { color: #ffffff !important; background: var(--qv-trial-green); } .qv-london-trial__button--secondary { color: var(--qv-trial-green) !important; background: #ffffff; } .qv-london-trial__button:hover { transform: translateY(-2px); } .qv-london-trial__button--primary:hover { color: #ffffff !important; background: var(--qv-trial-dark); } .qv-london-trial__button--secondary:hover { color: var(--qv-trial-dark) !important; background: var(--qv-trial-cream); } .qv-london-trial__button:focus-visible { outline: 3px solid var(--qv-trial-gold); outline-offset: 3px; } @media (max-width: 970px) { .qv-london-trial__journey { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qv-london-trial__step:nth-child(2)::after { display: none; } .qv-london-trial__step { min-height: 300px; } } @media (max-width: 720px) { .qv-london-trial__bottom { grid-template-columns: 1fr; align-items: start; } } @media (max-width: 580px) { .qv-london-trial { padding: 58px 17px; } .qv-london-trial__journey { grid-template-columns: 1fr; gap: 43px; } .qv-london-trial__step { min-height: auto; } .qv-london-trial__step:not(:last-child)::after, .qv-london-trial__step:nth-child(2)::after { content: "↓"; top: auto; right: 50%; bottom: -35px; display: grid; transform: translateX(50%); } .qv-london-trial__actions, .qv-london-trial__button { width: 100%; } } @media (prefers-reduced-motion: reduce) { .qv-london-trial__button { transition: none; } } .qv-london-bag, .qv-london-bag * { box-sizing: border-box; } .qv-london-bag { --qv-bag-green: #123f35; --qv-bag-dark: #092f27; --qv-bag-gold: #deb52e; --qv-bag-cream: #faf7ef; --qv-bag-text: #283c35; --qv-bag-muted: #64756f; position: relative; overflow: hidden; padding: clamp(70px, 8vw, 115px) 22px; background: #ffffff; font-family: inherit; } .qv-london-bag__container { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: clamp(38px, 6vw, 76px); align-items: center; width: 100%; max-width: 1200px; margin: 0 auto; } .qv-london-bag__visual { position: relative; min-height: 470px; display: grid; place-items: center; padding: 35px; overflow: hidden; color: #ffffff; background: radial-gradient(circle at 90% 10%, rgba(222,181,46,.24), transparent 33%), linear-gradient(145deg, var(--qv-bag-green), var(--qv-bag-dark)); border-radius: 27px; box-shadow: 0 28px 65px rgba(9,47,39,.20); } .qv-london-bag__visual::before, .qv-london-bag__visual::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.10); border-radius: 50%; } .qv-london-bag__visual::before { width: 310px; height: 310px; } .qv-london-bag__visual::after { width: 410px; height: 410px; } .qv-london-bag__folder { position: relative; z-index: 1; width: min(245px, 85%); padding: 36px 25px 27px; color: var(--qv-bag-dark); background: var(--qv-bag-gold); border-radius: 18px; box-shadow: 0 22px 45px rgba(0,0,0,.25); text-align: center; } .qv-london-bag__folder::before { content: ""; position: absolute; top: -21px; left: 0; width: 102px; height: 35px; background: var(--qv-bag-gold); border-radius: 13px 13px 0 0; } .qv-london-bag__folder-mark { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 17px; color: #ffffff; background: var(--qv-bag-green); border-radius: 17px; font-size: 25px; font-weight: 900; } .qv-london-bag__folder strong { display: block; margin-bottom: 6px; font-size: 22px; line-height: 1.2; } .qv-london-bag__folder span { display: block; font-size: 12px; font-weight: 700; line-height: 1.5; } .qv-london-bag__content { min-width: 0; } .qv-london-bag__eyebrow { display: inline-block; margin-bottom: 12px; color: #987000; font-size: 13px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; } .qv-london-bag h2 { margin: 0 0 18px; color: var(--qv-bag-dark); font-size: clamp(32px, 4.2vw, 53px); line-height: 1.12; letter-spacing: -.025em; } .qv-london-bag__intro { margin: 0 0 29px; color: var(--qv-bag-muted); font-size: 17px; line-height: 1.78; } .qv-london-bag__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; } .qv-london-bag__item { padding: 19px 17px; background: var(--qv-bag-cream); border: 1px solid #e6dfcf; border-radius: 14px; } .qv-london-bag__item-top { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; } .qv-london-bag__item-icon { display: grid; place-items: center; width: 39px; height: 39px; flex: 0 0 39px; color: #ffffff; background: var(--qv-bag-green); border-radius: 11px; font-size: 11px; font-weight: 900; letter-spacing: .02em; } .qv-london-bag__item h3 { margin: 0; color: var(--qv-bag-green); font-size: 17px; line-height: 1.3; } .qv-london-bag__item p { margin: 0; color: var(--qv-bag-muted); font-size: 13px; line-height: 1.65; } .qv-london-bag__privacy { display: grid; grid-template-columns: 37px 1fr; gap: 12px; align-items: start; margin-top: 17px; padding: 17px 18px; color: var(--qv-bag-text); background: #ffffff; border: 1px solid #e4dcc8; border-left: 4px solid var(--qv-bag-gold); border-radius: 12px; font-size: 13px; line-height: 1.65; } .qv-london-bag__privacy-icon { display: grid; place-items: center; width: 37px; height: 37px; color: var(--qv-bag-dark); background: var(--qv-bag-gold); border-radius: 10px; font-size: 16px; font-weight: 900; } .qv-london-bag__privacy strong { color: var(--qv-bag-dark); } .qv-london-bag__small { margin: 15px 0 0; color: var(--qv-bag-muted); font-size: 12px; line-height: 1.65; } @media (max-width: 900px) { .qv-london-bag__container { grid-template-columns: 1fr; } .qv-london-bag__visual { min-height: 370px; } } @media (max-width: 580px) { .qv-london-bag { padding: 58px 17px; } .qv-london-bag__visual { min-height: 330px; border-radius: 21px; } .qv-london-bag__items { grid-template-columns: 1fr; } } .qv-london-pricing, .qv-london-pricing * { box-sizing: border-box; } .qv-london-pricing { --qv-price-green: #123f35; --qv-price-dark: #092f27; --qv-price-gold: #deb52e; --qv-price-cream: #faf7ef; --qv-price-text: #283c35; --qv-price-muted: #64756f; position: relative; overflow: hidden; padding: clamp(70px, 8vw, 115px) 22px; background: radial-gradient(circle at 90% 5%, rgba(222,181,46,.15), transparent 25%), var(--qv-price-cream); font-family: inherit; } .qv-london-pricing__container { width: 100%; max-width: 1200px; margin: 0 auto; } .qv-london-pricing__header { max-width: 820px; margin: 0 auto 43px; text-align: center; } .qv-london-pricing__eyebrow { display: inline-block; margin-bottom: 12px; color: #987000; font-size: 13px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; } .qv-london-pricing h2 { margin: 0 0 17px; color: var(--qv-price-dark); font-size: clamp(32px, 4.2vw, 53px); line-height: 1.12; letter-spacing: -.025em; } .qv-london-pricing__intro { margin: 0; color: var(--qv-price-muted); font-size: 17px; line-height: 1.78; } .qv-london-pricing__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .qv-london-pricing__card { position: relative; display: flex; flex-direction: column; min-height: 470px; padding: 28px 24px 25px; background: #ffffff; border: 1px solid #e4ddca; border-radius: 21px; } .qv-london-pricing__card--featured { color: #ffffff; background: radial-gradient(circle at 100% 0%, rgba(222,181,46,.23), transparent 35%), var(--qv-price-green); border-color: var(--qv-price-green); box-shadow: 0 25px 55px rgba(18,63,53,.18); } .qv-london-pricing__label { display: inline-flex; align-self: flex-start; align-items: center; min-height: 29px; margin-bottom: 18px; padding: 6px 10px; color: var(--qv-price-green); background: rgba(222,181,46,.17); border: 1px solid rgba(222,181,46,.38); border-radius: 999px; font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; } .qv-london-pricing__card--featured .qv-london-pricing__label { color: var(--qv-price-dark); background: var(--qv-price-gold); border-color: var(--qv-price-gold); } .qv-london-pricing__card h3 { margin: 0 0 8px; color: var(--qv-price-green); font-size: 23px; line-height: 1.3; } .qv-london-pricing__description { min-height: 70px; margin: 0 0 21px; color: var(--qv-price-muted); font-size: 14px; line-height: 1.65; } .qv-london-pricing__card--featured h3 { color: #ffffff; } .qv-london-pricing__card--featured .qv-london-pricing__description { color: rgba(255,255,255,.76); } .qv-london-pricing__amount { padding: 17px 0; border-top: 1px solid #e7e0d1; border-bottom: 1px solid #e7e0d1; } .qv-london-pricing__amount + .qv-london-pricing__amount { border-top: 0; } .qv-london-pricing__amount span { display: block; margin-bottom: 4px; color: var(--qv-price-muted); font-size: 11px; font-weight: 750; text-transform: uppercase; } .qv-london-pricing__amount strong { display: block; color: var(--qv-price-dark); font-size: 33px; line-height: 1.1; } .qv-london-pricing__amount small { color: var(--qv-price-muted); font-size: 12px; font-weight: 700; } .qv-london-pricing__card--featured .qv-london-pricing__amount { border-color: rgba(255,255,255,.16); } .qv-london-pricing__card--featured .qv-london-pricing__amount span, .qv-london-pricing__card--featured .qv-london-pricing__amount small { color: rgba(255,255,255,.68); } .qv-london-pricing__card--featured .qv-london-pricing__amount strong { color: #ffffff; } .qv-london-pricing__features { display: grid; gap: 9px; margin: 21px 0 0; padding: 0; list-style: none; } .qv-london-pricing__features li { display: grid; grid-template-columns: 19px 1fr; gap: 8px; color: var(--qv-price-text); font-size: 13px; line-height: 1.55; } .qv-london-pricing__card--featured .qv-london-pricing__features li { color: rgba(255,255,255,.86); } .qv-london-pricing__check { display: grid; place-items: center; width: 19px; height: 19px; color: var(--qv-price-dark); background: var(--qv-price-gold); border-radius: 50%; font-size: 9px; font-weight: 900; } .qv-london-pricing__limited { margin-top: 15px; padding: 11px 12px; color: var(--qv-price-green); background: rgba(222,181,46,.14); border-radius: 9px; font-size: 12px; font-weight: 750; line-height: 1.55; } .qv-london-pricing__footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 25px; align-items: center; margin-top: 26px; padding: 25px 27px; background: #ffffff; border: 1px solid #e2dac6; border-radius: 17px; } .qv-london-pricing__footer h3 { margin: 0 0 6px; color: var(--qv-price-dark); font-size: 20px; } .qv-london-pricing__footer p { margin: 0; color: var(--qv-price-muted); font-size: 13px; line-height: 1.68; } .qv-london-pricing__actions { display: flex; flex-wrap: wrap; gap: 9px; } .qv-london-pricing__button { display: inline-flex; align-items: center; justify-content: center; min-height: 49px; padding: 12px 18px; border: 2px solid var(--qv-price-green); border-radius: 10px; font-size: 13px; font-weight: 850; text-align: center; text-decoration: none !important; white-space: nowrap; transition: transform .2s ease, background .2s ease; } .qv-london-pricing__button--primary { color: #ffffff !important; background: var(--qv-price-green); } .qv-london-pricing__button--secondary { color: var(--qv-price-green) !important; background: #ffffff; } .qv-london-pricing__button:hover { transform: translateY(-2px); } .qv-london-pricing__button--primary:hover { color: #ffffff !important; background: var(--qv-price-dark); } .qv-london-pricing__button--secondary:hover { color: var(--qv-price-dark) !important; background: var(--qv-price-cream); } .qv-london-pricing__button:focus-visible { outline: 3px solid var(--qv-price-gold); outline-offset: 3px; } .qv-london-pricing__disclaimer { max-width: 930px; margin: 17px auto 0; color: var(--qv-price-muted); font-size: 12px; line-height: 1.7; text-align: center; } @media (max-width: 950px) { .qv-london-pricing__grid { grid-template-columns: 1fr 1fr; } .qv-london-pricing__card:last-child { grid-column: 1 / -1; min-height: auto; } } @media (max-width: 720px) { .qv-london-pricing__footer { grid-template-columns: 1fr; align-items: start; } } @media (max-width: 580px) { .qv-london-pricing { padding: 58px 17px; } .qv-london-pricing__grid { grid-template-columns: 1fr; } .qv-london-pricing__card, .qv-london-pricing__card:last-child { grid-column: auto; min-height: auto; } .qv-london-pricing__description { min-height: auto; } .qv-london-pricing__actions, .qv-london-pricing__button { width: 100%; } } @media (prefers-reduced-motion: reduce) { .qv-london-pricing__button { transition: none; } } .qv-london-faq, .qv-london-faq * { box-sizing: border-box; } .qv-london-faq { --qv-faq-green: #123f35; --qv-faq-dark: #092f27; --qv-faq-gold: #deb52e; --qv-faq-cream: #faf7ef; --qv-faq-text: #283c35; --qv-faq-muted: #64756f; position: relative; overflow: hidden; padding: clamp(70px, 8vw, 115px) 22px; background: #ffffff; font-family: inherit; } .qv-london-faq__container { width: 100%; max-width: 1100px; margin: 0 auto; } .qv-london-faq__header { max-width: 800px; margin: 0 auto 42px; text-align: center; } .qv-london-faq__eyebrow { display: inline-block; margin-bottom: 12px; color: #987000; font-size: 13px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; } .qv-london-faq h2 { margin: 0 0 17px; color: var(--qv-faq-dark); font-size: clamp(32px, 4.2vw, 53px); line-height: 1.12; letter-spacing: -.025em; } .qv-london-faq__intro { margin: 0; color: var(--qv-faq-muted); font-size: 17px; line-height: 1.78; } .qv-london-faq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; align-items: start; } .qv-london-faq__column { display: grid; gap: 13px; } .qv-london-faq details { overflow: hidden; background: var(--qv-faq-cream); border: 1px solid #e5decc; border-radius: 14px; transition: border-color .2s ease, box-shadow .2s ease; } .qv-london-faq details[open] { background: #ffffff; border-color: rgba(222,181,46,.70); box-shadow: 0 15px 35px rgba(18,63,53,.08); } .qv-london-faq summary { position: relative; display: flex; align-items: center; min-height: 78px; padding: 18px 58px 18px 20px; color: var(--qv-faq-green); font-size: 15px; font-weight: 800; line-height: 1.45; cursor: pointer; list-style: none; } .qv-london-faq summary::-webkit-details-marker { display: none; } .qv-london-faq summary::after { content: "+"; position: absolute; top: 50%; right: 18px; display: grid; place-items: center; width: 30px; height: 30px; color: var(--qv-faq-dark); background: var(--qv-faq-gold); border-radius: 50%; font-size: 20px; font-weight: 700; transform: translateY(-50%); } .qv-london-faq details[open] summary::after { content: "−"; } .qv-london-faq summary:focus-visible { outline: 3px solid var(--qv-faq-gold); outline-offset: -3px; } .qv-london-faq__answer { padding: 0 20px 20px; color: var(--qv-faq-muted); font-size: 14px; line-height: 1.75; } .qv-london-faq__answer p { margin: 0; } .qv-london-faq__answer a { color: var(--qv-faq-green); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; } .qv-london-faq__answer strong { color: var(--qv-faq-dark); } .qv-london-faq__bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 25px; align-items: center; margin-top: 27px; padding: 25px 27px; color: #ffffff; background: radial-gradient(circle at 100% 0%, rgba(222,181,46,.22), transparent 38%), var(--qv-faq-green); border-radius: 18px; } .qv-london-faq__bottom h3 { margin: 0 0 6px; color: #ffffff; font-size: 21px; } .qv-london-faq__bottom p { margin: 0; color: rgba(255,255,255,.76); font-size: 14px; line-height: 1.65; } .qv-london-faq__button { display: inline-flex; align-items: center; justify-content: center; min-height: 49px; padding: 12px 19px; color: var(--qv-faq-dark) !important; background: var(--qv-faq-gold); border: 2px solid var(--qv-faq-gold); border-radius: 10px; font-size: 14px; font-weight: 850; text-decoration: none !important; white-space: nowrap; transition: transform .2s ease, background .2s ease; } .qv-london-faq__button:hover { color: var(--qv-faq-dark) !important; background: #edca54; transform: translateY(-2px); } .qv-london-faq__button:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; } @media (max-width: 780px) { .qv-london-faq__grid { grid-template-columns: 1fr; } .qv-london-faq__bottom { grid-template-columns: 1fr; align-items: start; } } @media (max-width: 520px) { .qv-london-faq { padding: 58px 17px; } .qv-london-faq summary { min-height: 72px; padding: 17px 53px 17px 17px; } .qv-london-faq summary::after { right: 14px; } .qv-london-faq__answer { padding: 0 17px 18px; } .qv-london-faq__button { width: 100%; } } @media (prefers-reduced-motion: reduce) { .qv-london-faq details, .qv-london-faq__button { transition: none; } } .qv-london-final, .qv-london-final * { box-sizing: border-box; } .qv-london-final { --qv-final-green: #123f35; --qv-final-dark: #082b24; --qv-final-gold: #deb52e; --qv-final-cream: #faf7ef; padding: 0 22px clamp(70px, 8vw, 110px); background: #ffffff; font-family: inherit; } .qv-london-final__container { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: clamp(45px, 7vw, 80px) clamp(25px, 6vw, 72px); overflow: hidden; color: #ffffff; background: radial-gradient(circle at 92% 5%, rgba(222,181,46,.28), transparent 28%), radial-gradient(circle at 5% 100%, rgba(255,255,255,.07), transparent 30%), linear-gradient(135deg, var(--qv-final-green), var(--qv-final-dark)); border-radius: 28px; box-shadow: 0 30px 70px rgba(8,43,36,.20); } .qv-london-final__container::before { content: "LONDON"; position: absolute; right: -10px; bottom: -18px; color: rgba(255,255,255,.035); font-size: clamp(90px, 16vw, 205px); font-weight: 900; line-height: .85; letter-spacing: -.04em; } .qv-london-final__content { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; text-align: center; } .qv-london-final__eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 17px; padding: 8px 13px; color: var(--qv-final-gold); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; font-size: 12px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; } .qv-london-final__eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--qv-final-gold); border-radius: 50%; box-shadow: 0 0 0 5px rgba(222,181,46,.14); } .qv-london-final h2 { max-width: 760px; margin: 0 auto 17px; color: #ffffff; font-size: clamp(34px, 5vw, 60px); line-height: 1.08; letter-spacing: -.03em; } .qv-london-final__intro { max-width: 720px; margin: 0 auto 28px; color: rgba(255,255,255,.78); font-size: 17px; line-height: 1.78; } .qv-london-final__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; } .qv-london-final__button { display: inline-flex; align-items: center; justify-content: center; min-height: 53px; padding: 13px 21px; border: 2px solid var(--qv-final-gold); border-radius: 11px; font-size: 14px; font-weight: 850; text-align: center; text-decoration: none !important; transition: transform .2s ease, background .2s ease; } .qv-london-final__button--primary { color: var(--qv-final-dark) !important; background: var(--qv-final-gold); } .qv-london-final__button--secondary { color: #ffffff !important; background: transparent; } .qv-london-final__button:hover { transform: translateY(-2px); } .qv-london-final__button--primary:hover { color: var(--qv-final-dark) !important; background: #edca54; } .qv-london-final__button--secondary:hover { color: var(--qv-final-dark) !important; background: var(--qv-final-gold); } .qv-london-final__button:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; } .qv-london-final__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin: 29px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,.14); list-style: none; } .qv-london-final__trust li { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.82); font-size: 13px; font-weight: 700; } .qv-london-final__check { display: grid; place-items: center; width: 20px; height: 20px; color: var(--qv-final-dark); background: var(--qv-final-gold); border-radius: 50%; font-size: 10px; font-weight: 900; } .qv-london-final__courses { display: inline-block; margin-top: 23px; color: rgba(255,255,255,.74) !important; font-size: 13px; font-weight: 750; text-decoration: underline !important; text-decoration-color: var(--qv-final-gold) !important; text-underline-offset: 5px; } .qv-london-final__courses:hover { color: #ffffff !important; } @media (max-width: 580px) { .qv-london-final { padding: 0 17px 65px; } .qv-london-final__container { padding: 50px 20px; border-radius: 21px; } .qv-london-final__actions { display: grid; } .qv-london-final__button { width: 100%; } .qv-london-final__trust { display: grid; justify-content: start; max-width: 270px; margin-left: auto; margin-right: auto; text-align: left; } } @media (prefers-reduced-motion: reduce) { .qv-london-final__button { transition: none; } }