/* ══════════════════════════════════════════════════════════════════════ OWLMARK — THE CREDITS CARD, and one owl everywhere The first pass was overbuilt: a full-height plaque with guilloché, filigree corners, a wax seal and the lockup image. It forced a scrollbar and left the wordmark muddy — the lockup PNG is drawn for light paper and loses its letterforms on a dark ground. This is the correction. One emblem, the wordmark set as live gold text so it stays crisp at any size, the name, and nothing else. Small enough that it never scrolls. ══════════════════════════════════════════════════════════════════════ */ #creditsOverlay{ position:fixed;inset:0;z-index:99999; display:none;align-items:center;justify-content:center; } #creditsOverlay[style*="flex"]{display:flex !important} #creditsOverlay.om-lux-scrim, #creditsOverlay{ background:radial-gradient(1000px 700px at 50% 42%, rgba(20,36,62,.82), rgba(4,8,16,.92)) !important; backdrop-filter:blur(8px) !important; padding:20px !important; overflow:auto !important; } #creditsOverlay #creditsModal.okc-card{ --okc-night-0:#16294A; --okc-night-1:#0C1729; --okc-gold-1:#C99A3D; --okc-gold-2:#E8C978; --okc-gold-3:#F6E7B8; --okc-ivory:#FAF7EF; position:relative !important; width:min(352px,92vw) !important; max-height:none !important; overflow:visible !important; padding:32px 30px 28px !important; text-align:center; border:1px solid var(--okc-gold-1) !important; border-radius:20px !important; color:var(--okc-ivory) !important; background: radial-gradient(ellipse 120% 70% at 50% -10%, var(--okc-night-0), transparent 62%), linear-gradient(170deg, var(--okc-night-1), #070E1A) !important; box-shadow: 0 0 0 7px rgba(201,154,61,.08), 0 34px 80px rgba(2,6,14,.66), inset 0 1px 0 rgba(246,231,184,.18) !important; animation:okcRise .42s cubic-bezier(.2,.9,.3,1.12) both !important; } @keyframes okcRise{ from{opacity:0;transform:translateY(16px) scale(.97)} to{opacity:1;transform:none} } /* one hairline inlay — the only ornament left */ #creditsOverlay #creditsModal.okc-card::before{ content:'';position:absolute;inset:7px;border-radius:14px;pointer-events:none; border:1px solid rgba(232,201,120,.22); } #creditsOverlay #creditsModal.okc-card .ok-credits-logo{ display:block;width:74px;height:74px;margin:0 auto 14px; filter:drop-shadow(0 10px 22px rgba(2,6,14,.6)); } #creditsOverlay #creditsModal.okc-card .okc-word{ font-family:'Cormorant Garamond','Playfair Display',serif !important; font-size:27px;font-weight:600;line-height:1.1;letter-spacing:.4px; color:var(--okc-gold-2) !important; } #creditsOverlay #creditsModal.okc-card .okc-sub{ margin-top:5px; font-size:9px;font-weight:800;letter-spacing:3.6px;text-transform:uppercase; color:rgba(250,247,239,.45) !important; } #creditsOverlay #creditsModal.okc-card .okc-rule{ height:1px;margin:20px 8px; background:linear-gradient(90deg,transparent,rgba(232,201,120,.55),transparent) !important; } #creditsOverlay #creditsModal.okc-card .okc-eyebrow{ font-size:9px;font-weight:800;letter-spacing:3.6px;text-transform:uppercase; color:rgba(232,201,120,.68) !important;margin-bottom:8px; } #creditsOverlay #creditsModal.okc-card .okc-name{ font-family:'Cormorant Garamond','Playfair Display',serif !important; font-size:32px;font-weight:600;line-height:1.05; color:var(--okc-gold-3) !important; } #creditsOverlay #creditsModal.okc-card .okc-role{ margin-top:6px;font-family:'Cormorant Garamond',serif !important; font-size:15px;font-style:italic;color:rgba(250,247,239,.72) !important; } #creditsOverlay #creditsModal.okc-card .okc-copy{ margin-top:20px;padding-top:14px; border-top:1px solid rgba(232,201,120,.16); font-size:10px;font-weight:600;letter-spacing:.6px; color:rgba(250,247,239,.42) !important; } /* ── Attribution ────────────────────────────────────────────────────── The suite is one tool in a larger toolkit, and the card is where a teacher looks to find out whose it is. Sits under the same hairline as the copyright, quieter than the name above it. */ #creditsOverlay #creditsModal.okc-card .okl-toolkit{ margin-top:7px; display:flex;flex-direction:column;align-items:center;gap:3px; font-size:10px;font-weight:600;letter-spacing:.5px; color:rgba(250,247,239,.42) !important; } #creditsOverlay #creditsModal.okc-card .okl-toolkit .okl-link{ color:rgba(232,201,120,.78) !important;text-decoration:none;font-weight:800; letter-spacing:.6px; border-bottom:1px solid rgba(232,201,120,.28);padding-bottom:1px; unicode-bidi:isolate; /* the address never re-orders */ transition:color .16s ease,border-color .16s ease; } #creditsOverlay #creditsModal.okc-card .okl-toolkit .okl-link:hover{ color:var(--okc-gold-3) !important;border-bottom-color:rgba(232,201,120,.6); } #creditsOverlay #creditsModal.okc-card .okl-toolkit .okl-link:focus-visible{ outline:2px solid var(--okc-gold-2);outline-offset:3px;border-radius:3px; } html[dir="rtl"] #creditsOverlay #creditsModal.okc-card .okl-toolkit{letter-spacing:.2px} #creditsOverlay #creditsModal.okc-card .okc-x{ position:absolute;top:14px;right:14px; width:28px;height:28px;border-radius:50%;cursor:pointer; display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1; background:rgba(7,14,26,.5) !important; border:1px solid rgba(232,201,120,.28) !important; color:rgba(250,247,239,.65) !important; transition:background .16s, color .16s, transform .16s; } #creditsOverlay #creditsModal.okc-card .okc-x:hover{ background:var(--okc-gold-1) !important;color:#0B1424 !important;transform:rotate(90deg); } #creditsOverlay #creditsModal.okc-card .okc-x:focus-visible{outline:2px solid var(--okc-gold-2);outline-offset:2px} html[dir="rtl"] #creditsOverlay #creditsModal.okc-card .okc-copy{ margin-top:20px;padding-top:14px; border-top:1px solid rgba(232,201,120,.16); font-size:10px;font-weight:600;letter-spacing:.6px; color:rgba(250,247,239,.42) !important; } #creditsOverlay #creditsModal.okc-card .okc-x{right:auto;left:14px} html[dir="rtl"] #creditsOverlay #creditsModal.okc-card .okc-sub, html[dir="rtl"] #creditsOverlay #creditsModal.okc-card .okc-eyebrow{letter-spacing:.6px} @media (max-width:400px){ #creditsOverlay #creditsModal.okc-card{padding:26px 22px 24px !important} #creditsOverlay #creditsModal.okc-card .okc-name{font-size:28px} } @media (prefers-reduced-motion: reduce){ #creditsOverlay #creditsModal.okc-card{animation:none !important} } @media print{ #creditsOverlay{display:none !important} } /* ── ONE OWL EVERYWHERE ────────────────────────────────────────────── The help button and the guide header used the 🦉 emoji, which is a different bird in every operating system and none of them is ours. The glyph stays in the DOM as the marker the help script searches for, but it is hidden and the OwlMark emblem shows in its place. */ .om-owl-glyph{ position:absolute !important;width:1px;height:1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; } .om-owl-mark{ display:inline-block;vertical-align:middle; width:17px;height:17px;object-fit:contain;flex:0 0 auto; } .om-help-owl{font-size:0 !important;line-height:0 !important} .om-help-owl .om-owl-mark{width:34px;height:34px} /* ── Kill the light plate behind the name ─────────────────────────── The light-luxe skin styles `.omc-card` as a cream panel. This card keeps that class only as a marker for the help script, so the panel itself is switched off here — the name reads gold on navy, not gold on cream. */ #creditsOverlay #creditsModal.okc-card .omc-card{ background:none !important; border:none !important; box-shadow:none !important; padding:0 !important; margin:0 !important; border-radius:0 !important; }