/* ============================================================ AI Rollout Framework — course area (paid members) Shared layout for the course landing, the three stage pages, the introduction, and the Implementation Tools library. Uses the site tokens from site.css. Copper CTA language, sharp edges — matches /enroll and /members. ============================================================ */ /* Gate: content stays hidden until course-gate.js confirms a session. is set inline; JS swaps it to course-ready. */ .course-gated .gated-content { display: none; } .gate-loading { display: none; } .course-gated .gate-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: 60vh; color: var(--paper-muted); font-size: 0.9rem; text-align: center; } .gate-spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--capability); animation: course-spin 800ms linear infinite; } @keyframes course-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .gate-spinner { animation-duration: 2s; } } body.course { background: var(--ink); color: var(--paper); font-family: var(--font-sans); line-height: 1.65; min-height: 100vh; display: flex; flex-direction: column; } body.course *, body.course *::before, body.course *::after { box-sizing: border-box; } .course-nav { padding: 1.1rem 2rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); flex-wrap: wrap; gap: 0.75rem; } .course-nav .nav-right { font-size: 0.8rem; color: var(--paper-muted); } .course-nav .nav-right a { color: var(--capability); text-decoration: none; } .course-main { flex: 1; width: 100%; max-width: 900px; margin: 0 auto; padding: 3rem 2rem 4rem; } .course-back { display: inline-block; font-size: 0.82rem; color: var(--paper-muted); text-decoration: none; margin-bottom: 1.6rem; } .course-back:hover { color: var(--paper); } .course-kicker { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--capability); display: block; margin-bottom: 0.9rem; } .course-main h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.14; margin: 0 0 1rem; letter-spacing: -0.01em; } .course-main h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 600; color: var(--capability); } .course-lead { font-size: 1.02rem; color: var(--paper-dim); max-width: 62ch; margin-bottom: 2.4rem; } .stage-meta { font-size: 0.8rem; color: var(--paper-muted); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.5rem; } /* Landing: 5 cards */ .course-cards { display: grid; gap: 1.1rem; } .course-card { display: block; text-decoration: none; color: inherit; background: var(--ink-2); border: 1px solid var(--line); border-left: 3px solid var(--capability); border-radius: 8px; padding: 1.6rem 1.75rem; transition: border-color 200ms ease, transform 150ms ease, background 200ms ease; } .course-card:hover { transform: translateY(-2px); border-color: var(--line-capability); background: var(--ink-3); } .course-card .cc-step { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--capability); display: block; margin-bottom: 0.5rem; } .course-card h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.4rem; } .course-card p { font-size: 0.9rem; color: var(--paper-dim); } .course-card .cc-go { color: var(--capability); } /* Lessons */ .lesson-list { display: grid; gap: 1.1rem; margin-top: 1rem; } .lesson { background: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; padding: 1.6rem 1.75rem; } .lesson-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; flex-wrap: wrap; } .lesson-seq { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-muted); } .lesson-type { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--capability); border: 1px solid var(--line-capability); border-radius: 3px; padding: 0.15rem 0.5rem; } .lesson-type[data-t="video"] { color: var(--capability); } .lesson-type[data-t="text"] { color: var(--technology); border-color: var(--line); } .lesson h3 { font-size: 1.12rem; font-weight: 700; margin: 0 0 0.6rem; } .lesson p { font-size: 0.92rem; color: var(--paper-dim); margin: 0 0 0.4rem; } .lesson video { width: 100%; border-radius: 6px; border: 1px solid var(--line); background: #000; display: block; margin: 0.4rem 0 0.9rem; } /* Shared copper CTA — matches /enroll and /members */ .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--capability); color: var(--ink); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; border: none; cursor: pointer; text-decoration: none; padding: 0.8rem 1.5rem; border-radius: 4px; margin-top: 0.6rem; transition: background 200ms ease, transform 150ms ease; } .btn-primary:hover { background: var(--capability-bright); transform: translateY(-1px); } .btn-outline { display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; color: var(--capability); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid var(--line-capability); border-radius: 4px; padding: 0.75rem 1.4rem; text-decoration: none; margin-top: 0.6rem; transition: border-color 200ms ease, color 200ms ease; } .btn-outline:hover { border-color: var(--capability); color: var(--capability-bright); } /* Tools library rows */ .tool-list { display: grid; gap: 0.7rem; margin-top: 1rem; } .tool-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--ink-2); border: 1px solid var(--line); border-radius: 6px; padding: 1rem 1.25rem; flex-wrap: wrap; } .tool-row .tr-info { min-width: 0; } .tool-row .tr-name { font-size: 0.98rem; font-weight: 700; } .tool-row .tr-file { font-size: 0.78rem; color: var(--paper-muted); margin-top: 0.15rem; word-break: break-word; } .tool-row .btn-primary, .tool-row .btn-outline { margin-top: 0; flex-shrink: 0; } .stage-footer { margin-top: 2.5rem; padding-top: 1.6rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .stage-footer a { color: var(--capability); text-decoration: none; font-size: 0.9rem; } .course-footer { border-top: 1px solid var(--line); padding: 1.8rem 2rem; text-align: center; } .course-footer .footer-note { font-size: 0.8rem; color: var(--paper-muted); } .course-footer .footer-note a { color: var(--capability); text-decoration: none; } @media (max-width: 560px) { .tool-row { flex-direction: column; align-items: flex-start; } }