/* ========================================================================== Abiat — landing page styles Design tokens ported verbatim from the app (src/app.css) so the marketing site stays in lockstep with Abiat's Apple/macOS-native visual language. ========================================================================== */ :root { /* Apple Light Mode (from src/app.css) */ --color-bg: #ffffff; --color-bg-secondary: rgba(246, 246, 246, 0.8); --color-bg-tertiary: #f5f5f7; --color-bg-elevated: #ffffff; --color-text: #1d1d1f; --color-text-secondary: #6e6e73; --color-text-tertiary: #aeaeb2; --color-accent: #418dff; --color-accent-hover: #2f6fd6; --color-accent-secondary: #ea9800; --color-selection-subtle: rgba(65, 141, 255, 0.04); --color-selection: rgba(65, 141, 255, 0.08); --color-selection-strong: rgba(65, 141, 255, 0.12); --color-hover: rgba(0, 0, 0, 0.03); --color-separator: rgba(0, 0, 0, 0.06); --color-danger: #ff3b30; --color-sidebar-bg: #f6f6f6; --color-unread-dot: #418dff; --panel-radius: 10px; --color-base-bg: #f6f6f6; --glass-tint: transparent; /* Marketing-only additions */ --page-bg: #ffffff; --page-bg-alt: #f5f5f7; --nav-height: 56px; --maxw: 1120px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --radius-lg: 18px; --radius-xl: 28px; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.08); --shadow-float: 0 20px 60px rgba(0, 0, 0, 0.14); --shadow-glass: 0 4px 12px rgba(0, 0, 0, 0.12); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, sans-serif; } /* Dark mode — opt-in via data-theme="dark" on (mirrors the app). */ :root[data-theme='dark'] { --color-bg: #1c1c1e; --color-bg-secondary: rgba(44, 44, 46, 0.8); --color-bg-tertiary: #2c2c2e; --color-bg-elevated: #2c2c2e; --color-text: #f5f5f7; --color-text-secondary: #98989d; --color-text-tertiary: #636366; --color-accent: #5b9dff; --color-accent-hover: #7db0ff; --color-accent-secondary: #ea9800; --color-selection-subtle: rgba(91, 157, 255, 0.07); --color-selection: rgba(91, 157, 255, 0.15); --color-selection-strong: rgba(91, 157, 255, 0.22); --color-hover: rgba(255, 255, 255, 0.04); --color-separator: rgba(255, 255, 255, 0.08); --color-danger: #ff453a; --color-sidebar-bg: #2c2c2e; --color-unread-dot: #5b9dff; --color-base-bg: #2c2c2e; --glass-tint: rgba(255, 255, 255, 0.06); --page-bg: #161618; --page-bg-alt: #1c1c1e; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.4); --shadow-float: 0 20px 60px rgba(0, 0, 0, 0.5); --shadow-glass: 0 4px 12px rgba(0, 0, 0, 0.4); } /* ========================================================================== Base ========================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 16px); -webkit-text-size-adjust: 100%; } body { font-size: 16px; line-height: 1.5; background: var(--page-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out); } a { color: inherit; text-decoration: none; transition: color 0.15s ease, opacity 0.15s ease; } img { display: block; max-width: 100%; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 6px; } ::selection { background: var(--color-selection-strong); } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; } .section { position: relative; padding-block: clamp(72px, 11vw, 140px); } .section--alt { background: var(--page-bg-alt); } /* Sections that are always dark, regardless of page theme (hero, CTA). */ .section--dark { --color-bg: #1c1c1e; --color-bg-elevated: #2c2c2e; --color-text: #f5f5f7; --color-text-secondary: #98989d; --color-text-tertiary: #636366; --color-accent: #5b9dff; --color-accent-hover: #7db0ff; --color-separator: rgba(255, 255, 255, 0.08); --color-hover: rgba(255, 255, 255, 0.04); --color-sidebar-bg: #2c2c2e; --color-unread-dot: #5b9dff; --color-selection: rgba(91, 157, 255, 0.15); --color-selection-strong: rgba(91, 157, 255, 0.22); --glass-tint: rgba(255, 255, 255, 0.06); --shadow-float: 0 20px 60px rgba(0, 0, 0, 0.5); background: #1c1c1e; color: #f5f5f7; } .eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 16px; } .section-title { font-size: clamp(28px, 4.4vw, 48px); line-height: 1.08; font-weight: 600; letter-spacing: -0.022em; } .section-lead { margin-top: 18px; font-size: clamp(16px, 2vw, 20px); line-height: 1.5; color: var(--color-text-secondary); max-width: 60ch; } .section-head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 72px); } .section-head--center { margin-inline: auto; text-align: center; } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding-inline: 22px; border: none; border-radius: 999px; font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; white-space: nowrap; transition: transform 0.2s var(--ease-out), background 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease, color 0.15s ease; } .btn:active { transform: translateY(1px) scale(0.99); } .btn .icon { width: 18px; height: 18px; flex-shrink: 0; } /* Primary — reuses the gradient + blue glow + sheen sweep from the app's real "Sign in with Google" button (Login.svelte). */ .btn--primary { position: relative; overflow: hidden; color: #fff; background: linear-gradient( 135deg, var(--color-accent) 0%, #3a82ec 55%, #2f6fd6 100% ); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(65, 141, 255, 0.35); } .btn--primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 120deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100% ); transform: translateX(-130%); transition: transform 0.7s var(--ease-out); } .btn--primary:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 14px 34px rgba(65, 141, 255, 0.45); } .btn--primary:hover::after { transform: translateX(130%); } .btn--secondary { background: var(--color-bg-elevated); color: var(--color-text); border: 1px solid var(--color-separator); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .btn--secondary:hover { transform: translateY(-1px); background: var(--color-hover); } .btn--ghost { height: 38px; padding-inline: 16px; font-size: 14px; background: transparent; color: var(--color-text-secondary); } .btn--ghost:hover { background: var(--color-hover); color: var(--color-text); } .btn--lg { height: 54px; padding-inline: 30px; font-size: 17px; } .btn--sm { height: 34px; padding-inline: 14px; font-size: 13px; } /* ========================================================================== Navigation (sticky frosted glass) ========================================================================== */ .nav { position: sticky; top: 0; z-index: 100; height: var(--nav-height); border-bottom: 1px solid transparent; transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease; } .nav.is-scrolled { background: var(--color-bg-secondary); border-bottom-color: var(--color-separator); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } .nav__inner { display: flex; align-items: center; gap: 20px; height: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; color: var(--color-text); } .brand__mark { width: 28px; height: 28px; border-radius: 7px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); } .nav__links { display: flex; align-items: center; gap: 4px; margin-left: 12px; } .nav__link { padding: 7px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--color-text-secondary); } .nav__link:hover { color: var(--color-text); background: var(--color-hover); } .nav__spacer { flex: 1; } .nav__actions { display: flex; align-items: center; gap: 8px; } .nav__toggle { display: none; } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; overflow: hidden; padding-top: clamp(64px, 9vw, 112px); padding-bottom: clamp(0px, 6vw, 60px); } /* blue radial glow behind hero, Abiat accent */ .hero::before { content: ''; position: absolute; top: -22%; left: 50%; width: min(1100px, 130vw); height: 760px; transform: translateX(-50%); background: radial-gradient( closest-side, rgba(91, 157, 255, 0.28), rgba(91, 157, 255, 0.08) 55%, transparent 75% ); filter: blur(8px); pointer-events: none; z-index: 0; } .hero__inner { position: relative; z-index: 1; text-align: center; } .hero__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; margin-bottom: 26px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--color-text-secondary); background: var(--glass-tint); border: 1px solid var(--color-separator); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .hero__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.18); } .hero__title { font-size: clamp(40px, 7.2vw, 84px); line-height: 1.02; font-weight: 600; letter-spacing: -0.035em; max-width: 16ch; margin-inline: auto; } .hero__title .grad { background: linear-gradient(120deg, #5b9dff 0%, #7db0ff 50%, #b388ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero__sub { margin: 24px auto 0; font-size: clamp(17px, 2.3vw, 22px); line-height: 1.45; color: var(--color-text-secondary); max-width: 56ch; } .hero__actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 36px; } .hero__note { margin-top: 16px; font-size: 13px; color: var(--color-text-tertiary); } .hero__visual { position: relative; z-index: 1; margin-top: clamp(48px, 7vw, 88px); perspective: 1800px; } /* ========================================================================== App window mockup (HTML/CSS recreation of Abiat's three-pane UI) ========================================================================== */ .window { width: 100%; max-width: 1000px; margin-inline: auto; border-radius: 14px; overflow: hidden; background: var(--color-bg); border: 1px solid var(--color-separator); box-shadow: var(--shadow-float); } .window--hero { transform: rotateX(4deg); transform-origin: top center; transition: transform 0.6s var(--ease-out); } .hero__visual:hover .window--hero { transform: rotateX(0deg); } .window__bar { display: flex; align-items: center; gap: 14px; height: 40px; padding-inline: 16px; background: var(--color-sidebar-bg); border-bottom: 1px solid var(--color-separator); } .traffic { display: flex; gap: 8px; } .traffic span { width: 12px; height: 12px; border-radius: 50%; display: block; } .traffic .r { background: #ff5f57; } .traffic .y { background: #febc2e; } .traffic .g { background: #28c840; } .window__title { font-size: 12px; font-weight: 500; color: var(--color-text-tertiary); } .app { display: grid; grid-template-columns: 188px 1fr; height: 520px; max-height: 60vh; background: var(--color-bg); } /* Sidebar */ .app__sidebar { background: var(--color-sidebar-bg); border-right: 1px solid var(--color-separator); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; color: var(--color-text-secondary); cursor: default; } .nav-item .ico { width: 16px; height: 16px; opacity: 0.8; } .nav-item .count { margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--color-text-tertiary); } .nav-item.is-active { background: var(--color-selection); color: var(--color-accent); font-weight: 500; } .nav-item.is-active .count { color: var(--color-accent); } .sidebar-label { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-tertiary); padding: 14px 10px 6px; } .sidebar-spacer { flex: 1; } .sidebar-account { display: flex; align-items: center; gap: 9px; padding: 8px 8px; border-radius: 8px; border-top: 1px solid var(--color-separator); margin-top: 6px; } .avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 600; flex-shrink: 0; } .sidebar-account .meta { overflow: hidden; } .sidebar-account .name { font-size: 12px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-account .addr { font-size: 11px; color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Mail list + reading pane wrapper */ .app__main { display: grid; grid-template-columns: minmax(0, 300px) 1fr; min-width: 0; } .maillist { border-right: 1px solid var(--color-separator); overflow: hidden; display: flex; flex-direction: column; } .maillist__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; } .maillist__title { font-size: 14px; font-weight: 600; } .search-pill { display: flex; align-items: center; gap: 7px; height: 28px; padding-inline: 10px; margin: 0 14px 8px; border-radius: 8px; background: var(--color-hover); color: var(--color-text-tertiary); font-size: 12px; } .search-pill .ico { width: 13px; height: 13px; } .thread { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--color-separator); cursor: default; } .thread:first-of-type { border-top: none; } .thread.is-active { background: var(--color-selection); box-shadow: inset 2px 0 0 var(--color-accent); } .thread.is-unread .thread__from { font-weight: 700; } .thread__dot { grid-row: 1 / span 3; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--color-unread-dot); } .thread.is-read .thread__dot { background: transparent; } .thread__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; } .thread__from { font-size: 13px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .thread__time { font-size: 11px; color: var(--color-text-tertiary); flex-shrink: 0; font-variant-numeric: tabular-nums; } .thread__subject { font-size: 12.5px; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .thread__snippet { font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Reading pane (tabs + thread) */ .reader { display: flex; flex-direction: column; min-width: 0; background: var(--color-bg); } .tabstrip { display: flex; align-items: center; gap: 4px; height: 38px; padding: 0 8px; border-bottom: 1px solid var(--color-separator); background: var(--color-sidebar-bg); } .tab { display: flex; align-items: center; gap: 8px; max-width: 180px; height: 26px; padding: 0 10px; border-radius: 7px; font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; } .tab.is-active { background: var(--color-bg); color: var(--color-text); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } .tab .x { opacity: 0.45; font-size: 13px; } .reader__body { padding: 22px 26px; overflow: hidden; } .reader__subject { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 16px; } .msg-head { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; } .msg-head .meta { min-width: 0; } .msg-head .name { font-size: 13.5px; font-weight: 600; } .msg-head .sub { font-size: 12px; color: var(--color-text-tertiary); } .msg-body p { font-size: 13.5px; line-height: 1.7; color: var(--color-text); margin-bottom: 13px; } .msg-body p.muted { color: var(--color-text-secondary); } .skeleton { height: 11px; border-radius: 4px; background: linear-gradient( 90deg, var(--color-hover), var(--color-separator), var(--color-hover) ); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; margin-bottom: 10px; } .skeleton.w-90 { width: 90%; } .skeleton.w-70 { width: 70%; } .skeleton.w-40 { width: 40%; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ========================================================================== Marquee band (privacy / native trio) ========================================================================== */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .pillar { padding: 30px; border-radius: var(--radius-lg); background: var(--color-bg-elevated); border: 1px solid var(--color-separator); box-shadow: var(--shadow-card); } .pillar__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; margin-bottom: 18px; color: var(--color-accent); background: var(--color-selection); } .pillar__icon .icon { width: 22px; height: 22px; } .pillar__title { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 8px; } .pillar__text { font-size: 15px; line-height: 1.55; color: var(--color-text-secondary); } /* ========================================================================== Feature showcase (alternating rows) ========================================================================== */ .feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(36px, 6vw, 88px); } .feature + .feature { margin-top: clamp(72px, 10vw, 128px); } .feature--rev .feature__media { order: -1; } .feature__kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 14px; } .feature__title { font-size: clamp(24px, 3.4vw, 36px); line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; } .feature__text { margin-top: 16px; font-size: 16.5px; line-height: 1.6; color: var(--color-text-secondary); max-width: 46ch; } .feature__list { margin-top: 22px; display: flex; flex-direction: column; gap: 11px; list-style: none; } .feature__list li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; color: var(--color-text); } .feature__list .check { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; color: var(--color-accent); } .feature__media { position: relative; } /* shared media panel frame */ .panel { border-radius: var(--radius-lg); background: var(--color-bg-elevated); border: 1px solid var(--color-separator); box-shadow: var(--shadow-card); overflow: hidden; } /* ---- mockup: pop-out tab ---- */ .popout { position: relative; padding: 26px; min-height: 280px; background: var(--color-bg-tertiary); } .popout .tabstrip { border-radius: 9px; border: 1px solid var(--color-separator); border-bottom: 1px solid var(--color-separator); } .popout__float { position: absolute; right: 18px; bottom: 18px; width: 62%; border-radius: 11px; overflow: hidden; background: var(--color-bg); border: 1px solid var(--color-separator); box-shadow: var(--shadow-float); animation: floaty 5s var(--ease-out) infinite; } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .popout__float .window__bar { height: 30px; } .popout__float .traffic span { width: 9px; height: 9px; } .popout__float .mini-body { padding: 14px 16px; } /* ---- mockup: compose / rich text ---- */ .compose { padding: 18px; background: var(--color-bg); } .compose__field { display: flex; gap: 8px; font-size: 13px; padding: 9px 4px; border-bottom: 1px solid var(--color-separator); } .compose__field .lbl { color: var(--color-text-tertiary); width: 48px; } .compose__field .val { color: var(--color-text); } .compose__toolbar { display: flex; align-items: center; gap: 6px; padding: 12px 4px; flex-wrap: wrap; } .tool { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: var(--color-text-secondary); background: var(--color-hover); font-size: 13px; font-weight: 600; } .tool.is-on { color: var(--color-accent); background: var(--color-selection); } .swatches { display: flex; gap: 5px; margin-left: 4px; } .swatch { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .compose__editor { padding: 12px 6px; font-size: 13.5px; line-height: 1.65; color: var(--color-text); } .compose__editor b { font-weight: 700; } .compose__editor .hl { background: #fde047; color: #1d1d1f; border-radius: 3px; padding: 0 3px; } .compose__editor ul { margin: 8px 0 0 18px; color: var(--color-text-secondary); } .compose__foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 6px 4px; border-top: 1px solid var(--color-separator); margin-top: 8px; font-size: 11px; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; } /* ---- mockup: search dropdown ---- */ .searchbox { padding: 22px; background: var(--color-bg-tertiary); } .searchbox__input { display: flex; align-items: center; gap: 9px; height: 38px; padding-inline: 13px; border-radius: 10px; background: var(--color-bg); border: 1px solid var(--color-accent); box-shadow: 0 0 0 3px var(--color-selection); font-size: 13.5px; color: var(--color-text); } .searchbox__input .ico { width: 15px; height: 15px; color: var(--color-text-tertiary); } .searchbox__caret { width: 1.5px; height: 16px; margin-left: -2px; background: var(--color-accent); animation: blink 1.1s step-end infinite; } @keyframes blink { 50% { opacity: 0; } } .dropdown { margin-top: 8px; border-radius: 11px; background: var(--color-bg-elevated); border: 1px solid var(--color-separator); box-shadow: var(--shadow-card); overflow: hidden; } .dropdown__group { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-tertiary); padding: 11px 14px 5px; } .dropdown__item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 13px; color: var(--color-text); } .dropdown__item:hover, .dropdown__item.is-active { background: var(--color-selection); } .dropdown__item .ico { width: 14px; height: 14px; color: var(--color-text-tertiary); } .dropdown__item mark { background: rgba(255, 204, 0, 0.32); color: inherit; border-radius: 2px; } :root[data-theme='dark'] .dropdown__item mark, .section--dark .dropdown__item mark { background: rgba(255, 214, 10, 0.28); } /* ========================================================================== Light/Dark band ========================================================================== */ .themes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .theme-card { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-separator); box-shadow: var(--shadow-card); } .theme-card__label { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 13px; font-weight: 600; } .theme-card__label .ico { width: 15px; height: 15px; opacity: 0.7; } /* Force light tokens on the light demo card, dark tokens on the dark one, regardless of the page theme — shows the parity at a glance. */ .scope-light { --color-bg: #ffffff; --color-sidebar-bg: #f6f6f6; --color-bg-tertiary: #f5f5f7; --color-bg-elevated: #ffffff; --color-text: #1d1d1f; --color-text-secondary: #6e6e73; --color-text-tertiary: #aeaeb2; --color-accent: #418dff; --color-separator: rgba(0, 0, 0, 0.06); --color-hover: rgba(0, 0, 0, 0.03); --color-selection: rgba(65, 141, 255, 0.08); --color-unread-dot: #418dff; background: #ffffff; color: #1d1d1f; } .scope-dark { --color-bg: #1c1c1e; --color-sidebar-bg: #2c2c2e; --color-bg-tertiary: #2c2c2e; --color-bg-elevated: #2c2c2e; --color-text: #f5f5f7; --color-text-secondary: #98989d; --color-text-tertiary: #636366; --color-accent: #5b9dff; --color-separator: rgba(255, 255, 255, 0.08); --color-hover: rgba(255, 255, 255, 0.04); --color-selection: rgba(91, 157, 255, 0.15); --color-unread-dot: #5b9dff; background: #1c1c1e; color: #f5f5f7; } .theme-mini { display: grid; grid-template-columns: 96px 1fr; height: 220px; background: var(--color-bg); border-top: 1px solid var(--color-separator); } .theme-mini__side { background: var(--color-sidebar-bg); border-right: 1px solid var(--color-separator); padding: 12px 8px; display: flex; flex-direction: column; gap: 4px; } .theme-mini__row { height: 9px; border-radius: 4px; background: var(--color-hover); } .theme-mini__row.accent { background: var(--color-selection); } .theme-mini__main { padding: 14px; display: flex; flex-direction: column; gap: 9px; } .theme-mini__line { height: 9px; border-radius: 4px; background: var(--color-hover); } .theme-mini__line.short { width: 45%; } .theme-mini__line.mid { width: 70%; } .theme-mini__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-unread-dot); display: inline-block; margin-right: 6px; } /* ========================================================================== Download page — hero + platform cards ========================================================================== */ .dlhero { position: relative; overflow: hidden; text-align: center; padding-block: clamp(72px, 11vw, 128px); } .dlhero::before { content: ''; position: absolute; inset: 0; background: radial-gradient( 60% 120% at 50% 0%, rgba(91, 157, 255, 0.25), transparent 70% ); pointer-events: none; } .dlhero__inner { position: relative; z-index: 1; } .dlhero__icon { width: 84px; height: 84px; margin: 0 auto 26px; border-radius: 20px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); } .dlhero__title { font-size: clamp(34px, 5.5vw, 60px); line-height: 1.04; font-weight: 600; letter-spacing: -0.03em; } .dlhero__sub { margin: 18px auto 0; font-size: clamp(16px, 2vw, 20px); line-height: 1.5; color: var(--color-text-secondary); max-width: 52ch; } .dlhero__actions { margin-top: 34px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; } .dlhero__hint { margin-top: 14px; font-size: 13px; color: var(--color-text-tertiary); } /* Platform cards grid */ .dl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .dl-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 24px; border-radius: var(--radius-lg); background: var(--color-bg-elevated); border: 1px solid var(--color-separator); box-shadow: var(--shadow-card); } .dl-card__icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 16px; color: var(--color-text); } .dl-card__icon svg { width: 34px; height: 34px; } .dl-card__title { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; } .dl-card__meta { margin-top: 4px; margin-bottom: 20px; font-size: 13px; color: var(--color-text-secondary); } .dl-card__btn { width: 100%; margin-top: auto; } .dl-card__note { margin-top: 12px; font-size: 12px; line-height: 1.4; color: var(--color-text-tertiary); } .dl-card__badge { position: absolute; top: 14px; right: 14px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--color-accent-secondary); background: rgba(234, 152, 0, 0.12); } /* "Coming soon" cards read as inactive. */ .dl-card--soon { opacity: 0.62; } .dl-card--soon .dl-card__icon { color: var(--color-text-tertiary); } .btn.is-disabled { cursor: not-allowed; pointer-events: none; color: var(--color-text-tertiary); } .dl-foot { margin-top: clamp(32px, 5vw, 56px); text-align: center; font-size: 14px; color: var(--color-text-secondary); } .dl-foot a { color: var(--color-accent); } .dl-foot a:hover { text-decoration: underline; } /* ========================================================================== Final CTA ========================================================================== */ .cta { position: relative; overflow: hidden; text-align: center; } .cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient( 60% 120% at 50% 0%, rgba(91, 157, 255, 0.25), transparent 70% ); pointer-events: none; } .cta__inner { position: relative; z-index: 1; } .cta__icon { width: 76px; height: 76px; margin: 0 auto 28px; border-radius: 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); } .cta__title { font-size: clamp(32px, 5vw, 56px); line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; } .cta__sub { margin: 20px auto 0; font-size: clamp(16px, 2vw, 20px); color: var(--color-text-secondary); max-width: 48ch; } .cta__actions { margin-top: 36px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; } .cta__platforms { margin-top: 22px; font-size: 13px; color: var(--color-text-tertiary); } /* ========================================================================== Footer ========================================================================== */ .footer { background: var(--page-bg-alt); border-top: 1px solid var(--color-separator); padding-block: 64px 40px; } .footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; } .footer__brand .brand { font-size: 19px; } .footer__tagline { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--color-text-secondary); max-width: 32ch; } .footer__col h4 { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: 14px; } .footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer__col a { font-size: 14px; color: var(--color-text-secondary); } .footer__col a:hover { color: var(--color-text); } .footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--color-separator); font-size: 13px; color: var(--color-text-tertiary); } .footer__bottom-right { display: flex; align-items: center; gap: 18px; } .theme-toggle { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding-inline: 12px; border-radius: 999px; border: 1px solid var(--color-separator); background: var(--color-bg-elevated); color: var(--color-text-secondary); font-family: inherit; font-size: 13px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .theme-toggle:hover { background: var(--color-hover); color: var(--color-text); } .theme-toggle .icon { width: 15px; height: 15px; } /* ========================================================================== Reveal-on-scroll ========================================================================== */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 900px) { .nav__links { display: none; } .pillars { grid-template-columns: 1fr; gap: 18px; } .feature, .themes { grid-template-columns: 1fr; gap: 32px; } .dl-grid { grid-template-columns: 1fr 1fr; } .feature--rev .feature__media { order: 0; } .feature__text, .feature__list li, .section-lead { max-width: none; } .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } .footer__brand { grid-column: 1 / -1; } } @media (max-width: 640px) { .container { padding-inline: 18px; } .nav__inner { padding-inline: 18px; } .nav__actions .btn--secondary { display: none; } .hero__actions .btn, .cta__actions .btn { width: 100%; max-width: 320px; } .dl-grid { grid-template-columns: 1fr; } .dlhero__actions .btn { width: 100%; max-width: 320px; } /* Simplify the dense three-pane app mockup on phones: drop the middle list column so the sidebar + reading pane stay legible. */ .app { grid-template-columns: 64px 1fr; height: 420px; } .app__sidebar { padding: 10px 6px; align-items: center; } .nav-item span:not(.count), .sidebar-label, .sidebar-account .meta { display: none; } .nav-item { justify-content: center; } .nav-item .count { display: none; } .app__main { grid-template-columns: 1fr; } .maillist { display: none; } .window--hero { transform: none; } .popout__float { width: 72%; } .footer__grid { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; align-items: flex-start; } } /* ========================================================================== Reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } .window--hero { transform: none; } }