/* ========================================================================== NESPL Portal — Edit Profile Components used only by candidate / industry / institute profile-edit pages. Built on the existing token system in style.css — no new colours invented. ========================================================================== */ /* ---------- Page layout: sticky section rail + form column ---------- */ .pe-layout { display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; align-items: start; } .pe-layout > * { min-width: 0; } /* ---------- Section rail (the completion checklist) ---------- */ .pe-rail { position: sticky; top: 90px; } .pe-rail__card { padding: 1.25rem; } .pe-rail__pct { font-family: var(--font-display); font-weight: 700; color: var(--green); } .pe-steps { list-style: none; padding: 0; margin: 1.1rem 0 0; position: relative; } .pe-steps::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; background: var(--line); border-radius: 2px; } .pe-step { position: relative; } .pe-step__link { display: flex; align-items: center; gap: .7rem; padding: .5rem .55rem; border-radius: 11px; color: var(--body); font-size: .88rem; font-family: var(--font-display); font-weight: 500; transition: background .2s, color .2s; cursor: pointer; } .pe-step__link:hover { background: var(--blue-50); color: var(--blue-700); } .pe-step__link.current { background: var(--blue-50); color: var(--blue-700); font-weight: 600; } .pe-step__tick { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px; display: grid; place-items: center; background: #fff; border: 2px solid var(--line); color: var(--muted); font-size: .8rem; position: relative; z-index: 2; transition: .28s cubic-bezier(.2,.8,.2,1); } .pe-step.done .pe-step__tick { background: var(--grad-green); border-color: transparent; color: #fff; } .pe-step.done .pe-step__link { color: var(--ink); } /* Mobile: rail turns into a horizontal chip strip */ .pe-rail__scroll { display: contents; } /* ---------- Section cards ---------- */ .pe-sec { scroll-margin-top: 92px; margin-bottom: 1.25rem; } .pe-sec__head { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .pe-sec__ico { width: 44px; height: 44px; border-radius: 13px; flex: 0 0 44px; display: grid; place-items: center; color: #fff; font-size: 1.15rem; background: var(--grad-blue); } .pe-sec__ico.orange { background: var(--grad-orange); } .pe-sec__ico.green { background: var(--grad-green); } .pe-sec__ico.indigo { background: linear-gradient(135deg,#6366f1,#4338ca); } .pe-sec__head h5 { margin: 0; font-size: 1.05rem; } .pe-sec__head p { margin: 0; font-size: .8rem; color: var(--muted); } .pe-sec__body { padding: 1.5rem; } .pe-sec__foot { padding: .9rem 1.5rem; border-top: 1px dashed var(--line); background: var(--surface-2); display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; border-radius: 0 0 var(--radius) var(--radius); } /* ---------- Field grid ---------- auto-fit rather than a fixed two-column track: the form column is sized by its container (the 264px shell sidebar and the 280px section rail take ~584px out of the viewport), so a viewport breakpoint fires far too late — between roughly 1100px and 1250px each fixed column was only ~230-275px wide and its inputs were crushed. This drops to one column whenever two cannot each hold a usable field, whatever the viewport is doing. min(100%, 280px) keeps the track from ever exceeding the container. */ .pe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0 1.1rem; } .pe-grid > * { min-width: 0; } .pe-grid .span-2 { grid-column: 1 / -1; } /* ---------- Visibility control ("show this field on the public profile") One markup, four looks. Put a variant class on any ancestor (usually ) to switch the whole page at once: .vis-pill → tinted pill with an eye icon and state word (default) .vis-icon → icon only, most compact for a long form .vis-seg → Show / Hide segmented control, most explicit .vis-switch → conventional sliding switch ---------------------------------------------------------------------- */ .vis-wrap { display: flex; align-items: center; justify-content: flex-end; } .vis { position: relative; display: inline-flex; cursor: pointer; user-select: none; } .vis input { position: absolute; opacity: 0; width: 0; height: 0; } .vis__ui { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-display); font-weight: 600; font-size: .78rem; border-radius: 999px; transition: background .2s, color .2s, border-color .2s; white-space: nowrap; } .vis__on, .vis__off { display: inline-flex; align-items: center; gap: .38rem; } .vis__track { display: none; } .vis input:focus-visible ~ .vis__ui { box-shadow: var(--ring); } /* ---- default: pill ---- */ .vis__ui { padding: .42rem .8rem; border: 1.5px solid transparent; background: var(--green-soft); color: #15803d; border-color: #bbf7d0; } .vis input:not(:checked) ~ .vis__ui { background: var(--surface-2); color: var(--muted); border-color: var(--line); } .vis input:checked ~ .vis__ui .vis__off { display: none; } .vis input:not(:checked) ~ .vis__ui .vis__on { display: none; } .vis:hover .vis__ui { filter: brightness(.97); } /* ---- icon only ---- */ .vis-icon .vis__ui { padding: 0; background: none; border-color: transparent; } .vis-icon .vis__ui b { display: none; } .vis-icon .vis__on, .vis-icon .vis__off { width: 38px; height: 38px; border-radius: 11px; justify-content: center; font-size: 1rem; border: 1.5px solid var(--line); background: #fff; transition: .2s; } .vis-icon .vis__on { background: var(--green-soft); border-color: #bbf7d0; color: #15803d; } .vis-icon .vis__off { color: var(--muted); } .vis-icon .vis:hover .vis__on { background: #dcfce7; } .vis-icon .vis:hover .vis__off { border-color: var(--blue-200); color: var(--blue-600); } /* ---- segmented ---- */ .vis-seg .vis__ui { padding: 3px; gap: 0; background: var(--surface-2); border-color: var(--line); border-radius: 11px; } .vis-seg .vis__on, .vis-seg .vis__off { display: inline-flex !important; padding: .34rem .7rem; border-radius: 8px; transition: .2s; color: var(--muted); background: transparent; } .vis-seg .vis input:checked ~ .vis__ui .vis__on { background: var(--grad-green); color: #fff; box-shadow: var(--shadow-xs); } .vis-seg .vis input:not(:checked) ~ .vis__ui .vis__off { background: #fff; color: var(--ink); box-shadow: var(--shadow-xs); } .vis-seg .vis input:checked ~ .vis__ui { background: var(--surface-2); color: var(--muted); border-color: var(--line); } /* ---- conventional switch ---- */ .vis-switch .vis__ui { padding: 0; background: none; border-color: transparent; gap: .5rem; } .vis-switch .vis__on, .vis-switch .vis__off { order: 2; } .vis-switch .vis__on i, .vis-switch .vis__off i { display: none; } .vis-switch .vis__on b { color: #15803d; } .vis-switch .vis__off b { color: var(--muted); } .vis-switch .vis__track { display: block; order: 1; position: relative; width: 44px; height: 25px; flex: none; background: #cfd8e6; border-radius: 999px; transition: background .25s; } .vis-switch .vis__track i { position: absolute; left: 3px; top: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs); transition: transform .25s; } .vis-switch .vis input:checked ~ .vis__ui .vis__track { background: var(--grad-green); } .vis-switch .vis input:checked ~ .vis__ui .vis__track i { transform: translateX(19px); } /* Field + visibility control side by side. Flex with wrap instead of a 1fr/auto grid: on a wide row this lays out identically, but once the field would be squeezed below 240px the pill drops onto its own line rather than crushing the input. That matters most where a .pe-f sits inside a .pe-grid column, which the institute form does. */ .pe-f { display: flex; flex-wrap: wrap; gap: .9rem; align-items: flex-end; } .pe-f > .field { flex: 1 1 240px; min-width: 0; margin-bottom: 1.1rem; } .pe-f > .vis-wrap { flex: 0 0 auto; margin-bottom: 1.1rem; padding-bottom: .55rem; } /* ---------- Chip option group (single / multi choice) ---------- */ .opts { display: flex; flex-wrap: wrap; gap: .5rem; } .opt { border: 1.5px solid var(--line); background: #fff; color: var(--body); font-family: var(--font-display); font-weight: 500; font-size: .85rem; padding: .5rem .95rem; border-radius: 11px; cursor: pointer; transition: .18s; display: inline-flex; align-items: center; gap: .4rem; } .opt:hover { border-color: var(--blue-200); color: var(--blue-700); background: var(--blue-50); } .opt.on { background: var(--grad-blue); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(37,99,235,.28); } .opt.on:hover { color: #fff; } /* Benefit tiles — icon above label */ .opt-tile { flex-direction: column; gap: .35rem; padding: .9rem .6rem; min-width: 116px; flex: 1 1 116px; text-align: center; } .opt-tile i { font-size: 1.3rem; } /* ---------- Tag / multi-select display ---------- */ .tagbox { width: 100%; border: 1.5px solid var(--line); background: var(--surface-2); border-radius: 12px; padding: .5rem .6rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; min-height: 50px; transition: border-color .2s, box-shadow .2s, background .2s; } .tagbox:focus-within { border-color: var(--blue-500); background: #fff; box-shadow: var(--ring); } .tag { display: inline-flex; align-items: center; gap: .35rem; background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-100); border-radius: 999px; padding: .25rem .3rem .25rem .7rem; font-size: .82rem; font-weight: 500; } .tag button { border: none; background: transparent; color: var(--blue-700); cursor: pointer; line-height: 1; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; } .tag button:hover { background: var(--blue-100); color: var(--red); } .tagbox input { border: none; background: transparent; outline: none; flex: 1; min-width: 110px; font-size: .9rem; color: var(--ink); padding: .3rem; } /* ---------- Repeatable entry blocks ---------- */ .rpt-list { display: flex; flex-direction: column; gap: 1rem; } .rpt { border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 1.15rem; background: var(--surface-2); position: relative; transition: border-color .2s, box-shadow .2s; animation: peIn .32s cubic-bezier(.2,.8,.2,1) both; } .rpt:hover { border-color: var(--blue-200); } .rpt__bar { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; } .rpt__n { width: 26px; height: 26px; border-radius: 8px; background: var(--blue-50); color: var(--blue-700); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .78rem; flex: 0 0 26px; } .rpt__title { font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--ink); margin: 0; } .rpt__del { margin-left: auto; border: 1px solid var(--line); background: #fff; color: var(--muted); width: 32px; height: 32px; border-radius: 9px; cursor: pointer; transition: .2s; } .rpt__del:hover { color: var(--red); border-color: #fdd; background: #fff5f5; } @keyframes peIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .btn-add { background: var(--blue-50); color: var(--blue-700); border: 1.5px dashed var(--blue-200); width: 100%; padding: .8rem; border-radius: 12px; font-family: var(--font-display); font-weight: 600; cursor: pointer; transition: .2s; font-size: .9rem; } .btn-add:hover { background: var(--blue-100); border-style: solid; } /* ---------- Upload areas ---------- */ .upl { border: 1.5px dashed var(--line); border-radius: 12px; background: var(--surface-2); padding: 1.1rem; text-align: center; cursor: pointer; transition: .2s; display: block; } .upl:hover { border-color: var(--blue-400); background: var(--blue-50); } .upl i { font-size: 1.5rem; color: var(--blue-600); display: block; margin-bottom: .3rem; } .upl b { font-family: var(--font-display); font-size: .88rem; color: var(--ink); display: block; } .upl small { color: var(--muted); font-size: .74rem; } .upl input[type="file"] { display: none; } /* Avatar / logo picker */ .pick { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem; border: 1.5px dashed var(--line); border-radius: 12px; background: var(--surface-2); } .pick > *:not(.pick__img) { min-width: 0; } .pick__img { width: 76px; height: 76px; border-radius: 18px; flex: 0 0 76px; display: grid; place-items: center; background: var(--grad-blue); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; overflow: hidden; } .pick__img.square { border-radius: 14px; } /* Media gallery */ .thumbs { display: flex; flex-wrap: wrap; gap: .7rem; } .thumb { width: 104px; height: 84px; border-radius: 12px; overflow: hidden; position: relative; background: var(--blue-50); border: 1px solid var(--line); display: grid; place-items: center; color: var(--blue-600); font-size: 1.4rem; } .thumb__x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: none; background: var(--red); color: #fff; cursor: pointer; font-size: .65rem; display: grid; place-items: center; box-shadow: var(--shadow-xs); } .thumb__x:hover { background: #dc2626; } .thumb-add { width: 104px; height: 84px; border-radius: 12px; border: 1.5px dashed var(--line); background: var(--surface-2); color: var(--muted); cursor: pointer; display: grid; place-items: center; gap: .1rem; font-size: .72rem; font-family: var(--font-display); transition: .2s; } .thumb-add:hover { border-color: var(--blue-400); color: var(--blue-600); background: var(--blue-50); } .thumb-add i { font-size: 1.2rem; } /* ---------- Helpers ---------- */ .charc { display: block; text-align: right; font-size: .72rem; color: var(--muted); margin-top: .25rem; } .charc.over { color: var(--red); font-weight: 600; } .hint { font-size: .76rem; color: var(--muted); margin-top: .3rem; display: block; } .pe-sub { font-family: var(--font-display); font-weight: 600; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: .4rem 0 .9rem; display: flex; align-items: center; gap: .6rem; } .pe-sub::after { content: ""; flex: 1; height: 1px; background: var(--line); } .inline-link { background: none; border: none; color: var(--blue-600); font-weight: 600; font-size: .82rem; cursor: pointer; padding: .35rem 0; font-family: var(--font-display); min-height: 28px; } .inline-link:hover { color: var(--blue-700); text-decoration: underline; } /* Skill row: name + level. Flex-wrap for the same reason as .pe-f — the 190px level select used to be a fixed track, so in a narrow form column the name input was squeezed to nothing instead of the select wrapping under it. */ .skill-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .6rem; } .skill-row > .input-x { flex: 1 1 200px; min-width: 0; } .skill-row > .form-select { flex: 1 1 170px; min-width: 0; max-width: 190px; } .skill-row .rpt__del { flex: 0 0 auto; margin-left: 0; } /* Sticky save bar */ .savebar { position: sticky; bottom: 0; z-index: 30; margin-top: 1.25rem; background: rgba(255,255,255,.9); backdrop-filter: blur(14px) saturate(160%); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1.2rem; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; box-shadow: var(--shadow); } .savebar .grow { flex: 1; min-width: 140px; } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { .pe-layout { grid-template-columns: 1fr; } .pe-rail { position: static; } .pe-rail__card { padding: 1rem; } .pe-steps { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .4rem; margin-top: .9rem; } .pe-steps::before { display: none; } .pe-step { flex: 0 0 auto; } .pe-step__link { border: 1.5px solid var(--line); white-space: nowrap; padding: .45rem .8rem; } .pe-step__tick { width: 22px; height: 22px; flex-basis: 22px; font-size: .68rem; } .pe-steps::-webkit-scrollbar { height: 6px; } .pe-steps::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; } } @media (max-width: 700px) { .pe-grid { grid-template-columns: 1fr; } .pe-sec__body, .pe-sec__head { padding: 1.1rem; } .pe-sec__foot { padding: .8rem 1.1rem; } /* One field per line, with the visibility pill left-aligned beneath it. .pe-f and .skill-row are flex containers now, so force the wrap with a full-width basis rather than by rewriting grid tracks. */ .skill-row > .form-select { flex-basis: 100%; max-width: none; } .pe-f { align-items: flex-start; } .pe-f > .field { flex-basis: 100%; } .pe-f > .vis-wrap { justify-content: flex-start; margin-bottom: 1.1rem; padding-bottom: 0; margin-top: -.6rem; } .savebar { padding: .75rem .9rem; } .savebar .btn { flex: 1 1 auto; } } /* ---------- Entrance animation ---------- Deliberately CSS-only. The portal's scroll-reveal hides elements at opacity:0 until 12% of them scrolls into view, which a full-page form column can never satisfy — so these panels animate on load instead and can never be left stranded invisible. */ @keyframes peRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .pe-rail__card { animation: peRise .45s cubic-bezier(.2,.8,.2,1) both; } .pe-sec { animation: peRise .45s cubic-bezier(.2,.8,.2,1) both; } .pe-sec:nth-of-type(1) { animation-delay: .04s; } .pe-sec:nth-of-type(2) { animation-delay: .08s; } .pe-sec:nth-of-type(3) { animation-delay: .12s; } .pe-sec:nth-of-type(4) { animation-delay: .16s; } .pe-sec:nth-of-type(5) { animation-delay: .20s; } .pe-sec:nth-of-type(6) { animation-delay: .24s; } .pe-sec:nth-of-type(7) { animation-delay: .28s; } .pe-sec:nth-of-type(8) { animation-delay: .32s; } .savebar { animation: peRise .45s cubic-bezier(.2,.8,.2,1) .34s both; } /* Touch devices get larger hit areas on the small inline controls */ @media (pointer: coarse) { .tag { padding: .3rem .35rem .3rem .75rem; } .tag button { width: 26px; height: 26px; } .thumb__x { width: 28px; height: 28px; top: 5px; right: 5px; font-size: .75rem; } .rpt__del { width: 38px; height: 38px; } .opt { padding: .6rem 1rem; } } @media (prefers-reduced-motion: reduce) { .rpt { animation: none; } .pe-rail__card, .pe-sec, .savebar { animation: none; } .sw__slider, .sw__slider::before, .pe-step__tick { transition: none; } }