@@ -2771,23 +2771,205 @@ main {
2771
2771
box-shadow : var (--shadow-md );
2772
2772
}
2773
2773
2774
- /* Эффект волны при наведении */
2775
- .platform-link ::before {
2776
- content : '' ;
2777
- position : absolute;
2778
- top : 50% ;
2779
- left : 50% ;
2780
- width : 0 ;
2781
- height : 0 ;
2782
- background : rgba (255 , 255 , 255 , 0.2 );
2783
- border-radius : 50% ;
2784
- transform : translate (-50% , -50% );
2785
- transition : width 0.6s , height 0.6s ;
2774
+ .platform-section {
2775
+ background : var (--bg-card );
2776
+ border : 1px solid var (--border-color );
2777
+ border-radius : 8px ;
2778
+ padding : 0 ;
2779
+ margin-bottom : 1.5rem ;
2780
+ box-shadow : var (--shadow-sm );
2781
+ transition : var (--transition );
2782
+ overflow : hidden;
2783
+ }
2784
+
2785
+ .platform-section : hover {
2786
+ transform : translateY (-2px );
2787
+ box-shadow : var (--shadow-md );
2788
+ border-color : var (--primary-color );
2789
+ }
2790
+
2791
+ .platform-header {
2792
+ padding : 1rem 1.5rem ;
2793
+ background : var (--bg-secondary );
2794
+ display : flex;
2795
+ align-items : center;
2796
+ gap : 1rem ;
2797
+ }
2798
+
2799
+ .platform-logo {
2800
+ width : 80px ;
2801
+ height : 80px ;
2802
+ object-fit : cover;
2803
+ border-radius : 8px ;
2804
+ flex-shrink : 0 ;
2805
+ border : 1px solid var (--border-color );
2806
+ }
2807
+
2808
+ .platform-header h3 {
2809
+ margin : 0 ;
2810
+ color : var (--text-primary );
2811
+ font-size : 1.5rem ;
2812
+ font-weight : 600 ;
2813
+ }
2814
+
2815
+ .platform-content {
2816
+ padding : 1.5rem ;
2817
+ }
2818
+
2819
+ .platform-content > p {
2820
+ color : var (--text-secondary );
2821
+ margin-bottom : 1rem ;
2822
+ line-height : 1.6 ;
2823
+ }
2824
+
2825
+ .platform-advantages {
2826
+ display : flex;
2827
+ flex-wrap : wrap;
2828
+ gap : 0.5rem ;
2829
+ margin-bottom : 1rem ;
2830
+ }
2831
+
2832
+ .advantage-tag {
2833
+ background : var (--bg-secondary );
2834
+ color : var (--text-secondary );
2835
+ padding : 0.2rem 0.6rem ;
2836
+ border-radius : 20px ;
2837
+ font-size : 0.75rem ;
2838
+ border : 1px solid var (--border-color );
2839
+ white-space : nowrap;
2840
+ }
2841
+
2842
+ .platform-details {
2843
+ background : var (--bg-secondary );
2844
+ border-radius : 6px ;
2845
+ padding : 0.75rem ;
2846
+ margin-bottom : 1rem ;
2847
+ }
2848
+
2849
+ .detail-item {
2850
+ margin-bottom : 0.5rem ;
2851
+ display : flex;
2852
+ flex-direction : column;
2853
+ gap : 0.25rem ;
2854
+ }
2855
+
2856
+ .detail-item : last-child {
2857
+ margin-bottom : 0 ;
2858
+ }
2859
+
2860
+ .detail-item strong {
2861
+ color : var (--text-primary );
2862
+ font-size : 0.85rem ;
2863
+ font-weight : 600 ;
2864
+ }
2865
+
2866
+ .detail-item span {
2867
+ color : var (--text-secondary );
2868
+ font-size : 0.8rem ;
2869
+ line-height : 1.4 ;
2870
+ }
2871
+
2872
+ .detail-item code {
2873
+ background : var (--bg-primary );
2874
+ color : var (--primary-color );
2875
+ padding : 0.2rem 0.4rem ;
2876
+ border-radius : 4px ;
2877
+ font-size : 0.75rem ;
2878
+ border : 1px solid var (--border-color );
2879
+ font-family : 'Courier New' , monospace;
2880
+ }
2881
+
2882
+ .platform-links {
2883
+ display : flex;
2884
+ flex-wrap : wrap;
2885
+ gap : 0.5rem ;
2886
+ }
2887
+
2888
+ .platform-link {
2889
+ display : flex;
2890
+ align-items : center;
2891
+ justify-content : center;
2892
+ gap : 0.4rem ;
2893
+ padding : 0.5rem 0.8rem ;
2894
+ border-radius : 6px ;
2895
+ text-decoration : none;
2896
+ font-weight : 500 ;
2897
+ font-size : 0.8rem ;
2898
+ transition : var (--transition );
2899
+ border : none;
2900
+ position : relative;
2901
+ overflow : hidden;
2902
+ flex : 1 ;
2903
+ min-width : 100px ;
2904
+ }
2905
+
2906
+ .link-icon {
2907
+ font-size : 1rem ;
2908
+ flex-shrink : 0 ;
2909
+ }
2910
+
2911
+ .link-text {
2912
+ white-space : nowrap;
2913
+ }
2914
+
2915
+ .download-link {
2916
+ background : var (--primary-color );
2917
+ color : white;
2918
+ }
2919
+
2920
+ .download-link : hover {
2921
+ background : var (--primary-hover );
2922
+ color : white;
2923
+ transform : translateY (-1px );
2924
+ box-shadow : var (--shadow-sm );
2925
+ }
2926
+
2927
+ .github-link {
2928
+ background : # 24292e ;
2929
+ color : white;
2930
+ }
2931
+
2932
+ .github-link : hover {
2933
+ background : # 1a1e22 ;
2934
+ color : white;
2935
+ transform : translateY (-1px );
2936
+ box-shadow : var (--shadow-sm );
2937
+ }
2938
+
2939
+ .website-link {
2940
+ background : var (--secondary-color );
2941
+ color : white;
2942
+ }
2943
+
2944
+ .website-link : hover {
2945
+ background : # 059669 ;
2946
+ color : white;
2947
+ transform : translateY (-1px );
2948
+ box-shadow : var (--shadow-sm );
2949
+ }
2950
+
2951
+ .docs-link {
2952
+ background : # f59e0b ;
2953
+ color : white;
2786
2954
}
2787
2955
2788
- .platform-link : hover ::before {
2789
- width : 300px ;
2790
- height : 300px ;
2956
+ .docs-link : hover {
2957
+ background : # d97706 ;
2958
+ color : white;
2959
+ transform : translateY (-1px );
2960
+ box-shadow : var (--shadow-sm );
2961
+ }
2962
+
2963
+ .chat-link {
2964
+ background : # 0088cc ;
2965
+ color : white;
2966
+ }
2967
+
2968
+ .chat-link : hover {
2969
+ background : # 006ba3 ;
2970
+ color : white;
2971
+ transform : translateY (-1px );
2972
+ box-shadow : var (--shadow-sm );
2791
2973
}
2792
2974
2793
2975
# comments {
@@ -2858,31 +3040,32 @@ main {
2858
3040
margin-right : 0 ;
2859
3041
}
2860
3042
2861
- /* Platform Section Mobile */
2862
- .platform-header {
2863
- padding : 1rem ;
2864
- flex-direction : column;
2865
- text-align : center;
2866
- gap : 0.75rem ;
2867
- }
2868
-
2869
- .platform-logo {
2870
- width : 50px ;
2871
- height : 50px ;
2872
- }
2873
-
2874
- .platform-content {
2875
- padding : 1rem ;
2876
- }
2877
-
2878
- .platform-links {
2879
- grid-template-columns : 1fr ;
2880
- }
2881
-
2882
- .platform-link {
2883
- padding : 0.6rem ;
2884
- font-size : 0.85rem ;
2885
- }
3043
+ .platform-header {
3044
+ padding : 0.75rem ;
3045
+ flex-direction : column;
3046
+ text-align : center;
3047
+ gap : 0.5rem ;
3048
+ }
3049
+
3050
+ .platform-logo {
3051
+ width : 60px ;
3052
+ height : 60px ;
3053
+ }
3054
+
3055
+ .platform-content {
3056
+ padding : 1rem ;
3057
+ }
3058
+
3059
+ .platform-links {
3060
+ flex-direction : column;
3061
+ gap : 0.4rem ;
3062
+ }
3063
+
3064
+ .platform-link {
3065
+ padding : 0.5rem ;
3066
+ font-size : 0.8rem ;
3067
+ flex : none;
3068
+ }
2886
3069
}
2887
3070
2888
3071
@media (max-width : 480px ) {
@@ -2911,4 +3094,31 @@ main {
2911
3094
padding : 0.75rem ;
2912
3095
font-size : 0.875rem ;
2913
3096
}
3097
+
3098
+ .platform-header {
3099
+ padding : 0.5rem ;
3100
+ }
3101
+
3102
+ .platform-logo {
3103
+ width : 50px ;
3104
+ height : 50px ;
3105
+ }
3106
+
3107
+ .platform-content {
3108
+ padding : 0.75rem ;
3109
+ }
3110
+
3111
+ .platform-details {
3112
+ padding : 0.5rem ;
3113
+ }
3114
+
3115
+ .platform-link {
3116
+ padding : 0.4rem ;
3117
+ font-size : 0.75rem ;
3118
+ }
3119
+
3120
+ .advantage-tag {
3121
+ font-size : 0.7rem ;
3122
+ padding : 0.15rem 0.4rem ;
3123
+ }
2914
3124
}
0 commit comments