/* 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; } }