/* KuyaYos — pricing page styles * Loaded after styles.css. Reuses tokens from :root (--brand, --action, etc.) * and existing component classes (.section, .container, .eyebrow, .btn, * .steps, .step, .cta-repeat). Adds page-specific components prefixed * with .pricing-. */ /* ===== Intro hero (dark blue, mirrors homepage hero) ================== */ .pricing-intro { position: relative; background: var(--brand); color: #fff; padding: 3.5rem 0 4rem; overflow: hidden; isolation: isolate; } .pricing-intro::before { /* warm orange glow upper-right, matching .hero::before */ content: ""; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px; background: radial-gradient(closest-side, rgba(232, 119, 34, 0.28), transparent 75%); z-index: -1; } .pricing-intro::after { /* deeper teal lower-left, matching .hero::after */ content: ""; position: absolute; bottom: -300px; left: -200px; width: 700px; height: 700px; background: radial-gradient(closest-side, rgba(10, 47, 66, 0.6), transparent 70%); z-index: -1; } .pricing-intro h1 { color: #fff; letter-spacing: -0.025em; font-weight: 900; margin-bottom: 1rem; } .pricing-intro .section__lede { color: rgba(255, 255, 255, 0.88); font-size: 1.125rem; max-width: 60ch; margin-bottom: 1.5rem; } @media (min-width: 980px) { .pricing-intro { padding: 5rem 0 5.5rem; } } /* Disclaimer callout — sits on the dark-blue intro background, so it * uses translucent white with an orange accent rule rather than the * cream-on-light treatment used elsewhere. */ .pricing-callout { margin: 1.5rem 0 0; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-left: 4px solid var(--action); border-radius: var(--radius); padding: 1.25rem 1.4rem; color: #fff; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .pricing-callout__title { font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 0.6rem; letter-spacing: -0.01em; } .pricing-callout__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; } .pricing-callout__list li { position: relative; padding-left: 1.4rem; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.88); line-height: 1.5; } .pricing-callout__list li::before { content: ""; position: absolute; left: 0.1rem; top: 0.55rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--action); } /* ===== Trade picker (button ribbon) =================================== */ .pricing-picker-section { padding-bottom: 1.5rem; } .pricing-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 0; padding: 0; } .pricing-tab { font-family: inherit; font-size: 0.9375rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; padding: 0.6rem 1.1rem; background: var(--paper); border: 1px solid var(--slate-200); border-radius: var(--radius-pill); color: var(--brand-900); cursor: pointer; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; } .pricing-tab:hover { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand); transform: translateY(-1px); } .pricing-tab:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 2px; } .pricing-tab[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-sm); transform: none; } .pricing-tab[aria-pressed="true"]:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; transform: none; } /* When JS is active, .pricing-js is set on by the inline-head script * in /js/pricing.js. This hides every trade SECTION by default and only * shows the one tagged .is-active. The selector is scoped to
so * the trade ribbon buttons (which share the same data-trade attribute as * their target section) aren't hidden by the same rule. Without JS the * class is never added, so all trade sections remain visible. */ html.pricing-js section[data-trade] { display: none; } html.pricing-js section[data-trade].is-active { display: block; } /* ===== Per-trade section header ======================================= */ .pricing-trade { /* Anchor offset accounts for the sticky site header so deep links land * below it instead of being hidden under it. */ scroll-margin-top: 84px; } .pricing-trade__head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.75rem; } .pricing-trade__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 56px; height: 56px; border-radius: 14px; background: var(--brand-50); color: var(--brand); } .pricing-trade__head h2 { margin: 0 0 0.25rem; } .pricing-trade__lede { margin: 0; color: var(--ink-soft); font-size: 1rem; max-width: 60ch; } /* ===== Tier cards ===================================================== */ .pricing-tiers { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0 0 1.75rem; padding: 0; list-style: none; } .pricing-tier { background: var(--paper); border: 1px solid var(--slate-200); border-radius: var(--radius); padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .pricing-tier:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--slate-300); } .pricing-tier--featured { border-color: var(--action); box-shadow: 0 12px 32px -16px rgba(232, 119, 34, 0.35); position: relative; } .pricing-tier--featured::before { content: "Most common"; position: absolute; top: -0.7rem; left: 1.25rem; background: var(--action); color: #fff; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.65rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); } .pricing-tier__name { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); margin: 0; } .pricing-tier__price { display: flex; flex-direction: column; gap: 0.15rem; margin: 0 0 0.25rem; } .pricing-tier__price-amount { font-size: 1.4rem; font-weight: 900; color: var(--brand-900); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; } .pricing-tier__price-unit { font-size: 0.8125rem; color: var(--slate-500); font-weight: 600; } .pricing-tier__desc { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; } .pricing-tier__list { margin: 0.25rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; } .pricing-tier__list li { position: relative; padding-left: 1.35rem; font-size: 0.9375rem; color: var(--ink); line-height: 1.45; } .pricing-tier__list li::before { content: ""; position: absolute; left: 0.15rem; top: 0.5rem; width: 0.45rem; height: 0.45rem; border-right: 2px solid var(--action); border-bottom: 2px solid var(--action); transform: rotate(45deg); } @media (min-width: 720px) { .pricing-tiers { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } } /* ===== Common-tasks list (per trade) ================================= */ .pricing-tasks { background: var(--paper); border: 1px solid var(--slate-200); border-radius: var(--radius); padding: 1.25rem 1.4rem 1.4rem; } /* When the trade section is on a muted (white) background, make the tasks * card pop with a subtle tint instead so it doesn't disappear. */ .section--muted .pricing-tasks { background: var(--bg); } .pricing-tasks__title { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); margin: 0 0 0.85rem; } .pricing-tasks__list { margin: 0; padding: 0; list-style: none; } .pricing-tasks__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--slate-100); } .pricing-tasks__row:last-child { border-bottom: 0; padding-bottom: 0.25rem; } .pricing-tasks__row:first-child { padding-top: 0.25rem; } .pricing-tasks__name { color: var(--ink); font-weight: 600; font-size: 0.9375rem; } .pricing-tasks__price { color: var(--brand-800); font-weight: 700; font-size: 0.9375rem; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } @media (max-width: 480px) { .pricing-tasks__row { /* On very narrow screens, let the price wrap below the task name * rather than crushing both into one line. */ flex-direction: column; gap: 0.15rem; align-items: flex-start; } .pricing-tasks__price { color: var(--brand); } } /* ===== Print: keep it simple, no shadows / transforms ================= */ @media print { .pricing-jump, .cta-repeat, .site-header { display: none !important; } .pricing-tier, .pricing-tasks, .pricing-callout { box-shadow: none !important; border: 1px solid #999 !important; break-inside: avoid; } .pricing-trade { break-inside: avoid; } } /* ===== Reduced motion ================================================= */ @media (prefers-reduced-motion: reduce) { .pricing-tier, .pricing-jump a { transition: none !important; } .pricing-tier:hover, .pricing-jump a:hover { transform: none !important; } }