/* Ailancer app pages — shared design system. * --------------------------------------------------------------------------- * Two kinds of page, one stylesheet. * * body.studio the directory at the root. Ailancer's own purple → pink, * brand forward: full-colour icon, wordmark, an intro, and a * grid of app tiles that each carry their own colour. * * (default) an app's own pages. The app leads — its accent drives the * whole page and Ailancer shrinks to a monochrome wordmark in * the corner. Never let our brand outshout the product's. * * THE RULE for an app page: declare three tokens, touch nothing else. * * * * Everything else derives — aurora, links, markers, focus ring, glow, * selection. No third-party requests anywhere: no web fonts, no CDN, no * analytics. These pages must render when everything else is down. */ /* ─────────────────────────────────────────────────────────── tokens ───── */ :root { /* Per-app identity. Overridden in each app page's . */ --accent-1: #B902D1; --accent-2: #FA27A5; --on-accent: #FFFFFF; /* Ailancer's own mark, constant everywhere. */ --ail-1: #B902D1; --ail-2: #FA27A5; /* Derived — never set per app. */ --grad: linear-gradient(120deg, var(--accent-1), var(--accent-2)); --glow: color-mix(in srgb, var(--accent-1) 42%, transparent); --bg: #FCFBFD; --surface: rgba(255, 255, 255, .74); --solid: #FFFFFF; --text: #0E1116; --muted: #6B7280; --faint: #9AA1AC; --line: rgba(14, 17, 22, .09); --shadow: 0 1px 2px rgba(14, 17, 22, .04), 0 26px 52px -26px rgba(14, 17, 22, .20); --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --ease: cubic-bezier(.22, 1, .36, 1); --measure: 760px; } @media (prefers-color-scheme: dark) { :root { --bg: #0C0B0E; /* matches ailancer.com */ --surface: rgba(24, 23, 29, .66); --solid: #17161C; --text: #EDECF0; --muted: #9B99A6; --faint: #6E6C79; --line: rgba(255, 255, 255, .09); --shadow: 0 1px 2px rgba(0, 0, 0, .34), 0 34px 66px -30px rgba(0, 0, 0, .82); } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 400 16.5px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; overflow-x: hidden; } ::selection { background: var(--accent-1); color: #fff; } :focus-visible { outline: 2px solid var(--accent-1); outline-offset: 3px; border-radius: 5px; } /* ─────────────────────────────────────────────────────────── aurora ───── */ /* Colour belongs behind the hero, not behind body text. The mask fades the wash out before it reaches the reading column, which would go muddy. */ .aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 16%, transparent 62%); mask-image: linear-gradient(to bottom, #000 0%, #000 16%, transparent 62%); } .aurora span { position: absolute; display: block; border-radius: 50%; filter: blur(84px); opacity: .34; will-change: transform; } .aurora span:nth-child(1) { width: 46vmax; height: 46vmax; top: -25vmax; left: -10vmax; background: var(--accent-1); animation: drift-a 26s var(--ease) infinite alternate; } .aurora span:nth-child(2) { width: 38vmax; height: 38vmax; top: -17vmax; right: -12vmax; background: var(--accent-2); animation: drift-b 32s var(--ease) infinite alternate; } @media (prefers-color-scheme: dark) { .aurora span { opacity: .24; filter: blur(98px); } } @keyframes drift-a { to { transform: translate3d(9vmax, 7vmax, 0) scale(1.14); } } @keyframes drift-b { to { transform: translate3d(-8vmax, 10vmax, 0) scale(1.09); } } /* ─────────────────────────────────────────────────────────── topbar ───── */ .topbar { position: sticky; top: 0; z-index: 20; backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); background: color-mix(in srgb, var(--bg) 74%, transparent); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease); } .topbar[data-scrolled] { border-bottom-color: var(--line); } .topbar-inner { max-width: var(--measure); margin: 0 auto; padding: 12px 22px; display: flex; align-items: center; gap: 11px; } /* Ailancer lockup. The wordmark is an SVG mask so it takes whatever colour the page needs — full strength at the root, quiet on an app's page. */ .brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; background-image: none; } .brand img { width: 21px; height: 21px; display: block; border-radius: 6px; } .wordmark { display: block; width: 74px; height: 15px; background: var(--faint); -webkit-mask: url(/assets/ailancer-wordmark.svg) no-repeat center / contain; mask: url(/assets/ailancer-wordmark.svg) no-repeat center / contain; transition: background-color .25s; } .brand:hover .wordmark { background: var(--text); } body.studio .wordmark { background: var(--text); width: 84px; height: 17px; } .crumb { display: flex; align-items: center; gap: 11px; min-width: 0; color: var(--muted); font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; background-image: none; transition: color .2s; } .crumb:hover { color: var(--text); } .crumb::before { content: ""; width: 1px; height: 14px; background: var(--line); } .crumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Language — deliberately quiet. The product comes first; this is a utility. */ .langs { margin-left: auto; display: flex; align-items: center; gap: 2px; flex: 0 0 auto; } .langs button { font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 7px; border: 0; border-radius: 6px; background: none; color: var(--faint); cursor: pointer; transition: color .2s, background-color .2s; } .langs button:hover { color: var(--text); } .langs button[aria-selected="true"] { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); } .langs .sep { color: var(--line); font-size: 11px; user-select: none; } /* ───────────────────────────────────────────────────────────── shell ───── */ .wrap { max-width: var(--measure); margin: 0 auto; padding: 0 22px 96px; } /* ────────────────────────────────────────────────────────────── hero ───── */ header { padding: 66px 0 30px; text-align: center; } .mark { width: 78px; height: 78px; margin: 0 auto 22px; border-radius: 23px; background: var(--grad); box-shadow: 0 16px 42px -10px var(--glow); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; animation: mark-in .8s var(--ease) both; } .mark .spark { color: var(--on-accent); font-size: 26px; line-height: 1; } .mark .bar { width: 38px; height: 4px; border-radius: 2px; background: var(--on-accent); } /* An app page leads with the app's real icon, not a CSS approximation of it. */ .mark.app { background: none; border-radius: 22.5%; /* the iOS icon corner ratio */ overflow: hidden; box-shadow: 0 16px 40px -12px var(--glow); } .mark.app img { width: 100%; height: 100%; display: block; } /* The Ailancer logo is the artwork itself — giving it a plate would park a transparent PNG on a dark square. The glow is a separate blurred layer that breathes slowly, so the hero has life without anything actually moving. */ .brandmark { position: relative; width: 92px; height: 92px; margin: 0 auto 24px; animation: mark-in .8s var(--ease) both; } .brandmark img { position: relative; width: 100%; height: 100%; display: block; } .brandmark::before { content: ""; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ail-2) 55%, transparent) 0%, color-mix(in srgb, var(--ail-1) 32%, transparent) 44%, transparent 70%); filter: blur(16px); animation: halo 7s ease-in-out infinite alternate; } @keyframes mark-in { from { opacity: 0; transform: translateY(14px) scale(.86) rotate(-7deg); } } @keyframes halo { from { opacity: .55; transform: scale(.92); } to { opacity: 1; transform: scale(1.1); } } header h1 { margin: 0 0 10px; font-size: clamp(31px, 6.2vw, 44px); font-weight: 800; letter-spacing: -0.033em; line-height: 1.1; } body.studio header h1 { background: linear-gradient(100deg, var(--ail-1), var(--ail-2) 62%, var(--text)); -webkit-background-clip: text; background-clip: text; color: transparent; } header > p { margin: 0 auto; max-width: 38ch; color: var(--muted); font-size: 16.5px; } /* ────────────────────────────────────────────────────────── content ───── */ main { position: relative; background: var(--surface); backdrop-filter: saturate(160%) blur(22px); -webkit-backdrop-filter: saturate(160%) blur(22px); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 34px 32px 38px; margin-top: 26px; } /* The directory has no card — the tiles are the content. It also runs wider, so the shelf fits three across, while its prose keeps a readable measure. */ body.studio { --measure: 920px; } body.studio main { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none; padding: 0; } body.studio header { padding-bottom: 18px; } body.studio section > p { max-width: 62ch; } @media (max-width: 560px) { main { padding: 26px 20px 30px; border-radius: 22px; } header { padding: 44px 0 24px; } .topbar-inner, .wrap { padding-left: 17px; padding-right: 17px; } } /* Scoped to the content sections: the hero also carries [lang] fragments, and those must stay inline. */ main > section[lang]:not([hidden]) { display: block; } h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 38px 0 12px; scroll-margin-top: 82px; } h2:first-child { margin-top: 0; } body.studio h2 { font-size: 12.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--faint); margin: 46px 0 16px; } p, li { color: var(--text); } p { margin: 0 0 14px; } ul { padding-left: 20px; margin: 0 0 14px; } li { margin: 7px 0; } li::marker { color: var(--accent-1); } strong { font-weight: 650; } a { color: var(--accent-1); text-decoration: none; font-weight: 600; background-image: var(--grad); background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .3s var(--ease); } a:hover { background-size: 100% 1.5px; } .updated { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; margin-bottom: 24px; } .callout { position: relative; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-1) 10%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent)); border: 1px solid color-mix(in srgb, var(--accent-1) 24%, transparent); border-radius: var(--r-md); padding: 17px 19px 17px 22px; margin: 0 0 26px; overflow: hidden; } .callout::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grad); } .callout p { margin: 0; font-weight: 600; } /* ─────────────────────────────────────────────────── store buttons ───── */ .stores { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 22px; } .store-btn { display: inline-flex; align-items: center; padding: 10px 18px; border: 1px solid var(--line); border-radius: 15px; background: var(--solid); color: var(--text); background-image: none; font-weight: 400; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; } .store-btn:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent-1) 46%, transparent); box-shadow: 0 16px 30px -20px var(--glow); } .store-btn small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .store-btn b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.012em; line-height: 1.25; } /* Marks a link that leaves this site, so nothing about where you're going is a surprise. */ .ext::after { content: " ↗"; font-size: .85em; opacity: .7; } /* ──────────────────────────────────────────────── studio: principles ───── */ .pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 8px; } .pillar { padding: 18px 18px 19px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--solid); } .pillar .dot { width: 26px; height: 26px; border-radius: 9px; background: linear-gradient(120deg, var(--ail-1), var(--ail-2)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; margin-bottom: 11px; } .pillar h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } .pillar p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.6; } /* ────────────────────────────────────────────────── studio: app grid ───── */ /* Each tile wears its own app's colours, so the grid reads as a shelf of distinct products rather than a list of links. */ .apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 14px; } .tile { --t1: var(--ail-1); --t2: var(--ail-2); --ti: #fff; position: relative; display: flex; flex-direction: column; gap: 13px; min-height: 176px; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--solid); color: inherit; font-weight: 400; text-decoration: none; background-image: none; overflow: hidden; isolation: isolate; transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; } /* A wash of the app's own colour, brightening on hover. */ .tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 82% -18%, color-mix(in srgb, var(--t2) 20%, transparent), transparent 62%); opacity: .8; transition: opacity .35s var(--ease); } .tile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--t1) 44%, transparent); box-shadow: 0 22px 44px -24px color-mix(in srgb, var(--t1) 72%, transparent); } .tile:hover::before { opacity: 1.35; } /* Real App Store artwork, at the same corner ratio iOS uses. */ .tile-mark { width: 50px; height: 50px; border-radius: 22.5%; overflow: hidden; flex: 0 0 auto; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--t1) 70%, transparent); transition: box-shadow .35s var(--ease); } .tile-mark img { width: 100%; height: 100%; display: block; } .tile:hover .tile-mark { box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--t1) 88%, transparent); } .tile-name { display: block; font-size: 16.5px; font-weight: 700; letter-spacing: -0.015em; } .tile-desc { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.55; color: var(--muted); } .tile-go { margin-top: auto; align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--t1); display: inline-flex; align-items: center; gap: 5px; transition: gap .3s var(--ease); } .tile:hover .tile-go { gap: 9px; } @media (prefers-color-scheme: dark) { .tile-go { color: color-mix(in srgb, var(--t2) 78%, #fff); } } /* A placeholder slot, so an empty shelf still looks intentional. */ .tile.soon { border-style: dashed; background: none; color: var(--faint); align-items: center; justify-content: center; text-align: center; font-size: 13.5px; font-weight: 600; cursor: default; } .tile.soon:hover { transform: none; box-shadow: none; border-color: var(--line); } .tile.soon::before { content: none; } /* ────────────────────────────────────────────────────── nav + foot ───── */ nav { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 30px; } nav a { font-size: 13.5px; font-weight: 600; color: var(--muted); padding: 7px 13px; border-radius: 999px; background-image: none; transition: color .2s, background-color .2s; } nav a:hover { color: var(--text); background: var(--solid); } nav a[aria-current="page"] { color: var(--accent-1); } footer { margin-top: 26px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--faint); font-size: 12.5px; } footer .wordmark { width: 62px; height: 13px; background: var(--faint); } footer a { color: inherit; font-weight: 600; background-image: none; } footer a:hover { color: var(--text); } /* ────────────────────────────────────────────────────────── motion ───── */ .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .65s var(--ease), transform .65s var(--ease); } .js .reveal[data-shown] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .js .reveal { opacity: 1; transform: none; } }