/* ========================================================================== Public freelancer profile — the page a candidate shows to employers. Self-contained: it does not depend on dashlite/theme classes, so the two tabs (resume + portfolio) can share one visual system. ========================================================================== */ .cvp { --ink: #f2f5fa; /* #9aa6bb on #0b0d12 = 7.3:1, safe for body copy */ --muted: #9aa6bb; --faint: #6f7b90; --bg: #0b0d12; --bg-2: #11141c; --surface: rgba(255, 255, 255, .045); --surface-2: rgba(255, 255, 255, .07); --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .16); --brand: #fbd202; --brand-soft: rgba(251, 210, 2, .14); --accent: #5b8cff; --r-lg: 24px; --r-md: 16px; --r-sm: 12px; margin: 0; background: var(--bg); color: var(--ink); font-family: Dana, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100dvh; } .cvp *, .cvp *::before, .cvp *::after { box-sizing: border-box; } .cvp .icon, .cvp [class^="ni-"], .cvp [class*=" ni-"] { font-family: Nioicon !important; font-style: normal; } .cvp a { color: inherit; text-decoration: none; } .cvp img { max-width: 100%; } /* --------------------------------------------------------- Light rigging */ /* Three blurred sources doing the "studio lighting". Fixed so they light the whole scroll, and pointer-events:none so they never eat a click. */ .cvp-lights { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .cvp-light { position: absolute; border-radius: 50%; filter: blur(110px); opacity: .5; will-change: transform; } .cvp-light.l1 { width: 46vw; height: 46vw; min-width: 340px; min-height: 340px; top: -12vw; inset-inline-end: -10vw; background: rgba(251, 210, 2, .5); animation: cvp-drift-a 26s ease-in-out infinite alternate; } .cvp-light.l2 { width: 40vw; height: 40vw; min-width: 280px; min-height: 280px; top: 42vh; inset-inline-start: -14vw; background: rgba(91, 140, 255, .42); animation: cvp-drift-b 32s ease-in-out infinite alternate; } .cvp-light.l3 { width: 34vw; height: 34vw; min-width: 240px; min-height: 240px; bottom: -10vw; inset-inline-end: 18vw; background: rgba(251, 210, 2, .22); animation: cvp-drift-a 38s ease-in-out infinite alternate-reverse; } @keyframes cvp-drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-6vw, 7vh, 0) scale(1.15); } } @keyframes cvp-drift-b { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(7vw, -6vh, 0) scale(.95); } } /* Fine grid so the dark field reads as a surface, not a void */ .cvp-grid-overlay { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(to left, rgba(255, 255, 255, .028) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .028) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%); } /* No z-index here on purpose. A stacking context would trap every modal rendered inside the shell: Bootstrap appends the backdrop to , so at 1050 it outranks the whole shell and paints over the dialog — the sheet goes grey, the buttons stop taking clicks, and even backdrop-dismiss is out of reach because the click never reaches .modal. Positioned and later in the DOM is already enough to sit above the decorative layers. */ .cvp-shell { position: relative; max-width: 1120px; margin-inline: auto; padding: 0 20px 96px; } /* --------------------------------------------------------------- Top bar */ .cvp-nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; margin-bottom: 8px; } .cvp-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 10px 14px; border-radius: var(--r-md); background: rgba(11, 13, 18, .72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line); } .cvp-logo { display: flex; align-items: center; gap: 10px; min-width: 0; } .cvp-logo img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; flex-shrink: 0; } .cvp-logo-text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; } .cvp-logo-text strong { font-size: .82rem; font-weight: 800; color: var(--ink); } .cvp-logo-text span { font-size: .62rem; letter-spacing: .12em; color: var(--faint); } /* Tabs: resume / portfolio */ .cvp-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); flex-shrink: 0; } .cvp-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 16px; border-radius: 999px; color: var(--muted); font-size: .8rem; font-weight: 700; white-space: nowrap; transition: color .18s ease, background .18s ease; } .cvp-tab:hover { color: var(--ink); } .cvp-tab[aria-current="page"] { background: var(--brand); color: #14161c; } .cvp-nav-cta { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink); font-size: .78rem; font-weight: 700; white-space: nowrap; transition: background .18s ease, border-color .18s ease; } .cvp-nav-cta:hover { background: var(--surface-2); border-color: var(--brand); color: var(--ink); } @media (max-width: 899.98px) { .cvp-nav-cta { display: none; } .cvp-logo-text { display: none; } } /* ------------------------------------------------------------------ Hero */ .cvp-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; padding: 48px 0 56px; } @media (min-width: 900px) { .cvp-hero { grid-template-columns: 300px minmax(0, 1fr); gap: 56px; padding: 72px 0 88px; } } /* The 3D portrait: a tilting stage with a rotating light ring behind it */ .cvp-portrait { perspective: 900px; justify-self: center; } .cvp-portrait-inner { position: relative; width: 236px; height: 236px; transform-style: preserve-3d; transition: transform .35s cubic-bezier(.22, 1, .36, 1); will-change: transform; } @media (min-width: 900px) { .cvp-portrait-inner { width: 280px; height: 280px; } } .cvp-portrait-ring { position: absolute; inset: -14px; border-radius: 50%; background: conic-gradient(from 0deg, var(--brand), rgba(91, 140, 255, .9), rgba(251, 210, 2, .15), var(--brand)); filter: blur(14px); opacity: .75; animation: cvp-spin 14s linear infinite; transform: translateZ(-40px); } @keyframes cvp-spin { to { transform: translateZ(-40px) rotate(360deg); } } /* No translateZ on the frame: pushing it toward the viewer makes the browser rasterise the photo at its layout size and then scale it up, which visibly softens the face. Depth comes from the ring sitting behind instead. */ .cvp-portrait-frame { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255, 255, 255, .18); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), inset 0 2px 24px rgba(255, 255, 255, .12); } .cvp-portrait-frame img { width: 100%; height: 100%; object-fit: cover; display: block; /* Promote to its own layer so the tilt transform composites the bitmap instead of re-rasterising it blurry every frame. */ transform: translateZ(0); backface-visibility: hidden; } /* Specular sweep. Kept to a thin rim highlight — a wide white wash over the whole face reads as the photo losing quality, not as lighting. */ .cvp-portrait-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 44%, rgba(255, 255, 255, .1) 50%, transparent 56%); transform: translateX(-120%); animation: cvp-sheen 7s ease-in-out infinite; } @keyframes cvp-sheen { 0%, 68% { transform: translateX(-120%); } 88%, 100% { transform: translateX(120%); } } /* Floating status pill, parallaxed forward in Z */ .cvp-portrait-badge { position: absolute; bottom: 6px; inset-inline-start: -8px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(17, 20, 28, .9); border: 1px solid var(--line-2); backdrop-filter: blur(10px); font-size: .72rem; font-weight: 700; color: var(--ink); transform: translateZ(60px); box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .9); } .cvp-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .18); } .cvp-hero-body { min-width: 0; text-align: center; } @media (min-width: 900px) { .cvp-hero-body { text-align: start; } } .cvp-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--brand-soft); border: 1px solid rgba(251, 210, 2, .3); color: var(--brand); font-size: .72rem; font-weight: 700; margin-bottom: 18px; } .cvp-name-row { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 18px; } @media (min-width: 900px) { .cvp-name-row { justify-content: flex-start; } } .cvp-name { font-size: clamp(1.9rem, 6vw, 3.4rem); font-weight: 900; line-height: 1.35; margin: 0; letter-spacing: -.01em; background: linear-gradient(180deg, #ffffff 30%, #b9c2d4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .cvp-bio { color: var(--muted); font-size: .95rem; line-height: 2.2; margin: 0 0 28px; max-width: 60ch; } @media (min-width: 900px) { .cvp-bio { margin-inline-end: auto; } } .cvp-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } @media (min-width: 900px) { .cvp-hero-actions { justify-content: flex-start; } } /* Facts strip under the hero */ /* auto-fit: the tile count varies now that empty ones are dropped, so the row fills the width whether there are two of them or five. */ .cvp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 36px; } .cvp-fact { padding: 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); text-align: center; } .cvp-fact-value { display: block; color: var(--ink); font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.5; } .cvp-fact-label { display: block; color: var(--faint); font-size: .7rem; margin-top: 2px; } /* --------------------------------------------------------------- Buttons */ .cvp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 12px 26px; border-radius: 999px; border: 1px solid transparent; font-size: .875rem; font-weight: 800; cursor: pointer; transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .18s ease, background .18s ease; } .cvp-btn:active { transform: scale(.97); } .cvp-btn.is-brand { background: var(--brand); color: #14161c; box-shadow: 0 14px 40px -16px rgba(251, 210, 2, .85); } .cvp-btn.is-brand:hover { transform: translateY(-2px); box-shadow: 0 20px 48px -16px rgba(251, 210, 2, .95); color: #14161c; } .cvp-btn.is-glass { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); } .cvp-btn.is-glass:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); color: var(--ink); } /* -------------------------------------------------------------- Sections */ .cvp-section { margin-top: 72px; scroll-margin-top: 96px; } .cvp-section-head { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; } .cvp-section-num { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); color: var(--brand); font-size: 1.05rem; } .cvp-section-title { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--ink); line-height: 1.5; } .cvp-section-title small { display: block; color: var(--faint); font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; margin-top: 2px; } /* Sub-heading inside a section (e.g. Languages under Skills) */ .cvp-subhead { margin-top: 44px; } .cvp-subhead .cvp-section-title { font-size: 1rem; } .cvp-manage-accept { margin-top: 12px; } .cvp-card-note { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } /* ----------------------------------------------------------------- Cards */ .cvp-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } @media (min-width: 768px) { .cvp-cards.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .cvp-card { position: relative; padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(6px); overflow: hidden; transition: border-color .25s ease, background .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1); } /* Top edge highlight = the light hitting the card's front face */ .cvp-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(to left, transparent, rgba(255, 255, 255, .35), transparent); } .cvp-card:hover { border-color: var(--line-2); background: var(--surface-2); } .cvp-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .cvp-card-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--brand-soft); color: var(--brand); font-size: .95rem; } .cvp-card-title { margin: 0; font-size: .98rem; font-weight: 800; color: var(--ink); line-height: 1.7; } .cvp-card-sub { margin: 2px 0 0; color: var(--muted); font-size: .8rem; } .cvp-card-text { color: var(--muted); font-size: .85rem; line-height: 2.1; margin: 0; } .cvp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .cvp-tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); color: var(--muted); font-size: .72rem; font-weight: 600; } /* --------------------------------------------------- Personal info table */ .cvp-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } @media (min-width: 640px) { .cvp-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .cvp-info-row { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); } .cvp-info-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: rgba(255, 255, 255, .06); color: var(--brand); font-size: .9rem; } .cvp-info-label { color: var(--faint); font-size: .72rem; display: block; } .cvp-info-value { color: var(--ink); font-size: .88rem; font-weight: 700; display: block; margin-top: 1px; } /* ------------------------------------------------------------ Skill bars */ .cvp-skills { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; } @media (min-width: 768px) { .cvp-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; } } .cvp-skill-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .cvp-skill-name { color: var(--ink); font-size: .88rem; font-weight: 700; } .cvp-skill-level { color: var(--brand); font-size: .74rem; font-weight: 700; } .cvp-skill-track { position: relative; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .07); /* Not `overflow: hidden` — that would clip the fill's glow */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); } .cvp-skill-fill { position: relative; /* Clips the travelling highlight to the filled part; box-shadow is unaffected by an element's own overflow, so the glow still escapes. */ overflow: hidden; display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(to left, var(--brand), #ffe875); transition: width 1.2s cubic-bezier(.22, 1, .36, 1), box-shadow .6s ease .5s; box-shadow: 0 0 0 rgba(251, 210, 2, 0); } /* Glow arrives just after the bar lands, so it reads as the bar settling */ .cvp-skill-track.is-filled .cvp-skill-fill { box-shadow: 0 0 12px rgba(251, 210, 2, .65), 0 0 26px rgba(251, 210, 2, .35); } /* Travelling highlight along the filled part */ .cvp-skill-track.is-filled .cvp-skill-fill::after { content: ""; position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(to left, transparent, rgba(255, 255, 255, .55), transparent); width: 40%; animation: cvp-skill-shine 2.6s ease-in-out 1.4s infinite; } @keyframes cvp-skill-shine { 0%, 55% { transform: translateX(-140%); opacity: 0; } 62% { opacity: 1; } 92%, 100% { transform: translateX(140%); opacity: 0; } } /* ------------------------------------------------------------ Portfolios */ .cvp-portfolios { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; } @media (min-width: 700px) { .cvp-portfolios { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .cvp-work { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: border-color .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease; } .cvp-work:hover { border-color: var(--line-2); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .95); } .cvp-work-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-2); } .cvp-work-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22, 1, .36, 1); } .cvp-work:hover .cvp-work-cover img { transform: scale(1.06); } .cvp-work-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 13, 18, .85), transparent 55%); } .cvp-work-body { display: flex; flex-direction: column; gap: 10px; padding: 20px; flex: 1 1 auto; } .cvp-work-title { margin: 0; color: var(--ink); font-size: 1rem; font-weight: 800; line-height: 1.7; } .cvp-work-excerpt { color: var(--muted); font-size: .82rem; line-height: 2; margin: 0; } .cvp-work-foot { margin-top: auto; padding-top: 8px; } .cvp-work-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--brand); font-size: .82rem; font-weight: 700; } .cvp-work-link em { transition: transform .25s ease; } .cvp-work:hover .cvp-work-link em { transform: translateX(-4px); } /* --------------------------------------------------------------- Contact */ .cvp-contact { position: relative; margin-top: 96px; padding: 40px 24px; border-radius: 32px; background: radial-gradient(120% 120% at 80% 0%, rgba(251, 210, 2, .16), transparent 55%), var(--bg-2); border: 1px solid var(--line); overflow: hidden; } @media (min-width: 900px) { .cvp-contact { padding: 56px; } } .cvp-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; } @media (min-width: 900px) { .cvp-contact-grid { grid-template-columns: 200px minmax(0, 1fr); gap: 48px; } } .cvp-contact-avatar { justify-self: center; width: 160px; height: 160px; border-radius: 50%; overflow: hidden; border: 2px solid var(--line-2); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .95); } .cvp-contact-avatar img { width: 100%; height: 100%; object-fit: cover; } .cvp-contact-title { margin: 0 0 10px; font-size: 1.35rem; font-weight: 800; color: var(--ink); line-height: 1.6; } .cvp-contact-lead { color: var(--muted); font-size: .88rem; line-height: 2.1; margin: 0 0 24px; } .cvp-field { margin-bottom: 14px; } .cvp-field label { display: block; color: var(--muted); font-size: .78rem; font-weight: 600; margin-bottom: 8px; } .cvp-input { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); color: var(--ink); font-size: 16px; font-family: inherit; } @media (min-width: 768px) { .cvp-input { font-size: .875rem; } } .cvp-input::placeholder { color: var(--faint); } .cvp-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(251, 210, 2, .18); } /* Contact channels, once unlocked */ .cvp-channels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } @media (min-width: 640px) { .cvp-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .cvp-channel { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: rgba(255, 255, 255, .05); border: 1px solid var(--line); min-width: 0; } .cvp-channel-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; background: var(--brand-soft); color: var(--brand); } .cvp-channel-text { min-width: 0; display: flex; flex-direction: column; } .cvp-channel-text small { color: var(--faint); font-size: .68rem; } .cvp-channel-text span { color: var(--ink); font-size: .84rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Unavailable state */ .cvp-unavailable { text-align: center; } .cvp-unavailable-badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; background: rgba(225, 29, 72, .14); border: 1px solid rgba(225, 29, 72, .35); color: #ff8098; font-size: .8rem; font-weight: 800; margin-bottom: 18px; } /* ------------------------------------------------------------ Empty/misc */ .cvp-empty { text-align: center; padding: 64px 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px dashed var(--line-2); } .cvp-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .06); color: var(--faint); font-size: 1.5rem; margin-bottom: 16px; } .cvp-empty h4 { color: var(--ink); font-size: 1rem; font-weight: 800; margin: 0 0 8px; } .cvp-empty p { color: var(--muted); font-size: .85rem; margin: 0; } /* Pending (not-yet-approved) profile */ .cvp-pending { text-align: center; max-width: 560px; margin: 14vh auto 0; } .cvp-pending-icon { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: var(--brand-soft); border: 1px solid rgba(251, 210, 2, .3); color: var(--brand); font-size: 2rem; margin-bottom: 26px; } .cvp-pending-title { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 900; color: var(--ink); margin: 0 0 14px; line-height: 1.6; } .cvp-pending-text { color: var(--muted); font-size: .9rem; line-height: 2.2; margin: 0 0 30px; } .cvp-pending .cvp-hero-actions { justify-content: center; } .cvp-footer { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; color: var(--faint); font-size: .74rem; } /* Validation bar kept from the old page (custom.js hides it on .close em) */ .validation-error-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 14px 18px; border-radius: var(--r-md); background: rgba(225, 29, 72, .16); border: 1px solid rgba(225, 29, 72, .4); } .validation-error-bar .text { display: flex; align-items: center; gap: 10px; } .validation-error-bar p { margin: 0; color: #ffd7de; font-size: .82rem; line-height: 1.9; } .validation-error-bar .close { cursor: pointer; color: #ffd7de; padding: 8px; } /* --------------------------------------------------------- Reveal on scroll */ .cvp-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); } .cvp-reveal.is-in { opacity: 1; transform: none; } /* Motion is decoration here — everything must still be readable without it */ @media (prefers-reduced-motion: reduce) { .cvp *, .cvp *::before, .cvp *::after { animation: none !important; transition-duration: .01ms !important; } .cvp-reveal { opacity: 1; transform: none; } } /* The old public pages loaded dashlite; make sure its modal still reads dark */ .cvp .modal-content { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); } .cvp .modal-header, .cvp .modal-footer { background: transparent !important; border-color: var(--line); } .cvp .modal-header .header-title { color: var(--ink); font-size: .98rem; font-weight: 800; margin: 0; } .cvp .modal-body p { color: var(--muted); font-size: .85rem; line-height: 2.1; } .cvp .modal-body label { color: var(--muted); font-size: .78rem; } .cvp .modal-body .form-control { background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); color: var(--ink); min-height: 48px; border-radius: var(--r-sm); } .cvp .modal-content>.close { top: 16px; inset-inline-end: 16px; inset-inline-start: auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .07); color: var(--ink); z-index: 2; } .cvp .modal-footer .sub-text { color: var(--faint); font-size: .72rem; } /* ================================================== Academy verified mark */ /* * Only rendered for people the academy has actually certified. Sits inline with * the name, and carries its own tooltip rather than relying on the native * title attribute, which never appears on touch and cannot be styled. */ .cvp-verified { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--brand); color: #14161c; cursor: help; } .cvp-verified em { font-size: 13px; font-weight: 700; } .cvp-verified-tip { position: absolute; bottom: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(50%) translateY(4px); white-space: nowrap; padding: 6px 12px; border-radius: 8px; background: rgba(17, 20, 28, .96); border: 1px solid var(--line-2); color: var(--ink); font-size: 12px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .cvp-verified:hover .cvp-verified-tip, .cvp-verified:focus-visible .cvp-verified-tip { opacity: 1; transform: translateX(50%) translateY(0); } @media (max-width: 575.98px) { /* No hover on touch, so the tooltip would be unreachable — the accessible name on the badge still carries the meaning. */ .cvp-verified-tip { display: none; } } /* A tag that is a link out to the certificate */ .cvp-tag.is-link { background: var(--brand-soft); border-color: rgba(251, 210, 2, .35); color: var(--brand); font-weight: 700; } .cvp-tag.is-link:hover { background: rgba(251, 210, 2, .22); color: var(--brand); }