| @@ -2815,6 +2815,135 @@ | ||
| 2815 | 2815 | } |
| 2816 | 2816 | } |
| 2817 | 2817 | |
| 2818 | 2818 | |
| 2819 | +.video-tutorials-section { | |
| 2820 | + max-width: 1200px; | |
| 2821 | + margin: 0 auto; | |
| 2822 | + padding: 2rem 0; | |
| 2823 | +} | |
| 2819 | 2824 | |
| 2825 | +.section-intro { | |
| 2826 | + text-align: center; | |
| 2827 | + margin-bottom: 2rem; | |
| 2828 | + font-size: 1.1rem; | |
| 2829 | +} | |
| 2830 | + | |
| 2831 | +.tutorial-grid { | |
| 2832 | + display: grid; | |
| 2833 | + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| 2834 | + gap: 2rem; | |
| 2835 | + margin-bottom: 3rem; | |
| 2836 | +} | |
| 2837 | + | |
| 2838 | +.tutorial-item { | |
| 2839 | + border: 1px solid #e0e0e0; | |
| 2840 | + border-radius: 8px; | |
| 2841 | + padding: 1.5rem; | |
| 2842 | + box-shadow: 0 2px 5px rgba(0,0,0,0.05); | |
| 2843 | + transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| 2844 | + background-color: #fff; | |
| 2845 | +} | |
| 2846 | + | |
| 2847 | +.tutorial-item:hover { | |
| 2848 | + transform: translateY(-5px); | |
| 2849 | + box-shadow: 0 5px 15px rgba(0,0,0,0.1); | |
| 2850 | +} | |
| 2851 | + | |
| 2852 | +.tutorial-item h3 { | |
| 2853 | + margin-top: 0; | |
| 2854 | + font-size: 1.2rem; | |
| 2855 | + color: #333; | |
| 2856 | + border-bottom: 2px solid #f0f0f0; | |
| 2857 | + padding-bottom: 0.75rem; | |
| 2858 | + margin-bottom: 1rem; | |
| 2859 | +} | |
| 2860 | + | |
| 2861 | +.video-description p { | |
| 2862 | + margin-bottom: 1rem; | |
| 2863 | + color: #555; | |
| 2864 | +} | |
| 2865 | + | |
| 2866 | +.video-description small { | |
| 2867 | + color: #888; | |
| 2868 | + font-style: italic; | |
| 2869 | +} | |
| 2870 | + | |
| 2871 | +.video-link { | |
| 2872 | + display: inline-flex; | |
| 2873 | + align-items: center; | |
| 2874 | + text-decoration: none; | |
| 2875 | + color: #0073aa; | |
| 2876 | + font-weight: 500; | |
| 2877 | + margin-top: 0.5rem; | |
| 2878 | + padding: 0.5rem 1rem; | |
| 2879 | + border-radius: 4px; | |
| 2880 | + background-color: #f7f7f7; | |
| 2881 | + transition: background-color 0.2s ease; | |
| 2882 | +} | |
| 2883 | + | |
| 2884 | +.video-link:hover { | |
| 2885 | + background-color: #e6f3fa; | |
| 2886 | + color: #004d74; | |
| 2887 | +} | |
| 2888 | + | |
| 2889 | +.video-icon { | |
| 2890 | + margin-right: 0.5rem; | |
| 2891 | + display: inline-flex; | |
| 2892 | + color: #e62117; | |
| 2893 | +} | |
| 2894 | + | |
| 2895 | +.support-section { | |
| 2896 | + margin-top: 3rem; | |
| 2897 | + padding-top: 2rem; | |
| 2898 | + border-top: 1px solid #e0e0e0; | |
| 2899 | + text-align: center; | |
| 2900 | +} | |
| 2901 | + | |
| 2902 | +.support-content { | |
| 2903 | + max-width: 800px; | |
| 2904 | + margin: 0 auto; | |
| 2905 | + background-color: #f9f9f9; | |
| 2906 | + padding: 2rem; | |
| 2907 | + border-radius: 8px; | |
| 2908 | +} | |
| 2909 | + | |
| 2910 | +.support-content p { | |
| 2911 | + margin-bottom: 1rem; | |
| 2912 | + font-size: 1.1rem; | |
| 2913 | + line-height: 1.6; | |
| 2914 | +} | |
| 2915 | + | |
| 2916 | +.support-content a { | |
| 2917 | + color: #0073aa; | |
| 2918 | + font-weight: 500; | |
| 2919 | + text-decoration: none; | |
| 2920 | + padding: 0.2rem 0.4rem; | |
| 2921 | + border-radius: 3px; | |
| 2922 | + transition: background-color 0.2s; | |
| 2923 | +} | |
| 2924 | + | |
| 2925 | +.support-content a:hover { | |
| 2926 | + background-color: #e6f3fa; | |
| 2927 | + text-decoration: underline; | |
| 2928 | +} | |
| 2929 | + | |
| 2930 | +.api-info-item h4 { | |
| 2931 | + margin-top: 0; | |
| 2932 | + color: #333; | |
| 2933 | + margin-bottom: 1rem; | |
| 2934 | +} | |
| 2935 | + | |
| 2936 | +@media (max-width: 768px) { | |
| 2937 | + .tutorial-grid { | |
| 2938 | + grid-template-columns: 1fr; | |
| 2939 | + } | |
| 2940 | + | |
| 2941 | + .tutorial-item { | |
| 2942 | + padding: 1rem; | |
| 2943 | + } | |
| 2944 | + | |
| 2945 | + .support-content { | |
| 2946 | + padding: 1.5rem; | |
| 2947 | + } | |
| 2948 | +} | |
| 2820 | 2949 | |
