/* ============================================================ BuildScope marketing home page (dark, amber). Self-contained: this file styles ONLY public/index.html. The trade pages keep using site.css, so this never touches them. Palette ported from the Lovable redesign (oklch tokens). ============================================================ */ :root { --radius: 0.75rem; --background: oklch(0.16 0.018 255); --foreground: oklch(1 0 0); --card: oklch(0.22 0.02 255); --primary: oklch(0.78 0.17 70); --primary-foreground: oklch(0.16 0.018 255); --secondary: oklch(0.26 0.02 255); --muted: oklch(0.24 0.02 255); --muted-foreground: oklch(0.74 0.02 250); --border: oklch(0.31 0.02 255); --warn: oklch(0.78 0.16 85); --danger: oklch(0.72 0.2 25); --navy: oklch(0.22 0.04 260); --gradient-hero: radial-gradient(ellipse 80% 60% at 50% 0%, oklch(0.78 0.17 70 / 0.18), transparent 60%); --gradient-amber: linear-gradient(135deg, oklch(0.82 0.18 75), oklch(0.7 0.18 50)); --gradient-primary: radial-gradient(ellipse at center, oklch(0.78 0.17 70 / 0.55), transparent 70%); --shadow-glow: 0 20px 60px -20px oklch(0.78 0.17 70 / 0.35); --shadow-card: 0 1px 0 0 oklch(1 0 0 / 0.04) inset, 0 30px 60px -30px oklch(0 0 0 / 0.5); /* Tokens that flip between dark (here) and light (below) */ --hairline: oklch(0.31 0.02 255 / 0.6); --grid-line: oklch(1 0 0 / 0.04); --hover: oklch(1 0 0 / 0.06); --surface-2: oklch(0.22 0.02 255 / 0.4); --header-bg: oklch(0.16 0.018 255 / 0.8); --accent-tint: oklch(0.78 0.17 70 / 0.1); --accent-tint-2: oklch(0.78 0.17 70 / 0.15); --accent-border: oklch(0.78 0.17 70 / 0.4); --max: 80rem; } /* Light theme (toggled by adding .light to ) */ :root.light { color-scheme: light; --background: oklch(1 0 0); --foreground: oklch(0.18 0.02 255); --card: oklch(0.99 0.003 255); --primary: oklch(0.72 0.17 60); --primary-foreground: oklch(0.18 0.02 255); --secondary: oklch(0.96 0.005 255); --muted: oklch(0.96 0.005 255); --muted-foreground: oklch(0.45 0.02 255); --border: oklch(0.91 0.005 255); --hairline: oklch(0.85 0.01 255 / 0.9); --grid-line: oklch(0.18 0.02 255 / 0.06); --hover: oklch(0.18 0.02 255 / 0.05); --surface-2: oklch(0.96 0.005 255 / 0.7); --header-bg: oklch(1 0 0 / 0.82); --accent-tint: oklch(0.72 0.17 60 / 0.1); --accent-tint-2: oklch(0.72 0.17 60 / 0.14); --accent-border: oklch(0.72 0.17 60 / 0.4); --gradient-hero: radial-gradient(ellipse 80% 60% at 50% 0%, oklch(0.72 0.17 60 / 0.14), transparent 60%); --gradient-primary: radial-gradient(ellipse at center, oklch(0.72 0.17 60 / 0.4), transparent 70%); --shadow-glow: 0 20px 60px -20px oklch(0.72 0.17 60 / 0.25); --shadow-card: 0 1px 0 0 oklch(1 0 0 / 0.6) inset, 0 20px 40px -25px oklch(0.18 0.02 255 / 0.15); } * { box-sizing: border-box; } html { color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--background); color: var(--foreground); font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.5; font-feature-settings: "cv11", "ss01"; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, p, ul, figure { margin: 0; } ul { list-style: none; padding: 0; } svg { display: block; } img { max-width: 100%; display: block; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; width: 100%; } .narrow { max-width: 56rem; } .amber { color: var(--primary); } .mono { font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; } .tnum { font-variant-numeric: tabular-nums; } .grad { background: linear-gradient(135deg, var(--primary), oklch(0.7 0.18 50)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; border-radius: 0.6rem; border: 1px solid transparent; text-align: center; transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease; } .btn:active { transform: translateY(1px); } .btn-sm { height: 2.25rem; padding: 0 0.9rem; font-size: 0.875rem; } .btn-lg { height: 3rem; padding: 0 1.6rem; font-size: 1rem; } .btn-primary { background: var(--gradient-amber); color: var(--primary-foreground); } .btn-primary:hover { box-shadow: var(--shadow-glow); } .btn-ghost { background: transparent; color: var(--foreground); } .btn-ghost:hover { background: var(--hover); } .btn-outline { background: transparent; color: var(--foreground); border-color: var(--border); } .btn-outline:hover { background: var(--hover); border-color: var(--primary); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.55rem; border: 1px solid var(--border); background: transparent; color: var(--muted-foreground); cursor: pointer; transition: color .15s ease, background .15s ease; } .icon-btn:hover { color: var(--foreground); background: var(--hover); } .badge { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; border: 1px solid var(--accent-border); background: var(--accent-tint); color: var(--primary); padding: 0.3rem 0.75rem; font-size: 0.75rem; font-weight: 500; } .badge.neutral { border-color: var(--border); background: var(--card); color: var(--foreground); } .badge svg { width: 0.85rem; height: 0.85rem; } .flag-au { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); flex: 0 0 auto; } .badge svg.flag-au { width: 1.3rem; height: 0.65rem; } /* Auth-aware header CTA: swap Log in <-> My account with no flash. The is-authed class is set on in the head from a localStorage hint. */ .cta-account { display: none; } html.is-authed .cta-login { display: none; } html.is-authed .cta-account { display: inline-flex; } .eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted-foreground); } .ico { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; } .ico-sm { width: 1rem; height: 1rem; flex: 0 0 auto; } /* ---------- Brand ---------- */ .brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; } .brand-badge { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.5rem; background: var(--accent-tint-2); color: var(--primary); } .brand-badge svg { width: 1rem; height: 1rem; } .brand-logo { height: 2.25rem; width: auto; display: block; } /* ---------- Header ---------- */ .site-head { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--hairline); background: var(--header-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .head-in { display: flex; height: 4rem; align-items: center; justify-content: space-between; } .head-nav { display: none; align-items: center; gap: 2rem; } .head-nav a { font-size: 0.875rem; color: var(--muted-foreground); transition: color .15s ease; } .head-nav a:hover { color: var(--foreground); } .head-cta { display: flex; align-items: center; gap: 0.4rem; } .head-cta .btn-sm { padding: 0 0.72rem; font-size: 0.8rem; } .head-burger { display: inline-flex; background: none; border: none; color: var(--foreground); cursor: pointer; padding: 0.25rem; } .head-burger svg { width: 1.4rem; height: 1.4rem; } .head-mobile { display: none; border-top: 1px solid var(--hairline); background: var(--background); } .head-mobile.open { display: block; } .head-mobile .inner { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.5rem; } .head-mobile a { font-size: 0.95rem; color: var(--muted-foreground); } .head-actions { display: flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; } /* Mobile header: keep both auth buttons visible side by side. Drop the wordmark (icon-only) and the theme toggle to make room; the burger keeps the nav links. */ .brand span { display: none; } .head-actions .theme-toggle { display: none; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border-radius: 0.55rem; border: 1px solid var(--border); background: var(--card); color: var(--foreground); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .theme-toggle:hover { background: var(--muted); } .theme-toggle svg { width: 1.05rem; height: 1.05rem; } @media (min-width: 768px) { .head-nav, .head-cta { display: flex; } .head-cta { gap: 0.75rem; } .head-cta .btn-sm { padding: 0 0.9rem; font-size: 0.875rem; } .head-actions { gap: 0.5rem; } .brand span { display: inline; } .head-actions .theme-toggle { display: inline-flex; } .head-burger { display: none; } .head-mobile { display: none !important; } } /* ---------- Section scaffold ---------- */ .sec { border-bottom: 1px solid var(--hairline); padding: 6rem 0; } .sec-head { max-width: 42rem; margin: 0 auto; text-align: center; } .sec-head .eyebrow { display: block; margin-bottom: 1rem; } h2.h2 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; } .sec-lead { margin-top: 1rem; color: var(--muted-foreground); } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--hairline); } .hero::before { content: ""; position: absolute; inset: 0; opacity: 0.3; pointer-events: none; background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 56px 56px; } .hero::after { content: ""; position: absolute; inset: 0; background: var(--gradient-hero); pointer-events: none; } .hero-in { position: relative; padding: 5rem 0 4rem; } .hero-grid { display: grid; gap: 3.5rem; align-items: center; } .hero-copy { text-align: center; } .hero h1 { margin-top: 1.5rem; font-size: clamp(2.75rem, 8vw, 4.5rem); font-weight: 600; line-height: 0.98; letter-spacing: -0.025em; text-wrap: balance; } .hero h1 .grad { white-space: pre-line; } .hero-sub { margin: 1.5rem auto 0; max-width: 36rem; font-size: clamp(1.0625rem, 2.2vw, 1.25rem); line-height: 1.6; color: var(--muted-foreground); text-wrap: balance; } .hero-cta { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .hero-trust { margin-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; font-size: 0.875rem; color: var(--muted-foreground); } .hero-trust li { display: inline-flex; align-items: center; gap: 0.4rem; } .hero-trust svg { width: 1rem; height: 1rem; color: var(--primary); } /* Hero video frame (single looping clip served from /vid) */ .hero-art { position: relative; } .reel-glow { position: absolute; inset: -2rem; z-index: -1; border-radius: 2.5rem; opacity: 0.7; filter: blur(48px); background: var(--gradient-primary); } .reel-frame { overflow: hidden; border-radius: 1rem; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-card); max-width: 38rem; margin: 0 auto; } .reel-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; } .reel-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .reel-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 65%, rgba(0,0,0,.55) 100%); } .reel-chip { position: absolute; display: inline-flex; align-items: center; gap: 0.4rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; padding: 0.3rem 0.6rem; font-size: 0.625rem; font-weight: 500; } .reel-live { left: 1rem; top: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .reel-mute { position: absolute; right: 1rem; top: 1rem; display: inline-flex; align-items: center; gap: 0.4rem; height: 1.85rem; padding: 0 0.6rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font: inherit; font-size: 0.625rem; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease; } .reel-mute:hover { background: rgba(0,0,0,.65); } .reel-mute svg { width: 0.9rem; height: 0.9rem; flex: 0 0 auto; } .reel-mute.on { color: var(--primary); } .reel-mute-hint { white-space: nowrap; } .reel-mute.on .reel-mute-hint { display: none; } .live-dot { position: relative; display: inline-flex; width: 0.45rem; height: 0.45rem; } .live-dot span { position: absolute; inset: 0; border-radius: 9999px; background: var(--primary); } .live-dot span:first-child { animation: reel-ping 1.4s cubic-bezier(0,0,0.2,1) infinite; opacity: .75; } @keyframes reel-ping { 75%, 100% { transform: scale(2.2); opacity: 0; } } .reel-caption { position: absolute; inset-inline: 1rem; bottom: 1rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; } .rc-job { border-radius: 0.75rem; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; padding: 0.5rem 0.75rem; font-size: 0.75rem; line-height: 1.35; } .rc-job-k { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--primary); } .rc-job-v { margin-top: 0.1rem; font-weight: 500; } .rc-est { display: none; flex: 0 0 auto; border-radius: 0.5rem; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; padding: 0.35rem 0.6rem; text-align: right; } .rc-est-k { font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,.6); } .rc-est-v { font-weight: 600; } .reel-peek { position: absolute; bottom: -1.5rem; left: -1rem; width: 16rem; transform: rotate(-3deg); border-radius: 0.75rem; border: 1px solid var(--border); background: var(--card); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--shadow-card); padding: 0.75rem; display: none; } .peek-head { display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--hairline); padding-bottom: 0.5rem; } .peek-ic { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 0.375rem; background: var(--accent-tint-2); color: var(--primary); } .peek-ic svg { width: 0.85rem; height: 0.85rem; } .peek-label { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); } .peek-list { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.6875rem; } .peek-list li { display: flex; align-items: center; justify-content: space-between; } @media (min-width: 640px) { .rc-est { display: block; } .reel-peek { display: block; } } @media (min-width: 1024px) { .hero-in { padding: 7rem 0 4rem; } .hero-grid { grid-template-columns: repeat(12, 1fr); } .hero-copy { grid-column: span 5; text-align: left; } .hero-copy .hero-sub { margin-left: 0; } .hero-cta, .hero-trust { justify-content: flex-start; } .hero-art { grid-column: span 7; } .reel-frame { max-width: none; transform: rotate(1.5deg); transition: transform .5s ease; } .reel-frame:hover { transform: rotate(0deg); } .reel-peek { left: -2rem; } } /* ---------- Trust strip ---------- */ .trust-strip { border-top: 1px solid var(--hairline); background: var(--surface-2); position: relative; } .trust-strip ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 2rem; padding: 1rem 0; font-size: 0.875rem; color: var(--muted-foreground); } .trust-strip li { display: inline-flex; align-items: center; gap: 0.4rem; } .trust-strip svg { width: 1rem; height: 1rem; color: var(--primary); } @media (min-width: 640px) { .trust-strip ul { justify-content: space-between; } } /* ---------- The big idea ---------- */ .idea-body { max-width: 42rem; margin: 2.5rem auto 0; display: flex; flex-direction: column; gap: 1.25rem; font-size: 1.125rem; line-height: 1.7; color: var(--muted-foreground); } .idea-body .lead-strong { color: var(--foreground); } /* ---------- Timeline ---------- */ .tl-grid { display: grid; gap: 1.5rem; margin-top: 3.5rem; } .tl-card { border-radius: 1rem; border: 1px solid var(--border); background: var(--card); padding: 1.75rem; } .tl-card.good { border-color: var(--accent-border); box-shadow: var(--shadow-glow); } .tl-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); padding-bottom: 1rem; } .tl-card.good .tl-head { border-color: var(--accent-border); } .tl-label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); } .tl-card.good .tl-label { color: var(--primary); } .tl-label svg { width: 1rem; height: 1rem; } .tl-tag { border-radius: 9999px; padding: 0.1rem 0.5rem; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .tl-tag.bad { background: oklch(0.6 0.22 25 / 0.15); color: oklch(0.75 0.2 25); } .tl-tag.ok { background: var(--accent-tint-2); color: var(--primary); } .tl-steps { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; } .tl-steps li { display: grid; grid-template-columns: 88px 1fr; gap: 1rem; } .tl-time { font-size: 0.75rem; color: var(--muted-foreground); } .tl-card.good .tl-time { color: var(--primary); } .tl-desc { font-size: 0.875rem; line-height: 1.6; color: color-mix(in oklab, var(--foreground) 78%, transparent); } .tl-card.good .tl-desc { color: var(--foreground); } @media (min-width: 1024px) { .tl-grid { grid-template-columns: 1fr 1fr; } } /* ---------- Card grids (steps / pain / features) ---------- */ .grid-cards { margin-top: 3.5rem; display: grid; gap: 1.5rem; } .grid-3 { gap: 1.5rem; } .card { border-radius: 1rem; border: 1px solid var(--border); background: var(--card); padding: 1.75rem; transition: border-color .15s ease; } .card:hover { border-color: var(--accent-border); } .card-ic { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background: var(--accent-tint); color: var(--primary); } .card-ic svg { width: 1.25rem; height: 1.25rem; } .card h3 { margin-top: 1.25rem; font-size: 1.05rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; } .card p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); } .how-n { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; color: var(--primary); } .how-card h3 { margin-top: 1.25rem; font-size: 1.25rem; } .pain-ic { width: 1.25rem; height: 1.25rem; color: var(--warn); } .pain-card h3 { margin-top: 1rem; font-size: 1rem; } @media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: 1fr 1fr; } } @media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .grid-5 { grid-template-columns: repeat(5, 1fr); } } /* ---------- Time savings (ROI) ---------- */ .roi-grid { display: grid; gap: 3rem; align-items: center; } .roi-copy h2 { margin-top: 1.5rem; font-size: clamp(2.5rem, 6vw, 3.75rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; } .roi-copy p { margin-top: 1.5rem; max-width: 32rem; font-size: 1.125rem; line-height: 1.7; color: var(--muted-foreground); } .roi-copy .badge { margin-bottom: 0; } .roi-copy .cta { margin-top: 2rem; } .roi-card { border-radius: 1rem; border: 1px solid var(--border); background: var(--card); padding: 1.75rem; box-shadow: var(--shadow-card); } .roi-card ul { display: flex; flex-direction: column; gap: 1rem; font-size: 0.875rem; } .roi-card li { display: flex; align-items: center; justify-content: space-between; } .roi-card li.rule { border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; } .roi-card li.dash { border-bottom: 1px dashed var(--border); padding-bottom: 0.75rem; } .roi-card .k { color: var(--muted-foreground); } .roi-card .v { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; } .roi-card li.total .k, .roi-card li.total .v { color: var(--foreground); font-weight: 600; } .roi-card .v.amber { color: var(--primary); } .roi-quip { margin-top: 1.5rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); } @media (min-width: 1024px) { .roi-grid { grid-template-columns: 1fr 1fr; } } /* ---------- Centered text blocks ---------- */ .center { max-width: 56rem; margin: 0 auto; text-align: center; } .center .sec-lead, .center .who-body { margin: 1.5rem auto 0; max-width: 36rem; font-size: 1.125rem; line-height: 1.7; color: var(--muted-foreground); } .center .cta { margin-top: 2.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; } .who-chips { margin-top: 2.5rem; display: grid; gap: 1rem; } .who-chips .chip { border-radius: 0.75rem; border: 1px solid var(--border); background: var(--card); padding: 1rem 1.25rem; font-size: 0.875rem; font-weight: 500; } @media (min-width: 640px) { .who-chips { grid-template-columns: repeat(3, 1fr); } } /* ---------- Guarantee ---------- */ .guarantee { position: relative; overflow: hidden; border-radius: 1.5rem; border: 1px solid var(--accent-border); background: var(--card); box-shadow: var(--shadow-glow); padding: 2.5rem 1.5rem; text-align: center; } .guarantee::before { content: ""; position: absolute; inset: 0; opacity: 0.4; background: var(--gradient-hero); pointer-events: none; } .guarantee > * { position: relative; } .g-ic { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 9999px; border: 1px solid var(--accent-border); background: var(--background); color: var(--primary); } .g-ic svg { width: 1.75rem; height: 1.75rem; } .guarantee h2 { margin-top: 1.5rem; } .guarantee p { margin: 1.25rem auto 0; max-width: 36rem; color: var(--muted-foreground); } .g-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; } .g-checks { margin-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; font-size: 0.75rem; color: var(--muted-foreground); } .g-checks span { display: inline-flex; align-items: center; gap: 0.4rem; } .g-checks svg { width: 0.85rem; height: 0.85rem; color: var(--primary); } @media (min-width: 640px) { .guarantee { padding: 3.5rem; } } /* ---------- Trades ---------- */ .trade-pills { margin-top: 3rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; } .pill-trade { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; border: 1px solid var(--border); background: var(--card); padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; transition: border-color .15s ease, background .15s ease, color .15s ease; } .pill-trade:hover { border-color: var(--accent-border); background: var(--card); } .pill-trade .arr { color: var(--muted-foreground); transition: transform .15s ease, color .15s ease; } .pill-trade:hover .arr { transform: translateX(2px); color: var(--primary); } .pill-trade .arr svg { width: 0.85rem; height: 0.85rem; } /* ---------- Final CTA ---------- */ .final { position: relative; overflow: hidden; border-bottom: 0; } .final::before { content: ""; position: absolute; inset: 0; background: var(--gradient-hero); pointer-events: none; } .final .center { position: relative; } .final h2 { font-size: clamp(2.75rem, 7vw, 3.75rem); } /* ---------- Footer ---------- */ .foot { border-top: 1px solid var(--hairline); background: var(--background); } .foot-grid { display: grid; gap: 2.5rem; padding: 3.5rem 0; } .foot-brand p { margin-top: 1rem; max-width: 24rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); } .foot-col h4 { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .foot-col ul { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; } .foot-col a { font-size: 0.875rem; color: var(--muted-foreground); } .foot-col a:hover { color: var(--foreground); } .foot-bar-in { border-top: 1px solid var(--hairline); } .foot-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; font-size: 0.75rem; color: var(--muted-foreground); flex-wrap: wrap; } .foot-legal { display: flex; flex-direction: column; gap: 0.85rem; padding: 1.5rem 0; } .foot-notice { margin: 0; font-size: 0.75rem; line-height: 1.6; color: var(--muted-foreground); } .foot-legal .foot-bar { padding: 0; } .foot-legal-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; } .foot-legal-links a { font-size: 0.75rem; color: var(--muted-foreground); } .foot-legal-links a:hover { color: var(--foreground); } @media (min-width: 768px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } .foot-brand { grid-column: span 1; } } /* ---------- Trade page extras ---------- */ .grid-4 { gap: 1.5rem; } @media (min-width: 640px) { .grid-4 { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } } .pill-trade.current { border-color: var(--accent-border); background: var(--accent-tint); color: var(--primary); } .ti-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.55rem; } .ti-list li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; color: var(--foreground); } .ti-list svg { width: 1rem; height: 1rem; color: var(--primary); flex: 0 0 auto; } .faq { max-width: 46rem; margin: 3rem auto 0; display: flex; flex-direction: column; gap: 0.75rem; } .faq details { border: 1px solid var(--border); border-radius: 0.85rem; background: var(--card); overflow: hidden; } .faq summary { list-style: none; cursor: pointer; padding: 1.1rem 1.25rem; font-weight: 600; font-size: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--primary); font-size: 1.4rem; line-height: 1; flex: 0 0 auto; } .faq details[open] summary::after { content: "\2212"; } .faq .faq-a { padding: 0 1.25rem 1.2rem; color: var(--muted-foreground); line-height: 1.65; font-size: 0.95rem; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reel-frame, .pill-trade .arr { transition: none; } .live-dot span:first-child { animation: none; } @media (min-width: 1024px) { .reel-frame { transform: none; } } } /* ---------- Cross-device section ---------- */ .devices { margin-top: 3rem; display: flex; align-items: flex-end; justify-content: center; gap: clamp(0.6rem, 3vw, 2rem); flex-wrap: wrap; } .dv { position: relative; flex: 0 0 auto; } .dv-glass { position: relative; background: linear-gradient(150deg, #343f53, #12161f); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: var(--shadow-card); } .dv-screen { width: 100%; height: 100%; overflow: hidden; background: var(--card); border: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 0.5em; padding: 0.75em; } /* faux app UI inside each screen, scales with the device font-size */ .dvs-head { display: flex; align-items: center; gap: 0.45em; } .dvs-dot { width: 1.1em; height: 1.1em; border-radius: 0.3em; background: var(--gradient-amber); flex: 0 0 auto; } .dvs-skh { height: 0.5em; width: 4.5em; max-width: 60%; border-radius: 0.25em; background: var(--muted-foreground); opacity: 0.4; } .dvs-list { display: flex; flex-direction: column; gap: 0.45em; } .dvs-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; padding: 0.5em 0.6em; border: 1px solid var(--hairline); border-radius: 0.4em; background: var(--surface-2); } .dvs-row .sk { height: 0.5em; width: 42%; border-radius: 0.25em; background: var(--muted-foreground); opacity: 0.4; } .dvs-row .sk.sk-2 { width: 32%; } .dvs-row .sk.sk-3 { width: 38%; } .dvs-row b { font-size: 0.85em; font-weight: 700; color: var(--foreground); font-variant-numeric: tabular-nums; } .dvs-cta { margin-top: auto; height: 1.5em; border-radius: 0.4em; background: var(--gradient-amber); } /* laptop */ .dv-laptop { width: clamp(15rem, 42vw, 21rem); font-size: clamp(8px, 1.45vw, 11.5px); } .dv-laptop .dv-glass { aspect-ratio: 16 / 10; border-radius: 0.85em; padding: 0.5em; } .dv-laptop .dv-screen { border-radius: 0.5em; } .laptop-base { position: relative; width: 118%; margin-left: -9%; height: 0.65em; border-radius: 0 0 0.7em 0.7em; background: linear-gradient(180deg, #2c3445, #161b25); box-shadow: var(--shadow-card); } .laptop-base::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 15%; height: 0.22em; border-radius: 0 0 0.4em 0.4em; background: rgba(0, 0, 0, 0.35); } /* tablet */ .dv-tablet { width: clamp(8.5rem, 22vw, 11rem); font-size: clamp(7px, 1.15vw, 9.5px); } .dv-tablet .dv-glass { aspect-ratio: 3 / 4; border-radius: 1.4em; padding: 0.9em 0.75em; } .dv-tablet .dv-screen { border-radius: 0.7em; } /* phone */ .dv-phone { width: clamp(5.5rem, 14vw, 7rem); font-size: clamp(6px, 0.85vw, 8px); } .dv-phone .dv-glass { aspect-ratio: 9 / 19; border-radius: 1.9em; padding: 0.7em; } .dv-phone .dv-screen { border-radius: 1.3em; } .dv-notch { position: absolute; top: 0.7em; left: 50%; transform: translateX(-50%); z-index: 2; width: 38%; height: 0.75em; border-radius: 999px; background: #0a0d13; } /* on site / on the go / at the desk cards + the PWA install note */ .device-cards { margin-top: 3rem; } .device-note { margin: 2.25rem auto 0; max-width: 42rem; display: flex; align-items: center; justify-content: center; gap: 0.65rem; text-align: left; font-size: 0.9rem; line-height: 1.5; color: var(--muted-foreground); border: 1px solid var(--border); background: var(--surface-2); border-radius: 0.85rem; padding: 0.85rem 1.1rem; } .device-note svg { width: 1.2rem; height: 1.2rem; color: var(--primary); flex: 0 0 auto; } .device-note strong { color: var(--foreground); font-weight: 700; } /* install button + iOS instructions */ .device-cta { margin-top: 2.25rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .device-cta .device-note { margin: 0 auto; } #install-cta[hidden], .ios-hint[hidden] { display: none; } .ios-hint { max-width: 38rem; margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--muted-foreground); border: 1px solid var(--accent-border); background: var(--accent-tint); border-radius: 0.85rem; padding: 0.8rem 1.1rem; text-align: center; } .ios-hint strong { color: var(--foreground); font-weight: 700; } /* small "works on every device" line under the hero CTAs */ .hero-devices { margin-top: 1rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.85rem; color: var(--muted-foreground); } .hero-devices svg { width: 1.05rem; height: 1.05rem; color: var(--primary); flex: 0 0 auto; } @media (min-width: 1024px) { .hero-devices { justify-content: flex-start; } } /* Breadcrumb trail (trade + hub pages) */ .bs-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 1rem 0 0; font-size: 0.8rem; color: var(--muted-foreground); } .bs-crumbs a { color: var(--muted-foreground); } .bs-crumbs a:hover { color: var(--foreground); } .bs-crumbs [aria-current] { color: var(--foreground); font-weight: 600; } /* Trades hub grid */ .trades-hub { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 0.5rem; } @media (min-width: 640px) { .trades-hub { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .trades-hub { grid-template-columns: 1fr 1fr 1fr; } } .hub-card { display: flex; align-items: flex-start; gap: 0.85rem; border: 1px solid var(--border); background: var(--card); border-radius: 0.9rem; padding: 1.1rem 1.2rem; color: var(--foreground); transition: border-color 0.15s, transform 0.15s; } .hub-card:hover { border-color: var(--primary); transform: translateY(-1px); } .hub-card .hub-ic { font-size: 1.4rem; line-height: 1; flex: 0 0 auto; } .hub-card .hub-name { font-weight: 700; letter-spacing: -0.01em; } .hub-card .hub-blurb { margin-top: 0.2rem; font-size: 0.85rem; line-height: 1.5; color: var(--muted-foreground); } .hub-card .hub-ic svg { width: 1.4rem; height: 1.4rem; color: var(--primary); } /* Footer mini-links (All trades / Resources) */ .foot-mini { list-style: none; margin: 0.9rem 0 0; padding: 0; display: flex; gap: 1.1rem; } .foot-mini a { font-size: 0.85rem; color: var(--muted-foreground); } .foot-mini a:hover { color: var(--foreground); } /* Resource / lead-magnet article pages */ .wrap.narrow { max-width: 820px; } .resource-wrap .eyebrow { display: block; } .resource-h1 { margin-top: 0.6rem; } .resource-cta { margin: 1.6rem 0 0.5rem; flex-wrap: wrap; gap: 0.75rem; } .resource-cta .btn svg { width: 1.05rem; height: 1.05rem; } .resource-prose { margin-top: 2.2rem; display: flex; flex-direction: column; gap: 1.6rem; } .resource-sec h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.6rem; color: var(--foreground); } .resource-sec p { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--muted-foreground); } .resource-ul { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; font-size: 1rem; line-height: 1.6; color: var(--muted-foreground); } .resource-faq { margin-top: 2.4rem; } /* Cookie consent banner (injected by analytics.js) */ .bs-consent { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 200; margin: 0 auto; max-width: 720px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem; background: var(--card); border: 1px solid var(--border); border-radius: 0.9rem; padding: 0.9rem 1.1rem; box-shadow: 0 10px 40px rgba(0,0,0,0.25); } .bs-consent-text { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--muted-foreground); flex: 1 1 16rem; } .bs-consent-text a { color: var(--primary); } .bs-consent-btns { display: flex; gap: 0.5rem; flex: 0 0 auto; } @media (max-width: 520px) { .bs-consent-btns { width: 100%; } .bs-consent-btns .btn { flex: 1 1 0; justify-content: center; } }