2026-06-26 13:41:18 +02:00
<!DOCTYPE html>
< html lang = "da" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
2026-06-26 15:42:00 +02:00
< title > PrimeGrading.dk — Kortgradering med kant</ title >
2026-06-26 17:21:04 +02:00
< 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" />
2026-06-26 13:41:18 +02:00
< 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 {
2026-06-26 17:21:04 +02:00
--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 {
2026-06-26 13:41:18 +02:00
--bg : #0a0a0f ;
--surface : #111118 ;
--border : #1e1e2e ;
--gold : #c9a84c ;
--gold-light : #f0d070 ;
--red : #cc2222 ;
--text : #e8e6f0 ;
--muted : #7a7890 ;
2026-06-26 17:21:04 +02:00
--text-light : #e8e6f0 ;
2026-06-26 13:41:18 +02:00
--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 ;
2026-06-26 17:21:04 +02:00
transition : background 0.3 s , color 0.3 s ;
2026-06-26 13:41:18 +02:00
}
/* ── NAV ── */
nav {
position : fixed ; top : 0 ; left : 0 ; right : 0 ; z-index : 100 ;
display : flex ; align-items : center ; justify-content : space-between ;
padding : 1 rem 2.5 rem ;
2026-06-26 17:21:04 +02:00
background : rgba ( 245 , 244 , 240 , 0.85 );
2026-06-26 13:41:18 +02:00
backdrop-filter : blur ( 12 px );
border-bottom : 1 px solid var ( -- border );
2026-06-26 17:21:04 +02:00
transition : background 0.3 s ;
}
. dark-mode nav {
background : rgba ( 10 , 10 , 15 , 0.85 );
2026-06-26 13:41:18 +02:00
}
. logo {
2026-06-26 17:21:04 +02:00
display : flex ;
align-items : center ;
2026-06-26 13:41:18 +02:00
text-decoration : none ;
2026-06-26 17:21:04 +02:00
height : 48 px ;
2026-06-26 13:41:18 +02:00
}
2026-06-26 17:21:04 +02:00
. logo img {
display : block ;
height : 48 px ;
width : auto ;
}
@ media ( max-width : 600px ) {
. logo { height : 38 px ; }
. logo img { height : 38 px ; }
}
. nav-right {
display : flex ; align-items : center ; gap : 1 rem ;
}
. theme-toggle {
background : none ; border : 1 px solid var ( -- border );
color : var ( -- muted ); cursor : pointer ;
font-size : 1 rem ; padding : 0.4 rem 0.6 rem ;
border-radius : 4 px ; line-height : 1 ;
transition : border-color 0.2 s , color 0.2 s ;
}
. theme-toggle : hover {
border-color : var ( -- gold ); color : var ( -- gold );
2026-06-26 13:41:18 +02:00
}
2026-06-26 15:42:00 +02:00
. hamburger {
display : none ;
flex-direction : column ;
gap : 5 px ;
background : none ;
border : none ;
cursor : pointer ;
padding : 4 px ;
z-index : 101 ;
}
. hamburger span {
display : block ;
width : 24 px ;
height : 2 px ;
background : var ( -- text );
2026-06-26 17:21:04 +02:00
transition : transform 0.3 s , opacity 0.3 s , background 0.3 s ;
2026-06-26 15:42:00 +02:00
}
. hamburger . active span : nth-child ( 1 ) {
transform : translateY ( 7 px ) rotate ( 45 deg );
}
. hamburger . active span : nth-child ( 2 ) {
opacity : 0 ;
}
. hamburger . active span : nth-child ( 3 ) {
transform : translateY ( -7 px ) rotate ( -45 deg );
}
2026-06-26 13:41:18 +02:00
nav ul {
list-style : none ;
display : flex ; gap : 2 rem ;
}
nav ul a {
color : var ( -- muted );
text-decoration : none ;
font-size : 0.85 rem ;
font-weight : 500 ;
letter-spacing : 0.05 em ;
text-transform : uppercase ;
transition : color 0.2 s ;
}
nav ul a : hover { color : var ( -- gold ); }
2026-06-26 15:42:00 +02:00
/* ── MOBILE NAV ── */
@ media ( max-width : 768px ) {
. hamburger { display : flex ; }
2026-06-26 17:21:04 +02:00
nav { padding : 1 rem 1.25 rem ; }
2026-06-26 15:42:00 +02:00
nav ul {
position : fixed ; top : 0 ; right : -100 % ;
width : 260 px ; height : 100 vh ;
flex-direction : column ;
gap : 0 ;
2026-06-26 17:21:04 +02:00
background : rgba ( 245 , 244 , 240 , 0.98 );
2026-06-26 15:42:00 +02:00
backdrop-filter : blur ( 16 px );
border-left : 1 px solid var ( -- border );
padding : 5 rem 2 rem 2 rem ;
transition : right 0.3 s ease ;
z-index : 100 ;
}
2026-06-26 17:21:04 +02:00
. dark-mode nav ul {
background : rgba ( 10 , 10 , 15 , 0.98 );
}
2026-06-26 15:42:00 +02:00
nav ul . open { right : 0 ; }
nav ul a {
display : block ;
padding : 1 rem 0 ;
font-size : 0.95 rem ;
border-bottom : 1 px solid var ( -- border );
}
nav ul li : last-child a { border-bottom : none ; }
}
2026-06-26 13:41:18 +02:00
/* ── HERO ── */
. hero {
min-height : 100 vh ;
display : flex ; flex-direction : column ;
align-items : center ; justify-content : center ;
text-align : center ;
padding : 6 rem 2 rem 4 rem ;
position : relative ;
overflow : hidden ;
}
. hero-glow {
position : absolute ; inset : 0 ; z-index : 0 ;
2026-06-26 17:21:04 +02:00
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 {
2026-06-26 13:41:18 +02:00
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.7 rem ;
font-weight : 600 ;
letter-spacing : 0.2 em ;
text-transform : uppercase ;
color : var ( -- gold );
border : 1 px solid rgba ( 201 , 168 , 76 , 0.3 );
padding : 0.35 rem 1 rem ;
border-radius : 2 px ;
margin-bottom : 1.5 rem ;
}
h1 {
font-family : 'Cinzel' , serif ;
font-weight : 900 ;
font-size : clamp ( 2.8 rem , 7 vw , 6 rem );
line-height : 1.05 ;
letter-spacing : -0.01 em ;
margin-bottom : 1.5 rem ;
}
h1 . line1 {
display : block ;
2026-06-26 17:21:04 +02:00
color : var ( -- text );
2026-06-26 13:41:18 +02:00
}
h1 . line2 {
display : block ;
background : linear-gradient ( 135 deg , var ( -- gold ), var ( -- gold - light ), var ( -- holo1 ));
-webkit- background-clip : text ; -webkit- text-fill-color : transparent ; background-clip : text ;
}
. hero-sub {
max-width : 520 px ;
color : var ( -- muted );
font-size : 1.05 rem ;
margin-bottom : 2.5 rem ;
}
. cta-group {
display : flex ; gap : 1 rem ; flex-wrap : wrap ; justify-content : center ;
}
. btn-primary {
background : linear-gradient ( 135 deg , var ( -- gold ), #a87b20 );
color : #0a0a0f ;
font-weight : 600 ;
font-size : 0.9 rem ;
letter-spacing : 0.05 em ;
text-transform : uppercase ;
padding : 0.85 rem 2 rem ;
border : none ; cursor : pointer ;
text-decoration : none ;
clip-path : polygon ( 8 px 0 % , 100 % 0 % , calc ( 100 % - 8 px ) 100 % , 0 % 100 % );
transition : opacity 0.2 s ;
}
. btn-primary : hover { opacity : 0.85 ; }
. btn-secondary {
background : transparent ;
color : var ( -- gold );
font-weight : 500 ;
font-size : 0.9 rem ;
letter-spacing : 0.05 em ;
text-transform : uppercase ;
padding : 0.85 rem 2 rem ;
border : 1 px solid rgba ( 201 , 168 , 76 , 0.4 );
cursor : pointer ;
text-decoration : none ;
clip-path : polygon ( 8 px 0 % , 100 % 0 % , calc ( 100 % - 8 px ) 100 % , 0 % 100 % );
transition : border-color 0.2 s , color 0.2 s ;
}
. btn-secondary : hover { border-color : var ( -- gold ); color : var ( -- gold - light ); }
/* ── HOLO CARDS ROW ── */
. cards-row {
display : flex ; gap : 1.5 rem ; justify-content : center ; flex-wrap : wrap ;
margin-top : 4 rem ;
}
. holo-card {
width : 120 px ; height : 168 px ;
border-radius : 6 px ;
position : relative ;
overflow : hidden ;
2026-06-26 17:21:04 +02:00
border : 1 px solid rgba ( 0 , 0 , 0 , 0.08 );
2026-06-26 13:41:18 +02:00
cursor : pointer ;
transition : transform 0.3 s , box-shadow 0.3 s ;
}
2026-06-26 17:21:04 +02:00
. dark-mode . holo-card { border-color : rgba ( 255 , 255 , 255 , 0.08 ); }
2026-06-26 13:41:18 +02:00
. holo-card : hover {
transform : translateY ( -8 px ) rotate ( -1 deg );
2026-06-26 17:21:04 +02:00
box-shadow : 0 20 px 40 px rgba ( 0 , 0 , 0 , 0.15 ), 0 0 20 px rgba ( 201 , 168 , 76 , 0.15 );
}
. dark-mode . holo-card : hover {
2026-06-26 13:41:18 +02:00
box-shadow : 0 20 px 40 px rgba ( 0 , 0 , 0 , 0.5 ), 0 0 20 px rgba ( 201 , 168 , 76 , 0.2 );
}
. holo-card . card-bg {
position : absolute ; inset : 0 ;
2026-06-26 17:21:04 +02:00
background : linear-gradient ( 135 deg , #e8e6f0 , #dddae8 , #ccc8e0 );
}
. dark-mode . holo-card . card-bg {
2026-06-26 13:41:18 +02:00
background : linear-gradient ( 135 deg , #1a1a2e , #16213e , #0f3460 );
}
. holo-card . card-shine {
position : absolute ; inset : 0 ;
2026-06-26 17:21:04 +02:00
background : linear-gradient (
115 deg ,
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.3 s ;
}
. dark-mode . holo-card . card-shine {
2026-06-26 13:41:18 +02:00
background : linear-gradient (
115 deg ,
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 : 8 px ; right : 8 px ;
background : var ( -- gold );
color : #0a0a0f ;
font-family : 'Cinzel' , serif ;
font-weight : 900 ;
2026-06-26 17:21:04 +02:00
font-size : 0.85 rem ;
padding : 3 px 8 px ;
2026-06-26 13:41:18 +02:00
border-radius : 2 px ;
2026-06-26 17:21:04 +02:00
letter-spacing : 0.04 em ;
2026-06-26 13:41:18 +02:00
}
. holo-card . card-label {
position : absolute ; top : 8 px ; left : 8 px ; right : 8 px ;
font-size : 0.5 rem ;
font-weight : 600 ;
letter-spacing : 0.1 em ;
text-transform : uppercase ;
2026-06-26 17:21:04 +02:00
color : rgba ( 0 , 0 , 0 , 0.5 );
text-shadow : 0 0 4 px rgba ( 0 , 0 , 0 , 0.15 ), 0 0 8 px rgba ( 0 , 0 , 0 , 0.1 );
2026-06-26 13:41:18 +02:00
}
2026-06-26 17:21:04 +02:00
. dark-mode . holo-card . card-label { color : rgba ( 255 , 255 , 255 , 0.85 ); font-size : 0.55 rem ; text-shadow : 0 0 6 px rgba ( 0 , 0 , 0 , 0.5 ), 0 0 12 px rgba ( 0 , 0 , 0 , 0.3 ); }
2026-06-26 13:41:18 +02:00
. holo-card . card-art {
position : absolute ; inset : 20 px 8 px 40 px ;
display : flex ; align-items : center ; justify-content : center ;
font-size : 2.5 rem ;
}
/* ── SECTION ── */
section { padding : 5 rem 2 rem ; }
. container { max-width : 1000 px ; margin : 0 auto ; }
. section-title {
font-family : 'Cinzel' , serif ;
font-size : clamp ( 1.6 rem , 3 vw , 2.4 rem );
font-weight : 700 ;
margin-bottom : 0.5 rem ;
color : var ( -- text );
}
. section-title span { color : var ( -- gold ); }
. section-lead {
color : var ( -- muted );
max-width : 520 px ;
margin-bottom : 3 rem ;
}
/* ── HOW IT WORKS ── */
# how { background : var ( -- surface ); border-top : 1 px solid var ( -- border ); border-bottom : 1 px solid var ( -- border ); }
. steps {
display : grid ;
grid-template-columns : repeat ( auto - fit , minmax ( 200 px , 1 fr ));
gap : 2 rem ;
}
. step {
padding : 1.5 rem ;
border : 1 px solid var ( -- border );
border-radius : 4 px ;
position : relative ;
background : var ( -- bg );
transition : border-color 0.2 s ;
}
. step : hover { border-color : rgba ( 201 , 168 , 76 , 0.4 ); }
. step-num {
font-family : 'Cinzel' , serif ;
font-size : 2.5 rem ;
font-weight : 900 ;
color : rgba ( 201 , 168 , 76 , 0.15 );
line-height : 1 ;
margin-bottom : 0.75 rem ;
}
. step h3 {
font-size : 0.95 rem ;
font-weight : 600 ;
margin-bottom : 0.5 rem ;
color : var ( -- text );
}
. step p { font-size : 0.85 rem ; color : var ( -- muted ); }
/* ── GRADING SCALE ── */
. scale {
display : grid ;
grid-template-columns : repeat ( auto - fill , minmax ( 140 px , 1 fr ));
gap : 1 rem ;
}
. grade-chip {
border : 1 px solid var ( -- border );
border-radius : 4 px ;
padding : 1 rem ;
text-align : center ;
transition : border-color 0.2 s , background 0.2 s ;
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 ;
2026-06-26 17:21:04 +02:00
background : linear-gradient ( 135 deg , rgba ( 201 , 168 , 76 , 0.08 ), rgba ( 208 , 78 , 78 , 0.04 ), rgba ( 58 , 176 , 160 , 0.04 ));
2026-06-26 13:41:18 +02:00
border-color : rgba ( 201 , 168 , 76 , 0.5 );
display : flex ; align-items : center ; gap : 1.5 rem ;
padding : 1.25 rem 1.5 rem ;
text-align : left ;
}
. grade-chip . prime-grade : hover {
border-color : var ( -- gold );
2026-06-26 17:21:04 +02:00
background : linear-gradient ( 135 deg , 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 ( 135 deg , 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 {
2026-06-26 15:42:00 +02:00
background : linear-gradient ( 135 deg , rgba ( 201 , 168 , 76 , 0.12 ), rgba ( 240 , 110 , 110 , 0.06 ), rgba ( 90 , 240 , 216 , 0.06 ));
2026-06-26 13:41:18 +02:00
}
. prime-grade-star { font-size : 2 rem ; flex-shrink : 0 ; }
. prime-grade-info { flex : 1 ; }
. prime-grade-title {
font-family : 'Cinzel' , serif ;
font-size : 1.1 rem ; font-weight : 900 ;
2026-06-26 15:42:00 +02:00
background : linear-gradient ( 135 deg , var ( -- gold ), var ( -- gold - light ), var ( -- holo3 ));
2026-06-26 13:41:18 +02:00
-webkit- background-clip : text ; -webkit- text-fill-color : transparent ; background-clip : text ;
display : block ;
}
. prime-grade-sub {
font-size : 0.78 rem ; color : var ( -- muted ); margin-top : 0.25 rem ; line-height : 1.5 ;
}
. grade-score {
font-family : 'Cinzel' , serif ;
2026-06-26 15:42:00 +02:00
font-size : 1.8 rem ;
2026-06-26 13:41:18 +02:00
font-weight : 900 ;
2026-06-26 15:42:00 +02:00
color : var ( -- gold );
2026-06-26 13:41:18 +02:00
display : block ;
}
. grade-label {
font-size : 0.7 rem ;
font-weight : 600 ;
letter-spacing : 0.1 em ;
text-transform : uppercase ;
color : var ( -- muted );
margin-top : 0.2 rem ;
display : block ;
}
2026-06-26 15:42:00 +02:00
/* ── SPECIAL LABELS SECTION ── */
2026-06-26 13:41:18 +02:00
# labels { border-top : 1 px solid var ( -- border ); }
. labels-grid {
display : grid ;
grid-template-columns : repeat ( auto - fill , minmax ( 260 px , 1 fr ));
gap : 1 rem ;
margin-bottom : 3 rem ;
}
. label-card {
border : 1 px solid var ( -- border );
border-radius : 4 px ;
padding : 1.25 rem 1.5 rem ;
display : flex ; align-items : flex-start ; gap : 1 rem ;
background : var ( -- surface );
transition : border-color 0.2 s ;
}
. label-card : hover { border-color : rgba ( 201 , 168 , 76 , 0.3 ); }
. label-dot {
width : 13 px ; height : 13 px ;
border-radius : 50 % ;
flex-shrink : 0 ; margin-top : 0.3 rem ;
}
. label-card h4 { font-size : 0.9 rem ; font-weight : 600 ; color : var ( -- text ); margin-bottom : 0.3 rem ; }
. label-card p { font-size : 0.8 rem ; color : var ( -- muted ); line-height : 1.5 ; }
. compare-box {
display : grid ;
grid-template-columns : 1 fr 1 fr ;
gap : 1 rem ;
}
@ media ( max-width : 600px ) { . compare-box { grid-template-columns : 1 fr ; } }
. compare-col {
border : 1 px solid var ( -- border );
border-radius : 4 px ;
padding : 1.5 rem ;
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.95 rem ; font-weight : 700 ;
margin-bottom : 1 rem ; color : var ( -- text );
}
. compare-col . prime h4 {
background : linear-gradient ( 135 deg , 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.5 rem ; }
. compare-col ul li {
font-size : 0.85 rem ; color : var ( -- muted );
padding-left : 1.2 rem ; 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 ; }
2026-06-26 14:03:15 +02:00
/* ── TEAM ── */
# team { background : var ( -- surface ); border-top : 1 px solid var ( -- border ); }
. team-grid {
display : grid ;
grid-template-columns : repeat ( auto - fill , minmax ( 200 px , 1 fr ));
gap : 1.5 rem ;
}
. team-card {
border : 1 px solid var ( -- border );
border-radius : 4 px ;
padding : 1.5 rem 1.25 rem ;
text-align : center ;
background : var ( -- bg );
transition : border-color 0.2 s ;
}
. team-card : hover { border-color : rgba ( 201 , 168 , 76 , 0.3 ); }
. team-avatar {
width : 72 px ; height : 72 px ;
border-radius : 50 % ;
2026-06-26 17:21:04 +02:00
background : linear-gradient ( 135 deg , var ( -- border ), #d0ced8 );
2026-06-26 14:03:15 +02:00
margin : 0 auto 1 rem ;
display : flex ; align-items : center ; justify-content : center ;
font-size : 1.8 rem ;
border : 2 px solid var ( -- border );
2026-06-26 17:21:04 +02:00
transition : background 0.3 s ;
}
. dark-mode . team-avatar {
background : linear-gradient ( 135 deg , var ( -- border ), #2a2a3e );
2026-06-26 14:03:15 +02:00
}
. team-name {
font-family : 'Cinzel' , serif ;
font-size : 0.95 rem ;
font-weight : 700 ;
color : var ( -- text );
margin-bottom : 0.25 rem ;
}
. team-role {
font-size : 0.75 rem ;
font-weight : 600 ;
letter-spacing : 0.08 em ;
text-transform : uppercase ;
color : var ( -- gold );
margin-bottom : 0.5 rem ;
}
2026-06-26 15:42:00 +02:00
. team-tag {
display : inline-block ;
font-size : 0.65 rem ;
font-weight : 600 ;
letter-spacing : 0.05 em ;
padding : 0.15 rem 0.6 rem ;
border-radius : 2 px ;
margin-bottom : 0.5 rem ;
}
. team-tag . pokemon {
background : rgba ( 240 , 200 , 50 , 0.15 );
2026-06-26 17:21:04 +02:00
color : #b8941e ;
2026-06-26 15:42:00 +02:00
border : 1 px solid rgba ( 240 , 200 , 50 , 0.25 );
}
2026-06-26 17:21:04 +02:00
. dark-mode . team-tag . pokemon { color : #f0c832 ; }
2026-06-26 15:42:00 +02:00
. team-tag . onepiece {
background : rgba ( 80 , 180 , 240 , 0.15 );
2026-06-26 17:21:04 +02:00
color : #2068a0 ;
2026-06-26 15:42:00 +02:00
border : 1 px solid rgba ( 80 , 180 , 240 , 0.25 );
}
2026-06-26 17:21:04 +02:00
. dark-mode . team-tag . onepiece { color : #50b4f0 ; }
2026-06-26 15:42:00 +02:00
. team-tag . ceo {
background : rgba ( 201 , 168 , 76 , 0.2 );
2026-06-26 17:21:04 +02:00
color : #8a6e20 ;
2026-06-26 15:42:00 +02:00
border : 1 px solid rgba ( 201 , 168 , 76 , 0.4 );
}
2026-06-26 17:21:04 +02:00
. dark-mode . team-tag . ceo { color : var ( -- gold - light ); }
2026-06-26 14:03:15 +02:00
. team-bio {
font-size : 0.8 rem ;
color : var ( -- muted );
line-height : 1.5 ;
}
/* ── PRISER ── */
# priser { border-top : 1 px solid var ( -- border ); }
. price-grid {
display : grid ;
grid-template-columns : repeat ( auto - fill , minmax ( 220 px , 1 fr ));
gap : 1.5 rem ;
}
. price-card {
border : 1 px solid var ( -- border );
border-radius : 4 px ;
padding : 1.75 rem 1.5 rem ;
background : var ( -- surface );
display : flex ; flex-direction : column ; gap : 0.75 rem ;
transition : border-color 0.2 s ;
}
. 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 ( 160 deg , rgba ( 201 , 168 , 76 , 0.05 ), var ( -- surface ));
}
. price-tier {
font-family : 'Cinzel' , serif ;
font-size : 0.85 rem ;
font-weight : 700 ;
letter-spacing : 0.08 em ;
text-transform : uppercase ;
color : var ( -- gold );
}
. price-amount {
font-family : 'Cinzel' , serif ;
font-size : 2.4 rem ;
font-weight : 900 ;
color : var ( -- text );
line-height : 1 ;
}
. price-amount span {
font-size : 1 rem ;
color : var ( -- muted );
font-family : 'Inter' , sans-serif ;
font-weight : 400 ;
}
. price-desc {
font-size : 0.8 rem ;
color : var ( -- muted );
font-style : italic ;
}
. price-features {
list-style : none ;
display : flex ; flex-direction : column ; gap : 0.4 rem ;
margin-top : 0.5 rem ;
}
. price-features li {
font-size : 0.82 rem ;
color : var ( -- muted );
padding-left : 1.2 rem ;
position : relative ;
}
. price-features li :: before {
content : '✓' ;
position : absolute ; left : 0 ;
color : var ( -- red );
}
. price-disclaimer {
margin-top : 2 rem ;
padding : 1 rem 1.25 rem ;
border : 1 px solid var ( -- border );
border-radius : 4 px ;
font-size : 0.8 rem ;
color : var ( -- muted );
font-style : italic ;
background : var ( -- surface );
}
2026-06-26 13:41:18 +02:00
/* ── SUBMIT FORM ── */
# submit { background : var ( -- surface ); border-top : 1 px solid var ( -- border ); }
. form-grid {
display : grid ;
grid-template-columns : 1 fr 1 fr ;
gap : 1.25 rem ;
}
@ media ( max-width : 600px ) { . form-grid { grid-template-columns : 1 fr ; } }
. form-group { display : flex ; flex-direction : column ; gap : 0.4 rem ; }
. form-group . full { grid-column : 1 / -1 ; }
label {
font-size : 0.75 rem ;
font-weight : 600 ;
letter-spacing : 0.08 em ;
text-transform : uppercase ;
color : var ( -- muted );
}
input , select , textarea {
background : var ( -- bg );
border : 1 px solid var ( -- border );
color : var ( -- text );
padding : 0.75 rem 1 rem ;
font-family : 'Inter' , sans-serif ;
font-size : 0.9 rem ;
border-radius : 2 px ;
outline : none ;
transition : border-color 0.2 s ;
appearance : none ;
}
input : focus , select : focus , textarea : focus {
border-color : var ( -- gold );
box-shadow : 0 0 0 2 px rgba ( 201 , 168 , 76 , 0.1 );
}
textarea { resize : vertical ; min-height : 100 px ; }
select { cursor : pointer ; }
. submit-btn {
margin-top : 0.5 rem ;
background : linear-gradient ( 135 deg , var ( -- gold ), #a87b20 );
color : #0a0a0f ;
font-weight : 700 ;
font-size : 0.85 rem ;
letter-spacing : 0.1 em ;
text-transform : uppercase ;
padding : 0.9 rem 2.5 rem ;
border : none ; cursor : pointer ;
clip-path : polygon ( 10 px 0 % , 100 % 0 % , calc ( 100 % - 10 px ) 100 % , 0 % 100 % );
transition : opacity 0.2 s ;
align-self : flex-start ;
}
. submit-btn : hover { opacity : 0.85 ; }
. form-note {
margin-top : 1 rem ;
font-size : 0.75 rem ;
color : var ( -- muted );
font-style : italic ;
}
/* ── FOOTER ── */
footer {
border-top : 1 px solid var ( -- border );
padding : 2 rem ;
text-align : center ;
color : var ( -- muted );
font-size : 0.8 rem ;
}
footer strong { color : var ( -- gold ); font-family : 'Cinzel' , serif ; }
/* ── TOAST ── */
# toast {
position : fixed ; bottom : 2 rem ; right : 2 rem ; z-index : 999 ;
background : var ( -- surface );
border : 1 px solid var ( -- gold );
color : var ( -- text );
padding : 1 rem 1.5 rem ;
border-radius : 4 px ;
font-size : 0.9 rem ;
opacity : 0 ;
transform : translateY ( 10 px );
transition : opacity 0.3 s , transform 0.3 s ;
pointer-events : none ;
}
# toast . show { opacity : 1 ; transform : translateY ( 0 ); }
2026-06-26 17:21:04 +02:00
/* ── SCROLL TO TOP ── */
# scroll-top {
position : fixed ; bottom : 2 rem ; left : 2 rem ; z-index : 999 ;
width : 42 px ; height : 42 px ;
border : 1 px solid var ( -- gold );
background : var ( -- surface );
color : var ( -- gold );
font-size : 1.2 rem ;
cursor : pointer ;
border-radius : 4 px ;
display : flex ; align-items : center ; justify-content : center ;
opacity : 0 ;
transform : translateY ( 12 px );
pointer-events : none ;
transition : opacity 0.3 s , transform 0.3 s , background 0.2 s ;
line-height : 1 ;
}
# scroll-top . visible {
opacity : 1 ;
transform : translateY ( 0 );
pointer-events : auto ;
}
# scroll-top : hover {
background : var ( -- gold );
color : #0a0a0f ;
}
2026-06-26 13:41:18 +02:00
</ style >
</ head >
< body >
< nav >
2026-06-26 17:21:04 +02:00
< 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 >
2026-06-26 13:41:18 +02:00
</ nav >
<!-- HERO -->
< section class = "hero" >
< div class = "hero-glow" ></ div >
2026-06-26 15:42:00 +02:00
< div class = "eyebrow" > Pokémon · One Piece · Kortforvanskning</ div >
2026-06-26 13:41:18 +02:00
< h1 >
< span class = "line1" > Dine kort.</ span >
2026-06-26 15:42:00 +02:00
< span class = "line2" > Vi gør vores bedste.</ span >
2026-06-26 13:41:18 +02:00
</ h1 >
2026-06-26 15:42:00 +02:00
< p class = "hero-sub" > (det er ikke godt nok)</ p >
2026-06-26 13:41:18 +02:00
< div class = "cta-group" >
< a class = "btn-primary" href = "#submit" > Indsend dine kort</ a >
2026-06-26 15:42:00 +02:00
< a class = "btn-secondary" href = "#how" > Hvordan? (tro mig, du vil se)</ a >
2026-06-26 13:41:18 +02:00
</ 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 >
2026-06-26 17:21:04 +02:00
< div class = "card-art" > ✨</ div >
< div class = "card-grade" > HVAD</ div >
2026-06-26 13:41:18 +02:00
</ div >
< div class = "holo-card" >
2026-06-26 17:21:04 +02:00
< div class = "card-bg" style = "background:linear-gradient(135deg,#f0e0d0,#e8ccaa,#f0e0d0)" ></ div >
2026-06-26 13:41:18 +02:00
< div class = "card-shine" ></ div >
< div class = "card-label" > One Piece TCG</ div >
2026-06-26 17:21:04 +02:00
< div class = "card-art" > ➰</ div >
< div class = "card-grade" > BØJ</ div >
2026-06-26 13:41:18 +02:00
</ div >
< div class = "holo-card" >
2026-06-26 17:21:04 +02:00
< div class = "card-bg" style = "background:linear-gradient(135deg,#e0d8f0,#c8bae8,#e0d8f0)" ></ div >
2026-06-26 13:41:18 +02:00
< div class = "card-shine" ></ div >
< div class = "card-label" > Pokémon TCG</ div >
2026-06-26 17:21:04 +02:00
< div class = "card-art" > 💥</ div >
< div class = "card-grade" > KNÆK</ div >
2026-06-26 13:41:18 +02:00
</ div >
< div class = "holo-card" >
2026-06-26 17:21:04 +02:00
< div class = "card-bg" style = "background:linear-gradient(135deg,#d0ebe0,#a8e0cc,#d0ebe0)" ></ div >
2026-06-26 13:41:18 +02:00
< div class = "card-shine" ></ div >
< div class = "card-label" > One Piece TCG</ div >
2026-06-26 17:21:04 +02:00
< div class = "card-art" > 💧</ div >
< div class = "card-grade" > VÅD</ div >
2026-06-26 13:41:18 +02:00
</ div >
< div class = "holo-card" >
2026-06-26 17:21:04 +02:00
< div class = "card-bg" style = "background:linear-gradient(135deg,#f0d0d0,#e8b8b8,#f0d0d0)" ></ div >
2026-06-26 13:41:18 +02:00
< div class = "card-shine" ></ div >
< div class = "card-label" > Pokémon TCG</ div >
2026-06-26 17:21:04 +02:00
< div class = "card-art" > ⚰️</ div >
< div class = "card-grade" > RIP</ div >
2026-06-26 13:41:18 +02:00
</ div >
</ div >
</ section >
<!-- HOW IT WORKS -->
< section id = "how" >
< div class = "container" >
< h2 class = "section-title" > Sådan < span > virker det</ span ></ h2 >
2026-06-26 15:42:00 +02:00
< p class = "section-lead" > Fire enkle trin — fra din brevkasse til komplet kortødelæggelse.</ p >
2026-06-26 13:41:18 +02:00
< div class = "steps" >
< div class = "step" >
< div class = "step-num" > 01</ div >
< h3 > Indsend dine kort</ h3 >
2026-06-26 15:42:00 +02:00
< p > Udfyld formularen med kortoplysninger. Pak dem godt ind — det hjælper ikke, men du føler dig bedre tilpas.</ p >
2026-06-26 13:41:18 +02:00
</ div >
< div class = "step" >
< div class = "step-num" > 02</ div >
2026-06-26 15:42:00 +02:00
< h3 > Visuel bedømmelse</ h3 >
< p > Vores eksperter vurderer hurtigt hvilken ødelæggelsesmetode kortet fortjener. Bøjning? Knæk? Vandbad? Eller det hele?</ p >
2026-06-26 13:41:18 +02:00
</ div >
< div class = "step" >
< div class = "step-num" > 03</ div >
2026-06-26 15:42:00 +02:00
< 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 >
2026-06-26 13:41:18 +02:00
</ div >
< div class = "step" >
< div class = "step-num" > 04</ div >
2026-06-26 15:42:00 +02:00
< 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 >
2026-06-26 13:41:18 +02:00
</ div >
</ div >
</ div >
</ section >
<!-- GRADES -->
< section id = "grades" >
< div class = "container" >
2026-06-26 15:42:00 +02:00
< 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 >
2026-06-26 13:41:18 +02:00
< div class = "scale" >
< div class = "grade-chip prime-grade" >
2026-06-26 15:42:00 +02:00
< div class = "prime-grade-star" > 💀</ div >
2026-06-26 13:41:18 +02:00
< div class = "prime-grade-info" >
2026-06-26 15:42:00 +02:00
< 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 >
2026-06-26 13:41:18 +02:00
</ div >
</ div >
2026-06-26 15:42:00 +02:00
< 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 >
2026-06-26 17:21:04 +02:00
< div class = "grade-chip" >< span class = "grade-score" > M1</ span >< span class = "grade-label" > Mistet på lager</ span ></ div >
2026-06-26 13:41:18 +02:00
</ div >
</ div >
</ section >
<!-- SPECIAL LABELS -->
< section id = "labels" >
< div class = "container" >
< h2 class = "section-title" > Special < span > Labels</ span ></ h2 >
2026-06-26 15:42:00 +02:00
< p class = "section-lead" > Udover knækningsskalaen tildeler vi særlige labels som ekstra pynt på din ødelagte slab.</ p >
2026-06-26 13:41:18 +02:00
< div class = "labels-grid" >
< div class = "label-card" >
< div class = "label-dot" style = "background:#4caf50;" ></ div >
< div >
< h4 > Prime Standard</ h4 >
2026-06-26 15:42:00 +02:00
< p > Vores grundlæggende label. Kortet er bøjet, det er forseglet. Mission completed.</ p >
2026-06-26 13:41:18 +02:00
</ div >
</ div >
< div class = "label-card" >
< div class = "label-dot" style = "background:#c9a84c;" ></ div >
< div >
< h4 > Gold Label</ h4 >
2026-06-26 15:42:00 +02:00
< p > For kort der har modtaget ekstraordinær ødelæggelse. To eller flere metoder anvendt.</ p >
2026-06-26 13:41:18 +02:00
</ div >
</ div >
< div class = "label-card" >
< div class = "label-dot" style = "background:#e05c5c;" ></ div >
< div >
< h4 > Founder Edition</ h4 >
2026-06-26 15:42:00 +02:00
< p > Eksklusivt label til de første heldige kort der blev ofret til PrimeGrading.dk.</ p >
2026-06-26 13:41:18 +02:00
</ div >
</ div >
< div class = "label-card" >
< div class = "label-dot" style = "background:#555570;" ></ div >
< div >
< h4 > Black Label</ h4 >
2026-06-26 15:42:00 +02:00
< 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 >
2026-06-26 13:41:18 +02:00
</ 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 >
2026-06-26 15:42:00 +02:00
< 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 >
2026-06-26 13:41:18 +02:00
</ div >
</ div >
</ div >
2026-06-26 15:42:00 +02:00
< h3 class = "section-title" style = "font-size:1.2rem; margin-bottom:1rem;" > Black Label < span > vs PRIME KNÆK</ span ></ h3 >
2026-06-26 13:41:18 +02:00
< div class = "compare-box" >
< div class = "compare-col" >
< h4 > Black Label</ h4 >
< ul >
2026-06-26 15:42:00 +02:00
< li > Kortet er bøjet efter specifikation</ li >
< li > Sort label — diskret og elegant ødelæggelse</ li >
2026-06-26 13:41:18 +02:00
</ ul >
</ div >
< div class = "compare-col prime" >
2026-06-26 15:42:00 +02:00
< h4 > PRIME KNÆK</ h4 >
2026-06-26 13:41:18 +02:00
< ul >
2026-06-26 15:42:00 +02:00
< 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 >
2026-06-26 13:41:18 +02:00
</ ul >
</ div >
</ div >
</ div >
</ section >
2026-06-26 14:03:15 +02:00
<!-- TEAM -->
< section id = "team" >
< div class = "container" >
2026-06-26 15:42:00 +02:00
< 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 >
2026-06-26 14:03:15 +02:00
< div class = "team-grid" >
< div class = "team-card" >
< div class = "team-avatar" > 🧢</ div >
2026-06-26 15:42:00 +02:00
< 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 >
2026-06-26 14:03:15 +02:00
</ div >
< div class = "team-card" >
2026-06-26 15:42:00 +02:00
< 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 >
2026-06-26 14:03:15 +02:00
</ div >
< div class = "team-card" >
2026-06-26 15:42:00 +02:00
< 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 >
2026-06-26 14:03:15 +02:00
</ 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– </ 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" >
2026-06-26 15:42:00 +02:00
< div class = "price-tier" > 💀 PRIME KNÆK</ div >
2026-06-26 14:03:15 +02:00
< 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 >
2026-06-26 15:42:00 +02:00
< li > Signeret certifikat fra chefknækkeren</ li >
2026-06-26 14:03:15 +02:00
< 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" >
2026-06-26 15:42:00 +02:00
* 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.
2026-06-26 14:03:15 +02:00
</ div >
</ div >
</ section >
2026-06-26 13:41:18 +02:00
<!-- SUBMIT -->
< section id = "submit" >
< div class = "container" >
< h2 class = "section-title" > Indsend < span > dine kort</ span ></ h2 >
2026-06-26 15:42:00 +02:00
< p class = "section-lead" > Udfyld formularen herunder, så vender vi tilbage med en fragtlabel — og potentielt undskylder på forhånd.</ p >
2026-06-26 13:41:18 +02:00
< 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 >
2026-06-26 15:42:00 +02:00
< option > Andet (held og lykke)</ option >
2026-06-26 13:41:18 +02:00
</ select >
</ div >
< div class = "form-group" >
2026-06-26 15:42:00 +02:00
< 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 >
2026-06-26 17:21:04 +02:00
< option > 🎲 Overrask mig — vi finder på noget</ option >
2026-06-26 15:42:00 +02:00
</ select >
</ div >
< div class = "form-group full" >
2026-06-26 13:41:18 +02:00
< label for = "count" > Antal kort</ label >
2026-06-26 15:42:00 +02:00
< input type = "number" id = "count" min = "1" max = "100" placeholder = "Hvor mange skal have turen?" />
2026-06-26 13:41:18 +02:00
</ 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" >
2026-06-26 15:42:00 +02:00
< 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 >
2026-06-26 13:41:18 +02:00
</ div >
</ div >
</ div >
</ section >
< footer >
2026-06-26 15:42:00 +02:00
< 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 >
2026-06-26 13:41:18 +02:00
</ footer >
2026-06-26 15:42:00 +02:00
< div id = "toast" > ✓ Din forespørgsel er modtaget — vi knækker dem snart!</ div >
2026-06-26 13:41:18 +02:00
2026-06-26 17:21:04 +02:00
< button id = "scroll-top" onclick = "window.scrollTo({top:0,behavior:'smooth'})" aria-label = "Til toppen" > ↑</ button >
2026-06-26 13:41:18 +02:00
< script >
2026-06-26 17:21:04 +02:00
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' );
2026-06-26 13:41:18 +02:00
}
2026-06-26 15:42:00 +02:00
2026-06-26 17:21:04 +02:00
// 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' );
}
});
2026-06-26 15:42:00 +02:00
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' );
}
2026-06-26 17:21:04 +02:00
function handleSubmit () {
const toast = document . getElementById ( 'toast' );
toast . classList . add ( 'show' );
setTimeout (() => toast . classList . remove ( 'show' ), 3500 );
}
2026-06-26 13:41:18 +02:00
</ script >
</ body >
2026-06-26 15:42:00 +02:00
</ html >
