/* Master CSS for Résumé Tuna Website This file contains all the styles for the landing page, pricing page, and book page. It should be linked to each HTML file in the section. */ /* ========================================================= 1. CSS Variables (Brand Palette) ========================================================= */ :root { --hat-blue: #000080; --tuna-blue: #ADD8E6; --stripe-blue: #87CEFA; --orange-band: #FFA500; --white: #FFFFFF; --charcoal-gray: #333333; --light-gray: #D3D3D3; } /* ========================================================= 2. Base Reset & Typography ========================================================= */ body { font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; color: var(--charcoal-gray); line-height: 1.6; } h1, h2, h3 { font-family: 'Montserrat', sans-serif; font-weight: 800; line-height: 1.2; color: var(--charcoal-gray); } h1 { font-size: 3.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.25rem; } p { font-size: 1rem; } /* ========================================================= 3. Layout & Utilities ========================================================= */ .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .section { padding: 80px 0; } .section-title { text-align: center; margin-bottom: 50px; } /* ========================================================= 4. Reusable Components ========================================================= */ .btn { display: inline-block; padding: 15px 30px; text-decoration: none; border-radius: 50px; font-family: 'Montserrat', sans-serif; font-weight: 700; transition: background-color 0.3s ease; text-align: center; } .btn-primary { background-color: var(--orange-band); color: var(--white); } .btn-primary:hover { background-color: #e69500; } .btn-secondary { background-color: var(--tuna-blue); color: var(--hat-blue); } .btn-secondary:hover { background-color: #9cd1e0; } /* ========================================================= 5. Major Sections ========================================================= */ /* Header */ .site-header { background-color: var(--white); padding: 20px 0; } .site-header .container { display: flex; justify-content: space-between; align-items: center; } .site-header .logo img { height: 60px; } .site-header nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; } .site-header nav li { margin-left: 30px; } .site-header nav a { text-decoration: none; color: var(--charcoal-gray); font-family: 'Open Sans', sans-serif; font-weight: 600; transition: color 0.3s ease; } .site-header nav a:hover, .site-header nav a.active { color: var(--hat-blue); } /* Hero Section */ .hero { background-color: var(--hat-blue); color: var(--white); text-align: center; padding: 100px 0; } .hero .container { display: flex; justify-content: space-between; align-items: center; } .hero-content { width: 50%; padding-right: 50px; } .hero-visual { width: 50%; position: relative; overflow: hidden; border-radius: 10px; } .hero-visual video { width: 100%; height: 100%; object-fit: cover; display: block; } .hero h1, .hero p { color: var(--white); } .hero h1 { font-size: 3.5rem; margin-bottom: 20px; } .hero p { font-size: 1.25rem; margin-bottom: 30px; } .hero .special-offer { font-size: 0.9rem; margin-top: 15px; display: block; } /* Embedded Video */ .video-container { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; } /* Grid Sections */ .grid-container { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); text-align: center; } .grid-item .icon { font-size: 3rem; color: var(--tuna-blue); margin-bottom: 20px; } /* Book Framework */ .book-framework { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); text-align: left; } .book-framework .part-icon { font-size: 3rem; margin-bottom: 15px; } .book-framework .part-title { font-weight: 700; margin-bottom: 10px; } .book-framework ul { list-style: none; padding: 0; margin: 0; } .book-framework ul li { padding-left: 20px; position: relative; margin-bottom: 10px; } .book-framework ul li:before { content: "•"; position: absolute; left: 0; color: var(--hat-blue); font-size: 1.5rem; line-height: 1; } /* Author Bio */ .author-bio { background-color: var(--light-gray); } .author-bio .bio-container { display: flex; align-items: center; gap: 40px; } .author-bio img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; } /* Testimonials */ .testimonial { background-color: var(--light-gray); } .testimonial blockquote { font-size: 1.5rem; font-weight: 600; text-align: center; margin: 0 auto 30px; max-width: 800px; } .testimonial .author { text-align: center; } .testimonial .author img { width: 80px; height: 80px; border-radius: 50%; margin-bottom: 10px; object-fit: cover; } .testimonial .author .name { font-weight: 600; display: block; } .testimonial .author .title { font-style: italic; color: #666; } /* FAQ */ .faq-section { background-color: var(--light-gray); } .faq-item { border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: 20px 0; } .faq-item:last-child { border-bottom: none; } .faq-question { font-family: 'Open Sans', sans-serif; font-weight: 600; cursor: pointer; position: relative; padding-right: 30px; } .faq-question:after { content: '+'; position: absolute; right: 0; top: 0; font-size: 1.5rem; } .faq-item.active .faq-answer { max-height: 200px; } .faq-item.active .faq-question:after { content: '-'; } /* Pricing */ .pricing-table { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); text-align: center; } .pricing-card { background-color: var(--light-gray); border-radius: 10px; padding: 40px 20px; display: flex; flex-direction: column; justify-content: space-between; position: relative; } .pricing-card.highlighted { background-color: var(--hat-blue); color: var(--white); transform: scale(1.05); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .pricing-card.highlighted h3, .pricing-card.highlighted .price, .pricing-card.highlighted .sub-text, .pricing-card.highlighted li { color: var(--white); } .pricing-card .highlight-tag { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background-color: var(--orange-band); color: var(--white); font-weight: 700; font-size: 0.8rem; padding: 5px 15px; border-radius: 20px; white-space: nowrap; } .pricing-card h3 { font-size: 1.5rem; margin-bottom: 10px; } .pricing-card .price { font-size: 3rem; font-weight: 800; margin-bottom: 5px; } .pricing-card .sub-text { font-size: 1rem; margin-bottom: 30px; } .pricing-card ul { list-style: none; padding: 0; margin: 0 0 30px; text-align: left; } .pricing-card ul li { padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .pricing-card ul li:last-child { border-bottom: none; } .pricing-card.highlighted ul li { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } /* Final CTA */ .final-cta { background-color: var(--hat-blue); color: var(--white); text-align: center; } .final-cta h2 { font-size: 2.25rem; color: var(--white); } .final-cta p { font-size: 1.125rem; margin-bottom: 40px; } /* Footer */ .site-footer { background-color: var(--charcoal-gray); color: var(--white); padding: 50px 0; text-align: center; } .site-footer ul { list-style: none; padding: 0; margin: 0 0 20px; display: flex; justify-content: center; flex-wrap: wrap; } .site-footer li { margin: 0 15px; } .site-footer a { text-decoration: none; color: var(--white); transition: color 0.3s ease; } .site-footer a:hover { color: var(--tuna-blue); } /* Terms of Service */ .terms-of-service-container { max-width: 800px; margin: 0 auto 80px; padding: 0 20px; } .terms-of-service { margin: 3rem 0; } .terms-of-service h2 { margin-top: 1.5rem; } .terms-of-service h1 { font-size: 2rem; font-weight: 700; text-align: center; } .terms-of-service .text-muted { color: #6c757d; } /* Checkout Page */ .payment-container { max-width: 600px; margin: 50px auto; padding: 40px; background-color: var(--white); border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .payment-header { text-align: center; margin-bottom: 30px; } .plan-summary { background-color: var(--light-gray); padding: 20px; border-radius: 8px; margin-bottom: 20px; } .plan-summary h3 { margin: 0; color: var(--hat-blue); } .plan-summary .cost-breakdown { margin-top: 10px; } .plan-summary .cost-breakdown p { margin: 5px 0; display: flex; justify-content: space-between; } .plan-summary .total-cost { font-weight: bold; font-size: 1.25rem; border-top: 1px solid #ccc; padding-top: 10px; margin-top: 10px; } .payment-form label { display: block; margin-bottom: 5px; font-weight: bold; } .payment-form input[type="text"], .payment-form input[type="email"], .payment-form input[type="tel"] { width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } .payment-form .card-details { display: flex; gap: 20px; } .payment-form .card-details div { flex: 1; } .payment-form button { width: 100%; padding: 15px; font-size: 1.2rem; border: none; border-radius: 50px; cursor: pointer; color: var(--white); background-color: var(--orange-band); font-family: 'Montserrat', sans-serif; font-weight: bold; transition: background-color 0.3s; } .payment-form button:hover { background-color: #e69500; } /* Contact Form */ .final-cta .container { text-align: left; } #contact-form { max-width: 600px; margin: 0 auto; background: rgba(255, 255, 255, 0.1); padding: 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.2); } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: white; } .form-group input, .form-group textarea { width: 100%; padding: 12px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 4px; box-sizing: border-box; font-size: 1rem; color: white; } .form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255, 255, 255, 0.7); } .form-group input:focus, .form-group textarea:focus { border-color: white; outline: none; box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); } /* ========================================================= 6. Media Queries (Responsiveness) ========================================================= */ @media (max-width: 768px) { .hero .container { flex-direction: column; text-align: center; } .hero-content, .hero-visual { width: 100%; padding: 0; margin-bottom: 40px; } .hero-visual { min-height: 250px; } h1 { font-size: 2.5rem; } .site-header .container { flex-direction: column; } .site-header nav { margin-top: 20px; } .site-header nav ul { flex-wrap: wrap; justify-content: center; } .site-header nav li { margin: 5px 15px; } .pricing-table { grid-template-columns: 1fr; } .pricing-card.highlighted { transform: scale(1.02); } .author-bio .bio-container { flex-direction: column; text-align: center; } } /* ========================================================= 7. Blog ========================================================= */ .blog-list-section { background-color: var(--white); } .blog-list-grid { display: grid; gap: 40px; grid-template-columns: 1fr; } @media (min-width: 700px) { .blog-list-grid { grid-template-columns: repeat(2, 1fr); } } .blog-list-item { background: var(--light-gray); border-radius: 10px; padding: 30px 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); transition: box-shadow 0.2s; display: flex; flex-direction: column; justify-content: space-between; } .blog-list-item h2 { font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--hat-blue); font-size: 2rem; margin-bottom: 15px; } .blog-list-item .blog-post-link { text-decoration: none; color: inherit; } .blog-list-item .blog-meta { font-size: 0.95rem; color: var(--charcoal-gray); margin-bottom: 10px; } .blog-list-item .blog-excerpt { margin-bottom: 25px; } /* Legal document styles (add this to your dedicated CSS file) */ /* ========================================================= 8. Cookie Banner ========================================================= */ /* Banner Container: Fixed at the bottom of the viewport */ .cookie-banner-container { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #2c3e50; /* Darker background */ color: #ecf0f1; /* Light text */ padding: 15px 0; z-index: 1000; /* Ensure it stays on top of everything */ box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); font-family: 'Open Sans', sans-serif; } /* Content Area: Centers the text and actions within the max width */ .cookie-banner-content { max-width: 1100px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; /* Allows wrapping on smaller screens */ } /* Text Styling */ .cookie-banner-content p { margin: 0; font-size: 0.9rem; line-height: 1.4; max-width: 65%; /* Constrains text width slightly */ } .cookie-banner-content a { color: #3498db; /* Blue link color */ text-decoration: underline; } /* Action Buttons Container */ .cookie-banner-actions { display: flex; gap: 10px; /* Space between buttons */ margin-top: 5px; /* Margin for mobile wrap */ } /* Generic Button Styles (Assuming you have primary/secondary classes defined elsewhere) */ .cookie-banner-actions .btn { padding: 8px 15px; border-radius: 5px; cursor: pointer; font-weight: 600; transition: background-color 0.2s; border: 1px solid transparent; } .cookie-banner-actions .btn-primary { background-color: #2ecc71; /* Green Accept button */ color: white; } .cookie-banner-actions .btn-secondary { background-color: transparent; border-color: #ecf0f1; color: #ecf0f1; }