/* Account portal. Loaded after /styles.css, whose tokens, fonts, focus ring, icon wash, writing-system stacks and reduced-motion rules it builds on. Outside the Themes section nothing here defines a colour, radius, shadow or duration of its own: every value is a token from :root in styles.css, so the portal and the marketing site stay one design system (DESIGN.md). Themes only re-points those same tokens for the portal's light theme. Every class is prefixed `ac-`. The site already owns `.btn`, `.card` and `.pill` with marketing sizes, and the portal's denser controls must not collide with them. The classes follow the approved design canvas one to one: ac-btn is the design's .btn, ac-gh its ghost, ac-qt its quiet button, ac-st its status chip, and so on. */ /* ---------------------------------------------------------------- Themes Dark is the site's own look and the default. The Worker writes the visitor's choice from the dct_theme cookie into before the page leaves (system, light or dark; worker/account/pages.js), so the first paint is already right. `system` follows the operating system. The light theme re-points the styles.css tokens only; every rule below keeps reading the same names. --gold-text is gold used as text. On black it is the brand gold itself; on the light ground that gold is far below 4.5:1, so light text-gold is a darker gold of the same hue. */ :root { --gold-text: var(--gold); --skel-bone: var(--glass-3); } :root[data-theme="light"] { color-scheme: light; --bg: #f5f4f0; --text: #121212; --text-display: #0d0d0c; --text-high: rgba(0, 0, 0, 0.86); --text-body: rgba(0, 0, 0, 0.78); --text-soft: rgba(0, 0, 0, 0.7); --text-subtle: rgba(0, 0, 0, 0.64); --text-faint: rgba(0, 0, 0, 0.58); --gold-text: #7f5b00; --skel-bone: rgba(0, 0, 0, 0.07); --gold-hover: #f0bd36; --gold-deep: #ecd594; --gold-wash: rgba(232, 179, 43, 0.08); --gold-tint: rgba(232, 179, 43, 0.14); --gold-tint-strong: rgba(232, 179, 43, 0.22); --gold-glow: rgba(232, 179, 43, 0.3); --gold-line-soft: rgba(176, 128, 10, 0.3); --gold-line: rgba(176, 128, 10, 0.5); --gold-line-strong: rgba(176, 128, 10, 0.68); --gold-line-active: rgba(150, 108, 0, 0.9); --gold-panel: #fbf3dc; --gold-panel-line: #e3c97f; --glass-1: rgba(255, 255, 255, 0.72); --glass-2: rgba(255, 255, 255, 0.92); --glass-3: rgba(0, 0, 0, 0.045); --surface-well: #eeede8; --surface-card: #fff; --surface-panel: rgba(255, 255, 255, 0.94); --surface-popover: #fff; --surface-control: #e8e7e2; --surface-control-hover: #dddcd6; --surface-light: #161616; --surface-light-hover: #000; --on-light: #fff; --on-light-tint: rgba(255, 255, 255, 0.16); --surface-inverse: #efeee9; --surface-overlay: rgba(250, 250, 247, 0.8); --surface-overlay-hover: rgba(255, 255, 255, 0.96); --surface-header: rgba(245, 244, 240, 0.88); --surface-header-solid: #f5f4f0; --surface-sheet: rgba(250, 250, 248, 0.97); --scrim: rgba(24, 22, 18, 0.42); --line-faint: #e8e7e2; --line: #e0dfd9; --line-frame: #dbdad3; --line-control: #d1d0c9; --line-strong: #bfbeb6; --line-hover: #8c8b84; --line-header: rgba(0, 0, 0, 0.07); --line-glass: rgba(0, 0, 0, 0.12); --line-overlay: rgba(0, 0, 0, 0.2); --line-contrast: #6b6d73; --success: #126b31; --success-line: rgba(18, 107, 49, 0.36); --success-tint: rgba(18, 107, 49, 0.09); --info: #2356c2; --info-line: rgba(35, 86, 194, 0.32); --info-tint: rgba(35, 86, 194, 0.08); --danger: #b8321c; --danger-line: rgba(184, 50, 28, 0.36); --danger-tint: rgba(184, 50, 28, 0.08); --focus-color: #8a6300; --focus-color-media: #000; --shadow-control: 0 4px 18px rgba(24, 22, 18, 0.08); --shadow-popover: 0 18px 40px rgba(24, 22, 18, 0.14); --shadow-cta: 0 10px 30px rgba(24, 22, 18, 0.1); } @media (prefers-color-scheme: light) { :root[data-theme="system"] { color-scheme: light; --bg: #f5f4f0; --text: #121212; --text-display: #0d0d0c; --text-high: rgba(0, 0, 0, 0.86); --text-body: rgba(0, 0, 0, 0.78); --text-soft: rgba(0, 0, 0, 0.7); --text-subtle: rgba(0, 0, 0, 0.64); --text-faint: rgba(0, 0, 0, 0.58); --gold-text: #7f5b00; --skel-bone: rgba(0, 0, 0, 0.07); --gold-hover: #f0bd36; --gold-deep: #ecd594; --gold-wash: rgba(232, 179, 43, 0.08); --gold-tint: rgba(232, 179, 43, 0.14); --gold-tint-strong: rgba(232, 179, 43, 0.22); --gold-glow: rgba(232, 179, 43, 0.3); --gold-line-soft: rgba(176, 128, 10, 0.3); --gold-line: rgba(176, 128, 10, 0.5); --gold-line-strong: rgba(176, 128, 10, 0.68); --gold-line-active: rgba(150, 108, 0, 0.9); --gold-panel: #fbf3dc; --gold-panel-line: #e3c97f; --glass-1: rgba(255, 255, 255, 0.72); --glass-2: rgba(255, 255, 255, 0.92); --glass-3: rgba(0, 0, 0, 0.045); --surface-well: #eeede8; --surface-card: #fff; --surface-panel: rgba(255, 255, 255, 0.94); --surface-popover: #fff; --surface-control: #e8e7e2; --surface-control-hover: #dddcd6; --surface-light: #161616; --surface-light-hover: #000; --on-light: #fff; --on-light-tint: rgba(255, 255, 255, 0.16); --surface-inverse: #efeee9; --surface-overlay: rgba(250, 250, 247, 0.8); --surface-overlay-hover: rgba(255, 255, 255, 0.96); --surface-header: rgba(245, 244, 240, 0.88); --surface-header-solid: #f5f4f0; --surface-sheet: rgba(250, 250, 248, 0.97); --scrim: rgba(24, 22, 18, 0.42); --line-faint: #e8e7e2; --line: #e0dfd9; --line-frame: #dbdad3; --line-control: #d1d0c9; --line-strong: #bfbeb6; --line-hover: #8c8b84; --line-header: rgba(0, 0, 0, 0.07); --line-glass: rgba(0, 0, 0, 0.12); --line-overlay: rgba(0, 0, 0, 0.2); --line-contrast: #6b6d73; --success: #126b31; --success-line: rgba(18, 107, 49, 0.36); --success-tint: rgba(18, 107, 49, 0.09); --info: #2356c2; --info-line: rgba(35, 86, 194, 0.32); --info-tint: rgba(35, 86, 194, 0.08); --danger: #b8321c; --danger-line: rgba(184, 50, 28, 0.36); --danger-tint: rgba(184, 50, 28, 0.08); --focus-color: #8a6300; --focus-color-media: #000; --shadow-control: 0 4px 18px rgba(24, 22, 18, 0.08); --shadow-popover: 0 18px 40px rgba(24, 22, 18, 0.14); --shadow-cta: 0 10px 30px rgba(24, 22, 18, 0.1); } } /* The tiled icon wash stays in the portal, but quieter than on the marketing site: here it sits behind forms, tables and numbers, and at the site's 4.5% the icons read through busy panels and pull at the eye. */ .ac-page::before { opacity: 0.02; } /* The tiled icon wash is white line art; on the light ground it turns dark. */ :root[data-theme="light"] body::before { filter: invert(1); opacity: 0.016; } @media (prefers-color-scheme: light) { :root[data-theme="system"] body::before { filter: invert(1); opacity: 0.016; } } /* ---------------------------------------------------------------- Base */ .ac-page { min-height: 100dvh; } /* Zero-specificity resets, so every ac- class below wins over them. */ :where(.ac-page) :where(ul, ol) { list-style: none; } :where(.ac-page) :where(a), :where(.ac-page) a:hover { color: inherit; } :where(.ac-page) :where(button) { cursor: pointer; background: none; border: 0; } .ac-page [hidden] { display: none !important; } /* Headings that take focus after an update are landmarks, not controls. */ .ac-page [tabindex="-1"]:focus { outline: none; } .ac-i { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Arrows and chevrons point the reading direction; symbols do not mirror. */ [dir="rtl"] .ac-flip { transform: scaleX(-1); } .ac-slot { display: contents; } /* Each element keeps its own display; these only hide it on the other side of 900px. */ @media (min-width: 901px) { .ac-narrow-only { display: none !important; } } /* ---------------------------------------------------------------- Type */ .ac-eyebrow { color: var(--gold-text); font-family: 'Nippo-Medium', sans-serif; font-size: 14px; letter-spacing: 0.025em; } .ac-h1 { color: var(--text-display); font-family: 'Nippo-Bold', sans-serif; font-size: clamp(32px, 3.4vw, 44px); font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: anywhere; } .ac-h1.is-detail { font-size: clamp(30px, 3vw, 40px); } .ac-h1.is-hero { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.04; } .ac-h2 { color: var(--text); font-family: 'Nippo-Medium', sans-serif; font-size: 22px; font-weight: 400; line-height: 1.2; text-wrap: balance; } .ac-h2.is-sm { font-size: 18px; } .ac-h2.is-md { font-size: 20px; } .ac-h2.is-lg { font-size: 24px; } .ac-h2.is-display { font-family: 'Nippo-Bold', sans-serif; font-size: 28px; letter-spacing: -0.02em; } .ac-h3 { color: var(--text); font-family: 'Nippo-Medium', sans-serif; font-size: 17px; font-weight: 400; line-height: 1.3; overflow-wrap: anywhere; } .ac-h3.is-sm { font-size: 16px; } .ac-lead { color: var(--text-body); font-family: 'Nippo-Light', sans-serif; font-size: 18px; line-height: 1.55; text-wrap: pretty; } .ac-p { color: var(--text-soft); font-family: 'Nippo-Light', sans-serif; font-size: 15px; line-height: 1.55; text-wrap: pretty; } .ac-p.is-body { color: var(--text-body); } .ac-sm { color: var(--text-subtle); font-family: 'Nippo-Light', sans-serif; font-size: 14px; line-height: 1.5; text-wrap: pretty; } .ac-ov { color: var(--text-faint); font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } /* Table headers are read across a row of data, so they are sentence-case labels at a reading size, the same in the portal and the admin area, not small overlines. */ .ac-th { color: var(--text-subtle); font-family: var(--font-ui); font-size: 13px; font-weight: 600; white-space: nowrap; } .ac-num { font-family: var(--font-ui); font-feature-settings: 'tnum'; } .ac-num.is-price { font-size: 20px; font-weight: 600; color: var(--text); } .ac-mono { color: var(--text-high); font-family: var(--font-mono); letter-spacing: 0.04em; direction: ltr; unicode-bidi: isolate; } /* Hardware IDs are opaque and can be long; let them wrap anywhere. */ .ac-break { overflow-wrap: anywhere; min-width: 0; } .ac-strong { font-family: 'Nippo-Medium', sans-serif; } .ac-hi { color: var(--text-high); } .ac-lbl { color: var(--text-high); font-family: 'Nippo-Medium', sans-serif; font-size: 14px; } .ac-lnk { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-hover); text-underline-offset: 3px; transition: color var(--motion-state) var(--ease-out-quart), text-decoration-color var(--motion-state) var(--ease-out-quart); } .ac-lnk:hover { color: var(--gold-text); text-decoration-color: var(--gold-text); } .ac-hr { height: 1px; background: var(--line-faint); } .ac-hr.is-gold { background: var(--gold-panel-line); } /* ---------------------------------------------------------------- Surfaces */ .ac-panel { border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--glass-1); } .ac-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-card); } .ac-gp { border: 1px solid var(--gold-panel-line); border-radius: var(--radius-xl); background: var(--gold-panel); } .ac-well { border: 1px solid var(--line-control); border-radius: var(--radius-md); background: var(--surface-well); } .ac-panel.is-solid { background: var(--surface-card); } .ac-panel.is-invite { border-color: var(--gold-line-soft); } .ac-panel.is-highlight { border-color: var(--gold-line-strong); background: var(--gold-wash); } /* ---------------------------------------------------------------- Buttons */ .ac-btn, .ac-gh, .ac-qt, .ac-dg { display: inline-flex; min-height: var(--control-min); padding: 11px 20px; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 15px; line-height: 1.1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--motion-state) var(--ease-out-quart), border-color var(--motion-state) var(--ease-out-quart), color var(--motion-state) var(--ease-out-quart), transform var(--motion-fast) var(--ease-out-quart); } .ac-btn:active:not(:disabled), .ac-gh:active:not(:disabled), .ac-dg:active:not(:disabled) { transform: scale(0.975); } .ac-page .ac-btn { padding-inline: 22px; border-color: var(--gold); background: var(--gold); color: var(--on-gold); font-family: 'Nippo-Medium', sans-serif; } .ac-page .ac-btn:hover { border-color: var(--gold-hover); background: var(--gold-hover); color: var(--on-gold); } .ac-page .ac-gh { border-color: var(--line-strong); background: transparent; color: var(--text); font-family: 'Nippo-Regular', sans-serif; } .ac-page .ac-gh:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-text); } .ac-page .ac-qt { padding-inline: 14px; gap: 8px; background: transparent; color: var(--text-soft); font-family: 'Nippo-Regular', sans-serif; } .ac-page .ac-qt:hover:not(:disabled) { background: var(--glass-3); color: var(--text); } .ac-page .ac-dg { border-color: var(--danger-line); background: var(--danger-tint); color: var(--danger); font-family: 'Nippo-Medium', sans-serif; } .ac-page .ac-dg:hover:not(:disabled) { border-color: var(--danger); } .ac-page .ac-btn:disabled, .ac-page .ac-gh:disabled, .ac-page .ac-dg:disabled, .ac-page .ac-qt:disabled, .ac-page .ac-btn[aria-disabled="true"] { border-color: var(--line-control); background: transparent; color: var(--text-faint); cursor: not-allowed; } .ac-lg { min-height: 56px; padding: 16px 30px; font-size: 17px; } .ac-compact { min-height: 40px; padding: 8px 14px; font-size: 14px; } .ac-qt.is-sm { font-size: 14px; } .ac-qt.is-flush { margin-inline-start: -14px; } .ac-block { width: 100%; } .ac-self-start { align-self: flex-start; } .ac-ib { display: inline-flex; width: var(--control-min); height: var(--control-min); flex: none; align-items: center; justify-content: center; border: 1px solid var(--line-control); border-radius: var(--radius-sm); background: var(--glass-2); color: var(--text-soft); cursor: pointer; transition: border-color var(--motion-state) var(--ease-out-quart), color var(--motion-state) var(--ease-out-quart); } .ac-ib:hover:not(:disabled) { border-color: var(--line-hover); color: var(--text); } .ac-ib.is-bare { border-color: transparent; background: transparent; } .ac-ib:disabled { color: var(--text-faint); cursor: not-allowed; } /* ---------------------------------------------------------------- Status and pills */ .ac-st { display: inline-flex; height: 26px; padding: 0 10px; align-items: center; gap: 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--glass-3); color: var(--text-high); font-family: var(--font-ui); font-size: 12px; font-weight: 600; white-space: nowrap; } .ac-st.is-ok { border-color: var(--success-line); background: var(--success-tint); color: var(--success); } .ac-st.is-info { border-color: var(--info-line); background: var(--info-tint); color: var(--info); } .ac-st.is-bad { border-color: var(--danger-line); background: var(--danger-tint); color: var(--danger); } .ac-st.is-gold { border-color: var(--gold-line); background: var(--gold-tint); color: var(--gold-text); } .ac-pill { display: inline-flex; min-height: var(--control-min); padding: 10px 16px; align-items: center; gap: 9px; border: 1px solid var(--line-control); border-radius: var(--radius-pill); background: var(--glass-1); color: var(--text-soft); font-family: 'Nippo-Regular', sans-serif; font-size: 15px; white-space: nowrap; text-decoration: none; cursor: pointer; transition: border-color var(--motion-fast) var(--ease-out-quart), background-color var(--motion-fast) var(--ease-out-quart), color var(--motion-fast) var(--ease-out-quart); } @media (hover: hover) { .ac-pill:hover { border-color: var(--line-hover); color: var(--text); } } .ac-pill.is-on, .ac-pill[aria-pressed="true"], .ac-pill[aria-checked="true"], .ac-pill[aria-current="page"] { border-color: var(--gold-line-strong); background: var(--gold-tint); color: var(--text); } .ac-pill.is-count { min-width: 56px; justify-content: center; } .ac-pill.is-short { min-height: 40px; } .ac-cnt { color: var(--text-subtle); font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; } .ac-pill.is-on .ac-cnt, .ac-pill[aria-pressed="true"] .ac-cnt, .ac-pill[aria-checked="true"] .ac-cnt, .ac-nav a[aria-current="page"] .ac-cnt { color: var(--gold-text); } .ac-badge { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--gold); color: var(--on-gold); font-family: var(--font-ui); font-size: 11px; font-weight: 700; } .ac-toggle { display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; border: 1px solid var(--line-control); border-radius: var(--radius-pill); background: var(--glass-1); } .ac-toggle .ac-pill { min-height: 40px; border-color: transparent; } .ac-toggle .ac-pill[aria-checked="true"] { border-color: var(--gold-line-strong); } /* ---------------------------------------------------------------- Small parts */ .ac-seg { display: inline-flex; padding: 7px 9px; align-items: center; justify-content: center; border: 1px solid var(--line-control); border-radius: var(--radius-xs); background: var(--surface-well); color: var(--text-high); font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.06em; } .ac-seg.is-big { min-width: 84px; padding: 14px 12px; border-radius: var(--radius-sm); font-size: 20px; } .ac-hwsegs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; direction: ltr; } .ac-hwsegs .ac-dash { color: var(--text-faint); } .ac-av { display: inline-flex; width: 32px; height: 32px; flex: none; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: var(--surface-control); color: var(--text-high); font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; } .ac-av img { width: 100%; height: 100%; object-fit: cover; } .ac-av.is-lg { width: 44px; height: 44px; font-size: 14px; } .ac-av.is-sm { width: 28px; height: 28px; font-size: 11px; } .ac-avstack { display: inline-flex; } .ac-avstack .ac-av { width: 30px; height: 30px; font-size: 11px; box-shadow: 0 0 0 3px var(--surface-card); } .ac-avstack .ac-av + .ac-av { margin-inline-start: -4px; } .ac-person { display: inline-flex; align-items: center; gap: 10px; color: var(--text-high); font-size: 15px; min-width: 0; } .ac-person.is-sm { font-size: 14px; } .ac-dev { display: inline-flex; width: var(--control-min); height: var(--control-min); flex: none; align-items: center; justify-content: center; border: 1px solid var(--line-control); border-radius: var(--radius-md); background: var(--surface-well); color: var(--text-high); font-family: var(--font-ui); font-size: 14px; font-weight: 700; } .ac-dev.is-sm { width: 40px; height: 40px; } .ac-dev.is-xs { width: 36px; height: 36px; } .ac-dev.is-lg { width: 52px; height: 52px; border-radius: var(--radius-lg); } .ac-dev.is-xl { width: 56px; height: 56px; border-radius: var(--radius-lg); } .ac-dev.is-hero { width: 64px; height: 64px; border-radius: var(--radius-lg); font-size: 20px; } .ac-dev.is-spin { width: 52px; height: 52px; border-radius: 50%; color: var(--gold-text); } .ac-dev.is-spin svg { animation: ac-spin var(--motion-spin) linear infinite; } @keyframes ac-spin { to { transform: rotate(360deg); } } .ac-fld { display: flex; width: 100%; min-height: var(--control-min); padding: 0 14px; align-items: center; gap: 10px; border: 1px solid var(--line-control); border-radius: var(--radius-sm); background: var(--surface-well); color: var(--text-high); font: 15px/1.4 'Nippo-Light', sans-serif; transition: border-color var(--motion-state) var(--ease-out-quart); } .ac-fld::placeholder { color: var(--text-faint); } .ac-fld:hover { border-color: var(--line-strong); } .ac-fld:focus-visible { border-color: var(--gold-line-strong); } .ac-fld[aria-invalid="true"] { border-color: var(--danger-line); } textarea.ac-fld { padding: 12px 14px; resize: none; } select.ac-fld { appearance: auto; } .ac-hwin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; direction: ltr; } .ac-hwin .ac-fld { width: 68px; padding: 0; text-align: center; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; } .ac-counter { align-self: flex-end; color: var(--text-faint); font-family: var(--font-ui); font-size: 12px; } .ac-field { display: flex; flex-direction: column; gap: 8px; } .ac-error-text { color: var(--danger); font-family: 'Nippo-Regular', sans-serif; font-size: 14px; } .ac-tick { width: 18px; flex: none; color: var(--success); font-family: var(--font-ui); font-weight: 700; } .ac-ticks { display: flex; flex-direction: column; gap: 10px; } .ac-ticks li { display: flex; gap: 10px; color: var(--text-body); font-family: 'Nippo-Light', sans-serif; font-size: 15px; line-height: 1.45; } .ac-ticks .ac-i { margin-top: 2px; color: var(--text-subtle); } .ac-radio { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--line-control); border-radius: var(--radius-md); background: var(--glass-1); cursor: pointer; transition: border-color var(--motion-fast) var(--ease-out-quart), background-color var(--motion-fast) var(--ease-out-quart); } .ac-radio:has(input:checked), .ac-radio.is-on { border-color: var(--gold-line-strong); background: var(--gold-tint); } .ac-radio input, .ac-chk input { width: 18px; height: 18px; flex: none; margin: 3px 0 0; accent-color: var(--gold); } .ac-radio.is-compact { padding: 14px 16px; } .ac-radio-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ac-radio-title { color: var(--text); font-size: 15px; } .ac-radio-title.is-lg { font-size: 16px; } .ac-chk { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; } .ac-chk input { margin-top: 2px; } /* Status banner: a line of copy beside an icon, tinted by tone. */ .ac-banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--glass-2); color: var(--text-soft); } .ac-banner .ac-i { margin-top: 1px; } .ac-banner-text { color: var(--text-high); font-family: 'Nippo-Regular', sans-serif; font-size: 14px; line-height: 1.5; } .ac-banner.is-info { border-color: var(--info-line); background: var(--info-tint); color: var(--info); } .ac-banner.is-bad { border-color: var(--danger-line); background: var(--danger-tint); color: var(--danger); } /* The device period bar: a track, the elapsed fill and a gold marker for today. */ .ac-trk { position: relative; height: 6px; border-radius: var(--radius-pill); background: var(--glass-3); } .ac-trk.is-inset { margin: 8px 7px; } .ac-trk-f { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; border-radius: var(--radius-pill); background: var(--line-overlay); } .ac-trk-f.is-gold { background: var(--gold); } .ac-trk-m, .ac-trk-e { position: absolute; top: 50%; border-radius: 50%; transform: translateY(-50%); } .ac-trk-m { width: 14px; height: 14px; margin-inline-start: -7px; background: var(--gold); box-shadow: 0 0 0 4px var(--ac-ring, var(--surface-card)); } .ac-trk-e { width: 10px; height: 10px; margin-inline-start: -5px; background: var(--text-high); box-shadow: 0 0 0 4px var(--ac-ring, var(--surface-card)); } .ac-trk-e.is-end { background: var(--line-hover); } .ac-well-period { --ac-ring: var(--surface-well); display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--line-faint); border-radius: var(--radius-lg); background: var(--surface-well); } .ac-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .ac-timeline li { display: flex; flex-direction: column; gap: 4px; } .ac-timeline li:nth-child(2) { text-align: center; } .ac-timeline li:nth-child(3) { text-align: end; } .ac-num.is-date { color: var(--text-high); font-size: 13px; } .ac-num.is-today { color: var(--gold-text); font-size: 13px; } .ac-num.is-meta { color: var(--text-faint); font-size: 12px; } /* Numbered step markers. */ .ac-stepnum { display: inline-flex; width: 24px; height: 24px; flex: none; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--text-high); font-family: var(--font-ui); font-size: 12px; } .ac-stepnum.is-gold { width: 28px; height: 28px; border-color: var(--gold-line); color: var(--gold-text); font-size: 13px; font-weight: 600; } .ac-numbered { display: flex; flex-direction: column; gap: 12px; } .ac-numbered li { display: flex; gap: 12px; align-items: flex-start; } .ac-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 0 12px; } .ac-steps li { display: flex; flex-direction: column; gap: 10px; padding: 24px; } .ac-steps li + li { border-inline-start: 1px solid var(--line-faint); } /* A quantity stepper: minus, the count, plus. */ .ac-stepper { display: inline-flex; flex: none; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line-control); border-radius: var(--radius-lg); background: var(--surface-well); } .ac-stepper output { min-width: 48px; color: var(--text); font-family: var(--font-ui); font-size: 22px; font-weight: 600; text-align: center; } .ac-stepper .ac-ib { border-color: transparent; } /* ---------------------------------------------------------------- Layout primitives */ .ac-stack { display: flex; flex-direction: column; } .ac-row { display: flex; align-items: center; } .ac-wrap { flex-wrap: wrap; } .ac-between { justify-content: space-between; } .ac-end { justify-content: flex-end; } .ac-top { align-items: flex-start; } .ac-base { align-items: baseline; } .ac-grow { flex-grow: 1; min-width: 0; } .ac-push { margin-top: auto; } /* The text of an icon, text and action row: it keeps the icon's line on a phone and lets the action wrap under it instead. */ .ac-fill { flex: 1 1 220px; min-width: 0; } .ac-g2 { gap: 2px; } .ac-g4 { gap: 4px; } .ac-g6 { gap: 6px; } .ac-g8 { gap: 8px; } .ac-g10 { gap: 10px; } .ac-g12 { gap: 12px; } .ac-g14 { gap: 14px; } .ac-g16 { gap: 16px; } .ac-g18 { gap: 18px; } .ac-g20 { gap: 20px; } .ac-g22 { gap: 22px; } .ac-g24 { gap: 24px; } .ac-g28 { gap: 28px; } .ac-g32 { gap: 32px; } .ac-g40 { gap: 40px; } .ac-pad-20 { padding: 20px; } .ac-pad-24 { padding: 24px; } .ac-pad-28 { padding: 28px; } .ac-pad-32 { padding: 32px; } .ac-grid { display: grid; gap: 20px; } .ac-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ac-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ac-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ac-split-overview { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .ac-split-sub { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; } .ac-split-license { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; } .ac-split-checkout { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px; align-items: start; } .ac-split-release { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: center; } .ac-split-pay { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: stretch; } .ac-split-stripe { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 40px; } .ac-stretch { align-items: stretch; } .ac-start { align-items: start; } /* ---------------------------------------------------------------- Shell */ .ac-shell { position: relative; z-index: 1; display: flex; min-height: 100dvh; flex-direction: column; } .ac-hdr { position: sticky; top: 0; z-index: var(--layer-sticky); display: flex; height: 72px; padding: 0 28px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line-header); background: var(--surface-header); backdrop-filter: blur(var(--blur-header)); } .ac-hdr-brand { display: flex; align-items: center; gap: 20px; } .ac-logo { display: block; width: 113px; height: 41px; } .ac-hdr-sep { width: 1px; height: 28px; background: var(--line-strong); } .ac-hdr-label { color: var(--text-soft); font-family: 'Nippo-Light', sans-serif; font-size: 15px; } .ac-hdr-actions { position: relative; display: flex; align-items: center; gap: 8px; } .ac-user { gap: 10px; padding: 6px 10px; padding-inline-start: 6px; } .ac-user-name { color: var(--text-high); } .ac-menu { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: var(--layer-popover); display: flex; min-width: 264px; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--line-control); border-radius: var(--radius-md); background: var(--surface-popover); box-shadow: var(--shadow-popover); } .ac-menu a, .ac-menu button { display: flex; min-height: var(--control-min); padding: 10px 12px; align-items: center; gap: 12px; border-radius: var(--radius-xs); color: var(--text-soft); font-family: 'Nippo-Light', sans-serif; font-size: 15px; text-align: start; text-decoration: none; } .ac-menu a:hover, .ac-menu button:hover, .ac-menu a:focus-visible, .ac-menu button:focus-visible { background: var(--glass-3); color: var(--text); } /* The theme switch in the account menu: three equal segments. */ .ac-theme { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px 12px; margin-block-end: 4px; border-block-end: 1px solid var(--line); } .ac-theme-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 3px; border: 1px solid var(--line-control); border-radius: var(--radius-sm); background: var(--surface-well); } .ac-menu .ac-theme-seg button { min-height: 54px; padding: 6px 4px; flex-direction: column; justify-content: center; gap: 4px; line-height: 1.2; text-align: center; border-radius: var(--radius-xs); font-size: 13px; transition: background-color var(--motion-fast) var(--ease-out-quart), color var(--motion-fast) var(--ease-out-quart); } .ac-menu .ac-theme-seg button[aria-pressed="true"] { background: var(--surface-card); box-shadow: var(--shadow-control); color: var(--text); } /* The theme switch (lib/theme.js) cross-fades the whole page in place, header and work area alike, instead of playing the page change (Motion). */ .is-theme-switch::view-transition-group(*) { animation-duration: 0s; } .is-theme-switch::view-transition-old(*) { animation: ac-page-out var(--motion-state) linear both; } .is-theme-switch::view-transition-new(*) { animation: ac-page-out var(--motion-state) linear reverse both; } .ac-body { display: flex; flex-grow: 1; min-height: 0; } .ac-rail { position: sticky; top: 72px; display: flex; width: 248px; height: calc(100dvh - 72px); flex: none; flex-direction: column; justify-content: space-between; gap: 24px; padding: 28px 16px; overflow-y: auto; border-inline-end: 1px solid var(--line-faint); } .ac-nav { display: flex; flex-direction: column; gap: 4px; } .ac-nav a { display: flex; min-height: var(--control-min); padding: 10px 14px; align-items: center; gap: 12px; border-radius: var(--radius-xs); color: var(--text-soft); font-family: 'Nippo-Light', sans-serif; font-size: 15px; text-decoration: none; transition: background-color var(--motion-state) var(--ease-out-quart), color var(--motion-state) var(--ease-out-quart); } .ac-nav button { display: flex; min-height: var(--control-min); padding: 10px 14px; align-items: center; gap: 12px; border-radius: var(--radius-xs); color: var(--text-soft); font-family: 'Nippo-Light', sans-serif; font-size: 15px; text-align: start; } .ac-nav button:hover, .ac-nav a:hover { background: var(--glass-3); color: var(--text); } .ac-nav a[aria-current="page"] { position: relative; isolation: isolate; color: var(--gold-text); font-family: 'Nippo-Regular', sans-serif; } .ac-nav a[aria-current="page"]:hover { background: none; } /* The current item's gold marker (scripts/account-pages.mjs). */ .ac-nav-mark { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--gold-tint-strong); } .ac-nav .ac-cnt, .ac-nav .ac-badge { margin-inline-start: auto; } .ac-rail-plan { display: flex; flex-direction: column; gap: 6px; padding: 16px; } .ac-rail-plan-name { font-family: 'Nippo-Medium', sans-serif; font-size: 16px; text-wrap: balance; } .ac-rail-plan [data-rail-sub] { text-wrap: balance; } .ac-tabs { display: none; } .ac-main { display: flex; width: 100%; max-width: 1320px; min-width: 0; flex-direction: column; gap: 40px; padding: 44px 56px 72px; } .ac-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; } .ac-head-text { display: flex; max-width: 720px; flex-direction: column; gap: 12px; } .ac-head-actions { display: flex; flex-wrap: wrap; gap: 10px; } .ac-head.is-detail { margin-top: -16px; } .ac-crumbs { display: flex; align-items: center; gap: 8px; } .ac-crumbs [aria-current] { color: var(--text-high); } .ac-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .ac-section { display: flex; flex-direction: column; gap: 20px; } .ac-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 22px 24px 14px; } .ac-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-top: 1px solid var(--line-faint); } .ac-divided > li, .ac-divided > div { border-top: 1px solid var(--line-faint); } /* ---------------------------------------------------------------- Tables */ .ac-table-wrap { overflow-x: auto; } .ac-table { width: 100%; border-collapse: collapse; } .ac-table th { padding: 0 12px 12px; text-align: start; } .ac-table th:first-child, .ac-table td:first-child { padding-inline-start: 24px; } .ac-table th:last-child, .ac-table td:last-child { padding-inline-end: 24px; } .ac-table.is-spaced thead th { padding-top: 18px; padding-bottom: 14px; } .ac-table td { padding: 16px 12px; vertical-align: middle; } .ac-table.is-roomy td { padding-top: 20px; padding-bottom: 20px; } .ac-table tbody tr { border-top: 1px solid var(--line-faint); } .ac-table .ac-cell-end { text-align: end; white-space: nowrap; } .ac-table .ac-cell-num { color: var(--text-high); font-family: var(--font-ui); font-size: 14px; white-space: nowrap; } .ac-table .ac-cell-copy { color: var(--text-soft); font-family: 'Nippo-Light', sans-serif; font-size: 15px; } .ac-subtle-line { margin-top: 4px; color: var(--text-subtle); font-size: 12px; } /* ---------------------------------------------------------------- Components */ .ac-plan { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; } .ac-plan-name { font-family: 'Nippo-Medium', sans-serif; font-size: 24px; } .ac-meta { color: var(--text-soft); font-family: var(--font-ui); font-size: 14px; } .ac-attn li { display: flex; padding: 20px 24px; align-items: center; gap: 18px; border-top: 1px solid var(--line-faint); } .ac-attn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ac-devcard { display: flex; height: 100%; flex-direction: column; gap: 20px; padding: 24px; } .ac-devcard-head { display: flex; align-items: flex-start; gap: 14px; } .ac-devcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ac-subcard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 20px; align-items: center; padding: 20px 24px; text-decoration: none; transition: border-color var(--motion-state) var(--ease-out-quart); } a.ac-subcard:hover, a.ac-card:hover, a.ac-panel:hover { border-color: var(--line-strong); } .ac-subline { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 18px; align-items: center; padding: 16px 24px; border-top: 1px solid var(--line-faint); } .ac-mini { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 20px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line-faint); } .ac-mini-price { min-width: 96px; color: var(--text-high); font-family: var(--font-ui); font-size: 14px; text-align: end; } .ac-invite-row { padding: 16px 24px 22px; } .ac-invite-title { color: var(--text); font-size: 16px; } .ac-hi-soft { color: var(--text-soft); font-size: 13px; } .ac-pad-16 { padding: 14px 16px; } .ac-sm-14 { font-size: 14px; } .ac-gold { color: var(--gold-text); } .ac-assign { justify-content: space-between; padding-inline-start: 6px; } .ac-panel-title { padding: 22px 24px 8px; } .ac-panel-foot.is-note { justify-content: flex-start; } @media (min-width: 901px) { .ac-table-wrap.ac-overflow-visible { overflow: visible; } } .ac-pad-18 { padding: 18px 20px; border-radius: var(--radius-lg); } .ac-sm-13 { font-size: 13px; } .ac-nowrap { white-space: nowrap; } .ac-manage { padding-bottom: 12px; } .ac-manage > .ac-h2 { margin-bottom: 8px; } .ac-buyrow { align-items: center; gap: 24px; padding: 22px; cursor: default; } .ac-center { text-align: center; } .ac-divided-row { padding: 14px 0; border-top: 1px solid var(--line-faint); } .ac-kv > div { display: flex; padding: 14px 0; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line-faint); } .ac-kv dt { flex: none; } .ac-kv dd { min-width: 0; color: var(--text-high); font-size: 15px; text-align: end; } .ac-stat { display: flex; flex-direction: column; gap: 6px; } .ac-stat-value { color: var(--text); font-family: var(--font-ui); font-size: 26px; font-weight: 600; } .ac-stat-value.is-md { font-size: 22px; } .ac-unit { color: var(--text-soft); font-size: 14px; font-weight: 400; } .ac-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px var(--success-tint); } .ac-dot.is-muted { background: var(--text-faint); box-shadow: 0 0 0 4px var(--glass-3); } .ac-dot.is-bad { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-tint); } .ac-statcard-value { color: var(--text); font-family: var(--font-ui); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; } .ac-bignum { font-family: var(--font-ui); font-size: 40px; font-weight: 600; letter-spacing: -0.02em; } .ac-price { font-family: var(--font-ui); font-size: 44px; font-weight: 600; letter-spacing: -0.02em; } .ac-price.is-md { font-size: 34px; } .ac-price.is-total { font-size: 32px; } .ac-tier-name { color: var(--text-display); font-family: 'Nippo-Bold', sans-serif; font-size: 36px; letter-spacing: -0.02em; } .ac-roles > div { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; } .ac-roles > div + div { border-inline-start: 1px solid var(--line-faint); } .ac-shared { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 18px 24px; border-top: 1px solid var(--line-faint); } .ac-shared > .ac-st { justify-self: start; } .ac-danger-row { display: flex; padding: 18px 24px; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line-faint); } .ac-cell-rel { position: relative; } .ac-pop { position: absolute; top: calc(100% - 4px); inset-inline-start: 12px; z-index: var(--layer-popover); display: flex; width: min(360px, 80vw); flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface-popover); box-shadow: var(--shadow-popover); } .ac-pop [role="option"], .ac-pop [role="menuitem"] { display: flex; gap: 12px; padding: 12px; border-radius: var(--radius-sm); color: var(--text); text-align: start; cursor: pointer; } .ac-pop [role="option"]:hover, .ac-pop [role="option"]:focus-visible, .ac-pop [role="menuitem"]:hover, .ac-pop [role="menuitem"]:focus-visible { background: var(--glass-3); } .ac-pop [aria-selected="true"] { background: var(--gold-tint-strong); color: var(--gold-text); } .ac-pop.is-menu { width: auto; min-width: 220px; inset-inline-start: auto; inset-inline-end: 12px; border-radius: var(--radius-md); } .ac-pop-check { width: 18px; flex: none; color: var(--gold-text); } .ac-pop-foot { padding: 8px 12px 6px; border-top: 1px solid var(--line-faint); } .ac-media { overflow: hidden; border: 1px solid var(--line-frame); border-radius: var(--radius-xl); background: var(--surface-well); } .ac-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } /* The collapsible plan comparison, fed by the same rows as the home page. */ .ac-compare { overflow: hidden; } .ac-compare summary { display: flex; min-height: var(--control-min); padding: 20px 24px; align-items: center; justify-content: space-between; gap: 16px; list-style: none; cursor: pointer; } .ac-compare summary::-webkit-details-marker { display: none; } .ac-compare-toggle .ac-i { transition: transform var(--motion-state) var(--ease-out-quart); } .ac-compare[open] .ac-compare-toggle .ac-i { transform: rotate(180deg); } .ac-compare-label-open, .ac-compare[open] .ac-compare-label-closed { display: none; } .ac-compare[open] .ac-compare-label-open { display: inline; } .ac-compare table { border-top: 1px solid var(--line-faint); } .ac-compare thead th { padding: 16px; text-align: center; } .ac-compare thead th:first-child { width: 46%; padding-inline-start: 24px; text-align: start; } .ac-compare .is-ultimate { background: var(--gold-wash); } .ac-compare thead .is-ultimate { color: var(--gold-text); } .ac-compare .ac-compare-group th { padding: 22px 16px 8px 24px; text-align: start; } .ac-compare tbody tr:not(.ac-compare-group) { border-top: 1px solid var(--line-faint); } .ac-compare tbody th[scope="row"] { padding: 11px 16px; padding-inline-start: 24px; color: var(--text-body); font-family: 'Nippo-Light', sans-serif; font-size: 14px; font-weight: 400; text-align: start; } .ac-compare td { padding: 11px 16px; color: var(--text-high); font-family: var(--font-ui); font-size: 13px; text-align: center; } .ac-compare .ac-yes { color: var(--success); font-weight: 700; } .ac-compare .ac-no { color: var(--text-faint); } /* ---------------------------------------------------------------- Dialogs */ .ac-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 28px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface-popover); color: var(--text); box-shadow: var(--shadow-popover); } .ac-dialog.is-wide { width: min(640px, calc(100vw - 32px)); } .ac-dialog::backdrop { background: var(--scrim); } .ac-dialog[open] { animation: ac-dialog-in var(--motion-swap) var(--ease-out-expo); } /* Leaving is quicker than arriving. lib/dialog.js keeps the closed dialog in the document long enough for this to play. */ .ac-dialog, .ac-dialog::backdrop { transition: opacity var(--motion-fast) var(--ease-out-quart), translate var(--motion-fast) var(--ease-out-quart), overlay var(--motion-fast) allow-discrete, display var(--motion-fast) allow-discrete; } .ac-dialog:not([open]) { opacity: 0; translate: 0 4px; } .ac-dialog:not([open])::backdrop { opacity: 0; } @starting-style { .ac-dialog[open]::backdrop { opacity: 0; } } @keyframes ac-dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } .ac-dialog-body { display: flex; flex-direction: column; gap: 20px; } .ac-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .ac-dialog-head .ac-ib { margin-top: -8px; margin-inline-end: -8px; } .ac-dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding-top: 4px; } .ac-strike { color: var(--text-subtle); text-decoration: line-through; } /* ---------------------------------------------------------------- States */ .ac-state { display: flex; flex-direction: column; gap: 18px; padding: 28px; background: var(--surface-card); } .ac-state.is-lg { gap: 22px; padding: 32px; } .ac-state-wrap { width: 100%; max-width: 560px; } /* Loading skeletons (scripts/account-pages.mjs). They sit in the page's real grids and panels, so only the bones stand in for data. One slow breath rather than a sweep: the portal is a workbench, not a feed. */ .ac-skeleton { display: contents; } .ac-skel { display: block; height: var(--h, auto); border-radius: var(--radius-sm); background: var(--skel-bone); } /* A heading's bones are sized against the full width, not the shrink-wrapped text. */ .ac-head-text:has(> .ac-skel) { flex: 1 1 0; min-width: 0; } .ac-skel.is-text { width: var(--w, 100%); height: 12px; border-radius: var(--radius-pill); } .ac-skel.is-title { width: var(--w, 60%); height: clamp(34px, 3.4vw, 48px); margin-block: 4px; } .ac-skel.is-title.is-detail { height: clamp(28px, 2.6vw, 38px); } .ac-skel.is-h2 { width: var(--w, 180px); max-width: 60%; height: 20px; } .ac-skel.is-icon { flex: none; width: 44px; height: 44px; border-radius: var(--radius-md); } .ac-skel.is-icon.is-round { width: 56px; height: 56px; border-radius: 50%; } .ac-skel.is-chip { flex: none; width: 76px; height: 26px; border-radius: var(--radius-pill); } .ac-skel.is-chip.is-pill { width: 112px; height: var(--control-min); } .ac-skel.is-btn { flex: none; width: var(--w, 148px); height: var(--control-min); } .ac-skel.is-btn.is-wide { width: 100%; } .ac-skel.is-bar { height: 6px; border-radius: var(--radius-pill); } .ac-skel.is-block { height: var(--h, 140px); } .ac-skel-row { display: flex; padding: 18px 24px; align-items: center; gap: 16px; border-block-start: 1px solid var(--line-faint); } .ac-panel-head + .ac-skel-row, .ac-panel > .ac-skel-row:first-child { border-block-start: 0; } @media (prefers-reduced-motion: no-preference) { .ac-skel { animation: ac-pulse 1.8s var(--ease-out-quart) infinite; } /* Rows breathe a beat apart, so a list reads as a list while it waits. */ .ac-skel-row:nth-child(2n) .ac-skel { animation-delay: 160ms; } .ac-skel-row:nth-child(3n) .ac-skel { animation-delay: 320ms; } } @keyframes ac-pulse { 50% { opacity: 0.4; } } /* The page's first content replaces its skeleton with a short fade, never a jump. */ @media (prefers-reduced-motion: no-preference) { .ac-slot.is-revealing > * { animation: ac-reveal var(--motion-state) var(--ease-out-expo) both; } } @keyframes ac-reveal { from { opacity: 0; } } .ac-toast { position: fixed; bottom: 24px; inset-inline-start: 50%; z-index: var(--layer-popover); max-width: min(480px, calc(100vw - 32px)); padding: 12px 18px; border: 1px solid var(--line-control); border-radius: var(--radius-md); background: var(--surface-popover); color: var(--text-high); font-size: 14px; box-shadow: var(--shadow-popover); transform: translateX(-50%); transition: opacity var(--motion-state) var(--ease-out-quart), translate var(--motion-state) var(--ease-out-expo); } [dir="rtl"] .ac-toast { transform: translateX(50%); } .ac-toast:empty { opacity: 0; translate: 0 8px; pointer-events: none; } .ac-toast.is-bad { border-color: var(--danger-line); color: var(--danger); } /* ---------------------------------------------------------------- Sign in */ .ac-signin { display: flex; min-height: 100dvh; flex-direction: column; } .ac-signin-top { display: flex; padding: 28px 48px; align-items: center; justify-content: space-between; gap: 16px; } .ac-signin-main { display: grid; flex-grow: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 96px; align-items: center; width: 100%; max-width: 1440px; margin: 0 auto; padding: 24px 120px; } .ac-signin-main.is-state { display: flex; justify-content: center; } .ac-signin-copy { display: flex; max-width: 540px; flex-direction: column; gap: 28px; } .ac-showcase-frame { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--line-frame); border-radius: var(--radius-xl); background: var(--surface-well); } .ac-signin-foot { display: flex; padding: 22px 48px; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line-faint); } .ac-signin-foot nav { display: flex; flex-wrap: wrap; gap: 4px; } .ac-signin-foot .ac-qt { font-size: 14px; } .ac-logo-sm { display: block; width: 90px; height: 33px; } .ac-showcase-plan { padding: 18px 20px; border-radius: var(--radius-lg); } .ac-showcase-row { padding: 18px 24px; } .ac-w-47 { width: 47%; } .ac-w-60 { width: 60%; } .ac-divided-row.is-tight { padding: 12px 0; } .ac-at-47 { inset-inline-start: 47%; } /* ---------------------------------------------------------------- Writing systems */ [data-script]:not([data-script="latin"]) .ac-h1, [data-script]:not([data-script="latin"]) .ac-h2, [data-script]:not([data-script="latin"]) .ac-tier-name, [data-script]:not([data-script="latin"]) .ac-plan-name { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; } [data-script]:not([data-script="latin"]) .ac-h3, [data-script]:not([data-script="latin"]) .ac-lbl, [data-script]:not([data-script="latin"]) .ac-strong, [data-script]:not([data-script="latin"]) .ac-btn { font-weight: 600; } /* The script stacks win every rule in styles.css; hardware IDs stay monospaced. */ [data-script]:not([data-script="latin"]) .ac-mono, [data-script]:not([data-script="latin"]) .ac-seg, [data-script]:not([data-script="latin"]) .ac-hwin .ac-fld { font-family: var(--font-mono); } [data-script]:not([data-script="latin"]) .ac-ov { letter-spacing: 0; } /* ---------------------------------------------------------------- Responsive */ @media (max-width: 1200px) { .ac-main { padding-inline: 36px; } .ac-split-overview, .ac-split-sub, .ac-split-license, .ac-split-checkout, .ac-split-release, .ac-split-pay, .ac-split-stripe { grid-template-columns: minmax(0, 1fr); } .ac-cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .ac-signin-main { gap: 56px; padding-inline: 48px; } } @media (max-width: 900px) { .ac-wide-only { display: none !important; } .ac-hdr { height: 64px; padding: 0 16px; } .ac-logo { width: 88px; height: 32px; } .ac-rail { display: none; } .ac-tabs { display: flex; gap: 8px; padding: 14px 16px; overflow-x: auto; border-bottom: 1px solid var(--line-faint); scrollbar-width: none; } .ac-tabs .ac-pill { flex: none; } .ac-main { gap: 28px; padding: 28px 16px 48px; } .ac-h1 { font-size: 32px; } .ac-h1.is-detail { font-size: 30px; } .ac-head { flex-direction: column; align-items: stretch; gap: 20px; } .ac-head.is-detail { margin-top: 0; } .ac-plan { flex-direction: column; align-items: stretch; padding: 20px; } .ac-plan .ac-gh { width: 100%; } .ac-attn li { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 18px; } .ac-release { flex-direction: column; align-items: stretch; } .ac-release .ac-btn { width: 100%; } .ac-attn li > .ac-dev { display: none; } .ac-cols-2, .ac-cols-3, .ac-cols-4, .ac-steps, .ac-roles { grid-template-columns: minmax(0, 1fr); } .ac-steps li + li, .ac-roles > div + div { border-inline-start: 0; border-top: 1px solid var(--line-faint); } .ac-subcard, .ac-subline { grid-template-columns: auto minmax(0, 1fr); } .ac-subcard > :nth-child(n + 3), .ac-subline > :nth-child(n + 3) { grid-column: 2; } .ac-shared { grid-template-columns: minmax(0, 1fr); gap: 14px; } .ac-mini { grid-template-columns: minmax(0, 1fr) auto; } .ac-mini .ac-st { display: none; } .ac-danger-row, .ac-panel-foot { flex-direction: column; align-items: flex-start; } .ac-panel-foot.is-note { flex-direction: row; } .ac-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .ac-timeline .ac-sm { display: none; } .ac-seg.is-big { min-width: 58px; padding: 7px 9px; font-size: 14px; } .ac-hwsegs .ac-dash { display: none; } .ac-signin-top { padding: 24px 16px 0; } .ac-signin-main { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 24px 16px; } .ac-signin-main > [data-showcase] { display: none; } .ac-signin-copy { gap: 22px; } .ac-signin-copy .ac-btn { width: 100%; } .ac-signin-foot { justify-content: center; padding: 16px; } .ac-signin-foot > .ac-sm { display: none; } .ac-dialog { padding: 22px; } .ac-table th:first-child, .ac-table td:first-child { padding-inline-start: 16px; } } /* Narrow tables (.is-stack) become one card per row: the first cell is the row's title, every other cell carries its column's name, and the row's open or more button sits in the corner. */ @media (max-width: 760px) { .ac-table-wrap:has(> .ac-table.is-stack) { overflow: visible; } .ac-table.is-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ac-table.is-stack, .ac-table.is-stack tbody, .ac-table.is-stack td { display: block; } .ac-table.is-stack tr { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 18px 16px; } .ac-table.is-stack td, .ac-table.is-stack td:first-child, .ac-table.is-stack td:last-child { min-width: 0; padding: 0; } .ac-table.is-stack td:first-child, .ac-table.is-stack td.is-wide { grid-column: 1 / -1; } .ac-table.is-stack td:empty { display: none; } .ac-table.is-stack .ac-cell-end { text-align: start; } .ac-table.is-stack td.is-corner { position: absolute; top: 14px; inset-inline-end: 12px; } .ac-table.is-stack tr:has(> td.is-corner:not(:empty)) > td:first-child { padding-inline-end: 56px; } .ac-table.is-stack td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 6px; color: var(--text-subtle); font-family: var(--font-ui); font-size: 12px; font-weight: 600; } } @media (max-width: 560px) { .ac-dialog-foot > * { flex-grow: 1; } /* Manage rows: the action moves under its text instead of squeezing it. */ .ac-manage-row { flex-wrap: wrap; } .ac-manage-row > .ac-grow { flex-basis: calc(100% - 38px); } .ac-manage-row > :last-child { margin-inline-start: 38px; } /* Buy rows: the stepper sits under the description. */ .ac-buyrow { flex-wrap: wrap; } .ac-buyrow > .ac-grow { flex-basis: 100%; } .ac-stepper output { min-width: 36px; } .ac-head-actions > * { flex-grow: 1; } } /* The two return pages (a Stripe payment, a Patreon link) are one moment each: the card sits in the middle of the work area, centred and a size up, not in its top corner. */ .ac-page:is([data-page="checkoutReturn"], [data-page="patreonReturn"]) .ac-main { min-height: calc(100dvh - 160px); align-items: center; justify-content: center; } .ac-page:is([data-page="checkoutReturn"], [data-page="patreonReturn"]) .ac-state-wrap { max-width: 540px; } .ac-page:is([data-page="checkoutReturn"], [data-page="patreonReturn"]) .ac-state { align-items: center; gap: 16px; padding: 44px 40px 40px; text-align: center; } .ac-page:is([data-page="checkoutReturn"], [data-page="patreonReturn"]) .ac-state > * { align-self: center; } .ac-page:is([data-page="checkoutReturn"], [data-page="patreonReturn"]) .ac-state .ac-h2 { font-size: clamp(24px, 2.4vw, 30px); } .ac-page:is([data-page="checkoutReturn"], [data-page="patreonReturn"]) .ac-state > .ac-row { justify-content: center; margin-block-start: 8px; } .ac-page:is([data-page="checkoutReturn"], [data-page="patreonReturn"]) .ac-dev.is-spin { width: 64px; height: 64px; margin-block-end: 4px; } /* Licenses the user only sees through a team (pages/licenses.js), folded away. */ .ac-team-shared > summary { cursor: pointer; list-style: none; } .ac-team-shared > summary::-webkit-details-marker { display: none; } .ac-team-shared > summary > .ac-i { flex: none; color: var(--text-faint); transition: transform var(--motion-state) var(--ease-out-expo); } .ac-team-shared[open] > summary > .ac-i { transform: rotate(180deg); } .ac-team-shared:not([open]) > summary { border-block-end: 0; } /* ---------------------------------------------------------------- Motion Moving between portal pages is the one moment the portal animates on its own. The header and the rail are the bench and hold still; the gold marker slides from the page you left to the page you opened, and only the work area changes, the old one stepping back quickly and the new one settling in. Cross-document view transitions, so a browser without them simply loads the page. */ @view-transition { navigation: auto; } .ac-hdr { view-transition-name: ac-hdr; } .ac-rail { view-transition-name: ac-rail; } .ac-tabs { view-transition-name: ac-tabs; } .ac-main { view-transition-name: ac-main; } .ac-nav-mark { view-transition-name: ac-nav-mark; } ::view-transition-group(ac-nav-mark) { animation-duration: var(--motion-layout); animation-timing-function: var(--ease-out-expo); } ::view-transition-old(ac-main) { animation: ac-page-out var(--motion-fast) var(--ease-out-quart) both; } ::view-transition-new(ac-main) { animation: ac-page-in var(--motion-swap) var(--ease-out-expo) both; } /* The page behind the work area does not cross-fade; it is the same page. */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; } @keyframes ac-page-out { to { opacity: 0; } } @keyframes ac-page-in { from { opacity: 0; transform: translateY(10px); } } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*) { animation-duration: 0s; } ::view-transition-new(ac-main) { animation-name: ac-page-out; animation-direction: reverse; } } /* After an action, the page on screen waits for its fresh copy slightly dimmed. */ .ac-main.is-refreshing [data-slot="page"] > * { opacity: 0.62; transition: opacity var(--motion-state) var(--ease-out-quart); } .ac-page .is-busy::after { content: ''; width: 14px; height: 14px; flex: none; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; } @media (prefers-reduced-motion: no-preference) { .ac-page .is-busy::after { animation: ac-spin var(--motion-spin) linear infinite; } } /* ---------------------------------------------------------------- Preferences */ @media (prefers-reduced-motion: reduce) { .ac-dev.is-spin svg { animation: none; } } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .ac-hdr, .ac-menu { background: var(--surface-header-solid); backdrop-filter: none; } } @media (prefers-contrast: more) { .ac-panel, .ac-card, .ac-pill, .ac-page .ac-gh, .ac-fld, .ac-well, .ac-radio, .ac-dialog, .ac-st { border-color: var(--line-contrast); } }