GCH
01f82c6c22
- primegrading-logo.svg: font-family 'Arial Black' → 'Arial', font-weight 900 → 400
- index.html: dark-mode card-bg fjernet, .card-label farve rettet
1347 lines
43 KiB
HTML
1347 lines
43 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 — Kortgradering med kant</title>
|
||
<meta property="og:title" content="PrimeGrading.dk — Dine kort. Vi gør vores bedste. (det er ikke godt nok)" />
|
||
<meta property="og:description" content="Kortforvanskning for samlere. Pokémon & One Piece TCG. Fra bøjning til total PRIME KNÆK — vi ødelægger dine kort med stolthed." />
|
||
<meta property="og:url" content="https://primegrading.dk/" />
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:site_name" content="PrimeGrading.dk" />
|
||
<meta property="og:image" content="https://primegrading.dk/preview.png" />
|
||
<meta property="og:image:width" content="1200" />
|
||
<meta property="og:image:height" content="630" />
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta name="twitter:title" content="PrimeGrading.dk — Dine kort. Vi gør vores bedste." />
|
||
<meta name="twitter:description" content="Kortforvanskning for samlere. Pokémon & One Piece. Bøjning, knæk, vandbad — vi gør det hele." />
|
||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='2' y='4' width='28' height='24' rx='3' fill='%23f5f4f0' stroke='%23c9a84c' stroke-width='1.5'/%3E%3Cpolyline points='7,28 13,15 18,20 25,7' fill='none' stroke='%23c9a84c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" />
|
||
<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: #f5f0e5;
|
||
--surface: #ece7db;
|
||
--border: #d8d2c4;
|
||
--gold: #c9a84c;
|
||
--gold-light:#e6c860;
|
||
--red: #cc2222;
|
||
--text: #2c2820;
|
||
--muted: #7a7262;
|
||
--text-light:#f0eef0;
|
||
--holo1: #3ab0a0;
|
||
--holo2: #8a4ec5;
|
||
--holo3: #d04e4e;
|
||
}
|
||
|
||
.dark-mode {
|
||
--bg: #0a0a0f;
|
||
--surface: #111118;
|
||
--border: #1e1e2e;
|
||
--gold: #c9a84c;
|
||
--gold-light:#f0d070;
|
||
--red: #cc2222;
|
||
--text: #e8e6f0;
|
||
--muted: #7a7890;
|
||
--text-light:#e8e6f0;
|
||
--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;
|
||
transition: background 0.3s, color 0.3s;
|
||
}
|
||
|
||
/* ── 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(245,244,240,0.85);
|
||
backdrop-filter: blur(12px);
|
||
border-bottom: 1px solid var(--border);
|
||
transition: background 0.3s;
|
||
}
|
||
|
||
.dark-mode nav {
|
||
background: rgba(10,10,15,0.85);
|
||
}
|
||
|
||
.logo {
|
||
display: flex;
|
||
align-items: center;
|
||
text-decoration: none;
|
||
height: 48px;
|
||
}
|
||
|
||
.logo img {
|
||
display: block;
|
||
height: 48px;
|
||
width: auto;
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.logo { height: 38px; }
|
||
.logo img { height: 38px; }
|
||
}
|
||
|
||
.nav-right {
|
||
display: flex; align-items: center; gap: 1rem;
|
||
}
|
||
|
||
.theme-toggle {
|
||
background: none; border: 1px solid var(--border);
|
||
color: var(--muted); cursor: pointer;
|
||
font-size: 1rem; padding: 0.4rem 0.6rem;
|
||
border-radius: 4px; line-height: 1;
|
||
transition: border-color 0.2s, color 0.2s;
|
||
}
|
||
|
||
.theme-toggle:hover {
|
||
border-color: var(--gold); color: var(--gold);
|
||
}
|
||
|
||
.hamburger {
|
||
display: none;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
padding: 4px;
|
||
z-index: 101;
|
||
}
|
||
|
||
.hamburger span {
|
||
display: block;
|
||
width: 24px;
|
||
height: 2px;
|
||
background: var(--text);
|
||
transition: transform 0.3s, opacity 0.3s, background 0.3s;
|
||
}
|
||
|
||
.hamburger.active span:nth-child(1) {
|
||
transform: translateY(7px) rotate(45deg);
|
||
}
|
||
|
||
.hamburger.active span:nth-child(2) {
|
||
opacity: 0;
|
||
}
|
||
|
||
.hamburger.active span:nth-child(3) {
|
||
transform: translateY(-7px) rotate(-45deg);
|
||
}
|
||
|
||
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); }
|
||
|
||
/* ── MOBILE NAV ── */
|
||
@media (max-width: 768px) {
|
||
.hamburger { display: flex; }
|
||
nav { padding: 1rem 1.25rem; }
|
||
|
||
nav ul {
|
||
position: fixed; top: 0; right: -100%;
|
||
width: 260px; height: 100vh;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
background: rgba(245,244,240,0.98);
|
||
backdrop-filter: blur(16px);
|
||
border-left: 1px solid var(--border);
|
||
padding: 5rem 2rem 2rem;
|
||
transition: right 0.3s ease;
|
||
z-index: 100;
|
||
}
|
||
|
||
.dark-mode nav ul {
|
||
background: rgba(10,10,15,0.98);
|
||
}
|
||
|
||
nav ul.open { right: 0; }
|
||
|
||
nav ul a {
|
||
display: block;
|
||
padding: 1rem 0;
|
||
font-size: 0.95rem;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
nav ul li:last-child a { border-bottom: none; }
|
||
}
|
||
|
||
/* ── 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.06) 0%, transparent 70%),
|
||
radial-gradient(ellipse 40% 30% at 20% 80%, rgba(58,176,160,0.03) 0%, transparent 60%),
|
||
radial-gradient(ellipse 40% 30% at 80% 70%, rgba(138,78,197,0.03) 0%, transparent 60%);
|
||
}
|
||
|
||
.dark-mode .hero-glow {
|
||
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;
|
||
color: var(--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(0,0,0,0.08);
|
||
cursor: pointer;
|
||
transition: transform 0.3s, box-shadow 0.3s;
|
||
}
|
||
|
||
.dark-mode .holo-card { border-color: rgba(255,255,255,0.08); }
|
||
|
||
.holo-card:hover {
|
||
transform: translateY(-8px) rotate(-1deg);
|
||
box-shadow: 0 20px 40px rgba(0,0,0,0.15), 0 0 20px rgba(201,168,76,0.15);
|
||
}
|
||
|
||
.dark-mode .holo-card:hover {
|
||
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, #e8e6f0, #dddae8, #ccc8e0);
|
||
}
|
||
|
||
.holo-card .card-shine {
|
||
position: absolute; inset: 0;
|
||
background: linear-gradient(
|
||
115deg,
|
||
transparent 20%,
|
||
rgba(58,176,160,0.1) 35%,
|
||
rgba(138,78,197,0.1) 50%,
|
||
rgba(208,78,78,0.1) 65%,
|
||
transparent 80%
|
||
);
|
||
opacity: 0;
|
||
transition: opacity 0.3s;
|
||
}
|
||
|
||
.dark-mode .holo-card .card-shine {
|
||
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%
|
||
);
|
||
}
|
||
|
||
.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: 0.85rem;
|
||
padding: 3px 8px;
|
||
border-radius: 2px;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.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(0,0,0,0.5);
|
||
text-shadow: 0 0 4px rgba(0,0,0,0.15), 0 0 8px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.dark-mode .holo-card .card-label { color: rgba(0,0,0,0.5); font-size: 0.5rem; text-shadow: 0 0 4px rgba(0,0,0,0.15), 0 0 8px rgba(0,0,0,0.1); }
|
||
|
||
.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(208,78,78,0.04), rgba(58,176,160,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(208,78,78,0.06), rgba(58,176,160,0.06));
|
||
}
|
||
|
||
.dark-mode .grade-chip.prime-grade {
|
||
background: linear-gradient(135deg, rgba(201,168,76,0.08), rgba(240,110,110,0.04), rgba(90,240,216,0.04));
|
||
}
|
||
|
||
.dark-mode .grade-chip.prime-grade:hover {
|
||
background: linear-gradient(135deg, rgba(201,168,76,0.12), rgba(240,110,110,0.06), rgba(90,240,216,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(--holo3));
|
||
-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: 1.8rem;
|
||
font-weight: 900;
|
||
color: var(--gold);
|
||
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;
|
||
}
|
||
|
||
/* ── SPECIAL 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; }
|
||
|
||
/* ── TEAM ── */
|
||
#team { background: var(--surface); border-top: 1px solid var(--border); }
|
||
|
||
.team-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.team-card {
|
||
border: 1px solid var(--border);
|
||
border-radius: 4px;
|
||
padding: 1.5rem 1.25rem;
|
||
text-align: center;
|
||
background: var(--bg);
|
||
transition: border-color 0.2s;
|
||
}
|
||
|
||
.team-card:hover { border-color: rgba(201,168,76,0.3); }
|
||
|
||
.team-avatar {
|
||
width: 72px; height: 72px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, var(--border), #d0ced8);
|
||
margin: 0 auto 1rem;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 1.8rem;
|
||
border: 2px solid var(--border);
|
||
transition: background 0.3s;
|
||
}
|
||
|
||
.dark-mode .team-avatar {
|
||
background: linear-gradient(135deg, var(--border), #2a2a3e);
|
||
}
|
||
|
||
.team-name {
|
||
font-family: 'Cinzel', serif;
|
||
font-size: 0.95rem;
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.team-role {
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--gold);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.team-tag {
|
||
display: inline-block;
|
||
font-size: 0.65rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.05em;
|
||
padding: 0.15rem 0.6rem;
|
||
border-radius: 2px;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.team-tag.pokemon {
|
||
background: rgba(240,200,50,0.15);
|
||
color: #b8941e;
|
||
border: 1px solid rgba(240,200,50,0.25);
|
||
}
|
||
|
||
.dark-mode .team-tag.pokemon { color: #f0c832; }
|
||
|
||
.team-tag.onepiece {
|
||
background: rgba(80,180,240,0.15);
|
||
color: #2068a0;
|
||
border: 1px solid rgba(80,180,240,0.25);
|
||
}
|
||
|
||
.dark-mode .team-tag.onepiece { color: #50b4f0; }
|
||
|
||
.team-tag.ceo {
|
||
background: rgba(201,168,76,0.2);
|
||
color: #8a6e20;
|
||
border: 1px solid rgba(201,168,76,0.4);
|
||
}
|
||
|
||
.dark-mode .team-tag.ceo { color: var(--gold-light); }
|
||
|
||
.team-bio {
|
||
font-size: 0.8rem;
|
||
color: var(--muted);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* ── PRISER ── */
|
||
#priser { border-top: 1px solid var(--border); }
|
||
|
||
.price-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.price-card {
|
||
border: 1px solid var(--border);
|
||
border-radius: 4px;
|
||
padding: 1.75rem 1.5rem;
|
||
background: var(--surface);
|
||
display: flex; flex-direction: column; gap: 0.75rem;
|
||
transition: border-color 0.2s;
|
||
}
|
||
|
||
.price-card:hover { border-color: rgba(201,168,76,0.3); }
|
||
|
||
.price-card.featured {
|
||
border-color: rgba(201,168,76,0.5);
|
||
background: linear-gradient(160deg, rgba(201,168,76,0.05), var(--surface));
|
||
}
|
||
|
||
.price-tier {
|
||
font-family: 'Cinzel', serif;
|
||
font-size: 0.85rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--gold);
|
||
}
|
||
|
||
.price-amount {
|
||
font-family: 'Cinzel', serif;
|
||
font-size: 2.4rem;
|
||
font-weight: 900;
|
||
color: var(--text);
|
||
line-height: 1;
|
||
}
|
||
|
||
.price-amount span {
|
||
font-size: 1rem;
|
||
color: var(--muted);
|
||
font-family: 'Inter', sans-serif;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.price-desc {
|
||
font-size: 0.8rem;
|
||
color: var(--muted);
|
||
font-style: italic;
|
||
}
|
||
|
||
.price-features {
|
||
list-style: none;
|
||
display: flex; flex-direction: column; gap: 0.4rem;
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
.price-features li {
|
||
font-size: 0.82rem;
|
||
color: var(--muted);
|
||
padding-left: 1.2rem;
|
||
position: relative;
|
||
}
|
||
|
||
.price-features li::before {
|
||
content: '✓';
|
||
position: absolute; left: 0;
|
||
color: var(--red);
|
||
}
|
||
|
||
.price-disclaimer {
|
||
margin-top: 2rem;
|
||
padding: 1rem 1.25rem;
|
||
border: 1px solid var(--border);
|
||
border-radius: 4px;
|
||
font-size: 0.8rem;
|
||
color: var(--muted);
|
||
font-style: italic;
|
||
background: var(--surface);
|
||
}
|
||
|
||
/* ── 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); }
|
||
|
||
/* ── SCROLL TO TOP ── */
|
||
#scroll-top {
|
||
position: fixed; bottom: 2rem; left: 2rem; z-index: 999;
|
||
width: 42px; height: 42px;
|
||
border: 1px solid var(--gold);
|
||
background: var(--surface);
|
||
color: var(--gold);
|
||
font-size: 1.2rem;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
opacity: 0;
|
||
transform: translateY(12px);
|
||
pointer-events: none;
|
||
transition: opacity 0.3s, transform 0.3s, background 0.2s;
|
||
line-height: 1;
|
||
}
|
||
|
||
#scroll-top.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
pointer-events: auto;
|
||
}
|
||
|
||
#scroll-top:hover {
|
||
background: var(--gold);
|
||
color: #0a0a0f;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<nav>
|
||
<a class="logo" href="#"><img src="primegrading-logo.svg" alt="PrimeGrading.dk" /></a>
|
||
<div class="nav-right">
|
||
<button class="theme-toggle" onclick="toggleTheme()" id="themeBtn" title="Skift tema">☀️</button>
|
||
<button class="hamburger" onclick="toggleMenu()" aria-label="Menu">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</button>
|
||
<ul id="nav-menu">
|
||
<li><a href="#how" onclick="closeMenu()">Sådan virker det</a></li>
|
||
<li><a href="#grades" onclick="closeMenu()">Knækningsskala</a></li>
|
||
<li><a href="#labels" onclick="closeMenu()">Labels</a></li>
|
||
<li><a href="#team" onclick="closeMenu()">Teamet</a></li>
|
||
<li><a href="#priser" onclick="closeMenu()">Priser</a></li>
|
||
<li><a href="#submit" onclick="closeMenu()">Indsend kort</a></li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- HERO -->
|
||
<section class="hero">
|
||
<div class="hero-glow"></div>
|
||
<div class="eyebrow">Pokémon · One Piece · Kortforvanskning</div>
|
||
<h1>
|
||
<span class="line1">Dine kort.</span>
|
||
<span class="line2">Vi gør vores bedste.</span>
|
||
</h1>
|
||
<p class="hero-sub">(det er ikke godt nok)</p>
|
||
<div class="cta-group">
|
||
<a class="btn-primary" href="#submit">Indsend dine kort</a>
|
||
<a class="btn-secondary" href="#how">Hvordan? (tro mig, du vil se)</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">HVAD</div>
|
||
</div>
|
||
<div class="holo-card">
|
||
<div class="card-bg" style="background:linear-gradient(135deg,#f0e0d0,#e8ccaa,#f0e0d0)"></div>
|
||
<div class="card-shine"></div>
|
||
<div class="card-label">One Piece TCG</div>
|
||
<div class="card-art">➰</div>
|
||
<div class="card-grade">BØJ</div>
|
||
</div>
|
||
<div class="holo-card">
|
||
<div class="card-bg" style="background:linear-gradient(135deg,#e0d8f0,#c8bae8,#e0d8f0)"></div>
|
||
<div class="card-shine"></div>
|
||
<div class="card-label">Pokémon TCG</div>
|
||
<div class="card-art">💥</div>
|
||
<div class="card-grade">KNÆK</div>
|
||
</div>
|
||
<div class="holo-card">
|
||
<div class="card-bg" style="background:linear-gradient(135deg,#d0ebe0,#a8e0cc,#d0ebe0)"></div>
|
||
<div class="card-shine"></div>
|
||
<div class="card-label">One Piece TCG</div>
|
||
<div class="card-art">💧</div>
|
||
<div class="card-grade">VÅD</div>
|
||
</div>
|
||
<div class="holo-card">
|
||
<div class="card-bg" style="background:linear-gradient(135deg,#f0d0d0,#e8b8b8,#f0d0d0)"></div>
|
||
<div class="card-shine"></div>
|
||
<div class="card-label">Pokémon TCG</div>
|
||
<div class="card-art">⚰️</div>
|
||
<div class="card-grade">RIP</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 komplet kortødelæggelse.</p>
|
||
<div class="steps">
|
||
<div class="step">
|
||
<div class="step-num">01</div>
|
||
<h3>Indsend dine kort</h3>
|
||
<p>Udfyld formularen med kortoplysninger. Pak dem godt ind — det hjælper ikke, men du føler dig bedre tilpas.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">02</div>
|
||
<h3>Visuel bedømmelse</h3>
|
||
<p>Vores eksperter vurderer hurtigt hvilken ødelæggelsesmetode kortet fortjener. Bøjning? Knæk? Vandbad? Eller det hele?</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">03</div>
|
||
<h3>Behandling</h3>
|
||
<p>Kortet gennemgår den valgte proces. Præcisionsbøjning, kontrolleret knæk eller vores signatur vandbehandling. Alt sammen håndværk.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">04</div>
|
||
<h3>Forsegling & certifikat</h3>
|
||
<p>Dit nu forvanskede kort forsegles i en slab. Du får et certifikat der bekræfter — ja, vi gjorde det med vilje. Stolthed garanteret.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- GRADES -->
|
||
<section id="grades">
|
||
<div class="container">
|
||
<h2 class="section-title">Vores <span>knækningsskala</span></h2>
|
||
<p class="section-lead">Fra en let bøjning til total, uigenkaldelig destruktion — her er hvad du kan forvente.</p>
|
||
<div class="scale">
|
||
|
||
<div class="grade-chip prime-grade">
|
||
<div class="prime-grade-star">💀</div>
|
||
<div class="prime-grade-info">
|
||
<span class="prime-grade-title">PRIME KNÆK — Total Ekstinktion</span>
|
||
<span class="prime-grade-sub">Kortet bliver bøjet, knækket <strong>og</strong> vandbadet. Derefter smeltes slabben fast med lighter. Kortet eksisterer ikke længere i traditionel forstand. Kun tildelt de absolut mest fortjente kort.</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grade-chip"><span class="grade-score">K10</span><span class="grade-label">Perfekt Knæk</span></div>
|
||
<div class="grade-chip"><span class="grade-score">K9</span><span class="grade-label">Rent Knæk</span></div>
|
||
<div class="grade-chip"><span class="grade-score">K8</span><span class="grade-label">Bøjet m. Knæk</span></div>
|
||
<div class="grade-chip"><span class="grade-score">B10</span><span class="grade-label">Ultra Bøjning</span></div>
|
||
<div class="grade-chip"><span class="grade-score">B8</span><span class="grade-label">Solid Bøjning</span></div>
|
||
<div class="grade-chip"><span class="grade-score">B6</span><span class="grade-label">Let Bøjning</span></div>
|
||
<div class="grade-chip"><span class="grade-score">V10</span><span class="grade-label">Vandbad Premium</span></div>
|
||
<div class="grade-chip"><span class="grade-score">V7</span><span class="grade-label">Vandbad Standard</span></div>
|
||
<div class="grade-chip"><span class="grade-score">R5</span><span class="grade-label">Ridset m. Kærlighed</span></div>
|
||
<div class="grade-chip"><span class="grade-score">M1</span><span class="grade-label">Mistet på lager</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 knækningsskalaen tildeler vi særlige labels som ekstra pynt på din ødelagte slab.</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. Kortet er bøjet, det er forseglet. Mission completed.</p>
|
||
</div>
|
||
</div>
|
||
<div class="label-card">
|
||
<div class="label-dot" style="background:#c9a84c;"></div>
|
||
<div>
|
||
<h4>Gold Label</h4>
|
||
<p>For kort der har modtaget ekstraordinær ødelæggelse. To eller flere metoder anvendt.</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 heldige kort der blev ofret til PrimeGrading.dk.</p>
|
||
</div>
|
||
</div>
|
||
<div class="label-card">
|
||
<div class="label-dot" style="background:#555570;"></div>
|
||
<div>
|
||
<h4>Black Label</h4>
|
||
<p>Tildelt når vi har knækket kortet på præcis den måde du bad os om — før vi gjorde hvad vi ville alligevel.</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 KNÆK</h4>
|
||
<p>Det absolut højeste label. Kortet er blevet totalt destrueret af CEO-chefen personligt. Indrammes og hænges op som minde.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 class="section-title" style="font-size:1.2rem; margin-bottom:1rem;">Black Label <span>vs PRIME KNÆK</span></h3>
|
||
<div class="compare-box">
|
||
<div class="compare-col">
|
||
<h4>Black Label</h4>
|
||
<ul>
|
||
<li>Kortet er bøjet efter specifikation</li>
|
||
<li>Sort label — diskret og elegant ødelæggelse</li>
|
||
</ul>
|
||
</div>
|
||
<div class="compare-col prime">
|
||
<h4>PRIME KNÆK</h4>
|
||
<ul>
|
||
<li>Bøjning + knæk + vandbad + lighter</li>
|
||
<li>Udvalgt og behandlet af CEO personligt</li>
|
||
<li>Guld-label med holografisk accent</li>
|
||
<li>Dit kort er nu en mindesten for tidligere værdi</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TEAM -->
|
||
<section id="team">
|
||
<div class="container">
|
||
<h2 class="section-title">Mød <span>holdet</span></h2>
|
||
<p class="section-lead">De kyndige hænder bag hvert eneste bøjede, knækkede og vandbadede kort.</p>
|
||
<div class="team-grid">
|
||
|
||
<div class="team-card">
|
||
<div class="team-avatar">🧢</div>
|
||
<div class="team-name">GlennIgen</div>
|
||
<div class="team-role">CEO & Chefknækker</div>
|
||
<div class="team-tag ceo">STIFTER</div>
|
||
<div class="team-bio">Grundlæggeren. Den der tager de svære beslutninger — og de dyreste kort. Hvis det skal knækkes ordentligt, gør han det selv.</div>
|
||
</div>
|
||
|
||
<div class="team-card">
|
||
<div class="team-avatar">🐼</div>
|
||
<div class="team-name">NickDaPanda</div>
|
||
<div class="team-role">Pokémon Bøjemester</div>
|
||
<div class="team-tag pokemon">POKÉMON HOLDET</div>
|
||
<div class="team-bio">Specialist i bøjning af Pokémon-kort. Har en særlig evne til at få Charizard-kort til at se ud som om de har ligget i en vaskemaskine i tre timer.</div>
|
||
</div>
|
||
|
||
<div class="team-card">
|
||
<div class="team-avatar">🔧</div>
|
||
<div class="team-name">Mogens</div>
|
||
<div class="team-role">Knæktekniker</div>
|
||
<div class="team-tag pokemon">POKÉMON HOLDET</div>
|
||
<div class="team-bio">Manden bag knækket. Præcisionsarbejde med brutale resultater. Har knækket over 500 kort og sover som en baby om natten.</div>
|
||
</div>
|
||
|
||
<div class="team-card">
|
||
<div class="team-avatar">🏎️</div>
|
||
<div class="team-name">R32</div>
|
||
<div class="team-role">Vandbadsspecialist</div>
|
||
<div class="team-tag pokemon">POKÉMON HOLDET</div>
|
||
<div class="team-bio">Kongerne af vandbadet. R32 ved præcis hvor længe et kort skal ligge i blød for at opnå den perfekte bølgeform. Resultaterne taler for sig selv (svært at læse, de er våde).</div>
|
||
</div>
|
||
|
||
<div class="team-card">
|
||
<div class="team-avatar">⚓</div>
|
||
<div class="team-name">Søren</div>
|
||
<div class="team-role">One Piece Senior Destroyer</div>
|
||
<div class="team-tag onepiece">ONE PIECE HOLDET</div>
|
||
<div class="team-bio">One Piece-eksperten. Ved nøjagtigt hvor et Luffy-kort skal bøjes for at opnå maksimal værditab. Har aldrig set en episode (det er en styrke).</div>
|
||
</div>
|
||
|
||
<div class="team-card">
|
||
<div class="team-avatar">🐦</div>
|
||
<div class="team-name">Nurk</div>
|
||
<div class="team-role">Kaoskoordinator</div>
|
||
<div class="team-tag onepiece">ONE PIECE HOLDET</div>
|
||
<div class="team-bio">Ansvarlig for at holde styr på hvilke kort der skal hvad. Resultatet er altid kaos, men Nurk nyder rejsen. One Piece-afdelingens samvittighed.</div>
|
||
</div>
|
||
|
||
<div class="team-card">
|
||
<div class="team-avatar">🔥</div>
|
||
<div class="team-name">FreddyJabba</div>
|
||
<div class="team-role">PRIME KNÆK Operatør</div>
|
||
<div class="team-tag onepiece">ONE PIECE HOLDET</div>
|
||
<div class="team-bio">Den eneste der tør bruge lighteren. Hvis dit kort får PRIME KNÆK-label, var det FreddyJabba der stod for ilden. One Piece-kort smelter bedst, siger han.</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PRISER -->
|
||
<section id="priser">
|
||
<div class="container">
|
||
<h2 class="section-title">Vores <span>priser</span></h2>
|
||
<p class="section-lead">Markedets mest konkurrencedygtige priser — for markedets dårligste service.</p>
|
||
|
||
<div class="price-grid">
|
||
|
||
<div class="price-card">
|
||
<div class="price-tier">Standard Bøjning</div>
|
||
<div class="price-amount">499 <span>kr/kort</span></div>
|
||
<div class="price-desc">Vi bøjer dit kort let. Ikke nok til at det ser interessant ud — bare nok til at det aldrig lægger fladt igen.</div>
|
||
<ul class="price-features">
|
||
<li>Tilfældig bøjningsretning</li>
|
||
<li>Ingen garanti for symmetri</li>
|
||
<li>Returneres i en plastikpose fra Netto</li>
|
||
<li>Leveringstid: 6–18 måneder</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="price-card featured">
|
||
<div class="price-tier">⭐ Premium Knæk</div>
|
||
<div class="price-amount">1.299 <span>kr/kort</span></div>
|
||
<div class="price-desc">Et rent, professionelt knæk på tværs af kortet. Vi skriver "10" på slabben uanset hvad.</div>
|
||
<ul class="price-features">
|
||
<li>Håndknæk af erfaren medarbejder</li>
|
||
<li>Valgfri knækvinkel (vi ignorerer dit valg)</li>
|
||
<li>Slab med guld label — kortet er stadig knækket</li>
|
||
<li>Gratis "undskyldning" på en Post-it</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="price-card">
|
||
<div class="price-tier">Deluxe Vandbad</div>
|
||
<div class="price-amount">2.999 <span>kr/kort</span></div>
|
||
<div class="price-desc">Dit kort sendes igennem vores patenterede vandbehandling. Bølger, krøller og misfarvning er inkluderet i prisen.</div>
|
||
<ul class="price-features">
|
||
<li>12 timers blødning i lunkent vand</li>
|
||
<li>Tørres med en brugt køkkenrulle</li>
|
||
<li>Returneres i en fugtig kuvert</li>
|
||
<li>Umuligt at klage — vi svarer ikke</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="price-card">
|
||
<div class="price-tier">💀 PRIME KNÆK</div>
|
||
<div class="price-amount">9.999 <span>kr/kort</span></div>
|
||
<div class="price-desc">Vores absolut bedste pakke. Vi gør alt det ovenstående — og derefter smelter vi slabben fast til kortet med en lighter.</div>
|
||
<ul class="price-features">
|
||
<li>Bøjning, knæk og vandbad inkluderet</li>
|
||
<li>Lighter-behandling af slab</li>
|
||
<li>Signeret certifikat fra chefknækkeren</li>
|
||
<li>Dit kort er nu officielt ødelagt</li>
|
||
<li>Eksklusiv "vi er kede af det"-e-mail</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="price-disclaimer">
|
||
* Alle priser er ekskl. moms, fragt, håndteringsgebyr, slab-gebyr, knæk-tillæg, bøje-tillæg, vand-tillæg, lighter-tillæg og diverse gebyrer vi finder på undervejs. PrimeGrading.dk påtager sig intet ansvar for kortenes tilstand efter behandling — det burde du have vidst inden du sendte dem. Og nej, vi giver dig ikke dine kort tilbage.
|
||
</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 potentielt undskylder på forhånd.</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 (held og lykke)</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="service">Ønsket behandling</label>
|
||
<select id="service">
|
||
<option value="">Vælg behandling…</option>
|
||
<option>Standard Bøjning (499 kr)</option>
|
||
<option>Premium Knæk (1.299 kr)</option>
|
||
<option>Deluxe Vandbad (2.999 kr)</option>
|
||
<option>PRIME KNÆK (9.999 kr)</option>
|
||
<option>🎲 Overrask mig — vi finder på noget</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group full">
|
||
<label for="count">Antal kort</label>
|
||
<input type="number" id="count" min="1" max="100" placeholder="Hvor mange skal have turen?" />
|
||
</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()">Indsend til forvanskning</button>
|
||
<p class="form-note">* Dette er en demosformular — der sendes ikke rigtige data nogen steder. Dine kort er i sikkerhed. For nu.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<p><strong>PrimeGrading</strong>.dk — Kortforvanskning for samlere · Pokémon & One Piece · Danmark</p>
|
||
<p style="margin-top:0.5rem; font-size:0.7rem;">Dette er en joke-hjemmeside lavet for sjov. Vi er ikke tilknyttet Nintendo, The Pokémon Company eller Bandai. Send gerne dine kort alligevel.</p>
|
||
</footer>
|
||
|
||
<div id="toast">✓ Din forespørgsel er modtaget — vi knækker dem snart!</div>
|
||
|
||
<button id="scroll-top" onclick="window.scrollTo({top:0,behavior:'smooth'})" aria-label="Til toppen">↑</button>
|
||
|
||
<script>
|
||
function toggleTheme() {
|
||
const body = document.body;
|
||
const btn = document.getElementById('themeBtn');
|
||
body.classList.toggle('dark-mode');
|
||
const isDark = body.classList.contains('dark-mode');
|
||
btn.textContent = isDark ? '🌙' : '☀️';
|
||
localStorage.setItem('primegrading-theme', isDark ? 'dark' : 'light');
|
||
}
|
||
|
||
// Load saved theme on page load
|
||
(function() {
|
||
const saved = localStorage.getItem('primegrading-theme');
|
||
const body = document.body;
|
||
const btn = document.getElementById('themeBtn');
|
||
if (saved === 'dark') {
|
||
body.classList.add('dark-mode');
|
||
btn.textContent = '🌙';
|
||
} else {
|
||
btn.textContent = '☀️';
|
||
}
|
||
})();
|
||
|
||
// Scroll-to-top visibility
|
||
window.addEventListener('scroll', function() {
|
||
const btn = document.getElementById('scroll-top');
|
||
if (window.scrollY > 400) {
|
||
btn.classList.add('visible');
|
||
} else {
|
||
btn.classList.remove('visible');
|
||
}
|
||
});
|
||
|
||
function toggleMenu() {
|
||
const btn = document.querySelector('.hamburger');
|
||
const menu = document.getElementById('nav-menu');
|
||
btn.classList.toggle('active');
|
||
menu.classList.toggle('open');
|
||
}
|
||
|
||
function closeMenu() {
|
||
const btn = document.querySelector('.hamburger');
|
||
const menu = document.getElementById('nav-menu');
|
||
btn.classList.remove('active');
|
||
menu.classList.remove('open');
|
||
}
|
||
|
||
function handleSubmit() {
|
||
const toast = document.getElementById('toast');
|
||
toast.classList.add('show');
|
||
setTimeout(() => toast.classList.remove('show'), 3500);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |