/* ============================================================================ NovAIFlow Academy — branded document page stylesheet Used by the certification track pages (certifications/*.html) and the series index. Pairs with shared/tokens.css. Bilingual via [data-lang] on : wrap EN content in .en-only and ES content in .es-only. Print target: US Letter, portrait. ========================================================================== */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --red:var(--xg-red); --red-soft:var(--xg-red-soft); --red-line:rgba(24,200,230,.28); --ink:var(--xg-ink); --charcoal:var(--xg-charcoal); --graphite:var(--xg-graphite); --slate:var(--xg-slate); --line:var(--xg-line); --paper:var(--xg-white); --paper-2:var(--xg-paper); --d-text:var(--xg-paper); --d-mute:var(--xg-mute); --d-line:rgba(255,255,255,.12); --font-display:var(--xg-font-display); --font-body:var(--xg-font-body); --font-mono:var(--xg-font-mono); --maxw:880px; } html{font-size:16px;color-scheme:light} body{font-family:var(--font-body);color:var(--ink);background:var(--paper-2);line-height:1.65;-webkit-font-smoothing:antialiased} [data-lang="en"] .es-only{display:none} [data-lang="es"] .en-only{display:none} :root:not([data-lang]) .en-only{display:none} a{color:var(--red);text-decoration:none} a:hover{text-decoration:underline} /* ── TOPBAR (matches the hub) ─────────────────────────────────────────────── */ .topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:13px 28px;background:var(--ink);color:var(--d-text);border-bottom:2px solid var(--red)} .topbar .brand{display:flex;align-items:center;gap:12px} .brand-mark{width:34px;height:34px;border-radius:7px;background:#0c1326;border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;overflow:hidden;text-decoration:none} .brand-mark img{width:28px;height:28px;display:block} .brand-name{font-family:var(--font-display);font-weight:600;font-size:14px;letter-spacing:-.02em} .brand-sub{font-family:var(--font-mono);font-size:10px;color:var(--d-mute);letter-spacing:.08em;text-transform:uppercase} .topbar .right{display:flex;align-items:center;gap:14px} .topbar .home{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--d-mute);text-decoration:none} .topbar .home:hover{color:#fff} .seg{display:inline-flex;border:1px solid var(--d-line);border-radius:6px;overflow:hidden} .seg button{appearance:none;border:0;background:transparent;color:var(--d-mute);font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.06em;padding:7px 14px;cursor:pointer} .seg button.on{background:var(--red);color:#fff} /* ── HEADER BAND (track hero) ─────────────────────────────────────────────── */ .head{background:var(--charcoal);color:var(--d-text);padding:46px 28px 40px;border-bottom:3px solid var(--red)} .head .wrap{max-width:var(--maxw);margin:0 auto} .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--red)} .eyebrow::before{content:'';width:26px;height:2px;background:var(--red)} .badge{display:inline-block;margin-left:8px;background:var(--red);color:#fff;font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:100px;vertical-align:middle} .head h1{font-family:var(--font-display);font-weight:600;font-size:clamp(27px,4.4vw,40px);line-height:1.08;letter-spacing:-.02em;margin-top:16px} .head .sub{font-size:15px;color:rgba(255,255,255,.72);margin-top:8px;font-style:italic} .meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px} .meta .m{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--red-line);background:rgba(255,255,255,.05);border-radius:100px;padding:7px 14px;font-size:12.5px;color:#fff} .meta .m b{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--d-mute);font-weight:600} /* ── CONTENT ──────────────────────────────────────────────────────────────── */ main{max-width:var(--maxw);margin:0 auto;padding:40px 28px 64px;background:var(--paper);border-left:1px solid var(--line);border-right:1px solid var(--line)} .lead{font-size:17px;color:var(--graphite);line-height:1.7;margin-bottom:8px} .lead b{color:var(--ink)} section.block{padding-top:34px;margin-top:30px;border-top:1px solid var(--line)} section.block:first-of-type{border-top:0;margin-top:0;padding-top:14px} h2{font-family:var(--font-display);font-weight:600;font-size:23px;letter-spacing:-.01em;color:var(--ink);margin-bottom:16px} h2::before{content:'';display:inline-block;width:18px;height:3px;background:var(--red);vertical-align:middle;margin-right:11px;border-radius:2px} h3{font-family:var(--font-display);font-weight:600;font-size:16px;margin:18px 0 8px} p{margin:0 0 12px} /* tables */ table{width:100%;border-collapse:collapse;margin:6px 0 16px;font-size:14px} th,td{text-align:left;vertical-align:top;padding:10px 13px;border:1px solid var(--line)} thead th{background:var(--ink);color:var(--d-text);font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:600} tbody tr:nth-child(even){background:var(--paper-2)} td:first-child{font-weight:600;color:var(--ink);white-space:nowrap} .modules td:first-child{text-align:center;color:var(--red);font-family:var(--font-display);width:34px} .modules td:nth-child(2){white-space:normal} /* prompt library */ .prompts{list-style:none;counter-reset:p;display:grid;gap:14px} .prompts li{counter-increment:p;border:1px solid var(--line);border-left:3px solid var(--red);border-radius:10px;padding:14px 16px;background:var(--paper)} .prompts li .t{font-family:var(--font-display);font-weight:600;font-size:14.5px;color:var(--ink);margin-bottom:8px} .prompts li .t::before{content:counter(p);display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:var(--red);color:#fff;font-family:var(--font-mono);font-size:11px;border-radius:6px;margin-right:9px} .prompts code,code.block{display:block;font-family:var(--font-mono);font-size:12.5px;line-height:1.6;color:var(--ink);background:var(--paper-2);border:1px solid var(--line);border-radius:7px;padding:11px 13px;white-space:pre-wrap;word-break:break-word} /* responsible-AI do/don't + callouts */ .note{border:1px solid var(--red-line);background:var(--red-soft);border-radius:10px;padding:14px 16px;font-size:14px;color:var(--graphite);margin:6px 0 16px} .note b{color:var(--ink)} .cols{display:grid;grid-template-columns:1fr 1fr;gap:16px} .card{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--paper)} .card h3{margin-top:0;display:flex;align-items:center;gap:8px} .card.do h3{color:#127a3e} .card.dont h3{color:var(--red)} .card ul{list-style:none;display:grid;gap:8px;font-size:13.5px;color:var(--graphite)} .card li{display:flex;gap:8px;line-height:1.5} .card.do li::before{content:'✓';color:#127a3e;font-weight:700;flex:none} .card.dont li::before{content:'✕';color:var(--red);font-weight:700;flex:none} /* checklist */ .check{list-style:none;display:grid;gap:9px;margin:6px 0} .check li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--graphite)} .check li::before{content:'';flex:none;width:17px;height:17px;border:1.5px solid var(--red);border-radius:4px;margin-top:2px} .capstone{border:1px solid var(--red-line);background:var(--red-soft);border-radius:10px;padding:14px 16px;margin-bottom:14px;font-size:14.5px} /* footer / nav */ .pagenav{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;padding-top:18px;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:12.5px} footer.site{background:var(--ink);color:var(--d-text);padding:30px 28px;text-align:center;font-family:var(--font-mono);font-size:11px;color:var(--d-mute);letter-spacing:.04em} footer.site b{color:#fff;font-family:var(--font-display);font-size:14px;font-weight:600;display:block;margin-bottom:5px;letter-spacing:-.01em} footer.site a{color:var(--d-mute)} /* print button */ .print-btn{position:fixed;right:22px;bottom:22px;z-index:60;background:var(--red);color:#fff;border:0;cursor:pointer;padding:12px 22px;border-radius:8px;font-family:var(--font-display);font-weight:600;font-size:13px;box-shadow:0 10px 30px rgba(24,200,230,.4)} .print-btn:hover{background:var(--xg-red-ink)} @media (max-width:640px){.cols{grid-template-columns:1fr}} /* ── PRINT · US Letter portrait ───────────────────────────────────────────── */ @media print{ @page{size:Letter;margin:0.55in} html,body{background:#fff!important} *{-webkit-print-color-adjust:exact;print-color-adjust:exact} .topbar,.print-btn,.pagenav{display:none!important} .head{padding:0 0 16px;border-bottom:2px solid var(--red);background:#fff!important;color:var(--ink)!important} .head .sub{color:var(--slate)} .head h1{font-size:26px} .meta .m{border-color:var(--line);background:#fff;color:var(--ink)} .meta .m b{color:var(--slate)} main{max-width:none;border:0;padding:14px 0 0} section.block{break-inside:avoid} .prompts li,.card,table,.capstone{break-inside:avoid} footer.site{background:#fff!important;color:var(--slate)!important;border-top:1px solid var(--line);text-align:left;padding:14px 0 0} footer.site b{color:var(--ink)} a{color:var(--ink)} }