/* ES Content Intake — form styling * * Reuses the theme's own design tokens (cn-ebnerstolz-2023/assets/less-src/010-vars.less) * instead of hard-coded values, so the form matches the site's look & feel: * --font-p / --color-p / --font-size-body : body typography (inherited from , not re-set here) * --color-h : heading color (applied globally by the theme to h1-h6) * --background-button / --background-button-alt : primary/secondary action colors * --grid-column-gap / --space-outer : the site's spacing scale * * Grid: on single-news articles the theme narrows `.entry-content` to grid-column * 4/12 (an 8-of-12 centered reading column) at >=1150px — see .entry-content in * 050-1024.less. Our shortcode renders as a direct child of that same * `.entry-content` grid, so `.eci-wrapper` positions itself within it too * (columns 2/10, chosen to look right for this form specifically), without * needing a dedicated page template. */ .eci-wrapper { width: 100%; } /* Theme sets a top margin on .entry-content by default; not wanted on this intake page, so cleared here (only applies where this stylesheet loads). */ .entry-content { margin-top: 0; } @media (min-width: 1150px) { .eci-wrapper { grid-column: 2 / 10; } } .eci-locked { max-width: 460px; margin: 24px 0; } .eci-login-hint { margin: 0 0 20px; } .eci-login-hint a { color: var(--background-button, #049ddf); } /* Matches the site's own Client Area login box (cn.ebnerstolz.com/client-area/): light grey panel, borderless white inputs, green pill submit button. */ .eci-login-box { background: var(--background-footer, #f0f0f0); border-radius: 6px; padding: 28px; } .eci-login-form { display: flex; flex-direction: column; gap: 14px; } .eci-login-form label { font-weight: var(--font-weight-bold, 600); } .eci-login-form input { padding: 13px; border-radius: 6px; border: none; font: inherit; background: var(--color-white, #fff); } .eci-login-error { color: #b3261e; font-weight: var(--font-weight-bold, 600); } .eci-login-submit { padding: 15px 28px; border: none; border-radius: 25px; background: var(--background-button-alt, #458b00); color: var(--color-white, #fff); font: inherit; font-weight: var(--font-weight-bold, 600); text-transform: uppercase; letter-spacing: var(--letter-spacing-button, 1px); font-size: 14px; cursor: pointer; align-self: flex-start; } .eci-type-select-label { margin-top: 0; } .eci-type-list { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; padding: 0; margin: 20px 0 40px; } .eci-type-button { display: inline-block; padding: 15px 28px; border: none; border-radius: 25px; background: var(--background-button, #049ddf); color: var(--color-white, #fff); font: inherit; font-weight: var(--font-weight-bold, 600); text-transform: uppercase; letter-spacing: var(--letter-spacing-button, 1px); font-size: 14px; text-decoration: none; cursor: pointer; } .eci-type-button:hover { opacity: .85; } .eci-howto-box { background: var(--background-footer, #f0f0f0); border-radius: 6px; padding: 24px 28px; margin: 20px 0 32px; } .eci-howto-list { margin: 0 0 12px; padding-left: 20px; } .eci-howto-list li { margin-bottom: 6px; } .eci-howto-note { margin: 0; font-size: .9em; color: var(--color-gray-dark-1, #8a8a8a); } .eci-howto-note a { color: var(--background-button, #049ddf); } .eci-pending-wrapper { background: var(--background-footer, #f0f0f0); border-radius: 6px; padding: 24px 28px; margin-bottom: 32px; } .eci-pending-heading { margin: 0 0 16px; } .eci-pending-list { list-style: none; padding: 0; margin: 0; } .eci-pending-list li { padding: 6px 0; border-bottom: 1px solid #e2e2e2; display: flex; justify-content: space-between; gap: 12px; } .eci-pending-list li:last-child { border-bottom: none; } .eci-pending-list a { color: var(--background-button, #049ddf); font-weight: var(--font-weight-bold, 600); } .eci-pending-date { color: var(--color-gray-dark-1, #8a8a8a); font-size: .85em; white-space: nowrap; } .eci-back-button { background: none; border: none; color: var(--background-button, #049ddf); cursor: pointer; padding: 0 0 16px; font: inherit; font-weight: var(--font-weight-bold, 600); font-size: 15px; } .eci-type-form h2 { margin-top: 0; } /* ─── Fields grid: 2 columns, same pattern as the ES Event Registration form (.eser-fields-grid) — regular fields sit two per row, ".eci-field-full" fields (section headings, repeaters, bilingual pairs, submit row) span both columns. grid-auto-flow: dense backfills gaps left by full-width items so single fields don't leave an empty half-row behind them. ─── */ .eci-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; grid-auto-flow: dense; margin-top: 8px; } @media (max-width: 600px) { .eci-fields-grid { grid-template-columns: 1fr; } } .eci-field-full { grid-column: 1 / -1; } .eci-field label { display: block; font-weight: var(--font-weight-bold, 600); margin-bottom: 6px; } .eci-field input[type="text"], .eci-field input[type="email"], .eci-field input[type="tel"], .eci-field input[type="url"], .eci-field input[type="date"], .eci-field input[type="file"], .eci-field select, .eci-field textarea { width: 100%; padding: 13px; border-radius: 6px; border: 1px solid #d4d4d4; font: inherit; box-sizing: border-box; background: var(--color-white, #fff); } /* The native date-picker's internal segments (day/month/year, calendar icon) don't inherit `font` the same way plain text inputs do — line-height in particular stays at the browser default, making the control visually shorter than the text/select fields next to it unless set explicitly. */ .eci-field input[type="date"] { line-height: 1.4; } .eci-field input:focus, .eci-field select:focus, .eci-field textarea:focus { outline: 2px solid var(--background-button, #049ddf); outline-offset: 1px; } .eci-field textarea { resize: vertical; min-height: 90px; } .eci-hint { font-size: .95em; color: var(--color-gray-dark-1, #8a8a8a); margin: 6px 0 0; } /* A form "section" (heading + its fields) as its own grey box — same treatment as .eci-howto-box/.eci-pending-wrapper on the type-selection page. Has its own internal 2-column field grid, independent of whatever grid the box itself sits in (ECI_Shortcode::render_section_start()/ render_section_end()). */ .eci-section-box { background: var(--background-footer, #f0f0f0); border-radius: 6px; padding: 20px 24px 24px; margin: 16px 0 4px; } .eci-section-title { font-weight: var(--font-weight-bold, 600); text-transform: uppercase; font-size: 14px; letter-spacing: var(--letter-spacing-uppercase, 1px); color: var(--color-h, #63666a); margin: 0 0 16px; } .eci-section-box-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; grid-auto-flow: dense; } @media (max-width: 600px) { .eci-section-box-fields { grid-template-columns: 1fr; } } /* Checkbox/radio groups — News Article's Topic/Type/Region fields, General Inquiry's "change or new" choice. Same grey box treatment as .eci-howto-box/ .eci-pending-wrapper on the type-selection page, so each selection reads as its own contained unit within the field. */ .eci-checkbox-group { display: flex; flex-wrap: wrap; gap: 10px; } /* Specificity note: ".eci-field label" (below) sets font-weight: bold on every label in a field, including these — ".eci-field .eci-checkbox"/".eci-radio" (two classes) is needed to actually win over it (one class + one element), plain ".eci-checkbox"/".eci-radio" alone is not specific enough. */ .eci-field .eci-checkbox, .eci-field .eci-radio { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 20px; border: 1px solid #d4d4d4; background: var(--color-white, #fff); font-weight: normal; cursor: pointer; } .eci-checkbox input, .eci-radio input { margin: 0; } .eci-bilingual { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 600px) { .eci-bilingual { grid-template-columns: 1fr; } } .eci-lang-flag { width: 22px; height: auto; vertical-align: middle; margin-right: 6px; border-radius: 2px; } .eci-lang-badge { display: inline-block; font-size: .7em; font-weight: var(--font-weight-bold, 600); letter-spacing: .03em; color: var(--color-gray-dark-1, #8a8a8a); border: 1px solid #ccc; border-radius: 3px; padding: 1px 5px; margin-right: 6px; vertical-align: middle; } .eci-repeater > label { display: block; font-weight: var(--font-weight-bold, 600); margin-bottom: 8px; } .eci-repeater-row { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; } .eci-repeater-row.eci-dragging { opacity: .4; } .eci-drag-handle { cursor: grab; color: var(--color-gray-dark-1, #8a8a8a); flex: 0 0 auto; padding: 0 2px; font-size: 18px; user-select: none; } .eci-repeater-row select, .eci-repeater-row input[type="text"] { flex: 1; padding: 13px; border-radius: 6px; border: 1px solid #d4d4d4; font: inherit; } /* Custom dropdown arrow — bigger and inset further from the edge than the browser default, which otherwise sits flush against the right border. Placed after the rules above so its padding-right isn't overridden. */ .eci-field select, .eci-repeater-row select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2363666a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; } .eci-vita-row .eci-vita-year { flex: 0 0 130px; } /* "New topic"/"Existing" choice (ECI_Type_Newsletter's headline + Further Topics rows) — the select sits above its conditional panel, so this overrides the repeater row's default vertical-centering (fine for a single input, wrong once a row's content stacks). */ .eci-topic-row { align-items: flex-start; } .eci-topic-row-body { flex: 1; min-width: 0; } .eci-topic-field { display: flex; flex-direction: column; gap: 10px; } /* Overrides ".eci-repeater-row select"'s flex:1 (meant for a single-line row) — inside this column layout that would stretch the select vertically. */ .eci-topic-field select { flex: none; width: 100%; } .eci-topic-panel { display: flex; flex-direction: column; gap: 10px; } /* ".eci-topic-panel"'s own display:flex (needed for the visible panel's gap) otherwise wins over the browser's default "[hidden] { display: none }" rule for this element, since it's a same-specificity author-vs-UA-stylesheet conflict — this re-asserts display:none for whichever panel is hidden. */ .eci-topic-panel[hidden] { display: none; } .eci-topic-panel input[type="text"] { width: 100%; padding: 13px; border-radius: 6px; border: 1px solid #d4d4d4; font: inherit; box-sizing: border-box; background: var(--color-white, #fff); } .eci-repeater-add, .eci-topic-submit-link { display: inline-block; padding: 10px 18px; border-radius: 20px; border: 1px solid var(--background-button, #049ddf); background: var(--color-white, #fff); color: var(--background-button, #049ddf); font: inherit; font-weight: var(--font-weight-bold, 600); text-decoration: none; cursor: pointer; } .eci-repeater-add:hover, .eci-topic-submit-link:hover { background: var(--background-button, #049ddf); color: var(--color-white, #fff); } /* Without this, ".eci-topic-panel"'s flex column layout stretches it (and any other block-level child) to the panel's full width by default. */ .eci-topic-submit-link { align-self: flex-start; } .eci-repeater-remove { border: none; background: none; color: #b3261e; cursor: pointer; white-space: nowrap; font: inherit; font-weight: var(--font-weight-bold, 600); } .eci-field-submit { display: flex; justify-content: flex-end; margin-top: 8px; } .eci-submit { padding: 17px 36px; background: var(--background-button-alt, #458b00); color: var(--color-white, #fff); border: none; border-radius: 25px; cursor: pointer; font: inherit; font-size: 14px; font-weight: var(--font-weight-bold, 600); text-transform: uppercase; letter-spacing: var(--letter-spacing-button, 1px); line-height: var(--line-height-button, 1); } .eci-submit:disabled { opacity: .6; cursor: default; } .eci-message { padding: 14px 18px; border-radius: 6px; } .eci-message-success { background: #e6f6e6; color: #1a5c1a; } .eci-message-error { background: #fdecea; color: #b3261e; } .eci-flash-message { padding: 14px 18px; border-radius: 6px; margin-bottom: 24px; } .eci-flash-success { background: #e6f6e6; color: #1a5c1a; }