/* ============================================================ marketing.css — FX Reels public pages (home, pricing, about, contact) Extends the app's design tokens from site.css. All classes are namespaced .mk-* so nothing collides with app or nav styles. Theming: these pages support a light and a dark theme. The element carries data-theme="light" | "dark" (set by a tiny script in partials/public-nav.php, saved in localStorage under "fxr-theme"). Light is the default. ============================================================ */ :root { color-scheme: dark; --mk-maxw: 1180px; --mk-radius: 14px; --mk-amber-soft: rgba(240, 180, 41, 0.10); --mk-blue-soft: rgba(61, 157, 240, 0.10); /* theme-dependent tokens — dark defaults */ --mk-heading: #ffffff; --mk-lead: #aeb6c9; --mk-navlink: #9aa4bd; --mk-nav-bg: rgba(13, 15, 20, .82); --mk-dot: rgba(232, 234, 240, .06); --mk-blob: rgba(240, 180, 41, .12); --mk-blob2: rgba(61, 157, 240, .12); --mk-nope: #4b5468; --mk-btn-bg: #f0b429; /* primary button stays amber in both themes */ --mk-btn-bg-h: #ffc63d; --mk-btn-ink: #1a1400; --mk-shadow-lg: 0 30px 70px rgba(0, 0, 0, .55); --mk-shadow-sm: 0 10px 30px rgba(0, 0, 0, .35); } /* ── Light theme ─────────────────────────────────────────────── White background, near-black type. Overrides both the site.css tokens and the mk-* tokens above. Only marketing pages load this file, so the app dashboard keeps its dark look untouched. */ :root[data-theme="light"] { color-scheme: light; --bg: #ffffff; --surface: #ffffff; /* no grey cards — white on white, separated by black borders */ --surface2: #f4f4f4; --surface3: #ededed; --border: #0d0f14; /* firm black lines */ --border2: #0d0f14; --accent: #946400; /* darker amber — readable on white */ --accent2: #1668c7; --text: #000000; --muted: #3d3d3d; --green: #0d7f72; --red: #cf3f3b; --amber-glow: rgba(240, 180, 41, 0.20); --blue-glow: rgba(61, 157, 240, 0.12); --mk-amber-soft: rgba(240, 180, 41, .18); --mk-blue-soft: rgba(61, 157, 240, .10); --mk-heading: #000000; --mk-lead: #1f1f1f; --mk-navlink: #000000; --mk-nav-bg: rgba(255, 255, 255, .92); --mk-dot: rgba(0, 0, 0, .13); --mk-blob: rgba(240, 180, 41, .26); --mk-blob2: rgba(61, 157, 240, .16); --mk-nope: #8a8a8a; /* hard offset shadows — the "firm" look */ --mk-shadow-lg: 12px 12px 0 #0d0f14; --mk-shadow-sm: 5px 5px 0 #0d0f14; } /* ── Base ──────────────────────────────────────────────────── */ .mk-page { background: var(--bg); color: var(--text); overflow-x: hidden; } .mk-wrap { max-width: var(--mk-maxw); margin: 0 auto; padding: 0 24px; } /* Section rhythm — one rule owns vertical spacing to avoid collisions */ .mk-section { padding: clamp(64px, 9vw, 112px) 0; } .mk-section--tight { padding: clamp(44px, 6vw, 72px) 0; } .mk-section + .mk-section { border-top: 1px solid var(--border); } /* ── Type ──────────────────────────────────────────────────── */ .mk-eyebrow { font-family: 'DM Mono', ui-monospace, monospace; font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; } .mk-eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--accent); opacity: .6; flex: none; } .mk-eyebrow--center { justify-content: center; } .mk-h1 { font-size: clamp(2.1rem, 5.4vw, 3.5rem); font-weight: 800; line-height: 1.06; letter-spacing: -.028em; color: var(--mk-heading); margin: 0 0 18px; } .mk-h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 800; line-height: 1.15; letter-spacing: -.022em; color: var(--mk-heading); margin: 0 0 14px; } .mk-h3 { font-size: 1.06rem; font-weight: 700; color: var(--mk-heading); margin: 0 0 8px; letter-spacing: -.01em; } .mk-lead { font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.65; color: var(--mk-lead); margin: 0 0 12px; max-width: 60ch; } .mk-body { font-size: .95rem; line-height: 1.7; color: var(--muted); margin: 0 0 10px; } .mk-center { text-align: center; } .mk-center .mk-lead { margin-left: auto; margin-right: auto; } /* Highlighted word in headlines — amber swipe under the text */ .mk-mark { position: relative; white-space: nowrap; z-index: 0; } .mk-mark::after { content: ''; position: absolute; left: -.04em; right: -.04em; bottom: .05em; height: .3em; background: var(--mk-btn-bg); opacity: .4; border-radius: .12em; z-index: -1; transform-origin: left center; animation: mk-mark-in .7s cubic-bezier(.22, 1, .36, 1) .35s backwards; } @keyframes mk-mark-in { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ── Buttons ───────────────────────────────────────────────── */ .mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 24px; border-radius: 10px; font-family: 'DM Sans', sans-serif; font-size: .93rem; font-weight: 700; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; white-space: nowrap; } .mk-btn:hover { text-decoration: none; transform: translateY(-1px); } .mk-btn:active { transform: translateY(0); } .mk-btn--primary { background: var(--mk-btn-bg); color: var(--mk-btn-ink); position: relative; overflow: hidden; box-shadow: 0 6px 22px rgba(240, 180, 41, .28); } .mk-btn--primary:hover { background: var(--mk-btn-bg-h); box-shadow: 0 10px 28px rgba(240, 180, 41, .38); } /* sheen sweep on hover */ .mk-btn--primary::after { content: ''; position: absolute; top: 0; left: -80%; width: 45%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); transition: left .45s ease; pointer-events: none; } .mk-btn--primary:hover::after { left: 135%; } .mk-btn--ghost { background: transparent; color: var(--text); border-color: var(--border2); } .mk-btn--ghost:hover { border-color: var(--accent); color: var(--accent); } .mk-btn--block { width: 100%; } .mk-btn--sm { padding: 9px 16px; font-size: .84rem; border-radius: 8px; } .mk-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .mk-cta-note { font-size: .8rem; color: var(--muted); margin-top: 14px; } /* ── Public nav ────────────────────────────────────────────── */ .mk-nav { position: sticky; top: 0; z-index: 60; background: var(--mk-nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .mk-nav-in { max-width: var(--mk-maxw); margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 26px; } .mk-nav-logo { display: flex; align-items: center; gap: 10px; flex: none; } .mk-nav-logo img { height: 30px; width: auto; display: block; } .mk-nav-links { display: flex; align-items: center; gap: 24px; margin-left: 8px; } .mk-nav-links a { font-size: .89rem; font-weight: 600; color: var(--mk-navlink); text-decoration: none; transition: color .15s ease; } .mk-nav-links a:hover { color: var(--mk-heading); text-decoration: none; } .mk-nav-links a[aria-current="page"] { color: var(--accent); } .mk-nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; } .mk-nav-signin { font-size: .89rem; font-weight: 600; color: var(--mk-navlink); text-decoration: none; padding: 8px 4px; } .mk-nav-signin:hover { color: var(--mk-heading); text-decoration: none; } .mk-nav-toggle { display: none; background: none; border: 1px solid var(--border2); border-radius: 8px; width: 38px; height: 34px; cursor: pointer; color: var(--text); font-size: 1rem; align-items: center; justify-content: center; } /* Logo swap — the white logo for dark surfaces, the dark one for light. !important because the footer injects its own `.fxr-foot-logo img` rule. */ .mk-logo--onLight { display: none !important; } :root[data-theme="light"] .mk-logo--onLight { display: block !important; } :root[data-theme="light"] .mk-logo--onDark { display: none !important; } /* Theme toggle (sun / moon) */ .mk-theme-btn { width: 38px; height: 34px; border-radius: 8px; border: 1px solid var(--border2); background: transparent; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s ease, color .15s ease, transform .15s ease; flex: none; } .mk-theme-btn:hover { border-color: var(--accent); color: var(--accent); transform: rotate(12deg); } .mk-theme-btn svg { width: 16px; height: 16px; display: block; } .mk-ic-moon { display: none !important; } :root[data-theme="light"] .mk-ic-moon { display: block !important; } :root[data-theme="light"] .mk-ic-sun { display: none !important; } @media (max-width: 860px) { .mk-nav-links { position: absolute; top: 64px; left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--border); flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 0; display: none; } .mk-nav-links.is-open { display: flex; } .mk-nav-links a { padding: 13px 24px; width: 100%; } .mk-nav-toggle { display: inline-flex; } .mk-nav-signin { display: none; } } /* ── Hero ──────────────────────────────────────────────────── */ .mk-hero { position: relative; padding: clamp(52px, 8vw, 92px) 0 clamp(60px, 8vw, 104px); overflow: hidden; } /* dotted grid + colour tints */ .mk-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(720px 340px at 78% 12%, var(--mk-blue-soft), transparent 70%), radial-gradient(560px 300px at 8% 0%, var(--mk-amber-soft), transparent 68%), radial-gradient(circle at 1px 1px, var(--mk-dot) 1px, transparent 1.6px); background-size: auto, auto, 26px 26px; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); pointer-events: none; } /* drifting aurora blobs */ .mk-hero::after { content: ''; position: absolute; width: 560px; height: 560px; left: 58%; top: -180px; border-radius: 50%; background: radial-gradient(closest-side at 35% 35%, var(--mk-blob), transparent 72%), radial-gradient(closest-side at 70% 65%, var(--mk-blob2), transparent 70%); filter: blur(42px); animation: mk-drift 18s ease-in-out infinite alternate; pointer-events: none; } @keyframes mk-drift { from { transform: translate(-50px, 0) scale(1); } to { transform: translate(70px, 50px) scale(1.18); } } .mk-hero-grid { position: relative; display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(32px, 5vw, 64px); align-items: center; } @media (max-width: 940px) { .mk-hero-grid { grid-template-columns: 1fr; } } /* ── Pair ticker strip ─────────────────────────────────────── */ .mk-ticker { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); position: relative; } .mk-ticker::before, .mk-ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 1; pointer-events: none; } .mk-ticker::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); } .mk-ticker::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); } .mk-ticker-track { display: flex; width: max-content; animation: mk-scroll 42s linear infinite; } .mk-ticker:hover .mk-ticker-track { animation-play-state: paused; } @keyframes mk-scroll { to { transform: translateX(-50%); } } .mk-ticker-set { display: flex; align-items: center; gap: 36px; padding: 12px 18px; } .mk-tick { display: inline-flex; align-items: center; gap: 8px; font-family: 'DM Mono', monospace; font-size: .74rem; font-weight: 500; color: var(--muted); letter-spacing: .06em; white-space: nowrap; } .mk-tick i { font-style: normal; font-size: .6rem; } .mk-tick i.up { color: var(--green); } .mk-tick i.dn { color: var(--red); } /* ── Signature: the recording panel ────────────────────────── */ /* Deliberately stays dark in both themes — it mimics the app UI. */ .mk-rec-panel { --surface: #161a23; --surface2: #1e2330; --border: #2a3045; --border2: #363d4a; --text: #e8eaf0; --muted: #6b7592; background: linear-gradient(180deg, #161a23 0%, #12151d 100%); border: 1px solid #2a3045; border-radius: 18px; padding: 16px; box-shadow: var(--mk-shadow-lg); animation: mk-float 7s ease-in-out infinite; } @keyframes mk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } .mk-rec-top { display: flex; align-items: center; gap: 10px; padding: 4px 4px 14px; border-bottom: 1px solid var(--border); } .mk-rec-pair { font-family: 'DM Mono', monospace; font-size: .82rem; font-weight: 600; color: var(--text); letter-spacing: .06em; } .mk-rec-tf { font-family: 'DM Mono', monospace; font-size: .68rem; color: var(--muted); border: 1px solid var(--border2); border-radius: 5px; padding: 2px 7px; } .mk-rec-pill { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; background: rgba(239, 83, 80, .14); border: 1px solid #ef5350; color: #ef5350; font-size: .72rem; font-weight: 700; animation: mk-rec-pulse 1.6s ease-in-out infinite; } .mk-rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef5350; animation: mk-rec-blink 1.1s ease-in-out infinite; flex: none; } .mk-rec-timer { font-family: 'DM Mono', monospace; font-size: .72rem; min-width: 38px; } @keyframes mk-rec-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 83, 80, .28); } 50% { box-shadow: 0 0 0 7px rgba(239, 83, 80, 0); } } @keyframes mk-rec-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } } .mk-rec-chart { padding: 16px 4px 10px; } .mk-rec-chart svg { width: 100%; height: auto; display: block; } .mk-rec-caption { display: flex; align-items: center; gap: 10px; padding: 12px 4px 4px; border-top: 1px solid var(--border); } .mk-rec-quote { font-size: .82rem; color: #aeb6c9; line-height: 1.5; } .mk-rec-quote span { color: #f0b429; } .mk-rec-dest { display: flex; gap: 8px; margin-top: 14px; } .mk-chip { display: inline-flex; align-items: center; gap: 6px; font-family: 'DM Mono', monospace; font-size: .66rem; font-weight: 500; padding: 5px 9px; border-radius: 6px; background: var(--surface2); border: 1px solid var(--border); color: var(--muted); } .mk-chip i { width: 6px; height: 6px; border-radius: 50%; flex: none; } .mk-chip--yt i { background: var(--yt); } .mk-chip--gd i { background: var(--gd); } .mk-chip--jr i { background: #3d9df0; } /* ── Photo gallery ─────────────────────────────────────────── */ .mk-gallery { display: grid; grid-template-columns: 1.35fr 1fr; grid-auto-rows: 236px; gap: 16px; margin-top: 44px; } .mk-shot { position: relative; margin: 0; border-radius: var(--mk-radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--mk-shadow-sm); background: var(--surface); } .mk-shot--tall { grid-row: span 2; } .mk-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.01); transition: transform .6s cubic-bezier(.22, 1, .36, 1); } .mk-shot:hover img { transform: scale(1.07); } .mk-shot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10, 12, 18, .55) 100%); pointer-events: none; } .mk-shot-cap { position: absolute; left: 12px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 700; color: #fff; background: rgba(13, 15, 20, .62); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 7px 12px; border-radius: 9px; } @media (max-width: 760px) { .mk-gallery { grid-template-columns: 1fr; grid-auto-rows: 210px; } .mk-shot--tall { grid-row: auto; } } /* ── Stat band (count-up numbers) ──────────────────────────── */ .mk-statband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; } @media (max-width: 760px) { .mk-statband { grid-template-columns: repeat(2, 1fr); } } .mk-statbox { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px 14px 16px; text-align: center; transition: border-color .18s ease, transform .18s ease; } .mk-statbox:hover { border-color: var(--accent); transform: translateY(-2px); } .mk-statbox b { display: block; font-family: 'DM Mono', monospace; font-size: 1.7rem; font-weight: 600; color: var(--accent); letter-spacing: -.02em; margin-bottom: 4px; } .mk-statbox span { font-size: .76rem; color: var(--muted); } /* ── Steps (a real sequence, so numbered) ──────────────────── */ .mk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; } @media (max-width: 860px) { .mk-steps { grid-template-columns: 1fr; gap: 16px; } } .mk-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--mk-radius); padding: 26px 22px; position: relative; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .mk-step:hover { border-color: var(--border2); transform: translateY(-3px); box-shadow: var(--mk-shadow-sm); } .mk-step-n { font-family: 'DM Mono', monospace; font-size: .7rem; font-weight: 600; color: var(--accent); letter-spacing: .1em; margin-bottom: 14px; display: block; } /* ── Feature grid ──────────────────────────────────────────── */ .mk-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; } @media (max-width: 940px) { .mk-features { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .mk-features { grid-template-columns: 1fr; } } .mk-feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--mk-radius); padding: 24px 22px; position: relative; overflow: hidden; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .mk-feature::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--mk-btn-bg), #3d9df0); transform: scaleX(0); transform-origin: left center; transition: transform .3s ease; } .mk-feature:hover { border-color: var(--border2); transform: translateY(-3px); box-shadow: var(--mk-shadow-sm); } .mk-feature:hover::before { transform: scaleX(1); } .mk-feature-ico { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--mk-amber-soft); border: 1px solid rgba(240, 180, 41, .3); margin-bottom: 14px; font-size: .95rem; transition: transform .25s ease; } .mk-feature:hover .mk-feature-ico { transform: scale(1.12) rotate(-6deg); } /* ── Pricing ───────────────────────────────────────────────── */ .mk-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; align-items: start; } @media (max-width: 1020px) { .mk-plans { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .mk-plans { grid-template-columns: 1fr; } } .mk-plan { background: var(--surface); border: 1px solid var(--border); border-radius: var(--mk-radius); padding: 26px 22px; display: flex; flex-direction: column; height: 100%; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .mk-plan:hover { transform: translateY(-3px); box-shadow: var(--mk-shadow-sm); } .mk-plan--pop { border-color: #f0b429; box-shadow: 0 0 0 1px rgba(240, 180, 41, .18), 0 20px 50px rgba(240, 180, 41, .07); } .mk-plan-tag { font-family: 'DM Mono', monospace; font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mk-btn-ink); background: var(--mk-btn-bg); border-radius: 5px; padding: 3px 8px; align-self: flex-start; margin-bottom: 12px; } .mk-plan-name { font-size: 1rem; font-weight: 700; color: var(--mk-heading); margin-bottom: 4px; } .mk-plan-desc { font-size: .82rem; color: var(--muted); line-height: 1.5; min-height: 38px; margin-bottom: 16px; } .mk-plan-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; } .mk-plan-amt { font-size: 2rem; font-weight: 800; color: var(--mk-heading); letter-spacing: -.03em; } .mk-plan-per { font-family: 'DM Mono', monospace; font-size: .74rem; color: var(--muted); } .mk-plan-vat { font-size: .7rem; color: var(--muted); margin-bottom: 20px; } .mk-plan-list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; } .mk-plan-list li { font-size: .85rem; color: var(--mk-lead); line-height: 1.45; display: flex; gap: 9px; align-items: flex-start; } .mk-plan-list li::before { content: '✓'; color: var(--green); font-size: .78rem; font-weight: 700; flex: none; margin-top: 1px; } .mk-plan-list li.mk-no { color: var(--muted); } .mk-plan-list li.mk-no::before { content: '×'; color: var(--mk-nope); } /* ── Compare table ─────────────────────────────────────────── */ .mk-table-wrap { margin-top: 34px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--mk-radius); } .mk-table { width: 100%; border-collapse: collapse; min-width: 620px; } .mk-table th, .mk-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--border); font-size: .86rem; } .mk-table thead th { background: var(--surface2); color: var(--mk-heading); font-weight: 700; font-size: .8rem; position: sticky; top: 0; } .mk-table td:not(:first-child), .mk-table th:not(:first-child) { text-align: center; } .mk-table tbody td:first-child { color: var(--mk-lead); } .mk-table tbody tr:last-child td { border-bottom: none; } .mk-yes { color: var(--green); font-weight: 700; } .mk-nope { color: var(--mk-nope); } .mk-val { font-family: 'DM Mono', monospace; font-size: .8rem; color: var(--text); } /* ── FAQ ───────────────────────────────────────────────────── */ .mk-faq { margin-top: 40px; display: grid; gap: 12px; max-width: 820px; } .mk-faq details { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0 18px; } .mk-faq summary { cursor: pointer; list-style: none; padding: 16px 0; font-size: .93rem; font-weight: 600; color: var(--mk-heading); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .mk-faq summary::-webkit-details-marker { display: none; } .mk-faq summary::after { content: '+'; color: var(--accent); font-size: 1.2rem; font-weight: 400; flex: none; } .mk-faq details[open] summary::after { content: '−'; } .mk-faq details p { font-size: .88rem; line-height: 1.65; color: var(--muted); margin: 0 0 16px; } /* ── Split (about) ─────────────────────────────────────────── */ .mk-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; } @media (max-width: 860px) { .mk-split { grid-template-columns: 1fr; } } .mk-values { display: grid; gap: 14px; margin-top: 8px; } .mk-value { background: var(--surface); border: 1px solid var(--border); border-left: 2px solid #f0b429; border-radius: 0 10px 10px 0; padding: 16px 18px; } .mk-stat-row { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 30px; } .mk-stat-n { font-family: 'DM Mono', monospace; font-size: 1.5rem; font-weight: 600; color: var(--accent); } .mk-stat-l { font-size: .78rem; color: var(--muted); margin-top: 2px; } /* ── Contact ───────────────────────────────────────────────── */ .mk-contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 52px); align-items: start; } @media (max-width: 860px) { .mk-contact-grid { grid-template-columns: 1fr; } } .mk-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--mk-radius); padding: clamp(22px, 3vw, 32px); } .mk-field { margin-bottom: 16px; } .mk-label { display: block; font-size: .74rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 7px; } .mk-input, .mk-textarea, .mk-select { width: 100%; padding: 12px 13px; border-radius: 9px; background: var(--bg); border: 1px solid var(--border2); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: .93rem; transition: border-color .15s ease; } .mk-input:focus, .mk-textarea:focus, .mk-select:focus { outline: none; border-color: var(--accent); } .mk-textarea { min-height: 130px; resize: vertical; line-height: 1.55; } .mk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .mk-alert { border-radius: 10px; padding: 13px 15px; font-size: .88rem; line-height: 1.55; margin-bottom: 20px; } .mk-alert--ok { background: rgba(38, 166, 154, .1); border: 1px solid rgba(38, 166, 154, .4); color: #7fd8cf; } .mk-alert--bad { background: rgba(239, 83, 80, .1); border: 1px solid rgba(239, 83, 80, .4); color: #f5a3a1; } :root[data-theme="light"] .mk-alert--ok { color: #0b6b60; } :root[data-theme="light"] .mk-alert--bad { color: #b3312e; } .mk-contact-cards { display: grid; gap: 12px; } .mk-contact-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--mk-radius); padding: 18px 20px; } .mk-contact-card a { color: var(--accent2); font-size: .9rem; } .mk-contact-k { font-family: 'DM Mono', monospace; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } /* ── Closing CTA ───────────────────────────────────────────── */ /* Stays dark in both themes — a photo band with white type. */ .mk-cta-band { --text: #e8eaf0; --muted: #9aa4bd; --border2: #4a5268; --accent: #f0b429; background: linear-gradient(180deg, rgba(13, 15, 20, .88) 0%, rgba(13, 15, 20, .94) 100%), url('/images/candles-screen.jpg') center / cover no-repeat; border: 1px solid #2a3045; border-radius: 18px; padding: clamp(34px, 5vw, 56px); text-align: center; position: relative; overflow: hidden; box-shadow: var(--mk-shadow-lg); } .mk-cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(500px 200px at 50% 0%, rgba(240, 180, 41, .14), transparent 70%); pointer-events: none; } .mk-cta-band > * { position: relative; } .mk-cta-band .mk-h2 { color: #fff; } .mk-cta-band .mk-lead { color: #aeb6c9; } .mk-cta-band .mk-eyebrow { color: #f0b429; } .mk-cta-band .mk-eyebrow::before { background: #f0b429; } .mk-cta-band .mk-cta-row { justify-content: center; } /* ── Scroll reveal ─────────────────────────────────────────── */ .mk-reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; } .mk-reveal--l { transform: translateX(-20px); } .mk-reveal--r { transform: translateX(20px); } .mk-reveal--s { transform: scale(.95); } .mk-reveal.is-in { opacity: 1; transform: none; } /* ── Light theme: black & white treatment ────────────────── Firm 2px black borders, hard offset shadows, amber glow on hover. No grey surfaces — contrast comes from the lines. */ :root[data-theme="light"] .mk-step, :root[data-theme="light"] .mk-feature, :root[data-theme="light"] .mk-plan, :root[data-theme="light"] .mk-statbox, :root[data-theme="light"] .mk-shot, :root[data-theme="light"] .mk-faq details, :root[data-theme="light"] .mk-form, :root[data-theme="light"] .mk-value, :root[data-theme="light"] .mk-contact-card, :root[data-theme="light"] .mk-table-wrap { border-width: 2px; } :root[data-theme="light"] .mk-btn--ghost { border-width: 2px; padding: 12px 23px; } :root[data-theme="light"] .mk-btn--ghost.mk-btn--sm { padding: 8px 15px; } :root[data-theme="light"] .mk-step:hover, :root[data-theme="light"] .mk-feature:hover, :root[data-theme="light"] .mk-plan:hover, :root[data-theme="light"] .mk-statbox:hover { border-color: #0d0f14; box-shadow: 5px 5px 0 #0d0f14, 0 0 34px rgba(240, 180, 41, .40); } :root[data-theme="light"] .mk-plan--pop { border-color: #f0b429; box-shadow: 5px 5px 0 #0d0f14, 0 0 34px rgba(240, 180, 41, .40); } :root[data-theme="light"] .mk-table thead th { background: #0d0f14; color: #fff; } :root[data-theme="light"] .mk-theme-btn, :root[data-theme="light"] .mk-nav-toggle { border-color: #0d0f14; } :root[data-theme="light"] .mk-btn--primary { box-shadow: 4px 4px 0 #0d0f14, 0 0 26px rgba(240, 180, 41, .45); } :root[data-theme="light"] .mk-btn--primary:hover { box-shadow: 4px 4px 0 #0d0f14, 0 0 40px rgba(240, 180, 41, .65); } /* ── Footer (light-theme overrides for the shared footer) ──── */ :root[data-theme="light"] .fxr-footer { background: #ffffff; border-top: 2px solid #0d0f14; color: #000; } :root[data-theme="light"] .fxr-footer a { color: #3d3d3d; } :root[data-theme="light"] .fxr-footer a:hover { color: #000; } :root[data-theme="light"] .fxr-foot-name { color: #000; } :root[data-theme="light"] .fxr-foot-blurb { color: #3d3d3d; } :root[data-theme="light"] .fxr-foot-col h4 { color: #000; } :root[data-theme="light"] .fxr-foot-bottom { border-top: 1px solid #0d0f14; } :root[data-theme="light"] .fxr-foot-bottom-in { color: #3d3d3d; } :root[data-theme="light"] .fxr-foot-risk { color: #555; } /* ── Quality floor ─────────────────────────────────────────── */ .mk-page a:focus-visible, .mk-page button:focus-visible, .mk-page input:focus-visible, .mk-page textarea:focus-visible, .mk-page summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .mk-page *, .mk-page *::before, .mk-page *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .mk-reveal { opacity: 1; transform: none; } }