/* ==========================================================================
Red Flag Checker v2 — minimal, centered, dark "app card" clone layout.
Accent color is themed per page via a body class: theme-red / theme-green /
theme-blue / theme-pink. Everything else (bg, card, text) stays identical
across tools so only the accent changes, as requested.
========================================================================== */
/* Fonts are loaded via + in each
page's instead of @import — @import blocks rendering until the CSS file
that contains it has fully loaded, creating a slow serial request chain. Using
tags lets the browser discover and fetch the font in parallel with everything else. */
:root{
--bg: #0c0c10;
--bg-2: #101015;
--card: #17171e;
--card-2: #1d1d25;
--border: #28282f;
--border-lit: #34343d;
--text: #f5f5f7;
--text-dim: #a4a4ae;
--text-dim-2: #6d6d78;
/* default accent (red) — overridden per theme below */
--accent: #ef4444;
--accent-2: #ff6b7a;
--accent-dark: #c8202f;
--accent-glow: rgba(239,68,68,0.35);
--radius-sm: 10px;
--radius: 16px;
--radius-lg: 24px;
--container: 600px;
--serif: 'Poppins', -apple-system, sans-serif;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* Full palette per tool — background, cards and borders shift hue along with
the accent, so the whole site re-themes per tool, not just the buttons. */
body.theme-red{
--bg: #130b0c; --bg-2: #180e10; --card: #1e1315; --card-2: #25171a;
--border: #35191d; --border-lit: #492029;
--accent: #ef4444; --accent-2: #ff6b7a; --accent-dark: #c8202f; --accent-glow: rgba(239,68,68,0.35);
}
body.theme-green{
--bg: #0a1310; --bg-2: #0e1814; --card: #131f1a; --card-2: #182721;
--border: #1e3a2c; --border-lit: #294f3a;
--accent: #22c55e; --accent-2: #5eead4; --accent-dark: #15803d; --accent-glow: rgba(34,197,94,0.35);
}
body.theme-blue{
--bg: #0a0e15; --bg-2: #0e131b; --card: #141b27; --card-2: #19222f;
--border: #1e2d42; --border-lit: #283c58;
--accent: #3b82f6; --accent-2: #7dd3fc; --accent-dark: #1d4ed8; --accent-glow: rgba(59,130,246,0.35);
}
body.theme-pink{
--bg: #140a11; --bg-2: #190d15; --card: #21121b; --card-2: #291621;
--border: #3b1c2d; --border-lit: #4f243b;
--accent: #ec4899; --accent-2: #fda4d5; --accent-dark: #be185d; --accent-glow: rgba(236,72,153,0.35);
}
body.theme-yellow{
--bg: #140f08; --bg-2: #19130a; --card: #251b0d; --card-2: #2d2210;
--border: #423011; --border-lit: #5a4116;
--accent: #eab308; --accent-2: #fde047; --accent-dark: #a16207; --accent-glow: rgba(234,179,8,0.35);
}
/* --------------------------- moving background blobs ----------------------- */
body{ position: relative; overflow-x: hidden; }
.bg-blob{
position: fixed; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0;
}
.bg-blob-1{
width: 46vw; height: 46vw; max-width: 560px; max-height: 560px;
top: -14vw; left: -12vw; background: var(--accent); opacity: 0.28;
animation: blobFloat1 20s ease-in-out infinite;
}
.bg-blob-2{
width: 38vw; height: 38vw; max-width: 460px; max-height: 460px;
bottom: -12vw; right: -10vw; background: var(--accent-2); opacity: 0.22;
animation: blobFloat2 24s ease-in-out infinite;
}
.bg-blob-3{
width: 30vw; height: 30vw; max-width: 380px; max-height: 380px;
top: 40vh; left: 50vw; background: var(--accent-dark); opacity: 0.16;
animation: blobFloat3 28s ease-in-out infinite;
}
@keyframes blobFloat1{
0%, 100%{ transform: translate(0, 0) scale(1); }
50%{ transform: translate(6vw, 8vh) scale(1.15); }
}
@keyframes blobFloat2{
0%, 100%{ transform: translate(0, 0) scale(1); }
50%{ transform: translate(-7vw, -6vh) scale(0.9); }
}
@keyframes blobFloat3{
0%, 100%{ transform: translate(-50%, 0) scale(1); }
50%{ transform: translate(-50%, -6vh) scale(1.2); }
}
.wrap, .wrap-wide, .site-nav, .site-footer, main, header{ position: relative; z-index: 1; }
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--sans);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4{ font-family: var(--serif); font-weight: 700; margin: 0; }
p{ margin: 0; }
button{ font-family: inherit; }
::selection{ background: var(--accent); color: #fff; }
.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.wrap-wide{ max-width: 860px; margin: 0 auto; padding: 0 20px; }
a:focus-visible, button:focus-visible, textarea:focus-visible, input:focus-visible{
outline: 2px solid var(--accent); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
*{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
/* ---------------------------------- nav --------------------------------- */
.site-nav{
padding: 16px 0;
border-bottom: 1px solid var(--border);
position: relative;
z-index: 50;
}
.site-nav .wrap-wide{ display: flex; align-items: center; justify-content: center; }
.nav-row{
display: flex; align-items: center; justify-content: center; gap: 10px;
flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none; max-width: 100%;
}
.nav-row::-webkit-scrollbar{ display: none; }
.nav-side{ display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.nav-links, .nav-side{
font-size: 0.86rem; color: var(--text-dim);
}
.nav-links a, .nav-side a{
padding: 8px 14px; border-radius: 999px; border: 1px solid transparent;
transition: color 0.15s, border-color 0.15s, background 0.15s;
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0;
}
.nav-links a:hover, .nav-side a:hover{ color: var(--text); border-color: var(--border-lit); }
.nav-links a.current, .nav-side a.current{ color: var(--text); font-weight: 600; background: var(--card); border-color: var(--border-lit); }
/* language switcher: circular flag button, center of nav */
.lang-switch{ position: relative; flex-shrink: 0; }
.lang-flag-btn{
width: 38px; height: 38px; border-radius: 50%;
background: var(--card); border: 1px solid var(--border-lit);
font-size: 1.1rem; cursor: pointer;
display: flex; align-items: center; justify-content: center;
overflow: hidden; padding: 0;
transition: border-color 0.15s;
}
.lang-flag-btn svg{ width: 100%; height: 100%; display: block; }
.lang-flag-btn:hover{ border-color: var(--accent); }
.lang-dropdown{
position: fixed; top: 0; left: 0;
background: var(--card); border: 1px solid var(--border-lit); border-radius: var(--radius);
padding: 6px; min-width: 168px;
display: none; flex-direction: column; gap: 2px;
box-shadow: 0 12px 32px rgba(0,0,0,0.45);
z-index: 200;
}
.lang-dropdown.show{ display: flex; }
.lang-option{
display: flex; align-items: center; gap: 9px;
padding: 9px 10px; border-radius: var(--radius-sm);
font-size: 0.86rem; color: var(--text-dim);
transition: background 0.15s, color 0.15s;
}
.lang-option:hover{ background: var(--bg-2); color: var(--text); }
.lang-option.current{ color: var(--text); font-weight: 600; }
.lang-option.current::after{ content: "✓"; margin-left: auto; color: var(--accent); }
.lang-option.disabled{ opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.lang-option .soon{
margin-left: auto; font-size: 0.62rem; letter-spacing: 0.03em;
color: var(--text-dim-2); border: 1px solid var(--border-lit);
padding: 2px 6px; border-radius: 999px;
}
.lang-flag{
width: 22px; height: 15px; border-radius: 3px; overflow: hidden;
display: inline-flex; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.15);
}
.lang-flag svg{ width: 100%; height: 100%; display: block; }
@media (max-width: 620px){
.nav-row{ gap: 6px; }
.nav-side a{ padding: 8px 10px; font-size: 0.8rem; }
}
@media (max-width: 420px){
.nav-side a span.label{ display: none; }
}
/* --------------------------------- hero ---------------------------------- */
.hero{ text-align: center; padding: 52px 0 8px; }
.hero-badge{
display: inline-flex; align-items: center; gap: 7px;
background: var(--card); border: 1px solid var(--border);
padding: 7px 14px; border-radius: 30px; font-size: 0.78rem; color: var(--text-dim);
margin-bottom: 20px;
}
.hero-badge .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.hero h1{ font-size: clamp(2rem, 6vw, 2.7rem); line-height: 1.12; }
.hero h1 .accent-word{ color: var(--accent); }
.hero p.lede{
margin: 16px auto 0; max-width: 46ch; color: var(--text-dim); font-size: 1rem;
}
/* ------------------------------- buttons -------------------------------- */
.btn{
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 15px 26px; font-weight: 700; font-size: 0.98rem;
border-radius: 999px; border: 1px solid transparent; cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.btn:active{ transform: scale(0.98); }
.btn-accent{
background: linear-gradient(135deg, var(--accent-2), var(--accent));
color: #0c0c10;
}
.btn-accent:hover{ box-shadow: 0 8px 28px var(--accent-glow); }
.btn-ghost{ background: transparent; border-color: var(--border-lit); color: var(--text-dim); }
.btn-ghost:hover{ border-color: var(--accent); color: var(--text); }
.btn-block{ width: 100%; }
.btn[disabled]{ opacity: 0.5; cursor: not-allowed; }
.btn-sm{ padding: 9px 16px; font-size: 0.85rem; }
/* -------------------------------- tool card ------------------------------ */
.tool-card{
margin-top: 26px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px;
position: relative;
}
.field-label{ display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--text-dim); margin-bottom: 8px; }
textarea, input[type="text"]{
width: 100%; background: var(--bg-2); border: 1px solid var(--border);
border-radius: var(--radius); color: var(--text); padding: 14px 16px;
font-family: var(--sans); font-size: 0.96rem; resize: vertical;
transition: border-color 0.15s;
}
textarea{ min-height: 140px; line-height: 1.55; }
textarea:focus, input[type="text"]:focus{ border-color: var(--accent); }
textarea::placeholder, input::placeholder{ color: var(--text-dim-2); }
.upload-zone{
margin-top: 16px; border: 1.5px dashed var(--border-lit); border-radius: var(--radius);
padding: 18px; text-align: center; color: var(--text-dim); font-size: 0.86rem; cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.upload-zone:hover{ border-color: var(--accent); background: rgba(255,255,255,0.02); }
.upload-zone.has-file{ border-style: solid; }
.upload-zone .up-icon{ font-size: 1.3rem; margin-bottom: 4px; }
.upload-preview{ margin-top: 12px; display: none; align-items: center; gap: 10px; }
.upload-preview.show{ display: flex; }
.upload-preview img{ width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-lit); }
.upload-preview .rm{ color: var(--text-dim); cursor: pointer; font-size: 0.85rem; }
.upload-preview .rm:hover{ color: var(--accent); }
.analyze-cta{ margin-top: 20px; }
.disc-line{
margin-top: 18px; text-align: center; font-size: 0.76rem; color: var(--text-dim-2); line-height: 1.5;
}
.disc-line strong{ color: var(--text-dim); }
/* ------------------------------ avatar row / ticker ------------------------ */
.avatar-row{ display: flex; justify-content: center; gap: 6px; margin: 30px 0 10px; }
.avatar-row .av{
width: 30px; height: 30px; border-radius: 50%; background: var(--card-2);
border: 1px solid var(--border-lit); display: flex; align-items: center; justify-content: center;
font-size: 0.9rem; margin-left: -10px;
}
.avatar-row .av:first-child{ margin-left: 0; }
.scan-counter{ text-align: center; font-size: 0.92rem; color: var(--text-dim); }
.scan-counter strong{ color: var(--text); font-variant-numeric: tabular-nums; }
.scan-warning{ text-align: center; font-size: 0.78rem; color: var(--text-dim-2); margin-top: 4px; }
/* ------------------------------ result modal popup ------------------------- */
.modal-overlay{
position: fixed; inset: 0; z-index: 200;
background: rgba(4,4,6,0.72); backdrop-filter: blur(6px);
display: none; align-items: center; justify-content: center;
padding: 24px;
}
.modal-overlay.show{ display: flex; }
.modal-content{
position: relative; width: 100%; max-width: 480px; max-height: 86vh; overflow-y: auto;
background: var(--card); border: 1px solid var(--border-lit);
border-radius: var(--radius-lg); padding: 30px;
animation: modalPop 0.28s cubic-bezier(0.2,0.8,0.2,1);
}
@keyframes modalPop{
from{ opacity: 0; transform: scale(0.95) translateY(8px); }
to{ opacity: 1; transform: scale(1) translateY(0); }
}
.modal-close{
position: absolute; top: 14px; right: 14px;
width: 32px; height: 32px; border-radius: 50%;
background: var(--bg-2); border: 1px solid var(--border-lit); color: var(--text-dim);
font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: color 0.15s, border-color 0.15s;
}
.modal-close:hover{ color: var(--text); border-color: var(--accent); }
/* ------------------------------ analysis / progress ------------------------ */
.analysis-panel{ display: none; }
.analysis-panel.show{ display: block; }
.progress-steps{ display: flex; flex-direction: column; gap: 9px; }
.progress-steps .step{ font-size: 0.87rem; color: var(--text-dim-2); display: flex; align-items: center; gap: 9px; opacity: 0.4; }
.progress-steps .step.active{ opacity: 1; color: var(--text-dim); }
.progress-steps .step.done{ opacity: 0.7; color: var(--text-dim); }
.progress-steps .step .mark{ width: 14px; text-align: center; }
.progress-bar-track{ margin-top: 14px; height: 5px; border-radius: 6px; background: var(--border); overflow: hidden; }
.progress-bar-fill{ height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width 0.4s ease; }
/* --------------------------------- result -------------------------------- */
.result-block{ display: none; margin-top: 8px; }
.result-block.show{ display: block; animation: pop 0.4s cubic-bezier(0.2,0.8,0.2,1); }
@keyframes pop{ from{ opacity: 0; transform: scale(0.97); } to{ opacity: 1; transform: scale(1); } }
.gauge-wrap{ display: flex; justify-content: center; margin: 6px 0 18px; }
.gauge-ring{
width: 168px; height: 168px; border-radius: 50%;
background: conic-gradient(var(--accent) 0%, var(--border) 0);
display: flex; align-items: center; justify-content: center;
position: relative;
}
.gauge-ring::before{
content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--card);
}
.gauge-inner{ position: relative; text-align: center; }
.gauge-inner .score{ font-family: var(--serif); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--text); }
.gauge-inner .of100{ color: var(--text-dim-2); font-size: 0.95rem; font-family: var(--sans); }
.gauge-inner .glabel{ margin-top: 4px; font-size: 0.72rem; color: var(--text-dim); letter-spacing: 0.03em; }
.verdict-center{ text-align: center; margin-bottom: 20px; }
.verdict-center .risk{ font-family: var(--serif); font-weight: 700; font-size: 1.3rem; color: var(--accent); }
.verdict-center .sub{ margin-top: 4px; color: var(--text-dim); font-size: 0.85rem; }
.spectrum{ margin: 0 0 22px; }
.spectrum .track{ height: 6px; border-radius: 6px; background: var(--border); position: relative; }
.spectrum .fill{ height: 100%; border-radius: 6px; background: linear-gradient(90deg, #52525c, var(--accent)); }
.spectrum .marker{
position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%;
background: var(--accent); border: 2px solid var(--card);
transform: translate(-50%, -50%); transition: left 0.6s cubic-bezier(0.2,0.8,0.2,1);
}
.spectrum .ends{ display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.74rem; color: var(--text-dim); }
.flags-detected{ display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }
.flag-item{
display: flex; gap: 12px; align-items: center; justify-content: space-between;
font-size: 0.92rem; color: var(--text-dim);
padding: 12px 14px; background: var(--bg-2); border-radius: var(--radius); border: 1px solid var(--border);
}
.flag-item .fmain{ display: flex; gap: 10px; align-items: flex-start; }
.flag-item .ico{ flex-shrink: 0; }
.flag-item .fpct{
flex-shrink: 0; font-weight: 700; font-size: 0.82rem;
padding: 4px 10px; border-radius: 999px;
background: var(--card-2); border: 1px solid var(--border-lit); color: var(--accent);
font-variant-numeric: tabular-nums;
}
.verdict-copy{ text-align: center; color: var(--text-dim); font-size: 0.94rem; line-height: 1.6; margin-bottom: 22px; }
.verdict-copy strong{ color: var(--text); }
.share-row{ display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; }
.share-btn{
border: 1px solid var(--border-lit); background: var(--bg-2); color: var(--text-dim);
padding: 9px 15px; border-radius: 999px; font-size: 0.82rem; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px; transition: border-color 0.15s, color 0.15s;
}
.share-btn:hover{ border-color: var(--accent); color: var(--text); }
/* --------------------------- body-count stat grid -------------------------- */
.stat-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 20px; }
@media (max-width: 480px){ .stat-grid{ grid-template-columns: repeat(2, 1fr); } }
.stat-cell{ border: 1px solid var(--border); background: var(--bg-2); border-radius: var(--radius); padding: 14px 10px; text-align: center; }
.stat-cell .num{ font-family: var(--serif); font-weight: 700; font-size: 1.3rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.stat-cell .lbl{ margin-top: 3px; color: var(--text-dim-2); font-size: 0.68rem; }
/* --------------------------------- more tools ------------------------------ */
.more-tools{ margin-top: 46px; }
.more-tools .mt-head{ text-align: center; font-size: 0.8rem; letter-spacing: 0.03em; color: var(--text-dim-2); margin-bottom: 14px; }
.more-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 560px){ .more-grid{ grid-template-columns: 1fr; } }
.more-card{
border: 1px solid var(--border); background: var(--card); border-radius: var(--radius);
padding: 16px; text-align: center; transition: border-color 0.15s;
}
.more-card:hover{ border-color: var(--border-lit); }
.more-card .g{ font-size: 1.3rem; }
.more-card .t{ margin-top: 8px; font-weight: 600; font-size: 0.88rem; }
.more-card .d{ margin-top: 4px; font-size: 0.76rem; color: var(--text-dim-2); }
/* ------------------------------- content sections -------------------------- */
.section{ padding: 50px 0; }
.section-head{ text-align: center; max-width: 56ch; margin: 0 auto 30px; }
.section-head h2{ font-size: clamp(1.5rem, 3vw, 1.9rem); }
.section-head p{ margin-top: 10px; color: var(--text-dim); font-size: 0.98rem; }
.pill-grid{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pill{
border: 1px solid var(--border); background: var(--card); padding: 9px 16px; border-radius: 999px;
font-size: 0.85rem; color: var(--text-dim);
}
/* --------------------------------- faq -------------------------------------*/
.faq-item{ border-bottom: 1px solid var(--border); }
.faq-q{
width: 100%; text-align: left; background: none; border: none; color: var(--text);
font-family: var(--serif); font-size: 1.02rem; font-weight: 600; padding: 18px 0; cursor: pointer;
display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.faq-q .plus{ color: var(--accent); font-size: 1.2rem; transition: transform 0.2s; flex-shrink: 0; font-family: var(--sans); }
.faq-item.open .plus{ transform: rotate(45deg); }
.faq-a{ max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.faq-a p{ padding-bottom: 18px; color: var(--text-dim); font-size: 0.93rem; line-height: 1.6; }
.faq-item.open .faq-a{ max-height: 400px; }
/* --------------------------------- footer ---------------------------------- */
.site-footer{ border-top: 1px solid var(--border); margin-top: 60px; padding: 32px 0 28px; color: var(--text-dim-2); font-size: 0.82rem; }
.footer-disc{
text-align: center; max-width: 640px; margin: 0 auto 22px; font-size: 0.78rem; color: var(--text-dim);
border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px;
}
.footer-disc strong{ color: var(--text); }
.footer-links{ display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.footer-links a:hover{ color: var(--text); }
.footer-copy{ text-align: center; }
/* -------------------------------- legal pages -------------------------------*/
.legal{ padding: 46px 0 30px; max-width: 680px; margin: 0 auto; }
.legal h1{ font-size: 1.9rem; margin-bottom: 6px; }
.legal .updated{ color: var(--text-dim-2); font-size: 0.82rem; margin-bottom: 32px; }
.legal h2{ font-size: 1.12rem; margin-top: 30px; margin-bottom: 10px; color: var(--accent); }
.legal p, .legal li{ color: var(--text-dim); font-size: 0.95rem; line-height: 1.68; }
.legal ul{ padding-left: 18px; }
.legal ul li{ margin-bottom: 7px; }
.mt-8{ margin-top: 8px; } .mt-16{ margin-top: 16px; } .mt-24{ margin-top: 24px; }