/* ========================================================================== OMNITICS: Full-funnel B2B growth agency Design system: hybrid light base with dramatic dark bands. Fonts: Sora (display) · Inter (body) · Instrument Serif (italic accents) ========================================================================== */ /* ---------- 1. Tokens ---------- */ :root { /* Color */ --ink-900: #0e0a1e; --ink-800: #16102c; --ink-700: #1e1540; --ink-600: #291d54; --paper: #f8f6f1; --surface: #ffffff; --line: #e9e4ec; --line-dark: rgba(255, 255, 255, 0.09); --text: #221b36; --muted: #665e7c; --text-inv: #f2eefa; --muted-inv: #b0a7c6; --coral: #ff6475; --violet-deep: #5b36c9; --violet: #7148e6; --gold: #fecf2e; --gold-deep: #e8a40c; --grad: linear-gradient(120deg, var(--violet), var(--coral)); --grad-soft: linear-gradient(120deg, rgba(113, 72, 230, 0.12), rgba(255, 100, 117, 0.12)); /* Type */ --font-display: "Sora", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-serif: "Instrument Serif", Georgia, serif; /* Shape & shadow */ --radius-lg: 28px; --radius: 18px; --radius-sm: 12px; --shadow-sm: 0 1px 2px rgba(24, 16, 40, 0.06), 0 4px 12px rgba(24, 16, 40, 0.05); --shadow-md: 0 2px 6px rgba(24, 16, 40, 0.06), 0 16px 40px rgba(24, 16, 40, 0.1); --shadow-lg: 0 8px 24px rgba(24, 16, 40, 0.1), 0 32px 80px rgba(24, 16, 40, 0.16); --shadow-glow: 0 0 0 1px rgba(113, 72, 230, 0.25), 0 12px 48px rgba(113, 72, 230, 0.25); /* Motion */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --speed: 0.35s; /* Layout */ --container: 1180px; --header-h: 76px; } /* ---------- 2. Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; color: var(--text); background: var(--paper); -webkit-font-smoothing: antialiased; /* `clip` (not `hidden`) prevents sideways scroll WITHOUT turning into a scroll container, which would otherwise break `position: sticky` (the blog sidebar) for every descendant. */ overflow-x: clip; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul[class], ol[class] { list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ::selection { background: rgba(113, 72, 230, 0.22); } :focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; } /* Italic serif accent inside headings, the “expensive” flourish */ .accent-serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; /* keep italic overhang from clipping */ } .section-dark .accent-serif { background: linear-gradient(120deg, #ffd24a, #ff8a97); -webkit-background-clip: text; background-clip: text; } /* ---------- 3. Layout utilities ---------- */ .container { width: min(var(--container), 100% - 48px); margin-inline: auto; } .section { padding: 104px 0; position: relative; } .section-tint { background: var(--surface); } .section-dark { background: var(--ink-800); color: var(--text-inv); } .section-dark .eyebrow { color: #b9a6ff; } .section-dark .section-sub, .section-dark p { color: var(--muted-inv); } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--violet-deep); margin-bottom: 18px; } .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--grad); } .section-head { max-width: 720px; margin-bottom: 64px; } .section-head.is-centered { margin-inline: auto; text-align: center; } .section-head.is-centered .eyebrow { justify-content: center; } .section-title { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); margin-bottom: 18px; } .section-sub { font-size: 1.125rem; color: var(--muted); max-width: 60ch; } .is-centered .section-sub { margin-inline: auto; } /* Subtle film-grain for dark bands */ .grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- 4. Buttons ---------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 30px; border-radius: 999px; font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; transition: transform var(--speed) var(--ease-spring), box-shadow var(--speed) var(--ease-out), background-color var(--speed) var(--ease-out), border-color var(--speed) var(--ease-out), color var(--speed) var(--ease-out); will-change: transform; } .btn:active { transform: scale(0.97); } .btn .btn-arrow { transition: transform var(--speed) var(--ease-spring); } .btn:hover .btn-arrow { transform: translateX(4px); } .btn-primary { color: #fff; /* Keep the label over the higher-contrast violet; coral only hints at the far edge. Text-shadow lifts legibility on the warm end (WCAG 1.4.3). */ background: linear-gradient(120deg, var(--violet) 0%, var(--violet) 58%, var(--coral) 130%); text-shadow: 0 1px 2px rgba(24, 16, 40, 0.32); box-shadow: 0 8px 24px rgba(113, 72, 230, 0.35); } .btn-primary:hover { box-shadow: 0 12px 36px rgba(113, 72, 230, 0.5); transform: translateY(-2px); } .btn-ghost { color: var(--text); border: 1.5px solid var(--line); background: rgba(255, 255, 255, 0.6); } .btn-ghost:hover { border-color: var(--violet); color: var(--violet-deep); transform: translateY(-2px); } .section-dark .btn-ghost, .btn-ghost.on-dark { color: var(--text-inv); border-color: var(--line-dark); background: rgba(255, 255, 255, 0.04); } .section-dark .btn-ghost:hover, .btn-ghost.on-dark:hover { border-color: rgba(185, 166, 255, 0.6); color: #fff; } .btn-lg { padding: 18px 38px; font-size: 1.05rem; } /* Text link with animated underline */ .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--violet-deep); } .link-arrow svg { transition: transform var(--speed) var(--ease-spring); } .link-arrow:hover svg { transform: translateX(4px); } /* ---------- 5. Header / navigation ---------- */ .site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h); transition: background-color var(--speed) var(--ease-out), box-shadow var(--speed) var(--ease-out), border-color var(--speed) var(--ease-out); border-bottom: 1px solid transparent; } .site-header.is-scrolled { background: rgba(248, 246, 241, 0.82); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-bottom-color: var(--line); box-shadow: 0 8px 32px rgba(24, 16, 40, 0.06); } /* On pages opening with a dark hero, header text starts light */ .header-on-dark:not(.is-scrolled) { color: var(--text-inv); } .header-on-dark:not(.is-scrolled) .nav-link { color: var(--text-inv); } .header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 32px; } .brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; } .brand-mark { width: 34px; height: 34px; flex: none; } .main-nav { display: flex; align-items: center; gap: 28px; } .nav-list { display: flex; align-items: center; gap: 6px; } .nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 10px; font-family: var(--font-display); font-size: 0.92rem; font-weight: 600; color: var(--text); transition: color 0.2s var(--ease-out), background-color 0.2s var(--ease-out); } .nav-link:hover { color: var(--violet-deep); } .header-on-dark:not(.is-scrolled) .nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.07); } .nav-link.is-active { color: var(--violet-deep); } .header-on-dark:not(.is-scrolled) .nav-link.is-active { color: #cdbbff; } .nav-link .chev { transition: transform 0.25s var(--ease-out); } /* Dropdown */ .nav-item { position: relative; } .dropdown { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(10px) scale(0.98); width: min(760px, calc(100vw - 32px)); display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 6px; padding: 14px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease-out), transform 0.3s var(--ease-spring), visibility 0s 0.25s; } .dropdown::before { /* hover bridge so the menu doesn't close crossing the gap */ content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } .nav-item.is-open .dropdown, .nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) scale(1); transition: opacity 0.25s var(--ease-out), transform 0.3s var(--ease-spring), visibility 0s; } .nav-item.is-open > .nav-link .chev, .nav-item:hover > .nav-link .chev { transform: rotate(180deg); } .dropdown-link { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; padding: 16px 13px; border-radius: var(--radius-sm); transition: background-color 0.2s var(--ease-out), transform 0.2s var(--ease-spring); } .dropdown-link:hover { background: var(--grad-soft); transform: translateY(-3px); } .dropdown-link strong { display: block; font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; line-height: 1.25; } .dropdown-link small { display: block; font-size: 0.8rem; color: var(--muted); line-height: 1.4; margin-top: 5px; } .dd-icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--grad-soft); color: var(--violet-deep); transition: transform 0.25s var(--ease-spring); } .dropdown-link:hover .dd-icon { transform: scale(1.08) rotate(-4deg); } /* Keep the wide mega-menu fully on-screen on smaller laptops */ @media (min-width: 861px) and (max-width: 1080px) { .dropdown { width: min(560px, calc(100vw - 32px)); } } /* Resources mega-menu sits further right, so anchor it to the right edge so it never overflows the viewport (desktop only; mobile uses the accordion). */ @media (min-width: 861px) { .dropdown.dropdown-resources { left: auto; right: 0; width: min(560px, calc(100vw - 32px)); transform: translateY(10px) scale(0.98); transform-origin: top right; } .nav-item.is-open > .dropdown.dropdown-resources, .nav-item:hover > .dropdown.dropdown-resources, .nav-item:focus-within > .dropdown.dropdown-resources { transform: translateY(0) scale(1); } } /* Mobile toggle */ .nav-toggle { display: none; position: relative; z-index: 110; width: 44px; height: 44px; border-radius: 12px; } .nav-toggle span { position: absolute; left: 11px; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.3s var(--ease-spring), top 0.3s var(--ease-out); } .nav-toggle span:nth-child(1) { top: 17px; } .nav-toggle span:nth-child(2) { top: 25px; } body.nav-open .nav-toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); } body.nav-open .nav-toggle span:nth-child(2) { top: 21px; transform: rotate(-45deg); } /* ---------- 6. Hero (dark) ---------- */ .hero { position: relative; background: radial-gradient(1200px 700px at 75% -10%, #2a1b66 0%, transparent 60%), radial-gradient(900px 600px at 10% 110%, #43203a 0%, transparent 55%), var(--ink-900); color: var(--text-inv); padding: calc(var(--header-h) + 40px) 0 84px; overflow: hidden; } .hero .grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 75%); pointer-events: none; } .orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; pointer-events: none; animation: orb-float 14s var(--ease-out) infinite alternate; } .orb-1 { width: 480px; height: 480px; top: -160px; right: -80px; background: #7148e6; } .orb-2 { width: 380px; height: 380px; bottom: -180px; left: -120px; background: #ff6475; animation-delay: -5s; } .orb-3 { width: 220px; height: 220px; top: 40%; left: 46%; background: #fec92e; opacity: 0.3; animation-delay: -9s; } @keyframes orb-float { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(36px, -30px, 0) scale(1.08); } } .hero-inner { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; } .hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-dark); background: rgba(255, 255, 255, 0.05); font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: #cfc9e6; margin-bottom: 18px; } .hero-badge .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #fecf2e; box-shadow: 0 0 0 0 rgba(254, 207, 46, 0.6); animation: pulse 2.2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(254, 207, 46, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(254, 207, 46, 0); } 100% { box-shadow: 0 0 0 0 rgba(254, 207, 46, 0); } } .hero-title { font-size: clamp(2.4rem, 1.5rem + 4.1vw, 4rem); font-weight: 800; margin-bottom: 16px; } .hero-sub { font-size: 1.16rem; color: var(--muted-inv); max-width: 52ch; margin-bottom: 26px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 44px; } .hero-meta { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 0.9rem; color: var(--muted-inv); } .hero-meta li { display: inline-flex; align-items: center; gap: 9px; } .hero-meta svg { color: #fecf2e; flex: none; } /* Staged entrance for hero children */ [data-hero-fade] { opacity: 0; transform: translateY(26px); animation: hero-fade 0.9s var(--ease-out) forwards; animation-delay: var(--d, 0s); } @keyframes hero-fade { to { opacity: 1; transform: translateY(0); } } /* Hero visual: “revenue engine” glass dashboard */ .hero-visual { position: relative; perspective: 1200px; } .engine-card { position: relative; background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)); border: 1px solid var(--line-dark); border-radius: var(--radius-lg); padding: 28px; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45); transform-style: preserve-3d; transition: transform 0.4s var(--ease-out); } .engine-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .engine-head strong { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; } .engine-status { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #fecf2e; } .engine-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fecf2e; animation: pulse 2.2s infinite; } .engine-row { display: grid; grid-template-columns: 116px 1fr 52px; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.85rem; } .engine-row .label { color: #cfc9e6; font-weight: 500; display: flex; align-items: center; gap: 9px; } .engine-row .label svg { color: #b9a6ff; flex: none; } .engine-bar { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .engine-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad); animation: bar-grow 1.4s var(--ease-out) forwards; animation-delay: var(--d, 0.6s); } @keyframes bar-grow { to { width: var(--w, 70%); } } .engine-row .value { text-align: right; font-family: var(--font-display); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; } /* Floating mini-cards around the dashboard */ .float-chip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: rgba(23, 16, 44, 0.85); border: 1px solid var(--line-dark); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); font-size: 0.8rem; font-weight: 600; animation: chip-float 6s ease-in-out infinite alternate; } .float-chip svg { color: #fecf2e; flex: none; } .float-chip small { display: block; font-weight: 400; color: var(--muted-inv); } .float-chip.chip-a { top: -26px; right: 18px; } .float-chip.chip-b { bottom: -24px; left: -18px; animation-delay: -3s; } @keyframes chip-float { from { transform: translateZ(var(--cz, 0px)) translateY(-6px); } to { transform: translateZ(var(--cz, 0px)) translateY(8px); } } /* ---------- 7. Logo marquee ---------- */ .marquee-section { padding: 56px 0 64px; background: var(--paper); } .marquee-label { text-align: center; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 32px; } .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee-track { display: flex; align-items: center; gap: 64px; width: max-content; padding-right: 64px; animation: marquee 30s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-50%); } } .logo-pill { display: inline-flex; align-items: center; gap: 9px; padding: 11px 21px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; color: #5a5470; white-space: nowrap; transition: color 0.25s var(--ease-out), transform 0.25s var(--ease-spring), border-color 0.25s, box-shadow 0.25s; } .logo-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--grad); opacity: 0.85; } .logo-pill:hover { color: var(--text); transform: translateY(-3px); border-color: rgba(113, 72, 230, 0.35); box-shadow: var(--shadow-md); } .alumni-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; max-width: 880px; margin: 0 auto; padding: 0 24px; } @media (max-width: 620px) { .alumni-row { gap: 10px; } .logo-pill { font-size: 0.9rem; padding: 9px 16px; } .logo-pill::before { width: 7px; height: 7px; } } /* ---------- 8. Service cards ---------- */ .cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .service-card { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 34px 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform var(--speed) var(--ease-out), box-shadow var(--speed) var(--ease-out), border-color var(--speed) var(--ease-out); will-change: transform; } .service-card:hover { transform: translateY(-6px); border-color: rgba(113, 72, 230, 0.35); box-shadow: var(--shadow-md); } /* cursor-tracking spotlight (driven by JS via --mx / --my) */ .glow-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(113, 72, 230, 0.09), transparent 65%); opacity: 0; transition: opacity 0.4s var(--ease-out); pointer-events: none; } .glow-card:hover::before { opacity: 1; } .section-dark .glow-card::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(185, 166, 255, 0.13), transparent 65%); } .card-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--grad-soft); color: var(--violet-deep); transition: transform 0.35s var(--ease-spring), background 0.35s, color 0.35s; } .service-card:hover .card-icon { background: var(--grad); color: #fff; transform: scale(1.06) rotate(-5deg); } .service-card h3 { font-size: 1.22rem; } .service-card p { color: var(--muted); font-size: 0.97rem; flex: 1; } .card-tags { display: flex; flex-wrap: wrap; gap: 8px; } .tag { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.03em; padding: 5px 11px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--muted); } .card-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: var(--violet-deep); margin-top: 4px; } .card-link svg { transition: transform var(--speed) var(--ease-spring); } .service-card:hover .card-link svg { transform: translateX(5px); } .card-wide { grid-column: span 1; justify-content: center; background: var(--ink-800); color: var(--text-inv); border-color: var(--ink-700); } .card-wide h3 { color: #fff; } .card-wide p { color: var(--muted-inv); } /* ---------- 9. Growth system (dark band) ---------- */ .system-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; margin-bottom: 80px; } /* connecting line behind nodes */ .system-grid::before { content: ""; position: absolute; top: 44px; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, transparent, rgba(185, 166, 255, 0.4) 12%, rgba(185, 166, 255, 0.4) 88%, transparent); } .system-node { position: relative; padding: 26px 22px; border: 1px solid var(--line-dark); border-radius: var(--radius); background: linear-gradient(170deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); transition: transform var(--speed) var(--ease-out), border-color var(--speed), background var(--speed); } .system-node:hover { transform: translateY(-6px); border-color: rgba(185, 166, 255, 0.45); } .node-step { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; margin-bottom: 18px; font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; color: #fff; background: var(--grad); box-shadow: 0 0 0 6px var(--ink-800), 0 0 24px rgba(113, 72, 230, 0.5); } .system-node h3 { font-size: 1.18rem; margin-bottom: 8px; color: #fff; } .system-node p { font-size: 0.9rem; margin-bottom: 16px; } .chip-row { display: flex; flex-wrap: wrap; gap: 7px; } .chip { font-size: 0.72rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-dark); color: #cfc9e6; background: rgba(255, 255, 255, 0.04); transition: border-color 0.25s, color 0.25s; } .system-node:hover .chip { border-color: rgba(185, 166, 255, 0.5); color: #fff; } /* Stats row with count-up numbers */ .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center; padding-top: 56px; border-top: 1px solid var(--line-dark); } .stat-value { font-family: var(--font-display); font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; background: linear-gradient(120deg, #fff 30%, #b9a6ff); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; } .stat-label { margin-top: 6px; font-size: 0.9rem; color: var(--muted-inv); } /* ---------- 10. Process ---------- */ .process { display: grid; gap: 0; max-width: 880px; } .process-item { position: relative; display: grid; grid-template-columns: 84px 1fr; gap: 30px; padding: 36px 0; } .process-item:not(:last-child)::before { content: ""; position: absolute; left: 41px; top: 96px; bottom: -16px; width: 2px; background: linear-gradient(var(--line), transparent); } .process-num { width: 84px; height: 84px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--line); font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; color: var(--muted); transition: all 0.35s var(--ease-out); } .process-item:hover .process-num { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 12px 32px rgba(113, 72, 230, 0.35); transform: scale(1.05); } .process-body h3 { font-size: 1.35rem; margin-bottom: 10px; } .process-body p { color: var(--muted); max-width: 58ch; } .process-body .micro { display: inline-block; margin-top: 12px; font-size: 0.82rem; font-weight: 600; color: var(--violet-deep); background: var(--grad-soft); padding: 6px 12px; border-radius: 999px; } /* ---------- 11. Feature / value grids ---------- */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .feature-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .feature-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .feature { padding: 30px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: transform var(--speed) var(--ease-out), box-shadow var(--speed); } .feature:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .feature h3 { font-size: 1.08rem; margin: 14px 0 8px; } .feature p { font-size: 0.93rem; color: var(--muted); } .feature .card-icon { width: 46px; height: 46px; } .feature:hover .card-icon { background: var(--grad); color: #fff; transform: scale(1.06) rotate(-5deg); } /* Checklist */ .checklist { display: grid; gap: 14px; } .checklist li { display: flex; gap: 13px; align-items: flex-start; font-size: 1rem; } .checklist li strong { font-weight: 600; } .checklist .check { flex: none; width: 24px; height: 24px; margin-top: 2px; display: grid; place-items: center; border-radius: 50%; background: var(--grad-soft); color: var(--violet-deep); } .section-dark .checklist .check { background: rgba(254, 207, 46, 0.12); color: #fecf2e; } /* Two-column split */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } .split-copy .section-title { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); } .split-copy > p { color: var(--muted); margin-bottom: 28px; } /* ---------- 12. Testimonials ---------- */ .t-slider { position: relative; max-width: 860px; margin-inline: auto; overflow: hidden; } .t-track { display: flex; transition: transform 0.55s var(--ease-out); } .t-slide { flex: 0 0 100%; padding: 8px; } .t-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 52px clamp(28px, 6vw, 64px) 44px; text-align: center; box-shadow: var(--shadow-sm); position: relative; } .t-card::before { content: "“"; position: absolute; top: 8px; left: 32px; font-family: var(--font-serif); font-size: 6rem; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0.6; } .t-quote { font-family: var(--font-display); font-size: clamp(1.1rem, 1rem + 0.7vw, 1.4rem); font-weight: 500; line-height: 1.5; letter-spacing: -0.01em; margin-bottom: 30px; } .t-person { display: flex; align-items: center; justify-content: center; gap: 14px; } .avatar { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; flex: none; } .t-person .t-who { display: block; text-align: left; font-size: 0.9rem; } .t-person strong { display: block; font-family: var(--font-display); } .t-person .t-who > span { display: block; color: var(--muted); } .t-controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 34px; } .t-btn { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; background: var(--surface); transition: all 0.25s var(--ease-out); } .t-btn:hover { border-color: var(--violet); color: var(--violet-deep); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .t-dots { display: flex; gap: 9px; } .t-dot { width: 9px; height: 9px; border-radius: 99px; background: var(--line); transition: all 0.3s var(--ease-out); } .t-dot.is-active { width: 26px; background: var(--grad); } /* ---------- 13. Blog cards ---------- */ .posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .post-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform var(--speed) var(--ease-out), box-shadow var(--speed); } .post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .post-cover { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; color: rgba(255, 255, 255, 0.92); } .post-cover svg { width: 64px; height: 64px; opacity: 0.9; transition: transform 0.5s var(--ease-spring); } .post-card:hover .post-cover svg { transform: scale(1.15) rotate(-4deg); } .cover-a { background: linear-gradient(135deg, #5b36c9, #ff6475); } .cover-b { background: linear-gradient(135deg, #f0a50a, #ff6475); } .cover-c { background: linear-gradient(135deg, #7148e6, #d6336c); } .cover-d { background: linear-gradient(135deg, #b45309, #dc2626); } .post-cover .post-cat { position: absolute; top: 14px; left: 14px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: rgba(22, 16, 44, 0.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.2); } .post-body { display: flex; flex-direction: column; gap: 12px; padding: 24px; flex: 1; } .post-meta { display: flex; gap: 14px; font-size: 0.8rem; color: var(--muted); } .post-title { font-size: 1.13rem; line-height: 1.35; transition: color 0.25s; } .post-card:hover .post-title { color: var(--violet-deep); } .post-excerpt { font-size: 0.92rem; color: var(--muted); flex: 1; } .post-card .card-link { margin-top: 2px; } .post-card.is-featured { grid-column: span 3; display: grid; grid-template-columns: 1.1fr 1fr; } .post-card.is-featured .post-cover { aspect-ratio: auto; min-height: 320px; } .post-card.is-featured .post-body { padding: 40px; justify-content: center; } .post-card.is-featured .post-title { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); } /* ---------- 14. Article ---------- */ .progress-bar { position: fixed; top: 0; left: 0; z-index: 120; height: 3px; width: 0; background: var(--grad); } .article-hero { padding: calc(var(--header-h) + 72px) 0 56px; background: var(--ink-800); color: var(--text-inv); position: relative; overflow: hidden; } .article-hero .container { position: relative; max-width: 860px; } .article-cat { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #b9a6ff; margin-bottom: 18px; } .article-title { font-size: clamp(1.8rem, 1.3rem + 2.6vw, 3rem); margin-bottom: 22px; } .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; font-size: 0.88rem; color: var(--muted-inv); } .article-body { max-width: 740px; margin-inline: auto; padding: 72px 24px 40px; font-size: 1.08rem; } .article-body h2 { font-size: 1.65rem; margin: 52px 0 18px; } .article-body h3 { font-size: 1.25rem; margin: 36px 0 14px; } .article-body p { margin-bottom: 20px; } .article-body ul, .article-body ol { margin: 0 0 22px 22px; } .article-body li { margin-bottom: 10px; } .article-body strong { font-weight: 650; } /* Inline text links get the underline treatment, but component links inside an article (CTA button, download card, related card) must keep their own design, not pick up the link colour/underline. */ .article-body a:not(.btn):not(.dl-card):not(.irc) { color: var(--violet-deep); text-decoration: underline; text-decoration-color: rgba(113, 72, 230, 0.35); text-underline-offset: 3px; transition: text-decoration-color 0.2s; } .article-body a:not(.btn):not(.dl-card):not(.irc):hover { text-decoration-color: var(--violet); } /* Markdown comparison tables (AEO-friendly; authored with | pipes |). */ .table-wrap { overflow-x: auto; margin: 28px 0; border: 1px solid var(--line); border-radius: 12px; } .md-table { width: 100%; border-collapse: collapse; font-size: 0.97rem; } .md-table th, .md-table td { padding: 11px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .md-table thead th { background: rgba(113, 72, 230, 0.06); font-family: var(--font-display); font-weight: 700; color: var(--text); } .md-table tbody tr:last-child td { border-bottom: 0; } .md-table tbody tr:nth-child(even) { background: rgba(113, 72, 230, 0.025); } .article-body blockquote { margin: 32px 0; padding: 26px 30px; border-left: 3px solid; border-image: var(--grad) 1; background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-family: var(--font-display); font-size: 1.12rem; font-weight: 500; } .callout { margin: 32px 0; padding: 24px 28px; border-radius: var(--radius); background: var(--grad-soft); border: 1px solid rgba(113, 72, 230, 0.2); font-size: 0.98rem; } .callout strong { color: var(--violet-deep); } .article-body table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 0.93rem; } .article-body th, .article-body td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); } .article-body th { font-family: var(--font-display); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .author-box { display: flex; gap: 18px; align-items: center; margin: 56px 0 0; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .author-box .avatar { width: 58px; height: 58px; } .author-box img.avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; } .author-box strong { display: block; font-family: var(--font-display); } .author-box span { font-size: 0.88rem; color: var(--muted); } .author-box .author-linkedin { display: inline-block; margin-top: 8px; font-size: 0.82rem; font-weight: 600; color: var(--violet-deep); } .author-box .author-linkedin:hover { text-decoration: underline; } /* blog index: load-on-scroll trigger (invisible spacer the observer watches) */ .load-sentinel { height: 24px; margin: 4px 0; } .load-sentinel[hidden] { display: none; } /* ---------- 15. FAQ ---------- */ .faq { max-width: 800px; margin-inline: auto; display: grid; gap: 14px; } .faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s; } .faq-item.is-open { border-color: rgba(113, 72, 230, 0.4); box-shadow: var(--shadow-sm); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; text-align: left; font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; } .faq-icon { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); color: var(--violet-deep); transition: transform 0.35s var(--ease-spring), background 0.3s, color 0.3s; } .faq-item.is-open .faq-icon { transform: rotate(45deg); background: var(--grad); color: #fff; } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease-out); } .faq-a p { padding: 0 26px 24px; color: var(--muted); font-size: 0.97rem; } /* ---------- 16. CTA band ---------- */ .cta-section { padding: 40px 0 104px; } .cta-box { position: relative; overflow: hidden; text-align: center; padding: clamp(64px, 9vw, 110px) 32px; border-radius: var(--radius-lg); background: radial-gradient(900px 480px at 50% -40%, #33206e 0%, transparent 65%), var(--ink-900); color: var(--text-inv); } .cta-box .orb-1 { width: 320px; height: 320px; top: auto; bottom: -180px; right: -60px; opacity: 0.4; } .cta-box .orb-2 { width: 280px; height: 280px; top: -140px; left: -80px; opacity: 0.35; } .cta-box h2 { position: relative; font-size: clamp(1.9rem, 1.3rem + 3vw, 3.2rem); margin-bottom: 18px; } .cta-box p { position: relative; color: var(--muted-inv); font-size: 1.12rem; max-width: 52ch; margin: 0 auto 36px; } .cta-box .hero-actions { justify-content: center; margin-bottom: 24px; } .cta-fineprint { position: relative; font-size: 0.85rem; color: var(--muted-inv); } /* ---------- 17. Footer ---------- */ .site-footer { background: var(--ink-900); color: var(--muted-inv); padding: 80px 0 36px; position: relative; overflow: hidden; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid var(--line-dark); } .footer-brand .brand { color: #fff; margin-bottom: 18px; } .footer-brand p { font-size: 0.93rem; max-width: 34ch; margin-bottom: 24px; } .social-links { display: flex; gap: 12px; } .social-links a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-dark); color: var(--muted-inv); transition: all 0.25s var(--ease-out); } .social-links a:hover { color: #fff; border-color: var(--violet); background: rgba(113, 72, 230, 0.15); transform: translateY(-3px); } .footer-col h4 { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin-bottom: 20px; } .footer-col ul { display: grid; gap: 12px; } .footer-col a { font-size: 0.93rem; transition: color 0.2s, padding-left 0.25s var(--ease-out); } .footer-col a:hover { color: #fff; padding-left: 6px; } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 32px; font-size: 0.84rem; } .footer-bottom a:hover { color: #fff; } /* ---------- 18. Inner-page hero ---------- */ .page-hero { position: relative; overflow: hidden; padding: calc(var(--header-h) + 84px) 0 92px; background: radial-gradient(1000px 600px at 80% -20%, #2a1b66 0%, transparent 60%), radial-gradient(700px 500px at 5% 120%, #43203a 0%, transparent 55%), var(--ink-900); color: var(--text-inv); } .page-hero .container { position: relative; } .page-hero-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #b9a6ff; margin-bottom: 20px; } .page-hero-title { font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.6rem); max-width: 18ch; margin-bottom: 22px; } .page-hero-sub { font-size: 1.15rem; color: var(--muted-inv); max-width: 56ch; margin-bottom: 36px; } .page-hero .hero-actions { margin-bottom: 0; } /* ---------- 19. Deliverables / numbered lists ---------- */ .deliverables-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .d-card { display: flex; gap: 18px; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: transform var(--speed) var(--ease-out), box-shadow var(--speed), border-color var(--speed); } .d-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(113, 72, 230, 0.3); } .d-card .card-icon { flex: none; width: 46px; height: 46px; } .d-card:hover .card-icon { background: var(--grad); color: #fff; } .d-card h3 { font-size: 1.05rem; margin-bottom: 6px; } .d-card p { font-size: 0.92rem; color: var(--muted); } /* ---------- 20. Forms ---------- */ .form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px); box-shadow: var(--shadow-md); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .field { display: grid; gap: 8px; } .field.is-full { grid-column: 1 / -1; } .field label { font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; } .field input, .field select, .field textarea { font: inherit; font-size: 0.97rem; color: var(--text); padding: 14px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: var(--paper); transition: border-color 0.25s, box-shadow 0.25s, background 0.25s; width: 100%; } .field textarea { resize: vertical; min-height: 120px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--violet); background: #fff; box-shadow: 0 0 0 4px rgba(113, 72, 230, 0.12); } .form-success { display: none; text-align: center; padding: 48px 24px; } .form-success.is-visible { display: block; } .form-success .check-big { width: 64px; height: 64px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 50%; background: var(--grad); color: #fff; } /* Booking placeholder block */ .booking-placeholder { margin-top: 28px; padding: 40px 28px; text-align: center; border: 2px dashed var(--line); border-radius: var(--radius); color: var(--muted); background: var(--surface); font-size: 0.93rem; } /* ---------- 21. Reveal-on-scroll ---------- */ [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); transition-delay: var(--d, 0s); will-change: opacity, transform; } [data-reveal="left"] { transform: translateX(-36px); } [data-reveal="right"] { transform: translateX(36px); } [data-reveal="zoom"] { transform: scale(0.93); } [data-reveal].is-visible { opacity: 1; transform: none; } /* ---------- 22. Misc ---------- */ .tilt-wrap { perspective: 1000px; } [data-tilt] { transform-style: preserve-3d; will-change: transform; } .scroll-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, 0.25); border-radius: 999px; } .scroll-hint::before { content: ""; position: absolute; top: 7px; left: 50%; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: #b9a6ff; animation: scroll-hint 2s var(--ease-out) infinite; } @keyframes scroll-hint { 0% { opacity: 1; transform: translateY(0); } 70% { opacity: 0; transform: translateY(14px); } 100% { opacity: 0; transform: translateY(0); } } .kbd-note { font-size: 0.85rem; color: var(--muted); } /* ---------- 23. Responsive ---------- */ @media (max-width: 1080px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } .system-grid { grid-template-columns: repeat(2, 1fr); } .system-grid::before { display: none; } .stats-row { grid-template-columns: repeat(2, 1fr); gap: 36px 18px; } .feature-grid, .feature-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } .hero-inner { grid-template-columns: 1fr; gap: 72px; } .hero-visual { max-width: 560px; } .posts-grid { grid-template-columns: repeat(2, 1fr); } .post-card.is-featured { grid-column: span 2; } } @media (max-width: 860px) { :root { --header-h: 68px; } .section { padding: 76px 0; } .nav-toggle { display: block; } /* Make the menu button an obvious, tappable chip that stays clearly visible in every header state: over the dark hero, after scrolling onto light content, and while the menu is open. A bare two-line icon was too easy to miss once you scrolled past the first screen. */ .nav-toggle { background: rgba(20, 16, 44, 0.06); border: 1px solid rgba(20, 16, 44, 0.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .header-on-dark:not(.is-scrolled) .nav-toggle, body.nav-open .nav-toggle { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.34); } .main-nav { position: fixed; inset: 0; z-index: 105; flex-direction: column; /* "safe center" centres a short menu but falls back to top-alignment when the content (an open submenu) is taller than the screen, instead of clipping the top and bottom unreachably. Paired with overflow-y:auto so the tall state can scroll, and top padding so the first item clears the fixed header + the notch. */ justify-content: safe center; gap: 8px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: calc(80px + env(safe-area-inset-top, 0px)) 0 calc(32px + env(safe-area-inset-bottom, 0px)); background: rgba(22, 16, 44, 0.97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease-out), visibility 0s 0.35s; } body.nav-open .main-nav { opacity: 1; visibility: visible; transition: opacity 0.35s var(--ease-out), visibility 0s; } body.nav-open { overflow: hidden; } body.nav-open .site-header { color: var(--text-inv); /* A backdrop-filter turns the header into the containing block for the fixed menu overlay, so once you scroll (is-scrolled adds the filter) the overlay gets trapped to the header strip and the page shows through. Remove the filter while the menu is open so the overlay covers the whole screen. */ -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; box-shadow: none; border-bottom-color: transparent; } .nav-list { flex-direction: column; gap: 4px; width: min(420px, 88vw); } .nav-list > li { width: 100%; text-align: center; } .nav-link { width: 100%; justify-content: center; color: var(--text-inv); font-size: 1.25rem; padding: 14px; opacity: 0; transform: translateY(16px); } body.nav-open .nav-link { opacity: 1; transform: none; transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); transition-delay: calc(0.08s + var(--i, 0) * 0.06s); } .nav-link:hover { color: #fff; } .dropdown { position: static; display: block; transform: none; width: 100%; opacity: 1; visibility: hidden; max-height: 0; overflow: hidden; padding: 0 10px; background: transparent; border: 0; box-shadow: none; transition: max-height 0.4s var(--ease-out), visibility 0s 0.3s; } .nav-item.is-open .dropdown { visibility: visible; max-height: 520px; transform: none; transition: max-height 0.45s var(--ease-out), visibility 0s; } .dropdown-link { flex-direction: row; align-items: flex-start; gap: 12px; color: var(--text-inv); padding: 10px 14px; } .dropdown-link:hover { transform: none; } .dropdown-link small { color: var(--muted-inv); } .dropdown-link:hover { background: rgba(255, 255, 255, 0.06); } .dd-icon { background: rgba(255, 255, 255, 0.08); color: #b9a6ff; } .nav-cta { opacity: 0; transform: translateY(16px); } body.nav-open .nav-cta { opacity: 1; transform: none; transition: opacity 0.4s var(--ease-out) 0.4s, transform 0.4s var(--ease-out) 0.4s; } .split { grid-template-columns: 1fr; gap: 48px; } .footer-grid { grid-template-columns: 1fr 1fr; } .process-item { grid-template-columns: 60px 1fr; gap: 20px; } .process-num { width: 60px; height: 60px; font-size: 1.05rem; } .process-item:not(:last-child)::before { left: 29px; top: 72px; } .post-card.is-featured { grid-template-columns: 1fr; } .post-card.is-featured .post-cover { min-height: 220px; } .deliverables-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } } @media (max-width: 620px) { .cards-grid, .system-grid, .posts-grid, .feature-grid, .feature-grid.cols-2, .feature-grid.cols-4 { grid-template-columns: 1fr; } .post-card.is-featured { grid-column: span 1; } .stats-row { grid-template-columns: 1fr 1fr; } .hero { padding-top: calc(var(--header-h) + 64px); } .hero-actions .btn { width: 100%; } .float-chip.chip-a { top: -18px; right: 4px; } .float-chip.chip-b { bottom: -16px; left: 0; } .footer-grid { grid-template-columns: 1fr; gap: 36px; } .engine-row { grid-template-columns: 96px 1fr 48px; } } /* ---------- 24. Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } [data-reveal] { opacity: 1; transform: none; } .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; } } /* ========================================================================== 25. Hero 3D scene: particle funnel, depth-layered chips, word entrance ========================================================================== */ /* Headline words rotate up out of the page */ .hero-title { perspective: 900px; } .hero-title .w { display: inline-block; opacity: 0; transform: rotateX(-78deg) translateY(26px); transform-origin: 50% 100%; animation: word-in 0.85s var(--ease-out) forwards; animation-delay: calc(0.1s + var(--wi, 0) * 0.08s); will-change: transform, opacity; } @keyframes word-in { to { opacity: 1; transform: rotateX(0) translateY(0); } } /* The 3D stage (parent .hero-visual already supplies perspective) */ .scene-inner { position: relative; height: clamp(430px, 46vw, 580px); transform-style: preserve-3d; will-change: transform; } #funnelCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .funnel-glow { position: absolute; inset: 6% 4%; transform: translateZ(-80px); background: radial-gradient(46% 38% at 51% 66%, rgba(113, 72, 230, 0.38), transparent 70%), radial-gradient(40% 32% at 53% 32%, rgba(255, 100, 117, 0.2), transparent 70%), radial-gradient(34% 24% at 49% 10%, rgba(254, 207, 46, 0.14), transparent 70%); filter: blur(8px); pointer-events: none; } /* Stage labels hover in front of the funnel */ .funnel-stage { position: absolute; left: 0; display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line-dark); background: rgba(23, 16, 44, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38); font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; animation: chip-float 7s ease-in-out infinite alternate; --cz: 48px; } .funnel-stage small { font-family: var(--font-body); font-weight: 500; font-size: 0.74rem; letter-spacing: 0; text-transform: none; color: var(--muted-inv); } .funnel-stage::after { content: ""; position: absolute; left: 100%; top: 50%; width: 38px; height: 1.5px; background: linear-gradient(90deg, currentColor, transparent); opacity: 0.55; } .stage-1 { top: 10%; color: #fecf2e; } .stage-2 { top: 42%; color: #ff6475; animation-delay: -2.4s; } .stage-3 { top: 70%; color: #b9a6ff; animation-delay: -4.8s; } /* HUD chips float closest to the viewer */ .hero-visual .float-chip { --cz: 80px; } .hero-visual .chip-a { top: 2%; right: -2%; } .hero-visual .chip-b { bottom: 4%; left: 2%; } .hero-visual .chip-c { right: -3%; bottom: 24%; animation-delay: -1.6s; } /* Perspective grid floor at the base of the hero */ .grid-floor { position: absolute; left: -12%; right: -12%; bottom: -4%; height: 46%; background-image: linear-gradient(rgba(185, 166, 255, 0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(185, 166, 255, 0.14) 1px, transparent 1px); background-size: 46px 46px; transform: perspective(640px) rotateX(62deg); transform-origin: 50% 0; -webkit-mask-image: radial-gradient(70% 90% at 50% 0%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 90% at 50% 0%, #000 30%, transparent 100%); animation: floor-move 16s linear infinite; pointer-events: none; } @keyframes floor-move { to { background-position: 0 46px, 0 0; } } @media (max-width: 1080px) { .scene-inner { height: clamp(400px, 62vw, 520px); } } @media (max-width: 620px) { .scene-inner { height: 380px; } .funnel-stage { padding: 8px 12px; font-size: 0.7rem; } .funnel-stage::after { width: 20px; } .hero-visual .chip-a { top: 0; right: 0; } .hero-visual .chip-b { bottom: 2%; left: 0; } .hero-visual .chip-c { display: none; } } @media (prefers-reduced-motion: reduce) { .hero-title .w, [data-hero-fade] { animation: none !important; opacity: 1; transform: none; } .grid-floor { animation: none; } } /* ========================================================================== RICH BLOG: two-column article, TOC, rich media blocks, sidebar ========================================================================== */ /* ---------- Breadcrumbs ---------- */ .breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.82rem; color: var(--muted-inv); margin-bottom: 18px; } .breadcrumbs a { color: #b9a6ff; } .breadcrumbs a:hover { text-decoration: underline; } .breadcrumbs [aria-current] { color: var(--text-inv); } /* ---------- Two-column layout ---------- */ .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 56px; /* stretch (not start) so the sidebar column is as tall as the article, which gives `position: sticky` the room it needs to stay pinned while you scroll. */ align-items: stretch; } .article-main { min-width: 0; } .article-layout .article-body { max-width: none; margin: 0; padding: 56px 0 24px; } .article-sidebar { position: relative; } .sidebar-sticky { position: sticky; top: calc(var(--header-h) + 22px); display: flex; flex-direction: column; gap: 18px; } /* ---------- Hero image ---------- */ .article-hero-img { width: min(var(--container), 100% - 48px); margin: -36px auto 0; position: relative; z-index: 2; } .article-hero-img img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-md); } /* ---------- Article images & media ---------- */ .article-body img { border-radius: var(--radius-sm); margin: 12px 0; box-shadow: var(--shadow-sm); } .embed-video { position: relative; padding-top: 56.25%; margin: 30px 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); background: var(--ink-800); } .embed-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ---------- Table of contents ---------- */ .toc { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 18px 18px 14px; box-shadow: var(--shadow-sm); } .toc-title { display: block; font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .toc ul { list-style: none; display: grid; gap: 2px; } .toc li.toc-l3 { margin-left: 14px; } .toc a { display: block; padding: 5px 10px; border-radius: 8px; font-size: 0.88rem; color: var(--muted); border-left: 2px solid transparent; transition: color 0.2s, background 0.2s, border-color 0.2s; } .toc a:hover { color: var(--text); background: var(--grad-soft); } .toc a.is-active { color: var(--violet-deep); font-weight: 600; border-left-color: var(--violet); background: var(--grad-soft); } .toc-mobile { display: none; margin: 28px 0 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: 4px 16px; } .toc-mobile summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; padding: 12px 0; display: flex; align-items: center; justify-content: space-between; list-style: none; } .toc-mobile summary::-webkit-details-marker { display: none; } .toc-mobile[open] summary svg { transform: rotate(180deg); } .toc-mobile summary svg { transition: transform 0.3s; } .toc-mobile ul { list-style: none; padding: 0 0 12px; display: grid; gap: 2px; } .toc-mobile li.toc-l3 { margin-left: 14px; } .toc-mobile a { display: block; padding: 6px 8px; border-radius: 8px; font-size: 0.9rem; color: var(--muted); } .toc-mobile a:hover { color: var(--violet-deep); background: var(--grad-soft); } /* ---------- Rich callouts (key / note / tip / warning) ---------- */ .rich-callout { margin: 32px 0; padding: 22px 26px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); position: relative; } .rich-callout .rc-head { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px; } .rich-callout .rc-body > *:last-child { margin-bottom: 0; } .rich-callout.rc-key { background: var(--grad-soft); border-color: rgba(113, 72, 230, 0.22); } .rich-callout.rc-key .rc-head { color: var(--violet-deep); } .rich-callout.rc-note { border-left: 3px solid var(--violet); } .rich-callout.rc-note .rc-head { color: var(--violet-deep); } .rich-callout.rc-tip { border-left: 3px solid var(--gold-deep); background: rgba(254, 207, 46, 0.08); } .rich-callout.rc-tip .rc-head { color: var(--gold-deep); } .rich-callout.rc-warning { border-left: 3px solid var(--coral); background: rgba(255, 100, 117, 0.07); } .rich-callout.rc-warning .rc-head { color: var(--coral); } /* ---------- Download / resource card ---------- */ .dl-card { display: flex; align-items: center; gap: 18px; margin: 30px 0; padding: 22px 24px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform 0.25s var(--ease-out), box-shadow 0.25s, border-color 0.25s; } .dl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(113, 72, 230, 0.35); } .dl-icon { flex: none; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 14px; background: var(--grad); color: #fff; } .dl-text { flex: 1; min-width: 0; } .dl-kind { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet-deep); margin-bottom: 2px; } .dl-text strong { display: block; font-family: var(--font-display); font-size: 1.08rem; } .dl-text small { color: var(--muted); font-size: 0.9rem; } .dl-btn { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 99px; background: var(--ink-800); color: #fff; font-weight: 600; font-size: 0.9rem; } .dl-card:hover .dl-btn { background: var(--violet); } /* ---------- Inline CTA banner ---------- */ .inline-cta { position: relative; overflow: hidden; margin: 38px 0; padding: 30px 32px; border-radius: var(--radius); background: var(--ink-800); color: var(--text-inv); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .inline-cta-copy { flex: 1; min-width: 220px; position: relative; z-index: 1; } .inline-cta-copy strong { display: block; font-family: var(--font-display); font-size: 1.22rem; margin-bottom: 4px; } .inline-cta-copy p { color: var(--muted-inv); font-size: 0.95rem; margin: 0; } .inline-cta .btn { position: relative; z-index: 1; flex: none; } .inline-cta-orb { position: absolute; width: 280px; height: 280px; right: -80px; top: -120px; background: radial-gradient(circle, rgba(113, 72, 230, 0.55), transparent 70%); filter: blur(20px); pointer-events: none; } /* ---------- Stat figure ---------- */ .stat-figure { margin: 30px 0; padding: 26px 28px; border-radius: var(--radius); background: var(--grad-soft); border: 1px solid rgba(113, 72, 230, 0.18); text-align: center; } .stat-num { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 1.6rem + 3vw, 3.4rem); line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat-label { display: block; margin-top: 8px; color: var(--muted); font-size: 0.95rem; } /* ---------- Inline related cards ---------- */ .inline-related { margin: 34px 0; padding: 22px 24px; border-radius: var(--radius); border: 1px dashed var(--line); background: var(--paper); } .inline-related-label { display: block; font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .inline-related-row { display: grid; gap: 10px; } .inline-related .irc { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); transition: transform 0.2s, border-color 0.2s; } .inline-related .irc:hover { transform: translateX(3px); border-color: rgba(113, 72, 230, 0.4); } .irc strong { font-family: var(--font-display); font-size: 1rem; flex: 1; } .irc-cat { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet-deep); flex: none; } .irc-go { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.85rem; flex: none; } /* ---------- Article tags ---------- */ .article-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 40px 0 0; padding-top: 26px; border-top: 1px solid var(--line); } .article-tags-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .tag-chip { display: inline-block; padding: 6px 14px; border-radius: 99px; background: var(--grad-soft); border: 1px solid rgba(113, 72, 230, 0.2); color: var(--violet-deep); font-size: 0.84rem; font-weight: 600; transition: background 0.2s, transform 0.2s; } .tag-chip:hover { transform: translateY(-2px); background: rgba(113, 72, 230, 0.16); } /* ---------- Sidebar cards ---------- */ .side-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 22px; box-shadow: var(--shadow-sm); } .side-card strong { display: block; font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 6px; } .side-card p { color: var(--muted); font-size: 0.9rem; margin-bottom: 14px; } .side-card .btn { width: 100%; justify-content: center; } .side-newsletter { background: var(--grad-soft); border-color: rgba(113, 72, 230, 0.2); } .side-newsletter .form-fields { display: flex; flex-direction: column; gap: 10px; } .side-newsletter input { width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font: inherit; } .side-newsletter input:focus { outline: none; border-color: var(--violet); } .side-newsletter .form-success, .side-card .form-success { display: none; color: var(--violet-deep); font-weight: 600; font-size: 0.92rem; } .side-newsletter .form-success.is-visible, .side-card .form-success.is-visible { display: block; } .side-download { display: flex; align-items: center; gap: 14px; text-align: left; } .side-download .dl-icon { width: 44px; height: 44px; border-radius: 12px; } .side-download strong { margin: 0; font-size: 0.98rem; } .side-download small { color: var(--muted); font-size: 0.84rem; display: block; } .side-download .dl-btn { margin-left: auto; padding: 8px 14px; font-size: 0.82rem; } /* sidebar report promo card (blog -> MQL) */ .side-report { padding: 0; overflow: hidden; display: block; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .side-report:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(113, 72, 230, 0.3); } .side-report .rp-cover { display: block; height: 128px; background-size: cover; background-position: top center; border-bottom: 1px solid var(--line); } .side-report .rp-body { display: block; padding: 18px; } .side-report .rp-tag { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-deep); background: rgba(254, 207, 46, 0.16); padding: 3px 10px; border-radius: 20px; margin-bottom: 10px; } .side-report strong { display: block; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.25; color: var(--text); margin-bottom: 8px; } .side-report .rp-sub { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: 0.86rem; line-height: 1.5; margin-bottom: 14px; } .side-report .rp-btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--violet-deep); font-size: 0.9rem; } .side-report:hover .rp-btn { gap: 9px; } .side-report .rp-btn svg { width: 15px; height: 15px; } /* in-article report banner (blog -> MQL) */ .report-banner { display: flex; align-items: center; gap: 26px; margin: 46px 0; padding: 24px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .report-banner .rb-cover-link { flex: 0 0 auto; line-height: 0; } .report-banner .rb-cover { width: 116px; height: 150px; object-fit: cover; border-radius: 10px; box-shadow: 0 10px 26px rgba(20, 16, 44, 0.2); border: 1px solid var(--line); display: block; } .report-banner .rb-body { flex: 1; min-width: 0; } .report-banner .rb-tag { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-deep); background: rgba(254, 207, 46, 0.16); padding: 3px 11px; border-radius: 20px; margin-bottom: 10px; } .report-banner .rb-title { display: block; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; margin-bottom: 8px; } .report-banner .rb-sub { color: var(--muted); font-size: 0.97rem; line-height: 1.55; margin-bottom: 18px; } @media (max-width: 620px) { .report-banner { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px; } .report-banner .rb-cover { width: 104px; height: 135px; } .report-banner .rb-body { width: 100%; } .report-banner .rb-title { font-size: 1.2rem; } .report-banner .btn { width: 100%; justify-content: center; } } /* ---------- Continue reading (localStorage) ---------- */ .continue-reading { margin-top: 64px; } /* ========================================================================== RESOURCES HUB + COMING-SOON ========================================================================== */ .resources-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; } .resource-card { position: relative; display: flex; flex-direction: column; padding: 30px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform 0.3s var(--ease-out), box-shadow 0.3s, border-color 0.3s; } .resource-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(113, 72, 230, 0.3); } .resource-card .card-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; background: var(--grad-soft); color: var(--violet-deep); margin-bottom: 18px; } .resource-card h3 { font-size: 1.3rem; margin-bottom: 8px; } .resource-card p { color: var(--muted); font-size: 0.95rem; flex: 1; margin-bottom: 18px; } .resource-card .card-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--violet-deep); } .resource-card.is-soon { background: var(--paper); } .rc-badge { position: absolute; top: 22px; right: 22px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 5px 11px; border-radius: 99px; } .rc-badge.rc-live { background: rgba(94, 222, 128, 0.16); color: #1c8f4e; } .rc-badge.rc-soon { background: rgba(254, 207, 46, 0.18); color: var(--gold-deep); } /* ---------- Coming-soon page ---------- */ .coming-hero { position: relative; overflow: hidden; background: var(--ink-800); color: var(--text-inv); padding: calc(var(--header-h) + 80px) 0 120px; text-align: center; } .coming-hero .container { position: relative; z-index: 2; max-width: 760px; } .coming-hero .breadcrumbs { justify-content: center; } .coming-glow { position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 0%, rgba(113, 72, 230, 0.5), transparent 70%); pointer-events: none; } .coming-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: var(--gold); font-weight: 600; font-size: 0.84rem; margin-bottom: 26px; } .coming-title { font-size: clamp(2rem, 1.4rem + 3.2vw, 3.4rem); margin-bottom: 20px; } .coming-sub { color: var(--muted-inv); font-size: 1.12rem; max-width: 560px; margin: 0 auto 36px; } .coming-form-wrap { max-width: 480px; margin: 0 auto; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius); padding: 26px; backdrop-filter: blur(8px); } .coming-prompt { font-family: var(--font-display); font-weight: 600; margin-bottom: 14px; color: #fff; } .coming-form .form-fields { display: flex; flex-direction: column; gap: 12px; } .coming-form input, .coming-form textarea { width: 100%; padding: 13px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.07); color: #fff; font: inherit; resize: vertical; } .coming-form input::placeholder, .coming-form textarea::placeholder { color: rgba(255, 255, 255, 0.5); } .coming-form input:focus, .coming-form textarea:focus { outline: none; border-color: var(--violet); } .coming-form .btn { width: 100%; justify-content: center; } .coming-form .form-success { display: none; color: #fff; font-weight: 600; } .coming-form .form-success.is-visible { display: block; } .coming-fineprint { display: block; margin-top: 16px; font-size: 0.82rem; color: var(--muted-inv); } .coming-meanwhile { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: center; font-size: 0.9rem; color: var(--muted-inv); } .coming-meanwhile a { color: #b9a6ff; font-weight: 600; } .coming-meanwhile a:hover { text-decoration: underline; } /* ---------- Blog index: tag filter ---------- */ .tag-filter { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-bottom: 42px; } .tag-filter button { padding: 8px 17px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-weight: 600; font-size: 0.86rem; transition: all 0.2s; } .tag-filter button:hover { color: var(--text); border-color: rgba(113, 72, 230, 0.4); } .tag-filter button.is-active { background: var(--grad); color: #fff; border-color: transparent; } .post-card[hidden] { display: none !important; } /* ---------- Responsive ---------- */ @media (max-width: 980px) { .article-layout { grid-template-columns: 1fr; gap: 0; } .article-sidebar { margin-top: 8px; } .sidebar-sticky { position: static; flex-direction: column; } .article-sidebar .toc { display: none; } .toc-mobile { display: block; } .article-layout .article-body { padding-top: 8px; } } @media (max-width: 560px) { .dl-card { flex-wrap: wrap; gap: 14px; } .dl-btn { width: 100%; justify-content: center; } .inline-cta { padding: 24px; } .stat-num { font-size: 2.4rem; } } /* ---------- Skip to content (keyboard a11y) ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--violet); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0; font-weight: 600; box-shadow: var(--shadow-md); } .skip-link:focus { left: 0; } main:focus { outline: none; } /* ========================================================================== Resource listings + gated download landing pages ========================================================================== */ .rlist-hero { padding-bottom: 56px; } .rlist-hero .coming-title { margin-bottom: 14px; } .rlist-section { padding-top: 56px; } .resource-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; } /* /resources hub: category-card grid */ .resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 22px; } .resource-item { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--speed) var(--ease-out), box-shadow var(--speed) var(--ease-out), border-color var(--speed) var(--ease-out); } .resource-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(113, 72, 230, 0.3); } .ri-cover { display: block; width: 100%; aspect-ratio: 16 / 10; background: var(--paper) center/cover no-repeat; } .ri-cover-ph { display: grid; place-items: center; color: var(--violet); background: var(--grad-soft); } .ri-cover-ph svg { width: 34px; height: 34px; } .ri-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; } .ri-meta { display: inline-block; align-self: flex-start; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-deep); background: rgba(254, 207, 46, 0.16); padding: 4px 11px; border-radius: 99px; margin-bottom: 12px; } .ri-title { font-size: 1.25rem; line-height: 1.25; margin-bottom: 9px; } .ri-summary { color: var(--muted); font-size: 0.95rem; flex: 1; margin-bottom: 18px; } .resource-item .card-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--violet); } /* ---- Gated landing page ---- */ .ri-landing-hero { position: relative; background: var(--ink-800); color: var(--text-inv); padding: calc(var(--header-h) + 52px) 0 64px; overflow: hidden; } .ri-landing-hero .container { position: relative; z-index: 2; } .ri-landing-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 30px; } .ri-hero-cover { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, 0.1); } .ri-hero-cover img { display: block; width: 100%; height: auto; } .ri-landing-copy { min-width: 0; } .ri-kicker { display: inline-flex; align-items: center; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .ri-landing-title { font-size: clamp(1.9rem, 1.3rem + 2.8vw, 3rem); line-height: 1.08; margin-bottom: 16px; } .ri-landing-sub { color: var(--muted-inv); font-size: 1.1rem; max-width: 540px; margin-bottom: 18px; } .ri-file-label { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); padding: 5px 13px; border-radius: 99px; margin-bottom: 26px; } .ri-gate { margin-top: 8px; max-width: 460px; } .ri-gate-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius); padding: 26px; backdrop-filter: blur(8px); } .ri-gate-prompt { font-family: var(--font-display); font-weight: 600; margin-bottom: 16px; color: #fff; } .ri-form .form-fields { display: flex; flex-direction: column; gap: 12px; } .ri-form input { width: 100%; padding: 13px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.07); color: #fff; font: inherit; } .ri-form input::placeholder { color: rgba(255, 255, 255, 0.5); } .ri-form input:focus { outline: none; border-color: var(--violet); } .ri-form .btn { width: 100%; justify-content: center; } .ri-form .form-success { display: none; color: #fff; font-weight: 600; margin-top: 6px; } .ri-form .form-success.is-visible { display: block; } .ri-gate-fine { display: block; margin-top: 16px; font-size: 0.8rem; color: var(--muted-inv); } .ri-ready[hidden] { display: none; } /* No-JS fallback: the gated form POSTs to /api/contact and the server 303s back to #ri-ready, so reveal the download block (and hide the now-submitted form) even with the [hidden] attribute still present and JS disabled. */ .ri-ready:target { display: block; } .ri-gate:has(.ri-ready:target) .ri-gate-card { display: none; } .ri-ready { background: rgba(94, 222, 128, 0.08); border: 1px solid rgba(94, 222, 128, 0.3); border-radius: var(--radius); padding: 26px; text-align: center; } .ri-ready-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #6ee7a0; margin-bottom: 12px; } .ri-ready-badge svg { width: 16px; height: 16px; } .ri-ready h2 { color: #fff; font-size: 1.4rem; margin-bottom: 8px; } .ri-ready p { color: var(--muted-inv); margin-bottom: 20px; } .ri-ready .ri-dl, .ri-gate-card .ri-dl { width: 100%; justify-content: center; } .ri-dl svg { width: 18px; height: 18px; } .ri-lede-sec .ri-lede-wrap { max-width: 760px; } .ri-lede { font-size: 1.18rem; line-height: 1.7; color: var(--text); margin-top: 10px; } .ri-inside-sec .ri-inside { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px 28px; max-width: 880px; } .ri-inside li { display: flex; align-items: flex-start; gap: 12px; font-size: 1.02rem; color: var(--text); padding: 6px 0; } .ri-inside li svg { flex: none; width: 20px; height: 20px; color: var(--violet); margin-top: 3px; } @media (max-width: 760px) { .ri-landing-grid { grid-template-columns: 1fr; gap: 30px; } .ri-hero-cover { max-width: 280px; } .ri-gate { max-width: none; } } /* ============ Anti-spam honeypot ============ Hidden from humans (visually + from the tab order); only bots that blind-fill every field ever populate it, and the CMS drops those. */ .hp-wrap { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* ============ Markdown task-list checkboxes (- [ ] / - [x]) ============ */ .article-body li.md-task { list-style: none; position: relative; padding-left: 34px; margin: 9px 0; } .article-body li.md-task .md-check { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border: 1.6px solid var(--line); border-radius: 6px; background: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; line-height: 1; color: #7148e6; } .article-body li.md-task-done .md-check { background: #7148e6; border-color: #7148e6; color: #fff; } /* ============================================================ SEO/AEO/GEO pass: quotable definition, article FAQ, category hubs, last-updated stamp ============================================================ */ /* Quotable definition: the extractable answer AI engines lift */ .article-def{ margin:0 0 28px; padding:18px 22px; border-left:3px solid #7148e6; background:rgba(113,72,230,.06); border-radius:0 10px 10px 0; font-size:1.12rem; line-height:1.6; } .article-def strong{ font-weight:600; color:var(--ink, #14101f); } /* Article FAQ (reuses the .faq accordion styles) */ .article-faq{ margin:56px 0 8px; padding-top:34px; border-top:1px solid var(--line, #e8e4f0); } .article-faq h2{ font-size:1.6rem; margin:0 0 22px; } /* Category label on an article now links to its hub */ a.article-cat{ text-decoration:none; transition:opacity .18s ease; } a.article-cat:hover{ opacity:.8; } /* Category chips: blog index + hub cross-links */ .cat-nav{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 26px; } .cat-chip{ display:inline-block; padding:8px 16px; border:1px solid var(--line, #e8e4f0); border-radius:999px; font-size:.88rem; font-weight:500; color:var(--ink-soft, #5b5470); text-decoration:none; transition:border-color .18s ease, color .18s ease, background .18s ease; } .cat-chip:hover{ border-color:#7148e6; color:#7148e6; } .cat-chip.is-current{ background:#7148e6; border-color:#7148e6; color:#fff; } .cat-back{ margin-top:34px; text-align:center; } .cat-back a{ color:#7148e6; font-weight:500; } /* "Last updated" stamp, shown only on genuinely revised posts */ .article-updated{ font-weight:500; } /* Illustrated per-post thumbnails on the blog listing cards. The gradient + icon cover remains the fallback for posts without one. */ .post-cover .post-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease-spring); } .post-card:hover .post-cover .post-thumb{ transform:scale(1.04); } /* the category pill has to stay readable on top of the art */ .post-cover:has(.post-thumb) .post-cat{ background:rgba(10,7,24,.72); backdrop-filter:blur(6px); z-index:2; } /* Low-friction free-audit CTA in the blog sidebar */ .side-cta-note{ display:block; margin-top:10px; font-size:.78rem; color:var(--ink-soft, #5b5470); opacity:.8; } /* ============ Pricing page ============ */ .pricing-table-wrap{ overflow-x:auto; margin:8px 0 6px; } .pricing-table{ width:100%; border-collapse:collapse; min-width:640px; } .pricing-table th, .pricing-table td{ text-align:left; padding:16px 18px; border-bottom:1px solid var(--line, #e8e4f0); vertical-align:top; } .pricing-table thead th{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft,#5b5470); font-weight:700; } .pricing-table tbody tr:hover{ background:rgba(113,72,230,.035); } .pricing-table .svc{ font-weight:700; } .pricing-table .price{ font-weight:800; color:#7148e6; white-space:nowrap; font-size:1.05rem; } .pricing-table .price small{ display:block; font-weight:500; color:var(--ink-soft,#5b5470); font-size:.72rem; letter-spacing:.02em; } .price-answer{ border-left:3px solid #7148e6; background:rgba(113,72,230,.06); border-radius:0 12px 12px 0; padding:20px 24px; margin:0 0 8px; font-size:1.12rem; line-height:1.6; } .price-answer strong{ font-weight:600; } .price-note{ font-size:.9rem; color:var(--ink-soft,#5b5470); margin-top:14px; } /* ============ Pricing plan cards ============ */ .plan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; } .plan-grid.two{ grid-template-columns:repeat(2,1fr); max-width:760px; margin:0 auto; } @media(max-width:900px){ .plan-grid, .plan-grid.two{ grid-template-columns:1fr; } } .plan-card{ position:relative; display:flex; flex-direction:column; border:1px solid var(--line,#e8e4f0); border-radius:18px; padding:30px 26px; background:#fff; box-shadow:var(--shadow-sm,0 6px 24px -18px rgba(20,15,46,.4)); transition:transform .25s var(--ease-spring,cubic-bezier(.2,.8,.2,1)), box-shadow .25s ease, border-color .25s ease; } .plan-card:hover{ transform:translateY(-4px); box-shadow:0 26px 60px -30px rgba(113,72,230,.45); } .plan-card.is-featured{ border-color:#7148e6; box-shadow:0 24px 60px -28px rgba(113,72,230,.5); } .plan-badge{ position:absolute; top:-12px; left:26px; background:#7148e6; color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:999px; } .plan-name{ font-size:1.25rem; font-weight:700; color:var(--ink,#140f2e); } .plan-tag{ color:var(--muted,#5b5470); font-size:.92rem; margin:6px 0 18px; min-height:2.6em; } .plan-price{ font-size:2.3rem; font-weight:800; color:var(--ink,#140f2e); line-height:1; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; } .plan-price .unit{ font-size:.9rem; font-weight:600; color:var(--muted,#5b5470); } .plan-price.scoped{ color:#7148e6; font-size:1.7rem; } .plan-from{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#9b7cff; margin-bottom:4px; } .plan-best{ font-size:.82rem; color:var(--muted,#5b5470); margin:14px 0 0; } .plan-best strong{ color:var(--ink,#140f2e); font-weight:600; } .plan-features{ list-style:none; margin:20px 0 24px; padding:20px 0 0; border-top:1px solid var(--line,#e8e4f0); display:flex; flex-direction:column; gap:12px; flex:1; } .plan-features li{ position:relative; padding-left:28px; font-size:.93rem; line-height:1.45; color:var(--ink,#241a2e); } .plan-features li::before{ content:"✓"; position:absolute; left:0; top:0; color:#3cc6b4; font-weight:800; font-size:.95rem; width:18px; height:18px; display:grid; place-items:center; } .plan-cta{ margin-top:auto; } .plan-cta .btn{ width:100%; justify-content:center; } .plan-explore{ display:inline-block; margin-top:12px; font-size:.86rem; color:#7148e6; font-weight:600; text-align:center; width:100%; } /* every-engagement reassurance strip */ .includes-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:8px; } @media(max-width:820px){ .includes-strip{ grid-template-columns:repeat(2,1fr); } } .includes-item{ display:flex; gap:12px; align-items:flex-start; } .includes-item .ic{ flex:0 0 auto; width:34px; height:34px; border-radius:9px; background:rgba(113,72,230,.1); color:#7148e6; display:grid; place-items:center; } .includes-item strong{ display:block; font-size:.95rem; } .includes-item span{ font-size:.85rem; color:var(--muted,#5b5470); } /* ============ TL;DR summary box (top of every article) ============ */ .article-tldr{ margin:0 0 30px; padding:22px 26px 22px 24px; border-left:4px solid #7148e6; background:linear-gradient(180deg, rgba(113,72,230,.07), rgba(113,72,230,.03)); border-radius:0 14px 14px 0; } .article-tldr .tldr-label{ display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#7148e6; margin-bottom:12px; } .article-tldr ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px; } .article-tldr li{ position:relative; padding-left:26px; font-size:1.02rem; line-height:1.55; color:var(--ink, #1c1533); } .article-tldr li::before{ content:""; position:absolute; left:2px; top:9px; width:8px; height:8px; border-radius:50%; background:#7148e6; } .article-tldr a{ color:#7148e6; font-weight:600; } /* ============ Manifesto (bolted-on vs wired-through) ============ */ .manifesto-body p{ font-size:1.12rem; line-height:1.72; color:var(--ink-soft, #4a4363); margin:0 0 20px; } .manifesto-body p:last-child{ margin-bottom:0; } .manifesto-body strong{ color:var(--ink, #140f2e); font-weight:600; } .manifesto-punch{ font-family:'Sora', sans-serif; font-size:clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem) !important; font-weight:700; line-height:1.3 !important; color:var(--ink, #140f2e) !important; border-left:4px solid #7148e6; padding:4px 0 4px 22px; margin:28px 0 !important; } /* closing refrain under the five-stage grid */ .system-closer{ margin:34px auto 0; max-width:720px; text-align:center; font-size:1.05rem; font-weight:500; color:var(--ink-soft, #4a4363); } /* --------------------------------------------------------------------------- Pull snippet (::snippet) — a short, standalone, quotable claim. Built for AEO/GEO: answer engines lift a clean isolated assertion far more readily than the same sentence buried mid-paragraph. Teal, so it reads as a distinct object against the violet TL;DR and CTA blocks rather than competing with them. --------------------------------------------------------------------------- */ .pull-snippet{ margin:32px 0; padding:26px 30px; border-left:5px solid #2f9e90; background:linear-gradient(180deg, rgba(60,198,180,.13), rgba(60,198,180,.06)); border-radius:0 14px 14px 0; } .pull-snippet p{ margin:0; font-size:1.16rem; line-height:1.6; font-weight:500; color:var(--ink, #1c1533); text-wrap:pretty; } .pull-snippet .snippet-src{ display:block; margin-top:12px; font-size:.9rem; font-style:normal; color:#4a4166; } .pull-snippet .snippet-src a{ color:#7148e6; text-decoration:underline; text-underline-offset:3px; } .pull-snippet .snippet-src a:hover{ color:#5a35c9; } @media (max-width:640px){ .pull-snippet{ padding:20px 20px 20px 22px; margin:26px 0; } .pull-snippet p{ font-size:1.06rem; } } /* --------------------------------------------------------------------------- Resource landing: author card under the cover, report body prose, and a tighter vertical rhythm between the stacked report sections (the big white gap was two full .section paddings, 104px + 104px, meeting on a light band). --------------------------------------------------------------------------- */ .ri-hero-left { display:flex; flex-direction:column; gap:18px; } .ri-author-card{ display:flex; align-items:flex-start; gap:14px; padding:16px 18px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:16px; } .ri-author-photo{ width:56px; height:56px; border-radius:50%; flex:0 0 auto; object-fit:cover; background:linear-gradient(135deg,#7148e6,#ff6475); display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:1rem; } .ri-author-card figcaption{ display:flex; flex-direction:column; gap:3px; min-width:0; } .ri-author-name{ font-weight:700; color:var(--text-inv,#fff); font-size:1.02rem; } .ri-author-title{ font-size:.82rem; font-weight:600; color:#b9a6ff; text-transform:uppercase; letter-spacing:.05em; } .ri-author-bio{ font-size:.9rem; line-height:1.5; color:var(--muted-inv,#c9c0e6); margin-top:4px; } .ri-author-li{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; color:#9b7cff; font-weight:600; font-size:.88rem; text-decoration:none; } .ri-author-li:hover{ color:#b9a6ff; text-decoration:underline; text-underline-offset:3px; } /* report long-form body (distinct from the .ri-body listing-card class) */ .ri-report-body{ max-width:760px; margin:0 auto; } /* close the gap: lede flows into body/inside without a full section of air */ .ri-lede-sec{ padding:72px 0 8px; } .ri-body-sec{ padding:20px 0 40px; } .ri-body-sec + .ri-inside-sec, .ri-inside-sec{ padding-top:24px; } .ri-faq-sec{ padding-top:8px; } @media (max-width:760px){ .ri-author-card{ padding:14px; } .ri-lede-sec{ padding:48px 0 4px; } }