, which would otherwise inherit the body * copy size, weight and 26px bottom margin and stretch the card. */ .ashby-job-posting-brief-details p { margin: 0 !important; font: inherit !important; color: inherit !important; } /* The heading of a department name. Departments group teams. */ .ashby-job-posting-brief-department-heading { color: var(--gr8-text); font-size: 22px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } /* The heading of a single team. */ .ashby-job-posting-brief-department-heading-level { color: var(--gr8-text-muted); font-size: 16px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } /* The container for the details of the job posting, in the details pane. The subtitle of the section. */ .ashby-job-posting-brief .ashby-job-posting-brief-details, .ashby-job-posting-brief-details { color: var(--gr8-text-muted); font-size: 17px !important; font-weight: 400 !important; line-height: 1.4 !important; } /* * The container for the list of job post briefings. * No top margin here: when the board groups by department Ashby renders one * list per group, so a margin would open a gap before every group. The space * below the filters is set once, on the filters container (see DOM hooks). */ .ashby-job-posting-brief-list { margin-top: 0; } /* The title of the job posting in the details pane. The title of the section. */ .ashby-job-posting-brief .ashby-job-posting-brief-title, .ashby-job-posting-brief-title { display: block; margin: 0 0 8px !important; color: var(--gr8-text); font-size: 24px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: 0; transition: color 0.18s ease; } /* Any element Ashby nests inside the title (span, a) keeps the title color */ .ashby-job-posting-brief-title * { color: inherit; } /* * Hover: the posting title turns brand orange. * !important is needed because Ashby's own link styling sets a dark hover * color on the anchor that wraps the title. */ .ashby-job-posting-brief:hover .ashby-job-posting-brief-title, .ashby-job-posting-brief:hover .ashby-job-posting-brief-title *, .ashby-job-posting-brief:focus-within .ashby-job-posting-brief-title, .ashby-job-posting-brief:focus-within .ashby-job-posting-brief-title *, .ashby-job-posting-brief:hover a.ashby-job-posting-brief-title, a.ashby-job-posting-brief:hover .ashby-job-posting-brief-title, .ashby-job-posting-brief-title:hover, .ashby-job-posting-brief-title:hover *, a.ashby-job-posting-brief-title:hover { color: var(--gr8-orange) !important; } /* The rich text content of the job posting description */ .ashby-job-posting-description { color: var(--gr8-text); font-size: 17px; font-weight: 400; line-height: 1.3; } /* Section headings inside the description — orange, uppercase */ /* * `!important` on the colour only: Ashby ships its own heading rule at the * same specificity and loads after this file, so an equal-weight declaration * silently lost. h5/h6 are listed because the descriptions are pasted in by * recruiters and the heading level is whatever their editor produced. */ .ashby-job-posting-description h1, .ashby-job-posting-description h2, .ashby-job-posting-description h3, .ashby-job-posting-description h4, .ashby-job-posting-description h5, .ashby-job-posting-description h6, .ashby-job-posting-description-container h1, .ashby-job-posting-description-container h2, .ashby-job-posting-description-container h3, .ashby-job-posting-description-container h4 { color: var(--gr8-orange) !important; } .ashby-job-posting-description h1, .ashby-job-posting-description h2, .ashby-job-posting-description h3, .ashby-job-posting-description h4 { margin: 38px 0 26px; font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: 0; text-transform: uppercase; } .ashby-job-posting-description strong, .ashby-job-posting-description b { color: var(--gr8-text); font-weight: 700; } /* * ...but NOT inside a heading. Recruiters paste the descriptions in from a * word processor, which writes the headings as
` value. It also draws a divider * between them, which the design does not have. * * THE STICKY HALF OF THE PANE. * The frame fills the column, so it cannot travel itself — a box that fills its * container has no slack to move in, which is the whole mechanism `sticky` * runs on. The three blocks inside do have slack, so they are what travels: * the frame stays put and ends level with the button, and the details follow * the reader down a long description. * * Each block is pinned one step lower than the one above, so they come to rest * as a stack in the order they are read instead of landing on top of each * other. Ashby gives them no common wrapper — they are three direct children — * so the steps are counted with sibling combinators, and the rising z-index * means that if a step is ever short, the later block covers the earlier one * rather than showing through it. */ /* the blocks sit still inside the pane — the pane is what travels now */ .ashby-job-posting-left-pane [class*="_section_"] { margin: 0 0 10px; padding: 15px 17px !important; border: 0 !important; } .ashby-job-posting-left-pane [class*="_section_"]:last-child { margin-bottom: 0; } .ashby-job-posting-left-pane [class*="_heading_"] { margin: 0 0 5px; color: var(--gr8-orange); font-family: var(--fontFamily); font-size: 12px; font-weight: 400; line-height: 1.1; letter-spacing: 0; text-transform: uppercase; } .ashby-job-posting-left-pane p { margin: 0; color: #ffffff; font-size: 17px; font-weight: 700; line-height: 1.1; } /* The right pane of the job posting, containing the tabs, overview, and application form */ .ashby-job-posting-right-pane { flex: 1 1 auto; min-width: 0; } /* * THE TWO-COLUMN GRID. * The panes are not a flex row — the wrapper (`_content_… _details_…`) is a * CSS grid, and its first column track is Ashby's own sidebar width, not the * pane's. Narrowing the pane to the 181px in the design left 66px of empty * track between the pane and the text instead of the 34px the design has, and * cost the description column 32px of width. * * Setting the track to the pane width and the gap to 34px makes the text column * 824 - 181 - 34 = 609px — exactly the width of the description block in the * mock. Only the columns are touched; the row placement is Ashby's, and it is * what correctly drops the left pane below the tab strip. */ div[class*="_details_"] { grid-template-columns: var(--gr8-pane-width) 1fr !important; column-gap: 34px !important; } /* The application tab in the right pane of the job posting */ .ashby-job-posting-right-pane-application-tab {} /* The overview tab in the right pane of the job posting */ .ashby-job-posting-right-pane-overview-tab {} /* The tabs slider in the right pane of the job posting */ /* * TABS. * Ashby's markup is . * The documented class is on the INNER SPAN, so every state attribute * (aria-selected, aria-current, _active_) lives on the anchor around it — * which is why state selectors on the documented class never matched. * * `.ashby-job-posting-right-pane-tab-slider` is the sliding underline itself, * not a container: giving it a transparent background hides the indicator. */ /* * The bar is absolutely positioned by Ashby at top: 40.5px inside a ~42px * strip, which leaves it sitting too far under the labels. Raising `top` * (with `bottom: auto`, or the box would be over-constrained) moves it to the * ~16px the design has. Both need !important — Ashby's own rule is equally * specific and loads after this file. */ .ashby-job-posting-right-pane-tab-slider { display: none !important; } /* * The anchor carries the type and the state. * * Its height is pinned so that whatever Ashby draws at the anchor's bottom * edge on hover lines up with the orange bar above (which sits at top: 32px, * 2px tall). Without this the hover line stays at the strip's full height and * hangs ~8px below the active one. */ a[class*="_tab_"] { display: inline-block; height: auto !important; border-bottom: 0 !important; box-sizing: border-box; /* explicit, not inherited: the narrow layout centres the strip, which parked the label in the middle of its own underline */ text-align: left; color: var(--gr8-text-muted); font-family: var(--fontFamily); font-size: 20px; font-weight: 700; line-height: 1.1; letter-spacing: 0; text-transform: uppercase; text-decoration: none !important; white-space: nowrap; cursor: pointer; transition: color 0.18s ease; } /* * Hover is the white counterpart of the active state: the label turns white * and Ashby draws its own white bar. * * Do NOT colour a bottom border here. The anchor is taller than its label, so * recolouring its border paints a white line across the top of the description. */ a[class*="_tab_"]:hover { border-bottom: 0 !important; color: #ffffff; } /* * Ashby sets its own colour on the inner span on hover, so `inherit` alone is * not enough — the label has to be told to go white explicitly. */ a[class*="_tab_"]:hover .ashby-job-posting-right-pane-overview-tab, a[class*="_tab_"]:hover .ashby-job-posting-right-pane-application-tab { color: #ffffff; } /* * The active tab stays orange, hover included — hovering the tab you are * already on should do nothing. The `:hover` variants are spelled out so this * wins on specificity rather than on rule order. */ a[class*="_tab_"][class*="_active_"], a[class*="_tab_"][aria-selected="true"], a[class*="_tab_"][aria-current="page"], a[class*="_tab_"][class*="_active_"]:hover, a[class*="_tab_"][aria-selected="true"]:hover, a[class*="_tab_"][aria-current="page"]:hover { color: var(--gr8-orange); } /* ...and the active tab's own label stays orange under the hover rule above */ a[class*="_tab_"][class*="_active_"]:hover .ashby-job-posting-right-pane-overview-tab, a[class*="_tab_"][aria-selected="true"]:hover .ashby-job-posting-right-pane-overview-tab, a[class*="_tab_"][aria-current="page"]:hover .ashby-job-posting-right-pane-overview-tab, a[class*="_tab_"][class*="_active_"]:hover .ashby-job-posting-right-pane-application-tab, a[class*="_tab_"][aria-selected="true"]:hover .ashby-job-posting-right-pane-application-tab, a[class*="_tab_"][aria-current="page"]:hover .ashby-job-posting-right-pane-application-tab { color: var(--gr8-orange); } /* * TAB COLUMN WIDTH. * In the design each tab is a fixed 191px column and the two sit 231px apart, * so APPLICATION starts 449px in from the left of the content. Left to itself * the strip stretched both anchors across the whole 609px column, which pushed * APPLICATION out to ~514px and made the orange bar as wide as half the row. * 191px + a 40px gap reproduces the 231px spacing, and Ashby measures the bar * from the anchor, so the bar becomes 191px too — exactly the line in the mock. */ a[class*="_tab_"], a[role="tab"] { width: 191px; flex: 0 0 auto; } a[class*="_tab_"] + a[class*="_tab_"] { text-align: left; } /* * THE TAB STRIP ITSELF. * On narrow viewports Ashby turns the strip into a sticky white pill that * travels down the page over the description. Neither the sticking nor the * white sheet is in the design. * * `position: relative` rather than `static`: the orange slider inside is * absolutely positioned, so the strip has to stay a containing block or the * bar would jump to some ancestor further up. * * Reached through `role="tablist"` because the strip's hashed class differs * between the wide and the narrow layout. */ [role="tablist"], div[class*="_tabs_"], div[class*="_tabList_"], div[class*="_tabBar_"] { position: relative !important; top: auto !important; /* the columns are fixed width, so they start at the left and keep a 40px gap instead of being spread across the whole description column */ justify-content: flex-start !important; gap: 40px !important; background: transparent !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* * CLASS-AGNOSTIC FALLBACK for the same tabs. * The hashed `_tab_…` class is not the same in every layout Ashby ships — the * narrow-viewport tab strip uses a different one, and there every rule above * silently stops matching. `role="tab"` plus `aria-selected`/`aria-current` * are on the anchor in all of them, so this repeats the styling through * attributes only. Duplicated on purpose: it has to hold on its own. */ a[role="tab"] { display: inline-block; height: auto !important; border-bottom: 0 !important; box-sizing: border-box; text-align: left; color: var(--gr8-text-muted); font-family: var(--fontFamily); font-size: 20px; font-weight: 700; line-height: 1.1; letter-spacing: 0; text-transform: uppercase; text-decoration: none !important; white-space: nowrap; cursor: pointer; transition: color 0.18s ease; } a[role="tab"]:hover, a[role="tab"]:hover .ashby-job-posting-right-pane-overview-tab, a[role="tab"]:hover .ashby-job-posting-right-pane-application-tab { color: #ffffff; } a[role="tab"]:hover { border-bottom: 0 !important; } a[role="tab"][aria-selected="true"], a[role="tab"][aria-current="page"], a[role="tab"][aria-selected="true"]:hover, a[role="tab"][aria-current="page"]:hover, a[role="tab"][aria-selected="true"]:hover .ashby-job-posting-right-pane-overview-tab, a[role="tab"][aria-current="page"]:hover .ashby-job-posting-right-pane-overview-tab, a[role="tab"][aria-selected="true"]:hover .ashby-job-posting-right-pane-application-tab, a[role="tab"][aria-current="page"]:hover .ashby-job-posting-right-pane-application-tab { color: var(--gr8-orange); } a[role="tab"] + a[role="tab"] { text-align: left; } /* * THE UNDERLINE. * It used to come from two different places: the active state was Ashby's own * sliding bar, sized by its script from the anchor, and hover was a border * Ashby puts on the anchor. The two measured the element differently, so the * same tab got a line ~8px longer when active than when hovered. * * Both are now switched off and the line is drawn once, on the label, as a * border that only changes colour between states — so hover and active are * pixel-identical by construction. 191px is the tab column in the design; * 13px of padding is the gap the design leaves under the word. */ .ashby-job-posting-right-pane-overview-tab, .ashby-job-posting-right-pane-application-tab { display: inline-block; box-sizing: border-box; min-width: 191px; max-width: 100%; padding-bottom: 13px; border-bottom: 2px solid transparent; /* the word sits in the middle of its 191px line: left-aligned it overhung the label by ~45px on APPLICATION and ~77px on OVERVIEW */ text-align: center; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; background: transparent; } a[class*="_tab_"]:hover .ashby-job-posting-right-pane-overview-tab, a[class*="_tab_"]:hover .ashby-job-posting-right-pane-application-tab, a[role="tab"]:hover .ashby-job-posting-right-pane-overview-tab, a[role="tab"]:hover .ashby-job-posting-right-pane-application-tab { border-bottom-color: #ffffff; } /* listed last and heavier, so the active tab keeps its orange line on hover */ a[class*="_tab_"][class*="_active_"] .ashby-job-posting-right-pane-overview-tab, a[class*="_tab_"][class*="_active_"] .ashby-job-posting-right-pane-application-tab, a[role="tab"][aria-selected="true"] .ashby-job-posting-right-pane-overview-tab, a[role="tab"][aria-selected="true"] .ashby-job-posting-right-pane-application-tab, a[role="tab"][aria-current="page"] .ashby-job-posting-right-pane-overview-tab, a[role="tab"][aria-current="page"] .ashby-job-posting-right-pane-application-tab { border-bottom-color: var(--gr8-orange); } /* A container for any surveys specified for this application form. */ .ashby-survey-form-container {} /* ========================================================================== ASHBY DOM HOOKS Ashby does not expose an `ashby-*` class for every element, so the rules below target its internal CSS-module classes. Those class names carry a build hash (`_navRoot_5bhg5_28`), which is why every selector matches on the stable prefix only (`[class*="_navRoot_"]`). If Ashby ever renames a module, only this block needs revisiting — everything above keeps working. ========================================================================== */ /* --- Nav bar / logo ------------------------------------------------------ */ div[class*="_navRoot_"] { padding: 40px 20px 0; background: transparent; } /* the posting page's nav doubles as the job header — no vertical space on it */ div[class*="_navRoot_"].ashby-job-posting-header { padding-top: 0; padding-bottom: 0; } /* * Ashby's nav is a of three : the logo plus two empty ones it keeps * for the left/right slots. With those still in flow the logo lands off-centre, * so the empty items are dropped and the remaining one is centred. */ div[class*="_navRoot_"] { display: flex; justify-content: center; } ul[class*="_navContainer_"] { display: flex !important; flex: 1 1 auto; justify-content: center !important; align-items: center; width: 100%; margin: 0; padding: 0; list-style: none; } ul[class*="_navContainer_"] > li { display: flex; flex: 0 0 auto; align-items: center; margin: 0; padding: 0; } ul[class*="_navContainer_"] > li:empty { display: none; } /* * On a posting page Ashby puts the "back to all jobs" control in one of the * nav's list items. Taking that item out of the flow (rather than letting it * wrap onto a row of its own) keeps it on the wordmark's line and leaves no * empty band above the job title — and the wordmark stays centred on the page, * which it would not if the arrow shared the row as a flex sibling. * * Every list item after the first is handled the same way: the ones Ashby * leaves empty render nothing, so there is no need to single out the arrow. */ ul[class*="_navContainer_"] { position: relative; } ul[class*="_navContainer_"] > li + li { position: absolute; top: 50%; /* +10px so that, once the left pane sticks and scrolls up under the header, the arrow clears the pane's border instead of straddling it */ left: calc((100% - var(--widthMaxContent)) / 2 + 10px); transform: translateY(-50%); margin: 0; } /* * The wordmark uploaded in Ashby › Theme settings is replaced by the branded * SVG (light plate + black lettering) while keeping Ashby's link intact. */ a[class*="_navLogoLink_"] { display: block; width: 256px; height: 42px; background-image: var(--gr8-logo); background-repeat: no-repeat; background-position: center; background-size: contain; /* * Ashby rounds this link, which clips the wordmark's own plate and makes its * corners look over-rounded. The plate's radius lives inside the SVG. */ border-radius: 0 !important; overflow: visible; box-shadow: none; } [class*="_navLogoWordmarkImage_"], [class*="_navLogoImage_"] { display: none; } /* * THIRD OPTION — use the wordmark uploaded in Ashby › Theme settings instead of * the embedded SVG above. Uncomment this block and whatever that file looks * like is exactly what the board shows, corners included. */ /* a[class*="_navLogoLink_"] { background-image: none; width: auto; } [class*="_navLogoWordmarkImage_"] { display: block; height: 49px; width: auto; max-width: none; max-height: none; } */ /* --- Filters ------------------------------------------------------------- */ /* "Filters:" label + "Reset filters" button — neither appears in the design */ [class*="_filtersHeader_"] { display: none; } /* * The single gap between the filter row and the first job card. * On narrow screens Ashby also paints this container as a white pill with a * shadow (the sheet behind its collapsible widget) — stripped here, or our * semi-transparent controls would sit on white. */ div[class*="_filtersContainer_"] { margin-top: 42px; margin-bottom: 46px; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* The plain wrapper around the filter row carries nothing of its own */ [class*="_filtersWindow_"] { background: transparent; box-shadow: none; } /* --- Narrow screens: Ashby's collapsible filter widget ------------------- */ /* * Below its own breakpoint Ashby replaces the filter row with a button that * opens the filters in a small window. Everything here keys off the state * class Ashby adds to the container (`_filtersVisible_…`) rather than a width, * so our styling switches exactly when Ashby's does — no breakpoint guessing. */ /* The collapsed trigger, styled as one of our filter controls */ button[class*="_filtersOpen_"] { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 52px; box-sizing: border-box; margin: 0; padding: 0 54px 0 27px; border: 1px solid var(--gr8-filter-border) !important; border-radius: 0 !important; background-color: var(--gr8-filter-surface) !important; background-image: var(--gr8-chevron) !important; background-repeat: no-repeat; background-position: right 27px center; background-size: 20px 11px; color: var(--gr8-text-muted) !important; font-family: var(--fontFamily); font-size: 19px; font-weight: 700; line-height: 50px; letter-spacing: 0.05em; text-align: left; text-transform: uppercase; text-decoration: none !important; box-shadow: none !important; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } button[class*="_filtersOpen_"]:hover, button[class*="_filtersOpen_"]:focus { border-color: var(--gr8-orange) !important; background-color: var(--gr8-orange) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 27 14%22%3E%3Cpath d=%22M3.5 0 13.5 10 23.5 0 27 3.5 16.5 14 10.5 14 0 3.5Z%22 fill=%22%23ffffff%22/%3E%3C/svg%3E") !important; color: #fff !important; outline: none; } /* * While the window is open Ashby disables the trigger but leaves it in place; * hidden rather than removed so the container keeps its height and the job * cards below do not jump. */ [class*="_filtersVisible_"] button[class*="_filtersOpen_"] { visibility: hidden; } /* * The opened window carries no surface of its own — no sheet, no frame, no * shadow — so the hero stays visible behind it. The controls inside keep their * own fill and outline, which is what makes them readable. */ [class*="_filtersVisible_"] [class*="_filtersWindow_"] { z-index: 30; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* Inside the window the two filters stack full width */ [class*="_filtersVisible_"] [class*="_filters_"] { flex-direction: column !important; gap: 14px; } [class*="_filtersVisible_"] [class*="_filterContainer_"] { flex: 1 1 100%; min-width: 100%; } /* * The window's header carries the close button — and Ashby gives it the same * class as the desktop "Reset filters" control, which we hide. It has to come * back here, or the filter window cannot be closed on a phone. */ [class*="_filtersVisible_"] [class*="_filtersHeader_"] { display: flex !important; align-items: center; justify-content: flex-end; margin-bottom: 6px; } /* The "Filters:" caption stays hidden here too — only the close button shows */ [class*="_filtersVisible_"] .ashby-job-board-reset-filters-label { display: inline-flex !important; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; color: var(--gr8-orange); cursor: pointer; } [class*="_filtersVisible_"] .ashby-job-board-reset-filters-label svg { width: 17px; height: 17px; color: var(--gr8-orange); fill: currentColor; } [class*="_filtersVisible_"] .ashby-job-board-reset-filters-label svg path { fill: currentColor; } /* Ashby's screen-reader-only status line stays screen-reader-only */ [class*="_visuallyHidden_"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* The filter row: one line, 24px apart, equal widths */ [class*="_filters_"] { display: flex !important; flex-wrap: wrap; gap: 24px; margin: 0; } [class*="_filterContainer_"] { position: relative; flex: 1 1 0; min-width: 240px; } /* * Ashby draws its own thin chevron in a sibling div next to the . * Hidden so only the brand chevron (background image on the select) shows. */ [class*="_filterIconContainer_"] { display: none; } /* * The design shows two filters only: Department (1st) and Location (3rd). * Ashby's CSS validator rejects the parent selector, so the unwanted filters * cannot be matched through their select's name attribute. They are matched by * position instead, using nothing but sibling combinators — hide everything * after the first, show the third again, hide the fourth. * Ashby's order is: Department, Employment Type, Location, Location Type. * If that order ever changes, this is the block to revisit. */ [class*="_filterContainer_"] + [class*="_filterContainer_"] { display: none; } [class*="_filterContainer_"] + [class*="_filterContainer_"] + [class*="_filterContainer_"] { display: block; } [class*="_filterContainer_"] + [class*="_filterContainer_"] + [class*="_filterContainer_"] + [class*="_filterContainer_"] { display: none; } /* Belt and braces: the two unwanted selects are hidden by name as well */ select[name="employmentType"].ashby-job-board-filter, select[name="workplaceType"].ashby-job-board-filter { display: none; } /* --- Optional: two elements the design does not show --------------------- */ /* * "OPEN POSITIONS (22)" and the department headings between the cards * ("ASHBY TESTING") are not part of the design, so they are hidden. * Delete this block to bring them back — they are still styled above. */ .ashby-job-board-heading, .ashby-job-board-heading-count, .ashby-department-heading, .ashby-department-heading-level, .ashby-job-posting-brief-department-heading, .ashby-job-posting-brief-department-heading-level { display: none !important; } /* * Hiding a heading does not remove the space its wrapper reserves: Ashby wraps * every heading in a `_titles_…` div inside a `_section_…` block, and both keep * their spacing once the heading inside is gone. * * A parent selector would be the natural tool here, but Ashby's CSS validator * rejects it, so the department groups are reached by position instead: they * are the sections that follow the filters container. The board's own * `_titles_` (the intro copy) sits before it and is therefore untouched. */ [class*="_filtersContainer_"] ~ [class*="_section_"] > [class*="_titles_"], [class*="_filtersContainer_"] ~ [class*="_container_"] > [class*="_titles_"], [class*="_filtersContainer_"] ~ * > * > [class*="_titles_"] { display: none !important; } [class*="_filtersContainer_"] ~ [class*="_section_"], [class*="_filtersContainer_"] ~ [class*="_container_"], [class*="_filtersContainer_"] ~ * > [class*="_section_"] { margin-top: 0 !important; padding-top: 0 !important; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ /* ========================================================================== STEP 3: APPLICATION TAB (Figma node 4952:3220) Every selector below is one of Ashby's documented `ashby-*` classes, so this section survives the CSS validator. It is placed after the stub list at the top of the file on purpose: equal-specificity rules later in a file win, so these are the ones that take effect. ========================================================================== */ /* The form itself carries no frame — the section card below is the frame. */ .ashby-application-form-container { max-width: none; /* * The same 16px of air the description gets below the tab strip on the * overview tab. Without it the first block of the form sat straight on the * orange bar. Adjacent margins collapse here, so when the autofill pane is * present its own top margin and this one do not stack. */ margin: 16px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* * THE FIELD CARD. * Figma: rgba(12,12,12,0.7), 1px #393939, radius 6, padding 29/27, 29px between * questions, sitting on a 9.5px backdrop blur like the details pane. */ .ashby-application-form-section-container { /* * No bottom margin. The privacy-policy strip below is drawn as this card's * footer (see RECRUITING PRIVACY POLICY LINK), so the last card has to end * exactly where that strip begins. The 16px that used to live here is now on * `container + container` instead, which is the only place it was ever doing * work — two cards 40px apart read as two separate forms. */ margin: 0; /* * 16px at the bottom rather than 29px. The consent checkbox is the last thing * in this card and the privacy link is a footer strip rather than a question, * so a full-height pad here just opened a hole above the divider. */ padding: 29px 27px 16px !important; border: 1px solid var(--gr8-form-border) !important; border-radius: var(--gr8-btn-radius) !important; background-color: var(--gr8-form-surface) !important; backdrop-filter: blur(9.5px); -webkit-backdrop-filter: blur(9.5px); box-shadow: none !important; } .ashby-application-form-section-header { margin: 0 0 29px; padding: 0; border: 0; } .ashby-application-form-section-header-title { margin: 0 0 8px; color: var(--gr8-orange); font-family: var(--fontFamily); font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: 0; text-transform: uppercase; } .ashby-application-form-section-header-description { margin: 0; color: var(--gr8-text); font-size: 12px; font-weight: 400; line-height: 1.3; } /* One question: label, 12px of air, control. */ .ashby-application-form-field-entry { margin: 0 0 29px; } .ashby-application-form-field-entry:last-child { margin-bottom: 0; } /* * The label. 12px bold uppercase in #F1F1F1. Ashby wraps the required marker in * its own element inside the title, so the nested rule paints just the asterisk * orange while the wording stays light. */ .ashby-application-form-question-title { display: block; margin: 0 0 12px; color: var(--gr8-label); font-family: var(--fontFamily); font-size: 12px; font-weight: 700; line-height: 1.1; letter-spacing: 0; text-transform: uppercase; } /* * HIDDEN QUESTION LABELS. * The consent question's own title is taken off the screen — its wording only * repeats the description under it — while staying readable to screen readers: * `display: none` would leave the control with no accessible name, which * matters on a form candidates have to fill in. The title is currently set to * "This question don't show the title in the form", a placeholder chosen in * Ashby precisely because nobody sees it. * * The hook is the label's `for`, which is the field's own id, so the rule * survives questions being reordered. NOTE: this id belongs to this job's form * template — recreate the form and the id changes, and the rule quietly stops * matching. System fields (_systemfield_name, _systemfield_email, …) never * change; custom questions do. */ .ashby-application-form-question-title[for="8448bc5c-eb72-4811-9673-0340380ee1cd"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ashby-application-form-question-description { margin: 0 0 12px; color: var(--gr8-text); font-size: 12px; font-weight: 400; line-height: 1.3; } /* * Ashby wraps the description text in a , which was picking up the 17px * body-copy rule instead of the 12px set just above. Everything is inherited * from the description block so a per-field override needs stating only once. */ .ashby-application-form-question-description p, .ashby-application-form-question-description span, .ashby-application-form-question-description a { margin: 0; font-size: inherit; font-weight: inherit; font-style: inherit; line-height: inherit; text-transform: inherit; } .ashby-application-form-question-description p, .ashby-application-form-question-description span { color: inherit; } /* * PER-FIELD DESCRIPTION OVERRIDES. * The description is a sibling of the label, and the label is the only element * in a question that carries an id — hence the `+` combinator rather than a * selector on the question block, which has no identifying attribute of its own. * Both ids belong to this job's form template; see the note on the hidden * label above. */ /* * The consent question — tighter gap down to its checkbox. * The gap was built from four separate pieces, which is why trimming only the * description barely moved it: 12px under the description, then Ashby's 8px on * top of the option row, then 4px on top of the label and 10px of padding * inside it. All four are taken down here. The option row is reached by * stepping label -> description -> option, since only the label has an id. */ .ashby-application-form-question-title[for="8448bc5c-eb72-4811-9673-0340380ee1cd"] + .ashby-application-form-question-description { margin-bottom: 0; } .ashby-application-form-question-title[for="8448bc5c-eb72-4811-9673-0340380ee1cd"] + .ashby-application-form-question-description + .ashby-application-form-input-checkbox-group-option { margin-top: 0; } /* Remuneration Expectations — question-title type, but italic, sentence case and in the placeholder grey */ .ashby-application-form-question-title[for="88a08470-092c-4fef-bb76-3408c525b401"] + .ashby-application-form-question-description { color: var(--gr8-field-placeholder); font-family: var(--fontFamily); font-size: 12px; font-weight: 700; font-style: italic; line-height: 1.1; letter-spacing: 0; text-transform: none; } /* -------------------------------------------------------------------------- TEXT-LIKE CONTROLS -------------------------------------------------------------------------- */ .ashby-application-form-input-text, .ashby-application-form-input-textarea, .ashby-application-form-input-date, .ashby-application-form-input-autocomplete, .ashby-application-form-input-dropdown-select { box-sizing: border-box; width: 100%; padding: 10px 16px; border: 1px solid var(--gr8-field-border) !important; border-radius: var(--gr8-btn-radius) !important; background-color: transparent !important; color: var(--gr8-text) !important; font-family: var(--fontFamily); font-size: 17px; font-weight: 400; line-height: 1.1; transition: border-color 0.18s ease; } .ashby-application-form-input-textarea { min-height: 110px; padding: 12px 16px; line-height: 1.3; resize: vertical; } /* hover and focus both take the orange outline from the control spec */ .ashby-application-form-input-text:hover, .ashby-application-form-input-textarea:hover, .ashby-application-form-input-date:hover, .ashby-application-form-input-autocomplete:hover, .ashby-application-form-input-dropdown-select:hover, .ashby-application-form-input-text:focus, .ashby-application-form-input-textarea:focus, .ashby-application-form-input-date:focus, .ashby-application-form-input-autocomplete:focus, .ashby-application-form-input-dropdown-select:focus { border-color: var(--gr8-orange) !important; outline: none; } .ashby-application-form-input-text::placeholder, .ashby-application-form-input-textarea::placeholder, .ashby-application-form-input-autocomplete::placeholder { color: var(--gr8-field-placeholder); opacity: 1; } /* -------------------------------------------------------------------------- DROPDOWN — same chevron as the job-board filters -------------------------------------------------------------------------- */ .ashby-application-form-input-dropdown { position: relative; border: 0 !important; background: transparent !important; } .ashby-application-form-input-dropdown-select { padding: 11px 44px 11px 17px; background-image: var(--gr8-chevron) !important; background-repeat: no-repeat !important; background-position: right 17px center !important; background-size: 20px 10px !important; appearance: none; -webkit-appearance: none; -moz-appearance: none; } /* Ashby draws its own chevron in a sibling element; ours is on the control. */ .ashby-application-form-input-dropdown-icon { display: none !important; } /* -------------------------------------------------------------------------- AUTOCOMPLETE POPUP -------------------------------------------------------------------------- */ .ashby-application-form-input-autocomplete-popup { margin-top: 4px; padding: 6px; border: 1px solid var(--gr8-field-border) !important; border-radius: var(--gr8-btn-radius) !important; background-color: #0c0c0c !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); } .ashby-application-form-input-autocomplete-popup-result { padding: 9px 12px; border-radius: 4px; color: var(--gr8-text); font-size: 17px; line-height: 1.1; } .ashby-application-form-input-autocomplete-popup-result:hover, .ashby-application-form-input-autocomplete-popup-result[aria-selected="true"] { background-color: rgba(255, 89, 0, 0.18); color: var(--gr8-orange); } .ashby-application-form-input-autocomplete-popup-empty, .ashby-application-form-input-autocomplete-popup-loading { padding: 9px 12px; color: var(--gr8-field-placeholder); font-size: 15px; } /* -------------------------------------------------------------------------- SECONDARY BUTTON — "UPLOAD FILE", and the date picker's month arrows Spec: transparent fill, 2px orange border; hover fills #EC652B; click #763311. -------------------------------------------------------------------------- */ /* * The documented class is not always the clickable element — in the autofill * pane the visible control turned out to be a plain inside it, which * is why it kept Ashby's own look (orange label from --colorPrimary600, no * uppercase, ~110px wide instead of 207px). The same is assumed for the file * dropzone. The documented classes are therefore flattened to bare wrappers * and the real control is matched as a nested button; if a documented class * IS the button, the descendant rule still wins on specificity. */ .ashby-application-form-autofill-uploader, .ashby-application-form-input-file-dropzone-upload { display: flex; align-items: center; min-width: 0; /* * `margin: 0` matters on the autofill wrapper. Measured: the wrapper was * starting 15px below the tab underline on its own, and the framed block * inside it added its own 32px on top of that — which is exactly why the * frame sat 15px lower than the left pane. With the wrapper's own margin * gone, the 32px below is the whole distance and the two frames line up. */ margin: 0 !important; padding: 0; border: 0; background: transparent; } .ashby-application-form-input-education-add, .ashby-application-form-autofill-pane button, .ashby-application-form-autofill-uploader button, .ashby-application-form-input-file-dropzone button, .ashby-application-form-input-file-dropzone-upload button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 207px; min-width: 207px; flex: 0 0 auto; /* 11px, not the 16px of the mock: 16 made the control 59px tall and the dropzone around it had to be taller still. 49px reads the same and takes 10px less. */ padding: 11px 20px; border: 2px solid var(--gr8-orange) !important; border-radius: var(--gr8-btn-radius) !important; background-color: transparent !important; color: #ffffff !important; font-family: var(--fontFamily); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-align: center; text-transform: uppercase; text-decoration: none !important; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; } /* the label lives in a span that carries Ashby's own colour and casing */ .ashby-application-form-input-education-add > *, .ashby-application-form-autofill-pane button > *, .ashby-application-form-autofill-uploader button > *, .ashby-application-form-input-file-dropzone button > *, .ashby-application-form-input-file-dropzone-upload button > * { color: inherit !important; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-transform: uppercase !important; border: 0 !important; background: transparent !important; } .ashby-application-form-input-education-add:hover, .ashby-application-form-autofill-pane button:hover, .ashby-application-form-autofill-uploader button:hover, .ashby-application-form-input-file-dropzone button:hover, .ashby-application-form-input-file-dropzone-upload button:hover { background-color: var(--gr8-btn-hover) !important; color: #ffffff !important; } .ashby-application-form-input-education-add:active, .ashby-application-form-autofill-pane button:active, .ashby-application-form-autofill-uploader button:active, .ashby-application-form-input-file-dropzone button:active, .ashby-application-form-input-file-dropzone-upload button:active { background-color: var(--gr8-btn-active) !important; color: var(--gr8-btn-label-active) !important; } /* -------------------------------------------------------------------------- FILE INPUT -------------------------------------------------------------------------- */ /* * Ashby insets its file input inside a wrapper of its own, so the dashed frame * started further in than the solid frame of an ordinary answer. The wrapper is * flattened and the dropzone takes the field's full width, so both frames now * begin on the same line. */ .ashby-application-form-input-file { display: block; width: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } .ashby-application-form-input-file > * { margin-left: 0; margin-right: 0; } .ashby-application-form-input-file-dropzone { /* row, left-aligned: Ashby stacks and centres its own dropzone, the design puts the button and the hint side by side (node 4952:3383) */ display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 30px; box-sizing: border-box; width: 100%; margin: 0; /* the mock's 129px left ~60px of empty space under a 49px button; 84px is the button plus even air above and below */ min-height: 84px; padding: 16px 30px; text-align: left; border: 1px dashed var(--gr8-field-border) !important; border-radius: var(--gr8-btn-radius) !important; background-color: transparent !important; transition: border-color 0.18s ease; } .ashby-application-form-input-file-dropzone:hover, .ashby-application-form-input-file-dropzone[data-state="active"] { border-color: var(--gr8-orange) !important; } .ashby-application-form-input-file-dropzone-instructions { margin: 0 !important; color: var(--gr8-field-placeholder) !important; font-family: var(--fontFamily); font-size: 17px !important; font-weight: 400 !important; line-height: 1.1 !important; text-align: left; } .ashby-application-form-input-file-item { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 16px; border: 1px solid var(--gr8-field-border) !important; border-radius: var(--gr8-btn-radius) !important; background-color: transparent !important; } .ashby-application-form-input-file-item-name { color: var(--gr8-text); font-size: 17px; line-height: 1.1; } .ashby-application-form-input-file-item-delete { border: 0; background: transparent; color: var(--gr8-orange); cursor: pointer; } /* -------------------------------------------------------------------------- CHECKBOX / RADIO / YES-NO Spec: light box with an orange label; orange border on hover; orange tick. -------------------------------------------------------------------------- */ .ashby-application-form-input-checkbox-group, .ashby-application-form-input-radio-group { display: flex; flex-direction: column; gap: 10px; /* nothing trails the last option — the card's own padding closes the box */ margin-bottom: 0 !important; padding-bottom: 0 !important; } .ashby-application-form-input-checkbox-group-option:last-child, .ashby-application-form-input-radio-group-option:last-child { margin-bottom: 0 !important; } .ashby-application-form-input-checkbox-group-option, .ashby-application-form-input-radio-group-option { display: flex; align-items: center; gap: 2px; padding: 0; border: 0 !important; background: transparent !important; } .ashby-application-form-input-checkbox-group-option-checkbox, .ashby-application-form-input-radio-group-option-radio { flex: 0 0 auto; width: 30px; height: 30px; margin: 0; border: 1px solid var(--gr8-field-border) !important; background-color: transparent !important; accent-color: var(--gr8-orange); cursor: pointer; transition: border-color 0.18s ease; } .ashby-application-form-input-checkbox-group-option-checkbox { border-radius: 4px !important; } .ashby-application-form-input-radio-group-option-radio { border-radius: 50% !important; } .ashby-application-form-input-checkbox-group-option:hover .ashby-application-form-input-checkbox-group-option-checkbox, .ashby-application-form-input-radio-group-option:hover .ashby-application-form-input-radio-group-option-radio { border-color: var(--gr8-orange) !important; } .ashby-application-form-input-checkbox-group-option-label, .ashby-application-form-input-radio-group-option-label { padding: 10px; color: var(--gr8-orange); font-family: var(--fontFamily); font-size: 17px; font-weight: 700; line-height: 1.1; text-transform: uppercase; cursor: pointer; } /* * The consent option is a full sentence with a link in it, not a one-word * "YES", so it reads as body copy: white, sentence case, normal weight. Ashby builds the option's id as * _-labeled-checkbox-0, so a substring match on the * question's own id is enough to reach exactly this one option. */ .ashby-application-form-input-checkbox-group-option-label[for*="8448bc5c-eb72-4811-9673-0340380ee1cd"] { /* Ashby's own 4px top margin and 10px padding are part of the gap above */ margin: 0; padding: 0 0 0 6px; color: #ffffff; /* * 13px with a 1.15 line, so the label never stands taller than the 30px box * beside it. * * Measured in Montserrat against the 517px the label gets (609 card, less its * 54px of padding, the 30px box, the 2px gap and 6px of its own): * 15px — 534px wide, wraps to two lines, 39px tall — taller than the box * 14px — 498px, one line, but only 19px of slack before it wraps * 13px — 462px, one line with 55px to spare * And if a narrower column ever does wrap it, 13 x 1.15 x 2 = 30px — exactly * the height of the checkbox, so the row still lines up. */ font-size: 13px; font-weight: 400; line-height: 1.15; text-transform: none; } .ashby-application-form-input-yesno { display: flex; gap: 10px; } .ashby-application-form-input-yesno-option { box-sizing: border-box; min-width: 96px; padding: 11px 20px; border: 1px solid var(--gr8-field-border) !important; border-radius: var(--gr8-btn-radius) !important; background-color: transparent !important; color: var(--gr8-text); font-family: var(--fontFamily); font-size: 17px; font-weight: 700; line-height: 1.1; text-transform: uppercase; cursor: pointer; transition: border-color 0.18s ease, color 0.18s ease; } .ashby-application-form-input-yesno-option:hover { border-color: var(--gr8-orange) !important; } .ashby-application-form-input-yesno-option[aria-pressed="true"] { border-color: var(--gr8-orange) !important; color: var(--gr8-orange); } /* -------------------------------------------------------------------------- AUTOFILL FROM RESUME Figma: dashed orange border, rgba(255,119,0,0.2) fill, 9.5px blur, radius 6. -------------------------------------------------------------------------- */ .ashby-application-form-autofill-pane, .ashby-application-form-autofill-input-root { box-sizing: border-box; /* * Above: the same drop as the left pane, MINUS 15px. * * That 15px is real and measured, not a fudge. The tab labels are inline * boxes inside their anchors, so each anchor is about 15px taller than the * underline it draws — the slack a text line leaves under its baseline. On * the overview tab that slack is swallowed, because the description's own top * margin collapses against it. Here it cannot: the block sits inside a flex * wrapper, where margins never collapse, so the slack was being added on top * of the margin and the frame landed 15px below the pane. Subtracting it puts * the two frames on one line. * * Below: 0. The field card is NOT a sibling of this block — it lives in * `-form-container`, which carries its own 32px top margin — and because the * two sit in different parents those margins add up instead of collapsing. * Anything here is added to that 32px, which is how the gap reached 72px. */ margin: calc(var(--gr8-tab-gap) + var(--gr8-pane-text-offset) - 15px) 0 0 !important; /* no minimum any more: the padding alone gives the block its height, so it hugs its content instead of holding open a floor it no longer needs */ min-height: 0; /* the block is as wide as the field card below it */ width: 100%; /* and its contents sit in the middle of that height rather than at the top */ display: flex; flex-direction: column; justify-content: center; padding: 24px 23px !important; border: 1px dashed var(--gr8-orange) !important; border-radius: var(--gr8-btn-radius) !important; background-color: var(--gr8-autofill-surface) !important; backdrop-filter: blur(9.5px); -webkit-backdrop-filter: blur(9.5px); box-shadow: none !important; } /* * The reset below is DELIBERATELY a descendant selector. * * It exists for the case where Ashby nests `-autofill-input-root` inside * `-autofill-pane`: there the inner box must not repeat the frame. Written flat * it also stripped the frame when the root IS the visible box and no pane * wrapper exists — which is how the pane lost its dashed border and orange fill * and why its title ended up sitting above the line instead of inside a box. * Scoped to a descendant it now only fires when there really is an outer pane. */ .ashby-application-form-autofill-pane .ashby-application-form-autofill-input-root { margin: 0 !important; /* nor the 124px, which would otherwise add to the pane's own height */ min-height: 0; width: 100%; border: 0 !important; background: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0 !important; } .ashby-application-form-autofill-input-base-layer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; } /* !important throughout: Ashby ships its own type for this pane and loads later */ .ashby-application-form-autofill-input-title { /* Ashby keeps this line unbreakable, which is the last thing that was still running out through the right-hand edge of the frame on a narrow screen */ white-space: normal !important; overflow-wrap: break-word; word-break: break-word; margin: 0 0 11px !important; color: #ffffff !important; font-family: var(--fontFamily); font-size: 18px !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: 0; text-transform: uppercase; } .ashby-application-form-autofill-input-description { margin: 0 !important; max-width: 299px; color: var(--gr8-text) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.3 !important; } .ashby-application-form-autofill-input-icon { color: var(--gr8-orange); } .ashby-application-form-autofill-input-drag-layer, .ashby-application-form-autofill-input-pending-layer { border-radius: var(--gr8-btn-radius); background-color: rgba(12, 12, 12, 0.82); color: var(--gr8-text); } .ashby-application-form-autofill-input-form-alert { margin-top: 12px; font-size: 12px; line-height: 1.3; } .ashby-application-form-autofill-input-form-alert[data-highlight="negative"] { color: #ff6a4d; } .ashby-application-form-autofill-input-form-alert[data-highlight="positive"] { color: var(--gr8-orange); } /* * THE TRAILING CARD. * Ashby puts the consent question in a section of its own, which lands as a * second card under the main one. It holds three short lines but inherited the * big card's rhythm — 29px of padding and 29px under every question — so it * came out mostly empty. * * `container + container` is the only handle on it: it means "a card that * follows another card", which is exactly and only this one. The main form, * being first, keeps its own spacing untouched. */ .ashby-application-form-section-container + .ashby-application-form-section-container { margin-top: 16px; padding: 16px 27px !important; } /* * The consent block turned out to be a normal section card wrapped in * `-survey-form-container`. The wrapper draws nothing itself — the frame you * see is the card inside it — so the wrapper is flattened and the card keeps * its own border and fill, only tighter. * * (An earlier attempt stripped the card instead of the wrapper, which is why * the frame disappeared altogether.) */ .ashby-survey-form-container { margin-top: 16px; padding: 0 !important; border: 0 !important; background: transparent !important; } .ashby-survey-form-container .ashby-application-form-section-container { margin: 0 !important; padding: 16px 27px 14px !important; } /* * Everything that was still holding the floor open under "I AGREE": the * question's own 12px bottom margin (it is the only question in this card, so * nothing follows it), the checkbox group's, and the 10px of padding the option * label carries for the wider hit area it does not need here. */ .ashby-survey-form-container .ashby-application-form-field-entry, .ashby-survey-form-container .ashby-application-form-input-checkbox-group, .ashby-survey-form-container .ashby-application-form-input-checkbox-group-option { margin-bottom: 0 !important; } .ashby-survey-form-container .ashby-application-form-input-checkbox-group-option-label, .ashby-survey-form-container .ashby-application-form-input-radio-group-option-label { padding: 0 0 0 8px; } .ashby-application-form-section-container + .ashby-application-form-section-container .ashby-application-form-field-entry, .ashby-survey-form-container .ashby-application-form-field-entry { margin-bottom: 12px; } .ashby-application-form-section-container + .ashby-application-form-section-container .ashby-application-form-question-description, .ashby-survey-form-container .ashby-application-form-question-description { margin-bottom: 8px; } .ashby-application-form-section-container + .ashby-application-form-section-container .ashby-application-form-input-checkbox-group, .ashby-application-form-section-container + .ashby-application-form-section-container .ashby-application-form-input-radio-group, .ashby-survey-form-container .ashby-application-form-input-checkbox-group, .ashby-survey-form-container .ashby-application-form-input-radio-group { gap: 0; } /* -------------------------------------------------------------------------- RECRUITING PRIVACY POLICY LINK A legal link Ashby drops in between the last question and the Submit button. It arrives with no `ashby-*` class of its own, so everything here hangs off its hashed module classes. It is NOT inside the form card in the markup, and CSS cannot move it there — the link's wrapper is a sibling of `.ashby-application-form-container`, two levels away from the card that draws the frame. What it can do is make the two read as one block: the card drops its bottom corners, keeps its bottom border as a divider, and the strip below supplies the remaining three sides and the rounded bottom. The seam lands exactly on the divider, so there is nothing to see. Both blocks are 609px wide at the same left edge and share the 27px side padding, which is what makes this hold; if either ever stops matching the other the join shows up immediately rather than silently drifting. -------------------------------------------------------------------------- */ /* * Square off the bottom of the card the strip attaches to. `:last-child` * because when Ashby splits the questions across two cards only the lower one * touches the strip — the upper one stays fully rounded with its 16px gap. * * If the card is ever not the last child the rule simply does not match: the * corners stay round and leave two small notches against the strip. Worth * noting because the alternative (dropping the border outright) would leave an * open-bottomed card if Ashby ever stops rendering the link at all. */ .ashby-application-form-container .ashby-application-form-section-container:last-child { border-bottom-right-radius: 0 !important; border-bottom-left-radius: 0 !important; } /* * The white slab is NOT the link — it is the around it, and that div * carries `_container_f7cvd_…`, the same generic card class Ashby puts on the * details pane and on the form cards. Stripping that class everywhere would * take their frames with it. * * What singles this one out is that its class attribute starts with two spaces * (`" _container_f7cvd_28"`) — the others always have a module class in front. * `^=" _container_"` is therefore exact here and matches nothing else, and it * survives Ashby rebuilding the hash. * * It does depend on that leading whitespace staying in Ashby's markup. If they * ever tidy it up the rule stops matching and the white slab comes back — * visible at a glance, and nothing else breaks with it. */ div[class^=" _container_"] { /* flush against the card above — the join is the card's own bottom border */ margin: 0 !important; /* * 27px sides so the link sits on the same left/right rails as every question * in the card. 14px top and bottom: the container inside carries 2px of its * own margin, which brings both to the 16px the card uses at its foot. */ padding: 14px 27px !important; border: 1px solid var(--gr8-form-border) !important; border-top: 0 !important; border-radius: 0 0 var(--gr8-btn-radius) var(--gr8-btn-radius) !important; background-color: var(--gr8-form-surface) !important; backdrop-filter: blur(9.5px); -webkit-backdrop-filter: blur(9.5px); box-shadow: none !important; /* * Left, on the same rail as every question label in the card. Centred, it * read as a standalone caption under the form; flush left it reads as the * card's own last line. */ text-align: left; } [class*="_recruitingPrivacyPolicyContainer_"] { display: block; margin: 2px 0; text-align: left; } /* * A quiet grey line rather than a brand-coloured one: it sits directly above * the Submit button, and anything with more presence competes with the only * action on the page. It warms to orange on hover so it still reads as a link. * * 13px to match the consent label directly above it ("I confirm that I have * read and agree to…"), which was sized down to 13 so it would fit inside the * checkbox height. The two lines now sit on the same rail at the same size, so * the strip reads as the card's last line rather than a separate caption. * * (It was 17px when the line was centred, chosen so its width matched the * SUBMIT button below. Left-aligned, that match was doing no work.) */ a[class*="_recruitingPrivacyPolicy_"] { color: var(--gr8-field-placeholder); font-family: var(--fontFamily); font-size: 13px; font-weight: 400; line-height: 1.15; letter-spacing: 0.02em; text-transform: none; text-decoration: underline; text-underline-offset: 3px; transition: color 0.18s ease; } a[class*="_recruitingPrivacyPolicy_"]:hover { color: var(--gr8-orange); text-decoration: underline; } /* -------------------------------------------------------------------------- OUTCOME PANELS -------------------------------------------------------------------------- */ .ashby-application-form-success-container, .ashby-application-form-failure-container, .ashby-application-form-blocked-application-container, .ashby-application-blocking-disclosure { padding: 24px 27px; border: 1px solid var(--gr8-form-border) !important; border-radius: var(--gr8-btn-radius) !important; background-color: var(--gr8-form-surface) !important; color: var(--gr8-text); } .ashby-application-form-texting-consent-description { margin-top: 8px; color: var(--gr8-field-placeholder); font-size: 12px; line-height: 1.3; } .ashby-survey-form-container { color: var(--gr8-text); } /* -------------------------------------------------------------------------- DATE PICKER -------------------------------------------------------------------------- */ .ashby-application-form-input-date-popup { padding: 12px; border: 1px solid var(--gr8-field-border) !important; border-radius: var(--gr8-btn-radius) !important; background-color: #0c0c0c !important; color: var(--gr8-text); } .ashby-application-form-input-date-popup-title { color: var(--gr8-text); font-size: 15px; font-weight: 700; text-transform: uppercase; } .ashby-application-form-input-date-popup-header-button { border: 0; background: transparent; color: var(--gr8-orange); cursor: pointer; } /* -------------------------------------------------------------------------- EDUCATION HISTORY -------------------------------------------------------------------------- */ .ashby-application-form-input-education-entry { margin-bottom: 20px; padding: 20px; border: 1px solid var(--gr8-field-border) !important; border-radius: var(--gr8-btn-radius) !important; background: transparent !important; } .ashby-application-form-input-education-entry-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: var(--gr8-label); font-size: 12px; font-weight: 700; text-transform: uppercase; } .ashby-application-form-input-education-entry-delete { border: 0; background: transparent; color: var(--gr8-orange); cursor: pointer; } @media (max-width: 900px) { html { background-size: 1100px auto; } body p, body li { margin-bottom: 20px; } div[class*="_navRoot_"] { padding-top: 40px; } a[class*="_navLogoLink_"] { width: 210px; height: 34px; } ul[class*="_navContainer_"] > li + li { left: 20px; } div.ashby-job-posting-brief, .ashby-job-posting-brief { padding: 16px 20px 20px !important; } .ashby-job-posting-brief .ashby-job-posting-brief-title, .ashby-job-posting-brief-title { margin-bottom: 6px !important; font-size: 20px !important; } .ashby-job-posting-brief .ashby-job-posting-brief-details, .ashby-job-posting-brief-details { font-size: 15px !important; } div[class*="_filtersContainer_"] { margin-top: 32px; margin-bottom: 34px; } [class*="_filterContainer_"] { flex: 1 1 100%; min-width: 100%; } select.ashby-job-board-filter, .ashby-job-board-filter, button[class*="_filtersOpen_"] { height: 48px; padding: 0 46px 0 20px; background-position: right 20px center; font-size: 17px; line-height: 46px; } /* --- job posting page --- */ /* below 900px the content is viewport-bound, so the heading goes back to the normal flow width */ .ashby-job-posting-heading { width: auto; max-width: none; font-size: 36px; } /* * 768–900px is still a two-column layout — Ashby only stacks the panes at * 767px. The rail therefore keeps its sticky, fixed-width behaviour here and * is merely narrowed; the stacking rules live in the 767px block below. */ /* * The pane deliberately keeps its full 181px here rather than being narrowed. * Measured: "EMPLOYMENT TYPE" is 118px wide at 12px Montserrat, and 181px * leaves exactly 125px of text room (181 - 20 pane padding - 34 section * padding - 2 borders). At 164px only 108px are left and the label wraps. * At 768px the two columns still come to 215 + ~515px, which is comfortable. */ a[class*="_tab_"], a[role="tab"] { font-size: 17px; } /* same 16px as the wide layout: the pane offset is a single token, so a different value here would put the two columns out of line */ .ashby-job-posting-description-container { margin-top: var(--gr8-tab-gap) !important; } .ashby-job-posting-description h1, .ashby-job-posting-description h2, .ashby-job-posting-description h3, .ashby-job-posting-description h4 { margin: 36px 0 18px; font-size: 18px; } .ashby-application-form-submit-button, .ashby-job-posting-description-container button, .ashby-job-posting-description-container a[href*="/application"] { min-height: 50px; padding: 14px 24px; } /* * Upload zones in the narrow two-column range (roughly 768–900px). * * The right column is about 530px here, which leaves ~470px inside the * dashed frame. A 207px button, a 30px gap and the 205px hint come to 462 — * so it fits by 8px, and the slightest change tips the hint onto a second * line. The box then inflates to ~140px and stands half empty, which is what * shows up in that band. * * The button gives up its fixed 207px and the gap halves, so the row has ~60px * of slack instead of 8 and stays on one line. `min-height: 0` means that if * it ever does wrap, the frame hugs the two lines instead of holding 84px * open underneath them. */ .ashby-application-form-input-file-dropzone { gap: 14px; min-height: 0; padding: 14px 20px; } .ashby-application-form-autofill-pane button, .ashby-application-form-autofill-uploader button, .ashby-application-form-input-file-dropzone button, .ashby-application-form-input-file-dropzone-upload button, .ashby-application-form-input-education-add { width: auto; min-width: 0; padding: 11px 16px; } .ashby-application-form-input-file-dropzone-instructions { font-size: 15px !important; } /* * THE AUTOFILL BLOCK IS POSITIONED, NOT LAID OUT. * * This is what every earlier attempt was missing. Ashby places the title, the * description and the button inside this block with `position: absolute` at * fixed offsets — the same way the Figma frame is drawn. Absolutely * positioned boxes are out of the flow: they do not shrink, do not wrap and * do not push each other aside. That is why the button could sit on top of * the title at tablet width and why the text ran out through the frame below * 300px, no matter what widths or flex rules were set on them. * * Putting the subtree back into the flow is the fix. Once everything is * static the block is an ordinary stack: title, description, button, each on * its own line and each as wide as the frame allows. * * The drag and pending overlays are the exception — they are meant to cover * the block while a file is being dropped or parsed, so they are given their * absolute positioning back on the next rule. */ /* nothing may out-grow the frame — safe to apply to everything */ .ashby-application-form-autofill-uploader, .ashby-application-form-autofill-uploader *, .ashby-application-form-autofill-input-root, .ashby-application-form-autofill-input-root * { min-width: 0 !important; max-width: 100% !important; white-space: normal !important; overflow-wrap: break-word; } /* * Only these four are put back into the flow — NOT everything in the block. * * A blanket `position: static` on the subtree also flattened Ashby's own * overlays, which are absolute on purpose and carry no documented class. Back * in the flow they stacked up as ordinary blocks and pushed the frame to some * 800px tall with the text stranded at the bottom. These four are the parts * that actually need to stack; anything else keeps whatever Ashby gave it. */ .ashby-application-form-autofill-input-base-layer, .ashby-application-form-autofill-input-title, .ashby-application-form-autofill-input-description, .ashby-application-form-autofill-uploader button, .ashby-application-form-autofill-pane button { position: static !important; } .ashby-application-form-autofill-uploader, .ashby-application-form-autofill-input-root { position: relative !important; display: block !important; height: auto !important; } .ashby-application-form-autofill-uploader button, .ashby-application-form-autofill-pane button { display: block; width: 100%; margin-top: 14px; } } /* * MOBILE — Ashby's own breakpoint. At 767px it stops laying the job posting * out as two columns and stacks the panes, so this is where the rail becomes a * full-width card. Values follow the mobile frame of the design * (Figma node 5117:116, 402px artboard). */ @media (max-width: 767px) { /* logo row: 156 x 26 centred, per the mobile frame */ a[class*="_navLogoLink_"] { width: 156px; height: 26px; } /* the back arrow loses the desktop content offset once the rail is gone */ ul[class*="_navContainer_"] > li + li { left: 16px; } .ashby-job-posting-heading { font-size: 30px; line-height: 1.06; } /* * Ashby wraps the in `._titles_…`, whose own rule is * `margin: var(--spacingLarge) calc(...) 0` — a large margin above the title * and a hard zero below it. Only the vertical values are replaced; the * horizontal calc is Ashby's gutter and has to survive. */ div[class*="_titles_"] { margin-top: 16px !important; margin-bottom: 16px !important; } /* * Full width and back in the flow: a fixed rail and a viewport-tall sticky * panel both stop making sense once the panes stack. Padding, radius, fill * and border stay exactly as on desktop — the mobile frame uses the same. */ /* one column once the panes stack; the desktop override above is !important, so the reset has to be too */ div[class*="_details_"] { grid-template-columns: 1fr !important; column-gap: 0 !important; } .ashby-job-posting-left-pane { position: static; align-self: auto; flex: 1 1 100%; width: 100%; max-width: 100%; height: auto; /* !important cancels both the desktop top offset and the 15px it gives back at the bottom — neither means anything once the panes stack */ margin: 0 0 10px !important; padding: 10px !important; overflow: visible; } /* the three detail blocks: half the gap and half the vertical padding of the mock, which reads too airy on a phone. Nothing pins here — the pane is a full-width card above the text, so there is nothing to follow. */ .ashby-job-posting-left-pane [class*="_section_"], .ashby-job-posting-left-pane [class*="_section_"] + [class*="_section_"], .ashby-job-posting-left-pane [class*="_section_"] + [class*="_section_"] + [class*="_section_"] { position: static; top: auto; z-index: auto; margin: 0 0 5px; padding: 8px 17px !important; } /* * Ashby also paints a bar on the ANCHOR — the same one that shows on hover in * the wide layout. There it was made to line up by pinning the anchor's * height; here the anchor is a stretched flex item, so its bar drops to the * bottom of the whole row and runs the full half-width. The label carries the * underline now, so the anchor's own is removed outright. */ /* * Below 767px each tab takes half the row, so the underline stretches with * the screen instead of staying a 191px stub with a chasm between the two * words. `flex: 1 1 0` splits the row evenly; the label fills its half and * the word stays centred over its own line, as on the wide layout. */ [role="tablist"], div[class*="_tabs_"], div[class*="_tabList_"], div[class*="_tabBar_"] { justify-content: space-between !important; gap: 16px !important; } a[class*="_tab_"], a[role="tab"] { flex: 1 1 0; width: auto; min-width: 0; align-self: flex-start; font-size: 17px; } .ashby-job-posting-right-pane-overview-tab, .ashby-job-posting-right-pane-application-tab { width: 100%; min-width: 0; } /* same complaint as on the wide layout: the description crowded the bar */ .ashby-job-posting-description-container { margin-top: 36px !important; } /* body copy and section headings keep their desktop sizes in the mobile frame */ body p, body li, .ashby-job-posting-description { font-size: 17px; } .ashby-job-posting-description h1, .ashby-job-posting-description h2, .ashby-job-posting-description h3, .ashby-job-posting-description h4 { margin: 30px 0 20px; font-size: 24px; line-height: 1.1; } .ashby-application-form-submit-button, .ashby-job-posting-description-container button, .ashby-job-posting-description-container a[href*="/application"] { min-height: 54px; padding: 16px 30px; font-size: 18px; } /* --- application tab --- */ .ashby-application-form-section-container { /* no gap under the last card: the privacy strip is its footer */ margin-bottom: 0; padding: 20px 16px !important; } /* the 24px that used to sit under every card, kept where it is actually needed — between two cards */ .ashby-application-form-section-container + .ashby-application-form-section-container { margin-top: 24px; padding: 16px !important; } /* the footer strip follows the card onto the narrower 16px side rails */ div[class^=" _container_"] { padding: 12px 16px !important; } .ashby-application-form-autofill-pane { margin-bottom: 24px; padding: 20px 16px !important; } /* the two-column autofill header stacks, and the buttons go full width so they cannot overflow a phone */ .ashby-application-form-autofill-input-base-layer { flex-direction: column; align-items: stretch; gap: 16px; } .ashby-application-form-autofill-input-description { max-width: none; } /* * The control is the inside the documented wrapper, and it carries * the 207px minimum — which is what was pushing through the dashed frame. * * The previous attempt here used `flex: 1 0 100%`, and that made it worse: * the `0` is flex-shrink, so the button was told it may never give up a * pixel. Whatever row it sits in, it now simply overflowed instead. What it * needs is the opposite — permission to shrink — hence `flex: 0 1 auto` with * the 207px floor lifted. That works whether or not its parent wraps, which * matters because the parent here is Ashby's and not one we can name. */ .ashby-application-form-input-file-dropzone-upload, .ashby-application-form-autofill-uploader, .ashby-application-form-input-education-add, .ashby-application-form-autofill-pane button, .ashby-application-form-autofill-uploader button, .ashby-application-form-input-file-dropzone button, .ashby-application-form-input-file-dropzone-upload button { flex: 0 1 auto; width: auto; min-width: 0; max-width: 100%; padding: 11px 16px; } /* * NOTHING INSIDE THE AUTOFILL BLOCK MAY OUT-GROW IT. * * Every attempt so far tried to name the row that holds the title and the * button and make it behave. That row is Ashby's, its class is not in the * documented list, and the guesses kept missing — which is how the title, the * description and the button all ended up running out through the right-hand * edge of the frame. * * This stops guessing. A flex item refuses to shrink below its content * because `min-width` defaults to `auto`; setting it to 0 across the whole * subtree removes that floor, and `max-width: 100%` caps everything at the * frame. Whatever the row turns out to be, its contents can now fit inside * it, and any flex box in there is free to break onto a second line. */ .ashby-application-form-autofill-uploader, .ashby-application-form-autofill-uploader *, .ashby-application-form-autofill-input-root, .ashby-application-form-autofill-input-root * { min-width: 0 !important; max-width: 100% !important; } .ashby-application-form-autofill-uploader, .ashby-application-form-autofill-input-root, .ashby-application-form-autofill-input-root > *, .ashby-application-form-autofill-input-base-layer, .ashby-application-form-input-file-dropzone { flex-wrap: wrap !important; } /* and the button takes the width it is given rather than asking for its own */ .ashby-application-form-autofill-uploader button, .ashby-application-form-autofill-pane button { width: 100%; } .ashby-application-form-input-file-dropzone { flex-direction: column; align-items: stretch; gap: 14px; min-height: 0; padding: 16px; } .ashby-application-form-input-file-dropzone-instructions { text-align: center; } } @media (max-width: 560px) { html { background-size: 760px auto; } body p, body li { margin-bottom: 16px; } div[class*="_navRoot_"] { padding-top: 32px; } div.ashby-job-posting-brief, .ashby-job-posting-brief { padding: 14px 16px 16px !important; border-radius: 12px 0 12px 0 !important; } .ashby-job-posting-brief .ashby-job-posting-brief-title, .ashby-job-posting-brief-title { margin-bottom: 6px !important; font-size: 18px !important; } .ashby-job-posting-brief .ashby-job-posting-brief-details, .ashby-job-posting-brief-details { font-size: 14px !important; } select.ashby-job-board-filter, .ashby-job-board-filter, button[class*="_filtersOpen_"] { height: 46px; padding: 0 42px 0 16px; background-position: right 16px center; background-size: 18px 10px; font-size: 15px; line-height: 44px; } [class*="_filtersVisible_"] [class*="_filtersWindow_"] { padding: 0 !important; } .ashby-job-board-heading { font-size: 24px; } /* * On a very narrow page a button's label breaks onto a second line instead of * forcing the button wider than the frame around it. Buttons default to not * wrapping, and the label often sits in a span of its own, so both the button * and whatever is inside it have to be told. `height: auto` lets the box grow * to the two lines rather than letting the text spill out of it. */ .ashby-application-form-submit-button, .ashby-application-form-input-file-dropzone-upload, .ashby-application-form-input-education-add, .ashby-application-form-autofill-pane button, .ashby-application-form-autofill-uploader button, .ashby-application-form-input-file-dropzone button, .ashby-application-form-input-file-dropzone-upload button, .ashby-application-form-input-yesno-option, .ashby-job-posting-description-container button, .ashby-job-posting-description-container a[href*="/application"], .ashby-application-form-submit-button > *, .ashby-application-form-input-education-add > *, .ashby-application-form-autofill-pane button > *, .ashby-application-form-autofill-uploader button > *, .ashby-application-form-input-file-dropzone button > *, .ashby-application-form-input-file-dropzone-upload button > * { white-space: normal !important; overflow-wrap: break-word; height: auto; line-height: 1.2; } /* * The job posting page deliberately has no overrides below 560px: the mobile * frame in the design is a 402px artboard, so the 767px block above already * describes this width and anything here would contradict it. */ } /* * Very small phones. 164px per tab plus the page gutters stops fitting once the * viewport drops below ~360px, so the underline is shortened rather than * allowed to push the row into a horizontal scroll. */ @media (max-width: 360px) { a[class*="_tab_"], a[role="tab"] { font-size: 15px; } }
, which was picking up the 17px * body-copy rule instead of the 12px set just above. Everything is inherited * from the description block so a per-field override needs stating only once. */ .ashby-application-form-question-description p, .ashby-application-form-question-description span, .ashby-application-form-question-description a { margin: 0; font-size: inherit; font-weight: inherit; font-style: inherit; line-height: inherit; text-transform: inherit; } .ashby-application-form-question-description p, .ashby-application-form-question-description span { color: inherit; } /* * PER-FIELD DESCRIPTION OVERRIDES. * The description is a sibling of the label, and the label is the only element * in a question that carries an id — hence the `+` combinator rather than a * selector on the question block, which has no identifying attribute of its own. * Both ids belong to this job's form template; see the note on the hidden * label above. */ /* * The consent question — tighter gap down to its checkbox. * The gap was built from four separate pieces, which is why trimming only the * description barely moved it: 12px under the description, then Ashby's 8px on * top of the option row, then 4px on top of the label and 10px of padding * inside it. All four are taken down here. The option row is reached by * stepping label -> description -> option, since only the label has an id. */ .ashby-application-form-question-title[for="8448bc5c-eb72-4811-9673-0340380ee1cd"] + .ashby-application-form-question-description { margin-bottom: 0; } .ashby-application-form-question-title[for="8448bc5c-eb72-4811-9673-0340380ee1cd"] + .ashby-application-form-question-description + .ashby-application-form-input-checkbox-group-option { margin-top: 0; } /* Remuneration Expectations — question-title type, but italic, sentence case and in the placeholder grey */ .ashby-application-form-question-title[for="88a08470-092c-4fef-bb76-3408c525b401"] + .ashby-application-form-question-description { color: var(--gr8-field-placeholder); font-family: var(--fontFamily); font-size: 12px; font-weight: 700; font-style: italic; line-height: 1.1; letter-spacing: 0; text-transform: none; } /* -------------------------------------------------------------------------- TEXT-LIKE CONTROLS -------------------------------------------------------------------------- */ .ashby-application-form-input-text, .ashby-application-form-input-textarea, .ashby-application-form-input-date, .ashby-application-form-input-autocomplete, .ashby-application-form-input-dropdown-select { box-sizing: border-box; width: 100%; padding: 10px 16px; border: 1px solid var(--gr8-field-border) !important; border-radius: var(--gr8-btn-radius) !important; background-color: transparent !important; color: var(--gr8-text) !important; font-family: var(--fontFamily); font-size: 17px; font-weight: 400; line-height: 1.1; transition: border-color 0.18s ease; } .ashby-application-form-input-textarea { min-height: 110px; padding: 12px 16px; line-height: 1.3; resize: vertical; } /* hover and focus both take the orange outline from the control spec */ .ashby-application-form-input-text:hover, .ashby-application-form-input-textarea:hover, .ashby-application-form-input-date:hover, .ashby-application-form-input-autocomplete:hover, .ashby-application-form-input-dropdown-select:hover, .ashby-application-form-input-text:focus, .ashby-application-form-input-textarea:focus, .ashby-application-form-input-date:focus, .ashby-application-form-input-autocomplete:focus, .ashby-application-form-input-dropdown-select:focus { border-color: var(--gr8-orange) !important; outline: none; } .ashby-application-form-input-text::placeholder, .ashby-application-form-input-textarea::placeholder, .ashby-application-form-input-autocomplete::placeholder { color: var(--gr8-field-placeholder); opacity: 1; } /* -------------------------------------------------------------------------- DROPDOWN — same chevron as the job-board filters -------------------------------------------------------------------------- */ .ashby-application-form-input-dropdown { position: relative; border: 0 !important; background: transparent !important; } .ashby-application-form-input-dropdown-select { padding: 11px 44px 11px 17px; background-image: var(--gr8-chevron) !important; background-repeat: no-repeat !important; background-position: right 17px center !important; background-size: 20px 10px !important; appearance: none; -webkit-appearance: none; -moz-appearance: none; } /* Ashby draws its own chevron in a sibling element; ours is on the control. */ .ashby-application-form-input-dropdown-icon { display: none !important; } /* -------------------------------------------------------------------------- AUTOCOMPLETE POPUP -------------------------------------------------------------------------- */ .ashby-application-form-input-autocomplete-popup { margin-top: 4px; padding: 6px; border: 1px solid var(--gr8-field-border) !important; border-radius: var(--gr8-btn-radius) !important; background-color: #0c0c0c !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); } .ashby-application-form-input-autocomplete-popup-result { padding: 9px 12px; border-radius: 4px; color: var(--gr8-text); font-size: 17px; line-height: 1.1; } .ashby-application-form-input-autocomplete-popup-result:hover, .ashby-application-form-input-autocomplete-popup-result[aria-selected="true"] { background-color: rgba(255, 89, 0, 0.18); color: var(--gr8-orange); } .ashby-application-form-input-autocomplete-popup-empty, .ashby-application-form-input-autocomplete-popup-loading { padding: 9px 12px; color: var(--gr8-field-placeholder); font-size: 15px; } /* -------------------------------------------------------------------------- SECONDARY BUTTON — "UPLOAD FILE", and the date picker's month arrows Spec: transparent fill, 2px orange border; hover fills #EC652B; click #763311. -------------------------------------------------------------------------- */ /* * The documented class is not always the clickable element — in the autofill * pane the visible control turned out to be a plain inside it, which * is why it kept Ashby's own look (orange label from --colorPrimary600, no * uppercase, ~110px wide instead of 207px). The same is assumed for the file * dropzone. The documented classes are therefore flattened to bare wrappers * and the real control is matched as a nested button; if a documented class * IS the button, the descendant rule still wins on specificity. */ .ashby-application-form-autofill-uploader, .ashby-application-form-input-file-dropzone-upload { display: flex; align-items: center; min-width: 0; /* * `margin: 0` matters on the autofill wrapper. Measured: the wrapper was * starting 15px below the tab underline on its own, and the framed block * inside it added its own 32px on top of that — which is exactly why the * frame sat 15px lower than the left pane. With the wrapper's own margin * gone, the 32px below is the whole distance and the two frames line up. */ margin: 0 !important; padding: 0; border: 0; background: transparent; } .ashby-application-form-input-education-add, .ashby-application-form-autofill-pane button, .ashby-application-form-autofill-uploader button, .ashby-application-form-input-file-dropzone button, .ashby-application-form-input-file-dropzone-upload button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 207px; min-width: 207px; flex: 0 0 auto; /* 11px, not the 16px of the mock: 16 made the control 59px tall and the dropzone around it had to be taller still. 49px reads the same and takes 10px less. */ padding: 11px 20px; border: 2px solid var(--gr8-orange) !important; border-radius: var(--gr8-btn-radius) !important; background-color: transparent !important; color: #ffffff !important; font-family: var(--fontFamily); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-align: center; text-transform: uppercase; text-decoration: none !important; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; } /* the label lives in a span that carries Ashby's own colour and casing */ .ashby-application-form-input-education-add > *, .ashby-application-form-autofill-pane button > *, .ashby-application-form-autofill-uploader button > *, .ashby-application-form-input-file-dropzone button > *, .ashby-application-form-input-file-dropzone-upload button > * { color: inherit !important; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-transform: uppercase !important; border: 0 !important; background: transparent !important; } .ashby-application-form-input-education-add:hover, .ashby-application-form-autofill-pane button:hover, .ashby-application-form-autofill-uploader button:hover, .ashby-application-form-input-file-dropzone button:hover, .ashby-application-form-input-file-dropzone-upload button:hover { background-color: var(--gr8-btn-hover) !important; color: #ffffff !important; } .ashby-application-form-input-education-add:active, .ashby-application-form-autofill-pane button:active, .ashby-application-form-autofill-uploader button:active, .ashby-application-form-input-file-dropzone button:active, .ashby-application-form-input-file-dropzone-upload button:active { background-color: var(--gr8-btn-active) !important; color: var(--gr8-btn-label-active) !important; } /* -------------------------------------------------------------------------- FILE INPUT -------------------------------------------------------------------------- */ /* * Ashby insets its file input inside a wrapper of its own, so the dashed frame * started further in than the solid frame of an ordinary answer. The wrapper is * flattened and the dropzone takes the field's full width, so both frames now * begin on the same line. */ .ashby-application-form-input-file { display: block; width: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } .ashby-application-form-input-file > * { margin-left: 0; margin-right: 0; } .ashby-application-form-input-file-dropzone { /* row, left-aligned: Ashby stacks and centres its own dropzone, the design puts the button and the hint side by side (node 4952:3383) */ display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 30px; box-sizing: border-box; width: 100%; margin: 0; /* the mock's 129px left ~60px of empty space under a 49px button; 84px is the button plus even air above and below */ min-height: 84px; padding: 16px 30px; text-align: left; border: 1px dashed var(--gr8-field-border) !important; border-radius: var(--gr8-btn-radius) !important; background-color: transparent !important; transition: border-color 0.18s ease; } .ashby-application-form-input-file-dropzone:hover, .ashby-application-form-input-file-dropzone[data-state="active"] { border-color: var(--gr8-orange) !important; } .ashby-application-form-input-file-dropzone-instructions { margin: 0 !important; color: var(--gr8-field-placeholder) !important; font-family: var(--fontFamily); font-size: 17px !important; font-weight: 400 !important; line-height: 1.1 !important; text-align: left; } .ashby-application-form-input-file-item { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 16px; border: 1px solid var(--gr8-field-border) !important; border-radius: var(--gr8-btn-radius) !important; background-color: transparent !important; } .ashby-application-form-input-file-item-name { color: var(--gr8-text); font-size: 17px; line-height: 1.1; } .ashby-application-form-input-file-item-delete { border: 0; background: transparent; color: var(--gr8-orange); cursor: pointer; } /* -------------------------------------------------------------------------- CHECKBOX / RADIO / YES-NO Spec: light box with an orange label; orange border on hover; orange tick. -------------------------------------------------------------------------- */ .ashby-application-form-input-checkbox-group, .ashby-application-form-input-radio-group { display: flex; flex-direction: column; gap: 10px; /* nothing trails the last option — the card's own padding closes the box */ margin-bottom: 0 !important; padding-bottom: 0 !important; } .ashby-application-form-input-checkbox-group-option:last-child, .ashby-application-form-input-radio-group-option:last-child { margin-bottom: 0 !important; } .ashby-application-form-input-checkbox-group-option, .ashby-application-form-input-radio-group-option { display: flex; align-items: center; gap: 2px; padding: 0; border: 0 !important; background: transparent !important; } .ashby-application-form-input-checkbox-group-option-checkbox, .ashby-application-form-input-radio-group-option-radio { flex: 0 0 auto; width: 30px; height: 30px; margin: 0; border: 1px solid var(--gr8-field-border) !important; background-color: transparent !important; accent-color: var(--gr8-orange); cursor: pointer; transition: border-color 0.18s ease; } .ashby-application-form-input-checkbox-group-option-checkbox { border-radius: 4px !important; } .ashby-application-form-input-radio-group-option-radio { border-radius: 50% !important; } .ashby-application-form-input-checkbox-group-option:hover .ashby-application-form-input-checkbox-group-option-checkbox, .ashby-application-form-input-radio-group-option:hover .ashby-application-form-input-radio-group-option-radio { border-color: var(--gr8-orange) !important; } .ashby-application-form-input-checkbox-group-option-label, .ashby-application-form-input-radio-group-option-label { padding: 10px; color: var(--gr8-orange); font-family: var(--fontFamily); font-size: 17px; font-weight: 700; line-height: 1.1; text-transform: uppercase; cursor: pointer; } /* * The consent option is a full sentence with a link in it, not a one-word * "YES", so it reads as body copy: white, sentence case, normal weight. Ashby builds the option's id as * _-labeled-checkbox-0, so a substring match on the * question's own id is enough to reach exactly this one option. */ .ashby-application-form-input-checkbox-group-option-label[for*="8448bc5c-eb72-4811-9673-0340380ee1cd"] { /* Ashby's own 4px top margin and 10px padding are part of the gap above */ margin: 0; padding: 0 0 0 6px; color: #ffffff; /* * 13px with a 1.15 line, so the label never stands taller than the 30px box * beside it. * * Measured in Montserrat against the 517px the label gets (609 card, less its * 54px of padding, the 30px box, the 2px gap and 6px of its own): * 15px — 534px wide, wraps to two lines, 39px tall — taller than the box * 14px — 498px, one line, but only 19px of slack before it wraps * 13px — 462px, one line with 55px to spare * And if a narrower column ever does wrap it, 13 x 1.15 x 2 = 30px — exactly * the height of the checkbox, so the row still lines up. */ font-size: 13px; font-weight: 400; line-height: 1.15; text-transform: none; } .ashby-application-form-input-yesno { display: flex; gap: 10px; } .ashby-application-form-input-yesno-option { box-sizing: border-box; min-width: 96px; padding: 11px 20px; border: 1px solid var(--gr8-field-border) !important; border-radius: var(--gr8-btn-radius) !important; background-color: transparent !important; color: var(--gr8-text); font-family: var(--fontFamily); font-size: 17px; font-weight: 700; line-height: 1.1; text-transform: uppercase; cursor: pointer; transition: border-color 0.18s ease, color 0.18s ease; } .ashby-application-form-input-yesno-option:hover { border-color: var(--gr8-orange) !important; } .ashby-application-form-input-yesno-option[aria-pressed="true"] { border-color: var(--gr8-orange) !important; color: var(--gr8-orange); } /* -------------------------------------------------------------------------- AUTOFILL FROM RESUME Figma: dashed orange border, rgba(255,119,0,0.2) fill, 9.5px blur, radius 6. -------------------------------------------------------------------------- */ .ashby-application-form-autofill-pane, .ashby-application-form-autofill-input-root { box-sizing: border-box; /* * Above: the same drop as the left pane, MINUS 15px. * * That 15px is real and measured, not a fudge. The tab labels are inline * boxes inside their anchors, so each anchor is about 15px taller than the * underline it draws — the slack a text line leaves under its baseline. On * the overview tab that slack is swallowed, because the description's own top * margin collapses against it. Here it cannot: the block sits inside a flex * wrapper, where margins never collapse, so the slack was being added on top * of the margin and the frame landed 15px below the pane. Subtracting it puts * the two frames on one line. * * Below: 0. The field card is NOT a sibling of this block — it lives in * `-form-container`, which carries its own 32px top margin — and because the * two sit in different parents those margins add up instead of collapsing. * Anything here is added to that 32px, which is how the gap reached 72px. */ margin: calc(var(--gr8-tab-gap) + var(--gr8-pane-text-offset) - 15px) 0 0 !important; /* no minimum any more: the padding alone gives the block its height, so it hugs its content instead of holding open a floor it no longer needs */ min-height: 0; /* the block is as wide as the field card below it */ width: 100%; /* and its contents sit in the middle of that height rather than at the top */ display: flex; flex-direction: column; justify-content: center; padding: 24px 23px !important; border: 1px dashed var(--gr8-orange) !important; border-radius: var(--gr8-btn-radius) !important; background-color: var(--gr8-autofill-surface) !important; backdrop-filter: blur(9.5px); -webkit-backdrop-filter: blur(9.5px); box-shadow: none !important; } /* * The reset below is DELIBERATELY a descendant selector. * * It exists for the case where Ashby nests `-autofill-input-root` inside * `-autofill-pane`: there the inner box must not repeat the frame. Written flat * it also stripped the frame when the root IS the visible box and no pane * wrapper exists — which is how the pane lost its dashed border and orange fill * and why its title ended up sitting above the line instead of inside a box. * Scoped to a descendant it now only fires when there really is an outer pane. */ .ashby-application-form-autofill-pane .ashby-application-form-autofill-input-root { margin: 0 !important; /* nor the 124px, which would otherwise add to the pane's own height */ min-height: 0; width: 100%; border: 0 !important; background: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0 !important; } .ashby-application-form-autofill-input-base-layer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; } /* !important throughout: Ashby ships its own type for this pane and loads later */ .ashby-application-form-autofill-input-title { /* Ashby keeps this line unbreakable, which is the last thing that was still running out through the right-hand edge of the frame on a narrow screen */ white-space: normal !important; overflow-wrap: break-word; word-break: break-word; margin: 0 0 11px !important; color: #ffffff !important; font-family: var(--fontFamily); font-size: 18px !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: 0; text-transform: uppercase; } .ashby-application-form-autofill-input-description { margin: 0 !important; max-width: 299px; color: var(--gr8-text) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.3 !important; } .ashby-application-form-autofill-input-icon { color: var(--gr8-orange); } .ashby-application-form-autofill-input-drag-layer, .ashby-application-form-autofill-input-pending-layer { border-radius: var(--gr8-btn-radius); background-color: rgba(12, 12, 12, 0.82); color: var(--gr8-text); } .ashby-application-form-autofill-input-form-alert { margin-top: 12px; font-size: 12px; line-height: 1.3; } .ashby-application-form-autofill-input-form-alert[data-highlight="negative"] { color: #ff6a4d; } .ashby-application-form-autofill-input-form-alert[data-highlight="positive"] { color: var(--gr8-orange); } /* * THE TRAILING CARD. * Ashby puts the consent question in a section of its own, which lands as a * second card under the main one. It holds three short lines but inherited the * big card's rhythm — 29px of padding and 29px under every question — so it * came out mostly empty. * * `container + container` is the only handle on it: it means "a card that * follows another card", which is exactly and only this one. The main form, * being first, keeps its own spacing untouched. */ .ashby-application-form-section-container + .ashby-application-form-section-container { margin-top: 16px; padding: 16px 27px !important; } /* * The consent block turned out to be a normal section card wrapped in * `-survey-form-container`. The wrapper draws nothing itself — the frame you * see is the card inside it — so the wrapper is flattened and the card keeps * its own border and fill, only tighter. * * (An earlier attempt stripped the card instead of the wrapper, which is why * the frame disappeared altogether.) */ .ashby-survey-form-container { margin-top: 16px; padding: 0 !important; border: 0 !important; background: transparent !important; } .ashby-survey-form-container .ashby-application-form-section-container { margin: 0 !important; padding: 16px 27px 14px !important; } /* * Everything that was still holding the floor open under "I AGREE": the * question's own 12px bottom margin (it is the only question in this card, so * nothing follows it), the checkbox group's, and the 10px of padding the option * label carries for the wider hit area it does not need here. */ .ashby-survey-form-container .ashby-application-form-field-entry, .ashby-survey-form-container .ashby-application-form-input-checkbox-group, .ashby-survey-form-container .ashby-application-form-input-checkbox-group-option { margin-bottom: 0 !important; } .ashby-survey-form-container .ashby-application-form-input-checkbox-group-option-label, .ashby-survey-form-container .ashby-application-form-input-radio-group-option-label { padding: 0 0 0 8px; } .ashby-application-form-section-container + .ashby-application-form-section-container .ashby-application-form-field-entry, .ashby-survey-form-container .ashby-application-form-field-entry { margin-bottom: 12px; } .ashby-application-form-section-container + .ashby-application-form-section-container .ashby-application-form-question-description, .ashby-survey-form-container .ashby-application-form-question-description { margin-bottom: 8px; } .ashby-application-form-section-container + .ashby-application-form-section-container .ashby-application-form-input-checkbox-group, .ashby-application-form-section-container + .ashby-application-form-section-container .ashby-application-form-input-radio-group, .ashby-survey-form-container .ashby-application-form-input-checkbox-group, .ashby-survey-form-container .ashby-application-form-input-radio-group { gap: 0; } /* -------------------------------------------------------------------------- RECRUITING PRIVACY POLICY LINK A legal link Ashby drops in between the last question and the Submit button. It arrives with no `ashby-*` class of its own, so everything here hangs off its hashed module classes. It is NOT inside the form card in the markup, and CSS cannot move it there — the link's wrapper is a sibling of `.ashby-application-form-container`, two levels away from the card that draws the frame. What it can do is make the two read as one block: the card drops its bottom corners, keeps its bottom border as a divider, and the strip below supplies the remaining three sides and the rounded bottom. The seam lands exactly on the divider, so there is nothing to see. Both blocks are 609px wide at the same left edge and share the 27px side padding, which is what makes this hold; if either ever stops matching the other the join shows up immediately rather than silently drifting. -------------------------------------------------------------------------- */ /* * Square off the bottom of the card the strip attaches to. `:last-child` * because when Ashby splits the questions across two cards only the lower one * touches the strip — the upper one stays fully rounded with its 16px gap. * * If the card is ever not the last child the rule simply does not match: the * corners stay round and leave two small notches against the strip. Worth * noting because the alternative (dropping the border outright) would leave an * open-bottomed card if Ashby ever stops rendering the link at all. */ .ashby-application-form-container .ashby-application-form-section-container:last-child { border-bottom-right-radius: 0 !important; border-bottom-left-radius: 0 !important; } /* * The white slab is NOT the link — it is the around it, and that div * carries `_container_f7cvd_…`, the same generic card class Ashby puts on the * details pane and on the form cards. Stripping that class everywhere would * take their frames with it. * * What singles this one out is that its class attribute starts with two spaces * (`" _container_f7cvd_28"`) — the others always have a module class in front. * `^=" _container_"` is therefore exact here and matches nothing else, and it * survives Ashby rebuilding the hash. * * It does depend on that leading whitespace staying in Ashby's markup. If they * ever tidy it up the rule stops matching and the white slab comes back — * visible at a glance, and nothing else breaks with it. */ div[class^=" _container_"] { /* flush against the card above — the join is the card's own bottom border */ margin: 0 !important; /* * 27px sides so the link sits on the same left/right rails as every question * in the card. 14px top and bottom: the container inside carries 2px of its * own margin, which brings both to the 16px the card uses at its foot. */ padding: 14px 27px !important; border: 1px solid var(--gr8-form-border) !important; border-top: 0 !important; border-radius: 0 0 var(--gr8-btn-radius) var(--gr8-btn-radius) !important; background-color: var(--gr8-form-surface) !important; backdrop-filter: blur(9.5px); -webkit-backdrop-filter: blur(9.5px); box-shadow: none !important; /* * Left, on the same rail as every question label in the card. Centred, it * read as a standalone caption under the form; flush left it reads as the * card's own last line. */ text-align: left; } [class*="_recruitingPrivacyPolicyContainer_"] { display: block; margin: 2px 0; text-align: left; } /* * A quiet grey line rather than a brand-coloured one: it sits directly above * the Submit button, and anything with more presence competes with the only * action on the page. It warms to orange on hover so it still reads as a link. * * 13px to match the consent label directly above it ("I confirm that I have * read and agree to…"), which was sized down to 13 so it would fit inside the * checkbox height. The two lines now sit on the same rail at the same size, so * the strip reads as the card's last line rather than a separate caption. * * (It was 17px when the line was centred, chosen so its width matched the * SUBMIT button below. Left-aligned, that match was doing no work.) */ a[class*="_recruitingPrivacyPolicy_"] { color: var(--gr8-field-placeholder); font-family: var(--fontFamily); font-size: 13px; font-weight: 400; line-height: 1.15; letter-spacing: 0.02em; text-transform: none; text-decoration: underline; text-underline-offset: 3px; transition: color 0.18s ease; } a[class*="_recruitingPrivacyPolicy_"]:hover { color: var(--gr8-orange); text-decoration: underline; } /* -------------------------------------------------------------------------- OUTCOME PANELS -------------------------------------------------------------------------- */ .ashby-application-form-success-container, .ashby-application-form-failure-container, .ashby-application-form-blocked-application-container, .ashby-application-blocking-disclosure { padding: 24px 27px; border: 1px solid var(--gr8-form-border) !important; border-radius: var(--gr8-btn-radius) !important; background-color: var(--gr8-form-surface) !important; color: var(--gr8-text); } .ashby-application-form-texting-consent-description { margin-top: 8px; color: var(--gr8-field-placeholder); font-size: 12px; line-height: 1.3; } .ashby-survey-form-container { color: var(--gr8-text); } /* -------------------------------------------------------------------------- DATE PICKER -------------------------------------------------------------------------- */ .ashby-application-form-input-date-popup { padding: 12px; border: 1px solid var(--gr8-field-border) !important; border-radius: var(--gr8-btn-radius) !important; background-color: #0c0c0c !important; color: var(--gr8-text); } .ashby-application-form-input-date-popup-title { color: var(--gr8-text); font-size: 15px; font-weight: 700; text-transform: uppercase; } .ashby-application-form-input-date-popup-header-button { border: 0; background: transparent; color: var(--gr8-orange); cursor: pointer; } /* -------------------------------------------------------------------------- EDUCATION HISTORY -------------------------------------------------------------------------- */ .ashby-application-form-input-education-entry { margin-bottom: 20px; padding: 20px; border: 1px solid var(--gr8-field-border) !important; border-radius: var(--gr8-btn-radius) !important; background: transparent !important; } .ashby-application-form-input-education-entry-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: var(--gr8-label); font-size: 12px; font-weight: 700; text-transform: uppercase; } .ashby-application-form-input-education-entry-delete { border: 0; background: transparent; color: var(--gr8-orange); cursor: pointer; } @media (max-width: 900px) { html { background-size: 1100px auto; } body p, body li { margin-bottom: 20px; } div[class*="_navRoot_"] { padding-top: 40px; } a[class*="_navLogoLink_"] { width: 210px; height: 34px; } ul[class*="_navContainer_"] > li + li { left: 20px; } div.ashby-job-posting-brief, .ashby-job-posting-brief { padding: 16px 20px 20px !important; } .ashby-job-posting-brief .ashby-job-posting-brief-title, .ashby-job-posting-brief-title { margin-bottom: 6px !important; font-size: 20px !important; } .ashby-job-posting-brief .ashby-job-posting-brief-details, .ashby-job-posting-brief-details { font-size: 15px !important; } div[class*="_filtersContainer_"] { margin-top: 32px; margin-bottom: 34px; } [class*="_filterContainer_"] { flex: 1 1 100%; min-width: 100%; } select.ashby-job-board-filter, .ashby-job-board-filter, button[class*="_filtersOpen_"] { height: 48px; padding: 0 46px 0 20px; background-position: right 20px center; font-size: 17px; line-height: 46px; } /* --- job posting page --- */ /* below 900px the content is viewport-bound, so the heading goes back to the normal flow width */ .ashby-job-posting-heading { width: auto; max-width: none; font-size: 36px; } /* * 768–900px is still a two-column layout — Ashby only stacks the panes at * 767px. The rail therefore keeps its sticky, fixed-width behaviour here and * is merely narrowed; the stacking rules live in the 767px block below. */ /* * The pane deliberately keeps its full 181px here rather than being narrowed. * Measured: "EMPLOYMENT TYPE" is 118px wide at 12px Montserrat, and 181px * leaves exactly 125px of text room (181 - 20 pane padding - 34 section * padding - 2 borders). At 164px only 108px are left and the label wraps. * At 768px the two columns still come to 215 + ~515px, which is comfortable. */ a[class*="_tab_"], a[role="tab"] { font-size: 17px; } /* same 16px as the wide layout: the pane offset is a single token, so a different value here would put the two columns out of line */ .ashby-job-posting-description-container { margin-top: var(--gr8-tab-gap) !important; } .ashby-job-posting-description h1, .ashby-job-posting-description h2, .ashby-job-posting-description h3, .ashby-job-posting-description h4 { margin: 36px 0 18px; font-size: 18px; } .ashby-application-form-submit-button, .ashby-job-posting-description-container button, .ashby-job-posting-description-container a[href*="/application"] { min-height: 50px; padding: 14px 24px; } /* * Upload zones in the narrow two-column range (roughly 768–900px). * * The right column is about 530px here, which leaves ~470px inside the * dashed frame. A 207px button, a 30px gap and the 205px hint come to 462 — * so it fits by 8px, and the slightest change tips the hint onto a second * line. The box then inflates to ~140px and stands half empty, which is what * shows up in that band. * * The button gives up its fixed 207px and the gap halves, so the row has ~60px * of slack instead of 8 and stays on one line. `min-height: 0` means that if * it ever does wrap, the frame hugs the two lines instead of holding 84px * open underneath them. */ .ashby-application-form-input-file-dropzone { gap: 14px; min-height: 0; padding: 14px 20px; } .ashby-application-form-autofill-pane button, .ashby-application-form-autofill-uploader button, .ashby-application-form-input-file-dropzone button, .ashby-application-form-input-file-dropzone-upload button, .ashby-application-form-input-education-add { width: auto; min-width: 0; padding: 11px 16px; } .ashby-application-form-input-file-dropzone-instructions { font-size: 15px !important; } /* * THE AUTOFILL BLOCK IS POSITIONED, NOT LAID OUT. * * This is what every earlier attempt was missing. Ashby places the title, the * description and the button inside this block with `position: absolute` at * fixed offsets — the same way the Figma frame is drawn. Absolutely * positioned boxes are out of the flow: they do not shrink, do not wrap and * do not push each other aside. That is why the button could sit on top of * the title at tablet width and why the text ran out through the frame below * 300px, no matter what widths or flex rules were set on them. * * Putting the subtree back into the flow is the fix. Once everything is * static the block is an ordinary stack: title, description, button, each on * its own line and each as wide as the frame allows. * * The drag and pending overlays are the exception — they are meant to cover * the block while a file is being dropped or parsed, so they are given their * absolute positioning back on the next rule. */ /* nothing may out-grow the frame — safe to apply to everything */ .ashby-application-form-autofill-uploader, .ashby-application-form-autofill-uploader *, .ashby-application-form-autofill-input-root, .ashby-application-form-autofill-input-root * { min-width: 0 !important; max-width: 100% !important; white-space: normal !important; overflow-wrap: break-word; } /* * Only these four are put back into the flow — NOT everything in the block. * * A blanket `position: static` on the subtree also flattened Ashby's own * overlays, which are absolute on purpose and carry no documented class. Back * in the flow they stacked up as ordinary blocks and pushed the frame to some * 800px tall with the text stranded at the bottom. These four are the parts * that actually need to stack; anything else keeps whatever Ashby gave it. */ .ashby-application-form-autofill-input-base-layer, .ashby-application-form-autofill-input-title, .ashby-application-form-autofill-input-description, .ashby-application-form-autofill-uploader button, .ashby-application-form-autofill-pane button { position: static !important; } .ashby-application-form-autofill-uploader, .ashby-application-form-autofill-input-root { position: relative !important; display: block !important; height: auto !important; } .ashby-application-form-autofill-uploader button, .ashby-application-form-autofill-pane button { display: block; width: 100%; margin-top: 14px; } } /* * MOBILE — Ashby's own breakpoint. At 767px it stops laying the job posting * out as two columns and stacks the panes, so this is where the rail becomes a * full-width card. Values follow the mobile frame of the design * (Figma node 5117:116, 402px artboard). */ @media (max-width: 767px) { /* logo row: 156 x 26 centred, per the mobile frame */ a[class*="_navLogoLink_"] { width: 156px; height: 26px; } /* the back arrow loses the desktop content offset once the rail is gone */ ul[class*="_navContainer_"] > li + li { left: 16px; } .ashby-job-posting-heading { font-size: 30px; line-height: 1.06; } /* * Ashby wraps the in `._titles_…`, whose own rule is * `margin: var(--spacingLarge) calc(...) 0` — a large margin above the title * and a hard zero below it. Only the vertical values are replaced; the * horizontal calc is Ashby's gutter and has to survive. */ div[class*="_titles_"] { margin-top: 16px !important; margin-bottom: 16px !important; } /* * Full width and back in the flow: a fixed rail and a viewport-tall sticky * panel both stop making sense once the panes stack. Padding, radius, fill * and border stay exactly as on desktop — the mobile frame uses the same. */ /* one column once the panes stack; the desktop override above is !important, so the reset has to be too */ div[class*="_details_"] { grid-template-columns: 1fr !important; column-gap: 0 !important; } .ashby-job-posting-left-pane { position: static; align-self: auto; flex: 1 1 100%; width: 100%; max-width: 100%; height: auto; /* !important cancels both the desktop top offset and the 15px it gives back at the bottom — neither means anything once the panes stack */ margin: 0 0 10px !important; padding: 10px !important; overflow: visible; } /* the three detail blocks: half the gap and half the vertical padding of the mock, which reads too airy on a phone. Nothing pins here — the pane is a full-width card above the text, so there is nothing to follow. */ .ashby-job-posting-left-pane [class*="_section_"], .ashby-job-posting-left-pane [class*="_section_"] + [class*="_section_"], .ashby-job-posting-left-pane [class*="_section_"] + [class*="_section_"] + [class*="_section_"] { position: static; top: auto; z-index: auto; margin: 0 0 5px; padding: 8px 17px !important; } /* * Ashby also paints a bar on the ANCHOR — the same one that shows on hover in * the wide layout. There it was made to line up by pinning the anchor's * height; here the anchor is a stretched flex item, so its bar drops to the * bottom of the whole row and runs the full half-width. The label carries the * underline now, so the anchor's own is removed outright. */ /* * Below 767px each tab takes half the row, so the underline stretches with * the screen instead of staying a 191px stub with a chasm between the two * words. `flex: 1 1 0` splits the row evenly; the label fills its half and * the word stays centred over its own line, as on the wide layout. */ [role="tablist"], div[class*="_tabs_"], div[class*="_tabList_"], div[class*="_tabBar_"] { justify-content: space-between !important; gap: 16px !important; } a[class*="_tab_"], a[role="tab"] { flex: 1 1 0; width: auto; min-width: 0; align-self: flex-start; font-size: 17px; } .ashby-job-posting-right-pane-overview-tab, .ashby-job-posting-right-pane-application-tab { width: 100%; min-width: 0; } /* same complaint as on the wide layout: the description crowded the bar */ .ashby-job-posting-description-container { margin-top: 36px !important; } /* body copy and section headings keep their desktop sizes in the mobile frame */ body p, body li, .ashby-job-posting-description { font-size: 17px; } .ashby-job-posting-description h1, .ashby-job-posting-description h2, .ashby-job-posting-description h3, .ashby-job-posting-description h4 { margin: 30px 0 20px; font-size: 24px; line-height: 1.1; } .ashby-application-form-submit-button, .ashby-job-posting-description-container button, .ashby-job-posting-description-container a[href*="/application"] { min-height: 54px; padding: 16px 30px; font-size: 18px; } /* --- application tab --- */ .ashby-application-form-section-container { /* no gap under the last card: the privacy strip is its footer */ margin-bottom: 0; padding: 20px 16px !important; } /* the 24px that used to sit under every card, kept where it is actually needed — between two cards */ .ashby-application-form-section-container + .ashby-application-form-section-container { margin-top: 24px; padding: 16px !important; } /* the footer strip follows the card onto the narrower 16px side rails */ div[class^=" _container_"] { padding: 12px 16px !important; } .ashby-application-form-autofill-pane { margin-bottom: 24px; padding: 20px 16px !important; } /* the two-column autofill header stacks, and the buttons go full width so they cannot overflow a phone */ .ashby-application-form-autofill-input-base-layer { flex-direction: column; align-items: stretch; gap: 16px; } .ashby-application-form-autofill-input-description { max-width: none; } /* * The control is the inside the documented wrapper, and it carries * the 207px minimum — which is what was pushing through the dashed frame. * * The previous attempt here used `flex: 1 0 100%`, and that made it worse: * the `0` is flex-shrink, so the button was told it may never give up a * pixel. Whatever row it sits in, it now simply overflowed instead. What it * needs is the opposite — permission to shrink — hence `flex: 0 1 auto` with * the 207px floor lifted. That works whether or not its parent wraps, which * matters because the parent here is Ashby's and not one we can name. */ .ashby-application-form-input-file-dropzone-upload, .ashby-application-form-autofill-uploader, .ashby-application-form-input-education-add, .ashby-application-form-autofill-pane button, .ashby-application-form-autofill-uploader button, .ashby-application-form-input-file-dropzone button, .ashby-application-form-input-file-dropzone-upload button { flex: 0 1 auto; width: auto; min-width: 0; max-width: 100%; padding: 11px 16px; } /* * NOTHING INSIDE THE AUTOFILL BLOCK MAY OUT-GROW IT. * * Every attempt so far tried to name the row that holds the title and the * button and make it behave. That row is Ashby's, its class is not in the * documented list, and the guesses kept missing — which is how the title, the * description and the button all ended up running out through the right-hand * edge of the frame. * * This stops guessing. A flex item refuses to shrink below its content * because `min-width` defaults to `auto`; setting it to 0 across the whole * subtree removes that floor, and `max-width: 100%` caps everything at the * frame. Whatever the row turns out to be, its contents can now fit inside * it, and any flex box in there is free to break onto a second line. */ .ashby-application-form-autofill-uploader, .ashby-application-form-autofill-uploader *, .ashby-application-form-autofill-input-root, .ashby-application-form-autofill-input-root * { min-width: 0 !important; max-width: 100% !important; } .ashby-application-form-autofill-uploader, .ashby-application-form-autofill-input-root, .ashby-application-form-autofill-input-root > *, .ashby-application-form-autofill-input-base-layer, .ashby-application-form-input-file-dropzone { flex-wrap: wrap !important; } /* and the button takes the width it is given rather than asking for its own */ .ashby-application-form-autofill-uploader button, .ashby-application-form-autofill-pane button { width: 100%; } .ashby-application-form-input-file-dropzone { flex-direction: column; align-items: stretch; gap: 14px; min-height: 0; padding: 16px; } .ashby-application-form-input-file-dropzone-instructions { text-align: center; } } @media (max-width: 560px) { html { background-size: 760px auto; } body p, body li { margin-bottom: 16px; } div[class*="_navRoot_"] { padding-top: 32px; } div.ashby-job-posting-brief, .ashby-job-posting-brief { padding: 14px 16px 16px !important; border-radius: 12px 0 12px 0 !important; } .ashby-job-posting-brief .ashby-job-posting-brief-title, .ashby-job-posting-brief-title { margin-bottom: 6px !important; font-size: 18px !important; } .ashby-job-posting-brief .ashby-job-posting-brief-details, .ashby-job-posting-brief-details { font-size: 14px !important; } select.ashby-job-board-filter, .ashby-job-board-filter, button[class*="_filtersOpen_"] { height: 46px; padding: 0 42px 0 16px; background-position: right 16px center; background-size: 18px 10px; font-size: 15px; line-height: 44px; } [class*="_filtersVisible_"] [class*="_filtersWindow_"] { padding: 0 !important; } .ashby-job-board-heading { font-size: 24px; } /* * On a very narrow page a button's label breaks onto a second line instead of * forcing the button wider than the frame around it. Buttons default to not * wrapping, and the label often sits in a span of its own, so both the button * and whatever is inside it have to be told. `height: auto` lets the box grow * to the two lines rather than letting the text spill out of it. */ .ashby-application-form-submit-button, .ashby-application-form-input-file-dropzone-upload, .ashby-application-form-input-education-add, .ashby-application-form-autofill-pane button, .ashby-application-form-autofill-uploader button, .ashby-application-form-input-file-dropzone button, .ashby-application-form-input-file-dropzone-upload button, .ashby-application-form-input-yesno-option, .ashby-job-posting-description-container button, .ashby-job-posting-description-container a[href*="/application"], .ashby-application-form-submit-button > *, .ashby-application-form-input-education-add > *, .ashby-application-form-autofill-pane button > *, .ashby-application-form-autofill-uploader button > *, .ashby-application-form-input-file-dropzone button > *, .ashby-application-form-input-file-dropzone-upload button > * { white-space: normal !important; overflow-wrap: break-word; height: auto; line-height: 1.2; } /* * The job posting page deliberately has no overrides below 560px: the mobile * frame in the design is a 402px artboard, so the 767px block above already * describes this width and anything here would contradict it. */ } /* * Very small phones. 164px per tab plus the page gutters stops fitting once the * viewport drops below ~360px, so the underline is shortened rather than * allowed to push the row into a horizontal scroll. */ @media (max-width: 360px) { a[class*="_tab_"], a[role="tab"] { font-size: 15px; } }