/** * jp-162-jobs-stellenangebote.css — * /de/jobs/ "Aktuelle Stellenangebote" widget — accordion-body padding fix * + Figma 331:1709 button restyle for "Jetzt bewerben" / "Mehr Details". * * Scope: `body.page-id-8337` (DE /de/jobs/) + `body.page-id-263057` * (EN /en/careers/, WPML mirror of 8337). Both pages render the * identical careers-listing accordion via the same template, so the * rules apply to either body class. * * Page: https://dev-jtl-trung.betterscale.dev/de/jobs/ * Figma button (Default + Variant2): * https://www.figma.com/design/VSSY3wxlC31HrYDwwmHmrv/JTL-Website-Modules?node-id=331-1709 * * Two fixes: * * 1) Padding alignment. Each open job row's `.accordion-body` ships with * `padding: 0` so the description paragraph + CTA cluster sit at the * page edge (x=60). The row header's title `
` sits at x=84 because of the Bootstrap row * gutter (Bootstrap `.row` uses negative margins + per-column padding * that nets +24px on the title). Result: the expanded body sticks out * 24px to the LEFT of the column it logically lives under. Fix: give * `.accordion-body` the same +24px left padding (matching the gutter) * plus vertical breathing room so the description doesn't butt up * against the row above. * * 2) Button design. The two CTAs in the body — "Jetzt bewerben" * (`.btn.btn-wawi`) and "Mehr Details" * (`.btn.btn-outline-primary`) — render the legacy theme treatment: * `bg #ff9a26` amber + `color #333` + `border-radius: 10px` (only * slightly rounded). Figma 331:1709 specifies a fully-pilled button * (border-radius: 145.323px) with the JTL design tokens applied: * Default = bg #fb581f (JTL Orange) + Dark-Blue uppercase label; * Variant2 = bg #0b1b45 (JTL Dark Blue) + Light-Sand uppercase * label. Mapping: "Jetzt bewerben" is the primary CTA → Default * Orange; "Mehr Details" is the secondary → Variant2 Dark Blue. * * Design tokens (hardcoded — Phase 2.2 SCSS tokens file not yet shipped): * #0b1b45 = JTL Dark Blue (Default button text + Variant2 bg) * #fb581f = JTL Orange (Default button bg) * #eeeee7 = JTL Light Sand (Variant2 text) * * Content untouched per CLAUDE.md rule 4 — button labels stay editor-set. * * `!important` on most rules: the legacy `.btn`, `.btn-wawi`, and * `.btn-outline-primary` rules in custom-clone.css / theme load earlier * and use the same generic classes (CLAUDE.md rule 10). */ /* ── Accordion-body padding ───────────────────────────────────────────── The body contains: paragraph(s) of the job description + button group. 24px left = match the row title's gutter offset (84 - 60 = 24px). 24px right = symmetric, keeps the right-rule consistent with the table. 20px top = breathing room from the row header above. 32px bottom = breathing room before the next row's bottom border. */ body.page-id-8337 .accordion .collapse .accordion-body, body.page-id-263057 .accordion .collapse .accordion-body { padding: 20px 24px 32px 24px; } /* ── Buttons — Figma 331:1709 pill ────────────────────────────────────── Shared visual baseline (both Default + Variant2). */ body.page-id-8337 .accordion .collapse .accordion-body .btn.btn-wawi, body.page-id-8337 .accordion .collapse .accordion-body .btn.btn-outline-primary, body.page-id-263057 .accordion .collapse .accordion-body .btn.btn-wawi, body.page-id-263057 .accordion .collapse .accordion-body .btn.btn-outline-primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 12px 24px !important; border-radius: 145px !important; /* Figma 145.323px */ border: 0 !important; box-shadow: none !important; font-family: Inter, sans-serif !important; font-weight: 600 !important; font-size: 16px !important; line-height: 24px !important; letter-spacing: 0.32px !important; /* Figma letterSpacing: 2 = 2% of 16px */ text-transform: uppercase !important; text-decoration: none !important; } /* "Jetzt bewerben" — Default variant: JTL Orange bg, Dark-Blue label. * `.btn-wawi` paints BOTH `background-color: #f68b25` AND a * `linear-gradient(64deg, #ff9a26, #ffc935)` background-image on top * (amber → gold). Setting `background-color` alone isn't enough because * the gradient `background-image` renders above the color — the legacy * amber gradient kept hiding our orange. Kill both via `background:` * shorthand which resets all bg layers, then re-set the solid colour. */ body.page-id-8337 .accordion .collapse .accordion-body .btn.btn-wawi, body.page-id-263057 .accordion .collapse .accordion-body .btn.btn-wawi { background: #fb581f !important; background-image: none !important; color: #0b1b45 !important; } body.page-id-8337 .accordion .collapse .accordion-body .btn.btn-wawi:hover, body.page-id-8337 .accordion .collapse .accordion-body .btn.btn-wawi:focus, body.page-id-8337 .accordion .collapse .accordion-body .btn.btn-wawi:active, body.page-id-263057 .accordion .collapse .accordion-body .btn.btn-wawi:hover, body.page-id-263057 .accordion .collapse .accordion-body .btn.btn-wawi:focus, body.page-id-263057 .accordion .collapse .accordion-body .btn.btn-wawi:active { background: #e34a18 !important; /* slight orange darken on hover */ background-image: none !important; color: #0b1b45 !important; } /* "Mehr Details" — Variant2: JTL Dark-Blue bg, Light-Sand label. */ body.page-id-8337 .accordion .collapse .accordion-body .btn.btn-outline-primary, body.page-id-263057 .accordion .collapse .accordion-body .btn.btn-outline-primary { background-color: #0b1b45 !important; color: #eeeee7 !important; } body.page-id-8337 .accordion .collapse .accordion-body .btn.btn-outline-primary:hover, body.page-id-8337 .accordion .collapse .accordion-body .btn.btn-outline-primary:focus, body.page-id-8337 .accordion .collapse .accordion-body .btn.btn-outline-primary:active, body.page-id-263057 .accordion .collapse .accordion-body .btn.btn-outline-primary:hover, body.page-id-263057 .accordion .collapse .accordion-body .btn.btn-outline-primary:focus, body.page-id-263057 .accordion .collapse .accordion-body .btn.btn-outline-primary:active { background-color: #1d2f5a !important; /* slight Dark-Blue lift on hover */ color: #eeeee7 !important; } /* Button-group horizontal gap (replace the legacy margin-right on the * first button with a flex-gap-friendly margin). The container is a * `.button-group` or just sibling buttons; ensure they don't touch. */ body.page-id-8337 .accordion .collapse .accordion-body .btn + .btn, body.page-id-263057 .accordion .collapse .accordion-body .btn + .btn { margin-left: 12px !important; }