.tip-card .hand-note { font-family: var(--font-cond); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; font-size: 12px; display: block; margin-bottom: 4px; color: var(--coral-deep); } .res-title { font-family: var(--font-cond); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; font-size: 13px; color: var(--coral-ink); margin: 24px 0 10px; display: flex; align-items: center; gap: 8px; } .res-title::before { content: '✦'; color: var(--coral-ink); font-size: 12.5px; } .res-list { display: grid; gap: 10px; max-width: 560px; } .res-item { display: flex; align-items: center; gap: 14px; background: var(--surface); border-radius: var(--radius-card); padding: 12px 16px; box-shadow: var(--shadow-sm); transition: transform .15s var(--ease-pop), box-shadow .15s; text-decoration: none; color: var(--ink); } .res-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .res-ico { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; background: var(--cream); } .res-body { flex: 1; min-width: 0; } .res-body .nm { font-family: var(--font-cond); font-weight: 600; font-size: 14px; } .res-body .sz { font-family: var(--font-cond); font-size: 12px; color: var(--muted); } .res-get { flex: none; font-family: var(--font-cond); font-weight: 600; font-size: 12.5px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--teal-ink); display: inline-flex; align-items: center; gap: 5px; } .res-item:hover .res-get { color: var(--coral-ink); } .complete-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 26px; margin-bottom: 26px; } /* 8.1: the completion button takes the client's marine. Scoped here so the copper .btn.primary elsewhere on the site is untouched. */ /* 1.4.9 turns this button marine, and 1.4.2 says a material-class element that changes colour takes the METAL version of the new colour, not a flat fill — the same treatment Visit the showcase already has. It was flat. */ .complete-row #complete-btn { background-color: var(--marine); background-image: linear-gradient(118deg, rgba(226,242,247,.30), transparent 42%), repeating-linear-gradient(95deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px), var(--marine-metal); color: var(--marine-ink) !important; -webkit-text-fill-color: var(--marine-ink) !important; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(226,242,247,.38), inset 0 -1px 0 rgba(10,35,45,.4); } .complete-row #complete-btn:hover { filter: brightness(1.08); } .complete-row .done-tag { font-family: var(--font-cond); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; font-size: 13px; color: var(--teal-ink); } .side-stick { position: sticky; top: 80px; display: grid; gap: 16px; } @media (max-width: 1024px) { .side-stick { position: static; } } .progress-card { background: var(--surface); border-radius: var(--radius-card); padding: 20px 22px; box-shadow: var(--shadow-sm); } .progress-card .pc-top { display: flex; justify-content: space-between; align-items: baseline; } .progress-card .pc-label { font-family: var(--font-cond); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; font-size: 13px; color: var(--ink); } .progress-card .pc-count { font-family: var(--font-stencil); font-size: 18px; color: var(--teal-ink); } /* --paper-2 equals --surface in the dark theme, so the track was invisible against the card and an empty bar looked like a missing bar. Derived from the ink instead, so it reads in both themes. Also thicker, per §8.2's "只將進度條加粗加大". (client feedback 2026-08-08) */ .pbar { margin-top: 12px; height: 14px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--ink) 18%, transparent); box-shadow: inset 0 1px 2px rgba(0,0,0,.18); } .pbar .pfill { height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, var(--teal-ink), var(--coral)); transition: width .6s var(--ease-brush); } .pc-reset { margin-top: 12px; font-family: var(--font-cond); font-size: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); background: none; border: 0; cursor: pointer; padding: 0; } .pc-reset:hover { color: var(--coral-ink); } .curr-card { background: var(--surface); border-radius: var(--radius-card); padding: 14px; box-shadow: var(--shadow-sm); } .curr-card .ch { font-family: var(--font-cond); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; font-size: 13px; color: var(--coral-ink); padding: 6px 10px 12px; } .unit-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; padding: 11px 10px; border-radius: 10px; font-family: var(--font-body); color: var(--ink); transition: background .15s; } .unit-row:hover { background: var(--cream); } .unit-row.current { background-color: #cab389; background-image: var(--oak-grain); background-size: 180px 70px; } .unit-row .st { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-cond); font-size: 12px; font-weight: 600; background: var(--paper-2); color: var(--muted); transition: background .25s, color .25s; } .unit-row.done .st { background: #4d6625; color: #f1f3e6; } .unit-row.current .st { background: var(--coral-fill); color: var(--coral-fill-ink); } .unit-row .ut { flex: 1; min-width: 0; font-family: var(--font-cond); font-weight: 500; font-size: 13.5px; line-height: 1.3; color: var(--ink); } .unit-row.current .ut { color: #3f3930; } .unit-row .ud { flex: none; font-family: var(--font-cond); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .unit-row.current .ud { color: #5e4a3d; } .unit-row .now { display: inline-block; font-family: var(--font-cond); font-size: 12.5px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--coral-deep); } /* 56: the client's mauve replaces the olive. It is a light mid-tone, so the ink flips dark — the cream that read on olive measures 2.1:1 on this. */ .teach-card { background-color: #a498a6; color: #191419; border-radius: var(--radius-card); padding: 18px 20px; box-shadow: var(--shadow-sm); display: flex; gap: 14px; align-items: center; } .teach-card img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex: none; } .teach-card .tq { font-family: var(--font-body); font-style: italic; font-size: 16.5px; line-height: 1.5; } .finish-card { display: none; position: relative; overflow: hidden; text-align: center; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 54px 30px 46px; margin-top: 26px; } .finish-card.show { display: block; } .finish-card .fc-star { font-size: 34px; color: var(--coral-ink); display: inline-block; } .finish-card h2 { font-family: var(--font-marker); font-weight: 600; font-size: clamp(28px,3.4vw,44px); margin: 10px 0 8px; color: var(--ink); } .finish-card p { color: var(--muted); max-width: 52ch; margin: 0 auto 8px; } .finish-card .cert { display: inline-block; margin: 18px auto 22px; background-color: #cab389; background-image: var(--oak-grain); background-size: 240px 100px; color: #474138; border-radius: var(--radius-card); padding: 18px 34px; box-shadow: var(--shadow-sm); transform: rotate(-1deg); } .finish-card .cert .c1 { font-family: var(--font-cond); letter-spacing: var(--tracking-label); text-transform: uppercase; font-size: 12px; color: #5e4a3d; } .finish-card .cert .c2 { font-family: var(--font-marker); font-weight: 600; font-size: 24px; margin: 4px 0; } .finish-card .cert .c3 { font-family: var(--font-cond); font-size: 13px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--coral-deep); } .finish-card .fc-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .next-band { margin-top: 40px; } .next-band .thumb { flex: 0 0 150px; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 1/1; } .next-band .thumb img { width: 100%; height: 100%; object-fit: cover; } /* ============================================================ BLOG POST (article) ============================================================ */ .post-banner { position: relative; aspect-ratio: 48/9; min-height: 220px; overflow: hidden; border-radius: var(--r-promo); box-shadow: var(--shadow); } .post-banner img { width: 100%; height: 100%; object-fit: cover; } .post-banner .chip-h1 { position: absolute; left: 5%; bottom: 14%; overflow: hidden; border-radius: 4px; box-shadow: 0 8px 26px rgba(0,0,0,.4); max-width: 64%; } .post-banner .chip-inner { position: relative; background-color: var(--banner-bg); background-image: var(--banner-grain); background-size: 380px 150px; padding: 16px 26px; } .post-banner h1 { position: relative; font-family: var(--font-marker); font-weight: 600; font-size: clamp(20px,2.6vw,40px); line-height: 1.12; margin: 0; color: var(--banner-ink); } .byline { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; background: var(--surface); border-radius: var(--radius-pill); padding: 8px 18px 8px 8px; box-shadow: var(--shadow-sm); } .byline img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } .byline strong { font-family: var(--font-cond); font-weight: 600; color: var(--ink); font-size: 14px; } .byline .hand-note { font-family: var(--font-cond); font-size: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); } /* #27: 760px at 16.5px is about 46em, and it measured 104 characters a line at 1692px — counted with Range.getClientRects(), not estimated — against the 65-75 a sustained read wants. The cap is now in ch so it tracks the type rather than a pixel count someone has to remember to update, and 760px stays as the ceiling so nothing gets WIDER than it used to be. .page-lead on FAQ was already capped this way at 74ch; this is the same device. 58ch resolves to 550px here, and the corpus then measures min 57 / median 67 / max 80 characters a line — counted with Range.getClientRects() over every character INCLUDING SPACES, because a space takes measure like any other glyph and leaving them out under-reports a line by about a sixth. The median is the statistic that matters: a fixed column always has a spread, and the 80 is one space-light paragraph, not the typical line. */ /* #27: 65-75 characters per line, counted per LINE BOX with Range rects (not paragraph length / line count, which averages the short last line in and reads ~20 low). `ch` is the width of "0", which in this face is 0.57em against a 0.44em average glyph, so a ch value reads about 1.6x the real character count: 68ch measured 89. 55ch measures 70-73. */ .article { max-width: min(760px, 55ch); margin: 0 auto; font-size: 16.5px; } /* #27 heading inversion. Every CONTENT section heading on a post carries .bp-sec and is set to 26px by the page; this rule matches only the headings the page appends AFTER the content — Comments — and it was painting them at 34px. So the least important heading on the page outranked all twenty-one of the real ones. Sized below the content step rather than above it: the trailing blocks are apparatus, not chapters. */ .article h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(21px,1.6vw,24px); letter-spacing: var(--tracking-display); text-transform: uppercase; margin: 44px 0 14px; color: var(--ink); } .article h3 { font-family: var(--font-cond); font-weight: 600; font-size: 19px; margin: 30px 0 10px; color: var(--ink); } .article p { font-size: 16.5px; line-height: 1.75; margin: 0 0 18px; color: var(--ink); } .article figure { margin: 30px 0; } .article figure img { border-radius: var(--radius-card); width: 100%; box-shadow: var(--shadow-sm); } .pull-quote { font-family: var(--font-marker); font-weight: 600; font-size: clamp(20px,2.2vw,28px); line-height: 1.4; padding: 26px 30px; margin: 34px 0; background-color: #cab389; background-image: var(--oak-grain); background-size: 300px 120px; color: #474138; border-radius: var(--radius-card); position: relative; box-shadow: var(--shadow-sm); } .pull-quote::before { content: "✦"; position: absolute; top: -14px; left: 24px; color: var(--coral-deep); font-size: 24px; } .toc { background: var(--surface); border-radius: var(--radius-card); padding: 24px 28px; margin: 30px 0 8px; box-shadow: var(--shadow-sm); } .toc .toc-title { font-family: var(--font-cond); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; font-size: 14px; color: var(--coral-ink); margin: 0 0 12px; } .toc ol { margin: 0; padding-left: 22px; font-size: 15px; color: var(--ink); } .toc > ol > li { font-family: var(--font-cond); font-weight: 600; padding: 4px 0; } .toc a:hover { color: var(--coral-ink); } .comment { display: flex; gap: 14px; margin-bottom: 20px; } .comment img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; } .comment .bubble { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 14px 18px; font-size: 14.5px; color: var(--ink); } .comment .bubble strong { font-family: var(--font-cond); } .related-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .prevnext { display: flex; justify-content: space-between; gap: 14px; margin: 44px 0 0; flex-wrap: wrap; } .post-field { width: 100%; border: 1px solid var(--line); border-radius: var(--r-sharp); background: var(--cream); padding: 12px 14px; font-family: var(--font-body); font-size: 14.5px; color: var(--ink); resize: vertical; } .post-field:focus { outline: 2px solid var(--coral); border-color: transparent; } @media (max-width: 700px) { .post-banner { aspect-ratio: auto; height: 240px; } .post-banner .chip-h1 { max-width: 88%; left: 6%; } .related-rail { grid-template-columns: 1fr; } } /* ============================================================ CART / CHECKOUT + AUTH ============================================================ */ .checkout-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; align-items: start; padding-bottom: 70px; } @media (max-width: 880px) { .checkout-grid { grid-template-columns: 1fr; } } .steps { display: flex; gap: 8px; align-items: center; margin: 22px 0 26px; flex-wrap: wrap; } .step { display: flex; align-items: center; gap: 9px; font-family: var(--font-cond); font-size: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); } .step .sn { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--muted); font-weight: 600; box-shadow: var(--shadow-sm); } .step.active { color: var(--ink); } /* 41: the live step's disc is the client's marine, with the ink the token block already pairs with it. */ .step.active .sn { background: var(--marine); color: var(--marine-ink); } .step.done .sn { background: #4d6625; color: #f1f3e6; } .step-arrow { color: var(--muted); opacity: .5; } .line-item { display: grid; grid-template-columns: 78px 1fr auto; gap: 16px; align-items: center; background: var(--surface); border-radius: var(--radius-card); padding: 14px; box-shadow: var(--shadow-sm); margin-bottom: 14px; } .line-item .li-thumb { width: 78px; height: 78px; border-radius: var(--r-sharp); overflow: hidden; background: var(--wall); } .line-item .li-thumb img { width: 100%; height: 100%; object-fit: cover; } .line-item .li-title { font-family: var(--font-marker); font-weight: 600; font-size: 16px; color: var(--ink); margin: 0 0 3px; } .line-item .li-sub { font-family: var(--font-cond); font-size: 12.5px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); } .line-item .li-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .line-item .li-price { font-family: var(--font-cond); font-weight: 600; font-size: 16px; color: var(--coral-ink); } .qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-pill); overflow: hidden; } .qty button { width: 28px; height: 28px; border: 0; background: var(--cream); color: var(--ink); cursor: pointer; font-size: 15px; line-height: 1; } .qty button:hover { background: var(--coral-fill); color: var(--coral-fill-ink); } .qty .qv { min-width: 30px; text-align: center; font-family: var(--font-cond); font-weight: 600; font-size: 14px; color: var(--ink); } .li-remove { font-family: var(--font-cond); font-size: 12.5px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); background: none; border: 0; cursor: pointer; } .li-remove:hover { color: var(--coral-ink); } .summary { position: sticky; top: 88px; background: var(--surface); border-radius: var(--radius-card); padding: 24px 26px; box-shadow: var(--shadow-sm); } @media (max-width: 880px) { .summary { position: static; } } .summary h3 { font-family: var(--font-cond); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; font-size: 13px; color: var(--coral-ink); margin: 0 0 16px; } .sum-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink); padding: 7px 0; } .sum-row.muted { color: var(--muted); } .sum-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); } .sum-total .l { font-family: var(--font-cond); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; font-size: 13px; color: var(--ink); } .sum-total .v { font-family: var(--font-marker); font-weight: 600; font-size: 26px; color: var(--marine); } .cart-empty { text-align: center; padding: 60px 20px; color: var(--muted); } .co-field { margin-bottom: 14px; } .co-field label { font-family: var(--font-cond); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; font-size: 12.5px; display: block; margin-bottom: 6px; color: var(--ink); } /* #02: the same construct as .field in industrial-2.css, and the same fault. `color:#2b2823` was declared and then declared again as `color:var(--ink)` in the same rule, so only the -webkit-text-fill-color survived — which on theme D painted the card number, address and password at #2b2823 over --cream #211e1a. Measured 1.13:1 from the pixels: no pixel in a filled field was darker than its own background. */ .co-field input, .co-field select { width: 100%; border: 1px solid var(--line); border-radius: var(--r-sharp); background: var(--cream); padding: 12px 14px; font-family: var(--font-body); font-size: 14.5px; color: var(--ink); -webkit-text-fill-color: var(--ink); } .co-field input::placeholder { color: var(--muted); opacity: 1; -webkit-text-fill-color: var(--muted); } .co-field select option { color: var(--ink); background: var(--cream); } .co-field input:focus, .co-field select:focus { outline: 2px solid var(--coral); border-color: transparent; } .co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .co-panel { background: var(--surface); border-radius: var(--radius-card); padding: 26px 28px; box-shadow: var(--shadow-sm); } .co-panel h3 { font-family: var(--font-marker); font-weight: 600; font-size: 20px; color: var(--ink); margin: 0 0 16px; } /* auth */ .auth-wrap { max-width: 460px; margin: 0 auto; padding: 40px 0 80px; } .auth-card { background: var(--surface); border-radius: var(--radius-card); padding: 34px 34px 30px; box-shadow: var(--shadow); } .auth-head { text-align: center; margin-bottom: 24px; } .auth-head .eyebrow { justify-content: center; } .auth-head h1 { font-family: var(--font-marker); font-weight: 600; font-size: clamp(26px,3vw,36px); color: var(--ink); margin: 8px 0 6px; } .auth-head p { font-size: 14px; color: var(--muted); margin: 0; } .auth-steps { display: flex; gap: 6px; margin-bottom: 22px; } .auth-steps .as { flex: 1; height: 5px; border-radius: 99px; background: var(--paper-2); } .auth-steps .as.on { background: var(--coral); } /* 3.9: the username/avatar clause at the point of joining. It sits on the 14px step the stage prompts already use rather than introducing another size into an already-tight band — and larger is the right direction for consent copy. */ .su-terms { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 16px 0 4px; } .su-terms strong { color: var(--ink); font-weight: 600; } .auth-stage { display: none; } .auth-stage.active { display: block; } .auth-foot { text-align: center; margin-top: 18px; font-size: 13.5px; color: var(--muted); } .auth-foot a { color: var(--coral-ink); font-weight: 600; } .plan-opt { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: var(--radius-card); padding: 14px 16px; margin-bottom: 12px; cursor: pointer; transition: border-color .15s, background .15s; } .plan-opt:hover { border-color: var(--coral); } .plan-opt.sel { border-color: var(--coral); background: color-mix(in srgb, var(--coral) 8%, transparent); } .plan-opt .po-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--muted); flex: none; margin-top: 2px; display: grid; place-items: center; } .plan-opt.sel .po-radio { border-color: var(--coral); } .plan-opt.sel .po-radio::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); } .plan-opt .po-name { font-family: var(--font-cond); font-weight: 600; color: var(--ink); } .plan-opt .po-desc { font-size: 12.5px; color: var(--muted); } .plan-opt .po-price { margin-left: auto; font-family: var(--font-cond); font-weight: 600; color: var(--coral-ink); } .btn.full { width: 100%; justify-content: center; } .auth-success { text-align: center; padding: 16px 0; } .auth-success .as-check { width: 64px; height: 64px; border-radius: 50%; background: #4d6625; color: #f1f3e6; display: grid; place-items: center; margin: 0 auto 16px; font-size: 30px; } /* ============ student dashboard ============ */ .dash-hero { position: relative; overflow: hidden; border-radius: var(--radius-card); background-color: var(--band-bg); background-image: var(--band-grain); background-size: var(--band-size, 380px 150px); color: var(--band-ink); box-shadow: var(--shadow); padding: 30px 34px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .dash-hero::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 52px, rgba(0,0,0,.12) 52px 53px); pointer-events: none; } .dash-hero > * { position: relative; z-index: 1; } .dash-avatar { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex: none; border: 3px solid color-mix(in srgb, var(--band-ink) 30%, transparent); box-shadow: 0 6px 18px rgba(0,0,0,.3); } .dash-avatar img { width: 100%; height: 100%; object-fit: cover; } .dash-hi { flex: 1; min-width: 240px; } .dash-hi .eyebrow { color: var(--band-eyebrow); margin-bottom: 6px; } .dash-hi h1 { font-family: var(--font-marker); font-weight: 600; font-size: clamp(26px,3vw,40px); margin: 0 0 6px; color: var(--band-ink); } .dash-hi p { margin: 0; font-size: 14.5px; opacity: .85; } .dash-plan-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-cond); font-weight: 600; font-size: 13px; letter-spacing: var(--tracking-label); text-transform: uppercase; background: var(--coral-fill); color: var(--coral-fill-ink); padding: 5px 12px; border-radius: 999px; margin-top: 10px; } .dash-stats { display: flex; gap: 14px; flex-wrap: wrap; } .dash-stat { background: color-mix(in srgb, var(--band-ink) 12%, transparent); border: 1px solid color-mix(in srgb, var(--band-ink) 22%, transparent); border-radius: 12px; padding: 14px 18px; min-width: 96px; } .dash-stat .v { font-family: var(--font-display-serif); font-weight: 600; font-size: 30px; line-height: 1; color: var(--band-ink); } .dash-stat .k { font-family: var(--font-cond); font-size: 12.5px; letter-spacing: var(--tracking-label); text-transform: uppercase; opacity: .8; margin-top: 5px; } .dash-layout { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 30px; align-items: start; margin-top: 26px; } @media (max-width: 880px) { .dash-layout { grid-template-columns: 1fr; } } .dash-rail { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px; box-shadow: var(--shadow-sm); } @media (max-width: 880px) { .dash-rail { position: static; flex-direction: row; overflow-x: auto; } } .dash-tab { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink); font-family: var(--font-cond); font-weight: 500; font-size: 14px; padding: 11px 13px; border-radius: 9px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; } .dash-tab .ti { width: 18px; height: 18px; flex: none; opacity: .8; } .dash-tab:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); } .dash-tab.active { background: var(--coral-fill); color: var(--coral-fill-ink); } .dash-tab.active .ti { opacity: 1; } .dash-tab .badge { margin-left: auto; font-size: 12.5px; background: color-mix(in srgb, var(--ink) 12%, transparent); padding: 1px 8px; border-radius: 999px; } .dash-tab.active .badge { background: rgba(244,231,207,.25); } .dash-panel { display: none; } .dash-panel.active { display: block; } .dash-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; } .dash-panel-head h2 { font-family: var(--font-display-serif); font-weight: 600; font-size: 22px; letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--ink); margin: 0; display: flex; align-items: center; gap: .5em; } .dash-panel-head h2 .ast { color: var(--marine); font-size: .7em; } .dash-panel-head p { margin: 0; font-size: 13.5px; color: var(--muted); } .dash-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; box-shadow: var(--shadow-sm); } .dash-card + .dash-card { margin-top: 16px; } .resume-card { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .resume-thumb { width: 150px; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; flex: none; box-shadow: var(--shadow-sm); } .resume-thumb img { width: 100%; height: 100%; object-fit: cover; } .resume-body { flex: 1; min-width: 220px; } .resume-body .rk { font-family: var(--font-cond); font-size: 12.5px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--coral-ink); } .resume-body h3 { font-family: var(--font-marker); font-weight: 600; font-size: 20px; margin: 4px 0 12px; color: var(--ink); } .prog { height: 9px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 13%, transparent); overflow: hidden; } .prog > i { display: block; height: 100%; border-radius: 999px; background: var(--coral); } .prog-row { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-cond); font-size: 12px; color: var(--muted); margin-bottom: 7px; } .prog-row b { color: var(--ink); } .mycourse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 18px; } .mc-course { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s; } .mc-course:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .mc-course .cov { aspect-ratio: 16/10; overflow: hidden; position: relative; } .mc-course .cov img { width: 100%; height: 100%; object-fit: cover; } .mc-tier { position: absolute; top: 10px; left: 10px; font-family: var(--font-cond); font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgba(20,17,13,.62); color: #f3ede1; } .mc-tier.fellow { background: var(--coral-fill); color: var(--coral-fill-ink); } .mc-course .body { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .mc-course .body h3 { font-family: var(--font-marker); font-weight: 600; font-size: 15.5px; line-height: 1.2; margin: 0; color: var(--ink); } .mc-course .body .meta { font-family: var(--font-cond); font-size: 12.5px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); } .mc-course .body .btn { margin-top: auto; } .dash-table { width: 100%; border-collapse: collapse; font-family: var(--font-cond); font-size: 14px; } .dash-table th { text-align: left; font-size: 12.5px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 0 14px 11px; border-bottom: 1px solid var(--line); } .dash-table td { padding: 14px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; } .dash-table tr:last-child td { border-bottom: 0; } .dash-table .ord-item { display: flex; align-items: center; gap: 12px; } .dash-table .ord-item img { width: 46px; height: 46px; border-radius: 7px; object-fit: cover; flex: none; } .dash-table .ord-item .t { font-family: var(--font-marker); font-weight: 600; font-size: 14.5px; color: var(--ink); } .ord-tier { font-size: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); } .dash-table .amt { font-family: var(--font-display-serif); font-weight: 600; font-size: 17px; color: var(--ink); } .inv-link { color: var(--coral-ink); cursor: pointer; font-size: 12.5px; } .inv-link:hover { text-decoration: underline; } .discord-card { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; background-color: #4d5a8a; background-image: linear-gradient(135deg, #5865F2 0%, #404a9e 100%); color: #fff; border: 0; } .discord-card .dc-ico { width: 64px; height: 64px; flex: none; display: grid; place-items: center; background: rgba(255,255,255,.14); border-radius: 16px; } .discord-card .dc-ico svg { width: 38px; height: 38px; } .discord-card .dc-body { flex: 1; min-width: 220px; } .discord-card h3 { font-family: var(--font-marker); font-weight: 600; font-size: 21px; margin: 0 0 6px; color: #fff; } .discord-card p { margin: 0; font-size: 13.5px; opacity: .92; max-width: 52ch; } .discord-card .btn { background: #fff !important; color: #404a9e !important; -webkit-text-fill-color: #404a9e !important; flex: none; } .dc-locked { background: var(--surface); background-image: none; color: var(--ink); border: 1px dashed var(--line); } .dc-locked .dc-ico { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--muted); } .dc-locked h3 { color: var(--ink); } .dc-locked p { color: var(--muted); } .dc-locked .btn { background: var(--coral-fill) !important; color: var(--coral-fill-ink) !important; -webkit-text-fill-color: var(--coral-fill-ink) !important; } .set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 620px) { .set-grid { grid-template-columns: 1fr; } } .set-field { display: flex; flex-direction: column; gap: 6px; } .set-field.full { grid-column: 1 / -1; } .set-field label { font-family: var(--font-cond); font-size: 12.5px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); } /* #28: these were #2b2823 on #f3ede1 in BOTH themes — a cream field with dark type sitting in a near-black panel on theme D, with a --line border that measured about 1.03:1 against its own fill, i.e. no visible edge at all. Tokened, and the border derived from --ink so the field has a boundary you can see. A text input is a control, so its edge needs 3:1 against BOTH what it encloses and what it sits in — and here the fill and the panel are within 1.3:1 of each other, so the border is the only boundary there is. --line at 16% alpha reached 1.54:1 (D) / 1.30:1 (A); 42% reached 3.39/2.13, still short on the light theme, because --ink is much closer to the cream page than it is to the dark one. 65% is the first value that clears it in both: 3.59:1 / 3.49:1 (A) and 6.20:1 / 5.49:1 (D), fill and panel respectively. */ .set-field input, .set-field select { font-family: var(--font-cond); font-size: 14.5px; color: var(--ink); -webkit-text-fill-color: var(--ink); background: var(--cream); border: 1px solid color-mix(in srgb, var(--ink) 65%, transparent); border-radius: 9px; padding: 12px 13px; } .set-field input::placeholder { color: var(--muted); opacity: 1; -webkit-text-fill-color: var(--muted); } .set-field select option { color: var(--ink); background: var(--cream); } .set-field input:focus, .set-field select:focus { outline: none; border-color: var(--coral); } .set-row-tog { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); } .set-row-tog:last-of-type { border-bottom: 0; } .set-row-tog .l { font-family: var(--font-marker); font-weight: 600; font-size: 15px; color: var(--ink); } .set-row-tog .d { font-family: var(--font-cond); font-size: 12.5px; color: var(--muted); margin-top: 3px; } .set-tog { flex: none; width: 46px; height: 26px; border-radius: 999px; border: 0; background: color-mix(in srgb, var(--ink) 20%, transparent); position: relative; cursor: pointer; transition: background .2s; margin-top: 3px; } .set-tog::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); transition: transform .2s; } .set-tog.on { background: var(--coral); } .set-tog.on::after { transform: translateX(20px); } /* #28: #9a3b2f is a light-theme red. On the dark page it measured 2.40:1 — the heading and the button label of the one destructive control on the site were the least legible text on it. --danger moves with the theme. */ .danger-zone { border: 1px solid color-mix(in srgb, var(--danger) 50%, var(--line)); border-radius: 14px; padding: 20px 22px; margin-top: 16px; } .danger-zone h3 { font-family: var(--font-marker); font-weight: 600; font-size: 16px; color: var(--danger); margin: 0 0 6px; } .danger-zone p { font-family: var(--font-cond); font-size: 13px; color: var(--muted); margin: 0 0 14px; } .btn.danger { background: transparent; color: var(--danger); -webkit-text-fill-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); } .btn.danger:hover { background: var(--danger); color: #211e1a; -webkit-text-fill-color: #211e1a; } .dash-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--paper); font-family: var(--font-cond); font-size: 13.5px; padding: 13px 22px; border-radius: 999px; box-shadow: 0 12px 30px rgba(20,17,13,.4); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; z-index: 1700; } .dash-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .nav-user { display: inline-flex; align-items: center; gap: 9px; padding: 5px 8px 5px 5px; border-radius: 999px; background: color-mix(in srgb, var(--banner-ink) 12%, transparent); } .nav-user img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; } .nav-user .nm { font-family: var(--font-cond); font-weight: 600; font-size: 13px; color: var(--banner-ink); } /* ============================================================ MOBILE & TABLET POLISH (phones + iPad portrait/landscape) Appended last so it wins the cascade. The grids already collapse via per-component queries above; this layer fixes the nav overflow, spacing rhythm, touch targets and the pages that still felt desktop-only on small screens. ============================================================ */ /* never allow a stray wide element to cause a horizontal scrollbar */ html { -webkit-text-size-adjust: 100%; } body, .cas-root { overflow-x: hidden; } img, svg, video { max-width: 100%; } /* iPad-ish: a touch more breathing room than desktop padding */ @media (max-width: 1024px) { .pg-section { padding-top: 52px; } } /* The sheet's presentation follows the sheet: it is shown from 1080px down (industrial-1.css), so these cannot sit in the 860px block. (#14) */ @media (max-width: 1080px) { .nav-sheet.open { display: flex; flex-direction: column; gap: 2px; padding: 10px var(--gutter) 16px; } .nav-sheet a { padding: 13px 10px; font-family: var(--font-cond); font-weight: 500; font-size: 15px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--banner-ink); border-radius: 8px; min-height: 44px; display: flex; align-items: center; } .nav-sheet a:hover { background: color-mix(in srgb, var(--banner-ink) 12%, transparent); } } /* ---- tablet / large-phone (≪860, the link row is gone) ---- */ @media (max-width: 860px) { /* theme switch + cart stay in the top bar; keep them compact */ .nav-auth { gap: 10px; } /* page-hero & bands: tighten vertical rhythm */ .page-hero { padding: 38px 0 32px; } .band-forest, .band-oak { padding: 30px 26px; } } /* ---- phones (≪560) ---- */ @media (max-width: 560px) { :root { --gutter: 16px; } .nav-top .inner { gap: 12px; padding: 10px var(--gutter); } .nav-brand img { height: 42px; } .cart-btn { width: 38px; height: 38px; } .nav-burger { width: 40px; height: 40px; } /* the logged-in chip: keep avatar, hide the name to save width */ .nav-user { padding: 3px; gap: 0; } .nav-user .nm { display: none; } .pg-section { padding-top: 40px; } .pg-wrap { padding-inline: 16px; } .lead { font-size: 15.5px; } /* dashboard hero stacks and centres on phones */ .dash-hero { flex-direction: column; align-items: flex-start; padding: 24px 20px; gap: 18px; } .dash-stats { width: 100%; gap: 10px; } .dash-stat { flex: 1; min-width: 0; padding: 12px 10px; text-align: center; } .dash-stat .v { font-size: 24px; } /* purchase-history table: let it scroll instead of crushing columns */ .dash-card > .dash-table { min-width: 520px; } .dash-panel[data-panel="purchases"] .dash-card { overflow-x: auto; } /* sticky rails would eat the short viewport — let them flow */ .summary, .side-stick, .filter-rail, .filter-col, .dash-rail { position: static !important; top: auto !important; } /* checkout step row: shrink so it wraps tidily instead of overflowing */ .steps { gap: 6px; } .step { font-size: 12.5px; } } /* ---- very small phones (≪380) ---- */ @media (max-width: 380px) { .dash-stat .v { font-size: 21px; } } /* ============================================================ 2026-07 additions — About rework, accordions, showcase, course page ============================================================ */ /* ---------- handwritten signature (About) ---------- Crystal's real signature, not a script webfont pretending to be one. The tilt is already in her hand, so no rotate here. Same one transparent cream file and the same light-theme filter flip as the other two brand marks. */ .sig-script { display: inline-block; width: clamp(210px, 24vw, 320px); margin: -6px 0 10px 2px; line-height: 0; user-select: none; } /* signature.png is 100% OPAQUE — a white rectangle with black ink, 0.0% of its pixels transparent — so it draws a white box wherever it is placed. IT SHIPS THAT WAY ON PURPOSE. Cutting her artwork out, or faking the cut-out with a blend mode, is her side of the work (§2.3) and doing it for her hides the ask and sets the expectation that we will keep doing it. The white box is the ask, made self-evident. A blend-mode workaround was written here and REMOVED on the client's instruction (2026-08-09); the method is recorded in docs/20260807_About_Copy_Provenance.md so nobody has to work it out again, and it stays out of the site until she supplies transparent artwork (#17). Do not re-add it. No light-theme filter either: brightness(0) on an opaque white rectangle makes a BLACK box rather than a white one, which is worse, not better. */ .sig-script img { display: block; width: 100%; height: auto; } /* ---------- accordion (FAQ + terms) ---------- */ .acc-list { display: grid; gap: 12px; max-width: 860px; margin: 28px auto 0; } /* #08: was `overflow: hidden`, which clipped the focus ring off the summary inside it — A/B pixel diff: 44 pixels changed on focus with hidden, 4752 with the clip margin, and none of them above the summary's top edge. `overflow: clip` still clips to the rounded padding box, which is the only reason the hidden was there; overflow-clip-margin then lets ink — and only ink, not scrollable content — spill by the width of the ring. */ details.acc-item { background-color: var(--surface); background-image: var(--concrete-grain); background-size: 220px 220px; border-radius: var(--radius-card); box-shadow: var(--shadow-sm); overflow: clip; overflow-clip-margin: 8px; } details.acc-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 17px 22px; font-family: var(--font-marker); font-weight: 600; font-size: 17.5px; color: var(--ink); transition: background .15s; } details.acc-item summary::-webkit-details-marker { display: none; } details.acc-item summary:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); } .acc-ico { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--coral) 18%, transparent); color: var(--coral-ink); font-family: var(--font-cond); font-size: 19px; font-weight: 500; line-height: 1; transition: transform .25s var(--ease-pop), background .2s; } details.acc-item[open] .acc-ico { transform: rotate(45deg); background: var(--coral-fill); color: var(--coral-fill-ink); } /* #27: measured 118 characters a line at 1692px. The panel keeps its full width — the answer is inside a card and the card is the component — but the copy inside it is capped to a readable measure. */ .acc-body { padding: 0 22px 20px; font-size: 14.5px; line-height: 1.65; color: var(--muted); } /* #27: see the note on .article — 68ch measured 88 characters per line. */ .acc-body p, .acc-body li { max-width: 55ch; } .acc-body p { margin: 0 0 10px; } .acc-body p:last-child { margin-bottom: 0; } /* ---------- About contact rework ---------- */ .contact-wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: start; max-width: 1080px; margin: 0 auto; } .contact-channels { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; } .contact-channels li { display: flex; align-items: center; gap: 14px; } .contact-channels .ch-ico { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--teal) 22%, transparent); color: var(--teal-ink); } .contact-channels .ch-ico svg { width: 20px; height: 20px; } .contact-channels li > span:last-child { display: grid; } /* Tracking held at .16em: renders only below About's §13/§14 freeze line. (#20) */ .contact-channels strong { font-family: var(--font-cond); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); } .contact-channels em { font-style: normal; font-size: 14.5px; color: var(--muted); } .contact-note { font-family: var(--font-marker); font-style: italic; font-weight: 600; font-size: 18px; color: var(--teal-ink); margin: 24px 0 0; transform: rotate(-2deg); } .contact-card { background-color: var(--surface); background-image: var(--concrete-grain); background-size: 220px 220px; border-radius: var(--radius-card); box-shadow: var(--shadow-md); padding: 26px 26px 24px; } @media (max-width: 900px) { .contact-wrap { grid-template-columns: 1fr; gap: 30px; } } /* ---------- Student Showcase ---------- #19: the justified-collage rules (.sw-grid, .sw-tile and its hover overlay, .sw-owner, .sw-name, .sw-medium, the 760px breakpoint and the .sw-grid::after last-row guard) are gone. Showcase renders .pol-tile squares from its own page CSS and has never rendered a .sw-tile; the collage was measured matching zero elements on the page at every width. .sw-ava stays: the Showcase LIGHTBOX below still uses it for the avatar disc. */ .sw-ava { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-cond); font-weight: 600; font-size: 12px; color: #f3ede1; box-shadow: 0 1px 4px rgba(0,0,0,.4); } /* showcase lightbox */ .sw-modal { position: fixed; inset: 0; z-index: 1500; display: none; place-items: center; background: rgba(15,12,9,.86); backdrop-filter: blur(3px); padding: 30px; } .sw-modal.show { display: grid; } .sw-modal figure { margin: 0; max-width: min(1080px, 94vw); max-height: 88vh; display: grid; gap: 12px; justify-items: center; } .sw-modal img { max-width: 100%; max-height: 76vh; border-radius: 10px; box-shadow: 0 24px 70px rgba(0,0,0,.55); } .sw-modal figcaption { display: flex; align-items: center; gap: 10px; color: #ede1d0; font-family: var(--font-cond); font-size: 14px; } .sw-close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(237,225,208,.14); color: #ede1d0; font-size: 20px; cursor: pointer; transition: background .15s, transform .15s; } .sw-close:hover { background: rgba(237,225,208,.3); transform: rotate(90deg); } /* ---------- course overview page ---------- */ /* 7.4: the left column is 14px narrower than it was so the right column lands on --prose-max exactly — the introduction then measures the same as every other long-form field on the page rather than 14px short of them. */ /* #20: the left column was pinned at 446px until the 900px breakpoint, so at laptop widths it kept taking a fixed slice out of a shrinking container and the right column — and with it every long-form field on the page, which is sized to match it — collapsed: 660px of content at 1200, 560 at 1100, 460 at 1000, against 270px of empty gutter each side. It is a proportion now, floored at 300px and capped at the 446px it already used at 1440+, so the desktop measure is unchanged and the laptop one stops collapsing. Held in a variable because the long-form measure below subtracts it; the two used to be a 446 here and a hard-coded 492 there, which is exactly the kind of pair that drifts. */ :root { --course-left: clamp(300px, 31%, 446px); --course-gap: 46px; } .course-hero { display: grid; grid-template-columns: var(--course-left) 1fr; gap: var(--course-gap); align-items: start; padding: 46px 0 10px; } /* 7.1: the image block is height-capped so the price and CTA below it stay on the first screen on a laptop rather than being pushed under the fold. */ .course-left { display: flex; flex-direction: column; } .co-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; } .co-thumb { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-sm); outline-offset: 2px; } .co-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--ease-out), opacity .2s; opacity: .78; } .co-thumb:hover img, .co-thumb:focus-visible img { opacity: 1; transform: scale(1.05); } .co-thumb.is-active { box-shadow: 0 0 0 2px var(--marine), var(--shadow-sm); } .co-thumb.is-active img { opacity: 1; } /* 7.1 right column: the title shares the video frame's left edge, and the video sits directly beneath it with the introduction below that. */ /* #28: #1b1814 in both themes put a 900x506 black rectangle above the fold on the cream page. Black is right for a frame that is HOLDING a film — that is the letterbox, a material — and wrong for one that is only announcing that a film is coming. So the empty frame is a themed surface and .has-video, which is the branch the iframe renders into, keeps the black. */ .co-highlight { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-card); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); margin: 4px 0 18px; display: grid; place-items: center; } .co-highlight.has-video { background: #1b1814; } .co-highlight-empty { font-family: var(--font-cond); font-size: 13px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); text-align: center; padding: 0 20px; } /* 7.1: the preview reel, once the client has supplied one. */ .co-highlight.has-video { display: block; } .co-highlight .gdrive-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; } /* The poster the client named for this reel, under the lazy iframe. Same arrangement the lesson stage uses: the frame is on top and opaque once Drive answers, so this is what the visitor looks at until then, instead of the black rectangle Drive shows while it decides. z-index rather than DOM order because the iframe is written after it and would otherwise win on stacking alone. */ .co-highlight .co-hl-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .co-highlight .gdrive-frame { z-index: 1; } .co-hl-dur { position: absolute; right: 10px; bottom: 10px; z-index: 2; pointer-events: none; font-family: var(--font-cond); font-size: 12.5px; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: #f3ede1; background: rgba(20,17,13,.72); padding: 4px 10px; border-radius: var(--r-sharp); } .course-left .course-buy { margin-top: 22px; } /* 7.1: the image block is kept short on purpose so the price and CTA below it stay on the first screen without scrolling. */ /* 7.1 requires the picture area to be height-controlled so the buy button is on the first screen without scrolling. The aspect ratio alone does not do that: on a short laptop screen a 3:2 cover plus the thumbnail strip plus the pending-photographs note pushed ADD TO CART about 30px below the fold. The cap is viewport-relative so it only bites on short screens and leaves the ratio alone on tall ones. */ .course-cover { position: relative; border-radius: var(--r-promo); overflow: hidden; box-shadow: var(--shadow-lift); aspect-ratio: 3/2; max-height: min(272px, 31vh); } .course-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .course-cover .free-flag, .course-cover .sale-flag { position: absolute; top: 14px; left: 14px; right: auto; } .course-meta-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; } .cmc { font-family: var(--font-cond); font-weight: 500; font-size: 13px; letter-spacing: var(--tracking-label); text-transform: uppercase; padding: 6px 14px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); } /* Two kinds of chip, and they were indistinguishable. .is-filter marks the ones that correspond to a filter on the courses page — medium, length and level — and takes marine, the colour that classification already uses site-wide. A plain chip is a fact about this course that you cannot filter by, such as the lesson count, and takes linen. (client feedback 2026-08-08) */ .cmc.is-filter { background: var(--marine); color: var(--marine-ink); } /* NOT --linen-ink: that token is linen used AS text on a dark ground, so on the dark theme it resolves to linen itself and the chip was linen on linen — invisible. A linen FILL takes the same dark ink .btn.linen uses, 8.5:1. (client feedback 2026-08-09) */ .cmc.is-fact { background: var(--linen); color: #2b2823; } .course-buy { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; } .course-price { font-family: var(--font-display); font-weight: 700; font-size: 34px; color: var(--coral-ink); } /* 6 / 1.4.3: the old price keeps the colour it already had and carries the reduction through the strike alone. It used to be recoloured to --muted, which is not 維持現有顏色. */ .course-price .was { font-size: 19px; opacity: .72; text-decoration: line-through; margin-right: 10px; font-weight: 500; } /* 6 / 1.4.3: only the reduced price changes colour. */ .course-price .now { color: var(--marine); } .course-tier-note { font-size: 13px; color: var(--muted); max-width: 34ch; } /* Her own line under the course title. */ /* 51: 13.5px was too small to read as the course's subtitle. */ .co-subline { font-family: var(--font-cond); font-weight: 600; font-size: 18px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--teal-ink); margin: 0 0 12px; } /* #09: --muted is already the quiet step; the extra .85 took it to 3.75:1 on the light page. Dimming a token that was chosen for its contrast just spends the margin it was chosen for. */ .course-terms-note { font-size: 13px; color: var(--muted); max-width: 46ch; margin-top: 12px; } /* The client-testing switch, moved under the Add to cart button because that is what it changes. (client feedback 2026-08-08) */ .own-test { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .own-test-label { font-family: var(--font-cond); font-size: 12.5px; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); } .own-test .fg-opts { display: inline-flex; gap: 6px; } /* 7.4 「所有課程詳情長文欄位統一加闊至相同寬度」: every long-form field on the page at one measure. The introduction was on the 60ch .lead default while the title and preview above it ran the full column — the "呢個好短咧⋯⋯我想佢闊翻，好似上邊咁樣" complaint exactly. The introduction sits in the hero's right column, so the shared measure is whatever that column can hold: the container less the left column and the gap, capped at 900px. The stacked blocks track the same expression, so the two stay equal as the viewport moves rather than only matching at one width. Below the width where the hero collapses to one column the cap is simply 900px again, because both are then bounded by the container. */ :root { --prose-max: 900px; } /* The section signs travel with the content they head. Pinning the blocks to the right column without them left each plaque centred on the full container while its own list sat to the right of it, which reads as a mistake. */ .learn-list, .syllabus, #co-who, .course-teacher, #learn .section-head, #syllabus .section-head, #who .section-head { max-width: var(--prose-max); margin-left: auto; margin-right: auto; } .course-right #co-blurb { max-width: var(--prose-max); } @media (min-width: 901px) { /* 50: these already borrowed the hero right column's WIDTH, but they were centred in the container while the introduction and the title above them start at the column's left edge, so the two blocks were offset by half the leftover space. Pinning the right edge puts them under that column exactly. All four move together: aligning only the learn list would leave it out of step with the syllabus directly beneath it. */ .learn-list, .syllabus, #co-who, .course-teacher, #learn .section-head, #syllabus .section-head, #who .section-head { max-width: min(var(--prose-max), calc(100% - var(--course-left) - var(--course-gap))); margin-left: auto; margin-right: 0; } } /* 7.5 / 1.4.10: the SYLLABUS heading is enlarged; the other section headings on this page keep the shared size. */ #syllabus h2.section-title { font-size: clamp(32px, 3.7vw, 50px); padding: 14px 34px; } /* 50: each outcome sits on its own rounded plate in the client's marine, the type is a step larger, and the gutter between the columns is close to double what it was — at 22px the two columns read as one wrapped paragraph. */ .learn-list { list-style: none; margin: 26px 0 0 auto; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; } .learn-list li { display: flex; gap: 10px; align-items: baseline; font-size: 16.5px; line-height: 1.45; background: var(--marine); color: var(--marine-ink); border-radius: 14px; padding: 14px 18px; } .learn-list li::before { content: "✦"; color: var(--marine-ink); font-size: 12px; flex: none; } .syllabus { margin: 26px 0 0 auto; display: grid; gap: 10px; } /* 7.5: odd and even rows are distinguished for readability. The box colour itself is deliberately unchanged — the direction says so explicitly — so this is a light tint over it rather than a different fill. */ /* The alternation was 5% and effectively invisible. (client feedback 2026-08-08) */ .syl-item[data-odd="1"] { background-color: color-mix(in srgb, var(--ink) 13%, var(--surface)) !important; } /* #08: same change as details.acc-item above, and the same reason — as shipped 0 of 103,008 pixels changed when a .syl-row took focus. */ .syl-item { background-color: var(--surface); background-image: var(--concrete-grain); background-size: 220px 220px; border-radius: var(--radius-card); box-shadow: var(--shadow-sm); overflow: clip; overflow-clip-margin: 8px; } /* The fourth column is the lesson thumbnail, on the right as the syllabus asks. auto rather than a fixed width so a lesson with no cover — Lesson 1, which Crystal supplied as film only — closes the column up instead of leaving a hole. (client feedback 2026-08-08) */ .syl-row { display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 16px; padding: 14px 20px; } .syl-thumb { width: 76px; height: 76px; border-radius: 14px; object-fit: cover; display: block; background: color-mix(in srgb, var(--ink) 8%, transparent); box-shadow: var(--shadow-sm); } @media (max-width: 600px) { .syl-thumb { width: 56px; height: 56px; border-radius: 11px; } } /* ---- collapsible phases ---- Collapsed by default: fourteen rows open at once was the complaint. (client feedback 2026-08-08) */ .syl-phase { margin: 30px 0 10px; } .syl-phase:first-of-type { margin-top: 4px; } /* 49: rounded on all four corners rather than the near-square --r-sharp, so the phase reads as a card rather than a slab. */ .syl-phase-btn { display: flex; align-items: center; gap: 14px; width: 100%; cursor: pointer; border: 0; text-align: left; padding: 16px 20px; border-radius: 16px; background: rgba(20,17,13,.5); color: #f4e7cf; } /* 38 + 49: the light theme's bar used to be an 82%-ink slab, near-black on a pale page. Two of the three things the client asked for on this bar are marine — the phase number and the open/close marker — and marine measures 1.53:1 against that slab, which is not a contrast problem so much as an invisible one. The bar therefore goes light in the light theme, which is also what makes it read as the soft card 49 asks for. The dark theme keeps its dark bar: marine reads there already. */ [data-theme="A"] .syl-phase-btn { background: color-mix(in srgb, var(--ink) 7%, var(--surface)); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); } .syl-phase-btn .sp-n { font-family: var(--font-cond); font-weight: 600; font-size: clamp(19px, 2.1vw, 26px); letter-spacing: var(--tracking-label); text-transform: uppercase; flex: none; color: var(--marine); } .syl-phase-btn .sp-name { font-family: var(--font-marker); font-weight: 600; font-size: clamp(16px, 1.6vw, 21px); flex: 1; opacity: .92; } /* #09: at opacity .7 over the phase bar this measured 3.49:1 on theme A, and fading it to 82% of the bar's own ink only reached 4.15:1 — the bar is a mid-tone in that theme, so there is very little room above it. The count is the only thing on the row that says how many lessons are inside, so it is content, not chrome: it takes the bar's ink at full strength (5.26:1 in A, 14.50:1 in D) and stays subordinate by being 13px against the name's 16-21. */ .syl-phase-btn .sp-count { font-family: var(--font-cond); font-size: 13px; letter-spacing: var(--tracking-label); text-transform: uppercase; flex: none; } /* 49: a filled triangle in the client's marine, not the outline chevron. The rotation still carries the state visually and aria-expanded carries it to assistive technology, so the shape is not the only signal. */ .syl-phase-btn svg { transition: transform .2s ease; flex: none; color: var(--marine); fill: var(--marine); } .syl-phase-btn[aria-expanded="true"] svg { transform: rotate(180deg); } .syl-phase-body { display: grid; gap: 10px; margin-top: 10px; } .syl-phase-body[hidden] { display: none; } .syl-more { display: flex; align-items: center; gap: 7px; width: 100%; background: none; border: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); padding: 9px 20px 9px 64px; cursor: pointer; font-family: var(--font-cond); font-size: 13px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); } .syl-more:hover { color: var(--coral-ink); } .syl-more svg { transition: transform .18s ease; } .syl-more[aria-expanded="true"] svg { transform: rotate(180deg); } .syl-detail { margin: 0; padding: 2px 20px 18px 64px; display: grid; gap: 4px; } /* An author `display` beats the UA sheet's [hidden] rule, so restate it. */ .syl-detail[hidden] { display: none; } .syl-detail dt { font-family: var(--font-cond); font-weight: 600; font-size: 12.5px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--teal-ink); margin-top: 10px; } .syl-detail dt:first-child { margin-top: 0; } .syl-detail dd { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); } @media (max-width: 600px) { .syl-more, .syl-detail { padding-left: 20px; } } .syl-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-cond); font-weight: 600; font-size: 13px; background: color-mix(in srgb, var(--coral) 16%, transparent); color: var(--coral-ink); } .syl-title { font-family: var(--font-marker); font-weight: 600; font-size: 18.5px; color: var(--ink); } .syl-sub { font-size: 14.5px; color: var(--muted); margin-top: 3px; } .syl-len { font-family: var(--font-cond); font-size: 12.5px; color: var(--marine); } /* ---- #16: locked rows ---- course.dc.html used to emit style="opacity:.72" inline on twelve of thirteen rows, which painted 2.55:1 (A) / 3.00:1 (D) and, being inline, could not be overridden from here at all. The dimming is a real requirement — a locked row has to read as locked — but opacity is the wrong instrument: it fades the row AND its contrast at the same rate, so the more locked it looks the less readable it is. Locked is carried by three things that cost no contrast instead: the number disc drops its copper for a neutral, the thumbnail loses its colour, and the text steps back one stop towards --muted. NOT all the way to --muted: half these rows sit on the .syl-item[data-odd] tint rather than on --surface, and --muted measured 4.47:1 (D) / 3.94:1 (A) against THAT. --muted is chosen for --surface, and a tinted row is not --surface. Two stops, because the numeral sits on its own lighter disc and needs more than the title does: measured 5.70/4.96 for the text and 5.29/5.33 for the numeral. */ .syl-row.is-locked { --locked-ink: color-mix(in srgb, var(--ink) 40%, var(--muted)); } .syl-row.is-locked .syl-title, .syl-row.is-locked .syl-sub, .syl-row.is-locked .syl-len { color: var(--locked-ink); } .syl-row.is-locked .syl-num { background: color-mix(in srgb, var(--ink) 13%, transparent); color: color-mix(in srgb, var(--ink) 70%, var(--muted)); } /* 57: the thumbnail keeps its colour whether or not the lesson is bought. The desaturation was one of three cues that a row is locked; the other two stay — the padlock, which carries role="img" aria-label="Locked" and so is announced, and the row's stepped-back ink. Client instruction, and she has been told the cue is weaker for it. */ .syl-row.is-locked svg { color: var(--locked-ink); } .course-teacher { display: flex; gap: 20px; align-items: center; margin: 30px 0 0 auto; background-color: var(--surface); background-image: var(--concrete-grain); background-size: 220px 220px; border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 20px 24px; } .course-teacher img { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: var(--shadow-sm); } @media (max-width: 900px) { .course-hero { grid-template-columns: 1fr; gap: 26px; } .learn-list { grid-template-columns: 1fr; } } /* ---------- dashboard onboarding empty-state ---------- */ .dash-onboard { display: grid; gap: 14px; } .dash-onboard .ob-hero { display: flex; gap: 22px; align-items: center; } .dash-onboard .ob-hero img { width: 120px; height: 120px; border-radius: var(--radius-card); object-fit: cover; flex: none; box-shadow: var(--shadow-sm); } .ob-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 6px; } .ob-step { background: color-mix(in srgb, var(--ink) 5%, transparent); border-radius: var(--radius-card); padding: 16px; } .ob-step .n { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--coral-ink); } .ob-step h4 { font-family: var(--font-marker); font-weight: 600; font-size: 15.5px; margin: 6px 0 4px; color: var(--ink); } .ob-step p { margin: 0; font-size: 13px; color: var(--muted); } @media (max-width: 760px) { .ob-steps { grid-template-columns: 1fr; } .dash-onboard .ob-hero { flex-direction: column; align-items: flex-start; } } /* ---------- the essay sheets: leather, not ruled notepaper ------------------ (client feedback 2026-08-16, reference asset "About Article background.jpg") WHAT WAS THERE BEFORE, precisely, because the client called it "the draughting paper" and that is not what the code calls it: - the SHEET is `.engraved` in css/industrial-2.css (~line 509). It paints background-color: var(--note-paper) — #f6f1e2 light / #cdbb98 under [data-theme="D"] — under two radial gradients plus var(--note-tooth) and var(--note-fibre) (both defined in css/industrial-1.css ~line 133). - the RULING is a separate rule, `.engraved .eng-body` (~line 570): a repeating-linear-gradient of var(--note-rule) blue lines at --note-line pitch, plus the single var(--note-margin) red margin line at 43-44px. Those two rules together are the ground being replaced. Both stay untouched — see the scoping note below. WHAT REPLACES IT: the same hide the blog feature card is bound in — the --leather* tokens in css/industrial-1.css (~line 140). "Dotted" in the client's note is the PORE layer (--leather-pores), the fine pebble that makes it read as calfskin; it is not a stitched border, and none is added here. The five layers and the 1px pore/shine offset are copied from `.blog-feature` deliberately: that offset is what lights each pebble from one side, and without it the grain averages out to flat card (the token comment records this being got wrong once). SCOPING — the important part. This is hung on `.bio-copy`, NOT on `.engraved`: - `.engraved` is also the QUOTE panel at the top of About (`.engraved.is-quote`), which the client did not ask to change and which deliberately has no ground at all (`background-image: none`). - `.bio-copy` and `.engraved` were both grepped across every .html and .js in the repo: both appear in About.dc.html and nowhere else. index.html's only match for "engraved" is a CSS comment in its