/* ----- CSS RESET & NORMALIZE (MOBILE FIRST) ----- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; box-sizing: border-box; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1.6; background: #F7F8FA; color: #1C2833; font-family: 'Roboto', Arial, sans-serif; min-height: 100vh; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } img, svg { max-width: 100%; display: block; height: auto; } /* ----- BRAND FONTS (CDN USE RECOMMENDED IN ) ----- */ @import url('https://fonts.googleapis.com/css?family=Montserrat:700,800&display=swap'); @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap'); :root { --color-primary: #23527C; --color-secondary: #1C2833; --color-accent: #FFD600; --color-white: #fff; --color-bg: #F7F8FA; --color-gold: #FFD600; --color-shadow: rgba(44,45,51,0.08); --font-display: 'Montserrat', Arial, Helvetica, sans-serif; --font-body: 'Roboto', Arial, Helvetica, sans-serif; } /* ----- TYPOGRAPHY ----- */ h1, .h1 { font-family: var(--font-display); font-size: 2.3rem; font-weight: 800; color: var(--color-secondary); letter-spacing: -1.2px; margin-bottom: 16px; } h2, .h2 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--color-primary); margin-bottom: 16px; } h3, .h3 { font-family: var(--font-display); font-size: 1.15rem; color: var(--color-secondary); margin-bottom: 8px; font-weight: 700; } p { font-family: var(--font-body); color: var(--color-secondary); font-size: 1rem; margin-bottom: 12px; } strong { font-weight: 700; color: var(--color-primary); } span, li, td, th { font-family: var(--font-body); font-size: 1rem; color: var(--color-secondary); } /* ----- LUXURY_PEMIUM DETAILING ----- */ .gold { color: var(--color-gold); } hr { border: none; height: 1px; background-color: #E9E6DC; margin: 32px 0; } /* ----- CONTAINER & SECTION SPACING ----- */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; } .section { margin-bottom: 60px; padding: 40px 20px; } .content-wrapper { width: 100%; margin: 0 auto; max-width: 800px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } /* ----- FLEX LAYOUT UTILITIES ----- */ .card-container, .card-grid, .client-reviews-grid, .content-grid { display: flex; flex-wrap: wrap; gap: 24px; justify-content: flex-start; } .content-grid { gap: 20px; justify-content: space-between; } .card { margin-bottom: 20px; border-radius: 20px; background: var(--color-white); box-shadow: 0 4px 20px var(--color-shadow); position: relative; } .card-content { display: flex; flex-direction: column; justify-content: center; padding: 32px 24px 24px 24px; } .text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; } .testimonial-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 20px; background: var(--color-white); border-radius: 18px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 18px var(--color-shadow); border: 1px solid #EFE8D1; min-width: 260px; max-width: 400px; transition: transform 0.22s cubic-bezier(.6,.03,.29,1), box-shadow 0.18s; } .testimonial-card:hover, .testimonial-card:focus { transform: translateY(-6px) scale(1.025); box-shadow: 0 8px 32px 0 rgba(44,45,51,0.14); } .feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; } .client-reviews-grid { gap: 24px; margin-bottom: 40px; flex-wrap: wrap; justify-content: flex-start; } /* ----- NAVIGATION BAR ----- */ header { background-color: var(--color-white); box-shadow: 0 2px 16px var(--color-shadow); z-index: 100; position: relative; } .main-nav { width: 100%; max-width: 1200px; display: flex; align-items: center; justify-content: space-between; margin: 0 auto; padding: 16px 20px 0 20px; box-sizing: border-box; } .main-nav > a img { height: 46px; width: auto; } .main-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-left: 16px; } .main-nav ul li { display: flex; } .main-nav ul li a { font-size: 1rem; padding: 10px 18px; border-radius: 25px; background: transparent; font-family: var(--font-display); color: var(--color-primary); position: relative; font-weight: 700; letter-spacing: 0.01em; transition: color 0.16s, background 0.24s; } .main-nav ul li a:hover, .main-nav ul li a:focus { background: var(--color-accent); color: var(--color-secondary); box-shadow: 0 2px 8px var(--color-shadow); } .main-nav ul li a.btn-primary { background: var(--color-primary); color: var(--color-white) !important; box-shadow: 0 2px 12px rgba(35,82,124,0.10); font-weight: 800; padding: 12px 26px; border: none; transition: background 0.15s, color 0.15s, box-shadow 0.15s; } .main-nav ul li a.btn-primary:hover, .main-nav ul li a.btn-primary:focus { background: var(--color-accent); color: var(--color-secondary) !important; box-shadow: 0 6px 32px 0 var(--color-shadow); } /* ----- HAMBURGER/MOBILE MENU ----- */ .mobile-menu-toggle { display: none; background: var(--color-accent); color: var(--color-secondary); border: none; font-size: 2rem; padding: 10px 14px; border-radius: 14px; margin-left: auto; cursor: pointer; transition: background 0.15s, color 0.15s; z-index: 110; position: relative; } .mobile-menu-toggle:focus, .mobile-menu-toggle:hover { color: var(--color-primary); background: #ffe359; outline: none; } .mobile-menu { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; position: fixed; top: 0; left: 0; width: 85vw; max-width: 320px; height: 100vh; background: var(--color-white); box-shadow: 4px 0 20px rgba(44,45,51,0.22); z-index: 9001; transform: translateX(-110%); opacity: 0; pointer-events: none; transition: transform 0.32s cubic-bezier(.74,0,.17,1), opacity 0.15s; } .mobile-menu.open { transform: translateX(0); opacity: 1; pointer-events: auto; } .mobile-menu-close { margin: 0 0 16px 16px; background: none; border: none; font-size: 2rem; color: var(--color-primary); cursor: pointer; align-self: flex-end; } .mobile-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; padding: 0 20px; } .mobile-nav a { font-family: var(--font-display); color: var(--color-secondary); background: transparent; padding: 12px 0; font-size: 1.12rem; font-weight: 600; text-align: left; width: 100%; border-radius: 10px; transition: background 0.14s, color 0.11s; } .mobile-nav a:hover, .mobile-nav a:focus { background: var(--color-accent); color: var(--color-primary); } @media (max-width: 1024px) { .main-nav ul { gap: 10px; } } @media (max-width: 900px) { .main-nav ul li a { padding: 10px 8px; font-size: 0.96rem; } } @media (max-width: 768px) { .main-nav ul { display: none; } .mobile-menu-toggle { display: inline-flex; } } /* ----- HERO SECTION ----- */ .hero { background: linear-gradient(120deg, var(--color-primary) 82%, var(--color-accent) 150%); color: var(--color-white); padding: 58px 0 44px 0; position: relative; box-shadow: 0 4px 40px var(--color-shadow); } .hero .container { display: flex; flex-direction: column; align-items: center; } .hero h1, .hero h2 { color: var(--color-white); text-shadow: 0 2px 8px rgba(24,44,66,0.14); } .hero p { color: var(--color-white); font-size: 1.14rem; margin-bottom: 20px; max-width: 540px; } .hero .btn-primary { margin-top: 14px; } /* ----- BUTTONS & INTERACTION ----- */ .btn-primary, a.btn-primary { background: var(--color-gold); color: var(--color-secondary); border-radius: 25px; font-family: var(--font-display); font-weight: 800; padding: 13px 34px; font-size: 1.12rem; border: none; box-shadow: 0 2px 18px rgba(255,214,0,0.10); transition: background 0.15s, color 0.15s, box-shadow 0.18s; cursor: pointer; text-align: center; display: inline-block; } .btn-primary:hover, .btn-primary:focus { background: var(--color-primary); color: var(--color-white); box-shadow: 0 6px 32px 0 var(--color-shadow); } .btn-secondary, a.btn-secondary { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); border-radius: 24px; font-family: var(--font-display); font-weight: 700; padding: 11px 28px; font-size: 1rem; transition: background 0.15s, color 0.15s, box-shadow 0.18s; cursor: pointer; display: inline-block; margin-top: 8px; } .btn-secondary:hover, .btn-secondary:focus { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-secondary); box-shadow: 0 4px 20px 0 var(--color-shadow); } /* ----- CTA BANNER ----- */ .cta-banner { background: var(--color-secondary); color: var(--color-gold); border-radius: 18px; box-shadow: 0 4px 36px var(--color-shadow); margin-bottom: 40px; text-align: center; padding: 36px 0; } .cta-banner .content-wrapper { align-items: center; gap: 12px; } .cta-banner h2 { color: var(--color-gold); } .cta-banner p { color: #F4EFD6; } .cta-banner .btn-primary { margin-top: 10px; } /* ----- CAROUSELS AND CARD LISTS ----- */ .testimonial-carousel { display: flex; flex-wrap: wrap; gap: 24px; justify-content: flex-start; align-items: stretch; } /* ----- TABLES (PRICING) ----- */ table { width: 100%; margin: 24px 0 20px 0; border-collapse: collapse; border-radius: 14px; background-color: var(--color-white); box-shadow: 0 2px 18px var(--color-shadow); } thead th { background: var(--color-primary); color: var(--color-white); font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.01em; padding: 16px; text-align: left; border-top-left-radius: 14px; border-top-right-radius: 14px; font-weight: 800; } tbody td, thead th { padding: 15px 20px; border-bottom: 1px solid #EAE0B5; } tbody td { background: var(--color-white); } tbody tr:last-child td { border-bottom: none; } table .price { color: var(--color-primary); font-weight: 700; font-size: 1.1rem; } /* ----- BLOG CARDS ----- */ .blog-list { display: flex; flex-direction: column; gap: 32px; margin-bottom: 36px; } .blog-list article { background: var(--color-white); border-radius: 15px; box-shadow: 0 2px 18px var(--color-shadow); padding: 24px 18px 14px 24px; transition: transform 0.17s, box-shadow 0.13s; border: 1px solid #EFE8D1; } .blog-list article:hover, .blog-list article:focus-within { transform: translateY(-3px) scale(1.012); box-shadow: 0 10px 40px 0 rgba(44,45,51,0.12); } .blog-list h2 { font-size: 1.26rem; color: var(--color-primary); margin-bottom: 8px; } .blog-list p { margin-bottom: 16px; } .category-filters { display: flex; gap: 14px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; } .category-filters span { font-size: 0.96rem; color: var(--color-secondary); font-weight: 600; font-family: var(--font-display); } .category-filters a { color: var(--color-primary); font-weight: 600; background: #EAF6FF; border-radius: 12px; padding: 6px 13px; transition: background 0.13s, color 0.13s; } .category-filters a:hover, .category-filters a:focus { background: var(--color-accent); color: var(--color-secondary); } .search-bar { display: flex; gap: 10px; margin-bottom: 24px; } .search-bar input { flex: 1; padding: 11px 16px; border: 1px solid #D9CFA2; border-radius: 20px; font-size: 1rem; font-family: var(--font-body); background: var(--color-white); } .search-bar button { background: var(--color-primary); color: var(--color-white); border-radius: 20px; border: none; padding: 10px 18px; font-size: 1rem; font-family: var(--font-display); font-weight: 700; cursor: pointer; transition: background 0.15s, color 0.15s; } .search-bar button:hover, .search-bar button:focus { background: var(--color-accent); color: var(--color-secondary); } /* ----- FAQ & TIPS ----- */ .faq-summary, .faq-highlights { background: #FBF8E6; border-left: 6px solid var(--color-gold); border-radius: 12px; padding: 24px 18px 16px 22px; margin-bottom: 18px; margin-top: 12px; box-shadow: 0 2px 10px rgba(255,214,0,0.06); } .quick-tips-list { display: flex; flex-direction: column; gap: 13px; margin-bottom: 24px; } /* ----- CONTACT ----- */ .contact-details { background: var(--color-white); border-radius: 16px; box-shadow: 0 2px 16px var(--color-shadow); margin-bottom: 20px; padding: 20px 22px; } .map-location { margin-bottom: 18px; padding: 16px 0 0 0; } /* ----- SPECIAL CLASSES ----- */ .thank-you-message { background: #F9F6F2; border-radius: 14px; padding: 22px 18px; box-shadow: 0 2px 8px 0 var(--color-shadow); margin-bottom: 18px; } .next-steps-info { background: #EAEEF5; border-radius: 14px; padding: 18px 15px; margin-bottom: 16px; } .price { color: var(--color-primary); font-weight: 800; } .review-submission-info { margin-top: 32px; padding: 22px 18px; background: #FAF7ED; border-left: 5px solid var(--color-gold); border-radius: 13px; } /* ----- STAR RATING ----- */ .stars { color: var(--color-gold); font-size: 1.3rem; letter-spacing: 3px; font-family: var(--font-display); margin-bottom: 6px; } /* ----- FOOTER ----- */ footer { background: var(--color-primary); color: var(--color-white); padding: 32px 0 18px 0; margin-top: 70px; box-shadow: 0 -2px 16px var(--color-shadow); width: 100%; } .footer-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-bottom: 14px; } .footer-nav ul li a { color: var(--color-accent); font-family: var(--font-display); font-size: 1rem; font-weight: 600; transition: background 0.15s, color 0.14s; border-radius: 10px; padding: 7px 10px; } .footer-nav ul li a:hover, .footer-nav ul li a:focus { background: var(--color-accent); color: var(--color-primary); } .footer-contact { text-align: center; color: #FAF1D7; font-size: 0.98rem; letter-spacing: 0.05em; } /* ----- COOKIE CONSENT BANNER ----- */ .cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: var(--color-white); box-shadow: 0 -4px 32px rgba(44,45,51,0.12); padding: 28px 10vw 18px 10vw; display: flex; flex-wrap: wrap; align-items: center; gap: 22px; justify-content: space-between; border-top: 2px solid var(--color-gold); animation: cookiebannerfadein 0.6s; } @keyframes cookiebannerfadein { 0% {opacity:0;transform:translateY(60px);} 100%{opacity:1;transform:translateY(0);} } .cookie-banner p { font-size: 1rem; color: var(--color-secondary); margin-bottom: 0; flex: 2 1 230px; } .cookie-banner-actions { display: flex; gap: 14px; flex-wrap: wrap; } .cookie-banner button { font-family: var(--font-display); border-radius: 24px; padding: 11px 18px; border: none; background: var(--color-gold); color: var(--color-secondary); font-weight: 700; font-size: 1rem; cursor: pointer; transition: background 0.16s, color 0.13s; } .cookie-banner button.cookie-settings { background: var(--color-primary); color: var(--color-white); border: 1.5px solid var(--color-primary); } .cookie-banner button.cookie-settings:hover, .cookie-banner button.cookie-settings:focus { background: var(--color-accent); color: var(--color-secondary); } .cookie-banner button:hover, .cookie-banner button:focus { background: #ffe359; color: var(--color-primary); } /* ----- COOKIE MODAL (PREFERENCES) ----- */ .cookie-modal-overlay { position: fixed; top: 0;left: 0;right: 0;bottom: 0; background: rgba(32,33,36,0.39); z-index: 10000; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.21s; } .cookie-modal-overlay.open { opacity: 1; pointer-events: auto; } .cookie-modal { background: var(--color-white); min-width: 310px; max-width: 95vw; width: 420px; border-radius: 17px; box-shadow: 0 12px 42px 0 rgba(68,65,58,.15); padding: 36px 24px 24px 24px; z-index: 10001; animation: modalFadeUp 0.39s cubic-bezier(.23,1.1,.63,1) 1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } @keyframes modalFadeUp { from {transform:translateY(60px); opacity:0;} to {transform:translateY(0); opacity:1;} } .cookie-modal h3 { color: var(--color-primary); font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 0; } .cookie-categories { display: flex; flex-direction: column; gap: 13px; width: 100%; margin-bottom: 13px; } .cookie-category { display: flex; justify-content: space-between; align-items: center; background: #f8f7f0; border-radius: 9px; padding: 11px 15px; color: var(--color-secondary); font-size: 1rem; font-family: var(--font-body); } .cookie-category input[type='checkbox'] { accent-color: var(--color-gold); width: 1.1em; height: 1.1em; margin-left: 9px; } .cookie-category.essential { opacity: 0.7; font-weight: 700; } .cookie-modal-buttons { display: flex; gap: 11px; margin-top: 12px; align-self: flex-end; } .cookie-modal-buttons button { padding: 9px 20px; font-size: 1rem; border-radius: 22px; box-shadow: 0 2px 10px rgba(255,214,0,0.09); } /* ----- RESPONSIVE STYLES (MOBILE-FIRST) ----- */ @media (max-width:950px) { .container, .main-nav { max-width: 92vw; padding-left: 4vw; padding-right: 4vw; } } @media (max-width: 880px) { .testimonial-card, .card, .faq-summary, .faq-highlights, .thank-you-message, .next-steps-info, .review-submission-info { max-width: 100%; } } @media (max-width: 768px) { .section { margin-bottom: 34px; padding: 22px 8px; } .container, .main-nav { max-width: 100vw; padding-left: 10px; padding-right: 10px; } .content-wrapper { padding-left: 0 !important; padding-right: 0 !important; } .hero { padding: 39px 0 29px 0; border-radius: 0; } .testimonial-carousel { flex-direction: column; gap: 20px; } .client-reviews-grid { flex-direction: column; gap: 20px; } .text-image-section { flex-direction: column; gap: 20px; align-items: flex-start; } .blog-list { gap: 18px; } .cta-banner { border-radius: 0; padding: 22px 0; } .cookie-banner { flex-direction: column; align-items: flex-start; padding-left: 16px; padding-right: 16px; gap: 14px; } } @media (max-width: 600px) { h1, .h1 {font-size: 1.3rem;} h2, .h2 {font-size: 1rem;} h3, .h3 {font-size: 0.96rem;} .footer-contact, .footer-nav ul li a {font-size: 0.93rem;} .thank-you-message, .next-steps-info, .review-submission-info, .faq-summary, .faq-highlights {padding:12px 10px;} .testimonial-card, .card {padding: 14px 10px;} .btn-primary, .btn-secondary {font-size: 0.98rem; padding: 10px 18px;} } /* ----- PRINT SMALL OVERRIDES ----- */ @media (max-width:400px) { .cookie-modal { width: 97vw !important; min-width: 90vw; padding: 18px 3vw 12px 3vw; } } /* ----- MICRO-ANIMATIONS ----- */ .btn-primary, .btn-secondary, .main-nav ul li a, .mobile-menu-toggle, .footer-nav ul li a, .category-filters a, .cookie-banner button, .cookie-modal-buttons button { transition: background 0.19s, color 0.14s, box-shadow 0.18s, transform 0.15s; } .btn-primary:active, .btn-secondary:active, .main-nav ul li a:active, .mobile-menu-toggle:active { transform: scale(0.96); } /* ----- UTILITY CLASSES ----- */ .flex-row { display: flex; flex-direction: row; gap: 20px; } .flex-col { display: flex; flex-direction: column; gap: 16px; } .align-center { align-items: center; } .align-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; } .mb-20 { margin-bottom: 20px; } .mb-32 { margin-bottom: 32px; } .mt-20 { margin-top: 20px; } .mt-32 { margin-top: 32px; } /* ----- LUXURY GOLD DETAILS ----- */ .gold-underline { border-bottom: 3px solid var(--color-gold); display: inline-block; border-radius: 2px; } /* ----- REMOVE OUTLINES CLEANLY FOR BRANDING, KEEP FOR ACCESSIBILITY WHEN FOCUS VISIBLE ----- */ a:focus-visible, button:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible { outline: 2.5px solid var(--color-gold); outline-offset: 2px; z-index: 99; } /* ----- PREVENT ABSOLUTE POSITIONING/OVERLAPPING ----- */ .card, .testimonial-card, .blog-list article, .faq-summary, .faq-highlights, .thank-you-message, .next-steps-info, .review-submission-info { position: relative; z-index: 1; } /* ----- END OF CSS ----- */