/* ========================================================================== SkilD · PATTERN-SPECIFIC CSS Everything the fourteen shipped components (components.css) do not cover. Page/section-specific, namespaced per PART M, tokens read from theme.json only — nothing hard-coded that has a token. No new global component is declared here; the component-gap re-derivation (D-30) already closed at ZERO new components. These are page furniture, not reusable components. Built 14 August 2026, session S11, Phase 2. ========================================================================== */ /* -------------------------------------------------------------------------- HERO — crimson page ground, ONE elliptical bottom-right corner (34 x 29). Homepage and programme page both use it; scoped so it never leaks outside. -------------------------------------------------------------------------- */ .skild-hero{ background:var(--wp--preset--color--crimson); color:var(--wp--preset--color--white); padding:var(--wp--preset--spacing--y-lg) 0 var(--wp--preset--spacing--y); border-bottom-right-radius:var(--wp--custom--mast--rx) var(--wp--custom--mast--ry); } .skild-hero :where(h1,h2,h3,p){ color:var(--wp--preset--color--white); } .skild-hero .skild-eyebrow{ color:var(--wp--preset--color--white); } .skild-hero__rule{ height:4px; width:92px; background:var(--wp--preset--color--amber); margin-bottom:22px; border:0; } .skild-hero__lead{ font-size:var(--wp--preset--font-size--lead); line-height:var(--wp--custom--leading--lead); max-width:var(--wp--custom--measure--lead); margin-top:20px; } .skild-hero__under{ margin-top:22px; font-size:.95rem; opacity:.92; max-width:56ch; } .skild-hero h1{ line-height:1.12; } .skild-hero__h1--home{ max-width:19ch; } .skild-hero__h1--prog{ max-width:22ch; } /* -------------------------------------------------------------------------- EXPERT / INSTRUCTOR GRID — layout only. Card itself is .skild-instructor (W3, components.css). A-29: homepage EXPERT band, 5 across, min 5 people. -------------------------------------------------------------------------- */ .skild-experts-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--wp--preset--spacing--gap); } @media(max-width:1023px){ .skild-experts-grid{ grid-template-columns:repeat(3,1fr); } } @media(max-width:767px){ .skild-experts-grid{ grid-template-columns:repeat(2,1fr); } } /* the "teaches: X, Y" line, mandatory on the EXPERT variant only */ .skild-instructor__teaches{ font-size:.8rem; margin-top:7px; color:var(--wp--preset--color--muted); } /* -------------------------------------------------------------------------- PROGRAMME CARD — catalogue / homepage grid. NOT the same shape as .skild-card: a programme card carries a tag, a meta row and a "go" link the card fill alone does not provide. -------------------------------------------------------------------------- */ .skild-prog{ border-radius:var(--wp--custom--radius--xl); box-shadow:var(--wp--preset--shadow--one); padding:26px; background:var(--wp--preset--color--white); display:flex; flex-direction:column; } .skild-prog__tag{ display:inline-block; align-self:flex-start; background:var(--wp--preset--color--crimson-tint); color:var(--wp--custom--ramp--c-700); border-radius:var(--wp--custom--radius--pill); padding:5px 12px; font-size:.7rem; font-weight:var(--wp--custom--weight--label); text-transform:uppercase; letter-spacing:.09em; margin-bottom:14px; } .skild-prog__meta{ margin-top:18px; padding-top:14px; border-top:1px solid var(--wp--custom--line--soft); font-size:.84rem; color:var(--wp--preset--color--muted); display:flex; gap:16px; flex-wrap:wrap; } .skild-prog a.skild-prog__go{ margin-top:16px; font-weight:var(--wp--custom--weight--label); color:var(--wp--preset--color--crimson); text-decoration:none; align-self:flex-start; } .skild-prog a.skild-prog__go:hover{ text-decoration:underline; } .skild-progs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--wp--preset--spacing--gap); } @media(max-width:1023px){ .skild-progs-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:767px){ .skild-progs-grid{ grid-template-columns:1fr; } } /* -------------------------------------------------------------------------- CHALLENGE / PRICE BLOCK — ₹0 display, no struck-through fiction. -------------------------------------------------------------------------- */ .skild-chal{ background:var(--wp--preset--color--crimson-wash); border-radius:var(--wp--custom--radius--xxl); padding:40px; display:grid; grid-template-columns:1.2fr 1fr; gap:var(--wp--preset--spacing--gap); align-items:center; } .skild-chal__price{ font-size:var(--wp--preset--font-size--disp); font-weight:var(--wp--custom--weight--display); letter-spacing:var(--wp--custom--tracking--disp); color:var(--wp--preset--color--crimson); line-height:1; font-variant-numeric:tabular-nums; } .skild-chal__note{ font-size:.82rem; color:var(--wp--preset--color--muted); margin-top:10px; font-weight:500; } @media(max-width:767px){ .skild-chal{ grid-template-columns:1fr; padding:28px; } } /* -------------------------------------------------------------------------- NEGATIVE PROMISES — plain list, deliberately unadorned. A dash, not a tick. -------------------------------------------------------------------------- */ .skild-nots{ list-style:none; margin-top:0; display:grid; gap:14px; max-width:78ch; padding:0; } .skild-nots li{ padding-left:34px; position:relative; font-size:1.04rem; } .skild-nots li::before{ content:""; position:absolute; left:0; top:.62em; width:18px; height:2px; background:var(--wp--preset--color--crimson); } /* -------------------------------------------------------------------------- COMMITMENT CARD CONSEQUENCE LINE — the small rule inside a .skild-card that states what happens if the commitment is missed. -------------------------------------------------------------------------- */ .skild-card__conseq{ display:block; margin-top:14px; padding-top:13px; border-top:1px solid var(--wp--custom--ramp--c-200); font-size:.88rem; font-weight:var(--wp--custom--weight--label); color:var(--wp--custom--ramp--c-700); } /* -------------------------------------------------------------------------- STICKY MOBILE CONVERSION BAR — 4 of 7 measured carry persistent furniture. Desktop: nothing (a side rail is a later, separate decision). Mobile: a slim bottom bar, never removed at narrow widths (Intellipaat's mistake). -------------------------------------------------------------------------- */ .skild-mobilebar{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:none !important; background:var(--wp--preset--color--white); border-top:1px solid var(--wp--custom--line--base); padding:10px var(--wp--preset--spacing--gutter); box-shadow:var(--wp--preset--shadow--two-up); align-items:center; gap:12px; justify-content:space-between; } .skild-mobilebar__t{ font-size:.82rem; font-weight:var(--wp--custom--weight--label); color:var(--wp--preset--color--ink); line-height:1.25; } .skild-mobilebar__t span{ display:block; font-weight:400; color:var(--wp--preset--color--muted); font-size:.76rem; } .skild-mobilebar .skild-btn{ padding:11px 20px; font-size:.9rem; box-shadow:none; } /* Gutenberg's own "body .is-layout-flex{display:flex}" global style (specificity 0,1,1) otherwise beats the plain .skild-mobilebar selector (0,1,0) and forces this bar to show at every width — confirmed live on staging, S11 Phase 2 follow-up. !important is deliberate here, not sprayed. */ @media(max-width:767px){ .skild-mobilebar{ display:flex !important; } body.skild-has-mobilebar{ padding-bottom:96px; } } /* -------------------------------------------------------------------------- FEE BLOCK — programme page §3.2 position 11. Hard price, EMI included, refund window stated in the same block. Table variant uses .skild-table. -------------------------------------------------------------------------- */ .skild-fee{ background:var(--wp--preset--color--crimson-wash); border-radius:var(--wp--custom--radius--xl); padding:32px; } .skild-fee__price{ font-size:var(--wp--preset--font-size--h-1); font-weight:var(--wp--custom--weight--display); color:var(--wp--preset--color--crimson); letter-spacing:var(--wp--custom--tracking--disp); font-variant-numeric:tabular-nums; line-height:1; } .skild-fee__mrp{ font-size:1rem; color:var(--wp--preset--color--muted); text-decoration:line-through; margin-top:6px; } .skild-fee__emi{ font-size:.92rem; color:var(--wp--preset--color--body-2); margin-top:10px; } /* -------------------------------------------------------------------------- CTA BAND — full-bleed crimson closing band, home + programme variants. Root elements carry only JSON-backed inline style; max-width/text-align have no block-style-JSON key, so they live here instead (fix for the "Block contains unexpected or invalid content" validation error, S11). -------------------------------------------------------------------------- */ .skild-cta-band{ text-align:center; } .skild-cta-band__h{ max-width:22ch; } .skild-cta-band__h--home{ max-width:20ch; } .skild-cta-band__p{ max-width:56ch; } /* -------------------------------------------------------------------------- PROGRAMME COMMITMENT CARD — the four cards inside prog-commitments.php. Was inline style.border.radius + style.color.background with no matching block support guaranteed; moved to a plain class for the same reason as CTA BAND above. -------------------------------------------------------------------------- */ .skild-prog-commit-card{ border-radius:var(--wp--custom--radius--xl); background-color:rgba(255,255,255,.08); padding:22px; } /* -------------------------------------------------------------------------- BUILD-NOTE CALLOUT — never page copy, always an editorial note left in a pattern so the next person to touch it knows the constraint it is under. Amber left rule on light ground, matches the W2/step-marker amber family. -------------------------------------------------------------------------- */ .skild-prov{ border-radius:0 var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0; max-width:82ch; margin-top:var(--wp--preset--spacing--gap); padding:20px 24px; font-size:.93rem; border-left:5px solid var(--wp--preset--color--amber); } .skild-prov,.skild-prov p{ color:var(--wp--preset--color--body-2); } /* -------------------------------------------------------------------------- SPLIT-STAT sticky sub-nav anchor row (programme page). Simple, so it stays here rather than earning a full component entry. -------------------------------------------------------------------------- */ .skild-subnav{ position:sticky; top:0; z-index:50; background:var(--wp--preset--color--white); display:flex; gap:24px; flex-wrap:wrap; border-bottom:1px solid var(--wp--custom--line--base); overflow-x:auto; } .skild-subnav a{ padding:14px 0; font-size:.92rem; font-weight:var(--wp--custom--weight--tablehead); color:var(--wp--preset--color--body-2); text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; } .skild-subnav a:hover{ color:var(--wp--preset--color--crimson); border-bottom-color:var(--wp--preset--color--crimson); } /* -------------------------------------------------------------------------- PROOF STRIP — programme page, position 2. Three figures, crimson-wash ground. -------------------------------------------------------------------------- */ .skild-proofstrip{ background:var(--wp--preset--color--crimson-wash); } .skild-proofstrip .skild-grid > *{ text-align:left; } .skild-proofitem__n{ display:block; font-size:1.6rem; font-weight:var(--wp--custom--weight--display); color:var(--wp--preset--color--crimson); font-variant-numeric:tabular-nums; } .skild-proofitem__l{ display:block; font-size:.86rem; color:var(--wp--preset--color--body-2); margin-top:6px; } /* -------------------------------------------------------------------------- FIT CARDS — "who this is for" / "who this is not for". Two-up, one on crimson-tint (yes) and one on light (no). Marker is a plain glyph, never a green tick alone (PART M.1 colour-alone rule already satisfied — this is text, not a status indicator). -------------------------------------------------------------------------- */ .skild-fit{ border-radius:var(--wp--custom--radius--xl); padding:26px; } .skild-fit--yes{ background:var(--wp--preset--color--crimson-tint); } .skild-fit--no{ background:var(--wp--preset--color--light); } .skild-fit ul{ list-style:none; display:grid; gap:10px; padding:0; margin-top:10px; } .skild-fit li{ padding-left:22px; position:relative; font-size:.97rem; color:var(--wp--preset--color--body-2); } .skild-fit--yes li::before{ content:"+"; position:absolute; left:0; top:0; color:var(--wp--preset--color--crimson); font-weight:700; } .skild-fit--no li::before{ content:"\2013"; position:absolute; left:0; top:0; color:var(--wp--preset--color--muted); font-weight:700; } /* -------------------------------------------------------------------------- CURRICULUM MODULE — wraps core/details. Summary row carries the module name and two meta badges (live/recorded, duration); the named instructor line is MANDATORY inside every module, never dropped. -------------------------------------------------------------------------- */ .skild-mod{ border:1px solid var(--wp--custom--line--base); border-radius:var(--wp--custom--radius--lg); margin-top:12px; padding:16px 22px; } .skild-mod summary{ cursor:pointer; font-weight:var(--wp--custom--weight--heading); list-style:none; } .skild-mod summary::-webkit-details-marker{ display:none; } .skild-mod__meta{ display:inline-flex; gap:10px; margin-left:12px; vertical-align:middle; } .skild-mod__instr{ margin-top:14px; font-size:.9rem; color:var(--wp--preset--color--ink); font-weight:var(--wp--custom--weight--heading); } .skild-mod__instr span{ font-weight:400; color:var(--wp--preset--color--body-2); } /* -------------------------------------------------------------------------- COMPARE TABLE column — reuses .skild-table; this only marks SkilD's own column so it never reads as a tie with the "most programmes" column. -------------------------------------------------------------------------- */ .skild-table td.skild-us{ color:var(--wp--custom--ramp--c-700); font-weight:var(--wp--custom--weight--tablehead); } /* -------------------------------------------------------------------------- TESTIMONIAL WRAP — token-held quote, CCPA consent line mandatory beside it in the build note, never on the published card itself. -------------------------------------------------------------------------- */ .skild-testimonial{ background:var(--wp--preset--color--crimson-wash); border-radius:var(--wp--custom--radius--xxl); padding:36px; } .skild-testimonial p{ font-size:1.1rem; color:var(--wp--preset--color--ink); } .skild-testimonial cite{ display:block; margin-top:14px; font-style:normal; font-size:.86rem; color:var(--wp--preset--color--muted); } .skild-testimonial__byline{ margin-top:14px; font-style:normal; font-size:.86rem; color:var(--wp--preset--color--muted); } /* -------------------------------------------------------------------------- FLUENT FORMS — plugin-integration CSS, NOT one of the fourteen numbered components in SKILD-DESIGN-CONTEXT.md PART G. No form component exists in the spec, so nothing new is invented here: every value below is an EXISTING token, reused. If a form component is ever formally specified, this section should be reconciled against it, not treated as the spec. Before this: Fluent Forms shipped its own defaults untouched — Raleway font, #1A7EFB blue submit button, 7px radius. Confirmed live on staging, S11 Phase 2 follow-up (owner-authorised fix, "Go", 16 Aug 2026). -------------------------------------------------------------------------- */ .fluentform{ font-family:var(--wp--preset--font-family--sans); } .fluentform .ff-el-input--label label{ font-family:var(--wp--preset--font-family--sans); font-weight:var(--wp--custom--weight--tablehead); /* 500 — matches table head, not a heading */ font-size:.92rem; color:var(--wp--preset--color--ink); } .fluentform .ff-el-is-required label{ color:var(--wp--preset--color--ink); } .fluentform .ff-el-is-required label::after{ content:" *"; color:var(--wp--preset--color--crimson); } /* Elementor's own global kit CSS (".elementor-kit-N input:not([type=button]): not([type=submit]), textarea, .elementor-field-textual") still loads site-wide while Elementor is active, and its selector specificity (0,3,1) beats a plain ".fluentform .ff-el-form-control" (0,2,0) — confirmed live, same mechanism as the mobile-bar fix above. !important on the contested properties only (border, radius, font, colour); layout/spacing properties Elementor's kit doesn't touch are left without it. */ .fluentform .ff-el-form-control{ width:100%; min-height:var(--wp--custom--target--min); font-family:var(--wp--preset--font-family--sans) !important; font-size:var(--wp--preset--font-size--body); color:var(--wp--preset--color--ink) !important; background:var(--wp--preset--color--white) !important; border:1px solid var(--wp--custom--ramp--c-300) !important; border-radius:var(--wp--custom--radius--md) !important; padding:11px 14px; transition:border-color var(--wp--custom--duration--base) var(--wp--custom--ease--out), box-shadow var(--wp--custom--duration--base) var(--wp--custom--ease--out); } .fluentform .ff-el-form-control::placeholder{ color:var(--wp--preset--color--muted); } .fluentform .ff-el-form-control:focus{ outline:none; border-color:var(--wp--preset--color--crimson) !important; box-shadow:var(--wp--custom--focus--ring); } .fluentform textarea.ff-el-form-control{ min-height:120px; } /* submit button — same treatment as .skild-btn (5.1), duplicated because Fluent Forms renders its own