/* ClapAssist website — the one stylesheet every public page loads. Direction: "Bright, Apple-grade luminous theme, clean paper, rich glassmorphism". Bump the ?v= query on the whenever this file changes. */ /* ---------- 0. Fonts (self-hosted, SIL OFL; licences in /fonts) ---------- */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/geist-latin.woff2') format('woff2'); } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/fraunces-500-latin.woff2') format('woff2'); } @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 500; font-display: swap; src: url('/fonts/fraunces-500italic-latin.woff2') format('woff2'); } /* ---------- 1. Tokens (Bright Luminous Theme) ---------- */ :root { color-scheme: light; --paper: #FAFAFC; --paper-2: #F3F4F8; --paper-3: #E9ECF4; --surface: #FFFFFF; --ink: #0E1020; --ink-2: #3E4358; --ink-3: #646A82; --ink-4: #949BB2; --hair: rgba(14, 16, 32, .08); --hair-2: rgba(14, 16, 32, .14); --hair-3: rgba(14, 16, 32, .22); --accent: #4F46E5; --accent-2: #4338CA; --accent-ink: #3730A3; --accent-soft: #EEF2FF; --accent-line: #C7D2FE; --accent-periwinkle: #6366F1; --accent-periwinkle-dark: #4F46E5; --ok: #16A34A; --ok-soft: #F0FDF4; --warn: #D97706; --warn-soft: #FFFBEB; --warn-line: #FDE68A; --offer: #EA580C; --bad: #E11D48; --stage: #0F1224; --stage-2: #181C34; --stage-3: #222746; --on-stage: #F8FAFC; --on-stage-2: rgba(248, 250, 252, .8); --on-stage-3: rgba(248, 250, 252, .55); --stage-hair: rgba(255, 255, 255, .12); --stage-hair-2: rgba(255, 255, 255, .18); --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --serif: 'Fraunces', 'Iowan Old Style', Palatino, Georgia, serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 30px; --r-2xl: 38px; --r-pill: 999px; --shadow-ring: 0 0 0 1px var(--hair); --shadow-sm: 0 1px 3px rgba(14, 16, 32, .06), 0 1px 2px rgba(14, 16, 32, .04); --shadow-md: 0 12px 32px -8px rgba(14, 16, 32, .12), 0 0 0 1px rgba(14, 16, 32, .05); --shadow-lg: 0 24px 60px -12px rgba(14, 16, 32, .15), 0 0 0 1px rgba(14, 16, 32, .06); --shadow-desktop: 0 32px 84px -16px rgba(14, 18, 48, .22), 0 0 0 1px rgba(14, 16, 32, .08); --shadow-hud: 0 24px 60px -12px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .15), inset 0 1px 0 rgba(255, 255, 255, .18); --container: 1200px; --container-wide: 1280px; --container-text: 720px; --gutter: 20px; --section: 96px; --nav-h: 64px; --overlap: 48px; --ease: cubic-bezier(.16, 1, .3, 1); } @media (min-width: 640px) { :root { --gutter: 32px; --overlap: 64px; } } @media (min-width: 900px) { :root { --gutter: 40px; --section: 120px; --overlap: 80px; } } /* ---------- 2. Base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); } /* iOS Safari ignores overflow-x on for the page's own sideways scroll; `clip` on the root stops it without creating a scroll container (2026-09-05, iPhone SE). */ html { overflow-x: clip; } body { background: var(--paper); color: var(--ink-2); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; /* clip, not hidden: overflow-x hidden makes body a scroll container, and then nothing inside it can be position: sticky (the nav and help bar scrolled away, 2026-09-06). */ overflow-x: clip; } a { color: inherit; } img, video, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; } ::selection { background: var(--accent-soft); color: var(--ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } [hidden] { display: none !important; } /* ---------- 3. Type ---------- */ h1, h2, h3, h4 { color: var(--ink); font-weight: 500; text-wrap: balance; } h1 { font-family: var(--serif); font-size: clamp(44px, 6.8vw, 74px); line-height: 1.04; letter-spacing: -.025em; font-variation-settings: 'opsz' 144; } h1 em, .serif { font-family: var(--serif); font-style: italic; font-weight: 500; } .grad { color: var(--accent-ink); } h2 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.1; letter-spacing: -.025em; } h2 em { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -.01em; } h3 { font-size: 22px; line-height: 1.25; letter-spacing: -.015em; } h4 { font-size: 17px; line-height: 1.3; letter-spacing: -.01em; } p { text-wrap: pretty; } .lead, .sub { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; color: var(--ink-2); max-width: 48ch; } .label, .kick, .eyebrow { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } .eyebrow .dot { display: none; } .small { font-size: 14px; color: var(--ink-3); } strong, b { font-weight: 600; color: var(--ink); } code { font-family: var(--mono); font-size: .9em; background: var(--paper-2); border: 1px solid var(--hair); border-radius: var(--r-xs); padding: 1px 6px; color: var(--ink); } /* Inline chip inside headings */ .h-chip, .pill-chip { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; padding: 3px 12px; border-radius: var(--r-pill); font-size: .85em; font-weight: 500; line-height: 1.3; background: rgba(255, 255, 255, .2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .25); color: inherit; margin: 0 4px; } .h-chip svg, .pill-chip svg { width: 16px; height: 16px; flex: none; } .pill-chip--dark { background: rgba(14, 16, 32, .07); border-color: rgba(14, 16, 32, .12); color: var(--ink); } /* ---------- 4. Layout ---------- */ .wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 1; } .wrap--wide { max-width: var(--container-wide); } .wrap--text { max-width: var(--container-text); } section { padding-top: var(--section); } .band, .soft { background: var(--paper-2); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin-top: var(--section); padding: var(--section) 0; } .band>.wrap>section, .band section, .soft>.wrap>section, .soft section { padding-top: 0; } .after-hero { padding-top: calc(var(--overlap) + 40px); } .section-head { display: grid; gap: 14px 48px; margin-bottom: 48px; align-items: end; } .section-head .label { grid-column: 1 / -1; margin-bottom: 2px; } .section-head h2 { max-width: 18ch; } .section-head .lead { margin: 0; } .section-head--center { text-align: center; justify-items: center; } .section-head--center h2 { max-width: 22ch; } @media (min-width: 900px) { .section-head:not(.section-head--center) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .section-head:not(.section-head--center) .lead { justify-self: end; max-width: 42ch; } } section>.kick, section>h2, section>.lead, .final>h2, .final>.lead { text-align: center; margin-left: auto; margin-right: auto; } section>.kick { margin-bottom: 14px; } section>h2 { max-width: 20ch; margin-bottom: 14px; } section>.lead { margin-bottom: 48px; } /* ---------- 5. Nav (Bright & Clean) ---------- */ .nav-outer { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .88); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--hair); transition: background .25s, border-color .25s, box-shadow .25s; } .nav-outer.is-scrolled { box-shadow: 0 4px 20px -4px rgba(14, 16, 32, .08); } nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--nav-h); max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; letter-spacing: -.01em; color: var(--ink); text-decoration: none; } .brand-mark { width: 32px; height: 32px; border-radius: 9px; overflow: hidden; display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 2px 10px rgba(11, 79, 191, .18); background: #fff; } .brand-name { font-weight: 700; letter-spacing: -.01em; color: #182038; } .brand-name b { font-weight: 800; color: #5282F1; } .brand-mark svg, .brand-mark img { width: 100%; height: 100%; display: block; } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { font-size: 14px; font-weight: 500; color: var(--ink-3); text-decoration: none; transition: color .2s; } .nav-links a:hover { color: var(--ink); } .nav-actions { display: flex; align-items: center; gap: 10px; } .nav-links a.pill, .nav-actions a.pill { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: #fff; text-decoration: none; background: linear-gradient(180deg, #5B5BF0, var(--accent-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px var(--accent-ink); transition: transform .16s var(--ease); } .nav-links a.pill:hover, .nav-actions a.pill:hover { color: #fff; transform: scale(1.02); } .nav-menu-btn { display: none; width: 38px; height: 38px; border-radius: var(--r-sm); border: 0; background: transparent; box-shadow: 0 0 0 1px var(--hair-2); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .nav-menu-btn span { width: 16px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; } .is-open .nav-menu-btn span:first-child { transform: translateY(3.25px) rotate(45deg); } .is-open .nav-menu-btn span:last-child { transform: translateY(-3.25px) rotate(-45deg); } /* 320-px phones (iPhone SE): the Download pill + menu button overran the edge by 8 px and gave the page a sideways scroll. Measured in WebKit 2026-09-05. */ @media (max-width: 360px) { .nav-actions { gap: 6px; } .nav-actions a.pill { padding: 0 12px; font-size: 13px; } .nav-menu-btn { width: 34px; } } @media (max-width: 899px) { .nav-links a:not(.pill) { display: none; } .nav-menu-btn { display: flex; } .nav-outer.is-open .nav-links { position: absolute; top: var(--nav-h); left: 0; right: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border-bottom: 1px solid var(--hair); padding: 6px var(--gutter) 14px; box-shadow: var(--shadow-md); } .nav-outer.is-open .nav-links a:not(.pill) { display: block; padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 16px; color: var(--ink); } .nav-outer.is-open .nav-links a:last-child:not(.pill) { border-bottom: 0; } .nav-outer.is-open .nav-links a.pill { display: none; } } /* ---------- 6. Buttons and chips ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 24px; border-radius: var(--r-sm); font-size: 15px; font-weight: 500; letter-spacing: -.005em; line-height: 1; text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; transition: transform .16s var(--ease), background .2s, box-shadow .2s, color .2s; } .btn svg { width: 18px; height: 18px; flex: none; } .btn:hover { transform: scale(1.02); } .btn:active { transform: scale(.98); } .btn-primary { background: linear-gradient(180deg, #5B5BF0, var(--accent-2)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 20px -4px rgba(79, 70, 229, .35), 0 0 0 1px var(--accent-ink); } .btn-primary:hover { background: linear-gradient(180deg, #6868F5, #4338CA); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 24px -4px rgba(79, 70, 229, .45), 0 0 0 1px var(--accent-ink); } .btn-ghost { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--hair-2), var(--shadow-sm); } .btn-ghost:hover { box-shadow: 0 0 0 1px var(--hair-3), var(--shadow-sm); } .btn-sm { height: 38px; padding: 0 16px; font-size: 14px; } .btn-text { background: none; color: var(--accent-ink); padding: 0 4px; height: auto; text-decoration: underline; text-underline-offset: 4px; } .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; line-height: 1; padding: 6px 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); white-space: nowrap; } .chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .chip--ok { background: var(--ok-soft); color: var(--ok); } .chip--offer { background: var(--warn-soft); color: var(--offer); } .keycaps { display: inline-flex; gap: 6px; align-items: center; } .keycap { min-width: 32px; height: 32px; padding: 0 8px; display: inline-grid; place-items: center; background: var(--surface); border-radius: var(--r-xs); box-shadow: 0 0 0 1px var(--hair-2), 0 2px 0 var(--hair-2); font-size: 13px; font-weight: 500; color: var(--ink); } .keycaps--lg .keycap { min-width: 52px; height: 52px; font-size: 18px; border-radius: 12px; box-shadow: 0 0 0 1px var(--hair-2), 0 4px 0 var(--hair-2), 0 16px 32px -12px rgba(30, 34, 70, .2); } /* ---------- 7. Hero: Bright Luminous Theme ---------- */ .hero { text-align: center; padding: clamp(48px, 6vw, 76px) 0 0; background: radial-gradient(80% 50% at 50% 0%, #EEF2FF 0%, #F5F7FF 40%, var(--paper) 100%); } .hero .label, .hero .eyebrow { margin-bottom: 20px; color: var(--accent-ink); } .hero h1 { max-width: 18ch; margin: 0 auto 20px; color: var(--ink); } .hero .sub { margin: 0 auto 30px; color: var(--ink-2); } .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .trust { margin-top: 18px; font-size: 13.5px; color: var(--ink-3); } .trust a { color: var(--ink); text-underline-offset: 3px; font-weight: 500; } .hero .wrap>* { animation: rise .6s var(--ease) both; } .hero .wrap> :nth-child(2) { animation-delay: .06s; } .hero .wrap> :nth-child(3) { animation-delay: .12s; } .hero .wrap> :nth-child(4) { animation-delay: .18s; } .hero .wrap> :nth-child(5) { animation-delay: .24s; } .hero .wrap--wide>* { animation-delay: .3s; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* Hero Image Showcase Frame (Apple-Grade Polish) */ .hero-stage-frame { position: relative; max-width: 1120px; margin: clamp(36px, 4.5vw, 56px) auto 0; border-radius: 20px; overflow: hidden; background: #FFFFFF; box-shadow: 0 32px 84px -16px rgba(14, 18, 48, .22), 0 0 0 1px rgba(14, 16, 32, .08); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .hero-stage-frame:hover { transform: translateY(-3px); box-shadow: 0 38px 96px -16px rgba(14, 18, 48, .28), 0 0 0 1px rgba(14, 16, 32, .1); } .hero-stage-frame img { width: 100%; height: auto; display: block; border-radius: inherit; } /* Realistic macOS Desktop Frame (Luminous Setting) */ /* Realistic macOS Desktop Frame with Live Screen Share Demonstration */ .mac-desktop { position: relative; border-radius: var(--r-xl); background: #FFFFFF; box-shadow: var(--shadow-desktop); overflow: hidden; margin: clamp(36px, 4.5vw, 56px) auto 0; border: 1px solid rgba(14, 16, 32, .1); } .mac-wallpaper { position: relative; background: radial-gradient(100% 80% at 50% 10%, #FF9A7B 0%, #BA68C8 38%, #5C6BC0 72%, #1A2035 100%); padding: 12px 16px 20px; } .mac-menubar { display: flex; align-items: center; justify-content: space-between; height: 28px; padding: 0 12px; font-size: 11.5px; color: rgba(255, 255, 255, .9); font-weight: 500; } .mac-menubar-left, .mac-menubar-right { display: flex; align-items: center; gap: 14px; } .mac-menubar-left svg { width: 12px; height: 12px; fill: currentColor; } .mac-menubar-right svg { width: 14px; height: 14px; fill: currentColor; } /* Screen Share Window Frame */ .screenshare-window { position: relative; border-radius: 16px; background: #0E111E; box-shadow: 0 28px 70px -15px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .12); overflow: hidden; margin: 8px auto 12px; max-width: 1040px; min-height: 480px; text-align: left; } .screenshare-top-bar { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 14px; background: #16192B; border-bottom: 1px solid rgba(255, 255, 255, .08); } .traffic-lights { display: flex; gap: 7px; align-items: center; } .traffic-lights span { width: 10px; height: 10px; border-radius: 50%; } .traffic-lights span.r { background: #FF5F56; } .traffic-lights span.y { background: #FFBD2E; } .traffic-lights span.g { background: #27C93F; } /* Google Meet Active Presentation Banner */ .presenting-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(39, 201, 63, .15); border: 1px solid rgba(39, 201, 63, .35); color: #4CC97F; padding: 4px 12px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; } .presenting-pill i { width: 7px; height: 7px; border-radius: 50%; background: #4CC97F; animation: recBlink 1.4s infinite; } .stop-share-btn { font-size: 11px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .15); color: #fff; padding: 2px 8px; border-radius: 4px; margin-left: 6px; } /* Shared Workspace Grid */ .workspace-grid { display: grid; grid-template-columns: 1fr 310px; gap: 0; min-height: 440px; position: relative; } .code-canvas { padding: 20px 24px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: #D1D7E0; background: #0E111E; border-right: 1px solid rgba(255, 255, 255, .06); position: relative; } .code-canvas .c-dim { color: #5B637A; } .code-canvas .c-kw { color: #FF7B72; font-weight: 600; } .code-canvas .c-fn { color: #D2A8FF; } .code-canvas .c-str { color: #A5D6FF; } .code-canvas .c-num { color: #79C0FF; } /* Interviewer Side Inset */ .interviewer-sidebar { padding: 16px; background: #121526; display: flex; flex-direction: column; gap: 14px; } .interviewer-box { border-radius: 12px; background: #1A1E34; border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; position: relative; } .interviewer-video-mock { width: 100%; aspect-ratio: 16 / 11; background: radial-gradient(circle at 50% 35%, #343C6E 0%, #171A2E 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; } .interviewer-avatar-circle { width: 56px; height: 56px; border-radius: 50%; background: #5865A8; display: grid; place-items: center; color: #fff; font-size: 18px; font-weight: 600; border: 2px solid rgba(255, 255, 255, .2); } .interviewer-name-tag { position: absolute; left: 10px; bottom: 8px; font-size: 11px; color: #fff; font-weight: 500; display: flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, .6); padding: 3px 8px; border-radius: 4px; backdrop-filter: blur(4px); } .interviewer-name-tag i { width: 6px; height: 6px; border-radius: 50%; background: #4CC97F; } .interviewer-sees-badge { padding: 8px 10px; font-size: 11px; color: var(--on-stage-2); background: rgba(255, 255, 255, .04); border-top: 1px solid rgba(255, 255, 255, .06); display: flex; align-items: center; gap: 6px; } /* Floating Frosted Glass ClapAssist HUD (Undetectable & Over Shared Screen) */ .clap-hud { position: absolute; left: 35%; top: 32px; transform: translateX(-35%); width: 92%; max-width: 540px; z-index: 20; pointer-events: auto; } .hud-header-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-radius: 14px 14px 0 0; background: rgba(20, 24, 44, .95); border: 1px solid rgba(255, 255, 255, .14); border-bottom: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); } .hud-brand-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #fff; } .hud-brand-title .brand-mark { width: 22px; height: 22px; border-radius: 6px; } .hud-brand-title .brand-mark svg { width: 14px; height: 14px; } .hud-live-tag { font-size: 10px; font-weight: 700; color: #4CC97F; background: rgba(39, 201, 63, .15); padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .05em; } .hud-invisible-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: #7EE787; background: rgba(35, 134, 54, .2); border: 1px solid rgba(56, 139, 253, .2); padding: 3px 8px; border-radius: var(--r-pill); } .hud-body { background: rgba(16, 19, 36, .92); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border-radius: 0 0 16px 16px; padding: 18px 20px; box-shadow: var(--shadow-hud); border: 1px solid rgba(255, 255, 255, .14); border-top: 1px solid rgba(255, 255, 255, .08); } .hud-detected-q { font-size: 13.5px; font-weight: 600; color: #fff; margin-bottom: 12px; line-height: 1.4; display: flex; align-items: flex-start; gap: 8px; } .hud-detected-q svg { width: 16px; height: 16px; color: #6366F1; flex: none; margin-top: 2px; } .hud-bullets { list-style: none; display: grid; gap: 8px; margin-bottom: 14px; } .hud-bullets li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: #D8DEE9; line-height: 1.45; } .hud-bullets li span.num { width: 18px; height: 18px; border-radius: 5px; background: rgba(99, 102, 241, .25); color: #A5B4FC; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; flex: none; } .hud-chips-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); } .hud-chip-item { font-size: 11px; font-weight: 500; color: #C9D1D9; padding: 5px 10px; border-radius: 6px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08); } .hud-chip-item.active { background: #4F46E5; color: #fff; border-color: #6366F1; } /* macOS Dock */ .mac-dock { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 14px; border-radius: 16px; background: rgba(255, 255, 255, .22); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, .3); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); width: fit-content; margin: 8px auto 4px; } .dock-app { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); transition: transform .15s; } .dock-app:hover { transform: translateY(-4px) scale(1.1); } .dock-app svg { width: 24px; height: 24px; } @media (max-width: 899px) { .workspace-grid { grid-template-columns: 1fr; } .interviewer-sidebar { display: none; } .clap-hud { position: static; transform: none; width: 100%; max-width: 100%; margin-top: 14px; } .mac-menubar { display: none; } } /* ---------- 8. Compatible With Every Tool (Logo Trust Band) ---------- */ .compat-band { text-align: center; margin-top: 24px; } .compat-heading { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 24px; } .compat-logos { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 4.5vw, 56px); flex-wrap: wrap; } .compat-item { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; padding: 6px 10px; border-radius: 8px; transition: transform .16s, opacity .2s; } .compat-item:hover { transform: translateY(-1px); opacity: .85; } .compat-item svg, .compat-item img { width: 22px; height: 22px; flex: none; object-fit: contain; display: block; } /* Stat Row */ .stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 56px; border-top: 1px solid var(--hair); } .stat { padding: 28px 28px 8px 0; border-right: 1px solid var(--hair); } .stat+.stat { padding-left: 28px; } .stat:last-child { border-right: 0; padding-right: 0; } .stat .big { font-size: clamp(44px, 5vw, 60px); font-weight: 500; letter-spacing: -.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; } .stat .lbl { font-size: 17px; font-weight: 500; color: var(--ink); margin: 14px 0 6px; } .stat p { font-size: 14px; color: var(--ink-3); max-width: 32ch; } @media (max-width: 720px) { .stat-row { grid-template-columns: 1fr; } .stat, .stat:last-child { border-right: 0; border-bottom: 1px solid var(--hair); padding: 22px 0; } .stat+.stat { padding-left: 0; } .stat:last-child { border-bottom: 0; } } /* ---------- 9. How ClapAssist Helps: Dual Bento Cards ---------- */ .bento-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; } .duo-card { border-radius: var(--r-xl); padding: clamp(28px, 3.5vw, 44px); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; min-height: 480px; } .duo-card h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; letter-spacing: -.02em; margin-bottom: 12px; } .duo-card p.card-sub { font-size: 15.5px; line-height: 1.5; margin-bottom: 32px; } /* Blue Card (Live Listening Waveform) */ .duo-card--blue { background: linear-gradient(145deg, #5B7CF8 0%, #4667EE 50%, #3B5BDE 100%); color: #fff; box-shadow: 0 24px 60px -12px rgba(70, 103, 238, .42), inset 0 1px 0 rgba(255, 255, 255, .25); border: 1px solid rgba(255, 255, 255, .18); } .duo-card--blue h3 { color: #fff; } .duo-card--blue p.card-sub { color: rgba(255, 255, 255, .88); } .wave-container { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 24px 0 32px; text-align: center; } .timer-record { font-size: clamp(36px, 4vw, 44px); font-weight: 600; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 2px; } .record-dot { width: 9px; height: 9px; border-radius: 50%; background: #FF6B6B; box-shadow: 0 0 10px #FF6B6B; display: inline-block; animation: recBlink 1.4s ease-in-out infinite; } .record-label { font-size: 13px; color: rgba(255, 255, 255, .78); font-weight: 500; margin-bottom: 24px; } .wave-bars-live { display: flex; align-items: center; justify-content: center; gap: 4px; height: 52px; width: 100%; max-width: 380px; margin: 0 auto; } .wave-bars-live span { width: 3.5px; height: var(--h, 16px); border-radius: 4px; background: rgba(255, 255, 255, .9); animation: soundwavePulse 1.2s ease-in-out infinite alternate; animation-delay: var(--d, 0s); } @keyframes soundwavePulse { 0% { transform: scaleY(0.35); opacity: 0.55; } 100% { transform: scaleY(1.15); opacity: 1; } } .duo-translucent-dock { background: rgba(255, 255, 255, .15); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .2); border-radius: 14px; padding: 12px 14px; margin-top: auto; } .dock-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .dock-chips span { font-size: 10.5px; font-weight: 500; color: rgba(255, 255, 255, .85); padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, .1); } .dock-chips span:first-child { background: rgba(255, 255, 255, .25); color: #fff; font-weight: 600; } .dock-input-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(14, 16, 32, .3); border-radius: 8px; padding: 6px 10px; font-size: 11px; color: rgba(255, 255, 255, .7); } .dock-input-bar kbd { background: rgba(255, 255, 255, .2); padding: 1px 4px; border-radius: 3px; font-family: var(--mono); } .dock-input-actions { display: flex; align-items: center; gap: 6px; } .dock-smart-pill { font-size: 10px; color: #A5B4FC; background: rgba(99, 102, 241, .3); padding: 2px 6px; border-radius: 4px; } .dock-send-btn { width: 20px; height: 20px; border-radius: 50%; background: #3B82F6; color: #fff; display: grid; place-items: center; font-size: 9px; } /* Light Card (Instant Assist Floating HUD) */ .duo-card--light { background: #F4F6FB; box-shadow: 0 20px 48px -12px rgba(14, 16, 32, .1), 0 0 0 1px rgba(14, 16, 32, .06); border: 1px solid rgba(14, 16, 32, .08); } .duo-card--light h3 { color: var(--ink); } .duo-card--light p.card-sub { color: var(--ink-3); } .duo-assist-stage { display: flex; flex-direction: column; align-items: center; margin-top: auto; position: relative; } .assist-floating-controls { display: inline-flex; align-items: center; gap: 8px; background: #181C32; color: #fff; padding: 5px 12px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 500; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); margin-bottom: 14px; } .btn-hide-eye { display: grid; place-items: center; color: #949BB2; } .hud-square-btn { width: 8px; height: 8px; border-radius: 2px; background: #fff; } .assist-hud-box { width: 100%; background: #121528; border-radius: 16px; padding: 18px 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .1); color: var(--on-stage); position: relative; text-align: left; } .hud-badge-tag { position: absolute; top: 16px; right: 18px; font-size: 10.5px; font-weight: 700; color: #fff; background: #3B82F6; padding: 3px 8px; border-radius: 5px; text-transform: uppercase; letter-spacing: .04em; } .hud-viewed-label { font-size: 11px; color: #8E96B0; margin-bottom: 8px; } .hud-smart-copy { font-size: 13px; line-height: 1.5; color: #E2E8F0; margin-bottom: 16px; } .hud-chips-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; } .hud-chip-item { font-size: 11px; font-weight: 500; color: #C9D1D9; padding: 5px 10px; border-radius: 6px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08); } .hud-chip-item.active { background: #4F46E5; color: #fff; border-color: #6366F1; } .hud-input-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; padding: 8px 12px; } .hud-input-placeholder { font-size: 11px; color: #8E96B0; } .hud-input-placeholder kbd { background: rgba(255, 255, 255, .15); padding: 1px 4px; border-radius: 3px; font-family: var(--mono); color: #E2E8F0; } .hud-input-right { display: flex; align-items: center; gap: 8px; } .hud-smart-badge { font-size: 10px; font-weight: 600; color: #A5B4FC; background: rgba(99, 102, 241, .2); padding: 2px 6px; border-radius: 4px; } .hud-dots { color: #646A82; font-size: 12px; letter-spacing: 1px; } .hud-send-btn { width: 22px; height: 22px; border-radius: 50%; background: #3B82F6; color: #fff; display: grid; place-items: center; font-size: 10px; } /* ---------- 10. Instant Meeting Notes (Authentic macOS Document) ---------- */ .notes-stage { background: #D8DFEE; border-radius: var(--r-2xl); padding: clamp(24px, 4vw, 56px); border: 1px solid rgba(14, 16, 32, .08); margin-top: 48px; } .notes-mac-window { background: #FFFFFF; border-radius: 16px; box-shadow: 0 32px 84px -16px rgba(14, 20, 48, .2), 0 0 0 1px rgba(14, 16, 32, .08); overflow: hidden; max-width: 960px; margin: 0 auto; position: relative; } .notes-window-bar { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 18px; background: #FAFBFD; border-bottom: 1px solid rgba(14, 16, 32, .08); } .notes-search-bar { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #8E96B0; background: #F0F3F9; padding: 5px 14px; border-radius: 8px; width: 280px; box-shadow: inset 0 1px 2px rgba(14, 16, 32, .04); } .notes-bar-right { display: flex; align-items: center; gap: 12px; } .btn-start-clap { background: #3B82F6; color: #fff; border: 0; font-size: 11.5px; font-weight: 600; padding: 5px 12px; border-radius: 6px; cursor: pointer; transition: opacity .15s; } .btn-start-clap:hover { opacity: .9; } .notes-user-avatar { width: 26px; height: 26px; border-radius: 50%; background: #3B4260; color: #fff; font-size: 10.5px; font-weight: 600; display: grid; place-items: center; } .notes-canvas { padding: 28px 40px 48px; position: relative; background: #FFFFFF; text-align: left; } .notes-doc-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 16px; } .doc-action-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: #4B5563; background: #F3F4F6; border: 1px solid rgba(14, 16, 32, .08); padding: 5px 10px; border-radius: 6px; cursor: pointer; transition: background .15s; } .doc-action-btn:hover { background: #E5E7EB; } .unread-dot { width: 6px; height: 6px; border-radius: 50%; background: #3B82F6; margin-left: 2px; } .notes-meta-date { font-size: 12.5px; color: #8E96B0; font-weight: 500; margin-bottom: 6px; } .notes-main-heading { font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; color: #111827; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 18px; } .notes-tabs-row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #E5E7EB; padding-bottom: 12px; margin-bottom: 24px; } .notes-tab-group { display: flex; gap: 4px; background: #F3F4F6; padding: 3px; border-radius: 8px; } .notes-tab { font-size: 12px; font-weight: 500; color: #6B7280; padding: 4px 12px; border-radius: 6px; border: 0; background: transparent; cursor: pointer; transition: all .15s; } .notes-tab.active { background: #FFFFFF; color: #111827; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); } .notes-dropdown-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: #4B5563; background: #F9FAFB; border: 1px solid #E5E7EB; padding: 4px 10px; border-radius: 6px; cursor: pointer; } .notes-section-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .notes-section-title { font-size: 15px; font-weight: 700; color: #111827; letter-spacing: -.01em; } .btn-copy-summary { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: #6B7280; background: transparent; border: 0; cursor: pointer; transition: color .15s; } .btn-copy-summary:hover { color: #111827; } .notes-bullet-list { list-style: none; display: grid; gap: 10px; padding: 0; margin: 0; } .notes-bullet-list li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.55; color: #374151; } .notes-bullet-list li::before { content: '•'; position: absolute; left: 4px; top: 0; color: #6B7280; font-size: 14px; } .notes-bullet-list li b { color: #111827; font-weight: 600; } .notes-bottom-prompt-dock { position: sticky; bottom: 16px; max-width: 480px; margin: 36px auto 0; background: #FFFFFF; border: 1px solid rgba(14, 16, 32, .12); border-radius: 12px; box-shadow: 0 12px 36px rgba(14, 16, 32, .14); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; } .btn-resume-session { display: inline-flex; align-items: center; gap: 6px; background: #1F2937; color: #fff; font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 6px; border: 0; cursor: pointer; white-space: nowrap; } .prompt-dock-input { font-size: 12px; color: #9CA3AF; flex: 1; text-align: left; } .prompt-dock-arrow { font-size: 14px; color: #6B7280; font-weight: 600; cursor: pointer; } @media (max-width: 720px) { .notes-canvas { padding: 20px 16px 32px; } .notes-search-bar { display: none; } } /* ---------- 11. Undetectable Bento (Roster, Split, Eyeline) ---------- */ .tiles { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; } .tile { background: var(--surface); border-radius: var(--r-xl); padding: 24px; display: flex; flex-direction: column; min-width: 0; box-shadow: 0 12px 32px -8px rgba(14, 16, 32, .08), 0 0 0 1px rgba(14, 16, 32, .06); } .tile-media { position: relative; border-radius: 16px; background: #F4F6FB; margin-bottom: 22px; aspect-ratio: 16 / 12; overflow: hidden; display: grid; place-items: center; padding: 14px; border: 1px solid var(--hair-2); } .tile h3 { font-size: 19px; margin-bottom: 8px; } .tile p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); } .tile p b { color: var(--ink); } /* Card 1: Roster Card */ .roster-card { width: 100%; background: #FFFFFF; border-radius: 12px; box-shadow: 0 4px 16px rgba(14, 16, 32, .06), 0 0 0 1px rgba(14, 16, 32, .08); overflow: hidden; } .roster-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--hair); } .roster-title { font-size: 12px; font-weight: 600; color: var(--ink); } .roster-list { display: grid; gap: 0; } .roster-row { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px solid rgba(14, 16, 32, .04); } .roster-av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 9.5px; font-weight: 600; flex: none; } .av-1 { background: #FFD6A5; color: #7C2D12; } .av-2 { background: #C7D2FE; color: #3730A3; } .av-3 { background: #FDE68A; color: #854D0E; } .av-4 { background: #BAE6FD; color: #0369A1; } .roster-info { font-size: 11px; line-height: 1.2; } .roster-info b { font-weight: 600; color: var(--ink); } .roster-info small { color: var(--ink-3); } .roster-email { font-size: 9.5px; color: var(--ink-4); } .roster-role { margin-left: auto; font-size: 10.5px; color: var(--ink-3); font-weight: 500; } .roster-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #F8FAFC; border-top: 1px solid var(--hair); font-size: 11px; font-weight: 600; color: var(--ink-3); } .roster-brand { display: flex; align-items: center; gap: 6px; } .roster-eye-slash { color: var(--ink-4); } .split-ide-window { position: absolute; bottom: 0; left: 10px; right: 10px; height: 175px; background: #FFFFFF; border-radius: 10px 10px 0 0; box-shadow: 0 4px 20px rgba(0, 0, 0, .08); overflow: hidden; display: flex; flex-direction: column; z-index: 2; border: 1px solid rgba(14, 16, 32, .08); border-bottom: none; } .ide-win-bar { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; background: #FAFBFC; border-bottom: 1px solid #E5E7EB; } .ide-dots { display: flex; gap: 4px; } .ide-dots span.r { width: 6px; height: 6px; border-radius: 50%; background: #FF5F56; } .ide-dots span.y { width: 6px; height: 6px; border-radius: 50%; background: #FFBD2E; } .ide-dots span.g { width: 6px; height: 6px; border-radius: 50%; background: #27C93F; } .ide-nav-arrows { font-size: 11px; color: #9CA3AF; margin: 0 2px; } .ide-search-box { display: flex; align-items: center; gap: 4px; font-size: 9px; color: #6B7280; background: #F3F4F6; padding: 2px 8px; border-radius: 4px; border: 1px solid #E5E7EB; width: 130px; } .ide-win-body { display: flex; flex: 1; overflow: hidden; } .ide-sidebar { width: 26px; background: #F9FAFB; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; color: #6B7280; } .ide-editor-area { flex: 1; padding: 6px 10px; font-family: var(--mono); font-size: 9px; line-height: 1.35; color: #374151; background: #FFFFFF; overflow: hidden; } .ide-code-content { display: flex; flex-direction: column; gap: 2px; } .code-line { display: flex; gap: 8px; white-space: nowrap; height: 13px; align-items: center; } .code-line .ln { color: #9CA3AF; width: 12px; text-align: right; user-select: none; font-size: 8px; } .c-comment { color: #9CA3AF; } .c-kw { color: #7C3AED; font-weight: 600; } .c-id { color: #1F2937; } .c-fn { color: #7C3AED; font-weight: 600; } .c-param { color: #2563EB; } .c-type { color: #0284C7; font-weight: 500; } .c-str { color: #059669; } .code-skeleton { display: flex; align-items: center; gap: 6px; } .sk-bar { height: 5px; background: #E5E7EB; border-radius: 3px; display: inline-block; } .sk-bar.w-50 { width: 50%; } .sk-bar.w-45 { width: 45%; } .sk-bar.w-40 { width: 40%; } .sk-bar.w-35 { width: 35%; } .sk-bar.w-30 { width: 30%; } .sk-bar.w-25 { width: 25%; } .sk-bar.w-20 { width: 20%; } .sk-bar.w-15 { width: 15%; } .code-chip { background: #EFF6FF; color: #2563EB; padding: 1px 3px; border-radius: 3px; font-family: var(--mono); font-size: 7.5px; font-weight: 500; } /* Card 3: Eyeline Moveable HUD Stage */ .eyeline-stage { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .eyeline-desktop-bg { width: 100%; height: 120px; border-radius: 10px; background: radial-gradient(circle at 70% 30%, #C084FC 0%, #6366F1 50%, #312E81 100%); position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); } .eyeline-hud-mock { position: absolute; top: 14px; left: 14px; width: 120px; background: rgba(255, 255, 255, .25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .4); border-radius: 8px; padding: 6px 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); transition: all .4s var(--ease); } .eyeline-hud-head { font-size: 8.5px; font-weight: 600; color: #fff; margin-bottom: 4px; } .eyeline-hud-bars span { display: block; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .7); margin-bottom: 3px; } .eyeline-hud-bars span:first-child { width: 90%; } .eyeline-hud-bars span:nth-child(2) { width: 65%; } .eyeline-hud-bars span:last-child { width: 40%; margin-bottom: 0; } .eyeline-controls-bar { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; } .keycap-cmd { font-size: 11px; padding: 0 8px; min-width: fit-content; } .key-plus { font-size: 12px; color: var(--ink-4); font-weight: 600; } .key-dir { width: 28px; height: 28px; min-width: 28px; font-size: 13px; cursor: pointer; transition: all .15s; } .key-dir.active, .key-dir:hover { background: #4F46E5; color: #fff; border-color: #4338CA; transform: translateY(-2px); } background: var(--paper-2); border-bottom: 1px solid var(--hair); } .notes-search { display: flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 8px; background: var(--surface); border: 1px solid var(--hair); font-size: 12px; color: var(--ink-3); width: 280px; } .notes-body { padding: clamp(20px, 3vw, 36px); } .notes-date { font-size: 12.5px; font-weight: 500; color: var(--ink-3); margin-bottom: 6px; } .notes-title { font-size: clamp(20px, 2.4vw, 28px); font-weight: 600; color: var(--ink); margin-bottom: 18px; letter-spacing: -.02em; } .notes-tabs { display: flex; gap: 8px; margin-bottom: 24px; border-bottom: 1px solid var(--hair); padding-bottom: 10px; } .notes-tab { font-size: 13px; font-weight: 500; padding: 6px 14px; border-radius: 6px; color: var(--ink-3); background: transparent; cursor: pointer; } .notes-tab.active { background: var(--paper-2); color: var(--ink); font-weight: 600; } .notes-section-head { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 12px; } .action-list { display: grid; gap: 10px; list-style: none; } .action-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; } .action-item input { margin-top: 4px; accent-color: var(--accent); } /* ---------- 11. Undetectable Bento (Roster, Split, Eyeline) ---------- */ .tiles { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .tile { background: var(--surface); border-radius: var(--r-xl); padding: 26px; display: flex; flex-direction: column; min-width: 0; box-shadow: var(--shadow-ring), var(--shadow-sm); } .tile-media { position: relative; border-radius: 16px; background: var(--paper-2); margin-bottom: 22px; aspect-ratio: 3 / 2.2; overflow: hidden; display: grid; place-items: center; padding: 18px; border: 1px solid var(--hair); } .tile .n { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--ink-4); margin-bottom: 8px; } .tile h3 { font-size: 20px; margin-bottom: 8px; } .tile p { font-size: 15px; line-height: 1.55; color: var(--ink-2); } .tile p b { color: var(--ink); } .roster { width: 100%; display: grid; gap: 8px; } .roster .row { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 10px; padding: 8px 12px; box-shadow: var(--shadow-ring); font-size: 13px; color: var(--ink); font-weight: 500; } .roster .av { width: 28px; height: 28px; border-radius: 50%; background: var(--paper-3); color: var(--ink-3); display: grid; place-items: center; font-size: 11px; font-weight: 500; flex: none; } .roster .row--you .av { background: var(--accent-soft); color: var(--accent-ink); } .roster .rl { margin-left: auto; font-size: 11.5px; color: var(--ink-4); font-weight: 400; } .roster .chip { justify-self: start; margin-top: 4px; } .split-container { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; border-radius: 12px; overflow: hidden; border: 1px solid var(--hair-2); } .split-side { padding: 10px; display: flex; flex-direction: column; justify-content: space-between; position: relative; } .split-side--visible { background: #161828; border-right: 1.5px solid #27C93F; } .split-side--hidden { background: #1E2235; } .split-badge { font-size: 10px; font-weight: 600; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; display: inline-block; width: fit-content; } .split-side--visible .split-badge { background: rgba(39, 201, 63, .2); color: #4CC97F; } .split-side--hidden .split-badge { background: rgba(255, 255, 255, .1); color: var(--on-stage-3); } .split-mock-code { font-family: var(--mono); font-size: 9.5px; line-height: 1.4; color: rgba(255, 255, 255, .6); margin-top: 8px; } .split-hud-mini { background: rgba(79, 70, 229, .9); color: #fff; padding: 4px 7px; border-radius: 5px; font-size: 9px; font-weight: 500; margin-top: 6px; } .eyeline-visual { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; } .eyeline-camera { width: 140px; height: 26px; border-radius: 14px; background: #1A1D30; display: flex; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 0 0 1px var(--stage-hair); } .eyeline-camera span { width: 8px; height: 8px; border-radius: 50%; background: #454B68; } @media (max-width: 900px) { .tiles { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } } /* ---------- 12. Install (2-Panel Layout) ---------- */ .install { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; } .panel, .os { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); border: 1px solid var(--hair); padding: 32px; } .os .h { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 20px; } .os .h svg { width: 22px; height: 22px; } .os ol { list-style: none; counter-reset: s; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } .os li { counter-increment: s; position: relative; min-width: 0; padding-left: 36px; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; } .os li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 600; } .os strong, .os b { color: var(--ink); font-weight: 600; } .term { display: flex; align-items: center; gap: 8px; margin-top: 10px; min-width: 0; max-width: 100%; font-family: var(--mono); font-size: 12px; color: var(--ink); background: var(--paper-2); border: 1px solid var(--hair-2); border-radius: var(--r-sm); padding: 10px 10px 10px 12px; } .term>span { min-width: 0; overflow-x: auto; white-space: nowrap; } .terminal-copy-btn { margin-left: auto; flex: none; font-family: var(--sans); font-size: 12px; font-weight: 600; color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: 7px; padding: 5px 12px; cursor: pointer; transition: background .15s; } @keyframes keyPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, .45); } 50% { box-shadow: 0 0 0 6px rgba(217, 119, 6, 0); } } .key-pulse { display: inline-block; padding: 2px 8px; border-radius: var(--r-xs); background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line); font-weight: 600; font-size: 13px; white-space: nowrap; animation: keyPulse 1.8s ease-in-out infinite; } @keyframes termPulse { 0%, 100% { border-color: var(--hair-2); box-shadow: 0 0 0 0 rgba(79, 70, 229, .4); } 50% { border-color: var(--accent); box-shadow: 0 0 0 6px rgba(79, 70, 229, 0); } } .term.pulse { animation: termPulse 1.9s ease-in-out infinite; } .term.pulse .terminal-copy-btn { background: var(--accent); color: #fff; border-color: var(--accent); } .term.pulse .terminal-copy-btn:hover { background: var(--accent-ink); } .install-note { text-align: center; font-size: 13.5px; color: var(--ink-3); margin-top: 24px; } @media (max-width: 768px) { .install { grid-template-columns: 1fr; } } /* ---------- 13. Demo (the two-minute video) ---------- */ .demo-tile { background: var(--paper-3); border-radius: var(--r-xl); padding: clamp(12px, 2.5vw, 28px); } .pv { position: relative; border-radius: 18px; overflow: hidden; background: var(--stage); box-shadow: var(--shadow-lg); } .pv video { width: 100%; height: auto; aspect-ratio: 16 / 9; } .pv-sound { position: absolute; right: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--r-pill); border: 0; background: rgba(10, 12, 20, .75); box-shadow: 0 0 0 1px var(--stage-hair-2); color: #fff; font-size: 13px; font-weight: 500; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .pv-sound:hover { background: rgba(10, 12, 20, .92); } .pv-sound[aria-pressed="true"] { box-shadow: 0 0 0 1px rgba(76, 201, 127, .6); } .pv-switch { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; font-size: 13.5px; color: var(--ink-3); } .pv-switch>span, .pv-switch>#pv-speed { display: inline-flex; align-items: center; gap: 8px; } .segmented { display: inline-flex; background: var(--surface); border-radius: var(--r-sm); box-shadow: 0 0 0 1px var(--hair-2); padding: 3px; } .segmented button { border: 0; background: transparent; padding: 6px 12px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ink-3); cursor: pointer; transition: background .15s, color .15s; } .segmented button.on { background: var(--ink); color: var(--paper); } /* ---------- 14. Comparison table ---------- */ .rule-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--hair); } .rule-list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rule-list>div { padding: 26px 24px 26px 0; border-bottom: 1px solid var(--hair); min-width: 0; } .rule-list>div+div { padding-left: 24px; border-left: 1px solid var(--hair); } .rule-list .ic { width: 22px; height: 22px; color: var(--accent); margin-bottom: 16px; } .rule-list .ic svg { width: 22px; height: 22px; } .rule-list h3 { font-size: 16px; margin-bottom: 6px; } .rule-list p { font-size: 14px; color: var(--ink-3); } .rule-list p code { font-weight: 500; color: var(--accent-ink); background: var(--accent-soft); border-color: transparent; } @media (max-width: 1000px) { .rule-list, .rule-list--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rule-list>div:nth-child(odd) { padding-left: 0; border-left: 0; } .rule-list>div:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--hair); } } @media (max-width: 560px) { .rule-list, .rule-list--4 { grid-template-columns: 1fr; } .rule-list>div, .rule-list>div:nth-child(even) { padding-left: 0; border-left: 0; } } .cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 56px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-ring); } table.cmp { width: 100%; min-width: 1040px; border-collapse: collapse; font-size: 13.5px; line-height: 1.45; } .cmp th, .cmp td { padding: 14px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); } .cmp thead th { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); background: var(--paper-2); white-space: nowrap; } /* The first column is the only header long enough to outgrow its cell, and that cell is sticky — so on a phone "WHAT MATTERS IN AN INTERVIEW" (224 px of text in a 148 px cell, measured on a Pixel 7) ran straight over the ClapAssist heading beside it. It is a heading in a fixed-width column: let it wrap. */ .cmp thead th.k { white-space: normal; } .cmp thead th.you, .cmp td.you { background: var(--accent-soft); color: var(--ink); } .cmp thead th.you { color: var(--accent-ink); font-weight: 700; } .cmp td.k, .cmp th.k { position: sticky; left: 0; background: var(--surface); font-weight: 500; color: var(--ink); min-width: 190px; box-shadow: 1px 0 0 var(--hair); z-index: 1; } .cmp thead th.k { background: var(--paper-2); } .cmp tbody tr:last-child td { border-bottom: 0; } .cmp td { color: var(--ink-2); min-width: 96px; } .cmp .ok { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 500; } .cmp .ok svg { width: 15px; height: 15px; flex: none; } .cmp .no { color: var(--warn); font-weight: 500; } .cmp .nl { color: var(--ink-4); } .cmp td .n { font-weight: 500; color: var(--ink); } .cmp-note { font-size: 13px; color: var(--ink-3); text-align: center; max-width: 78ch; margin: 16px auto 0; } .cmp-note a { color: var(--ink-2); } /* ---------- 15. Pricing ---------- */ .price-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; } .price-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-ring), var(--shadow-sm); padding: 28px; } .price-card.hot { box-shadow: 0 0 0 2px var(--accent), 0 20px 48px -12px rgba(79, 70, 229, .3); } .badge-pop { align-self: flex-start; display: inline-flex; align-items: center; margin-bottom: 14px; font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); white-space: nowrap; } .price-card .plan { font-size: 18px; font-weight: 600; color: var(--ink); } .price-card .tagline { font-size: 13.5px; color: var(--ink-3); margin: 2px 0 18px; } .price-card .was { display: block; font-size: 14px; color: var(--ink-4); text-decoration: line-through; margin-bottom: 2px; } .price-card .amount { font-size: 40px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; } .price-card .amount small { font-size: 13px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; margin-left: 4px; } .price-card .offer { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-top: 12px; font-size: 12px; font-weight: 500; line-height: 1.2; padding: 6px 10px; border-radius: var(--r-pill); background: var(--warn-soft); color: var(--offer); } .price-card .offer b { color: inherit; font-weight: 600; white-space: nowrap; } .price-card ul { list-style: none; margin: 22px 0 26px; display: grid; gap: 10px; } .price-card li { font-size: 14px; color: var(--ink-2); display: flex; gap: 9px; align-items: flex-start; } .price-card li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent); } .price-card .btn { margin-top: auto; width: 100%; } .price-note { text-align: center; font-size: 13px; color: var(--ink-3); margin-top: 22px; } .offer-bar { display: flex; justify-content: center; margin: -20px 0 32px; } .offer-bar span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: var(--r-pill); background: var(--warn-soft); color: var(--offer); text-align: center; } .offer-bar span b { color: inherit; font-weight: 600; white-space: nowrap; } .assure-wrap { margin-top: 48px; } @media (max-width: 1100px) { .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .price-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; } } /* ---------- 16. FAQ ---------- */ .faq { max-width: var(--container-text); margin: 0 auto; border-top: 1px solid var(--hair); } details { border-bottom: 1px solid var(--hair); } summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-size: 17px; font-weight: 500; color: var(--ink); } summary::-webkit-details-marker { display: none; } summary::after { content: ""; width: 9px; height: 9px; flex: none; margin-right: 6px; border-right: 1.5px solid var(--ink-4); border-bottom: 1.5px solid var(--ink-4); transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease); } details[open] summary::after { transform: rotate(225deg) translateY(-2px); } details p { padding: 0 0 22px; font-size: 15px; color: var(--ink-2); max-width: 62ch; } details a { color: var(--accent-ink); } /* ---------- 17. Closing statement ---------- */ .final { margin-top: var(--section); padding: var(--section) 0; background: linear-gradient(180deg, var(--paper) 0%, var(--paper-3) 100%); border-top: 1px solid var(--hair); } .final h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 4.8vw, 56px); line-height: 1.06; letter-spacing: -.02em; max-width: 18ch; } .final h2 em { font-style: italic; } .final .lead { margin: 18px auto 30px; } .final--split { text-align: left; } .final--split .final-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; } .final--split h2, .final--split .lead { margin-left: 0; } .final--split .cta-row { justify-content: flex-start; } .final-keys { display: flex; justify-content: center; align-items: center; gap: 16px; } .final-keys .k-note { font-size: 13px; color: var(--ink-3); max-width: 22ch; text-align: left; } @media (max-width: 900px) { .final--split .final-grid { grid-template-columns: 1fr; } .final-keys { justify-content: flex-start; margin-top: 8px; } } /* ---------- 18. Footer ---------- */ footer { border-top: 1px solid var(--hair); background: var(--paper); } .foot { max-width: var(--container); margin: 0 auto; padding: 36px var(--gutter) 44px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 13.5px; color: var(--ink-3); } .foot a { color: var(--ink-2); text-decoration: none; } .foot a:hover { color: var(--ink); } .foot--grid { display: grid; grid-template-columns: 1.3fr repeat(5, minmax(0, 1fr)); gap: 32px 24px; align-items: start; padding-top: 56px; } .foot--grid .brand { margin-bottom: 12px; } .foot--grid .about { font-size: 13.5px; color: var(--ink-3); max-width: 30ch; } .foot-col h4 { font-size: 13.5px; margin-bottom: 12px; } .foot-col a { display: block; padding: 4px 0; font-size: 14px; } .foot-bottom { max-width: var(--container); margin: 0 auto; padding: 20px var(--gutter) 40px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--ink-3); } .foot-bottom a { color: var(--ink-2); text-decoration: none; } @media (max-width: 900px) { .foot--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot--grid> :first-child { grid-column: 1 / -1; } } /* ---------- 19. Overlays: Visual Install Modal, Buy Modal, Help ---------- */ .modal-overlay { position: fixed; inset: 0; z-index: 500; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(11, 13, 24, .75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .modal-overlay.active { display: flex; animation: fadein .18s ease; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } .modal-box { width: 100%; max-width: 680px; min-width: 0; background: var(--surface); border-radius: 24px; box-shadow: 0 40px 100px rgba(0, 0, 0, .5), 0 0 0 1px var(--hair); overflow: hidden; animation: pop .24s var(--ease); } /* Exact 3-Step Install Modal */ .modal-box--install { max-width: 820px; background: #FFFFFF; border-radius: 20px; box-shadow: 0 40px 120px rgba(0, 0, 0, .3); position: relative; border: 1px solid rgba(14, 16, 32, .08); } .modal-close-x { position: absolute; top: 18px; right: 22px; font-size: 24px; line-height: 1; color: #9CA3AF; background: transparent; border: 0; cursor: pointer; z-index: 10; transition: color .15s; } .modal-close-x:hover { color: #111827; } .modal-install-content { padding: 36px 40px 32px; } .modal-install-head { text-align: center; margin-bottom: 28px; } .modal-status-badge { display: inline-flex; align-items: center; gap: 6px; color: #10B981; font-size: 14px; font-weight: 600; margin-bottom: 6px; } .modal-install-title { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; color: #111827; letter-spacing: -.02em; margin: 0; } .modal-install-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 32px; } .modal-step-col { position: relative; display: flex; flex-direction: column; } .step-num-pill { position: absolute; top: -10px; left: -8px; width: 26px; height: 26px; border-radius: 50%; background: #60A5FA; color: #FFFFFF; font-size: 12px; font-weight: 700; display: grid; place-items: center; z-index: 5; box-shadow: 0 2px 8px rgba(96, 165, 250, .5); } .step-visual-stage { height: 160px; border-radius: 12px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; background: #F8FAFC; box-shadow: 0 4px 14px rgba(0, 0, 0, .06); } .modal-step-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Stage 1: Dock Stack */ .stage-dock { background: #0B0E23; flex-direction: column; justify-content: flex-end; padding-bottom: 14px; } .dock-tooltip { position: absolute; top: 18px; background: #232946; color: #E2E8F0; font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); } .dock-tooltip::after { content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); border-width: 4px 4px 0 4px; border-style: solid; border-color: #232946 transparent transparent transparent; } .mac-dock-shelf { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .15); border-radius: 10px; padding: 5px 12px; } .dock-app-icon { width: 24px; height: 24px; border-radius: 6px; background: rgba(255, 255, 255, .2); } .dock-dmg-item { position: relative; display: grid; place-items: center; } .mac-cursor-arrow { position: absolute; bottom: -4px; right: -8px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4)); } /* Stage 2: Drag Icon */ .stage-drag { background: #E5E7EB; gap: 20px; } .drag-source-app { width: 60px; height: 60px; border-radius: 14px; background: #111528; display: grid; place-items: center; position: relative; box-shadow: 0 8px 20px rgba(0, 0, 0, .15); } .mac-drag-hand { position: absolute; bottom: -6px; right: -6px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3)); } .drag-target-zone { display: flex; align-items: center; gap: 10px; position: relative; } .drag-curve-arrow { margin-right: -4px; } .app-folder-icon { filter: drop-shadow(0 6px 14px rgba(59, 130, 246, .25)); } /* Stage 3: Applications Finder List */ .stage-finder { background: #FFFFFF; border: 1px solid #E5E7EB; flex-direction: column; justify-content: flex-start; align-items: stretch; padding: 8px 12px; } .finder-header { font-size: 11px; font-weight: 700; color: #1F2937; margin-bottom: 6px; text-align: left; } .finder-list { display: flex; flex-direction: column; gap: 2px; } .finder-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #374151; padding: 3px 6px; border-radius: 5px; position: relative; } .finder-row--active { background: #0066FF; color: #FFFFFF; font-weight: 600; } .finder-app-icon { width: 18px; height: 18px; border-radius: 4px; display: grid; place-items: center; font-size: 11px; } .icon-clap { background: #111528; padding: 2px; } .cursor-finder { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); } .step-caption { font-size: 12px; line-height: 1.45; color: #374151; margin-top: 12px; text-align: center; } .step-link { color: #2563EB; font-weight: 600; text-decoration: none; } .step-link:hover { text-decoration: underline; } .modal-install-foot { text-align: center; font-size: 13px; color: #111827; font-weight: 500; } .step-link-underline { color: #2563EB; font-weight: 600; text-decoration: underline; } @media (max-width: 680px) { .modal-install-grid { grid-template-columns: 1fr; gap: 24px; } .modal-install-content { padding: 24px 20px 20px; } } @keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } } .modal-box-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 1px solid var(--hair); } .modal-box-title { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; } .modal-box-title svg { width: 22px; height: 22px; color: var(--accent); } .modal-close-btn { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--ink-4); cursor: pointer; padding: 0 4px; } .modal-close-btn:hover { color: var(--ink); } .modal-body { padding: 24px; } .modal-help { margin-top: 18px; font-size: 13px; color: var(--ink-3); text-align: center; } .modal-help a { color: var(--ink); text-decoration: underline; } .buy-plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--accent-soft); border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; } .buy-plan .bp-name { font-weight: 600; font-size: 15px; color: var(--ink); } .buy-plan .bp-meta { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; } .buy-plan .bp-price { font-weight: 600; color: var(--accent-ink); font-size: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; } .help-fab { position: fixed; right: 18px; bottom: 18px; z-index: 400; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: var(--r-pill); border: 0; background: var(--surface); color: var(--ink); font-weight: 500; font-size: 13.5px; box-shadow: var(--shadow-md); cursor: pointer; } .help-fab svg { width: 16px; height: 16px; color: var(--accent); } .help-panel { position: fixed; right: 18px; bottom: 70px; z-index: 400; width: min(340px, calc(100vw - 36px)); background: var(--surface); border-radius: 18px; box-shadow: 0 24px 60px -16px rgba(14, 16, 32, .3), 0 0 0 1px var(--hair); padding: 18px; display: none; animation: pop .2s var(--ease); } .help-panel.open { display: block; } .help-panel h4 { font-size: 15px; margin-bottom: 6px; } .help-panel p { font-size: 13px; color: var(--ink-3); margin-bottom: 12px; } .help-mail { display: flex; align-items: center; gap: 8px; background: var(--paper-2); border: 1px solid var(--hair-2); border-radius: var(--r-sm); padding: 9px 10px; font-family: var(--mono); font-size: 12.5px; color: var(--ink); } .help-mail span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .help-panel .btn { width: 100%; margin-top: 12px; } .help-links { display: grid; gap: 6px; margin-top: 12px; font-size: 13px; } .help-links a { color: var(--accent-ink); text-decoration: none; } /* ---------- 20. Motion ---------- */ html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); } html.js .reveal.is-in { opacity: 1; transform: none; } html.js .reveal-group>.reveal:nth-child(2) { transition-delay: 60ms; } html.js .reveal-group>.reveal:nth-child(3) { transition-delay: 120ms; } html.js .reveal-group>.reveal:nth-child(4) { transition-delay: 180ms; } html.js .reveal-group>.reveal:nth-child(5) { transition-delay: 240ms; } @media (prefers-reduced-motion: reduce) { html.js .reveal, .hero .wrap>*, .hero .wrap--wide>* { opacity: 1; transform: none; transition: none; animation: none; } .btn, .nav-links a.pill, .nav-actions a.pill { transition: none; } .btn:hover, .nav-links a.pill:hover, .nav-actions a.pill:hover { transform: none; } .wave-bars span, .record-dot { animation: none; } html { scroll-behavior: auto; } } /* ---------- 99. Phone fixes (2026-09-04, iPhone audit) ---------- Two sections broke on a 390 px screen: the "How it works" pair of cards stayed side by side (150 px wide, ~2000 px tall each) and the 10-column comparison table showed only its first column. Everything else on the page already stacked. */ @media (max-width: 899px) { .bento-duo { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; } .duo-card { min-height: 0; padding: 26px 22px 22px; } .duo-card h3 { font-size: 24px; } .duo-card p.card-sub { margin-bottom: 22px; } .wave-container { margin: 18px 0 24px; } } /* This label is a sentence rather than a word, and the card holding it is narrow even on a tablet, so it wraps at EVERY width instead of being clipped at the card edge. */ #buy-dl-btn { white-space: normal; height: auto; min-height: 46px; padding: 12px 20px; line-height: 1.3; } /* Long labels on narrow screens: buttons are `white-space: nowrap` with a fixed 46 px height, so a sentence-length label ("Download ClapAssist, then buy inside the app") ran off the edge of its card instead of wrapping. Below 520 px a button grows downwards rather than sideways; short labels keep the same 46 px they always had. */ @media (max-width: 520px) { .btn { white-space: normal; height: auto; min-height: 46px; padding: 12px 18px; line-height: 1.3; text-align: center; } } @media (max-width: 720px) { /* Mock-UI text inside the two cards was 10.5–11 px; readable now that the card is full width. */ .dock-chips span, .hud-chip-item, .hud-viewed-label { font-size: 12px; } .dock-input-bar, .hud-input-placeholder { font-size: 12px; } .assist-hud-box { padding: 16px 16px; } /* Comparison table: keep the sideways scroll, but shrink the sticky first column so the ClapAssist column and the next competitor fit on screen, and say it scrolls. */ .cmp-wrap { margin-top: 36px; } .cmp-wrap:has(> .cmp:not(.cmp--pair))::before { content: "Swipe sideways to compare \2192"; display: block; position: sticky; left: 0; padding: 10px 14px 0; font-size: 12px; color: var(--ink-3); } table.cmp { font-size: 13px; } .cmp th, .cmp td { padding: 12px 10px; } .cmp td.k, .cmp th.k { min-width: 128px; max-width: 150px; font-size: 12.5px; } .cmp td { min-width: 118px; } /* The two-column tables on the comparison pages fit the screen without scrolling. */ table.cmp--pair { min-width: 100%; } .cmp--pair td.k, .cmp--pair th.k { min-width: 112px; width: 34%; } .cmp--pair td { min-width: 0; } .cmp-note { font-size: 12.5px; } } @media (max-width: 720px) { /* Notes mock: the "Generate" dropdown was clipped at the right edge of the tab row. */ .notes-tabs-row { flex-wrap: wrap; gap: 10px; } } /* 100. Mac install: fallback note under the panel + terminal line inside the modal (2026-09-04) */ .os .os-alt{margin-top:14px;font-size:13px;line-height:1.5;color:var(--ink-3)} .os .os-alt strong{color:var(--ink-2)} .step-caption .term{margin-top:8px;font-size:11px;text-align:left;padding:8px 8px 8px 10px} .step-caption .term .terminal-copy-btn{font-size:11px;padding:4px 10px} .term>span{white-space:normal;overflow-wrap:anywhere;word-break:break-all;line-height:1.5} .modal-install-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .modal-step-col{min-width:0} /* 101. Brand v2 (2026-09-05): the mark is an image tile now; the wordmark is two-tone type. */ .brand-mark img{border-radius:9px} /* 102. Card 2 rebuilt (2026-09-05): a true before/after. Two full layers of the same screen — what the other side receives over screen share (plain editor) and what you see (same editor, ClapAssist answering on top). The right layer is clipped by --split-pos; the strip at the top of each layer is its label, so whichever side is showing is named. Motion lives in site.js. */ .ss2 { position: relative; width: 100%; height: 100%; min-height: 250px; background: #D5DDEE; border-radius: 12px; overflow: hidden; user-select: none; cursor: ew-resize; --split-pos: 50%; touch-action: pan-y; } .ss2-layer { position: absolute; inset: 0; } .ss2-you { clip-path: inset(0 calc(100% - var(--split-pos)) 0 0); z-index: 3; background: #D5DDEE; } .ss2-them { z-index: 2; background: #DCE1EC; } .ss2-strip { position: absolute; top: 0; left: 0; right: 0; height: 26px; display: flex; align-items: center; gap: 7px; padding: 0 12px 0 24px; font-size: 10px; color: #fff; z-index: 6; white-space: nowrap; } .ss2-strip > * { flex: none; } .ss2-mid { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: .9; } .ss2-strip b { font-weight: 700; } .ss2-strip--them { background: #1F2937; color: #E5E7EB; } .ss2-strip--you { background: #15803D; } .ss2-sep { width: 1px; height: 12px; background: rgba(255,255,255,.35); } .ss2-right { font-weight: 700; opacity: .95; } .ss2-rec { width: 7px; height: 7px; border-radius: 50%; background: #EF4444; box-shadow: 0 0 0 2px rgba(239,68,68,.25); animation: recBlink 1.4s infinite; } .ss2-live { width: 7px; height: 7px; border-radius: 50%; background: #86EFAC; box-shadow: 0 0 6px #86EFAC; } .ss2-layer .split-ide-window { top: auto; bottom: 0; height: 175px; } .ss2-bar { position: absolute; top: 36px; left: 10px; right: 10px; z-index: 7; background: #0F1320; color: #E6E8EF; border-radius: 10px; padding: 7px 10px 8px; box-shadow: 0 10px 28px rgba(15,19,32,.35); border: 1px solid rgba(255,255,255,.08); } .ss2-bar-head { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 700; margin-bottom: 4px; } .ss2-bar-head img { border-radius: 4px; } .ss2-only { margin-left: auto; font-size: 7.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #86EFAC; background: rgba(134,239,172,.14); padding: 2px 6px; border-radius: 999px; } .ss2-bar-body { font-size: 8.5px; line-height: 1.4; color: #CBD1DE; } .ss2-bar .code-chip { background: rgba(96,165,250,.16); color: #93C5FD; } .ss2-divider { position: absolute; top: 0; bottom: 0; left: clamp(13px, var(--split-pos), calc(100% - 13px)); width: 3px; background: #fff; transform: translateX(-50%); z-index: 9; pointer-events: none; box-shadow: 0 0 0 1px rgba(15,19,32,.25), 0 0 14px rgba(0,0,0,.25); } .ss2-knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #0F1320; display: grid; place-items: center; font-size: 10px; font-weight: 800; box-shadow: 0 2px 10px rgba(0,0,0,.3); } @media (prefers-reduced-motion: reduce) { .ss2-rec { animation: none; } } /* ---------- 103. Hero backdrop: sky + ridges, parallax on scroll (2026-09-05) ---------- Owner wanted a Cluely-style hero: a full-bleed scene behind white copy, the real interview shot on top, layers drifting at different speeds as you scroll. Scene is drawn here (gradients + two SVG ridges), nothing borrowed. --sy = scrollY, set by site.js and capped, so every layer is a pure transform of one number. */ .hero--sky { position: relative; overflow: hidden; isolation: isolate; --sy: 0; background: linear-gradient(180deg, #3B4A66 0%, #7F94B8 45%, #DCE6F3 75%, var(--paper) 100%); } /* The owner's painting (clouds + peaks) fills the scene; it drifts at a third of scroll speed. */ .sky-art { top: -12%; height: 124%; overflow: hidden; transform: translateY(calc(var(--sy) * .30px)); } .sky-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; display: block; filter: saturate(1.12) contrast(1.06); } .sky-tint { top: 0; bottom: 0; background: linear-gradient(180deg, rgba(24, 32, 56, .30) 0%, rgba(24, 32, 56, .12) 45%, rgba(24, 32, 56, 0) 70%); } .hero-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .sky-layer { position: absolute; left: 0; right: 0; will-change: transform; } .sky-haze { top: 52%; bottom: 0; background: linear-gradient(180deg, rgba(250, 250, 252, 0) 0%, rgba(250, 250, 252, .55) 45%, var(--paper) 82%, var(--paper) 100%); } .hero--sky .wrap { position: relative; z-index: 1; } .hero--sky .hero-copy { position: relative; transform: translateY(calc(var(--sy) * -.16px)); opacity: calc(1 - var(--sy) / 520); } /* A soft, same-hue scrim behind the words only: the painting stays bright, the copy reads. */ .hero--sky .hero-copy::before { content: ""; position: absolute; inset: -10% -12%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 62% 70% at 50% 46%, rgba(24, 32, 56, .34) 0%, rgba(24, 32, 56, .16) 55%, rgba(24, 32, 56, 0) 100%); } .hero--sky .label, .hero--sky .eyebrow { color: rgba(255, 255, 255, .96); text-shadow: 0 1px 3px rgba(10, 20, 50, .5), 0 2px 12px rgba(20, 50, 130, .35); } .hero--sky h1 { color: #fff; text-shadow: 0 2px 6px rgba(10, 20, 50, .42), 0 4px 30px rgba(20, 50, 130, .45); } .hero--sky h1 em { text-shadow: none; filter: drop-shadow(0 2px 5px rgba(10, 20, 50, .5)) drop-shadow(0 6px 22px rgba(20, 50, 130, .4)); } .hero--sky .sub { color: #fff; text-shadow: 0 1px 4px rgba(10, 20, 50, .5), 0 2px 16px rgba(20, 50, 130, .35); } .hero--sky .trust { color: rgba(255, 255, 255, .94); text-shadow: 0 1px 3px rgba(10, 20, 50, .5); } .hero--sky .trust a { color: #fff; } .hero--sky .btn-primary { box-shadow: 0 10px 30px -8px rgba(10, 30, 90, .55), 0 0 0 1px rgba(255, 255, 255, .25) inset; } .hero--sky .btn-ghost { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .hero--sky .btn-ghost:hover { background: rgba(255, 255, 255, .26); box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); } .hero--sky .hero-stage-frame { transform: translateY(calc(var(--sy) * -.06px)) scale(calc(.975 + var(--sy) / 12000)); box-shadow: 0 40px 100px -20px rgba(10, 24, 80, .45), 0 0 0 1px rgba(255, 255, 255, .5); } .hero--sky .hero-stage-frame:hover { transform: translateY(calc(var(--sy) * -.06px - 3px)) scale(calc(.975 + var(--sy) / 12000)); } /* Nav sits over the sky until the page moves: glass, white text. */ /* The nav is in flow above the hero, so at the top it wears the sky's own colour and the two read as one scene. */ .nav-outer:not(.is-scrolled):not(.is-open) { background: #3B4A66; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .nav-outer:not(.is-scrolled):not(.is-open) .brand, .nav-outer:not(.is-scrolled):not(.is-open) .nav-links a, .nav-outer:not(.is-scrolled):not(.is-open) .brand-name, .nav-outer:not(.is-scrolled):not(.is-open) .brand-name b { color: #fff; } .nav-outer:not(.is-scrolled):not(.is-open) .nav-links a:hover { color: #fff; opacity: .85; } .nav-outer:not(.is-scrolled):not(.is-open) .nav-menu-btn { color: #fff; border-color: rgba(255,255,255,.4); } @media (prefers-reduced-motion: reduce) { .hero--sky .sky-layer, .hero--sky .hero-copy, .hero--sky .hero-stage-frame { transform: none !important; opacity: 1 !important; } } @media (max-width: 720px) { .sky-haze { top: 58%; } } /* ---------- 104. Motion layer (2026-09-05): the effects Magic UI / Aceternity / motion-primitives are known for, rebuilt in plain CSS + a little JS since this site has no React. Every effect collapses to a still page under prefers-reduced-motion. ---------- */ @property --beam { syntax: ''; inherits: false; initial-value: 0deg; } /* Reveal: blur-in with a soft lift, staggered inside any group. */ html.js .reveal { transform: translateY(22px) scale(.985); filter: blur(6px); transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); } html.js .reveal.is-in { transform: none; filter: none; } html.js .reveal-group>.reveal:nth-child(6), html.js .price-grid>.reveal:nth-child(6) { transition-delay: 300ms; } html.js .price-grid>.reveal:nth-child(2), html.js .bento-duo>.reveal:nth-child(2) { transition-delay: 90ms; } html.js .price-grid>.reveal:nth-child(3) { transition-delay: 180ms; } html.js .price-grid>.reveal:nth-child(4) { transition-delay: 270ms; } /* Headline words: each word rises out of a blur, one after the other (text-reveal). */ html.js .words .w { display: inline-block; opacity: 0; transform: translateY(.55em) rotate(1.5deg); filter: blur(5px); transition: opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease); transition-delay: calc(var(--i) * 45ms); will-change: transform, filter; } html.js .words.is-in .w { opacity: 1; transform: none; filter: none; } /* Gradient text that slowly breathes (animated-gradient-text). */ /* Gradient sits on the word spans once JS has split the heading (a clipped background on the parent does not paint through transformed children), on the itself before that. */ .section-head h2 em, .section-head h2 em .w, .hero--sky h1 em, .hero--sky h1 em .w { background-image: linear-gradient(90deg, #0E1020 0%, var(--accent) 35%, #06B6D4 50%, var(--accent) 65%, #0E1020 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradient-drift 7s linear infinite; } .hero--sky h1 em, .hero--sky h1 em .w { background-image: linear-gradient(90deg, #fff 0%, #BFD6FF 30%, #E9F1FF 50%, #BFD6FF 70%, #fff 100%); } .page-hero h1 em, .page-hero h1 em .w, .cmp-hero h1 em, .cmp-hero h1 em .w { background-image: linear-gradient(90deg, #0E1020 0%, var(--accent) 35%, #06B6D4 50%, var(--accent) 65%, #0E1020 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradient-drift 7s linear infinite; } @keyframes gradient-drift { from { background-position: 240% 0; } to { background-position: -240% 0; } } /* Shimmer button: a light sweeps across the primary button every few seconds. */ .btn-primary { position: relative; overflow: hidden; } .btn-primary::after { content: ''; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 40%; background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%); transform: skewX(-18deg); animation: shine 4.2s var(--ease) infinite; pointer-events: none; } .btn-primary:hover::after { animation-duration: 1.2s; } @keyframes shine { 0% { left: -60%; } 35%, 100% { left: 130%; } } /* Magnetic buttons + tilt frame: JS writes --mx/--my (px) and --rx/--ry (deg). */ .is-magnet { transform: translate(var(--mx, 0), var(--my, 0)); transition: transform .18s var(--ease); will-change: transform; } .hero--sky .hero-stage-frame { transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(calc(var(--sy) * -.06px)) scale(calc(.975 + var(--sy) / 12000)); transition: transform .35s var(--ease), box-shadow .25s var(--ease); } .hero--sky .hero-stage-frame:hover { transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(calc(var(--sy) * -.06px - 3px)) scale(calc(.975 + var(--sy) / 12000)); } /* Spotlight cards: a soft light follows the pointer, card lifts. */ .tile, .duo-card, .price-card, .stat, .faq details, .card, .plan { position: relative; } .card.spot:hover, .plan.spot:hover { box-shadow: 0 24px 48px -12px rgba(14, 16, 32, .16), 0 0 0 1px rgba(79, 70, 229, .25); } html.js .reveal-group>.reveal:nth-child(7) { transition-delay: 360ms; } html.js .reveal-group>.reveal:nth-child(n+8) { transition-delay: 400ms; } .spot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease); background: radial-gradient(360px circle at var(--px, 50%) var(--py, 50%), rgba(99, 102, 241, .14), transparent 55%); z-index: 0; } .spot:hover::after { opacity: 1; } .spot { transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .spot:hover { transform: translateY(-4px); } .tile.spot:hover { box-shadow: 0 24px 48px -12px rgba(14, 16, 32, .16), 0 0 0 1px rgba(79, 70, 229, .25); } .price-card.spot:hover { box-shadow: 0 24px 48px -12px rgba(14, 16, 32, .16), 0 0 0 1px rgba(79, 70, 229, .3); } .stat.spot:hover { transform: translateY(-3px); } /* Border beam on the "Most Popular" plan: a light runs round the edge forever. */ .price-card.hot::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--beam), transparent 0 62%, rgba(79, 70, 229, .0) 66%, #4F46E5 80%, #06B6D4 90%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: beam 4.5s linear infinite; pointer-events: none; z-index: 2; } @keyframes beam { to { --beam: 360deg; } } /* Logo marquee (compatible-with band): endless slow drift, pauses on hover. */ .compat-logos.is-marquee { flex-wrap: nowrap; justify-content: flex-start; gap: 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .compat-logos.is-marquee .marquee-track { display: flex; align-items: center; gap: clamp(40px, 5vw, 72px); padding-right: clamp(40px, 5vw, 72px); flex: none; animation: marquee 32s linear infinite; } .compat-logos.is-marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-100%); } } /* Number ticker on the stat row: digits count in when the row appears. */ .stat .big { font-variant-numeric: tabular-nums; } /* Reading progress line under the nav. */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); background: linear-gradient(90deg, var(--accent), #06B6D4); z-index: 201; pointer-events: none; } /* Nav slides away while reading down, returns on the first scroll up. */ .nav-outer { transition: background .25s, border-color .25s, box-shadow .25s, transform .35s var(--ease); } .nav-outer.is-hidden:not(.is-open) { transform: translateY(-100%); } /* FAQ answers slide open instead of popping. */ .faq details>p { animation: faq-open .4s var(--ease) both; } @keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } } /* Dot grid under the compare + FAQ sections, fading toward the middle. */ #compare, #faq { position: relative; } #compare::before, #faq::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(14, 16, 32, .1) 1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask: radial-gradient(60% 55% at 50% 40%, transparent 30%, #000 100%); mask: radial-gradient(60% 55% at 50% 40%, transparent 30%, #000 100%); pointer-events: none; } @media (prefers-reduced-motion: reduce) { html.js .reveal, html.js .words .w { opacity: 1; transform: none; filter: none; transition: none; } .section-head h2 em, .section-head h2 em .w, .hero--sky h1 em, .hero--sky h1 em .w, .page-hero h1 em, .cmp-hero h1 em, .btn-primary::after, .price-card.hot::before, .compat-logos.is-marquee .marquee-track { animation: none; } .compat-logos.is-marquee { flex-wrap: wrap; justify-content: center; -webkit-mask: none; mask: none; } .compat-logos.is-marquee .marquee-track:nth-child(n+2) { display: none; } .is-magnet, .spot:hover { transform: none; } .nav-outer.is-hidden { transform: none; } } /* Comparison-page cards had no size on their icon: the SVG stretched to the card's width. */ .card .ic { width: 22px; height: 22px; color: var(--accent); margin-bottom: 14px; } .card .ic svg { width: 22px; height: 22px; display: block; } /* Legal pages: headings back to document scale. */ body.legal h1 { font-size: clamp(30px, 4vw, 40px); margin: 8px 0 4px; } body.legal h2 { font-size: clamp(20px, 2.4vw, 24px); margin: 34px 0 10px; letter-spacing: -.01em; } /* Install section: the same three-picture cards as the download modal, one row per OS. */ .install--pictures { grid-template-columns: 1fr; gap: 28px; } .install--pictures .os-row { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); border: 1px solid var(--hair); padding: 28px 28px 22px; } .install--pictures .os-row .h { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 18px; } .install--pictures .os-row .h svg { width: 22px; height: 22px; } .install--pictures .modal-install-grid { margin-bottom: 0; } .install--pictures .step-visual-stage { height: auto; aspect-ratio: 400 / 280; } .install--pictures .step-caption { text-align: center; } @media (max-width: 768px) { .install--pictures .modal-install-grid { grid-template-columns: 1fr; } } /* ---------- Hero demo: the call scene (replaces the hero still, 2026-09-05) ---------- A Mac desktop played like a silent product video. Designed at 1280×720 with every size in em; the frame is a container, so .hd's font-size (1.25cqw = 16px at 1280) scales the whole scene like an image. */ .hero-stage-frame { container-type: inline-size; } .hd { position: relative; aspect-ratio: 16 / 9; overflow: hidden; font-size: 1.25cqw; color: #fff; user-select: none; line-height: 1.3; background: #4C7BEA; background-image: radial-gradient(60% 80% at 8% 30%, #2F6BEA 0%, rgba(47,107,234,0) 60%), radial-gradient(50% 70% at 30% 92%, #7B5CF5 0%, rgba(123,92,245,0) 60%), radial-gradient(55% 75% at 78% 18%, #FFB36B 0%, rgba(255,179,107,0) 60%), radial-gradient(60% 70% at 96% 82%, #FF7A59 0%, rgba(255,122,89,0) 62%), linear-gradient(135deg, #3B6FE0 0%, #9D7CF6 45%, #FFC08A 100%); } @supports not (container-type: inline-size) { .hd { font-size: clamp(5px, 1.1vw, 14px); } } /* macOS menu bar */ .hd-menubar { position: absolute; inset: 0 0 auto 0; height: 1.75em; display: flex; align-items: center; justify-content: space-between; padding: 0 .9em; font-size: .85em; font-weight: 500; color: #0B1020; background: rgba(255,255,255,.34); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 rgba(255,255,255,.25); } .hd-mb-left, .hd-mb-right { display: flex; align-items: center; gap: 1.1em; white-space: nowrap; } .hd-mb-left b { font-weight: 700; } .hd-apple { display: inline-flex; width: 1em; height: 1em; } .hd-apple svg, .hd-wifi svg, .hd-batt svg { width: 100%; height: 100%; display: block; } .hd-wifi { display: inline-flex; width: 1.15em; height: 1.15em; } .hd-batt { display: inline-flex; width: 1.7em; height: .85em; } .hd-clock { font-variant-numeric: tabular-nums; } /* The call window */ .hd-call { position: absolute; left: 16.5%; right: 16.5%; top: 7.2em; bottom: 5.4em; background: #1C1C1E; border-radius: .9em; box-shadow: 0 1.6em 3em rgba(10,14,40,.4), 0 0 0 1px rgba(255,255,255,.12); overflow: hidden; } .hd-call-top { height: 2em; display: flex; align-items: center; gap: .45em; padding: 0 .9em; background: #2A2A2D; } .hd-call-top span { width: .75em; height: .75em; border-radius: 50%; } .hd-call-top .r { background: #FF5F57; } .hd-call-top .y { background: #FEBC2E; } .hd-call-top .g { background: #28C840; } .hd-call-title { position: absolute; left: 50%; transform: translateX(-50%); width: auto !important; height: auto !important; font-size: .8em; color: #B4B4B8; font-weight: 500; } .hd-tiles { position: absolute; left: 1.4em; right: 1.4em; top: 3.2em; bottom: 5.2em; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; } .hd-tile { position: relative; border-radius: .7em; overflow: hidden; background: #2A2A2E; } .hd-tile::after { content: ""; position: absolute; inset: 0; border: .22em solid #34D399; border-radius: inherit; opacity: 0; transition: opacity .4s; pointer-events: none; } .hd-tile.is-speaking::after { opacity: 1; } .hd .hd-face { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; object-fit: cover; display: block; } /* Talking: the people never move. Only a soft-edged patch around the mouth (--mx/--my, measured per photo) crossfades between the lips-closed and lips-parted frames, so nothing outside the lips can shift even by a pixel. */ .hd-face--talk { opacity: 0; transition: opacity .3s ease; -webkit-mask-image: radial-gradient(ellipse 13% 9% at var(--mx, 50%) var(--my, 54%), #000 45%, rgba(0,0,0,.6) 70%, transparent 100%); mask-image: radial-gradient(ellipse 13% 9% at var(--mx, 50%) var(--my, 54%), #000 45%, rgba(0,0,0,.6) 70%, transparent 100%); } .hd-tile.is-speaking .hd-face--talk { animation: hd-talk 1.1s ease-in-out infinite; } .hd-tile--b.is-speaking .hd-face--talk { animation-duration: 1.25s; } @keyframes hd-talk { 0%, 100% { opacity: 0; } 22% { opacity: 1; } 42% { opacity: .35; } 62% { opacity: 1; } 84% { opacity: .15; } } .hd-name { position: absolute; left: .7em; bottom: .7em; display: flex; align-items: center; gap: .45em; padding: .3em .6em; border-radius: .4em; background: rgba(0,0,0,.6); font-size: .9em; font-weight: 600; } .hd-mic { display: inline-flex; align-items: flex-end; gap: .12em; height: .8em; } .hd-mic b { width: .16em; height: .3em; background: #34D399; border-radius: .1em; transition: height .3s; } .is-speaking .hd-mic b { animation: hd-mic .6s ease-in-out infinite; } .is-speaking .hd-mic b:nth-child(2) { animation-delay: .15s; } .is-speaking .hd-mic b:nth-child(3) { animation-delay: .3s; } @keyframes hd-mic { 0%, 100% { height: .3em; } 50% { height: .8em; } } .hd-caption { position: absolute; left: 50%; bottom: 2.9em; transform: translate(-50%, .4em); max-width: 92%; padding: .35em .7em; border-radius: .45em; background: rgba(0,0,0,.74); font-size: .95em; text-align: center; opacity: 0; transition: opacity .35s, transform .35s; } .hd-caption.is-on { opacity: 1; transform: translate(-50%, 0); } .hd-call-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 4.4em; display: flex; align-items: center; gap: 1.6em; padding: 0 1.6em; font-size: .85em; color: #A1A1AA; background: #161618; } .hd-cb { display: flex; flex-direction: column; align-items: center; gap: .25em; } .hd-cb svg { width: 1.5em; height: 1.5em; } .hd-slash { transition: opacity .2s; } .hd.is-unmuted .hd-slash { opacity: 0; } .hd.is-unmuted .hd-cb--mic { color: #E5E7EB; } .hd-end { margin-left: auto; background: #DC2626; color: #fff; padding: .55em 1.3em; border-radius: .45em; font-weight: 600; } /* The bar (Cluely-style pill: logo · Ask/Hide · session audio · stop) */ .hd-bar { position: absolute; left: 50%; top: 2.5em; transform: translateX(-50%); display: flex; align-items: center; gap: .4em; padding: .4em; border-radius: 2.4em; background: #1E1E22; box-shadow: 0 .6em 1.8em rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08); z-index: 5; } .hd-bar-logo { width: 2.9em; height: 2.9em; border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; } .hd-bar-logo img { width: 1.7em; height: 1.7em; opacity: .85; } /* 2026-09-06: the bar's first button is a gear now (Settings), not the logo. */ .hd-bar-main { display: grid; height: 2.9em; padding: 0 1.1em; border: 0; border-radius: 2em; font: inherit; font-size: 1.05em; font-weight: 700; color: #fff; cursor: pointer; background: #2B2B30; transition: background .25s, filter .2s; } .hd-bar-main:hover { filter: brightness(1.12); } .hd-bar-main > span { grid-area: 1 / 1; display: flex; align-items: center; gap: .45em; transition: opacity .2s; } .hd-bar-main svg { width: 1.05em; height: 1.05em; } .hd-hide { opacity: 0; } .hd[data-state="ask"] .hd-bar-main { background: linear-gradient(180deg, #2F6BEA, #1E4FC7); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); } .hd[data-state="open"] .hd-ask { opacity: 0; } .hd[data-state="open"] .hd-hide { opacity: 1; } .hd-wave { display: flex; align-items: center; gap: .18em; height: 2.9em; padding: 0 .3em; } .hd-wave b { width: .22em; height: .6em; border-radius: .2em; background: #34D399; animation: hd-wave .9s ease-in-out infinite; transition: opacity .4s, height .4s; } .hd-wave b:nth-child(2) { animation-delay: .12s; } .hd-wave b:nth-child(3) { animation-delay: .24s; } .hd-wave b:nth-child(4) { animation-delay: .36s; } @keyframes hd-wave { 0%, 100% { height: .5em; } 50% { height: 1.4em; } } .hd[data-session="off"] .hd-wave b { animation: none; height: .45em; opacity: .35; } .hd-stop { width: 2.9em; height: 2.9em; border-radius: 50%; background: #2B2B30; display: grid; place-items: center; transition: background .25s; } .hd-stop i { width: .9em; height: .9em; border-radius: .15em; background: #fff; transition: transform .25s, border-radius .25s; } .hd[data-session="off"] .hd-stop i { transform: scale(.85); opacity: .55; } .hd-toast { position: absolute; left: 50%; top: 6.4em; transform: translate(-50%, -.5em); display: flex; align-items: center; gap: .5em; padding: .55em .95em; border-radius: 2em; background: rgba(16,18,26,.92); box-shadow: 0 .6em 1.6em rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.12); font-size: .95em; font-weight: 600; color: #F3F4F6; white-space: nowrap; z-index: 6; opacity: 0; transition: opacity .35s, transform .35s; pointer-events: none; } .hd-toast svg { width: 1.1em; height: 1.1em; color: #34D399; } .hd-toast.is-on { opacity: 1; transform: translate(-50%, 0); } /* The answer panel — only you can see it */ .hd-panel { position: absolute; left: 50%; top: 7.8em; width: 45%; transform: translateX(-50%) translateY(-.6em) scale(.97); transform-origin: 50% 0; padding: 1.3em 1.3em 1.1em; border-radius: 1.1em; background: rgba(22,24,32,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1.4em 3em rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.14); z-index: 4; opacity: 0; visibility: hidden; transition: opacity .3s, transform .3s, visibility 0s .3s; } .hd[data-state="open"] .hd-panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) scale(1); transition: opacity .3s, transform .3s; } .hd-bubble { margin-left: auto; width: max-content; max-width: 80%; padding: .5em .9em; border-radius: .7em; background: #1D4ED8; font-size: 1.05em; font-weight: 600; } .hd-answer { margin: 1em 0 0; font-size: 1.05em; line-height: 1.5; min-height: 3em; color: #F3F4F6; } .hd-caret { display: inline-block; width: .08em; height: 1em; background: #fff; vertical-align: -.15em; margin-left: .05em; animation: hd-blink 1s steps(1) infinite; } .hd.is-typed .hd-caret { display: none; } @keyframes hd-blink { 50% { opacity: 0; } } .hd-actions { display: flex; align-items: center; gap: .9em; margin-top: 1.2em; font-size: .95em; color: #E5E7EB; white-space: nowrap; overflow: hidden; } .hd-actions span { display: flex; align-items: center; gap: .4em; } .hd-actions svg { width: 1.05em; height: 1.05em; } .hd-actions i { width: .25em; height: .25em; border-radius: 50%; background: #6B7280; flex: none; } .hd-input { margin-top: 1em; padding: .85em 1em .7em; border-radius: .8em; border: 1px solid rgba(255,255,255,.22); } .hd-ph { display: flex; align-items: center; gap: .3em; color: #9CA3AF; white-space: nowrap; overflow: hidden; } .hd-ph kbd { font: inherit; font-size: .8em; padding: .15em .4em; border-radius: .3em; border: 1px solid rgba(255,255,255,.25); color: #D1D5DB; } .hd-input-row { display: flex; align-items: center; gap: .9em; margin-top: .8em; } .hd-smart { display: flex; align-items: center; gap: .3em; padding: .35em .8em; border-radius: 2em; border: 1px solid rgba(255,255,255,.22); color: #9CA3AF; font-size: .9em; } .hd-smart svg { width: 1em; height: 1em; } .hd-dots { color: #9CA3AF; letter-spacing: .1em; } .hd-send { margin-left: auto; width: 2.2em; height: 2.2em; border-radius: 50%; background: #1D4ED8; position: relative; } .hd-send::after { content: ""; position: absolute; left: 56%; top: 50%; transform: translate(-50%, -50%); border-left: .75em solid #fff; border-top: .5em solid transparent; border-bottom: .5em solid transparent; } /* macOS Dock */ .hd-dock { position: absolute; left: 50%; bottom: .55em; transform: translateX(-50%); display: flex; align-items: flex-end; gap: .55em; padding: .45em .6em; border-radius: 1.1em; background: rgba(255,255,255,.28); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 .8em 1.6em rgba(10,14,40,.22); z-index: 3; } .hd-dk { position: relative; width: 3em; height: 3em; border-radius: .8em; display: grid; place-items: center; overflow: hidden; box-shadow: 0 .15em .4em rgba(0,0,0,.25); } .hd-dk.is-open::after { content: ""; position: absolute; left: 50%; bottom: -.42em; width: .25em; height: .25em; border-radius: 50%; background: rgba(20,20,30,.7); transform: translateX(-50%); } .hd-dk--finder { background: linear-gradient(90deg, #E9F1FF 0 50%, #2D8CFF 50% 100%); } .hd-dk--finder i:first-child { position: absolute; left: 30%; top: 32%; width: .3em; height: .55em; border-radius: .15em; background: #0B1B3A; } .hd-dk--finder i:last-child { position: absolute; left: 62%; top: 32%; width: .3em; height: .55em; border-radius: .15em; background: #fff; } .hd-dk--pad { background: linear-gradient(180deg, #F6F7FB, #D8DCE6); } .hd-dk--pad i { width: 1.7em; height: 1.7em; background-image: radial-gradient(#FF5E5E .22em, transparent .24em), radial-gradient(#4CAF50 .22em, transparent .24em), radial-gradient(#3B82F6 .22em, transparent .24em), radial-gradient(#F59E0B .22em, transparent .24em); background-size: 50% 50%; background-position: 0 0, 100% 0, 0 100%, 100% 100%; background-repeat: no-repeat; } .hd-dk--safari { background: radial-gradient(circle at 50% 40%, #E8F4FF 0 20%, #2C8DFF 22% 100%); } .hd-dk--safari i { width: 1.9em; height: 1.9em; border-radius: 50%; border: .12em solid rgba(255,255,255,.7); background: conic-gradient(from 45deg, #FF3B30 0 10%, transparent 10% 50%, #fff 50% 60%, transparent 60%); } .hd-dk--prefs { background: linear-gradient(180deg, #8E8E93, #4B4B50); } .hd-dk--prefs i { width: 1.6em; height: 1.6em; border-radius: 50%; border: .38em dotted #E5E5EA; box-sizing: border-box; } .hd-dk--zoom { background: #2D8CFF; color: #fff; font-weight: 700; font-size: .78em; letter-spacing: -.02em; width: 3.85em; height: 3.85em; border-radius: 1em; } .hd-dk-sep { width: 1px; height: 2.6em; background: rgba(20,20,30,.25); margin: 0 .2em .2em; } .hd-dk--trash { background: linear-gradient(180deg, #F4F4F7, #C9CBD3); } .hd-dk--trash i { width: 1.3em; height: 1.7em; border-radius: .2em .2em .35em .35em; background: repeating-linear-gradient(90deg, #9A9CA6 0 .18em, #D3D5DC .18em .36em); box-shadow: 0 -.25em 0 0 #B8BAC3; } /* The cursor that presses Ask, Unmute, Hide and Stop */ .hd-cursor { position: absolute; left: var(--cx, 72%); top: var(--cy, 84%); width: 1.6em; height: 1.6em; z-index: 9; transition: left .9s cubic-bezier(.4,0,.2,1), top .9s cubic-bezier(.4,0,.2,1), transform .12s, opacity .3s; pointer-events: none; filter: drop-shadow(0 .1em .25em rgba(0,0,0,.45)); } .hd-cursor.is-click { transform: scale(.82); } .hd-cursor svg { width: 100%; height: 100%; display: block; } @media (max-width: 720px) { .hd-call { left: 4%; right: 4%; } .hd-panel { width: 74%; } .hd-mb-menu, .hd-clock { display: none; } } @media (prefers-reduced-motion: reduce) { .hd-face, .hd-face--talk, .hd-wave b, .hd-mic b, .hd-caret { animation: none !important; } .hd-cursor { display: none; } .hd-panel, .hd-caption, .hd-toast { transition: none; } } /* ---------- GSAP layer companions (2026-09-05) ---------- */ /* Scroll progress: a hairline of the brand gradient across the very top. */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--accent), #06B6D4, #5282F1); pointer-events: none; } /* FAQ answers driven by GSAP: the CSS pop is switched off, overflow clipped while they slide. */ .faq details.faq-smooth > p { animation: none; overflow: hidden; } /* Shiny section labels: a soft light passes through the eyebrow every few seconds. */ .section-head .label { background-image: linear-gradient(90deg, var(--ink-3) 0%, var(--ink-3) 42%, var(--accent) 50%, var(--ink-3) 58%, var(--ink-3) 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: shine-text 5.5s linear infinite; } @keyframes shine-text { from { background-position: 130% 0; } to { background-position: -130% 0; } } /* Border beam on the hero frame: a light travels the edge, same idea as the "Most Popular" card. */ .hero--sky .hero-stage-frame::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--beam), transparent 0 66%, rgba(255,255,255,.95) 84%, #BFD6FF 91%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: beam 7s linear infinite; pointer-events: none; z-index: 12; } @media (prefers-reduced-motion: reduce) { .section-head .label, .hero--sky .hero-stage-frame::after { animation: none; } .scroll-progress { display: none; } } /* ---------- 105. Help bar + WhatsApp (2026-09-06): reaching a person must never be hidden. The bar sits above the nav and scrolls away; the "Need help?" button stays. ---------- */ .help-bar { position: sticky; top: 0; z-index: 101; background: #1E2A44; color: #fff; font-size: 13.5px; } .nav-outer { top: var(--helpbar-h, 0px); } html { scroll-padding-top: calc(var(--nav-h) + var(--helpbar-h, 0px) + 16px); } .help-bar-in { position: relative; max-width: var(--container); margin: 0 auto; padding: 8px 40px 8px var(--gutter); display: flex; align-items: center; justify-content: center; gap: 8px 14px; flex-wrap: wrap; text-align: center; } .help-bar-text { color: rgba(255,255,255,.88); } .help-bar-text b { color: #fff; font-weight: 600; } .help-bar-link { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.12); color: #fff; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .15s; } .help-bar-link:hover { background: rgba(255,255,255,.22); } .help-bar-link svg { width: 15px; height: 15px; } .help-bar-wa { background: #25D366; color: #08301A; } .help-bar-wa:hover { background: #3AE07A; } .help-bar-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff; opacity: .7; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; } .help-bar-x:hover { opacity: 1; } @media (max-width: 720px) { .help-bar { font-size: 13px; } .help-bar-in { padding: 8px 34px 8px var(--gutter); gap: 6px 8px; } .help-bar-link { padding: 5px 10px; } .help-bar-sub, .help-bar .lng { display: none; } } .help-bar-tut { position: relative; display: inline-flex; } .help-bar-tut-btn { font: inherit; font-weight: 500; cursor: pointer; } .tut-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; margin-left: 2px; opacity: .8; } .tut-menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); min-width: 250px; background: var(--surface); color: var(--ink); border-radius: 14px; box-shadow: 0 18px 50px -12px rgba(14,16,32,.35), 0 0 0 1px var(--hair); padding: 8px; z-index: 102; text-align: left; display: grid; gap: 2px; animation: pop .18s var(--ease); } .tut-menu[hidden] { display: none; } .tut-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; } .tut-menu a:hover { background: var(--paper-2); } .tut-menu a b { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; } @media (max-width: 720px) { .tut-menu { left: auto; right: 0; transform: none; } } .help-bar .sht { display: none; } @media (max-width: 720px) { .help-bar .sht { display: inline; } .help-bar-text { display: none; } .help-bar-in { gap: 6px; } } .btn-wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #25D366; color: #08301A; border: 0; } .btn-wa:hover { background: #3AE07A; color: #08301A; } .btn-wa svg { width: 16px; height: 16px; } .help-panel .btn-wa { margin-top: 8px; } .modal-help--install { margin-top: 10px; } .modal-help a { white-space: nowrap; } /* The Windows install video (owner's own recording), under the three step pictures. */ .install-video { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hair); } .install-video h4 { font-size: 16px; font-weight: 650; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .install-video h4 span { font-size: 13px; font-weight: 500; color: var(--ink-3); } .install-video-stage { position: relative; border-radius: 16px; overflow: hidden; background: #0d0f14; box-shadow: var(--shadow-lg); } .install-video video { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; } .install-video p { margin-top: 12px; font-size: 13.5px; color: var(--ink-2); } .tut-menu a b.wide { width: auto; min-width: 22px; padding: 0 6px; border-radius: 11px; font-size: 11px; letter-spacing: .2px; }