on job cards now (link to the company page) — keep it laying
out like the it replaced. */
display: block;
font-size: 0.65rem;
color: rgba(185,185,185,1);
}
.job-body {
padding: 0.5rem;
padding-top: 0rem;
padding-bottom: 0.6rem;
color: rgba(140,140,140,1);
flex: 1;
}
.job-description {
font-size: 0.7rem;
color: rgba(185,185,185,1);
}
.tags {
flex-wrap: wrap;
padding-bottom: 0.65rem;
padding-top: 0.5rem;
}
.tag {
width: 33.3%;
text-align: left;
padding-bottom: 0.15rem;
font-size: 0.5rem;
color: rgba(100,100,100,1);
}
.tag-text {
font-size: 0.6rem;
color: white;
}
.tag-rank {
font-size: 0.8rem;
}
/* Estimated tags (visa, soft language levels): AI-extracted and hedged, flagged
with an ⓘ that reveals a "confirm with the employer" note on hover/long-press.
The help cursor signals there's more to read. */
.tag--est {
cursor: help;
}
.tag-info {
font-size: 0.5rem;
color: rgba(150, 150, 150, 1);
/* Raise the ⓘ visually WITHOUT expanding the line box (which `vertical-align:
super` does, pushing the tag text down). line-height:0 + relative offset
shifts the glyph but keeps it out of layout flow. */
vertical-align: baseline;
position: relative;
top: -0.35em;
line-height: 0;
}
/* Custom tooltip for the hedged tags (see functions/tagtip.js). Appended to
and positioned via JS so it escapes the card's overflow:hidden, and it
appears instantly instead of the native `title`'s ~1s delay. */
.tag-tip {
position: fixed;
z-index: 9999;
max-width: 220px;
padding: 0.4rem 0.55rem;
border-radius: 0.3rem;
background: rgba(20, 20, 20, 0.97);
color: rgba(235, 235, 235, 1);
font-size: 0.7rem;
line-height: 1.35;
text-align: left;
box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.45);
pointer-events: none;
opacity: 0;
transition: opacity 0.08s ease;
}
.tag-tip.is-visible {
opacity: 1;
}
.job-footer {
width: 91.5%;
border-top: 0.031rem solid rgba(40,40,40,1);
padding: 0.4rem;
}
.job-footer-item {
}
.grid-container {
}
.grid {
display: grid;
padding-left: 1rem;
padding-right: 1rem;
/* size of one "square" */
grid-template-columns: repeat(auto-fill, minmax(14.375rem, 1fr));
gap: 0.6rem;
/* this makes everything auto-pack */
grid-auto-flow: dense;
padding-top: 0.6rem;
padding-bottom: 0vh;
}
.card {
background: #151419;
border-radius: 0rem;
padding: 0rem;
min-height: 1.875rem;
min-width: 1.875rem;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
border: 0.125rem solid var(--brand-fill);
}
/* size definitions */
.size-1x1 {
grid-column: span 1;
grid-row: span 1;
}
.size-2x1 {
grid-column: span 2;
grid-row: span 1;
}
.size-1x2 {
grid-column: span 1;
grid-row: span 2;
}
.size-2x2 {
grid-column: span 2;
grid-row: span 2;
}
/* Container element - essential for positioning the tooltip text */
.tooltip {
position: relative;
display: inline-block; /* Helps prevent the popup from affecting surrounding elements' layout */
}
/* The actual popup content - hidden by default */
.tooltip .tooltip-box {
visibility: hidden;
width: 11.25rem;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 0.375rem;
padding: 0.3125rem 0.125rem;
position: absolute; /* Position the tooltip text absolutely */
z-index: 1; /* Ensure the popup appears in front of other elements */
top: 0%; /* Position above the hovered element */
right: 120%;
opacity: 0;
font-size: 0.8rem;
transition: opacity 0.3s; /* Add a smooth fade-in effect */
}
.tooltip .tooltip-above {
top: -250%; /* Position above the hovered element */
left: -110%;
width: 6.25rem;
}
/* Show the tooltip text when the user hovers over the container */
.tooltip:hover .tooltip-box {
visibility: visible;
opacity: 1;
}
/* Basic CSS for the range slider */
.slider-wrapper {
width: 12.1875rem;
font-family: sans-serif;
position: relative;
}
.values {
margin-bottom: 0.5rem;
font-weight: bold;
}
.range-container {
position: relative;
height: 1.75rem;
/* The container handles all dragging (functions/salaryRange.js): a touch
drag must move the thumb, never scroll the page. */
touch-action: none;
cursor: pointer;
}
input[type="range"] {
position: absolute;
width: 100%;
/* All pointer input goes to .range-container, which routes the drag to the
right slider in JS (salaryRange.js). Re-enabling pointer-events on the
thumb pseudo-element does NOT work on iOS Safari touch, so the thumbs
themselves must stay inert. Keyboard (Tab + arrows) still works. */
pointer-events: none;
appearance: none;
background: none;
}
input[type="range"]::-webkit-slider-thumb {
appearance: none;
margin-bottom: -0.625rem;
height: 0.625rem;
width: 0.625rem;
background: var(--brand);
border-radius: 1.25rem;
cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
margin-bottom: -0.625rem;
height: 0.625rem;
width: 0.625rem;
background: var(--brand);
border-radius: 1.25rem;
cursor: pointer;
border: none;
}
.track {
position: absolute;
height: 0.1875rem;
width: 100%;
background: rgba(130,130,130,1);
top: 50%;
transform: translateY(-50%);
border-radius: 0.125rem;
}
.range-highlight {
position: absolute;
height: 0.1875rem;
background: var(--brand);
top: 50%;
transform: translateY(-50%);
border-radius: 0.125rem;
}
/* moving value labels */
.value{
position:absolute;
top: 1.25rem;
font-size: 0.75rem;
transform:translateX(-50%);
background:#000;
color:#fff;
padding: 0.125rem 0.375rem;
border-radius:0.375rem;
white-space:nowrap;
}
.slider-wrapper-single{
position:relative;
}
.slider-wrapper-single .value{
position:absolute;
top: 1.25rem;
left:0;
transform:translateX(-50%);
}
.slider-wrapper-single .range-container{
position:relative;
}
.job-like-image-container.is-liked img {
transform: scale(1.05);
transition: transform 0.15s ease;
}
/* hidden state */
.sidebar-hidden {
transform: translateX(100%);
opacity: 0;
pointer-events: none;
width: 0.0625rem;
overflow: hidden !important;
}
@media only screen and (max-width: 568px) {
.hide-on-mobile {
display: none !important; /* !important helps override other styles */
}
}
.privacy-policy {
max-width: 38rem;
line-height: 1.55;
}
.privacy-policy .c11 { /* page title */
font-size: 3rem;
font-weight: bold;
line-height: 1.1;
margin-bottom: 0.2rem;
}
.privacy-policy .c4 { /* paragraphs + "last updated" */
font-size: 1.05rem;
color: rgba(190,190,190,1);
margin: 0.5rem 0;
}
.privacy-policy .c6 { /* section headings — brand accent, like the site */
font-size: 1.5rem;
font-weight: 600;
color: var(--brand);
margin-top: 2rem;
margin-bottom: 0.35rem;
}
.privacy-policy .c9 { /* bullet lists (list-style was reset globally) */
font-size: 1.05rem;
color: rgba(210,210,210,1);
list-style: disc;
padding-left: 1.4rem;
margin: 0.4rem 0;
}
.privacy-policy .c9 li {
margin: 0.3rem 0;
}
.privacy-policy a { /* links + long URLs used as link text */
color: var(--brand);
overflow-wrap: anywhere;
}
/* ===== Listing page — extracted from inline styles ===== */
.filters-sidebar {
padding-top: 1rem;
padding-bottom: 2rem;
padding-left: 1rem;
}
.results-count {
font-size: 3.8rem;
font-weight: bold;
}
.sidebar-title {
font-size: 1.1rem;
font-weight: 500;
width: 100%;
color: rgba(120,120,120,1);
}
.privacy-link {
padding-top: 0;
font-size: 0.8rem;
font-weight: 500;
width: 100%;
color: rgba(120,120,120,1);
}
.salary-header {
display: flex;
flex-direction: row;
align-items: flex-end;
}
.salary-header-label {
color: white;
}
.salary-values {
color: white;
display: flex;
flex-direction: row;
margin-bottom: -2px;
}
.salary-sep {
padding-left: 0.25rem;
padding-right: 0.25rem;
font-size: 1.2rem;
font-weight: bold;
color: rgba(160,160,160,1);
}
.minLabel {
font-size: 1.2rem;
font-weight: bold;
color: white;
}
.maxLabel {
font-size: 1.2rem;
font-weight: bold;
}
.filter-search-input {
width: 5.35rem; /* match the checkbox-button width exactly */
padding-top: 0.1rem;
padding-bottom: 0.1rem;
}
.header-logo-wrap {
padding-left: 1rem;
}
.header-main {
/* The 42rem basis is what the two header groups (links+description |
toggles+auth) need to sit side by side. When the space next to the logo
drops below it, the whole block wraps to its own full-width row UNDER the
logo (the .header-container wraps) — keeping the two groups side by side
there, instead of the groups stacking while pinned beside the logo. On
truly narrow screens the groups then stack within the row (see
.header-top-row). */
flex: 1 1 42rem;
display: flex;
flex-direction: column;
}
.header-row {
flex: 1;
display: flex;
flex-direction: row;
}
.header-info-title {
color: var(--brand);
font-weight: bold;
}
.header-info-desc {
color: rgba(125,125,125,1);
font-size: 0.9rem;
}
/* Top header row: two columns — left is the section links stacked over the
description text (their original arrangement), right is the rank toggles.
Tops aligned; the right column's height can't push the description down.
Responsive: nowrap keeps the two groups side by side at EVERY width — the
left group (flex: 1 1 22rem, min-width: 0) shrinks so its description wraps to
more lines, rather than the toggles dropping onto their own row. The right
group (flex: 0 0 auto) never shrinks, so the toggles stay intact. */
.header-top-row {
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: nowrap;
column-gap: 0.5rem;
row-gap: 0.8rem;
}
.header-left {
flex: 1 1 22rem;
display: flex;
flex-direction: column;
min-width: 0;
margin-left: 0.4rem;
margin-bottom: 0.7rem;
}
/* Inside the left column the info block spans the full column width, so undo
the flex-end alignment it used in the old side-by-side header-row (there its
box was content-width and the alignment was moot) — keep the text left. */
.header-left .header-info {
align-items: flex-start;
}
/* Right column of the top row: the rank toggles, then the auth links tucked
under them (next to the "Logged in" badge the PERSONAL toggle carries) —
in their own line so they can't push the toggles around. */
.header-buttons-wrap {
display: flex;
flex-direction: column;
align-items: flex-end;
padding-right: 2rem;
padding-left: 1rem;
/* Never shrink below content; margin-left keeps the group pinned right both
beside the left group and after wrapping onto its own row. */
flex: 0 0 auto;
margin-left: auto;
}
.rank-toggle {
background-color: rgba(20,20,20,1);
padding-left: 1.2rem;
padding-right: 1.2rem;
padding-bottom: 0.5rem;
padding-top: 0;
/* Inactive by default; globalfilters.js adds .rank-toggle--active to the
selected one (PUBLIC on load). */
opacity: 0.5;
color: rgba(110,110,110,1);
}
.rank-toggle--active {
opacity: 1;
color: var(--brand);
}
/* "YOUR PROFILE" header button (showProfileButton pages). It's an action, not a
ranking toggle, so it always reads as active/clickable rather than greyed. */
.rank-toggle--profile {
opacity: 1;
color: var(--brand);
cursor: pointer;
}
/* Anchor for the session badge below (.profile-badge). PERSONAL carries it on
the jobs pages; PUBLIC carries it where there's no PERSONAL (e.g. companies). */
.rank-toggle--personal,
.rank-toggle--public {
position: relative;
}
/* Session badge ("Account needed" / "Logged in"): sits flush under the
PERSONAL button, right edges aligned. */
.profile-badge {
position: absolute;
top: 100%;
right: 0;
}
.profile-badge .badge-link {
margin: 0;
display: block;
}
/* Auth entry buttons start hidden; session.js reveals the correct set on load
(driven by the localStorage session hint) so there's no flash of wrong state. */
#edit-profile,
#open-profile-edit,
#open-profile-login,
#nav-edit-profile,
#nav-register,
#nav-login {
display: none;
}
.badge-link {
margin: 0.25rem;
}
.scroll-sentinel {
height: 0.9375rem;
}
/* ===== Privacy policy page — extracted from inline styles ===== */
.privacy-logo-pane {
height: 100vh;
flex: 1;
background-color: rgba(7,7,7,1);
display: flex;
align-items: center;
justify-content: center;
}
.privacy-logo {
height: 16vw;
max-height: 12rem;
}
.privacy-content-pane {
height: 100vh;
overflow-y: auto;
flex: 1.61803398875;
display: flex;
flex-direction: column;
align-items: center;
}
.privacy-body {
padding: 3rem;
text-align: left;
overflow-wrap: anywhere; /* never let long URLs force horizontal scroll */
}
/* Narrow devices: drop the decorative logo pane and let the content take the
full width and scroll with the page instead of in a fixed-height sub-pane. */
@media (max-width: 760px) {
.privacy-logo-pane {
display: none;
}
.privacy-content-pane {
height: auto;
overflow: visible;
flex: 1;
}
.privacy-body {
padding: 1.5rem 1.2rem 3rem;
}
.privacy-policy .c11 {
font-size: 2.2rem;
}
.privacy-policy .c6 {
font-size: 1.3rem;
}
}
/* ===== Profile card (renderProfile) — extracted from inline styles =====
Appended last so these override the shared .job-* / .card base rules. */
.profile-card {
height: 14.5rem;
width: 15rem;
display: flex;
align-items: center;
position: relative;
/* Fixed-height card: clip is the final backstop so nothing can spill past the
box. Combined with the pinned footer below and the clamped description, the
footer is always inside the card and never pushed out of view. */
overflow: hidden;
}
.profile-image-container {
position: relative;
margin-top: 0.3rem;
flex-shrink: 0;
}
.profile-image {
height: 3.7rem;
width: 3.7rem;
/* User avatars: circular crop. Companies override below. */
border-radius: 100rem;
object-fit: cover;
transition: box-shadow 0.15s ease, opacity 0.15s ease;
}
/* Company logos: no circular crop (it clipped square logos), shown whole
(contain) with a little inner padding so the mark doesn't touch the edge.
The icon AREA stays the same 3.7rem as user avatars. */
.profile-image--company {
border-radius: 0.2rem;
object-fit: contain;
padding: 0.3rem;
box-sizing: border-box;
}
/* Company subtitle (the domain) links to the company's website. Keep the
subtitle's muted look; reveal the link on hover. */
.profile-company-link {
display: inline-block;
text-decoration: none;
}
.profile-company-link:hover,
.profile-company-link:focus-visible {
color: var(--brand);
text-decoration: underline;
}
/* In edit mode the icon is a click-to-upload target (the file input overlays
it). Show a pointer and an orange ring that follows the icon's rounded shape
so it's obviously interactive. */
.profile-card.editable .profile-image-container {
cursor: pointer;
}
.profile-card.editable .profile-image-container:hover .profile-image {
box-shadow: 0 0 0 2px var(--brand-ring);
opacity: 0.85;
}
.image-upload-overlay {
position: absolute;
inset: 0;
/* Pin the size explicitly: the global `input { width: 13.5rem }` rule would
otherwise win over inset's right:0, stretching the invisible click target
way past the avatar (clicking blank card space opened the file picker). */
width: 100%;
height: 100%;
min-height: 0;
opacity: 0;
cursor: pointer;
}
.profile-header {
align-items: center;
text-align: center;
width: 88%;
flex-shrink: 0;
}
.w-full {
width: 100%;
}
.profile-body {
display: flex;
align-items: center;
flex-direction: column;
width: 100%;
/* Allow this region to shrink below its content and clip the overflow, so in
the rare case everything above is maxed out (2-line subtitle + 2 rows of
tags + 4-line description) the description gives up its last line(s) instead
of spilling over the footer. Normal content still shows all four lines. */
min-height: 0;
overflow: hidden;
}
.profile-tags {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 82%;
/* Tighter than the shared .tags spacing — reclaims vertical room above the
description so four lines fit without pushing the footer down. */
padding-top: 0.3rem;
padding-bottom: 0.4rem;
}
.profile-desc-wrap {
display: flex;
align-items: center;
text-align: center;
width: 88%;
/* Spacing between subtitle and description, restoring the gap the (removed)
tags row used to provide. */
margin-top: 0.5rem;
}
/* Profile-scoped spacing trims (job cards keep the shared .job-* spacing): pull
a little off the title gap, the body's bottom pad and the footer pad so the
4-line description fits the fixed-height card. */
.profile-card .job-body {
padding-bottom: 0.3rem;
}
/* Title/subtitle vertical rhythm applied to BOTH view and edit modes, so
toggling editing never moves them: the icon→title gap lives on the header and
the title→subtitle gap on the title. In edit mode the chip only adds the
(non-layout) outline + background on top of this exact same box. */
.profile-card .profile-header {
margin-top: 0.28rem;
}
.profile-card .profile-header .job-title {
padding-top: 0.04rem;
margin-bottom: 0.12rem;
}
.profile-card .profile-footer {
padding: 0.3rem;
}
.profile-footer {
border-top: 0;
align-items: flex-end;
margin-bottom: 0.1rem;
/* Pin to the bottom of the card and never shrink, so the salary/contact row
stays visible regardless of how much the fields above it take up. */
margin-top: auto;
flex-shrink: 0;
}
.profile-salary {
font-weight: bold;
font-size: 1.1rem;
}
.profile-points-label {
font-weight: 400;
font-size: 0.6rem;
}
.profile-loc-badge {
position: absolute;
top: 0.25rem;
left: 0.25rem;
}
.items-center {
align-items: center;
}
.profile-loc-icon {
height: 0.7rem;
width: 0.7rem;
margin-top: 0.1rem;
}
/* ===== Editable profile card fields =====
Each editable field reserves the same "chip" box — rounded + horizontally
padded — in BOTH view and edit modes (applied by class here), so toggling
editing only paints the chip's background + outline (neither affects layout)
and nothing on the card reflows. The horizontal padding being present in view
mode too means the description wraps to the exact same lines in both. */
.profile-card .profile-header .job-title,
.profile-card .profile-header .job-company,
.profile-card .job-description,
.profile-card .profile-tag-text,
.profile-card .profile-loc-badge .job-company {
padding-left: 0.3rem;
padding-right: 0.3rem;
border-radius: 0.3rem;
}
.profile-card.editable [contenteditable] {
cursor: text;
outline-offset: 0;
min-height: 0.9em;
overflow-wrap: anywhere;
transition: outline-color 0.15s ease, background-color 0.15s ease;
}
.profile-card.editable [contenteditable]:hover {
background: rgba(255,255,255,0.08);
}
.profile-card.editable [contenteditable]:focus {
outline: 1px solid var(--brand-ring);
background: var(--brand-ring-soft);
}
/* Placeholders for a brand-new profile (e.g. registered without a resume) so
the card never looks empty. CSS-only on truly-:empty fields — never DOM
text, so a save can't pick placeholder copy up as real values. (Requires
the fields to render TIGHT, no whitespace inside the element.) */
.profile-card.editable [data-edit="title"]:empty::before {
content: "Your name";
color: rgba(120, 120, 120, 1);
}
.profile-card.editable [data-edit="subtitle"]:empty::before {
content: "Your role or headline";
color: rgba(120, 120, 120, 1);
}
.profile-card.editable [data-edit="description"]:empty::before {
content: "Tell companies about yourself — a couple of lines is plenty.";
color: rgba(120, 120, 120, 1);
}
/* Same tag min-width in both modes so short tags don't change the tag row's
wrapping when editing turns on. */
.profile-card .profile-tag-text {
min-width: 1.5rem;
}
/* The main fields keep their full width (and centered text) even when empty, so
the editable area is always a stable, clickable box rather than collapsing to
its content. The location badge only needs a small min-width. */
.profile-card.editable .profile-header .job-title,
.profile-card.editable .profile-header .job-company {
width: 100%;
/* Without a global border-box, width:100% + the shared 0.3rem chip padding
would make the box 0.6rem wider than the (auto-width) view-mode box, nudging
the centered title/subtitle sideways when editing turns on. Border-box keeps
the box exactly parent-width in both modes so nothing moves. */
box-sizing: border-box;
text-align: center;
}
/* Center the description identically on the rendered and editable card, and
keep the user's line breaks (saved as "\n" via innerText) instead of
collapsing them onto one line. Scoped to .profile-card so job-card
descriptions are unaffected. */
.profile-card .job-description {
width: 100%;
text-align: center;
white-space: pre-wrap;
/* Fixed, slightly tighter line-height so four lines fit the card without
pushing the footer down (editable max-height + non-editable line-clamp both
rely on this landing the same height regardless of the browser default). */
line-height: 1.18;
}
/* Applied in BOTH modes (not just .editable): left-aligned so the location
text sits right next to the pin icon with only the chip padding as the gap,
and doesn't slide sideways when editing toggles (the left edge anchors it in
both modes). Edit mode alone keeps a min-width so an empty value still
leaves a clickable chip. */
.profile-card .profile-loc-badge .job-company {
text-align: left;
}
.profile-card.editable .profile-loc-badge .job-company {
min-width: 2.5rem;
}
/* Cap each field's growth so a long value can't squeeze its neighbours. These
only constrain overflow — short/normal content still renders at its natural
size and position. Title stays one line with an ellipsis; subtitle and
description allow a few lines, then scroll. Heights include the chip padding
so the last line isn't clipped. */
.profile-card.editable .profile-header .job-title {
max-height: 1.7em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.profile-card.editable .profile-header .job-company {
max-height: 2.6em;
overflow-y: auto;
}
.profile-card.editable .job-description {
/* ~4 lines (+ chip padding) — matches the non-editable line-clamp below and
the PROFILE_LIMITS.descriptionRows cap, so the editor shows what renders. */
max-height: 5.1em;
overflow-y: auto;
}
/* Render-time caps for displayed (non-editable) profile cards — including
profiles coming from the API — so an over-long field can't overflow the fixed
card box and shove its neighbours. PROFILE_LIMITS (cards.js) bounds the text;
these line-clamps are the layout backstop. The editor has its own caps above. */
.profile-card:not(.editable) .profile-header .job-title,
.profile-card:not(.editable) .profile-loc-badge .job-company {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.profile-card:not(.editable) .profile-header .job-company {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.profile-card:not(.editable) .job-description {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* RANKED v2: all profile-style cards (persons AND companies) are compact —
footer buttons hidden, box shorter (≈1:1 in the 13rem compact grid column),
description clamped to 3 lines. The taller 4-line rules above are the v3
defaults; renderProfile applies this modifier unconditionally for now. */
.profile-card--compact {
height: 13rem;
}
.profile-card--compact:not(.editable) .job-description {
-webkit-line-clamp: 4;
}
.profile-card--compact.editable .job-description {
/* ~3 lines (+ chip padding) — matches the 3-line clamp above. */
max-height: 3.9em;
}
/* With the footer buttons hidden the bottom of the card went empty — ease the
content block down so it reads visually centered in the box, while staying
top-anchored (icon → title → description order and alignment unchanged; the
footer stays pinned to the bottom via its margin-top:auto). */
.profile-card--compact .profile-image-container {
margin-top: 0.9rem;
}
/* ===== Profile edit modal (shared by About + listing pages) ===== */
.profile-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2;
background-color: rgba(0,0,0,0.5);
height: 100vh;
width: 100vw;
display: none;
align-items: center;
justify-content: center;
}
.profile-modal-content {
position: relative;
padding: 3rem;
padding-top: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.profile-modal-title {
font-size: 4rem;
font-weight: 700;
text-align: center;
padding-bottom: 20px;
color: var(--brand);
}
.profile-modal-subtitle {
font-size: 1.5rem;
max-width: 480px;
text-align: center;
color: rgba(160,160,160,1);
padding-bottom: 30px;
}
.profile-card-wrap {
width: 15rem;
margin: 0.5rem;
flex: 0 0 auto;
}
.profile-form-note {
font-size: 0.9rem;
max-width: 240px;
text-align: center;
color: rgba(160,160,160,1);
padding-bottom: 30px;
}
/* Small link under the login/register forms to switch to the other one. */
.auth-toggle {
font-size: 0.85rem;
color: rgba(160,160,160,1);
padding-top: 0.75rem;
}
.auth-toggle-link {
color: var(--brand);
text-decoration: underline;
text-underline-offset: 2px;
}
.auth-toggle-link:hover {
color: var(--brand-fill);
}
.permissions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.3rem;
margin: 0.6rem 0;
}
.permission-row {
display: flex;
align-items: flex-start;
gap: 0.45rem;
font-size: 0.85rem;
color: rgba(200,200,200,1);
cursor: pointer;
}
/* The global `input` rule forces width:13.5rem on every input; override it so
the checkbox sits right next to its label. Native checkboxes render at a
fixed ~13px that ignores the rem root ladder, so on phones (tiny root +
the drawer's zoom) the box dwarfs its 0.85rem label — pin a rem size so it
scales with everything else (same as .vector-active-only-toggle input). */
.permission-row input[type="checkbox"] {
width: 0.9rem;
height: 0.9rem;
min-height: 0;
flex: 0 0 auto;
accent-color: var(--brand-fill);
margin: 0;
margin-top: 0.15rem; /* align with the first text line when a hint wraps below */
}
/* Honest sublabel under a consent row (e.g. "your profile becomes public"). */
.permission-hint {
display: block;
font-size: 0.7rem;
line-height: 1.2;
color: rgba(140, 140, 140, 1);
margin-top: 0.1rem;
}
.permission-row:has(input:disabled) {
cursor: default;
opacity: 0.7;
}
.register-email-input {
width: 10.5rem;
padding-top: 0.1rem;
padding-bottom: 0.1rem;
}
/* id+class to outrank the shared #register-user id rule above (same pattern as
the editor's --save button). Awake = brand fill, like a checked filter. */
#register-user.register-btn {
margin: 0;
background-color: var(--brand-fill);
}
.register-btn-label {
font-size: 1rem;
color: white;
padding-left: 1rem;
padding-right: 1rem;
padding-bottom: 0;
padding-top: 0.08rem;
}
/* Optional résumé upload on the registration form. A label styled as a button
wraps a hidden file ; the chosen filename is echoed beside it. */
/* Résumé attach = a subtle drag-and-drop zone: barely-there dotted orange border,
sharp corners; click anywhere to browse, or drop a file on it. */
.resume-upload.resume-drop {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
box-sizing: border-box;
padding: 0.6rem 0.75rem;
margin: 0.4rem 0;
border: 1px dotted rgba(255, 128, 0, 0.32);
border-radius: 0;
background: transparent;
cursor: pointer;
text-align: center;
transition: border-color 0.15s ease, background 0.15s ease;
}
.resume-upload.resume-drop:hover {
border-color: rgba(255, 128, 0, 0.55);
}
.resume-drop.resume-drop-over {
border-color: var(--brand);
background: rgba(255, 128, 0, 0.06);
}
.resume-drop-text {
font-size: 0.78rem;
color: rgba(150, 150, 150, 1);
/* Long unbroken filenames must wrap, but normal words break at spaces —
break-all split the hint text mid-word ("resu / me") on phones. */
overflow-wrap: anywhere;
pointer-events: none;
}
.resume-drop-over .resume-drop-text,
.resume-drop-has-file .resume-drop-text {
color: var(--brand);
}
/* Reassurance microcopy under the form. Left-aligned like the rest of the
form column (the centered version floated oddly under the left-aligned
button); the base .profile-form-note max-width is undone for the same reason. */
.auth-reassure {
font-size: 0.72rem;
line-height: 1.25;
color: rgba(150, 150, 150, 1);
text-align: left;
max-width: none;
padding-bottom: 0 !important;
margin-top: 0.5rem;
}
.modal-close {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.modal-close-label {
font-size: 1rem;
}
/* ===== Floating-card modals (auth + profile editor) =====
Compact cards that float in the top-right corner (and center on narrow
screens). Styled after the rank cards in functions/cards.js: a dark radial
fill, a colorful (brand) edge + glow, and relative rem typography. The
overlay is click-through (pointer-events:none) so the card floats above the
page without dimming or blocking it; only the card itself captures clicks. */
.floating-card-overlay {
background: transparent;
align-items: flex-start;
justify-content: flex-end;
padding: 1.25rem;
pointer-events: none;
z-index: 100; /* float above the header it overlaps, below the toast */
/* Override .profile-modal's width:100vw — 100vw includes the scrollbar, which
pushes the right-aligned card (and its Close X) off-screen. left:0/right:0
already span the viewport excluding the scrollbar. */
width: auto;
box-sizing: border-box;
}
.floating-card {
pointer-events: auto;
align-items: stretch;
width: 19rem;
max-width: calc(100vw - 2.5rem);
padding: 1.5rem 1.5rem 1.25rem;
color: rgba(200, 200, 200, 1);
background: radial-gradient(ellipse at right top, rgba(12,12,12,1) 0%, rgba(0,0,0,1) 55%, rgba(12,12,12,1) 100%);
border: 0.125rem solid var(--brand-fill);
box-shadow: 0 0 1.75rem rgba(255, 128, 0, 0.25), 0 0.75rem 2rem rgba(0, 0, 0, 0.6);
}
/* Compact, card-scale typography inside the floating card. */
.floating-card .profile-edit-form-col {
flex: 1 1 auto;
width: 100%;
}
.floating-card .profile-modal-subtitle,
.floating-card .profile-edit-form-col .profile-modal-subtitle {
font-size: 0.8rem;
text-align: left;
max-width: none;
padding-bottom: 0.9rem;
line-height: 1.2;
}
/* X close button, pinned to the card's top-right corner. */
.auth-modal-close-x {
display: block;
line-height: 0;
padding: 0.45rem 0.55rem;
}
.auth-modal-close-x img {
width: 0.8rem;
height: 0.8rem;
object-fit: contain;
opacity: 0.6;
transition: opacity 0.2s;
}
.auth-modal-close-x:hover img {
opacity: 1;
}
/* ----- Profile editor — bare floating profile card ----- */
/* No surrounding card chrome: just the profile card floating top-right, with
content-width action buttons wrapping beneath it. The button area is the same
width as the card, so button rows never grow wider than the card.
(Looking for / Offering are hidden for now; Preferences is the toggleable
left-side .profile-vectors-panel.) */
.profile-edit-floating {
padding: 0;
/* Desktop: the editing columns + card in a row, anchored to the top-right of
the overlay. Narrow screens switch this to a vertical stack (media queries
below). Columns keep their own width (flex:0 0 auto) — they never shrink. */
flex-direction: row;
align-items: flex-start;
justify-content: flex-end;
width: auto;
pointer-events: auto; /* the overlay itself is click-through */
gap: 0.75rem;
background: none;
border: 0;
box-shadow: none;
}
.profile-vectors-panel,
.profile-side-column,
.profile-edit-main {
flex: 0 0 auto;
}
/* The editor column itself (titlebar + card + action buttons) — the original
vertical stack, now wrapped so the Preferences panel can sit to its left. */
.profile-edit-main {
display: flex;
flex-direction: column;
align-items: stretch;
width: 15rem; /* match the profile card width */
flex: 0 0 auto;
gap: 0.6rem;
}
/* Settings + Opportunities share one column (Settings on top), sitting left of
the Preferences panel. Sized to the panels' width; each panel keeps its own
floating-card chrome. Collapses to nothing when both panels are hidden. */
.profile-side-column {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 0 0 auto;
gap: 0.75rem;
}
/* Left-side Preferences panel: the owner's vector on/off switches. Floats to the
left of the editor card; hidden (display:none) until the Preferences button is
toggled on (session.js). Self-contained chrome (matches the auth card) and
scrolls internally so the long list never runs off-screen. */
.profile-vectors-panel {
display: none;
width: 17rem;
max-width: calc(100vw - 2.5rem);
max-height: min(82vh, 40rem);
overflow-y: auto;
/* Don't chain the scroll to the page behind when the panel hits its top/bottom. */
overscroll-behavior: contain;
padding: 0.9rem 1rem 1.1rem;
color: rgba(200, 200, 200, 1);
background: radial-gradient(ellipse at right top, rgba(12,12,12,1) 0%, rgba(0,0,0,1) 55%, rgba(12,12,12,1) 100%);
border: 0.125rem solid var(--brand-fill);
box-shadow: 0 0 1.75rem rgba(255, 128, 0, 0.25), 0 0.75rem 2rem rgba(0, 0, 0, 0.6);
pointer-events: auto;
}
/* Narrow / medium screens: the editing columns can't fit one row, so stack
them VERTICALLY — card + Save/Cancel on top, then the panels below — and
scroll the whole editor as ONE region. Crucially the panels drop their own
max-height/internal scroll here, so you never get trapped scrolling inside a
panel (their overscroll:contain would otherwise stop the outer scroll).
Desktop is untouched. NB these blocks MUST come after the base
.profile-edit-floating/.profile-vectors-panel rules above — same
specificity, so source order decides which wins inside the media range. */
@media (max-width: 1300px) {
.profile-edit-floating {
flex-direction: column;
align-items: flex-end; /* stay anchored to the right, like the desktop float */
/* The base rule's flex-end justification means "anchor right" in row
direction — in this column direction it would mean "anchor bottom",
which makes the scroll container OPEN scrolled to the end (panels, not
the card). Start at the top: the card (order:-1) shows first. */
justify-content: flex-start;
box-sizing: border-box;
/* Pin to a CARD-WIDTH column (content 15rem + the 1.5rem side gutters that
keep the panels' orange glow from clipping): every child fills it below,
so the panels stay the same width as the card and the whole stack stays
hugged to the right corner — instead of the container growing to the
17rem panels and leaving the 15rem card visually offset. */
width: 18rem;
max-width: calc(100vw - 2.5rem);
max-height: calc(100vh - 2.5rem);
overflow-x: hidden; /* no horizontal scrollbar; padding covers the shadows */
overflow-y: auto;
overscroll-behavior: contain;
padding: 0.25rem 1.5rem;
}
/* All three stacked columns fill the pinned container → same width as the card. */
.profile-edit-main,
.profile-side-column,
.profile-vectors-panel {
width: 100%;
max-width: none;
box-sizing: border-box;
}
.profile-edit-main {
order: -1; /* card + Save/Cancel on top, reachable without scrolling */
}
/* Stack order: card, Resume column, then Computed values (it's FIRST in
the DOM for the desktop right-anchored row, but in the stack it belongs
under the Resume card that opens it), then Opportunities. */
#profile-vectors-panel {
order: 1;
}
.profile-side-column ~ .profile-side-column {
order: 2;
}
/* One smooth scroll: let each panel be its natural height inside the scrolling
editor instead of its own nested scroll box. */
.profile-vectors-panel {
max-height: none;
overflow: visible;
}
}
/* Phones: each stacked column takes nearly the full width. */
@media (max-width: 600px) {
.floating-card-overlay {
padding: 0.6rem;
}
.floating-card {
width: calc(100vw - 1.2rem);
max-width: none;
/* Include the card's own padding in that width — content-box would push
it wider than the viewport and clip its left edge (the overlay is
right-aligned). */
box-sizing: border-box;
}
/* Scroll the OVERLAY, not the zoomed card — zooming the scroll container
itself makes the browser miscompute the scroll extent so the bottom becomes
unreachable. The overlay closes only via the Close button (no backdrop-click
handler), so pointer-events:auto here is safe. */
#profile-edit-modal {
pointer-events: auto;
align-items: flex-start;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* The panel + body must NOT be the scroll container here: they're zoomed, and
a zoomed scroll container miscomputes its scroll extent so the bottom goes
unreachable (the taller Profile tab loses its footer). The base drawer rules
force the panel to height:100vh/overflow:hidden, which re-traps the scroll
in the zoomed body — undo that so content flows to its natural height and
the (unzoomed) overlay scrolls instead. Keep the header pinned so
Save / Log out / Close stay reachable while scrolling. */
#profile-edit-modal-content {
height: auto;
max-height: none;
overflow: visible;
}
#profile-edit-modal-content .drawer-body {
overflow: visible;
max-height: none;
}
#profile-edit-modal-content .drawer-header {
position: sticky;
top: 0;
z-index: 2;
background: #000;
}
.profile-edit-floating {
/* Single column pinned to the right (same width relationship as before: the
17rem column − 1rem side padding = 15rem content, matching the fixed-width
profile card, so the panels never grow wider than the card). We only make
it BIGGER, via `zoom` (layout-aware, so the rem card/panels/text all scale
and the overlay can measure the true height to scroll). The max-width caps
the base so the zoomed result stays on-screen. NOT a scroll container. */
width: 17rem;
max-width: calc((100vw - 1.2rem) / 1.4);
max-height: none;
overflow: visible;
align-items: stretch;
padding: 0.25rem 1rem;
margin-bottom: 1.2rem; /* breathing room past the last panel */
zoom: 1.4;
}
.profile-edit-main,
.profile-side-column,
.profile-vectors-panel {
width: 100%;
max-width: none;
/* The panels carry their own horizontal padding — include it in the 100%
or they poke past the right edge of the screen. */
box-sizing: border-box;
}
/* Editor's dark patch: fixed to the viewport (so it stays put while the overlay
scrolls) and full-height, sized to the zoomed column (17rem × 1.4 ≈ 24rem +
glow), anchored right.
body-prefixed to outrank the base vignette rule (same #id selector, LATER
in source) — its position:absolute / height:25rem were silently winning,
leaving the phone drawer's dark column a stub that stopped mid-screen. */
body #profile-edit-modal::before {
position: fixed;
top: 0;
right: 0;
height: 100vh;
height: 100dvh;
width: 24.5rem;
max-width: calc(100vw - 0.6rem);
/* Full-height column: feather only the LEFT edge. The base rule also fades
the bottom 20%, which would visibly cut the column before the viewport
bottom. Single mask layer, so reset the composite too. */
-webkit-mask-image: linear-gradient(to left, #000 85%, transparent 100%);
-webkit-mask-composite: source-over;
mask-image: linear-gradient(to left, #000 85%, transparent 100%);
mask-composite: add;
}
}
.profile-switches-title {
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--brand);
margin: 0 0 0.25rem;
}
.profile-switches-note {
font-size: 0.75rem;
line-height: 1.25;
color: rgba(160, 160, 160, 1);
margin: 0 0 0.6rem;
}
/* Text filter for the switch list. Reuses the itemlist search-input look via the
shared filter-* classes; only the panel layout (full width) differs. */
.vector-filter-input {
width: 100%;
margin: 0 0 0.6rem;
}
/* "Show only active toggles" row beneath the filter input. */
.vector-active-only-toggle {
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0 0 0.6rem;
font-size: 0.75rem;
color: rgba(160, 160, 160, 1);
cursor: pointer;
user-select: none;
}
.vector-active-only-toggle input {
/* Native checkboxes render at a fixed ~13px that ignores the rem root ladder,
so on narrow screens (tiny root) this box dwarfs the 0.75rem label. Pin a
rem size so it scales with everything else. */
width: 0.85rem;
height: 0.85rem;
min-height: 0;
margin: 0;
flex: 0 0 auto;
accent-color: var(--brand-fill);
cursor: pointer;
}
/* Section header within the switch list (Employment / Language / …). */
.vector-switch-group {
font-size: 0.7rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.04em;
color: rgba(150, 150, 150, 1);
margin: 0.7rem 0 0.2rem;
padding-bottom: 0.15rem;
border-bottom: 0.0625rem solid rgba(80, 80, 80, 0.5);
}
.vector-switch-section:first-of-type > .vector-switch-group {
margin-top: 0;
}
.vector-switch-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
padding: 0.18rem 0;
cursor: pointer;
}
.vector-switch-label {
font-size: 0.82rem;
line-height: 1.2;
}
/* Permission toggles reuse the vector-switch look but carry a wrapping label +
hint, so top-align the switch to the first label line instead of centering it
against the whole two-line block. */
.permission-switch-row {
align-items: flex-start;
}
.permission-switch-row .vector-switch {
margin-top: 0.15rem;
}
/* Settings under the profile card: fill the editor column (the panel's base
width is 17rem, wider than the 15rem card column). */
.profile-edit-main .profile-settings-panel {
width: auto;
box-sizing: border-box;
}
/* Log out (left) / Save changes (right) at the bottom of Settings. */
.settings-actions-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.4rem;
margin-top: 0.9rem;
}
/* ---- Looking for / Offering hover reveal (person cards' bottom-left icon).
The card clips overflow, so the popover is an overlay INSIDE the card:
hovering the icon flips the card face to the lists (staying while the
cursor is over the overlay — it's a DOM child of the hover target). Labels
and rows echo the editor's Opportunities styling. ---- */
.profile-opps-pop {
display: none;
position: absolute; /* against .profile-card (position:relative) */
inset: 0;
z-index: 3;
padding: 0.7rem 0.9rem;
background-color: rgba(10, 10, 10, 0.96);
overflow-y: auto;
overscroll-behavior: contain;
text-align: left;
}
.profile-opps-wrap:hover .profile-opps-pop,
/* Keyboard parity: the trigger is focusable (.pressable via a11y.js), so
tabbing to it reveals the same overlay hover does. */
.profile-opps-wrap:focus-within .profile-opps-pop {
display: block;
}
.profile-opps-trigger {
cursor: help;
}
/* Active = full opacity (the disabled state below dims it). */
.profile-opps-trigger .job-link-image {
opacity: 1;
}
.profile-opps-label {
font-size: 0.7rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.04em;
color: rgba(150, 150, 150, 1);
margin: 0.6rem 0 0.2rem;
padding-bottom: 0.15rem;
border-bottom: 0.0625rem solid rgba(80, 80, 80, 0.5);
}
.profile-opps-pop .profile-opps-label:first-child {
margin-top: 0;
}
.profile-opps-item {
font-size: 0.82rem;
line-height: 1.25;
padding: 0.15rem 0;
color: rgba(220, 220, 220, 1);
}
/* Heavy content (many/long entries — flagged at render time) drops to a
denser type so more fits before the internal scroll kicks in. */
.profile-opps-pop--dense {
padding: 0.55rem 0.7rem;
}
.profile-opps-pop--dense .profile-opps-item {
font-size: 0.68rem;
line-height: 1.18;
padding: 0.1rem 0;
}
.profile-opps-pop--dense .profile-opps-label {
font-size: 0.62rem;
margin: 0.4rem 0 0.15rem;
}
/* ---- Message compose (person cards' bottom-right ✉). Click-to-open in-card
overlay (typing needs persistence, so not hover); Send opens the visitor's
mail app prefilled to the relay address — see functions/messagecard.js. */
.profile-msg-glyph {
width: 1.05rem;
height: 1.05rem;
object-fit: contain;
/* send.png is black; invert to render it light on the dark card. */
filter: invert(1);
/* Active = full opacity; the disabled state (opted out) dims it below. */
opacity: 1;
transition: opacity 0.15s ease;
}
.profile-msg-pop {
display: none;
position: absolute; /* against .profile-card (position:relative) */
inset: 0;
z-index: 4; /* above the Looking for / Offering hover overlay */
padding: 0.6rem 0.9rem;
background-color: rgba(10, 10, 10, 0.97);
overflow-y: auto;
overscroll-behavior: contain;
text-align: left;
}
.profile-msg-wrap.open .profile-msg-pop {
display: block;
}
/* Disabled footer actions: the message ✉ when the person opted out of being
contacted (jobEmails off), and the Looking-for/Offering ☑ when there's nothing
to show. The icon stays VISIBLE (so the affordance reads as present) but greyed
and non-interactive. The consent toggle flips --optout live (session.js). */
.profile-msg-wrap--optout,
.profile-opps-wrap--optout,
.profile-opps-wrap--disabled {
pointer-events: none;
}
.profile-msg-wrap--optout .profile-msg-glyph,
.profile-opps-wrap--optout .job-link-image,
.profile-opps-wrap--disabled .job-link-image {
opacity: 0.3;
}
.profile-msg-close {
position: absolute;
top: 0.25rem;
right: 0.55rem;
line-height: 0;
}
.profile-msg-close img {
width: 0.72rem;
height: 0.72rem;
object-fit: contain;
opacity: 0.55;
transition: opacity 0.15s ease;
}
.profile-msg-close:hover img {
opacity: 1;
}
/* The hover/typed selectors beat the global textarea/input rules (which
paint a gray hover + orange :not(:placeholder-shown) fill for the career
inputs) — the compose fields stay calm dark fields in every state. */
.profile-msg-from,
.profile-msg-from:hover,
.profile-msg-from:not(:placeholder-shown),
.profile-msg-input,
.profile-msg-input:hover,
.profile-msg-input:not(:placeholder-shown) {
width: 100%;
box-sizing: border-box;
margin: 0.3rem 0 0.45rem;
padding: 0.4rem 0.5rem;
background-color: rgba(30, 30, 30, 1);
color: rgba(230, 230, 230, 1);
border: 0.0625rem solid rgba(80, 80, 80, 0.6);
font: inherit;
font-size: 0.78rem;
line-height: 1.3;
text-align: left;
resize: none;
}
.profile-msg-from,
.profile-msg-from:hover,
.profile-msg-from:not(:placeholder-shown) {
margin: 0.3rem 0 0;
}
.profile-msg-from:focus,
.profile-msg-input:focus {
outline: 1px solid var(--brand-ring);
}
.profile-msg-send.is-disabled {
opacity: 0.5;
pointer-events: none;
}
.profile-msg-send {
text-align: center;
}
.profile-msg-alt {
margin-top: 0.45rem;
font-size: 0.62rem;
color: rgba(150, 150, 150, 1);
}
.profile-msg-email {
color: var(--brand);
user-select: all;
overflow-wrap: anywhere;
}
/* Download + Show computed values side by side under the drop zone. */
.resume-links-row {
display: flex;
flex-wrap: wrap;
gap: 0.15rem 0.9rem;
margin: -0.2rem 0 0.5rem;
}
.resume-links-row .resume-download-link {
display: inline;
margin: 0;
}
/* "Show computed values" sits at the left; the download link is pushed to the
far right of the row (when present). */
.resume-links-row #resume-download {
margin-left: auto;
}
.resume-panel-drop.resume-drop {
margin: 0.5rem 0 0.6rem;
}
.resume-panel-btn {
display: block;
width: 100%;
box-sizing: border-box;
text-align: center;
}
.resume-panel-btn + .resume-panel-btn {
margin-top: 0.4rem;
}
/* Small text action under the drop zone (presigned, owner-only download). */
.resume-download-link {
display: block;
margin: -0.2rem 0 0.5rem;
font-size: 0.72rem;
color: var(--brand);
text-decoration: underline;
cursor: pointer;
width: fit-content;
}
/* Below the desktop width the resume panel gets narrow (17rem, and it stacks),
so "Show computed values" + "Download saved resume" no longer fit on one row
and the download link dropped to its own line. Shrink the two links a touch
(and tighten their gap + keep each on one line) so they stay side by side. */
@media (max-width: 1300px) {
.resume-links-row {
gap: 0.15rem 0.55rem;
}
.resume-links-row .resume-download-link {
font-size: 0.62rem;
white-space: nowrap;
}
}
/* iOS-style toggle: a hidden checkbox over a track; the knob is the track's
::after, slid right and recolored when :checked. */
.vector-switch {
position: relative;
flex: 0 0 auto;
width: 2rem;
height: 1.05rem;
}
.vector-switch-input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.vector-switch-track {
display: block;
width: 100%;
height: 100%;
border-radius: 1rem;
background: rgba(80, 80, 80, 1);
transition: background 0.15s;
}
.vector-switch-track::after {
content: "";
position: absolute;
top: 0.12rem;
left: 0.12rem;
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
background: rgba(220, 220, 220, 1);
transition: transform 0.15s, background 0.15s;
}
.vector-switch-input:checked + .vector-switch-track {
background: var(--brand-fill);
}
.vector-switch-input:checked + .vector-switch-track::after {
transform: translateX(0.95rem);
background: #fff;
}
.vector-switch-input:focus-visible + .vector-switch-track {
outline: 0.125rem solid var(--brand);
outline-offset: 0.125rem;
}
/* Dark vignette behind the editor: anchored at the top-right viewport corner
(solid there) and fading out down/left into the page. No blur, no box — the
radial fade does the blending, so there are no visible edges/corners. Scoped
to the editor by id so the auth card keeps its own chrome. */
#profile-edit-modal::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 21rem;
height: 25rem;
background: rgba(0, 0, 0, 0.97);
pointer-events: none;
/* Feather only the inner edges (left + bottom): the patch stays solid into
the top-right viewport corner and fades into the page away from the card.
Two linear masks intersected = a soft rectangle, not a rounded ellipse. */
-webkit-mask-image:
linear-gradient(to left, #000 80%, transparent 100%),
linear-gradient(to bottom, #000 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to left, #000 80%, transparent 100%),
linear-gradient(to bottom, #000 80%, transparent 100%);
mask-composite: intersect;
}
/* Title row above the card: "Your profile" (orange badge) on the left, the
Close button on the right — sitting just above the card's top edge. */
.profile-edit-titlebar {
display: flex;
flex-direction: row;
/* Bottom-align so the small Close button rests on the same line as the taller
title badge (both sitting just above the card's top edge) instead of
floating at the title's vertical middle. */
align-items: flex-end;
justify-content: space-between;
width: 100%;
gap: 0.4rem;
}
/* Same badge look as .profile-action-btn, but orange and a bit larger so it
reads as a title. */
.profile-edit-title {
font-weight: bold;
font-size: 1.45rem;
text-transform: uppercase;
letter-spacing: 0.02em;
padding: 0.05rem 0.7rem 0.25rem;
color: white;
background-color: var(--brand-fill);
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.5);
}
.profile-edit-card-host,
.profile-edit-floating .profile-card-wrap {
display: block;
width: 100%;
margin: 0;
}
/* Drop shadow so the chrome-less card reads as floating over the page. */
.profile-edit-floating .profile-card-wrap {
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.55);
}
.profile-edit-actions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
/* Push the two buttons to opposite edges (affirmative action left, "leave"
action right) so toggling edit mode reads as two fixed slots changing role,
rather than buttons vanishing and reappearing in the same spot. */
justify-content: space-between;
gap: 0.4rem;
width: 100%; /* == card width → rows wrap within the card's footprint */
}
/* Same look as the "Account needed" / "Logged in" header badges
(.header-button-soon): dark-red fill, light text, bold — scaled down to suit
the floating card. Kept straight (no tilt). */
.profile-action-btn {
text-align: center;
font-weight: bold;
font-size: 0.85rem;
padding: 0.05rem 0.6rem 0.25rem;
color: rgba(200, 200, 200, 1);
background-color: rgba(150, 20, 20, 1);
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.5);
transition: background-color 0.2s, color 0.2s;
}
.profile-action-btn:hover {
background-color: rgba(185, 30, 30, 1);
color: white;
}
.profile-action-btn--on {
background-color: var(--brand-fill);
color: black;
}
/* Inactive "Save changes": visible but clearly asleep until the user edits
something. pointer-events:none kills hover + mouse clicks; keyboard
activation is caught by the shared #register-user .is-disabled click guard. */
.profile-action-btn.is-disabled {
opacity: 0.45;
pointer-events: none;
}
/* id+class to outrank the shared #register-user rule (id specificity), without
touching the auth-modal register button (which lacks --save). */
#register-user.profile-action-btn--save {
background-color: rgba(30, 190, 45, 1);
color: white;
}
#register-user.profile-action-btn--save:hover {
background-color: rgba(40, 215, 55, 1);
color: white;
}
/* ===== Profile-highlight two-column layout (read-only highlight modal) ===== */
.profile-edit-layout {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
gap: 2rem;
width: 100%;
/* Drop the form column onto its own line when the viewport can't fit it
beside the (now three-wide) card column, instead of shrinking both. */
flex-wrap: wrap;
}
.profile-edit-col {
display: flex;
flex-direction: column;
align-items: center;
}
/* The card column carries the card + lists + sliders in a row. Let it take the
available width up to that row's natural size (~47rem) so the three sit side
by side on desktop; below that it shrinks and the row wraps (see the scoped
.profile-highlight-card rule) rather than cramping each column. */
.profile-edit-card-col {
flex: 1 1 47rem;
max-width: 47rem;
min-width: 0;
}
/* Inside the editor, the card/lists/sliders row wraps and stays centred when
the column is too narrow for all three (the read-only highlight modal keeps
its own no-wrap two-up layout). */
.profile-edit-card-col .profile-highlight-card {
flex-wrap: wrap;
justify-content: center;
width: 100%;
gap: 1.25rem;
}
.profile-edit-form-col {
flex: 0 1 24rem;
min-width: 0;
align-items: stretch;
}
/* Instruction line under the form column heading. Left-aligned (not the big
centered subtitle the old box used) so it reads as a hint above the form. */
.profile-edit-form-col .profile-modal-subtitle {
font-size: 1rem;
text-align: left;
max-width: none;
padding-bottom: 1rem;
}
.profile-edit-form-col .profile-form-note {
text-align: left;
max-width: none;
padding-bottom: 1rem;
}
.profile-edit-form {
gap: 0.75rem;
}
/* Mobile: stack the columns — card on top, form below — like the highlight
modal does. */
@media (max-width: 760px) {
.profile-edit-layout {
flex-direction: column;
align-items: center;
gap: 1.75rem;
}
.profile-edit-form-col {
flex: 1 1 auto;
width: 100%;
max-width: 22rem;
}
}
/* ===== Profile / company highlight drawer (functions/profileHighlight.js) =====
Uses the shared right-side drawer shell (.profile-modal /
.profile-modal-content / .drawer-*, defined below) — no layout overrides
here, only the drawer-body content. */
.profile-highlight-card {
display: flex;
flex-direction: column;
align-items: stretch;
}
/* Company details panel — sits under the company card in the detail drawer
(functions/cards.js renderCompanyStats). Like every drawer panel it's a
flat, full-width section divided from the card above by a hairline (the
drawer body is the card now — no box chrome of its own). */
.company-stats-panel {
width: 100%;
padding-top: 1rem;
border-top: 0.0625rem solid var(--brand-ring-soft);
color: rgba(200, 200, 200, 1);
}
.company-stats-title {
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--brand);
margin: 0 0 0.5rem;
}
.company-stats-list {
margin: 0;
display: flex;
flex-direction: column;
}
.company-stat {
display: flex;
gap: 0.6rem;
align-items: baseline;
padding: 0.28rem 0;
border-top: 0.0625rem solid rgba(255, 255, 255, 0.06);
}
.company-stat:first-child {
border-top: none;
}
.company-stat-key {
flex: 0 0 4.7rem;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: rgba(150, 150, 150, 1);
}
.company-stat-val {
margin: 0;
flex: 1 1 auto;
min-width: 0;
font-size: 0.82rem;
color: rgba(225, 225, 225, 1);
word-break: break-word;
}
.company-stat-link {
color: var(--info-blue);
text-decoration: none;
}
.company-stat-link:hover {
text-decoration: underline;
}
.company-stats-disclaimer {
margin: 0.6rem 0 0;
padding-top: 0.5rem;
border-top: 0.0625rem solid rgba(255, 255, 255, 0.06);
font-size: 0.66rem;
line-height: 1.35;
font-style: italic;
color: rgba(130, 130, 130, 1);
}
/* "Looking for" / "Offering" lists rendered under the spotlighted profile card
(functions/cards.js renderProfileLists) — also reused (editable) in the
profile editor's Lists section. */
.profile-lists {
display: flex;
flex-direction: column;
gap: 1rem;
flex: 0 0 auto;
width: 14rem;
padding-top: 0.5rem;
}
/* In the detail drawer the lists are a flat full-width section under the card,
divided by a hairline — same treatment as the company details panel. */
.profile-highlight-card .profile-lists {
width: 100%;
padding-top: 1rem;
border-top: 0.0625rem solid var(--brand-ring-soft);
}
.profile-list-label {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brand);
margin-bottom: 0.5rem;
}
.profile-list-items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.profile-list-item {
background-color: rgba(40, 40, 40, 1);
border: 0.0625rem solid rgba(70, 70, 70, 1);
border-radius: 0.4rem;
padding: 0.25rem 0.55rem;
font-size: 0.85rem;
color: rgba(220, 220, 220, 1);
}
.profile-list-empty {
font-size: 0.85rem;
color: rgba(140, 140, 140, 1);
font-style: italic;
}
/* Editable rows (editor only): a single-line editable input-style chip + a remove
control, and the "+ Add" ghost button beneath. Styled to match the site's
editable fields (orange focus ring, like the profile card's contenteditables). */
.profile-list-item--edit {
display: flex;
align-items: flex-start; /* keep × at the top line when the text wraps */
gap: 0.35rem;
width: 100%;
padding: 0.3rem 0.35rem 0.3rem 0.6rem;
/* Warm, on-brand look instead of the flat gray chip: faint orange tint + a
thin brand-tinted border, with a stronger orange accent bar on the left. */
background-color: rgba(255, 133, 0, 0.07);
border: 0.0625rem solid rgba(255, 133, 0, 0.3);
border-left: 0.18rem solid var(--brand-fill);
border-radius: 0; /* sharp edges, matching the rest of the app */
transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.profile-list-item--edit:focus-within {
border-color: var(--brand-fill);
background-color: var(--brand-ring-soft);
box-shadow: 0 0 0 0.15rem var(--brand-ring-soft);
}
.profile-list-text {
flex: 1 1 auto;
min-width: 0;
outline: none;
/* Auto-wrap by width (no manual line breaks — Enter is blocked and pasted
newlines are flattened to spaces in session.js). Long words break too. */
white-space: normal;
overflow-wrap: anywhere;
}
/* Placeholder for a fresh/empty row so it doesn't read as a blank chip. */
.profile-list-text:empty::before {
content: "Type here…";
color: rgba(120, 120, 120, 1);
pointer-events: none;
}
/* Round remove button: muted by default, turns red on hover (matches the site's
interactive controls). */
.profile-list-remove {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.15rem;
height: 1.15rem;
line-height: 0;
}
.profile-list-remove img {
width: 0.6rem;
height: 0.6rem;
object-fit: contain;
opacity: 0.5;
transition: opacity 0.15s;
}
.profile-list-remove:hover img {
opacity: 1;
}
/* "+ Add" as a ghost pill: dashed brand outline, fills orange on hover. */
.profile-list-add {
align-self: flex-start;
margin-top: 0.5rem;
padding: 0.2rem 0.65rem 0.25rem;
border: 0.0625rem dashed var(--brand-fill-edge);
border-radius: 0; /* sharp edges, matching the rest of the app */
color: var(--brand);
font-size: 0.8rem;
font-weight: 700;
transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.profile-list-add:hover {
background-color: var(--brand-fill);
border-color: var(--brand-fill);
color: white;
}
/* Opportunities panel: the "can be contacted" toggle above the freeform Looking
for / Offering lists. A divider separates the toggle from the lists. */
.opportunities-toggle-row {
/* No divider of its own — the LOOKING FOR header's hairline right below
already separates; two lines that close together read as noise. */
padding-bottom: 0.6rem;
}
.opportunities-lists {
margin-top: 0.6rem;
transition: opacity 0.15s;
}
.opportunities-lists .profile-lists {
width: 100%;
gap: 0.9rem;
}
/* Looking for / Offering match the Preferences panel's list look: the labels
wear the .vector-switch-group treatment (small gray uppercase over a
hairline), and the rows are quiet text lines separated by faint hairlines —
no chip boxes; orange only appears on focus. Scoped here so the public
highlight modal keeps its read-only chips. */
.opportunities-lists .profile-list-label {
font-size: 0.7rem;
letter-spacing: 0.04em;
color: rgba(150, 150, 150, 1);
margin-bottom: 0.2rem;
padding-bottom: 0.15rem;
border-bottom: 0.0625rem solid rgba(80, 80, 80, 0.5);
}
.opportunities-lists .profile-list-items {
gap: 0;
}
.opportunities-lists .profile-list-item--edit {
background: none;
border: 0;
/* Resting rows are clean text lines (like the Preferences rows — only the
section headers carry hairlines); the underline exists but stays
invisible until focus so editing keeps an affordance. */
border-bottom: 0.0625rem solid transparent;
padding: 0.18rem 0 0.24rem;
}
.opportunities-lists .profile-list-item--edit:focus-within {
background: none;
box-shadow: none;
border-bottom-color: var(--brand-fill);
}
.opportunities-lists .profile-list-text {
font-size: 0.82rem;
line-height: 1.2;
}
.opportunities-lists .profile-list-add {
border: 0;
padding: 0.2rem 0;
margin-top: 0.2rem;
font-size: 0.72rem;
opacity: 0.75;
}
.opportunities-lists .profile-list-add:hover {
background: none;
color: var(--brand);
opacity: 1;
}
/* Toggle off = dim + block input, but keep the rows (and their data) so the user
can re-enable without re-typing. */
.opportunities-off .opportunities-lists {
opacity: 0.4;
pointer-events: none;
}
/* ---- Career panel (work experience + education) ---- */
.profile-career .profile-list-label {
font-size: 0.72rem;
letter-spacing: 0.06em;
margin-bottom: 0.4rem;
padding-bottom: 0.2rem;
border-bottom: 0.0625rem solid rgba(80, 80, 80, 0.5);
}
.career-group {
margin-top: 0.75rem;
}
.career-entries {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* Career entry — a self-contained editable card that copies the JOB CARD's look
(dark radial background, thin border, 1.75rem logo, title/company/description
typography) without reusing .job/.card (whose flex + brand-orange border + the
global input width were leaking in / overflowing). box-sizing:border-box + a
hard overflow:hidden keep everything inside the card. No orange. */
.career-entry {
position: relative;
box-sizing: border-box;
width: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
background: radial-gradient(ellipse at right top, rgba(10, 10, 10, 1) 0%, rgba(0, 0, 0, 1) 47%, rgba(10, 10, 10, 1) 100%);
border: 0.0625rem solid rgba(190, 190, 190, 0.32);
}
.career-head {
box-sizing: border-box;
width: 100%;
display: flex;
align-items: flex-start;
gap: 0.4rem;
padding: 0.45rem 1.3rem 0.15rem 0.45rem; /* right pad clears the × */
}
/* Fixed-size placeholder box: reserves the logo's space so filling in the real
company logo later never shifts the text. */
.career-logo-box {
flex: 0 0 auto;
position: relative;
width: 1.75rem;
height: 1.75rem;
margin-top: 0.15rem;
border-radius: 0.2rem;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
/* Once a real logo is in place, drop the grey placeholder behind it. */
.career-logo-box--filled {
background: transparent;
}
.career-logo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.career-heading {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
}
.career-body {
box-sizing: border-box;
width: 100%;
display: flex;
flex-direction: column;
gap: 0.1rem;
padding: 0 0.45rem 0.5rem;
}
/* Every field: strip the global input chrome and render as card text, constrained
to the card width. Scoped under .career-entry so it outranks the global
`input/textarea:not(:placeholder-shown)` rules (which paint filled fields
brand-orange) and `input:hover`. Faint highlight on hover/focus = editable. */
.career-entry .career-input {
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-height: 0;
margin: 0;
padding: 0.08rem 0.2rem;
text-align: left;
background: transparent;
border: none;
border-radius: 0;
color: rgba(200, 200, 200, 1);
font-family: inherit;
}
.career-entry .career-input:hover {
background: rgba(255, 255, 255, 0.04);
}
.career-entry .career-input:focus {
outline: none;
background: rgba(255, 255, 255, 0.07);
}
.career-entry .career-input::placeholder {
color: rgba(120, 120, 120, 1);
}
/* Typography copied from the job card (.job-title / .job-company / .job-description).
.job-title sets no font-weight, so it inherits the site's 400 — match that
(bigger size + white colour is what sets the title apart, not weight). */
.career-entry .career-title {
font-size: 0.85rem;
color: #fff;
}
.career-entry .career-company {
font-size: 0.65rem;
color: rgba(185, 185, 185, 1);
}
.career-entry .career-desc {
font-size: 0.7rem;
color: rgba(185, 185, 185, 1);
line-height: 1.3;
resize: none; /* no drag handle — it auto-grows with content instead */
overflow: hidden; /* height is managed by JS; no inner scrollbar */
min-height: 2.1rem;
}
.career-entry .career-period {
font-size: 0.65rem;
color: rgba(150, 150, 150, 1);
}
.career-remove {
position: absolute;
top: 0.3rem;
right: 0.3rem;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 0.9rem;
height: 0.9rem;
line-height: 0;
}
.career-remove img {
width: 0.6rem;
height: 0.6rem;
object-fit: contain;
opacity: 0.5;
transition: opacity 0.15s;
}
.career-remove:hover img {
opacity: 1;
}
.career-add {
display: inline-block;
align-self: flex-start;
margin-top: 0.45rem;
padding: 0.2rem 0.65rem 0.25rem;
border: 0.0625rem dashed rgba(150, 150, 150, 0.6);
color: rgba(200, 200, 200, 1);
font-size: 0.78rem;
font-weight: 700;
transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.career-add:hover {
background-color: rgba(255, 255, 255, 0.08);
border-color: rgba(200, 200, 200, 0.8);
color: white;
}
/* Personalization sliders rendered beside the card in the profile editor
(functions/cards.js renderProfileVectors) — one 0..1 slider per dimension,
shown only to the signed-in owner. The global input[type="range"] rules are
tuned for the salary dual-thumb overlay (absolute, pointer-events:none); these
selectors are scoped under .profile-vectors to win on specificity and reset
them for standalone sliders. */
.profile-vectors {
display: flex;
flex-direction: column;
gap: 0.55rem;
flex: 0 0 auto;
width: 14rem;
padding-top: 0.5rem;
}
.profile-vector-row {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.profile-vector-head {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 0.8rem;
color: rgba(210, 210, 210, 1);
}
.profile-vector-value {
color: var(--brand);
font-variant-numeric: tabular-nums;
}
.profile-vectors input[type="range"] {
position: static;
pointer-events: auto;
appearance: none;
-webkit-appearance: none;
width: 100%;
min-height: 0;
height: 0.35rem;
margin: 0;
padding: 0;
border-radius: 0.2rem;
background: rgba(70, 70, 70, 1);
cursor: pointer;
}
.profile-vectors input[type="range"]:hover {
background: rgba(70, 70, 70, 1); /* cancel the global input:hover fill */
}
.profile-vectors input[type="range"]:disabled {
cursor: default;
opacity: 0.65;
}
.profile-vectors input[type="range"]::-webkit-slider-thumb {
margin-bottom: 0;
height: 0.85rem;
width: 0.85rem;
}
.profile-vectors input[type="range"]::-moz-range-thumb {
margin-bottom: 0;
height: 0.85rem;
width: 0.85rem;
}
/* Loading placeholder in the highlight card area: same footprint as the
profile card (15 x 14.5rem) so the panel doesn't resize when the real card
arrives. Plain dark half-opacity box by design. */
.profile-card-skeleton {
width: 15rem;
height: 14.5rem;
background: rgba(0, 0, 0, 0.5);
border-radius: 0.2rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.7rem;
}
.profile-card-spinner {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.2);
border-top-color: var(--info-blue);
animation: toast-spin 0.7s linear infinite;
}
.profile-card-loading {
font-size: 0.85rem;
color: rgba(160, 160, 160, 1);
}
@media (prefers-reduced-motion: reduce) {
.profile-card-spinner { animation: none; }
}
/* Status line inside the highlight card area (error messages). */
.profile-highlight-jobs-msg {
color: rgba(160, 160, 160, 1);
font-size: 1rem;
text-align: center;
padding: 2rem 0;
}
/* Demo job cards on the About page (runtime listing cards are not wrapped). */
.job-card-wrap .job {
min-height: 10rem;
}
/* ===== About / landing page — extracted from inline styles ===== */
.about-parallax {
position: relative;
width: 100%; /* not 100vw — see .header-container (scrollbar overflow) */
overflow: hidden;
}
.about-hero {
height: 100vh;
max-height: 100vw;
flex: 1;
background-color: rgba(9,9,9,1);
position: relative;
}
.about-hero-circuit {
position: absolute;
margin-top: 1.7rem;
}
/* The circuit frame is always 80% × 80% of the hero box (.about-hero is
100vh capped at 100vw), so the loop mirrors the hero's aspect ratio on every
screen — square on phones, wide on desktop — and stays centered on the
wordmark. The svg stretches to this box (preserveAspectRatio="none"). */
.about-hero-circuit svg {
width: 80vw;
height: min(80vh, 80vw);
display: block;
}
.about-hero-logo {
/* Fluid size: rem-based sizing jumped at every root font-size breakpoint
(and mid-widths rendered LARGER than desktop). This line runs smoothly
from 150px at phone widths to 240px from 1300px up — the same endpoints
the old rem values hit on desktop and mobile. */
height: clamp(150px, 10vw + 110px, 240px);
}
.about-section {
padding-top: 6rem;
position: relative;
padding-right: 4rem;
padding-left: 4rem;
border-top: 0.35rem solid rgba(5,5,5,1);
}
.section-title {
font-size: 4rem;
font-weight: 700;
text-align: center;
padding-bottom: 20px;
}
.text-white {
color: white;
}
.section-subtitle {
font-size: 1.5rem;
max-width: 480px;
text-align: center;
color: rgba(160,160,160,1);
padding-bottom: 30px;
}
.about-features {
padding-top: 3rem;
padding-left: 3rem;
padding-right: 3rem;
position: relative;
}
.about-feature-row {
max-width: 45rem;
}
.about-feature-row-spaced {
max-width: 45rem;
padding-top: 2rem;
}
.about-feature-icon {
height: 5rem;
}
.about-feature-text {
font-size: 1rem;
color: white;
text-align: center;
width: 65%;
}
.about-categories {
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 45rem;
margin-top: 5.5rem;
justify-content: center;
position: relative;
}
.category-link {
margin: 0.25rem;
background-color: rgba(20,20,20,1);
}
.is-dimmed {
opacity: 0.35;
}
.category-link-label {
font-size: 1.8rem;
color: var(--brand);
padding-top: 0;
padding-right: 1.2rem;
padding-bottom: 0.5rem;
padding-left: 1.2rem;
}
.about-soon-wrap {
position: absolute;
/* Anchor to the bottom of the category grid so it always floats over the
dimmed "coming soon" buttons (the last items), no matter how many rows the
buttons wrap into on narrow screens. Anchoring from the top broke on mobile
because extra wrapped rows pushed active buttons down under the badge. */
bottom: 1.4rem;
}
.launching-badge {
rotate: -3.5deg;
background-color: rgba(150,20,20,1);
font-size: 1.45rem;
color: rgba(200,200,200,1);
padding-top: 0;
padding-right: 1.2rem;
padding-bottom: 0.5rem;
padding-left: 1.2rem;
}
.about-join {
margin-top: 7rem;
padding-top: 2.6rem;
position: relative;
background-color: rgba(10,10,10,1);
border-top: 0.35rem solid rgba(5,5,5,1);
}
.about-join-btns {
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 45rem;
margin-bottom: 1.5rem;
justify-content: center;
position: relative;
}
.join-btn {
margin: 0.25rem;
background-color: rgba(20,20,20,1);
cursor: pointer;
}
.join-btn-label {
background-color: rgba(5,5,5,1);
font-size: 1.8rem;
color: var(--brand);
padding-top: 0;
padding-right: 1.2rem;
padding-bottom: 0.5rem;
padding-left: 1.2rem;
}
.justify-center {
justify-content: center;
}
.slider-offset {
margin-top: -0.3rem;
}
.about-info-row {
margin-top: 0.3rem;
width: 100%;
padding-top: 1rem;
padding-bottom: 1rem;
}
.about-info-label {
font-size: 0.9rem;
color: rgba(160,160,160,1);
}
.about-privacy-wrap {
margin-bottom: 1rem;
}
.card-margin {
margin: 0.5rem;
}
.job-card-wrap {
width: 17rem;
margin: 0.5rem;
}
.about-layer-jobs-1 {
position: absolute;
top: 6.6rem;
left: -16.72rem;
}
.about-layer-jobs-2 {
position: absolute;
top: 28.09rem;
left: 0.8rem;
}
.about-layer-prof-1 {
position: absolute;
top: -11.8rem;
right: -12.3rem;
}
.about-layer-prof-2 {
position: absolute;
top: -11.8rem;
right: 3.4rem;
}
.about-layer-prof-3 {
position: absolute;
top: -11.8rem;
right: 19.2rem;
}
/* (The hero logo's mobile size is handled by the fluid clamp() on
.about-hero-logo — no breakpoint override needed.) */
/* Visible keyboard focus for pressable controls (functions/a11y.js gives them
role="button" + tabindex). Mouse clicks don't trigger :focus-visible, so this
only shows for keyboard navigation. */
.pressable:focus-visible {
outline: 2px solid var(--info-blue);
outline-offset: 2px;
border-radius: 0.4rem;
}
/* --- Global status toast (functions/toast.js) --- */
.toast {
position: fixed;
/* Top center, clear of any iOS status bar / notch. */
top: calc(1rem + env(safe-area-inset-top, 0px));
left: 50%;
z-index: 9999;
display: flex;
align-items: center;
gap: 0.55rem;
max-width: min(22rem, calc(100vw - 2rem));
padding: 0.6rem 0.95rem;
border-radius: 0; /* sharp edges, matching the rest of the app */
/* Match the site's dark card surface + hairline border (not a lone drop
shadow) so the toast reads as part of the UI, not a browser popup. */
background: rgba(18, 18, 18, 0.94);
color: #fafafa;
font-family: "Darker Grotesque", sans-serif;
font-size: 1.15rem;
font-weight: 600;
line-height: 1.15;
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
border: 1px solid rgba(255, 255, 255, 0.12);
border-left: 4px solid #888;
opacity: 0;
/* translateX(-50%) keeps it centered; the Y offset is the slide-in. */
transform: translate(-50%, -8px);
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast--visible {
opacity: 1;
transform: translate(-50%, 0);
}
/* Loading leans on the site's info-blue, success on green, error on the brand's
warning red — the same accents used elsewhere in the sheet. */
.toast--loading { border-left-color: var(--info-blue); }
.toast--success { border-left-color: #1ec773; }
.toast--error { border-left-color: #ff4d4f; }
@media (prefers-reduced-motion: reduce) {
.toast { transition: opacity 0.2s ease; transform: translate(-50%, 0); }
.toast-spinner { animation: none; }
}
.toast-icon {
width: 1.1rem;
height: 1.1rem;
object-fit: contain;
}
.toast-spinner {
width: 1rem;
height: 1rem;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.25);
border-top-color: var(--info-blue);
animation: toast-spin 0.7s linear infinite;
}
@keyframes toast-spin {
to { transform: rotate(360deg); }
}
/* 404 page (pages/shared.jsx NotFound → output/404.html) */
.notfound-page {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
text-align: center;
padding: 24px;
}
.notfound-logo { width: 180px; max-width: 60vw; height: auto; }
.notfound-title { font-size: 28px; margin: 0; }
.notfound-text { opacity: 0.7; margin: 0; }
.notfound-home-link {
margin-top: 8px;
padding: 10px 20px;
border-radius: 999px;
background: var(--brand, #ff7a00);
color: #fff;
text-decoration: none;
font-weight: 700;
}
/* ===== Site nav (listing pages) — the section links stand in for the old
"About ranking" header title, so they wear its style: brand-orange bold.
The current section is full-strength; the rest are dimmed until hover. ===== */
.site-nav {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.2rem 1.1rem;
}
/* Listing-page placement: the nav is its own standalone row of section links
at the top of .header-main, above the description text and the
PUBLIC/PERSONAL toggles (the logo column sits to its left, unaffected).
Left padding matches .header-info so the links line up with the text below. */
.header-nav {
padding-left: 1rem;
padding-right: 2rem;
margin-bottom: 0.4rem;
/* Bottom-align the row: the big "Tokyo" title and the smaller section links
share a baseline, so their text bottoms line up (baseline, not flex-end,
since the items have different font sizes / line-heights). */
align-items: baseline;
}
/* Auth entries + ranking hint: their own line right under the rank toggles,
right-aligned by the .header-buttons-wrap column. Plain text links styled
like the section links, not boxed buttons. */
.header-nav-auth {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.2rem 1.1rem;
margin-top: 0.15rem;
}
/* On pages with the PERSONAL toggle, the session badge ("Logged in" /
"Account needed") hangs below it out of flow (absolute, right-aligned) —
exactly where this line sits. Shift the line left so it ends right BESIDE
the badge with a slight gap. The two badge texts differ in width, so
session.js toggles --logged-in on this line along with the badges:
logged out → clear "Account needed" (~7.9rem), logged in → the narrower
"Logged in" (~5.7rem). */
.header-nav-auth--badge-gap {
margin-right: 8.4rem;
}
.header-nav-auth--badge-gap.header-nav-auth--logged-in {
margin-right: 6.2rem;
}
/* The nudge text to the buttons' left: explanatory copy, so it wears the
header description's style (.header-info-desc — muted grey 0.9rem). */
.header-nav-hint,
.header-nav-sep {
font-size: 0.9rem;
color: rgba(125,125,125,1);
}
/* Register / Log in / Profile: brand-orange bold labels like the site's other
nav/action labels (footer section links, About buttons), dimmed until
hovered — the same treatment as the inactive rank-toggles. */
.header-nav-btn {
font-size: 0.85rem;
font-weight: bold;
color: var(--brand);
opacity: 0.5;
cursor: pointer;
transition: opacity 0.15s ease;
}
.header-nav-btn:hover,
.header-nav-btn:focus-visible {
opacity: 1;
}
.site-nav-link {
/* Brand-orange bold like the footer's section links; the current section is
full-strength, the rest dimmed until hover (the rank-toggle pattern). */
color: var(--brand);
opacity: 0.35;
font-size: 0.85rem;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
transition: opacity 0.15s ease;
}
/* Location picker at the left end of the nav row: the site's purple rank
color (vs the orange section links) with a caret hinting at the dropdown.
Only Tokyo exists for now, so the menu is a one-entry placeholder. */
.location-picker,
.section-picker {
position: relative;
}
/* Section picker sits beside the location one and reuses .location-menu /
.location-menu-item for the dropdown; only the open-toggle selector differs.
Its button keeps the orange section-link look (.site-nav-link--current). */
.section-picker.open .section-menu {
display: block;
}
.section-toggle {
cursor: pointer;
}
.location-toggle {
/* Same size/weight as the section links it sits beside, just white instead of
the links' orange (and uppercase, inherited from .site-nav-link). */
color: #fff;
opacity: 1;
}
.location-menu {
display: none;
position: absolute;
top: calc(100% + 0.35rem);
left: 0;
z-index: 5;
min-width: 7rem;
padding: 0.3rem 0;
background-color: rgba(20, 20, 20, 1);
border: 0.0625rem solid rgba(255, 255, 255, 0.5);
box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.6);
}
.location-picker.open .location-menu {
display: block;
}
.location-menu-item {
display: block; /* section items are