/*============================================================================== CSIGNAL SKIN, ARTICLE PAGES ---------------------------------------------------------------------------- Page-specific companion to csignal-skin.css for individual article pages, i.e. /articles//v2.php. Load AFTER csignal-skin.css. Everything is scoped to body.cs-skin, so it cannot touch any live index.php. NOT the same file as csignal-articles.css, which skins the /articles/ INDEX. Same split the site already uses: article.css vs articles.css. DESIGNED FOR A 142-PAGE ROLLOUT. Every article on the new layout shares this exact markup, so this file needs NO per-page markup changes. A v2.php is the original with four head edits, the cs-skin body class and two swapped includes. Nothing inside below the header is touched, which is what makes the rollout safe to repeat 141 more times. That is also why the hero shape is painted through .article-hero::before as a background image rather than injected as a cs_shape() span: no markup, no per-page edit. The path is copied from /csignal/assets/shapes.php, which is a generated file marked do-not-hand-edit, so it is stable. If the kit is ever regenerated, re-export this one URI. WHAT IS INHERITED from csignal-skin.css and not repeated here: section 1 the Season sweep, ink ground, Bricolage on h1-h4 section 2 the whole header section 4 .faqs as a paper block, and its headings section 10 .accordion in a paper context section 11 buttons, including .btn-white becoming the lime pill section 12 footer section 14 selection and focus DO NOT ASSUME THE SKIN KEEPS PROVIDING THOSE. Sections 15 to 19 were removed from it on 12 Sep and took .intro, .testimonial and .experts with them, which put a blurred teal orb back on a live page. Anything generic that this page cannot survive losing is owned here, .experts included. RULE FOR THIS FILE: colour, type, borders and decoration. No layout, no spacing, no DOM, no copy. The two exceptions are both commented where they happen: the .article-body corner radius is zeroed so the stepped edge has a straight line to cut, and its blurred orbs are switched off. NOTE ON font-family: the sweep in section 1 is a scoped universal carrying !important, so every font override below carries !important too. ==============================================================================*/ body.cs-skin { /* csignal-skin.css defines --cs-display and --cs-body on body.cs-skin but not --cs-mono, which lives on .cs-fontvars in csignal-hero.css and never reaches . The byline and metric labels below need it. */ --cs-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; } /*------------------------------------------------------------------------------ 1. The hero ------------------------------------------------------------------------------*/ body.cs-skin .article-hero { background-color: var(--ink); position: relative; /* clip, not hidden: the burst bleeds off the right and must be cut by the section rather than adding a horizontal scrollbar. */ overflow-x: clip; } /* article.css puts TWO blurred teal-into-violet orbs here, ::before at the top right and ::after 50vw wide bleeding off the right. Both are the old brand on every count: CSignal has no gradients and no blurs anywhere. Both go. The hero shapes are the case-study treatment, transplanted: three small solid kit shapes in the accent colours, floating, placed off the sides of centred copy. Same recipe as .cs-csdeco on /work//v2.php, deliberately, so a case study and an article read as the same family. NO OVERSIZED GHOST. The case-study version also carries a 620px Store ghosted into the background tint. It is dropped here: at that scale on this hero it read as a big soft slab rather than as a shape, which is the second time an oversized ghost has had to come out. Small solid shapes hold their form. */ body.cs-skin .article-hero::before, body.cs-skin .article-hero::after { display: none; } body.cs-skin .cs-ardeco { position: absolute; inset: 0; pointer-events: none; z-index: 0; } body.cs-skin .cs-ardeco__s { position: absolute; display: block; } body.cs-skin .cs-ardeco__s svg { display: block; } /* Off the sides of the centred column. .article-hero__inner is max-width 1000, so at 1440 the copy runs about x220 to x1220 and none of these reach it. */ body.cs-skin .cs-ardeco__s--a { top: 14%; left: -46px; } body.cs-skin .cs-ardeco__s--b { bottom: 20%; right: 1%; } body.cs-skin .cs-ardeco__s--c { top: 34%; right: -56px; } /* Own keyframe rather than cs-float from csignal-hero.css, which article pages do not load. Same motion as the case studies: a 9px drift with a 1.4deg turn, with each shape's own duration and delay set inline so they never sync up. */ body.cs-skin .cs-ardeco__in { display: block; animation: cs-arthero-float 8s ease-in-out infinite; } @keyframes cs-arthero-float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); } 50% { transform: translate3d(0, -9px, 0) rotate(calc(var(--rot, 0deg) + 1.4deg)); } } @media (prefers-reduced-motion: reduce) { body.cs-skin .cs-ardeco__in { animation: none; transform: rotate(var(--rot, 0deg)); } } /* Below 1024 the hero is tight enough that the shapes only crowd the heading. */ @media screen and (max-width: 1023px) { body.cs-skin .cs-ardeco { display: none; } } body.cs-skin .article-hero__inner { position: relative; z-index: 1; } body.cs-skin .article-hero__heading { font-family: var(--cs-display) !important; font-size: clamp(32px, 5.6vw, 54px); font-weight: 700; line-height: 0.98; letter-spacing: -0.03em; color: var(--on-ink); } /* Byline and date both carry .article-hero__author. Metric role: small, mono, uppercase, letterspaced. */ body.cs-skin .article-hero__author { font-family: var(--cs-mono) !important; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-ink-muted); } body.cs-skin a.article-hero__author:hover { color: var(--lime); } body.cs-skin .article-hero__description { font-family: var(--cs-body) !important; color: var(--on-ink-muted); line-height: 1.6; } body.cs-skin .article-hero__description a { color: var(--on-ink); } body.cs-skin .article-hero__description a:hover { color: var(--lime); } /* .btn-white already becomes the lime pill in skin section 11, and .btn-arrow keeps its arrow there. No button on /csignal/ carries an icon, so it goes, and the padding style.css reserves for it comes back. */ body.cs-skin .article-hero__btn svg { display: none; } body.cs-skin .article-hero__btn { padding-right: 24px; } /*------------------------------------------------------------------------------ 2. The paper slab, and the stepped edge into it ---------------------------------------------------------------------------- This page is the cleanest example on the whole site of the pattern the guidelines describe: an ink block meeting a paper block. The seam belongs here, at a full-bleed section transition, which is the sanctioned use. .article-body carries both `border-radius: var(--radius) var(--radius) 0 0` and `margin-top: calc(-1 * var(--radius))`, so it rides up 25px over the hero to overlap it with rounded corners. Setting --radius to 0 zeroes BOTH at once, which is what is wanted: the slab meets the hero flush on a straight line and the seam cuts that line. Do not zero the radius and the margin separately, and do not reintroduce a radius here, or the seam will cut across a curve. ------------------------------------------------------------------------------*/ body.cs-skin .article-body { --radius: 0px; background-color: var(--paper); position: relative; } /* Drawn as a ::before on the LOWER block, filled with the colour of the block above, rather than by clipping the section, which would cut its content too. Steps run 11% to 17% wide across five depths: regular steps read as a graphic pattern, irregular ones read as something torn. AN SVG BACKGROUND, NOT clip-path. clip-path put the vertical risers on fractional pixels (87% of 1440 is 1252.8), so every riser picked up a 1px antialiased blend, which reads as a pale hairline against the ink. Sampled at 4x it was three blend colours per edge. An inline SVG with shape-rendering="crispEdges" and preserveAspectRatio="none" snaps every edge to a whole pixel, so the seam is two flat colours and nothing between. If you redraw the steps, keep both of those attributes. */ body.cs-skin .article-body::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 26px; z-index: 2; pointer-events: none; background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%2012%22%20preserveAspectRatio=%22none%22%20shape-rendering=%22crispEdges%22%3E%3Cpath%20d=%22M0%200%20H100%20V6.24%20H87%20V2.16%20H74%20V8.52%20H58%20V4.08%20H47%20V10.56%20H31%20V5.4%20H16%20V9.12%20H0%20Z%22%20fill=%22%230E1C16%22/%3E%3C/svg%3E") no-repeat top center / 100% 100%; } /*------------------------------------------------------------------------------ 3. Article body copy ------------------------------------------------------------------------------*/ body.cs-skin .article-body__content h2, body.cs-skin .article-body__content h3, body.cs-skin .article-body__content h4 { font-family: var(--cs-display) !important; font-weight: 700; letter-spacing: -0.02em; color: var(--on-paper); } body.cs-skin .article-body__content h2 { font-size: clamp(26px, 4vw, 36px); line-height: 1.02; } body.cs-skin .article-body__content h3 { font-size: clamp(21px, 3vw, 26px); line-height: 1.15; } body.cs-skin .article-body__content p, body.cs-skin .article-body__content li { font-family: var(--cs-body) !important; color: var(--on-paper); line-height: 1.6; } /* Blue is the informational role. Lime on paper is close to invisible and is spent on the signup button further down anyway. */ body.cs-skin .article-body__content p a, body.cs-skin .article-body__content ul li a { color: var(--on-paper); text-decoration-color: var(--line-on-paper); } body.cs-skin .article-body__content p a:hover, body.cs-skin .article-body__content ul li a:hover { color: var(--blue); text-decoration-color: var(--blue); } /* The big numeral on an ordered list. Display face, held back from full ink so it frames the heading rather than competing with it. */ body.cs-skin .article-body__content ol > li::before { font-family: var(--cs-display) !important; font-weight: 800; color: var(--on-paper-muted); } body.cs-skin .article-body__content ol > li > h3 { color: var(--on-paper); } /* Card radius, one of the four sanctioned values. Was 20px. */ body.cs-skin .article-body__content-image { border-radius: 16px; } /*------------------------------------------------------------------------------ 4. Sidebar: contents index and the signup card Both were #1a1b1e, which is the old brand's near-black. Ink, at Card radius. ------------------------------------------------------------------------------*/ body.cs-skin .article-body__index, body.cs-skin .article-body__signup { background: var(--ink); border-radius: 16px; } body.cs-skin .article-body__index-heading, body.cs-skin .article-body__signup-heading { font-family: var(--cs-display) !important; font-weight: 700; font-size: clamp(18px, 2vw, 21px); letter-spacing: -0.02em; color: var(--on-ink); } body.cs-skin .article-body__index-item a { color: var(--on-ink-muted); } body.cs-skin .article-body__index-item a:hover { color: var(--lime); } /* The Klaviyo embed. Its own rules carry !important, so these have to as well. This button is the one lime hit in its view: the hero CTA is a screen and a half above it and the two never share a viewport. */ body.cs-skin .article-body__signup form button { font-family: var(--cs-body) !important; font-weight: 700 !important; border-radius: 999px !important; background: var(--lime) !important; color: var(--ink) !important; } body.cs-skin .article-body__signup form button:hover { background: #E2FF3A !important; } body.cs-skin .article-body__signup input[type="email"], body.cs-skin .article-body__signup input[type="text"] { border-radius: 999px !important; font-family: var(--cs-body) !important; } /*------------------------------------------------------------------------------ 5. Below the article: FAQs, then the experts include ---------------------------------------------------------------------------- .faqs is already a paper block with paper-context headings in skin section 4, and .accordion is handled in section 10, so the reading surface runs paper from the slab straight through the FAQs. experts.php is a shared include and cannot be edited, so it is handled here. csignal-skin.css section 18 used to do this; it went with the work-page refactor and only the arrow rules survived. It is the page's second and last stepped edge: paper above, ink below, and a different cut from the first, or the two seams read as a repeat rather than as two tears. ------------------------------------------------------------------------------*/ body.cs-skin .experts { background-color: var(--ink); position: relative; } body.cs-skin .experts::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 26px; z-index: 2; pointer-events: none; /* A different cut from the first seam, or the two read as a repeat rather than as two tears. Same crispEdges SVG technique. */ background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%2012%22%20preserveAspectRatio=%22none%22%20shape-rendering=%22crispEdges%22%3E%3Cpath%20d=%22M0%200%20H100%20V3.96%20H86%20V9.48%20H71%20V2.88%20H60%20V7.92%20H44%20V10.92%20H29%20V4.92%20H18%20V8.64%20H0%20Z%22%20fill=%22%23F3F5EE%22/%3E%3C/svg%3E") no-repeat top center / 100% 100%; } body.cs-skin .experts > .container { position: relative; z-index: 3; } body.cs-skin .experts__title { color: var(--on-ink); } body.cs-skin .experts__description { color: var(--on-ink-muted); } /* .experts__subtitle is deliberately a lime chip in csignal-skin.css, site-wide on every page that includes experts.php. Left alone on purpose. An earlier version of this file restyled it as a mono label, which only half-won the cascade and left muted light text sitting on lime. If the lime chip and the lime CTA in this band ever need separating, that is a change to make in the skin for every page at once, not here for articles only. */ /*------------------------------------------------------------------------------ 4. Tables in the article body csignal-skin.css sets `body.cs-skin { color: var(--on-ink) }`, which is right for the ink-backed bands on the marketing pages. Section 3 above cancels it for h1-h6, p and li inside the content column, but a table inherits from the body instead, so every cell rendered as paper-on-paper and the table read as blank. 24 of the 142 v2 articles carry a table. Colour first, then the rest. The tables were hand-written with inline styles and there are three different vintages of them across the archive: `padding: 12px 15px; border-bottom: 1px solid #eee`, `padding:10px;border:1px solid #e5e5e5`, and a handful of tr backgrounds at #fafafa / #f8f8f8 / #f5f5f5. Inline wins the cascade, so the greys need !important to become skin tokens. Padding is left alone: it is inline, it is reasonable, and overriding it buys nothing. ------------------------------------------------------------------------------*/ body.cs-skin .article-body__content table { color: var(--on-paper); font-family: var(--cs-body) !important; width: 100%; border-collapse: collapse; /* Hairline ring so the table reads as one object on paper rather than as a set of floating rows. */ border: 1px solid var(--line-on-paper) !important; border-radius: 8px; overflow: hidden; margin: 2rem 0; } body.cs-skin .article-body__content table th, body.cs-skin .article-body__content table td { color: var(--on-paper); border-color: var(--line-on-paper) !important; vertical-align: top; text-align: left; } /* The header row is the one place the metric role earns its keep: small, mono, uppercase, so column labels never compete with the cell content. */ body.cs-skin .article-body__content table thead th { font-family: var(--cs-mono) !important; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-paper-muted); background: var(--paper-2) !important; border-bottom: 1px solid var(--line-on-paper) !important; } /* Zebra striping is restated rather than removed. The inline #fafafa is only two points off the paper and disappears; paper-2 is the token that actually separates. Applied by position so it stays correct on the tables whose rows carry no inline background at all. */ body.cs-skin .article-body__content table tbody tr { background-color: transparent !important; border-bottom: 1px solid var(--line-on-paper) !important; } body.cs-skin .article-body__content table tbody tr:nth-child(even) { background-color: var(--paper-2) !important; } body.cs-skin .article-body__content table tbody tr:last-child { border-bottom: 0 !important; } /* Links inside a table follow the body-copy rule from section 3: ink until hover, then blue. Stated again because the section 3 selectors are scoped to p and li and do not reach a td. */ body.cs-skin .article-body__content table a { color: var(--on-paper); text-decoration-color: var(--line-on-paper); } body.cs-skin .article-body__content table a:hover { color: var(--blue); text-decoration-color: var(--blue); } body.cs-skin .article-body__content table strong { color: var(--on-paper); font-weight: 600; } /* Several articles wrap wide tables in a div with overflow-x:auto. Keep the scroll, and let the cells stop wrapping to nothing on a phone. */ body.cs-skin .article-body__content table { display: table; } @media (max-width: 600px) { body.cs-skin .article-body__content table { font-size: 14px; } }