/* * Worksider 2.0. * * The rule this file is written against: the homepage IS the list of jobs. * No hero, no gradient, no three feature cards, no testimonial carousel. A * student opening a Telegram link on a phone should see roles in the first * screenful, because that is the only thing they came for. * * One accent colour, thin dividers, no shadows, no rounded cards. */ /* * THE COLOURS, AND BOTH THEMES OF THEM. * * Every colour on this site is named here and nowhere else. Nothing below this * block writes a hex code: a rule asks for --line or --bg-soft and is handed * whichever of the two themes the reader is in. That is the only way a second * theme stays true, because a literal buried nine hundred lines down is a rule * that only ever had one. * * WHY light-dark() AND NOT A SECOND BLOCK UNDER A MEDIA QUERY. A media query * means writing the whole list three times: once light, once for the system * preference, once for the manual override. Three lists drift, and the one * that drifts is the one nobody is looking at. light-dark() resolves against * `color-scheme`, so the list is written once and the toggle is a single * attribute on . * * THE PLAIN VALUES COME FIRST AND @supports REPLACES THEM. A browser too old * for light-dark() keeps the light ones and sees exactly the site that was * here before any of this, which is a perfectly good thing to be shown. It is * the same trade the forms make with the (i) buttons: ship the state that * works, fold it away only where it is understood. This block is the only * place in the file where a value is written twice, and that is what it is * for. */ :root { /* Brand. --brand is the mark and accents; --brand-ink is anything a person has to READ: #09AAD4 on white is about 2.7:1 and fails AA. In the dark theme the pair swaps jobs, because a colour dark enough to read on white is too dark to see on navy. */ --brand: #09AAD4; --brand-ink: #0A7FA6; --brand-wash: #F7FCFE; /* the faintest wash of it */ /* Text. */ --ink: #001D38; /* headings and body text: the old navy */ --muted: #5B6670; /* meta, labels, anything secondary */ /* Surfaces. --bg is the page; --surface is anything that has to read as sitting ON the page: an input, a menu, a card, a chip. They are the same white in the light theme and deliberately are not in the dark one, which is the whole reason they are two names. */ --bg: #FFFFFF; --bg-soft: #F5F7FA; /* soft blocks, row hover, tinted boxes */ --surface: #FFFFFF; --logo-bg: #FFFFFF; /* STAYS LIGHT: see the note on .row-logo */ /* Lines. */ --line: #E6E9EE; /* dividers and the default border */ --line-hover: #CBD4DE; /* a border under the pointer */ --line-file: #C7D0DB; /* the dashed edge of a file input */ --line-dash: #D5DCE5; /* the dashed edge of an empty state */ --box-br: #C2CBD6; /* the square a checkbox draws itself */ /* The one other colour, and it earns it. */ --pay: #0B7A45; /* pay figures */ /* The primary button, and the solid ink fill behind an avatar or a chosen chip. Both put text on a filled shape, so both have to name the colour of that text: white stops being the right answer the moment the fill is a pale one, which in the dark theme it is. */ --btn-bg: #0A7FA6; --btn-bg-hover: #096A8C; --btn-fg: #FFFFFF; --fill: #001D38; --fill-fg: #FFFFFF; --avatar-bg: #001D38; /* the same fill, turned down: see .avatar */ --avatar-fg: #FFFFFF; --t-fg: #FFFFFF; /* text on a Learn AI tier colour */ /* Four tints. Each pairs a readable ink with a wash pale enough in the light theme, and deep enough in the dark one, to sit under 16px of stroke without muddying it. */ --sky: #0A7FA6; --sky-bg: #E6F5FA; --sky-br: #09AAD4; --leaf: #0B7A45; --leaf-bg: #E7F4EC; --leaf-br: #56B288; --plum: #6244A3; --plum-bg: #EFEBFA; --plum-br: #9C86D2; --sun: #9A5B0C; --sun-bg: #FBF1E2; --sun-br: #D8A660; /* States: something worked, something failed, something is waiting. */ --good: #14603A; --good-bg: #F0F9F4; --good-br: #BFE3CD; --bad: #8A1C25; --bad-bg: #FDF1F2; --bad-br: #F3C9CD; --bad-line: #D0555F; /* the border of the box an error is about */ --bad-wash: #FFFBFB; /* and its fill */ --bad-ic: #C24450; /* the mark beside the sentence */ --warn: #8A5B00; --warn-ink: #6B4A00; /* the verify bar, which runs darker */ --warn-bg: #FFF6E5; --warn-br: #F5D9A0; --state-wait-br: #EFD8B2; /* the dashboard's amber pill */ --info: #0A6C8C; --info-bg: #E8F7FC; --info-br: #B9E6F3; --flag: #7A4A08; /* all 25 levels: allowed to shout once */ --flag-bg: #FDF3E7; --flag-br: #F0D9B5; /* Somebody else's colours, which do not get a second theme. Telegram blue is Telegram blue, and the dev bar is meant to be unmissable. */ --tg: #229ED9; --tg-hover: #1B8ABF; --tg-fg: #FFFFFF; --devbar-bg: #3B2C00; --devbar-fg: #FFD97A; /* Shadows and focus rings. A shadow tinted with the page's own navy disappears on a navy page, so the dark theme uses plain black, and more of it. */ --shadow: rgba(0, 29, 56, .10); --shadow-soft: rgba(0, 29, 56, .08); --ring: rgba(9, 170, 212, .18); --ring-strong: rgba(9, 170, 212, .25); --bad-ring: rgba(208, 85, 95, .2); --w: 920px; /* text stays readable; the list never sprawls */ --r: 4px; } /* * The two glyphs that are drawn rather than coloured: the chevron on a select * and the tick a checkbox fills with. Both are an SVG in a data URI, which is * an opaque string with the colour baked into it, so neither can take a token * the way everything else here does. They are the one thing on the site that * needs the media query as well as the attribute. */ :root { --chevron-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235B6670' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); --chevron-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239DB2C4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); --tick-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8.5l4 4 7-9'/%3E%3C/svg%3E"); --tick-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230B1724' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8.5l4 4 7-9'/%3E%3C/svg%3E"); --sel-chevron: var(--chevron-light); --opt-tick: var(--tick-light); } @supports (color: light-dark(#fff, #000)) { :root { /* BOTH VALUES, so light-dark() has something to resolve against and so the browser paints its own scrollbars, form controls, spinners and autofill to match. Without this line the page goes dark and the scrollbar does not. */ color-scheme: light dark; --brand: light-dark(#09AAD4, #22B8E0); --brand-ink: light-dark(#0A7FA6, #5CCBEB); --brand-wash: light-dark(#F7FCFE, #12303F); --ink: light-dark(#001D38, #E7EFF6); --muted: light-dark(#5B6670, #9DB2C4); --bg: light-dark(#FFFFFF, #0B1724); --bg-soft: light-dark(#F5F7FA, #132434); --surface: light-dark(#FFFFFF, #16283A); --logo-bg: light-dark(#FFFFFF, #E8EEF4); --line: light-dark(#E6E9EE, #22394E); --line-hover: light-dark(#CBD4DE, #36566F); --line-file: light-dark(#C7D0DB, #36566F); --line-dash: light-dark(#D5DCE5, #2F4A62); --box-br: light-dark(#C2CBD6, #3E5E79); --pay: light-dark(#0B7A45, #3FD08A); --btn-bg: light-dark(#0A7FA6, #22B8E0); --btn-bg-hover: light-dark(#096A8C, #52CDEE); --btn-fg: light-dark(#FFFFFF, #04222E); --fill: light-dark(#001D38, #E7EFF6); --fill-fg: light-dark(#FFFFFF, #0B1724); --avatar-bg: light-dark(#001D38, #2A4A66); --avatar-fg: light-dark(#FFFFFF, #E7EFF6); --t-fg: light-dark(#FFFFFF, #0B1724); --sky: light-dark(#0A7FA6, #5CCBEB); --sky-bg: light-dark(#E6F5FA, #12313F); --sky-br: light-dark(#09AAD4, #2E8AAC); --leaf: light-dark(#0B7A45, #5FD69C); --leaf-bg: light-dark(#E7F4EC, #123027); --leaf-br: light-dark(#56B288, #3A7F60); --plum: light-dark(#6244A3, #B6A1E8); --plum-bg: light-dark(#EFEBFA, #241F3A); --plum-br: light-dark(#9C86D2, #6A57A8); --sun: light-dark(#9A5B0C, #E8A94E); --sun-bg: light-dark(#FBF1E2, #332711); --sun-br: light-dark(#D8A660, #8A6A2E); --good: light-dark(#14603A, #5FD69C); --good-bg: light-dark(#F0F9F4, #123027); --good-br: light-dark(#BFE3CD, #3A7F60); --bad: light-dark(#8A1C25, #FFA1A8); --bad-bg: light-dark(#FDF1F2, #341A1D); --bad-br: light-dark(#F3C9CD, #7A3C43); --bad-line: light-dark(#D0555F, #E0707A); --bad-wash: light-dark(#FFFBFB, #2A1417); --bad-ic: light-dark(#C24450, #E0707A); --warn: light-dark(#8A5B00, #E8B84E); --warn-ink: light-dark(#6B4A00, #F0C877); --warn-bg: light-dark(#FFF6E5, #33280F); --warn-br: light-dark(#F5D9A0, #8A7030); --state-wait-br: light-dark(#EFD8B2, #8A7030); --info: light-dark(#0A6C8C, #6BD2F0); --info-bg: light-dark(#E8F7FC, #12313F); --info-br: light-dark(#B9E6F3, #2E8AAC); --flag: light-dark(#7A4A08, #E8B84E); --flag-bg: light-dark(#FDF3E7, #33280F); --flag-br: light-dark(#F0D9B5, #8A7030); --tg: light-dark(#229ED9, #229ED9); --tg-hover: light-dark(#1B8ABF, #3FB2E8); --tg-fg: light-dark(#FFFFFF, #FFFFFF); --devbar-bg: light-dark(#3B2C00, #3B2C00); --devbar-fg: light-dark(#FFD97A, #FFD97A); --shadow: light-dark(rgba(0, 29, 56, .10), rgba(0, 0, 0, .55)); --shadow-soft: light-dark(rgba(0, 29, 56, .08), rgba(0, 0, 0, .45)); --ring: light-dark(rgba(9, 170, 212, .18), rgba(34, 184, 224, .30)); --ring-strong: light-dark(rgba(9, 170, 212, .25), rgba(34, 184, 224, .42)); --bad-ring: light-dark(rgba(208, 85, 95, .2), rgba(224, 112, 122, .30)); } /* The override. Absent, everything above follows the system; present, it wins, and it is what the control in the header sets. `only` rather than a bare single value, so the browser does not offer to invert it back. */ :root[data-theme="light"] { color-scheme: only light; } :root[data-theme="dark"] { color-scheme: only dark; } } /* ---------------------------------------------------- which way the toggle points */ /* * TWO BUTTONS SHIP, AND CSS SHOWS ONE. The server cannot know which way round * to draw this: with no cookie set the theme is whatever the reader's phone * says, and the phone does not tell the server. So the markup carries both * ("go dark" and "go light") and the rules below reveal whichever one the * reader is not already in. No script, and never the wrong arrow. */ /* Dark by system preference, unless the reader has said otherwise. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sel-chevron: var(--chevron-dark); --opt-tick: var(--tick-dark); } :root:not([data-theme="light"]) .theme-to-dark { display: none; } :root:not([data-theme="light"]) .theme-to-light { display: inline-flex; } } /* Dark because the reader said so. */ :root[data-theme="dark"] { --sel-chevron: var(--chevron-dark); --opt-tick: var(--tick-dark); } :root[data-theme="dark"] .theme-to-dark { display: none; } :root[data-theme="dark"] .theme-to-light { display: inline-flex; } /* And back, for a reader on a dark phone who asked this site for light. */ :root[data-theme="light"] { --sel-chevron: var(--chevron-light); --opt-tick: var(--tick-light); } :root[data-theme="light"] .theme-to-dark { display: inline-flex; } :root[data-theme="light"] .theme-to-light { display: none; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* NOTHING ON A PHONE DRAGS SIDEWAYS. Every piece of the site is built to fit its width, and the rows that scroll sideways (the tabs, the logo strip) clip their own content. This is the guarantee on top of that: whatever some future element or some long unbroken string does, the page itself never pans left and right under a thumb. clip, NOT hidden. hidden on html and body turns body into a scroll box of its own, and the sticky header then sticks to body instead of the screen, which is to say it stops sticking. clip cuts the overflow without making a scroll box. A browser too old for clip (Safari before 16) gets hidden on body alone, which it hands up to the viewport and so leaves the header alone as well. */ body { overflow-x: hidden; } @supports (overflow-x: clip) { html, body { overflow-x: clip; } } body { margin: 0; background: var(--bg); color: var(--ink); /* 17px, and no sentence on the site is set below 14. Only the things that annotate rather than read stay smaller: pill badges, uppercase labels. The first version set a 16px base and then undercut it everywhere, rows at 14, meta at 13, prose at 15.5, and people told us it was small. They were right. A job board is read on a phone, at arm's length, often by someone who is tired, so the type has to be legible before it is tidy. Every size in this file moved up one rung together, so the hierarchy that was already working is the hierarchy that is still here. */ font: 17px/1.55 Inter, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; /* Pay figures line up in a column of rows, so digits must not wobble. */ font-variant-numeric: tabular-nums; /* * MOST OF THIS SITE IS TEXT SOMEONE ELSE TYPED, and none of it can be trusted * to contain a space. A pasted tracking URL, a run of "testtesttest", a long * German compound: by default the browser refuses to break any of them, the * line runs off the side, and the whole page gets a horizontal scrollbar. It * is inherited, so one declaration here covers the job description, the * listing title, a company name and every form of it we have not written yet. * * break-word, not anywhere: break-word leaves minimum content width alone, so * it cannot change how any flex item or table column is sized. Somewhere a * long word sits inside a flex or table cell, the cell's own width is the * thing that overflows and this rule cannot reach it, so those few places ask * for anywhere by name. */ overflow-wrap: break-word; } a { color: var(--brand-ink); text-decoration: none; } a:hover { text-decoration: underline; } .wrap { max-width: var(--w); margin: 0 auto; padding: 0 16px; } /* ------------------------------------------------------------------ header */ .site-head { border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 10; } .site-head .wrap { display: flex; align-items: center; gap: 16px; min-height: 64px; } .brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; } .brand:hover { text-decoration: none; } .brand svg { width: 22px; height: 22px; color: var(--brand); display: block; } /* The header's right side. One plain link, one button, one avatar: the button is the thing a company came to do, and it should not look like the link next to it. 22px of gap because 14 had them reading as one blurred item. */ .head-links { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 15.5px; } .head-link { color: var(--ink); } .btn-sm { padding: 7px 14px; font-size: 15px; } /* Three words that must stay on one line. Wrapped, this button doubles the height of the header, which on a 320px phone is most of what is above the first role. */ .head-links .btn-sm { white-space: nowrap; } /* Icons sit on the text baseline rather than floating above it. */ .ic { width: 16px; height: 16px; vertical-align: -3px; flex: 0 0 auto; } /* ---------------------------------------------------------- the theme toggle */ /* * A form, not a script. It posts to /theme, which sets a cookie and sends the * reader back to the page they were on, so this works with JavaScript off like * everything else in the header. theme.js then intercepts it and flips the * attribute on without the round trip, which is the only part of this * that needs script and the only part that is allowed to need it. * * Both buttons are in the markup; which one is drawn is decided by the rules * at the top of this file, because the server cannot know what the reader's * phone is set to. */ .themer { display: flex; margin: 0; } .theme-btn { align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; } .theme-btn:hover { color: var(--ink); background: var(--bg-soft); } .theme-btn:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 1px; } .theme-btn .ic { width: 18px; height: 18px; vertical-align: 0; } /* The default pair: a light page offers the dark one. Every rule that changes this is up with the colours, where the theme is worked out. */ .theme-to-dark { display: inline-flex; } .theme-to-light { display: none; } /* The footer copy of the control, which is the only one on a small phone. The buttons are .linkish, so they take the footer's own colour and size and read as the links they sit beside rather than as three more buttons. */ .foot-theme { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 6px 0 0; } .themer-foot, .themer-auto form { display: inline; } .foot-theme .linkish { color: var(--muted); text-decoration: underline; } .foot-theme .linkish:hover { color: var(--ink); } /* Getting back to "whatever my phone says" once you have overridden it. It is in the markup on every page and hidden until there is something to undo, which the server decides and theme.js takes over once it has flipped the theme without a reload. [hidden] wins over this, see the rule that says so. */ .themer-auto { display: inline-flex; align-items: baseline; gap: 6px; } /* This used to disappear below 380px, because the header was full before the toggle existed: brand, Learn AI, the button and an avatar already overflowed a 360px phone. Learn AI has since moved into the phone menu, which bought back the room, so the toggle stays and runs one size down to be sure of it. The footer keeps its copy in words regardless: it is the only place "match system" can live, since an icon that sets an explicit theme has no third state to cycle into. */ @media (max-width: 400px) { .themer:not(.themer-foot) .theme-btn { width: 30px; height: 30px; } .themer:not(.themer-foot) .theme-btn .ic { width: 17px; height: 17px; } } /* ------------------------------------------------------------ user menu */ .usermenu { position: relative; } .usermenu summary { list-style: none; cursor: pointer; display: flex; align-items: center; } .usermenu summary::-webkit-details-marker { display: none; } .avatar { width: 32px; height: 32px; border-radius: 50%; /* --avatar-bg, NOT the --fill the chosen filter chip uses, though they are the same navy in the light theme. A chip that is on has to shout, and inverting it to near-white in the dark theme is the honest translation of that. This circle is only saying whose account it is, and inverted it became the brightest thing on the page for no reason at all. */ background: var(--avatar-bg); color: var(--avatar-fg); font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; letter-spacing: 0; } .usermenu[open] .avatar { box-shadow: 0 0 0 3px var(--ring-strong); } .usermenu summary:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; border-radius: 999px; } /* THE SAME MENU FOR SOMEBODY WITH NO ACCOUNT. It is what lets Learn AI and Sign in leave the bar on a phone, because until now the only menu on the site belonged to the avatar and a signed-out reader had nowhere for them to go. Same
, same panel, three lines instead of a letter. It exists only at the width where those links are hidden. */ .menu-more { display: none; } .burger { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; color: var(--muted); } .menu-more[open] .burger { color: var(--ink); background: var(--bg-soft); } .burger .ic { width: 20px; height: 20px; vertical-align: 0; } @media (max-width: 640px) { .menu-more { display: block; } .burger { width: 30px; height: 30px; } } .usermenu-panel { position: absolute; right: 0; top: calc(100% + 10px); min-width: 190px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; /* The one shadow on the site. A menu floating over content is the single case where a border alone does not read as "above". */ box-shadow: 0 6px 24px var(--shadow); padding: 6px; z-index: 20; } .usermenu-who { margin: 0; padding: 6px 10px 8px; font-size: 13.5px; color: var(--muted); border-bottom: 1px solid var(--line); overflow: hidden; text-overflow: ellipsis; } .usermenu-panel a, .usermenu-panel .linkish { display: block; width: 100%; text-align: left; padding: 9px 10px; color: var(--ink); font-size: 15px; border-radius: 4px; /* The panel widens to fit a line rather than wrapping it. "Get found by companies" is a shade over the 190px and split in two, it read as two items. */ white-space: nowrap; } .usermenu-panel a:hover, .usermenu-panel .linkish:hover { background: var(--bg-soft); text-decoration: none; } /* -------------------------------------------------------------------- tabs */ .tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); /* The scrollbar would otherwise sit under the tabs on Windows and eat 8px of a phone screen for a row that only scrolls when it has to. */ scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } /* THE ROW SCROLLS, AND NOW SAYS SO. On a phone the last tab was cut clean at the edge, which reads as the page being too wide rather than as more tabs. A fade to the page colour pinned to the right edge says "there is more". It is a sticky flex item, not a mask on the row: a mask would fade the row's bottom rule out too. Sticky keeps it at the visible edge while there is more to scroll, and at the end of the row it settles into its own place after the last tab, so the last tab is never left under it. */ .tabs::after { content: ""; position: sticky; right: 0; flex: 0 0 28px; background: linear-gradient(90deg, transparent, var(--bg)); pointer-events: none; } .tab { padding: 10px 12px; white-space: nowrap; color: var(--muted); font-size: 16px; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab:hover { text-decoration: none; color: var(--ink); } .tab[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--brand); } /* ----------------------------------------------------------------- filters */ .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; font-size: 15px; color: var(--muted); } .chip { display: inline-block; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--surface); font-size: 14px; line-height: 1.3; } .chip:hover { text-decoration: none; border-color: var(--brand-ink); } .chip.on { background: var(--fill); border-color: var(--fill); color: var(--fill-fg); } .count { font-size: 15px; color: var(--muted); padding: 12px 0 0; } .count strong { color: var(--ink); } /* ------------------------------------------------------------------- rows */ /* * The rules and the hover fill run 10px WIDER than the text column on each * side. A hairline can stop level with a word and still look deliberate; a * filled band cannot, so hovering a row painted a block whose edge touched the * title on one side and the age on the other. Bleeding the list outward buys * that room without moving a single word: every row pads the 10px straight * back, so the logo and the title stay lined up with the tabs and the filters * above them. */ .rows { border-top: 1px solid var(--line); margin: 0 -10px; } /* The empty state is a box of its own, so it stays on the text column. */ .rows > .empty-box { margin: 4px 10px 0; } .row { position: relative; display: flex; gap: 12px; padding: 14px 10px; border-bottom: 1px solid var(--line); } .row:hover { background: var(--bg-soft); } /* * The whole row opens the listing. The hover shade already said it would, and * a thumb aiming at a phone-width row should not have to find the title. The * title's link stretches over the row instead of an wrapping all of it, * so a screen reader still hears one short link, not the logo, company and * every fact read out as its name. Plain CSS, so it works before any JS does. */ .row-title::after { content: ""; position: absolute; inset: 0; } .row-title:focus-visible { outline: none; } .row-title:focus-visible::after { outline: 2px solid var(--brand-ink); outline-offset: -2px; } /* * --logo-bg, AND IT STAYS LIGHT IN THE DARK THEME. This square holds a file * somebody else drew, and almost every company logo is drawn as dark marks on * an assumed white page. Put one on a navy tile and half of them vanish: not * dimmed, gone, because the mark and the tile are the same colour. So the tile * keeps its own light background in both themes and the logo keeps the * surroundings it was made for. The same reasoning covers .co-logo and the * product marks on the Learn AI page. */ .row-logo { flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: var(--r); object-fit: contain; background: var(--logo-bg); margin-top: 2px; } .row-logo-blank { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; font-weight: 600; } .row-main { min-width: 0; flex: 1; } /* Title and age share one line. min-width:0 is what lets the title shrink and wrap normally instead of forcing the row wider than the screen. */ .row-head { display: flex; align-items: baseline; gap: 10px; } .row-title { font-size: 17.5px; font-weight: 600; color: var(--ink); flex: 1; min-width: 0; margin-bottom: 2px; } .row-company { color: var(--muted); font-size: 15px; } /* The facts line. Dot separators are added by CSS so the markup stays a plain list and an empty field simply disappears instead of leaving a stray dot. */ .row-facts { margin-top: 4px; font-size: 14.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 0; } /* The dot TRAILS its item rather than leading the next one. As a ::before it landed at the start of a wrapped line, which read as a bullet list. */ .row-facts span:not(:last-child)::after { content: " ยท"; margin: 0 6px 0 6px; color: var(--line); } .row-facts .pay { color: var(--pay); font-weight: 600; } .row-age { flex: 0 0 auto; color: var(--muted); font-size: 14px; white-space: nowrap; } .badge { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; background: var(--bg-soft); color: var(--muted); border: 1px solid var(--line); vertical-align: 1px; } .badge.featured { background: var(--warn-bg); border-color: var(--warn-br); color: var(--warn); } .badge.ai { background: var(--info-bg); border-color: var(--info-br); color: var(--info); } /* ------------------------------------------------------------------ pieces */ .empty { padding: 32px 0; color: var(--muted); } .cta-band { margin: 24px 0; padding: 18px 20px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r); font-size: 16px; line-height: 1.55; } /* The button is a second thing, not a word in the last sentence. Side by side where there is room, stacked underneath where there is not. */ .cta-split { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .cta-split .cta-copy { max-width: 60ch; } .cta-split .tg-btn { margin-top: 0; flex: 0 0 auto; } /* Above the tabs the band is a stop on the way to the list, not a closing ask, so it sits tighter and the tabs keep their own air underneath. */ .cta-top { margin: 16px 0 6px; } .btn { display: inline-block; padding: 10px 16px; background: var(--btn-bg); color: var(--btn-fg); border-radius: var(--r); font-weight: 600; font-size: 16px; border: 0; cursor: pointer; } .btn:hover { text-decoration: none; background: var(--btn-bg-hover); } .btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); } .site-foot { margin-top: 40px; border-top: 1px solid var(--line); padding: 20px 0 40px; color: var(--muted); font-size: 15px; } .site-foot a { color: var(--muted); } .site-foot .tagline { color: var(--ink); font-weight: 600; } /* ------------------------------------------------------------------- phone */ @media (max-width: 640px) { /* Only 16px of page gutter here, so the bleed shrinks rather than crowding the edge of the screen. */ .rows { margin: 0 -6px; } .rows > .empty-box { margin: 4px 6px 0; } .row { gap: 10px; padding: 14px 6px; } .row-age { font-size: 13px; } .head-links { gap: 10px; font-size: 14px; } .brand { font-size: 18.5px; } } /* ----------------------------------------------------------- filter form */ .filters label { display: inline-flex; flex-direction: column; gap: 3px; } .f-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .filters select { font: inherit; font-size: 16px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); /* 205, not 190: the option labels are the same words at a larger size now, and a truncated category is a filter nobody trusts. */ max-width: 205px; } .filters .f-check { flex-direction: row; align-items: center; gap: 6px; font-size: 15px; color: var(--ink); align-self: end; padding-bottom: 6px; } .filters .btn { align-self: end; padding: 7px 14px; font-size: 15px; } .f-clear { align-self: end; padding-bottom: 8px; font-size: 15px; } /* ------------------------------------------------------------ detail page */ .page-h { font-size: 26px; margin: 20px 0 4px; letter-spacing: -0.01em; } .page-sub { color: var(--muted); margin: 0 0 8px; } .section-h { font-size: 18.5px; margin: 28px 0 8px; } .detail h1 { font-size: 28px; margin: 20px 0 4px; letter-spacing: -0.01em; } .detail-company { color: var(--muted); margin: 0 0 16px; } .notice { background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--muted); padding: 10px 12px; margin: 16px 0; font-size: 15.5px; } .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 20px; margin: 0 0 20px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .facts dd { margin: 2px 0 0; font-size: 16px; } .facts .pay { color: var(--pay); } .facts .pay-hidden { color: var(--muted); font-style: italic; font-size: 15px; } .prose { font-size: 17px; line-height: 1.65; max-width: 68ch; } /* A job description, drawn by ws_desc_render(). The h2s are the posting form's four boxes, so every listing reads in the same order; the h3s are the writer's own "Must have:" lines inside one of them. */ .desc h2 { font-size: 18.5px; margin: 28px 0 6px; } .desc h2:first-child { margin-top: 4px; } .desc h3 { font-size: 17px; margin: 18px 0 4px; } .desc p { margin: 0 0 12px; } .desc ul, .desc ol { margin: 0 0 12px; padding-left: 22px; } .desc li { margin-bottom: 6px; padding-left: 2px; } .desc li::marker { color: var(--muted); } .apply { margin: 24px 0 8px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .apply-note { color: var(--muted); font-size: 14.5px; } .warn { color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 24px; } @media (max-width: 640px) { .filters { gap: 10px; } .filters select { max-width: none; width: 100%; } .filters label { width: 47%; } .detail h1 { font-size: 23px; } } /* -------------------------------------------------------------- forms */ .form-page { max-width: 420px; margin: 28px auto 0; } .form-page h1 { font-size: 24px; margin: 0 0 6px; } .form-page label { display: block; margin: 14px 0; font-size: 15px; color: var(--muted); } .form-page input[type=email], .form-page input[type=password], .form-page input[type=text], .form-page input[type=url], .form-page input[type=number], .form-page textarea, .form-page select { display: block; width: 100%; margin-top: 4px; font: inherit; /* 16px is a floor, not a taste: below it, iOS zooms the whole page the moment the field takes focus, and the person then has to pinch back out to see the rest of the form. Every field, select and search box on the site holds it. */ font-size: 16px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); background: var(--surface); } .form-page textarea { min-height: 150px; resize: vertical; line-height: 1.5; } /* The optional description boxes: room for the two-line example, and the corner handle for more. Four full-height boxes read as an essay to write. */ .form-page textarea.short { min-height: 96px; } .form-page .hint { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); } .btn.block { display: block; width: 100%; text-align: center; margin-top: 18px; } /* The Google mark keeps its own colours and its own size, so it needs to be let out of the 16px the rest of the icons share. */ .btn.google .ic-g { width: 18px; height: 18px; vertical-align: -4px; margin-right: 10px; } .btn.ghost.google:hover { background: var(--bg-soft); } .or { text-align: center; color: var(--muted); font-size: 14px; margin: 12px 0; } .muted { color: var(--muted); font-size: 15px; } /* -------------------------------------------- which account am I making * * The two options above the signup form, one of them visibly the chosen one. * They are links, so this is a pair of states rather than a control: the chosen * one is a and draws a tick, the other is an . * * STACKED, NOT SIDE BY SIDE, at every width. .form-page is 420px, so two * columns would leave each option about 205px, and a 30px mark plus the padding * takes 67 of them: the sentence underneath then wraps to five lines and the * pair ends up taller than stacking it was. Full width also gives each option * the same shape as the .choice cards on the posting form, which is the other * place on the site where somebody picks one of a few things and carries on. */ .rolepick { display: grid; gap: 10px; margin: 14px 0 20px; } .rolepick-opt { display: flex; align-items: flex-start; gap: 11px; padding: 12px 13px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); } .rolepick-body { flex: 1; min-width: 0; } a.rolepick-opt:hover { text-decoration: none; border-color: var(--line-hover); background: var(--bg-soft); } a.rolepick-opt:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; } /* The chosen one. A tinted edge and wash rather than a solid fill, because the unchosen option next to it still has to be readable and inviting: this is a choice being shown, not a button that has been pressed. */ .rolepick-opt.on { border-color: var(--brand-ink); background: var(--brand-wash); /* The same inset ring the paid-tier cards use for "this one", so a chosen thing looks chosen the same way twice on the site. */ box-shadow: inset 0 0 0 1px var(--brand-ink); } .rolepick-name { display: block; font-weight: 600; font-size: 15.5px; } .rolepick-opt.on .rolepick-name { color: var(--brand-ink); } .rolepick-why { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); } /* The tick sits at the far edge of the chosen row. 4px lines it up with the cap height of the name rather than the middle of the whole card, which is where flex would otherwise leave it as the description grows. */ .rolepick-tick { margin: 4px 0 0 auto; color: var(--brand-ink); } .error { background: var(--bad-bg); border: 1px solid var(--bad-br); color: var(--bad); padding: 10px 12px; border-radius: var(--r); font-size: 15.5px; } .ok { background: var(--good-bg); border: 1px solid var(--good-br); color: var(--good); padding: 10px 12px; border-radius: var(--r); font-size: 15.5px; } /* The honeypot. Off-screen rather than display:none, because some bots skip fields that are explicitly hidden. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* -------------------------------------------------------- posting form */ .form-page.wide { max-width: 640px; } .form-page fieldset { border: 0; border-top: 1px solid var(--line); padding: 4px 0 8px; margin: 22px 0 0; } .form-page legend { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; padding-right: 8px; } .form-page fieldset.inline { border-top: 0; margin-top: 10px; } .two, .three { display: flex; gap: 14px; } .two > label, .three > label, .two > .col, .three > .col { flex: 1; min-width: 0; } .check, .tier { display: flex; align-items: flex-start; gap: 8px; font-size: 15.5px; color: var(--ink); } .check { display: inline-flex; align-items: center; margin-right: 14px; } .check input, .tier input { width: auto; margin: 3px 0 0; } .tier { margin: 10px 0; } .tier span { flex: 1; } @media (max-width: 640px) { .two, .three { flex-direction: column; gap: 0; } } /* ------------------------------------------------------------- tables */ .tbl { width: 100%; border-collapse: collapse; font-size: 15.5px; margin: 8px 0 20px; } .tbl th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); } .tbl td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; } /* A cell holds a Telegram error or a note you typed yourself, and the column is sized from the longest unbreakable word in it, so a long one stretches the table past the page instead of wrapping. anywhere rather than the break-word on body, because only anywhere shrinks that measurement. */ .tbl td, .tbl th { overflow-wrap: anywhere; } .muted-sm { display: block; color: var(--muted); font-size: 14px; } .linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--brand-ink); cursor: pointer; } .linkish:hover { text-decoration: underline; } @media (max-width: 640px) { .tbl th:nth-child(3), .tbl td:nth-child(3) { display: none; } } .badge.ok-badge { background: var(--good-bg); border-color: var(--good-br); color: var(--good); } /* The small "optional" hint inside a label. */ .opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: 13px; } /* The pay box on a company page: real figures that company published itself. */ .paybox { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin: 18px 0; background: var(--bg-soft); } .paybox h2 { font-size: 15px; margin: 0 0 8px; color: var(--muted); font-weight: 600; } .paybox-main { font-size: 32px; font-weight: 600; color: var(--pay); margin: 0; letter-spacing: -0.02em; } .paybox-main span { font-size: 16px; font-weight: 400; color: var(--muted); margin-left: 6px; } .paybox-sub { margin: 6px 0 0; font-size: 15px; color: var(--muted); } .page-prose h2 { font-size: 18.5px; margin: 26px 0 6px; } .page-prose p { margin: 0 0 12px; } .co-head { display: flex; align-items: center; gap: 12px; } .co-logo { width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--r); background: var(--logo-bg); flex: 0 0 44px; } /* ------------------------------------------------------------- applicants */ .applicant { border-bottom: 1px solid var(--line); padding: 16px 0; } .applicant-head { display: flex; align-items: center; gap: 10px; } .applicant-facts { color: var(--muted); font-size: 15px; margin: 4px 0 0; } .applicant-note, .applicant-answer { font-size: 15.5px; margin: 10px 0 0; padding-left: 12px; border-left: 2px solid var(--line); } /* The listing title is a flex item beside its badge and age, so the wrapping baseline on body is not enough on its own: the item is sized from the longest unbreakable word in it, and one long word makes the item itself wider than the row. anywhere is the value that shrinks that measurement, and min-width lets the item actually take the smaller size. */ .applicant-head strong { min-width: 0; overflow-wrap: anywhere; } .applicant-answer .q { display: block; color: var(--muted); font-size: 14px; margin-bottom: 2px; } .applicant-actions { font-size: 15px; margin: 10px 0 0; } .applicant-buttons { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .applicant-buttons .btn { padding: 6px 12px; font-size: 14.5px; } /* the apply panel */ .apply-form { margin: 24px 0 8px; } .apply-form label { display: block; font-size: 15px; color: var(--muted); margin: 12px 0; } .apply-form textarea, .apply-form input[type=file] { display: block; width: 100%; margin-top: 4px; font: inherit; font-size: 16px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r); } /* Colours as .form-page gives its fields. Without them a dark-mode browser paints its own grey box, which went unnoticed while the note started empty and is the first thing anyone sees now it arrives filled with their intro. */ .apply-form textarea { color: var(--ink); background: var(--surface); line-height: 1.5; resize: vertical; } .apply-form details { margin: 8px 0 16px; } .apply-form summary { cursor: pointer; color: var(--brand-ink); font-size: 15px; } .apply-form .hint { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); } .devbar { background: var(--devbar-bg); color: var(--devbar-fg); font-size: 13px; text-align: center; padding: 4px 8px; letter-spacing: 0.02em; } .filters input[type=search] { font: inherit; font-size: 16px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); min-width: 220px; } /* The phone rule above gives every filter label 47%, which is right for two selects side by side and wrong for a search box: the 220px input spilled out of its 47% label and ran under the Search button. A search is one field and its button, so the field takes whatever the button leaves. The button is built to the field's exact height (same line, padding and border), or it sits 8px short and reads as a separate thing. */ .filters .f-search + .btn { font-size: 16px; line-height: 1.55; padding: 6px 14px; border: 1px solid transparent; } @media (max-width: 640px) { .filters .f-search { flex: 1; width: auto; min-width: 0; } .filters .f-search input { width: 100%; min-width: 0; } } .pager { display: flex; gap: 18px; padding: 18px 0 0; font-size: 16px; } /* The trust rail. It was jammed against the tabs with no air; it is the first thing a visitor reads, so it gets its own band. */ .rail { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 16px 0 18px; margin: 0; font-size: 14.5px; color: var(--muted); border-bottom: 1px solid var(--line); } .rail-item { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); } .rail-item .ic { color: var(--brand); opacity: .9; } .rail strong { color: var(--ink); font-weight: 600; } a.rail-item:hover { color: var(--ink); text-decoration: none; } a.rail-item:hover strong { text-decoration: underline; } /* THE RAIL NUMBERS COUNT UP ONCE, on load (assets/js/count.js). The server writes the real figure and that is what shows without the script or with less motion asked for. Where a script is going to run, the figure is held back until it does, so nobody sees 640 flick to 0 and climb again; and if the script never arrives, the hold lets go by itself after 1.5s. Tabular figures and a width held by the script keep the words beside the number from shuffling sideways while it climbs. */ .count-up { font-variant-numeric: tabular-nums; transition: opacity .2s ease; } .count-up.is-counting { display: inline-block; text-align: right; } @media (scripting: enabled) and (prefers-reduced-motion: no-preference) { .count-up:not(.is-counted) { opacity: 0; animation: count-late 0s 1.5s forwards; } } @keyframes count-late { to { opacity: 1; } } /* THE LOGOS UNDER THE RAIL are the same band, so the rail hands its bottom rule down to them rather than drawing a line between two kinds of proof. Every logo sits on an identical tile. Twelve brands are twelve different shapes and colours; twelve equal boxes in two aligned rows is what stops that reading as a mess. The tile is --surface, so it goes dark with the page, and the marks that would vanish on it (anything drawn in black, and Seedly's and Yahoo's colours, which fall under 3:1 there) swap to a white twin; see .proof-on-dark below. Inside the tile, the height is a base times --k, the area correction index.php works out from the file. */ .rail:has(+ .proof) { border-bottom: 0; padding-bottom: 14px; } /* minmax(0, 1fr), NOT THE DEFAULT auto COLUMN. An auto column grows to fit the widest thing in it, and once the row slides that is the whole doubled track, well over a thousand pixels: the band pushed the page sideways and the right-hand fade ended up off the screen. */ .proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0 0 18px; border-bottom: 1px solid var(--line); } .proof-row { display: flex; align-items: center; gap: 20px; } .proof-label { flex: 0 0 12.5em; font-size: 13.5px; color: var(--muted); white-space: nowrap; } .proof-window { flex: 1 1 auto; min-width: 0; } /* Where the row fits, the six tiles share it equally, so the two rows line up column for column and the copy for the slide is not needed. */ .proof-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .proof-echo { display: none; } .proof-tile { display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .proof-tile img { display: block; width: auto; max-width: 100%; height: calc(18px * var(--k, 1)); object-fit: contain; } /* WHICH TWIN SHOWS follows the same three cases as the theme toggle at the top of this file: dark by system preference unless told light, or dark because told so. All of it sits inside the same @supports as the dark tokens, because a browser without light-dark() never gets a dark tile, and a white logo on its white tile would be no logo at all. */ .proof-tile .proof-on-dark { display: none; } @supports (color: light-dark(#fff, #000)) { @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .proof-tile .proof-on-light { display: none; } :root:not([data-theme="light"]) .proof-tile .proof-on-dark { display: block; } } :root[data-theme="dark"] .proof-tile .proof-on-light { display: none; } :root[data-theme="dark"] .proof-tile .proof-on-dark { display: block; } } a.proof-tile { transition: border-color .15s ease, transform .15s ease; } a.proof-tile:hover { border-color: var(--line-hover); transform: translateY(-1px); } /* WHERE SIX TILES DO NOT FIT, THE ROW SLIDES, which is what the old site's carousel did, minus the dots and arrows. The track holds the row twice and moves by exactly one copy, so the loop never jumps; each list carries its own trailing gap as padding so the seam is the same 8px as every other gap. The two rows run opposite ways, and a finger or pointer on a row holds it still so a logo can be tapped. The fade at each edge is a mask, which reads only alpha: black there is "opaque", not a colour. */ @media (max-width: 860px) { .proof-window { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 16px, black calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent, black 16px, black calc(100% - 16px), transparent); } .proof-track { display: flex; width: max-content; animation: proof-slide 40s linear infinite; } .proof-row + .proof-row .proof-track { animation-direction: reverse; } .proof-logos { display: flex; padding-right: 8px; } .proof-tile { width: 100px; } .proof-window:hover .proof-track, .proof-window:focus-within .proof-track { animation-play-state: paused; } } @keyframes proof-slide { to { transform: translateX(-50%); } } /* On a phone the label keeps its place on the left but folds onto two short lines, so both rows together cost about what the rail does. */ @media (max-width: 640px) { .rail:has(+ .proof) { padding-bottom: 12px; } .proof { padding-bottom: 14px; } .proof-row { gap: 10px; } .proof-label { flex-basis: 6.4em; white-space: normal; font-size: 12px; line-height: 1.3; } .proof-tile { width: 88px; height: 38px; padding: 0 8px; } .proof-tile img { height: calc(15px * var(--k, 1)); } } /* Less motion asked for: nothing slides, and the row becomes one a thumb can scroll instead. */ @media (prefers-reduced-motion: reduce) { .proof-track { animation: none; } .proof-echo { display: none; } .proof-window { overflow-x: auto; } a.proof-tile { transition: none; } a.proof-tile:hover { transform: none; } } /* The tabs follow the rail, so they need their own breathing room. */ .tabs { margin-top: 4px; } .filters { padding-top: 14px; } .page-prose ul { margin: 0 0 14px; padding-left: 20px; } .page-prose li { margin-bottom: 8px; } @media (max-width: 640px) { /* The plain links fold into the menu; the button and avatar stay. */ .head-links { gap: 14px; } .head-links .head-link { display: none; } .rail { gap: 6px 16px; padding: 12px 0 14px; font-size: 13.5px; } } /* Specificity, not order: `.usermenu-panel a` is (0,1,1) and beats a bare `.only-phone` at (0,1,0), so the phone-only link showed on desktop too. */ .usermenu-panel .only-phone { display: none; } @media (max-width: 640px) { .usermenu-panel .only-phone { display: block; } } /* --------------------------------------------------------------- admin */ .kpis { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 8px; } .kpis > div { flex: 1 1 130px; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; font-size: 13.5px; color: var(--muted); } .kpis span { display: block; font-size: 24px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; } .applicant-buttons input[type=text] { font: inherit; font-size: 16px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r); min-width: 200px; } /* Admin sections are scanned, not read: empty ones should not take a screenful. */ .kpis + h2.sec-head { margin-top: 18px; } .sec-head + .empty-box { padding: 14px 16px; } /* Not an error and not a success: something to do before something else works. */ .verifybar { background: var(--warn-bg); border-bottom: 1px solid var(--warn-br); color: var(--warn-ink); font-size: 14.5px; } .verifybar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 16px; } .verifybar .linkish { color: var(--warn-ink); text-decoration: underline; font-size: 14.5px; } /* A struck-through list price. Only ever shown when it is genuinely higher than what is being charged, see ws_price_is_discounted(). */ .was { text-decoration: line-through; color: var(--muted); margin-right: 3px; } /* The join button. Telegram blue, because a link to Telegram that looks like every other link gets read as one. */ .tg-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; background: var(--tg); color: var(--tg-fg); border-radius: var(--r); font-weight: 600; font-size: 15.5px; margin-top: 8px; } .tg-btn:hover { text-decoration: none; background: var(--tg-hover); } .tg-btn .ic { width: 17px; height: 17px; vertical-align: -3px; } .cta-band strong { display: block; margin-bottom: 3px; font-size: 17.5px; } @media (max-width: 720px) { .cta-split { display: block; } .cta-split .cta-copy { max-width: none; } .cta-split .tg-btn { margin-top: 14px; } } /* THE TOP BAND ON A PHONE IS A SIGNPOST, NOT A PITCH. It sits above the tabs, before the reader has seen a single role, and at full height it was most of the first screen: a headline, three lines of copy and a button, roughly 270px of a 650px viewport spent saying something they can act on in four words. So it loses the middle sentence, the button loses its last two words, and what is left is the hook, the number and somewhere to tap, on one row. The band under the list keeps every word. By the time a reader is down there they have seen the roles, and the long version is the close. */ @media (max-width: 640px) { .cta-top { display: flex; align-items: center; gap: 12px; margin: 12px 0 2px; padding: 11px 13px; font-size: 14.5px; line-height: 1.4; } .cta-top .cta-long { display: none; } .cta-top strong { display: inline; margin: 0; font-size: 14.5px; } .cta-top .tg-btn { margin-top: 0; flex: 0 0 auto; padding: 8px 13px; font-size: 14.5px; } .cta-top .tg-btn .ic { width: 16px; height: 16px; } .cta-top .tg-more { display: none; } } /* --------------------------------------------------- the posting form */ /* Jump links. A long form with no landmarks reads as longer than it is. */ .form-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .form-jump a { font-size: 14px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; } .form-jump a:hover { text-decoration: none; color: var(--ink); border-color: var(--brand-ink); } /* Sections get room to be sections. */ .form-page fieldset[id] { scroll-margin-top: 70px; padding-top: 10px; } .form-page fieldset[id] > legend { font-size: 14px; color: var(--ink); } /* Optional detail, folded away until wanted. */ .form-page .more { margin: 14px 0 4px; } .form-page .more summary { cursor: pointer; color: var(--brand-ink); font-size: 15px; padding: 4px 0; } .form-page .more[open] summary { margin-bottom: 6px; } /* The recommended choice should look like one without shouting. */ .tier:has(input:checked) { background: var(--bg-soft); border-radius: var(--r); } .tier { padding: 8px 10px; margin: 4px -10px; } /* Specificity again: `.form-page label` is (0,1,1) and beat a bare `.check`, so the Open-to boxes stacked one per line instead of sitting in a row. */ .form-page label.check { display: inline-flex; align-items: center; width: auto; } .form-page label.tier { display: flex; } .form-page fieldset.inline label.check { margin: 4px 16px 4px 0; } /* [hidden] MUST WIN. Any display rule, including `.form-page label { display: block }`, beats the browser's own [hidden] { display: none }, so a field the script hides stays on screen. This is why the Area box was still there for a remote role. */ [hidden] { display: none !important; } /* The jump nav follows you down a long form: on a phone, section 5 is a long way from the top and going back meant scrolling blind. */ .form-jump { position: sticky; /* BELOW THE SITE HEADER, which is itself sticky at top: 0. At 0 this did stick, invisibly, underneath it. 64px is .site-head's min-height. */ top: 64px; z-index: 5; background: var(--bg); padding: 10px 0; margin-bottom: 0; box-shadow: 0 6px 6px -6px var(--shadow-soft); } @media (max-width: 640px) { .form-jump { top: 56px; } } /* -------------------------------------------------- choice cards */ /* A radio with a paragraph beside it reads as a wall. A card with a price on the right reads as a choice, which is what it is. */ .choice { display: flex; align-items: flex-start; gap: 12px; padding: 14px; margin: 10px 0; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; background: var(--surface); } /* SPECIFICITY, FOR THE THIRD TIME. `.form-page label` is (0,1,1) and beats a bare class at (0,1,0), so every display rule aimed at a