From 3600cc2334a32a2ffffbb9aa68d59ca0cc4241b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Mon, 8 Jun 2026 18:33:25 +0300
Subject: [PATCH] refactor: implement global CSS variable for transcript
 typography scaling and apply semantic class-based sizing

---
 resources/views/front/career/verify.blade.php | 56 ++++++++++++++-----
 1 file changed, 42 insertions(+), 14 deletions(-)

diff --git a/resources/views/front/career/verify.blade.php b/resources/views/front/career/verify.blade.php
index 2493c64..9c2d42e 100644
--- a/resources/views/front/career/verify.blade.php
+++ b/resources/views/front/career/verify.blade.php
@@ -126,16 +126,16 @@
                     <!-- Header -->
                     <div class="flex justify-between items-center pb-2 border-b border-slate-100 mb-3">
                         <div>
-                            <h2 class="font-serif text-sm font-bold text-slate-900 uppercase">Staj Akademik Transkripti</h2>
-                            <p class="text-[7px] text-slate-400 tracking-wider uppercase mt-0.5">Ve Performans Değerlendirme Raporu</p>
+                            <h2 class="font-serif font-bold text-slate-900 uppercase transcript-header-title">Staj Akademik Transkripti</h2>
+                            <p class="text-slate-400 tracking-wider uppercase mt-0.5 transcript-header-subtitle">Ve Performans Değerlendirme Raporu</p>
                         </div>
                         <img src="{{ asset('logos/truncgil-yatay.svg') }}" alt="Trunçgil Logo" class="h-6 object-contain">
                     </div>
 
                     <!-- Student Info block -->
                     <div class="bg-slate-50 rounded-xl p-2.5 border border-slate-100 mb-3">
-                        <h3 class="text-[7.5px] font-bold text-slate-400 uppercase tracking-widest mb-1.5">Öğrenci / Stajyer Bilgileri</h3>
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-y-1 gap-x-8 text-[8.5px]">
+                        <h3 class="font-bold text-slate-400 uppercase tracking-widest mb-1.5 student-info-title">Öğrenci / Stajyer Bilgileri</h3>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-y-1 gap-x-8 student-info-grid">
                             <div class="flex justify-between border-b border-slate-200/50 pb-1">
                                 <span class="text-slate-500">Adı Soyadı:</span>
                                 <strong class="text-slate-800">{{ $application->name }}</strong>
@@ -166,11 +166,11 @@
                     <div class="flex items-center gap-3">
                         <img src="https://api.qrserver.com/v1/create-qr-code/?size=120x120&data={{ urlencode(route('internship.verify', $application->certificate_code)) }}" alt="QR Code" class="w-14 h-14 border border-slate-200 p-0.5 rounded-lg bg-white">
                         <div>
-                            <span class="text-[6.5px] font-bold text-slate-400 uppercase tracking-wider block">Güvenli Doğrulama Kodu</span>
-                            <span class="text-[9px] font-mono font-bold text-slate-800 block">{{ $application->certificate_code }}</span>
+                            <span class="font-bold text-slate-400 uppercase tracking-wider block verify-code-label">Güvenli Doğrulama Kodu</span>
+                            <span class="font-mono font-bold text-slate-800 block verify-code">{{ $application->certificate_code }}</span>
                         </div>
                     </div>
-                    <div class="text-right text-[7.5px] text-slate-400">
+                    <div class="text-right text-slate-400 footer-address">
                         Trunçgil Teknoloji San. ve Tic. Ltd. Şti.<br>
                         Gaziantep Üniversitesi Teknopark No: 4A
                     </div>
@@ -186,6 +186,11 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
 <style>
+    :root {
+        /* Global scale factor for transcript page fonts. Adjust this easily (e.g. 1.0, 1.10, 1.20) */
+        --transcript-font-scale: 1.30;
+    }
+
     body {
         font-family: 'Inter', sans-serif;
     }
@@ -193,6 +198,29 @@
         font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
     }
 
+    /* Transcript typography helpers scaled globally */
+    .transcript-header-title {
+        font-size: calc(0.875rem * var(--transcript-font-scale)) !important;
+    }
+    .transcript-header-subtitle {
+        font-size: calc(7px * var(--transcript-font-scale)) !important;
+    }
+    .student-info-title {
+        font-size: calc(7.5px * var(--transcript-font-scale)) !important;
+    }
+    .student-info-grid {
+        font-size: calc(8.5px * var(--transcript-font-scale)) !important;
+    }
+    .verify-code-label {
+        font-size: calc(6.5px * var(--transcript-font-scale)) !important;
+    }
+    .verify-code {
+        font-size: calc(9px * var(--transcript-font-scale)) !important;
+    }
+    .footer-address {
+        font-size: calc(7.5px * var(--transcript-font-scale)) !important;
+    }
+
     /* Screen display aspect styling */
     .certificate-page {
         width: 100%;
@@ -226,7 +254,7 @@
         background-color: #f8fafc;
         border-bottom: 2px solid #e2e8f0;
         color: #1e293b;
-        font-size: 0.45rem !important;
+        font-size: calc(0.45rem * var(--transcript-font-scale)) !important;
         text-transform: uppercase;
         letter-spacing: 0.05em;
     }
@@ -234,7 +262,7 @@
         padding: 0.2rem 0.35rem !important;
         border-bottom: 1px solid #e2e8f0;
         color: #334155;
-        font-size: 0.45rem !important;
+        font-size: calc(0.45rem * var(--transcript-font-scale)) !important;
         line-height: 1.2 !important;
     }
     .prose tr:hover {
@@ -248,17 +276,17 @@
         border-bottom: 1px solid #e2e8f0;
         padding-bottom: 0.15rem;
         font-weight: 700;
-        font-size: 0.6rem !important;
+        font-size: calc(0.6rem * var(--transcript-font-scale)) !important;
     }
     .prose h4 {
         color: #1e293b;
         margin-top: 0.4rem !important;
         margin-bottom: 0.2rem !important;
         font-weight: 600;
-        font-size: 0.52rem !important;
+        font-size: calc(0.52rem * var(--transcript-font-scale)) !important;
     }
     .prose p {
-        font-size: 0.45rem !important;
+        font-size: calc(0.45rem * var(--transcript-font-scale)) !important;
         line-height: 1.3 !important;
         margin-top: 0.15rem !important;
         margin-bottom: 0.2rem !important;
@@ -273,7 +301,7 @@
         list-style-type: none !important;
     }
     .prose ul li {
-        font-size: 0.45rem !important;
+        font-size: calc(0.45rem * var(--transcript-font-scale)) !important;
         line-height: 1.3 !important;
         margin: 0 !important;
         position: relative;
@@ -293,7 +321,7 @@
         font-style: italic;
         color: #475569;
         margin: 0.4rem 0 !important;
-        font-size: 0.45rem !important;
+        font-size: calc(0.45rem * var(--transcript-font-scale)) !important;
     }
 
     /* Print media config for mixed Landscape & Portrait */