/* ========================================================================== THE HOME PAGE (seeker/templates/seeker/career/home.html) — the Spotlight design, the owner's pick of 2026-10-04 (mockup "A · Spotlight", mockups/home-2026-10-03/src/a.css), with his changes: no "Start from a sample" section (the hero's chips are the samples), no giant wordmark under the footer, and the visuals big and barely framed. components/spotlight.css (linked first) owns what the public pages share: the glow stage, the Anton display type, the section heading, the visual card, the primary button and the clear navbar. This file is the page: the pill, the sample chips, the feature rows, and the loading screen's touches (the screen itself is pages/analyze.css's, linked too). Every rule that sets a colour carries two classes, so it outranks base/typography.css's `.dark-mode p, span, div, label { color: var(--text_color) }` (specificity 0,1,1). ========================================================================== */ .career-home [hidden] { display: none !important; } /* The page fades out as the loader fades in (career_home.js swapTo, 150ms) — what the analyzer's `.analyze-section` does, for the wrapper that now holds the whole page. */ .career-home .career-home-page { transition: opacity .15s ease; } .career-home .career-home-page.fade-out { opacity: 0; } /* ========================= Hero =========================== */ .career-home .career-home-hero { width: 100%; max-width: 1180px; display: flex; flex-direction: column; align-items: center; } /* THE HEADLINE MAKES ROOM FOR THE OPEN BOX (2026-10-04). Typed or pasted text opens the pill into a 15rem box, and the two Anton lines (up to 9.6rem each) shrink while it is open. Measured in Firefox with a resume pasted, bottom of "Find my fit" / of the sample chips: 1710x1000 715 / 826 (852 / 963 at full size), 1280x900 669 / 780 (771 / 882), 1440x800 676 / 787 (790 / 901: the button 10px off the bottom edge), 390x844 571 / 694. The hero's `has-content` follows typed text only (career_home.js). */ .career-home .career-home-title { transition: font-size .5s cubic-bezier(.4, 0, .2, 1), margin .5s cubic-bezier(.4, 0, .2, 1); } .career-home-intake.has-content .career-home-title { font-size: clamp(2.4rem, 4.4vw, 4.6rem); margin-bottom: 1rem; } .career-home .career-home-lede { transition: opacity .4s ease, margin .5s cubic-bezier(.4, 0, .2, 1); } .career-home-intake.has-content .career-home-lede { opacity: .75; margin-bottom: 1.5rem; } /* Set when a sign-in just discarded the visitor's sample profile (seeker/demo.py). */ .career-home .career-home-note { margin: -.8rem 0 1.4rem; font-size: .95rem; line-height: 1.5; color: var(--sl-sub); } /* ========================= The box: a white pill that opens =========================== */ /* ONE INPUT (the mockup's `.a-input`). Empty, it is one line: icon, placeholder, "Upload resume", "Find my fit". Typed text opens it (`.career-home-intake.has-content`): the text takes the whole first row and the buttons drop to a second. A file folds it to the file line and the button (`.is-checking`, then `.has-file`, below). It is WHITE IN BOTH THEMES (the owner's dark screenshot of 2026-10-04 shows it), so the colours inside it are fixed, not themed. */ .career-home .career-pill { position: relative; box-sizing: border-box; width: min(880px, 100%); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon main actions"; align-items: center; column-gap: 14px; row-gap: 10px; padding: 12px 12px 12px 24px; text-align: left; background: #FFFFFF; border: 1px solid rgba(15, 23, 42, .07); border-radius: 22px; box-shadow: 0 2px 6px rgba(15, 23, 42, .06), 0 24px 70px rgba(30, 64, 175, .20); transition: box-shadow .2s ease, border-radius .3s ease; } .dark-mode .career-home .career-pill { border-color: transparent; box-shadow: 0 30px 90px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06); } .career-home .career-pill:focus-within { box-shadow: 0 2px 6px rgba(15, 23, 42, .06), 0 24px 70px rgba(30, 64, 175, .22), 0 0 0 4px rgba(37, 99, 235, .28); } .dark-mode .career-home .career-pill:focus-within { box-shadow: 0 30px 90px rgba(0, 0, 0, .55), 0 0 0 4px rgba(96, 165, 250, .5); } .career-home .career-pill-icon { grid-area: icon; display: flex; align-items: center; color: #64748B; font-size: 1.2rem; } .career-home .career-pill-text { grid-area: main; display: block; box-sizing: border-box; width: 100%; height: 30px; min-height: 30px; margin: 0; padding: 0; border: 0; outline: 0; resize: none; overflow: hidden; background: transparent; color: #0B1020; font: inherit; font-size: 1.12rem; line-height: 30px; transition: height .45s cubic-bezier(.4, 0, .2, 1), min-height .45s cubic-bezier(.4, 0, .2, 1), visibility 0s; } .career-home .career-pill-text::placeholder { color: #64748B; opacity: 1; } .career-home .career-pill-text:focus, .career-home .career-pill-text:focus-visible { outline: none !important; box-shadow: none; } /* A sample in the box is read-only (career_home.js), and the box is disabled while a run starts: the same slate either way, never the browser's own disabled grey. */ .career-home .career-pill.is-sample .career-pill-text, .career-home .career-pill-text:disabled { color: #475569; -webkit-text-fill-color: #475569; opacity: 1; cursor: default; } /* Open: typed or pasted text. */ .career-home-intake.has-content .career-pill { grid-template-areas: "main main main" "icon . actions"; padding-top: 18px; border-radius: 20px; } .career-home-intake.has-content .career-pill-icon { visibility: hidden; } .career-home-intake.has-content .career-pill-text { height: 15rem; min-height: 15rem; overflow: auto; font-size: 1rem; line-height: 1.6; } .career-home .career-pill-actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; } .career-home .career-resume-file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); } .career-home .career-resume-upload { display: inline-flex; align-items: center; gap: .45rem; padding: .78rem .95rem; border-radius: 14px; cursor: pointer; color: #334155; font-size: .95rem; font-weight: 500; white-space: nowrap; transition: background-color .15s ease-out, color .15s ease-out; } .career-home .career-resume-upload span, .career-home .career-resume-upload i { color: inherit; } .career-home .career-resume-upload:hover { background: #F1F5F9; color: #0B1020; } .career-home .career-resume-file-input:focus-visible + .career-resume-upload { outline: 2px solid #2563EB; outline-offset: 2px; } .career-home .career-pill-go { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.3rem; border: 0; border-radius: 14px; cursor: pointer; background: #2563EB; color: #FFFFFF; font: inherit; font-size: 1rem; font-weight: 650; line-height: 1.2; white-space: nowrap; transition: background-color .15s ease-out; } .career-home .career-pill-go span, .career-home .career-pill-go i { color: inherit; } .career-home .career-pill-go:hover:not(:disabled) { background: #1D4ED8; } .career-home .career-pill-go:disabled { background: #CBD5E1; cursor: not-allowed; } .career-home .career-pill-go:focus-visible { outline: 2px solid #2563EB !important; outline-offset: 2px; } /* Running ("Analyzing…", from the press until the page changes): blue, no arrow. */ .career-home .career-pill[aria-busy="true"] .career-pill-go { background: #2563EB; cursor: progress; } .career-home .career-pill[aria-busy="true"] .career-pill-go i { display: none; } /* --------------------------------------------------------------------------- A FILE FOLDS THE BOX, IT DOES NOT GROW IT (owner, 2026-09-24: "show a quick loader ... then collapse to just the resume line and the Find My Fit Button"). Only TYPED text opens the box (career_home.js toggles the hero's class on text alone); a file puts the box through two states of its own, both on the form: .is-checking the textarea folds and the check row shows a spinner while the file's type, size and first bytes are checked (at least 2 s — the owner's figure); .has-file the check row folds too, leaving the file line and the button. The textarea, the check row and the file line share the pill's one text cell; only one of them shows at a time. Folded with classes, not the `hidden` attribute — `.career-home [hidden]` is `display: none !important`, which cannot transition. `visibility` follows the fold so the folded textarea leaves the tab order and the accessibility tree once it has finished closing. --------------------------------------------------------------------------- */ .career-home .career-pill.is-checking .career-pill-text, .career-home .career-pill.has-file .career-pill-text { height: 0; min-height: 0; overflow: hidden; visibility: hidden; transition-delay: 0s, 0s, .45s; } .career-home .career-resume-checking { grid-area: main; display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1), visibility 0s .4s; } .career-home .career-resume-checking-inner { display: flex; align-items: center; gap: .75rem; min-height: 0; overflow: hidden; font-size: 1rem; line-height: 30px; } .career-home .career-resume-checking-inner, .career-home .career-resume-checking-inner span { color: #1D4ED8; } .career-home .career-resume-checking-inner > span:last-child { overflow-wrap: anywhere; } /* analyze.css shows the ring only inside .analyze-step.active, and draws its track in --line_color, which is near-black in dark mode; the pill is white in both. */ .career-home .career-resume-checking .step-spinner { opacity: 1; flex-shrink: 0; border-color: #DBEAFE; border-top-color: #2563EB; } .career-home .career-pill.is-checking .career-resume-checking { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; } .career-home .career-pill.is-checking .career-resume-upload, .career-home .career-pill.has-file .career-resume-upload, .career-home .career-pill.is-checking .career-pill-icon, .career-home .career-pill.has-file .career-pill-icon { display: none; } /* the spinner / the file's own icon takes its place */ .career-home .career-resume-chip { grid-area: main; justify-self: start; display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; min-width: 0; box-sizing: border-box; padding: .45rem .45rem .45rem .8rem; border-radius: 10px; background: #EFF6FF; font-size: .95rem; font-weight: 500; line-height: 1.3; } .career-home .career-resume-chip, .career-home .career-resume-chip span, .career-home .career-resume-chip i { color: #1D4ED8; } .career-home .career-resume-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .career-home .career-resume-chip button { flex: none; padding: .1rem .35rem; border: 0; border-radius: 6px; background: transparent; color: #1D4ED8; font: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; } .career-home .career-resume-chip button:hover { background: #DBEAFE; } .career-home .career-resume-chip button:focus-visible { outline: 2px solid #2563EB !important; outline-offset: 2px; } /* THE DROP TARGET. The whole box: a dashed ring, a tint and one line saying what letting go will do. The hint ignores the pointer, so the drop lands on the form underneath it. */ .career-home .career-resume-drop-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .6rem; border-radius: inherit; background: rgba(239, 246, 255, .97); font-weight: 650; opacity: 0; pointer-events: none; transition: opacity .15s ease; } .career-home .career-resume-drop-hint, .career-home .career-resume-drop-hint i { color: #1D4ED8; } .career-home .career-pill.is-dragover { outline: 2px dashed #60A5FA; outline-offset: 5px; } .career-home .career-pill.is-dragover .career-resume-drop-hint { opacity: 1; } /* The status line (a refused file, a failed run) sits right under the box it is about. */ .career-home .career-home-status { margin: .9rem 0 0; max-width: 46rem; font-size: .92rem; line-height: 1.5; text-align: center; color: var(--sl-sub); } .career-home .career-home-status:empty { display: none; } /* Its error ink is darker (light) and lighter (dark) than --status-error, because the line sits on the hero's glow: there #DC2626 measured 2.54:1 and #EF4444 3.81:1, under AA's 4.5:1. These two hold >= 5.2:1 at 390-1710 px at either end of the drift (worst: a failed sample run at 390 px, 2026-10-04). */ .career-home .career-home-status.is-error { color: #7F1D1D; font-weight: 500; } .dark-mode .career-home .career-home-status.is-error { color: #FCA5A5; } /* ========================= Sample chips ("Or try a sample resume") =========================== */ /* ONE CLICK EACH (owner, 2026-10-04): the chips replace the dropdown, and a click runs the sample (career_home.js). Signed-out visitors only. On a phone they are one row that scrolls sideways under its own fade, so the page itself never does. */ .career-home .career-samples { display: flex; flex-direction: column; align-items: center; gap: .7rem; width: 100%; margin-top: 1.6rem; } .career-home .career-samples-label { margin: 0; font-size: .85rem; font-weight: 500; color: var(--sl-sub); } .career-home .career-samples-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; } .career-home .career-sample { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .64rem 1rem; border-radius: 12px; border: 1px solid rgba(15, 23, 42, .10); background: rgba(255, 255, 255, .72); color: #0B1020; font: inherit; font-size: .93rem; font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background-color .15s ease-out, border-color .15s ease-out, box-shadow .15s ease-out; } .career-home .career-sample span { color: inherit; } .career-home .career-sample i { color: #2563EB; font-size: .95em; } .career-home .career-sample:hover:not(:disabled) { background: #FFFFFF; border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59, 130, 246, .18); } .career-home .career-sample:focus-visible { outline: 2px solid var(--sl-focus) !important; outline-offset: 2px; } .career-home .career-sample:disabled { cursor: default; } .career-home .career-sample:disabled:not(.is-running) { opacity: .55; } .career-home .career-sample.is-running { border-color: #3B82F6; } .career-home .career-sample-spin { display: none; width: 14px; height: 14px; box-sizing: border-box; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: career-sample-spin .7s linear infinite; } .career-home .career-sample.is-running i { display: none; } .career-home .career-sample.is-running .career-sample-spin { display: inline-block; color: #2563EB; } @keyframes career-sample-spin { to { transform: rotate(360deg); } } .dark-mode .career-home .career-sample { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #F1F5F9; } .dark-mode .career-home .career-sample i { color: #93C5FD; } .dark-mode .career-home .career-sample:hover:not(:disabled) { background: rgba(255, 255, 255, .12); border-color: #60A5FA; box-shadow: 0 0 0 3px rgba(96, 165, 250, .22); } .dark-mode .career-home .career-sample.is-running { border-color: #60A5FA; } .dark-mode .career-home .career-sample.is-running .career-sample-spin { color: #93C5FD; } /* The privacy and sign-in lines, under the chips. --sl-sub is the stage's AA grey. */ .career-home .career-home-privacy, .career-home .career-home-signin { margin: .55rem 0 0; font-size: .85rem; line-height: 1.5; text-align: center; color: var(--sl-sub); } .career-home .career-home-privacy { margin-top: 1.4rem; } .career-home .career-home-signin a { color: var(--blue_2); font-weight: 500; text-decoration: none; } .career-home .career-home-signin a:hover { text-decoration: underline; } .career-home .career-home-signin a:focus-visible { outline: 2px solid var(--sl-focus) !important; outline-offset: 2px; border-radius: 2px; } /* ========================= What one resume tells you =========================== */ /* Big visual, little frame (owner, 2026-10-04, on the mockups' gradient frames: "there's a large amount of background on the visuals when we should just use more visual"). The captures sit in spotlight.css's `.sl-visual`, a white card that is mostly picture. */ /* Balanced, so a phone gets "What one resume / tells you", not a lone "you" (measured at 390). */ .career-home .sl-head .sl-h2, .career-home .sl-head .sl-h2-sub { text-wrap: balance; } .career-home .career-feature { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 96px); } .career-home .career-feature + .career-feature { margin-top: clamp(80px, 10vw, 144px); } .career-home .career-feature--wide { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3vw, 44px); } /* THE ZIG-ZAG (2026-10-14): a --flip row puts its copy first and its picture on the right. */ .career-home .career-feature--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } /* The career map is a tall capture: held to a column the size it reads at, centred in its half. */ .career-home .career-feature-visual--tall { max-width: 440px; margin-inline: auto; } .career-home .career-feature-media { position: relative; min-width: 0; } /* The date line reads at the card's right, clear of the "Pay within reach" card on its left. */ .career-home .career-feature-visual .sl-visual-cap { text-align: right; } .career-home .career-feature-copy { min-width: 0; } .career-home .career-feature-copy h3 { margin: 0 0 .75rem; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: -0.015em; font-weight: 600; color: var(--text_color); } .career-home .career-feature-copy p { margin: 0 0 1.25rem; max-width: 30rem; font-size: 1.02rem; line-height: 1.65; color: var(--text-secondary); } .career-home .career-feature-copy--split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px clamp(32px, 6vw, 96px); align-items: start; } .career-home .career-feature-copy--split .career-facts { margin-top: .4rem; } /* The one "New" tag on the page (2026-10-14, the career map): a small pill in the site blue (text in the page colour: AA in both themes), not a badge colour of its own. Remove it once the map is no longer new. */ .career-home .career-new { display: inline-block; margin-right: .5rem; padding: .18em .6em; border-radius: 999px; vertical-align: .2em; font-size: .5em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bg_color); background: var(--blue-primary); } .career-home .career-facts { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .5rem; } .career-home .career-facts li { display: flex; align-items: baseline; gap: .65rem; font-size: .97rem; line-height: 1.5; color: var(--text_color); } .career-home .career-facts li span { color: inherit; } .career-home .career-facts li i { flex: none; color: var(--blue_2); font-size: .85em; } /* Private before it's analyzed: the anonymizer's real input and output, as two cards. */ .career-home .career-redact { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 16px; } .career-home .career-redact-col { min-width: 0; padding: 22px 24px; border-radius: 18px; background: var(--fg_color); box-shadow: var(--sl-visual-shadow); container-type: inline-size; } .career-home .career-redact-head { margin: 0 0 .8rem; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); } .career-home .career-redact-text { margin: 0; padding: 0; border: 0; background: none; white-space: pre-wrap; overflow-wrap: anywhere; font: 500 .9rem/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text_color); /* The longest line, linkedin.com/in/zmthompson (26 monospace chars), stays on one line at any column width: about 0.6em per char, so 6cqi of the column fits 26 chars plus the highlight padding. */ font-size: clamp(.7rem, 6cqi, .9rem); } .career-home .career-pii { padding: 0 3px; border-radius: 4px; background: rgba(255, 86, 114, .14); color: #C2263F; text-decoration: line-through; text-decoration-color: rgba(194, 38, 63, .55); } .dark-mode .career-home .career-pii { background: rgba(255, 86, 114, .16); color: #FF8FA1; text-decoration-color: rgba(255, 143, 161, .55); } .career-home .career-tag { padding: 0 4px; border-radius: 4px; background: rgba(37, 99, 235, .08); color: #1D4ED8; } .dark-mode .career-home .career-tag { background: rgba(59, 130, 246, .16); color: #93C5FD; } .career-home .career-redact-arrow { display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--text-tertiary); } .career-home .career-redact-arrow i { color: inherit; } /* ========================= The loading screen (pages/analyze.css's #loading-section) =========================== */ /* The focused title shows no ring — focus moves there for screen readers, not as something to click. */ .career-home [data-resume-loading-title]:focus { outline: none; } /* THE LOADER KEEPS THE PAGE'S GUTTER (review, 2026-09-24). analyze.css's `#loading-section { padding: 0 }` (an id rule) left none: below ~528px the 480px column filled the screen and the title and the step icons touched x=0. The hero's side padding, at the hero's breakpoint (spotlight.css: 24px, 16px at 640px and below). */ .career-home #loading-section { box-sizing: border-box; padding: 0 var(--spacing-lg); } /* DARK MODE, measured 2026-09-24: global.css's `.dark-mode span { color: var(--text_color) }` out-ranks the step row's colour, so a waiting step and a finished one both rendered WHITE. The label inherits its row again (the active row's `!important` blue and the finished row's inline green both reach it). A WAITING STEP IS READABLE TEXT (review, 2026-09-24): --text-secondary, the subtitle's grey — #A3A3A3 on #1A1A1A ~7:1, #737373 on #FAFAF9 4.5:1. The analyzer's own greys measured 2.3:1 (dark) and --text-tertiary 3.7:1 / 2.4:1. */ .career-home .analyze-step-inner > span { color: inherit; } .career-home .analyze-step-inner { color: var(--text-secondary); } .career-home .analyze-loading-subtitle { color: var(--text-secondary); } /* ========================= Motion, then narrower screens =========================== */ @media (prefers-reduced-motion: reduce) { .career-home .career-home-page, .career-home .career-home-title, .career-home .career-home-lede, .career-home .career-pill, .career-home .career-pill-text, .career-home .career-resume-checking, .career-home .career-resume-drop-hint, .career-home .career-resume-upload, .career-home .career-pill-go, .career-home .career-sample { transition: none; } /* THE SPINNERS KEEP SPINNING (owner, 2026-09-26, on his iPhone: "When I upload my resume, the loader is not animating"). base/global.css's reduced-motion reset runs every animation once for 0.01ms, which froze them as static arcs that read as a hung page. A small ring turning in place is not the large, spatial motion the setting exists for — the system's own activity indicators spin under it — so only the fades and the box's opening stop. (The check row's ring is analyze.css's `.step-spinner`, rescued there.) */ .career-home .career-sample-spin { animation-duration: .7s !important; animation-iteration-count: infinite !important; } } @media (max-width: 900px) { .career-home .career-feature, .career-home .career-feature--flip, .career-home .career-feature-copy--split { grid-template-columns: minmax(0, 1fr); } /* Stacked, every row reads copy FIRST, picture second (owner, 2026-10-04: "For all mobile cases on all marketing/home pages, we need it to be description first, image second" -- rows 1 and 3 put the picture first in the markup, so two pictures met back to back). 48px keeps a card's shadow (it reaches ~40px) clear of the next row's text. */ .career-home .career-feature { row-gap: 48px; } .career-home .career-feature-copy { order: -1; } } @media (max-width: 760px) { .career-home .career-redact { grid-template-columns: minmax(0, 1fr); } .career-home .career-redact-arrow { transform: rotate(90deg); } } @media (max-width: 640px) { .career-home .career-pill { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon main" "actions actions"; padding: 14px 12px 12px 16px; } .career-home-intake.has-content .career-pill { grid-template-areas: "main main" "actions actions"; } .career-home-intake.has-content .career-pill-icon { display: none; } .career-home .career-pill-text { font-size: 1rem; } .career-home-intake.has-content .career-pill-text { height: 13rem; min-height: 13rem; } .career-home .career-pill-actions { justify-content: space-between; } .career-home .career-pill-go { flex: 1; justify-content: center; } .career-home .career-samples { align-items: stretch; } .career-home .career-samples-row { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; /* scroll-padding: the chips snap to the 16px gutter, not the screen edge. Without it Firefox snapped the row 16px in on load and back, pinning the first chip's left edge under the fade. */ margin: 0 -16px; padding: 4px 16px 8px; scroll-padding-inline: 16px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); } .career-home .career-samples-row::-webkit-scrollbar { display: none; } .career-home .career-sample { flex: none; scroll-snap-align: start; } .career-home #loading-section { padding: 0 1rem; } }