/* =========================================================== Appalogue — bimi-themed marketing site Tokens mirror Sources/UI/DesignSystem/BrAInStemTheme.swift =========================================================== */ :root { /* Aurora gradient stops (the brand) */ --aurora-violet: #7C5CFF; --aurora-blue: #3D7BF5; --aurora-cyan: #27D4C4; --aurora-gradient: linear-gradient(120deg, var(--aurora-violet) 0%, var(--aurora-blue) 50%, var(--aurora-cyan) 100%); --aurora-gradient-soft: linear-gradient(120deg, rgba(124,92,255,.15), rgba(61,123,245,.12), rgba(39,212,196,.12)); /* Dark canvas (brand-true default) */ --canvas: #0B0C10; --canvas-deep: #050508; /* constellation edge */ --surface: #14161C; --surface-high: #1C1F27; --surface-elev: #232734; --hairline: rgba(255,255,255,.08); --hairline-cyan: rgba(39,212,196,.22); /* Text */ --text-1: #F3F5F9; --text-2: #B0B6C4; --text-3: #6F7689; /* Status (desaturated, never raw) */ --ok: #46C48C; --warn: #F2A94C; --err: #F2706A; /* Memory Constellation category accent (luminous cyan) */ --identity: #33D1C8; /* Rhythm — 8pt baseline */ --sp-xs: 8px; --sp-sm: 16px; --sp-md: 24px; --sp-lg: 32px; --sp-xl: 48px; --sp-xxl: 64px; --sp-3xl: 96px; --sp-4xl: 128px; /* Corner radii (semantic) */ --r-card: 16px; --r-control: 12px; --r-section: 20px; --r-chip: 14px; --r-hero: 22px; --r-pill: 999px; /* Type */ --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-rounded: ui-rounded, 'SF Pro Rounded', 'Inter', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace; /* Motion */ --ease-out: cubic-bezier(.16,.84,.32,1); --ease-soft: cubic-bezier(.22,.61,.36,1); } /* Brand is dark-first by design (Memory Constellation, Aurora orb). We do NOT honor prefers-color-scheme — the dark canvas IS the brand. A light theme can be added later as an explicit opt-in (e.g., ), but never via OS auto-detect. */ html { color-scheme: dark; } /* =========================================================== Reset =========================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-ui); font-feature-settings: "cv11","ss01","ss03","cv02","cv03","cv04"; font-size: 17px; line-height: 1.55; color: var(--text-1); background: var(--canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } @supports (font-variation-settings: normal) { body { font-family: 'Inter var', var(--font-ui); } } img, svg { display: block; max-width: 100%; } button, input, textarea, select { font: inherit; color: inherit; } a { color: var(--text-1); text-decoration: none; } em { font-style: normal; background: var(--aurora-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } kbd { font: 12px/1 var(--font-mono); padding: 2px 6px; background: var(--surface-high); border: 1px solid var(--hairline); border-radius: 6px; color: var(--text-2); } /* =========================================================== NAV =========================================================== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); padding: 14px 28px; background: color-mix(in oklab, var(--canvas) 78%, transparent); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease-out), background .3s var(--ease-out); } .nav.is-scrolled { border-bottom-color: var(--hairline); } .nav__brand { display: inline-flex; align-items: center; gap: 10px; } .nav__sparkle { width: 22px; height: 22px; filter: drop-shadow(0 0 12px rgba(61,123,245,.55)); } .nav__wordmark { font-family: var(--font-rounded); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; background: var(--aurora-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .nav__links { display: flex; align-items: center; gap: 28px; } .nav__links a { font-size: 14px; font-weight: 500; color: var(--text-2); transition: color .2s var(--ease-out); } .nav__links a:hover { color: var(--text-1); } .nav__cta { padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--hairline-cyan); color: var(--text-1) !important; background: linear-gradient(180deg, rgba(39,212,196,.08), rgba(61,123,245,.04)); } .nav__cta:hover { border-color: var(--aurora-cyan); background: linear-gradient(180deg, rgba(39,212,196,.16), rgba(61,123,245,.08)); } .nav__menu { display: none; background: none; border: none; width: 36px; height: 36px; cursor: pointer; padding: 8px; } .nav__menu span { display: block; height: 2px; background: var(--text-1); margin: 4px 0; border-radius: 2px; transition: transform .25s var(--ease-out), opacity .2s var(--ease-out); } @media (max-width: 820px) { .nav__links { display: none; } .nav__menu { display: block; } .nav.is-open .nav__links { display: flex; position: fixed; inset: 60px 12px auto 12px; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); box-shadow: 0 20px 50px rgba(0,0,0,.4); } .nav.is-open .nav__links a { padding: 14px; border-radius: 10px; } .nav.is-open .nav__links a:hover { background: var(--surface-high); } } /* =========================================================== BUTTONS =========================================================== */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: var(--r-pill); font-weight: 600; font-size: 15px; letter-spacing: -0.005em; transition: transform .2s var(--ease-out), box-shadow .25s var(--ease-out), background .25s var(--ease-out); cursor: pointer; border: 1px solid transparent; white-space: nowrap; } .btn--primary { background: var(--aurora-gradient); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 12px 30px -8px rgba(61,123,245,.45); } .btn--primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 16px 36px -8px rgba(61,123,245,.6); } .btn--ghost { background: transparent; color: var(--text-1); border-color: var(--hairline); } .btn--ghost:hover { background: var(--surface-high); border-color: var(--hairline-cyan); } .btn__chev { transition: transform .2s var(--ease-out); } .btn:hover .btn__chev { transform: translateX(3px); } /* =========================================================== HERO =========================================================== */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 140px 28px 96px; isolation: isolate; overflow: hidden; background: radial-gradient(120% 70% at 50% -10%, rgba(124,92,255,.22), transparent 60%), radial-gradient(80% 60% at 90% 120%, rgba(39,212,196,.18), transparent 55%), radial-gradient(60% 50% at -10% 100%, rgba(61,123,245,.16), transparent 55%), var(--canvas); } .hero__constellation { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: .85; } .hero__aurora { position: absolute; inset: -20% -20% auto -20%; height: 60%; background: var(--aurora-gradient); filter: blur(120px) saturate(120%); opacity: .22; z-index: -1; pointer-events: none; } .hero__inner { max-width: 1120px; margin: 0 auto; text-align: center; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; background: rgba(255,255,255,.04); border: 1px solid var(--hairline); border-radius: var(--r-pill); font-size: 13px; color: var(--text-2); margin-bottom: var(--sp-lg); backdrop-filter: blur(8px); } .hero__sparkle { width: 16px; height: 16px; } .hero__title { font-family: var(--font-rounded); font-weight: 700; font-size: clamp(40px, 7vw, 88px); line-height: 1.02; letter-spacing: -0.035em; margin-bottom: var(--sp-md); } .hero__lede { max-width: 720px; margin: 0 auto var(--sp-lg); font-size: clamp(16px, 1.4vw, 20px); color: var(--text-2); line-height: 1.55; } .hero__ctas { display: inline-flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: var(--sp-xxl); } .hero__chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px; background: rgba(255,255,255,.04); border: 1px solid var(--hairline); border-radius: var(--r-pill); font-size: 13px; color: var(--text-2); } .chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); } .chip__dot--ok { background: var(--ok); box-shadow: 0 0 8px rgba(70,196,140,.6); } .hero__scroll { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); width: 28px; height: 44px; border: 1.5px solid var(--hairline); border-radius: 14px; display: grid; place-items: center; } .hero__scroll span { width: 4px; height: 8px; border-radius: 2px; background: var(--text-2); animation: scroll 1.8s ease-in-out infinite; } @keyframes scroll { 0% { transform: translateY(-6px); opacity: 0; } 40% { opacity: 1; } 80% { opacity: 0; transform: translateY(6px); } 100% { opacity: 0; } } /* =========================================================== SECTION FRAME =========================================================== */ .section { padding: var(--sp-4xl) 28px; position: relative; } .section__inner { max-width: 1200px; margin: 0 auto; } .section__kicker { display: inline-block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--aurora-cyan); margin-bottom: 12px; font-weight: 600; } .section__title { font-family: var(--font-rounded); font-weight: 700; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -0.025em; margin-bottom: var(--sp-md); max-width: 22ch; } .section__sub { font-size: clamp(16px, 1.3vw, 19px); color: var(--text-2); max-width: 56ch; line-height: 1.55; } .title__sparkle { display: inline-block; width: 0.9em; height: 0.9em; vertical-align: -0.06em; margin-right: 8px; } /* =========================================================== VISION =========================================================== */ .section--vision { background: linear-gradient(180deg, var(--canvas) 0%, var(--surface) 30%, var(--surface) 70%, var(--canvas) 100%); } .vision__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-3xl); align-items: start; margin-top: var(--sp-xl); } .vision__lede p { font-size: 18px; color: var(--text-2); margin-bottom: var(--sp-md); line-height: 1.6; } .vision__pivot { font-family: var(--font-rounded); font-size: 22px !important; color: var(--text-1) !important; font-weight: 600; letter-spacing: -0.01em; padding-left: var(--sp-md); border-left: 2px solid; border-image: var(--aurora-gradient) 1; } .vision__pillars { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm); } .vision__pillars li { padding: var(--sp-md); background: var(--surface-high); border: 1px solid var(--hairline); border-radius: var(--r-card); transition: transform .3s var(--ease-out), border-color .3s var(--ease-out); } .vision__pillars li:hover { transform: translateY(-2px); border-color: var(--hairline-cyan); } .pillar__icon { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 10px; background: var(--aurora-gradient-soft); color: var(--aurora-cyan); } .pillar__icon svg { width: 18px; height: 18px; } .vision__pillars h3 { font-family: var(--font-rounded); font-size: 17px; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.01em; } .vision__pillars p { font-size: 14px; color: var(--text-2); line-height: 1.5; } @media (max-width: 900px) { .vision__grid { grid-template-columns: 1fr; gap: var(--sp-xl); } .vision__pillars { grid-template-columns: 1fr; } } /* =========================================================== BIMI =========================================================== */ .section--bimi { background: var(--canvas); position: relative; overflow: hidden; } .section--bimi::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 0%, rgba(124,92,255,.10), transparent 70%); pointer-events: none; } .bimi__head { max-width: 56ch; margin-bottom: var(--sp-xl); position: relative; } /* Stylized product surface */ .bimi__surface { margin: 0 auto var(--sp-xxl); max-width: 1000px; border: 1px solid var(--hairline); border-radius: var(--r-hero); overflow: hidden; background: linear-gradient(180deg, var(--surface-high), var(--surface)); box-shadow: 0 60px 140px -40px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.05) inset; position: relative; } .bimi__surface::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 50% at 50% 0%, rgba(124,92,255,.18), transparent 60%); pointer-events: none; } .surface__chrome { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: var(--surface-elev); border-bottom: 1px solid var(--hairline); } .surface__chrome > span:not(.surface__title) { width: 11px; height: 11px; border-radius: 50%; background: var(--text-3); opacity: .5; } .surface__chrome > span:nth-child(1) { background: #ff5f57; opacity: .8; } .surface__chrome > span:nth-child(2) { background: #febc2e; opacity: .8; } .surface__chrome > span:nth-child(3) { background: #28c840; opacity: .8; } .surface__title { margin-left: var(--sp-md); font-size: 13px; color: var(--text-3); font-family: var(--font-rounded); } .surface__body { display: grid; grid-template-columns: 220px 1fr; min-height: 460px; } .surface__sidebar { background: var(--surface); border-right: 1px solid var(--hairline); padding: var(--sp-sm) 12px; } .sidebar__row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--text-2); font-size: 14px; font-family: var(--font-rounded); margin-bottom: 2px; } .sidebar__row--active { background: rgba(61,123,245,.08); color: var(--text-1); border: 1px solid var(--hairline-cyan); } .sidebar__icon { width: 16px; height: 16px; } .sidebar__icon--dot { width: 6px; height: 6px; margin: 0 5px; border-radius: 50%; background: var(--text-3); opacity: .5; } .surface__main { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--sp-xl) var(--sp-md); background: radial-gradient(60% 50% at 50% 30%, rgba(39,212,196,.10), transparent 60%), var(--surface); } .orb { position: relative; width: 140px; height: 140px; margin-bottom: var(--sp-md); } .orb__core { position: absolute; inset: 38px; border-radius: 50%; background: var(--aurora-gradient); filter: blur(2px); box-shadow: 0 0 60px rgba(61,123,245,.6), 0 0 120px rgba(124,92,255,.3); animation: breathe 3.6s ease-in-out infinite; } .orb__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--hairline-cyan); opacity: .6; animation: pulse 3.6s ease-in-out infinite; } .orb__ring--2 { inset: 14px; animation-delay: -1.2s; } .orb__ring--3 { inset: 28px; animation-delay: -2.4s; } @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } } @keyframes pulse { 0% { transform: scale(.85); opacity: .8; } 50% { transform: scale(1.06); opacity: .35; } 100% { transform: scale(.85); opacity: .8; } } .surface__greet { font-family: var(--font-rounded); font-weight: 600; font-size: 26px; letter-spacing: -0.02em; margin-bottom: 6px; } .surface__sub { font-size: 14px; color: var(--text-2); margin-bottom: var(--sp-md); } .surface__pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .pill { padding: 5px 12px; background: var(--surface-high); border: 1px solid var(--hairline); border-radius: var(--r-pill); font-size: 12px; color: var(--text-2); } .pill--ok { border-color: rgba(70,196,140,.4); background: rgba(70,196,140,.08); color: var(--ok); } @media (max-width: 760px) { .surface__body { grid-template-columns: 1fr; } .surface__sidebar { display: none; } } /* Feature grid */ .bimi__features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); margin-bottom: var(--sp-xl); } .feature { padding: var(--sp-md); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); transition: border-color .3s var(--ease-out), transform .3s var(--ease-out); } .feature:hover { border-color: var(--hairline-cyan); transform: translateY(-2px); } .feature__head { margin-bottom: 12px; } .feature h3 { font-family: var(--font-rounded); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; } .feature__lede { font-size: 14px; color: var(--aurora-cyan); margin: 0; } .feature > p { font-size: 15px; color: var(--text-2); line-height: 1.55; } @media (max-width: 1000px) { .bimi__features { grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { .bimi__features { grid-template-columns: 1fr; } } .bimi__cta { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .bimi__cta-note { font-size: 13px; color: var(--text-3); } /* =========================================================== PRIVACY MANIFESTO =========================================================== */ .section--privacy { background: linear-gradient(180deg, var(--canvas) 0%, var(--surface) 50%, var(--canvas) 100%); } .manifesto { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); margin-top: var(--sp-xl); } .manifesto li { padding: var(--sp-md); background: var(--surface-high); border: 1px solid var(--hairline); border-radius: var(--r-card); transition: border-color .3s var(--ease-out); position: relative; overflow: hidden; } .manifesto li::before { content: ""; position: absolute; inset: 0; background: var(--aurora-gradient-soft); opacity: 0; transition: opacity .3s var(--ease-out); pointer-events: none; } .manifesto li:hover::before { opacity: 1; } .manifesto li:hover { border-color: var(--hairline-cyan); } .manifesto__num { font-family: var(--font-rounded); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; background: var(--aurora-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 8px; } .manifesto h3 { font-family: var(--font-rounded); font-size: 19px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 8px; position: relative; } .manifesto p { font-size: 15px; color: var(--text-2); line-height: 1.55; position: relative; } @media (max-width: 800px) { .manifesto { grid-template-columns: 1fr; } } /* =========================================================== ABOUT =========================================================== */ .section--about { background: var(--canvas); } .about__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-xxl); align-items: start; } .about__copy p { font-size: 17px; color: var(--text-2); margin-bottom: var(--sp-md); line-height: 1.6; } .about__sig { margin-top: var(--sp-lg) !important; font-family: var(--font-rounded); font-size: 16px !important; color: var(--text-1) !important; } .about__sig span { font-size: 13px; color: var(--text-3); font-family: var(--font-ui); } .about__card { padding: var(--sp-md); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); position: sticky; top: 100px; } .about__card-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--aurora-cyan); font-weight: 600; margin-bottom: var(--sp-sm); } .about__card ul { list-style: none; display: flex; flex-direction: column; gap: 12px; } .about__card li { display: flex; gap: 12px; padding-left: 22px; position: relative; font-family: var(--font-rounded); font-size: 15px; color: var(--text-2); letter-spacing: -0.005em; line-height: 1.45; } .about__card li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--aurora-gradient); } @media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; gap: var(--sp-xl); } .about__card { position: static; } } /* =========================================================== BETA =========================================================== */ .section--beta { background: radial-gradient(60% 50% at 50% 50%, rgba(124,92,255,.10), transparent 60%), var(--canvas); } .beta__card { max-width: 760px; margin: 0 auto; padding: var(--sp-xxl) var(--sp-xl); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-section); text-align: center; position: relative; overflow: hidden; } .beta__card::before { content: ""; position: absolute; inset: -2px; background: var(--aurora-gradient); border-radius: var(--r-section); z-index: -1; filter: blur(20px) saturate(120%); opacity: .35; } .beta__sparkle { width: 36px; height: 36px; margin: 0 auto var(--sp-md); filter: drop-shadow(0 0 16px rgba(61,123,245,.65)); } .beta__form { margin-top: var(--sp-lg); display: grid; gap: var(--sp-sm); text-align: left; } .beta__label { display: grid; gap: 6px; } .beta__label span { font-size: 13px; font-weight: 500; color: var(--text-2); letter-spacing: -0.005em; } .beta__form input, .beta__form textarea { padding: 12px 14px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-control); color: var(--text-1); font-size: 15px; resize: vertical; transition: border-color .2s var(--ease-out), background .2s var(--ease-out); } .beta__form input:focus, .beta__form textarea:focus { outline: none; border-color: var(--aurora-cyan); background: var(--surface-high); } .beta__form button { justify-self: center; margin-top: 6px; } .beta__note { font-size: 13px; color: var(--text-3); text-align: center; margin-top: 6px; } /* =========================================================== FOOTER =========================================================== */ .foot { background: var(--canvas-deep); border-top: 1px solid var(--hairline); padding: var(--sp-xl) 28px var(--sp-lg); } .foot__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: var(--sp-md) var(--sp-xl); align-items: center; } .foot__brand { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } .foot__sparkle { width: 18px; height: 18px; } .foot__wordmark { font-family: var(--font-rounded); font-weight: 700; font-size: 15px; background: var(--aurora-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .foot__tag { font-size: 13px; color: var(--text-3); margin-left: 6px; } .foot__nav { display: flex; gap: var(--sp-md); flex-wrap: wrap; } .foot__nav a { font-size: 13px; color: var(--text-2); } .foot__nav a:hover { color: var(--text-1); } .foot__copy { grid-column: 1 / -1; font-size: 12px; color: var(--text-3); border-top: 1px solid var(--hairline); padding-top: var(--sp-md); } @media (max-width: 700px) { .foot__inner { grid-template-columns: 1fr; } } /* =========================================================== REVEAL ANIMATIONS =========================================================== */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .orb__core, .orb__ring { animation: none !important; } .hero__scroll span { animation: none; } * { transition: none !important; } }