/* ─────────────────────────────────────────────────────────────────────────────
Digiscam — design system
Editorial-warm: cream paper, forest accent, magazine numerals.
Single source of truth for tokens + base typography + components.
───────────────────────────────────────────────────────────────────────── */
/* ── Webfonts (loaded via @import for the @font-face friendliness with CSP)
In the templates also have to Google Fonts
so the *.css then the *.woff2 land fast. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=JetBrains+Mono:wght@400;500;700&family=Tajawal:wght@400;500;700&display=swap');
/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
/* Color — warm editorial */
--bg: #faf8f3; /* page background (slightly warmer cream) */
--bg-elev: #ffffff; /* cards, panels */
--bg-sink: #f3efe6; /* inset / pre / textarea */
--ink: #14181a; /* primary text */
--ink-soft: #2a3034;
--muted: #6b7178;
--line: #e6e1d4; /* hairline borders (warmer) */
--line-strong:#cfc8b5;
/* Brand greens */
--accent: #1a8a4d;
--accent-deep: #0f5f33;
--accent-tint: #e7f6ec;
--accent-edge: #c3e6cd;
/* Verdict palette */
--safe: #116329; --safe-tint: #e7f6ec; --safe-edge: #c3e6cd;
--suspicious: #8a6d00; --susp-tint: #fff3cd; --susp-edge: #efdf9a;
--scam: #a4161a; --scam-tint: #fde2e1; --scam-edge: #f3c7c4;
/* Typography */
--font-display: 'Fraunces', 'New York', 'Times New Roman', serif;
--font-body: 'DM Sans', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* Spacing rhythm */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4.5rem;
/* Radii */
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 18px;
--r-pill: 999px;
/* Shadows — soft, paper-like */
--shadow-1: 0 1px 2px rgba(20, 24, 26, 0.04), 0 0 0 1px rgba(20, 24, 26, 0.03);
--shadow-2: 0 4px 12px -3px rgba(20, 24, 26, 0.08), 0 1px 3px rgba(20, 24, 26, 0.04);
--shadow-3: 0 12px 28px -6px rgba(20, 24, 26, 0.14), 0 2px 6px rgba(20, 24, 26, 0.05);
/* Motion */
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--dur-fast: 120ms;
--dur: 220ms;
--dur-slow: 480ms;
}
/* Arabic — swap display font for Tajawal (Fraunces doesn't carry Arabic). */
[lang="ar"] {
--font-display: 'Tajawal', 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif;
--font-body: 'Tajawal', 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif;
}
/* ── Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
/* Subtle paper grain — generated SVG noise at very low alpha. */
background-color: var(--bg);
background-image:
radial-gradient(1200px 600px at 50% -200px, rgba(26, 138, 77, 0.06), transparent 60%),
url("data:image/svg+xml;utf8,");
background-attachment: fixed;
}
body {
font-family: var(--font-body);
color: var(--ink);
line-height: 1.6;
font-feature-settings: 'ss01', 'cv11', 'kern';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* RTL: flip the subtle radial highlight so it stays centered properly. */
[dir="rtl"] body { font-feature-settings: 'kern'; }
/* Selection — warm green */
::selection { background: var(--accent); color: #fff; }
/* Reset link defaults */
a { color: inherit; text-decoration-color: rgba(26, 138, 77, 0.35); text-underline-offset: 3px; }
/* Visible focus for keyboard users */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--r-sm);
}
/* ── Wrap ──────────────────────────────────────────────────────────────── */
.ds-wrap { max-width: 760px; margin: 0 auto; padding: 0 1.25rem; }
.ds-wrap.narrow { max-width: 680px; }
/* ── Nav ───────────────────────────────────────────────────────────────── */
.ds-nav {
display: flex; justify-content: space-between; align-items: center;
gap: 1rem; flex-wrap: wrap;
padding: 1.25rem 0;
border-bottom: 1px solid var(--line);
margin-bottom: var(--space-7);
}
.ds-logo {
font-family: var(--font-display);
font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em;
text-decoration: none; color: var(--ink);
display: inline-flex; align-items: baseline; gap: 0.3rem;
}
.ds-logo .shield { font-size: 1.05em; }
.ds-logo .mark { color: var(--accent); }
.ds-nav .right { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.ds-nav a.muted {
color: var(--muted); text-decoration: none; font-size: 0.95rem;
padding: 0.25rem 0.5rem; border-radius: var(--r-sm);
transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ds-nav a.muted:hover { color: var(--ink); background: rgba(20,24,26,0.04); }
/* Language pills */
.ds-langs { display: inline-flex; gap: 0.3rem; margin-inline-start: 0.75rem; }
.ds-langs a {
font-family: var(--font-mono);
font-size: 0.78rem; letter-spacing: 0.04em;
padding: 0.25rem 0.6rem;
border: 1px solid var(--line); border-radius: var(--r-pill);
color: var(--muted); text-decoration: none;
transition: all var(--dur-fast) var(--ease);
}
.ds-langs a:hover { color: var(--ink); border-color: var(--line-strong); }
.ds-langs a.active {
background: var(--ink); color: var(--bg);
border-color: var(--ink);
}
/* ── Hero ──────────────────────────────────────────────────────────────── */
.ds-hero { padding: 1rem 0 var(--space-7); }
.ds-hero h1 {
font-family: var(--font-display);
font-optical-sizing: auto;
font-variation-settings: 'opsz' 96, 'SOFT' 50;
font-size: clamp(2.2rem, 5.5vw, 3.4rem);
line-height: 1.05;
letter-spacing: -0.025em;
margin: 0 0 var(--space-4);
font-weight: 500;
color: var(--ink);
}
.ds-hero h1 .pop {
color: var(--accent);
font-style: italic;
font-variation-settings: 'opsz' 96, 'SOFT' 100;
}
.ds-hero p.lede {
font-size: clamp(1.05rem, 1.5vw, 1.2rem);
color: var(--ink-soft);
margin: 0 0 var(--space-6);
max-width: 56ch;
}
/* CTA */
.ds-cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.ds-cta {
display: inline-flex; align-items: center; gap: 0.5rem;
background: var(--accent); color: #fff; text-decoration: none;
padding: 0.85rem 1.45rem; border-radius: var(--r-pill);
font-weight: 500; font-size: 1rem;
box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,0.15);
transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.ds-cta:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255,255,255,0.18); }
.ds-cta:active { transform: translateY(0); }
.ds-cta.secondary {
background: transparent; color: var(--ink);
border: 1px solid var(--line-strong);
box-shadow: none;
}
.ds-cta.secondary:hover { background: var(--bg-elev); border-color: var(--ink); transform: translateY(-1px); }
.ds-cta.small { padding: 0.5rem 0.95rem; font-size: 0.92rem; }
/* ── Sections ──────────────────────────────────────────────────────────── */
.ds-section { padding: var(--space-7) 0; border-top: 1px solid var(--line); }
.ds-section + .ds-section { border-top: 1px solid var(--line); }
.ds-h2 {
font-family: var(--font-display);
font-variation-settings: 'opsz' 24, 'SOFT' 30;
font-weight: 500;
font-size: clamp(1.4rem, 2.5vw, 1.75rem);
letter-spacing: -0.015em;
margin: 0 0 var(--space-5);
color: var(--ink);
display: flex; align-items: baseline; gap: 0.7rem;
}
.ds-h2 .num {
font-family: var(--font-mono);
font-size: 0.65em;
font-weight: 500;
color: var(--muted);
letter-spacing: 0.05em;
position: relative; top: -0.05em;
}
.ds-small { font-size: 0.88rem; color: var(--muted); }
/* ── Cards / panels ────────────────────────────────────────────────────── */
.ds-card {
background: var(--bg-elev);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 1.35rem;
box-shadow: var(--shadow-1);
transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ds-card.link { display:block; text-decoration:none; color:inherit; }
.ds-card.link:hover { transform: translateY(-2px); border-color: var(--accent-edge); box-shadow: var(--shadow-2); }
/* Steps grid */
.ds-steps { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ds-steps { grid-template-columns: repeat(3, 1fr); } }
.ds-step .badge {
font-family: var(--font-mono);
display: inline-flex; align-items: center; justify-content: center;
width: 2rem; height: 2rem;
background: var(--ink); color: var(--bg);
border-radius: var(--r-pill);
font-weight: 500; font-size: 0.9rem;
margin-bottom: 0.85rem;
}
.ds-step h3 {
font-family: var(--font-display);
font-variation-settings: 'opsz' 18;
font-weight: 500;
margin: 0 0 0.4rem;
font-size: 1.1rem;
letter-spacing: -0.005em;
}
.ds-step p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
/* Catches (what we detect) — refined danger list */
.ds-catches { display: grid; gap: 0.65rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ds-catches { grid-template-columns: 1fr 1fr; } }
.ds-catch {
padding: 0.8rem 1rem;
background: var(--scam-tint);
color: var(--scam);
border: 1px solid var(--scam-edge);
border-radius: var(--r-md);
font-weight: 500; font-size: 0.95rem;
display: flex; align-items: center; gap: 0.5rem;
transition: transform var(--dur-fast) var(--ease);
}
.ds-catch:hover { transform: translateX(2px); }
[dir="rtl"] .ds-catch:hover { transform: translateX(-2px); }
/* Verdict demo (terminal look) */
.ds-verdict-demo {
background: var(--bg-sink);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 1.4rem;
font-family: var(--font-mono);
font-size: 0.9rem;
line-height: 1.65;
white-space: pre-wrap;
direction: ltr;
position: relative;
overflow: hidden;
}
.ds-verdict-demo::before {
content: "";
position: absolute; top: 0; inset-inline-start: 0;
width: 4px; height: 100%;
background: linear-gradient(180deg, var(--accent), var(--scam));
}
.ds-verdict-demo .header-line { font-weight: 600; color: var(--ink); }
.ds-verdict-demo .risk { color: var(--scam); font-weight: 600; }
/* Privacy card */
.ds-privacy {
background: var(--accent-tint);
border: 1px solid var(--accent-edge);
color: var(--safe);
border-radius: var(--r-lg);
padding: 1.35rem 1.45rem;
}
.ds-privacy p { margin: 0.4rem 0; display: flex; gap: 0.55rem; align-items: baseline; }
.ds-privacy p::before { content: "✓"; color: var(--accent); font-weight: 700; }
.ds-privacy strong { color: #0a4a1b; }
/* Check form */
.ds-form {
background: var(--bg-elev);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 1.25rem;
display: grid; gap: 0.75rem;
box-shadow: var(--shadow-1);
}
.ds-form textarea {
width: 100%; resize: vertical; min-height: 120px;
padding: 0.85rem 1rem;
border: 1px solid var(--line);
border-radius: var(--r-md);
font-family: inherit; font-size: 1rem;
color: var(--ink); background: var(--bg-sink);
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ds-form textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(26, 138, 77, 0.15);
}
.ds-form .row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.ds-form input[type=file] { flex: 1; min-width: 200px; font-size: 0.95rem; color: var(--muted); }
.ds-form button {
background: var(--accent); color: #fff; border: 0; cursor: pointer;
padding: 0.85rem 1.4rem; border-radius: var(--r-pill);
font-family: inherit; font-weight: 500; font-size: 1rem;
box-shadow: var(--shadow-2);
transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ds-form button:hover { background: var(--accent-deep); transform: translateY(-1px); }
.ds-form button:active { transform: translateY(0); }
.ds-form-error {
background: var(--scam-tint); color: var(--scam);
border: 1px solid var(--scam-edge);
padding: 0.75rem 1rem; border-radius: var(--r-md);
margin-top: 0.75rem; font-size: 0.95rem;
}
/* FAQ */
.ds-faq details {
background: var(--bg-elev);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 0.95rem 1.15rem;
margin-bottom: 0.55rem;
transition: border-color var(--dur-fast) var(--ease);
}
.ds-faq details[open] { border-color: var(--line-strong); }
.ds-faq summary {
cursor: pointer;
font-weight: 500;
list-style: none;
display: flex; align-items: center; justify-content: space-between;
gap: 1rem;
}
.ds-faq summary::-webkit-details-marker { display: none; }
.ds-faq summary::after {
content: "+";
font-family: var(--font-mono);
color: var(--muted);
font-size: 1.2rem; line-height: 1;
transition: transform var(--dur) var(--ease);
}
.ds-faq details[open] summary::after { content: "−"; }
.ds-faq details[open] summary { margin-bottom: 0.7rem; }
.ds-faq p { margin: 0; color: var(--muted); font-size: 0.97rem; }
/* Footer */
.ds-footer {
border-top: 1px solid var(--line);
margin-top: var(--space-8);
padding: var(--space-6) 0;
color: var(--muted);
font-size: 0.9rem;
display: flex; justify-content: space-between;
flex-wrap: wrap; gap: 1rem;
}
.ds-footer a {
color: var(--muted); text-decoration: none;
margin-inline-end: 1.1rem;
transition: color var(--dur-fast) var(--ease);
}
.ds-footer a:hover { color: var(--ink); }
/* ── Blog post body styling ─────────────────────────────────────────────── */
.ds-prose { line-height: 1.75; }
.ds-prose h2 {
font-family: var(--font-display);
font-variation-settings: 'opsz' 28;
font-weight: 500;
font-size: 1.5rem;
margin: 2.5rem 0 0.6rem;
letter-spacing: -0.012em;
}
.ds-prose h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.2rem;
margin: 2rem 0 0.45rem;
letter-spacing: -0.005em;
}
.ds-prose p { margin: 0 0 1.15rem; }
.ds-prose ul, .ds-prose ol { padding-inline-start: 1.4rem; margin: 0 0 1.15rem; }
.ds-prose li { margin-bottom: 0.4rem; }
.ds-prose code {
background: var(--bg-sink); padding: 0.15em 0.4em;
border-radius: var(--r-sm); font-family: var(--font-mono);
font-size: 0.9em; color: var(--ink);
}
.ds-prose pre {
background: var(--bg-sink); padding: 1rem;
border-radius: var(--r-md); overflow-x: auto;
font-family: var(--font-mono); font-size: 0.88rem;
border: 1px solid var(--line);
}
.ds-prose blockquote {
margin: 1.4rem 0;
padding: 0.85rem 1.1rem;
border-inline-start: 3px solid var(--accent);
background: var(--bg-elev);
border-radius: 0 var(--r-md) var(--r-md) 0;
color: var(--ink-soft);
font-style: italic;
}
.ds-prose a {
color: var(--accent-deep);
text-decoration-color: var(--accent-edge);
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
transition: text-decoration-color var(--dur-fast) var(--ease);
}
.ds-prose a:hover { text-decoration-color: var(--accent); }
.ds-prose strong { color: var(--ink); font-weight: 600; }
/* ── Verdict result page (scan/show.blade.php) ─────────────────────────── */
.ds-verdict-card {
border-radius: var(--r-lg);
padding: 1.5rem 1.65rem;
margin-bottom: var(--space-5);
display: flex; align-items: center; gap: 1.1rem;
border: 1px solid;
position: relative; overflow: hidden;
}
.ds-verdict-card.safe { background: var(--safe-tint); color: var(--safe); border-color: var(--safe-edge); }
.ds-verdict-card.suspicious { background: var(--susp-tint); color: var(--suspicious); border-color: var(--susp-edge); }
.ds-verdict-card.scam { background: var(--scam-tint); color: var(--scam); border-color: var(--scam-edge); }
.ds-verdict-card .icon { font-size: 2.5rem; line-height: 1; }
.ds-verdict-card .text { flex: 1; }
.ds-verdict-card .label {
font-family: var(--font-display);
font-variation-settings: 'opsz' 24;
font-size: 1.4rem; font-weight: 500;
letter-spacing: -0.012em;
}
.ds-verdict-card .score { font-size: 0.95rem; opacity: 0.85; margin-top: 0.2rem; font-family: var(--font-mono); }
/* ── Animation: stagger reveal on load ─────────────────────────────────── */
@keyframes ds-rise {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.ds-rise { animation: ds-rise var(--dur-slow) var(--ease-out) both; }
.ds-rise.d1 { animation-delay: 80ms; }
.ds-rise.d2 { animation-delay: 160ms; }
.ds-rise.d3 { animation-delay: 240ms; }
.ds-rise.d4 { animation-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}