/* GENERATED FILE - do not edit by hand. * Shared landing components (all farm styles). * Source: landing.css * Rebuild: php tools/build-landing-css.php */ /* ========================================================================= * BSP network-portal landings (ln-*) + structure chrome (lnch-*). * Real tenant content is composed per structure by landing/{structure}.php. * Palette vars arrive on from layout.php; every skin derives from them. * ========================================================================= */ /* Derived accessible accent for TEXT (mixed toward ink: darker on light skins, lighter on dark skins). Backgrounds/borders keep raw accent. */ :root { --bsp-accent-text: var(--bsp-accent); } html[data-bsp-style] { --bsp-accent-text: color-mix(in srgb, var(--bsp-accent) 62%, var(--bsp-ink)); } .ln-wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; } /* Two-column head grid (main + rail). Shared: portal/essay and the CN-family structures (digit/deal/itblog/opensource) all compose it, so it belongs to the common sheet — leaving it in the PORTAL block would collapse those pages to one column once each structure only loads its own rules. */ .ln-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; padding-top: 1.4rem; } .ln-sec { font-size: 1.02rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin: 2.4rem 0 1.1rem; display: flex; align-items: center; gap: .6rem; } .ln-sec::before { content: ""; flex: none; width: 5px; height: 1em; background: var(--bsp-accent); border-radius: 1px; } .ln-sec-neon::before { background: var(--bsp-accent); box-shadow: 0 0 10px var(--bsp-accent); } .lnf-empty { color: var(--bsp-muted); font-size: .9rem; } .lnf-note { color: var(--bsp-muted); font-size: .88rem; line-height: 1.7; margin: .9rem 0 .2rem; } .lnf-blog-link { color: var(--bsp-accent-text); text-decoration: none; } .lnf-blog-link:hover, .lnf-blog-link:focus-visible { text-decoration: underline; } .ln-cta { display: inline-block; background: var(--bsp-accent-strong, var(--bsp-accent)); color: var(--bsp-on-strong, var(--bsp-on-accent, #fff)); text-decoration: none; font-weight: 700; font-size: .95rem; padding: 12px 22px; border-radius: 8px; margin-top: 1.1rem; } .ln-cta:hover { background: color-mix(in srgb, var(--bsp-accent) 64%, #000); text-decoration: none; color: var(--bsp-on-strong, var(--bsp-on-accent, #fff)); } .ln-cta-inv { background: color-mix(in srgb, var(--bsp-ink) 7%, var(--bsp-bg)); color: var(--bsp-ink); border: 1px solid color-mix(in srgb, var(--bsp-ink) 25%, transparent); } .ln-band .ln-cta-inv { background: transparent; color: inherit; border: 2px solid currentColor; } .ln-panel { border: 1px solid var(--bsp-line); border-radius: 8px; padding: 1.1rem 1.2rem; margin-bottom: 1.2rem; background: color-mix(in srgb, var(--bsp-accent) 3%, var(--bsp-bg)); } .ln-panel-h { font-size: .92rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .9rem; } .ln-panel-accent { border: 2px solid var(--bsp-accent); } .ln-panel-soft { background: var(--bsp-accent-soft); border: none; } .lnf-rank, ol.lnf-rank { list-style: none; counter-reset: lnfrank; margin: 0; padding: 0; } .lnf-rank li { counter-increment: lnfrank; display: flex; gap: .6rem; align-items: baseline; padding: .45rem 0; border-bottom: 1px dashed color-mix(in srgb, currentColor 14%, transparent); font-size: .9rem; line-height: 1.45; } .lnf-rank li:last-child { border-bottom: none; } .lnf-rank li::before { content: counter(lnfrank); flex: none; min-width: 1.5em; height: 1.5em; display: inline-flex; align-items: center; justify-content: center; background: var(--bsp-accent-soft); color: var(--bsp-ink); font-weight: 800; font-size: .72em; border-radius: 3px; transform: translateY(.15em); } .lnf-rank li:nth-child(-n+3)::before { background: var(--bsp-accent-text); color: var(--bsp-bg); } .lnf-rank li a { color: inherit; text-decoration: none; font-weight: 600; } .lnf-rank li a:hover { color: var(--bsp-accent); } .lnf-rank-meta { color: var(--bsp-muted); font-size: .75rem; margin-left: auto; } .lnf-rank-count { flex: none; font-size: .75rem; font-weight: 700; color: var(--bsp-accent-text); } .lnf-rows { display: grid; } .lnf-row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); text-decoration: none; color: inherit; position: relative; } .lnf-row:hover { color: var(--bsp-accent); } .lnf-row-title { font-weight: 600; font-size: .98rem; min-width: 0; overflow-wrap: anywhere; } .lnf-row-meta { flex: 0 1 auto; min-width: 0; text-align: right; color: var(--bsp-muted); font-size: .78rem; } .lnf-card { display: block; text-decoration: none; color: inherit; border: 1px solid var(--bsp-line); border-radius: 8px; overflow: hidden; position: relative; } .lnf-card-img { display: block; overflow: hidden; background: var(--bsp-accent-soft); } .lnf-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .lnf-card-img-none { background: linear-gradient(135deg, var(--bsp-accent-soft), var(--bsp-bg)); } .lnf-card-title, .ln-reader-title, .ln-sakura-entry-title, .ln-pix-item-body strong, .lnf-blog strong, .lnf-blog-name, .ln-pix-item-title, .lnf-miniblog-name { overflow-wrap: anywhere; } .lnf-card-title { display: block; font-weight: 700; font-size: .95rem; line-height: 1.35; padding: .7rem .9rem 0; } .lnf-card-meta { display: block; color: var(--bsp-muted); font-size: .78rem; padding: .25rem .9rem .85rem; } .lnf-card:hover .lnf-card-title { color: var(--bsp-accent); } /* Aggregated tag rows on a platform landing read as labels, never as controls. * NetworkFeed::tags() carries name + count and no term URL, and one tag can sit * on several tenant blogs, so any href here would have to be invented — and * pointing the platform front page at a single tenant's archive is exactly the * coupling that was rejected for the category nav. Styled as a plain * "·"-separated line so the row stops promising a click it cannot honour. */ .lnf-tags { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0; } .lnf-tag { display: inline; border: 0; border-radius: 0; padding: 0; font-size: .8rem; color: var(--bsp-muted); } .lnf-tag + .lnf-tag::before { content: "·"; margin: 0 .5rem; color: var(--bsp-line); } .lnf-tag i { font-style: normal; font-size: .68rem; color: var(--bsp-muted); opacity: .75; } .lnf-blogs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .lnf-blog { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--bsp-line); border-radius: 8px; padding: .9rem 1rem; text-decoration: none; color: inherit; position: relative; } .lnf-blog:hover { border-color: var(--bsp-accent); } .lnf-blog strong, .lnf-blog-name { font-size: .95rem; } .lnf-blog span { color: var(--bsp-muted); font-size: .82rem; line-height: 1.5; } .lnf-blog i { font-style: normal; color: var(--bsp-accent-text); font-size: .75rem; margin-top: .2rem; } .lnf-miniblogs { display: grid; gap: .55rem; } .lnf-miniblogs a { display: flex; justify-content: space-between; gap: .8rem; text-decoration: none; color: inherit; font-size: .84rem; } .lnf-miniblogs a:hover strong { color: var(--bsp-accent); } .lnf-miniblogs strong { font-weight: 700; } .lnf-miniblogs span { color: var(--bsp-muted); font-size: .76rem; text-align: right; } /* Cards, rows and tiles keep their container styling; only the title is a link, and `.lnf-stretch` (bsp.css) hands that single link the whole card surface so nothing loses its click target. Both markup shapes render the same, so the shared lnf_* helpers and the per-structure landings can be migrated independently without a stylesheet rev. */ .lnf-row a, .lnf-mrow a, .lnf-card a, .lnf-blog a, .lnf-blogs a { color: inherit; text-decoration: none; } /* A card's stretched title owns the whole surface, so any OTHER link inside the same card (e.g. the byline link bsp_lnf_blog_name() emits) has to sit above that overlay — otherwise the card's own overlay swallows its clicks. */ .lnf-card a:not(.lnf-stretch), .lnf-row a:not(.lnf-stretch), .lnf-mrow a:not(.lnf-stretch), .lnf-blog a:not(.lnf-stretch), .ln-deal-card a:not(.lnf-stretch), .ln-deal-hero a:not(.lnf-stretch) { position: relative; z-index: 2; } .lnf-row a:hover, .lnf-mrow a:hover, .lnf-blog a:hover, .lnf-blog-name:hover { text-decoration: none; } .lnf-blog-name { font-weight: 700; } .lnf-miniblog { display: flex; justify-content: space-between; gap: .8rem; font-size: .84rem; } a.lnf-miniblog-name { font-weight: 700; color: inherit; } .lnf-miniblog-meta { flex: none; color: var(--bsp-muted); font-size: .76rem; text-align: right; } .lnf-farms { display: flex; flex-wrap: wrap; gap: 8px; } .lnf-farms a { text-decoration: none; color: inherit; font-size: .8rem; font-weight: 600; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 999px; padding: 8px 14px; } .lnf-farms a:hover { border-color: var(--bsp-accent); color: var(--bsp-accent); } .ln-farms-wrap { padding-bottom: 3rem; } .ln-band { text-align: center; padding: 3rem 22px; margin: 2.6rem 0; background: var(--bsp-accent-strong, var(--bsp-accent)); color: var(--bsp-on-strong, var(--bsp-on-accent, #fff)); } .ln-band h2 { margin: 0 0 .5rem; font-size: 1.6rem; } .ln-band p { margin: 0 auto; max-width: 560px; opacity: .92; } .ln-eyebrow { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--bsp-accent-text); margin-bottom: .7rem; } .lnch { width: 100%; } .lnch-btn-accent { display: inline-block; background: var(--bsp-accent-strong, var(--bsp-accent)); color: var(--bsp-on-strong, var(--bsp-on-accent, #fff)) !important; text-decoration: none; font-weight: 700; font-size: .84rem; padding: 9px 16px; border-radius: 6px; } .lnch-btn-accent:hover { background: color-mix(in srgb, var(--bsp-accent) 64%, #000); text-decoration: none; } /* The `html[data-bsp-style]` prefix is deliberate, not decoration: layout.php loads this shared sheet BEFORE the per-structure sheet, so a plain (0,1,0) rule can no longer win on source order. Without the extra weight the skin's own `grid-template-columns` would beat this block and every two-column skin would stop stacking on phones (same for the portal search field and the magazine name size, which are declared per structure too). */ @media (max-width: 960px) { html[data-bsp-style] .ln-head-grid, html[data-bsp-style] .ln-pop-cols, html[data-bsp-style] .ln-pix-cols, html[data-bsp-style] .ln-reader-cols, html[data-bsp-style] .ln-sakura-cols, html[data-bsp-style] .ln-neon-cols, html[data-bsp-style] .ln-minimal-cols, html[data-bsp-style] .ln-mag-front, html[data-bsp-style] .ln-photo-cols, html[data-bsp-style] .ln-gourmet-cols, html[data-bsp-style] .ln-gourmet-feature { grid-template-columns: 1fr; } html[data-bsp-style] .ln-mag-name { font-size: 1.9rem; } } html[data-bsp-style] .bsp-panel.wide { max-width: 860px; } /* WB-13: section miniblogs (views) share the helpers row layout so the count never glues onto the name ("Culture3 stories") */ .ln-miniblogs { display: grid; gap: .55rem; } .ln-miniblogs a { display: flex; justify-content: space-between; gap: .8rem; text-decoration: none; color: inherit; font-size: .84rem; } .ln-miniblogs a span { flex: none; } .ln-miniblogs a:hover strong { color: var(--bsp-accent-text, var(--bsp-accent)); } /* QOD-11: every chrome header nav link gets a real touch target */ header.lnch nav a { padding-block: 10px; } /* WB-26: neon brand glyph glows instead of rendering as a black block */ .ln-neon-glyph { color: var(--bsp-accent); text-shadow: 0 0 14px color-mix(in srgb, var(--bsp-accent) 65%, transparent); } /* ========================================================================= * CN-family structures (v0.1.17): digit/deal/devblog/essay/codehub/column/ * itblog/opensource. Same variable contract: every color derives from * --bsp-bg/--bsp-ink/--bsp-accent injected by layout.php. * ========================================================================= */ .lnf-mrow { display: flex; gap: 1rem; align-items: flex-start; position: relative; padding: 1.05rem 0.2rem; border-bottom: 1px solid var(--bsp-line); text-decoration: none; } .lnf-mrow:hover { background: color-mix(in srgb, var(--bsp-accent) 5%, transparent); text-decoration: none; } .lnf-mrow-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .lnf-mrow-title { font-weight: 700; font-size: 1.08rem; line-height: 1.45; color: var(--bsp-ink); } .lnf-mrow:hover .lnf-mrow-title { color: var(--bsp-accent-text); } .lnf-mrow-ex { color: var(--bsp-muted); font-size: .88rem; line-height: 1.65; margin-top: .35rem; } .lnf-mrow-meta { color: var(--bsp-muted); font-size: .78rem; margin-top: .45rem; } .lnf-mrow-thumb { flex: none; width: 148px; aspect-ratio: 4/3; border-radius: 6px; overflow: hidden; background: var(--bsp-accent-soft); } .lnf-mrow-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .lnf-mrow-thumb-none { background: linear-gradient(135deg, var(--bsp-accent-soft), var(--bsp-line)); } @media (max-width: 640px) { .lnf-mrow-thumb { width: 104px; } } /* ========================================================================= * CTA band <-> footer seam (all 18 farm skins). * * Every farm landing ends with the CTA band and the structure footer chrome * always follows it, so the band's bottom edge and the footer's top edge are * the one place where two colour fields can end up sharing an edge. Reserve * that seam on the band itself rather than restyling footers: * - `margin-bottom` is pinned in longhand so no skin shorthand can drop it; * - the transparent `border-bottom` (with the fill clipped to the padding * box) paints as a real gutter of page background, which - unlike a * margin - cannot be collapsed away and cannot be cancelled by a footer * skin that zeroes its own margin-top. * Declared last on purpose: the tripled class (0,3,0) beats the per-skin * `.ln-portal .ln-band` / `.ln-mag .ln-band` rules (0,2,0) that re-declare the * `background` shorthand (which would otherwise reset background-clip and let * the fill bleed into the seam). The class is repeated three times rather than * relying on source order, because layout.php now loads this sheet BEFORE the * per-structure sheet — the skin rule comes last in the document, so only * specificity can keep the seam stable. Longhands only, so skin borders * (e.g. `.ln-band-neon`'s accent top border) survive untouched. * No colours, no footers, no other selectors are modified. * ========================================================================= */ .ln-band.ln-band.ln-band { margin-bottom: 3rem; border-bottom: 1.2rem solid transparent; background-clip: padding-box; }