now, not one big link: it contains a form (Kúpiť) or a button, and neither may be nested inside an . Only the image links on to the piece. */ .work__link{display:block;text-decoration:none} .work__link:hover{opacity:.9} .work__action{margin-top:auto;padding-top:4px} .work__action .btn{width:100%;text-align:center} .work__notify{color:var(--muted)} /* The shared Stripe form template — one column, the checkout notice under the button. .term__pay (course rows) keeps its own width rules further up. */ .pay-form{display:flex;flex-direction:column;gap:10px;margin:0} .pay-form .btn{width:100%;text-align:center} .card__pay{margin-top:4px} /* /prace/ hero: the H1 used to wrap to about seven lines in a 34ch column (issue #32 point 4). The heading is shorter now and the column is wider; the 24ch cap `.hero h1` applies to every hero is lifted here because this hero carries no photo beside it, so there is room to spend. */ .works-hero__col{max-width:80ch} .works-hero__col h1{max-width:none} .works-hero__media{background:var(--surface)} .works-hero__media img{object-fit:cover;padding:0} /* /kontakt/ — the note shown when the form arrived prefilled from a product card (assets/js/site.js fills the text and unhides it). */ .form__prefill{grid-column:1/-1;font-size:var(--fs-small);color:var(--muted); border-left:2px solid var(--accent);padding-left:12px} @media (max-width:1023px){ .work__action .btn,.pay-form .btn{width:100%} } /* ── #33 social proof ───────────────────────────────────────────────────── Attributed quote cards (home, /kurzy/, /pre-firmy/), the B2B client list and the "Z minulých kurzov" photo grid. All three render honestly while empty: the dashed .todo marker does the visual work, so no rule here may hide an unfilled slot. */ .quotes{display:grid;gap:var(--gap);grid-template-columns:repeat(3,1fr);align-items:start} .quotecard{border-top:2px solid var(--rule);padding-top:22px;display:flex;flex-direction:column; gap:14px;margin:0} .quotecard__text{font-size:var(--fs-body);line-height:1.65} .quotecard__by{display:flex;flex-direction:column;gap:6px;align-items:flex-start; font-size:var(--fs-small)} .quotecard__author{font-family:var(--font-heading);font-weight:var(--weight-heading);font-size:var(--fs-body)} .quotecard__context{color:var(--muted-strong)} /* A single sentence of proof above the course dates. */ .proofline{font-size:var(--fs-body);line-height:1.65;color:var(--muted-strong);max-width:52ch} /* B2B client names — plain text, logos can come later. */ .refs{border-top:1px solid var(--rule);padding-top:22px;display:flex;flex-wrap:wrap; gap:14px 28px;align-items:baseline} .refs__label{font-size:var(--fs-eyebrow);line-height:1;letter-spacing:.26em;text-transform:uppercase; color:var(--muted-strong)} .refs__list{list-style:none;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:baseline;margin:0} .refs__item{font-family:var(--font-heading);font-weight:var(--weight-heading);font-size:var(--fs-h3)} /* Past-course gallery: photo grid with optional captions, plus an openly missing tile for a photo that does not exist yet at all. */ .shots{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)} .shot{margin:0;display:flex;flex-direction:column;gap:12px} .shot__media{height:280px;background:var(--surface-alt)} .shot__media img{width:100%;height:100%;object-fit:cover} .shot__media--missing{display:flex;align-items:center;justify-content:center;padding:20px; border:1px solid var(--rule);text-align:center} .shot__cap{font-size:var(--fs-small);line-height:1.65;color:var(--muted-strong)} @media (max-width:1023px){ .quotes{grid-template-columns:1fr} .shots{grid-template-columns:1fr} .shot__media{height:220px} .refs{flex-direction:column;align-items:flex-start;gap:12px} } /* ── #36 journal ─────────────────────────────────────────────────────────── /dennik/ index cards, the post page, the consent-gated embed and the one closing CTA. Appended at the end of the file on purpose (see the note in the issue): every rule here is additive, so a merge that loses the block loses the journal's styling and nothing else. No colour and no font name is written out below — everything reads the SWITCHBOARD tokens at the top of this file, same as the rest of the site. ------------------------------------------------------------------------- */ /* ── Journal index / home teaser cards ───────────────────────────────────── */ .journal{display:grid;gap:var(--gap) var(--gap);grid-template-columns:repeat(3,1fr)} .jpost{display:flex;flex-direction:column;gap:10px} .jpost__link{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit} .jpost__media{height:280px} .jpost__media img{width:100%;height:100%;object-fit:cover} .jpost__date{font-size:var(--fs-small);color:var(--muted)} .jpost__title{font-family:var(--font-heading);font-weight:var(--weight-heading); font-size:var(--fs-h3);line-height:1.2;max-width:26ch} .jpost__link:hover .jpost__title{color:var(--muted)} .jpost__teaser{font-size:var(--fs-small);line-height:1.65;color:var(--muted);max-width:44ch} /* A placeholder entry is visibly a demo, in the same dashed language as .todo — it must never be mistaken for content. */ .jpost--todo{border:1px dashed var(--muted-strong);padding:20px} /* ── Post page ───────────────────────────────────────────────────────────── */ .post__meta{font-size:var(--fs-small);color:var(--muted)} .post__media{width:100%;max-width:62ch} .post__media img{width:100%;height:auto} .post__source{font-size:var(--fs-small);color:var(--muted)} .post__source a{color:var(--fg)} /* The shared .prose is tuned for the legal documents (small, muted). A journal entry is the page's main reading text, so it gets body size and full contrast. */ .prose--post{max-width:62ch} .prose--post p,.prose--post ul{font-size:var(--fs-body);color:var(--fg);margin-top:18px} .prose--post p:first-child{margin-top:0} .prose--post blockquote{margin-top:18px;padding-left:20px;border-left:2px solid var(--accent); font-family:var(--font-heading);font-style:italic;font-size:var(--fs-h3);line-height:1.4} /* ── Consent-gated embed (issue #36 + #38) ────────────────────────────────── The placeholder is what ships in the HTML; the frame is added by assets/js/embeds.js only after marketing consent. Both live in the same box so the page does not jump when the visitor agrees. */ .embed{width:100%;max-width:540px} .embed__frame-holder{width:100%} .embed__frame{width:100%;height:640px;border:0;display:block;background:var(--surface-alt)} /* Once the Instagram frame has reported its real height the fixed one above is replaced from JavaScript (CSSOM, not a style attribute — style-src stays 'self'); this just stops the fallback height fighting it. */ .embed__frame--measured{height:auto} .embed__ph{border:1px solid var(--rule);background:var(--surface);padding:26px; display:flex;flex-direction:column;gap:12px;align-items:flex-start} .embed__ph[hidden]{display:none} .embed__ph-title{font-family:var(--font-heading);font-weight:var(--weight-heading);font-size:var(--fs-h3)} .embed__ph-why{font-size:var(--fs-small);line-height:1.65;color:var(--muted-strong);max-width:46ch} .embed__ph-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:4px} /* ── The one closing CTA ─────────────────────────────────────────────────── */ .cta-post{width:100%;max-width:62ch;margin-top:8px;padding:28px;background:var(--surface-alt); display:flex;flex-direction:column;gap:16px;align-items:flex-start} .cta-post__text{font-size:var(--fs-body);line-height:1.6;max-width:52ch} .cta-post .work--cta{width:100%;max-width:320px} .cta-post .work--cta .work__media{height:260px} /* ── Mobile layout ───────────────────────────────────────────────────────── */ @media (max-width:1023px){ .journal{grid-template-columns:1fr;gap:36px} .jpost__media{height:240px} .embed{max-width:none} .embed__frame{height:560px} .embed__ph{padding:20px} .cta-post{padding:22px} .cta-post .work--cta{max-width:none} }