“Will this be
worth it for me?”
Needs a clear use case, honest expectations, and a reason to choose live guidance over cheaper self-study.
Content path: useful lesson, instructor introduction, course-fit conversation.
diff --git a/public/onlc/presentation.css b/public/onlc/presentation.css new file mode 100644 index 0000000..f12ce93 --- /dev/null +++ b/public/onlc/presentation.css @@ -0,0 +1,17 @@ +*{box-sizing:border-box} :root{--paper:#f3f1e9;--ink:#20251f;--soft:#5d655b;--line:#c9cec0;--accent:#d6ec7a;--green:#526c36} html{background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;scroll-behavior:smooth} body{margin:0} button,a{-webkit-tap-highlight-color:transparent} button{font:inherit;color:inherit;cursor:pointer} a{color:inherit;text-underline-offset:4px} button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #749925;outline-offset:5px} button{background:none;border:0} [hidden]{display:none!important} .skip{position:fixed;top:-80px;left:20px;background:var(--accent);padding:14px;z-index:50}.skip:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} +.topbar{height:76px;display:flex;align-items:center;gap:36px;padding:0 4vw;border-bottom:1px solid var(--line);background:var(--paper);position:relative;z-index:3}.wordmark{text-decoration:none;font-weight:800;font-size:20px;letter-spacing:-1px;white-space:nowrap}.wordmark span{font-weight:400;color:var(--soft)}.project{font-size:12px;letter-spacing:.03em}.divider{padding:0 10px;color:#919787}.topbar nav{margin-left:auto;display:flex;gap:8px}.topbar button{font-size:12px;padding:10px 12px;border-radius:3px}.topbar button:hover{background:#e3e7d7}.topbar #reading-button{border:1px solid var(--ink)} +main{max-width:1800px;margin:auto}.slide{padding:42px 6vw 32px;min-height:calc(100svh - 138px);position:relative;display:flex;flex-direction:column;scroll-margin-top:20px}.slide h2{font-size:clamp(36px,4.25vw,70px);line-height:1.07;letter-spacing:-.045em;font-weight:500;margin:20px 0 38px;max-width:1200px}.slide em{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.04em;color:var(--green)}p{margin:0 0 18px;line-height:1.5}h3{margin:0 0 10px;line-height:1.2} .overline,.small-label,.eyebrow,.cover-bottom,.source,.loop-return,.endline{font-size:12px;letter-spacing:.045em}.overline{text-transform:uppercase;color:var(--soft);margin:0;font-weight:600}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:7vw}.large-copy{font-size:clamp(21px,2vw,28px);line-height:1.5;max-width:560px}.large-copy p+p{color:var(--soft)}.lined-list>div{border-top:1px solid var(--line);padding:17px 0}.lined-list h3{font-size:19px;font-weight:600}.lined-list p{font-size:17px;color:var(--soft);margin:0}.source{margin-top:auto;padding-top:26px;color:var(--soft);line-height:1.6;font-size:11px;letter-spacing:0;max-width:1100px}.statement{font-size:clamp(22px,2.4vw,34px);line-height:1.36;letter-spacing:-.02em;max-width:600px}.muted{color:var(--soft);font-size:14px;max-width:500px}.closing-line{border-top:1px solid var(--line);padding-top:20px;margin:26px 0 0;font-size:20px;max-width:1150px}.section-lede{font-size:18px;color:var(--soft);margin-top:-20px}.small-label{display:block;color:var(--green);text-transform:uppercase;font-weight:600;margin-bottom:20px} +.dark{background:var(--ink);color:var(--paper);--line:#58604f;--soft:#bdc3b2;--green:var(--accent)}.dark em{color:var(--accent)}.eyebrow{display:flex;justify-content:space-between;color:var(--soft)}.cover{padding-top:30px;min-height:calc(100svh - 138px)}.cover-body{position:relative;padding:44px 0 30px}.cover h1{font-size:clamp(55px,6.8vw,110px);font-weight:500;letter-spacing:-.055em;line-height:.99;margin:18px 0 24px;max-width:900px}.cover-lede{position:absolute;right:0;bottom:38px;width:27%;font-size:clamp(20px,2vw,28px);color:var(--soft);line-height:1.45}.cover-bottom{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-top:20px;margin-top:auto;color:var(--soft)}.thesis h2{font-size:clamp(46px,6.7vw,105px);margin:9vh 0 35px;line-height:1.07}.thesis-text{font-size:clamp(21px,2.2vw,30px);color:var(--soft);max-width:800px}.thesis-bottom{display:flex;gap:7vw;margin-top:35px;font-size:19px}.thesis-bottom p{line-height:1.6} +.audiences{display:grid;grid-template-columns:1fr 1fr;gap:7vw}.audiences article{border-top:1px solid var(--line);padding-top:20px}.audiences h3{font-family:Georgia,serif;font-size:clamp(29px,3.3vw,48px);font-weight:400;letter-spacing:-.03em;line-height:1.1;margin-bottom:20px}.audiences p{font-size:18px;color:var(--soft);max-width:520px}.audiences .action-line{font-size:15px;border-top:1px solid var(--line);padding-top:15px;margin-top:26px}.example-tabs{display:flex;gap:30px;border-bottom:1px solid var(--line);margin-top:14px}.example-tabs button{font-size:15px;padding:12px 0;border-bottom:3px solid transparent}.example-tabs button[aria-selected=true]{border-bottom-color:var(--green);font-weight:bold}.example-panel{display:grid;grid-template-columns:.9fr 1.1fr;gap:5vw;padding:28px 0 0}.sample-hero{background:#e6eccf;padding:28px 30px}.sample-hero h3{font-family:Georgia,serif;font-size:clamp(29px,3.5vw,48px);font-weight:400;letter-spacing:-.035em;line-height:1.08;margin:0 0 20px}.sample-hero p{font-size:17px;margin:0;color:#4f5848}.script-list{list-style:none;margin:0;padding:0}.script-list li{font-size:18px;line-height:1.45;border-top:1px solid var(--line);padding:13px 0}.script-list li span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--soft);margin-bottom:5px}.cycle{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;margin-top:35px}.cycle>div{border-top:1px solid var(--line);padding-top:18px}.cycle span{font-family:Georgia,serif;font-size:52px;color:var(--accent)}.cycle h3{font-size:22px;margin:28px 0 15px}.cycle p{font-size:17px;color:var(--soft)}.loop-return{border-bottom:1px solid var(--line);padding:25px 0;margin:12px 0 0;font-size:18px;color:var(--accent);letter-spacing:0}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:18px;line-height:1.4}th,td{padding:17px 18px 17px 0;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}thead th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--soft);border-bottom:2px solid var(--ink)}tbody th{font-weight:600;width:23%}td{width:38%;color:var(--soft)}.rhythm-layout{display:grid;grid-template-columns:.65fr 1.35fr;gap:8vw}.session{border-top:1px solid var(--line);padding-top:18px}.big-number{font-family:Georgia,serif;font-size:125px;line-height:1;margin:0 0 18px;color:var(--green)}.session h3{font-size:22px}.session p:not(.big-number){color:var(--soft);font-size:17px}.measurement{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:10px}.measurement>div{border-top:1px solid var(--line);padding-top:22px}.measurement h3{font-family:Georgia,serif;font-size:31px;font-weight:400;letter-spacing:-.02em;min-height:75px}.measurement p{font-size:18px;color:var(--soft);min-height:95px}.decision{font-size:14px;color:var(--green)}.proposal{border-top:1px solid var(--ink);display:grid;grid-template-columns:1fr 3fr;gap:28px;margin-top:28px;padding-top:20px}.proposal span{font-size:12px;text-transform:uppercase;letter-spacing:.05em}.proposal p{font-size:21px;margin:0}.sources-slide h2{margin-bottom:38px}.sources-list{list-style:none;padding:0;margin:16px 0}.sources-list li{font-size:17px;margin-bottom:19px;line-height:1.3}.sources-list span{display:block;font-size:14px;color:var(--soft);margin-top:5px}.endline{margin-top:auto;padding-top:30px;border-bottom:1px solid var(--line);padding-bottom:15px;color:var(--green)} +.controls{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;background:var(--paper);position:relative;border-top:1px solid var(--line);z-index:4}.chapter-name,.key-hint{font-size:12px;color:var(--soft);width:30%}.key-hint{text-align:right}.pager{display:flex;align-items:center;gap:24px}.pager button{font-size:26px;width:38px;height:40px}.pager button:hover{background:#e3e7d7}.pager button:disabled{opacity:.25;cursor:default}#slide-count{font-size:12px;letter-spacing:.08em;font-variant-numeric:tabular-nums}.progress{position:absolute;bottom:0;height:3px;left:0;width:100%;background:#e1e3d8}#progress-fill{height:3px;background:var(--green);display:block;transition:width .2s}.reading .slide{border-bottom:1px solid var(--line);min-height:760px;padding-bottom:55px}.reading .controls{position:sticky;bottom:0}.reading .key-hint{visibility:hidden}dialog{background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:30px;width:min(600px,92vw);max-height:85vh}dialog::backdrop{background:#20251fa8;backdrop-filter:blur(4px)}.dialog-top{display:flex;justify-content:space-between;align-items:center}.dialog-top h2{font-size:29px;font-weight:500;margin:0}.dialog-top button{font-size:34px}.dialog-top+ol{list-style:none;padding:0;margin:25px 0 0}dialog li{border-top:1px solid var(--line)}dialog li button{width:100%;display:flex;gap:22px;text-align:left;padding:12px 8px;font-size:16px}dialog li span{color:var(--green);font-size:12px;width:22px}dialog li button:hover,dialog li button[aria-current=step]{background:#e3e7d7} +@media(min-width:1500px){.slide{padding-left:100px;padding-right:100px}.cover h1{font-size:110px}.slide h2{font-size:70px}.thesis h2{font-size:100px}} +@media(max-width:1000px){.topbar{gap:18px}.project{display:none}.slide{padding:35px 5vw}.slide h2{font-size:43px}.cover h1{font-size:72px}.cover-lede{font-size:21px;width:30%}.cycle{gap:18px}.cycle h3{font-size:19px}.cycle p{font-size:16px}.two-col{gap:5vw}.lined-list p{font-size:16px}.measurement{gap:22px}.measurement h3{font-size:27px}.measurement p{font-size:17px}} +@media(max-width:760px){.topbar{height:auto;min-height:66px;padding:12px 20px;gap:8px}.wordmark{font-size:17px}.topbar nav{gap:0}.topbar button{font-size:11px;padding:9px 8px}.topbar #print-button{display:none}.slide,.reading .slide{padding:32px 24px 36px;min-height:auto}.slide h2{font-size:38px;margin:20px 0 30px}.cover,.reading .cover{min-height:calc(100svh - 125px)}.eyebrow{font-size:10px;gap:15px}.eyebrow span{white-space:nowrap}.cover-body{padding:35px 0 20px}.cover h1{font-size:clamp(48px,10vw,75px)}.cover-lede{position:static;width:100%;font-size:20px;max-width:420px}.cover-bottom{font-size:10px;gap:15px;line-height:1.5}.two-col,.audiences,.example-panel,.rhythm-layout{grid-template-columns:1fr;gap:24px}.large-copy{font-size:22px}.statement{font-size:25px}.lined-list h3{font-size:19px}.lined-list p{font-size:17px}.source{font-size:11px;margin-top:15px}.thesis h2{font-size:43px;margin-top:45px}.thesis-text{font-size:22px}.thesis-bottom{display:block;font-size:18px;margin-top:20px}.audiences{gap:32px}.audiences h3{font-size:34px}.audiences .action-line{margin-top:18px}.closing-line{font-size:18px}.example-tabs{gap:20px}.example-tabs button{font-size:12px}.section-lede{font-size:17px;margin-top:-10px}.sample-hero{padding:24px}.sample-hero h3{font-size:36px}.script-list li{font-size:17px}.cycle{grid-template-columns:1fr;margin-top:10px;gap:0}.cycle>div{display:grid;grid-template-columns:44px 1fr;gap:0 20px;padding:18px 0}.cycle span{grid-row:span 2;font-size:34px}.cycle h3{margin:0 0 7px;font-size:22px}.cycle p{margin:0;font-size:17px}.loop-return{font-size:17px;padding-top:10px}.table-wrap{overflow:visible}table,tbody,tr,th,td{display:block;width:100%!important}thead{display:none}tr{border-top:1px solid var(--line);padding:12px 0}th,td{border:0;padding:5px 0;font-size:17px}td:before{content:'AI support: ';font-size:12px;font-weight:bold;color:var(--green)}td+td:before{content:'People: '}.big-number{font-size:88px}.measurement{grid-template-columns:1fr;gap:28px}.measurement h3,.measurement p{min-height:0}.measurement h3{font-size:31px}.measurement p{margin-bottom:12px}.proposal{grid-template-columns:1fr;gap:12px}.proposal p{font-size:20px}.controls{padding:0 20px;height:60px}.chapter-name{font-size:10px;width:42%}.key-hint{display:none}.pager{gap:12px}.sources-list li{font-size:16px}.sources-slide .two-col{gap:14px}dialog{padding:22px}dialog li button{padding:11px 0;font-size:15px}} +@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}} +@media print{@page{size:A4 landscape;margin:12mm}html,body{background:white;color:black}.topbar,.controls,dialog,.example-tabs,.skip{display:none!important}.slide,.slide[hidden],.reading .slide{display:flex!important;page-break-after:always;break-after:page;min-height:170mm;padding:10mm 8mm;background:white!important;color:#171d16!important;border:0!important}.slide:last-child{break-after:auto}.slide h2{font-size:32pt;margin:8mm 0}.slide h1{font-size:48pt}.slide em,.dark em{color:#526c36}.slide p,.lined-list p,.dark p{color:#30382c}.cover-body{padding:5mm 0}.cover-lede{position:static;width:75%;font-size:18pt}.cover-bottom{color:#444}.slide .overline,.small-label,.eyebrow{font-size:9pt}.two-col{gap:10mm}.source{font-size:8pt}.example-panel[hidden]{display:grid!important}.example-panel{padding:5mm 0;gap:8mm;break-inside:avoid}.sample-hero{padding:5mm}.sample-hero h3{font-size:22pt}.sample-hero p,.script-list li{font-size:11pt}.script-list li{padding:2mm 0}.slide:has(.example-panel){break-inside:auto}.cycle p{color:#333}.cycle span{color:#526c36}.cycle{gap:6mm}.cycle h3{font-size:15pt}.thesis h2{font-size:45pt}.source a{color:#30382c}.measurement p{min-height:0}.sources-list li{font-size:12pt}.sources-list span{font-size:10pt}*{-webkit-print-color-adjust:exact;print-color-adjust:exact}} + +.solutions{display:grid;grid-template-columns:1fr 1fr;gap:32px 5vw}.solutions article{display:flex;gap:22px;border-top:1px solid var(--line);padding-top:20px}.solution-number{font-family:Georgia,serif;font-size:34px;color:var(--green)}.solutions h3{font-size:23px;letter-spacing:-.02em}.solutions p{font-size:17px;color:var(--soft);margin-bottom:14px}.solution-purpose{font-size:13px;color:var(--green)}@media(max-width:760px){.solutions{grid-template-columns:1fr;gap:26px}.solutions h3{font-size:22px}} + +body{padding-bottom:62px}.controls,.reading .controls{position:fixed;bottom:0;left:0;right:0}.reading #presentation{padding-bottom:0}@media(min-width:761px) and (max-height:800px){.topbar{height:64px}.slide{padding-top:26px;padding-bottom:25px;min-height:calc(100svh - 126px)}.slide h2{font-size:44px;margin:15px 0 27px}.lined-list>div{padding:12px 0}.lined-list h3{font-size:18px}.lined-list p{font-size:16px}.large-copy{font-size:23px}.statement{font-size:27px}.source{padding-top:18px}.cover-body{padding:28px 0 24px}.cover h1{font-size:76px}.cover-lede{font-size:24px;bottom:25px}.cover-bottom{padding-top:16px}.thesis h2{font-size:70px;margin-top:52px}.cycle{margin-top:20px}.cycle h3{margin:20px 0 10px}.solutions{gap:24px 5vw}.solutions article{padding-top:15px}.solutions h3{font-size:21px}.solutions p{font-size:16px}.example-panel{padding-top:20px}.sample-hero{padding:23px}.sample-hero h3{font-size:36px}.script-list li{font-size:16px;padding:11px 0}.big-number{font-size:100px}th,td{padding-top:13px;padding-bottom:13px;font-size:16px}.measurement h3{font-size:28px;min-height:66px}.measurement p{font-size:17px;min-height:75px}.closing-line{font-size:18px}.sources-list li{margin-bottom:14px}}@media print{body{padding-bottom:0}} + +@media screen and (min-width:761px) and (max-height:800px){#starting-point .statement{font-size:25px;line-height:1.32}#starting-point .lined-list>div{padding:9px 0}#starting-point .proposal{margin-top:16px;padding-top:14px}#starting-point .proposal p{font-size:18px;line-height:1.4}} diff --git a/src/pages/onlc/index.astro b/src/pages/onlc/index.astro new file mode 100644 index 0000000..19891e3 --- /dev/null +++ b/src/pages/onlc/index.astro @@ -0,0 +1,233 @@ +--- +const chapters = ['The problem & opportunity', 'Our understanding', 'The content gap', 'The people', 'The direction', 'Four connected solutions', 'Content in practice', 'The learning loop', 'AI and people', 'The operating rhythm', 'What we measure', 'The starting point', 'Evidence & assumptions']; +--- + + +
+ + + + + + +