/* ============================================ Clarify App — Styles Clean, bold, tech-forward design ============================================ */ /* --- Design Tokens --- */ :root { --color-bg: #ffffff; --color-text: #0a0a0a; --color-text-secondary: #666666; --color-text-muted: #999999; --color-card-bg: #fafafa; --color-card-border: #e8e8e8; --color-glow: rgba(100, 100, 100, 0.12); --color-glow-strong: rgba(80, 80, 80, 0.18); --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --border-radius: 20px; --border-radius-sm: 12px; } /* --- Reset --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Universal dark backdrop so the starfield canvas (z-index -1) reads through margins and page chrome. Existing page content (forms, cards, panels) keeps its own background; the galaxy peeks through gaps and around content. The element gets the dark colour so even early paint before main.js inserts the canvas reads as galaxy-ready. body is transparent so the dark html background (and the canvas on top of it) shows through wherever page content does not explicitly paint a background. */ html { background: #050608; } body { font-family: var(--font-primary); background: transparent; color: var(--color-text); min-height: 100vh; overflow-x: hidden; line-height: 1.5; } /* Tool pages — every page under /pages/* opts into the original light theme for productivity (forms, lists, editors). The dashboard tile launcher and sign-in screens keep the dark galaxy treatment as the "entrance" feel. The solid white body also hides the starfield canvas underneath (main.js skips the canvas injection entirely when this class is present). */ body.tool-page { background: #ffffff; } /* Foreground transition target. Pages use
, .app-content, or a page-specific wrapper. We target the known wrappers so the galaxy canvas (also a body child, position:fixed at z-index -1) is unaffected. Add new wrappers here as pages are built — be conservative, no body > * rule. */ main, .app-content, .chat-layout, .settings-main, .contacts-main, .detail-main, .import-main, .ob-main { transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1), transform 520ms cubic-bezier(0.16, 1, 0.3, 1), filter 520ms cubic-bezier(0.16, 1, 0.3, 1); transform-origin: 50% 50%; will-change: transform, opacity, filter; } /* LEAVE — "blast off": foreground scales toward the camera, fades, and blurs as if the user is being pulled into the clicked tile. Acceleration easing so the motion feels propulsive, not coasting. */ body.page-leaving main, body.page-leaving .app-content, body.page-leaving .chat-layout, body.page-leaving .settings-main, body.page-leaving .contacts-main, body.page-leaving .detail-main, body.page-leaving .import-main, body.page-leaving .ob-main { opacity: 0; transform: scale(1.18); filter: blur(6px); transition: opacity 320ms cubic-bezier(0.4, 0, 1, 1), transform 320ms cubic-bezier(0.4, 0, 1, 1), filter 320ms cubic-bezier(0.4, 0, 1, 1); } body.page-leaving { pointer-events: none; } /* TILE ZOOM — the clicked tile is the "portal". Big scale, fast fade, slight blur. Reads as the user diving in. */ .tile-zooming { transform: scale(2.6) !important; opacity: 0 !important; filter: blur(3px) !important; transition: transform 320ms cubic-bezier(0.4, 0, 1, 1), opacity 320ms cubic-bezier(0.55, 0, 0.85, 0), filter 320ms cubic-bezier(0.4, 0, 1, 1) !important; pointer-events: none !important; z-index: 50; } /* FORWARD / BACK ENTER — disabled. The previous implementation hid content via `opacity: 0; transition: none` and relied on a double-rAF + transition- rule-flip in main.js to animate it back in. In some browsers the transition never fires (because the `transition` property changes in the same paint frame as the animated properties), leaving every tool page permanently invisible. The dramatic blast-off / landing entrance has been removed. The leave animation (`tile-zooming` + `body.page-leaving`) stays — that path uses a single class add with no rule-flip and is bulletproof. */ @media (prefers-reduced-motion: reduce) { main, .app-content, .chat-layout, .settings-main, .contacts-main, .detail-main, .import-main, .ob-main, body.page-leaving main, body.page-leaving .app-content, body.page-entering main, body.page-entering .app-content, body.page-entering-back main, body.page-entering-back .app-content, .tile-zooming { transition: none !important; transform: none !important; opacity: 1 !important; filter: none !important; } } a { color: inherit; text-decoration: none; } /* --- Cursor Glow --- */ #cursor-glow { position: fixed; top: 0; left: 0; width: 600px; height: 600px; background: radial-gradient( circle at center, rgba(80, 80, 80, 0.07) 0%, rgba(80, 80, 80, 0.03) 30%, transparent 70% ); pointer-events: none; z-index: 0; transform: translate(-300px, -300px); transition: opacity 0.4s ease; will-change: transform; } /* --- Layout --- */ main { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 3rem 2rem; } /* --- Hero --- */ .hero { text-align: center; margin-bottom: 4rem; } .hero-title { font-size: clamp(3.5rem, 10vw, 7rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--color-text); opacity: 0; animation: fadeInUp 0.8s ease-out forwards; } .hero-subtitle { font-size: clamp(1rem, 2.5vw, 1.35rem); font-weight: 400; color: var(--color-text-secondary); margin-top: 1rem; letter-spacing: 0.02em; opacity: 0; animation: fadeInUp 0.8s ease-out 0.15s forwards; } /* --- Features Grid --- */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; max-width: 880px; width: 100%; } /* Center the bottom row when there's an odd number */ @media (min-width: 780px) { .features { grid-template-columns: repeat(3, 1fr); } /* A lone card on the final row (e.g. the 7th of 7) drops into the centre column instead of sitting orphaned on the left. */ .feature-card:last-child:nth-child(3n + 1) { grid-column: 2; } } /* --- Feature Cards --- */ .feature-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.5rem 2rem 2rem; background: var(--color-card-bg); border: 1px solid var(--color-card-border); border-radius: var(--border-radius); transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth); cursor: pointer; opacity: 0; animation: fadeInUp 0.6s ease-out forwards; } .feature-card:nth-child(1) { animation-delay: 0.25s; } .feature-card:nth-child(2) { animation-delay: 0.35s; } .feature-card:nth-child(3) { animation-delay: 0.45s; } .feature-card:nth-child(4) { animation-delay: 0.55s; } .feature-card:nth-child(5) { animation-delay: 0.65s; } .feature-card:nth-child(6) { animation-delay: 0.75s; } .feature-card:nth-child(7) { animation-delay: 0.85s; } .feature-card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 0 50px 8px var(--color-glow), 0 0 80px 20px rgba(100, 100, 100, 0.06), 0 25px 50px -12px rgba(0, 0, 0, 0.08); } .feature-card:active { transform: translateY(-2px); transition-duration: 0.1s; } /* --- Card Icon --- */ .feature-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 1.25rem; border-radius: var(--border-radius-sm); background: var(--color-bg); border: 1px solid var(--color-card-border); transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth); } .feature-card:hover .feature-icon { border-color: transparent; box-shadow: 0 0 20px 4px rgba(100, 100, 100, 0.08); } .feature-icon svg { width: 24px; height: 24px; stroke: var(--color-text); stroke-width: 1.5; fill: none; } /* --- Card Text --- */ .feature-card h2 { font-size: 1.15rem; font-weight: 650; letter-spacing: -0.01em; margin-bottom: 0.35rem; } .feature-card p { font-size: 0.875rem; color: var(--color-text-muted); font-weight: 400; } /* --- Footer --- */ .footer { margin-top: 4rem; opacity: 0; animation: fadeInUp 0.6s ease-out 0.85s forwards; } .footer p { font-size: 0.8rem; color: var(--color-text-muted); letter-spacing: 0.03em; } /* ============================================ Floating back button — replaces the full-width .app-nav strip. Fixed top-left, glassmorphic, sits above galaxy canvas. ============================================ */ /* Canonical page-level back button. One component, every page. Solid near-black pill + white icon + "Back" label = high contrast on the light tool theme and unambiguous (icon-only corner buttons were the #1 "I can't find how to go back" complaint). Fixed top-left so it never disrupts page layout. */ .floating-back { position: fixed; top: 1rem; left: 1rem; z-index: 90; display: inline-flex; align-items: center; gap: 0.4rem; height: 38px; padding: 0 0.85rem 0 0.7rem; background: #0a0a0a; border: 1px solid #0a0a0a; border-radius: 999px; color: #ffffff; font: 600 0.8rem/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; letter-spacing: 0.01em; box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.4); transition: background 0.15s, transform 0.1s, box-shadow 0.15s; text-decoration: none; cursor: pointer; } .floating-back:hover { background: #262626; box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.5); } .floating-back:active { transform: scale(0.97); } .floating-back svg { flex-shrink: 0; stroke: #ffffff; } /* Visible label. "Back" is the default (for buttons that navigate to a parent screen within a tool). ".floating-dashboard" overrides to "Dashboard" for the top-left global button that always returns to the dashboard (app.html). Accessible name comes from each anchor's aria-label (screen readers ignore generated content). */ .floating-back::after { content: "Back"; } .floating-back.floating-dashboard::after { content: "Dashboard"; } @media (prefers-reduced-motion: reduce) { .floating-back, .floating-back:active { transition: none; transform: none; } } /* ============================================ Coming Soon Pages ============================================ */ .coming-soon-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 3rem 2rem; text-align: center; } /* On the dark galaxy, .coming-soon-page text must be light. Inline back-links inside panels keep their own colour. */ .coming-soon-page .back-link { color: var(--color-text-secondary); } .coming-soon-page .back-link:hover { color: var(--color-text); } .coming-soon-page .page-title { color: var(--color-text); } .coming-soon-page .page-subtitle { color: var(--color-text-secondary); } .coming-soon-page .coming-soon-badge { border-color: rgba(255, 255, 255, 0.18); color: var(--color-text-secondary); } .coming-soon-page .coming-soon-text { color: var(--color-text-muted); } .back-link { /* In-flow by default. Sub-pages render the link inside their own header above the page title. Pages that genuinely need a fixed/absolute back link (none today) should add their own override class. */ display: inline-block; font-size: 0.9rem; font-weight: 500; color: var(--color-text-secondary); transition: color var(--transition-fast); text-decoration: none; opacity: 0; animation: fadeInUp 0.5s ease-out forwards; } .back-link:hover { color: var(--color-text); } .page-title { font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-bottom: 0.5rem; opacity: 0; animation: fadeInUp 0.7s ease-out 0.1s forwards; } .page-subtitle { font-size: 1.1rem; color: var(--color-text-secondary); margin-bottom: 2.5rem; opacity: 0; animation: fadeInUp 0.7s ease-out 0.2s forwards; } .coming-soon-badge { display: inline-block; padding: 0.6rem 1.8rem; border: 1px solid var(--color-card-border); border-radius: 100px; font-size: 0.8rem; font-weight: 550; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); opacity: 0; animation: fadeInUp 0.7s ease-out 0.3s forwards; } .coming-soon-badge.animated { animation: fadeInUp 0.7s ease-out 0.3s forwards, pulse 3.5s ease-in-out 1s infinite; } .coming-soon-text { margin-top: 1.5rem; font-size: 0.95rem; color: var(--color-text-muted); opacity: 0; animation: fadeInUp 0.7s ease-out 0.4s forwards; } /* ============================================ Animations ============================================ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(100, 100, 100, 0.06); } 50% { box-shadow: 0 0 24px 6px rgba(100, 100, 100, 0.08); } } /* ============================================ Accessibility ============================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; } } /* ============================================ Mobile refinements ============================================ */ @media (max-width: 500px) { .features { gap: 1rem; } .feature-card { padding: 2rem 1.5rem 1.5rem; } /* .back-link mobile override removed — link is in-flow now */ }