/* ============================================================ PAYMENTS UNIVERSITY — pu.css Extracted verbatim from payments-university-course.html. This IS the design system. Do not edit the tokens; add new classes referencing the existing custom properties instead. Serve as the portal stylesheet so imported lesson HTML renders identically inside the portal and as a standalone file. Fonts (add to the portal ): EB+Garamond:600 · Inter:400,500,600,700 · JetBrains+Mono:400,500,700 ============================================================ */ :root{ /* --- EPAY brand core --- */ --pu-indigo:#101B4D; /* our side: EPAY, merchant, terminal */ --pu-indigo-deep:#0A1233; --pu-blue:#2D5BE0; /* the rails: networks, issuers */ --pu-sky:#6FA3EE; --pu-brass:#8A6A2A; /* money: any dollar flow */ --pu-brass-lt:#C9A961; /* --- surfaces --- */ --pu-paper:#FBFAF7; --pu-card:#FFFFFF; --pu-tint:#F2F4F9; /* --- ink --- */ --pu-ink:#1B1F2A; --pu-slate:#5A6377; --pu-mute:#8B93A5; /* --- rules --- */ --pu-rule:#DFE3EC; --pu-rule-strong:#C3CADA; --pu-graphite:#3A3F4C; /* external actors: cardholder */ --pu-measure:720px; --pu-rail:236px; } *{box-sizing:border-box;} html{scroll-behavior:smooth;scroll-padding-top:96px;} body.pu-body{ margin:0; background:var(--pu-paper); color:var(--pu-ink); font-family:'Inter',system-ui,sans-serif; font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased; } /* ---------- MASTHEAD ---------- */ .pu-mast{ position:sticky;top:0;z-index:60; background:var(--pu-indigo); color:#fff; display:flex;align-items:center;justify-content:space-between; gap:16px; padding:0 24px;height:60px; border-bottom:1px solid rgba(255,255,255,.10); } .pu-mast-brand{display:flex;align-items:center;gap:11px;min-width:0;} .pu-mark{flex:none;} .pu-wordmark{ font-family:'EB Garamond',serif;font-weight:600;font-size:19px; letter-spacing:.015em;white-space:nowrap; } .pu-wordmark span{color:var(--pu-sky);} .pu-mast-meta{ font-family:'JetBrains Mono',monospace;font-size:10.5px; letter-spacing:.16em;text-transform:uppercase;color:#93A3C7; white-space:nowrap; } .pu-mast-bar{ position:absolute;left:0;bottom:-1px;height:2px; background:var(--pu-blue);width:0%;transition:width .18s linear; } /* ---------- FRAME ---------- */ .pu-frame{ max-width:1180px;margin:0 auto; display:grid;grid-template-columns:var(--pu-rail) minmax(0,1fr); gap:52px;padding:0 24px 0; } /* ---------- CONTENTS RAIL ---------- */ .pu-rail{padding:44px 0 60px;} .pu-rail-inner{position:sticky;top:104px;} .pu-rail-label{ font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em; text-transform:uppercase;color:var(--pu-mute); padding-bottom:10px;border-bottom:1px solid var(--pu-rule-strong);margin-bottom:4px; } .pu-toc{list-style:none;margin:0;padding:0;} .pu-toc a{ display:grid;grid-template-columns:34px 1fr;gap:4px;align-items:baseline; padding:9px 8px 9px 0;text-decoration:none; border-bottom:1px solid var(--pu-rule); color:var(--pu-slate);font-size:13.5px;line-height:1.35; transition:color .15s,background .15s; } .pu-toc a:hover{color:var(--pu-indigo);} .pu-toc a:focus-visible{outline:2px solid var(--pu-blue);outline-offset:2px;} .pu-toc .pu-n{ font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--pu-mute); letter-spacing:.04em; } .pu-toc a[aria-current="true"]{color:var(--pu-indigo);font-weight:600;} .pu-toc a[aria-current="true"] .pu-n{color:var(--pu-blue);} .pu-toc a.pu-locked{color:var(--pu-mute);pointer-events:none;} .pu-toc a.pu-locked::after{content:'soon';font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--pu-mute);} .pu-prog{margin-top:22px;} .pu-prog-t{ font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:var(--pu-mute);margin-bottom:7px; display:flex;justify-content:space-between; } .pu-prog-track{height:3px;background:var(--pu-rule);} .pu-prog-fill{height:3px;background:var(--pu-blue);width:0%;transition:width .18s linear;} .pu-rail-mobile{display:none;} /* ---------- MAIN ---------- */ .pu-main{padding:44px 0 0;min-width:0;} .pu-eyebrow{ font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.19em; text-transform:uppercase;color:var(--pu-blue);margin:0 0 14px; } .pu-h1{ font-family:'EB Garamond',serif;font-weight:600; font-size:clamp(34px,5vw,50px);line-height:1.06;letter-spacing:-.005em; margin:0 0 14px;color:var(--pu-indigo); } .pu-standfirst{ font-size:18.5px;line-height:1.58;color:var(--pu-slate); max-width:var(--pu-measure);margin:0 0 30px; } /* objectives */ .pu-obj{ border-top:2px solid var(--pu-indigo);border-bottom:1px solid var(--pu-rule-strong); padding:18px 0 20px;margin:0 0 46px;max-width:var(--pu-measure); } .pu-obj-h{ font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em; text-transform:uppercase;color:var(--pu-mute);margin-bottom:12px; } .pu-obj ol{margin:0;padding:0;list-style:none;counter-reset:o; display:grid;grid-template-columns:1fr 1fr;gap:9px 30px;} .pu-obj li{counter-increment:o;position:relative;padding-left:26px;font-size:14.5px;line-height:1.45;color:var(--pu-ink);} .pu-obj li::before{ content:counter(o,decimal-leading-zero);position:absolute;left:0;top:1px; font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--pu-blue);letter-spacing:.04em; } /* lessons + sections */ .pu-lesson{padding-bottom:20px;} .pu-lesson + .pu-lesson{margin-top:8px;} .pu-sec{ display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 18px; margin:0 0 42px;max-width:calc(var(--pu-measure) + 74px); } .pu-sec-n{ font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em; color:var(--pu-mute);padding-top:7px;white-space:nowrap; } .pu-h2{ font-family:'EB Garamond',serif;font-weight:600;font-size:29px;line-height:1.16; margin:0 0 12px;color:var(--pu-indigo);letter-spacing:-.003em; } .pu-h3{ font-family:'Inter',sans-serif;font-weight:600;font-size:14px;letter-spacing:.01em; margin:26px 0 8px;color:var(--pu-indigo); } .pu-sec p{margin:0 0 15px;} .pu-sec p:last-child{margin-bottom:0;} .pu-sec strong{font-weight:600;color:var(--pu-indigo);} .pu-lead{font-size:17px;color:var(--pu-slate);} /* divider */ .pu-div{border:0;border-top:1px solid var(--pu-rule-strong);margin:52px 0;max-width:calc(var(--pu-measure) + 74px);} .pu-div-lesson{border-top:2px solid var(--pu-indigo);margin:66px 0 52px;} /* ---------- FIGURES ---------- */ .pu-fig{margin:30px 0 26px;max-width:100%;} .pu-fig-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--pu-card);border:1px solid var(--pu-rule);padding:22px 20px;} .pu-fig-scroll svg{display:block;width:100%;min-width:640px;height:auto;} .pu-figcap{ display:flex;gap:10px;align-items:baseline; margin-top:11px;font-size:12.5px;line-height:1.5;color:var(--pu-slate); } .pu-figcap b{ font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--pu-blue);font-weight:500;white-space:nowrap;flex:none; } .pu-legend{display:flex;flex-wrap:wrap;gap:6px 20px;margin:14px 0 0;padding:0;list-style:none;} .pu-legend li{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--pu-slate);} .pu-chip{width:11px;height:11px;flex:none;border-radius:2px;} /* ---------- MEDIA (video / image) ---------- */ .pu-media{margin:30px 0 26px;max-width:calc(var(--pu-measure) + 74px);} .pu-media-frame{position:relative;background:var(--pu-indigo-deep);border:1px solid var(--pu-rule);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden;} .pu-media-frame iframe,.pu-media-frame img{width:100%;height:100%;border:0;object-fit:cover;display:block;} .pu-media-empty{text-align:center;color:#7C8AAC;padding:24px;} .pu-media-empty .pu-play{width:46px;height:46px;margin:0 auto 12px;border:1.5px solid #4A5A80;border-radius:50%;display:flex;align-items:center;justify-content:center;} .pu-media-empty .pu-play::after{content:'';border-left:12px solid #6FA3EE;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px;} .pu-media-empty code{font-family:'JetBrains Mono',monospace;font-size:11px;color:#6FA3EE;letter-spacing:.06em;} .pu-media-empty p{margin:7px 0 0;font-size:12px;} .pu-media-bar{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-top:11px;font-size:12.5px;line-height:1.5;color:var(--pu-slate);} .pu-media-bar b{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--pu-blue);font-weight:500;flex:none;} .pu-media-dur{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--pu-mute);flex:none;white-space:nowrap;} /* ---------- TABLES ---------- */ .pu-tablewrap{overflow-x:auto;margin:26px 0;} .pu-table{width:100%;min-width:620px;border-collapse:collapse;font-size:13.5px;line-height:1.5;} .pu-table th{ text-align:left;font-weight:500;font-size:11px;letter-spacing:.13em;text-transform:uppercase; color:var(--pu-mute);font-family:'JetBrains Mono',monospace; padding:0 14px 9px 0;border-bottom:1.5px solid var(--pu-indigo);vertical-align:bottom; } .pu-table td{padding:12px 14px 12px 0;border-bottom:1px solid var(--pu-rule);vertical-align:top;} .pu-table tbody tr:last-child td{border-bottom:1px solid var(--pu-rule-strong);} .pu-table td:first-child{font-weight:600;color:var(--pu-indigo);white-space:nowrap;padding-right:22px;} .pu-num{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:-.01em;} .pu-pos{color:#1F6E4F;font-weight:500;} .pu-neg{color:#9B3226;font-weight:500;} /* ---------- CALLOUTS ---------- */ .pu-note{ border-left:2px solid var(--pu-blue);background:var(--pu-tint); padding:16px 20px;margin:26px 0;font-size:14.5px;line-height:1.55; } .pu-note-h{ font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:var(--pu-blue);margin-bottom:7px; } .pu-note.pu-compliance{border-left-color:var(--pu-brass);background:#FAF7F0;} .pu-note.pu-compliance .pu-note-h{color:var(--pu-brass);} .pu-note p{margin:0 0 9px;} .pu-note p:last-child{margin:0;} .pu-note ul{margin:8px 0 0;padding-left:18px;} .pu-note li{margin-bottom:5px;} .pu-pull{ font-family:'EB Garamond',serif;font-size:23px;line-height:1.34;color:var(--pu-indigo); border-top:1px solid var(--pu-rule-strong);border-bottom:1px solid var(--pu-rule-strong); padding:20px 0;margin:32px 0;font-style:italic; } /* ---------- KEY TERMS ---------- */ .pu-terms{ display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:1px;background:var(--pu-rule);border:1px solid var(--pu-rule);margin:24px 0; } .pu-term{background:var(--pu-card);padding:15px 16px;} .pu-term dt{ font-weight:600;font-size:13px;color:var(--pu-indigo);margin-bottom:5px;letter-spacing:.005em; } .pu-term dd{margin:0;font-size:12.5px;line-height:1.5;color:var(--pu-slate);} /* ---------- KNOWLEDGE CHECK ---------- */ .pu-check{border:1px solid var(--pu-rule-strong);background:var(--pu-card);padding:24px 26px;margin:34px 0 0;} .pu-check-h{ font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em; text-transform:uppercase;color:var(--pu-mute); padding-bottom:12px;border-bottom:1px solid var(--pu-rule);margin-bottom:4px; } .pu-q{border-bottom:1px solid var(--pu-rule);} .pu-q:last-of-type{border-bottom:0;} .pu-q summary{ cursor:pointer;list-style:none;padding:14px 30px 14px 0;position:relative; font-size:14.5px;font-weight:500;color:var(--pu-ink); } .pu-q summary::-webkit-details-marker{display:none;} .pu-q summary::after{ content:'+';position:absolute;right:2px;top:12px; font-family:'JetBrains Mono',monospace;font-size:17px;color:var(--pu-blue);line-height:1; } .pu-q[open] summary::after{content:'–';} .pu-q summary:focus-visible{outline:2px solid var(--pu-blue);outline-offset:2px;} .pu-a{padding:0 0 16px;font-size:14px;line-height:1.6;color:var(--pu-slate);} .pu-a strong{color:var(--pu-indigo);} /* ---------- LESSON HEAD ---------- */ .pu-lesson-head{margin:0 0 30px;max-width:calc(var(--pu-measure) + 74px);} .pu-lesson-code{ font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--pu-blue);margin-bottom:10px; } .pu-lesson-title{ font-family:'EB Garamond',serif;font-weight:600;font-size:38px;line-height:1.1; color:var(--pu-indigo);margin:0 0 10px;letter-spacing:-.005em; } .pu-lesson-sub{font-size:16.5px;color:var(--pu-slate);margin:0;max-width:var(--pu-measure);} .pu-runtime{ font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--pu-mute);margin-top:12px; } /* ---------- FOOTER ---------- */ .pu-foot{ background:var(--pu-indigo);color:#93A3C7;margin-top:80px; padding:26px 24px; font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase; } .pu-foot-in{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;} .pu-foot b{color:#fff;font-weight:500;} /* ---------- RESPONSIVE ---------- */ @media (max-width:940px){ .pu-frame{grid-template-columns:1fr;gap:0;padding:0 20px;} .pu-rail{display:none;} .pu-rail-mobile{display:block;margin:26px 0 0;border-top:2px solid var(--pu-indigo);border-bottom:1px solid var(--pu-rule-strong);} .pu-rail-mobile summary{ cursor:pointer;list-style:none;padding:13px 0; font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em; text-transform:uppercase;color:var(--pu-indigo); } .pu-rail-mobile summary::-webkit-details-marker{display:none;} .pu-obj ol{grid-template-columns:1fr;} .pu-sec{grid-template-columns:1fr;gap:0;} .pu-sec-n{padding:0 0 6px;} .pu-main{padding-top:28px;} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{transition:none!important;animation:none!important;} } @media print{ .pu-mast,.pu-rail,.pu-rail-mobile{display:none;} .pu-q{page-break-inside:avoid;} .pu-q .pu-a{display:block!important;} }