@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Sora:wght@600;700;800&display=swap"); /* DAYLIGHT IS THE DEFAULT and therefore lives on :root. It used to be the other way around — :root held the dark palette while common.js defaults the theme to "daylight" — and because common.js is the LAST element in , every cold page load painted dark and then snapped to light. Putting the default palette on :root fixes that with no inline script on nine separate pages, and it covers login.html for free. */ :root { --font-display: "Sora", "Inter", "Segoe UI", sans-serif; --bg: #f5f7fc; --bg-2: #ffffff; --card: #ffffff; --card-2: #f1f4fb; --border: #e4e9f3; --border-soft: #eef1f8; --text: #121a2b; --muted: #5a6a86; --accent: #5b5bf0; --accent-2: #7c3aed; --accent-3: #0ea5e9; --accent-ink: #4f46e5; --green: #109d5b; --amber: #b9770f; --red: #d8433a; /* Alias: several pages were written against --danger, which never existed, so they silently fell back to a hardcoded hex that ignored the theme. */ --danger: var(--red); --shadow: 0 1px 2px rgba(20, 30, 60, 0.06), 0 18px 44px -18px rgba(30, 41, 90, 0.18); --shadow-sm: 0 1px 2px rgba(20, 30, 60, 0.05), 0 8px 22px -12px rgba(30, 41, 90, 0.14); --ring: 0 0 0 3px rgba(91, 91, 240, 0.18); --radius: 16px; --radius-sm: 10px; --bg-glow: radial-gradient(1100px 640px at 88% -12%, rgba(124, 111, 255, 0.12), transparent 60%), radial-gradient(760px 520px at -5% 0%, rgba(16, 157, 91, 0.05), transparent 55%), var(--bg); --nav-bg: rgba(255, 255, 255, 0.78); } [data-theme="midnight"] { --bg: #0b0f1a; --bg-2: #121829; --card: #141b2d; --card-2: #1b2438; --border: #26314a; --border-soft: #1e2740; --text: #eef2fb; --muted: #93a1bd; --accent: #818cf8; --accent-2: #a78bfa; --accent-3: #38bdf8; --accent-ink: #6366f1; --green: #34d399; --amber: #fbbf24; --red: #f87171; --danger: var(--red); --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 34px -12px rgba(0, 0, 0, 0.6); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25), 0 6px 16px -8px rgba(0, 0, 0, 0.5); --ring: 0 0 0 3px rgba(129, 140, 248, 0.35); --bg-glow: radial-gradient(1100px 640px at 88% -12%, rgba(124, 111, 255, 0.2), transparent 60%), radial-gradient(760px 520px at -5% 0%, rgba(52, 211, 153, 0.07), transparent 55%), var(--bg); --nav-bg: rgba(11, 15, 26, 0.72); } * { box-sizing: border-box; } /* The UA stylesheet's [hidden] rule is a bare attribute selector, so ANY class that sets `display` beats it and the element stays visible. Every use of the hidden attribute in this project depends on this rule. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Type scale "A · Refined": ~12% down from the old 16px-base scale. */ font-size: 15px; background: var(--bg-glow); background-attachment: fixed; color: var(--text); min-height: 100vh; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; overflow-x: hidden; } h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.15; } a { color: var(--accent); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--accent-2); } ::selection { background: rgba(129, 140, 248, 0.3); } /* ---------- Nav ---------- */ /* Desktop: the bar scrolls away with the page, exactly as it always has. Only MOBILE pins the holder (see the 720px block) so the bar can melt into a floating menu button while you scroll. */ /* N4 · minimal hairline: flat ground, one thin border, no glass, no glow. */ .nav { display: flex; align-items: center; gap: 8px; padding: 14px 28px; background: var(--bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 17px; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--text); margin-right: auto; } .brand .logo { width: 42px; height: 42px; border-radius: 10px; border: 0; padding: 0; position: relative; cursor: pointer; /* monochrome mark: black triangle on a white tile, in both themes */ background: #fff; border: 1px solid var(--border); display: grid; place-items: center; flex-shrink: 0; color: #131a2b; box-shadow: 0 4px 12px -4px rgba(20, 30, 60, 0.25); transition: transform 0.18s ease; } /* The logo IS the theme toggle. The pulsing badge, the hover wiggle and the tooltip all hint at it; a tap spins it a full turn while the theme flips. */ .brand .logo:hover { transform: rotate(-10deg) scale(1.07); } .brand .logo:active { transform: scale(0.93); } .brand .logo .theme-hint { /* corner, not centre — a centred badge sits exactly on top of the AA triangle mark and hides it */ position: absolute; left: -4px; bottom: -4px; width: 15px; height: 15px; border-radius: 50%; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); font-size: 8px; line-height: 1; display: grid; place-items: center; animation: theme-hint-pulse 4.5s ease-in-out infinite; } @keyframes theme-hint-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } 50% { transform: scale(1.1); box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--accent) 16%, transparent); } } .brand .logo.theme-flip { animation: theme-flip 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes theme-flip { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(0.8); } 100% { transform: rotate(360deg) scale(1); } } @media (prefers-reduced-motion: reduce) { .brand .logo .theme-hint, .brand .logo.theme-flip { animation: none; } .nav-overlay, .nav-overlay a.link { transition-duration: 0.01s; } .nav-overlay.open a.link { transition-delay: 0s; } .profile-menu.open { animation: none; } } .brand small { display: block; font-weight: 500; font-size: 10.5px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; } /* The name is a plain link to Home; the logo beside it flips the theme. */ .brand-name, .brand-name:hover { color: var(--text); min-width: 0; } /* K6 wordmark: B·I·A·A·C with accent interpuncts. */ .wordmark { font-weight: 800; font-size: 15px; letter-spacing: 1px; color: var(--text); white-space: nowrap; } .wordmark i { font-style: normal; color: var(--accent); font-weight: 900; padding: 0 2.5px; } .brand-name b { color: var(--text); font-weight: 800; letter-spacing: -0.01em; } .nav a.link { padding: 8px 11px; color: var(--muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; transition: color 0.15s ease; } .nav a.link:hover { color: var(--text); background: none; } .nav a.link.active { color: var(--accent); background: none; box-shadow: none; } .nav-links { display: flex; align-items: center; gap: 8px; order: 2; } /* The frosted mobile menu; desktop never shows it. Its full styling lives in the max-width: 720px block below. */ .nav-overlay { display: none; } /* ---------- Profile chip (signed in) ---------- */ /* Sits at the corner, outside the collapsible links, so it stays visible on phones without opening the hamburger. */ .nav-profile { position: relative; order: 4; } .avatar-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: linear-gradient(140deg, var(--accent-3), var(--accent) 55%, var(--accent-2)); color: #fff; font: inherit; font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: transform 0.06s ease, box-shadow 0.2s ease; } .avatar-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } /* P1 identity drop card: a mini ID card tumbles from the avatar — gradient band, overlapping avatar, the email, a small quiet role line, icon rows. */ .profile-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 244px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.4); overflow: hidden; display: none; z-index: 30; transform-origin: top right; } .profile-menu.open { display: block; animation: profile-tumble 0.45s cubic-bezier(0.34, 1.45, 0.64, 1); } @keyframes profile-tumble { from { opacity: 0; transform: translateY(-10px) rotate(3deg) scale(0.85); } to { opacity: 1; transform: none; } } .profile-band { height: 40px; background: linear-gradient(140deg, var(--accent-3), var(--accent) 55%, var(--accent-2)); } .profile-ava { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--card); margin: -24px 0 0 14px; background: linear-gradient(140deg, var(--accent-3), var(--accent) 55%, var(--accent-2)); color: #fff; font-weight: 800; font-size: 17px; display: grid; place-items: center; } .profile-email { display: block; font-size: 13px; font-weight: 700; padding: 6px 16px 0; overflow-wrap: anywhere; } /* small and simple, on purpose — just a quiet word, no chip */ .profile-role { display: block; font-size: 11.5px; color: var(--muted); padding: 1px 16px 11px; } .profile-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 10px 16px; border: 0; border-top: 1px solid var(--border-soft); background: none; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .profile-item:hover { background: var(--card-2); color: var(--text); } .profile-item.danger, .profile-item.danger:hover { color: var(--danger); } .nav-toggle { display: none; order: 4; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 44px; height: 44px; padding: 0; /* N4 mobile: just the three lines — no box around the hamburger. */ border: 0; border-radius: 10px; background: transparent; cursor: pointer; } .nav-toggle span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } .nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ---------- Layout ---------- */ .container { max-width: 1080px; margin: 0 auto; padding: 28px 24px 60px; } .page-title { font-size: 24px; margin: 6px 0 4px; font-weight: 800; } .page-sub { color: var(--muted); margin: 0 0 24px; font-size: 14px; } /* ---------- Hero ---------- */ .hero { text-align: center; padding: 92px 20px 40px; position: relative; overflow: hidden; isolation: isolate; } /* (The two big blurred colour blobs that floated here since the old hero are gone — the BIAAC monument sits on clean ground now; the drifting waves at the hero floor are the only colour accents.) */ /* faint dotted grid behind hero */ .hero-grid { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text) 12%, transparent) 1px, transparent 0); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 72%); mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 72%); opacity: 0.6; } .hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; letter-spacing: 0.3px; text-transform: none; font-size: 13px; padding: 7px 8px 7px 14px; border-radius: 100px; background: color-mix(in srgb, var(--card) 70%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .hero .eyebrow::after { content: "New"; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); padding: 3px 9px; border-radius: 100px; } .hero h1 { font-size: clamp(32px, 5.5vw, 52px); margin: 22px 0 14px; line-height: 1.02; font-weight: 800; letter-spacing: -0.04em; } /* H4d+H4f hero: five letter tiles fall from the sky with gravity, squash as they land (each at its own tilt via --r/--dy) and then the letters keep gently bobbing inside their tiles forever. The name drops down into its seat once the dust settles. */ .biaac-tiles { display: flex; justify-content: center; gap: clamp(7px, 1.6vw, 14px); } .biaac-tiles i { font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 6.5vw, 62px); line-height: 1; padding: clamp(9px, 1.9vw, 19px) clamp(10px, 2.1vw, 21px); border-radius: clamp(12px, 1.9vw, 20px); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); display: grid; place-items: center; opacity: 0; animation: tile-fall 0.72s cubic-bezier(0.34, 1.3, 0.55, 1) forwards; } .biaac-tiles i:nth-child(1) { animation-delay: 0.1s; } .biaac-tiles i:nth-child(2) { animation-delay: 0.21s; } .biaac-tiles i:nth-child(3) { animation-delay: 0.32s; } .biaac-tiles i:nth-child(4) { animation-delay: 0.43s; } .biaac-tiles i:nth-child(5) { animation-delay: 0.54s; } @keyframes tile-fall { 0% { opacity: 0; transform: translateY(-140px) rotate(calc(var(--r, 0deg) * -2)); } 55% { opacity: 1; transform: translateY(2px) rotate(var(--r, 0deg)); } 68% { transform: translateY(0) rotate(var(--r, 0deg)) scale(1.07, 0.9); } 84% { transform: translateY(var(--dy, 0px)) rotate(var(--r, 0deg)) scale(0.98, 1.03); } 100% { opacity: 1; transform: translateY(var(--dy, 0px)) rotate(var(--r, 0deg)); } } .biaac-tiles i b { font-weight: 800; background: linear-gradient(140deg, var(--accent-3), var(--accent) 52%, var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; animation: tile-bob 3.2s ease-in-out infinite alternate; } .biaac-tiles i:nth-child(1) b { animation-delay: 1.3s; animation-duration: 3s; } .biaac-tiles i:nth-child(2) b { animation-delay: 1.8s; animation-duration: 3.6s; } .biaac-tiles i:nth-child(3) b { animation-delay: 1.5s; animation-duration: 3.3s; } .biaac-tiles i:nth-child(4) b { animation-delay: 2.1s; animation-duration: 3.1s; } .biaac-tiles i:nth-child(5) b { animation-delay: 1.7s; animation-duration: 3.8s; } @keyframes tile-bob { from { transform: translateY(2.5px); } to { transform: translateY(-3.5px); } } /* The two A's in plain ink — black in daylight, and --text keeps them legible when midnight flips the ground dark. */ .biaac-tiles i.aa b { background: none; -webkit-text-fill-color: var(--text); } .biaac-name { display: block; font-size: clamp(15px, 2vw, 19px); font-weight: 800; letter-spacing: -0.01em; margin-top: 20px; line-height: 1.3; /* the name COMES DOWN once the last tile has landed */ opacity: 0; animation: name-drop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.35s forwards; } @keyframes name-drop { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: none; } } /* "AA Convention" in plain ink, same as the rest of the name — no gradient. Needs to outrank the .hero h1 .grad shimmer rule. */ .hero h1 .biaac-name .grad { background: none; color: currentColor; -webkit-text-fill-color: currentColor; animation: none; } @media (prefers-reduced-motion: reduce) { .biaac-tiles i, .biaac-tiles i b, .biaac-name { animation: none; opacity: 1; } .biaac-tiles i { transform: rotate(var(--r, 0deg)); } } /* B5: two accent waves drifting along the hero floor, opposite directions. */ .hero-waves { position: absolute; left: 0; right: 0; bottom: -2px; height: 130px; z-index: -1; pointer-events: none; overflow: hidden; } .hero-waves svg { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; animation: hero-wave-drift 16s linear infinite; } .hero-waves svg.w2 { bottom: -16px; opacity: 0.6; animation-duration: 23s; animation-direction: reverse; } @keyframes hero-wave-drift { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .hero-waves svg { animation: none; } } .hero h1 .grad { background: linear-gradient(120deg, var(--accent-3), var(--accent), var(--accent-2)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; } .hero p { color: var(--muted); max-width: 600px; margin: 0 auto 30px; font-size: 15.5px; } .hero-meta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; color: var(--muted); font-size: 13.5px; margin-bottom: 30px; } .hero-meta > div { padding: 9px 16px; border-radius: 100px; background: color-mix(in srgb, var(--card) 75%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .hero-meta b { color: var(--text); } /* ---------- Countdown ---------- */ .countdown { display: inline-flex; gap: 10px; margin: 4px auto 30px; flex-wrap: wrap; justify-content: center; } .count-box { min-width: 74px; padding: 14px 10px; border-radius: 16px; background: color-mix(in srgb, var(--card) 80%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .count-box .num { font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; background: linear-gradient(180deg, var(--text), color-mix(in srgb, var(--text) 55%, var(--accent))); -webkit-background-clip: text; background-clip: text; color: transparent; } .count-box .cap { display: block; margin-top: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); } /* ---------- Feature tiles ---------- */ .feature-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; margin-bottom: 14px; background: color-mix(in srgb, var(--accent) 15%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent); } .feature-card { transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .feature-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: var(--shadow); } .feature-card h3 { margin: 0 0 6px; font-size: 16px; } @keyframes floatA { 0%, 100% { transform: translateX(-60%) translateY(0); } 50% { transform: translateX(-55%) translateY(26px); } } @keyframes floatB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(30px); } } @keyframes shimmer { to { background-position: 200% center; } } /* Subtle ambient colour drift. A soft tint layer sits behind all content and slowly cycles blue -> near-black -> amber -> red and back. Minimal on purpose so only the mood of the page shifts, never the layout or readable colours. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1200px 720px at 82% -12%, rgba(56, 120, 255, 0.22), transparent 60%), radial-gradient(900px 620px at 0% 105%, rgba(56, 120, 255, 0.10), transparent 55%); animation: ambientShift 48s ease-in-out infinite; } @keyframes ambientShift { 0%, 100% { background: radial-gradient(1200px 720px at 82% -12%, rgba(56, 120, 255, 0.22), transparent 60%), radial-gradient(900px 620px at 0% 105%, rgba(56, 120, 255, 0.10), transparent 55%); } 25% { /* near-black, dim */ background: radial-gradient(1200px 720px at 82% -12%, rgba(18, 24, 44, 0.30), transparent 60%), radial-gradient(900px 620px at 0% 105%, rgba(18, 24, 44, 0.14), transparent 55%); } 50% { /* warm amber */ background: radial-gradient(1200px 720px at 82% -12%, rgba(250, 190, 60, 0.20), transparent 60%), radial-gradient(900px 620px at 0% 105%, rgba(250, 190, 60, 0.09), transparent 55%); } 75% { /* soft red */ background: radial-gradient(1200px 720px at 82% -12%, rgba(240, 92, 72, 0.20), transparent 60%), radial-gradient(900px 620px at 0% 105%, rgba(240, 92, 72, 0.09), transparent 55%); } } @media (prefers-reduced-motion: reduce) { body::before { animation: none; } } /* The hero's old fadeUp entrance is gone: hero children are revealed by the site-wide tilt-tumble (mountReveals), and a both-filled animation here would override the .rv classes and split the motion language in two. */ @media (prefers-reduced-motion: reduce) { .hero h1 .grad { animation: none; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 11px; border: 1px solid transparent; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform 0.06s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; background: var(--card-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); } .btn:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm); } .btn:active { transform: translateY(0); } .btn:focus-visible { outline: none; box-shadow: var(--ring); } .btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 8px 20px -8px rgba(124, 111, 255, 0.6); } .btn.primary:hover { box-shadow: 0 12px 26px -8px rgba(124, 111, 255, 0.7); } .btn.ghost { background: transparent; border-color: var(--border); color: var(--text); box-shadow: none; } .btn.ghost:hover { background: var(--card-2); } .btn.danger { background: transparent; border-color: color-mix(in srgb, var(--red) 45%, transparent); color: var(--red); padding: 6px 12px; font-size: 13px; box-shadow: none; } .btn.danger:hover { background: color-mix(in srgb, var(--red) 12%, transparent); } .btn.small { padding: 7px 13px; font-size: 13px; } /* ---------- Cards / Grid ---------- */ .grid { display: grid; gap: 18px; } .grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .reg-layout { grid-template-columns: 1.6fr 1fr; } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); } /* Pricing cards */ .price-card { position: relative; display: flex; flex-direction: column; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .price-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); } .price-card h3 { margin: 0 0 6px; font-size: 16.5px; } .price-card .desc { color: var(--muted); font-size: 13.5px; min-height: 40px; } .price-card .amount { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; margin: 14px 0 4px; } .price-card .amount span { font-size: 13px; color: var(--muted); font-weight: 600; letter-spacing: 0; } .price-card.featured { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 0 1px var(--accent), var(--shadow), 0 24px 50px -24px color-mix(in srgb, var(--accent) 60%, transparent); } .price-card.featured::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius); padding: 1px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 50%, transparent), transparent 45%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .badge { position: absolute; top: -11px; right: 16px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-size: 11px; font-weight: 800; padding: 5px 12px; border-radius: 20px; letter-spacing: 0.5px; box-shadow: 0 6px 14px -4px rgba(124, 111, 255, 0.6); } /* ---------- Stat cards ---------- */ .stat { display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; } .stat .label { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; } .stat .value { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; } .stat .value.green { color: var(--green); } .stat .value.amber { color: var(--amber); } .stat .value.red { color: var(--red); } .stat .value.accent { color: var(--accent); } /* ---------- Forms ---------- */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .field input, .field select, .field textarea { width: 100%; max-width: 100%; } .field.full { grid-column: 1 / -1; } label { font-size: 13px; font-weight: 600; color: var(--muted); } input, select, textarea { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px; color: var(--text); font-size: 14px; font-family: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; } input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } textarea { resize: vertical; min-height: 70px; } .form-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; gap: 16px; flex-wrap: wrap; } .summary-amount { font-size: 15px; color: var(--muted); } .summary-amount b { color: var(--text); font-size: 20px; } /* ---------- Table ---------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); background: var(--card); } table { width: 100%; border-collapse: collapse; font-size: 14px; /* Wide tables scroll inside .table-wrap rather than squeezing columns to illegibility. The floor drops further on phones — see the 720px block. */ min-width: 560px; } th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border-soft); } tbody tr:last-child td { border-bottom: none; } th { background: var(--bg-2); color: var(--muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; } /* `position: sticky` was set on th but did nothing: .table-wrap has no height constraint, so there is no vertical scroll container for it to stick within, and it had no z-index against the sticky nav above it. Removed rather than propped up — a sticky header buys little at 360px wide. */ tbody tr { transition: background 0.12s ease; } tbody tr:hover { background: var(--card-2); } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 20px; font-size: 12px; font-weight: 700; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill.paid { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); } .pill.pending { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); } /* ---------- Bars ---------- */ .bar-row { display: grid; grid-template-columns: 160px 1fr auto; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 14px; } .bar-track { background: var(--bg-2); border-radius: 20px; height: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--border-soft); } .bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 20px; transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .bar-fill.green { background: linear-gradient(90deg, var(--green), #2ba75f); } .bar-fill.amber { background: linear-gradient(90deg, var(--amber), #d99e28); } /* ---------- Toast ---------- The pill toast was replaced by the spotlight card (.toastcard, in the mascot section near the end of this file): the page dims and the corner mascot rides the announcement in at eye level. ---------- */ /* ---------- Misc ---------- */ .section-head { display: flex; align-items: center; justify-content: space-between; margin: 38px 0 16px; gap: 12px; flex-wrap: wrap; } .section-head h2 { margin: 0; font-size: 19px; font-weight: 700; } .card h3 { letter-spacing: -0.01em; } .empty { text-align: center; padding: 40px; color: var(--muted); } .muted { color: var(--muted); } .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; } .toolbar input, .toolbar select { min-width: 180px; } .footer { text-align: center; color: var(--muted); font-size: 13px; padding: 40px 30px; border-top: 1px solid var(--border); margin-top: 40px; } /* ---------- Chat assistant ---------- */ .chat-widget { position: fixed; right: 20px; bottom: 20px; z-index: 60; } /* While the chat panel is OPEN it must outrank the nav bar (the mobile nav sits at 66 so the menu frost passes under it). Scoped to chat-open so the resting mascot still gets frosted over by the menu overlay (64). */ body.chat-open .chat-widget { z-index: 70; } .chat-fab { width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-size: 24px; display: grid; place-items: center; box-shadow: 0 12px 28px -8px rgba(124, 111, 255, 0.6); transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.3s ease; } /* While the mascot is off riding the announcement card, its button parks. */ .chat-fab.away { opacity: 0.25; pointer-events: none; } .chat-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(124, 111, 255, 0.7); } .chat-fab.open { transform: scale(0.94); } .chat-panel { position: absolute; right: 0; bottom: 72px; width: 340px; max-width: calc(100vw - 32px); height: 460px; max-height: calc(100vh - 120px); display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; /* Same motion family as the nav: the panel tumbles out of the mascot's corner every time the chat opens. */ transform-origin: bottom right; animation: chat-tumble 0.4s cubic-bezier(0.34, 1.45, 0.64, 1); } @keyframes chat-tumble { 0% { opacity: 0; transform: translate(24px, 24px) rotate(4deg) scale(0.5); } 100% { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .chat-panel { animation: none; } } .chat-panel[hidden] { display: none; } /* H3: calm card header with a thin gradient accent line instead of the loud blue-purple gradient block. */ .chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: var(--card); color: var(--text); border-bottom: 1px solid var(--border); position: relative; } .chat-head::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent-3), var(--accent), var(--accent-2)); } .chat-head small { color: var(--muted); } .chat-head strong { font-family: var(--font-display); font-size: 15px; } .chat-head small { display: block; font-size: 11.5px; opacity: 0.85; margin-top: 2px; } .chat-close { flex-shrink: 0; border: 1px solid var(--border); background: var(--card-2); color: var(--text); /* Was 28px — the smallest tap target on the site, and the one people reach for fastest when they want the chat panel gone. */ width: 36px; height: 36px; border-radius: 8px; font-size: 18px; line-height: 1; cursor: pointer; transition: background 0.15s ease; } .chat-close:hover { background: var(--border); } .chat-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--bg-2); } /* ---- Voice / talk mode ---- */ .chat-mic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-2); color: var(--text); font-size: 17px; line-height: 1; cursor: pointer; transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease; } .chat-mic:hover { background: var(--card); } .chat-mic.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-color: transparent; } .chat-mic.listening { animation: micPulse 1.3s ease-in-out infinite; } .chat-mic.speaking { box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.35); } @keyframes micPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(129, 140, 248, 0.5); } 50% { box-shadow: 0 0 0 7px rgba(129, 140, 248, 0); } } .chat-voice { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 12.5px; color: var(--muted); background: var(--bg-2); border-top: 1px solid var(--border-soft); position: relative; overflow: hidden; } .chat-voice[hidden] { display: none; } /* Soft breathing orb behind the bars — the "presence" of the assistant. */ .voice-orb { position: absolute; left: 2px; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; background: radial-gradient(circle, rgba(129, 140, 248, 0.35), rgba(129, 140, 248, 0) 70%); opacity: 0.5; pointer-events: none; animation: orbBreathe 3s ease-in-out infinite; } .chat-voice.is-listening .voice-orb { background: radial-gradient(circle, rgba(52, 211, 153, 0.4), rgba(52, 211, 153, 0) 70%); animation-duration: 1.6s; } .chat-voice.is-speaking .voice-orb { background: radial-gradient(circle, rgba(129, 140, 248, 0.55), rgba(167, 139, 250, 0) 70%); animation-duration: 1.1s; } @keyframes orbBreathe { 0%, 100% { transform: scale(0.85); opacity: 0.4; } 50% { transform: scale(1.15); opacity: 0.8; } } /* Gemini-style reactive bars. JS drives their height from real audio levels (mic while listening, TTS clip while speaking) and adds .live; without a live analyser the state keyframes below take over. */ .voice-viz { display: flex; align-items: center; gap: 3px; height: 28px; flex-shrink: 0; position: relative; } .voice-viz i { display: block; width: 4px; height: 5px; border-radius: 3px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); transition: height 0.06s linear; } .chat-voice.is-listening .voice-viz i { background: linear-gradient(180deg, var(--green), var(--accent)); } /* Synthetic fallback: bars dance on keyframes when no analyser is live. */ .chat-voice.is-listening .voice-viz:not(.live) i, .chat-voice.is-speaking .voice-viz:not(.live) i { animation: vizBounce 0.9s ease-in-out infinite; } .voice-viz i:nth-child(1) { animation-delay: 0.15s; } .voice-viz i:nth-child(2) { animation-delay: 0.3s; } .voice-viz i:nth-child(3) { animation-delay: 0s; } .voice-viz i:nth-child(4) { animation-delay: 0.45s; } .voice-viz i:nth-child(5) { animation-delay: 0.6s; } @keyframes vizBounce { 0%, 100% { height: 6px; } 50% { height: 22px; } } /* Thinking: a slow, low shimmer — clearly different from talking. */ .chat-voice.is-thinking .voice-viz i { animation: vizThink 1.3s ease-in-out infinite; } @keyframes vizThink { 0%, 100% { height: 5px; opacity: 0.45; } 50% { height: 13px; opacity: 1; } } /* Ambient glow on the whole panel while talk mode is on. */ .chat-panel.voice-open { box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.25), 0 0 26px rgba(129, 140, 248, 0.18), 0 18px 48px rgba(0, 0, 0, 0.35); transition: box-shadow 0.35s ease; } .chat-panel.voice-speaking { box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.45), 0 0 34px rgba(129, 140, 248, 0.35), 0 18px 48px rgba(0, 0, 0, 0.35); } .chat-voice-stop { margin-left: auto; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 8px; padding: 3px 11px; font-size: 12px; cursor: pointer; } .chat-voice-stop:hover { background: var(--card-2); } .chat-msg.interim { opacity: 0.6; font-style: italic; } .chat-msg { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45; word-wrap: break-word; } .chat-msg.user { align-self: flex-end; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-bottom-right-radius: 4px; } .chat-msg.assistant { align-self: flex-start; background: var(--card); border: 1px solid var(--border); color: var(--text); border-bottom-left-radius: 4px; } .chat-msg.typing { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); letter-spacing: normal; } .chat-confirm { max-width: 92%; display: flex; flex-direction: column; gap: 6px; } .chat-confirm strong { font-size: 13px; } .chat-confirm-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 3px 0; border-bottom: 1px dashed var(--border); } .chat-confirm-row:last-of-type { border-bottom: none; } .chat-confirm-row span { color: var(--muted); } .chat-confirm-row b { text-align: right; word-break: break-word; } .chat-confirm-actions { display: flex; gap: 8px; margin-top: 6px; } .chat-confirm-actions .btn { flex: 1; } .chat-confirm-ok { flex: 1.4; } .chat-map { max-width: 94%; display: flex; flex-direction: column; gap: 6px; } .chat-map strong { font-size: 13px; } .chat-map-frame { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); aspect-ratio: 16 / 10; width: 100%; background: var(--card); } .chat-map-frame iframe { width: 100%; height: 100%; border: 0; display: block; } .chat-map-open { align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--accent, #3878ff); text-decoration: none; } .chat-map-open:hover { text-decoration: underline; } /* --- contact-organiser card --- */ .chat-contact { max-width: 96%; display: flex; flex-direction: column; gap: 10px; padding: 14px !important; } .cc-head { font-weight: 700; font-size: 13.5px; color: var(--text); } .cc-fields { display: flex; flex-direction: column; gap: 7px; } .cc-input { width: 100%; background: var(--bg-2); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; color: var(--text); font-size: 13px; font-family: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; box-sizing: border-box; } .cc-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } .cc-desc { resize: vertical; min-height: 64px; } .cc-actions { display: flex; gap: 8px; justify-content: flex-end; } .cc-status { font-size: 13px; padding: 6px 2px; border-radius: 6px; } .cc-ok { color: var(--green); } .cc-err { color: var(--red); } .chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: var(--card); } .chat-input input { flex: 1; min-width: 0; } @media (max-width: 480px) { .chat-widget { right: 14px; bottom: 14px; } .chat-panel { position: fixed; left: 12px; right: 12px; top: 72px; bottom: 84px; width: auto; max-width: none; height: auto; max-height: none; } } @media (max-width: 720px) { /* MOBILE bar: styled exactly like the laptop bar — flat ground, hairline, no rounding. The holder pins it; scrolling down melts the whole brand away and fades the bar chrome, leaving just the menu button (and the avatar when signed in) floating at the top right. Back at the top, everything returns. .shrunk is set by paintNav's scroll listener. */ #nav { position: sticky; top: 0; z-index: 66; } .nav { padding: 10px 16px; gap: 8px; flex-wrap: nowrap; z-index: 66; transition: background 0.3s ease, border-color 0.3s ease; } .brand { /* no overflow:hidden here — it clipped the logo's badge and shadow; the melt clips only the wordmark box and shrinks the logo itself */ min-width: 0; gap: 12px; } .brand-name { overflow: hidden; max-width: 150px; transition: max-width 0.35s cubic-bezier(0.34, 1.45, 0.64, 1), opacity 0.25s ease; } .brand .logo { width: 34px; height: 34px; flex-shrink: 0; transition: width 0.35s cubic-bezier(0.34, 1.45, 0.64, 1), opacity 0.2s ease, transform 0.35s ease; } .brand-name .wordmark { font-size: 14px; white-space: nowrap; } .avatar-btn { width: 36px; height: 36px; font-size: 14px; transition: width 0.35s cubic-bezier(0.34, 1.45, 0.64, 1), opacity 0.2s ease, transform 0.35s ease; } /* signed-in avatar melts away with the brand — scrolled state keeps ONLY the floating ☰ */ .nav.shrunk .avatar-btn { width: 0; opacity: 0; transform: scale(0.5); } .nav.shrunk .nav-profile { pointer-events: none; } .nav-toggle { width: 38px; height: 38px; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .nav.shrunk { background: transparent; border-bottom-color: transparent; /* the see-through strip must not swallow taps meant for the page */ pointer-events: none; } .nav.shrunk > * { pointer-events: auto; } .nav.shrunk .brand { /* keep the base margin-right:auto — even collapsed it's what pushes the surviving ☰/avatar to the right edge */ gap: 0; pointer-events: none; } .nav.shrunk .brand-name { max-width: 0; opacity: 0; } .nav.shrunk .brand .logo { width: 0; opacity: 0; transform: scale(0.5); } /* the surviving controls get their own little glass footing */ .nav.shrunk .nav-toggle { background: color-mix(in srgb, var(--card) 85%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 50%; box-shadow: var(--shadow-sm); } .nav-toggle { display: flex; } /* The old in-flow link list grew the sticky nav and shoved the whole page down; mobile now uses the .nav-overlay "corner burst" menu instead. */ .nav-links { display: none; } /* Corner-burst launcher: the page frosts over and every link flies out of the hamburger corner (--fx/--fy are set by paintNav) into a grid of circular icons pinned just below the bar. Nothing in the page moves. */ .nav-overlay { display: grid; position: fixed; inset: 0; z-index: 64; grid-template-columns: repeat(3, auto); justify-content: center; align-content: start; padding: 88px 16px 24px; gap: 26px 30px; background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0s linear 0.25s; } .nav-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.25s ease; } .nav-overlay a.link { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; color: var(--text); font-weight: 600; opacity: 0; transform: translate(var(--fx, 120px), var(--fy, -120px)) scale(0.2); transition: transform 0.5s cubic-bezier(0.34, 1.45, 0.64, 1), opacity 0.2s ease; transition-delay: 0ms; } .nav-overlay.open a.link { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 45ms); } .nav-overlay .link-ico { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .nav-overlay .link-label { font-size: 11px; } .nav-overlay a.link.active .link-ico { background: linear-gradient(140deg, var(--accent-3), var(--accent) 55%, var(--accent-2)); border-color: transparent; color: #fff; } .nav-overlay a.link.active .link-label { color: var(--accent); } .container { padding: 22px 16px 48px; } .form-grid { grid-template-columns: 1fr; } .reg-layout { grid-template-columns: 1fr; } .hero { /* The E1 breathing room shrank back when the spotlight card left the hero — a small cushion keeps the CTA buttons clear of the mascot. */ padding: 44px 16px 32px; } .hero h1 { font-size: 28px; } .hero p { font-size: 14px; margin-bottom: 24px; } .hero-meta { gap: 8px; font-size: 12.5px; } .hero-meta > div { padding: 8px 13px; } /* Bigger, thumb-friendly hero actions */ .hero-cta { flex-direction: column; align-items: stretch; max-width: 340px; margin: 0 auto; } .hero-cta .btn { width: 100%; justify-content: center; } .btn { padding: 13px 20px; min-height: 46px; } /* .btn.small and .btn.danger used to opt OUT of the 46px minimum here, which meant every row action on every admin screen — Mark Paid, Delete, Copy, Generate card, Send broadcast — landed at roughly 30px. Those are the most-tapped controls on the site and the easiest to mis-hit. */ .btn.small, .btn.danger { /* Same 46px floor as every other button — a 44px floor left danger buttons visibly shorter than their siblings in the same row. */ min-height: 46px; padding: 10px 16px; } /* Countdown fills the row evenly instead of overflowing */ .countdown { display: flex; gap: 8px; width: 100%; max-width: 360px; } .count-box { flex: 1 1 0; min-width: 0; padding: 12px 4px; } .count-box .num { font-size: 23px; } /* Prevent iOS auto-zoom on focus */ input, select, textarea { font-size: 16px; } .grid { gap: 14px; } .price-card .amount { font-size: 27px; } .stat .value { font-size: 22px; } .bar-row { grid-template-columns: 96px 1fr auto; font-size: 13px; } .section-head { gap: 10px; } .section-head h2 { font-size: 17px; } } @media (max-width: 460px) { .nav { gap: 6px; } .hero h1 { font-size: 25px; } .hero .eyebrow { font-size: 12px; padding: 6px 7px 6px 12px; } .page-title { font-size: 20px; } .count-box { padding: 11px 3px; } .count-box .num { font-size: 21px; } .count-box .cap { font-size: 10px; letter-spacing: 0.5px; } .form-footer { flex-direction: column; align-items: stretch; } .form-footer .btn { justify-content: center; } .toolbar input, .toolbar select { min-width: 0; flex: 1 1 140px; } } /* ============================================================ Attention mascot + AI-button pulse + professional polish ============================================================ */ /* A soft, expanding ring behind the chat button draws the eye to the AI. It calms down once the chat is opened. */ .chat-fab { position: relative; } .chat-fab::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%); z-index: -1; animation: fabPulse 2.6s ease-out infinite; } .chat-fab.open::before { animation: none; opacity: 0; } @keyframes fabPulse { 0% { transform: scale(0.85); opacity: 0.7; } 70% { transform: scale(1.55); opacity: 0; } 100% { transform: scale(1.55); opacity: 0; } } /* ============================================================ ONE mascot that lives on the chat button. It rests in the corner as the chat bubble, morphs into a little robot, waves, rolls, jumps, sometimes swells into a huge demon with an evil laugh, then takes off (helicopter rotor) and flies a loop around the screen before landing back home. Clicking it always opens the chat. ============================================================ */ /* --- crossfade between the chat-bubble face and the robot --- */ .fab-box, .fab-mascot { grid-area: 1 / 1; transition: opacity 0.5s ease, transform 0.5s ease; } .fab-box { font-size: 24px; line-height: 1; } .fab-mascot { position: relative; width: 44px; height: 50px; opacity: 0; transform: scale(0.4) rotate(-10deg); display: flex; align-items: center; justify-content: center; } /* The button's robot IS the site-wide full robot (mascotHTML) — one character, one implementation. Scaled a touch to sit inside the pod. */ .fab-mascot .ebot { zoom: 0.88; } .chat-fab.as-box .fab-box { opacity: 1; transform: scale(1); } .chat-fab.as-box .fab-mascot { opacity: 0; transform: scale(0.4); } .chat-fab.as-bot .fab-box { opacity: 0; transform: scale(0.4); } .chat-fab.as-bot .fab-mascot { opacity: 1; transform: scale(1) rotate(0deg); } /* In robot form the coloured pod + attention ring fade so the bot shows bare. */ .chat-fab.as-bot { background: transparent; box-shadow: none; } .chat-fab.as-bot::before { opacity: 0; animation: none; } /* --- the robot itself --- The button's body parts (old fm-head/eye/antenna/body/arm/legs) are gone: the robot inside the button is the shared .ebot component now. Only the blink/dangle keyframes (used by .ebot too), the wave hook and the rotor remain here. --- */ @keyframes mascotBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } } .chat-fab.waving .eb-arm.r { animation: fmWave 0.4s ease-in-out infinite; } @keyframes fmWave { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-52deg); } } @keyframes mascotDangle { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } } /* Helicopter rotor: only spins while flying. */ .fm-rotor { position: absolute; top: -8px; left: 50%; width: 50px; height: 6px; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s ease; } .fm-rotor::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-ink) 85%, transparent), transparent 75%); animation: rotorBlur 0.1s linear infinite; } .fm-rotor::after { content: ""; position: absolute; top: 5px; left: 50%; width: 2px; height: 6px; transform: translateX(-50%); background: var(--accent-ink); } @keyframes rotorBlur { 0%, 100% { transform: scaleX(1); opacity: 0.85; } 50% { transform: scaleX(0.22); opacity: 0.5; } } .chat-fab.flying .fm-rotor { opacity: 1; } /* --- motion states (only one runs at a time, driven by JS) --- */ .chat-fab.flying { animation: fabFly 13s ease-in-out; z-index: 65; } @keyframes fabFly { 0% { transform: translate(0, 0) rotate(0deg); } 7% { transform: translate(-8vw, -34vh) rotate(-14deg); } 22% { transform: translate(-55vw, -62vh) rotate(10deg); } 38% { transform: translate(-82vw, -30vh) rotate(-10deg); } 54% { transform: translate(-48vw, -66vh) rotate(12deg); } 70% { transform: translate(-18vw, -40vh) rotate(-8deg); } 85% { transform: translate(-6vw, -14vh) rotate(6deg); } 100% { transform: translate(0, 0) rotate(0deg); } } .chat-fab.rolling { animation: fabRoll 1.2s ease-in-out; } @keyframes fabRoll { 0% { transform: translateX(0) rotate(0deg); } 50% { transform: translateX(-120px) rotate(-360deg); } 100% { transform: translateX(0) rotate(0deg); } } .chat-fab.jumping { animation: fabJump 0.7s ease-out; } @keyframes fabJump { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-42px); } 60% { transform: translateY(-42px); } } .chat-fab.huge { animation: fabHuge 5s cubic-bezier(0.25, 0.6, 0.3, 1); transform-origin: 100% 100%; z-index: 70; } @keyframes fabHuge { 0% { transform: scale(1); } 40% { transform: scale(2.5); } 80% { transform: scale(2.5); } 100% { transform: scale(1); } } /* --- speech bubble: only pops up now and then, short lines --- */ .fab-bubble { position: absolute; bottom: 66px; right: 0; width: max-content; max-width: 180px; text-align: center; background: var(--card); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-sm); padding: 7px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 600; line-height: 1.3; opacity: 0; transform: translateY(6px) scale(0.85); transform-origin: bottom right; transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; } .fab-bubble::after { content: ""; position: absolute; bottom: -6px; right: 18px; transform: rotate(45deg); width: 12px; height: 12px; background: var(--card); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); } .fab-bubble.show { opacity: 1; transform: translateY(0) scale(1); } /* Never show a floating message while the mascot is rolling or huge, even if a bubble timer from the previous scene is still running. */ .chat-fab.rolling .fab-bubble, .chat-fab.huge .fab-bubble { opacity: 0 !important; transform: translateY(6px) scale(0.85) !important; } /* --- waving stand-in chat button, left in the corner while the mascot flies --- */ .fab-ghost { position: absolute; right: 0; bottom: 0; width: 58px; height: 58px; border: none; border-radius: 50%; cursor: pointer; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; display: grid; place-items: center; box-shadow: 0 12px 28px -8px rgba(124, 111, 255, 0.6); opacity: 0; transform: scale(0.2); transform-origin: bottom right; transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; z-index: 1; } .fab-ghost.show { opacity: 1; transform: scale(1); pointer-events: auto; } .fg-icon { grid-area: 1 / 1; font-size: 24px; line-height: 1; } .fg-hand { position: absolute; right: -2px; bottom: -2px; font-size: 20px; transform-origin: 60% 90%; animation: ghostWave 0.6s ease-in-out infinite; } @keyframes ghostWave { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(18deg); } } /* --- mini mascot avatar used in the chat header + typing indicator --- */ .chat-head-main { display: flex; align-items: center; gap: 10px; min-width: 0; } .mini-bot { position: relative; display: inline-block; width: 30px; height: 26px; border-radius: 9px; background: linear-gradient(160deg, #eef2ff, #c7d2fe); border: 1px solid color-mix(in srgb, var(--accent) 45%, #fff); box-shadow: inset 0 -2px 5px rgba(99, 102, 241, 0.25); flex: 0 0 auto; } .mini-bot .mb-eye { position: absolute; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-ink); animation: mascotBlink 3.4s infinite; } .mini-bot .mb-eye:first-of-type { left: 8px; } .mini-bot .mb-eye:last-of-type { right: 8px; } .mini-bot .mb-mouth { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 10px; height: 2px; border-radius: 2px; background: var(--accent-ink); } .mini-bot.talking .mb-mouth { animation: mbTalk 0.28s ease-in-out infinite; } @keyframes mbTalk { 0%, 100% { height: 2px; } 50% { height: 7px; border-radius: 4px; } } .mini-bot.thinking { animation: mbBob 1s ease-in-out infinite; } @keyframes mbBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } .chat-avatar { margin-right: 2px; } .chat-avatar.talking { box-shadow: inset 0 -2px 5px rgba(99, 102, 241, 0.25), 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); } /* typing indicator: the mascot 'types' with bouncing dots */ .chat-msg.typing .typing-dots { display: inline-flex; gap: 4px; } .typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.5; animation: typingDot 1s ease-in-out infinite; } .typing-dots i:nth-child(2) { animation-delay: 0.15s; } .typing-dots i:nth-child(3) { animation-delay: 0.3s; } @keyframes typingDot { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-4px); opacity: 1; } } /* writing caret: the mascot 'writes' the reply out on the board */ .type-caret { display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--accent); animation: caretBlink 0.7s steps(1) infinite; } @keyframes caretBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* --- assistant reply where the mascot itself writes / speaks the message --- */ .chat-msg.assistant.bot-row { background: transparent; border: none; padding: 0; max-width: 90%; display: flex; align-items: flex-end; gap: 9px; } .bot-row .msg-bot { flex: 0 0 auto; margin-bottom: 2px; } .bot-row .msg-text { display: block; background: var(--card); border: 1px solid var(--border); color: var(--text); padding: 9px 13px; border-radius: 14px; border-bottom-left-radius: 4px; line-height: 1.45; word-wrap: break-word; min-height: 1.2em; } /* while writing, the mascot leans in and scribbles a pencil */ .msg-bot.writing { animation: mbBob 0.7s ease-in-out infinite; } .mb-pen { position: absolute; right: -9px; bottom: -5px; font-size: 14px; opacity: 0; transform-origin: bottom left; } .msg-bot.writing .mb-pen { opacity: 1; animation: penScribble 0.4s ease-in-out infinite; } @keyframes penScribble { 0%, 100% { transform: translateY(0) rotate(-10deg); } 50% { transform: translateY(-2px) rotate(8deg); } } /* while speaking, the mouth moves and little sound bars bounce */ .msg-bot.speaking .mb-mouth { animation: mbTalk 0.28s ease-in-out infinite; } .mb-waves { position: absolute; right: -14px; bottom: 3px; display: none; align-items: flex-end; gap: 2px; height: 12px; } .msg-bot.speaking .mb-waves { display: flex; } .mb-waves i { width: 3px; height: 3px; border-radius: 2px; background: var(--accent); animation: eqBar 0.5s ease-in-out infinite; } .mb-waves i:nth-child(2) { animation-delay: 0.15s; } .mb-waves i:nth-child(3) { animation-delay: 0.3s; } @keyframes eqBar { 0%, 100% { height: 3px; } 50% { height: 12px; } } @media (prefers-reduced-motion: reduce) { .fab-mascot, .fab-ghost, .fab-bubble { display: none; } .chat-fab::before { animation: none; opacity: 0; } } /* Phone: keep everything, just tighten the flight loop so the little bot doesn't skim off the edges. */ @media (max-width: 560px) { @keyframes fabFly { 0% { transform: translate(0, 0) rotate(0deg); } 8% { transform: translate(-10vw, -26vh) rotate(-12deg); } 25% { transform: translate(-58vw, -52vh) rotate(10deg); } 45% { transform: translate(-70vw, -24vh) rotate(-10deg); } 62% { transform: translate(-40vw, -56vh) rotate(12deg); } 80% { transform: translate(-14vw, -30vh) rotate(-8deg); } 100% { transform: translate(0, 0) rotate(0deg); } } } /* ========================================================================== AUTH — login.html, 403.html, and the server-rendered interstitials (magic-link confirm, invite accept) which reuse .auth-card. ========================================================================== */ /* Kept tight on the vertical axis on purpose: the whole sign-in card — nav, Google, tabs and form — must fit a laptop viewport WITHOUT scrolling. */ .auth-card { max-width: 430px; margin: 18px auto; padding: 22px 24px 20px; } /* The login page itself: trim the container's tall default bottom padding so the page height stays inside the viewport. */ .container:has(> .auth-card) { padding-top: 16px; padding-bottom: 24px; } .auth-title { font-family: var(--font-display); font-size: 22px; margin: 0 0 4px; letter-spacing: -0.02em; } .auth-sub { margin: 0 0 14px; font-size: 14px; line-height: 1.55; } /* Feedback lines. --red is the palette token; --danger has never existed. */ .auth-error, .auth-notice { margin: 0 0 12px; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.5; border: 1px solid transparent; } .auth-error { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); border-color: color-mix(in srgb, var(--red) 32%, transparent); } .auth-notice { color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); border-color: color-mix(in srgb, var(--green) 32%, transparent); } /* Google button: deliberately NOT a third-party widget — it's an to our own /api/auth/google/start, so the login page loads no external script. */ .google-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--card-2); border: 1px solid var(--border); color: var(--text); font-weight: 600; min-height: 44px; } .google-btn:hover { background: var(--card); border-color: var(--border-soft); } .google-btn svg { flex: 0 0 auto; } .auth-sep { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; } .auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); } .auth-form { display: flex; flex-direction: column; gap: 12px; } .auth-submit { width: 100%; min-height: 44px; } .auth-hint { margin: 0; font-size: 13px; line-height: 1.55; } /* An email address inside auth copy gets its own line: a 30+ character address inline in a sentence either overflows a phone-width card or gets broken mid-word with a couple of characters orphaned on the next line. */ .auth-email { display: block; margin: 3px 0; overflow-wrap: anywhere; } /* Belt and braces for everything else in the card (long names, error text from the server): break rather than overflow. */ .auth-card { overflow-wrap: break-word; } /* Waiting for the emailed link to be approved: the login page polls the server and signs itself in, so all this state has to do is look alive. */ .auth-wait { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 10px 0 4px; } .auth-wait-title { font-weight: 700; font-size: 17px; margin: 0; } .auth-wait .muted { margin: 0; font-size: 14px; line-height: 1.6; } .auth-wait .btn { margin-top: 6px; } .auth-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: authSpin 0.9s linear infinite; } @keyframes authSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .auth-spinner { animation: none; } } /* -------- Professional polish -------- */ /* Crisper primary buttons with a subtle top sheen. */ .btn.primary { background-image: linear-gradient(135deg, var(--accent), var(--accent-2)); position: relative; } .btn.primary::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 45%); pointer-events: none; } /* (The old gradient underline on the active nav link left with the N4 minimal bar — the accent colour alone marks the active page now.) */ /* Cards lift gently and their border warms on hover for an interactive feel. */ .card { transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .container .grid .card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); box-shadow: var(--shadow); } /* =========================================================================== MOBILE LAYOUT The existing media queries only covered the nav, the chat widget and the mascot — there was no breakpoint for page content at all. On a phone that left .form-grid and .reg-layout forcing two columns into ~310px, and long words (emails, URLs, pasted reflection text) spilling out of their cards. =========================================================================== */ /* Break long unbroken strings instead of letting them run past the card edge. break-word only kicks in when a word genuinely cannot fit, so normal text wraps exactly as before. */ p, li, td, h1, h2, h3, .page-sub, .empty, .card { overflow-wrap: break-word; } /* Anything that can't shrink below its content width blows out a grid cell. */ .grid > *, .form-grid > *, .field { min-width: 0; } @media (max-width: 640px) { .container { padding: 20px 14px 48px; } /* One column — this is the main offender on phones. */ .form-grid, .reg-layout, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } .card { padding: 16px; } .page-title { font-size: 23px; } .section-head { margin: 26px 0 12px; } .section-head h2 { font-size: 18px; } .empty { padding: 26px 14px; } /* Full-width buttons stack cleanly and give a bigger tap target. */ .card > form button.btn, .card > form .btn { width: 100%; justify-content: center; } /* Action rows (Copy / Generate / Send / Delete) wrap instead of overflowing. */ .refl-actions .btn { flex: 1 1 auto; justify-content: center; } /* Tables SCROLL sideways inside .table-wrap; they are not squeezed and not switched to display:block (that destroys the table formatting context). `table-layout: fixed` used to be set here, which combined with the 640px min-width to give every column an identical slice — 80px each across the 8-column registrations table, with the action buttons clipped. Auto layout lets columns size to their content and the wrapper scrolls. */ table { min-width: 460px; } td, th { overflow-wrap: anywhere; padding: 11px 12px; } /* Keep the row actions on one line and sized for a thumb. */ td.col-actions, th.col-actions { white-space: nowrap; } td.col-actions .btn { margin-right: 6px; } /* Sideways scroll is easy to miss, so hint at it. */ .table-wrap { -webkit-overflow-scrolling: touch; } .footer { padding: 28px 16px; } } /* ---------- Entrance reveals (site-wide "tilt tumble") ---------- The mobile menu's corner-burst spring, applied to page content: blocks tumble in from the top-right with a small rotation, staggered, as they enter the viewport. .rv/.rv-in are added ONLY by mountReveals() in common.js and stripped again when each entrance finishes (so the card :hover lifts keep working); with scripts off the classes never exist and nothing stays hidden. */ .rv { opacity: 0; transform: translate(46px, -46px) rotate(6deg) scale(0.6); } .rv.rv-in { opacity: 1; transform: none; transition: transform 0.55s cubic-bezier(0.34, 1.45, 0.64, 1), opacity 0.3s ease; transition-delay: calc(var(--rvi, 0) * 60ms); } /* The profile dropdown joins the same motion family: it tumbles out of the avatar's corner each time it opens. (display toggles with .open, so a keyframe animation replays on every open.) */ .profile-menu.open { transform-origin: top right; animation: menu-tumble 0.4s cubic-bezier(0.34, 1.45, 0.64, 1); } @keyframes menu-tumble { 0% { opacity: 0; transform: translate(14px, -14px) rotate(5deg) scale(0.5); } 100% { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } .rv.rv-in { transition: none; } .profile-menu.open { animation: none; } } /* ---------- Price spotlight (home hero) ---------- The registration-category cards left the home page; one compact card auto-cycles through the categories instead, each arriving with the tumble. Tapping it opens register.html with that category preselected. */ .price-spot { margin-top: 26px; } .spot-card { max-width: 370px; margin: 0 auto; display: flex; align-items: center; gap: 13px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 13px 18px; box-shadow: var(--shadow-sm); color: var(--text); text-align: left; } .spot-card:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } .spot-card.anim { animation: spot-tumble 0.5s cubic-bezier(0.34, 1.45, 0.64, 1); } @keyframes spot-tumble { 0% { opacity: 0; transform: translate(30px, -30px) rotate(6deg) scale(0.5); } 100% { opacity: 1; transform: none; } } .spot-ico { font-size: 24px; flex-shrink: 0; } .spot-txt { min-width: 0; } .spot-txt b { display: block; font-size: 15px; } .spot-txt small { display: block; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .spot-price { margin-left: auto; font-weight: 800; font-size: 19px; white-space: nowrap; } /* Slogan flavour of the spotlight: centred one-liner, no price column. */ .slogan-card { justify-content: center; gap: 11px; max-width: 330px; cursor: default; } .slogan-text { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; } .spot-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; } .spot-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: background 0.2s ease; } .spot-dots i.on { background: var(--accent); } /* ---------- Animated dropdowns ---------- Native