/* ============================================ Idealpod — CAMPAIGN aesthetic (opt-in) Activated by adding `ip-campaign` to Targets the Doc M Refurb Pack flow first, designed to be expandable to other pages later. ============================================ */ body.ip-campaign { background: radial-gradient(ellipse at 0% 0%, rgba(0, 239, 208, 0.10) 0%, transparent 40%), radial-gradient(ellipse at 100% 30%, rgba(132, 228, 244, 0.22) 0%, transparent 45%), radial-gradient(ellipse at 50% 100%, rgba(0, 172, 234, 0.08) 0%, transparent 50%), linear-gradient(180deg, #EAF8FB 0%, #DEF1F4 100%); background-attachment: fixed; min-height: 100vh; } /* Nav is intentionally NOT styled here — the campaign aesthetic inherits the default Spec nav from styles.css to keep the menu bar consistent across the whole site. */ /* ============================================ SECTION-LEVEL CAMPAIGN SCOPE For when you want the campaign style applied to a single section rather than the whole body (e.g. home page hero). ============================================ */ .cmp-scope { position: relative; background: radial-gradient(ellipse at 0% 0%, rgba(0, 239, 208, 0.10) 0%, transparent 40%), radial-gradient(ellipse at 100% 30%, rgba(132, 228, 244, 0.22) 0%, transparent 45%), radial-gradient(ellipse at 50% 100%, rgba(0, 172, 234, 0.08) 0%, transparent 50%), linear-gradient(180deg, #EAF8FB 0%, #DEF1F4 100%); } /* ============================================ TYPOGRAPHY OVERRIDES — bolder, two-tone ============================================ */ body.ip-campaign .ip-display, .cmp-scope .ip-display { font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; color: var(--ip-teal); } body.ip-campaign .ip-display em, .cmp-scope .ip-display em { font-style: normal; font-weight: 700; background: none; -webkit-background-clip: initial; background-clip: initial; color: #00C5CE; } body.ip-campaign .ip-eyebrow, .cmp-scope .ip-eyebrow { font-family: var(--ip-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.18em; color: #00ACEA; text-transform: uppercase; } /* Campaign button refinements */ body.ip-campaign .ip-btn--primary, .cmp-scope .ip-btn--primary { background: linear-gradient(135deg, #00E0CD 0%, #00B5DE 100%); box-shadow: 0 8px 20px rgba(0, 172, 234, 0.28); border-radius: 999px; padding: 16px 28px; font-size: 14px; font-weight: 600; } body.ip-campaign .ip-btn--primary:hover, .cmp-scope .ip-btn--primary:hover { box-shadow: 0 12px 28px rgba(0, 172, 234, 0.36); transform: translateY(-2px); } body.ip-campaign .ip-btn--ghost, body.ip-campaign .ip-btn--ghost-dark, .cmp-scope .ip-btn--ghost, .cmp-scope .ip-btn--ghost-dark { background: #fff; color: #00ACEA; border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 6px 18px rgba(0, 172, 234, 0.08); border-radius: 999px; padding: 16px 28px; font-size: 14px; font-weight: 600; } body.ip-campaign .ip-btn--ghost:hover, body.ip-campaign .ip-btn--ghost-dark:hover, .cmp-scope .ip-btn--ghost:hover, .cmp-scope .ip-btn--ghost-dark:hover { border-color: #00ACEA; transform: translateY(-2px); } /* ============================================ CAMPAIGN HERO — circular photo ============================================ */ .cmp-hero { max-width: 1280px; margin: 0 auto; padding: 80px var(--ip-pad) 100px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .cmp-hero__title { font-size: clamp(40px, 5.5vw, 64px); margin-bottom: 28px; } .cmp-hero__lede { font-size: 17px; line-height: 1.65; color: var(--ip-slate); margin-bottom: 36px; max-width: 520px; } .cmp-hero__lede strong { color: var(--ip-teal); font-weight: 600; } .cmp-hero__lede .cmp-accent { color: #00ACEA; font-weight: 600; } .cmp-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; } /* Pod / teardrop mask — matches the IdealPod logo pill silhouette. The shape is defined as an SVG in docm.html; we reference it via clip-path: url(#ip-pod-mask). */ .cmp-circle { position: relative; width: 100%; max-width: 620px; aspect-ratio: 1 / 1; margin-left: auto; -webkit-clip-path: url(#ip-pod-mask); clip-path: url(#ip-pod-mask); filter: drop-shadow(0 24px 60px rgba(0, 172, 234, 0.22)) drop-shadow(0 8px 20px rgba(11, 92, 96, 0.10)); background: var(--ip-teal-700); overflow: hidden; } .cmp-circle img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; display: block; } .cmp-circle--placeholder::before { content: attr(data-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--ip-mono); font-size: 12px; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.7); text-align: center; padding: 24px; } @media (max-width: 1000px) { .cmp-hero { grid-template-columns: 1fr; padding: 56px var(--ip-pad) 64px; gap: 48px; } .cmp-circle { max-width: 440px; margin: 0 auto; } } /* ============================================ SOFT CARD SYSTEM ============================================ */ .cmp-card { background: #fff; border-radius: 24px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 12px 32px rgba(0, 172, 234, 0.08), 0 2px 8px rgba(11, 92, 96, 0.04); overflow: hidden; transition: transform 320ms var(--ip-ease), box-shadow 320ms var(--ip-ease); } .cmp-card:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 24px 48px rgba(0, 172, 234, 0.16), 0 4px 12px rgba(11, 92, 96, 0.06); } /* ============================================ PROBLEM SECTION — three-up icon row ============================================ */ .cmp-problem { max-width: 1280px; margin: 0 auto; padding: 40px var(--ip-pad) 100px; } .cmp-problem__head { margin-bottom: 56px; max-width: 720px; } .cmp-problem__title { font-size: clamp(28px, 3.5vw, 40px); margin: 18px 0 24px; } .cmp-problem__lede { font-size: 16px; line-height: 1.7; color: var(--ip-slate); } .cmp-problem__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .cmp-feature { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; } .cmp-icon { width: 56px; height: 56px; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 8px 22px rgba(0, 172, 234, 0.08), 0 2px 6px rgba(11, 92, 96, 0.04); color: var(--ip-teal); flex-shrink: 0; } .cmp-icon svg { width: 26px; height: 26px; } .cmp-feature__h { font-size: 18px; font-weight: 600; color: var(--ip-teal); margin: 0 0 8px; letter-spacing: -0.005em; } .cmp-feature__b { font-size: 14.5px; line-height: 1.65; color: var(--ip-slate); margin: 0; } @media (max-width: 900px) { .cmp-problem__grid { grid-template-columns: 1fr; gap: 24px; } } /* ============================================ TURN-KEY SECTION — co-branding + card grid ============================================ */ .cmp-turnkey { max-width: 1280px; margin: 0 auto; padding: 80px var(--ip-pad); } .cmp-turnkey__head { display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: end; margin-bottom: 56px; } .cmp-turnkey__title { font-size: clamp(28px, 3.5vw, 44px); margin: 16px 0 0; max-width: 560px; } .cmp-cobrand { display: flex; align-items: center; gap: 28px; background: rgba(255, 255, 255, 0.5); border-radius: 18px; padding: 18px 24px; box-shadow: 0 8px 20px rgba(0, 172, 234, 0.05); } .cmp-cobrand__col { text-align: left; max-width: 200px; } .cmp-cobrand__col img { height: 40px; width: auto; margin-bottom: 10px; } /* Armitage Shanks logo is a stacked two-line script — give it a little more height than the horizontal IdealPod lockup to balance optically. */ .cmp-cobrand__col img.cmp-cobrand__as { height: 52px; } .cmp-cobrand__line { font-size: 11px; line-height: 1.45; color: var(--ip-slate); } .cmp-cobrand__x { font-family: var(--ip-sans); font-size: 18px; color: var(--ip-slate-soft); font-weight: 300; } .cmp-turnkey__row { display: grid; gap: 24px; margin-bottom: 24px; } .cmp-turnkey__row--2 { grid-template-columns: 1fr 1fr; } .cmp-turnkey__row--3 { grid-template-columns: 1fr 1fr 1fr; } .cmp-turnkey__row:last-child { margin-bottom: 0; } .cmp-turnkey__note { margin: 20px 0 0; font-family: var(--ip-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ip-slate-soft); } .cmp-tk-card { display: grid; grid-template-columns: 1fr 1.2fr; align-items: stretch; } .cmp-tk-card__img { position: relative; background: var(--ip-paper-2); min-height: 220px; overflow: hidden; } .cmp-tk-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .cmp-tk-card__body { padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; } .cmp-tk-card__h { font-size: 17px; font-weight: 600; color: var(--ip-teal); margin: 0 0 12px; line-height: 1.3; } .cmp-tk-card__b { font-size: 14px; line-height: 1.6; color: var(--ip-slate); margin: 0; } /* Compact card variant (used in 3-up row) */ .cmp-turnkey__row--3 .cmp-tk-card { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .cmp-turnkey__row--3 .cmp-tk-card__img { min-height: 200px; } .cmp-turnkey__row--3 .cmp-tk-card__body { padding: 24px 26px 28px; } .cmp-turnkey__row--3 .cmp-tk-card__h { font-size: 16px; } .cmp-turnkey__row--3 .cmp-tk-card__b { font-size: 13.5px; } @media (max-width: 1000px) { .cmp-turnkey__head { grid-template-columns: 1fr; gap: 28px; } .cmp-turnkey__row--2, .cmp-turnkey__row--3 { grid-template-columns: 1fr; } .cmp-tk-card { grid-template-columns: 1fr; } .cmp-tk-card__img { min-height: 240px; } } /* ============================================ COMBINATIONS — colour picker carousel ============================================ */ .cmp-combos { max-width: 1280px; margin: 0 auto; padding: 60px var(--ip-pad) 80px; display: grid; grid-template-columns: 360px 1fr; gap: 64px; align-items: center; } .cmp-combos__title { font-size: clamp(28px, 3.5vw, 40px); margin: 16px 0 24px; } .cmp-combos__lede { font-size: 15px; line-height: 1.65; color: var(--ip-slate); margin-bottom: 28px; } .cmp-combos__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .cmp-combo { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 10px 28px rgba(0, 172, 234, 0.08), 0 2px 6px rgba(11, 92, 96, 0.04); transition: transform 280ms var(--ip-ease); } .cmp-combo:hover { transform: translateY(-4px); } .cmp-combo__img { position: relative; width: 100%; aspect-ratio: 3 / 4; background: var(--ip-paper-2); overflow: hidden; } .cmp-combo__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .cmp-combo__meta { padding: 16px 20px 20px; font-size: 13px; line-height: 1.6; color: var(--ip-slate); } .cmp-combo__meta strong { color: var(--ip-teal); font-weight: 600; } .cmp-combos__dots { display: flex; gap: 8px; justify-content: center; margin-top: 24px; grid-column: 2 / 3; } .cmp-combos__dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(11, 92, 96, 0.2); transition: background 200ms var(--ip-ease); } .cmp-combos__dot.is-active { background: var(--ip-teal); } @media (max-width: 1000px) { .cmp-combos { grid-template-columns: 1fr; gap: 32px; padding: 40px var(--ip-pad) 60px; } .cmp-combos__dots { grid-column: 1 / -1; } .cmp-combos__strip { grid-template-columns: 1fr; } } /* ============================================ INSTALL — video card + bullet list ============================================ */ .cmp-install { max-width: 1280px; margin: 0 auto; padding: 60px var(--ip-pad) 100px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; } .cmp-install__video { position: relative; border-radius: 20px; aspect-ratio: 16 / 11; background: linear-gradient(135deg, #BFE6E8 0%, #8FD4D8 100%); overflow: hidden; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 24px 60px rgba(0, 172, 234, 0.18), 0 6px 18px rgba(11, 92, 96, 0.08); cursor: pointer; } .cmp-install__video img { width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: luminosity; opacity: 0.78; } .cmp-install__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; } .cmp-install__play svg { width: 64px; height: 64px; background: #fff; border-radius: 50%; padding: 18px; box-shadow: 0 12px 32px rgba(0, 172, 234, 0.28); color: #00ACEA; } /* Click-to-play state: poster + button hidden, full-colour video fills the card. Video is 16:9, so the card flips from 16:11 to 16:9 to avoid crop/letterboxing. */ .cmp-install__video.is-playing { aspect-ratio: 16 / 9; cursor: default; background: #000; } .cmp-install__video.is-playing img, .cmp-install__video.is-playing > .cmp-install__play { display: none; } .cmp-install__player { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border: 0; background: #000; } .cmp-install__title { font-size: clamp(28px, 3.5vw, 40px); margin: 16px 0 24px; } .cmp-install__lede { font-size: 15px; line-height: 1.65; color: var(--ip-slate); margin-bottom: 32px; } .cmp-install__list { display: grid; gap: 24px; } @media (max-width: 1000px) { .cmp-install { grid-template-columns: 1fr; gap: 40px; padding: 40px var(--ip-pad) 60px; } } /* ============================================ ENQUIRY — soft form card ============================================ */ .cmp-enquire { max-width: 1280px; margin: 0 auto 100px; padding: 60px var(--ip-pad); display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; background: radial-gradient(ellipse at 80% 50%, rgba(0, 239, 208, 0.16) 0%, transparent 60%), linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(232, 248, 251, 0.4) 100%); border-radius: 32px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 24px 60px rgba(0, 172, 234, 0.10); } .cmp-enquire__title { font-size: clamp(28px, 3.5vw, 40px); margin: 16px 0 24px; } .cmp-enquire__lede { font-size: 15px; line-height: 1.65; color: var(--ip-slate); } .cmp-form { background: #fff; border-radius: 20px; padding: 36px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 12px 32px rgba(0, 172, 234, 0.10); } .cmp-form__h { font-size: 22px; font-weight: 600; color: var(--ip-teal); margin: 0 0 8px; } .cmp-form__sub { font-size: 14px; line-height: 1.6; color: var(--ip-slate); margin: 0 0 24px; } .cmp-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .cmp-field { position: relative; } .cmp-field input { width: 100%; background: #F4FBFC; border: 1px solid #E0EEF1; border-radius: 999px; padding: 16px 22px; font-family: var(--ip-sans); font-size: 14.5px; color: var(--ip-ink); outline: none; transition: border-color 200ms var(--ip-ease), background 200ms var(--ip-ease); } .cmp-field input::placeholder { color: var(--ip-slate-soft); } .cmp-field input:focus { background: #fff; border-color: #00ACEA; } .cmp-field label { position: absolute; top: -8px; left: 18px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #00ACEA; background: linear-gradient(180deg, transparent 50%, #fff 50%); padding: 0 8px; pointer-events: none; opacity: 0; transition: opacity 200ms var(--ip-ease); } .cmp-field input:focus + label, .cmp-field input:not(:placeholder-shown) + label { opacity: 1; } /* Select fields (Job Title / Business Sector) — match the pill inputs, with the same floating-label behaviour driven by [data-filled] in JS. */ .cmp-field select { width: 100%; background-color: #F4FBFC; border: 1px solid #E0EEF1; border-radius: 999px; padding: 16px 46px 16px 22px; font-family: var(--ip-sans); font-size: 14.5px; color: var(--ip-slate-soft); outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2300ACEA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; transition: border-color 200ms var(--ip-ease), background-color 200ms var(--ip-ease); } .cmp-field select:focus { background-color: #fff; border-color: #00ACEA; } .cmp-field select[data-filled] { color: var(--ip-ink); } .cmp-field select option { color: var(--ip-ink); } .cmp-field select:focus + label, .cmp-field select[data-filled] + label { opacity: 1; } /* Full-width row used by the conditional "Please specify" fields */ .cmp-form__row--single { grid-template-columns: 1fr; } .cmp-other[hidden] { display: none; } .cmp-form__bottom { display: flex; justify-content: flex-end; margin-top: 24px; } .cmp-form .ip-btn--primary { padding: 14px 32px; } @media (max-width: 1000px) { .cmp-enquire { grid-template-columns: 1fr; padding: 40px var(--ip-pad); } .cmp-form__row { grid-template-columns: 1fr; } } /* ============================================ FOOTER bar (campaign variant) ============================================ */ body.ip-campaign .ip-footer { background: linear-gradient(135deg, #0B5C60 0%, #134B4F 100%); margin-top: 0; }