/** * Trabajá con nosotros styles. * * One commented block per section, in the same order as $sections in * template.php. Only design tokens from assets/css/tokens.css — no hardcoded * colours, font sizes, radii or shadows. See DESIGN.md. * * The layout is smartfit.com.ar/trabaja-con-nosotros measured 1:1 (dark band * 400px + two columns of 419px inside a 930px container, 80px line icon per * reason); the typeface, the palette and the form are ours. */ /* Escape Astra's content wrapper. Same fix as pages/home/style.css — see that file's comment for why; duplicated here because each page's stylesheet only loads on its own page (qivox_enqueue_page_assets). */ .qx-fullwidth #content > .ast-container { display: block; max-width: 100%; padding-inline: 0; } .qx-trabaja-page { width: 100%; min-width: 0; font-family: var(--qx-font-body); color: var(--qx-text); } /* Shared vertical rhythm, same convention as .qx-home / .qx-franquicias. */ .qx-trabaja-page > :where(section) { padding-block: var(--qx-section-y); } /* ========================================================================== Franja del título — the reference's `section.Top`: full-bleed dark band, 400px tall, page title centred in brand yellow and uppercase. Nothing else in it. The band sets its own height, so it opts out of the page rhythm. The height is a local custom property rather than a shared token: it is one-off component geometry copied off the reference, same reasoning as the Franquicias franja. --qx-bg-dark (#111111) rather than the reference's #1F2123: that is the theme's default dark surface, and yellow on it is the pairing DESIGN.md §2 documents as AAA. The 400px only holds from tablet up — at 400px tall on a phone the band would eat the whole first viewport for one line of text. ========================================================================== */ .qx-trabaja-hero { --qx-trabaja-hero-h: clamp(13.75rem, 8rem + 18vw, 25rem); /* 220 → 400 */ display: grid; place-items: center; min-height: var(--qx-trabaja-hero-h); padding-block: var(--qx-space-6); background: var(--qx-bg-dark); } .qx-trabaja-hero__title { margin: 0; font-size: var(--qx-fs-h1); font-weight: var(--qx-fw-bold); line-height: var(--qx-lh-heading); letter-spacing: var(--qx-ls-heading); text-align: center; text-transform: uppercase; color: var(--qx-yellow); } /* ========================================================================== Motivos + formulario — two columns on white, like the reference: reasons left, form right. No off-white band and no card around the form; the reference puts the fields straight on the page and so do we. ========================================================================== */ .qx-trabaja-form { background: var(--qx-bg); } /* 1040px, not a container token: it is the reference's 930px (two 419px columns + a 92px gutter) with the extra room our form needs — the phone field carries a country selector and the CV field is a drop zone. Same kind of local component width as the Franquicias stats grid (960px) and form (780px). */ .qx-trabaja-form__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--qx-space-8); max-width: 1040px; margin-inline: auto; } /* Two columns from the desktop breakpoint up. Below it they stack in source order — reasons first, then the form, which is the order the reference falls back to on mobile too. --qx-space-9 (96px) is the reference's 92px gutter. */ @media (min-width: 1024px) { .qx-trabaja-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--qx-space-9); align-items: start; } /* The reasons stay put while the form — much taller than them — scrolls past. Desktop only: stacked, a pinned block would cover the fields. `align-items: start` above is what makes this work at all. A stretched grid item is as tall as its row and so has no room to travel. The travel range is the grid container, i.e. the whole form: the column releases exactly when the form ends. No header offset in `top` — the Qivox header scrolls away with the page (assets/css/header.css declares no sticky/fixed). */ .qx-trabaja-form__info { position: sticky; top: var(--qx-space-6); } } /* -------------------------------------------------------------------------- Columna izquierda: título, "Porque Qivox es:" y los motivos. -------------------------------------------------------------------------- */ /* --qx-fs-h4 (18 → 24px) matches the reference's 24px heading. It is an H2, not the page title: the H1 is the band above. Plain ink rather than the site's two-tone accent — the reference heading is single-colour, and the yellow of this page is already carrying the band title. */ .qx-trabaja-form__title { margin: 0 0 var(--qx-space-4); font-size: var(--qx-fs-h4); font-weight: var(--qx-fw-bold); line-height: var(--qx-lh-snug); letter-spacing: var(--qx-ls-heading); color: var(--qx-text); } .qx-trabaja-form__info-lead { margin: 0 0 var(--qx-space-6); font-size: var(--qx-fs-body); line-height: var(--qx-lh-body); color: var(--qx-text); } .qx-trabaja-form__list { margin: 0; padding: 0; list-style: none; } /* Hairline between reasons, like the reference — and the same rule treatment as the document list of Términos y condiciones. Padding rather than a grid gap, so the line sits centred in the space between two rows; no rule after the last one, where the column simply ends. */ .qx-trabaja-form__item { display: flex; align-items: center; gap: var(--qx-space-4); padding-block: var(--qx-space-5); border-bottom: 1px solid var(--qx-border); } .qx-trabaja-form__item:first-child { padding-top: 0; } .qx-trabaja-form__item:last-child { padding-bottom: 0; border-bottom: 0; } /* Smaller than the reference's 80px on purpose: at that size the glyphs out-weighed the copy next to them, which is what the column is actually for. 56px at desktop, 44px on a phone. */ .qx-trabaja-form__icon { --qx-trabaja-icon: clamp(2.75rem, 1.85rem + 2.8vw, 3.5rem); /* 44 → 56 */ flex: 0 0 auto; display: grid; place-items: center; width: var(--qx-trabaja-icon); height: var(--qx-trabaja-icon); } /* Thin brand-yellow line art. The reference draws these grey; the client asked for the accent instead. The glyphs are decorative (aria-hidden; the text carries the meaning), so the 3:1 icon contrast floor of DESIGN.md §2 does not apply — yellow on white sits below it. `vector-effect: non-scaling-stroke` is what keeps the line a hairline: the grid is 24 units wide and the box is 80px, so without it a 1.2-unit stroke would render 4px thick. With it the number is read in screen pixels, which is also why the width lives here and not on the paths — see icons.php. */ .qx-trabaja-form__icon svg { width: 100%; height: 100%; fill: none; stroke: var(--qx-yellow); stroke-width: 1.2; vector-effect: non-scaling-stroke; } /* Body size, not --qx-fs-lead: these are four short supporting lines beside the form, not a lead paragraph, and the column reads better set down to the size of the running text. */ .qx-trabaja-form__item-text { font-size: var(--qx-fs-body); line-height: var(--qx-lh-body); color: var(--qx-text); } /* -------------------------------------------------------------------------- Columna derecha: el embed de WPForms. The rebranding mirrors pages/franquicias/style.css — same contract, same reasons — with two deliberate differences: no card around the form (the reference has none) and the fields stay in one column, because this form is a long application with a file drop zone. Details on why the rebranding goes through WPForms' own custom properties, and why the `*-size-*` ones cannot, are documented at length in the Franquicias file. -------------------------------------------------------------------------- */ .qx-trabaja-form__embed { /* Only the properties WPForms declares on :root alone can be set from here: it emits a second block on `#wpforms-{id}` — inside this wrapper — holding every `*-size-*` property, and the nearest declaring ancestor wins. */ --wpforms-button-background-color: var(--qx-yellow); --wpforms-button-border-color: var(--qx-yellow); /* Black on yellow: the only accessible way to use #FFBD00 as a surface. */ --wpforms-button-text-color: var(--qx-ink); --wpforms-button-border-radius: var(--qx-radius-pill); --wpforms-button-border-style: none; --wpforms-field-border-radius: var(--qx-radius-sm); --wpforms-label-color: var(--qx-text); } .qx-trabaja-form__missing { margin: 0; color: var(--qx-text-muted); } /* WPForms resets its own container margins inconsistently depending on the theme; these two rules keep the embed aligned with the column. */ .qx-trabaja-form__embed .wpforms-container, .qx-trabaja-form__embed .wpforms-container-full { margin: 0; } .qx-trabaja-form__embed .wpforms-form { font-family: var(--qx-font-body); } /* Fields must fill the column. `.iti` is the wrapper intl-tel-input puts around the phone input; without this the phone field stays at its intrinsic width. */ .qx-trabaja-form__embed .wpforms-form input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='file']), .qx-trabaja-form__embed .wpforms-form select, .qx-trabaja-form__embed .wpforms-form textarea, .qx-trabaja-form__embed .wpforms-form .iti { width: 100%; max-width: 100%; } /* -------------------------------------------------------------------------- Adjuntos (curriculum y foto) — the reference's two buttons: a pair of plain bordered boxes side by side, each holding its caption and nothing else. WPForms renders these as its "modern" uploader: a dashed drop zone with a 50px inbox icon, the sentence "Haz clic o arrastra un archivo a esta área para subirlo." and the field's own caption printed *below* the box. The three changes here are: put the two fields in one row, empty the box down to its caption, and move that caption inside. The caption is moved by script.js, not by CSS: it is the WPForms field description, a sibling of the drop zone, and its text is written in the WPForms builder — nothing CSS can pull into another element. The script drops it into `.modern-title`, which is the right host for it: Dropzone hides that whole `.dz-message` (class `hide`) as soon as a file is picked, so the caption gets out of the way and the file preview shows normally, and the box stays clickable across its full area because it is still the drop zone. Everything that removes the default look is scoped to `.qx-upload-captioned`, the class script.js adds. With JS off the field keeps WPForms' own drop zone, icon and caption — the boxes are just no longer restyled. -------------------------------------------------------------------------- */ /* One row for the two upload fields, every other field full width. `grid-column: auto` on them is enough: after a full-width row the auto-placer puts the first in column 1 and the second beside it in column 2. Vertical rhythm survives the grid because WPForms spaces fields with `padding: 15px 0`, not with margins — so no row-gap is needed here. Stacked below the phone breakpoint, where two boxes in a row would be too narrow for their labels. */ @media (min-width: 576px) { .qx-trabaja-form__embed .wpforms-form .wpforms-field-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--qx-space-4); } .qx-trabaja-form__embed .wpforms-form .wpforms-field-container > * { grid-column: 1 / -1; } .qx-trabaja-form__embed .wpforms-form .wpforms-field-container > .wpforms-field-file-upload { grid-column: auto; } } /* The box: only its size is set here. Border, radius and fill are deliberately left alone. WPForms paints the drop zone from --wpforms-field-border-color / -radius / -background-color — the same three variables as every input and select in the form — and its rule (0,3,2) already beats dropzone.min.css's dashed grey on #fcfcfc (0,2,2). So saying nothing here is what keeps the two boxes exactly the colour of the rest of the fields; a border of our own is what made them lighter. No hover rule either, for the same reason: WPForms leaves fields untouched on hover, and dropzone.min.css already sets `cursor: pointer` on the box, which is the affordance. The focus ring is WPForms' own too — it draws it from --wpforms-button-background-color, which this page points at the brand yellow. 88px is the reference's box height. */ .qx-trabaja-form__embed div.wpforms-container-full .qx-upload-captioned div.wpforms-uploader { min-height: 88px; padding: var(--qx-space-4); } /* The inbox icon goes: the reference boxes hold text only. */ .qx-trabaja-form__embed div.wpforms-container-full .qx-upload-captioned div.wpforms-uploader .dz-message svg { display: none; } /* The caption, now inside the box, is deliberately left unstyled: WPForms sizes and colours `.dz-message` from --wpforms-field-size-font-size and --wpforms-field-text-color, the same two variables that drive every input and select in this form, so with no rule of our own the two boxes read in exactly the same type as the rest of the fields. This is a step away from the reference, which sets these two labels in small caps; matching the form won over matching the reference here. Adding any font-size, letter-spacing or text-transform back would undo it. */ /* The description the caption came from, which would otherwise print twice. */ .qx-trabaja-form__embed div.wpforms-container-full .qx-upload-captioned > .wpforms-field-description { display: none; } /* 40px of air over the button, same as Franquicias. Beats WPForms' `div.wpforms-container-full .wpforms-form .wpforms-submit-container` (0,3,1) with one extra class. Not a token: the shared scale steps straight from --qx-space-6 (32px) to --qx-space-7 (48px). */ .qx-trabaja-form__embed div.wpforms-container-full .wpforms-form .wpforms-submit-container { margin-top: 40px; } /* Submit button = the header's "¡Inscribite ahora!" pill. `.qx-btn` / `.qx-btn--primary` in assets/css/header.css is the source of truth; the values are mirrored here because WPForms renders the