/* Stratège Crédit / Debt Strategist - nativlab.app/strategecredit/ Tokens transcribed from the app's colorsets (dark mode only). Do not eyeball new colours here: take them from the app. */ :root { --canvas: #0b0b0d; --canvas-alt: #0d0d10; --surface: #16161a; --hairline: rgba(255, 255, 255, 0.07); --hairline-strong: rgba(255, 255, 255, 0.1); --tint: #f0b87e; --tint-hover: #f8d6ae; --on-tint: #1a1509; --positive: #30d158; --negative: #ff453a; --text: #f5f2ee; --text-2: rgba(245, 242, 238, 0.62); /* The app's tertiary is .45. On #0B0B0D that lands at 4.2:1, under AA for text below 18.66px, so every tertiary *label* uses .58 (6.3:1) instead. --text-decorative keeps the original value for non-text use. */ --text-3: rgba(245, 242, 238, 0.58); --text-decorative: rgba(245, 242, 238, 0.45); --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif; --shell: 1120px; --shell-narrow: 820px; --gutter: 32px; } * { box-sizing: border-box; } /* .halo is 1300px wide and centred, so it bleeds past a narrow viewport. The clip has to sit on too: it owns the scrollport. */ html { overflow-x: clip; } body { margin: 0; /* Containing block for .halo. */ position: relative; overflow-x: clip; background: var(--canvas); color: var(--text); font: 400 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; } a { color: var(--tint); text-decoration: none; } a:hover { color: var(--tint-hover); } :focus-visible { outline: 2px solid var(--tint); outline-offset: 3px; border-radius: 4px; } img { max-width: 100%; } h1, h2, h3 { font-family: var(--font-display); } /* ---------- layout ---------- */ .shell { max-width: var(--shell); margin: 0 auto; padding: 88px var(--gutter); } .shell--narrow { max-width: var(--shell-narrow); } .band { border-top: 1px solid var(--hairline); background: var(--canvas-alt); } /* The amber backdrop of the app. First element in , so it sits behind the header and the hero and is painted before everything that follows it. */ .halo { position: absolute; top: -260px; left: 50%; transform: translateX(-50%); width: 1300px; height: 760px; background: radial-gradient( closest-side, rgba(240, 184, 126, 0.2), rgba(240, 184, 126, 0) ); pointer-events: none; } /* ---------- header ---------- */ .site-header { position: relative; max-width: var(--shell); margin: 0 auto; padding: 22px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .site-header--narrow { max-width: var(--shell-narrow); } .header-frame { border-bottom: 1px solid var(--hairline); } .brand { display: flex; align-items: center; gap: 12px; color: var(--text); } .brand:hover { color: var(--text); } .brand img { width: 38px; height: 38px; border-radius: 11px; display: block; } .brand--sm img { width: 34px; height: 34px; border-radius: 10px; } .brand span { font: 600 16.5px/1 var(--font-display); letter-spacing: -0.01em; } .brand--sm span { font-size: 16px; } .nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .nav a { font: 500 14.5px/1 var(--font); color: var(--text-2); } .nav a:hover { color: var(--text); } .langs { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--hairline-strong); border-radius: 999px; } .langs > * { padding: 5px 11px; border-radius: 999px; font: 600 12.5px/1 var(--font); } .langs span { background: rgba(240, 184, 126, 0.16); color: var(--tint); } .langs a { color: var(--text-3); } .langs a:hover { color: var(--text); } /* ---------- hero ---------- */ .hero { position: relative; max-width: var(--shell); margin: 0 auto; padding: 56px var(--gutter) 90px; display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 60px; align-items: center; } .badge { display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(240, 184, 126, 0.14); color: var(--tint); font: 600 12.5px/1.4 var(--font); } h1 { margin: 20px 0 0; font: 700 clamp(38px, 5vw, 60px) / 1.04 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; } .hero p.lede { margin: 22px 0 0; max-width: 33em; font: 400 18px/1.6 var(--font); color: rgba(245, 242, 238, 0.66); text-wrap: pretty; } .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; } .btn { display: inline-flex; align-items: center; padding: 14px 24px; border-radius: 14px; font: 600 16px/1 var(--font); } .btn--primary { background: var(--tint); color: var(--on-tint); } a.btn--primary:hover { background: var(--tint-hover); color: var(--on-tint); } .btn--ghost { padding: 14px 22px; border: 1px solid rgba(255, 255, 255, 0.14); color: var(--text); } a.btn--ghost:hover { color: var(--text); border-color: var(--tint); } .fineprint { margin: 26px 0 0; font: 500 13.5px/1.5 var(--font); color: rgba(245, 242, 238, 0.6); } /* ---------- device bezel ---------- */ .shot { display: flex; justify-content: center; } .bezel { width: 322px; max-width: 100%; aspect-ratio: 1206 / 2622; border: 9px solid #1e1e22; border-radius: 48px; overflow: hidden; background: #f6f3ef; box-shadow: 0 44px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06); } .bezel--sm { width: 290px; aspect-ratio: 1206 / 2472; border-radius: 44px; box-shadow: 0 34px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06); } .bezel img { width: 100%; height: auto; display: block; } /* ---------- section furniture ---------- */ .eyebrow { margin: 0 0 14px; font: 600 12px/1 var(--font); letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-3); } h2 { margin: 0 0 16px; font: 700 clamp(30px, 3.4vw, 42px) / 1.08 var(--font-display); letter-spacing: -0.02em; scroll-margin-top: 32px; } h2.h2--tight { margin-bottom: 40px; } h2.h2--sm { font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1; } h2.h2--xs { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; margin-bottom: 14px; } .section-lede { margin: 0 0 44px; max-width: 44em; font: 400 17px/1.62 var(--font); color: var(--text-2); text-wrap: pretty; } .section-lede--tight { margin-bottom: 40px; } .section-lede--flush { margin-bottom: 0; max-width: 34em; } /* ---------- cards ---------- */ .grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid--wide { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid--split { gap: 40px; align-items: start; } .grid--stack { gap: 12px; grid-template-columns: 1fr; } .card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 20px; padding: 26px 24px; } .card h3 { margin: 16px 0 8px; font: 600 20px/1.2 var(--font-display); letter-spacing: -0.01em; } .card p { margin: 0; font: 400 15.5px/1.6 var(--font); color: rgba(245, 242, 238, 0.6); text-wrap: pretty; } .card--sm { border-radius: 16px; padding: 20px 22px; } .card--sm p:first-child { font: 600 16px/1.3 var(--font); color: var(--text); } .card--sm p + p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: rgba(245, 242, 238, 0.6); } .pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font: 600 11.5px/1.4 var(--font); } .pill--free { background: rgba(48, 209, 88, 0.13); color: var(--positive); } .pill--full { background: rgba(240, 184, 126, 0.14); color: var(--tint); } /* ---------- simulator split ---------- */ .split { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; align-items: center; } .split h3 { margin: 0 0 12px; font: 700 26px/1.2 var(--font-display); letter-spacing: -0.02em; } .split p { margin: 0; max-width: 34em; font: 400 16.5px/1.62 var(--font); color: var(--text-2); text-wrap: pretty; } /* ---------- snowball / avalanche ---------- */ .method { padding: 28px 26px; } .method__head { display: flex; align-items: center; gap: 12px; } .method__mark { width: 30px; height: 30px; border-radius: 999px; background: rgba(240, 184, 126, 0.15); color: var(--tint); display: flex; align-items: center; justify-content: center; font: 700 15px/1 var(--font); flex: 0 0 auto; } .method h3 { margin: 0; font: 600 21px/1.2 var(--font-display); letter-spacing: normal; } .method p { margin: 14px 0 0; color: var(--text-2); } .method p.method__sub { font: 500 15px/1.5 var(--font); color: var(--text-3); } .callout { margin-top: 20px; border-color: rgba(240, 184, 126, 0.22); } .callout p:first-child { margin: 0; font: 600 19px/1.35 var(--font-display); color: var(--tint); } .callout p + p { margin-top: 12px; max-width: 52em; color: var(--text-2); } /* ---------- pricing ---------- */ .price-card { border-radius: 24px; padding: 34px 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 36px; align-items: start; } .price-card > div > p { margin: 0; } .price { font: 700 clamp(40px, 4.4vw, 54px) / 1 var(--font-display); letter-spacing: -0.03em; color: var(--tint); } .price-note { margin-top: 12px !important; font: 500 16px/1.5 var(--font); color: var(--text-2); } .price-note--faint { margin-top: 18px !important; font: 400 14.5px/1.55 var(--font); color: var(--text-3); } .col-label { margin-bottom: 12px !important; font: 600 12px/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase; } .col-label--free { color: var(--positive); } .col-label--full { color: var(--tint); } .col-list { display: grid; gap: 9px; font: 400 15.5px/1.4 var(--font); color: rgba(245, 242, 238, 0.68); } /* ---------- FAQ ---------- */ .faq { display: grid; gap: 10px; max-width: 820px; } .faq details { background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: 18px 22px; } .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 600 16.5px/1.4 var(--font); color: var(--text); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; flex: 0 0 auto; font: 400 22px/1 var(--font); color: var(--tint); transition: transform 0.2s; } .faq details[open] summary::after { transform: rotate(45deg); } .faq p { margin: 12px 0 0; font: 400 15.5px/1.6 var(--font); color: var(--text-2); } /* ---------- contact ---------- */ .contact { padding: 80px var(--gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; align-items: center; } .contact p { margin: 0; max-width: 34em; font: 400 16.5px/1.62 var(--font); color: var(--text-2); } .contact__actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .contact__actions a:not(.btn) { font: 500 15px/1.4 var(--font); } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--hairline); } .site-footer > div { max-width: var(--shell); margin: 0 auto; padding: 34px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; } .site-footer--narrow > div { max-width: var(--shell-narrow); padding: 30px var(--gutter); gap: 16px; } .site-footer__brand { display: flex; align-items: center; gap: 12px; } .site-footer__brand img { width: 28px; height: 28px; border-radius: 8px; display: block; } .site-footer span { font: 500 14px/1 var(--font); color: rgba(245, 242, 238, 0.6); } .footer-links { display: flex; flex-wrap: wrap; gap: 22px; font: 500 14px/1 var(--font); } /* ---------- legal page ---------- */ .legal { max-width: var(--shell-narrow); margin: 0 auto; padding: 64px var(--gutter) 96px; } .legal h1 { margin: 0 0 12px; font-size: clamp(32px, 4vw, 44px); line-height: 1.08; } .legal h2 { font-size: 28px; line-height: 1.15; } .legal .updated { margin: 0 0 44px; font: 400 17px/1.62 var(--font); color: var(--text-2); } .legal > p { margin: 0 0 18px; font: 400 16.5px/1.65 var(--font); color: rgba(245, 242, 238, 0.66); text-wrap: pretty; } .legal .grid { margin-bottom: 22px; } /* Amber on prose does not clear 3:1 against the text around it, so links inside a paragraph carry an underline as well. */ .legal p a { text-decoration: underline; text-underline-offset: 2px; } .legal .note { margin: 0 0 56px; font: 400 15.5px/1.6 var(--font); color: var(--text-3); text-wrap: pretty; } /* A note that sits right under the meta card, before another note. */ .legal .note--tight { margin-bottom: 22px; } .meta-card { border-radius: 16px; padding: 22px 24px; margin-bottom: 16px; display: grid; gap: 14px; } .meta-card p { margin: 0; } .meta-label { font: 600 12px/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); } .meta-value { margin-top: 7px !important; font: 400 16px/1.55 var(--font); color: rgba(245, 242, 238, 0.72); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }