/* ========================================================================== Webinar Learning Material — Launchpad styles Business Intelliguide Consulting Everything here is namespaced twice over, so this file can never collide with styles.css: 1. every custom property is prefixed --lp- 2. every selector is prefixed .lp- and lives inside .lp The original launchpad stylesheet used generic names (.hero, .footer, .section-label, --shadow-sm …). Several of those already exist in styles.css with different meanings, which is why they were renamed rather than merged. ========================================================================== */ /* The palette is declared for both scopes on purpose: .lp wraps the page content, while .lp-gate is appended to by auth-gate.js and therefore sits OUTSIDE .lp. Declaring it only on .lp would leave every var() in the dialog unresolved. */ .lp, .lp-gate { /* Brand — matched to the launchpad artwork */ --lp-blue: #1b75bb; --lp-navy: #14375f; --lp-grey: #5b6770; --lp-ink: #1d2530; --lp-muted: #667180; --lp-line: #e2e7ee; --lp-bg: #f4f6f9; --lp-card: #ffffff; /* Unit colours (sampled from the agenda slide) */ --lp-u1: #ffc000; --lp-u2: #5aa2ae; --lp-u3: #accbf9; --lp-u4: #d4e5f7; --lp-u5: #bddadf; --lp-u6: #c4bcc6; --lp-u1-ink: #5a4300; --lp-u2-ink: #ffffff; --lp-u3-ink: #1a3a63; --lp-u4-ink: #1a3a63; --lp-u5-ink: #1c4a52; --lp-u6-ink: #3f3646; --lp-radius: 14px; --lp-shadow: 0 2px 6px rgba(20,55,95,.06), 0 12px 30px rgba(20,55,95,.08); --lp-shadow-sm: 0 1px 3px rgba(20,55,95,.08); } .lp { color: var(--lp-ink); line-height: 1.55; background: var(--lp-bg); /* full-bleed, so no white gutters at wide widths */ } /* -------------------------------------------------------------- Layout */ .lp-wrap { max-width: 1280px; margin: 0 auto; padding: 34px 28px 60px; } .lp-label { font-size: .78rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--lp-muted); font-weight: 600; margin: 0 0 18px; } /* Breadcrumb inside the page (the site header supplies the real nav) */ .lp-crumbs { font-size: .9rem; color: var(--lp-muted); display: flex; align-items: center; gap: 8px; margin-bottom: 18px; } .lp-crumbs a { font-weight: 600; color: var(--lp-navy); cursor: pointer; } .lp-crumbs a:hover { color: var(--lp-blue); } .lp-crumbs .lp-sep { opacity: .5; } /* -------------------------------------------------------------- Banner */ .lp-banner { color: #fff; } .lp-banner-inner { max-width: 1280px; margin: 0 auto; padding: 34px 28px 36px; } .lp-kicker { text-transform: uppercase; letter-spacing: 2px; font-size: .72rem; font-weight: 700; opacity: .9; margin: 0 0 8px; } .lp-banner h1 { margin: 0 0 10px; font-size: 1.9rem; font-weight: 700; line-height: 1.2; } .lp-banner p { margin: 0; max-width: 760px; opacity: .93; } .lp-u1-banner { background: linear-gradient(135deg,#e0a800,#ffc000); color: var(--lp-u1-ink); } .lp-u2-banner { background: linear-gradient(135deg,#3f7f8b,#5aa2ae); } .lp-u3-banner { background: linear-gradient(135deg,#6f9fe0,#accbf9); color: var(--lp-u3-ink); } .lp-u4-banner { background: linear-gradient(135deg,#8ab4e3,#d4e5f7); color: var(--lp-u4-ink); } .lp-u5-banner { background: linear-gradient(135deg,#7fb4bd,#bddadf); color: var(--lp-u5-ink); } .lp-u6-banner { background: linear-gradient(135deg,#9b8fa3,#c4bcc6); color: var(--lp-u6-ink); } /* -------------------------------------------------------------- Overview grid */ .lp-units { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; } .lp-unit { background: var(--lp-card); border-radius: var(--lp-radius); box-shadow: var(--lp-shadow); overflow: hidden; display: flex; flex-direction: column; transition: transform .16s ease, box-shadow .16s ease; border: 1px solid var(--lp-line); cursor: pointer; } .lp-unit:hover { transform: translateY(-4px); box-shadow: 0 6px 14px rgba(20,55,95,.12), 0 22px 44px rgba(20,55,95,.14); } .lp-unit-head { padding: 22px 16px 20px; text-align: center; min-height: 132px; display: flex; flex-direction: column; justify-content: center; gap: 4px; } .lp-u-no { font-size: .74rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; opacity: .8; } .lp-u-title { font-size: 1.18rem; font-weight: 700; line-height: 1.2; } .lp-unit-list { list-style: none; margin: 0; padding: 14px 12px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .lp-unit-list li { background: #fff; border: 1px solid var(--lp-line); border-radius: 8px; padding: 9px 11px; font-size: .82rem; color: var(--lp-ink); text-align: center; box-shadow: var(--lp-shadow-sm); } .lp-unit-list li.lp-hands { background: #f7f9fc; font-weight: 600; color: var(--lp-muted); } .lp-unit-cta { margin: 4px 12px 16px; text-align: center; padding: 10px; border-radius: 9px; font-weight: 600; font-size: .86rem; background: rgba(0,0,0,.04); color: var(--lp-navy); transition: background .16s ease, color .16s ease; } .lp-unit:hover .lp-unit-cta { background: var(--lp-blue); color: #fff; } .lp-u1 .lp-unit-head { background: var(--lp-u1); color: var(--lp-u1-ink); } .lp-u2 .lp-unit-head { background: var(--lp-u2); color: var(--lp-u2-ink); } .lp-u3 .lp-unit-head { background: var(--lp-u3); color: var(--lp-u3-ink); } .lp-u4 .lp-unit-head { background: var(--lp-u4); color: var(--lp-u4-ink); } .lp-u5 .lp-unit-head { background: var(--lp-u5); color: var(--lp-u5-ink); } .lp-u6 .lp-unit-head { background: var(--lp-u6); color: var(--lp-u6-ink); } /* -------------------------------------------------------------- Chapters */ /* Single column on purpose: chapters carry a deep-dive list underneath, which needs the full width to stay readable. */ .lp-chapters { display: grid; grid-template-columns: 1fr; gap: 18px; } .lp-chapter { background: var(--lp-card); border: 1px solid var(--lp-line); border-left: 5px solid var(--lp-blue); border-radius: var(--lp-radius); box-shadow: var(--lp-shadow); padding: 20px 22px; display: flex; flex-direction: column; } .lp-accent-u1 { border-left-color: var(--lp-u1); } .lp-accent-u2 { border-left-color: var(--lp-u2); } .lp-accent-u3 { border-left-color: #6f9fe0; } .lp-accent-u4 { border-left-color: #8ab4e3; } .lp-accent-u5 { border-left-color: #7fb4bd; } .lp-accent-u6 { border-left-color: #9b8fa3; } .lp-chapter.lp-hands-on { background: #f7f9fc; } .lp-ch-no { font-size: .72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--lp-muted); margin: 0 0 4px; } .lp-chapter h3 { margin: 0 0 8px; font-size: 1.12rem; color: var(--lp-navy); font-weight: 700; } .lp-chapter p { margin: 0 0 16px; font-size: .92rem; color: var(--lp-muted); flex: 1; } /* -------------------------------------------------------------- Resource buttons */ .lp-resources { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .lp-res { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 8px; font-size: .82rem; font-weight: 600; border: 1px solid var(--lp-line); background: #fff; color: var(--lp-navy); transition: all .14s ease; cursor: pointer; position: relative; } .lp-res svg { width: 15px; height: 15px; flex: 0 0 auto; } .lp-res.lp-video { border-color: #d6e3f4; } .lp-res.lp-exercise { border-color: #d9ecdf; } .lp-res.lp-material { border-color: #e6e0f0; } .lp-res.lp-video:hover { background: var(--lp-blue); color: #fff; border-color: var(--lp-blue); } .lp-res.lp-exercise:hover { background: #2e8b57; color: #fff; border-color: #2e8b57; } .lp-res.lp-material:hover { background: #6a4fa3; color: #fff; border-color: #6a4fa3; } /* -------------------------------------------------------------- Deep dives Optional rows underneath a chapter: a type badge, a title and its own buttons. Generated from the DEEP_DIVES table in build_webinar_pages.py. */ .lp-dd { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--lp-line); } .lp-dd-label { font-size: .7rem; text-transform: uppercase; letter-spacing: 1.3px; font-weight: 700; color: var(--lp-muted); margin: 0 0 10px; } .lp-dd-row { display: grid; grid-template-columns: 104px 1fr auto; align-items: center; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--lp-line); } .lp-dd-row:last-child { border-bottom: none; padding-bottom: 0; } .lp-dd-type { display: inline-block; text-align: center; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; padding: 4px 8px; border-radius: 5px; white-space: nowrap; } .lp-dd-deep { background: #e7f0fa; color: #1b5c93; } .lp-dd-exercise { background: #e6f4ea; color: #256d45; } .lp-dd-text { font-size: .9rem; font-weight: 600; color: var(--lp-ink); } .lp-dd-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } /* Deep-dive buttons are the chapter buttons, one size down. */ .lp-dd .lp-res { padding: 6px 11px; font-size: .77rem; } .lp-dd .lp-res svg { width: 13px; height: 13px; } /* Small padlock shown on protected links while the visitor is not unlocked. Purely a hint — the link stays fully clickable, as requested. */ .lp-res .lp-lock { width: 11px; height: 11px; margin-left: 1px; opacity: .55; } .lp.lp-unlocked .lp-res .lp-lock { display: none; } /* …except on a unit the signed-in participant did not book: the padlock is the honest hint there, so it comes back. */ .lp.lp-unlocked.lp-unit-denied .lp-res .lp-lock { display: inline-block; } /* -------------------------------------------------------------- Unit nav */ .lp-back { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 600; color: var(--lp-navy); margin-bottom: 22px; cursor: pointer; } .lp-back:hover { color: var(--lp-blue); } .lp-unitnav { display: flex; justify-content: space-between; gap: 14px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--lp-line); } .lp-unitnav a { display: flex; flex-direction: column; padding: 12px 18px; border: 1px solid var(--lp-line); border-radius: 10px; background: #fff; min-width: 200px; box-shadow: var(--lp-shadow-sm); transition: all .14s ease; cursor: pointer; } .lp-unitnav a:hover { border-color: var(--lp-blue); box-shadow: var(--lp-shadow); } .lp-unitnav a.lp-next { text-align: right; } .lp-nav-label { font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--lp-muted); } .lp-nav-title { font-weight: 700; color: var(--lp-navy); font-size: .95rem; } .lp-unitnav .lp-spacer { visibility: hidden; } /* ========================================================================== ACCESS GATE ========================================================================== */ /* Status strip — tells the visitor where they stand before they click */ .lp-access { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #fff; border: 1px solid var(--lp-line); border-left: 5px solid var(--lp-blue); border-radius: var(--lp-radius); box-shadow: var(--lp-shadow-sm); padding: 14px 18px; margin: 0 0 26px; font-size: .9rem; color: var(--lp-muted); } .lp-access .lp-access-icon { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f1f5fa; color: var(--lp-navy); } .lp-access .lp-access-icon svg { width: 17px; height: 17px; } .lp-access .lp-access-text { flex: 1; min-width: 220px; } .lp-access .lp-access-text strong { color: var(--lp-ink); display: block; font-size: .95rem; } .lp-access-locked { border-left-color: #d9a400; } .lp-access-unlocked { border-left-color: #2e8b57; } .lp-access-unlocked .lp-access-icon { background: #e8f5ed; color: #2e8b57; } /* Registered, but for only some of the units — green would overstate it, red would understate it, so: amber, the colour of "read this bit". */ .lp-access-unlocked.lp-access-partial { border-left-color: #d9a400; } .lp-access-unlocked.lp-access-partial .lp-access-icon { background: #fdf4e3; color: #8a6100; } /* Registered, but not for the unit currently on screen. */ .lp-access-unlocked.lp-access-denied { border-left-color: #c0392b; } .lp-access-unlocked.lp-access-denied .lp-access-icon { background: #fdecea; color: #b3261e; } .lp-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 8px; font-size: .85rem; font-weight: 600; cursor: pointer; border: 1px solid var(--lp-blue); background: var(--lp-blue); color: #fff; transition: all .14s ease; font-family: inherit; } .lp-btn:hover { background: var(--lp-navy); border-color: var(--lp-navy); } .lp-btn-ghost { background: #fff; color: var(--lp-navy); border-color: var(--lp-line); } .lp-btn-ghost:hover { background: #f4f6f9; color: var(--lp-navy); border-color: var(--lp-blue); } /* Registration / access dialog */ .lp-gate { position: fixed; inset: 0; z-index: 4000; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 30, 50, .62); -webkit-backdrop-filter: blur(3px); /* Safari / iOS */ backdrop-filter: blur(3px); } .lp-gate.lp-open { display: flex; } .lp-gate-box { background: #fff; border-radius: 16px; box-shadow: 0 24px 70px rgba(10,25,45,.35); width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; position: relative; font-family: var(--font-main, 'Inter', sans-serif); color: #1d2530; line-height: 1.55; } .lp-gate-head { background: linear-gradient(135deg, #14375f 0%, #1b75bb 100%); color: #fff; padding: 26px 30px 22px; border-radius: 16px 16px 0 0; } .lp-gate-head .lp-gate-eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: .7rem; font-weight: 700; opacity: .85; margin: 0 0 8px; } .lp-gate-head h2 { margin: 0; font-size: 1.4rem; font-weight: 700; color: #fff; line-height: 1.25; } .lp-gate-body { padding: 24px 30px 28px; } .lp-gate-body p { margin: 0 0 14px; font-size: .95rem; color: #667180; } .lp-gate-target { display: inline-block; background: #f1f5fa; border: 1px solid #e2e7ee; border-radius: 6px; padding: 3px 9px; font-size: .82rem; font-weight: 600; color: #14375f; margin-bottom: 4px; word-break: break-all; } .lp-gate-list { list-style: none; margin: 0 0 20px; padding: 0; } .lp-gate-list li { position: relative; padding-left: 24px; margin-bottom: 8px; font-size: .9rem; color: #667180; } .lp-gate-list li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: #1b75bb; } .lp-gate-sep { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; color: #99a3b0; font-size: .75rem; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 600; } .lp-gate-sep::before, .lp-gate-sep::after { content: ""; flex: 1; height: 1px; background: #e2e7ee; } .lp-gate-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } /* Registration form — two labelled fields, stacked so that on a phone the e-mail and the code never end up side by side and half-width. */ .lp-gate-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; } .lp-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .lp-field-label { font-size: .74rem; text-transform: uppercase; letter-spacing: 1.1px; font-weight: 700; color: #67717f; } .lp-gate-form input { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1px solid #d8dfe8; border-radius: 8px; font-size: .95rem; font-family: inherit; color: #1d2530; background: #fff; } .lp-gate-form input:focus { outline: none; border-color: #1b75bb; box-shadow: 0 0 0 3px rgba(27,117,187,.15); } .lp-gate-form input[name=code] { letter-spacing: .06em; font-variant-numeric: tabular-nums; } .lp-gate-submit { grid-column: 1 / -1; justify-self: start; } .lp-gate-submit:disabled { opacity: .6; cursor: default; } .lp-gate-note { margin: 12px 0 0; font-size: .84rem; line-height: 1.5; color: #67717f; } .lp-gate-msg { margin: 12px 0 0; font-size: .87rem; font-weight: 600; min-height: 1.2em; } .lp-gate-msg.lp-err { color: #c0392b; } .lp-gate-msg.lp-ok { color: #2e8b57; } .lp-gate-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid #e2e7ee; } .lp-gate-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; font-size: 1.1rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; transition: background .14s ease; } .lp-gate-close:hover { background: rgba(255,255,255,.34); } /* -------------------------------------------------------------------------- "NOT PART OF YOUR REGISTRATION" DIALOG Same shell as the registration dialog — a registered participant who has opened something from a unit they did not book. Amber rather than blue, because nothing is wrong: they simply booked less than this. -------------------------------------------------------------------------- */ .lp-deny .lp-gate-head { background: linear-gradient(135deg, #8a6100 0%, #d9a400 100%); } .lp-deny .lp-deny-lead { font-size: 1rem; color: #1d2530; font-weight: 600; line-height: 1.5; } .lp-deny .lp-deny-user { font-weight: 700; color: #14375f; } .lp-deny-units { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 4px; } .lp-deny-col { flex: 1 1 190px; min-width: 0; background: #f7f9fc; border: 1px solid #e2e7ee; border-radius: 10px; padding: 12px 14px; } .lp-deny-col-label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; color: #67717f; margin-bottom: 9px; } .lp-deny-chips { display: flex; gap: 6px; flex-wrap: wrap; } .lp-deny-chip { display: inline-block; padding: 3px 11px; border-radius: 20px; font-size: .8rem; font-weight: 700; letter-spacing: .02em; border: 1px solid transparent; } .lp-deny-yes { background: #eaf6ee; color: #186a3b; border-color: #bfe3cc; } .lp-deny-no { background: #fdecea; color: #b3261e; border-color: #f3c6c2; } .lp-deny-none { background: #f1f3f6; color: #8b95a3; border-color: #e2e7ee; font-weight: 600; } /* -------------------------------------------------------------------------- UNITS OUTSIDE THE BOOKING The pages stay public and fully readable — this only says "not yours", it never hides anything. Applied by auth-gate.js. -------------------------------------------------------------------------- */ /* A Launchpad card for a unit the signed-in participant did not book. */ .lp-unit.lp-unit-out { opacity: .78; } .lp-unit.lp-unit-out:hover { opacity: 1; } .lp-unit-tag { display: inline-block; margin-top: 7px; padding: 2px 9px; border-radius: 20px; background: #fdf4e3; color: #8a6100; border: 1px solid #f0dcb0; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; } /* A unit PAGE outside the booking. The padlocks stay on — the buttons are still clickable, and clicking one is what produces the explanation. */ .lp.lp-unit-denied .lp-res { opacity: .72; } .lp.lp-unit-denied .lp-res:hover { opacity: 1; } /* ========================================================================== VIDEO PLAYER OVERLAY ========================================================================== */ .lp-vid { position: fixed; inset: 0; z-index: 4100; /* above the access dialog */ display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(8, 16, 28, .82); -webkit-backdrop-filter: blur(4px); /* Safari / iOS */ backdrop-filter: blur(4px); } .lp-vid.lp-open { display: flex; } .lp-vid-box { width: 100%; max-width: 1100px; background: #0d1621; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.55); font-family: var(--font-main, 'Inter', sans-serif); } .lp-vid-bar { display: flex; align-items: center; gap: 16px; padding: 13px 16px 13px 20px; background: #14202e; color: #fff; } .lp-vid-title { flex: 1; font-size: .95rem; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lp-vid-close { flex: 0 0 auto; width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .14s ease; } .lp-vid-close:hover { background: rgba(255,255,255,.28); } /* 16:9 stage */ .lp-vid-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; } .lp-vid-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* Shown when a chapter has no Vimeo ID yet */ .lp-vid-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; color: #9fb0c4; } .lp-vid-empty svg { width: 42px; height: 42px; opacity: .4; margin-bottom: 16px; } .lp-vid-empty h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 700; color: #dfe8f2; } .lp-vid-empty p { margin: 0; font-size: .9rem; max-width: 430px; line-height: 1.6; } .lp-vid-foot { padding: 11px 20px 13px; background: #14202e; min-height: 8px; } .lp-vid-mark { font-size: .74rem; letter-spacing: .4px; color: #7d8fa3; } .lp-vid-mark strong { color: #b9c9db; font-weight: 600; } /* -------------------------------------------------------------- Responsive */ @media (max-width: 1100px) { .lp-units { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 820px) { .lp-banner h1 { font-size: 1.6rem; } .lp-wrap { padding: 26px 20px 48px; } .lp-banner-inner { padding: 28px 20px 30px; } } @media (max-width: 700px) { /* Stack the deep-dive rows rather than squeezing three columns. */ .lp-dd-row { grid-template-columns: 1fr; gap: 8px; padding: 12px 0; } .lp-dd-type { justify-self: start; } .lp-dd-actions { justify-content: flex-start; } } @media (max-width: 620px) { .lp-units { grid-template-columns: 1fr; } .lp-unitnav { flex-direction: column; } .lp-unitnav a { min-width: 0; } .lp-gate-head { padding: 22px 22px 18px; } .lp-gate-body { padding: 20px 22px 24px; } .lp-vid { padding: 10px; } .lp-vid-bar { padding: 11px 12px 11px 15px; } .lp-vid-title { font-size: .85rem; } } @media (max-width: 560px) { /* One field per row, and the file rows stack so the buttons stay tappable. */ .lp-gate-form { grid-template-columns: 1fr; } .lp-gate-submit { justify-self: stretch; text-align: center; } } /* ========================================================================== PDF VIEWER OVERLAY Pages are drawn onto