/* ===== Reset & Variables ===== */ :root { --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --bg: #f0f4f8; --bg-white: #ffffff; /* ── The glass ──────────────────────────────────────────────────────── Same material as the dashboard: a fill that is barely a tint, a blur whose saturate() makes colour behind the pane bloom rather than go milky, one diagonal sheen so the surface looks lit from the top-left, and a specular rim — bright along the top edge, fainter round the sides, dark underneath. The rim is the part that reads as glass rather than as a translucent box. Denser than the dashboard's: what these panes have behind them is the mesh on rather than a photograph, and against a near-white page a 0.28 fill left the cards and the sections they sit in within a few percent of each other — glass you cannot find is just a flat page. */ /* ── One dial ────────────────────────────────────────────────────── --glass-level (0–1) drives all four parts. The admin panel's Glass Intensity slider writes settings/site.themeGlass (0–100); script.js reads it back through /api/public/plans and sets this to a hundredth of it. 0.62 is what the material was tuned at, and --glass-k is that level normalised so it lands on exactly 1 there — every alpha below is the hand-tuned number multiplied by 1, so the default reproduces the tuned look and the slider scales from it. Move the default and the divisor has to move with it (THEME_GLASS_DEFAULT in site-config.js). The fill runs the opposite way to the rest: more glass means less of it, so it interpolates down as blur, sheen and rim come up. */ --glass-level: 0.62; --glass-k: calc(var(--glass-level) / 0.62); --glass: rgba(255, 255, 255, calc(0.18 + 0.74 * (1 - var(--glass-level)))); --glass-blur: blur(calc(8px + var(--glass-level) * 35px)) saturate(calc(100% + var(--glass-level) * 129%)); --glass-sheen: linear-gradient(155deg, rgba(255, 255, 255, calc(0.55 * var(--glass-k))) 0%, rgba(255, 255, 255, calc(0.14 * var(--glass-k))) 32%, rgba(255, 255, 255, 0) 60%); --glass-rim: inset 0 1px 0 0 rgba(255, 255, 255, calc(0.90 * var(--glass-k))), inset 0 0 0 1px rgba(255, 255, 255, calc(0.42 * var(--glass-k))), inset 0 -1px 1px 0 rgba(15, 23, 42, calc(0.05 * var(--glass-k))); --glass-cast: 0 10px 30px -12px rgba(15, 23, 42, 0.22); --text-dark: #1a1a1a; --text-body: #555; --text-muted: #888; --text-light: #aaa; --green: #22c55e; --green-bg: rgba(34, 197, 94, 0.1); --orange: #e97a1f; --orange-bg: rgba(233, 122, 31, 0.12); --profit: #16a34a; --border: rgba(0,0,0,0.08); --radius: 12px; --radius-sm: 8px; --radius-pill: 100px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.04); --shadow-md: 0 4px 20px rgba(0,0,0,0.06); --shadow-lg: 0 10px 34px rgba(0,0,0,0.10); --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --container: 1200px; /* Semantic colours */ --success: #16a34a; --success-bg: rgba(22, 163, 74, 0.1); --danger: #ef4444; --danger-bg: rgba(239, 68, 68, 0.1); --warning: #f59e0b; --warning-bg: rgba(245, 158, 11, 0.12); /* 4px spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 0.15s; --dur-mid: 0.25s; --dur-slow: 0.4s; /* Movement amounts live as tokens so prefers-reduced-motion can zero them in ONE place — see the guard at the bottom of the interaction layer. Any rule that moves must use these rather than a literal. */ --lift-1: -4px; --lift-2: -8px; --nudge-1: 5px; --press: 0.955; --pop: 1.1; --pop-xl: 1.5; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ===== Numerals ===== Inter defaults to proportional figures, so digits change width as they change value. Tabular figures keep prices and stats from jittering. */ .stat-value, .plan-row, .plan-table-header, .pkg-price, .profit, .quick-plan-value, .hero-stat-value, code, [class*="price"] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ===== Focus ===== :focus-visible only fires for keyboard/AT users. */ :where(a, button, input, select, textarea, [tabindex]):focus { outline: none; } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--text-dark); outline-offset: 2px; border-radius: var(--radius-sm); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--text-dark); box-shadow: 0 0 0 3px rgba(0,0,0,0.08); } /* ===== Interaction layer ===== Every interactive surface answers the pointer. */ /* Buttons lift on hover and press in on click. */ .btn-dark, .btn-outline, .btn-white, .btn-primary, .btn-sm, button { transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-mid) var(--ease), background var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease), color var(--dur-mid) var(--ease); } .btn-dark:hover, .btn-white:hover, .btn-primary:hover { transform: translateY(var(--lift-1)); box-shadow: var(--shadow-lg); } .btn-outline:hover { transform: translateY(var(--lift-1)); border-color: var(--text-dark); } .btn-dark:active, .btn-outline:active, .btn-white:active, .btn-primary:active, .btn-sm:active, button:active { transform: translateY(0) scale(var(--press)); transition-duration: 0.06s; } /* Nav links get a sliding underline. */ .nav-link { position: relative; transition: color var(--dur-mid) var(--ease); } .nav-link::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1.5px; background: var(--text-dark); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-mid) var(--ease); } .nav-link:hover::after { transform: scaleX(1); transform-origin: left; } /* Cards lift further and pick up an accent edge. */ .plan-card, .quick-plan-card, .pkg-card, .service-card, .stat-card-light { transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease); } .plan-card:hover, .quick-plan-card:hover, .pkg-card:hover, .service-card:hover { box-shadow: var(--shadow-lg); transform: translateY(var(--lift-2)); border-color: rgba(0, 0, 0, 0.16); } .stat-card-light:hover { transform: translateY(var(--lift-1)); box-shadow: var(--shadow-md); } /* Plan rows highlight as the eye scans them. */ .plan-row { transition: background var(--dur-fast) var(--ease); border-radius: var(--radius-sm); } .plan-row:hover { background: rgba(0, 0, 0, 0.03); } /* Feature ticks nudge. */ .service-features li, .pkg-features li { transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .service-features li:hover, .pkg-features li:hover { transform: translateX(var(--nudge-1)); color: var(--text-dark); } /* Badges and pills. */ .roi-badge, .service-tag, .section-pill, .pkg-winrate, .quick-plan-duration, .best-value-tag, .stat-card-badge { transition: transform var(--dur-fast) var(--ease); } .roi-badge:hover, .service-tag:hover, .pkg-winrate:hover, .quick-plan-duration:hover, .stat-card-badge:hover { transform: scale(var(--pop)); } /* Timeline steps. */ .step-item .step-dot, .step-content { transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease); } .step-item:hover .step-dot { transform: scale(var(--pop-xl)); } .step-item:hover .step-content { transform: translateY(var(--lift-1)); } /* Logo + footer. */ .nav-logo, .footer-logo { transition: transform var(--dur-mid) var(--ease), opacity var(--dur-mid) var(--ease); } .nav-logo:hover, .footer-logo:hover { transform: scale(var(--pop)); } /* Fields respond before focus. */ input, select, textarea { transition: border-color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease); } input:hover:not(:focus):not([readonly]), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: #bbb; } /* Ticker pauses so it can be read. */ .ticker-track { transition: animation-play-state var(--dur-mid) var(--ease); } .ticker-bar:hover .ticker-track { animation-play-state: paused; } a { transition: color var(--dur-mid) var(--ease), opacity var(--dur-mid) var(--ease); } /* ===== Reduced motion ===== Honour the OS setting: drop animation, keep every end state. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .pulse { animation: none !important; } /* Killing transition duration alone still lets a hover transform snap into place. Zeroing the movement tokens neutralises every rule that uses them at once — including ones added later — so there is no selector list to keep in sync. Colour and shadow changes are unaffected. */ :root { --lift-1: 0px; --lift-2: 0px; --nudge-1: 0px; --press: 1; --pop: 1; --pop-xl: 1; } /* The underline is a reveal, not motion — show it without the wipe. */ .nav-link:hover::after { transform: scaleX(1); } /* Infinite loops are the worst offenders — stop them outright rather than running them at 0.01ms. The hero backdrop must keep its scale, or the image would pop back and letterbox. */ .hero-bg-img { animation: none !important; transform: scale(1.06); } .hero::after { animation: none !important; opacity: 0.45; } .ticker-track { animation: none !important; } } html { font-size: 15px; scroll-behavior: smooth; } body { font-family: var(--font); background: var(--bg); /* Colour for the panes to pick up. Fixed, so it stays put behind the cards as the page scrolls rather than sliding with them. */ background-image: radial-gradient(900px 900px at 8% -8%, rgba(56, 189, 248, 0.26), transparent 60%), radial-gradient(760px 760px at 96% 4%, rgba(139, 92, 246, 0.24), transparent 58%), radial-gradient(820px 820px at 30% 52%, rgba(236, 72, 153, 0.12), transparent 62%), radial-gradient(680px 680px at 50% 108%, rgba(16, 185, 129, 0.18), transparent 60%); background-attachment: fixed; background-repeat: no-repeat; color: var(--text-dark); -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { cursor: pointer; font-family: var(--font); border: none; background: none; } img { max-width: 100%; display: block; } .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } /* ===== Navbar ===== */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(255,255,255,0.92); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); height: 56px; } .nav-inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; justify-content: space-between; } .nav-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.1rem; } .nav-links { display: flex; gap: 28px; } .nav-link { font-size: 0.9rem; color: var(--text-body); transition: color var(--transition); font-weight: 450; } .nav-link:hover { color: var(--text-dark); } .nav-actions { display: flex; align-items: center; gap: 12px; } /* Buttons */ .btn-primary { display: inline-flex; align-items: center; gap: 6px; background: var(--text-dark); color: #fff; padding: 10px 22px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.9rem; transition: all var(--transition); } .btn-primary:hover { background: #333; transform: translateY(var(--lift-1)); } .btn-outline { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-white); color: var(--text-dark); padding: 10px 22px; border-radius: var(--radius-sm); font-weight: 500; font-size: 0.9rem; border: 1px solid var(--border); transition: all var(--transition); } .btn-outline:hover { border-color: #ccc; background: #fafafa; } .btn-dark { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--text-dark); color: #fff; padding: 14px 32px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; transition: all var(--transition); } .btn-dark:hover { background: #333; transform: translateY(var(--lift-1)); } .btn-white { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-white); color: var(--text-dark); padding: 14px 32px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; border: 1px solid var(--border); transition: all var(--transition); } .btn-white:hover { background: #f5f5f5; transform: translateY(var(--lift-1)); } .btn-sm { padding: 8px 16px; font-size: 0.82rem; } .btn-full { width: 100%; justify-content: center; } .mobile-toggle { display: none; padding: 4px; color: var(--text-dark); } /* ===== Hero ===== */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: 0; } /* The background images are wrapped in