/* ============================================================ Ease & Empire — Landing System (dark-first) Layered on top of the design system's styles.css (tokens + base + fonts). This file owns the marketing-page layout for the homepage rebuild + Recall System sales page. Dark-only: is set in the markup. ============================================================ */ /* ---- Page shell ---------------------------------------------------- */ html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--body); overflow-x: hidden; } .wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; } .wrap--narrow { max-width: 860px; } section { position: relative; } .band { padding: clamp(64px, 9vw, 128px) 0; } .band--tight { padding: clamp(48px, 6vw, 84px) 0; } .band--alt { background: var(--bg-alt); } .band--hair { border-top: 1px solid var(--border); } .eyebrow { display: inline-block; font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--gold-deep); margin: 0 0 20px; } .serif { font-family: var(--serif); font-weight: 500; letter-spacing: var(--tracking-tight); } .lead { font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem); color: var(--body); line-height: 1.6; } .muted { color: var(--body-muted); } .center { text-align: center; } .center p, .center .lead { margin-left: auto; margin-right: auto; } h1.hero-h { font-family: var(--serif); font-weight: 500; font-size: clamp(2.5rem, 4.4vw + 1rem, 4.35rem); line-height: 1.03; letter-spacing: -0.022em; color: var(--heading); margin: 0 0 22px; text-wrap: balance; } h2.sec-h { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 2.4vw + 1rem, 3rem); line-height: 1.06; letter-spacing: -0.018em; color: var(--heading); margin: 0 0 18px; text-wrap: balance; } h3 { color: var(--heading); } /* ---- Buttons ------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.55em; font-family: var(--sans); font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none; padding: 15px 26px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .btn .arrow { transition: transform var(--dur-fast) var(--ease); } .btn:hover .arrow { transform: translateX(3px); } /* Primary — the dominant buy button */ .btn--buy { background: var(--gold); color: var(--on-gold); box-shadow: 0 6px 22px rgba(193, 161, 107, 0.28); } .btn--buy:hover { background: var(--gold-deep); color: var(--on-gold); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(193, 161, 107, 0.4); } .btn--buy:active { transform: translateY(0); } /* Extra-large hero buy */ .btn--xl { font-size: 1.15rem; padding: 20px 34px; } /* Ghost / secondary */ .btn--ghost { background: transparent; color: var(--heading); border-color: var(--border); } .btn--ghost:hover { border-color: var(--gold); color: var(--gold); } .btn--block { display: flex; width: 100%; justify-content: center; } .buy-note { font-size: 0.85rem; color: var(--body-muted); margin: 14px 0 0; } .buy-note strong { color: var(--body); } /* Plain gold text link with arrow */ .tlink { font-family: var(--sans); font-weight: 500; color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(193,161,107,0.35); padding-bottom: 1px; transition: border-color var(--dur-fast) var(--ease); } .tlink:hover { color: var(--gold-deep); border-color: var(--gold); } /* ---- Header -------------------------------------------------------- */ .hdr { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--border); } .hdr__in { display: flex; align-items: center; justify-content: space-between; height: 66px; } .hdr__logo { color: var(--heading); text-decoration: none; display: flex; align-items: center; } .hdr__logo svg { height: 26px; width: auto; } .hdr__nav { display: flex; align-items: center; gap: 26px; flex-wrap: nowrap; } .hdr__nav a.navlink { font-family: var(--sans); font-size: 0.95rem; font-weight: 500; color: var(--body); text-decoration: none; white-space: nowrap; transition: color var(--dur-fast) var(--ease); } .hdr__cta { white-space: nowrap; } .hdr__nav a.navlink:hover { color: var(--gold); } .hdr__cta { padding: 11px 18px; font-size: 0.92rem; } @media (max-width: 900px) { .hdr__nav .navlink { display: none; } } /* ---- Hero ---------------------------------------------------------- */ .hero { padding: clamp(52px, 7vw, 104px) 0 clamp(56px, 7vw, 96px); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle at 1px 1px, rgba(193,161,107,0.10) 1px, transparent 0); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 30%, transparent 75%); } .hero .wrap { position: relative; z-index: 1; } .hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .hero__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 30px; } .hero__second { font-family: var(--sans); font-size: 0.98rem; } .hero__sub { max-width: 46ch; } .trust-row { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--body-muted); } .trust-row .dot { color: var(--gold); } @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; gap: 44px; } .hero__media { order: -1; } } /* ---- Product preview mock ----------------------------------------- */ .mock { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; } .mock__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 70%, var(--bg)); } .mock__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); } .mock__title { margin-left: 8px; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--body-muted); } .mock__body { padding: 18px 18px 20px; } .mock__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 14px; padding: 13px 4px; border-bottom: 1px solid var(--border); } .mock__row:last-child { border-bottom: 0; } .mock__name { font-family: var(--sans); font-weight: 600; color: var(--heading); font-size: 0.95rem; } .mock__sub { font-size: 0.8rem; color: var(--body-muted); margin-top: 2px; } .pill { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; padding: 5px 11px; border-radius: var(--radius-pill); white-space: nowrap; border: 1px solid transparent; } .pill--over { background: rgba(193,161,107,0.16); color: var(--gold-deep); border-color: rgba(193,161,107,0.4); } .pill--soon { background: transparent; color: var(--body); border-color: var(--border); } .pill--ok { background: transparent; color: var(--body-muted); border-color: var(--border); } .mock__foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 70%, var(--bg)); font-family: var(--sans); font-size: 0.82rem; color: var(--body-muted); } .mock__foot strong { color: var(--gold-deep); font-weight: 600; } .mock-tag { display: inline-block; margin-top: 12px; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--body-muted); } /* message-generator mock (recall system) */ .mock__field { padding: 12px 4px; border-bottom: 1px solid var(--border); } .mock__label { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--body-muted); margin-bottom: 6px; } .mock__val { font-family: var(--sans); color: var(--heading); font-size: 0.92rem; } .mock__msg { margin-top: 14px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 60%, var(--bg)); } .mock__msg .who { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 6px; } .mock__msg p { margin: 0; font-size: 0.9rem; color: var(--body); max-width: none; } /* ---- Problem strip ------------------------------------------------- */ .prob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; } .prob { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 28px 26px; transition: border-color var(--dur-fast) var(--ease); } .prob:hover { border-color: var(--gold); } .prob .n { font-family: var(--serif); font-size: 1.6rem; color: var(--gold); line-height: 1; margin-bottom: 14px; display: block; } .prob h3 { font-family: var(--sans); font-size: 1.02rem; font-weight: 600; margin: 0 0 10px; line-height: 1.35; } .prob p { margin: 0; font-size: 0.94rem; color: var(--body-muted); max-width: none; } @media (max-width: 820px) { .prob-grid { grid-template-columns: 1fr; } } /* ---- Tier 1 buy block --------------------------------------------- */ .buys { display: grid; grid-template-columns: 1.08fr 1fr; gap: 26px; margin-top: 48px; align-items: stretch; } .buycard { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); padding: 36px 32px 34px; border: 1px solid var(--border); background: var(--surface); transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .buycard:hover { transform: translateY(-3px); } .buycard--primary { border-color: rgba(193,161,107,0.55); background: color-mix(in srgb, var(--gold) 6%, var(--surface)); box-shadow: 0 10px 40px rgba(0,0,0,0.34); } .buycard--primary:hover { border-color: var(--gold); } .buycard__badge { position: absolute; top: -13px; left: 32px; font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-gold); background: var(--gold); padding: 6px 14px; border-radius: var(--radius-pill); } .buycard__meta { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--body-muted); margin-bottom: 14px; } .buycard h3 { font-family: var(--serif); font-weight: 500; font-size: 1.65rem; letter-spacing: -0.01em; margin: 0 0 12px; line-height: 1.12; } .buycard__price { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 18px; } .buycard__price .amt { font-family: var(--serif); font-weight: 500; font-size: 3rem; color: var(--heading); line-height: 1; letter-spacing: -0.02em; } .buycard__price .per { font-family: var(--sans); font-size: 0.9rem; color: var(--body-muted); } .buycard__desc { color: var(--body); margin: 0 0 22px; max-width: none; font-size: 0.98rem; } .buycard__list { list-style: none; padding: 0; margin: 0 0 26px; max-width: none; } .buycard__list li { position: relative; padding-left: 26px; margin-bottom: 11px; font-size: 0.94rem; color: var(--body); } .buycard__list li::before { content: "→"; position: absolute; left: 0; color: var(--gold); font-weight: 600; } .buycard__cta { margin-top: auto; } .buycard__fine { text-align: center; font-size: 0.8rem; color: var(--body-muted); margin: 12px 0 0; } @media (max-width: 860px) { .buys { grid-template-columns: 1fr; } } /* ---- Tier 1 ladder (4 connected rungs) ---------------------------- */ .ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 52px; position: relative; align-items: stretch; } /* the gold progression line running through the step nodes */ .ladder::before { content: ""; position: absolute; left: 8%; right: 8%; top: 15px; height: 1px; background: linear-gradient(90deg, var(--gold) 0%, rgba(193,161,107,0.35) 100%); z-index: 0; } .rung { position: relative; z-index: 1; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 40px 22px 24px; transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .rung:hover { transform: translateY(-3px); border-color: var(--gold); } .rung__node { position: absolute; top: -14px; left: 22px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 0.82rem; font-weight: 700; background: var(--bg-alt); color: var(--body-muted); border: 1px solid var(--border); } .rung__step { font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--body-muted); margin-bottom: 8px; } .rung h3 { font-family: var(--serif); font-weight: 500; font-size: 1.28rem; line-height: 1.14; letter-spacing: -0.01em; margin: 0 0 10px; } .rung__price { display: flex; align-items: baseline; gap: 7px; margin: 0 0 12px; } .rung__price .amt { font-family: var(--serif); font-weight: 500; font-size: 2.1rem; color: var(--heading); line-height: 1; letter-spacing: -0.02em; } .rung__price .per { font-family: var(--sans); font-size: 0.76rem; color: var(--body-muted); } .rung p.rung__desc { margin: 0 0 20px; font-size: 0.9rem; color: var(--body-muted); max-width: none; line-height: 1.5; } .rung__cta { margin-top: auto; } .rung__cta .btn { padding: 12px 16px; font-size: 0.9rem; width: 100%; justify-content: center; } .rung__more { display: block; text-align: center; margin-top: 10px; font-size: 0.82rem; } /* the featured first rung — the obvious first click */ .rung--start { border-color: rgba(193,161,107,0.6); background: color-mix(in srgb, var(--gold) 7%, var(--surface)); box-shadow: 0 10px 40px rgba(0,0,0,0.34); } .rung--start:hover { border-color: var(--gold); } .rung--start .rung__node { background: var(--gold); color: var(--on-gold); border-color: var(--gold); } .rung--start .rung__badge { display: inline-block; font-family: var(--sans); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-gold); background: var(--gold); padding: 4px 10px; border-radius: var(--radius-pill); margin-bottom: 12px; } /* subsequent rungs: buy button present but visually lighter than the start */ .rung--next .rung__cta .btn { background: transparent; color: var(--gold); border-color: rgba(193,161,107,0.5); box-shadow: none; } .rung--next .rung__cta .btn:hover { background: var(--gold); color: var(--on-gold); border-color: var(--gold); transform: translateY(-2px); } .ladder-note { text-align: center; margin-top: 26px; font-size: 0.9rem; color: var(--body-muted); } .ladder-note .tlink { margin-left: 4px; } @media (max-width: 940px) { .ladder { grid-template-columns: 1fr 1fr; gap: 18px; } .ladder::before { display: none; } } @media (max-width: 560px) { .ladder { grid-template-columns: 1fr; } } /* big-number readout for calculator mocks */ .mock__big { padding: 20px 4px 8px; text-align: center; } .mock__big .label { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--body-muted); } .mock__big .num { font-family: var(--serif); font-weight: 500; font-size: 3rem; color: var(--gold); line-height: 1.05; letter-spacing: -0.02em; margin: 6px 0 2px; } .mock__big .sub { font-size: 0.82rem; color: var(--body-muted); } .mock__split { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 6px; } .mock__split > div { background: var(--surface); padding: 16px 12px; text-align: center; } .mock__split .num { font-family: var(--serif); font-weight: 500; font-size: 1.9rem; color: var(--heading); line-height: 1; margin: 4px 0 2px; } .mock__split .num.gold { color: var(--gold); } .mock__split .label { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--body-muted); } .mock__split .sub { font-size: 0.72rem; color: var(--body-muted); margin-top: 3px; } /* ---- Proof / stats ------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 8px; } .stat { border-top: 2px solid var(--gold); padding-top: 20px; } .stat .fig { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 3vw, 3.1rem); color: var(--heading); line-height: 1; letter-spacing: -0.02em; } .stat p { margin: 12px 0 0; font-size: 0.94rem; color: var(--body-muted); max-width: 34ch; } @media (max-width: 820px) { .stats { grid-template-columns: 1fr; gap: 30px; } } /* founder line */ .founder { display: flex; gap: 22px; align-items: center; margin-top: 52px; padding: 26px 28px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); } .founder img { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--border); } .founder p { margin: 0; font-size: 0.98rem; color: var(--body); max-width: 72ch; } .founder strong { color: var(--heading); } @media (max-width: 620px) { .founder { flex-direction: column; align-items: flex-start; text-align: left; } } /* ---- Tier 2 quiet bridge ------------------------------------------ */ .bridge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: 30px 34px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); } .bridge__txt { max-width: 52ch; } .bridge__txt h3 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.01em; margin: 0 0 8px; } .bridge__txt p { margin: 0; font-size: 0.94rem; color: var(--body-muted); max-width: none; } .bridge__links { display: flex; flex-direction: column; gap: 10px; } .bridge__row { display: flex; align-items: baseline; gap: 12px; font-size: 0.95rem; } .bridge__row .price { font-family: var(--serif); color: var(--gold-deep); font-size: 1.15rem; min-width: 74px; } /* ---- Generic content grids (recall system) ------------------------ */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; } .grid-2--center { align-items: center; } @media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; gap: 40px; } } .feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 36px; } .feat { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 26px 26px; } .feat h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; margin: 0 0 9px; } .feat p { margin: 0; font-size: 0.93rem; color: var(--body-muted); max-width: none; } @media (max-width: 720px) { .feat-grid { grid-template-columns: 1fr; } } .checklist { list-style: none; padding: 0; margin: 0; max-width: none; } .checklist li { position: relative; padding-left: 28px; margin-bottom: 14px; color: var(--body); } .checklist li::before { content: "→"; position: absolute; left: 0; color: var(--gold); font-weight: 600; } .incl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-top: 34px; background: var(--border); } .incl__cell { background: var(--surface); padding: 24px 24px; } .incl__cell strong { display: block; font-family: var(--sans); color: var(--heading); font-weight: 600; margin-bottom: 6px; } .incl__cell p { margin: 0; font-size: 0.92rem; color: var(--body-muted); max-width: none; } .incl__cell--gold { background: color-mix(in srgb, var(--gold) 8%, var(--surface)); } @media (max-width: 640px) { .incl { grid-template-columns: 1fr; } } .notfor { margin-top: 24px; padding: 22px 24px; border: 1px dashed var(--border); border-radius: var(--radius-lg); background: transparent; } .notfor h3 { font-family: var(--sans); font-size: 0.95rem; font-weight: 600; margin: 0 0 8px; color: var(--body-muted); } .notfor p { margin: 0; font-size: 0.93rem; color: var(--body-muted); max-width: none; } .notfor a { color: var(--gold); } /* final cta band */ .finalcta { text-align: center; } .finalcta h2 { margin-left: auto; margin-right: auto; max-width: 20ch; } .finalcta p { margin-left: auto; margin-right: auto; } .finalcta p.lead { max-width: 54ch; } /* ---- Footer -------------------------------------------------------- */ .ftr { border-top: 1px solid var(--border); padding: 56px 0 40px; background: var(--bg-alt); } .ftr__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; } .ftr__about p { font-size: 0.92rem; color: var(--body-muted); max-width: 34ch; } .ftr__logo { display: inline-block; margin-bottom: 16px; color: var(--heading); } .ftr__logo svg { height: 24px; width: auto; } .ftr h4 { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--body-muted); font-weight: 600; margin: 0 0 16px; } .ftr ul { list-style: none; padding: 0; margin: 0; } .ftr li { margin-bottom: 10px; } .ftr a { color: var(--body); text-decoration: none; font-size: 0.92rem; transition: color var(--dur-fast) var(--ease); } .ftr a:hover { color: var(--gold); } .ftr__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--body-muted); } .ftr__bottom a { color: var(--body-muted); } @media (max-width: 780px) { .ftr__grid { grid-template-columns: 1fr 1fr; gap: 30px; } } @media (max-width: 480px) { .ftr__grid { grid-template-columns: 1fr; } } /* utility */ .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 16px; top: 12px; z-index: 100; background: var(--gold); color: var(--on-gold); padding: 10px 16px; border-radius: var(--radius); }