/* app.supercardsapp.com /share-card/ and /recover/ pages: ONE assembled stylesheet (Inter faces, the SuperCards family tokens and components, the icon motion, the app-page rules, RTL and no-JS rules). Files in /_a/v1/ never change in place: a change goes into a new versioned folder (v2, ...) (the CDN and browsers cache /_a/ for a year). */ /* ---- Inter (fonts/inter.css) ---- */ /* Inter (variable, wght 400-800 + opsz), self-hosted, SIL OFL 1.1: the website's three faces (latin, latin-ext-a, cyrillic; the same files as supercardsapp.com). latin-ext-a (U+0100-017F, U+0218-021B) carries the letters of cs hr hu pl ro sk sl tr (č ł ő ș ğ ...); a browser fetches a face only when the page uses one of its characters. The ext-a face comes first: where two ranges overlap (U+0131, U+0152-0153) the later latin face wins. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/_a/v1/fonts/inter-latin-ext-a-opsz-400-800.woff2') format('woff2'); unicode-range: U+0100-017F, U+0218-021B; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/_a/v1/fonts/inter-latin-opsz-400-800.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/_a/v1/fonts/inter-cyrillic-opsz-400-800.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* The metric-matched fallback: local Arial scaled to Inter's advance widths (size-adjust) with Inter's vertical metrics (ascender 1984, descender 494 of 2048 units, divided by the size-adjust), next in the --font stack. Until Inter arrives the text takes Inter's room, so the swap moves (almost) no line. One face per weight band: the variable Inter narrows with weight and optical size much more than Arial / Arial Bold does (Inter ÷ Arial = 105 % for body text, 99 % at 600, 97.5 % at 700, 86 % at 800; a single face made 800-weight headings wrap differently). A glyph Inter lacks (e.g. → U+2192) still falls through to the system font. */ @font-face { font-family: 'Inter Fallback'; font-weight: 100 549; src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Liberation Sans'); /* body text, 400–500 */ size-adjust: 105%; ascent-override: 92.26%; descent-override: 22.97%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0100-02BA, U+02BB-02BC, U+02BD-02C5, U+02C6, U+02C7-02CC, U+02CE-02D7, U+02DA, U+02DC, U+02DD-02FF, U+0301, U+0304, U+0308, U+0329, U+0400-045F, U+0490-0491, U+04B0-04B1, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+20A0-20AB, U+20AC, U+20AD-20C0, U+2113, U+2116, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter Fallback'; font-weight: 550 649; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Liberation Sans Bold'); /* 600 */ size-adjust: 99%; ascent-override: 97.85%; descent-override: 24.36%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0100-02BA, U+02BB-02BC, U+02BD-02C5, U+02C6, U+02C7-02CC, U+02CE-02D7, U+02DA, U+02DC, U+02DD-02FF, U+0301, U+0304, U+0308, U+0329, U+0400-045F, U+0490-0491, U+04B0-04B1, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+20A0-20AB, U+20AC, U+20AD-20C0, U+2113, U+2116, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter Fallback'; font-weight: 650 749; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Liberation Sans Bold'); /* 700 */ size-adjust: 97.5%; ascent-override: 99.36%; descent-override: 24.74%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0100-02BA, U+02BB-02BC, U+02BD-02C5, U+02C6, U+02C7-02CC, U+02CE-02D7, U+02DA, U+02DC, U+02DD-02FF, U+0301, U+0304, U+0308, U+0329, U+0400-045F, U+0490-0491, U+04B0-04B1, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+20A0-20AB, U+20AC, U+20AD-20C0, U+2113, U+2116, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter Fallback'; font-weight: 750 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Liberation Sans Bold'); /* 800 */ size-adjust: 86%; ascent-override: 112.65%; descent-override: 28.05%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0100-02BA, U+02BB-02BC, U+02BD-02C5, U+02C6, U+02C7-02CC, U+02CE-02D7, U+02DA, U+02DC, U+02DD-02FF, U+0301, U+0304, U+0308, U+0329, U+0400-045F, U+0490-0491, U+04B0-04B1, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+20A0-20AB, U+20AC, U+20AD-20C0, U+2113, U+2116, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD; } /* ---- family.css ---- */ /* SuperCards family: the tokens, base and chrome shared with supercardsapp.com, guides. and help., pruned to what the two pages use. Prefix c- = shared. Dark mode = html.dark (init.js sets it from prefers-color-scheme). */ /* =========================================================== tokens */ :root { color-scheme: light; --bg: #FFFFFF; --ink: #444444; /* 9.74:1 */ --ink-strong: #36302F; /* 12.96:1 */ --ink-2: #766A6E; /* 5.18:1 on white, 4.71:1 on surface */ --ink-3: #7B7073; /* numerals, markers (4.6:1) */ --surface: #F5F4F2; --surface-2: #FAF9F7; --raised: #FFFFFF; /* panels, menus, dialogs */ --line: #E4E1DE; --line-strong: #D6D1CD; --card-edge: #E9E6E2; --sketch: #3F3B39; --crimson: #D21D45; /* actions only. white on it 5.25:1 */ --crimson-press: #B21638; --crimson-ink: #C01A40; /* crimson text on surface (5.6:1) */ --link: #B8183E; /* body links (6.3:1) */ --mark-bg: #FFE1E8; /* search hit highlight */ --check: #4FB58C; --nav-bg: rgba(255, 255, 255, .9); --navbtn-bg: rgba(210, 29, 69, .08); /* header secondary buttons (Ratgeber, Hilfe): crimson-ink on it 5.1:1 */ --navbtn-bg-hover: rgba(210, 29, 69, .13); /* SuperCards' own gradient (the App Store icon: magenta → crimson → orange) */ --sc-magenta: #D42E6B; --sc-crimson-hi: #EE4B55; --sc-orange: #FF8A47; /* icon tones: tinted disc + coloured line icon (icon ≥ 3:1 on its tint) */ --tone-crimson: #C01A40; --tint-crimson: #FCE9ED; --tone-orange: #C9501C; --tint-orange: #FFEFE5; --tone-magenta: #B3245B; --tint-magenta: #FBE8F0; --tone-green: #2B8460; --tint-green: #E4F4EC; --tone-blue: #3A5BB5; --tint-blue: #E9EEFA; --tone-violet: #6A4BC4; --tint-violet: #EFEBFA; --tone-amber: #9C6700; --tint-amber: #FFF3D6; --tone-teal: #137A80; --tint-teal: #E1F3F3; /* "Inter Fallback" = local Arial sized to Inter's metrics (the @font-face rules above), so the swap to Inter moves no line */ --font: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --gutter: clamp(1rem, 5vw, 2rem); --section: clamp(4.5rem, 10vw, 8.5rem); --wide: 72rem; --col: 68rem; --measure: 38rem; --shadow-device: 0 13px 34px rgba(0, 0, 0, .12); --shadow-float: 0 10px 26px rgba(25, 20, 35, .12), 0 2px 6px rgba(25, 20, 35, .06); --shadow-card: 0 1px 2px rgba(25, 20, 35, .04); --radius-plate: 2rem; --card-ratio: 1.586; /* ID-1 card */ --ease-out: cubic-bezier(.22, .8, .32, 1); } /* dark (guides + help keep their toggle; keys guides-theme / theme). Same tokens on both sites. */ html.dark { color-scheme: dark; --bg: #1A1918; --ink: #D9D4D1; --ink-strong: #F4F0ED; --ink-2: #ABA2A5; --ink-3: #8F8689; --surface: #252322; --surface-2: #211F1E; --raised: #252322; --line: #383533; --line-strong: #4A4643; --card-edge: #34312F; --crimson: #D21D45; --crimson-press: #B21638; --crimson-ink: #FF7A90; --link: #FF7A90; --mark-bg: rgba(255, 122, 144, .28); --nav-bg: rgba(26, 25, 24, .88); --navbtn-bg: rgba(255, 122, 144, .13); --navbtn-bg-hover: rgba(255, 122, 144, .2); --shadow-device: 0 13px 34px rgba(0, 0, 0, .5); --shadow-float: 0 10px 26px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3); --tone-crimson: #FF8098; --tint-crimson: rgba(255, 128, 152, .14); --tone-orange: #FFA06B; --tint-orange: rgba(255, 160, 107, .14); --tone-magenta: #F27AAA; --tint-magenta: rgba(242, 122, 170, .14); --tone-green: #6FD3A6; --tint-green: rgba(111, 211, 166, .13); --tone-blue: #8FA8F0; --tint-blue: rgba(143, 168, 240, .14); --tone-violet: #B4A0F2; --tint-violet: rgba(180, 160, 242, .14); --tone-amber: #F0C154; --tint-amber: rgba(240, 193, 84, .13); --tone-teal: #6CD0D4; --tint-teal: rgba(108, 208, 212, .13); } /* =========================================================== base */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 1.0625rem; line-height: 1.7; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } h1, h2, h3, h4 { color: var(--ink-strong); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; margin: 0; } p, li { text-wrap: pretty; } p { margin: 0; } img, svg { display: block; max-width: 100%; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } kbd { font-family: var(--font); } [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; border-radius: 8px; } html.dark :focus-visible { outline-color: #FF7A90; } [data-demo][tabindex="-1"]:focus { outline: none; } /* a demo stage that took the focus from its pause button at rest (main.js) */ /* skip link */ .c-skip { position: absolute; z-index: 60; inset-inline-start: 1rem; top: .75rem; padding: .7rem 1rem; border-radius: 12px; background: var(--raised); color: var(--ink-strong); font-weight: 600; text-decoration: none; box-shadow: var(--shadow-device); translate: 0 -200%; } .c-skip:focus { translate: 0 0; } /* =========================================================== shared type */ .c-kicker { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.1rem; color: var(--ink-2); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; } .c-kicker::before { content: ""; width: 1.75rem; height: 1px; background: currentColor; flex: none; } .c-lead { color: var(--ink-2); font-size: clamp(1.125rem, 1rem + .45vw, 1.3rem); line-height: 1.5; } /* line icons (lucide, the app's family): stroke from CSS, never inline */ .c-ico { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; } .c-glyph { flex: none; } /* =========================================================== header */ .c-brand { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; margin-inline-end: auto; text-decoration: none; color: var(--ink-strong); flex-shrink: 0; } .c-brand img { width: 2rem; height: 2rem; border-radius: 22.5%; box-shadow: 0 1px 3px rgba(160, 13, 87, .18); flex: none; } .c-brand__stack { display: flex; flex-direction: column; min-width: 0; } .c-brand__name { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; } /* =========================================================== store buttons: own, filled crimson, glyph + two lines */ .c-stores { display: flex; flex-wrap: wrap; gap: .75rem; } .c-store { display: inline-flex; align-items: center; gap: .65rem; min-height: 3.25rem; min-width: 10.25rem; padding: .45rem 1.15rem .45rem .95rem; background: var(--crimson); border: 1.5px solid var(--crimson); border-radius: 14px; box-shadow: 0 8px 20px rgba(210, 29, 69, .24); color: #fff; text-decoration: none; text-align: start; } .c-store:hover { background: var(--crimson-press); border-color: var(--crimson-press); } .c-store:focus-visible { border-radius: 14px; } .c-store svg { width: 1.5rem; height: 1.5rem; } .c-store[data-store="google_play"] svg { width: 1.3rem; height: 1.3rem; margin-inline: .1rem; } .c-store__text { display: flex; flex-direction: column; line-height: 1.12; } .c-store__small { font-size: .71875rem; font-weight: 500; letter-spacing: .01em; } .c-store__big { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.012em; } @media (prefers-reduced-motion: no-preference) { .c-store { transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s var(--ease-out); } .c-store:active { transform: scale(.97); } } /* this phone's store only (init.js sets html[data-os]; default = App Store) */ @media (max-width: 37.5rem) { .c-stores--device { justify-content: center; } .c-stores--device .c-store[data-store="google_play"] { display: none; } html[data-os="android"] .c-stores--device .c-store[data-store="google_play"] { display: inline-flex; } html[data-os="android"] .c-stores--device .c-store[data-store="app_store"] { display: none; } .c-stores--device .c-store { min-width: min(14.5rem, 100%); min-height: 3.5rem; justify-content: center; gap: .625rem; padding: .5rem 1.5rem; border-radius: 15px; } .c-stores--device .c-store svg { width: 1.625rem; height: 1.625rem; } .c-stores--device .c-store__small { font-size: .8125rem; } .c-stores--device .c-store__big { font-size: 1.1875rem; } } /* a programme as its card: brand colour (generated .br- class) + logo, ID-1 proportions */ .c-card { position: relative; display: grid; place-items: center; aspect-ratio: var(--card-ratio); border-radius: 9% / 14.3%; overflow: hidden; background: var(--brand, #F5F5F5); color: var(--brand-on, #fff); } .c-card img { width: 72%; height: 58%; object-fit: contain; } .c-card--tile { aspect-ratio: 83 / 54; border-radius: 6.72% / 10.33%; } .c-card--tile img { width: 70%; height: 70%; } .c-card--light { box-shadow: inset 0 0 0 1px var(--card-edge); } .c-card--nobrand { background: var(--crimson); color: #fff; } .c-card__name { padding: 0 10%; font-weight: 700; font-size: clamp(.8rem, 4cqi, 1.1rem); line-height: 1.15; text-align: center; overflow-wrap: anywhere; } /* margin sketches: grey line art, never over content (positions come from page CSS) */ .c-sketches { position: absolute; inset: 0; overflow: clip; pointer-events: none; z-index: 0; } .c-sk { position: absolute; width: var(--s, 7rem); height: auto; rotate: var(--r, 0deg); } @media (max-width: 74.99rem) { .c-sk--xl { display: none; } } html.dark .c-sk { filter: invert(.85); } /* =========================================================== app-download bar (Android + iOS non-Safari; app-banner.js) */ .c-appbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 50; display: flex; align-items: center; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--raised); color: var(--ink-strong); border-top: 1px solid var(--line); box-shadow: 0 -2px 12px rgba(0, 0, 0, .12); } @media (prefers-reduced-motion: no-preference) { .c-appbar:not([hidden]) { animation: c-appbar-in .3s var(--ease-out); } } @keyframes c-appbar-in { from { transform: translateY(100%); } to { transform: none; } } .c-appbar__close { flex: none; display: grid; place-items: center; width: 36px; height: 44px; border: 0; background: none; color: var(--ink-2); cursor: pointer; padding: 0; } .c-appbar__close svg { width: 18px; height: 18px; } .c-appbar__icon { flex: none; width: 48px; height: 48px; border-radius: 22.5%; } .c-appbar__text { flex: 1; min-width: 0; line-height: 1.3; } .c-appbar__name { font-size: .875rem; font-weight: 700; } .c-appbar__tag { font-size: .75rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .c-appbar__btn { flex: none; min-height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; background: var(--crimson); color: #fff; font-size: .875rem; font-weight: 600; text-decoration: none; } .c-appbar__btn:hover { background: var(--crimson-press); } .c-appbar__btn:focus-visible { border-radius: 999px; } html.has-appbar body { padding-bottom: 76px; } html.has-appbar { scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } @media print { .c-sketches, .c-appbar { display: none !important; } } /* print: a device frame or card is never split by a page break, and a demo stops where it is */ @media print { .c-card { break-inside: avoid; } [data-demo] * { animation-play-state: paused !important; } } /* ---- icons.css ---- */ /* SuperCards icon family (sci-) — own duotone icons, slightly animated. Markup: inline svg/.svg inside … (disc 44 px, icon 22 px). Colour: a palette class (sci-p-*) on the disc or any ancestor sets --ic-tone (stroke, via color), --ic-disc (disc + knockouts), --icon-tint (duotone fill). The tones ARE family.css's --tone-X and --tint-X (aliased below); without a palette class an icon uses currentColor. Motion (a slow loop with long pauses): every animation runs ONCE per .is-playing; icons.js adds it while the icon is in view, then again after a 6–9 s rest (page-wide 0.8–1.3 s apart, so neighbours never fire together), and at once on hover/focus of its host. transform/opacity only. Reduced motion = static. Dark: html.dark (same convention as the family rules above). */ /* =========================================================== tokens */ :root { --sci-stroke: 1.75; --sci-ease: cubic-bezier(.45, 0, .25, 1); } /* @palette-start — GENERATED by build.mjs from family.css's --tone-X and --tint-X (do not edit by hand) */ :root { --sci-page: var(--bg, #FFFFFF); --sci-crimson-disc: var(--tint-crimson, #FCE9ED); --sci-crimson-fill: #F0C0CA; --sci-magenta-disc: var(--tint-magenta, #FBE8F0); --sci-magenta-fill: #EDC1D2; --sci-orange-disc: var(--tint-orange, #FFEFE5); --sci-orange-fill: #F4CFBD; --sci-amber-disc: var(--tint-amber, #FFF3D6); --sci-amber-fill: #EBD7AB; --sci-teal-disc: var(--tint-teal, #E1F3F3); --sci-teal-fill: #B8DBDC; --sci-blue-disc: var(--tint-blue, #E9EEFA); --sci-blue-fill: #C6D1EC; --sci-violet-disc: var(--tint-violet, #EFEBFA); --sci-violet-fill: #D4CBEF; --sci-green-disc: var(--tint-green, #E4F4EC); --sci-green-fill: #BFDED0; --sci-brand: #D21D45; --sci-brand-disc: #FBEBEE; --sci-brand-stroke: url(#sci-brand); --sci-brand-fill: url(#sci-brand-soft); } html.dark { --sci-page: var(--bg, #1A1918); /* opaque discs = family.css's rgba(.13/.14) dark tints flattened on --bg (knockouts must paint an opaque colour) */ --sci-crimson-disc: #3A272A; --sci-crimson-fill: #683C44; --sci-magenta-disc: #38272C; --sci-magenta-fill: #633A4A; --sci-orange-disc: #3A2C24; --sci-orange-fill: #684734; --sci-amber-disc: #362F20; --sci-amber-fill: #63522C; --sci-teal-disc: #253130; --sci-teal-fill: #365758; --sci-blue-disc: #2A2D36; --sci-blue-fill: #424A61; --sci-violet-disc: #302C37; --sci-violet-fill: #4E4762; --sci-green-disc: #25312A; --sci-green-fill: #375848; --sci-brand: #FF7489; --sci-brand-disc: #3C2628; --sci-brand-stroke: url(#sci-brand-dk); --sci-brand-fill: url(#sci-brand-soft-dk); } /* =========================================================== base .sci[data-sci] (0,2,0) beats "context svg" rules such as .c-disc svg (0,1,1). */ .sci[data-sci] { display: inline-block; flex: none; vertical-align: middle; width: 1.5rem; height: 1.5rem; overflow: visible; fill: none; stroke: currentColor; stroke-width: var(--sci-stroke); stroke-linecap: round; stroke-linejoin: round; } .sci .sci-t { fill: var(--icon-tint, color-mix(in srgb, currentColor 20%, transparent)); fill-opacity: 1; } .sci .sci-s { fill: currentColor; fill-opacity: 1; stroke: none; } /* the palette's tone wins over page rules that colour every span in a block */ [class*="sci-p-"] > .sci[data-sci] { color: var(--ic-tone); } /* =========================================================== pivots (static, harmless without motion) */ .sci [class*="sci-"] { transform-box: fill-box; transform-origin: center; } .sci .sci-bubble { transform-origin: 30% 100%; } @keyframes sci-hop { 0%, 44%, 100% { transform: translateY(0); } 14% { transform: translateY(-1.5px); } 26% { transform: translateY(0); } 34% { transform: translateY(-.6px); } } @keyframes sci-nod { 0%, 56%, 100% { transform: rotate(0); } 18% { transform: rotate(-5deg); } 36% { transform: rotate(2.5deg); } } /* =========================================================== triggers (.is-playing, added by icons.js) */ @media (prefers-reduced-motion: no-preference) { .sci-note-important.is-playing .sci-bubble { animation: sci-nod 1.8s var(--sci-ease) 1 both; } .sci-note-important.is-playing .sci-q { animation: sci-hop 1.8s var(--sci-ease) .08s 1 both; } .sci-note-info.is-playing .sci-idot { animation: sci-hop 1.6s var(--sci-ease) 1 both; } } @media (prefers-reduced-motion: reduce) { .sci, .sci * { animation: none !important; } } /* ---- app-pages.css ---- */ /* The app host pages (share card, backup link) in the SuperCards family. Prefix ap- = app host pages. No inline style attributes: per-store colours are set at run time through the CSSOM (--brand on one element). */ /* =========================================================== app host chrome: the slim bar + the legal line */ .ap-page { background: var(--bg); } .ap-bar { position: relative; z-index: 2; } .ap-bar__in { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); height: 4rem; display: flex; align-items: center; gap: 1rem; } .ap-foot { border-top: 1px solid var(--line); background: var(--surface-2); } .ap-foot__in { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 1.25rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; color: var(--ink-2); font-size: .875rem; line-height: 1.5; } .ap-foot__in a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; } .ap-foot__in a:hover { color: var(--crimson-ink); text-decoration: underline; text-underline-offset: .2em; } .ap-foot__in span:first-child { margin-inline-end: auto; } @media (max-width: 37.49rem) { .ap-foot__in span:first-child { flex-basis: 100%; } .ap-foot__in { padding-top: .75rem; } } /* =========================================================== the hero: a DEDICATED phone and desktop view phone (html[data-os=ios|android]): share = greeting → the card big → the old install line → the app CTA; backup = greeting → "In SuperCards öffnen" first → the restore visual below. desktop: text + hand-off left, the card / the restore visual on a plate right. One grid, areas per page and device. */ .ap-hero { position: relative; overflow-x: clip; padding: .5rem 0 clamp(2.5rem, 6vw, 4.5rem); } .ap-hero__in { position: relative; z-index: 1; max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "card" "lead" "act"; } .ap-text { grid-area: text; } .ap-lead { grid-area: lead; } .ap-stage { grid-area: card; margin-top: 1.25rem; } .ap-act { grid-area: act; margin-top: 1rem; } .ap-text .c-kicker { margin-bottom: .6rem; } .ap-h1 { font-size: clamp(1.875rem, 1.25rem + 3.2vw, 3.4rem); letter-spacing: -0.032em; line-height: 1.05; } .ap-lead { margin-top: 1.1rem; max-width: 30rem; font-size: clamp(1rem, .95rem + .35vw, 1.25rem); line-height: 1.5; } /* share on a phone: the old install line sits right above the CTA it explains, centred like the actions */ html:not([data-os="desktop"]) .ap-page--share .ap-lead { text-align: center; margin-inline: auto; font-size: .9375rem; color: var(--ink-2); } /* backup on a phone: the action first, the visual after it */ .ap-page--recover .ap-hero__in { grid-template-areas: "text" "lead" "act" "card"; } .ap-page--recover .ap-lead { margin-top: .6rem; } .ap-page--recover .ap-act { margin-top: 1.5rem; } .ap-page--recover .ap-stage { margin-top: 2rem; } /* a desktop browser in a narrow window: text, card, then the hand-off */ html[data-os="desktop"] .ap-hero__in { grid-template-areas: "text" "lead" "card" "act"; } html[data-os="desktop"] .ap-page--recover .ap-hero__in { grid-template-areas: "text" "lead" "act" "card"; } html[data-os="desktop"] .ap-lead { margin-top: .7rem; } @media (min-width: 60rem) { .ap-hero { padding-top: clamp(1.5rem, 4vw, 3.5rem); } .ap-hero__in, html[data-os="desktop"] .ap-hero__in, html[data-os="desktop"] .ap-page--recover .ap-hero__in, .ap-page--recover .ap-hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 31rem); grid-template-areas: "text stage" "lead stage" "act stage" ". stage"; grid-template-rows: auto auto auto 1fr; column-gap: clamp(3rem, 7vw, 7rem); align-items: start; } .ap-text { padding-top: 2.25rem; } .ap-stage, .ap-page--recover .ap-stage { grid-area: stage; margin-top: 0; } .ap-act, .ap-page--recover .ap-act { margin-top: 2rem; } .ap-h1 { font-size: clamp(2.8rem, 1.6rem + 2.6vw, 3.9rem); } html:not([data-os="desktop"]) .ap-page--share .ap-lead { text-align: start; margin-inline: 0; font-size: 1.125rem; } } /* the stage: a quiet plate the card rests on (desktop), plain on phones */ .ap-stage__plate { position: relative; } @media (min-width: 60rem) { .ap-stage__plate { display: grid; place-items: center; padding: 3.25rem 2.5rem 2.25rem; background: var(--surface); border: 1px solid var(--card-edge); border-radius: var(--radius-plate); } .ap-stage__plate .c-sketches { z-index: 0; } } /* margin sketches: in the page margins beside the hero (c-sk--xl: from 75rem only), never over the card */ .ap-sk--a { --s: 6.5rem; --r: -12deg; inset-inline-start: max(.75rem, calc(50% - 46.5rem)); top: 5.5rem; } .ap-sk--b { --s: 6rem; --r: 10deg; inset-inline-end: max(.75rem, calc(50% - 46.5rem)); bottom: 3rem; } /* =========================================================== the share-card link page: no card, the app icon on the stage (the page never reads the card part of the address; it is the install / open-in-app page, as today) */ .ap-brandfig { position: relative; z-index: 1; margin: 0; display: grid; place-items: center; } .ap-brandfig > img { width: 6rem; height: 6rem; border-radius: 22.5%; box-shadow: 0 0 0 5px rgba(255, 255, 255, .9), 0 14px 34px rgba(160, 13, 57, .24); } @media (min-width: 60rem) { .ap-brandfig > img { width: 11rem; height: 11rem; box-shadow: 0 0 0 8px rgba(255, 255, 255, .9), 0 24px 56px rgba(160, 13, 57, .26); } .ap-stage__plate:has(.ap-brandfig) { min-height: 20rem; } } /* =========================================================== actions: the app on phones, the hand-off on desktop */ /* the iPhone's primary on the share page (review #1): the old applinks button "Laden im App Store", filled crimson */ .ap-cta { display: none; align-items: center; justify-content: center; gap: .6rem; width: 100%; min-height: 3.5rem; padding: .5rem 1.25rem; border-radius: 15px; background: var(--crimson); color: #fff; font-size: 1.125rem; font-weight: 650; letter-spacing: -0.01em; text-decoration: none; box-shadow: 0 8px 20px rgba(210, 29, 69, .24); } .ap-cta:hover { background: var(--crimson-press); color: #fff; } .ap-cta svg { width: 1.375rem; height: 1.375rem; margin-top: -.15rem; } html[data-os="ios"] .ap-page--share .ap-cta { display: flex; } /* "In SuperCards öffnen": the primary (Android share: one intent link serves both cases; backup on every phone) */ .ap-open { display: flex; align-items: center; justify-content: center; gap: .7rem; width: 100%; min-height: 3.5rem; padding: .5rem 1.25rem; border-radius: 15px; background: var(--crimson); color: #fff; font-size: 1.125rem; font-weight: 650; letter-spacing: -0.01em; text-decoration: none; box-shadow: 0 8px 20px rgba(210, 29, 69, .24); } .ap-open:hover { background: var(--crimson-press); color: #fff; } .ap-open img { width: 1.75rem; height: 1.75rem; border-radius: 22.5%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55); } @media (prefers-reduced-motion: no-preference) { .ap-open, .ap-cta { transition: background-color .18s ease, transform .18s var(--ease-out); } .ap-open:active, .ap-cta:active { transform: scale(.98); } } /* …and on the iPhone share page the quiet second choice, for someone who knows the app is there */ html[data-os="ios"] .ap-page--share .ap-open { margin-top: .75rem; min-height: 3.25rem; background: var(--bg); color: var(--crimson-ink); border: 1.5px solid var(--crimson); box-shadow: none; font-size: 1.0625rem; } html[data-os="ios"] .ap-page--share .ap-open:hover { background: var(--tint-crimson); } html[data-os="ios"] .ap-page--share .ap-open img { width: 1.5rem; height: 1.5rem; box-shadow: 0 0 0 1px var(--card-edge); } .ap-hint { display: flex; gap: .65rem; align-items: flex-start; margin-top: .85rem; padding: .8rem 1rem; border-radius: 14px; background: var(--tint-amber); color: var(--ink-strong); font-size: .9375rem; line-height: 1.5; text-align: start; } .ap-hint[hidden] { display: none; } .ap-hint .sci { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .1rem; color: var(--tone-amber); } .ap-or { margin: 1.25rem 0 .75rem; color: var(--ink-2); font-size: .9375rem; line-height: 1.5; text-align: center; } .ap-touch__store { margin-top: 1rem; } /* one filled primary per phone view: the store badge under "In SuperCards öffnen" (Android share; backup) is the quiet one */ .ap-touch__store .c-store { background: var(--bg); color: var(--crimson-ink); box-shadow: none; } .ap-touch__store .c-store:hover { background: var(--tint-crimson); border-color: var(--crimson); color: var(--crimson-ink); } html[data-os="ios"] .ap-page--share .ap-touch__store { display: none; } .ap-page--recover .ap-touch__store { margin-top: 0; } /* which half shows: phones/tablets open the app; desktop hands off by QR */ .ap-touch { display: none; } html[data-os="ios"] .ap-touch, html[data-os="android"] .ap-touch { display: block; } html[data-os="ios"] .ap-desk, html[data-os="android"] .ap-desk { display: none; } @media (min-width: 37.5rem) { .ap-touch { max-width: 24rem; } .ap-act .ap-touch .c-stores { justify-content: flex-start; } .ap-or { text-align: start; } } @media (max-width: 37.49rem) { .ap-touch { text-align: center; } .ap-touch .c-stores--device .c-store { width: 100%; } } /* the hand-off (desktop): the QR of this very link + the stores, one panel beside the card */ .ap-handoff { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.35rem; align-items: center; max-width: 36rem; padding: 1.25rem 1.5rem 1.25rem 1.25rem; background: var(--surface-2); border: 1px solid var(--card-edge); border-radius: 1.5rem; } .ap-qr { flex: none; width: 9.75rem; height: 9.75rem; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 6px 18px rgba(0, 0, 0, .05); } .ap-qr svg { width: 100%; height: 100%; } .ap-qr--hidden { display: grid; place-items: center; background: var(--surface); } .ap-qr__ph { width: 3rem; height: 3rem; color: var(--ink-3); } .ap-handoff h2 { font-size: 1.25rem; letter-spacing: -0.014em; line-height: 1.3; } .ap-handoff p { margin-top: .35rem; color: var(--ink-2); font-size: .9375rem; line-height: 1.5; } .ap-handoff .c-stores { margin-top: 1.1rem; flex-wrap: wrap; gap: .5rem; } .ap-handoff .c-store { min-width: 0; padding-inline: .8rem .95rem; } .ap-reveal { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; margin-top: .9rem; padding: 0 1.1rem; border: 1.5px solid var(--crimson); border-radius: 999px; background: var(--bg); color: var(--crimson-ink); font-weight: 600; font-size: .9375rem; cursor: pointer; } .ap-reveal:hover { background: var(--crimson); color: #fff; } .ap-reveal svg { width: 1.05rem; height: 1.05rem; } @media (max-width: 30rem) { .ap-handoff { grid-template-columns: minmax(0, 1fr); justify-items: start; } } /* the backup's security note: the QR clause only where a QR exists (desktop) */ .ap-secnote__desk { display: none; } html[data-os="desktop"] .ap-secnote__desk { display: inline; } html[data-os="desktop"] .ap-secnote__touch { display: none; } .ap-qr:empty { background: var(--surface); } .ap-secnote { display: flex; gap: .75rem; align-items: flex-start; max-width: 32rem; margin-top: 1.25rem; padding: .9rem 1.1rem; border-radius: 1rem; background: var(--tint-amber); color: var(--ink-strong); font-size: .9375rem; line-height: 1.5; } .ap-secnote svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .1rem; color: var(--tone-amber); } /* =========================================================== backup: the restore visual The app's wallet filling from the backup: the cloud (arrow down = towards this phone) above a white-bezel phone cut with the app's "Karten" bar and the 2-column tile grid (DE top list, A→Z), cropped by the plate's bottom edge; the tiles travel from the cloud into their slots one by one, then "Backup wiederhergestellt." Brand palette only. Motion: transform/opacity, two rounds while in view (recover.js), then rest on the full wallet = the still. */ .ap-stage__plate--rs { display: block; overflow: hidden; padding: 1.5rem 1.25rem 0; background: var(--surface); border: 1px solid var(--card-edge); border-radius: 1.75rem; } .ap-rs { margin: 0; display: flex; flex-direction: column; align-items: center; } .ap-rs__cap { order: -1; max-width: 22rem; margin-bottom: 1.25rem; color: var(--ink-2); font-size: .9375rem; line-height: 1.5; text-align: center; } .ap-rs__art { position: relative; width: min(100%, 15.5rem); padding-top: 4.75rem; } .ap-rs__src { position: absolute; z-index: 2; top: 0; left: 50%; translate: -50% 0; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--raised); color: var(--crimson); box-shadow: 0 0 0 6px var(--tint-crimson), 0 8px 20px rgba(160, 13, 87, .14); } .ap-rs__src svg { width: 1.7rem; height: 1.7rem; } .ap-rs__trail { position: absolute; z-index: 0; top: 3.85rem; left: 50%; height: 1rem; border-inline-start: 2px dotted var(--crimson); opacity: .45; } .ap-rs__phone { position: relative; z-index: 1; padding: 7px 7px 0; border-radius: 2.1rem 2.1rem 0 0; background: #fff; box-shadow: 0 0 0 1px var(--card-edge), 0 18px 44px rgba(25, 20, 35, .12); } .ap-rs__screen { display: grid; justify-items: center; align-content: start; gap: 1.1rem; padding: 3.1rem .6rem 5.2rem; border-radius: 1.65rem 1.65rem 0 0; background: #F2F2F2; } .ap-rs__icon { width: 4.25rem; height: 4.25rem; border-radius: 22.5%; box-shadow: 0 8px 20px rgba(160, 13, 87, .22); } .ap-rs__bar { display: block; width: 46%; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .09); overflow: hidden; } .ap-rs__bar > span { display: block; height: 100%; border-radius: 3px; background: var(--crimson); transform-origin: left; } .ap-rs__done { position: absolute; z-index: 3; left: 50%; bottom: 1.1rem; translate: -50% 0; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem .5rem .55rem; border-radius: 999px; background: var(--raised); box-shadow: var(--shadow-float); color: var(--ink-strong); font-size: .875rem; font-weight: 600; width: max-content; max-width: calc(100% - 1.5rem); text-align: center; } .ap-rs__done svg { width: 1.25rem; height: 1.25rem; padding: 3px; border-radius: 50%; background: #2E9D5B; color: #fff; stroke-width: 3; } @media (min-width: 60rem) { .ap-stage__plate--rs { padding: 2.25rem 2rem 0; border-radius: var(--radius-plate); } .ap-rs__art { width: 17.5rem; padding-top: 5.25rem; } .ap-rs__trail { top: 4.1rem; height: 1.15rem; } .ap-rs__cap { margin-bottom: 1.75rem; } } /* motion (recover.js adds is-armed → is-run → is-out → is-run; --dx/--dy = the way from the cloud, measured in px) */ .ap-rs.is-armed:not(.is-run) .ap-rs__done { opacity: 0; } .ap-rs.is-armed:not(.is-run) .ap-rs__bar > span { transform: scaleX(.04); } .ap-rs.is-run .ap-rs__bar > span { animation: ap-rs-fill 3.2s cubic-bezier(.3, .6, .3, 1) .5s both; } .ap-rs.is-run .ap-rs__icon { animation: ap-rs-pop .8s var(--ease-out) .2s both; } .ap-rs.is-run .ap-rs__done { animation: ap-rs-done .5s var(--ease-out) 3.45s both; } .ap-rs.is-run .ap-rs__src svg { animation: ap-rs-pulse 1.1s ease-in-out .25s 2; } .ap-rs.is-out .ap-rs__bar > span, .ap-rs.is-out .ap-rs__done { animation: ap-rs-out .5s ease both; } /* small while it crosses the tiles already in place, full size only in its own slot */ @keyframes ap-rs-fill { from { transform: scaleX(.04); } to { transform: none; } } @keyframes ap-rs-pop { from { opacity: .4; transform: scale(.88); } to { opacity: 1; transform: none; } } @keyframes ap-rs-done { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } } @keyframes ap-rs-pulse { 0%, 100% { transform: none; } 50% { transform: translateY(2px); } } @keyframes ap-rs-out { from { opacity: 1; } to { opacity: 0; } } /* the bar clears the notch / status bar / dynamic island (viewport-fit=cover) and the sides' cut-outs */ .ap-bar { padding-top: env(safe-area-inset-top, 0px); padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px); } .ap-bar__in { min-width: 0; } .ap-bar .c-brand { min-width: 0; } .ap-bar .c-brand__name { white-space: nowrap; } /* =========================================================== DARK MODE (the family's tokens; html.dark from init.js = prefers-color-scheme, theme.js follows a change) Surfaces, text and buttons already follow the tokens. What is left is what was painted white on purpose: the app-icon ring, the phone bezel of the backup visual and the overview frames. QR tiles stay WHITE (light quiet zone: they must scan). */ html.dark .ap-brandfig > img { box-shadow: 0 0 0 5px var(--raised), 0 14px 34px rgba(0, 0, 0, .5); } @media (min-width: 60rem) { html.dark .ap-brandfig > img { box-shadow: 0 0 0 8px var(--raised), 0 24px 56px rgba(0, 0, 0, .55); } } html.dark .ap-open img { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .35); } html.dark .ap-cta, html.dark .ap-open, html.dark .c-store { box-shadow: 0 8px 20px rgba(0, 0, 0, .4); } html.dark .ap-qr { border-color: transparent; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 6px 18px rgba(0, 0, 0, .4); } html.dark .ap-rs__src { box-shadow: 0 0 0 6px var(--tint-crimson), 0 8px 20px rgba(0, 0, 0, .45); } html.dark .ap-rs__phone { background: #2A2826; box-shadow: 0 0 0 1px var(--line-strong), 0 18px 44px rgba(0, 0, 0, .55); } html.dark .ap-rs__screen { background: var(--bg); } html.dark .ap-rs__done svg { background: #2E9D5B; } html.dark .ap-hint, html.dark .ap-secnote { color: var(--ink-strong); } html.dark .ap-rs__bar { background: rgba(255, 255, 255, .14); } /* =========================================================== the shared card's store preview (tile + "-Karte"; no barcode, no number) the app's tile 83:54 on the store colour (the guides' BrandCard); without info the custom-card look with the name as text */ .ap-brandfig--store { gap: 1rem; } /* the neutral icon waits in the box the tile + caption fill later, so the primary button below does not jump when the store data arrives */ .ap-page--share .ap-brandfig { min-height: 11.5rem; align-content: center; } .ap-tile { --w: 13rem; width: var(--w); isolation: isolate; box-shadow: 0 10px 28px rgba(25, 20, 35, .16); container-type: inline-size; } .ap-tile img { width: 70%; height: 53.9%; object-fit: contain; } .ap-tile::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); pointer-events: none; } .ap-tile.c-card--light::before { box-shadow: inset 0 0 0 1px var(--line-strong); } .ap-tile .c-card__name { font-size: clamp(1rem, 11cqi, 1.6rem); } .ap-brandfig__cap { text-align: center; } .ap-brandfig__cap h2 { margin: 0; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink-strong); overflow-wrap: anywhere; } @media (min-width: 60rem) { .ap-tile { --w: 17rem; } .ap-brandfig__cap h2 { font-size: 1.5rem; } } html.dark .ap-tile { box-shadow: 0 10px 28px rgba(0, 0, 0, .5); } html.dark .ap-tile.c-card--light::before { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); } .ap-qr__ph { width: 2.5rem; height: 2.5rem; color: var(--ink-3); } /* ---- app host additions ---- */ /* Without JavaScript (init.js sets html.js): the phone view with both store badges and no open-in-app link, whose target is only set by script; the desktop QR needs script as well. A rule here, not a