/* ============================================================================ * Copia landing-page COMPONENTS — the opinionated layer * ============================================================================ * The primitives a NEW landing page starts from: type scale, .btn, .eyebrow, * section rhythm, focus rings, and the dark nav. Loaded when lp.json has * "components": true (the default). * * VALUES FOLLOW /whiskey-tasting/, NOT /blackhat2026/. * Black Hat was deliberately darker and busier than the brand direction (it is a * Black Hat page). The whiskey pages are the closer read on the new brand, so they * are the reference here. Concretely that means: no dash before the eyebrow, a * plain-label eyebrow rather than a flex row, roomier buttons (.95rem 1.7rem), * taller sections, h3 one step smaller, heading line-height 1.05. * * The three migrated pages set "components": false and keep their own copies, so * nothing here can change how they render. lp-base.css holds only what all of them * already agreed on byte-for-byte. * * FORWARD PATH: this file plus tokens.css is what gets promoted when the main site * goes dark. Use tokens only — never a raw hex, and prefer the semantic aliases * (var(--accent)) over a hue name (var(--orange)) so a brand decision is one edit. * ========================================================================= */ /* ---------- disarm Enfold's list system AT ITS SOURCE ---------------------- */ /* * The theme draws list markers from a set of custom properties: * * ul:not(..) li:not(..):not(..) { margin: var(--listGap, 1em 0); * padding: var(--listInnerGap, 0 0 0 1.4em) } * ul:not(..) li:not(..):not(..)::before { content: var(--listIcon, ""); * color: var(--listIconColor, var(--colorP2)); * position: absolute; … } * * Everything below used to fight the OUTPUT of those rules with `!important`, at (0,3,3) * specificity that page CSS cannot reach. Setting the INPUTS instead is strictly better and * it is the theme's own idiom — `copia/assets/css/main.css` disarms its list system on the * site header in exactly this way: * * .header, .ep-custom-menu-element .menu, … { --listGap: 0; --listInnerGap: 0; --listIcon: none } * * Custom properties inherit, so there is no specificity contest at all: any theme rule that * reads them gets an inert value, whatever selector it was written with and whatever loads * first. That is why this is a root fix and the `!important` rules further down are not — * those only neutralise the declarations we already knew about. * * Keep both. This handles the marker system; the rules below still cover a theme rule that * hardcodes a value instead of reading a variable. */ .copia-lp { --listGap: 0; --listInnerGap: 0; --listIcon: none; --iconWidth: 0; --iconHeight: 0; } /* ---------- standalone document shell ------------------------------------- */ body.copia-lp-page { background: #0E0A1C; /* pre-token: sits outside the .copia-lp scope */ margin: 0; overflow-x: hidden; } /* ---------- type ---------------------------------------------------------- */ .copia-lp h1, .copia-lp h2, .copia-lp h3 { font-family: var(--sans); font-weight: 300; line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; margin: 0; color: var(--cream); } .copia-lp h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); } .copia-lp h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); } /* ---------- section rhythm ------------------------------------------------ */ .copia-lp section { position: relative; padding-block: clamp(3.4rem, 6vw, 5.5rem); padding-left: var(--pad); padding-right: var(--pad); } /* ---------- paragraph flow ------------------------------------------------ */ /* * A trailing paragraph should not push space out of the bottom of its container. * * This exists to remove the REASON page authors write `.card p { margin: 0 }` — which is * the exact line that silently broke the eyebrow spacing on /dinner (see below). Give the * system a correct default and nobody needs the blunt instrument. */ .copia-lp p:last-child { margin-bottom: 0; } /* ---------- eyebrow ------------------------------------------------------- */ /* * Plain uppercase label. Black Hat's leading 2px dash is deliberately not here. * * MARK IT UP AS A , NOT A

. This is structural, not stylistic. * As a paragraph it was matched — and overridden — by ordinary page CSS like * `.copia-lp--slug .card p { font-size: .95rem; margin: 0 }`, which is (0,2,1) and loads * after the system. That silently changed the eyebrow's size AND deleted its spacing on * /dinner. A simply cannot be matched by a `p` selector, so the whole class of * collision disappears rather than being fought with specificity. */ .copia-lp .eyebrow { display: block; font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--accent); margin: 0; max-width: none; } .copia-lp .eyebrow.center { text-align: center; } /* * THE EYEBROW→HEADING GAP LIVES HERE, ON THE HEADING. Do not move it back onto * `.eyebrow { margin-bottom }`. * * Why this is not a style preference: * * The above already stops `p` selectors from matching the eyebrow. This rule is the * second, independent guard: spacing between two elements should not be cancellable by a * rule that targets only one of them. * * The original failure: the eyebrow was a `

`, styled by * `.copia-lp .eyebrow` at specificity (0,2,0). The page carried * `.copia-lp--dinner .rule p { margin: 0 }` at (0,2,1) — more specific AND loaded later — * so it deleted the eyebrow's bottom margin and welded it to the heading. Measured: a * 0.0px gap. It also overrode the eyebrow's font-size the same way. * * Putting the gap on the HEADING's margin-top makes it structurally immune: a `p` selector * cannot match an `h1`/`h2`/`h3`, no matter how specific it is. The relationship owns the * spacing, not either element. * * Verify with tools/lp-measure.sh, which prints the real computed gap. */ .copia-lp .eyebrow + h1, .copia-lp .eyebrow + h2, .copia-lp .eyebrow + h3 { margin-top: var(--space-label); } /* An eyebrow followed by anything else still needs to breathe. */ .copia-lp .eyebrow + *:not(h1):not(h2):not(h3) { margin-top: var(--space-label); } /* ---------- vertical rhythm ----------------------------------------------- */ /* * Headings carry `margin: 0` and paragraphs carry only a BOTTOM margin, so a heading * followed by body copy measured a 0px gap — every page had been papering over that with * its own one-off `margin-bottom` on each heading. Same root cause as the eyebrow bug: the * system defined a type scale but no rhythm, so each page re-guessed it. * * Spacing goes on the FOLLOWING element's margin-top, for the same reason as above: it * cannot be cancelled by a rule targeting only the heading. Longhand sibling selectors * rather than `:is()` — this repo stays conservative about what WP Rocket's minifier will * faithfully reproduce (§9). */ /* * HEADING -> BODY uses its own token, not --space-sm. * * --space-sm is a flat .75rem (12px). Headings on these pages run to clamp(2rem, 4.4vw, * 3.1rem) — up to ~50px — so a fixed 12px underneath reads as crammed at desktop sizes and * merely tight at mobile ones. The gap has to scale with the heading it follows, or the * rhythm is wrong at one end of the range whatever single value you pick. * * --space-heading is a clamp for that reason. It is a separate token rather than a bigger * --space-sm because --space-sm is also the eyebrow-adjacent step, where 12px is correct. */ .copia-lp h1 + p, .copia-lp h1 + ul, .copia-lp h1 + ol, .copia-lp h2 + p, .copia-lp h2 + ul, .copia-lp h2 + ol, .copia-lp h3 + p, .copia-lp h3 + ul, .copia-lp h3 + ol { margin-top: var(--space-heading); } /* * The `+ ol` half of the rule above is (0,1,2) and loses to the theme's (0,2,1) `ol` rule — * it was dead on any page carrying theme CSS. Restated at (0,2,2) so heading-to-list rhythm * actually applies to an

    . See the long note beside the container reset below. */ .copia-lp h1 + ol:not(.flickity-page-dots), .copia-lp h2 + ol:not(.flickity-page-dots), .copia-lp h3 + ol:not(.flickity-page-dots) { margin-top: var(--space-heading); } /* A heading after body copy needs more separation than one after its own eyebrow. */ .copia-lp p + h2, .copia-lp p + h3, .copia-lp ul + h2, .copia-lp ul + h3, .copia-lp ol + h2, .copia-lp ol + h3 { margin-top: var(--space-lg); } /* ---------- buttons ------------------------------------------------------- */ .copia-lp .btn { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: .5rem; padding: .95rem 1.7rem; border: none; cursor: pointer; border-radius: 3px; background: var(--accent); color: #210b07; transition: transform .18s ease, background-color .18s ease; box-shadow: var(--btn-glow); /* brand property — see docs/brand-dark-theme.md §4 */ } .copia-lp .btn:focus-visible, .copia-lp a:focus-visible, .copia-lp button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ---------- neutralise Enfold's reach into list markup -------------------- */ /* * Only bites when the theme's CSS is on the page — i.e. "nav": "site" or * "theme_css": true. Enfold styles ANY content `li` with a variable-driven, * ABSOLUTELY POSITIONED ::before plus its own `li` margins. Measured on /dinner with the * site header: our agenda list inherited `content: counter(section) "."`, * `position: absolute` and an 8.5px bottom margin we never asked for. * * CLAUDE.md §9 documents this at length — it is the single biggest time sink in this repo, * and the marker being out of normal flow is why no flex/align change can move it. Drag it * back into flow and blank it; a page that wants markers should draw its own. * * Not in enfold-escape.css on purpose: that file is loaded by the three migrated pages, * which already handle their own lists, and adding this there could change how they render. */ .copia-lp li::before { content: none !important; position: static !important; top: auto !important; left: auto !important; transform: none !important; } .copia-lp li { margin: 0 !important; padding: 0 !important; min-height: 0 !important; } /* ---------- neutralise Enfold's reach into the LIST CONTAINER ------------- */ /* * The rules above tame the theme's `li`. This tames its `ol`, a separate rule with HIGHER * specificity than anything a page normally writes, which silently ate every `
      ` margin * in this system until 2026-09-01. * * THE RULE WE ARE FIGHTING, in copia/assets/css/main.css: * * ol:not(.flickity-page-dots):not(.footnotes-ol-list) { * margin: var(--orderedListGap, 0 0 0 1.2em); padding: 0; list-style: none } * * That selector is (0,2,1) — one element plus two classes, because each `:not()` argument * counts. A landing page scopes its CSS as `.copia-lp--slug .my-list`, which is (0,2,0). The * theme therefore WINS every time, and it fails silently: the declaration is right there in * the page's stylesheet, the browser just discards it. * * MEASURED before this rule existed: * * /ot-recovery .gap-list authored margin: clamp(2.5rem,5vw,3.5rem) 0 0 * computed 0px 0px 0px 20.4px — the gap above it vanished * /dinner .agenda-list authored margin: 0 * computed 14.4px 0px 0px 20.4px — a 20.4px indent, live on * prod, that nobody wrote and nobody had noticed * * 20.4px is 1.2em at the 17px body size: the theme's own default leaking through. * * THE SHARED RHYTHM RULES WERE CASUALTIES TOO. `.copia-lp h2 + ol` is (0,1,2), also below * (0,2,1), so the `+ ol` half of the vertical-rhythm block above was dead on arrival on any * page carrying theme CSS. It is restated there at a specificity that survives. * * WHY (0,2,1) AND NOT HIGHER — matching the theme rather than beating it is deliberate. * Stylesheet order is main.css -> lp-components.css -> the page's lp.css, verified against * the rendered page, so: * * theme ol:not(..):not(..) (0,2,1) main.css loses on order * here .copia-lp ol:not(..) (0,2,1) lp-components wins over the theme * page .copia-lp--slug ol.my-list (0,2,1) lp.css wins over this * * So a page can still style its own list with no `!important` anywhere — it just has to name * the element. Going higher would lock pages out and force an `!important` arms race, which * is exactly what the `li` rules above already cost us. * * ON A LANDING PAGE, WRITE `ol.my-list`, NEVER `.my-list`, FOR AN
        . * `.copia-lp--slug .my-list` is (0,2,0) and loses to this reset exactly as it lost to the * theme. `
          ` is unaffected — the theme has no equivalent container rule for it — but * naming the element costs nothing and is the safer habit. */ .copia-lp ol:not(.flickity-page-dots) { margin: 0; padding: 0; } /* * And the ORDERED-list marker, which is a THIRD separate theme rule and the highest- * specificity of the lot: * * ol:not(.flickity-page-dots):not(.footnotes-ol-list) > li::before { * content: counter(section) "."; position: absolute; top: 0; left: 0; * color: var(--orderedListIconColor, var(--colorP2)) } * * That is (0,2,3) — it beats `.copia-lp--slug .my-list li::before` (0,2,2) on specificity * alone, so load order cannot save a page rule. MEASURED on /ot-recovery: the numerals were * authored `color: var(--teal-lite)` and rendered indigo #5B66DC, because the theme's colour * won while the `content` and `position` only survived through `!important`. * * Note it is `position: absolute` with `top/left: 0`, so if a page re-enables `content` * without also forcing `position: static`, the marker leaves the flow and stacks in the * corner. That is the ol twin of the `li::before` trap CLAUDE.md §9 documents at length. * * Neutralised here at matching (0,2,3). A page drawing its own ordered marker must therefore * name both elements — `.copia-lp--slug ol.my-list > li::before` — which is (0,2,3) in a * later file and wins cleanly. */ .copia-lp ol:not(.flickity-page-dots) > li::before { content: none; position: static; color: inherit; } /* Utility, not from either page: marks an outbound link. Inert unless used. */ .copia-lp .ext { font-size: .85em; opacity: .8; } /* ---------- hero scaffolding (pages restyle freely) ----------------------- */ .copia-lp .hero-sub { font-size: 1.15rem; line-height: 1.55; color: var(--cream); max-width: 34rem; margin-bottom: 1.7rem; } .copia-lp .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; } /* ---------- dark nav (standalone pages only) ------------------------------ */ .copia-lp .lp-nav { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: var(--maxw); margin: 0 auto; padding: 1.4rem var(--pad); } .copia-lp .lp-nav .logo { height: 30px; width: auto; } /* dark variant: force the mark to cream so it reads on a dark bar */ .copia-lp .lp-nav--dark .logo { filter: brightness(0) invert(1); } /* ---------- light nav variant --------------------------------------------- */ /* * A white bar above a dark page, matching the live site's normal header: full-colour Copia * logo, dark links. Note the logo is deliberately NOT filtered here — inverting it to cream * on a white bar is exactly how it would vanish. */ .copia-lp .lp-nav--light { /* full-bleed white bar; inner items still sit on the page's horizontal padding. NOTE: padding-left/right, never padding-inline — WP Rocket's CSS minifier drops the logical properties outright (CLAUDE.md §9). */ background: var(--light-bg); border-bottom: 1px solid var(--light-line); max-width: none; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; padding-top: 1rem; padding-bottom: 1rem; padding-left: var(--pad); padding-right: var(--pad); } .copia-lp .lp-nav--light .lp-nav-links { justify-content: center; } .copia-lp .lp-nav--light .lp-nav-links a { color: var(--light-text); opacity: .78; } .copia-lp .lp-nav--light .lp-nav-links a:hover { color: var(--accent); opacity: 1; } .copia-lp .lp-nav--light .lp-nav-login { color: var(--light-text); opacity: .78; font-size: .92rem; } .copia-lp .lp-nav--light .lp-nav-login:hover { color: var(--accent); opacity: 1; } .copia-lp .lp-nav-links { list-style: none; display: flex; align-items: center; gap: 1.6rem; margin: 0; padding: 0; font-size: .92rem; } .copia-lp .lp-nav-links a { color: var(--muted); transition: color .15s; } .copia-lp .lp-nav-links a:hover { color: var(--cream); } .copia-lp .lp-nav-cta { display: flex; align-items: center; gap: 1.1rem; } .copia-lp .lp-nav-cta .btn { padding: .6rem 1.1rem; font-size: .9rem; box-shadow: none; } .copia-lp .lp-nav-login { font-size: .92rem; color: var(--text-muted); transition: color .15s; } .copia-lp .lp-nav-login:hover { color: var(--text); } /* ---------- responsive + motion ------------------------------------------- */ @media (max-width: 860px) { .copia-lp { font-size: 16px; } .copia-lp .lp-nav-links { display: none; } } @media (max-width: 560px) { .copia-lp .foot-inner { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .copia-lp.js .reveal { opacity: 1 !important; transform: none !important; transition: none; } }