/* ============================================================ Lexeme launch page — page-scoped styles. Loads only on /lexeme/ via {{#contentFor "head"}} in custom-lexeme.hbs. Every rule is scoped under .lex-page or .page-lexeme so this file can never bleed into the rest of love-church.com. Direction B aesthetic — Lexeme's parchment/ink world. When a user clicks "Go to Lexeme" they land on a visually continuous surface. ============================================================ */ @font-face { font-family: "EzraSIL"; src: url("../fonts/EzraSIL-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; /* Hebrew + Hebrew Presentation Forms — restricts download invocation to when actual Hebrew code-points appear. Browsers don't fetch the file until a glyph in this range is requested by the layout engine. */ unicode-range: U+0590-05FF, U+FB1D-FB4F; } /* ============================================================ Tokens — scoped, NOT bound to :root. ============================================================ */ .lex-page { --lex-cream: #f2efe4; /* matches Lexeme app light-mode bg */ --lex-cream-warm: #ede8d8; --lex-ink: #1e1e1e; /* matches Lexeme foreground */ --lex-ink-soft: #3a3633; --lex-ink-soft-faint: rgba(58, 54, 51, .35); /* --lex-ink-soft @ 35% — Learn-more underline */ --lex-deep: #1a1614; /* matches Lexeme dark-mode bg */ --lex-gold: #C9A961; /* sandstone accent */ --lex-gold-bright: #D9BC78; --lex-gold-deep: #9F8543; --lex-rule: #d8d2bf; --lex-display: "Literata", "Iowan Old Style", Georgia, serif; --lex-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --lex-hebrew: "EzraSIL", "Frank Ruhl Libre", "Times New Roman", serif; --lex-greek: "Cardo", "Times New Roman", serif; --lex-ease: cubic-bezier(.22, 1, .36, 1); background: var(--lex-cream); color: var(--lex-ink); font-family: var(--lex-body); font-size: 17px; line-height: 1.6; /* Belt-and-braces safety: prevent any internal element with intrinsic content width (videos at width="1280") from pushing the page wider than the viewport on narrow windows. The grid min-width:0 below is the structural fix; this is the visible guardrail. */ overflow-x: hidden; } /* Grid-children min-width fix. Default `min-width: auto` on grid items means each track refuses to shrink below its intrinsic content size. Videos with width="1280" attrs THEN force the 7fr cell to 1280px, which blows the layout out past the viewport on narrow windows. Explicit min-width: 0 lets each cell shrink to its grid-assigned track width. */ .lex-feature-2col > *, .lex-feature-2col--reverse > * { min-width: 0; } /* ============================================================ Force nav to its solid (on-light) state from first paint. Default nav is transparent navy over dark covers (.hero, .post-cover, etc.) — over our parchment hero it would render as a darker top band that fights the cream. Ghost emits `page-lexeme` via {{body_class}}; the preview HTML sets data-page-lexeme on directly. ============================================================ */ .page-lexeme .nav, body[data-page-lexeme] .nav { background: rgba(242, 239, 228, .92); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--lex-rule); } .page-lexeme .nav .brand, .page-lexeme .nav .nav-links > li > a, .page-lexeme .nav .nav-dropdown-toggle, .page-lexeme .nav .nav-search, .page-lexeme .nav .nav-burger, body[data-page-lexeme] .nav .brand, body[data-page-lexeme] .nav .nav-links > li > a, body[data-page-lexeme] .nav .nav-dropdown-toggle, body[data-page-lexeme] .nav .nav-search, body[data-page-lexeme] .nav .nav-burger { color: #1e1e1e; } /* ============================================================ Section 1 — Hero ============================================================ */ .lex-hero { padding: 168px 24px 76px; text-align: center; position: relative; isolation: isolate; /* subtle parchment grain via radial vignette — anchors the hero against the flat cream below. Pure CSS, no image asset. */ background: radial-gradient(ellipse at top, rgba(201, 169, 97, .08) 0%, transparent 60%), var(--lex-cream); } .lex-hero-inner { max-width: 880px; margin: 0 auto; } .lex-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--lex-body); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--lex-gold-deep); margin-bottom: 32px; } .lex-ornament { font-family: var(--lex-display); color: var(--lex-gold); font-size: 18px; line-height: 1; } .lex-hero-title { font-family: var(--lex-display); font-weight: 400; font-size: clamp(44px, 7.2vw, 96px); line-height: 1.04; letter-spacing: -.018em; color: var(--lex-ink); margin: 0 0 36px; } .lex-hero-title em { font-style: italic; font-weight: 400; color: var(--lex-gold-deep); } .lex-lede { font-family: var(--lex-display); font-weight: 400; font-size: clamp(18px, 1.9vw, 22px); line-height: 1.55; color: var(--lex-ink-soft); margin: 0 auto 40px; max-width: 660px; } .lex-hebrew { font-family: var(--lex-hebrew); font-size: 1.18em; direction: rtl; unicode-bidi: isolate; color: var(--lex-ink); margin: 0 2px; } .lex-greek { font-family: var(--lex-greek); font-style: italic; font-size: 1.06em; color: var(--lex-ink); margin: 0 2px; } .lex-cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-bottom: 18px; } .lex-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 26px; font-family: var(--lex-body); font-size: 16px; font-weight: 600; letter-spacing: -.005em; text-decoration: none; border-radius: 2px; border: 1px solid transparent; cursor: pointer; transition: background .22s var(--lex-ease), color .22s var(--lex-ease), border-color .22s var(--lex-ease), transform .22s var(--lex-ease); min-height: 52px; } .lex-btn-primary { background: var(--lex-ink); color: var(--lex-cream); border-color: var(--lex-ink); } .lex-btn-primary:hover { background: var(--lex-deep); border-color: var(--lex-deep); } .lex-btn-ghost { background: transparent; color: var(--lex-ink); border-color: var(--lex-ink); } .lex-btn-ghost:hover { background: var(--lex-ink); color: var(--lex-cream); } .lex-arrow { display: inline-block; transition: transform .25s var(--lex-ease); font-family: var(--lex-body); } .lex-btn:hover .lex-arrow { transform: translateX(4px); } /* Keyboard focus: branded gold ring on interactive controls, so keyboard users get a focus indicator that matches the design system rather than the UA default. :focus-visible keeps it off mouse clicks. */ .lex-btn:focus-visible, .lex-btn-final:focus-visible, .lex-learn-more:focus-visible { outline: 2px solid var(--lex-gold); outline-offset: 3px; } .lex-install-hint { font-family: var(--lex-display); font-style: italic; font-size: 14px; color: var(--lex-ink-soft); opacity: .72; margin: 0 auto 18px; max-width: 520px; } /* Tertiary "Learn more" — italic Literata text link with thin underline, sits below the install hint. Visually subordinate to the two CTA buttons; for visitors who want context before clicking through. */ .lex-learn-more { display: inline-flex; align-items: center; gap: 6px; font-family: var(--lex-display); font-style: italic; font-size: 16px; color: var(--lex-ink-soft); text-decoration: none; border-bottom: 1px solid var(--lex-ink-soft-faint); padding-bottom: 2px; margin: 0 auto 64px; transition: color .22s var(--lex-ease), border-color .22s var(--lex-ease); } .lex-learn-more:hover { color: var(--lex-ink); border-bottom-color: var(--lex-ink); } .lex-learn-more:hover .lex-arrow { transform: translateX(3px); } /* Hero demo — static device-frame mock-up (Genesis 1 lexicon). */ .lex-hero-demo { max-width: 720px; margin: 0 auto; } .lex-figcap { font-family: var(--lex-display); font-style: italic; font-size: 15px; color: var(--lex-ink-soft); margin-top: 18px; text-align: center; } .lex-device { background: #fff; border: 1px solid var(--lex-rule); border-radius: 12px; box-shadow: 0 1px 2px rgba(30, 30, 30, .04), 0 22px 60px rgba(30, 30, 30, .14); overflow: hidden; } .lex-device-bar { display: flex; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--lex-rule); background: var(--lex-cream-warm); } .lex-device-mark { font-family: var(--lex-display); font-weight: 500; font-size: 14px; color: var(--lex-ink); letter-spacing: -.01em; } .lex-device-screen { padding: 32px 36px 40px; background: var(--lex-cream); text-align: left; } /* ============================================================ Section 3 — LIVE embed. The real Lexeme app in an iframe inside the device frame, loaded lazily (loading="lazy") so it costs nothing on first paint. By the time the visitor scrolls here it's live and fully interactive: tap a word for the lexicon, switch day/night with the app's own toggle. Requires lexeme.love-church.com to allow framing from love-church.com (CSP frame-ancestors) — see docs/lexeme-embed-header-change-REQUEST-2026-05-29.md. ============================================================ */ .lex-device-bar { justify-content: space-between; } .lex-device-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--lex-body); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lex-gold-deep); } .lex-device-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lex-gold); animation: lex-live-pulse 2.6s var(--lex-ease) infinite; } @keyframes lex-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(201, 169, 97, .55); } 70% { box-shadow: 0 0 0 7px rgba(201, 169, 97, 0); } 100% { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0); } } .lex-device-screen--embed { padding: 0; background: var(--lex-cream); line-height: 0; } /* The iframe renders Lexeme at a fixed DESKTOP logical width (1440px) so the full "Lexeme by Love Church" brand + 3-column layout show, then scales down to fit the column. --lex-embed-scale is set by lexeme.js on load + resize. The container's aspect-ratio matches the logical 1440x900 so its height tracks the scaled frame exactly (no letterboxing). */ .lex-embed { position: relative; width: 100%; background: var(--lex-cream); } /* Always-visible path to the live reader, below the embed. Guarantees a way through even if the iframe shows the browser's own block/error page (which no CSS can override; a frame-ancestors-blocked frame paints the browser's own opaque error document, so a behind-the-iframe underlay cannot show). */ .lex-embed-open { display: block; text-align: center; margin-top: 12px; font-family: var(--lex-body); font-size: 14px; color: var(--lex-gold-deep); text-decoration: none; } .lex-embed-open:hover, .lex-embed-open:focus-visible { color: var(--lex-ink); text-decoration: underline; text-underline-offset: 3px; } .lex-embed-frame { width: 1440px; height: 900px; border: 0; display: block; background: var(--lex-cream); /* zoom (NOT transform: scale) re-renders the iframe content at the final size, so text stays crisp. transform: scale rasterizes at the 1440px logical size and then scales the bitmap down -> blurry. zoom factor = column width / 1440, set by lexeme.js via --lex-embed-scale. */ zoom: var(--lex-embed-scale, 0.6); } @media (prefers-reduced-motion: reduce) { .lex-device-live-dot { animation: none; } } /* Once the reader collapses to one column (<=900px), render Lexeme's own responsive layout at native width (no zoom). Above 640px the section is still single-column, so the scaled-desktop path (zoom: --lex-embed-scale, fallback 0.6 = 864px) overflowed the viewport on the right before the JS scale applied. Native width:100% removes that fragile path entirely. */ @media (max-width: 900px) { .lex-embed-frame { width: 100%; height: 80vh; zoom: 1; } /* Grow the tertiary link to a >=44px tap target (CLAUDE.md). Extra height sits on top so the underline stays tight to the text; no desktop change. */ .lex-learn-more { padding-top: 16px; } } .lex-screen-header { font-family: var(--lex-body); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--lex-gold-deep); margin-bottom: 16px; } .lex-screen-verse { font-family: var(--lex-display); font-size: clamp(18px, 2vw, 22px); line-height: 1.55; color: var(--lex-ink); margin-bottom: 26px; } .lex-verse-num { font-family: var(--lex-body); font-size: 12px; font-weight: 600; vertical-align: super; margin-right: 8px; color: var(--lex-gold-deep); } .lex-word-active { font-style: normal; background: rgba(201, 169, 97, .22); padding: 0 5px; border-bottom: 2px solid var(--lex-gold); color: var(--lex-ink); cursor: pointer; } .lex-screen-lexicon { background: var(--lex-cream-warm); border-left: 3px solid var(--lex-gold); padding: 18px 22px; } .lex-strong-code { font-family: var(--lex-body); font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--lex-gold-deep); margin-right: 10px; } .lex-strong-hebrew { font-family: var(--lex-hebrew); font-size: 22px; color: var(--lex-ink); direction: rtl; unicode-bidi: isolate; } .lex-lex-trans { font-family: var(--lex-display); font-style: italic; font-size: 14px; color: var(--lex-ink-soft); margin-top: 6px; line-height: 1.45; } /* ============================================================ Section 2 — Three-pillar value ============================================================ */ .lex-pillars { padding: 84px 24px; background: var(--lex-cream-warm); border-top: 1px solid var(--lex-rule); border-bottom: 1px solid var(--lex-rule); } .lex-pillars-inner { max-width: 1080px; margin: 0 auto; } .lex-section-title { font-family: var(--lex-display); font-weight: 400; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.1; letter-spacing: -.01em; text-align: center; color: var(--lex-ink); margin: 0 0 64px; } .lex-section-title em { font-style: italic; color: var(--lex-gold-deep); } .lex-pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; } .lex-pillar { text-align: left; } .lex-pillar-num { font-family: var(--lex-display); font-style: italic; font-size: 28px; color: var(--lex-gold); margin-bottom: 16px; letter-spacing: .05em; } .lex-pillar h3 { font-family: var(--lex-display); font-weight: 500; font-size: 24px; line-height: 1.25; letter-spacing: -.005em; margin: 0 0 12px; color: var(--lex-ink); } .lex-pillar p { font-family: var(--lex-body); font-size: 16px; line-height: 1.6; color: var(--lex-ink-soft); margin: 0; } /* ============================================================ Feature deep-dives. Each: eyebrow + h2 + body + demo. The reader (§3) is a LIVE embed of lexeme.love-church.com; the "more ways to study" grid (§4), parallel strip (§5) and calendar (§6) are CSS-only static mock-ups. ============================================================ */ .lex-feature { padding: 90px 24px; background: var(--lex-cream); } .lex-feature--warm { background: var(--lex-cream-warm); border-top: 1px solid var(--lex-rule); border-bottom: 1px solid var(--lex-rule); } .lex-feature-inner { max-width: 1200px; margin: 0 auto; } /* Section 3 (Reader) widens out and goes 2-column: copy LEFT, the big live embed RIGHT. Wide inner so the scaled-down desktop app stays large. */ .lex-feature#reader .lex-feature-inner { max-width: 1640px; } .lex-feature#reader .lex-feature-2col { grid-template-columns: 340px 1fr; gap: 56px; align-items: center; } .lex-feature#reader .lex-feat-demo { width: 100%; max-width: none; } .lex-feat-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--lex-body); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--lex-gold-deep); margin: 0 0 16px; } .lex-feat-title { font-family: var(--lex-display); font-weight: 400; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.08; letter-spacing: -.012em; color: var(--lex-ink); margin: 0 0 24px; } .lex-feat-title em { font-style: italic; color: var(--lex-gold-deep); } .lex-feat-title em .lex-greek-line { color: var(--lex-ink); } .lex-feat-body { font-family: var(--lex-body); font-size: 17px; line-height: 1.65; color: var(--lex-ink-soft); margin: 0; max-width: 480px; } /* Two-column copy/demo layout (sections 3 and 6) */ .lex-feature-2col { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: center; } .lex-feature-2col--reverse { grid-template-columns: 7fr 5fr; } /* ----- Section 4: Parallel-translations mock ----- */ .lex-parallel { background: #fff; border: 1px solid var(--lex-rule); border-radius: 12px; box-shadow: 0 1px 2px rgba(30, 30, 30, .04), 0 22px 60px rgba(30, 30, 30, .12); overflow: hidden; } /* Translation selector strip — sells the headline's "Four translations." KJV + BSB are the two shown side-by-side (active); WEB + LEB are the other two available. Reads as a real multi-pane toolbar, not two columns. */ .lex-parallel-tabs { display: flex; justify-content: center; gap: 8px; padding: 12px 16px; background: var(--lex-cream-warm); border-bottom: 1px solid var(--lex-rule); } .lex-parallel-tab { font-family: var(--lex-body); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; color: var(--lex-ink-soft); border: 1px solid var(--lex-rule); background: #fff; } .lex-parallel-tab--active { color: var(--lex-deep); background: var(--lex-gold); border-color: var(--lex-gold); } .lex-parallel-cols { display: grid; grid-template-columns: 1fr 1fr; } .lex-parallel-col { padding: 28px 26px; background: var(--lex-cream); text-align: center; } .lex-parallel-col + .lex-parallel-col { border-left: 1px solid var(--lex-rule); } .lex-parallel-header { font-family: var(--lex-body); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--lex-gold-deep); margin-bottom: 4px; } .lex-parallel-ref { font-family: var(--lex-body); font-size: 12px; color: var(--lex-ink-soft); margin-bottom: 14px; letter-spacing: .04em; } .lex-parallel-verse { font-family: var(--lex-display); font-size: 17px; line-height: 1.55; color: var(--lex-ink); } .lex-parallel-divider { text-align: center; margin: 16px 0 0; font-family: var(--lex-display); font-style: italic; font-size: 13px; color: var(--lex-ink-soft); opacity: .72; } .lex-sync-dot { display: inline-block; width: 6px; height: 6px; background: var(--lex-gold); border-radius: 50%; margin: 0 8px 1px; vertical-align: middle; } /* ----- Section 6: Calendar mock ----- */ .lex-calendar-mock { background: #fff; border: 1px solid var(--lex-rule); border-radius: 12px; box-shadow: 0 1px 2px rgba(30, 30, 30, .04), 0 22px 60px rgba(30, 30, 30, .12); overflow: hidden; text-align: left; } .lex-cal-header { padding: 18px 22px; background: var(--lex-cream); border-bottom: 1px solid var(--lex-rule); } .lex-cal-month { font-family: var(--lex-display); font-size: 16px; font-weight: 500; color: var(--lex-ink); letter-spacing: -.005em; } .lex-cal-month em { font-style: italic; color: var(--lex-gold-deep); } .lex-cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--lex-rule); } .lex-cal-day { background: var(--lex-cream); padding: 14px 6px 18px; text-align: center; position: relative; min-height: 78px; } .lex-cal-dow { font-family: var(--lex-body); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--lex-ink-soft); margin-bottom: 6px; } .lex-cal-num { font-family: var(--lex-display); font-size: 20px; color: var(--lex-ink); line-height: 1; } .lex-cal-day--today .lex-cal-num { color: var(--lex-gold-deep); font-weight: 500; } .lex-cal-day--today::after { content: ""; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background: var(--lex-gold-deep); border-radius: 50%; } .lex-cal-day--sabbath { background: var(--lex-gold); } .lex-cal-day--sabbath .lex-cal-dow, .lex-cal-day--sabbath .lex-cal-num, .lex-cal-day--sabbath .lex-cal-marker { color: var(--lex-deep); } .lex-cal-marker { font-family: var(--lex-display); font-style: italic; font-size: 10px; margin-top: 4px; letter-spacing: .04em; } .lex-cal-feast { padding: 22px; background: var(--lex-cream-warm); border-top: 1px solid var(--lex-rule); } .lex-cal-feast-eyebrow { font-family: var(--lex-body); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--lex-gold-deep); margin-bottom: 10px; } /* Appointed-times list: a new moon AND a feast, so the demo shows all three things the copy promises (Sabbaths in the week row above, plus new moons and feasts here). Absolute dates only — no "in N days" countdown that would rot while the page sits live. */ .lex-cal-event { display: flex; align-items: center; gap: 12px; padding: 11px 0; } .lex-cal-event + .lex-cal-event { border-top: 1px solid var(--lex-rule); } .lex-cal-event-icon { flex-shrink: 0; display: inline-flex; color: var(--lex-gold-deep); } .lex-cal-event-name { flex: 1; min-width: 0; font-family: var(--lex-display); font-size: 18px; color: var(--lex-ink); line-height: 1.3; } .lex-cal-event-name em { font-style: italic; color: var(--lex-gold-deep); } .lex-cal-event-when { flex-shrink: 0; font-family: var(--lex-body); font-size: 12px; color: var(--lex-ink-soft); letter-spacing: .02em; } /* ============================================================ Section 4 — "Also in Lexeme" (four more features). Cross-references, reading plans, Love Church teaching, concordance search. 2x2 card grid with gold icon chips — distinct from the device mocks so the card section reads as its own thing. ============================================================ */ .lex-more { border-top: 1px solid var(--lex-rule); text-align: center; } .lex-more-intro { max-width: 680px; margin: 0 auto 56px; } .lex-more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; text-align: left; } .lex-more-card { background: #fff; border: 1px solid var(--lex-rule); border-radius: 12px; padding: 32px 28px; box-shadow: 0 1px 2px rgba(30, 30, 30, .04), 0 16px 40px rgba(30, 30, 30, .07); } .lex-more-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(201, 169, 97, .14); color: var(--lex-gold-deep); margin-bottom: 20px; } .lex-more-icon svg { width: 24px; height: 24px; display: block; } .lex-more-card h3 { font-family: var(--lex-display); font-weight: 500; font-size: 21px; letter-spacing: -.005em; color: var(--lex-ink); margin: 0 0 10px; } .lex-more-card p { font-family: var(--lex-body); font-size: 15px; line-height: 1.6; color: var(--lex-ink-soft); margin: 0; } @media (max-width: 1024px) { .lex-more-grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; gap: 24px; } } @media (max-width: 768px) { .lex-more-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .lex-more-card { padding: 22px 18px; } .lex-more-card h3 { font-size: 18px; } .lex-more-icon { width: 42px; height: 42px; margin-bottom: 14px; } } /* ============================================================ Section 7 — Final CTA ============================================================ */ .lex-final-cta { padding: 96px 24px; background: var(--lex-deep); color: var(--lex-cream); text-align: center; } .lex-final-cta-inner { max-width: 640px; margin: 0 auto; } .lex-final-title { font-family: var(--lex-display); font-weight: 400; font-size: clamp(48px, 6.4vw, 84px); line-height: 1.05; letter-spacing: -.018em; margin: 0 0 16px; color: var(--lex-cream); } .lex-final-title em { font-style: italic; color: var(--lex-gold-bright); } .lex-final-sub { font-family: var(--lex-display); font-style: italic; font-size: 20px; color: rgba(242, 239, 228, .72); margin: 0 0 40px; } .lex-btn-final { background: var(--lex-gold); color: var(--lex-deep); border-color: var(--lex-gold); padding: 18px 30px; font-size: 17px; } .lex-btn-final:hover { background: var(--lex-gold-bright); border-color: var(--lex-gold-bright); } /* ============================================================ Reveal animation — overrides the global .reveal on .lex-page only. Slightly longer + gentler easing so the parchment surface feels patient. prefers-reduced-motion guard added here (the global .reveal lacks one). ============================================================ */ .lex-page .reveal { transition: opacity 1.1s var(--lex-ease), transform 1.1s var(--lex-ease); } @media (prefers-reduced-motion: reduce) { .lex-page .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ============================================================ Scroll-offset for in-page anchors (matches sticky nav height) ============================================================ */ .lex-page section[id] { scroll-margin-top: 96px; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 900px) { /* Feature sections collapse to a single column. Demo always renders first on mobile so the visual hook lands before the copy. */ .lex-feature { padding: 80px 20px; } .lex-feature-2col, .lex-feature-2col--reverse, .lex-feature#reader .lex-feature-2col { grid-template-columns: 1fr; gap: 40px; } .lex-feature-2col .lex-feat-copy { order: 2; } .lex-feature-2col .lex-feat-demo { order: 1; } .lex-feature-2col--reverse .lex-feat-copy { order: 2; } .lex-feature-2col--reverse .lex-feat-demo { order: 1; } /* #reader is the exception: put "The reader" copy ABOVE the live embed on mobile (the embed is tall, so leading with the heading reads better). */ .lex-feature#reader .lex-feat-copy { order: 1; } .lex-feature#reader .lex-feat-demo { order: 2; } /* Reset the UA

margin (1em 40px). #reader's demo forces width:100%, so the 40px inline margin pushed its right edge (the "LIVE" badge) past the column and the overflow:hidden ancestor clipped it. Full-width on mobile. */ .lex-feat-demo { margin: 0; } .lex-feat-body { max-width: none; } } @media (max-width: 768px) { .lex-hero { padding: 128px 20px 64px; } .lex-cta-row { flex-direction: column; align-items: stretch; } .lex-cta-row .lex-btn { width: 100%; } .lex-pillars { padding: 72px 20px; } .lex-pillar-grid { grid-template-columns: 1fr; gap: 40px; } .lex-final-cta { padding: 88px 20px; } .lex-device-screen { padding: 22px 22px 28px; } } @media (max-width: 640px) { /* Parallel cards stack vertically; calendar tightens. */ .lex-parallel-cols { grid-template-columns: 1fr; } .lex-parallel-col + .lex-parallel-col { border-left: 0; border-top: 1px solid var(--lex-rule); } .lex-cal-num { font-size: 16px; } .lex-cal-day { padding: 10px 3px 14px; min-height: 64px; } .lex-cal-marker { display: none; } .lex-cal-feast { padding: 18px; } }