Update styles/styles.css

styles/styles.css

@@ -1,150 +1,297 @@
-/* Custom button styles for Perfect Webinar Framework */
-
-/* Generate Webinar Script button - yellow with black border */
-div.stButton > button:first-child {
-    width: 100%;
-    margin-top: 0.5rem;
-    border-radius: 5px;
-    height: 3em;
-    background: #FFD700; /* Solid yellow color like in the image */
-    color: black;
-    font-weight: bold;
-    border: 1px solid black; /* Changed to 1px border */
-    transition: all 0.3s ease;
-}
-
-div.stButton > button:first-child:hover {
-    background: #FFDF33; /* Slightly brighter yellow on hover */
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-    border: 1px solid black;
-}
-
-/* Download buttons - green/blue gradient */
-div.stDownloadButton > button:first-child {
-    background: linear-gradient(90deg, #4CAF50, #2196F3); /* Green to blue gradient */
-    color: white; /* White text for better visibility on gradient */
-    font-weight: bold;
-    padding: 0.5rem 1rem;
-    border-radius: 5px;
-    border: 1px solid black; /* 1px border as requested */
-    transition: all 0.3s;
-    width: 80%; /* Width 80% as requested */
-    margin: 0 auto;
-    display: block;
-}
-
-div.stDownloadButton > button:first-child:hover {
-    background: linear-gradient(135deg, #3ED83E 0%, #4169E1 100%);
-    transform: translateY(-2px) !important;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
-    border: 2px solid black !important;
-}
-
-/* Special styling for download buttons in the webinar names container */
-.webinar-names-container div.stDownloadButton > button:first-child {
-    background: linear-gradient(90deg, #FF5722, #FF9800); /* Orange gradient */
-    color: white;
-    font-weight: bold;
-    border: 1px solid black;
-}
-
-.webinar-names-container div.stDownloadButton > button:first-child:hover {
-    background: linear-gradient(135deg, #FF7043, #FFA726);
-    transform: translateY(-2px) !important;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
-    border: 2px solid black !important;
-}
-
-
-/* Reduce top spacing and hide unnecessary elements */
-.block-container {
-    padding-top: 1rem;
-    padding-bottom: 0rem;
-}
-
-header {
-    visibility: hidden;
-}
-
-#MainMenu {
-    visibility: hidden;
-}
-
-footer {
-    visibility: hidden;
-}
-
-/* Add any other custom styles here */
-
-
-/* Styles for the webinar names container in the second tab */
-.webinar-names-container {
-    padding: 15px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
-/* Add border to all webinar name containers */
-.webinar-names-container.with-border {
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    padding: 20px;
-}
-
-/* Additional styling for containers with many items */
-.webinar-names-container.many-items .stDownloadButton {
-    margin-top: 15px;
-    margin-bottom: 15px;
-}
-
-/* Special styling for download buttons in the webinar names tab */
-div.stDownloadButton[data-testid*="download_top_names"] > button:first-child,
-div.stDownloadButton[data-testid*="download_bottom_names"] > button:first-child {
-    background: linear-gradient(90deg, #FF5722, #FF9800) !important; /* Orange gradient */
-    color: white !important;
-    font-weight: bold !important;
-    border: 1px solid black !important;
-}
-
-div.stDownloadButton[data-testid*="download_top_names"] > button:first-child:hover,
-div.stDownloadButton[data-testid*="download_bottom_names"] > button:first-child:hover {
-    background: linear-gradient(135deg, #FF7043, #FFA726) !important;
-    transform: translateY(-2px) !important;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
-    border: 2px solid black !important;
-}
-
-
-/* Custom download button for names tab */
-.custom-download-button.names-download-button {
-    background: linear-gradient(90deg, #FF5722, #FF9800); /* Orange gradient */
-    color: white;
-    font-weight: bold;
-    padding: 0.75rem 1rem;
-    border-radius: 5px;
-    border: 1px solid #333;
-    text-align: center;
-    margin: 20px auto;
-    width: 80%;
-    cursor: pointer;
-    transition: all 0.3s;
-    display: block;
-}
-
-.custom-download-button.names-download-button:hover {
-    background: linear-gradient(135deg, #FF7043, #FFA726);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
-    border: 2px solid #333;
-}
-
-/* Make sure links inside the button inherit the text color */
-.custom-download-button.names-download-button a {
-    color: white !important;
-    display: block;
-    width: 100%;
-    height: 100%;
-    font-weight: bold;
-    text-decoration: none !important;
+/* Custom button styles for Perfect Webinar Framework */
+
+/* Generate Webinar Script button - yellow with black border */
+div.stButton > button:first-child {
+    width: 100%;
+    margin-top: 0.5rem;
+    border-radius: 5px;
+    height: 3em;
+    background: #FFD700; /* Solid yellow color like in the image */
+    color: black;
+    font-weight: bold;
+    border: 1px solid black; /* Changed to 1px border */
+    transition: all 0.3s ease;
+}
+
+div.stButton > button:first-child:hover {
+    background: #FFDF33; /* Slightly brighter yellow on hover */
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+    border: 1px solid black;
+}
+
+/* Download buttons - green/blue gradient */
+div.stDownloadButton > button:first-child {
+    background: linear-gradient(90deg, #4CAF50, #2196F3); /* Green to blue gradient */
+    color: white; /* White text for better visibility on gradient */
+    font-weight: bold;
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    border: 1px solid black; /* 1px border as requested */
+    transition: all 0.3s;
+    width: 80%; /* Width 80% as requested */
+    margin: 0 auto;
+    display: block;
+}
+
+div.stDownloadButton > button:first-child:hover {
+    background: linear-gradient(135deg, #3ED83E 0%, #4169E1 100%);
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
+    border: 2px solid black !important;
+}
+
+/* Special styling for download buttons in the webinar names container */
+.webinar-names-container div.stDownloadButton > button:first-child {
+    background: linear-gradient(90deg, #FF5722, #FF9800); /* Orange gradient */
+    color: white;
+    font-weight: bold;
+    border: 1px solid black;
+}
+
+.webinar-names-container div.stDownloadButton > button:first-child:hover {
+    background: linear-gradient(135deg, #FF7043, #FFA726);
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
+    border: 2px solid black !important;
+}
+
+
+/* Reduce top spacing and hide unnecessary elements */
+.block-container {
+    padding-top: 1rem;
+    padding-bottom: 0rem;
+}
+
+header {
+    visibility: hidden;
+}
+
+#MainMenu {
+    visibility: hidden;
+}
+
+footer {
+    visibility: hidden;
+}
+
+/* Add any other custom styles here */
+
+
+/* Styles for the webinar names container in the second tab */
+.webinar-names-container {
+    padding: 15px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+/* Add border to all webinar name containers */
+.webinar-names-container.with-border {
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 20px;
+}
+
+/* Additional styling for containers with many items */
+.webinar-names-container.many-items .stDownloadButton {
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+
+/* Special styling for download buttons in the webinar names tab */
+div.stDownloadButton[data-testid*="download_top_names"] > button:first-child,
+div.stDownloadButton[data-testid*="download_bottom_names"] > button:first-child {
+    background: linear-gradient(90deg, #FF5722, #FF9800) !important; /* Orange gradient */
+    color: white !important;
+    font-weight: bold !important;
+    border: 1px solid black !important;
+}
+
+div.stDownloadButton[data-testid*="download_top_names"] > button:first-child:hover,
+div.stDownloadButton[data-testid*="download_bottom_names"] > button:first-child:hover {
+    background: linear-gradient(135deg, #FF7043, #FFA726) !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
+    border: 2px solid black !important;
+}
+
+
+/* Custom download button for names tab */
+.custom-download-button.names-download-button {
+    background: linear-gradient(90deg, #FF5722, #FF9800); /* Orange gradient */
+    color: white;
+    font-weight: bold;
+    padding: 0.75rem 1rem;
+    border-radius: 5px;
+    border: 1px solid #333;
+    text-align: center;
+    margin: 20px auto;
+    width: 80%;
+    cursor: pointer;
+    transition: all 0.3s;
+    display: block;
+}
+
+.custom-download-button.names-download-button:hover {
+    background: linear-gradient(135deg, #FF7043, #FFA726);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+    border: 2px solid #333;
+}
+
+/* Make sure links inside the button inherit the text color */
+.custom-download-button.names-download-button a {
+    color: white !important;
+    display: block;
+    width: 100%;
+    height: 100%;
+    font-weight: bold;
+    text-decoration: none !important;
+}
+
+/* Custom button styles for Sales Page Generator */
+
+/* Generate Sales Page Section button - yellow with black border */
+div.stButton > button:first-child {
+    width: 100%;
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
+    border-radius: 5px;
+    height: 3em;
+    background: #FFD700; /* Solid yellow color */
+    color: black;
+    font-weight: bold;
+    border: 1px solid black;
+    transition: all 0.3s ease;
+    padding: 0.5rem 1rem;
+}
+
+div.stButton > button:first-child:hover {
+    background: #FFDF33; /* Slightly brighter yellow on hover */
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+    border: 1px solid black;
+}
+
+/* Download buttons - green/blue gradient */
+div.stDownloadButton > button:first-child {
+    background: linear-gradient(90deg, #4CAF50, #2196F3); /* Green to blue gradient */
+    color: white; /* White text for better visibility on gradient */
+    font-weight: bold;
+    padding: 0.75rem 1.25rem;
+    border-radius: 5px;
+    border: 1px solid black;
+    transition: all 0.3s;
+    width: 80%;
+    margin: 1rem auto;
+    display: block;
+}
+
+div.stDownloadButton > button:first-child:hover {
+    background: linear-gradient(135deg, #3ED83E 0%, #4169E1 100%);
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
+    border: 2px solid black !important;
+}
+
+/* Reduce top spacing and hide unnecessary elements */
+.block-container {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
+header {
+    visibility: hidden;
+}
+
+#MainMenu {
+    visibility: hidden;
+}
+
+footer {
+    visibility: hidden;
+}
+
+/* Input fields styling */
+div.stTextInput > div > div > input {
+    padding: 0.75rem 1rem;
+    margin-bottom: 1rem;
+    border-radius: 5px;
+    border: 1px solid #ddd;
+}
+
+/* Selectbox styling */
+div.stSelectbox > div > div {
+    padding: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+/* Expander styling */
+div.streamlit-expanderHeader {
+    padding: 0.75rem 1rem;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+div.streamlit-expanderContent {
+    padding: 1rem;
+}
+
+/* Slider styling */
+div.stSlider {
+    padding: 1rem 0.5rem;
+    margin-bottom: 1rem;
+}
+
+/* Subheader styling */
+h3 {
+    margin-top: 1.5rem;
+    margin-bottom: 1rem;
+    padding: 0.5rem 0;
+}
+
+/* Content display area */
+.stMarkdown {
+    padding: 1rem;
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
+    border-radius: 5px;
+}
+
+/* Sales page section container */
+.sales-page-section-container {
+    padding: 1.5rem;
+    margin-top: 1rem;
+    margin-bottom: 1.5rem;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+/* Spinner styling */
+div.stSpinner > div {
+    margin: 1rem auto;
+}
+
+/* Warning and error messages */
+div.stAlert {
+    padding: 1rem;
+    margin: 1rem 0 1.5rem 0;
+    border-radius: 5px;
+}
+
+/* Main title styling */
+h1 {
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+}
+
+/* Subtitle styling */
+h3 {
+    margin-bottom: 1.5rem;
+}
+
+/* Container for generated content */
+.stMarkdown > div > p {
+    margin-bottom: 1rem;
+    line-height: 1.6;
 }