/* ========================================================================== The Strange Labs — design system Light is the default theme. Dark is opt-in via . ========================================================================== */ /* ---------- Tokens ---------- */ :root { color-scheme: light; --bg: #FBFBFD; --bg-sunk: #F3F3F7; --surface: #FFFFFF; --surface-2: #F7F7FA; --surface-hover: #FFFFFF; --border: #E7E7EF; --border-strong: #D6D6E2; --text: #0B0B12; --text-2: #3B3B48; --muted: #6C6C7C; --faint: #9A9AAB; --accent: #6D28D9; --accent-2: #7C3AED; --accent-ink: #FFFFFF; --accent-soft: rgba(109, 40, 217, 0.07); --accent-line: rgba(109, 40, 217, 0.20); --ok: #059669; --shadow-sm: 0 1px 2px rgba(16, 16, 40, 0.05); --shadow-md: 0 4px 14px -4px rgba(16, 16, 40, 0.10), 0 2px 5px -2px rgba(16, 16, 40, 0.05); --shadow-lg: 0 18px 48px -16px rgba(16, 16, 40, 0.18), 0 6px 16px -8px rgba(16, 16, 40, 0.08); --shadow-accent: 0 12px 32px -10px rgba(109, 40, 217, 0.45); --grid-line: rgba(11, 11, 18, 0.045); --glow-a: rgba(124, 58, 237, 0.16); --glow-b: rgba(56, 189, 248, 0.10); --nav-bg: rgba(251, 251, 253, 0.72); /* Typography — swapped live by the font switcher */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: var(--font-sans); --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --display-weight: 640; --display-tracking: -0.035em; --max: 1200px; --max-narrow: 880px; --radius: 14px; --radius-lg: 22px; --ease: cubic-bezier(0.21, 0.47, 0.32, 0.98); } :root[data-theme="dark"] { color-scheme: dark; --bg: #08080B; --bg-sunk: #0C0C11; --surface: #121218; --surface-2: #16161D; --surface-hover: #1A1A22; --border: rgba(255, 255, 255, 0.085); --border-strong: rgba(255, 255, 255, 0.17); --text: #FAFAFC; --text-2: #C7C7D3; --muted: #8C8C9D; --faint: #6A6A7A; --accent: #7C3AED; --accent-2: #A78BFA; --accent-ink: #FFFFFF; --accent-soft: rgba(139, 92, 246, 0.12); --accent-line: rgba(139, 92, 246, 0.28); --ok: #34D399; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 16px -4px rgba(0, 0, 0, 0.6); --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.75); --shadow-accent: 0 12px 36px -10px rgba(124, 58, 237, 0.55); --grid-line: rgba(255, 255, 255, 0.045); --glow-a: rgba(124, 58, 237, 0.22); --glow-b: rgba(56, 189, 248, 0.12); --nav-bg: rgba(8, 8, 11, 0.72); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; } body { min-height: 100dvh; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; transition: background-color .35s var(--ease), color .35s var(--ease); overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } :focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; } ::selection { background: var(--accent); color: #fff; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 1rem; top: 1rem; z-index: 200; background: var(--accent); color: #fff; padding: .6rem 1rem; border-radius: 999px; font-size: .875rem; } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 1.25rem; } @media (min-width: 640px) { .wrap { padding-inline: 2rem; } } .section { position: relative; padding-block: 5rem; } @media (min-width: 768px) { .section { padding-block: 7rem; } } .section--tight { padding-block: 4rem; } .section--sunk { background: var(--bg-sunk); } .section--sunk + .section--sunk { padding-top: 0; } .divider { height: 1px; background: var(--border); border: 0; } /* ---------- Typography ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-2); } .eyebrow--muted { color: var(--muted); } .display { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.04; text-wrap: balance; } h1.display { font-size: clamp(2.5rem, 6.2vw, 4.75rem); } h2.display { font-size: clamp(1.95rem, 4vw, 3rem); line-height: 1.08; } h3 { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.35; } .lede { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.65; color: var(--muted); text-wrap: pretty; } .body-text { color: var(--text-2); line-height: 1.72; } .muted { color: var(--muted); } .accent-text { color: var(--accent-2); } .section-head { max-width: 720px; } .section-head .display { margin-top: 1rem; } .section-head .lede { margin-top: 1.15rem; } .section-head--center { margin-inline: auto; text-align: center; } /* ---------- Decorative ---------- */ .deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .grid-bg { position: absolute; inset: -1px; background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 68px 68px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%); } .glow { position: absolute; top: -18%; left: 50%; transform: translateX(-50%); width: min(1100px, 130vw); aspect-ratio: 2 / 1; background: radial-gradient(50% 60% at 40% 50%, var(--glow-a), transparent 70%), radial-gradient(45% 55% at 65% 45%, var(--glow-b), transparent 70%); filter: blur(28px); opacity: .9; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.75rem; padding-inline: 1.35rem; border-radius: 999px; border: 1px solid transparent; font-size: .9375rem; font-weight: 550; letter-spacing: -.01em; cursor: pointer; white-space: nowrap; transition: transform .18s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .25s var(--ease), color .2s var(--ease); } .btn:active { transform: scale(.975); } .btn--lg { height: 3.125rem; padding-inline: 1.75rem; font-size: 1rem; } .btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); } .btn--primary:hover { background: var(--accent-2); box-shadow: var(--shadow-accent); transform: translateY(-1px); } .btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .btn--secondary:hover { border-color: var(--accent-line); background: var(--surface-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn--ghost { color: var(--muted); } .btn--ghost:hover { color: var(--text); } .btn .arrow { transition: transform .25s var(--ease); } .btn:hover .arrow { transform: translateX(3px); } .link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-weight: 550; font-size: .9375rem; color: var(--accent-2); } .link-arrow svg { transition: transform .25s var(--ease); } .link-arrow:hover svg { transform: translateX(4px); } /* ---------- Header ---------- */ .header { position: sticky; top: 0; z-index: 90; transition: box-shadow .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease); border-bottom: 1px solid transparent; } .header.is-stuck { background: var(--nav-bg); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom-color: var(--border); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4.5rem; transition: height .3s var(--ease); } .header.is-stuck .header__inner { height: 3.875rem; } .brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 620; letter-spacing: -.025em; font-size: 1.0625rem; font-family: var(--font-display); } .brand__mark { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 8px; background: linear-gradient(140deg, var(--accent-2), var(--accent)); color: #fff; box-shadow: var(--shadow-accent); } .brand__mark svg { width: 100%; height: 100%; } /* The header mark is always on screen, so run it slower and softer than the chat launcher, which is meant to attract attention. */ .brand__mark .bub { animation-duration: 4.2s; r: .9; } .brand__mark .bub-out { animation-duration: 5.4s; r: .5; } .brand__mark .flask-liquid { opacity: .34; } /* Logo in place of an initial (chat mock) */ .avatar--logo { padding: 0; border: 0; background: none; box-shadow: none; } .avatar--logo .brand__mark { width: 100%; height: 100%; border-radius: 999px; } .nav { display: none; align-items: center; gap: .25rem; } @media (min-width: 1024px) { .nav { display: flex; } } .nav a { position: relative; padding: .5rem .75rem; border-radius: 8px; font-size: .90625rem; font-weight: 500; color: var(--muted); transition: color .2s var(--ease), background-color .2s var(--ease); } .nav a:hover { color: var(--text); background: var(--accent-soft); } .nav a[aria-current="page"] { color: var(--text); } .nav a[aria-current="page"]::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .18rem; height: 2px; border-radius: 2px; background: var(--accent-2); } .header__actions { display: flex; align-items: center; gap: .5rem; } .header__cta { display: none; } @media (min-width: 640px) { .header__cta { display: inline-flex; } } /* Icon buttons (theme toggle, font panel, menu) */ .icon-btn { display: grid; place-items: center; width: 2.375rem; height: 2.375rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease), transform .18s var(--ease); } .icon-btn:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); } .icon-btn:active { transform: scale(.94); } .icon-btn svg { width: 1.0625rem; height: 1.0625rem; } .menu-btn { display: grid; } @media (min-width: 1024px) { .menu-btn { display: none; } } /* Theme toggle icon crossfade */ .icon-btn .i-sun, .icon-btn .i-moon { grid-area: 1 / 1; transition: opacity .28s var(--ease), transform .38s var(--ease); } :root:not([data-theme="dark"]) .i-moon { opacity: 0; transform: rotate(-70deg) scale(.6); } :root[data-theme="dark"] .i-sun { opacity: 0; transform: rotate(70deg) scale(.6); } /* Mobile drawer */ .drawer { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; flex-direction: column; padding: 1.25rem; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s; } .drawer.is-open { opacity: 1; visibility: visible; transform: none; } .drawer__top { display: flex; align-items: center; justify-content: space-between; height: 3rem; } .drawer__nav { display: flex; flex-direction: column; gap: .25rem; margin-top: 2rem; } .drawer__nav a { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; letter-spacing: -.03em; padding: .6rem 0; color: var(--text-2); border-bottom: 1px solid var(--border); transition: color .2s var(--ease); } /* Links are visible by default and animate IN with fill-mode backwards, so the menu is never invisible if the animation is blocked or never runs. */ .drawer.is-open .drawer__nav a { animation: drawerIn .45s var(--ease) backwards; } .drawer__nav a:hover { color: var(--accent-2); } .drawer__foot { margin-top: auto; display: grid; gap: .75rem; } @keyframes drawerIn { from { opacity: 0; transform: translateY(10px); } } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding-block: 5.5rem 4.5rem; } @media (min-width: 768px) { .hero { padding-block: 8rem 6.5rem; } } .hero__inner { position: relative; max-width: 940px; margin-inline: auto; text-align: center; } .badge { display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .85rem .4rem .7rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .pulse { position: relative; display: inline-flex; width: 6px; height: 6px; } .pulse::before { content: ""; position: absolute; inset: 0; border-radius: 999px; background: var(--ok); animation: ping 2s cubic-bezier(0, 0, .2, 1) infinite; } .pulse::after { content: ""; position: relative; width: 6px; height: 6px; border-radius: 999px; background: var(--ok); } @keyframes ping { 75%, 100% { transform: scale(2.4); opacity: 0; } } .hero__inner .display { margin-top: 1.75rem; } .hero__inner .lede { margin: 1.6rem auto 0; max-width: 38rem; } .hero__cta { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; } .hero__note { margin-top: 3.5rem; font-size: .875rem; color: var(--faint); } /* Logo / capability marquee */ .marquee { margin-top: 4rem; position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee__track { display: flex; gap: 3rem; width: max-content; animation: slide 38s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__item { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); white-space: nowrap; } @keyframes slide { to { transform: translateX(-50%); } } /* ---------- Cards ---------- */ .grid { display: grid; gap: 1rem; } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); } .card { position: relative; padding: 1.6rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); overflow: hidden; } .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--accent-soft), transparent 60%); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; } .card:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: var(--shadow-lg); } .card:hover::after { opacity: 1; } .card__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--faint); } .card__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--accent-soft); color: var(--accent-2); border: 1px solid var(--accent-line); margin-bottom: 1.1rem; } .card__icon svg { width: 1.15rem; height: 1.15rem; } .card h3 { margin-bottom: .5rem; } .card p { font-size: .9375rem; color: var(--muted); line-height: 1.65; } /* Stats */ .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } @media (min-width: 760px) { .stats--4 { grid-template-columns: repeat(4, 1fr); } } .stat { background: var(--surface); padding: 1.5rem 1rem; text-align: center; } @media (min-width: 640px) { .stat { padding: 1.75rem 1.5rem; } } .stat__value { font-family: var(--font-display); font-size: clamp(1.4rem, 3.4vw, 2.5rem); font-weight: 640; letter-spacing: -.035em; line-height: 1.05; overflow-wrap: break-word; } .stat__label { margin-top: .5rem; font-size: .8125rem; color: var(--muted); letter-spacing: .01em; } /* Checklist */ .checklist { display: grid; gap: .8rem; } .checklist li { display: flex; align-items: flex-start; gap: .7rem; font-size: .9375rem; color: var(--text-2); } .checklist svg { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .15rem; color: var(--accent-2); } /* Pills */ .pills { display: flex; flex-wrap: wrap; gap: .5rem; } .pill { padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: .8125rem; color: var(--text-2); transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); } .pill:hover { border-color: var(--accent-line); color: var(--accent-2); transform: translateY(-1px); } /* Case study */ .case { display: grid; gap: 1.5rem; padding: 1.75rem; } @media (min-width: 900px) { .case { grid-template-columns: 1fr 1.35fr; gap: 2.5rem; padding: 2.25rem; align-items: start; } } .case__tag { display: inline-block; padding: .3rem .7rem; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-2); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; } .case h3 { margin-top: .9rem; font-size: 1.5rem; letter-spacing: -.03em; } .case__rows { display: grid; gap: 1.1rem; } .case__row { display: grid; gap: .3rem; } .case__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); } .case__v { font-size: .9375rem; color: var(--text-2); } /* Testimonials */ .quote { display: flex; flex-direction: column; gap: 1.25rem; } .quote__mark { font-family: var(--font-display); font-size: 2.5rem; line-height: 1; color: var(--accent-line); } .quote p { font-size: 1rem; line-height: 1.7; color: var(--text-2); } .quote__by { display: flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: .5rem; } .avatar { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-2); font-size: .8125rem; font-weight: 600; } /* Service block (services page) */ .service { display: grid; gap: 1.25rem; padding: 1.75rem 0; border-top: 1px solid var(--border); transition: background-color .3s var(--ease); } @media (min-width: 860px) { .service { grid-template-columns: .85fr 1.15fr; gap: 3rem; padding: 2.25rem 0; } } .service__idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--faint); } .service h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 620; letter-spacing: -.03em; margin-top: .6rem; line-height: 1.15; } /* FAQ */ .faq { border-top: 1px solid var(--border); } .faq__item { border-bottom: 1px solid var(--border); } .faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.35rem 0; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 560; letter-spacing: -.015em; color: var(--text); transition: color .2s var(--ease); } .faq__q:hover { color: var(--accent-2); } .faq__icon { flex: none; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); transition: transform .3s var(--ease), border-color .2s var(--ease), color .2s var(--ease); } .faq__q[aria-expanded="true"] .faq__icon { transform: rotate(45deg); border-color: var(--accent-line); color: var(--accent-2); } .faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--ease); } .faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; } .faq__a > div { overflow: hidden; } .faq__a p { padding-bottom: 1.35rem; max-width: 60ch; color: var(--muted); font-size: .9375rem; line-height: 1.7; } /* Chat mock (WhatsApp page) */ .chat { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; } .chat__head { display: flex; align-items: center; gap: .75rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--border); background: var(--surface-2); } .chat__name { font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; } .chat__status { font-size: .75rem; color: var(--ok); } .chat__body { display: grid; gap: .6rem; padding: 1.1rem; background: var(--bg-sunk); } .bubble { max-width: 82%; padding: .6rem .85rem; border-radius: 14px; font-size: .875rem; line-height: 1.5; box-shadow: var(--shadow-sm); } .bubble--in { justify-self: start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 4px; } .bubble--out { justify-self: end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; } .bubble time { display: block; margin-top: .25rem; font-size: 10px; opacity: .6; } /* ---------- Forms ---------- */ .form { display: grid; gap: 1.1rem; } .field { display: grid; gap: .45rem; } .field label { font-size: .8125rem; font-weight: 550; color: var(--text-2); letter-spacing: .005em; } .field input, .field select, .field textarea { width: 100%; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); color: var(--text); font-size: .9375rem; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease); } .field textarea { resize: vertical; min-height: 8rem; } .field input::placeholder, .field textarea::placeholder { color: var(--faint); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-soft); } .field-row { display: grid; gap: 1.1rem; } @media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } } .contact-line { display: flex; align-items: center; gap: .85rem; padding: 1rem 0; border-bottom: 1px solid var(--border); } .contact-line__icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-2); flex: none; } .contact-line__icon svg { width: 1rem; height: 1rem; } .contact-line__k { font-size: .75rem; color: var(--faint); letter-spacing: .05em; text-transform: uppercase; font-family: var(--font-mono); } .contact-line__v { font-size: .9375rem; font-weight: 500; } /* ---------- CTA band ---------- */ .cta { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 28px; background: var(--surface); padding: 3rem 1.75rem; text-align: center; box-shadow: var(--shadow-md); } @media (min-width: 768px) { .cta { padding: 4.5rem 3rem; } } .cta .display { position: relative; } .cta .lede { position: relative; margin: 1.1rem auto 0; max-width: 34rem; } .cta__actions { position: relative; margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; } /* ---------- Footer ---------- */ .footer { border-top: 1px solid var(--border); padding-block: 3.5rem 2.5rem; background: var(--bg-sunk); } .footer__grid { display: grid; gap: 2.5rem; } @media (min-width: 760px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; } } .footer__tag { margin-top: .9rem; font-size: .9375rem; color: var(--muted); max-width: 26ch; } .footer__title { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 1rem; } .footer__links { display: grid; gap: .6rem; } .footer__links a { font-size: .9375rem; color: var(--muted); transition: color .2s var(--ease); width: fit-content; } .footer__links a:hover { color: var(--accent-2); } .footer__bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; font-size: .8125rem; color: var(--faint); } /* ---------- Scroll reveal ---------- */ [data-reveal] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .72s var(--ease) var(--reveal-delay, 0ms), transform .72s var(--ease) var(--reveal-delay, 0ms), filter .72s var(--ease) var(--reveal-delay, 0ms); filter: blur(6px); will-change: opacity, transform; } [data-reveal="left"] { transform: translate3d(-26px, 0, 0); } [data-reveal="right"] { transform: translate3d(26px, 0, 0); } [data-reveal="scale"] { transform: scale(.955); } [data-reveal="fade"] { transform: none; } [data-reveal].is-in { opacity: 1; transform: none; filter: blur(0); } /* Scroll progress bar */ .progress { position: fixed; top: 0; left: 0; z-index: 120; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); pointer-events: none; } /* Parallax-lite float */ .float { animation: float 7s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } /* ---------- Font switcher (TEST TOOL — remove before launch) ---------- */ /* Hidden from visitors by default. Add ?fonts to any URL to reveal it; the choice is remembered as you browse. ?fonts=off hides it again. */ .fontlab { display: none; } .fontlab.is-enabled { position: fixed; right: 1rem; bottom: 1rem; z-index: 130; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; /* The closed panel still occupies layout (visibility, not display), so the container must not swallow taps over the rest of the page. */ pointer-events: none; } .fontlab__toggle { display: inline-flex; align-items: center; gap: .5rem; height: 2.5rem; padding-inline: .9rem; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); cursor: pointer; pointer-events: auto; font-size: .8125rem; font-weight: 550; transition: transform .2s var(--ease); } .fontlab__toggle:hover { transform: translateY(-2px); } .fontlab__panel { width: min(21rem, calc(100vw - 2rem)); border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-lg); padding: 1rem; max-height: min(70vh, 34rem); overflow-y: auto; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px) scale(.98); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; } .fontlab.is-open .fontlab__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } .fontlab__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .25rem; } .fontlab__head strong { font-size: .875rem; } .fontlab__hint { font-size: .75rem; color: var(--faint); line-height: 1.5; margin-bottom: .85rem; } .fontlab__list { display: grid; gap: .3rem; } .fontopt { display: grid; gap: .1rem; width: 100%; text-align: left; padding: .6rem .7rem; border-radius: 11px; border: 1px solid transparent; background: none; cursor: pointer; transition: background-color .18s var(--ease), border-color .18s var(--ease); } .fontopt:hover { background: var(--surface-2); } .fontopt[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent-soft); } .fontopt__name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; color: var(--text); } .fontopt__meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } .fontlab__foot { margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--border); display: grid; gap: .5rem; } .fontlab__current { font-family: var(--font-mono); font-size: 11px; color: var(--muted); word-break: break-word; } .fontlab__copy { justify-self: start; font-size: .75rem; color: var(--accent-2); background: none; border: 0; cursor: pointer; padding: 0; } /* ---------- Motion preferences ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } [data-reveal] { opacity: 1; transform: none; filter: none; } .marquee__track { animation: none; } } /* ---------- Split (two-column) layout ---------- */ .split { grid-template-columns: 1fr; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; align-items: start; } .split--form { grid-template-columns: .8fr 1.2fr; } } /* ========================================================================== Maya — chat widget ========================================================================== */ .chatbot { position: fixed; right: 1rem; bottom: 1rem; z-index: 140; pointer-events: none; } /* ---- Launcher: a live flask, bubbling ---- */ .chatbot__launch { position: absolute; right: 0; bottom: 0; width: 3.5rem; height: 3.5rem; padding: 0; display: grid; place-items: center; border: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(150deg, var(--accent-2), var(--accent)); color: #fff; box-shadow: var(--shadow-accent), var(--shadow-md); pointer-events: auto; transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .chatbot__launch:hover { transform: translateY(-2px) scale(1.04); } .chatbot__launch:active { transform: scale(.95); } .chatbot__launch svg { width: 2rem; height: 2rem; overflow: visible; } /* Breathing halo so it reads as "live" */ .chatbot__launch::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--accent-2); animation: haloPulse 2.8s var(--ease) infinite; } @keyframes haloPulse { 0% { opacity: .55; transform: scale(1); } 70% { opacity: 0; transform: scale(1.45); } 100% { opacity: 0; transform: scale(1.45); } } .flask-outline { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; } .flask-liquid { fill: currentColor; opacity: .32; } /* Bubbles inside the flask body */ .bub { fill: currentColor; opacity: 0; transform-box: fill-box; transform-origin: center; animation: bubRise 2.4s ease-in infinite; } .bub-1 { animation-delay: 0s; } .bub-2 { animation-delay: .55s; } .bub-3 { animation-delay: 1.1s; } .bub-4 { animation-delay: 1.65s; } @keyframes bubRise { 0% { opacity: 0; transform: translateY(1px) scale(.35); } 20% { opacity: .95; } 75% { opacity: .75; } 100% { opacity: 0; transform: translateY(-6.5px) scale(1.15); } } /* Bubbles escaping the neck, above the flask */ .bub-out { fill: currentColor; opacity: 0; transform-box: fill-box; transform-origin: center; animation: bubEscape 3.2s ease-out infinite; } .bub-out-1 { animation-delay: .3s; } .bub-out-2 { animation-delay: 1.6s; } @keyframes bubEscape { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(1.5px, -7px) scale(1); } } .chatbot__launch .i-close { display: none; width: 1.35rem; height: 1.35rem; } .chatbot.is-open .chatbot__launch .i-flask { display: none; } .chatbot.is-open .chatbot__launch .i-close { display: block; } .chatbot.is-open .chatbot__launch::before { animation: none; opacity: 0; } /* Unread nudge */ .chatbot__dot { position: absolute; top: .15rem; right: .15rem; width: .6rem; height: .6rem; border-radius: 999px; background: var(--ok); border: 2px solid var(--bg); } /* ---- Panel ---- */ .chatbot__panel { position: absolute; right: 0; bottom: 4.25rem; width: min(23rem, calc(100vw - 2rem)); height: min(30rem, calc(100dvh - 7rem)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px) scale(.97); transform-origin: 100% 100%; transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; } .chatbot.is-open .chatbot__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } .chatbot__head { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface-2); } .chatbot__avatar { display: grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 999px; background: linear-gradient(150deg, var(--accent-2), var(--accent)); color: #fff; } .chatbot__avatar svg { width: 1.15rem; height: 1.15rem; } .chatbot__title { font-size: .875rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; } .chatbot__sub { font-size: .6875rem; color: var(--muted); } .chatbot__head .icon-btn { margin-left: auto; width: 1.85rem; height: 1.85rem; border-radius: 8px; } .chatbot__head .icon-btn svg { width: .9rem; height: .9rem; } .chatbot__log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; background: var(--bg-sunk); } .msg { max-width: 88%; padding: .55rem .8rem; border-radius: 14px; font-size: .875rem; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; } .msg--bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 5px; color: var(--text-2); } .msg--user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; } .msg--err { align-self: flex-start; background: var(--surface); border: 1px dashed var(--border-strong); color: var(--muted); font-size: .8125rem; } /* Typing indicator */ .typing { display: inline-flex; gap: .22rem; align-items: center; padding: .2rem 0; } .typing span { width: .32rem; height: .32rem; border-radius: 999px; background: var(--faint); animation: typing 1.3s ease-in-out infinite; } .typing span:nth-child(2) { animation-delay: .18s; } .typing span:nth-child(3) { animation-delay: .36s; } @keyframes typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2.5px); } } /* Starter chips */ .chatbot__chips { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 1rem .6rem; background: var(--bg-sunk); } .chatbot__chip { padding: .35rem .65rem; border-radius: 999px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); font-size: .75rem; color: var(--text-2); transition: border-color .2s var(--ease), color .2s var(--ease); } .chatbot__chip:hover { border-color: var(--accent-line); color: var(--accent-2); } .chatbot__form { display: flex; align-items: flex-end; gap: .5rem; padding: .7rem; border-top: 1px solid var(--border); background: var(--surface); } .chatbot__input { flex: 1; resize: none; max-height: 5.5rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); color: var(--text); font-size: .875rem; line-height: 1.45; } .chatbot__input:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-soft); } .chatbot__send { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 10px; background: var(--accent); color: #fff; cursor: pointer; transition: background-color .2s var(--ease), opacity .2s var(--ease); } .chatbot__send:hover { background: var(--accent-2); } .chatbot__send:disabled { opacity: .45; cursor: not-allowed; } .chatbot__send svg { width: 1rem; height: 1rem; } .chatbot__note { padding: 0 .7rem .6rem; background: var(--surface); font-size: .625rem; color: var(--faint); text-align: center; line-height: 1.4; } /* Full-height sheet on small screens */ @media (max-width: 480px) { .chatbot__panel { position: fixed; right: .5rem; left: .5rem; bottom: 4.5rem; width: auto; height: min(26rem, calc(100dvh - 8rem)); } } /* Keep the font lab clear of the launcher when it is enabled */ .fontlab.is-enabled { bottom: 5.75rem; } @media (prefers-reduced-motion: reduce) { .chatbot__launch::before, .bub, .bub-out, .typing span { animation: none; } .bub, .bub-out { opacity: .8; } }