/* * The marketing pages' furniture: hero, stats, feature list, comparison table * and pricing. * * Split out because none of it is reachable from the dashboard. Keeping it * beside the buttons and cards made a single file where two thirds of the rules * could never apply to the screen you were debugging. * * Loaded after theme.css and before components.css. The three sets use disjoint * class namespaces, so the order is about readability rather than cascade, but * it is fixed in every page's so it stays predictable. */ /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { position: relative; padding: 108px 0 84px; overflow: hidden; } .hero::before { content: ""; position: absolute; top: -320px; left: 50%; width: 1100px; height: 700px; transform: translateX(-50%); background: radial-gradient(closest-side, var(--accent-glow), transparent 72%); opacity: 0.5; pointer-events: none; } .hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; opacity: 0.16; mask-image: radial-gradient(closest-side at 50% 30%, #000 30%, transparent 78%); pointer-events: none; } .hero .wrap { position: relative; z-index: 1; } .hero-lead { font-size: clamp(1.05rem, 1.9vw, 1.28rem); color: var(--text-dim); max-width: 640px; margin: 20px auto 32px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .gradient-text { background: linear-gradient(100deg, #fff 20%, var(--accent) 78%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* -------------------------------------------------------------------------- Stats -------------------------------------------------------------------------- */ .stat { text-align: center; padding: 20px 12px; } .stat-value { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; } .stat-label { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; } /* -------------------------------------------------------------------------- Feature list -------------------------------------------------------------------------- */ .feature-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); display: grid; place-items: center; font-size: 18px; margin-bottom: 14px; } .tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .tick-list li { position: relative; padding-left: 26px; color: var(--text-dim); font-size: 14px; } .tick-list li::before { content: ""; position: absolute; left: 0; top: 0.52em; width: 14px; height: 8px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); } .tick-list li strong { color: var(--text); font-weight: 580; } /* -------------------------------------------------------------------------- Comparison table -------------------------------------------------------------------------- */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.matrix { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; } table.matrix th, table.matrix td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; } table.matrix thead th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); font-weight: 620; border-bottom-color: var(--line-strong); } table.matrix tbody tr:hover { background: var(--panel); } table.matrix td.center-cell { text-align: center; } .yes { color: var(--good); font-weight: 700; } .no { color: var(--text-faint); } /* -------------------------------------------------------------------------- Pricing -------------------------------------------------------------------------- */ .price-card { display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: var(--radius-lg); background: var(--panel); border: 1px solid var(--line); position: relative; } .price-card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 22px 60px rgba(88, 101, 242, 0.16); } .price-card .amount { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1; } .price-card .per { font-size: 14px; color: var(--text-dim); font-weight: 500; } .ribbon { position: absolute; top: -11px; left: 28px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 680; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; }