/* ========================================================================== MY-Card — /card//physical/ print page (editorial). Prefix: pp- Screen: paper desk, both faces shown like real stock with dimension marks. Print: one card per page at exact ID-1 size (85.6 × 54 mm, ISO/IEC 7810), no margins, colours forced. Card faces always use the owner's CardTheme colours (set inline on as --pp-bg/--pp-accent/--pp-text). ========================================================================== */ /* Exact colours when printing, one card per page, zero margin */ .pp-body, .pp-body * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; } @page { size: 85.6mm 54mm; margin: 0; } .pp-body { /* Default card stock (no theme): Midnight & Brass */ --pp-bg: linear-gradient(150deg, #0D1729 0%, #16243D 60%, #1F3354 100%); --pp-accent: #D8B878; --pp-text: #F2EEE5; --pp-card-w: 85.6mm; --pp-card-h: 54mm; --pp-zoom: 1.5; } .pp-body .mc-page-bar { display: none !important; } .pp-page { position: relative; z-index: 2; min-height: 100vh; padding-bottom: clamp(64px, 8vw, 112px); } .pp-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); } /* ---------- Top bar ---------- */ .pp-bar { border-bottom: 1px solid var(--rule); } .pp-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 68px; } .pp-bar__actions { display: flex; align-items: center; gap: 0.6rem; } /* ---------- Head ---------- */ .pp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; padding-top: clamp(36px, 6vw, 72px); padding-bottom: clamp(28px, 4vw, 44px); } .pp-head__copy { display: grid; gap: 14px; max-width: 640px; } .pp-title { font-family: var(--serif); font-weight: 380; font-variation-settings: 'opsz' 144; font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.02; letter-spacing: -0.035em; color: var(--ink); } .pp-lede { font-size: clamp(1rem, 1.3vw, 1.12rem); } .pp-head__actions { display: flex; gap: 10px; flex-wrap: wrap; } /* ---------- Desk ---------- */ .pp-desk { background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: clamp(40px, 6vw, 88px) 0; position: relative; } .pp-stage { display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-start; gap: clamp(40px, 5vw, 72px); max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); } .pp-page-wrap { margin: 0; display: grid; gap: 18px; justify-items: start; } .pp-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); display: inline-flex; gap: 0.6rem; align-items: center; } .pp-label span { color: var(--accent); } /* Spec block: card + technical-drawing dimension marks (screen only) */ .pp-spec { position: relative; padding: 26px 0 0 26px; } .pp-dim { position: absolute; color: var(--ink-3); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; pointer-events: none; } .pp-dim span { background: var(--paper-2); padding: 0 6px; position: relative; z-index: 1; white-space: nowrap; } .pp-dim--w { top: 0; left: 26px; right: 0; height: 12px; border-left: 1px solid var(--ink-3); border-right: 1px solid var(--ink-3); display: grid; place-items: center; } .pp-dim--w::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule); } .pp-dim--h { top: 26px; left: 0; bottom: 0; width: 12px; border-top: 1px solid var(--ink-3); border-bottom: 1px solid var(--ink-3); display: grid; place-items: center; } .pp-dim--h::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--rule); } .pp-dim--h span { transform: rotate(-90deg); } /* Screen preview: cards are ALWAYS 85.6mm × 54mm; CSS `zoom` (unlike transform) affects layout so the preview grows without overlapping. Print resets to 1. */ .pp-card-holder { zoom: var(--pp-zoom); line-height: 0; } /* ---------- Card base ---------- */ .pp-card { --paper: transparent; /* brand-mark cut line */ --pp-text-2: color-mix(in srgb, var(--pp-text) 76%, transparent); --pp-text-3: color-mix(in srgb, var(--pp-text) 58%, transparent); --pp-line: color-mix(in srgb, var(--pp-text) 18%, transparent); width: var(--pp-card-w); height: var(--pp-card-h); background: var(--pp-bg); color: var(--pp-text); border-radius: 3mm; padding: 4mm 4.5mm; position: relative; overflow: hidden; font-family: var(--sans); line-height: normal; display: flex; flex-direction: column; isolation: isolate; /* Real stock sitting on the desk: contact shadow + soft lift */ box-shadow: 0 0.15mm 0.3mm rgba(20, 16, 8, 0.18), 0 1.2mm 2.4mm -0.6mm rgba(40, 32, 12, 0.22), 0 5mm 9mm -3mm rgba(40, 32, 12, 0.28); transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); } html[data-ed-theme="dark"] .pp-card { box-shadow: 0 0.15mm 0.3mm rgba(0,0,0,0.5), 0 5mm 9mm -3mm rgba(0,0,0,0.7), 0 0 0 0.1mm rgba(255,255,255,0.06); } .pp-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(circle at 20% 0%, rgba(255,255,255,0.10), transparent 55%); } .pp-card > * { position: relative; z-index: 1; } /* Slight hand-placed rotation on the desk; straightens on hover */ @media screen and (min-width: 1100px) and (hover: hover) { .pp-page-front .pp-card { transform: rotate(-1.2deg); } .pp-page-back .pp-card { transform: rotate(1deg); } .pp-spec:hover .pp-card { transform: none; } } /* ===== FRONT ===== */ .pp-card__brand { display: inline-flex; align-items: center; gap: 1.2mm; font-family: var(--serif); font-size: 2.7mm; font-weight: 500; letter-spacing: -0.01em; color: var(--pp-text); } .pp-mark { width: 4mm; height: 4mm; color: var(--pp-accent); flex-shrink: 0; } .pp-mark--small { width: 3.4mm; height: 3.4mm; } .pp-card__type { position: absolute; top: 4mm; right: 4.5mm; z-index: 2; font-family: var(--mono); font-size: 1.6mm; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; padding: 0.5mm 1.8mm; border: 0.2mm solid var(--pp-accent); color: var(--pp-accent); border-radius: 999px; } .pp-card__main { display: flex; align-items: center; gap: 3mm; margin-top: 2.2mm; flex: 1; } .pp-card__avatar { width: 14mm; height: 14mm; border-radius: 50%; background: color-mix(in srgb, var(--pp-text) 10%, transparent); border: 0.35mm solid var(--pp-accent); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; font-family: var(--serif); font-weight: 500; color: var(--pp-text); font-size: 4.4mm; text-transform: uppercase; } .pp-card__avatar img { width: 100%; height: 100%; object-fit: cover; } .pp-card__identity { min-width: 0; } .pp-name { font-family: var(--serif); font-size: 4.1mm; font-weight: 450; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 0.9mm; color: var(--pp-text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .pp-name-last { color: var(--pp-accent); font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100; } .pp-role { font-size: 2mm; color: var(--pp-text-2); margin: 0; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .pp-role strong { color: var(--pp-text); font-weight: 600; } .pp-card__contacts { display: flex; gap: 3mm; margin: 2mm 0; flex-wrap: wrap; align-items: center; } .pp-contact { display: inline-flex; align-items: center; gap: 1.2mm; font-family: var(--mono); font-size: 2mm; color: var(--pp-text); white-space: nowrap; } .pp-contact i, .pp-contact svg { width: 2.3mm; height: 2.3mm; color: var(--pp-accent); stroke-width: 1.8; } .pp-card__foot { display: flex; justify-content: space-between; align-items: center; padding-top: 1.5mm; border-top: 0.15mm solid var(--pp-line); margin-top: auto; } .pp-website { display: inline-flex; align-items: center; gap: 1mm; font-family: var(--mono); font-size: 1.85mm; color: var(--pp-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; padding-right: 2mm; } .pp-website i, .pp-website svg { width: 2mm; height: 2mm; color: var(--pp-accent); } .pp-card__logo { width: 8mm; height: 8mm; background: color-mix(in srgb, var(--pp-text) 10%, transparent); border-radius: 1mm; display: grid; place-items: center; overflow: hidden; padding: 0.6mm; flex-shrink: 0; } .pp-card__logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .pp-card__logo-text { font-family: var(--serif); font-weight: 500; font-size: 3mm; color: var(--pp-accent); background: color-mix(in srgb, var(--pp-text) 10%, transparent); padding: 1mm 2mm; border-radius: 1mm; } /* ===== BACK ===== */ .pp-back__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 2mm; } .pp-caption { font-family: var(--mono); font-size: 1.55mm; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pp-accent); display: block; margin-bottom: 0.8mm; } .pp-back__head h3 { font-family: var(--serif); font-size: 3.7mm; font-weight: 450; letter-spacing: -0.015em; margin: 0 0 1mm; color: var(--pp-text); line-height: 1.1; } .pp-back__lede { font-size: 1.85mm; color: var(--pp-text-2); margin: 0; line-height: 1.35; max-width: 36mm; } .pp-back__body { display: flex; gap: 3mm; margin: 2mm 0; align-items: center; flex: 1; } .pp-qr { width: 22mm; height: 22mm; background: #fff; border-radius: 1.5mm; padding: 1mm; display: grid; place-items: center; flex-shrink: 0; } .pp-qr img { width: 100%; height: 100%; object-fit: contain; } .pp-qr__placeholder { font-family: var(--serif); font-weight: 500; font-size: 6mm; color: #0D1729; } .pp-back__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.4mm; align-self: stretch; justify-content: center; } .pp-info-row { display: flex; gap: 1.4mm; align-items: flex-start; font-size: 1.9mm; color: var(--pp-text-2); line-height: 1.3; } .pp-info-row i, .pp-info-row svg { width: 2.2mm; height: 2.2mm; color: var(--pp-accent); flex-shrink: 0; margin-top: 0.1mm; } .pp-back__socials { display: flex; gap: 1.4mm; margin-top: 0.4mm; } .pp-social { width: 4.2mm; height: 4.2mm; border-radius: 50%; border: 0.15mm solid var(--pp-line); background: color-mix(in srgb, var(--pp-text) 8%, transparent); display: grid; place-items: center; color: var(--pp-text); } .pp-social svg { width: 2.2mm; height: 2.2mm; } .pp-back__foot { display: flex; justify-content: space-between; align-items: center; padding-top: 1.4mm; border-top: 0.15mm solid var(--pp-line); margin-top: auto; } .pp-back__mono { font-family: var(--mono); font-size: 1.75mm; color: var(--pp-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pp-back__brand { font-family: var(--serif); font-size: 1.7mm; font-style: italic; color: var(--pp-text-3); text-align: right; flex-shrink: 0; margin-left: 2mm; } /* ---------- Print checklist ---------- */ .pp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: clamp(36px, 5vw, 64px); } .pp-step { border-top: 1px solid var(--ink); padding-top: 18px; display: grid; gap: 6px; align-content: start; } .pp-step__n { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--accent); } .pp-step strong { font-family: var(--serif); font-weight: 450; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--ink); } .pp-step p { font-size: 0.92rem; color: var(--ink-2); line-height: 1.55; } /* ---------- Bangla ---------- */ .ed:lang(bn) :is(.pp-title, .pp-step strong) { letter-spacing: 0; } .ed:lang(bn) .pp-title { line-height: 1.2; font-weight: 500; } .ed:lang(bn) :is(.pp-name-last, .pp-back__brand) { font-style: normal; } .ed:lang(bn) :is(.pp-name, .pp-back__head h3, .pp-caption, .pp-card__type, .pp-label) { letter-spacing: 0; } /* ---------- Responsive preview sizes ---------- */ @media screen and (max-width: 1240px) { .pp-body { --pp-zoom: 1.3; } } @media screen and (max-width: 1100px) { .pp-stage { flex-direction: column; align-items: center; } .pp-body { --pp-zoom: 1.6; } } @media screen and (max-width: 760px) { .pp-body { --pp-zoom: 1.25; } } @media screen and (max-width: 640px) { .pp-body { --pp-zoom: 1; } .pp-steps { grid-template-columns: 1fr; gap: 22px; } .pp-head__actions { width: 100%; } .pp-head__actions .ed-btn { flex: 1; } .pp-bar__actions .ed-lang { display: none; } } @media screen and (max-width: 400px) { /* 85.6mm ≈ 324px + 26px dimension gutter; slim the marks, scale slightly */ .pp-spec { padding: 20px 0 0 20px; } .pp-dim--w { left: 20px; } .pp-dim--h { top: 20px; } .pp-body { --pp-zoom: 0.94; } } @media screen and (max-width: 360px) { .pp-body { --pp-zoom: 0.86; } } @media (prefers-reduced-motion: reduce) { .pp-card { transition: none; } } /* ---------- Print: one card per page, actual mm size, no chrome ---------- */ @media print { html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; } .ed::before { display: none !important; } /* Kill every non-card element */ body > *:not(.pp-page), .pp-bar, .pp-head, .pp-steps, .pp-label, .pp-dim, .no-print { display: none !important; } .pp-page { padding: 0 !important; min-height: 0 !important; background: transparent !important; } .pp-desk { background: transparent !important; border: 0 !important; padding: 0 !important; } .pp-stage { display: block; padding: 0; margin: 0; gap: 0; max-width: none; } .pp-page-wrap { display: block; width: auto; margin: 0; padding: 0; } .pp-spec { padding: 0 !important; } .pp-card-holder { zoom: 1 !important; line-height: normal; } .pp-card { margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; transition: none !important; display: flex !important; } .pp-page-front { page-break-after: always; break-after: page; } .pp-page-back { page-break-before: always; break-before: page; } }