/** * Notes feed (/the-daily/) — the stream CPT reskin. * * These 39 rules lived in the `inlineCssStyles` attribute of a GreenShift * element inside the Notes PAGE content, not in the theme. That is why the * editor canvas rendered notes with core's default palette while the * frontend rendered them correctly: page-content CSS never reaches the * editor iframe, and `add_editor_style()` can only ship what the THEME * owns. Moving them here fixes the editor preview and means a Valencia * deploy now carries the Notes styling with it. * * It also retires a maintenance trap: PRD 8c items 1, 5 and 8 were each * "edit the CSS inside page 5537" precisely because these rules were stuck * in the database, invisible to the validator and absent from git. * * The original block's own comment claimed "a future theme reskins by * editing this one block attribute" — that assumption is what this file * corrects. * * The lightbox markup and its JS stay in the page's core/html block: that * is behaviour and DOM, not styling. */ /* Valencia Notes reskin — page-scoped, zero theme files. Tokens are Valencia theme.json presets; a future theme reskins by editing this one block attribute. */ /* Doubled class, deliberately: it out-ranks the post-content container's `> .alignwide` max-width, which is also (0,2,0). The original comment here said it won by printing in-body AFTER that rule -- true when this lived in page content, false now that it loads as a theme stylesheet in . The doubled class is what actually carries the specificity, so the rule still wins; only the stated reason needed correcting. */ .valencia-notes-feed.valencia-notes-feed { max-width: calc(var(--wp--style--global--content-size, 680px) + (2 * var(--wp--preset--spacing--lg, 40px))); margin-left: auto; margin-right: auto; } .valencia-notes-feed .wp-block-post-template { padding-left: 0; margin-left: 0; list-style: none; } .valencia-note { position: relative; background: var(--wp--preset--color--paper); border-radius: 6px; padding: var(--wp--preset--spacing--lg); box-shadow: var(--wp--preset--shadow--soft); } /* Date stamp — mono, accent, uppercase; the page's signature device */ .valencia-note .wp-block-post-date { display: block; width: fit-content; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--accent); margin: 0 0 var(--wp--preset--spacing--xs); } /* Typewriter reveal — armed only when JS adds .valencia-notes-js, so no-JS visitors always see the dates */ .valencia-notes-js .valencia-note .wp-block-post-date { clip-path: inset(0 100% 0 0); } .valencia-notes-js .valencia-note.is-in-view .wp-block-post-date { animation: valencia-note-type 0.6s steps(12, end) forwards; } @keyframes valencia-note-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @media (prefers-reduced-motion: reduce) { .valencia-notes-js .valencia-note .wp-block-post-date { clip-path: none; animation: none; } } /* Title — display serif, sentence case, links inherit until hover */ .valencia-note h2.gspb-dynamic-title-element { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--large); font-weight: 700; line-height: 1.3; color: var(--wp--preset--color--contrast); text-transform: none; margin: 0 0 var(--wp--preset--spacing--xs); } .valencia-note h2.gspb-dynamic-title-element a { color: inherit; text-decoration: none; border-bottom: none; } .valencia-note h2.gspb-dynamic-title-element a:hover { color: var(--wp--preset--color--accent); } /* Body */ .valencia-note .valencia-note-body { font-size: 17px; line-height: 1.65; color: var(--wp--preset--color--contrast); } .valencia-note .valencia-note-body p { margin: 0 0 var(--wp--preset--spacing--md); } .valencia-note .valencia-note-body p:last-child { margin-bottom: 0; } .valencia-note .valencia-note-body a { color: var(--wp--preset--color--accent-strong); text-decoration: underline; text-underline-offset: 2px; border-bottom: none; } .valencia-note .valencia-note-body a:hover { color: var(--wp--preset--color--ink-deep); } /* Embeds + media inside a note card */ .valencia-note .valencia-note-body .wp-block-embed { margin: var(--wp--preset--spacing--sm) 0 0; max-width: 100%; } .valencia-note .valencia-note-body iframe { max-width: 100%; } .valencia-note .valencia-note-body img { max-width: 100%; height: auto; } /* Featured-image badge — corner-pinned, no added card height; core post-featured-image renders nothing when no image is set, which is the conditional */ .valencia-note .valencia-note-thumb { position: absolute; top: -16px; right: -16px; width: 64px; height: 64px; margin: 0; z-index: 2; border-radius: 6px; overflow: hidden; border: 3px solid var(--wp--preset--color--base); box-shadow: var(--wp--preset--shadow--soft); transform: rotate(4deg); transition: transform 0.15s ease; cursor: zoom-in; } .valencia-note .valencia-note-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .valencia-note .valencia-note-thumb:hover, .valencia-note .valencia-note-thumb:focus-visible { transform: rotate(4deg) scale(1.06); } .valencia-note .valencia-note-thumb:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; } /* Pagination — quiet mono row */ .valencia-notes-feed .wp-block-query-pagination { margin-top: var(--wp--preset--spacing--lg); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--caption); } .valencia-notes-feed .wp-block-query-pagination a:hover { color: var(--wp--preset--color--accent); } .valencia-notes-feed .wp-block-query-pagination .page-numbers.current { color: var(--wp--preset--color--accent); font-weight: 700; } /* Lightbox */ .valencia-note-lightbox { border: none; border-radius: 6px; padding: 0; max-width: min(90vw, 640px); background: var(--wp--preset--color--base); box-shadow: 0 20px 60px rgba(0, 0, 4, 0.3); } .valencia-note-lightbox::backdrop { background: rgba(18, 18, 18, 0.6); } .valencia-note-lightbox-inner { position: relative; } .valencia-note-lightbox img { display: block; width: 100%; height: auto; } .valencia-note-lightbox-close { position: absolute; top: 17px; right: 17px; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); font-size: 16px; line-height: 1; cursor: pointer; box-shadow: var(--wp--preset--shadow--soft); } @media (max-width: 500px) { .valencia-note { padding: var(--wp--preset--spacing--md); } .valencia-note .valencia-note-thumb { top: -12px; right: -8px; width: 56px; height: 56px; } } /* Outbound-link chip on note titles — accent-colored circle with external-link icon, signals every note title is a clickable outbound link */ /* Outbound-link chip on note titles — accent-colored circle with external-link icon, signals every note title is a clickable outbound link. Inline (not flex) so it flows with wrapped text instead of centering against the whole multi-line title box. */ .valencia-note h2.gspb-dynamic-title-element a::after{content:'';display:inline-block;width:17px;height:17px;margin-left:6px;vertical-align:middle;border-radius:50%;background:var(--wp--preset--color--accent);background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6%22/%3E%3Cpolyline%20points%3D%2215%203%2021%203%2021%209%22/%3E%3Cline%20x1%3D%2210%22%20y1%3D%2214%22%20x2%3D%2221%22%20y2%3D%223%22/%3E%3C/svg%3E");background-size:9px 9px;background-repeat:no-repeat;background-position:center;transition:background-color 0.15s ease;} .valencia-note h2.gspb-dynamic-title-element a:hover::after{background-color:var(--wp--preset--color--ink-deep);}