/* =====================================================================
Recruit So Simple — v2 design system
All rules scoped under body.v2 to avoid leaking into other pages.
===================================================================== */
body.v2 {
--rss-bg: #fafbfc;
--rss-surface: #ffffff;
--rss-surface-alt: #f4f6fa;
--rss-tint-blue: #eaf0fa; /* visible blue band */
--rss-tint-teal: #eaf0fa; /* alias to blue (legacy --teal name) */
--rss-surface-dark: #242830;
--rss-ink: #0b1220;
--rss-ink-2: #3a4358;
--rss-ink-3: #6b7589;
--rss-brand: #1d4ed8;
--rss-brand-ink: #0b2a8f;
--rss-accent: #06b6a4;
--rss-line: rgba(15, 23, 42, 0.08);
--rss-line-strong: rgba(15, 23, 42, 0.14);
--rss-shadow-sm: 0 4px 16px -4px rgba(15, 23, 42, 0.08);
--rss-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.18);
--rss-shadow-lg: 0 40px 100px -30px rgba(15, 23, 42, 0.28);
--rss-radius: 18px;
--rss-radius-sm: 10px;
/* 4pt spacing scale */
--space-2xs: 0.25rem; /* 4px */
--space-xs: 0.5rem; /* 8px */
--space-sm: 0.75rem; /* 12px */
--space-md: 1rem; /* 16px */
--space-lg: 1.5rem; /* 24px */
--space-xl: 2rem; /* 32px */
--space-2xl: 3rem; /* 48px */
--space-3xl: 4rem; /* 64px */
--space-4xl: 6rem; /* 96px */
--space-section: clamp(4rem, 8vw, 6.5rem);
--space-section-compact: clamp(2.5rem, 5vw, 3.5rem);
background: var(--rss-bg);
color: var(--rss-ink-2);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.v2 main {
position: relative;
}
body.v2 .v2-home > section:not(.v2-home-hero) {
content-visibility: auto;
contain-intrinsic-size: auto 760px;
}
/* ---------------------------------------------------------------------
Typography
--------------------------------------------------------------------- */
body.v2 h1,
body.v2 h2,
body.v2 h3,
body.v2 h4,
body.v2 h5,
body.v2 .v2-heading {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--rss-ink);
letter-spacing: -0.02em;
font-weight: 500;
}
body.v2 h1 {
font-size: clamp(2.5rem, 5vw, 4.5rem);
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 500;
}
body.v2 h2 {
font-size: clamp(1.75rem, 3vw, 2.75rem);
line-height: 1.1;
font-weight: 500;
}
body.v2 h3 {
font-size: 1.125rem;
line-height: 1.4;
letter-spacing: -0.01em;
font-weight: 600;
}
body.v2 p {
color: var(--rss-ink-2);
}
body.v2 .v2-eyebrow {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rss-brand);
margin-bottom: 1rem;
}
body.v2 .v2-eyebrow.is-accent { color: var(--rss-accent); }
body.v2 .v2-status-lockup {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
body.v2 .v2-status-lockup .v2-eyebrow {
margin-bottom: 0;
}
body.v2 .v2-coming-soon-badge,
body.v2 .ai-demo-status-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-height: 1.7rem;
padding: 0.35rem 0.72rem;
border: 1px solid rgba(217, 119, 6, 0.35);
border-radius: 999px;
background: #fff3bf;
color: #7c3d00;
box-shadow: 0 10px 22px -18px rgba(124, 61, 0, 0.7);
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
vertical-align: middle;
}
body.v2 .v2-coming-soon-badge::before,
body.v2 .ai-demo-status-badge::before {
content: '';
width: 0.42rem;
height: 0.42rem;
border-radius: 50%;
background: #f59e0b;
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
flex: 0 0 auto;
}
body.v2 .v2-lead {
font-size: 1.125rem;
line-height: 1.6;
color: var(--rss-ink-2);
max-width: 38rem;
}
/* ---------------------------------------------------------------------
Buttons (scoped, override Bootstrap on body.v2 only)
--------------------------------------------------------------------- */
body.v2 .btn {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 0.95rem;
border-radius: var(--rss-radius-sm);
padding: 0.75rem 1.4rem;
transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, color 120ms ease;
border: 1px solid transparent;
}
body.v2 .btn-primary {
background: var(--rss-brand);
border-color: var(--rss-brand);
color: #fff;
box-shadow: 0 6px 20px -8px rgba(29, 78, 216, 0.55);
}
body.v2 .btn-primary:hover,
body.v2 .btn-primary:active,
body.v2 .btn-primary:focus {
background: var(--rss-brand-ink) !important;
border-color: var(--rss-brand-ink) !important;
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 12px 30px -10px rgba(29, 78, 216, 0.6);
}
body.v2 .btn-ghost {
background: transparent;
border: 1px solid var(--rss-line-strong);
color: var(--rss-ink);
}
body.v2 .btn-ghost:hover,
body.v2 .btn-ghost:focus {
background: rgba(15, 23, 42, 0.04);
border-color: var(--rss-line-strong);
color: var(--rss-ink);
}
body.v2 .btn-on-dark {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #fff;
backdrop-filter: blur(8px);
}
body.v2 .btn-on-dark:hover {
background: rgba(255, 255, 255, 0.14);
color: #fff;
}
/* ---------------------------------------------------------------------
Nav (overrides .navbar-rss from style.css)
--------------------------------------------------------------------- */
body.v2 .navbar-rss {
background: rgba(11, 18, 32, 0.82) !important;
backdrop-filter: saturate(180%) blur(16px);
-webkit-backdrop-filter: saturate(180%) blur(16px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 10px 30px -10px rgba(11, 18, 32, 0.35);
padding-top: 0.75rem;
padding-bottom: 0.75rem;
position: sticky;
top: 0;
z-index: 50;
}
body.v2 [id] { scroll-margin-top: 96px; }
html:has(body.v2) { scroll-padding-top: 96px; scroll-behavior: smooth; }
body.v2 .navbar-rss .rss-logo-text {
color: rgba(255, 255, 255, 0.95);
font-size: 1.4rem;
}
@media (prefers-reduced-motion: reduce), (update: slow) {
html:has(body.v2) {
scroll-behavior: auto;
}
body.v2 *,
body.v2 *::before,
body.v2 *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
body.v2 .navbar-rss .navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.82);
font-family: 'Inter', sans-serif;
font-size: 0.92rem;
font-weight: 600;
letter-spacing: -0.005em;
}
body.v2 .navbar-rss .navbar-nav .nav-link:hover,
body.v2 .navbar-rss .navbar-nav .nav-link.active {
color: #fff;
}
body.v2 .navbar-rss .navbar-toggler {
border-color: rgba(255, 255, 255, 0.25);
}
body.v2 .navbar-rss .rss-dark-btn {
background: #fff !important;
border-color: #fff !important;
color: var(--rss-ink) !important;
border-radius: var(--rss-radius-sm) !important;
padding: 0.45rem 1rem !important;
font-family: 'Inter', sans-serif;
font-weight: 500;
}
body.v2 .navbar-rss .rss-dark-btn:hover {
background: rgba(255, 255, 255, 0.88) !important;
border-color: rgba(255, 255, 255, 0.88) !important;
color: var(--rss-ink) !important;
}
body.v2 .navbar-rss .dropdown-menu {
background: #fff;
border: 1px solid var(--rss-line);
box-shadow: var(--rss-shadow-sm);
}
body.v2 .navbar-rss .dropdown-item {
color: var(--rss-ink-2);
font-family: 'Inter', sans-serif;
font-size: 0.92rem;
}
body.v2 .navbar-rss .dropdown-item:hover,
body.v2 .navbar-rss .dropdown-item:focus {
color: var(--rss-ink);
background: var(--rss-surface-alt);
}
/* ---------------------------------------------------------------------
Section primitives
--------------------------------------------------------------------- */
body.v2 .v2-section {
padding: var(--space-section) 0;
}
body.v2 .v2-section--alt { background: var(--rss-surface-alt); }
body.v2 .v2-section--surface { background: var(--rss-surface); }
body.v2 .v2-section--blue { background: var(--rss-tint-blue); }
body.v2 .v2-section--teal { background: var(--rss-tint-teal); }
body.v2 .v2-section--compact { padding: var(--space-section-compact) 0; }
body.v2 .v2-section--compact .v2-section-head--center { margin-bottom: var(--space-xl); }
body.v2 .v2-section--dark {
background: var(--rss-surface-dark);
color: rgba(255, 255, 255, 0.78);
}
body.v2 .v2-section--dark h1,
body.v2 .v2-section--dark h2,
body.v2 .v2-section--dark h3 { color: #fff; }
body.v2 .v2-section--dark p { color: rgba(255, 255, 255, 0.72); }
/* ---------------------------------------------------------------------
1. Hero
--------------------------------------------------------------------- */
body.v2 .v2-hero {
padding: clamp(4rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
text-align: center;
}
body.v2 .v2-home-hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(2.75rem, 5vw, 4rem) 0 clamp(3rem, 5vw, 4.5rem);
color: #fff;
background:
linear-gradient(126deg, rgba(6, 182, 164, 0.18) 0 20%, transparent 20% 100%),
linear-gradient(114deg, #183f99 0%, #386fba 56%, #b8d7ee 100%);
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.45);
}
body.v2 .v2-home-hero::before,
body.v2 .v2-home-hero::after {
content: '';
position: absolute;
pointer-events: none;
z-index: -1;
}
body.v2 .v2-home-hero::before {
inset: 0;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 42%),
repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 22px);
opacity: 0.4;
}
body.v2 .v2-home-hero::after {
left: 0;
right: 0;
bottom: 0;
height: 6px;
background: linear-gradient(90deg, var(--rss-brand), var(--rss-accent), #f9c221, #ff6f4a);
}
body.v2 .v2-home-hero > .container {
position: relative;
z-index: 1;
}
body.v2 .v2-home-hero-inner {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(22rem, 1.05fr);
gap: clamp(2rem, 5vw, 5rem);
align-items: center;
min-height: clamp(22rem, 40vw, 31rem);
}
body.v2 .v2-home-hero-copy {
text-align: left;
}
body.v2 .v2-home-hero-copy > * {
animation: v2-home-copy-in 720ms cubic-bezier(0.22, 0.9, 0.32, 1) both;
}
body.v2 .v2-home-hero-copy > *:nth-child(2) { animation-delay: 90ms; }
body.v2 .v2-home-hero-copy > *:nth-child(3) { animation-delay: 180ms; }
body.v2 .v2-home-hero-copy > *:nth-child(4) { animation-delay: 270ms; }
body.v2 .v2-home-hero-media {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
perspective: 1000px;
animation: v2-home-media-in 1000ms cubic-bezier(0.18, 0.86, 0.22, 1) 180ms both;
}
body.v2 .v2-home-hero-media::before {
content: '';
position: absolute;
inset: 16% 5% 5% 6%;
border-radius: 999px;
background:
radial-gradient(circle at 62% 42%, rgba(255, 255, 255, 0.5), transparent 34%),
radial-gradient(circle at 48% 62%, rgba(6, 182, 164, 0.28), transparent 42%);
filter: blur(34px);
opacity: 0;
animation: v2-home-glow-in 1000ms ease 420ms both, v2-home-glow-pulse 5.5s ease-in-out 1.4s infinite;
will-change: transform, opacity;
}
body.v2 .v2-home-hero-media picture {
position: relative;
z-index: 2;
display: block;
width: min(112%, 48rem);
transform-origin: 55% 62%;
animation: v2-home-float 7s ease-in-out 1.15s infinite;
will-change: transform;
}
body.v2 .v2-home-hero-media img {
display: block;
width: 100%;
height: auto;
filter: drop-shadow(0 30px 44px rgba(11, 18, 32, 0.24));
}
body.v2 .v2-home-orbit {
position: absolute;
z-index: 1;
display: inline-grid;
place-items: center;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.66);
background: rgba(255, 255, 255, 0.2);
color: #fff;
box-shadow: 0 18px 42px rgba(11, 18, 32, 0.16), inset 0 -0.3rem 0.8rem rgba(29, 78, 216, 0.12);
opacity: 0;
will-change: transform, opacity;
backdrop-filter: blur(10px);
}
body.v2 .v2-home-orbit svg {
display: block;
}
body.v2 .v2-home-orbit--one {
width: 2.85rem;
height: 2.85rem;
top: 12%;
right: 16%;
animation: v2-home-particle-in 700ms ease 760ms both, v2-home-orbit-one 5.8s ease-in-out 1.3s infinite;
}
body.v2 .v2-home-orbit--two {
width: 3.05rem;
height: 3.05rem;
left: 9%;
bottom: 18%;
color: #183f99;
background: rgba(255, 255, 255, 0.82);
animation: v2-home-particle-in 700ms ease 900ms both, v2-home-orbit-two 6.5s ease-in-out 1.45s infinite;
}
body.v2 .v2-home-orbit--three {
width: 2.65rem;
height: 2.65rem;
right: 3%;
bottom: 32%;
color: #064e3b;
background: rgba(215, 255, 245, 0.82);
animation: v2-home-particle-in 700ms ease 1040ms both, v2-home-orbit-three 6.2s ease-in-out 1.55s infinite;
}
body.v2 .v2-home-orbit--four {
width: 2.45rem;
height: 2.45rem;
top: 26%;
left: 21%;
opacity: 0;
color: #1e3a8a;
background: rgba(255, 255, 255, 0.72);
animation: v2-home-particle-in 700ms ease 1180ms both, v2-home-orbit-four 7.2s ease-in-out 1.8s infinite;
}
body.v2 .v2-home-orbit--five {
width: 3.2rem;
height: 3.2rem;
top: 62%;
right: 11%;
color: #78350f;
background: rgba(249, 194, 33, 0.82);
animation: v2-home-particle-in 720ms ease 1320ms both, v2-home-orbit-five 7.8s ease-in-out 2s infinite;
}
body.v2 .v2-home-orbit--six {
width: 2.45rem;
height: 2.45rem;
top: 42%;
right: 0;
color: #075985;
background: rgba(184, 215, 238, 0.82);
animation: v2-home-particle-in 700ms ease 1460ms both, v2-home-orbit-six 6.9s ease-in-out 2.1s infinite;
}
body.v2 .v2-home-orbit--seven {
width: 2.75rem;
height: 2.75rem;
left: 24%;
bottom: 5%;
color: #14532d;
background: rgba(194, 233, 134, 0.84);
animation: v2-home-particle-in 720ms ease 1600ms both, v2-home-orbit-seven 8.2s ease-in-out 2.2s infinite;
}
body.v2 .v2-home-hero.is-motion-paused .v2-home-hero-media::before,
body.v2 .v2-home-hero.is-motion-paused .v2-home-hero-media picture,
body.v2 .v2-home-hero.is-motion-paused .v2-home-orbit {
animation-play-state: paused;
will-change: auto;
}
body.v2 .v2-hero h1 {
margin: 0.5rem auto 1.25rem;
max-width: 22ch;
}
body.v2 .v2-home-hero h1 {
margin-left: 0;
font-size: clamp(2.1rem, 4.4vw, 3.7rem);
color: #fff;
text-shadow: 0 12px 42px rgba(11, 18, 32, 0.22);
}
body.v2 .v2-hero .v2-lead {
margin: 0 auto 2rem;
max-width: 38rem;
}
body.v2 .v2-home-hero .v2-lead {
margin-left: 0;
color: rgba(255, 255, 255, 0.9);
}
body.v2 .v2-hero-ctas {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 4rem;
}
body.v2 .v2-home-hero .v2-hero-ctas {
justify-content: flex-start;
margin-bottom: 0;
}
body.v2 .v2-home-hero .v2-eyebrow.is-accent {
color: #d7fff5;
}
body.v2 .v2-home-hero .v2-status-lockup {
justify-content: flex-start;
}
body.v2 .v2-home-hero .btn-primary {
background: #fff;
border-color: #fff;
color: var(--rss-brand-ink);
box-shadow: 0 18px 38px -20px rgba(11, 18, 32, 0.72);
}
body.v2 .v2-home-hero .btn-primary:hover,
body.v2 .v2-home-hero .btn-primary:active,
body.v2 .v2-home-hero .btn-primary:focus {
background: rgba(255, 255, 255, 0.9) !important;
border-color: rgba(255, 255, 255, 0.9) !important;
color: var(--rss-brand-ink) !important;
}
body.v2 .v2-home-hero .btn-ghost {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.48);
color: #fff;
backdrop-filter: blur(8px);
}
body.v2 .v2-home-hero .btn-ghost:hover,
body.v2 .v2-home-hero .btn-ghost:focus {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.68);
color: #fff;
}
@media (max-width: 575px) {
body.v2 .v2-home-hero {
padding-top: 2rem;
padding-bottom: 2rem;
}
body.v2 .v2-home-hero-inner {
gap: 1.25rem;
}
body.v2 .v2-home-hero h1 {
font-size: 2rem;
}
body.v2 .v2-home-hero .v2-lead {
font-size: 1rem;
}
body.v2 .v2-home-hero-media picture {
width: min(88%, 21rem);
}
body.v2 .v2-home-hero .v2-hero-ctas {
margin-bottom: 0;
}
body.v2 .v2-hero-ctas .btn { width: 100%; }
}
@media (max-width: 991px) {
body.v2 .v2-home-hero-inner {
grid-template-columns: 1fr;
gap: 2rem;
min-height: 0;
}
body.v2 .v2-home-hero-copy {
text-align: center;
}
body.v2 .v2-home-hero h1,
body.v2 .v2-home-hero .v2-lead {
margin-left: auto;
margin-right: auto;
}
body.v2 .v2-home-hero .v2-hero-ctas {
justify-content: center;
}
body.v2 .v2-home-hero-media img {
width: 100%;
}
body.v2 .v2-home-hero-media picture {
width: min(100%, 34rem);
}
}
@keyframes v2-home-copy-in {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes v2-home-media-in {
from {
opacity: 0;
transform: translate3d(34px, 24px, 0) rotateX(8deg) rotateY(-10deg) scale(0.92);
filter: blur(10px);
}
62% {
opacity: 1;
transform: translate3d(-3px, -2px, 0) rotateX(0deg) rotateY(1deg) scale(1.015);
filter: blur(0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) scale(1);
filter: blur(0);
}
}
@keyframes v2-home-glow-in {
from { opacity: 0; transform: scale(0.7); }
to { opacity: 1; transform: scale(1); }
}
@keyframes v2-home-glow-pulse {
0%, 100% { opacity: 0.9; transform: scale(0.98); }
50% { opacity: 1; transform: scale(1.05); }
}
@keyframes v2-home-float {
0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
50% { transform: translate3d(0, -12px, 0) rotate(0.8deg); }
}
@keyframes v2-home-particle-in {
from { opacity: 0; transform: translateY(12px) scale(0.5); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes v2-home-orbit-one {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(12px, -16px, 0) scale(1.25); }
}
@keyframes v2-home-orbit-two {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(-14px, 10px, 0) scale(0.85); }
}
@keyframes v2-home-orbit-three {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(10px, 14px, 0) scale(1.2); }
}
@keyframes v2-home-orbit-four {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.78; }
45% { transform: translate3d(-18px, -10px, 0) scale(1.28); opacity: 1; }
}
@keyframes v2-home-orbit-five {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.88; }
50% { transform: translate3d(18px, -18px, 0) scale(0.88); opacity: 1; }
}
@keyframes v2-home-orbit-six {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.7; }
52% { transform: translate3d(10px, 18px, 0) scale(1.35); opacity: 0.96; }
}
@keyframes v2-home-orbit-seven {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.72; }
48% { transform: translate3d(-12px, 18px, 0) scale(1.15); opacity: 0.98; }
}
@media (prefers-reduced-motion: reduce), (update: slow) {
body.v2 .v2-home-hero-copy > *,
body.v2 .v2-home-hero-media,
body.v2 .v2-home-hero-media::before,
body.v2 .v2-home-hero-media picture,
body.v2 .v2-home-orbit {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
body.v2 .v2-home-orbit {
display: none;
}
}
body.v2 .v2-home-demo-band {
padding: clamp(2.75rem, 5vw, 4.5rem) 0;
background:
linear-gradient(180deg, #fff 0%, #f7fbff 100%);
border-bottom: 1px solid var(--rss-line);
}
body.v2 .v2-home-demo-intro {
text-align: center;
max-width: 43rem;
margin: 0 auto clamp(2rem, 4vw, 3rem);
}
body.v2 .v2-home-demo-intro h2 {
margin: 0.5rem 0 1rem;
}
body.v2 .v2-home-demo-intro p {
font-size: 1.05rem;
line-height: 1.6;
color: var(--rss-ink-2);
margin: 0 auto 1rem;
max-width: 38rem;
}
body.v2 .v2-home-demo-intro .v2-link {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 0.95rem;
color: var(--rss-brand);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
body.v2 .v2-home-demo-intro .v2-link::after {
content: '\2192';
transition: transform 160ms ease;
}
body.v2 .v2-home-demo-intro .v2-link:hover {
color: var(--rss-brand-ink);
}
body.v2 .v2-home-demo-intro .v2-link:hover::after {
transform: translateX(3px);
}
/* ---------------------------------------------------------------------
2. AI matching demo
--------------------------------------------------------------------- */
body.v2 .ai-demo {
position: relative;
max-width: 1040px;
margin: 0 auto;
background: var(--rss-surface);
border: 1px solid var(--rss-line);
border-radius: var(--rss-radius);
box-shadow: var(--rss-shadow-lg);
overflow: hidden;
text-align: left;
font-family: 'Inter', system-ui, sans-serif;
}
/* Browser-chrome dots ----------------------------------------------------- */
body.v2 .ai-demo-chrome {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 1rem;
border-bottom: 1px solid var(--rss-line);
background: var(--rss-surface-alt);
}
body.v2 .ai-demo-chrome .dot {
width: 10px; height: 10px; border-radius: 50%;
background: rgba(15, 23, 42, 0.18);
}
body.v2 .ai-demo-chrome .dot:nth-child(1) { background: #ff5f57; }
body.v2 .ai-demo-chrome .dot:nth-child(2) { background: #febc2e; }
body.v2 .ai-demo-chrome .dot:nth-child(3) { background: #28c840; }
body.v2 .ai-demo-chrome .url {
margin-left: 1rem;
font-size: 0.78rem;
color: var(--rss-ink-3);
letter-spacing: 0.02em;
}
/* Vacancy title + sub-tabs ----------------------------------------------- */
body.v2 .ai-demo-vacancy-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 1.25rem;
border-bottom: 1px solid var(--rss-line);
background: #fff;
flex-wrap: wrap;
}
body.v2 .ai-demo-vacancy-title {
font-weight: 600;
font-size: 0.95rem;
color: var(--rss-ink);
letter-spacing: -0.01em;
}
body.v2 .ai-demo-tabs {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 1.25rem;
font-size: 0.82rem;
color: var(--rss-ink-3);
}
body.v2 .ai-demo-tabs li {
position: relative;
padding: 0.25rem 0;
cursor: default;
}
body.v2 .ai-demo-tabs li.is-active {
color: var(--rss-brand);
font-weight: 600;
}
body.v2 .ai-demo-tabs li.is-active::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -0.85rem;
height: 2px;
background: var(--rss-brand);
border-radius: 2px;
}
/* Banner ------------------------------------------------------------------ */
body.v2 .ai-demo-banner {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
background: linear-gradient(135deg, #eef4ff 0%, #f5f9ff 100%);
border-bottom: 1px solid var(--rss-line);
}
body.v2 .ai-demo-banner-text h3 {
display: flex;
align-items: center;
gap: 0.55rem;
flex-wrap: wrap;
margin: 0 0 0.2rem;
font-size: 1.1rem;
font-weight: 700;
color: var(--rss-ink);
letter-spacing: -0.01em;
}
body.v2 .ai-demo-status-badge {
min-height: 1.35rem;
padding: 0.26rem 0.5rem;
font-size: 0.58rem;
letter-spacing: 0.07em;
}
body.v2 .ai-demo-status-badge::before {
width: 0.32rem;
height: 0.32rem;
box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18);
}
body.v2 .ai-demo-banner-text p {
margin: 0;
font-size: 0.82rem;
color: var(--rss-ink-3);
line-height: 1.45;
}
body.v2 .ai-demo-banner-actions {
display: flex;
gap: 0.4rem;
flex-shrink: 0;
}
body.v2 .ai-demo-icon-btn {
width: 34px; height: 34px;
padding: 0;
border-radius: 8px;
border: 1px solid var(--rss-line);
background: #fff;
color: var(--rss-ink-2);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: default;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
transition: box-shadow 200ms ease, transform 400ms cubic-bezier(0.22, 0.9, 0.32, 1), color 200ms ease;
}
body.v2 .ai-demo-icon-btn svg {
display: block;
}
body.v2 .ai-demo-rematch.is-pulsing {
color: var(--rss-brand);
}
body.v2 .ai-demo-rematch.is-pulsing svg {
animation: aidemo-rematch-spin 0.9s linear infinite;
transform-origin: 50% 50%;
}
@keyframes aidemo-rematch-spin {
to { transform: rotate(360deg); }
}
/* Filter row -------------------------------------------------------------- */
body.v2 .ai-demo-filter-row {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
padding: 0.85rem 1.5rem;
border-bottom: 1px solid var(--rss-line);
background: #fff;
font-size: 0.78rem;
}
body.v2 .ai-demo-filter {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
body.v2 .ai-demo-filter-label {
color: var(--rss-ink-3);
font-weight: 500;
}
body.v2 .ai-demo-slider {
position: relative;
display: inline-block;
width: 90px;
height: 4px;
}
body.v2 .ai-demo-slider-track {
position: absolute; inset: 0;
background: var(--rss-line);
border-radius: 999px;
}
body.v2 .ai-demo-slider-track::before {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
width: 50%;
background: var(--rss-brand);
border-radius: 999px;
}
body.v2 .ai-demo-slider-thumb {
position: absolute;
top: 50%; left: 50%;
width: 12px; height: 12px;
background: #fff;
border: 2px solid var(--rss-brand);
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}
body.v2 .ai-demo-filter-value {
color: var(--rss-ink-2);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
body.v2 .ai-demo-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.6rem;
border: 1px solid var(--rss-line);
border-radius: 6px;
background: #fff;
color: var(--rss-ink-2);
font-weight: 500;
}
body.v2 .ai-demo-caret {
color: var(--rss-ink-3);
font-size: 0.7em;
}
body.v2 .ai-demo-reset {
color: var(--rss-ink-3);
cursor: default;
}
body.v2 .ai-demo-filters-btn {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.75rem;
border: 1px solid var(--rss-line);
border-radius: 6px;
background: #fff;
color: var(--rss-ink-2);
font-size: 0.78rem;
font-weight: 500;
cursor: default;
}
/* Table ------------------------------------------------------------------- */
body.v2 .ai-demo-table {
background: #fff;
}
body.v2 .ai-demo-thead,
body.v2 .ai-demo-row {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) 130px 80px 70px 80px 56px;
align-items: center;
gap: 0.75rem;
padding: 0.7rem 1.5rem;
}
body.v2 .ai-demo-thead {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--rss-ink-3);
border-bottom: 1px solid var(--rss-line);
background: #fafbfc;
}
body.v2 .ai-demo-tbody {
display: block;
}
body.v2 .ai-demo-row {
border-bottom: 1px solid var(--rss-line);
font-size: 0.85rem;
color: var(--rss-ink);
opacity: 0;
transform: translateY(6px);
transition: opacity 320ms ease, transform 320ms ease;
}
body.v2 .ai-demo-row.is-in {
opacity: 1;
transform: translateY(0);
}
body.v2 .ai-demo-row:last-child {
border-bottom: 0;
}
body.v2 .ai-demo-cell-check {
display: flex;
align-items: center;
gap: 0.4rem;
}
body.v2 .ai-demo-checkbox {
width: 13px; height: 13px;
border: 1px solid var(--rss-line);
border-radius: 3px;
background: #fff;
flex-shrink: 0;
}
body.v2 .ai-demo-rating-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(15, 23, 42, 0.15);
flex-shrink: 0;
}
body.v2 .ai-demo-cell-name { min-width: 0; }
body.v2 .ai-demo-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 500;
}
body.v2 .ai-demo-code {
color: var(--rss-ink-3);
font-weight: 500;
}
body.v2 .ai-demo-fullname {
color: var(--rss-brand);
font-weight: 600;
}
body.v2 .ai-demo-row-meta {
margin-top: 0.15rem;
font-size: 0.75rem;
color: var(--rss-ink-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.v2 .ai-demo-row-meta .ai-demo-sep,
body.v2 .ai-demo-row-meta .ai-demo-dash {
margin: 0 0.4rem;
color: var(--rss-ink-3);
opacity: 0.7;
}
body.v2 .ai-demo-summary {
font-style: italic;
}
body.v2 .ai-demo-cell-score {
display: flex;
align-items: center;
gap: 0.6rem;
}
body.v2 .ai-demo-score-bar {
flex: 1;
height: 6px;
border-radius: 999px;
background: var(--rss-line);
overflow: hidden;
min-width: 0;
}
body.v2 .ai-demo-score-bar > span {
display: block;
height: 100%;
width: 0%;
background: #cbd5e1;
border-radius: 999px;
transition: width 900ms cubic-bezier(0.22, 0.9, 0.32, 1), background 300ms ease;
}
body.v2 .ai-demo-score-num {
transition: color 200ms ease;
}
body.v2 .ai-demo-row:not(.is-scored) .ai-demo-score-num {
color: var(--rss-ink-3);
}
body.v2 .ai-demo-row.is-good .ai-demo-score-bar > span { background: #10b981; }
body.v2 .ai-demo-row.is-possible .ai-demo-score-bar > span{ background: #f59e0b; }
body.v2 .ai-demo-row.is-low .ai-demo-score-bar > span { background: #94a3b8; }
body.v2 .ai-demo-score-num {
font-weight: 600;
font-size: 0.82rem;
color: var(--rss-ink-2);
font-variant-numeric: tabular-nums;
min-width: 42px;
text-align: right;
}
body.v2 .ai-demo-pill {
display: inline-flex;
align-items: center;
padding: 0.15rem 0.55rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.01em;
}
body.v2 .ai-demo-pill--active {
background: rgba(16, 185, 129, 0.12);
color: #047857;
}
body.v2 .ai-demo-cell-money {
color: var(--rss-ink-3);
font-size: 0.85rem;
}
body.v2 .ai-demo-cell-add {
display: flex;
justify-content: flex-end;
}
body.v2 .ai-demo-add-btn {
padding: 0.3rem 0.7rem;
border-radius: 6px;
border: 1px solid var(--rss-line);
background: #fff;
color: var(--rss-ink-2);
font-size: 0.75rem;
font-weight: 500;
cursor: default;
}
/* Footer ------------------------------------------------------------------ */
body.v2 .ai-demo-footer {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1rem;
padding: 0.75rem 1.5rem;
background: var(--rss-surface-alt);
border-top: 1px solid var(--rss-line);
font-size: 0.78rem;
color: var(--rss-ink-3);
}
body.v2 .ai-demo-actions-select {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.6rem;
border: 1px solid var(--rss-line);
border-radius: 6px;
background: #fff;
color: var(--rss-ink-2);
font-weight: 500;
justify-self: start;
}
body.v2 .ai-demo-count {
text-align: center;
color: var(--rss-ink-2);
}
body.v2 .ai-demo-count strong {
color: var(--rss-ink);
font-weight: 600;
}
body.v2 .ai-demo-meta {
justify-self: end;
color: var(--rss-ink-3);
font-variant-numeric: tabular-nums;
}
body.v2 .ai-demo-meta-text {
display: inline-flex;
align-items: center;
gap: 0.4rem;
transition: color 200ms ease;
}
body.v2 .ai-demo-meta-text.is-matching {
color: var(--rss-brand);
}
body.v2 .ai-demo-meta-text.is-matched {
color: #047857;
}
body.v2 .ai-demo-shimmer-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--rss-brand);
animation: aidemo-shimmer 1.1s ease-in-out infinite;
}
@keyframes aidemo-shimmer {
0%, 100% { opacity: 0.4; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.15); }
}
/* Mobile ------------------------------------------------------------------ */
@media (max-width: 767px) {
body.v2 .ai-demo-vacancy-bar {
flex-direction: column;
align-items: flex-start;
gap: 0.65rem;
padding: 0.85rem 1rem;
}
body.v2 .ai-demo-tabs {
gap: 0.9rem;
overflow-x: auto;
width: 100%;
}
body.v2 .ai-demo-tabs li.is-active::after { bottom: -0.65rem; }
body.v2 .ai-demo-banner {
padding: 1rem;
gap: 0.5rem;
}
body.v2 .ai-demo-banner-text h3 { font-size: 1rem; }
body.v2 .ai-demo-banner-text p { font-size: 0.78rem; }
body.v2 .ai-demo-filter-row { padding: 0.7rem 1rem; gap: 0.65rem; }
body.v2 .ai-demo-filter-row .ai-demo-filter:nth-child(3),
body.v2 .ai-demo-filter-row .ai-demo-reset { display: none; }
body.v2 .ai-demo-thead,
body.v2 .ai-demo-row {
grid-template-columns: 28px minmax(0, 1fr) 110px 50px;
padding: 0.65rem 1rem;
gap: 0.6rem;
}
body.v2 .ai-demo-thead .ai-demo-th-money,
body.v2 .ai-demo-row .ai-demo-cell-money,
body.v2 .ai-demo-row .ai-demo-cell-status {
display: none;
}
body.v2 .ai-demo-footer {
grid-template-columns: 1fr;
text-align: center;
gap: 0.4rem;
padding: 0.75rem 1rem;
}
body.v2 .ai-demo-actions-select,
body.v2 .ai-demo-meta {
justify-self: center;
}
}
@media (prefers-reduced-motion: reduce) {
body.v2 .ai-demo-row,
body.v2 .ai-demo-rematch,
body.v2 .ai-demo-shimmer-dot,
body.v2 .ai-demo-score-bar > span {
transition: none !important;
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* ---------------------------------------------------------------------
3. Trust strip
--------------------------------------------------------------------- */
body.v2 .v2-trust {
position: relative;
padding: clamp(2.25rem, 4vw, 3.25rem) 0 var(--space-section-compact);
border-top: 0;
border-bottom: 1px solid rgba(29, 78, 216, 0.16);
background:
linear-gradient(90deg, rgba(29, 78, 216, 0.08), rgba(6, 182, 164, 0.08), rgba(249, 194, 33, 0.1)),
var(--rss-surface);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
}
body.v2 .v2-trust-label {
text-align: center;
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rss-ink-3);
margin-bottom: 1.5rem;
}
body.v2 .v2-trust-label::after {
content: '';
display: block;
width: 7rem;
height: 3px;
margin: 1rem auto 0;
border-radius: 999px;
background: linear-gradient(90deg, var(--rss-brand), var(--rss-accent), #f9c221);
}
body.v2 .v2-trust-row {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 2.5rem 3.5rem;
}
body.v2 .v2-trust-row img {
max-height: 36px;
width: auto;
filter: grayscale(100%);
opacity: 0.55;
transition: filter 180ms ease, opacity 180ms ease;
}
body.v2 .v2-trust-row img:hover {
filter: grayscale(0%);
opacity: 1;
}
/* ---------------------------------------------------------------------
4-7. Feature sections (alternating)
--------------------------------------------------------------------- */
body.v2 .v2-feature {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 4rem;
align-items: center;
}
body.v2 .v2-feature.is-reverse {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
body.v2 .v2-feature.is-reverse .v2-feature-text {
order: 2;
}
@media (max-width: 991px) {
body.v2 .v2-feature,
body.v2 .v2-feature.is-reverse {
grid-template-columns: 1fr;
gap: 2.5rem;
}
body.v2 .v2-feature.is-reverse .v2-feature-text { order: 0; }
}
body.v2 .v2-feature-text h2 { margin-bottom: 1rem; max-width: 18ch; }
body.v2 .v2-feature-text p {
font-size: 1.05rem;
line-height: 1.6;
color: var(--rss-ink-2);
margin-bottom: 1.5rem;
max-width: 32rem;
}
body.v2 .v2-feature-text .v2-link {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 0.95rem;
color: var(--rss-brand);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
body.v2 .v2-feature-text .v2-link:hover { color: var(--rss-brand-ink); }
body.v2 .v2-feature-text .v2-link::after {
content: '\2192';
transition: transform 160ms ease;
}
body.v2 .v2-feature-text .v2-link:hover::after { transform: translateX(3px); }
body.v2 .v2-frame {
position: relative;
border-radius: var(--rss-radius);
background: #fff;
border: 1px solid var(--rss-line);
box-shadow: var(--rss-shadow);
overflow: hidden;
}
body.v2 .v2-frame-chrome {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 0.85rem;
border-bottom: 1px solid var(--rss-line);
background: var(--rss-surface-alt);
}
body.v2 .v2-frame-chrome .dot {
width: 10px; height: 10px; border-radius: 50%;
background: rgba(15, 23, 42, 0.18);
}
body.v2 .v2-frame-chrome .dot:nth-child(1) { background: #ff5f57; }
body.v2 .v2-frame-chrome .dot:nth-child(2) { background: #febc2e; }
body.v2 .v2-frame-chrome .dot:nth-child(3) { background: #28c840; }
body.v2 .v2-frame img {
display: block;
width: 100%;
height: auto;
}
body.v2 .v2-feature-todo {
display: grid;
place-items: center;
padding: 4rem 2rem;
background: var(--rss-surface-alt);
color: var(--rss-ink-3);
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
text-align: center;
letter-spacing: 0.02em;
}
/* ---------------------------------------------------------------------
Dashboard showcase
--------------------------------------------------------------------- */
body.v2 .v2-section--dashboard .v2-section-head {
text-align: center;
max-width: 42rem;
margin: 0 auto 3.5rem;
}
body.v2 .v2-section--dashboard .v2-section-head h2 {
margin: 0.5rem 0 1rem;
}
body.v2 .v2-section--dashboard .v2-section-head p {
font-size: 1.05rem;
line-height: 1.6;
color: var(--rss-ink-2);
margin-bottom: 1rem;
}
body.v2 .v2-section--dashboard .v2-link {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 0.95rem;
color: var(--rss-brand);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
body.v2 .v2-section--dashboard .v2-link::after {
content: '\2192';
transition: transform 160ms ease;
}
body.v2 .v2-section--dashboard .v2-link:hover { color: var(--rss-brand-ink); }
body.v2 .v2-section--dashboard .v2-link:hover::after { transform: translateX(3px); }
body.v2 .v2-dash {
position: relative;
max-width: 1040px;
margin: 0 auto;
background: #fff;
border: 1px solid var(--rss-line);
border-radius: var(--rss-radius);
box-shadow: var(--rss-shadow-lg);
overflow: hidden;
font-family: 'Inter', system-ui, sans-serif;
text-align: left;
color: var(--rss-ink);
}
body.v2 .v2-dash-chrome {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 1rem;
border-bottom: 1px solid var(--rss-line);
background: var(--rss-surface-alt);
}
body.v2 .v2-dash-chrome .dot {
width: 10px; height: 10px; border-radius: 50%;
}
body.v2 .v2-dash-chrome .dot:nth-child(1) { background: #ff5f57; }
body.v2 .v2-dash-chrome .dot:nth-child(2) { background: #febc2e; }
body.v2 .v2-dash-chrome .dot:nth-child(3) { background: #28c840; }
body.v2 .v2-dash-chrome .url {
margin-left: 1rem;
font-size: 0.78rem;
color: var(--rss-ink-3);
}
body.v2 .v2-dash-body {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 0.85rem;
background: #f6f8fb;
}
/* Greeting hero ----------------------------------------------------------- */
body.v2 .v2-dash-greeting {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.25rem;
padding: 1rem 1.25rem;
border-radius: 14px;
background: linear-gradient(135deg, #ddd5f7 0%, #e7defa 55%, #d8e0fb 100%);
overflow: hidden;
}
body.v2 .v2-dash-greeting::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: cover;
pointer-events: none;
}
body.v2 .v2-dash-greeting-text { position: relative; z-index: 1; }
body.v2 .v2-dash-greeting-text h3 {
margin: 0 0 0.15rem;
font-size: 1.05rem;
font-weight: 600;
color: var(--rss-ink);
letter-spacing: -0.01em;
}
body.v2 .v2-dash-greeting-text p {
margin: 0 0 0.55rem;
font-size: 0.82rem;
color: var(--rss-ink-2);
}
body.v2 .v2-dash-toggle {
display: inline-flex;
gap: 0.4rem;
}
body.v2 .v2-dash-toggle-opt {
padding: 0.35rem 0.85rem;
border-radius: 8px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.7);
font-size: 0.78rem;
font-weight: 600;
color: var(--rss-ink-2);
cursor: default;
}
body.v2 .v2-dash-toggle-opt.is-active {
background: var(--rss-ink);
color: #fff;
border-color: var(--rss-ink);
}
body.v2 .v2-dash-greeting-actions {
display: flex;
gap: 0.4rem;
position: relative;
z-index: 1;
}
body.v2 .v2-dash-pill-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.9rem;
border: 1px solid var(--rss-line);
border-radius: 8px;
background: #fff;
color: var(--rss-ink-2);
font-size: 0.78rem;
font-weight: 500;
cursor: default;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
/* Card primitive --------------------------------------------------------- */
body.v2 .v2-dash-card {
background: #fff;
border: 1px solid var(--rss-line);
border-radius: 12px;
padding: 0.85rem 1rem;
}
body.v2 .v2-dash-card h4 {
margin: 0 0 0.6rem;
font-size: 0.95rem;
font-weight: 700;
color: var(--rss-ink);
letter-spacing: -0.01em;
}
body.v2 .v2-dash-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.6rem;
flex-wrap: wrap;
}
body.v2 .v2-dash-card-head h4 { margin: 0; }
body.v2 .v2-dash-card-controls {
display: inline-flex;
gap: 0.4rem;
flex-wrap: wrap;
}
body.v2 .v2-dash-select {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.3rem 0.6rem;
border: 1px solid var(--rss-line);
border-radius: 6px;
background: #fff;
color: var(--rss-ink-2);
font-size: 0.75rem;
font-weight: 500;
}
body.v2 .v2-dash-caret { color: var(--rss-ink-3); font-size: 0.7em; }
/* Pipeline summary stats ------------------------------------------------- */
body.v2 .v2-dash-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
@media (max-width: 991px) { body.v2 .v2-dash-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { body.v2 .v2-dash-stats { grid-template-columns: 1fr; } }
body.v2 .v2-dash-stat {
padding: 0.75rem 0.85rem;
border: 1px solid var(--rss-line);
border-radius: 12px;
background: #fff;
}
body.v2 .v2-dash-stat-icon {
display: inline-grid;
place-items: center;
width: 32px; height: 32px;
border-radius: 9px;
margin-bottom: 0.5rem;
color: #fff;
}
body.v2 .v2-dash-stat-icon.is-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
body.v2 .v2-dash-stat-icon.is-purple { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
body.v2 .v2-dash-stat-icon.is-green { background: linear-gradient(135deg, #34d399, #10b981); }
body.v2 .v2-dash-stat-icon.is-amber { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
body.v2 .v2-dash-stat-icon.is-donut { background: transparent; padding: 0; }
body.v2 .v2-dash-stat-value {
font-size: 1.3rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--rss-ink);
line-height: 1.1;
margin-bottom: 0.1rem;
}
body.v2 .v2-dash-stat-label {
font-size: 0.82rem;
font-weight: 500;
color: var(--rss-ink-2);
}
body.v2 .v2-dash-stat-sub {
margin-top: 0.4rem;
font-size: 0.72rem;
color: var(--rss-ink-3);
}
/* Two-column grid for revenue/leaderboard, cv/funnel --------------------- */
body.v2 .v2-dash-grid-2 {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 0.7rem;
}
@media (max-width: 991px) {
body.v2 .v2-dash-grid-2 { grid-template-columns: 1fr; }
}
/* Revenue Tracker chart -------------------------------------------------- */
body.v2 .v2-dash-chart {
width: 100%;
height: 160px;
display: block;
}
/* Leaderboard ------------------------------------------------------------ */
body.v2 .v2-dash-lead-table { font-size: 0.82rem; }
body.v2 .v2-dash-lead-thead,
body.v2 .v2-dash-lead-row {
display: grid;
grid-template-columns: minmax(0, 1.6fr) 0.6fr 0.5fr 0.8fr;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.75rem;
}
body.v2 .v2-dash-lead-thead {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--rss-ink-3);
}
body.v2 .v2-dash-lead-row {
border-radius: 8px;
}
body.v2 .v2-dash-lead-row.is-you {
background: rgba(29, 78, 216, 0.06);
}
body.v2 .v2-dash-lead-row + .v2-dash-lead-row {
margin-top: 0.15rem;
}
body.v2 .v2-dash-lead-name {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.v2 .v2-dash-avatar {
width: 28px; height: 28px;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.02em;
flex-shrink: 0;
}
body.v2 .v2-dash-avatar--green { background: #10b981; }
body.v2 .v2-dash-avatar--amber { background: #f59e0b; }
body.v2 .v2-dash-avatar--red { background: #ef4444; }
body.v2 .v2-dash-you {
margin-left: 0.3rem;
padding: 0.05rem 0.4rem;
border-radius: 999px;
background: rgba(29, 78, 216, 0.12);
color: var(--rss-brand);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.02em;
}
/* CV Stats grid ---------------------------------------------------------- */
body.v2 .v2-dash-cvstat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.85rem;
}
@media (max-width: 575px) { body.v2 .v2-dash-cvstat-grid { grid-template-columns: repeat(2, 1fr); } }
body.v2 .v2-dash-cvstat {
padding: 0.7rem 0.85rem;
border: 1px solid var(--rss-line);
border-radius: 10px;
background: #fff;
}
body.v2 .v2-dash-cvstat .v2-dash-stat-value { font-size: 1.35rem; }
/* Pipeline Funnel -------------------------------------------------------- */
body.v2 .v2-dash-funnel-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
font-size: 0.82rem;
}
body.v2 .v2-dash-funnel-list li {
display: grid;
grid-template-columns: 110px minmax(0, 1fr) 28px;
align-items: center;
gap: 0.85rem;
}
body.v2 .v2-dash-funnel-label {
text-align: right;
color: var(--rss-ink-2);
font-weight: 500;
}
body.v2 .v2-dash-funnel-bar {
height: 12px;
background: var(--rss-surface-alt);
border-radius: 999px;
overflow: hidden;
display: block;
}
body.v2 .v2-dash-funnel-bar > span {
display: block;
height: 100%;
width: 0%;
border-radius: 999px;
transition: width 1100ms cubic-bezier(0.22, 0.9, 0.32, 1);
}
/* Dashboard animation states ------------------------------------- */
body.v2 [data-dash-demo] .v2-dash-chart-line {
/* stroke-dasharray + offset set by JS once length is measured */
}
body.v2 [data-dash-demo] .v2-dash-chart-area {
opacity: 0;
}
body.v2 [data-dash-demo] .v2-dash-chart-dot {
opacity: 0;
transform: scale(0);
transform-box: fill-box;
transform-origin: 50% 50%;
transition: opacity 220ms ease, transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.v2 [data-dash-demo] .v2-dash-chart-dot.is-in {
opacity: 1;
transform: scale(1);
}
body.v2 [data-dash-demo] .v2-dash-lead-row {
opacity: 0;
transform: translateY(8px);
transition: opacity 460ms ease, transform 460ms cubic-bezier(0.22, 0.9, 0.32, 1);
}
body.v2 [data-dash-demo] .v2-dash-lead-row.is-in {
opacity: 1;
transform: none;
}
body.v2 [data-dash-demo] .v2-dash-donut-arc {
stroke-dasharray: 0 97.4;
transition: stroke-dasharray 1200ms cubic-bezier(0.22, 0.9, 0.32, 1) 200ms;
}
body.v2 [data-dash-demo].is-animating .v2-dash-donut-arc {
stroke-dasharray: 50.6 97.4;
}
body.v2 .v2-dash-funnel-num {
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--rss-ink);
text-align: right;
}
/* Mobile tightening ------------------------------------------------------ */
@media (max-width: 767px) {
body.v2 .v2-dash-body { padding: 0.75rem; gap: 0.85rem; }
body.v2 .v2-dash-greeting {
flex-direction: column;
padding: 1.25rem;
}
body.v2 .v2-dash-card { padding: 1rem; }
body.v2 .v2-dash-card-head { gap: 0.5rem; }
body.v2 .v2-dash-funnel-list li { grid-template-columns: 90px minmax(0, 1fr) 24px; }
}
body.v2 .v2-feature-todo strong {
display: block;
font-weight: 600;
color: var(--rss-ink-2);
margin-bottom: 0.4rem;
}
/* ---------------------------------------------------------------------
Candidates grid demo (section 4)
--------------------------------------------------------------------- */
body.v2 .v2-section--grid .v2-section-head {
text-align: center;
margin: 0 auto 3rem;
max-width: 44rem;
}
body.v2 .v2-section--grid .v2-section-head h2 { margin: 0.6rem 0 0.9rem; }
body.v2 .v2-section--grid .v2-section-head p {
color: var(--rss-ink-3);
font-size: 1.05rem;
margin: 0 auto 1.1rem;
}
body.v2 .v2-section--grid .v2-link {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 0.95rem;
color: var(--rss-brand);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
body.v2 .v2-section--grid .v2-link::after {
content: '\2192';
transition: transform 200ms ease;
}
body.v2 .v2-section--grid .v2-link:hover { color: var(--rss-brand-ink); }
body.v2 .v2-section--grid .v2-link:hover::after { transform: translateX(3px); }
body.v2 .v2-grid {
position: relative;
max-width: 1040px;
margin: 0 auto;
background: #fff;
border: 1px solid var(--rss-line);
border-radius: var(--rss-radius);
box-shadow: var(--rss-shadow);
overflow: hidden;
font-family: 'Inter', sans-serif;
color: var(--rss-ink);
}
/* Browser chrome --------------------------------------------------------- */
body.v2 .v2-grid-chrome {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 1rem;
background: #f4f6fa;
border-bottom: 1px solid var(--rss-line);
}
body.v2 .v2-grid-chrome .dot {
width: 11px; height: 11px; border-radius: 50%;
display: inline-block;
}
body.v2 .v2-grid-chrome .dot:nth-child(1) { background: #ff5f57; }
body.v2 .v2-grid-chrome .dot:nth-child(2) { background: #febc2e; }
body.v2 .v2-grid-chrome .dot:nth-child(3) { background: #28c840; }
body.v2 .v2-grid-chrome .url {
margin-left: 0.6rem;
font-size: 0.78rem;
color: var(--rss-ink-3);
font-family: 'Inter', sans-serif;
}
/* Dark app top-bar ------------------------------------------------------- */
body.v2 .v2-grid-topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.65rem 1.1rem;
background: #1f2937;
color: #e5e7eb;
font-size: 0.85rem;
}
body.v2 .v2-grid-company {
font-weight: 600;
color: #f8fafc;
letter-spacing: -0.01em;
}
body.v2 .v2-grid-mainnav {
display: flex;
align-items: center;
gap: 1.05rem;
font-size: 0.82rem;
color: #cbd5e1;
}
body.v2 .v2-grid-mainnav > span:not(.v2-grid-iconset):not(.v2-grid-applogo) {
cursor: default;
}
body.v2 .v2-grid-mainnav .is-active {
color: #fff;
font-weight: 600;
}
body.v2 .v2-grid-iconset {
display: inline-flex;
align-items: center;
gap: 0.7rem;
padding-left: 0.4rem;
color: #cbd5e1;
}
body.v2 .v2-grid-applogo {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: #f8fafc;
font-weight: 600;
font-size: 0.85rem;
}
body.v2 .v2-grid-applogo img,
body.v2 .v2-grid-applogo-icon { display: block; flex-shrink: 0; }
/* Page header ------------------------------------------------------------ */
body.v2 .v2-grid-pagehead {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.95rem 1.25rem 0.7rem;
background: #f9fafb;
border-bottom: 1px solid var(--rss-line);
}
body.v2 .v2-grid-pagehead h4 {
margin: 0;
font-size: 1.05rem;
font-weight: 600;
letter-spacing: -0.01em;
}
body.v2 .v2-grid-pageactions {
display: flex;
align-items: center;
gap: 1rem;
color: var(--rss-ink-2);
font-size: 0.82rem;
}
body.v2 .v2-grid-pageactions span {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
/* Toolbar ---------------------------------------------------------------- */
body.v2 .v2-grid-toolbar {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid var(--rss-line);
font-size: 0.8rem;
color: var(--rss-ink-2);
flex-wrap: wrap;
}
body.v2 .v2-grid-iconbtns {
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
body.v2 .v2-grid-iconbtns button {
position: relative;
width: 28px; height: 28px;
border: 1px solid var(--rss-line);
background: #fff;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--rss-ink-2);
cursor: default;
}
body.v2 .v2-grid-click-pointer {
position: absolute;
right: -18px;
top: -11px;
width: 18px;
height: 22px;
color: #0f172a;
opacity: 0;
transform: translate3d(18px, -12px, 0) rotate(-12deg) scale(0.94);
pointer-events: none;
filter: drop-shadow(0 5px 8px rgba(15, 23, 42, 0.22));
z-index: 2;
}
body.v2 .v2-grid-click-pointer::before {
content: '';
position: absolute;
left: 1px;
top: 0;
width: 0;
height: 0;
border-top: 17px solid currentColor;
border-right: 10px solid transparent;
}
body.v2 .v2-grid-click-pointer::after {
content: '';
position: absolute;
left: 8px;
top: 12px;
width: 6px;
height: 9px;
border-radius: 2px;
background: currentColor;
transform: rotate(-28deg);
}
body.v2 .v2-grid-iconbtns button.is-pointing .v2-grid-click-pointer {
animation: v2-grid-pointer-click 620ms cubic-bezier(0.22, 0.9, 0.32, 1) both;
}
@keyframes v2-grid-pointer-click {
0% {
opacity: 0;
transform: translate3d(18px, -12px, 0) rotate(-12deg) scale(0.94);
}
45%, 72% {
opacity: 1;
transform: translate3d(0, 0, 0) rotate(-12deg) scale(1);
}
58% {
opacity: 1;
transform: translate3d(0, 0, 0) rotate(-12deg) scale(0.88);
}
100% {
opacity: 0;
transform: translate3d(-2px, 1px, 0) rotate(-12deg) scale(0.98);
}
}
body.v2 .v2-grid-actions,
body.v2 .v2-grid-clear {
border: 1px solid var(--rss-line);
border-radius: 6px;
padding: 0.32rem 0.65rem;
background: #fff;
font-weight: 500;
color: var(--rss-ink);
}
body.v2 .v2-grid-clear {
color: var(--rss-ink-3);
background: transparent;
border: none;
}
body.v2 .v2-grid-current {
color: var(--rss-ink-2);
}
body.v2 .v2-grid-current em {
font-style: normal;
color: var(--rss-ink);
font-weight: 500;
}
body.v2 .v2-grid-search {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--rss-ink-2);
}
body.v2 .v2-grid-search-input {
display: inline-flex;
align-items: center;
min-width: 200px;
height: 30px;
padding: 0 0.65rem;
background: #fff;
border: 1px solid var(--rss-line);
border-radius: 6px;
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
color: var(--rss-ink);
}
body.v2 .v2-grid-search-input [data-search-text] {
white-space: pre;
}
@keyframes v2-grid-blink {
0%, 50% { opacity: 0.85; }
50.01%, 100% { opacity: 0; }
}
/* Table ------------------------------------------------------------------ */
body.v2 .v2-grid-table {
width: 100%;
font-size: 0.83rem;
color: var(--rss-ink);
}
body.v2 .v2-grid-thead,
body.v2 .v2-grid-row {
display: grid;
grid-template-columns: 28px 14px 22px 76px 86px 86px 124px 78px 124px 130px 1fr 1fr;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 1.1rem;
}
body.v2 .v2-grid-thead {
border-bottom: 1px solid var(--rss-line);
font-weight: 600;
font-size: 0.78rem;
color: var(--rss-ink-2);
background: #fafbfc;
}
body.v2 .v2-grid-tbody { display: block; }
body.v2 .v2-grid-row {
border-bottom: 1px solid #f1f3f7;
will-change: opacity;
transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.v2 .v2-grid-row.is-hidden {
display: none;
}
body.v2 .v2-grid-row.is-in {
/* default visible */
}
body.v2 .v2-grid-cell-check { display: flex; align-items: center; }
body.v2 .v2-grid-checkbox {
width: 13px; height: 13px;
border: 1px solid #cbd5e1;
border-radius: 3px;
display: inline-block;
}
body.v2 .v2-grid-cell-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #cbd5e1;
}
body.v2 .v2-grid-cell-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--rss-ink-3);
}
body.v2 .v2-grid-cell-ref {
color: var(--rss-brand);
font-weight: 600;
}
body.v2 .v2-grid-row > div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Status pills ----------------------------------------------------------- */
body.v2 .v2-grid-status-pill {
display: inline-block;
padding: 0.18rem 0.6rem;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.005em;
border: 1px solid transparent;
white-space: nowrap;
}
body.v2 .v2-grid-status-pill.is-active {
background: #ecfdf5; color: #065f46; border-color: #a7f3d0;
}
body.v2 .v2-grid-status-pill.is-placed-int {
background: #eff6ff; color: #1e40af; border-color: #bfdbfe;
}
body.v2 .v2-grid-status-pill.is-placed-ext {
background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe;
}
body.v2 .v2-grid-status-pill.is-not-looking {
background: #f3f4f6; color: #374151; border-color: #e5e7eb;
}
body.v2 .v2-grid-status-pill.is-do-not-use {
background: #fef2f2; color: #991b1b; border-color: #fecaca;
}
/* Footer ----------------------------------------------------------------- */
body.v2 .v2-grid-foot {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.85rem 1.25rem;
background: #fafbfc;
border-top: 1px solid var(--rss-line);
font-size: 0.8rem;
color: var(--rss-ink-2);
flex-wrap: wrap;
}
body.v2 .v2-grid-foot-pill {
border: 1px solid var(--rss-line);
border-radius: 6px;
padding: 0.32rem 0.65rem;
background: #fff;
color: var(--rss-ink);
}
body.v2 .v2-grid-records {
margin: 0 auto 0 0.6rem;
}
body.v2 .v2-grid-records strong {
color: var(--rss-ink);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
body.v2 .v2-grid-pagi {
display: inline-flex;
gap: 0.25rem;
font-variant-numeric: tabular-nums;
}
body.v2 .v2-grid-pagi span {
min-width: 26px;
height: 26px;
border: 1px solid var(--rss-line);
border-radius: 5px;
padding: 0 0.45rem;
background: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--rss-ink-2);
}
body.v2 .v2-grid-pagi span.is-active {
background: var(--rss-brand);
border-color: var(--rss-brand);
color: #fff;
}
/* CV Search modal (animated demo) -------------------------------------- */
body.v2 .v2-grid-iconbtns button.is-active {
border-color: #93c5fd;
background: #eff6ff;
color: #1d4ed8;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
body.v2 .v2-grid-cvmodal {
position: absolute;
inset: 0;
z-index: 5;
pointer-events: none;
visibility: hidden;
}
body.v2 .v2-grid-cvmodal.is-open {
pointer-events: auto;
visibility: visible;
}
body.v2 .v2-grid-cvmodal-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.45);
opacity: 0;
transition: opacity 220ms ease;
}
body.v2 .v2-grid-cvmodal.is-open .v2-grid-cvmodal-backdrop {
opacity: 1;
}
body.v2 .v2-grid-cvmodal-dialog {
position: absolute;
top: 50%;
left: 50%;
width: min(540px, calc(100% - 32px));
max-height: calc(100% - 32px);
overflow: auto;
background: #fff;
border-radius: 10px;
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
transform: translate(-50%, -50%) scale(0.96);
opacity: 0;
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
}
body.v2 .v2-grid-cvmodal.is-open .v2-grid-cvmodal-dialog {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
body.v2 .v2-grid-cvmodal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.85rem 1.1rem;
border-bottom: 1px solid #eef0f4;
}
body.v2 .v2-grid-cvmodal-title {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
font-size: 0.95rem;
color: var(--rss-ink);
}
body.v2 .v2-grid-cvmodal-title svg { color: var(--rss-ink-2); }
body.v2 .v2-grid-cvmodal-close {
font-size: 1.15rem;
line-height: 1;
color: var(--rss-ink-3);
cursor: default;
padding: 0 0.25rem;
}
body.v2 .v2-grid-cvmodal-body {
padding: 1rem 1.1rem 0.85rem;
}
body.v2 .v2-grid-cvmodal-textarea {
position: relative;
min-height: 96px;
border: 1px solid #cbd5e1;
border-radius: 6px;
padding: 0.6rem 0.75rem 1.6rem;
font-size: 0.85rem;
color: var(--rss-ink);
background: #fff;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
body.v2 .v2-grid-cvmodal-line {
display: block;
white-space: pre-wrap;
word-break: break-word;
line-height: 1.4;
}
body.v2 .v2-grid-cvmodal.is-open .v2-grid-cvmodal-textarea {
border-color: #60a5fa;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
body.v2 .v2-grid-cvmodal-text { white-space: pre-wrap; }
body.v2 .v2-grid-cvmodal-placeholder {
position: absolute;
top: 0.6rem;
left: 0.75rem;
right: 2rem;
color: var(--rss-ink-3);
pointer-events: none;
font-size: 0.85rem;
}
body.v2 .v2-grid-cvmodal-textarea.is-typing .v2-grid-cvmodal-placeholder {
display: none;
}
body.v2 .v2-grid-cvmodal-caret {
display: none;
width: 1px;
height: 14px;
background: var(--rss-ink);
vertical-align: -2px;
margin-left: 1px;
animation: v2-grid-blink 1s steps(1) infinite;
}
body.v2 .v2-grid-cvmodal-textarea.is-typing .v2-grid-cvmodal-caret {
display: inline-block;
}
body.v2 .v2-grid-cvmodal-tick {
position: absolute;
right: 0.55rem;
bottom: 0.55rem;
width: 18px;
height: 18px;
border-radius: 50%;
background: #3b82f6;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
body.v2 .v2-grid-cvmodal-improve-row {
display: flex;
justify-content: flex-end;
margin-top: 0.65rem;
}
body.v2 .v2-grid-cvmodal-improve {
display: inline-flex;
align-items: center;
gap: 0.35rem;
border: 1px solid var(--rss-line);
border-radius: 6px;
padding: 0.32rem 0.6rem;
font-size: 0.8rem;
color: var(--rss-ink);
background: #fff;
}
body.v2 .v2-grid-cvmodal-help {
margin-top: 0.85rem;
background: #f7f8fa;
border: 1px solid #eef0f4;
border-radius: 8px;
padding: 0.7rem 0.85rem;
font-size: 0.82rem;
color: var(--rss-ink-2);
}
body.v2 .v2-grid-cvmodal-help strong {
display: block;
color: var(--rss-ink);
font-weight: 600;
margin-bottom: 0.4rem;
}
body.v2 .v2-grid-cvmodal-help ul {
list-style: disc;
padding-left: 1.1rem;
margin: 0;
}
body.v2 .v2-grid-cvmodal-help li {
margin: 0.18rem 0;
line-height: 1.45;
}
body.v2 .v2-grid-cvmodal-help code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
background: #fff;
border: 1px solid #e2e6ec;
color: var(--rss-ink);
padding: 1px 5px;
border-radius: 4px;
font-size: 0.78rem;
}
body.v2 .v2-grid-cvmodal-tip {
margin: 0.7rem 0 0;
font-size: 0.78rem;
color: var(--rss-ink-3);
}
body.v2 .v2-grid-cvmodal-tip em { font-style: italic; }
body.v2 .v2-grid-cvmodal-foot {
display: flex;
justify-content: flex-end;
gap: 0.55rem;
padding: 0.85rem 1.1rem 1rem;
border-top: 1px solid #eef0f4;
}
body.v2 .v2-grid-cvmodal-btn {
border-radius: 6px;
padding: 0.45rem 1rem;
font-size: 0.85rem;
font-weight: 500;
cursor: default;
border: 1px solid var(--rss-line);
background: #fff;
color: var(--rss-ink);
transition: transform 100ms ease;
}
body.v2 .v2-grid-cvmodal-btn.is-search {
background: #2563eb;
border-color: #2563eb;
color: #fff;
}
body.v2 .v2-grid-cvmodal-btn.is-pressed {
transform: scale(0.96);
}
/* Mobile tightening ------------------------------------------------------ */
@media (max-width: 1199px) {
body.v2 .v2-grid { font-size: 0.78rem; }
body.v2 .v2-grid-thead,
body.v2 .v2-grid-row {
grid-template-columns: 26px 14px 18px 70px 80px 80px 110px 70px 0 90px 1fr 0;
column-gap: 0.45rem;
}
body.v2 .v2-grid-thead > div:nth-child(9),
body.v2 .v2-grid-row > div:nth-child(9),
body.v2 .v2-grid-thead > div:nth-child(12),
body.v2 .v2-grid-row > div:nth-child(12) { display: none; }
}
@media (max-width: 991px) {
body.v2 .v2-grid-mainnav { gap: 0.65rem; }
body.v2 .v2-grid-pageactions { gap: 0.55rem; flex-wrap: wrap; }
body.v2 .v2-grid-thead,
body.v2 .v2-grid-row {
grid-template-columns: 22px 12px 0 64px 70px 70px 90px 0 0 80px 1fr 0;
}
body.v2 .v2-grid-thead > div:nth-child(3),
body.v2 .v2-grid-row > div:nth-child(3),
body.v2 .v2-grid-thead > div:nth-child(8),
body.v2 .v2-grid-row > div:nth-child(8) { display: none; }
}
@media (max-width: 767px) {
body.v2 .v2-grid-topbar { display: none; }
body.v2 .v2-grid-pageactions { display: none; }
body.v2 .v2-grid-iconbtns { display: none; }
body.v2 .v2-grid-search { margin-left: 0; width: 100%; }
body.v2 .v2-grid-thead,
body.v2 .v2-grid-row {
grid-template-columns: 0 0 0 60px 70px 70px 0 0 0 80px 1fr 0;
padding: 0.6rem 0.9rem;
}
body.v2 .v2-grid-thead > div:nth-child(7),
body.v2 .v2-grid-row > div:nth-child(7) { display: none; }
}
/* ---------------------------------------------------------------------
Reviews (override style.css review-summary)
--------------------------------------------------------------------- */
body.v2 .v2-reviews {
padding: var(--space-section-compact) 0;
background: linear-gradient(180deg, var(--rss-surface) 0%, var(--rss-bg) 100%);
border-top: 1px solid var(--rss-line);
border-bottom: 1px solid var(--rss-line);
}
body.v2 .v2-reviews .review-summary {
text-align: left !important;
display: flex;
flex-direction: column;
justify-content: center;
}
body.v2 .v2-reviews .review-summary p { color: var(--rss-ink-2); }
body.v2 .v2-reviews .review-summary .fs-4 {
font-family: 'Inter', sans-serif;
font-weight: 700;
color: var(--rss-ink) !important;
letter-spacing: 0.02em;
}
body.v2 .v2-reviews .review-summary img { max-width: 110px; }
body.v2 .v2-reviews .col-lg-4 {
text-align: left !important;
padding: 1.5rem !important;
margin: 0 !important;
background: var(--rss-surface);
border: 1px solid var(--rss-line);
border-radius: 12px;
box-shadow: var(--rss-shadow-sm);
flex: 1 1 280px;
max-width: 360px;
}
body.v2 .v2-reviews .col-lg-4.review-summary {
background: transparent;
border: 0;
box-shadow: none;
padding: 0 !important;
}
body.v2 .v2-reviews .col-lg-4 p.fs-6.fw-bold {
font-family: 'Inter', sans-serif;
color: var(--rss-ink) !important;
font-size: 0.95rem !important;
margin-bottom: 0.75rem;
}
body.v2 .v2-reviews .col-lg-4 p:not(.fs-6) {
color: var(--rss-ink-2);
line-height: 1.65;
margin-bottom: 0;
}
body.v2 .v2-reviews .gold-color {
color: #f5b942 !important;
font-size: 0.9rem;
}
body.v2 .v2-reviews .row {
align-items: stretch;
flex-wrap: wrap;
gap: 1rem;
}
@media (max-width: 991px) {
body.v2 .v2-reviews { padding: 3.5rem 0; }
body.v2 .v2-reviews .row { padding-inline: 0 !important; }
body.v2 .v2-reviews .col-lg-4 {
max-width: none;
flex-basis: 100%;
}
}
/* ---------------------------------------------------------------------
Closing CTA band
--------------------------------------------------------------------- */
body.v2 .v2-cta {
position: relative;
padding: 6rem 0;
background: var(--rss-surface-dark);
color: rgba(255, 255, 255, 0.78);
overflow: hidden;
text-align: center;
}
body.v2 .v2-cta::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 0%, rgba(29, 78, 216, 0.28), transparent 50%),
radial-gradient(circle at 80% 100%, rgba(148, 163, 184, 0.20), transparent 55%);
pointer-events: none;
}
body.v2 .v2-cta > .container { position: relative; z-index: 1; }
body.v2 .v2-cta h2 {
color: #fff;
font-size: clamp(1.875rem, 3.2vw, 2.75rem);
margin-bottom: 1rem;
max-width: 22ch;
margin-inline: auto;
}
body.v2 .v2-cta p {
color: rgba(255, 255, 255, 0.72);
max-width: 36rem;
margin: 0 auto 2rem;
font-size: 1.05rem;
}
body.v2 .v2-cta-row {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
/* ---------------------------------------------------------------------
Footer (override style.css .footer)
--------------------------------------------------------------------- */
body.v2 .footer {
background: var(--rss-surface-dark) !important;
color: rgba(255, 255, 255, 0.62);
padding: 4rem 0 3rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.v2 .footer h1.fs-5,
body.v2 .footer h6 {
font-family: 'Inter', sans-serif;
color: #fff;
font-weight: 600;
letter-spacing: -0.01em;
font-size: 0.95rem;
margin-bottom: 1rem;
}
body.v2 .footer a {
color: rgba(255, 255, 255, 0.72);
font-size: 0.92rem;
transition: color 120ms ease;
}
body.v2 .footer a:hover { color: #fff; }
body.v2 .footer ul.list-unstyled li { margin-bottom: 0.4rem; }
body.v2 .footer p,
body.v2 .footer small { color: rgba(255, 255, 255, 0.55); }
/* Hide the redundant button row in footer — closing CTA band above already covers this */
body.v2 .footer .row.mb-4 { display: none; }
/* ---------------------------------------------------------------------
Pipeline demo widget (homepage section 4)
--------------------------------------------------------------------- */
body.v2 .v2-section--pipeline .v2-section-head {
text-align: center;
max-width: 42rem;
margin: 0 auto 3.5rem;
}
body.v2 .v2-section--pipeline .v2-section-head h2 {
margin: 0.5rem 0 1rem;
}
body.v2 .v2-section--pipeline .v2-section-head p {
font-size: 1.05rem;
line-height: 1.6;
color: var(--rss-ink-2);
margin-bottom: 1rem;
}
body.v2 .v2-pipe {
max-width: 1040px;
margin: 3.25rem auto 0;
background: #fff;
border-radius: 14px;
box-shadow: 0 30px 80px -30px rgba(15, 23, 42, 0.28), 0 8px 24px -8px rgba(15, 23, 42, 0.12);
overflow: hidden;
font-family: 'Inter', sans-serif;
color: var(--rss-ink);
}
body.v2 .v2-pipe-chrome {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 0.85rem;
background: #f7f8fa;
border-bottom: 1px solid #e7eaef;
}
body.v2 .v2-pipe-chrome .dot {
width: 11px; height: 11px; border-radius: 50%;
background: #ddd;
}
body.v2 .v2-pipe-chrome .dot:nth-child(1) { background: #ff5f56; }
body.v2 .v2-pipe-chrome .dot:nth-child(2) { background: #ffbd2e; }
body.v2 .v2-pipe-chrome .dot:nth-child(3) { background: #27c93f; }
body.v2 .v2-pipe-chrome .url {
margin-left: 0.85rem;
font-size: 0.78rem;
color: #94a3b8;
}
body.v2 .v2-pipe-subnav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.7rem 1.4rem 0.6rem;
background: #fff;
border-bottom: 1px solid #eef0f4;
}
body.v2 .v2-pipe-subnav h4 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: var(--rss-ink);
}
body.v2 .v2-pipe-subnav-items {
display: flex;
gap: 1.2rem;
font-size: 0.84rem;
color: #64748b;
}
body.v2 .v2-pipe-subnav-items span {
display: inline-flex;
align-items: center;
gap: 0.32rem;
cursor: default;
}
body.v2 .v2-pipe-subnav-items span svg { color: #94a3b8; }
body.v2 .v2-pipe-subnav-items .is-active {
color: var(--rss-brand);
font-weight: 600;
}
body.v2 .v2-pipe-subnav-items .is-active svg { color: var(--rss-brand); }
body.v2 .v2-pipe-banner {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin: 0.85rem 1.4rem 0;
padding: 0.85rem 1.1rem;
background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%);
border: 1px solid #dbeafe;
border-left: 4px solid var(--rss-brand);
border-radius: 10px;
}
body.v2 .v2-pipe-banner-text h3 {
margin: 0 0 0.18rem;
font-size: 1.1rem;
font-weight: 600;
color: var(--rss-ink);
}
body.v2 .v2-pipe-banner-text p {
margin: 0 0 0.45rem;
font-size: 0.84rem;
color: #64748b;
}
body.v2 .v2-pipe-tabs {
display: inline-flex;
gap: 0.4rem;
}
body.v2 .v2-pipe-tabs span {
padding: 0.32rem 0.85rem;
font-size: 0.82rem;
font-weight: 500;
border-radius: 8px;
background: rgba(255, 255, 255, 0.7);
color: #475569;
border: 1px solid rgba(15, 23, 42, 0.06);
cursor: default;
}
body.v2 .v2-pipe-tabs .is-active {
background: #1f2937;
color: #fff;
border-color: #1f2937;
}
body.v2 .v2-pipe-banner-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
body.v2 .v2-pipe-chip {
display: inline-flex;
align-items: center;
gap: 0.32rem;
padding: 0.42rem 0.7rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 0.8rem;
color: #475569;
cursor: default;
}
body.v2 .v2-pipe-chip svg { color: #94a3b8; }
body.v2 .v2-pipe-iconbtn {
width: 32px; height: 32px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #64748b;
padding: 0;
cursor: default;
}
body.v2 .v2-pipe-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.85rem;
margin: 0.85rem 1.4rem 0;
}
body.v2 .v2-pipe-stat {
position: relative;
padding: 0.7rem 0.95rem 0.7rem;
background: #fff;
border: 1px solid #e7eaef;
border-radius: 10px;
border-top: none;
}
body.v2 .v2-pipe-stat::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
border-radius: 10px 10px 0 0;
background: var(--bar, #cbd5e1);
}
body.v2 .v2-pipe-stat:nth-child(1) { --bar: #3b82f6; }
body.v2 .v2-pipe-stat:nth-child(2) { --bar: #8b5cf6; }
body.v2 .v2-pipe-stat:nth-child(3) { --bar: #10b981; }
body.v2 .v2-pipe-stat-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px; height: 30px;
border-radius: 9px;
color: #fff;
margin-bottom: 0.4rem;
}
body.v2 .v2-pipe-stat-icon.is-blue { background: #3b82f6; }
body.v2 .v2-pipe-stat-icon.is-purple { background: #8b5cf6; }
body.v2 .v2-pipe-stat-icon.is-green { background: #10b981; }
body.v2 .v2-pipe-stat-value {
font-size: 1.45rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--rss-ink);
line-height: 1.05;
letter-spacing: -0.02em;
}
body.v2 .v2-pipe-stat-label {
font-size: 0.92rem;
font-weight: 600;
color: var(--rss-ink);
margin-top: 0.18rem;
}
body.v2 .v2-pipe-stat-sub {
font-size: 0.78rem;
color: #94a3b8;
margin-top: 0.1rem;
}
body.v2 .v2-pipe-status-head {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0.95rem 1.4rem 0;
padding: 0.55rem 0.95rem;
background: linear-gradient(90deg, #f5f3ff 0%, #faf5ff 100%);
border-left: 3px solid #8b5cf6;
border-radius: 0 8px 8px 0;
}
body.v2 .v2-pipe-status-head h4 {
margin: 0;
font-size: 0.96rem;
font-weight: 600;
color: var(--rss-ink);
}
body.v2 .v2-pipe-show {
font-size: 0.82rem;
color: var(--rss-brand);
cursor: default;
}
body.v2 .v2-pipe-stage {
margin: 0.6rem 1.4rem 0;
background: #fff;
border-left: 3px solid var(--stage-color, #e2e8f0);
border-radius: 0 8px 8px 0;
}
body.v2 .v2-pipe-stage--shortlist { --stage-color: #10b981; }
body.v2 .v2-pipe-stage--cv { --stage-color: #8b5cf6; }
body.v2 .v2-pipe-stage:last-child { margin-bottom: 1rem; }
body.v2 .v2-pipe-stage-head {
padding: 0.45rem 1rem;
}
body.v2 .v2-pipe-stage-head h5 {
margin: 0;
font-size: 0.96rem;
font-weight: 600;
color: var(--rss-ink);
}
body.v2 .v2-pipe-stage-count {
margin-left: 0.35rem;
font-size: 0.86rem;
color: #94a3b8;
font-weight: 500;
font-variant-numeric: tabular-nums;
}
body.v2 .v2-pipe-stage-thead,
body.v2 .v2-pipe-row {
display: grid;
grid-template-columns: 38px minmax(180px, 1.4fr) minmax(140px, 1.3fr) minmax(90px, 0.9fr) minmax(80px, 0.85fr) 100px 80px 90px 60px;
align-items: center;
gap: 0.6rem;
padding: 0.4rem 1rem;
font-size: 0.82rem;
}
body.v2 .v2-pipe-stage-thead {
border-top: 1px solid #eef0f4;
border-bottom: 1px solid #eef0f4;
font-size: 0.74rem;
font-weight: 500;
text-transform: none;
color: #64748b;
background: #fafbfc;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
body.v2 .v2-pipe-row {
position: relative;
border-bottom: 1px solid #f1f3f6;
color: var(--rss-ink);
opacity: 0;
transform: translateY(8px);
transition: opacity 360ms ease, transform 360ms ease, background 220ms ease, box-shadow 220ms ease;
background: #fff;
}
body.v2 .v2-pipe-row.is-in {
opacity: 1;
transform: none;
}
body.v2 .v2-pipe-row.is-moving {
background: #fff7ed;
box-shadow: inset 3px 0 0 #f59e0b;
}
body.v2 .v2-pipe-row.is-arriving {
opacity: 0;
transform: translateY(-12px);
}
body.v2 .v2-pipe-row:last-child { border-bottom: none; }
body.v2 .v2-pipe-cell-star {
display: flex;
align-items: center;
gap: 0.35rem;
color: #cbd5e1;
}
body.v2 .v2-pipe-cell-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #cbd5e1;
display: inline-block;
}
body.v2 .v2-pipe-cell-cand {
display: flex;
align-items: center;
gap: 0.4rem;
min-width: 0;
}
body.v2 .v2-pipe-cell-cand svg { color: #94a3b8; flex-shrink: 0; }
body.v2 .v2-pipe-link {
color: var(--rss-brand);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.v2 .v2-pipe-row > div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
body.v2 .v2-pipe-row > div:nth-child(6),
body.v2 .v2-pipe-row > div:nth-child(7),
body.v2 .v2-pipe-row > div:nth-child(8) {
color: #475569;
}
body.v2 .v2-pipe-cell-edit {
color: var(--rss-brand);
font-size: 0.78rem;
display: inline-flex;
align-items: center;
gap: 0.25rem;
cursor: default;
}
body.v2 .v2-pipe-stage-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.6rem 1rem;
border-top: 1px solid #eef0f4;
font-size: 0.78rem;
color: #64748b;
}
body.v2 .v2-pipe-stage-foot strong { color: var(--rss-ink); font-weight: 600; }
body.v2 .v2-pipe-pagi {
display: inline-flex;
gap: 0.18rem;
}
body.v2 .v2-pipe-pagi span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
padding: 0 0.4rem;
font-size: 0.78rem;
color: #64748b;
border: 1px solid #e2e8f0;
border-radius: 5px;
background: #fff;
}
body.v2 .v2-pipe-pagi .is-active {
background: var(--rss-brand);
border-color: var(--rss-brand);
color: #fff;
}
@media (max-width: 1199px) {
body.v2 .v2-pipe-stage-thead,
body.v2 .v2-pipe-row {
grid-template-columns: 32px minmax(160px, 1.4fr) minmax(130px, 1.2fr) minmax(80px, 0.9fr) 90px 80px 80px 50px;
}
body.v2 .v2-pipe-stage-thead > div:nth-child(5),
body.v2 .v2-pipe-row > div:nth-child(5) { display: none; }
}
@media (max-width: 991px) {
body.v2 .v2-pipe-subnav-items { display: none; }
body.v2 .v2-pipe-banner { flex-direction: column; }
body.v2 .v2-pipe-banner-actions { flex-wrap: wrap; }
body.v2 .v2-pipe-stats { grid-template-columns: 1fr; }
body.v2 .v2-pipe-stage-thead,
body.v2 .v2-pipe-row {
grid-template-columns: 28px minmax(140px, 1.4fr) minmax(120px, 1.2fr) 80px 80px 50px;
}
body.v2 .v2-pipe-stage-thead > div:nth-child(4),
body.v2 .v2-pipe-row > div:nth-child(4),
body.v2 .v2-pipe-stage-thead > div:nth-child(7),
body.v2 .v2-pipe-row > div:nth-child(7) { display: none; }
}
@media (max-width: 767px) {
body.v2 .v2-pipe-stage-thead,
body.v2 .v2-pipe-row {
grid-template-columns: 24px 1fr 80px 50px;
}
body.v2 .v2-pipe-stage-thead > div:nth-child(3),
body.v2 .v2-pipe-row > div:nth-child(3),
body.v2 .v2-pipe-stage-thead > div:nth-child(6),
body.v2 .v2-pipe-row > div:nth-child(6),
body.v2 .v2-pipe-stage-thead > div:nth-child(8),
body.v2 .v2-pipe-row > div:nth-child(8) { display: none; }
body.v2 .v2-pipe-stat-value { font-size: 1.5rem; }
}
/* ---------------------------------------------------------------------
CV parsing demo widget (homepage section 5)
--------------------------------------------------------------------- */
body.v2 .v2-section--cv .v2-section-head { text-align: center; }
body.v2 .v2-cv {
max-width: 1040px;
margin: 3.25rem auto 0;
background: #fff;
border-radius: 14px;
box-shadow: 0 30px 80px -30px rgba(15, 23, 42, 0.28), 0 8px 24px -8px rgba(15, 23, 42, 0.12);
overflow: hidden;
font-family: 'Inter', sans-serif;
color: var(--rss-ink);
}
body.v2 .v2-cv-chrome {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 0.85rem;
background: #f7f8fa;
border-bottom: 1px solid #e7eaef;
}
body.v2 .v2-cv-chrome .dot {
width: 11px; height: 11px; border-radius: 50%;
}
body.v2 .v2-cv-chrome .dot:nth-child(1) { background: #ff5f56; }
body.v2 .v2-cv-chrome .dot:nth-child(2) { background: #ffbd2e; }
body.v2 .v2-cv-chrome .dot:nth-child(3) { background: #27c93f; }
body.v2 .v2-cv-chrome .url {
margin-left: 0.85rem;
font-size: 0.78rem;
color: #94a3b8;
}
body.v2 .v2-cv-section {
padding: 0.95rem 1.4rem 0.4rem;
}
body.v2 .v2-cv-section-title {
margin: 0 0 0.55rem;
font-size: 1rem;
font-weight: 600;
color: var(--rss-ink);
}
body.v2 .v2-cv-preview {
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
border: 1px solid #e7eaef;
border-radius: 10px;
padding: 1rem;
display: flex;
justify-content: center;
max-height: 220px;
overflow: hidden;
position: relative;
}
body.v2 .v2-cv-preview::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 60px;
background: linear-gradient(180deg, rgba(241, 245, 249, 0) 0%, #f1f5f9 100%);
pointer-events: none;
}
body.v2 .v2-cv-paper {
width: 100%;
max-width: 520px;
background: #fff;
border: 1px solid #e7eaef;
border-radius: 6px;
padding: 1rem 1.2rem;
font-size: 0.78rem;
line-height: 1.5;
color: #475569;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
body.v2 .v2-cv-paper-line strong { color: var(--rss-ink); font-weight: 600; }
body.v2 .v2-cv-paper-spacer { height: 0.7rem; }
/* CV preview: upload + parse animation states ------------------------- */
body.v2 .v2-cv-paper {
opacity: 1;
transform: none;
transition: opacity 480ms ease, transform 480ms ease;
}
body.v2 .v2-cv-preview.is-uploading .v2-cv-paper {
opacity: 0;
transform: translateY(10px);
}
body.v2 .v2-cv-upload {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 1rem 1.2rem;
text-align: center;
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
opacity: 1;
transition: opacity 380ms ease;
pointer-events: none;
}
body.v2 .v2-cv-preview:not(.is-uploading) .v2-cv-upload { opacity: 0; }
body.v2 .v2-cv-upload-icon {
width: 44px; height: 44px;
border-radius: 10px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 16px -4px rgba(99, 102, 241, 0.45);
margin-bottom: 0.15rem;
}
body.v2 .v2-cv-upload-name {
font-size: 0.88rem;
font-weight: 600;
color: var(--rss-ink);
}
body.v2 .v2-cv-upload-meta {
font-size: 0.74rem;
color: #94a3b8;
}
body.v2 .v2-cv-upload-bar {
display: block;
width: min(280px, 70%);
height: 5px;
margin-top: 0.3rem;
background: rgba(99, 102, 241, 0.15);
border-radius: 999px;
overflow: hidden;
}
body.v2 .v2-cv-upload-bar-fill {
display: block;
height: 100%;
width: 0%;
background: linear-gradient(90deg, #6366f1, #8b5cf6);
border-radius: 999px;
transition: width 1100ms ease-in-out;
}
body.v2 .v2-cv-upload-bar-fill.is-progressing { width: 100%; }
body.v2 .v2-cv-upload-status {
font-size: 0.78rem;
color: #6366f1;
font-weight: 500;
}
body.v2 .v2-cv-scan {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 28px;
z-index: 1;
pointer-events: none;
opacity: 0;
background: linear-gradient(180deg,
rgba(99, 102, 241, 0) 0%,
rgba(99, 102, 241, 0.18) 50%,
rgba(139, 92, 246, 0) 100%);
box-shadow: 0 0 18px 2px rgba(99, 102, 241, 0.25);
}
body.v2 .v2-cv-preview.is-parsing .v2-cv-scan {
animation: v2cvScan 900ms ease-in-out 1;
}
@keyframes v2cvScan {
0% { top: 0; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { top: calc(100% - 28px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
body.v2 .v2-cv-paper,
body.v2 .v2-cv-preview.is-uploading .v2-cv-paper { opacity: 1; transform: none; transition: none; }
body.v2 .v2-cv-upload { display: none; }
body.v2 .v2-cv-scan { display: none; }
}
/* AI summary panel ---------------------------------------------------- */
body.v2 .v2-cv-ai {
position: relative;
margin: 0.8rem 1.4rem 1rem;
padding: 0.9rem 1.2rem 1rem;
background: linear-gradient(135deg, #eff6ff 0%, #ede9fe 100%);
border: 1px solid #dbeafe;
border-radius: 12px;
overflow: hidden;
opacity: 0;
transform: translateY(10px);
transition: opacity 520ms ease, transform 520ms ease;
}
body.v2 .v2-cv-ai.is-revealed {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
body.v2 .v2-cv-ai { opacity: 1; transform: none; transition: none; }
}
body.v2 .v2-cv-ai-quote {
position: absolute;
top: 1rem;
right: 1.2rem;
font-size: 5.5rem;
line-height: 1;
color: rgba(99, 102, 241, 0.18);
font-family: Georgia, serif;
pointer-events: none;
user-select: none;
}
body.v2 .v2-cv-ai-close {
position: absolute;
top: 0.85rem;
right: 0.95rem;
width: 22px; height: 22px;
background: transparent;
border: none;
color: #94a3b8;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: default;
z-index: 1;
}
body.v2 .v2-cv-ai-head {
display: flex;
align-items: center;
gap: 0.7rem;
margin-bottom: 0.6rem;
}
body.v2 .v2-cv-ai-icon {
width: 38px; height: 38px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
flex-shrink: 0;
box-shadow: 0 4px 10px -2px rgba(99, 102, 241, 0.4);
}
body.v2 .v2-cv-ai-headtext h5 {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: var(--rss-ink);
}
body.v2 .v2-cv-ai-copy {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.78rem;
color: var(--rss-brand);
cursor: default;
}
body.v2 .v2-cv-ai-sections {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
body.v2 .v2-cv-ai-section {
position: relative;
padding-bottom: 0.55rem;
border-bottom: 1px dashed rgba(99, 102, 241, 0.22);
}
body.v2 .v2-cv-ai-section:last-child { border-bottom: none; padding-bottom: 0; }
body.v2 .v2-cv-ai-label {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.84rem;
font-weight: 600;
color: var(--rss-ink);
margin-bottom: 0.25rem;
}
body.v2 .v2-cv-ai-label svg { color: #6366f1; }
body.v2 .v2-cv-ai-text {
font-size: 0.86rem;
line-height: 1.55;
color: #334155;
opacity: 0;
transform: translateY(4px);
transition: opacity 480ms ease, transform 480ms ease;
}
body.v2 .v2-cv-ai-pills {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
body.v2 .v2-cv-ai-pill {
display: inline-block;
padding: 0.32rem 0.75rem;
background: #fff;
border: 1px solid rgba(99, 102, 241, 0.25);
border-radius: 999px;
font-size: 0.78rem;
color: #4338ca;
opacity: 0;
transform: translateY(6px) scale(0.92);
transition: opacity 320ms ease, transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.v2 .v2-cv-ai-pill.is-in {
opacity: 1;
transform: none;
}
body.v2 .v2-cv-ai-skel {
position: absolute;
left: 0;
right: 0;
top: 1.5rem;
bottom: 0.55rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
opacity: 0;
transition: opacity 220ms ease;
pointer-events: none;
}
body.v2 .v2-cv-ai-section:last-child .v2-cv-ai-skel { bottom: 0; }
body.v2 .v2-cv-ai-skel-bar {
height: 9px;
border-radius: 4px;
background: linear-gradient(90deg,
rgba(99, 102, 241, 0.10) 0%,
rgba(139, 92, 246, 0.22) 50%,
rgba(99, 102, 241, 0.10) 100%);
background-size: 200% 100%;
animation: v2cvShimmer 1.1s ease-in-out infinite;
}
body.v2 .v2-cv-ai-skel-bar--short { width: 55%; }
@keyframes v2cvShimmer {
0% { background-position: 200% 50%; }
100% { background-position: -200% 50%; }
}
body.v2 .v2-cv-ai-section.is-shimmering .v2-cv-ai-skel {
opacity: 1;
}
body.v2 .v2-cv-ai-section.is-shimmering .v2-cv-ai-text,
body.v2 .v2-cv-ai-section.is-shimmering .v2-cv-ai-pills {
visibility: hidden;
}
body.v2 .v2-cv-ai-section.is-revealed .v2-cv-ai-text {
opacity: 1;
transform: none;
}
body.v2 .v2-cv-ai-section:not(.is-revealed):not(.is-shimmering) .v2-cv-ai-text {
opacity: 0;
}
@media (max-width: 767px) {
body.v2 .v2-cv-paper { padding: 1rem 1.1rem; font-size: 0.78rem; }
body.v2 .v2-cv-preview { padding: 1rem; max-height: 240px; }
body.v2 .v2-cv-ai { padding: 1rem; }
body.v2 .v2-cv-ai-quote { font-size: 4rem; }
}
/* ---------------------------------------------------------------------
Document tracking demo widget (homepage section 6)
--------------------------------------------------------------------- */
body.v2 .v2-section--doc .v2-section-head {
text-align: center;
max-width: 42rem;
margin: 0 auto 3.5rem;
}
body.v2 .v2-section--doc .v2-section-head h2 {
margin: 0.5rem 0 1rem;
}
body.v2 .v2-section--doc .v2-section-head p {
font-size: 1.05rem;
line-height: 1.6;
color: var(--rss-ink-2);
margin-bottom: 1rem;
}
body.v2 .v2-doc {
max-width: 1040px;
margin: 3.25rem auto 0;
background: #fff;
border-radius: 14px;
box-shadow: 0 30px 80px -30px rgba(15, 23, 42, 0.28), 0 8px 24px -8px rgba(15, 23, 42, 0.12);
overflow: hidden;
font-family: 'Inter', sans-serif;
color: var(--rss-ink);
}
body.v2 .v2-doc-chrome {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 0.85rem;
background: #f7f8fa;
border-bottom: 1px solid #e7eaef;
}
body.v2 .v2-doc-chrome .dot {
width: 11px; height: 11px; border-radius: 50%;
}
body.v2 .v2-doc-chrome .dot:nth-child(1) { background: #ff5f56; }
body.v2 .v2-doc-chrome .dot:nth-child(2) { background: #ffbd2e; }
body.v2 .v2-doc-chrome .dot:nth-child(3) { background: #27c93f; }
body.v2 .v2-doc-chrome .url {
margin-left: 0.85rem;
font-size: 0.78rem;
color: #94a3b8;
}
/* Sub-nav strip ------------------------------------------------------- */
body.v2 .v2-doc-subnav {
padding: 0.6rem 1.4rem;
border-bottom: 1px solid #eef0f4;
}
body.v2 .v2-doc-subnav-items {
display: flex;
gap: 1.1rem;
font-size: 0.83rem;
color: #64748b;
flex-wrap: wrap;
}
body.v2 .v2-doc-subnav-items span {
display: inline-flex;
align-items: center;
gap: 0.32rem;
cursor: default;
}
body.v2 .v2-doc-subnav-items span svg { color: #94a3b8; }
body.v2 .v2-doc-subnav-items .is-active {
color: var(--rss-brand);
font-weight: 600;
}
body.v2 .v2-doc-subnav-items .is-active svg { color: var(--rss-brand); }
/* Candidate header ---------------------------------------------------- */
body.v2 .v2-doc-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.7rem 1.4rem;
border-bottom: 1px solid #eef0f4;
}
body.v2 .v2-doc-header-left {
display: inline-flex;
align-items: center;
gap: 0.55rem;
}
body.v2 .v2-doc-status-dot {
width: 9px; height: 9px;
border-radius: 50%;
background: #cbd5e1;
}
body.v2 .v2-doc-candidate {
font-size: 0.95rem;
color: var(--rss-ink);
}
body.v2 .v2-doc-candidate strong { color: var(--rss-brand); font-weight: 600; }
body.v2 .v2-doc-search {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.7rem;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 0.8rem;
color: #94a3b8;
background: #fff;
}
body.v2 .v2-doc-search svg { color: #94a3b8; }
/* Page title --------------------------------------------------------- */
body.v2 .v2-doc-title {
padding: 0.75rem 1.4rem 0.3rem;
}
body.v2 .v2-doc-title h3 {
margin: 0 0 0.18rem;
font-size: 1.15rem;
font-weight: 600;
color: var(--rss-ink);
}
body.v2 .v2-doc-title p {
margin: 0;
font-size: 0.84rem;
color: #64748b;
}
/* Two-column grid ---------------------------------------------------- */
body.v2 .v2-doc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
padding: 0.75rem 1.4rem 1rem;
}
body.v2 .v2-doc-card {
background: #fff;
border: 1px solid #e7eaef;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
}
body.v2 .v2-doc-card-head {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1rem;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #2563eb;
background: #eff6ff;
border-bottom: 1px solid #dbeafe;
}
body.v2 .v2-doc-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px; height: 18px;
color: #2563eb;
background: transparent;
}
body.v2 .v2-doc-card-body {
padding: 0.75rem 0.85rem 0.85rem;
display: flex;
flex-direction: column;
}
body.v2 .v2-doc-label {
font-size: 0.78rem;
font-weight: 600;
color: #475569;
margin-bottom: 0.4rem;
display: block;
}
body.v2 .v2-doc-label--mt { margin-top: 0.65rem; }
body.v2 .v2-doc-required { color: #ef4444; }
/* Drop zone ---------------------------------------------------------- */
body.v2 .v2-doc-drop {
position: relative;
border: 2px dashed #cbd5e1;
border-radius: 10px;
padding: 0.85rem 1rem 0.8rem;
text-align: center;
background: #f8fafc;
transition: border-color 220ms ease, background 220ms ease, transform 280ms ease;
height: 184px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
body.v2 .v2-doc-drop.is-dragging {
border-color: var(--rss-brand);
background: #eff6ff;
transform: scale(1.01);
}
body.v2 .v2-doc-drop.is-filled {
border-color: #94a3b8;
background: #fff;
}
body.v2 .v2-doc-drop-cloud {
color: #94a3b8;
margin-bottom: 0.5rem;
transition: color 220ms ease, transform 280ms ease;
}
body.v2 .v2-doc-drop.is-dragging .v2-doc-drop-cloud { color: var(--rss-brand); transform: translateY(-2px); }
body.v2 .v2-doc-drop.is-filled .v2-doc-drop-cloud { display: none; }
body.v2 .v2-doc-drop-text {
font-size: 0.84rem;
color: #64748b;
margin-bottom: 0.65rem;
transition: opacity 220ms ease;
}
body.v2 .v2-doc-drop-browse {
display: inline-block;
padding: 0.4rem 0.95rem;
font-size: 0.8rem;
font-weight: 500;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 7px;
color: #475569;
cursor: default;
}
body.v2 .v2-doc-drop.is-filled .v2-doc-drop-browse { display: none; }
body.v2 .v2-doc-drop-progress {
width: 100%;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 220ms ease, max-height 320ms ease;
}
body.v2 .v2-doc-drop-progress.is-active {
opacity: 1;
max-height: 90px;
}
body.v2 .v2-doc-drop-file {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.83rem;
color: var(--rss-ink);
margin-bottom: 0.45rem;
}
body.v2 .v2-doc-drop-file-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px; height: 26px;
background: #eff6ff;
color: #2563eb;
border-radius: 6px;
flex-shrink: 0;
}
body.v2 .v2-doc-drop-file-name { flex: 1; text-align: left; font-weight: 500; }
body.v2 .v2-doc-drop-file-pct {
font-size: 0.76rem;
color: #64748b;
font-variant-numeric: tabular-nums;
font-weight: 500;
}
body.v2 .v2-doc-drop-progress.is-done .v2-doc-drop-file-pct { color: #16a34a; }
body.v2 .v2-doc-drop-bar {
height: 6px;
background: #e2e8f0;
border-radius: 999px;
overflow: hidden;
}
body.v2 .v2-doc-drop-bar-fill {
display: block;
height: 100%;
width: 0;
background: linear-gradient(90deg, #3b82f6, #6366f1);
border-radius: 999px;
transition: width 60ms linear;
}
body.v2 .v2-doc-drop-progress.is-done .v2-doc-drop-bar-fill {
background: linear-gradient(90deg, #16a34a, #22c55e);
}
body.v2 .v2-doc-help {
font-size: 0.76rem;
color: #94a3b8;
margin-top: 0.45rem;
line-height: 1.45;
}
body.v2 .v2-doc-help--mt { margin-top: 0.4rem; }
body.v2 .v2-doc-help--field {
font-size: 0.74rem;
color: #94a3b8;
margin-top: 0.35rem;
line-height: 1.45;
}
/* Row-style drop zone (matches real docs page layout) */
body.v2 .v2-doc-drop--row {
flex-direction: row;
align-items: center;
text-align: left;
height: auto;
min-height: 86px;
padding: 0.85rem 1rem;
gap: 0.85rem;
position: relative;
}
body.v2 .v2-doc-drop--row .v2-doc-drop-cloud {
margin: 0;
flex-shrink: 0;
}
body.v2 .v2-doc-drop--row .v2-doc-drop-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
body.v2 .v2-doc-drop--row .v2-doc-drop-text {
margin: 0;
display: flex;
flex-direction: column;
font-size: 0.84rem;
}
body.v2 .v2-doc-drop--row .v2-doc-drop-text strong {
font-weight: 600;
color: var(--rss-ink);
font-size: 0.86rem;
line-height: 1.3;
}
body.v2 .v2-doc-drop--row .v2-doc-drop-text span {
color: #94a3b8;
font-size: 0.78rem;
line-height: 1.3;
}
body.v2 .v2-doc-drop--row.is-filled .v2-doc-drop-text { display: none; }
body.v2 .v2-doc-drop--row.is-filled .v2-doc-drop-cloud { display: inline-flex; color: #94a3b8; }
body.v2 .v2-doc-drop--row.is-filled .v2-doc-drop-browse { display: inline-block; }
body.v2 .v2-doc-drop--row .v2-doc-drop-progress {
display: flex;
flex-direction: column;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: opacity 220ms ease, max-height 320ms ease;
}
body.v2 .v2-doc-drop--row .v2-doc-drop-progress.is-active {
opacity: 1;
max-height: 70px;
}
body.v2 .v2-doc-drop--row .v2-doc-drop-file {
margin: 0;
align-items: baseline;
gap: 0.55rem;
}
body.v2 .v2-doc-drop--row .v2-doc-drop-file-name {
font-weight: 600;
color: var(--rss-ink);
font-size: 0.86rem;
flex: 0 0 auto;
}
body.v2 .v2-doc-drop--row .v2-doc-drop-file-pct {
font-size: 0.74rem;
color: #64748b;
font-variant-numeric: tabular-nums;
}
body.v2 .v2-doc-drop--row .v2-doc-drop-file-sub {
color: #94a3b8;
font-size: 0.78rem;
line-height: 1.3;
}
body.v2 .v2-doc-drop--row .v2-doc-drop-browse {
margin-left: auto;
flex-shrink: 0;
}
body.v2 .v2-doc-drop--row > .v2-doc-drop-bar-track {
position: absolute;
left: 1rem;
right: 1rem;
bottom: 0.4rem;
height: 3px;
background: #e2e8f0;
border-radius: 999px;
overflow: hidden;
opacity: 0;
transition: opacity 220ms ease;
}
body.v2 .v2-doc-drop--row.is-dragging > .v2-doc-drop-bar-track,
body.v2 .v2-doc-drop--row.is-filled > .v2-doc-drop-bar-track { opacity: 1; }
body.v2 .v2-doc-drop--row.is-done > .v2-doc-drop-bar-track {
opacity: 0;
transition-delay: 360ms;
}
body.v2 .v2-doc-drop--row > .v2-doc-drop-bar-track .v2-doc-drop-bar-fill {
display: block;
height: 100%;
width: 0;
background: linear-gradient(90deg, #3b82f6, #6366f1);
border-radius: 999px;
transition: width 60ms linear;
}
/* Info row beneath the drop zone */
body.v2 .v2-doc-info {
display: flex;
align-items: center;
gap: 0.45rem;
margin-top: 0.55rem;
padding: 0.5rem 0.7rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 0.76rem;
color: #64748b;
}
body.v2 .v2-doc-info svg {
color: #94a3b8;
flex-shrink: 0;
}
/* Placeholder text inside decorative textareas */
body.v2 .v2-doc-textarea {
padding: 0.55rem 0.7rem;
}
body.v2 .v2-doc-textarea-placeholder {
display: block;
font-size: 0.8rem;
color: #94a3b8;
line-height: 1.4;
}
body.v2 .v2-doc-textarea--lg.is-focused .v2-doc-textarea-check {
position: absolute;
right: 0.55rem;
bottom: 0.45rem;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--rss-brand);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Document type radios ---------------------------------------------- */
body.v2 .v2-doc-radios {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.55rem;
}
body.v2 .v2-doc-radio {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0.7rem 0.75rem;
border: 1px solid #e2e8f0;
border-radius: 9px;
background: #fff;
cursor: default;
transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease, transform 220ms ease;
}
body.v2 .v2-doc-radio.is-glow {
border-color: #93c5fd;
background: #f0f9ff;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
body.v2 .v2-doc-radio.is-selected {
border-color: var(--rss-brand);
background: #eff6ff;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
body.v2 .v2-doc-radio-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px; height: 30px;
border-radius: 7px;
margin-bottom: 0.35rem;
}
body.v2 .v2-doc-radio-icon.is-word { background: #dbeafe; color: #1d4ed8; }
body.v2 .v2-doc-radio-icon.is-pdf { background: #fee2e2; color: #b91c1c; }
body.v2 .v2-doc-radio-icon.is-other { background: #f1f5f9; color: #475569; }
body.v2 .v2-doc-radio-label {
font-size: 0.82rem;
font-weight: 600;
color: var(--rss-ink);
}
body.v2 .v2-doc-radio-sub {
font-size: 0.72rem;
color: #94a3b8;
}
body.v2 .v2-doc-radio-bullet {
position: absolute;
top: 0.6rem;
right: 0.6rem;
width: 14px; height: 14px;
border: 1.5px solid #cbd5e1;
border-radius: 50%;
background: #fff;
transition: border-color 220ms ease;
}
body.v2 .v2-doc-radio.is-selected .v2-doc-radio-bullet {
border-color: var(--rss-brand);
background: var(--rss-brand);
box-shadow: inset 0 0 0 3px #fff;
}
/* Checkrow ----------------------------------------------------------- */
body.v2 .v2-doc-checkrow {
display: flex;
align-items: flex-start;
gap: 0.6rem;
padding: 0.55rem 0.75rem;
margin-top: 0.55rem;
border: 1px solid #e2e8f0;
border-radius: 9px;
background: #fff;
transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
body.v2 .v2-doc-checkrow.is-checked {
border-color: #bfdbfe;
background: #eff6ff;
}
body.v2 .v2-doc-check {
position: relative;
width: 16px; height: 16px;
border: 1.5px solid #cbd5e1;
border-radius: 4px;
background: #fff;
flex-shrink: 0;
margin-top: 1px;
transition: border-color 200ms ease, background 200ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.v2 .v2-doc-check::after {
content: "";
position: absolute;
top: 1px; left: 4px;
width: 4px; height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0);
transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.v2 .v2-doc-checkrow.is-checked .v2-doc-check {
border-color: var(--rss-brand);
background: var(--rss-brand);
transform: scale(1.05);
}
body.v2 .v2-doc-checkrow.is-checked .v2-doc-check::after {
transform: rotate(45deg) scale(1);
}
body.v2 .v2-doc-checkrow-label {
font-size: 0.83rem;
display: flex;
flex-direction: column;
gap: 0.1rem;
}
body.v2 .v2-doc-checkrow-label strong { font-weight: 600; color: var(--rss-ink); }
body.v2 .v2-doc-checkrow-label span:not(:first-child) {
font-size: 0.74rem;
color: #94a3b8;
}
/* Inputs -------------------------------------------------------------- */
body.v2 .v2-doc-input {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.55rem 0.75rem;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #fff;
font-size: 0.84rem;
color: var(--rss-ink);
transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
body.v2 .v2-doc-input--date {
justify-content: flex-start;
gap: 0.55rem;
}
body.v2 .v2-doc-input--date svg { color: #64748b; }
body.v2 .v2-doc-input.is-glow {
border-color: #93c5fd;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
body.v2 .v2-doc-input.is-set {
border-color: #cbd5e1;
background: #f8fafc;
}
body.v2 .v2-doc-input--select { cursor: default; }
body.v2 .v2-doc-input--select svg { color: #94a3b8; flex-shrink: 0; }
body.v2 .v2-doc-input.is-open {
border-color: var(--rss-brand);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
body.v2 .v2-doc-input.is-warn {
border-color: #f59e0b;
background: #fffbeb;
color: #b45309;
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
animation: v2docWarnPulse 1s ease-in-out;
}
body.v2 .v2-doc-input.is-warn svg { color: #b45309; }
@keyframes v2docWarnPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }
50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.28); }
}
/* Textareas (decorative) --------------------------------------------- */
body.v2 .v2-doc-textarea {
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #fff;
position: relative;
}
body.v2 .v2-doc-textarea--sm { height: 48px; }
body.v2 .v2-doc-textarea--lg { height: 64px; }
body.v2 .v2-doc-textarea.is-focused {
border-color: var(--rss-brand);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
/* Footer / status pill ---------------------------------------------- */
body.v2 .v2-doc-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.7rem;
padding: 0.85rem 1.4rem 1.1rem;
border-top: 1px solid #eef0f4;
background: #f8fafc;
flex-wrap: wrap;
}
body.v2 .v2-doc-status-pill {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.35rem 0.75rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 500;
background: #e2e8f0;
color: #475569;
transition: background 220ms ease, color 220ms ease;
}
body.v2 .v2-doc-status-dotlive {
width: 8px; height: 8px;
border-radius: 50%;
background: #94a3b8;
transition: background 220ms ease;
}
body.v2 .v2-doc-status-pill.is-ready { background: #e2e8f0; color: #475569; }
body.v2 .v2-doc-status-pill.is-uploading { background: #dbeafe; color: #1d4ed8; }
body.v2 .v2-doc-status-pill.is-uploading .v2-doc-status-dotlive { background: #2563eb; animation: v2docDotPulse 1.1s ease-in-out infinite; }
body.v2 .v2-doc-status-pill.is-saved { background: #dcfce7; color: #166534; }
body.v2 .v2-doc-status-pill.is-saved .v2-doc-status-dotlive { background: #16a34a; }
body.v2 .v2-doc-status-pill.is-warn { background: #fef3c7; color: #92400e; }
body.v2 .v2-doc-status-pill.is-warn .v2-doc-status-dotlive { background: #f59e0b; animation: v2docDotPulse 1.1s ease-in-out infinite; }
@keyframes v2docDotPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.8); }
}
body.v2 .v2-doc-actions { display: inline-flex; gap: 0.5rem; }
body.v2 .v2-doc-btn {
display: inline-block;
padding: 0.5rem 1rem;
font-size: 0.84rem;
font-weight: 500;
border-radius: 8px;
cursor: default;
}
body.v2 .v2-doc-btn--ghost {
background: #fff;
border: 1px solid #cbd5e1;
color: #475569;
}
body.v2 .v2-doc-btn--primary {
background: var(--rss-brand);
color: #fff;
border: 1px solid var(--rss-brand);
box-shadow: 0 4px 12px -4px rgba(37, 99, 235, 0.4);
}
/* Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
body.v2 .v2-doc-grid { grid-template-columns: 1fr; }
body.v2 .v2-doc-radios { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
body.v2 .v2-doc-subnav-items { gap: 0.7rem; font-size: 0.76rem; }
body.v2 .v2-doc-header { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
body.v2 .v2-doc-search { width: 100%; }
body.v2 .v2-doc-grid { padding: 1rem; gap: 0.85rem; }
body.v2 .v2-doc-footer { flex-direction: column; align-items: stretch; }
body.v2 .v2-doc-actions { justify-content: flex-end; }
}
/* ---------------------------------------------------------------------
Scroll-in (works with /js/scroll-animation.js classes already in markup)
--------------------------------------------------------------------- */
body.v2 .v2-fade-in {
opacity: 0.42;
transform: translateY(10px);
transition: opacity 420ms ease, transform 420ms ease;
}
body.v2 .v2-fade-in.is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
body.v2 .v2-fade-in {
opacity: 1;
transform: none;
transition: none;
}
}
/* ---------------------------------------------------------------------
Pricing page
--------------------------------------------------------------------- */
body.v2 .v2-section-head--center {
text-align: center;
max-width: 42rem;
margin: 0 auto 3.5rem;
}
body.v2 .v2-section-head--center .v2-lead {
margin-left: auto;
margin-right: auto;
}
body.v2 .v2-price-card {
position: relative;
max-width: 640px;
margin: 0 auto;
background: var(--rss-surface);
border: 1px solid var(--rss-line);
border-radius: var(--rss-radius);
box-shadow: var(--rss-shadow);
padding: 3rem 3rem 2.5rem;
text-align: center;
}
@media (max-width: 575.98px) {
body.v2 .v2-price-card { padding: 2.25rem 1.5rem 2rem; }
}
body.v2 .v2-price-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(29, 78, 216, 0.35), rgba(6, 182, 164, 0.35));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
body.v2 .v2-price-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--rss-accent);
background: rgba(6, 182, 164, 0.1);
border-radius: 999px;
padding: 0.35rem 0.85rem;
margin-bottom: 1.5rem;
}
body.v2 .v2-price-amount {
font-family: 'Inter', sans-serif;
font-size: clamp(3.5rem, 6vw, 4.75rem);
line-height: 1;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--rss-ink);
}
body.v2 .v2-price-amount .v2-price-currency {
font-size: 0.55em;
font-weight: 600;
vertical-align: top;
position: relative;
top: 0.55em;
margin-right: 0.05em;
color: var(--rss-ink-2);
}
body.v2 .v2-price-suffix {
display: block;
font-family: 'Raleway', sans-serif;
font-size: 0.95rem;
font-weight: 400;
color: var(--rss-ink-3);
letter-spacing: 0;
margin-top: 0.6rem;
}
body.v2 .v2-price-tagline {
font-family: 'Inter', sans-serif;
font-size: 1.25rem;
font-weight: 600;
color: var(--rss-ink);
margin: 1.75rem 0 1.25rem;
}
body.v2 .v2-price-features {
list-style: none;
padding: 0;
margin: 0 auto 2rem;
max-width: 380px;
text-align: left;
}
body.v2 .v2-price-features li {
position: relative;
padding: 0.55rem 0 0.55rem 2rem;
color: var(--rss-ink-2);
font-size: 0.97rem;
}
body.v2 .v2-price-features li + li {
border-top: 1px solid var(--rss-line);
}
body.v2 .v2-price-features li::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
background: rgba(6, 182, 164, 0.15)
url("data:image/svg+xml;utf8,")
center / 0.7rem 0.7rem no-repeat;
}
body.v2 .v2-price-card .v2-hero-ctas {
margin-top: 0.5rem;
justify-content: center;
}
/* Pricing trio: FAQ | price card | FAQ */
body.v2 .v2-price-trio {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
gap: 2rem;
align-items: start;
max-width: 1180px;
margin: 0 auto;
}
body.v2 .v2-price-trio .v2-price-card {
margin: 0;
max-width: none;
}
@media (max-width: 991.98px) {
body.v2 .v2-price-trio {
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
max-width: 640px;
}
body.v2 .v2-price-trio .v2-price-card {
order: -1;
}
}
body.v2 .v2-faq-card {
position: relative;
background: var(--rss-surface);
border: 1px solid var(--rss-line);
border-radius: var(--rss-radius);
box-shadow: var(--rss-shadow-sm);
padding: 1.75rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
body.v2 .v2-faq-card .v2-eyebrow {
margin-bottom: 0.5rem;
}
body.v2 .v2-faq-card details {
border-top: 1px solid var(--rss-line);
padding: 0.85rem 0;
}
body.v2 .v2-faq-card details:last-of-type {
padding-bottom: 0.25rem;
}
body.v2 .v2-faq-card details > summary {
list-style: none;
cursor: pointer;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 0.97rem;
color: var(--rss-ink);
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
padding-right: 0.25rem;
transition: color 120ms ease;
}
body.v2 .v2-faq-card details > summary::-webkit-details-marker {
display: none;
}
body.v2 .v2-faq-card details > summary::after {
content: '';
flex-shrink: 0;
width: 1.1rem;
height: 1.1rem;
margin-top: 0.18rem;
background: url("data:image/svg+xml;utf8,")
center / contain no-repeat;
transition: transform 160ms ease;
}
body.v2 .v2-faq-card details[open] > summary::after {
transform: rotate(180deg);
}
body.v2 .v2-faq-card details > summary:hover,
body.v2 .v2-faq-card details[open] > summary {
color: var(--rss-brand);
}
body.v2 .v2-faq-card details > p {
margin: 0.65rem 0 0;
font-size: 0.92rem;
line-height: 1.55;
color: var(--rss-ink-2);
}
body.v2 .v2-faq-card details > p .v2-link {
color: var(--rss-brand);
font-weight: 600;
text-decoration: none;
}
body.v2 .v2-faq-card details > p .v2-link:hover {
text-decoration: underline;
}
/* Volume discount tier table */
body.v2 .v2-tier-wrap {
max-width: 720px;
margin: 0 auto;
}
body.v2 .v2-tier-table {
width: 100%;
background: var(--rss-surface);
border: 1px solid var(--rss-line);
border-radius: var(--rss-radius);
box-shadow: var(--rss-shadow-sm);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
body.v2 .v2-tier-table thead th {
font-family: 'Inter', sans-serif;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--rss-ink-3);
text-align: left;
padding: 1.1rem 1.75rem;
background: var(--rss-surface-alt);
border-bottom: 1px solid var(--rss-line);
}
body.v2 .v2-tier-table thead th:last-child { text-align: right; }
body.v2 .v2-tier-table tbody td {
padding: 1.1rem 1.75rem;
border-bottom: 1px solid var(--rss-line);
font-size: 1rem;
color: var(--rss-ink-2);
transition: background-color 120ms ease;
}
body.v2 .v2-tier-table tbody tr:last-child td { border-bottom: 0; }
body.v2 .v2-tier-table tbody tr:hover td { background: rgba(29, 78, 216, 0.03); }
body.v2 .v2-tier-table .v2-tier-users {
font-family: 'Inter', sans-serif;
font-weight: 600;
color: var(--rss-ink);
}
body.v2 .v2-tier-table .v2-tier-price {
text-align: right;
font-family: 'Inter', sans-serif;
font-weight: 600;
color: var(--rss-ink);
}
body.v2 .v2-tier-table tbody tr.is-best td {
background: linear-gradient(90deg, rgba(29, 78, 216, 0.06), rgba(6, 182, 164, 0.06));
}
body.v2 .v2-tier-table tbody tr.is-best .v2-tier-price {
color: var(--rss-brand);
}
body.v2 .v2-tier-save {
display: inline-block;
margin-left: 0.6rem;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--rss-accent);
background: rgba(6, 182, 164, 0.12);
padding: 0.15rem 0.5rem;
border-radius: 999px;
vertical-align: middle;
}
body.v2 .v2-tier-example {
margin-top: 1.75rem;
background: var(--rss-surface);
border: 1px solid var(--rss-line);
border-radius: var(--rss-radius-sm);
padding: 1.25rem 1.5rem;
text-align: center;
font-size: 0.95rem;
color: var(--rss-ink-2);
}
body.v2 .v2-tier-example strong {
font-family: 'Inter', sans-serif;
color: var(--rss-ink);
}
body.v2 .v2-tier-example .v2-tier-example-math {
display: block;
margin-top: 0.4rem;
font-size: 0.82rem;
color: var(--rss-ink-3);
}
/* Long-form article / prose body */
body.v2 .v2-prose {
max-width: 46rem;
margin: 0 auto;
color: var(--rss-ink-2);
font-family: 'Raleway', sans-serif;
font-size: 1.0625rem;
line-height: 1.75;
}
body.v2 .v2-prose > *:first-child { margin-top: 0; }
body.v2 .v2-prose > *:last-child { margin-bottom: 0; }
body.v2 .v2-prose h2 {
font-family: 'Inter', sans-serif;
color: var(--rss-ink);
font-size: clamp(1.5rem, 2.4vw, 2rem);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.01em;
margin: 3rem 0 1rem;
}
body.v2 .v2-prose h3 {
font-family: 'Inter', sans-serif;
color: var(--rss-ink);
font-size: 1.375rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.005em;
margin: 2.5rem 0 0.85rem;
}
body.v2 .v2-prose h4 {
font-family: 'Inter', sans-serif;
color: var(--rss-ink);
font-size: 1.0625rem;
font-weight: 600;
margin: 2rem 0 0.6rem;
}
body.v2 .v2-prose p {
margin: 0 0 1.15rem;
}
body.v2 .v2-prose ul,
body.v2 .v2-prose ol {
margin: 0 0 1.4rem;
padding-left: 1.25rem;
}
body.v2 .v2-prose li {
margin-bottom: 0.5rem;
}
body.v2 .v2-prose li::marker {
color: var(--rss-brand);
}
body.v2 .v2-prose a {
color: var(--rss-brand);
font-weight: 500;
text-decoration: none;
border-bottom: 1px solid rgba(29, 78, 216, 0.25);
transition: color 160ms ease, border-color 160ms ease;
}
body.v2 .v2-prose a:hover {
color: var(--rss-brand-ink);
border-bottom-color: var(--rss-brand-ink);
}
body.v2 .v2-prose strong {
color: var(--rss-ink);
font-weight: 600;
}
@media (max-width: 720px) {
body.v2 .v2-prose { font-size: 1rem; line-height: 1.7; }
body.v2 .v2-prose h2 { margin-top: 2.25rem; }
body.v2 .v2-prose h3 { margin-top: 1.75rem; }
}
/* What's included info grid */
body.v2 .v2-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
max-width: 1100px;
margin: 0 auto;
}
body.v2 .v2-info-card {
background: var(--rss-surface);
border: 1px solid var(--rss-line);
border-radius: var(--rss-radius-sm);
padding: 1.75rem 1.5rem;
box-shadow: var(--rss-shadow-sm);
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
body.v2 .v2-info-card:hover {
transform: translateY(-2px);
border-color: var(--rss-line-strong);
box-shadow: var(--rss-shadow);
}
body.v2 .v2-info-card .v2-info-icon {
width: 44px;
height: 44px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
color: var(--rss-brand);
background: linear-gradient(135deg, rgba(29, 78, 216, 0.12), rgba(6, 182, 164, 0.12));
margin-bottom: 1rem;
}
body.v2 .v2-info-card h3 {
font-size: 1.05rem;
font-weight: 600;
margin: 0 0 0.5rem;
}
body.v2 .v2-info-card p {
margin: 0;
font-size: 0.95rem;
color: var(--rss-ink-2);
line-height: 1.6;
}
body.v2 .v2-pricing-fineprint {
margin: 2.5rem auto 0;
max-width: 720px;
text-align: center;
font-size: 0.82rem;
color: var(--rss-ink-3);
line-height: 1.6;
}
body.v2 .v2-pricing-fineprint p { margin: 0; color: inherit; }
/* =====================================================================
Auth & sign-up
Scoped under .v2-auth so Bootstrap forms elsewhere are not affected.
===================================================================== */
body.v2 .v2-auth {
background: var(--rss-tint-blue);
padding: clamp(2.5rem, 6vw, 5rem) 0;
}
body.v2 .v2-auth-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
gap: 3rem;
align-items: start;
}
@media (max-width: 991.98px) {
body.v2 .v2-auth-grid {
grid-template-columns: minmax(0, 1fr);
gap: 2.25rem;
}
}
/* --- Form card (left column) --- */
body.v2 .v2-auth-card {
background: var(--rss-surface);
border: 1px solid var(--rss-line);
border-radius: var(--rss-radius);
box-shadow: var(--rss-shadow);
padding: clamp(1.75rem, 3vw, 2.75rem);
}
body.v2 .v2-auth-card .v2-eyebrow {
margin-bottom: 0.75rem;
}
body.v2 .v2-auth-title {
font-family: 'Inter', sans-serif;
font-size: clamp(1.6rem, 2.4vw, 2rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--rss-ink);
margin: 0 0 0.6rem;
line-height: 1.2;
}
body.v2 .v2-auth-sub {
font-size: 1rem;
color: var(--rss-ink-2);
margin: 0 0 2rem;
max-width: 38rem;
line-height: 1.55;
}
/* --- Fieldsets / sections --- */
body.v2 .v2-auth-fieldset {
border: 0;
padding: 0;
margin: 0 0 1.75rem;
}
body.v2 .v2-auth-fieldset + .v2-auth-fieldset {
border-top: 1px solid var(--rss-line);
padding-top: 1.75rem;
}
body.v2 .v2-auth-fieldset .v2-eyebrow {
margin-bottom: 1.1rem;
color: var(--rss-ink-3);
letter-spacing: 0.16em;
}
/* --- Field rows / grid --- */
body.v2 .v2-auth-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 1rem 1.1rem;
margin-bottom: 1rem;
}
body.v2 .v2-auth-row:last-child { margin-bottom: 0; }
@media (max-width: 575.98px) {
body.v2 .v2-auth-row {
grid-template-columns: minmax(0, 1fr);
}
}
body.v2 .v2-auth-field {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
}
body.v2 .v2-auth-field:last-child { margin-bottom: 0; }
/* --- Labels & helpers --- */
body.v2 .v2-auth .form-label {
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--rss-ink-2);
margin-bottom: 0.45rem;
text-transform: none;
}
body.v2 .v2-auth .form-text {
color: var(--rss-ink-3);
font-size: 0.8rem;
margin-top: 0.5rem;
line-height: 1.5;
}
/* --- Inputs / selects --- */
body.v2 .v2-auth .form-control,
body.v2 .v2-auth .form-select {
min-height: 48px;
border: 1px solid var(--rss-line-strong);
border-radius: var(--rss-radius-sm);
background-color: var(--rss-surface);
color: var(--rss-ink);
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
padding: 0.7rem 0.95rem;
box-shadow: none;
transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
body.v2 .v2-auth .form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7589' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 14px 12px;
padding-right: 2.25rem;
appearance: none;
-webkit-appearance: none;
}
body.v2 .v2-auth .form-control::placeholder {
color: var(--rss-ink-3);
opacity: 0.85;
}
body.v2 .v2-auth .form-control:focus,
body.v2 .v2-auth .form-select:focus {
border-color: var(--rss-brand);
box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.14);
outline: none;
background: var(--rss-surface);
}
/* --- Input group: icon + field as one unified shell --- */
body.v2 .v2-auth .input-group {
position: relative;
display: flex;
align-items: stretch;
width: 100%;
border-radius: var(--rss-radius-sm);
background: var(--rss-surface);
}
body.v2 .v2-auth .input-group-text {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
background: var(--rss-surface-alt);
border: 1px solid var(--rss-line-strong);
border-right: 0;
border-top-left-radius: var(--rss-radius-sm);
border-bottom-left-radius: var(--rss-radius-sm);
color: var(--rss-ink-3);
font-size: 0.95rem;
padding: 0;
transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
body.v2 .v2-auth .input-group .form-control,
body.v2 .v2-auth .input-group .form-select {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: 0;
flex: 1 1 auto;
min-width: 0;
}
/* When focused, light the icon up too so they read as one piece */
body.v2 .v2-auth .input-group:focus-within .input-group-text {
color: var(--rss-brand);
background: rgba(29, 78, 216, 0.06);
border-color: var(--rss-brand);
}
body.v2 .v2-auth .input-group:focus-within .form-control,
body.v2 .v2-auth .input-group:focus-within .form-select {
border-color: var(--rss-brand);
box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.14);
}
/* --- Validation --- */
/* Strip Bootstrap's :valid / :invalid icon overlays from inputs so they
don't conflict with our minimal styling. The form-select keeps its
own native chevron (kept by leaving its base background-image alone). */
body.v2 .v2-auth .was-validated .form-control:valid,
body.v2 .v2-auth .was-validated .form-control:invalid,
body.v2 .v2-auth .form-control.is-valid,
body.v2 .v2-auth .form-control.is-invalid {
background-image: none;
padding-right: 0.95rem;
}
body.v2 .v2-auth .was-validated .form-select:valid,
body.v2 .v2-auth .was-validated .form-select:invalid,
body.v2 .v2-auth .form-select.is-valid,
body.v2 .v2-auth .form-select.is-invalid {
/* Restore just the chevron (no Bootstrap validation icon) */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7589' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 14px 12px;
padding-right: 2.25rem;
}
/* Valid state — just keep our default look, no green tint */
body.v2 .v2-auth .was-validated .form-control:valid,
body.v2 .v2-auth .was-validated .form-select:valid,
body.v2 .v2-auth .form-control.is-valid,
body.v2 .v2-auth .form-select.is-valid {
border-color: var(--rss-line-strong);
}
/* Invalid state — red border + subtle ring */
body.v2 .v2-auth .was-validated .form-control:invalid,
body.v2 .v2-auth .was-validated .form-select:invalid,
body.v2 .v2-auth .form-control.is-invalid,
body.v2 .v2-auth .form-select.is-invalid {
border-color: #dc2626;
}
body.v2 .v2-auth .was-validated .form-control:invalid:focus,
body.v2 .v2-auth .was-validated .form-select:invalid:focus,
body.v2 .v2-auth .form-control.is-invalid:focus,
body.v2 .v2-auth .form-select.is-invalid:focus {
border-color: #dc2626;
box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.14);
}
body.v2 .v2-auth .was-validated .input-group:has(.form-control:invalid) .input-group-text,
body.v2 .v2-auth .was-validated .input-group:has(.form-select:invalid) .input-group-text,
body.v2 .v2-auth .input-group:has(.is-invalid) .input-group-text {
border-color: #dc2626;
color: #b91c1c;
background: rgba(220, 38, 38, 0.06);
}
body.v2 .v2-auth .invalid-feedback {
font-size: 0.8rem;
font-weight: 500;
color: #b91c1c;
background: rgba(220, 38, 38, 0.08);
border-radius: 8px;
padding: 0.4rem 0.6rem;
margin-top: 0.5rem;
line-height: 1.45;
}
body.v2 .v2-auth .alert-danger {
background: rgba(220, 38, 38, 0.06);
border: 1px solid rgba(220, 38, 38, 0.25);
color: #991b1b;
border-radius: var(--rss-radius-sm);
padding: 0.85rem 1rem;
font-size: 0.9rem;
}
body.v2 .v2-auth .alert-danger strong { color: #7f1d1d; }
/* --- Terms / form-check --- */
body.v2 .v2-auth-terms {
display: flex;
align-items: flex-start;
gap: 0.6rem;
margin: 1.75rem 0 1.5rem;
padding: 0;
}
body.v2 .v2-auth-terms .form-check-input {
width: 1.1rem;
height: 1.1rem;
margin-top: 0.2rem;
border-radius: 5px;
border: 1.5px solid var(--rss-line-strong);
background-color: var(--rss-surface);
flex-shrink: 0;
cursor: pointer;
transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
body.v2 .v2-auth-terms .form-check-input:focus {
border-color: var(--rss-brand);
box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.14);
}
body.v2 .v2-auth-terms .form-check-input:checked {
background-color: var(--rss-brand);
border-color: var(--rss-brand);
}
body.v2 .v2-auth-terms .form-check-label {
font-size: 0.9rem;
color: var(--rss-ink-2);
line-height: 1.55;
cursor: pointer;
}
body.v2 .v2-auth-terms .form-check-label a {
color: var(--rss-brand);
font-weight: 500;
text-decoration: none;
}
body.v2 .v2-auth-terms .form-check-label a:hover {
color: var(--rss-brand-ink);
text-decoration: underline;
}
body.v2 .v2-auth-terms .invalid-feedback {
flex: 1 0 100%;
margin-left: calc(1.1rem + 0.6rem);
}
/* --- Submit --- */
body.v2 .v2-auth-submit.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
width: 100%;
min-height: 56px;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.005em;
border-radius: var(--rss-radius-sm);
}
body.v2 .v2-auth-submit svg {
transition: transform 160ms ease;
}
body.v2 .v2-auth-submit:hover svg {
transform: translateX(3px);
}
body.v2 .v2-auth-trust {
display: flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
margin: 0.85rem 0 0;
color: var(--rss-ink-3);
font-size: 0.82rem;
}
body.v2 .v2-auth-trust i { color: var(--rss-accent); font-size: 0.85rem; }
/* --- Right rail --- */
body.v2 .v2-auth-rail {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
@media (min-width: 992px) {
body.v2 .v2-auth-rail {
position: sticky;
top: 6rem;
}
}
body.v2 .v2-auth-rail-title {
font-family: 'Inter', sans-serif;
font-size: 1.25rem;
font-weight: 600;
color: var(--rss-ink);
letter-spacing: -0.01em;
margin: 0 0 1.1rem;
}
body.v2 .v2-auth-benefits {
background: transparent;
}
body.v2 .v2-auth-benefits ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
body.v2 .v2-auth-benefits li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: 0.95rem;
color: var(--rss-ink-2);
line-height: 1.5;
}
body.v2 .v2-auth-check {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(29, 78, 216, 0.1);
color: var(--rss-brand);
font-size: 0.7rem;
margin-top: 1px;
}
/* Pricing card */
body.v2 .v2-auth-pricing {
background: var(--rss-surface);
border: 1px solid var(--rss-line);
border-radius: var(--rss-radius);
box-shadow: var(--rss-shadow-sm);
padding: 1.5rem 1.5rem 1.4rem;
}
body.v2 .v2-auth-pricing .v2-eyebrow {
margin-bottom: 0.5rem;
}
body.v2 .v2-auth-pricing h3 {
font-family: 'Inter', sans-serif;
font-size: 1.05rem;
font-weight: 600;
color: var(--rss-ink);
letter-spacing: -0.01em;
margin: 0 0 1.1rem;
line-height: 1.35;
}
body.v2 .v2-auth-tiers {
list-style: none;
padding: 0;
margin: 0 0 1.1rem;
}
body.v2 .v2-auth-tiers li {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding: 0.6rem 0;
border-bottom: 1px solid var(--rss-line);
font-size: 0.9rem;
color: var(--rss-ink-2);
}
body.v2 .v2-auth-tiers li:first-child { padding-top: 0.4rem; }
body.v2 .v2-auth-tiers li:last-child { border-bottom: 0; padding-bottom: 0.4rem; }
body.v2 .v2-auth-tiers li span:last-child {
font-family: 'Inter', sans-serif;
font-weight: 600;
color: var(--rss-ink);
text-align: right;
}
body.v2 .v2-auth-tier-example {
background: var(--rss-surface-alt);
border-radius: var(--rss-radius-sm);
padding: 0.85rem 1rem;
font-size: 0.85rem;
color: var(--rss-ink-2);
text-align: center;
line-height: 1.5;
}
body.v2 .v2-auth-tier-example strong { color: var(--rss-ink); font-weight: 600; }
body.v2 .v2-auth-tier-example small {
display: block;
margin-top: 0.25rem;
color: var(--rss-ink-3);
font-size: 0.75rem;
}
/* Footnote under page */
body.v2 .v2-auth-footnote {
margin: 3rem auto 0;
text-align: center;
font-size: 0.8rem;
color: var(--rss-ink-3);
}
body.v2 .v2-auth-footnote a {
color: var(--rss-ink-2);
text-decoration: none;
}
body.v2 .v2-auth-footnote a:hover {
color: var(--rss-brand);
text-decoration: underline;
}
/* Status pages — single-card variant for success / cancelled / error */
body.v2 .v2-auth-status {
max-width: 36rem;
margin: 0 auto;
text-align: center;
padding: 2.75rem 2rem 2.5rem;
}
body.v2 .v2-auth-status .v2-eyebrow {
display: inline-block;
}
body.v2 .v2-auth-status .v2-auth-title {
margin-top: 0.6rem;
}
body.v2 .v2-auth-status .v2-auth-sub {
margin-left: auto;
margin-right: auto;
max-width: 28rem;
}
body.v2 .v2-auth-status-icon {
width: 84px;
height: 84px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin: 0 auto 1.4rem;
box-shadow: 0 6px 18px -8px rgba(15, 23, 42, 0.18);
}
body.v2 .v2-auth-status-icon.is-success {
background: #ecfdf5;
color: #059669;
}
body.v2 .v2-auth-status-icon.is-cancel {
background: #fffbeb;
color: #b45309;
}
body.v2 .v2-auth-status-icon.is-error {
background: #fef2f2;
color: #b91c1c;
}
body.v2 .v2-auth-actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.85rem;
margin-top: 1.75rem;
}
body.v2 .v2-auth-actions .v2-auth-secondary {
text-align: center;
color: var(--rss-ink-3);
font-size: 0.92rem;
text-decoration: none;
}
body.v2 .v2-auth-actions .v2-auth-secondary:hover {
color: var(--rss-brand);
text-decoration: underline;
}
/* Welcome banner used at top of success_trial */
body.v2 .v2-auth-welcome {
display: flex;
gap: 1rem;
align-items: flex-start;
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
border: 1px solid rgba(5, 150, 105, 0.2);
border-radius: var(--rss-radius);
padding: 1.25rem 1.4rem;
margin-bottom: 2rem;
}
body.v2 .v2-auth-welcome-icon {
width: 44px;
height: 44px;
flex: 0 0 44px;
border-radius: 50%;
background: #059669;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
box-shadow: 0 6px 14px -6px rgba(5, 150, 105, 0.55);
}
body.v2 .v2-auth-welcome-body .v2-eyebrow {
color: #047857;
margin-bottom: 0.25rem;
}
body.v2 .v2-auth-welcome-body h1,
body.v2 .v2-auth-welcome-body h2 {
font-family: 'Inter', sans-serif;
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 0.35rem;
color: var(--rss-ink);
}
body.v2 .v2-auth-welcome-body p {
margin: 0;
color: var(--rss-ink-2);
font-size: 0.95rem;
}
/* Onboarding sections (success_trial getting-started, support, etc.) */
body.v2 .v2-auth-section {
padding-top: 1.4rem;
border-top: 1px solid var(--rss-line);
margin-top: 1.4rem;
}
body.v2 .v2-auth-section:first-of-type {
padding-top: 0;
border-top: 0;
margin-top: 0;
}
body.v2 .v2-auth-section h3 {
font-family: 'Inter', sans-serif;
font-size: 1.05rem;
font-weight: 600;
margin: 0.5rem 0 0.5rem;
color: var(--rss-ink);
}
body.v2 .v2-auth-section p {
color: var(--rss-ink-2);
font-size: 0.95rem;
margin: 0;
}
body.v2 .v2-auth-section p + p {
margin-top: 0.6rem;
}
/* Account summary panel inside billing forms */
body.v2 .v2-auth-summary {
background: var(--rss-surface-alt);
border: 1px solid var(--rss-line);
border-radius: var(--rss-radius-sm);
padding: 1.1rem 1.25rem;
margin-bottom: 1.4rem;
}
body.v2 .v2-auth-summary-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding: 0.4rem 0;
}
@media (max-width: 575.98px) {
body.v2 .v2-auth-summary-row {
flex-direction: column;
gap: 0.15rem;
align-items: flex-start;
}
}
body.v2 .v2-auth-summary-row + .v2-auth-summary-row {
border-top: 1px dashed var(--rss-line);
}
body.v2 .v2-auth-summary-label {
color: var(--rss-ink-3);
font-size: 0.85rem;
}
body.v2 .v2-auth-summary-value {
color: var(--rss-ink);
font-weight: 600;
font-size: 0.95rem;
text-align: right;
word-break: break-word;
}
@media (max-width: 575.98px) {
body.v2 .v2-auth-summary-value {
text-align: left;
}
}
body.v2 .v2-auth-summary-note {
color: var(--rss-ink-3);
font-size: 0.8rem;
margin: 0.6rem 0 0;
line-height: 1.5;
}
/* =====================================================================
Blog (WordPress theme)
===================================================================== */
/* Hero refinement: lighter weight on long single-post titles */
body.v2 .v2-hero h1 {
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Two-column listing grid -------------------------------------------- */
body.v2 .v2-blog-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 3rem;
align-items: start;
}
@media (max-width: 991px) {
body.v2 .v2-blog-grid {
grid-template-columns: 1fr;
gap: 2.25rem;
}
}
/* Post cards in the list --------------------------------------------- */
body.v2 .v2-blog-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
body.v2 .v2-blog-card {
background: var(--rss-surface);
border: 1px solid var(--rss-line);
border-radius: var(--rss-radius-sm);
padding: 1.75rem 1.75rem 1.5rem;
box-shadow: var(--rss-shadow-sm);
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
body.v2 .v2-blog-card:hover {
transform: translateY(-2px);
border-color: var(--rss-line-strong);
box-shadow: var(--rss-shadow);
}
body.v2 .v2-blog-card-eyebrow {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rss-brand);
margin-bottom: 0.7rem;
text-decoration: none;
}
body.v2 .v2-blog-card-eyebrow:hover { color: var(--rss-brand-ink); }
body.v2 .v2-blog-card-title {
font-size: 1.4rem;
line-height: 1.3;
margin: 0 0 0.45rem;
font-weight: 600;
}
body.v2 .v2-blog-card-title a {
color: var(--rss-ink);
text-decoration: none;
}
body.v2 .v2-blog-card-title a:hover { color: var(--rss-brand); }
body.v2 .v2-blog-card-meta {
font-family: 'Inter', sans-serif;
font-size: 0.82rem;
color: var(--rss-ink-3);
margin-bottom: 0.85rem;
}
body.v2 .v2-blog-card-excerpt {
color: var(--rss-ink-2);
font-size: 0.98rem;
line-height: 1.65;
margin-bottom: 1rem;
}
body.v2 .v2-blog-card-excerpt p { margin: 0 0 0.6rem; }
body.v2 .v2-blog-card-excerpt p:last-child { margin: 0; }
body.v2 .v2-blog-card-cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 0.92rem;
color: var(--rss-brand);
text-decoration: none;
transition: color 120ms ease;
}
body.v2 .v2-blog-card-cta i { transition: transform 160ms ease; }
body.v2 .v2-blog-card-cta:hover { color: var(--rss-brand-ink); }
body.v2 .v2-blog-card-cta:hover i { transform: translateX(3px); }
/* Pagination --------------------------------------------------------- */
body.v2 .v2-blog-pagination {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-top: 0.5rem;
}
body.v2 .v2-blog-pagination a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 0.92rem;
color: var(--rss-ink);
background: var(--rss-surface);
border: 1px solid var(--rss-line-strong);
border-radius: var(--rss-radius-sm);
padding: 0.65rem 1.1rem;
text-decoration: none;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
body.v2 .v2-blog-pagination a:hover {
background: rgba(15, 23, 42, 0.04);
border-color: var(--rss-ink-3);
color: var(--rss-ink);
}
body.v2 .v2-blog-pagination-empty { display: inline-block; }
/* Sidebar ------------------------------------------------------------ */
body.v2 .v2-blog-sidebar {
display: flex;
flex-direction: column;
gap: 1.25rem;
position: sticky;
top: 96px;
}
@media (max-width: 991px) {
body.v2 .v2-blog-sidebar { position: static; }
}
body.v2 .v2-blog-sidebar-card {
background: var(--rss-surface);
border: 1px solid var(--rss-line);
border-radius: var(--rss-radius-sm);
box-shadow: var(--rss-shadow-sm);
padding: 1.5rem 1.5rem 1.4rem;
}
body.v2 .v2-blog-sidebar-title {
font-size: 1rem;
font-weight: 600;
margin: 0 0 0.9rem;
}
body.v2 .v2-blog-sidebar-text {
font-size: 0.92rem;
line-height: 1.6;
color: var(--rss-ink-2);
margin: 0 0 0.8rem;
}
body.v2 .v2-blog-sidebar-cta {
background: linear-gradient(140deg, rgba(29, 78, 216, 0.06), rgba(6, 182, 164, 0.08));
border-color: rgba(29, 78, 216, 0.18);
}
body.v2 .v2-blog-sidebar-cta .btn { width: 100%; }
/* Categories list inside the sidebar */
body.v2 .v2-blog-cats {
list-style: none;
padding: 0;
margin: 0;
}
body.v2 .v2-blog-cats li {
margin: 0;
}
body.v2 .v2-blog-cats li + li { margin-top: 0.15rem; }
body.v2 .v2-blog-cats a {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.75rem;
border-radius: 8px;
color: var(--rss-ink-2);
text-decoration: none;
font-family: 'Inter', sans-serif;
font-size: 0.92rem;
font-weight: 500;
transition: background 120ms ease, color 120ms ease;
}
body.v2 .v2-blog-cats a:hover,
body.v2 .v2-blog-cats .current-cat > a {
background: var(--rss-surface-alt);
color: var(--rss-ink);
}
/* WP renders post counts as "(n)" trailing the link text */
body.v2 .v2-blog-cats li > a {
position: relative;
}
body.v2 .v2-blog-cats ul {
list-style: none;
padding-left: 0.85rem;
margin: 0.15rem 0 0;
border-left: 1px solid var(--rss-line);
}
/* Single-post article ------------------------------------------------ */
body.v2 .v2-blog-article {
max-width: 740px;
margin: 0 auto;
}
body.v2 .v2-prose-hero {
display: block;
width: 100%;
height: auto;
border-radius: var(--rss-radius);
box-shadow: var(--rss-shadow);
margin-bottom: 2.5rem;
}
/* Prose typography for the_content() ------------------------------- */
body.v2 .v2-prose {
font-size: 1.05rem;
line-height: 1.75;
color: var(--rss-ink-2);
}
body.v2 .v2-prose > *:first-child { margin-top: 0; }
body.v2 .v2-prose > *:last-child { margin-bottom: 0; }
body.v2 .v2-prose p {
margin: 0 0 1.25rem;
}
body.v2 .v2-prose h2 {
font-size: 1.75rem;
line-height: 1.25;
margin: 2.5rem 0 1rem;
letter-spacing: -0.015em;
}
body.v2 .v2-prose h3 {
font-size: 1.3rem;
line-height: 1.3;
margin: 2rem 0 0.85rem;
letter-spacing: -0.01em;
}
body.v2 .v2-prose h4 {
font-family: 'Inter', sans-serif;
font-size: 1.05rem;
font-weight: 600;
margin: 1.75rem 0 0.6rem;
color: var(--rss-ink);
}
body.v2 .v2-prose h5 {
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--rss-ink);
margin: 1.5rem 0 0.5rem;
}
body.v2 .v2-prose ul,
body.v2 .v2-prose ol {
margin: 0 0 1.25rem;
padding-left: 1.4rem;
}
body.v2 .v2-prose li { margin-bottom: 0.4rem; }
body.v2 .v2-prose li:last-child { margin-bottom: 0; }
body.v2 .v2-prose a {
color: var(--rss-brand);
text-decoration: none;
border-bottom: 1px solid rgba(29, 78, 216, 0.25);
transition: border-color 120ms ease, color 120ms ease;
}
body.v2 .v2-prose a:hover {
color: var(--rss-brand-ink);
border-bottom-color: var(--rss-brand-ink);
}
body.v2 .v2-prose img {
max-width: 100%;
height: auto;
border-radius: var(--rss-radius-sm);
box-shadow: var(--rss-shadow-sm);
margin: 1.5rem 0;
}
body.v2 .v2-prose blockquote {
margin: 1.75rem 0;
padding: 0.5rem 0 0.5rem 1.25rem;
border-left: 3px solid var(--rss-accent);
font-size: 1.1rem;
line-height: 1.6;
color: var(--rss-ink);
font-style: italic;
}
body.v2 .v2-prose blockquote p:last-child { margin-bottom: 0; }
body.v2 .v2-prose pre {
background: var(--rss-surface-alt);
border: 1px solid var(--rss-line);
border-radius: var(--rss-radius-sm);
padding: 1rem 1.1rem;
font-size: 0.88rem;
overflow-x: auto;
margin: 1.25rem 0;
}
body.v2 .v2-prose code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.9em;
background: var(--rss-surface-alt);
padding: 0.12em 0.35em;
border-radius: 4px;
}
body.v2 .v2-prose pre code {
background: transparent;
padding: 0;
border-radius: 0;
}
body.v2 .v2-prose hr {
border: 0;
border-top: 1px solid var(--rss-line);
margin: 2.25rem 0;
}
body.v2 .v2-prose iframe,
body.v2 .v2-prose video {
max-width: 100%;
border-radius: var(--rss-radius-sm);
}
/* Tags / categories under the article ------------------------------- */
body.v2 .v2-blog-meta-row {
display: flex;
flex-wrap: wrap;
gap: 0.6rem 1.5rem;
margin: 2.5rem 0 0;
padding: 1.25rem 0 0;
border-top: 1px solid var(--rss-line);
font-size: 0.88rem;
color: var(--rss-ink-3);
}
body.v2 .v2-blog-tags-label {
font-family: 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.72rem;
font-weight: 600;
color: var(--rss-ink-3);
margin-right: 0.4rem;
}
body.v2 .v2-blog-tags a {
color: var(--rss-ink-2);
text-decoration: none;
}
body.v2 .v2-blog-tags a:hover { color: var(--rss-brand); }
/* Prev/next post nav ------------------------------------------------- */
body.v2 .v2-blog-postnav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-top: 2rem;
}
@media (max-width: 575px) {
body.v2 .v2-blog-postnav { grid-template-columns: 1fr; }
}
body.v2 .v2-blog-postnav > div { min-width: 0; }
body.v2 .v2-blog-postnav-next { text-align: right; }
body.v2 .v2-blog-postnav a {
display: block;
padding: 1rem 1.1rem;
background: var(--rss-surface);
border: 1px solid var(--rss-line);
border-radius: var(--rss-radius-sm);
color: var(--rss-ink);
text-decoration: none;
transition: border-color 120ms ease, transform 160ms ease, box-shadow 160ms ease;
}
body.v2 .v2-blog-postnav a:hover {
border-color: var(--rss-line-strong);
transform: translateY(-1px);
box-shadow: var(--rss-shadow-sm);
}
body.v2 .v2-blog-postnav-label {
display: block;
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rss-ink-3);
margin-bottom: 0.3rem;
}
body.v2 .v2-blog-postnav-title {
display: block;
font-family: 'Inter', sans-serif;
font-size: 0.98rem;
font-weight: 500;
color: var(--rss-ink);
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.v2 .v2-blog-back {
margin-top: 2rem;
text-align: center;
}
body.v2 .v2-blog-back .v2-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: 'Inter', sans-serif;
font-weight: 500;
color: var(--rss-brand);
text-decoration: none;
}
body.v2 .v2-blog-back .v2-link:hover { color: var(--rss-brand-ink); }