diff --git a/.vitepress/theme/Home.vue b/.vitepress/theme/Home.vue index 9c45e6c..3ea2929 100644 --- a/.vitepress/theme/Home.vue +++ b/.vitepress/theme/Home.vue @@ -472,11 +472,15 @@ watch(menuOpen, (open) => { .home-nav-links{display:flex;gap:4px;margin-left:auto} .home-nav-links a{ padding:7px 13px;border-radius:8px;font-size:14.5px;font-weight:500;color:var(--home-ink-soft); - transition:color .2s,background .2s; + transition:color .2s,background .2s;position:relative; } .home-nav-links a:hover{color:var(--home-gold-dark);background:var(--home-bg-soft)} .home-root.dark .home-nav-links a:hover{color:var(--home-gold-light)} .home-nav-links a.active{color:var(--home-gold-dark);font-weight:600} +.home-nav-links a.active::after{ + content:"";position:absolute;bottom:2px;left:50%;transform:translateX(-50%); + width:16px;height:2px;border-radius:1px;background:var(--home-gold); +} .home-root.dark .home-nav-links a.active{color:var(--home-gold-light)} .home-nav-actions{display:flex;align-items:center;gap:8px} .home-icon-btn{ @@ -484,6 +488,7 @@ watch(menuOpen, (open) => { display:grid;place-items:center;cursor:pointer;color:var(--home-ink-soft);transition:all .2s; } .home-icon-btn:hover{background:var(--home-bg-soft);color:var(--home-gold-dark)} +.home-icon-btn:active{transform:scale(.92)} .home-icon-btn svg{width:18px;height:18px} .home-icon-btn .moon{display:none} .home-root.dark .home-icon-btn .sun{display:none} @@ -497,14 +502,15 @@ watch(menuOpen, (open) => { transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap; } .home-btn:hover{transform:translateY(-2px)} +.home-btn:active{transform:translateY(0) scale(.97)} .home-btn-primary{ background:linear-gradient(135deg,var(--home-gold) 0%,var(--home-bronze) 100%); color:#fff;box-shadow:0 6px 20px -6px rgba(200,150,62,.55); } .home-btn-primary:hover{box-shadow:0 10px 28px -6px rgba(200,150,62,.65)} .home-btn-ghost{background:var(--home-bg-elev);border-color:var(--home-border-strong);color:var(--home-ink)} -.home-btn-ghost:hover{border-color:var(--home-gold);color:var(--home-gold-dark)} -.home-root.dark .home-btn-ghost:hover{color:var(--home-gold-light)} +.home-btn-ghost:hover{border-color:var(--home-gold);color:var(--home-gold-dark);background:var(--home-cream)} +.home-root.dark .home-btn-ghost:hover{color:var(--home-gold-light);background:rgba(200,150,62,.08)} .home-btn-lg{padding:14px 28px;font-size:16px} /* ============ Hero ============ */ @@ -572,7 +578,10 @@ watch(menuOpen, (open) => { .home-chip{ display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--home-ink-soft); padding:6px 14px;border-radius:999px;border:1px solid var(--home-border);background:var(--home-bg); + transition:border-color .2s,color .2s,background .2s; } +.home-chip:hover{border-color:var(--home-gold);color:var(--home-gold-dark)} +.home-root.dark .home-chip:hover{color:var(--home-gold-light);background:rgba(200,150,62,.06)} .home-chip svg{width:15px;height:15px;color:var(--home-gold)} /* ============ Sections ============ */ @@ -596,6 +605,7 @@ watch(menuOpen, (open) => { display:flex;flex-direction:column; } .home-feature:hover{transform:translateY(-5px);box-shadow:var(--home-shadow-lg);border-color:var(--home-border-strong)} +.home-feature:active{transform:translateY(-2px) scale(.99)} .home-feature:hover .home-ficon{transform:scale(1.08) rotate(-3deg)} .home-ficon{ width:48px;height:48px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px; @@ -623,7 +633,9 @@ watch(menuOpen, (open) => { .home-layer{ position:relative;padding:32px 28px;border-radius:var(--home-radius);background:var(--home-bg-elev); border:1px solid var(--home-border);box-shadow:var(--home-shadow); + transition:transform .25s ease,box-shadow .25s ease,border-color .25s; } +.home-layer:hover{transform:translateY(-4px);box-shadow:var(--home-shadow-lg);border-color:var(--home-border-strong)} .home-layer-num{ font-family:var(--mono);font-size:13px;font-weight:700;color:var(--home-gold); display:flex;align-items:center;gap:10px;margin-bottom:16px; @@ -635,7 +647,10 @@ watch(menuOpen, (open) => { .home-layer li{ font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:8px; background:var(--home-bg-soft);border:1px solid var(--home-border);color:var(--home-ink-soft); + transition:border-color .2s,color .2s,background .15s;cursor:default; } +.home-layer li:hover{border-color:var(--home-gold);color:var(--home-gold-dark);background:var(--home-cream)} +.home-root.dark .home-layer li:hover{color:var(--home-gold-light);background:rgba(200,150,62,.1);border-color:var(--home-gold)} .home-arch-flow{ margin-top:34px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap; font-size:14px;color:var(--home-ink-faint);font-weight:600; @@ -648,7 +663,9 @@ watch(menuOpen, (open) => { .home-qs-step{ padding:26px;border-radius:var(--home-radius);background:var(--home-bg-elev);border:1px solid var(--home-border); box-shadow:var(--home-shadow);display:flex;flex-direction:column; + transition:transform .25s ease,box-shadow .25s ease,border-color .25s; } +.home-qs-step:hover{transform:translateY(-4px);box-shadow:var(--home-shadow-lg);border-color:var(--home-border-strong)} .home-qs-step h3{font-size:16.5px;margin:14px 0 6px;display:flex;align-items:center;gap:10px} .home-step-no{ width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none; @@ -672,7 +689,8 @@ watch(menuOpen, (open) => { /* ============ Stats ============ */ .home-stats{background:var(--home-bg-soft);border-top:1px solid var(--home-border);border-bottom:1px solid var(--home-border)} .home-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:64px 0} -.home-stat{text-align:center;padding:0 20px} +.home-stat{text-align:center;padding:0 20px;transition:transform .2s} +.home-stat:hover{transform:scale(1.04)} .home-stat .v{font-size:clamp(34px,4vw,46px);font-weight:800;letter-spacing:-.02em; background:linear-gradient(120deg,var(--home-gold),var(--home-bronze)); -webkit-background-clip:text;background-clip:text;color:transparent} @@ -686,7 +704,9 @@ watch(menuOpen, (open) => { .home-about-card p{color:var(--home-ink-soft);font-size:16px} .home-about-card p+p{margin-top:18px} .home-about-points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px} -.home-about-points div{display:flex;gap:11px;align-items:flex-start;font-size:14px;font-weight:600;color:var(--home-ink)} +.home-about-points div{display:flex;gap:11px;align-items:flex-start;font-size:14px;font-weight:600;color:var(--home-ink);transition:color .2s} +.home-about-points div:hover{color:var(--home-gold-dark)} +.home-root.dark .home-about-points div:hover{color:var(--home-gold-light)} .home-about-points svg{width:19px;height:19px;color:var(--home-gold);flex:none;margin-top:3px} /* ============ CTA ============ */ @@ -704,7 +724,9 @@ watch(menuOpen, (open) => { .home-cta-card p{position:relative;color:#c9bca0;margin-top:12px} .home-cta-card .home-hero-actions{justify-content:center;margin-top:30px} .home-cta-card .home-btn-ghost{background:transparent;border-color:#6b5a38;color:#f0e6d0} -.home-cta-card .home-btn-ghost:hover{border-color:var(--home-gold-light);color:var(--home-gold-light)} +.home-cta-card .home-btn-ghost:hover{border-color:var(--home-gold-light);color:var(--home-gold-light);background:rgba(200,150,62,.08)} +.home-cta-card .home-btn-primary{box-shadow:0 6px 24px -4px rgba(200,150,62,.5)} +.home-cta-card .home-btn-primary:hover{box-shadow:0 10px 32px -4px rgba(200,150,62,.65)} /* ============ Footer ============ */ .home-footer{border-top:1px solid var(--home-border);background:var(--home-bg-soft);padding:44px 0} @@ -722,12 +744,39 @@ watch(menuOpen, (open) => { .stagger>*{transition-delay:calc(var(--i,0)*70ms)} /* ============ Responsive ============ */ + +/* --- Widescreen 1440+ --- */ +@media (min-width:1440px){ + .home-wrap{max-width:1320px} + .home-nav-inner{max-width:1320px} + .home-trust-inner{max-width:1320px} + .home-hero{padding:160px 0 100px} + .home-hero-grid{gap:72px} + .home-feature-grid{gap:24px} + .home-section{padding:110px 0} + .home-arch-layers{gap:24px} + .home-qs-grid{gap:24px} + .home-about .home-about-card{max-width:960px;padding:56px 64px} +} + +/* --- Tablet landscape 980-1200 --- */ +@media (min-width:981px) and (max-width:1200px){ + .home-feature{grid-column:span 6} + .home-feature:nth-child(7){grid-column:span 12} + .home-arch-layers{grid-template-columns:repeat(3,1fr);gap:16px} + .home-layer{padding:24px 20px} +} + +/* --- Tablet portrait 768-980 --- */ @media (max-width:980px){ .home-hero{padding:120px 0 64px} .home-hero-grid{grid-template-columns:1fr;gap:44px} .home-feature{grid-column:span 6} .home-feature--wide{grid-column:span 12;flex-direction:column;align-items:flex-start;gap:18px} - .home-arch-layers,.home-qs-grid,.home-stats-grid,.home-about-points{grid-template-columns:1fr} + .home-arch-layers{grid-template-columns:1fr} + .home-qs-grid{grid-template-columns:1fr} + .home-stats-grid{grid-template-columns:repeat(3,1fr)} + .home-about-points{grid-template-columns:1fr} .home-stat{padding:10px 0} .home-nav-links{display:none} .hamburger{display:grid} @@ -736,13 +785,35 @@ watch(menuOpen, (open) => { background:var(--home-bg);border-bottom:1px solid var(--home-border);padding:12px 20px 18px;gap:2px; box-shadow:var(--home-shadow); } + .home-nav.nav-menu-open .home-nav-links a{padding:10px 14px;font-size:15px} .home-about .home-about-card{padding:32px 24px} } + +/* --- Mobile <560 --- */ @media (max-width:560px){ .home-feature{grid-column:span 12} - .home-section{padding:68px 0} + .home-section{padding:56px 0} + .home-section-head{margin-bottom:36px} .home-hero-actions .home-btn{width:100%;justify-content:center} .home-footer-inner{flex-direction:column;align-items:flex-start} + .home-stats-grid{grid-template-columns:1fr} + .home-trust-inner{gap:10px 16px} + .home-chip{font-size:13px;padding:5px 10px} + .home-terminal-body{font-size:12.5px;padding:16px} + .home-hero h1{font-size:clamp(28px,7vw,38px)} + .home-about .home-about-card{padding:24px 18px} + .home-cta-card{padding:40px 20px} + .home-cta-card h2{font-size:22px} +} + +/* --- Small mobile <380 --- */ +@media (max-width:380px){ + .home-wrap{padding:0 16px} + .home-nav-inner{padding:0 16px;gap:12px} + .home-brand{font-size:16px;gap:8px} + .home-brand img{width:26px;height:26px} + .home-badge{font-size:12px;padding:5px 10px} + .home-hero{padding:100px 0 48px} } @media (prefers-reduced-motion:reduce){ .home-root *,.home-root *::before,.home-root *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important} diff --git a/.vitepress/theme/custom.css b/.vitepress/theme/custom.css index ea75057..2d7a7fe 100644 --- a/.vitepress/theme/custom.css +++ b/.vitepress/theme/custom.css @@ -53,6 +53,11 @@ transition: color 0.25s; } +.VPNavBar .VPNavBarMenuLink:active, +.VPNavBar .VPNavBarMenuGroup .title:active { + opacity: 0.7; +} + .VPNavBar .VPNavBarMenuLink:hover, .VPNavBar .VPNavBarMenuGroup .title:hover { color: var(--ms-gold) !important; @@ -199,6 +204,10 @@ transform: translateY(-2px); } +.VPHero .actions .action a.VPButton.brand:active { + transform: translateY(0) scale(0.97); +} + .VPHero .actions .action a.VPButton.alt { border: 1.5px solid var(--ms-gold) !important; color: var(--ms-gold-dark) !important; @@ -222,6 +231,10 @@ transform: translateY(-2px); } +.VPHero .actions .action a.VPButton.alt:active { + transform: translateY(0) scale(0.97); +} + /* ============ FEATURES SECTION ============ */ .VPFeatures { padding: 48px 0 56px !important; @@ -283,6 +296,12 @@ border: 1px solid rgba(200, 150, 62, 0.12); border-radius: 12px !important; margin-bottom: 4px; + transition: transform 0.3s ease, background 0.3s; +} + +.VPFeatures .VPFeature:hover .icon { + transform: scale(1.08) rotate(-3deg); + background: linear-gradient(135deg, rgba(200, 150, 62, 0.14), rgba(184, 115, 51, 0.08)) !important; } .dark .VPFeatures .VPFeature .icon { @@ -424,10 +443,22 @@ } /* Sidebar hover */ +.VPSidebarItem .item .link { + transition: background 0.2s, border-color 0.2s; +} + .VPSidebarItem .item .link:hover { background: rgba(200, 150, 62, 0.04) !important; } +.VPSidebarItem .item .link:hover .link-text { + color: var(--ms-gold-dark) !important; +} + +.dark .VPSidebarItem .item .link:hover .link-text { + color: var(--ms-gold-light) !important; +} + /* Inline code */ .vp-doc code { background: rgba(200, 150, 62, 0.08) !important; @@ -499,6 +530,11 @@ .vp-doc table tr { border-bottom: 1px solid rgba(200, 150, 62, 0.08); + transition: background 0.15s; +} + +.vp-doc table tr:hover { + background: rgba(200, 150, 62, 0.03); } /* ============ SEARCH ============ */ @@ -541,15 +577,72 @@ } /* ============ RESPONSIVE ============ */ -@media (max-width: 768px) { + +/* --- Widescreen 1440+ --- */ +@media (min-width:1440px) { + .VPDoc .content-container { + max-width: 1100px !important; + } + .VPDoc .sidebar { + width: 280px !important; + } +} + +/* --- Tablet 768-960 --- */ +@media (max-width: 960px) { .VPHero .heading .name { - font-size: 2.8rem !important; + font-size: 3rem !important; } .VPHero .text { - font-size: 1.3rem !important; + font-size: 1.35rem !important; + } + .VPFeatures { + padding: 36px 0 44px !important; + } +} + +/* --- Mobile <768 --- */ +@media (max-width: 768px) { + .VPHero .heading .name { + font-size: 2.4rem !important; + } + .VPHero .text { + font-size: 1.15rem !important; + } + .VPHero .tagline { + font-size: 0.95rem !important; + } + .VPHero { + padding-top: 32px !important; + padding-bottom: 28px !important; } .VPFeatures .VPFeature .box { - padding: 22px 18px 18px !important; + padding: 20px 16px 16px !important; + } + .VPHome .vp-doc h2 { + font-size: 1.5rem; + margin: 36px 0 18px; + } + .VPHome .vp-doc p { + font-size: 0.95rem; + } + .vp-doc h1 { font-size: 1.8rem !important; } + .vp-doc h2 { font-size: 1.4rem !important; } + .vp-doc h3 { font-size: 1.15rem !important; } + .vp-doc table { font-size: 0.85rem; } + .vp-doc .content-container { + padding: 0 16px !important; + } +} + +/* --- Small mobile <420 --- */ +@media (max-width: 420px) { + .VPHero .heading .name { + font-size: 2rem !important; + } + .VPHero .actions .action a.VPButton { + padding: 0 20px !important; + font-size: 0.88rem !important; } }