/* Zira Universe — Methods & Audit Thinking Tags + Modal Loaded on every chapter page alongside inc/reader-template.php's inline theme and css/technology-modal.css. Entirely separate namespace (.zu-method-*) — never shares a class or CSS custom property with .zu-tech-*, so nothing here can affect the Technology tag row/modal and vice versa. Visual language: indigo accent by default; Methods with TMIC training or consulting (data-tmic="true") switch tag + modal to the green accent. */ /* Variables are shared by the tag section AND the modal overlay — the overlay is appended to , outside the section, so it must receive them itself. */ .zu-method-section, .zu-method-overlay{ --mm-bg: var(--zu-bg, #05070d); --mm-bg2: var(--zu-bg2, #0a0e1a); --mm-panel: var(--zu-panel, rgba(255,255,255,.03)); --mm-border: var(--zu-border, rgba(255,255,255,.09)); --mm-text: var(--zu-text, #e7ebf3); --mm-muted: var(--zu-muted, #8993a8); --mm-muted2: var(--zu-muted2, #626d82); /* Method accent — indigo/blue, fixed (not per-entity). */ --mm-acc: #6d7ef2; --mm-acc-soft: rgba(109,126,242,.13); --mm-acc-a06: rgba(109,126,242,.06); --mm-acc-a10: rgba(109,126,242,.10); --mm-acc-a12: rgba(109,126,242,.12); --mm-acc-a16: rgba(109,126,242,.16); --mm-acc-a35: rgba(109,126,242,.35); --mm-acc-a40: rgba(109,126,242,.40); --mm-acc-a45: rgba(109,126,242,.45); --mm-acc-a50: rgba(109,126,242,.50); --mm-acc-a55: rgba(109,126,242,.55); /* TMIC commercial-capability accent — teal/emerald, fixed. Only ever used inside the "Available from TMIC" card, independent of --mm-acc above. */ --mm-tmic: #22d3ab; --mm-tmic-soft: rgba(34,211,171,.13); --mm-tmic-a06: rgba(34,211,171,.06); --mm-tmic-a14: rgba(34,211,171,.14); --mm-tmic-a50: rgba(34,211,171,.50); --mm-tmic-a55: rgba(34,211,171,.55); } .zu-method-section{ margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--mm-border); } .zu-method-heading{ margin-bottom: 16px; } .zu-method-eyebrow{ font-family:'Kanit',sans-serif; font-size:11.5px; font-weight:700; letter-spacing:2.5px; color: var(--mm-acc); text-transform:uppercase; margin-bottom:4px; } .zu-method-tagline{ font-family:'Playfair Display',serif; font-style:italic; font-size:14.5px; color: var(--mm-muted); } .zu-method-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; } .zu-method-tag{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:9px 16px; border-radius:999px; border:1px solid var(--mm-border); background: var(--mm-panel); color: var(--mm-text); font-family:'Sarabun',sans-serif; font-size:13.5px; font-weight:500; cursor:pointer; text-align:left; transition: border-color .15s ease, background .15s ease, transform .1s ease, box-shadow .15s ease; } .zu-method-tag:hover{ border-color: var(--mm-acc); background: var(--mm-acc-a10); box-shadow: 0 0 0 1px var(--mm-acc-a35); } .zu-method-tag:active{ transform: scale(.97); } .zu-method-tag:focus-visible{ outline: 2px solid var(--mm-acc); outline-offset: 2px; } .zu-method-tag .dot{ width:8px; height:8px; border-radius:50%; flex:none; background: var(--mm-acc); box-shadow: 0 0 8px var(--mm-acc); } /* ---- Modal shell ---- */ .zu-method-overlay{ position:fixed; inset:0; background:rgba(2,3,7,.78); backdrop-filter: blur(3px); display:flex; align-items:flex-start; justify-content:center; padding: 6vh 16px 40px; overflow-y:auto; z-index:200; opacity:0; pointer-events:none; transition: opacity .2s ease; } .zu-method-overlay.is-open{ opacity:1; pointer-events:auto; } .zu-method-modal{ width:100%; max-width:min(680px, 92vw); position:relative; background: radial-gradient(120% 90% at 15% -10%, var(--mm-acc-a16), transparent 60%), linear-gradient(180deg, var(--mm-bg2), var(--mm-bg)); border:1px solid var(--mm-acc-a45); border-radius:20px; box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02) inset, 0 0 60px -20px var(--mm-acc-a55); padding: 34px 32px 30px; transform: translateY(10px) scale(.98); transition: transform .2s ease; overflow:hidden; } .zu-method-overlay.is-open .zu-method-modal{ transform: translateY(0) scale(1); } .zu-method-modal:focus{ outline: none; } .zu-method-modal-top{ display:flex; justify-content:flex-end; margin-bottom:2px; position:relative; z-index:1; } .zu-method-modal-close{ flex:none; width:38px; height:38px; border-radius:10px; border:1px solid var(--mm-border); background: var(--mm-panel); color: var(--mm-text); cursor:pointer; line-height:1; display:flex; align-items:center; justify-content:center; transition: border-color .15s ease, color .15s ease; } .zu-method-modal-close:hover{ border-color: var(--mm-acc); color: var(--mm-acc); } .zu-method-modal-close:focus-visible{ outline: 2px solid var(--mm-acc); outline-offset: 2px; } .zu-method-modal-close svg{ width:16px; height:16px; } .zu-method-modal-name{ font-family:'Playfair Display',serif; font-weight:700; font-size:clamp(26px,3.6vw,34px); color:#fff; line-height:1.2; margin-bottom:6px; position:relative; z-index:1; } .zu-method-modal-category{ font-family:'Kanit',sans-serif; font-size:11.5px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color: var(--mm-muted2); margin-bottom:16px; position:relative; z-index:1; } .zu-method-badge{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; font-family:'Kanit',sans-serif; font-size:11.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:8px 16px; border-radius:999px; margin-bottom:22px; border:1px solid var(--mm-acc-a55); background: var(--mm-acc-soft); color: var(--mm-acc); box-shadow: 0 0 18px -6px var(--mm-acc); position:relative; z-index:1; } .zu-method-badge .dot{ width:7px; height:7px; border-radius:50%; background: var(--mm-acc); box-shadow: 0 0 6px var(--mm-acc); flex:none; } .zu-method-modal-body{ font-family:'Sarabun',sans-serif; font-size:15.5px; line-height:1.8; color: var(--mm-text); margin-bottom:22px; position:relative; z-index:1; } /* ---- Used in this chapter — visually distinct from the general description above ---- */ .zu-method-context{ position:relative; z-index:1; margin-bottom:22px; padding:18px 20px; border-radius:12px; border:1px solid var(--mm-acc-a40); background: var(--mm-acc-a06); box-shadow: 0 0 28px -14px var(--mm-acc); } .zu-method-context .zu-method-row{ padding:0; border-top:0; } .zu-method-context .label{ color: var(--mm-acc); } .zu-method-context .icon-sq{ color: var(--mm-acc); border-color: var(--mm-acc-a40); background: var(--mm-acc-soft); } .zu-method-context .text{ font-family:'Sarabun',sans-serif; font-size:15px; line-height:1.75; color: var(--mm-text); } /* ---- Icon rows (same layout as Technology's "Seen in Zira" rows) ---- */ .zu-method-row{ display:flex; gap:14px; padding:18px 0; border-top:1px solid var(--mm-border); position:relative; z-index:1; } .zu-method-row .icon-sq{ flex:none; width:42px; height:42px; border-radius:11px; border:1px solid var(--mm-border); background: var(--mm-panel); display:flex; align-items:center; justify-content:center; color: var(--mm-text); } .zu-method-row .icon-sq svg{ width:20px; height:20px; } .zu-method-row .body{ min-width:0; flex:1; padding-top:2px; } .zu-method-row .label{ font-family:'Kanit',sans-serif; font-size:11.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color: var(--mm-muted); margin-bottom:8px; } .zu-method-chips{ display:flex; flex-wrap:wrap; gap:8px; } .zu-method-chips span{ font-family:'Kanit',sans-serif; font-size:12px; font-weight:600; color: var(--mm-acc); background: var(--mm-acc-soft); border:1px solid var(--mm-acc-a40); border-radius:999px; padding:5px 13px; } .zu-method-chips a.zu-method-chip-link{ font-family:'Kanit',sans-serif; font-size:12px; font-weight:600; color: var(--mm-acc); background: var(--mm-acc-soft); border:1px solid var(--mm-acc-a40); border-radius:999px; padding:5px 13px; text-decoration:none; cursor:pointer; } .zu-method-chips a.zu-method-chip-link:hover{ background: var(--mm-acc-a12); text-decoration:underline; } .zu-method-link-list{ list-style:none; display:flex; flex-direction:column; gap:8px; margin-top:2px; } .zu-method-link-list a{ font-family:'Sarabun',sans-serif; font-size:14.5px; color: var(--mm-acc); text-decoration:none; display:inline-flex; align-items:center; gap:5px; font-weight:600; } .zu-method-link-list a:hover{ text-decoration:underline; } /* ---- TMIC capability card — fixed teal/emerald, independent of --mm-acc ---- */ .zu-method-tmic-card{ position:relative; z-index:1; overflow:hidden; margin-top:22px; padding:26px 26px 24px; border-radius:16px; border:1.5px solid var(--mm-tmic-a55); background: radial-gradient(90% 140% at 100% 0%, var(--mm-tmic-a14), transparent 65%), var(--mm-tmic-a06); } .zu-method-tmic-eyebrow{ display:inline-flex; align-items:center; gap:7px; font-family:'Kanit',sans-serif; font-size:10.5px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color: var(--mm-tmic); padding:5px 12px; border-radius:999px; border:1px solid var(--mm-tmic-a50); background: var(--mm-tmic-soft); margin-bottom:14px; } .zu-method-tmic-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background: var(--mm-tmic); box-shadow: 0 0 6px var(--mm-tmic); flex:none; } .zu-method-tmic-title{ font-family:'Playfair Display',serif; font-weight:800; font-size:22px; color:#fff; letter-spacing:.5px; margin-bottom:10px; } .zu-method-tmic-note{ font-size:14.5px; line-height:1.75; color: var(--mm-text); margin-bottom:16px; } .zu-method-tmic-services{ list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:22px; } .zu-method-tmic-services li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; line-height:1.55; color: var(--mm-text); } .zu-method-tmic-services svg{ width:18px; height:18px; color: var(--mm-tmic); flex:none; margin-top:2px; } .zu-method-cta{ display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:1; } .zu-method-cta a{ flex:1; min-width:170px; min-height:48px; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:11px; padding:13px 18px; text-decoration:none; font-family:'Kanit',sans-serif; font-size:13.5px; font-weight:700; letter-spacing:.3px; text-align:center; transition: transform .12s ease, box-shadow .15s ease, background .15s ease; } .zu-method-cta a .arrow{ transition: transform .15s ease; } .zu-method-cta a:hover .arrow{ transform: translateX(3px); } .zu-method-cta a.primary{ background: var(--mm-tmic); color:#04211c; box-shadow: 0 8px 24px -8px var(--mm-tmic); } .zu-method-cta a.primary:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px -8px var(--mm-tmic); } .zu-method-cta a.secondary{ border:1.5px solid var(--mm-tmic-a55); color: var(--mm-tmic); background: transparent; } .zu-method-cta a.secondary:hover{ background: var(--mm-tmic-soft); } .zu-method-cta a:focus-visible{ outline: 2px solid var(--mm-tmic); outline-offset: 2px; } .zu-method-modal-footer{ margin-top:26px; padding-top:18px; border-top:1px solid var(--mm-border); text-align:center; position:relative; z-index:1; font-family:'Kanit',sans-serif; font-size:10.5px; letter-spacing:3px; text-transform:uppercase; color: var(--mm-muted2); } @media (min-width:900px){ .zu-method-modal{ max-width:760px; padding:40px 44px 36px; } .zu-method-modal-name{ font-size:clamp(28px,2.6vw,38px); } .zu-method-modal-body{ font-size:16.5px; } .zu-method-tmic-card{ padding:30px 34px 28px; } } @media (min-width:1280px){ .zu-method-modal{ max-width:820px; } } @media (max-width:480px){ .zu-method-modal{ padding:26px 20px 22px; border-radius:16px; } .zu-method-overlay{ padding: 4vh 10px 24px; } .zu-method-tmic-card{ padding:20px 18px 18px; } } @media (prefers-reduced-motion: reduce){ .zu-method-overlay, .zu-method-modal, .zu-method-tag, .zu-method-modal-close, .zu-method-cta a, .zu-method-cta a .arrow{ transition: none !important; } .zu-method-overlay.is-open .zu-method-modal{ transform: none; } .zu-method-modal{ transform: none; } } /* ---- TMIC-available methods: whole card + tag switch to the green accent (same idea as Technology's status-driven accent). Methods with no TMIC training/consulting keep the indigo accent above. ---- */ .zu-method-modal[data-tmic="true"], .zu-method-tag[data-tmic="true"]{ --mm-acc: #22d3ab; --mm-acc-soft: rgba(34,211,171,.13); --mm-acc-a06: rgba(34,211,171,.06); --mm-acc-a10: rgba(34,211,171,.10); --mm-acc-a12: rgba(34,211,171,.12); --mm-acc-a16: rgba(34,211,171,.16); --mm-acc-a35: rgba(34,211,171,.35); --mm-acc-a40: rgba(34,211,171,.40); --mm-acc-a45: rgba(34,211,171,.45); --mm-acc-a50: rgba(34,211,171,.50); --mm-acc-a55: rgba(34,211,171,.55); }