* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: "Segoe UI", Arial, sans-serif;
color: #123047;
background: #eaf5f9;
}
.page-shell {
min-height: 100vh;
padding: 18px;
background:
linear-gradient(
rgba(232,246,250,.32),
rgba(226,242,248,.50)
),
url('/static/bg1.jpg') center top / cover no-repeat fixed;
}
/* HEADER */
.topbar {
max-width: 1500px;
min-height: 88px;
margin: 0 auto;
padding: 0 34px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
border-radius: 18px;
background: rgba(248,253,255,.90);
border: 1px solid rgba(55,120,150,.16);
backdrop-filter: blur(18px);
box-shadow: 0 12px 35px rgba(30,85,110,.12);
}
.brand {
display: flex;
align-items: center;
gap: 14px;
}
.brand-icon {
width: 54px;
height: 54px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg,#0f6d89,#39a5b8);
color: white;
font-size: 26px;
font-weight: 800;
box-shadow: 0 7px 20px rgba(17,104,135,.22);
}
.brand-name {
color: #102f42;
font-size: 23px;
font-weight: 800;
}
.brand-sub {
margin-top: 4px;
color: #668492;
font-size: 12px;
}
/* NAV */
.nav {
height: 88px;
display: flex;
align-items: center;
gap: 38px;
}
.nav > a,
.dropbtn {
position: relative;
border: 0;
background: none;
color: #244a5d;
font-family: inherit;
font-size: 15px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.nav > a:hover,
.dropbtn:hover,
.nav .active {
color: #0d819d;
}
.nav .active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -31px;
height: 3px;
border-radius: 5px;
background: #18a1bd;
}
/* DROPDOWN */
.dropdown {
position: relative;
height: 88px;
display: flex;
align-items: center;
}
.dropdown-menu {
display: none;
position: absolute;
top: 76px;
left: 50%;
transform: translateX(-50%);
width: 220px;
border-radius: 13px;
background: rgba(249,253,255,.98);
border: 1px solid rgba(60,120,145,.15);
box-shadow: 0 18px 40px rgba(24,72,92,.16);
overflow: hidden;
z-index: 100;
}
.dropdown-title {
padding: 15px 18px 11px;
border-bottom: 1px solid #dcebef;
color: #16809a;
font-size: 11px;
font-weight: 800;
letter-spacing: .7px;
}
.dropdown-menu a {
display: block;
padding: 16px 18px;
color: #173c4e;
text-decoration: none;
font-weight: 700;
}
.dropdown-menu a:hover {
background: #e8f7fa;
color: #0d809c;
}
.dropdown:hover .dropdown-menu {
display: block;
}
/* BUTTON */
.start-btn {
justify-self: end;
padding: 15px 22px;
border-radius: 11px;
background: linear-gradient(135deg,#0c7491,#1fa7bd);
color: white;
text-decoration: none;
font-weight: 700;
box-shadow: 0 10px 25px rgba(20,113,143,.22);
}
/* HOME HERO */
.hero {
max-width: 1400px;
min-height: 680px;
margin: 0 auto;
padding: 85px 45px 25px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.hero-copy {
max-width: 850px;
}
.badge {
display: inline-block;
padding: 9px 16px;
border: 1px solid rgba(18,132,160,.40);
border-radius: 30px;
background: rgba(247,253,255,.72);
color: #0f819c;
font-size: 11px;
font-weight: 800;
letter-spacing: 1.5px;
}
.hero h1 {
margin: 28px 0 20px;
font-size: clamp(48px,5.6vw,78px);
line-height: 1.03;
letter-spacing: -2.5px;
color: #113449;
}
.hero h1 span {
color: #178eaa;
}
.hero p {
max-width: 600px;
margin-bottom: 34px;
color: #365d6f;
font-size: 18px;
line-height: 1.65;
}
/* SCAN BOX */
.scan-box {
width: min(790px,100%);
padding: 7px;
display: flex;
align-items: center;
gap: 8px;
border-radius: 16px;
background: rgba(249,253,255,.93);
border: 1px solid rgba(67,124,147,.18);
backdrop-filter: blur(14px);
box-shadow: 0 18px 45px rgba(30,88,112,.14);
}
.scan-icon {
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: #e0f4f8;
font-size: 22px;
}
.scan-box input {
flex: 1;
padding: 17px 10px;
border: 0;
outline: 0;
background: transparent;
color: #173a4c;
font-size: 15px;
}
.scan-box input::placeholder {
color: #8097a2;
}
.scan-box button {
padding: 17px 26px;
border: 0;
border-radius: 11px;
background: linear-gradient(135deg,#0c7692,#20a9bf);
color: white;
font-size: 14px;
font-weight: 800;
cursor: pointer;
}
.scan-box button:hover {
filter: brightness(1.05);
}
/* FEATURE STRIP */
.feature-strip {
width: 100%;
display: grid;
grid-template-columns: repeat(4,1fr);
overflow: hidden;
border-radius: 18px;
background: rgba(247,252,254,.90);
border: 1px solid rgba(68,124,146,.16);
box-shadow: 0 18px 40px rgba(29,82,102,.11);
backdrop-filter: blur(16px);
}
.feature-item {
min-height: 118px;
padding: 25px 28px;
display: flex;
align-items: center;
gap: 17px;
border-right: 1px solid rgba(77,132,153,.14);
}
.feature-item:last-child {
border-right: 0;
}
.feature-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 13px;
background: #dff3f7;
color: #1286a0;
font-size: 28px;
}
.feature-item strong {
display: block;
color: #183d4f;
font-size: 16px;
}
.feature-item span {
display: block;
margin-top: 7px;
color: #66818f;
font-size: 13px;
}
/* INFO CARDS */
.info-section {
max-width: 1400px;
margin: 22px auto 0;
padding: 0 45px 50px;
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 24px;
}
.info-card {
min-height: 185px;
padding: 30px;
display: flex;
gap: 22px;
border-radius: 16px;
background: rgba(249,253,255,.91);
border: 1px solid rgba(63,120,143,.14);
box-shadow: 0 14px 35px rgba(28,78,98,.10);
backdrop-filter: blur(15px);
}
.info-card h3 {
margin: 0 0 10px;
color: #163b4d;
font-size: 18px;
}
.info-card p {
margin: 0;
color: #597583;
font-size: 14px;
line-height: 1.55;
}
.info-icon {
width: 55px;
height: 55px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #1789a3;
border-radius: 50%;
color: #1789a3;
font-size: 23px;
}
/* RESULTS */
.results-body {
background: #eaf5f8;
color: #17394a;
}
.results-body .page-shell {
background:
linear-gradient(
rgba(232,246,250,.88),
rgba(235,247,250,.95)
),
url('/static/bg1.jpg') center / cover fixed no-repeat;
}
.results-page {
max-width: 1200px;
margin: 0 auto;
padding: 55px 45px 80px;
}
.results-heading {
padding: 28px 30px;
margin-bottom: 22px;
border-radius: 18px;
background: rgba(249,253,255,.94);
border: 1px solid rgba(67,124,147,.16);
box-shadow: 0 12px 35px rgba(29,78,98,.10);
}
.results-heading h1 {
margin: 14px 0 7px;
color: #14394c;
font-size: 44px;
}
.results-heading p {
margin: 0;
color: #63808f;
font-weight: 600;
}
/* SCORE */
.score-panel {
padding: 30px;
display: flex;
align-items: center;
gap: 28px;
border-radius: 18px;
background: rgba(249,253,255,.95);
border: 1px solid rgba(64,120,143,.15);
box-shadow: 0 15px 40px rgba(27,75,95,.10);
}
.score-circle {
width: 120px;
height: 120px;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 8px solid #38a56d;
border-radius: 50%;
}
.score-circle strong {
color: #17394a;
font-size: 38px;
}
.score-circle span {
color: #63808f;
font-size: 13px;
}
.score-copy h2 {
margin: 0 0 8px;
color: #16394a;
}
.score-copy p {
margin: 0;
color: #66818f;
line-height: 1.6;
}
/* CATEGORY SCORE */
.category-grid {
margin-top: 20px;
display: grid;
grid-template-columns: repeat(5,1fr);
gap: 14px;
}
.category-card {
padding: 20px;
border-radius: 14px;
background: rgba(249,253,255,.95);
border: 1px solid rgba(63,120,143,.14);
box-shadow: 0 10px 25px rgba(29,78,98,.07);
}
.category-card span {
display: block;
color: #67828f;
font-size: 13px;
font-weight: 700;
}
.category-card strong {
display: block;
margin-top: 8px;
color: #15394b;
font-size: 24px;
}
/* TITLES */
.section-title {
margin-top: 34px;
margin-bottom: 15px;
padding: 13px 18px;
border-left: 4px solid #1791aa;
border-radius: 10px;
background: rgba(248,253,255,.90);
color: #15394b;
font-size: 24px;
}
/* RESULT CARDS */
.result-grid {
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 18px;
}
.result-card {
min-height: 86px;
padding: 24px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 15px;
background: rgba(249,253,255,.96);
border: 1px solid rgba(63,120,143,.14);
box-shadow: 0 9px 24px rgba(28,75,94,.07);
}
.result-label {
color: #163b4d;
font-size: 15px;
font-weight: 800;
}
.result-card small {
color: #708993;
}
.pass {
padding: 8px 13px;
border-radius: 20px;
background: #e1f4e8;
color: #23824a;
font-weight: 800;
}
.fail {
padding: 8px 13px;
border-radius: 20px;
background: #fde8e6;
color: #b73e35;
font-weight: 800;
}
/* DETAILS */
.details-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 15px;
}
.detail-card {
padding: 20px;
border-radius: 14px;
background: rgba(249,253,255,.95);
border: 1px solid rgba(64,121,143,.14);
box-shadow: 0 9px 24px rgba(28,75,94,.07);
}
.detail-card span {
display: block;
color: #6b8591;
font-size: 13px;
}
.detail-card strong {
display: block;
margin-top: 8px;
color: #15394b;
font-size: 18px;
}
/* BUTTON */
.scan-again {
display: inline-block;
margin-top: 25px;
padding: 14px 22px;
border-radius: 10px;
background: linear-gradient(135deg,#0c7692,#20a8bd);
color: white;
text-decoration: none;
font-weight: 700;
}
/* MOBILE */
@media(max-width:900px) {
.topbar {
grid-template-columns: 1fr auto;
padding: 0 18px;
}
.nav {
display: none;
}
.hero {
padding: 55px 18px 20px;
}
.feature-strip {
grid-template-columns: repeat(2,1fr);
}
.info-section {
grid-template-columns: 1fr;
padding: 20px 18px 40px;
}
.results-page {
padding: 30px 18px 60px;
}
.category-grid {
grid-template-columns: repeat(2,1fr);
}
.result-grid {
grid-template-columns: 1fr;
}
.details-grid {
grid-template-columns: 1fr;
}
}
/* ===== HOME LAYOUT ADJUSTMENT ===== */
/* Center the scan box */
.scan-box {
margin-left: auto !important;
margin-right: auto !important;
}
/* Give the scanner its own full width area */
.hero-copy {
max-width: 100% !important;
}
.hero-copy > .badge,
.hero-copy > h1,
.hero-copy > p {
max-width: 850px;
}
/* Approx. 5cm visual spacing before feature boxes */
.feature-strip {
margin-top: 190px !important;
}
/* Keep scan field at a professional width */
.scan-box {
width: min(900px, 90%) !important;
}
/* ===== HOME LAYOUT ADJUSTMENT ===== */
/* Center the scan box */
.scan-box {
margin-left: auto !important;
margin-right: auto !important;
}
/* Give the scanner its own full width area */
.hero-copy {
max-width: 100% !important;
}
.hero-copy > .badge,
.hero-copy > h1,
.hero-copy > p {
max-width: 850px;
}
/* Approx. 5cm visual spacing before feature boxes */
.feature-strip {
margin-top: 190px !important;
}
/* Keep scan field at a professional width */
.scan-box {
width: min(900px, 90%) !important;
}
/* ==================================================
NEW HOME HERO LAYOUT
================================================== */
.hero-new {
max-width: 1500px;
margin: 34px auto 0;
}
.hero-panel {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 500px;
background: rgba(235,244,248,.66);
border-radius: 22px;
overflow: hidden;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 18px 45px rgba(29,78,98,.10);
}
.hero-left {
padding: 55px 45px;
display: flex;
flex-direction: column;
justify-content: center;
}
.hero-left h1 {
margin: 27px 0 19px;
max-width: 650px;
color: #173b55;
font-size: clamp(34px,3.2vw,52px);
line-height: 1.10;
letter-spacing: -1.5px;
}
.hero-left h1 span {
display: block;
margin-top: 8px;
color: #1599b8;
}
.hero-left p {
max-width: 600px;
margin: 0 0 32px;
color: #496b7d;
font-size: 17px;
line-height: 1.65;
}
.hero-image {
padding: 28px;
display: flex;
align-items: center;
justify-content: center;
}
.hero-image img {
width: 100%;
height: 100%;
min-height: 420px;
max-height: 470px;
object-fit: cover;
border-radius: 20px;
opacity: .88;
box-shadow: 0 16px 40px rgba(20,80,105,.13);
}
/* Scanner inside hero */
.hero-left .scan-box {
width: 100% !important;
margin: 0 !important;
max-width: 720px;
}
/* Feature strip spacing */
.hero-new .feature-strip {
margin-top: 60px !important;
}
/* remove old oversized hero rules from effect */
.hero-new .badge {
align-self: flex-start;
}
/* Responsive */
@media(max-width:950px) {
.hero-panel {
grid-template-columns: 1fr;
}
.hero-image {
padding-top: 0;
}
.hero-image img {
min-height: 300px;
}
.hero-left {
padding: 40px 25px;
}
}
/* ===== FIX SERVICES DROPDOWN ===== */
.topbar {
position: relative !important;
z-index: 5000 !important;
overflow: visible !important;
}
.nav,
.dropdown {
overflow: visible !important;
}
.dropdown-menu {
z-index: 9999 !important;
top: 72px !important;
}
.hero-new,
.hero-panel,
.hero-image {
position: relative;
z-index: 1;
}
/* Keep dropdown open when moving mouse into submenu */
.dropdown:hover .dropdown-menu,
.dropdown-menu:hover {
display: block !important;
}
/* =========================================================
AUTHENTICATION
========================================================= */
.auth-wrap {
min-height: calc(100vh - 130px);
display: flex;
align-items: center;
justify-content: center;
padding: 50px 20px;
}
.auth-card {
width: min(500px, 100%);
padding: 38px;
background: rgba(249,253,255,.95);
border-radius: 22px;
box-shadow: 0 20px 50px rgba(27,75,95,.13);
backdrop-filter: blur(18px);
}
.auth-card h1 {
margin: 20px 0 25px;
color: #16394a;
font-size: 38px;
}
.auth-card form {
display: flex;
flex-direction: column;
gap: 10px;
}
.auth-card label {
margin-top: 7px;
color: #385e70;
font-size: 13px;
font-weight: 700;
}
.auth-card input {
width: 100%;
padding: 15px 16px;
border: 1px solid #cbdde5;
border-radius: 11px;
background: white;
color: #17394a;
font-size: 15px;
outline: none;
}
.auth-card input:focus {
border-color: #1791aa;
box-shadow: 0 0 0 3px rgba(23,145,170,.10);
}
.auth-card button {
margin-top: 13px;
padding: 15px;
border: 0;
border-radius: 11px;
background: linear-gradient(135deg,#0c7692,#20a8bd);
color: white;
font-size: 15px;
font-weight: 800;
cursor: pointer;
}
.auth-card p {
color: #68838f;
line-height: 1.6;
}
.auth-card a {
color: #0d829d;
font-weight: 700;
}
.auth-error {
margin-bottom: 18px;
padding: 13px 15px;
border-radius: 10px;
background: #fde8e6;
color: #b13c32;
font-weight: 600;
}
/* =========================================================
ADMIN USERS
========================================================= */
.admin-page {
max-width: 1200px;
margin: 0 auto;
padding: 55px 30px 80px;
}
.users-table {
margin-top: 22px;
border-radius: 18px;
overflow: hidden;
background: rgba(249,253,255,.96);
box-shadow: 0 15px 40px rgba(27,75,95,.10);
}
.users-row {
display: grid;
grid-template-columns: 1.15fr 1.6fr 1.15fr .8fr .7fr 1.4fr;
gap: 15px;
align-items: center;
padding: 18px 22px;
border-bottom: 1px solid #e0edf1;
color: #244a5c;
}
.users-row:last-child {
border-bottom: 0;
}
.users-header {
background: #eaf6f9;
color: #15394b;
font-weight: 800;
}
.user-approved,
.user-pending {
display: inline-block;
padding: 7px 11px;
border-radius: 20px;
font-size: 12px;
font-weight: 800;
}
.user-approved {
background: #e1f4e8;
color: #23824a;
}
.user-pending {
background: #fff2d9;
color: #a56614;
}
.user-actions {
display: flex;
gap: 7px;
}
.user-actions form {
margin: 0;
}
.user-actions button {
border: 0;
border-radius: 8px;
padding: 9px 12px;
color: white;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.approve-btn {
background: #31925c;
}
.revoke-btn {
background: #d58a20;
}
.delete-btn {
background: #c94b43;
}
@media(max-width:900px) {
.users-table {
overflow-x: auto;
}
.users-row {
min-width: 1050px;
}
}
/* =========================================================
PUBLIC SCORE / FREEMIUM
========================================================= */
.public-result {
min-height: calc(100vh - 130px);
display: flex;
align-items: center;
justify-content: center;
padding: 55px 20px 80px;
}
.public-score-card {
width: min(720px, 100%);
padding: 48px;
text-align: center;
border-radius: 26px;
background:
rgba(249,253,255,.95);
box-shadow:
0 25px 65px
rgba(27,75,95,.16);
backdrop-filter: blur(18px);
}
.scanned-url {
margin: 16px 0 26px;
color: #64818e;
font-size: 14px;
word-break: break-all;
}
.big-score-ring {
width: 190px;
height: 190px;
margin: 5px auto 28px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 12px solid #20a2b8;
background:
linear-gradient(
145deg,
#ffffff,
#eaf8fa
);
box-shadow:
0 18px 45px
rgba(25,125,150,.16);
}
.big-score-ring strong {
color: #123b4e;
font-size: 64px;
line-height: 1;
}
.big-score-ring span {
margin-top: 4px;
color: #71909d;
font-size: 16px;
}
.public-score-card h1 {
margin: 10px 0;
color: #15394b;
font-size: 34px;
}
.score-message {
max-width: 570px;
margin: 0 auto 30px;
color: #5d7a88;
line-height: 1.65;
}
.teaser-stat {
margin: 25px auto;
padding: 18px;
border-radius: 15px;
background: #eef8fa;
}
.teaser-stat strong {
display: block;
color: #11869f;
font-size: 32px;
}
.teaser-stat span {
color: #617f8c;
font-size: 13px;
}
.locked-preview {
margin: 25px 0;
border-radius: 16px;
overflow: hidden;
border:
1px solid
#dcebf0;
}
.locked-row {
padding: 15px 18px;
display: flex;
align-items: center;
justify-content: space-between;
background:
rgba(245,251,253,.94);
border-bottom:
1px solid
#e1edf1;
color: #31596a;
text-align: left;
}
.locked-row:last-child {
border-bottom: 0;
}
.locked-row strong {
color: #8298a2;
font-size: 12px;
}
.score-actions {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.unlock-button {
display: inline-block;
padding: 15px 25px;
border-radius: 11px;
background:
linear-gradient(
135deg,
#087994,
#20aac0
);
color: white;
text-decoration: none;
font-weight: 800;
box-shadow:
0 10px 25px
rgba(20,113,143,.20);
}
.secondary-button {
display: inline-block;
padding: 14px 23px;
border-radius: 11px;
background: white;
border:
1px solid
#cbdde5;
color: #17647a;
text-decoration: none;
font-weight: 700;
}
.unlock-note {
margin-top: 18px !important;
color: #78909b !important;
font-size: 13px;
}
/* =========================================================
SUBSCRIPTION PAGE
========================================================= */
.subscription-page {
max-width: 1050px;
margin: 0 auto;
padding: 65px 25px 90px;
}
.subscription-heading {
text-align: center;
max-width: 720px;
margin: 0 auto 38px;
}
.subscription-heading h1 {
margin: 20px 0 12px;
color: #15394b;
font-size: 46px;
}
.subscription-heading p {
color: #617d8a;
line-height: 1.6;
}
.pricing-grid {
display: grid;
grid-template-columns:
repeat(2, 1fr);
gap: 25px;
}
.pricing-card {
position: relative;
padding: 36px;
border-radius: 22px;
background:
rgba(249,253,255,.95);
box-shadow:
0 18px 45px
rgba(27,75,95,.10);
}
.pricing-card.featured {
border:
2px solid
#1b9db6;
}
.popular-badge {
position: absolute;
top: -14px;
right: 25px;
padding: 7px 13px;
border-radius: 20px;
background: #168da7;
color: white;
font-size: 10px;
font-weight: 800;
}
.pricing-label {
color: #1689a2;
font-size: 12px;
font-weight: 900;
letter-spacing: 1.5px;
}
.pricing-card h2 {
color: #15394b;
font-size: 27px;
}
.price {
margin: 20px 0;
color: #123b4d;
font-size: 36px;
font-weight: 900;
}
.pricing-card ul {
padding: 0;
margin: 25px 0 30px;
list-style: none;
}
.pricing-card li {
padding: 9px 0;
color: #416474;
}
.pricing-card li.muted {
color: #a5b2b8;
}
.subscription-status {
padding: 15px;
border-radius: 12px;
background: #edf8fa;
color: #547886;
line-height: 1.6;
font-size: 13px;
}
@media(max-width:800px) {
.pricing-grid {
grid-template-columns: 1fr;
}
.public-score-card {
padding: 30px 20px;
}
.big-score-ring {
width: 155px;
height: 155px;
}
.big-score-ring strong {
font-size: 50px;
}
}
/* =========================================================
INTERNATIONAL MOBILE FIELD
========================================================= */
.phone-row {
display: grid;
grid-template-columns: 145px 1fr;
gap: 10px;
width: 100%;
}
.country-code {
width: 100%;
min-height: 58px;
padding: 0 12px;
border: 1px solid #cbdde5;
border-radius: 11px;
background: white;
color: #17394a;
font-family: inherit;
font-size: 15px;
outline: none;
cursor: pointer;
}
.country-code:focus {
border-color: #1791aa;
box-shadow:
0 0 0 3px
rgba(23,145,170,.10);
}
.phone-row input {
width: 100%;
}
@media(max-width:550px) {
.phone-row {
grid-template-columns: 120px 1fr;
}
}
/* =========================================================
ROSVIX BRAND MEANING
========================================================= */
.rosvix-meaning {
max-width: 1050px;
margin: 70px auto 90px;
padding: 36px 42px;
background: rgba(245, 250, 252, .82);
backdrop-filter: blur(14px);
border-radius: 22px;
box-shadow:
0 18px 45px
rgba(21, 72, 92, .08);
}
.rosvix-meaning-title {
text-align: center;
margin-bottom: 30px;
}
.rosvix-meaning-title > span {
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
color: #168da7;
}
.rosvix-meaning-title h2 {
margin: 8px 0 0;
font-size: 25px;
color: #173b4c;
}
.rosvix-letters {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.rosvix-letter {
text-align: center;
padding: 18px 5px;
}
.rosvix-letter strong {
display: block;
font-size: 31px;
line-height: 1;
color: #158ca6;
margin-bottom: 9px;
}
.rosvix-letter span {
font-size: 12px;
font-weight: 700;
color: #526f7c;
}
@media(max-width:850px) {
.rosvix-letters {
grid-template-columns: repeat(3, 1fr);
}
}
@media(max-width:500px) {
.rosvix-meaning {
margin: 45px 15px;
padding: 28px 15px;
}
.rosvix-letters {
grid-template-columns: repeat(2, 1fr);
}
}
/* =========================================================
ROSVIX MOBILE RESPONSIVE FIX
========================================================= */
@media (max-width: 768px) {
html,
body {
width: 100%;
overflow-x: hidden;
}
.page-shell {
padding: 10px !important;
background-attachment: scroll !important;
}
/* HEADER */
.topbar {
width: 100%;
min-height: 74px;
grid-template-columns: 1fr auto;
padding: 10px 14px !important;
border-radius: 18px;
}
.brand {
gap: 10px;
}
.brand-icon {
width: 48px;
height: 48px;
font-size: 22px;
border-radius: 14px;
}
.brand-name {
font-size: 20px;
}
.brand-sub {
font-size: 10px;
line-height: 1.25;
max-width: 150px;
}
.nav {
display: none !important;
}
.start-btn {
padding: 13px 15px !important;
font-size: 13px !important;
border-radius: 11px;
white-space: nowrap;
}
/* HERO */
.hero-new {
width: 100%;
margin-top: 18px !important;
}
.hero-panel {
width: 100%;
display: flex !important;
flex-direction: column !important;
min-height: auto !important;
border-radius: 22px;
overflow: hidden !important;
}
.hero-left {
width: 100%;
padding: 28px 18px 22px !important;
align-items: stretch;
}
.hero-left .badge {
align-self: flex-start;
max-width: 100%;
padding: 8px 12px;
font-size: 10px;
letter-spacing: 1.3px;
}
.hero-left h1 {
width: 100%;
max-width: 100% !important;
margin: 24px 0 16px !important;
font-size: 38px !important;
line-height: 1.08 !important;
letter-spacing: -1px !important;
overflow-wrap: anywhere;
}
.hero-left h1 span {
margin-top: 8px;
}
.hero-left p {
width: 100%;
max-width: 100% !important;
margin-bottom: 22px !important;
font-size: 15px !important;
line-height: 1.55 !important;
}
/* SCAN BOX */
.hero-left .scan-box,
.scan-box {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: 44px 1fr !important;
gap: 8px;
padding: 8px !important;
border-radius: 15px;
}
.scan-icon {
width: 44px !important;
height: 44px !important;
font-size: 18px !important;
}
.scan-box input {
min-width: 0 !important;
width: 100% !important;
padding: 12px 8px !important;
font-size: 14px !important;
}
.scan-box button {
grid-column: 1 / -1;
width: 100% !important;
margin-top: 4px;
padding: 14px 16px !important;
font-size: 14px !important;
}
/* HERO IMAGE */
.hero-image {
width: 100%;
padding: 0 18px 20px !important;
}
.hero-image img {
width: 100% !important;
height: 220px !important;
min-height: 0 !important;
max-height: none !important;
object-fit: cover !important;
border-radius: 17px;
}
/* FEATURE STRIP */
.hero-new .feature-strip,
.feature-strip {
width: 100%;
margin-top: 28px !important;
grid-template-columns: 1fr 1fr !important;
border-radius: 18px;
}
.feature-item {
min-width: 0;
min-height: 105px;
padding: 18px 14px !important;
gap: 12px;
}
.feature-item:nth-child(2) {
border-right: 0;
}
.feature-item:nth-child(1),
.feature-item:nth-child(2) {
border-bottom: 1px solid rgba(77,132,153,.14);
}
.feature-icon {
width: 44px !important;
height: 44px !important;
flex-shrink: 0;
font-size: 21px !important;
}
.feature-item strong {
font-size: 14px !important;
}
.feature-item span {
font-size: 11px !important;
}
/* ROSVIX MEANING SECTION */
.rosvix-meaning {
width: 100%;
margin: 35px 0 45px !important;
padding: 25px 14px !important;
}
.rosvix-meaning-title h2 {
font-size: 21px !important;
}
.rosvix-letters {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
}
.rosvix-letter {
padding: 15px 4px !important;
}
.rosvix-letter strong {
font-size: 27px !important;
}
/* AUTH / SIGNUP */
.auth-wrap {
padding: 25px 8px !important;
}
.auth-card {
width: 100% !important;
padding: 26px 18px !important;
border-radius: 20px;
}
.auth-card h1 {
font-size: 34px !important;
}
.phone-row {
grid-template-columns: 95px 1fr !important;
gap: 8px !important;
}
.country-code {
min-width: 0 !important;
padding: 0 7px !important;
font-size: 14px !important;
}
/* RESULTS */
.results-page {
width: 100%;
padding: 24px 8px 50px !important;
}
.results-heading {
padding: 20px 18px !important;
}
.results-heading h1 {
font-size: 34px !important;
}
.score-panel {
flex-direction: column;
align-items: center !important;
text-align: center;
padding: 22px 16px !important;
}
.score-circle {
width: 110px !important;
height: 110px !important;
}
.category-grid {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
.category-card {
padding: 15px !important;
}
.category-card strong {
font-size: 20px !important;
}
.result-grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.details-grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
/* PUBLIC SCORE */
.public-result {
padding: 28px 8px 55px !important;
}
.public-score-card {
width: 100% !important;
padding: 28px 16px !important;
}
.public-score-card h1 {
font-size: 29px !important;
}
.big-score-ring {
width: 145px !important;
height: 145px !important;
}
.big-score-ring strong {
font-size: 48px !important;
}
.locked-row {
gap: 15px;
}
.score-actions {
flex-direction: column;
}
.unlock-button,
.secondary-button {
width: 100%;
text-align: center;
}
/* SUBSCRIPTION */
.subscription-page {
width: 100%;
padding: 35px 8px 60px !important;
}
.subscription-heading h1 {
font-size: 34px !important;
}
.pricing-grid {
grid-template-columns: 1fr !important;
}
.pricing-card {
padding: 28px 20px !important;
}
}
/* EXTRA SMALL PHONES */
@media (max-width: 420px) {
.brand-sub {
display: none;
}
.brand-name {
font-size: 18px;
}
.brand-icon {
width: 43px;
height: 43px;
}
.start-btn {
padding: 11px 12px !important;
font-size: 12px !important;
}
.hero-left h1 {
font-size: 33px !important;
}
.feature-strip {
grid-template-columns: 1fr !important;
}
.feature-item {
border-right: 0 !important;
border-bottom: 1px solid rgba(77,132,153,.14) !important;
}
.feature-item:last-child {
border-bottom: 0 !important;
}
.category-grid {
grid-template-columns: 1fr !important;
}
}
/* =========================================================
SIGNUP PRO PLAN
========================================================= */
.signup-plan-card {
margin: 22px 0 30px;
padding: 22px;
border-radius: 17px;
background:
linear-gradient(
145deg,
rgba(232,248,251,.95),
rgba(248,253,255,.98)
);
border: 1px solid rgba(22,141,167,.20);
box-shadow:
0 12px 30px
rgba(20,100,125,.08);
}
.signup-plan-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
.signup-plan-label {
color: #1389a3;
font-size: 11px;
font-weight: 900;
letter-spacing: 1.5px;
}
.signup-plan-top h3 {
margin: 6px 0 0;
color: #17394a;
font-size: 20px;
}
.signup-price {
text-align: right;
white-space: nowrap;
}
.signup-price strong {
display: block;
color: #0c839d;
font-size: 29px;
}
.signup-price span {
color: #708b97;
font-size: 12px;
}
.signup-plan-scans {
margin-top: 20px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 10px;
border-radius: 11px;
background: white;
}
.signup-plan-scans strong {
color: #1289a3;
font-size: 26px;
}
.signup-plan-scans span {
color: #527381;
font-size: 14px;
font-weight: 600;
}
.signup-plan-features {
margin-top: 17px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px 14px;
}
.signup-plan-features span {
color: #476b7a;
font-size: 12px;
}
.signup-plan-note {
margin: 17px 0 0 !important;
color: #78909a !important;
font-size: 11px !important;
line-height: 1.5 !important;
}
@media(max-width:600px) {
.signup-plan-top {
flex-direction: column;
gap: 12px;
}
.signup-price {
text-align: left;
}
.signup-plan-features {
grid-template-columns: 1fr;
}
}
/* =========================================================
PAYPAL SUBSCRIPTION
========================================================= */
.plan-limit {
margin: 15px 0 20px;
padding: 14px 16px;
border-radius: 11px;
background: #edf8fa;
color: #527684;
font-size: 13px;
}
.plan-limit strong {
margin-right: 5px;
color: #1189a2;
font-size: 22px;
}
.paypal-area {
margin-top: 24px;
}
#paypal-button-container {
width: 100%;
}
.paypal-message {
min-height: 24px;
margin-top: 12px;
color: #557887;
text-align: center;
font-size: 13px;
font-weight: 600;
}
.price small {
color: #78909b;
font-size: 13px;
font-weight: 500;
}
/* =========================================================
ROSVIX ADMIN PAYPAL / SUBSCRIPTIONS
========================================================= */
.admin-stat-grid {
margin: 20px 0 25px;
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 14px;
}
.admin-stat-card {
padding: 22px;
background: rgba(249,253,255,.96);
border-radius: 15px;
box-shadow:
0 10px 28px
rgba(27,75,95,.08);
}
.admin-stat-card span {
display: block;
color: #708895;
font-size: 12px;
font-weight: 700;
}
.admin-stat-card strong {
display: block;
margin-top: 8px;
color: #163b4d;
font-size: 31px;
}
.admin-stat-card strong.small-value {
font-size: 22px;
}
.admin-stat-card small {
color: #80949d;
}
.subscription-table {
overflow-x: auto;
}
.subscription-row {
min-width: 1000px;
display: grid;
grid-template-columns:
1.4fr
1.7fr
1fr
.8fr
1fr;
gap: 15px;
align-items: center;
padding: 17px 22px;
border-bottom:
1px solid #e1edf1;
color: #31596a;
}
.subscription-row:last-child {
border-bottom: 0;
}
.subscription-header {
background: #eaf6f9;
color: #15394b;
font-weight: 800;
}
.subscription-row small {
display: block;
margin-top: 4px;
color: #80939c;
}
.subscription-row code {
font-size: 11px;
color: #325d70;
word-break: break-all;
}
.muted-admin {
color: #94a6ae;
font-size: 12px;
}
.admin-refresh-btn {
padding: 9px 13px;
border: 0;
border-radius: 8px;
background: #178da6;
color: white;
font-weight: 700;
cursor: pointer;
}
/* PayPal Settings */
.paypal-admin-grid {
display: grid;
grid-template-columns:
repeat(4,1fr);
gap: 15px;
}
.paypal-admin-card {
padding: 24px;
min-height: 125px;
background:
rgba(249,253,255,.96);
border-radius: 16px;
box-shadow:
0 11px 30px
rgba(27,75,95,.08);
}
.paypal-admin-card.wide {
grid-column: span 2;
}
.paypal-admin-label {
display: block;
margin-bottom: 13px;
color: #738b96;
font-size: 11px;
font-weight: 900;
letter-spacing: 1px;
}
.paypal-admin-card strong {
display: block;
color: #15394b;
font-size: 22px;
}
.paypal-admin-card small {
display: block;
margin-top: 7px;
color: #81959e;
}
.paypal-admin-card code {
color: #345f70;
font-size: 12px;
word-break: break-all;
}
.paypal-connection {
margin-top: 8px;
font-size: 20px;
font-weight: 800;
}
.paypal-connection.good {
color: #2c9559;
}
.paypal-connection.bad {
color: #c64d43;
}
.secret-safe {
color: #2c8a56 !important;
font-size: 16px !important;
}
.secret-error {
color: #c64d43 !important;
font-size: 16px !important;
}
.paypal-security-note {
margin-top: 22px;
padding: 20px;
border-radius: 14px;
background:
rgba(238,248,250,.95);
color: #527482;
}
.paypal-security-note strong {
color: #15394b;
}
.paypal-security-note p {
margin-bottom: 0;
line-height: 1.6;
}
.admin-paypal-error {
margin-top: 20px;
}
@media(max-width:900px) {
.admin-stat-grid {
grid-template-columns:
repeat(2,1fr);
}
.paypal-admin-grid {
grid-template-columns:
repeat(2,1fr);
}
.paypal-admin-card.wide {
grid-column: span 2;
}
}
@media(max-width:550px) {
.admin-stat-grid {
grid-template-columns: 1fr;
}
.paypal-admin-grid {
grid-template-columns: 1fr;
}
.paypal-admin-card.wide {
grid-column: span 1;
}
}
/* =========================================================
ADMIN PROFILE / USER FORMS
========================================================= */
.admin-toolbar {
margin: 18px 0;
display: flex;
justify-content: flex-end;
}
.admin-primary-link,
.admin-primary-btn {
display: inline-block;
padding: 13px 20px;
border: 0;
border-radius: 10px;
background:
linear-gradient(
135deg,
#0c7692,
#20a8bd
);
color: white;
text-decoration: none;
font-weight: 800;
cursor: pointer;
}
.edit-user-btn {
display: inline-block;
padding: 9px 12px;
border-radius: 8px;
background: #287fa0;
color: white;
text-decoration: none;
font-size: 12px;
font-weight: 700;
}
.admin-form-card {
max-width: 750px;
margin-top: 20px;
padding: 30px;
border-radius: 18px;
background:
rgba(249,253,255,.96);
box-shadow:
0 15px 40px
rgba(27,75,95,.10);
}
.admin-form-card form {
display: flex;
flex-direction: column;
gap: 10px;
}
.admin-form-card label {
margin-top: 8px;
color: #365f72;
font-size: 13px;
font-weight: 800;
}
.admin-form-card input {
width: 100%;
padding: 14px 15px;
border:
1px solid
#cbdde5;
border-radius: 10px;
background: white;
color: #17394a;
font-size: 15px;
}
.admin-form-card hr {
width: 100%;
margin: 20px 0 10px;
border: 0;
border-top:
1px solid
#deebef;
}
.admin-form-card h3 {
margin-bottom: 0;
color: #15394b;
}
.form-help {
margin: 3px 0 10px;
color: #78909b;
font-size: 12px;
}
.admin-success {
margin-bottom: 18px;
padding: 13px 15px;
border-radius: 10px;
background: #e2f5e9;
color: #297d4b;
font-weight: 700;
}
.admin-form-columns {
display: grid;
grid-template-columns:
160px 1fr;
gap: 12px;
}
.admin-check-grid {
margin-top: 20px;
display: grid;
grid-template-columns:
repeat(2,1fr);
gap: 12px;
}
.admin-check {
padding: 14px;
display: flex !important;
align-items: center;
gap: 10px;
border-radius: 11px;
background: #eef8fa;
cursor: pointer;
}
.admin-check input {
width: auto;
}
.admin-form-actions {
margin-top: 18px;
display: flex;
gap: 10px;
align-items: center;
}
@media(max-width:600px) {
.admin-form-card {
padding: 22px 16px;
}
.admin-form-columns {
grid-template-columns: 1fr;
}
.admin-check-grid {
grid-template-columns: 1fr;
}
.admin-form-actions {
flex-direction: column;
align-items: stretch;
}
.admin-primary-btn,
.secondary-button {
width: 100%;
text-align: center;
}
}
/* =========================================================
SCORE PAGE LOGIN / SUBSCRIBE FLOW
========================================================= */
.login-first-box,
.new-user-box,
.account-status-box {
margin-top: 24px;
padding: 20px;
border-radius: 15px;
background:
rgba(239,248,250,.95);
text-align: center;
}
.login-first-box h3,
.new-user-box h3 {
margin: 0 0 8px;
color: #173b4c;
font-size: 18px;
}
.login-first-box p,
.new-user-box p,
.account-status-box p {
margin: 0 0 16px;
color: #617d8a;
font-size: 13px;
line-height: 1.55;
}
.account-status-box strong {
display: block;
margin-bottom: 7px;
color: #173b4c;
font-size: 17px;
}
.login-main-btn {
width: 100%;
text-align: center;
}
.choice-divider {
position: relative;
margin: 22px 0;
text-align: center;
}
.choice-divider:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
background: #dce9ed;
}
.choice-divider span {
position: relative;
padding: 0 12px;
background: rgba(249,253,255,.95);
color: #8aa0a9;
font-size: 11px;
font-weight: 800;
}
@media(max-width:600px) {
.login-first-box,
.new-user-box,
.account-status-box {
padding: 17px 14px;
}
.login-first-box .unlock-button,
.new-user-box .secondary-button {
width: 100%;
}
}
/* =========================================================
ROSVIX MOBILE LOGIN CTA
========================================================= */
.mobile-login-cta {
display: none;
}
@media (max-width: 768px) {
.mobile-login-cta {
display: block !important;
width: 100%;
margin-top: 26px;
padding: 20px 16px;
border-radius: 16px;
background: rgba(238,248,250,.98);
text-align: center;
}
.mobile-login-title {
margin-bottom: 7px;
color: #173b4c;
font-size: 18px;
font-weight: 800;
}
.mobile-login-cta p {
margin: 0 0 16px;
color: #637e89;
font-size: 13px;
line-height: 1.5;
}
.mobile-login-button {
display: block !important;
width: 100% !important;
padding: 15px 16px;
border-radius: 11px;
background:
linear-gradient(
135deg,
#087994,
#20aac0
);
color: white !important;
text-decoration: none;
font-size: 14px;
font-weight: 800;
text-align: center;
}
.mobile-login-separator {
margin: 15px 0;
color: #8ba0a9;
font-size: 11px;
font-weight: 800;
}
.mobile-register-button {
display: block !important;
width: 100% !important;
padding: 14px 16px;
border: 1px solid #cbdde5;
border-radius: 11px;
background: white;
color: #17647a !important;
text-decoration: none;
font-size: 14px;
font-weight: 800;
text-align: center;
}
}
/* =========================================================
ROSVIX MOBILE HEADER AUTH
========================================================= */
.mobile-header-actions {
display: flex;
align-items: center;
gap: 10px;
}
.mobile-login-btn {
display: none;
}
@media (max-width: 768px) {
.topbar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
padding: 14px 12px !important;
}
.brand {
min-width: 0;
flex: 1;
}
.brand-sub {
display: none !important;
}
.brand-name {
font-size: 24px !important;
}
.brand-icon {
width: 52px !important;
height: 52px !important;
min-width: 52px !important;
}
/* Desktop navigation stays hidden on mobile */
.nav {
display: none !important;
}
.mobile-header-actions {
display: flex !important;
flex-shrink: 0;
gap: 7px;
}
.mobile-login-btn {
display: flex !important;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 14px;
border: 1px solid #1595aa;
border-radius: 12px;
background: white;
color: #087d96 !important;
text-decoration: none;
font-size: 14px;
font-weight: 800;
white-space: nowrap;
}
.topbar .start-btn {
min-height: 46px !important;
padding: 0 14px !important;
display: flex !important;
align-items: center;
justify-content: center;
font-size: 13px !important;
white-space: nowrap;
}
}
@media (max-width: 390px) {
.brand-name {
font-size: 20px !important;
}
.brand-icon {
width: 46px !important;
height: 46px !important;
min-width: 46px !important;
}
.mobile-login-btn {
padding: 0 10px;
font-size: 13px;
}
.topbar .start-btn {
padding: 0 10px !important;
font-size: 12px !important;
}
}
/* =========================================================
ROSVIX HOME V3
========================================================= */
.rv-home {
margin: 0;
background:
linear-gradient(
180deg,
#08243a 0,
#0a314a 620px,
#edf8fb 620px,
#edf8fb 100%
);
font-family:
Inter,
"Segoe UI",
Arial,
sans-serif;
color: #163b4d;
}
.rv-home *,
.rv-home *::before,
.rv-home *::after {
box-sizing: border-box;
}
.rv-page {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding:
14px 18px
28px;
}
/* =========================================================
HEADER
========================================================= */
.rv-header {
position: relative;
z-index: 100;
min-height: 90px;
padding:
15px 25px;
display: grid;
grid-template-columns:
minmax(250px,1fr)
auto
minmax(250px,1fr);
align-items: center;
gap: 25px;
border-radius: 22px;
background:
rgba(255,255,255,.97);
box-shadow:
0 16px 45px
rgba(1,32,53,.14);
}
.rv-brand {
display: flex;
align-items: center;
gap: 13px;
text-decoration: none;
}
.rv-brand-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 16px;
background:
linear-gradient(
145deg,
#087b98,
#21abc0
);
color: white;
font-size: 27px;
font-weight: 900;
box-shadow:
0 10px 25px
rgba(15,145,168,.20);
}
.rv-brand-copy {
display: flex;
flex-direction: column;
}
.rv-brand-copy strong {
color: #102f45;
font-size: 25px;
font-weight: 900;
letter-spacing: .3px;
}
.rv-brand-copy span {
margin-top: 3px;
color: #728c99;
font-size: 12px;
}
.rv-nav {
height: 100%;
display: flex;
align-items: center;
gap: 32px;
}
.rv-nav > a,
.rv-dropdown-btn {
position: relative;
padding:
31px 0
28px;
border: 0;
background: transparent;
color: #173c50;
text-decoration: none;
font-size: 15px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.rv-nav > a:hover,
.rv-nav > a.active,
.rv-dropdown-btn:hover {
color: #0786a3;
}
.rv-nav > a.active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 7px;
height: 3px;
border-radius: 3px;
background:
linear-gradient(
90deg,
#0787a3,
#22abc0
);
}
/* Dropdown */
.rv-dropdown {
position: relative;
height: 100%;
display: flex;
align-items: center;
}
.rv-dropdown-btn {
display: flex;
gap: 6px;
align-items: center;
}
.rv-dropdown-menu {
position: absolute;
top: calc(100% - 6px);
left: 50%;
width: 220px;
padding: 10px;
transform:
translateX(-50%)
translateY(8px);
border:
1px solid
#dce9ed;
border-radius: 15px;
background: white;
box-shadow:
0 18px 45px
rgba(11,65,86,.16);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
.18s ease;
}
.rv-dropdown:hover .rv-dropdown-menu,
.rv-dropdown:focus-within .rv-dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform:
translateX(-50%)
translateY(0);
}
.rv-dropdown-title {
padding:
10px 12px
8px;
color: #859aa4;
font-size: 10px;
font-weight: 900;
letter-spacing: 1.4px;
}
.rv-dropdown-menu a {
display: block;
padding:
11px 12px;
border-radius: 9px;
color: #294f60;
text-decoration: none;
font-size: 13px;
font-weight: 700;
}
.rv-dropdown-menu a:hover {
background: #edf8fa;
color: #0787a3;
}
/* Header actions */
.rv-header-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
.rv-login-btn {
min-height: 50px;
padding:
0 20px;
display: flex;
align-items: center;
justify-content: center;
border:
1px solid
#cfdee5;
border-radius: 12px;
background: white;
color: #163b4d;
text-decoration: none;
font-size: 14px;
font-weight: 800;
}
.rv-login-btn:hover {
border-color: #1597ac;
color: #0787a3;
}
.rv-start-btn {
min-height: 52px;
padding:
0 21px;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
border-radius: 12px;
background:
linear-gradient(
135deg,
#087894,
#20a8bd
);
color: white !important;
text-decoration: none;
font-size: 14px;
font-weight: 900;
white-space: nowrap;
box-shadow:
0 10px 23px
rgba(13,144,167,.22);
transition:
transform .15s ease,
box-shadow .15s ease;
}
.rv-start-btn:hover {
transform:
translateY(-2px);
box-shadow:
0 15px 30px
rgba(13,144,167,.28);
}
/* =========================================================
HERO
========================================================= */
.rv-hero {
position: relative;
min-height: 515px;
margin-top: 22px;
padding:
42px 40px
38px;
display: grid;
grid-template-columns:
minmax(0,1fr)
minmax(480px,.98fr);
align-items: center;
gap: 45px;
overflow: hidden;
border-radius: 25px;
background:
radial-gradient(
circle at 85% 20%,
rgba(15,176,201,.20),
transparent 28%
),
radial-gradient(
circle at 35% 90%,
rgba(24,151,185,.12),
transparent 35%
),
linear-gradient(
120deg,
#06253b,
#07334c
);
box-shadow:
0 20px 60px
rgba(0,23,40,.18);
}
.rv-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .22;
background-image:
radial-gradient(
circle,
rgba(72,214,234,.8)
1px,
transparent 1px
);
background-size:
55px 55px;
mask-image:
linear-gradient(
90deg,
transparent,
black
);
}
.rv-hero-left,
.rv-hero-right {
position: relative;
z-index: 2;
}
.rv-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding:
10px 15px;
border:
1px solid
rgba(33,176,198,.48);
border-radius: 30px;
color: #48d3e6;
font-size: 11px;
font-weight: 900;
letter-spacing: 1.2px;
}
.rv-eyebrow span {
width: 6px;
height: 6px;
border-radius: 50%;
background: #2bc3d8;
}
.rv-hero h1 {
max-width: 720px;
margin:
28px 0
17px;
color: white;
font-size:
clamp(
42px,
4vw,
66px
);
line-height: 1.08;
letter-spacing: -2px;
font-weight: 900;
}
.rv-hero h1 strong {
display: block;
margin-top: 8px;
color: #28c1da;
font-weight: 900;
}
.rv-hero-text {
max-width: 670px;
color: #c8dae2;
font-size: 17px;
line-height: 1.7;
}
/* scanner */
.rv-scan-box {
width: 100%;
max-width: 760px;
margin-top: 28px;
padding: 8px;
display: grid;
grid-template-columns:
50px
1fr
auto;
align-items: center;
gap: 8px;
border:
4px solid
rgba(255,255,255,.15);
border-radius: 16px;
background: white;
}
.rv-scan-icon {
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: #edf8fa;
font-size: 21px;
}
.rv-scan-box input {
min-width: 0;
height: 50px;
border: 0;
outline: none;
background: transparent;
color: #153c4f;
font-size: 15px;
}
.rv-scan-box input::placeholder {
color: #8ca0a9;
}
.rv-scan-box button {
height: 52px;
padding:
0 23px;
display: flex;
align-items: center;
gap: 9px;
border: 0;
border-radius: 11px;
background:
linear-gradient(
135deg,
#087b98,
#20a9bd
);
color: white;
font-size: 14px;
font-weight: 900;
cursor: pointer;
}
/* trust row */
.rv-trust-row {
margin-top: 22px;
display: flex;
flex-wrap: wrap;
gap:
13px 28px;
color: #d5e4e9;
font-size: 12px;
font-weight: 700;
}
.rv-trust-row div {
display: flex;
align-items: center;
gap: 8px;
}
.rv-trust-row span {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #20bcae;
color: white;
font-size: 11px;
}
/* dashboard visual */
.rv-hero-right {
min-height: 390px;
}
.rv-visual-glow {
position: absolute;
inset:
5%
5%;
border-radius: 50%;
background:
rgba(17,170,202,.22);
filter:
blur(75px);
}
.rv-dashboard-card {
position: relative;
width: 100%;
padding: 22px;
border:
1px solid
rgba(73,202,224,.42);
border-radius: 24px;
background:
linear-gradient(
145deg,
rgba(7,42,65,.97),
rgba(10,55,78,.96)
);
box-shadow:
0 25px 60px
rgba(0,17,31,.34),
inset
0 0 30px
rgba(43,178,204,.07);
transform:
perspective(1400px)
rotateY(-2deg);
}
.rv-dashboard-top {
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 16px;
border-bottom:
1px solid
rgba(255,255,255,.08);
}
.rv-dashboard-brand {
width: 39px;
height: 39px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background:
linear-gradient(
145deg,
#168ba3,
#23b6c7
);
color: white;
font-weight: 900;
}
.rv-dashboard-top strong {
display: block;
color: white;
font-size: 14px;
}
.rv-dashboard-top span {
display: block;
margin-top: 3px;
color: #82a5b4;
font-size: 10px;
}
.rv-dashboard-main {
padding:
22px 0
19px;
display: grid;
grid-template-columns:
155px
1fr;
gap: 20px;
}
.rv-demo-score {
text-align: center;
color: white;
}
.rv-score-ring {
width: 120px;
height: 120px;
margin:
0 auto
8px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
conic-gradient(
#35d7a5 0deg,
#35d7a5 330deg,
rgba(255,255,255,.18) 330deg
);
position: relative;
}
.rv-score-ring::after {
content: "";
position: absolute;
inset: 12px;
border-radius: 50%;
background: #0a314b;
}
.rv-score-ring div {
position: relative;
z-index: 2;
}
.rv-score-ring strong {
color: white;
font-size: 35px;
}
.rv-score-ring span {
color: #9cb8c4;
font-size: 11px;
}
.rv-demo-score p {
margin:
4px 0;
color: #97b4c0;
font-size: 10px;
}
.rv-demo-score > strong {
color: #37d5a6;
font-size: 12px;
}
.rv-chart {
padding: 14px;
border:
1px solid
rgba(255,255,255,.07);
border-radius: 14px;
background:
rgba(255,255,255,.025);
}
.rv-chart-title {
color: #a8c0ca;
font-size: 10px;
font-weight: 700;
}
.rv-chart-bars {
height: 125px;
margin-top: 15px;
display: flex;
align-items: flex-end;
gap: 8px;
border-bottom:
1px solid
rgba(255,255,255,.12);
}
.rv-chart-bars span {
flex: 1;
min-width: 5px;
border-radius:
4px 4px
0 0;
background:
linear-gradient(
180deg,
#23bfd8,
#0b7fa7
);
opacity: .88;
}
.rv-dashboard-metrics {
display: grid;
grid-template-columns:
repeat(4,1fr);
gap: 9px;
}
.rv-dashboard-metrics > div {
padding:
13px 8px;
text-align: center;
border:
1px solid
rgba(255,255,255,.08);
border-radius: 12px;
background:
rgba(255,255,255,.025);
}
.rv-dashboard-metrics span {
display: block;
color: #a8bdc6;
font-size: 9px;
}
.rv-dashboard-metrics strong {
display: block;
margin:
6px 0
3px;
color: #35d5a5;
font-size: 23px;
}
.rv-dashboard-metrics small {
color: #43cba4;
font-size: 8px;
}
.rv-float {
position: absolute;
z-index: 4;
padding:
9px 13px;
border-radius: 30px;
background: white;
color: #275166;
font-size: 10px;
font-weight: 800;
box-shadow:
0 10px 25px
rgba(0,27,47,.19);
}
.rv-float-one {
top: -12px;
right: 40px;
}
.rv-float-two {
right: -6px;
bottom: 35px;
}
/* =========================================================
BENEFITS
========================================================= */
.rv-benefit-strip {
position: relative;
z-index: 5;
margin:
-1px 0
18px;
padding:
26px 32px;
display: grid;
grid-template-columns:
repeat(4,1fr);
gap: 0;
border-radius:
0 0
22px 22px;
background: white;
box-shadow:
0 16px 45px
rgba(19,70,89,.10);
}
.rv-benefit {
min-height: 75px;
padding:
0 26px;
display: flex;
align-items: center;
gap: 16px;
border-right:
1px solid
#dce8ed;
}
.rv-benefit:last-child {
border-right: 0;
}
.rv-benefit-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
background:
linear-gradient(
145deg,
#e2f6fa,
#d6edf3
);
color: #118da6;
font-size: 22px;
font-weight: 900;
}
.rv-benefit strong {
display: block;
color: #0b7b9e;
font-size: 21px;
font-weight: 900;
}
.rv-benefit span {
display: block;
margin-top: 3px;
color: #718a96;
font-size: 11px;
}
/* =========================================================
FEATURES
========================================================= */
.rv-features {
display: grid;
grid-template-columns:
repeat(4,1fr);
gap: 16px;
}
.rv-feature-card {
min-height: 230px;
padding: 24px;
border:
1px solid
#dce8ed;
border-radius: 17px;
background: white;
box-shadow:
0 8px 28px
rgba(30,75,92,.06);
transition:
transform .17s ease,
box-shadow .17s ease;
}
.rv-feature-card:hover {
transform:
translateY(-4px);
box-shadow:
0 16px 35px
rgba(30,75,92,.10);
}
.rv-feature-icon {
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 25px;
font-weight: 900;
}
.rv-feature-icon.seo {
background: #e8f7ea;
color: #38ad52;
}
.rv-feature-icon.security {
background: #e4f0ff;
color: #2e8cdf;
}
.rv-feature-icon.performance {
background: #f1e7ff;
color: #8953dd;
}
.rv-feature-icon.compliance {
background: #fff0d9;
color: #e39422;
}
.rv-feature-card h3 {
margin:
17px 0
8px;
color: #173c4e;
font-size: 17px;
}
.rv-feature-card p {
min-height: 70px;
margin: 0;
color: #728b96;
font-size: 12px;
line-height: 1.55;
}
.rv-feature-card a {
display: inline-block;
margin-top: 15px;
color: #0788a4;
text-decoration: none;
font-size: 12px;
font-weight: 900;
}
/* =========================================================
MEANING
========================================================= */
.rv-meaning {
margin-top: 18px;
padding:
45px 40px;
text-align: center;
border:
1px solid
#dce9ed;
border-radius: 20px;
background:
linear-gradient(
145deg,
#ffffff,
#f3fafc
);
}
.rv-section-label {
color: #1597ad;
font-size: 11px;
font-weight: 900;
letter-spacing: 2px;
}
.rv-meaning h2 {
margin:
10px 0
35px;
color: #163c4e;
font-size: 28px;
}
.rv-meaning-grid {
max-width: 900px;
margin: auto;
display: grid;
grid-template-columns:
repeat(6,1fr);
gap: 18px;
}
.rv-meaning-grid div {
padding: 17px 8px;
border-radius: 12px;
background: white;
box-shadow:
0 5px 18px
rgba(28,74,91,.05);
}
.rv-meaning-grid strong {
display: block;
color: #19a0b6;
font-size: 33px;
}
.rv-meaning-grid span {
display: block;
margin-top: 7px;
color: #526f7b;
font-size: 12px;
font-weight: 800;
}
/* =========================================================
BOTTOM CTA / FOOTER
========================================================= */
.rv-bottom-cta {
margin-top: 18px;
padding:
18px 22px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border:
1px solid
#cfe7ed;
border-radius: 17px;
background:
linear-gradient(
90deg,
#f3fbfd,
#e8f8fb
);
}
.rv-bottom-cta > div {
display: flex;
align-items: center;
gap: 15px;
}
.rv-cta-icon {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
linear-gradient(
145deg,
#087b98,
#20aabd
);
color: white;
}
.rv-bottom-cta p {
margin: 0;
color: #63808d;
font-size: 13px;
}
.rv-bottom-cta > a {
padding:
14px 20px;
border-radius: 11px;
background:
linear-gradient(
135deg,
#087b97,
#20a8bd
);
color: white;
text-decoration: none;
font-size: 13px;
font-weight: 900;
white-space: nowrap;
}
.rv-footer {
padding:
25px 8px
5px;
display: flex;
justify-content: center;
gap: 25px;
color: #82969f;
font-size: 11px;
}
.rv-footer a {
color: #168da5;
text-decoration: none;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:1100px) {
.rv-header {
grid-template-columns:
1fr
auto;
}
.rv-nav {
display: none;
}
.rv-hero {
grid-template-columns:
1fr;
padding:
40px 35px;
}
.rv-hero-right {
max-width: 720px;
width: 100%;
margin: auto;
}
.rv-benefit-strip {
grid-template-columns:
repeat(2,1fr);
}
.rv-benefit:nth-child(2) {
border-right: 0;
}
.rv-benefit:nth-child(-n+2) {
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom:
1px solid
#dce8ed;
}
.rv-features {
grid-template-columns:
repeat(2,1fr);
}
.rv-meaning-grid {
grid-template-columns:
repeat(3,1fr);
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:700px) {
.rv-home {
background:
linear-gradient(
180deg,
#082a42 0,
#082a42 1050px,
#edf8fb 1050px
);
}
.rv-page {
padding:
10px 10px
25px;
}
.rv-header {
min-height: 78px;
padding:
11px 12px;
grid-template-columns:
1fr auto;
gap: 7px;
border-radius: 18px;
}
.rv-brand {
gap: 8px;
}
.rv-brand-icon {
width: 48px;
height: 48px;
border-radius: 13px;
font-size: 23px;
}
.rv-brand-copy strong {
font-size: 20px;
}
.rv-brand-copy span {
display: none;
}
.rv-header-actions {
gap: 5px;
}
.rv-login-btn {
min-height: 44px;
padding:
0 10px;
border-radius: 10px;
font-size: 12px;
}
.rv-start-btn {
min-height: 44px;
padding:
0 10px;
gap: 5px;
border-radius: 10px;
font-size: 11px;
}
.rv-start-btn .rv-bolt {
display: none;
}
.rv-hero {
min-height: auto;
margin-top: 13px;
padding:
28px 20px
30px;
gap: 35px;
border-radius: 20px;
}
.rv-eyebrow {
padding:
9px 12px;
font-size: 9px;
}
.rv-hero h1 {
margin-top: 22px;
font-size: 41px;
line-height: 1.08;
letter-spacing: -1.3px;
}
.rv-hero-text {
font-size: 15px;
line-height: 1.65;
}
.rv-scan-box {
margin-top: 24px;
padding: 9px;
grid-template-columns:
45px
1fr;
border-width: 2px;
}
.rv-scan-box input {
width: 100%;
font-size: 13px;
}
.rv-scan-box button {
grid-column:
1 / -1;
width: 100%;
justify-content: center;
margin-top: 2px;
}
.rv-trust-row {
display: grid;
grid-template-columns:
1fr;
gap: 10px;
font-size: 11px;
}
.rv-hero-right {
min-height: 330px;
}
.rv-dashboard-card {
padding: 15px;
transform: none;
border-radius: 18px;
}
.rv-dashboard-main {
grid-template-columns:
120px
1fr;
gap: 10px;
}
.rv-score-ring {
width: 95px;
height: 95px;
}
.rv-score-ring strong {
font-size: 27px;
}
.rv-chart {
padding: 10px;
}
.rv-chart-bars {
height: 95px;
gap: 4px;
}
.rv-dashboard-metrics {
grid-template-columns:
repeat(2,1fr);
}
.rv-float {
display: none;
}
.rv-benefit-strip {
padding:
22px 14px;
grid-template-columns:
1fr;
border-radius:
0 0
18px 18px;
}
.rv-benefit {
padding:
16px 5px;
border-right: 0;
border-bottom:
1px solid
#dce8ed;
}
.rv-benefit:nth-child(-n+2) {
padding-bottom: 16px;
margin-bottom: 0;
}
.rv-benefit:last-child {
border-bottom: 0;
}
.rv-features {
grid-template-columns:
1fr;
}
.rv-feature-card {
min-height: auto;
}
.rv-meaning {
padding:
35px 18px;
}
.rv-meaning h2 {
font-size: 24px;
}
.rv-meaning-grid {
grid-template-columns:
repeat(2,1fr);
}
.rv-bottom-cta {
padding: 20px;
flex-direction: column;
align-items: stretch;
}
.rv-bottom-cta > a {
text-align: center;
}
.rv-footer {
flex-direction: column;
align-items: center;
gap: 7px;
}
}
/* Very small phones */
@media(max-width:390px) {
.rv-brand-copy strong {
font-size: 18px;
}
.rv-brand-icon {
width: 44px;
height: 44px;
}
.rv-login-btn {
padding:
0 8px;
font-size: 11px;
}
.rv-start-btn {
padding:
0 8px;
font-size: 10px;
}
.rv-hero h1 {
font-size: 36px;
}
}
/* =====================================================
ROSVIX SEO LANDING PAGES
===================================================== */
.seo-page {
margin: 0;
background: #eef8fb;
color: #173d50;
font-family: Inter, "Segoe UI", Arial, sans-serif;
}
.seo-page * {
box-sizing: border-box;
}
.seo-header {
max-width: 1500px;
margin: 16px auto;
padding: 15px 25px;
min-height: 82px;
display: flex;
align-items: center;
gap: 30px;
border-radius: 20px;
background: rgba(255,255,255,.97);
box-shadow:
0 15px 40px
rgba(20,70,90,.09);
}
.seo-logo {
margin-right: auto;
display: flex;
align-items: center;
gap: 12px;
color: #143a4d;
text-decoration: none;
}
.seo-logo-icon {
width: 51px;
height: 51px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background:
linear-gradient(
145deg,
#087c98,
#21abc0
);
color: white;
font-size: 24px;
font-weight: 900;
}
.seo-logo strong {
display: block;
font-size: 22px;
}
.seo-logo span {
display: block;
margin-top: 3px;
color: #78909b;
font-size: 11px;
}
.seo-header nav {
display: flex;
align-items: center;
gap: 27px;
}
.seo-header nav a {
color: #315363;
text-decoration: none;
font-size: 13px;
font-weight: 700;
}
.seo-header nav a:hover {
color: #0788a4;
}
.seo-header-button {
padding: 14px 19px;
border-radius: 11px;
background:
linear-gradient(
135deg,
#087b98,
#20a9bd
);
color: white;
text-decoration: none;
font-size: 13px;
font-weight: 900;
}
.seo-hero {
max-width: 1500px;
margin: auto;
padding: 85px 40px;
text-align: center;
border-radius: 25px;
background:
radial-gradient(
circle at 80% 20%,
rgba(23,177,201,.23),
transparent 30%
),
linear-gradient(
130deg,
#06253b,
#083750
);
box-shadow:
0 20px 55px
rgba(5,39,57,.16);
}
.seo-badge {
display: inline-block;
padding: 9px 16px;
border:
1px solid
rgba(51,198,220,.5);
border-radius: 30px;
color: #3dd0e3;
font-size: 11px;
font-weight: 900;
letter-spacing: 1.3px;
}
.seo-hero h1 {
max-width: 950px;
margin: 25px auto 17px;
color: white;
font-size:
clamp(
40px,
5vw,
67px
);
line-height: 1.08;
letter-spacing: -1.8px;
}
.seo-lead {
max-width: 800px;
margin:
0 auto
30px;
color: #c4d9e2;
font-size: 17px;
line-height: 1.7;
}
.seo-scan-form {
max-width: 850px;
margin: auto;
padding: 8px;
display: grid;
grid-template-columns:
1fr auto;
gap: 8px;
border-radius: 15px;
background: white;
}
.seo-input-wrap {
display: flex;
align-items: center;
gap: 12px;
padding:
0 10px;
}
.seo-input-wrap span {
font-size: 21px;
}
.seo-input-wrap input {
width: 100%;
height: 53px;
border: 0;
outline: 0;
color: #173d50;
font-size: 14px;
}
.seo-scan-form button {
padding:
0 25px;
border: 0;
border-radius: 10px;
background:
linear-gradient(
135deg,
#087c98,
#20a9bd
);
color: white;
font-weight: 900;
cursor: pointer;
}
.seo-trust {
margin-top: 21px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 25px;
color: #b8d0da;
font-size: 11px;
font-weight: 700;
}
.seo-content,
.seo-info,
.seo-faq,
.seo-cta {
max-width: 1500px;
margin:
20px auto
0;
}
.seo-content {
padding:
60px 30px;
}
.seo-section-heading {
max-width: 720px;
margin:
0 auto
40px;
text-align: center;
}
.seo-section-heading > span,
.seo-small-label {
color: #1597ad;
font-size: 10px;
font-weight: 900;
letter-spacing: 1.8px;
}
.seo-section-heading h2 {
margin:
10px 0
10px;
color: #153b4d;
font-size: 34px;
}
.seo-section-heading p {
color: #718a96;
line-height: 1.7;
}
.seo-feature-grid {
display: grid;
grid-template-columns:
repeat(4,1fr);
gap: 16px;
}
.seo-feature {
padding: 27px;
border:
1px solid
#dbe9ed;
border-radius: 17px;
background: white;
box-shadow:
0 8px 28px
rgba(26,72,90,.05);
}
.seo-feature-icon {
width: 53px;
height: 53px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #e5f6f9;
color: #0b91a9;
font-size: 22px;
}
.seo-feature h3 {
margin:
17px 0
9px;
font-size: 17px;
}
.seo-feature p {
margin: 0;
color: #728b96;
font-size: 12px;
line-height: 1.65;
}
.seo-info {
padding: 50px;
display: grid;
grid-template-columns:
1fr 1fr;
gap: 60px;
border:
1px solid
#dbe8ed;
border-radius: 21px;
background: white;
}
.seo-info h2 {
margin:
10px 0
18px;
font-size: 31px;
}
.seo-info p {
color: #68838f;
line-height: 1.75;
font-size: 14px;
}
.seo-checklist {
padding: 28px;
border-radius: 17px;
background: #eff9fb;
}
.seo-checklist h3 {
margin-top: 0;
}
.seo-checklist div {
padding:
11px 0;
display: flex;
gap: 10px;
border-bottom:
1px solid
#dcebef;
color: #55727f;
font-size: 13px;
}
.seo-checklist div:last-child {
border-bottom: 0;
}
.seo-checklist span {
color: #0da08e;
font-weight: 900;
}
.seo-faq {
padding:
60px 30px;
}
.seo-faq article {
max-width: 900px;
margin:
0 auto
10px;
padding: 22px 25px;
border:
1px solid
#dbe8ed;
border-radius: 13px;
background: white;
}
.seo-faq h3 {
margin:
0 0
8px;
font-size: 15px;
}
.seo-faq p {
margin: 0;
color: #718995;
font-size: 13px;
line-height: 1.65;
}
.seo-cta {
padding:
30px 35px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
border-radius: 19px;
background:
linear-gradient(
120deg,
#073049,
#09516a
);
color: white;
}
.seo-cta h2 {
margin:
0 0
6px;
}
.seo-cta p {
margin: 0;
color: #bad1da;
}
.seo-cta a {
padding:
15px 22px;
border-radius: 11px;
background:
linear-gradient(
135deg,
#12a1ba,
#25bfd0
);
color: white;
text-decoration: none;
font-size: 13px;
font-weight: 900;
white-space: nowrap;
}
.seo-footer {
max-width: 1500px;
margin:
30px auto
0;
padding:
25px 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
color: #78909a;
font-size: 11px;
}
.seo-footer strong {
margin-right: 7px;
color: #173d50;
}
.seo-footer div:nth-child(2) {
display: flex;
gap: 18px;
}
.seo-footer a {
color: #52717f;
text-decoration: none;
}
@media(max-width:900px) {
.seo-header nav {
display: none;
}
.seo-feature-grid {
grid-template-columns:
repeat(2,1fr);
}
.seo-info {
grid-template-columns:
1fr;
}
}
@media(max-width:600px) {
.seo-header {
margin:
10px;
padding:
11px;
gap: 8px;
}
.seo-logo span {
display: none;
}
.seo-logo strong {
font-size: 19px;
}
.seo-logo-icon {
width: 45px;
height: 45px;
}
.seo-header-button {
padding:
12px 10px;
font-size: 11px;
}
.seo-hero {
margin:
0 10px;
padding:
55px 20px;
border-radius: 20px;
}
.seo-hero h1 {
font-size: 39px;
}
.seo-lead {
font-size: 15px;
}
.seo-scan-form {
grid-template-columns:
1fr;
}
.seo-scan-form button {
height: 52px;
}
.seo-trust {
flex-direction: column;
gap: 9px;
}
.seo-feature-grid {
grid-template-columns:
1fr;
}
.seo-info {
margin:
10px;
padding:
30px 22px;
gap: 30px;
}
.seo-faq {
padding:
45px 10px;
}
.seo-cta {
margin:
10px;
padding: 25px;
flex-direction: column;
align-items: stretch;
}
.seo-cta a {
text-align: center;
}
.seo-footer {
padding: 25px;
flex-direction: column;
text-align: center;
}
.seo-footer div:nth-child(2) {
flex-wrap: wrap;
justify-content: center;
}
}
/* ROSVIX homepage SEO scanner links */
.rosvix-seo-services {
max-width: 1500px;
margin:
20px auto;
padding:
45px;
display: grid;
grid-template-columns:
.8fr 1.2fr;
gap: 50px;
border:
1px solid
#d8e8ed;
border-radius: 20px;
background: white;
}
.rosvix-seo-services > div:first-child > span {
color: #1496ac;
font-size: 10px;
font-weight: 900;
letter-spacing: 1.7px;
}
.rosvix-seo-services h2 {
margin:
10px 0;
color: #173c4e;
font-size: 29px;
}
.rosvix-seo-services p {
color: #718995;
line-height: 1.65;
}
.rosvix-seo-service-links {
display: grid;
grid-template-columns:
1fr 1fr;
gap: 14px;
}
.rosvix-seo-service-links a {
padding: 25px;
border:
1px solid
#d9e8ec;
border-radius: 15px;
background: #f5fbfc;
text-decoration: none;
transition:
transform .15s ease,
box-shadow .15s ease;
}
.rosvix-seo-service-links a:hover {
transform:
translateY(-3px);
box-shadow:
0 12px 30px
rgba(20,80,100,.08);
}
.rosvix-seo-service-links strong {
display: block;
color: #173e50;
font-size: 17px;
}
.rosvix-seo-service-links span {
display: block;
min-height: 48px;
margin:
9px 0
14px;
color: #748d98;
font-size: 12px;
line-height: 1.55;
}
.rosvix-seo-service-links b {
color: #078aa5;
font-size: 12px;
}
@media(max-width:800px) {
.rosvix-seo-services {
margin:
15px 10px;
padding:
30px 20px;
grid-template-columns:
1fr;
}
.rosvix-seo-service-links {
grid-template-columns:
1fr;
}
}
/* =========================================================
ROSVIX SIGNUP - HORIZONTAL DESKTOP LAYOUT
========================================================= */
@media (min-width: 901px) {
/* Keep signup within one desktop screen */
body:has(.signup-card),
body:has(.signup-shell),
body:has(.signup-page) {
min-height: 100vh;
overflow-y: auto;
}
.signup-page,
.signup-shell {
width: min(1120px, calc(100% - 60px)) !important;
max-width: 1120px !important;
margin: 28px auto !important;
padding: 0 !important;
}
.signup-card {
width: 100% !important;
max-width: 1120px !important;
margin: 0 auto !important;
padding: 30px 34px !important;
display: grid !important;
grid-template-columns: minmax(0, .95fr) minmax(380px, 1.05fr) !important;
column-gap: 42px !important;
align-items: center !important;
border-radius: 24px !important;
}
/* Header/title area */
.signup-card > .eyebrow,
.signup-card > .signup-badge {
grid-column: 1 / -1;
margin-bottom: 8px !important;
}
.signup-card > h1 {
grid-column: 1 / -1;
margin: 4px 0 18px !important;
font-size: 38px !important;
}
/* Plan/offer goes left */
.signup-plan,
.plan-card,
.signup-plan-card {
grid-column: 1 !important;
grid-row: auto !important;
width: 100% !important;
margin: 0 !important;
padding: 25px !important;
align-self: stretch;
}
/* Registration form goes right */
.signup-card form,
.signup-form {
grid-column: 2 !important;
width: 100% !important;
margin: 0 !important;
align-self: center;
}
/* Make form more compact */
.signup-card form label,
.signup-form label {
margin-bottom: 5px !important;
font-size: 12px !important;
}
.signup-card form input,
.signup-card form select,
.signup-form input,
.signup-form select {
min-height: 45px !important;
height: 45px !important;
margin-bottom: 10px !important;
}
.signup-card form button,
.signup-form button {
min-height: 48px !important;
margin-top: 7px !important;
}
/* Reduce oversized spacing in plan */
.signup-plan *,
.plan-card *,
.signup-plan-card * {
margin-top: 0;
}
.signup-plan-scans {
margin: 18px 0 !important;
padding: 15px 18px !important;
}
/* Compact feature list */
.signup-plan ul,
.plan-card ul,
.signup-plan-card ul {
margin: 14px 0 !important;
}
}
/* =========================================================
MOBILE - KEEP CLEAN STACKED LAYOUT
========================================================= */
@media (max-width: 900px) {
.signup-page,
.signup-shell,
.signup-card {
width: calc(100% - 20px) !important;
max-width: 600px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.signup-card {
display: block !important;
}
}
/* =========================================================
ROSVIX UNIFIED AUTH UI
Matches ROSVIX V3 homepage
========================================================= */
.rv-auth-body {
margin: 0;
min-height: 100vh;
background:
radial-gradient(
circle at 80% 15%,
rgba(20,177,202,.14),
transparent 26%
),
linear-gradient(
135deg,
#06253b,
#083650
);
font-family:
Inter,
"Segoe UI",
Arial,
sans-serif;
color: #173d50;
}
.rv-auth-body *,
.rv-auth-body *::before,
.rv-auth-body *::after {
box-sizing: border-box;
}
.rv-auth-page {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding:
14px 18px
28px;
}
/* HEADER */
.rv-auth-header {
min-height: 90px;
padding:
15px 25px;
display: flex;
align-items: center;
gap: 30px;
border-radius: 22px;
background:
rgba(255,255,255,.97);
box-shadow:
0 16px 45px
rgba(1,32,53,.14);
}
.rv-auth-brand {
margin-right: auto;
display: flex;
align-items: center;
gap: 13px;
text-decoration: none;
}
.rv-auth-logo {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
background:
linear-gradient(
145deg,
#087b98,
#21abc0
);
color: white;
font-size: 27px;
font-weight: 900;
box-shadow:
0 10px 25px
rgba(15,145,168,.20);
}
.rv-auth-brand strong {
display: block;
color: #102f45;
font-size: 25px;
font-weight: 900;
}
.rv-auth-brand span {
display: block;
margin-top: 3px;
color: #728c99;
font-size: 12px;
}
.rv-auth-nav {
display: flex;
align-items: center;
gap: 30px;
}
.rv-auth-nav a {
position: relative;
padding:
29px 0
26px;
color: #173c50;
text-decoration: none;
font-size: 14px;
font-weight: 800;
}
.rv-auth-nav a.active {
color: #0786a3;
}
.rv-auth-nav a.active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 6px;
height: 3px;
border-radius: 3px;
background:
linear-gradient(
90deg,
#0787a3,
#22abc0
);
}
/* SIGNUP */
.rv-signup-shell {
min-height:
calc(100vh - 130px);
display: flex;
align-items: center;
justify-content: center;
padding:
24px 0;
}
.rv-signup-card {
width: 100%;
max-width: 1180px;
min-height: 560px;
display: grid;
grid-template-columns:
minmax(0,.95fr)
minmax(430px,1.05fr);
overflow: hidden;
border:
1px solid
rgba(255,255,255,.13);
border-radius: 24px;
background:
white;
box-shadow:
0 25px 65px
rgba(0,20,36,.25);
}
/* LEFT */
.rv-signup-offer {
padding:
42px;
background:
linear-gradient(
145deg,
#effbfc,
#dff3f7
);
border-right:
1px solid
#d5e8ed;
}
.rv-auth-badge {
display: inline-block;
padding:
9px 14px;
border:
1px solid
#77c8d6;
border-radius: 30px;
color: #0788a3;
font-size: 10px;
font-weight: 900;
letter-spacing: 1.3px;
}
.rv-signup-offer h1 {
margin:
20px 0
10px;
color: #153b4d;
font-size: 38px;
line-height: 1.1;
}
.rv-signup-intro {
margin:
0 0
25px;
color: #688490;
font-size: 14px;
line-height: 1.65;
}
.rv-plan-box {
padding:
25px;
border:
1px solid
#cbe5eb;
border-radius: 17px;
background:
rgba(255,255,255,.78);
}
.rv-plan-top {
display: flex;
justify-content: space-between;
gap: 20px;
}
.rv-plan-label {
color: #0b91a8;
font-size: 10px;
font-weight: 900;
letter-spacing: 1.3px;
}
.rv-plan-top h2 {
margin:
7px 0
0;
color: #153b4d;
font-size: 20px;
}
.rv-plan-price {
text-align: right;
}
.rv-plan-price strong {
display: block;
color: #078ca6;
font-size: 28px;
}
.rv-plan-price span {
display: block;
margin-top: 4px;
color: #8298a1;
font-size: 10px;
}
.rv-plan-highlight {
margin:
22px 0;
padding:
15px 17px;
display: flex;
align-items: baseline;
gap: 10px;
border-radius: 12px;
background: white;
}
.rv-plan-highlight strong {
color: #078ca6;
font-size: 27px;
}
.rv-plan-highlight span {
color: #617b87;
font-size: 12px;
font-weight: 700;
}
.rv-plan-features {
display: grid;
grid-template-columns:
1fr 1fr;
gap:
10px 20px;
color: #52727f;
font-size: 12px;
}
.rv-plan-note {
margin-top: 20px;
color: #7e949d;
font-size: 11px;
line-height: 1.5;
}
/* RIGHT */
.rv-signup-form-side {
padding:
42px;
display: flex;
flex-direction: column;
justify-content: center;
}
.rv-form-heading > span {
color: #1597ad;
font-size: 10px;
font-weight: 900;
letter-spacing: 1.4px;
}
.rv-form-heading h2 {
margin:
8px 0
6px;
color: #163c4e;
font-size: 30px;
}
.rv-form-heading p {
margin:
0 0
20px;
color: #7c929c;
font-size: 12px;
}
.rv-form-error {
margin-bottom: 15px;
padding:
12px 14px;
border-radius: 10px;
background: #fff0ea;
color: #9a4d31;
font-size: 12px;
font-weight: 700;
}
.rv-form-grid {
display: grid;
grid-template-columns:
1fr 1fr;
gap:
13px 14px;
}
.rv-field {
min-width: 0;
}
.rv-field-full {
grid-column:
1 / -1;
}
.rv-field label {
display: block;
margin-bottom: 6px;
color: #315466;
font-size: 11px;
font-weight: 800;
}
.rv-field input,
.rv-field select {
width: 100%;
height: 47px;
padding:
0 13px;
border:
1px solid
#ccdde4;
border-radius: 10px;
outline: none;
background: white;
color: #183d4e;
font-size: 13px;
}
.rv-field input:focus,
.rv-field select:focus {
border-color: #1aa1b6;
box-shadow:
0 0 0 3px
rgba(26,161,182,.10);
}
.rv-create-account-btn {
width: 100%;
min-height: 50px;
margin-top: 18px;
border: 0;
border-radius: 11px;
background:
linear-gradient(
135deg,
#087a96,
#20a9bd
);
color: white;
font-size: 14px;
font-weight: 900;
cursor: pointer;
box-shadow:
0 12px 26px
rgba(14,142,165,.19);
}
.rv-form-login {
margin-top: 14px;
text-align: center;
color: #7b929c;
font-size: 11px;
}
.rv-form-login a {
margin-left: 4px;
color: #0788a3;
font-weight: 900;
text-decoration: none;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media(max-width:1000px) {
.rv-signup-card {
grid-template-columns:
1fr;
}
.rv-signup-offer {
border-right: 0;
border-bottom:
1px solid
#d5e8ed;
}
}
@media(max-width:700px) {
.rv-auth-page {
padding:
10px;
}
.rv-auth-header {
min-height: 74px;
padding:
10px 12px;
border-radius: 17px;
}
.rv-auth-logo {
width: 46px;
height: 46px;
border-radius: 12px;
}
.rv-auth-brand strong {
font-size: 19px;
}
.rv-auth-brand span {
display: none;
}
.rv-auth-nav {
gap: 12px;
}
.rv-auth-nav a {
padding:
19px 0;
font-size: 11px;
}
.rv-signup-shell {
padding:
14px 0;
}
.rv-signup-card {
min-height: 0;
border-radius: 19px;
}
.rv-signup-offer,
.rv-signup-form-side {
padding:
27px 20px;
}
.rv-signup-offer h1 {
font-size: 31px;
}
.rv-plan-top {
flex-direction: column;
}
.rv-plan-price {
text-align: left;
}
.rv-plan-features {
grid-template-columns:
1fr;
}
.rv-form-grid {
grid-template-columns:
1fr;
}
.rv-field-full,
.rv-field {
grid-column:
1;
}
}
/* =========================================================
ROSVIX LOGIN V3
========================================================= */
.rv-login-shell {
min-height:
calc(100vh - 130px);
display: flex;
align-items: center;
justify-content: center;
padding:
25px 0;
}
.rv-login-card {
width: 100%;
max-width: 1030px;
min-height: 510px;
display: grid;
grid-template-columns:
minmax(0,.95fr)
minmax(400px,1.05fr);
overflow: hidden;
border-radius: 24px;
background: white;
border:
1px solid
rgba(255,255,255,.12);
box-shadow:
0 25px 65px
rgba(0,20,36,.25);
}
/* LEFT */
.rv-login-side {
padding:
45px;
display: flex;
flex-direction: column;
justify-content: center;
background:
radial-gradient(
circle at 85% 20%,
rgba(36,190,211,.17),
transparent 30%
),
linear-gradient(
145deg,
#073049,
#0a4058
);
color: white;
}
.rv-login-side .rv-auth-badge {
width: fit-content;
border-color:
rgba(62,205,224,.45);
color: #53d6e7;
}
.rv-login-side h1 {
margin:
24px 0
14px;
color: white;
font-size: 38px;
line-height: 1.1;
letter-spacing: -.8px;
}
.rv-login-side > p {
margin:
0 0
30px;
max-width: 430px;
color: #bdd2db;
font-size: 14px;
line-height: 1.7;
}
.rv-login-benefits {
display: grid;
gap: 14px;
}
.rv-login-benefits > div {
display: flex;
align-items: flex-start;
gap: 12px;
}
.rv-login-benefits > div > span {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
background: #22b7aa;
color: white;
font-size: 11px;
font-weight: 900;
}
.rv-login-benefits strong {
display: block;
color: #f4fbfd;
font-size: 13px;
}
.rv-login-benefits small {
display: block;
margin-top: 3px;
color: #8fb1bf;
font-size: 10px;
line-height: 1.4;
}
.rv-login-mini-score {
margin-top: 30px;
padding: 17px 18px;
border:
1px solid
rgba(255,255,255,.08);
border-radius: 14px;
background:
rgba(255,255,255,.035);
}
.rv-login-mini-score > div:first-child {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 15px;
}
.rv-login-mini-score span {
color: #98b5c0;
font-size: 10px;
}
.rv-login-mini-score strong {
color: #3bd4a9;
font-size: 26px;
}
.rv-login-mini-score small {
color: #92acb6;
font-size: 10px;
}
.rv-login-meter {
height: 7px;
margin-top: 12px;
overflow: hidden;
border-radius: 10px;
background:
rgba(255,255,255,.08);
}
.rv-login-meter span {
display: block;
width: 92%;
height: 100%;
border-radius: inherit;
background:
linear-gradient(
90deg,
#25c99f,
#26b7d2
);
}
/* FORM SIDE */
.rv-login-form-side {
padding:
50px;
display: flex;
flex-direction: column;
justify-content: center;
background:
linear-gradient(
145deg,
#ffffff,
#f6fbfc
);
}
.rv-login-form {
margin-top: 5px;
}
.rv-login-form .rv-field {
margin-bottom: 15px;
}
.rv-login-submit {
width: 100%;
min-height: 52px;
margin-top: 8px;
border: 0;
border-radius: 11px;
background:
linear-gradient(
135deg,
#087b98,
#20a9bd
);
color: white;
font-size: 14px;
font-weight: 900;
cursor: pointer;
box-shadow:
0 12px 25px
rgba(14,143,165,.19);
}
.rv-login-links {
margin-top: 18px;
display: flex;
justify-content: center;
gap: 5px;
color: #7b919b;
font-size: 12px;
}
.rv-login-links a {
color: #0789a4;
text-decoration: none;
font-weight: 900;
}
/* =========================================================
RESPONSIVE LOGIN
========================================================= */
@media(max-width:900px) {
.rv-login-card {
max-width: 650px;
grid-template-columns:
1fr;
}
.rv-login-side {
min-height: 330px;
}
}
@media(max-width:700px) {
.rv-login-shell {
padding:
14px 0;
}
.rv-login-card {
min-height: 0;
border-radius: 19px;
}
.rv-login-side,
.rv-login-form-side {
padding:
30px 21px;
}
.rv-login-side h1 {
font-size: 31px;
}
.rv-login-mini-score {
display: none;
}
}
/* ===== ROSVIX GLOBAL COMPACT HEADER ===== */
.rv-auth-header {
min-height: 64px !important;
padding: 8px 20px !important;
border-radius: 18px !important;
}
.rv-auth-logo {
width: 42px !important;
height: 42px !important;
font-size: 20px !important;
border-radius: 11px !important;
}
.rv-auth-brand {
gap: 10px !important;
}
.rv-auth-brand strong {
font-size: 20px !important;
}
.rv-auth-brand span {
margin-top: 1px !important;
font-size: 10px !important;
}
.rv-auth-nav {
gap: 27px !important;
}
.rv-auth-nav a {
padding: 17px 0 15px !important;
font-size: 13px !important;
}
.rv-auth-nav a.active::after {
bottom: 4px !important;
}
/* Reduce space immediately below header */
.rv-signup-shell,
.rv-login-shell {
min-height: calc(100vh - 95px) !important;
padding-top: 15px !important;
}
@media (max-width:700px) {
.rv-auth-header {
min-height: 58px !important;
padding: 7px 10px !important;
}
.rv-auth-logo {
width: 38px !important;
height: 38px !important;
font-size: 18px !important;
}
.rv-auth-brand strong {
font-size: 17px !important;
}
.rv-auth-nav {
gap: 12px !important;
}
.rv-auth-nav a {
padding: 14px 0 !important;
font-size: 11px !important;
}
}
/* =========================================================
ROSVIX ADMIN ANALYTICS
========================================================= */
.rv-admin-stats {
margin: 22px 0;
display: grid;
grid-template-columns:
repeat(7, minmax(120px, 1fr));
gap: 11px;
}
.rv-stat-card {
padding: 17px;
border:
1px solid
#d9e8ed;
border-radius: 14px;
background:
linear-gradient(
145deg,
#ffffff,
#f4fafb
);
box-shadow:
0 7px 20px
rgba(18,65,83,.05);
}
.rv-stat-card span {
display: block;
color: #708995;
font-size: 10px;
font-weight: 800;
}
.rv-stat-card strong {
display: block;
margin:
7px 0
3px;
color: #0b8ba5;
font-size: 27px;
line-height: 1;
font-weight: 900;
}
.rv-stat-card small {
color: #91a1a8;
font-size: 9px;
}
.rv-admin-chart {
margin:
0 0
24px;
padding:
22px 25px;
border:
1px solid
#d9e8ed;
border-radius: 15px;
background: #ffffff;
}
.rv-admin-chart-head span {
color: #1597ad;
font-size: 9px;
font-weight: 900;
letter-spacing: 1.4px;
}
.rv-admin-chart-head h2 {
margin:
5px 0
0;
color: #173d50;
font-size: 19px;
}
.rv-admin-chart-grid {
height: 175px;
margin-top: 20px;
display: grid;
grid-template-columns:
repeat(7, 1fr);
align-items: end;
gap: 16px;
}
.rv-chart-day {
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.rv-chart-number {
margin-bottom: 7px;
color: #567581;
font-size: 10px;
font-weight: 900;
}
.rv-chart-track {
height: 125px;
width: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
}
.rv-chart-fill {
width: 42px;
max-height: 125px;
min-height: 8px;
border-radius:
7px 7px
2px 2px;
background:
linear-gradient(
180deg,
#29bbcf,
#087f9d
);
}
.rv-chart-date {
margin-top: 7px;
color: #8197a0;
font-size: 9px;
}
@media(max-width:1250px) {
.rv-admin-stats {
grid-template-columns:
repeat(4, 1fr);
}
}
@media(max-width:750px) {
.rv-admin-stats {
grid-template-columns:
repeat(2, 1fr);
}
.rv-admin-chart {
overflow-x: auto;
}
.rv-admin-chart-grid {
min-width: 620px;
}
}
/* =========================================================
ROSVIX NESTED SERVICES MENU
========================================================= */
.rv-services-menu {
width: 245px;
padding: 10px;
overflow: visible;
}
.rv-service-category {
position: relative;
}
.rv-category-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 13px 14px;
border-radius: 9px;
color: #294f60;
font-size: 13px;
font-weight: 800;
cursor: pointer;
transition: .15s ease;
}
.rv-category-link:hover,
.rv-service-category:hover > .rv-category-link {
background: #edf8fa;
color: #0787a3;
}
.rv-menu-arrow {
font-size: 20px;
line-height: 1;
color: #8aa0aa;
transition: .15s ease;
}
.rv-service-category:hover .rv-menu-arrow {
color: #0787a3;
transform: translateX(2px);
}
/* Second-level menu */
.rv-submenu {
position: absolute;
top: -10px;
left: calc(100% + 8px);
width: 235px;
padding: 10px;
border: 1px solid #dce9ed;
border-radius: 15px;
background: #ffffff;
box-shadow:
0 18px 45px
rgba(11,65,86,.16);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateX(-6px);
transition:
opacity .16s ease,
transform .16s ease,
visibility .16s ease;
z-index: 10000;
}
/* Invisible bridge between both menus */
.rv-submenu::before {
content: "";
position: absolute;
top: 0;
right: 100%;
width: 12px;
height: 100%;
}
.rv-service-category:hover > .rv-submenu,
.rv-service-category:focus-within > .rv-submenu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(0);
}
.rv-submenu a {
display: block;
padding: 11px 12px;
border-radius: 9px;
color: #294f60;
text-decoration: none;
font-size: 13px;
font-weight: 700;
}
.rv-submenu a:hover {
background: #edf8fa;
color: #0787a3;
}
/* Keep flyout above page content */
.rv-dropdown,
.rv-dropdown-menu,
.rv-service-category,
.rv-submenu {
z-index: 9999;
}
/* =========================================================
ROSVIX TOOL / SERVICE PAGES
========================================================= */
.rv-tool-page {
min-height: 720px;
background:
radial-gradient(circle at 80% 10%, rgba(22,167,190,.10), transparent 32%),
#062f43;
padding: 80px 7% 100px;
}
.rv-tool-hero {
max-width: 850px;
margin: 0 auto 48px;
text-align: center;
}
.rv-tool-badge {
display: inline-block;
border: 1px solid #168ca5;
border-radius: 30px;
padding: 9px 18px;
color: #42d6ee;
font-size: 12px;
font-weight: 800;
letter-spacing: 1.3px;
margin-bottom: 22px;
}
.rv-tool-hero h1 {
margin: 0 0 18px;
color: #fff;
font-size: clamp(36px,5vw,58px);
line-height: 1.05;
}
.rv-tool-hero p {
max-width: 700px;
margin: auto;
color: #a9c5d1;
font-size: 17px;
line-height: 1.7;
}
.rv-tool-workspace {
max-width: 1100px;
margin: auto;
display: grid;
grid-template-columns: 1.5fr .8fr;
gap: 25px;
align-items: start;
}
.rv-tool-card,
.rv-tool-info {
background: #fff;
border-radius: 20px;
padding: 38px;
box-shadow: 0 20px 60px rgba(0,0,0,.16);
}
.rv-tool-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
background: #e8f8fb;
border-radius: 15px;
font-size: 27px;
margin-bottom: 20px;
}
.rv-tool-card h2,
.rv-tool-info h2 {
color: #12394d;
margin: 0 0 12px;
font-size: 25px;
}
.rv-tool-card p,
.rv-tool-info p {
color: #66818e;
line-height: 1.7;
}
.rv-tool-info-label {
color: #169ab3;
font-size: 11px;
font-weight: 800;
letter-spacing: 1.4px;
}
.rv-tool-points {
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid #e3edf0;
}
.rv-tool-points div {
padding: 8px 0;
color: #466875;
font-weight: 600;
font-size: 14px;
}
.rv-coming-soon {
margin-top: 25px;
padding: 24px;
background: #f0f8fa;
border: 1px solid #d7eaee;
border-radius: 12px;
color: #587581;
text-align: center;
}
@media (max-width: 850px) {
.rv-tool-page {
padding: 55px 20px 70px;
}
.rv-tool-workspace {
grid-template-columns: 1fr;
}
.rv-tool-card,
.rv-tool-info {
padding: 27px;
}
}
/* =========================================================
ROSVIX GLOBAL BRAND LOGO
========================================================= */
.rv-brand-icon.rv-brand-logo {
overflow: hidden;
padding: 0;
background: transparent;
}
.rv-brand-icon.rv-brand-logo img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: inherit;
}
/* ==========================================================
ROSVIX PROFILE MENU
========================================================== */
.rv-profile-menu {
position: relative;
}
.rv-profile-btn {
display: flex;
align-items: center;
gap: 8px;
min-height: 46px;
padding: 0 17px;
border: 1px solid #d5e4e9;
border-radius: 13px;
background: #ffffff;
color: #12384c;
font: inherit;
font-weight: 700;
cursor: pointer;
transition: all .2s ease;
}
.rv-profile-btn:hover {
border-color: #159bb1;
box-shadow: 0 8px 24px rgba(18, 56, 76, .08);
}
.rv-profile-avatar {
width: 25px;
height: 25px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #e8f8f9;
color: #159bb1;
font-size: 10px;
}
.rv-profile-chevron {
font-size: 11px;
opacity: .7;
}
.rv-profile-dropdown {
position: absolute;
z-index: 1000;
top: calc(100% + 10px);
right: 0;
width: 190px;
padding: 8px;
background: #ffffff;
border: 1px solid #dbe8ec;
border-radius: 15px;
box-shadow: 0 18px 50px rgba(16, 55, 74, .14);
opacity: 0;
visibility: hidden;
transform: translateY(-5px);
transition: .18s ease;
}
.rv-profile-menu:hover .rv-profile-dropdown,
.rv-profile-menu:focus-within .rv-profile-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.rv-profile-dropdown a {
display: block;
padding: 11px 12px;
border-radius: 9px;
color: #244c60;
font-size: 13px;
font-weight: 650;
text-decoration: none;
}
.rv-profile-dropdown a:hover {
background: #eef9fa;
color: #078fa8;
}
.rv-profile-divider {
height: 1px;
margin: 6px 4px;
background: #e7eef1;
}
.rv-profile-dropdown .rv-logout-link {
color: #a54747;
}
.rv-explore-btn {
background: linear-gradient(135deg, #078ca5, #1aadc0);
}
/* ==========================================================
ROSVIX MULTI-TOOL HOMEPAGE
========================================================== */
.rv-new-hero {
min-height: 610px;
}
.rv-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 30px 0 25px;
}
.rv-primary-hero-btn,
.rv-secondary-hero-btn {
min-height: 52px;
padding: 0 20px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
text-decoration: none;
font-weight: 800;
transition: all .2s ease;
}
.rv-primary-hero-btn {
color: #ffffff;
background: linear-gradient(135deg, #087f96, #19a8b9);
box-shadow: 0 12px 30px rgba(13, 142, 164, .22);
}
.rv-primary-hero-btn:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(13, 142, 164, .27);
}
.rv-secondary-hero-btn {
color: #173c50;
background: rgba(255,255,255,.9);
border: 1px solid #d8e6ea;
}
.rv-secondary-hero-btn:hover {
border-color: #74bec9;
background: #ffffff;
}
.rv-tools-preview {
position: relative;
z-index: 2;
padding: 24px;
border: 1px solid rgba(212, 230, 235, .9);
border-radius: 24px;
background: rgba(255,255,255,.93);
box-shadow: 0 30px 70px rgba(22, 58, 77, .12);
backdrop-filter: blur(18px);
}
.rv-preview-header {
padding-bottom: 18px;
border-bottom: 1px solid #e8eff2;
}
.rv-preview-header strong {
display: block;
color: #173c50;
font-size: 18px;
}
.rv-preview-header span {
display: block;
margin-top: 4px;
color: #78909a;
font-size: 13px;
}
.rv-preview-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 18px;
}
.rv-preview-grid > a,
.rv-preview-grid > div {
min-height: 92px;
padding: 15px;
border: 1px solid #e0eaed;
border-radius: 15px;
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
background: #ffffff;
transition: all .2s ease;
}
.rv-preview-grid > a:hover {
transform: translateY(-2px);
border-color: #9ad0d8;
box-shadow: 0 12px 28px rgba(15, 83, 104, .08);
}
.rv-preview-icon {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #edf8fa;
font-size: 19px;
}
.rv-preview-grid strong {
display: block;
color: #173c50;
font-size: 14px;
}
.rv-preview-grid small {
display: block;
margin-top: 4px;
color: #81939c;
font-size: 11px;
line-height: 16px;
}
.rv-preview-grid > a > span:last-child,
.rv-preview-grid > div > span:last-child {
margin-left: auto;
color: #87a0aa;
font-size: 21px;
}
.rv-preview-coming {
opacity: .65;
}
.rv-platform-categories .rv-benefit {
text-decoration: none;
cursor: pointer;
transition: transform .2s ease, box-shadow .2s ease;
}
.rv-platform-categories a.rv-benefit:hover {
transform: translateY(-3px);
box-shadow: 0 14px 34px rgba(20, 65, 84, .08);
}
.rv-profile-dropdown-label {
padding: 10px 15px 7px;
color: #91a1a9;
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
@media (max-width: 820px) {
.rv-hero-actions {
flex-direction: column;
}
.rv-primary-hero-btn,
.rv-secondary-hero-btn {
width: 100%;
}
.rv-preview-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================
ROSVIX LIGHT THEME OVERRIDE
Visual target: light aqua / white homepage
========================================================== */
.rv-home {
background:
radial-gradient(circle at 12% 18%, rgba(112, 214, 230, .16), transparent 32%),
radial-gradient(circle at 82% 14%, rgba(91, 187, 214, .12), transparent 30%),
linear-gradient(180deg, #f8fcfd 0%, #eef9fc 46%, #f8fcfd 100%);
color: #163b4d;
}
/* PAGE */
.rv-page {
max-width: 1600px;
}
/* HEADER */
.rv-header {
background: rgba(255,255,255,.94);
border: 1px solid #dcebef;
box-shadow: 0 12px 35px rgba(24, 74, 92, .07);
border-radius: 22px;
}
.rv-brand-copy strong {
color: #17384d;
}
.rv-brand-copy span {
color: #6f8894;
}
.rv-nav > a,
.rv-dropdown-btn {
color: #17384d;
}
.rv-nav > a:hover,
.rv-nav > a.active,
.rv-dropdown-btn:hover {
color: #078da5;
}
/* HERO */
.rv-hero,
.rv-new-hero {
background:
radial-gradient(circle at 7% 20%, rgba(42, 188, 210, .12), transparent 27%),
radial-gradient(circle at 65% 16%, rgba(102, 210, 229, .11), transparent 25%),
linear-gradient(135deg, #f5fcfe 0%, #edf9fc 45%, #f9fdfe 100%);
border: 1px solid #dcecf0;
box-shadow: 0 22px 55px rgba(23, 70, 88, .08);
}
.rv-hero::before {
opacity: .12;
}
.rv-eyebrow {
color: #078da5;
background: rgba(239,250,252,.92);
border-color: #b8dfe6;
}
.rv-eyebrow span {
background: #16a4b9;
}
/* HERO TEXT */
.rv-hero h1 {
color: #102f45;
}
.rv-hero h1 strong {
color: #159db2;
}
.rv-hero-text {
color: #587786;
}
/* HERO TOOL PREVIEW */
.rv-tools-preview {
background: rgba(255,255,255,.96);
border: 1px solid #d9e9ed;
box-shadow: 0 24px 55px rgba(21, 65, 83, .10);
}
.rv-preview-header strong,
.rv-preview-grid strong {
color: #16384c;
}
.rv-preview-header span,
.rv-preview-grid small {
color: #748b96;
}
/* TRUST ROW */
.rv-trust-row {
color: #4f7180;
}
.rv-trust-row span {
background: #dff7ee;
color: #1f9f72;
}
/* CATEGORY STRIP */
.rv-benefit-strip {
background: #ffffff;
border: 1px solid #dfecef;
box-shadow: 0 14px 36px rgba(24, 73, 90, .06);
}
.rv-benefit {
color: #16384c;
}
.rv-benefit span {
color: #718a95;
}
/* FEATURE CARDS */
.rv-features,
.rv-popular-tools,
.rv-meaning,
.rosvix-seo-services {
background: transparent;
}
.rv-feature-card,
.rv-popular-card,
.rv-meaning-grid > div,
.rosvix-seo-service-links > a {
background: #ffffff;
border: 1px solid #dcebed;
box-shadow: 0 12px 30px rgba(24, 72, 89, .05);
}
.rv-feature-card h3,
.rv-popular-card h3,
.rv-meaning h2,
.rosvix-seo-services h2 {
color: #16384c;
}
.rv-feature-card p,
.rv-popular-card p,
.rv-meaning,
.rosvix-seo-services p {
color: #6f8792;
}
/* CATEGORY COLOR ACCENTS */
.rv-feature-icon.seo {
background: #eefaf1;
color: #2aa15f;
}
.rv-feature-icon.security {
background: #eef5ff;
color: #3477d4;
}
.rv-feature-icon.performance {
background: #f5efff;
color: #8d54d8;
}
.rv-feature-icon.compliance {
background: #fff4e9;
color: #e68a2e;
}
/* BOTTOM CTA */
.rv-bottom-cta {
background: #eef9fc;
border: 1px solid #d7e9ed;
}
.rv-bottom-cta p {
color: #587684;
}
.rv-bottom-cta a {
background: linear-gradient(135deg, #078da5, #19a9bb);
color: #fff;
}
/* SEO / WEBSITE INTELLIGENCE SECTION */
.rosvix-seo-services {
background:
linear-gradient(135deg, #f5fbfd, #edf8fb);
border: 1px solid #dae9ed;
}
/* FOOTER */
.rv-footer {
color: #6e8792;
border-top: 1px solid #dce9ed;
}
/* REMOVE OLD DARK FEEL */
.rv-dashboard-card,
.rv-chart,
.rv-dashboard-metrics > div {
background: #ffffff;
color: #17384d;
border-color: #dce9ed;
}
.rv-dashboard-card strong,
.rv-dashboard-metrics strong {
color: #159db2;
}
/* BUTTONS */
.rv-start-btn,
.rv-explore-btn,
.rv-primary-hero-btn {
background: linear-gradient(135deg, #078da5, #1aa8ba);
color: #ffffff;
box-shadow: 0 10px 24px rgba(8, 141, 165, .18);
}
.rv-login-btn,
.rv-secondary-hero-btn {
background: #ffffff;
color: #17384d;
border: 1px solid #cfe2e7;
}
/* SOFTER CARD INTERACTION */
.rv-feature-card,
.rv-popular-card,
.rv-benefit,
.rosvix-seo-service-links > a {
transition:
transform .2s ease,
box-shadow .2s ease,
border-color .2s ease;
}
.rv-feature-card:hover,
a.rv-popular-card:hover,
a.rv-benefit:hover,
.rosvix-seo-service-links > a:hover {
transform: translateY(-4px);
border-color: #a8d4dc;
box-shadow: 0 18px 38px rgba(23, 76, 94, .09);
}
/* MOBILE */
@media (max-width: 900px) {
.rv-header {
border-radius: 18px;
}
.rv-hero,
.rv-new-hero {
background:
linear-gradient(180deg, #f6fcfd, #eef9fc);
}
}
/* ==========================================================
ROSVIX CLEAN HOMEPAGE 2026
========================================================== */
.rv-home {
--rv-navy: #102f45;
--rv-text: #385565;
--rv-muted: #748a95;
--rv-teal: #0796ad;
--rv-teal-dark: #067d91;
--rv-bg: #f7fbfc;
--rv-soft: #eef8fa;
--rv-card: #ffffff;
--rv-border: #dce9ed;
--rv-purple: #7452d6;
--rv-blue: #3478d4;
--rv-green: #22a362;
--rv-orange: #ed8a29;
font-family:
Inter,
"Segoe UI",
Arial,
sans-serif;
background:
radial-gradient(circle at 10% 12%, rgba(51, 188, 210, .10), transparent 30%),
radial-gradient(circle at 88% 8%, rgba(83, 183, 215, .09), transparent 29%),
linear-gradient(180deg, #f8fcfd 0%, #f3fafc 45%, #fbfdfe 100%);
}
/* TYPOGRAPHY */
.rv-home h1,
.rv-home h2,
.rv-home h3,
.rv-home strong {
letter-spacing: -.02em;
}
.rv-hero h1 {
font-size: clamp(50px, 5.2vw, 72px);
line-height: 1.04;
font-weight: 760;
letter-spacing: -2.8px;
}
.rv-hero h1 strong {
font-weight: 760;
}
.rv-hero-text {
max-width: 660px;
font-size: 18px;
line-height: 1.7;
}
.rv-nav > a,
.rv-dropdown-btn {
font-size: 15px;
font-weight: 650;
}
/* HOMEPAGE SECTIONS */
.rv-home-section {
padding: 88px 28px;
}
.rv-home-section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 34px;
}
.rv-centered-head {
justify-content: center;
text-align: center;
}
.rv-home-section-head > div {
max-width: 680px;
}
.rv-kicker {
display: block;
margin-bottom: 10px;
color: var(--rv-teal);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.5px;
}
.rv-home-section h2,
.rv-pro-section h2,
.rv-about-section h2 {
margin: 0 0 12px;
color: var(--rv-navy);
font-size: clamp(30px, 3vw, 40px);
line-height: 1.15;
font-weight: 720;
}
.rv-home-section-head p,
.rv-pro-copy p,
.rv-about-section p {
margin: 0;
color: var(--rv-muted);
font-size: 16px;
line-height: 1.7;
}
/* POPULAR TOOLS */
.rv-popular-tools-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.rv-tool-card {
min-height: 250px;
padding: 25px;
display: flex;
gap: 20px;
flex-direction: column;
border: 1px solid var(--rv-border);
border-radius: 20px;
background: var(--rv-card);
text-decoration: none;
box-shadow: 0 12px 32px rgba(24, 72, 89, .05);
transition: transform .2s ease,
box-shadow .2s ease,
border-color .2s ease;
}
a.rv-tool-card:hover {
transform: translateY(-5px);
border-color: #a9d2d9;
box-shadow: 0 18px 42px rgba(24, 72, 89, .10);
}
.rv-tool-card-icon {
width: 54px;
height: 54px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
font-size: 23px;
}
.rv-tool-purple .rv-tool-card-icon {
background: #f2edff;
}
.rv-tool-blue .rv-tool-card-icon {
background: #edf5ff;
}
.rv-tool-green .rv-tool-card-icon {
background: #edf9f1;
}
.rv-tool-orange .rv-tool-card-icon {
background: #fff4e9;
}
.rv-tool-card-label {
color: var(--rv-teal);
font-size: 10px;
font-weight: 800;
letter-spacing: 1.2px;
}
.rv-tool-card h3 {
margin: 7px 0 10px;
color: var(--rv-navy);
font-size: 20px;
font-weight: 700;
}
.rv-tool-card p {
margin: 0 0 16px;
color: var(--rv-muted);
font-size: 14px;
line-height: 1.65;
}
.rv-tool-card strong {
margin-top: auto;
color: var(--rv-teal);
font-size: 14px;
}
.rv-tool-coming {
opacity: .68;
}
/* CATEGORY CARDS */
.rv-category-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.rv-category-card {
padding: 27px;
border: 1px solid var(--rv-border);
border-radius: 21px;
background: #ffffff;
box-shadow: 0 12px 32px rgba(24, 72, 89, .05);
}
.rv-category-icon {
width: 52px;
height: 52px;
margin-bottom: 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
font-size: 21px;
}
.rv-category-purple .rv-category-icon {
background: #f1ecff;
}
.rv-category-blue .rv-category-icon {
background: #ebf4ff;
}
.rv-category-green .rv-category-icon {
background: #eaf8ef;
}
.rv-category-orange .rv-category-icon {
background: #fff2e5;
}
.rv-category-card h3 {
margin: 0 0 9px;
color: var(--rv-navy);
font-size: 19px;
font-weight: 700;
}
.rv-category-card p {
min-height: 67px;
margin: 0 0 20px;
color: var(--rv-muted);
font-size: 14px;
line-height: 1.6;
}
.rv-category-card ul {
list-style: none;
padding: 18px 0 0;
margin: 0;
border-top: 1px solid #edf2f4;
}
.rv-category-card li {
padding: 7px 0;
font-size: 14px;
}
.rv-category-card a,
.rv-category-card span {
color: var(--rv-text);
text-decoration: none;
}
.rv-category-card a:hover {
color: var(--rv-teal);
}
/* PROFESSIONAL WEBSITE INTELLIGENCE */
.rv-pro-section {
margin: 35px 28px 80px;
padding: 58px;
display: grid;
grid-template-columns: minmax(0,1fr) minmax(380px,.8fr);
gap: 60px;
align-items: center;
border: 1px solid #d8e9ed;
border-radius: 28px;
background:
radial-gradient(circle at 85% 15%, rgba(36, 180, 204, .12), transparent 34%),
linear-gradient(135deg, #f3fbfd, #ffffff);
}
.rv-pro-copy {
max-width: 680px;
}
.rv-pro-points {
display: flex;
flex-wrap: wrap;
gap: 12px 22px;
margin: 25px 0 28px;
}
.rv-pro-points span {
color: #456473;
font-size: 14px;
font-weight: 600;
}
.rv-pro-btn {
min-height: 50px;
padding: 0 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 13px;
background: linear-gradient(135deg, #078da5, #19a9bb);
color: #ffffff;
text-decoration: none;
font-size: 14px;
font-weight: 700;
}
.rv-pro-visual {
padding: 26px;
border: 1px solid #dbe8ec;
border-radius: 22px;
background: rgba(255,255,255,.94);
box-shadow: 0 18px 45px rgba(24, 72, 89, .08);
}
.rv-pro-score {
padding: 25px;
text-align: center;
border-bottom: 1px solid #e8f0f2;
}
.rv-pro-score span {
display: block;
color: var(--rv-muted);
font-size: 13px;
}
.rv-pro-score strong {
display: block;
margin: 6px 0;
color: var(--rv-teal);
font-size: 54px;
}
.rv-pro-score small {
color: #1b9b67;
font-weight: 700;
}
.rv-pro-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 18px;
}
.rv-pro-metrics div {
padding: 17px 10px;
text-align: center;
border-radius: 14px;
background: #f7fbfc;
}
.rv-pro-metrics span {
display: block;
color: var(--rv-muted);
font-size: 11px;
}
.rv-pro-metrics strong {
display: block;
margin-top: 5px;
color: var(--rv-navy);
font-size: 22px;
}
/* ABOUT */
.rv-about-section {
max-width: 760px;
margin: 0 auto;
padding: 45px 28px 80px;
text-align: center;
}
/* FOOTER */
.rv-footer {
margin-top: 10px;
padding-top: 28px;
padding-bottom: 30px;
font-size: 13px;
}
/* RESPONSIVE */
@media (max-width: 1100px) {
.rv-popular-tools-grid {
grid-template-columns: repeat(2, 1fr);
}
.rv-category-grid {
grid-template-columns: repeat(2, 1fr);
}
.rv-pro-section {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.rv-home-section {
padding: 60px 18px;
}
.rv-popular-tools-grid,
.rv-category-grid {
grid-template-columns: 1fr;
}
.rv-pro-section {
margin: 20px 18px 60px;
padding: 30px 22px;
}
.rv-pro-metrics {
grid-template-columns: 1fr;
}
.rv-category-card p {
min-height: auto;
}
.rv-hero h1 {
font-size: 46px;
letter-spacing: -2px;
}
.rv-hero-text {
font-size: 16px;
}
}
/* ==========================================================
ROSVIX COMING SOON MENU ITEMS
========================================================== */
.rv-menu-coming {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
color: #7c9099;
font-size: 13px;
font-weight: 600;
cursor: default;
}
.rv-menu-coming small {
padding: 3px 7px;
border-radius: 999px;
background: #f1f6f8;
color: #94a5ad;
font-size: 9px;
font-weight: 800;
letter-spacing: .3px;
white-space: nowrap;
}
/* ==========================================================
ROSVIX SCAM CHECKER
========================================================== */
.rv-scam-help {
margin: 7px 0 12px;
color: #748a95;
font-size: 13px;
line-height: 1.6;
}
.rv-scam-textarea {
width: 100%;
min-height: 190px;
padding: 17px;
resize: vertical;
border: 1px solid #cbdde3;
border-radius: 13px;
background: #fbfdfe;
color: #173c50;
font: inherit;
font-size: 14px;
line-height: 1.65;
outline: none;
box-sizing: border-box;
transition: border-color .2s ease, box-shadow .2s ease;
}
.rv-scam-textarea:focus {
border-color: #159bb1;
box-shadow: 0 0 0 4px rgba(21,155,177,.10);
background: #ffffff;
}
.rv-scam-submit {
margin-top: 14px;
border: 0;
cursor: pointer;
}
.rv-scam-result {
margin-top: 28px;
padding: 22px;
border: 1px solid #dce9ed;
border-radius: 16px;
background: #ffffff;
}
.rv-scam-result-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.rv-scam-result-label {
color: #8498a1;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.2px;
}
.rv-scam-result h3 {
margin: 5px 0 0;
color: #173c50;
font-size: 23px;
}
.rv-scam-score {
display: flex;
align-items: baseline;
color: #173c50;
}
.rv-scam-score strong {
font-size: 34px;
line-height: 1;
}
.rv-scam-score span {
margin-left: 2px;
color: #8ca0a9;
font-size: 13px;
}
.rv-scam-meter {
height: 8px;
margin: 18px 0 22px;
overflow: hidden;
border-radius: 20px;
background: #edf3f5;
}
.rv-scam-meter-fill {
height: 100%;
border-radius: inherit;
}
.rv-risk-safe .rv-scam-meter-fill {
background: #22a362;
}
.rv-risk-low .rv-scam-meter-fill {
background: #d8a128;
}
.rv-risk-medium .rv-scam-meter-fill {
background: #ed8a29;
}
.rv-risk-high .rv-scam-meter-fill {
background: #d94c4c;
}
.rv-scam-findings {
margin-top: 8px;
}
.rv-scam-findings h4 {
margin: 0 0 12px;
color: #173c50;
font-size: 14px;
}
.rv-scam-finding {
display: flex;
gap: 10px;
margin-top: 8px;
padding: 11px 13px;
border-radius: 10px;
background: #f8fbfc;
color: #526b78;
font-size: 13px;
line-height: 1.5;
}
.rv-scam-finding > span {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff0e8;
color: #d66c2b;
font-size: 11px;
font-weight: 900;
}
.rv-scam-clear {
display: flex;
gap: 12px;
padding: 15px;
border-radius: 12px;
background: #edf9f3;
}
.rv-scam-clear > span {
color: #22a362;
font-weight: 900;
}
.rv-scam-clear strong {
color: #23754c;
}
.rv-scam-clear p {
margin: 5px 0 0;
color: #55776a;
font-size: 12px;
line-height: 1.5;
}
.rv-scam-advice {
margin-top: 18px;
padding: 15px;
border-radius: 12px;
background: #eef8fa;
}
.rv-scam-advice strong {
color: #173c50;
font-size: 13px;
}
.rv-scam-advice p {
margin: 6px 0 0;
color: #58717d;
font-size: 13px;
line-height: 1.6;
}
.rv-scam-disclaimer {
margin-top: 15px;
color: #8a9da5;
font-size: 10px;
line-height: 1.5;
}
/* ==========================================================
ROSVIX CHECK LINK RESULTS
========================================================== */
.rv-link-form-row {
display: flex;
gap: 10px;
margin-top: 10px;
}
.rv-link-input {
flex: 1;
min-width: 0;
padding: 15px 17px;
border: 1px solid #cbdde3;
border-radius: 12px;
background: #fbfdfe;
color: #173c50;
font: inherit;
font-size: 15px;
outline: none;
transition: border-color .2s ease, box-shadow .2s ease;
}
.rv-link-input:focus {
border-color: #159bb1;
box-shadow: 0 0 0 4px rgba(21,155,177,.10);
background: #ffffff;
}
.rv-link-submit {
border: 0;
cursor: pointer;
}
.rv-link-result {
margin-top: 28px;
padding: 22px;
border: 1px solid #dce9ed;
border-radius: 16px;
background: #ffffff;
}
.rv-link-summary {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin: 5px 0 22px;
}
.rv-link-summary > div {
padding: 13px;
border-radius: 11px;
background: #f7fbfc;
}
.rv-link-summary span {
display: block;
color: #8398a1;
font-size: 10px;
text-transform: uppercase;
letter-spacing: .7px;
}
.rv-link-summary strong {
display: block;
margin-top: 5px;
color: #173c50;
font-size: 13px;
word-break: break-word;
}
@media (max-width: 700px) {
.rv-link-form-row {
flex-direction: column;
}
.rv-link-summary {
grid-template-columns: 1fr;
}
}
/* ==========================================================
ROSVIX PASSWORD CHECK
========================================================== */
.rv-password-field {
position: relative;
display: flex;
align-items: center;
margin-top: 10px;
}
.rv-password-field .rv-link-input {
padding-right: 75px;
}
.rv-password-toggle {
position: absolute;
right: 8px;
min-width: 55px;
height: 34px;
border: 0;
border-radius: 9px;
background: #edf7f9;
color: #147f94;
font-weight: 700;
cursor: pointer;
}
.rv-password-submit {
margin-top: 14px;
border: 0;
cursor: pointer;
}
.rv-password-summary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 22px;
}
.rv-password-summary > div {
padding: 13px;
border-radius: 11px;
background: #f7fbfc;
}
.rv-password-summary span {
display: block;
color: #8398a1;
font-size: 10px;
text-transform: uppercase;
letter-spacing: .6px;
}
.rv-password-summary strong {
display: block;
margin-top: 5px;
color: #173c50;
font-size: 13px;
}
@media (max-width: 700px) {
.rv-password-summary {
grid-template-columns: repeat(2, 1fr);
}
}
/* ==========================================================
ROSVIX DOMAIN LOOKUP
========================================================== */
.rv-domain-status {
padding: 7px 12px;
border-radius: 999px;
background: #edf9f3;
color: #219160;
font-size: 12px;
font-weight: 700;
}
.rv-domain-section {
margin-top: 25px;
}
.rv-domain-section h4 {
margin: 0 0 13px;
color: #173c50;
font-size: 14px;
}
.rv-domain-row {
display: grid;
grid-template-columns: 70px 1fr;
gap: 15px;
padding: 13px 0;
border-bottom: 1px solid #edf2f4;
}
.rv-domain-row > span {
color: #8499a2;
font-size: 11px;
font-weight: 800;
}
.rv-domain-row > div {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.rv-domain-row code {
padding: 5px 8px;
border-radius: 7px;
background: #f3f8fa;
color: #315564;
font-size: 11px;
word-break: break-all;
}
.rv-domain-info-grid {
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 10px;
}
.rv-domain-info-grid > div {
padding: 14px;
border-radius: 11px;
background: #f7fbfc;
}
.rv-domain-info-grid span {
display: block;
color: #8398a1;
font-size: 10px;
text-transform: uppercase;
}
.rv-domain-info-grid strong {
display: block;
margin-top: 5px;
color: #173c50;
font-size: 13px;
}
@media (max-width:700px) {
.rv-domain-info-grid {
grid-template-columns: 1fr;
}
.rv-domain-row {
grid-template-columns: 1fr;
}
}
/* ==========================================================
ROSVIX WEBSITE REPUTATION
========================================================== */
.rv-reputation-score {
display: flex;
align-items: baseline;
color: #173c50;
}
.rv-reputation-score strong {
font-size: 38px;
line-height: 1;
}
.rv-reputation-score span {
margin-left: 3px;
color: #879ba4;
font-size: 13px;
}
.rv-reputation-meter {
height: 9px;
margin: 20px 0 24px;
overflow: hidden;
border-radius: 20px;
background: #edf3f5;
}
.rv-reputation-meter-fill {
height: 100%;
border-radius: inherit;
background: linear-gradient(
90deg,
#e26b50,
#e6a23c,
#23a96a
);
}
.rv-reputation-positive {
margin-top: 24px;
padding: 17px;
border-radius: 13px;
background: #eff9f4;
}
.rv-reputation-positive h4 {
margin: 0 0 12px;
color: #226c4a;
font-size: 14px;
}
.rv-reputation-positive > div {
display: flex;
gap: 9px;
padding: 7px 0;
color: #4d7162;
font-size: 13px;
line-height: 1.5;
}
.rv-reputation-positive > div > span {
color: #22a362;
font-weight: 900;
}
/* ==========================================================
ROSVIX PASSWORD GENERATOR
========================================================== */
.rv-generator-wrap {
width: 100%;
}
.rv-generated-password-row {
display: flex;
gap: 9px;
margin-top: 10px;
}
.rv-generated-password {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 16px;
font-weight: 700;
letter-spacing: .4px;
}
.rv-password-copy {
min-width: 82px;
border: 1px solid #cfe2e7;
border-radius: 12px;
background: #edf8fa;
color: #087f96;
font-weight: 800;
cursor: pointer;
}
.rv-generator-options {
margin-top: 24px;
display: grid;
gap: 10px;
}
.rv-generator-length {
padding: 15px;
border-radius: 13px;
background: #f7fbfc;
}
.rv-generator-length > label {
display: block;
margin-bottom: 10px;
color: #173c50;
font-size: 13px;
font-weight: 700;
}
.rv-range-row {
display: flex;
align-items: center;
gap: 15px;
}
.rv-range-row input {
flex: 1;
accent-color: #0796ad;
}
.rv-range-row strong {
min-width: 32px;
color: #0796ad;
font-size: 16px;
}
.rv-generator-option {
min-height: 51px;
padding: 0 14px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 11px;
border: 1px solid #e0eaed;
border-radius: 12px;
background: #fff;
cursor: pointer;
}
.rv-generator-option input {
width: 17px;
height: 17px;
accent-color: #0796ad;
}
.rv-generator-option span {
color: #365463;
font-size: 13px;
font-weight: 650;
}
.rv-generator-option small {
color: #8b9da5;
font-size: 10px;
}
.rv-generator-actions {
margin-top: 17px;
}
.rv-generator-actions button {
border: 0;
cursor: pointer;
}
.rv-generator-privacy {
margin-top: 22px;
padding: 15px;
display: flex;
gap: 12px;
border-radius: 13px;
background: #eff9f4;
}
.rv-generator-privacy > span {
font-size: 19px;
}
.rv-generator-privacy strong {
color: #286a4b;
font-size: 13px;
}
.rv-generator-privacy p {
margin: 5px 0 0;
color: #5b796b;
font-size: 12px;
line-height: 1.55;
}
@media (max-width: 600px) {
.rv-generated-password-row {
flex-direction: column;
}
.rv-password-copy {
min-height: 43px;
}
}
/* ==========================================================
ROSVIX QR CODE GENERATOR
========================================================== */
.rv-qr-options {
margin-top: 18px;
}
.rv-qr-options label {
display: block;
margin-bottom: 7px;
color: #173c50;
font-size: 13px;
font-weight: 700;
}
.rv-qr-select {
width: 100%;
min-height: 44px;
padding: 0 12px;
border: 1px solid #cfe0e5;
border-radius: 11px;
background: #ffffff;
color: #315463;
font: inherit;
}
.rv-qr-result {
margin-top: 24px;
padding: 22px;
border: 1px solid #dce9ed;
border-radius: 16px;
background: #ffffff;
}
.rv-qr-preview {
display: flex;
justify-content: center;
padding: 20px;
border-radius: 14px;
background: #f7fbfc;
}
.rv-qr-preview canvas {
max-width: 100%;
height: auto;
}
.rv-qr-actions {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 15px;
}
.rv-qr-actions button {
min-height: 42px;
padding: 0 16px;
}
@media (max-width:600px) {
.rv-qr-actions {
flex-direction: column;
}
}
/* ==========================================================
ROSVIX SCAN PROGRESS EXPERIENCE
========================================================== */
body.rv-scan-running {
overflow: hidden;
}
.rv-scan-overlay {
position: fixed;
inset: 0;
z-index: 99999;
display: none;
align-items: center;
justify-content: center;
padding: 22px;
background:
radial-gradient(circle at 20% 20%, rgba(18, 167, 188, .12), transparent 36%),
rgba(239, 249, 252, .96);
backdrop-filter: blur(10px);
}
.rv-scan-overlay.show {
display: flex;
}
.rv-scan-progress-card {
width: 100%;
max-width: 760px;
max-height: calc(100vh - 44px);
overflow-y: auto;
padding: 32px;
border: 1px solid #d8e9ed;
border-radius: 24px;
background: rgba(255,255,255,.98);
box-shadow:
0 30px 80px rgba(21, 72, 91, .18);
}
.rv-scan-progress-brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 28px;
}
.rv-scan-progress-brand img {
width: 50px;
height: 50px;
object-fit: contain;
}
.rv-scan-progress-brand strong {
display: block;
color: #12384c;
font-size: 20px;
font-weight: 900;
}
.rv-scan-progress-brand span {
display: block;
margin-top: 2px;
color: #77909b;
font-size: 11px;
}
.rv-scan-progress-badge {
display: inline-flex;
padding: 8px 12px;
border: 1px solid #b9e1e7;
border-radius: 999px;
background: #f1fbfc;
color: #078ba3;
font-size: 10px;
font-weight: 900;
letter-spacing: 1.3px;
}
.rv-scan-progress-card h2 {
margin: 18px 0 7px;
color: #12384c;
font-size: clamp(28px, 4vw, 42px);
line-height: 1.12;
font-weight: 900;
}
.rv-scan-target {
margin: 0 0 24px;
color: #62808e;
font-size: 14px;
word-break: break-all;
}
.rv-scan-bar-wrap {
height: 13px;
overflow: hidden;
border-radius: 999px;
background: #e8f1f4;
}
.rv-scan-bar {
width: 4%;
height: 100%;
border-radius: inherit;
background:
linear-gradient(
90deg,
#087f96,
#18aec0
);
transition: width .45s ease;
position: relative;
}
.rv-scan-bar::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
110deg,
transparent 20%,
rgba(255,255,255,.45) 45%,
transparent 70%
);
transform: translateX(-100%);
animation: rvScanShimmer 1.4s infinite;
}
@keyframes rvScanShimmer {
100% {
transform: translateX(100%);
}
}
.rv-scan-percent {
margin-top: 7px;
text-align: right;
color: #078ba3;
font-size: 12px;
font-weight: 800;
}
.rv-scan-status-list {
margin-top: 22px;
display: grid;
gap: 8px;
}
.rv-scan-step {
min-height: 57px;
padding: 10px 12px;
display: grid;
grid-template-columns: 26px 1fr;
align-items: center;
gap: 9px;
border: 1px solid transparent;
border-radius: 12px;
opacity: .48;
transition:
opacity .25s ease,
background .25s ease,
border-color .25s ease;
}
.rv-scan-step.active {
opacity: 1;
border-color: #cbe7eb;
background: #f1fafb;
}
.rv-scan-step.complete {
opacity: .9;
}
.rv-scan-step-icon {
color: #8aa0a9;
font-size: 15px;
font-weight: 900;
text-align: center;
}
.rv-scan-step.active .rv-scan-step-icon {
color: #0796ad;
animation: rvScanPulse 1s infinite;
}
.rv-scan-step.complete .rv-scan-step-icon {
color: #25a86c;
}
@keyframes rvScanPulse {
50% {
opacity: .35;
transform: scale(.82);
}
}
.rv-scan-step strong {
display: block;
color: #294b5b;
font-size: 13px;
font-weight: 800;
}
.rv-scan-step small {
display: block;
margin-top: 2px;
color: #82959d;
font-size: 10px;
line-height: 1.4;
}
.rv-scan-progress-note {
margin-top: 22px;
padding: 13px 15px;
border-radius: 12px;
background: #f7fafb;
color: #708791;
font-size: 11px;
line-height: 1.5;
text-align: center;
}
@media (max-width: 600px) {
.rv-scan-overlay {
padding: 10px;
align-items: flex-start;
}
.rv-scan-progress-card {
margin-top: 10px;
max-height: calc(100vh - 20px);
padding: 22px 17px;
border-radius: 18px;
}
.rv-scan-progress-brand {
margin-bottom: 20px;
}
.rv-scan-progress-brand img {
width: 42px;
height: 42px;
}
.rv-scan-progress-card h2 {
font-size: 28px;
}
.rv-scan-step {
min-height: 52px;
}
}
/* ==========================================================
ROSVIX CONTACT US
========================================================== */
.rv-contact-page {
max-width: 1200px;
margin: 0 auto;
padding: 55px 20px 80px;
}
.rv-contact-hero {
max-width: 760px;
margin: 0 auto 38px;
text-align: center;
}
.rv-contact-hero h1 {
margin: 18px 0 12px;
color: #12384c;
font-size: clamp(36px, 5vw, 54px);
line-height: 1.08;
font-weight: 900;
letter-spacing: -1.5px;
}
.rv-contact-hero p {
max-width: 650px;
margin: 0 auto;
color: #6d8590;
font-size: 16px;
line-height: 1.7;
}
.rv-contact-layout {
display: grid;
grid-template-columns:
minmax(0, 1.6fr)
minmax(300px, .8fr);
gap: 24px;
align-items: start;
}
.rv-contact-form-card,
.rv-contact-info {
border: 1px solid #dce9ed;
border-radius: 20px;
background: #ffffff;
box-shadow:
0 18px 50px
rgba(29, 75, 92, .07);
}
.rv-contact-form-card {
padding: 32px;
}
.rv-contact-form-card h2,
.rv-contact-info h2 {
margin: 0;
color: #12384c;
font-size: 25px;
font-weight: 900;
}
.rv-contact-intro {
margin: 8px 0 27px;
color: #7c919a;
font-size: 13px;
}
.rv-contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.rv-contact-field {
margin-bottom: 19px;
}
.rv-contact-field label {
display: block;
margin-bottom: 7px;
color: #274b5c;
font-size: 13px;
font-weight: 800;
}
.rv-contact-field input,
.rv-contact-field textarea {
width: 100%;
box-sizing: border-box;
padding: 14px 15px;
border: 1px solid #ccdfe5;
border-radius: 11px;
background: #fbfdfe;
color: #173c50;
font: inherit;
font-size: 14px;
outline: none;
transition:
border-color .2s ease,
box-shadow .2s ease,
background .2s ease;
}
.rv-contact-field textarea {
min-height: 180px;
resize: vertical;
line-height: 1.6;
}
.rv-contact-field input:focus,
.rv-contact-field textarea:focus {
border-color: #159bb1;
background: #ffffff;
box-shadow:
0 0 0 4px
rgba(21, 155, 177, .10);
}
.rv-contact-turnstile {
margin: 5px 0 20px;
}
.rv-contact-submit {
min-height: 52px;
padding: 0 22px;
border: 0;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
background:
linear-gradient(
135deg,
#078ca4,
#19a9bb
);
color: #ffffff;
font-weight: 900;
font-size: 14px;
cursor: pointer;
box-shadow:
0 10px 25px
rgba(10, 145, 166, .18);
}
.rv-contact-submit:hover {
transform: translateY(-1px);
}
.rv-contact-alert {
margin-bottom: 24px;
padding: 15px 17px;
border-radius: 12px;
font-size: 13px;
line-height: 1.5;
}
.rv-contact-alert strong,
.rv-contact-alert span {
display: block;
}
.rv-contact-alert span {
margin-top: 3px;
}
.rv-contact-alert.success {
background: #edf9f2;
border: 1px solid #ccebd8;
color: #237449;
}
.rv-contact-alert.error {
background: #fff1ef;
border: 1px solid #f1d4cf;
color: #a64e41;
}
.rv-contact-info {
padding: 30px;
}
.rv-contact-info-label {
margin-bottom: 8px;
color: #0794aa;
font-size: 10px;
font-weight: 900;
letter-spacing: 1.4px;
}
.rv-contact-info > p {
margin: 13px 0 25px;
color: #708791;
font-size: 13px;
line-height: 1.7;
}
.rv-contact-info-item {
padding: 16px 0;
display: grid;
grid-template-columns: 35px 1fr;
gap: 10px;
border-top: 1px solid #e4edef;
}
.rv-contact-info-item > span {
font-size: 18px;
}
.rv-contact-info-item small {
display: block;
color: #8799a1;
font-size: 10px;
font-weight: 700;
}
.rv-contact-info-item strong {
display: block;
margin-top: 3px;
color: #274b5c;
font-size: 13px;
line-height: 1.5;
word-break: break-word;
}
.rv-contact-info-note {
margin-top: 20px;
padding: 14px;
border-radius: 11px;
background: #f3f9fa;
color: #708791;
font-size: 11px;
line-height: 1.6;
}
.rv-contact-honeypot {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
left: -10000px !important;
opacity: 0 !important;
}
@media (max-width: 850px) {
.rv-contact-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.rv-contact-page {
padding:
35px 10px
55px;
}
.rv-contact-grid {
grid-template-columns: 1fr;
gap: 0;
}
.rv-contact-form-card,
.rv-contact-info {
padding: 22px 17px;
}
.rv-contact-submit {
width: 100%;
}
}
/* ==========================================================
ROSVIX USER / PROFILE EXPERIENCE
========================================================== */
/* Verification success CTA */
.rv-verified-start,
.rv-verified-start:link,
.rv-verified-start:visited,
.rv-verified-start:hover,
.rv-verified-start:active {
color: #ffffff !important;
text-decoration: none !important;
}
/* Header user area */
.rv-user-area {
display: flex;
align-items: center;
gap: 13px;
}
.rv-welcome-user {
color: #58717d;
font-size: 13px;
white-space: nowrap;
}
.rv-welcome-user strong {
color: #12394d;
font-weight: 900;
}
/* Larger profile dropdown */
.rv-profile-dropdown {
min-width: 310px;
padding: 10px;
}
.rv-profile-section {
padding: 10px 10px 13px;
}
.rv-profile-section + .rv-profile-section {
border-top: 1px solid #e4edef;
}
.rv-profile-dropdown-label {
margin-bottom: 10px;
color: #0794aa;
font-size: 10px;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
}
.rv-profile-detail {
display: grid;
grid-template-columns: 92px minmax(0,1fr);
gap: 10px;
padding: 6px 0;
align-items: start;
}
.rv-profile-detail span {
color: #8599a2;
font-size: 11px;
}
.rv-profile-detail strong {
color: #274b5c;
font-size: 12px;
font-weight: 800;
text-align: right;
word-break: break-word;
}
.rv-profile-email {
font-size: 11px !important;
}
.rv-profile-status-active {
color: #23935d !important;
}
.rv-profile-dropdown .rv-logout-link {
margin-top: 5px;
padding: 11px 12px;
display: block;
border-top: 1px solid #e4edef;
color: #b04e45;
font-size: 12px;
font-weight: 800;
text-decoration: none;
}
/* Responsive */
@media (max-width: 1050px) {
.rv-welcome-user {
display: none;
}
}
/* ROSVIX USER PROFILE FINAL */
.rv-verified-start,
.rv-verified-start:link,
.rv-verified-start:visited,
.rv-verified-start:hover,
.rv-verified-start:active {
color: #ffffff !important;
text-decoration: none !important;
}
.rv-user-area {
display: flex;
align-items: center;
gap: 14px;
}
.rv-welcome-user {
color: #607985;
font-size: 13px;
white-space: nowrap;
}
.rv-welcome-user strong {
color: #12394d;
font-weight: 900;
}
.rv-profile-menu {
position: relative;
}
.rv-profile-dropdown {
min-width: 330px;
padding: 10px;
}
.rv-profile-section {
padding: 10px 10px 13px;
}
.rv-profile-section + .rv-profile-section {
border-top: 1px solid #e3edef;
}
.rv-profile-dropdown-label {
margin-bottom: 10px;
color: #078fa7;
font-size: 10px;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
}
.rv-profile-detail {
display: grid;
grid-template-columns: 95px minmax(0,1fr);
align-items: start;
gap: 12px;
padding: 6px 0;
}
.rv-profile-detail span {
color: #8599a2;
font-size: 11px;
}
.rv-profile-detail strong {
color: #274b5c;
font-size: 12px;
font-weight: 800;
text-align: right;
word-break: break-word;
}
.rv-profile-email {
font-size: 11px !important;
}
.rv-profile-status-active {
color: #24935e !important;
}
.rv-profile-dropdown .rv-logout-link {
display: block;
margin-top: 5px;
padding: 12px;
border-top: 1px solid #e3edef;
color: #b24f46;
font-size: 12px;
font-weight: 800;
text-decoration: none;
}
@media (max-width: 1100px) {
.rv-welcome-user {
display: none;
}
}
/* ROSVIX Login / Sign Up actions */
.rv-auth-actions {
display: flex;
align-items: center;
gap: 10px;
}
.rv-signup-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 22px;
border-radius: 12px;
border: 1px solid #1597ad;
background: #1597ad;
color: #ffffff !important;
font-weight: 700;
text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease;
}
.rv-signup-btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(21,151,173,.18);
}
/* ==========================================================
ROSVIX COMPACT SERVICE PAGES
Keep actual tool visible above the fold
========================================================== */
.rv-tool-page {
padding-top: 30px;
padding-bottom: 70px;
}
.rv-tool-hero {
margin-bottom: 24px;
}
.rv-tool-badge {
padding: 7px 16px;
margin-bottom: 12px;
}
.rv-tool-hero h1 {
margin-bottom: 10px;
font-size: clamp(32px, 4vw, 46px);
}
.rv-tool-hero p {
font-size: 15px;
line-height: 1.55;
}
.rv-tool-workspace {
margin-top: 0;
}
/* Tablet / mobile */
@media (max-width: 850px) {
.rv-tool-page {
padding: 25px 20px 55px;
}
.rv-tool-hero {
margin-bottom: 20px;
}
.rv-tool-hero h1 {
font-size: 34px;
}
}
/* ==========================================================
ROSVIX SERVICE PAGES - ABOVE THE FOLD FINAL TUNING
========================================================== */
@media (min-width: 851px) {
.rv-tool-page {
padding-top: 18px;
padding-bottom: 55px;
}
.rv-tool-hero {
margin-bottom: 16px;
}
.rv-tool-badge {
padding: 6px 14px;
margin-bottom: 8px;
font-size: 10px;
}
.rv-tool-hero h1 {
margin: 0 0 7px;
font-size: clamp(30px, 3vw, 40px);
line-height: 1.05;
}
.rv-tool-hero p {
max-width: 720px;
font-size: 14px;
line-height: 1.45;
}
.rv-tool-workspace {
max-width: 1120px;
gap: 20px;
}
.rv-tool-card,
.rv-tool-info {
padding: 24px;
border-radius: 18px;
}
.rv-tool-icon {
width: 48px;
height: 48px;
margin-bottom: 12px;
font-size: 22px;
}
.rv-tool-card h2,
.rv-tool-info h2 {
margin-bottom: 7px;
font-size: 22px;
}
.rv-tool-card > p,
.rv-tool-info > p {
margin-top: 0;
margin-bottom: 14px;
line-height: 1.5;
}
.rv-tool-points {
margin-top: 16px;
padding-top: 12px;
}
.rv-tool-points div {
padding: 5px 0;
}
}
/* ==========================================================
ROSVIX SERVICE INPUT HEIGHT TUNING
========================================================== */
@media (min-width: 851px) {
.rv-scam-textarea {
min-height: 150px !important;
height: 150px;
resize: vertical;
}
}
/* ==========================================================
ROSVIX CONTACT PAGE - COMPACT TWO COLUMN LAYOUT
========================================================== */
.rv-contact-page {
padding-top: 28px;
}
.rv-contact-layout {
align-items: start;
}
.rv-contact-form-card,
.rv-contact-info {
margin-top: 0;
}
.rv-contact-info {
position: sticky;
top: 24px;
}
@media (max-width: 850px) {
.rv-contact-info {
position: static;
}
}
/* =========================================================
ROSVIX ONLINE SAFETY - COMPACT SERVICE LAYOUT
========================================================= */
.rv-tool-info-service-title {
margin: 8px 0 10px;
font-size: 28px;
line-height: 1.15;
color: #07384d;
}
.rv-tool-info-service-intro {
margin: 0;
font-size: 14px;
line-height: 1.65;
color: #607d8b;
}
.rv-tool-info-divider {
height: 1px;
background: #dbe8ec;
margin: 22px 0;
}
/* Bring tool workspace up when hero is removed */
.rv-tool-page > .rv-tool-workspace:first-child {
padding-top: 32px;
}
/* Mobile */
@media (max-width: 800px) {
.rv-tool-info-service-title {
font-size: 24px;
}
.rv-tool-page > .rv-tool-workspace:first-child {
padding-top: 20px;
}
}
/* ==========================================================
ROSVIX WEBSITE MONITORING
========================================================== */
.rv-monitor-workspace {
padding-top: 32px;
}
.rv-monitor-add-form {
margin-top: 24px;
}
.rv-monitor-add-form label {
display: block;
margin-bottom: 8px;
color: #274b5c;
font-size: 13px;
font-weight: 800;
}
.rv-monitor-add-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
}
.rv-monitor-add-row input {
min-height: 48px;
padding: 0 15px;
border: 1px solid #ccdfe5;
border-radius: 11px;
background: #fbfdfe;
color: #173c50;
font: inherit;
}
.rv-monitor-list {
margin-top: 28px;
display: grid;
gap: 14px;
}
.rv-monitor-item {
padding: 18px;
border: 1px solid #dce9ed;
border-radius: 15px;
background: #fafdfe;
}
.rv-monitor-main strong,
.rv-monitor-main small {
display: block;
}
.rv-monitor-main strong {
color: #153c50;
font-size: 16px;
}
.rv-monitor-main small {
margin-top: 3px;
color: #81959e;
word-break: break-all;
}
.rv-monitor-status {
margin: 12px 0;
font-weight: 800;
}
.rv-monitor-up {
color: #168b5d;
}
.rv-monitor-down {
color: #c54848;
}
.rv-monitor-unknown {
color: #82949c;
}
.rv-monitor-metrics {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 10px;
margin-top: 14px;
}
.rv-monitor-metrics div {
padding: 11px;
border-radius: 10px;
background: #ffffff;
border: 1px solid #e1ecef;
}
.rv-monitor-metrics small,
.rv-monitor-metrics strong {
display: block;
}
.rv-monitor-metrics small {
color: #8a9ba2;
font-size: 10px;
}
.rv-monitor-metrics strong {
margin-top: 4px;
color: #274b5c;
font-size: 12px;
}
.rv-monitor-delete {
margin-top: 14px;
padding: 7px 12px;
border: 1px solid #efd0d0;
border-radius: 8px;
background: #fff6f6;
color: #b14a4a;
cursor: pointer;
}
.rv-monitor-empty {
margin-top: 28px;
padding: 22px;
border-radius: 12px;
background: #f2f8fa;
color: #64808c;
text-align: center;
}
.rv-monitor-empty p {
margin-bottom: 0;
}
@media (max-width: 850px) {
.rv-monitor-add-row {
grid-template-columns: 1fr;
}
.rv-monitor-metrics {
grid-template-columns: 1fr 1fr;
}
}
/* Website Monitoring Actions */
.rv-monitor-actions {
display: flex;
align-items: center;
gap: 9px;
margin-top: 14px;
}
.rv-monitor-actions form {
margin: 0;
}
.rv-monitor-check {
padding: 8px 14px;
border: 0;
border-radius: 8px;
background: #139bb0;
color: #ffffff;
font-weight: 800;
cursor: pointer;
}
.rv-monitor-check:hover {
background: #0b879b;
}
.rv-monitor-delete {
margin-top: 0;
}
.rv-monitor-interval {
min-height: 48px;
padding: 0 12px;
border: 1px solid #ccdfe5;
border-radius: 11px;
background: #ffffff;
color: #274b5c;
font: inherit;
font-size: 13px;
cursor: pointer;
}
.rv-monitor-add-row {
grid-template-columns:
minmax(260px, 1fr)
minmax(170px, auto)
auto;
}
.rv-monitor-metrics {
grid-template-columns:
repeat(5, minmax(0, 1fr));
}
@media (max-width: 850px) {
.rv-monitor-add-row {
grid-template-columns: 1fr;
}
.rv-monitor-metrics {
grid-template-columns: 1fr 1fr;
}
}
/* ==========================================================
ROSVIX ADMIN CONTROL PANEL NAVIGATION
========================================================== */
.rv-admin-nav-link {
color: #087f96 !important;
font-weight: 900 !important;
}
.rv-admin-nav-link:hover {
color: #0ba0b9 !important;
}
/* ==========================================================
ROSVIX SHARED MOBILE NAVIGATION
========================================================== */
.rv-mobile-menu-toggle,
.rv-mobile-menu {
display: none;
}
@media (max-width: 850px) {
/* Hide desktop navigation */
.rv-nav {
display: none !important;
}
/* Keep header compact */
.rv-header {
position: relative;
}
/* Hamburger button */
.rv-mobile-menu-toggle {
display: flex;
width: 44px;
height: 44px;
padding: 10px;
border: 1px solid rgba(16, 47, 69, 0.14);
border-radius: 12px;
background: #ffffff;
flex-direction: column;
justify-content: center;
gap: 5px;
cursor: pointer;
flex-shrink: 0;
}
.rv-mobile-menu-toggle span {
display: block;
width: 100%;
height: 2px;
border-radius: 2px;
background: #102f45;
transition: transform .2s ease, opacity .2s ease;
}
/* Hamburger -> X */
.rv-mobile-menu-toggle.is-open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.rv-mobile-menu-toggle.is-open span:nth-child(2) {
opacity: 0;
}
.rv-mobile-menu-toggle.is-open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Mobile dropdown */
.rv-mobile-menu {
display: none;
position: absolute;
top: calc(100% + 10px);
left: 12px;
right: 12px;
z-index: 9999;
padding: 12px;
background: #ffffff;
border: 1px solid rgba(16, 47, 69, 0.12);
border-radius: 18px;
box-shadow: 0 18px 45px rgba(16, 47, 69, 0.16);
}
.rv-mobile-menu.is-open {
display: block;
}
.rv-mobile-menu > a,
.rv-mobile-services > summary {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 13px 14px;
color: #102f45;
font-weight: 700;
text-decoration: none;
border-radius: 10px;
cursor: pointer;
list-style: none;
}
.rv-mobile-services > summary::-webkit-details-marker {
display: none;
}
.rv-mobile-menu > a:hover,
.rv-mobile-services > summary:hover {
background: #eef9fc;
}
.rv-mobile-services[open] > summary {
background: #eef9fc;
}
.rv-mobile-service-group {
margin: 6px 4px 12px;
padding: 12px;
background: #f7fbfc;
border-radius: 12px;
}
.rv-mobile-service-group strong {
display: block;
margin-bottom: 7px;
color: #159db5;
font-size: 13px;
}
.rv-mobile-service-group a {
display: block;
padding: 9px 10px;
color: #294b60;
font-size: 14px;
font-weight: 600;
text-decoration: none;
border-radius: 8px;
}
.rv-mobile-service-group a:hover {
background: #ffffff;
color: #159db5;
}
}
@media (min-width: 851px) {
.rv-mobile-menu-toggle,
.rv-mobile-menu {
display: none !important;
}
}
/* ==========================================================
ROSVIX MOBILE HEADER FINAL ALIGNMENT
========================================================== */
@media (max-width: 850px) {
.rv-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
}
.rv-brand {
flex: 1 1 auto;
min-width: 0;
}
.rv-header-actions {
display: flex !important;
align-items: center !important;
flex: 0 0 auto;
gap: 6px !important;
}
.rv-mobile-menu-toggle {
order: 3;
flex: 0 0 44px;
}
.rv-mobile-menu {
top: calc(100% + 8px);
}
}
/* Extra-small phones */
@media (max-width: 430px) {
.rv-header {
padding: 10px !important;
}
.rv-brand-icon {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
}
.rv-brand-copy strong {
font-size: 18px !important;
}
.rv-mobile-menu-toggle {
width: 42px;
height: 42px;
flex-basis: 42px;
}
.rv-login-btn {
min-height: 42px !important;
padding: 0 10px !important;
font-size: 12px !important;
}
}
/* ==========================================================
ROSVIX EMAIL VERIFICATION WARNING
========================================================== */
.rv-email-verification-warning {
max-width: 1200px;
margin: 14px auto 0;
padding: 13px 18px;
border: 1px solid #f0d59c;
border-radius: 14px;
background: #fff8e8;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
box-sizing: border-box;
}
.rv-email-verification-warning-text {
display: flex;
flex-direction: column;
gap: 3px;
}
.rv-email-verification-warning-text strong {
color: #8a5a12;
font-size: 14px;
}
.rv-email-verification-warning-text span {
color: #765f37;
font-size: 13px;
}
.rv-email-verification-warning-btn {
flex: 0 0 auto;
padding: 9px 14px;
border-radius: 9px;
background: #d99120;
color: #fff !important;
text-decoration: none;
font-size: 13px;
font-weight: 800;
}
.rv-email-verification-warning-btn:hover {
opacity: .9;
}
@media (max-width: 700px) {
.rv-email-verification-warning {
margin: 10px 12px 0;
flex-direction: column;
align-items: flex-start;
}
.rv-email-verification-warning-btn {
width: 100%;
text-align: center;
box-sizing: border-box;
}
}
/* ==========================================================
ROSVIX LEGAL PAGES
========================================================== */
.rv-legal-page {
max-width: 1050px;
margin: 0 auto;
padding: 52px 22px 70px;
}
.rv-legal-card {
background: #ffffff;
border: 1px solid #dce8ec;
border-radius: 20px;
padding: 42px;
box-shadow: 0 18px 50px rgba(20,60,80,.08);
}
.rv-legal-card h1 {
margin: 12px 0 8px;
color: #143c50;
font-size: 38px;
}
.rv-legal-card h2 {
margin: 30px 0 10px;
color: #143c50;
font-size: 21px;
}
.rv-legal-card p,
.rv-legal-card li {
color: #586f7a;
font-size: 15px;
line-height: 1.8;
}
.rv-legal-card ul {
padding-left: 24px;
}
.rv-legal-card a {
color: #118da5;
font-weight: 700;
}
.rv-legal-updated {
margin-bottom: 28px;
color: #8299a3 !important;
font-size: 13px !important;
}
.rv-footer-links {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.rv-footer-links a {
color: inherit;
text-decoration: none;
}
.rv-footer-links a:hover {
text-decoration: underline;
}
@media (max-width: 700px) {
.rv-legal-page {
padding: 28px 14px 50px;
}
.rv-legal-card {
padding: 25px 20px;
border-radius: 16px;
}
.rv-legal-card h1 {
font-size: 30px;
}
}
/* ==========================================================
ROSVIX TOOL EDUCATIONAL CONTENT
========================================================== */
.rv-tool-guide {
margin-top: 34px;
padding-top: 30px;
border-top: 1px solid #dce8ec;
}
.rv-tool-guide > h2 {
margin: 0 0 10px;
color: #143c50;
font-size: 25px;
line-height: 1.3;
}
.rv-tool-guide > p {
max-width: 850px;
margin: 0 0 24px;
color: #607984;
font-size: 14px;
line-height: 1.75;
}
.rv-guide-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.rv-guide-item {
padding: 20px;
background: #f8fbfc;
border: 1px solid #dce8ec;
border-radius: 14px;
}
.rv-guide-item h3 {
margin: 0 0 8px;
color: #143c50;
font-size: 16px;
}
.rv-guide-item p {
margin: 0;
color: #607984;
font-size: 13px;
line-height: 1.7;
}
@media (max-width: 700px) {
.rv-guide-grid {
grid-template-columns: 1fr;
}
.rv-tool-guide {
margin-top: 26px;
padding-top: 24px;
}
.rv-tool-guide > h2 {
font-size: 22px;
}
}
/* ==========================================================
ROSVIX ABOUT PAGE
========================================================== */
.rv-about-page {
max-width: 1120px;
margin: 0 auto;
padding: 58px 22px 75px;
}
.rv-about-hero {
max-width: 900px;
margin: 0 auto 52px;
text-align: center;
}
.rv-about-hero h1 {
margin: 14px 0 18px;
color: #143c50;
font-size: 46px;
line-height: 1.15;
}
.rv-about-hero p {
max-width: 820px;
margin: 8px auto;
color: #607984;
font-size: 17px;
line-height: 1.75;
}
.rv-about-section {
margin-top: 34px;
padding: 38px;
border: 1px solid #dce8ec;
border-radius: 20px;
background: #ffffff;
}
.rv-about-heading {
margin-bottom: 26px;
}
.rv-about-heading h2 {
margin: 10px 0 0;
color: #143c50;
font-size: 29px;
}
.rv-about-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 18px;
}
.rv-about-card {
padding: 24px;
border-radius: 15px;
border: 1px solid #dce8ec;
background: #f8fbfc;
}
.rv-about-card h3,
.rv-about-principle-grid h3 {
margin: 0 0 10px;
color: #143c50;
font-size: 18px;
}
.rv-about-card p,
.rv-about-copy p,
.rv-about-principle-grid p {
color: #607984;
font-size: 14px;
line-height: 1.75;
}
.rv-about-principle-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 18px;
}
.rv-about-principle-grid > div {
padding: 22px;
border-radius: 14px;
background: #f8fbfc;
border: 1px solid #dce8ec;
}
.rv-about-copy {
max-width: 900px;
}
.rv-about-cta {
margin-top: 34px;
padding: 34px 38px;
border-radius: 20px;
background: #f4fbfd;
border: 1px solid #cfe5ea;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}
.rv-about-cta h2 {
margin: 9px 0;
color: #143c50;
}
.rv-about-cta p {
margin: 0;
color: #607984;
}
.rv-about-primary {
flex: 0 0 auto;
padding: 13px 20px;
border-radius: 10px;
background: #148fa8;
color: #fff !important;
font-weight: 800;
text-decoration: none;
}
@media (max-width: 760px) {
.rv-about-page {
padding: 36px 14px 55px;
}
.rv-about-hero h1 {
font-size: 34px;
}
.rv-about-grid,
.rv-about-principle-grid {
grid-template-columns: 1fr;
}
.rv-about-section {
padding: 25px 20px;
}
.rv-about-cta {
flex-direction: column;
align-items: flex-start;
}
.rv-about-primary {
width: 100%;
text-align: center;
box-sizing: border-box;
}
}
/* ==========================================================
ROSVIX GUIDES & RESOURCES
========================================================== */
.rv-guides-page {
max-width: 1120px;
margin: 0 auto;
padding: 58px 22px 78px;
}
.rv-guides-hero {
max-width: 850px;
margin: 0 auto 58px;
text-align: center;
}
.rv-guides-hero h1 {
margin: 14px 0 18px;
color: #143c50;
font-size: 46px;
line-height: 1.15;
}
.rv-guides-hero p {
max-width: 790px;
margin: 8px auto;
color: #607984;
font-size: 17px;
line-height: 1.75;
}
.rv-guides-section {
margin-top: 48px;
}
.rv-guides-heading {
margin-bottom: 20px;
}
.rv-guides-heading h2 {
margin: 8px 0 0;
color: #143c50;
font-size: 28px;
line-height: 1.3;
}
.rv-guides-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.rv-guide-card {
display: flex;
gap: 17px;
padding: 24px;
border: 1px solid #dce8ec;
border-radius: 17px;
background: #ffffff;
text-decoration: none;
transition:
transform .18s ease,
box-shadow .18s ease,
border-color .18s ease;
}
.rv-guide-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(20, 60, 80, .08);
border-color: #c4dce5;
}
.rv-guide-card > span {
flex: 0 0 auto;
font-size: 28px;
line-height: 1;
}
.rv-guide-card h3 {
margin: 0 0 8px;
color: #143c50;
font-size: 18px;
line-height: 1.35;
}
.rv-guide-card p {
margin: 0 0 12px;
color: #607984;
font-size: 14px;
line-height: 1.7;
}
.rv-guide-card strong {
color: #176d87;
font-size: 13px;
}
@media (max-width: 760px) {
.rv-guides-page {
padding: 38px 16px 60px;
}
.rv-guides-hero {
margin-bottom: 42px;
}
.rv-guides-hero h1 {
font-size: 34px;
}
.rv-guides-hero p {
font-size: 15px;
}
.rv-guides-grid {
grid-template-columns: 1fr;
}
.rv-guides-heading h2 {
font-size: 24px;
}
}
/* ==========================================================
ROSVIX LONG-FORM GUIDE ARTICLE
========================================================== */
.rv-article-page {
max-width: 1000px;
margin: 0 auto;
padding: 52px 22px 80px;
}
.rv-article {
max-width: 820px;
margin: 0 auto;
}
.rv-article-breadcrumb {
display: flex;
flex-wrap: wrap;
gap: 9px;
align-items: center;
margin-bottom: 36px;
color: #718791;
font-size: 14px;
}
.rv-article-breadcrumb a {
color: #28718c;
text-decoration: none;
}
.rv-article-header {
margin-bottom: 36px;
}
.rv-article-header h1 {
margin: 13px 0 18px;
color: #143c50;
font-size: 48px;
line-height: 1.12;
letter-spacing: -1px;
}
.rv-article-lead {
color: #536f7b;
font-size: 20px;
line-height: 1.75;
}
.rv-article-meta {
display: flex;
gap: 10px;
margin-top: 20px;
color: #7a9099;
font-size: 14px;
}
.rv-article section {
margin: 48px 0;
}
.rv-article h2 {
margin: 0 0 18px;
color: #173f52;
font-size: 29px;
line-height: 1.3;
}
.rv-article h3 {
margin: 27px 0 12px;
color: #24566a;
font-size: 21px;
}
.rv-article p,
.rv-article li {
color: #536d78;
font-size: 17px;
line-height: 1.8;
}
.rv-article p {
margin: 0 0 18px;
}
.rv-article ul,
.rv-article ol {
margin: 18px 0 24px;
padding-left: 28px;
}
.rv-article li {
margin: 8px 0;
}
.rv-article-callout,
.rv-article-disclaimer {
margin: 34px 0;
padding: 24px 27px;
border: 1px solid #cfe2e8;
border-radius: 16px;
background: #f5fafc;
color: #526f7b;
line-height: 1.75;
}
.rv-article-callout strong,
.rv-article-disclaimer strong {
color: #17465a;
}
.rv-article-callout p {
margin: 8px 0 0;
}
.rv-article-tool {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin: 28px 0;
padding: 23px 25px;
border: 1px solid #d9e7eb;
border-radius: 16px;
background: #fff;
box-shadow: 0 8px 28px rgba(20, 60, 80, .06);
}
.rv-article-tool strong {
color: #173f52;
font-size: 17px;
}
.rv-article-tool p {
margin: 5px 0 0;
font-size: 15px;
line-height: 1.6;
}
.rv-article-tool > a {
flex: 0 0 auto;
padding: 11px 16px;
border-radius: 10px;
background: #eef7fa;
color: #176b87;
font-weight: 700;
text-decoration: none;
}
.rv-article-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 25px;
}
.rv-article-actions a {
padding: 11px 16px;
border: 1px solid #cfe1e7;
border-radius: 10px;
color: #176b87;
background: #fff;
font-weight: 700;
text-decoration: none;
}
.rv-article-summary {
padding: 30px;
border-radius: 18px;
background: #f5fafc;
}
.rv-article-summary h2 {
margin-top: 10px;
}
.rv-article-back {
margin-top: 45px;
padding-top: 26px;
border-top: 1px solid #dce7eb;
}
.rv-article-back a {
color: #176b87;
font-weight: 700;
text-decoration: none;
}
@media (max-width: 700px) {
.rv-article-page {
padding: 36px 18px 60px;
}
.rv-article-header h1 {
font-size: 36px;
}
.rv-article-lead {
font-size: 18px;
}
.rv-article h2 {
font-size: 25px;
}
.rv-article p,
.rv-article li {
font-size: 16px;
}
.rv-article-tool {
align-items: flex-start;
flex-direction: column;
}
}
/* ==========================================================
ROSVIX ARABIC / RTL FOUNDATION
========================================================== */
html[dir="rtl"] body {
direction: rtl;
text-align: right;
}
html[dir="rtl"] .rv-hero-left,
html[dir="rtl"] .rv-home-section,
html[dir="rtl"] .rv-tool-card-body,
html[dir="rtl"] .rv-category-card {
text-align: right;
}
html[dir="rtl"] .rv-hero-actions,
html[dir="rtl"] .rv-trust-row {
direction: rtl;
}
html[dir="rtl"] .rv-preview-grid a {
direction: rtl;
}
html[dir="rtl"] .rv-menu-arrow {
transform: scaleX(-1);
}
/* ==========================================================
ROSVIX LANGUAGE SWITCH
========================================================== */
.rv-language-switch {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 7px 13px;
border: 1px solid #d7e5ea;
border-radius: 10px;
background: #ffffff;
color: #143c50;
font-size: 13px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
}
.rv-language-switch:hover {
background: #f4f8fa;
}
.rv-language-switch-mobile {
display: block;
padding: 12px 4px;
margin-top: 8px;
border-top: 1px solid #dce8ec;
font-weight: 700;
text-decoration: none;
}
html[dir="rtl"] .rv-header,
html[dir="rtl"] .rv-nav,
html[dir="rtl"] .rv-header-actions {
direction: rtl;
}
html[dir="rtl"] .rv-dropdown-menu,
html[dir="rtl"] .rv-submenu,
html[dir="rtl"] .rv-profile-dropdown {
text-align: right;
}
/* ==========================================================
ROSVIX PROFESSIONAL MOBILE SLIDE-OUT DRAWER
========================================================== */
.rv-mobile-menu-backdrop {
display: none;
}
body.rv-mobile-menu-open {
overflow: hidden !important;
overscroll-behavior: none;
}
@media (max-width: 850px) {
.rv-mobile-menu-backdrop {
display: block;
position: fixed;
inset: 0;
z-index: 10040;
background: rgba(17, 24, 39, 0.48);
opacity: 0;
visibility: hidden;
pointer-events: none;
backdrop-filter: blur(2px);
transition: opacity .25s ease, visibility .25s ease;
}
.rv-mobile-menu-backdrop.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.rv-mobile-menu {
display: flex !important;
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: auto !important;
z-index: 10050 !important;
width: min(390px, 91vw);
height: 100dvh;
padding: 0 !important;
flex-direction: column;
overflow: hidden;
background: #ffffff;
border: 0 !important;
border-radius: 22px 0 0 22px !important;
box-shadow: -18px 0 55px rgba(15, 38, 52, 0.24);
opacity: 1;
visibility: hidden;
pointer-events: none;
transform: translateX(105%);
transition:
transform .28s cubic-bezier(.2, .8, .2, 1),
visibility .28s ease;
}
.rv-mobile-menu.is-open {
visibility: visible;
pointer-events: auto;
transform: translateX(0);
}
.rv-mobile-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
min-height: 78px;
padding: 14px 18px;
border-bottom: 1px solid #e4edf1;
background: #ffffff;
flex: 0 0 auto;
}
.rv-mobile-drawer-brand {
display: flex;
align-items: center;
min-width: 0;
gap: 11px;
color: #123b4e;
text-decoration: none;
}
.rv-mobile-drawer-brand img {
width: 43px;
height: 43px;
flex: 0 0 43px;
border-radius: 12px;
object-fit: contain;
}
.rv-mobile-drawer-brand > span {
display: flex;
min-width: 0;
flex-direction: column;
}
.rv-mobile-drawer-brand strong {
font-size: 18px;
line-height: 1.2;
letter-spacing: .3px;
}
.rv-mobile-drawer-brand small {
max-width: 210px;
margin-top: 3px;
overflow: hidden;
color: #6c818b;
font-size: 10px;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
.rv-mobile-menu-close {
display: grid;
width: 42px;
height: 42px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: #334f5e;
cursor: pointer;
flex: 0 0 42px;
font: inherit;
place-items: center;
}
.rv-mobile-menu-close:hover,
.rv-mobile-menu-close:focus-visible {
background: #edf4f6;
outline: none;
}
.rv-mobile-menu-close span {
margin-top: -3px;
font-size: 31px;
font-weight: 300;
line-height: 1;
}
.rv-mobile-account-card {
display: grid;
grid-template-columns: 46px minmax(0, 1fr) auto;
align-items: center;
gap: 11px;
margin: 14px 16px 5px;
padding: 13px;
border: 1px solid #dce9ed;
border-radius: 15px;
background: #f5fafb;
flex: 0 0 auto;
}
.rv-mobile-account-avatar {
display: grid;
width: 46px;
height: 46px;
border-radius: 50%;
background: linear-gradient(145deg, #1499b2, #116880);
box-shadow: 0 5px 13px rgba(20, 153, 178, .22);
color: #ffffff;
font-size: 18px;
font-weight: 800;
place-items: center;
}
.rv-mobile-account-copy {
display: flex;
min-width: 0;
flex-direction: column;
}
.rv-mobile-account-copy span {
color: #6d828c;
font-size: 11px;
}
.rv-mobile-account-copy strong {
overflow: hidden;
color: #153e51;
font-size: 15px;
text-overflow: ellipsis;
white-space: nowrap;
}
.rv-mobile-account-copy small {
overflow: hidden;
margin-top: 2px;
color: #738892;
font-size: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
.rv-mobile-account-status {
padding: 5px 7px;
border-radius: 999px;
background: #fff4e5;
color: #9a6100;
font-size: 9px;
font-weight: 800;
white-space: nowrap;
}
.rv-mobile-account-status.is-verified {
background: #e5f7ef;
color: #147553;
}
.rv-mobile-menu-scroll {
min-height: 0;
padding: 12px 12px 18px;
flex: 1 1 auto;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
}
.rv-mobile-drawer-nav {
display: flex;
flex-direction: column;
gap: 3px;
}
.rv-mobile-drawer-nav > a,
.rv-mobile-services > summary {
display: flex;
width: 100%;
min-height: 48px;
padding: 11px 13px;
align-items: center;
gap: 12px;
border-radius: 12px;
color: #264b5d;
cursor: pointer;
font-size: 14px;
font-weight: 700;
list-style: none;
text-decoration: none;
transition: background .16s ease, color .16s ease;
}
.rv-mobile-drawer-nav > a:hover,
.rv-mobile-drawer-nav > a:focus-visible,
.rv-mobile-services > summary:hover,
.rv-mobile-services > summary:focus-visible {
background: #eef7f9;
color: #087f96;
outline: none;
}
.rv-mobile-drawer-nav > a.active {
background: #e6f5f8;
color: #087f96;
}
.rv-mobile-nav-icon {
display: inline-grid;
width: 27px;
height: 27px;
color: #51727f;
flex: 0 0 27px;
font-size: 19px;
font-weight: 500;
place-items: center;
}
.rv-mobile-drawer-nav > a.active .rv-mobile-nav-icon {
color: #087f96;
}
.rv-mobile-services {
margin: 0;
}
.rv-mobile-services > summary {
justify-content: space-between;
}
.rv-mobile-services > summary::-webkit-details-marker {
display: none;
}
.rv-mobile-summary-label {
display: flex;
align-items: center;
gap: 12px;
}
.rv-mobile-summary-arrow {
font-size: 18px;
transition: transform .2s ease;
}
.rv-mobile-services[open] > summary {
background: #eef7f9;
color: #087f96;
}
.rv-mobile-services[open] .rv-mobile-summary-arrow {
transform: rotate(180deg);
}
.rv-mobile-services-content {
padding: 6px 5px 7px 38px;
}
.rv-mobile-service-group {
margin: 7px 0 !important;
padding: 11px !important;
border-left: 2px solid #d8e9ee;
border-radius: 0 11px 11px 0 !important;
background: #f8fbfc !important;
}
.rv-mobile-service-group strong {
display: block;
margin: 0 0 6px;
color: #087f96;
font-size: 12px;
line-height: 1.5;
}
.rv-mobile-service-group a {
display: block;
padding: 8px 9px;
border-radius: 8px;
color: #466575;
font-size: 13px;
font-weight: 600;
line-height: 1.35;
text-decoration: none;
}
.rv-mobile-service-group a:hover,
.rv-mobile-service-group a:focus-visible {
background: #ffffff;
color: #087f96;
outline: none;
}
.rv-mobile-admin-link {
color: #087f96 !important;
}
.rv-mobile-drawer-footer {
padding: 12px 16px max(16px, env(safe-area-inset-bottom));
border-top: 1px solid #e1ebef;
background: #ffffff;
flex: 0 0 auto;
}
.rv-mobile-language {
display: flex;
min-height: 42px;
margin-bottom: 10px;
padding: 8px 10px;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 10px;
background: #f3f7f8;
color: #315666;
font-size: 13px;
font-weight: 800;
text-decoration: none;
}
.rv-mobile-auth-buttons {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 9px;
}
.rv-mobile-login,
.rv-mobile-signup,
.rv-mobile-logout,
.rv-mobile-verify-link {
display: flex;
min-height: 44px;
padding: 10px 14px;
align-items: center;
justify-content: center;
border-radius: 11px;
font-size: 13px;
font-weight: 800;
text-align: center;
text-decoration: none;
}
.rv-mobile-login {
border: 1px solid #bdd6de;
background: #ffffff;
color: #176b82;
}
.rv-mobile-signup {
border: 1px solid #087f96;
background: #087f96;
color: #ffffff;
box-shadow: 0 6px 16px rgba(8, 127, 150, .19);
}
.rv-mobile-logout {
border: 1px solid #f0c9c9;
background: #fff7f7;
color: #b13737;
}
.rv-mobile-verify-link {
margin-bottom: 8px;
border: 1px solid #e4d29d;
background: #fff9e8;
color: #876000;
}
html[dir="rtl"] .rv-mobile-menu {
text-align: right;
}
html[dir="rtl"] .rv-mobile-services-content {
padding-right: 38px;
padding-left: 5px;
}
html[dir="rtl"] .rv-mobile-service-group {
border-right: 2px solid #d8e9ee;
border-left: 0;
border-radius: 11px 0 0 11px !important;
}
}
@media (min-width: 851px) {
.rv-mobile-menu-backdrop,
.rv-mobile-menu {
display: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.rv-mobile-menu,
.rv-mobile-menu-backdrop,
.rv-mobile-summary-arrow {
transition: none !important;
}
}
/* ==========================================================
ROSVIX MOBILE HEADER STRUCTURAL ALIGNMENT
Hamburger is inside rv-header-actions
========================================================== */
@media (max-width: 850px) {
.rv-header {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 8px !important;
}
.rv-brand {
min-width: 0 !important;
flex: 1 1 auto !important;
overflow: hidden;
}
.rv-brand-copy span {
display: none !important;
}
.rv-header-actions {
display: flex !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
align-items: center !important;
flex: 0 0 auto !important;
gap: 5px !important;
}
.rv-welcome-user {
display: none !important;
}
.rv-profile-btn {
width: 52px !important;
min-width: 52px !important;
min-height: 40px !important;
padding: 6px !important;
justify-content: center !important;
gap: 5px !important;
font-size: 0 !important;
}
.rv-profile-avatar {
font-size: 12px !important;
}
.rv-profile-chevron {
font-size: 10px !important;
}
.rv-mobile-menu-toggle {
position: static !important;
display: flex !important;
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
margin: 0 !important;
flex: 0 0 42px !important;
order: 3 !important;
transform: none;
}
.rv-auth-actions {
display: flex !important;
align-items: center !important;
gap: 5px !important;
}
.rv-login-btn,
.rv-signup-btn {
min-height: 40px !important;
padding: 7px 9px !important;
font-size: 11px !important;
white-space: nowrap !important;
}
}
@media (max-width: 390px) {
.rv-brand-copy {
display: none !important;
}
.rv-brand {
flex: 1 1 40px !important;
}
.rv-brand-icon {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
}
.rv-language-switch {
padding: 6px 7px !important;
font-size: 10px !important;
}
}
/* ==========================================================
ROSVIX RESULTS VIEWPORT GAP FIX
Prevent page-shell from reserving a blank viewport
========================================================== */
.results-body .page-shell {
min-height: 0 !important;
height: auto !important;
}
.results-body .results-page {
margin-top: 0 !important;
padding-top: 28px !important;
}
@media (max-width: 900px) {
.results-body .results-page {
padding-top: 18px !important;
}
}
/* ROSVIX editorial media */
.rv-editorial-media {
position: relative;
max-width: 1040px;
margin: 34px auto 12px;
overflow: hidden;
border: 1px solid rgba(88, 120, 150, 0.28);
border-radius: 14px;
background: #111a24;
box-shadow: 0 18px 42px rgba(9, 20, 34, 0.16);
}
.rv-editorial-media img {
display: block;
width: 100%;
height: auto;
transform: scale(1.01);
}
.rv-editorial-media::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
105deg,
transparent 35%,
rgba(92, 233, 206, 0.15) 49%,
transparent 63%
);
transform: translateX(-120%);
animation: rosvix-scan-sweep 7s ease-in-out infinite;
}
.rv-editorial-media figcaption {
padding: 12px 16px;
color: #d9e4ef;
font-size: 0.92rem;
line-height: 1.55;
background: #172330;
}
@keyframes rosvix-scan-sweep {
0%, 35% { transform: translateX(-120%); }
65%, 100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
.rv-editorial-media::after {
animation: none;
}
}