/* styles/cert.css — Era certificate (unlocked when the whole era is complete). Mirrors the "House of Trust" certificate, re-themed for the fortress. Uses the live era accent (--ec / --ec2) set on by engine/era.js. */ .cert{ margin: 1.6rem 0 .4rem; } /* ── Section heading ── */ .cert-head{ display:flex; align-items:center; gap:.7rem; margin-bottom:.9rem; } .cert-head .cert-bar{ width:5px; height:30px; border-radius:3px; background:linear-gradient(180deg, var(--ec, var(--gold-lt)), var(--ec2, var(--gold-dk))); flex-shrink:0; } .cert-head h3{ font-size:1.1rem; color:var(--fg); line-height:1.1; } .cert-head h3 .cert-en{ display:block; font-size:.72rem; color:var(--fg-dim); font-weight:700; } .cert-head p{ font-size:.74rem; color:var(--fg-dim); margin-inline-start:auto; text-align:end; } /* ── LOCKED state ── */ .cert-locked{ position:relative; background:rgba(255,255,255,.03); border:1.5px dashed var(--line); border-radius:var(--r); padding:1.6rem 1.2rem; text-align:center; overflow:hidden; } .cert-locked .cl-seal{ width:64px; height:64px; margin:0 auto .7rem; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.04); border:2px solid var(--line); opacity:.6; } .cert-locked .cl-seal svg{ width:34px; height:34px; opacity:.5; filter:grayscale(1); } .cert-locked b{ display:block; font-size:.98rem; color:var(--fg); margin-bottom:.5rem; } .cert-locked .cl-sub{ font-size:.78rem; color:var(--fg-dim); line-height:1.6; max-width:34ch; margin:0 auto; } .cert-locked .cl-bar{ height:9px; border-radius:5px; background:rgba(255,255,255,.07); overflow:hidden; margin:.9rem auto .4rem; max-width:300px; } .cert-locked .cl-bar i{ display:block; height:100%; border-radius:5px; background:linear-gradient(90deg, var(--ec2, var(--gold-dk)), var(--ec, var(--gold-lt))); transition:width 1s var(--ease-out); } .cert-locked .cl-count{ font-size:.74rem; font-weight:800; color:var(--gold-lt); } /* ── UNLOCKED certificate card (parchment) ── */ .cert-card{ position:relative; background: repeating-linear-gradient(45deg, rgba(168,120,16,.06) 0 2px, transparent 2px 15px), linear-gradient(180deg, var(--paper), var(--paper2)); color:var(--ink); border:5px double var(--ec, var(--gold-dk)); border-radius:var(--r); padding:2rem 1.4rem 1.6rem; text-align:center; box-shadow:0 18px 48px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.5); overflow:hidden; animation:certIn .6s var(--ease-spring) both; } @keyframes certIn{ from{opacity:0; transform:translateY(14px) scale(.98)} to{opacity:1; transform:none} } /* ornamental corner brackets */ .cert-card::before, .cert-card::after{ content:''; position:absolute; width:46px; height:46px; border:2.5px solid var(--ec, var(--gold-dk)); opacity:.55; pointer-events:none; } .cert-card::before{ top:11px; inset-inline-start:11px; border-inline-end:0; border-bottom:0; border-radius:8px 0 0 0; } .cert-card::after{ bottom:11px; inset-inline-end:11px; border-inline-start:0; border-top:0; border-radius:0 0 8px 0; } [dir="rtl"] .cert-card::before{ border-radius:0 8px 0 0; } [dir="rtl"] .cert-card::after{ border-radius:0 0 0 8px; } .cert-ribbon{ display:inline-flex; align-items:center; gap:.4rem; background:linear-gradient(135deg, var(--gold-lt), var(--ec2, var(--gold-dk))); color:#1a1208; font-weight:900; font-size:.74rem; padding:.3rem .9rem; border-radius:0 0 1rem 1rem; position:relative; top:-2rem; margin-bottom:-1.2rem; box-shadow:0 5px 14px rgba(0,0,0,.25); } .cert-kicker{ font-size:.74rem; font-weight:800; letter-spacing:.12em; color:var(--ink-dim); text-transform:uppercase; } .cert-h{ font-family:'Tajawal','Fredoka',sans-serif; font-weight:800; font-size:1.7rem; color:var(--ec, var(--gold-dk)); line-height:1.15; margin-top:.15rem; } [dir="ltr"] .cert-h{ font-family:'Fredoka','Tajawal',sans-serif; } .cert-h .cert-h-en{ display:block; font-size:.86rem; color:var(--ink-dim); font-weight:700; margin-top:.15rem; } .cert-sub{ font-size:.82rem; color:var(--ink-dim); font-weight:700; margin-top:.5rem; line-height:1.7; max-width:42ch; margin-inline:auto; } .cert-rule{ width:60%; max-width:260px; height:0; margin:1rem auto .9rem; border-top:1.5px solid var(--ec, var(--gold-dk)); opacity:.4; position:relative; } .cert-rule::after{ content:'❖'; position:absolute; top:-.72rem; left:50%; transform:translateX(-50%); color:var(--ec, var(--gold-dk)); font-size:.78rem; background:var(--paper); padding:0 .4rem; } .cert-name-row{ font-size:.9rem; color:var(--ink); margin-bottom:.3rem; } .cert-name{ display:inline-block; min-width:220px; min-height:38px; border-bottom:2.5px dashed var(--ec, var(--gold-dk)); color:var(--ec, var(--gold-dk)); font-weight:900; font-size:1.3rem; font-family:'Tajawal','Amiri',serif; padding:.1rem .6rem; outline:none; border-radius:.4rem; background:rgba(255,255,255,.45); } .cert-name:focus{ background:rgba(255,255,255,.85); } .cert-name:empty::before{ content:attr(data-ph); color:#b9a878; font-weight:600; font-size:1rem; } .cert-statement{ font-size:.85rem; line-height:1.95; color:var(--ink); font-weight:600; margin:.9rem auto .2rem; max-width:46ch; } .cert-statement b{ color:var(--ec, var(--gold-dk)); font-weight:900; } /* round wax-style seal with the era emblem */ .cert-seal{ width:92px; height:92px; margin:1.1rem auto .5rem; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.1rem; background:radial-gradient(circle at 38% 32%, var(--ec, var(--gold-lt)), var(--ec2, var(--gold-dk))); color:#fff; font-weight:900; font-size:.58rem; text-align:center; line-height:1.15; position:relative; transform:rotate(-7deg); box-shadow:0 6px 16px rgba(0,0,0,.28), inset 0 2px 6px rgba(255,255,255,.4); } .cert-seal svg{ width:38px; height:38px; } .cert-seal::before{ content:''; position:absolute; inset:6px; border-radius:50%; border:1.5px dashed rgba(255,255,255,.7); } .cert-seal span{ margin-top:.05rem; } .cert-sig{ display:flex; justify-content:space-around; gap:1rem; margin-top:.9rem; font-size:.7rem; color:var(--ink-dim); font-weight:700; } .cert-sig .line{ border-bottom:1.5px solid var(--ec, var(--gold-dk)); width:120px; height:20px; margin:0 auto .2rem; opacity:.7; } .cert-actions{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:1.1rem; } .cert-actions button{ display:inline-flex; align-items:center; gap:.4rem; background:transparent; border:2px solid var(--ec, var(--gold-dk)); color:var(--ec, var(--gold-dk)); border-radius:2rem; padding:.42rem 1.1rem; font-weight:900; font-size:.84rem; font-family:inherit; cursor:pointer; transition:.18s; } .cert-actions button:hover{ background:var(--ec, var(--gold-dk)); color:var(--paper); } .cert-actions button.primary{ background:var(--ec, var(--gold-dk)); color:var(--paper); } .cert-actions button.primary:hover{ filter:brightness(1.12); } /* ── PRINT — show only the certificate ── */ @media print{ body * { visibility:hidden !important; } #printArea, #printArea * { visibility:visible !important; } #printArea{ position:fixed !important; inset:0 !important; display:block !important; padding:1.4cm !important; background:#fff !important; } #printArea .cert-actions{ display:none !important; } #printArea .cert-card{ box-shadow:none !important; margin:0 auto !important; max-width:680px; animation:none !important; } }