. Other lone .narrow boxes (forms) sit centered on the page. */ .status-card { max-width: none; } @media (min-width: 601px) { /* phones keep left-aligned words: the box already fills the screen there */ .status-card { text-align: center; } .status-card p { margin-inline: auto; text-wrap: balance; } .status-card .button-row { justify-content: center; } } main:not(.narrow-page) .page-body > .card.narrow { margin-inline: auto; } /* Action log table */ .table-scroll { overflow-x: auto; margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); } .log-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); } /* Officer Tools Action Log: names and actions stay on one line and Details gets room, so on phones the table scrolls sideways in its box instead of squeezing names to one word per line (readability review R27, 2026-10-14) */ #log .log-table td:nth-child(2), #log .log-table td:nth-child(3), #log .log-table td:nth-child(4) { white-space: nowrap; } #log .log-table td:nth-child(5) { min-width: 14rem; } .log-table th, .log-table td { padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .log-table th { color: var(--navy); white-space: nowrap; } .log-table td:first-child { white-space: nowrap; } .log-table tr:last-child td { border-bottom: 0; } @media (max-width: 820px) { .mentor-grid, .mentorship-status { grid-template-columns: 1fr; } .mentorship-status .card-action { justify-self: start; } .field-row { grid-template-columns: 1fr; } .filter-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem; } .filter-search { grid-column: 1 / -1; } .filter-submit { justify-self: start; } .filter-more { grid-template-columns: 1fr; gap: 0.75rem; } /* Rows become two short lines: name and class year, then location, work and the Mentor tag */ .dir-head { display: none; } .dir-entry > summary { grid-template-columns: var(--avatar-sm) minmax(0, 1fr) auto; grid-template-areas: "av name year" "av place place" "av work work"; gap: 0.1rem 0.75rem; } .dir-entry > summary .avatar { grid-area: av; align-self: start; margin-top: 0.1rem; } .dir-name { grid-area: name; } .dir-year { grid-area: year; text-align: right; } .dir-place { grid-area: place; } .dir-work { grid-area: work; } /* Same height when a member hasn't shared a location or work: the empty line keeps its room */ .dir-place:empty::before, .dir-work:empty::before { content: "\00a0"; } } @media (max-width: 600px) { /* Progress line: three bars, with "Step 2 of 3: Your Background" under them (the labels don't fit at 320 px) */ .progress-steps { margin-bottom: 0.5rem; } .progress-steps li { height: 0; padding-top: 0; overflow: hidden; color: transparent; } .progress-caption { display: block; margin: 0 0 1.25rem; font-weight: bold; color: var(--navy); } /* Removable filter tags and "Clear all": full 44 px tap targets on phones */ .filter-tag, .active-filters .link-button { min-height: 44px; } /* My Profile mentoring topics: each tick-box row is a full 44 px tap target (standards check S11) */ .check-grid .check { min-height: 44px; } .name-row { grid-template-columns: 1fr; } .name-row > div + div { margin-top: 0.75rem; } .event-form-row { grid-template-columns: 1fr; } .filter-main { grid-template-columns: 1fr; } .mentor-filters, .mentor-filters .filter-more { grid-template-columns: 1fr; gap: 0.75rem; } .profile-more .details { grid-template-columns: 1fr; } .dir-body .details { grid-template-columns: 1fr; } .details { grid-template-columns: 1fr; gap: 0.1rem; } .details dd { margin-bottom: 0.5rem; } .member-item > summary { grid-template-columns: 1fr; } } /* ---------- Mentorship Metrics (Officer Tools): large numbers, a target, a bar or month-by-month row ---------- */ .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--gutter); } .metric { display: flex; flex-direction: column; gap: 0.4rem; } .metric > * { margin: 0; } .metric h3 { margin: 0; font-size: var(--text-h3); } .metric-number { font-family: var(--heading-font); font-size: var(--text-h1); font-weight: 700; line-height: 1.05; color: var(--navy); } .metric-number small { font-family: var(--body-font); font-size: var(--text-small); font-weight: bold; } .metric-target { font-size: var(--text-small); font-weight: bold; color: var(--navy); } .metric-target .not-met { color: var(--red); } .metric-def { font-size: var(--text-small); } .metric-pending { color: var(--navy); } /* The bar's width and the target mark are set by js/mentorship.js (styles can't be written into member pages) */ .meter { position: relative; height: 0.75rem; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); } .meter > span { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--navy); } .meter > i { position: absolute; top: -0.3rem; bottom: -0.3rem; width: 3px; margin-left: -1px; background: var(--red); border-radius: 2px; } /* Always one row: each month (or answer) gets an equal share of the width */ .month-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.4rem; list-style: none; margin: 0; padding: 0; } .month-row li { max-width: none; text-align: center; padding: 0.35rem 0.2rem; border-radius: 8px; background: var(--cream); font-size: var(--text-label); color: var(--navy); } .month-row b { display: block; font-size: var(--text-body); } .month-row .below { box-shadow: inset 0 -3px 0 var(--red); } .metric-round { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; } .metric-round select { width: auto; } /* Rolling pairing (2026-10-26): the board report's period picker and the "Right Now" figures */ .metric-period { align-items: flex-end; margin-bottom: 0.75rem; } .metric-period .member-form { margin: 0; } .metric-period input[type="date"] { width: auto; } .now-row { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); margin-bottom: 1.5rem; } .now-row li { padding: 0.6rem 0.4rem; background: var(--white); box-shadow: var(--shadow-soft); border: 1px solid var(--line); } .survey-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--gutter); margin-bottom: var(--gutter); } .survey-totals h4 { margin: 0; } .comment-list { list-style: none; padding: 0; margin: 0; } .comment-list li { padding: 0.75rem 0; border-bottom: 1px solid var(--line); } .comment-list li:last-child { border-bottom: 0; } /* ---------- The end-of-round survey and "We Met Another Way" ---------- */ .survey-role + .survey-role { margin-top: var(--gutter); } #survey { margin-bottom: var(--space-section); } /* 1 to 5: five equal buttons on one row, even on 320 px phones; the chosen one is filled navy. The round radio button is hidden from sight but still used by keyboards and screen readers. */ .rating-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; max-width: 20rem; } .rating-row .pill-choice { position: relative; justify-content: center; padding: 0.35rem 0; font-weight: bold !important; } .member-form .rating-row .pill-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; } .rating-row .pill-choice:has(input:checked) { background: var(--navy); color: var(--white) !important; } .rating-ends { display: flex; justify-content: space-between; max-width: 20rem; font-size: var(--text-small); color: var(--navy); margin: 0.25rem 0 0; } .survey-done { margin: 0; font-weight: bold; color: var(--navy); } @media (max-width: 600px) { .metric-number { font-size: var(--text-h1); } .month-row { gap: 0.25rem; } .month-row b { font-size: var(--text-body); } } /* Buttons that can't be used right now (for example Match when the round is full, or a check-in sent this week) look faded and don't lift on hover, so they're never mistaken for working buttons */ .button:disabled, .button:disabled:hover, .button:disabled:active { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; } .officer-list > .closed-note { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1rem; } /* Date boxes: Chrome puts keyboard focus inside the box, where the usual focus rule doesn't apply */ .member-form input[type="date"]:focus { outline: 3px solid var(--navy); outline-offset: 1px; } /* ---------- Profile photos (added 2026-10-25; mockups approved) ---------- */ /* My Profile: the photo box */ .photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; } .photo-actions { flex: 1; min-width: 14rem; } .photo-actions p { margin: 0; } .photo-actions .button-row { align-items: center; margin-bottom: 0.4rem; } .photo-actions .link-button { margin-left: 0; } /* The crop box: the photo in a square you drag; a circle shows what members will see */ .crop-dialog { width: min(30rem, calc(100% - 2 * var(--gutter))); } .crop-stage { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 8px; background: var(--navy); cursor: grab; touch-action: none; } .crop-stage:active { cursor: grabbing; } .crop-stage:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; } .zoom-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; } .zoom-row label { font-weight: 600; color: var(--navy); } .zoom-row input[type="range"] { flex: 1; min-height: 44px; accent-color: var(--navy); } .zoom-row input[type="range"]:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; } .photo-facts { margin: 0.5rem 0 1rem; font-size: var(--text-small); color: var(--navy); } /* Mentor and mentee cards: the photo beside the name and facts */ .person-top { display: flex; gap: 1rem; align-items: center; } .person-top > div { min-width: 0; flex: 1; } .person-top .person-head { margin-bottom: 0.2rem; } /* "Report Photo": a quiet link */ .report-photo { margin: 0.25rem 0 0; } .report-photo .link-button { margin-left: 0; font-size: var(--text-small); font-weight: normal; } /* Officer Tools: the photo before each name */ .member-item > summary.officer-row { grid-template-columns: auto minmax(0, 1fr) auto; } .member-summary.officer-row { display: flex; gap: 0.9rem; align-items: center; } .member-summary.officer-row > div { flex: 1; min-width: 0; } .photo-control { align-items: center; } .control-label { display: block; width: 100%; font-weight: 600; color: var(--navy); font-size: var(--text-small); } @media (max-width: 600px) { .member-item > summary.officer-row { grid-template-columns: auto minmax(0, 1fr); } .member-item > summary.officer-row::after { grid-column: 2; } .person-top { align-items: flex-start; } } /* ---------- Members' Home: Needs Your Attention, round dates, tool rows (added 2026-10-25; mockup approved) ---------- */ .attention { margin-bottom: var(--gutter); } .attention h2 { margin: 0 0 0.75rem; } .attention h2::after { display: none !important; } /* Nothing waiting: one slim line instead of a full box (2026-11-02 visual review, MH4) */ .attention.is-clear { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; padding-top: 1rem; padding-bottom: 1rem; } .attention.is-clear h2 { margin: 0; font-size: var(--text-h3); } .attention.is-clear .caught-up { margin: 0; } /* Coming Up with nothing open: the link to Events & News sits at the bottom of the box (MH1) */ .coming-up { display: flex; flex-direction: column; } .coming-up .coming-more { margin-top: auto; padding-top: 1rem; } .caught-up { margin: 0; } .todo-list { list-style: none; margin: 0; padding: 0; } .todo-list li { max-width: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.25rem 1rem; align-items: center; min-height: 64px; padding: 0.75rem 0; border-top: 1px solid var(--line); } .todo-list li:first-child { border-top: 0; padding-top: 0.25rem; } .todo-list p { margin: 0; max-width: none; } .todo-list .what { font-weight: bold; color: var(--navy); } .todo-list .sub { font-size: var(--text-small); overflow-wrap: anywhere; } .todo-list .button { min-height: 44px; padding: 0 1.1rem; } .todo-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--avatar-md); height: var(--avatar-md); border-radius: 50%; background: var(--cream); color: var(--navy); } .skel-button { width: 6rem; height: 44px; border-radius: 999px; } @media (max-width: 600px) { .todo-list li { grid-template-columns: auto minmax(0, 1fr); align-items: start; } .todo-list li > .button { grid-column: 2; justify-self: start; } .todo-list li.todo-skeleton > .skel-button { grid-column: 2; } } /* The round's dates: passed ones get a tick and step back; the next one is red (A7) */ .round-dates .is-done { color: rgba(37, 57, 87, 0.78); } .round-dates .is-done::before { content: "✓ "; font-weight: bold; } /* Phones: the four tools as short rows instead of a screen each (A12) */ .tool-rows-card { display: none; } @media (max-width: 600px) { .member-paths { display: none; } .tool-rows-card { display: block; padding: 0.25rem var(--space-card); margin-top: var(--gutter); } .tool-rows { list-style: none; margin: 0; padding: 0; } .tool-rows li { max-width: none; border-top: 1px solid var(--line); } .tool-rows li:first-child { border-top: 0; } .tool-rows a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.1rem 0.9rem; align-items: center; min-height: 64px; padding: 0.6rem 0; text-decoration: none; color: var(--text); } .tool-rows img { grid-row: 1 / span 2; width: var(--icon-sm); height: var(--icon-sm); } .tool-rows b { color: var(--navy); font-size: var(--text-body); } .tool-rows span { grid-column: 2; font-size: var(--text-small); } .tool-rows a:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; } } /* ---------- My Profile: a folding section, the Notifications box (A5; mockup approved) ---------- */ .fold { padding: 0; } .fold > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; align-items: center; padding: var(--space-card); cursor: pointer; list-style: none; border-radius: var(--radius); } .fold > summary::-webkit-details-marker { display: none; } .fold > summary h2 { margin: 0; } .fold > summary .hint { grid-column: 1; } .fold > summary .open-label { grid-row: 1 / span 2; grid-column: 2; font-weight: bold; color: var(--navy); text-decoration: underline; text-underline-offset: 0.18em; } .fold > summary .open-label::after { content: "Open +"; } .fold[open] > summary .open-label::after { content: "Close −"; } .fold > summary:hover .open-label { color: var(--red); } .fold > summary:focus-visible { outline: 3px solid var(--navy); outline-offset: -3px; } .fold > .fold-body { padding: 0 var(--space-card) var(--space-card); } .progress-pill { display: inline-block; margin-left: 0.25rem; padding: 0.05rem 0.6rem; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); font-size: var(--text-label); font-weight: bold; color: var(--navy); white-space: nowrap; } .member-form.wide-form { max-width: none; margin-top: 0; } .profile-form .page-nav, .page-body > .page-nav { margin-bottom: var(--gutter); } /* The Directory's tag for members open to informal mentoring */ .mentor-tag { white-space: nowrap; } /* ---------- Find a Mentor: Industry first, and richer cards (A11; mockup approved) ---------- */ .mentor-filters.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mentor-filters.three .filter-more { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 820px) { .mentor-filters.three, .mentor-filters.three .filter-more { grid-template-columns: 1fr; gap: 0.75rem; } } .goal-line { margin: 0; font-size: var(--text-small); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .goal-line b { color: var(--navy); } .person-card .spots { margin: 0 0 0.5rem; font-size: var(--text-small); font-weight: bold; color: var(--navy); } /* ---------- Officer Tools: actions that can't be undone sit apart, in red (A6, A10) ---------- */ .danger-zone { margin-top: 0.25rem; padding-top: 1rem; border-top: 1px solid var(--line); } .danger-zone h4 { margin: 0 0 0.5rem; font-family: var(--body-font); font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); } .page-nav a .count-badge { margin-left: 0.45rem; } #mentors-showing { margin-top: 0.75rem; } /* ---------- Small fixes (2026-10-25) ---------- */ /* My Mentorship's "What Happens Next": steps already past (A7) */ #next-steps li.is-done { color: rgba(37, 57, 87, 0.78); } #next-steps li.is-done::marker { content: "✓ "; font-weight: bold; } /* Standalone links are full-size tap targets (A19) */ .help-list a { display: inline-flex; align-items: center; min-height: 44px; } .help-list li { padding: 0.35rem 0; } .help-list li:first-child { padding-top: 0; } /* ---------- No jumping while a page fills in (A4; target: layout shift under 0.05) ---------- These pages draw their content after asking the server. The content area starts at nearly a full screen, so the footer is below the fold from the first moment and nothing on screen moves when the content arrives. (Pages that are complete as written, like Sign In, don't need it.) */ body[data-page="home"] .page-body, body[data-page="profile"] .page-body, body[data-page="directory"] .page-body, body[data-page="events"] .page-body, body[data-page="officers"] .page-body, body[data-page="find-a-mentor"] .page-body, body[data-page="mentorship"] .page-body, body[data-page="call"] .page-body, body[data-page="complete-profile"] .page-body, body[data-page="person"] .page-body, body[data-page="messages"] .page-body { /* 7rem since the slim title band (2026-11-02): the band is shorter, so the reserve is taller */ min-height: calc(100vh - 7rem); } /* Once the page has stopped changing, js/members.js adds "is-settled" and the space is let go, so short pages don't end with a screen of empty space (layout review V2, 2026-11-03). The call page keeps it. */ body.is-settled:not([data-page="call"]) .page-body { min-height: 0; } /* The rest of A4: keep space for text filled in after loading */ body[data-page="find-a-mentor"] .page-hero .lead, body[data-page="mentorship"] .page-hero .lead, body[data-page="complete-profile"] .page-hero .lead { min-height: 2lh; } body[data-page="call"] .page-body { min-height: 100vh; } .result-bar { min-height: 2.75rem; } .directory-list:empty { min-height: 70vh; border-color: transparent; background: transparent; } /* Officer Tools: the lists appear together once loaded (the "On this page" pills show straight away) */ .is-filling > :not(.page-nav):not(noscript) { visibility: hidden; } /* ---------- Independent review fixes (2026-10-26) ---------- */ /* #2: while a docked window is open, the page keeps room at the bottom so nothing reached with Tab sits under it */ @media (min-width: 981px) { body.has-dock-open { padding-bottom: 30rem; } html:has(body.has-dock-open) { scroll-padding-bottom: 30rem; } } /* #3: windows and the list restored on the next page appear without the "rise" animation */ .dock-win.no-anim, .dock-col.no-anim .dock-panel { animation: none !important; } /* #4: on the narrowest phones "Your" drops ("mentee · ..."), and the header's class year may wrap */ @media (max-width: 400px) { .role-your { display: none; } } @media (max-width: 600px) { .thread-who p { white-space: normal; overflow: visible; text-overflow: clip; } } /* #12: in docked windows, tapping a bubble shows its time underneath */ .dock-win .bub.show-time::after { display: block; position: static; margin-top: 0.2rem; } /* #5: the "Who can see this" choice inside the crop box */ .crop-privacy { margin-top: 1rem; max-width: 18rem; } /* "Add your own" under a list of choices (since 2026-10-27): a short text box with an Add button */ .add-own { margin-top: 0.75rem; } .add-own label { font-weight: 600; color: var(--navy); } .add-own-row { display: flex; gap: 0.5rem; align-items: stretch; max-width: 28rem; } .add-own-row input { flex: 1; min-width: 0; } .add-own-row .button { flex: none; padding-inline: 1.25rem; } .add-own .hint { margin-top: 0.25rem; } .short-input { max-width: 8rem; } /* "… is calling you" (since 2026-10-27): a navy banner at the top of every member page while the other person in a pair has a video call open. It stays in view while scrolling (sticky). */ .call-alert { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; padding: 0.85rem var(--gutter); background: var(--navy); color: var(--white); border-bottom: 4px solid var(--gold); box-shadow: var(--shadow-lift); } .call-alert-icon { display: grid; place-items: center; width: var(--icon-sm); height: var(--icon-sm); border-radius: 50%; background: var(--gold); color: var(--navy); flex: none; } .call-alert-icon svg { width: 1.3rem; height: 1.3rem; } .call-alert-text { flex: 1 1 14rem; min-width: 0; } .call-alert-text p { margin: 0; max-width: none; } .call-alert-what { font-weight: 700; font-size: var(--text-large, 1.15rem); } .call-alert-sub { font-size: var(--text-small); opacity: 0.9; } .call-alert-actions { display: flex; align-items: center; gap: 1rem; } .call-alert .link-button { color: var(--white); min-height: 44px; } .call-alert .link-button:focus-visible, .call-alert .button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } @media (prefers-reduced-motion: no-preference) { .call-alert-icon { animation: call-pulse 1.6s ease-out infinite; } @keyframes call-pulse { 0% { box-shadow: 0 0 0 0 rgba(248, 200, 36, 0.6); } 100% { box-shadow: 0 0 0 0.9rem rgba(248, 200, 36, 0); } } } @media (max-width: 600px) { .call-alert-actions { width: 100%; } .call-alert-actions .button { flex: 1; text-align: center; } } /* Directory: "Send a Message" and its note (direct messages, since 2026-10-27) */ .dir-message { margin-top: 0.75rem; } .dm-form { max-width: 36rem; margin-top: 0.5rem; } /* ========================================================== MEMBERS' MENU, PHONE TAB BAR AND SLIM TITLE BAND (Part A, 2026-11-02; mockup approved by Bahn). On every member page except Sign In, Request, Pending and Inactive (they keep the public menu). Only the six brand colors and the existing tokens. ========================================================== */ /* The navy members' bar under the Obangsaek stripe (computers, 981 px and up). "MEMBERS" in gold capitals tells it apart from the public menu above (both have a Home). The current page is bold with a GOLD line underneath, the same way the navy phone menu marks it (red on navy is only 1.6:1, too faint to see). */ .member-nav { background: var(--navy); border-bottom: 1px solid rgba(250, 245, 232, 0.18); } .member-nav-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: stretch; min-height: 3.25rem; } .member-nav .nav-label { align-self: center; margin-right: 0.9rem; color: var(--gold); font-size: var(--text-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .member-nav ul { display: flex; align-items: stretch; gap: 0.15rem; flex: 1; list-style: none; margin: 0; padding: 0; } .member-nav li { display: flex; max-width: none; } .member-nav li[hidden] { display: none; } .member-nav li.push { margin-left: auto; } .member-nav a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 0.8rem; color: var(--white); text-decoration: none; font-size: var(--text-small); white-space: nowrap; } .member-nav a:hover { color: var(--gold); } .member-nav a[aria-current="page"] { font-weight: bold; box-shadow: inset 0 -3px 0 var(--gold); } .member-nav :focus-visible { outline-color: var(--gold); outline-offset: -3px; } .member-nav .count-badge { margin-left: 0; } /* One bar instead of two (2026-11-03, Bahn): on computers the cream "Signed in as" line is left out of pages with the members' bar, and the bar ends with who is signed in and Sign Out (filled in by js/members.js). The public pages are one click away in the cream header. Phones keep the cream line. */ @media (min-width: 981px) { .js body.has-member-nav .member-line { display: none; } } .member-nav .nav-account { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; padding-left: 0.9rem; } .member-nav li.push:not([hidden]) + .nav-account { margin-left: 0.6rem; border-left: 1px solid rgba(250, 245, 232, 0.25); } .member-nav .nav-who { max-width: 13rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cream); opacity: 0.85; font-size: var(--text-small); } .member-nav .nav-signout { min-height: 44px; padding: 0 0.8rem; background: none; border: 0; color: var(--white); font: 600 var(--text-small) var(--body-font); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; white-space: nowrap; } .member-nav .nav-signout:hover { color: var(--gold); } @media (max-width: 1199px) { .member-nav .nav-who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } } /* The phone menu's "Members’ Area" group and Sign Out (hidden on computers, where the members' bar shows) */ .site-nav .phone-only { display: none; } /* The public links keep their 4-left, 3-right split around the logo */ .site-nav li.left-end { margin-right: auto; } /* Slim title band: about half the height of a public page's band, with the same picture and tint. Members' Home is a little taller, for the greeting. */ .page-hero.page-hero-slim { min-height: 0; padding: 2rem 0 1.75rem; } .page-hero-slim h1 { margin: 0 0 0.35rem; font-size: var(--text-h1); } .page-hero-slim .lead { font-size: var(--text-body); } .page-hero.page-hero-greet { padding: 2.75rem 0 2.25rem; } .page-hero-slim + .page-body { padding-top: 2.25rem; } body[data-page="messages"] .page-hero-slim h1 { margin: 0; } @media (max-width: 980px) { .member-nav { display: none; } .js .site-nav .phone-only { display: block; } .js .site-nav .menu-group { margin: 0; padding: 1rem 0.25rem 0.25rem; color: var(--gold); font-size: var(--text-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .js .site-nav ul.phone-only { margin-bottom: 0.5rem; } .js .site-nav li.left-end { margin-right: 0; } .js .site-nav .menu-signout-row { margin: 1rem 0 0; } .js .site-nav .menu-signout { display: flex; align-items: center; min-height: 48px; padding: 0 0.25rem; background: none; border: 0; color: var(--white); font: 700 1.1rem var(--body-font); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; } .js .site-nav .menu-signout:hover { color: var(--gold); } /* The members' tab bar. It keeps the class "action-bar", so every rule that hides the old Join/Donate bar (menu open, My Profile's save bar, a full-screen conversation, the call page) hides it too, and the page keeps the same room at the bottom (4.25rem, standards check S2). */ .action-bar.tab-bar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 0; justify-content: stretch; padding: 0 0 env(safe-area-inset-bottom); } .menu-lock .action-bar.tab-bar, .has-changes .action-bar.tab-bar, .msg-thread-open .action-bar.tab-bar { display: none; } .tab-bar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; min-height: 4.25rem; padding: 0.35rem 0.1rem; color: var(--navy); text-decoration: none; line-height: 1.15; text-align: center; /* 12.8 px, down to 11.5 px on the narrowest phones so "Mentorship" fits a 64 px tab (approved 2026-11-02) */ font-size: clamp(0.72rem, 3.6vw, 0.8rem); letter-spacing: -0.01em; } .tab-bar a[hidden] { display: none; } .tab-bar a:hover { color: var(--red); } .tab-bar .icon { width: 1.5rem; height: 1.5rem; } .tab-bar .tab-icon { position: relative; display: inline-flex; padding: 0.15rem 0.85rem; border-radius: 999px; } /* Current tab: bold, a cream pill behind the icon and a short red line along the top */ .tab-bar a[aria-current="page"] { font-weight: bold; } .tab-bar a[aria-current="page"] .tab-icon { background: var(--cream); } .tab-bar a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--red); } /* The unread count sits on the Messages icon */ .tab-bar .count-badge { position: absolute; top: 0.2rem; left: calc(50% + 0.45rem); min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem; font-size: 0.7rem; border: 2px solid var(--white); } .tab-bar :focus-visible { outline-offset: -3px; } .page-hero.page-hero-slim { padding: 1.4rem 0 1.25rem; } .page-hero-slim h1 { font-size: var(--text-h1); } .page-hero.page-hero-greet { padding: 1.75rem 0 1.5rem; } .page-hero-slim + .page-body { padding-top: 1.5rem; } } /* Tablets: the five tabs stay a comfortable width, centered */ @media (min-width: 601px) and (max-width: 980px) { .action-bar.tab-bar { grid-auto-columns: minmax(0, 8rem); justify-content: center; } } /* ========================================================== PROFILES PEOPLE WANT TO COMPLETE, AND FINDING THE RIGHT PERSON (Parts B and C, 2026-11-02; mockups approved by Bahn). Only the six brand colors and the existing tokens. ========================================================== */ /* Shared: a heading with a small link or note at the right; chips; avatars at the largest size */ .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; } .card-head h2 { margin: 0; } .avatar-xl { width: 7.5rem; height: 7.5rem; font-size: 2.4rem; } .chip-list { list-style: none; margin: 0.4rem 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; } .chip-list li { display: inline-flex; align-items: center; min-height: 2rem; max-width: none; padding: 0.15rem 0.75rem; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); color: var(--navy); font-size: var(--text-small); } .chip-list li.shared { border-color: var(--navy); font-weight: bold; } .chip-list li.more-chip { background: var(--white); font-weight: bold; } .button-small { min-height: 44px; padding: 0 1.1rem; font-size: var(--text-small); } .label-like { margin: 0 0 0.25rem; font-weight: bold; color: var(--navy); } .page-hero .crumb { margin: 0 0 0.25rem; font-size: var(--text-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .page-hero .crumb a { color: var(--gold); display: inline-flex; align-items: center; min-height: 44px; } /* Verified Member: a navy badge with a white tick (B4; "Approved by KARSAA officers") */ .verified-tick, .verified-icon { width: 1.05rem; height: 1.05rem; flex: none; vertical-align: -0.15em; fill: var(--navy); } .verified-tick .tick, .verified-icon .tick { fill: none; stroke: var(--white); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .dir-name .verified-tick { margin-left: 0.35rem; } .verified-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin: 0.25rem 0; font-weight: bold; color: var(--navy); } .verified-button { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0; background: none; border: 0; font: inherit; font-weight: bold; color: var(--navy); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 0.25em; } .verified-tip { font-weight: normal; font-size: var(--text-small); color: var(--text); } /* Profile strength: a bar (no percentage shown) and the next one or two steps */ .only-you { font-size: var(--text-small); color: var(--text); } .strength-bar { position: relative; height: 0.6rem; margin: 0.9rem 0 0.6rem; border-radius: 999px; background: rgba(37, 57, 87, 0.12); overflow: hidden; } .strength-bar span { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--navy); } .strength-words { margin: 0; } .next-steps { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .next-steps li { max-width: none; } .next-steps a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 1rem; border: 2px solid var(--navy); border-radius: 999px; background: var(--white); color: var(--navy); font-size: var(--text-small); font-weight: bold; text-decoration: none; } .next-steps a::before { content: "+"; font-size: 1.15rem; line-height: 1; } .next-steps a:hover { background: var(--navy); color: var(--white); } /* My Profile: the one-choice privacy setting, and View and Edit */ .preset-card, .strength-card { margin-bottom: var(--gutter); } .preset { display: grid; gap: 0.6rem; margin: 0.75rem 0; padding: 0; border: 0; } .preset .choice { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.85rem 1rem; border: 2px solid var(--line); border-radius: 8px; background: var(--white); cursor: pointer; } .preset .choice:has(input:checked) { border-color: var(--navy); } .preset input { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; flex: none; accent-color: var(--navy); } .preset b { display: block; color: var(--navy); } .preset small { display: block; font-size: var(--text-small); } .preset-card .hint { margin: 0.4rem 0 0; } .view-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; margin: 2rem 0 0.75rem; } .view-head .eyebrow { margin: 0; } .see-public { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-small); } .view-card { margin-bottom: var(--gutter); } .view-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .view-card-head h2 { margin: 0 0 0.5rem; } .privacy-pill { display: inline-flex; align-items: center; padding: 0.05rem 0.6rem; border-radius: 999px; border: 1px solid var(--line); font-family: var(--body-font); font-size: var(--text-label); font-weight: normal; color: var(--navy); vertical-align: middle; white-space: nowrap; } .view-card .details { margin: 0; } .view-card dd.not-added { color: rgba(0, 0, 0, 0.72); } .view-you { display: flex; align-items: center; gap: 1rem 1.25rem; } .view-you p { margin: 0; } .view-name { font-family: var(--heading-font); font-size: var(--text-box); font-weight: 700; color: var(--navy); } .profile-view-mode [data-group]:not(.is-editing) { display: none; } .profile-view-mode .save-row { display: none; } .edit-actions { display: none; } .profile-view-mode .is-editing .edit-actions { display: flex; margin: 1.5rem 0 0; } .profile-view-mode [data-group].is-editing { margin-bottom: var(--gutter); border: 2px solid var(--navy); } /* One "Who can see this section" choice; the per-detail choices show only after "Choose for each detail" */ .section-privacy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0 0 1.25rem; padding: 0.75rem 1rem; border-radius: 8px; background: var(--cream); } .section-privacy label { margin: 0; } .section-privacy select { width: auto; min-width: 14rem; margin: 0; } .has-section-privacy:not(.privacy-per-field) .field-row > .privacy-choice { display: none; } @media (max-width: 600px) { .view-card-head { flex-wrap: wrap; } .view-you { flex-direction: column; align-items: flex-start; } .section-privacy select { width: 100%; min-width: 0; } } /* Member profile page (members/person, B3) */ .you-note { margin: 0 0 var(--gutter); padding: 0.75rem 1rem; border-left: 4px solid var(--gold); background: var(--white); border-radius: 0 8px 8px 0; } .person-page > .card { margin-bottom: var(--gutter); } .person-head-big { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem 1.75rem; align-items: center; } .person-head-big p { margin: 0 0 0.25rem; } .person-work { font-size: var(--text-lead); } .person-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-start; margin-top: 0.75rem; } .person-actions .dir-message { margin: 0; flex-basis: 100%; } .person-actions .dir-message > .button { margin-right: 0.6rem; } @media (max-width: 600px) { .person-head-big { grid-template-columns: 1fr; justify-items: start; } .person-head-big .avatar-xl { width: 5.5rem; height: 5.5rem; font-size: 1.8rem; } .person-actions .button { width: 100%; justify-content: center; text-align: center; } } /* Directory: quick filters, the shareable link, profile links, location headings */ .quick { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; } .quick li { max-width: none; } .quick li[hidden] { display: none; } .quick button { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 2px solid var(--navy); background: var(--white); color: var(--navy); font: inherit; font-size: var(--text-small); font-weight: bold; cursor: pointer; } .quick button small { font-weight: normal; font-size: var(--text-small); } .quick button[aria-pressed="true"] { background: var(--navy); color: var(--white); } .quick button[aria-pressed="true"]::before { content: "✓"; } .quick button:hover { box-shadow: var(--shadow-lift); } .result-bar .copy-link { margin-left: auto; } .dir-profile-link { margin: 0 0 0.75rem; font-weight: bold; } .dir-profile-link a { display: inline-flex; align-items: center; min-height: 44px; } /* First-message help: one line of etiquette and starter notes (C5) */ .first-note-help { margin: 0.5rem 0 0.75rem; } .etiquette { margin: 0 0 0.6rem; padding: 0.6rem 0.9rem; border-left: 4px solid var(--gold); background: var(--cream); font-size: var(--text-small); border-radius: 0 6px 6px 0; } .starters-label { margin: 0 0 0.35rem; font-size: var(--text-small); } .starters { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .starters li { max-width: none; } .starter { width: 100%; min-height: 44px; padding: 0.55rem 0.9rem; text-align: left; border: 1px dashed var(--navy); border-radius: 8px; background: var(--cream); color: var(--text); font: inherit; font-size: var(--text-small); line-height: 1.45; cursor: pointer; } .starter:hover { background: var(--white); border-style: solid; } /* Phones: the Directory's search form folds behind "Search and Filters" (quick-filter results show first) */ .filters-toggle { display: none; } @media (max-width: 600px) { .filters-toggle { display: inline-flex; margin: 0 0 1rem; } .directory-filters.is-folded { display: none; } } /* ========================================================== MEMBERS' HOME DASHBOARD, BOARD SNAPSHOT AND SMALL FIXES (Parts D, E and F, 2026-11-02) ========================================================== */ /* Find a Mentor on phones: only Industry shows at first; Topics and Branch interest are under More filters, and Your Picks is tighter, so the first mentor card is higher on the screen */ @media (max-width: 600px) { .mentor-filters:not(.more-open) .phone-more { display: none; } .picks .pick-help { margin-bottom: 0; } } /* Board Snapshot (Officer Tools, E1): tiles of counts, and a print layout that prints only the snapshot */ .snapshot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--gutter); margin: 1rem 0; } .snapshot-tile { margin: 0; padding: var(--space-card); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-soft); border-top: 4px solid var(--navy); } .snapshot-tile p { margin: 0; max-width: none; } .snapshot-label { font-size: var(--text-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); } .snapshot-value { margin: 0.35rem 0 0.4rem !important; font-family: var(--heading-font); font-size: var(--text-h1); font-weight: 700; line-height: 1.1; color: var(--navy); } .snapshot-value.is-tbc { font-family: var(--body-font); font-size: var(--text-body); color: var(--red); } .snapshot-line { font-size: var(--text-small); } .print-only { display: none; } @media print { body.printing-snapshot { background: var(--white); padding: 0; } body.printing-snapshot > *:not(main), body.printing-snapshot main > *:not(.page-body), body.printing-snapshot .page-body > *:not(#snapshot), body.printing-snapshot .no-print, body.printing-snapshot .call-alert, body.printing-snapshot .dock { display: none !important; } body.printing-snapshot .page-body { padding: 0; } body.printing-snapshot .print-only { display: block; font-weight: bold; } body.printing-snapshot .snapshot-grid { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } body.printing-snapshot .snapshot-tile { box-shadow: none; border: 1px solid var(--navy); break-inside: avoid; padding: 0.75rem; } body.printing-snapshot .snapshot-value { font-size: 1.8rem; } body.printing-snapshot .snapshot-value.is-tbc { font-size: 1.1rem; } } /* Members' Home dashboard (Part D): Get Started, profile strength, Your Mentorship roles, Coming Up, People */ body[data-page="home"] .page-body > .card, body[data-page="home"] .dash-2 { margin-top: 0; margin-bottom: var(--gutter); } .dash-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); align-items: stretch; } /* both boxes end level (MH1) */ .dash-2 > .card { margin: 0; height: 100%; } @media (max-width: 820px) { .dash-2 { grid-template-columns: 1fr; } } .card-head .more { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-small); } .get-started .steps { list-style: none; margin: 0.75rem 0 0; padding: 0; } .get-started .steps li { display: flex; align-items: center; gap: 0.85rem; max-width: none; min-height: 56px; padding: 0.4rem 0; border-top: 1px solid var(--line); } .get-started .steps li:first-child { border-top: 0; } .get-started .steps li[hidden] { display: none; } .get-started .steps .tick { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--navy); color: var(--white); font-size: 0.95rem; font-weight: bold; } .get-started .steps .done .tick { background: var(--navy); } .get-started .steps .step-text { flex: 1; } .get-started .steps .step-text small { display: block; font-size: var(--text-small); } .get-started .steps .done .step-text { text-decoration: line-through; text-decoration-thickness: 1px; } @media (max-width: 600px) { .get-started .steps li { flex-wrap: wrap; } .get-started .steps li .step-text { flex: 1 1 calc(100% - 3rem); } .get-started .steps li .button { margin-left: 2.6rem; } } .role-rows { list-style: none; margin: 0.75rem 0 0; padding: 0; } .role-rows li { display: flex; align-items: center; gap: 0.85rem; max-width: none; padding: 0.6rem 0; border-top: 1px solid var(--line); } .role-rows li:first-child { border-top: 0; } .role-rows .who { flex: 1; min-width: 0; } .role-rows .who b, .role-rows .who span { display: block; } .role-rows .who span { font-size: var(--text-small); } .faces { display: flex; flex: none; } .faces .avatar { border: 2px solid var(--white); } .faces .avatar + .avatar { margin-left: -0.6rem; } .event-mini { display: flex; gap: 1rem; align-items: center; margin-top: 0.5rem; } .event-mini .date-block { flex: none; margin: 0; } .event-mini h3 { margin: 0 0 0.2rem; } .event-mini p { margin: 0; } .people-count { margin: 0.25rem 0 0.5rem; display: flex; align-items: baseline; gap: 0.5rem; } .big-count { font-family: var(--heading-font); font-size: var(--text-h1); font-weight: 700; color: var(--navy); line-height: 1; } .people-row { list-style: none; margin: 0.5rem 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; } .people-row[hidden] { display: none; } .people-row li { max-width: none; } .people-row a { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; width: 5rem; min-height: 44px; text-decoration: none; font-size: var(--text-small); line-height: 1.2; text-align: center; } .people-row a:hover b { text-decoration: underline; } .people-row b { font-weight: normal; overflow-wrap: anywhere; } .people-links { margin: 0; } .people-links a { display: inline-flex; align-items: center; min-height: 44px; } /* Step 5 full test (2026-11-02): tap targets at least 44 px tall at every width (they were 34–38 px from 601 px up) */ .filter-tag, .active-filters .link-button { min-height: 44px; } .seg button, .view-profile .text-button { min-height: 44px; } /* Independent review fixes (2026-11-02): #8 Playfair's old-style figures make 0 look like "o": counts use lining figures */ .snapshot-value, .big-count, .pick-count, .date-block b { font-variant-numeric: lining-nums; } /* #9 a mentor's or mentee's name on their card is a 44 px tap target */ .person-card h3 a { display: inline-flex; align-items: center; min-height: 44px; } /* #13 Coming Up and People keep their own heights (no empty white box beside People) */ .dash-2 > .card { height: auto; } /* #12 the note officers see on a profile page */ .officers-only-note { margin: 1rem 0 0; padding: 0.6rem 0.9rem; border-left: 4px solid var(--red); background: var(--cream); font-size: var(--text-small); } /* ---------- Layout review (2026-11-03, V3, V4, V12, V13, approved by Bahn: "Build all 17") ---------- */ /* V3 Mentorship: on wide screens, the pair boxes on the left and "What Happens Next" as a box on the right that stays in view. Only when "What Happens Next" shows. */ @media (min-width: 1100px) { body[data-page="mentorship"] .page-body:has(> #next-steps:not([hidden])) { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; column-gap: 2.5rem; align-items: start; } body[data-page="mentorship"] .page-body:has(> #next-steps:not([hidden])) > * { grid-column: 1; } body[data-page="mentorship"] .page-body > #next-steps:not([hidden]) { grid-column: 2; grid-row: 1 / span 30; position: sticky; top: 1.5rem; max-width: none; margin: 0; padding: var(--space-card); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); } body[data-page="mentorship"] #next-steps h2 { font-size: var(--text-box); } body[data-page="mentorship"] .page-body:has(> #next-steps:not([hidden])) .mentor-grid { grid-template-columns: 1fr; } } /* V3 A pair box: "Message" and "End Pair" sit together in one row */ .person-card .card-action { max-width: none; } .person-card .card-action .link-button.danger { margin-left: 0.5rem; } /* V4 A member's profile page: the profile box and "Ask Me About" side by side, the same height */ @media (min-width: 981px) { .person-page:has(> #person-mentor:not([hidden])) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gutter); } .person-page:has(> #person-mentor:not([hidden])) > * { grid-column: 1 / -1; } .person-page:has(> #person-mentor:not([hidden])) > .person-summary { grid-column: 1; } .person-page:has(> #person-mentor:not([hidden])) > #person-mentor { grid-column: 2; } } /* V12 Find a Mentor: "1 spot left" and the Choose button on one line at the bottom of each box */ .mentor-card .card-slot:has(> .spots) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; } .mentor-card .card-slot > .spots { margin: 0; } /* V13 Officer Tools: on wide screens, "On this page" is a column on the left that stays in view */ @media (min-width: 1200px) { body[data-page="officers"] .page-body { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); column-gap: 2.5rem; align-items: start; } body[data-page="officers"] .page-body > * { grid-column: 2; } body[data-page="officers"] .page-body > .page-nav { grid-column: 1; grid-row: 1 / span 40; position: sticky; top: 1.5rem; margin: 0; flex-direction: column; flex-wrap: nowrap; align-items: stretch; } body[data-page="officers"] .page-body > .page-nav a { justify-content: flex-start; } } /* ---------- Mentorship page review (2026-11-03, Bahn: "this page needs the most work") ---------- */ /* M1 A pair box uses its width: on a wide box, the person on the left and how the pair is going, with Message, on the right. End Pair sits under Message, apart from it, so it isn't tapped by mistake. */ #as-mentee, #mentor-pairs, #mentor-past-pairs { container-type: inline-size; } /* the mentee side is measured on #as-mentee, because #mentee-pair can be display: contents (M4) */ #mentee-pair .card-slot .card-action.button-row, #mentor-pairs .card-slot .card-action.button-row { flex-direction: column; align-items: flex-start; gap: 0.6rem; } #mentee-pair .card-slot .link-button.danger, #mentor-pairs .card-slot .link-button.danger { margin-left: 0; min-height: 32px; font-size: var(--text-small); font-weight: 600; } @container (min-width: 34rem) { #mentee-pair .person-card, #mentor-pairs .person-card, #mentor-past-pairs .person-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.75fr); grid-template-rows: repeat(5, auto) 1fr; column-gap: 2rem; row-gap: 0.75rem; align-items: start; } #mentee-pair .person-card > *, #mentor-pairs .person-card > *, #mentor-past-pairs .person-card > * { grid-column: 1; } #mentee-pair .person-card > .card-slot, #mentor-pairs .person-card > .card-slot, #mentor-past-pairs .person-card > .card-slot { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 0; padding-left: 1.5rem; border-left: 1px solid var(--line); } } /* M7 Under "Paired with You", each box doesn't repeat "Your Mentee" */ #mentor-pairs .person-card > .eyebrow { display: none; } /* M4 A mentee's "Find Another Mentor" sits on the "Your Mentor" line, at the right, instead of alone below */ #as-mentee:has(#mentee-pair > .card-action) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: end; } #as-mentee:has(#mentee-pair > .card-action) > * { grid-column: 1 / -1; } #as-mentee:has(#mentee-pair > .card-action) > #mentee-pair { display: contents; } #as-mentee:has(#mentee-pair > .card-action) > .eyebrow { grid-column: 1; grid-row: 1; margin: 0 0 0.75rem; } #as-mentee:has(#mentee-pair > .card-action) #mentee-pair > .card { grid-column: 1 / -1; } #as-mentee:has(#mentee-pair > .card-action) #mentee-pair > .card + .card { margin-top: var(--gutter); } #as-mentee:has(#mentee-pair > .card-action) #mentee-pair > .card-action { grid-column: 2; grid-row: 1; margin: 0 0 0.5rem; } /* M3 A mentor's summary is one white strip (spots on the left, Change My Spots on the right), and "No one is waiting" is a clear empty box instead of a loose line */ #as-mentor .state-line { justify-content: space-between; margin: 0 0 var(--gutter); padding: 0.9rem 1.25rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); } #as-mentor .state-line #spots-text { margin-right: auto; } #as-mentor .state-line .link-button { margin-left: 0; } #pool-empty { max-width: none; margin: 0 0 var(--gutter); padding: 1.5rem; text-align: center; text-wrap: balance; border: 2px dashed rgba(37, 57, 87, 0.3); border-radius: var(--radius); background: var(--white); } /* M2 "What Happens Next" as a timeline: a dot per step (filled when done), the step's title on its own line */ #next-steps ul { list-style: none; margin: 1.25rem 0 1rem; padding: 0; } #next-steps li { position: relative; max-width: none; margin: 0; padding: 0 0 1.1rem 1.75rem; font-size: var(--text-small); line-height: 1.5; } #next-steps li::before { content: ""; position: absolute; left: 0.2rem; top: 0.3rem; width: 0.7rem; height: 0.7rem; box-sizing: border-box; border: 2px solid var(--navy); border-radius: 50%; background: var(--white); } #next-steps li:not(:last-child)::after { content: ""; position: absolute; left: calc(0.55rem - 1px); top: 1.15rem; bottom: 0.15rem; width: 2px; background: var(--line); } #next-steps li b { display: block; margin-bottom: 0.1rem; color: var(--navy); font-size: var(--text-body); } #next-steps li.is-done::before { background: var(--navy); } #next-steps li.is-done::marker { content: none; } #next-steps > p { font-size: var(--text-small); } @media (min-width: 1100px) { body[data-page="mentorship"] .page-body:has(> #next-steps:not([hidden])) { grid-template-columns: minmax(0, 1fr) 24rem; } }