/* ========================================================= LANDING PAGE – MEMORO Squared-paper background applied to body, scrolls with content. Used on landing + all static pages (about, privacy, terms, subprocessors). ========================================================= */ /* --------------------------------------------------------- BASE LANDING PAGE --------------------------------------------------------- */ html:has(body.landing-page) { background-color: #f5f1e6; overflow-x: hidden; } .landing-page { --color-brand: #fb923c; --color-brand-hover: #f97316; --color-brand-muted: #fdba74; --color-brand-subtle: rgba(253, 186, 116, 0.15); /* Text color over the squared-paper surface — used across landing sections */ --wallpaper-text-color: #1c1917; --wallpaper-text-shadow: none; /* Squared paper background — kept in sync with the in-app token in theme/theme-memoro-light.css. Static pages don't get the theme-light class on (theme-bootstrap.js only runs on the SPA), so we can't use var(--bg-squared-paper) here. */ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23f5f1e6'/%3E%3Cpath d='M23.5 0v24M0 23.5h24' stroke='%23f0ebdc' stroke-width='1'/%3E%3C/svg%3E") repeat; background-color: #f5f1e6; /* Override reset.css height:100% so body grows with content and bg scrolls */ height: auto; min-height: 100vh; width: 100%; overflow-x: hidden; color: #1c1917; } /* Remove any background overlay from base styles */ .landing-page::before { display: none; } /* Override mobile app styles for landing page scrolling */ @media (max-width: 899px) { body.memoro-app.landing-page { overflow-x: hidden; overflow-y: auto; height: auto; min-height: 100%; width: 100%; } .landing-page .memoro-app-shell { display: flex; flex-direction: column; height: auto; min-height: 100%; } .landing-page .landing-main { flex: 1; overflow: visible; } } .memoro-app-shell { position: relative; z-index: 1; } /* --------------------------------------------------------- HEADER — Transparent, sits over squared paper --------------------------------------------------------- */ .landing-page .app-header-bar { position: fixed; top: 0; left: 0; right: 0; padding-block: var(--app-header-padding-block); padding-top: calc(var(--app-header-padding-block) + env(safe-area-inset-top, 0px)); background: transparent; border-bottom: none; z-index: var(--z-header); } .landing-page .app-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); max-width: 1200px; margin: 0 auto; width: 100%; } /* User icon button — sign in / avatar. Mirrors the app-shell .icon-btn paper variant: transparent ghost with local blur. */ .landing-user-icon { width: var(--space-11); height: var(--space-11); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; background: transparent; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: none; color: var(--color-text-muted); cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-instant); text-decoration: none; } .landing-user-icon:hover { background: var(--color-bg-hover); color: var(--color-text-main); } .landing-user-icon:active { transform: scale(0.95); } .landing-user-icon .material-symbols-rounded { font-size: var(--icon-xl); color: inherit; } /* Logged in — solid filled avatar icon */ .landing-user-icon--avatar .material-symbols-rounded { font-variation-settings: "FILL" 1; } /* Link-styled button */ .link-button { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; } .link-button:hover { text-decoration: none; } /* --------------------------------------------------------- MAIN WRAPPER --------------------------------------------------------- */ .landing-main { flex: 1; display: block; background: transparent; position: relative; z-index: 1; } /* --------------------------------------------------------- SECTION LAYOUT --------------------------------------------------------- */ .landing-section { width: 100%; padding: 60px 20px; } .landing-section-inner { max-width: 900px; margin: 0 auto; padding: 0; } /* --------------------------------------------------------- LANDING GREETING — Memoro's voice (white text on photo) Reuses the same visual language as the in-app greeting --------------------------------------------------------- */ .landing-greeting { margin-bottom: 32px; } .landing-greeting--centered { text-align: center; } .landing-greeting__text { margin: 0; font-family: var(--font-serif); font-size: clamp(var(--text-4xl), 5vw, 3rem); font-weight: var(--font-bold); line-height: var(--leading-tight); letter-spacing: -0.01em; color: var(--wallpaper-text-color); text-shadow: var(--wallpaper-text-shadow); } .landing-greeting__summary { margin: var(--space-4) 0 0; font-family: var(--font-serif); font-size: clamp(var(--text-base), 2.5vw, var(--text-xl)); font-weight: var(--font-normal); color: var(--wallpaper-text-color); opacity: 0.88; line-height: var(--leading-relaxed); max-width: 620px; text-shadow: var(--wallpaper-text-shadow); } /* Tight variant — flex column with explicit gap so the heading and summary read as one stacked statement, not two paragraphs. Used in the unauth hero. */ .landing-greeting--tight { display: flex; flex-direction: column; gap: var(--space-1); } .landing-greeting--tight .landing-greeting__text { margin: 0; line-height: 1.05; } .landing-greeting--tight .landing-greeting__summary { margin: 0; font-size: clamp(var(--text-lg), 2.8vw, var(--text-2xl)); font-weight: var(--font-semibold); line-height: var(--leading-snug); opacity: 1; } /* Arvid note — mirrors the in-app assistant chat reply: small round portrait beside plain prose. Used in the hero introduction and the final CTA. */ .landing-arvid-note { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-10); max-width: 620px; } .landing-arvid-note__avatar { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--bg-squared-paper-color, #f5f1e6); overflow: hidden; } .landing-arvid-note__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; } .landing-arvid-note__text { margin: 0; font-family: var(--font-serif); font-size: var(--ts-prose-size, var(--text-base)); font-weight: var(--ts-prose-weight, var(--font-normal)); line-height: var(--ts-prose-leading, var(--leading-snug)); color: var(--color-text-main); } .landing-arvid-note__lead { display: block; font-size: clamp(var(--text-xl), 3vw, var(--text-2xl)); font-weight: var(--font-semibold); line-height: var(--leading-snug); margin-bottom: var(--space-1); } /* Final CTA variant — sits centred horizontally above the auth widget, text inside reads left-aligned (overrides .landing-final-cta's centring). Matches the bookend role with the hero note. */ .landing-arvid-note--final-cta { margin: 0 auto var(--space-8); text-align: left; } .landing-greeting--centered .landing-greeting__summary { margin-left: auto; margin-right: auto; } /* --------------------------------------------------------- SECTION HEADERS — mirrors .canvas-section-label--prominent Icon + title + subtitle pattern with per-section icon tint via --section-icon-color (set inline per section). --------------------------------------------------------- */ .landing-section-header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) 0 var(--space-1); margin-bottom: var(--space-6); } /* Higher specificity to beat any inherited material-symbols size. */ .landing-section-header .landing-section-header__icon { font-size: var(--icon-3xl, 48px); width: 1em; height: 1em; line-height: 1; color: var(--section-icon-color, var(--color-text-secondary)); flex-shrink: 0; } .landing-section-header__text-group { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } .landing-section-header__text { font-family: var(--font-serif); font-size: var(--ts-title-size); font-weight: var(--ts-title-weight); line-height: var(--ts-title-leading); letter-spacing: var(--ts-title-tracking); color: var(--color-text-main); } .landing-section-header__subtitle { font-size: var(--ts-body-size); font-weight: var(--font-medium); line-height: var(--ts-body-leading); color: var(--color-text-main); } /* --------------------------------------------------------- DEMO CARDS — Text on paper No glass morphism. Content sits on the squared paper grid, separated by subtle ink-like borders. --------------------------------------------------------- */ /* Card-chrome demo cards on paper — match the paper-mode surface treatment used in base-view.css so .card--bg-semi reads as translucent over the cream paper instead of the default opaque panel fallback. */ .landing-page .landing-demo-card.card.card--bg-semi, .landing-page .landing-privacy-item.card.card--bg-semi, .landing-page .landing-chat-mock__source.card.card--bg-semi, .landing-page .pricing-credit-pack.card.card--bg-semi, .landing-page .landing-actions-mock__card.card.card--bg-semi, .landing-page .landing-course-mock__output.card.card--bg-semi { background: var(--semi-bg); } .landing-page .landing-demo-card.card.card--border-dark, .landing-page .landing-privacy-item.card.card--border-dark, .landing-page .landing-chat-mock__source.card.card--border-dark, .landing-page .pricing-credit-pack.card.card--border-dark, .landing-page .landing-actions-mock__card.card.card--border-dark, .landing-page .landing-course-mock__output.card.card--border-dark { border: 1px solid var(--color-border-dark); } /* Bare demo cards (no .card chrome) — sit on paper with a notebook margin line. Demo cards that also carry .card .card--bg-semi .card--border-dark get the standard surface styling and skip the margin line below. */ .landing-demo-card:not(.card) { background: transparent; border: none; border-radius: 0; box-shadow: none; color: var(--color-text-main); overflow: visible; position: relative; } .landing-demo-card:not(.card)::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--color-border-dark); border-radius: 1px; } /* --------------------------------------------------------- DEMO GRID LAYOUTS --------------------------------------------------------- */ .landing-demo-grid--two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .landing-demo-grid--single { max-width: 640px; } .landing-demo-grid--people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } /* --------------------------------------------------------- WELCOME / HERO SECTION --------------------------------------------------------- */ .landing-welcome { padding-top: 100px; padding-bottom: 40px; } /* --------------------------------------------------------- ACTIONS MOCK — each action is its own card on the paper. Mirrors .attention-card + .content-card--compact in the app. --------------------------------------------------------- */ .landing-actions-mock { font-family: var(--font-sans); } .landing-actions-mock__title { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .landing-actions-mock__list { display: flex; flex-direction: column; gap: var(--space-3); } /* Each action card — chrome from .card .card--bg-semi .card--border-dark. Right padding reserves space for the deadline chip in the corner. */ .landing-actions-mock__card.card { position: relative; padding: var(--space-3); padding-right: calc(var(--space-3) + 110px); display: flex; flex-direction: column; gap: var(--space-2); } .landing-actions-mock__head { display: flex; align-items: flex-start; gap: var(--space-2); } .landing-actions-mock__icon { font-size: var(--icon-md, 20px); color: var(--color-text-muted); flex-shrink: 0; margin-top: 2px; } .landing-actions-mock__head-text { flex: 1; min-width: 0; } .landing-actions-mock__item-title { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text-main); line-height: var(--leading-snug); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .landing-actions-mock__sub { margin-top: 2px; font-size: var(--ts-caption-size, var(--text-sm)); color: var(--color-text-muted); } /* Action body — what to do — sits below a thin divider */ .landing-actions-mock__body { padding-top: var(--space-2); border-top: 1px solid var(--color-border-light); font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-text-main); } /* Deadline chip — absolute, top-right corner of the card */ .landing-actions-mock__deadline { position: absolute; top: var(--space-3); right: var(--space-3); display: inline-flex; align-items: center; padding: var(--space-0-5, 2px) var(--space-2); border-radius: var(--radius-full); font-size: var(--text-2xs, var(--text-xs)); font-weight: var(--font-medium); line-height: var(--leading-tight); letter-spacing: 0.02em; white-space: nowrap; border: 1px solid transparent; } .landing-actions-mock__deadline--overdue { background: var(--tint-rose-bg, rgba(225, 29, 72, 0.08)); color: var(--tint-rose-fg); border-color: var(--tint-rose-fg); text-transform: uppercase; letter-spacing: 0.06em; } .landing-actions-mock__deadline--today { background: var(--tint-amber-bg, rgba(217, 119, 6, 0.08)); color: var(--tint-amber-fg); border-color: var(--tint-amber-fg); } .landing-actions-mock__deadline--soon, .landing-actions-mock__deadline--upcoming { background: var(--theme-inner-pill-bg, var(--color-bg-subtle)); color: var(--color-text-muted); border-color: var(--color-border-light, transparent); } /* --------------------------------------------------------- DAY VIEW (demo calendar — reuses real app classes) --------------------------------------------------------- */ .landing-demo-card .day-view { padding: var(--space-5); } .landing-demo-card .day-view__header { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-4); } .landing-demo-card .day-view__title { margin: 0; font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-text-main); } .landing-demo-card .day-view__date { font-weight: var(--font-normal); color: var(--color-text-muted); } .landing-demo-card .day-view__grid { display: grid; grid-template-columns: 48px 1fr; gap: 0; position: relative; } .landing-demo-card .day-view__gutter { display: flex; flex-direction: column; } .landing-demo-card .day-view__hour-label { height: 48px; display: flex; align-items: flex-start; padding-top: 0; } .landing-demo-card .day-view__hour-label span { font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; } .landing-demo-card .day-view__column { position: relative; border-left: 1px solid var(--color-border-light); } .landing-demo-card .day-view__hour-line { height: 48px; border-bottom: 1px solid rgba(0, 0, 0, 0.04); } .landing-demo-card .day-view__event { position: absolute; left: 4px; right: 4px; padding: var(--space-2); background: rgba(14, 165, 233, 0.1); border-left: 3px solid var(--tint-sky-fg); border-radius: var(--radius-sm); overflow: hidden; } .landing-demo-card .day-view__event--accent { background: rgba(16, 185, 129, 0.1); border-left-color: var(--tint-emerald-fg); } .landing-demo-card .day-view__event-time { display: block; font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 2px; } .landing-demo-card .day-view__event-title { display: block; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --------------------------------------------------------- MEETING MOCK --------------------------------------------------------- */ .landing-meeting-mock { padding: var(--space-5); } .landing-meeting-mock__header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border-light); } .landing-meeting-mock__dot { width: 12px; height: 12px; background: #ef4444; border-radius: var(--radius-full); animation: pulse 2s infinite; } .landing-meeting-mock__title { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--color-text-main); flex: 1; } .landing-meeting-mock__time { font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .landing-meeting-mock__body { display: flex; flex-direction: column; gap: var(--space-4); } .landing-meeting-mock__section-title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .landing-meeting-mock__section-title .material-symbols-rounded { font-size: var(--icon-sm); color: var(--tint-amber-fg); } .landing-meeting-mock__list { list-style: none; margin: 0; padding: 0; } .landing-meeting-mock__list li { padding: var(--space-2) 0; font-family: var(--font-serif); font-size: var(--text-base); color: var(--color-text-main); line-height: 1.5; border-bottom: 1px solid rgba(0, 0, 0, 0.04); } .landing-meeting-mock__list li:last-child { border-bottom: none; } /* --------------------------------------------------------- COURSE MOCK --------------------------------------------------------- */ .landing-course-mock { padding: var(--space-5); } .landing-course-mock__header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border-light); font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--color-text-main); } .landing-course-mock__header .material-symbols-rounded { font-size: var(--icon-lg); color: var(--tint-sky-fg); } .landing-course-mock__prompt { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); margin-bottom: var(--space-3); background: var(--theme-inner-raised-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--color-text-main); } .landing-course-mock__prompt .material-symbols-rounded { font-size: var(--icon-sm); color: var(--tint-sky-fg); } .landing-course-mock__prompt-text { font-family: var(--font-serif); color: var(--color-text-main); } .landing-course-mock__reading { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-4); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } .landing-course-mock__reading .material-symbols-rounded { font-size: var(--icon-sm); color: var(--tint-amber-fg); animation: pulse 2s infinite; } /* "Memoro will generate:" label */ .landing-course-mock__outputs-label { font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: var(--space-3); } /* Three-up grid of generated artefacts */ .landing-course-mock__outputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .landing-course-mock__output.card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-3); } .landing-course-mock__output-icon { font-size: var(--icon-xl, 28px); color: var(--output-icon-color, var(--color-text-muted)); margin-bottom: var(--space-1); } .landing-course-mock__output-title { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text-main); } .landing-course-mock__output-desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-snug); } @media (max-width: 599px) { .landing-course-mock__outputs { grid-template-columns: 1fr; } } /* --------------------------------------------------------- EMAIL MOCK --------------------------------------------------------- */ .landing-email-mock { padding: var(--space-5); } .landing-email-mock__header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border-light); font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--color-text-main); } .landing-email-mock__header .material-symbols-rounded { font-size: var(--icon-lg); color: var(--tint-violet-fg); } .landing-email-mock__items { display: flex; flex-direction: column; gap: var(--space-3); } .landing-email-mock__item { padding: var(--space-3); background: var(--theme-inner-raised-bg); border: var(--theme-inner-raised-border); border-radius: var(--radius-md); } .landing-email-mock__item--urgent { border-left: 3px solid var(--tint-rose-fg); } .landing-email-mock__item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-1); } .landing-email-mock__sender { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-main); } .landing-email-mock__badge { font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: var(--radius-full); background: var(--theme-inner-pill-bg); color: var(--color-text-muted); } .landing-email-mock__badge--urgent { background: rgba(244, 63, 94, 0.1); color: var(--tint-rose-fg); } .landing-email-mock__subject { font-size: var(--text-base); font-weight: var(--font-medium); color: var(--color-text-main); margin: 0 0 var(--space-1); } .landing-email-mock__snippet { font-family: var(--font-serif); font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; line-height: 1.5; max-width: none; } .landing-email-mock__digest-line { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; font-size: var(--text-sm); color: var(--color-text-muted); } .landing-email-mock__digest-line .material-symbols-rounded { font-size: var(--icon-sm); color: var(--tint-amber-fg); } /* --------------------------------------------------------- DIALOGUE — Handwritten conversation on paper User writes in pencil, Memoro responds in ink. --------------------------------------------------------- */ .landing-chat-mock { display: flex; flex-direction: column; gap: var(--space-8); max-width: 720px; margin-left: auto; margin-right: auto; } .landing-chat-mock__turn { display: flex; flex-direction: column; gap: var(--space-4); } .landing-chat-mock__message { display: flex; flex-direction: column; gap: var(--space-2); max-width: 100%; } .landing-chat-mock__message--user { align-items: flex-end; } .landing-chat-mock__message--assistant { align-items: flex-start; } /* User: right-aligned pill bubble — sans-serif, asymmetric tail radius */ .landing-chat-mock__bubble { max-width: 85%; padding: var(--space-3) var(--space-4); border-radius: var(--theme-radius) var(--theme-radius) var(--radius-xs, 4px) var(--theme-radius); font-family: var(--font-sans); font-size: var(--ts-prose-size, var(--text-base)); font-weight: var(--font-normal); line-height: 1.5; color: var(--color-text-main); background: var(--theme-inner-pill-bg); border: 1px solid transparent; word-break: break-word; overflow-wrap: break-word; } /* Assistant: prose on background, no bubble chrome */ .landing-chat-mock__prose { margin: 0; max-width: var(--ts-prose-measure, 72ch); font-family: var(--font-serif); font-size: var(--ts-prose-size, var(--text-base)); font-weight: var(--ts-prose-weight, var(--font-normal)); line-height: var(--ts-prose-leading, 1.6); letter-spacing: var(--ts-prose-tracking, normal); color: var(--color-text-main); } /* Sources block under assistant message */ .landing-chat-mock__sources { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-1); } .landing-chat-mock__sources-label { font-size: var(--ts-label-size, var(--text-xs)); font-weight: var(--ts-label-weight, var(--font-semibold)); letter-spacing: var(--ts-label-tracking, 0.06em); text-transform: uppercase; color: var(--color-text-subtle); } .landing-chat-mock__sources-list { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* Source pill — chrome comes from .card .card--bg-semi .card--border-dark. This selector overrides .card's column flex + .card's --radius-card so the pill stays inline and rounded-full. */ .landing-chat-mock__source.card { display: inline-flex; flex-direction: row; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full, 999px); font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-text-main); } .landing-chat-mock__source .material-symbols-rounded { font-size: var(--icon-sm, 18px); color: var(--color-text-muted); } /* --------------------------------------------------------- PRIVACY ITEMS --------------------------------------------------------- */ .landing-privacy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } /* Privacy item — chrome comes from .card .card--bg-semi .card--border-dark. This selector overrides .card's column flex so icon + text sit in a row. */ .landing-privacy-item.card { display: flex; flex-direction: row; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text-main); } .landing-privacy-item .material-symbols-rounded { font-size: var(--icon-xl); color: var(--color-text-muted); flex-shrink: 0; margin-top: 2px; } /* Per-item icon tints — varied palette, avoiding entity-type tints (rose/blue/emerald/teal/sky) and the indigo link colour. */ .landing-privacy-item--encrypted .material-symbols-rounded { color: var(--tint-slate-fg); } .landing-privacy-item--no-training .material-symbols-rounded { color: var(--tint-red-fg); } .landing-privacy-item--control .material-symbols-rounded { color: var(--tint-amber-fg); } .landing-privacy-item--audio .material-symbols-rounded { color: var(--tint-violet-fg); } /* --------------------------------------------------------- PRICING — Credit-based model --------------------------------------------------------- */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1000px; margin: 0 auto; text-align: left; } .pricing-card { padding: 32px; display: flex; flex-direction: column; position: relative; transition: border-color 0.2s; } /* Credits card — the single unified pricing card */ .pricing-card--credits { max-width: 600px; padding: var(--space-8); border-left: 3px solid var(--color-brand); } .pricing-card .pricing-features { flex: 1; } .pricing-card:hover { border-color: rgba(0, 0, 0, 0.12); } /* Pro card — subtle emphasis on paper */ .pricing-card-pro { border-left: 3px solid var(--color-brand); transform: none; } .pricing-card-pro::before { display: none; } .pricing-card-pro:hover { border-color: rgba(0, 0, 0, 0.15); } .pricing-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--color-brand); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--color-text-contrast); font-size: var(--text-sm); font-weight: var(--font-bold); letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 16px; border-radius: 20px; white-space: nowrap; border: none; } /* Unlimited tier — ink emphasis on paper */ .pricing-card-unlimited { background: transparent !important; border-left: 3px solid var(--annotation-ink); color: var(--color-text-main); } .pricing-card-unlimited .pricing-header h3, .pricing-card-unlimited .price-amount { color: var(--annotation-ink); } .pricing-card-unlimited .price-note { color: var(--color-text-muted); } .pricing-card-unlimited .pricing-features li { color: var(--color-text-main); } .pricing-card-unlimited .pricing-check { color: var(--annotation-ink); } .pricing-card-unlimited .pricing-cta { background: transparent !important; border-color: rgba(0, 0, 0, 0.1) !important; color: var(--color-text-main) !important; } .pricing-card-unlimited .pricing-cta:hover { background: rgba(0, 0, 0, 0.03) !important; border-color: rgba(0, 0, 0, 0.15) !important; } .pricing-header { margin-bottom: 20px; } .pricing-header h3 { font-size: var(--text-2xl); font-weight: var(--font-extrabold); margin-bottom: 8px; color: var(--color-text-main); } .pricing-price { display: flex; align-items: baseline; gap: 8px; } .price-amount { font-size: var(--text-4xl); font-weight: var(--font-extrabold); color: var(--color-text-main); } .price-note { font-size: var(--text-sm); color: var(--color-text-muted); } .pricing-features { list-style: none; margin: 0 0 20px; padding: 0; flex: 1; } .pricing-features li { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-family: var(--font-serif); font-size: var(--text-sm); color: var(--color-text-main); line-height: var(--leading-snug); } .pricing-check { font-size: var(--text-lg); color: var(--tint-violet-fg); flex-shrink: 0; } .pricing-cta { width: 100%; margin-top: var(--space-5); padding: 14px 24px !important; font-size: var(--text-base) !important; font-weight: var(--font-semibold) !important; text-align: center; border: none !important; border-radius: var(--radius-md) !important; background: var(--tint-violet-solid, var(--tint-violet-fg)) !important; color: var(--color-text-contrast) !important; transition: background-color 0.2s; } .pricing-cta:hover { background: var(--tint-violet-fg) !important; filter: brightness(0.95); } .pricing-card-pro .pricing-cta { background: transparent !important; color: var(--color-brand) !important; border-color: var(--color-brand) !important; } .pricing-card-pro .pricing-cta:hover { background: rgba(251, 146, 60, 0.06) !important; border-color: var(--color-brand-hover) !important; } /* Pricing subtitle — serif for readability */ .pricing-subtitle { font-family: var(--font-serif); font-size: var(--text-base); font-weight: var(--font-normal); color: var(--color-text-muted); line-height: var(--leading-relaxed); margin: 0; max-width: none; } /* Credit packs — subscription tiers */ .pricing-credit-packs { margin-top: var(--space-6); } .pricing-credit-packs__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 var(--space-4); } .pricing-credit-packs__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } /* Pack chrome comes from .card .card--bg-semi .card--border-dark. Override .card's column layout details only as needed. */ .pricing-credit-pack.card { align-items: center; gap: var(--space-1); padding: var(--space-4) var(--space-3); } .pricing-credit-pack__amount { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-text-main); letter-spacing: -0.01em; line-height: 1; } .pricing-credit-pack__label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .pricing-credit-pack__price { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--tint-violet-fg); margin-top: var(--space-1); } /* --------------------------------------------------------- FINAL CTA --------------------------------------------------------- */ .landing-final-cta { text-align: center; padding: 60px 20px 80px; } .final-cta-actions { display: flex; justify-content: center; margin-top: 32px; } .final-cta-auth { max-width: 400px; margin: 32px auto 0; text-align: center; } .final-cta-auth .hero-state h2 { display: none; } .final-cta-auth .hero-state-subtitle { display: none; } .final-cta-trust { display: flex; gap: 20px; justify-content: center; margin-top: 20px; flex-wrap: wrap; } .final-cta-trust-item { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-sm); color: rgba(28, 25, 23, 0.6); } .final-cta-trust-item .material-symbols-rounded { font-size: var(--text-base); color: #10b981; } /* --------------------------------------------------------- HERO BUTTONS (used in hero auth + final CTA) --------------------------------------------------------- */ .hero-btn { padding: 16px 36px; font-size: var(--text-lg); font-weight: var(--font-semibold); border-radius: var(--radius-full, 100px); cursor: pointer; transition: background-color 0.2s; border: none; } .hero-btn-primary { background: rgba(255, 255, 255, 0.7); color: #1c1917; border: 1px solid rgba(0, 0, 0, 0.08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .hero-btn-primary:hover { background: rgba(255, 255, 255, 0.85); } .hero-btn-secondary { background: var(--semi-bg); color: var(--color-text-main); border: 1px solid var(--color-border-dark); } .hero-btn-secondary:hover { background: var(--semi-bg-hover, var(--semi-bg)); border-color: var(--color-border-dark); } .hero-btn-full { width: 100%; } /* --------------------------------------------------------- HERO INLINE AUTH FORMS --------------------------------------------------------- */ .hero-state { animation: heroStateFadeIn 0.3s ease-out; } @keyframes heroStateFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .hero-state[hidden] { display: none; } .hero-state h2 { font-size: var(--text-4xl); font-weight: var(--font-bold); margin-bottom: 12px; color: var(--wallpaper-text-color); text-shadow: var(--wallpaper-text-shadow); } .hero-state-subtitle { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: var(--font-normal); color: var(--wallpaper-text-color); opacity: 0.8; margin: 0 auto 32px; max-width: 400px; text-shadow: var(--wallpaper-text-shadow); } /* OAuth button group */ .hero-oauth-buttons { display: flex; flex-direction: column; gap: 12px; max-width: 400px; margin: 0 auto 8px; } .hero-oauth-buttons .hero-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; } .hero-oauth-error { color: var(--color-danger); font-size: var(--text-sm); margin: 8px 0 0; padding: 10px 14px; background: var(--color-danger-subtle); border-radius: var(--radius-md); } .hero-oauth-error[hidden] { display: none; } /* Auth form styling */ .hero-auth-form { display: flex; flex-direction: column; gap: 20px; max-width: 400px; margin: 0 auto; text-align: left; } .hero-field-group { display: flex; flex-direction: column; gap: 6px; } .hero-field-group label { font-size: var(--text-sm); font-weight: var(--font-medium); color: rgba(28, 25, 23, 0.85); } .hero-field-group input { padding: 14px 16px; font-size: var(--text-base); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: var(--radius-md); background: var(--theme-input-bg); -webkit-backdrop-filter: var(--theme-input-blur); backdrop-filter: var(--theme-input-blur); color: var(--color-text-main); transition: border-color 0.2s, box-shadow 0.2s; } .hero-field-group input:hover { border-color: rgba(0, 0, 0, 0.2); } .hero-field-group input:focus { outline: none; border-color: var(--color-brand-muted); box-shadow: 0 0 0 3px var(--color-brand-subtle); } .hero-field-group input::placeholder { color: var(--color-text-muted); } .hero-field-hint { margin: 4px 0 0; font-size: var(--text-sm); } .hero-field-error { color: var(--color-danger); font-size: var(--text-sm); margin: 0; padding: 10px 14px; background: var(--color-danger-subtle); border-radius: var(--radius-md); } .hero-field-error[hidden] { display: none; } .hero-field-success { color: var(--color-success); font-size: var(--text-sm); margin: 0; padding: 10px 14px; background: var(--color-success-subtle); border-radius: var(--radius-md); } .hero-field-success[hidden] { display: none; } .hero-auth-link { color: rgba(28, 25, 23, 0.7); text-decoration: underline; transition: color 0.2s; } .hero-auth-link:hover { color: #1c1917; } .hero-auth-switch { margin-top: 24px; font-size: var(--text-sm); color: rgba(28, 25, 23, 0.6); } /* --------------------------------------------------------- HERO BRAND LABEL --------------------------------------------------------- */ .hero-brand-label { display: inline-block; font-size: var(--text-sm); font-weight: var(--font-bold); letter-spacing: 0.1em; text-transform: uppercase; color: #fb923c; margin-bottom: 12px; } /* Hero trust line */ .hero-trust-line { display: flex; gap: 20px; align-items: center; justify-content: center; margin: 0; flex-wrap: wrap; } .hero-trust-item { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-sm); color: rgba(28, 25, 23, 0.6); } .hero-trust-item .material-symbols-rounded { font-size: var(--text-base); color: #10b981; } /* Hero actions */ .landing-hero-actions { display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center; } .landing-hero-actions .hero-btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 18px 40px; font-size: var(--text-lg); } .hero-btn-arrow { font-size: var(--text-xl); } .landing-hero-actions .hero-btn-primary:hover .hero-btn-arrow { transform: translateX(3px); } .landing-hero-content { max-width: 720px; } .landing-hero-text h1 { font-size: clamp(2.6rem, 7vw, 3.8rem); font-weight: var(--font-bold); line-height: var(--leading-tight); letter-spacing: -0.02em; margin-bottom: 24px; color: var(--wallpaper-text-color); text-shadow: var(--wallpaper-text-shadow); } .landing-hero-subtitle { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: var(--font-normal); color: var(--wallpaper-text-color); opacity: 0.85; margin: 0 auto 40px; max-width: 520px; line-height: 1.6; text-shadow: var(--wallpaper-text-shadow); } /* --------------------------------------------------------- ONBOARDING STYLES --------------------------------------------------------- */ .hero-onboarding-options { display: flex; flex-direction: column; gap: 12px; max-width: 400px; margin: 0 auto; } .hero-onboarding-btn { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--theme-canvas-bg); -webkit-backdrop-filter: var(--theme-canvas-blur); backdrop-filter: var(--theme-canvas-blur); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--radius-md); font-size: var(--text-base); font-weight: var(--font-medium); color: var(--color-text-main); cursor: pointer; transition: border-color 0.2s, background-color 0.2s; } .hero-onboarding-btn:hover { background: var(--theme-canvas-bg-hover); } .hero-onboarding-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } .hero-onboarding-icon img { width: 20px; height: 20px; } .hero-onboarding-services { display: flex; flex-direction: column; gap: 32px; margin-top: 8px; } .hero-onboarding-section { padding: 24px; background: var(--theme-canvas-bg); -webkit-backdrop-filter: var(--theme-canvas-blur); backdrop-filter: var(--theme-canvas-blur); border: var(--theme-canvas-border); border-radius: var(--radius-lg); } .hero-onboarding-section-disabled { opacity: 0.6; } .hero-onboarding-section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px 0; font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--color-text-main); } .hero-onboarding-section-title .material-symbols-rounded { font-size: var(--icon-lg); color: var(--color-primary); } .hero-onboarding-section-desc { margin: 0 0 16px 0; font-size: var(--text-sm); color: var(--color-text-muted); } .hero-onboarding-section .hero-onboarding-options { flex-direction: row; flex-wrap: wrap; max-width: none; } .hero-onboarding-section .hero-onboarding-btn { flex: 1; min-width: 180px; justify-content: center; } .hero-onboarding-btn-disabled { cursor: not-allowed; opacity: 0.5; } .hero-onboarding-btn-disabled:hover { transform: none; } .hero-onboarding-badge { display: inline-flex; padding: 2px 8px; margin-left: auto; font-size: var(--text-sm); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-primary); background: var(--color-primary-bg); border-radius: var(--radius-full); } .hero-onboarding-pagination { display: flex; justify-content: center; gap: 8px; margin-bottom: 24px; } .hero-onboarding-dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: rgba(0, 0, 0, 0.15); border: none; padding: 0; cursor: pointer; transition: background-color 0.2s; } .hero-onboarding-dot:hover { background: rgba(0, 0, 0, 0.3); transform: scale(1.2); } .hero-onboarding-dot.active { background: #fb923c; transform: scale(1.2); } .hero-onboarding-steps { position: relative; min-height: 200px; } .hero-onboarding-step { display: none; animation: onboardingStepFadeIn 0.3s ease-out; } .hero-onboarding-step.active { display: block; } @keyframes onboardingStepFadeIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } } .hero-onboarding-nav { display: flex; gap: 12px; align-items: center; } .hero-onboarding-prev { display: flex; align-items: center; gap: 8px; } .hero-onboarding-prev .material-symbols-rounded { font-size: var(--icon-md); } .hero-onboarding-prev[hidden] { display: none; } .hero-onboarding-footer { display: flex; flex-direction: column; gap: 16px; align-items: center; margin-top: 32px; } .hero-onboarding-footer .hero-btn-primary { min-width: 200px; } /* Welcome Screen */ .hero-welcome-screen { text-align: center; padding: 20px 0; } .hero-welcome-icon { margin-bottom: 24px; } .hero-welcome-brand { font-size: var(--text-4xl); font-weight: var(--font-bold); letter-spacing: 0.15em; color: #fb923c; } .hero-welcome-subtitle { font-size: var(--text-lg); color: rgba(28, 25, 23, 0.7); margin: 0 auto 32px; max-width: 400px; } .hero-welcome-features { display: flex; flex-direction: column; gap: 16px; max-width: 320px; margin: 0 auto; } .hero-welcome-feature { display: flex; align-items: center; gap: 12px; font-size: var(--text-base); color: rgba(28, 25, 23, 0.85); } .hero-welcome-feature .material-symbols-rounded { font-size: var(--icon-lg); color: #fb923c; } /* Integration modal */ .integration-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1000; } .integration-modal { background: var(--theme-window-bg); -webkit-backdrop-filter: var(--theme-window-blur); backdrop-filter: var(--theme-window-blur); border: var(--theme-window-border); border-radius: var(--radius-xl, 20px); padding: 32px; max-width: 500px; width: 100%; box-shadow: var(--theme-window-shadow); } .integration-modal__header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .integration-modal__icon { width: 48px; height: 48px; border-radius: 12px; background: var(--color-brand-subtle); display: flex; align-items: center; justify-content: center; } .integration-modal__icon .material-symbols-rounded { font-size: var(--icon-lg); color: var(--color-brand); } .integration-modal__title { margin: 0; font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-text-main); } .integration-modal__sync-type { font-size: var(--text-sm); color: var(--color-text-muted); } .integration-modal__description { margin: 0 0 20px; color: var(--color-text-main); line-height: 1.5; max-width: none; } .integration-modal__details { margin-bottom: 20px; } .integration-modal__details-title { font-size: var(--text-sm); font-weight: var(--font-semibold); margin: 0 0 12px; color: var(--color-text-main); } .integration-modal__list { list-style: none; margin: 0; padding: 0; } .integration-modal__list li { padding: 6px 0; padding-left: 20px; position: relative; font-size: var(--text-sm); color: var(--color-text-main); line-height: var(--leading-snug); } .integration-modal__list li::before { content: "✓"; position: absolute; left: 0; color: var(--color-brand); font-weight: var(--font-bold); } .integration-modal__access { display: flex; align-items: center; gap: 8px; padding: 12px; background: var(--theme-inner-inset-bg); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 16px; } .integration-modal__access .material-symbols-rounded { font-size: var(--icon-md); color: var(--tint-emerald-fg); } .integration-modal__note { display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 24px; max-width: none; } .integration-modal__note .material-symbols-rounded { font-size: var(--icon-md); color: var(--color-text-muted); flex-shrink: 0; margin-top: 1px; } .integration-modal__actions { display: flex; gap: 12px; justify-content: flex-end; } .integration-modal__btn { padding: 10px 24px; font-size: var(--text-sm); font-weight: var(--font-semibold); border-radius: var(--radius-md); cursor: pointer; transition: background-color 0.2s; border: none; } .integration-modal__btn--secondary { background: transparent; color: var(--color-text-muted); border: 1px solid rgba(0, 0, 0, 0.1); } .integration-modal__btn--secondary:hover { background: var(--theme-inner-raised-bg); } .integration-modal__btn--primary { background: var(--color-brand); color: var(--color-text-contrast); } .integration-modal__btn--primary:hover { background: var(--color-brand-hover); } /* --------------------------------------------------------- FOOTER — Transparent, on paper --------------------------------------------------------- */ .landing-footer { background: transparent; border-top: none; padding: var(--space-8) var(--space-5); position: relative; z-index: 1; color: var(--color-text-main); } .landing-footer-inner { max-width: 1100px; margin: 0 auto; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; } .footer-col-brand { padding-right: 32px; } .footer-brand .brand-logo { display: none; } .footer-brand-name { display: block; font-family: Georgia, 'Times New Roman', 'Palatino Linotype', serif; font-size: var(--text-lg); font-weight: var(--font-extrabold); letter-spacing: 0.12em; color: var(--color-text-main); margin-bottom: 8px; } .footer-tagline { font-family: var(--font-serif); font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; line-height: 1.6; } .footer-col h4 { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-text-main); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.05em; } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { margin-bottom: 8px; } .footer-col a { font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; transition: color 0.2s; } .footer-col a:hover { color: var(--color-text-main); } .footer-bottom { padding-top: 24px; border-top: none; font-size: var(--text-sm); color: var(--color-text-muted); } /* Simple one-row footer */ .footer-left, .footer-right { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text-main); } .landing-footer-inner:has(.footer-left) { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); } .footer-right { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; } .footer-right a { color: var(--color-text-main); font-weight: var(--font-semibold); text-decoration: none; text-underline-offset: 3px; transition: text-decoration var(--transition-fast); } .footer-right a:hover { text-decoration: underline; } /* --------------------------------------------------------- LANGUAGE SWITCHER --------------------------------------------------------- */ .lang-switcher { position: relative; } .lang-switcher-btn { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--space-11); padding: 0 var(--space-4); background: transparent; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: none; border-radius: var(--radius-full); color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--font-medium); line-height: 1; cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-instant); } .lang-switcher-btn:hover { background: var(--color-bg-hover); color: var(--color-text-main); } .lang-switcher-btn:active { transform: scale(0.97); } .lang-switcher-btn .material-symbols-rounded { font-size: var(--icon-xl); color: inherit; } .lang-switcher-label { text-transform: uppercase; letter-spacing: 0.03em; } .lang-switcher-dropdown { position: absolute; top: calc(100% + var(--space-2)); right: 0; min-width: 140px; background: var(--color-bg-panel-glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-window); z-index: var(--z-dropdown); overflow: hidden; } .lang-switcher-dropdown[hidden] { display: none; } .lang-option { display: flex; align-items: center; width: 100%; padding: 10px 14px; background: transparent; border: none; border-radius: 0; text-align: left; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text-main); cursor: pointer; transition: background-color 0.15s; } .lang-option:hover { background: var(--theme-inner-raised-bg-hover); } .lang-option.active { background: var(--theme-inner-raised-bg); font-weight: var(--font-semibold); } .lang-option-name { flex: 1; } /* --------------------------------------------------------- AUTHENTICATED VS GUEST — Adaptive sections --------------------------------------------------------- */ /* Guest-only sections: hidden when authenticated. Logged-in users see only the personalised hero — the marketing tour (your-day, meetings, courses, email, dialogue, privacy, pricing, final CTA) collapses entirely. */ .landing-page--authenticated .landing-guest-only { display: none !important; } /* Authenticated hero — fills the viewport between header and footer so the avatar + greeting sit centered with breathing room above and below. The subtraction is the rough sum of header (~72px) and footer (~120px); a few px off doesn't matter visually since the section is centered, not anchored. */ .landing-page--authenticated .landing-welcome { min-height: calc(100vh - 200px); display: flex; align-items: center; justify-content: center; padding-top: var(--space-6); padding-bottom: var(--space-6); } /* Split hero — mobile-first: stacked + centered. Desktop opens out into two columns (avatar left, greeting + CTA right) below. */ .landing-hero-split { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); width: 100%; max-width: 900px; margin: 0 auto; padding: 0 var(--space-5); text-align: center; } .landing-hero-split__avatar { flex: 0 0 auto; display: flex; justify-content: center; } .landing-hero-split__content { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); } .landing-hero-split .landing-greeting { margin: 0; } /* Desktop split: avatar left, greeting + CTA right. */ @media (min-width: 900px) { .landing-hero-split { flex-direction: row; align-items: center; justify-content: center; gap: var(--space-10); max-width: 1080px; text-align: left; } .landing-hero-split__content { align-items: flex-start; max-width: 480px; } .landing-hero-split .landing-greeting__summary { margin-left: 0; margin-right: 0; } } @media (min-width: 1200px) { .landing-hero-split { gap: var(--space-12); } } /* Authenticated hero — bigger enter button */ .hero-btn-enter { display: inline-flex; align-items: center; gap: 10px; padding: 20px 48px; font-size: var(--text-xl); text-decoration: none; } /* Feature tips grid */ .landing-tips-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .landing-tip-card { padding: var(--space-6); text-align: left; } .landing-tip-card__icon { font-size: var(--icon-3xl); color: var(--color-text-main); margin-bottom: var(--space-4); display: block; } .landing-tip-card__title { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--color-text-main); margin: 0 0 var(--space-2); } .landing-tip-card__desc { font-family: var(--font-serif); font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; line-height: var(--leading-normal); } /* FAQ list */ .landing-faq-list { display: flex; flex-direction: column; gap: 12px; } .landing-faq-item { background: transparent; border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.06); border-radius: 0; box-shadow: none; overflow: hidden; } .landing-faq-item summary { padding: var(--space-4) var(--space-5); font-weight: var(--font-semibold); cursor: pointer; color: var(--color-text-main); list-style: none; display: flex; align-items: center; justify-content: space-between; } .landing-faq-item summary::after { content: '+'; font-size: var(--text-2xl); font-weight: var(--font-light); color: var(--color-text-secondary); } .landing-faq-item[open] summary::after { content: '−'; } .landing-faq-item summary::-webkit-details-marker { display: none; } .landing-faq-item p { padding: 0 var(--space-5) var(--space-4); margin: 0; color: var(--color-text-secondary); line-height: 1.6; font-size: var(--text-sm); } /* --------------------------------------------------------- MOBILE RESPONSIVE --------------------------------------------------------- */ @media (max-width: 899px) { .landing-section { padding: 40px 16px; } /* Keep fixed header on mobile too */ .landing-page .app-header-bar { position: fixed; } .landing-welcome { padding-top: 64px; } .landing-greeting__text { font-size: var(--text-2xl); } .landing-greeting__summary { font-size: var(--text-lg); font-weight: var(--font-semibold); } .landing-demo-grid--two-col { grid-template-columns: 1fr; } .landing-demo-grid--people { grid-template-columns: 1fr; gap: 12px; } .landing-privacy-grid { grid-template-columns: 1fr; } .landing-tips-grid { grid-template-columns: 1fr; } .pricing-grid { grid-template-columns: 1fr; gap: 16px; } .pricing-card--credits { max-width: none; padding: var(--space-5); } .pricing-credit-packs__list { grid-template-columns: 1fr; gap: var(--space-2); } .pricing-credit-pack { flex-direction: row; justify-content: space-between; padding: var(--space-3) var(--space-4); } .pricing-card-pro { transform: none; } .pricing-card-pro:hover { border-color: rgba(0, 0, 0, 0.15); } /* Chat mock */ .landing-chat-mock { gap: var(--space-6); } .landing-chat-mock__bubble { max-width: 90%; } /* Hero */ .landing-hero-text h1 { font-size: var(--text-4xl); } .landing-hero-subtitle { font-size: var(--text-base); } .hero-btn { text-align: center; width: 100%; } .hero-trust-line { gap: 12px; } /* Auth */ .hero-state h2 { font-size: var(--text-2xl); } .hero-state-subtitle { font-size: var(--text-base); } .hero-auth-form { max-width: none; } .hero-onboarding-options { max-width: none; } .hero-onboarding-section .hero-onboarding-options { flex-direction: column; } .hero-onboarding-section .hero-onboarding-btn { min-width: auto; } /* Final CTA */ .final-cta-trust { gap: 12px; } .final-cta-actions .hero-btn-primary { width: 100%; justify-content: center; } /* Footer */ .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-col-brand { grid-column: span 2; padding-right: 0; text-align: center; } .footer-bottom { text-align: center; } .landing-footer-inner:has(.footer-left) { flex-direction: column; text-align: center; gap: 12px; } .footer-right { justify-content: center; } /* FABs */ .landing-fabs { bottom: 16px; right: 16px; } .landing-fab { width: 44px; height: 44px; } .landing-fab .material-symbols-rounded { font-size: var(--icon-md); } } @media (max-width: 599px) { .price-amount { font-size: var(--text-2xl); } .footer-grid { grid-template-columns: 1fr; gap: 24px; text-align: center; } .footer-col-brand { grid-column: span 1; } .footer-col h4 { margin-bottom: 12px; } .lang-switcher-btn { padding: 6px 8px; } .lang-switcher-label { display: none; } } /* --------------------------------------------------------- PARAGRAPH SELECTORS (specificity ordering) --------------------------------------------------------- */ .static-page-content p { font-size: var(--text-base); font-weight: var(--font-medium); line-height: var(--leading-relaxed); color: var(--color-text-main); margin-bottom: var(--space-4); } .error-page-content p { font-size: var(--text-lg); color: #6b6b6b; margin-bottom: 32px; line-height: 1.6; } /* --------------------------------------------------------- HOW IT WORKS PAGE (shared with other pages) --------------------------------------------------------- */ .how-it-works-hero { background: linear-gradient(180deg, rgba(20, 40, 60, 0.5) 0%, transparent 100%); padding: 80px 20px 60px; } .landing-hero-centered { text-align: center; max-width: 700px; margin: 0 auto; } .how-it-works-hero .landing-hero-centered h1 { font-size: clamp(var(--text-4xl), 5vw, 2.5rem); } .how-it-works-process { padding: 80px 20px; } .hiw-memoro-letter { font-family: Georgia, 'Times New Roman', 'Palatino Linotype', serif; font-size: 48px; font-weight: 700; line-height: 1; } .hiw-step { display: flex; gap: 32px; align-items: flex-start; margin-bottom: 60px; max-width: 800px; } .hiw-step:last-child { margin-bottom: 0; } .hiw-step-number { flex-shrink: 0; width: 56px; height: 56px; background: #fb923c; color: var(--color-text-contrast); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-weight: var(--font-bold); font-size: var(--text-2xl); } .hiw-step-content h2 { font-size: var(--text-2xl); margin-bottom: 12px; color: var(--color-text-main); } .hiw-step-content p { color: var(--color-text-muted); font-size: var(--text-lg); margin-bottom: 20px; max-width: none; } .hiw-step-details { list-style: none; margin: 0; padding: 0; } .hiw-step-details li { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; font-size: var(--text-sm); color: var(--color-text-main); } .hiw-step-details li::before { content: "✓"; color: #fb923c; font-weight: var(--font-bold); flex-shrink: 0; } /* --------------------------------------------------------- STATIC PAGES (About, Privacy, Terms, Contact) --------------------------------------------------------- */ .static-page-content { padding: calc(var(--space-11) + var(--space-12) + env(safe-area-inset-top, 0px)) var(--space-5) var(--space-12); } .static-back { display: inline-flex; align-items: center; justify-content: center; width: var(--space-11); height: var(--space-11); border-radius: var(--radius-full); background: transparent; color: var(--color-text-muted); text-decoration: none; margin-bottom: var(--space-4); transition: background-color var(--transition-fast), color var(--transition-fast); } .static-back:hover { background: rgba(0, 0, 0, 0.06); color: var(--color-text-main); text-decoration: none; } .static-back .material-symbols-rounded { font-size: var(--icon-xl); } .static-page-content .landing-section-inner { max-width: 800px; background: var(--theme-canvas-bg); -webkit-backdrop-filter: var(--theme-canvas-blur); backdrop-filter: var(--theme-canvas-blur); border: var(--theme-canvas-border); border-radius: 24px; padding: 48px 40px; box-shadow: var(--theme-canvas-shadow); } .static-page-content h1 { font-size: var(--text-4xl); font-weight: var(--font-extrabold); margin-bottom: var(--space-6); color: var(--color-text-main); } .static-page-content h2 { font-size: var(--text-xl); font-weight: var(--font-bold); margin-top: var(--space-8); margin-bottom: var(--space-3); color: var(--color-text-main); } .static-page-content ul { margin: var(--space-4) 0; padding-left: var(--space-6); } .static-page-content li { margin-bottom: var(--space-2); font-size: var(--text-base); font-weight: var(--font-medium); line-height: var(--leading-relaxed); color: var(--color-text-main); } .static-page-content a:not(.static-back) { color: var(--color-text-main); font-weight: var(--font-semibold); text-decoration: underline; } .static-page-content a:not(.static-back):hover { text-decoration: none; } /* Contact form */ .contact-form { margin-top: 32px; } .contact-form .field-group { margin-bottom: 20px; } .contact-form label { font-weight: var(--font-semibold); margin-bottom: 6px; } .contact-form input, .contact-form textarea { width: 100%; padding: 12px 14px; font-size: var(--text-base); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; background: var(--theme-inner-raised-bg); color: var(--color-text-main); transition: border-color 0.2s, box-shadow 0.2s; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: rgba(0, 0, 0, 0.2); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05); } .contact-form textarea { min-height: 150px; resize: vertical; } .contact-form-submit { background: rgba(255, 255, 255, 0.7); color: #1c1917; border: 1px solid rgba(0, 0, 0, 0.08); backdrop-filter: blur(12px); padding: 14px 32px; font-size: var(--text-base); font-weight: var(--font-semibold); border-radius: 8px; cursor: pointer; transition: background-color 0.2s; } .contact-form-submit:hover { background: rgba(255, 255, 255, 0.85); } @media (max-width: 599px) { .static-page-content { padding: 40px 16px; } .static-page-content .landing-section-inner { padding: 32px 20px; border-radius: 20px; } .static-page-content h1 { font-size: var(--text-4xl); } } /* --------------------------------------------------------- ERROR PAGES (404, 500) --------------------------------------------------------- */ .error-page .static-page-content { display: flex; align-items: center; justify-content: center; min-height: 60vh; } .error-page-content { text-align: center; max-width: 480px; } .error-page-icon { font-size: var(--icon-4xl); color: var(--wallpaper-text-color); margin-bottom: 24px; display: block; } .error-page-content h1 { font-size: var(--text-4xl); font-weight: var(--font-extrabold); margin-bottom: 16px; color: var(--color-text-main); } .error-page-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } @media (max-width: 599px) { .error-page-icon { font-size: var(--icon-3xl); } .error-page-content h1 { font-size: var(--text-2xl); } .error-page-actions { flex-direction: column; } .error-page-actions .hero-btn { width: 100%; text-align: center; } } /* --------------------------------------------------------- SOCIAL LOGIN BUTTONS --------------------------------------------------------- */ .social-login { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-2); } .login-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0; color: var(--color-text-muted); font-size: var(--text-sm); } .login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: rgba(0, 0, 0, 0.1); } .hero-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; color: rgba(28, 25, 23, 0.4); font-size: var(--text-sm); } .hero-divider::before, .hero-divider::after { content: ''; flex: 1; height: 1px; background: rgba(0, 0, 0, 0.1); } /* --------------------------------------------------------- HOW IT WORKS — Mobile responsive --------------------------------------------------------- */ @media (max-width: 899px) { .how-it-works-hero .landing-hero-centered h1 { font-size: var(--text-4xl); } .hiw-step { flex-direction: column; gap: 20px; } .hiw-step-number { width: 48px; height: 48px; font-size: var(--text-xl); } .hiw-step-content h2 { font-size: var(--text-xl); } }