/* ============================================================ app.css — app-shell. Nothing here is allowed to scroll sideways. ============================================================ */ :root{ /* read by index.php to confirm this file is not an older upload */ --eyc-css-build:11; /* ---- LIGHT: Qatar maroon ---- */ --brand:#8a1538; /* Qatar flag maroon */ --brand-2:#a81c46; --brand-ink:#ffffff; --gold:#c9a227; --gold-ink:#7d6410; --bg:#f7f4f5; --card:#ffffff; --surface-2:#fbf8f9; /* input / soft panel */ --surface-3:#f0e9ec; /* thumbnails, chips */ --tint:#fdf2f5; /* selected, highlight */ --dash:#d9c6cd; --ink:#1b1418; --muted:#7c6a71; --line:#ece2e6; --green:#1a8f52; --ok-tint:#f1faf5; --red:#c62b3b; --amber:#c98a1e; --nav-bg:rgba(255,255,255,.94); --toast-bg:#2a1119; --toast-ink:#ffffff; --shadow:0 1px 2px rgba(70,20,35,.07), 0 8px 24px rgba(70,20,35,.08); --navy:var(--brand); /* kept so older rules keep working */ --navy-2:var(--brand-2); --radius:16px; --safe-b:env(safe-area-inset-bottom,0px); --nav-h:64px; color-scheme:light; } /* ---- DARK ---- */ html[data-theme="dark"]{ --brand:#c02a55; --brand-2:#8a1538; --brand-ink:#ffffff; --gold:#e0b93f; --gold-ink:#e8c862; --bg:#131013; --card:#1c181c; --surface-2:#241f25; --surface-3:#2b252c; --tint:#2e1a22; --dash:#4a3d44; --ink:#f2ecef; --muted:#a4939b; --line:#2f2830; --green:#3ecb8b; --ok-tint:#16281f; --red:#ff6b6b; --amber:#e0b93f; --nav-bg:rgba(22,18,22,.94); --toast-bg:#f2ecef; --toast-ink:#1b1418; --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45); color-scheme:dark; } *,*::before,*::after{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; } html,body{ margin:0; padding:0; width:100%; max-width:100%; overflow-x:hidden; overscroll-behavior-x:none; /* only sideways chaining is blocked */ background:var(--bg); color:var(--ink); font-family:"Segoe UI",system-ui,-apple-system,"Noto Naskh Arabic",Tahoma,Arial,sans-serif; font-size:16px; line-height:1.6; -webkit-text-size-adjust:100%; } /* NOTE: never put touch-action / user-select / overscroll-behavior on html or body. Samsung Internet reads the page scroller's touch-action from and some builds then refuse to scroll at all. Apply them to the interactive elements instead. */ button, a, label, .slot, .picker, .opt label, nav.bottom button, .langbtn, .thumb .x{ touch-action:manipulation; /* no double-tap zoom where it matters */ } header.top, nav.bottom, .steps, .badge, .slot h4, .counter{ -webkit-user-select:none; user-select:none; } img,video,table,canvas,svg{ max-width:100%; height:auto; } /* ---------------- shell ---------------- */ .app{ min-height:100vh; /* fallback for browsers without dvh */ min-height:100dvh; display:flex; flex-direction:column; padding-bottom:calc(var(--nav-h) + var(--safe-b)); } header.top{ position:sticky; top:0; z-index:40; background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%); color:#fff; padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 14px; display:flex; align-items:center; gap:12px; box-shadow:0 2px 12px rgba(70,10,30,.20); } .brand{ display:flex; align-items:center; gap:10px; min-width:0; flex:1; } .brand .mark{ width:38px;height:38px;flex:0 0 38px;border-radius:11px; background:var(--gold);color:var(--navy); display:grid;place-items:center;font-weight:800;font-size:19px; } .brand .txt{ min-width:0; } .brand h1{ margin:0; font-size:17px; font-weight:700; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .brand p{ margin:0; font-size:11.5px; opacity:.72; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* the gold TMK mark — cut out of its background, so it sits on the maroon header with no dark tile behind it */ .brand picture{ flex:0 0 auto; display:block; line-height:0; } .brand .brandmark{ height:31px; width:auto; display:block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); } /* the mark is wider than the little gold square it replaced, so the name beside it gets a tighter gap and a slightly smaller line to stay unclipped */ .brand{ gap:9px; } .brand h1{ font-size:16px; } .brand p{ font-size:11px; } /* largest breakpoint first, so each narrower one overrides the one above it */ /* the English tagline is the longer of the two, so it steps aside sooner */ @media (max-width:430px){ html[lang="en"] .brand p{ display:none; } } @media (max-width:400px){ .brand .brandmark{ height:28px; } .brand{ gap:8px; } } /* a half-word with an ellipsis looks broken; dropping the tagline is cleaner */ @media (max-width:380px){ .brand p{ display:none; } .brand h1{ font-size:15px; } } @media (max-width:365px){ .brand h1{ font-size:13.5px; letter-spacing:-.2px; } } @media (max-width:340px){ .brand h1{ font-size:12.5px; } .brand .brandmark{ height:26px; } } .langbtn{ min-width:44px; text-align:center; } .langbtn{ flex:0 0 auto; background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:7px 14px; font-size:13px; font-weight:700; cursor:pointer; } .langbtn:active{ transform:scale(.96); } main{ flex:1; width:100%; max-width:640px; margin:0 auto; padding:16px 16px 8px; } /* ---------------- views ---------------- */ .view{ display:none; animation:fade .22s ease both; } .view.on{ display:block; } @keyframes fade{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} } .card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); margin-bottom:14px; } .card h2{ margin:0 0 4px; font-size:18px; } .card .sub{ margin:0 0 16px; color:var(--muted); font-size:13.5px; } .hero{ background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%); color:#fff; border:0; } .hero h2{ font-size:21px; } .hero .sub{ color:rgba(255,255,255,.8); } .badge{ display:inline-block; background:var(--gold); color:var(--navy); font-size:12px; font-weight:800; padding:5px 12px; border-radius:999px; margin-bottom:10px; } /* ---------------- steps ---------------- */ .steps{ display:flex; gap:6px; margin-bottom:16px; } .steps i{ flex:1; height:5px; border-radius:99px; background:var(--line); transition:background .25s; } .steps i.done{ background:var(--gold); } .steps i.now{ background:var(--navy); } /* ---------------- form ---------------- */ .field{ margin-bottom:14px; } .field label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; } .field .hint{ font-size:12px; color:var(--muted); font-weight:400; } .field input,.field select,.field textarea{ width:100%; max-width:100%; border:1px solid var(--line); border-radius:12px; padding:13px 14px; font-size:16px; /* 16px stops iOS zoom-on-focus */ font-family:inherit; color:var(--ink); background:var(--surface-2); outline:none; transition:border-color .15s, background .15s; } .field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--brand); background:var(--card); } .field textarea{ min-height:86px; resize:vertical; } .row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } @media (max-width:340px){ .row2{ grid-template-columns:1fr; } } .opt{ display:flex; gap:10px; } .opt label{ position:relative; overflow:hidden; flex:1; border:1.5px solid var(--line); border-radius:12px; padding:12px 10px; text-align:center; cursor:pointer; font-size:14px; font-weight:600; background:var(--surface-2); } .opt input{ position:absolute; inset-inline-start:0; top:0; width:1px; height:1px; opacity:0; pointer-events:none; } .opt input:checked + span{ color:var(--navy); } .opt label.sel{ border-color:var(--navy); background:var(--tint); } /* set by JS */ .opt label:has(input:checked){ border-color:var(--navy); background:var(--tint); } /* ---------------- photo picker ---------------- */ .picker{ border:2px dashed var(--dash); border-radius:14px; padding:22px 14px; text-align:center; cursor:pointer; background:var(--surface-2); transition:border-color .15s,background .15s; } .picker:active{ border-color:var(--brand); background:var(--tint); } .picker .ic{ font-size:30px; line-height:1; } .picker b{ display:block; margin-top:8px; font-size:15px; } .picker span{ display:block; font-size:12.5px; color:var(--muted); margin-top:3px; } /* ---------------- the 8 labelled photo slots ---------------- */ .slotgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px; } .slot{ position:relative; overflow:hidden; border:1.5px solid var(--line); border-radius:14px; padding:10px; background:var(--surface-2); transition:border-color .18s, background .18s; } .slot.filled{ border-color:var(--green); background:var(--ok-tint); } .slot.missing{ border-color:var(--red); } .slot .pic{ min-height:96px; /* fallback where aspect-ratio is unsupported */ aspect-ratio:4/3; border-radius:10px; background:var(--surface-3); display:grid; place-items:center; overflow:hidden; margin-bottom:9px; } .slot .pic img{ width:100%; height:100%; object-fit:cover; } .slot .pic svg{ width:58%; height:auto; display:block; } .slot h4{ margin:0; font-size:12.5px; font-weight:700; line-height:1.35; } .slot .acts{ display:flex; gap:6px; margin-top:9px; } .slot .acts button{ flex:1; min-width:0; border:0; border-radius:9px; padding:9px 2px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:var(--surface-3); color:var(--brand); font-family:inherit; } .slot .acts button.pri{ background:var(--brand); color:var(--brand-ink); } .slot .acts button:active{ transform:scale(.97); } .slot .del{ position:absolute; top:16px; right:16px; inset-inline-end:16px; width:26px; height:26px; border-radius:50%; background:rgba(20,4,10,.66); color:#fff; border:0; font-size:16px; line-height:26px; padding:0; cursor:pointer; } .badge-req,.badge-opt{ display:inline-block; font-size:10px; font-weight:800; padding:1px 7px; border-radius:99px; margin-inline-start:5px; white-space:nowrap; } .badge-req{ background:color-mix(in srgb, var(--gold) 22%, transparent); color:var(--gold-ink); } .badge-opt{ background:var(--surface-3); color:var(--muted); } .thumbs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; margin-top:12px; } .thumb{ position:relative; aspect-ratio:1/1; border-radius:11px; overflow:hidden; background:var(--surface-3); } .thumb img,.thumb video{ width:100%; height:100%; object-fit:cover; display:block; } .thumb .x{ position:absolute; top:4px; right:4px; inset-inline-end:4px; width:24px; height:24px; border-radius:50%; background:rgba(20,4,10,.66); color:#fff; border:0; font-size:15px; line-height:24px; padding:0; cursor:pointer; } .thumb .tag{ position:absolute; bottom:0; inset-inline-start:0; background:rgba(20,4,10,.66); color:#fff; font-size:10px; padding:2px 6px; border-start-end-radius:6px; } .counter{ font-size:13px; color:var(--muted); margin-top:10px; } .counter.bad{ color:var(--red); font-weight:600; } .counter.good{ color:var(--green); font-weight:600; } /* ---------------- buttons ---------------- */ .btn{ display:block; width:100%; border:0; border-radius:13px; padding:15px 18px; font-size:16px; font-weight:700; font-family:inherit; cursor:pointer; text-align:center; background:var(--brand); color:var(--brand-ink); transition:transform .08s, opacity .15s; } .btn:active{ transform:scale(.985); } .btn[disabled]{ opacity:.45; cursor:not-allowed; } .btn.ghost{ background:var(--surface-3); color:var(--navy); } .btn.gold{ background:var(--gold); color:#3a2408; } .btnrow{ display:flex; gap:10px; } .btnrow .btn{ flex:1; } /* ---------------- status lights ---------------- */ .light{ text-align:center; padding:8px 0 4px; } .lamp{ width:96px; height:96px; border-radius:50%; margin:0 auto 14px; display:grid; place-items:center; font-size:40px; } .lamp.red { background:rgba(214,59,59,.12); box-shadow:0 0 0 8px rgba(214,59,59,.06); animation:pulse 1.8s ease-in-out infinite; } .lamp.green{ background:rgba(26,155,90,.12); box-shadow:0 0 0 8px rgba(26,155,90,.06); } @keyframes pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} } .light h3{ margin:0 0 6px; font-size:19px; } .light p{ margin:0; color:var(--muted); font-size:14px; } .pricebox{ margin-top:18px; padding:18px; border-radius:14px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; box-shadow:0 10px 26px color-mix(in srgb, var(--brand) 30%, transparent); } .pricebox small{ display:block; opacity:.75; font-size:12.5px; } .pricebox b{ display:block; font-size:32px; font-weight:800; line-height:1.3; } .idbox{ text-align:center; padding:18px; border-radius:14px; background:var(--tint); border:1px dashed var(--dash); margin:14px 0; } .idbox small{ display:block; color:var(--muted); font-size:12.5px; } .idbox b{ display:block; font-size:34px; font-weight:800; letter-spacing:7px; color:var(--brand); } .kv{ width:100%; border-collapse:collapse; font-size:14px; table-layout:fixed; } .kv td{ padding:9px 0; border-bottom:1px solid var(--line); word-break:break-word; } .kv td:first-child{ color:var(--muted); width:44%; } .kv tr:last-child td{ border-bottom:0; } /* ---------------- bottom nav ---------------- */ nav.bottom{ position:fixed; inset-inline:0; bottom:0; z-index:50; height:calc(var(--nav-h) + var(--safe-b)); padding-bottom:var(--safe-b); background:var(--nav-bg); backdrop-filter:saturate(180%) blur(12px); border-top:1px solid var(--line); display:flex; } nav.bottom button{ flex:1; border:0; background:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--muted); font-family:inherit; font-size:11.5px; font-weight:600; padding:0; } nav.bottom button .ic{ font-size:20px; line-height:1; } nav.bottom button.on{ color:var(--brand); } /* ---------------- misc ---------------- */ .toast{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--nav-h) + var(--safe-b) + 16px); background:var(--toast-bg); color:var(--toast-ink); padding:12px 18px; border-radius:11px; font-size:14px; z-index:90; max-width:calc(100vw - 32px); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; text-align:center; } .toast.on{ opacity:1; transform:translateX(-50%) translateY(-4px); } .skeleton{ height:14px; border-radius:7px; background:linear-gradient(90deg,var(--surface-3),var(--surface-2),var(--surface-3)); background-size:200% 100%; animation:sh 1.2s linear infinite; margin:9px 0; } @keyframes sh{ from{background-position:200% 0} to{background-position:-200% 0} } .bar{ height:8px; border-radius:99px; background:var(--line); overflow:hidden; margin-top:12px; } .bar i{ display:block; height:100%; width:0; background:var(--gold); transition:width .2s; } footer.legal{ text-align:center; color:var(--muted); font-size:11.5px; padding:6px 16px 18px; } footer.legal a{ color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line); } footer.legal a:hover{ color:var(--brand); } footer.legal .dot{ opacity:.5; margin:0 6px; } /* the Terms / Privacy links on the info screen */ a.linkrow{ display:inline-block; margin-inline-end:16px; margin-top:2px; color:var(--brand); font-weight:700; font-size:13.5px; text-decoration:none; } a.linkrow:hover{ text-decoration:underline; } /* “Developed by …” line at the foot of the info screen */ .devcredit{ text-align:center; margin:2px 0 6px; font-size:12px; } .devcredit a{ color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:1px; } .devcredit a:hover{ color:var(--brand); border-bottom-color:var(--brand); } /* the “2021 – 2027” note under the Year box */ .yearhint{ margin:6px 2px 0; font-size:12px; color:var(--muted); text-align:start; letter-spacing:.4px; } .yearhint[hidden]{ display:none; } /* ---------- terms.php / privacy.php ---------- */ .legaldoc h3{ margin:22px 0 8px; font-size:16px; font-weight:800; color:var(--brand); line-height:1.5; } .legaldoc h3:first-child{ margin-top:0; } .legaldoc p{ margin:0 0 10px; font-size:14.5px; line-height:1.85; color:var(--ink); } .legaldoc ul{ margin:0 0 12px; padding-inline-start:20px; } .legaldoc li{ font-size:14.5px; line-height:1.8; margin-bottom:5px; color:var(--ink); } .legaldoc .updated{ font-size:12.5px; color:var(--muted); margin:0 0 4px; } .err{ color:var(--red); font-size:13px; margin-top:8px; min-height:18px; } .ltr{ direction:ltr; unicode-bidi:isolate; overflow-wrap:anywhere; } .kv.contact{ table-layout:auto; } .kv.contact td:first-child{ width:1%; white-space:nowrap; padding-inline-end:16px; } .kv.contact td:last-child{ text-align:end; } /* a long address like contact@thamanmotorak.com used to break mid-word on a narrow phone; keep it on one line and shrink it a little instead */ .kv.contact a{ font-size:14px; white-space:nowrap; } @media (max-width:400px){ .kv.contact a{ font-size:13px; } } @media (max-width:340px){ .kv.contact a{ font-size:12px; } } .field input[dir="ltr"], .field select[dir="ltr"]{ text-align:start; } html[dir="rtl"] .field input[dir="ltr"]{ text-align:right; } /* ---------------- theme switch ---------------- */ .iconbtn{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24); color:#fff; font-size:17px; line-height:1; cursor:pointer; padding:0; display:grid; place-items:center; } .iconbtn:active{ transform:scale(.94); } /* ---------------- the valuation note from the dealer ---------------- */ .note{ margin-top:16px; border-radius:14px; overflow:hidden; background:var(--tint); border:1px solid color-mix(in srgb, var(--brand) 26%, transparent); border-inline-start:6px solid var(--brand); } .note .hd{ display:flex; align-items:center; gap:8px; padding:10px 16px 0; font-size:12px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--brand); } .note p{ margin:6px 0 0; padding:0 16px 14px; font-size:16px; font-weight:700; line-height:1.75; color:var(--ink); } [hidden]{ display:none !important; } /* ============================================================ Step 2 — the condition step ============================================================ */ .clabel{ display:block; font-size:14.5px; font-weight:800; color:var(--ink); margin:0 0 6px; } /* ---------------- the car panel diagram ---------------- */ .carmap{ background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:10px 6px; touch-action:manipulation; /* no 300 ms delay, no accidental zoom */ } .carmap .cmsvg{ display:block; width:100%; height:auto; max-height:min(62vh, 460px); margin:0 auto; } .cm-part{ fill:var(--surface-3); stroke:var(--dash); stroke-width:2; stroke-linejoin:round; cursor:pointer; transition:fill .12s ease; -webkit-tap-highlight-color:transparent; } .cm-part:hover{ fill:color-mix(in srgb, var(--brand) 14%, var(--surface-3)); } .cm-part:focus-visible{ outline:none; stroke:var(--brand); stroke-width:4; } .cm-part[data-state="painted"]{ fill:var(--cm-painted); stroke:var(--cm-painted-line); } .cm-part[data-state="accident"]{ fill:var(--cm-accident); stroke:var(--cm-accident-line); } .cm-glass{ fill:var(--cm-glass); stroke:var(--dash); stroke-width:2; pointer-events:none; } .cm-grab{ fill:var(--dash); stroke:none; pointer-events:none; } .cm-wheel{ fill:var(--surface-3);stroke:var(--dash); stroke-width:2; pointer-events:none; } :root{ --cm-painted:#e0a12c; --cm-painted-line:#b47c12; --cm-accident:#d1435b; --cm-accident-line:#a82744; --cm-glass:#e2ebf4; } html[data-theme="dark"]{ --cm-painted:#c8871a; --cm-painted-line:#e0a12c; --cm-accident:#b8324a; --cm-accident-line:#e0637a; --cm-glass:#31343d; } .cmlegend{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; margin:12px 0 0; font-size:12.5px; color:var(--muted); } .cmkey{ display:inline-flex; align-items:center; gap:6px; } .cmkey i{ width:15px; height:15px; border-radius:5px; display:block; } .cmkey i.k-painted{ background:var(--cm-painted); } .cmkey i.k-accident{ background:var(--cm-accident); } .cmclear{ margin-inline-start:auto; background:none; border:0; padding:4px 2px; color:var(--brand); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; text-decoration:underline; } .cmpicked{ margin:10px 0 0; display:flex; flex-wrap:wrap; gap:6px; } .cmpicked span{ font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:99px; background:var(--surface-3); color:var(--ink); } .cmpicked span.s-painted{ background:color-mix(in srgb, var(--cm-painted) 22%, transparent); } .cmpicked span.s-accident{ background:color-mix(in srgb, var(--cm-accident) 22%, transparent); } /* ---------------- radio list ---------------- */ .optlist{ display:grid; gap:10px; } .optitem{ display:block; } /* a block wrapper, so the three answers stay on separate lines even with no stylesheet */ .optrow{ width:100%; box-sizing:border-box; } .optrow{ display:flex; align-items:flex-start; gap:13px; padding:14px 15px; border-radius:14px; border:1.5px solid var(--line); background:var(--surface-2); cursor:pointer; transition:border-color .12s ease, background .12s ease; } .optrow.sel{ border-color:var(--brand); background:var(--tint); box-shadow:inset 0 0 0 1px var(--brand); } .optrow input{ margin:1px 0 0; accent-color:var(--brand); width:21px; height:21px; flex:0 0 auto; } /* the answer and its explanation are two separate blocks, so no line can be read as belonging to the option above or below it */ .optrow > span{ flex:1; min-width:0; } .optrow b{ display:block; font-size:15px; font-weight:800; color:var(--ink); line-height:1.55; } .optrow small{ display:block; font-size:12.5px; color:var(--muted); line-height:1.65; margin-top:5px; padding-top:6px; border-top:1px solid var(--line); } .optrow.sel small{ border-top-color:color-mix(in srgb, var(--brand) 25%, transparent); } /* ---------------- chip pickers ---------------- */ /* two per row on a phone, four across once there is room; the two paint-extent answers are sentences, so they always get a full row */ .chips{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; } .chips[data-group="paint_extent"]{ grid-template-columns:1fr; } @media (min-width:520px){ .chips{ grid-template-columns:repeat(4,1fr); } .chips[data-group="paint_extent"]{ grid-template-columns:repeat(2,1fr); } } .chip{ padding:11px 10px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface-2); color:var(--ink); font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; text-align:center; transition:.12s ease; } .chip:active{ transform:scale(.97); } .chip.on{ border-color:var(--brand); background:var(--brand); color:var(--brand-ink); } .qblock{ margin-top:20px; } .qhead{ display:flex; align-items:flex-start; gap:10px; margin:0 0 9px; } .qhead b{ display:block; font-size:14.5px; font-weight:800; color:var(--ink); } .qhead small{ display:block; font-size:12px; color:var(--muted); margin-top:1px; } .qicon{ flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--tint); color:var(--brand); } .qicon .cmi{ width:23px; height:23px; display:block; } /* the support form's "what is this about?" chips are one-of-three, never blank */ .chips[data-group="sup_kind"]{ grid-template-columns:1fr; } @media (min-width:520px){ .chips[data-group="sup_kind"]{ grid-template-columns:repeat(3,1fr); } } #view-support textarea{ min-height:130px; } /* ---------------- an answer the diagram has ruled out ---------------- */ .optrow.locked{ opacity:.45; cursor:not-allowed; background:var(--surface-3); border-color:var(--line); } .optrow.locked input{ cursor:not-allowed; } .lockmsg{ margin:8px 0 0; font-size:12.5px; line-height:1.75; color:var(--red); background:color-mix(in srgb, var(--red) 9%, transparent); border-radius:10px; padding:9px 12px; } /* ---------------- uploading ---------------- */ .sending{ position:fixed; inset:0; z-index:9998; background:rgba(12,10,12,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:grid; place-items:center; padding:24px; } .sending .sbox{ background:var(--card); border-radius:20px; padding:28px 26px 24px; width:min(340px,100%); text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.4); position:relative; } .sending .sring{ width:74px; height:74px; display:block; margin:0 auto 6px; } .sending .sring circle{ fill:none; stroke-width:3.4; } .sending .sring .t{ stroke:var(--surface-3); } .sending .sring .p{ stroke:var(--gold); stroke-linecap:round; stroke-dasharray:119.4; stroke-dashoffset:119.4; /* 2πr, r = 19 */ transform:rotate(-90deg); transform-origin:50% 50%; transition:stroke-dashoffset .25s linear; } /* once the bytes are all sent the server is still working — keep it moving so the screen never looks frozen */ .sending.work .sring{ animation:sspin 1.1s linear infinite; } .sending.work .sring .p{ stroke-dasharray:38 119.4; stroke-dashoffset:0; transition:none; } @keyframes sspin{ to{ transform:rotate(360deg); } } .sending .spct{ position:absolute; top:52px; left:0; right:0; font-size:15px; font-weight:800; color:var(--ink); } .sending.work .spct{ display:none; } .sending h3{ margin:14px 0 4px; font-size:17px; color:var(--ink); } .sending p{ margin:0; font-size:13px; color:var(--muted); line-height:1.7; } @media (prefers-reduced-motion: reduce){ .sending.work .sring{ animation-duration:2.4s; } } /* ---------------- the way into the guide, from the Info tab ---------------- */ .guidecard{ display:flex; align-items:center; gap:13px; background:linear-gradient(150deg, var(--brand), var(--brand-2)); color:var(--brand-ink); text-decoration:none; border-radius:var(--radius); padding:16px 17px; margin-bottom:14px; box-shadow:var(--shadow); } .guidecard .gic{ flex:0 0 auto; font-size:24px; line-height:1; } .guidecard b{ display:block; font-size:15.5px; } .guidecard small{ display:block; font-size:12.5px; opacity:.82; line-height:1.7; margin-top:2px; } .guidecard .garr{ flex:0 0 auto; margin-inline-start:auto; opacity:.8; font-size:17px; } .guidecard:active{ transform:scale(.99); } /* ---------------- “didn’t the email arrive?” ---------------- */ .junknote{ margin:16px 0 4px; padding:14px 16px; border-radius:14px; background:color-mix(in srgb, var(--gold) 11%, transparent); border:1px solid color-mix(in srgb, var(--gold) 34%, transparent); text-align:start; } .junknote b{ display:block; font-size:14px; color:var(--ink); margin-bottom:5px; } .junknote p{ margin:0; font-size:13px; line-height:1.85; color:var(--muted); } .junknote .junklink{ display:inline-block; margin-top:9px; padding:0; border:0; background:none; font:inherit; font-size:13px; font-weight:700; color:var(--brand); text-decoration:underline; cursor:pointer; }