/* ============================================================ Dragon Development — Design System Light, clean, premium agency look ============================================================ */ /* Self-hosted variable fonts (latin subset). Served from our own domain so the render path never waits on fonts.googleapis.com. */ @font-face { font-family: "Sora"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/sora-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: optional; src: url("../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --brand: #6c4bdc; --brand-deep: #4c2fb0; --brand-soft: #8f6df5; --brand-tint: #f3eeff; --ink: #16131f; --ink-2: #4b4658; --ink-3: #7d7790; --bg: #ffffff; --bg-soft: #faf9fd; --bg-tint: #f4f1fb; --line: #e9e5f2; --radius: 20px; --radius-sm: 12px; --shadow-sm: 0 1px 2px rgba(22, 19, 31, 0.05), 0 4px 12px rgba(22, 19, 31, 0.04); --shadow-md: 0 2px 4px rgba(22, 19, 31, 0.05), 0 12px 32px rgba(76, 47, 176, 0.10); --shadow-lg: 0 4px 8px rgba(22, 19, 31, 0.05), 0 24px 64px rgba(76, 47, 176, 0.16); --grad: linear-gradient(120deg, #6c4bdc 0%, #8f6df5 55%, #b79bff 100%); --font-display: "Sora", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --container: 1180px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; } /* ---------- Page transitions (cross-document view transitions) ---------- Browsers without support simply navigate normally. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: 0.22s ease both vt-fade-out; } ::view-transition-new(root) { animation: 0.3s cubic-bezier(0.22, 1, 0.36, 1) both vt-fade-in; } @keyframes vt-fade-out { to { opacity: 0; } } @keyframes vt-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* The header is identical on every page, so snapshot it separately and keep it stable while the content transitions beneath it */ .site-header { view-transition-name: site-header; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root), ::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; } } /* ---------- Branded scrollbar (desktop) ---------- Scoped to the document scroller only; inner scroll areas (e.g. the reviews embed) keep their default scrollbars */ @media (hover: hover) and (pointer: fine) { html { scrollbar-width: thin; scrollbar-color: var(--brand-soft) var(--bg-tint); } /* scrollbar-color inherits, so stop it at for nested scrollers */ body { scrollbar-color: auto; } html::-webkit-scrollbar { width: 11px; height: 11px; } html::-webkit-scrollbar-track { background: var(--bg-tint); } html::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--brand-soft), var(--brand)); border-radius: 8px; border: 2px solid var(--bg-tint); } html::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--brand), var(--brand-deep)); } } body { font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height: 1.65; font-size: 16.5px; -webkit-font-smoothing: antialiased; /* clip, not hidden: hidden makes body a scroll container and breaks position: sticky */ overflow-x: clip; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font: inherit; cursor: pointer; border: none; background: none; } .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } /* ---------- Typography ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; } .display-xl { font-size: clamp(2.6rem, 5.6vw, 4.4rem); } .display-lg { font-size: clamp(2.1rem, 4vw, 3.1rem); } .display-md { font-size: clamp(1.5rem, 2.6vw, 2rem); } .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); margin-bottom: 18px; } .lead { font-size: 1.13rem; color: var(--ink-2); max-width: 62ch; } .section { padding: 104px 0; } .section-tint { background: var(--bg-tint); } .section-head { max-width: 720px; margin-bottom: 56px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head.center .eyebrow { justify-content: center; } .section-head.center .lead { margin: 0 auto; } .section-head h2 { margin-bottom: 16px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; padding: 15px 30px; border-radius: 999px; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease; will-change: transform; } .btn svg { width: 17px; height: 17px; transition: transform 0.25s ease; } .btn:hover svg { transform: translateX(4px); } .btn-primary { background: var(--grad); color: #fff; box-shadow: 0 8px 24px rgba(108, 75, 220, 0.35); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(108, 75, 220, 0.45); } .btn-ghost { color: var(--ink); border: 1.5px solid var(--line); background: #fff; } .btn-ghost:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); } .btn-dark { background: var(--ink); color: #fff; } .btn-dark:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(22, 19, 31, 0.3); } /* ---------- Header ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; border-bottom: 1px solid transparent; } .site-header.scrolled { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--line); box-shadow: var(--shadow-sm); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 78px; } .logo img { height: 40px; width: auto; } .nav-links { display: flex; align-items: center; gap: 34px; } .nav-links a:not(.btn) { font-weight: 500; font-size: 0.95rem; color: var(--ink-2); position: relative; transition: color 0.2s ease; } .nav-links > a:not(.btn)::after, .nav-dropdown > a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; } .nav-links a:not(.btn):hover, .nav-links a:not(.btn).active { color: var(--ink); } .nav-links > a:not(.btn):hover::after, .nav-links > a:not(.btn).active::after, .nav-dropdown > a:hover::after, .nav-dropdown > a.active::after { transform: scaleX(1); } .nav-links .btn { padding: 11px 24px; font-size: 0.9rem; } /* Services dropdown (desktop) */ .nav-dropdown { position: relative; } .nav-dropdown > a { display: inline-flex; align-items: center; gap: 6px; } .nav-dropdown .chev { width: 12px; height: 12px; transition: transform 0.25s ease; } .dropdown-menu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 8px); min-width: 280px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 10px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .dropdown-menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } .dropdown-menu a { display: block; padding: 11px 14px; border-radius: 8px; font-size: 0.92rem; font-weight: 500; color: var(--ink-2); transition: background 0.2s ease, color 0.2s ease; } .dropdown-menu a:hover { background: var(--bg-tint); color: var(--brand); } @media (min-width: 861px) { .nav-dropdown:hover .chev { transform: rotate(180deg); } .nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); } } .nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .nav-toggle span { width: 24px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.3s ease, opacity 0.3s ease; } .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- Hero ---------- */ .hero { position: relative; padding: 190px 0 130px; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: -2; background: radial-gradient(56% 44% at 82% 6%, rgba(143, 109, 245, 0.16) 0%, transparent 100%), radial-gradient(42% 40% at 8% 88%, rgba(108, 75, 220, 0.10) 0%, transparent 100%), linear-gradient(180deg, #fbfaff 0%, #ffffff 100%); } .hero-grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(108, 75, 220, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(108, 75, 220, 0.08) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(65% 60% at 50% 30%, #000 0%, transparent 100%); -webkit-mask-image: radial-gradient(65% 60% at 50% 30%, #000 0%, transparent 100%); } /* Brighter copy of the grid, revealed in a soft circle around the cursor. The parent's radial fade mask still applies on top, so the glow never escapes the hero's natural vignette. */ .hero-grid::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(108, 75, 220, 0.28) 1px, transparent 1px), linear-gradient(90deg, rgba(108, 75, 220, 0.28) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(200px circle at var(--mx, 50%) var(--my, 40%), #000 0%, transparent 100%); -webkit-mask-image: radial-gradient(200px circle at var(--mx, 50%) var(--my, 40%), #000 0%, transparent 100%); opacity: 0; transition: opacity 0.5s ease; } .hero-grid.glow-active::after { opacity: 1; } /* Floating hero orbs with mouse parallax */ .hero-orbs { position: absolute; inset: 0; z-index: -1; overflow: hidden; } .orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; will-change: transform; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .orb .core { display: block; width: 100%; height: 100%; border-radius: 50%; animation: orb-drift 14s ease-in-out infinite alternate; } .orb.o1 { width: 420px; height: 420px; top: -80px; right: 6%; } .orb.o1 .core { background: radial-gradient(circle, rgba(143, 109, 245, 0.5) 0%, transparent 70%); } .orb.o2 { width: 340px; height: 340px; bottom: 4%; left: -60px; } .orb.o2 .core { background: radial-gradient(circle, rgba(108, 75, 220, 0.38) 0%, transparent 70%); animation-duration: 18s; animation-delay: -6s; } .orb.o3 { width: 260px; height: 260px; top: 32%; left: 38%; } .orb.o3 .core { background: radial-gradient(circle, rgba(183, 155, 255, 0.4) 0%, transparent 70%); animation-duration: 11s; animation-delay: -3s; } @keyframes orb-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, 26px) scale(1.12); } } @media (prefers-reduced-motion: reduce) { .orb .core { animation: none; } .orb { transition: none; } } @media (max-width: 860px) { .orb .core { animation: none; } .orb { transition: none; } } .hero-inner { max-width: none; text-align: center; display: flex; flex-direction: column; align-items: center; } .hero-inner h1 { order: 1; margin-top: 0; } .hero-inner .hero-badge { order: 2; margin-bottom: 26px; } .hero-inner .lead { order: 3; } .hero-inner .hero-actions { order: 4; } .hero-inner .hero-stats { order: 5; align-self: stretch; } .hero h1 { margin: 0 auto 26px; max-width: 850px; } .hero .lead { font-size: 1.22rem; margin: 0 auto 40px; } .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-bottom: 64px; } .hero-badge { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px 8px 10px; font-size: 0.85rem; font-weight: 600; color: var(--ink-2); box-shadow: var(--shadow-sm); } .hero-badge .dot { width: 26px; height: 26px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; color: #fff; font-size: 0.72rem; } .hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; border-top: 1px solid var(--line); padding-top: 36px; text-align: center; } .hero-stats .stat { padding: 0 48px; border-right: 1px solid var(--line); } .hero-stats .stat:last-child { border-right: none; } .stat-num { font-family: var(--font-display); font-size: 2.3rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); } .stat-num .grad-text { font-size: inherit; } .stat-label { font-size: 0.9rem; color: var(--ink-3); margin-top: 2px; } /* ---------- Page hero (interior pages) ---------- */ .page-hero { position: relative; padding: 170px 0 90px; overflow: hidden; text-align: center; } .page-hero .hero-bg, .page-hero .hero-grid { z-index: -1; } /* Badge/eyebrow reads as support, so it sits below the headline */ .page-hero .container { display: flex; flex-direction: column; align-items: center; } .page-hero h1 { order: 1; margin: 0 auto 22px; max-width: 22ch; } .page-hero .eyebrow, .page-hero .hero-badge { order: 2; margin-bottom: 22px; } .page-hero .lead { order: 3; margin: 0 auto; } .page-hero .hero-actions { order: 4; justify-content: center; } /* ---------- Marquee ---------- */ .marquee-section { padding: 34px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; overflow: hidden; } .marquee-label { text-align: center; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 22px; } .marquee { display: flex; gap: 72px; width: max-content; animation: marquee 36s linear infinite; } .marquee img { height: 40px; width: auto; object-fit: contain; filter: grayscale(1) opacity(0.55); } @keyframes marquee { to { transform: translateX(calc(-50% - 36px)); } } /* ---------- Cards / Services ---------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 700px) { .card-grid.cols-2 { grid-template-columns: 1fr; } } .card { position: relative; display: flex; flex-direction: column; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 38px 32px; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; overflow: hidden; } .card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease; } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; } .card:hover::before { transform: scaleX(1); } /* On touch devices there's no hover, so cards "light up" as they pass through the centre of the viewport instead (class set in main.js) */ @media (hover: none) { .card.card-active { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; } .card.card-active::before { transform: scaleX(1); } .card.card-active .card-link svg { transform: translateX(4px); } } .card-icon { width: 54px; height: 54px; border-radius: 16px; background: var(--bg-tint); color: var(--brand); display: grid; place-items: center; margin-bottom: 24px; } .card-icon svg { width: 26px; height: 26px; } .card h3 { font-size: 1.28rem; margin-bottom: 12px; } .card p { color: var(--ink-2); font-size: 0.99rem; margin-bottom: 22px; } .card-link { display: inline-flex; align-items: center; gap: 8px; /* Pins the link to the card's bottom edge regardless of text length */ margin-top: auto; font-family: var(--font-display); font-weight: 600; font-size: 0.93rem; color: var(--brand); } .card-link svg { width: 15px; height: 15px; transition: transform 0.25s ease; } .card:hover .card-link svg { transform: translateX(4px); } /* ---------- Work / Portfolio ---------- */ .work-item.work-hidden { display: none; } .work-more { display: flex; justify-content: center; margin-top: 36px; } .work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .work-item { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-tint); display: block; } .work-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .work-item:hover img { transform: scale(1.06); } .work-overlay { position: absolute; inset: 0; background: linear-gradient(200deg, transparent 40%, rgba(20, 12, 46, 0.55) 75%, rgba(20, 12, 46, 0.92) 100%); transition: background 0.35s ease; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; } .work-overlay h3 { color: #fff; font-size: 1.2rem; } .work-overlay span { color: rgba(255, 255, 255, 0.75); font-size: 0.85rem; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; } .work-overlay span svg { width: 13px; height: 13px; } .work-item.text-only { display: flex; align-items: center; justify-content: center; background: var(--grad); } .work-item.text-only .inner { text-align: center; color: #fff; padding: 24px; } .work-item.text-only h3 { font-size: 1.35rem; color: #fff; margin-bottom: 6px; } .work-item.text-only p { color: rgba(255, 255, 255, 0.8); font-size: 0.92rem; } /* ---------- Reviews ---------- */ .reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; } /* Extra-wide track so the live reviews get room to breathe */ .container-wide { max-width: 1560px; margin: 0 auto; padding: 0 28px; } /* Live Google reviews embed; min-height softens the layout shift while it loads */ .reviews-widget { min-height: 360px; overflow-anchor: none; } @media (max-width: 860px) { .reviews-widget { min-height: 480px; } } /* The widget is styled via CSS custom properties on its root element; override them to drop the box outline and let our page provide the frame */ .reviews-widget .sk-ww-google-reviews { --show-widget-border: none !important; --show-widget-border-radius: 0 !important; --widget-bg-color: transparent !important; --widget-padding: 0px !important; } /* Collapse the SociableKit attribution line (inline display/visibility can't fight height/margin/padding overrides) */ .reviews-widget .sk_branding { visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .review-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 30px; display: flex; flex-direction: column; gap: 18px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .review-card blockquote { color: var(--ink-2); font-size: 0.98rem; flex: 1; } .review-author { display: flex; align-items: center; gap: 12px; } .review-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; flex-shrink: 0; } .review-author .name { font-weight: 600; font-size: 0.95rem; line-height: 1.3; } .review-author .src { font-size: 0.8rem; color: var(--ink-3); } /* ---------- Split sections ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; /* Top-aligned so the heading and the first item of the taller column start on the same line instead of the shorter column floating mid-air */ align-items: start; } .split-content h2 { margin-bottom: 18px; } .split-content .lead { margin-bottom: 28px; } /* ---------- Team photo (about page) ---------- */ .team-photo { position: relative; aspect-ratio: 4 / 5; max-width: 440px; width: 100%; justify-self: center; border-radius: var(--radius); overflow: hidden; } /* On desktop the photo rides along while the (taller) bio column scrolls, pinning below the fixed header until it hits the bottom of its column */ @media (min-width: 861px) { .team-photo { position: sticky; top: 102px; align-self: start; } } .team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .team-photo-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: radial-gradient(circle at 30% 20%, rgba(124, 77, 255, 0.14), transparent 60%), radial-gradient(circle at 75% 85%, rgba(124, 77, 255, 0.1), transparent 55%), #fff; border: 1px dashed var(--line); } .team-monogram { font-family: var(--font-display); font-size: 5rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .team-photo-caption { font-size: 0.9rem; color: var(--ink-3); } .feature-list { display: flex; flex-direction: column; gap: 16px; } .feature-list li { display: flex; gap: 14px; align-items: flex-start; color: var(--ink-2); } .feature-list .check { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-tint); color: var(--brand); display: grid; place-items: center; margin-top: 2px; } .feature-list .check svg { width: 13px; height: 13px; } .feature-list strong { color: var(--ink); } /* ---------- Managed care panel ---------- */ .managed-panel { position: relative; border-radius: 28px; background: linear-gradient(135deg, #1b1235 0%, #2c1a5e 55%, #4c2fb0 100%); color: #fff; padding: 76px 64px; overflow: hidden; } .managed-panel::after { content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(143, 109, 245, 0.35) 0%, transparent 70%); top: -180px; right: -120px; } .managed-panel .eyebrow { color: var(--brand-soft); } .managed-panel h2 { color: #fff; max-width: 20ch; margin-bottom: 18px; } .managed-panel p { color: rgba(255, 255, 255, 0.78); max-width: 58ch; margin-bottom: 34px; font-size: 1.06rem; } .managed-panel .btn-primary { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); position: relative; z-index: 1; } .managed-features { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 40px; } .managed-features .pill { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 13px 16px; font-size: 0.9rem; font-weight: 500; } .managed-features .pill svg { width: 16px; height: 16px; color: var(--brand-soft); flex-shrink: 0; } /* ---------- Process timeline ---------- */ .process { display: flex; flex-direction: column; gap: 0; max-width: 880px; margin: 0 auto; } .process-step { display: grid; grid-template-columns: 88px 1fr; gap: 28px; position: relative; padding-bottom: 56px; } .process-step:last-child { padding-bottom: 0; } .process-step::before { content: ""; position: absolute; left: 43px; top: 64px; bottom: 8px; width: 2px; background: linear-gradient(var(--line), var(--line)); } .process-step:last-child::before { display: none; } .process-num { /* Paint above the timeline connector so the line runs behind the box */ position: relative; z-index: 1; width: 88px; height: 88px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--brand); flex-shrink: 0; } .process-body h3 { font-size: 1.3rem; margin: 8px 0 10px; } .process-body p { color: var(--ink-2); max-width: 68ch; } /* ---------- Pricing ---------- */ .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; align-items: stretch; } .price-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 42px 36px; display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; } .price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .price-card.featured { border: 2px solid var(--brand); box-shadow: var(--shadow-lg); position: relative; } .price-card .tag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--grad); color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 16px; border-radius: 999px; white-space: nowrap; } .price-card h3 { font-size: 1.25rem; margin-bottom: 8px; } .price-card .price { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; letter-spacing: -0.03em; margin: 10px 0 4px; } .price-card .price small { font-size: 1rem; font-weight: 500; color: var(--ink-3); letter-spacing: 0; } .price-card .price-note { font-size: 0.88rem; color: var(--ink-3); margin-bottom: 26px; } .price-card .price-source { display: inline-block; margin-top: 12px; font-size: 0.78rem; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; } .price-card .price-source:hover { color: var(--brand); } .price-card .feature-list { margin-bottom: 32px; flex: 1; } .price-card .feature-list li { font-size: 0.95rem; } .price-card .btn { justify-content: center; } /* ---------- FAQ ---------- */ .faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--brand); transition: transform 0.25s ease; flex-shrink: 0; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item .faq-body { padding: 0 26px 24px; color: var(--ink-2); } /* ---------- Contact ---------- */ .contact-wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; } .contact-info h2 { margin-bottom: 16px; } .contact-info .lead { margin-bottom: 36px; } .contact-lines { display: flex; flex-direction: column; gap: 18px; } .contact-line { display: flex; align-items: center; gap: 16px; font-weight: 500; } .contact-line .ic { width: 46px; height: 46px; border-radius: 14px; background: var(--bg-tint); color: var(--brand); display: grid; place-items: center; flex-shrink: 0; } .contact-line .ic svg { width: 20px; height: 20px; } .contact-line small { display: block; font-size: 0.8rem; color: var(--ink-3); font-weight: 400; } .contact-line a:hover { color: var(--brand); } .contact-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 44px 40px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .form-success { text-align: center; padding: 22px 20px; margin-top: 18px; border-radius: var(--radius-sm); background: #eefaf2; border: 1px solid #b9e7c9; } .form-success .check { width: 48px; height: 48px; border-radius: 50%; background: #fff; color: #147a3d; display: inline-grid; place-items: center; margin-bottom: 12px; } .form-success .check svg { width: 22px; height: 22px; } .form-success h3 { margin-bottom: 6px; color: #147a3d; font-size: 1.15rem; } .form-success p { color: var(--ink-2); margin: 0; font-size: 0.95rem; } .form-error { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-sm); background: #fdf0ef; border: 1px solid #f3cdc9; color: #8b2f26; font-size: 0.95rem; text-align: center; } /* Honeypot field: parked off-screen where only bots will find it */ .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .form-group { margin-bottom: 18px; } .form-group label { display: block; font-size: 0.86rem; font-weight: 600; margin-bottom: 7px; } .form-group input, .form-group select, .form-group textarea { width: 100%; font: inherit; font-size: 0.95rem; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg-soft); color: var(--ink); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .form-group textarea { resize: vertical; min-height: 120px; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(108, 75, 220, 0.12); background: #fff; } .contact-form .btn { width: 100%; justify-content: center; margin-top: 6px; } .form-note { font-size: 0.82rem; color: var(--ink-3); text-align: center; margin-top: 14px; } /* ---------- Live SEO audit widget ---------- */ .audit-widget { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 48px 44px; max-width: 860px; margin: 0 auto; } .audit-widget .hidden { display: none; } .audit-input-row { display: flex; gap: 12px; } .audit-input-row input { flex: 1; font: inherit; font-size: 1.02rem; padding: 15px 20px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--bg-soft); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .audit-input-row input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(108, 75, 220, 0.12); background: #fff; } .audit-note { font-size: 0.84rem; color: var(--ink-3); text-align: center; margin-top: 14px; } .audit-loading { text-align: center; padding: 24px 0 8px; } .audit-spinner { width: 58px; height: 58px; border-radius: 50%; border: 4px solid var(--bg-tint); border-top-color: var(--brand); margin: 0 auto 22px; animation: audit-spin 0.9s linear infinite; } @keyframes audit-spin { to { transform: rotate(360deg); } } .audit-loading h3 { margin-bottom: 6px; } .audit-loading p { color: var(--ink-3); font-size: 0.95rem; } .audit-results-head { text-align: center; margin-bottom: 34px; } .audit-results-head h3 { font-size: 1.4rem; } .audit-results-head h3 span { color: var(--brand); } .gauge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; margin-bottom: 28px; } .gauge { text-align: center; } .gauge-ring { width: 108px; height: 108px; border-radius: 50%; background: conic-gradient(var(--line) 0deg, var(--line) 360deg); display: grid; place-items: center; margin: 0 auto 12px; } .gauge-ring::before { content: ""; grid-area: 1/1; width: 86px; height: 86px; border-radius: 50%; background: #fff; } .gauge-num { grid-area: 1/1; font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; z-index: 1; } .gauge-label { font-size: 0.86rem; font-weight: 600; color: var(--ink-2); } .audit-metrics { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 28px; } .metric-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-tint); border-radius: 999px; padding: 8px 16px; font-size: 0.86rem; color: var(--ink-2); } .metric-chip .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .audit-verdict { background: var(--bg-tint); border-left: 3px solid var(--brand); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 18px 22px; color: var(--ink-2); margin-bottom: 28px; } .audit-benchmark { text-align: center; font-size: 0.9rem; color: var(--ink-3); margin-bottom: 24px; } .audit-benchmark strong { color: var(--brand); } .audit-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } .audit-error { text-align: center; padding: 16px 0; } .audit-error h3 { margin-bottom: 8px; } .audit-error p { color: var(--ink-2); margin-bottom: 22px; } @media (max-width: 640px) { .audit-widget { padding: 32px 22px; } .audit-input-row { flex-direction: column; } } /* ---------- Performance flex badge ---------- */ .perf-flex { position: fixed; left: 50%; bottom: 20px; z-index: 90; display: flex; align-items: center; gap: 12px; background: #14101f; color: #fff; border-radius: 999px; padding: 12px 18px 12px 14px; font-size: 0.86rem; box-shadow: 0 12px 40px rgba(20, 16, 31, 0.4); opacity: 0; transform: translate(-50%, 16px); transition: opacity 0.5s ease, transform 0.5s ease; max-width: min(480px, calc(100vw - 40px)); } .perf-flex.visible { opacity: 1; transform: translate(-50%, 0); } .perf-flex .bolt { width: 34px; height: 34px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; flex-shrink: 0; font-size: 1rem; } .perf-flex strong { color: #b79bff; } .perf-flex .close { background: none; border: none; color: rgba(255, 255, 255, 0.5); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 4px; flex-shrink: 0; } .perf-flex .close:hover { color: #fff; } @media (max-width: 640px) { .perf-flex { width: calc(100vw - 24px); max-width: none; bottom: 12px; border-radius: 18px; padding: 14px 16px; font-size: 0.92rem; gap: 12px; } } /* ---------- CTA band ---------- */ .cta-band { text-align: center; } .cta-band h2 { max-width: 22ch; margin: 0 auto 18px; } .cta-band .lead { margin: 0 auto 36px; } /* ---------- Footer ---------- */ .site-footer { background: #14101f; color: rgba(255, 255, 255, 0.7); padding: 72px 0 0; font-size: 0.94rem; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; padding-bottom: 56px; } .footer-brand img { height: 44px; width: auto; margin-bottom: 20px; } .footer-brand p { max-width: 38ch; } .footer-col h3 { color: #fff; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 20px; } .footer-col ul { display: flex; flex-direction: column; gap: 12px; } .footer-col a { transition: color 0.2s ease; } .footer-col a:hover { color: #fff; } .footer-social { display: flex; gap: 12px; margin-top: 20px; } .footer-social a { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); display: grid; place-items: center; transition: background 0.2s ease, transform 0.2s ease; } .footer-social a:hover { background: var(--brand); transform: translateY(-2px); } .footer-social svg { width: 18px; height: 18px; color: #fff; } .footer-ack { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 26px 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.45); text-align: center; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 22px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.45); } .footer-bottom a:hover { color: #fff; } /* ---------- Legal page ---------- */ .legal-content { max-width: 800px; margin: 0 auto; } .legal-content h2 { font-size: 1.6rem; margin: 44px 0 16px; } .legal-content h3 { font-size: 1.2rem; margin: 32px 0 12px; } .legal-content p, .legal-content li { color: var(--ink-2); margin-bottom: 14px; } .legal-content ul { list-style: disc; padding-left: 24px; } .legal-content strong { color: var(--ink); } /* ---------- Reveal animations ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .reveal.visible { opacity: 1; transform: none; } .reveal-d1 { transition-delay: 0.08s; } .reveal-d2 { transition-delay: 0.16s; } .reveal-d3 { transition-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .marquee { animation: none; } html { scroll-behavior: auto; } } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .work-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .split { gap: 48px; } } @media (max-width: 860px) { .section { padding: 76px 0; } .hero { padding: 150px 0 90px; } .page-hero { padding: 140px 0 70px; } .nav-toggle { display: flex; } body.nav-open { overflow: hidden; } /* The scrolled header's backdrop-filter would make it the containing block for this fixed panel (clipping it to the 78px header strip), so on mobile the header gets a solid background instead */ .site-header.scrolled { background: rgba(255, 255, 255, 0.97); backdrop-filter: none; -webkit-backdrop-filter: none; } /* Full-screen slide-in menu */ .nav-links { position: fixed; top: 0; left: 0; right: 0; height: 100dvh; z-index: 99; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; pointer-events: none; background: radial-gradient(70% 40% at 90% 0%, rgba(143, 109, 245, 0.14) 0%, transparent 100%), radial-gradient(50% 35% at 0% 100%, rgba(108, 75, 220, 0.08) 0%, transparent 100%), #ffffff; padding: 96px 28px 32px; transform: translateX(100%); visibility: hidden; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.5s; } .nav-links.open { transform: none; visibility: visible; pointer-events: auto; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } /* Keep the logo and hamburger clickable above the open panel */ .logo, .nav-toggle { position: relative; z-index: 100; } /* Neutralize the scrolled header's blur/background while the menu is open so it doesn't paint a frosted band over the panel */ body.nav-open .site-header.scrolled { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-color: transparent; } .nav-links a:not(.btn) { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; padding: 13px 4px; border-bottom: 1px solid var(--line); transition: none; } .nav-links a.active { color: var(--brand); } .nav-links > a:not(.btn)::after, .nav-dropdown > a::after { display: none; } .nav-links .btn { margin-top: 24px; justify-content: center; padding: 14px 28px; font-size: 0.98rem; } .nav-dropdown .chev { display: none; } .nav-dropdown > a { display: block; } .dropdown-menu { position: static; left: auto; top: auto; transform: none !important; opacity: 1; pointer-events: auto; min-width: 0; border: none; box-shadow: none; padding: 0 0 0 20px; transition: none; } .dropdown-menu::before { display: none; } .dropdown-menu a { border-bottom: 1px solid var(--line); border-radius: 0; padding: 10px 4px; } .nav-links .dropdown-menu a { font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; color: var(--ink-2); letter-spacing: 0; transition: none; } .split { grid-template-columns: 1fr; } .split .team-photo { order: -1; margin-bottom: 8px; } .contact-wrap { grid-template-columns: 1fr; gap: 48px; } /* Centre the contact intro on mobile to match the rest of the page */ .contact-info { text-align: center; } .contact-info .eyebrow { display: block; } .contact-info .lead { margin-left: auto; margin-right: auto; } .contact-lines { align-items: center; } .contact-line { text-align: left; } .managed-panel { padding: 52px 32px; } /* When split sections stack, center the headings and buttons for a consistent rhythm; body copy and checklists stay left for readability */ .split-content .eyebrow, .managed-panel .eyebrow { display: block; text-align: center; } .split-content h2, .managed-panel h2 { text-align: center; margin-left: auto; margin-right: auto; } .split-content .hero-actions { justify-content: center; } .split-content .role-line { text-align: center; } .split-content > .btn, .managed-panel > .btn { display: flex; width: fit-content; margin-left: auto; margin-right: auto; } .hero-stats .stat { padding: 0 32px; } .process-step { grid-template-columns: 64px 1fr; gap: 20px; } .process-num { width: 64px; height: 64px; border-radius: 18px; font-size: 1.25rem; } .process-step::before { left: 31px; top: 72px; } } @media (max-width: 600px) { .work-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 36px; text-align: center; } .footer-brand img { margin-left: auto; margin-right: auto; } .footer-brand p { max-width: none; } .footer-social { justify-content: center; } .footer-bottom { justify-content: center; text-align: center; } .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 8px; padding-inline: 20px; } .hero-stats .stat { border-right: none; padding: 0; min-width: 0; } .stat-num { font-size: 1.85rem; } .stat-label { font-size: 0.82rem; text-wrap: balance; } .contact-form { padding: 32px 24px; } /* Headline sits higher now that the rating badge is below it */ .hero { padding-top: 118px; } }