Create ResearchItem/styles.css: Al Hoceima

To protect the wiki against automated page creation, we kindly ask you to solve the following CAPTCHA:

/* Form:ResearchItem/styles.css

  Landrace.wiki — Research item entry form
  Deploy to: https://landrace.wiki/wiki/Form:ResearchItem/styles.css

• /

/* ===== Container ===== */ .lw-form {

 max-width: 740px;
 margin: 0 auto 24px;

}

/* ===== Top badge ===== */ .lw-form-badge {

 display: flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 20px;

} .lw-form-badge-bar {

 width: 5px;
 height: 22px;
 background: #2d6a4f;
 border-radius: 3px;
 flex-shrink: 0;

} .lw-form-badge-text {

 font-size: 13px;
 font-weight: 600;
 color: #2d6a4f;
 text-transform: uppercase;
 letter-spacing: 0.04em;

}

/* ===== Section card ===== */ .lw-section {

 background: #fff;
 border: 1px solid #e5e7eb;
 border-radius: 12px;
 overflow: hidden;
 margin-bottom: 16px;

}

/* Required section header (brand green) */ .lw-section-header {

 display: flex;
 align-items: center;
 gap: 8px;
 padding: 11px 20px;
 background: #2d6a4f;
 color: #fff;
 font-size: 14px;
 font-weight: 600;
 line-height: 1;

}

/* Optional section header (muted) */ .lw-section-header--optional {

 background: #f9fafb;
 border-bottom: 1px solid #e5e7eb;
 color: #6b7280;

} .lw-section-header--optional .lw-section-badge {

 margin-left: auto;
 font-size: 12px;
 font-weight: 400;
 color: #9ca3af;

}

/* Section body */ .lw-section-body {

 padding: 20px;

}

/* ===== Field rows ===== */ .lw-field {

 margin-bottom: 18px;

} .lw-field:last-child {

 margin-bottom: 0;

}

/* Labels */ .lw-label {

 display: block;
 font-size: 13px;
 font-weight: 600;
 color: #4b5563;
 margin-bottom: 6px;
 line-height: 1.2;

} .lw-label .lw-req {

 color: #c92a2a;
 margin-left: 2px;

}

/* ===== Grid rows ===== */ .lw-row {

 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 16px;
 margin-bottom: 18px;

} .lw-row:last-child {

 margin-bottom: 0;

} .lw-row .lw-field {

 margin-bottom: 0;

} .lw-row--3col {

 grid-template-columns: 1fr 1fr 1fr;

}

/* ===== Inputs ===== */ /* Target all PF-generated inputs broadly */ .lw-form input[type="text"], .lw-form input[type="number"], .lw-form input[type="url"], .lw-form input[type="date"], .lw-form select, .lw-form textarea {

 width: 100% !important;
 max-width: 100% !important;
 box-sizing: border-box !important;
 background: #fff;
 border: 1px solid #d1d5db;
 border-radius: 8px;
 padding: 9px 12px;
 font-size: 14px;
 line-height: 1.4;
 color: #1f2937;
 transition: border-color 0.15s ease;

} .lw-form input:focus, .lw-form select:focus, .lw-form textarea:focus {

 outline: none;
 border-color: #2d6a4f;
 box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1);

} .lw-form textarea {

 resize: vertical;
 min-height: 48px;
 font-family: inherit;

}

/* PF datepicker */ .lw-form .ui-datepicker-input, .lw-form input.hasDatepicker {

 width: 220px !important;
 max-width: 100%;

}

/* PF wraps inputs in spans — force them block */ .lw-field > span, .lw-field > .inputSpan, .lw-field > .pfUIInput {

 display: block;
 width: 100%;

}

/* PF dropdown wrapper */ .lw-form select {

 appearance: auto;

}

/* PF autocomplete wrappers */ .lw-form .pfAutocompleteInput, .lw-form .pfTokens {

 width: 100%;
 box-sizing: border-box;

}

/* PF mandatory field star — hide it, we have our own */ .lw-field .mandatoryField {

 display: none !important;

}

/* ===== Buttons ===== */ .lw-buttons {

 display: flex;
 gap: 10px;
 align-items: center;
 flex-wrap: wrap;
 padding-top: 8px;

}

/* Save = primary green */ .lw-buttons input[type="submit"], .lw-buttons input.mw-ui-progressive, .lw-buttons input[name="wpSave"] {

 background: #2d6a4f !important;
 color: #fff !important;
 border: none !important;
 border-radius: 8px;
 padding: 10px 22px;
 font-size: 14px;
 font-weight: 600;
 cursor: pointer;

} .lw-buttons input[name="wpSave"]:hover {

 background: #245a42 !important;

}

/* Preview = outlined */ .lw-buttons input[name="wpPreview"] {

 background: transparent !important;
 color: #4b5563 !important;
 border: 1px solid #d1d5db !important;
 border-radius: 8px;
 padding: 10px 20px;
 font-size: 14px;
 font-weight: 600;
 cursor: pointer;

} .lw-buttons input[name="wpPreview"]:hover {

 background: #f3f4f6 !important;

}

/* Cancel = ghost */ .lw-buttons a, .lw-buttons input[name="wpCancel"] {

 background: transparent !important;
 color: #9ca3af !important;
 border: none !important;
 padding: 10px 16px;
 font-size: 14px;
 cursor: pointer;
 text-decoration: none;

}

/* ===== Responsive ===== */ @media (max-width: 600px) {

 .lw-row,
 .lw-row--3col {
   grid-template-columns: 1fr;
 }
 .lw-section-body {
   padding: 16px;
 }
 .lw-form .ui-datepicker-input,
 .lw-form input.hasDatepicker {
   width: 100% !important;
 }

}

/* ===== Citizen dark mode ===== */ .skin-citizen-dark .lw-section {

 background: #1a1a2e;
 border-color: #2a2a3e;

} .skin-citizen-dark .lw-section-header--optional {

 background: #1e1e32;
 border-color: #2a2a3e;
 color: #9ca3af;

} .skin-citizen-dark .lw-label {

 color: #d1d5db;

} .skin-citizen-dark .lw-form input[type="text"], .skin-citizen-dark .lw-form input[type="number"], .skin-citizen-dark .lw-form input[type="url"], .skin-citizen-dark .lw-form input[type="date"], .skin-citizen-dark .lw-form select, .skin-citizen-dark .lw-form textarea {

 background: #16162a;
 border-color: #2a2a3e;
 color: #e5e7eb;

} .skin-citizen-dark .lw-form input:focus, .skin-citizen-dark .lw-form select:focus, .skin-citizen-dark .lw-form textarea:focus {

 border-color: #74c69d;
 box-shadow: 0 0 0 3px rgba(116, 198, 157, 0.12);

}

/* ===== Portal feed cleanup (keep from original) ===== */ .portal-events-feed > p { margin: 0; } .portal-events-feed > p:empty { display: none; } .portal-events-feed > p > .research-item, .portal-events-feed > p > .news-card, .portal-events-feed > p > div { width: 100%; }