/* ============================================================ YALLA HACK — Premium Cybersecurity Design System Vanilla CSS port of the Tailwind v4 template Brand: Securing Tomorrow's Enterprise. Aesthetic: dark intelligence base, electric cyan accent, restrained glassmorphism, futuristic enterprise grade. ============================================================ */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .yh-skip-link { position: absolute; top: -100%; left: 0; z-index: 10000; padding: 0.625rem 1.25rem; background: var(--yh-primary); color: var(--yh-background); font-weight: 600; font-size: 0.9rem; text-decoration: none; border-radius: 0 0 0.5rem 0; outline-offset: 2px; transition: top 0.15s ease; } .yh-skip-link:focus { top: 0; } *, *::before, *::after { box-sizing: border-box; } img, video { max-width: 100%; height: auto; } ::selection { background: rgba(34, 211, 238, 0.2); color: #fff; } :root { /* Core surfaces (sRGB equivalents of OKLCH source tokens) */ --yh-background: #0b1320; --yh-background-deep: #08101c; --yh-foreground: #f1f5f9; --yh-surface: #111b2c; --yh-surface-elevated: #16223a; --yh-card: #13203a; --yh-card-foreground: #f1f5f9; /* Brand: electric cyan */ --yh-primary: #22d3ee; --yh-primary-foreground: #0b1320; --yh-primary-glow: #67e8f9; --yh-secondary: #1c2940; --yh-secondary-foreground: #f1f5f9; --yh-muted: #1c2940; --yh-muted-foreground: #94a3b8; --yh-accent: #22d3ee; --yh-success: #34d399; --yh-destructive: #ef4444; --yh-border: rgba(148, 163, 184, 0.18); --yh-border-strong: rgba(148, 163, 184, 0.32); --yh-input: #1c2940; --yh-ring: #22d3ee; --yh-radius-sm: 6px; --yh-radius-md: 10px; --yh-radius-lg: 16px; --yh-radius-xl: 22px; --yh-radius-2xl: 28px; --yh-font-sans: "Plus Jakarta Sans", "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; --yh-font-display: "Outfit", "Plus Jakarta Sans", sans-serif; --yh-font-serif: "Instrument Serif", Georgia, serif; --yh-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --yh-shadow-glow: 0 0 40px -10px rgba(34, 211, 238, 0.4); --yh-shadow-glow-strong: 0 0 80px -20px rgba(34, 211, 238, 0.7); --yh-shadow-elevated: 0 20px 60px -20px rgba(0, 0, 0, 0.6); --yh-gradient-cyan: linear-gradient(135deg, #22d3ee, #67e8f9); --yh-gradient-text: linear-gradient(135deg, #f1f5f9 0%, #22d3ee 100%); --yh-asset-logo: url("assets/template-v2/yalla-hack-logo.png?v=8"); --yh-grid-line: rgba(34, 211, 238, 0.06); --yh-ease: cubic-bezier(0.2, 0.8, 0.2, 1); } /* ============================================================ Base — applied through .yh-theme on (avoids stomping existing tailwind/legacy markup) ============================================================ */ body.yh-theme { background: var(--yh-background); color: var(--yh-foreground); font-family: var(--yh-font-sans); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; min-height: 100vh; } body.yh-theme, .yh-theme * { border-color: var(--yh-border); } .yh-theme h1, .yh-theme h2, .yh-theme h3, .yh-theme h4 { font-family: var(--yh-font-display); letter-spacing: -0.035em; font-weight: 600; color: var(--yh-foreground); margin: 0; } .yh-theme p { margin: 0; } .yh-theme h1, .yh-theme h2, .yh-theme h3, .yh-theme h4, .yh-theme p, .yh-theme li, .yh-theme a { overflow-wrap: anywhere; } .yh-theme p, .yh-theme li { line-height: 1.72; } .yh-theme a { color: inherit; text-decoration: none; } .yh-theme a:focus-visible, .yh-theme button:focus-visible, .yh-theme input:focus-visible, .yh-theme select:focus-visible, .yh-theme textarea:focus-visible, .yh-theme summary:focus-visible { outline: 2px solid var(--yh-primary); outline-offset: 2px; border-radius: 0.5rem; } .yh-theme ::selection { color: var(--yh-foreground); } .yh-theme html, .yh-theme { scroll-behavior: smooth; } .yh-theme html { scrollbar-gutter: stable both-edges; } .yh-theme *, .yh-theme *::before, .yh-theme *::after { box-sizing: border-box; } .yh-theme img, .yh-theme video { max-width: 100%; height: auto; } .yh-theme, .yh-theme * { min-width: 0; } /* ============================================================ Utility classes ============================================================ */ .yh-container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 1.5rem; position: relative; } @media (min-width: 1024px) { .yh-container { max-width: 1440px; padding-inline: 2.5rem; } } @media (max-width: 640px) { .yh-container { padding-inline: 1rem; } } .yh-eyebrow { font-family: var(--yh-font-mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--yh-primary); display: inline-block; font-weight: 600; } .yh-font-display { font-family: var(--yh-font-display); } .yh-font-mono { font-family: var(--yh-font-mono); } .yh-text-gradient { -webkit-background-clip: text; background-clip: text; color: transparent; } .yh-text-cyan { background: linear-gradient(135deg, #22d3ee 0%, #67e8f9 40%, #22d3ee 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 80px rgba(34, 211, 238, 0.35); } .yh-text-muted { color: var(--yh-muted-foreground); } .yh-bg-grid { } .yh-glass { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--yh-border); border-radius: var(--yh-radius-lg); } .yh-glass-strong { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--yh-border-strong); border-radius: var(--yh-radius-lg); padding: 2rem; background: rgba(17, 27, 44, 0.55); } .yh-glow { box-shadow: var(--yh-shadow-glow); } .yh-glow-strong { box-shadow: var(--yh-shadow-glow-strong); } .yh-hover-lift { transition: transform 0.4s var(--yh-ease), box-shadow 0.4s, border-color 0.4s; } .yh-hover-lift:hover { transform: translateY(-4px); border-color: rgba(34, 211, 238, 0.5); box-shadow: 0 16px 40px -24px rgba(0, 0, 0, 0.6), var(--yh-shadow-glow); } /* Sections */ .yh-section { padding: 6rem 0; position: relative; content-visibility: auto; contain-intrinsic-size: 1px 900px; } .yh-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; } @media (min-width: 1024px) { .yh-section { padding: 8rem 0; } } .yh-section-head { max-width: 880px; margin-bottom: 3.5rem; display: grid; gap: 0.9rem; } @media (max-width: 767px) { .yh-section-head { gap: 0.6rem; } } .yh-section-head.center { margin-inline: auto; text-align: center; } .yh-section-title { font-size: clamp(1.875rem, 3.2vw, 3rem); line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; margin-top: 0.9rem; } .yh-section-title:first-child { margin-top: 0; } .yh-section-desc { margin-top: 0; color: var(--yh-muted-foreground); font-size: clamp(1rem, 1.05vw, 1.125rem); line-height: 1.72; max-width: 680px; } .yh-section-head.center .yh-section-desc { margin-inline: auto; } .yh-section-head.center .yh-section-title, .yh-section-head.center .yh-section-desc { max-width: 42rem; } @media (max-width: 767px) { .yh-section { padding: 4rem 0; } .yh-section-head { margin-bottom: 2rem; } .yh-section-desc { font-size: 0.95rem; line-height: 1.7; } .yh-section-title { font-size: clamp(1.6rem, 7vw, 2.3rem); line-height: 1.08; letter-spacing: -0.02em; } } /* Buttons */ .yh-btn { display: inline-flex; align-items: center; gap: 0.5rem; height: 3rem; padding: 0 1.5rem; border-radius: 0.625rem; font-size: 0.875rem; font-weight: 600; font-family: var(--yh-font-sans); cursor: pointer; border: 0; transition: transform 0.3s var(--yh-ease), box-shadow 0.3s, background 0.3s, border-color 0.3s, color 0.3s; text-decoration: none; white-space: nowrap; touch-action: manipulation; letter-spacing: 0.01em; outline: none; } .yh-btn:focus-visible { outline: 2px solid var(--yh-primary); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.2); } @media (max-width: 640px) { .yh-btn { width: 100%; justify-content: center; } } .yh-btn-primary { color: var(--yh-primary-foreground); background: linear-gradient(135deg, #22d3ee, #67e8f9); box-shadow: 0 0 40px -8px rgba(34, 211, 238, 0.5); } .yh-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 60px -6px rgba(34, 211, 238, 0.7), 0 0 100px -20px rgba(34, 211, 238, 0.3); filter: brightness(1.08); } .yh-btn-ghost { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--yh-foreground); border: 1px solid rgba(148, 163, 184, 0.25); background: rgba(148, 163, 184, 0.04); } .yh-btn-ghost:hover { border-color: rgba(34, 211, 238, 0.5); color: var(--yh-primary); background: rgba(34, 211, 238, 0.06); } .yh-btn-sm { height: 2.375rem; padding: 0 1rem; font-size: 0.8125rem; border-radius: 0.5rem; } /* Button loading state */ .yh-btn.is-loading { pointer-events: none; position: relative; color: transparent; } .yh-btn.is-loading::after { content: ''; position: absolute; width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: yh-spin 0.6s linear infinite; top: 50%; left: 50%; margin: -0.5rem 0 0 -0.5rem; } @keyframes yh-spin { to { transform: rotate(360deg); } } /* Magnetic shine on hover */ .yh-btn-magnetic { position: relative; overflow: hidden; isolation: isolate; } .yh-btn-magnetic::before { content: ""; position: absolute; inset: 0; transform: translateX(-110%); transition: transform 0.7s var(--yh-ease); pointer-events: none; } .yh-btn-magnetic:hover::before { transform: translateX(110%); } /* Cards */ .yh-card { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 1.125rem; padding: 1.75rem; background: rgba(17, 27, 44, 0.6); box-shadow: 0 18px 50px -30px rgba(0, 0, 0, 0.65); transition: transform 0.3s var(--yh-ease), box-shadow 0.3s var(--yh-ease), border-color 0.3s var(--yh-ease); position: relative; overflow: hidden; } .yh-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(600px circle at var(--yh-mx, 50%) var(--yh-my, 50%), rgba(34, 211, 238, 0.04) 0%, transparent 50%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .yh-card:hover::before { opacity: 1; } .yh-card:hover { transform: translateY(-3px); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.75), 0 0 40px -20px rgba(34, 211, 238, 0.15); border-color: rgba(34, 211, 238, 0.3); } .yh-card:focus-visible { outline: 2px solid var(--yh-primary); outline-offset: 2px; } .yh-card-strong { border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 1.375rem; padding: 2.5rem; background: rgba(17, 27, 44, 0.7); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.03); transition: transform 0.3s var(--yh-ease), box-shadow 0.3s var(--yh-ease), border-color 0.3s var(--yh-ease); } .yh-card-strong:hover { transform: translateY(-3px); box-shadow: 0 32px 70px -34px rgba(0, 0, 0, 0.8), 0 0 50px -24px rgba(34, 211, 238, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.03); border-color: rgba(34, 211, 238, 0.35); } .yh-icon-box { height: 2.75rem; width: 2.75rem; border-radius: 0.75rem; border: 1px solid rgba(34, 211, 238, 0.2); display: grid; place-items: center; transition: transform 0.4s var(--yh-ease); } .yh-card:hover .yh-icon-box { transform: scale(1.1) rotate(3deg); } .yh-icon-box svg { width: 1.25rem; height: 1.25rem; color: var(--yh-primary); } /* Grids */ .yh-grid { display: grid; gap: 1.25rem; } @media (max-width: 767px) { .yh-grid { gap: 1rem; } .yh-section-head { margin-bottom: 1.75rem; } .yh-section-title { line-height: 1.08; } } .yh-grid-2 { grid-template-columns: 1fr; } .yh-grid-3 { grid-template-columns: 1fr; } .yh-grid-4 { grid-template-columns: 1fr; } .yh-grid-6 { grid-template-columns: repeat(2, 1fr); } @media (min-width: 640px) { .yh-grid-3, .yh-grid-4 { grid-template-columns: repeat(2, 1fr); } .yh-grid-6 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .yh-grid-2 { grid-template-columns: repeat(2, 1fr); } .yh-grid-3 { grid-template-columns: repeat(3, 1fr); } .yh-grid-4 { grid-template-columns: repeat(4, 1fr); } .yh-grid-6 { grid-template-columns: repeat(6, 1fr); } } /* Form fields */ .yh-field { display: block; } .yh-label { display: block; font-family: var(--yh-font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--yh-muted-foreground); margin-bottom: 0.5rem; } .yh-input, .yh-textarea { display: block; width: 100%; padding: 0.85rem 1rem; background: rgba(17, 27, 44, 0.6); border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 0.75rem; color: #f1f5f9; font-family: var(--yh-font-sans); font-size: 0.95rem; line-height: 1.5; transition: border-color 0.25s, box-shadow 0.25s, background 0.25s; box-sizing: border-box; outline: none; } .yh-input::placeholder, .yh-textarea::placeholder { color: rgba(148, 163, 184, 0.45); font-size: 0.9rem; } .yh-input:hover, .yh-textarea:hover { border-color: rgba(148, 163, 184, 0.4); background: rgba(17, 27, 44, 0.75); } .yh-input:focus, .yh-textarea:focus { border-color: #22d3ee; box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12); background: rgba(17, 27, 44, 0.85); outline: none; } .yh-textarea { min-height: 9rem; resize: vertical; } .yh-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.9rem; border-radius: 999px; border: 1px solid rgba(34, 211, 238, 0.2); background: rgba(34, 211, 238, 0.06); font-family: var(--yh-font-mono); font-size: 0.67rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--yh-foreground); } .yh-pill-dot { width: 6px; height: 6px; border-radius: 999px; box-shadow: 0 0 12px var(--yh-primary); animation: yh-pulse-glow 2.6s ease-in-out infinite; } .yh-tag-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 0.875rem; height: 2.5rem; border-radius: 0.75rem; backdrop-filter: blur(14px); border: 1px solid var(--yh-border); font-family: var(--yh-font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; color: var(--yh-foreground); } .yh-tag-chip:hover { border-color: rgba(34, 211, 238, 0.5); color: var(--yh-primary); } .yh-tag-chip:focus-visible { border-color: rgba(34, 211, 238, 0.8); color: var(--yh-primary); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18); } /* ============================================================ Navigation ============================================================ */ .yh-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding-block: 1.25rem; transition: padding 0.4s var(--yh-ease), background 0.4s var(--yh-ease); } [dir="rtl"] .yh-nav { left: auto; right: 0; } .yh-nav.scrolled { padding: 0.625rem 0; background: rgba(11, 19, 32, 0.3); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .yh-nav-shell { display: flex; align-items: center; justify-content: space-between; min-height: 3.75rem; padding: 0 1rem; border-radius: 1rem; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background 0.4s var(--yh-ease), border-color 0.4s, box-shadow 0.4s, transform 0.4s var(--yh-ease); border: 1px solid rgba(148, 163, 184, 0.1); position: relative; } .yh-nav-shell::after { content: ''; position: absolute; bottom: -1px; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.08), transparent); opacity: 0; transition: opacity 0.4s var(--yh-ease); } .yh-nav.scrolled .yh-nav-shell::after { opacity: 1; } @media (min-width: 1024px) { .yh-nav-shell { padding-inline: 1.5rem; } } .yh-nav.scrolled .yh-nav-shell { backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); background: rgba(11, 19, 32, 0.82); border-color: rgba(34, 211, 238, 0.15); box-shadow: 0 8px 32px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.03); } @media (max-width: 767px) { .yh-nav { padding: 0.75rem 0; } .yh-nav-shell { min-height: 3.35rem; padding-inline: 0.75rem; } .yh-nav-actions .yh-btn { display: none; } .yh-card { padding: 1.25rem; } .yh-card-strong { padding: 1.5rem; border-radius: 1rem; } } @media (max-width: 1023px) { .yh-nav-actions .yh-btn { display: none; } } @media (min-width: 768px) and (max-width: 1023px) { .yh-hero-title { font-size: clamp(2.3rem, 5.2vw, 4.4rem); } .yh-hero-lead { max-width: 52ch; font-size: 1.08rem; } } .yh-nav-logo { display: inline-flex; align-items: center; gap: 0.72rem; min-height: 2.62rem; font-family: var(--yh-font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em; color: var(--yh-foreground); line-height: 1; } .yh-brand-mark { height: 2.1rem; width: auto; border-radius: 0; border: none; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; overflow: visible; flex: 0 0 auto; } .yh-brand-mark img { height: 1.7rem; width: auto; max-width: none; display: block; object-fit: contain; object-position: center; image-rendering: -webkit-optimize-contrast; filter: contrast(1.08) saturate(1.08); opacity: 1; transition: opacity 0.25s var(--yh-ease), transform 0.25s var(--yh-ease); transform: translateZ(0); } .yh-nav-logo:hover .yh-brand-mark img { opacity: 0.94; transform: scale(1.01); } @media (max-width: 767px) { .yh-brand-mark { height: 1.9rem; width: auto; border-radius: 0; } .yh-brand-mark img { height: 1.55rem; max-width: none; } .yh-nav-logo { gap: 0.52rem; } .yh-brand-wordmark { font-size: 0.98rem; } .yh-brand-wordmark-sub { display: none; } } .yh-brand-wordmark { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.08rem; font-family: var(--yh-font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.03em; color: var(--yh-foreground); white-space: nowrap; line-height: 1; } .yh-brand-wordmark-main { display: inline-flex; align-items: baseline; gap: 0.22rem; line-height: 1.02; } .yh-brand-wordmark-sub { font-family: var(--yh-font-mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(148, 163, 184, 0.92); line-height: 1.25; } .yh-brand-wordmark-accent { color: var(--yh-primary); } .yh-nav-links { display: none; align-items: center; gap: 0.25rem; } @media (min-width: 1024px) { .yh-nav-links { display: flex; } } .yh-nav-link { position: relative; padding: 0.55rem 0.95rem; font-size: 0.87rem; font-weight: 500; letter-spacing: 0.01em; color: var(--yh-muted-foreground); border-radius: 0.625rem; transition: color 0.3s, background 0.3s; } .yh-nav-link:hover { color: var(--yh-foreground); background: rgba(34, 211, 238, 0.06); } .yh-nav-link.active { color: var(--yh-foreground); border: 1px solid rgba(34, 211, 238, 0.25); } .yh-nav-link.active::after { content: ""; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 999px; box-shadow: 0 0 10px var(--yh-primary); } .yh-nav-actions { display: flex; align-items: center; gap: 0.5rem; } .yh-burger { display: grid; place-items: center; height: 2.5rem; width: 2.5rem; border-radius: 0.75rem; backdrop-filter: blur(14px); border: 1px solid var(--yh-border); color: var(--yh-foreground); cursor: pointer; } @media (min-width: 1024px) { .yh-burger { display: none; } } .yh-mobile-menu { display: none; margin-top: 0.625rem; padding: 0.5rem; border-radius: 1rem; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(34, 211, 238, 0.12); background: rgba(11, 19, 32, 0.88); flex-direction: column; max-height: calc(100svh - 7rem); overflow: auto; gap: 0.15rem; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.8); } body.yh-menu-open { overflow: hidden; } .yh-mobile-menu.open { display: flex; } .yh-mobile-menu a { display: flex; align-items: center; padding: 0.75rem 0.875rem; min-height: 44px; border-radius: 0.625rem; color: var(--yh-muted-foreground); font-size: 0.9rem; font-weight: 500; transition: background 0.2s, color 0.2s, transform 0.2s; transform-origin: left center; opacity: 0; transform: translateY(-6px); animation: yh-menu-item-in 0.3s ease forwards; } .yh-mobile-menu a:nth-child(1) { animation-delay: 0.04s; } .yh-mobile-menu a:nth-child(2) { animation-delay: 0.08s; } .yh-mobile-menu a:nth-child(3) { animation-delay: 0.12s; } .yh-mobile-menu a:nth-child(4) { animation-delay: 0.16s; } .yh-mobile-menu a:nth-child(5) { animation-delay: 0.20s; } .yh-mobile-menu a:nth-child(6) { animation-delay: 0.24s; } .yh-mobile-menu a:nth-child(7) { animation-delay: 0.28s; } .yh-mobile-menu a:nth-child(8) { animation-delay: 0.32s; } .yh-mobile-menu a:nth-child(9) { animation-delay: 0.36s; } @keyframes yh-menu-item-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } [dir="rtl"] .yh-mobile-menu a { text-align: right; justify-content: flex-end; transform-origin: right center; } .yh-mobile-menu a:hover, .yh-mobile-menu a.active { color: var(--yh-foreground); background: rgba(34, 211, 238, 0.06); } /* ============================================================ Intent rail (rapid route selection) ============================================================ */ .yh-intent-rail-wrap { padding-top: 6rem; padding-bottom: 0.5rem; position: relative; overflow: hidden; } .yh-intent-rail-wrap::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 80% at 20% 60%, rgba(34, 211, 238, 0.1) 0%, transparent 60%), radial-gradient(ellipse 40% 70% at 80% 40%, rgba(124, 255, 178, 0.07) 0%, transparent 60%), radial-gradient(ellipse 30% 50% at 50% 50%, rgba(34, 211, 238, 0.05) 0%, transparent 55%); pointer-events: none; z-index: 0; animation: yh-intent-breathe 10s ease-in-out infinite; } @keyframes yh-intent-breathe { 0%, 100% { transform: scale(1); opacity: 0.6; } 33% { transform: scale(1.03); opacity: 0.9; } 66% { transform: scale(0.98); opacity: 0.7; } } .yh-intent-rail-wrap::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(34, 211, 238, 0.012) 12px 13px, transparent 13px 24px ); pointer-events: none; z-index: 0; opacity: 0.5; animation: yh-intent-drift 20s linear infinite; } @keyframes yh-intent-drift { 0% { transform: translateX(0); } 100% { transform: translateX(24px); } } .yh-intent-rail-wrap .yh-container { position: relative; z-index: 1; } .yh-intent-rail { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.25rem 0.1rem; scrollbar-width: none; } .yh-intent-rail::-webkit-scrollbar { display: none; } .yh-intent-chip { display: inline-flex; align-items: center; justify-content: center; height: 2.2rem; padding: 0 0.85rem; border-radius: 999px; border: 1px solid var(--yh-border); color: var(--yh-muted-foreground); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; transition: border-color .2s ease, color .2s ease, background .2s ease; } .yh-intent-chip:hover { border-color: rgba(34, 211, 238, 0.45); color: var(--yh-foreground); box-shadow: 0 0 20px rgba(34, 211, 238, 0.1); } .yh-intent-chip-primary { border-color: rgba(34, 211, 238, 0.52); color: var(--yh-primary); } .yh-proof-strip { margin-top: 0.55rem; display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center; } .yh-proof-strip span { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: rgba(241, 245, 249, 0.78); font-family: var(--yh-font-mono); letter-spacing: 0.06em; text-transform: uppercase; position: relative; } .yh-proof-strip span::before { content: ""; width: 5px; height: 5px; border-radius: 999px; box-shadow: 0 0 8px rgba(34, 211, 238, 0.55); animation: yh-proof-dot 4s ease-in-out infinite; } .yh-proof-strip span:nth-child(2)::before { animation-delay: 1s; } .yh-proof-strip span:nth-child(3)::before { animation-delay: 2s; } .yh-proof-strip span:nth-child(4)::before { animation-delay: 3s; } @keyframes yh-proof-dot { 0%, 100% { opacity: 0.4; transform: scale(0.8); box-shadow: 0 0 4px rgba(34, 211, 238, 0.3); } 50% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 12px rgba(34, 211, 238, 0.7); } } .yh-proof-strip span::after { content: ''; position: absolute; left: -0.1rem; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: rgba(34, 211, 238, 0.15); animation: yh-proof-ring 4s ease-in-out infinite; pointer-events: none; } .yh-proof-strip span:nth-child(2)::after { animation-delay: 1s; } .yh-proof-strip span:nth-child(3)::after { animation-delay: 2s; } .yh-proof-strip span:nth-child(4)::after { animation-delay: 3s; } @keyframes yh-proof-ring { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; } 50% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } } /* ============================================================ Hero specials ============================================================ */ .yh-hero { position: relative; overflow: hidden; padding-top: 9rem; padding-bottom: 9rem; min-height: 100svh; display: flex; align-items: center; isolation: isolate; } .yh-hero::after { content: ''; position: absolute; inset: 0; background: none; pointer-events: none; z-index: 0; } /* ── Hero Partners Marquee ── */ .yh-hero-partners { margin-top: 1.2rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; width: 100%; } .yh-hero-partners .yh-marquee { width: 100%; } .yh-hero-partners-label { font-family: var(--yh-font-mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(148, 163, 184, 0.45); } .yh-marquee-sm .yh-marquee-item { font-size: 0.78rem; color: rgba(148, 163, 184, 0.55); padding: 0.25rem 0.9rem; } /* ── Cyber Glitch Text Effect ── */ .yh-glitch { position: relative; } .yh-glitch::before, .yh-glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .yh-glitch::before { color: rgba(34, 211, 238, 0.3); animation: yh-glitch-shift 4s infinite; clip-path: inset(20% 0 60% 0); } .yh-glitch::after { color: rgba(239, 68, 68, 0.2); animation: yh-glitch-shift 4s 0.15s infinite; clip-path: inset(60% 0 20% 0); } @keyframes yh-glitch-shift { 0%, 92%, 100% { opacity: 0; transform: none; } 93% { opacity: 0.6; transform: translate(-2px, 0); } 95% { opacity: 0.6; transform: translate(2px, 0); } 97% { opacity: 0; transform: none; } } /* ── Card Description ── */ .yh-card-desc { color: var(--yh-muted-foreground); font-size: 0.88rem; line-height: 1.6; margin: 0.4rem 0 1rem; } /* ── Credential Badges ── */ .yh-cred-badge { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1rem; background: rgba(17, 27, 44, 0.5); border: 1px solid var(--yh-border); border-radius: var(--yh-radius-sm); font-size: 0.9rem; font-weight: 500; } .yh-cred-icon { font-size: 1.1rem; } .yh-cred-label { color: var(--yh-fg); } /* ── Subtle Scan Line (desktop only) ── */ .yh-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: none; opacity: 0; } @media (max-width: 767px) { .yh-hero::before { display: none; } } #yhHeroGlobe { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: min(900px, 95vw); height: min(900px, 95vw); z-index: 0; pointer-events: none; overflow: hidden; opacity: 0.45; filter: drop-shadow(0 0 120px rgba(34, 211, 238, 0.08)); } /* Atmospheric glow ring behind the globe */ #yhHeroGlobe::before { content: ''; position: absolute; inset: -6%; border-radius: 50%; background: radial-gradient(circle, rgba(34, 211, 238, 0.04) 0%, transparent 70%); pointer-events: none; } [dir="rtl"] #yhHeroGlobe { left: 50%; transform: translate(-50%, -50%); } @media (max-width: 1199px) { #yhHeroGlobe { width: min(720px, 95vw); height: min(720px, 95vw); opacity: 0.4; top: 42%; } } @media (max-width: 767px) { #yhHeroGlobe { width: min(500px, 100vw); height: min(500px, 100vw); opacity: 0.35; top: 38%; } } /* Service hero backgrounds */ .yh-hero-grid { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(34, 211, 238, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 211, 238, 0.03) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 70%); contain: strict; } .yh-hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(ellipse 80% 50% at 50% 55%, rgba(34, 211, 238, 0.06) 0%, transparent 60%); } .yh-hero-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse 100% 60% at 50% 50%, transparent 30%, rgba(11, 19, 32, 0.4) 100%); } .yh-solutions-hero, .yh-hero .yh-container { position: relative; z-index: 1; } @media (max-width: 767px) { .yh-hero { min-height: auto; padding-top: 8rem; padding-bottom: 1.5rem; } .yh-hero-title { font-size: clamp(1.8rem, 9vw, 3rem); line-height: 1.08; } .yh-hero-lead { margin-top: 0.85rem; font-size: 0.9rem; line-height: 1.7; max-width: 100%; padding: 0; } } @media (min-width: 1024px) { .yh-hero { padding-top: 11rem; padding-bottom: 2rem; } } .yh-hero-title { font-family: var(--yh-font-display); font-size: clamp(2.75rem, 6vw, 4.75rem); line-height: 1.06; font-weight: 800; letter-spacing: -0.04em; text-wrap: balance; text-shadow: 0 8px 60px rgba(6, 16, 28, 0.95), 0 2px 12px rgba(0, 0, 0, 0.8), 0 0 120px rgba(34, 211, 238, 0.1); margin: 0; } .yh-hero-lead { margin-top: 1.25rem; font-size: clamp(1rem, 1.1vw, 1.15rem); line-height: 1.75; color: rgba(241, 245, 249, 0.88); max-width: 64ch; margin-inline: auto; text-align: center; text-wrap: pretty; padding: 0 0.5rem; } .yh-hero-sub { margin-top: 0.65rem; font-size: clamp(0.9rem, 1vw, 1rem); line-height: 1.5; color: rgba(148, 163, 184, 0.7); text-align: center; max-width: 56ch; justify-self: center; width: 100%; } .yh-hero-content-center { max-width: 66rem; margin-inline: auto; text-align: center; display: grid; gap: 1.25rem; padding-bottom: 3rem; justify-items: center; } .yh-hero-actions { margin-top: 2.1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; } .yh-hero-actions-row { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; flex-wrap: wrap; } @media (min-width: 640px) { .yh-hero-actions-row { flex-direction: row; justify-content: center; } } .yh-hero-intent-note { margin: 0; color: rgba(241, 245, 249, 0.8); font-size: 0.9rem; line-height: 1.6; } .yh-hero-intent-note strong { color: var(--yh-primary); } .yh-hero-results { width: min(100%, 62rem); margin-top: 0.75rem; padding: 1.25rem 1.5rem; border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 1.1rem; background: rgba(11, 19, 32, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 24px 60px -34px rgba(0, 0, 0, 0.7); } .yh-hero-results-head { display: grid; gap: 0.35rem; } .yh-hero-results-kicker { color: rgba(241, 245, 249, 0.68); font-family: var(--yh-font-mono); font-size: 0.67rem; letter-spacing: 0.12em; text-transform: uppercase; } .yh-hero-results-copy { margin: 0; color: rgba(241, 245, 249, 0.84); font-size: 0.92rem; line-height: 1.6; } .yh-hero-results-grid { margin-top: 1rem; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 0.75rem; } .yh-hero-result-card { display: grid; gap: 0.18rem; padding: 0.85rem; border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 0.9rem; } .yh-hero-result-value { color: var(--yh-primary); font-family: var(--yh-font-display); font-size: 1.08rem; font-weight: 700; line-height: 1.2; } .yh-hero-result-label { color: rgba(241, 245, 249, 0.78); font-size: 0.84rem; line-height: 1.5; } @media (min-width: 860px) { .yh-hero-results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .yh-hero-trust { width: min(100%, 62rem); margin-top: 0.75rem; display: grid; gap: 0.55rem; } .yh-hero-trust-kicker { color: rgba(241, 245, 249, 0.66); font-family: var(--yh-font-mono); font-size: 0.67rem; letter-spacing: 0.12em; text-transform: uppercase; } .yh-hero-trust-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; } .yh-hero-trust-chip { display: inline-flex; align-items: center; min-height: 2.05rem; padding: 0 0.8rem; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.22); color: rgba(241, 245, 249, 0.82); font-size: 0.79rem; line-height: 1.3; text-align: center; } .yh-hero-next-step { width: min(100%, 62rem); margin: 0.75rem auto 0; color: rgba(241, 245, 249, 0.8); font-size: 0.9rem; line-height: 1.65; } .yh-hero-next-step strong, .yh-hero-next-step span { color: var(--yh-primary); } .yh-hero-fit { width: min(100%, 62rem); margin-top: 0.75rem; display: grid; gap: 0.5rem; } .yh-hero-fit-kicker { color: rgba(241, 245, 249, 0.66); font-family: var(--yh-font-mono); font-size: 0.67rem; letter-spacing: 0.12em; text-transform: uppercase; } .yh-hero-fit-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; } .yh-hero-fit-chip { display: inline-flex; align-items: center; min-height: 2.1rem; padding: 0.2rem 0.82rem; border-radius: 999px; border: 1px solid rgba(34, 211, 238, 0.18); color: rgba(241, 245, 249, 0.82); font-size: 0.79rem; line-height: 1.35; text-align: center; } .yh-hero-content-left { max-width: 55rem; text-align: left; } .yh-hero-content-left .yh-hero-title { text-align: left; } .yh-hero-lead-left { margin-left: 0; margin-right: 0; text-align: left; max-width: 44ch; } .yh-hero-content-rtl { max-width: 58rem; margin-inline-start: auto; text-align: right; } .yh-hero-content-rtl .yh-hero-title { text-align: right; } .yh-hero-lead-rtl { margin: 2rem 0 0; margin-inline-start: auto; text-align: right; max-width: 44ch; } .yh-tag-row { margin-top: 2rem; display: flex; gap: 0.5rem; flex-wrap: wrap; } .yh-action-row { margin-top: 2rem; display: flex; gap: 0.75rem; flex-wrap: wrap; } .yh-hero-ctas { margin-top: 1.25rem; display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: flex-start; } [dir="rtl"] .yh-hero-content-left, [dir="rtl"] .yh-hero-content-left .yh-hero-title, [dir="rtl"] .yh-hero-lead-left { text-align: right; } [dir="rtl"] .yh-hero-content-left { margin-inline-start: auto; } [dir="rtl"] .yh-hero-lead-left { margin-inline-start: auto; } [dir="rtl"] .yh-tag-row, [dir="rtl"] .yh-action-row, [dir="rtl"] .yh-hero-ctas { justify-content: flex-end; } .yh-section-compact { padding-top: 9rem; } .yh-panel { padding: 1.5rem; } .yh-panel-lg { padding: 2rem; } .yh-panel-ambient { position: relative; overflow: hidden; isolation: isolate; } .yh-panel-ambient::before { content: ""; position: absolute; right: -5rem; bottom: -7rem; width: 18rem; height: 18rem; border-radius: 50%; opacity: 0.7; pointer-events: none; animation: yh-float-y 10s ease-in-out infinite; } .yh-panel-ambient::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .yh-panel-ambient>* { position: relative; z-index: 1; } .yh-head-gap-sm { margin-bottom: 1rem; } .yh-grid-gap-sm { margin-top: 0.5rem; } .yh-action-gap-sm { margin-top: 1.25rem; } .yh-anchor-target { scroll-margin-top: 7.5rem; } @media (min-width: 768px) { .yh-hero-lead { font-size: 1.25rem; } .yh-hero-content-center { max-width: 58rem; } } @media (max-width: 767px) { .yh-hero-content-left { text-align: center; margin-inline: auto; } .yh-hero-content-left .yh-hero-title, .yh-hero-lead-left { text-align: center; margin-inline: auto; } .yh-tag-row { justify-content: center; } .yh-action-row { justify-content: center; } [dir="rtl"] .yh-tag-row, [dir="rtl"] .yh-action-row, [dir="rtl"] .yh-hero-ctas { justify-content: center; } .yh-panel, .yh-panel-lg { padding: 1.1rem; } .yh-anchor-target { scroll-margin-top: 6rem; } .yh-hero-content-rtl { text-align: center; margin-inline-start: auto; margin-inline-end: auto; } .yh-hero-content-rtl .yh-hero-title, .yh-hero-lead-rtl { text-align: center; margin-inline: auto; } } /* Hero stats strip */ .yh-stats { margin-top: 4rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-radius: 1.25rem; overflow: hidden; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(148, 163, 184, 0.15); box-shadow: 0 32px 64px -32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.03); background: rgba(17, 27, 44, 0.3); } @media (min-width: 768px) { .yh-stats { grid-template-columns: repeat(4, 1fr); } } .yh-stat-k { font-family: var(--yh-font-display); font-size: 1.85rem; font-weight: 800; background: linear-gradient(135deg, #22d3ee 0%, #67e8f9 50%, #22d3ee 100%); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.02em; } @media (min-width: 1024px) { .yh-stat-k { font-size: 2.1rem; } } .yh-stat-v { margin-top: 0.2rem; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(148, 163, 184, 0.6); font-weight: 500; } .yh-stat { padding: 1.6rem 1.25rem; text-align: center; position: relative; background: transparent; transition: background 0.35s, transform 0.3s ease, box-shadow 0.35s; will-change: transform; } .yh-stat::after { content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: rgba(148, 163, 184, 0.1); } .yh-stat:last-child::after { display: none; } .yh-stat:hover { background: rgba(34, 211, 238, 0.05); box-shadow: inset 0 0 40px rgba(34, 211, 238, 0.04); transform: translateY(-2px); } @media (max-width: 767px) { .yh-stat:nth-child(even)::after { display: none; } } /* Compact live pulse widget */ .yh-live-brief { margin-top: 1.25rem; width: min(100%, 62rem); margin-inline: auto; text-align: start; border-radius: 1.15rem; border: 1px solid rgba(148, 163, 184, 0.24); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 1rem 1.25rem; box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.68); } .yh-live-brief-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .yh-live-brief-title-wrap { display: inline-flex; align-items: center; gap: 0.5rem; } .yh-live-dot { width: 8px; height: 8px; border-radius: 999px; box-shadow: 0 0 12px var(--yh-primary); animation: yh-pulse-glow 2.2s ease-in-out infinite; } .yh-pill-spacious { margin-bottom: 2rem; } .yh-live-brief-title { font-family: var(--yh-font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yh-foreground); } .yh-live-brief-sub { font-size: 0.75rem; color: var(--yh-muted-foreground); } .yh-live-brief-grid { margin-top: 0.85rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } .yh-live-brief-card { border-radius: 0.75rem; border: 1px solid var(--yh-border); padding: 0.75rem; } .yh-live-brief-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .yh-live-brief-label { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yh-muted-foreground); } .yh-live-brief-value { margin-top: 0.45rem; font-family: var(--yh-font-display); font-size: 1.15rem; font-weight: 700; color: var(--yh-primary); letter-spacing: -0.02em; } .yh-live-brief-value.yh-live-threat { color: #fb7185; } .yh-live-delta { font-family: var(--yh-font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--yh-muted-foreground); } .yh-live-delta.is-up { color: #34d399; } .yh-live-delta.is-down { color: #fb7185; } .yh-live-delta.is-flat { color: var(--yh-muted-foreground); } .yh-live-brief-bars { margin-top: 0.85rem; height: 38px; border-radius: 0.625rem; border: 1px solid var(--yh-border); display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); align-items: end; gap: 3px; padding: 6px; } .yh-live-brief-ticker { margin-top: 0.7rem; font-size: 0.8rem; color: rgba(241, 245, 249, 0.86); } .yh-live-brief-meta { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; } .yh-live-chip { display: inline-flex; align-items: center; height: 1.8rem; border-radius: 999px; border: 1px solid rgba(34, 211, 238, 0.28); color: #a5f3fc; padding: 0 0.65rem; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--yh-font-mono); } .yh-live-chip.yh-live-chip-muted { border-color: var(--yh-border); color: var(--yh-muted-foreground); } @media (max-width: 767px) { .yh-live-brief-grid { grid-template-columns: 1fr; } .yh-live-brief-sub { display: none; } .yh-live-brief-head { align-items: flex-start; flex-direction: column; } .yh-live-brief-meta { justify-content: flex-start; } } /* ============================================================ Footer ============================================================ */ .yh-footer { margin-top: 8rem; border-top: 1px solid rgba(34, 211, 238, 0.08); position: relative; overflow: hidden; background: radial-gradient(ellipse 80% 30% at 50% 0%, rgba(34, 211, 238, 0.05) 0%, transparent 60%), radial-gradient(ellipse 60% 30% at 30% 100%, rgba(34, 211, 238, 0.03) 0%, transparent 50%); } .yh-footer > .yh-container { position: relative; z-index: 1; } .yh-footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(34, 211, 238, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 211, 238, 0.02) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to bottom, black 0%, transparent 40%); -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 40%); } .yh-footer::after { content: ""; position: absolute; top: -8rem; right: -6rem; width: 22rem; height: 22rem; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(34, 211, 238, 0.03) 0%, transparent 60%); } /* Footer top glow line */ .yh-footer .yh-container::before { content: ''; position: absolute; top: -1px; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.15), transparent); pointer-events: none; } .yh-footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(34, 211, 238, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 211, 238, 0.02) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to bottom, black 0%, transparent 40%); -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 40%); } .yh-footer::after { content: ""; position: absolute; top: -8rem; right: -6rem; width: 22rem; height: 22rem; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(34, 211, 238, 0.03) 0%, transparent 60%); } .yh-footer-inner { padding: 4rem 0 2rem; } .yh-footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; } @media (min-width: 768px) { .yh-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem 1.4rem; } } @media (min-width: 1024px) { .yh-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; } } .yh-footer h4 { font-family: var(--yh-font-mono); font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--yh-primary); margin-bottom: 1rem; } .yh-footer .yh-nav-logo { margin-bottom: 0.5rem; gap: 0.58rem; } .yh-footer .yh-brand-mark { height: 1.8rem; width: auto; border-radius: 0; border: none; box-shadow: none; overflow: visible; } .yh-footer .yh-brand-mark img { height: 1.45rem; max-width: none; } .yh-footer .yh-brand-wordmark { font-size: 1rem; } .yh-footer .yh-brand-wordmark-sub { display: none; } .yh-footer-grid>div:first-child { max-width: 24rem; } .yh-footer-hq a { color: var(--yh-foreground); } .yh-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; } .yh-footer ul a { font-size: 0.875rem; color: var(--yh-muted-foreground); transition: color 0.2s; } .yh-footer ul a:hover { color: var(--yh-foreground); } .yh-footer-socials { display: flex; gap: 0.5rem; padding-top: 0.5rem; } .yh-footer-socials a { height: 2.25rem; width: 2.25rem; display: grid; place-items: center; border-radius: 0.625rem; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--yh-border); color: var(--yh-muted-foreground); transition: color 0.2s, border-color 0.2s, transform 0.2s, background 0.2s; } .yh-footer-socials a:hover { color: var(--yh-primary); border-color: rgba(34, 211, 238, 0.5); transform: translateY(-2px); } .yh-footer-bottom { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--yh-border); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; } @media (min-width: 640px) { .yh-footer-bottom { flex-direction: row; } } .yh-footer-bottom p { font-size: 0.75rem; color: var(--yh-muted-foreground); } @media (max-width: 767px) { .yh-footer-inner { padding: 3rem 0 1.5rem; } .yh-footer-grid { gap: 2rem; } .yh-footer-grid>div:first-child { max-width: none; } .yh-footer-bottom { text-align: center; } .yh-footer-bottom p { width: 100%; } } [dir="rtl"] .yh-footer ul, [dir="rtl"] .yh-footer h4, [dir="rtl"] .yh-footer-bottom { text-align: right; } .yh-footer-bottom .yh-creds { font-family: var(--yh-font-mono); letter-spacing: 0.14em; } /* ============================================================ Animations ============================================================ */ @keyframes yh-pulse-glow { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } } @keyframes yh-float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes yh-shimmer { 0% { } 100% { } } @keyframes yh-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes yh-grid-drift { from { } to { } } @keyframes yh-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes yh-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .yh-pulse { animation: yh-pulse-glow 4s ease-in-out infinite; } .yh-float { animation: yh-float-y 6s ease-in-out infinite; } .yh-spin-slow { animation: yh-spin 120s linear infinite; } /* Reveal-on-scroll utility (paired with JS) */ .yh-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); } .yh-reveal.is-visible { opacity: 1; transform: translateY(0); } /* Stronger reveal for sections */ /* Reveal from left/right */ /* Staggered card reveal */ .yh-grid-reveal > .yh-card, .yh-grid-reveal > .yh-card-strong, .yh-grid-reveal > .yh-blog-card, .yh-grid-reveal > * { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } .yh-grid-reveal.is-visible > .yh-card, .yh-grid-reveal.is-visible > .yh-card-strong, .yh-grid-reveal.is-visible > .yh-blog-card, .yh-grid-reveal.is-visible > * { opacity: 1; transform: translateY(0); } .yh-grid-reveal.is-visible > *:nth-child(1) { transition-delay: 0s; } .yh-grid-reveal.is-visible > *:nth-child(2) { transition-delay: 0.08s; } .yh-grid-reveal.is-visible > *:nth-child(3) { transition-delay: 0.16s; } .yh-grid-reveal.is-visible > *:nth-child(4) { transition-delay: 0.24s; } .yh-grid-reveal.is-visible > *:nth-child(5) { transition-delay: 0.32s; } .yh-grid-reveal.is-visible > *:nth-child(6) { transition-delay: 0.40s; } /* Reduced motion: skip reveals */ @media (prefers-reduced-motion: reduce) { .yh-reveal, .yh-reveal-strong, .yh-reveal-left, .yh-reveal-right, .yh-grid-reveal, .yh-grid-reveal > * { opacity: 1; transform: none; transition: none; } } @media (prefers-reduced-motion: reduce) { .yh-theme { scroll-behavior: auto; } .yh-reveal, .yh-reveal-strong, .yh-reveal-left, .yh-reveal-right, .yh-grid-reveal, .yh-grid-reveal > * { opacity: 1; transform: none; transition: none; } .yh-reveal.is-visible, .yh-reveal-strong.is-visible, .yh-reveal-left.is-visible, .yh-reveal-right.is-visible { opacity: 1; transform: none; } .yh-pulse, .yh-float, .yh-spin-slow, .yh-panel-ambient::before, .yh-hero-orb-inner, .yh-hero-grid, .yh-hero-orb-ring { animation: none; } .yh-hero-grid { opacity: 0.5; } } @media (prefers-contrast: more) { .yh-card, .yh-card-strong, .yh-live-brief, .yh-faq-item, .yh-mobile-menu, .yh-nav.scrolled .yh-nav-shell { border-color: rgba(241, 245, 249, 0.55); } .yh-btn-primary, .yh-btn-ghost, .yh-check-chip, .yh-live-chip { border-width: 2px; } } @media (forced-colors: active) { .yh-theme { forced-color-adjust: auto; } .yh-btn, .yh-input, .yh-textarea, .yh-select, .yh-card, .yh-card-strong, .yh-mobile-menu, .yh-faq-item { forced-color-adjust: auto; border: 1px solid ButtonText; } } @media print { body, .yh-theme { color: #000 !important; } .yh-nav, .yh-mobile-menu, .yh-footer-socials, .yh-btn, .yh-burger, .yh-hero-grid, .yh-hero-bg, .yh-hero-vignette, .yh-bg-grid, .yh-card, .yh-card-strong, .yh-glass, .yh-glass-strong { color: #000 !important; border: 1px solid #c8c8c8 !important; box-shadow: none !important; backdrop-filter: none !important; } a, .yh-text-cyan, .yh-text-gradient { color: #000 !important; -webkit-text-fill-color: #000 !important; } } /* Marquee track */ .yh-marquee { overflow: hidden; position: relative; padding: 1.25rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); } .yh-marquee-track { display: flex; gap: 3rem; animation: yh-marquee 38s linear infinite; width: max-content; } .yh-marquee-item { font-family: var(--yh-font-display); font-weight: 600; font-size: 1.1rem; color: var(--yh-muted-foreground); letter-spacing: -0.01em; white-space: nowrap; opacity: 0.85; transition: color 0.3s, opacity 0.3s; } .yh-marquee:hover .yh-marquee-track { animation-play-state: paused; } .yh-marquee-item:hover { color: var(--yh-primary); opacity: 1; } /* Checkbox / radio chips */ .yh-check-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 1rem; height: 2.65rem; border-radius: 9999px; border: 1px solid rgba(148, 163, 184, 0.22); background: rgba(17, 27, 44, 0.4); color: #94a3b8; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s; user-select: none; } .yh-check-chip:hover { border-color: rgba(34, 211, 238, 0.5); background: rgba(17, 27, 44, 0.65); } .yh-check-chip:has(input:checked) { border-color: #22d3ee; background: rgba(34, 211, 238, 0.1); color: #22d3ee; box-shadow: 0 0 12px rgba(34, 211, 238, 0.15); } .yh-check-chip input { accent-color: var(--yh-primary); } .yh-check-chip input:checked+span { color: var(--yh-primary); } /* ============================================================ Homepage quick decision UX ============================================================ */ .yh-quick-flow { border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 1.25rem; padding: clamp(1.25rem, 3vw, 2rem); background: rgba(17, 27, 44, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 16px 48px -22px rgba(0, 0, 0, 0.55); } .yh-quick-flow-head { max-width: 54rem; margin-inline: auto; text-align: center; } .yh-quick-links { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; } .yh-quick-grid { margin-top: 1.25rem; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 0.875rem; } @media (min-width: 900px) { .yh-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .yh-quick-card { border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 1.1rem; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.65rem; background: rgba(11, 19, 32, 0.5); transition: transform 0.3s var(--yh-ease), border-color 0.3s; box-shadow: 0 18px 46px -30px rgba(0, 0, 0, 0.7); } .yh-quick-card:hover { border-color: rgba(34, 211, 238, 0.3); transform: translateY(-2px); } .yh-quick-kicker { color: var(--yh-primary); font-family: var(--yh-font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; } .yh-quick-card h3 { font-size: 1.05rem; line-height: 1.25; } .yh-quick-card p { color: var(--yh-muted-foreground); font-size: 0.9rem; line-height: 1.6; } .yh-quick-card .yh-btn { margin-top: auto; width: fit-content; } @media (max-width: 640px) { .yh-quick-card .yh-btn { width: 100%; } } .yh-mobile-convert { position: fixed; left: 0.75rem; right: 0.75rem; bottom: max(0.75rem, env(safe-area-inset-bottom)); z-index: 70; display: flex; gap: 0.5rem; padding: 0.6rem; border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 0.95rem; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background: rgba(11, 19, 32, 0.9); box-shadow: 0 8px 32px -12px rgba(0, 0, 0, 0.7); } .yh-mobile-convert .yh-btn { flex: 1; justify-content: center; min-width: 0; white-space: nowrap; } .yh-path-sticky { position: fixed; right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 72; width: min(29rem, calc(100vw - 2rem)); border: 1px solid rgba(148, 163, 184, 0.14); border-radius: 1.15rem; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); background: rgba(11, 19, 32, 0.65); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(34, 211, 238, 0.05) inset; padding: 0.85rem; display: grid; gap: 0.7rem; } .yh-path-close { position: absolute; top: 0.55rem; right: 0.55rem; z-index: 2; display: flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 50%; background: rgba(17, 27, 44, 0.6); backdrop-filter: blur(8px); color: rgba(148, 163, 184, 0.5); cursor: pointer; transition: all 0.2s ease; } .yh-path-close:hover { border-color: rgba(239, 68, 68, 0.4); color: rgba(239, 68, 68, 0.8); background: rgba(239, 68, 68, 0.1); } .yh-path-sticky-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; } .yh-path-kicker { color: var(--yh-primary); font-family: var(--yh-font-mono); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; } .yh-path-options { display: flex; flex-wrap: wrap; gap: 0.35rem; } .yh-path-option { border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 999px; min-height: 1.85rem; padding: 0.2rem 0.7rem; background: rgba(17, 27, 44, 0.5); color: rgba(241, 245, 249, 0.65); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: all 0.22s ease; } .yh-path-option:hover { border-color: rgba(34, 211, 238, 0.45); color: var(--yh-foreground); background: rgba(34, 211, 238, 0.06); } .yh-path-option.is-active { border-color: rgba(34, 211, 238, 0.5); background: rgba(34, 211, 238, 0.12); color: var(--yh-primary); box-shadow: 0 0 12px -4px rgba(34, 211, 238, 0.2); } .yh-path-sticky .yh-btn { justify-content: center; width: 100%; } .yh-path-estimator { border: 1px solid rgba(148, 163, 184, 0.12); border-radius: 0.85rem; padding: 0.65rem; display: grid; gap: 0.6rem; background: rgba(11, 19, 32, 0.3); } .yh-path-estimator-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.44rem; } .yh-path-estimator-field { display: grid; gap: 0.28rem; } .yh-path-estimator-field span { font-family: var(--yh-font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(148, 163, 184, 0.55); } .yh-path-estimator-field select { width: 100%; border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 0.5rem; background: rgba(17, 27, 44, 0.4); color: var(--yh-foreground); font-size: 0.72rem; font-weight: 600; min-height: 1.9rem; padding: 0 0.45rem; appearance: none; -webkit-appearance: none; cursor: pointer; } .yh-path-estimator-outcome { margin: 0; font-size: 0.74rem; line-height: 1.5; color: rgba(241, 245, 249, 0.78); } .yh-path-estimator-outcome strong { color: var(--yh-primary); } @media (max-width: 1150px) { .yh-path-estimator-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .yh-mobile-convert { display: none; } } @media (max-width: 899px) { .yh-path-sticky { display: none; } .yh-footer { padding-bottom: 6.25rem; } } @media (max-width: 420px) { .yh-mobile-convert { left: 0.5rem; right: 0.5rem; padding: 0.52rem; gap: 0.4rem; flex-direction: column; } .yh-mobile-convert .yh-btn { font-size: 0.74rem; letter-spacing: 0.01em; padding-inline: 0.6rem; width: 100%; } } /* ============================================================ Homepage decision matrix UX ============================================================ */ .yh-decision-matrix { border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 1.25rem; padding: clamp(1.25rem, 3vw, 2rem); box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.72); } .yh-decision-head { max-width: 56rem; margin-inline: auto; text-align: center; } .yh-decision-grid { margin-top: 1.25rem; display: grid; grid-template-columns: 1fr; gap: 0.9rem; } @media (min-width: 960px) { .yh-decision-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .yh-decision-card { display: flex; flex-direction: column; gap: 0.8rem; border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 1rem; padding: 1.25rem; background: rgba(11, 19, 32, 0.5); transition: transform 0.3s var(--yh-ease), border-color 0.3s; box-shadow: 0 16px 40px -30px rgba(0, 0, 0, 0.7); } .yh-decision-card:hover { border-color: rgba(34, 211, 238, 0.3); transform: translateY(-2px); } .yh-decision-kicker { color: var(--yh-primary); font-family: var(--yh-font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; } .yh-decision-card h3 { font-size: 1.08rem; line-height: 1.3; } .yh-decision-card .yh-bullets { gap: 0.6rem; } .yh-decision-card .yh-bullets li { font-size: 0.88rem; color: var(--yh-muted-foreground); } .yh-decision-meta { margin-top: auto; font-family: var(--yh-font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(241, 245, 249, 0.75); } .yh-decision-card .yh-btn { width: fit-content; } /* ============================================================ Homepage first-week roadmap UX ============================================================ */ .yh-roadmap { border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 1.25rem; padding: clamp(1.25rem, 3vw, 2rem); background: rgba(17, 27, 44, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.72); } .yh-roadmap-head { max-width: 56rem; margin-inline: auto; text-align: center; } .yh-roadmap-grid { margin-top: 1.2rem; display: grid; gap: 0.9rem; grid-template-columns: 1fr; } @media (min-width: 960px) { .yh-roadmap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .yh-roadmap-step { border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 1rem; padding: 1.25rem; background: rgba(11, 19, 32, 0.5); transition: transform 0.3s var(--yh-ease), border-color 0.3s; box-shadow: 0 16px 40px -30px rgba(0, 0, 0, 0.7); } .yh-roadmap-step:hover { border-color: rgba(34, 211, 238, 0.3); transform: translateY(-2px); } .yh-roadmap-day { display: inline-flex; align-items: center; justify-content: center; height: 1.6rem; padding: 0 0.55rem; border-radius: 999px; border: 1px solid rgba(34, 211, 238, 0.4); color: var(--yh-primary); font-family: var(--yh-font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; } .yh-roadmap-step h3 { margin-top: 0.65rem; font-size: 1.04rem; line-height: 1.3; } .yh-roadmap-step p { margin-top: 0.5rem; color: var(--yh-muted-foreground); font-size: 0.9rem; line-height: 1.62; } .yh-roadmap-actions { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.6rem; } .yh-roadmap-actions-compact { margin-top: 0.95rem; } .yh-objection-faq { border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 1.25rem; padding: clamp(1.2rem, 2.8vw, 1.8rem); background: rgba(17, 27, 44, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.72); } .yh-objection-faq-head { max-width: 58rem; margin-inline: auto; text-align: center; } .yh-objection-faq-list { margin-top: 0.85rem; max-width: 940px; } /* Language switcher button */ .yh-lang-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 0.5rem; background: rgba(11, 20, 35, 0.7); color: var(--yh-foreground); font-family: var(--yh-font-display); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: border-color 0.25s, background 0.25s; white-space: nowrap; line-height: 1.2; } .yh-lang-btn:hover { border-color: rgba(34, 211, 238, 0.5); background: rgba(34, 211, 238, 0.08); } .yh-lang-btn .current-lang { display: inline-flex; align-items: center; gap: 0.3rem; } .yh-lang-btn-mobile { margin: 0; width: 100%; justify-content: flex-start; padding: 0.75rem 0.875rem; font-size: 0.9rem; border-radius: 0.625rem; border: none; background: transparent; min-height: 44px; } .yh-lang-btn-mobile:hover { background: rgba(148, 163, 184, 0.08); border-color: transparent; } html[dir="rtl"] .yh-lang-btn .current-lang { flex-direction: row-reverse; } [dir="rtl"] .yh-lang-btn-mobile { justify-content: flex-end; } /* Stats grid (service pages) */ .yh-stats-grid { display: grid; gap: 1rem; } .yh-stats-grid-4 { grid-template-columns: repeat(4, 1fr); } .yh-stat-card { background: rgba(11, 19, 32, 0.5); border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 1rem; padding: 1.5rem 1rem; text-align: center; display: flex; flex-direction: column; gap: 0.35rem; transition: border-color 0.3s, transform 0.3s var(--yh-ease); } .yh-stat-card:hover { border-color: rgba(34, 211, 238, 0.3); transform: translateY(-2px); } .yh-stat-value { font-family: var(--yh-font-display); font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--yh-primary); line-height: 1.1; } .yh-stat-label { font-size: 0.82rem; color: var(--yh-muted-foreground); line-height: 1.4; } @media (max-width: 767px) { .yh-stats-grid-4 { grid-template-columns: repeat(2, 1fr); } .yh-stat-value { font-size: 1.6rem; } } /* Testimonials */ .yh-testimonial-body { font-size: 0.9375rem; line-height: 1.7; color: var(--yh-muted-foreground); font-style: italic; margin-bottom: 1.5rem; flex: 1; } .yh-testimonial-body p::before { content: "\201C"; color: var(--yh-primary); font-size: 1.5rem; line-height: 0; vertical-align: -0.3em; margin-right: 0.15em; } .yh-testimonial-author { border-top: 1px solid rgba(148, 163, 184, 0.15); padding-top: 1rem; display: flex; flex-direction: column; gap: 0.15rem; } .yh-testimonial-author strong { font-family: var(--yh-font-display); font-weight: 600; font-size: 0.9rem; color: var(--yh-foreground); } .yh-testimonial-author span { font-size: 0.8rem; color: var(--yh-muted-foreground); } .yh-testimonial-body, .yh-testimonial-author { padding-inline: 1.5rem; } .yh-testimonial-body { padding-top: 1.5rem; } .yh-testimonial-author { padding-bottom: 1.5rem; } /* FAQ accordion */ .yh-faq { display: grid; gap: 0.75rem; } .yh-faq-item { border-radius: 1rem; border: 1px solid rgba(148, 163, 184, 0.2); overflow: hidden; background: rgba(11, 19, 32, 0.5); transition: border-color 0.3s, background 0.3s; } .yh-faq-item[open] { border-color: rgba(34, 211, 238, 0.4); } .yh-faq-item summary { list-style: none; cursor: pointer; padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--yh-font-display); font-weight: 600; font-size: 1rem; } @media (max-width: 640px) { .yh-faq-item summary { padding: 1rem 1.1rem; font-size: 0.95rem; } .yh-faq-body { padding: 0 1.1rem 1rem; } } .yh-faq-item summary::-webkit-details-marker { display: none; } .yh-faq-item summary::after { content: "+"; font-family: var(--yh-font-mono); color: var(--yh-primary); font-size: 1.5rem; transition: transform 0.3s var(--yh-ease); line-height: 1; } .yh-faq-item[open] summary::after { transform: rotate(45deg); } .yh-faq-body { padding: 0 1.5rem 1.25rem; color: var(--yh-muted-foreground); font-size: 0.9375rem; line-height: 1.7; text-align: center; } /* List items with cyan dot */ .yh-bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.875rem; } .yh-bullets li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.95rem; color: rgba(241, 245, 249, 0.92); line-height: 1.55; } .yh-bullets li::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; margin-top: 0.6rem; border-radius: 999px; box-shadow: 0 0 10px rgba(34, 211, 238, 0.6); } /* Numbered badge for legal / step lists */ .yh-num-badge { flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 0.875rem; display: inline-flex; align-items: center; justify-content: center; font-family: var(--yh-font-display); font-weight: 700; font-size: 1.125rem; color: #fff; border: 1px solid rgba(34, 211, 238, 0.35); box-shadow: 0 0 22px rgba(34, 211, 238, 0.18); letter-spacing: 0.02em; } /* Story link underline */ .yh-story-link { position: relative; display: inline-block; } .yh-story-link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--yh-ease); } .yh-story-link:hover::after { transform: scaleX(1); transform-origin: left; } /* Tilt card wrapper */ .yh-tilt { position: relative; border-radius: 1.25rem; overflow: hidden; border: 1px solid var(--yh-border-strong); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .yh-tilt>.yh-scan-top { position: absolute; left: 0; right: 0; top: 0; height: 1px; animation: yh-pulse-glow 4s ease-in-out infinite; } /* Homepage structure helpers */ .yh-section-no-top { padding-top: 0; } .yh-service-mini-title { margin-top: 1.25rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; } .yh-service-mini-copy { margin-top: 0.5rem; color: var(--yh-muted-foreground); font-size: 0.9rem; line-height: 1.65; } .yh-core-card { display: flex; flex-direction: column; } .yh-core-card-head { display: flex; align-items: center; justify-content: space-between; } .yh-core-card-index { font-size: 0.65rem; letter-spacing: 0.2em; color: var(--yh-muted-foreground); } .yh-core-card-title { margin-top: 1.5rem; font-size: 1.5rem; } .yh-core-card-copy { margin-top: 0.5rem; color: var(--yh-muted-foreground); font-size: 0.9rem; line-height: 1.65; } .yh-core-card-copy a { color: var(--yh-foreground); } .yh-core-card-list { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--yh-border); } .yh-core-card-list a { color: inherit; } .yh-core-card-link { margin-top: auto; padding: 0.5rem 0 0 0; padding-top: 1.8rem; color: #22d3ee; font-size: 0.82rem; font-weight: 600; display: block; background: none; border: none; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; transition: color 0.2s ease; letter-spacing: 0.01em; } .yh-core-card-link:hover { color: #67e8f9; background: none; border: none; box-shadow: none; transform: none; } .yh-djac-grid { align-items: center; gap: 2.5rem; } .yh-djac-copy { color: var(--yh-muted-foreground); font-size: 1rem; line-height: 1.7; } .yh-djac-bullets { margin-top: 1.5rem; gap: 1rem; } .yh-djac-bullets strong { color: var(--yh-foreground); } .yh-djac-actions { margin-top: 1.75rem; display: flex; gap: 0.75rem; flex-wrap: wrap; } .yh-djac-visual-wrap { position: relative; } .yh-djac-screen { aspect-ratio: 16 / 11; display: grid; place-items: center; } .yh-djac-screen-body { text-align: center; padding: 2rem; } .yh-djac-screen-title { font-size: 2.75rem; font-weight: 800; letter-spacing: -0.04em; } .yh-djac-screen-sub { margin-top: 0.75rem; color: rgba(241, 245, 249, 0.7); font-family: var(--yh-font-mono); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; } .yh-djac-screen-live { margin-top: 0.5rem; color: var(--yh-primary); font-size: 0.7rem; letter-spacing: 0.18em; } .yh-why-grid { gap: 1rem; border-radius: 1.25rem; } .yh-why-card { padding: 2rem 1.5rem; background: rgba(17, 27, 44, 0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(148, 163, 184, 0.12); border-radius: 1rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; transition: all 0.35s var(--yh-ease); position: relative; overflow: hidden; } .yh-why-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.04) 0%, transparent 70%); opacity: 0; transition: opacity 0.35s; } .yh-why-card:hover { border-color: rgba(34, 211, 238, 0.35); background: rgba(17, 27, 44, 0.55); transform: translateY(-3px); box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.5), 0 0 30px -10px rgba(34, 211, 238, 0.08); } .yh-why-card:hover::before { opacity: 1; } .yh-why-card svg { flex-shrink: 0; transition: filter 0.3s; } .yh-why-card:hover svg { filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.5)); } .yh-why-title { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--yh-fg); letter-spacing: -0.01em; } .yh-why-copy { margin: 0; color: var(--yh-muted-foreground); font-size: 0.8rem; line-height: 1.55; } .yh-industries-grid { gap: 0.75rem; } .yh-industry-card { padding: 1.25rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; } .yh-industry-name { font-size: 0.8rem; font-weight: 500; } .yh-cred-shell { overflow: hidden; position: relative; } .yh-cred-grid-bg { position: absolute; inset: 0; opacity: 0.15; pointer-events: none; } .yh-cred-grid { align-items: center; gap: 2.5rem; position: relative; } .yh-cred-title { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; } .yh-cred-copy { margin-top: 1rem; color: var(--yh-muted-foreground); max-width: 28rem; } .yh-cred-badges { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .yh-cred-badge { padding: 1rem; text-align: center; } .yh-cred-label { font-size: 0.65rem; letter-spacing: 0.2em; color: var(--yh-primary); } .yh-cred-name { margin-top: 0.25rem; font-weight: 600; } .yh-faq-narrow { max-width: 880px; margin-inline: auto; } .yh-radius-xl { border-radius: 1.25rem; } @media (max-width: 900px) { .yh-djac-grid, .yh-cred-grid { gap: 1.5rem; } } /* About page helpers */ .yh-hero-compact { min-height: auto; padding: 9rem 0 5rem; } .yh-hero-compact-sm { min-height: auto; padding: 9rem 0 4rem; } .yh-pill-md-gap { margin-bottom: 1.5rem; } .yh-pill-sm-gap { margin-bottom: 1rem; } .yh-grid-gap-15 { gap: 1.5rem; } .yh-grid-gap-10 { gap: 1rem; } .yh-grid-gap-075 { gap: 0.75rem; } .yh-card-strong-lg { padding: 2.25rem; } .yh-about-title { margin-top: 0.75rem; font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.15; } .yh-about-copy { margin-top: 1rem; color: var(--yh-muted-foreground); line-height: 1.7; } .yh-link-foreground { color: var(--yh-foreground); text-decoration: underline; } /* ── About Hero Grid ── */ .yh-about-hero-grid { align-items: center; gap: 2.5rem; } /* ── About Threat Visualization ── */ .yh-about-threat-viz { position: relative; height: 300px; display: flex; align-items: center; justify-content: center; } @media (max-width: 767px) { .yh-about-threat-viz { height: 200px; } } .yh-threat-core { position: absolute; width: 18px; height: 18px; background: var(--yh-primary); border-radius: 50%; box-shadow: 0 0 20px rgba(34,211,238,0.5), 0 0 60px rgba(34,211,238,0.2); z-index: 2; animation: yh-core-glow 2s ease-in-out infinite; } @keyframes yh-core-glow { 0%, 100% { box-shadow: 0 0 20px rgba(34,211,238,0.5), 0 0 60px rgba(34,211,238,0.2); } 50% { box-shadow: 0 0 30px rgba(34,211,238,0.8), 0 0 90px rgba(34,211,238,0.35); } } .yh-threat-pulse { position: absolute; width: 18px; height: 18px; border: 1px solid rgba(34,211,238,0.4); border-radius: 50%; animation: yh-pulse-ring 2.5s ease-out infinite; } .yh-threat-pulse-2 { animation-delay: 0.8s; } .yh-threat-pulse-3 { animation-delay: 1.6s; } @keyframes yh-pulse-ring { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(9); opacity: 0; } } .yh-threat-node { position: absolute; width: 5px; height: 5px; background: rgba(34,211,238,0.8); border-radius: 50%; box-shadow: 0 0 8px rgba(34,211,238,0.4); animation: yh-node-flicker 3s ease-in-out infinite; } .yh-threat-node::after { content: ''; position: absolute; top: 50%; left: 50%; width: 1.5px; height: 60px; background: linear-gradient(to bottom, rgba(34,211,238,0.25), transparent); transform-origin: top; } .yh-threat-node-1 { top: 8%; left: 18%; animation-delay: 0s; } .yh-threat-node-1::after { transform: translate(-50%,0) rotate(-55deg); } .yh-threat-node-2 { top: 5%; left: 72%; animation-delay: 0.4s; } .yh-threat-node-2::after { transform: translate(-50%,0) rotate(-135deg); } .yh-threat-node-3 { top: 42%; left: 88%; animation-delay: 0.8s; } .yh-threat-node-3::after { transform: translate(-50%,0) rotate(-170deg); height: 70px; } .yh-threat-node-4 { top: 78%; left: 62%; animation-delay: 1.2s; } .yh-threat-node-4::after { transform: translate(-50%,0) rotate(170deg); } .yh-threat-node-5 { top: 72%; left: 12%; animation-delay: 1.6s; } .yh-threat-node-5::after { transform: translate(-50%,0) rotate(55deg); height: 65px; } .yh-threat-node-6 { top: 30%; left: 4%; animation-delay: 2s; } .yh-threat-node-6::after { transform: translate(-50%,0) rotate(20deg); } .yh-threat-node-7 { top: 20%; left: 50%; animation-delay: 0.6s; } .yh-threat-node-7::after { transform: translate(-50%,0) rotate(-90deg); height: 50px; } .yh-threat-node-8 { top: 60%; left: 38%; animation-delay: 1.4s; } .yh-threat-node-8::after { transform: translate(-50%,0) rotate(90deg); height: 55px; } @keyframes yh-node-flicker { 0%, 100% { opacity: 0.3; transform: scale(1); } 30% { opacity: 1; transform: scale(1.5); } 60% { opacity: 0.5; transform: scale(1); } } /* ── Orbiting Particles ── */ .yh-threat-orb { position: absolute; width: 3px; height: 3px; background: rgba(34,211,238,0.7); border-radius: 50%; top: 50%; left: 50%; animation: yh-orb-orbit 8s linear infinite; box-shadow: 0 0 6px rgba(34,211,238,0.4); } .yh-threat-orb-2 { width: 2px; height: 2px; animation-duration: 12s; animation-direction: reverse; opacity: 0.6; } @keyframes yh-orb-orbit { 0% { transform: translate(-50%,-50%) rotate(0deg) translateX(90px) rotate(0deg); } 100% { transform: translate(-50%,-50%) rotate(360deg) translateX(90px) rotate(-360deg); } } /* ── Scan Line ── */ .yh-threat-scan { position: absolute; left: 5%; right: 5%; height: 1px; background: linear-gradient(90deg, transparent, rgba(34,211,238,0.2), transparent); animation: yh-scanner 4s linear infinite; } @keyframes yh-scanner { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } } /* ── Data Stream ── */ .yh-threat-data { position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(0deg, transparent, transparent 24px, rgba(34,211,238,0.02) 24px, rgba(34,211,238,0.02) 25px); animation: yh-data-flow 20s linear infinite; } @keyframes yh-data-flow { 0% { background-position: 0 0; } 100% { background-position: 0 50px; } } @media (max-width: 767px) { .yh-about-threat-viz { display: none; } } /* ── Solutions Hero Grid ── */ .yh-solutions-hero-grid { align-items: center; gap: 2.5rem; } /* ── Solutions Shield Viz ── */ .yh-solutions-viz { position: relative; height: 400px; display: flex; align-items: center; justify-content: center; } .yh-sol-shield { position: relative; z-index: 2; animation: yh-shield-float 6s ease-in-out infinite; } .yh-sol-shield svg { width: 280px; height: 340px; } .yh-sol-check { position: absolute; top: 50%; left: 50%; width: 34px; height: 46px; border-right: 4px solid rgba(34,211,238,0.6); border-bottom: 4px solid rgba(34,211,238,0.6); transform: translate(-50%,-60%) rotate(45deg); animation: yh-check-draw 3s ease-in-out infinite; } @keyframes yh-shield-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes yh-check-draw { 0%, 70%, 100% { opacity: 0.3; } 80% { opacity: 1; } } .yh-sol-ring { position: absolute; border: 2px solid rgba(34,211,238,0.18); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%); animation: yh-ring-expand 4s ease-out infinite; } .yh-sol-ring-1 { width: 300px; height: 300px; } .yh-sol-ring-2 { width: 300px; height: 300px; animation-delay: 1.3s; } .yh-sol-ring-3 { width: 300px; height: 300px; animation-delay: 2.6s; } @keyframes yh-ring-expand { 0% { width: 220px; height: 220px; opacity: 0.5; } 100% { width: 480px; height: 480px; opacity: 0; } } /* Corner accent dots */ .yh-sol-dot { position: absolute; width: 6px; height: 6px; background: rgba(34,211,238,0.5); border-radius: 50%; animation: yh-dot-pulse 2s ease-in-out infinite; } .yh-sol-dot-1 { top: 5%; left: 5%; animation-delay: 0s; } .yh-sol-dot-2 { top: 5%; right: 5%; animation-delay: 0.5s; } .yh-sol-dot-3 { bottom: 5%; left: 5%; animation-delay: 1s; } .yh-sol-dot-4 { bottom: 5%; right: 5%; animation-delay: 1.5s; } @keyframes yh-dot-pulse { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.8); } } /* Background grid for solutions viz */ .yh-sol-bg-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(34,211,238,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,0.03) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 0%, transparent 70%); } @media (max-width: 767px) { .yh-solutions-viz { height: 240px; } } /* ── AI Page Glitch Robot Viz ── */ .yh-ai-hero-grid { align-items: center; gap: 2.5rem; } .yh-ai-viz { position: relative; height: 420px; display: flex; align-items: center; justify-content: center; } .yh-ai-glitch-frame { position: absolute; z-index: 4; } .yh-ai-glitch-text { font-family: var(--yh-font-mono); font-size: 14rem; font-weight: 800; color: rgba(34,211,238,0.18); letter-spacing: -0.12em; user-select: none; line-height: 1; position: relative; } .yh-ai-glitch-text::after { content: '01'; position: absolute; inset: 0; color: rgba(34,211,238,0.04); animation: yh-glitch-flicker 0.15s infinite; z-index: -1; } .yh-ai-glitch-shadow { position: absolute; top: 6px; left: -6px; color: rgba(239,68,68,0.1); animation: yh-glitch-offset 3s infinite; clip-path: inset(35% 0 35% 0); z-index: -1; } .yh-ai-glitch-shadow-2 { position: absolute; top: -4px; left: 8px; color: rgba(34,211,238,0.12); animation: yh-glitch-offset 2.5s 0.8s infinite; clip-path: inset(10% 0 75% 0); z-index: -1; } .yh-ai-glitch-shadow-3 { position: absolute; top: 10px; left: -10px; color: rgba(34,211,238,0.08); animation: yh-glitch-offset 3.5s 1.6s infinite; clip-path: inset(60% 0 10% 0); z-index: -1; } @keyframes yh-glitch-offset { 0%,90%,100%{transform:none;opacity:0} 92%{transform:translate(10px,-6px);opacity:1} 94%{transform:translate(-8px,4px);opacity:1} 96%{transform:none;opacity:0} } @keyframes yh-glitch-flicker { 0%,100%{opacity:.04} 50%{opacity:.08} } .yh-ai-eye { position: absolute; z-index: 5; } .yh-ai-eye-outer { width: 100px; height: 100px; border: 2px solid rgba(34,211,238,0.35); border-radius: 50%; animation: yh-eye-pulse 3s ease-in-out infinite; } .yh-ai-eye-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 50px; height: 50px; border: 2px solid rgba(34,211,238,0.55); border-radius: 50%; } .yh-ai-eye-pupil { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 14px; height: 14px; background: rgba(34,211,238,0.9); border-radius: 50%; box-shadow: 0 0 30px rgba(34,211,238,0.6); animation: yh-pupil-scan 5s ease-in-out infinite; } @keyframes yh-eye-pulse { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.1);opacity:1} } @keyframes yh-pupil-scan { 0%,100%{transform:translate(-50%,-50%)} 25%{transform:translate(-25%,-65%)} 50%{transform:translate(-50%,-50%)} 75%{transform:translate(-75%,-35%)} } .yh-ai-scan-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border: 1px solid rgba(34,211,238,0.1); border-radius: 50%; animation: yh-ring-grow 3s ease-out infinite; z-index: 1; } .yh-ai-scan-ring-2 { animation-delay: 1.5s; z-index: 1; } @keyframes yh-ring-grow { 0%{width:50px;height:50px;opacity:.5} 100%{width:260px;height:260px;opacity:0} } .yh-ai-binary-stream { position: absolute; font-family: var(--yh-font-mono); font-size: 0.6rem; color: rgba(34,211,238,0.15); letter-spacing: 0.25em; white-space: nowrap; pointer-events: none; z-index: 3; } .yh-ai-bin-1 { top: 6%; right: 5%; } .yh-ai-bin-2 { bottom: 6%; left: 3%; } .yh-ai-bin-3 { bottom: 18%; right: 8%; } @media (max-width: 767px) { .yh-ai-viz { height: 260px; } .yh-ai-glitch-text { font-size: 6rem; } .yh-ai-eye-outer { width: 70px; height: 70px; } .yh-ai-eye-inner { width: 36px; height: 36px; } } .yh-person-card { display: flex; gap: 1.25rem; align-items: center; padding: 1.25rem; background: rgba(17, 27, 44, 0.4); border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 1rem; transition: transform 0.3s var(--yh-ease); } .yh-person-card:hover { transform: translateY(-2px); } .yh-person-avatar-wrap { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1px solid var(--yh-border-strong); } .yh-person-avatar { width: 100%; height: 100%; object-fit: cover; } .yh-person-name { font-size: 1.125rem; } .yh-person-role { margin-top: 0.25rem; font-size: 0.7rem; letter-spacing: 0.16em; color: var(--yh-primary); text-transform: uppercase; } .yh-person-copy { margin-top: 0.5rem; color: var(--yh-muted-foreground); font-size: 0.875rem; line-height: 1.6; } .yh-cert-card { text-align: center; padding: 1.75rem; background: rgba(17, 27, 44, 0.5); border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 1.125rem; transition: transform 0.3s var(--yh-ease); } .yh-cert-card:hover { transform: translateY(-2px); } .yh-cert-value { font-size: 1.5rem; font-weight: 700; } .yh-cert-meta { margin-top: 0.25rem; font-size: 0.7rem; letter-spacing: 0.18em; color: var(--yh-muted-foreground); } .yh-city-card { padding: 1.75rem; background: rgba(17, 27, 44, 0.5); border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 1.125rem; transition: transform 0.3s var(--yh-ease); } .yh-city-card:hover { transform: translateY(-2px); } .yh-city-label { font-size: 0.7rem; letter-spacing: 0.2em; color: var(--yh-primary); } .yh-city-title { margin-top: 0.5rem; font-size: 1.25rem; } .yh-city-copy { margin-top: 0.5rem; color: var(--yh-muted-foreground); font-size: 0.85rem; line-height: 1.6; } line-height: 1.05; font-weight: 600; max-width: 42rem; margin: 0 auto; letter-spacing: -0.03em; display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; .yh-section-top-sm { padding-top: 1rem; } .yh-hidden { display: none; } .yh-noscript-hidden { display: none; visibility: hidden; } .yh-state-loading { text-align: center; padding: 4rem 2rem; } .yh-state-spinner { display: inline-block; width: 48px; height: 48px; border: 3px solid rgba(34, 211, 238, 0.2); border-top-color: var(--yh-primary); border-radius: 50%; animation: yh-spin 0.9s linear infinite; } .yh-state-loading-copy { margin-top: 1rem; color: var(--yh-muted-foreground); } .yh-state-card { text-align: center; padding: 3rem 2rem; max-width: 640px; margin: 0 auto; } .yh-state-icon { margin: 0 auto 1rem; display: block; } .yh-state-title { font-family: var(--yh-font-display); color: #fff; font-size: 1.4rem; margin: 0 0 0.5rem; } .yh-state-copy { color: var(--yh-muted-foreground); margin: 0 0 1.5rem; } .yh-state-copy-tight { color: var(--yh-muted-foreground); margin: 0; } .yh-newsletter-card { max-width: 760px; margin: 0 auto; padding: 2rem; text-align: center; } .yh-newsletter-title { font-family: var(--yh-font-display); color: #fff; font-size: 1.6rem; margin: 0 0 0.5rem; letter-spacing: -0.01em; } .yh-newsletter-copy { color: var(--yh-muted-foreground); margin: 0 0 1.25rem; } .yh-newsletter-form { max-width: 560px; margin: 0 auto; display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; } .yh-newsletter-input { flex: 1 1 260px; min-height: 44px; padding: 0.7rem 0.9rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; } .yh-honeypot-input { position: absolute; left: -9999px; opacity: 0; pointer-events: none; } /* AI/ML activities page helpers */ .yh-ai-stat-card { text-align: center; padding: 1.5rem; } .yh-ai-stat-value { font-size: 1.75rem; font-weight: 700; color: var(--yh-primary); } .yh-ai-stat-meta { margin-top: 0.25rem; font-size: 0.7rem; letter-spacing: 0.18em; color: var(--yh-muted-foreground); } .yh-ai-service-card { padding: 1.75rem; } .yh-ai-service-kicker { font-size: 0.7rem; letter-spacing: 0.2em; color: var(--yh-primary); } .yh-ai-service-title { margin-top: 0.75rem; font-size: 1.25rem; } .yh-ai-service-copy { margin-top: 0.5rem; color: var(--yh-muted-foreground); font-size: 0.9rem; line-height: 1.65; } .yh-ai-link-primary { color: var(--yh-primary); } .yh-ai-strategy-card { padding: 2rem; } .yh-ai-strategy-title { margin-top: 0.75rem; font-size: 1.4rem; } .yh-ai-strategy-copy { margin-top: 0.75rem; color: var(--yh-muted-foreground); line-height: 1.7; } .yh-ai-for-card { padding: 1.5rem; display: flex; align-items: center; gap: 0.75rem; background: rgba(17, 27, 44, 0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(148, 163, 184, 0.12); border-radius: 1rem; transition: all 0.3s ease; } .yh-ai-for-card:hover { border-color: rgba(34, 211, 238, 0.3); background: rgba(17, 27, 44, 0.55); transform: translateY(-2px); box-shadow: 0 0 25px -10px rgba(34, 211, 238, 0.1); } .yh-ai-for-card svg { flex-shrink: 0; } .yh-ai-for-title { font-size: 1rem; font-weight: 600; margin: 0; } .yh-ai-for-copy { margin-top: 0.5rem; color: var(--yh-muted-foreground); font-size: 0.875rem; line-height: 1.65; } .yh-ai-framework-card { text-align: center; padding: 1.5rem; } .yh-ai-framework-title { font-size: 1.25rem; font-weight: 700; } .yh-ai-framework-meta { margin-top: 0.25rem; font-size: 0.7rem; letter-spacing: 0.18em; color: var(--yh-muted-foreground); } .yh-ai-state-loading { text-align: center; padding: 3rem 2rem; } .yh-ai-state-spinner { display: inline-block; width: 42px; height: 42px; border: 3px solid rgba(34, 211, 238, 0.2); border-top-color: var(--yh-primary); border-radius: 50%; animation: yh-spin 0.9s linear infinite; } .yh-ai-state-loading-copy { margin-top: 1rem; color: var(--yh-muted-foreground); } .yh-ai-state-card { text-align: center; padding: 2.5rem 2rem; max-width: 680px; margin: 0 auto; } .yh-ai-state-title { font-family: var(--yh-font-display); color: #fff; font-size: 1.3rem; margin: 0 0 0.5rem; } .yh-ai-state-copy { color: var(--yh-muted-foreground); margin: 0 0 1.25rem; } .yh-ai-insights-actions { margin-top: 1.5rem; text-align: center; } color: var(--yh-muted-foreground); max-width: 38rem; margin-inline: auto; line-height: 1.7; /* Blog post page helpers */ .yh-blog-loading-section { padding-top: 9rem; text-align: center; } .yh-blog-loading-spinner { display: inline-block; width: 56px; height: 56px; border: 3px solid rgba(34, 211, 238, 0.2); border-top-color: var(--yh-primary); border-radius: 50%; animation: yh-spin 0.9s linear infinite; } .yh-blog-loading-copy { margin-top: 1rem; color: var(--yh-muted-foreground); } .yh-blog-error-card { max-width: 640px; margin: 0 auto; text-align: center; padding: 3rem 2rem; } .yh-blog-error-section { padding-top: 9rem; } .yh-blog-post-section { padding-top: 8rem; } .yh-blog-error-icon { margin: 0 auto 1rem; display: block; } .yh-blog-error-title { font-family: var(--yh-font-display); color: #fff; font-size: 1.6rem; margin: 0 0 0.5rem; } .yh-blog-error-copy { color: var(--yh-muted-foreground); margin: 0 0 1.5rem; } .yh-blog-article-wrap { max-width: 880px; } .yh-blog-back-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--yh-primary); font-size: 0.9rem; text-decoration: none; margin-bottom: 1.5rem; } .yh-blog-meta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; font-family: var(--yh-font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yh-primary); margin-bottom: 1.25rem; } .yh-blog-meta-sep, .yh-blog-meta-muted { color: var(--yh-muted-foreground); } .yh-blog-title { font-size: clamp(2rem, 4.5vw, 3.4rem); margin: 0 0 2rem; letter-spacing: -0.02em; } .yh-blog-image { width: 100%; height: auto; display: block; aspect-ratio: 1200 / 630; } .yh-blog-image-container { margin: 0 0 2.5rem; border-radius: 1rem; overflow: hidden; border: 1px solid var(--yh-border); background: #0a1628; aspect-ratio: 1200 / 630; } .yh-blog-share-wrap { margin-top: 3rem; text-align: center; } .yh-blog-share-label { color: var(--yh-muted-foreground); font-size: 0.9rem; margin: 0 0 0.85rem; } .yh-blog-share-actions { display: flex; justify-content: center; gap: 0.75rem; } .yh-blog-share-btn { width: 44px; height: 44px; border-radius: 0.7rem; border: 1px solid var(--yh-border); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color .2s ease, border-color .2s ease; } .yh-blog-share-btn:hover, .yh-blog-share-btn:focus-visible { color: var(--yh-primary); border-color: rgba(34, 211, 238, 0.5); } .yh-blog-allinsights-cta { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--yh-border); text-align: center; } /* eJPT voucher page helpers */ .yh-ejpt-hero { padding: 9rem 0 4rem; min-height: auto; } .yh-ejpt-hero-inner { max-width: 960px; margin: 0 auto; text-align: center; } .yh-ejpt-actions-wrap { margin-top: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .yh-ejpt-actions-row { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .yh-ejpt-stats-grid { margin-top: 3rem; } .yh-ejpt-stat-label { font-family: var(--yh-font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--yh-muted-foreground); } .yh-ejpt-stat-label-primary { color: var(--yh-primary); } .yh-ejpt-stat-value { font-family: var(--yh-font-display); font-size: 2rem; line-height: 1.1; margin-top: 0.5rem; color: var(--yh-foreground); } .yh-ejpt-stat-value-lg { font-size: 2.25rem; } .yh-ejpt-stat-value-primary { color: var(--yh-primary); } .yh-ejpt-card-title { margin-top: 0.75rem; font-size: 2rem; } .yh-ejpt-card-copy { color: var(--yh-muted-foreground); line-height: 1.8; margin: 1rem 0 1.5rem; } .yh-ejpt-pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; } .yh-ejpt-pill-tight { margin: 0; } .yh-ejpt-list-tight { margin: 1rem 0 0; padding-left: 1.1rem; color: var(--yh-muted-foreground); line-height: 1.9; } .yh-ejpt-grid-top { margin-top: 1.5rem; } .yh-ejpt-subtitle { font-family: var(--yh-font-display); font-size: 1.15rem; margin: 0 0 0.5rem; } .yh-ejpt-copy-tight { color: var(--yh-muted-foreground); line-height: 1.75; margin: 0; } .yh-ejpt-table-wrap { overflow-x: auto; border-radius: 1rem; border: 1px solid rgba(148, 163, 184, 0.18); background: rgba(11, 19, 32, 0.5); } .yh-ejpt-table { width: 100%; border-collapse: collapse; min-width: 720px; } .yh-ejpt-table th { padding: 1rem 1.25rem; font-family: var(--yh-font-display); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em; border-bottom: 2px solid rgba(34, 211, 238, 0.25); background: rgba(17, 27, 44, 0.6); } .yh-ejpt-table td { padding: 0.85rem 1.25rem; border-bottom: 1px solid rgba(148, 163, 184, 0.08); font-size: 0.9rem; } .yh-ejpt-table tr:last-child td { border-bottom: none; } .yh-ejpt-th-left { text-align: left; } .yh-ejpt-th-center { text-align: center; } .yh-ejpt-th-primary { color: var(--yh-primary); } .yh-ejpt-tbody { color: var(--yh-muted-foreground); } .yh-ejpt-feature { color: var(--yh-foreground); font-weight: 600; } .yh-ejpt-cell-center { text-align: center; } .yh-ejpt-cell-highlight { text-align: center; color: var(--yh-primary); font-weight: 700; } .yh-ejpt-step-title { font-family: var(--yh-font-display); font-size: 1.15rem; margin: 0.75rem 0 0.5rem; } .yh-ejpt-tier-title { font-family: var(--yh-font-display); font-size: 2rem; margin: 0.75rem 0 0.5rem; } .yh-ejpt-tier-copy { color: var(--yh-muted-foreground); margin: 0; } .yh-ejpt-tier-copy-gap { margin: 0 0 0.75rem; } .yh-ejpt-tier-highlight { color: var(--yh-primary); margin: 0; } .yh-ejpt-list-reset-top { margin-top: 0; } .yh-ejpt-copy-gap { color: var(--yh-muted-foreground); line-height: 1.75; margin: 0 0 1.25rem; } .yh-ejpt-faq-shell { border-radius: 1rem; overflow: hidden; border: 1px solid var(--yh-border); } .yh-ejpt-final-card { text-align: center; padding: 3rem 2rem; } .yh-ejpt-final-title { margin-top: 0.75rem; } .yh-ejpt-final-copy { max-width: 44rem; margin: 1rem auto 0; color: var(--yh-muted-foreground); line-height: 1.75; } .yh-ejpt-final-actions { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .yh-ejpt-final-note { margin-top: 1rem; color: var(--yh-muted-foreground); font-size: 0.875rem; } .yh-ejpt-mobile-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(34, 211, 238, 0.35); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); backdrop-filter: blur(12px); } .yh-ejpt-mobile-kicker { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--yh-muted-foreground); } .yh-ejpt-mobile-price { font-family: var(--yh-font-display); font-size: 1.15rem; line-height: 1.2; } .yh-ejpt-mobile-save { color: var(--yh-primary); font-size: 0.875rem; } /* DJAC platform page helpers */ .yh-djac-hero-grid { gap: 3rem; align-items: center; } .yh-djac-hero-title { font-size: clamp(2.5rem, 7vw, 4.5rem); } .yh-djac-hero-lead { font-size: 1.05rem; } .yh-djac-panel { aspect-ratio: 4 / 3; padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; } .yh-djac-panel-top { display: flex; justify-content: space-between; align-items: center; } .yh-djac-panel-brand { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; } .yh-djac-panel-live { font-size: 0.65rem; letter-spacing: 0.2em; color: var(--yh-primary); } .yh-djac-metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .yh-djac-metric-card { padding: 0.85rem; border: 1px solid rgba(34, 211, 238, 0.25); border-radius: 0.75rem; background: rgba(11, 19, 32, 0.5); } .yh-djac-metric-label { font-size: 0.6rem; letter-spacing: 0.18em; color: var(--yh-muted-foreground); } .yh-djac-metric-value { margin-top: 0.25rem; font-weight: 700; font-size: 1.1rem; color: var(--yh-primary); } .yh-djac-panel-foot { font-size: 0.65rem; letter-spacing: 0.18em; color: var(--yh-muted-foreground); text-align: center; } .yh-djac-mission-card { padding: 1.75rem; background: rgba(17, 27, 44, 0.5); border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 1.125rem; transition: transform 0.3s var(--yh-ease), border-color 0.3s; } .yh-djac-mission-card:hover { border-color: rgba(34, 211, 238, 0.3); transform: translateY(-2px); } .yh-djac-mission-title { margin-top: 1.25rem; font-size: 1.05rem; } .yh-djac-mission-copy { margin-top: 0.5rem; color: var(--yh-muted-foreground); font-size: 0.875rem; line-height: 1.65; } .yh-djac-features-grid { gap: 1px; border-radius: 1.25rem; overflow: hidden; } .yh-djac-feature-card { padding: 2rem; background: rgba(17, 27, 44, 0.5); transition: transform 0.3s var(--yh-ease); } .yh-djac-feature-card:hover { transform: translateY(-2px); } .yh-djac-feature-index { font-size: 0.65rem; letter-spacing: 0.2em; color: var(--yh-primary); } .yh-djac-feature-title { margin-top: 0.5rem; font-size: 1.25rem; } .yh-djac-feature-copy { margin-top: 0.75rem; color: var(--yh-muted-foreground); font-size: 0.9rem; line-height: 1.65; } .yh-djac-cred-shell { overflow: hidden; position: relative; padding: 2.5rem; } .yh-djac-cred-grid-bg { position: absolute; inset: 0; opacity: 0.18; pointer-events: none; } .yh-djac-cred-grid { align-items: center; gap: 2.5rem; position: relative; } .yh-djac-cred-title { margin-top: 0.75rem; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; } .yh-djac-cred-copy { margin-top: 1rem; color: var(--yh-muted-foreground); max-width: 32rem; line-height: 1.7; } .yh-djac-cred-badges { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .yh-djac-cred-badge { padding: 1rem; text-align: center; } .yh-djac-cred-label { font-size: 0.65rem; letter-spacing: 0.2em; color: var(--yh-primary); } .yh-djac-cred-name { margin-top: 0.25rem; font-weight: 600; } /* Cloud security consulting page helpers */ .yh-cloud-hero-content { max-width: 900px; } .yh-cloud-eyebrow { margin-bottom: 1.25rem; } .yh-cloud-hero-title { font-family: var(--yh-font-display); font-size: clamp(2.5rem, 6vw, 4.75rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; margin: 0; } .yh-cloud-hero-lead { margin: 2rem 0 0; max-width: 760px; color: var(--yh-muted-foreground); font-size: 1.125rem; line-height: 1.7; } .yh-cloud-actions { margin-top: 2.5rem; } .yh-cloud-card-title { font-family: var(--yh-font-display); font-size: 1.2rem; margin: 0 0 1rem; } .yh-cloud-list-tight { margin: 0; padding-left: 1.1rem; color: var(--yh-muted-foreground); line-height: 1.9; } .yh-cloud-card-copy-gap { color: var(--yh-muted-foreground); line-height: 1.8; margin: 0 0 1.25rem; } .yh-cloud-faq-wrap { max-width: 900px; } .yh-cloud-faq-shell { border-radius: 1rem; overflow: hidden; border: 1px solid var(--yh-border); } .yh-cloud-related-link { text-decoration: none; display: block; } .yh-cloud-related-title { font-family: var(--yh-font-display); font-size: 1.05rem; margin: 0 0 0.4rem; color: var(--yh-foreground); } .yh-cloud-related-copy { margin: 0; color: var(--yh-muted-foreground); } /* VAPT page helpers */ .yh-vapt-hero-content { max-width: 900px; } .yh-vapt-eyebrow { margin-bottom: 1.25rem; } .yh-vapt-hero-title { font-family: var(--yh-font-display); font-size: clamp(2.5rem, 6vw, 4.75rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; margin: 0; } .yh-vapt-hero-lead { margin: 2rem 0 0; max-width: 760px; color: var(--yh-muted-foreground); font-size: 1.125rem; line-height: 1.7; } .yh-vapt-actions { margin-top: 2.5rem; } .yh-vapt-card-title { font-family: var(--yh-font-display); font-size: 1.2rem; margin: 0 0 1rem; color: var(--yh-foreground); } .yh-vapt-card-title-gap { margin-top: 1.25rem; } .yh-vapt-list-tight { margin: 0; padding-left: 1.1rem; color: var(--yh-muted-foreground); line-height: 1.9; } .yh-vapt-copy-tight { color: var(--yh-muted-foreground); line-height: 1.8; margin: 0; } .yh-vapt-grid-top { margin-top: 1.5rem; } .yh-vapt-subtitle { font-family: var(--yh-font-display); font-size: 1.1rem; margin: 0 0 0.6rem; color: var(--yh-foreground); } .yh-vapt-copy-tight-sm { margin: 0; color: var(--yh-muted-foreground); line-height: 1.75; } .yh-vapt-faq-wrap { max-width: 900px; } .yh-vapt-faq-shell { border-radius: 1rem; overflow: hidden; border: 1px solid var(--yh-border); } .yh-vapt-related-link { text-decoration: none; display: block; } .yh-vapt-related-title { font-family: var(--yh-font-display); font-size: 1.05rem; margin: 0 0 0.4rem; color: var(--yh-foreground); } .yh-vapt-related-copy { margin: 0; color: var(--yh-muted-foreground); } /* Locale homepage helpers (Arabic / Chinese) */ .yh-locale-ar-font { font-family: 'Cairo', 'Tajawal', sans-serif; } .yh-locale-zh-font { font-family: 'Noto Sans SC', 'Plus Jakarta Sans', sans-serif; } .yh-locale-hero-shell { min-height: auto; padding: 9rem 0 4rem; } .yh-locale-eyebrow-gap { margin-bottom: 1.25rem; } .yh-locale-hero-title { font-family: var(--yh-font-display); font-size: clamp(2.2rem, 6vw, 4.5rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 600; margin: 0; } .yh-locale-hero-lead { color: var(--yh-muted-foreground); font-size: 1.125rem; line-height: 1.8; } .yh-locale-hero-lead-gap { margin-top: 2rem; } .yh-locale-actions-top { margin-top: 2.5rem; } .yh-locale-service-title { font-family: var(--yh-font-display); margin: 0 0 0.7rem; } .yh-locale-service-copy { margin: 0; color: var(--yh-muted-foreground); line-height: 1.75; } .yh-locale-service-title-sm { font-family: var(--yh-font-display); margin: 0 0 0.6rem; } .yh-locale-service-copy-sm { margin: 0; color: var(--yh-muted-foreground); } .yh-locale-final-section { padding-bottom: 6rem; } .yh-locale-final-shell { border-radius: 1.625rem; padding: 3.5rem 2rem; text-align: center; border: 1px solid rgba(148, 163, 184, 0.22); background: rgba(17, 27, 44, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: relative; overflow: hidden; box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.72); } .yh-locale-final-shell::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(34, 211, 238, 0.05) 0%, transparent 60%); pointer-events: none; } .yh-locale-final-title { font-family: var(--yh-font-display); font-size: clamp(2rem, 4vw, 3rem); margin: 0; } .yh-locale-final-copy { margin: 1rem auto 0; max-width: 38rem; color: var(--yh-muted-foreground); line-height: 1.7; } .yh-locale-final-actions { margin-top: 2rem; } .yh-locale-footer-blurb { margin-top: 1rem; color: var(--yh-muted-foreground); font-size: 0.875rem; max-width: 24rem; line-height: 1.65; } .yh-locale-footer-hq-copy { color: var(--yh-muted-foreground); font-size: 0.875rem; line-height: 1.65; } .yh-locale-footer-email { color: var(--yh-foreground); } .yh-locale-footer-phone { font-family: var(--yh-font-mono); font-size: 0.8rem; letter-spacing: 0.06em; } /* AI/ML projects page helpers */ .yh-aimlproj-hero { padding-top: 7.5rem; } .yh-aimlproj-mt-1 { margin-top: 1rem; } .yh-aimlproj-mt-125 { margin-top: 1.25rem; } .yh-aimlproj-mt-15 { margin-top: 1.5rem; } .yh-aimlproj-mb-1 { margin-bottom: 1rem; } .yh-aimlproj-mb-125 { margin-bottom: 1.25rem; } .yh-aimlproj-pad-150 { padding: 1.5rem; } .yh-aimlproj-pad-125 { padding: 1.25rem; } .yh-aimlproj-pad-120 { padding: 1.2rem; } .yh-aimlproj-pad-115 { padding: 1.15rem; } .yh-aimlproj-pad-110 { padding: 1.1rem; } .yh-aimlproj-title-lg { font-size: clamp(1.6rem, 3vw, 2.2rem); } .yh-aimlproj-title-faq { font-size: clamp(1.45rem, 2.7vw, 2rem); } .yh-aimlproj-title-md { font-size: clamp(1.4rem, 2.6vw, 2rem); } .yh-aimlproj-title-sm { font-size: clamp(1.35rem, 2.5vw, 1.95rem); } .yh-aimlproj-faq { max-width: 920px; } .yh-aimlproj-mono-muted { font-size: 0.7rem; letter-spacing: 0.16em; color: var(--yh-muted-foreground); } .yh-aimlproj-mono-primary-sm { font-size: 0.7rem; letter-spacing: 0.16em; color: var(--yh-primary); } .yh-aimlproj-mono-primary { font-size: 0.72rem; letter-spacing: 0.16em; color: var(--yh-primary); } .yh-aimlproj-h3-md { margin-top: 0.8rem; font-size: 1.1rem; } .yh-aimlproj-h3-sm { font-size: 1rem; } .yh-aimlproj-h3-sm-gap { margin-top: 0.5rem; font-size: 1rem; } .yh-aimlproj-h3-sm-gap-tight { margin-top: 0.45rem; font-size: 1rem; } .yh-aimlproj-copy-md { margin-top: 0.6rem; color: var(--yh-muted-foreground); line-height: 1.65; } .yh-aimlproj-copy-base { margin-top: 0.5rem; color: var(--yh-muted-foreground); line-height: 1.65; } .yh-aimlproj-copy-sm { margin-top: 0.45rem; color: var(--yh-muted-foreground); line-height: 1.65; } .yh-aimlproj-outcome { margin-top: 0.8rem; font-size: 0.9rem; } .yh-aimlproj-btn-gap { margin-top: 0.9rem; } .yh-aimlproj-footer-blurb { margin-top: 1rem; color: var(--yh-muted-foreground); font-size: 0.875rem; max-width: 24rem; line-height: 1.65; } .yh-aimlproj-footer-hq { color: var(--yh-muted-foreground); font-size: 0.875rem; line-height: 1.65; } .yh-aimlproj-footer-email { color: var(--yh-foreground); } /* Security awareness training page helpers */ .yh-awareness-hero { min-height: auto; padding: 9rem 0 4rem; } .yh-awareness-hero-content { max-width: 900px; } .yh-awareness-eyebrow { margin-bottom: 1.25rem; } .yh-awareness-hero-title { font-family: var(--yh-font-display); font-size: clamp(2.5rem, 6vw, 4.75rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; margin: 0; } .yh-awareness-hero-lead { margin: 2rem 0 0; max-width: 760px; color: var(--yh-muted-foreground); font-size: 1.125rem; line-height: 1.7; } .yh-awareness-actions { margin-top: 2.5rem; } .yh-awareness-card-title { font-family: var(--yh-font-display); margin: 0 0 1rem; } .yh-awareness-list { margin: 0; padding-left: 1.1rem; color: var(--yh-muted-foreground); line-height: 1.9; } .yh-awareness-copy { margin: 0; color: var(--yh-muted-foreground); line-height: 1.75; } .yh-awareness-faq-wrap { max-width: 900px; } .yh-awareness-faq-shell { border-radius: 1rem; overflow: hidden; border: 1px solid var(--yh-border); } .yh-awareness-related-link { text-decoration: none; display: block; } .yh-awareness-related-title { font-family: var(--yh-font-display); font-size: 1.05rem; margin: 0 0 0.4rem; color: var(--yh-foreground); } .yh-awareness-related-copy { margin: 0; color: var(--yh-muted-foreground); } @media (max-width: 767px) { .yh-person-card { flex-direction: column; text-align: center; } } /* Custom scrollbar */ .yh-theme ::-webkit-scrollbar { width: 10px; height: 10px; } .yh-theme ::-webkit-scrollbar-track { } .yh-theme ::-webkit-scrollbar-thumb { border-radius: 8px; border: 2px solid var(--yh-background); } .yh-theme ::-webkit-scrollbar-thumb:hover { } /* Utility helpers */ .yh-center { text-align: center; } .yh-mt-8 { margin-top: 2rem; } .yh-mt-10 { margin-top: 2.5rem; } .yh-flex { display: flex; } .yh-flex-col { flex-direction: column; } .yh-items-center { align-items: center; } .yh-justify-center { justify-content: center; } .yh-gap-3 { gap: 0.75rem; } .yh-gap-4 { gap: 1rem; } .yh-flex-wrap { flex-wrap: wrap; } @media (min-width: 640px) { .yh-sm-flex-row { flex-direction: row; } } /* RTL adjustments */ [dir="rtl"] .yh-marquee-track { animation-direction: reverse; } [dir="rtl"] .yh-faq-item summary::after { transform: scaleX(-1); } [dir="rtl"] .yh-faq-item[open] summary::after { transform: scaleX(-1) rotate(45deg); } /* ============================================================ FORMS: shared yh-form-card system (careers / company / etc.) ============================================================ */ .yh-form-card { width: 100%; max-width: 920px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(34, 211, 238, 0.22); border-radius: 1.5rem; padding: clamp(1.5rem, 4vw, 2.75rem); background: rgba(17, 27, 44, 0.6); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 0 40px rgba(34, 211, 238, 0.06); margin: 0 auto; } .yh-form-card h2 { font-family: var(--yh-font-display); font-size: 1.65rem; font-weight: 700; color: #fff; margin: 0 0 6px; letter-spacing: -0.01em; } .yh-form-card .yh-card-sub { color: rgba(226, 232, 240, 0.72); font-size: 0.97rem; margin: 0 0 1.5rem; line-height: 1.55; } .yh-form { display: flex; flex-direction: column; gap: 1.1rem; } .yh-form .yh-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } @media (max-width: 640px) { .yh-form .yh-grid-2 { grid-template-columns: 1fr; } } .yh-field { display: flex; flex-direction: column; gap: 0.45rem; } .yh-field label { font-size: 0.78rem; font-weight: 600; color: rgba(226, 232, 240, 0.88); letter-spacing: 0.05em; text-transform: uppercase; } .yh-field label .req { color: var(--yh-primary); margin-left: 3px; } .yh-field input, .yh-field select, .yh-field textarea { width: 100%; padding: 0 1rem; height: 3rem; border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 0.75rem; background: rgba(11, 19, 32, 0.6); color: var(--yh-foreground); font-size: 0.92rem; outline: none; transition: border-color 0.25s, background 0.25s, box-shadow 0.25s, transform 0.25s; } .yh-field input:hover, .yh-field select:hover, .yh-field textarea:hover { border-color: rgba(148, 163, 184, 0.35); background: rgba(11, 19, 32, 0.7); } .yh-field input:focus, .yh-field select:focus, .yh-field textarea:focus { border-color: rgba(34, 211, 238, 0.55); background: rgba(11, 19, 32, 0.85); box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.12), 0 0 30px -12px rgba(34, 211, 238, 0.15); transform: translateY(-1px); } .yh-field textarea { min-height: 140px; resize: vertical; padding-top: 0.75rem; } .yh-field input::placeholder, .yh-field textarea::placeholder { color: rgba(148, 163, 184, 0.55); transition: color 0.2s; } .yh-field input:focus::placeholder, .yh-field textarea:focus::placeholder { color: rgba(148, 163, 184, 0.35); } .yh-field select { appearance: none; padding-right: 2.5rem; } .yh-field select option { color: #fff; } /* Form validation states */ .yh-field.has-error input, .yh-field.has-error select, .yh-field.has-error textarea { border-color: rgba(239, 68, 68, 0.5); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); } .yh-field.has-error .yh-field-msg { color: #ef4444; font-size: 0.78rem; display: flex; align-items: center; gap: 0.3rem; animation: yh-shake 0.3s ease; } .yh-field.is-success input, .yh-field.is-success select, .yh-field.is-success textarea { border-color: rgba(52, 211, 153, 0.5); box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1); } .yh-field.is-success .yh-field-msg { color: #34d399; font-size: 0.78rem; display: flex; align-items: center; gap: 0.3rem; } .yh-field-msg { display: none; margin: 0; } @keyframes yh-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } } @keyframes yh-success-pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.3); } 70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } } .yh-field.is-success input, .yh-field.is-success select, .yh-field.is-success textarea { animation: yh-success-pulse 0.8s ease; } .yh-hint { font-size: 0.82rem; color: rgba(148, 163, 184, 0.75); margin: 0; } .yh-hint-top { margin-top: 0.5rem; } .yh-hint-link { color: var(--yh-primary); text-decoration: underline; } .yh-hint.is-warn { color: #fbbf24; } /* Contact page layout helpers */ .yh-contact-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(1.25rem, 2.4vw, 2rem); align-items: stretch; } @media (max-width: 1023px) { .yh-contact-layout { grid-template-columns: 1fr; } } .yh-contact-form-card { padding: clamp(1.6rem, 2.4vw, 2.2rem); } .yh-contact-hero { min-height: auto; padding: 9rem 0 3rem; } .yh-contact-hero-pill { margin-bottom: 1.5rem; } .yh-contact-section { padding-top: 2rem; } .yh-contact-card-title { font-size: 1.5rem; font-weight: 600; } .yh-contact-card-sub { margin-top: 0.5rem; color: var(--yh-muted-foreground); font-size: 0.9rem; } .yh-contact-grid-gap { gap: 1rem; } .yh-contact-honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; } .yh-contact-form { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; } .yh-contact-meta { display: flex; flex-direction: column; gap: 1.1rem; } .yh-contact-meta-card, .yh-contact-links-card { display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; } .yh-contact-meta-card { padding: 1.5rem; } .yh-contact-inquiry-group { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; } .yh-contact-status { display: none; padding: 0.75rem 1rem; border-radius: 0.75rem; font-size: 0.875rem; } .yh-contact-status.is-visible { display: block; } .yh-contact-status.success { color: #67e8f9; border: 1px solid rgba(34, 211, 238, 0.35); } .yh-contact-status.error { color: #fca5a5; border: 1px solid rgba(248, 113, 113, 0.35); } .yh-btn.is-loading, .yh-submit.is-loading { opacity: 0.72; cursor: not-allowed; } .yh-contact-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start; } .yh-contact-legal { font-size: 0.75rem; color: var(--yh-muted-foreground); line-height: 1.6; max-width: 22rem; } .yh-contact-legal a { color: var(--yh-primary); } .yh-contact-meta-kicker { font-size: 0.7rem; letter-spacing: 0.18em; color: var(--yh-primary); } .yh-contact-meta-title { margin-top: 0.5rem; font-size: 1.05rem; } .yh-contact-meta-copy { margin-top: 0.5rem; color: var(--yh-muted-foreground); font-size: 0.85rem; line-height: 1.65; } .yh-contact-meta-link { display: block; margin-top: 0.5rem; font-size: 1.05rem; color: var(--yh-foreground); } .yh-contact-meta-phone { font-family: var(--yh-font-mono); letter-spacing: 0.04em; } .yh-contact-links-card { padding: 1.5rem; } .yh-contact-links-list { margin-top: 0.9rem; display: flex; flex-direction: column; gap: 0.65rem; list-style: none; padding: 0; } .yh-contact-links-list a { color: var(--yh-foreground); font-size: 0.9rem; } /* Solutions page structure helpers */ .yh-solutions-hero { min-height: auto; padding: 9rem 0 4rem; } .yh-solutions-hero-pill { margin-bottom: 1.5rem; } .yh-solutions-section-first { padding-top: 2rem; scroll-margin-top: 5rem; } .yh-solutions-section-anchor { padding-top: 0; scroll-margin-top: 5rem; } .yh-service-card { padding: 1.75rem; background: rgba(17, 27, 44, 0.5); border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 1.125rem; transition: transform 0.3s var(--yh-ease), border-color 0.3s; } .yh-service-card:hover { border-color: rgba(34, 211, 238, 0.3); transform: translateY(-3px); } .yh-service-card h3 { font-size: 1.05rem; margin: 0; } .yh-service-card p { margin-top: 0.5rem; color: var(--yh-muted-foreground); font-size: 0.875rem; line-height: 1.65; } .yh-service-link-inline { color: inherit; text-decoration: none; } .yh-service-copy-link { color: var(--yh-foreground); } overflow: hidden; text-align: center; padding: 3rem 1.5rem; border-radius: 1.625rem; border: 1px solid rgba(148, 163, 184, 0.22); background: rgba(17, 27, 44, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.72); inset: 0; opacity: 0.2; pointer-events: none; inset: 0; pointer-events: none; line-height: 1.05; font-weight: 600; max-width: 44rem; margin: 0 auto; letter-spacing: -0.03em; display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; /* Partnerships page structure helpers */ .yh-partners-hero { min-height: auto; padding: 9rem 0 4rem; } .yh-partners-section-first { padding-top: 2rem; } .yh-partners-pillar-card { padding: 2rem; background: rgba(17, 27, 44, 0.5); border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 1.125rem; transition: transform 0.3s var(--yh-ease); } .yh-partners-pillar-card:hover { transform: translateY(-3px); } .yh-partners-pillar-title { margin-top: 1.25rem; font-size: 1.5rem; } .yh-partners-pillar-copy { margin-top: 0.75rem; color: var(--yh-muted-foreground); font-size: 0.95rem; line-height: 1.7; } .yh-partners-pillar-list { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--yh-border); } .yh-partners-reason-card { padding: 1.75rem; background: rgba(17, 27, 44, 0.5); border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 1.125rem; transition: transform 0.3s var(--yh-ease); } .yh-partners-reason-card:hover { transform: translateY(-2px); } .yh-partners-reason-index { font-size: 0.65rem; letter-spacing: 0.2em; color: var(--yh-primary); } .yh-partners-reason-title { margin-top: 0.5rem; font-size: 1.05rem; } .yh-partners-reason-copy { margin-top: 0.5rem; color: var(--yh-muted-foreground); font-size: 0.85rem; line-height: 1.65; } .yh-partners-process-grid { gap: 1px; border-radius: 1.25rem; overflow: hidden; } .yh-partners-process-step { padding: 1.75rem; background: rgba(17, 27, 44, 0.5); } .yh-partners-process-index { font-size: 2.5rem; font-weight: 700; color: var(--yh-primary); line-height: 1; } .yh-partners-process-title { margin-top: 0.75rem; font-size: 1rem; } .yh-partners-process-copy { margin-top: 0.5rem; color: var(--yh-muted-foreground); font-size: 0.85rem; line-height: 1.6; } font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.05; font-weight: 600; max-width: 46rem; margin-inline: auto; letter-spacing: -0.03em; color: var(--yh-muted-foreground); max-width: 34rem; margin-inline: auto; @media (max-width: 767px) { .yh-solutions-hero { padding-top: 8rem; padding-bottom: 3rem; } .yh-service-card { padding: 1.2rem; } .yh-service-card h3 { font-size: 1rem; } } align-items: stretch; .yh-partners-hero { padding-top: 8rem; padding-bottom: 3rem; } .yh-partners-pillar-card, .yh-partners-reason-card, .yh-partners-process-step { padding: 1.25rem; } @media (max-width: 767px) { .yh-contact-form-card, .yh-contact-meta-card { padding: 1.25rem; } .yh-contact-form { gap: 1rem; } .yh-contact-inquiry-group { gap: 0.4rem; } .yh-contact-actions { align-items: stretch; } .yh-contact-legal { max-width: none; } .yh-contact-actions .yh-btn { width: 100%; justify-content: center; } .yh-contact-hero { padding-top: 8rem; padding-bottom: 2.5rem; } } .yh-skills-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; } @media (max-width: 720px) { .yh-skills-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 420px) { .yh-skills-grid { grid-template-columns: 1fr; } } .yh-skill { display: flex; align-items: center; gap: 0.55rem; padding: 0.7rem 0.85rem; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 0.75rem; cursor: pointer; font-size: 0.88rem; color: rgba(226, 232, 240, 0.85); transition: all .2s ease; } .yh-skill input { width: 1rem; height: 1rem; accent-color: var(--yh-primary); cursor: pointer; } .yh-skill:hover { border-color: rgba(34, 211, 238, 0.4); color: #fff; } .yh-skill:has(input:checked) { border-color: rgba(34, 211, 238, 0.6); color: #fff; box-shadow: 0 0 18px rgba(34, 211, 238, 0.18); } .yh-submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.5rem; } .yh-submit { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.95rem 1.6rem; border-radius: 999px; border: none; cursor: pointer; font-family: var(--yh-font-display); font-weight: 700; font-size: 0.95rem; color: #0b1320; box-shadow: 0 8px 30px rgba(34, 211, 238, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.15); transition: all .25s ease; letter-spacing: 0.01em; } .yh-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(34, 211, 238, 0.5); } .yh-submit:disabled { opacity: 0.6; cursor: not-allowed; } @media (max-width: 640px) { .yh-submit-row { align-items: stretch; } .yh-submit { width: 100%; justify-content: center; min-height: 3rem; } } .yh-status { font-size: 0.9rem; padding: 0.5rem 0.9rem; border-radius: 0.6rem; display: none; } .yh-status.is-visible { display: inline-block; } .yh-status.success { color: #67e8f9; border: 1px solid rgba(34, 211, 238, 0.3); } .yh-status.error { color: #fca5a5; border: 1px solid rgba(248, 113, 113, 0.3); } /* ============================================================ BLOG cards (yh-blog-card, yh-prose for article body) ============================================================ */ .yh-blog-card { display: flex; flex-direction: column; overflow: hidden; cursor: pointer; height: 100%; border-radius: 1.125rem; border: 1px solid rgba(148, 163, 184, 0.2); background: rgba(17, 27, 44, 0.6); transition: transform 0.3s var(--yh-ease), box-shadow 0.3s, border-color 0.3s; box-shadow: 0 18px 50px -30px rgba(0, 0, 0, 0.65); } .yh-blog-card:hover { transform: translateY(-3px); border-color: rgba(34, 211, 238, 0.3); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.75), 0 0 40px -20px rgba(34, 211, 238, 0.12); } .yh-blog-card:focus-visible { outline: 2px solid var(--yh-primary); outline-offset: 2px; } .yh-grid>.yh-card, .yh-grid>.yh-card-strong, .yh-grid>.yh-blog-card { height: 100%; } .yh-grid>.yh-card, .yh-grid>.yh-card-strong { display: flex; flex-direction: column; justify-content: flex-start; } .yh-blog-card-img { aspect-ratio: 16 / 9; overflow: hidden; background: #0a1628; } .yh-blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; } .yh-blog-card:hover .yh-blog-card-img img { transform: scale(1.06); } .yh-blog-card-body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; } .yh-blog-card-meta { display: flex; gap: 0.5rem; font-family: var(--yh-font-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--yh-primary); text-transform: uppercase; margin-bottom: 0; } .yh-blog-card-title { font-family: var(--yh-font-display); font-size: 1.1rem; font-weight: 600; color: #fff; line-height: 1.3; letter-spacing: -0.01em; margin: 0; } .yh-blog-card-excerpt { color: var(--yh-muted-foreground); font-size: 0.85rem; line-height: 1.55; flex: 1; margin: 0; } .yh-blog-card-cta { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--yh-primary); font-size: 0.82rem; font-weight: 600; margin-top: 0.25rem; } .yh-blog-card-cta::after { content: "→"; transition: transform .25s ease; } .yh-blog-card:hover .yh-blog-card-cta::after { transform: translateX(4px); } .yh-prose { color: rgba(226, 232, 240, 0.92); line-height: 1.8; font-size: 1.02rem; max-width: 72ch; } .yh-prose>*+* { margin-top: 1.2em; } .yh-prose h2 { font-family: var(--yh-font-display); font-size: 1.65rem; font-weight: 700; color: #fff; margin-top: 2.2em; letter-spacing: -0.01em; } .yh-prose h3 { font-family: var(--yh-font-display); font-size: 1.3rem; font-weight: 600; color: #fff; margin-top: 1.8em; } .yh-prose p { color: rgba(226, 232, 240, 0.86); } .yh-prose a { color: var(--yh-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .yh-prose a:hover { color: var(--yh-primary-glow); } .yh-prose strong { color: #fff; font-weight: 600; } .yh-prose ul, .yh-prose ol { padding-left: 1.4em; } .yh-prose ul li { list-style: disc; margin-top: 0.4em; } .yh-prose ol li { list-style: decimal; margin-top: 0.4em; } .yh-prose blockquote { border-left: 3px solid var(--yh-primary); padding: 0.6em 0 0.6em 1.3em; color: rgba(226, 232, 240, 0.82); font-style: italic; border-radius: 0 0.5rem 0.5rem 0; background: rgba(34, 211, 238, 0.04); } .yh-prose code { border: 1px solid rgba(34, 211, 238, 0.25); color: #67e8f9; padding: 0.15em 0.45em; border-radius: 0.35em; font-family: var(--yh-font-mono); font-size: 0.88em; } .yh-prose pre { border: 1px solid rgba(34, 211, 238, 0.18); padding: 1rem 1.2rem; border-radius: 0.85rem; overflow-x: auto; font-family: var(--yh-font-mono); font-size: 0.88em; line-height: 1.6; background: rgba(11, 19, 32, 0.6); } .yh-prose pre code { border: none; padding: 0; color: #cbd5e1; } .yh-prose img { max-width: 100%; height: auto; border-radius: 0.85rem; border: 1px solid var(--yh-border); } .yh-prose hr { border: none; border-top: 1px solid var(--yh-border); margin: 2.5em 0; } /* ── Blog content cards & components inside .yh-prose ─── */ .yh-prose .yh-card, .yh-prose .yh-card-strong, .yh-prose .yh-glass-strong { margin: 2em 0; } .yh-prose .yh-card p, .yh-prose .yh-card-strong p, .yh-prose .yh-glass-strong p { color: rgba(226, 232, 240, 0.9); } .yh-prose .yh-card h3, .yh-prose .yh-card h4, .yh-prose .yh-card-strong h3, .yh-prose .yh-card-strong h4, .yh-prose .yh-glass-strong h3, .yh-prose .yh-glass-strong h4 { color: #fff; margin-top: 0; } .yh-prose .yh-card ul, .yh-prose .yh-card ol, .yh-prose .yh-card-strong ul, .yh-prose .yh-card-strong ol, .yh-prose .yh-glass-strong ul, .yh-prose .yh-glass-strong ol { margin-top: 0.5em; } .yh-prose .yh-card li, .yh-prose .yh-card-strong li, .yh-prose .yh-glass-strong li { color: rgba(226, 232, 240, 0.85); } /* Buttons inside blog content */ .yh-prose .yh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--yh-font-sans); font-weight: 700; border-radius: 9999px; text-decoration: none; transition: all 0.3s var(--yh-ease); cursor: pointer; margin: 1em 0; } .yh-prose .yh-btn-primary { background: var(--yh-gradient-cyan); color: #0b1320; padding: 0.85rem 2.2rem; font-size: 0.95rem; box-shadow: var(--yh-shadow-glow); border: none; } .yh-prose .yh-btn-primary:hover { box-shadow: var(--yh-shadow-glow-strong); transform: translateY(-2px); color: #0b1320; } /* Grid layouts inside blog content */ .yh-prose [style*="display:grid"] { margin: 2em 0; } .yh-prose [style*="display:flex"] { margin: 1.5em 0; } /* Stats figures inside cards */ .yh-prose .yh-card p[style*="font-size"] { font-family: var(--yh-font-display); } /* Responsive grid collapse */ @media (max-width: 640px) { .yh-prose [style*="grid-template-columns:1fr 1fr"], .yh-prose [style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; } } /* ============================================================ SERVICE PAGE SHARED UTILITIES Used by: incident-response, iso-27001, soc-monitoring ============================================================ */ /* Hero variant: auto height with service padding */ .yh-hero-service { min-height: auto; padding: 9rem 0 4rem; } /* Hero left-content column wider than default */ .yh-hero-content-wide { max-width: 900px; } /* Eyebrow with extra bottom spacing */ .yh-eyebrow-mb { margin-bottom: 1.25rem; } /* Service hero heading – slightly smaller than homepage title */ .yh-service-h1 { font-family: var(--yh-font-display); font-size: clamp(2.5rem, 6vw, 4.75rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; margin: 0; } /* Service hero lead – left-aligned, wide max-width */ .yh-service-lead { margin: 2rem 0 0; max-width: 760px; color: var(--yh-muted-foreground); font-size: 1.125rem; line-height: 1.7; } /* Action row with slightly more top spacing than default */ .yh-action-row-lg { margin-top: 2.5rem; } /* Process / feature card h2 */ .yh-card-h2 { font-family: var(--yh-font-display); margin: 0 0 1rem; } /* Smaller card h2 (compliance pages) */ .yh-card-h2-sm { font-family: var(--yh-font-display); font-size: 1.1rem; margin: 0 0 0.6rem; } /* Related-service tile h3 */ .yh-card-h3 { font-family: var(--yh-font-display); font-size: 1.05rem; margin: 0 0 0.4rem; color: var(--yh-foreground); } /* Benefits card h3 tight bottom gap */ .yh-card-h3-tight { font-family: var(--yh-font-display); margin: 0 0 0.5rem; } /* Card list with muted colour and generous line-height */ .yh-card-list { margin: 0; padding-left: 1.1rem; color: var(--yh-muted-foreground); line-height: 1.9; } /* Card muted paragraph reset */ .yh-card-p { margin: 0; color: var(--yh-muted-foreground); } /* Narrow container (900px) for FAQs and focused content */ .yh-container-sm { max-width: 900px; } /* FAQ accordion glass shell */ .yh-faq-glass { border-radius: 1rem; overflow: hidden; border: 1px solid var(--yh-border); } /* Related-service card link wrapper */ .yh-card-link { text-decoration: none; display: block; } /* Section with extra-large bottom padding */ .yh-section-pb-xl { padding-bottom: 6rem; } /* CTA bordered panel */ .yh-cta-box { border-radius: 1.625rem; padding: 3.5rem 2rem; text-align: center; border: 1px solid rgba(148, 163, 184, 0.22); background: rgba(17, 27, 44, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: relative; overflow: hidden; box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.72); isolation: isolate; } .yh-cta-box > * { position: relative; z-index: 1; } .yh-cta-box::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 45% at 50% 0%, rgba(34, 211, 238, 0.07) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 30% 100%, rgba(34, 211, 238, 0.04) 0%, transparent 50%), radial-gradient(ellipse 50% 50% at 70% 100%, rgba(34, 211, 238, 0.04) 0%, transparent 50%); pointer-events: none; z-index: -1; } /* CTA heading */ .yh-cta-title { font-family: var(--yh-font-display); font-size: clamp(2rem, 4vw, 3rem); margin: 0; } /* CTA lead paragraph */ .yh-cta-lead { margin: 1rem 0 0; max-width: 100%; color: var(--yh-muted-foreground); line-height: 1.7; text-align: center; } /* CTA action wrapper */ .yh-cta-actions { margin-top: 2rem; } /* Service-specific hero glass overlay */ .yh-hero-service .yh-hero-content-left, .yh-hero-service .yh-hero-content-wide, .yh-hero-compact-sm .yh-hero-content-left, .yh-cloud-hero-content, .yh-vapt-hero-content, .yh-awareness-hero-content { position: relative; z-index: 1; } @media (min-width: 768px) and (max-width: 1023px) { .yh-hero { padding-top: 9rem; padding-bottom: 1.5rem; min-height: auto; } .yh-hero-title { font-size: clamp(2.5rem, 5vw, 3.5rem); } .yh-hero-lead { font-size: 1.05rem; max-width: 56ch; } .yh-section { padding: 4.5rem 0; } .yh-grid-3 { grid-template-columns: repeat(2, 1fr); } .yh-grid-4 { grid-template-columns: repeat(2, 1fr); } .yh-hero-content-center { max-width: 52rem; } .yh-quick-grid { grid-template-columns: repeat(2, 1fr); } .yh-roadmap-grid { grid-template-columns: repeat(2, 1fr); } .yh-decision-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .yh-hero-title { font-size: clamp(1.8rem, 9vw, 3rem); line-height: 1.08; } .yh-hero-lead { margin-top: 0.85rem; font-size: 0.9rem; line-height: 1.7; max-width: 100%; padding: 0; } .yh-section { padding: 3.5rem 0; } .yh-section-title { font-size: clamp(1.6rem, 7vw, 2.3rem); line-height: 1.08; letter-spacing: -0.02em; } .yh-section-desc { font-size: 0.95rem; line-height: 1.7; } .yh-section-head { margin-bottom: 2rem; gap: 0.6rem; } .yh-grid { gap: 1rem; } .yh-grid-3 { grid-template-columns: 1fr; } .yh-grid-4 { grid-template-columns: 1fr; } .yh-quick-grid { grid-template-columns: 1fr; } .yh-roadmap-grid { grid-template-columns: 1fr; } .yh-decision-grid { grid-template-columns: 1fr; } } .yh-service-h1 { font-size: clamp(2rem, 8vw, 3.5rem); } .yh-service-lead { font-size: 1rem; max-width: 100%; } .yh-cta-box { padding: 2.5rem 1.25rem; } /* ── Footer shared utilities ─────────────────────────────────────────────── */ .yh-footer-blurb { margin-top: 1rem; color: var(--yh-muted-foreground); font-size: 0.875rem; max-width: 24rem; line-height: 1.65; } .yh-footer-hq-copy { color: var(--yh-muted-foreground); font-size: 0.875rem; line-height: 1.65; } .yh-footer-email { color: var(--yh-foreground); } .yh-footer-phone { font-family: var(--yh-font-mono); font-size: 0.8rem; letter-spacing: 0.06em; } /* ── Privacy policy page helpers ─────────────────────────────────────────── */ /* Hero with 3rem bottom (tighter than yh-hero-service) */ .yh-hero-compact-xs { min-height: auto; padding: 9rem 0 3rem; } /* Smaller hero h1 variant */ .yh-hero-title-sm { font-size: clamp(2.5rem, 7vw, 4.5rem); } /* Section with 2rem top padding */ .yh-section-pt-md { padding-top: 2rem; } /* Entity card (padded, narrow) */ .yh-policy-entity-card { padding: 2rem; max-width: 900px; background: rgba(17, 27, 44, 0.5); border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 1.125rem; } /* Entity metadata grid overrides */ .yh-policy-meta-grid { margin-top: 1.25rem; gap: 1.5rem; } /* Entity metadata label (mono, small) */ .yh-policy-label { font-size: 0.7rem; letter-spacing: 0.18em; color: var(--yh-muted-foreground); font-family: var(--yh-font-mono); } .yh-policy-label-mt { margin-top: 1rem; } /* Entity metadata values */ .yh-policy-value { margin-top: 0.35rem; color: var(--yh-foreground); font-weight: 500; } .yh-policy-value-mono { margin-top: 0.35rem; color: var(--yh-foreground); font-family: var(--yh-font-mono); letter-spacing: 0.04em; } .yh-policy-value-body { margin-top: 0.35rem; color: var(--yh-foreground); font-size: 0.92rem; line-height: 1.6; } .yh-policy-value-sm { margin-top: 0.35rem; color: var(--yh-foreground); font-size: 0.92rem; } /* Policy article list wrapper */ .yh-policy-list { max-width: 900px; display: flex; flex-direction: column; gap: 0.875rem; } /* Policy article card layout */ .yh-policy-article { padding: 1.75rem; display: flex; gap: 1.25rem; background: rgba(17, 27, 44, 0.4); border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 1rem; } /* Policy article text column */ .yh-policy-body { flex: 1; } /* Policy section heading */ .yh-policy-h2 { font-size: 1.25rem; } /* Policy section paragraph */ .yh-policy-p { margin-top: 0.6rem; color: var(--yh-muted-foreground); line-height: 1.7; } /* Policy bullet list top gap */ .yh-policy-ul { margin-top: 0.75rem; } /* Generic primary-colour link */ .yh-link-primary { color: var(--yh-primary); } @media (max-width: 600px) { .yh-policy-article { flex-direction: column; gap: 0.75rem; } } /* 404 page helpers */ .yh-404 { min-height: calc(100vh - 80px); display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 6vw, 6rem) 1rem; text-align: center; } .yh-404-inner { max-width: 640px; } .yh-404-code { font-family: var(--yh-font-mono, "JetBrains Mono", monospace); font-size: clamp(4rem, 14vw, 8rem); font-weight: 700; line-height: 1; background: linear-gradient(135deg, #22d3ee, #67e8f9); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 0 0.5rem; letter-spacing: -0.02em; } .yh-404-title { font-family: var(--yh-font-display, "Outfit", sans-serif); font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700; margin: 0 0 1rem; color: var(--yh-foreground, #f8fafc); } .yh-404-desc { color: var(--yh-muted-foreground, #94a3b8); font-size: 1rem; line-height: 1.7; margin: 0 0 2rem; } .yh-404-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .yh-404-links { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(148, 163, 184, 0.15); display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.5rem 1.25rem; font-size: 0.9rem; } .yh-404-links a { color: var(--yh-muted-foreground, #94a3b8); text-decoration: none; padding: 0.4rem 0; transition: color 0.2s ease; } .yh-404-links a:hover { color: var(--yh-foreground, #f8fafc); } /* ===================================================================== * YH-RESPONSIVE-POLISH (2026-06-02) * Goal: text alignment + hero scale + footer overlap + sidebar-pushes-content * + cross-device/OS font legibility. Additive overrides only. No content * or copy changes. Safe to remove by deleting the block below. * ===================================================================== */ /* 1. Universal box-sizing + iOS/Android text scaling consistency. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; } body { overflow-x: clip; max-width: 100vw; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 2. Stop any rogue element from forcing horizontal scroll. */ img, video, iframe, canvas, svg, picture, embed, object { max-width: 100%; height: auto; } pre, code, table { max-width: 100%; overflow-x: auto; } /* 3. Container centring across the site — applies only to common shells * and never widens beyond their existing max-width rules. */ .container, .yh-container, .section-container, main>section, main>.container, .hero-content, .hero .content, .page-hero, .page-header, .footer-container, .footer-inner, footer .container { margin-inline: auto !important; } /* 4. Hero text: keep design but make it fit the viewport on every device. * Uses clamp() so iPhone SE through 4K desktop all render comfortably. */ .hero h1, .page-hero h1, section.hero h1 { font-size: clamp(1.75rem, 4.6vw + 0.5rem, 3.75rem) !important; line-height: 1.15 !important; letter-spacing: -0.01em; word-break: break-word; overflow-wrap: anywhere; } .hero h2, .page-hero h2, .hero-subtitle, .hero .subtitle { font-size: clamp(1.1rem, 1.8vw + 0.5rem, 1.75rem) !important; line-height: 1.35 !important; } .hero p, .page-hero p, .hero-description, .hero .lead { font-size: clamp(0.98rem, 0.5vw + 0.85rem, 1.18rem) !important; line-height: 1.6 !important; } .hero, .page-hero, section.hero { padding-top: clamp(3rem, 6vw, 6rem) !important; padding-bottom: clamp(3rem, 6vw, 6rem) !important; min-height: auto; } /* 5. General heading + body fluid scaling (does not change rems on .text-* utils). */ h1:not(.text-xs):not(.text-sm):not(.text-base):not(.text-lg):not(.text-xl):not([class*="text-"]) { font-size: clamp(1.75rem, 3.2vw + 0.6rem, 2.75rem); line-height: 1.2; } h2:not([class*="text-"]) { font-size: clamp(1.4rem, 2.2vw + 0.5rem, 2.1rem); line-height: 1.25; } h3:not([class*="text-"]) { font-size: clamp(1.15rem, 1.4vw + 0.55rem, 1.5rem); line-height: 1.3; } p, li { line-height: 1.6; } /* 6. Force hero/header content to centre on every device. */ .hero, .hero-content, .page-hero, .page-hero .content, .hero-text-center, .text-center-mobile { text-align: center; } .hero .container, .hero-content, .page-hero .container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1rem, 2vw, 1.75rem); } .hero .container>*, .hero-content>*, .page-hero .container>* { max-width: min(100%, 72ch); margin-inline: auto; } /* 7. Footer: prevent overlap with the last section and keep it pinned to the * bottom of short pages without breaking long pages. */ html, body { margin: 0; animation: yh-fade-in 0.5s ease-out; } @keyframes yh-fade-in { from { opacity: 0; } to { opacity: 1; } } body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } body>main, body>.site-main, body>#app, body>.app-root { flex: 1 0 auto; width: 100%; } footer, .site-footer, .footer { flex-shrink: 0; width: 100%; margin-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); position: relative; z-index: 1; } /* 8. Sidebars must never push the main column off-screen on small viewports. */ @media (max-width: 1024px) { aside, .sidebar, .side-nav, .yh-sidebar { position: static !important; float: none !important; width: 100% !important; max-width: 100% !important; } .with-sidebar, .layout-sidebar, .grid-with-sidebar { grid-template-columns: 1fr !important; display: block !important; } } /* 9. Tap targets + form controls feel right on touch + macOS Safari. */ button, .btn, [role="button"], input[type="submit"], input[type="button"], a.btn { min-height: 44px; } input, textarea, select { font-size: max(16px, 1rem); /* prevents iOS zoom on focus */ } /* 10. Tighter mobile spacing so content is comfortable, not cramped. */ @media (max-width: 640px) { .container, .yh-container, main>section { padding-inline: 1rem !important; } .hero, .page-hero, section.hero { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } .hero .container, .hero-content, .page-hero .container { gap: 0.9rem; } nav, header nav { gap: 0.5rem; } } /* 11. Honour reduced-motion preference. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* 12. RTL (Arabic) safety — keep centred text without breaking direction. */ html[dir="rtl"] .hero, html[dir="rtl"] .page-hero { text-align: center; } /* End YH-RESPONSIVE-POLISH */ /* ===================================================================== * YH-CYBER-BG (2026-06-03) - Concept 1: Obsidian Lattice * Zero-trust perimeter aesthetic: dark obsidian void, crystalline lattice, * authentication pulses, and calm volumetric drift. Shared across all pages. * ===================================================================== */ :root { --yh-cyber-bg-base: #05070d; --yh-cyber-bg-mid: #0b1220; --yh-cyber-grid-thin: rgba(26, 36, 56, 0.18); --yh-cyber-grid-bold: rgba(61, 240, 255, 0.08); --yh-cyber-pulse: rgba(61, 240, 255, 0.58); --yh-cyber-mint: rgba(124, 255, 178, 0.68); --yh-cyber-threat: rgba(255, 77, 122, 0.42); --yh-cyber-haze: rgba(14, 26, 46, 0.12); } html, body { } .yh-cyber-bg { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; transform-origin: 50% 50%; animation: yh-lattice-breath 12s ease-in-out infinite; contain: strict; } .yh-cyber-bg::before { content: ""; position: absolute; inset: -5%; transform: perspective(1200px) rotateX(15deg) translateY(-6%); transform-origin: 50% 35%; opacity: 0.88; animation: yh-lattice-drift 50s linear infinite; } .yh-cyber-bg::after { content: ""; position: absolute; inset: -20%; mix-blend-mode: screen; animation: yh-haze-drift 40s linear infinite; opacity: 0.8; } .yh-cyber-bg__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0.5; } /* Slow scan-line overlay */ .yh-cyber-bg__scanline { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: repeating-linear-gradient( 0deg, transparent 0 2px, rgba(34, 211, 238, 0.035) 2px 3px ); } /* Floating ambient particles */ .yh-cyber-bg__particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } .yh-cyber-bg__particle { position: absolute; width: 2px; height: 2px; background: rgba(34, 211, 238, 0.3); border-radius: 50%; animation: yh-particle-drift var(--dur, 15s) ease-in-out infinite; animation-delay: var(--delay, 0s); opacity: 0; } @keyframes yh-particle-drift { 0% { transform: translateY(100vh) translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-10vh) translateX(calc(var(--drift, 30px) * 1px)); opacity: 0; } } .yh-cyber-bg__vignette { position: absolute; inset: 0; pointer-events: none; z-index: 2; } @keyframes yh-lattice-breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.004); } } @keyframes yh-lattice-drift { 0% { transform: perspective(1200px) rotateX(15deg) translate3d(0, -6%, 0); } 100% { transform: perspective(1200px) rotateX(15deg) translate3d(1.2%, -8%, 0); } } @keyframes yh-haze-drift { 0% { transform: translateY(0); } 100% { transform: translateY(-48px); } } @media (prefers-reduced-motion: reduce) { .yh-cyber-bg, .yh-cyber-bg::before, .yh-cyber-bg::after { animation: none; } .yh-cyber-bg__canvas { display: none; } } @media (max-width: 720px) { .yh-cyber-bg__canvas { display: none; } .yh-cyber-bg::before { opacity: 0.68; } } /* ===================================================================== * YH-ALIGNMENT-POLISH-V2 (2026-06-03) * Tighten alignments site-wide without changing copy. * ===================================================================== */ /* Section heads: consistently centered with balanced wrap */ .yh-section-head { text-align: center; margin-inline: auto; max-width: 72ch; } .yh-section-head .yh-section-title, .yh-section-head .yh-section-desc { margin-inline: auto; text-wrap: balance; } .yh-section-head .yh-eyebrow { display: inline-flex; align-items: center; justify-content: center; } /* Grids: nicer item alignment */ .yh-grid { align-items: stretch; } .yh-grid .yh-card { height: 100%; } /* Card internals: anchor copy & CTA to a consistent baseline */ .yh-card { display: flex; flex-direction: column; } .yh-card>.yh-story-link, .yh-card>.yh-btn, .yh-card>.yh-core-card-link { margin-top: auto; } /* Hero CTA row should stay centered on every breakpoint */ .yh-hero-actions { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin-top: 2.1rem; gap: 0.75rem; flex-wrap: wrap; } .yh-hero-actions-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; } /* Footer columns: align headings and link lists */ .yh-footer-grid>div h4 { margin-bottom: 0.75rem; } .yh-footer-grid>div ul { padding-inline-start: 0; list-style: none; display: flex; flex-direction: column; gap: 0.4rem; } /* RTL safety: keep section heads visually centered, don't force LTR */ [dir="rtl"] .yh-section-head { text-align: center; } /* ===================================================================== * YH-DESIGN-POLISH (2026-06-05) * Final high-impact refinements for a premium enterprise look. * Must come last to override all previous rules. * ===================================================================== */ /* Smoother hover transitions on all interactive elements */ .yh-card, .yh-quick-card, .yh-decision-card, .yh-roadmap-step, .yh-blog-card, .yh-btn, .yh-stat, .yh-nav-link { will-change: transform; } /* Better focus-within for form groups */ .yh-field:focus-within .yh-label { color: var(--yh-primary); } /* Hero title extra readability layer */ .yh-hero-title { text-rendering: optimizeLegibility; } /* Consistent link underline animation for text links */ .yh-prose a { transition: color 0.2s, text-decoration-color 0.2s; } .yh-prose a:hover { text-decoration-color: var(--yh-primary-glow); } /* Smooth card image overflow containment */ .yh-blog-card-img { border-radius: 1.125rem 1.125rem 0 0; } /* Footer link hover state */ .yh-footer ul a { transition: color 0.2s, padding-left 0.2s; display: inline-block; } .yh-footer ul a:hover { color: var(--yh-primary); padding-inline-start: 3px; } /* Blog card body consistent alignment */ .yh-blog-card-body { flex: 1; } /* Decorative subtle line on section headers */ .yh-section-head .yh-eyebrow::after { display: none; } /* Eyebrow decorative line */ .yh-section-head.center .yh-eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; } .yh-section-head.center .yh-eyebrow::before, .yh-section-head.center .yh-eyebrow::after { content: ''; display: block; width: 2rem; height: 1px; background: rgba(34, 211, 238, 0.25); } /* Premium scrollbar for webkit */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: rgba(11, 19, 32, 0.5); } ::-webkit-scrollbar-thumb { background: rgba(34, 211, 238, 0.25); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: rgba(34, 211, 238, 0.4); } /* Mobile: ensure CTA buttons don't overflow */ @media (max-width: 640px) { .yh-hero-actions-row { flex-direction: column; width: 100%; } .yh-hero-actions-row .yh-btn { width: 100%; justify-content: center; } } /* Tablet: 2-col grids fill better */ @media (min-width: 768px) and (max-width: 1023px) { .yh-quick-grid, .yh-decision-grid, .yh-roadmap-grid { grid-template-columns: repeat(2, 1fr); } .yh-grid-3, .yh-grid-4 { grid-template-columns: repeat(2, 1fr); } } /* Ensure hero canvas fills on mobile fallback */ @media (max-width: 640px) { #yhHeroGlobe { display: none; } } .yh-btt { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 80; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--yh-border-strong); background: rgba(11,19,32,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--yh-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(0.75rem); transition: opacity 0.3s, transform 0.3s, border-color 0.3s, box-shadow 0.3s; pointer-events: none; box-shadow: 0 4px 20px -8px rgba(0,0,0,0.5); } [dir="rtl"] .yh-btt { right: auto; left: 1.5rem; } .yh-btt.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .yh-btt:hover { border-color: var(--yh-primary); box-shadow: 0 0 30px -12px rgba(34,211,238,0.4); } .yh-btt:focus-visible { outline: 2px solid var(--yh-primary); outline-offset: 2px; } .yh-reading-progress { position: fixed; top: 0; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, var(--yh-primary), var(--yh-accent)); z-index: 9999; transition: width 0.1s linear; pointer-events: none; } [dir="rtl"] .yh-reading-progress { left: auto; right: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .yh-reveal, .yh-hover-lift, .yh-card, .yh-stat { opacity: 1 !important; transform: none !important; } }