/* ═══════════════════════════════════════════════════════════════ MOTOROLA Support — motorola.in direction Bright · airy · retail. White & warm-neutral surfaces, #001428 ink, #0E77DA brand blue links, black pill CTAs, generous rounding. ═══════════════════════════════════════════════════════════════ */ /* Fonts are loaded via a preconnected in the page (not an @import here) so they start downloading earlier and the swap is less jarring. See core/templates/base.html + base_app.html. */ /* Palette keyed to motorola.in: ink #001428, brand blue #0E77DA, warm neutral surfaces (#FBF9F7/#F8F6F4/#F5F3F1), alert red #FF554D. Light is the default (motorola.in is a bright/white site); dark is a retuned Motorola-blue counterpart with inverted white-pill primary buttons. */ :root[data-theme="dark"], [data-theme="dark"] { --bg:#0A0C10; --bg-2:#0E1116; --surface:#13161C; --surface-2:#181C23; --surface-3:#212630; --line:rgba(255,255,255,.07); --line-strong:rgba(255,255,255,.13); --text:#ECEFF3; --text-2:#9AA3B1; --text-3:#69717E; --text-4:#454C57; --accent:#3E97F0; --accent-2:#5FA9F2; --accent-glow:#3E97F0; --accent-soft:rgba(62,151,240,.14); --violet:#5B6CB0; --razr:#A5566B; --razr-2:#C27D90; --alert:#FF6A63; --warn:#C49A52; --good:#4C9A74; --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 30px -18px rgba(0,0,0,.55); --shadow-lg:0 2px 6px rgba(0,0,0,.32), 0 30px 60px -26px rgba(0,0,0,.6); --ai-grad:#3E97F0; --ai-text-grad:#ECEFF3; --btn-pri-bg:#ECEFF3; --btn-pri-fg:#0A0C10; --btn-pri-bg-hover:#FFFFFF; } :root[data-theme="light"], [data-theme="light"] { --bg:#FFFFFF; --bg-2:#FBF9F7; --surface:#FFFFFF; --surface-2:#F8F6F4; --surface-3:#F5F3F1; --line:rgba(0,20,40,.10); --line-strong:rgba(0,20,40,.16); --text:#001428; --text-2:#4F4F4F; --text-3:#727273; --text-4:#979899; --accent:#0E77DA; --accent-2:#0A5FB5; --accent-glow:#0E77DA; --accent-soft:rgba(14,119,218,.10); --violet:#4A5694; --razr:#9B4860; --razr-2:#B5687E; --alert:#FF554D; --warn:#9C7530; --good:#2E8159; --shadow:0 1px 2px rgba(0,20,40,.05), 0 12px 26px -16px rgba(0,20,40,.14); --shadow-lg:0 2px 6px rgba(0,20,40,.06), 0 28px 54px -24px rgba(0,20,40,.18); --ai-grad:#0E77DA; --ai-text-grad:#001428; --btn-pri-bg:#001428; --btn-pri-fg:#FFFFFF; --btn-pri-bg-hover:#0A2740; } * , *::before, *::after { box-sizing: border-box; } /* Reserve the scrollbar gutter so centered content doesn't shift sideways the moment the page grows tall enough to need a scrollbar. */ html { scroll-behavior: smooth; scrollbar-gutter: stable; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif; font-feature-settings: "ss01"; -webkit-font-smoothing: antialiased; letter-spacing: -0.006em; line-height: 1.55; } /* Headings unified to the body sans for a calmer, more corporate voice. Numerals/stats opt back into Space Grotesk inline where it adds character. */ h1,h2,h3,h4 { font-family: "DM Sans", sans-serif; font-weight: 600; letter-spacing: -0.022em; line-height: 1.1; margin: 0; } p { margin: 0; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } :root { --maxw: 1180px; --pad: 40px; } .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); } .mono { font-family: "JetBrains Mono", monospace; } /* ── Type scale (compressed) ──────────────────────── */ .display { font-size: clamp(40px, 5.2vw, 62px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 600; } .h-xl { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.025em; } .h-lg { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.02em; } .h-md { font-size: 21px; letter-spacing: -0.015em; } .lead { font-size: clamp(15px, 1.2vw, 17px); color: var(--text-2); line-height: 1.6; } /* ── Eyebrow — muted editorial label, no glow ─────── */ .eyebrow { font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); display:inline-flex; align-items:center; gap:10px; font-weight:500; } .eyebrow::before { content:""; width:18px; height:1px; background:var(--text-4); } .eyebrow.razr { color:var(--text-3); } .eyebrow.razr::before { background:var(--razr); width:18px; } /* ── Buttons — flat, de-pilled, neutral ───────────── */ .btn { display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:999px; font-size:14.5px; font-weight:600; letter-spacing:-0.01em; border:1px solid transparent; cursor:pointer; transition:background .15s, border-color .15s, color .15s; white-space:nowrap; } .btn svg { width:15px; height:15px; } .btn-primary { background: var(--btn-pri-bg); color: var(--btn-pri-fg); } .btn-primary:hover { background: var(--btn-pri-bg-hover); } .btn-ai { background: var(--btn-pri-bg); color: var(--btn-pri-fg); } .btn-ai:hover { background: var(--btn-pri-bg-hover); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); } .btn-ghost:hover { background: var(--surface-2); border-color: var(--text-4); } .btn-sm { padding: 9px 15px; font-size: 13px; } .btn-lg { padding: 14px 24px; font-size: 15px; } /* ── Chips — flat, square-ish ─────────────────────── */ .chip { display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; background:var(--surface); color:var(--text-2); font-size:13px; font-weight:500; border:1px solid var(--line); cursor:pointer; transition:all .15s; } .chip svg { width:14px; height:14px; } .chip:hover { color:var(--text); border-color:var(--line-strong); } .chip.active { color:#fff; background:var(--accent); border-color:transparent; } /* ── Cards — hairline, minimal elevation ──────────── */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; transition: border-color .15s; } .card.hover:hover { border-color: var(--line-strong); } .ico-tile { width:40px; height:40px; border-radius:9px; background:var(--surface-2); border:1px solid var(--line); color:var(--text); display:grid; place-items:center; flex-shrink:0; } .ico-tile svg { width: 20px; height: 20px; } .ico-tile.razr { background: var(--surface-2); color: var(--razr-2); border-color:var(--line); } .ico-tile.solid { background: var(--accent); color: #fff; border-color:transparent; } .dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--good); } /* ── Announcement bar — country-targeted, dismissible (includes/announcement.html) ── */ .announcement-region { background:var(--bg-2); border-bottom:1px solid var(--line); } .announcement-list { padding-block:0; } .announce { --announce-tone:var(--accent); --announce-soft:var(--accent-soft); position:relative; color:var(--text); font-size:13.5px; } .announce + .announce { border-top:1px solid var(--line); } .announce::before { content:""; position:absolute; inset-block:14px; inset-inline-start:0; width:2px; border-radius:2px; background:var(--announce-tone); } .announce-inner { display:grid; grid-template-columns:28px minmax(0,1fr) auto 28px; align-items:center; gap:12px; min-height:54px; padding:9px 0 9px 14px; } .announce-icon { grid-column:1; width:28px; height:28px; padding:6px; border-radius:7px; color:var(--announce-tone); background:var(--announce-soft); } .announce-msg { grid-column:2; line-height:1.45; color:var(--text-2); font-weight:500; } .announce-link { grid-column:3; color:var(--text); font-size:13px; font-weight:600; white-space:nowrap; text-decoration:underline; text-decoration-color:var(--announce-tone); text-underline-offset:3px; } .announce-link:hover { color:var(--announce-tone); } .announce-close { grid-column:4; width:28px; height:28px; background:none; border:0; color:var(--text-3); cursor:pointer; padding:6px; border-radius:7px; display:grid; place-items:center; } .announce-close:hover { color:var(--text); background:var(--surface-3); } .announce-close:focus-visible { outline:2px solid var(--announce-tone); outline-offset:2px; } .announce-close svg { width:15px; height:15px; } .announce-warning { --announce-tone:var(--warn); --announce-soft:color-mix(in oklab, var(--warn) 12%, transparent); } .announce-critical { --announce-tone:var(--alert); --announce-soft:color-mix(in oklab, var(--alert) 11%, transparent); } /* ── Header — flat, hairline ──────────────────────── */ .site-head { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); } .head-inner { display:flex; align-items:center; justify-content:space-between; height: 64px; } .head-l { display:flex; align-items:center; gap: 40px; } .brand { display:flex; align-items:center; gap:9px; } .brand .mk { font-family:"Space Grotesk"; font-weight:600; font-size:19px; letter-spacing:-0.02em; } .brand .mk b { color: var(--accent); font-weight: 600; } .head-nav { display:flex; gap: 26px; align-items:center; } .head-nav a, .head-nav .head-trigger { font-family:inherit; font-size: 14px; font-weight: 500; color: var(--text-3); position: relative; padding: 6px 0; transition: color .15s; background:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:5px; letter-spacing:-0.006em; } .head-nav a:hover, .head-nav .head-trigger:hover, .head-nav .head-trigger[aria-expanded="true"] { color: var(--text); } .head-nav a.on, .head-nav .head-trigger.on { color: var(--text); } .head-nav a.on::after, .head-nav .head-trigger.on::after { content:""; position:absolute; left:0; right:0; bottom:-20px; height:1.5px; background: var(--accent); } .mega-caret { display:inline-flex; transition:transform .2s ease; color:var(--text-4); } .mega-caret svg { width:13px; height:13px; } .head-trigger:hover .mega-caret, .head-trigger[aria-expanded="true"] .mega-caret { color:var(--text-2); } .head-trigger[aria-expanded="true"] .mega-caret { transform:rotate(180deg); } /* ── Two-level mega menu ───────────────────────────── */ .mega-layer { position:absolute; left:0; right:0; top:100%; } .mega { position:absolute; top:0; left:0; right:0; background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:var(--shadow); display:none; } .mega.open { display:block; animation:megaIn .18s ease; } @keyframes megaIn { from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } } .mega-inner { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; padding:30px 0 26px; } .mega-col h2 { font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); font-weight:500; margin:0 0 6px; padding-bottom:11px; border-bottom:1px solid var(--line); } .mega-link { display:flex; align-items:center; padding:9px 0; font-size:14px; color:var(--text-2); transition:color .12s; } .mega-link:hover { color:var(--text); } .ml-tag { font-size:9.5px; font-weight:600; color:var(--accent-2); border:1px solid var(--line-strong); border-radius:4px; padding:1px 6px; margin-left:8px; letter-spacing:.04em; text-transform:uppercase; } .mega-foot { border-top:1px solid var(--line); background:var(--surface); } .mega-foot .wrap { display:flex; gap:28px; } .mega-foot a { font-size:13px; color:var(--text-3); font-weight:500; padding:14px 0; transition:color .12s; } .mega-foot a:hover { color:var(--text); } .mega-backdrop { position:fixed; inset:0; z-index:40; background:rgba(5,7,11,.42); display:none; } .mega-backdrop.open { display:block; animation:megaFade .18s ease; } @keyframes megaFade { from{ opacity:0; } to{ opacity:1; } } .head-r { display:flex; align-items:center; gap: 12px; color: var(--text-3); } .ico-btn { background:transparent; border:0; color:var(--text-3); cursor:pointer; padding:7px; border-radius:7px; display:grid; place-items:center; transition: all .15s; } .ico-btn:hover { color: var(--text); background: var(--surface-2); } .ico-btn svg { width: 18px; height: 18px; } .pill-btn { display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border:1px solid var(--line-strong); border-radius:999px; font-size:13px; font-weight:500; color:var(--text); background:transparent; cursor:pointer; transition: all .15s; } .pill-btn:hover { background: var(--surface-2); } .pill-btn svg { width: 16px; height: 16px; } .pill-flag { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; display: block; box-shadow: 0 0 0 1px var(--line); } .head-burger { display: none; } /* ── Breadcrumb ───────────────────────────────────── */ .crumbs { display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--text-3); padding: 20px 0; flex-wrap: wrap; } .crumbs a:hover { color: var(--text); } .crumbs .sep { color: var(--text-4); } .crumbs b { color: var(--text); font-weight: 500; } /* ── Search field ─────────────────────────────────── */ .searchbar { display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line-strong); border-radius:999px; padding:7px 7px 7px 20px; transition:border-color .15s; } .searchbar:focus-within { border-color:var(--accent); } .searchbar svg.lead-ico { width:18px; height:18px; color: var(--text-4); flex-shrink:0; } .searchbar input { flex:1; background:transparent; border:0; outline:0; color:var(--text); font-size:14.5px; padding:11px 0; font-family:inherit; } .searchbar input::placeholder { color: var(--text-4); } /* ── AI dock — flat, restrained ───────────────────── */ .ai-dock { position: fixed; right: 22px; bottom: 22px; z-index: 60; } .ai-dock-btn { display:flex; align-items:center; gap:11px; background: var(--surface); color:var(--text); border:1px solid var(--line-strong); border-radius:12px; padding:11px 16px 11px 11px; cursor:pointer; box-shadow:var(--shadow); transition: border-color .15s; } .ai-dock-btn:hover { border-color: var(--text-4); } .ai-dock-btn .av { width:32px; height:32px; border-radius:8px; background:var(--accent); color:#fff; display:grid; place-items:center; } .ai-dock-btn .av svg { width:17px; height:17px; } .ai-dock-btn .t1 { font-size:13.5px; font-weight:600; line-height:1.1; } .ai-dock-btn .t2 { font-size:11px; color:var(--text-3); margin-top:2px; } @media (max-width:600px) { .ai-dock { right:12px; bottom:12px; } .ai-dock-btn { width:50px; height:50px; padding:8px; border-radius:50%; justify-content:center; } .ai-dock-btn > span:last-child { display:none; } } .ai-panel { position: fixed; right: 22px; bottom: 22px; z-index: 61; width: 376px; max-width: calc(100vw - 32px); background: var(--surface); border:1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; display: none; flex-direction: column; } .ai-panel.open { display: flex; } .ai-panel-hd { display:flex; align-items:center; gap:10px; padding:15px 16px; border-bottom:1px solid var(--line); } .ai-av { width:30px; height:30px; border-radius:8px; background:var(--accent); display:grid; place-items:center; color:#fff; flex-shrink:0; } .ai-av svg { width:15px; height:15px; } .ai-panel-bd { padding:16px; display:flex; flex-direction:column; gap:12px; max-height: 420px; overflow-y: auto; } .bubble-u { align-self:flex-end; background:var(--accent); color:#fff; padding:10px 13px; border-radius:10px 10px 3px 10px; font-size:13.5px; max-width:85%; } .bubble-ai { background:var(--surface-2); border:1px solid var(--line); border-radius:10px 10px 10px 3px; padding:13px; font-size:13.5px; line-height:1.55; color:var(--text-2); } .ai-panel-ft { padding:13px 14px; border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; } .ai-panel-ft input { flex:1; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:10px 14px; color:var(--text); font-size:13.5px; outline:0; font-family:inherit; } .ai-send { width:38px; height:38px; border-radius:8px; background:var(--accent); border:0; color:#fff; cursor:pointer; display:grid; place-items:center; flex-shrink:0; } .ai-send svg { width:16px; height:16px; } /* ── Footer ───────────────────────────────────────── */ .site-foot { border-top: 1px solid var(--line); background: var(--bg-2); color: var(--text-3); margin-top: 88px; } .foot-grid { display:grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 44px; padding: 60px 0 40px; } .foot-col h2 { font-family:"DM Sans"; font-size:12.5px; font-weight:600; color:var(--text); margin:0 0 14px; } .foot-col ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; } .foot-col a { font-size:13px; color:var(--text-3); } .foot-col a:hover { color: var(--text); } .foot-about p { font-size:13px; line-height:1.6; max-width:260px; margin-top:16px; } .foot-bottom { display:flex; justify-content:space-between; align-items:center; padding:20px 0; border-top:1px solid var(--line); font-size:12px; color:var(--text-4); } .foot-bottom .links { display:flex; gap:22px; flex-wrap: wrap; } .foot-bottom a:hover { color: var(--text); } /* ── Section helpers ──────────────────────────────── */ .section { padding: 68px 0; } .section-sm { padding: 44px 0; } .template-404 { background:var(--bg-2); } .error-page { display:grid; grid-template-columns:minmax(0, 1fr) minmax(320px, .78fr); align-items:center; gap:clamp(48px, 9vw, 140px); max-width:1180px; min-height:calc(100vh - 80px); margin:0 auto; padding:clamp(56px, 10vh, 120px) var(--pad); } .error-page-code { display:flex; align-items:baseline; gap:14px; color:var(--accent); font-family:"JetBrains Mono", monospace; font-size:15px; font-weight:600; letter-spacing:.08em; line-height:1; text-transform:uppercase; } .error-page-code span { color:var(--text-3); font-family:"DM Sans", sans-serif; font-size:12px; font-weight:600; letter-spacing:.1em; } .error-page h1 { max-width:620px; margin-top:22px; font-size:clamp(38px, 5vw, 68px); line-height:1.02; } .error-page-message { max-width:500px; margin-top:24px; color:var(--text-2); font-size:18px; line-height:1.6; } .error-page-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:38px; } .error-page-visual { position:relative; display:flex; min-height:390px; align-items:center; justify-content:center; overflow:hidden; border-radius:28px; background:#001428; color:#fff; box-shadow:var(--shadow-lg); } .error-page-visual::before, .error-page-visual::after { position:absolute; content:""; border:1px solid rgba(255,255,255,.22); transform:rotate(45deg); } .error-page-visual::before { width:72%; aspect-ratio:1; } .error-page-visual::after { width:48%; aspect-ratio:1; border-color:rgba(14,119,218,.7); } .error-page-visual-mark { position:relative; z-index:1; color:#fff; font-family:"DM Sans", sans-serif; font-size:clamp(92px, 13vw, 168px); font-weight:600; letter-spacing:-.08em; line-height:.8; } .error-page-visual-label { position:absolute; right:28px; bottom:24px; color:rgba(255,255,255,.62); font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.16em; line-height:1.4; text-align:right; } .error-page a:focus-visible { outline:2px solid var(--accent); outline-offset:4px; } @media (max-width:600px) { .error-page { display:flex; flex-direction:column; align-items:stretch; gap:48px; padding:56px 20px 72px; } .error-page-visual { min-height:250px; order:2; } .error-page-visual-mark { font-size:96px; } .error-page-actions { align-items:stretch; flex-direction:column; width:100%; } .error-page-actions .btn { justify-content:center; } } .sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom: 30px; } .sec-head h2 { margin-top: 14px; } .grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .grid-4 { display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .grid-2 { display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } /* ── Topic / link cards ───────────────────────────── */ .topic { display:flex; flex-direction:column; gap:18px; min-height:162px; justify-content:space-between; } .topic .t { font-size:15.5px; font-weight:600; color:var(--text); } .topic .s { font-size:13px; color:var(--text-3); margin-top:4px; } .row-link { display:flex; align-items:center; gap:16px; padding:17px 18px; border-radius:9px; cursor:pointer; transition: background .15s; } .row-link:hover { background: var(--surface-2); } .row-link .t { font-size:14px; font-weight:600; } .row-link .s { font-size:12.5px; color:var(--text-3); margin-top:2px; } .arrow-ico { color: var(--text-4); flex-shrink: 0; } .arrow-ico svg { width:16px; height:16px; } /* ── Badges — flat, muted, smaller ────────────────── */ .badge { display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.02em; } .badge.blue { background: var(--accent-soft); color: var(--accent-2); } .badge.green { background: color-mix(in oklab, var(--good) 14%, transparent); color: var(--good); } .badge.amber { background: color-mix(in oklab, var(--warn) 16%, transparent); color: var(--warn); } .badge.razr { background: color-mix(in oklab, var(--razr) 14%, transparent); color: var(--razr-2); } .badge.solid { background: var(--accent); color: #fff; } /* ── Decorative glows — REMOVED for clarity ───────── */ .glow-aurora, .glow-spot, .dotgrid { display: none !important; } /* ── AI text — solid, no gradient ─────────────────── */ .ai-grad-text { color: var(--accent); -webkit-text-fill-color: currentColor; background: none; } /* ── Device render (kept — device identity) ───────── */ .razr-render { width: 200px; aspect-ratio: 200/410; border-radius: 14px; background: linear-gradient(180deg,#1a1d28,#0c0e15); border:1px solid rgba(255,255,255,.1); position: relative; padding: 8px; box-shadow: var(--shadow-lg); } .razr-screen { position:absolute; inset:8px; border-radius:9px; background: linear-gradient(180deg,#1A2647 0%,#221C44 50%,#3C1A3C 100%); overflow: hidden; } .razr-crease { position:absolute; left:0; right:0; top:50%; height:1px; background: rgba(255,255,255,.10); } /* ── Table ────────────────────────────────────────── */ .tbl { width:100%; border-collapse: collapse; font-size: 14px; } .tbl th { text-align:left; font-weight:600; color:var(--text-3); font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; padding:12px 16px; border-bottom:1px solid var(--line); } .tbl td { padding:15px 16px; border-bottom:1px solid var(--line); color:var(--text-2); } .tbl tr:hover td { background: var(--surface-2); } /* ── Accordion (faq) ──────────────────────────────── */ .acc { border:1px solid var(--line); border-radius:12px; overflow:hidden; background: var(--surface); } .acc details { border-bottom: 1px solid var(--line); } .acc details:last-child { border-bottom: 0; } .acc summary { list-style:none; cursor:pointer; padding:19px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-weight:600; font-size:15px; color:var(--text); } .acc summary::-webkit-details-marker { display:none; } .acc summary .plus { width:20px; height:20px; flex-shrink:0; position:relative; transition: transform .2s; color: var(--text-3); } .acc summary .plus::before, .acc summary .plus::after { content:""; position:absolute; background: currentColor; border-radius:1px; } .acc summary .plus::before { top:9px; left:3px; right:3px; height:1.5px; } .acc summary .plus::after { left:9px; top:3px; bottom:3px; width:1.5px; transition: opacity .2s; } .acc details[open] summary .plus::after { opacity: 0; } .acc .acc-body { padding: 0 20px 20px; color: var(--text-2); font-size: 14.5px; line-height: 1.65; } /* ── Steps (troubleshoot) ─────────────────────────── */ .steps { display:flex; flex-direction:column; gap:12px; } .step { display:flex; gap:18px; padding: 18px; border:1px solid var(--line); border-radius:10px; background: var(--surface); } .step .n { width:30px; height:30px; border-radius:7px; background:var(--surface-2); border:1px solid var(--line); color:var(--accent-2); display:grid; place-items:center; font-weight:600; font-size:13.5px; flex-shrink:0; font-family:"Space Grotesk"; } /* ── Utility ──────────────────────────────────────── */ .muted { color: var(--text-3); } .center { text-align: center; } .stack-sm { display:flex; flex-direction:column; gap:8px; } .flex { display:flex; } .between { justify-content: space-between; } .items-center { align-items: center; } .gap-8 { gap:8px; } .gap-12 { gap:12px; } .gap-16 { gap:16px; } .gap-24 { gap:24px; } .wrap-gap { flex-wrap: wrap; gap: 8px; } .mt-8{margin-top:8px} .mt-16{margin-top:16px} .mt-24{margin-top:24px} .mt-32{margin-top:32px} .mt-48{margin-top:48px} .hidden { display: none; } /* ── Responsive ───────────────────────────────────── */ @media (max-width: 1080px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .foot-grid { grid-template-columns: 1fr 1fr 1fr; } .foot-about { grid-column: 1 / -1; } } @media (max-width: 860px) { :root { --pad: 22px; } .head-nav { display: none; } .head-account-link { padding:7px; border:0; border-radius:7px; } .head-account-logout { display:none; } .mega-layer, .mega-backdrop { display: none; } .head-burger { display: grid; } .grid-3, .grid-2 { grid-template-columns: 1fr; } .sec-head { flex-direction: column; align-items: flex-start; } .foot-grid { grid-template-columns: 1fr 1fr; } .foot-bottom { flex-direction: column; gap: 14px; align-items: flex-start; } } @media (max-width: 560px) { .head-r { gap:4px; } .head-account-link span { display:none; } .announce-inner { grid-template-columns:26px minmax(0,1fr) 28px; align-items:start; column-gap:10px; row-gap:5px; min-height:0; padding-block:12px; padding-inline-start:12px; } .announce-icon { grid-column:1; grid-row:1 / span 2; width:26px; height:26px; padding:5px; } .announce-msg { grid-column:2; grid-row:1; } .announce-link { grid-column:2; grid-row:2; justify-self:start; white-space:normal; } .announce-close { grid-column:3; grid-row:1; } .grid-4 { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } } /* ── RTL (ar-me) — minimal physical-property flips ──────────────────── Most layout uses logical props / flex and flips automatically under [dir="rtl"]; these handle the few hardcoded physical offsets. */ [dir="rtl"] .eyebrow::before { margin-left: 0; } [dir="rtl"] .ai-dock { right: auto; left: 22px; } [dir="rtl"] .ai-panel { right: auto; left: 22px; } [dir="rtl"] .bubble-u { border-radius: 10px 10px 10px 3px; } [dir="rtl"] .bubble-ai { border-radius: 10px 10px 3px 10px; } [dir="rtl"] .head-nav a.on::after, [dir="rtl"] .head-nav .head-trigger.on::after { left: 0; right: 0; } /* arrow glyphs point the reading direction */ [dir="rtl"] .arrow-ico svg, [dir="rtl"] .btn svg { transform: scaleX(-1); }