/* ============================================================================
Digital Metadata Remover — Design System
============================================================================
Direction: a serious technical utility, not a startup landing page.
Trustworthy, precise, quiet. No neon, no gradients, no glassmorphism,
no stock imagery, minimal iconography.
Layout note: every page uses .container-fluid + .row + .col-12 (see
templates), so content spans the full viewport width with a consistent
gutter — no centered max-width "container" whitespace on large screens.
========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');
:root {
/* --- Palette --- */
--bg: #FAFAF8;
--surface: #FFFFFF;
--ink: #161B20;
--ink-muted: #5C6670;
--ink-faint: #8A939D;
--border: #E3E7E8;
--border-strong: #CDD3D5;
--accent: #0E6B6A;
--accent-ink: #0A4F4E;
--accent-soft: #E7F3F2;
--accent-soft-strong: #D3E9E7;
--success: #1E8E4F;
--success-soft: #E7F5EC;
--warning: #A5680B;
--warning-soft: #FBF1DF;
--error: #B93B3F;
--error-soft: #FBEAEA;
/* --- Type --- */
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
/* --- Rhythm --- */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--gutter: clamp(1.25rem, 4vw, 3rem);
}
/* ---------------------------------------------------------------------------
Base
------------------------------------------------------------------------ */
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
color: var(--ink);
background: var(--bg);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink);
}
h1 { letter-spacing: -0.03em; }
p { color: var(--ink); }
.text-muted { color: var(--ink-muted) !important; }
.lead { color: var(--ink-muted); font-weight: 400; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-ink); text-decoration: none; }
hr { border-color: var(--border); opacity: 1; }
/* Full-bleed section rows: gutter scales with viewport instead of a hard
Bootstrap breakpoint container, so content genuinely reaches 100% width
while never touching the edge on small screens. */
.container-fluid { padding-left: var(--gutter); padding-right: var(--gutter); }
.bg-surface { background: var(--surface); }
.bg-tint { background: var(--accent-soft); }
.border-hair { border: 1px solid var(--border) !important; }
/* Monospace treatment for anything technical: metadata field names/values,
coordinates, counts. Gives the "precision" feel the brief asks for. */
.font-mono, code, .metadata-field, .metadata-value, .stat-figure {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
/* ---------------------------------------------------------------------------
Buttons
------------------------------------------------------------------------ */
.btn { border-radius: var(--radius-sm); font-weight: 600; padding: 0.62rem 1.35rem; }
.btn-lg { padding: 0.85rem 1.75rem; }
.btn-sm { padding: 0.4rem 0.9rem; font-weight: 500; }
.btn-primary {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
background: var(--accent-ink);
border-color: var(--accent-ink);
color: #fff;
}
.btn-outline-primary {
color: var(--accent);
border-color: var(--accent);
}
.btn-outline-primary:hover {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.btn-outline-secondary {
color: var(--ink);
border-color: var(--border-strong);
}
.btn-outline-secondary:hover {
background: var(--ink);
border-color: var(--ink);
color: #fff;
}
.btn:focus-visible, a:focus-visible, input:focus-visible, button:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ---------------------------------------------------------------------------
Badges / alerts — remapped from Bootstrap's default palette to ours
------------------------------------------------------------------------ */
.badge { font-weight: 600; letter-spacing: 0.01em; border-radius: var(--radius-sm); }
.badge.text-bg-danger { background: var(--error) !important; color: #fff !important; }
.badge.text-bg-warning { background: var(--warning) !important; color: #fff !important; }
.badge.text-bg-success { background: var(--success) !important; color: #fff !important; }
.badge.text-bg-secondary { background: var(--ink-faint) !important; color: #fff !important; }
.alert { border-radius: var(--radius-md); border: 1px solid transparent; }
.alert-success { background: var(--success-soft); color: #14602F; border-color: #CBE8D6; }
.alert-warning { background: var(--warning-soft); color: #7A4D08; border-color: #EFDBAF; }
.alert-danger { background: var(--error-soft); color: #8B2C2F; border-color: #F1CACB; }
.alert-secondary{ background: var(--surface); color: var(--ink-muted); border-color: var(--border); }
/* ---------------------------------------------------------------------------
Header / brand
------------------------------------------------------------------------ */
.site-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.brand-lockup { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand-mark { flex: none; display: block; color: var(--accent); }
.brand-text { display: inline-flex; flex-direction: column; line-height: 1.05; }
.brand-eyebrow {
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-faint);
}
.brand-name {
font-size: 1.05rem;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.01em;
}
.navbar-brand:hover .brand-name { color: var(--ink); }
.navbar-brand:hover { text-decoration: none; }
/* Logo image sizing — deliberately NOT using Bootstrap's .img-fluid here:
its `height: auto` overrides any height set via the HTML attribute,
which made the logo render at its native pixel size instead of the
intended height. Setting height explicitly in CSS (higher specificity
than the img's own attributes) avoids that, while max-width keeps it
from overflowing on very narrow screens. */
.site-logo {
display: block;
height: 50px;
width: auto;
max-width: 100%;
}
.site-logo-footer {
height: 36px;
}
.site-header .nav-link {
color: var(--ink-muted);
font-weight: 500;
font-size: 0.94rem;
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.site-header .nav-link:hover { color: var(--ink); }
.site-header .nav-icon { flex: none; color: var(--ink-faint); transition: color 0.15s ease; }
.site-header .nav-link:hover .nav-icon { color: var(--accent); }
/* Vertical separator between nav items — desktop horizontal nav only; on
mobile the collapsed menu stacks vertically, where a vertical rule
doesn't read as a separator, so it's hidden there (see d-none d-lg-block
on the element itself) and spacing alone does the job instead. */
.site-header .nav-sep {
width: 1px;
height: 1.1rem;
background: var(--border);
align-self: center;
}
/* ---------------------------------------------------------------------------
Hero
------------------------------------------------------------------------ */
.hero {
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.hero .eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-ink);
background: var(--accent-soft);
border-radius: 999px;
padding: 0.35rem 0.85rem;
}
.hero h1 { font-size: clamp(2rem, 4vw, 2.85rem); max-width: 18ch; }
.hero .lead { max-width: 52ch; font-size: 1.15rem; }
.reveal-list { list-style: none; margin: 0; padding: 0; }
.reveal-list li {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.55rem 0;
border-bottom: 1px solid var(--border);
font-size: 0.95rem;
}
.reveal-list li:last-child { border-bottom: none; }
.reveal-dot {
width: 0.5rem; height: 0.5rem; border-radius: 50%;
flex: none;
background: var(--accent);
}
/* Upload dropzone — elegant, integrated, not a dashed placeholder box */
.upload-panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: 0 1px 2px rgba(20, 24, 28, 0.04), 0 12px 32px -18px rgba(20, 24, 28, 0.18);
}
.upload-panel.drag-over {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.upload-drop-icon {
width: 3rem; height: 3rem;
border-radius: var(--radius-md);
background: var(--accent-soft);
color: var(--accent-ink);
display: flex; align-items: center; justify-content: center;
}
/* ---------------------------------------------------------------------------
Problem section — Image → hidden metadata → sensitive info
------------------------------------------------------------------------ */
.metadata-diagram {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: clamp(1.25rem, 3vw, 2.25rem);
}
.diagram-frame {
aspect-ratio: 4 / 3;
border-radius: var(--radius-md);
background:
linear-gradient(135deg, #EFEAE3 0%, #E4DCCF 55%, #D8CFC0 100%);
position: relative;
overflow: hidden;
border: 1px solid var(--border);
}
.diagram-frame::before {
content: "";
position: absolute; inset: 12%;
border-radius: var(--radius-sm);
background: linear-gradient(160deg, #B9CBD3 0%, #93A9B4 45%, #6E8892 100%);
opacity: 0.85;
}
.diagram-frame .diagram-sun {
position: absolute; top: 16%; right: 18%;
width: 14%; aspect-ratio: 1;
border-radius: 50%;
background: #F4E2A8;
}
.diagram-tag {
display: flex; align-items: center; justify-content: space-between;
gap: 0.75rem;
padding: 0.65rem 0.9rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 0.85rem;
}
.diagram-tag .k { color: var(--ink-muted); font-family: var(--font-mono); }
.diagram-tag .v { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.diagram-arrow { color: var(--ink-faint); font-size: 1.25rem; line-height: 1; }
/* ---------------------------------------------------------------------------
Process steps (01 / 02 / 03)
------------------------------------------------------------------------ */
.process-step { position: relative; padding-top: 0.25rem; }
.process-index {
font-family: var(--font-mono);
font-size: 0.85rem;
font-weight: 600;
color: var(--accent-ink);
letter-spacing: 0.05em;
display: block;
margin-bottom: 0.5rem;
}
/* Icon-badge variant of the numbered step, used on the home page's "How
it works" — .process-index above stays untouched since format-page.tpl,
seo-page.tpl, viewer.tpl and c2pa-checker.tpl all still use the plain
numeric version for their own numbered sections. */
.process-icon {
position: relative;
width: 3rem;
height: 3rem;
border-radius: var(--radius-md);
background: var(--accent-soft);
color: var(--accent-ink);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.process-icon-index {
position: absolute;
top: -0.5rem;
right: -0.5rem;
width: 1.3rem;
height: 1.3rem;
border-radius: 50%;
background: var(--ink);
color: #fff;
font-family: var(--font-mono);
font-size: 0.65rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.process-step h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.process-step p { color: var(--ink-muted); font-size: 0.94rem; margin: 0; }
.process-rule { border-top: 1px solid var(--border); padding-top: 1.5rem; }
/* ---------------------------------------------------------------------------
Trust / factual strip
------------------------------------------------------------------------ */
.fact-row { border-top: 1px solid var(--border); padding: 1.1rem 0; }
.fact-row:last-child { border-bottom: 1px solid var(--border); }
.fact-label { color: var(--ink-faint); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
/* ---------------------------------------------------------------------------
Ecosystem strip (HEIC Digital / AVIF Tools)
------------------------------------------------------------------------ */
.ecosystem-strip {
background: var(--ink);
color: #E7EBEC;
}
.ecosystem-strip a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.35); }
.ecosystem-strip a:hover { text-decoration-color: #fff; }
.ecosystem-node {
border: 1px solid rgba(255,255,255,0.16);
border-radius: var(--radius-md);
padding: 1rem 1.15rem;
}
.ecosystem-node.is-current { border-color: var(--accent); background: rgba(14,107,106,0.25); }
/* ---------------------------------------------------------------------------
About page — visual storytelling
------------------------------------------------------------------------ */
.about-hero { background: var(--surface); border-bottom: 1px solid var(--border); }
.timeline-rail { position: relative; padding-left: 1.75rem; }
.timeline-rail::before {
content: "";
position: absolute; left: 0.28rem; top: 0.4rem; bottom: 0.4rem;
width: 1px; background: var(--border-strong);
}
.timeline-item { position: relative; padding-bottom: 2rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
content: "";
position: absolute; left: -1.75rem; top: 0.3rem;
width: 0.55rem; height: 0.55rem; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
}
.timeline-item h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.timeline-item p { color: var(--ink-muted); margin-bottom: 0; }
.pull-statement {
font-size: clamp(1.3rem, 2.4vw, 1.9rem);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.35;
color: var(--ink);
}
.flow-chip {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.5rem 1rem;
border: 1px solid var(--border);
border-radius: 999px;
font-size: 0.85rem;
font-weight: 600;
color: var(--ink-muted);
background: var(--surface);
}
.flow-chip.is-active { color: var(--accent-ink); border-color: var(--accent-soft-strong); background: var(--accent-soft); }
.flow-sep { color: var(--ink-faint); }
.people-card {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.5rem;
background: var(--surface);
}
.people-avatar {
width: 2.75rem; height: 2.75rem; border-radius: 50%;
background: var(--accent-soft);
color: var(--accent-ink);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 1.05rem;
}
/* ---------------------------------------------------------------------------
Footer
------------------------------------------------------------------------ */
.site-footer { background: var(--surface); }
.site-footer a { color: var(--ink-muted); }
.site-footer a:hover { color: var(--accent-ink); text-decoration: none; }
.footer-heading { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); font-weight: 600; }
/* ---------------------------------------------------------------------------
Viewer / metadata tool — light reskin only (functionality unchanged)
------------------------------------------------------------------------ */
.bg-light-subtle { background-color: var(--accent-soft) !important; }
.privacy-bar { height: .55rem; border-radius: 999px; background: var(--border); overflow: hidden; }
.privacy-bar-fill { height: 100%; border-radius: 999px; }
.privacy-level-low { background: var(--ink-faint); }
.privacy-level-medium { background: var(--warning); }
.privacy-level-high { background: var(--error); }
.privacy-level-none { background: var(--success); }
.table-responsive table td.text-break { word-break: break-word; }
.table > :not(caption) > * > * { color: var(--ink); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--bg); }
#single-upload-form.drag-over { outline: 2px dashed var(--accent); outline-offset: 4px; }
/* Trust badges shown right where the upload decision actually happens */
.trust-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
font-weight: 600;
color: var(--ink-muted);
background: var(--bg);
border: 1px solid var(--border);
border-radius: 999px;
padding: 0.3rem 0.75rem;
}
.trust-badge-dot {
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
background: var(--success);
flex: none;
}
/* Icon badge for each removed metadata category — reinforces "this was
found and removed" visually, not just a plain checklist. */
.removed-icon {
flex: none;
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
background: var(--success-soft);
color: var(--success);
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Same icon-badge language, reused for the numbered "what gets removed" /
"what this does not do" lists on the removal-focused tool pages. */
.point-icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0.05rem;
}
.point-icon-success { background: var(--success-soft); color: var(--success); }
.point-icon-neutral { background: var(--bg); color: var(--ink-faint); border: 1px solid var(--border); }
/* Lets a