/* Debtster marketing landing — section styles. Recreates the Claude Design "Landing.html" prototype as a static page. Everything is driven off the `--l-*` variables in tokens.css, so the dark theme flips wholesale when is set. Typography: Bricolage Grotesque (display) + Roboto (body). Icons: Material Symbols Rounded via the `.msr` ligature class. */ body { font-family: var(--l-font-body); background: var(--l-page-bg); color: var(--l-ink-2); line-height: 1.55; transition: background var(--ease-quick), color var(--ease-quick); } /* Material Symbols Rounded — ligatures via a real class (mirrors the design). */ .msr { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; display: inline-block; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; font-variant-ligatures: common-ligatures; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variation-settings: 'FILL' 1; } .msr.fill-0 { font-variation-settings: 'FILL' 0; } .section-inner { max-width: 1180px; margin: 0 auto; padding-left: 32px; padding-right: 32px; } /* ── Eyebrow (section label) ──────────────────────────────────────── */ .l-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--l-font-body); font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--l-brand); } .l-eyebrow::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--l-brand); } /* ── Nav ──────────────────────────────────────────────────────────── */ .l-nav { position: sticky; top: 0; z-index: 50; background: var(--l-nav-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--l-line); } .l-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 15px; padding-bottom: 15px; } .l-brand { display: inline-flex; align-items: center; gap: 10px; } .l-brand:hover { text-decoration: none; } .l-brand img { display: block; width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; } .l-brand span { font-family: var(--l-font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--l-ink); } .l-navlinks { display: flex; align-items: center; gap: 30px; } .l-navlinks a { font-size: 15px; font-weight: 500; color: var(--l-ink-2); text-decoration: none; transition: opacity var(--ease-quick); } .l-navlinks a:hover { opacity: 0.7; text-decoration: none; } .l-nav__right { display: flex; align-items: center; gap: 12px; } .l-iconbtn { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--l-line); background: var(--l-panel); color: var(--l-ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: opacity var(--ease-quick); } .l-iconbtn:hover { opacity: 0.8; } .l-iconbtn .msr { font-size: 20px; } .l-navcta { font-size: 15px; font-weight: 700; color: var(--l-on-brand); background: var(--l-brand); text-decoration: none; padding: 10px 20px; border-radius: 12px; box-shadow: 0 8px 18px -8px var(--l-glow); transition: opacity var(--ease-quick); } .l-navcta:hover { opacity: 0.85; text-decoration: none; } /* Language menu */ .l-langmenu { position: relative; } .l-langmenu__btn { height: 38px; padding: 0 11px; border-radius: 11px; border: 1px solid var(--l-line); background: var(--l-panel); color: var(--l-ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-family: var(--l-font-body); font-size: 14px; font-weight: 600; } .l-langmenu__btn .msr { font-size: 19px; } .l-langmenu__btn .l-langmenu__caret { font-size: 18px; color: var(--l-muted); } .l-langmenu__list { position: absolute; top: calc(100% + 8px); right: 0; min-width: 168px; background: var(--l-panel); border: 1px solid var(--l-line); border-radius: 14px; padding: 6px; box-shadow: 0 18px 44px -18px rgba(10, 17, 22, 0.45); z-index: 60; } .l-langmenu__list[hidden] { display: none; } .l-langmenu__opt { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border-radius: 9px; border: none; cursor: pointer; background: transparent; color: var(--l-ink-2); font-family: var(--l-font-body); font-size: 14.5px; font-weight: 500; text-align: left; text-decoration: none; } .l-langmenu__opt:hover { background: var(--l-brand-a06); text-decoration: none; } .l-langmenu__opt .l-langmenu__short { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; opacity: 0.6; } .l-langmenu__opt .msr { font-size: 18px; color: var(--l-brand); display: none; } .l-langmenu__opt[aria-current="true"] { background: var(--l-panel-tint); color: var(--l-brand); font-weight: 700; } .l-langmenu__opt[aria-current="true"] .l-langmenu__short { display: none; } .l-langmenu__opt[aria-current="true"] .msr { display: inline-block; } /* ── Store badges (custom dark pills, matching the design) ────────── */ .l-store-row { display: flex; flex-wrap: wrap; gap: 12px; } .l-store-badge { display: inline-flex; align-items: center; gap: 11px; background: #0c1115; color: #fff; text-decoration: none; border-radius: 13px; padding: 9px 17px 9px 15px; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.55); font-family: var(--l-font-body); transition: transform 0.18s ease; } .l-store-badge:hover { transform: translateY(-2px); text-decoration: none; } .l-store-badge svg { display: block; } .l-store-badge__text { display: flex; flex-direction: column; line-height: 1.15; } .l-store-badge__small { font-size: 10.5px; font-weight: 500; letter-spacing: 0.3px; opacity: 0.85; } .l-store-badge__big { font-size: 17px; font-weight: 700; letter-spacing: 0.2px; margin-top: 1px; } /* ── Phone frame ──────────────────────────────────────────────────── */ .l-phone { --pw: 260px; --pad: 9px; width: var(--pw); padding: var(--pad); background: var(--l-bezel); border-radius: calc(var(--pw) * 0.135 + var(--pad)); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 28px 60px -18px var(--l-glow), 0 12px 24px -12px rgba(0, 0, 0, 0.35); transform: rotate(var(--tilt, 0deg)); flex-shrink: 0; } .l-phone__screen { border-radius: calc(var(--pw) * 0.115); overflow: hidden; background: #0a0a0a; line-height: 0; } .l-phone__screen img { width: 100%; height: auto; display: block; } /* ── Hero ─────────────────────────────────────────────────────────── */ .l-hero { position: relative; overflow: hidden; background: radial-gradient(1100px 600px at 82% -8%, var(--l-hero-radial), transparent 60%), var(--l-page-bg); } .l-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; padding-top: 70px; padding-bottom: 84px; } .l-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; background: var(--l-panel-tint); border: 1px solid var(--l-brand-a25); font-size: 13px; font-weight: 600; color: var(--l-brand); margin-bottom: 22px; } .l-badge .msr { font-size: 17px; } .l-hero__title { margin: 0; font-family: var(--l-font-display); font-size: clamp(40px, 5.4vw, 64px); line-height: 1.02; font-weight: 800; letter-spacing: -0.025em; color: var(--l-ink); text-wrap: balance; } .l-hero__title .accent { color: var(--l-brand); } .l-hero__lead { margin: 24px 0 0; max-width: 480px; font-size: 18px; line-height: 1.6; color: var(--l-ink-2); text-wrap: pretty; } .l-hero__download { margin-top: 32px; } .l-trustrow { margin-top: 18px; display: flex; align-items: center; gap: 18px; font-size: 13.5px; font-weight: 500; color: var(--l-muted); } .l-trustrow span { display: inline-flex; align-items: center; gap: 6px; } .l-trustrow .msr { font-size: 17px; color: var(--l-brand); } .l-hero-art { position: relative; display: flex; justify-content: center; align-items: center; min-height: 560px; } .l-hero-art .l-phone--back { position: absolute; left: 6%; top: 12%; z-index: 1; opacity: 0.96; } .l-hero-art .l-phone--front { position: relative; z-index: 2; margin-left: 90px; margin-top: 30px; } /* ── Generic section ──────────────────────────────────────────────── */ .l-section { background: var(--l-page-bg); } .l-section__pad { padding-top: 92px; padding-bottom: 92px; } .l-section__head { max-width: 620px; } .l-section__head--center { max-width: 640px; margin: 0 auto; text-align: center; } .l-section__head--center .l-eyebrow { justify-content: center; } .l-h2 { margin: 16px 0 0; font-family: var(--l-font-display); font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; color: var(--l-ink); text-wrap: balance; } .l-section__intro { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: var(--l-ink-2); } /* ── Features ─────────────────────────────────────────────────────── */ .l-features { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; } .l-feature { background: var(--l-panel); border: 1px solid var(--l-line); border-radius: 20px; padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 18px 40px -28px var(--l-glow); } .l-feature__icon { width: 50px; height: 50px; border-radius: 14px; background: var(--l-panel-tint); display: inline-flex; align-items: center; justify-content: center; color: var(--l-brand); border: 1px solid var(--l-brand-a25); } .l-feature__icon .msr { font-size: 27px; } .l-feature h3 { margin: 0; font-family: var(--l-font-display); font-size: 20px; font-weight: 700; color: var(--l-ink); letter-spacing: -0.01em; } .l-feature p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--l-ink-2); text-wrap: pretty; } /* ── How it works ─────────────────────────────────────────────────── */ .l-how { background: var(--l-panel-tint); } .l-steps-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; } .l-step { display: flex; flex-direction: column; align-items: center; text-align: center; } .l-step h3 { margin: 26px 0 0; font-family: var(--l-font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--l-ink); } .l-step p { margin: 10px 0 0; max-width: 320px; font-size: 15.5px; line-height: 1.55; color: var(--l-ink-2); text-wrap: pretty; } /* ── Dashboard showcase ───────────────────────────────────────────── */ .l-dashboard__inner { display: grid; grid-template-columns: 1fr 0.85fr; gap: 56px; align-items: center; } .l-dashboard__copy .l-section__intro { max-width: 460px; margin-bottom: 28px; } .l-bullets { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; max-width: 460px; } .l-bullets li { display: flex; align-items: flex-start; gap: 14px; } .l-bullet__icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: var(--l-panel-tint); border: 1px solid var(--l-brand-a18); display: inline-flex; align-items: center; justify-content: center; color: var(--l-brand); } .l-bullet__icon .msr { font-size: 19px; } .l-bullet__title { font-family: var(--l-font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--l-ink); } .l-bullet__body { margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--l-ink-2); } .l-dashboard__art { display: flex; justify-content: center; } /* ── CTA ──────────────────────────────────────────────────────────── */ .l-cta { background: var(--l-page-bg); padding: 20px 32px 96px; } .l-cta__card { max-width: 1100px; margin: 0 auto; border-radius: 30px; padding: 64px 48px; text-align: center; position: relative; overflow: hidden; background: linear-gradient(140deg, var(--l-brand), var(--l-brand-dark)); box-shadow: 0 30px 70px -30px var(--l-glow); } .l-cta__card h2 { margin: 0; font-family: var(--l-font-display); font-size: clamp(30px, 4vw, 48px); line-height: 1.06; font-weight: 800; letter-spacing: -0.02em; color: #fff; text-wrap: balance; } .l-cta__card p { margin: 16px auto 0; max-width: 480px; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, 0.92); } .l-cta__card .l-store-row { margin-top: 30px; justify-content: center; } /* ── Footer ───────────────────────────────────────────────────────── */ .l-footer { background: var(--l-page-bg); border-top: 1px solid var(--l-line); } .l-footer__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding-top: 36px; padding-bottom: 36px; } .l-footer nav { display: flex; gap: 26px; flex-wrap: wrap; } .l-footer nav a { font-size: 14.5px; color: var(--l-ink-2); text-decoration: none; } .l-footer nav a:hover { opacity: 0.7; text-decoration: none; } .l-footer__rights { font-size: 13.5px; color: var(--l-muted); } /* ── FAQ ──────────────────────────────────────────────────────────── */ .l-faq__list { max-width: 820px; margin: 48px auto 0; display: flex; flex-direction: column; gap: 12px; } .l-faq__item { background: var(--l-panel-tint); border: 1px solid var(--l-line); border-radius: var(--radius); padding: 4px 22px; transition: border-color var(--ease-quick), background var(--ease-quick); } .l-faq__item[open] { border-color: var(--l-brand-a25); } .l-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; padding: 18px 0; } /* Suppress the native disclosure triangle on every engine (we draw our own .l-faq__chev). display:flex above already removes it in Chromium; these cover Safari/old-Chrome and Firefox/standard respectively. */ .l-faq__q::-webkit-details-marker { display: none; } .l-faq__q::marker { content: ""; } .l-faq__q > h2, .l-faq__q > h3 { font-family: var(--l-font-display); font-size: 18px; font-weight: 600; color: var(--l-ink); line-height: 1.35; margin: 0; } .l-faq__chev { flex: none; color: var(--l-brand); font-size: 24px; transition: transform var(--ease-quick); } .l-faq__item[open] .l-faq__chev { transform: rotate(180deg); } .l-faq__a { font-size: 16px; line-height: 1.6; color: var(--l-ink-2); padding: 0 0 20px; max-width: 68ch; } /* ── FAQ page (dedicated //faq) ─────────────────────────────── */ .l-crumbs { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--l-muted); margin-bottom: 22px; } .l-crumbs a { color: var(--l-ink-2); text-decoration: none; } .l-crumbs a:hover { text-decoration: underline; } .l-crumbs .msr { font-size: 18px; } .l-faqpage__head { max-width: 820px; margin-bottom: 40px; } /* Left-align the list with the page heading (the landing centres it instead). */ .l-faqpage .l-faq__list { margin-left: 0; margin-right: 0; } .l-faqpage__back { margin-top: 36px; } .l-faqpage__back a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--l-brand-dark); text-decoration: none; } .l-faqpage__back a:hover { text-decoration: underline; } /* ── Responsive ───────────────────────────────────────────────────── */ @media (max-width: 920px) { .l-hero-grid { grid-template-columns: 1fr; gap: 8px; } .l-hero-art { min-height: 480px; margin-top: 10px; } .l-dashboard__inner { grid-template-columns: 1fr; gap: 36px; } .l-steps-grid { grid-template-columns: 1fr; gap: 56px; } .l-navlinks { display: none; } } @media (max-width: 560px) { .section-inner { padding-left: 20px; padding-right: 20px; } .l-hero-art { transform: scale(0.86); } .l-section__pad { padding-top: 64px; padding-bottom: 64px; } .l-cta__card { padding: 48px 28px; } .l-nav__inner .l-navcta { display: none; } }