/* ========================================================================== R.N. Vidyalaya & Junior College — Document Themes Two printable A4 letterheads: .t-registry → letters, notices, appointment letters .t-gazette → certificates, mark statements Pure CSS. No framework, no build step, no dependencies. Fonts (add this line to your ): ========================================================================== */ /* ---------- A4 page shell ---------- */ .a4 { width: 210mm; min-height: 297mm; position: relative; overflow: hidden; display: flex; flex-direction: column; flex: 0 0 auto; background: #fff; box-shadow: 0 20px 80px rgba(0, 0, 0, .5); /* screen only — removed when printing */ } .doc-dev { font-family: 'Noto Sans Devanagari', sans-serif; } /* ========================================================================== THEME A — REGISTRY (letters · notices · appointments) Deep petrol masthead, vermilion rule, document type on a coloured spine. ========================================================================== */ .t-registry { --ink: #0C242E; --red: #D93A1E; --rul: #DCE2E6; --mut: #5F7078; font-family: 'Archivo', 'Inter', sans-serif; } .t-registry .rg-mast { background: var(--ink); padding: 17mm 16mm 12mm; display: flex; gap: 9mm; align-items: center; } .t-registry .rg-crest { width: 31mm; height: 31mm; background: #fff; border-radius: 3mm; padding: 2.4mm; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; } .t-registry .rg-crest img { width: 100%; height: 100%; object-fit: contain; } .t-registry .rg-mtxt { flex: 1; color: #fff; min-width: 0; } .t-registry .rg-trust { font-size: 8pt; font-weight: 600; color: #E9B4A6; letter-spacing: 2.4px; text-transform: uppercase; margin-bottom: 2.4mm; } .t-registry .rg-nm { font-weight: 700; font-size: 21pt; line-height: 1.05; letter-spacing: -.5px; } .t-registry .rg-nmr { font-size: 11.5pt; font-weight: 500; color: #B9CAD2; margin-top: 1.6mm; } .t-registry .rg-meta { border-left: 1px solid rgba(255,255,255,.2); padding-left: 6mm; text-align: right; color: #9FB4BE; font-size: 7.2pt; line-height: 1.8; letter-spacing: .4px; flex: 0 0 auto; } .t-registry .rg-meta b { display: block; color: #fff; font-size: 8.4pt; font-weight: 600; letter-spacing: .8px; margin-bottom: 1.6mm; } .t-registry .rg-rule { height: 3.4mm; background: var(--red); } .t-registry .rg-addr { padding: 3.6mm 16mm; font-size: 8pt; color: var(--mut); border-bottom: 1px solid var(--rul); line-height: 1.5; } .t-registry .rg-inner { display: flex; flex: 1; } .t-registry .rg-spine { width: 13mm; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .t-registry .rg-spine span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9pt; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; white-space: nowrap; } .t-registry .rg-cont { flex: 1; padding: 12mm 14mm; display: flex; flex-direction: column; min-width: 0; } .t-registry .rg-foot { background: var(--ink); color: #8FA6B1; font-size: 7.2pt; padding: 3.6mm 16mm; display: flex; justify-content: space-between; letter-spacing: .4px; } /* body text inside Registry */ .t-registry .cert { font-family: 'Source Serif 4', 'Times New Roman', serif; color: #20313B; } .t-registry .cert-refrow { font-family: 'Archivo', sans-serif; font-size: 8.4pt; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--ink); padding-bottom: 3mm; border-bottom: 1px solid var(--rul); margin-bottom: 0; } .t-registry .cert-title { font-family: 'Archivo', sans-serif; font-size: 15pt; font-weight: 700; letter-spacing: 3.6px; text-transform: uppercase; color: var(--ink); text-align: left; margin: 10mm 0 7mm; } .t-registry .cert-content { font-size: 11.2pt; line-height: 2.1; } .t-registry .fill { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--ink); padding: 0 2mm; } .t-registry .cert-sig-line { border-top: 1.4px solid var(--ink); } .t-registry .cert-sig-name { font-family: 'Archivo', sans-serif; font-size: 8.4pt; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; } .t-registry .cert-sig-sub { font-size: 7.6pt; color: var(--mut); } /* ========================================================================== THEME B — GAZETTE (certificates · mark statements) Bone paper, double-rule frame, centred masthead, amber accents. ========================================================================== */ .t-gazette { --ink: #0C242E; --bone: #F4F0E8; --amb: #B4802F; --rul: #D5CCBB; background: var(--bone); padding: 9mm; font-family: 'Spectral', serif; } .t-gazette .gz-frame { border: 1px solid var(--rul); outline: 3px double var(--rul); outline-offset: 2.6mm; flex: 1; display: flex; flex-direction: column; padding: 11mm 12mm 9mm; } .t-gazette .gz-mast { text-align: center; padding-bottom: 6mm; border-bottom: 1px solid var(--rul); } .t-gazette .gz-crest { width: 26mm; height: 26mm; margin: 0 auto 4mm; } .t-gazette .gz-crest img { width: 100%; height: 100%; object-fit: contain; } .t-gazette .gz-trust { font-size: 9pt; color: var(--amb); letter-spacing: 3.2px; text-transform: uppercase; margin-bottom: 2.4mm; } .t-gazette .gz-nm { font-weight: 600; font-size: 21pt; color: var(--ink); line-height: 1.14; } .t-gazette .gz-nmr { font-size: 11.5pt; color: #3E525C; margin-top: 1.5mm; } .t-gazette .gz-sub { font-size: 8.4pt; color: #6B7A82; margin-top: 3mm; letter-spacing: 1.4px; } .t-gazette .gz-addr { font-size: 8pt; color: #6B7A82; margin-top: 2.2mm; line-height: 1.7; } .t-gazette .gz-body { flex: 1; display: flex; flex-direction: column; } .t-gazette .gz-foot { text-align: center; font-size: 7.4pt; color: #8A9299; padding-top: 5mm; margin-top: 5mm; border-top: 1px solid var(--rul); letter-spacing: .7px; } /* body text inside Gazette */ .t-gazette .cert { font-family: 'Spectral', 'Times New Roman', serif; color: #22333C; } .t-gazette .cert-title { font-size: 14.5pt; font-weight: 600; letter-spacing: 5.5px; text-transform: uppercase; color: var(--ink); text-align: center; margin: 8mm 0 0; } .t-gazette .cert-title::after { content: ''; display: block; width: 34mm; height: 2px; background: var(--amb); margin: 3.4mm auto 0; } .t-gazette .cert-refrow { font-size: 9pt; color: #4A5A63; margin: 7mm 0 6mm; } .t-gazette .cert-content { font-size: 10.8pt; line-height: 2.05; } .t-gazette .fill { font-weight: 600; color: var(--ink); border-bottom: 1px dotted var(--amb); padding: 0 2mm; } .t-gazette .cert-sig-line { border-top: 1px solid var(--ink); } .t-gazette .cert-sig-name { font-size: 9pt; font-weight: 600; color: var(--ink); } .t-gazette .cert-sig-sub { font-size: 7.6pt; color: #6B7A82; } .t-gazette .res-table th { background: rgba(180,128,47,.12); color: var(--ink); } /* ========================================================================== SHARED BODY PARTS — used by both themes ========================================================================== */ .cert { display: flex; flex-direction: column; flex: 1; } .cert-refrow { display: flex; justify-content: space-between; } .cert-content { text-align: justify; } .cert-certify { font-style: italic; font-size: 9.5pt; margin-top: 6mm; line-height: 1.7; } .cert-signs { display: flex; justify-content: space-between; margin-top: auto; padding-top: 22mm; gap: 12mm; } .cert-sig { text-align: center; min-width: 52mm; } .cert-sig-line { margin-bottom: 2mm; } .cert-seal { font-size: 8.5pt; color: #8A9299; font-style: italic; margin-top: 5mm; } .cert-foot { font-size: 7.6pt; color: #8A9299; font-style: italic; margin-top: 5mm; border-top: 1px solid rgba(0,0,0,.12); padding-top: 3mm; } /* Leaving certificate table */ .lc-note { border: 1px solid #555; padding: 2.4mm 4mm; font-size: 8pt; font-style: italic; text-align: center; line-height: 1.45; } .lc-meta { display: flex; justify-content: space-between; font-size: 9.5pt; margin: 2mm 0 4mm; } .lc-mcol div { margin-bottom: 1mm; } .lc-mcol.right { text-align: right; } .lc-table { width: 100%; border-collapse: collapse; font-size: 9pt; } .lc-table td { border: 1px solid #444; padding: 1.8mm 2.6mm; vertical-align: top; } .lc-num { width: 8mm; text-align: center; } .lc-lab { width: 40%; font-weight: 700; text-transform: uppercase; font-size: 8.2pt; } .lc-val { font-weight: 600; } .lc-bottom { margin-top: auto; padding-top: 10mm; } .lc-date { font-size: 9.5pt; margin-bottom: 8mm; } .lc-signrow { display: flex; justify-content: space-between; } .lc-sig { text-align: center; min-width: 44mm; border-top: 1px solid #333; padding-top: 1.8mm; font-weight: 700; font-size: 9.5pt; } /* Mark statement */ .res-id { width: 100%; font-size: 10pt; margin-bottom: 5mm; } .res-id td { padding: 1.2mm 2mm; } .res-table { width: 100%; border-collapse: collapse; font-size: 10pt; margin-bottom: 5mm; } .res-table th, .res-table td { border: 1px solid #C9C0B2; padding: 1.8mm 3mm; text-align: left; } .res-table th { font-weight: 700; } .res-table th:first-child, .res-table td:first-child { text-align: center; width: 10mm; } .res-summary { display: flex; gap: 10mm; flex-wrap: wrap; margin-bottom: 3mm; } .res-summary span { display: block; font-size: 7.5pt; text-transform: uppercase; letter-spacing: 1px; color: #999; margin-bottom: 1mm; } .res-summary b { font-size: 12pt; } .res-pass { color: #2e7d32 !important; } .res-fail { color: #c62828 !important; } /* ========================================================================== PRINT — full-bleed A4, no margins, colours preserved ========================================================================== */ @media print { @page { size: A4; margin: 0; } html, body { margin: 0 !important; padding: 0 !important; width: 210mm; background: #fff !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .a4 { box-shadow: none !important; width: 210mm !important; min-height: 296mm !important; height: auto !important; margin: 0 !important; border-radius: 0 !important; overflow: hidden !important; break-after: page; page-break-after: always; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .a4:last-child { break-after: auto; page-break-after: auto; } .no-print { display: none !important; } }