📁 File Manager

Dosya Düzenle: id_card.css

/* ===========================================
   Mangaldai College Alumni PVC ID Card
=========================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

background:#edf2f8;
font-family:'Poppins',sans-serif;

}

/* Preview Area */

.card-preview{

display:flex;
justify-content:center;
align-items:flex-start;
gap:40px;
flex-wrap:wrap;
margin:30px auto;

}

/* PVC Card */

.id-card{

width:98mm;              /* 15% larger preview */
height:62mm;

background:#ffffff;

border-radius:18px;

overflow:hidden;

position:relative;

box-shadow:
0 18px 45px rgba(0,0,0,.18);

border:2px solid #d9d9d9;

}

/* ==========================
Header
========================== */

.card-header{

height:68px;

background:linear-gradient(135deg,#003B95,#0B5ED7);

display:flex;

align-items:center;

padding:12px;

color:white;

}

.college-logo img{

width:48px;
height:48px;

border-radius:50%;

background:white;

padding:3px;

margin-right:10px;

}

.college-title h3{

font-size:14px;

margin:0;

font-weight:700;

}

.college-title span{

font-size:11px;

letter-spacing:1px;

opacity:.9;

}

/* Gold Strip */

.gold-strip{

height:22px;

background:#FFC107;

text-align:center;

font-size:11px;

font-weight:700;

line-height:22px;

letter-spacing:1px;

}

/* ==========================
Photo
========================== */

.photo-section{

text-align:center;

margin-top:12px;

}

.profile-photo{

width:95px;

height:95px;

border-radius:50%;

object-fit:cover;

border:5px solid white;

outline:3px solid #0B5ED7;

box-shadow:0 5px 12px rgba(0,0,0,.25);

}

/* ==========================
Name
========================== */

.member-name{

text-align:center;

margin-top:12px;

font-size:18px;

font-weight:700;

color:#003B95;

}

.member-id{

text-align:center;

margin-top:5px;

font-size:11px;

font-weight:600;

color:#666;

}

.member-id strong{

font-size:13px;

color:#111;

}

/* ==========================
Table
========================== */

.info-table{

width:92%;

margin:15px auto;

border-collapse:collapse;

}

.info-table td{

padding:6px;

font-size:11px;

border-bottom:1px dashed #dddddd;

}

.info-table td:first-child{

width:40%;

font-weight:700;

color:#003B95;

}

.info-table td:last-child{

text-align:right;

font-weight:500;

}

/* ==========================
QR
========================== */

.qr-section{

text-align:center;

margin-top:8px;

}

.qr-code{

width:72px;

height:72px;

border:3px solid #003B95;

padding:4px;

background:white;

}

.verify-text{

margin-top:4px;

font-size:10px;

color:#555;

}

/* ==========================
Digital Note
========================== */

.digital-note{

margin:10px;

padding:8px;

background:#eef6ff;

border-left:5px solid #0B5ED7;

font-size:10px;

line-height:16px;

text-align:center;

color:#333;

}

/* ==========================
BACK CARD
========================== */

.back-card{

background:white;

}

.back-header{

background:#003B95;

color:white;

padding:12px;

font-size:14px;

font-weight:700;

text-align:center;

letter-spacing:1px;

}

.back-body{

padding:15px;

font-size:11px;

}

.back-qr{

width:95px;

height:95px;

border:3px solid #003B95;

padding:4px;

background:white;

}

.verify-info{

margin:12px 0;

text-align:center;

font-size:11px;

color:#555;

line-height:18px;

}

.back-table{

width:100%;

border-collapse:collapse;

margin-top:10px;

}

.back-table td{

padding:5px;

font-size:11px;

border-bottom:1px dashed #ddd;

}

.rules{

margin-top:12px;

font-size:10px;

line-height:18px;

}

.rules ul{

padding-left:18px;

}

.digital-box{

margin-top:14px;

background:#eef6ff;

border:1px solid #0B5ED7;

padding:10px;

border-radius:8px;

text-align:center;

font-size:10px;

line-height:16px;

}

.college-address{

margin-top:12px;

text-align:center;

font-size:10px;

color:#444;

}

.back-footer{

position:absolute;

bottom:0;

width:100%;

background:#003B95;

color:white;

text-align:center;

padding:8px;

font-size:10px;

}

/* ==========================
Buttons
========================== */

.btn{

border-radius:8px;

font-weight:600;

}

/* ==========================
Print
========================== */

@media print{

body{

background:white;

}

.container{

margin:0;

padding:0;

}

.card-preview{

gap:0;

}

.id-card{

box-shadow:none;

border:none;

width:85.60mm;
height:53.98mm;

page-break-inside:avoid;

}

.btn{

display:none;

}

İptal