| @import "tailwindcss"; |
| @import "tw-animate-css"; |
| @import "shadcn/tailwind.css"; |
|
|
| |
| @source not "../../.codex-tmp"; |
| @source not "../../.codex-tmp/**/*"; |
| @source not "../../backend/.codex-tmp"; |
| @source not "../../backend/.codex-tmp/**/*"; |
|
|
| @custom-variant dark (&:is(.dark *)); |
|
|
| |
| |
| |
| |
| |
|
|
| |
| :root { |
| --ease-out: cubic-bezier(0.23, 1, 0.32, 1); |
| --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); |
| --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); |
| --ease-glass: cubic-bezier(0.16, 1, 0.3, 1); |
| --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); |
| --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); |
| --background: oklch(1 0 0); |
| --foreground: oklch(0.145 0 0); |
| --card: oklch(1 0 0); |
| --card-foreground: oklch(0.145 0 0); |
| --popover: oklch(1 0 0); |
| --popover-foreground: oklch(0.145 0 0); |
| --primary: oklch(0.205 0 0); |
| --primary-foreground: oklch(0.985 0 0); |
| --secondary: oklch(0.97 0 0); |
| --secondary-foreground: oklch(0.205 0 0); |
| --muted: oklch(0.97 0 0); |
| --muted-foreground: oklch(0.556 0 0); |
| --accent: oklch(0.97 0 0); |
| --accent-foreground: oklch(0.205 0 0); |
| --destructive: oklch(0.577 0.245 27.325); |
| --border: oklch(0.922 0 0); |
| --input: oklch(0.922 0 0); |
| --ring: oklch(0.708 0 0); |
| --chart-1: oklch(0.87 0 0); |
| --chart-2: oklch(0.556 0 0); |
| --chart-3: oklch(0.439 0 0); |
| --chart-4: oklch(0.371 0 0); |
| --chart-5: oklch(0.269 0 0); |
| --radius: 0.625rem; |
| --sidebar: oklch(0.985 0 0); |
| --sidebar-foreground: oklch(0.145 0 0); |
| --sidebar-primary: oklch(0.205 0 0); |
| --sidebar-primary-foreground: oklch(0.985 0 0); |
| --sidebar-accent: oklch(0.97 0 0); |
| --sidebar-accent-foreground: oklch(0.205 0 0); |
| --sidebar-border: oklch(0.922 0 0); |
| --sidebar-ring: oklch(0.708 0 0); |
| } |
|
|
| |
| :root { |
| --bg-root: #050505; |
| --bg-surface: #0B0B0C; |
| --bg-elevated: #111113; |
| --bg-panel: #171719; |
| --bg-hover: rgba(255, 255, 255, 0.04); |
| --bg-active: rgba(255, 255, 255, 0.07); |
| --bg-glass: rgba(255, 255, 255, 0.04); |
| --bg-glass-hover: rgba(255, 255, 255, 0.06); |
| --bg-glass-strong: rgba(11, 11, 12, 0.92); |
|
|
| --border-subtle: rgba(255, 255, 255, 0.06); |
| --border-medium: rgba(255, 255, 255, 0.10); |
| --border-focus: rgba(255, 255, 255, 0.25); |
|
|
| --text-primary: #F5F5F0; |
| --text-secondary: rgba(245, 245, 240, 0.65); |
| --text-muted: rgba(245, 245, 240, 0.40); |
| --text-ghost: rgba(245, 245, 240, 0.38); |
|
|
| |
| |
| --accent-primary: #ffffff; |
| --accent-primary-light: rgba(255, 255, 255, 0.12); |
| --accent-primary-hover: rgba(255, 255, 255, 0.9); |
| |
| --accent-indigo: #ffffff; |
| --accent-indigo-light: rgba(255, 255, 255, 0.024); |
| --accent-blue: #60A5FA; |
| --accent-blue-light: rgba(96, 165, 250, 0.10); |
| --accent-green: #34D399; |
| --accent-green-light: rgba(52, 211, 153, 0.10); |
| --accent-amber: #F59E0B; |
| --accent-amber-light: rgba(245, 158, 11, 0.12); |
| --accent-red: #FB7185; |
| --accent-red-light: rgba(251, 113, 133, 0.10); |
| --accent-violet: #17181b; |
| --accent-violet-light: rgba(23, 24, 27, 0.08); |
| --accent-emerald: #10B981; |
| --accent-emerald-light: rgba(16, 185, 129, 0.10); |
| --accent-emerald-dim: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)); |
| --glow-emerald: rgba(255, 255, 255, 0.06); |
|
|
| --radius-xs: 6px; |
| --radius-sm: 8px; |
| --radius-md: 12px; |
| --radius-lg: 16px; |
| --radius-xl: 20px; |
| --radius-2xl: 24px; |
| --radius-3xl: 32px; |
| --radius-full: 9999px; |
|
|
| --shadow-xs: 0 1px 2px rgba(0,0,0,0.4); |
| --shadow-sm: 0 8px 30px rgba(0,0,0,0.28); |
| --shadow-md: 0 12px 40px rgba(0,0,0,0.35); |
| --shadow-lg: 0 20px 60px rgba(0,0,0,0.45); |
| --shadow-card: 0 8px 30px rgba(0,0,0,0.28), 0 0 0 1px var(--border-subtle); |
| --shadow-glow: none; |
| --shadow-glow-lg: none; |
|
|
| --background: var(--bg-root); |
| --foreground: var(--text-primary); |
| } |
|
|
| |
| @theme inline { |
| --color-background: var(--background); |
| --color-foreground: var(--foreground); |
| --font-sans: var(--font-jakarta), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| --font-display: var(--font-space), ui-sans-serif, system-ui, sans-serif; |
| --font-mono: "Geist Mono", ui-monospace, monospace; |
| --font-heading: var(--font-space), var(--font-jakarta), ui-sans-serif, system-ui, sans-serif; |
| --color-sidebar-ring: var(--sidebar-ring); |
| --color-sidebar-border: var(--sidebar-border); |
| --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); |
| --color-sidebar-accent: var(--sidebar-accent); |
| --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); |
| --color-sidebar-primary: var(--sidebar-primary); |
| --color-sidebar-foreground: var(--sidebar-foreground); |
| --color-sidebar: var(--sidebar); |
| --color-chart-5: var(--chart-5); |
| --color-chart-4: var(--chart-4); |
| --color-chart-3: var(--chart-3); |
| --color-chart-2: var(--chart-2); |
| --color-chart-1: var(--chart-1); |
| --color-ring: var(--ring); |
| --color-input: var(--input); |
| --color-border: var(--border); |
| --color-destructive: var(--destructive); |
| --color-accent-foreground: var(--accent-foreground); |
| --color-accent: var(--accent); |
| --color-muted-foreground: var(--muted-foreground); |
| --color-muted: var(--muted); |
| --color-secondary-foreground: var(--secondary-foreground); |
| --color-secondary: var(--secondary); |
| --color-primary-foreground: var(--primary-foreground); |
| --color-primary: var(--primary); |
| --color-popover-foreground: var(--popover-foreground); |
| --color-popover: var(--popover); |
| --color-card-foreground: var(--card-foreground); |
| --color-card: var(--card); |
| --radius-sm: calc(var(--radius) * 0.6); |
| --radius-md: calc(var(--radius) * 0.8); |
| --radius-lg: var(--radius); |
| --radius-xl: calc(var(--radius) * 1.4); |
| --radius-2xl: calc(var(--radius) * 1.8); |
| --radius-3xl: calc(var(--radius) * 2.2); |
| --radius-4xl: calc(var(--radius) * 2.6); |
|
|
| |
| |
| |
| |
| |
| |
| |
| --color-dd-paper: var(--dd-paper); |
| --color-dd-canvas: var(--dd-canvas); |
| --color-dd-sunk: var(--dd-sunk); |
| --color-dd-panel: var(--dd-panel); |
| --color-dd-ink: var(--dd-ink); |
| --color-dd-ink-2: var(--dd-ink-2); |
| --color-dd-muted: var(--dd-muted); |
| --color-dd-faint: var(--dd-faint); |
| --color-dd-line: var(--dd-line); |
| --color-dd-line-strong: var(--dd-line-strong); |
| --color-dd-positive: var(--dd-positive); |
| --color-dd-positive-soft: var(--dd-positive-soft); |
| --color-dd-positive-line: var(--dd-positive-line); |
| --color-dd-attention: var(--dd-attention); |
| --color-dd-attention-soft: var(--dd-attention-soft); |
| --color-dd-attention-line: var(--dd-attention-line); |
| --color-dd-critical: var(--dd-critical); |
| --color-dd-critical-soft: var(--dd-critical-soft); |
| --color-dd-critical-line: var(--dd-critical-line); |
| --color-dd-board: var(--dd-board); |
| --color-dd-board-panel: var(--dd-board-panel); |
| --color-dd-board-line: var(--dd-board-line); |
| --color-dd-board-ink: var(--dd-board-ink); |
| --color-dd-board-muted: var(--dd-board-muted); |
| --color-dd-chalk: var(--dd-chalk); |
| } |
|
|
| |
| html { |
| scroll-behavior: smooth; |
| color-scheme: light; |
| } |
|
|
| html.lenis, |
| html.lenis body { |
| scroll-behavior: auto !important; |
| } |
|
|
| html.lenis.lenis-smooth { |
| scroll-behavior: auto !important; |
| } |
|
|
| html.lenis.lenis-stopped { |
| overflow: hidden; |
| } |
|
|
| body { |
| background: var(--bg-root); |
| color: var(--text-primary); |
| font-family: var(--font-sans); |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| overflow-x: hidden; |
| letter-spacing: 0; |
| } |
|
|
| button, a { cursor: pointer; } |
|
|
| |
| button, a, [role="button"], label, input[type="checkbox"], input[type="radio"] { |
| touch-action: manipulation; |
| } |
|
|
| |
| |
| |
| @media (max-width: 768px) and (hover: none) { |
| * { |
| backdrop-filter: none !important; |
| -webkit-backdrop-filter: none !important; |
| } |
| } |
|
|
| ::selection { |
| background: rgba(17, 18, 23, 0.14); |
| color: var(--text-primary); |
| } |
|
|
| |
| |
| |
| |
|
|
| .workspace-card { |
| background: var(--bg-surface); |
| border: 1px solid var(--border-subtle); |
| border-radius: var(--radius-md); |
| box-shadow: var(--shadow-sm); |
| transition: box-shadow 0.2s ease, border-color 0.2s ease; |
| } |
|
|
| .workspace-card:hover { |
| box-shadow: var(--shadow-md); |
| } |
|
|
| |
| .premium-panel { |
| background: var(--bg-surface); |
| border: 1px solid var(--border-subtle); |
| border-radius: var(--radius-md); |
| box-shadow: var(--shadow-sm); |
| transition: box-shadow 0.2s ease, border-color 0.2s ease; |
| } |
|
|
| .premium-panel:hover { |
| box-shadow: var(--shadow-md); |
| } |
|
|
| .command-card { |
| background: var(--bg-surface); |
| border: 1px solid var(--border-subtle); |
| border-radius: var(--radius-md); |
| box-shadow: var(--shadow-xs); |
| } |
|
|
| |
| |
| |
|
|
| .btn-primary { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| min-height: 44px; |
| height: 44px; |
| padding: 0 20px; |
| border-radius: var(--radius-sm); |
| background: #ffffff; |
| color: #080808; |
| font-size: 14px; |
| font-weight: 600; |
| letter-spacing: 0; |
| border: 1px solid rgba(255, 255, 255, 0.16); |
| transition: background 0.15s ease, transform 0.1s ease; |
| gap: 8px; |
| } |
|
|
| .btn-primary:hover { |
| background: rgba(255, 255, 255, 0.9); |
| } |
|
|
| .btn-primary:active { |
| transform: scale(0.98); |
| } |
|
|
| |
| .btn-hero { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| min-height: 44px; |
| height: 44px; |
| padding: 0 24px; |
| border-radius: var(--radius-sm); |
| background: var(--accent-primary); |
| color: #080808; |
| font-size: 14px; |
| font-weight: 600; |
| letter-spacing: 0; |
| border: none; |
| transition: background 0.15s ease, transform 0.1s ease; |
| gap: 8px; |
| } |
|
|
| .btn-hero:hover { |
| background: var(--accent-primary-hover); |
| } |
|
|
| .btn-hero:active { |
| transform: scale(0.98); |
| } |
|
|
| .btn-secondary { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| height: 40px; |
| padding: 0 20px; |
| border-radius: var(--radius-sm); |
| background: var(--bg-surface); |
| color: var(--text-primary); |
| font-size: 14px; |
| font-weight: 500; |
| border: 1px solid var(--border-medium); |
| transition: background 0.15s ease, border-color 0.15s ease; |
| gap: 8px; |
| } |
|
|
| .btn-secondary:hover { |
| background: var(--bg-elevated); |
| border-color: var(--border-medium); |
| } |
|
|
| |
| |
| |
|
|
| .input-field { |
| height: 44px; |
| width: 100%; |
| padding: 0 14px; |
| border-radius: var(--radius-sm); |
| border: 1px solid var(--border-subtle); |
| background: var(--bg-surface); |
| color: var(--text-primary); |
| font-size: 14px; |
| outline: none; |
| transition: border-color 0.15s ease, box-shadow 0.15s ease; |
| } |
|
|
| .input-field::placeholder { |
| color: var(--text-ghost); |
| } |
|
|
| .input-field:focus { |
| border-color: var(--accent-primary); |
| box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.08); |
| } |
|
|
| |
| |
| |
|
|
| .studio-tile { |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| padding: 20px; |
| background: var(--bg-surface); |
| border: 1px solid var(--border-subtle); |
| border-radius: var(--radius-md); |
| transition: all 0.2s ease; |
| } |
|
|
| .studio-tile:hover { |
| border-color: var(--accent-primary); |
| box-shadow: 0 0 0 1px var(--accent-primary), var(--shadow-md); |
| } |
|
|
| .studio-tile-icon { |
| display: grid; |
| place-items: center; |
| width: 40px; |
| height: 40px; |
| border-radius: var(--radius-sm); |
| background: var(--accent-primary-light); |
| } |
|
|
| |
| |
| |
|
|
| .source-card { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| padding: 12px 16px; |
| background: var(--bg-surface); |
| border: 1px solid var(--border-subtle); |
| border-radius: var(--radius-sm); |
| transition: background 0.15s ease; |
| } |
|
|
| .source-card:hover { |
| background: var(--bg-elevated); |
| } |
|
|
| |
| |
| |
|
|
| .section-label { |
| font-size: 11px; |
| font-weight: 700; |
| text-transform: uppercase; |
| letter-spacing: 0.06em; |
| color: var(--text-muted); |
| } |
|
|
| .section-title { |
| font-size: 24px; |
| font-weight: 700; |
| letter-spacing: -0.02em; |
| color: var(--text-primary); |
| line-height: 1.3; |
| } |
|
|
| |
| |
| |
|
|
| .chip { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| padding: 4px 10px; |
| border-radius: 100px; |
| font-size: 11px; |
| font-weight: 600; |
| } |
|
|
| .chip-primary { |
| background: var(--accent-primary-light); |
| color: var(--accent-primary); |
| } |
|
|
| .chip-green { |
| background: var(--accent-green-light); |
| color: var(--accent-green); |
| } |
|
|
| .chip-amber { |
| background: var(--accent-amber-light); |
| color: var(--accent-amber); |
| } |
|
|
| .chip-red { |
| background: var(--accent-red-light); |
| color: var(--accent-red); |
| } |
|
|
| .chip-violet { |
| background: var(--accent-violet-light); |
| color: var(--accent-violet); |
| } |
|
|
| |
| |
| |
|
|
| |
| @keyframes dd-app-loading-sweep { |
| from { |
| transform: translateX(-110%); |
| } |
| to { |
| transform: translateX(360%); |
| } |
| } |
|
|
| .dd-app-loading-bar { |
| animation: dd-app-loading-sweep 1.25s cubic-bezier(0.4, 0, 0.2, 1) infinite; |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| .dd-app-loading-bar { |
| animation: none; |
| opacity: 0.72; |
| transform: translateX(75%); |
| } |
| } |
|
|
| @keyframes fade-up { |
| from { opacity: 0; transform: translateY(8px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| @keyframes fade-in { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
|
|
| @keyframes slide-up { |
| from { opacity: 0; transform: translateY(20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| @keyframes slide-down { |
| from { opacity: 0; transform: translateY(-12px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| @keyframes scale-in { |
| from { opacity: 0; transform: scale(0.96); } |
| to { opacity: 1; transform: scale(1); } |
| } |
|
|
| @keyframes msg-in-user { |
| from { opacity: 0; transform: translateX(12px) scale(0.97); } |
| to { opacity: 1; transform: translateX(0) scale(1); } |
| } |
|
|
| @keyframes msg-in-assistant { |
| from { opacity: 0; transform: translateX(-12px) scale(0.97); } |
| to { opacity: 1; transform: translateX(0) scale(1); } |
| } |
|
|
| @keyframes progress-step { |
| 0%, 100% { opacity: 0.4; } |
| 50% { opacity: 1; } |
| } |
|
|
| .animate-msg-user { animation: msg-in-user 0.35s var(--ease-out) both; will-change: transform, opacity; } |
| .animate-msg-assistant { animation: msg-in-assistant 0.35s var(--ease-out) both; will-change: transform, opacity; } |
|
|
| |
| :root { |
| --kb-card-border: rgba(255, 255, 255, 0.085); |
| --kb-card-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)); |
| --kb-trust-muted: rgba(255, 255, 255, 0.42); |
| --kb-citation-bg: rgba(0, 0, 0, 0.2); |
| } |
|
|
| .kb-stream-cursor::after { |
| content: ""; |
| display: inline-block; |
| width: 0.45rem; |
| height: 1rem; |
| margin-left: 0.15rem; |
| vertical-align: -0.15rem; |
| background: rgba(255, 255, 255, 0.72); |
| animation: kb-blink 1s step-end infinite; |
| } |
|
|
| @keyframes kb-blink { |
| 50% { opacity: 0; } |
| } |
| .animate-progress-step { animation: progress-step 2s var(--ease-smooth) infinite; } |
|
|
| .animate-fade-up { animation: fade-up 0.4s var(--ease-out) both; will-change: transform, opacity; } |
| .animate-fade-up-d1 { animation: fade-up 0.4s var(--ease-out) 0.08s both; will-change: transform, opacity; } |
| .animate-fade-up-d2 { animation: fade-up 0.4s var(--ease-out) 0.16s both; will-change: transform, opacity; } |
| .animate-fade-up-d3 { animation: fade-up 0.4s var(--ease-out) 0.24s both; will-change: transform, opacity; } |
| .animate-fade-up-d4 { animation: fade-up 0.4s var(--ease-out) 0.32s both; will-change: transform, opacity; } |
| .animate-fade-up-d5 { animation: fade-up 0.4s var(--ease-out) 0.40s both; will-change: transform, opacity; } |
| .animate-fade-in { animation: fade-in 0.3s var(--ease-out) both; will-change: opacity; } |
| .animate-slide-up { animation: slide-up 0.5s var(--ease-out) both; will-change: transform, opacity; } |
| .animate-slide-down { animation: slide-down 0.35s var(--ease-out) both; will-change: transform, opacity; } |
| .animate-scale-in { animation: scale-in 0.3s var(--ease-out) both; will-change: transform, opacity; } |
|
|
| |
| .scrollbar-hide { |
| -ms-overflow-style: none; |
| scrollbar-width: none; |
| } |
| .scrollbar-hide::-webkit-scrollbar { |
| display: none; |
| } |
|
|
| |
| .safe-bottom-padding { |
| padding-bottom: max(1rem, env(safe-area-inset-bottom)); |
| } |
|
|
| |
| .stagger-children > * { |
| opacity: 0; |
| animation: fade-up 0.4s var(--ease-out) forwards; |
| will-change: transform, opacity; |
| } |
|
|
| .stagger-children > *:nth-child(1) { animation-delay: 0.02s; } |
| .stagger-children > *:nth-child(2) { animation-delay: 0.06s; } |
| .stagger-children > *:nth-child(3) { animation-delay: 0.10s; } |
| .stagger-children > *:nth-child(4) { animation-delay: 0.14s; } |
| .stagger-children > *:nth-child(5) { animation-delay: 0.18s; } |
| .stagger-children > *:nth-child(6) { animation-delay: 0.22s; } |
| .stagger-children > *:nth-child(7) { animation-delay: 0.26s; } |
| .stagger-children > *:nth-child(8) { animation-delay: 0.30s; } |
|
|
| |
| .glass-panel { |
| background: var(--bg-surface); |
| border: 1px solid var(--border-subtle); |
| border-radius: var(--radius-md); |
| box-shadow: var(--shadow-sm); |
| } |
|
|
| .glass-panel-strong { |
| background: var(--bg-elevated); |
| border: 1px solid var(--border-medium); |
| border-radius: var(--radius-md); |
| box-shadow: var(--shadow-md); |
| } |
|
|
| |
| .glow-ring { |
| box-shadow: 0 0 0 1px var(--accent-primary); |
| } |
|
|
| .glow-ring-subtle { |
| box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); |
| } |
|
|
| |
| @keyframes light-streak { |
| 0% { transform: translateX(-100%) skewX(-15deg); opacity: 0; } |
| 10% { opacity: 0.8; } |
| 90% { opacity: 0.8; } |
| 100% { transform: translateX(400%) skewX(-15deg); opacity: 0; } |
| } |
|
|
| .light-streak { |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .light-streak::after { |
| content: ''; |
| position: absolute; |
| inset: 0; |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); |
| transform: translateX(-100%) skewX(-15deg); |
| pointer-events: none; |
| } |
|
|
| .light-streak:hover::after { |
| animation: light-streak 0.8s var(--ease-out); |
| } |
|
|
| |
| @keyframes float { |
| 0%, 100% { transform: translateY(0px); } |
| 50% { transform: translateY(-6px); } |
| } |
|
|
| @keyframes float-slow { |
| 0%, 100% { transform: translateY(0px); } |
| 50% { transform: translateY(-4px); } |
| } |
|
|
| .animate-float { animation: float 6s ease-in-out infinite; will-change: transform; } |
| .animate-float-slow { animation: float-slow 8s ease-in-out infinite; will-change: transform; } |
| .animate-float-d1 { animation: float 6s ease-in-out 1s infinite; will-change: transform; } |
| .animate-float-d2 { animation: float 6s ease-in-out 2s infinite; will-change: transform; } |
|
|
| |
| .animate-pulse-glow { |
| |
| } |
|
|
| |
| .animate-border-glow { |
| |
| } |
|
|
| |
| @keyframes shimmer { |
| 0% { background-position: -200% center; } |
| 100% { background-position: 200% center; } |
| } |
|
|
| .shimmer-hover { |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent); |
| background-size: 200% 100%; |
| } |
|
|
| .shimmer-hover:hover { |
| animation: shimmer 1.5s var(--ease-out); |
| } |
|
|
| |
| @keyframes typing-dot { |
| 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } |
| 30% { transform: translateY(-6px); opacity: 1; } |
| } |
|
|
| .typing-dot { |
| display: inline-block; |
| width: 5px; |
| height: 5px; |
| border-radius: 50%; |
| background: var(--text-muted); |
| animation: typing-dot 1.4s ease-in-out infinite; |
| } |
|
|
| .typing-dot:nth-child(2) { animation-delay: 0.2s; } |
| .typing-dot:nth-child(3) { animation-delay: 0.4s; } |
|
|
| |
| @keyframes stage-in { |
| from { opacity: 0; transform: translateY(3px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| .animate-stage-in { animation: stage-in 0.28s var(--ease-out, ease-out) both; } |
| @media (prefers-reduced-motion: reduce) { |
| .animate-stage-in { animation: none; } |
| } |
|
|
| |
| |
| |
| |
| |
|
|
| |
| @keyframes dd-route-enter { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| .dd-route-enter { |
| animation: dd-route-enter 0.42s var(--ease-out) both; |
| |
| |
| |
| } |
|
|
| |
| @keyframes dd-rise { |
| from { opacity: 0; transform: translateY(12px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| @keyframes dd-fade { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| |
| |
| .dd-stagger { |
| animation: dd-fade 0.5s var(--ease-out) both; |
| } |
| .dd-stagger > * { |
| animation: dd-rise 0.5s var(--ease-out) both; |
| } |
| .dd-stagger > *:nth-child(1) { animation-delay: 0.04s; } |
| .dd-stagger > *:nth-child(2) { animation-delay: 0.10s; } |
| .dd-stagger > *:nth-child(3) { animation-delay: 0.16s; } |
| .dd-stagger > *:nth-child(4) { animation-delay: 0.22s; } |
| .dd-stagger > *:nth-child(5) { animation-delay: 0.28s; } |
| .dd-stagger > *:nth-child(6) { animation-delay: 0.34s; } |
| |
| |
| |
| |
| .dd-stagger > *:nth-child(n + 7) { animation: none; } |
|
|
| |
| .dd-lift { |
| transition: |
| transform 0.2s var(--ease-out), |
| border-color 0.2s var(--ease-out), |
| box-shadow 0.2s var(--ease-out), |
| background-color 0.2s var(--ease-out); |
| } |
| .dd-lift:hover { |
| transform: translateY(-2px); |
| border-color: rgba(255, 255, 255, 0.24); |
| box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.7); |
| } |
| .dd-press { transition: transform 0.12s var(--ease-out); } |
| .dd-press:active { transform: scale(0.985); } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| .dd-route-enter, |
| .dd-stagger, |
| .dd-stagger > * { animation: none; } |
| .dd-lift:hover { transform: none; } |
| .dd-press:active { transform: none; } |
| } |
|
|
| |
| @keyframes spinner-glow { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
|
|
| .spinner-glow { |
| width: 20px; |
| height: 20px; |
| border: 2px solid var(--border-subtle); |
| border-top-color: var(--accent-primary); |
| border-radius: 50%; |
| animation: spinner-glow 0.8s linear infinite; |
| will-change: transform; |
| } |
|
|
| |
| .gradient-text { |
| color: #ffffff; |
| } |
|
|
| |
| @keyframes expand-in { |
| from { opacity: 0; transform: scaleY(0.96); max-height: 0; } |
| to { opacity: 1; transform: scaleY(1); max-height: 500px; } |
| } |
|
|
| @keyframes collapse-out { |
| from { opacity: 1; transform: scaleY(1); max-height: 500px; } |
| to { opacity: 0; transform: scaleY(0.96); max-height: 0; } |
| } |
|
|
| |
| @keyframes cine-pearl { |
| 0% { background-position: 100% 50%; } |
| 40% { background-position: 0% 50%; } |
| 100% { background-position: 0% 50%; } |
| } |
|
|
| |
| .gpu { |
| transform: translateZ(0); |
| will-change: transform; |
| } |
|
|
| |
| |
| |
|
|
| .grid-overlay { |
| background-image: |
| linear-gradient(var(--border-subtle) 1px, transparent 1px), |
| linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px); |
| background-size: 80px 80px; |
| opacity: 0.3; |
| } |
|
|
| |
| |
| |
|
|
| .pricing-card { |
| background: var(--bg-surface); |
| border: 1px solid var(--border-subtle); |
| border-radius: var(--radius-lg); |
| padding: 32px; |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .pricing-card-featured { |
| border-color: var(--accent-primary); |
| box-shadow: 0 0 0 1px var(--accent-primary), var(--shadow-lg); |
| position: relative; |
| } |
|
|
| |
| |
| |
|
|
| .workspace-preview { |
| background: var(--bg-surface); |
| border: 1px solid var(--border-subtle); |
| border-radius: var(--radius-lg); |
| box-shadow: var(--shadow-lg); |
| overflow: hidden; |
| } |
|
|
| .workspace-preview-panel { |
| border-right: 1px solid var(--border-subtle); |
| padding: 16px; |
| } |
|
|
| .workspace-preview-panel:last-child { |
| border-right: none; |
| } |
|
|
| |
| |
| |
|
|
| .score-path-step { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 8px; |
| flex: 1; |
| position: relative; |
| } |
|
|
| .score-path-icon { |
| display: grid; |
| place-items: center; |
| width: 48px; |
| height: 48px; |
| border-radius: 50%; |
| background: var(--accent-primary-light); |
| border: 2px solid var(--accent-primary); |
| color: var(--accent-primary); |
| position: relative; |
| z-index: 1; |
| } |
|
|
| .score-path-connector { |
| position: absolute; |
| top: 24px; |
| left: calc(50% + 24px); |
| right: calc(-50% + 24px); |
| height: 2px; |
| background: var(--border-medium); |
| } |
|
|
| |
| |
| |
|
|
| .nav-active { |
| background: var(--accent-primary-light); |
| color: var(--accent-primary); |
| font-weight: 600; |
| } |
|
|
| |
| |
| |
|
|
| ::-webkit-scrollbar { |
| width: 4.5px; |
| height: 4.5px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: transparent; |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: rgba(255, 255, 255, 0.12); |
| border-radius: 10px; |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: rgba(255, 255, 255, 0.22); |
| } |
|
|
| |
| |
| |
|
|
| @media (max-width: 768px) { |
| .hide-mobile { display: none !important; } |
| } |
|
|
| |
| |
| |
| |
| |
|
|
| .landing { |
| --l-bg: #0B0B0C; |
| --l-bg-card: #111113; |
| --l-bg-elevated: #161618; |
| --l-bg-glass: rgba(255,255,255,0.03); |
| --l-border: rgba(255,255,255,0.07); |
| --l-border-hover: rgba(255,255,255,0.12); |
| --l-text: #F0F1F5; |
| --l-text-sub: #9CA3B8; |
| --l-text-dim: #636A82; |
| --l-accent: #ffffff; |
| --l-accent-hover: #ffffff; |
| --l-accent-glow: rgba(255, 255, 255, 0.03); |
| --l-violet: #ffffff; |
| --l-blue: #c0c0c0; |
| --l-green: #10B981; |
| --l-amber: #F59E0B; |
| --l-red: #EF4444; |
|
|
| background: var(--l-bg); |
| color: var(--l-text); |
| font-family: var(--font-jakarta), ui-sans-serif, system-ui, -apple-system, sans-serif; |
| -webkit-font-smoothing: antialiased; |
| letter-spacing: -0.01em; |
| } |
|
|
| .landing ::selection { |
| background: rgba(255, 255, 255, 0.05); |
| color: #fff; |
| } |
|
|
| |
| .l-nav { |
| position: sticky; |
| top: 0; |
| z-index: 5120; |
| border-bottom: 1px solid var(--l-border); |
| background: rgba(11,14,26,0.82); |
| backdrop-filter: blur(36px) saturate(140%); |
| -webkit-backdrop-filter: blur(16px) saturate(140%); |
| } |
|
|
| |
| .l-btn-primary { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 8px; |
| height: 42px; |
| padding: 0 22px; |
| border-radius: 8px; |
| background: var(--l-accent); |
| color: #fff; |
| font-size: 13px; |
| font-weight: 600; |
| letter-spacing: -0.01em; |
| border: none; |
| transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.2s ease; |
| } |
|
|
| .l-btn-primary:hover { |
| background: var(--l-accent-hover); |
| box-shadow: 0 0 20px var(--l-accent-glow); |
| } |
|
|
| .l-btn-primary:active { transform: scale(0.98); } |
|
|
| .l-btn-ghost { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 8px; |
| height: 42px; |
| padding: 0 22px; |
| border-radius: 8px; |
| background: transparent; |
| color: var(--l-text-sub); |
| font-size: 13px; |
| font-weight: 500; |
| border: 1px solid var(--l-border); |
| transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; |
| } |
|
|
| .l-btn-ghost:hover { |
| border-color: var(--l-border-hover); |
| color: var(--l-text); |
| background: var(--l-bg-glass); |
| } |
|
|
| |
| .l-pill { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| padding: 5px 14px; |
| border-radius: 100px; |
| background: var(--l-accent-glow); |
| color: var(--l-accent-hover); |
| font-size: 11px; |
| font-weight: 700; |
| letter-spacing: 0.04em; |
| text-transform: uppercase; |
| border: 1px solid rgba(255, 255, 255, 0.04); |
| } |
|
|
| |
| .l-card { |
| background: var(--l-bg-card); |
| border: 1px solid var(--l-border); |
| border-radius: 14px; |
| transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; |
| } |
|
|
| .l-card:hover { |
| border-color: var(--l-border-hover); |
| transform: translateY(-2px); |
| box-shadow: 0 8px 24px rgba(0,0,0,0.3); |
| } |
|
|
| |
| .l-visual-container { |
| position: relative; |
| } |
|
|
| .l-float-panel { |
| background: var(--l-bg-card); |
| border: 1px solid var(--l-border); |
| border-radius: 12px; |
| padding: 14px 16px; |
| box-shadow: 0 4px 20px rgba(0,0,0,0.4); |
| position: absolute; |
| } |
|
|
| .l-float-panel-glow { |
| box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 30px var(--l-accent-glow); |
| } |
|
|
| |
| .l-cap-card { |
| background: var(--l-bg-card); |
| border: 1px solid var(--l-border); |
| border-radius: 14px; |
| padding: 24px; |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| transition: border-color 0.2s ease, transform 0.2s ease; |
| } |
|
|
| .l-cap-card:hover { |
| border-color: var(--l-border-hover); |
| transform: translateY(-2px); |
| } |
|
|
| .l-cap-icon { |
| display: grid; |
| place-items: center; |
| width: 40px; |
| height: 40px; |
| border-radius: 10px; |
| } |
|
|
| |
| .l-price-card { |
| background: var(--l-bg-card); |
| border: 1px solid var(--l-border); |
| border-radius: 16px; |
| padding: 32px 28px; |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .l-price-featured { |
| border-color: var(--l-accent); |
| box-shadow: 0 0 0 1px var(--l-accent), 0 8px 32px rgba(255, 255, 255, 0.02); |
| position: relative; |
| } |
|
|
| |
| @keyframes l-float { |
| 0%, 100% { transform: translateY(0px); } |
| 50% { transform: translateY(-6px); } |
| } |
|
|
| @keyframes l-glow-drift { |
| 0%, 100% { opacity: 0.4; } |
| 50% { opacity: 0.7; } |
| } |
|
|
| .l-anim-float-1 { animation: l-float 6s ease-in-out infinite; } |
| .l-anim-float-2 { animation: l-float 7s ease-in-out 1s infinite; } |
| .l-anim-float-3 { animation: l-float 5s ease-in-out 2s infinite; } |
| .l-anim-float-4 { animation: l-float 8s ease-in-out 0.5s infinite; } |
|
|
| .l-anim-glow { |
| animation: l-glow-drift 4s ease-in-out infinite; |
| } |
|
|
| .animate-fade-up-d3 { |
| animation: fade-up 0.4s ease-out 0.3s both; |
| } |
|
|
| .animate-fade-up-d4 { |
| animation: fade-up 0.4s ease-out 0.4s both; |
| } |
|
|
| .animate-fade-up-d5 { |
| animation: fade-up 0.4s ease-out 0.5s both; |
| } |
|
|
| |
| |
| |
|
|
| |
| |
| .docdoe-landing > section { |
| content-visibility: visible; |
| } |
|
|
| .docdoe-landing { |
| --dd-bg: #030303; |
| --dd-pricing-bg: #050505; |
| --dd-faq-stripe-a: #050505; |
| --dd-faq-stripe-b: #0a0a0a; |
| --dd-surface: #0c0c0c; |
| --dd-elevated: #111111; |
| --dd-primary: #ffffff; |
| --dd-secondary: #ffffff; |
| --dd-text: #f2f4f1; |
| --dd-text-secondary: rgba(242, 244, 241, 0.62); |
| --dd-border: rgba(255, 255, 255, 0.12); |
| --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); |
|
|
| background: var(--dd-bg); |
| color: var(--dd-text); |
| color-scheme: dark; |
| font-family: var(--font-docdoe-sans), "Onest", ui-sans-serif, system-ui, -apple-system, sans-serif; |
| letter-spacing: 0; |
| } |
|
|
| .docdoe-landing .font-display, |
| .docdoe-landing .font-display * { |
| font-family: var(--font-docdoe-display), "Archivo", ui-sans-serif, system-ui, sans-serif; |
| } |
|
|
| .docdoe-landing * { |
| letter-spacing: 0; |
| } |
|
|
| .docdoe-landing ::selection { |
| background: rgba(255, 255, 255, 0.087); |
| color: #ffffff; |
| } |
|
|
| .docdoe-landing section, |
| .docdoe-landing footer { |
| scroll-margin-top: 96px; |
| } |
|
|
| |
| |
| |
|
|
| .docdoe-atmosphere-noise { |
| opacity: 1; |
| mix-blend-mode: soft-light; |
| } |
|
|
| .docdoe-atmosphere-dots { |
| opacity: 0.03; |
| background-image: radial-gradient(circle, rgba(255, 255, 255, 1) 0.5px, transparent 0.5px); |
| background-size: 24px 24px; |
| } |
|
|
| .docdoe-atmosphere-global-glow { |
| top: -120px; |
| width: 600px; |
| height: 600px; |
| border-radius: 50%; |
| background: radial-gradient(circle, rgba(255, 255, 255, 0.016) 0%, transparent 68%); |
| filter: blur(180px); |
| opacity: 1; |
| } |
|
|
| |
| |
| |
|
|
| .docdoe-hero-blob-tl { |
| position: absolute; |
| top: -12%; |
| left: -8%; |
| width: min(520px, 72vw); |
| height: min(420px, 58vw); |
| border-radius: 50%; |
| background: radial-gradient(circle, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.04) 42%, transparent 72%); |
| filter: blur(160px); |
| opacity: 0.1; |
| } |
|
|
| .docdoe-hero-blob-tr { |
| position: absolute; |
| top: -10%; |
| right: -6%; |
| width: min(480px, 68vw); |
| height: min(400px, 56vw); |
| border-radius: 50%; |
| background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.044) 45%, transparent 70%); |
| filter: blur(160px); |
| opacity: 0.1; |
| } |
|
|
| .docdoe-hero-cta-stage { |
| position: absolute; |
| left: 50%; |
| bottom: 8%; |
| z-index: 2; |
| width: min(420px, 88vw); |
| height: 140px; |
| border-radius: 50%; |
| background: |
| radial-gradient(ellipse at 50% 100%, rgba(248, 250, 252, 0.22) 0%, rgba(255, 255, 255, 0.063) 28%, rgba(255, 255, 255, 0.016) 52%, transparent 72%); |
| filter: blur(48px); |
| opacity: 0.55; |
| transform: translateX(-50%) rotateX(72deg); |
| animation: docdoe-hero-cta-stage-breathe 3.4s cubic-bezier(0.25, 0.1, 0.25, 1) infinite alternate; |
| } |
|
|
| @keyframes docdoe-hero-cta-stage-breathe { |
| from { |
| opacity: 0.42; |
| transform: translateX(-50%) rotateX(72deg) scale(0.94); |
| } |
|
|
| to { |
| opacity: 0.68; |
| transform: translateX(-50%) rotateX(72deg) scale(1.04); |
| } |
| } |
|
|
| |
| |
| |
|
|
| .docdoe-what-core-blob { |
| position: absolute; |
| left: 50%; |
| top: 50%; |
| z-index: 1; |
| width: min(560px, 72vw); |
| height: min(380px, 52vw); |
| border-radius: 50%; |
| background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.056) 38%, transparent 72%); |
| filter: blur(100px); |
| opacity: 0.85; |
| transform: translate(-50%, -50%); |
| pointer-events: none; |
| } |
|
|
| .docdoe-what-ring-field { |
| position: absolute; |
| left: 50%; |
| top: 50%; |
| z-index: 2; |
| width: min(720px, 88vw); |
| height: min(520px, 72vw); |
| transform: translate(-50%, -50%); |
| pointer-events: none; |
| } |
|
|
| .docdoe-what-ring-field span { |
| position: absolute; |
| left: 50%; |
| top: 50%; |
| display: block; |
| border: 1px solid rgba(255, 255, 255, 0.018); |
| border-radius: 50%; |
| transform: translate(-50%, -50%); |
| } |
|
|
| .docdoe-what-ring-field span:nth-child(1) { |
| width: 28%; |
| height: 28%; |
| } |
|
|
| .docdoe-what-ring-field span:nth-child(2) { |
| width: 44%; |
| height: 44%; |
| } |
|
|
| .docdoe-what-ring-field span:nth-child(3) { |
| width: 60%; |
| height: 60%; |
| } |
|
|
| .docdoe-what-ring-field span:nth-child(4) { |
| width: 76%; |
| height: 76%; |
| } |
|
|
| .docdoe-what-ring-field span:nth-child(5) { |
| width: 92%; |
| height: 92%; |
| } |
|
|
| .docdoe-what-ring-field span:nth-child(6) { |
| width: 108%; |
| height: 108%; |
| } |
|
|
| |
| |
| |
|
|
| .docdoe-story-headline-glow { |
| position: absolute; |
| left: -8%; |
| top: 12%; |
| z-index: 0; |
| width: min(520px, 110%); |
| height: min(420px, 72%); |
| border-radius: 50%; |
| background: radial-gradient(ellipse at 30% 40%, rgba(255, 255, 255, 0.044) 0%, rgba(255, 255, 255, 0.016) 42%, transparent 70%); |
| filter: blur(90px); |
| opacity: 0.55; |
| pointer-events: none; |
| } |
|
|
| .docdoe-flow-timeline-glow { |
| position: absolute; |
| left: 68px; |
| top: 12%; |
| z-index: 0; |
| width: 200px; |
| height: 76%; |
| border-radius: 50%; |
| background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.056) 0%, rgba(255, 255, 255, 0.02) 45%, transparent 72%); |
| filter: blur(70px); |
| opacity: 0.65; |
| pointer-events: none; |
| } |
|
|
| |
| |
| |
|
|
| .docdoe-pricing-popular-underglow { |
| position: absolute; |
| left: 50%; |
| top: 100%; |
| z-index: 0; |
| width: min(280px, 72%); |
| height: 120px; |
| border-radius: 50%; |
| background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.11) 0%, transparent 68%); |
| filter: blur(80px); |
| opacity: 0.15; |
| transform: translate(-50%, -35%); |
| pointer-events: none; |
| } |
|
|
| |
| |
| |
|
|
| .docdoe-final-cta-spotlight { |
| position: absolute; |
| left: 50%; |
| bottom: 18%; |
| z-index: 1; |
| width: min(480px, 88vw); |
| height: 200px; |
| border-radius: 50%; |
| background: |
| radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.036) 40%, transparent 72%); |
| filter: blur(56px); |
| opacity: 0.75; |
| transform: translateX(-50%); |
| pointer-events: none; |
| } |
|
|
| .docdoe-navbar { |
| pointer-events: none; |
| backdrop-filter: blur(14px); |
| } |
|
|
| .docdoe-nav-shell { |
| position: relative; |
| overflow: hidden; |
| pointer-events: auto; |
| border: 1px solid rgba(255, 255, 255, 0.022); |
| border-radius: 999px; |
| background: |
| linear-gradient(180deg, rgba(248, 250, 252, 0.044), rgba(248, 250, 252, 0.008)), |
| linear-gradient(90deg, rgba(255, 255, 255, 0.021), rgba(255, 255, 255, 0.008), rgba(255, 255, 255, 0.009)), |
| rgba(2, 4, 8, 0.14); |
| box-shadow: |
| 0 14px 46px rgba(0, 0, 0, 0.2), |
| 0 0 58px rgba(255, 255, 255, 0.009), |
| inset 0 1px 0 rgba(255, 255, 255, 0.065), |
| inset 0 -1px 0 rgba(255, 255, 255, 0.012); |
| backdrop-filter: blur(18px) saturate(132%); |
| -webkit-backdrop-filter: blur(18px) saturate(132%); |
| } |
|
|
| .docdoe-nav-shell::before { |
| position: absolute; |
| inset: 1px; |
| content: ""; |
| border-radius: inherit; |
| background: |
| linear-gradient(110deg, transparent 0 22%, rgba(255, 255, 255, 0.08) 35%, transparent 51%), |
| radial-gradient(circle at 14% 50%, rgba(255, 255, 255, 0.038), transparent 28%), |
| radial-gradient(circle at 86% 50%, rgba(255, 255, 255, 0.018), transparent 25%); |
| opacity: 0.42; |
| pointer-events: none; |
| } |
|
|
| .docdoe-nav-shell::after { |
| position: absolute; |
| inset: auto 18% 0; |
| height: 1px; |
| content: ""; |
| background: linear-gradient(90deg, transparent, rgba(248, 250, 252, 0.11), transparent); |
| pointer-events: none; |
| } |
|
|
| .docdoe-nav-shell > * { |
| position: relative; |
| z-index: 1; |
| } |
|
|
| .docdoe-hero-trust-row { |
| max-width: min(100%, 620px); |
| } |
|
|
| .docdoe-hero-trust-item { |
| min-width: 0; |
| white-space: nowrap; |
| } |
|
|
| .docdoe-logo-mark { |
| position: relative; |
| display: block; |
| width: 36px; |
| height: 36px; |
| flex: 0 0 36px; |
| overflow: hidden; |
| border: 1px solid rgba(248, 250, 252, 0.08); |
| border-radius: 11px; |
| background-image: url("/docdoe-logo-mark.png"); |
| background-position: center; |
| background-repeat: no-repeat; |
| background-size: 102%; |
| box-shadow: |
| 0 0 16px rgba(255, 255, 255, 0.07), |
| 0 0 28px rgba(255, 255, 255, 0.03), |
| inset 0 1px 0 rgba(255, 255, 255, 0.12); |
| } |
|
|
| .docdoe-logo-mark::before { |
| position: absolute; |
| inset: 0; |
| content: ""; |
| border-radius: inherit; |
| background: |
| linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 42%), |
| radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.22), transparent 28%); |
| mix-blend-mode: screen; |
| opacity: 0.36; |
| pointer-events: none; |
| } |
|
|
| .docdoe-logo-mark::after { |
| position: absolute; |
| inset: 1px; |
| content: ""; |
| border-radius: 10px; |
| box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045); |
| pointer-events: none; |
| } |
|
|
| .docdoe-nav-cta { |
| display: inline-flex; |
| min-height: 36px; |
| align-items: center; |
| justify-content: center; |
| gap: 10px; |
| border: 1px solid rgba(255, 255, 255, 0.135); |
| border-radius: 999px; |
| padding: 0 15px 0 18px; |
| color: #f8fafc; |
| font-size: 13px; |
| font-weight: 500; |
| background: |
| linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.012)), |
| linear-gradient(100deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.01)), |
| rgba(2, 4, 8, 0.2); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.12), |
| inset 0 -1px 0 rgba(255, 255, 255, 0.028), |
| 0 9px 28px rgba(0, 0, 0, 0.16), |
| 0 0 24px rgba(255, 255, 255, 0.019); |
| transition: |
| transform 320ms ease, |
| border-color 320ms ease, |
| box-shadow 320ms ease, |
| background 320ms ease; |
| } |
|
|
| .docdoe-nav-cta:hover { |
| border-color: rgba(248, 250, 252, 0.34); |
| background: |
| linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.022)), |
| linear-gradient(100deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.015)), |
| rgba(11, 22, 34, 0.3); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.17), |
| 0 11px 34px rgba(0, 0, 0, 0.18), |
| 0 0 32px rgba(255, 255, 255, 0.03); |
| transform: translateY(-1px); |
| } |
|
|
| .docdoe-nav-cta:focus-visible, |
| .docdoe-hero-cta:focus-visible { |
| outline: 2px solid rgba(255, 255, 255, 0.378); |
| outline-offset: 4px; |
| } |
|
|
| .docdoe-hero { |
| background: |
| radial-gradient(ellipse at 50% 39%, rgba(248, 250, 252, 0.058), transparent 18%), |
| radial-gradient(ellipse at 50% 56%, rgba(255, 255, 255, 0.04), transparent 37%), |
| radial-gradient(ellipse at 50% 88%, rgba(255, 255, 255, 0.036), transparent 36%), |
| linear-gradient(180deg, #080808 0%, #080808 43%, #080808 100%); |
| } |
|
|
| .docdoe-hero-depth, |
| .docdoe-fine-grid { |
| position: absolute; |
| inset: 0; |
| } |
|
|
| .docdoe-hero-depth { |
| background: |
| radial-gradient(ellipse at center top, rgba(255, 255, 255, 0.033), transparent 45%), |
| radial-gradient(ellipse at 28% 54%, rgba(255, 255, 255, 0.025), transparent 35%), |
| radial-gradient(ellipse at 70% 48%, rgba(255, 255, 255, 0.032), transparent 33%), |
| radial-gradient(ellipse at 50% 112%, rgba(255, 255, 255, 0.034), transparent 45%); |
| } |
|
|
| .docdoe-fine-grid { |
| opacity: 0.04; |
| background-image: |
| linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px), |
| radial-gradient(circle at center, rgba(248, 250, 252, 0.16) 0 0.8px, transparent 1px); |
| background-position: center; |
| background-size: 112px 112px, 112px 112px, 58px 58px; |
| mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%); |
| } |
|
|
| .docdoe-particle-veil { |
| position: absolute; |
| inset: 0; |
| opacity: 0.4; |
| background-image: |
| radial-gradient(circle, rgba(248, 250, 252, 0.5) 0 0.7px, transparent 1px), |
| radial-gradient(circle, rgba(255, 255, 255, 0.171) 0 0.8px, transparent 1.2px), |
| radial-gradient(circle, rgba(255, 255, 255, 0.081) 0 0.7px, transparent 1.1px); |
| background-position: 12px 8px, 78px 44px, 38px 116px; |
| background-size: 164px 164px, 231px 231px, 296px 296px; |
| mask-image: radial-gradient(ellipse at center, #000 0%, transparent 78%); |
| animation: docdoe-particles-drift 34s linear infinite; |
| } |
|
|
| .docdoe-ambient-mesh { |
| position: absolute; |
| inset: -14% -8%; |
| opacity: 0.74; |
| background: |
| radial-gradient(ellipse at 31% 32%, rgba(255, 255, 255, 0.06), transparent 35%), |
| radial-gradient(ellipse at 68% 32%, rgba(255, 255, 255, 0.045), transparent 33%), |
| radial-gradient(ellipse at 50% 62%, rgba(248, 250, 252, 0.055), transparent 37%); |
| filter: blur(54px); |
| transform: translateZ(0); |
| } |
|
|
| .docdoe-liquid-fog { |
| position: absolute; |
| left: 50%; |
| width: min(1120px, 120vw); |
| height: 520px; |
| border-radius: 48% 52% 55% 45%; |
| filter: blur(60px); |
| opacity: 0.36; |
| mix-blend-mode: screen; |
| transform: translateX(-50%); |
| animation: docdoe-liquid-float 22s ease-in-out infinite; |
| } |
|
|
| .docdoe-liquid-fog-one { |
| top: 16%; |
| margin-left: -18vw; |
| background: linear-gradient(115deg, transparent 2%, rgba(255, 255, 255, 0.052) 42%, rgba(248, 250, 252, 0.045) 62%, transparent 94%); |
| } |
|
|
| .docdoe-liquid-fog-two { |
| top: 30%; |
| margin-left: 18vw; |
| opacity: 0.28; |
| background: linear-gradient(65deg, transparent 4%, rgba(255, 255, 255, 0.041) 34%, rgba(255, 255, 255, 0.045) 70%, transparent 96%); |
| animation-delay: -9s; |
| animation-direction: reverse; |
| } |
|
|
| .docdoe-aurora { |
| position: absolute; |
| left: 50%; |
| width: min(920px, 96vw); |
| height: 420px; |
| border-radius: 999px; |
| opacity: 0.4; |
| filter: blur(36px); |
| mix-blend-mode: screen; |
| transform: translateX(-50%) rotate(-9deg); |
| animation: docdoe-aurora-drift 18s ease-in-out infinite; |
| } |
|
|
| .docdoe-aurora-left { |
| top: 20%; |
| margin-left: -22vw; |
| background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.075) 38%, rgba(255, 255, 255, 0.027) 72%, transparent 100%); |
| } |
|
|
| .docdoe-aurora-right { |
| top: 30%; |
| margin-left: 24vw; |
| opacity: 0.3; |
| background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.045) 28%, rgba(255, 255, 255, 0.05) 62%, transparent 100%); |
| animation-delay: -8s; |
| animation-direction: reverse; |
| } |
|
|
| .docdoe-orbit-arc { |
| position: absolute; |
| top: 11%; |
| left: 50%; |
| width: min(1420px, 136vw); |
| height: min(720px, 64vw); |
| border: 1px solid rgba(255, 255, 255, 0.068); |
| border-bottom-color: rgba(255, 255, 255, 0.018); |
| border-radius: 50%; |
| box-shadow: |
| inset 0 0 40px rgba(255, 255, 255, 0.014), |
| 0 0 42px rgba(255, 255, 255, 0.016); |
| mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 86%, transparent 100%); |
| transform: translateX(-50%) rotate(-7deg); |
| animation: docdoe-orbit-drift 22s ease-in-out infinite; |
| } |
|
|
| .docdoe-orbit-arc::before { |
| position: absolute; |
| left: 50%; |
| top: -1px; |
| width: 18%; |
| height: 1px; |
| content: ""; |
| border-radius: 999px; |
| background: linear-gradient(90deg, transparent, rgba(248, 250, 252, 0.34), transparent); |
| filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.07)); |
| transform: translateX(-50%); |
| } |
|
|
| .docdoe-orbit-arc-secondary { |
| top: 28%; |
| width: min(1280px, 124vw); |
| height: min(610px, 58vw); |
| border-color: rgba(255, 255, 255, 0.024); |
| border-left-color: rgba(255, 255, 255, 0.029); |
| transform: translateX(-50%) rotate(19deg); |
| animation-duration: 28s; |
| animation-direction: reverse; |
| } |
|
|
| .docdoe-orbit-arc-tertiary { |
| top: 39%; |
| width: min(960px, 96vw); |
| height: min(360px, 42vw); |
| border-color: rgba(248, 250, 252, 0.055); |
| border-top-color: rgba(255, 255, 255, 0.029); |
| border-bottom-color: transparent; |
| transform: translateX(-50%) rotate(-2deg); |
| animation-duration: 32s; |
| } |
|
|
| .docdoe-comet { |
| position: absolute; |
| top: 49%; |
| left: 6.7%; |
| width: 18px; |
| height: 18px; |
| border-radius: 999px; |
| background: #ffffff; |
| box-shadow: |
| 0 0 18px #ffffff, |
| 0 0 46px rgba(255, 255, 255, 0.245), |
| 0 0 96px rgba(255, 255, 255, 0.155); |
| animation: docdoe-comet-float 9s ease-in-out infinite; |
| } |
|
|
| .docdoe-comet::before { |
| position: absolute; |
| right: 6px; |
| top: 50%; |
| width: 260px; |
| height: 3px; |
| content: ""; |
| border-radius: 999px; |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.045), rgba(248, 250, 252, 0.9)); |
| filter: blur(1px); |
| transform: translateY(-50%) rotate(-32deg); |
| transform-origin: right center; |
| } |
|
|
| .docdoe-comet::after { |
| position: absolute; |
| inset: -55px; |
| content: ""; |
| border-radius: 50%; |
| background: radial-gradient(circle, rgba(255, 255, 255, 0.07), transparent 68%); |
| filter: blur(8px); |
| } |
|
|
| .docdoe-planet-system { |
| position: absolute; |
| top: 28%; |
| right: 7.6%; |
| width: 178px; |
| aspect-ratio: 1; |
| animation: docdoe-planet-drift 13s ease-in-out infinite; |
| } |
|
|
| .docdoe-planet-ring, |
| .docdoe-planet-axis, |
| .docdoe-planet-core, |
| .docdoe-planet-node { |
| position: absolute; |
| display: block; |
| } |
|
|
| .docdoe-planet-ring { |
| border: 1px solid rgba(255, 255, 255, 0.153); |
| border-radius: 50%; |
| box-shadow: |
| inset 0 0 28px rgba(255, 255, 255, 0.02), |
| 0 0 24px rgba(255, 255, 255, 0.025); |
| } |
|
|
| .docdoe-planet-ring-outer { |
| inset: 0; |
| } |
|
|
| .docdoe-planet-ring-inner { |
| inset: 20px; |
| border-color: rgba(255, 255, 255, 0.105); |
| transform: rotate(22deg) scaleX(1.12); |
| } |
|
|
| .docdoe-planet-axis { |
| top: 50%; |
| left: -8%; |
| width: 116%; |
| height: 1px; |
| background: linear-gradient(90deg, transparent, rgba(248, 250, 252, 0.25), transparent); |
| } |
|
|
| .docdoe-planet-core { |
| inset: 42px; |
| border-radius: 50%; |
| background: |
| radial-gradient(circle at 37% 31%, rgba(255, 255, 255, 0.92) 0 4%, rgba(255, 255, 255, 0.396) 10%, transparent 19%), |
| radial-gradient(circle at 48% 45%, rgba(255, 255, 255, 0.237), rgba(57, 33, 126, 0.92) 48%, rgba(2, 4, 8, 0.98) 74%); |
| box-shadow: |
| inset -18px -18px 36px rgba(0, 0, 0, 0.72), |
| inset 9px 8px 24px rgba(255, 255, 255, 0.12), |
| 0 0 32px rgba(255, 255, 255, 0.225), |
| 0 0 84px rgba(255, 255, 255, 0.095); |
| } |
|
|
| .docdoe-planet-core::after { |
| position: absolute; |
| inset: -24px; |
| content: ""; |
| border-radius: 50%; |
| background: radial-gradient(circle, rgba(255, 255, 255, 0.065), transparent 70%); |
| filter: blur(8px); |
| } |
|
|
| .docdoe-planet-node { |
| width: 4px; |
| height: 4px; |
| border-radius: 999px; |
| background: #f8fafc; |
| box-shadow: 0 0 12px rgba(248, 250, 252, 0.9); |
| } |
|
|
| .docdoe-planet-node-one { |
| top: 0; |
| left: 49%; |
| } |
|
|
| .docdoe-planet-node-two { |
| right: 0; |
| top: 49%; |
| } |
|
|
| .docdoe-portal-system { |
| position: absolute; |
| bottom: -1.5%; |
| left: 50%; |
| width: min(960px, 112vw); |
| height: 350px; |
| perspective: 900px; |
| transform: translateX(-50%); |
| } |
|
|
| .docdoe-portal-ring, |
| .docdoe-portal-core, |
| .docdoe-portal-beam { |
| position: absolute; |
| left: 50%; |
| display: block; |
| } |
|
|
| .docdoe-portal-ring { |
| bottom: 102px; |
| border: 1px solid rgba(255, 255, 255, 0.12); |
| border-radius: 50%; |
| box-shadow: |
| inset 0 0 24px rgba(255, 255, 255, 0.045), |
| 0 0 22px rgba(255, 255, 255, 0.045); |
| transform: translateX(-50%) rotateX(68deg); |
| animation: docdoe-portal-pulse 7s ease-in-out infinite; |
| } |
|
|
| .docdoe-portal-ring-one { |
| width: 28%; |
| height: 28%; |
| border-color: rgba(248, 250, 252, 0.62); |
| box-shadow: |
| 0 0 18px rgba(248, 250, 252, 0.34), |
| 0 0 42px rgba(255, 255, 255, 0.145), |
| inset 0 0 22px rgba(255, 255, 255, 0.105); |
| } |
|
|
| .docdoe-portal-ring-two { |
| width: 42%; |
| height: 42%; |
| border-color: rgba(255, 255, 255, 0.16); |
| animation-delay: -1.2s; |
| } |
|
|
| .docdoe-portal-ring-three { |
| width: 56%; |
| height: 56%; |
| border-color: rgba(255, 255, 255, 0.105); |
| animation-delay: -2.4s; |
| } |
|
|
| .docdoe-portal-ring-four { |
| width: 72%; |
| height: 72%; |
| border-color: rgba(255, 255, 255, 0.08); |
| animation-delay: -3.6s; |
| } |
|
|
| .docdoe-portal-ring-five { |
| width: 92%; |
| height: 92%; |
| border-color: rgba(255, 255, 255, 0.05); |
| animation-delay: -4.8s; |
| } |
|
|
| .docdoe-portal-core { |
| bottom: 96px; |
| width: 92px; |
| height: 54px; |
| border-radius: 50%; |
| background: radial-gradient(circle, #ffffff 0 10%, rgba(255, 255, 255, 0.378) 24%, rgba(255, 255, 255, 0.095) 48%, transparent 75%); |
| filter: blur(1px); |
| box-shadow: |
| 0 0 20px rgba(248, 250, 252, 0.88), |
| 0 0 72px rgba(255, 255, 255, 0.21), |
| 0 0 120px rgba(255, 255, 255, 0.072); |
| transform: translateX(-50%); |
| animation: docdoe-core-pulse 6s ease-in-out infinite; |
| } |
|
|
| .docdoe-portal-beam { |
| bottom: 118px; |
| width: 2px; |
| height: 184px; |
| background: linear-gradient(180deg, transparent, rgba(248, 250, 252, 0.46), rgba(255, 255, 255, 0.23), #ffffff); |
| box-shadow: |
| 0 0 18px rgba(248, 250, 252, 0.82), |
| 0 0 42px rgba(255, 255, 255, 0.175); |
| transform: translateX(-50%); |
| opacity: 0.56; |
| mask-image: linear-gradient(180deg, transparent, #000 28%, #000 100%); |
| } |
|
|
| .docdoe-horizon-glow { |
| position: absolute; |
| left: 50%; |
| bottom: 3%; |
| width: min(940px, 114vw); |
| height: 240px; |
| border-radius: 50%; |
| background: |
| radial-gradient(ellipse at center, rgba(248, 250, 252, 0.052) 0 4%, rgba(255, 255, 255, 0.05) 12%, rgba(255, 255, 255, 0.018) 32%, transparent 64%), |
| linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.022) 25%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0.022) 75%, transparent 100%); |
| filter: blur(34px); |
| opacity: 0.68; |
| transform: translateX(-50%) rotateX(68deg); |
| animation: docdoe-horizon-breathe 12s ease-in-out infinite; |
| } |
|
|
| .docdoe-horizon-glow::after { |
| position: absolute; |
| inset: 44% 12% auto; |
| height: 1px; |
| content: ""; |
| background: linear-gradient(90deg, transparent, rgba(248, 250, 252, 0.18), rgba(255, 255, 255, 0.063), transparent); |
| box-shadow: |
| 0 0 20px rgba(255, 255, 255, 0.035), |
| 0 0 34px rgba(255, 255, 255, 0.036); |
| } |
|
|
| .docdoe-lens-line { |
| position: absolute; |
| left: 50%; |
| height: 1px; |
| border-radius: 999px; |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.063), rgba(248, 250, 252, 0.08), transparent); |
| transform: translateX(-50%); |
| animation: docdoe-lens-drift 14s ease-in-out infinite; |
| } |
|
|
| .docdoe-lens-line-one { |
| bottom: 21%; |
| width: min(740px, 88vw); |
| opacity: 0.4; |
| } |
|
|
| .docdoe-lens-line-two { |
| bottom: 17%; |
| width: min(520px, 72vw); |
| opacity: 0.24; |
| animation-delay: -6s; |
| } |
|
|
| .docdoe-floor-atmosphere { |
| position: absolute; |
| left: 50%; |
| bottom: -4%; |
| width: min(980px, 116vw); |
| height: 320px; |
| perspective: 1200px; |
| opacity: 0.9; |
| transform: translateX(-50%); |
| } |
|
|
| .docdoe-floor-atmosphere span { |
| position: absolute; |
| left: 50%; |
| display: block; |
| transform: translateX(-50%); |
| } |
|
|
| .docdoe-floor-haze { |
| bottom: 42px; |
| width: min(920px, 108vw); |
| height: 190px; |
| border-radius: 50%; |
| background: |
| radial-gradient(ellipse at center, rgba(248, 250, 252, 0.045) 0 6%, rgba(255, 255, 255, 0.045) 20%, rgba(255, 255, 255, 0.018) 42%, transparent 72%), |
| linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.036), transparent); |
| filter: blur(24px); |
| opacity: 0.7; |
| transform: translateX(-50%) rotateX(72deg); |
| animation: docdoe-floor-breathe 14s ease-in-out infinite; |
| } |
|
|
| .docdoe-floor-bloom { |
| bottom: 125px; |
| width: 230px; |
| height: 20px; |
| border-radius: 999px; |
| background: |
| linear-gradient(90deg, transparent 0%, rgba(248, 250, 252, 0.34) 44%, rgba(255, 255, 255, 0.12) 55%, transparent 100%), |
| radial-gradient(ellipse at center, rgba(248, 250, 252, 0.18), transparent 64%); |
| box-shadow: |
| 0 0 24px rgba(248, 250, 252, 0.16), |
| 0 0 56px rgba(255, 255, 255, 0.045); |
| filter: blur(10px); |
| opacity: 0.44; |
| transform: translateX(-50%) rotateX(70deg); |
| animation: docdoe-floor-bloom 11s ease-in-out infinite; |
| } |
|
|
| .docdoe-floor-ring { |
| bottom: 84px; |
| border: 1px solid rgba(255, 255, 255, 0.06); |
| border-radius: 50%; |
| background: |
| linear-gradient(90deg, transparent, rgba(248, 250, 252, 0.026), transparent), |
| radial-gradient(ellipse at center, transparent 52%, rgba(255, 255, 255, 0.013) 68%, transparent 72%); |
| box-shadow: |
| inset 0 0 28px rgba(255, 255, 255, 0.009), |
| 0 0 18px rgba(255, 255, 255, 0.014); |
| transform: translateX(-50%) rotateX(72deg); |
| animation: docdoe-floor-ring 16s ease-in-out infinite; |
| } |
|
|
| .docdoe-floor-ring-one { |
| width: 38%; |
| height: 27%; |
| border-color: rgba(248, 250, 252, 0.14); |
| box-shadow: |
| 0 0 14px rgba(248, 250, 252, 0.08), |
| 0 0 36px rgba(255, 255, 255, 0.03); |
| } |
|
|
| .docdoe-floor-ring-two { |
| width: 62%; |
| height: 41%; |
| border-color: rgba(255, 255, 255, 0.043); |
| opacity: 0.78; |
| animation-delay: -4s; |
| } |
|
|
| .docdoe-floor-ring-three { |
| width: 88%; |
| height: 57%; |
| border-color: rgba(255, 255, 255, 0.018); |
| opacity: 0.62; |
| animation-delay: -8s; |
| } |
|
|
| .docdoe-floor-reflection { |
| bottom: 22px; |
| width: min(880px, 104vw); |
| height: 138px; |
| border-radius: 50%; |
| background: |
| radial-gradient(ellipse at center, rgba(248, 250, 252, 0.035), rgba(255, 255, 255, 0.034) 26%, rgba(255, 255, 255, 0.01) 48%, transparent 72%), |
| linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent); |
| filter: blur(34px); |
| opacity: 0.54; |
| transform: translateX(-50%) rotateX(70deg); |
| } |
|
|
| .docdoe-star { |
| position: absolute; |
| border-radius: 999px; |
| background: #f8fafc; |
| box-shadow: |
| 0 0 8px rgba(248, 250, 252, 0.88), |
| 0 0 18px rgba(255, 255, 255, 0.095); |
| animation: docdoe-star-drift 16s ease-in-out infinite; |
| } |
|
|
| .docdoe-motion-no-css-animation { |
| animation: none !important; |
| } |
|
|
| .docdoe-eyebrow { |
| text-shadow: |
| 0 0 14px rgba(255, 255, 255, 0.175), |
| 0 0 26px rgba(255, 255, 255, 0.036); |
| } |
|
|
| .docdoe-eyebrow::before, |
| .docdoe-eyebrow::after { |
| display: inline-block; |
| width: clamp(44px, 13vw, 120px); |
| height: 1px; |
| margin: 0 18px; |
| content: ""; |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.216), transparent); |
| box-shadow: 0 0 10px rgba(255, 255, 255, 0.08); |
| } |
|
|
| .docdoe-gradient-text { |
| color: #ffffff; |
| background: none; |
| background-clip: unset; |
| -webkit-background-clip: unset; |
| text-shadow: none; |
| } |
|
|
| .docdoe-hero-cta { |
| position: relative; |
| display: inline-flex; |
| width: min(306px, calc(100vw - 48px)); |
| min-width: 0; |
| max-width: 344px; |
| min-height: 70px; |
| align-items: center; |
| justify-content: center; |
| gap: 22px; |
| overflow: hidden; |
| border: 1px solid rgba(255, 255, 255, 0.38); |
| border-radius: 999px; |
| color: #ffffff; |
| font-size: 21px; |
| font-weight: 700; |
| background: |
| radial-gradient(ellipse at 18% 0%, rgba(255, 255, 255, 0.42), transparent 48%), |
| linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.07) 34%, rgba(255, 255, 255, 0.018) 100%), |
| linear-gradient(102deg, rgba(255, 255, 255, 0.336) 0%, rgba(255, 255, 255, 0.29) 28%, rgba(255, 255, 255, 0.17) 64%, rgba(255, 255, 255, 0.156) 100%); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.68), |
| inset 0 -16px 32px rgba(2, 4, 8, 0.24), |
| inset 0 0 26px rgba(255, 255, 255, 0.12), |
| 0 0 0 1px rgba(255, 255, 255, 0.081), |
| 0 18px 64px rgba(255, 255, 255, 0.08), |
| 0 0 48px rgba(255, 255, 255, 0.054); |
| backdrop-filter: blur(22px) saturate(135%); |
| -webkit-backdrop-filter: blur(22px) saturate(135%); |
| transition: |
| transform 360ms ease, |
| box-shadow 360ms ease, |
| filter 360ms ease; |
| } |
|
|
| .docdoe-hero-cta::before { |
| position: absolute; |
| inset: 1px; |
| content: ""; |
| border-radius: inherit; |
| background: |
| linear-gradient(112deg, transparent 0 24%, rgba(255, 255, 255, 0.34) 36%, transparent 52%), |
| radial-gradient(ellipse at 20% 18%, rgba(255, 255, 255, 0.36), transparent 34%), |
| radial-gradient(ellipse at 72% 86%, rgba(255, 255, 255, 0.09), transparent 50%); |
| opacity: 0.62; |
| transform: translateX(-24%); |
| transition: transform 560ms ease, opacity 360ms ease; |
| } |
|
|
| .docdoe-hero-cta:hover { |
| filter: saturate(1.015) brightness(1.025); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.74), |
| inset 0 -16px 32px rgba(2, 4, 8, 0.22), |
| inset 0 0 30px rgba(255, 255, 255, 0.13), |
| 0 20px 74px rgba(255, 255, 255, 0.095), |
| 0 0 56px rgba(255, 255, 255, 0.072); |
| transform: translateY(-2px); |
| } |
|
|
| .docdoe-hero-cta:hover::before { |
| opacity: 0.76; |
| transform: translateX(18%); |
| } |
|
|
| .docdoe-hero-cta > span { |
| position: relative; |
| z-index: 1; |
| } |
|
|
| .docdoe-hero-cta-icon { |
| display: grid; |
| width: 52px; |
| height: 52px; |
| place-items: center; |
| border: 1px solid rgba(255, 255, 255, 0.34); |
| border-radius: 50%; |
| background: |
| linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)), |
| rgba(255, 255, 255, 0.075); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.28), |
| inset 0 -10px 18px rgba(2, 4, 8, 0.08), |
| 0 0 24px rgba(255, 255, 255, 0.14); |
| } |
|
|
| .docdoe-hero-cta-bloom { |
| position: absolute; |
| inset: -16px; |
| z-index: 0; |
| border-radius: 999px; |
| pointer-events: none; |
| background: radial-gradient(circle, rgba(255, 255, 255, 0.084) 0%, rgba(255, 255, 255, 0.03) 42%, transparent 72%); |
| filter: blur(20px); |
| opacity: 0.72; |
| transform: translateZ(0); |
| animation: docdoe-hero-cta-bloom-pulse 2.85s cubic-bezier(0.25, 0.1, 0.25, 1) infinite alternate; |
| } |
|
|
| .docdoe-hero-period-pulse { |
| animation: docdoe-hero-period-pulse 2.5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite alternate; |
| animation-delay: var(--period-delay, 1.2s); |
| } |
|
|
| .docdoe-flow-line-progress { |
| will-change: transform; |
| } |
|
|
| .docdoe-final-cta-button-bloom { |
| position: absolute; |
| inset: -14px; |
| z-index: 0; |
| border-radius: 999px; |
| pointer-events: none; |
| background: radial-gradient(circle, rgba(255, 255, 255, 0.076) 0%, rgba(255, 255, 255, 0.025) 45%, transparent 72%); |
| filter: blur(18px); |
| opacity: 0.7; |
| transform: translateZ(0); |
| animation: docdoe-hero-cta-bloom-pulse 3s cubic-bezier(0.25, 0.1, 0.25, 1) infinite alternate; |
| } |
|
|
| .docdoe-pricing-button-shimmer::after { |
| position: absolute; |
| inset: 0; |
| left: -100%; |
| width: 100%; |
| border-radius: inherit; |
| content: ""; |
| background: linear-gradient( |
| 105deg, |
| transparent 0%, |
| rgba(255, 255, 255, 0.42) 48%, |
| transparent 100% |
| ); |
| opacity: 0; |
| mix-blend-mode: screen; |
| pointer-events: none; |
| transform: translateZ(0); |
| transition: left 0.65s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.35s ease; |
| } |
|
|
| .docdoe-pricing-button-shimmer:hover::after { |
| left: 100%; |
| opacity: 0.55; |
| } |
|
|
| @keyframes docdoe-hero-cta-bloom-pulse { |
| from { |
| opacity: 0.52; |
| transform: translateZ(0) scale(0.94); |
| } |
|
|
| to { |
| opacity: 0.92; |
| transform: translateZ(0) scale(1.06); |
| } |
| } |
|
|
| @keyframes docdoe-hero-period-pulse { |
| from { |
| color: rgba(248, 250, 252, 0.95); |
| text-shadow: 0 0 12px rgba(255, 255, 255, 0.07); |
| } |
|
|
| to { |
| color: #e0e0e0; |
| text-shadow: |
| 0 0 28px rgba(255, 255, 255, 0.17), |
| 0 0 52px rgba(255, 255, 255, 0.07); |
| } |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| *, *::before, *::after { |
| animation-duration: 0.01ms !important; |
| animation-iteration-count: 1 !important; |
| transition-duration: 0.01ms !important; |
| } |
|
|
| .docdoe-hero-cta-bloom, |
| .docdoe-final-cta-button-bloom, |
| .docdoe-hero-period-pulse, |
| .docdoe-lens-line, |
| .docdoe-ai-core, |
| .docdoe-feature-node, |
| .docdoe-comet, |
| .docdoe-planet-system { |
| animation: none !important; |
| opacity: 0.65; |
| } |
|
|
| .docdoe-pricing-button-shimmer:hover::after { |
| left: -100%; |
| opacity: 0; |
| } |
|
|
| .docdoe-flow-node, |
| .docdoe-ai-core.docdoe-ai-core-soft-pulse.docdoe-motion-no-css-animation { |
| animation: none !important; |
| } |
|
|
| .stagger-children > * { |
| opacity: 1; |
| animation: none !important; |
| } |
|
|
| .animate-fade-up, |
| .animate-fade-up-d1, |
| .animate-fade-up-d2, |
| .animate-fade-up-d3, |
| .animate-fade-up-d4, |
| .animate-fade-up-d5, |
| .animate-fade-in, |
| .animate-slide-up, |
| .animate-slide-down, |
| .animate-scale-in, |
| .animate-float, |
| .animate-float-slow, |
| .animate-float-d1, |
| .animate-float-d2, |
| .animate-pulse-glow, |
| .animate-border-glow { |
| animation: none !important; |
| opacity: 1 !important; |
| transform: none !important; |
| } |
|
|
| .hide-motion { |
| display: none; |
| } |
| } |
|
|
| .docdoe-what-section { |
| min-height: 96svh; |
| color: #f8fafc; |
| background: |
| radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.03), transparent 36%), |
| radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.036), transparent 34%), |
| radial-gradient(ellipse at 25% 62%, rgba(255, 255, 255, 0.021), transparent 36%), |
| radial-gradient(ellipse at 74% 62%, rgba(255, 255, 255, 0.025), transparent 34%), |
| linear-gradient(180deg, #020202 0%, #040404 48%, #020202 100%); |
| } |
|
|
| .docdoe-what-section::before, |
| .docdoe-what-section::after { |
| position: absolute; |
| inset: 0; |
| content: ""; |
| pointer-events: none; |
| } |
|
|
| .docdoe-what-section::before { |
| background: |
| linear-gradient(180deg, #020202 0%, transparent 12%, transparent 88%, #020202 100%), |
| radial-gradient(ellipse at center, transparent 0%, rgba(2, 4, 8, 0.5) 78%); |
| z-index: 1; |
| } |
|
|
| .docdoe-what-section::after { |
| background: radial-gradient(ellipse at 50% 52%, rgba(248, 250, 252, 0.04), transparent 44%); |
| mix-blend-mode: screen; |
| opacity: 0.72; |
| z-index: 0; |
| } |
|
|
| .docdoe-what-depth, |
| .docdoe-what-grid { |
| position: absolute; |
| inset: 0; |
| } |
|
|
| .docdoe-what-depth { |
| background: |
| radial-gradient(ellipse at 50% 25%, rgba(255, 255, 255, 0.035), transparent 42%), |
| radial-gradient(ellipse at 50% 70%, rgba(255, 255, 255, 0.033), transparent 36%); |
| opacity: 0.84; |
| } |
|
|
| .docdoe-what-grid { |
| opacity: 0.09; |
| background-image: |
| linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px); |
| background-position: center; |
| background-size: 118px 118px; |
| mask-image: radial-gradient(ellipse at 50% 52%, #000 0%, transparent 72%); |
| } |
|
|
| .docdoe-what-fog { |
| position: absolute; |
| left: 50%; |
| width: min(900px, 110vw); |
| height: 430px; |
| border-radius: 50%; |
| filter: blur(62px); |
| mix-blend-mode: screen; |
| opacity: 0.3; |
| transform: translateX(-50%); |
| animation: docdoe-what-fog-drift 24s ease-in-out infinite; |
| } |
|
|
| .docdoe-what-fog-left { |
| top: 26%; |
| margin-left: -24vw; |
| background: linear-gradient(110deg, transparent 5%, rgba(255, 255, 255, 0.05), transparent 92%); |
| } |
|
|
| .docdoe-what-fog-right { |
| top: 36%; |
| margin-left: 26vw; |
| background: linear-gradient(70deg, transparent 8%, rgba(255, 255, 255, 0.054), rgba(255, 255, 255, 0.025), transparent 94%); |
| animation-delay: -11s; |
| animation-direction: reverse; |
| } |
|
|
| .docdoe-what-horizon { |
| position: absolute; |
| left: 50%; |
| bottom: 7%; |
| width: min(940px, 112vw); |
| height: 210px; |
| border-radius: 50%; |
| background: |
| radial-gradient(ellipse at center, rgba(248, 250, 252, 0.04), rgba(255, 255, 255, 0.032) 26%, rgba(255, 255, 255, 0.009) 48%, transparent 72%), |
| linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.027), transparent); |
| filter: blur(32px); |
| opacity: 0.54; |
| transform: translateX(-50%) rotateX(70deg); |
| } |
|
|
| .docdoe-what-particle { |
| position: absolute; |
| border-radius: 999px; |
| background: #f8fafc; |
| mix-blend-mode: screen; |
| box-shadow: |
| 0 0 8px rgba(248, 250, 252, 0.52), |
| 0 0 18px rgba(255, 255, 255, 0.06); |
| animation: docdoe-what-particle-drift 22s ease-in-out infinite; |
| } |
|
|
| .docdoe-what-label { |
| letter-spacing: 0.28em; |
| text-shadow: |
| 0 0 14px rgba(255, 255, 255, 0.13), |
| 0 0 28px rgba(255, 255, 255, 0.036); |
| } |
|
|
| .docdoe-what-title-highlight { |
| color: #ffffff; |
| background: none; |
| background-clip: unset; |
| -webkit-background-clip: unset; |
| text-shadow: none; |
| } |
|
|
| .docdoe-intelligence-stage { |
| position: relative; |
| width: min(100%, 1100px); |
| height: 540px; |
| margin-top: 38px; |
| } |
|
|
| .docdoe-intelligence-stage::before, |
| .docdoe-intelligence-stage::after { |
| position: absolute; |
| left: 50%; |
| content: ""; |
| pointer-events: none; |
| transform: translateX(-50%); |
| } |
|
|
| .docdoe-intelligence-stage::before { |
| top: 50%; |
| width: min(680px, 68vw); |
| height: 280px; |
| border-radius: 50%; |
| background: radial-gradient(ellipse at center, rgba(248, 250, 252, 0.04), rgba(255, 255, 255, 0.016) 38%, transparent 72%); |
| filter: blur(34px); |
| opacity: 0.66; |
| transform: translate(-50%, -50%); |
| } |
|
|
| .docdoe-intelligence-stage::after { |
| bottom: 20px; |
| width: min(780px, 86vw); |
| height: 132px; |
| border-radius: 50%; |
| background: radial-gradient(ellipse at center, rgba(248, 250, 252, 0.032), rgba(255, 255, 255, 0.027) 28%, transparent 70%); |
| filter: blur(24px); |
| opacity: 0.72; |
| transform: translateX(-50%) rotateX(70deg); |
| } |
|
|
| .docdoe-what-core-ring-spin { |
| pointer-events: none; |
| position: absolute; |
| left: 50%; |
| top: 50%; |
| z-index: 3; |
| width: min(220px, 52vw); |
| height: min(220px, 52vw); |
| margin-left: calc(min(220px, 52vw) / -2); |
| margin-top: calc(min(220px, 52vw) / -2); |
| border-radius: 50%; |
| border: 1px solid rgba(255, 255, 255, 0.028); |
| opacity: 0.45; |
| transform: translateZ(0); |
| animation: docdoe-what-ring-spin 48s linear infinite; |
| } |
|
|
| @keyframes docdoe-what-ring-spin { |
| to { |
| transform: translateZ(0) rotate(360deg); |
| } |
| } |
|
|
| .docdoe-ai-core.docdoe-ai-core-soft-pulse.docdoe-motion-no-css-animation { |
| animation: docdoe-ai-core-soft-pulse 5.5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite alternate !important; |
| } |
|
|
| @keyframes docdoe-ai-core-soft-pulse { |
| from { |
| transform: translate(-50%, -50%) scale(1); |
| } |
|
|
| to { |
| transform: translate(-50%, -50%) scale(1.035); |
| } |
| } |
|
|
| .docdoe-what-orbit { |
| --orbit-rotation: 0deg; |
|
|
| position: absolute; |
| left: 50%; |
| top: 50%; |
| border: 1px solid rgba(255, 255, 255, 0.077); |
| border-radius: 50%; |
| box-shadow: |
| inset 0 0 42px rgba(255, 255, 255, 0.009), |
| 0 0 34px rgba(255, 255, 255, 0.015); |
| mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); |
| transform: translate(-50%, -50%) rotate(var(--orbit-rotation)); |
| animation: docdoe-what-orbit-drift 26s ease-in-out infinite; |
| } |
|
|
| .docdoe-what-orbit-one { |
| --orbit-rotation: -9deg; |
|
|
| width: 79%; |
| height: 54%; |
| } |
|
|
| .docdoe-what-orbit-two { |
| --orbit-rotation: 19deg; |
|
|
| width: 68%; |
| height: 68%; |
| border-color: rgba(248, 250, 252, 0.105); |
| animation-duration: 32s; |
| animation-direction: reverse; |
| } |
|
|
| .docdoe-what-orbit-three { |
| --orbit-rotation: 48deg; |
|
|
| width: 48%; |
| height: 78%; |
| border-color: rgba(255, 255, 255, 0.036); |
| opacity: 0.82; |
| animation-duration: 36s; |
| } |
|
|
| .docdoe-what-axis { |
| position: absolute; |
| z-index: 1; |
| opacity: 0.36; |
| pointer-events: none; |
| } |
|
|
| .docdoe-what-axis-horizontal { |
| left: 12%; |
| top: 50%; |
| width: 76%; |
| height: 1px; |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.072), transparent); |
| } |
|
|
| .docdoe-what-axis-vertical { |
| left: 50%; |
| top: 16%; |
| width: 1px; |
| height: 68%; |
| background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.054), transparent); |
| } |
|
|
| .docdoe-what-axis-hidden { |
| opacity: 0 !important; |
| } |
|
|
| .docdoe-ai-core { |
| position: absolute; |
| z-index: 4; |
| left: 50%; |
| top: 50%; |
| display: grid; |
| width: 178px; |
| height: 178px; |
| place-items: center; |
| border-radius: 50%; |
| transform: translate(-50%, -50%); |
| animation: docdoe-ai-core-breathe 9s ease-in-out infinite; |
| } |
|
|
| .docdoe-ai-core::before, |
| .docdoe-ai-core::after { |
| position: absolute; |
| content: ""; |
| border-radius: inherit; |
| pointer-events: none; |
| } |
|
|
| .docdoe-ai-core::before { |
| inset: -42px; |
| background: radial-gradient(circle, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.022) 32%, transparent 72%); |
| filter: blur(17px); |
| opacity: 0.64; |
| } |
|
|
| .docdoe-ai-core::after { |
| inset: 10px; |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| background: |
| radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.18), transparent 24%), |
| radial-gradient(circle at center, rgba(255, 255, 255, 0.065), transparent 62%); |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); |
| } |
|
|
| .docdoe-ai-core-glass { |
| position: absolute; |
| inset: 0; |
| border: 1px solid rgba(255, 255, 255, 0.11); |
| border-radius: inherit; |
| background: |
| radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.22), transparent 19%), |
| radial-gradient(circle at center, rgba(255, 255, 255, 0.081), rgba(255, 255, 255, 0.022) 46%, rgba(6, 13, 20, 0.34) 72%), |
| linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018)); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.18), |
| inset 0 -28px 54px rgba(2, 4, 8, 0.42), |
| 0 20px 72px rgba(255, 255, 255, 0.045), |
| 0 0 58px rgba(255, 255, 255, 0.041); |
| backdrop-filter: blur(24px) saturate(135%); |
| -webkit-backdrop-filter: blur(24px) saturate(135%); |
| } |
|
|
| .docdoe-ai-core-ring { |
| position: absolute; |
| border: 1px solid rgba(255, 255, 255, 0.065); |
| border-radius: 50%; |
| pointer-events: none; |
| } |
|
|
| .docdoe-ai-core-ring-one { |
| inset: -14px; |
| opacity: 0.6; |
| animation: docdoe-ai-core-ring 14s ease-in-out infinite; |
| } |
|
|
| .docdoe-ai-core-ring-two { |
| inset: -28px; |
| border-color: rgba(255, 255, 255, 0.025); |
| opacity: 0.4; |
| animation: docdoe-ai-core-ring 18s ease-in-out infinite reverse; |
| } |
|
|
| .docdoe-ai-core-inner { |
| position: relative; |
| z-index: 2; |
| display: grid; |
| place-items: center; |
| gap: 12px; |
| } |
|
|
| .docdoe-ai-core-mark { |
| position: relative; |
| display: block; |
| width: 54px; |
| height: 54px; |
| overflow: hidden; |
| border: 1px solid rgba(248, 250, 252, 0.075); |
| border-radius: 16px; |
| background-image: url("/docdoe-logo-mark.png"); |
| background-position: center; |
| background-repeat: no-repeat; |
| background-size: 104%; |
| box-shadow: |
| 0 0 22px rgba(255, 255, 255, 0.065), |
| 0 0 34px rgba(255, 255, 255, 0.032), |
| inset 0 1px 0 rgba(255, 255, 255, 0.12); |
| } |
|
|
| .docdoe-ai-core-mark::before { |
| position: absolute; |
| inset: 0; |
| content: ""; |
| border-radius: inherit; |
| background: |
| linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 44%), |
| radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.2), transparent 28%); |
| mix-blend-mode: screen; |
| opacity: 0.38; |
| pointer-events: none; |
| } |
|
|
| .docdoe-ai-core-text { |
| color: rgba(248, 250, 252, 0.86); |
| font-size: 12px; |
| font-weight: 700; |
| letter-spacing: 0.12em; |
| text-transform: uppercase; |
| text-shadow: 0 0 18px rgba(255, 255, 255, 0.099); |
| } |
|
|
| .docdoe-feature-node { |
| position: absolute; |
| z-index: 5; |
| display: flex; |
| width: min(318px, 28vw); |
| align-items: center; |
| gap: 13px; |
| overflow: visible; |
| border: 1px solid rgba(255, 255, 255, 0.018); |
| border-radius: 28px 34px 30px 36px; |
| padding: 12px 14px; |
| color: #f8fafc; |
| text-align: left; |
| background: |
| radial-gradient(ellipse at var(--node-light-x, 50%) -15%, rgba(248, 250, 252, 0.12), transparent 38%), |
| radial-gradient(ellipse at var(--node-light-x, 50%) 72%, rgba(255, 255, 255, 0.033), transparent 66%), |
| linear-gradient(135deg, rgba(248, 250, 252, 0.024), rgba(255, 255, 255, 0.011) 45%, rgba(6, 13, 20, 0.05)), |
| rgba(6, 13, 20, 0.045); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.04), |
| inset 0 -18px 42px rgba(2, 4, 8, 0.14), |
| 0 13px 42px rgba(0, 0, 0, 0.12), |
| 0 0 42px rgba(255, 255, 255, 0.018); |
| backdrop-filter: blur(26px) saturate(138%); |
| -webkit-backdrop-filter: blur(26px) saturate(138%); |
| animation: docdoe-feature-float 12s ease-in-out infinite; |
| } |
|
|
| .docdoe-feature-node::before { |
| position: absolute; |
| top: 50%; |
| width: 100px; |
| height: 1px; |
| content: ""; |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.135), transparent); |
| opacity: 0.56; |
| pointer-events: none; |
| } |
|
|
| .docdoe-feature-node::after { |
| position: absolute; |
| inset: -1px; |
| z-index: 0; |
| content: ""; |
| border-radius: inherit; |
| background: |
| radial-gradient(circle at var(--node-light-x, 50%) 18%, rgba(248, 250, 252, 0.12), transparent 26%), |
| linear-gradient(115deg, transparent 0 28%, rgba(255, 255, 255, 0.055) 44%, transparent 64%); |
| opacity: 0.68; |
| pointer-events: none; |
| } |
|
|
| .docdoe-feature-node > * { |
| position: relative; |
| z-index: 1; |
| } |
|
|
| .docdoe-feature-node-upper-left, |
| .docdoe-feature-node-lower-left { |
| --node-light-x: 85%; |
|
|
| flex-direction: row-reverse; |
| text-align: right; |
| } |
|
|
| .docdoe-feature-node-upper-right, |
| .docdoe-feature-node-lower-right { |
| --node-light-x: 15%; |
| } |
|
|
| .docdoe-feature-node-upper-left::before, |
| .docdoe-feature-node-lower-left::before { |
| right: -84px; |
| } |
|
|
| .docdoe-feature-node-upper-right::before, |
| .docdoe-feature-node-lower-right::before { |
| left: -84px; |
| } |
|
|
| .docdoe-feature-node-upper-left { |
| left: 34px; |
| top: 68px; |
| animation-delay: -3s; |
| } |
|
|
| .docdoe-feature-node-upper-right { |
| right: 34px; |
| top: 68px; |
| animation-delay: -8s; |
| } |
|
|
| .docdoe-feature-node-lower-left { |
| left: 76px; |
| bottom: 76px; |
| animation-delay: -5s; |
| } |
|
|
| .docdoe-feature-node-lower-right { |
| right: 76px; |
| bottom: 76px; |
| animation-delay: -10s; |
| } |
|
|
| .docdoe-feature-icon { |
| display: grid; |
| width: 42px; |
| height: 42px; |
| flex: 0 0 auto; |
| place-items: center; |
| border: 1px solid rgba(255, 255, 255, 0.06); |
| border-radius: 50%; |
| color: rgba(248, 250, 252, 0.9); |
| background: |
| radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.18), transparent 42%), |
| radial-gradient(circle at center, rgba(255, 255, 255, 0.045), transparent 68%), |
| linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.09), |
| 0 0 24px rgba(255, 255, 255, 0.04); |
| } |
|
|
| .docdoe-feature-copy { |
| display: grid; |
| gap: 5px; |
| } |
|
|
| .docdoe-feature-copy h3 { |
| margin: 0; |
| color: rgba(248, 250, 252, 0.92); |
| font-size: 14px; |
| font-weight: 700; |
| line-height: 1.22; |
| } |
|
|
| .docdoe-feature-copy p { |
| margin: 0; |
| color: rgba(248, 250, 252, 0.56); |
| font-size: 12.5px; |
| font-weight: 500; |
| line-height: 1.55; |
| } |
|
|
| .docdoe-story-section { |
| color: #f8fafc; |
| background: |
| radial-gradient(ellipse at 24% 28%, rgba(255, 255, 255, 0.025), transparent 34%), |
| radial-gradient(ellipse at 76% 32%, rgba(255, 255, 255, 0.032), transparent 32%), |
| radial-gradient(ellipse at 50% 88%, rgba(255, 255, 255, 0.02), transparent 38%), |
| linear-gradient(180deg, #020202 0%, #030710 46%, #020202 100%); |
| } |
|
|
| .docdoe-story-section::before, |
| .docdoe-story-section::after { |
| position: absolute; |
| inset: 0; |
| content: ""; |
| pointer-events: none; |
| } |
|
|
| .docdoe-story-section::before { |
| z-index: 1; |
| background: |
| linear-gradient(180deg, #020202 0%, transparent 10%, transparent 90%, #020202 100%), |
| radial-gradient(ellipse at center, transparent 0%, rgba(2, 4, 8, 0.48) 82%); |
| } |
|
|
| .docdoe-story-section::after { |
| z-index: 0; |
| background: radial-gradient(ellipse at 50% 52%, rgba(248, 250, 252, 0.026), transparent 48%); |
| opacity: 0.82; |
| mix-blend-mode: screen; |
| } |
|
|
| .docdoe-story-depth, |
| .docdoe-story-grid { |
| position: absolute; |
| inset: 0; |
| } |
|
|
| .docdoe-story-depth { |
| background: |
| radial-gradient(ellipse at 22% 42%, rgba(255, 255, 255, 0.035), transparent 42%), |
| radial-gradient(ellipse at 68% 46%, rgba(255, 255, 255, 0.034), transparent 42%), |
| radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.018), transparent 46%); |
| opacity: 0.88; |
| } |
|
|
| .docdoe-story-grid { |
| opacity: 0.08; |
| background-image: |
| linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px); |
| background-position: center; |
| background-size: 124px 124px; |
| mask-image: radial-gradient(ellipse at 50% 54%, #000 0%, transparent 74%); |
| } |
|
|
| .docdoe-story-fog { |
| position: absolute; |
| left: 50%; |
| width: min(760px, 94vw); |
| height: 430px; |
| border-radius: 50%; |
| filter: blur(64px); |
| mix-blend-mode: screen; |
| opacity: 0.26; |
| transform: translateX(-50%); |
| animation: docdoe-story-fog-drift 26s ease-in-out infinite; |
| } |
|
|
| .docdoe-story-fog-left { |
| top: 22%; |
| margin-left: -30vw; |
| background: linear-gradient(112deg, transparent 5%, rgba(255, 255, 255, 0.055), transparent 92%); |
| } |
|
|
| .docdoe-story-fog-right { |
| top: 20%; |
| margin-left: 31vw; |
| background: linear-gradient(70deg, transparent 8%, rgba(255, 255, 255, 0.059), rgba(255, 255, 255, 0.02), transparent 94%); |
| animation-delay: -12s; |
| animation-direction: reverse; |
| } |
|
|
| .docdoe-story-orbit-field { |
| position: absolute; |
| left: 50%; |
| top: 49%; |
| width: min(760px, 82vw); |
| height: min(520px, 54vw); |
| border: 1px solid rgba(255, 255, 255, 0.047); |
| border-radius: 50%; |
| box-shadow: |
| inset 0 0 44px rgba(255, 255, 255, 0.009), |
| 0 0 38px rgba(255, 255, 255, 0.011); |
| mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 84%, transparent 100%); |
| transform: translate(-50%, -50%) rotate(-26deg); |
| animation: docdoe-story-orbit-drift 34s ease-in-out infinite; |
| } |
|
|
| .docdoe-story-orbit-field-secondary { |
| top: 55%; |
| width: min(620px, 70vw); |
| height: min(390px, 43vw); |
| border-color: rgba(255, 255, 255, 0.033); |
| opacity: 0.72; |
| transform: translate(-50%, -50%) rotate(20deg); |
| animation-duration: 40s; |
| animation-direction: reverse; |
| } |
|
|
| .docdoe-story-particle { |
| position: absolute; |
| border-radius: 999px; |
| background: #f8fafc; |
| box-shadow: |
| 0 0 8px rgba(248, 250, 252, 0.54), |
| 0 0 18px rgba(255, 255, 255, 0.065); |
| mix-blend-mode: screen; |
| animation: docdoe-story-particle-drift 22s ease-in-out infinite; |
| } |
|
|
| .docdoe-story-label { |
| letter-spacing: 0.26em; |
| text-shadow: |
| 0 0 14px rgba(255, 255, 255, 0.135), |
| 0 0 28px rgba(255, 255, 255, 0.036); |
| } |
|
|
| .docdoe-story-label::after { |
| display: inline-block; |
| width: clamp(40px, 7vw, 96px); |
| height: 1px; |
| margin-left: 14px; |
| content: ""; |
| vertical-align: middle; |
| background: linear-gradient(90deg, rgba(255, 255, 255, 0.207), transparent); |
| box-shadow: 0 0 12px rgba(255, 255, 255, 0.075); |
| } |
|
|
| .docdoe-story-title-highlight { |
| color: transparent; |
| background: linear-gradient(100deg, #f8fafc 0%, #e8e0ff 18%, #bda8ff 48%, #8f79ff 72%, #d0d0d0 100%); |
| background-clip: text; |
| -webkit-background-clip: text; |
| text-shadow: 0 0 28px rgba(255, 255, 255, 0.03); |
| } |
|
|
| .docdoe-story-title-highlight > span { |
| color: transparent; |
| background-image: linear-gradient(100deg, #f8fafc 0%, #e8e0ff 18%, #bda8ff 48%, #8f79ff 72%, #d0d0d0 100%); |
| background-clip: text; |
| -webkit-background-clip: text; |
| } |
|
|
| .docdoe-story-point { |
| display: flex; |
| align-items: center; |
| gap: 18px; |
| color: #f8fafc; |
| } |
|
|
| .docdoe-story-point-icon { |
| position: relative; |
| display: grid; |
| width: 54px; |
| height: 54px; |
| flex: 0 0 auto; |
| place-items: center; |
| border: 1px solid rgba(255, 255, 255, 0.06); |
| border-radius: 50%; |
| color: rgba(248, 250, 252, 0.9); |
| background: |
| radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.16), transparent 40%), |
| radial-gradient(circle at center, rgba(255, 255, 255, 0.045), transparent 70%), |
| rgba(6, 13, 20, 0.12); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.08), |
| 0 0 30px rgba(255, 255, 255, 0.03); |
| } |
|
|
| .docdoe-story-point-icon::after { |
| position: absolute; |
| inset: -10px; |
| content: ""; |
| border-radius: inherit; |
| background: radial-gradient(circle, rgba(255, 255, 255, 0.033), transparent 68%); |
| filter: blur(6px); |
| opacity: 0.8; |
| pointer-events: none; |
| } |
|
|
| .docdoe-story-point h3 { |
| margin: 0; |
| color: rgba(248, 250, 252, 0.93); |
| font-size: 18px; |
| font-weight: 700; |
| line-height: 1.25; |
| } |
|
|
| .docdoe-story-point p { |
| margin: 7px 0 0; |
| color: rgba(248, 250, 252, 0.58); |
| font-size: 15px; |
| font-weight: 500; |
| line-height: 1.55; |
| } |
|
|
| .docdoe-flow-system { |
| position: relative; |
| display: grid; |
| gap: 34px; |
| min-height: 650px; |
| padding: 42px 0 42px 30px; |
| } |
|
|
| .docdoe-flow-ambient { |
| position: absolute; |
| left: 6%; |
| top: 50%; |
| width: 390px; |
| height: 520px; |
| border-radius: 50%; |
| background: |
| radial-gradient(ellipse at 42% 44%, rgba(255, 255, 255, 0.03), transparent 42%), |
| radial-gradient(ellipse at 50% 50%, rgba(248, 250, 252, 0.04), transparent 62%); |
| filter: blur(18px); |
| opacity: 0.92; |
| transform: translateY(-50%) rotate(-12deg); |
| pointer-events: none; |
| } |
|
|
| .docdoe-flow-line { |
| position: absolute; |
| left: 80px; |
| top: 86px; |
| bottom: 86px; |
| width: 1px; |
| background: none; |
| pointer-events: none; |
| } |
|
|
| .docdoe-flow-line-progress { |
| position: absolute; |
| left: 0; |
| top: 0; |
| width: 100%; |
| height: 100%; |
| transform-origin: top center; |
| border-radius: inherit; |
| background: |
| linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.153) 12%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.126) 88%, transparent), |
| linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.18), transparent); |
| box-shadow: |
| 0 0 18px rgba(255, 255, 255, 0.07), |
| 0 0 34px rgba(255, 255, 255, 0.03); |
| pointer-events: none; |
| } |
|
|
| .docdoe-flow-line::before, |
| .docdoe-flow-line::after { |
| position: absolute; |
| left: 50%; |
| width: 7px; |
| height: 7px; |
| content: ""; |
| border-radius: 50%; |
| background: #f8fafc; |
| box-shadow: |
| 0 0 14px rgba(248, 250, 252, 0.74), |
| 0 0 28px rgba(255, 255, 255, 0.11); |
| transform: translateX(-50%); |
| } |
|
|
| .docdoe-flow-line::before { |
| top: 0; |
| } |
|
|
| .docdoe-flow-line::after { |
| bottom: 0; |
| } |
|
|
| .docdoe-flow-step { |
| position: relative; |
| display: grid; |
| grid-template-columns: 116px 42px minmax(0, 1fr); |
| align-items: center; |
| gap: 20px; |
| min-height: 118px; |
| } |
|
|
| .docdoe-flow-step::before { |
| position: absolute; |
| left: 80px; |
| top: 50%; |
| width: 58px; |
| height: 1px; |
| content: ""; |
| background: linear-gradient(90deg, rgba(255, 255, 255, 0.171), transparent); |
| box-shadow: 0 0 14px rgba(255, 255, 255, 0.04); |
| transform: translateY(-50%); |
| } |
|
|
| .docdoe-flow-node { |
| position: relative; |
| z-index: 2; |
| display: grid; |
| width: 78px; |
| height: 78px; |
| place-items: center; |
| justify-self: center; |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| border-radius: 50%; |
| color: rgba(248, 250, 252, 0.92); |
| background: |
| radial-gradient(circle at 36% 24%, rgba(255, 255, 255, 0.18), transparent 40%), |
| radial-gradient(circle at center, rgba(255, 255, 255, 0.05), rgba(6, 13, 20, 0.16) 68%); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.08), |
| inset 0 -18px 34px rgba(2, 4, 8, 0.2), |
| 0 0 40px rgba(255, 255, 255, 0.033); |
| backdrop-filter: blur(18px) saturate(132%); |
| -webkit-backdrop-filter: blur(18px) saturate(132%); |
| animation: docdoe-flow-node-breathe 10s ease-in-out infinite; |
| } |
|
|
| .docdoe-flow-node.docdoe-motion-no-css-animation { |
| animation: none !important; |
| } |
|
|
| .docdoe-flow-node::before { |
| position: absolute; |
| inset: -16px; |
| content: ""; |
| border: 1px solid rgba(255, 255, 255, 0.02); |
| border-radius: inherit; |
| opacity: 0.84; |
| } |
|
|
| .docdoe-flow-number { |
| color: #b59bff; |
| font-size: 19px; |
| font-weight: 800; |
| letter-spacing: 0.08em; |
| text-shadow: 0 0 18px rgba(255, 255, 255, 0.09); |
| } |
|
|
| .docdoe-flow-copy h3 { |
| margin: 0; |
| color: rgba(248, 250, 252, 0.95); |
| font-size: 18px; |
| font-weight: 750; |
| line-height: 1.25; |
| } |
|
|
| .docdoe-flow-copy p { |
| max-width: 360px; |
| margin: 10px 0 0; |
| color: rgba(248, 250, 252, 0.62); |
| font-size: 15px; |
| font-weight: 500; |
| line-height: 1.7; |
| } |
|
|
| .docdoe-story-cta-strip { |
| overflow: hidden; |
| border: 1px solid rgba(255, 255, 255, 0.035); |
| border-radius: 999px; |
| background: |
| radial-gradient(ellipse at 48% 0%, rgba(255, 255, 255, 0.054), transparent 48%), |
| radial-gradient(ellipse at 5% 50%, rgba(255, 255, 255, 0.035), transparent 34%), |
| linear-gradient(180deg, rgba(248, 250, 252, 0.032), rgba(248, 250, 252, 0.008)), |
| rgba(6, 13, 20, 0.14); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.06), |
| 0 18px 70px rgba(0, 0, 0, 0.2), |
| 0 0 68px rgba(255, 255, 255, 0.02); |
| backdrop-filter: blur(28px) saturate(138%); |
| -webkit-backdrop-filter: blur(28px) saturate(138%); |
| } |
|
|
| .docdoe-story-cta-strip::before { |
| position: absolute; |
| left: 18%; |
| right: 18%; |
| top: 0; |
| height: 1px; |
| content: ""; |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.153), transparent); |
| box-shadow: 0 0 24px rgba(255, 255, 255, 0.06); |
| pointer-events: none; |
| } |
|
|
| .docdoe-story-cta-orb { |
| position: relative; |
| display: block; |
| width: 58px; |
| height: 58px; |
| flex: 0 0 auto; |
| overflow: hidden; |
| border: 1px solid rgba(248, 250, 252, 0.08); |
| border-radius: 17px; |
| background-image: url("/docdoe-logo-mark.png"); |
| background-position: center; |
| background-repeat: no-repeat; |
| background-size: 112%; |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.12), |
| 0 0 32px rgba(255, 255, 255, 0.055), |
| 0 0 44px rgba(255, 255, 255, 0.024); |
| } |
|
|
| .docdoe-story-cta-orb::after { |
| position: absolute; |
| content: ""; |
| inset: 0; |
| border-radius: inherit; |
| background: |
| linear-gradient(145deg, rgba(255, 255, 255, 0.14), transparent 44%), |
| radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.18), transparent 28%); |
| mix-blend-mode: screen; |
| opacity: 0.36; |
| pointer-events: none; |
| } |
|
|
| .docdoe-story-cta-strip strong, |
| .docdoe-story-cta-strip span span { |
| display: block; |
| } |
|
|
| .docdoe-story-cta-strip strong { |
| color: rgba(248, 250, 252, 0.94); |
| font-size: 18px; |
| line-height: 1.35; |
| } |
|
|
| .docdoe-story-cta-strip span span { |
| margin-top: 5px; |
| color: rgba(248, 250, 252, 0.62); |
| font-size: 14px; |
| font-weight: 500; |
| line-height: 1.6; |
| } |
|
|
| .docdoe-story-cta-button { |
| display: inline-flex; |
| min-height: 48px; |
| flex: 0 0 auto; |
| align-items: center; |
| justify-content: center; |
| gap: 12px; |
| border: 1px solid rgba(255, 255, 255, 0.117); |
| border-radius: 999px; |
| padding: 0 18px 0 22px; |
| color: #f8fafc; |
| font-size: 15px; |
| font-weight: 700; |
| background: |
| radial-gradient(ellipse at 18% 0%, rgba(255, 255, 255, 0.18), transparent 46%), |
| linear-gradient(180deg, rgba(248, 250, 252, 0.075), rgba(248, 250, 252, 0.012)), |
| rgba(255, 255, 255, 0.019); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.12), |
| 0 0 30px rgba(255, 255, 255, 0.03); |
| transition: |
| transform 320ms ease, |
| border-color 320ms ease, |
| box-shadow 320ms ease; |
| } |
|
|
| .docdoe-story-cta-button:hover { |
| border-color: rgba(248, 250, 252, 0.28); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.16), |
| 0 14px 46px rgba(255, 255, 255, 0.045); |
| transform: translateY(-2px); |
| } |
|
|
| .docdoe-pricing-section { |
| color: #f8fafc; |
| background: |
| radial-gradient(ellipse at 28% 16%, rgba(255, 255, 255, 0.03), transparent 34%), |
| radial-gradient(ellipse at 64% 38%, rgba(255, 255, 255, 0.036), transparent 36%), |
| radial-gradient(ellipse at 52% 92%, rgba(255, 255, 255, 0.025), transparent 44%), |
| var(--dd-pricing-bg, #090909); |
| } |
|
|
| .docdoe-pricing-section::before, |
| .docdoe-pricing-section::after { |
| position: absolute; |
| inset: 0; |
| content: ""; |
| pointer-events: none; |
| } |
|
|
| .docdoe-pricing-section::before { |
| z-index: 1; |
| background: |
| linear-gradient(180deg, #090909 0%, transparent 10%, transparent 90%, #090909 100%), |
| radial-gradient(ellipse at center, transparent 0%, rgba(10, 10, 31, 0.42) 84%); |
| } |
|
|
| .docdoe-pricing-section::after { |
| z-index: 0; |
| background: radial-gradient(ellipse at 50% 50%, rgba(248, 250, 252, 0.024), transparent 52%); |
| opacity: 0.74; |
| mix-blend-mode: screen; |
| } |
|
|
| .docdoe-pricing-depth, |
| .docdoe-pricing-grid-texture { |
| position: absolute; |
| inset: 0; |
| } |
|
|
| .docdoe-pricing-depth { |
| background: |
| radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.028), transparent 42%), |
| radial-gradient(ellipse at 35% 65%, rgba(255, 255, 255, 0.023), transparent 42%), |
| radial-gradient(ellipse at 72% 70%, rgba(255, 255, 255, 0.018), transparent 40%); |
| opacity: 0.9; |
| } |
|
|
| .docdoe-pricing-grid-texture { |
| opacity: 0.07; |
| background-image: |
| linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px); |
| background-position: center; |
| background-size: 132px 132px; |
| mask-image: radial-gradient(ellipse at 50% 52%, #000 0%, transparent 74%); |
| } |
|
|
| .docdoe-pricing-fog { |
| position: absolute; |
| left: 50%; |
| width: min(800px, 94vw); |
| height: 440px; |
| border-radius: 50%; |
| filter: blur(70px); |
| mix-blend-mode: screen; |
| opacity: 0.22; |
| transform: translateX(-50%); |
| animation: docdoe-pricing-fog-drift 28s ease-in-out infinite; |
| } |
|
|
| .docdoe-pricing-fog-left { |
| top: 18%; |
| margin-left: -31vw; |
| background: linear-gradient(116deg, transparent 8%, rgba(255, 255, 255, 0.05), transparent 92%); |
| } |
|
|
| .docdoe-pricing-fog-right { |
| top: 23%; |
| margin-left: 31vw; |
| background: linear-gradient(70deg, transparent 8%, rgba(255, 255, 255, 0.054), rgba(255, 255, 255, 0.018), transparent 94%); |
| animation-delay: -13s; |
| animation-direction: reverse; |
| } |
|
|
| .docdoe-pricing-orbit { |
| position: absolute; |
| left: 50%; |
| --pricing-orbit-rotation: -7deg; |
| border: 1px solid rgba(255, 255, 255, 0.043); |
| border-radius: 50%; |
| box-shadow: |
| inset 0 0 44px rgba(255, 255, 255, 0.007), |
| 0 0 34px rgba(255, 255, 255, 0.01); |
| mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 84%, transparent 100%); |
| transform: translateX(-50%) rotate(var(--pricing-orbit-rotation)); |
| animation: docdoe-pricing-orbit-drift 36s ease-in-out infinite; |
| } |
|
|
| .docdoe-pricing-orbit-one { |
| top: 15%; |
| width: min(1060px, 86vw); |
| height: min(420px, 36vw); |
| } |
|
|
| .docdoe-pricing-orbit-two { |
| --pricing-orbit-rotation: 9deg; |
| top: 31%; |
| width: min(900px, 78vw); |
| height: min(360px, 32vw); |
| border-color: rgba(255, 255, 255, 0.028); |
| opacity: 0.76; |
| animation-duration: 42s; |
| animation-direction: reverse; |
| } |
|
|
| .docdoe-pricing-particle { |
| position: absolute; |
| border-radius: 999px; |
| background: #f8fafc; |
| box-shadow: |
| 0 0 8px rgba(248, 250, 252, 0.5), |
| 0 0 18px rgba(255, 255, 255, 0.065); |
| mix-blend-mode: screen; |
| animation: docdoe-pricing-particle-drift 24s ease-in-out infinite; |
| } |
|
|
| .docdoe-pricing-label { |
| letter-spacing: 0.3em; |
| text-shadow: |
| 0 0 14px rgba(255, 255, 255, 0.14), |
| 0 0 28px rgba(255, 255, 255, 0.036); |
| } |
|
|
| .docdoe-pricing-label::after { |
| display: block; |
| width: 54px; |
| height: 1px; |
| margin: 12px auto 0; |
| content: ""; |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.225), transparent); |
| box-shadow: 0 0 16px rgba(255, 255, 255, 0.08); |
| } |
|
|
| .docdoe-pricing-title-highlight { |
| color: transparent; |
| background: linear-gradient(100deg, #f8fafc 0%, #ece6ff 20%, #c2b0ff 47%, #8f74ff 74%, #a9baff 100%); |
| background-clip: text; |
| -webkit-background-clip: text; |
| text-shadow: 0 0 28px rgba(255, 255, 255, 0.025); |
| } |
|
|
| .docdoe-pricing-grid-wrap { |
| isolation: isolate; |
| } |
|
|
| .docdoe-pricing-grid { |
| position: relative; |
| z-index: 2; |
| align-items: stretch; |
| } |
|
|
| .docdoe-pricing-card-glow { |
| position: absolute; |
| top: 24px; |
| width: min(330px, 28vw); |
| height: 520px; |
| border-radius: 50%; |
| filter: blur(68px); |
| opacity: 0.34; |
| pointer-events: none; |
| transform: translateX(-50%); |
| } |
|
|
| .docdoe-pricing-card-glow-popular { |
| left: 37.5%; |
| background: rgba(255, 255, 255, 0.105); |
| } |
|
|
| .docdoe-pricing-card-glow-premium { |
| left: 62.5%; |
| background: |
| radial-gradient(circle, rgba(244, 216, 121, 0.2), transparent 58%), |
| rgba(255, 255, 255, 0.05); |
| } |
|
|
| .docdoe-pricing-card { |
| position: relative; |
| isolation: isolate; |
| overflow: hidden; |
| display: flex; |
| min-height: 490px; |
| flex-direction: column; |
| border: 1px solid rgba(255, 255, 255, 0.055); |
| border-radius: 28px; |
| padding: 26px 24px 22px; |
| background: |
| radial-gradient(ellipse at 24% 0%, rgba(255, 255, 255, 0.075), transparent 42%), |
| radial-gradient(ellipse at 50% 118%, rgba(255, 255, 255, 0.018), transparent 48%), |
| linear-gradient(180deg, rgba(248, 250, 252, 0.038), rgba(248, 250, 252, 0.01)), |
| rgba(6, 13, 20, 0.25); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.07), |
| inset 0 -30px 70px rgba(2, 4, 8, 0.16), |
| 0 24px 86px rgba(0, 0, 0, 0.26), |
| 0 0 46px rgba(255, 255, 255, 0.014); |
| backdrop-filter: blur(28px) saturate(136%); |
| -webkit-backdrop-filter: blur(28px) saturate(136%); |
| transition: |
| transform 360ms ease, |
| border-color 360ms ease, |
| box-shadow 360ms ease, |
| background 360ms ease; |
| } |
|
|
| .docdoe-pricing-card::before, |
| .docdoe-pricing-card::after { |
| position: absolute; |
| content: ""; |
| pointer-events: none; |
| } |
|
|
| .docdoe-pricing-card::before { |
| z-index: 2; |
| top: 0; |
| right: 0; |
| left: 0; |
| height: 1px; |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.11), transparent); |
| opacity: 0.9; |
| } |
|
|
| .docdoe-pricing-card::after { |
| z-index: -2; |
| inset: -26% -20% auto; |
| height: 190px; |
| border-radius: 50%; |
| background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.025), transparent 68%); |
| filter: blur(24px); |
| opacity: 0.72; |
| } |
|
|
| .docdoe-pricing-card:hover { |
| border-color: rgba(255, 255, 255, 0.077); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.1), |
| inset 0 -30px 70px rgba(2, 4, 8, 0.16), |
| 0 28px 96px rgba(0, 0, 0, 0.32), |
| 0 0 68px rgba(255, 255, 255, 0.028); |
| transform: translateY(-6px); |
| } |
|
|
| .docdoe-pricing-card-popular { |
| border-color: rgba(255, 255, 255, 0.144); |
| background: |
| radial-gradient(ellipse at 42% 0%, rgba(255, 255, 255, 0.068), transparent 44%), |
| radial-gradient(ellipse at 50% 112%, rgba(255, 255, 255, 0.04), transparent 48%), |
| linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(248, 250, 252, 0.012)), |
| rgba(7, 10, 28, 0.34); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.1), |
| 0 0 0 1px rgba(255, 255, 255, 0.025), |
| 0 26px 96px rgba(0, 0, 0, 0.32), |
| 0 0 76px rgba(255, 255, 255, 0.045); |
| } |
|
|
| .docdoe-pricing-card-popular::after { |
| background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.05), transparent 68%); |
| } |
|
|
| .docdoe-pricing-card-premium { |
| border-color: rgba(244, 216, 121, 0.22); |
| background: |
| radial-gradient(ellipse at 42% 0%, rgba(244, 216, 121, 0.13), transparent 40%), |
| radial-gradient(ellipse at 50% 114%, rgba(255, 255, 255, 0.033), transparent 48%), |
| linear-gradient(180deg, rgba(244, 216, 121, 0.042), rgba(248, 250, 252, 0.012)), |
| rgba(10, 11, 18, 0.34); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.1), |
| 0 0 0 1px rgba(244, 216, 121, 0.055), |
| 0 26px 96px rgba(0, 0, 0, 0.32), |
| 0 0 70px rgba(244, 216, 121, 0.09), |
| 0 0 58px rgba(255, 255, 255, 0.028); |
| } |
|
|
| .docdoe-pricing-card-teacher { |
| background: |
| radial-gradient(ellipse at 24% 0%, rgba(255, 255, 255, 0.041), transparent 42%), |
| radial-gradient(ellipse at 50% 118%, rgba(255, 255, 255, 0.013), transparent 48%), |
| linear-gradient(180deg, rgba(248, 250, 252, 0.034), rgba(248, 250, 252, 0.01)), |
| rgba(6, 13, 20, 0.24); |
| } |
|
|
| .docdoe-pricing-badge { |
| position: absolute; |
| top: 17px; |
| right: 17px; |
| z-index: 3; |
| display: inline-flex; |
| min-height: 28px; |
| align-items: center; |
| justify-content: center; |
| border-radius: 999px; |
| padding: 0 12px; |
| font-size: 10px; |
| font-weight: 850; |
| letter-spacing: 0.08em; |
| line-height: 1; |
| text-transform: uppercase; |
| white-space: nowrap; |
| } |
|
|
| .docdoe-pricing-badge-popular { |
| border: 1px solid rgba(248, 250, 252, 0.12); |
| color: #f8fafc; |
| background: |
| radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.22), transparent 52%), |
| linear-gradient(180deg, rgba(255, 255, 255, 0.261), rgba(255, 255, 255, 0.13)); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.16), |
| 0 0 24px rgba(255, 255, 255, 0.055); |
| } |
|
|
| .docdoe-pricing-badge-premium { |
| color: #190f02; |
| background: |
| radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.36), transparent 52%), |
| linear-gradient(180deg, #ffe88a, #d3a62e); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.35), |
| 0 0 26px rgba(244, 216, 121, 0.2); |
| } |
|
|
| .docdoe-pricing-plan-icon { |
| position: relative; |
| display: grid; |
| width: 48px; |
| height: 48px; |
| place-items: center; |
| border: 1px solid rgba(255, 255, 255, 0.07); |
| border-radius: 50%; |
| color: rgba(255, 255, 255, 0.414); |
| background: |
| radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.15), transparent 40%), |
| radial-gradient(circle at center, rgba(255, 255, 255, 0.045), transparent 70%), |
| rgba(6, 13, 20, 0.12); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.08), |
| 0 0 26px rgba(255, 255, 255, 0.033); |
| } |
|
|
| .docdoe-pricing-card-premium .docdoe-pricing-plan-icon { |
| border-color: rgba(244, 216, 121, 0.24); |
| color: rgba(244, 216, 121, 0.96); |
| background: |
| radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.18), transparent 40%), |
| radial-gradient(circle at center, rgba(244, 216, 121, 0.18), transparent 72%), |
| rgba(6, 13, 20, 0.12); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.08), |
| 0 0 28px rgba(244, 216, 121, 0.13); |
| } |
|
|
| .docdoe-pricing-card h3 { |
| margin: 16px 0 0; |
| color: rgba(248, 250, 252, 0.95); |
| font-size: 22px; |
| font-weight: 800; |
| letter-spacing: 0; |
| line-height: 1.15; |
| } |
|
|
| .docdoe-pricing-price { |
| display: flex; |
| align-items: baseline; |
| gap: 7px; |
| margin-top: 8px; |
| } |
|
|
| .docdoe-pricing-price span { |
| color: #b59bff; |
| font-size: clamp(2.62rem, 3.5vw, 3.08rem); |
| font-weight: 850; |
| letter-spacing: 0; |
| line-height: 0.98; |
| text-shadow: 0 0 26px rgba(255, 255, 255, 0.045); |
| } |
|
|
| .docdoe-pricing-price small { |
| color: rgba(248, 250, 252, 0.6); |
| font-size: 13px; |
| font-weight: 650; |
| } |
|
|
| .docdoe-pricing-card-premium .docdoe-pricing-price span { |
| color: #c2a8ff; |
| } |
|
|
| .docdoe-pricing-card-teacher .docdoe-pricing-price span { |
| font-size: clamp(2.34rem, 3.2vw, 2.82rem); |
| } |
|
|
| .docdoe-pricing-description { |
| min-height: 42px; |
| margin: 14px 0 0; |
| color: rgba(248, 250, 252, 0.67); |
| font-size: 14px; |
| font-weight: 500; |
| line-height: 1.55; |
| } |
|
|
| .docdoe-pricing-divider { |
| height: 1px; |
| margin: 15px 0 16px; |
| background: linear-gradient(90deg, transparent, rgba(248, 250, 252, 0.09), transparent); |
| } |
|
|
| .docdoe-pricing-features { |
| display: grid; |
| flex: 1; |
| gap: 9px; |
| margin: 0 0 18px; |
| padding: 0; |
| list-style: none; |
| } |
|
|
| .docdoe-pricing-features li { |
| display: flex; |
| align-items: flex-start; |
| gap: 10px; |
| color: rgba(248, 250, 252, 0.7); |
| font-size: 13.5px; |
| font-weight: 520; |
| line-height: 1.35; |
| } |
|
|
| .docdoe-pricing-check { |
| display: grid; |
| width: 17px; |
| height: 17px; |
| flex: 0 0 auto; |
| place-items: center; |
| border-radius: 50%; |
| color: #080711; |
| background: linear-gradient(180deg, #cbbdff, #8f74ff); |
| box-shadow: 0 0 14px rgba(255, 255, 255, 0.045); |
| } |
|
|
| .docdoe-pricing-card-premium .docdoe-pricing-check { |
| background: linear-gradient(180deg, #ffed9a, #d1a22f); |
| box-shadow: 0 0 14px rgba(244, 216, 121, 0.16); |
| } |
|
|
| .docdoe-pricing-button { |
| position: relative; |
| display: inline-flex; |
| min-height: 48px; |
| align-items: center; |
| justify-content: center; |
| gap: 12px; |
| overflow: hidden; |
| border-radius: 999px; |
| padding: 0 18px 0 22px; |
| font-size: 14px; |
| font-weight: 780; |
| line-height: 1; |
| transition: |
| transform 320ms ease, |
| border-color 320ms ease, |
| box-shadow 320ms ease, |
| background 320ms ease; |
| } |
|
|
| .docdoe-pricing-button::before { |
| position: absolute; |
| inset: 1px 20% auto; |
| height: 1px; |
| content: ""; |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent); |
| opacity: 0.82; |
| } |
|
|
| .docdoe-pricing-button-starter, |
| .docdoe-pricing-button-teacher { |
| border: 1px solid rgba(255, 255, 255, 0.099); |
| color: #f8fafc; |
| background: |
| radial-gradient(ellipse at 18% 0%, rgba(255, 255, 255, 0.13), transparent 46%), |
| linear-gradient(180deg, rgba(248, 250, 252, 0.058), rgba(248, 250, 252, 0.01)), |
| rgba(255, 255, 255, 0.01); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.08), |
| 0 0 28px rgba(255, 255, 255, 0.018); |
| } |
|
|
| .docdoe-pricing-button-popular { |
| border: 1px solid rgba(255, 255, 255, 0.13); |
| color: #f8fafc; |
| background: |
| radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.22), transparent 46%), |
| linear-gradient(180deg, rgba(203, 189, 255, 0.88), rgba(255, 255, 255, 0.22)); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.22), |
| inset 0 -18px 34px rgba(58, 28, 163, 0.22), |
| 0 18px 46px rgba(255, 255, 255, 0.055); |
| } |
|
|
| .docdoe-pricing-button-premium { |
| border: 1px solid rgba(255, 232, 138, 0.4); |
| color: #160e02; |
| background: |
| radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.42), transparent 48%), |
| linear-gradient(180deg, #ffe88a, #d3a22f); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.36), |
| inset 0 -18px 34px rgba(130, 81, 4, 0.16), |
| 0 18px 46px rgba(244, 216, 121, 0.15), |
| 0 0 42px rgba(255, 255, 255, 0.025); |
| } |
|
|
| .docdoe-pricing-button:hover { |
| transform: translateY(-2px); |
| } |
|
|
| .docdoe-pricing-button-starter:hover, |
| .docdoe-pricing-button-teacher:hover { |
| border-color: rgba(248, 250, 252, 0.28); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.12), |
| 0 14px 44px rgba(255, 255, 255, 0.033); |
| } |
|
|
| .docdoe-pricing-button-popular:hover { |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.24), |
| inset 0 -18px 34px rgba(58, 28, 163, 0.22), |
| 0 20px 56px rgba(255, 255, 255, 0.07); |
| } |
|
|
| .docdoe-pricing-button-premium:hover { |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.4), |
| inset 0 -18px 34px rgba(130, 81, 4, 0.16), |
| 0 20px 56px rgba(244, 216, 121, 0.2), |
| 0 0 52px rgba(255, 255, 255, 0.03); |
| } |
|
|
| .docdoe-pricing-trust { |
| position: relative; |
| overflow: hidden; |
| border: 1px solid rgba(255, 255, 255, 0.059); |
| border-radius: 999px; |
| color: rgba(248, 250, 252, 0.55); |
| font-size: 13px; |
| font-weight: 600; |
| background: |
| radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.041), transparent 52%), |
| rgba(6, 13, 20, 0.12); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.045), |
| 0 0 38px rgba(255, 255, 255, 0.014); |
| backdrop-filter: blur(22px) saturate(132%); |
| -webkit-backdrop-filter: blur(22px) saturate(132%); |
| } |
|
|
| .docdoe-pricing-trust span { |
| display: inline-flex; |
| align-items: center; |
| gap: 9px; |
| white-space: nowrap; |
| } |
|
|
| .docdoe-pricing-trust span + span::before { |
| display: inline-block; |
| width: 4px; |
| height: 4px; |
| margin-right: 16px; |
| content: ""; |
| border-radius: 50%; |
| background: rgba(255, 255, 255, 0.369); |
| box-shadow: 0 0 12px rgba(255, 255, 255, 0.105); |
| } |
|
|
| .docdoe-pricing-trust svg { |
| color: rgba(255, 255, 255, 0.351); |
| } |
|
|
| .docdoe-final-section { |
| color: #f8fafc; |
| background: |
| radial-gradient(ellipse at 22% 20%, rgba(255, 255, 255, 0.022), transparent 34%), |
| radial-gradient(ellipse at 78% 32%, rgba(255, 255, 255, 0.032), transparent 34%), |
| linear-gradient(180deg, #020202 0%, #030711 50%, #020202 100%); |
| } |
|
|
| .docdoe-final-section::before, |
| .docdoe-final-section::after { |
| position: absolute; |
| inset: 0; |
| content: ""; |
| pointer-events: none; |
| } |
|
|
| .docdoe-final-section::before { |
| z-index: 1; |
| background: |
| linear-gradient(180deg, #020202 0%, transparent 10%, transparent 92%, #020202 100%), |
| radial-gradient(ellipse at center, transparent 0%, rgba(2, 4, 8, 0.5) 84%); |
| } |
|
|
| .docdoe-final-section::after { |
| z-index: 0; |
| background: radial-gradient(ellipse at 50% 48%, rgba(248, 250, 252, 0.023), transparent 52%); |
| opacity: 0.72; |
| mix-blend-mode: screen; |
| } |
|
|
| .docdoe-final-depth, |
| .docdoe-final-grid { |
| position: absolute; |
| inset: 0; |
| } |
|
|
| .docdoe-final-depth { |
| background: |
| radial-gradient(ellipse at 50% 15%, rgba(255, 255, 255, 0.03), transparent 40%), |
| radial-gradient(ellipse at 36% 68%, rgba(255, 255, 255, 0.023), transparent 44%), |
| radial-gradient(ellipse at 68% 80%, rgba(255, 255, 255, 0.014), transparent 42%); |
| opacity: 0.92; |
| } |
|
|
| .docdoe-final-grid { |
| opacity: 0.06; |
| background-image: |
| linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); |
| background-position: center; |
| background-size: 132px 132px; |
| mask-image: radial-gradient(ellipse at 50% 46%, #000 0%, transparent 74%); |
| } |
|
|
| .docdoe-final-fog { |
| position: absolute; |
| left: 50%; |
| width: min(760px, 92vw); |
| height: 430px; |
| border-radius: 50%; |
| filter: blur(70px); |
| mix-blend-mode: screen; |
| opacity: 0.21; |
| transform: translateX(-50%); |
| animation: docdoe-final-fog-drift 30s ease-in-out infinite; |
| } |
|
|
| .docdoe-final-fog-left { |
| top: 16%; |
| margin-left: -32vw; |
| background: linear-gradient(112deg, transparent 8%, rgba(255, 255, 255, 0.05), transparent 92%); |
| } |
|
|
| .docdoe-final-fog-right { |
| top: 28%; |
| margin-left: 32vw; |
| background: linear-gradient(72deg, transparent 8%, rgba(255, 255, 255, 0.054), rgba(255, 255, 255, 0.018), transparent 94%); |
| animation-delay: -14s; |
| animation-direction: reverse; |
| } |
|
|
| .docdoe-final-orbit { |
| position: absolute; |
| left: 50%; |
| --final-orbit-rotation: -8deg; |
| border: 1px solid rgba(255, 255, 255, 0.041); |
| border-radius: 50%; |
| box-shadow: |
| inset 0 0 42px rgba(255, 255, 255, 0.007), |
| 0 0 32px rgba(255, 255, 255, 0.009); |
| mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%); |
| transform: translateX(-50%) rotate(var(--final-orbit-rotation)); |
| animation: docdoe-final-orbit-drift 38s ease-in-out infinite; |
| } |
|
|
| .docdoe-final-orbit-one { |
| top: 18%; |
| width: min(900px, 82vw); |
| height: min(360px, 36vw); |
| } |
|
|
| .docdoe-final-orbit-two { |
| --final-orbit-rotation: 10deg; |
| top: 42%; |
| width: min(720px, 72vw); |
| height: min(280px, 30vw); |
| border-color: rgba(255, 255, 255, 0.028); |
| opacity: 0.7; |
| animation-duration: 44s; |
| animation-direction: reverse; |
| } |
|
|
| .docdoe-final-particle { |
| position: absolute; |
| border-radius: 999px; |
| background: #f8fafc; |
| box-shadow: |
| 0 0 8px rgba(248, 250, 252, 0.48), |
| 0 0 18px rgba(255, 255, 255, 0.06); |
| mix-blend-mode: screen; |
| animation: docdoe-final-particle-drift 24s ease-in-out infinite; |
| } |
|
|
| .docdoe-final-label { |
| letter-spacing: 0.3em; |
| text-shadow: |
| 0 0 14px rgba(255, 255, 255, 0.145), |
| 0 0 28px rgba(255, 255, 255, 0.036); |
| } |
|
|
| .docdoe-final-label::after { |
| display: block; |
| width: 50px; |
| height: 1px; |
| margin: 12px auto 0; |
| content: ""; |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.234), transparent); |
| box-shadow: 0 0 16px rgba(255, 255, 255, 0.08); |
| } |
|
|
| .docdoe-final-title-highlight { |
| color: transparent; |
| background: linear-gradient(100deg, #f8fafc 0%, #ece6ff 20%, #c6b4ff 48%, #9277ff 76%, #acbcff 100%); |
| background-clip: text; |
| -webkit-background-clip: text; |
| text-shadow: 0 0 28px rgba(255, 255, 255, 0.028); |
| } |
|
|
| .docdoe-final-title-highlight > span { |
| color: rgba(242, 244, 241, 0.92); |
| } |
|
|
| .docdoe-faq-list { |
| display: grid; |
| gap: 13px; |
| } |
|
|
| .docdoe-faq-item:nth-child(odd), |
| .docdoe-faq-item:nth-child(even) { |
| background: rgba(255, 255, 255, 0.02); |
| } |
|
|
| .docdoe-faq-item { |
| position: relative; |
| overflow: hidden; |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| border-radius: 16px; |
| text-align: left; |
| background: rgba(255, 255, 255, 0.025); |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); |
| transition: |
| border-color 200ms cubic-bezier(0.16, 1, 0.3, 1), |
| box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1), |
| background-color 200ms cubic-bezier(0.16, 1, 0.3, 1); |
| } |
|
|
| .docdoe-faq-item:hover, |
| .docdoe-faq-item[open], |
| .docdoe-faq-item.docdoe-faq-item-open { |
| border-color: rgba(255, 255, 255, 0.14); |
| background: rgba(255, 255, 255, 0.04); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.06), |
| 0 16px 48px rgba(0, 0, 0, 0.22); |
| } |
|
|
| .docdoe-faq-item.docdoe-faq-item-open { |
| border-color: rgba(255, 255, 255, 0.16); |
| background: rgba(255, 255, 255, 0.045); |
| } |
|
|
| .docdoe-faq-item summary, |
| .docdoe-faq-item .docdoe-faq-trigger { |
| display: grid; |
| grid-template-columns: 74px minmax(0, 1fr) auto; |
| align-items: center; |
| gap: 22px; |
| min-height: 92px; |
| padding: 18px 28px 18px 24px; |
| cursor: pointer; |
| list-style: none; |
| } |
|
|
| .docdoe-faq-item .docdoe-faq-trigger { |
| width: 100%; |
| border: 0; |
| margin: 0; |
| background: transparent; |
| color: inherit; |
| font: inherit; |
| text-align: left; |
| } |
|
|
| .docdoe-faq-item summary::-webkit-details-marker { |
| display: none; |
| } |
|
|
| .docdoe-faq-item[open] .docdoe-faq-plus, |
| .docdoe-faq-item.docdoe-faq-item-open .docdoe-faq-plus { |
| border-color: rgba(255, 255, 255, 0.108); |
| background: rgba(255, 255, 255, 0.022); |
| } |
|
|
| .docdoe-faq-icon { |
| position: relative; |
| display: grid; |
| width: 58px; |
| height: 58px; |
| place-items: center; |
| border: 1px solid rgba(255, 255, 255, 0.07); |
| border-radius: 50%; |
| color: rgba(255, 255, 255, 0.47); |
| background: |
| radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.18), transparent 40%), |
| radial-gradient(circle at center, rgba(255, 255, 255, 0.07), rgba(6, 13, 20, 0.12) 70%); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.08), |
| 0 0 30px rgba(255, 255, 255, 0.04); |
| } |
|
|
| .docdoe-faq-question { |
| color: rgba(248, 250, 252, 0.94); |
| font-size: 18px; |
| font-weight: 780; |
| line-height: 1.35; |
| } |
|
|
| .docdoe-faq-plus { |
| display: grid; |
| width: 38px; |
| height: 38px; |
| place-items: center; |
| border: 1px solid rgba(255, 255, 255, 0.05); |
| border-radius: 50%; |
| color: rgba(255, 255, 255, 0.45); |
| background: rgba(248, 250, 252, 0.018); |
| transition: |
| border-color 280ms ease, |
| background 280ms ease; |
| } |
|
|
| .docdoe-faq-answer-wrap { |
| display: grid; |
| grid-template-rows: 0fr; |
| transition: grid-template-rows 0.45s cubic-bezier(0.25, 0.1, 0.25, 1); |
| } |
|
|
| .docdoe-faq-answer-wrap.docdoe-faq-answer-wrap-open { |
| grid-template-rows: 1fr; |
| } |
|
|
| .docdoe-faq-answer-inner { |
| overflow: hidden; |
| min-height: 0; |
| } |
|
|
| .docdoe-faq-answer { |
| margin: -8px 86px 26px 120px; |
| color: rgba(248, 250, 252, 0.66); |
| font-size: 16px; |
| font-weight: 500; |
| line-height: 1.72; |
| } |
|
|
| .docdoe-faq-answer p { |
| margin: 0; |
| } |
|
|
| .docdoe-final-cta-section { |
| scroll-margin-top: 112px; |
| padding-top: clamp(82px, 7.4vw, 112px); |
| padding-bottom: clamp(86px, 7.2vw, 112px); |
| color: #f8fafc; |
| background: |
| radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.02), transparent 42%), |
| linear-gradient(180deg, #020202 0%, #020202 100%); |
| } |
|
|
| .docdoe-final-cta-card { |
| position: relative; |
| isolation: isolate; |
| overflow: hidden; |
| min-height: 340px; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: 28px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| padding: 52px 28px 58px; |
| background: |
| radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.06), transparent 48%), |
| linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)), |
| #080808; |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.06), |
| 0 28px 100px rgba(0, 0, 0, 0.4); |
| } |
|
|
| .docdoe-final-cta-card::before, |
| .docdoe-final-cta-card::after { |
| position: absolute; |
| content: ""; |
| pointer-events: none; |
| } |
|
|
| .docdoe-final-cta-card::before { |
| z-index: -1; |
| inset: 0; |
| background: |
| linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 22%, transparent 78%, rgba(255, 255, 255, 0.02)), |
| radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.03), transparent 55%); |
| } |
|
|
| .docdoe-final-cta-card::after { |
| left: 12%; |
| right: 12%; |
| top: 0; |
| height: 1px; |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); |
| } |
|
|
| .docdoe-final-cta-orbit { |
| position: absolute; |
| left: 50%; |
| top: 55%; |
| border: 1px solid rgba(255, 255, 255, 0.054); |
| border-radius: 50%; |
| mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); |
| transform: translate(-50%, -50%) rotate(-8deg); |
| pointer-events: none; |
| animation: docdoe-final-cta-orbit-drift 36s ease-in-out infinite; |
| } |
|
|
| .docdoe-final-cta-orbit-one { |
| width: min(820px, 84vw); |
| height: min(250px, 29vw); |
| } |
|
|
| .docdoe-final-cta-orbit-two { |
| width: min(620px, 68vw); |
| height: min(198px, 24vw); |
| border-color: rgba(255, 255, 255, 0.033); |
| transform: translate(-50%, -50%) rotate(12deg); |
| animation-duration: 42s; |
| animation-direction: reverse; |
| } |
|
|
| .docdoe-final-cta-horizon { |
| position: absolute; |
| left: 50%; |
| bottom: -54px; |
| width: min(920px, 102vw); |
| height: 166px; |
| border-radius: 50%; |
| background: |
| radial-gradient(ellipse at 50% 44%, rgba(248, 250, 252, 0.44), rgba(255, 255, 255, 0.099) 12%, rgba(255, 255, 255, 0.03) 28%, transparent 64%), |
| linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.189), transparent); |
| filter: blur(2px); |
| opacity: 0.54; |
| transform: translateX(-50%) rotateX(70deg); |
| animation: docdoe-final-horizon-breathe 12s ease-in-out infinite; |
| pointer-events: none; |
| } |
|
|
| .docdoe-final-cta-orb { |
| position: absolute; |
| top: 28px; |
| left: 50%; |
| z-index: 2; |
| display: grid; |
| width: 58px; |
| height: 58px; |
| place-items: center; |
| border: 1px solid rgba(255, 255, 255, 0.09); |
| border-radius: 50%; |
| color: rgba(248, 250, 252, 0.94); |
| background: |
| radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.22), transparent 38%), |
| radial-gradient(circle at center, rgba(255, 255, 255, 0.08), rgba(6, 13, 20, 0.18) 70%); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.12), |
| 0 0 34px rgba(255, 255, 255, 0.055); |
| transform: translateX(-50%); |
| } |
|
|
| .docdoe-final-cta-button { |
| position: relative; |
| display: inline-flex; |
| min-height: 54px; |
| align-items: center; |
| justify-content: center; |
| gap: 13px; |
| overflow: hidden; |
| min-width: 240px; |
| margin-top: 28px; |
| border: 1px solid rgba(255, 255, 255, 0.14); |
| border-radius: 999px; |
| padding: 0 26px; |
| color: #f8fafc; |
| font-size: 16px; |
| font-weight: 800; |
| background: |
| radial-gradient(ellipse at 18% 0%, rgba(255, 255, 255, 0.24), transparent 46%), |
| linear-gradient(180deg, rgba(203, 189, 255, 0.9), rgba(255, 255, 255, 0.225)); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.22), |
| inset 0 -20px 38px rgba(58, 28, 163, 0.22), |
| 0 18px 54px rgba(255, 255, 255, 0.06); |
| transition: |
| transform 320ms ease, |
| box-shadow 320ms ease, |
| border-color 320ms ease; |
| } |
|
|
| .docdoe-final-cta-button::before { |
| position: absolute; |
| inset: 1px 22% auto; |
| height: 1px; |
| content: ""; |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.48), transparent); |
| opacity: 0.86; |
| } |
|
|
| .docdoe-final-cta-button:hover { |
| border-color: rgba(248, 250, 252, 0.32); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.25), |
| inset 0 -20px 38px rgba(58, 28, 163, 0.22), |
| 0 22px 64px rgba(255, 255, 255, 0.075); |
| transform: translateY(-2px); |
| } |
|
|
| .docdoe-footer { |
| color: #f8fafc; |
| border-top: 1px solid rgba(255, 255, 255, 0.043); |
| background: |
| radial-gradient(ellipse at 22% 0%, rgba(255, 255, 255, 0.02), transparent 34%), |
| radial-gradient(ellipse at 84% 6%, rgba(255, 255, 255, 0.025), transparent 30%), |
| linear-gradient(180deg, #020202 0%, #020202 100%); |
| } |
|
|
| .docdoe-footer::before { |
| position: absolute; |
| inset: 0; |
| content: ""; |
| background: |
| linear-gradient(180deg, rgba(248, 250, 252, 0.018), transparent 28%), |
| radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.015), transparent 48%); |
| pointer-events: none; |
| } |
|
|
| .docdoe-hero-cta-btn { |
| position: relative; |
| z-index: 20; |
| display: inline-flex !important; |
| min-height: 3.6rem !important; |
| width: 100% !important; |
| align-items: center !important; |
| justify-content: center !important; |
| gap: 0.7rem !important; |
| padding: 0 2.5rem !important; |
| font-size: 1rem !important; |
| font-weight: 700 !important; |
| letter-spacing: -0.01em !important; |
| pointer-events: auto !important; |
| } |
|
|
| @media (min-width: 640px) { |
| .docdoe-hero-cta-btn { |
| width: auto !important; |
| } |
| } |
|
|
| .docdoe-secondary-action-btn { |
| display: inline-flex; |
| min-height: 3.5rem; |
| width: 100%; |
| align-items: center; |
| justify-content: center; |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| border-radius: 999px; |
| padding: 0 2.25rem; |
| font-size: 0.96rem; |
| font-weight: 600; |
| color: rgba(255, 255, 255, 0.7); |
| background: rgba(255, 255, 255, 0.02); |
| transition: all 200ms ease; |
| } |
|
|
| @media (min-width: 640px) { |
| .docdoe-secondary-action-btn { |
| width: auto; |
| } |
| } |
|
|
| .docdoe-secondary-action-btn:hover { |
| border-color: rgba(255, 255, 255, 0.15); |
| background: rgba(255, 255, 255, 0.04); |
| color: #ffffff; |
| transform: translateY(-1px); |
| } |
|
|
| .docdoe-footer-grid { |
| display: grid; |
| grid-template-columns: 1.2fr repeat(3, 0.6fr) 1fr; |
| gap: 48px; |
| align-items: start; |
| } |
|
|
| @media (max-width: 1024px) { |
| .docdoe-footer-grid { |
| grid-template-columns: 1fr 1fr; |
| gap: 40px; |
| } |
|
|
| .docdoe-footer-brand { |
| grid-column: span 2; |
| } |
|
|
| .docdoe-footer-newsletter { |
| grid-column: span 2; |
| max-width: 420px; |
| } |
| } |
|
|
| @media (max-width: 639px) { |
| .docdoe-footer-grid { |
| grid-template-columns: 1fr; |
| gap: 36px; |
| } |
|
|
| .docdoe-footer-brand, |
| .docdoe-footer-newsletter { |
| grid-column: span 1; |
| } |
| } |
|
|
| .docdoe-footer-logo { |
| display: inline-flex; |
| align-items: center; |
| gap: 12px; |
| color: #ffffff; |
| font-size: 1.15rem; |
| font-weight: 700; |
| letter-spacing: -0.02em; |
| } |
|
|
| .docdoe-footer-brand p { |
| margin-top: 1.25rem; |
| color: rgba(255, 255, 255, 0.5); |
| font-size: 0.92rem; |
| line-height: 1.6; |
| } |
|
|
| .docdoe-footer-column h3 { |
| color: #ffffff; |
| font-size: 0.88rem; |
| font-weight: 650; |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| } |
|
|
| .docdoe-footer-column ul { |
| margin-top: 1.25rem; |
| display: flex; |
| flex-direction: column; |
| gap: 0.75rem; |
| } |
|
|
| .docdoe-footer-column a { |
| color: rgba(255, 255, 255, 0.45); |
| font-size: 0.9rem; |
| transition: color 200ms ease; |
| } |
|
|
| .docdoe-footer-column a:hover { |
| color: #ffffff; |
| } |
|
|
| .docdoe-footer-newsletter label { |
| color: #ffffff; |
| font-size: 0.88rem; |
| font-weight: 650; |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| } |
|
|
| .docdoe-footer-newsletter p { |
| margin-top: 0.75rem; |
| color: rgba(255, 255, 255, 0.5); |
| font-size: 0.9rem; |
| } |
|
|
| .docdoe-footer-email { |
| display: grid; |
| grid-template-columns: auto minmax(0, 1fr) auto; |
| align-items: center; |
| gap: 10px; |
| min-height: 54px; |
| margin-top: 22px; |
| border: 1px solid rgba(255, 255, 255, 0.063); |
| border-radius: 999px; |
| padding: 0 7px 0 17px; |
| color: rgba(255, 255, 255, 0.351); |
| background: |
| radial-gradient(ellipse at 30% 0%, rgba(248, 250, 252, 0.08), transparent 52%), |
| rgba(6, 13, 20, 0.18); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.05), |
| 0 0 34px rgba(255, 255, 255, 0.014); |
| backdrop-filter: blur(20px) saturate(132%); |
| -webkit-backdrop-filter: blur(20px) saturate(132%); |
| } |
|
|
| .docdoe-footer-email input { |
| min-width: 0; |
| border: 0; |
| outline: 0; |
| color: rgba(248, 250, 252, 0.9); |
| font-size: 14px; |
| font-weight: 600; |
| background: transparent; |
| } |
|
|
| .docdoe-footer-email input::placeholder { |
| color: rgba(248, 250, 252, 0.46); |
| } |
|
|
| .docdoe-footer-email input:focus-visible { |
| outline: none; |
| } |
|
|
| .docdoe-footer-email:focus-within { |
| border-color: rgba(255, 255, 255, 0.126); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.07), |
| 0 0 44px rgba(255, 255, 255, 0.028); |
| } |
|
|
| .docdoe-footer-email button { |
| display: grid; |
| width: 42px; |
| height: 42px; |
| place-items: center; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: 50%; |
| color: #f8fafc; |
| background: |
| radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.2), transparent 38%), |
| linear-gradient(180deg, rgba(203, 189, 255, 0.92), rgba(255, 255, 255, 0.23)); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.18), |
| 0 0 26px rgba(255, 255, 255, 0.05); |
| cursor: pointer; |
| transition: |
| transform 240ms ease, |
| box-shadow 240ms ease; |
| } |
|
|
| .docdoe-footer-email button:hover { |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.22), |
| 0 0 34px rgba(255, 255, 255, 0.07); |
| transform: translateY(-1px); |
| } |
|
|
| .docdoe-footer-bottom { |
| margin-top: 52px; |
| border-top: 1px solid rgba(255, 255, 255, 0.041); |
| padding-top: 24px; |
| text-align: center; |
| } |
|
|
| .docdoe-footer-bottom span { |
| color: rgba(248, 250, 252, 0.46); |
| font-size: 13px; |
| font-weight: 550; |
| } |
|
|
| @keyframes docdoe-story-fog-drift { |
| 0%, |
| 100% { |
| transform: translateX(-50%) translate3d(0, 0, 0) rotate(-2deg) scale(1); |
| } |
| 50% { |
| transform: translateX(-50%) translate3d(0, -18px, 0) rotate(2deg) scale(1.04); |
| } |
| } |
|
|
| @keyframes docdoe-story-orbit-drift { |
| 0%, |
| 100% { |
| opacity: 0.62; |
| transform: translate(-50%, -50%) rotate(-26deg) scale(1); |
| } |
| 50% { |
| opacity: 0.82; |
| transform: translate(-50%, -50%) rotate(-22deg) scale(1.015); |
| } |
| } |
|
|
| @keyframes docdoe-story-particle-drift { |
| 0%, |
| 100% { |
| transform: translate3d(0, 0, 0); |
| } |
| 50% { |
| transform: translate3d(5px, -9px, 0); |
| } |
| } |
|
|
| @keyframes docdoe-pricing-fog-drift { |
| 0%, |
| 100% { |
| transform: translateX(-50%) translate3d(0, 0, 0) rotate(-2deg) scale(1); |
| } |
| 50% { |
| transform: translateX(-50%) translate3d(0, -16px, 0) rotate(2deg) scale(1.035); |
| } |
| } |
|
|
| @keyframes docdoe-pricing-orbit-drift { |
| 0%, |
| 100% { |
| opacity: 0.58; |
| transform: translateX(-50%) rotate(var(--pricing-orbit-rotation)) scale(1); |
| } |
| 50% { |
| opacity: 0.82; |
| transform: translateX(-50%) rotate(calc(var(--pricing-orbit-rotation) + 3deg)) scale(1.012); |
| } |
| } |
|
|
| @keyframes docdoe-pricing-particle-drift { |
| 0%, |
| 100% { |
| transform: translate3d(0, 0, 0); |
| } |
| 50% { |
| transform: translate3d(5px, -8px, 0); |
| } |
| } |
|
|
| @keyframes docdoe-final-fog-drift { |
| 0%, |
| 100% { |
| transform: translateX(-50%) translate3d(0, 0, 0) rotate(-2deg) scale(1); |
| } |
| 50% { |
| transform: translateX(-50%) translate3d(0, -16px, 0) rotate(2deg) scale(1.035); |
| } |
| } |
|
|
| @keyframes docdoe-final-orbit-drift { |
| 0%, |
| 100% { |
| opacity: 0.56; |
| transform: translateX(-50%) rotate(var(--final-orbit-rotation)) scale(1); |
| } |
| 50% { |
| opacity: 0.78; |
| transform: translateX(-50%) rotate(calc(var(--final-orbit-rotation) + 3deg)) scale(1.012); |
| } |
| } |
|
|
| @keyframes docdoe-final-particle-drift { |
| 0%, |
| 100% { |
| transform: translate3d(0, 0, 0); |
| } |
| 50% { |
| transform: translate3d(5px, -8px, 0); |
| } |
| } |
|
|
| @keyframes docdoe-faq-answer-in { |
| from { |
| opacity: 0; |
| transform: translate3d(0, -4px, 0); |
| } |
| to { |
| opacity: 1; |
| transform: translate3d(0, 0, 0); |
| } |
| } |
|
|
| @keyframes docdoe-final-cta-orbit-drift { |
| 0%, |
| 100% { |
| opacity: 0.58; |
| transform: translate(-50%, -50%) rotate(-8deg) scale(1); |
| } |
| 50% { |
| opacity: 0.82; |
| transform: translate(-50%, -50%) rotate(-5deg) scale(1.012); |
| } |
| } |
|
|
| @keyframes docdoe-final-horizon-breathe { |
| 0%, |
| 100% { |
| opacity: 0.54; |
| transform: translateX(-50%) rotateX(70deg) scale(0.98); |
| } |
| 50% { |
| opacity: 0.72; |
| transform: translateX(-50%) rotateX(70deg) scale(1.03); |
| } |
| } |
|
|
| @keyframes docdoe-flow-node-breathe { |
| 0%, |
| 100% { |
| transform: translate3d(0, 0, 0) scale(1); |
| } |
| 50% { |
| transform: translate3d(0, -4px, 0) scale(1.025); |
| } |
| } |
|
|
| @keyframes docdoe-what-fog-drift { |
| 0%, |
| 100% { |
| transform: translateX(-50%) translate3d(0, 0, 0) rotate(-2deg) scale(1); |
| } |
| 50% { |
| transform: translateX(-50%) translate3d(0, -18px, 0) rotate(2deg) scale(1.035); |
| } |
| } |
|
|
| @keyframes docdoe-what-particle-drift { |
| 0%, |
| 100% { |
| transform: translate3d(0, 0, 0); |
| } |
| 50% { |
| transform: translate3d(5px, -8px, 0); |
| } |
| } |
|
|
| @keyframes docdoe-what-orbit-drift { |
| 0%, |
| 100% { |
| transform: translate(-50%, -50%) rotate(var(--orbit-rotation)) scale(1); |
| } |
| 50% { |
| transform: translate(-50%, -50%) rotate(calc(var(--orbit-rotation) + 3deg)) scale(1.012); |
| } |
| } |
|
|
| @keyframes docdoe-ai-core-breathe { |
| 0%, |
| 100% { |
| transform: translate(-50%, -50%) scale(1); |
| } |
| 50% { |
| transform: translate(-50%, -50%) scale(1.025); |
| } |
| } |
|
|
| @keyframes docdoe-ai-core-ring { |
| 0%, |
| 100% { |
| transform: rotate(0deg) scale(0.985); |
| opacity: 0.42; |
| } |
| 50% { |
| transform: rotate(7deg) scale(1.02); |
| opacity: 0.76; |
| } |
| } |
|
|
| @keyframes docdoe-feature-float { |
| 0%, |
| 100% { |
| transform: translate3d(0, 0, 0); |
| } |
| 50% { |
| transform: translate3d(0, -10px, 0); |
| } |
| } |
|
|
| @keyframes docdoe-orbit-drift { |
| 0%, |
| 100% { |
| opacity: 0.84; |
| transform: translateX(-50%) rotate(-7deg) scale(1); |
| } |
| 50% { |
| opacity: 0.68; |
| transform: translateX(-50%) rotate(-5deg) scale(1.012); |
| } |
| } |
|
|
| @keyframes docdoe-aurora-drift { |
| 0%, |
| 100% { |
| transform: translateX(-50%) rotate(-9deg) scale(1); |
| } |
| 50% { |
| transform: translateX(-50%) rotate(-6deg) scale(1.06); |
| } |
| } |
|
|
| @keyframes docdoe-horizon-breathe { |
| 0%, |
| 100% { |
| opacity: 0.62; |
| transform: translateX(-50%) rotateX(68deg) scale(0.98); |
| } |
| 50% { |
| opacity: 0.86; |
| transform: translateX(-50%) rotateX(68deg) scale(1.04); |
| } |
| } |
|
|
| @keyframes docdoe-lens-drift { |
| 0%, |
| 100% { |
| transform: translateX(-50%) scaleX(0.94); |
| } |
| 50% { |
| transform: translateX(-50%) scaleX(1.04); |
| } |
| } |
|
|
| @keyframes docdoe-particles-drift { |
| 0% { |
| background-position: 12px 8px, 78px 44px, 38px 116px; |
| } |
| 100% { |
| background-position: 176px 172px, 309px 275px, 334px 412px; |
| } |
| } |
|
|
| @keyframes docdoe-liquid-float { |
| 0%, |
| 100% { |
| transform: translateX(-50%) translate3d(0, 0, 0) rotate(-2deg) scale(1); |
| } |
| 50% { |
| transform: translateX(-50%) translate3d(0, -18px, 0) rotate(2deg) scale(1.04); |
| } |
| } |
|
|
| @keyframes docdoe-floor-breathe { |
| 0%, |
| 100% { |
| opacity: 0.56; |
| transform: translateX(-50%) rotateX(72deg) scale(0.985); |
| } |
| 50% { |
| opacity: 0.76; |
| transform: translateX(-50%) rotateX(72deg) scale(1.02); |
| } |
| } |
|
|
| @keyframes docdoe-floor-bloom { |
| 0%, |
| 100% { |
| opacity: 0.34; |
| transform: translateX(-50%) rotateX(70deg) scaleX(0.96); |
| } |
| 50% { |
| opacity: 0.5; |
| transform: translateX(-50%) rotateX(70deg) scaleX(1.06); |
| } |
| } |
|
|
| @keyframes docdoe-floor-ring { |
| 0%, |
| 100% { |
| opacity: 0.5; |
| transform: translateX(-50%) rotateX(72deg) scale(0.99); |
| } |
| 50% { |
| opacity: 0.76; |
| transform: translateX(-50%) rotateX(72deg) scale(1.018); |
| } |
| } |
|
|
| @keyframes docdoe-comet-float { |
| 0%, |
| 100% { |
| transform: translate3d(0, 0, 0); |
| } |
| 50% { |
| transform: translate3d(7px, -12px, 0); |
| } |
| } |
|
|
| @keyframes docdoe-planet-drift { |
| 0%, |
| 100% { |
| transform: translate3d(0, 0, 0) rotate(0deg); |
| } |
| 50% { |
| transform: translate3d(-10px, 12px, 0) rotate(2deg); |
| } |
| } |
|
|
| @keyframes docdoe-portal-pulse { |
| 0%, |
| 100% { |
| opacity: 0.52; |
| transform: translateX(-50%) rotateX(68deg) scale(1); |
| } |
| 50% { |
| opacity: 0.9; |
| transform: translateX(-50%) rotateX(68deg) scale(1.035); |
| } |
| } |
|
|
| @keyframes docdoe-core-pulse { |
| 0%, |
| 100% { |
| opacity: 0.84; |
| transform: translateX(-50%) scale(0.96); |
| } |
| 50% { |
| opacity: 1; |
| transform: translateX(-50%) scale(1.08); |
| } |
| } |
|
|
| @keyframes docdoe-star-drift { |
| 0%, |
| 100% { |
| transform: translate3d(0, 0, 0); |
| } |
| 50% { |
| transform: translate3d(6px, -9px, 0); |
| } |
| } |
|
|
| @media (min-width: 640px) { |
| .docdoe-hero-cta { |
| width: auto; |
| max-width: none; |
| padding-left: 48px; |
| padding-right: 12px; |
| } |
| } |
|
|
| @media (max-width: 1100px) { |
| .docdoe-intelligence-stage { |
| height: 600px; |
| } |
|
|
| .docdoe-feature-node { |
| width: min(286px, 31vw); |
| } |
|
|
| .docdoe-feature-node-upper-left { |
| left: 0; |
| } |
|
|
| .docdoe-feature-node-upper-right { |
| right: 0; |
| } |
|
|
| .docdoe-feature-node-lower-left { |
| left: 18px; |
| } |
|
|
| .docdoe-feature-node-lower-right { |
| right: 18px; |
| } |
|
|
| .docdoe-flow-system { |
| min-height: 610px; |
| padding-left: 10px; |
| } |
|
|
| .docdoe-flow-step { |
| grid-template-columns: 104px 38px minmax(0, 1fr); |
| gap: 18px; |
| } |
|
|
| .docdoe-pricing-card { |
| min-height: 470px; |
| } |
|
|
| .docdoe-pricing-card-glow-popular { |
| left: 25%; |
| } |
|
|
| .docdoe-pricing-card-glow-premium { |
| left: 75%; |
| } |
|
|
| .docdoe-footer-grid { |
| grid-template-columns: minmax(240px, 1.2fr) repeat(3, minmax(130px, 1fr)); |
| } |
|
|
| .docdoe-footer-newsletter { |
| grid-column: 1 / -1; |
| max-width: 420px; |
| } |
| } |
|
|
| @media (max-width: 767px) { |
| .docdoe-landing > section { |
| content-visibility: visible; |
| contain-intrinsic-size: auto; |
| } |
|
|
| .docdoe-nav-shell { |
| grid-template-columns: minmax(0, 1fr) auto; |
| gap: 8px; |
| padding-left: 12px; |
| padding-right: 7px; |
| backdrop-filter: blur(10px) saturate(118%); |
| -webkit-backdrop-filter: blur(10px) saturate(118%); |
| } |
|
|
| .docdoe-nav-shell::before { |
| opacity: 0.28; |
| } |
|
|
| .docdoe-landing section, |
| .docdoe-landing footer { |
| scroll-margin-top: 84px; |
| } |
|
|
| .docdoe-atmosphere-global-glow { |
| width: 340px; |
| height: 340px; |
| filter: blur(72px); |
| opacity: 0.72; |
| } |
|
|
| .docdoe-hero-blob-tl, |
| .docdoe-hero-blob-tr { |
| filter: blur(72px); |
| opacity: 0.075; |
| } |
|
|
| .docdoe-what-core-blob, |
| .docdoe-story-headline-glow, |
| .docdoe-flow-timeline-glow, |
| .docdoe-pricing-card-glow, |
| .docdoe-final-cta-spotlight { |
| filter: blur(42px); |
| } |
|
|
| .docdoe-what-fog, |
| .docdoe-story-fog, |
| .docdoe-pricing-fog, |
| .docdoe-final-fog { |
| filter: blur(34px); |
| opacity: 0.42; |
| } |
|
|
| .docdoe-feature-node, |
| .docdoe-flow-node, |
| .docdoe-story-cta-strip, |
| .docdoe-pricing-card, |
| .docdoe-faq-item, |
| .docdoe-final-cta-card, |
| .docdoe-footer-email { |
| backdrop-filter: blur(10px) saturate(118%); |
| -webkit-backdrop-filter: blur(10px) saturate(118%); |
| } |
|
|
| .docdoe-logo-mark { |
| width: 32px; |
| height: 32px; |
| } |
|
|
| .docdoe-nav-cta { |
| min-height: 40px; |
| gap: 8px; |
| padding: 0 13px 0 15px; |
| font-size: 12px; |
| } |
|
|
| .docdoe-hero-trust-row { |
| max-width: 330px; |
| gap: 8px 10px; |
| } |
|
|
| .docdoe-hero-trust-separator { |
| display: none; |
| } |
|
|
| .docdoe-hero-trust-item span { |
| font-size: 10.5px; |
| } |
|
|
| .docdoe-eyebrow::before, |
| .docdoe-eyebrow::after { |
| width: 34px; |
| margin: 0 10px; |
| } |
|
|
| .docdoe-orbit-arc { |
| top: 17%; |
| width: 178vw; |
| height: 92vw; |
| } |
|
|
| .docdoe-orbit-arc-secondary { |
| top: 36%; |
| width: 148vw; |
| height: 84vw; |
| } |
|
|
| .docdoe-orbit-arc-tertiary { |
| top: 47%; |
| width: 112vw; |
| height: 48vw; |
| } |
|
|
| .docdoe-particle-veil { |
| opacity: 0.36; |
| background-size: 132px 132px, 192px 192px, 246px 246px; |
| } |
|
|
| .docdoe-aurora { |
| width: 108vw; |
| height: 330px; |
| filter: blur(24px); |
| } |
|
|
| .docdoe-aurora-left { |
| top: 19%; |
| margin-left: -24vw; |
| } |
|
|
| .docdoe-aurora-right { |
| top: 31%; |
| margin-left: 26vw; |
| } |
|
|
| .docdoe-horizon-glow { |
| bottom: 2%; |
| width: 122vw; |
| height: 190px; |
| opacity: 0.54; |
| } |
|
|
| .docdoe-liquid-fog { |
| width: 112vw; |
| height: 420px; |
| filter: blur(32px); |
| opacity: 0.24; |
| } |
|
|
| .docdoe-liquid-fog-one { |
| top: 16%; |
| margin-left: -28vw; |
| } |
|
|
| .docdoe-liquid-fog-two { |
| top: 34%; |
| margin-left: 30vw; |
| } |
|
|
| .docdoe-floor-atmosphere { |
| bottom: -4.5%; |
| width: 128vw; |
| height: 250px; |
| } |
|
|
| .docdoe-floor-haze { |
| bottom: 34px; |
| height: 148px; |
| opacity: 0.58; |
| } |
|
|
| .docdoe-floor-bloom { |
| bottom: 98px; |
| width: 168px; |
| height: 16px; |
| opacity: 0.34; |
| } |
|
|
| .docdoe-floor-ring { |
| bottom: 64px; |
| } |
|
|
| .docdoe-floor-reflection { |
| bottom: 24px; |
| width: 116vw; |
| height: 112px; |
| opacity: 0.46; |
| } |
|
|
| .docdoe-lens-line-one { |
| bottom: 21%; |
| width: 86vw; |
| } |
|
|
| .docdoe-lens-line-two { |
| bottom: 18%; |
| width: 68vw; |
| } |
|
|
| .docdoe-comet { |
| top: 42%; |
| left: -2%; |
| width: 13px; |
| height: 13px; |
| } |
|
|
| .docdoe-comet::before { |
| width: 150px; |
| } |
|
|
| .docdoe-planet-system { |
| top: 22%; |
| right: -42px; |
| width: 118px; |
| opacity: 0.88; |
| } |
|
|
| .docdoe-planet-core { |
| inset: 28px; |
| } |
|
|
| .docdoe-portal-system { |
| bottom: -2%; |
| width: 132vw; |
| height: 260px; |
| } |
|
|
| .docdoe-portal-ring { |
| bottom: 78px; |
| } |
|
|
| .docdoe-portal-core { |
| bottom: 75px; |
| } |
|
|
| .docdoe-portal-beam { |
| bottom: 94px; |
| height: 132px; |
| } |
|
|
| .docdoe-hero-cta { |
| min-height: 64px; |
| gap: 16px; |
| font-size: 18px; |
| } |
|
|
| .docdoe-hero-cta-icon { |
| width: 46px; |
| height: 46px; |
| } |
|
|
| .docdoe-story-section { |
| padding-top: 86px; |
| padding-bottom: 88px; |
| } |
|
|
| .docdoe-story-copy { |
| text-align: center; |
| } |
|
|
| .docdoe-story-label { |
| letter-spacing: 0.18em; |
| } |
|
|
| .docdoe-story-label::after { |
| display: none; |
| } |
|
|
| .docdoe-story-points { |
| max-width: 350px; |
| margin-right: auto; |
| margin-left: auto; |
| text-align: left; |
| } |
|
|
| .docdoe-story-point { |
| gap: 15px; |
| } |
|
|
| .docdoe-story-point-icon { |
| width: 48px; |
| height: 48px; |
| } |
|
|
| .docdoe-story-point h3 { |
| font-size: 16px; |
| } |
|
|
| .docdoe-story-point p { |
| margin-top: 5px; |
| font-size: 13.5px; |
| } |
|
|
| .docdoe-flow-system { |
| width: min(100%, 370px); |
| min-height: auto; |
| margin-right: auto; |
| margin-left: auto; |
| gap: 24px; |
| padding: 18px 0 8px; |
| } |
|
|
| .docdoe-flow-ambient { |
| left: 50%; |
| width: 112vw; |
| height: 520px; |
| opacity: 0.68; |
| transform: translate(-50%, -50%) rotate(-9deg); |
| } |
|
|
| .docdoe-flow-line { |
| left: 31px; |
| top: 56px; |
| bottom: 56px; |
| } |
|
|
| .docdoe-flow-timeline-glow { |
| left: 31px; |
| width: 120px; |
| } |
|
|
| .docdoe-intelligence-stage > svg { |
| display: none; |
| } |
|
|
| .docdoe-story-headline-glow { |
| left: 50%; |
| width: 100%; |
| transform: translateX(-50%); |
| opacity: 0.4; |
| } |
|
|
| .docdoe-flow-step { |
| grid-template-columns: 62px minmax(0, 1fr); |
| gap: 14px; |
| min-height: 108px; |
| } |
|
|
| .docdoe-flow-step::before { |
| left: 31px; |
| width: 33px; |
| } |
|
|
| .docdoe-flow-node { |
| grid-row: 1 / span 2; |
| width: 56px; |
| height: 56px; |
| } |
|
|
| .docdoe-flow-node::before { |
| inset: -10px; |
| } |
|
|
| .docdoe-flow-number { |
| align-self: end; |
| font-size: 15px; |
| } |
|
|
| .docdoe-flow-copy { |
| grid-column: 2; |
| } |
|
|
| .docdoe-flow-copy h3 { |
| font-size: 16px; |
| } |
|
|
| .docdoe-flow-copy p { |
| margin-top: 6px; |
| font-size: 13.5px; |
| line-height: 1.62; |
| } |
|
|
| .docdoe-story-cta-strip { |
| max-width: 370px; |
| flex-direction: column; |
| align-items: stretch; |
| border-radius: 30px; |
| padding: 22px; |
| text-align: center; |
| } |
|
|
| .docdoe-story-cta-orb { |
| margin-right: auto; |
| margin-left: auto; |
| } |
|
|
| .docdoe-story-cta-button { |
| width: 100%; |
| } |
|
|
| .docdoe-pricing-section { |
| padding-top: 86px; |
| padding-bottom: 88px; |
| } |
|
|
| .docdoe-pricing-label { |
| letter-spacing: 0.24em; |
| } |
|
|
| .docdoe-pricing-orbit-one { |
| top: 14%; |
| width: 142vw; |
| height: 290px; |
| opacity: 0.66; |
| } |
|
|
| .docdoe-pricing-orbit-two { |
| top: 27%; |
| width: 118vw; |
| height: 260px; |
| opacity: 0.5; |
| } |
|
|
| .docdoe-pricing-fog { |
| width: 126vw; |
| height: 360px; |
| filter: blur(54px); |
| } |
|
|
| .docdoe-pricing-fog-left { |
| top: 12%; |
| margin-left: -26vw; |
| } |
|
|
| .docdoe-pricing-fog-right { |
| top: 34%; |
| margin-left: 27vw; |
| } |
|
|
| .docdoe-pricing-grid-wrap { |
| margin-top: 40px; |
| } |
|
|
| .docdoe-pricing-card-glow { |
| top: 160px; |
| width: 86vw; |
| height: 430px; |
| opacity: 0.18; |
| } |
|
|
| .docdoe-pricing-card-glow-popular, |
| .docdoe-pricing-card-glow-premium { |
| left: 50%; |
| } |
|
|
| .docdoe-pricing-card { |
| min-height: auto; |
| border-radius: 26px; |
| padding: 26px 22px 22px; |
| } |
|
|
| .docdoe-pricing-badge { |
| top: 15px; |
| right: 15px; |
| min-height: 26px; |
| padding: 0 10px; |
| font-size: 9px; |
| } |
|
|
| .docdoe-pricing-plan-icon { |
| width: 46px; |
| height: 46px; |
| } |
|
|
| .docdoe-pricing-card h3 { |
| margin-top: 20px; |
| font-size: 21px; |
| } |
|
|
| .docdoe-pricing-price span, |
| .docdoe-pricing-card-teacher .docdoe-pricing-price span { |
| font-size: clamp(2.6rem, 15vw, 3.12rem); |
| } |
|
|
| .docdoe-pricing-description { |
| min-height: auto; |
| } |
|
|
| .docdoe-pricing-features { |
| gap: 11px; |
| } |
|
|
| .docdoe-pricing-trust { |
| width: min(100%, 370px); |
| border-radius: 28px; |
| padding: 15px 18px; |
| } |
|
|
| .docdoe-pricing-trust span + span::before { |
| display: none; |
| } |
|
|
| .docdoe-faq-section { |
| padding-top: 86px; |
| padding-bottom: 86px; |
| } |
|
|
| .docdoe-final-label { |
| letter-spacing: 0.24em; |
| } |
|
|
| .docdoe-final-orbit-one { |
| top: 16%; |
| width: 136vw; |
| height: 280px; |
| opacity: 0.62; |
| } |
|
|
| .docdoe-final-orbit-two { |
| top: 39%; |
| width: 110vw; |
| height: 240px; |
| opacity: 0.48; |
| } |
|
|
| .docdoe-final-fog { |
| width: 126vw; |
| height: 360px; |
| filter: blur(54px); |
| } |
|
|
| .docdoe-final-fog-left { |
| top: 12%; |
| margin-left: -26vw; |
| } |
|
|
| .docdoe-final-fog-right { |
| top: 38%; |
| margin-left: 27vw; |
| } |
|
|
| .docdoe-faq-list { |
| margin-top: 38px; |
| gap: 12px; |
| } |
|
|
| .docdoe-faq-item { |
| border-radius: 24px; |
| } |
|
|
| .docdoe-faq-item summary, |
| .docdoe-faq-item .docdoe-faq-trigger { |
| grid-template-columns: minmax(0, 1fr) 34px; |
| gap: 13px; |
| min-height: 0; |
| padding: 20px; |
| outline: none; |
| } |
|
|
| .docdoe-faq-item:focus-within { |
| box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08); |
| } |
|
|
| .docdoe-faq-item.docdoe-faq-item-open .docdoe-faq-trigger { |
| grid-template-columns: 44px minmax(0, 1fr) 34px; |
| min-height: 74px; |
| padding: 15px 16px; |
| } |
|
|
| .docdoe-faq-item.docdoe-faq-item-open .docdoe-faq-icon { |
| grid-column: 1; |
| grid-row: 1; |
| } |
|
|
| .docdoe-faq-item.docdoe-faq-item-open .docdoe-faq-question { |
| grid-column: 2; |
| grid-row: 1; |
| font-size: 15px; |
| line-height: 1.34; |
| } |
|
|
| .docdoe-faq-item.docdoe-faq-item-open .docdoe-faq-plus { |
| grid-column: 3; |
| grid-row: 1; |
| } |
|
|
| .docdoe-faq-icon { |
| grid-column: 1; |
| grid-row: 1; |
| width: 44px; |
| height: 44px; |
| } |
|
|
| .docdoe-faq-question { |
| grid-column: 1 / -1; |
| grid-row: 2; |
| font-size: 17px; |
| line-height: 1.32; |
| } |
|
|
| .docdoe-faq-plus { |
| grid-column: 2; |
| grid-row: 1; |
| width: 34px; |
| height: 34px; |
| justify-self: end; |
| } |
|
|
| .docdoe-faq-answer { |
| margin: -2px 20px 22px; |
| font-size: 15px; |
| line-height: 1.65; |
| } |
|
|
| .docdoe-faq-item:not(.docdoe-faq-item-open) .docdoe-faq-trigger { |
| grid-template-columns: 44px minmax(0, 1fr) 34px; |
| min-height: 74px; |
| padding: 15px 16px; |
| } |
|
|
| .docdoe-faq-item:not(.docdoe-faq-item-open) .docdoe-faq-icon { |
| grid-column: 1; |
| grid-row: 1; |
| } |
|
|
| .docdoe-faq-item:not(.docdoe-faq-item-open) .docdoe-faq-question { |
| grid-column: 2; |
| grid-row: 1; |
| font-size: 15px; |
| line-height: 1.34; |
| } |
|
|
| .docdoe-faq-item:not(.docdoe-faq-item-open) .docdoe-faq-plus { |
| grid-column: 3; |
| grid-row: 1; |
| } |
|
|
| .docdoe-final-cta-section { |
| padding-top: 88px; |
| padding-bottom: 94px; |
| } |
|
|
| .docdoe-final-cta-card { |
| min-height: 326px; |
| border-radius: 30px; |
| padding: 70px 22px 50px; |
| } |
|
|
| .docdoe-final-cta-orb { |
| top: 24px; |
| width: 52px; |
| height: 52px; |
| } |
|
|
| .docdoe-final-cta-orbit-one { |
| width: 116vw; |
| height: 218px; |
| } |
|
|
| .docdoe-final-cta-orbit-two { |
| width: 90vw; |
| height: 182px; |
| } |
|
|
| .docdoe-final-cta-horizon { |
| bottom: -42px; |
| width: 116vw; |
| height: 126px; |
| opacity: 0.46; |
| } |
|
|
| .docdoe-final-cta-button { |
| width: 100%; |
| min-width: 0; |
| max-width: 320px; |
| } |
|
|
| .docdoe-footer { |
| padding-top: 54px; |
| } |
|
|
| .docdoe-footer-brand p { |
| margin-top: 14px; |
| } |
|
|
| .docdoe-footer-column ul { |
| margin-top: 14px; |
| gap: 10px; |
| } |
|
|
| .docdoe-footer-newsletter { |
| max-width: none; |
| } |
|
|
| .docdoe-footer-email { |
| min-height: 52px; |
| } |
|
|
| .docdoe-footer-bottom { |
| margin-top: 40px; |
| } |
|
|
| .docdoe-what-section { |
| min-height: auto; |
| padding-top: 70px; |
| padding-bottom: 64px; |
| } |
|
|
| .docdoe-what-label { |
| letter-spacing: 0.18em; |
| font-size: 11px; |
| } |
|
|
| .docdoe-what-section h2 { |
| max-width: 350px; |
| font-size: clamp(2rem, 8.4vw, 2.7rem); |
| line-height: 1.06; |
| } |
|
|
| .docdoe-what-section p { |
| max-width: 350px; |
| } |
|
|
| .docdoe-intelligence-stage { |
| display: flex; |
| height: auto; |
| min-height: 0; |
| width: min(100%, 358px); |
| flex-direction: column; |
| align-items: center; |
| gap: 10px; |
| margin-top: 28px; |
| padding-top: 0; |
| } |
|
|
| .docdoe-intelligence-stage::before { |
| top: 72px; |
| width: 102vw; |
| height: 210px; |
| opacity: 0.42; |
| } |
|
|
| .docdoe-intelligence-stage::after { |
| bottom: 16px; |
| width: 96vw; |
| height: 96px; |
| opacity: 0.34; |
| } |
|
|
| .docdoe-intelligence-stage > svg, |
| .docdoe-what-orbit, |
| .docdoe-what-core-ring-spin { |
| display: none; |
| } |
|
|
| .docdoe-what-axis { |
| display: none; |
| } |
|
|
| .docdoe-ai-core { |
| position: relative; |
| left: auto; |
| top: auto; |
| width: 126px; |
| height: 126px; |
| margin-bottom: 6px; |
| transform: none; |
| animation-name: docdoe-ai-core-breathe-mobile; |
| } |
|
|
| .docdoe-ai-core.docdoe-ai-core-soft-pulse.docdoe-motion-no-css-animation { |
| width: 126px; |
| height: 126px; |
| transform: none; |
| animation-name: docdoe-ai-core-breathe-mobile !important; |
| } |
|
|
| .docdoe-ai-core::before { |
| inset: -28px; |
| } |
|
|
| .docdoe-ai-core-ring-one { |
| inset: -10px; |
| } |
|
|
| .docdoe-ai-core-ring-two { |
| inset: -19px; |
| } |
|
|
| .docdoe-ai-core-mark { |
| width: 42px; |
| height: 42px; |
| border-radius: 13px; |
| } |
|
|
| .docdoe-ai-core-text { |
| font-size: 10px; |
| } |
|
|
| .docdoe-feature-node, |
| .docdoe-feature-node-upper-left, |
| .docdoe-feature-node-upper-right, |
| .docdoe-feature-node-lower-left, |
| .docdoe-feature-node-lower-right { |
| position: relative; |
| left: auto; |
| right: auto; |
| top: auto; |
| bottom: auto; |
| width: min(100%, 340px); |
| border-radius: 20px 24px 22px 26px; |
| flex-direction: row; |
| gap: 10px; |
| padding: 11px 12px; |
| text-align: left; |
| } |
|
|
| .docdoe-feature-node::before { |
| display: none; |
| } |
|
|
| .docdoe-feature-icon { |
| width: 38px; |
| height: 38px; |
| } |
|
|
| .docdoe-feature-copy h3 { |
| font-size: 13.5px; |
| } |
|
|
| .docdoe-feature-copy p { |
| font-size: 12px; |
| line-height: 1.45; |
| } |
| } |
|
|
| @media (max-width: 430px) { |
| .docdoe-beta-badge { |
| display: none; |
| } |
| } |
|
|
| @media (max-width: 380px) { |
| .docdoe-nav-cta { |
| padding-left: 12px; |
| padding-right: 10px; |
| } |
| } |
|
|
| @media (max-width: 350px) { |
| .docdoe-brand-text { |
| display: none; |
| } |
| } |
|
|
| @keyframes docdoe-ai-core-breathe-mobile { |
| 0%, |
| 100% { |
| transform: scale(1); |
| } |
| 50% { |
| transform: scale(1.025); |
| } |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| .docdoe-orbit-arc, |
| .docdoe-aurora, |
| .docdoe-particle-veil, |
| .docdoe-liquid-fog, |
| .docdoe-horizon-glow, |
| .docdoe-lens-line, |
| .docdoe-floor-haze, |
| .docdoe-floor-bloom, |
| .docdoe-hero-cta-stage, |
| .docdoe-floor-ring, |
| .docdoe-comet, |
| .docdoe-planet-system, |
| .docdoe-portal-ring, |
| .docdoe-portal-core, |
| .docdoe-star, |
| .docdoe-what-fog, |
| .docdoe-what-particle, |
| .docdoe-what-orbit, |
| .docdoe-ai-core, |
| .docdoe-ai-core-ring, |
| .docdoe-feature-node, |
| .docdoe-story-fog, |
| .docdoe-story-orbit-field, |
| .docdoe-story-particle, |
| .docdoe-flow-node, |
| .docdoe-pricing-fog, |
| .docdoe-pricing-orbit, |
| .docdoe-pricing-particle, |
| .docdoe-final-fog, |
| .docdoe-final-orbit, |
| .docdoe-final-particle, |
| .docdoe-final-cta-orbit, |
| .docdoe-final-cta-horizon { |
| animation: none; |
| } |
|
|
| .docdoe-nav-cta, |
| .docdoe-hero-cta, |
| .docdoe-hero-cta::before, |
| .docdoe-story-cta-button, |
| .docdoe-pricing-card, |
| .docdoe-pricing-button, |
| .docdoe-faq-item, |
| .docdoe-faq-plus, |
| .docdoe-final-cta-button, |
| .docdoe-footer-column a, |
| .docdoe-footer-email button { |
| transition: none; |
| } |
| } |
|
|
| |
|
|
| @keyframes docdoe-beta-pulse { |
| 0%, 100% { opacity: 0.4; } |
| 50% { opacity: 1.0; } |
| } |
|
|
| .docdoe-beta-dot { |
| animation: docdoe-beta-pulse 2s ease-in-out infinite; |
| } |
|
|
| |
| |
| |
|
|
| .docdoe-onboarding { |
| min-height: 100vh; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .docdoe-onboarding * { |
| letter-spacing: 0; |
| } |
|
|
| |
| .docdoe-onboarding .docdoe-hero-blob-tl, |
| .docdoe-onboarding .docdoe-hero-blob-tr, |
| .docdoe-onboarding .docdoe-hero-depth, |
| .docdoe-onboarding .docdoe-particle-veil, |
| .docdoe-onboarding .docdoe-ambient-mesh, |
| .docdoe-onboarding .docdoe-liquid-fog, |
| .docdoe-onboarding .docdoe-aurora, |
| .docdoe-onboarding .docdoe-orbit-arc, |
| .docdoe-onboarding .docdoe-horizon-glow, |
| .docdoe-onboarding .docdoe-lens-line, |
| .docdoe-onboarding .docdoe-floor-atmosphere, |
| .docdoe-onboarding .docdoe-star, |
| .docdoe-onboarding .docdoe-hero-cta-stage { |
| |
| } |
|
|
| |
| .docdoe-onboarding .docdoe-nav-cta { |
| min-height: 36px; |
| padding: 0 16px; |
| font-size: 12px; |
| } |
|
|
| .docdoe-onboarding .docdoe-hero-cta { |
| width: 100%; |
| max-width: none; |
| min-height: 52px; |
| padding: 0 24px; |
| font-size: 16px; |
| } |
|
|
| .docdoe-onboarding .docdoe-hero-cta-icon { |
| width: 40px; |
| height: 40px; |
| } |
|
|
| @media (min-width: 640px) { |
| .docdoe-onboarding .docdoe-hero-cta { |
| padding: 0 32px; |
| } |
| } |
|
|
| |
| .docdoe-dashboard { |
| position: relative; |
| isolation: isolate; |
| overflow-x: hidden; |
| background: |
| radial-gradient(80% 48% at 50% -18%, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 68%), |
| linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(6, 8, 16, 0) 34%), |
| linear-gradient(180deg, #080b16 0%, #060814 48%, #04050b 100%); |
| } |
|
|
| .docdoe-dashboard::before { |
| content: ""; |
| position: absolute; |
| inset: 0; |
| z-index: 0; |
| pointer-events: none; |
| background-image: |
| linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); |
| background-size: 72px 72px; |
| opacity: 0.18; |
| } |
|
|
| .docdoe-dashboard::after { |
| content: ""; |
| position: absolute; |
| inset: 0; |
| z-index: 0; |
| pointer-events: none; |
| background: |
| linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 16%), |
| radial-gradient(90% 40% at 50% 100%, rgba(16, 185, 129, 0.055), transparent 70%); |
| } |
|
|
| .docdoe-dashboard * { |
| letter-spacing: 0; |
| } |
|
|
| .docdoe-dashboard-nav, |
| .docdoe-dashboard-panel { |
| border: 1px solid rgba(255, 255, 255, 0.075); |
| background: linear-gradient(180deg, rgba(16, 20, 38, 0.92), rgba(10, 12, 24, 0.86)); |
| box-shadow: |
| 0 24px 80px rgba(0, 0, 0, 0.34), |
| inset 0 1px 0 rgba(255, 255, 255, 0.055); |
| } |
|
|
| .docdoe-dashboard-nav { |
| min-height: 64px; |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); |
| align-items: center; |
| gap: 14px; |
| padding: 10px 12px; |
| } |
|
|
| .docdoe-dashboard-panel { |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .docdoe-dashboard-panel::before { |
| content: ""; |
| position: absolute; |
| inset: 0 0 auto; |
| height: 1px; |
| background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.38), transparent); |
| opacity: 0.72; |
| } |
|
|
| @media (max-width: 767px) { |
| .docdoe-dashboard-nav { |
| grid-template-columns: 1fr; |
| align-items: stretch; |
| } |
| } |
|
|
| nextjs-portal, |
| [data-nextjs-toast], |
| [data-nextjs-dialog-overlay], |
| [data-next-badge-root], |
| [data-next-badge] { |
| display: none !important; |
| } |
|
|
| |
| |
| |
|
|
| .katex { |
| color: rgba(255,255,255,0.88); |
| display: inline-block; |
| font-size: 1em; |
| max-width: 100%; |
| overflow-x: auto; |
| overflow-y: hidden; |
| vertical-align: middle; |
| } |
| .katex-display { max-width: 100%; overflow-x: auto; overflow-y: hidden; } |
| .katex-display > .katex { white-space: normal; } |
| .katex .mord, .katex .mop, .katex .mbin, .katex .mrel, |
| .katex .mopen, .katex .mclose, .katex .mpunct, |
| .katex .minner { color: inherit; } |
| .katex .mfrac .frac-line { border-bottom-color: rgba(255,255,255,0.7); } |
| .katex .sqrt .sqrt-line { border-top-color: rgba(255,255,255,0.7); } |
| .katex .vlist-t { color: rgba(255,255,255,0.88); } |
|
|
| |
| .docdoe-navbar { |
| backdrop-filter: none !important; |
| -webkit-backdrop-filter: none !important; |
| } |
|
|
| .docdoe-navbar-shell { |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| background: rgba(5, 5, 5, 0.72); |
| box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04); |
| backdrop-filter: blur(18px) saturate(1.2); |
| -webkit-backdrop-filter: blur(18px) saturate(1.2); |
| transition: border-color 220ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)), |
| background-color 220ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)), |
| box-shadow 220ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)); |
| } |
|
|
| .docdoe-navbar-shell-scrolled { |
| border-color: rgba(255, 255, 255, 0.12); |
| background: rgba(3, 3, 3, 0.9); |
| box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05); |
| } |
|
|
| .docdoe-navbar-logo { |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| background: #050505; |
| transition: border-color 180ms ease, box-shadow 180ms ease; |
| } |
|
|
| .docdoe-navbar-brand:hover .docdoe-navbar-logo, |
| .docdoe-navbar-brand:focus-visible .docdoe-navbar-logo { |
| border-color: rgba(255, 255, 255, 0.28); |
| box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 18px rgba(255, 255, 255, 0.06); |
| } |
|
|
| .docdoe-navbar-beta { |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| color: rgba(255, 255, 255, 0.48); |
| background: rgba(255, 255, 255, 0.03); |
| } |
|
|
| .docdoe-navbar-link { |
| color: rgba(255, 255, 255, 0.62); |
| transition: color 160ms ease; |
| } |
|
|
| .docdoe-navbar-link:hover, |
| .docdoe-navbar-link:focus-visible { |
| color: #fff; |
| } |
|
|
| .docdoe-navbar-cta { |
| border: 1px solid rgba(255, 255, 255, 0.92); |
| color: #030303; |
| background: #fff; |
| transition: background-color 180ms ease, transform 180ms ease; |
| } |
|
|
| .docdoe-navbar-cta:hover { |
| background: #f1f1f1; |
| transform: translateY(-1px); |
| } |
|
|
| .docdoe-navbar-cta:hover .docdoe-action-arrow { |
| transform: translateX(2px); |
| } |
|
|
| .docdoe-cinematic-hero { |
| --bg: #030303; |
| --surface: rgba(255, 255, 255, 0.045); |
| --border: rgba(255, 255, 255, 0.12); |
| --border-soft: rgba(255, 255, 255, 0.09); |
| --text: #ffffff; |
| --muted: rgba(255, 255, 255, 0.62); |
| position: relative; |
| background: var(--bg) !important; |
| } |
|
|
| .docdoe-cinematic-hero::before { |
| position: absolute; |
| top: -9rem; |
| left: 50%; |
| z-index: 0; |
| width: min(66rem, 94vw); |
| height: clamp(19rem, 35vw, 29rem); |
| transform: translateX(-50%); |
| background: radial-gradient(ellipse at 50% 10%, rgba(255, 255, 255, 0.2), rgba(232, 236, 246, 0.095) 31%, transparent 69%); |
| filter: blur(20px); |
| content: ""; |
| opacity: 0.92; |
| pointer-events: none; |
| } |
|
|
| .docdoe-hero-light-source { |
| top: 0; |
| left: 50%; |
| z-index: 1; |
| width: min(14rem, 34vw); |
| height: 1px; |
| transform: translateX(-50%); |
| border-radius: 999px; |
| background: rgba(255, 255, 255, 0.32); |
| box-shadow: 0 0 24px 10px rgba(255, 255, 255, 0.15), 0 0 82px 40px rgba(226, 232, 244, 0.11); |
| } |
|
|
| .docdoe-hero-light-beams { |
| z-index: 0; |
| background: |
| conic-gradient(from 157deg at 50% -5%, transparent 0 13deg, rgba(255, 255, 255, 0.105) 20deg, transparent 30deg 46deg, rgba(255, 255, 255, 0.09) 55deg, transparent 67deg 360deg), |
| linear-gradient(111deg, transparent 23%, rgba(255, 255, 255, 0.048) 42%, transparent 54%), |
| linear-gradient(69deg, transparent 47%, rgba(255, 255, 255, 0.044) 60%, transparent 76%); |
| mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.92) 39%, transparent 82%); |
| mix-blend-mode: screen; |
| opacity: 0.82; |
| transform-origin: 50% 0; |
| animation: docdoe-restored-beams 12s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate; |
| } |
|
|
| .docdoe-hero-light-field { |
| z-index: 0; |
| background: |
| radial-gradient(ellipse 39% 62% at 50% -8%, rgba(255, 255, 255, 0.2), transparent 72%), |
| conic-gradient(from 214deg at 50% -4%, transparent 0deg 45deg, rgba(255, 255, 255, 0.038) 52deg, transparent 59deg 74deg, rgba(255, 255, 255, 0.045) 80deg, transparent 88deg 360deg); |
| mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.78) 47%, transparent 90%); |
| opacity: 0.94; |
| } |
|
|
| .docdoe-reactbits-lighting { |
| z-index: 0; |
| opacity: 0.9; |
| mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.95) 44%, transparent 86%); |
| mix-blend-mode: screen; |
| } |
|
|
| .docdoe-reactbits-rays { |
| position: absolute; |
| inset: 0; |
| } |
|
|
| .docdoe-reactbits-lighting .custom-rays canvas { |
| opacity: 1; |
| filter: brightness(1.46) contrast(1.07); |
| } |
|
|
| .docdoe-hero-vignette { |
| z-index: 1; |
| background: linear-gradient(180deg, transparent 25%, rgba(3, 3, 3, 0.12) 61%, var(--bg) 100%); |
| } |
|
|
| .docdoe-hero-grain { |
| z-index: 1; |
| opacity: 0.035; |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); |
| background-size: 180px 180px; |
| mix-blend-mode: overlay; |
| pointer-events: none; |
| } |
|
|
| .docdoe-hero-content { |
| z-index: 2; |
| animation: docdoe-restored-content 780ms cubic-bezier(0.165, 0.84, 0.44, 1) both; |
| } |
|
|
| .docdoe-hero-kicker { |
| display: inline-flex; |
| align-items: center; |
| gap: 0.65rem; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: 999px; |
| padding: 0.45rem 0.85rem 0.45rem 0.7rem; |
| background: rgba(255, 255, 255, 0.03); |
| color: rgba(242, 244, 241, 0.58); |
| font-size: 0.6875rem; |
| font-weight: 600; |
| letter-spacing: 0.16em; |
| line-height: 1; |
| text-transform: uppercase; |
| } |
|
|
| .docdoe-hero-kicker-dot { |
| width: 0.4rem; |
| height: 0.4rem; |
| border-radius: 999px; |
| background: #f2f4f1; |
| box-shadow: 0 0 0 3px rgba(242, 244, 241, 0.12); |
| animation: docdoe-live-pulse 2.4s ease-out infinite; |
| } |
|
|
| .docdoe-hero-signal { |
| transition: border-color 180ms ease, background-color 180ms ease, transform 160ms ease; |
| } |
|
|
| @media (hover: hover) and (pointer: fine) { |
| .docdoe-hero-signal:hover { |
| border-color: rgba(255, 255, 255, 0.16); |
| background: rgba(255, 255, 255, 0.045); |
| transform: translateY(-1px); |
| } |
| } |
|
|
| |
| .docdoe-board-stage { |
| position: relative; |
| overflow: hidden; |
| border: 1px solid rgba(255, 255, 255, 0.12); |
| border-radius: 1.25rem; |
| background: |
| linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 40%), |
| #080b0a; |
| box-shadow: |
| 0 50px 140px -40px rgba(0, 0, 0, 0.95), |
| 0 0 0 1px rgba(255, 255, 255, 0.03), |
| inset 0 1px 0 rgba(255, 255, 255, 0.06); |
| } |
|
|
| .docdoe-board-stage::before { |
| position: absolute; |
| inset: 0; |
| z-index: 0; |
| content: ""; |
| background: |
| radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 255, 255, 0.06), transparent 60%); |
| pointer-events: none; |
| } |
|
|
| .docdoe-board-stage-chrome { |
| position: relative; |
| z-index: 1; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 0.75rem; |
| border-bottom: 1px solid rgba(255, 255, 255, 0.08); |
| padding: 0.7rem 0.95rem; |
| background: rgba(0, 0, 0, 0.28); |
| } |
|
|
| .docdoe-board-live-dot { |
| width: 0.4rem; |
| height: 0.4rem; |
| border-radius: 999px; |
| background: #f2f4f1; |
| box-shadow: 0 0 0 3px rgba(242, 244, 241, 0.1); |
| animation: docdoe-live-pulse 2.4s ease-out infinite; |
| } |
|
|
| .docdoe-board-frame { |
| position: relative; |
| z-index: 1; |
| border-bottom: 1px solid rgba(255, 255, 255, 0.06); |
| } |
|
|
| .docdoe-board-stage-caption { |
| position: relative; |
| z-index: 1; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 1rem; |
| padding: 0.95rem 1rem 1.05rem; |
| } |
|
|
| @keyframes docdoe-live-pulse { |
| 0%, |
| 100% { |
| opacity: 1; |
| box-shadow: 0 0 0 3px rgba(242, 244, 241, 0.1); |
| } |
| 50% { |
| opacity: 0.55; |
| box-shadow: 0 0 0 5px rgba(242, 244, 241, 0.04); |
| } |
| } |
|
|
| |
| .docdoe-product-preview { |
| position: relative; |
| border-radius: 1.25rem; |
| padding: 1px; |
| background: |
| linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 40%, rgba(255, 255, 255, 0.08)); |
| box-shadow: |
| 0 48px 120px -40px rgba(0, 0, 0, 0.92), |
| 0 0 0 1px rgba(255, 255, 255, 0.04); |
| } |
|
|
| .docdoe-product-preview::before { |
| position: absolute; |
| inset: -20% -10% auto; |
| z-index: 0; |
| height: 60%; |
| content: ""; |
| background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.08), transparent 65%); |
| pointer-events: none; |
| } |
|
|
| .docdoe-product-preview-shell { |
| position: relative; |
| z-index: 1; |
| display: grid; |
| grid-template-columns: minmax(0, 148px) minmax(0, 1fr); |
| overflow: hidden; |
| min-height: 420px; |
| border-radius: calc(1.25rem - 1px); |
| background: #050505; |
| } |
|
|
| .docdoe-product-preview-sidebar { |
| display: flex; |
| flex-direction: column; |
| gap: 0.5rem; |
| border-right: 1px solid rgba(255, 255, 255, 0.08); |
| padding: 1rem 0.75rem 0.85rem; |
| background: #050505; |
| } |
|
|
| .docdoe-product-preview-main { |
| display: flex; |
| min-width: 0; |
| flex-direction: column; |
| background: |
| linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 30%), |
| #080808; |
| } |
|
|
| @media (max-width: 640px) { |
| .docdoe-product-preview-shell { |
| grid-template-columns: 1fr; |
| min-height: 0; |
| } |
|
|
| .docdoe-product-preview-sidebar { |
| display: none; |
| } |
| } |
|
|
| .docdoe-reactbits-logo.border-glow-card { |
| border: 0; |
| background: transparent; |
| box-shadow: none; |
| } |
|
|
| .docdoe-reactbits-logo.border-glow-card::after { |
| mix-blend-mode: normal; |
| } |
|
|
| .docdoe-reactbits-logo .border-glow-inner { |
| overflow: visible; |
| } |
|
|
| .docdoe-hero-mark { |
| display: flex; |
| width: clamp(4.25rem, 7vw, 5.75rem); |
| height: clamp(4.25rem, 7vw, 5.75rem); |
| align-items: center; |
| justify-content: center; |
| overflow: hidden; |
| border: 1px solid var(--border); |
| border-radius: clamp(1.125rem, 2vw, 1.45rem); |
| background: #050505; |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 42px rgba(0, 0, 0, 0.28); |
| } |
|
|
| .docdoe-hero-badge { |
| margin: 1.15rem 0 0; |
| border: 1px solid var(--border-soft); |
| border-radius: 999px; |
| padding: 0.55rem 0.95rem 0.5rem; |
| color: var(--muted); |
| background: var(--surface); |
| font-size: 0.6875rem; |
| font-weight: 600; |
| letter-spacing: 0.19em; |
| line-height: 1; |
| text-transform: uppercase; |
| } |
|
|
| .docdoe-hero-title { |
| max-width: 870px; |
| margin: clamp(1.35rem, 2vw, 1.85rem) 0 0; |
| color: var(--text); |
| font-size: clamp(2.75rem, 7.3vw, 6.55rem); |
| font-weight: 650; |
| letter-spacing: -0.065em; |
| line-height: 0.94; |
| text-wrap: balance; |
| } |
|
|
| .docdoe-hero-subtitle { |
| max-width: 650px; |
| margin: clamp(1.25rem, 2vw, 1.75rem) 0 0; |
| color: var(--muted); |
| font-size: clamp(0.96rem, 1.25vw, 1.125rem); |
| font-weight: 400; |
| line-height: 1.75; |
| text-wrap: pretty; |
| } |
|
|
| .docdoe-hero-actions { |
| display: flex; |
| justify-content: center; |
| gap: 0.75rem; |
| margin-top: clamp(1.8rem, 3vw, 2.6rem); |
| } |
|
|
| .docdoe-primary-action, |
| .docdoe-secondary-action { |
| display: inline-flex; |
| min-height: 3.35rem; |
| align-items: center; |
| justify-content: center; |
| gap: 0.7rem; |
| border-radius: 999px; |
| padding: 0 2rem; |
| font-size: 0.95rem; |
| font-weight: 600; |
| } |
|
|
| .docdoe-primary-action { |
| border: 1px solid rgba(255, 255, 255, 0.92); |
| color: #030303; |
| background: #ffffff; |
| transition: background-color 180ms ease, transform 180ms ease; |
| } |
|
|
| .docdoe-primary-action:hover { |
| background: #f1f1f1; |
| transform: translateY(-1px); |
| } |
|
|
| .docdoe-secondary-action { |
| border: 1px solid var(--border); |
| color: var(--text); |
| background: transparent; |
| transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease; |
| } |
|
|
| .docdoe-secondary-action:hover { |
| border-color: rgba(255, 255, 255, 0.2); |
| background: rgba(255, 255, 255, 0.025); |
| transform: translateY(-1px); |
| } |
|
|
| .docdoe-action-arrow { |
| transition: transform 180ms ease; |
| } |
|
|
| .docdoe-primary-action:hover .docdoe-action-arrow { |
| transform: translateX(2px); |
| } |
|
|
| @keyframes docdoe-restored-beams { |
| to { |
| transform: scaleX(1.045) translateX(0.15%); |
| opacity: 0.72; |
| } |
| } |
|
|
| @keyframes docdoe-restored-content { |
| from { |
| opacity: 0; |
| transform: translateY(16px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| @media (max-width: 767px) { |
| .docdoe-cinematic-hero { |
| min-height: min(100svh, 740px) !important; |
| padding-top: 6.8rem !important; |
| padding-bottom: 2.8rem !important; |
| } |
|
|
| .docdoe-cinematic-hero::before { |
| width: 126vw; |
| height: 19rem; |
| opacity: 0.86; |
| } |
|
|
| .docdoe-hero-light-field { |
| background: radial-gradient(ellipse 78% 50% at 50% -4%, rgba(255, 255, 255, 0.17), transparent 72%); |
| opacity: 0.88; |
| } |
|
|
| .docdoe-reactbits-lighting { |
| opacity: 0.8; |
| } |
|
|
| .docdoe-reactbits-lighting .custom-rays canvas { |
| filter: brightness(1.34) contrast(1.05); |
| } |
|
|
| .docdoe-reactbits-logo.border-glow-card::before, |
| .docdoe-reactbits-logo.border-glow-card::after, |
| .docdoe-reactbits-logo.border-glow-card > .edge-light { |
| display: none; |
| } |
|
|
| .docdoe-hero-title { |
| font-size: clamp(2.45rem, 11.5vw, 3.15rem); |
| line-height: 1.01; |
| } |
|
|
| .docdoe-hero-subtitle { |
| font-size: 0.92rem; |
| line-height: 1.65; |
| color: rgba(255, 255, 255, 0.54); |
| } |
|
|
| .docdoe-hero-actions { |
| width: 100%; |
| flex-direction: column; |
| gap: 0.75rem; |
| margin-top: 2.15rem; |
| } |
|
|
| .docdoe-primary-action, |
| .docdoe-secondary-action { |
| width: 100%; |
| min-height: 3.15rem; |
| } |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| .docdoe-hero-content, |
| .docdoe-hero-light-beams, |
| .docdoe-hero-kicker-dot, |
| .docdoe-board-live-dot { |
| animation: none; |
| } |
|
|
| .docdoe-primary-action, |
| .docdoe-secondary-action, |
| .docdoe-action-arrow, |
| .docdoe-hero-signal, |
| .docdoe-hero-secondary-cta { |
| transition: none; |
| } |
| } |
|
|
| |
| .docdoe-landing { |
| --dd-bg: #030303; |
| background: #030303 !important; |
| font-family: var(--font-docdoe-sans), ui-sans-serif, system-ui, sans-serif; |
| font-kerning: normal; |
| text-rendering: optimizeLegibility; |
| } |
|
|
| .docdoe-hero-title, |
| .docdoe-signal-title, |
| .docdoe-focus-title, |
| .docdoe-pricing-heading h2, |
| .docdoe-final-cta-card h2, |
| #faq h2 { |
| font-family: var(--font-docdoe-display), var(--font-docdoe-sans), ui-sans-serif, system-ui, sans-serif; |
| } |
|
|
| .docdoe-setup { |
| font-family: var(--font-docdoe-setup), ui-sans-serif, system-ui, sans-serif; |
| font-kerning: normal; |
| text-rendering: optimizeLegibility; |
| } |
|
|
| @keyframes docdoe-setup-signal { |
| 0%, |
| 100% { |
| opacity: 0.64; |
| transform: scale(0.92); |
| } |
|
|
| 50% { |
| opacity: 1; |
| transform: scale(1); |
| } |
| } |
|
|
| .docdoe-setup-signal-dot { |
| animation: docdoe-setup-signal 2.2s cubic-bezier(0.22, 1, 0.36, 1) infinite; |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| .docdoe-setup-signal-dot { |
| animation: none; |
| } |
| } |
|
|
| .docdoe-landing-atmosphere, |
| .docdoe-what-section, |
| .docdoe-story-section, |
| .docdoe-pricing-section, |
| .docdoe-final-cta-section, |
| .docdoe-footer { |
| background-color: #030303 !important; |
| color: #f8fafc; |
| } |
|
|
| .docdoe-what-section, |
| .docdoe-story-section, |
| .docdoe-pricing-section { |
| background-image: |
| radial-gradient(ellipse at 50% 36%, rgba(255, 255, 255, 0.035), transparent 43%), |
| linear-gradient(180deg, #030303, #030303) !important; |
| } |
|
|
| .docdoe-what-section::before, |
| .docdoe-story-section::before, |
| .docdoe-pricing-section::before, |
| .docdoe-what-section::after, |
| .docdoe-story-section::after, |
| .docdoe-pricing-section::after { |
| background: none !important; |
| } |
|
|
| .docdoe-what-depth, |
| .docdoe-what-grid, |
| .docdoe-what-fog, |
| .docdoe-what-horizon, |
| .docdoe-story-depth, |
| .docdoe-story-grid, |
| .docdoe-story-fog, |
| .docdoe-story-orbit-field, |
| .docdoe-pricing-depth, |
| .docdoe-pricing-grid-texture, |
| .docdoe-pricing-fog, |
| .docdoe-pricing-orbit, |
| .docdoe-pricing-particle, |
| .docdoe-pricing-card-glow, |
| .docdoe-pricing-popular-underglow { |
| opacity: 0 !important; |
| animation: none !important; |
| } |
|
|
| .docdoe-what-label, |
| .docdoe-story-label, |
| .docdoe-pricing-label, |
| .docdoe-final-label { |
| color: rgba(255, 255, 255, 0.58) !important; |
| text-shadow: none !important; |
| } |
|
|
| .docdoe-story-label::after, |
| .docdoe-pricing-label::after, |
| .docdoe-final-label::after { |
| background: rgba(255, 255, 255, 0.14) !important; |
| box-shadow: none !important; |
| } |
|
|
| .docdoe-what-title-highlight, |
| .docdoe-story-title-highlight, |
| .docdoe-story-title-highlight > span, |
| .docdoe-pricing-title-highlight, |
| .docdoe-final-title-highlight, |
| .docdoe-final-title-highlight > span { |
| color: #f8fafc !important; |
| background: none !important; |
| -webkit-text-fill-color: #f8fafc !important; |
| text-shadow: none !important; |
| } |
|
|
| .docdoe-intelligence-stage::before { |
| background: radial-gradient(ellipse, rgba(255, 255, 255, 0.085), transparent 68%) !important; |
| filter: blur(34px); |
| opacity: 0.55; |
| } |
|
|
| .docdoe-intelligence-stage::after { |
| background: radial-gradient(ellipse, rgba(255, 255, 255, 0.048), transparent 68%) !important; |
| opacity: 0.44; |
| } |
|
|
| .docdoe-what-core-blob { |
| background: radial-gradient(ellipse, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035) 42%, transparent 72%) !important; |
| opacity: 0.52; |
| filter: blur(72px); |
| } |
|
|
| .docdoe-what-ring-field span, |
| .docdoe-what-orbit, |
| .docdoe-what-core-ring-spin, |
| .docdoe-ai-core-ring { |
| border-color: rgba(255, 255, 255, 0.085) !important; |
| box-shadow: none !important; |
| } |
|
|
| .docdoe-what-axis-horizontal, |
| .docdoe-what-axis-vertical { |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.13), transparent) !important; |
| } |
|
|
| .docdoe-intelligence-stage path { |
| stroke: rgba(255, 255, 255, 0.2) !important; |
| } |
|
|
| .docdoe-ai-core::before { |
| background: radial-gradient(circle, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 34%, transparent 72%) !important; |
| } |
|
|
| .docdoe-ai-core-glass { |
| background: |
| radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.18), transparent 20%), |
| radial-gradient(circle at center, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025) 48%, rgba(3, 3, 3, 0.48) 72%) !important; |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.16), |
| inset 0 -28px 54px rgba(0, 0, 0, 0.42), |
| 0 18px 56px rgba(0, 0, 0, 0.4) !important; |
| } |
|
|
| .docdoe-ai-core-mark { |
| filter: grayscale(1) brightness(2); |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.12), |
| 0 0 24px rgba(255, 255, 255, 0.09) !important; |
| } |
|
|
| .docdoe-ai-core-text { |
| text-shadow: none !important; |
| } |
|
|
| .docdoe-feature-node { |
| border-color: rgba(255, 255, 255, 0.11) !important; |
| background: |
| radial-gradient(ellipse at var(--node-light-x, 50%) -10%, rgba(255, 255, 255, 0.07), transparent 42%), |
| linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)), |
| #080808 !important; |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.05), |
| 0 18px 44px rgba(0, 0, 0, 0.3) !important; |
| } |
|
|
| .docdoe-feature-node::before { |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent) !important; |
| } |
|
|
| .docdoe-feature-icon, |
| .docdoe-story-point-icon, |
| .docdoe-flow-node { |
| border-color: rgba(255, 255, 255, 0.14) !important; |
| color: rgba(255, 255, 255, 0.88) !important; |
| background: |
| radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.12), transparent 42%), |
| rgba(255, 255, 255, 0.035) !important; |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important; |
| } |
|
|
| .docdoe-story-headline-glow, |
| .docdoe-flow-timeline-glow, |
| .docdoe-flow-ambient { |
| background: radial-gradient(ellipse, rgba(255, 255, 255, 0.045), transparent 70%) !important; |
| opacity: 0.45; |
| } |
|
|
| .docdoe-flow-line-progress { |
| background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important; |
| box-shadow: none !important; |
| } |
|
|
| .docdoe-flow-step { |
| border: 1px solid rgba(255, 255, 255, 0.07); |
| background: |
| radial-gradient(ellipse at 15% 0%, rgba(255, 255, 255, 0.05), transparent 44%), |
| rgba(255, 255, 255, 0.026); |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); |
| } |
|
|
| .docdoe-flow-step::before { |
| background: linear-gradient(90deg, rgba(255, 255, 255, 0.17), transparent) !important; |
| box-shadow: none !important; |
| } |
|
|
| .docdoe-flow-number { |
| color: rgba(255, 255, 255, 0.52) !important; |
| text-shadow: none !important; |
| } |
|
|
| .docdoe-story-cta-strip { |
| border-color: rgba(255, 255, 255, 0.09) !important; |
| background: rgba(255, 255, 255, 0.026) !important; |
| box-shadow: none !important; |
| } |
|
|
| .docdoe-story-cta-strip::before { |
| background: rgba(255, 255, 255, 0.12) !important; |
| box-shadow: none !important; |
| } |
|
|
| .docdoe-story-cta-orb { |
| background: rgba(255, 255, 255, 0.05) !important; |
| box-shadow: none !important; |
| } |
|
|
| .docdoe-story-cta-button { |
| border-color: rgba(255, 255, 255, 0.22) !important; |
| color: #111 !important; |
| background: #fff !important; |
| box-shadow: none !important; |
| } |
|
|
| .docdoe-pricing-card { |
| height: 100%; |
| min-height: 502px; |
| border-color: rgba(255, 255, 255, 0.1) !important; |
| background: |
| radial-gradient(ellipse at 24% 0%, rgba(255, 255, 255, 0.065), transparent 44%), |
| linear-gradient(180deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.012)), |
| #070707 !important; |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.06), |
| 0 20px 58px rgba(0, 0, 0, 0.28) !important; |
| } |
|
|
| .docdoe-pricing-card::before, |
| .docdoe-pricing-card::after { |
| background: none !important; |
| } |
|
|
| .docdoe-pricing-card-popular, |
| .docdoe-pricing-card-premium { |
| border-color: rgba(255, 255, 255, 0.15) !important; |
| } |
|
|
| .docdoe-pricing-card:hover { |
| border-color: rgba(255, 255, 255, 0.18) !important; |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.08), |
| 0 24px 64px rgba(0, 0, 0, 0.34) !important; |
| } |
|
|
| .docdoe-pricing-badge-popular, |
| .docdoe-pricing-badge-premium { |
| border-color: transparent !important; |
| color: #101010 !important; |
| background: #f8fafc !important; |
| box-shadow: none !important; |
| } |
|
|
| .docdoe-pricing-plan-icon, |
| .docdoe-pricing-card-premium .docdoe-pricing-plan-icon { |
| border-color: rgba(255, 255, 255, 0.13) !important; |
| color: rgba(255, 255, 255, 0.82) !important; |
| background: rgba(255, 255, 255, 0.035) !important; |
| box-shadow: none !important; |
| } |
|
|
| .docdoe-pricing-price span, |
| .docdoe-pricing-card-premium .docdoe-pricing-price span { |
| color: #f8fafc !important; |
| text-shadow: none !important; |
| } |
|
|
| .docdoe-pricing-check, |
| .docdoe-pricing-card-premium .docdoe-pricing-check { |
| color: #080808 !important; |
| background: #f8fafc !important; |
| box-shadow: none !important; |
| } |
|
|
| .docdoe-pricing-button-starter, |
| .docdoe-pricing-button-teacher { |
| border-color: rgba(255, 255, 255, 0.2) !important; |
| background: rgba(255, 255, 255, 0.035) !important; |
| box-shadow: none !important; |
| } |
|
|
| .docdoe-pricing-button-popular, |
| .docdoe-pricing-button-premium { |
| border-color: transparent !important; |
| color: #101010 !important; |
| background: #f8fafc !important; |
| box-shadow: none !important; |
| } |
|
|
| .docdoe-pricing-trust { |
| border-color: rgba(255, 255, 255, 0.11) !important; |
| background: rgba(255, 255, 255, 0.024) !important; |
| box-shadow: none !important; |
| } |
|
|
| .docdoe-pricing-trust span + span::before, |
| .docdoe-pricing-trust svg { |
| color: rgba(255, 255, 255, 0.6) !important; |
| background: rgba(255, 255, 255, 0.4) !important; |
| box-shadow: none !important; |
| } |
|
|
| .docdoe-faq-item { |
| border-color: rgba(255, 255, 255, 0.1) !important; |
| background: |
| linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018)), |
| #070707 !important; |
| box-shadow: none !important; |
| } |
|
|
| .docdoe-faq-item:hover, |
| .docdoe-faq-item[open], |
| .docdoe-faq-item.docdoe-faq-item-open { |
| border-color: rgba(255, 255, 255, 0.17) !important; |
| box-shadow: none !important; |
| } |
|
|
| .docdoe-faq-item.docdoe-faq-item-open { |
| border-left-color: rgba(59, 130, 246, 0.42) !important; |
| } |
|
|
| .docdoe-final-cta-section { |
| background-image: linear-gradient(180deg, #030303, #030303) !important; |
| } |
|
|
| .docdoe-final-cta-card { |
| border-color: rgba(255, 255, 255, 0.11) !important; |
| background: |
| radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.07), transparent 43%), |
| radial-gradient(ellipse at 50% 104%, rgba(59, 130, 246, 0.045), transparent 44%), |
| linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)), |
| #070707 !important; |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.06), |
| 0 26px 74px rgba(0, 0, 0, 0.28) !important; |
| } |
|
|
| .docdoe-final-cta-card::before, |
| .docdoe-final-cta-card::after, |
| .docdoe-final-cta-orbit, |
| .docdoe-final-cta-horizon { |
| border-color: rgba(255, 255, 255, 0.07) !important; |
| background: none !important; |
| box-shadow: none !important; |
| } |
|
|
| .docdoe-final-cta-spotlight { |
| background: radial-gradient(ellipse, rgba(59, 130, 246, 0.1), transparent 70%) !important; |
| opacity: 0.42; |
| } |
|
|
| .docdoe-final-cta-orb { |
| border-color: rgba(255, 255, 255, 0.13) !important; |
| background: rgba(255, 255, 255, 0.045) !important; |
| box-shadow: none !important; |
| } |
|
|
| .docdoe-final-cta-button { |
| border-color: transparent !important; |
| color: #101010 !important; |
| background: #f8fafc !important; |
| box-shadow: none !important; |
| } |
|
|
| .docdoe-footer { |
| border-top: 1px solid rgba(255, 255, 255, 0.06); |
| background: #030303; |
| padding-bottom: 4rem !important; |
| } |
|
|
| .docdoe-footer::before { |
| display: none; |
| } |
|
|
| .docdoe-footer .docdoe-logo-mark { |
| filter: brightness(1.2); |
| box-shadow: 0 0 20px rgba(255, 255, 255, 0.05); |
| } |
|
|
| .docdoe-footer-email { |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| color: rgba(255, 255, 255, 0.4); |
| background: rgba(255, 255, 255, 0.02); |
| box-shadow: none; |
| } |
|
|
| .docdoe-footer-email:focus-within { |
| border-color: rgba(255, 255, 255, 0.2) !important; |
| box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2) !important; |
| } |
|
|
| .docdoe-footer-email button { |
| border-color: transparent !important; |
| color: #101010 !important; |
| background: #f8fafc !important; |
| box-shadow: none !important; |
| } |
|
|
| @media (max-width: 767px) { |
| .docdoe-pricing-card { |
| height: auto; |
| min-height: 522px; |
| } |
|
|
| .docdoe-flow-step { |
| border-radius: 20px; |
| } |
| } |
|
|
| |
| .docdoe-focus-section { |
| min-height: auto; |
| padding-top: clamp(5.75rem, 9vw, 7.75rem) !important; |
| padding-bottom: clamp(5.75rem, 9vw, 7.75rem) !important; |
| } |
|
|
| .docdoe-focus-ambient { |
| position: absolute; |
| inset: 12% 0 auto 50%; |
| width: min(55rem, 86vw); |
| height: 33rem; |
| pointer-events: none; |
| background: |
| radial-gradient(ellipse at 72% 42%, rgba(255, 255, 255, 0.045), transparent 46%), |
| radial-gradient(ellipse at 74% 45%, rgba(59, 130, 246, 0.038), transparent 58%); |
| filter: blur(30px); |
| transform: translateX(-50%); |
| } |
|
|
| .docdoe-focus-layout { |
| display: grid; |
| grid-template-columns: minmax(19rem, 0.92fr) minmax(23rem, 1fr); |
| align-items: center; |
| gap: clamp(3.5rem, 7.5vw, 6.5rem); |
| } |
|
|
| .docdoe-focus-copy { |
| min-width: 0; |
| } |
|
|
| .docdoe-focus-kicker { |
| display: flex; |
| align-items: center; |
| gap: 0.9rem; |
| margin: 0; |
| color: rgba(255, 255, 255, 0.5); |
| font-size: 0.7rem; |
| font-weight: 650; |
| letter-spacing: 0.24em; |
| text-transform: uppercase; |
| } |
|
|
| .docdoe-focus-kicker::after { |
| width: 3.25rem; |
| height: 1px; |
| content: ""; |
| background: rgba(255, 255, 255, 0.16); |
| } |
|
|
| .docdoe-focus-title { |
| max-width: 11.5ch; |
| margin: clamp(1.4rem, 2.2vw, 1.8rem) 0 0; |
| color: #f8fafc; |
| font-size: clamp(2.8rem, 5vw, 4.25rem); |
| font-weight: 700; |
| letter-spacing: -0.058em; |
| line-height: 0.99; |
| text-wrap: balance; |
| } |
|
|
| .docdoe-focus-title-line { |
| display: block !important; |
| } |
|
|
| .docdoe-focus-title-line-muted { |
| margin-top: 0.32em; |
| color: rgba(248, 250, 252, 0.82); |
| } |
|
|
| .docdoe-focus-body { |
| max-width: 30rem; |
| margin: clamp(1.6rem, 3vw, 2.1rem) 0 0; |
| color: rgba(248, 250, 252, 0.62); |
| font-size: clamp(1rem, 1.25vw, 1.08rem); |
| font-weight: 420; |
| letter-spacing: -0.014em; |
| line-height: 1.82; |
| } |
|
|
| .docdoe-focus-proof { |
| max-width: 31.5rem; |
| margin: clamp(2.25rem, 4vw, 3.1rem) 0 0; |
| border-top: 1px solid rgba(255, 255, 255, 0.1); |
| } |
|
|
| .docdoe-focus-proof-row { |
| display: grid; |
| grid-template-columns: 8.35rem minmax(0, 1fr); |
| gap: 1.1rem; |
| padding: 1rem 0; |
| border-bottom: 1px solid rgba(255, 255, 255, 0.07); |
| } |
|
|
| .docdoe-focus-proof-row dt { |
| color: rgba(248, 250, 252, 0.82); |
| font-size: 0.77rem; |
| font-weight: 650; |
| letter-spacing: 0.025em; |
| } |
|
|
| .docdoe-focus-proof-row dd { |
| margin: 0; |
| color: rgba(248, 250, 252, 0.49); |
| font-size: 0.87rem; |
| font-weight: 430; |
| line-height: 1.55; |
| } |
|
|
| .docdoe-focus-console { |
| position: relative; |
| min-width: 0; |
| overflow: hidden; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: 1.65rem; |
| padding: clamp(1.2rem, 2.8vw, 1.7rem); |
| background: |
| radial-gradient(ellipse at 86% 0%, rgba(255, 255, 255, 0.045), transparent 36%), |
| linear-gradient(155deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.014)), |
| #070707; |
| box-shadow: |
| inset 0 1px 0 rgba(255, 255, 255, 0.055), |
| 0 2.4rem 5.6rem rgba(0, 0, 0, 0.36); |
| } |
|
|
| .docdoe-focus-console::before { |
| position: absolute; |
| top: 0; |
| left: 2.2rem; |
| right: 2.2rem; |
| height: 1px; |
| content: ""; |
| background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.34), rgba(255, 255, 255, 0.18), transparent); |
| } |
|
|
| .docdoe-focus-console-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 1rem; |
| padding: 0 0 1.25rem; |
| } |
|
|
| .docdoe-focus-console-header p { |
| margin: 0 0 0.45rem; |
| color: rgba(255, 255, 255, 0.4); |
| font-size: 0.65rem; |
| font-weight: 650; |
| letter-spacing: 0.24em; |
| text-transform: uppercase; |
| } |
|
|
| .docdoe-focus-console-header h3 { |
| margin: 0; |
| color: rgba(248, 250, 252, 0.94); |
| font-size: clamp(1.15rem, 2vw, 1.32rem); |
| font-weight: 620; |
| letter-spacing: -0.035em; |
| } |
|
|
| .docdoe-focus-status { |
| display: inline-flex; |
| min-height: 2rem; |
| align-items: center; |
| gap: 0.55rem; |
| white-space: nowrap; |
| border: 1px solid rgba(255, 255, 255, 0.09); |
| border-radius: 999px; |
| padding: 0 0.7rem; |
| color: rgba(248, 250, 252, 0.6); |
| font-size: 0.72rem; |
| font-weight: 550; |
| } |
|
|
| .docdoe-focus-status span, |
| .docdoe-focus-active-dot, |
| .docdoe-focus-footer-dot { |
| display: inline-block; |
| width: 0.42rem; |
| height: 0.42rem; |
| border-radius: 50%; |
| background: #3b82f6; |
| box-shadow: 0 0 0.65rem rgba(59, 130, 246, 0.45); |
| } |
|
|
| .docdoe-focus-sources { |
| display: flex; |
| flex-wrap: wrap; |
| align-items: center; |
| gap: 0.55rem 0; |
| padding: 0.9rem 0; |
| border-top: 1px solid rgba(255, 255, 255, 0.07); |
| border-bottom: 1px solid rgba(255, 255, 255, 0.07); |
| } |
|
|
| .docdoe-focus-sources > span { |
| margin-right: auto; |
| color: rgba(255, 255, 255, 0.37); |
| font-size: 0.66rem; |
| font-weight: 650; |
| letter-spacing: 0.18em; |
| text-transform: uppercase; |
| } |
|
|
| .docdoe-focus-sources p { |
| margin: 0; |
| padding: 0 0.68rem; |
| border-right: 1px solid rgba(255, 255, 255, 0.1); |
| color: rgba(248, 250, 252, 0.55); |
| font-size: 0.76rem; |
| line-height: 1; |
| } |
|
|
| .docdoe-focus-sources p:last-child { |
| padding-right: 0; |
| border-right: 0; |
| } |
|
|
| .docdoe-focus-path { |
| position: relative; |
| padding: 0.95rem 0 0; |
| } |
|
|
| .docdoe-focus-rows { |
| display: grid; |
| margin: 0; |
| padding: 0; |
| list-style: none; |
| } |
|
|
| .docdoe-focus-rail { |
| position: absolute; |
| left: 3.68rem; |
| top: 2.45rem; |
| bottom: 2.4rem; |
| width: 1px; |
| background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(59, 130, 246, 0.38) 58%, rgba(255, 255, 255, 0.08)); |
| transform-origin: top; |
| } |
|
|
| .docdoe-focus-row { |
| position: relative; |
| display: grid; |
| grid-template-columns: 2.3rem 2.8rem minmax(0, 1fr) 0.65rem; |
| align-items: center; |
| gap: 0.75rem; |
| min-height: 5.75rem; |
| padding: 0.72rem 0.75rem 0.72rem 0; |
| border-bottom: 1px solid rgba(255, 255, 255, 0.055); |
| } |
|
|
| .docdoe-focus-row-active { |
| border-radius: 1.1rem; |
| background: radial-gradient(ellipse at 82% 50%, rgba(59, 130, 246, 0.06), transparent 58%); |
| } |
|
|
| .docdoe-focus-number { |
| align-self: start; |
| padding-top: 0.95rem; |
| color: rgba(248, 250, 252, 0.38); |
| font-size: 0.73rem; |
| font-weight: 650; |
| font-variant-numeric: tabular-nums; |
| letter-spacing: 0.14em; |
| } |
|
|
| .docdoe-focus-row-icon { |
| position: relative; |
| z-index: 1; |
| display: grid; |
| width: 2.8rem; |
| height: 2.8rem; |
| place-items: center; |
| border: 1px solid rgba(255, 255, 255, 0.12); |
| border-radius: 50%; |
| color: rgba(248, 250, 252, 0.75); |
| background: #0b0b0b; |
| } |
|
|
| .docdoe-focus-row-active .docdoe-focus-row-icon { |
| border-color: rgba(59, 130, 246, 0.26); |
| } |
|
|
| .docdoe-focus-row-copy { |
| display: grid; |
| min-width: 0; |
| gap: 0.25rem; |
| } |
|
|
| .docdoe-focus-row-label { |
| color: rgba(248, 250, 252, 0.37); |
| font-size: 0.62rem; |
| font-weight: 650; |
| letter-spacing: 0.2em; |
| text-transform: uppercase; |
| } |
|
|
| .docdoe-focus-row-copy strong { |
| color: rgba(248, 250, 252, 0.9); |
| font-size: clamp(0.98rem, 1.35vw, 1.06rem); |
| font-weight: 600; |
| letter-spacing: -0.025em; |
| } |
|
|
| .docdoe-focus-row-copy > span:last-child { |
| max-width: 29ch; |
| color: rgba(248, 250, 252, 0.5); |
| font-size: 0.78rem; |
| font-weight: 420; |
| line-height: 1.52; |
| } |
|
|
| .docdoe-focus-console-footer { |
| display: flex; |
| align-items: center; |
| gap: 0.7rem; |
| margin-top: 1.15rem; |
| padding: 1.05rem 0.1rem 0.1rem; |
| color: rgba(255, 255, 255, 0.39); |
| font-size: 0.72rem; |
| } |
|
|
| .docdoe-focus-console-footer strong { |
| margin-left: auto; |
| color: rgba(248, 250, 252, 0.78); |
| font-size: 0.78rem; |
| font-weight: 560; |
| } |
|
|
| .docdoe-focus-footer-dot { |
| width: 0.35rem; |
| height: 0.35rem; |
| } |
|
|
| @media (max-width: 1023px) { |
| .docdoe-focus-layout { |
| grid-template-columns: 1fr; |
| gap: clamp(2.9rem, 8vw, 4.25rem); |
| } |
|
|
| .docdoe-focus-title { |
| max-width: 13.2ch; |
| } |
|
|
| .docdoe-focus-body, |
| .docdoe-focus-proof { |
| max-width: 37rem; |
| } |
|
|
| .docdoe-focus-console { |
| max-width: 42rem; |
| } |
| } |
|
|
| @media (max-width: 639px) { |
| .docdoe-focus-section { |
| padding-top: 4.6rem !important; |
| padding-bottom: 4.75rem !important; |
| } |
|
|
| .docdoe-focus-title { |
| max-width: 100%; |
| font-size: clamp(2.35rem, 11.6vw, 2.8rem); |
| line-height: 1.02; |
| } |
|
|
| .docdoe-focus-body { |
| line-height: 1.7; |
| } |
|
|
| .docdoe-focus-proof-row { |
| grid-template-columns: 1fr; |
| gap: 0.42rem; |
| padding: 0.9rem 0; |
| } |
|
|
| .docdoe-focus-console { |
| border-radius: 1.3rem; |
| padding: 1.05rem 0.95rem 0.95rem; |
| } |
|
|
| .docdoe-focus-console-header { |
| align-items: flex-start; |
| } |
|
|
| .docdoe-focus-status { |
| min-height: 1.8rem; |
| padding: 0 0.58rem; |
| font-size: 0.67rem; |
| } |
|
|
| .docdoe-focus-sources > span { |
| width: 100%; |
| margin-bottom: 0.35rem; |
| } |
|
|
| .docdoe-focus-sources p:first-of-type { |
| padding-left: 0; |
| } |
|
|
| .docdoe-focus-rail { |
| left: 2.63rem; |
| } |
|
|
| .docdoe-focus-row { |
| grid-template-columns: 1.55rem 2.35rem minmax(0, 1fr) 0.5rem; |
| gap: 0.48rem; |
| min-height: 5.85rem; |
| padding-right: 0.25rem; |
| } |
|
|
| .docdoe-focus-number { |
| font-size: 0.64rem; |
| } |
|
|
| .docdoe-focus-row-icon { |
| width: 2.35rem; |
| height: 2.35rem; |
| } |
| } |
|
|
| |
| @keyframes docdoe-study-signal { |
| 0%, |
| 14% { |
| opacity: 0.36; |
| transform: scale(0.86); |
| } |
| 22%, |
| 40% { |
| opacity: 1; |
| transform: scale(1); |
| } |
| 54%, |
| 100% { |
| opacity: 0.36; |
| transform: scale(0.86); |
| } |
| } |
|
|
| .docdoe-hero-proof { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: clamp(0.95rem, 2.8vw, 1.45rem); |
| margin: clamp(2.15rem, 4vh, 2.7rem) 0 0; |
| padding: 0; |
| color: rgba(248, 250, 252, 0.43); |
| font-size: 0.7rem; |
| font-weight: 570; |
| letter-spacing: 0.09em; |
| list-style: none; |
| text-transform: uppercase; |
| } |
|
|
| .docdoe-hero-proof li { |
| position: relative; |
| display: inline-flex; |
| align-items: center; |
| gap: 0.5rem; |
| white-space: nowrap; |
| } |
|
|
| .docdoe-hero-proof li:not(:last-child)::after { |
| width: clamp(1.05rem, 3.2vw, 2rem); |
| height: 1px; |
| margin-left: clamp(0.4rem, 1.5vw, 0.75rem); |
| content: ""; |
| background: linear-gradient(90deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.045)); |
| } |
|
|
| .docdoe-hero-proof-dot { |
| display: inline-block; |
| width: 0.35rem; |
| height: 0.35rem; |
| border-radius: 50%; |
| background: #3b82f6; |
| animation: docdoe-study-signal 3.15s cubic-bezier(0.22, 1, 0.36, 1) infinite; |
| } |
|
|
| .docdoe-signal-section { |
| scroll-margin-top: 5.75rem; |
| padding-top: clamp(5.8rem, 9vw, 7.4rem); |
| padding-bottom: clamp(5.8rem, 9vw, 7.2rem); |
| } |
|
|
| .docdoe-signal-layout { |
| display: grid; |
| grid-template-columns: minmax(18rem, 0.82fr) minmax(23rem, 1fr); |
| align-items: center; |
| gap: clamp(3.75rem, 8vw, 7.25rem); |
| } |
|
|
| .docdoe-signal-copy { |
| min-width: 0; |
| } |
|
|
| .docdoe-signal-kicker { |
| display: flex; |
| align-items: center; |
| gap: 0.85rem; |
| margin: 0; |
| color: rgba(248, 250, 252, 0.48); |
| font-size: 0.67rem; |
| font-weight: 650; |
| letter-spacing: 0.23em; |
| text-transform: uppercase; |
| } |
|
|
| .docdoe-signal-kicker::after { |
| display: inline-block; |
| width: 3.15rem; |
| height: 1px; |
| content: ""; |
| background: rgba(248, 250, 252, 0.16); |
| } |
|
|
| .docdoe-signal-title { |
| max-width: 10.5ch; |
| margin: clamp(1.4rem, 2vw, 1.7rem) 0 0; |
| color: #f8fafc; |
| font-size: clamp(2.7rem, 5.25vw, 4.35rem); |
| font-weight: 700; |
| letter-spacing: -0.06em; |
| line-height: 0.98; |
| text-wrap: balance; |
| } |
|
|
| .docdoe-signal-body { |
| max-width: 29rem; |
| margin: clamp(1.55rem, 3vw, 2rem) 0 0; |
| color: rgba(248, 250, 252, 0.62); |
| font-size: clamp(0.98rem, 1.25vw, 1.06rem); |
| font-weight: 420; |
| letter-spacing: -0.015em; |
| line-height: 1.8; |
| } |
|
|
| .docdoe-signal-terms { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.72rem 1.3rem; |
| margin-top: clamp(2rem, 3.8vw, 2.65rem); |
| color: rgba(248, 250, 252, 0.47); |
| font-size: 0.72rem; |
| font-weight: 570; |
| letter-spacing: 0.07em; |
| text-transform: uppercase; |
| } |
|
|
| .docdoe-signal-terms span + span::before { |
| display: inline-block; |
| width: 0.23rem; |
| height: 0.23rem; |
| margin-right: 1.3rem; |
| vertical-align: middle; |
| content: ""; |
| border-radius: 50%; |
| background: rgba(248, 250, 252, 0.32); |
| } |
|
|
| .docdoe-signal-board { |
| position: relative; |
| min-width: 0; |
| margin: 0; |
| padding: 1.15rem 0 0; |
| border-top: 1px solid rgba(248, 250, 252, 0.13); |
| } |
|
|
| .docdoe-signal-board::before { |
| position: absolute; |
| top: -1px; |
| left: 0; |
| width: min(8.4rem, 30%); |
| height: 1px; |
| content: ""; |
| background: rgba(59, 130, 246, 0.42); |
| } |
|
|
| .docdoe-signal-board-header { |
| display: flex; |
| align-items: end; |
| justify-content: space-between; |
| gap: 1rem; |
| padding-bottom: 1.4rem; |
| } |
|
|
| .docdoe-signal-board-header p { |
| margin: 0 0 0.45rem; |
| color: rgba(248, 250, 252, 0.41); |
| font-size: 0.64rem; |
| font-weight: 650; |
| letter-spacing: 0.22em; |
| text-transform: uppercase; |
| } |
|
|
| .docdoe-signal-board-header h3 { |
| margin: 0; |
| color: rgba(248, 250, 252, 0.92); |
| font-size: clamp(1.18rem, 2vw, 1.38rem); |
| font-weight: 620; |
| letter-spacing: -0.035em; |
| } |
|
|
| .docdoe-signal-status { |
| display: inline-flex; |
| align-items: center; |
| gap: 0.48rem; |
| border: 1px solid rgba(248, 250, 252, 0.09); |
| border-radius: 999px; |
| padding: 0.52rem 0.7rem; |
| color: rgba(248, 250, 252, 0.58); |
| font-size: 0.7rem; |
| font-weight: 560; |
| white-space: nowrap; |
| } |
|
|
| .docdoe-signal-status i { |
| width: 0.37rem; |
| height: 0.37rem; |
| border-radius: 50%; |
| background: #3b82f6; |
| box-shadow: 0 0 0.55rem rgba(59, 130, 246, 0.38); |
| } |
|
|
| .docdoe-signal-inputs { |
| display: flex; |
| gap: clamp(1.05rem, 3vw, 1.7rem); |
| padding: 0.82rem 0 0.88rem; |
| border-block: 1px solid rgba(248, 250, 252, 0.065); |
| color: rgba(248, 250, 252, 0.43); |
| font-size: 0.74rem; |
| } |
|
|
| .docdoe-signal-inputs span { |
| position: relative; |
| } |
|
|
| .docdoe-signal-inputs span + span::before { |
| position: absolute; |
| top: 50%; |
| left: calc(clamp(1.05rem, 3vw, 1.7rem) / -2); |
| width: 1px; |
| height: 0.7rem; |
| content: ""; |
| background: rgba(248, 250, 252, 0.1); |
| transform: translateY(-50%); |
| } |
|
|
| .docdoe-signal-rows { |
| margin: 0; |
| padding: 0; |
| list-style: none; |
| } |
|
|
| .docdoe-signal-row { |
| display: grid; |
| grid-template-columns: 2.25rem minmax(0, 1fr) auto; |
| align-items: center; |
| gap: clamp(0.75rem, 2vw, 1.15rem); |
| min-height: 5.7rem; |
| border-bottom: 1px solid rgba(248, 250, 252, 0.065); |
| } |
|
|
| .docdoe-signal-rank { |
| color: rgba(248, 250, 252, 0.37); |
| font-size: 0.67rem; |
| font-weight: 650; |
| font-variant-numeric: tabular-nums; |
| letter-spacing: 0.2em; |
| } |
|
|
| .docdoe-signal-detail { |
| display: grid; |
| min-width: 0; |
| gap: 0.28rem; |
| } |
|
|
| .docdoe-signal-detail > span { |
| color: rgba(248, 250, 252, 0.41); |
| font-size: 0.64rem; |
| font-weight: 650; |
| letter-spacing: 0.18em; |
| text-transform: uppercase; |
| } |
|
|
| .docdoe-signal-detail strong { |
| color: rgba(248, 250, 252, 0.87); |
| font-size: clamp(0.93rem, 1.35vw, 1.02rem); |
| font-weight: 590; |
| letter-spacing: -0.02em; |
| } |
|
|
| .docdoe-signal-meter { |
| width: min(13rem, 100%); |
| height: 1px; |
| margin-top: 0.36rem; |
| background: rgba(248, 250, 252, 0.1); |
| } |
|
|
| .docdoe-signal-meter i { |
| display: block; |
| height: 1px; |
| background: rgba(248, 250, 252, 0.42); |
| will-change: transform, opacity; |
| } |
|
|
| .docdoe-signal-row-featured .docdoe-signal-meter i { |
| background: rgba(59, 130, 246, 0.7); |
| } |
|
|
| .docdoe-signal-result { |
| display: grid; |
| justify-items: end; |
| gap: 0.28rem; |
| color: rgba(248, 250, 252, 0.47); |
| font-size: 0.68rem; |
| } |
|
|
| .docdoe-signal-result strong { |
| color: rgba(248, 250, 252, 0.72); |
| font-size: 0.75rem; |
| font-variant-numeric: tabular-nums; |
| } |
|
|
| .docdoe-signal-row-featured .docdoe-signal-result span { |
| color: rgba(59, 130, 246, 0.88); |
| } |
|
|
| .docdoe-signal-board figcaption { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 0.75rem; |
| padding-top: 1rem; |
| color: rgba(248, 250, 252, 0.38); |
| font-size: 0.68rem; |
| } |
|
|
| .docdoe-signal-board figcaption strong { |
| display: inline-flex; |
| align-items: center; |
| gap: 0.5rem; |
| color: rgba(248, 250, 252, 0.68); |
| font-weight: 570; |
| } |
|
|
| .docdoe-signal-board figcaption strong::before { |
| width: 0.36rem; |
| height: 0.36rem; |
| content: ""; |
| border-radius: 50%; |
| background: #3b82f6; |
| } |
|
|
| .docdoe-locked-pricing { |
| scroll-margin-top: 5.75rem; |
| padding-top: clamp(4.75rem, 6.6vw, 5.8rem); |
| padding-bottom: clamp(5.1rem, 7vw, 6.4rem); |
| } |
|
|
| .docdoe-locked-pricing, |
| .docdoe-locked-pricing * { |
| overflow-anchor: none; |
| } |
|
|
| .docdoe-pricing-heading { |
| display: grid; |
| grid-template-columns: minmax(21rem, 1fr) auto; |
| grid-template-areas: |
| "label controls" |
| "title controls" |
| "copy controls"; |
| align-items: end; |
| column-gap: clamp(3rem, 8vw, 7rem); |
| row-gap: 0; |
| text-align: left; |
| } |
|
|
| .docdoe-pricing-heading .docdoe-pricing-label { |
| grid-area: label; |
| margin: 0 0 1rem; |
| color: rgba(248, 250, 252, 0.48) !important; |
| font-size: 0.68rem; |
| font-weight: 650; |
| letter-spacing: 0.23em; |
| text-transform: uppercase; |
| } |
|
|
| .docdoe-pricing-heading .docdoe-pricing-label::after { |
| display: none; |
| } |
|
|
| .docdoe-pricing-heading h2 { |
| grid-area: title; |
| margin: 0; |
| color: #f8fafc; |
| font-size: clamp(2.7rem, 5.25vw, 4.25rem); |
| font-weight: 700; |
| letter-spacing: -0.06em; |
| line-height: 0.98; |
| } |
|
|
| .docdoe-pricing-heading > p:not(.docdoe-pricing-label) { |
| grid-area: copy; |
| max-width: 32rem; |
| margin: 1.45rem 0 0; |
| color: rgba(248, 250, 252, 0.58); |
| font-size: clamp(0.98rem, 1.25vw, 1.06rem); |
| line-height: 1.72; |
| } |
|
|
| .docdoe-billing-controls { |
| grid-area: controls; |
| display: grid; |
| gap: 0.8rem; |
| justify-items: end; |
| padding-bottom: 0.25rem; |
| } |
|
|
| .docdoe-billing-toggle { |
| position: relative; |
| display: inline-flex; |
| gap: 0.3rem; |
| border: 1px solid rgba(248, 250, 252, 0.1); |
| border-radius: 999px; |
| padding: 0.3rem; |
| background: #080808; |
| } |
|
|
| .docdoe-billing-toggle button { |
| position: relative; |
| isolation: isolate; |
| display: inline-flex; |
| min-height: 2.8rem; |
| align-items: center; |
| gap: 0.55rem; |
| border: 0; |
| border-radius: 999px; |
| padding: 0 1rem; |
| color: rgba(248, 250, 252, 0.53); |
| font: inherit; |
| font-size: 0.86rem; |
| font-weight: 580; |
| background: transparent; |
| cursor: pointer; |
| transition: color 180ms cubic-bezier(0.22, 1, 0.36, 1); |
| } |
|
|
| .docdoe-billing-toggle button[data-selected="true"] { |
| color: #080808; |
| } |
|
|
| .docdoe-billing-toggle button:not([data-selected="true"]):hover { |
| color: rgba(248, 250, 252, 0.75); |
| } |
|
|
| .docdoe-billing-toggle button:focus-visible { |
| outline: 2px solid rgba(59, 130, 246, 0.62); |
| outline-offset: 2px; |
| } |
|
|
| .docdoe-billing-thumb { |
| position: absolute; |
| inset: 0; |
| z-index: 0; |
| display: block; |
| min-height: 0; |
| border: 0; |
| border-radius: inherit; |
| padding: 0; |
| background: #f8fafc; |
| box-shadow: inset 0 -1px 0 rgba(7, 7, 7, 0.1); |
| pointer-events: none; |
| } |
|
|
| .docdoe-billing-label, |
| .docdoe-billing-offer { |
| position: relative; |
| z-index: 1; |
| } |
|
|
| .docdoe-billing-offer { |
| display: inline-flex; |
| min-height: 1.35rem; |
| align-items: center; |
| border: 1px solid rgba(59, 130, 246, 0.2); |
| border-radius: 999px; |
| padding: 0 0.46rem; |
| color: rgba(59, 130, 246, 0.9); |
| font-size: 0.64rem; |
| font-weight: 670; |
| letter-spacing: 0.04em; |
| text-transform: uppercase; |
| } |
|
|
| .docdoe-billing-toggle button[data-selected="true"] .docdoe-billing-offer { |
| border-color: rgba(59, 130, 246, 0.18); |
| background: rgba(59, 130, 246, 0.08); |
| } |
|
|
| .docdoe-billing-support { |
| margin: 0; |
| color: rgba(248, 250, 252, 0.44); |
| font-size: 0.74rem; |
| font-weight: 520; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-grid-wrap { |
| margin-top: clamp(2.45rem, 4vw, 3.15rem); |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-grid { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: clamp(1rem, 2.1vw, 1.35rem); |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-card { |
| min-height: 37rem; |
| border-radius: 1.45rem; |
| padding: 1.25rem 1.3rem 1.25rem; |
| border-color: rgba(248, 250, 252, 0.095) !important; |
| background: |
| radial-gradient(ellipse at 24% 0%, rgba(248, 250, 252, 0.045), transparent 42%), |
| #070707 !important; |
| box-shadow: inset 0 1px 0 rgba(248, 250, 252, 0.048) !important; |
| backdrop-filter: none; |
| -webkit-backdrop-filter: none; |
| transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1) !important; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-card::before { |
| background: none !important; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-card-popular { |
| border-color: rgba(59, 130, 246, 0.28) !important; |
| background: |
| radial-gradient(ellipse at 30% 0%, rgba(59, 130, 246, 0.06), transparent 39%), |
| #08090b !important; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-card-popular::before { |
| display: block; |
| height: 1px; |
| background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.56), transparent) !important; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-card-premium { |
| border-color: rgba(248, 250, 252, 0.16) !important; |
| background: |
| radial-gradient(ellipse at 30% 0%, rgba(248, 250, 252, 0.065), transparent 42%), |
| #080808 !important; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-card:hover { |
| border-color: rgba(248, 250, 252, 0.2) !important; |
| box-shadow: inset 0 1px 0 rgba(248, 250, 252, 0.075) !important; |
| } |
|
|
| .docdoe-pricing-tier { |
| display: flex; |
| min-height: 1.8rem; |
| align-items: center; |
| justify-content: space-between; |
| gap: 0.7rem; |
| color: rgba(248, 250, 252, 0.4); |
| font-size: 0.65rem; |
| font-weight: 650; |
| letter-spacing: 0.21em; |
| text-transform: uppercase; |
| } |
|
|
| .docdoe-pricing-signal { |
| display: block; |
| height: 1px; |
| margin: 0.8rem 0 0.95rem; |
| overflow: hidden; |
| background: rgba(248, 250, 252, 0.06); |
| } |
|
|
| .docdoe-pricing-signal > span { |
| display: block; |
| width: 3.7rem; |
| height: 1px; |
| background: rgba(248, 250, 252, 0.42); |
| opacity: 0.28; |
| transform: scaleX(0.3); |
| transform-origin: left; |
| transition: |
| opacity 230ms cubic-bezier(0.22, 1, 0.36, 1), |
| transform 230ms cubic-bezier(0.22, 1, 0.36, 1); |
| } |
|
|
| .docdoe-pricing-card-popular .docdoe-pricing-signal > span { |
| background: rgba(59, 130, 246, 0.68); |
| opacity: 0.9; |
| transform: scaleX(1); |
| } |
|
|
| .docdoe-pricing-card-premium .docdoe-pricing-signal > span { |
| opacity: 0.48; |
| transform: scaleX(0.58); |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-card:is(:hover, :focus-within) .docdoe-pricing-signal > span { |
| opacity: 0.9; |
| transform: scaleX(1); |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-badge { |
| position: static; |
| min-height: 1.6rem; |
| border: 1px solid rgba(248, 250, 252, 0.1) !important; |
| padding: 0 0.64rem; |
| color: rgba(248, 250, 252, 0.68) !important; |
| font-size: 0.61rem; |
| letter-spacing: 0.12em; |
| background: rgba(248, 250, 252, 0.035) !important; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-badge-popular { |
| border-color: rgba(59, 130, 246, 0.22) !important; |
| color: rgba(157, 194, 255, 0.94) !important; |
| background: rgba(59, 130, 246, 0.065) !important; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-card h3 { |
| margin: 0 0 0; |
| font-size: 1.55rem; |
| font-weight: 640; |
| letter-spacing: -0.045em; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-description { |
| min-height: 3.35rem; |
| margin: 0.6rem 0 0; |
| color: rgba(248, 250, 252, 0.54); |
| font-size: 0.86rem; |
| font-weight: 420; |
| line-height: 1.55; |
| } |
|
|
| .docdoe-pricing-price-shell { |
| min-height: 7.7rem; |
| margin-top: 1.25rem; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-price { |
| margin: 0; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-price span { |
| color: #f8fafc !important; |
| font-size: clamp(2.7rem, 3.8vw, 3.15rem); |
| font-weight: 680; |
| letter-spacing: -0.065em; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-price small { |
| color: rgba(248, 250, 252, 0.46); |
| font-size: 0.77rem; |
| font-weight: 520; |
| } |
|
|
| .docdoe-pricing-effective { |
| display: flex; |
| min-height: 2.65rem; |
| flex-wrap: wrap; |
| align-items: center; |
| gap: 0.75rem; |
| margin: 0.65rem 0 0; |
| color: rgba(248, 250, 252, 0.42); |
| font-size: 0.73rem; |
| } |
|
|
| .docdoe-pricing-yearly-offer { |
| flex-basis: 100%; |
| color: rgba(248, 250, 252, 0.53); |
| font-weight: 540; |
| } |
|
|
| .docdoe-pricing-effective strong { |
| color: rgba(248, 250, 252, 0.64); |
| font-weight: 570; |
| } |
|
|
| .docdoe-pricing-effective.is-yearly strong { |
| color: rgba(132, 179, 255, 0.92); |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-divider { |
| margin: 0.2rem 0 1.15rem; |
| background: rgba(248, 250, 252, 0.075); |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-features { |
| gap: 0.7rem; |
| margin-bottom: 1.45rem; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-features li { |
| color: rgba(248, 250, 252, 0.64); |
| font-size: 0.84rem; |
| font-weight: 440; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-check { |
| width: 1rem; |
| height: 1rem; |
| color: rgba(248, 250, 252, 0.73) !important; |
| border: 1px solid rgba(248, 250, 252, 0.19); |
| background: transparent !important; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-check svg { |
| width: 0.62rem; |
| height: 0.62rem; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-button { |
| min-height: 3.05rem; |
| border-radius: 999px; |
| font-size: 0.86rem; |
| font-weight: 610; |
| transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1) !important; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-button::before { |
| display: none; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-button-starter { |
| border: 1px solid rgba(248, 250, 252, 0.17) !important; |
| color: rgba(248, 250, 252, 0.85) !important; |
| background: rgba(248, 250, 252, 0.025) !important; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-button-popular, |
| .docdoe-locked-pricing .docdoe-pricing-button-premium { |
| border: 1px solid transparent !important; |
| color: #070707 !important; |
| background: #f8fafc !important; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-button:hover { |
| transform: translateY(-1px); |
| box-shadow: none !important; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-trust { |
| display: flex; |
| width: fit-content; |
| max-width: 100%; |
| flex-wrap: wrap; |
| align-items: center; |
| justify-content: center; |
| gap: 0.7rem 1.15rem; |
| margin: clamp(2.25rem, 4vw, 2.8rem) auto 0; |
| border-color: rgba(248, 250, 252, 0.075) !important; |
| padding: 0.8rem 1.2rem; |
| color: rgba(248, 250, 252, 0.48); |
| background: transparent !important; |
| font-size: 0.75rem; |
| font-weight: 510; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-trust span { |
| gap: 0; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-trust span + span::before { |
| width: 0.22rem; |
| height: 0.22rem; |
| margin-right: 1.15rem; |
| background: rgba(248, 250, 252, 0.28) !important; |
| } |
|
|
| .docdoe-faq-item.docdoe-faq-item-open { |
| border-color: rgba(59, 130, 246, 0.21) !important; |
| border-left-color: rgba(59, 130, 246, 0.21) !important; |
| } |
|
|
| .docdoe-final-cta-card { |
| backdrop-filter: none !important; |
| -webkit-backdrop-filter: none !important; |
| } |
|
|
| @media (max-width: 1023px) { |
| .docdoe-signal-layout { |
| grid-template-columns: 1fr; |
| gap: clamp(3.1rem, 7vw, 4.25rem); |
| } |
|
|
| .docdoe-signal-title, |
| .docdoe-signal-body { |
| max-width: 36rem; |
| } |
|
|
| .docdoe-signal-board { |
| max-width: 44rem; |
| } |
|
|
| .docdoe-pricing-heading { |
| grid-template-columns: 1fr; |
| grid-template-areas: |
| "label" |
| "title" |
| "copy" |
| "controls"; |
| } |
|
|
| .docdoe-billing-controls { |
| justify-items: start; |
| margin-top: 2.2rem; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-grid { |
| grid-template-columns: 1fr; |
| max-width: 28.5rem; |
| margin: 0 auto; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-card { |
| min-height: auto; |
| } |
| } |
|
|
| @media (max-width: 639px) { |
| .docdoe-hero-mark { |
| width: 3.75rem; |
| height: 3.75rem; |
| border-radius: 1rem; |
| } |
|
|
| .docdoe-hero-proof { |
| flex-wrap: wrap; |
| gap: 0.42rem 0.65rem; |
| margin-top: 2rem; |
| font-size: 0.56rem; |
| letter-spacing: 0.04em; |
| } |
|
|
| .docdoe-hero-proof li { |
| gap: 0.35rem; |
| } |
|
|
| .docdoe-hero-proof li:not(:last-child)::after { |
| display: none; |
| } |
|
|
| .docdoe-signal-section, |
| .docdoe-locked-pricing { |
| padding-top: 4.7rem; |
| padding-bottom: 4.75rem; |
| } |
|
|
| .docdoe-signal-kicker { |
| gap: 0.6rem; |
| } |
|
|
| .docdoe-signal-kicker::after { |
| width: 2rem; |
| } |
|
|
| .docdoe-signal-title, |
| .docdoe-pricing-heading h2 { |
| font-size: clamp(2.38rem, 11.8vw, 2.78rem); |
| line-height: 1.015; |
| } |
|
|
| .docdoe-signal-body { |
| line-height: 1.7; |
| } |
|
|
| .docdoe-signal-terms { |
| gap: 0.65rem 1rem; |
| } |
|
|
| .docdoe-signal-terms span + span::before { |
| margin-right: 1rem; |
| } |
|
|
| .docdoe-signal-board-header { |
| align-items: start; |
| } |
|
|
| .docdoe-signal-row { |
| grid-template-columns: 1.8rem minmax(0, 1fr); |
| row-gap: 0.45rem; |
| min-height: 6.2rem; |
| padding: 0.72rem 0; |
| } |
|
|
| .docdoe-signal-result { |
| grid-column: 2; |
| grid-auto-flow: column; |
| justify-content: space-between; |
| justify-items: initial; |
| } |
|
|
| .docdoe-billing-toggle { |
| width: 100%; |
| } |
|
|
| .docdoe-billing-toggle button { |
| flex: 1; |
| justify-content: center; |
| padding-inline: 0.55rem; |
| font-size: 0.8rem; |
| } |
|
|
| .docdoe-billing-offer { |
| padding-inline: 0.38rem; |
| font-size: 0.57rem; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-grid-wrap { |
| margin-top: 2.7rem; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-card { |
| border-radius: 1.25rem; |
| padding: 1.15rem; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-trust { |
| justify-content: flex-start; |
| border-radius: 1rem; |
| padding: 0.85rem 1rem; |
| } |
|
|
| .docdoe-locked-pricing .docdoe-pricing-trust span + span::before { |
| margin-right: 0.7rem; |
| } |
| } |
|
|
| @media (max-width: 767px) { |
| .docdoe-atmosphere-noise, |
| .docdoe-atmosphere-dots, |
| .docdoe-atmosphere-global-glow { |
| display: none; |
| } |
|
|
| .docdoe-navbar-shell { |
| background: #070707; |
| backdrop-filter: none; |
| -webkit-backdrop-filter: none; |
| } |
|
|
| .docdoe-focus-ambient, |
| .docdoe-final-cta-spotlight { |
| display: none; |
| } |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| .docdoe-hero-proof-dot { |
| animation: none; |
| opacity: 0.72; |
| transform: none; |
| } |
|
|
| .docdoe-billing-toggle button, |
| .docdoe-pricing-signal > span { |
| transition: none; |
| } |
| } |
|
|
| .dark { |
| --background: oklch(0.145 0 0); |
| --foreground: oklch(0.985 0 0); |
| --card: oklch(0.205 0 0); |
| --card-foreground: oklch(0.985 0 0); |
| --popover: oklch(0.205 0 0); |
| --popover-foreground: oklch(0.985 0 0); |
| --primary: oklch(0.922 0 0); |
| --primary-foreground: oklch(0.205 0 0); |
| --secondary: oklch(0.269 0 0); |
| --secondary-foreground: oklch(0.985 0 0); |
| --muted: oklch(0.269 0 0); |
| --muted-foreground: oklch(0.708 0 0); |
| --accent: oklch(0.269 0 0); |
| --accent-foreground: oklch(0.985 0 0); |
| --destructive: oklch(0.704 0.191 22.216); |
| --border: oklch(1 0 0 / 10%); |
| --input: oklch(1 0 0 / 15%); |
| --ring: oklch(0.556 0 0); |
| --chart-1: oklch(0.87 0 0); |
| --chart-2: oklch(0.556 0 0); |
| --chart-3: oklch(0.439 0 0); |
| --chart-4: oklch(0.371 0 0); |
| --chart-5: oklch(0.269 0 0); |
| --sidebar: oklch(0.205 0 0); |
| --sidebar-foreground: oklch(0.985 0 0); |
| --sidebar-primary: oklch(0.488 0.243 264.376); |
| --sidebar-primary-foreground: oklch(0.985 0 0); |
| --sidebar-accent: oklch(0.269 0 0); |
| --sidebar-accent-foreground: oklch(0.985 0 0); |
| --sidebar-border: oklch(1 0 0 / 10%); |
| --sidebar-ring: oklch(0.556 0 0); |
| } |
|
|
| @layer base { |
| * { |
| @apply border-border outline-ring/50; |
| } |
| body { |
| @apply bg-background text-foreground; |
| } |
| html { |
| @apply font-sans; |
| } |
| } |
|
|
