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" />
< 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 : 1 rem 2.5 rem ;
background : rgba ( 10 , 10 , 15 , 0.85 );
backdrop-filter : blur ( 12 px );
border-bottom : 1 px solid var ( -- border );
}
. logo {
font-family : 'Cinzel' , serif ;
font-weight : 900 ;
font-size : 1.3 rem ;
letter-spacing : 0.08 em ;
background : linear-gradient ( 135 deg , 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 : 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 ); }
/* ── 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 ;
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 ;
background : linear-gradient ( 135 deg , #fff 30 % , var ( -- gold - light ));
-webkit- background-clip : text ; -webkit- text-fill-color : transparent ; background-clip : text ;
}
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 ;
border : 1 px solid rgba ( 255 , 255 , 255 , 0.08 );
cursor : pointer ;
transition : transform 0.3 s , box-shadow 0.3 s ;
}
. holo-card : hover {
transform : translateY ( -8 px ) rotate ( -1 deg );
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 ;
background : linear-gradient ( 135 deg , #1a1a2e , #16213e , #0f3460 );
}
. holo-card . card-shine {
position : absolute ; inset : 0 ;
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 %
);
opacity : 0 ;
transition : opacity 0.3 s ;
}
. 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 ;
font-size : 1.1 rem ;
width : 28 px ; height : 28 px ;
display : flex ; align-items : center ; justify-content : center ;
border-radius : 2 px ;
}
. 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 ;
color : rgba ( 255 , 255 , 255 , 0.6 );
}
. 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 ;
background : linear-gradient ( 135 deg , 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.5 rem ;
padding : 1.25 rem 1.5 rem ;
text-align : left ;
}
. grade-chip . prime-grade : hover {
border-color : var ( -- gold );
background : linear-gradient ( 135 deg , rgba ( 201 , 168 , 76 , 0.12 ), rgba ( 90 , 240 , 216 , 0.06 ), rgba ( 176 , 110 , 245 , 0.06 ));
}
. 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 ;
background : linear-gradient ( 135 deg , 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.78 rem ; color : var ( -- muted ); margin-top : 0.25 rem ; line-height : 1.5 ;
}
. grade-score {
font-family : 'Cinzel' , serif ;
font-size : 2 rem ;
font-weight : 900 ;
background : linear-gradient ( 135 deg , var ( -- gold ), var ( -- gold - light ));
-webkit- background-clip : text ; -webkit- text-fill-color : transparent ; background-clip : text ;
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 ;
}
/* ── LABELS SECTION ── */
# 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 % ;
background : linear-gradient ( 135 deg , var ( -- border ), #2a2a3e );
margin : 0 auto 1 rem ;
display : flex ; align-items : center ; justify-content : center ;
font-size : 1.8 rem ;
border : 2 px solid var ( -- border );
}
. 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 ;
}
. 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 ); }
</ 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 >
2026-06-26 14:03:15 +02:00
< li >< a href = "#team" > Teamet</ a ></ li >
< li >< a href = "#priser" > Priser</ a ></ li >
2026-06-26 13:41:18 +02:00
< 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– </ 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 >
2026-06-26 14:03:15 +02:00
<!-- TEAM -->
< section id = "team" >
< div class = "container" >
< h2 class = "section-title" > Mød < span > teamet</ span ></ h2 >
< p class = "section-lead" > Folkene bag PrimeGrading.dk.</ p >
< div class = "team-grid" >
<!-- Ret navn, emoji, titel og bio herunder -->
< div class = "team-card" >
< div class = "team-avatar" > 🧢</ div >
< div class = "team-name" > Navn Navnesen</ div >
< div class = "team-role" > Stifter & Chefgrader</ div >
< div class = "team-bio" > Samlerkort-nørd siden barnsben. Har graderet over 500 kort og kender forskel på en PSA 9 og en PSA 10.</ div >
</ div >
< div class = "team-card" >
< div class = "team-avatar" > 🔍</ div >
< div class = "team-name" > Navn Navnesen</ div >
< div class = "team-role" > Grader</ div >
< div class = "team-bio" > Specialist i One Piece TCG. Øje for fabriksfejl og printfejl du aldrig selv ville have spottet.</ div >
</ div >
< div class = "team-card" >
< div class = "team-avatar" > 📦</ div >
< div class = "team-name" > Navn Navnesen</ div >
< div class = "team-role" > Logistik & Pakning</ div >
< div class = "team-bio" > Sørger for at dine kort ankommer og returneres sikkert. Ingen kort er nogensinde gået tabt.</ 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– </ 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 DESTROY</ 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 chefgraderen</ 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, vand-tillæg og diverse gebyrer vi finder på undervejs. PrimeGrading.dk påtager sig intet ansvar for kortenes tilstand efter gradering — det burde du have vidst inden du sendte dem.
</ 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 >
< 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 >
2026-06-26 14:03:15 +02:00
< div id = "toast" > ✓ Din forespørgsel er forsøgt sendt — vi vender ALDRIG tilbage!</ div >
2026-06-26 13:41:18 +02:00
< script >
function handleSubmit () {
const toast = document . getElementById ( 'toast' );
toast . classList . add ( 'show' );
setTimeout (() => toast . classList . remove ( 'show' ), 3500 );
}
</ script >
</ body >
</ html >
