/* The Drop (FSE) - enqueued stylesheet, NOT the theme's identity file. WP reads theme metadata from /style.css at the theme root; this file is loaded via functions.php with filemtime() cache-busting. */ /* ── Base reset (global border-box, per house standard) ────────────── */ *, *::before, *::after { box-sizing: border-box; } /* §3.3 - the ONE gutter mechanism (2026-08-22 fix). This was missing entirely: theme.json had useRootPaddingAwareAlignments:true (the standard requires false - it changes how/where WP emits the constrained-layout max-width rule, and confirmed live it silently stopped emitting one at all for a `layout:constrained` block nested inside a custom flex container - .drop-home-layout__main measured max-width:none, is-layout-constrained class present but inert) plus a styles.spacing.padding block that only half-worked as a substitute gutter. Overriding WP's own content-size variables here is the real mechanism - every constrained container reads it directly, nested or not. */ :root { --wp--style--global--content-size: min(1310px, 100vw - 3rem) !important; --wp--style--global--wide-size: min(1310px, 100vw - 3rem) !important; } .alignfull { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); } /* 2026-08-23 - header moved from sticky to fixed (see .site-header below for the full why). `overflow-x: clip` no longer has anything sticky- specific to protect, but it's harmless for a fixed header too, so left as-is rather than touched for no reason. `padding-top` is the fixed header's real content offset - literal px, JS-written (site.js `measure()`), NEVER a bare var() per §4.2 ("height values must be literal pixels - transition cannot interpolate a custom-property change"). The value here is just a same-order-of-magnitude fallback for the instant before JS runs; it corrects itself on DOMContentLoaded before paint in practice. NO transition on the base rule (2026-08-23 fix) - `measure()` runs a SECOND time on the `load` event (images/fonts can shift the header's real height after DOMContentLoaded), and with a transition declared here unconditionally, that routine correction animated visibly on every page load ("the header seems to animate in" - Daniel). The `.has-header-transition` class opts in AFTER both initial measurements are done settling, so only an actual scroll-triggered shrink/expand animates - a page load never should. */ .wp-site-blocks { overflow-x: clip; /* Pre-JS default = the header's real full height (measured live 2026-10-30: 118px below 1200, 200px from 1200), plus the admin bar. It used to be a 320px placeholder that site.js then shrank, which shoved the whole page up on every load (Lighthouse CLS 0.21 on home, 0.32 on the Knowledge Bank). site.js still writes the exact literal value; this just means it normally has nothing to correct. */ padding-top: calc(118px + var(--mca-admin-bar-h, 0px)); } @media (min-width: 1200px) { .wp-site-blocks { padding-top: calc(200px + var(--mca-admin-bar-h, 0px)); } } .wp-site-blocks.has-header-transition { transition: padding-top 0.3s ease; } :root { --drop-section-pad: clamp(2rem, 4vw, 3.125rem); /* Sole owner of column/card-grid gaps specifically (§0.4 pattern) - deliberately separate from theme.json's global blockGap (clamp(0.85rem, 2vw, 1.25rem), owns paragraph rhythm only) so bumping this for "ample white space" on an article-driven site (2026-08-22, Daniel's call) can't also blow out paragraph spacing everywhere else. Applied below to the specific column/grid contexts, not a blanket .is-layout-flex override - that would also hit button rows, icon groups, nav items, etc. that use flex layout for unrelated reasons and shouldn't get a 2-4rem gap. */ --drop-column-gap: clamp(2rem, 5vw, 4rem); --mca-admin-bar-h: 0px; /* JS-measured on init/load/resize only - see functions.php */ } /* ── Typography & colour system (2026-08-28, headline/label split rewritten 29 Aug - Daniel's call from a live three-way comparison) ── Three-face system replacing the single Lato face: Archivo (display - EVERY headline, at every size, sentence case or not), Source Serif 4 (reading - article body copy), Archivo Narrow (stamp - EXCLUSIVELY the caps label layer: kickers, dates, eyebrows, the venue list, the partner chip, search group labels - was Courier Prime, swapped 2026-08-28 later same day - see the --font-stamp alias and the stamp-rule comment further down for the full reasoning, not repeated here). THE RULE: if it's sentence case, it's Archivo; if it's caps-and- tracked, it's Narrow. Card titles (and every other sentence-case title - sidebar module titles, the featured-article title, post-nav prev/next) moved OFF Narrow onto Archivo 700 this pass - Narrow was the right call when titles were ALL CAPS (condensed width bought back characters caps were wasting); sentence case removed that reason, and condensed lowercase at card-title size read tabloid where regular-width reads editorial (confirmed live: Narrow 20.5px vs Archivo 700/19px vs Archivo 600/20px - 700/19px matched the article H1's voice and still fit the longest real title in the same two-line clamp). This also gives the stamp layer its own voice back - it was flagged as "doing double duty, at its limit" while it also had to carry headlines. Still a three-face system, not four - Archivo Narrow's two woff2 files stay loaded regardless (the label layer alone uses them everywhere), so this is a reassignment of who uses which face, not a payload change. Short `--font-*`/named-colour aliases below resolve to the real `--wp--preset--*` custom properties WP generates from theme.json, per the account-wide "`:root` aliases resolve to preset vars" convention - component rules below read the short form; existing pre-2026-08-28 rules elsewhere in this file were left on their original verbose `--wp--preset--color--*` references (just renamed to the new slugs) rather than migrated, to keep this pass a colour/ type change only, not a wider refactor. */ :root { --font-display: var(--wp--preset--font-family--display); --font-body: var(--wp--preset--font-family--body); --font-stamp: var(--wp--preset--font-family--display-narrow); /* was --wp--preset--font-family--stamp (Courier Prime, REMOVED from theme.json 2026-08-28, later same day - mono-spacing opened craters around "GAMING / OPERATIONS" and made "23 AUG 2026" fall apart, and it was the wrong postal reference to begin with - a cancellation is stamped/stencilled, not typed). Points at `display-narrow` (Archivo Narrow 700) rather than adding a second family - do NOT re-declare Archivo Narrow under a new "stamp" slug pointing at the same woff2 files. Two @font-face blocks for one family is exactly what caused the earlier Archivo/ Archivo-Narrow collision (the narrow file registered as plain "Archivo" 700, so every 700-weight element sitewide silently rendered condensed) - one family, one declaration, referenced by whichever alias needs it. All six --font-stamp call sites (this file's stamp rule below, .drop-card-kicker, .site-header__strap- venues, .drop-search__group-label, .drop-search-result__eyebrow/ __partner-chip) get the new face for free through this one line. UPDATED 29 Aug (headline/label split): this comment used to say Archivo Narrow was "already loaded for card titles" - card titles (and every other sentence-case title) have since moved to Archivo (see the type-system comment above). `display-narrow` is now used EXCLUSIVELY by the caps label layer - the six --font-stamp call sites listed above plus `.drop-page-header__eyebrow` (its own direct reference, not through this alias) - nothing else. The two woff2 files stay loaded through those call sites alone. */ --ink: var(--wp--preset--color--ink); --ink-heading: var(--wp--preset--color--ink-heading); --ink-muted: var(--wp--preset--color--ink-muted); --brand-red: var(--wp--preset--color--brand-red); --brand-red-flat: var(--wp--preset--color--brand-red-flat); --brand-navy: var(--wp--preset--color--brand-navy); --brand-navy-deep: var(--wp--preset--color--brand-navy-deep); /* nav-row navy pass, 2026-08-28 later same day - a half-step below brand-navy, enough to read as a distinct row without splitting the masthead into two blocks (contrast/rationale on each rule below, not repeated here) */ /* Body-copy standard (2026-08-28 later still, Daniel's explicit 28 Aug call - ONE size sitewide, not "corrected" back to two tiers later). These three ONLY back the new rules this pass adds (the measure cap on prose elements/archive descriptions/search excerpts below) - the sitewide base itself lives in theme.json (body fontSize inherits the browser default 16px/1rem; lineHeight 1.6 is already set there too), not restated here as a second source of truth. Existing literal values elsewhere in this file (`body.single .wp-block-post-content`'s own `max-width: 68ch`, `.wp-block-post-excerpt__excerpt`'s `1rem`) are deliberately NOT swept to reference these - this pass is the measure-cap fix, not a wider token migration. */ --text-body: 1rem; --leading-body: 1.6; --measure: 68ch; } /* ── Airmail ribbon (2026-08-28) - The Drop's postal-identity diagonal stripe, brought in from the static ad creative it currently only exists baked into. --air-red/--air-navy alias the EXISTING brand-red/ brand-navy tokens above rather than duplicate them in theme.json's palette - both already carry the exact hex values this system wants (#c8151b / #3f586e), confirmed before adding anything. Governing rule: the ribbon edges things that arrive (page chrome, the newsletter unit, the lead hero, a section rule) - never a fill, never behind text, never on advertiser/partner content. Exactly ONE repeating-linear-gradient definition exists, here - nothing else in this file may declare a second one. */ :root { --air-red: var(--brand-red); --air-navy: var(--brand-navy); --air-ground: var(--wp--preset--color--white); /* the "paper" bar - no current consumer overrides this per-surface any more (.site-footer's override was removed as a mistaken premise 2026-08-28; .drop-house- ad's was removed 30 Aug along with that tile's whole frame, see its own comment) - every remaining framed element is a light-surface newsletter unit, so the sitewide default is what actually renders everywhere today. Comment history below kept for why --air-fill exists as a SEPARATE token, not restated as a currently-true list of overrides. */ --air-fill: var(--air-ground); /* padding-box fill for a FRAMED unit (.air-frame) - separate from --air-ground 2026-08-28 (ribbon refinements pass) because those are two different jobs: --air-ground is a stripe INGREDIENT (the paper-coloured bar between the red/navy bars), --air-fill is what sits inside the frame's border. They happen to be the same colour on a white panel (the newsletter modal), which is why this was never a bug until a framed unit needed a NON-white interior (.drop-house-ad, a navy tile, BEFORE its frame was removed 30 Aug) - overriding --air-ground there to get a visible paper bar would have also repainted the tile's own background white. Defaults to --air-ground so every existing framed unit is unchanged. */ --air-pitch: 9px; /* perpendicular width of ONE colour bar - the true bar width regardless of which way a strip runs, since gradient stops are measured perpendicular to the bars */ --air-angle: -45deg; /* stripes lean "/" - never change this anywhere */ } /* Declared on every element (not :root) so `var(--air-pitch)` etc. RE- RESOLVE per element instead of baking :root's values into one gradient string that every consumer then inherits already-computed. Found live 2026-08-28: three existing consumers (.drop-newsletter-modal at pitch 8, .drop-archive-title::after at pitch 7 - this second one ALSO now removed, 29 Aug, page-header pattern; see "RIBBON PLACEMENT RETIRED" further down - plus the already-removed .drop-hero- carousel::before at pitch 7) were ALL silently rendering at :root's 9px the whole time - their own `--air-pitch` overrides had no effect, because a custom property used inside another custom property's value resolves at the DECLARING element, not at each place the resulting value is later consumed. Moving the composition itself onto `*, *::before, *::after` makes it resolve fresh at whichever element actually sets an override. Do NOT move this back to :root - every local --air-pitch/--air-ground/--air-navy override in this file depends on it re-resolving here. */ *, *::before, *::after { --airmail: repeating-linear-gradient( var(--air-angle), var(--air-red) 0 var(--air-pitch), var(--air-ground) var(--air-pitch) calc(var(--air-pitch) * 2), var(--air-navy) calc(var(--air-pitch) * 2) calc(var(--air-pitch) * 3), var(--air-ground) calc(var(--air-pitch) * 3) calc(var(--air-pitch) * 4) ); } /* Two general-purpose utilities (available for future placements - phase 2's reading-progress bar and 404 page reuse these directly). */ .air-rule { height: 6px; background-image: var(--airmail); } .air-frame { border: 5px solid transparent; border-radius: 0; /* mitred gradient corners on a radius go muddy - square edges are what an envelope actually does */ background: linear-gradient(var(--air-fill), var(--air-fill)) padding-box, var(--airmail) border-box; } /* ── drop/house-ad-linkedin (2026-08-28, ribbon refinements; FRAME REMOVED 30 Aug, button-system pass) - The Drop's own house promo ("Follow us on LinkedIn"). Ships as a synced pattern ("House ad — LinkedIn", a wp_block post referenced via `wp:block {"ref":ID}`) so an editor can place it in the sidebar, mid-article or the footer without a developer touching a template file - see sidebar.html/ single-sidebar.html and the Top Jobs page's post_content for its three current placements. MUST NOT be registered wherever paid ad inventory is served/counted - this is a always-on house unit, not sold space. FRAME REMOVED, 30 Aug (Daniel's review) - this tile used to be a real four-sided airmail frame (`.air-frame`-style border-box gradient), with its own lifted-navy override (`#93aec6`) so the navy stripe bar stayed visible against the tile's identically-dark navy interior. That lifted navy read as off-brand blue on review - it was always a workaround for a genuine rendering problem (true navy merging with the fill at the border), not a colour anyone actually wanted. Rather than re-tune the workaround, the frame is REMOVED outright - flat brand-navy tile, square corners, no border, `--air-pitch`/`--air- ground`/`--air-navy`/`--air-fill` overrides all deleted with it. SYSTEM CONSEQUENCE, recorded here per the brief: the newsletter units (`.drop-newsletter-modal`, `.drop-newsletter--inline`) are now the ONLY framed elements left on the site, alongside the two page-edge ribbons (`.site-header::before`, `.site-footer::before`). That's a STRENGTHENING of what the frame means, not a loss - "envelope frame" now reads as "mail", unambiguously, everywhere it still appears. New treatment: a bird watermark (`.drop-house-ad__watermark`, below) replaces the frame - `drop-bird.png`, the SAME white-alpha asset used sitewide (no new file), right-anchored, ~140% of tile height, 0.08 opacity (retuned from 0.14, 30 Aug, Daniel's review - see that rule's own comment for the "lighten" -> less-prominent correction), clipped by this tile's own `overflow:hidden` - the same franking-mark visual language as the `.drop-card-fallback` tiles' own postmark treatment (search "drop-card-fallback__postmark" in this file), scaled for this tile's own proportions. LinkedIn's own "in" glyph sits inline before the heading text (see `.drop-house-ad__title` below), ~20px. UPDATED 30 Aug (Daniel's request, "frame the LinkedIn icon with their official branding") - was rendering monochrome white (reusing this theme's own existing footer social-icon path, deliberately NOT a fresh reproduction of LinkedIn's real mark at the time, over caution about getting a trademarked asset wrong). Now the real two-colour "in" badge - blue square (#0A66C2, LinkedIn's own published brand blue) with the white "in" lettermark, matching how LinkedIn's own follow/share badges actually render everywhere else on the web. This is still a close reproduction of their standard mark, not their exact official SVG/PNG asset file - swap in the real file from LinkedIn's brand resource page if pixel-exact fidelity is needed. Still the one element on this tile that does NOT get the watermark/franking treatment everything else here does - don't tint or screen it; the blue is the badge's own real colour, not decoration to match this tile's palette. */ .drop-house-ad { position: relative; overflow: hidden; /* clips the watermark - see .drop-house-ad__watermark */ border-radius: 0; background: var(--wp--preset--color--brand-navy); display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; color: var(--wp--preset--color--white); } .drop-house-ad__watermark { position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 140%; width: auto; opacity: 0.08; /* was 0.14, briefly tried 0.32 - Daniel's first ask ("lighten the bird") meant LESS visual weight/more subtle, not literally brighter/more opaque; 0.32 went the wrong direction and was corrected same session before it ever shipped to a second review. 0.08 is deliberately below the original 0.14 - a genuinely subtle background texture, not a watermark anyone is meant to consciously notice. */ pointer-events: none; } /* Logo intentionally not rendered yet - the brief asked for the site's existing script wordmark as an SVG, and no SVG version of the logo exists in the media library (the real asset is Logo.jpg, a raster file - confirmed live via the header's own ). Rather than fake a vector trace of a raster mark or block the rest of this component on that gap, the tile ships without it; the heading below already carries the meaning on its own. Drop a real `drop-house-ad__logo` (SVG, alt="") back in ahead of the heading once that asset exists - no CSS needed to reserve space for it, this is a plain flex column. */ .drop-house-ad__title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); /* Archivo */ font-weight: 800; font-size: 1.45rem; line-height: 1.05; letter-spacing: 0; /* was 0.02em - caps-era tracking; sentence case now, per the button-system pass's sitewide rule: promo headings are headlines, and headlines are sentence case, not stamp-layer caps. */ text-transform: none; /* was uppercase */ margin: 0; color: var(--wp--preset--color--white); position: relative; /* stacks above the watermark by DOM/paint order alone (this element and the watermark are siblings, both direct children of .drop-house-ad, and this one comes second in source) - position:relative here only future-proofs against a stray z-index ever being added to the watermark, no z-index needed today. */ } .drop-house-ad__title svg { flex-shrink: 0; width: 20px; height: 20px; border-radius: 4px; /* added 30 Aug (Daniel's request, "frame the LinkedIn icon with their official branding") - the glyph itself is now LinkedIn's real two-colour badge (blue square, white "in" mark - see the pattern's own post_content), this just keeps the square's corners consistent with how LinkedIn's own badge renders elsewhere (their brand assets ship it with a slight radius, not a hard square) - the tile AROUND it stays square- cornered per this component's own no-radius rule, this is scoped to the glyph alone. */ } /* Body copy is Archivo, not the sitewide Source Serif default - deliberately: this is promotional furniture (a CTA card), not running editorial prose, the same distinction the sitewide typography system already draws for nav/buttons/pagination. Keep Source Serif for actual article copy. */ .drop-house-ad__body { font-family: var(--font-display); font-weight: 400; font-size: 0.95rem; line-height: 1.4; margin: 0; color: #e7edf3; /* audit-allow-hex: muted white-on-navy body text tint, decorative only - no existing token sits between white and ink-muted (which assumes a light background) */ position: relative; /* same reasoning as the title above */ } /* CTA now renders from `.drop-btn` (button-system pass, 30 Aug) - was its own caps+0.08em-tracked treatment, one of the three buttons that made the sitewide "buttons are sentence case" rule worth writing down (see `.drop-btn`'s own comment, this file). `align-self:flex- start` is the one property this class keeps of its own - `.drop-btn` doesn't set it, and without it this tile's flex-column parent would stretch the CTA to the tile's full width. */ .drop-house-ad__cta { align-self: flex-start; position: relative; /* same reasoning as the title above */ } /* ── drop/newsletter-signup (2026-08-28 newsletter rebuild) - ONE component, three variants (modal/inline/footer), per the brief's §3. Base rule below is variant-agnostic (typography/layout/honeypot/ status region); each `--modifier` only changes framing + heading size, never markup or behaviour, matching "same markup, same validation, same endpoint - do not build three separate forms". */ .drop-newsletter { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem; background: var(--wp--preset--color--surface); } /* Inline variant (§2.2 - end of every article, the primary placement): the full airmail frame, reusing .air-frame's own rule directly rather than duplicating it - same class the LinkedIn house-ad tile uses, so a future frame-treatment change propagates to both automatically. */ .drop-newsletter--inline { border: 5px solid transparent; border-radius: 0; background: linear-gradient(var(--air-fill), var(--air-fill)) padding-box, var(--airmail) border-box; } /* Spacing around the inline unit (2026-09-14, Daniel's screenshot - crammed against the article's own "Sources:" list above and the Previous/Next row below, zero breathing room either side). FIRST FIX WAS WRONG, caught live before it actually helped: assumed this form is `#site-main`'s direct child (reading only single-post- body.html's own markup, where `wp:post-content`/this block/`wp:drop/ post-nav` genuinely are three siblings) and wrote `#site-main > .drop-newsletter--inline { margin-block: var(--drop-section-pad) }` to beat `#site-main > * { margin-block: 0 }` (§4.7) on specificity. Live DOM walk showed the REAL ancestor chain is five levels deep: #site-main > .drop-single-layout (the is-section-flex row) > .drop-single-layout__main > .wp-block-template-part (single-post- body.html's own auto-generated wrapper) > this form - so `#site-main > *` was never even matching this element in the first place, and neither was my "fix". Corrected below to a plain, unqualified `.drop-newsletter--inline` selector, which reaches the real element regardless of how many wrapper levels sit in between. Margin, not the established `.is-section` padding-block pattern (§3.5) - padding here would grow INSIDE this same element's own airmail-framed border (border/background live on `.drop-newsletter-- inline` itself), pushing the frame taller rather than separating it from its neighbours. Still the SAME `--drop-section-pad` token every other section gap uses, just applied as margin because this is a framed component, not a full-bleed section owning its own background. Scoped to this one modifier class only - the modal variant lives inside a ``, the footer variant inside the footer template part, neither needs this. */ .drop-newsletter--inline { margin-block: var(--drop-section-pad); } /* Footer variant (§2.3) - deliberately LIGHTER than the inline unit: a top ribbon rule only, not a full 4-sided frame - the footer already carries its own top-edge ribbon (.site-footer::before), so a second full frame immediately below it would be the site's mark bordering its own mark. Reuses the same .air-rule proportions (short bar, `--airmail`) as a ::before rather than a new gradient definition. */ /* Top-edge ribbon REMOVED (2026-08-28, later still, Daniel's request) - this footer variant sits directly below the footer's own top-edge ribbon (.site-footer::before), and having a second ribbon rule immediately above the newsletter unit read as one too many marks in the same small stretch of page - the site's own top edge, then this unit's own top edge, right on top of each other. padding-top REMOVED too (same request, immediate follow-up) - it only ever existed as clearance for the ribbon's own height above the content; with no ribbon left to clear, it was just dead space. `background: transparent` stays (this variant intentionally has no fill, unlike the inline unit's .air-frame treatment). position:relative also dropped - it existed solely as the containing block for the removed ::before ribbon; nothing else here needs a positioning context. padding-top: 0 added explicitly (not just "no override left") - the BASE .drop-newsletter rule (search "drop/newsletter-signup" above) sets `padding: 1.5rem` on all four sides for every variant; simply deleting this variant's own override, as done in the edit just above, left that base 1.5rem top padding standing on its own - confirmed live (still rendered 24px) before making this second pass. Zeroed here, scoped to the footer variant ONLY, so the modal/inline variants keep their own top padding untouched. */ .drop-newsletter--footer { background: transparent; padding-top: 0; } /* Modal variant - no separate frame here; the .drop-newsletter-modal ITSELF already carries the full airmail frame (see that rule further up this file) - the form inside is plain, unframed content within an already-framed panel, not framed twice. */ .drop-newsletter--modal { padding: 0; background: transparent; } .drop-newsletter__title { font-family: var(--font-display); margin: 0; } .drop-newsletter--modal .drop-newsletter__title, .drop-newsletter--inline .drop-newsletter__title { font-size: 1.5rem; } .drop-newsletter--footer .drop-newsletter__title { font-size: 1.15rem; /* smaller heading in the footer's own narrower column - "framing and heading size differ", per the brief's own wording. */ } .drop-newsletter__body { margin: 0; font-size: 0.95rem; } .drop-newsletter__row { display: flex; gap: 0.5rem; flex-wrap: wrap; } .drop-newsletter__row input[type="email"] { flex: 1 1 12rem; min-height: 44px; padding-inline: 0.75rem; border: 1px solid var(--wp--preset--color--ink-muted); font-family: var(--font-display); font-size: 0.9375rem; box-sizing: border-box; } /* Was its own navy-fill button (padding/font/hover all hand-tuned here) - NOW renders from `.drop-btn` (button-system pass, 30 Aug), markup updated to `