/* ========================================================================== SkilD · COMPONENT KIT Fourteen components, every one already specified in SKILD-DESIGN-CONTEXT.md PART G (5.1–5.13) and PART G.1 (W1–W4). Three of PART G's thirteen are print constructs with no web job and are deliberately absent: 5.8 COVER, 5.10 SIDE TAB, 5.13 MASTHEAD. THIS FILE INVENTS NOTHING. Every colour, radius, padding, weight and state below traces to a written spec. Where the spec is silent the code says so in a comment rather than guessing — search "UNDER-SPECIFIED". Weights follow authorisation A-33: IBM Plex Sans has no 800, so the whole ladder steps down one — 800→700, 700→600, 600→500 — to keep the gaps. Every value reads from theme.json. Nothing is hard-coded that has a token. Built 12 August 2026, session S9, Phase 2. ========================================================================== */ /* -------------------------------------------------------------------------- 5.1 · BUTTON primary bg #A51C30, text #FFF, radius pill, pad 13px 28px, --sk-sh-cta hover AND pressed #8C1829 (c-700); pressed drops the lift secondary transparent, text #A51C30, 1.5px border #A51C30 ghost text #33353C, no border, underline on hover on dark WHITE FILL, CRIMSON LABEL. Never navy, never a ghost. One primary per view. Focus ring always. Min target 44px. -------------------------------------------------------------------------- */ .skild-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:var(--wp--custom--target--min); padding:var(--wp--custom--button--pad-y) var(--wp--custom--button--pad-x); border-radius:var(--wp--custom--radius--pill); font-family:var(--wp--preset--font-family--sans); font-size:var(--wp--preset--font-size--body); font-weight:var(--wp--custom--weight--heading); /* was 700 Montserrat → 600 Plex */ line-height:1.2; text-decoration:none; border:0; cursor:pointer; background:var(--wp--preset--color--crimson); color:var(--wp--preset--color--white); box-shadow:var(--wp--preset--shadow--cta); transition:background var(--wp--custom--duration--base) var(--wp--custom--ease--out), box-shadow var(--wp--custom--duration--base) var(--wp--custom--ease--out); } .skild-btn:hover{ background:var(--wp--custom--ramp--c-700); box-shadow:var(--wp--preset--shadow--cta-h); color:var(--wp--preset--color--white); } .skild-btn:active{ background:var(--wp--custom--ramp--c-700); box-shadow:var(--wp--preset--shadow--cta-a); } /* pressed drops the lift */ .skild-btn:focus-visible{ outline:none; box-shadow:var(--wp--custom--focus--ring); } .skild-btn--secondary{ background:transparent; color:var(--wp--preset--color--crimson); border:1.5px solid var(--wp--preset--color--crimson); box-shadow:none; } .skild-btn--secondary:hover{ background:transparent; color:var(--wp--custom--ramp--c-700); border-color:var(--wp--custom--ramp--c-700); box-shadow:none; } .skild-btn--ghost{ background:transparent; color:var(--wp--preset--color--body); border:0; box-shadow:none; padding-left:0; padding-right:0; } .skild-btn--ghost:hover{ background:transparent; color:var(--wp--preset--color--body); text-decoration:underline; box-shadow:none; } /* on a dark ground: WHITE FILL, CRIMSON LABEL. Never navy, never a ghost. */ .skild-btn--on-dark{ background:var(--wp--preset--color--white); color:var(--wp--preset--color--crimson); box-shadow:none; } .skild-btn--on-dark:hover{ background:var(--wp--preset--color--white); color:var(--wp--custom--ramp--c-700); box-shadow:none; } .skild-btn--on-dark:focus-visible{ box-shadow:var(--wp--custom--focus--ring-on-dark); } /* adjacent targets keep ≥8px between them — PART M.1 */ .skild-btns{ display:flex; flex-wrap:wrap; gap:var(--wp--custom--target--gap); } /* -------------------------------------------------------------------------- 5.2 · EYEBROW 600 caps, letter-spacing .20em, crimson. Sits DIRECTLY above a heading with no rule between. On a dark ground it goes AMBER — except on CRIMSON, where ground rule 1 makes it WHITE (7.48). c-300 is 3.53 there and fails. Print and web carry the SAME tracking or it reads as two components. -------------------------------------------------------------------------- */ .skild-eyebrow{ display:block; margin:0 0 12px; font-family:var(--wp--preset--font-family--sans); font-weight:var(--wp--custom--weight--label); /* was 700 → 600 */ font-size:.74rem; text-transform:uppercase; letter-spacing:var(--wp--custom--tracking--eyebrow); color:var(--wp--preset--color--crimson); } /* ink · navy · navy-2 · c-900 → amber. PART D.3 and 5.2. */ .skild-on-ink .skild-eyebrow, .skild-on-navy .skild-eyebrow, .skild-panel .skild-eyebrow{ color:var(--wp--preset--color--amber); } /* GROUND RULE 1 — on crimson, label text is WHITE. Not c-300, not amber-by-default. */ .skild-on-crimson .skild-eyebrow{ color:var(--wp--preset--color--white); } /* -------------------------------------------------------------------------- 5.3 · CARD FILL #FBE9EB (c-100). Radius r-xl 20px. Padding 26px, 28 at the foot. NO border. NO shadow. NO edge stripe. The fill IS the component — it is how a page of cards contributes crimson area without a filled block. SECONDARY TEXT INSIDE A CARD IS body-2 #4B4E57 (7.11), never muted (4.41 fails). -------------------------------------------------------------------------- */ .skild-card{ background:var(--wp--preset--color--crimson-tint); border-radius:var(--wp--custom--radius--xl); padding:26px 26px 28px; border:0; box-shadow:none; } .skild-card > :last-child{ margin-bottom:0; } .skild-card p{ color:var(--wp--preset--color--body-2); } /* NEVER muted here */ /* UNDER-SPECIFIED. PART G names a "--field modifier for c-100 on a c-50 section" and never says what it changes. Implemented as identical to the base card so nothing is invented. If a c-100 card on a c-50 ground needs separation, that is an owner ruling — the card spec forbids a border, and c-200 is the system's hairline, so the two rules would have to be reconciled rather than guessed at. */ .skild-card--field{ background:var(--wp--preset--color--crimson-tint); } /* -------------------------------------------------------------------------- 5.4 · PANEL NAVY. Holds a block INSIDE a page — a definition, a warning, an aside, a specification. Text #D6E2EA, labels amber. NEVER spans the page as a ground. CRIMSON NEVER APPEARS INSIDE A NAVY PANEL (1.87:1). navy-2 is the raised step INSIDE it — planes separate by VALUE STEP, because the shadow ladder is crimson-tinted and vanishes on dark. -------------------------------------------------------------------------- */ .skild-panel{ background:var(--wp--preset--color--navy); color:var(--wp--custom--ramp--panel-text); border-radius:var(--wp--custom--radius--xl); padding:30px; } .skild-panel :where(h1,h2,h3,h4,h5,h6,p,li){ color:var(--wp--custom--ramp--panel-text); } .skild-panel a{ color:var(--wp--preset--color--amber); } .skild-panel__raised{ /* the value step, never a shadow */ background:var(--wp--custom--ramp--navy-2); border-radius:var(--wp--custom--radius--md); padding:18px 20px; margin-top:18px; } .skild-panel hr,.skild-panel .skild-rule{ border:0; height:1px; background:var(--wp--custom--line--on-dark); } /* never a black hairline on dark */ /* -------------------------------------------------------------------------- 5.5 · STAT BAND CRIMSON — a claim about the business, in its colour. Numerals 700, tabular, white. Labels WHITE caps .71rem (7.48:1). ON LIGHT: numerals c-500, labels muted. Both variants are in the spec. -------------------------------------------------------------------------- */ .skild-stats{ background:var(--wp--preset--color--crimson); color:var(--wp--preset--color--white); padding:var(--wp--preset--spacing--y-tight) 0; } .skild-stats__row{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--wp--preset--spacing--gap); } .skild-stat__n{ display:block; font-family:var(--wp--preset--font-family--sans); font-weight:var(--wp--custom--weight--display); /* was 800 → 700 */ font-size:var(--wp--preset--font-size--h-2); letter-spacing:var(--wp--custom--tracking--heading); line-height:var(--wp--custom--leading--disp); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } .skild-stat__l{ display:block; margin-top:7px; font-size:.71rem; text-transform:uppercase; letter-spacing:var(--wp--custom--tracking--tablehead); font-weight:var(--wp--custom--weight--label); } /* the light variant, spec'd in 5.5 */ .skild-stats--light{ background:transparent; color:var(--wp--preset--color--body); } .skild-stats--light .skild-stat__n{ color:var(--wp--preset--color--crimson); } .skild-stats--light .skild-stat__l{ color:var(--wp--preset--color--muted); } @media(max-width:767px){ .skild-stats__row{ grid-template-columns:repeat(2,1fr); } } /* -------------------------------------------------------------------------- 5.6 · SECTION LABEL A crimson stub — 5px left border, 16px padding. NOT a full-width rule. No rounded corners: a single-sided border with a radius reads as a mistake. -------------------------------------------------------------------------- */ .skild-seclabel{ border-left:5px solid var(--wp--preset--color--crimson); padding-left:16px; border-radius:0; } /* -------------------------------------------------------------------------- 5.7 · TABLE Header row bg navy, text #FFF, 500 .73rem caps ls .12em. Body rows hairline --line. ZEBRA ON --light (NOT c-50). Tabular numerals. This is navy's correct use: inside a page, not the ground of one. -------------------------------------------------------------------------- */ .skild-table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } .skild-table th{ background:var(--wp--preset--color--navy); color:var(--wp--preset--color--white); font-family:var(--wp--preset--font-family--sans); font-weight:var(--wp--custom--weight--tablehead); /* was 600 → 500 */ font-size:.73rem; text-transform:uppercase; letter-spacing:var(--wp--custom--tracking--tablehead); text-align:left; padding:11px 14px; } .skild-table td{ padding:11px 14px; border-bottom:1px solid var(--wp--custom--line--base); } .skild-table tbody tr:nth-child(even) td{ background:var(--wp--preset--color--light); } /* --light, never c-50 */ /* -------------------------------------------------------------------------- 5.9 · SPLIT PAGE Navy takes EXACTLY ONE column, full bleed. ~.42fr / 1fr. Eyebrow amber. -------------------------------------------------------------------------- */ .skild-split{ display:grid; grid-template-columns:.42fr 1fr; align-items:stretch; } .skild-split__side{ background:var(--wp--preset--color--navy); color:var(--wp--custom--ramp--panel-text); padding:var(--wp--preset--spacing--y-tight) var(--wp--preset--spacing--gutter); } .skild-split__side :where(h1,h2,h3,h4,p){ color:var(--wp--custom--ramp--panel-text); } .skild-split__main{ padding:var(--wp--preset--spacing--y-tight) var(--wp--preset--spacing--gutter); } @media(max-width:767px){ .skild-split{ grid-template-columns:1fr; } } /* -------------------------------------------------------------------------- 5.11 · PULL QUOTE Ground #FDF5F6 (c-50) with a CRIMSON left stub 5px. 1.14rem, NOT italic. Attribution at caption size, muted. The stub is CRIMSON, not amber — an amber rule against crimson labels above it reads as a competing system. A FULL-BLEED INVERTED QUOTE IS NOT THIS COMPONENT: that is a P3 band. -------------------------------------------------------------------------- */ .skild-quote{ background:var(--wp--preset--color--crimson-wash); border-left:5px solid var(--wp--preset--color--crimson); border-radius:0; padding:26px 30px; margin:0; } .skild-quote > p,.skild-quote q{ display:block; font-family:var(--wp--preset--font-family--sans); font-weight:var(--wp--custom--weight--tablehead); /* was 600 → 500 */ font-size:1.14rem; font-style:normal; line-height:1.45; color:var(--wp--preset--color--ink); quotes:none; } .skild-quote cite{ display:block; margin-top:12px; font-style:normal; font-size:var(--wp--preset--font-size--caption); color:var(--wp--preset--color--muted); } /* -------------------------------------------------------------------------- 5.12 · FOOTER CRIMSON. White running text and white column headings (7.48:1). Rule above the baseline row at 28% white. -------------------------------------------------------------------------- */ .skild-footer{ background:var(--wp--preset--color--crimson); color:var(--wp--preset--color--white); padding:var(--wp--preset--spacing--y) 0 var(--wp--preset--spacing--y-tight); } .skild-footer :where(h1,h2,h3,h4,p,li,small){ color:var(--wp--preset--color--white); } .skild-footer h4{ font-size:.74rem; text-transform:uppercase; letter-spacing:var(--wp--custom--tracking--footerbar); font-weight:var(--wp--custom--weight--label); margin-bottom:13px; } .skild-footer a{ color:var(--wp--preset--color--white); text-decoration:none; display:block; padding:6px 0; } .skild-footer a:hover{ text-decoration:underline; } .skild-footer a:focus-visible{ outline:none; box-shadow:var(--wp--custom--focus--ring-on-dark); border-radius:var(--wp--custom--radius--sm); } .skild-footer__rule{ height:1px; border:0; background:var(--wp--custom--line--footer-rule); /* 28% white */ margin:var(--wp--preset--spacing--stack) 0 16px; } /* -------------------------------------------------------------------------- W1 · IMAGE PLACEHOLDER bg --light · 1.5px dashed c-300 border · centred label in crimson caps. IT IS DELIBERATELY UGLY. A placeholder that looks finished ships as one. -------------------------------------------------------------------------- */ .skild-photo{ background:var(--wp--preset--color--light); border:1.5px dashed var(--wp--custom--ramp--c-300); border-radius:var(--wp--custom--radius--lg); display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; min-height:120px; font-family:var(--wp--preset--font-family--sans); font-size:.68rem; font-weight:var(--wp--custom--weight--label); text-transform:uppercase; letter-spacing:.1em; color:var(--wp--preset--color--crimson); } .skild-photo--square{ aspect-ratio:1; min-height:0; } /* -------------------------------------------------------------------------- W2 · STEP MARKER 38px amber disc, ink #292929 numeral (8.94:1), 700. Amber is the single form — never c-300. -------------------------------------------------------------------------- */ .skild-step{ width:38px; height:38px; flex:0 0 38px; border-radius:var(--wp--custom--radius--pill); background:var(--wp--preset--color--amber); color:var(--wp--preset--color--ink); /* never white on amber */ font-family:var(--wp--preset--font-family--sans); font-weight:var(--wp--custom--weight--display); /* was 800 → 700 */ display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; } /* -------------------------------------------------------------------------- W3 · INSTRUCTOR CARD photo 1:1 radius r-xl · name h4 · role 13px muted {{FACULTY_N_EMPLOYER}} — THE CURRENT EMPLOYER LINE IS MANDATORY IN EVERY INSTANCE. Never dropped. Consent-blocked. -------------------------------------------------------------------------- */ .skild-instructor{ background:var(--wp--preset--color--white); border-radius:var(--wp--custom--radius--xl); box-shadow:var(--wp--preset--shadow--one); padding:18px 18px 20px; } .skild-instructor .skild-photo{ border-radius:var(--wp--custom--radius--xl); aspect-ratio:1; min-height:0; margin-bottom:14px; } .skild-instructor__name{ font-family:var(--wp--preset--font-family--sans); font-weight:var(--wp--custom--weight--heading); font-size:var(--wp--preset--font-size--h-4); letter-spacing:var(--wp--custom--tracking--card); line-height:1.2; color:var(--wp--preset--color--ink); } /* MANDATORY. If this line is empty the card is not shippable. */ .skild-instructor__employer{ font-size:.86rem; margin-top:5px; font-weight:var(--wp--custom--weight--tablehead); color:var(--wp--preset--color--body-2); } .skild-instructor__role{ font-size:var(--wp--preset--font-size--caption); margin-top:6px; color:var(--wp--preset--color--muted); } .skild-instructor__verify{ display:inline-block; margin-top:11px; font-size:.82rem; font-weight:var(--wp--custom--weight--label); color:var(--wp--preset--color--crimson); text-decoration:underline; } /* -------------------------------------------------------------------------- W4 · BADGE pill, 12px/600 caps. FOUR variants and no others: amber on ink · crimson on white · white on crimson · g-700 GREEN on g-100 The green variant is g-700 #16713D, NOT g-500 — g-500 on g-100 is 3.05 and fails. Green is a CONFIRMATION STATE and counts as neutral in the mix. Never colour alone: the green badge carries a tick — PART M.1. -------------------------------------------------------------------------- */ .skild-badge{ display:inline-flex; align-items:center; gap:6px; border-radius:var(--wp--custom--radius--pill); padding:5px 13px; font-family:var(--wp--preset--font-family--sans); font-size:12px; font-weight:var(--wp--custom--weight--label); text-transform:uppercase; letter-spacing:.08em; line-height:1.4; } .skild-badge--amber{ background:var(--wp--preset--color--ink); color:var(--wp--preset--color--amber); } .skild-badge--crimson{ background:var(--wp--preset--color--white); color:var(--wp--preset--color--crimson); box-shadow:0 0 0 1px var(--wp--custom--line--base); } .skild-badge--reversed{ background:var(--wp--preset--color--crimson); color:var(--wp--preset--color--white); } .skild-badge--success{ background:var(--wp--custom--ramp--g-100); color:var(--wp--preset--color--success-text); } /* g-700, never g-500 */ /* -------------------------------------------------------------------------- SHARED — layout helpers the components assume, not components themselves -------------------------------------------------------------------------- */ .skild-grid{ display:grid; gap:var(--wp--preset--spacing--gap); } .skild-grid--2{ grid-template-columns:repeat(2,1fr); } .skild-grid--3{ grid-template-columns:repeat(3,1fr); } .skild-grid--4{ grid-template-columns:repeat(4,1fr); } .skild-grid--5{ grid-template-columns:repeat(5,1fr); } @media(max-width:1023px){ .skild-grid--4,.skild-grid--5{ grid-template-columns:repeat(3,1fr); } } @media(max-width:767px){ .skild-grid--2,.skild-grid--3,.skild-grid--4{ grid-template-columns:1fr; } .skild-grid--5{ grid-template-columns:repeat(2,1fr); } } /* A dark ground inverts the focus ring — the crimson ring vanishes on crimson. PART M.1. Applies to any interactive thing inside one. */ :where(.skild-on-crimson,.skild-on-navy,.skild-on-ink,.skild-panel,.skild-footer) :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:none; box-shadow:var(--wp--custom--focus--ring-on-dark); } /* NO prefers-color-scheme BLOCK IN THIS FILE, BY DESIGN. PART D.11: web dark mode does not exist and is not in scope. Dark SURFACES inside a light document are not a theme. The only file in the system licensed to carry one is icons/icon.svg, consumed by browser chrome. */