/* ============================================================================= ZAZ PLATFORM PACK — news, documents, Gen Z, tutor ----------------------------------------------------------------------------- Rebuilt to match the SITE rather than fight it. The first version used the dark Investment Genie palette. That was wrong. zaztekinternational.com is a light site — white background, navy text, red accent — and the shared header is light too. A dark module bolted under a white header reads as a different website, and the term headings ended up taking colour from two stylesheets at once, which is why they came out invisible. Everything here now uses the tokens already in css/style.css: --primary #ff0000 --primary-dark #cc0000 --secondary #001f3f --bg #fff --fg #001f3f --muted #f1f5f9 --muted-fg #64748b --border #e2e8f0 --radius 1rem --font DM Sans --font-heading Sora Nothing here touches the header or nav. That is js/main.js and css/style.css, and it stays that way. ============================================================================= */ /* ============================================================================= NEUTRALISING THE SITE'S BARE ELEMENT SELECTORS ----------------------------------------------------------------------------- css/style.css styles elements, not classes: header { position: sticky; top: 0; z-index: 100; background: var(--bg) } nav { display: flex; align-items: center; gap: 2rem } footer { background: var(--secondary); color: #fff; padding: 4rem 0 2rem } Those are written for the ONE site header, the ONE nav and the ONE footer. But they match every such element on the page. My Gen Z term cards use

for the title row, so each card title became its own sticky bar and floated over the real header while scrolling. Exactly what you saw. The site header is a direct child of , so scoping these overrides to anything inside .zp-main or a card puts the cards back in normal flow and leaves the real header untouched. ============================================================================= */ .zp-main header, .zp-main nav:not(.zp-real), .card header, .term header { position: static; top: auto; z-index: auto; background: none; border-bottom: 0; box-shadow: none; padding: 0; } .zp-main nav.tabs { display: flex; align-items: stretch; gap: .4rem; } .zp-main nav a { font-size: inherit; font-weight: inherit; color: inherit; } /* The module footer is not the site footer and must not take its full-bleed navy block treatment. */ .zp-footer { background: var(--muted); color: var(--fg); padding: 0; } .zp-footer nav { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; } .zp-body { background: var(--bg); color: var(--fg); } .zp-main { min-height: 60vh; } .wrap { max-width: 1120px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; } .wrap.narrow { max-width: 760px; } .zp-main.wide .wrap { max-width: 1320px; } .eyebrow { font: 600 0.78rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--primary-dark); margin: 0 0 .6rem; } .wrap h1 { font-size: clamp(2rem, 4.2vw, 3rem); margin: 0 0 .7rem; color: var(--secondary); } .wrap h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); margin: 0 0 .6rem; color: var(--secondary); } .lede { color: var(--muted-fg); font-size: 1.06rem; max-width: 68ch; margin: 0 0 1.8rem; } .muted { color: var(--muted-fg); } .num { font-family: 'JetBrains Mono', ui-monospace, monospace; text-align: right; } .ok { color: #0f766e; } .bad { color: var(--primary-dark); } .warn { color: #b45309; } code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .9em; background: var(--muted); padding: .1rem .35rem; border-radius: .3rem; color: var(--secondary); } /* ---- buttons --------------------------------------------------------------- These were lost when the header rules were stripped out of this file: the .zp-btn definitions happened to live inside that block. That is why the "Hear it" buttons rendered as bare browser buttons. ------------------------ */ .zp-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.4rem; border-radius: .5rem; border: 1.5px solid var(--primary-dark); background: var(--primary-dark); color: #fff; cursor: pointer; font: 600 .93rem var(--font); text-decoration: none; transition: background .15s, border-color .15s, color .15s; } .zp-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; } .zp-btn.ghost { background: transparent; color: var(--secondary); border-color: var(--border); } .zp-btn.ghost:hover { border-color: var(--primary-dark); color: var(--primary-dark); background: transparent; } .zp-btn.small { padding: .38rem .8rem; font-size: .8rem; } /* ---- cards ---- */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; margin: 0 0 1rem; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; } .card.stat b { display: block; font: 700 1.7rem/1 'JetBrains Mono', monospace; color: var(--secondary); } .card.stat span { display: block; font-size: .8rem; color: var(--muted-fg); margin-top: .3rem; } .flash { padding: .8rem 1rem; border-radius: .6rem; margin: 0 0 1rem; font-size: .93rem; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; } .flash.bad { background: #fef2f2; border-color: #fecaca; color: #991b1b; } .flash.warn { background: #fffbeb; border-color: #fde68a; color: #78350f; } .flash pre { white-space: pre-wrap; font: .78rem/1.5 monospace; margin: .5rem 0 0; } /* ---- forms ---- */ .form label, .field { display: block; margin: 0 0 1rem; font-size: .9rem; color: var(--secondary); font-weight: 500; } .form .opt { color: var(--muted-fg); font-size: .78rem; font-weight: 400; } .lbl { display: block; font-size: .9rem; color: var(--secondary); font-weight: 500; margin-bottom: .3rem; } .help { display: block; font-size: .82rem; color: var(--muted-fg); margin-bottom: .4rem; font-weight: 400; } .err { display: block; color: var(--primary-dark); font-size: .82rem; margin-top: .3rem; } input[type=text], input[type=email], input[type=search], input[type=date], input[type=number], select, textarea { width: 100%; margin-top: .3rem; padding: .65rem .8rem; border-radius: .5rem; border: 1px solid var(--border); background: #fff; color: var(--fg); font: .95rem var(--font); } input:focus, select:focus, textarea:focus { outline: 2px solid rgba(204,0,0,.3); outline-offset: 1px; border-color: var(--primary-dark); } .cb { display: flex; align-items: center; gap: .55rem; margin: 0 0 .55rem; font-weight: 400; } .cb input { width: auto; margin: 0; } fieldset { border: 1px solid var(--border); border-radius: .7rem; padding: 1rem; margin: 0 0 1rem; } legend { font-size: .78rem; color: var(--primary-dark); letter-spacing: .1em; text-transform: uppercase; padding: 0 .4rem; font-weight: 600; } .fineprint { font-size: .82rem; color: var(--muted-fg); margin: .8rem 0 0; } .inline { display: flex; gap: .55rem; flex-wrap: wrap; } .inline input { flex: 1; min-width: 200px; margin: 0; } .rowtable { width: 100%; border-collapse: collapse; margin: .4rem 0 .6rem; } .rowtable th { font-size: .78rem; color: var(--muted-fg); text-align: left; padding: 0 .4rem .3rem; font-weight: 500; } .rowtable td { padding: 0 .2rem .4rem; } .rowtable input { margin: 0; padding: .5rem .6rem; font-size: .9rem; } .rowdel { background: #fff; border: 1px solid var(--border); color: var(--muted-fg); border-radius: .4rem; width: 2rem; height: 2.2rem; cursor: pointer; font-size: 1rem; } .rowdel:hover { color: var(--primary-dark); border-color: var(--primary-dark); } /* ---- search, filters, lists ---- */ .search { margin: 0 0 1.4rem; } .srow { display: flex; gap: .55rem; } .srow input { margin: 0; } .frow { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; margin-top: .6rem; } .frow label { font-size: .84rem; color: var(--muted-fg); display: flex; align-items: center; gap: .35rem; margin: 0; font-weight: 400; } .frow input, .frow select { width: auto; margin: 0; padding: .45rem .6rem; font-size: .85rem; } .clear { font-size: .84rem; color: var(--muted-fg); } .chip { padding: .3rem .75rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted-fg); text-decoration: none; font-size: .84rem; background: #fff; } .chip:hover { border-color: var(--muted-fg); } .chip.on { background: var(--secondary); color: #fff; border-color: var(--secondary); } .chip span { opacity: .65; font-size: .76rem; margin-left: .25rem; } .count { color: var(--muted-fg); font-size: .86rem; margin: 0 0 .9rem; } .empty { padding: 2rem; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius); } .stories { list-style: none; margin: 0; padding: 0; } .stories li { padding: 1.1rem 0; border-top: 1px solid var(--border); } .stories .t { font: 700 1.1rem/1.4 var(--font-heading); color: var(--secondary); text-decoration: none; display: block; } .stories .t:hover { color: var(--primary-dark); } .stories .meta { font-size: .8rem; color: var(--muted-fg); margin: .35rem 0 0; } .stories .sum { color: var(--muted-fg); font-size: .93rem; margin: .4rem 0 0; } .badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; margin-right: .45rem; font-weight: 600; } .badge.local { background: #ecfdf5; color: #047857; } .badge.global { background: #eff6ff; color: #1d4ed8; } .pager, nav.pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin: 1.6rem 0; color: var(--muted-fg); font-size: .9rem; } .pager a { color: var(--primary-dark); text-decoration: none; font-weight: 600; } .story-title { font-size: clamp(1.6rem, 3.4vw, 2.2rem); } .standfirst { font-size: 1.08rem; color: var(--muted-fg); border-left: 3px solid var(--primary-dark); padding-left: 1rem; margin: 1.1rem 0; } .origin { background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; font-size: .9rem; color: var(--muted-fg); } .origin .zp-btn { margin-top: .7rem; } .related ul { list-style: none; padding: 0; } .related li { padding: .55rem 0; border-top: 1px solid var(--border); font-size: .93rem; } .subcta { margin-top: 2.4rem; padding: 1.5rem; background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); } .grid { width: 100%; border-collapse: collapse; font-size: .86rem; } .grid th { text-align: left; color: var(--muted-fg); font-weight: 600; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; padding: 0 .6rem .5rem; } .grid td { padding: .55rem .6rem; border-top: 1px solid var(--border); } /* ---- documents ---- */ .card.doc { display: block; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; } .card.doc:hover { border-color: var(--primary-dark); box-shadow: 0 4px 18px rgba(15,23,42,.07); } .card.doc h2 { font-size: 1.15rem; } .card.doc p { color: var(--muted-fg); font-size: .9rem; } .tag { display: inline-block; font-size: .74rem; color: var(--muted-fg); border: 1px solid var(--border); border-radius: 999px; padding: .1rem .55rem; margin: .5rem .35rem 0 0; } .tag.warn { color: #b45309; border-color: #fde68a; background: #fffbeb; } /* ---- tutor ---- */ .tutor-grid { display: grid; grid-template-columns: 230px 1fr; gap: 1.2rem; align-items: start; } .lessons h2 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--primary-dark); } .lesson { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid var(--border); color: var(--secondary); border-radius: .7rem; padding: .75rem .9rem; margin: 0 0 .55rem; cursor: pointer; font: 500 .9rem var(--font); } .lesson:hover { border-color: var(--muted-fg); } .lesson.on { border-color: var(--primary-dark); background: #fff5f5; font-weight: 600; } .face-wrap { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1rem; } .zt-face { width: 150px; height: 165px; flex: 0 0 150px; } .zt-svg { width: 100%; height: 100%; } .zt-eyes.zt-blinking .zt-eye { transform: scaleY(.12); transform-origin: center 45px; } .zt-eye { transition: transform .09s; } .zt-face.zt-speaking .zt-lamp { animation: zt-pulse 1.1s ease-in-out infinite; } @keyframes zt-pulse { 0%,100% { opacity: .55 } 50% { opacity: 1 } } .state { font: 500 .8rem 'JetBrains Mono', monospace; color: var(--muted-fg); padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--border); } .state.live { color: #047857; border-color: #a7f3d0; background: #ecfdf5; } .state.bad { color: #b45309; border-color: #fde68a; background: #fffbeb; } .controls { display: flex; gap: .9rem; flex-wrap: wrap; margin-bottom: .9rem; } .controls label { font-size: .8rem; color: var(--muted-fg); margin: 0; font-weight: 400; } .script { background: var(--muted); border: 1px solid var(--border); border-radius: .7rem; padding: 1rem 1.1rem; font-size: 1.05rem; line-height: 1.75; min-height: 6rem; color: var(--fg); } .script[dir=rtl], .script:lang(ur) { font-size: 1.2rem; line-height: 2.1; } .btnrow { display: flex; gap: .55rem; margin: .9rem 0 1.2rem; flex-wrap: wrap; } .askbox { border-top: 1px solid var(--border); padding-top: 1rem; } .askrow { display: flex; gap: .55rem; } .askrow input { margin: 0; } /* ---- gen z ---- */ .tabs { display: flex; gap: .4rem; margin: 0 0 1.3rem; border-bottom: 1px solid var(--border); } .tabs a { padding: .65rem .95rem; color: var(--muted-fg); text-decoration: none; font-size: .93rem; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; } .tabs a:hover { color: var(--secondary); } .tabs a.on { color: var(--secondary); border-bottom-color: var(--primary); font-weight: 700; } .terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; } .term { display: flex; flex-direction: column; } .term header, .term-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .5rem; } /* The title. Explicit size and colour: the site sets h2 to 2.5rem, which is a page heading, not a card heading. */ .term h2, .term-head h2 { margin: 0; font-size: 1.2rem; color: var(--secondary); letter-spacing: -0.01em; background: none; } .reg { font-size: .68rem; padding: .12rem .5rem; border-radius: 999px; margin-left: auto; white-space: nowrap; font-weight: 700; } .reg-workplaceok { background: #ecfdf5; color: #047857; } .reg-avoidatwork { background: #fef2f2; color: #b91c1c; } .reg-casual { background: #eff6ff; color: #1d4ed8; } .term .short { font-size: 1rem; color: var(--fg); margin: 0 0 .5rem; font-weight: 500; } .term .long { font-size: .9rem; color: var(--muted-fg); margin: 0 0 .6rem; } .term .eg { font-size: .9rem; color: var(--secondary); font-style: italic; border-left: 2px solid var(--border); padding-left: .7rem; margin: 0 0 .6rem; } .term .urdu { font-size: 1.05rem; color: var(--muted-fg); line-height: 2.1; margin: .5rem 0 .8rem; } .term .speak { margin-top: auto; align-self: flex-start; } .stage { display: inline-block; font-size: .7rem; padding: .12rem .55rem; border-radius: 999px; margin-bottom: .55rem; font-weight: 700; } .stage-open { background: #ecfdf5; color: #047857; } .stage-running { background: #fffbeb; color: #b45309; } .stage-idea { background: #eff6ff; color: #1d4ed8; } .stage-shipped { background: var(--muted); color: var(--muted-fg); } .project .pitch { font-size: 1rem; color: var(--fg); font-weight: 500; } .project .detail { font-size: .9rem; color: var(--muted-fg); } .project dl, .facts { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; font-size: .86rem; margin: .8rem 0; } .project dt, .facts dt { color: var(--muted-fg); } .project dd, .facts dd { margin: 0; color: var(--fg); } /* ---- module footer ---- */ .zp-footer { border-top: 1px solid var(--border); background: var(--muted); margin-top: 3rem; } .zp-fgrid { max-width: 1120px; margin: 0 auto; padding: 2.2rem 1.5rem; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1.6rem; } .zp-fgrid p { color: var(--muted-fg); font-size: .86rem; max-width: 44ch; margin: .6rem 0 0; } .zp-fgrid nav { display: flex; flex-direction: column; gap: .45rem; } .zp-fgrid b { font: 700 .74rem var(--font); letter-spacing: .13em; text-transform: uppercase; color: var(--primary-dark); margin-bottom: .2rem; } .zp-fgrid a { color: var(--muted-fg); text-decoration: none; font-size: .9rem; } .zp-fgrid a:hover { color: var(--primary-dark); } .wordmark { font: 700 1.05rem var(--font-heading); color: var(--secondary); } .wordmark em { font-style: normal; color: var(--primary); margin-left: .2rem; } .zp-legal { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem 1.6rem; color: var(--muted-fg); font-size: .8rem; } @media (max-width: 900px) { .tutor-grid { grid-template-columns: 1fr; } .zp-fgrid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* --------------------------------------------------------------- ZAZ AS A PHOTOGRAPH A browser cannot lip-sync a picture. What it can do is paint the viseme shapes over the spot the admin marked as the mouth, in time with the audio. Placed right, that reads as speech. --------------------------------------------------------------- */ .zt-photo { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--muted); } .zt-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; } .zt-photo-mouth { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .zt-photo-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(204,0,0,.18); transition: box-shadow .2s; } .zt-face.zt-is-photo.zt-speaking .zt-photo-ring { box-shadow: inset 0 0 0 3px rgba(204,0,0,.55), 0 0 22px rgba(204,0,0,.25); } .zt-face.zt-is-photo.zt-speaking .zt-photo-img { animation: zt-photo-talk 2.2s ease-in-out infinite; } @keyframes zt-photo-talk { 0%,100% { transform: scale(1) } 50% { transform: scale(1.012) } } /* --------------------------------------------------------------- ACTING ROLE BAR An account that can be both a member and staff needs to know which it is being at this moment, because that decides whether a document comes out with ZAZTEK's name on it. --------------------------------------------------------------- */ .zp-actbar{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap; padding:.55rem 1.5rem;font-size:.85rem;background:var(--muted); border-bottom:1px solid var(--border);color:var(--muted-fg)} .zp-actbar b{color:var(--secondary);font-weight:700} .zp-actbar a{margin-left:auto;color:var(--primary-dark);font-weight:600;text-decoration:none; border:1px solid var(--border);padding:.25rem .8rem;border-radius:999px;background:#fff} .zp-actbar a:hover{border-color:var(--primary-dark)} .zp-actbar.on{background:#fff5f5;border-bottom-color:#fecaca;color:#7f1d1d} .zp-actbar.on b{color:#b91c1c} @media(max-width:620px){ .zp-actbar{font-size:.78rem;padding:.5rem 1rem} .zp-actbar span{flex-basis:100%;order:3} .zp-actbar a{margin-left:auto} } /* --------------------------------------------------------------- ARTICULATION — taught cohorts --------------------------------------------------------------- */ .cohort{padding:1.6rem} .cohort-head{display:flex;gap:1rem;align-items:flex-start;margin-bottom:.6rem} .cohort-head h2{margin:.5rem 0 0;font-size:1.4rem} .cohort-price{margin-left:auto;font:700 1.25rem/1 'JetBrains Mono',monospace;color:var(--primary-dark);white-space:nowrap} .cohort .pitch{color:var(--muted-fg);font-size:1rem;margin:0 0 1rem} .cohort .facts{grid-template-columns:auto 1fr;gap:.35rem 1.1rem;margin:0 0 1.1rem} .syllabus{border-top:1px solid var(--border);padding-top:.9rem;margin:0 0 1.2rem} .syllabus summary{cursor:pointer;font-weight:600;color:var(--primary-dark);font-size:.93rem} .syllabus ol{margin:.9rem 0 0;padding-left:1.3rem} .syllabus li{margin:0 0 .8rem;font-size:.95rem} .syllabus li .muted{display:block;font-size:.87rem;margin-top:.1rem} .syllabus .drill{margin:.35rem 0 0;font-size:.87rem;color:var(--muted-fg); border-left:2px solid var(--border);padding-left:.7rem} /* --------------------------------------------------------------- ARTICULATION — the self-paced course --------------------------------------------------------------- */ .lesson-list{margin:0;padding-left:1.4rem} .lesson-list li{margin:0 0 .6rem;font-size:.95rem} .lesson-list li span{display:block;color:var(--muted-fg);font-size:.87rem;margin-top:.1rem} .lsn-grid{display:grid;grid-template-columns:250px 1fr;gap:1.6rem;align-items:start} .lsn-rail{position:sticky;top:90px;display:flex;flex-direction:column;gap:.2rem} .lsn-tick{display:flex;gap:.6rem;align-items:flex-start;padding:.5rem .6rem;border-radius:.5rem; text-decoration:none;color:var(--muted-fg);font-size:.87rem;line-height:1.35} .lsn-tick span{flex:0 0 1.4rem;height:1.4rem;border-radius:50%;border:1px solid var(--border); display:grid;place-items:center;font-size:.72rem;font-weight:700;background:#fff} .lsn-tick b{font-weight:500} .lsn-tick:hover{background:var(--muted)} .lsn-tick.done{color:#0f766e} .lsn-tick.done span{background:#0f766e;border-color:#0f766e;color:#fff} .lsn-tick.on{background:#fff5f5;color:var(--secondary)} .lsn-tick.on b{font-weight:700} .lsn-tick.on span{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff} .lsn-title{font-size:clamp(1.6rem,3.4vw,2.2rem)} .lsn-teach .teach-text{font-size:1.02rem;line-height:1.8;color:var(--fg);margin:1rem 0 0} .lsn-teach .slip{margin:1rem 0 0;padding:.7rem .9rem;background:#fffbeb;border:1px solid #fde68a; border-radius:.5rem;font-size:.88rem;color:#78350f} .drill-lines{margin:1rem 0 0;padding-left:1.4rem} .drill-lines li{margin:0 0 .9rem;padding-bottom:.9rem;border-bottom:1px solid var(--border)} .drill-lines li:last-child{border-bottom:0} .drill-lines .dl-text{display:block;font-size:1.05rem;font-weight:500;margin-bottom:.5rem} .drill-lines .dl-btns{display:flex;gap:.4rem;flex-wrap:wrap} .drill-lines li.has-clip .dl-text{color:#0f766e} .mic-note{color:#b45309;font-size:.86rem;margin:.8rem 0 0} .listen-for{background:var(--muted);border-radius:.5rem;padding:.7rem .9rem;font-size:.93rem;margin:0 0 1rem} @media(max-width:860px){ .lsn-grid{grid-template-columns:1fr} .lsn-rail{position:static;flex-direction:row;overflow-x:auto;padding-bottom:.4rem} .lsn-tick b{display:none} .lsn-tick.on b{display:block;font-size:.75rem} } /* free-preview and how-it-works bits */ .lesson-list .try{display:inline-block;margin-top:.25rem;font-size:.82rem;font-weight:600; color:var(--primary-dark);text-decoration:none} .lesson-list .try:hover{text-decoration:underline} .how{margin:0;padding-left:1.3rem} .how li{margin:0 0 .7rem;font-size:.95rem;color:var(--muted-fg)} .how li b{color:var(--fg)} .lsn-tick.locked{opacity:.45} .lsn-tick.locked span{background:var(--muted)} /* --------------------------------------------------------------- THE CONVERSATION LESSONS --------------------------------------------------------------- */ .consent{background:#fffbeb;border:1px solid #fde68a;border-radius:.7rem;padding:1rem 1.1rem;margin:1rem 0} .consent b{color:#78350f} .consent p{margin:.5rem 0 0;font-size:.9rem;color:#78350f} .consent .fineprint{color:#92700e} .consent-off{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;font-size:.86rem; color:var(--muted-fg);background:var(--muted);border-radius:.5rem;padding:.55rem .8rem;margin:.8rem 0} .cv-transcript{border:1px solid var(--border);border-radius:.7rem;padding:1rem;margin:1rem 0; max-height:22rem;overflow-y:auto;background:#fff;min-height:5rem} .cv-line{margin:0 0 .9rem} .cv-line b{display:block;font:700 .7rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase; color:var(--muted-fg);margin-bottom:.25rem} .cv-line p{margin:0;font-size:1rem;line-height:1.6} .cv-zaz p{color:var(--secondary)} .cv-me p{color:var(--fg);border-left:2px solid var(--primary-dark);padding-left:.7rem} .cv-meta{margin:-.5rem 0 1rem;font:500 .78rem 'JetBrains Mono',monospace;color:var(--muted-fg)} .cv-status{font-size:.86rem;color:var(--muted-fg);margin:.3rem 0 .8rem} .ctx-note{font-size:.86rem;color:var(--muted-fg);margin:0 0 .8rem} .linkish{background:none;border:0;padding:0;color:var(--primary-dark);font:600 .86rem inherit; cursor:pointer;text-decoration:underline} .ctx-ask{margin-bottom:1.4rem} .ctx-ask h2{margin-top:0} .ctx-ask input{margin-bottom:.8rem} .consent-off .mic-now{display:flex;align-items:center;gap:.4rem;font-size:.86rem; color:var(--secondary);font-weight:500;margin:0} .consent-off .mic-now input{width:auto;margin:0} .srcform{border-top:1px solid var(--border);margin-top:1.2rem;padding-top:1.2rem} .srcform h3{font-size:1rem;margin:0 0 .8rem;color:var(--secondary)} .srcrow{display:flex;gap:.9rem;flex-wrap:wrap;align-items:flex-end} .srcrow label{flex:1;min-width:150px} .srcrow label.cb{flex:0 0 auto;display:flex;align-items:center;gap:.4rem;margin-bottom:1rem} .srcform code{font-size:.78rem;word-break:break-all} .sendout{background:#0b1220;color:#c9d6e8;border-radius:.6rem;padding:.9rem 1.1rem; font:12.5px/1.7 ui-monospace,Menlo,monospace;white-space:pre-wrap;margin-top:1rem; max-height:20rem;overflow:auto} /* Storage */ .store-list{display:grid;gap:1rem;margin:1.4rem 0} .store{background:#fff;border:1px solid var(--border);border-radius:.9rem;padding:1.1rem 1.3rem} .store-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;flex-wrap:wrap} .store h2{font-size:1.05rem;margin:0 0 .15rem} .store .meta{margin:0;color:var(--muted-fg);font-size:.85rem} .store-size{font:700 1.15rem ui-monospace,monospace;text-align:right;white-space:nowrap} .store-size span{display:block;font:400 .78rem var(--font);color:var(--muted-fg)} .store-bar{background:#eef2f6;border-radius:99px;height:.4rem;margin:.7rem 0;overflow:hidden} .store-bar span{display:block;height:100%;background:#001f3f;border-radius:99px} .store-never{font-size:.85rem;color:#047857;font-weight:600;margin:.5rem 0 0} .store-form{background:#f8fafc;border-radius:.5rem;padding:.8rem 1rem;margin-top:.7rem} .store-form p{margin:0 0 .5rem;font-size:.9rem} .store-form .cb{display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem;margin-right:.6rem} .cronline{background:#0b1220;color:#c9d6e8;border-radius:.5rem;padding:.8rem 1rem; font:12.5px ui-monospace,Menlo,monospace;overflow-x:auto;margin:.6rem 0} /* Document log */ .act{font:700 10px ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase; padding:2px 8px;border-radius:99px;white-space:nowrap} .act.a-issue{background:#eef6ff;color:#1d4ed8} .act.a-sign{background:#f5f3ff;color:#6d28d9} .act.a-ok{background:#ecfdf5;color:#047857} .act.a-bad{background:#fef2f2;color:#b91c1c} .act.a-note{background:#f1f5f9;color:#475569}