Summary We need a frontend developer (CSS/HTML) to implement pixel-accurate, responsive styling for our WordPress plugin “Kapitalisierungsrechner.” The plugin already outputs semantic HTML via a shortcode and is Elementor-compatible. Your job is to deliver a single, conflict-free CSS file that matches our mockups exactly and behaves predictably across Desktop, Tablet, and Mobile breakpoints. Tech Context WordPress 6.x Custom plugin with shortcode [rechner] Styles loaded from assets/rechner.css inside the plugin Elementor pages will embed the shortcode (no Elementor styling required) Optional: add minimal utility classes in markup (e.g., .kr-segment--gender), no PHP logic changes Breakpoints (required) Desktop: > 1024px Tablet: 1024px – 768px Mobile: < 767px You may implement with min-width queries like: /* Mobile-first base styles here */ /* Tablet */ @media (min-width: 768px) and (max-width: 1024px){ /* tablet rules */ } /* Desktop */ @media (min-width: 1025px){ /* desktop rules */ } Visual Targets (must match mockups) Outer Frame (Desktop) Max width: 1440px, min height: 829px Border: 1px solid #E7E6E6, radius 40px, padding 24px, column gap 48px Two Columns (Desktop) Left Form Card: 684 × 781, radius 24px, padding 24px, inner gap 24px Right Stack: 684 × 781 (Result card + CTA card) Form (Left) Gender segmented buttons: two buttons, 312 × 52, padding 16/24, radius 12px, white bg, gray border (#C5C5C5), checked = dark fill (#2E2E2E) with white text. Interest rate segmented buttons: five buttons, 52px height, same visual style, flexible width (wrap as needed), no capsule background behind the group. Inputs (DOB, Annual net): 52px height, radius 12px, border 2px (#DADDE1), focused with subtle orange glow. Primary button “Barwert berechnen”: 636 × 48, radius 12px, #F28800, bold; disabled at 50% opacity. Checkbox block: 636 × 131, custom orange checkbox with white checkmark. Separator: 1px line #C5C5C5. Info box: 636 × 88 body text. Error states: only red border on the affected field/block (no global error box). Result (Right) Result card: 684 × 485, padding 40px, background #E57F00, border #FFC98A, radius 24px. Amount number: Satoshi Variable, 64px, 120% line-height, bold. Inside the result card: white download button (rounded). CTA card: white card with 2px orange outline, rounded; outline button in brand orange. Responsive Behavior Desktop (>1024px): two columns (684/684) with 48px gap; exact fixed sizes above. Tablet (1024–768px): one column layout; maintain generous spacing; components keep visual hierarchy and consistent paddings; segmented controls wrap gracefully. Mobile (<767px): single column; full-width controls; gender buttons stack vertically (each 100% width); same 52px control height and 12px radius; spacing scales down but remains consistent. Accessibility & Quality Visible focus states on all interactive elements Sufficient color contrast Labels correctly associated with inputs/radios/checkboxes No layout shifts (CLS) on hover/checked/error states CSS must be scoped to the plugin container (classes prefixed .kr-), avoiding theme collisions No global resets or opinionated typography outside the container Deliverables One CSS file: assets/rechner.css, commented and organized by sections (frame, grid, form, segments, buttons, result, CTA, utilities). Optional: one small markup class addition (e.g., .kr-segment--gender) documented in a short README; no PHP logic changes. Cross-browser sanity: latest two versions of Chrome, Safari, Firefox, Edge. Acceptance Criteria Pixel-close implementation (≤ 2–3px tolerance) compared to provided Desktop & Mobile mockups Correct behavior across the three breakpoints Error states only affect borders; no additional error containers Clean, maintainable CSS; no specificity wars; minimal !important (only where necessary for error borders) We Provide PNG/SVG/Figma mockups (Desktop + Mobile) Brand colors & typography (Satoshi webfont if needed) Staging page with the [rechner] shortcode Collaboration Quick kickoff to align on edge cases (wrapping, long labels, RTL assumptions = no) 1–2 review iterations Handover via PR or ZIP (CSS + tiny README if you add a class) To Apply 2–3 links to pixel-perfect UI work (forms, segmented controls, cards) Availability & estimated effort (in person-days) Any recommendations to improve maintainability (variables, utility classes, tokens)