794 lines
25 KiB
HTML
794 lines
25 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="da">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|||
|
|
<title>PrimeGrading.dk — Professionel Kortgradering</title>
|
|||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|||
|
|
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet" />
|
|||
|
|
<style>
|
|||
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|||
|
|
|
|||
|
|
:root {
|
|||
|
|
--bg: #0a0a0f;
|
|||
|
|
--surface: #111118;
|
|||
|
|
--border: #1e1e2e;
|
|||
|
|
--gold: #c9a84c;
|
|||
|
|
--gold-light:#f0d070;
|
|||
|
|
--red: #cc2222;
|
|||
|
|
--text: #e8e6f0;
|
|||
|
|
--muted: #7a7890;
|
|||
|
|
--holo1: #5af0d8;
|
|||
|
|
--holo2: #b06ef5;
|
|||
|
|
--holo3: #f06e6e;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
html { scroll-behavior: smooth; }
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
background: var(--bg);
|
|||
|
|
color: var(--text);
|
|||
|
|
font-family: 'Inter', sans-serif;
|
|||
|
|
font-weight: 400;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── NAV ── */
|
|||
|
|
nav {
|
|||
|
|
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
|||
|
|
display: flex; align-items: center; justify-content: space-between;
|
|||
|
|
padding: 1rem 2.5rem;
|
|||
|
|
background: rgba(10,10,15,0.85);
|
|||
|
|
backdrop-filter: blur(12px);
|
|||
|
|
border-bottom: 1px solid var(--border);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo {
|
|||
|
|
font-family: 'Cinzel', serif;
|
|||
|
|
font-weight: 900;
|
|||
|
|
font-size: 1.3rem;
|
|||
|
|
letter-spacing: 0.08em;
|
|||
|
|
background: linear-gradient(135deg, var(--gold), var(--gold-light), var(--gold));
|
|||
|
|
-webkit-background-clip: text;
|
|||
|
|
-webkit-text-fill-color: transparent;
|
|||
|
|
background-clip: text;
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo span {
|
|||
|
|
color: var(--red);
|
|||
|
|
-webkit-text-fill-color: var(--red);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
nav ul {
|
|||
|
|
list-style: none;
|
|||
|
|
display: flex; gap: 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
nav ul a {
|
|||
|
|
color: var(--muted);
|
|||
|
|
text-decoration: none;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
font-weight: 500;
|
|||
|
|
letter-spacing: 0.05em;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
transition: color 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
nav ul a:hover { color: var(--gold); }
|
|||
|
|
|
|||
|
|
/* ── HERO ── */
|
|||
|
|
.hero {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
display: flex; flex-direction: column;
|
|||
|
|
align-items: center; justify-content: center;
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 6rem 2rem 4rem;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-glow {
|
|||
|
|
position: absolute; inset: 0; z-index: 0;
|
|||
|
|
background:
|
|||
|
|
radial-gradient(ellipse 60% 40% at 50% 30%, rgba(201,168,76,0.08) 0%, transparent 70%),
|
|||
|
|
radial-gradient(ellipse 40% 30% at 20% 80%, rgba(90,240,216,0.04) 0%, transparent 60%),
|
|||
|
|
radial-gradient(ellipse 40% 30% at 80% 70%, rgba(176,110,245,0.04) 0%, transparent 60%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero > * { position: relative; z-index: 1; }
|
|||
|
|
|
|||
|
|
.eyebrow {
|
|||
|
|
display: inline-block;
|
|||
|
|
font-size: 0.7rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
letter-spacing: 0.2em;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
color: var(--gold);
|
|||
|
|
border: 1px solid rgba(201,168,76,0.3);
|
|||
|
|
padding: 0.35rem 1rem;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1 {
|
|||
|
|
font-family: 'Cinzel', serif;
|
|||
|
|
font-weight: 900;
|
|||
|
|
font-size: clamp(2.8rem, 7vw, 6rem);
|
|||
|
|
line-height: 1.05;
|
|||
|
|
letter-spacing: -0.01em;
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1 .line1 {
|
|||
|
|
display: block;
|
|||
|
|
background: linear-gradient(135deg, #fff 30%, var(--gold-light));
|
|||
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1 .line2 {
|
|||
|
|
display: block;
|
|||
|
|
background: linear-gradient(135deg, var(--gold), var(--gold-light), var(--holo1));
|
|||
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-sub {
|
|||
|
|
max-width: 520px;
|
|||
|
|
color: var(--muted);
|
|||
|
|
font-size: 1.05rem;
|
|||
|
|
margin-bottom: 2.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cta-group {
|
|||
|
|
display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-primary {
|
|||
|
|
background: linear-gradient(135deg, var(--gold), #a87b20);
|
|||
|
|
color: #0a0a0f;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
letter-spacing: 0.05em;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
padding: 0.85rem 2rem;
|
|||
|
|
border: none; cursor: pointer;
|
|||
|
|
text-decoration: none;
|
|||
|
|
clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
|
|||
|
|
transition: opacity 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-primary:hover { opacity: 0.85; }
|
|||
|
|
|
|||
|
|
.btn-secondary {
|
|||
|
|
background: transparent;
|
|||
|
|
color: var(--gold);
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
letter-spacing: 0.05em;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
padding: 0.85rem 2rem;
|
|||
|
|
border: 1px solid rgba(201,168,76,0.4);
|
|||
|
|
cursor: pointer;
|
|||
|
|
text-decoration: none;
|
|||
|
|
clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
|
|||
|
|
transition: border-color 0.2s, color 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-secondary:hover { border-color: var(--gold); color: var(--gold-light); }
|
|||
|
|
|
|||
|
|
/* ── HOLO CARDS ROW ── */
|
|||
|
|
.cards-row {
|
|||
|
|
display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap;
|
|||
|
|
margin-top: 4rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.holo-card {
|
|||
|
|
width: 120px; height: 168px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.holo-card:hover {
|
|||
|
|
transform: translateY(-8px) rotate(-1deg);
|
|||
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 20px rgba(201,168,76,0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.holo-card .card-bg {
|
|||
|
|
position: absolute; inset: 0;
|
|||
|
|
background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.holo-card .card-shine {
|
|||
|
|
position: absolute; inset: 0;
|
|||
|
|
background: linear-gradient(
|
|||
|
|
115deg,
|
|||
|
|
transparent 20%,
|
|||
|
|
rgba(90,240,216,0.15) 35%,
|
|||
|
|
rgba(176,110,245,0.15) 50%,
|
|||
|
|
rgba(240,110,110,0.15) 65%,
|
|||
|
|
transparent 80%
|
|||
|
|
);
|
|||
|
|
opacity: 0;
|
|||
|
|
transition: opacity 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.holo-card:hover .card-shine { opacity: 1; }
|
|||
|
|
|
|||
|
|
.holo-card .card-grade {
|
|||
|
|
position: absolute; bottom: 8px; right: 8px;
|
|||
|
|
background: var(--gold);
|
|||
|
|
color: #0a0a0f;
|
|||
|
|
font-family: 'Cinzel', serif;
|
|||
|
|
font-weight: 900;
|
|||
|
|
font-size: 1.1rem;
|
|||
|
|
width: 28px; height: 28px;
|
|||
|
|
display: flex; align-items: center; justify-content: center;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.holo-card .card-label {
|
|||
|
|
position: absolute; top: 8px; left: 8px; right: 8px;
|
|||
|
|
font-size: 0.5rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
letter-spacing: 0.1em;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
color: rgba(255,255,255,0.6);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.holo-card .card-art {
|
|||
|
|
position: absolute; inset: 20px 8px 40px;
|
|||
|
|
display: flex; align-items: center; justify-content: center;
|
|||
|
|
font-size: 2.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── SECTION ── */
|
|||
|
|
section { padding: 5rem 2rem; }
|
|||
|
|
|
|||
|
|
.container { max-width: 1000px; margin: 0 auto; }
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-family: 'Cinzel', serif;
|
|||
|
|
font-size: clamp(1.6rem, 3vw, 2.4rem);
|
|||
|
|
font-weight: 700;
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
color: var(--text);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title span { color: var(--gold); }
|
|||
|
|
|
|||
|
|
.section-lead {
|
|||
|
|
color: var(--muted);
|
|||
|
|
max-width: 520px;
|
|||
|
|
margin-bottom: 3rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── HOW IT WORKS ── */
|
|||
|
|
#how { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
|
|||
|
|
|
|||
|
|
.steps {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|||
|
|
gap: 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step {
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
border: 1px solid var(--border);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
position: relative;
|
|||
|
|
background: var(--bg);
|
|||
|
|
transition: border-color 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step:hover { border-color: rgba(201,168,76,0.4); }
|
|||
|
|
|
|||
|
|
.step-num {
|
|||
|
|
font-family: 'Cinzel', serif;
|
|||
|
|
font-size: 2.5rem;
|
|||
|
|
font-weight: 900;
|
|||
|
|
color: rgba(201,168,76,0.15);
|
|||
|
|
line-height: 1;
|
|||
|
|
margin-bottom: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step h3 {
|
|||
|
|
font-size: 0.95rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
color: var(--text);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step p { font-size: 0.85rem; color: var(--muted); }
|
|||
|
|
|
|||
|
|
/* ── GRADING SCALE ── */
|
|||
|
|
.scale {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|||
|
|
gap: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grade-chip {
|
|||
|
|
border: 1px solid var(--border);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
padding: 1rem;
|
|||
|
|
text-align: center;
|
|||
|
|
transition: border-color 0.2s, background 0.2s;
|
|||
|
|
cursor: default;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grade-chip:hover {
|
|||
|
|
background: rgba(201,168,76,0.05);
|
|||
|
|
border-color: rgba(201,168,76,0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grade-chip.prime-grade {
|
|||
|
|
grid-column: 1 / -1;
|
|||
|
|
background: linear-gradient(135deg, rgba(201,168,76,0.08), rgba(90,240,216,0.04), rgba(176,110,245,0.04));
|
|||
|
|
border-color: rgba(201,168,76,0.5);
|
|||
|
|
display: flex; align-items: center; gap: 1.5rem;
|
|||
|
|
padding: 1.25rem 1.5rem;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grade-chip.prime-grade:hover {
|
|||
|
|
border-color: var(--gold);
|
|||
|
|
background: linear-gradient(135deg, rgba(201,168,76,0.12), rgba(90,240,216,0.06), rgba(176,110,245,0.06));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.prime-grade-star { font-size: 2rem; flex-shrink: 0; }
|
|||
|
|
.prime-grade-info { flex: 1; }
|
|||
|
|
|
|||
|
|
.prime-grade-title {
|
|||
|
|
font-family: 'Cinzel', serif;
|
|||
|
|
font-size: 1.1rem; font-weight: 900;
|
|||
|
|
background: linear-gradient(135deg, var(--gold), var(--gold-light), var(--holo1));
|
|||
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.prime-grade-sub {
|
|||
|
|
font-size: 0.78rem; color: var(--muted); margin-top: 0.25rem; line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grade-score {
|
|||
|
|
font-family: 'Cinzel', serif;
|
|||
|
|
font-size: 2rem;
|
|||
|
|
font-weight: 900;
|
|||
|
|
background: linear-gradient(135deg, var(--gold), var(--gold-light));
|
|||
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grade-label {
|
|||
|
|
font-size: 0.7rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
letter-spacing: 0.1em;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
color: var(--muted);
|
|||
|
|
margin-top: 0.2rem;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── LABELS SECTION ── */
|
|||
|
|
#labels { border-top: 1px solid var(--border); }
|
|||
|
|
|
|||
|
|
.labels-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
|||
|
|
gap: 1rem;
|
|||
|
|
margin-bottom: 3rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label-card {
|
|||
|
|
border: 1px solid var(--border);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
padding: 1.25rem 1.5rem;
|
|||
|
|
display: flex; align-items: flex-start; gap: 1rem;
|
|||
|
|
background: var(--surface);
|
|||
|
|
transition: border-color 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label-card:hover { border-color: rgba(201,168,76,0.3); }
|
|||
|
|
|
|||
|
|
.label-dot {
|
|||
|
|
width: 13px; height: 13px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
flex-shrink: 0; margin-top: 0.3rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label-card h4 { font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 0.3rem; }
|
|||
|
|
.label-card p { font-size: 0.8rem; color: var(--muted); line-height: 1.5; }
|
|||
|
|
|
|||
|
|
.compare-box {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 1fr;
|
|||
|
|
gap: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 600px) { .compare-box { grid-template-columns: 1fr; } }
|
|||
|
|
|
|||
|
|
.compare-col {
|
|||
|
|
border: 1px solid var(--border);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
background: var(--surface);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.compare-col.prime { border-color: rgba(201,168,76,0.4); background: rgba(201,168,76,0.03); }
|
|||
|
|
|
|||
|
|
.compare-col h4 {
|
|||
|
|
font-family: 'Cinzel', serif;
|
|||
|
|
font-size: 0.95rem; font-weight: 700;
|
|||
|
|
margin-bottom: 1rem; color: var(--text);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.compare-col.prime h4 {
|
|||
|
|
background: linear-gradient(135deg, var(--gold), var(--gold-light));
|
|||
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.compare-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
|
|||
|
|
|
|||
|
|
.compare-col ul li {
|
|||
|
|
font-size: 0.85rem; color: var(--muted);
|
|||
|
|
padding-left: 1.2rem; position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.compare-col ul li::before {
|
|||
|
|
content: '—'; position: absolute; left: 0;
|
|||
|
|
color: var(--gold); opacity: 0.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.compare-col.prime ul li::before { opacity: 1; }
|
|||
|
|
|
|||
|
|
/* ── SUBMIT FORM ── */
|
|||
|
|
#submit { background: var(--surface); border-top: 1px solid var(--border); }
|
|||
|
|
|
|||
|
|
.form-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 1fr;
|
|||
|
|
gap: 1.25rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
|
|||
|
|
|
|||
|
|
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
|
|||
|
|
.form-group.full { grid-column: 1 / -1; }
|
|||
|
|
|
|||
|
|
label {
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
letter-spacing: 0.08em;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
color: var(--muted);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input, select, textarea {
|
|||
|
|
background: var(--bg);
|
|||
|
|
border: 1px solid var(--border);
|
|||
|
|
color: var(--text);
|
|||
|
|
padding: 0.75rem 1rem;
|
|||
|
|
font-family: 'Inter', sans-serif;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
outline: none;
|
|||
|
|
transition: border-color 0.2s;
|
|||
|
|
appearance: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input:focus, select:focus, textarea:focus {
|
|||
|
|
border-color: var(--gold);
|
|||
|
|
box-shadow: 0 0 0 2px rgba(201,168,76,0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
textarea { resize: vertical; min-height: 100px; }
|
|||
|
|
|
|||
|
|
select { cursor: pointer; }
|
|||
|
|
|
|||
|
|
.submit-btn {
|
|||
|
|
margin-top: 0.5rem;
|
|||
|
|
background: linear-gradient(135deg, var(--gold), #a87b20);
|
|||
|
|
color: #0a0a0f;
|
|||
|
|
font-weight: 700;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
letter-spacing: 0.1em;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
padding: 0.9rem 2.5rem;
|
|||
|
|
border: none; cursor: pointer;
|
|||
|
|
clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
|
|||
|
|
transition: opacity 0.2s;
|
|||
|
|
align-self: flex-start;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.submit-btn:hover { opacity: 0.85; }
|
|||
|
|
|
|||
|
|
.form-note {
|
|||
|
|
margin-top: 1rem;
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
color: var(--muted);
|
|||
|
|
font-style: italic;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── FOOTER ── */
|
|||
|
|
footer {
|
|||
|
|
border-top: 1px solid var(--border);
|
|||
|
|
padding: 2rem;
|
|||
|
|
text-align: center;
|
|||
|
|
color: var(--muted);
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
footer strong { color: var(--gold); font-family: 'Cinzel', serif; }
|
|||
|
|
|
|||
|
|
/* ── TOAST ── */
|
|||
|
|
#toast {
|
|||
|
|
position: fixed; bottom: 2rem; right: 2rem; z-index: 999;
|
|||
|
|
background: var(--surface);
|
|||
|
|
border: 1px solid var(--gold);
|
|||
|
|
color: var(--text);
|
|||
|
|
padding: 1rem 1.5rem;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translateY(10px);
|
|||
|
|
transition: opacity 0.3s, transform 0.3s;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#toast.show { opacity: 1; transform: translateY(0); }
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<nav>
|
|||
|
|
<a class="logo" href="#">Prime<span>Grading</span>.dk</a>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="#how">Sådan virker det</a></li>
|
|||
|
|
<li><a href="#grades">Karakterskala</a></li>
|
|||
|
|
<li><a href="#labels">Labels</a></li>
|
|||
|
|
<li><a href="#submit">Indsend kort</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
<!-- HERO -->
|
|||
|
|
<section class="hero">
|
|||
|
|
<div class="hero-glow"></div>
|
|||
|
|
<div class="eyebrow">Pokémon · One Piece · Kortgradering</div>
|
|||
|
|
<h1>
|
|||
|
|
<span class="line1">Dine kort.</span>
|
|||
|
|
<span class="line2">Officielt bedømt.</span>
|
|||
|
|
</h1>
|
|||
|
|
<p class="hero-sub">PrimeGrading.dk grader dine samlerkort professionelt — og beskytter dem i en forseglet slab, så de holder sin værdi.</p>
|
|||
|
|
<div class="cta-group">
|
|||
|
|
<a class="btn-primary" href="#submit">Indsend dine kort</a>
|
|||
|
|
<a class="btn-secondary" href="#how">Se processen</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="cards-row">
|
|||
|
|
<div class="holo-card">
|
|||
|
|
<div class="card-bg"></div>
|
|||
|
|
<div class="card-shine"></div>
|
|||
|
|
<div class="card-label">Pokémon TCG</div>
|
|||
|
|
<div class="card-art">⚡</div>
|
|||
|
|
<div class="card-grade">10</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="holo-card">
|
|||
|
|
<div class="card-bg" style="background:linear-gradient(135deg,#1a0a2e,#2e1650,#1a0a2e)"></div>
|
|||
|
|
<div class="card-shine"></div>
|
|||
|
|
<div class="card-label">One Piece TCG</div>
|
|||
|
|
<div class="card-art">☠️</div>
|
|||
|
|
<div class="card-grade">9</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="holo-card">
|
|||
|
|
<div class="card-bg" style="background:linear-gradient(135deg,#0a1a2e,#0f3460,#0a1a2e)"></div>
|
|||
|
|
<div class="card-shine"></div>
|
|||
|
|
<div class="card-label">Pokémon TCG</div>
|
|||
|
|
<div class="card-art">🔥</div>
|
|||
|
|
<div class="card-grade">8</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="holo-card">
|
|||
|
|
<div class="card-bg" style="background:linear-gradient(135deg,#0a2e1a,#0a3020,#0a2e1a)"></div>
|
|||
|
|
<div class="card-shine"></div>
|
|||
|
|
<div class="card-label">One Piece TCG</div>
|
|||
|
|
<div class="card-art">⚓</div>
|
|||
|
|
<div class="card-grade">9</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="holo-card">
|
|||
|
|
<div class="card-bg" style="background:linear-gradient(135deg,#2e1a0a,#3d1f0a,#2e1a0a)"></div>
|
|||
|
|
<div class="card-shine"></div>
|
|||
|
|
<div class="card-label">Pokémon TCG</div>
|
|||
|
|
<div class="card-art">💧</div>
|
|||
|
|
<div class="card-grade">10</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- HOW IT WORKS -->
|
|||
|
|
<section id="how">
|
|||
|
|
<div class="container">
|
|||
|
|
<h2 class="section-title">Sådan <span>virker det</span></h2>
|
|||
|
|
<p class="section-lead">Fire enkle trin fra din brevkasse til en certificeret slab.</p>
|
|||
|
|
<div class="steps">
|
|||
|
|
<div class="step">
|
|||
|
|
<div class="step-num">01</div>
|
|||
|
|
<h3>Indsend dine kort</h3>
|
|||
|
|
<p>Udfyld formularen med kortoplysninger og send dem afsted i sikker emballage.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="step">
|
|||
|
|
<div class="step-num">02</div>
|
|||
|
|
<h3>Professionel inspektion</h3>
|
|||
|
|
<p>Hvert kort inspiceres under lup for centering, hjørner, kanter og overflade.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="step">
|
|||
|
|
<div class="step-num">03</div>
|
|||
|
|
<h3>Karakter tildeles</h3>
|
|||
|
|
<p>Kortet får en score fra 1–10 baseret på vores standardiserede graderingsskala.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="step">
|
|||
|
|
<div class="step-num">04</div>
|
|||
|
|
<h3>Forseglet slab</h3>
|
|||
|
|
<p>Kortet forsegles i en UV-beskyttende slab med din score og en unik serienummer.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- GRADES -->
|
|||
|
|
<section id="grades">
|
|||
|
|
<div class="container">
|
|||
|
|
<h2 class="section-title">Vores <span>karakterskala</span></h2>
|
|||
|
|
<p class="section-lead">Fra Poor til den ekslusive PRIME GRADE — vores højeste og mest prestigefyldte vurdering.</p>
|
|||
|
|
<div class="scale">
|
|||
|
|
|
|||
|
|
<!-- PRIME GRADE — særklasse øverst -->
|
|||
|
|
<div class="grade-chip prime-grade">
|
|||
|
|
<div class="prime-grade-star">⭐</div>
|
|||
|
|
<div class="prime-grade-info">
|
|||
|
|
<span class="prime-grade-title">PRIME GRADE — Ultra Premium</span>
|
|||
|
|
<span class="prime-grade-sub">Fire perfekte 10'ere <strong>plus</strong> en ekstra visuel vurdering: eye appeal, printkvalitet og ingen fabriksfejl. Kun tildelt de absolut bedste kort med guld/grøn label.</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grade-chip"><span class="grade-score">10</span><span class="grade-label">Gem Mint</span></div>
|
|||
|
|
<div class="grade-chip"><span class="grade-score">9.5</span><span class="grade-label">Mint+</span></div>
|
|||
|
|
<div class="grade-chip"><span class="grade-score">9</span><span class="grade-label">Mint</span></div>
|
|||
|
|
<div class="grade-chip"><span class="grade-score">8.5</span><span class="grade-label">Near Mint+</span></div>
|
|||
|
|
<div class="grade-chip"><span class="grade-score">8</span><span class="grade-label">Near Mint</span></div>
|
|||
|
|
<div class="grade-chip"><span class="grade-score">7.5</span><span class="grade-label">Excellent+</span></div>
|
|||
|
|
<div class="grade-chip"><span class="grade-score">7</span><span class="grade-label">Excellent</span></div>
|
|||
|
|
<div class="grade-chip"><span class="grade-score">6</span><span class="grade-label">Very Good</span></div>
|
|||
|
|
<div class="grade-chip"><span class="grade-score">5</span><span class="grade-label">Good</span></div>
|
|||
|
|
<div class="grade-chip"><span class="grade-score">4</span><span class="grade-label">Fair</span></div>
|
|||
|
|
<div class="grade-chip"><span class="grade-score">3</span><span class="grade-label">Poor</span></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- SPECIAL LABELS -->
|
|||
|
|
<section id="labels">
|
|||
|
|
<div class="container">
|
|||
|
|
<h2 class="section-title">Special <span>Labels</span></h2>
|
|||
|
|
<p class="section-lead">Udover standardskalaen tildeler vi særlige labels til kort, der fortjener ekstra anerkendelse.</p>
|
|||
|
|
|
|||
|
|
<div class="labels-grid">
|
|||
|
|
<div class="label-card">
|
|||
|
|
<div class="label-dot" style="background:#4caf50;"></div>
|
|||
|
|
<div>
|
|||
|
|
<h4>Prime Standard</h4>
|
|||
|
|
<p>Vores grundlæggende label for godkendte og vurderede kort.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="label-card">
|
|||
|
|
<div class="label-dot" style="background:#c9a84c;"></div>
|
|||
|
|
<div>
|
|||
|
|
<h4>Gold Label</h4>
|
|||
|
|
<p>Tildelt kort med særlig høj score og fremragende stand.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="label-card">
|
|||
|
|
<div class="label-dot" style="background:#e05c5c;"></div>
|
|||
|
|
<div>
|
|||
|
|
<h4>Founder Edition</h4>
|
|||
|
|
<p>Eksklusivt label til de første kort vurderet af PrimeGrading.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="label-card">
|
|||
|
|
<div class="label-dot" style="background:#555570;"></div>
|
|||
|
|
<div>
|
|||
|
|
<h4>Black Label</h4>
|
|||
|
|
<p>Kræver perfekte 10'ere i alle subgrades — centering, hjørner, kanter og overflade.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="label-card">
|
|||
|
|
<div class="label-dot" style="background:#f0d070; box-shadow: 0 0 6px rgba(240,208,112,0.6);"></div>
|
|||
|
|
<div>
|
|||
|
|
<h4>⭐ PRIME GRADE</h4>
|
|||
|
|
<p>Det absolut højeste label. Kun til kort der er perfekte i alle subgrades <em>og</em> består den visuelle vurdering.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h3 class="section-title" style="font-size:1.2rem; margin-bottom:1rem;">Black Label <span>vs PRIME GRADE</span></h3>
|
|||
|
|
<div class="compare-box">
|
|||
|
|
<div class="compare-col">
|
|||
|
|
<h4>Black Label</h4>
|
|||
|
|
<ul>
|
|||
|
|
<li>Fire 10'ere i alle subgrades</li>
|
|||
|
|
<li>Sort label</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="compare-col prime">
|
|||
|
|
<h4>PRIME GRADE</h4>
|
|||
|
|
<ul>
|
|||
|
|
<li>Fire perfekte 10'ere i alle subgrades</li>
|
|||
|
|
<li>Ekstra visuel vurdering: eye appeal, printkvalitet, ingen fabriksfejl</li>
|
|||
|
|
<li>Guld/grøn label</li>
|
|||
|
|
<li>Kun de absolut bedste kort opnår dette</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- SUBMIT -->
|
|||
|
|
<section id="submit">
|
|||
|
|
<div class="container">
|
|||
|
|
<h2 class="section-title">Indsend <span>dine kort</span></h2>
|
|||
|
|
<p class="section-lead">Udfyld formularen herunder, så vender vi tilbage med en fragtlabel og bekræftelse.</p>
|
|||
|
|
<div class="form-grid">
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="name">Dit navn</label>
|
|||
|
|
<input type="text" id="name" placeholder="Jens Hansen" />
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="email">E-mail</label>
|
|||
|
|
<input type="email" id="email" placeholder="jens@eksempel.dk" />
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="cardtype">Korttype</label>
|
|||
|
|
<select id="cardtype">
|
|||
|
|
<option value="">Vælg korttype…</option>
|
|||
|
|
<option>Pokémon TCG</option>
|
|||
|
|
<option>One Piece TCG</option>
|
|||
|
|
<option>Andet</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="count">Antal kort</label>
|
|||
|
|
<input type="number" id="count" min="1" max="100" placeholder="1" />
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group full">
|
|||
|
|
<label for="cards">Kortnavne / sæt</label>
|
|||
|
|
<textarea id="cards" placeholder="F.eks. Charizard VMAX — Brilliant Stars #018, Monkey D. Luffy — OP01-060..."></textarea>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group full">
|
|||
|
|
<button class="submit-btn" onclick="handleSubmit()">Send forespørgsel</button>
|
|||
|
|
<p class="form-note">* Dette er en demosformular — der sendes ikke rigtige data nogen steder.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<footer>
|
|||
|
|
<p><strong>PrimeGrading</strong>.dk — Kortgradering for samlere · Pokémon & One Piece · Danmark</p>
|
|||
|
|
<p style="margin-top:0.5rem; font-size:0.7rem;">Dette er en demo-hjemmeside lavet for sjov. Vi er ikke tilknyttet Nintendo, The Pokémon Company eller Bandai.</p>
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
<div id="toast">✓ Din forespørgsel er modtaget — vi vender snart tilbage!</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
function handleSubmit() {
|
|||
|
|
const toast = document.getElementById('toast');
|
|||
|
|
toast.classList.add('show');
|
|||
|
|
setTimeout(() => toast.classList.remove('show'), 3500);
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|