/* ============================================================ YALLA HACK — Premium Cybersecurity Design System Vanilla CSS port of the Tailwind v4 template Brand: We Hack to Secure. Aesthetic: dark intelligence base, electric cyan accent, restrained glassmorphism, futuristic enterprise grade. ============================================================ */ :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-gradient-hero: radial-gradient(ellipse at 50% 0%, rgba(34, 211, 238, 0.35), transparent 60%), linear-gradient(180deg, #0b1320 0%, #06101c 100%); --yh-asset-hero-bg: url("assets/template-v2/hero-bg.jpg"); --yh-asset-hero-earth: url("assets/template-v2/hero-earth.png?v=2"); --yh-asset-logo: url("assets/template-v2/yalla-hack-logo.png?v=2"); --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-color: var(--yh-background); background-image: radial-gradient(circle at top center, rgba(34, 211, 238, 0.08), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 24%); color: var(--yh-foreground); font-family: var(--yh-font-sans); -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 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 { background: rgba(34, 211, 238, 0.3); color: var(--yh-foreground); } .yh-theme html, .yh-theme { scroll-behavior: smooth; } /* ============================================================ Utility classes ============================================================ */ .yh-container { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; position: relative; } @media (min-width: 1024px) { .yh-container { padding-left: 2.5rem; padding-right: 2.5rem; } } .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; } .yh-font-display { font-family: var(--yh-font-display); } .yh-font-mono { font-family: var(--yh-font-mono); } .yh-serif-italic { font-family: var(--yh-font-serif); font-style: italic; letter-spacing: -0.01em; } .yh-text-gradient { background: var(--yh-gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .yh-text-cyan { background: var(--yh-gradient-cyan); -webkit-background-clip: text; background-clip: text; color: transparent; } .yh-text-muted { color: var(--yh-muted-foreground); } .yh-text-primary { color: var(--yh-primary); } .yh-bg-grid { background-image: linear-gradient(var(--yh-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--yh-grid-line) 1px, transparent 1px); background-size: 56px 56px; } .yh-glass { background: rgba(20, 31, 51, 0.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--yh-border); border-radius: var(--yh-radius-lg); } .yh-glass-strong { background: rgba(17, 27, 44, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--yh-border-strong); border-radius: var(--yh-radius-lg); } .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: var(--yh-shadow-glow); } /* Sections */ .yh-section { padding: 5rem 0; position: relative; content-visibility: auto; contain-intrinsic-size: 1px 900px; } @media (min-width: 1024px) { .yh-section { padding: 7rem 0; } } .yh-section-head { max-width: 880px; margin-bottom: 3rem; } .yh-section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .yh-section-title { font-size: clamp(1.875rem, 3.2vw, 3rem); line-height: 1.05; font-weight: 600; margin-top: 1rem; } .yh-section-desc { margin-top: 1.25rem; color: var(--yh-muted-foreground); font-size: 1.0625rem; line-height: 1.65; max-width: 640px; } .yh-section-head.center .yh-section-desc { margin-left: auto; margin-right: auto; } /* Buttons */ .yh-btn { display: inline-flex; align-items: center; gap: 0.5rem; height: 3rem; padding: 0 1.5rem; border-radius: 0.75rem; 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; } .yh-btn-primary { background: var(--yh-primary); color: var(--yh-primary-foreground); box-shadow: var(--yh-shadow-glow-strong); } .yh-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.05); } .yh-btn-ghost { background: rgba(20, 31, 51, 0.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--yh-foreground); border: 1px solid var(--yh-border-strong); } .yh-btn-ghost:hover { border-color: rgba(34, 211, 238, 0.5); color: var(--yh-primary); } .yh-btn-sm { height: 2.5rem; padding: 0 1rem; font-size: 0.8125rem; border-radius: 0.625rem; } /* Magnetic shine on hover */ .yh-btn-magnetic { position: relative; overflow: hidden; isolation: isolate; } .yh-btn-magnetic::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); transform: translateX(-110%); transition: transform 0.7s var(--yh-ease); pointer-events: none; } .yh-btn-magnetic:hover::before { transform: translateX(110%); } /* Cards */ .yh-card { background: rgba(20, 31, 51, 0.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--yh-border); border-radius: var(--yh-radius-lg); padding: 1.75rem; } .yh-card-strong { background: rgba(17, 27, 44, 0.85); border: 1px solid var(--yh-border-strong); border-radius: 1.5rem; padding: 2.5rem; } .yh-icon-box { height: 2.75rem; width: 2.75rem; border-radius: 0.75rem; background: rgba(34, 211, 238, 0.1); 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; } .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, .yh-select { width: 100%; background: rgba(28, 41, 64, 0.5); border: 1px solid var(--yh-border); border-radius: 0.75rem; padding: 0 1rem; height: 2.875rem; font-size: 0.9rem; color: var(--yh-foreground); font-family: inherit; outline: none; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; } .yh-textarea { height: auto; padding: 0.875rem 1rem; min-height: 9rem; resize: vertical; line-height: 1.5; } .yh-input:focus, .yh-textarea:focus, .yh-select:focus { border-color: rgba(34, 211, 238, 0.6); background: rgba(28, 41, 64, 0.8); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15); } .yh-input::placeholder, .yh-textarea::placeholder { color: rgba(148, 163, 184, 0.6); } .yh-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.875rem; border-radius: 999px; background: rgba(17, 27, 44, 0.85); border: 1px solid var(--yh-border-strong); font-family: var(--yh-font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--yh-foreground); } .yh-pill-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--yh-primary); 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; background: rgba(20, 31, 51, 0.6); 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: 1rem 0; transition: padding 0.4s var(--yh-ease); } .yh-nav.scrolled { padding: 0.625rem 0; } .yh-nav-shell { display: flex; align-items: center; justify-content: space-between; height: 3.5rem; padding: 0 1rem; border-radius: 1rem; background: transparent; transition: background 0.4s var(--yh-ease), border-color 0.4s, box-shadow 0.4s; border: 1px solid transparent; } @media (min-width: 1024px) { .yh-nav-shell { padding: 0 1.5rem; } } .yh-nav.scrolled .yh-nav-shell { background: rgba(17, 27, 44, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-color: var(--yh-border-strong); box-shadow: 0 8px 32px -12px rgba(0, 0, 0, 0.6); } .yh-nav-logo { display: inline-flex; align-items: center; gap: 0.625rem; 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-nav-logo img { height: 2.25rem; width: 2.25rem; display: block; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.35)); transition: transform 0.3s var(--yh-ease), filter 0.3s var(--yh-ease); } .yh-nav-logo:hover img { transform: scale(1.05); filter: drop-shadow(0 0 16px rgba(34, 211, 238, 0.45)); } .yh-brand-wordmark { display: inline-flex; align-items: baseline; gap: 0.2rem; font-family: var(--yh-font-display); font-size: 0.95rem; font-weight: 600; letter-spacing: -0.03em; color: var(--yh-foreground); } .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.5rem 0.875rem; font-size: 0.8125rem; 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.1); } .yh-nav-link.active { color: var(--yh-foreground); background: rgba(34, 211, 238, 0.1); 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; background: var(--yh-primary); 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; background: rgba(20, 31, 51, 0.6); 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.75rem; border-radius: 1rem; background: rgba(17, 27, 44, 0.95); backdrop-filter: blur(20px); border: 1px solid var(--yh-border-strong); flex-direction: column; max-height: calc(100svh - 7rem); overflow: auto; } body.yh-menu-open { overflow: hidden; } .yh-mobile-menu.open { display: flex; } .yh-mobile-menu a { display: block; padding: 0.75rem 0.875rem; min-height: 44px; display: flex; align-items: center; border-radius: 0.625rem; color: var(--yh-muted-foreground); font-size: 0.9rem; transition: background 0.2s, color 0.2s; } .yh-mobile-menu a:hover, .yh-mobile-menu a.active { color: var(--yh-foreground); background: rgba(34, 211, 238, 0.12); } /* ============================================================ Hero specials ============================================================ */ .yh-hero { position: relative; overflow: hidden; padding-top: 9rem; padding-bottom: 6rem; min-height: 100svh; display: flex; align-items: center; } @media (min-width: 1024px) { .yh-hero { padding-top: 11rem; padding-bottom: 8rem; } } .yh-hero-bg { position: absolute; inset: 0; z-index: -3; background: linear-gradient(180deg, rgba(8, 16, 28, 0.65) 0%, rgba(8, 16, 28, 0.92) 100%), var(--yh-asset-hero-bg), var(--yh-gradient-hero); background-size: cover, cover, cover; background-position: center, center, center; background-repeat: no-repeat, no-repeat, no-repeat; } .yh-hero-grid { position: absolute; inset: 0; z-index: -3; opacity: 0.3; background-image: linear-gradient(var(--yh-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--yh-grid-line) 1px, transparent 1px); background-size: 56px 56px; animation: yh-grid-drift 24s linear infinite; } .yh-hero-vignette { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(6, 16, 28, 0.78) 0%, rgba(6, 16, 28, 0.45) 45%, transparent 75%); } .yh-hero-fade-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 10rem; z-index: -1; background: linear-gradient(to top, var(--yh-background), rgba(11, 19, 32, 0.8) 50%, transparent); } .yh-hero-orb { position: absolute; inset: 0; z-index: -2; display: grid; place-items: center; pointer-events: none; } .yh-hero-orb-inner { position: relative; width: min(115vw, 980px); height: min(115vw, 980px); border-radius: 999px; background-image: var(--yh-asset-hero-earth); background-position: center; background-size: contain; background-repeat: no-repeat; filter: drop-shadow(0 0 60px rgba(34, 211, 238, 0.5)); animation: yh-spin 120s linear infinite, yh-pulse-glow 6s ease-in-out infinite; } .yh-hero-orb-inner::before { content: ""; position: absolute; inset: 0; border-radius: 999px; background: radial-gradient(circle, rgba(34, 211, 238, 0.42) 0%, rgba(34, 211, 238, 0.09) 46%, transparent 70%); transform: scale(1.05); filter: blur(20px); z-index: -1; } .yh-hero-orb-ring { position: absolute; inset: 6%; border-radius: 999px; border: 1px solid rgba(34, 211, 238, 0.18); -webkit-mask-image: radial-gradient(circle, transparent 47%, black 48%, black 50%, transparent 51%); mask-image: radial-gradient(circle, transparent 47%, black 48%, black 50%, transparent 51%); animation: yh-spin 90s linear infinite reverse; } .yh-hero-title { font-size: clamp(2.75rem, 8vw, 5.5rem); line-height: 0.98; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; text-shadow: 0 4px 40px rgba(6, 16, 28, 0.9), 0 2px 12px rgba(0, 0, 0, 0.6); } .yh-hero-lead { margin-top: 2rem; font-size: 1.125rem; line-height: 1.7; color: rgba(241, 245, 249, 0.92); max-width: 44ch; margin-left: auto; margin-right: auto; text-wrap: pretty; text-shadow: 0 2px 20px rgba(6, 16, 28, 0.95); } .yh-hero-content-center { max-width: 56rem; margin-left: auto; margin-right: auto; text-align: center; } .yh-hero-actions { margin-top: 2.5rem; 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; } .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: 0; } .yh-panel { padding: 1.5rem; } .yh-panel-lg { padding: 2rem; } .yh-panel-ambient { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, rgba(20, 31, 51, 0.82), rgba(12, 22, 38, 0.94)); } .yh-panel-ambient::before { content: ""; position: absolute; right: -5rem; bottom: -7rem; width: 18rem; height: 18rem; border-radius: 50%; background: radial-gradient(circle, rgba(34, 211, 238, 0.22), transparent 68%); opacity: 0.7; pointer-events: none; animation: yh-float-y 10s ease-in-out infinite; } .yh-panel-ambient::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(34, 211, 238, 0.06), transparent 42%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 32%); 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-left: auto; margin-right: auto; } .yh-hero-content-left .yh-hero-title, .yh-hero-lead-left { text-align: center; margin-left: auto; margin-right: 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-left: auto; margin-right: auto; } } /* Hero stats strip */ .yh-stats { margin-top: 5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; border-radius: 1.25rem; overflow: hidden; background: rgba(17, 27, 44, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--yh-border-strong); } @media (min-width: 768px) { .yh-stats { grid-template-columns: repeat(4, 1fr); } } .yh-stat { background: rgba(11, 19, 32, 0.6); padding: 1.5rem; text-align: left; position: relative; transition: background 0.3s; } .yh-stat:hover { background: rgba(11, 19, 32, 0.85); } .yh-stat-k { font-family: var(--yh-font-display); font-size: 1.75rem; font-weight: 600; background: var(--yh-gradient-cyan); -webkit-background-clip: text; background-clip: text; color: transparent; } @media (min-width: 1024px) { .yh-stat-k { font-size: 2rem; } } .yh-stat-v { margin-top: 0.25rem; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yh-muted-foreground); } /* Compact live pulse widget */ .yh-live-brief { margin-top: 1.25rem; text-align: left; border-radius: 1rem; border: 1px solid var(--yh-border-strong); background: rgba(11, 19, 32, 0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 1rem; } .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; background: var(--yh-primary); box-shadow: 0 0 12px var(--yh-primary); animation: yh-pulse-glow 2.2s ease-in-out infinite; } .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); background: rgba(17, 27, 44, 0.62); 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); background: rgba(2, 6, 23, 0.5); display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); align-items: end; gap: 3px; padding: 6px; } .yh-live-bar { width: 100%; border-radius: 999px; background: linear-gradient(180deg, rgba(34, 211, 238, 0.9), rgba(34, 211, 238, 0.2)); transition: height 0.5s var(--yh-ease), opacity 0.5s var(--yh-ease); opacity: 0.8; } .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); background: rgba(34, 211, 238, 0.1); 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); background: rgba(17, 27, 44, 0.7); color: var(--yh-muted-foreground); } @media (max-width: 767px) { .yh-live-brief-grid { grid-template-columns: 1fr; } .yh-live-brief-sub { display: none; } } /* ============================================================ Footer ============================================================ */ .yh-footer { margin-top: 8rem; border-top: 1px solid var(--yh-border); position: relative; overflow: hidden; } .yh-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.6), transparent); opacity: 0.6; } .yh-footer::after { content: ""; position: absolute; top: -8rem; right: -6rem; width: 22rem; height: 22rem; border-radius: 50%; background: radial-gradient(circle, rgba(34, 211, 238, 0.14), transparent 68%); pointer-events: none; } .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: 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; } .yh-footer-grid>div:first-child { max-width: 24rem; } .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; background: rgba(20, 31, 51, 0.6); 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); background: rgba(34, 211, 238, 0.12); 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); } .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% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes yh-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes yh-grid-drift { from { background-position: 0 0; } to { background-position: 56px 56px; } } @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: 1; transform: none; transition: none; } .yh-reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .yh-reveal { opacity: 1; transform: none; transition: 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; } } /* 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; } /* Scan line accent */ .yh-scan { background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.6), transparent); } /* Checkbox / radio chips */ .yh-check-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 0.875rem; height: 2.5rem; border-radius: 0.75rem; background: rgba(20, 31, 51, 0.55); border: 1px solid var(--yh-border); font-size: 0.85rem; cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s; } .yh-check-chip:hover { border-color: rgba(34, 211, 238, 0.5); } .yh-check-chip input { accent-color: var(--yh-primary); } .yh-check-chip input:checked+span { color: var(--yh-primary); } /* FAQ accordion */ .yh-faq { display: grid; gap: 0.75rem; } .yh-faq-item { border-radius: 1rem; border: 1px solid var(--yh-border); background: rgba(20, 31, 51, 0.55); overflow: hidden; transition: border-color 0.3s, background 0.3s; } .yh-faq-item[open] { border-color: rgba(34, 211, 238, 0.4); background: rgba(20, 31, 51, 0.8); } .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; } .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; } /* 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; background: var(--yh-primary); 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; background: linear-gradient(135deg, rgba(34, 211, 238, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%); 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; background: var(--yh-primary); 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); background: rgba(17, 27, 44, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .yh-tilt>.yh-scan-top { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.6), transparent); animation: yh-pulse-glow 4s ease-in-out infinite; } /* Custom scrollbar */ .yh-theme ::-webkit-scrollbar { width: 10px; height: 10px; } .yh-theme ::-webkit-scrollbar-track { background: var(--yh-background); } .yh-theme ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.32); border-radius: 8px; border: 2px solid var(--yh-background); } .yh-theme ::-webkit-scrollbar-thumb:hover { background: rgba(34, 211, 238, 0.6); } /* 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; background: linear-gradient(180deg, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.55) 100%); 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); 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.85rem 1rem; background: rgba(2, 6, 23, 0.55); border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 0.75rem; color: #fff; font-family: inherit; font-size: 0.97rem; line-height: 1.45; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; outline: none; } .yh-field textarea { min-height: 140px; resize: vertical; } .yh-field input::placeholder, .yh-field textarea::placeholder { color: rgba(148, 163, 184, 0.55); } .yh-field input:focus, .yh-field select:focus, .yh-field textarea:focus { border-color: rgba(34, 211, 238, 0.55); background: rgba(2, 6, 23, 0.75); box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.12); } .yh-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2367e8f9'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 1.1rem; padding-right: 2.5rem; } .yh-field select option { background: #0b1320; color: #fff; } .yh-hint { font-size: 0.82rem; color: rgba(148, 163, 184, 0.75); margin: 0; } .yh-hint.is-warn { color: #fbbf24; } .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; background: rgba(2, 6, 23, 0.5); 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) { background: rgba(34, 211, 238, 0.12); 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; background: linear-gradient(135deg, var(--yh-primary) 0%, #0891b2 100%); 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; } .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 { background: rgba(34, 211, 238, 0.12); color: #67e8f9; border: 1px solid rgba(34, 211, 238, 0.3); } .yh-status.error { background: rgba(248, 113, 113, 0.12); 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%; } .yh-blog-card-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--yh-secondary); } .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: 1.25rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; } .yh-blog-card-meta { display: flex; gap: 0.5rem; font-family: var(--yh-font-mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--yh-primary); text-transform: uppercase; } .yh-blog-card-title { font-family: var(--yh-font-display); font-size: 1.15rem; font-weight: 600; color: #fff; line-height: 1.3; letter-spacing: -0.01em; } .yh-blog-card-excerpt { color: var(--yh-muted-foreground); font-size: 0.9rem; line-height: 1.55; flex: 1; } .yh-blog-card-cta { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--yh-primary); font-size: 0.85rem; font-weight: 600; } .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.75; font-size: 1.02rem; } .yh-prose>*+* { margin-top: 1.1em; } .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.4em 0 0.4em 1.2em; color: rgba(226, 232, 240, 0.78); font-style: italic; background: rgba(34, 211, 238, 0.05); border-radius: 0 0.5rem 0.5rem 0; } .yh-prose code { background: rgba(34, 211, 238, 0.1); 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 { background: rgba(2, 6, 23, 0.7); 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; } .yh-prose pre code { background: none; 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; } /* ============================================================ FORMS: shared yh-form-card system (careers / company / etc.) ============================================================ */ .yh-form-card { width: 100%; max-width: 920px; background: linear-gradient(180deg, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.55) 100%); 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); 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.85rem 1rem; background: rgba(2, 6, 23, 0.55); border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 0.75rem; color: #fff; font-family: inherit; font-size: 0.97rem; line-height: 1.45; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; outline: none; } .yh-field textarea { min-height: 140px; resize: vertical; } .yh-field input::placeholder, .yh-field textarea::placeholder { color: rgba(148, 163, 184, 0.55); } .yh-field input:focus, .yh-field select:focus, .yh-field textarea:focus { border-color: rgba(34, 211, 238, 0.55); background: rgba(2, 6, 23, 0.75); box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.12); } .yh-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2367e8f9'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 1.1rem; padding-right: 2.5rem; } .yh-field select option { background: #0b1320; color: #fff; } .yh-hint { font-size: 0.82rem; color: rgba(148, 163, 184, 0.75); margin: 0; } .yh-hint.is-warn { color: #fbbf24; } .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; background: rgba(2, 6, 23, 0.5); 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) { background: rgba(34, 211, 238, 0.12); 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; background: linear-gradient(135deg, var(--yh-primary) 0%, #0891b2 100%); 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; } .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 { background: rgba(34, 211, 238, 0.12); color: #67e8f9; border: 1px solid rgba(34, 211, 238, 0.3); } .yh-status.error { background: rgba(248, 113, 113, 0.12); 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%; } .yh-blog-card-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--yh-secondary); } .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: 1.25rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; } .yh-blog-card-meta { display: flex; gap: 0.5rem; font-family: var(--yh-font-mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--yh-primary); text-transform: uppercase; } .yh-blog-card-title { font-family: var(--yh-font-display); font-size: 1.15rem; font-weight: 600; color: #fff; line-height: 1.3; letter-spacing: -0.01em; } .yh-blog-card-excerpt { color: var(--yh-muted-foreground); font-size: 0.9rem; line-height: 1.55; flex: 1; } .yh-blog-card-cta { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--yh-primary); font-size: 0.85rem; font-weight: 600; } .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.75; font-size: 1.02rem; } .yh-prose>*+* { margin-top: 1.1em; } .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.4em 0 0.4em 1.2em; color: rgba(226, 232, 240, 0.78); font-style: italic; background: rgba(34, 211, 238, 0.05); border-radius: 0 0.5rem 0.5rem 0; } .yh-prose code { background: rgba(34, 211, 238, 0.1); 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 { background: rgba(2, 6, 23, 0.7); 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; } .yh-prose pre code { background: none; 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; }