/** * The course index and the lesson page. * * Colours are written as literals, like every other sheet here, because * theme-dark.css is generated from these files and a value hidden behind a * variable is a value the generator cannot map. */ /* The theme prints its own post title above our block; ours carries the heading, the number and the reading time, so the theme's is turned off - the same arrangement the card page and the practice hub already use. */ body:has(.tc-course) .wp-block-post-title, body:has(.tc-course) .entry-title, body:has(.tc-course) .page-title, body:has(.tl-page) .wp-block-post-title, body:has(.tl-page) .entry-title, body:has(.tl-page) .page-title{display:none !important;} /* And the theme's byline. A lesson is not a blog post: the date it was imported and the account that imported it say nothing to a reader, and "Aug 26, 2026 - by" with no name after it says less than nothing. The whole meta row goes, not just its parts, or the dash it is joined with stays behind on its own line. */ body:has(.tl-page) .wp-block-post-date, body:has(.tl-page) .wp-block-post-author, body:has(.tl-page) .wp-block-post-author-name, body:has(.tl-page) .wp-block-post-terms, body:has(.tl-page) .entry-meta, body:has(.tl-page) .post-meta{display:none !important;} body:has(.tl-page) .wp-block-post-navigation-link, body:has(.tl-page) .post-navigation-links, body:has(.tl-page) .nav-links, body:has(.tl-page) .post-navigation, body:has(.tl-page) .wp-block-query-pagination{display:none !important;} body:has(.tl-page) .wp-block-group:has(> .wp-block-post-navigation-link), body:has(.tl-page) .wp-block-group:has(> .wp-block-post-date), body:has(.tl-page) .wp-block-group:has(> .wp-block-post-author), body:has(.tl-page) .wp-block-group:has(> .wp-block-post-author-name){display:none !important;} /* The emptied title wrapper is collapsed in page-blocks.css, for every block at once rather than for this one. */ /* ---------------------------------------------------------------- index */ .tc-course{max-width:1200px;margin:40px auto 48px;padding:0 20px;font-family:var(--wp--preset--font-family--body-font,-apple-system,BlinkMacSystemFont,'Inter',sans-serif);color:#16181d;} .tc-course .tc-head{display:flex;align-items:center;gap:28px;margin:0 0 32px;} .tc-course .tc-head-left{flex:0 0 auto;text-align:left;} .tc-course .tc-head-divider{flex:0 0 2px;align-self:center;background:#4f46e5;height:56px;} .tc-course .tc-eyebrow{font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#4f46e5;margin-bottom:8px;} .tc-course .tc-title{font-size:34px;margin:0;color:#16181d;letter-spacing:-.02em;} .tc-course .tc-sub{flex:1;max-width:480px;text-align:left;color:#6b7078;font-size:15px;line-height:1.6;margin:0;} .tc-course .tc-empty{color:#6b7078;font-size:15px;} .tc-course .tc-empty-admin{color:#6b7078;font-size:15px;margin-top:-8px;} .tc-course .tc-empty-admin a{color:#4f46e5;font-weight:600;} .tc-course .tc-progress{margin:0 0 32px;} /* The count on the left, the way in on the right. The bar that ran across the top said the same thing as the count under it and spent a whole line saying it. */ .tc-course .tc-progress-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;} .tc-course .tc-progress-txt{flex:1 1 auto;font-size:15px;color:#6b7078;} .tc-course .tc-progress-go{font-size:15px;font-weight:600;color:#fff;background:#4f46e5;border-radius:999px;padding:9px 18px;line-height:1;text-decoration:none;transition:background .15s;} .tc-course .tc-progress-go:hover{background:#4338ca;color:#fff;} .tc-course .tc-progress-reset{flex:0 0 auto;background:none;border:none;padding:0;font-family:inherit;font-size:15px;color:#6b7078;cursor:pointer;text-decoration:underline;} .tc-course .tc-progress-reset:hover{color:#4f46e5;} .tc-course .tc-parts{display:flex;flex-direction:column;gap:38px;} /* A part heading, with the rule running out to the count on the right. */ .tc-course .tc-part-head{display:flex;align-items:center;gap:16px;margin:0 0 6px;} .tc-course .tc-part-title{font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#4f46e5;margin:0;flex:0 0 auto;} .tc-course .tc-part-rule{flex:1 1 auto;height:1px;background:#e6e7eb;} .tc-course .tc-part-meta{flex:0 0 auto;font-size:15px;color:#6b7078;} /* The list is a timeline: a line down the left, a circle on it per lesson. The line is drawn per row rather than once for the list, because the part already read has to be violet down to the circle it stopped at, and one line for the whole list could not be two colours. */ .tc-course .tc-lessons{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;} .tc-course .tc-lessons > p{display:contents;} .tc-course .tc-lessons > *:not(.tc-lesson):not(p){display:none;} .tc-course .tc-lesson{position:relative;} .tc-course .tc-lesson::before{content:"";position:absolute;left:41px;top:-10px;bottom:-10px;width:2px;background:#e6e7eb;} .tc-course .tc-lesson:first-child::before{top:38px;} .tc-course .tc-lesson:last-child::before{bottom:auto;height:38px;} .tc-course .tc-lesson.tc-done::before{background:#4f46e5;} /* One card shape for every row, the same as the promo cards on the home page: white surface, 16px radius, a soft shadow and a small lift on hover. Before this only the next-up row was boxed and the rest were bare, so the list appeared to shift sideways as the eye went down it. */ .tc-course .tc-lesson-link{position:relative;display:flex;align-items:flex-start;gap:18px;background:#fff;border:1px solid #e6e7eb;border-radius:16px;padding:18px 22px;text-decoration:none;color:inherit;box-shadow:0 6px 20px -14px rgba(16,20,30,.25);transition:transform .15s, box-shadow .15s, border-color .15s;} .tc-course .tc-lesson-link:hover{transform:translateY(-2px);border-color:#4f46e5;color:#16181d;} /* The circle sits on the line, so it needs a background of its own to break the line behind it and a stacking context to sit above it. */ .tc-course .tc-num{position:relative;z-index:1;flex:0 0 40px;width:40px;height:40px;border:2px solid #e6e7eb;border-radius:999px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#6b7078;line-height:1;} .tc-course .tc-num-tick{display:none;font-size:15px;font-weight:700;} .tc-course .tc-lesson.tc-done .tc-num{background:#4f46e5;border-color:#4f46e5;color:#fff;} .tc-course .tc-lesson.tc-done .tc-num-n{display:none;} .tc-course .tc-lesson.tc-done .tc-num-tick{display:block;} .tc-course .tc-lesson-main{flex:1;min-width:0;overflow-wrap:break-word;padding-top:2px;} .tc-course .tc-lesson-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .tc-course .tc-lesson-title{font-size:17px;font-weight:600;color:#16181d;line-height:1.35;} .tc-course .tc-lesson-link:hover .tc-lesson-title{color:#4f46e5;} .tc-course .tc-lesson-sum{display:block;font-size:15px;color:#6b7078;line-height:1.55;margin-top:4px;} .tc-course .tc-lesson-meta{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding-top:12px;} .tc-course .tc-min{font-size:15px;color:#6b7078;white-space:nowrap;} /* Read: struck through and stepped back, so the eye skips it on the way to the one still to do. */ .tc-course .tc-lesson.tc-done .tc-lesson-title{color:#6b7078;text-decoration:line-through;} .tc-course .tc-lesson.tc-done .tc-lesson-sum{color:#6b7078;opacity:.75;} /* Next up. The chip is hidden in the markup and revealed by the script. */ .tc-course .tc-chip{font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#4f46e5;background:#ece9ff;border-radius:999px;padding:3px 12px;line-height:1.4;} .tc-course .tc-lesson.tc-current .tc-lesson-link{background:#f4f3ff;border-color:#4f46e5;color:#16181d;} .tc-course .tc-lesson.tc-current .tc-num{border-color:#4f46e5;color:#4f46e5;} .tc-course .tc-lesson.tc-current .tc-lesson-title{font-weight:700;color:#16181d;} /* ----------------------------------------------------------- one lesson */ .tl-page{max-width:1200px;margin:40px auto 48px;padding:0 20px;font-family:var(--wp--preset--font-family--body-font,-apple-system,BlinkMacSystemFont,'Inter',sans-serif);color:#16181d;} .tl-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 26px;} .tl-back{font-size:15px;font-weight:600;color:#4f46e5;text-decoration:none;} .tl-back:hover{text-decoration:underline;color:#4f46e5;} .tl-crumb{display:flex;align-items:center;gap:10px;font-size:15px;color:#6b7078;} .tl-crumb-part{padding:3px 10px;border-radius:999px;background:#ece9ff;color:#4f46e5;font-weight:600;line-height:1.4;} /* Label, title, summary, stacked. The vertical rule and the two-column arrangement went with the head moving into the reading column: side by side they needed something between them, in a single column they do not. */ .tl-head{margin:0 0 26px;} .tl-eyebrow{font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#4f46e5;margin-bottom:10px;} .tl-title{font-size:34px;margin:0 0 12px;letter-spacing:-.02em;color:#16181d;line-height:1.2;overflow-wrap:break-word;} .tl-sum{max-width:100%;color:#6b7078;font-size:17px;line-height:1.6;margin:0;} .tl-body{font-size:17px;line-height:1.7;color:#4b5058;} .tl-body p{font-size:17px;line-height:1.7;color:#4b5058;margin:0 0 18px;} /* Headings inside a lesson use the site's own section label: uppercase, violet, 15px at weight 600 with the same tracking as the eyebrow on the card page, the practice hub and the study guide. They had been plain bold black, which is nobody's idiom here. The hairline above does the work the size no longer does - it separates sections without shouting. */ .tl-body h2, .tl-body h3{font-family:inherit;font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#4f46e5;margin:34px 0 14px;} /* A heading that opens the body has nothing above it to be separated from. */ .tl-body > h2:first-child, .tl-body > h3:first-child{margin-top:0;} .tl-body ul{margin:0 0 18px;padding-left:22px;} .tl-body li{font-size:17px;line-height:1.7;color:#4b5058;margin-bottom:8px;} .tl-body strong{color:#16181d;font-weight:600;} .tl-body em{font-style:italic;} .tl-body a{color:#4f46e5;} .tl-h{font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b7078;margin:0 0 14px;} .tl-cards{margin:40px 0 0;} /* The card row reuses the deck grid, so only the number of columns and the width limit are set here - everything else comes from cards.css. */ /* Nothing about the columns is restated here. cards.css already steps the deck grid 6 / 4 / 3 / 2 across its own breakpoints, and now that the lesson is as wide as the rest of the site those steps are the right ones - a card row in a lesson should break exactly where a card row anywhere else breaks. */ /* The same cloth the quiz deals its card onto: flat violet-grey with the dotted grid at the same 15px pitch and the same opacity, a hairline round it and the same inset shadow. Values are copied rather than shared, because these sheets keep their colours as literals so the dark file can be generated from them - so if the quiz's cloth ever changes, this one has to be changed with it. */ .tl-cards-wrap{ max-width:100%;margin:0;padding:22px;border-radius:18px; background-color:#edeef3; background-image:radial-gradient(rgba(79,70,229,.13) 1.5px, transparent 1.5px); background-size:15px 15px; border:1px solid #e0e2ea; box-shadow:inset 0 1px 3px rgba(16,20,30,.06); color:#16181d; } .tl-exercise{margin:40px 0 0;background:#f4f3ff;border:1px solid #ece9ff;border-radius:16px;padding:22px 26px;color:#4b5058;} .tl-exercise-body p{font-size:16px;line-height:1.65;color:#4b5058;margin:0 0 14px;} .tl-exercise-cta{display:inline-block;font-size:15px;font-weight:600;line-height:1;color:#fff;background:#4f46e5;border-radius:999px;padding:11px 20px;text-decoration:none;transition:background .15s;} .tl-exercise-cta:hover{background:#4338ca;color:#fff;} /* The foot of a lesson: one row, one line. Where you have been on the left, what to do next on the right. The two controls on the right sit on the same baseline at the same height and differ only in fill - outlined to mark the lesson read, filled to move on, because moving on is what most readers want. Same pill shape and violet as the promo banners below them, so the page ends in one voice rather than three. The lesson title inside each is one line with an ellipsis: a nineteen- word title is not worth reflowing the row for, and the full name is one click away. */ /* Two rows. Three pills do not fit an 820px column side by side, and wrapping them left the pair on separate lines with the forward one floating in the middle of the page. */ .tl-ad{margin:34px 0 0;} .tl-foot{display:flex;flex-direction:column;gap:14px;margin:36px 0 0;} /* Mark-as-read sits on the right edge, over the forward pill. On the left it had nothing under it and the whole block leaned. */ .tl-foot-mark{display:flex;justify-content:flex-end;} .tl-foot-nav{display:flex;gap:14px;} /* Half each, and half each whatever happens. Letting the remaining one grow when a lesson has a single neighbour produced a violet bar the width of the page with its text in the far corner and nothing in the rest of it. */ .tl-foot-nav > *{flex:0 1 calc(50% - 7px);min-width:0;} /* The first lesson has no way back, so its forward pill would sit on the left where the back one usually is. It belongs on its own side. */ .tl-foot-nav > .tl-nav-next:first-child{margin-left:auto;} /* Mark-as-read. Both labels are in the markup, stacked in one grid cell with the inactive one hidden but still taking its space, so the button is always as wide as the longer of the two. It used to be relabelled by the script, which made it shrink the instant it was pressed and drag everything beside it sideways under the cursor. */ .tl-done{margin:0;} .tl-done-btn{display:inline-flex;align-items:center;gap:12px;font-family:inherit;font-size:16px;font-weight:600;color:#16181d;background:#fff;border:1px solid #e6e7eb;border-radius:999px;padding:14px 24px;line-height:1.2;cursor:pointer;white-space:nowrap;transition:background .15s, border-color .15s, color .15s;} .tl-done-btn::before{content:"";flex:0 0 auto;width:22px;height:22px;border:2px solid #c4c7ce;border-radius:999px;background:#fff;transition:background .15s, border-color .15s;} .tl-done-labels{display:grid;} .tl-done-a, .tl-done-b{grid-area:1 / 1;text-align:left;} .tl-done-b{visibility:hidden;} .tl-done-btn.tl-is-done .tl-done-a{visibility:hidden;} .tl-done-btn.tl-is-done .tl-done-b{visibility:visible;} .tl-done-btn:hover{border-color:#4f46e5;background:#f4f3ff;color:#16181d;} .tl-done-btn:hover::before{border-color:#4f46e5;background:#fff;} .tl-done-btn.tl-is-done{background:#f4f3ff;border-color:#4f46e5;color:#16181d;} .tl-done-btn.tl-is-done::before{content:"\2713";display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;background:#4f46e5;border-color:#4f46e5;} .tl-done-btn.tl-is-done:hover{background:#ece9ff;color:#16181d;} .tl-done-btn:focus-visible{outline:2px solid #4f46e5;outline-offset:2px;} /* Back and forward are the same control twice: same pill, same height, same round chip, the same label over the same lesson name - mirrored, and filled only on the one that carries you forward. */ .tl-nav-prev, .tl-nav-next{display:inline-flex;align-items:center;gap:18px;max-width:100%;min-width:0;border-radius:999px;padding:10px 26px 10px 10px;text-decoration:none;transition:background .15s, border-color .15s, color .15s;} .tl-nav-next{padding:10px 10px 10px 26px;} .tl-nav-prev{border:1px solid #e6e7eb;background:#fff;color:#16181d;} .tl-nav-prev:hover{border-color:#4f46e5;background:#f4f3ff;color:#16181d;} .tl-nav-next{border:1px solid #4f46e5;background:#4f46e5;color:#fff;} .tl-nav-next:hover{background:#4338ca;border-color:#4338ca;color:#fff;} .tl-nav-prev:focus-visible, .tl-nav-next:focus-visible{outline:2px solid #4f46e5;outline-offset:2px;} .tl-nav-text{display:flex;flex-direction:column;gap:3px;min-width:0;} .tl-nav-next .tl-nav-text{text-align:right;margin-left:auto;} .tl-nav-lbl{font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;} .tl-nav-prev .tl-nav-lbl{color:#6b7078;} .tl-nav-next .tl-nav-lbl{color:#fff;} .tl-nav-title{font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .tl-nav-prev .tl-nav-title{color:#16181d;} .tl-nav-next .tl-nav-title{color:#fff;} .tl-nav-prev:hover .tl-nav-title{color:#4f46e5;} .tl-nav-arrow{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;font-size:17px;line-height:1;transition:background .15s, border-color .15s;} .tl-nav-prev .tl-nav-arrow{color:#4f46e5;background:#f4f3ff;} .tl-nav-prev:hover .tl-nav-arrow{color:#4f46e5;background:#ece9ff;} .tl-nav-next .tl-nav-arrow{color:#fff;background:rgba(255,255,255,.2);} .tl-nav-next:hover .tl-nav-arrow{color:#fff;background:rgba(255,255,255,.3);} /* The reading column. The block is as wide as every other block on the site; the text inside it is not, because a 1200px line of prose is about 170 characters and the eye loses the start of the next line. Centred, not left-aligned. Pinned to the left edge of a 1200px block it leaves a third of the page empty on the right and reads as a layout that broke rather than one that was chosen. The card row keeps to the same column. A row of cards running wider than the paragraph above it steps outside the lesson for no reason - six cards across 820px are still a comfortable size. Only the promo banners at the very bottom use the full block, as they do on every other page. */ /* The head spans the block; everything that gets read sits in a column of 820px. At the block's full width a line runs to about 170 characters and the eye loses the start of the next one, which is the whole reason for the narrower measure. */ .tl-head, .tl-top, .tl-ad, .tl-body, .tl-cards, .tl-exercise, .tl-foot{max-width:820px;margin-left:auto;margin-right:auto;} /* --- phones ------------------------------------------------------------- Two steps rather than one. 640px is where the two-column pieces stop fitting side by side; 430px is a phone held upright, where the horizontal budget is genuinely tight and the gutters, the number column and the card padding all have to give something back. Everything that is tapped rather than read gets a full-width target at the narrow step: a 15px underlined word is a fine mouse target and a poor thumb one. Nothing drops below the site's 15px floor. */ @media(max-width:640px){ .tc-course{padding:0 16px;} .tc-course .tc-head{flex-direction:column;align-items:flex-start;gap:12px;} .tc-course .tc-head-divider{display:none;} .tc-course .tc-title{font-size:28px;} .tc-course .tc-sub{max-width:100%;} .tc-course .tc-parts{gap:26px;} .tc-course .tc-lesson-link{padding:12px 14px 14px 14px;gap:14px;border-radius:14px;} .tc-course .tc-lesson-title{font-size:16px;} .tc-course .tc-part-head{gap:12px;} .tl-page{padding:0 16px;} .tl-head{margin-bottom:22px;} .tl-title{font-size:26px;} .tl-sum{font-size:16px;} .tl-body,.tl-body p,.tl-body li{font-size:16px;} .tl-body h2, .tl-body h3{margin-top:28px;} .tl-cards,.tl-exercise{margin-top:30px;} .tl-foot{margin-top:30px;} .tl-exercise{padding:18px 18px;border-radius:14px;} .tl-nav-prev:hover,.tl-nav-next:hover{transform:none;} } @media(max-width:430px){ /* A 40px circle is a ninth of the screen. Shrinking it moves the line it sits on, so both step together or the timeline goes crooked. */ .tc-course .tc-num{flex:0 0 32px;width:32px;height:32px;font-size:15px;} .tc-course .tc-lesson::before{left:31px;} .tc-course .tc-lesson:first-child::before{top:30px;} .tc-course .tc-lesson:last-child::before{height:30px;} .tc-course .tc-lesson-link{padding:12px 12px 14px 14px;gap:12px;} .tc-course .tc-lesson-meta{padding-top:8px;} /* The count beside a part heading is the first thing to go: the rule and the title have to fit before it does. */ .tc-course .tc-part-meta{display:none;} /* Two lines of summary is enough to tell one lesson from another; more turns the list into a wall and pushes the last lessons off the fold. */ .tc-course .tc-lesson-sum{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .tc-course .tc-lesson-meta{gap:5px;} /* Progress: the button takes the row, the reset drops under it, and both are big enough to hit. */ .tc-course .tc-progress-row{gap:8px;} .tc-course .tc-progress-txt{flex:1 0 100%;} .tc-course .tc-progress-go{flex:1;text-align:center;padding:12px 18px;} .tc-course .tc-progress-reset{flex:1 0 100%;text-align:left;padding:4px 0;} .tl-top{gap:6px;} .tl-back{padding:4px 0;} .tl-crumb{flex-wrap:wrap;gap:8px;} .tl-title{font-size:24px;} .tl-exercise-cta{display:block;text-align:center;padding:13px 20px;} .tl-foot{flex-direction:column;align-items:stretch;gap:12px;} .tl-foot-go{flex-direction:column-reverse;align-items:stretch;gap:10px;} /* Both cards go full width and keep their own shape - the checkbox on the left of one, the arrow chip on the right of the other. Centring the contents, as the old pill wanted, would have put the arrow in the middle of the card. */ /* All three go full width and keep their own shape - the checkbox on the left of one, the chip on the outer edge of each of the others. The prev rule here used to strip its padding back to a bare link, which is what it was before the pair was matched. */ /* Stacked, because two of these across a phone leaves room for the label and about four characters of the lesson name. */ .tl-nav-prev{padding:10px 20px 10px 10px;} .tl-nav-next{padding:10px 10px 10px 20px;} } /* --- where the pair stops fitting --------------------------------------- Half of an 820px column is about 400px, which holds a label and a lesson name. Half of a 680px one is 330px, and by then the label has wrapped to two lines and the name is down to "What a ..." - which is no use to anybody. They stack before that happens, and the stacking point is the width at which the pair stops fitting, not the width a phone happens to be. Forward goes first: what the reader wants next should not be the thing they scroll past. */ @media(max-width:780px){ .tl-foot-nav{flex-direction:column;} .tl-foot-nav > *{flex:0 0 auto;} .tl-foot-nav > .tl-nav-next{order:-1;margin-left:0;} /* Full width once stacked, and the mark button with them - a pill floating at one edge of a narrow screen with a full-width one under it reads as a mistake. */ .tl-foot-mark{justify-content:stretch;} .tl-done-btn{width:100%;justify-content:flex-start;padding:14px 22px;} /* Two words of label on two lines pushes the pill taller than its partner; there is room for one line once these are full width. */ .tl-nav-lbl{white-space:nowrap;} } /* --- the block's own width, against the theme's layout rule -------------- Block themes print .wp-container-… > * to clamp every child of the post content to the theme's content size. It carries the same specificity as a plain class and lands after our stylesheet, so it wins on order alone. Naming the content container puts our width back in front without !important - which would also override the narrower widths set above for phones. Last in the file, because @media adds no specificity and a later plain rule wins on paper as well as on screen. */ .entry-content .tc-course, .wp-block-post-content .tc-course, .wp-site-blocks .tc-course{max-width:1200px;} .entry-content .tl-page, .wp-block-post-content .tl-page, .wp-site-blocks .tl-page{max-width:1200px;} /* Printing a lesson: the chrome goes, the words stay. */ @media print{ .tl-page{max-width:100%;padding:0;} }