/* ========================================================================= GENESIS CAREER PORTAL — the new design, over unchanged markup. Everything here is scoped to .gportal. The portal pages wrap their content in that one div and change nothing else, so no rule in this file can reach a read page and no rule on a read page can reach the portal. ========================================================================= */ .gportal{ /* ---- the token bridge ------------------------------------------------- The portal's CSS was written against the old light palette through these names. Redefining them here is what moves four pages onto the new design without touching a single selector in the rules below. */ --ink:var(--white); --text:var(--mist); --muted:var(--fog); --slate:var(--fog); --display:var(--disp); --horizon:var(--key); --crest:var(--key); --sunrise:var(--warm); --wash:color-mix(in srgb,var(--key) 13%,transparent); --page:var(--cardA); --danger:#FF9393; --graphite-500:var(--dim); display:block; } /* ---- the page furniture the portal inherited from the old stylesheet ---- */ .gportal .sec{padding:72px 0} .gportal .sec-alt{background:color-mix(in srgb,var(--key) 4%,transparent)} .gportal .wrap{max-width:1180px;margin-inline:auto;padding-inline:24px} .gportal .lede{font-size:clamp(16px,1.35vw,18.5px);line-height:1.62;color:var(--mist); max-width:64ch;font-weight:300} .gportal .small{font-size:14px;color:var(--mist);font-weight:300} .gportal .tiny{font-size:12.4px;color:var(--fog);line-height:1.6;font-weight:300} .gportal .hrule{display:flex;align-items:center} .gportal .hrule::before{content:'';flex:1;height:1px;background:var(--line)} .gportal .hrule::after{content:'';width:9px;height:9px;border-radius:50%; background:var(--warm);margin-left:-4.5px;flex:none} .gportal .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .gportal .btns{display:flex;gap:11px;flex-wrap:wrap;align-items:center} /* The portal's page header. .phead means something else on the read pages (a two-column pillar head), so it is restated here rather than inherited. */ .gportal .phead{display:block;padding:72px 0 10px;position:relative; border-bottom:1px solid var(--line)} .gportal .phead h1{font-family:var(--disp);color:var(--white);max-width:20ch; font-size:clamp(29px,3.6vw,46px);font-weight:800;letter-spacing:-.04em;line-height:1.07} .gportal .phead .eyebrow{color:var(--key)} .gportal .phead p{color:var(--mist);margin:16px 0 0;max-width:66ch;font-size:16.5px; line-height:1.62;font-weight:300} .gportal .hero-mark{display:none} /* ---- buttons ----------------------------------------------------------- */ .gportal .btn-sm{padding:8px 15px;font-size:13.2px;border-radius:9px} .gportal .btn-o,.gportal .btn-ghost,.gportal .btn-q{ background:var(--cardB);color:var(--white);border:1px solid var(--line2); display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:11px 20px;border-radius:100px;font-family:var(--body);font-size:14px; font-weight:600;cursor:pointer;text-decoration:none;transition:border-color .2s,background .2s} .gportal .btn-o:hover,.gportal .btn-ghost:hover,.gportal .btn-q:hover{ border-color:var(--key);background:color-mix(in srgb,var(--key) 12%,transparent)} .gportal .btn-q{font-size:13px;padding:8px 15px} /* ---- form fields ------------------------------------------------------- */ .gportal .field{margin-bottom:15px} .gportal .field label{display:block;font-family:var(--mono);font-size:10.5px; letter-spacing:.14em;text-transform:uppercase;color:var(--fog);margin-bottom:7px} .gportal .field label .opt{font-family:var(--body);font-size:11px;letter-spacing:0; text-transform:none;color:var(--dim)} .gportal .field input,.gportal .field select,.gportal .field textarea{ width:100%;padding:11px 13px;border:1px solid var(--line2);border-radius:11px; background:var(--cardB);color:var(--white);font:inherit;font-size:14px;outline:none} .gportal .field input:focus,.gportal .field select:focus,.gportal .field textarea:focus{ border-color:var(--key)} .gportal .field textarea{min-height:120px;resize:vertical;line-height:1.6} .gportal .field .err{font-size:12.5px;color:#FF9393;margin-top:6px;display:none} .gportal .field.bad input,.gportal .field.bad select,.gportal .field.bad textarea{ border-color:#FF9393} .gportal .field.bad .err{display:block} .gportal select option{background:#0A1838;color:#F2F7FF} .gportal .row{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:720px){.gportal .row{grid-template-columns:1fr}} /* ---- headings, inside the portal only ---------------------------------- */ .gportal h2{font-family:var(--disp);font-size:clamp(24px,2.7vw,34px);font-weight:700; letter-spacing:-.035em;color:var(--white);margin-bottom:12px;line-height:1.14} .gportal h3{font-family:var(--disp);font-size:19px;font-weight:650;letter-spacing:-.02em; color:var(--white)} .gportal h4{font-family:var(--disp);font-size:16px;font-weight:650;color:var(--white)} .gportal .eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em; text-transform:uppercase;color:var(--key)} .gportal a:not([class*="btn"]){color:var(--key)} .gportal .card{border:1px solid var(--line);border-radius:var(--rad);padding:24px; background:linear-gradient(160deg,var(--cardA),var(--cardB))} /* ===================== the portal's own rules, remapped ================== */ /* ---- the three doors -------------------------------------------------- */ .gportal .doors{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:4px}@media(max-width:820px){.gportal .doors{grid-template-columns:1fr}}.gportal .door{display:block;border:1.5px solid var(--line);border-radius:14px;padding:22px 24px; background:var(--cardB);text-decoration:none;color:inherit;transition:border-color .15s}.gportal .door:hover{border-color:var(--horizon)}.gportal .door .dk{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--muted)}.gportal .door h3{font-family:var(--display);font-size:20px;margin:8px 0 6px;color:var(--ink)}.gportal .door p{margin:0;font-size:14px;color:var(--muted);line-height:1.5}.gportal .door .go{display:inline-block;margin-top:14px;font-size:14px;font-weight:700;color:var(--horizon)}.gportal .door.quiet{background:var(--wash);border-style:dashed} /* ---- the directory ---------------------------------------------------- */ .gportal .dirbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px} /* Scoped to the real controls: an unqualified `.dirbar input` also catches the checkbox and stretches it to 150px with a border round it. */ .gportal .dirbar select,.gportal .dirbar input[type=search]{width:auto;min-width:132px;padding:8px 11px; font-size:14px;border:1px solid var(--line);border-radius:9px;background:var(--cardB)}.gportal .dirbar .chk{flex:0 0 auto;white-space:nowrap}.gportal .dirbar .chk input{width:16px;min-width:0;height:16px;padding:0;border:0}.gportal .dirbar .spacer{flex:1}.gportal .dirbar input[type=search]{flex:1 1 190px;min-width:190px} /* The second rank of filters. Hidden by default, because the first five answer most searches and every row of controls is a row of candidates pushed off the screen — which is the thing an employer actually came here to look at. */ .gportal .dirbar .more{display:none;width:100%;gap:10px;flex-wrap:wrap;align-items:center; padding-top:10px;margin-top:2px;border-top:1px solid var(--line)}.gportal .dirbar.open .more{display:flex}.gportal .dirbar .morebtn{flex:0 0 auto;background:none;border:1px solid var(--line);border-radius:8px; padding:8px 12px;font:inherit;font-size:14px;color:var(--horizon);cursor:pointer; white-space:nowrap}.gportal .dirbar .morebtn:hover{border-color:var(--horizon)}.gportal .dirbar.open .morebtn{background:var(--wash);border-color:var(--horizon)}.gportal .dirbar .clr{flex:0 0 auto;background:none;border:0;font:inherit;font-size:14px; color:var(--slate);cursor:pointer;text-decoration:underline;padding:8px 4px}.gportal .dirbar .clr[hidden]{display:none} /* The hired ribbon. Muted rather than celebratory: it is information for the employer reading the card, not a trophy. The card itself fades back so the people who ARE available hold the eye first. */ .gportal .pc.is-hired{position:relative;overflow:hidden;opacity:.72}.gportal .pc.is-hired:hover{opacity:1}.gportal .pc .hired{position:absolute;top:14px;right:-38px;transform:rotate(38deg);z-index:2; background:var(--key);color:#06142E;padding:5px 44px;font-size:11.5px;font-weight:700; letter-spacing:.17em;text-transform:uppercase;box-shadow:0 1px 5px rgba(0,0,0,.52)}.gportal .pc.is-hired .av{filter:grayscale(1)} /* The free period, said once and plainly. It is the headline of the step, so it is the biggest thing on it. */ .gportal .freebox{border:1px solid var(--line);border-left:4px solid var(--crest);border-radius:12px; background:linear-gradient(160deg,var(--cardA),var(--cardB));padding:18px 20px}.gportal .freebox .fb-t{font-size:15px;color:var(--slate)}.gportal .freebox .fb-p{font-family:var(--display);font-weight:700;font-size:34px;color:var(--ink); line-height:1.1;margin:2px 0 4px}.gportal .freebox .fb-s{font-size:14px;color:var(--slate)} /* The waiting state. A panel that says what is happening and gives somebody something to do, rather than an empty grid that reads as a dead site. */ .gportal .soonbox{border:1px solid var(--line);border-left:4px solid var(--sunrise);border-radius:14px; background:linear-gradient(160deg,var(--cardA),var(--cardB));padding:26px 28px;margin-bottom:8px}.gportal .soonbox .eyebrow{color:var(--horizon);margin-bottom:8px}.gportal .soonbox h3{font-family:var(--display);font-size:24px;color:var(--ink);margin:0 0 10px; line-height:1.2}.gportal .soonbox p{font-size:16.5px;line-height:1.55;color:var(--text);margin:0 0 18px;max-width:62ch}.gportal .soonbox-cta{display:flex;gap:10px;flex-wrap:wrap} /* On a phone the whole bar collapses to a search box and one button. Eight stacked controls is half the screen, and the half it takes is the half the candidates were in — which is the thing somebody came here to look at. Everything is still there; it is one tap away instead of always underfoot. */ @media (max-width:720px){.gportal .dirbar>select{display:none}.gportal .dirbar.open>select{display:block}.gportal .dirbar .more{border-top:0;padding-top:0;margin-top:0}.gportal .dirbar>select,.gportal .dirbar .more>select,.gportal .dirbar .more>.chk{ flex:1 1 calc(50% - 5px);min-width:0}.gportal .dirbar input[type=search]{flex:1 1 100%;min-width:0}.gportal .dirbar .spacer{display:none}.gportal .dirbar #dirCount{flex:1 1 100%;order:9} }.gportal .cnt{font-size:13px;color:var(--muted)}.gportal .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.gportal .pc{border:1px solid var(--line);border-radius:14px;background:var(--cardB);padding:18px; display:flex;flex-direction:column}.gportal .pc-top{display:flex;gap:14px;align-items:flex-start}.gportal .av{width:58px;height:58px;border-radius:50%;flex:0 0 auto;object-fit:cover; background:var(--wash);color:var(--horizon);display:flex;align-items:center; justify-content:center;font-family:var(--display);font-weight:700;font-size:19px}.gportal .pc h3{font-family:var(--display);font-size:17px;margin:0 0 2px;color:var(--ink);line-height:1.25}.gportal .pc .role{font-size:13.5px;color:var(--muted);line-height:1.4} /* Background and whether they are working: the two things an employer checks second. Quieter than the role line, because they qualify it rather than compete with it. */ .gportal .pc .sub{font-size:12.5px;color:var(--slate);line-height:1.4;margin-top:2px}.gportal .pc .sub:empty{display:none}.gportal .vb{display:inline-flex;align-items:center;gap:4px;background:color-mix(in srgb,#2ED47A 18%,transparent);color:#6FE3A6; font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;margin-top:6px}.gportal .pc .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.gportal .pc .tg{font-size:11.5px;background:var(--wash);color:var(--horizon);padding:2px 9px; border-radius:20px;white-space:nowrap}.gportal .pc .tg.alt{background:color-mix(in srgb,var(--warm) 18%,transparent);color:var(--warm)}.gportal .pc .about{font-size:13px;color:var(--muted);line-height:1.5;margin-top:12px; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.gportal .pc .foot{margin-top:auto;padding-top:14px;font-size:12.5px;color:var(--muted)}.gportal .pc .locked{margin-top:14px;padding-top:12px;border-top:1px solid var(--line); font-size:12.5px;color:var(--muted)}.gportal .pc .contact{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px}.gportal .pc .contact a{display:block;margin-bottom:3px}.gportal .note{background:var(--wash);border-left:3px solid var(--sunrise);border-radius:0 10px 10px 0; padding:14px 18px;font-size:14px;line-height:1.55;margin-bottom:22px}.gportal .empty{text-align:center;padding:44px 20px;color:var(--muted)}.gportal .skel{height:190px;border-radius:14px;background:var(--wash);animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:.55}50%{opacity:.9}} /* ---- employer pages --------------------------------------------------- */ .gportal .pane{max-width:540px}.gportal .tabs2{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:26px}.gportal .tabs2 button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 16px; font:inherit;font-weight:700;font-size:14px;color:var(--muted);cursor:pointer}.gportal .tabs2 button.on{color:var(--horizon);border-bottom-color:var(--sunrise)}.gportal .state{border:1px solid var(--line);border-radius:14px;padding:22px 24px;background:var(--cardB); margin-bottom:26px}.gportal .state h3{font-family:var(--display);font-size:19px;margin:0 0 8px}.gportal .state p{margin:0 0 8px;font-size:14.5px;color:var(--muted);line-height:1.55}.gportal .state.warn{border-left:3px solid var(--sunrise)}.gportal .state.good{border-left:3px solid #2ED47A}.gportal .state.bad{border-left:3px solid var(--danger)} /* Genesis Career Portal — only what the training site's stylesheet lacks. */ .gportal .chkgrid{display:grid;gap:9px 18px;margin-top:4px}.gportal .chkgrid.c3{grid-template-columns:repeat(3,1fr)}.gportal .chkgrid.c4{grid-template-columns:repeat(4,1fr)}@media(max-width:820px){.gportal .chkgrid.c3,.gportal .chkgrid.c4{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.gportal .chkgrid.c3,.gportal .chkgrid.c4{grid-template-columns:1fr}}.gportal .chk{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.4; cursor:pointer;padding:2px 0}.gportal .chk input{width:16px;height:16px;margin-top:2px;flex:0 0 auto;accent-color:var(--horizon)}.gportal .fs{border:0;padding:0;margin:0 0 34px} /* ------------------------------------------------------- vacancy board -- */ .gportal .freebanner{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap; border:1px solid var(--sunrise);border-radius:12px;padding:14px 18px;margin-bottom:26px; background:color-mix(in srgb,var(--warm) 11%,transparent)}.gportal .freebanner b{font-size:14px;color:var(--warm);white-space:nowrap}.gportal .freebanner span{font-size:14px;color:var(--text);line-height:1.5;flex:1;min-width:16ch}.gportal .vactop{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;margin-bottom:24px}.gportal .vacstat{border:1px solid var(--line);border-radius:12px;padding:12px 20px;background:var(--cardB)}.gportal .vacstat b{display:block;font-family:var(--display);font-size:26px;color:var(--ink); line-height:1.15}.gportal .vacstat span{font-size:11px;color:var(--slate);text-transform:uppercase;letter-spacing:.09em}.gportal .vfilt{font-size:11px;color:var(--slate);text-transform:uppercase;letter-spacing:.09em}.gportal .vfilt select{display:block;margin-top:6px;padding:9px 12px;border:1px solid var(--line); border-radius:9px;font-family:inherit;font-size:14px;background:var(--cardB);color:var(--text); text-transform:none;letter-spacing:0;min-width:180px}.gportal .vac{border:1px solid var(--line);border-radius:14px;padding:24px 26px;margin-bottom:14px; background:var(--cardB);transition:box-shadow .25s,border-color .25s}.gportal .vac:hover{border-color:var(--crest);box-shadow:0 10px 30px rgba(0,0,0,.40)}.gportal .vac .vh{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}.gportal .vac h3{font-family:var(--display);font-size:21px;color:var(--ink);margin:0;line-height:1.2}.gportal .vac .vref{font-size:11px;color:var(--muted);letter-spacing:.1em;font-family:ui-monospace, Menlo,monospace}.gportal .vac .vmeta{font-size:13px;color:var(--slate);margin-bottom:12px}.gportal .vac .vsum{font-size:14.5px;line-height:1.62;white-space:pre-wrap;margin-bottom:12px}.gportal .vac .vreq{font-size:13.5px;line-height:1.58;color:var(--slate);white-space:pre-wrap; border-left:2px solid var(--wash);padding-left:14px;margin-bottom:14px}.gportal .vtags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}.gportal .vtag{font-size:11.5px;border:1px solid var(--line);border-radius:7px;padding:3px 10px; color:var(--slate);background:var(--cardB)}.gportal .vtag.hot{border-color:var(--sunrise);background:color-mix(in srgb,var(--warm) 15%,transparent);color:var(--warm);font-weight:600}.gportal .vacfoot{border:1px solid var(--line);border-radius:16px;padding:30px 32px;margin-top:34px; background:var(--wash)}.gportal .vacfoot h3{font-family:var(--display);font-size:21px;color:var(--ink);margin-bottom:8px}.gportal .vacfoot p{font-size:14.5px;line-height:1.62;max-width:64ch;margin-bottom:18px}@media(max-width:640px){.gportal .vactop{gap:12px}.gportal .vfilt select{min-width:0;width:100%}.gportal .vfilt{flex:1 1 100%}.gportal .vac{padding:20px 18px} }.gportal .fs legend{font-family:var(--display);font-size:19px;color:var(--ink);margin-bottom:4px;padding:0}.gportal .fs .fs-note{font-size:13px;color:var(--muted);margin:0 0 20px}.gportal .step{display:flex;gap:14px;margin-bottom:18px}.gportal .step .n{flex:0 0 30px;height:30px;border-radius:50%;background:var(--wash);color:var(--horizon); font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center; font-family:var(--body)}.gportal .step h4{margin:4px 0 3px;font-size:15px}.gportal .step p{margin:0;font-size:14px;color:var(--muted);line-height:1.5}.gportal .two{display:grid;grid-template-columns:1fr 1fr;gap:18px}@media(max-width:640px){.gportal .two{grid-template-columns:1fr}}.gportal .filebox{border:1px dashed var(--line);border-radius:10px;padding:18px}.gportal .filebox input{border:0;padding:0}.gportal .reqnote{font-size:12.5px;color:var(--muted);margin-top:6px}.gportal .otherbox{margin-top:10px}.gportal .otherbox input{max-width:420px}.gportal .otherbox .reqnote{margin-top:5px} /* ---- plan cards, used on the landing page and the billing step -------- */ .gportal .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:6px}@media(max-width:760px){.gportal .plans{grid-template-columns:1fr}}.gportal .plan{position:relative;border:1.5px solid var(--line);border-radius:14px;padding:20px; background:var(--cardB);text-align:left;font:inherit;cursor:pointer;display:block;width:100%}.gportal .plan:hover{border-color:var(--horizon)}.gportal .plan:focus-visible{outline:2px solid var(--crest);outline-offset:2px}.gportal .plan.on{border-color:var(--horizon);box-shadow:0 0 0 3px var(--wash)}.gportal .plan .pl{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:var(--muted)}.gportal .plan .pp{font-family:var(--display);font-size:31px;font-weight:700;color:var(--ink); line-height:1.05;margin:8px 0 2px;font-variant-numeric:tabular-nums}.gportal .plan .pm{font-size:13px;color:var(--muted)}.gportal .plan .save{display:inline-block;margin-top:11px;background:var(--wash);color:var(--horizon); font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px}.gportal .plan .save.best{background:var(--sunrise);color:#2A1600}.gportal .plan .tick{position:absolute;top:16px;right:16px;width:20px;height:20px;border-radius:50%; border:2px solid var(--line);display:flex;align-items:center;justify-content:center; font-size:12px;color:#06142E}.gportal .plan.on .tick{background:var(--horizon);border-color:var(--horizon)}.gportal .vatline{font-size:12.5px;color:var(--muted);margin-top:14px}.gportal .vatwarn{font-size:13px;color:var(--danger);margin-top:14px;display:flex;gap:8px; align-items:flex-start;line-height:1.45}.gportal .vatwarn b{font-weight:700}.gportal .sumrow{display:flex;justify-content:space-between;gap:14px;padding:9px 0; border-bottom:1px solid var(--line);font-size:14.5px}.gportal .sumrow:last-of-type{border-bottom:0}.gportal .sumrow.tot{font-weight:700;font-size:16px;color:var(--ink);border-top:2px solid var(--ink); border-bottom:0;margin-top:4px;padding-top:12px}.gportal .ok{background:var(--wash);border-radius:12px;padding:22px 24px;margin-top:8px}.gportal .ok .ref{font-family:var(--mono,ui-monospace,monospace);font-size:19px;font-weight:700; color:var(--ink);letter-spacing:.02em} /* ====================================================================== After the ported rules, so these win on equal specificity. Each one is a place where a light-theme rule does not simply recolour onto a dark one. ====================================================================== */ /* A